15장. Figma Make로 자동 생성
프롬프트 연습
Figma Community의 쇼핑몰 템플릿을 선택했다면, 이미 기본 구조는 갖춰져 있다. Make를 활용해 템플릿을 우리 프로젝트의 패션·뷰티 쇼핑몰에 맞게 커스터마이징 한다.
Figma Make 시작하기
쇼핑몰 템플릿을 Make 프로젝트로
Figma 프로젝트에서 '만들기' → 'Make' 선택
프로젝트명: [프로젝트명]_패션뷰티_Make_v0.1
14장에서 복제한 쇼핑몰 템플릿 임포트
작업 전 템플릿 분석
대부분의 쇼핑몰 템플릿이 포함하는 페이지
Home, Product List, Product Detail
Cart, Checkout, Order Complete
My Account, Wishlist
Admin Dashboard (일부 템플릿)
우리 프로젝트에 필요한 수정 방향
영문 → 한글 라벨
일반 상품 → 패션·뷰티 특화
글로벌 결제 → 한국 결제 방식
인치/파운드 → 센티미터/원화
피그마 디자인 이미지를 첨부한 후 "구현해 줘"라는 프롬프트 하나로 디자인을 코드화로 구현해 준다.
한국형 쇼핑몰로 변환
글로벌 템플릿 → 한국 쇼핑몰
언어와 통화 변경
"모든 영문을 한글로 변경:
- Add to Cart → 장바구니 담기
- Buy Now → 바로 구매
- Price → 가격
- $ 표시를 ₩로 변경
- 천 단위 콤마 추가"
한국식 UI 패턴 적용:
"헤더를 한국 쇼핑몰 스타일로:
- 상단 띠배너 추가 (무료배송 안내)
- 검색창 크게 중앙 배치
- 즐겨찾기와 장바구니 아이콘 우측
- 카테고리 메뉴 전체 보기 추가"
FO 화면 한국화
홈페이지 커스터마이징
패션·뷰티 특화:
"메인 배너를 시즌 프로모션으로:
- 'SPRING SALE' → '봄 신상 최대 50% SALE'
- 카운트다운 타이머 추가
- 쿠폰 다운로드 버튼 추가"
카테고리 구성 변경:
"카테고리를 패션·뷰티로 재구성:
- Women → 여성의류
- Men → 남성의류
- Shoes → 신발
- Bags → 가방
- Beauty → 뷰티
- Accessories → 악세서리
- Sale → 세일
- New In → 신상품"
상품 리스트 페이지
필터 한국화:
"사이즈 필터를 한국 규격으로:
- XS, S, M, L, XL → 85, 90, 95, 100, 105
- US 6-12 → 230-280 (신발)
- 프리사이즈 옵션 추가"
정렬 옵션 수정:
"정렬 기준 한국식으로:
- Best Selling → 인기순
- Newest → 신상품순
- Price Low to High → 낮은 가격순
- Price High to Low → 높은 가격순
- Reviews → 리뷰 많은 순
- Discount → 할인율순 추가"
상품 상세 페이지
패션 상품 정보 추가:
"상품 정보 섹션 수정:
- 소재: 면 70%, 폴리에스터 30%
- 제조국: 대한민국
- 세탁방법 아이콘 추가
- 실측 사이즈표 추가
- 모델 착용 정보 (키/몸무게/착용 사이즈)"
배송 정보 한국화:
"배송 섹션 수정:
- '오늘 출발' 배지 추가
- 택배사: CJ대한통운
- 예상 도착: 내일(수) 도착 보장
- 무료배송 조건: 3만 원 이상
- 제주/도서산간 추가비용 안내"
한국 결제 시스템 적용
장바구니 수정
쿠폰과 적립금:
"장바구니에 한국식 혜택 추가:
- 쿠폰 적용 섹션
- 적립금 사용 입력란
- 예상 적립금 표시
- 무료배송까지 남은 금액 표시
- 네이버페이 포인트 사용"
체크아웃 페이지
결제 수단 변경:
"결제 수단을 한국식으로:
- PayPal 제거
- 카카오페이 추가
- 네이버페이 추가
- 토스페이 추가
- 삼성페이 추가
- 신용/체크카드 (국내 전체)
- 무통장입금 옵션"
배송지 입력:
"주소 입력을 한국식으로:
- 우편번호 검색 버튼
- 도로명 주소
- 상세 주소
- 배송 메모 선택:
- 부재 시 경비실에 맡겨주세요
- 부재 시 문 앞에 놓아주세요
- 배송 전 연락 바랍니다
- 직접 입력"
BO 화면 한국화
BO 화면도 Figma Community에서 관리자화면으로 검색한 후 디자인을 가져와서 작업하면 된다.
대시보드 수정
KPI 카드 한국화:
"대시보드 지표를 한국식으로:
- Revenue → 매출액
- Orders → 주문 수
- Customers → 고객 수
- Conversion → 전환율
- 단위를 원(₩)으로 변경
- 전일/전주/전월 대비 표시"
상품 관리
상품 등록 폼 수정:
"상품 등록 필드 한국화:
- Product Name → 상품명
- SKU → 상품코드
- Category → 카테고리
- Brand → 브랜드
- 원산지 필드 추가
- KC 인증 필드 추가
- 과세/면세 선택 추가"
모바일 최적화
모바일은 FO에서 모바일 버전으로 추가해 달라는 명령으로 제작이 가능하다.
화면 상단에 desktop, mobile 버튼으로 화면 크기 설정이 가능해서, 실시간으로 반응형을 확인할 수 있다.
한국 모바일 패턴
하단 네비게이션
모바일 하단에 탭바 추가:
- 홈 아이콘
- 카테고리
- 검색
- 마이페이지
- 최근 본 상품 (한국 특유)
모바일 상품 상세
모바일 상품 페이지 수정:
- 하단 고정 구매 바
- 찜하기 하트 아이콘
- 공유하기 (카카오톡 아이콘)
- 위로 가기 플로팅 버튼
패션·뷰티 특화 요소
사이즈 가이드
사이즈 선택에 가이드 추가:
- '사이즈 가이드' 링크
- 클릭 시 모달:
- 실측 사이즈표
- 측정 방법 이미지
- 체형별 추천
- 교환 안내
뷰티 상품 정보
뷰티 카테고리 상품에 추가:
- 피부 타입 선택 (건성/지성/복합성)
- 용량 표시 (ml/g)
- 사용기한 표시
- 전 성분 보기 링크
- 테스터 신청 버튼
빈 상태 한국화
장바구니 빈 상태
빈 장바구니 메시지 수정:
- Your cart is empty → 장바구니가 비어있어요
- Continue Shopping → 쇼핑 계속하기
- 추천 상품 타이틀: '이 상품은 어떠세요?'
검색 결과 없음
검색 결과 없음 수정:
- No results found → 검색 결과가 없습니다
- Try different keywords → 다른 검색어로 시도해 보세요
- 인기 검색어 추가
- 추천 검색어 태그 표시
실전 프롬프트 시퀀스
단계별 진행
1단계 - 전체 언어 변경:
"모든 영문 텍스트를 한글로 변경해 줘"
2단계 - 레이아웃 조정:
"헤더에 무료배송 띠배너 추가하고 검색창 크게 만들어줘"
3단계 - 카테고리 수정:
"카테고리를 여성의류, 남성의류, 신발, 가방, 뷰티, 악세서리로"
4단계 - 결제 수단:
"PayPal 대신 카카오페이, 네이버페이, 토스페이 추가"
5단계 - 모바일 최적화:
"모바일에 하단 탭바 추가: 홈, 카테고리, 검색, 마이, 최근"
Make 활용 팁
작업 효율화
일괄 변경:
"모든 '$' 기호를 '₩'로 변경"
"모든 'Add to Cart' 버튼을 '장바구니 담기'로"
"모든 가격에 '원' 추가하고 천 단위 콤마"
선택적 수정:
"이 페이지의 버튼만 보라색으로"
"모바일 뷰에서만 하단 고정"
"세일 상품 카드에만 빨간 배지"
주의사항
Make가 잘 처리하는 것:
텍스트 변경
레이아웃 재배치
색상과 스타일 수정
요소 추가/삭제
Make가 어려워하는 것:
복잡한 인터랙션
조건부 로직
실시간 데이터 연동
애니메이션 효과
프로토타입 제작을 위한 것이다. 클릭이나 기능이 된다고 해서 완성된 사이트가 만들어지는 것은 아니다. make에서 데이터베이스인 Supabase 연결이 가능하지만, 프로토타입을 위한 데이터 연동이지 실제 서비스를 위한 데이터는 아니다.
이 장에서는 make 활용과 연습용 프롬프트만 작성했다. 지금까지 요구사항 정리한 내용은 이후에 순차적으로 변경하면서 알아볼 예정이다.
처음부터 make로 작업하면 되지 않을까 의문이 들 수도 있다. 아무 정보도 없는 상태에서 무작정 make부터 시작한다면 의식의 흐름대로 사이트가 나올 가능성이 크다. 요구사항 정리는 사이트의 뿌리와 기둥이 되는 작업이다. 요구사항을 기준으로 만들어가야 의도한 대로 나올 가능성이 크다.
