2024-04-06-Front-End-구름톤 회고

1차 팀 빌딩

구름톤 1차 팀 빌딩이 시작되었다. 나는 아이디어를 기획해본적이 없기 때문에 지원자의 역할로 팀 빌딩에 참여하게 되었다. 아이디어 제출이 끝나고, 최종 확정된 아이디어들을 둘러봤다. 생각보다 많은 아이디어들이 있었고, 놀랐던 것은 기획자들이 아닌 디자이너, 개발자들도 아이디어를 냈다는 것이었다. “개발자기 때문에 무조건 지원자 역할로만 참여해야지” 라는 생각을 했던 내가 부끄러워졌다. 나중에 기회가 된다면 기획적인 능력도 키워봐야겠다.
어쨌든, 최종 아이디어를 둘러보며 1차 팀빌딩에 지원할 아이디어를 골라보았다. 일단 가장 먼저 생각한 기준은 “재밌어보이는 주제”였다. 개인적으로 너무 뻔하지 않고 단순 CRUD가 아닌 다른 스택들을 사용해볼 수 있는 주제들이 이목을 끌었다. 두 번째 기준은 그런 주제들 중 기획서의 내용이 알찬 주제를 골랐다. 마지막으로, 내가 신경썼던 기준은 와이어프레임의 유무였다.
왜냐하면, 개인적인 경험으로 비추어보았을 때, 디자인 작업을 할 때 디자이너가 주로 작업하기는 하지만, 기획자들이 디자인 작업을 도와주면 훨씬 수월했기 때문에 피그마와 같은 디자인 툴을 기본적으로 다룰 수 있는 기획자인지 보고자 했다.
좋은 아이디어들이 너무 많았기에, 긴 시간 고민 끝에 아이디어 3개를 골라서 설문 폼을 제출했다.

2차 팀 빌딩

1차 팀 빌딩에서 지원했던 팀들에게서 이미 팀이 구성되었다는 문자들이 날라왔다. 나름 신경써서 만든 포트폴리오 내용으로 자기소개 페이지를 구성했는데, 팀 빌딩에서 떨어지니까 뭔가 우울해졌다.
그래도, 언제까지 낙담하고있을수는 없었다. 2차 팀빌딩이 얼마 뒤 시작했고, 나는 남은 주제들 중 1차 팀빌딩과 같은 방법으로 검토를 한 후 지원을 했다.
다음날, 아직 2차 팀빌딩 결과가 발표되지 않았는데 윤주한테 문자가 왔다. 내용은 자기소개 페이지를 봤는데 맘에 들어서 혹시 팀에 합류할 생각 없냐는 내용이었다. 그런데 정말 놀랐던 것은 그 팀은 내가 2차 팀빌딩 1치망으로 선택했던 ‘메멘토’ 팀이었고, 나는 간단한 커피챗 이후 별다른 고민 없이 메멘토 팀에 합류하게 되었다.

첫 회의

내가 들어간 시점이 이미 1차 팀빌딩에서의 인원이 어느정도 들어가있던 시점이라 정확히 말하면 첫 회의는 아니지만 사실상, 프론트엔드 멤버까지 모두 참여한 첫 회의가 시작되었다.
먼저, 팀 목표를 설정했다. 각자의 목표를 말했는데, 나는 인턴을 하면서 구름톤을 진행해야했기에 수상은 부가적인 목표이고, 메인 목표는 단순 CRUD만 하는 프로젝트가 아니라 새로운 스택을 접목시킨 프로젝트, 해커톤이 끝나고도 유지보수를 하는 것이 목표라고 소개했다.
다른 사람들도 좋은 관계 형성, 프로젝트 완성이 목표라고 하였지만, 수상이 목표인 사람도 있었다.
내가 해커톤에 올인할 수 있는 상황이 아니라서 부담스럽기도 했지만, 그만큼 열심히 노력하기로 마음먹었다.
이후에는 팀 이름을 정하는 시간을 가졌는데, 많은 팀 이름 후보들 가운데 내가 제시한 “기억해봄”이 결정되었다. 자연스럽게, 프로젝트 제목도 기억해봄이 되었다 ㅎㅎ
이후, 간단하게 팀 문화와 규칙을 정하고 정기 회의 일정과 코어타임을 정했다. 마지막으로, 오프라인 모임 일정도 정해보았다.

사전 프론트엔드 회의

전체 회의가 끝나고 재현이랑 프로젝트 시작 전 프론트엔드 사전 회의를 진행하였다.
주제는 기술 스택과 컨벤션, 폴더 구조를 확정짓는 것이었다.
기술 스택 설정에서 고민이 좀 많았는데, 나는 야놀자 부트캠프를 하면서 많이 써본 기술 스택이 어느정도 고정되있었는데, 재현이는 프로젝트 경험이 많이 없다보니 typescript나 react query에 대한 사용 경험이 아예 없었다.
다행히, 내가 이런 스택들의 사용이 괜찮냐고 물어봤을 때, 재현이가 적극적으로 배우기 위한 노력을 보여주었고 열정적으로 표현해주어서 너무 좋았다.
그래서 내가 예전 프로젝트들에서 썼던 내용들을 가져올 수 있어서 생각보다 빠르게 첫 프론트 회의가 빠르게 마무리되었다.

오프라인 모임

홍대에 있는 카페에서 기억해봄 팀 첫 오프라이 회의를 진행하였다. 첫 대면 모임이라 처음에는 살짝 어색했지만, 얘기를 하다보니 금방 어색함이 풀렸다.
오늘 목표는 initial commit 및 역할 분배었다. 지난번 회의 내용을 바탕으로 패키지를 설치하고 폴더 구조를 확정지었다.
또, 1차적인 와이어프레임이 완성되어서 페이지 목록을 정리해서 역할 분배를 했다. 아무래도 API 연동이 아직 어색한 재현이 대신API 연결이 많이 필요한 페이지들을 내가 맡았다.
공통 컴포넌트 역할 분배도 했다. 야나바다때만 해도 공통 컴포넌트 작업만 일주일 이상 걸렸었는데, 이번 프로젝트는 단기간이기도 하고 규모가 크지 않아서 만들 공통 컴포넌트가 3개밖에 없었다.
공통 컴포넌트같은 경우는 내가 이전에 만들어둔 컴포넌트를 약간 바꿔 활용하면 되어서 내가 버튼과 네비게이션 바를 맡았다.
이렇게, 역할 분배와 initial commit을 마치고 뒷풀이를 하러 갔다.
예은이는 일정이 있어서 참석을 못했지만, 술도 먹고(예상보다 너무 많이 먹음 ㅋㅋ…) 연재의 반대가 있었지만 말도 놓고 친해질 수 있는 기회여서 너무 좋았다.

퍼블리싱

주말이 지나고 월요일부터 퇴근하고 코어타임 2시간동안 작업을 진행했다. 오랜만에 react를 쓰려니 어색했지만 워낙 많이 써왔었고 boiler plate가 워낙 많았기 때문에 크게 문제될것은 없었다. 하지만, 코어타임 중 거의 절반은 회의시간이라 하루에 한시간 퍼블리싱으로는 일주일만에 공통 컴포넌트와 페이지 레이아웃을 모두 퍼블리싱하는것이 힘들었다.
그래서 구름톤 전날인 금요일에도 아직 퍼블리싱이 한참 남았었고, 적어도 퍼블리싱은 끝내고 해커톤을 시작해야할것같아서 밤을 새서 퍼블리싱을 완료했다 ㅠㅠ…

해커톤 1일차

금요일 밤새 작업하고 네이버 코테때문에 3시간 쪽잠을 자고 일어났다. 당연히 제정신이 아니었고, 코테 연습도 아무것도 안되어있어서 코테는 말아먹었다. 어찌되었건 구름톤에는 참여해야하기에 준비를 하고 집을 나섰다.
마침 예은이가 근처에서 치과 진료가 있어서 같이 가자길래 명동에서 만나서 버스를 타고 판교로 출발했다.
편의점에서 간단하게 점심을 떼우고 셔틀버스를 타고 카카오 AI 캠퍼스로 출발했다. 역시 카카오답게 건물이 MZ스러웠고 새 건물 냄새가 나는 곳이었다.
간단한 소개가 끝나고 마침내 구름톤이 시작되었다. 생애 첫 해커톤이었기에 떨렸지만, 할일이 산더미었기에 작업을 바로 시작했다. 금요일에 퍼블리싱을 완료해놨기에 기능 구현을 바로 시작했는데, 우리 프로젝트의 핵심 기능인 STT(Sound To Text) 기능을 구현해야했다.
마침 회사에서 최근에 웹상에서 음성을 녹음, 재생하는 로직을 작성해봐서 금방 끝날줄 알았다. 하지만, react에서의 구현 방법은 조금 달라서 생각보다 시간이 오래 걸렸다.
무엇보다 내가 사용한 mediaRecorder라이브러리는 음성을 녹음 및 재생할 수 있는 기능을 제공하지만, 음성을 텍스트로 변환해주는 기능은 제공하지 않았고, 설상가상으로 텍스트로 변환해주는 라이브러리는 mediaRecorder에서 사용하는 Blob이라는 파일 형식을 사용하지 않았다.
몇 시간을 날린것같아서 너무 허무했고 다급해졌지만, 다행히 음성을 텍스트로 변환해주는 web-speech-api 라이브러리 연동을 금방 해냈다. 그리고 결과적으로 음성을 다시 재생해볼 수 있는 기능이 필요했기에 구현했던 mediaRecorder를 이용한 음성 녹음 및 재생 기능도 삭제하지 않고 유지할 수 있었다.
여기서 놀라웠던 것은 STT 구현을 위해 사용한 web-speech-api 라이브러리의 정확도가 생각보다 훨씬 높아서 너무 만족스러웠다.

해커톤 2일차

금새 해커톤 2일차 새벽이 되었고, 본격적인 API 연동을 시작했다. 연재도 백엔드 작업이 끝나서 로그인 API 연동과 일부 페이지 API 연동을 도와준다고 해서 너무 든든했다.
먼저 엘범 페이지 API 연동을 끝내고, 속도를 붙여 작업을 이어갔다. 가장 힘들었던 것은 일기생성 API 였는데, STT의 결과와 선택한 감정을 바탕으로 API 호출이 일어나야 해서 프론트단에서 데이터를 들고있다가 한번에 body에 담아주어야했다. 또한, response로 온 일기 data를 가지고있다가 다른 페이지들에서 렌더링을 시켜줘야했길래 전역 상태관리 라이브러리와 localStorage를 적극적으로 활용하였다.
그리고, 모아보기 페이지에서 사용할 swiper 구현이 생각보다 어려웠다. 처음에는 라이브러리를 사용하지 않고 구현해보려고했는데 너무 비효율적이라 급하게 사용할 swiper 라이브러리를 찾아 적용했다. 적용은 금방 끝났는데 하나 사소한 에러사항이 있었다. 사진 위에 마우스를 호버하면 테두리가 생기는것이다. 아무리 document를 읽어봐도 테두리를 적용시키는 속성을 찾아볼 수 없었고, 결국 css를 직접 조작하기로했다. 그런데 워낙 css가 복잡하게 적용되어있어서 어떤 속성을 건들여야할지 감이 오지 않았다. 한참을 찾다가 slick-slide 클래스를 가지고 있는 div의 손자 div의 outline 속성을 none으로 주는 것으로 해결할 수는 있었다.

.slick-slide > div > div {
  outline: none !important;
}

하지만 한시가 급한 해커톤 상황에서 여기에 너무 많은 시간낭비를 해버렸다 ㅠㅠ
정신차려보니 최종 제출이 몇시간 남지 않았고, 설상가상으로 재현이도 API 연동이 delay되는 중이었고, 연재도 로그인 API 연동이 잘 안되고 있는 상황이었다.
결국 내가 모든 API 연동을 해야했고, 설상가상으로 모아보기 페이지 API는 역대급으로 복잡했다. map 함수를 nesting 해서 렌더링을 시켜야 해서 너무 머리가 아팠지만 어떻게든 모아보기 페이지 API 연동까지 끝냈다. 하지만, 시간이 너무 부족했다. 재현이는 다른 이슈가 발생해서 원래 담당했던 함께보기 API 연동이 불가능했고, 연재도 로그인 API 연동은 끝났지만 함께보기 API 연동을 완료하기에는 시간이 부족했다. 결국 함께보기 페이지는 마무리하지 못한 채 헐레벌떡 영상을 촬영하여 최종 제출할수밖에 없었다…

데모부스 운영

아쉬움과 피곤함을 뒤로한채 데모부스 운영을 시작했다. 다른 팀들은 단체 티셔츠와 화려한 장식으로 부스를 꾸몄지만, 우리 부스는 뭔가 초라해보였다 ㅎㅎ

하지만, 윤주와 예은이가 만든 예쁜 팜플렛과 연재의 카메라로 나름 귀여운 부스를 구성해보았다.
그리고 재현이와 기웅이의 유창한 언변 실력과 우리의 자랑인 일기 생성 기능을 앞세워서 무사히 부스 운영을 마쳤다. 체험하시는 분들이 다들 신기해하셨고, 멘토님도 오셔서 음성 아카이빙 등 적극적인 피드백을 해주셔서 너무 좋았다.

발표

점심을 먹고 발표가 시작되었다. 우리는 3부여서 엄청 뒷 순서였다. 데모부스 운영때도 느꼈지만 쟁쟁한 팀들이 많았고, 심사위원분들이 촌철살인으로 질문을 하셔서 윤주가 엄청 긴장한듯보였다. 오랜 기다림 끝에 드디어 우리 순서가 왔다. 발표는 윤주가 했지만, 내가 괜히 긴장되고 떨렸다. 걱정과는 달리 윤주가 긴장한 내색 하나 없이 근사한 발표를 해주어서 무사히 발표를 마칠 수 있었다.

시상식

드디어 마참내 구름톤의 마지막 시상식이 남았다. 쟁쟁한 팀들이 많았지만, 내심 발표 피드백때에도 심사위원분들이 칭찬을 해주셨고 큰 오점 없이 해커톤을 마친 것 같아서 수상을 내심 기대하고있었다. 우수상, 최우수상까지 호명이 되지 않아 목이 탔다. 마지막 대상 역시 다른 팀 이름이 불리자 우리 모두 실망한 표정을 지었다. 다들 내심 기대했던 모양이다. 6명 모두 최선을 다했는데, 수상으로 이어지지 않아 너무 아쉬웠다 ㅠㅠ

마무리

아쉬움이 한가득 남은 2주간의 장정이 끝났다. 오는길에 너무 아쉬운 나머지 팀원들이랑 내내 한탄을 했다. 다행히 팀원들이 다른 공모전이나 대회도 출품해보자는 열정이 있어서 현재 미완성된 페이지를 완성하고 고도화 작업을 진행중이다. 비록 구름톤에서는 수상하지 못했지만, 예은이 말대로 해커톤에서 팀원들이랑 친해지기 쉽지 않은데 좋은 사람들을 사귈 수 있어서 수상보다 값진 것을 얻은 느낌이었다. 무엇보다 이번 프로젝트는 일회성 프로젝트로 남지 않고 계속 고도화해나갈 예정이기 때문에 앞으로 좋은 결과 있을 것이라 기대해보며 이번 회고를 마치겠다.

다들 너무너무 고생 많았고 수고했어~ 앞으로도 화이팅! 💪💪