소개
시도하고자 했던 것과 그 이유
평소에 코드를 짜는 일을 하고 있지만, 이번 스터디에서만큼은 직접 개발하기보다 'AI를 얼마나 잘 써먹을 수 있을까?'에 집중해보고 싶었습니다. 그래서 IDE(개발 도구) 대신 기획서(PRD)를 작성하는 마음으로 프로젝트에 임했습니다.
지난 1차 과제로 만든 '90년대 감성 주크박스' 사이트가 있는데, DB 없는 정적 사이트(Static Site)다 보니 화면이 늘 똑같아서 심심하더라고요.
그래서 이번 고도화 기간에는 Antigravity(AI 에이전트)에게만 작업을 맡겨서, 죽어있는 사이트에 다음 기능들을 추가해보기로 했습니다.
추천 로직: 매번 다른 노래 보여주기 (랜덤/계절)
기능 확장: 검색 및 운세 뽑기 (편의/재미 요소)
데이터 연동: DB 없이 '좋아요' 숫자 실시간 공유하기
진행 방법
어떤 도구를 사용 했고, 어떻게 활용하셨나요?
도구: Antigravity, Next.js, Vercel
방식: 저는 요구사항(Prompt)만 명확히 던지고, 실제 코딩은 AI가 전담했습니다.
1. [랜덤 추천] 계절감 입히기 & 데이터 연결
랜덤 기능은 로직 자체보다 데이터 간의 '맥락'을 잡는 게 중요한데, 이걸 일일이 설정하기가 번거로워서 AI에게 맡겨봤습니다.
[사용 프롬프트]
메인 화면 진입 시 5곡을 추천하되, 단순 랜덤이 아님.
현재 날짜(Date)를 확인해 '겨울', '눈' 태그가 있는 곡을 1순위로 배치하고,
나머지 빈자리를 랜덤으로 채우는 알고리즘을 구현해줘.
특히 좋았던 건 '추천 꼬리 물기'였습니다. 노래 데이터가 쌓이다 보니 서로 어울리는 곡끼리 연결해주는 게 일이었는데, AI에게 "분위기 비슷한 곡끼리 자연스럽게 연결해줘"라고 하니 15곡의 관계를 알아서 정리해주더군요. 덕분에 단순 반복 작업에서 해방될 수 있었습니다.
2. [검색] 아날로그 디자인 유지하며 검색 기능 추가하기
기능을 붙이다 보면 디자인이 깨지기 쉬운데, 기존의 '종이 질감' 컨셉을 유지해달라고 강조했습니다.
[사용 프롬프트]
기존의 '종이 질감' UI 컴포넌트를 재사용하여 검색바(Search Bar)를 구현해.
Client-side Filtering 방식을 사용하여, 별도 API 호출 없이 즉시 결과가 필터링되도록 최적화해줘.
3. [운세] 돌발 아이디어 적용
기획자 민지님 추천으로 "재미 삼아 제비뽑기 기능도 있으면 좋겠다"는 아이디어가 좋아서 추가를 요청했습니다. 화면이 복잡해지는 건 싫어서, 노래 리스트 사이에 자연스럽게 끼워 넣는 방식을 택했습니다.
[사용 프롬프트]
> "클라이언트의 요청으로 '운세 뽑기' 기능을 추가하되, 기존의 '자동 추천' 기능과 충돌하지 않게 사용자 선택형으로 만들고 싶어." -> "카드 리스트의 빈 공간(6번째 칸)에 자연스럽게 녹아들게 수정."
한국어 웹사이트의 스크린샷
4. [하트] 개발자도 귀찮은 DB 구축, 3분 만에 끝내기 (핵심!)
사실 정적 사이트에서 '실시간 좋아요'를 구현하려면 서버도 띄워야 하고 DB도 붙여야 해서 일이 커지기 마련입니다. (솔직히 개발자 입장에서도 개인 프로젝트에 DB 붙이는 건 좀 귀찮거든요.)
그래서 Vercel KV (Serverless Redis)를 활용했습니다. 복잡한 세팅 없이 환경변수만 연결해주면 되니까요. AI에게 연동 코드를 짜달라고 했더니, 순식간에 실시간 동기화 기능을 만들어냈습니다.
[사용 프롬프트]
Vercel KV(Upstash) 환경변수 연결 완료.
'app/api/likes/route.ts'를 생 성하여 Redis의 INCR 명령어를 사용하는 API를 작성해.
프론트엔드에서는 버튼 누르자마자 숫자가 올라가게(Optimistic UI) 처리해줘.
웹 브라우저의 doxygen 편집기 스크린샷
결과와 배운 점
배운 점과 나만의 꿀팁
AI에게 '권한'을 주니 더 잘하더라: "구현 방식은 네가 가장 효율적인 걸로 선택해, 나는 결과물만 확인할게"라고 맡겼더니 결과가 훨씬 깔끔하게 나왔습니다.
인프라 구축의 허들이 낮아짐: 평소 같으면 DB 설치하고 연결하느라 반나절은 썼을 텐데, Vercel KV와 AI 조합으로 10분 컷 했습니다. 간단한 프로젝트 하실 분들은 꼭 써보세요.
과정 중에 겪은 시행착오
충돌 문제: 검색 기능과 운세 기능이 서로 겹쳐서 화면이 깨지는 버그가 있었습니다. 제가 직접 코드를 뜯어볼까 하다가, 참고 AI에게 "두 컴포넌트 간 간섭이 있는 것 같으니 확인해봐"라고 시켰더니 알아서
z-index를 수정해서 해결했습니다.하트 카운트: 처음엔 로컬 스토리지에만 저장했다가, 기왕 하는 거 남들이 누른 것도 보고 싶어서 Vercel KV로 전환했습니다. 덕분에 '서버리스'의 맛을 제대로 봤네요.
앞으로의 계획
기능은 얼추 갖춰졌으니, 이제 유지보수 쪽을 자동화해보고 싶습니다.
Wiki 기능: 사용자가 직접 곡 설명을 수정할 수 있게 만들기.
링크 자동 복구: 옛날 노래라 유튜브 영상이 잘리면, AI가 알아서 다른 영상 찾아 끼워 넣게 만들기.
도움 받은 글 (옵션)
Next.js & Vercel 공식 문서
