안녕하세요, 리플에이아이 프론트엔드 개발자 이종훈 입니다.제가 입사 후 첫 번째로 맡았던 프로젝트는 라는 서비스의 크롬 익스텐션 제작이었습니다. 리플하우스는 저희 회사에서 연구한 인공지능 모델을 사용한 솔루션으로, 유튜브의 댓글을 분석해 현재 영상 시간과 가장 일치하는 댓글을 그 시간에 실시간 채팅처럼 볼 수 있도록 해줍니다. (백문이 불여일견이라고, 한번씩 사용해보시면 더욱 더 빠른 이해를 하실 수 있습니다! 웹스토어 링크 👉 )
리플하우스 (RippleHouse)
RippleHouse
(처음 로그인을 하면 승인 되지 않은 앱이라고 뜨는데 이 부분은 아래에서 설명하겠습니다)
이 포스트에서는 리플하우스 크롬 확장 프로그램(Chrome Extension)을 개발하면서 겪었던 문제들을 서술하고, 그 문제들을 어떻게 해결했는지 정리를 해보려 합니다.
편리하게 설치하고, 다른 페이지로 이동할 필요 없이 유튜브 사이트에서 그대로 저희의 서비스를 이용할 수 있도록 크롬 익스텐션을 개발하여 크롬 웹스토어에 출시하는 것을 목표로 했습니다.
그러나 저희가 자체적인 사이트에서의 서비스를 개발하는 것이 아니라 다른 서비스 위에서 동작하도록 하려다 보니 일반적인 웹 어플리케이션에 비해서 제약 사항이 엄청나게 많았습니다. 익스텐션 개발의 경험이 없었던데다가, 한국 개발자들의 개발 포럼이나 관련 레퍼런스가 거의 존재하지 않아 개발에 어려움에 있었습니다.
해결하는데 가장 시간이 오래걸렸던 이슈 세 가지는 다음과 같습니다.
먼저 어디에 우리의 DOM(Document Object Model)이 삽입이 되어야하는지 확인해보기 위해 우선 개발자 도구를 켜고 DOM들을 하나하나 살펴보기 시작했습니다. 정말 아득히 먼 곳에 제가 찾던 부분의 DOM이 있더라구요!
html/body/ytd-app/div/ytd-page-manager/ytd-watch-flexy/......
이 를 사용하여 DOM을 확인할 수 있었습니다. 이를 토대로 시도해 보니 DOM은 정상적으로 삽입이 되었습니다! 다만 URL이 변경될 때 DOM이 새로 그려지지 않고, 기존 DOM이 계속 유지가 되는 문제가 발생했습니다. 링크
이 때 생각해본 해결 방안은
여러 테스트 코드를 작성하여 실험한 결과 2번의 방법이 가장 안전하고 확실하다고 판단되어 이 방법을 사용하기로 했습니다. URL 변경이 일어나면 DOM을 삭제 후 새로 그리게 되어 이전의 URL이 나오는 등의 문제를 해결했습니다. 1번의 방법은 사용자에게 맞췄을 때 정상적으로 동작하지 않을 수 있고, 클라이언트 사양에 따라 반응 속도가 다를 수 있기 때문에 문제가 일어날 수 있었습니다.
테스트를 해보니, 유튜브 기능 자체는 정상적으로 동작하지만 유튜브 계정을 변경했을 때 리플하우스에서의 계정은 변경되지 않고 그대로 유지되는 문제가 있었습니다.
해결을 위해서 유튜브에서는 어떤 방식으로 로그인 된 계정 정보를 관리하는지 확인해봤습니다. 이 정보는 쿠키로 관리되고 있었기 때문에, 해당 쿠키 값이 변경이 된다면 다른 계정으로 변경되었든 계정 자체가 로그아웃이 되었든 로그인된 계정에 변화가 생겼다고 판단할 수 있었습니다. 따라서 이 쿠키 값이 변경되면 저희 리플하우스 서비스에서도 로그아웃 처리를 해서 계정 정보를 동일하게 유지할 수 있도록 구현하였습니다.
처음에 이 문제는 프론트엔드의 로직 문제일 것이라고 생각해서 구현 상의 각 단계마다 로그를 하나하나 삽입 후 걸리는 시간을 테스트해보았습니다.
이런 식으로 데이터 가공 시간 및 데이터 통신 시간을 체크해 가장 오래 걸리는 부분을 개선하기로 했습니다. 그러나 확인 결과 데이터를 가공하는 실질적 로직 부분은 아무리 길어도 1~2초 이내였고, 유튜브의 댓글을 크롤링하는데 가장 오랜 시간이 걸렸습니다. 유튜브 공식 API를 사용하여 크롤링하면 한 번에 모든 댓글을 받아올 수 있는 것이 아니라 한 페이지 당 일정한 개수의 댓글만 받아올 수 있는데, 모두 받아오기 위해서는 그 페이지의 끝에 도달할 때까지 기다려야 했기 때문에 크롤링 속도가 매우 느렸습니다.
유튜브 댓글을 받아오는 속도 자체는 개선이 불가능했지만, 사용자의 입장에서 대기 시간을 축소할 방안이 없을까 생각을 하다가 으로 로직을 변경했습니다. 실질적으로 사용자가 재미를 느낄만한 도움되는 댓글들은 인기순으로 정렬했을 때 상위에 있기 때문에 모든 댓글을 다 받아올 필요가 없다고 판단했습니다. 인기순으로 정렬했을 때 하위에 있을 너무 짧은 댓글이나 영상과 관련이 없는 댓글은 실시간 채팅에서 보여줄 필요가 없고, 인공지능 모델의 추론에 오히려 방해가 될 수도 있습니다. 댓글을 시간 순이 아닌 인기 순으로 정렬을 해서 상위에 있는 댓글만 받아오는 것
이 결과 댓글이 많은 영상에서는 대기 시간이 많이 줄어들었지만, 그래도 완전히 줄어들지는 않았습니다. 그래서 대기 시의 스켈레톤UX를 이용해 사용자가 지루하지 않도록 작업했습니다.
익스텐션 어느 정도 완성이 되고 이제 배포할 시간이 왔습니다. 웹스토어 배포 역시 한번도 해본 적이 없는 작업이었습니다.
처음에는 배포가 왜 실패하는지 알 수 없어서 레퍼런스를 찾던 중 를 발견했습니다. 굉장히 배포를 많이 실패하셔서, 그로 인한 두려움을 가지고 배포를 시작하였습니다… zoom인터넷 익스텐션 회고기
한 4번째 반려 후 드디어 초록창이 뜨기 시작했고
이런 값진 결과를 얻어낼 수 있었습니다. 여기까지 오면서 겪었던 문제를 서술하려 합니다.
생각보다 익스텐션 배포할때 굉장히 친절하게 설명을 해주는 편입니다. 가장 반려가 많이 된 이유는 manifest.json 에는 기능을 삽입해두고 실제로 사용을 안한 경우였습니다. 또한 퍼미션이 많으면 많을수록 웹스토어 반영 시점이 늘어나게 됩니다. 저희 같은 경우는 크게 퍼미션이 많지 않았던데다가, 사용하지 않는 퍼미션은 삭제하니 순조롭게 배포가 완료 되었습니다.
이 부분은 아직 해결 중인 부분이고 가장 크게 반려가 되고 있는 부분입니다. 그래서 처음 Oauth 로그인을 할 때, 승인되지 않은 앱이라는 알림이 뜹니다. 요구 사항 중 홈페이지와 관련된
이렇게 체크리스트를 준비하여 하나하나 체크중입니다. 조금 더 나은 환경에서 리플하우스를 사용하실 수 있게 준비하겠습니다!
제가 겪었던 실수들을 똑같이 겪지 않도록 조금이나마 도움이 됐으면 합니다.
All Rights Reserved © 2021 RippleAI Inc.
가입하기
