# BeautyLabel 소비자 앱 - 디자인 컨셉 > K-Beauty 역직구 플랫폼 | 타겟: 중국 🇨🇳 · 일본 🇯🇵 · 미국 🇺🇸 --- ## 1. 디자인 철학 ### 핵심 가치: "Clean Science Beauty" - **신뢰(Trust)**: EWG 성분 안전등급을 전면에 배치하여 "성분으로 증명하는 뷰티" - **발견(Discovery)**: AI 기반 피부 매칭으로 개인화된 쇼핑 경험 - **글로벌(Global)**: 문화권별 최적화된 UX (중국 고밀도 / 일본 정교함 / 미국 미니멀) ### 디자인 포지셔닝 ``` 고급스러움 ↑ ┌─────────────┼─────────────┐ │ Amore │ BeautyLabel│ ← 목표 포지션 │ Pacific │ 🎯 │ 정보중심 ←─────────┼─────────────→ 감성중심 │ Hwahae │ Olive Young│ │ 화해 │ 올영글로벌 │ └─────────────┼─────────────┘ ↓ 캐주얼 ``` **BeautyLabel = 화해의 성분 투명성 + 올리브영의 쇼핑 경험 + 프리미엄 브랜딩** --- ## 2. 컬러 시스템 > ⚠️ **컬러 토큰 통일 원칙**: Admin / Seller / Consumer 전 포탈에서 동일 의미의 색상은 **하나의 HEX 값**을 사용합니다. > EWG 등급, 브랜드 티어, Semantic 색상은 플랫폼 간 차이 없이 통일하여 사용자 혼동을 방지합니다. ### 2.1 Primary Palette | 역할 | 컬러 | HEX | 용도 | Admin | Seller | Consumer | |------|------|-----|------|-------|--------|----------| | **Brand Primary** | Hermès Orange | `#FF6B00` | 로고, CTA 버튼, 활성 상태 | `#1F4E79` | `#2563EB` | `#FF6B00` | | **Brand Secondary** | Burnt Orange | `#E85D04` | 포인트 액션, 세일/할인, 구매 CTA | — | — | `#E85D04` | | **Brand Gradient** | Orange→DeepOrange | `#FF6B00 → #E85D04` | 로고, 강조 배너, 센터 버튼 | — | — | gradient | | **Background** | Pure White | `#FFFFFF` | 카드, 콘텐츠 영역 | 공통 | 공통 | 공통 | | **Surface** | Warm Gray | `#FAFBFC` | 페이지 배경 | 공통 | 공통 | 공통 | | **Text Primary** | Charcoal | `#111827` | 제목, 본문 | 공통 | 공통 | 공통 | | **Text Secondary** | Cool Gray | `#6B7280` | 부가 정보, 캡션 | 공통 | 공통 | 공통 | > 💡 Brand Primary는 각 포탈의 성격에 맞게 유일하게 차별화를 허용합니다. 나머지 토큰은 전체 통일. > 🎨 Consumer 앱 브랜드 컬러는 **에르메스 오렌지(#FF6B00) + 번트 오렌지(#E85D04)** 그라데이션 조합. > 중국 시장에서 유행 중인 아이폰 에르메스 오렌지 컬러를 반영하여 프리미엄 럭셔리 감성을 강화합니다. ### 2.2 EWG Safety Colors — 통일 토큰 (핵심 차별점) | 등급 | 컬러 | HEX (통일) | 배경 HEX (통일) | WCAG 대비 | |------|------|-----------|----------------|-----------| | **Safe (1-2)** | Emerald | `#059669` | `#ECFDF5` | 4.6:1 ✅ AA | | **Caution (3-6)** | Amber | `#D97706` | `#FFFBEB` | 4.5:1 ✅ AA | | **Danger (7-10)** | Red | `#DC2626` | `#FEF2F2` | 5.6:1 ✅ AA | > 🔒 EWG 색상은 **제품 안전성 신뢰 지표**이므로, Admin/Seller/Consumer 전 포탈에서 반드시 동일 HEX를 사용합니다. > 이전 문서에서 Admin/Seller(`#10B981`)와 Consumer(`#059669`)가 달랐던 부분을 `#059669`로 통일합니다. > Danger도 `#EF4444` vs `#DC2626` 차이를 `#DC2626`으로 통일합니다. ### 2.3 Brand Tier Colors — 통일 토큰 | 티어 | 컬러 | HEX (통일) | Border HEX | 사용 | |------|------|-----------|------------|------| | **MEGA** | Deep Rose | `#BE185D` | `#FCE7F3` | 대형 브랜드 태그 | | **DERMA** | Medical Blue | `#2563EB` | `#DBEAFE` | 더마 브랜드 태그 | | **INDIE** | Fresh Green | `#059669` | `#D1FAE5` | 인디 브랜드 태그 | > ⚠️ **변경사항**: MEGA 티어 색상을 기존 `#DC2626`(빨강)에서 `#BE185D`(딥로즈)로 변경. > 이유: EWG Danger(`#DC2626`)와 색상 충돌 → 대형 브랜드가 "위험"으로 오인되는 문제 해소. > DERMA와 Brand Primary(`#1A56DB`)의 유사성은 유지하되, DERMA는 `#2563EB`(더 밝은 블루)로 구분. ### 2.4 Semantic Colors — 통일 토큰 | 역할 | 컬러 | HEX (통일) | 사용 | |------|------|-----------|------| | Success | Green | `#059669` | 완료, 성공 상태 | | Warning | Amber | `#D97706` | 주의, 경고 | | Error | Red | `#DC2626` | 오류, 삭제 | | Info | Blue | `#3B82F6` | 안내, 정보 | | Star Rating | Gold | `#FBBF24` | 별점, 리뷰 | > 💡 Semantic 색상은 EWG Safety 색상과 의도적으로 동기화합니다 (Safe=Success, Caution=Warning, Danger=Error). > Star Rating은 전 포탈 `#FBBF24` 통일 (이전 Seller `#F59E0B` → `#FBBF24`로 변경). --- ## 3. 타이포그래피 ### 3.1 Font Stack (다국어 대응) ```css /* Primary Font Stack */ font-family: 'Pretendard', 'Noto Sans SC', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* 한국어: Pretendard (가독성 최적) */ /* 중국어: Noto Sans SC (간체) */ /* 일본어: Noto Sans JP */ /* 영어/기타: System fonts fallback */ ``` ### 3.2 Type Scale | 용도 | 크기 | 무게 | Line Height | 사용처 | |------|------|------|-------------|--------| | Hero Title | 28px | 800 | 1.3 | 메인 배너 텍스트 | | Page Title | 22px | 700 | 1.4 | 화면 제목 | | Section Title | 18px | 600 | 1.4 | 섹션 헤더 | | Card Title | 15px | 600 | 1.4 | 상품명, 카드 제목 | | Body | 14px | 400 | 1.6 | 본문, 설명 | | Caption | 12px | 400 | 1.5 | 캡션, 부가정보 | | Badge | 11px | 600 | 1.0 | 배지 텍스트 | | Price | 18px | 700 | 1.2 | 가격 표시 | | Discount Price | 14px | 400 | 1.2 | 원래 가격 (취소선) | ### 3.3 CJK 대응 규칙 - 중국어/일본어: `line-height: 1.7~1.8` (라틴 대비 0.2~0.3 증가) - CJK 볼드: `font-weight: 700` 사용 (600은 렌더링 차이 발생) - 텍스트 영역: 한글 기준 설계 후 CJK/EN 텍스트 확장/축소 테스트 --- ## 4. 컴포넌트 시스템 ### 4.0 카드 스타일 가이드 — Border + Pastel Background 디자인 원칙 > 🎨 **핵심 원칙**: 모든 카드형 블록은 **`border` 컬러**로 영역을 구분하고, > 의미 있는 카드(브랜드 티어, EWG, CTA 등)에는 **파스텔 톤 배경색**을 함께 적용하여 > 시각적 계층과 브랜드 아이덴티티를 강화합니다. **디자인 원칙:** - 일반 카드: 순백 배경(`#FFFFFF`) + 기본 border - 의미 카드(MEGA/DERMA/INDIE/EWG/CTA): **파스텔 톤 배경** + 컬러 border → 부드럽고 고급스러운 인상 - 버튼/칩/배지: 파스텔 배경 + 진한 텍스트 조합으로 가독성 확보 - 파스텔 톤은 채도 10~15%, 명도 95~98% 범위의 매우 연한 색상 **파스텔 톤 배경색 팔레트:** | 용도 | 배경 HEX | Border HEX | 텍스트 HEX | 사용처 | |------|----------|------------|-----------|--------| | **MEGA** | `#FDF2F8` | `#FCE7F3` | `#BE185D` | MEGA 카드, 태그 | | **DERMA** | `#EFF6FF` | `#DBEAFE` | `#2563EB` | DERMA 카드, 태그 | | **INDIE** | `#ECFDF5` | `#D1FAE5` | `#059669` | INDIE 카드, 태그 | | **EWG Safe** | `#ECFDF5` | `#D1FAE5` | `#059669` | Safe 인증 강조 | | **EWG Caution** | `#FFFBEB` | `#FEF3C7` | `#D97706` | Caution 주의 | | **EWG Danger / 프로모** | `#FEF2F2` | `#FEE2E2` | `#DC2626` | 타임딜, 세일 | | **Primary CTA** | `#FFF7F0` | `#FF6B00` | `#FF6B00` | Skin Match, 구매 CTA 등 | | **Secondary CTA** | `#FFF1E6` | `#E85D04` | `#E85D04` | 세일, 할인, 구매하기 등 | | **일반** | `#FFFFFF` | `#E5E7EB` | `#111827` | 기본 카드 | **카드 공통 스펙:** ```css /* ✅ DO: Border + Pastel Background */ .card { background: #FFFFFF; /* 기본 카드 - 순백 */ border: 1px solid #E5E7EB; /* 기본 테두리 */ border-radius: 16px; padding: 16px; transition: border-color 0.15s ease, background-color 0.15s ease; } /* 의미 카드 — MEGA 예시 */ .card-mega { background: #FDF2F8; /* 파스텔 핑크 배경 */ border: 1.5px solid #FCE7F3; /* 파스텔 핑크 border */ } .card-mega:hover { border-color: #BE185D; /* 강조 border */ } /* 버튼 — 파스텔 스타일 */ .btn-pastel { background: #FFF7F0; /* 파스텔 오렌지 배경 */ border: 1px solid #FED7AA; color: #FF6B00; /* 진한 텍스트 */ font-weight: 600; } /* 구매 CTA — Burnt Orange */ .btn-buy-cta { background: #E85D04; border: none; color: white; font-weight: 700; } /* ❌ DON'T */ .card-wrong { background: #BE185D; /* 진한 단색 배경 금지 */ box-shadow: 0 4px 20px rgba(...); /* 과도한 그림자 금지 */ } ``` **그림자 사용 규칙:** - 기본 상태: 그림자 없음 (border + 파스텔 배경으로 영역 구분) - 플로팅 요소(Bottom Nav, 모달): `box-shadow: 0 -1px 0 #E5E7EB` (단일 라인 그림자) - 이미지 오버레이 배지: `backdrop-filter: blur(8px)` 유지 허용 ### 4.1 Bottom Navigation (5-Tab — 브랜드 티어 허브) ``` ┌──────┬──────┬──────┬──────┬──────┐ │ 🏠 │ 👑 │ 🌿 │ 🏥 │ 👤 │ │ 홈 │메이저│ 인디 │ 더마 │마이 │ │ │MAJOR │INDIE │DERMA │페이지│ └──────┴──────┴──────┴──────┴──────┘ ``` - 높이: 56px (iOS Safe Area 포함 시 80px+) - 활성: Brand Primary (`#FF6B00`) + 라벨 bold - 비활성: `#9CA3AF` (회색) - **홈**: 전체 피드 & 추천 허브 (Brand Gradient 강조) - **메이저**: MEGA 브랜드 전용관 (색상: `#BE185D`) - **인디**: INDIE 브랜드 발견 (색상: `#059669`) - **더마**: DERMA 피부과 추천 (색상: `#2563EB`) - **마이페이지**: 개인 정보, 주문, 스킨매치 결과 > 💡 이미지 2 레퍼런스(KOC 숏폼 커머스)의 하단 네비 구조를 반영합니다. > 각 탭이 브랜드 티어 허브 역할을 하여, 3-Way Gateway와 하단 네비가 동일한 IA(정보 구조)를 형성합니다. ### 4.2 Product Card ``` ┌─────────────────────────┐ │ ┌─────────────────────┐ │ │ │ │ │ │ │ Product Image │ │ ← 1:1 비율, 라운드 12px │ │ (1:1 ratio) │ │ │ │ [EWG🛡] [DERMA] │ │ ← 배지 오버레이 (좌하단) │ │ [♡] │ │ ← 위시리스트 (우상단) │ └─────────────────────┘ │ │ COSRX │ ← 브랜드명 (12px, Gray) │ 수분 세럼 50ml │ ← 상품명 (14px, Bold, 2줄 말줄임) │ ★★★★☆ 4.2 (1,234) │ ← 별점 + 리뷰수 │ ¥198 ¥258 -23% │ ← 판매가, 원가(취소선), 할인율(코랄) │ [장바구니 담기] │ ← 미니 CTA (옵션) └─────────────────────────┘ ``` **카드 스펙:** - 너비: 2열 그리드 (`(화면폭 - 패딩 - 갭) / 2`) - 패딩: 내부 12px - 간격: 12px (카드 간) - 라운드: 12px - 그림자: `0 1px 3px rgba(0,0,0,0.06)` - 이미지 비율: 1:1 ### 4.3 EWG Safety Badge (핵심 UI) ``` 3가지 사이즈: [Large - 상품 상세 페이지] ┌──────────────────────────┐ │ 🛡 EWG ██░░░░░░░░ 1 │ ← 게이지 바 포함 │ Safe 최고 안전등급 │ └──────────────────────────┘ [Medium - 상품 카드] ┌─────────────┐ │ 🛡 EWG 1 │ ← 아이콘 + 등급 숫자 │ Safe │ └─────────────┘ [Small - 리스트, 인라인] 🟢 EWG 1 ← 컬러 도트 + 텍스트 ``` **배지 스타일:** ```css .ewg-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; backdrop-filter: blur(8px); } .ewg-badge.safe { background: rgba(5,150,105,0.15); color: #059669; } ``` ### 4.4 Skin Match Score ``` 상품 상세 페이지 상단: ┌──────────────────────────────────┐ │ 🧬 당신의 피부와 92% 매칭! │ │ ████████████████████░░░░ │ │ 건성 · 민감성 · 30대 피부에 추천 │ └──────────────────────────────────┘ ``` ### 4.5 Buttons ```css /* Primary CTA — Brand Gradient */ .btn-primary { background: linear-gradient(135deg, #FF6B00, #E85D04); color: white; padding: 14px 24px; border-radius: 12px; font-weight: 600; font-size: 16px; } /* Secondary */ .btn-secondary { background: white; color: #FF6B00; border: 1.5px solid #FF6B00; padding: 14px 24px; border-radius: 12px; } /* Cart / Buy Now (풀 너비 하단 고정) */ .btn-cart { flex: 1; background: white; color: #FF6B00; border: 1.5px solid #FF6B00; } .btn-buy { flex: 1; background: linear-gradient(135deg, #FF6B00, #E85D04); color: white; } /* 하단 고정 바 */ .bottom-action-bar { position: fixed; bottom: 0; padding: 12px 16px; background: white; border-top: 1px solid #E5E7EB; display: flex; gap: 12px; /* iOS Safe Area */ padding-bottom: calc(12px + env(safe-area-inset-bottom)); } ``` ### 4.6 Search Bar ``` ┌──────────────────────────────────┐ │ 🔍 성분이나 상품을 검색하세요 │ │ [🎤] │ └──────────────────────────────────┘ ``` - 라운드: 24px (pill shape) - 배경: `#F3F4F6` - 높이: 44px - 안쪽 패딩: 0 16px 0 44px --- ## 5. 페이지별 레이아웃 ### 5.1 홈 화면 (Bento Grid) ``` ┌─────────────────────────────────────┐ │ [검색바] [🔔][≡] │ ├─────────────────────────────────────┤ │ ┌─────────────────┬───────────────┐ │ │ │ │ FLASH SALE │ │ │ │ Hero Banner │ ⏰ 02:34:12 │ │ │ │ / 캐러셀 │ 최대 50% │ │ │ │ │ │ │ │ ├────────┬────────┴───────────────┤ │ │ │ Skin │ EWG Safe 인증 │ │ │ │ Match │ 추천 상품 🛡 │ │ │ │ AI 추천│ │ │ │ ├────────┴────────────────────────┤ │ │ │ 🔥 인기 브랜드 (가로 스크롤) │ │ │ │ [COSRX] [Dr.Jart] [Innisfree] │ │ │ ├─────────────────────────────────┤ │ │ │ ✨ 신상품 (2열 카드 그리드) │ │ │ │ ┌──────┐ ┌──────┐ │ │ │ │ │Card 1│ │Card 2│ ... │ │ │ │ └──────┘ └──────┘ │ │ │ ├─────────────────────────────────┤ │ │ │ 💊 성분별 쇼핑 │ │ │ │ [히알루론산] [나이아신아마이드] │ │ │ │ [레티놀] [비타민C] [세라마이드] │ │ │ ├─────────────────────────────────┤ │ │ │ 📦 베스트셀러 TOP 10 │ │ │ │ (가로 스크롤 카드) │ │ │ └─────────────────────────────────┘ │ │ │ │ [🏠홈] [👑메이저] [🌿인디] [🏥더마] [👤마이] │ └─────────────────────────────────────┘ ``` ### 5.2 상품 상세 페이지 ``` ┌─────────────────────────────────────┐ │ [←] [🔗] [♡] │ ├─────────────────────────────────────┤ │ ┌─────────────────────────────────┐ │ │ │ │ │ │ │ Full-bleed Product Image │ │ │ │ (Swipe Gallery) │ │ │ │ │ │ │ │ [🛡EWG Safe] [DERMA] │ │ │ │ ● ○ ○ ○ ○ │ │ │ └─────────────────────────────────┘ │ │ │ │ COSRX │ │ Advanced Snail 96 Mucin Power │ │ Essence 100ml │ │ ★★★★☆ 4.7 (2,345 리뷰) │ │ │ │ ¥198 ¥258 -23% │ │ (배송비 ¥15 · 무료배송 ¥200 이상) │ │ │ │ ┌─────────────────────────────────┐ │ │ │ 🧬 Skin Match: 94% 일치! │ │ │ │ 건성 + 민감성 피부에 강력 추천 │ │ │ └─────────────────────────────────┘ │ │ │ │ ┌──────┬──────┬──────┬──────┐ │ │ │ 상세 │ 성분 │ 사용법│ 리뷰 │ │ │ └──────┴──────┴──────┴──────┘ │ │ │ │ [성분 탭 활성 시] │ │ ┌─────────────────────────────────┐ │ │ │ 전성분 (12개) │ │ │ │ │ │ │ │ 🟢 1 Water (정제수) │ │ │ │ 🟢 1 Snail Secretion Filtrate │ │ │ │ 🟢 2 Betaine │ │ │ │ 🟡 4 Sodium Hyaluronate │ │ │ │ 🟢 1 Panthenol │ │ │ │ ...더보기 │ │ │ └─────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────┐ │ │ │ [장바구니 담기] [바로 구매] │ │ │ └─────────────────────────────────┘ │ └─────────────────────────────────────┘ ``` ### 5.3 카테고리/검색 결과 ``` ┌─────────────────────────────────────┐ │ [←] 스킨케어 [필터] │ ├─────────────────────────────────────┤ │ 1,234개 상품 │ │ [EWG Safe만] [무료배송] [할인중] │ ← 퀵필터 칩 │ │ │ 정렬: 추천순 ▾ │ │ │ │ ┌──────────┐ ┌──────────┐ │ │ │ Product │ │ Product │ │ │ │ Card 1 │ │ Card 2 │ │ │ │ │ │ │ │ │ └──────────┘ └──────────┘ │ │ ┌──────────┐ ┌──────────┐ │ │ │ Product │ │ Product │ │ │ │ Card 3 │ │ Card 4 │ │ │ │ │ │ │ │ │ └──────────┘ └──────────┘ │ │ ... 무한 스크롤 ... │ │ │ │ [🏠홈] [👑메이저] [🌿인디] [🏥더마] [👤마이] │ └─────────────────────────────────────┘ ``` ### 5.4 장바구니 & 결제 ``` 장바구니: ┌─────────────────────────────────────┐ │ [←] 장바구니 (3) │ ├─────────────────────────────────────┤ │ ┌─────────────────────────────────┐ │ │ │ [✓] [img] COSRX 세럼 50ml × 2 │ │ │ │ ¥396 [-][2][+] │ │ │ ├─────────────────────────────────┤ │ │ │ [✓] [img] 진정 크림 30ml × 1 │ │ │ │ ¥158 [-][1][+] │ │ │ └─────────────────────────────────┘ │ │ │ │ 💡 ¥46 더 담으면 무료배송! │ ← 프로그레스 바 │ [═══════════════════░░░░░] │ │ │ │ ┌─────────────────────────────────┐ │ │ │ 상품 금액 ¥554 │ │ │ │ 배송비 ¥15 │ │ │ │ 예상 관세 ¥0 (면세) │ │ │ │───────────────────────── │ │ │ │ 합계 ¥569 │ │ │ │ (약 ₩108,110 · $7.89) │ │ ← 환율 참고 표시 │ └─────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────┐ │ │ │ [¥569 결제하기] │ │ │ └─────────────────────────────────┘ │ └─────────────────────────────────────┘ ``` ### 5.5 Skin Match (스킨 매칭) - 차별화 기능 ``` 퀴즈 온보딩 (3~5단계): ┌─────────────────────────────────────┐ │ Skip → │ │ │ │ ● ● ○ ○ ○ (Step 2/5) │ │ │ │ │ │ 💧 당신의 피부 타입은? │ │ │ │ ┌─────────────┐ ┌─────────────┐ │ │ │ 🏜 건성 │ │ 💧 지성 │ │ │ │ │ │ │ │ │ └─────────────┘ └─────────────┘ │ │ ┌─────────────┐ ┌─────────────┐ │ │ │ ☯ 복합성 │ │ 🌿 민감성 │ │ │ │ ✓ 선택 │ │ │ │ │ └─────────────┘ └─────────────┘ │ │ │ │ │ │ [다음 →] │ │ │ └─────────────────────────────────────┘ 매칭 결과 화면: ┌─────────────────────────────────────┐ │ [←] 나의 Skin Match │ ├─────────────────────────────────────┤ │ │ │ ┌─────────────────────────────┐ │ │ │ 👤 Greg님의 피부 프로필 │ │ │ │ │ │ │ │ 타입: 복합성 · 민감성 │ │ │ │ 고민: 보습, 진정 │ │ │ │ 주의: 알코올, 향료 │ │ │ │ │ │ │ │ [프로필 수정] │ │ │ └─────────────────────────────┘ │ │ │ │ 🧴 맞춤 추천 상품 (24) │ │ │ │ ┌──────────┐ ┌──────────┐ │ │ │ 94% Match│ │ 91% Match│ │ │ │ Product │ │ Product │ │ │ │ Card │ │ Card │ │ │ └──────────┘ └──────────┘ │ │ ... 무한 스크롤 ... │ │ │ │ [🏠홈] [👑메이저] [🌿인디] [🏥더마] [👤마이] │ └─────────────────────────────────────┘ ``` ### 5.6 KOC 숏폼 커머스 (전체 화면) > 📱 TikTok/Reels 스타일의 전체 화면 숏폼 비디오 커머스. 이미지 2 레퍼런스 반영. ``` ┌─────────────────────────────────────┐ │ [←] [···] │ ← 투명 헤더 │ │ │ │ │ ┌─────────────────────────┐ │ │ │ │ │ │ │ FULL-SCREEN │ │ │ │ SHORT-FORM VIDEO │ [♡] │ ← 좋아요 │ │ (9:16 ratio) │ [💬]│ ← 댓글 │ │ │ [↗] │ ← 공유 │ │ @koc_username │ [🔖]│ ← 저장 │ │ "꿀피부 비법 공개 🔥" │ │ │ │ │ │ │ └─────────────────────────┘ │ │ │ │ ┌─────────────────────────────────┐ │ ← 하단 상품 카드 오버레이 │ │ [img] COSRX 세럼 50ml │ │ │ │ ★4.9 · EWG 🛡1 Safe │ │ │ │ ¥168 ¥198 -15% │ │ │ │ [구매하기] │ │ ← Hot Pink CTA (#EC4899) │ └─────────────────────────────────┘ │ │ │ │ [🏠홈] [👑메이저] [🌿인디] [🏥더마] [👤마이] │ └─────────────────────────────────────┘ ``` **KOC 숏폼 커머스 핵심 요소:** - **전체 화면 비디오**: 9:16 비율, 세로 스와이프로 다음 영상 - **KOC 프로필**: 프로필 이미지 + 이름 + 팔로우 버튼 - **인터랙션 사이드바**: 좋아요 ♡, 댓글 💬, 공유 ↗, 저장 🔖 (세로 정렬) - **상품 카드 오버레이**: 하단 고정, 상품 이미지 + 정보 + 구매 CTA - **구매하기 버튼**: Burnt Orange(`#E85D04`) 배경, 원터치 구매 유도 - **EWG 배지**: 상품 카드 내 EWG 등급 표시 (신뢰 요소) - **브랜드 티어 태그**: MEGA/INDIE/DERMA 배지 오버레이 **숏폼 진입 경로:** 1. 홈 화면 "KOC Shorts" 섹션 → 썸네일 탭 → 전체 화면 진입 2. 상품 상세 페이지 → 관련 숏폼 영상 탭 3. 검색 결과 → 숏폼 탭 필터 --- ## 6. 인터랙션 & 모션 ### 6.1 전환 (Transitions) - 페이지 전환: 슬라이드 (좌→우 진입, 우→좌 복귀) 300ms ease - 모달: 바텀 시트 슬라이드업 250ms ease-out - 탭 전환: 페이드 + 슬라이드 200ms - 카드 터치: `transform: scale(0.98)` 100ms ### 6.2 스크롤 패턴 - 상품 목록: 무한 스크롤 + 스켈레톤 로딩 - 홈 섹션: 가로 스크롤 (스냅) - 상품 상세: 당겨서 이미지 확대 (Pull-to-zoom) - 하단 시트: 드래그로 높이 조절 ### 6.3 피드백 - 장바구니 추가: 이미지가 카트 아이콘으로 날아가는 애니메이션 - 위시리스트: 하트 팝 애니메이션 (작아졌다 커지며 빨간색 전환) - 당겨서 새로고침: 커스텀 로딩 인디케이터 --- ## 7. 문화권별 UX 조정 ### 7.1 중국 🇨🇳 - **레이아웃**: 고밀도, 정보 중심 (빈 공간 최소화) - **컬러**: 프로모션 배너에 레드 톤 적극 사용 (행운, 긍정) - **소셜 프루프**: 판매량, 리뷰 수 대형 표시 - **결제**: Alipay, WeChat Pay 메인 (원클릭) - **고객 지원**: 실시간 인앱 채팅 필수 - **타임세일/플래시 세일**: 카운트다운 타이머 필수 ### 7.2 일본 🇯🇵 - **레이아웃**: 정교하고 세밀한 정보 구조 - **컬러**: 차분하고 세련된 파스텔 톤 선호 - **필터링**: 매우 상세한 필터 옵션 기대 - **결제**: 신용카드 + 편의점 결제(コンビニ) + PayPay - **리뷰**: 상세하고 긴 리뷰 선호, 순위 시스템 중시 - **배송**: 정확한 배송일 표시 필수 ### 7.3 미국 🇺🇸 - **레이아웃**: 클린, 미니멀, 여백 활용 - **컬러**: 브랜드 일관성 유지, 중립적 - **소셜 프루프**: 별점 + 큐레이션된 리뷰 - **결제**: Credit Card + PayPal + Apple Pay - **배송**: 배송 기간 범위 표시 (7-14 business days) - **관세**: 관세 예상 금액 명확 표시 --- ## 8. 반응형 브레이크포인트 | 기기 | 너비 | 레이아웃 | |------|------|----------| | 모바일 (기본) | ~480px | 1열 또는 2열 카드 그리드 | | 태블릿 | 481~768px | 3열 카드 그리드, 사이드 필터 | | 데스크톱 | 769~1200px | 4열 카드, 고정 사이드바 필터 | | 와이드 | 1201px+ | 5열 카드, max-width 1400px | **주요 설계 원칙: Mobile First** - 모든 화면은 모바일(375px)부터 설계 - 목업은 **iPhone 14 Pro (393 × 852px)** 기준 --- ## 9. 화면 목록 (제작 예정) | # | 화면 ID | 파일명 | 설명 | 우선순위 | |---|---------|--------|------|----------| | 1 | CON-HOME-001 | Consumer_Home.html | 홈 (벤토 그리드) | P1 | | 2 | CON-PROD-001 | Consumer_Product_List.html | 상품 목록/카테고리 | P1 | | 3 | CON-PROD-002 | Consumer_Product_Detail.html | 상품 상세 | P1 | | 4 | CON-CART-001 | Consumer_Cart.html | 장바구니 | P1 | | 5 | CON-CHKT-001 | Consumer_Checkout.html | 주문/결제 | P1 | | 6 | CON-ORDR-001 | Consumer_Order_Complete.html | 주문 완료 | P1 | | 7 | CON-AUTH-001 | Consumer_Login.html | 로그인/회원가입 | P1 | | 8 | CON-SKIN-001 | Consumer_Skin_Quiz.html | 스킨 매칭 퀴즈 | P1 | | 9 | CON-SKIN-002 | Consumer_Skin_Result.html | 매칭 결과/추천 | P1 | | 10 | CON-MYPAGE-001 | Consumer_MyPage.html | 마이페이지 | P2 | | 11 | CON-ORDR-002 | Consumer_Order_List.html | 주문 내역 | P2 | | 12 | CON-ORDR-003 | Consumer_Order_Detail.html | 주문 상세/배송추적 | P2 | | 13 | CON-REVW-001 | Consumer_Review_Write.html | 리뷰 작성 | P2 | | 14 | CON-SRCH-001 | Consumer_Search.html | 검색 | P2 | | 15 | CON-KOC-001 | Consumer_KOC_Shorts.html | KOC 숏폼 커머스 (전체 화면) | P1 | | 16 | CON-MAJOR-001 | Consumer_Major_Hub.html | 메이저 브랜드 허브 | P2 | | 17 | CON-INDIE-001 | Consumer_Indie_Hub.html | 인디 브랜드 허브 | P2 | | 18 | CON-DERMA-001 | Consumer_Derma_Hub.html | 더마 브랜드 허브 | P2 | --- ## 10. 기존 시스템과의 연결 ### Admin/Seller ↔ Consumer 디자인 토큰 통일 (v2 — 통일 완료) | 토큰 | 통일 HEX | Admin | Seller | Consumer | 비고 | |------|----------|-------|--------|----------|------| | **Primary** | 포탈별 차별화 허용 | `#1F4E79` | `#2563EB` | `#FF6B00` | 유일한 차별화 토큰 (Consumer: Hermès Orange) | | **Secondary** | Consumer 전용 | — | — | `#E85D04` | Burnt Orange 포인트 (구매 CTA, 세일) | | **EWG Safe** | `#059669` | ✅ | ✅ | ✅ | 통일 (기존 Admin/Seller `#10B981` → 변경) | | **EWG Caution** | `#D97706` | ✅ | ✅ | ✅ | 변경 없음 | | **EWG Danger** | `#DC2626` | ✅ | ✅ | ✅ | 통일 (기존 Admin/Seller `#EF4444` → 변경) | | **MEGA** | `#BE185D` | ✅ | ✅ | ✅ | 변경 (기존 `#DC2626` → Danger 충돌 해소) | | **DERMA** | `#2563EB` | ✅ | ✅ | ✅ | 변경 없음 | | **INDIE** | `#059669` | ✅ | ✅ | ✅ | 변경 없음 | | **Star** | `#FBBF24` | ✅ | ✅ | ✅ | 통일 (기존 Seller `#F59E0B` → 변경) | | **Border Radius** | 포탈별 차별화 허용 | 12px | 12px | 16px | Consumer만 부드럽게 | | **Font** | 포탈별 차별화 허용 | Segoe UI | Segoe UI | Pretendard + Noto Sans | Consumer는 CJK 대응 | | **Card Style** | Border 기반 | ✅ | ✅ | ✅ | 배경색 구분 → border 구분으로 통일 | | **Card Border** | `#E5E7EB` | ✅ | ✅ | ✅ | 기본 카드 테두리 색상 | --- > **다음 단계**: 이 컨셉을 기반으로 P1 화면 8개(홈, 상품목록, 상품상세, 장바구니, 결제, 주문완료, 로그인, 스킨퀴즈)를 순차 제작합니다.