React와 Webpack으로 Youtube에서 한글 댓글만 보여주는 chrome extension 개발 하기

개발 결과물(Korean Comments)은 크롬 웹 스토어에 배포해 두었습니다.
https://chrome.google.com/webstore/detail/korean-comments/eknankncobchjfgoddbonnpdlhdcjnod?hl=ko
이 글은 개발 과정에서 느낀 점을 위주로 작성되었고, 구체적으로 쓰인 기술에 대한 글은 따로 정리하겠습니다.

개발 배경

저는 Youtube 영상을 볼 때 꼭 댓글을 챙겨보는데, 어떤 영상은 우리나라의 영상인데도 영어 댓글이 더 많아서 불편함을 느낀 적이 많았습니다.(유튜브에서는 글을 쓰는 현재도 해당 기능을 제공하지 않습니다.) 크롬에서 익스텐션을 만들면 한글 댓글만 출력하는 것이 가능하겠다고 생각하였습니다.

어떻게 만들 것인가?

제가 고려했던 방식은 크게 두 가지로 나눌 수 있습니다.

1. 유튜브 웹 페이지의 댓글 컴포넌트를 검사해서 보이거나, 보이지 않도록 하는 방식
2. 따로 웹 서버에 Youtube Data api를 활용해서 댓글을 필터링 해 저장해 두고, 웹 페이지에 표시하는 방식

두 가지 방법은 각각 다음과 같은 장단점이 있었습니다.

1. 유튜브 웹 페이지의 댓글 컴포넌트를 검사해서 보이거나, 보이지 않도록 하는 방식
   • 장점
     • 유튜브 댓글 컴포넌트의 모든 기능을 그대로 사용할 수 있습니다.
     • 구현이 비교적 간단합니다. (이 방식은 react를 사용할 필요도 없습니다.)
     • 서버가 따로 필요하지 않습니다. (chrome extension만 배포하면 끝)
   • 단점
     • 한글 댓글의 수가 영어 댓글에 비해 작을 수록 로딩이 느립니다. 유튜브가 댓글을 로딩할 때 한 번에 많은 수의 댓글을 요청하지 않기 때문입니다.
2. 따로 웹 서버에 Youtube Data api를 활용해서 댓글을 필터링 해 저장해 두고, 웹 페이지에 표시하는 방식
   • 장점
     • 한글 댓글 수가 적든 많든, 비슷한 속도로 한글 댓글을 확인할 수 있습니다.
   • 단점
     • 서버의 데이터를 통해 댓글 컴포넌트를 직접 만들어야 합니다. 즉 손이 많이 갑니다.
     • 원래 댓글 컴포넌트의 모든 동작을 구현해내지 못할 가능성이 큽니다.
     • 서버를 작성하고 유지하는 비용이 발생합니다.

약간 당연하지 않은 선택

장단점을 비교해 보았을 때 1번을 선택하는 게 타당해보이지만, 저는 그렇게 타당하지 못했습니다. ㅠㅠ

제가 그 당시 보던 영상들은 블랙핑크나 방탄소년단의 뮤직비디오였습니다. 추천 댓글에서 영어 댓글과 한글 댓글의 비중은 거의 100:1에 가까웠고, 저는 해당 문제를 굉장히 크게 생각하게 되었습니다. 1번 방식으로 간단히 구현해 보았을 때 한글 댓글의 로딩 시간이 너무 오래(적어도 3분 이상) 걸린다고 판단하였고, 저는 2번을 선택하게 되었습니다.

개발과 배포가 끝나고 난 후, 1번이 더 나은 선택지었다는 것을 알게 되는데, 그 이야기는 나중에 하겠습니다.

아키텍쳐

Extension

• 현재 유튜브 영상의 id를 가져와서 서버에 한글 댓글을 요청합니다.
• 서버에서 보내준 댓글 데이터를 익스텐션 화면에 보여줍니다.

Server

• 유튜브 영상의 id로 Youtube Data API에 댓글을 요청합니다.
• 댓글을 한글로 필터링해서 응답해주고, db에 저장해 둡니다.
• 만약 현재 db에 저장된 영상의 요청이 오면, db에 저장해 둔 값을 응답합니다.

겪었던 문제점

댓글 로딩이 너무 오래걸린다

처음 1안(유튜브 페이지의 댓글 컴포넌트를 검사해서 보일지 말지 결정한다)의 경우, 한글 댓글의 비중이 너무 작으면 너무 오랜 시간을 기다려야 한글 댓글을 볼 수 있다는 문제점이 있었습니다.

이는 유튜브 웹 페이지에서 한 번에 5개의 댓글 요청만을 보내기 때문인데, 한 번에 더 많은 수의 댓글을 볼 수 있는 방법을 찾다가 Youtube Data API를 찾아보게 되었습니다. 하지만 여기도 한 번에 최대 100개의 댓글만을 요청할 수 있는 제한이 존재했습니다. 익스텐션에서 요청을 보내면 영상마다 너무 많은 요청을 보내게 될 거라는 생각에 DB를 두기로 하였습니다.

현재 서버에서는 한 영상에 대해서 3일간 댓글 데이터를 갱신하지 않고 DB에 있는 데이터를 응답하는 방식으로 동작합니다. 한 번에 받아올 수 있는 댓글 수가 100개로 너무 적다보니 댓글을 갱신할 때 시간이 꽤 오래 걸리는데, 이 문제는 사용자가 많아지면 한 번 더 생각해볼 생각으로 두었습니다.

유튜브 댓글 컴포넌트를 바닐라 스크립트로 만드는 게 너무 힘들다

2안의 초기 구조는 먼저 서버에 댓글 데이터를 요청하고, 받은 데이터로 유튜브 웹 페이지의 댓글 컴포넌트를 직접 흉내내어 만들겠다는 전략이었습니다.

유튜브의 스타일을 그대로 이용하기 위해서였는데, 자세히 보니 유튜브의 렌더링 된 댓글 구조가 꽤 복잡하였습니다.

바닐라 스크립트로 만드려니 코드가 너무 길고 복잡해지는 문제가 있었고, 저는 react를 도입해서 해당 문제를 해결하려 하였습니다. 이 문제는 왜 프론트 프레임워크를 사용하는가? 라는 주제로 따로 글을 작성할 예정입니다.

CRA(create-react-app) 구조는 chrome extension과 맞지 않다

저는 여태까지 CRA로만 react app을 만들었었습니다. 따로 문제가 되는 상황이 지금까지는 없었기 때문인데, 이번에 처음 문제가 발생하게 되었습니다.

그래서 직접 webpack 설정을 하여 개발하였고, 덕분에 이번 프로젝트를 통해 웹팩의 역할에 대해서 제대로 이해할 수 있는 계기가 되었습니다.

해당 설정 과정은 react와 webpack으로 chrome extension 개발 환경 구축하기라는 주제로 글을 작성할 예정입니다.

CORB 이슈

2안의 초기 구조를 개선해야 했던 문제점이 바로 CORB(cross origin read blocking)였습니다. 제가 만든 서버에서 가져온 데이터로 유튜브 웹페이지를 수정하려고하면 이 문제가 발생하면서 데이터가 가져와지지 않았는데요. 저는 이 문제를 따로 extension popup에 댓글을 표시하는 것으로 우회하였습니다. 제가 느꼈던 CORB가 발생하는 상황에 대해서도 글을 작성할 예정입니다.

느낀점

배포하고나서 내 앱을 검색하기 위해서 korean comments를 검색했는데, 먼저 검색되는 extension이 있었습니다(제가 아이디어를 생각했던 올해 초만 해도 없었었는데ㅠㅠ). Youtube Comment Language Filter 라는 서비스인데요. 이 서비스는 제가 생각했었던 1안을 토대로 구현을 하셨더라구요. 이 서비스를 보면서 제가 너무 엣지케이스만을 위한 서비스를 만들었다는 것을 깨달을 수 있었습니다. 실제로 사람들이 한글 댓글을 보고 싶어하는 대부분의 영상의 경우, 한글 댓글의 수가 제가 걱정했던 것처럼 그렇게 적지만은 않았습니다. 1안의 아이디어가 조금의 엣지를 포기하더라도 괜찮을 만큼의 장점을 가지고 있었다는 것을 이번 기회를 통해 알게 되었습니다.

해당 앱과 비교했을 때 제 앱은 영상의 댓글을 초기화 할 때마다 최대 1분여의 시간이 소요되는 점, 유튜브 댓글의 원 기능(좋아요, 대댓글 작성 등)을 사용할 수 없는 점, 따로 팝업을 열어 댓글을 봐야된다는 점 등의 단점이 있습니다.

제가 만든 서비스가 해당 서비스보다 나은 점은 한글 댓글의 비중이 현저히 작을 경우 로딩속도가 더 빠르다라는 점 하나입니다.