🖋️ 구름톤 13기 후기 포스팅

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기 모집 때도 지원했지만, 부트캠프 진행 중 급하게 작성해서 불합격한 기억이 있어 이번에는 구름톤 후기를 검색해 합격자들의 지원서를 살펴봤다. <span class="text-gray-500">(내가 남긴 기록도 누군가에게 도움이 되길!)</span>
+
+이번 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일간의 구름톤 현장 이야기를 다룰 예정이다!

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 스타일 **아바타를 랜덤으로 설정**해주는 이스터에그 같은 기능을 추가했다.
 처음 만들었을 때 재미있어서 홀린 듯이 계속 눌러봤던 기억이 있다. 🤣