유용한 정보

Co-Browsing!! 실시간 브라우저 화면 공유

CyberI 2015. 9. 3. 20:03

WEB이 발달하면서 서비스 화면은 점점 보기 좋고 사용하기 좋게 변하고 있습니다. 하지만 그에 따라 사용법도 점점 복잡해지고 있습니다. 새로운 고객이 우리 서비스 이용에 어려움을 느낀다면 이를 모른척 한다면 진정한 마켓팅을 펼칠수 있다고 볼수 어렵겠지요. 사용자의 편의를 증대 시키기 위한 많은 노력이 있습니다. 실시간 채팅, email, 고객게시판, 원격 서비스 등등..

하지만 HTML5세상이 열리고 웹표준의 중요성이 강조 되면서 activex및 npapi등의 사용이 어려워 짐에 따라 기존의 솔루션들은 사용할 수 없는 솔루션들이 되어가고 상황이며, 개인적으로 원격서비스를 대처할 수 있는 기능이 웹으로서는 불가하다고 생각하고 있었습니다. 

하지만!!!! 역시 세상은 넓습니다... 이미 수 많은 똑똑하신분들이 고민하고 고민하여 co-browsing 이라는 기술을 선보입니다. 일단 co-browsing 이 어떤것인지 아래의 동영상으로 한번 보시길 바랍니다. 



와..... 굉장합니다.. 고객이 보는 화면을 그대로 보고 또 조작까지 할수 있다니요.. 게다가 특별한 설치파일없이 순수 웹 만으로 말입니다. 사실 Co-Browsing이라는 기술은 2000년도 초기부터 존재했습니다. 그 당시에는 websocket이라는 기술도 없고 브라우저상에 특별한 제약도 그리 심하지 않아 많은 회사들이 자신만의 방법으로 구현하여 서비스 하고 있었습니다. 하지만 이제는 각 브라우저마다의 수 많은 제약을 이겨내고 모바일과 테블릿 시장까지도 지원해채-야 할 상황이므로 이를 모두 커버할 수 있는 기술이 필요해진 것이지요. 

그럼 이제 co-browsing이 어떤 원리로 동작하는지 하나의 동영상을 더 준비하였습니다. LiveLOOK이라는 회사는 2008년 이 시장에 진입하여 빠르게 성장하고 2014년 6월 오라클에 인수되었습니다. 이제 오라클이 저 기술을 받아 고객서비스를 하고있는것이지요.


현재 Browser에서 Co-Browsing을 구현하는 방법은 크게 3가지 정도가 있습니다. 

  • Co-Browsing based on Screen Sharing in the Browser
    브라우저의 화면을 캡쳐하고 지속적으로 세션에 참여 하고 있는 참가자에게 push하는 방식으로 각 참가자의 마우스 포인터는 전송된 이미지 위에 오버레이방식으로 보여집니다. 때때로 이미지 캡쳐는 중계서버의 가상 브라우저에서 이루어지는 케이스도있습니다. 

    + 참가자들 모두는 완벽하게 동일한 스크린샷을 볼수 있습니다.
    + 상대적으로 구현하기 쉽습니다.

    - 참가자들간의 browser resolution이 다르다면 마우스 포인터 및 각 화면에 문제가 발생할 수 있습니다.
    - 이미지이기 때문에interactive element에 대한 user experience가 나쁨니다.
    - 스크롤중인 화면에 대한 화질이 나쁨니다.
    - 수많은 이미지를 전송하기 위한 bandwidth가 필요합니다. (마우스 포인터 및 화면의 버벅임 발생)
    - 민감요소들도 이미지에 그대로 나오기 때문에 보안이슈가 발생합니다.
    - 쿠키나 flash objects에 대한 공유가 이루어지지 않습니다.

  • Co-Browsing with a Proxy-based approach
    브라우저간의 세션을 Proxy를 이용하여 공유합니다.proxy서버가 web page를 로드하고 세션에 접속된 clinet에게 webpage를 분배 합니다. 이 방법은 최적의 브라우저간 호환성을 보장하고 모바일 기기에서도 가장 좋은 user experience를 제공합니다만.... 가장 복잡한 방식입니다.

    + 동기화가 굉장히 빠릅니다. 
    + 각 참가자들간의 Interaction이 지원됩니다. (서로 화면을 컨트롤할 수 있습니다.)
    + 모바일 지원도 훌륭합니다.
    + 다른 오래된 브라우저와도 호환성이 좋습니다.
    + proxy-base이기때문에 보안성이 굉장이 높습니다.

    - 구현 방식이 굉장히 복잡합니다.
    - 화면의 리다이렉트가 필요 합니다.(프락시 서버로의 접속이 필요)

  • Co-Browsing with Document Object Model Synchronization
    webpage의 dom을 연결된 다른 참가자들과 지속적으로 동기화 시키는 방식입니다. 구현 방식은 간단하지만 상대방 브라우저에 따라 다르게 랜더링이 될수 있습니다.

    + 상대적으로 구현하기 쉽습니다.
    + 화면의 리다이렉트 없이 가동즉시 동작합니다. 사용자는 co-browsing이 시작됐는지도 모르게 할수도 있습니다.

    - 브라우저마다 다르게 동작합니다. 사용자의 브라우저에 따라 랜더링이 다르게 됩니다.
    - 보안에 굉장히 취약합니다. 스크립트 전송될수 있으며 이로 인해 cross-site scripting 문제가 발생할수도 잇습니다.


위 3가지의 Co-Browsing 구현방법에서 공통적으로 가장 중요한것은 바로 보안입니다. 고객의 browser의 전체를 모두 볼수 있기 때문에 고
객의 민감정보등이 유출될 가능성을 사전에 차단해야 하며 동기화 과정중에 cross-site scripting등 해결해야할 문제들이 많이 있습니다. 세가지 방식중 한 가지만을 사용하기 보다는 각방식의 장점들을 절묘히 조합하는것이 중요할 것으로 생각됩니다.


고객서비스의 중요성은 아무리 강조해도 부족하지 않습니다. 


참고 URL

1. http://www.quora.com/What-is-the-best-co-browsing-tool-to-use-when-talking-chatting

2. http://www.surfly.com

3. http://www.twiddla.com/home.aspx