피그마 Make AI로 10분 만에 끝내는 이커머스 와이어프레임 만들기

 

안녕하세요! 찐망고입니다.

 

단순히 '그려줘'라고 하면 AI는 예술을 하지만, 기획자가 '구조'를 알려주면 AI는 설계를 합니다.

제가 수만 번 질문하며 깨달은 'AI를 길들이는 3가지 설계 원칙'과 실제 오아시스 마켓 구조를 바탕으로 한 프롬프트를 공유합니다.

 

AI를 길들이는 3가지 설계 원칙

1. 위계 설정 (Visual Hierarchy): H1~H5 같은 태그를 명시하세요. AI가 제목과 본문의 차이를 인지해야 정보의 우선순위가 잡힌 화면이 나옵니다.
2. 추상화 (Abstraction): '예쁘게'는 주관적입니다. 'X 표시된 박스(Placeholder)'로 그려달라고 명확히 지시하세요. 그래야 수정과 확장이 용이한 '진짜' 와이어프레임이 완성됩니다.
3. 데이터의 구체적 정의 (Data Definition): 상품 카드 안에 이름, 가격, 할인율, 장바구니 버튼이 모두 들어가야 한다고 콕 집어주세요. 그래야 AI가 빠뜨리지 않고 우리가 설계한 IA를 화면에 구현해줍니다.

오아시스메인페이지

피그마 Make AI용 한글 프롬프트

역할: 시니어 UX 디자이너 작업: 첨부된 이미지의 구조를 바탕으로, 스크롤이 긴 이커머스(신선마켓) 데스크톱 메인 페이지의 상세 로우-파이(Low-Fidelity) 와이어프레임 생성.

제약 사항 및 스타일:

1. 포맷: 회색조의 골격 UI로 구성된 하나의 긴 연속 프레임. 실사 제품 이미지나 특정 컬러 팔레트 사용 금지. 콘텐츠에는 플레이스홀더(X 표시된 박스)와 로렘 입숨(Lorem Ipsum) 텍스트 사용.
2. 타이포그래피: 제목(H1-H5), 본문, 라벨에 대해 일관된 크기를 가진 명확한 위계 시스템 적용.
3. 레이아웃: 이미지(image_3.png)에 보이는 다단 및 레이어 구조를 엄격히 준수.

섹션별 구성 요소:

1. 고정 헤더 및 네비게이션:
   • 상단: 공지사항, 로그인 등 간단한 유틸리티 바.
   • 메인 헤더: 로고, 검색창, 사용자/장바구니 아이콘 플레이스홀더.
   • 헤더 하단: 메인 카테고리를 위한 수평 네비게이션 바(HNB).
2. 히어로 섹션 (메인 배너):
   • 대형 풀 너비 캐러셀 플레이스홀더(X 박스). 네비게이션 점/화살표 포함. 텍스트 오버레이용 플레이스홀더 포함.
3. 퀵 메뉴 (아이콘 링크):
   • 원형 플레이스홀더와 하단 라벨이 있는 한 줄 구성 (과일, 채소, 정육 등 카테고리 아이콘 대용).
4. 콘텐츠 섹션 A: "타임딜 / 특가 상품":
   • 섹션 제목(H3). 그 아래 그리드 레이아웃 배치.
   • 그리드 아이템 구조(상품 카드): 상품 이미지, 제목, 가격, 할인율, '장바구니 담기' 버튼 플레이스홀더.
5. 중간 배너:
   • 콘텐츠 사이를 구분하는 중간 크기의 가로형 배너 플레이스홀더.
6. 콘텐츠 섹션 B: "신상품 / 베스트":
   • 섹션 A와 유사한 대형 그리드 섹션.
   • 중첩된 탭이나 서브 헤더로 구분(카테고리 필터링 대용). 이미지에 보이는 그리드 규격 준수 (예: 4열 2행).
   • 일관된 상품 카드 구조 유지.
7. 콘텐츠 섹션 C: "테마 컬렉션":
   • 각각 이미지 플레이스홀더와 컬렉션 제목이 있는 대형 카드 그리드.
8. 푸터 섹션:
   • 정보 위계에 따라 조직화: 기업 정보, 고객 서비스, 소셜 링크, 하단 바(저작권, QR 코드 플레이스홀더).

출력 기대치: 깨끗하고 조직적이며 수정이 용이한 골격 구조.