소개
화려한 썸네일 대신 투박한 1990년대 갱지감성에 Next.js 아키텍처를 기반으로 한 구현 방식을 결합해 이미지 한 장 없이 오직 텍스트만으로 그 시절의 낭만을 복원해보고 싶었습니다.
복잡한 데이터베이스나 알고리즘 없이 마크다운(Markdown) 파일만으로 가볍게 작동하는 퇴근길 아재들을 위한 ‘가장 담백한 주크박스’를 만드는 것이 이번 프로젝트의 목표였습니다.
기술적 목표(컨셉)
본캐는 개발자이지만 이번 프로젝트에서는 철저히 기획자(PM) 모드로 접근하여 Antigravity로 'AI 개발자'를 리딩하는 방식으로 진행했습니다. "코딩은 AI가 하고 나는 설계만 한다"는 원칙하에 완벽한 PRD(제품 요구 정의서)만 있다면 코드 한 줄 직접 짜지 않고도 원하는 결과물을 검증해낼 수 있는지 확인해보고 싶었습니다.
진행 방법
1. 시행착오: 모호한 지시는 모호한 결과를 낳는다
솔직히 1차 결과물이 마음에 들지 않았는데 디자인 탓이 아니라 전적으로 저의 기획 부실 때문이었습니다. 제가 원하는 '아재 감성'이나 '종이 질감'을 구체적인 설계 용어로 정의하지 않고 모호하게 전달하니 Gemini는 학습 데이터에 있는 '가장 보편적이고 세련된' 요즘 스타일의 사이트를 만들어주었습니다.
"AI에게 일을 시킬 땐, 기획자가 머릿속에 있는 그림을 텍스트로 완벽하게 현상해서 주어야 한다"는 것을 깨달았습니다. 결국 프롬프트가 통하지 않은 건 AI의 지능 문제가 아니라 저의 언어 능력과 기획력의 문제였습니다.
2. 인터뷰 전략: "만들어 줘"가 아니라 "질문해 줘"
이 문제를 해결하기 위해 1주차 교육(일잘러 장피엠)에서 배운 방법을 적용했습니다. 보통은 "이런 사이트를 만들어 달라"고 바로 명령하지만, 저는 반대로 AI가 저를 인터뷰하게 만들었습니다.
"자! 최적화된 페이지를 만들기 위해 어떤 내용이 필요한지 네가 나한테 질문해 봐."이 프롬프트 한 줄이 판을 뒤집었습니다. 제가 미처 생각지 못했던 디테일한 부분들을 Gemini가 짚어서 물어보기 시작했습니다. 디자인 테마, 내비게이션 방식, 데이터 처리 등 5가지 핵심 질문에 답을 하다 보니 안개처럼 떠다니던 기획이 '모바일 중심의, 썸네일 없는, 갱지 스타일의 텍스트 큐레이션 앱'이라는 구체적인 형태로 굳어졌습니다.
개떡같이 말해도 찰떡같이 알아듣는 AI는 없습니다. 대신 "네가 찰떡을 만들기 위해 무엇이 필요한지 물어봐"라고 판을 깔아주니 AI가 스스로 기획의 구멍을 메워주며 완벽한 PRD를 위한 초석을 다져줍니다.
3. 핵심 전략: 개발자에게 건넬 '작업 지시서' 생성
인터뷰를 통해 기획이 단단해졌으니 이제 구현만 남은 상황이었습니다. 하지만 저는 이번 프로젝트에서 철저히 기획자(PM) 포지션이었기에 직접 코드를 작성할 생각은 없었습니다. 그래서 Gemini에게 이렇게 요청했습니다.
지금까지 정리된 내용을 바탕으로, Antigravity가 바로 실행할 수 있는 '최종 실행용 프롬프트'를 작성해 줘.저는 Gemini를 통해 '완벽한 작업 지시서(프롬프트)'를 뽑아내고, 이것을 토시 하나 바꾸지 않고 그대로 Antigravity에게 전달하기만 하면 끝나는 그림을 그렸습니다.
개발자(Antigravity)가 엉뚱한 결과물을 내놓지 못하도록 파일 구조부터 라이브러리, 디자인 디테일, 배포 방식까지 모든 기술 명세를 '프롬프트 한 장'에 담는 것이 이 사례의 핵심이었습니다. 결과적으로 저는 코딩을 한 것이 아니라 '코딩을 시키는 가장 완벽한 말'을 설계만 했습니다. 그렇게 나온 결과물 입니다.
나는 Next.js 14(App Router)와 Tailwind CSS를 사용해 [아재의 주크박스] 프로젝트를 진행 중이야.
현재 환경은 Antigravity 이고 나는 이미 프로젝트 루트에 'content/' 폴더를 만들고 5개의 .md 파일을 생성해뒀어.
또한 'gray-matter', 'react-markdown', 'react-youtube', '@tailwindcss/typography' 패키지 설치도 완료된 상태야.
[1. 핵심 지시 사항: Real Data Only]
- 더미(Mock) 데이터를 절대 만들지 마.
- 내가 이미 생성해 둔 'content/' 폴더 안의 .md 파일들을 'fs' 모듈과 'gray-matter'를 이용해 실제로 읽어와야 해.
- 디자인은 '이미지가 없는 90년대 종이(Analogue Paper)' 컨셉을 유지해.
[2. 디자인 시스템: Text-Only Analogue]
- 배경색: #F5F1E8 (미색 갱지), 카드색: #FFF8EA.
- 텍스트색: #1F1F1F, 강조색: #8B0000.
- 이미지(img 태그) 금지: 썸네일 없이 오직 텍스트와 타이포그래피로만 디자인.
- 폰트: 제목은 Serif(명조 계열), 본문은 Sans-serif(고딕 계열).
- UI 요소: 모든 박스는 1px 테두리와 얇은 그림자(Shadow)를 가짐.
[3. 파일별 구현 요청]
(A) lib/posts.ts (데이터 로직 - 가장 중요!)
- 'fs'와 'path' 모듈을 사용해 'content/' 디렉토리의 모든 파일을 읽어오는 로직 구현.
- 'gray-matter'를 사용하여 Frontmatter(slug, title, artist, year, country, tags, youtubeId, oneLine, trackInfo, recommendations)와 Content를 파싱.
- 함수 export:
1. getAllPosts(): 모든 포스트의 메타데이터 배열 반환 (날짜/연도순 정렬).
2. getPostBySlug(slug): 특정 슬러그의 포스트 데이터(본문 포함) 반환.
(B) app/page.tsx (메인 페이지)
- getAllPosts()를 비동기 컴포넌트로 호출.
- 2열 그리드 레이아웃 (모바일 1열).
- 카드 UI: [국가/연도 뱃지] -> [제목(Serif)] -> [가수] -> [태그] -> [한줄평(강조색)] 순서 배치.
(C) app/song/[slug]/page.tsx (상세 페이지)
- getPostBySlug() 호출.
- Vercel SSG 배포를 위해 'generateStaticParams()' 함수를 반드시 구현하여 모든 slug를 미리 빌드 경로로 설정해줘.
- SEO를 위해 'generateMetadata()' 함수도 구현해줘.
- 상단: react-youtube 라이브러리 사용 (16:9 반응형).
- 중단: react-markdown 사용 (className="prose prose-stone ..." 적용하여 타이포그래피 스타일링).
* 인용구(blockquote)는 좌측에 #8B0000 색상의 굵은 테두리 스타일 적용.
- 하단: Frontmatter의 'recommendations' 배열을 사용하여 추천 리스트 표시 (클릭 시 이동).
위 요구사항에 맞춰서 전체 코드를 작성해줘. 기존의 가짜 데이터 로직이 있다면 덮어씌워야 해.4. 구현 및 결과: 나는 팔짱 끼고 구경만 했다
Gemini가 작성해 준 '최종 실행용 프롬프트'를 Antigravity에 입력했습니다. 그러자 AI가 Task 목록과 구현 계획(Implementation Plan)을 제시했고 저는 딱 한마디만 했습니다.
"개발해 줘."
그때부터 새로운 경험이 시작되었습니다. AI가 알아서 Next.js를 설치하고 라이브러리를 세팅하며 코드를 작성해 내려갔습니다. 개발이 완료되었다는 메시지를 확인했는데 에러가 다수 발생했습니다. 개발은 AI가 할테니 에러도 일단 무시를 했습니다.
"npm run dev"라고 서버 실행 명령만 내렸더니 필요한 확장 프로그램을 설치하고 페이지를 띄우며 스스로 에러를 수정(Self-Correction)하여 완성해냈습니다.
가장 놀라웠던 점은 '저의 개입'이 전혀 필요 없었다는 사실입니다. 예전 같았으면 에러가 날 때마다 캡쳐해서 해결책을 찾았겠지만 이번에는 AI가 모든 과정을 주도했습니다.
<Antigravity Browser Extention 확장 프로그램 설치되면 이렇게 보임>
내부 코드가 어떻게 작성되었는지는 모르지만 중요한 건 "제가 머릿속으로 그린 그대로 작동하는 웹사이트"가 모니터에 떠 있다는 사실이었습니다. 배포된 웹사이트를 보며 제가 쓴 기획서가 그대로 반영이 된 것 같아 짜릿했습니다.
배포한 사이트 입니다. https://90s-juke.vercel.app/
향후 과제: 정적 사이트를 '살아있는' 주크박스로
1차 배포는 성공적이었지만 운영 관점에서 보니 새로운 욕심과 개선점이 보였습니다.
현재는 로컬 마크다운 방식을 사용하다 보니 언제 접속해도 늘 똑같은 목록만 보여준다는 단점이 있습니다. 이미지 한 장 없는 텍스트 중심 사이트라 자칫 사용자가 금방 식상해할 수 있다는 느 낌을 받았습니다.
이를 해결하기 위해 '시즌별 랜덤 추천 기능'을 도입할 계획입니다. 비록 DB가 없는 정적 사이트지만 클라이언트 단에서 접속 날짜를 인식하여 비가 오는 날엔 차분한 노래를, 크리스마스 시즌엔 캐럴을 메인 배너에 띄워주는 로직을 구현하려 합니다.
