소개
안녕하세요! 산부인과 전문의이자 1인기업 대표 뒹굴뒹굴입니다. 현재 폐경 여성들이 겪는 정서적 고립감과 개인맞춤 호르몬 치료의 부재를 해결하기 위해 AI 기반 폐경 통합 관리 플랫폼 'LIA(리아)'를 개발하고 있습니다.
두 차례에 걸친 웹사이트 제작 시도와 그 과정에서의 시행 착오를 공유합니다.
진행 방법
🎯 1차 시도: 빠른 MVP 제작
시작 계기
Andrew님의 바이브코딩 사례를 보고 "어느 정도까지 되나?" 호기심으로 시작
빠른 검증이 목표였음
사용 도구
Google AI Studio (Gemini Pro 2.5) → cursor agent (Sonnet 4)
EasyNext CLI (Next.js + TypeScript + Tailwind CSS)
접근 방식
# 간단한 프롬프트
"기존 사업계획서 기반으로 PRD, TRD 만들어줘"1차 결과
✅ 기본적인 구조는 나왔음
❌ 몇 번 수정하니 레이아웃 깨짐 현상 발생
❌ 캐시 삭제, 브라우저 개발자 도구 disable cache 설정해도 해결 안됨
수정 몇 번 하니 레이아웃 깨지기 시작
캐시 삭제하고, 브라우저 개발자 도구 들어가서 network tab에 disable cache 설정하고 난리쳐도 되지 않음.
→ "초심으로 돌아가야 한다"는 깨달음. 다시 제대로 만들기로 함.
🚀 2차 시도: 체계적 재구축
목표 재정의:
"비개발자가 웹사이트 MVP를 만들어서 개발자들에게 넘겨줄 수 있는 수준"
전략적 접근
브랜드 가치 설정 + 타겟 페르소나 정의
여러 사람이 함께 일해도 잘 돌아갈 핵심 개념 세팅
회사에서 일하듯 제대로 된 문서 작성
단계별 진행
Step 1: PRD 제대로 작성
여행가J님의 커스텀GPT 활용
상품 브랜드 + 타겟 유저 페르소나 구체화
브랜드 잡으니 랜딩페이지 컨셉과 색상도 자동 결정됨
Step 2: TRD 작성
급하게 교수님께 보여드릴 MVP 웹사이트 용으로 일차 개발
개발자 인수용 문서로 작성
현재 상태 + 미래 개발 방향을 명확히 제시
TRD v1.2 — LIA 랜딩페이지 (코드‑퍼스트: Next.js + Vercel → Supabase 업그레이드)
**문서 소유자:** 이예지(PO)
**버전/일자:** v1.2 / 2025‑08‑29
**대상 독자:** 비개발 제작자(커서 AI 활용), 마케팅, 향후 합류 개발팀
**목적:** 처음부터 **Next.js + Vercel**로 배포하고, 초기에는 **Tally 임베드 또는 네이티브 /api/submit + Brevo**로 가볍게 운영한 뒤, **Supabase(저장/Edge Functions)**를 붙여 **무중단 업그레이드**하기 위한 **불변 계약 + 구현 사양**을 정의한다.
Step 3: EasyNext로 환경 구축
easynext라는 좋은 부트스트랩이 있어서 커서 터미널에 깔아봄. 세상 좋아짐
# EasyNext 설치 (이전엔 없던 좋은 도구!) npm i -g @easynext/cli # 프로젝트 생성 easynext create project # 개발 서버 실행 npm run dev
#짜잔
▲ Next.js 15.5.2
- Local: http://localhost:3003
- Network: http://192.168.200.160:3003
- Environments: .env.local
✓ Starting...
✓ Ready in 2.2s
○ Compiling / ...
✓ Compiled / in 4s (587 modules)
⚠ metadataBase property in metadata export is not set for resolving social open graph or twitter images, using "http://localhost:300링크 클릭하면 잘 넘어온 것 확인 할 수 있음
Step 4: Figma MCP 연결
다시 한번 고통의 기간을 겪음. 3일간 머리털이 많이 빠진 뒤, 해결함
잘 안 되면 깐 거 다 밀고, 캐시 지우고 다 밀어버린 뒤, 피튜브님의 방법을 쓰시는 것을 추천
[figma mcp 파일설치, 오류없이 쉽게 연결하는 방법] 1. cursor 열고 폴더 생성하기 2. 내프로필 - figma api token 생성 및 복사 3. 아래 코드에 토큰값 넣고, 커서 채팅창에 입력해서 mcp연결해 달라고 하기 npx figma-developer-mcp --figma-api-key=<여기에 개인이 복사한 토큰 복붙> 4. cursor tolk to figma 플러그인 열고 채널 코드와 mcp 코드 복사하기 5. cursor 설정 - mcp탭에서 새로 생성하기 눌러서 mcp코드 복붙하기 6. 채팅창에 채널코드 붙여넣고 채널 연결해달라고 하기. (팁플러그인이 켜져있어야 잘 작동합니다.) 7. 연결이 성공되었다고 뜨면 필요한 작업들 시키기 다크모드 변환, 사이즈변환, 텍스트 베리에이션 등FIgma MCP 연결 후
Andrew님이 하신 것처럼, https://vercel.com/ 레이아웃 가져옴
Figma 에 레이아웃 넣으실 때에는 html.to.desgin 크롬 익스텐션 추천. 피그마 플러그인으로, 저장해놓으면 웹사이트 캡쳐후 피그마로 바로 퍼올 수 잇음.
Figma MCP 를 연결하니, cursor가 잘 Vercel layout 가져옴.
vercel 웹사이트는 너무 모던해서 클로드코드에게 이렇게 말함
내 브랜드 이미지 40% + vercel layout 60% 로 레이아웃 디자인해줘.역시 쉽지 않음. ...레이아웃 다 깨짐
6. 이전에 앤드류님이 이거 해결하다가 토큰 왕창 썼다는 얘기가 생각나서, 걍 브라우저 개발자 도구 열어봄.
걍 스크린샷 찍음.
클로드에게 해결하라고 명령함. 놀랍게도 해줌 .
근데 결국 문제는 Tailwind version 호환 문제였음.
# 1. 브라우저 개발자 도구로 진단
F12 → Elements 탭 → DOM 구조 확인
# 2. 실제 원인 발견: 빈 컴포넌트
<main class="min-h-screen"><!--$--><!--/$--></main>
# 3. Next.js 캐시 클리어
rm -rf .next
npm install
npm run dev
# 4. 존재하지 않는 컴포넌트 import 문제 해결결과
잘 만들어냄.
결과와 배운 점
결과와 배운 점
📊 1차 vs 2차 비교
🚨 주요 시행착오들
1차 실패 원인:
과도한 단순화: "대충 만들어줘" 식의 프롬프트
브랜딩 부재: 타겟과 브랜드 정체성 미정립
2차에서의 개선:
구체적인 요구사항: 브랜드 컬러, 페르소나, 메시지 명확화
-> 회사에서 일하듯이 브랜드 핵심 컨셉이 담긴 공유 문서 PRD, TRD를 잘 만드는 것이 중요
현재의 상태와 미래 프로젝트의 개발방향과 계획을 같이 주어야 trd를 mvp에 합당하게 짜줌
도구 조합: Easynext, Figma MCP 이용
💡 핵심 깨달음
"대충"으로는 안 된다
AI에게도 구체적이고 상세한 요구사항이 필요
정말 회사에서 일하는 것처럼 다른 팀에게 욕 안 먹을 만한 문서를 만들어야함
특히 브랜딩과 타겟 정의가 결과물 품질을 좌우
도구 조합의 위력
EasyNext: 딸깍으로 완전한 개발 환경 구축
개발: 커서 + 클로드코드 (완벽함)
UI: TailwindCSS + ShadCN + Figma MCP
(ShadCN 추천함. 바이브코딩 냄새나는 웹 디자인 잡아줌)
친절한 claude code
claude curso agent 보다는 claude code가 문제를 좀 더 적극적으로 해결해줌
기타
브라우저 개발자 도구 들어가서 network tab에 disable cache 꼭 클릭하고 수정하시길.