diff --git a/.playwright-mcp/debug/reference1-dotslashdash.png b/.playwright-mcp/debug/reference1-dotslashdash.png new file mode 100644 index 0000000..7e26b07 Binary files /dev/null and b/.playwright-mcp/debug/reference1-dotslashdash.png differ diff --git a/.playwright-mcp/debug/reference2-kt-sajangeasy.png b/.playwright-mcp/debug/reference2-kt-sajangeasy.png new file mode 100644 index 0000000..6dd2aa7 Binary files /dev/null and b/.playwright-mcp/debug/reference2-kt-sajangeasy.png differ diff --git a/design/uiux/uiux.md b/design/uiux/uiux.md new file mode 100644 index 0000000..61ad2d0 --- /dev/null +++ b/design/uiux/uiux.md @@ -0,0 +1,1448 @@ +# KT AI 기반 소상공인 이벤트 자동 생성 서비스 UI/UX 설계서 + +## 문서 정보 +- **프로젝트명**: KT AI 기반 소상공인 이벤트 자동 생성 서비스 +- **작성일**: 2025-10-21 +- **버전**: 1.0 +- **작성자**: UI/UX Designer + +--- + +## 목차 +1. [프로젝트 개요](#1-프로젝트-개요) +2. [설계 원칙](#2-설계-원칙) +3. [프로토타입 화면 목록](#3-프로토타입-화면-목록) +4. [화면 간 사용자 플로우](#4-화면-간-사용자-플로우) +5. [화면별 상세 설계](#5-화면별-상세-설계) +6. [화면 간 전환 및 네비게이션](#6-화면-간-전환-및-네비게이션) +7. [반응형 설계 전략](#7-반응형-설계-전략) +8. [접근성 보장 방안](#8-접근성-보장-방안) +9. [성능 최적화 방안](#9-성능-최적화-방안) +10. [변경 이력](#10-변경-이력) + +--- + +## 1. 프로젝트 개요 + +### 1.1 서비스 목적 +소상공인 및 중소기업의 이벤트 기획·제작·운영 역량과 시간 부족 문제를 해결하기 위한 AI 기반 이벤트 자동 생성 서비스 + +### 1.2 핵심 가치 제안 +- **AI 트렌드 분석**: 업종/지역/시즌 트렌드 자동 분석 +- **3가지 이벤트 추천**: 목적에 맞는 최적화된 이벤트 기획안 +- **자동 콘텐츠 생성**: SNS 이미지 3가지 스타일 자동 생성 +- **다중 채널 배포**: 우리동네TV, 링고비즈, 지니TV, SNS 동시 배포 +- **실시간 성과 측정**: 통합 대시보드로 투자대비수익률 분석 + +### 1.3 타겟 사용자 +- **주 사용자**: 소상공인 (음식점, 카페, 소매점 운영자) +- **사용 환경**: 모바일 중심 (60%), 데스크톱 (40%) +- **사용 시간**: 매장 운영 중 짧은 시간 활용 (5-10분 내 이벤트 생성) + +### 1.4 마이크로서비스 구성 +1. **User** - 사용자 인증 및 매장정보 관리 +2. **Event** - 이벤트 기획 및 관리 +3. **AI** - AI 기반 트렌드 분석 및 이벤트 추천 +4. **Content** - SNS 콘텐츠 생성 +5. **Distribution** - 다중 채널 배포 관리 +6. **Participation** - 이벤트 참여 및 당첨자 관리 +7. **Analytics** - 실시간 효과 측정 및 통합 대시보드 + +--- + +## 2. 설계 원칙 + +### 2.1 Mobile First 디자인 철학 + +#### 우선순위 중심 설계 (Priority-Driven Design) +- **Above the Fold 최적화**: 스크롤 없이 핵심 정보 확인 +- **Single Column Layout**: 모바일에서 단일 컬럼으로 정보 수직 배치 +- **Progressive Disclosure**: 상세 정보는 탭/아코디언으로 숨김 + +#### 점진적 향상 (Progressive Enhancement) +``` +Mobile (320-767px) → 핵심 기능만 제공 +Tablet (768-1023px) → 부가 정보 추가 +Desktop (1024px+) → 전체 기능 및 상세 분석 +``` + +#### 성능 최적화 (Performance Optimization) +- **First Contentful Paint**: < 1.5s +- **Time to Interactive**: < 3s +- **Lighthouse Score**: > 90 + +### 2.2 유저스토리 기반 설계 +- **불필요한 추가 설계 금지**: 20개 유저스토리와 정확히 매칭 +- **우선순위 반영**: M(Must) > S(Should) > C(Could) > W(Won't) 순서로 개발 + +### 2.3 사용성 원칙 +- **3 Tap Rule**: 모든 주요 기능은 3번 탭 내 도달 가능 +- **터치 영역**: 최소 44x44px (애플 권장) +- **가독성**: 최소 글꼴 크기 14px (모바일), 16px (데스크톱) +- **색상 대비**: WCAG AA 등급 이상 (4.5:1) + +--- + +## 3. 프로토타입 화면 목록 + +### 총 17개 화면 + +| No | 화면명 | 유저스토리 | 우선순위 | 마이크로서비스 | Mobile 중요도 | +|----|--------|----------|---------|--------------|-------------| +| **인증 및 사용자 관리** | +| 01 | 로그인 | UFR-USER-020 | M/8 | User | ⭐⭐⭐ | +| 02 | 회원가입 | UFR-USER-010 | M/21 | User | ⭐⭐⭐ | +| 03 | 프로필편집 | UFR-USER-030 | C/8 | User | ⭐ | +| 04 | 로그아웃확인 | UFR-USER-040 | S/3 | User | ⭐ | +| **메인 및 대시보드** | +| 05 | 대시보드 | UFR-EVENT-010 | S/13 | Event | ⭐⭐⭐ | +| 06 | 이벤트목록 | UFR-EVENT-070 | S/13 | Event | ⭐⭐ | +| **이벤트 생성 플로우** | +| 07 | 이벤트목적선택 | UFR-EVENT-020 | M/5 | Event | ⭐⭐⭐ | +| 08 | AI이벤트추천 | UFR-EVENT-030 | M/34 | AI | ⭐⭐⭐ | +| 09 | SNS이미지생성 | UFR-CONT-010 | M/21 | Content | ⭐⭐⭐ | +| 10 | 콘텐츠편집 | UFR-CONT-020 | S/13 | Content | ⭐⭐ | +| 11 | 배포채널선택 | UFR-EVENT-040 | M/13 | Event | ⭐⭐ | +| 12 | 최종승인 | UFR-EVENT-050 | M/13 | Event | ⭐⭐⭐ | +| **이벤트 관리** | +| 13 | 이벤트상세 | UFR-EVENT-060 | S/13 | Event | ⭐⭐⭐ | +| 14 | 참여자목록 | UFR-PART-020 | S/8 | Participation | ⭐ | +| **참여자 관리** | +| 15 | 이벤트참여 | UFR-PART-010 | M/13 | Participation | ⭐⭐⭐ | +| 16 | 당첨자추첨 | UFR-PART-030 | M/13 | Participation | ⭐ | +| **성과 분석** | +| 17 | 실시간대시보드 | UFR-ANAL-010 | M/34 | Analytics | ⭐⭐ | + +--- + +## 4. 화면 간 사용자 플로우 + +```mermaid +graph TD + Start([시작]) --> Login{로그인 여부} + + %% 최초 사용자 플로우 + Login -->|미로그인| SignUp[02-회원가입] + SignUp --> Login01[01-로그인] + Login01 --> Dashboard[05-대시보드] + + Login -->|로그인됨| Dashboard + + %% 메인 대시보드 액션 + Dashboard --> EventList[06-이벤트목록] + Dashboard --> EventDetail[13-이벤트상세] + Dashboard --> Profile[03-프로필편집] + Dashboard --> CreateEvent[07-이벤트목적선택] + Dashboard --> Logout[04-로그아웃확인] + + %% 이벤트 생성 플로우 (핵심) + CreateEvent --> AIRecommend[08-AI이벤트추천] + AIRecommend --> ImageGen[09-SNS이미지생성] + ImageGen --> ContentEdit[10-콘텐츠편집] + ContentEdit --> ChannelSelect[11-배포채널선택] + ChannelSelect --> FinalApproval[12-최종승인] + FinalApproval --> Dashboard + + %% 이벤트 관리 플로우 + EventDetail --> ParticipantList[14-참여자목록] + EventDetail --> DrawWinner[16-당첨자추첨] + EventDetail --> Analytics[17-실시간대시보드] + + EventList --> EventDetail + + %% 고객 참여 플로우 (별도) + External([외부 채널
SNS/TV/연결음]) --> Participate[15-이벤트참여] + Participate --> ThankYou([참여 완료]) + + %% 프로필 편집 + Profile --> Dashboard + + %% 로그아웃 + Logout --> Login01 + + style Dashboard fill:#4A90E2,color:#fff + style CreateEvent fill:#7ED321,color:#fff + style AIRecommend fill:#7ED321,color:#fff + style FinalApproval fill:#7ED321,color:#fff + style Analytics fill:#F5A623,color:#fff + style Participate fill:#BD10E0,color:#fff +``` + +--- + +## 5. 화면별 상세 설계 + +### 5.1 인증 및 사용자 관리 + +#### 01-로그인 + +**개요** +- **목적**: 기존 사용자의 안전한 서비스 접근 +- **관련 유저스토리**: UFR-USER-020 +- **비즈니스 중요도**: M/8 (필수, 낮은 복잡도) + +**주요 기능** +- 전화번호/비밀번호 입력 +- 로그인 유지 옵션 +- 비밀번호 찾기 +- 회원가입 링크 + +**UI 구성요소** + +*Mobile (320-767px)* +``` +┌─────────────────────┐ +│ │ +│ [서비스 로고] │ +│ │ +│ ┌─────────────────┐ │ +│ │ 전화번호 입력 │ │ +│ └─────────────────┘ │ +│ ┌─────────────────┐ │ +│ │ 비밀번호 입력 │ │ +│ └─────────────────┘ │ +│ │ +│ ☐ 로그인 유지 │ +│ │ +│ ┌─────────────────┐ │ +│ │ 로그인 버튼 │ │ +│ └─────────────────┘ │ +│ │ +│ 비밀번호 찾기 | 회원가입 │ +│ │ +└─────────────────────┘ +``` + +*Desktop (1024px+)* +``` +┌─────────────────────────────────────┐ +│ │ +│ [서비스 로고 + 설명] │ +│ │ +│ ┌──────────────────────┐ │ +│ │ 전화번호 입력 │ │ +│ └──────────────────────┘ │ +│ ┌──────────────────────┐ │ +│ │ 비밀번호 입력 │ │ +│ └──────────────────────┘ │ +│ │ +│ ☐ 로그인 유지 │ +│ │ +│ ┌──────────────────────┐ │ +│ │ 로그인 버튼 │ │ +│ └──────────────────────┘ │ +│ │ +│ 비밀번호 찾기 | 회원가입 │ +│ │ +└─────────────────────────────────────┘ +``` + +**인터랙션** +1. **포커스 이동**: Enter 키로 다음 입력 필드 이동 +2. **입력 검증**: 실시간 형식 검증 (전화번호 형식, 비밀번호 최소 길이) +3. **비밀번호 표시**: 눈 아이콘 클릭으로 비밀번호 보기/숨기기 +4. **로그인 실패**: 오류 메시지 입력 필드 하단에 빨간색으로 표시 +5. **로딩 상태**: 버튼 비활성화 + 스피너 표시 + +**반응형 처리** +- Mobile: 세로 전체 화면, 버튼 하단 고정 +- Tablet: 중앙 카드 형태 (최대 너비 480px) +- Desktop: 좌측 브랜딩 + 우측 로그인 폼 (50:50 레이아웃) + +**접근성** +- Label과 Input 연결 (for/id 속성) +- 오류 메시지는 aria-live="assertive" +- Tab 키 순서: 전화번호 → 비밀번호 → 로그인 유지 → 로그인 버튼 + +--- + +#### 02-회원가입 + +**개요** +- **목적**: 신규 소상공인 사용자 온보딩 +- **관련 유저스토리**: UFR-USER-010 +- **비즈니스 중요도**: M/21 (필수, 중간 복잡도) + +**주요 기능** +- 다단계 폼 (3단계) + - Step 1: 기본 정보 (이름, 전화번호, 이메일, 비밀번호) + - Step 2: 매장 정보 (매장명, 업종, 주소, 영업시간) + - Step 3: 사업자번호 검증 +- 진행 인디케이터 +- 단계별 유효성 검증 +- 사업자번호 국세청 DB 연동 검증 + +**UI 구성요소** + +*Mobile (320-767px) - Step 1* +``` +┌─────────────────────┐ +│ ← 회원가입 │ +├─────────────────────┤ +│ ●──○──○ (진행바) │ +│ │ +│ 기본 정보 입력 │ +│ │ +│ ┌─────────────────┐ │ +│ │ 이름 * │ │ +│ └─────────────────┘ │ +│ ┌─────────────────┐ │ +│ │ 전화번호 * │ │ +│ └─────────────────┘ │ +│ ┌─────────────────┐ │ +│ │ 이메일 * │ │ +│ └─────────────────┘ │ +│ ┌─────────────────┐ │ +│ │ 비밀번호 * │ │ +│ └─────────────────┘ │ +│ ┌─────────────────┐ │ +│ │ 비밀번호 확인 * │ │ +│ └─────────────────┘ │ +│ │ +│ 비밀번호는 8자 이상, │ +│ 영문/숫자/특수문자 │ +│ 포함 │ +│ │ +│ ┌─────────────────┐ │ +│ │ 다음 단계 │ │ +│ └─────────────────┘ │ +└─────────────────────┘ +``` + +*Mobile (320-767px) - Step 2* +``` +┌─────────────────────┐ +│ ← 회원가입 │ +├─────────────────────┤ +│ ○──●──○ (진행바) │ +│ │ +│ 매장 정보 입력 │ +│ │ +│ ┌─────────────────┐ │ +│ │ 매장명 * │ │ +│ └─────────────────┘ │ +│ ┌─────────────────┐ │ +│ │ 업종 선택 * │ │ (드롭다운) +│ └─────────────────┘ │ +│ ┌─────────────────┐ │ +│ │ 주소 검색 * │ │ +│ └─────────────────┘ │ +│ ┌─────────────────┐ │ +│ │ 상세 주소 │ │ +│ └─────────────────┘ │ +│ ┌─────────────────┐ │ +│ │ 영업시간 │ │ (선택) +│ └─────────────────┘ │ +│ │ +│ ┌─────────────────┐ │ +│ │ 다음 단계 │ │ +│ └─────────────────┘ │ +└─────────────────────┘ +``` + +*Mobile (320-767px) - Step 3* +``` +┌─────────────────────┐ +│ ← 회원가입 │ +├─────────────────────┤ +│ ○──○──● (진행바) │ +│ │ +│ 사업자번호 검증 │ +│ │ +│ ┌─────────────────┐ │ +│ │ 사업자번호 * │ │ +│ │ 000-00-00000 │ │ +│ └─────────────────┘ │ +│ │ +│ ┌─────────────────┐ │ +│ │ 검증하기 │ │ +│ └─────────────────┘ │ +│ │ +│ [검증 결과 영역] │ +│ ✓ 정상 사업자 │ +│ 업체명: 왕갈비통닭 │ +│ 대표자: 홍길동 │ +│ │ +│ ┌─────────────────┐ │ +│ │ 회원가입 완료 │ │ +│ └─────────────────┘ │ +└─────────────────────┘ +``` + +**인터랙션** +1. **진행바**: 현재 단계 표시, 클릭으로 이전 단계 이동 가능 +2. **필수 필드**: 별표(*) 표시, 미입력 시 다음 버튼 비활성화 +3. **실시간 검증**: + - 전화번호: 010-0000-0000 형식 자동 포맷 + - 이메일: @ 포함 여부 확인 + - 비밀번호: 8자 이상, 영문/숫자/특수문자 포함 여부 표시 +4. **주소 검색**: Daum 주소 API 팝업 또는 Bottom Sheet +5. **사업자번호 검증**: + - 로딩 인디케이터 (3초 이내) + - 성공: 녹색 체크 + 업체 정보 표시 + - 실패: 빨간색 X + 오류 메시지 +6. **뒤로 가기**: 이전 입력 값 유지 + +**반응형 처리** +- Mobile: 전체 화면, 단계별 스크롤 +- Tablet: 중앙 카드 (최대 너비 600px) +- Desktop: 좌측 진행바 + 우측 폼 (30:70 레이아웃) + +**접근성** +- 진행바는 aria-label="회원가입 진행 단계" +- 필수 필드는 aria-required="true" +- 검증 결과는 aria-live="polite" + +--- + +#### 03-프로필편집 + +**개요** +- **목적**: 사용자 정보 수정 +- **관련 유저스토리**: UFR-USER-030 +- **비즈니스 중요도**: C/8 (선택, 낮은 복잡도) + +**주요 기능** +- 기본 정보 수정 (이름, 전화번호, 이메일) +- 매장 정보 수정 (매장명, 업종, 주소, 영업시간) +- 비밀번호 변경 (현재 비밀번호 확인 필수) +- 변경사항 저장 확인 다이얼로그 + +**UI 구성요소** + +*Mobile (320-767px)* +``` +┌─────────────────────┐ +│ ← 프로필 편집 │ +├─────────────────────┤ +│ │ +│ ▼ 기본 정보 │ +│ 이름: [홍길동 ] │ +│ 전화번호: [010-...] │ +│ 이메일: [hong@...]│ +│ │ +│ ▼ 매장 정보 │ +│ 매장명: [왕갈비...]│ +│ 업종: [음식점 ] │ +│ 주소: [수원시...] │ +│ 영업시간: [10:00~]│ +│ │ +│ ▼ 비밀번호 변경 │ +│ 현재 비밀번호: [ ] │ +│ 새 비밀번호: [ ] │ +│ 비밀번호 확인: [ ] │ +│ │ +│ ┌─────────────────┐ │ +│ │ 저장하기 │ │ +│ └─────────────────┘ │ +└─────────────────────┘ +``` + +**인터랙션** +1. **아코디언**: 각 섹션 클릭으로 접기/펼치기 +2. **전화번호 변경**: 재인증 다이얼로그 표시 (SMS 인증) +3. **저장 확인**: "변경사항을 저장하시겠습니까?" 다이얼로그 +4. **취소 확인**: 변경사항이 있을 경우 "저장하지 않고 나가시겠습니까?" 다이얼로그 +5. **성공 토스트**: "프로필이 성공적으로 업데이트되었습니다" (2초) + +**반응형 처리** +- Mobile: 전체 화면, 아코디언 형태 +- Tablet/Desktop: 중앙 카드 (최대 너비 720px), 저장 버튼 하단 고정 + +--- + +#### 04-로그아웃확인 + +**개요** +- **목적**: 안전한 로그아웃 +- **관련 유저스토리**: UFR-USER-040 +- **비즈니스 중요도**: S/3 (권장, 낮은 복잡도) + +**주요 기능** +- 로그아웃 확인 다이얼로그 +- 세션 종료 +- 로그인 화면 이동 + +**UI 구성요소** + +*Mobile (320-767px)* +``` +┌─────────────────────┐ +│ │ +│ [어두운 배경] │ +│ │ +│ ┌─────────────────┐ │ +│ │ 로그아웃 │ │ +│ ├─────────────────┤ │ +│ │ │ │ +│ │ 로그아웃 하시겠 │ │ +│ │ 습니까? │ │ +│ │ │ │ +│ ├─────────────────┤ │ +│ │ ┌─────┐┌─────┐│ │ +│ │ │취소 ││확인 ││ │ +│ │ └─────┘└─────┘│ │ +│ └─────────────────┘ │ +│ │ +└─────────────────────┘ +``` + +**인터랙션** +1. **다이얼로그 표시**: 프로필 메뉴 → 로그아웃 선택 +2. **확인**: 세션 종료 + 로그인 화면 이동 (애니메이션) +3. **취소**: 다이얼로그 닫기, 이전 화면 유지 +4. **배경 클릭**: 취소와 동일 + +**반응형 처리** +- Mobile: Bottom Sheet 형태 +- Tablet/Desktop: 중앙 Modal Dialog (최대 너비 400px) + +--- + +### 5.2 메인 및 대시보드 + +#### 05-대시보드 + +**개요** +- **목적**: 메인 허브, 이벤트 현황 한눈에 파악 +- **관련 유저스토리**: UFR-EVENT-010 +- **비즈니스 중요도**: S/13 (권장, 중간 복잡도) + +**주요 기능** +- 진행중 이벤트 3개 표시 (모바일) +- 예정/종료 이벤트 개수 +- "새 이벤트 만들기" 버튼 (FAB) +- Bottom Navigation (홈, 이벤트, 분석, 프로필) + +**UI 구성요소** + +*Mobile (320-767px)* +``` +┌─────────────────────┐ +│ 대시보드 [프로필]│ +├─────────────────────┤ +│ │ +│ 안녕하세요, 홍길동님!│ +│ │ +│ ┌─────────────────┐ │ +│ │ 진행중 3 | 예정 1│ │ +│ │ 종료 5 | 총 9개 │ │ +│ └─────────────────┘ │ +│ │ +│ 진행중 이벤트 │ +│ ┌─────────────────┐ │ +│ │ 신규고객 이벤트 │ │ +│ │ 참여자: 128명 │ │ +│ │ D-5 종료까지 │ │ +│ └─────────────────┘ │ +│ ┌─────────────────┐ │ +│ │ 재방문 이벤트 │ │ +│ │ 참여자: 56명 │ │ +│ │ D-12 종료까지 │ │ +│ └─────────────────┘ │ +│ ┌─────────────────┐ │ +│ │ 매출증대 이벤트 │ │ +│ │ 참여자: 89명 │ │ +│ │ D-20 종료까지 │ │ +│ └─────────────────┘ │ +│ │ +│ 더보기 > │ +│ │ +├─────────────────────┤ +│ [홈][이벤트][분석][프로필] │ ← Bottom Navigation +└─────────────────────┘ + [+] ← FAB +``` + +*Desktop (1024px+)* +``` +┌─────────────────────────────────────┐ +│ [로고] 대시보드 [프로필] │ +├─────────────────────────────────────┤ +│ [사이드바] 안녕하세요, 홍길동님! │ +│ ┌────────────────────────┐│ +│ • 대시보드 │ 진행중 5 | 예정 2 | 종료 10 ││ +│ • 이벤트 └────────────────────────┘│ +│ • 분석 │ +│ • 프로필 진행중 이벤트 │ +│ ┌──────┐┌──────┐┌──────┐│ +│ │이벤트1││이벤트2││이벤트3││ +│ │참여128││참여56││참여89││ +│ │D-5 ││D-12 ││D-20 ││ +│ └──────┘└──────┘└──────┘│ +│ ┌──────┐┌──────┐ │ +│ │이벤트4││이벤트5│ │ +│ │... ││... │ │ +│ └──────┘└──────┘ │ +│ │ +│ 예정 이벤트 │ +│ ┌──────┐┌──────┐ │ +│ │이벤트1││이벤트2│ │ +│ └──────┘└──────┘ │ +│ │ +└─────────────────────────────────────┘ +``` + +**인터랙션** +1. **이벤트 카드 클릭**: 이벤트 상세 화면 이동 +2. **FAB 클릭**: 이벤트 목적 선택 화면 이동 +3. **더보기**: 이벤트 목록 화면 이동 +4. **Bottom Navigation**: 메뉴 전환 (애니메이션) + +**반응형 처리** +- Mobile: 카드 1열, Bottom Navigation +- Tablet: 카드 2열, Bottom Navigation +- Desktop: 카드 3열, Side Navigation + +--- + +### 5.3 이벤트 생성 플로우 + +#### 08-AI이벤트추천 + +**개요** +- **목적**: AI 트렌드 분석 + 3가지 이벤트 추천 +- **관련 유저스토리**: UFR-EVENT-030 (통합) +- **비즈니스 중요도**: M/34 (필수, 최고 복잡도) + +**주요 기능** +- 트렌드 분석 결과 표시 (업종/지역/시즌) +- 3가지 이벤트 추천 (저비용/중비용/고비용) +- 제목/경품 간편 수정 (인라인 편집) +- 로딩 인디케이터 (10초 이내) + +**UI 구성요소** + +*Mobile (320-767px) - 로딩 상태* +``` +┌─────────────────────┐ +│ ← AI 이벤트 추천 │ +├─────────────────────┤ +│ │ +│ │ +│ [AI 아이콘 애니메이션]│ +│ │ +│ AI가 트렌드를 분석하고│ +│ 최적의 이벤트를 │ +│ 추천하고 있어요... │ +│ │ +│ [진행 바 50%] │ +│ │ +│ │ +└─────────────────────┘ +``` + +*Mobile (320-767px) - 완료 상태* +``` +┌─────────────────────┐ +│ ← AI 이벤트 추천 │ +├─────────────────────┤ +│ ▼ 트렌드 분석 결과 │ +│ (접기/펼치기) │ +│ │ +│ 추천 이벤트 3가지 │ +│ │ +│ ┌─────────────────┐ │ +│ │ 옵션 1: 저비용 │ │ +│ │ ────────────────│ │ +│ │ [신규고객 유치..✏]│ │ ← 제목 인라인 편집 +│ │ 경품: [커피 쿠폰✏]│ │ ← 경품 인라인 편집 +│ │ 참여방법: 전화번호│ │ +│ │ 예상 참여자: 150 │ │ +│ │ 예상 비용: 30만원│ │ +│ │ 투자대비수익률: 450%│ │ +│ │ ○ 선택 │ │ +│ └─────────────────┘ │ +│ │ +│ ┌─────────────────┐ │ +│ │ 옵션 2: 중비용 │ │ +│ │ ────────────────│ │ +│ │ [재방문 이벤트..✏]│ │ +│ │ 경품: [상품권 1만✏]│ │ +│ │ 참여방법: SNS 공유│ │ +│ │ 예상 참여자: 200 │ │ +│ │ 예상 비용: 50만원│ │ +│ │ 투자대비수익률: 320%│ │ +│ │ ○ 선택 │ │ +│ └─────────────────┘ │ +│ │ +│ ┌─────────────────┐ │ +│ │ 옵션 3: 고비용 │ │ +│ │ (스크롤...) │ │ +│ └─────────────────┘ │ +│ │ +│ ┌─────────────────┐ │ +│ │ 다음 단계 │ │ ← 선택 후 활성화 +│ └─────────────────┘ │ +└─────────────────────┘ +``` + +*트렌드 분석 결과 펼침 상태* +``` +┌─────────────────────┐ +│ ▼ 트렌드 분석 결과 │ +│ ────────────────────│ +│ │ +│ 📊 업종 트렌드 │ +│ • 최근 성공 유형: │ +│ 할인 쿠폰 (참여율 │ +│ 35% ↑) │ +│ • 선호 경품: │ +│ 커피/상품권 │ +│ • 효과적 참여방법: │ +│ 전화번호 > SNS │ +│ │ +│ 📍 지역 특성 │ +│ • 지역 성공률: │ +│ 수원 지역 28% ↑ │ +│ • 지역 고객 특성: │ +│ 20-30대 여성 주력│ +│ │ +│ 🗓️ 시즌 특성 │ +│ • 추천 이벤트: │ +│ 봄 신메뉴 프로모션│ +│ • 특별 시즌: │ +│ 화이트데이 (3/14) │ +│ │ +└─────────────────────┘ +``` + +**인터랙션** +1. **로딩**: + - AI 아이콘 애니메이션 (회전) + - 진행 바 0% → 100% (10초) + - 완료 시 부드러운 전환 +2. **트렌드 분석 접기/펼치기**: 아코디언 형태 +3. **제목/경품 편집**: + - 연필 아이콘 클릭 → 인라인 편집 모드 + - 최대 글자수 표시 (제목 50자, 경품 30자) + - Enter/저장 시 변경사항 저장 +4. **옵션 선택**: 라디오 버튼, 1개만 선택 가능 +5. **다음 단계**: 선택 후 버튼 활성화, 콘텐츠 생성 화면 이동 + +**반응형 처리** +- Mobile: 세로 스크롤, 카드 1열 +- Tablet: 카드 1열 유지, 너비 증가 +- Desktop: 좌측 트렌드 분석 (30%) + 우측 추천안 (70%) + +--- + +#### 09-SNS이미지생성 + +**개요** +- **목적**: 3가지 스타일 SNS 이미지 자동 생성 +- **관련 유저스토리**: UFR-CONT-010 +- **비즈니스 중요도**: M/21 (필수, 중간 복잡도) + +**주요 기능** +- 이벤트 정보 기반 이미지 생성 +- 3가지 스타일 제공 (심플/화려/트렌디) +- 생성 중 로딩 (5초 이내) +- 이미지 풀스크린 미리보기 + +**UI 구성요소** + +*Mobile (320-767px) - 생성 중* +``` +┌─────────────────────┐ +│ ← SNS 이미지 생성 │ +├─────────────────────┤ +│ │ +│ [AI 이미지 생성 중] │ +│ │ +│ 딥러닝 모델이 │ +│ 이벤트에 어울리는 │ +│ 이미지를 생성하고 │ +│ 있어요... │ +│ │ +│ [스피너 애니메이션] │ +│ │ +│ 예상 시간: 5초 │ +│ │ +└─────────────────────┘ +``` + +*Mobile (320-767px) - 완료* +``` +┌─────────────────────┐ +│ ← SNS 이미지 생성 │ +├─────────────────────┤ +│ 스타일 1: 심플 │ +│ ┌─────────────────┐ │ +│ │ │ │ +│ │ [이미지 미리보기]│ │ +│ │ │ │ +│ │ [이벤트 제목] │ │ +│ │ [경품 정보] │ │ +│ │ │ │ +│ └─────────────────┘ │ +│ ○ 선택 | 🔍 크게보기 │ +│ │ +│ 스타일 2: 화려 │ +│ ┌─────────────────┐ │ +│ │ [이미지...] │ │ +│ └─────────────────┘ │ +│ ○ 선택 | 🔍 크게보기 │ +│ │ +│ 스타일 3: 트렌디 │ +│ ┌─────────────────┐ │ +│ │ [이미지...] │ │ +│ └─────────────────┘ │ +│ ○ 선택 | 🔍 크게보기 │ +│ │ +│ ┌─────────────────┐ │ +│ │ 건너뛰기 | 다음 │ │ +│ └─────────────────┘ │ +└─────────────────────┘ +``` + +**인터랙션** +1. **생성 로딩**: + - Skeleton Screen (이미지 영역) + - 스피너 + 진행 메시지 +2. **이미지 선택**: 라디오 버튼, 1개 선택 +3. **크게보기**: 풀스크린 모달, 핀치 줌 가능 +4. **건너뛰기**: 이미지 없이 다음 단계 (콘텐츠 편집 스킵) +5. **다음**: 선택한 이미지로 콘텐츠 편집 화면 이동 + +**반응형 처리** +- Mobile: 이미지 1열, 세로 스크롤 +- Tablet: 이미지 2열 (1+2 또는 3열) +- Desktop: 이미지 3열 가로 배치 + +--- + +#### 12-최종승인 + +**개요** +- **목적**: 모든 설정 최종 확인 및 승인 +- **관련 유저스토리**: UFR-EVENT-050 +- **비즈니스 중요도**: M/13 (필수, 중간 복잡도) + +**주요 기능** +- 이벤트 정보 요약 (제목, 경품, 기간) +- SNS 이미지 미리보기 +- 배포 채널 목록 +- 수정 버튼 (각 섹션별 이전 단계 이동) +- 승인 및 배포 버튼 + +**UI 구성요소** + +*Mobile (320-767px)* +``` +┌─────────────────────┐ +│ ← 최종 승인 │ +├─────────────────────┤ +│ │ +│ ✓ 이벤트 정보 [수정]│ +│ ────────────────────│ +│ • 제목: 신규고객... │ +│ • 경품: 커피 쿠폰 │ +│ • 기간: 2025-11-01 ~ │ +│ 2025-11-15 │ +│ • 참여방법: 전화번호 │ +│ │ +│ ✓ SNS 이미지 [수정]│ +│ ────────────────────│ +│ ┌─────────────────┐ │ +│ │ [선택한 이미지] │ │ +│ │ (스타일 1: 심플) │ │ +│ └─────────────────┘ │ +│ │ +│ ✓ 배포 채널 [수정]│ +│ ────────────────────│ +│ • 우리동네TV (예상 5만명)│ +│ • 링고비즈 (예상 3만명) │ +│ • SNS (네이버, 카카오) │ +│ │ +│ ✓ 예상 성과 │ +│ ────────────────────│ +│ • 총 참여자: 150명 │ +│ • 총 비용: 30만원 │ +│ • 투자대비수익률: 450%│ +│ │ +│ ⚠️ 주의사항 │ +│ 배포 후에는 이벤트 제목,│ +│ 경품, 기간을 변경할 수 │ +│ 없습니다. │ +│ │ +│ ┌─────────────────┐ │ +│ │ 승인 및 배포 │ │ +│ └─────────────────┘ │ +└─────────────────────┘ +``` + +**인터랙션** +1. **수정 버튼**: 각 섹션별 이전 단계 화면 이동 +2. **승인 확인**: "이벤트를 승인하고 배포하시겠습니까?" 다이얼로그 +3. **승인 완료**: + - 로딩 인디케이터 (배포 중...) + - 성공 토스트: "이벤트가 성공적으로 배포되었습니다" + - 대시보드 화면 이동 + 새 이벤트 카드 추가 + +**반응형 처리** +- Mobile: 전체 화면, 세로 스크롤 +- Tablet/Desktop: 중앙 카드 (최대 너비 800px), 좌우 여백 + +--- + +### 5.4 참여자 관리 + +#### 15-이벤트참여 + +**개요** +- **목적**: 고객이 이벤트에 참여하는 화면 (모바일 최적화 최우선) +- **관련 유저스토리**: UFR-PART-010 +- **비즈니스 중요도**: M/13 (필수, 중간 복잡도) + +**주요 기능** +- 이벤트 정보 표시 (제목, 경품, 기간) +- SNS 이미지 표시 +- 참여 폼 (이름, 전화번호) +- 개인정보 동의 체크박스 +- 참여 완료 애니메이션 + +**UI 구성요소** + +*Mobile (320-767px)* +``` +┌─────────────────────┐ +│ │ +│ ┌─────────────────┐ │ +│ │ │ │ +│ │ [이벤트 이미지] │ │ +│ │ │ │ +│ └─────────────────┘ │ +│ │ +│ 🎉 신규고객 유치 이벤트│ +│ │ +│ 경품: ☕ 커피 쿠폰 │ +│ 기간: 2025-11-01 ~ │ +│ 2025-11-15 │ +│ │ +│ ────────────────────│ +│ │ +│ 참여하기 │ +│ │ +│ ┌─────────────────┐ │ +│ │ 이름 * │ │ +│ └─────────────────┘ │ +│ ┌─────────────────┐ │ +│ │ 전화번호 * │ │ +│ │ 010-0000-0000 │ │ +│ └─────────────────┘ │ +│ │ +│ ☐ 개인정보 수집 및 │ +│ 이용에 동의합니다 │ +│ [전문보기] │ +│ │ +│ ┌─────────────────┐ │ +│ │ 참여하기 │ │ +│ └─────────────────┘ │ +│ │ +│ 참여자: 128명 │ +│ │ +└─────────────────────┘ +``` + +*참여 완료 상태* +``` +┌─────────────────────┐ +│ │ +│ ┌────┐ │ +│ │ ✓ │ │ +│ └────┘ │ +│ │ +│ 참여가 완료되었습니다! │ +│ │ +│ 홍길동님의 행운을 │ +│ 기원합니다! │ +│ │ +│ ────────────────── │ +│ │ +│ 당첨자 발표 │ +│ 2025-11-16 (월) │ +│ │ +│ ┌─────────────────┐│ +│ │ 확인 ││ +│ └─────────────────┘│ +│ │ +└─────────────────────┘ +``` + +**인터랙션** +1. **폼 검증**: + - 이름: 2자 이상 + - 전화번호: 010-0000-0000 형식 자동 포맷 + - 개인정보 동의: 필수 체크 +2. **전문보기**: Bottom Sheet로 개인정보 처리방침 표시 +3. **참여하기**: + - 중복 참여 체크 + - 로딩 (1초) + - 애니메이션 (체크 아이콘 + 축하 메시지) +4. **확인**: 참여 완료 화면 닫기 + +**반응형 처리** +- Mobile: 전체 화면 (최적화) +- Tablet: 중앙 카드 (최대 너비 480px) +- Desktop: 중앙 카드 (최대 너비 600px) + +**접근성** +- 이미지 alt 텍스트: "신규고객 유치 이벤트 포스터" +- 참여 버튼: aria-label="이벤트에 참여하기" +- 개인정보 동의: 필수 체크 aria-required="true" + +--- + +### 5.5 성과 분석 + +#### 17-실시간대시보드 + +**개요** +- **목적**: 이벤트 성과 실시간 측정 및 분석 +- **관련 유저스토리**: UFR-ANAL-010 +- **비즈니스 중요도**: M/34 (필수, 최고 복잡도) + +**주요 기능** +- 요약 카드 4개 (참여자, 비용, 수익, 투자대비수익률) +- 채널별 성과 분석 (파이 차트) +- 시간대별 참여 추이 (라인 차트) +- 투자대비수익률 상세 분석 (테이블) +- 참여자 프로필 분석 (막대 차트) +- 실시간 업데이트 (5분 간격) + +**UI 구성요소** + +*Mobile (320-767px)* +``` +┌─────────────────────┐ +│ ← 실시간 대시보드 │ +├─────────────────────┤ +│ │ +│ 📊 요약 (실시간) │ +│ ┌────────┐┌────────┐│ +│ │참여자수 ││총 비용 ││ +│ │ 128명 ││ 30만원 ││ +│ └────────┘└────────┘│ +│ ┌────────┐┌────────┐│ +│ │예상수익 ││투자대비││ +│ │ 135만원││수익률 ││ +│ │ ││ 450% ││ +│ └────────┘└────────┘│ +│ │ +│ 📺 채널별 성과 │ +│ ┌─────────────────┐ │ +│ │ [파이 차트] │ │ +│ │ 우리동네TV: 45% │ │ +│ │ 링고비즈: 30% │ │ +│ │ SNS: 25% │ │ +│ └─────────────────┘ │ +│ │ +│ 📈 시간대별 참여 추이 │ +│ ┌─────────────────┐ │ +│ │ [라인 차트] │ │ +│ │ 피크: 오후 2-4시 │ │ +│ └─────────────────┘ │ +│ │ +│ 💰 투자대비수익률 상세│ +│ ┌─────────────────┐ │ +│ │총 비용: 30만원 │ │ +│ │• 경품: 25만원 │ │ +│ │• 채널: 5만원 │ │ +│ │ │ │ +│ │예상 수익: 135만원│ │ +│ │• 매출 증가: 100만│ │ +│ │• 신규 LTV: 35만 │ │ +│ │ │ │ +│ │투자대비수익률: │ │ +│ │(135-30)/30×100 │ │ +│ │= 450% │ │ +│ └─────────────────┘ │ +│ │ +│ 👥 참여자 프로필 │ +│ ┌─────────────────┐ │ +│ │[막대 차트] │ │ +│ │연령: 20대 35% │ │ +│ │ 30대 40% │ │ +│ │ 40대 25% │ │ +│ │성별: 여 60% │ │ +│ │ 남 40% │ │ +│ └─────────────────┘ │ +│ │ +└─────────────────────┘ +``` + +*Desktop (1024px+)* +``` +┌─────────────────────────────────────┐ +│ ← 실시간 대시보드 │ +├─────────────────────────────────────┤ +│ 📊 요약 (실시간 업데이트) │ +│ ┌─────┐┌─────┐┌─────┐┌─────┐ │ +│ │참여자││비용 ││수익 ││투자대││ │ +│ │128명││30만 ││135만││비수익││ │ +│ │ ││ ││ ││률450%││ │ +│ └─────┘└─────┘└─────┘└─────┘ │ +│ │ +│ ┌──────────────────┐┌──────────────┐│ +│ │📺 채널별 성과 ││📈 시간대별 추이││ +│ │ ││ ││ +│ │ [파이 차트] ││ [라인 차트] ││ +│ │ ││ ││ +│ │ • 우리동네TV 45% ││ 피크: 오후2-4 ││ +│ │ • 링고비즈 30% ││ ││ +│ │ • SNS 25% ││ ││ +│ └──────────────────┘└──────────────┘│ +│ │ +│ ┌──────────────────┐┌──────────────┐│ +│ │💰 투자대비수익률 ││👥 참여자 프로필││ +│ │ ││ ││ +│ │ [상세 테이블] ││ [차트] ││ +│ │ ││ ││ +│ └──────────────────┘└──────────────┘│ +│ │ +└─────────────────────────────────────┘ +``` + +**인터랙션** +1. **실시간 업데이트**: + - 5분 간격 자동 폴링 + - 변경 사항 하이라이트 (숫자 카운터 애니메이션) +2. **차트 인터랙션**: + - 파이 차트: 호버/클릭 시 상세 정보 툴팁 + - 라인 차트: 호버 시 시간대별 정확한 수치 표시 +3. **새로고침**: Pull to Refresh (모바일) +4. **상세보기**: 각 섹션 클릭 시 확장/축소 + +**반응형 처리** +- Mobile: 세로 스크롤, 카드 1열, 단순한 차트 (막대/파이) +- Tablet: 카드 2열, 차트 확장 +- Desktop: 카드 4열, 복잡한 차트 (라인/영역), 2열 레이아웃 + +--- + +## 6. 화면 간 전환 및 네비게이션 + +### 6.1 네비게이션 구조 + +#### Mobile (Bottom Navigation) +``` +┌─────────────────────┐ +│ │ +│ [화면 콘텐츠] │ +│ │ +├─────────────────────┤ +│[홈][이벤트][분석][프로필]│ +└─────────────────────┘ +``` + +**메뉴 항목**: +- **홈**: 대시보드 (05-대시보드) +- **이벤트**: 이벤트 목록 (06-이벤트목록) +- **분석**: 실시간 대시보드 (17-실시간대시보드) +- **프로필**: 프로필 편집 (03-프로필편집) + +#### Desktop (Side Navigation) +``` +┌─────────────────────────────────────┐ +│ [로고] [프로필] │ +├──────┬──────────────────────────────┤ +│ 메뉴 │ [화면 콘텐츠] │ +│ │ │ +│• 홈 │ │ +│• 이벤트│ │ +│• 분석 │ │ +│• 프로필│ │ +│ │ │ +└──────┴──────────────────────────────┘ +``` + +### 6.2 화면 전환 애니메이션 + +**Forward Navigation** (다음 단계): +- Slide Left (왼쪽으로 슬라이드) +- Duration: 300ms +- Easing: ease-out + +**Backward Navigation** (이전 단계): +- Slide Right (오른쪽으로 슬라이드) +- Duration: 300ms +- Easing: ease-out + +**Tab Navigation** (탭 전환): +- Fade In/Out +- Duration: 200ms +- Easing: ease-in-out + +**Modal/Dialog**: +- Fade In + Scale Up (등장) +- Fade Out + Scale Down (퇴장) +- Duration: 250ms +- Easing: cubic-bezier(0.4, 0, 0.2, 1) + +### 6.3 Floating Action Button (FAB) + +**위치**: 우측 하단 +**기능**: "새 이벤트 만들기" +**동작**: 07-이벤트목적선택 화면 이동 + +``` + ┌─────┐ + │ + │ + └─────┘ +``` + +--- + +## 7. 반응형 설계 전략 + +### 7.1 브레이크포인트 + +```css +/* Mobile First Breakpoints */ + +/* Mobile: 320px ~ 767px (기본 스타일) */ +@media (min-width: 768px) { + /* Tablet: 768px ~ 1023px */ +} + +@media (min-width: 1024px) { + /* Desktop: 1024px ~ 1439px */ +} + +@media (min-width: 1440px) { + /* Large Desktop: 1440px ~ */ + /* 최대 너비 1280px, 중앙 정렬 */ +} +``` + +### 7.2 레이아웃 전략 + +#### Grid System + +**Mobile**: +- 1열 레이아웃 +- 좌우 여백: 16px +- 요소 간 간격: 16px + +**Tablet**: +- 2열 레이아웃 (50:50 또는 30:70) +- 좌우 여백: 24px +- 요소 간 간격: 24px + +**Desktop**: +- 3열 레이아웃 (33:33:33 또는 20:60:20) +- 좌우 여백: 32px +- 요소 간 간격: 32px +- 최대 너비: 1280px (중앙 정렬) + +### 7.3 타이포그래피 + +```css +/* Mobile */ +h1: 24px / 1.2 / bold +h2: 20px / 1.3 / bold +h3: 18px / 1.4 / semibold +body: 14px / 1.5 / regular +small: 12px / 1.5 / regular + +/* Desktop */ +h1: 32px / 1.2 / bold +h2: 28px / 1.3 / bold +h3: 24px / 1.4 / semibold +body: 16px / 1.5 / regular +small: 14px / 1.5 / regular +``` + +### 7.4 터치 영역 + +**Mobile**: +- 최소 터치 영역: 44x44px (애플 권장) +- 버튼 높이: 48px +- 입력 필드 높이: 48px + +**Desktop**: +- 최소 클릭 영역: 32x32px +- 버튼 높이: 40px +- 입력 필드 높이: 40px + +--- + +## 8. 접근성 보장 방안 + +### 8.1 WCAG 2.1 AA 준수 + +**색상 대비**: +- 일반 텍스트: 4.5:1 +- 큰 텍스트 (18px 이상): 3:1 +- UI 컴포넌트: 3:1 + +**키보드 네비게이션**: +- 모든 기능 Tab 키로 접근 가능 +- Focus Indicator 명확히 표시 (2px 파란색 테두리) +- Escape 키로 모달/다이얼로그 닫기 + +**스크린 리더**: +- 모든 이미지 alt 텍스트 제공 +- 폼 Label과 Input 연결 (for/id) +- ARIA 속성 활용: + - aria-label + - aria-describedby + - aria-live (동적 콘텐츠) + - aria-required (필수 입력) + +### 8.2 접근성 체크리스트 + +**이미지**: +- [ ] 모든 이미지 alt 속성 제공 +- [ ] 장식용 이미지 alt="" 처리 + +**폼**: +- [ ] Label과 Input 연결 +- [ ] 필수 필드 표시 (*, aria-required) +- [ ] 오류 메시지 스크린 리더 읽기 + +**네비게이션**: +- [ ] 키보드만으로 모든 기능 접근 가능 +- [ ] Focus 순서 논리적 +- [ ] Skip Navigation 링크 제공 + +**콘텐츠**: +- [ ] 제목 계층 구조 (h1 > h2 > h3) +- [ ] 색상만으로 정보 전달하지 않음 +- [ ] 충분한 색상 대비 + +--- + +## 9. 성능 최적화 방안 + +### 9.1 이미지 최적화 + +**Lazy Loading**: +```html +이벤트 포스터 +``` + +**Responsive Images**: +```html +이벤트 포스터 +``` + +**WebP 포맷**: +- 압축률 30% 향상 +- Fallback: JPEG/PNG + +**이미지 CDN**: +- Cloudflare/AWS CloudFront +- 자동 리사이즈 및 포맷 변환 + +### 9.2 코드 최적화 + +**Code Splitting**: +```javascript +// 페이지별 번들 분리 +const Dashboard = lazy(() => import('./Dashboard')); +const EventCreate = lazy(() => import('./EventCreate')); +``` + +**Tree Shaking**: +- 불필요한 코드 제거 +- ES6 Module 사용 + +**Minification**: +- JS/CSS 압축 +- Gzip/Brotli 압축 + +### 9.3 로딩 전략 + +**Skeleton Screen**: +``` +┌─────────────────────┐ +│ ┌─────────────────┐ │ +│ │░░░░░░░░░░░░░░░░ │ │ ← Skeleton Card +│ │░░░░░░░░░░░░░░░░ │ │ +│ └─────────────────┘ │ +│ ┌─────────────────┐ │ +│ │░░░░░░░░░░░░░░░░ │ │ +│ └─────────────────┘ │ +└─────────────────────┘ +``` + +**Critical CSS**: +- Above the Fold CSS 인라인 삽입 +- 나머지 CSS 비동기 로드 + +**Defer/Async Script**: +```html + + +``` + +### 9.4 데이터 최적화 + +**Pagination**: +- 목록은 20개씩 페이징 +- Infinite Scroll (모바일) + +**Debouncing**: +```javascript +// 검색 입력 시 500ms 대기 후 API 호출 +const debouncedSearch = debounce(search, 500); +``` + +**LocalStorage**: +- 임시 저장 (이벤트 생성 진행 상태) +- 오프라인 대응 + +### 9.5 성능 목표 + +**Core Web Vitals**: +- LCP (Largest Contentful Paint): < 2.5s +- FID (First Input Delay): < 100ms +- CLS (Cumulative Layout Shift): < 0.1 + +**추가 지표**: +- First Contentful Paint: < 1.5s +- Time to Interactive: < 3s +- Lighthouse Score: > 90 +- 이미지 로딩: < 1s (per image) +- API 응답: < 500ms (평균) + +--- + +## 10. 변경 이력 + +| 버전 | 날짜 | 변경 내용 | 작성자 | +|------|------|----------|--------| +| 1.0 | 2025-10-21 | 최초 작성 | UI/UX Designer | + +--- + +## 부록 + +### A. 디자인 시스템 (추후 작성 예정) +- 컬러 팔레트 +- 타이포그래피 시스템 +- 스페이싱 시스템 +- 아이콘 라이브러리 +- 컴포넌트 라이브러리 + +### B. 프로토타입 링크 (추후 추가 예정) +- Figma 프로토타입 링크 +- HTML 프로토타입 링크 + +### C. 사용성 테스트 결과 (추후 추가 예정) +- 테스트 참가자 정보 +- 주요 발견 사항 +- 개선 권장 사항 + +--- + +**문서 끝**