diff --git a/public/images/9oormthon-13th/9oormthon-13th.avif b/public/images/9oormthon-13th/9oormthon-13th.avif new file mode 100644 index 0000000..1f70c4c Binary files /dev/null and b/public/images/9oormthon-13th/9oormthon-13th.avif differ diff --git a/public/images/9oormthon-13th/acceptance-mail.avif b/public/images/9oormthon-13th/acceptance-mail.avif new file mode 100644 index 0000000..b59a308 Binary files /dev/null and b/public/images/9oormthon-13th/acceptance-mail.avif differ diff --git a/public/images/9oormthon-13th/beerparty.avif b/public/images/9oormthon-13th/beerparty.avif new file mode 100644 index 0000000..aaecdf3 Binary files /dev/null and b/public/images/9oormthon-13th/beerparty.avif differ diff --git a/public/images/9oormthon-13th/certificate.avif b/public/images/9oormthon-13th/certificate.avif new file mode 100644 index 0000000..cd87eb7 Binary files /dev/null and b/public/images/9oormthon-13th/certificate.avif differ diff --git a/public/images/9oormthon-13th/chicken.avif b/public/images/9oormthon-13th/chicken.avif new file mode 100644 index 0000000..5b73a99 Binary files /dev/null and b/public/images/9oormthon-13th/chicken.avif differ diff --git a/public/images/9oormthon-13th/community.gif b/public/images/9oormthon-13th/community.gif new file mode 100644 index 0000000..152fd18 Binary files /dev/null and b/public/images/9oormthon-13th/community.gif differ diff --git a/public/images/9oormthon-13th/designsystem.avif b/public/images/9oormthon-13th/designsystem.avif new file mode 100644 index 0000000..889b59b Binary files /dev/null and b/public/images/9oormthon-13th/designsystem.avif differ diff --git a/public/images/9oormthon-13th/goormsquare.avif b/public/images/9oormthon-13th/goormsquare.avif new file mode 100644 index 0000000..0f08513 Binary files /dev/null and b/public/images/9oormthon-13th/goormsquare.avif differ diff --git a/public/images/9oormthon-13th/ideation.avif b/public/images/9oormthon-13th/ideation.avif new file mode 100644 index 0000000..68f2990 Binary files /dev/null and b/public/images/9oormthon-13th/ideation.avif differ diff --git a/public/images/9oormthon-13th/jeju.avif b/public/images/9oormthon-13th/jeju.avif new file mode 100644 index 0000000..1186d02 Binary files /dev/null and b/public/images/9oormthon-13th/jeju.avif differ diff --git a/public/images/9oormthon-13th/keyword.avif b/public/images/9oormthon-13th/keyword.avif new file mode 100644 index 0000000..d9deb4b Binary files /dev/null and b/public/images/9oormthon-13th/keyword.avif differ diff --git a/public/images/9oormthon-13th/lunch.avif b/public/images/9oormthon-13th/lunch.avif new file mode 100644 index 0000000..a011521 Binary files /dev/null and b/public/images/9oormthon-13th/lunch.avif differ diff --git a/public/images/9oormthon-13th/nametag.avif b/public/images/9oormthon-13th/nametag.avif new file mode 100644 index 0000000..57b2e6d Binary files /dev/null and b/public/images/9oormthon-13th/nametag.avif differ diff --git a/public/images/9oormthon-13th/onboarding.gif b/public/images/9oormthon-13th/onboarding.gif new file mode 100644 index 0000000..49b282a Binary files /dev/null and b/public/images/9oormthon-13th/onboarding.gif differ diff --git a/public/images/9oormthon-13th/presentation.avif b/public/images/9oormthon-13th/presentation.avif new file mode 100644 index 0000000..c37230f Binary files /dev/null and b/public/images/9oormthon-13th/presentation.avif differ diff --git a/public/images/9oormthon-13th/self-pr.avif b/public/images/9oormthon-13th/self-pr.avif new file mode 100644 index 0000000..e8951e7 Binary files /dev/null and b/public/images/9oormthon-13th/self-pr.avif differ diff --git a/public/images/9oormthon-13th/timetable.avif b/public/images/9oormthon-13th/timetable.avif new file mode 100644 index 0000000..8a689f0 Binary files /dev/null and b/public/images/9oormthon-13th/timetable.avif differ diff --git a/public/images/cubeit-intranet-retrospect/mediaquery.avif b/public/images/cubeit-intranet-retrospect/mediaquery.avif new file mode 100644 index 0000000..2b3c01c Binary files /dev/null and b/public/images/cubeit-intranet-retrospect/mediaquery.avif differ diff --git a/public/images/cubeit-intranet-retrospect/mediaquery.webp b/public/images/cubeit-intranet-retrospect/mediaquery.webp deleted file mode 100644 index 9ecb43a..0000000 Binary files a/public/images/cubeit-intranet-retrospect/mediaquery.webp and /dev/null differ diff --git a/public/images/cubeit-intranet-retrospect/random-profile-image.avif b/public/images/cubeit-intranet-retrospect/random-profile-image.avif new file mode 100644 index 0000000..6a8dc47 Binary files /dev/null and b/public/images/cubeit-intranet-retrospect/random-profile-image.avif differ diff --git a/public/images/cubeit-intranet-retrospect/random-profile-image.webp b/public/images/cubeit-intranet-retrospect/random-profile-image.webp deleted file mode 100644 index 12a0d5d..0000000 Binary files a/public/images/cubeit-intranet-retrospect/random-profile-image.webp and /dev/null differ diff --git a/src/content/post/blog/9oormthon-13th-experience.mdx b/src/content/post/blog/9oormthon-13th-experience.mdx new file mode 100644 index 0000000..3b61ced --- /dev/null +++ b/src/content/post/blog/9oormthon-13th-experience.mdx @@ -0,0 +1,217 @@ +--- +title: '구름톤(9oormthon) 13기: 1일 차~4일 차' +date: 2025-02-27 +updatedDate: 2025-02-27 +tags: [구름톤, 해커톤, 구름톤 후기, 구름톤 13기] +image: '/images/9oormthon-13th/9oormthon-13th.avif' +--- + +카카오와 구름이 주최하는 해커톤, **구름톤 13기**에 **프론트엔드 개발자**로 참여하며 겪은 3박 4일간의 이야기를 담아보려고 한다. + +3박 4일간 진행되는 일정이지만 실질적으로 개발 작업을 할 수 있는 시간은 **약 24시간** 정도이다. +우리 팀의 프론트엔드 파트는 짧은 개발 시간 동안 **133개의 커밋과 36개의 PR**으로 서비스를 완성했다. + +구름톤 지원 과정부터 해커톤을 위한 준비 과정은 [지난 글](/post/9oormthon-13th-preparation)에서 볼 수 있다. + +## 떠나요 제주로 + +구름톤 일정은 화요일 아침부터 시작이라 컨디션 관리를 위해 월요일에 미리 제주에 도착했다. + +**시청 근처 게스트 하우스**에서 지냈는데 주변에 식당이 많아서 시청 근처를 추천한다. +참고로 안내 공지에서는 라마다 시티 제주 호텔, 제주 부띠끄 헤르츠 호텔, 호텔 샬롬을 추천했다. + +대부분 월요일에 미리 오셨고, 현업에 종사하고 계신 분들은 회사 때문에 화요일 아침에 오시기도 했다. 가능하다면 월요일에 미리 도착하는 걸 추천한다! + +## 1일 차: 구름톤 시작! + +![](/images/9oormthon-13th/goormsquare.avif) + +드디어 사진으로만 보던 구름스퀘어에 도착했다! 10시 정각에 열린다는 후기를 봐서 걱정했지만, **30분 정도 일찍 도착**했는데도 바로 안으로 들어갈 수 있었다. +플레이어 등록 후 **이름표와 굿즈가 담긴 쇼핑백, 맨투맨**을 받았다. 쇼핑백에 들어있는 쪽지에 첫날 아이스브레이킹을 진행할 팀 테이블 번호가 적혀있었다. + +![](/images/9oormthon-13th/nametag.avif) + +우리 조에는 프론트 3명, 백엔드 1명, 디자이너 1명이 모여서 조 이름을 '프삼백디'로 지었다. (ㅎㅎ) +아이스브레이킹 때 후기에서 본 마시멜로 탑쌓기 대신 **손병호 게임, TTS 음악 퀴즈, 인물 퀴즈** 등을 진행했다. 참고로 정답을 외칠 때 조 이름을 말해야 해서 **짧고 쉽게** 정하는 게 유리하다..! + +--- + +이후 해커톤 강의가 진행됐는데 **좋은 결과보다는 과정이 중요하니 즐거움을 느꼈으면 좋겠다**고 해주셨다. 내 목표도 즐겁게 해커톤을 진행하는 거였기 때문에 좀 더 와닿았던 것 같다. +소문으로만 듣던(..!) **거인의 어깨에 올라타자** 강의를 직접 들을 수 있어서 좋았다. **어떤 걸 해야 하고 어떤 걸 하면 안 되는지** 알려주셔서 해커톤 첫 참여자로서 정말 유익했던 강의였다. + +점심 식사로는 도시락이 제공됐고 이후 **3분 셀프 PR** 시간이 이어졌다. 각자 노션에 작성한 자기소개를 바탕으로 PR을 했는데 다들 발표를 너무 잘하셨다. +같이 합격한 팀원분이 본인 셀프 PR 시간에 **같이 온 팀원이 있는데 잘하니까 데려가라고** 나를 깜짝 피알 해주셔서 감사했다. + +![디자인 시스템 강의 목차](/images/9oormthon-13th/designsystem.avif) + +이후 세션은 크램플린 IDE 실습과 GDS 강의 및 실습으로 나뉘었는데 **프론트엔드 개발자는 GDS 강의**를 들어야 했다. +보일러 플레이트를 만들 때 예상했던 대로 이번 기수부터는 **GDS를 프로젝트에 활용**할 수 있었고 **가산점**까지 주어졌기 때문에 프론트엔드 개발자는 필수로 GDS 수업을 배정받은 것 같다. 나는 평소에 디자인 시스템에 관심이 많고 원래도 GDS 강의를 선택하려고 했어서 괜찮았지만 크램플린 IDE 강의를 듣고 싶어 아쉬워하시는 분들도 계셨다. + +GDS를 만들며 **DX 문제를 해결**하기 위해, 회사와 엔드유저, 크리에이터 모두 만족할 수 있는 디자인 시스템을 만들기 위해 **어떤 노력과 고민**을 했는지 들을 수 있어 배울 점이 많았다. +강의가 끝나고 GDS Github 패키지 레지스트리에 접근할 수 있는 **액세스 토큰을 제공**해주셔서 (현재는 만료됨) 실습을 해볼 수 있었는데, 신기하고 재미있었다. + +![공개된 마지막 키워드](/images/9oormthon-13th/keyword.avif) + +시간표상 일정 마지막에 키워드가 공개되는 걸로 되어있지만, 사실 키워드는 그 전에 미리 공개해 주셨다. 구름톤 13기의 마지막 키워드는 '**공유 경제**'였다. 공유 경제라는 키워드가 독창성 있는 아이디어를 생각하기엔 다소 어려운 주제라는 생각이 들어 고민이 많았다. +모든 참가자가 아이디어 발표를 해야 해서 저녁을 먹고 숙소로 돌아와 발표 자료를 만들었다. + +## 2일 차: 팀 빌딩과 비어파티 + +2일 차 역시 구름스퀘어에 모여 일정이 시작되었다. 다 같이 버스를 타고 플레이스캠프로 이동할 예정이었기 때문에 캐리어를 챙겨왔다. + +![제출한 발표 자료](/images/9oormthon-13th/ideation.avif) + +제출한 발표 자료를 바탕으로 **2분간 아이디어 발표**가 진행됐다. 가장 늦게 자료를 제출한 참가자부터 순서대로 발표를 시작했다. 다른 참가자들의 발표 내용을 필기하며 들었는데, 다양한 아이디어와 함께 직군별 특색을 살펴볼 수 있었다. +나는 최대한 **간단하고 깔끔하게** 아이디어를 정리했고, 남는 시간에는 다양한 프로젝트 경험과 준비해 온 보일러 플레이트를 어필하며 **마지막 PR**을 마쳤다. + +--- + +발표 후 쉬는 시간이 주어지고 **팀 빌딩이 바로 시작**됐다. 쉬는 시간에 화장실에서 한 디자이너님을 마주쳤는데, 내가 자기소개 때 `TailwindCSS`를 선호한다고 해서 같이 하고 싶은 팀원 1순위로 생각하고 있었다며 함께 하자고 제안해 주셨다. 구름톤 참가 전 걱정했던 팀 빌딩에서 **빠르게 첫 팀원을 구할 수 있어** 다행이었다. + +팀 빌딩 시간이 시작되고 먼저 제안해 주신 디자이너님과 함께 나머지 팀원을 모으기 시작했다. 팀원 구성은 '**기획자 1명 디자이너 1명 백엔드 1명 프론트엔드 2명**'으로 이루어지는데, 디자이너님과 아이스브레이킹 때 같은 조였던 분에게 같이 하자고 제안했더니 흔쾌히 수락해 주셔서 프론트엔드 팀원을 모두 채울 수 있었다. +NextJS 기반 보일러 플레이트를 준비했다는 PR을 기억해 주셨고 **내가 준비해 온 기술 스택에 맞춰주시겠다**고 해서 감사했다. + +이미 부분적으로 팀을 구성한 참가자들이 여럿 있어서 함께 하자는 제안을 받았다가 인원 문제로 아쉽게 무산되는 경우가 있었다. 그래서 우리는 혼자 팀을 구하고 계신 분들 위주로 백엔드 개발자와 기획자를 차례대로 영입했고 **생각보다 빠르게 팀이 완성**되었다. +팀 구성 후 바로 자리를 잡은 다음, 어떤 주제로 프로젝트를 진행할지 이야기를 나눴다. 드디어 본격적인 해커톤이 시작되는 순간이었다! + +함께 점심 식사를 하고 (이번에도 점심은 도시락) 단체 사진을 촬영한 다음 해커톤 진행 장소인 **플레이스캠프로 이동**했다. + +![](/images/9oormthon-13th/jeju.avif) + +도착해서 숙소에 짐을 풀고 약간의 쉬는 시간을 가졌다. 이 시간에 팀원들과 주변을 산책하며 유채꽃밭과 성산일출봉도 구경하고 현지인 추천 빵집도 들러봤다. +그동안 제주에 온 실감이 나지 않았는데, 성산일출봉과 유채꽃, 말들을 보니 비로소 제주인 게 실감 나기 시작했다. + +--- + +카카오 현직자 특강 전에 시간이 조금 남아서 프로젝트 세팅을 진행했다. 프론트엔드 팀원과 함께 기술 스택의 세부적인 버전과 패키지 매니저 등을 논의했다. +GDS를 사용하면 가산점이 있지만, 토큰이 약 일주일 후에 만료되고 디자이너님이 **TailwindCSS 기반의 스타일 가이드**를 준비해 오셔서 GDS보다는 커스텀이 용이한 `shadcn/ui`를 사용하기로 했다. + +새로 나온 `TailwindCSS v4` 버전을 사용하기로 했는데, `shadcn/ui`에서 이 버전을 사용하려면 React19가 필요했다. 그 밖에도 관련된 버전 수정이 많아질 것 같아 **준비한 보일러 플레이트를 사용하지 않고** `create next app`으로 처음부터 새로 만들기로 결정했다. +최종적으로는 `Next15` 버전으로 프로젝트를 세팅했고 패키지 매니저는 `yarn`을 사용했다. `.nvmrc` 파일도 추가해 노드 버전을 명시함으로써 모든 팀원이 같은 환경에서 작업할 수 있게 했다. + +아쉽게 만들어온 보일러플레이트를 사용할 수는 없었지만, 준비가 무의미하지는 않았다. 보일러 플레이트를 만들며 작성했던 **커밋 내역을 참고**하며 빠르게 설정을 옮길 수 있었다. +**커밋 컨벤션, 기본적인 폴더 구조** 등도 정리해 뒀기 때문에 관련된 논의할 시간도 크게 단축할 수 있었다. + +--- + +카카오 현직자 특강은 **두고두고 꺼내먹는 기획서 작성과 발표하기 Tip**과 **클라우드 환경에서 Web Service 구성** 두 가지로 진행되었다. + +첫 번째 특강에서는 앞으로 발표를 진행하거나 기획서, 발표 자료 등을 만들 때 활용할 수 있는 **실용적인 팁**들을 알려주셔서 유익했다. +두 번째 특강에서는 **도커와 쿠버네티스** 등 들어는 봤지만 익숙하지 않은 기술들에 대한 설명을 해주셔서 관련 용어와 개념들을 새롭게 알아갈 수 있었다. + +![모두가 기대했던 비어파티](/images/9oormthon-13th/beerparty.avif) + +드디어 대망의 비어파티 시간이 찾아왔다! 사실 나는 맥주를 못 마셔서 **비어 없는 비어파티**를 즐겼다. +음식은 개인적으로 소고기와 새우가 제일 맛있었다! (에피타이저로 제공된 나쵸도 최고...) 맥주 외의 음료는 제공되지 않아 편의점에서 콜라라도 사 올걸 하는 아쉬움이 들었다. + +팀별로 나눠준 명함 카드에 그려진 그림에 따라 비어파티 자리가 배정됐다. 덕분에 다른 팀의 **다양한 직군**의 참가자들과 이야기를 나누며 맛있는 음식을 즐길 수 있었다. + +이후 직군별로 모여 **멘토님과 네트워킹**하는 시간이 이어졌다. 구름에서 GDS 개발을 맡고 계신 멘토님과 이야기를 나눴는데 우리 테이블은 모두 취업 준비생이라 어떤 식으로 취업 준비를 하고 있는지, 요즘 어떤 기술 스택을 사용하고 있는지 등을 물어봐 주셨다. 다른 취업 준비생들의 상황도 알 수 있어 좋았고 참여자, 각자의 이야기를 듣고 멘토님이 해주신 조언도 유익했다. + +서로 명함을 주고받으며 비어파티가 마무리되었고, 다들 기획을 마저 진행하기 위해 각자의 팀원들을 찾아 자리를 떠났다. + +--- + +팀원들과 모여 기획에 대한 이야기를 나누었다. 처음에는 **제주의 빈 공간을 원데이 클래스 등으로 활용할 수 있게 대여해주는 서비스**를 기획했다. + +어느 정도 기획이 마무리되고 나서 에디 멘토님께 피드백을 받았다. 무리 없는 아이디어지만 이전 기수에서도 여러 번 나왔을 만큼 **뻔한 주제**라고 말씀해 주셨다. 뻔하다고 해서 꼭 피해야 하는 건 아니지만 **비슷한 서비스가 있는지, 타겟이 너무 넓지 않은지** 등을 고려해서 차별화 포인트를 찾아보라고 조언해 주셨다. + +멘토님과 함께 브레인스토밍을 진행하며 생각나는 주제를 던져보다가 제주도민인 팀원에게서 '**고사리**'라는 키워드가 나왔다. 제주도에 고사리가 널려 있다는 사실을 이번에 처음 알게 됐는데, 멘토님께서도 **현지인이 아니면 생각하기 어려운 키워드**라며 긍정적으로 평가해 주셨다. +결국 우리는 **고사리 채집 장소를 실시간으로 공유할 수 있는 '고사리 지도' 서비스**를 만들기로 결정했다. + +사실 '공유 경제'라는 키워드를 어떻게 녹일지 고민이었는데, 고사리 채집 후 직거래를 할 수 있는 '**직거래 장터**' 기능을 추가해 자연스럽게 키워드를 녹여냈다. +**새벽 1시**까지 고사리 지도에 대한 기획을 구체화한 후, 개발자들은 다음 날을 위해 휴식을 취하러 숙소로 이동했고 기획자와 디자이너는 남아서 작업을 진행했다. + +숙소가 **캐리어 보관소**라는 후기를 많이 봐서 걱정했는데 3일 차를 위해 푹 잘 수 있어서 다행이었다. + +## 3일 차: 본격적인 개발 시작 + +우리 팀은 오전 9시 30분에 모이기로 했다. 조금 일찍 일어나서 간단하게 아침(소금빵)을 먹고 내려가 보니 이미 나와계신 분들도 계셨다. 노트북을 켜고 피그마를 확인했는데 디자인 시안이 꽤 많이 나와 있어서 놀랐다. + +추가된 기획을 확인하고 궁금한 점을 물어보며 **의견을 조율한 다음, 작업을 시작**했다. 새벽까지 열심히 작업해 주신 덕분에 빠르게 할 일을 나누고 개발을 시작할 수 있었다. + +![온보딩 페이지](/images/9oormthon-13th/onboarding.gif) + +내가 맡은 첫 번째 작업은 **온보딩 페이지**였다. 해커톤을 준비하며 `@use-funnel` 라이브러리를 연습한 덕분에 수월하게 구현할 수 있었다. +**애니메이션**이 있으면 좋을 것 같다는 피드백에 간단한 효과를 추가해 완성도를 높였다. + +![커뮤니티 페이지](/images/9oormthon-13th/community.gif) + +다음으로는 **커뮤니티 페이지**를 작업했다. 짧은 기간 안에 모든 기능을 구현할 수는 없어서, 이 부분은 서비스에 어떤 기능이 있는지 보여주기 위한 퍼블리싱 작업만 진행하기로 했다. +원래는 페이지가 이동해야 하는 콘텐츠인데 퍼블리싱만 되어있으면 **클릭해도 반응이 없어 버그처럼 느껴질 수 있어서** 클릭했을 때 **토스트 메시지를 띄우자고 제안**했다. 다들 좋다고 해주셔서 바로 해당 기능을 추가했다. +온보딩 페이지 문구가 제주 사투리로 되어있어 토스트 문구도 제주 사투리로 '**🌿 준비하고 있으난 좀만 기다립서양~**' 이라고 띄워 일관성을 유지했다. + +이어서 **채집왕 페이지**와 **위치제보 상세 페이지**까지 퍼블리싱 작업을 완료하고, 메인 페이지의 더미 데이터를 실제 데이터베이스 데이터로 교체하는 **API 연동 작업**까지 진행했다. +그 외 자잘한 디자인 수정이나 문구, 이미지 수정 등을 통해 완성도를 높여갔다. + +### 배포는 어려워 + +가산점을 받기 위해 **크램폴린 배포**에 도전했는데, 여기서 많은 시행착오가 있었다. 프론트 배포 실패를 해결하기 위해 node 버전을 낮추기도 하고 (이때 `.nvmrc` 파일 덕분에 쉽게 바꿀 수 있었다) 도커 파일도 수정하고 그 외 알 수 없는 오류가 많아 백엔드 팀원이 고생을 많이 했다. + +열심히 시도한 끝에 우리 팀은 배포에 성공했다! 크램폴린 배포에 성공한 팀이 2팀밖에 되지 않는 걸로 알고 있는데 그중 하나가 우리 팀이라서 뿌듯했다. + +### 밥 잘 챙겨주는 구름톤 + +![고등어 진짜 맛있음](/images/9oormthon-13th/lunch.avif) + +아침에 해커톤 장소로 이동할 때를 제외하면 점심식사 하러 이동할 때가 유일하게 햇빛을 볼 수 있는 시간이었다. (ㅎㅎ) 식사 후 간단하게 산책도 하며 잠시 쉬는 시간을 가졌다. +근처에 있는 바다를 보러 가야 했는데, 못 보고 온 게 너무 아쉽다. + +![반반 무 많이](/images/9oormthon-13th/chicken.avif) + +원래 저녁이 제공되지 않는 걸로 되어있는데 저녁 6시쯤 치킨을 시켜주셨다. (후기를 찾아보면 항상 치킨을 주시는 것 같다) 잠깐 작업을 멈추고 치킨과 콜라 감자튀김과 함께 팀원들과 이야기를 나눴다. + +식사를 든든하게 잘 챙겨주셔서 좋았다. 간식과 물, 에너지 드링크도 무한 제공된다... + +## 4일 차: 구름톤 마무리 + +밤을 새웠다. **오전 8시 40분부터 9시까지 20분**간 짧게 잔 게 전부였다. +해가 뜰 시간이 됐을 때 팀원들과 일출을 보러 나갔는데 날이 흐려서 잘 보이지 않았다. 그래도 한 바퀴 산책하며 휴식도 취하고 (낭만도 있고) 좋았다. + +프로젝트를 완성하고 오전 11시까지 최종 자료를 제출해야 했다. **개발 동기, 서비스 설명, 기대 효과, 서비스 URL** 등 양식에 맞춰 폼을 전송하고 발표만 남겨뒀다. +우리는 발표 자료에 서비스 URL이 담긴 QR 코드를 추가했다. 더 완성도 있는 모습을 보여줄 수 있도록 제출 이후에도 필요한 부분이 있다면 수정해 가며 디테일을 더했다. + +![](/images/9oormthon-13th/presentation.avif) + +발표는 기획자 팀원이 맡아서 진행했다. 제주도 현지인이라 당사자성을 바탕으로 발표를 이끌어갈 수 있었다. 심사위원분들이 QR코드로 서비스를 직접 사용해 보시고 긍정적인 피드백을 주셔서 뿌듯했다. + +다만 "고사리 스팟은 며느리도 안 알려준다는데 과연 사람들이 고사리 스팟을 제보할지, 사용자가 늘기를 바랄지" 우려하는 피드백도 있었다. +고사리 스팟을 제보 시 리워드를 주는 방식도 고려해 봤고, 고사리를 채집하는 유저 뿐만 아니라 장터에서 저렴하게 구매하고 싶은 유저들도 타깃이라는 점을 발표에서 충분히 어필하지 못한 게 아쉽다. 그래도 나머지 질문에는 잘 답변했고 전반적인 반응도 좋아서 후회 없이 발표를 마칠 수 있었다. + +![](/images/9oormthon-13th/certificate.avif) + +아쉽게도 수상을 하지는 못했지만, 많은 것을 얻어갈 수 있는 시간이었다. **좋은 팀원들과 재미있게 프로젝트를 진행**했다는 것만으로도 목표를 이룬 셈이라 후회는 없다. (그만큼 정말 열심히 했다!) + +고사리라는 재미있는 주제를 선정한 덕분에 프로젝트 내내 웃으며 작업할 수 있었고, 팀 분위기도 정말 좋았다. 현지인 팀원에게 제주 사투리도 배우며 즐거운 시간을 보냈다. +물론 밤을 새워야 해서 힘든 순간도 있었지만 재미있게 진행했기 때문인지 생각보다 힘들게 느껴지지 않았다. + +## 구름톤을 돌아보며 + +사실 시작 전에는 기대보다 걱정이 더 컸다. 내가 1인분을 잘할 수 있을지, 밤은 샐 수 있을지, E가 아니면 살아남을 수 없다던데 네트워킹을 잘할 수 있을지, 즐길 수 있을지 등 여러 고민이 있었다. +하지만 구름톤을 마치고 나니 **1인분을 충분히 해낼 수 있다는 자신감**도 얻었고 충분히 즐기다 온 것 같아서 괜한 걱정이었다는 생각이 든다. + +가장 걱정했던 건 밤샘이었다. 체력 관리가 중요하다고 생각해 약국에서 **글루콤(비타민)과 아르기닌**을 사왔는데 덕분에 수월하게 밤을 새울 수 있었다. +참고로 화, 수, 목 아침에 글루콤을 마시고 목요일 저녁 식사 이후 아르기닌을 먹었더니 밤을 새우고도 체력적으로 무리가 없었다. (내돈내산) + +나와 함께 호흡을 맞춘 프론트엔드 팀원은 3년 차 현업 개발자인데, 옆에서 칭찬도 해주고 도움이 필요할 때 바로바로 해결해 줘서 든든했다. 그동안 현업 개발자와 협업할 기회가 없었는데 이번에 함께하면서 처음 사용해 보는 기술도 접하고 현업에서 많이 사용하는 꿀팁도 얻을 수 있었다. + +꽤 많은 분량의 작업을 해야 했지만 시간 안에 완성할 수 있어서 다행이었다. 기획 단계에서 분량을 줄이자고 할 수도 있었지만, 한계에 도전해 본 덕분에 짧은 시간에 생각했던 것보다 더 성장할 수 있었다. + +다른 해커톤에 참여하게 되면 '**구현 속도가 빨라요**', '**밤샘 자신 있어요**'라는 문구를 자신 있게 자기소개에 넣을 수 있을 것 같다. + +## 약간의 팁 + +- **보일러 플레이트**를 준비해 가면 확실히 큰 도움이 된다. +- 카카오 지도 API, `@use-funnel` 등 **구름톤에서 자주 쓰이는 기술**을 미리 연습해 가면 좋다. +- 2일차부터는 제공하는 맨투맨(또는 티셔츠)을 입어야 하기 때문에 나머지 기간에 입을 옷만 챙기면 된다. +- 글루콤(비타민)과 아르기닌은 밤샘에 매우 도움이 된다. +- 밤을 새우면 정신이 없을 수 있으니 짐을 미리미리 챙기자... (충전기를 숙소에 두고 왔다...) + +## 맺으면서 + +열정이 넘치는 참가자들과 함께 밤을 새워가며 작업하는 새로운 경험을 할 수 있었던 시간이었다. 서로 응원하고 자극을 주고받으며 짧은 시간 동안 하나의 서비스를 완성해 낸 순간을 잊지 못할 것 같다. +특히 연차를 4개나 쓰고 오신 현업자 분들 정말 대단하다고 생각한다. + +돌이켜보니 목표했던 걸 모두 이루고 와서 너무나도 만족스러운 3박(?) 4일간의 일정이었다. 구름톤 지원을 고민하고 있다면 **적극 추천**한다! 밤을 새우고 와서 피곤해 생활패턴이 무너질까봐 걱정했는데 오히려 생활 패턴이 안정화되어 제대로 리프레시한 느낌이다. (제주도라는 새로운 환경도 한몫한 것 같다) + +좋은 기회를 주신 구름과 카카오에게 감사 인사를 전하며 후기를 마친다. diff --git a/src/content/post/blog/9oormthon-13th-preparation.mdx b/src/content/post/blog/9oormthon-13th-preparation.mdx new file mode 100644 index 0000000..fed1905 --- /dev/null +++ b/src/content/post/blog/9oormthon-13th-preparation.mdx @@ -0,0 +1,104 @@ +--- +title: '구름톤(9oormthon) 13기: 지원부터 준비까지' +date: 2025-02-25 +updatedDate: 2025-02-25 +tags: [구름톤, 해커톤, 구름톤 후기, 구름톤 13기] +image: '/images/9oormthon-13th/9oormthon-13th.avif' +--- + +![9oormthon-13th](/images/9oormthon-13th/9oormthon-13th.avif) + +> 구름톤은 마음껏 몰입하고 스스로 성장하는 IT 인재로 거듭나고 싶은 분들을 위해 카카오와 구름이 함께합니다. + +카카오와 구름이 주최하는 3박 4일간의 해커톤, **구름톤 13기**에 **프론트엔드 개발자**로 참여했다. +이번 글에는 지원서 작성부터 제주로 떠나기 전 프론트엔드 개발자로서 어떤 준비를 했는지를 담아보려고 한다. + +## 구름톤이란 + +구름톤(9oormthon)은 개발자, 디자이너, 기획자가 모여 **짧은 시간 동안 아이디어를 구체화**하고 실제 **프로토타입**을 만들어내는 해커톤이다. +다양한 직군의 참가자들과 **네트워킹**을 진행할 수 있으며, GDS(Goorm Design System) 강의와 현직자 특강 등 **다양한 프로그램**도 준비되어 있다. + +## 리프레시가 필요해 + +7개월간 부트캠프에서 5개의 프로젝트를 연달아 진행하며 **번아웃**이 찾아왔다. 부트캠프 수료 후에도 같은 프로젝트들만 리팩토링하다 보니 **새로운 자극**이 필요했다. 마침 제주도에서 열리는 구름톤 13기 모집 소식을 듣고 **새로운 환경, 사람들**과 함께하면 동기부여를 되찾을 수 있겠다 싶어 지원했다. + +그동안 중장기 프로젝트만 해봤기에 **단기간 집중해서 결과물을 만드는 경험**도 해보고 싶었다. 무엇보다 기획자까지 포함된 **다양한 직군과의 협업**이 기대됐다. 부트캠프에서 디자이너, 백엔드와 협업해 본 적은 있지만, 모든 직군이 각자의 역할에 집중할 수 있는 현업과 유사한 환경을 경험해 보고 싶었다. + +## 지원서를 작성해 보자 + +구름톤은 **오직 지원서 한 장으로 참가자를 선발**하는 만큼 지원서 작성이 무엇보다 중요하다. +지난 11기 모집 때도 지원했지만, 부트캠프 진행 중 급하게 작성해서 불합격한 기억이 있어 이번에는 구름톤 후기를 검색해 합격자들의 지원서를 살펴봤다. (내가 남긴 기록도 누군가에게 도움이 되길!) + +이번 13기 모집에는 **디자인 시스템 관련 두 개의 선택 문항이 추가**되었다. 다른 문항과 달리 글자 수 제한이 없었지만, 가독성을 위해 250~300자 정도로 작성했다. + +### 디자인 시스템 관련 문항(선택) + +- 시중에 나와 있는 디자인 시스템(Material Design, Radix UI, Chakra UI)을 사용해 본 적이 있나요? 있다면 어떤 디자인 시스템을 사용했고, 어떻게 활용했는지 구체적으로 설명해 주세요. + - **구체적인 활용 사례**를 중심으로 작성했다. + - Radix UI 기반의 `shadcn/ui`를 활용해 접근성을 고려한 네비게이션을 구현해 본 경험을 작성했다. +- 다른 디자이너나 개발자와 협업하여 디자인시스템 라이브러리를 배포하거나 개선한 경험이 있나요? 있다면 구체적인 작업 내용을 설명해 주세요. + - 디자인 시스템 라이브러리를 배포한 경험은 없어서 **프로젝트 내에서 재사용 가능한 디자인 시스템을 구축해 본 경험**을 작성했다. + +### 기본 문항 + +- 구름톤 참여 동기를 작성해 주세요.(공란 포함 최대 300자) + - **짧은 기간 동안 몰입해 결과물**을 만들어보고 싶다고 작성했고 지원한 이유를 진솔하게 담으려고 노력했다. +- 지원자께서 생각하시는 최근 제주도가 직면한 사회 문제는 무엇이라고 생각하나요? (공란 포함 최대 300자) + - 제주도의 인구 감소 문제를 **구체적인 통계와 수치**를 활용해 작성했다. +- 구름톤에서 2번의 사회문제를 해결하기 위해 어떤 서비스를 만들고 싶은지 설명해 주세요.(공란 포함 최대 500자) + - 제주 정착 도우미 서비스를 제안했다. + - 사용자 정보를 입력받아 최적의 정착 지역과 관련 정보를 추천해 주는 **기능을 어떤 식으로 구현할지 구체적**으로 작성했다. +- 구름톤에서는 '팀원과의 협업'을 중요하게 생각합니다. 유연한 협업을 이끌어 나가기 위해 가지고 있는 나만의 장점을 설명해 주세요.(공란 포함 최대 300자) + - '팀원들과 싸우지 않을만한 사람이라는 것을 어필'하는 게 중요하다는 후기를 참고해 **팀 분위기에 유연하게 녹아들 수 있다**는 점을 어필했다. +- 구름톤을 통해 어떤 부분의 '성장'을 기대하고 있는지, 있다면 작성해 주세요.(공란 포함 최대 300자) + - 현직자분들도 많이 참여하신다고 해서 멘토님과 현직자분들의 조언을 통해 **실제 개발 프로세스와 노하우**를 배우며 성장하고 싶다고 작성했다. +- 진행하신 프로젝트 중 한 가지를 선택하여 설명해 주세요.(최대 500자) + - 이번에 디자인 시스템 관련 문항이 생긴 만큼 **디자인 시스템을 구축한 프로젝트**를 선택해 작성했다. 프론트엔드 리더를 맡아 디자이너, 백엔드와의 **원활한 소통을 이끈 점**도 강조했다. + +## 합격 발표 + +![선발 발표 이메일](/images/9oormthon-13th/acceptance-mail.avif) + +오전 10시쯤 선발 발표 안내 메일이 왔다. 경쟁률이 높지만 열심히 작성한 만큼 합격할 수도 있겠다고 생각했는데 막상 합격 통보를 받으니 실감이 나지 않았다. **일주일 후 구름톤이 시작**하기 때문에 준비할 시간도 많지 않았다. 발표 당일은 **설렘 반 걱정 반**으로 각종 예약 및 계획만 세운 다음, 계속 후기만 찾아보며 시간을 보냈다. + +![구름톤 일정표](/images/9oormthon-13th/timetable.avif) + +참가자 등록 후 슬랙과 노션에 초대받아 공지사항과 일정 등을 살펴볼 수 있었다. 다행히 부트캠프에서 함께 프로젝트를 진행했던 **팀원도 같이 합격**해서 숙소와 항공편을 함께 알아보며 준비했다. + +## 해커톤은 처음이라 + +해커톤 참여가 처음이라 여러 정보를 찾아보다가 빠른 구현을 위해 **보일러 플레이트를 준비**하기로 결정했다. + +NextJS의 파일 기반 라우팅, 서버 컴포넌트 등 다양한 기능을 활용하면 **짧은 해커톤 기간 동안 빠르게 구현**할 수 있을 것 같아 NextJS를 선택했다. 구름톤 전시관의 프로젝트들을 열 개 정도 살펴보니 React 팀은 Emotion, TailwindCSS, Styled-Component 등 다양한 CSS 라이브러리를 사용한 반면, NextJS 팀은 모두 TailwindCSS만 사용하고 있었다. 이처럼 기술 스택의 변수가 적다는 점도 고려해 **NextJS와 TailwindCSS 기반의 보일러 플레이트**를 만들기로 결정했다. + +NextJS14, React18, TypeScript, TailwindCSS(v3.4.1), Tanstack Query, Axios로 초기 세팅을 마쳤고, `Lefthook`까지 추가했다. +자주 사용되는 **Pretendard 폰트도 미리 적용**해뒀으며, 모바일 기준으로 작업할 것을 고려해 **기본 Layout 스타일**까지 설정해 놓았다. + +디자인 시스템으로는 `shadcn/ui`를 사용하고 싶었지만, 지원서 문항에 디자인 시스템 관련 질문이 추가된 걸 보아 **GDS를 사용할 수도 있겠다**는 생각이 들어 `shadcn/ui` 설정은 별도 브랜치로 준비해 뒀다. + +준비한 보일러 플레이트 코드는 [깃허브](https://github.com/devdeun/nextjs-boilerplate)에서 확인할 수 있다. + +--- + +프로젝트들을 살펴보니 **히스토리별 상태 관리가 필요한 서비스**가 많았다. 미리 `@use-funnel` 라이브러리를 연습해 두면 빠른 구현에 도움이 될 것 같아 만들어둔 보일러 플레이트를 기반으로 단계별 응답 기능을 테스트해 봤다. + +`Tanstack Query`와 `Axios`로 간단한 API 통신 테스트도 진행해 설정에 문제가 있으면 조금씩 수정하는 방식으로 보일러 플레이트를 보완했다. + +## PR을 준비해 보자 + +![자기소개 일부](/images/9oormthon-13th/self-pr.avif) + +첫날 자기소개 시간을 위해 노션에 미리 self-PR 페이지를 작성하는 게 숙제였다. PR을 잘해야 좋은 팀원을 만날 수 있기 때문에 전략적으로 작성해야한다. +나는 아직 취준생이라 부트캠프에서 진행한 **프로젝트 성과와 우수 수강생**으로 수료한 점, **다양한 프로젝트**를 진행해 본 경험 위주로 자기소개를 준비했다. NextJS 기반 보일러 플레이트를 준비한 만큼 **선호하는 기술 스택**도 작성해 뒀다. + +선호하는 기술 스택을 작성해 둔 게 나중에 팀원을 구하는 데 큰 도움이 됐다. 디자이너님들은 캐릭터나 기존에 작업물 이미지를 올려주시는 등 PR 페이지에서 직군별 특색이 돋보였다. +지원한 직군의 경험 중 어필할 수 있을 만한 부분을 최대한 작성해 두면 좋을 것 같다. + +같이 합격한 팀원과는 여러 프로젝트를 함께 진행해 봐서 이번엔 **새로운 경험을 위해 흩어지기로** 했다. 대신 팀 빌딩 시간에 둘 다 팀원을 구하지 못하거나, NextJS를 사용할 팀원을 찾지 못하면 뭉치는 작전(?)을 세웠다. + +## 맺으면서 + +지금까지 구름톤 지원 과정부터 해커톤을 위한 준비 과정까지의 기록이었다. +구름톤을 위해 준비하는 과정만으로도 많은 걸 배울 수 있었다. 보일러 플레이트를 만들고 새로운 라이브러리를 공부하며 한 고민이 실제 해커톤에서 큰 도움이 되었다. + +[다음 글](/post/9oormthon-13th-experience)에서는 제주에서 펼쳐진 3박 4일간의 구름톤 현장 이야기를 다룰 예정이다! diff --git a/src/content/post/blog/cubeit-intranet-retrospect.mdx b/src/content/post/blog/cubeit-intranet-retrospect.mdx index f117601..e11aa13 100644 --- a/src/content/post/blog/cubeit-intranet-retrospect.mdx +++ b/src/content/post/blog/cubeit-intranet-retrospect.mdx @@ -73,7 +73,7 @@ SQLite3는 선택사항이었지만, 김민태 강사님께서 SQL 문을 사용 디자인이 나와야 개발을 시작할 수 있어서 레퍼런스를 활용해 주말에 빠르게 작업했다. 조장님(진짜 디자이너)이 레퍼런스도 구해주시고 피드백도 빠르게 주셔서 좀 더 수월하게 작업할 수 있었다. -![반응형으로 구현한 모습](/images/cubeit-intranet-retrospect/mediaquery.webp) +![반응형으로 구현한 모습](/images/cubeit-intranet-retrospect/mediaquery.avif) ## 역할 @@ -139,7 +139,7 @@ Cube.IT 인트라넷 서비스는 크게 **로그인, 홈, 프로필, 구성원, 이미지 파일을 업로드하면 **Cloudinary**를 이용해 **url로 변환**한 다음, **데이터베이스에 저장**한다. 그대로 데이터베이스에 저장할 수도 있었지만, 용량 최적화를 위해 Cloudinary 서비스를 이용했다. -![랜덤 프로필 이미지 생성](/images/cubeit-intranet-retrospect/random-profile-image.webp) +![랜덤 프로필 이미지 생성](/images/cubeit-intranet-retrospect/random-profile-image.avif) `기본 이미지 설정`을 클릭하면 [DiceBear](https://www.dicebear.com/) API의 Lorelei 스타일 **아바타를 랜덤으로 설정**해주는 이스터에그 같은 기능을 추가했다. 처음 만들었을 때 재미있어서 홀린 듯이 계속 눌러봤던 기억이 있다. 🤣