Intro

드디어 우리 42gg 팀이 크래프톤을 다녀왔습니다 !!

이전에 donghyuk과 jabae만 크래프톤에 갔을 때 코드 리뷰 기회가 있다는 것만으로 두근두근 했었는데, 이번 기회에 모두가 갈 수 있게 되어 너무나 행복했습니다.

발표준비

대략 2주 전쯤 날짜가 확정되면서 본격적으로 발표 준비에 들어갔습니다. 추석 연휴 바로 다음날 방문하는 일정이었는데, 연휴에도 쉬지 않고 팀원들이 나와 발표 준비를 진행했습니다. (모두 수고했다!!!)

발표는 크게 서비스소개, 프론트엔드, 백엔드 부분으로 섹션을 나누어 소개하기로 했습니다. 서비스 소개는 자신감 넘치는 hakim이, 프론트엔드는 프론트 리드인 jabae가, 백엔드는 팀장인 nheo가 발표를 맡기로 했습니다.

발표 시간이 총 30분으로 제한되어서, 그 시간안에 무엇을 보여줄 지 고민하는 것도 우리의 큰 숙제 중 하나였습니다. 그래서 먼저 팀원들과 전체회의를 열어 발표자료를 어떻게 구성할지에 대해서 회의를 진행했습니다. 회의 항목은 다음과 같습니다.

  • 업데이트 전 코드(현재 운영중인 42gg 서비스 코드) vs 업데이트가 진행된 코드 : 당시 우리는 업데이트를 준비중이었기 때문에, 출시된 42gg 서비스에서 코드가 많이 변경된 상태였습니다. 그래서 어떤 코드를 가지고 코드리뷰를 받을 지 고민했습니다.
  • 리팩토링의 필요성 : 얼마 전, 42를 졸업하고 취직한 선배님들과 만남의 자리를 가졌습니다. 그 때, 우리 코드를 보며 진심어린 조언을 해주셨는데 그 부분을 비롯해서 전반적인 코드에 걸쳐서 리팩토링이 필요한 가에 대해서 논의했습니다.
  • 통계를 보여줄 것인가? : 우리가 업데이트를 진행하면서 관리자 통계 페이지를 추가하기 위해 작업을 진행중이었는데, 이 부분을 보여줄 지, 보여줄 시간이 될 지에 대해서 논의해보았습니다.
  • 코드의 어느 부분을 가져가지? : 로그인부터 매치, 랭크, 게임, 유저 페이지까지 코드의 양이 방대하기 때문에 어느 부분을 보여주어야 우리 서비스를 인상깊게 전달할 수 있을까 고민했습니다.

결론적으로 업데이트 전, 약 한 달 전 코드를 들고가는 건 의미가 없다고 판단되어서 현재 코드를 가져가기로 했습니다. 우리가 함께 그 사이 성장하기도 했고, 업데이트를 진행하면서 리팩토링을 같이 진행했기 때문입니다. 그래서 리팩토링도 선배님이 조언해주신 것 중 가장 빨리 해결할 수 있는 몇 가지만 진행했습니다. (가령 프론트엔드의 경우 css 속성 순서 규칙 정하기 정도)

통계부분은 맨 마지막으로 미뤄두고, 시간이 된다면 뒷부분에 추가하기로 했습니다. 코드의 어느 부분을 보여줄지는 프론트엔드, 백엔드가 각각 고민이 많았던 지점이나 자신감 넘치는 부분을 뽑아서 정하기로 했습니다.

서비스

서비스 파트에서는 기수도 다른 우리가 어떻게 만나게 됐고, 어쩌다 42gg란 서비스를 생각해냈는지에 대해서 소개하며 발표를 시작했습니다. 그리고 사이트 시연 영상을 준비해 처음 보는 분들이 어떤 기능이 있고 어떻게 사용하는 지 이해하기 쉽도록 구성했습니다.

다음으로 mvp 기능설계도로 페이지별로 주요 기능으로 어떤 기능이 있는지 보기 쉽도록 표현했습니다.

또, 백엔드와 프론트엔드에서 사용한 기술과 버전을 간단히 보여주고, 우리가 서비스를 준비한 총 52일을 로드맵으로 정리했습니다.

프론트엔드

프론트엔드는 매치페이지를 중심으로 소개하기로 했습니다.

매치페이지는 여러 유저가 동시에 페이지를 사용하게 되면 현재 상태와 보여지는 화면 사이에 간극이 발생할 수 있었습니다. 이 부분에서 유저가 불편함을 느끼지 않도록 하기 위해 많은 고민을 했었습니다. 그래서 우리는 발생할 수 있는 모든 케이스를 정리하고 필요한 modal과 alert 메시지를 띄어주기로 했습니다.

이렇게 매치페이지는 고민을 많이 했던 페이지이기도 하고, 우리 42gg의 매칭이라는 주요 기능을 담고 있는 페이지이기도 했기 때문에 해당 페이지를 소개하기로 결정했습니다. 더불어 modal을 하나의 라이브러리 형태로 리팩토링한 부분도 함께 보여주기로 했습니다.

프론트엔드는 컴포넌트 중심으로 코드를 작성하기 때문에 컴포넌트가 중요하다고 생각했습니다. 그래서 컴포넌트 중심의 플로우차트와 함께 전체적인 구조와 흐름을 설명하며 발표를 진행했습니다. 이를 통해 처음 코드를 보는 사람들도 우리 서비스를 잘 이해할 수 있도록 했습니다.

본격적으로 매치페이지를 설명하기 위해, 우리는 시퀀스 다이어그램을 사용하여 해당 페이지의 흐름을 설명했습니다. 프론트엔드 흐름을 시퀀스다이어그램으로 표현한 레퍼런스를 찾기가 어려웠지만, 구글링을 통해 대략적인 틀을 참고해서 고치고 또 고쳤습니다. 열심히 고민해서 만든 만큼 긴 코드와 컴포넌트의 흐름을 시퀀스다이어그램을 통해 효과적으로 전달할 수 있었습니다.

흐름을 설명한 후 코드를 설명했습니다. 이해를 돕기 위해 컴포넌트로 표현한 와이어프레임을 만들고 해당하는 코드를 매핑했습니다. 매치페이지에서 시간이 보여지는 버튼(이하 슬롯)을 통해 경기를 등록하고 취소할 수 있도록 구현했습니다. 슬롯은 경기 등록이 가능한 상태, 내가 경기를 등록한 상태 그리고 경기 등록이 불가능한 상태 3가지로 나뉘어집니다. 각 상태에서 유저가 클릭할 때 어떻게 동작하는지에 대한 코드를 매핑하여 다양한 경우의 수를 보여드리고 싶었습니다. 이렇게 우리가 고민해서 작성한 부분들이 현업 개발자분들에게는 어떻게 보여질지가 궁금했습니다.

다음으로는 모달을 소개했습니다. 모달은 자신있게 보여주고 싶은 부분이었습니다.

페이지별 담당자가 나뉘어져 있었고, 해당 페이지에 필요한 모달은 각각의 페이지의 컴포넌트로 관리를 했었습니다. 그러다보니 각각의 모달 형태도 조금씩 다르고, 다른 페이지의 동작에 의해서 영향을 받는 부분이 생기면서 모달 관리가 어려워졌습니다. 또한 비슷한 코드가 여러 컴포넌트에 중복되어 들어가기도 했었습니다. 이런 문제들을 해결하기 위해, 팀원들의 다양한 시도 끝에 모달들을 한 번에 관리할 수 있도록 모달프로바이더라는 하나의 컴포넌트로 리팩토링 했습니다.

마지막에는 modal 중에서 경기를 등록하는 MatchEnrollModal의 코드를 준비했습니다. 이 코드의 try catch 부분이 우리가 출시 전, 가장 고민했던 부분 중 하나입니다. 우리는 실시간 통신이 아니기 때문에 페이지를 새로고침하지 않으면, 유저가 클릭한 슬롯이 여전히 경기가 등록 가능한 슬롯인지 확인할 수가 없게 됩니다.  그래서 백엔드와 함께 모든 경우의 수를 고려하여 각 상황에 맞는 상태코드를 논의하여 정하고, 해당 코드에 맞는  alert 메세지를 띄워주게 했습니다.

이렇게 고민한 부분을 어떻게 봐주실 지 궁금했습니다.

백엔드

8주간 진행해온 프로젝트를 15분이라는 시간 안에 어떻게 담아내면 좋을까 고민을 많이 했습니다. 모든 기능들을 설명하기엔 시간이 턱없이 부족해 보였고, 팀원들과 의논해서 어떤 내용을 발표할지 정했습니다. 여러 이야기이 오고갔지만 수많은 기능들 중 가장 중요하거나 잘했다고 생각한 데이터베이스, 아키텍처, 레디스, 스케줄러, 테스트코드라는 5개의 파트가 살아남게 됐습니다.

첫 번째로 소개할 기능은 데이터베이스로, 프로젝트 기획단계에서 백엔드 팀원들에게 많은 고심을 안겨준 장본인이었습니다. 팀 단위에서 진행한 DB설계는 모두가 처음이어서 2~3일 동안 서로 머리를 맞대가며 DB설계를 했습니다. 출시 이후 서버 성능향상을 위해 한 번 더 대대적으로 재설계를 하기도 했는데, 그 동안의 노력으로 만든 DB가 현업 개발자분에게는 어떻게 보여질지 상당히 궁금했습니다. (자세한 내용은 블로그 참조)

두 번째는 아키텍처로 세부적인 기능을 설명하기 전에 먼저 전체적인 구조를 발표하기로 했습니다. 저희는 계층형 아키텍처를 토대로 소스를 설계했는데, 계층형 아키텍처는 웹 서비스에서 주로 사용되고 찾아볼 수 있는 자료가 많았기 때문에 짧은 기간내에 프로젝트를 완성해야하는 저희에게 만족스러운 아키텍처였습니다. 현업에서도 이러한 아키텍처를 사용하는지, 저희가 계층형 아키텍처를 잘 사용하고 있는지를 현업 개발자 분들에게 질문해보고 싶었습니다.

세 번째는 스케줄러에 대한 내용이었습니다. 자바라는 객체지향 언어를 사용하면서 객체지향의 상속을 멋들어지게 사용한 부분이라고 생각했기 때문에 현업 개발자분들에게 어필해보고 싶었습니다. 저희가 구현한 기능을 두 가지로 구분하자면 사용자의 요청에 의해 실행되는 기능과 자동적으로 실행되는 기능으로 나눌 수 있는데 자동적으로 실행되는 기능들은 대부분 스케줄러로 동작합니다. (자세한 내용은 블로그 참조)

네 번째는 레디스를 사용한 랭킹 처리였습니다. 백엔드 개발에 가장 중요한 대규모 데이터를 어떻게 처리하냐에 대한 부분이었고 팀원들이 다 같이 고민을 많이 했던 부분이어서 내용에 포함하게 됐습니다. 탁구 랭크 서비스를 진행하다 보니 유저들의 순위를 구하는데 고민을 했습니다. 가장 문제가 되었던 부분은 공동 순위인 사람들을 어떻게 처리하냐였는데, 여러 방안을 고민하다가 결국 성능이 가장 좋은 레디스를 사용해서 랭킹을 처리하게 됐습니다.

마지막은 테스트코드에 대한 내용이었습니다. 개발 초기에는 테스트코드에 대한 중요성을 잘 몰랐었습니다. 기능을 구현한 이후 테스트 코드를 작성하는 일은 귀찮고 고통스러운 작업이었습니다. ‘굳이 잘 작성된 코드를 한번 더 확인하는 테스트코드를 작성해야할까?’ 하는 생각도 많이 들었습니다. 그러나 소스가 많아지고 코드가 수정될 때마다 작성해 놓은 테스트 코드가 빛을 발했습니다. 서버에 새로운 기능을 추가할 때마다 테스트 코드를 돌려보면 서버가 잘 동작하는지 확인할 수 있었습니다.

두근두근 떨리는 발표날!

생각보다 엄청나게 큰 회의실 때문에 굉장히 떨렸습니다. 긴장 안 할 것 같던 hakim과 nheo가 아침부터 긴장을 하고… 사진에서 볼 수 있듯 진짜 컸습니다. 🥹

그렇지만 아침에 이호준 멘토님께서 정말 잘 준비했다는 칭찬의 메시지를 받고, 팀원들 모두 열심히, 정말 잘 준비했다는 확신을 가질 수 있었습니다. 덕분에 발표자들도 조금 긴장을 덜고 발표를 할 수 있었습니다.

발표는 서비스 , 프론트, 백엔드 순으로 진행되었습니다. 파트별로 15분씩 이어나갔으며 발표를 마친 후, 크래프톤 팀장님들과 Q&A 시간을 가지게 되었습니다.

감동적인 리뷰! 칭찬 듣고, 서비스적인 부분과 코드 관련 피드백을 많이 받았습니다. 그리고 앞으로 공부를 어떻게 해나가야할지 선배로써 많은 조언을 해주셨습니다. 우리가 생각지 못했던 부분(수익 구조적인 부분까지)을 짚어주셔서 저희도 진지하게 한 번 더 고민할 거리를 던져주셨습니다. 문서화라던가! 깃헙 코멘트도 그냥 써야되는 건줄만 알았는데 그걸로 서로의 코드 스타일을 알 수 있다는 게 신기했습니다

그리고 다같이 크래프톤 밥도 먹고 후식도 먹고 왔습니다! 😆

땡스투!!

우선 이렇게 소중한 경험을 만들어준 ✨크래프톤과 ✨42이노베이션 아카데미 ✨이호준 멘토님께 감사드립니다! 어디서도 경험해보지 못 할 정말 소중한 경험이었습니다. 코드리뷰 준비를 통해 코드 뿐만 아니라 코드의 흐름을 어떻게 효과적으로 보여줄지에 대한 고민도 해볼 수 있었습니다.

발표 직전까지 우리를 다독여주신 이호준멘토님께도! 정말 한마디로 인해 자신감과 확신을 갖고 발표를 할 수 있었습니다!!

다음으로 몸이 좋지 않아 참여하지 못한 sujpark! 몸이 안 좋음에도 발표 준비를 도와주어서 더 든든하게 준비할 수 있었던 것 같아요!! 함께하지 못해 아쉬웠지만, 그래도 함께라고 생각했어요 !!

그리고 jaemjung! 키노트 천재로 애니메이션을 통해 우리가 더 효과적으로 발표할 수 있도록 도와주셔서 감사합니다!

소감!

nheo – 처음에 그냥 탁구를 좀 더 재밌게 쳤으면 좋겠다고 생각해서 만든 프로젝트가 이렇게까지 커지게 되어서 약간 부담도 있었는데 재미있고 든든한 동료들과 함께해서 그런지 너무 즐거웠던 것 같습니다. 발표날에도 너무 떨렸는데, 돌이켜보면 좋은 경험으로 남은 것 같습니다. 42gg 팀원들 최고!!

donghyuk – 42gg팀원들을 만난게 올해 가장 큰 행복이지 않을까? 함께 있으면서 많은 경험과 추억을 쌓을 수 있었고(주량도) 다들 너무나 열심히 해줘서 이러한 기회까지 얻을 수 있지 않았나 생각이 든다. 다들 너무 멋있고 쵝오다!

hakim – 인생을 살면서 인연이라는 것이 참 중요한데, 그런 면에서 저는 운이 참 좋았다는 생각이 듭니다. 10명이나 모였는데 누구 하나 모나지 않고 행복한 시간을 보낼 수 있었던 것은, 우리가 만나서 함께 하는 것이 운명이었기 때문이라는 생각도 들어요. 우리의 시작인 5월 23일이 저에게 만큼이나 우리에게 모두 소중한 날이었으면 좋겠습니다. GG는 게임이 끝날때 하는 인사말이지요. 우리는 끝인사로 시작했으니 앞으로도 오랫동안 끝 없이 만나기를 바라요.

jiyun – 서비스 개발 참여부터 발표까지, 긴 시간동안 제가 배우고 얻은 것이 정말 많지만 그 중에서도 으뜸은 이 모든 과정을 함께해온 우리 팀원들이 아닐까 싶습니다. 발표 끝나고 몰래 울었음. 히히 발표가 프로젝트의 마무리 단계같아서 발표 준비하는 동안에는 이게 우리의 마지막이지 않을까 생각했는데요. 발표날 현직자분들의 진심어린 조언과 응원을 들으면서 이제서야 시작이구나 싶었습니다. 우리 서비스도, 제 개발 공부도, 우리 팀원들과의 인연도 말이죠. 계속해서 나아가자!💟

wochae – 

소만(小滿)부터 상강(霜降)의 시간동안.

뜨거운 여름철 오래 빛나는 태양같던 우리 팀

스스로 빛나지 못하는 달이 태양을 통해 빛나는 것처럼

저 역시 여러분을 통해 눈부신 경험을 보며 즐거운 해를 보냈습니다.

지금 해처럼 오래는 못 비추더라도 다시 돌아와 돌아올 주기를

떠난 해는 다시 돌아오듯 여러분과 다시 함께하길 바라며

태양이 저물어도 달을 통해 빛나는 소식 알 수 있듯

여러분의 장차 눈부신 활약을 응원하겠습니다.

jabae – 우리 42gg 10명의 팀원들이 있었기에 여기까지 올 수 있었습니다! 출시 이후로 오랜만에 아침부터~ 밤까지! 주말연휴 상관없이! 다함께 모여 발표 준비를 하는 내내 정말 재밌었습니다. 정말 소중한 경험이 되었습니다. 모이기만 하면 웃음이 떠나지 않는 우리 팀! 너무너무 수고했고 고맙습니다!!

jihyukim – 서비스 출시를 끝으로 마무리될 줄 알았는데, 발표 준비를 도우면서 한 번 더 성장한 것 같아 너무 좋았습니다. 포기하지 않도록 서로를 이끌어준 팀원들이 너무 고맙고 대견합니다!! 다들 고생했다 ! 오래 보자 !!

daekim – 팀원들과 함께 했던 지난 시간들 너무 행복했습니다. 아무 것도 모르고 시작했던 저를 잘 이끌어 준 팀원들에게 고마운 마음이 가득하네요! 한 명도 빠짐없이 팀원 모두가 열정적으로 참여했기에 여기까지 올 수 있었던 것 같습니다! 앞으로도 모두 잘 되었으면 좋겠네요! 고생 많았어요 다들!! 행복하자!!

kipark – 발표를 마치고 멘토님께서 하셨던 말씀이 생각난다. 크래프톤팀장님들 께서는 약간의 시간을 쓴 거지만 학생들의 입장에서는 지금 시간이 학생들이 더 성장할 수 있는 씨앗을 제공해주신 거라고 여기까지 올 수 있게 도와주신 이호준 멘토님 너무 감사하고 우리 42gg팀 너무 자랑스럽다. 42gg팀보다 더 잘하는 팀은 찾을 수 있어도 더 좋은 팀은 찾기 어려울 거다. 행복한 시간이었다!!

sujpark – MVP를 완성하고 면접 등 다른 활동을 준비하느라 발표 준비에 참여하지 못한 것이 아쉽습니다. 발표날에 하필 코로나에 걸릴건 뭐람!! 그래도 발표 준비하는 과정, 발표자료를 만드는 과정을 옆에서 지켜볼 수 있었는데 어디에 내놔도 손색이 없을만큼 훌륭하게 해내서 우리 팀원들 정말 대단하게 생각합니다. 특히 발표를 맡아주신 nheo, jabae, hakim 님 고생하셨어요. 취업으로 42서울을 떠나게 되어 당분간 자주 볼 수 없게 되었지만 마음만은 함께입니다.💖