넷플릭스 장르별 검색: 크롬 익스텐션을 만들어 보았다
Netflix에서 간편한 장르 검색을 위한 chrome extension
넷플릭스의 콘텐츠를 장르별로 모아보려고 인터넷 검색을 하다 보면 장르코드를 통한 검색 방법들이 나온다. 근데 매번 검색하기도, 특정 장르를 검색해서 찾아보기에도 어려운 부분들이 존재했기 때문에 chrome extension을 개발해서 쉽게 찾아볼 수는 없을까?라는 생각을 하게 됐다.
완성본 미리 보기
로고내 귀여운 크롬 익스텐션의 로고이다. 넷플릭스의 장르별 검색을 위한 익스텐션이므로, 빨간색으로 장르의 G를 가져와서 그렸다. 지금에 와서야 넷플릭스처럼 검은 배경이 나았을지도 모르겠다고 생각이 드는데, 수요가 있으면 고쳐야겠다.
우측 하단에 생긴 Floating buttonChrome extension을 활성화시키면, netflix에 들어갔을 때 우측 아래에 Floating button이 하나 생기게 된다. 나중에 확인했는데, 영상 재생 시, Fullscreen상태가 아니면 살짝 거슬리는 상태로 존재하고 있었는데, 수요가 생기면 고쳐야겠다 22.
우측 아래의 Floating button을 누르게 되면, 장르검색을 할 수 있는 검색바와, 클릭 시 해당 장르와 관련된 콘텐츠를 모아볼 수 있는 netflix주소로 redirect 되는 리스트가 나타난다.
일부 장르들은 한국에서 지원하지 않는 콘텐츠들이 모인 장르여서 그런지, 아니면 원래 없는 장르인 건지 클릭해도 콘텐츠가 안보이거나 잘못된 주소라고 나타난다.(수요가 생기면 고쳐야지 33)
넷플릭스 장르와 관련된 API를 찾지 못해서 대충 아무 파일이나 긁어와서 생긴 일일수도 있겠다. 아무 파일이나 들고 와서 장르들을 한국어로 번역한 버전이 존재하지 않는데, 이 부분 또한 사용성이 굉장히 아쉬운 부분이다.(수요가 고치면 생겨야지 44)
그래도 대충 데이터 파일에 아무거나 한국어 데이터를 넣어놨는데, 정상작동하는 모습을 확인할 수 있었다.
검색도 잘 되는 모습
수요가 생기면 고쳐야겠다고 생각하고 대충 만든 부분이 한두 개가 아닌데, 인간의 욕심은 끝이 없다고, 익스텐션 팝업창에 커피 사달라는 링크를 걸어놨다. 대충 커피 중에 라떼를 좋아하니 라떼 마시고 싶다고 해놓았다.
buymeacoffee라는 서비스를 통해서 만들었는데, paypal 지원을 안 해서 원화로 교체하기가 좀 까다로워 보였다. 그럼에도 그냥 추가해 버렸다.
티스토리 같은 플랫폼이면 광고에 커피 달라는 저 버튼도 추가할 수 있는데, 여기는 브런치라서 그런 게 안된다. 고상한 플랫폼이라 그런가(난 왜 여기?)
브런치에서 작가가 되면 작가로서 제안도 받던데, 지금 적고 있는 이 글을 보면 난 제안받기는 글렀다는 생각이 든다.(광고 이점이랑 작가제안 이점도 다 사라짐, 난 왜 여기?)
개발 과정
프로젝트 시작하고 몇 번 리셋되었던 그 자잘한 시행착오를 적으면 안 그래도 두서없는 글에 카오스가 찾아올 듯하여, 최대한 정리한 최종 완성본에 가는 과정을 적었다.
크롬 익스텐션 프로젝트 구조 파악
Chrome extension개발은 처음이었기 때문에 새로운 extension을 개발하기 위해서는 어떤 방식으로 작동하는지 필요한 작동 구조를 파악할 필요가 있었다.
일단 대강 background, popup, contentscript 이렇게 세 파트로 나뉜다.
background는 background에서 실행될 로직들을 담당하는 부분이었고, 이 친구는 contentscript, popup과 소통이 가능했다. 위의 사진에는 안 나오지만 contentscript와도 소통이 가능하다.
popup은 브라우저 상단의 extension 아이콘을 클릭했을 때 나타나는 부분인데, 내가 Wanna drink latte 버튼을 넣은 부분이 popup에 해당한다. 기본적으로 html로 나타낼 수 있는데, html에서 script 코드를 가져와서 js로도 동작이 가능하다.
그다음은 contentscript인데, 얘는 실제 사용자가 보고 있는 화면과 소통하는 부분인 듯하다. 실제로 내가 Netflix 우측 하단에 넣은 Floating button 또한 이 contentscript를 통해 주입된 요소이다.
manifest.json
내가 만들 Chrome extension의 background로 작동할 js 파일이 무엇이고, contentscript 파일은 또 어디에 있고, 어떤 아이콘을 쓸 것이고, extension 이름은 무엇이고, 이 extension에서 필요한 권한들은 어떤 게 또 있는지 기술해 놓는 파일이다.
extension을 배포하거나 테스트할 때, 다 이 파일을 시작으로 해서 extension이 생성된다. 코드와 관련된 내용들은 여기 브런치에 적기에 불편하므로 패스하겠다.
React
나는 Floating button을 contentscript에서 주입하려는 과정에서 vanilla javascript로 작성하는 건 너무 노가다라는 판단을 내렸다. 그래서 react 프로젝트를 만들고, 커스텀 webpack 파일로 react를 빌드해서 content script를 만들었는데, 정상적으로 웹 페이지에 주입되어 작동하는 모습을 확인할 수 있었다.
아이콘 만들기
대충 개발을 끝내놓고, 멍청한 기본 아이콘 말고 다른 아이콘 만들어야겠다는 생각이 들었다. 그래서 칸바라는 사이트에서 아이콘을 제작했는데, 기본 아이콘보다 멍청해 보이는 아이콘이 탄생했다.
위에서 본 멍청한 아이콘라떼 사줘
마지막으로 배포하기 전 수금이 아니라 후원을 위해 buymeacoffee 같은 걸 달아보고 싶어 졌다.
누가 visual studio code의 패키지를 만들고 buymeacoffee를 달아놓은 걸 보고 떠오른 아이디어인데, 한 번쯤 달아보는 것도 재밌겠다는 생각을 했다.
게다가 이걸 안 달면 아까 extension의 3가지 script 중 contentscript만 사용한 것인데, 너무 영양가 없는 프로젝트 같았다. 따라서 popup을 추가하면서 덩달아 수금이 아닌 후원도 받기로 결심했다.
buymeacoffee에서 누구나 후원받을 계정을 만들어서 후원받기 버튼을 쉽게 생성할 수 있었다. 보니까 생성된 버튼은 이미지를 기반으로 만들어졌기 때문에 html에 img 태그를 삽입할 수 있으면 어디든지 버튼을 주입할 수 있었다. (따라서 티스토리는 가능)
배포
드디어 대충 만든 크롬 익스텐션을 배포할 준비를 마쳤고, 현재 구글 계발자 등록으로 $5를 지불하고, 새로운 extension 등록 신청을 해놓은 상태이다. 아마 승인이 안 날 수도 있는데, 일단 승인은 될 때까지 수정해 볼 생각이다.
만약 승인이 나면, 익스텐션의 이름은 "Netflix, floating genre"이다. 이 글을 본 사람은 필수로 써야 한다. 그렇지 않으면 영국에서 시작된 편지ㄱ...
오랜만에 글을 쓰게 됐는데, 정말 두서없이 쓴 기분이지만 (나만) 재밌게 쓴 거 같다.
만든 간단한 시연은 insta에 짧게 올려두었다.
2023-06-14
쥐도 새도 모르게 크롬 웹스토어에 게시가 됐다고 한다.(메일로 알림 안 온 거 같은데) 그래서 설레는 마음으로 관련 키워드를 검색해 봤는데, 정말 안 나온다. 제목이 'Netflix, floating genre'였기 때문에 검색 키워드로 'Netflix', 'Netflix, genre', 'Netflix floating' 등 제목과 유사하게 검색해 보았지만, 상위 검색으로 노출이 안되는 거 보고 약간 아쉬웠다. 새삼 카피라이팅이 얼마나 중요한지 알 수 있는 대목이었다.
어떻게 하면 더 좋은 카피라이팅이 될 수 있을지는 천천히 생각해 보도록 하고, 일단 배포가 완료되었으니, 여기에라도 남겨놓아야 할 것 같아서 올리게 된다.
