인생 두번째 프로젝트를 드디어 출시했다. 백&프론트 총 인원도 무려 열 명! 첫 프로젝트에 비해서 굉장히 규모가 커졌다. 이번 프로젝트에서 프론트엔드의 막중한 리드😊의 역할을 맡게 되었다. 프론트 5명의 리드로서 다사다난한 2개월 반이 지나갔다.
🔥 42gg를 열정적으로 마무리한 덕분에
😊 진짜 꿈만 같은 기회로 크래프톤에 다녀오게 되었다! ☞ 꿈의 기업, 크래프톤에 다녀오다.
🏓 42gg
42좋은 42서울인을 위한 탁구 생활 서비스이다. 처음 이 프로젝트를 기획하게 된 배경은 클러스터에 탁구대가 딱 하나 있는데, 그 탁구대를 한 팀이 치기 시작하면 그 팀이 끝날 때까지 그냥 계속 기약없이 기다려야 했다. 클러스터에 사람은 점점 많아지고... 탁구인들도 점점 늘어나기 시작하며 나는 밥먹으러갈 때, 도착했을 때, 집에 가기 전에 항상 탁구대를 기웃기웃했었고, 탁구대 옆에서 빈백에 누워 기다리는 사람도 많아진 것을 볼 수 있었다. (실제로 탁구 경기가 끝나서 내가 칠 수 있을 줄 알았는데 빈백에서 얼른 일어나 탁구대로 스믈스믈 오는 사람을 보고 아차 했던 기억이 있다😭)
이런 기약없는 기다림을 끝내기 위해! 또 더욱 재미있는 경기를 위해!
🏆랭크전 + 🙈5분 전까지 상대를 모르는 매칭 시스템 서비스를 만들기로 했다.
- 개발 기간: 5월 23일(첫 회의)~ 7월 13일(첫 오픈)
- 프론트엔드 기술 스택: Nextjs, typescript, SCSS, Figma
- 프론트엔드 팀원: jabae(나, LEAD🐰), sujpark(믿음직한 전공자, PM 🦁), daekim(c언어 천재🐻), kipark(꽤 다양한 경험 보유🐨), jihyukim(42byte 동지🐤)
팀원 중 daekim, kipark은 react도 써 본 적 없는 첫 프로젝트였고, 심지어 daekim은 c언어 이외의 언어는 처음이라 나와 sujpark이 많이 신경을 써줬어야했다. (jihyukim은 잠시 미쿡에...✈️)
📌 기획
첫 회의에서 백&프론트가 만나 간단하게 자기소개와 mbti를 공유하고, 팀원이 많다보니 서로가 하루에 몇 시간 정도 이 프로젝트에 몰두할 수 있을지를 공유했다. 생각보다 많은 팀원들이 프로젝트에 진심이었고, 또 많은 시간을 할애하지 못한다고 답한 팀원들도 프로젝트가 마무리된 이 시점에서 생각해보면 끝까지 시간 맞춰 자기 할 일을 잘 해주어서 고맙다.
📍 MVP
두 번째 전체회의에서는 각자가 생각하는 서비스 사용 시나리오를 써 와 공유하기로 했다. 여기서 잠시 팀원이 많아 회의가 산으로 갔다가... 바다로 갔다가... 해서 어찌저찌 잘 마무리하고, 공통적으로 생각하는 서비스의 필수 부분 중 MVP(최소 기능 제품,Minimum Viable Product)를 우선 구현하기로 했다.
- 42gg의 MVP: 랭킹, 전적, 검색, 매칭
MVP를 정의하고, 아래와 같이 MVP 구현에 필효한 화면과 기능들을 추가했다.
📐 와이어프레임
그리고 위 기능에 맞춰 내가 와이어프레임을 만들었다. 와이어 프레임은 굉장히 빨리 진행됐어야 했는데, 일단 화면 설계가 되어있어야 보면서 추가적으로 필요한 기능을 빨리 캐치할 수 있고, 또 시각적인 자료가 있어야 더 빨리 회의가 진행될 수 있다는 것을 느꼈다. 또 목업 api를 사용해 프론트가 작업을 시작 할 수 있기 때문이다. (이 시기에 항상 스스로 만든 마감 날짜에 쫓겼다😫)
이후 백엔드에서 각 페이지에 맞게 api 설계 초안을 작성해주셨고, 몇 번의 회의에 걸쳐 api까지 공유하고 확정해 기획단계를 마무리할 수 있었다.
🗳 설문조사
또, 탁구대를 우리 프로젝트에서 사용하기 위해서는 42카뎃분들의 의견도 굉장히 중요하기 때문에 운영진들과 회의도 하고, 42카뎃분들 대상으로 설문조사도 진행했다. 혹시나 탁구대를 쓰는 것에 대해서 안 좋게 생각하진 않을까 걱정했으나 생각보다 많은 사람들이 우리의 서비스를 기다리고 있다는 확신이 생겼고, 이때부터 다들 힘을 얻어 쭉쭉 코드를 짰다.
🛠 프론트 진행 및 개발
📕 숙제
일단 리액트, 자바스크립트를 써 본적 없는 팀원이 둘이기에 기획단계에서 매일 숙제를 내주었다. 요즘 유튜브 강의도 너무 잘 되어있고, 무료 강의가 많아서 보면서 하나의 페이지를 만들어보고, 거기서 궁금한 것이나 추가로 필요한 중요한 것들을 따로 숙제를 내고 회의 때 검사하는 방향으로 진행했다.(노마드코더 강의 강추👍) 그래서 초반 회의는 1시간 넘게 진행했다. 그래도 나도 제대로 몰랐던 혹은 잊고 있었던 것들을 알게 되어서 꽤 괜찮은 시간이었다.
✅ 개발 환경 맞추기
깃 레포를 파고 가장 먼저 한 것이 깃 이슈/커밋/피알 템플릿을 작성한 것이다. 또 처음 파일을 시작할 때에도 ESLint, Prettier를 활용해 전반적인 코드 형식을 맞추었다. 프로젝트 하면서 이런 부분까지 맞추는 게 당연한 거라고 몇 번 강조하고, 일단 셋팅해 놓으니 팀원들이 잘 따라와주어서 큰 어려움 없이 코드 형식이나 깃 쓰는 방법을 맞출 수 있었다.
🗯 코드리뷰
가장 먼저 내가 주말 동안 레이아웃을 만들고, 그리고 팀원들에게 각 페이지를 맡겨 코드를 짜도록 했다. 처음엔 걱정도 많았지만 나름 어찌저찌 코드를 짜오는 팀원들이 대단했다. 타입스크립트를 c처럼 짜기도 하고, "컴포넌트는 뭔가요?", "렌더링은 뭔가요?", "타입에러는 왜 뜨나요?" 등등 굉장히 많은 질문들이 오고 갔다. 이 시기에는 거의 매일 회의를 코드리뷰 형식으로 진행했다. 코드 리뷰하고, 고치고, pr날리고, 확인 후 머지하고. 그래도 이렇게 잡아주었더니 금방 따라와 주는 게 신기하고 고마웠다. 처음인 팀원 뿐만 아니라 내 코드도 설명하고 개선점할 부분을 같이 찾아주어서 소수로 프로젝트를 진행할 때보다 코드 짜는 능력도 향상된 것 같다. 이 과정에서 깃 pr의 comment 기능도 적극 사용했다.
🤜 일의 분배
백엔드와 합친 이후에는 백엔드에서 발생한 이슈, 그리고 회의에 앞서 프론트가 해야할 일을 쭉 적고 내용을 공유한 후 각각의 페이지에, 능력에 맞게 업무 분담을 했다. 프론트가 잘 한 점은 페이지를 나눠서 작성했기 때문에 이렇게 일을 분배하기가 수월했다. 그 수월함은 팀원들의 책임감에서도 나온 것 같다.(감사❤️) 또 모두가 비슷하게 일의 분배가 되지 않으면 어디서(본인 코드에서...) 삽질을 하고 있을 때가 종종있어서 더더욱 일의 분배를 중요하게 생각했다.
📄 문서화
처음부터 위키를 만들어 둔 게 신의 한 수였다. 일단 위키의 개요를 만들어 놓으니 채워야 한다는 생각이 들었다. 또 회의록도 알차게 채워넣었다. 기획단에 만든 피그마, 공부하면서 적은 노션 에러 정리 등등 작성자를 표시하고 올리니 팀원들이 더 책임감 있게 각자의 역할을 해냈다.
처음엔 이렇게까지 해야하나... 고민도 많았는데 오며가며 많이 봐주신 🔆이호준 멘토님🔆께서 깃 정리를 아주 잘 했다고 칭찬해주셔서 더더더 열심히 작성했다.
🖼 디자인
내가 디자인을 맡아 진행했었어야 했는데, 다른 팀원들은 코드짜고 열심히 잔디🌱를 심을 때 나 혼자 피그마를 붙잡고 이게 뭔가... 나는 누구... 여긴 어디... 라는 생각도 들었다. 또 모두가 어느 정도 미적 감각이 있다보니 한마디씩 하기 시작하면.... 으아아아 😱 하지만 지나고 보니 역시 예쁘게 만들어야지 모두가 잘 만들고자 하는 욕심을 일으킬 수 있었다.
리팩토링, 업데이트 때는... 나도 코드 더더더더 더더더더더 많이 만지고 말거다! 😤
🤯 백엔드와 api 연결
6주차에 백엔드 test서버와 연결했다. 프론트는 Nextjs에서 제공하는 목업 api를 아주 잘 활용하고 있었고, 그래서 api연결이 조금 늦어지게 되었다.
그리고 대망의 연결날. 완전히 터지고 말았다.
"🤯 이게 왜 안되는거지?"
응 왜긴 왜야... key 값 달라... value 형식 달라...
api 설계 회의에서 결정하고 넘어갔던 사항들이 그간 긴 소통의 부재로 완벽하게 어그러졌다.
이건 완벽하게 리드들의 잘못이라고 생각한다. (는 나😭) 각 팀의 일이 바빴어도, 리드들끼리 모여 주간회의 형식으로라도 각 팀의 진행사항과 수정사항을 공유하는 자리가 있었어야 했는데 바쁘다는 핑계로.. 미루고 미루다 이 사단이 난 것 같았다.
🤗 그래도 반나절만에 코드를 수정해주셔서 잘 연결할 수 있었다.
😊 마무리
많은 팀원을 이끌어야 해서 부담도 굉장히 많았는데, 지나고 보니 모든 팀원들이 제 역할을 아주 잘 해 준 것 같아 고맙다. 또 많은 머리들이 모여 첫 오픈날 버그 없이 무사히 지나간 것 같다. (42byte 때는 오픈날 가장 바쁘고 커밋이 많았던 것 같은데...😅)
❤️🔥 내가 자주 듣고, 한 말...
매일 비슷한 질문이 날라왔다.
"자배님. 자꾸 에러가 떠요." "자배님. 타임스크립트는 왜 쓰는 건가요?" "자배님..."
이런 질문이 날라왔을 때, 일단 "👊 구글링해보세요!" 혹은 "👊 콘솔로 확인해보셨나요?"라고 시간을 벌고, 검색할 수 있도록 키워드를 알려주거나 관련 자료 링크를 보내주면 된다.😊 생각보다 기초적인 실수가 많기 때문이다.
"자배님 이거까지 해야돼요?"
문서화를 할 때 가장 많이 들은 말이었다. 사실 코드 외적인 부분은 나도 요청할 때 고민을 많이 했었다. "내가 그냥 한 두시간 들여서 정리를 호다닥 하는 게 나은 것 아닐까?" 라는 생각도 했었다. 그렇지만 모두 같이 진행하는 프로젝트고, 잘 못 한다면 내가 가서 봐주고 수정해 주는 게 맞는 거란 생각이 들었다. 또 지난 프로젝트에서 개인적으로 가장 아쉬웠던 점이 문서화를 못했던 것이었기 때문에 팀원들도 자신이 한 부분은 본인의 손으로 정리하는 게 맞다는 판단이 들었다. 다행히도 이호준 멘토님께서 칭찬해주시고 분위기가 올라가서 다들 열심히 해주었다.
☄️ 앞으로...
- 🤔 오픈날에 비해서 사용자가 줄어들고 있는데, 사용자를 끌어올릴 만한 방안을 생각해야 한다.
- 🤓 Nextjs의 장점인 서버 사이드 렌더링에 대해서 다같이 공부해서 어떤 부분에 적용시킬 지 논의해보아야겠다.
- 🧐 코드를 조금 다듬어야하지 않을까...
- 🤨 이호준 멘토님께서 시퀀스 다이어그램을 만들면 좋겠다고 하셔서 프론트도 만들어보아야겠다. 각 페이지별로 업무 분담! (이걸 또 각자의 언어로 만들면 합치는 작업도 필요할 것 같다🤯)
- 🤩 또 운영페이지를 만들어보라는 이호준 멘토님의 미션! 출시일에 바빠 지금은 운영페이지는 백엔드쪽에서 만들어 준 것인데, 이것도 프론트로 가져와 새로 페이지로 만들고, 인포그래픽형식으로 만들어야 한다.
출시하고 끝!인 줄 알았는데, 오히려 더 공부할 게 많아져서 빨리 블랙홀부터 미뤄야겠다. 일주일에 2회 회식, 같이 영화도 보러갈 정도로 너무 친해졌고, 가족같고, 또 너무 소중한 팀원들이고 너무 잘해주어서 고맙다. ❤️
