이번 글에서는 Claude Design을 활용하여 MVP UI 디자인과 프론트엔드 코드를 생성해 보도록 하겠습니다.
이전 글에서 정리한 MVP 와이어 프레임 내용을 Claude Design에 전달하여 UI 디자인과 프론트엔드 코드를 생성해 보겠습니다.
AI가 이해하기 좋은 Markdown 형식으로 다음과 같이 정리합니다.
# 자사몰 쇼핑몰 프로젝트 사양서
## 프로젝트 개요
자사몰 형태의 쇼핑몰을 구축합니다. 추후 커머스 플랫폼으로 확장하기 용이하도록, 커머스 플랫폼 구조에서 판매자 기능을 제거한 형태로 설계합니다.
---
## 기술 스택
### Frontend
- TypeScript
- React + Next.js
- Tailwind CSS + shadcn/ui
---
## 디자인 가이드
- **Brand Color**: Black
- **Sub Palette**: Neutral Color 위주의 깔끔한 톤
- **Background**: White
---
## 와이어프레임
### 1. 헤더 (Header)
- **회원가입**
- 이메일 or 휴대폰 인증
- 약관 동의
- **로그인**
- 비밀번호 로그인
- Google 로그인
- 비밀번호 찾기
- **상품 검색**
- **장바구니**
### 2. 메인 페이지
- 상품 목록 조회
- 상품 목록 필터, 정렬
### 3. 마이 페이지
- 프로필 관리
- 비밀번호 변경
- 약관 선택 동의 관리
- 배송 주소 관리
- 결제수단 관리
- 리뷰 관리
- 문의 관리
- 회원탈퇴
### 4. 상품 상세
- 상품 정보
- 사업자 정보
- 상품 옵션 선택
- 장바구니
- 바로구매
- 리뷰
- 문의
- 배송 및 반품 안내
### 5. 장바구니
- 장바구니 상품 목록 보기
- 장바구니 상품 옵션 변경
- 결제 금액 정보
- 주문
### 6. 푸터
- 이용약관
- 전자금융거래약관
- 개인정보처리방침
- FAQ (자주 묻는 질문)
### 7. 어드민
- 전체 상품 관리
- 전체 주문 관리
- 전체 회원 관리
- 전체 문의 관리
- 판매 통계 (연별, 월별, 일별)
Claude Design에 프롬프트를 전달하면 구체적인 지시사항들을 사용자에게 추가로 물어봅니다.
필요에 맞게 구체적인 지시사항들을 선택하고 우측 하단의 Continue 버튼을 누르면, 약 10분 정도의 시간이 지난 후 프론트엔드 코드와 UI 디자인을 생성해 줍니다.
Claude Design에 파일 다운로드 요청을 지시하면, 채팅창에서 프론트엔드 코드를 다운로드할 수 있습니다.
다운로드한 프론트엔드 코드를 IDE에서 열어봅니다.
다운로드 받은 코드를 실제 프로젝트로 사용하려면, 몇 가지 추가 작업이 필요합니다.
- 누락된 설정 적용: Claude Code에 요청했었지만 누락된 TypeScript, Next.js, Tailwind 설정 적용
- Github에 업로드: .git, .gitignore 생성 후 Github Repo에 업로드
이렇게 누락된 설정을 보완하고 원격 저장소까지 연결하면서, 본격적인 개발에 들어갈 수 있는 프로젝트 세팅을 마쳤습니다.
이번 글에서는 MVP 와이어프레임을 바탕으로 Claude Design을 이용해 디자인이 적용된 프론트엔드 코드를 생성하고, 프로토 타입으로서 프로젝트 구성을 대략적으로 정리하는 작업을 진행했습니다.
다만 현재 코드는 더미 데이터를 기반으로 동작하고 있어, 자사몰로서 실제 기능을 갖추려면 데이터베이스를 사용하여 데이터를 저장하고 조회할 수 있는 백엔드 서버도 구현해야 합니다.
프론트엔드와 백엔드를 대략적으로 구현한 후, 실제 요구사항에 맞게 양쪽을 다듬고 연결하는 방식으로 프로젝트를 진행해보려 합니다.
이를 위해, 다음 글에서는 백엔드 서버 구현의 기준이 될 API 명세서와 ERD를 먼저 작성해 보도록 하겠습니다.