Home

본 프로젝트는 Figma MCP로 디자인을 만들고, 그 디자인을 Next.js로 구현하는 베이커리 쇼핑몰이다.

목적은 쇼핑몰 자체보다 AI를 활용한 쇼핑몰 제작이 실제로 얼마나 걸리는지 측정하는 데 있다. 프로젝트 설계부터 마무리까지 단계별 소요 시간을 기록하고, 목표 시간(1일, 업무 시간 기준 8시간)과 비교한다.

🥐 배포된 사이트 바로 가기 → bakery.im-pine.com

PC · 모바일 모두 같은 주소로 열린다 (모바일은 하단 탭 바 · 카테고리 버블 메뉴 구성).

바로 가기	주소
쇼핑몰 홈	bakery.im-pine.com
상품 목록 (카테고리 · 검색 · 정렬)	/products
주문 내역 (회원 화면)	/mypage → 임시 로그인
관리자 (조회는 누구나)	/admin

추천 순서: 상품 담기 → 장바구니 → 주문서 → 결제창(데모) → 주문 완료 → 마이페이지 임시 로그인 → 관리자에서 상태 변경 확인. 데모 사이트이므로 실제 개인정보를 입력하지 않는다. 관리자의 변경은 비밀번호가 필요하다.

---

• GitHub 저장소
• Figma 디자인 파일

🖥️ FrontEnd

• 🎨 Colors — 색 스케일, 시맨틱 토큰, 카테고리 색
• ✏️ Design — 콘셉트, 화면, 모바일 재설계, 사용자 흐름
• 🧩 Components — 컴포넌트 목록과 용도
• 🔀 State — 서버 상태와 클라이언트 상태 분리

⚙️ BackEnd

• 🏗️ Architecture — 데이터 흐름, 관리자 보호, 주문 흐름
• 🗃️ Data — Prisma 타입 전략, Zod 자동 생성, DB 선택

📏 Project

• ⏱️ Time — 측정 방식, 단계별 기록과 회고
• 🤖 Figma MCP — 플랜 한도, 크레딧, 이미지 생성 방법
• 🧪 Testing — 테스트 구성, 도구 선정 사유, 실행 방법
• 🚀 Performance — Lighthouse 측정 · 개선 5건 (모바일 점수 78–97 → 93–99, 주문 상세 이동 2.47s → 0.58s, 이미지 목록 처리)
• 🛠️ Troubleshooting — 개발 중 겪은 문제와 해결 방법