안녕하세요. FE플랫폼팀 kean입니다.
카카오의 FE플랫폼팀이 어떤 곳인지 궁금해하는 외부의 FE개발자분들이 많다는 이야기에 어떤 방법으로 소개하면 좋을지 고민의 나날을 보내다가 테크블로그를 통해 팀에 대한 소개를 진행해보려고 합니다.
팀 이름의 FE는 Front End를 줄인 단어입니다. 위키피디아[1]의 설명을 활용해보면 Front End는 데이터를 기반으로 만든 그래픽 인터페이스를 의미합니다. 사용자는 그래픽 인터페이스를 통해 데이터를 확인하고 상호작용을 할 수도 있습니다. 카카오는 FE 개발 기술의 중요성을 인식하고 FE플랫폼팀을 운영하고 있으며, FE플랫폼팀을 통해 Front End의 품질을 높여 사용자 경험을 개선하고 FE 개발자의 성장과 업무 환경 개선을 꾀하고 있습니다.
[1] https://en.wikipedia.org/wiki/Front-end_web_development
FE플랫폼팀의 업무
팀의 업무는 다음과 같이 크게 4가지로 나뉩니다.
- FE개발 기반 업무
- 다음 서비스 업무
- 카카오톡 및 연관 서비스 업무
- 비즈니스 파트너 서비스 업무
FE개발 기반 업무는 카카오 전사의 웹서비스 품질을 개선하고 다른 FE 개발자들이 더 효율적으로 일할 수 있도록 개발 환경을 개선하는 업무를 담당합니다. 리서치를 하거나 서비스의 성능을 주기적으로 측정하고 개선하는 환경을 만들고, 사내 NPM, 스타일 가이드를 제작하거나 업무에 필요한 도구를 개발하는 등 FE개발자들이 더 재미있고 효과적으로 업무를 진행할 수 있는 환경을 만들고 있습니다.
다음 서비스 업무는 카페, 카카오스토리, 공통 에디터 개발 업무로 구성됩니다. 주로 SNS 성격의 서비스의 UI를 개발하고 있습니다. 카페나 카카오스토리의 경우 이미 만들어진지 오래되어 ES3기반의 코드로 구성되어 있으나, 카페 모바일 버전과 같이 새롭게 개발하는 영역은 Vue.js로 만들어가고 있습니다. 공통 에디터는 카페나 티스토리에서 사용하는 WYSIWYG에디터입니다. TinyMCE를 기반으로 카카오 서비스에 필요한 기능을 TypeScript로 개발하고 있습니다.
카카오톡 및 연관 서비스 업무는 카카오톡 웹 버전을 비롯하여 카카오톡 내의 서랍, 이모티콘 스토어 등 카카오톡과 관련된 서비스를 카톡 바깥에서도 사용할 수 있도록 웹으로 개발하는 업무입니다. 주로 React를 사용하여 개발하고 있습니다.
비즈니스 파트너 서비스 업무는 크게 지도, 광고, for Business라는 설명이 붙는 사업자 지원 서비스로 구성됩니다. 지도는 지도 라이브러리를 사용하여 지도를 활용한 서비스를 만드는 업무입니다. 마스크를 쉽게 구매할 수 있도록 공적 마스크 판매 약국을 카카오맵에 표시하는 서비스를 만들기도 했습니다. 광고와 사업자 지원 서비스는 카카오의 플랫폼을 사용하여 수익을 창출하는 파트너들이 사용하는 서비스를 만드는 업무입니다. kakao for Business서비스는 https://business.kakao.com/ 에서 확인하실 수 있습니다.
기술 스택
팀에서는 JavaScript와 TypeScript를 모두 사용하고 있습니다. JavaScript를 사용하는 비율은 약 72%로 프로젝트 네 개 중에 세 개는 JavaScript로 진행됩니다. JavaScript에도 다양한 버전이 있는데, 가장 많이 사용 중인 버전은 ES2016 이후 버전으로 전체 프로젝트의 약 44%에서 사용하고 있습니다. 카페나 카카오스토리와 같이 초기 개발 후 시간이 많이 지난 서비스의 경우 ES3를 사용하는 경우도 있습니다.
최근 FE개발자들이 관심을 많이 갖는 주제 중 하나는 프레임워크일 것입니다. 한 번 결정하고 나면 변경하기 힘들고 개발 전반에 걸쳐 큰 영향을 주기 때문에 필연적이라고 생각합니다. 국내에서는 React, Vue.js, Angular를 많이 사용하고 있는데, 카카오에서도 다르지 않습니다. FE플랫폼팀에서 가장 많이 사용하는 프레임워크는 React와 Vue.js이며, 둘 중에서는 React를 사용한 업무가 근소하게 많습니다. 이 외에도 Angular나 Backbone.js를 사용하는 업무도 있으며, 업무의 복잡도에 따라 프레임워크를 쓰지 않고 Vanilla JS[2]로 작업을 하는 경우도 많습니다. 상태 관리 라이브러리로는 Redux, Vuex, MobX를 주로 사용하고 있습니다.
팀에서는 업무를 진행하면서 자동화된 테스트 환경도 구축하고 있습니다. 많은 업무에서 개발을 완료한 후 운영 단계로 들어가는데, 이 과정에서 발생할 수 있는 반복적인 테스트 비용을 줄이고 편리한 개발을 위해 테스트를 자동화하고 있습니다. 팀 내에서 가장 많이 사용하는 테스팅 프레임워크는 Jest이며 Jasmine과 Cypress.io가 그 뒤를 따르고 있습니다. 특히 최근에는 Storybook과 Cypress.io를 활용하여 테스트 자동화를 구현한 사례를 팀 내에서 공유하기도 했으며 이미지 스냅샷 테스트 경험담을 나누기도 했습니다.
[2] 프레임워크나 라이브러리의 사용을 지양하고 JavaScript의 기본 기능을 사용하여 만드는 방법을 의미합니다.
이 외에도 업무에 필요한 다양한 도구를 사용하고 있습니다. 소스코드 관리를 위해 Github Enterprise을 함께 사용하고 있으며, 빌드나 배포에는 Jenkins, Docker, Kubernetes를 사용합니다. 컴포넌트나 테스트 자동화를 위해 Storybook을 활용하기도 하며, 코드 리뷰를 위해 카카오톡으로 알림을 주는 도구를 팀에서 직접 만들어 운영하고 있습니다.
개발 문화
FE플랫폼팀에서는 업무를 진행할 때 두 명 이상의 개발자가 함께 업무를 진행할 수 있는 환경을 만들어가고 있습니다. 동료와 함께 하나의 업무를 진행하며 고민하고 생각을 나누는 과정에서 더 나은 결과를 만들 수 있으며, 효율적인 성장이 가능하다고 생각하기 때문입니다. 결과적으로 90%에 가까운 크루들이 팀 동료와 함께 일을 하고 있으며, 계속 이 비율을 높여가는 방향으로 나아가고 있습니다.
개발 과정에서 중요한 업무 중 하나는 바로 코드 리뷰입니다. 카카오에서 코드 리뷰는 개발 역량의 성장과 좋은 결과물을 만드는데 직접적인 도움이 되는 활동으로 공감받고 있으며, FE플랫폼팀에서도 적지 않은 시간을 활용하여 코드 리뷰를 진행하고 있습니다. 코드 리뷰는 Github을 이용하여 진행하며 오프라인 리뷰가 필요한 경우에는 오프라인 리뷰를 진행하기도 합니다. 최대한 많은 코드를 리뷰한 후 배포하기 위해 노력하고 있으며, 이런 노력을 통해 상당한 비율의 코드를 리뷰를 거쳐 서비스에 배포하고 있습니다.
Github에서 진행하는 코드 리뷰는 Pull Request(이하 PR) 단위로 진행합니다. 코드 리뷰를 마치고 나면 해당 PR를 개발 중인 브랜치에 머지하고 개발 서버에 배포하며, 테스트 등 일련의 과정을 거친 후에 서비스 서버에 배포합니다. 약 69%의 크루는 하루에 평균 2건의 코드 리뷰를 진행하고 있으며, 역할이나 업무 상황에 따라 더 많은 코드를 리뷰하기도 합니다.
현재는 리뷰가 많이 정착되어 코멘트의 숫자가 많지 않지만 PR 중에는 열띤 토론으로 인해 100개가 넘는 코멘트가 달린 PR도 있습니다.
FE플랫폼팀에서는 매주 팀 미팅을 진행합니다. 재택근무를 진행하는 동안에는 화상으로 모여 팀 미팅을 진행하기도 합니다. 이렇게 모인 팀 미팅에서는 모두가 알고 있어야 할 내용을 공유하는 것 외에 한 명씩 경험과 정보를 공유하는 발표를 진행합니다. 2018년 12월 첫 발표를 시작하여 지금까지 모두 60회가 넘는 발표가 진행됐습니다. 과거의 발표 중에 개인적으로 관심 가는 주제를 몇 개 뽑아보면 다음과 같습니다.
- 카카오스토리 기술셋 리팩토링 진행기
- Redux Reducer Programming
- Babel7과 Corejs3 (부제: 전역오염 없는 폴리필 설정)
- 천지인이 싫어요 (천지인 키보드에서의 한글 입력 문제 해결)
- 웹팩 로더를 직접 만들어 보자
- 일렉트론 트레이앱 만들기
- main.thread와 일하는 법
- JS Monorepo
카카오에는 개발자의 성장을 도와주는 다양한 제도들이 있습니다. 업무 도서 구매 지원이나 온/오프라인 교육 수강료 지원, 컨퍼런스 참여 지원과 같은 제도가 이에 포함됩니다. 이와 별개로 몇몇 크루들이 모여 스터디를 진행하기도 합니다. FE플랫폼팀 크루들도 여러 주제로 스터디를 진행하며 많은 비율의 크루들이 꾸준히 스터디를 진행하고 있습니다.
카카오의 FE개발자들이 어떤 주제를 더 공부하고 싶어 하는지 궁금해하실 분들을 위해 팀 크루들이 앞으로 공부하려고 하는 주제를 살짝 공유드리면 다음과 같습니다.
- 프로그래밍 언어: TypeScript, Rust, Go 등
- 프레임워크: Flutter, React, React Native 등
- 빌드/배포: Docker, Kubernetes
- 그 외: Webassembly, 테스팅, 디자인 패턴, 함수형 프로그래밍, WebGL 등
업무 환경
카카오에서는 개발에 집중할 수 있는 업무 환경을 만들고자 많은 노력을 하고 있습니다. 그중 몇 가지를 소개합니다.
지금은 Mac을 개발 장비로 사용하는 기업이 매우 많아졌는데, 카카오에서는 이미 10년 전부터 모든 개발자가 Mac을 개발 장비로 사용하고 있습니다. 현재 기본으로 제공하는 장비는 맥북프로 16인치 모델입니다. 팀 멤버들의 노트북 사양을 정리한 아래 표에 따르면 아직은 구형 장비를 사용하는 경우도 있지만 주기적으로 최신형 장비로 교체하고 있으므로 오래 지나지 않아 모든 개발자가 맥북프로 16인치로 변경하게 될 것으로 예상합니다.
모니터의 경우 두 대까지 사용할 수 있으며 팀에서는 약 72%의 크루들이 2대의 모니터를 사용하고 있습니다. 주로 27인치 모니터를 사용하고 있으며, 회사에서 제공해 주는 장비 중에는 30인치 모니터도 있습니다.
키보드는 개발자의 취향이 강하게 반영되는 주변기기입니다. 회사에서 제공해 주는 키보드 외에 개인적으로 구매하여 사용하는 경우가 매우 많은 항목입니다. FE플랫폼팀에서도 정말 다양한 브랜드의 키보드를 사용하고 있음을 알 수 있었는데 그중 가장 사용자가 많은 키보드는 애플 매직 키보드였습니다. 아무래도 Mac을 기본 장비로 사용하고 있기 때문이 아닐까 하는 추측을 해봅니다. 기계식 키보드 사용자도 적지 않아 약 33%의 크루가 기계식 키보드를 사용하고 있습니다.
노트북과 같은 물리적 장비 외에 통합 개발 환경(IDE)도 개발자가 취향에 따라 선택할 수 있습니다. FE플랫폼팀에서는 Visual Studio Code를 가장 많이 사용하지만 IntelliJ와 Webstorm 사용자도 상당한 비중을 차지하고 있습니다.
개발에 직접적인 영향을 주는 개발 장비 외에도 업무에 집중할 수 있는 환경을 조성하기 위해 카카오에서는 완전선택적근로제도를 운영하고 있습니다. 이 제도는 월 단위로 정해진 총 근로시간 범위 내에서 본인이 스스로 근로시간을 유연하게 설정하여 근무하는 제도로 업무 시작과 종료 시간을 자유롭게 선택할 수 있습니다. 오후에 자리를 비울 일이 발생하는 경우 해당 시간을 ‘근무하지 않는 시간’으로 설정하고 업무가 아닌 개인의 일을 하는 것도 가능합니다. 완전선택적근로제도 덕분에 개인의 필요성과 동료와의 협업을 감안하여 자신의 출퇴근 시간을 유연하게 정할 수 있습니다. FE플랫폼팀의 크루들도 제도를 적극적으로 활용하고 있어 출근 시간이 매우 다양합니다. 6시~7시에 출근하시는 분도 있고, 11시가 넘어 출근하시는 분들도 있습니다. 보다 자세한 분포는 아래의 표를 참고하시면 됩니다.
FE플랫폼팀 크루 살펴보기
FE플랫폼팀에는 40명이 넘는 개발자가 함께 근무하고 있습니다. 평균 연령도 31.3세로 카카오 전체에서 비교해도 젊은 편에 속합니다. 젊은 FE플랫폼팀 크루들의 특색 있는 점들을 몇 가지 소개합니다.
일을 하다 보면 아침에는 기운을 내기 위해, 점심에는 식후의 즐거움을 위해, 오후에는 업무 중 리프레시를 위해 커피와 같은 음료를 마시게 됩니다. 그래서 팀 크루에게 하루에 몇 잔의 음료를 마시는지 물어봤습니다.
결과는 약 80%의 크루가 하루에 2~3잔의 음료를 마시는 것으로 나타났습니다. 사내에 카페가 있어 저렴하게 커피를 마실 수도 있지만 직접 커피를 내려마시는 것도 무료로 가능하고, 각 층에 위치한 냉장고에는 탄산음료를 비롯한 다양한 음료수와 우유, 두유가 비치되어 있어 언제든지 편하게 가져다가 마실 수 있습니다. 재미를 위해 사내 카페에서 음료를 구매하는 방법에 대해서도 질문을 했는데요. ‘공평하게 가위바위보’가 가장 많았고 2위는 ‘조직장 또는 시니어가 산다’였습니다. ‘각자 돈 내고 마신다’는 의견은 3위였습니다.
사람마다 다르겠지만, 제 경우에는 일을 할 때 노동요를 많이 듣습니다. 지금도 음악을 들으며 이 글을 쓰고 있습니다. 그래서 크루들에게 어떻게 음악을 듣는지 물어봤습니다.
결과를 보고 무선 이어폰 사용자가 압도적으로 많아 깜짝 놀랐습니다. 약 83%의 크루가 다양한 종류의 무선 이어폰을 쓰고 있었습니다. 적어도 FE플랫폼팀 내에서는 무선 이어폰이 대세라고 해도 이상하지 않은 느낌입니다. 참고로 카카오 크루는 멜론에서 무료로 음악을 들을 수 있습니다.
더 많은 이야기가 궁금하시다면
이 글 외에도 테크블로그에는 FE플랫폼팀의 크루들이 작성한 글들이 많이 있습니다. 더 많은 이야기가 궁금하신 분들은 다음의 글들을 확인해보시기 바랍니다.
- 포커, 어디까지 쳐봤니 – 서비스 개발에 플래닝 포커 도입 사례 (feat. 원격근무)
- 카카오와 사용자의 첫 만남을 함께하는 ‘FE플랫폼팀 이야기’
- fred의 카카오 겨울 인턴십을 돌아보며
- ESLint 조금 더 잘 활용하기
- [kakao FE meetup] 프렌즈타임 웹앱 삽질기
- [kakao FE meetup] 카카오커머스를 지탱하는 Angular
- [kakao FE meetup] 바닥부터 시작하는 Vue 컴포넌트 테스트
- kakao FE(Front end) meetup, 1st
FE플랫폼팀에서는 함께 일할 FE개발자를 찾고 있습니다. 저희와 함께 하고 싶은 분들은 아래의 페이지에서 영입 공고를 확인해 주시기 바랍니다. 감사합니다.
