3장. 구조 표준
통합 구조 설계
두 가지 도구, 명확한 역할
프로토타입 중심 기획에서 Figma와 v0는 서로 다른 역할을 한다. Figma는 기획 문서화와 전체 구조 파악을 위한 도구고, v0는 실제 동작하는 프로토타입을 만드는 도구다. 이 둘을 혼동하면 같은 작업을 두 번 하는 비효율이 발생한다.
이 장에서는 기획자가 관리해야 할 두 가지 구조를 다룬다. 첫째, Figma에서 기획 문서와 전체 화면 맵을 관리하는 방법. 둘째, v0로 만든 프로토타입을 Git/Vercel로 배포하고 관리하는 방법이다. - Vercel를 사용하지 않아도 된다. Git와 CI/CD 자동화 배포가 되어 있다면 상관없다. -
Figma: 기획의 지도를 그리는 곳
Figma의 역할은 전체를 조망하고 문서화하는 것이다. 실제 동작하는 프로토타입은 v0가 담당하므로, Figma는 구조와 설명에 집중한다.
파일 구조
1. Mall_Planning.fig — 전체 기획 문서
2. Mall_Components.fig — 재사용 요소 정의
3. Mall_Archive.fig — 과거 버전 보관
FO와 BO를 굳이 파일로 분리할 필요가 없다. 어차피 실제 프로토타입은 v0에서 만들기 때문에, Figma에서는 전체 구조를 한눈에 볼 수 있는 것이 더 중요하다. 하지만, FO, BO 페이지가 100개 이상이면 분리하는 방안도 고려해야 한다.
페이지 구성
00_Overview — 프로젝트 대시보드
01_Flows — 사용자 시나리오
02_Wireframes — 화면 구조 설계
03_Screenshots — v0 결과물 캡처
04_Specs — 기능 명세와 NOTE
99_Archive — 과거 버전
00_Overview: 프로젝트의 현황판
기획자가 매일 확인해야 할 정보를 모은다.
프로젝트 정보
├─ 현재 버전: v2.1
├─ 마지막 업데이트: 2025-01-15
├─ 이번 주 목표: 장바구니 플로우 완성
└─ 다음 주 계획: 결제 프로세스
URL 허브
├─ 운영 프로토타입: mall-proto.vercel.app
├─ 개발 브랜치: dev-mall-proto.vercel.app
├─ 실험 버전: exp-mall-proto.vercel.app
└─ GitHub: github.com/team/mall-proto
주요 결정사항
├─ 2025-01-15: 원스텝 체크아웃 채택
├─ 2025-01-14: 게스트 구매 지원
└─ 2025-01-13: 쿠폰 중복 적용 불가
01_Flows: 시나리오를 그리는 곳
플로우는 Figma에서 그리는 것이 효과적이다. 전체 흐름을 한눈에 보고, 분기점을 명확히 표시할 수 있다.
F01_첫 구매_플로우
[홈] → [검색] → [상품상세] → [장바구니] → [결제] → [완료]
↓
[로그인 필요] → [회원가입] → [재시작]
핵심 지표: 전환율 2.5% 목표
브랜치: feature/first-purchase
URL: first-purchase.vercel.app
각 플로우마다 대응하는 Git 브랜치와 Vercel URL을 명시한다. Figma에서 구조를 보고, URL로 가서 실제 동작을 확인하는 방식이다.
02_Wireframes: 구조만 빠르게
와이어프레임은 여전히 Figma에서 그린다. Figma에서 그리는 것이 익숙지 않다면, 손으로 직접 그려서 사진으로 저장하는 것도 방법이다. 와이어프레임은 v0에 지시할 때 참고 자료로 쓰기 때문이다.
와이어프레임 → v0 프롬프트
"첨부한 와이어프레임처럼 장바구니 페이지 만들어줘
- 좌측: 상품 목록
- 우측: 결제 요약
- 하단: 구매 버튼"
색상 없이 회색조로만 그리고, 레이아웃과 정보 구조에만 집중한다. 30분 안에 10개 화면을 그릴 수 있을 정도로 단순하게.
03_Screenshots: v0 결과물 아카이브
v0로 만든 화면을 캡처해서 보관한다. 왜 굳이 스크린샷을 보관하는가?
전체 구조 파악: 30개 화면을 한 페이지에서 조망
버전 비교: 이전 버전과 현재 버전을 나란히 비교
오프라인 리뷰: 인터넷 없이도 화면 검토 가능
2025-01-15_장바구니_v1
├─ Desktop_1440px.png
├─ Mobile_390px.png
└─ URL: cart-v1.vercel.app
04_Specs: NOTE로 기획 의도 전달
화면만으로 설명이 부족한 부분을 NOTE로 보완한다. v0가 만든 프로토타입은 "어떻게 보이는가"를 보여주고, NOTE는 "왜 이렇게 만들었는가"를 설명한다.
NOTE 작성 예시
N.기능.장바구니.01
"수량 0 입력 시 삭제 확인
이유: 실수 삭제 방지
참고: 아마존 동일 패턴"
N.상태.장바구니.02
"10개 이상 상품 시 스크롤
이유: 결제 요약 항상 노출
테스트: 20개까지 확인"
N.데이터.장바구니.03
"재고 실시간 체크
API: GET /inventory/check
주기: 카트 진입 시 + 5분마다"
v0 + Git + Vercel: 실제 프로토타입 관리
브랜치 전략
main — 확정된 최신 버전
├─ dev — 개발 중인 통합 버전
├─ feature/cart — 장바구니 개선
├─ feature/checkout — 결제 프로세스
└─ exp/one-click — 실험: 원클릭 구매
각 브랜치는 자동으로 다른 URL로 배포된다.
main: mall-proto.vercel.app
dev: dev-mall-proto.vercel.app
feature/cart: cart-mall-proto.vercel.app
커밋 메시지 규칙
feat: 장바구니 수량 변경 기능 추가
fix: 쿠폰 적용 시 금액 계산 오류 수정
refactor: 상품 카드 컴포넌트 구조 개선
style: 모바일 레이아웃 반응형 수정
docs: README에 환경 설정 가이드 추가
프로토타입 버전 관리
v1.0.0 — 초기 전체 플로우
v1.1.0 — 장바구니 기능 추가
v1.1.1 — 장바구니 버그 수정
v2.0.0 — 결제 시스템 전면 개편
실무 워크플로우: Figma와 v0의 협업
Day 1: 구조 설계
Figma에서:
1. 플로우 다이어그램 작성
2. 와이어프레임 10개 스케치
3. NOTE로 핵심 기능 정의
산출물: Planning 문서
Day 2: 프로토타입 생성
v0에서:
1. "와이어프레임대로 만들어줘" + 스크린샷
2. 생성된 코드 확인
3. Git 리포지토리에 Push
산출물: feature/cart 브랜치
Day 3: 배포 및 테스트
Vercel에서:
1. 자동 배포 확인
2. URL 생성: cart-mall-proto.vercel.app
3. 팀 공유 및 피드백
산출물: 실제 동작하는 URL
Day 4: 문서 업데이트
Figma로 돌아와서:
1. v0 결과물 스크린샷 추가
2. 피드백 기반 NOTE 업데이트
3. 다음 스프린트 계획
산출물: 업데이트된 Planning 문서
폴더 구조: Git 리포지토리
mall-prototype/
├─ app/
│ ├─ page.tsx (홈)
│ ├─ products/
│ ├─ cart/
│ └─ checkout/
├─ components/
│ ├─ common/
│ ├─ product/
│ └─ cart/
├─ lib/
├─ public/
└─ README.md
README.md 필수 내용
# Mall Prototype
## 라이브 URL
- 운영: [mall-proto.vercel.app](https://mall-proto.vercel.app)
- 개발: [dev-mall-proto.vercel.app](https://dev-mall-proto.vercel.app)
## Figma 문서
- [기획 문서](figma.com/...)
- [컴포넌트 정의](figma.com/...)
## 주요 기능
- [x] 상품 목록
- [x] 장바구니
- [ ] 결제 (진행 중)
## 로컬 실행
```bash
npm install
npm run dev
```
협업 규칙: 충돌 방지
Figma 작업 규칙
오전: 플로우/와이어프레임 작업
오후: NOTE 작성/스크린샷 정리
충돌 방지: 페이지별 담당자 지정
Git 작업 규칙
1. feature 브랜치에서 작업
2. 기능 단위로 커밋
3. PR 생성 → 리뷰 → main 병합
4. 충돌 시 페어 프로그래밍으로 해결
URL 공유 규칙
내부팀: 모든 브랜치 URL 공개
외부 이해관계자: main URL만
고객 테스트: 특정 feature URL만
보안 필요시: Basic Auth 설정
체크리스트: 주간 점검
Figma 체크
[ ] 이번 주 플로우가 01_Flows에 있는가?
[ ] v0 스크린샷이 03_Screenshots에 있는가?
[ ] NOTE가 최신 상태인가?
[ ] Overview의 URL이 모두 작동하는가?
Git/Vercel 체크
[ ] feature 브랜치가 배포됐는가?
[ ] README가 업데이트됐는가?
[ ] 오래된 브랜치가 정리됐는가?
[ ] main 브랜치가 안정적인가?
자주 하는 실수와 해결
실수 1: Figma에서 프로토타입 만들기
Figma에서 클릭 연결까지 다 만들었는데, v0에서 또 만들어야 한다.
→ 해결: Figma는 구조만, 프로토타입은 v0로 만든다.
실수 2: 브랜치 관리 없이 main에 직접 푸시
실험적 기능을 main에 넣었다가 전체가 깨진다.
→ 해결: 항상 feature 브랜치 → PR → 리뷰 → 병합
실수 3: URL 관리 실패
어떤 URL이 최신인지, 어떤 기능이 어느 URL에 있는지 모른다.
→ 해결: Figma Overview에 URL 허브 유지
성과 측정
정량 지표
와이어프레임 → 프로토타입: 2일 이내
피드백 → 수정 배포: 1시간 이내
주간 배포 횟수: 10회 이상
활성 URL 수: 5개 이내 (관리 가능 수준)
정성 지표
"실제로 써볼 수 있어서 좋다"
"수정사항이 바로 반영된다"
"전체 구조를 한눈에 볼 수 있다"
각 도구의 강점을 활용하라
Figma는 전체를 보는 눈이고, v0는 실제로 만드는 손이다.
Figma에서 큰 그림을 그리고, 구조를 설계하고, 문서를 작성한다. v0에서 실제로 동작하는 프로토타입을 만들고, Git으로 버전을 관리하고, Vercel로 즉시 배포한다.
v0 -> Git -> Vercel 자동화 세팅이 힘들면, 주변의 개발자 또는 GPT를 통해 따라하기만 하면 된다. 코드를 만지는 일이 아니고, 설정만으로 되기에 어려운 작업이 아니다.
두 도구를 적절히 조합하면, 기획부터 프로토타입까지 일주일 안에 완성할 수 있다. 중복 작업 없이, 효율적으로, 실제 동작하는 결과물을 만들 수 있다.
또한 Figma, Git, Vercel에서 각각 version을 관리할 수 있기에, 과거 데이터와 화면을 바로 확인할 수 있다.
