안녕하세요, 우아한형제들 신입 프론트엔드 개발자 김하루입니다.

저는 우아한형제들 만다오팀에서 개발자로서의 첫 커리어를 시작하게 되었어요.

이 글을 통해 1) 채용과정에서 만다오팀을 추천받았던 이야기와, 2) 만다오팀에서 적응과정이 얼마나 즐거웠는지, 그리고 3) 만다오팀에서는 얼마나 다양한 일을 하는지 순서로 말씀드려 볼 거예요.


이 글은 만다오팀의 매력을 소개하는 글이기도 하답니다. 이 글을 읽고 나면, '우아한형제들에 이렇게 특색 있고 재미있는 팀이 있구나!'하는 것을 알게 되실 거예요. 😉

정확한 팀 이름은 웹프론트개발그룹 웹생산성도구개발TF이지만 이 글에서는 ‘만다오팀‘이라고 간단하게 부를게요. 웹생산성도구개발TF에서는 만다오 외에도 다양한 생산성 도구를 개발하고 있답니다.

그전에 만다오라는 도구가 낯선 분들을 위해 간단하게 소개해 드려 볼게요.

만다오는 코드 작성 없이 손쉽게 웹앱을 만들 수 있는 ‘에디터’입니다. 우아한형제들 구성원분들이 사용하시는 사내 툴인데요. 현재 배달의민족 앱과 만화경 앱 중심으로 적극적으로 활용되고 있습니다. 아래 화면과 같은 에디터에서 클릭 몇 번으로 텍스트 블록이나 이미지 블록을 추가하고 프로모션 페이지를 제작할 수 있어요.

"하루님, 이 팀이 잘 맞으실 것 같아요."

제가 우아한형제들의 채용 프로세스를 진행하고 있던, 작년 12월로 거슬러 올라가 볼게요.

당시 저는 희망 소속팀 작성 마감 기한을 앞두고 고민에 빠져있었어요. (지원자의 희망 순위가 중요하게 작용한다는 소문이 있었거든요.)

저는 UI/UX 측면에서도 적극적으로 의견을 낼 수 있는 환경을 원했고, 그래서 프론트엔드 개발자가 퍼블리싱과 디자인에도 주도적으로 참여할 수 있는 팀이 있을지 궁금했어요. 인재영입팀 측에 문의 메일을 드렸더니, 친절하게 아래와 같은 답변을 전해주셨어요.

저희 우아한형제들에서는 모든 프론트엔드 개발자가 퍼블리셔의 역할을 함께 가지고 있으며, 퍼블리싱을 주도하는 조직은 없습니다.

디자인의 경우 디자이너분들만 소속된 배민디자인실이라는 큰 조직이 있고, 필요시 협업하는 형태로 업무를 진행하고 있습니다.

하루님께서 말씀 주신 포인트를 고려해보면, 웹/앱 컴포넌트 디자인에 적극적으로 참여하며 구현할 기회가 많다는 관점에서 웹프론트개발그룹이 가장 근접할 것 같습니다.

웹프론트개발그룹을 추천하는 내용이 담긴 이메일 회신을 참고해 희망 소속팀 작성을 무사히 마쳤습니다.

그리고 올해 1월, 원하던 웹프론트개발그룹 만다오팀에 합류하게 되었습니다! 🎉  떨리는 첫 출발이었지만, 작년에 우아한테크코스를 함께 수료한 (권)세진 님과 같은 팀에 배정되어서 매우 매우 든든했습니다.

만다오팀 적응이 제일 쉬웠어요

신입 개발자에게는 넘치는 의욕이라는 무기⚔️가 있지만, 이것만으로는 프로젝트에 바로 기여하기 어렵습니다. 기존 프로젝트의 구조와 히스토리를 파악하는 과정을 먼저 거쳐야, 어떤 코드를 어디에 넣어야 할지도 알 수 있겠죠.

입사한 올해 1월부터 저는 더 빠르게 팀에 적응하고 기여할 수 있도록 만다오팀으로부터 다양한 지원을 받을 수 있었는데요. 🙌 그 내용 중 일부를 살짝 소개드려볼게요.

‘미니 만다오’부터 천천히

만다오팀에서는 본격적으로 프로젝트에 투입되기 전에 3주간 온보딩 프로젝트를 진행합니다. 서서히 팀에 스며들 준비를 하는 기간이라고 할 수 있어요.

온보딩 프로젝트의 요구사항은 미니 만다오를 직접 만들어보는 것입니다. 만다오의 아주 코어한 부분만 구현해보면 됩니다. 기존의 코드를 참고하지 않고, 직접 구현해보고 프로젝트의 이해도를 더 높일 수 있는 과정입니다.

만다오에서 블록은 width, margin과 같은 스타일 속성을 가질 수 있는데요, 타입스크립트로 코드를 작성하면 이런 스타일 속성을 숫자(number)로 관리할지 문자열(string)로 관리할지 지정할 수 있습니다. 저는 이런 스타일 속성을 16px과 같이 단위를 붙여 문자열 타입으로 관리했었어요. 16과 같이 숫자만 저장하는 것보다 단위 정보를 통째로 관리하는 것이 더 유리할 것으로 생각했거든요.

그런데 사용자가 입력한 숫자 값(예: 14)과 기존의 값 중 어느 것이 더 큰지 판단하려면 결국 숫자 16이 필요하더라고요. 그래서 16px에서 단위를 일일이 제거해야 하는 상황이 계속해서 생겼어요. 코드 이곳저곳에 반복해서 단위를 떼었다 붙였다 하는 과정을 추가해줘야 하는 불편함이 느껴졌어요. 🤔

중간 리뷰를 통해 이런 프로퍼티는 숫자 타입으로 관리하는 것이 더 효율적이라는 피드백도 받을 수 있었는데요. 어차피 만다오에서 사용하는 대부분의 단위가 픽셀 단위이기도 했고요. 이렇게 직접 시행착오를 경험한 후에 실제 만다오 코드를 읽으니 그 내용을 이해하는 데 더욱 도움이 되었습니다.

또, 전사 기술스택인 리액트와 타입스크립트, 처음 사용해보는 상태관리 라이브러리, UI 라이브러리 등의 기본적인 사용법을 자연스럽게 익혔습니다.

코드 외적으로도 위키에 문서를 작성하고, JIRA의 티켓 단위🔖로 업무 일정을 관리하는 등 입사 전 경험해보지 못한 프로젝트 관리 방식까지 함께 습득할 수 있었어요.

이렇게 실제 프로젝트에 투입되기에 앞서 예행연습을 충분히 할 수 있어서 개발 경력이 없는 상태에서도 새로운 업무 환경에 적응하는 데 큰 도움이 되었습니다.

잡담이 경쟁력이다.

사실 아쉽게도 아직도 팀원분들을 오프라인으로 뵌 적이 한 손으로 꼽을 정도에요. 코로나19 바이러스로 인한 전사 재택 기간에 입사했더니 사무실로 출근한 날이 많지 않았거든요.

그렇지만! 만다오팀은 비대면 환경에서도 활발하게 대화를 주고받고 있습니다.

송파구에서 일을 더 잘하는 11가지 방법 중 잡담이 경쟁력이다💬라는 항목이 있는데요, 이 방법을 실천하며 슬랙 채널에서 정말로 많은 이야기를 나누고 있어요.

코드를 보다가 궁금한 점이 생기면 슬랙의 음성채팅 기능인 허들🎧을 신청합니다. 허들은 음성으로 대화를 하는 동시에 화면 공유도 할 수 있는데요. 같은 화면을 보면서 코드 행간의 의미를 질문을 할 수 있다보니 더욱 빠르게 도움을 받을 수 있었어요.

이야기 나누고 싶은 내용이 조금 복잡도가 있다면, 그래서 채팅보다 음성으로 이야기하는 게 더 효율적이라면 언제든지 허들을 신청합니다. 팀원분들과 기술적인 고민을 언제든지 나눌 수 있어서 좋아요.

웃을 일이 있으면 다 함께 시원-하게 웃기도 합니다. 이렇게 웃다 보니 오프라인으로 자주 뵙지 못했지만 금세 팀원분들과 친해질 수 있었습니다. 😁

만다오팀이 특별한 이유

만다오팀은 오로지 프론트엔드 개발자로만 구성된 팀으로, 프로젝트의 한 사이클에서 발생하는 다음의 업무를 프론트엔드 개발자 5명이 자급자족(?)하는 팀이라고 할 수 있어요. 이 점이 만다오팀을 더욱 특별하게 만듭니다.

입사 후, 세진님과 함께 온보딩 프로세스부터 실제 업무를 시작하면서 만다오팀에서는 프론트엔드 개발자에게 정말 많은 기회가 열려있다는 것을 알 수 있었어요.

만다오팀에서는 매일 아침 데일리 스크럼 시간을 가져요. 이때 개선이 시급한 부분이나 어떤 신규 기능에 대한 니즈가 있는지도 공유합니다.

이 과정을 통해 팀원들 모두가 함께 프로덕트 기획을 다듬고 UI/UX를 고민할 수 있는데요. 이런 측면에서 만다오팀의 모든 개발자는 만다오 프로덕트 오너라고도 볼 수 있지 않을까 싶습니다. 프론트엔드는 물론이고 서버를 직접 구성하면서 백엔드 개발까지 경험할 수 있고, 만다오를 사용하시는 기획자, 마케터분들을 대상으로 운영 지원하는 업무 경험도 할 수 있습니다. 하나의 기획을 구현하고 운영까지 끌고 나가면서 마이크로하게나마 프로젝트 매니징 경험도 할 수 있어요.

만다오팀 FE 개발자 업무영역

- 기획
- 디자인
- 프론트엔드 개발
- 백엔드 개발
- QA
- 운영 지원

개발자가 기획합니다.

입사 2개월 차쯤의 어느 날 만다오 홈화면 개편에 대한 니즈가 스크럼 중 안건으로 나왔어요. 홈화면 개편 작업은 화면 전체를 아예 새롭게 구성하는 작업이었습니다. 원래 있던 기능의 일부를 개선하는 일반적인 작업에 비해 규모가 큰 편이었습니다.

저는 요구사항을 정의하고 UI/UX를 고민하며 디자인을 개선해 나가는 과정을 특히 좋아합니다. 그래서 이 작업을 제가 맡게 된다면 정말 재밌게 할 수 있을 거라는 확신이 들었습니다. 도전해보고 싶어 용기 내 제가 먼저 해보고 싶다는 의지를 말씀드렸습니다! 💪

그렇게 바로 홈화면 개편 담당자가 되었는데요. 🎉 선뜻 기회를 주셔서 내심 놀라고 기뻤습니다. 후에, 관심 있는 일을 맡았을 때 더 집중해서 잘 수행할 수 있기 때문이었다는 감사한 말씀을 들을 수 있었습니다. (파트장이신 현승님 감사합니다!)

만다오홈 개편작업을 시작하면서 제가 첫 번째로 할당받은 지라 티켓은 화면 ‘설계’ 티켓이었습니다. 코드 한 줄 작성하지 않고 오직 UI/UX만 고민하는 태스크가 프론트엔드 개발자에게 할당되다니, 제게는 꽤나 신기하고 즐거운 일이었습니다.

디자인 작업에 들어가기에 앞서 현재 ‘만다오홈’ 페이지가 수행하고 있는 역할은 무엇인지, 어떤 점이 더 개선되면 좋을지부터 위키 문서에 적어 보았습니다. 스크럼 중 공유받은 니즈와 제가 평소 메모해두었던 부분을 참고해서 개선 포인트를 정리했어요. 이 과정을 통해 요구사항을 더 구체화할 수 있었습니다.

만다오홈 역할

- 만다오에서 만든 앱들의 목록을 보여주는 진입점 역할.
- 에디터로 가기 전 중간 다리 역할.

개선 포인트

- 3개월 전의 이벤트를 조회할 수 없다.
- 검색이 잘되었으면 좋겠다.
- 다른 팀에서 작성한 만다오앱을 참고할 수 있으면 좋겠다.
- 또 앱이 너무 많이 표시되면 성능상 문제가 있을 수 있으니 적당히 참고할 수 있으면 좋겠다.
- 기간이 짧으면 제목이 잘려 보이는데 제목이 잘 보이면 좋겠다.
- 배포한 앱으로 바로 진입할 수 있으면 편하겠다.

개발자가 디자인도 하고요.

기획을 어느 정도 마무리하고 난 후, 디자인 작업을 시작했습니다. 팀 피그마(figma)에서 이런저런 UI를 그려보았습니다. 작년 우아한테크코스 과정을 진행하면서 피그마로 UI 작업하는 과정을 많이 경험해본 덕분에 금방 적응해서 그릴 수 있었습니다.

팀원분들에게 피그마에 작성한 디자인을 설명해 드리고 피드백을 받는 미팅콜 시간을 보냈습니다. 팀원분들의 다양한 아이디어가 모여서 더 좋은 UI로 점점 발전하는 과정이 즐거웠던 기억이 납니다. (현승님, 진혁님, 해민님, 세진님 모두 너무 감사합니다!) 마지막으로 그룹장이신 민태님의 승인까지 받고 개편 디자인이 확정되었습니다.

프론트엔드 개발자지만 서버개발도 합니다.

입사 후 m/d라는 용어를 새롭게 배웠습니다. 한 사람의 1일 업무량을 뜻하고, 맨데이라고 읽는다고 하는데요. 만다오홈 개편작업의 디자인을 마치고 구현을 시작하면서, 개발기간이 총 7일이 소요될 것으로 일정 산출을 했었습니다. 티켓도 3개로 잘게 쪼개서 꽤 구체적이고 현실적인 일정 산출이라고 생각했었죠.

그런데 실제로는 2배에 가까운 시간이 소요되었습니다. 🥲 초보 개발자인 저는 화면에 표시할 앱 목록을 받아오는 API를 새로 만들어야한다는 사실을 간과해버렸죠.

DTO가 뭔지도 모르던 제가 Nestjs 공식문서 보면서 벼락치기를 했습니다. 다행히 기존에 잘 작성된 코드가 있는 덕분에, 기본문법만 익히는 것만으로도 필요한 API를 작성할 수 있었어요. DB 테이블을 조인하는 부분에서 애를 먹었지만, 이 부분도 팀원분들의 도움으로 잘 마무리할 수 있었습니다.

일정 산출을 잘하지 못한 건 아쉬웠지만, 직접 만든 API에 요청을 보내고 응답이 잘 돌아오는 것을 보니 뿌듯했습니다. 😁

개발자가 직접 운영 지원도 해요.

만다오팀은 #support-mandao 라는 서포트 채널을 운영하고 있습니다. 이 채널을 통해 만다오 사용자분들께서 궁금하신 점이나, 저희 만다오 개발자들의 지원이 필요한 부분에 대해 청취하고 도와드리고 있습니다.

사실 아직도 서포트 채널에 글이 올라왔을 때, 어떻게 안내해 드려야 할지 몰라서 헤매는 경우도 있어요. 그래서 선배 개발자분들의 도움을 많이 받고 있는데, 만다오력(?)을 차곡차곡 채워서 하루빨리 혼자서도 문제 없이 운영지원도 문제 없이 해내고 싶은 욕심도 있습니다. 💪

정말, 이 팀이 잘 맞는 것 같아요.

2022년 5월 10일,
처음으로 제 손으로 배포를 한 날이자, 앞서 소개해 드렸던 개편된 만다오 홈화면을 처음으로 선보인 날입니다. 베타환경에서 배포했던 홈화면에 부족한 점이 많았는데, 전 만다오 개발자이신 성환님과 찬호님께서 소중한 피드백 전해주신 덕분에 잘 보완해서 무사히 배포할 수 있었습니다. 🙏

홈화면이 공개된 후, 서포트 채널을 통해서 만다오 사용자분들이 격려 말씀을 보내주셨어요. 업무차 미팅에 갔는데, 회의 참석자 분들로부터 홈화면을 포함해 계속해서 추가되는 기능들이 예쁘고 편리하다는 피드백을 들을 수도 있었어요.

사실 개편된 홈화면이 예뻐 보이는 건 우리 디자이너분들이 이벤트 지면을 예쁘게 뽑아주셔서입니다.(ㅎㅎ) 그래도 팀원분들이랑 계속해서 어떻게 하면 더 편하게 사용하실 수 있을지, 고민하고 신경 썼던 부분들을 정확히 알아주셔서 매우 기뻤습니다. 사용자분들의 목소리를 이렇게 가까이서 들을 수 있다는 점도 만다오팀의 큰 매력인 것 같아요. 💙

입사 후 ‘갈 수 있는 팀 중에 제일 잘 맞는 팀에 왔다.’라는 표현을 종종 써왔는데요. 그만큼 즐겁게 몰입해서 일할 수 있었기에 참 감사한 마음이 듭니다. 좋은 분들과 함께하며 다양한 경험을 할 수 있는 우아한형제들에서 앞으로도 프론트엔드 개발자로서 즐겁게 성장해나가고 싶습니다. 💪