익스텐션 큐티파이 제작기
크롬/웨일 익스텐션 큐티파이
얼마 전 '큐티파이'라는 서비스를 만들었다. 크롬과 웨일에서 쓸 수 있는 확장 프로그램인데 새 탭에서 사용자에게 귀여운 동물 콘텐츠를 추천해준다.
큐티파이는 총 2명이서 만들었다. 개발을 배우고 싶은 비전공자와 디자인을 배우고 싶은 비전공자. 나는 둘 중 전자로 처음으로 팀 프로젝트에서 개발자 역할을 맡았다.
완성까지 총 한 달이 걸렸는데 임팩트 있게 한 시간은 1~2주 정도였던 것 같다. 복잡한 프로그램이 아니었던 만큼 빠르게 만들 수 있었다.
결과물도 마음에 들었는데 역시 혼자서 못하는 걸 팀으론 해낼 수 있다는 걸 다시금 느꼈다. 또 배우기도 많이 배웠다. 아무래도 이번에 처음하는 경험이 많았던지라 더더욱!
느낀 점과 배운 점을 까먹지 않도록 오늘 잘 정리해둬야겠다.
큐티파이 제작기
1. 왜 익스텐션인가?
몇 달 전부터 크롬 익스텐션을 너무 만들고 싶었다. 왜냐? 서핏을 봤기 때문이다. 서핏이라는 크롬 익스텐션을 보고 '나도 이런 거 만들고 싶어!'라는 생각이 마구마구 생겼다.
surfit.io잘 빠진 디자인과 내게 필요한 콘텐츠를 새 탭에서 추천해주는 게 너무 좋았다. 주변 사람들에게 추천했고 다들 좋아해줬다.
서핏에 빠진 후 난 크롬 익스텐션에 대해 더 자세히 알아봤다. 오호라. html/css/javascript를 할 줄 알면 쉽게 만들 수 있다니! 뭔가 나도 도전할 수 있을 것 같았다.
또 익스텐션 시장은 생각보다 레드 오션이 아니었다. 이미 웬만한 거는 다 있는 앱 시장과 달리 익스텐션 시장엔 좀 여유가 있었다.
(물론 시장 크기가 달라서 그렇겠지만..!)
크롬 익스텐션!
다음 사이드 프로젝트 감으로 상당히 괜찮아 보였고 의욕이 뿜뿜 생겨났다. 그런데 다른 한편으로는 회의감이 들기도 했다.
나 혼자 서핏처럼
멋진 서비스를 만들 수 있을까?
아직 뭘 만들지 정하지는 않았지만 어려워보였다. 서핏 같은 걸 만들려면 뭔가 디자이너가 있어야겠다는 생각이 들었다.
2. 비전공자X비전공자
디자이너를 어디서 구하지? 넘치던 의욕도 막상 디자이너를 구하려고 하니 급속도로 쪼그라들었다. 주변에 디자이너 친구가 없는 것은 아니었지만 선뜻 제안하기가 어려웠다.
왜냐? 개발자(나)의 실력이 형편없었기 때문이다. 주변의 디자이너들은 보통 뛰어난 개발자들과 함께 했을 것을 생각하니 용기가 나지 않았다.
이럴 일은 없겠지만서도..그러다 평소 연락을 자주 하는 친구 S가 떠올랐다. S는 가끔씩 내게 자신이 그린 그림들을 보여줬는데 그럴 때마다 감탄을 했었다. 그 친구만의 감성이 잘 드러나는 그림이 좋았다.
또 마침 비전공자로서 디자인 관련 경험을 쌓기 위해 사이드 프로젝트를 할 생각도 있어보였다. 비전공 개발자와 비전공 디자이너라니 꽤나 잘 맞지 않은가?
나는 S에게 함께 사이드 프로젝트를 하자고 제안했고 감사히도 흔쾌히 승낙해주었다.
3. 뭐를 만들까?
S와 나는 어떤 것을 만들지 고민했다. 사이드 프로젝트인 만큼 둘 다 흥미를 가질 수 있는 걸 만들고 싶었다. 그래서 공통 분모를 찾기 시작했고 그러다 발견한 것이 귀여운 동물들이었다.
우리 둘 다 귀여운 동물의 영상을 유튜브, 인스타그램 등에서 찾아보는 걸 좋아했다. 또 귀여운 뽀시래기 영상을 친구들에게 공유한 적도 많았다.
둘 모두 좋아하는 게 분명하니 아이디어는 금방 나왔다. 우리는 새 탭에서 귀여운 동물 콘텐츠를 추천해주는 서비스를 만들기로 했다.
그렇다면 서비스 이름은 뭘로 할까?
조건은 크게 두 가지였다.
1) 귀여워야 함
2) 추천/큐레이션 서비스 느낌이 나야 함
일단 cute이라는 단어가 먼저 떠올랐다. cute을 2번 조건에 맞춰 어찌저찌 변형하면 되지 않을까 싶었는데 그때 문득 스포티파이(Spotify)가 떠올랐다.
Spotify이전에 스포티파이의 음악 추천이 엄청 정교하다는 글을 본 적이 있었다. 실제로 검색해보니 데이터에 기반한 음악 추천이 굉장히 유명한 것 같았다.
꿈은 크면 클수록 좋다고 했다. 우리는 동물 콘텐츠 분야의 스포티파이가 되자며 Cute과 Spotify의 뒷부분, -tify를 섞어 서비스의 이름을 지어보았다.
큐티파이(Cutify)
귀여움을 큐레이션 합니다
4. 기본기가 부족하구나..
동물 콘텐츠 분야의 스포티파이가 되자는 거창한 말을 하긴 했지만 사실 우리의 서비스는 굉장히 단촐했다. 내 미천한 개발 실력으로 대단한 걸 만들 수는 없었다.
그래서 사실 기획 시간은 그리 길지 않았다. 페이지도 한 개였고 그 안에 들어가는 기능도 손가락에 꼽을 정도였다. 대략적인 화면 구성은 다음과 같았다.
간단!후딱 기획을 끝내고 개발에 들어갔는데 생각보다 헤맸다. 영알못인데 크롬 확장 프로그램을 만드는 구글의 가이드가 영어로 되어 있었기 때문이다.
또 계속 리액트로 작업하다가 바닐라 자바스크립트로 하려니 불편했다. 리액트엔 내가 원하는 도구들이 딱딱 있었는데 그걸 갖다 쓸 수가 없었다.
찾아보니 크롬 확장 프로그램을 리액트로도 개발할 수 있는 것 같았다. 그런데 그걸 위해 이런저런 세팅하는 게 상당히 귀찮아보였다. 뭔가 배보다 배꼽이 더 큰 느낌.
그래서 그냥 기본기 다시 익힐 겸 바닐라 자바스크립트로 작업했는데 스스로의 부족함을 크게 느꼈다. 특히 동기/비동기, 깃 관련 개념이 잘 안 잡혀 있다는 걸 깨달았다.
생각해보니 생활코딩에서 자바스크립트를 배운 후 기초를 제대로 다진 적이 없었다. 그동안 얼마나 주먹구구식으로 개발을 해왔을까 반성이 됐다.
늦게나마 스스로의 부족함을 알게 된 것은 행운이었다. 큐티파이를 만들며 개발적으로 많이 배우게 될 것 같아 더 동기부여가 됐다. 배움의 즐거움, 이게 사이드 프로젝트의 큰 장점이 아닐까!
5. 이가 없으면 잇몸으로
큐티파이를 만들며 했던 개발면에서의 가장 큰 고민은 서버였다. 웬만해서는 서버를 붙이기 싫었다. 그러면 개발의 복잡도도 올라가고 무엇보다도 돈이 들어갈 수가 있었다.
그런데 서버를 붙이지 않고 어떻게 링크 형태의 콘텐츠를 관리할 수 있을까?
클라이언트 내에 동물 콘텐츠를 저장할 수는 없었다. 그러면 콘텐츠를 추가할 때마다 크롬 스토어에 새로 업데이트해야 했다.
콘텐츠를 올릴 때마다 매번 승인 기간을 거친다면 매우 비효율적일 게 분명했다. 그래서 다른 방법을 찾아보다 순간 깃허브 페이지가 떠올랐다.
깃허브 페이지에 콘텐츠를 json 형식으로 저장하고 클라이언트에 뿌려주면 어떨까?
긴가민가했지만 해보지 않고서는 몰랐기에 바로 시도해봤다. 동물 콘텐츠를 저장한 깃허브 페이지를 만들고 클라이언트에서 파일을 요청하니 결과는 성공이었다!
코알못이라 이렇게 해도 되나 싶기도 했지만.. 그래도 일단 콘텐츠를 추가할 때마다 크롬 스토어의 승인 기간을 거치지 않아도 되어서 기분이 참 좋았다.
6. 조율 한번 해주세요
어느 정도 개발과 디자인을 완료한 후 맞춰보는 시간을 가졌다. 그런데 아무래도 둘 다 경험이 많지 않은 비전공자라 헤맸다.
기획 내용에 맞춰 S는 디자인 요소(이미지)를 준비해왔고 나는 이미지가 들어갈 틀을 만들어왔다. 그런데 틀에 이미지를 넣어보니 조금 어색했다.
이미지 자체만 봤을 때는 괜찮았는데 틀 안에 넣으니 너무 작아서 잘 안 보였다. 그래서 틀, 예를 들어 버튼의 크기를 늘려보려 했는데 그러면 전체 화면에서 차지하는 비중이 너무 커졌다.
그래서 고생스럽게도 S는 디자인 전반을 수정할 수밖에 없었다. 중간중간 조율을 했다면 이런 일이 발생하지 않았을 텐데 조금 아쉬웠다.
그래도 결과적으론 S가 다시 작업하며 더 귀여운 애기들이 탄생했다.
을메나 귀엽게요!7. 유사 어드민
이제 서비스도 다 만들었겠다 배포 전에 콘텐츠를 채워야 했다. S와 나는 유튜브를 돌아다니며 귀여운 동물 콘텐츠(링크)를 수집하기 시작했다.
링크를 수집하고 깃허브 페이지의 json 파일에 반영하는 과정은 아래와 같았다.
1) S 혹은 내가 url 수집
2) 수집한 url 관련 정보를 json 형식에 맞춰 정리
{
"image": "",
"title": "",
"desc": "",
"url": "",
"category": "",
"time": "",
"author": "",
"channel": ""
}
3) 깃허브 페이지 json 파일에 추가한 후 커밋
2번의 수고로움을 줄이는 게 중요했다. 그래서 url에서 image, title, desc 정보를 따와주는 유사 어드민 페이지를 만들었다.
유사 어드민사용법은 아래와 같다.
1) url을 상단 폼에 복붙하고 search 버튼 클릭
2) json 파일에 이미 등록된 url이면 '이미 존재함'이라는 메시지가 뜸
3) 신규 url이면 하단 폼에 json 형식으로 정리됨
4) 그대로 복붙하여 json 파일에 추가
+) 하단에선 현재 콘텐츠 현황을 파악할 수 있음
json 형식으로 자동 정리되는 기능이 핵심이지만 2번 기능도 엄청 편리하다. 만약 없었다면 중복되는 url이 json 파일에 많이 등록되었을 것이다.
사실 진정한 어드민이 아니라고 할 수도 있지만 관리자인 나와 S에게 편리함을 주니 그걸로 됐다!
8. 익스텐션 홍보 페이지를 만드는 이유
귀여운 동물 콘텐츠도 어느 정도 채웠으니 이제 배포할 때가 되었다. 크롬뿐만 아니라 웨일 브라우저의 스토어에도 배포를 했다.
근데 웨일 브라우저에 배포하려고 웨일 개발자 센터를 살펴보니 한국어로 설명이 잘 되어 있었다. 처음부터 참고했으면 좋았을 걸이라는 생각이 들었다.
어쨌든 다시 돌아와서, 배포 후 지인 홍보를 하려고 했는데 뭔가 하나 빠진 것 같은 느낌이 들었다. 서핏은 홍보용 페이지가 따로 있었던 것 같은데 우리는 없었다.
처음엔 크게 필요성을 느끼지 못했는데 몇몇 지인들에게 크롬이나 웨일 스토어 다운로드 링크를 보내며 깨달았다.
간지가 안 난다!
흠.. 뭔가 부족해..또 상대방이 크롬을 쓰는지 웨일을 쓰는지 모르는 상황인 점도 컸다. 그래서 큐티파이 홍보용 페이지를 만들어야겠다는 생각이 들어 후딱 만들었다.
기존 스토어의 url은 복잡해서 cutify.link라는 도메인을 사서 입혔고 og-tag 작업도 좀 했다. 그러니 전보다는 훨씬 나아진 것 같았다.
깔-끔또 크롬을 쓰든 웨일을 쓰든 자신에게 맞는 링크로 갈 수 있게 해놓았다. 다 만들고 나니 마침표를 찍는 것 같은 느낌이 들어서 기분이 참 좋았다.
9. 낳는다고 다 자식은 아님을..
홍보 페이지로 지인에게 알리고 나니 뿌듯했다. 앞으로 잘 관리해야지 했는데 회사 일, 모지또 등 여러모로 정신이 없어서 어느 순간 운영에 손을 놓고 있었다.
그러다 최근에 지인에게 메시지를 하나 받았다.
참으로 감사한 분..감사하면서도 반성하게 되는 메시지였다. 내가 만들어놓고, 심지어 사용자가 있는 서비스인데도 손을 놓고 있었다. 얼마나 무책임한가!
지금까지는 주로 서비스 기획에 초점을 두고 사이드 프로젝트를 진행했는데 이제는 운영까지 열심히 해보아야겠다. 낳는다고 다 자식은 아니니까!
맺으며.
프로젝트를 시작할 땐 기획보다는 개발적으로 배우는 점이 많을 것이라 생각했는데 아니었다. 어쨌든 서비스 하나를 만드는 과정이기에 기획적으로도 참 많이 배웠다.
S도 이번 프로젝트를 통해 경험을 쌓을 수 있어서 좋았다고 얘기해줬다. 너무나도 귀여운 캐릭터를 만들어 Cutify를 캐리해준 S에게 감사하다.
큐티파이를 마무리하고 한동안 사이드 프로젝트를 쉬었는데 이렇게 제작기를 쓰고 나니 다시 하고 싶어진다! 사이드 프로젝트를 하면 삶이 충만해지는 것 같다.
다음번엔 어떤 사이드 프로젝트를 해볼까? 리액트 네이티브를 배우다 중간에 손을 놓은 게 좀 아쉬웠는데 그거나 해봐야겠다!
- 제작기 끝 -
쓰다 보니 또다시 길어졌는데..
끝까지 읽어주시는 분들에게 정말 감사합니다!
혹시 제 지인이라면 연락해주세요.
커피 사드리겠습니다!
