# 온보딩 #프론트엔드 #B마트
권기석 2021.12.21
내가 경험한 B마트 프론트엔드의 온보딩 프로세스
저는 우아한형제들 B마트서비스팀의 웹 프론트엔드 개발자로 합류하게 된 권기석입니다.
B마트 프론트엔드 파트에서 진행하는 신규 입사자를 위한 온보딩 프로세스를 회고해보려고 합니다. 온보딩에 성공하려면 무엇에 집중할지 어떤 방향으로 진행할지 구체적으로 목표를 세울 필요가 있습니다. B마트 프론트엔드의 온보딩은 파일럿 프로젝트를 진행하면서 협업 문화와 개발 문화에 적응하도록 구성되어 있습니다.
먼저 팀에서 안내해준 파일럿 프로젝트를 통해 달성하고자 하는 목표는 다음과 같습니다.
- 위키/지라/제플린을 활용한 협업 방식 파악하기
- 기술 선택/설계/개발 단계에서 팀원에게 피드백받기
- 실제 서비스에서 활용되는 API를 활용하고, 이를 바탕으로 한 페이지 개발로 도메인 파악하기
실제로 파일럿 프로젝트의 안내도 요구사항 분석 ⇒ 설계 ⇒ 문서화 ⇒ 임무 분담 ⇒ 개발 ⇒ 배포 ⇒ 회고 과정을 모두 포함하고 있고, 작게나마 B마트 프론트엔드의 전체 개발 사이클을 직접 경험해볼 수 있는 구조입니다. 온보딩 프로세스의 의도가 명확하게 드러나 있는 덕분에 배포하기까지의 팀 개발 문화는 물론 협업 문화까지 전체적으로 체험해보는 것에 집중하자는 목표를 달성할 수 있습니다.
협업을 위한 스트레칭
B마트 프론트엔드 파트에는 개발 외적으로도 적극적인 소통과 정보를 공유할 수 있는 다양한 문화들이 정착되어 있습니다. 저는 이를 협업을 위한 스트레칭이라고 부르는데요, 대표적으로 데일리 스크럼과 회고, 문서화, 자유 주제 워크숍이 있습니다. 이제부터 하나하나 알아보겠습니다.
데일리 스크럼과 회고
업무 시작 전에 함께 모이는 데일리 스크럼 시간을 가집니다. 이 시간에 실제 업무에 참여하는 것처럼 파일럿 프로젝트의 진행 상황이나 이슈를 공유합니다. 이 외에도 한 주를 되돌아보는 주간 회고도 함께 진행하는데요. 주간 회고는 한 주를 마무리하는 금요일에 다음과 같이 진행합니다.
- 배포 일정을 함께 보면서 이슈 체크
- 일주일 간 공유한 정보 소개 및 관련한 내용에 관해서 이야기
- 논의가 필요한 내용에 대해서 회고 시간을 활용해서 논의 진행
- 한 주간 진행했던 업무에 대해서, 진행하면서 겪은 이슈를 공유하며 마무리
팀원들끼리 자주 소통할 수 있는 문화가 정착되어 있어서 파일럿 프로젝트의 진행 과정과 이슈 상황들을 공유하기 쉽고, 별 스스럼없이 궁금한 것을 쉽게 물어보고 도움을 요청할 수 있습니다.
투명하고 상세한 문서화
B마트 프론트엔드 파트에는 문서를 기반으로 투명하고 상세하게 공유하는 문화가 정착되어 있습니다. 프로젝트를 진행하면서 겪은 이슈에 대한 히스토리를 문서로 기록하고 있어서 이후에 작업할 사람이 쉽게 히스토리를 찾아볼 수 있어서 큰 도움이 됩니다. 프로젝트의 히스토리를 남기는 문서화 방식은 다음과 같습니다.
- 1단계 : 프로젝트/피처의 작업 시작 전에 대략적인 스케치를 진행하는 과정입니다. 프로젝트의 배경 및 무엇을 어떻게 진행할지에 대한 내용을 작성합니다.
- N단계 : 이슈 및 문제 해결 과정 등 프로젝트의 히스토리를 작성하는 과정입니다. 파일럿 프로젝트를 진행하면서 설계 과정을 N단계 히스토리로 작성하며 문서화 방식에 적응하게 됩니다.
- 마지막 단계 : 프로젝트/피처의 작업 후 회고를 진행합니다. 1단계에서 작성했던 내용을 바탕으로 성과/비교 중점으로 작성합니다.
고도화/개선이 필요한 피처 또한 분기별로 문서화해서 기록합니다. 다음 분기에는 어떤 고도화 작업이 필요하고 개선할지 계획을 세우고, 구체적인 할 일 목록을 작성해 관리합니다. 저 역시 처음 입사해 다양한 문서를 읽고 작성하게 되었는데, 팀에서 어떤 개선 작업을 하는지 그리고 앞으로 목표는 무엇인지를 파악하는 데 도움을 받을 수 있었습니다.
그 밖에도 신규 입사자의 이해를 돕는 업무 가이드와 코드 컨벤션을 비롯한 개발 가이드부터, 팀에서 겪은 트러블 슈팅과 해결 방법 등 B마트 프론트엔드 파트에서 필요한 모든 히스토리가 문서화 되어 있을 정도입니다. 그 덕분에 기술적인 내용 외에도 면밀하게 협업할 수 있습니다.
일반적으로 문서화는 코딩 그다음인 경우가 많습니다. 하지만 B마트 프론트엔드 파트에서는 업데이트되지 않은 문서를 발견하면 즉시 최신 내용으로 업데이트하는 것이(예외도 있지만 대부분은) 우선입니다. 그 만큼 문서화가 중요한 문화로 자리 잡고 있습니다. 실제로 온보딩을 진행하면서도 문서가 잘 작성된 덕분에 많은 궁금증의 해답을 언제든지 쉽게 찾을 수 있습니다.
자유 주제 워크숍
자유 주제 워크숍은 지식 공유를 자연스럽게 할 수 있는 문화를 만드는데 일조하고 있습니다. 발표 순서를 정해놓고 돌아가며 발표하고 싶은 주제를 가져와서 금요일마다 공유합니다. 주제가 정해져 있지 않아서 개발을 효율적으로 할 수 있는 테크닉부터 아키텍처의 소개와 같이 다양한 이야기들이 주제로 선정됩니다. 무엇보다도 정보를 말로써 잘 풀어 설명할 수 있는 역량이 중요하다고 생각하는데, 한 번씩 강사가 되어봄으로써 자연스럽게 이런 역량도 길러낼 수 있는 문화입니다. 워크샵으로 진행한 내용도 공유될 수 있게 모두 기록합니다.
협업 도구 활용해보기
온보딩 첫 과제는 다양한 분야의 사람들과 앞으로 있을 협업을 대비하기 위해 팀에서 사용하는 협업 도구(위키, 지라, 제플린)에 익숙해지는 것입니다. 직접 경험해보는 것만큼 좋은 방법은 없기에, 파일럿 프로젝트의 진행도 실제로 협업하는 것처럼 협업 도구를 사용해보도록 안내받았습니다.
• 파일럿 프로젝트 진행 과정 •
실제 업무 프로세스와 동일하게 진행할 프로젝트의 제플린 디자인 시안이 주어집니다. 그 후 프로젝트의 요구사항 분석을 거쳐 기술 스택을 선정하는 것부터 어떻게 개발을 진행할지까지 직접 설계할 기회가 주어집니다.
이 과정을 문서로 정리해봄으로써 팀의 문서 작성 방식에 익숙해지도록 돕습니다. 왜 이런 선택을 했고 앞으로 어떻게 프로젝트를 진행할 계획인지를 문서에 담아 팀원들에게 투명하게 전달하면 적절한 피드백을 받을 수 있습니다.
마지막으로는 이렇게 완성된 설계 내용을 바탕으로 직접 일정을 산출해서 작업 단위를 나눠보기도 하고, 지라를 이용해서 티켓(이슈)을 생성합니다. 업무에서 사용되는 협업 도구를 미리 활용해볼 수 있습니다.
실제 서비스 중인 페이지 개발로 도메인 파악하기
파일럿 프로젝트는 실제 운영 중인 B마트의 이벤트/쿠폰 모음 페이지를 구현하는 과제였습니다. 팀에서 실제로 서비스하는 페이지를 파일럿 프로젝트로 진행해 얻을 수 있던 장점이 많았습니다.
실제 서비스 API 요청 활용
이벤트 목록 조회, 쿠폰 조회 등 서버로부터 데이터를 받는 실제 서비스 API 문서를 직접 탐방하며 B마트의 API 도메인과 응답 형태를 이해할 수 있었습니다. 또한 그 데이터를 프로젝트에 직접 적용해서 프론트엔드, 백엔드 사이에서의 협업 과정을 경험했습니다.
팀이 서비스하는 프로젝트에 대한 이해
‘나는 이런 식으로 개발했는데 팀에서는 어떻게 개발을 했을까?’ 궁금할 때면 직접 코드를 찾아다니면서 팀의 코드 스타일이나 서비스 흐름과 프로젝트 구조를 자연스럽게 파악할 수 있었습니다. 한번은 사용자가 가진 쿠폰이나 장바구니에 담긴 물품 수를 조회하려면 API 요청에 넣어줄 테스트 사용자의 정보가 필요했는데 사내 테스트 앱을 활용해서 테스트용 사용자를 생성하고 생성한 사용자의 값을 뽑아내기까지 실제 테스트 업무 프로세스도 미리 경험해볼 수 있었습니다.
아낌없이 주는 코드 리뷰
파일럿 프로젝트의 코드 리뷰도 실제 업무와 동일하게 팀 규칙에 맞추어 진행했습니다. B마트에서는 더 효과적인 코드 리뷰 문화로 거듭날 수 있게 도와주는 코드 리뷰 봇이 있는데요. 코드 리뷰 봇은 PR(Pull Request)을 요청했을 때 저 대신에 랜덤으로 선정된 리뷰어 인원들에게 새로운 PR이 요청되었음을 알리는 메시지를 슬랙으로 호출과 함께 보내줍니다. 또 PR에 새로운 코멘트와 리뷰가 달렸을 때, 그리고 승인될 때마다 슬랙으로 바로 알림을 줍니다.
• 파일럿 프로젝트 진행 과정 •
이전까지 프로젝트를 진행하면서, 매번 팀원들에게 PR 주소와 함께 리뷰를 요청하는 메시지를 전달했습니다. 반복적인 일을 수동으로 해야 해서 번거로운 데다, 다른 일을 하는 팀원들에게 직접 부탁하기가 부담스러웠습니다. 코드 리뷰 봇이 리뷰어를 랜덤으로 선정해 적절히 분산해준 덕분에 매번 PR을 요청할 때나 리뷰를 남길 때마다 메시지를 직접 보낼 필요가 없어지고, 부담감도 많이 덜어줘서 상당히 편리했습니다.
하지만 코드 리뷰 봇보다 더 리뷰에 진심인 이들이 있었으니 바로 B마트 프론트엔드 팀원들이었습니다. 평소와 같이 하나의 PR에는 2명의 리뷰어가 할당됨에도 불구하고 프론트엔드 팀원 5명 모두가 하나의 PR에 피드백을 달아줄 정도로 온보딩 파일럿 프로젝트에 아낌없이 많은 관심을 표현해줬습니다. 이렇게 적극적인 코드 리뷰 문화를 체험하다 보니 저 역시 코드의 품질을 더 중요시하는 마음가짐을 갖게 되었습니다.
팀원들이 남겨준 코드 리뷰의 내용으로는 ➊ 일관된 코드 스타일과 아30 우아한형제들키텍처를 유지하는지 확인, ➋ 더 나은 코드 방법을 제시하고, 기술적인 지식, 노하우 공유, ➌ 기존의 팀 프로젝트에서 활용되고 있는 방식을 통해 팀의 개발 히스토리를 파악하기 등이 있었습니다.
협업에 알맞은 코드에 대해서도 피드백을 자주 받았습니다. 그중 저와 같은 신입 개발자에게 유용한 피드백을 몇 가지 남겨봅니다.
확장하기 좋은 코드
다음은 프로젝트에서 사용될 색상을 한곳에 모아 저장하는 간단한 코드입니다. gray1과 gray2 사이에 추후 #333333이 들어와야 하는 상황에 대비해야 하며, 이 값을 새롭게 gray6과 같이 의미가 명확하지 않은 변숫값으로 확장하는 것에도 문제가 있다는 피드백을 받았습니다.
이러한 설계는 추후 변경에 취약하고, 협업할 때 어려움을 야기할 수 있다는 문제점을 지적해주고, 다음 코드와 같이 확장 가능한 코드의 예시를 제시해줬습니다. 이전까지는 정해놓은 색상 외에 새로운 색상이 추가되는 것 같이 언제든 변경 사항이 생길 수 있다는 걸 고려하지 못했음을 깨달았습니다.
• 피드백받기 전 코드 •
const colors = {
gray1: '#222222',
gray2: '#444444',
gray3: '#888888',
gray4: '#e6e6e6',
gray5: '#f6f6f6',
};
• 피드백받기 후 코드 •
const colors = {
gray_100: '#222222',
// 추후 사이 값이 추가된다면, gray_150으로 사용할 수 있고, 그 외에도 99가지의 사이 값이들어갈 수 있다.
gray_200: '#444444',
gray_300: '#888888',
gray_400: '#e6e6e6',
gray_500: '#f6f6f6',
};
E2E 테스트의 의미
E2E 테스트 코드를 처음 작성할 때 피드백 전 코드를 보면 E2E 테스트 코드의 의미를 정확하게 녹여내지 못하고, 페이지 안에서의 거시적인 기능이 올바르게 동작하는지에 대해서만 작성했습니다. 이에 대해서 다음과 같은 피드백을 받았습니다.
- E2E는 코드만으로 실제 앱에서 코드가 어떻게 동작할지를 그려볼 수 있어야 하고, 사용자가 앱을 이용할 수 있는 구체적인 플로우를 이해하는 것에 유의하기
- 사용자는 ‘쿠폰 탭에서 스크롤을 내려 10번째 쿠폰을 선택한다’와 같이 사용할 상황을 여러 describe 단위로 쪼개어 작성해볼 것
- API 응답에 대한 테스트가 들어 있는 부분에서 UI 단의 E2E 테스트에 집중하고, API 응답에 대한 테스트를 API 코드 단으로 분리하기
피드백받은 후의 코드를 이전 코드와 비교하면 사용자 관점에서 앱이 사용하는 흐름에 맞추어 테스트 케이스가 추가되었습니다. 단위, 통합, E2E 등 각 테스트 코드를 작성할 때는 해당 테스트가 가지는 의미를 명확하게 부각할 수 있게 작성하는 것이 중요함을 경험할 수 있었습니다.
◆◆◆
입사 후 6주의 시간이 흘러 온보딩 프로세스가 마무리되었습니다. 처음에는 내가 뭘 모르는지조차 모르기 때문에 ‘무엇을 질문해야 하는 걸까?’와 같은 막막함이 있던 것 같습니다. 제가 경험한 온보딩을 한 문장으로 표현하자면 ‘질문을 던질 수 있게끔 질문 리스트를 한가득 모아놓은 보따리’입니다. 보따리에서 새로운 과제를 하나씩 꺼낼 때마다 모르는 것이 생겨났고, 그럴 때마다 자연스럽게 팀원들에게 질문을 하며 차근차근 팀 문화에 적응할 수 있습니다. 무엇보다도 온보딩 프로세스를 진행하면서 팀원들이 매번 어려움은 없는지 물어봐주고 어려움이 있다면 함께 문제 해결을 해주는 건 물론이고, 항상 아낌없이 피드백을 준 덕분이었습니다.
저자 우아한 형제들
우아한형제들은 배달이 일상을 조금 더 행복하게 하도록 오늘도 달리고 있습니다. 평범한 사람들이 모여 비범한 성과를 만들어 내는 곳이될 수 있도록 건강한 조직문화를 만드는 일에 진심을 다합니다. 2016년부터 ‘우아한형제들 기술블로그’를 운영하며 개발 조직의 성장 과정을 기록하고 있습니다.
