처음으로 참여한 해커톤 502 ai 포텐데이 x 네이버 Cloud의 회고록을 써보도록 한다.
참여한 이유
해커톤을 참여한 이유를 설명하기 전, 본인은 2024년 3월에 프론트엔드 개발자를 도전하기 위해 부트캠프에서 처음으로 코딩을 시작했다.
6개월 동안 부트캠프에서 React, Next.js 등의 기술들을 배우고 총 3번의 프로젝트를 통해서 개발 협업이라는 것을 처음으로 경험했다.
부트캠프 수료 후 운좋게 인턴으로 일할 기회를 얻어서 한 달이라는 짧은 기간 동안 사내 백오피스 서비스를 개발하는 프로젝트를 진행했다. 우리 팀이 개발한 서비스를 사내에서 실제로 이용하는 성과를 거뒀고, 그렇게 인턴 기간도 끝이 났다.
총 4번의 팀 프로젝트를 경험했지만 이력서를 쓰면서 막상 내가 구현한 성과를 보니 경쟁력이 없다고 느껴졌고, 좋은 개발 경험에 비해 스스로 경험했던 것들을 말 또는 글로써 풀어내기가 어려웠다.
부트캠프 시절 매 프로젝트가 정말 어려웠기때문에 깊이 있게 파고들 여유가 없었고, GPT와 동기들의 힘을 빌려 완성에 초점을 맞췄던 거 같다. 그래도 후회하지 않을 만큼 정말 열심히 했고, 사람마다 코딩에 대한 배경 지식이나 지능이 다 다르기 때문에 스스로의 상황과 실력을 인정하기로 하고, 부트캠프와 인턴 경험으로 배운 것들을 기반으로 더 좋은 협업 경험을 쌓아야겠다고 판단했다.
그래서 해커톤에 참여하게 됐다. 비사이드는 10만원의 참가 비용이 들었고 디자이너, 기획자, 백엔드 개발자 등 협업할 인원들을 매칭해 준다는 점에서 시간을 아낄 수 있다는 메리트를 느껴 신청하게 됐다.
이번 포텐데이 해커톤은 네이버 Cloud와 협력하여 진행하기때문에 네이버 CLOVA Studio, CLOVA OCR, CLOVA Chatbot 셋 중 하나 이상의 AI를 사용하여 1차 MVP를 구현해야 했다.
AI 사용 경험을 해보고 싶었기에 더 좋은 기회라고 생각했다.
프로젝트 소개
📍 프로젝트 깃허브 - https://github.com/potenday-06/front-end
📍 프로젝트 링크 - https://toristar.site/onboarding
우리 팀에서 구현한 서비스는 아이들을 대상으로 한 감정 공유 AI 채팅 서비스다.
아이가 일상생활을 하면서 있었던 일을 달나라에서 온 아이들의 친구 달토끼 '토리'에게 말하며 감정을 공유한다.
대화를 마치면 토리와 나눈 대화를 기반으로 대화 내용을 요약해준다. 또한 요약된 내용에서 핵심 감정 키워드를 추출하여 태그 형태로 보여주는 기능도 있다.
이렇게 총 3개의 AI 기능을 적용했고 세 가지 기능 모두 네이버의 CLOVA Studio를 사용하여 구현했다. 자세한 흐름은 아래에서 계속! 😊
팀 빌딩
개발 기간은 아래와 같았다. 우리 팀은 한 분을 제외하고 4명의 인원이 고도화 트랙에 신청하여 1차 MVP 제출 이후에 추가로 서비스를 발전시켰다.
- 1차 개발 완료 기간: 2. 21 ~ 3. 2(9일)
- 고도화 신청 팀 추가 개발 기간: 3. 3 ~ 3. 12(9일)
2. 21 부터 시작되는 일정이었지만, 며칠 전인 2. 17에 포텐데이 슬랙에 초대받았고, 이때부터 이틀간은 직접 팀 빌딩을 할 수 있었다. 슬랙 채널에 자기소개와 협업 경험, 사용하는 기술 스택 등을 어필하며 팀을 매칭하는 과정이다.
자기소개를 올리고 감사하게도 많은 분들이 먼저 연락을 주셨고, 팀 구성과 프로젝트 방향성에 대해 대화를 나누면서 핏에 맞는 팀을 찾아 합류하게 됐다.
최종적으로 우리 팀은 기획자, 디자이너, FE 개발, BE 개발, AI 개발 5명으로 성공적인 팀 빌딩이 됐다.
기획
첫 회의 시간을 정하고 각자 어떤 프로젝트를 하고 싶은지에 대해 아이디어를 생각해 한 명씩 발표하기로 했다.
아이디어가 정말 많이 나왔는데
- 미래의 나와 소통하는 서비스
- 감정 기록 및 스트레스 해소 서비스
- 꿈과 감정 분석 서비스
- 가족 간 소통 및 추억 저장 서비스
- 빵순이, 빵돌이들을 위한 빵지순례 플래너 웹 애플리케이션
- 부동산 청약 정보 요약 서비스
- 흑백 묘리사
- 외국인 노동자들 대상 / 관련 정책 검색 및 안내 서비스
- 미술관/전시관 도슨트 AI
등등 다들 아이디어 부자셔서 좋았다. 다들 N의 비율이 정말 높으신 건가?
투표를 통해 부동산 청약 서비스가 당첨됐고, 기획자 분께서 빠르게 프로토타입을 만들어서 회의 때 보여주셨다.
그런데 점점 서비스를 파고들어 보니, 생각보다 더 전문적인 지식이 필요했고, 청약 점수 계산 기능을 구현하기로 했는데, 개인마다 자산, 가점 등이 모두 다른데 이걸 판단하려면 청약 정보를 가져오는 인증 관련된 부분도 생각해야 됐고, 실 개발 기간 일주일정도의 짧은 시간이었기에 어렵겠다고 판단하여, 재투표를 하게 됐다.
재투표를 했는데 본인이 낸 아이디어인 빵지순례가 당첨됐다.
본인이 생각한 주요 기능은 유저의 현재 위치를 기반으로 빵 맛집 추천, 특정 동네 빵지순례 코스(여러 빵집을 돌아다니는 코스) 추천 등의 기능이었는데, 테스트로 네이버의 AI 서비스로 홍대입구역 등의 특정 위치 근처 빵집을 추천해 달라고 해보니 존재하지 않은 빵집을 추천해 주는 등의 이슈가 있었다.
결국 또다시 방향성을 틀어 어린이를 타겟팅한 채팅 기반의 감정 분석 및 요약 서비스를 구현하기로 했고 “토리별”이라는 서비스명으로 달에서 온 아이들의 친구 달토끼 “토리”라는 AI 페르소나를 구현하기로 했다.
기술 스택 선정
해커톤 특성상 빠른 기간 내에 기획, 개발, 디자인이 완성돼야하기 때문에 모든 작업은 병렬적으로 이뤄졌다.
기획자분께서 빠르게 와이어 프레임을 짜고, 디자이너 분은 기획과 와이어프레임을 기반으로 디자인을 작업하고, 나는 개발 전 할 수 있는 개발 환경 세팅을 진행했고, 디자인이 먼저 나온 페이지부터 빠르게 작업하기 시작했다.
본인은 Next.js(app router 15 ver), Typescript, Tailwind CSS를 개발 기술 스택으로 정했다.
처음에는 리액트를 사용할까 했지만, 리액트는 라우팅 설정을 직접 해야 했고, Next는 정적인 페이지, 유저와 인터렉션이 활발한 페이지 등 여러 케이스에 맞게 CSR, SSR, SSG 등의 렌더링 기법을 간편하게 사용할 수 있도록 제공하기 때문에 선택했다.
app router는 처음이고 기존에는 pages router만 사용해 봤다. 하지만 이미 app router 강의를 들었기 때문에 과감하게 선택할 수 있었다.
아키텍처, 유저 플로우
CLOVA Studio API 호출 시에는 우선 유저가 클라이언트에서 AI 기능에 대해 요청을 하면 api routes를 통해 Next.js의 서버에서 클라이언트의 요청을 받아 CLOVA Studio API로 호출을 하게 된다. 클라이언트에서 직접 호출을 하려면 CORS 설정을 따로 해줘야 하는데, Next의 장점을 이용하여 서버 to 서버 통신으로 CLOVA Studio API와 통신하도록 했다. 또한 AI 기능에 해당하는 전체 채팅 데이터, 대화 요약 데이터, 추출한 키워드 데이터는 백엔드 DB에 저장하여 저장 페이지에서 다시 볼 수 있다.
기능 구현, 트러블 슈팅
- 카카오, 네이버 간편 로그인
- Naver Clova Studio AI를 이용한 채팅, 채팅 내용 요약, 키워드 추출 기능 구현
- Next의 미들웨어를 이용한 리다이렉트 기능 구현
- 메타데이터, 오픈그래프 설정
- Next Image 컴포넌트에서 발생한 Layout Shift 현상 해결
등의 기능과 트러블 슈팅을 경험했고 처음으로 리액트의 서버 컴포넌트도 사용해 보면서 좋은 개발 경험을 했다.
서버 컴포넌트 활용은 2월에 원티드에서 진행한 프리온보딩이 마침 Next.js app router의 서버 사이드 렌더링과 서버 fetching에 관련된 내용들이었어서 문제가 생겼을 때, 왜 문제가 생겼는지에 대한 과정을 역순으로 차근차근 생각해 나갈 수 있었다.
또 주말에 하는 리액트 스터디에서 개발 동료와 무조건 서버 컴포넌트를 사용하고 서버 fetching을 하여 렌더링하는 것이 좋은 것인가에 대한 대화도 나눴다. 만약 수많은 사용자가 몰리는 페이지인데, 서버 사이드에서 데이터를 fetching 하고 렌더링까지 하게 된다면 Next의 서버가 그걸 감당할 수 있을까? 에 대한 이야기를 나누며 다시 한번 Next의 서버 사이드 기능에 대해 생각해볼 수 있던 계기가 됐다.
기능 구현에 대한 자세한 내용은 아래의 각 기능 구현에 대한 블로그 링크 참고❗️
Next.js 카카오, 네이버 간편 로그인 구현
간편 로그인처음으로 간편 로그인 기능을 구현하게 됐다. 구글, 카카오, 네이버 3개 중 2개를 사용하기로 했고, 팀원분들이 네이버와 함께 주최하는 해커톤인 점을 생각하여 네이버 로그인은 꼭
winjabonjooyui.tistory.com
Next.js AI 채팅, 대화 요약, 키워드 추출 기능 구현
AI 채팅 flowrole: ‘system’ 에는 content에 프롬프트를 작성해 “토리”라는 페르소나 역할을 부여하고, role: ‘user’ 에는 content: input 으로 유저가 작성한 채팅 내용을 전달받아 API에 요청한다. 리스
winjabonjooyui.tistory.com
Next.js react-virtuoso로 채팅 리스트 가상화(Windowing)
List Windowing에 대해서 알아보자. Windowing이란 ? Windowing(Virtualization)은 길이가 긴 리스트 목록이 있을때, 뷰포트 내에 보이는 리스트만 렌더링하고, 뷰포트 영역을 벗어난 부분은 렌더링하지 않는
winjabonjooyui.tistory.com
Next 미들웨어를 사용해 접근 가능한 URL 설정
미들웨어를 사용해 접근 가능한 URL 설정 Next에서는 미들웨어를 지원한다. 미들웨어란 특정 요청을 보내기 전에 실행할 동작을 하게 해주는 역할을 한다. src 폴더를 사용한다면 src/middleware.ts를
winjabonjooyui.tistory.com
Next.js app router Metadata, OpenGraph 설정
메타데이터, 오픈그래프 설정app router에서는 정적 메타데이터 설정을 최상위 layout.tsx 에서 할 수 있다.Metadata 타입을 import 하고 메타데이터 변수 metadata를 생성하고 아래와 같이 설정했다. 오픈
winjabonjooyui.tistory.com
Next.js app router 로컬 폰트
로컬 폰트Next.js의 폰트에 대해 공식 문서에는 아래와 같이 설명하고 있다.https://nextjs.org/docs/pages/building-your-application/optimizing/fonts next/font는 자동으로 폰트(사용자 정의 폰트 포함)를 최적화하고,
winjabonjooyui.tistory.com
Next Image 컴포넌트의 Layout Shift 현상
Next Image의 Layout Shift 현상Next에서는 HTML의 태그 대신, 기본적으로 제공하는 이미지 컴포넌트 를 사용하는 것을 권장한다. Next에서 이미지 최적화를 알아서 처리해주고 다양한 속성을 제공한다.
winjabonjooyui.tistory.com
app router를 처음 써봤기에 Next에서 제공하는 많은 기능을 다루기에 역시 러닝 커브가 있었고, Pages router와는 또 다른 점이 많아서 시행착오도 많이 겪었다.
그럼에도 불구하고 app router를 선택한 건 잘했다고 생각한다. 써보면서 왜 점점 Next가 프론트엔드 시장을 지배해가고 있는지 느낄 수 있는 좋은 개발 경험이었다.
Clova Studio를 쓰며 느낀 점
서비스에서 3가지의 네이버 AI 기능을 사용했는데, 이외에도 정말 다양한 AI 기능이 존재했다. 이미지 속 문자 탐지, 음성을 인식하여 텍스트로 변환 등 정말 다양한 서비스를 구현할 수 있겠다는 생각이 들었다.
아쉬웠던 점은 공식문서에 JS 기반의 요청 예시가 없다는 게 조금 아쉬웠다. 요즘은 리액트나 Next.js로 구현한 웹 서비스에서도 AI 기능을 정말 많이 사용하는 거 같은데, JS 기반 예시가 있다면 더 좋겠다는 생각이 들었다.
마무리
고도화 트랙까지 마무리되고 최종 산출물을 제출한다. 총 16개 팀이 고도화에 참여했고 내부 선발 과정을 거쳐 5위까지의 팀은 최종 결선에 진출하게 된다.
최종 5위 안에는 들지 못했지만 아이디어 기획부터, AI 기능 구현, 백엔드 개발자분과 적극적으로 소통하고 다양한 기획, 디자이너 등 다양한 직군과 팀 협업을 하며 배운 점이 많았고 개발자로서 조금은 더 성장할 수 있었던 좋은 경험이었다. 다음에도 이런 좋은 기회가 있다면 꼭 참여하고 싶다 😁
짧은 기간 동안 함께 열심히 스프린트한 “이게 되네?” 팀원분들에게 정말 수고하셨고 감사하다는 말씀 전하고 싶다! 👍🏻