0. 들어가며..

비록 방향성도 없이 올해 1월, 파이썬으로 시작한 코딩이었지만 늘 다른 사람들과의 협업을 궁금해했었다.

프런트엔드로 방향성을 잡고 자바스크립트를 시작한 9월에도 마냥 혼자 깃허브 레파지토리에 공부 기록을 남기고 백준 문제만 소소하게 풀어나갔을 뿐이다. 그렇게 얼떨결에 11월부터 위코드 40기에 합류하게 되고 html/css → database → git → javascript → React 순서대로 정신없이 3주차를 어찌저찌 마무리하였다.

그렇게 그 어떤 기술 스택도 완전히 습득하지 못한 채 불완전한 지식을 가지고 Project Kickoff (프로젝트 안내) 를 맞이했다. 사실 내 자신의 부족한 리액트 실력에 걱정이 되기도 하였지만 지난 11개월 가까이 기다렸던 일인만큼 기대 또한 컸었다.

1. 시작

우리의 1차 프로젝트 팀. (당시 Team E) 비록 같은 공간에서 지난 3주간 함께 생활하셨던 분들이었지만 다른 팀 프로젝트를 함께 하거나 자리를 가깝게 앉은 적이 한번도 없던 분들이었어서 시작은 여느 팀과 같이 어색했지만 대화를 시작한지 5분만에 ‘아 이 팀 뭔가 될 것 같다.’라는 생각이 들었다.

팀 결성과 동시에 Product Manager과 Project Manager를 뽑는 회의가 시작되었다. 사실 대학에서도 늘 발표몬을 맡았던 나이기에 처음에는 Product Manager를 지망하였지만 다양한 플랫폼을 사용하여 팀의 프로젝트를 관리하는 Project Manager에도 관심이 갔었다. 잠시 소소한 고민에 빠지려던 찰나 백엔드의 H님께서 먼저 프로덕트 매니저에 관심이 있다고 강하게 피력을 해주셨고 FE와 BE에 PM이 한명씩 있는 것이 좋을 것 같다는 다른 팀원의 의견에 나는 운좋게 프로젝트 매니저(PM)가 되었다. 그와 동시에 우리팀의 이름은 <푸쉬하니니브랜치>, 영문명은 로 굳혀지게 되었다. 추후에 사이트 이름은 <고기잇 Gogi it>으로 정하게 되었는데 이름이 세개라 조금 혼란스러웠다. 한글명, 영문명, 사이트명 모두 하나로 통일하는 것도 괜찮은 생각인 것 같다.

2. 사전 회의 & 1차 sprint

우리 팀이 하게 될 웹사이트는 바로 고기 전문 이커머스 <정육각>이었다. 사실 이때 <정육각>을 처음 알게 되었다. 내심 레이아웃이 화려한 나이키, 오설록, 이솝같은 대기업의 웹사이트도 궁금했지만 PET 분석을 위해 사이트를 하나하나 뜯어볼수록 컨셉과 방향성이 확실한 정육각 사이트가 맘에 들었다. 또한 앞서 언급했듯이 불완전한 지식을 가지고 무언가 프로젝트를 진행하기 위해서는 기본기에 충실한 <정육각>이 제격이라는 생각이 들었다.

그렇게 멘토님들과 하는 본격적인 1차 sprint 월요일 회의에 앞서 주말에 모두 모여서 각자 개별적으로 분석해본 pet를 발표해보았다. 발표에서 중복되는 내용과 추가되는 내용을 모두 정리하여 팀 단체 노션에 기록했고 프로덕트 매니저님께서 해당 PET 페이지를 꼼꼼하게 관리해주셨다.

그 과정에서 제품의 궁극적인 목적인 “초신선”과 “합리적인 가격”이라는 키워드는 가져가기로 했고 좀더 “고기”에 초점을 맞추기 위해 과감하게 원본 사이트에 있던 밀키트, 낙농제품 등은 빼기로 하고 돼지, 소, 닭 외에 추가로 육고기인 “오리”를 추가했다. 이 외에도 사이트의 몇몇 부분은 아예 이미지 태그로 구성되어 있어서 SEO 최적화가 다소 아쉬웠다. 따라서 우리팀은 오래 걸리더라도 이러한 부분은 보완해보기로 했다.

이어서 프로젝트 매니저로서 사전에 준비할 일이 PET 분석 외에도 하나 더 있었다. 그것은 바로 팀 전용 notion, slack channel, Trello 만들기였다. 특히 Trello 관리는 프로젝트 매니저의 핵심 업무 중 하나라고 할 수 있을만큼 너무 중요해서 sprint meeting 전에 프로젝트 매니저가 미리 어느정도 틀을 잡고 만들어가는 것을 추천한다.

크게 리스트를

• Backlog (프로젝트 단위로 해야 할 일)
• To-do (This Sprint) (오늘 해야 할 일)
• In Progress (진행 중인 일)
• In Review (PR) (멘토님의 리뷰를 기다리고 있는 일 . github의 PR을 기준으로..)
• Done (완료된 일, github의 merge를 기준으로..)

으로 나누어서 FE와 BE의 업무로 나누어서 진행했다. 전체적인 FE의 티켓들은 내가 실시간으로 관리를 하였지만 명확하게 알기 어려운 BE의 티켓들의 경우, 매일 아침 진행된 stand up 미팅을 통해 조정을 하였다.

또한 trello의 라벨링 기능을 적극 활용하여 멘토님들께서 권유한 FE, BE 분류 외에도 공통, 대기중, 급함, 보류, 작업, 보수 라벨을 세분화하여 현재 팀원들의 작업 상황을 티켓으로 확인할 수 있게 설계하였다.

이어서 월요일에 본격적으로 진행된 1차 Sprint.

프로젝트 기간 내내 진행되는 모든 회의와 sprint는 프로젝트 매니저의 주도 하에 이루어진다고 생각하면 된다.
때문에 왜 sprint 회의를 하는지, agile 방식이란 무엇인지 깊이 생각하고 우리팀에 어떻게 적용하면 좋을지 알아가면 좋다.

각설하고 멘토님들의 멘토링 하에 프로덕트 매니저는 사전에 준비된 PET 분석 자료를 브리핑하면 되고 프로젝트 매니저는 앞으로의 진행 일정, Trello와 notion을 멘토님들께 공유하면 된다. 이후에는 FE와 BE로 나누어서 각 멘토님들과 함께 구체적인 진행 방향을 잡았다.

해당 피드백들을 토대로 프로젝트 매니저의 주도 하에 FE와 BE 모두 모여서 어떠한 페이지를 주어진 2주 내에 구현할 수 있고 어떠한 페이지는 버려야하고 어떠한 기능을 새롭게 추가할 것인지 팀끼리 회의하게 되었다. 우리팀의 경우, 프로젝트 매니저인 내가 <정육각>의 모든 페이지 부분을 PDF를 따서 어떤 페이지를 어떻게 구현할 수 있을지, 어떤 페이지를 버릴 것인지 확실하게 잡고 갔다.

구두로만 설명하게 되면 놓치게 되는 부분들이 생길 것 같아서 PDF를 보여주며 아이패드로 다같이 페이지 하나하나 보면서 가감 작업을 하였다. 이후에 단체 슬랙에 공유하여 팀원들 모두 공통된 기능 구현에 대해 인지하게 되었으며 해당 측면에서 충돌하게 되는 일은 없었다.

이때 아쉬웠던 점은 이 작업 외에도 (key)키값 통일이나 mock data 를 정교하게 정했으면 더 좋았을 것 같다. 하지만 나도 우리 팀원들도 모든게 처음이었어서.. 이 정도만 해도 당시에는 많이 했다고 생각했다.

3. 1주차 (FE 레이아웃)

이제 스프린트와 모든 사전 회의들을 끝내고 월요일 밤부터 본격적인 코딩 작업을 시작했다. 우리팀의 FE의 티켓들은 페이지의 레이아웃과 기능 부분을 분리하게 되어 먼저 각 페이지의 레이아웃 작업부터 하기로 했다. 프런트엔드가 세명이라 조금 걱정되었지만 거의 공장 수준으로 레이아웃을 빠른 속도로 찍어내주신 M님 덕분에 티켓 운영도 차질 없이 진행되었다. 또한 이 시기에 앞서 언급했던 SEO 최적화 작업을 진행하여 가능한 한 많은 텍스트와 태그를 HTML에 담을 수 있도록 노력했다.

나는 main 페이지와 product list 페이지를 맡아서 진행했다. 레이아웃이 비교적 단순함에도 시간이 생각보다 오래걸렸다. 레퍼런스가 되는 웹사이트의 겉면만 보면서 최대한 똑같이 클론코딩을 하는 것도 아예 처음이었을 뿐더러 리액트의 컴포넌트화 작업이 처음이라 모든 레이아웃과 기능구현을 마쳤음에도 불구하고 리펙토링과 컴포넌트 분리에 너무 많은 시간을 할애했던 것이 원인이었다. 또한 프로젝트 매니저의 일과 프론트엔드의 일을 병행하려다보니 스스로의 시간분배가 제대로 되지 않았다.

이에 대한 타결책으로 개인 시간을 확보하기 위해 점심 이후~5시까지는 8층이나 1층의 공용 공간에서 혼자 코딩하는 시간을 가졌으며 이 외에 시간에는 주로 팀원들과 같이 코딩하거나 다함께 긴급 회의를 하거나 특정 팀원의 blocker를 봐주기도 하였다. 이런 나의 ‘혼자 시간’을 모든 팀원분들이 존중해주시기도 하였고 내가 어디서 공부하고 있는지 늘 장소 브리핑(?)을 하였기 때문에 급한 일이 생기면 팀원들이 슬랙을 남기거나 직접 찾아와주시기도 하였다. 이런 모두의 배려 덕분에 프로젝트 중반부부터는 나의 티켓 진행도 원활히 진행되었던 것 같다.

-> 1차 프로젝트 회고록 2편에서 계속