플라바 클리퍼 제작 후기

얼마전에 Chrome 확장기능(Extension)으로 플라바 클리퍼(Flava Clipper) 를 런칭했습니다. Chrome에 우측 상단에 아이콘을 항상 상주시켜 놓고 필요할때 현재 웹페이지를 Flava로 저장하는 아주 간단한 기능이죠. 사실 개인적인 필요에 의해 만들어 졌는데요. 실제로 런칭하니까 아주 뿌듯합니다!

처음에는 일단 프로토타입으로 만들고 이걸 디자인팀에 공유했는데, 뭔가 이미 디자인이 만들어 지고 있어서 이러지도 저러지도 못하다가 조금 더 발전시켜 런칭하게 되었습니다. 최초 프로토타입은 웹앱과 동일하게 웹페이지의 URL만 가져다가 서버에서 이미지의 URL만 파싱해서 사용자에게 고르도록 유도하는 방식이었는데요. 이렇다 보니 웹앱과 차별화 요소가 없다고 판단하여 확장기능의 접근 권한을 대폭 상승시켜서 배포버전에는 사용자 액션이 있을 경우 웹페이지에 직접 스크립트를 삽입해 웹페이지의 요약글과 이미지를 가져오도록 변경하였습니다.

플라바 클리퍼는 다른 클리퍼와 달리 웹페이지의 본문이 전부 필요하지 않고 이미지와 요약글 정도만 필요해서 구조는 생각보다 간단한 구조로 되어 있는데요. 실제로도 소스코드가 그렇게 길지 않습니다. 클리퍼 라이브러리가 들어있는 background.js가 있고 이외에 팝업, 사용자 동작에 의해 웹페이지를 파싱하기 위한 스크립트, 플라바 웹앱의 로그인 여부를 체크하는 부분 이렇게 나뉘어져 있고 대부분의 동작은 background.js가 처리하게 되어 있고 나머지는 거들기만 합니다^^

제가 사용자 웹페이지를 파싱하면서 가장 애먹었던 부분이 프레임인데요. 웹페이지가 단순하면 쉽겠지만 N사의 블로그만 봐도 약 10여개의 프레임으로 구성되어 있습니다. 이 중에는 광고도 있고 사용자 분석을 위한 것도 있지만 실제 본문이 iframe 안에 들어있기 때문에 난감한 상황이 발생합니다. 심지어 Opengraph 스펙의 요약글을 가져오기 위해서는 프레임을 열심히 타고 들어가서 Opengraph 메타태그를 찾아내야 하기 때문에 더욱 더 힘들었죠.

이미지의 경우에는 복수의 이미지중에 사용자가 하나를 택하는 방식이지만 요약글의 경우에는 하나만 선택이 되어야 하기 때문에 이 부분을 해결하기 위해 각 프레임 단위로 document.body의 innerText의 길이를 측정하여 마지막에 프레임별로 가장 긴 텍스트를 가진 프레임을 채택하는 방법을 선택 했습니다. 하지만, 이 역시도 단점은 있는데요. Google Plus나 Facebook의 소셜댓글은 iframe을 이용하기 때문에 댓글의 텍스트 길이가 본문보다 긴 경우에는 프레임을 댓글 프레임으로 선택하기 때문에 방법이 없더군요. 그래서 이 부분은 직접 URL을 차단하는 방법을 사용했습니다. 더 좋은 방법을 더 찾아봐야 하긴 하겠지만요.

이렇게 사용자가 선택할 데이터들을 수집하여 사용자가 “저장”버튼을 누르면 플라바 서버로 보내지게 되고 이 부분을 백그라운드로 처리 하여 저장이 완료되면 Notification API를 이용해 사용자에게 알려주게 됩니다. 이렇게 주절주절 설명해 놓으면 사실 별거 아닌 것 같지만 은근히 시간이 걸리더라구요. 그 외에 고생했던 부분이라면 웹페이지 파싱해서 백그라운드와 통신하는 부분인 것 같습니다. 이 부분은 처음에 개념이 안 잡혀서 고생했습니다-_- 나중에야 개념을 잡았구요.

시간은 걸리더라도 웹브라우저 확장기능은 주로 사용하는 언어로 만들어 지는 만큼 만들어볼만한 가치가 있다라는 생각이 듭니다. 다음에는 Firefox Add-on에 도전을…?!

Originally published at https://underfront.com.
Created at Jul 17, 2013