18장. 실전 - 홈
프로모션/신상품/카테고리 숏컷
홈 화면의 역할
홈은 고객이 가장 먼저 접하는 화면이다. 첫인상으로 브랜드 정체성을 전달하고, 탐색 경로를 제시하며, 주요 전환 액션으로 유도한다.
아래 프롬프트는 예시이다. 그대로 복사 붙여 넣기 해도 만들 수 있지만, 브랜드 콘셉트 및 기획 의도에 따라 다르게 요청해야 한다.
홈 화면 구조
홈은 다음 섹션으로 구성한다. 우선순위는 모바일 트래픽 80%를 고려한 순서다.
Desktop (1440×900 기준)
헤더 (20장 공통 레이아웃)
히어로 배너 (프로모션)
카테고리 숏컷 (8개 그리드)
신상품 (12개 그리드, 4열×3행)
푸터 (20장 공통 레이아웃)
Mobile (390×844 기준)
헤더 (20장 공통 레이아웃)
히어로 배너 (슬라이드)
카테고리 숏컷 (4열×2행)
신상품 (2열 그리드, 무한 스크롤)
푸터 (20장 공통 레이아웃)
히어로 배너 설계: 프로모션
히어로 배너는 주요 프로모션을 전달하는 영역이다. 클릭률 15%를 목표로 명확한 메시지와 CTA를 제공한다.
데스크톱 히어로 배너 Make 프롬프트
기본 배너 생성
데스크톱용 히어로 배너를 만들어줘
크기: 너비 1440px, 높이 500px
레이아웃: 좌우 2분할 (6:4 비율)
왼쪽 영역 (840px):
- 상단 라벨: "2025 봄 신상" (14px, 파란색 배경 패딩 태그)
- 메인 제목: "새로운 시즌을 시작하세요" (48px, 굵게, #000)
- 부제목: "지금 만나보는 봄 컬렉션" (20px, #666)
- CTA 버튼: "상품 보러가기" (160×56px, 파란색 배경, 흰색 텍스트, 둥근 모서리 8px)
- 텍스트는 왼쪽 정렬, 왼쪽 여백 120px, 상단 여백 120px
오른쪽 영역 (600px):
- 상품 이미지 placeholder (500×500px, 회색)
- 우측 정렬, 우측 여백 120px
스타일:
- 배경: 연한 파스텔 블루 그라디언트 (#F0F7FF → #E8F2FF)
- 제목 줄 간격: 1.2
- 버튼 호버 시: 배경색 진하게, 그림자 추가
다중 배너 슬라이드
히어로 배너를 3개 슬라이드로 확장해줘
슬라이드 1 (위에서 만든 배너):
- "2025 봄 신상" 테마
슬라이드 2:
- 배경: 연한 핑크 그라디언트 (#FFF0F5 → #FFE8F0)
- 라벨: "특가 세일"
- 메인 제목: "최대 50% 할인"
- 부제목: "인기 상품 한정 수량"
- CTA: "지금 쇼핑하기"
- 이미지: 오른쪽 동일 위치
슬라이드 3:
- 배경: 연한 민트 그라디언트 (#F0FFF4 → #E8FFF0)
- 라벨: "신규 회원 혜택"
- 메인 제목: "첫 구매 15% 할인"
- 부제목: "회원가입하고 쿠폰 받기"
- CTA: "가입하고 쿠폰받기"
- 이미지: 오른쪽 동일 위치
하단 중앙에 인디케이터:
- 3개 원형 점 (각 12px)
- 활성: 파란색 원, 너비 32px (타원형)
- 비활성: 회색 원
- 간격: 8px
- 하단 여백: 32px
좌우 화살표 버튼:
- 크기: 48×48px, 원형
- 배경: 반투명 흰색 rgba(255,255,255,0.8)
- 화살표 아이콘: 24px, 검정
- 왼쪽 화살표: 좌측 40px
- 오른쪽 화살표: 우측 40px
모바일 히어로 배너 Make 프롬프트
모바일 슬라이드 배너
모바일용 히어로 배너 슬라이드를 만들어줘
크기: 너비 390px, 높이 480px
슬라이드 3개 구성:
각 슬라이드 레이아웃 (세로 정렬):
- 상단 여백: 60px
- 라벨: 중앙 정렬 (14px, 배경 태그)
- 메인 제목: 중앙 정렬 (32px, 굵게, 최대 2줄)
- 부제목: 중앙 정렬 (16px, 여백 16px)
- 상품 이미지: 중앙 정렬 (320×320px)
- CTA 버튼: 중앙 정렬, 하단 60px (280×52px)
슬라이드 1:
- 배경: 파스텔 블루 그라디언트
- 라벨: "2025 봄 신상"
- 제목: "새로운 시즌을 시작하세요"
- 부제목: "봄 컬렉션"
- CTA: "상품 보러가기"
슬라이드 2:
- 배경: 파스텔 핑크 그라디언트
- 라벨: "특가 세일"
- 제목: "최대 50% 할인"
- 부제목: "인기 상품 한정"
- CTA: "지금 쇼핑하기"
슬라이드 3:
- 배경: 파스텔 민트 그라디언트
- 라벨: "신규 회원 혜택"
- 제목: "첫 구매 15% 할인"
- 부제목: "쿠폰 받기"
- CTA: "회원가입하기"
하단 인디케이터:
- 3개 점, 중앙 정렬
- 활성: 흰색 원 (12px)
- 비활성: 반투명 흰색 (8px)
- 하단 여백: 24px
스와이프 제스처 힌트:
- 좌우 양쪽에 흐릿한 화살표 아이콘 (16px)
- 0.5초 후 페이드아웃
카테고리 숏컷 설계
카테고리 숏컷은 고객이 원하는 분류로 빠르게 이동하는 경로다. 진입률 40%를 목표로 한다.
데스크톱 카테고리 Make 프롬프트
8개 그리드 레이아웃
데스크톱용 카테고리 숏컷을 만들어줘
전체 영역: 너비 1200px (중앙 정렬), 상하 여백 80px
상단 헤더:
- 제목: "카테고리" (28px, 굵게, 좌측 정렬)
- 하단 여백: 32px
카테고리 그리드:
- 8개 카드를 4열×2행 배치
- 카드 크기: 각 270×200px
- 그리드 간격: 가로 30px, 세로 30px
각 카테고리 카드:
- 배경: 흰색
- 테두리: 1px 실선 #E5E5E5
- 모서리: 12px 둥글게
- 패딩: 32px
카드 내용 (세로 중앙 정렬):
- 아이콘: 64×64px, 상단 (회색 원형 배경)
- 카테고리명: 아이콘 하단 20px, 18px, 굵게, 중앙 정렬
- 상품 수: 카테고리명 하단 8px, 14px, 회색, 중앙 정렬
카테고리 목록:
1. 상의 - 티셔츠 아이콘 - "245개 상품"
2. 하의 - 바지 아이콘 - "189개 상품"
3. 아우터 - 자켓 아이콘 - "156개 상품"
4. 원피스 - 드레스 아이콘 - "98개 상품"
5. 신발 - 운동화 아이콘 - "134개 상품"
6. 가방 - 백팩 아이콘 - "87개 상품"
7. 악세서리 - 목걸이 아이콘 - "112개 상품"
8. 뷰티 - 립스틱 아이콘 - "203개 상품"
호버 효과:
- 배경: 연한 회색 #F8F8F8
- 테두리: 파란색 2px
- 그림자: 0 4px 12px rgba(0,0,0,0.08)
- 트랜지션: 0.2초
크기는 여러번 수치를 바꿔가면서 최적의 크기를 찾아야 한다. 또한 DB 연결없는 프로토타입이기 때문에 임의의 수치를 넣어 노출 방식을 확인한다.
모바일 카테고리 Make 프롬프트
4열 그리드 레이아웃
모바일용 카테고리 숏컷을 만들어줘
전체 영역: 너비 390px, 패딩 좌우 16px, 상하 여백 40px
상단 헤더:
- 제목: "카테고리" (20px, 굵게, 좌측 정렬)
- 하단 여백: 20px
카테고리 그리드:
- 8개 카드를 4열×2행 배치
- 카드 크기: 각 80×100px
- 그리드 간격: 가로 8px, 세로 16px
각 카테고리 카드:
- 배경: 흰색
- 테두리: 1px 실선 #E5E5E5
- 모서리: 8px 둥글게
- 패딩: 12px
카드 내용 (세로 중앙 정렬):
- 아이콘: 40×40px (회색 원형 배경)
- 카테고리명: 아이콘 하단 8px, 12px, 중앙 정렬, 최대 1줄
카테고리 목록 (위와 동일):
- 상의, 하의, 아우터, 원피스
- 신발, 가방, 악세서리, 뷰티
터치 피드백:
- 탭 시: 배경 #F0F0F0, 0.1초
- 최소 터치 영역: 44×44px 확보
신상품 섹션 설계
신상품은 최신 상품을 노출해 탐색을 유도한다. 상품 상세 진입률 60%의 주요 경로다.
데스크톱 신상품 Make 프롬프트
12개 상품 그리드
데스크톱용 신상품 섹션을 만들어줘
전체 영역: 너비 1200px (중앙 정렬), 상하 여백 80px
상단 헤더:
- 제목: "신상품" (28px, 굵게, 좌측 정렬)
- 우측에 "전체보기 >" 링크 (16px, 파란색)
- 하단 여백: 32px
상품 그리드:
- 12개 상품을 4열×3행 배치
- 카드 크기: 각 270×400px
- 그리드 간격: 가로 30px, 세로 40px
각 상품 카드:
- 배경: 흰색
- 테두리: 없음
- 모서리: 8px 둥글게
카드 내용:
- 상품 이미지: 270×270px, 회색 placeholder
- 브랜드명: 이미지 하단 12px, 13px, #999
- 상품명: 브랜드 하단 4px, 15px, #333, 최대 2줄, 말줄임
- 가격 영역: 상품명 하단 8px
- 할인가: 18px, 굵게, #000
- 정가: 할인가 우측 8px, 15px, #999, 취소선
- 할인율: 할인가 우측 8px, 15px, 빨간색, 굵게 (예: "25%")
가격 표시 규칙:
- 할인 있음: 할인가 + 정가(취소선) + 할인율
- 할인 없음: 정가만 표시
호버 효과:
- 이미지 위에 반투명 검정 오버레이 (opacity 0.3)
- "장바구니 담기" 버튼 페이드인 (중앙, 160×48px, 흰색 배경)
- 트랜지션: 0.3초
상품 카드 상태 변형
상품 카드의 추가 상태를 만들어줘
품절 상태:
- 이미지 위에 반투명 회색 오버레이
- "품절" 라벨 (중앙, 80×32px, 검정 배경, 흰색 텍스트)
- 호버 시 장바구니 버튼 대신 "재입고 알림" 버튼
신상품 배지:
- 이미지 좌측 상단 (여백 8px)
- "NEW" 라벨 (48×24px, 파란색 배경, 흰색 텍스트)
할인 배지:
- 이미지 우측 상단 (여백 8px)
- 할인율 원형 배지 (48×48px, 빨간색 배경, 흰색 텍스트 "25%")
모바일 신상품 Make 프롬프트
2열 그리드 + 무한 스크롤
모바일용 신상품 섹션을 만들어줘
전체 영역: 너비 390px, 패딩 좌우 16px, 상하 여백 40px
상단 헤더:
- 제목: "신상품" (20px, 굵게, 좌측 정렬)
- 우측에 "전체보기 >" 링크 (14px, 파란색)
- 하단 여백: 20px
상품 그리드:
- 2열 그리드 (초기 8개 상품 표시)
- 카드 크기: 각 171×260px
- 그리드 간격: 가로 10px, 세로 24px
각 상품 카드:
- 배경: 흰색
- 모서리: 8px 둥글게
카드 내용:
- 상품 이미지: 171×171px
- 브랜드명: 이미지 하단 8px, 11px, #999
- 상품명: 브랜드 하단 4px, 13px, #333, 최대 2줄
- 할인가: 상품명 하단 6px, 15px, 굵게
- 정가: 할인가 하단 2px, 12px, #999, 취소선
- 할인율: 정가 우측 4px, 12px, 빨간색 (할인 있을 때만)
하단 "더보기" 영역:
- 높이: 80px, 중앙 정렬
- 텍스트: "더 많은 상품 보기" (14px, #666)
- 하단 라인 애니메이션 (로딩 시)
무한 스크롤 동작:
- 스크롤이 하단 200px 이내 도달 시
- "더보기" 영역에 스피너 표시
- 추가 8개 상품 로드
- 더 이상 없으면 "마지막 상품입니다" 표시
상태별 화면 설계
데스크톱 Loading
홈 화면 로딩 상태를 만들어줘
히어로 배너 영역:
- 스켈레톤 박스 1440×500px
- 좌측에 라벨·제목·부제목 스켈레톤 (3줄, 너비 각 120px, 280px, 200px)
- 우측에 이미지 스켈레톤 (500×500px)
- CTA 버튼 스켈레톤 (160×56px)
카테고리 영역:
- "카테고리" 제목은 그대로 표시
- 8개 카드 스켈레톤 (270×200px, 그리드 동일)
- 각 카드 내부: 원형 스켈레톤 (64px) + 텍스트 스켈레톤 2줄
신상품 영역:
- "신상품" 제목은 그대로 표시
- 12개 상품 카드 스켈레톤 (270×400px)
- 각 카드: 이미지 스켈레톤 (270×270px) + 텍스트 스켈레톤 4줄
스켈레톤 스타일:
- 배경: 연한 회색 #F0F0F0
- 모서리: 8px 둥글게
- 애니메이션: 좌→우 shimmer 효과
- 그라디언트: linear-gradient(90deg, #F0F0F0 25%, #E0E0E0 50%, #F0F0F0 75%)
- 애니메이션 속도: 1.5초 반복
- 키프레임: translateX(-100%) → translateX(100%)
모바일 Loading
모바일 홈 로딩 상태를 만들어줘
히어로 배너:
- 스켈레톤 박스 390×480px
- 라벨·제목 스켈레톤 중앙 정렬
- 이미지 스켈레톤 (320×320px)
- CTA 스켈레톤 (280×52px)
카테고리:
- 8개 카드 스켈레톤, 4열×2행
- 각 80×100px
신상품:
- 8개 상품 카드 스켈레톤, 2열 그리드
- 각 171×260px
동일한 shimmer 효과 적용
Empty 상태
신상품 없음
신상품 없음 상태를 만들어줘
신상품 섹션 영역 (1200px 너비):
- 헤더는 그대로 유지 ("신상품" 제목)
Empty 메시지 영역:
- 높이: 400px
- 배경: 연한 회색 #F8F8F8
- 모서리: 12px 둥글게
- 내용 중앙 정렬
내용:
- 아이콘: 빈 박스 일러스트 (120×120px, 회색)
- 메인 문구: 아이콘 하단 24px, "준비 중인 신상품이 없습니다" (18px, #333)
- 보조 문구: 메인 하단 12px, "곧 새로운 상품을 선보입니다" (14px, #999)
- CTA 버튼: 보조 문구 하단 32px, "전체 상품 보기" (160×48px, 파란색 배경)
모바일 신상품 Empty
모바일 신상품 없음 상태를 만들어줘
신상품 섹션 영역:
- 헤더 유지
Empty 영역:
- 높이: 320px
- 배경: #F8F8F8
- 모서리: 8px
내용 (중앙 정렬):
- 아이콘: 80×80px
- 메인 문구: "준비 중입니다" (16px)
- 보조 문구: "새로운 상품을 기다려주세요" (13px)
- CTA: "전체 상품 보기" (280×48px)
배너 없음 처리
히어로 배너가 없을 때 대체 화면을 만들어줘
기본 브랜드 배너:
- 크기: 1440×400px (데스크톱), 390×360px (모바일)
- 배경: 브랜드 메인 컬러 그라디언트
- 중앙 정렬 내용:
- 로고 (크게, 200×60px)
- 브랜드 슬로건: "당신의 스타일을 완성하세요" (24px)
- "상품 둘러보기" 버튼 (160×56px)
Error 상태
전체 섹션 Error
홈 화면 전체 에러 상태를 만들어줘
헤더와 푸터는 유지
에러 영역 (중앙 정렬):
- 높이: 600px
- 내용 세로 중앙 정렬
내용:
- 에러 아이콘: 느낌표 원형 (120×120px, 빨간색)
- 에러 메시지: 아이콘 하단 32px, "일시적인 오류가 발생했습니다" (24px, 굵게, #333)
- 안내 문구: 메시지 하단 16px, "잠시 후 다시 시도해 주세요" (16px, #666)
- 재시도 버튼: 안내 하단 40px, "새로고침" (160×56px, 파란색 배경)
- 고객센터 링크: 버튼 하단 24px, "문제가 계속되면 고객센터(1588-0000)로 문의하세요" (14px, #999)
섹션별 Error
신상품 섹션만 에러 상태를 만들어줘
신상품 영역 (1200px 너비):
- 헤더는 유지
에러 메시지 박스:
- 높이: 240px
- 배경: 연한 빨강 #FFF5F5
- 테두리: 1px 빨간색 #FFE0E0
- 모서리: 8px
내용 (중앙 정렬):
- 작은 에러 아이콘: 32×32px, 빨간색
- 메시지: "상품을 불러올 수 없습니다" (16px, #333)
- 재시도 버튼: "다시 시도" (120×40px, 테두리 스타일, 빨간색)
다른 섹션 (배너, 카테고리)은 정상 표시
모바일 Error
모바일 홈 에러 상태를 만들어줘
에러 영역:
- 높이: 400px
- 내용 중앙 정렬
내용:
- 에러 아이콘: 80×80px
- 에러 메시지: "오류가 발생했습니다" (18px)
- 안내 문구: "잠시 후 다시 시도해 주세요" (14px)
- 재시도 버튼: "새로고침" (280×52px)
- 고객센터 링크: "고객센터 문의" (13px)
NOTE 문서화
Figma 파일에서 각 섹션에 NOTE 컴포넌트를 추가한다.
배너 정책 NOTE
N.기능.홈배너.01
히어로 배너 정책
목적: 주요 프로모션 노출 및 클릭 유도
대상: 전체 방문자
운영: 최대 5개 슬라이드 (모바일 3개 권장)
자동 전환: 5초 간격, 순환 반복
측정: 배너별 클릭률, 슬라이드별 체류 시간
N.상태.홈배너.02
배너 상태 처리
배너 0개: 기본 브랜드 배너 표시
배너 1개: 슬라이드 없이 고정 표시
배너 2개 이상: 슬라이드 자동 전환
로딩: 스켈레톤 표시 (0.2초 이상 소요 시)
에러: 기본 브랜드 배너로 대체
N.데이터.홈배너.03
배너 이미지 스펙
Desktop: 1440×500px, WebP 우선/JPEG fallback, 최대 500KB
Mobile: 390×480px, WebP 우선/JPEG fallback, 최대 300KB
압축률: 85% 품질
alt 텍스트: 필수 (프로모션 설명 포함)
Lazy loading: 두 번째 슬라이드부터 적용
N.이벤트.홈배너.04
슬라이드 전환 규칙
자동 전환: 5초 간격, 좌→우 슬라이드 (300ms)
수동 전환:
- Desktop: 좌우 화살표 클릭, 인디케이터 클릭
- Mobile: 좌우 스와이프, 인디케이터 탭
일시정지: 마우스 호버(Desktop) 또는 터치 후 5초(Mobile)
재생: 호버 해제 또는 5초 경과 후 자동 재개
카피 길이 규칙 NOTE
N.데이터.홈텍스트.01
텍스트 길이 제약
히어로 배너:
- 라벨: 최대 10자
- 메인 제목: Desktop 최대 25자 (2줄), Mobile 최대 20자 (2줄)
- 부제목: Desktop 최대 35자 (2줄), Mobile 최대 25자 (2줄)
- CTA: 최대 10자
카테고리 카드:
- 카테고리명: 최대 8자 (1줄)
- 상품 수: "000개 상품" 형식
상품 카드:
- 브랜드명: 최대 15자 (1줄, 말줄임)
- 상품명: 최대 40자 (2줄, 말줄임)
초과 시: 자동 말줄임(...)
N.데이터.홈가격.02
가격 표시 규칙
정가: 1,000원 단위 콤마, "원" 단위 표시
할인가: 정가 좌측 배치, 굵게
할인율: 소수점 버림, "%" 표시, 빨간색
정가(할인 시): 취소선, 회색
무료 배송: 30,000원 이상 자동 표시
표시 우선순위: 할인가 > 할인율 > 정가
탭 전환 규칙 NOTE
N.이벤트.홈인터랙션.01
카테고리 카드 액션
Desktop:
- 호버: 배경 변경, 테두리 강조, 그림자 (0.2초)
- 클릭: 해당 카테고리 리스트 페이지로 이동
Mobile:
- 탭: 배경 변경 피드백 (0.1초)
- 탭 후 이동: 해당 카테고리 리스트로
최소 터치 영역: 44×44px
N.이벤트.홈상품.02
상품 카드 액션
Desktop:
- 호버: 오버레이 + "장바구니 담기" 버튼 페이드인 (0.3초)
- 이미지 클릭: 상품 상세 페이지로
- 장바구니 버튼 클릭: 장바구니 추가 후 토스트 "장바구니에 담았습니다"
Mobile:
- 카드 탭: 상품 상세 페이지로 즉시 이동
- 장바구니 버튼 없음 (상세에서 담기)
N.이벤트.홈스크롤.03
무한 스크롤 동작 (모바일)
트리거: 스크롤 위치가 하단 200px 이내
동작:
1. "더보기" 영역에 스피너 표시
2. API 호출 (다음 8개 상품 요청)
3. 성공: 기존 그리드에 상품 추가, 스크롤 위치 유지
4. 실패: 에러 토스트 "상품을 불러올 수 없습니다", 재시도 버튼
5. 마지막: "마지막 상품입니다" 텍스트 표시, 추가 로드 중단
최대 로드: 48개까지 (6회), 이후 "전체보기" 링크만
성능 정책 NOTE
N.데이터.홈성능.01
이미지 최적화
포맷: WebP 우선, JPEG/PNG fallback
압축: 85% 품질 유지
Lazy loading:
- 히어로 배너 첫 슬라이드: 즉시 로드
- 나머지 배너: Lazy load
- 카테고리 아이콘: 즉시 로드 (크기 작음)
- 신상품 이미지: Lazy load (Intersection Observer)
CDN: 모든 이미지 CDN 제공
Placeholder: 저해상도 blur 이미지 (LQIP) 사용
N.이벤트.홈분석.02
GA4 이벤트 태깅
배너 클릭:
- 이벤트명: banner_click
- 파라미터: banner_id, banner_title, banner_position
카테고리 클릭:
- 이벤트명: category_click
- 파라미터: category_id, category_name
상품 노출 (Impression):
- 이벤트명: view_item_list
- 파라미터: item_list_id="home_new", items 배열
상품 클릭:
- 이벤트명: select_item
- 파라미터: item_id, item_name, index
장바구니 담기:
- 이벤트명: add_to_cart
- 파라미터: item_id, item_name, price, quantity
컴포넌트화
Figma Make로 생성한 요소를 컴포넌트로 등록한다.
컴포넌트 등록 순서
히어로 배너
배너 슬라이드 1개 선택 → Create Component 이름: HomeBanner/Desktop/Default
Variants 추가:
HomeBanner/Desktop/Slide1_Spring
HomeBanner/Desktop/Slide2_Sale
HomeBanner/Desktop/Slide3_Member
HomeBanner/Mobile/Slide1
HomeBanner/Mobile/Slide2
HomeBanner/Mobile/Slide3
카테고리 카드
카테고리 카드 1개 선택 → Create Component 이름: CategoryCard/Desktop/Default
Variants 추가:
CategoryCard/Desktop/Hover
CategoryCard/Mobile/Default
각 카테고리별 인스턴스:
아이콘과 텍스트만 Override
8개 카테고리 전부 생성
상품 카드
상품 카드 선택 → Create Component 이름: ProductCard/Desktop/Default
Variants 추가:
ProductCard/Desktop/Hover
ProductCard/Desktop/Soldout
ProductCard/Mobile/Default
Boolean Properties:
hasDiscount (할인 여부)
isNew (신상품 배지)
isSoldout (품절)
90_Spec_Components 페이지 정리
Section: Home Components
━━━━━━━━━━━━━━━━━━━━━━━━━━━
Subsection: Hero Banner
├─ HomeBanner/Desktop/Slide1_Spring
├─ HomeBanner/Desktop/Slide2_Sale
├─ HomeBanner/Desktop/Slide3_Member
├─ HomeBanner/Mobile/Slide1
├─ HomeBanner/Mobile/Slide2
└─ HomeBanner/Mobile/Slide3
Subsection: Category
├─ CategoryCard/Desktop/Default
├─ CategoryCard/Desktop/Hover
└─ CategoryCard/Mobile/Default
Subsection: Product
├─ ProductCard/Desktop/Default
├─ ProductCard/Desktop/Hover
├─ ProductCard/Desktop/Soldout
└─ ProductCard/Mobile/Default
Subsection: States
├─ Home/Loading/Desktop
├─ Home/Loading/Mobile
├─ Home/Empty_Product/Desktop
├─ Home/Empty_Product/Mobile
├─ Home/Error/Desktop
└─ Home/Error/Mobile
Figma Make 프로토타입 설정
Figma Make는 프로토타입 인터랙션까지 지원한다. 다음 프롬프트로 동작을 추가한다.
배너 슬라이드 프로토타입
히어로 배너에 슬라이드 프로토타입을 추가해 줘
슬라이드 3개 프레임을 같은 위치에 겹쳐 배치
프로토타입 연결:
1. Slide1 → Slide2
- Trigger: After delay (5초)
- Action: Navigate to
- Animation: Slide from right (300ms, Ease out)
2. Slide2 → Slide3
- Trigger: After delay (5초)
- Action: Navigate to
- Animation: Slide from right (300ms, Ease out)
3. Slide3 → Slide1
- Trigger: After delay (5초)
- Action: Navigate to
- Animation: Slide from right (300ms, Ease out)
화살표 버튼 연결:
- 우측 화살표: 다음 슬라이드로 (즉시)
- 좌측 화살표: 이전 슬라이드로 (즉시)
인디케이터 점 연결:
- 각 점 클릭 시 해당 슬라이드로 (즉시)
카테고리 호버 프로토타입
카테고리 카드에 호버 효과를 추가해줘
Desktop 카드:
1. Default 상태 복제 → Hover 상태로
2. Hover 상태 수정:
- 배경: #F8F8F8
- 테두리: 2px 파란색
- 그림자: 0 4px 12px rgba(0,0,0,0.08)
프로토타입 연결:
- Default → Hover
- Trigger: Mouse enter
- Animation: Smart animate (200ms)
- Hover → Default
- Trigger: Mouse leave
- Animation: Smart animate (200ms)
클릭 동작:
- Hover 상태에서 클릭
- Action: Open URL (카테고리 리스트 페이지로)
상품 카드 호버 프로토타입
상품 카드에 호버 인터랙션을 추가해줘
Desktop 카드:
1. Default 상태 복제 → Hover 상태로
2. Hover 상태 수정:
- 이미지 위에 검정 오버레이 (opacity 0.3)
- "장바구니 담기" 버튼 표시 (중앙)
프로토타입 연결:
- Default → Hover
- Trigger: Mouse enter
- Animation: Dissolve (300ms)
- Hover → Default
- Trigger: Mouse leave
- Animation: Dissolve (300ms)
버튼 클릭:
- "장바구니 담기" 버튼
- Trigger: On click
- Action: Open overlay (토스트 메시지)
- Overlay: "장바구니에 담았습니다" (하단 고정, 3초 후 자동 닫기)
무한 스크롤 프로토타입
모바일 신상품에 무한 스크롤을 시뮬레이션해 줘
초기 프레임: 8개 상품 + "더보기" 영역
두 번째 프레임: 16개 상품 + "더보기" 영역
세 번째 프레임: 24개 상품 + "마지막 상품입니다"
프로토타입 연결:
1. 초기 → 두 번째
- Trigger: 스크롤 위치 하단 (수동 트리거로 시뮬레이션)
- Animation: Instant (스크롤 위치 유지)
- 더보기 영역에 로딩 스피너 1초 표시
2. 두 번째 → 세 번째
- 동일한 방식
체크리스트
홈 화면 설계 완료 후 점검 항목
디자인 검증
일관성
[ ] 폰트 크기가 디자인 시스템과 일치
[ ] 색상이 브랜드 가이드 준수
[ ] 간격이 8px 그리드 기준
[ ] 버튼 스타일이 전체적으로 통일
접근성
[ ] 텍스트와 배경 대비 4.5:1 이상
[ ] 모든 이미지에 alt 텍스트
[ ] 터치 영역 최소 44×44px (모바일)
[ ] 포커스 상태 명확
성능
[ ] 이미지가 WebP 포맷
[ ] 배너 이미지 500KB 이하
[ ] Lazy loading 적용
[ ] 애니메이션 60fps 작동
콘텐츠 검증
텍스트
[ ] 배너 제목 길이 규칙 준수
[ ] 상품명 2줄 이내
[ ] 버튼 텍스트 명확 (동사형)
[ ] 오타 및 띄어쓰기 검토
이미지
[ ] Placeholder를 실제 이미지로 교체
[ ] 이미지 비율 일관성
[ ] 상품 이미지 고해상도
[ ] 배너 텍스트 가독성
인터랙션 검증
클릭/터치
[ ] 모든 버튼 클릭 가능
[ ] 카테고리 카드 전체 영역 클릭
[ ] 상품 카드 클릭 시 상세로 이동
[ ] 배너 슬라이드 자동 전환
호버/포커스
[ ] Desktop 호버 효과 명확
[ ] 포커스 순서 논리적
[ ] 키보드 탐색 가능
상태 검증
4가지 상태
[ ] Idle: 정상 화면 완성
[ ] Loading: 스켈레톤 표시
[ ] Empty: 빈 상태 안내 명확
[ ] Error: 에러 메시지와 재시도
엣지케이스
[ ] 카테고리 8개 미만 처리
[ ] 신상품 4개 미만 처리
[ ] 배너 1개 또는 0개 처리
[ ] 긴 상품명 말줄임
프로토타입 검증
Figma Make 동작
[ ] 배너 슬라이드 자동 전환 (5초)
[ ] 화살표 버튼으로 수동 전환
[ ] 인디케이터 클릭 동작
[ ] 카테고리 호버 효과 (Desktop)
[ ] 상품 호버 시 장바구니 버튼 (Desktop)
[ ] 모바일 무한 스크롤 시뮬레이션
홈 화면의 NOTE는 90_Spec_Components 페이지에 통합한다. 각 섹션별 상태와 정책은 개발팀 전달 전 리뷰를 거쳐 확정한다.
Figma Make로 생성한 프로토타입은 실제 동작을 시뮬레이션하므로, 이해관계자에게 공유할 때 별도 설명 없이 직접 조작하게 한다. 클릭·호버·스크롤 동작을 직접 경험하면 피드백 품질이 높아진다.
지금까지 작성한 메인 프로토타입 링크를 참조한다. Desktop 기준이며, 모바일은 직접 시도해 보길 권장한다.
https://ide-python-61918998.figma.site/
