왓챠에서의 1년간의 작업 후기
왓챠에서 퇴사를 하게 되다
작년 7월에 입사했던 왓챠를 올해 8월초에 퇴사를 했다.
대략 1년 1개월 정도 다녔던 셈이다.
왓챠에서 어떠한 일을 했었는지, 그리고 앞으로 어떻게 할건지에 대해 두서없이 써보도록 하겠다.
왓챠에 합류하게 된 배경
2021년 7월 ODK Media를 퇴사하게 되었고, 여러곳 쓰지말고 몇개 회사만 쓰자…라는 생각에서 왓챠, 당근마켓, 토스 세 곳만 지원했다. 운 좋게도 모두 다 합격하게 되어 어디를 갈지만 고르면 됐었다.
왓챠의 경우 그동안 알고 지내던 rainygirl이 몇달전 합류하여 음악 관련 작업을 하고 있다는 이야기를 들었고, 해당 경험을 쌓는다면 인디스트릿을 좀 더 좋게 만드는데 큰 도움이 될 것이라 생각했다.
그래서 토스도, 당근마켓도 좋은 회사지만 해볼 수 있는 업무 때문에 왓챠를 고르게 되었고 2021년 7월에 왓챠에 입사하게 된다.
어떤 일을 했었나
왓챠에 있는 1년동안 음악 관련 어드민을 만드는 일을 했다.
개인적으로 어드민 만드는 업무를 선호하지는 않지만 아이러니하게도 어드민은 또 잘 만드는 편이다.
어드민은 사용성을 생각하여 입력화면을 어떻게 구성하느냐에 따라 난이도가 확 달라지는데, 예를 들어서 음원을 구성하는 정보가 아래와 같다고 치자.
- 음원 정보
- 음원에 대한 유통사 정보
- 음원에 대한 기획사 정보
- 음원에 딸린 트랙 정보
- 음원에 딸린 트랙의 정산 관련 정보
실제로는 위에 나열된 데이터보다 더 복잡한 데이터가 들어가지만, 설명을 위해서 위의 다섯개 정도만 생각해보자.
이때 음원을 등록하는 어드민 화면을 단순하게 만든다면 등록 흐름은 아래와 같을 것이다.
- 음원의 기본 정보를 등록한다.
- 1에서 얻은 음원 id를 기준으로, 유통사 정보 매핑 화면으로 이동해서 유통사를 매핑하고 저장한다.
- 1에서 얻은 음원 id를 기준으로, 기획사 정보 매핑 화면으로 이동해서 기획사를 매핑하고 저장한다.
- 1에서 얻은 음원 id를 기준으로, 앨범에 속한 트랙을 생성한다. 트랙 생성의 경우 트랙의 갯수만큼 생성해야하기 때문에 트랙이 10개인 경우 트랙생성 버튼을 10번 눌러야 한다.
- 4에서 생성된 트랙의 저작권 정보를 하나하나 들어가서 업데이트 한다.
위처럼 만들면 화면 하나하나의 복잡도는 매우 낮지만, 실제로 앨범을 생성하는 사람 입장에선 속이 터질 것이다. 거쳐야하는 화면도 많으니까 실수도 많이할테고. 그리고 위 정도의 구현은 django admin 등에서 생성해주는 레벨이기 때문에 별도 개발 없이 만들어지는 거 써도 되기도 한다.
위의 경우처럼 각 모델 데이터에 따라 화면을 여기저기 이동하면서 만드는 방식이 아니라, 한 화면에서 다른 매핑 정보를 검색하여 매핑하거나 생성해서 매핑할 수 있다면 개발하기에는 복잡하고 힘들지라도 사용성 측면에선 훨씬 좋을 것이다.
그런 어드민 화면을 만드는 일을 했다.
뮤직 어드민을 구성하는 Tech stack
next.js 와 chakra-ui, react-hook-form, swr을 썼다.
배포는 vercel을 통해 했다.
next.js
next.js는 꾸준히 써왔던 프레임워크이기도 하고, 어드민 특성상 Server side에서 처리해줘야 할 자잘한 일들이 있을 거 같아서 CRA 대신 next.js를 사용한 것도 있다.
chakra-ui
내가 입사했을 때 next.js 기반으로 어드민의 기본 골격은 이미 있던 상태였는데, 전체적인 데이터 흐름을 싹 갈아엎었고 UI도 chakra-ui 기반으로 갈아엎었다.
swr
swr을 쓴 것은 당시 팀 내 코드의 레거시인 부분 중 하나가 mobx 코드였는데, 해당 부분을 swr로 전환하고 있던 흐름이 있어 해당 흐름에 편승하고자 swr을 썼다. 지금 생각해보면 react-query를 썼어도 됐었을 듯 하다.
어드민 특성 상 폼 화면이 많았기 때문에 react-hook-form도 상당히 하드하게 썼다.
vercel
어떻게 보면 입사하고 나서 가장 먼저 했던 것이기도 하다.
왓챠에서는 k8s를 쓰는 환경이고, 처음 어드민을 받았을 떈 어드민 역시 docker로 말아서 k8s로 배포하는 환경이었다.
개인적으로는 정말 특별한 이유가 아니면 Front-end가 완벽하게 분리된 환경에선 Front-end쪽은 dockerize를 할 필요가 없다는 생각이고, 만약 서버 처리가 필요하면 serverless를 활용하는 편이 이득이 많을 것이라는 생각을 가지고 있다.
그래서 vercel 도입에 힘을 썼고, vercel을 통해 배포하면서 github action으로 Unit Test / E2E Test 등이 실행되도록 세팅하는 일을 했다.
뮤직 어드민 업무를 하며 배운 것, 좋았던 것
뮤직 어드민은 한창 런칭을 위해 다듬고 있던 차에 음악 사업이 접히면서 빛을 못보고 사라지게 되었다. 열심히 작업하던 프로젝트가 날아가는 것은 무척이나 아쉬운 부분이지만, 그래도 해당 작업을 하면서 배운 점들도 있기 때문에 그걸 위안으로 삼았다.
음악 데이터의 복잡성과 맞추기 힘든 데이터들
음악 데이터는 생각 이상으로 복잡했다. 이 자리를 빌어 끝없는 마이그레이션과 데이터 맞추기를 했던 rainygirl를 비롯한 music-dev의 Back-end engineer분들에게 존경과 찬사를 보낸다.
복잡한 폼 데이터를 다뤄본 경험
그동안 여러 어드민을 만들어봤지만 이번에 만든 어드민(특히 앨범 등록쪽)은 구현 난이도가 정말 높았다. 그래도 덕분에 react-hook-form을 비롯해 복잡한 데이터를 동적으로 찢고 붙이고 하는 것에 대한 경험치가 추가적으로 쌓인 것 같다.
디자인 시스템을 이해하고 있는 디자이너와의 협업
초반에는 디자인이 없다가 나중에는 디자이너 두 분이 합류해서 협업을 하게 됐는데, 프로젝트에 chakra-ui를 사용하고 있다는 이야기를 들으시고는 chakra-ui가 제공하는 figma 기준으로 디자인을 뽑아주셨다.
요새야 잘 안 쓰지만 예전에는 어드민을 만드는데 bootstrap을 많이들 썼었다. bootstrap 기반으로 만든 어드민에 시안을 입히다 망하는 경우가 종종 있었는데 이것은 디자인 시안이 bootstrap이 전혀 고려가 되지 않아 디자인 맞추기가 상당히 까다롭고 고통스러워 아예 어드민은 디자인 없이 가는 경우도 종종 있었다.
이번 경우는 아예 디자인 단계에서부터 chakra-ui가 완벽하게 고려가 된 케이스라 상당히 쾌적하고 재밌게 작업을 했었다.
손발이 잘 맞는 Back-end engineer들과의 협업
말해 무엇하랴.
music-dev 짱.
아쉬운 것
만들던 서비스는 1차 내부 런칭, 2차 외부 런칭(음반사, 기획사 등), 3차 런칭(일반 음악인들 대상)의 목적을 가지고 만들었기 때문에 UI/UX 측면에서도 꽤나 공을 들인 어드민 서비스였다.
1차 내부 런칭을 마치고, 여러가지 재정비를 하고 있던 도중 프로젝트가 드랍이 되었다.
공교롭게도 입사 1주년을 하루 앞둔 날에.
그외
올해 7월말쯤에 퇴사하는 것으로 결정되고 나서 2주 정도의 시간이 있었다. 만들던 제품은 드랍이 되었기 때문에 무엇을 하면서 남은 기간을 보내야하나… 라고 생각하고 있었는데, 마침 왓챠벨 만드는 용병을 모집한다고 해서 해당 작업을 뚝딱뚝딱 해주고 퇴사했다. 상당히 짧은 기간 밖에 안 했지만 그래도 재밌게 한 프로젝트였던 것 같다.
strapi
인디스트릿도 그렇고 요새 작업하는 대부분의 사이드 프로젝트에서는 strapi로 Back-end를 구성해서 쓰고 있다. 왓챠벨 작업에서는 Front-end Engineer 네명 정도가 붙어서 했던 작업이었는데 strapi를 쓰자고 이야기를 해서 관련된 세팅 및 모델링 작업 등을 했었다.
채점처리하기
풀어본 퀴즈에 대한 채점처리를 client에서 하게 된다면 총점을 client에서 계산해서 보내면 되기 때문에 코드는 간단해지겠지만, 문제는 코드를 뜯어보는 걸로 각 문제에 대한 정답을 알아낼 수 있을 것이다.
그래서 응시 후 제출 시 질문별로 체크한 정답만 보내고, 이후 strapi 내에 lifecycle 함수를 통해 퀴즈 결과 생성 시 채점하는 스크립트를 돌려서 입력하도록 했다.
next.js + SSG
이번에도 next.js로 client를 구성했다. 특히 이번 프로젝트의 경우는 문제 페이지를 그냥 SSG로 구워버리면 되는 부분이 있어서 해당 세팅을 진행했다.
graphql + graphql codegen + react-query
나는 graphql 쓰는 것을 상당히 좋아하는데, 왓챠에서는 업무에서 쓸 일이 없어서 아쉬웠던 차였다. 그러던 와중 왓챠벨은 strapi로 Back-end를 구성했던 상황이었기 때문에 graphql을 붙이는 건 굉장히 손쉬운 일이었다.
codegen을 통해 자동으로 graphql 호출을 위한 react-query hooks를 생성하고 타입 정의 파일을 만드는 등에 대한 세팅도 내가 진행했었다.
vercel
배포는 역시 vercel로 했다.
팀내 지식공유 활동들
팀 스터디 시간을 활용해 Jamstack에 대한 내용들, React Native 앱 출시 경험, remix 사용 경험 등을 공유했고 좋은 반응을 얻었다.
정리하자면
- next.js 중심으로 제품을 만드는 경험
- 복잡한 음악 데이터에 대한 맛보기
- 훌륭한 팀워크
특히 함께 화면을 만들던 kyle과 meta, 그리고 Back-end 작업을 해준 rainygirl, ralph, leona, 감탄이 나오는 어드민 화면을 디자인 해준 ivy와 lina, 음악 서비스 기획과 관련하여 고생 많이 한 james와 협업을 이어나가지 못하는 부분이 아쉽다. 이 팀워크라면 멋진 제품을 만들 수 있을 것이라는 확신이 있었는데, 그것이 실현되지 못한 부분이 아무래도 제일 아쉬운 부분.
회사를 퇴사할 때 일반적으로 드는 감정이 크게 두 가지가 있는데, 후련하다와 아쉽다인 것 같다. 과거에 다니던 회사들은 후련하다가 많았던 반면에 최근 퇴사에서는 아쉽다가 많았다. 아무래도 함께 손발이 잘 맞던 동료들과 헤어지게 되거나, 혹은 제품을 더 잘 만들 수 있었는데 그러지 못한 아쉬움일 것이다.
동료들과의 헤어짐은 아쉽지만, 언젠가 다시 기회가 생기지 않을까? 하는 막연한 기대를 가져본다.
당근마켓 입사
이미 다른 SNS에는 업로드를 해서 새삼스러울 것도 없지만, 올해 8월 22일부로 당근마켓에서 일하게 됐다. 퇴사가 결정되고, 어느 회사를 가야하나 고민하던 차에 예전 직장 동료가 많이 다니고 있기도 하고, 작년에 이미 합격했기도 했으며 당근마켓이 지향하는 하이퍼로컬서비스가 인디스트릿 개발/운영에도 큰 도움이 될 것이라는 생각이 들어서 다른 곳은 안 알아보고 당근마켓의 문만 두드렸다.
어떻게 보면 이전 직장과 현 직장 모두 인디스트릿 을 발전 시키는 것에 인사이트를 얻을 수 있는 곳으로 골랐다고 볼 수 있다.
인디스트릿 서비스 트래픽이 좀 많이 늘었으면 좋겠는데.
모험은 계속 된다
국내 IT 업계에 겨울이 왔다고들 한다. 그럼에도 불구하고 당근마켓이라는 좋은 회사에서 일하게 될 수 있게 되어서 다행이라고 생각한다.
이제 입사한지 며칠 안 됐지만, 이곳에서도 좋은 동료들을 많이 만날 수 있을 것이라는 기대, 재밌는 제품을 많이 만들고 실험하는 경험을 할 수 있을 것이라는 기대가 있다. 또 팀원들이 내게 기대하는 바도 여러가지가 있을 것이다.
그들의 기대를 충족할 수 있도록, 또 그들에게 내가 좋은 동료라는 평가를 받을 수 있도록 앞으로의 여정은 계속 된다.