From 27904c3c9429faeff8b309b64e296ab083db35a0 Mon Sep 17 00:00:00 2001 From: cherry2250 Date: Tue, 21 Oct 2025 17:05:44 +0900 Subject: [PATCH] edit uiux --- design/uiux/style-guide.md | 212 ++++++++- design/uiux/uiux-design.md | 944 +++++++++++++++++++++++++++++++++++++ 2 files changed, 1154 insertions(+), 2 deletions(-) create mode 100644 design/uiux/uiux-design.md diff --git a/design/uiux/style-guide.md b/design/uiux/style-guide.md index 8d0aae8..579120c 100644 --- a/design/uiux/style-guide.md +++ b/design/uiux/style-guide.md @@ -454,6 +454,74 @@ Small: └─────────────────────────┘ ``` +#### Selection Card (선택형 카드) +``` +사용: 옵션 선택 화면 (09-콘텐츠미리보기.html) +특징: 카드 전체가 선택 가능한 인터랙티브 영역 + +배경: #FFFFFF +테두리: 3px solid transparent +둥근 모서리: 12px +그림자: 0 2px 8px rgba(0, 0, 0, 0.08) +내부 패딩: 24px +커서: pointer + +상태별: +- Default: + - 테두리 transparent + - 그림자 0 2px 8px rgba(0, 0, 0, 0.08) + +- Hover: + - transform: translateY(-2px) + - 그림자 0 8px 16px rgba(0, 0, 0, 0.1) + +- Selected: + - 테두리 3px solid #E31E24 + - 그림자 0 4px 12px rgba(227, 30, 36, 0.2) + - 우측 상단 체크 배지 표시 + +구조: +┌─────────────────────────┐ +│ [✓] │ ← 선택 배지 (조건부) +│ [미리보기 이미지 1:1] │ +│ │ +│ H3 옵션 제목 │ +│ Body-S 설명 │ +│ │ +│ [크게보기] │ +└─────────────────────────┘ + +Selected Badge (체크 배지): +- 위치: 우측 상단 (absolute) +- 크기: 32 x 32px +- 배경: #E31E24 +- 아이콘: check (White, 20px) +- 둥근 모서리: 50% (원형) +- Display: none (기본), flex (선택 시) +- z-index: 10 + +Image Preview: +- 비율: 1:1 (aspect-ratio) +- 배경: #F5F5F5 (플레이스홀더) +- 둥근 모서리: 12px +- object-fit: cover + +Radio Button: +- Display: none (숨김) +- 기능: 유지 (폼 제출용) +- 접근성: 키보드 네비게이션 지원 + +전환 애니메이션: +- Duration: 0.3s +- Easing: ease + +주의사항: +- 카드 내부 버튼 클릭 시 이벤트 버블링 방지 필요 + - event.stopPropagation() 사용 +- 카드 클릭과 보조 액션 버튼 클릭 구분 +- 키보드 접근성: Enter/Space로 선택 가능 +``` + #### Stat Card (지표 카드) ``` 배경: Gradient 또는 Solid @@ -500,6 +568,47 @@ Line Height: 1.5 Resize: vertical (세로 방향만) ``` +#### Editable Field (인라인 편집) +``` +사용: 08-AI이벤트추천.html (제목, 경품 편집) +특징: contenteditable을 활용한 인라인 편집 + +배경: 투명 (기본), #F5F5F5 (hover), #FFFFFF (focus) +테두리: 1px dashed #D9D9D9 +둥근 모서리: 4px +내부 패딩: 4px 8px +폰트: 문맥에 따름 (제목: H3, 경품: Body) +커서: text + +상태별: +- Default: + - 테두리: 1px dashed #D9D9D9 + - 배경: 투명 + +- Hover: + - 테두리: 1px dashed #E31E24 + - 배경: #F5F5F5 + +- Focus: + - outline: none + - 테두리: 1px solid #E31E24 + - 배경: #FFFFFF + +전환 애니메이션: +- Duration: 200ms (Fast) +- Easing: ease-out + +접근성: +- contenteditable="true" +- role="textbox" +- aria-label="편집 가능한 필드명" + +주의사항: +- 빈 값 방지 (최소 1자 이상) +- Enter 키로 편집 완료 (blur) +- maxLength 속성으로 길이 제한 +``` + #### Placeholder ``` 색상: #9E9E9E (Gray-500) @@ -533,7 +642,98 @@ Resize: vertical (세로 방향만) - Disabled: 배경 #F5F5F5, 테두리 #E0E0E0 ``` -### 6.5 Bottom Navigation +### 6.5 Budget Navigation (예산 선택 탭) + +``` +사용: 08-AI이벤트추천.html +특징: Sticky 네비게이션으로 예산 섹션 이동 + +배경: #F5F5F5 (배경색) +위치: sticky, top 56px (Header 아래) +z-index: 10 +패딩: 16px 0 + +구조: +┌────────────────────────────────┐ +│ [💰 저비용] [💰💰 중비용] [💰💰💰 고비용] │ +└────────────────────────────────┘ + +버튼: +- 크기: Medium (44px 높이) +- 간격: 8px +- flex-1 (균등 분배) + +상태별: +- Default: + - 배경: White + - 텍스트: #4A4A4A + - 테두리: 1px solid #E0E0E0 + +- Active: + - 배경: #E31E24 + - 텍스트: White + - 테두리: none + - 그림자: 0 2px 4px rgba(227, 30, 36, 0.2) + +- Hover (비활성화 탭): + - 배경: #FFF5F5 + - 테두리: 1px solid #E31E24 + +상호작용: +- 클릭 시: 해당 예산 섹션으로 smooth scroll +- Scroll 시: 현재 보이는 섹션에 맞춰 Active 상태 변경 +``` + +### 6.6 Option Card (이벤트 옵션 카드) + +``` +사용: 08-AI이벤트추천.html +특징: 온라인/오프라인 배지 + Editable Field + Radio 선택 + +배경: #FFFFFF +테두리: 1px solid #E0E0E0 +둥근 모서리: 12px +그림자: 0 2px 8px rgba(0, 0, 0, 0.08) +내부 패딩: 24px + +구조: +┌─────────────────────────┐ +│ [온라인] 배지 [◯] │ +│ │ +│ 제목 (editable) │ +│ 경품명 (editable) │ +│ │ +│ 참여 방법: ... │ +│ │ +│ 📊 예상 참여자: 200명 │ +│ 💰 예상 비용: 30만원 │ +│ 📈 예상 ROI: 180% │ +└─────────────────────────┘ + +온라인/오프라인 배지: +- 크기: 패딩 4px 12px +- 폰트: Body-S (12px SemiBold) +- 둥근 모서리: 12px (pill) +- 온라인: 배경 #E3F2FD (Blue), 텍스트 #0066FF +- 오프라인: 배경 #FCE4EC (Pink), 텍스트 #E31E24 + +Radio 버튼: +- 위치: 우측 상단 +- 크기: 24 x 24px +- Display: visible (기본 보임) + +Editable Field: +- 스타일: 인라인 편집 (상세 내용은 6.3 참조) +- Hover: 점선 테두리로 편집 가능 표시 +- Focus: 실선 테두리로 변경 + +통계 정보: +- 폰트: Body-S (12px Regular) +- 색상: #4A4A4A (Secondary) +- 아이콘: Material Icons (16px) +``` + +### 6.7 Bottom Navigation ``` 배경: #FFFFFF (White) @@ -563,7 +763,7 @@ Resize: vertical (세로 방향만) - 아이콘-레이블: 4px (XS) ``` -### 6.6 Stepper (단계 표시) +### 6.8 Stepper (단계 표시) #### Progress Stepper (AI 이벤트 생성) ``` @@ -1255,6 +1455,14 @@ Secondary: ## 15. 변경 이력 +### Version 1.1 (2025-10-21) +- 프로토타입 기반 컴포넌트 업데이트 +- Editable Field 컴포넌트 추가 (인라인 편집) +- Budget Navigation 컴포넌트 추가 (Sticky 탭 네비게이션) +- Option Card 컴포넌트 추가 (온라인/오프라인 배지) +- Selection Card 세부사항 보완 (이미지 비율, z-index) +- 이벤트 버블링 방지 가이드 추가 + ### Version 1.0 (2025-10-17) - 초안 작성 - 브랜드 아이덴티티 정의 diff --git a/design/uiux/uiux-design.md b/design/uiux/uiux-design.md new file mode 100644 index 0000000..b4e91d9 --- /dev/null +++ b/design/uiux/uiux-design.md @@ -0,0 +1,944 @@ +# KT AI 기반 소상공인 이벤트 자동 생성 서비스 - UI/UX 설계서 + +## 문서 정보 +- 작성일: 2025-10-21 +- 버전: 2.0 +- 기반 문서: 유저스토리 v2.0, 프로토타입 분석 +- 설계 원칙: Mobile First, 접근성 우선, 일관성 + +--- + +## 1. 서비스 개요 + +### 1.1 서비스 목적 +소상공인이 AI의 도움으로 전문 마케터 없이도 효과적인 이벤트를 기획하고 실행할 수 있도록 지원 + +### 1.2 핵심 가치 +- **혁신성**: AI 기반 자동화로 3분 만에 이벤트 콘텐츠 생성 +- **신뢰성**: KT 브랜드 기반의 안정적인 서비스 +- **접근성**: 초보자도 쉽게 사용할 수 있는 직관적 인터페이스 + +### 1.3 타겟 사용자 +- **Primary**: 마케팅 전문 지식이 부족한 소상공인 +- **Secondary**: 이벤트 마케팅 경험이 있는 중소기업 담당자 + +--- + +## 2. 화면 구성 + +### 2.1 전체 화면 구조 (총 17개) + +#### 인증 영역 (01~04) +- **01-로그인.html**: 이메일/비밀번호 로그인 +- **02-회원가입.html**: 신규 사용자 등록 +- **03-프로필.html**: 사용자 프로필 및 매장 정보 관리 +- **04-로그아웃확인.html**: 로그아웃 확인 모달 + +#### 대시보드 영역 (05~06) +- **05-대시보드.html**: 메인 홈 화면 + - KPI 요약 (진행 중 이벤트, 총 참여자, 평균 ROI) + - 빠른 시작 (새 이벤트, 분석) + - 진행 중인 이벤트 목록 + - 최근 활동 타임라인 +- **06-이벤트목록.html**: 전체 이벤트 목록 및 필터링 + +#### 이벤트 생성 플로우 (07~12, 7단계) +- **07-이벤트목적선택.html**: 이벤트 목적 선택 +- **08-AI이벤트추천.html**: AI 트렌드 분석 및 이벤트 추천 +- **09-콘텐츠미리보기.html**: SNS 이미지 스타일 선택 +- **10-콘텐츠편집.html**: 텍스트 및 색상 편집 +- **11-배포채널선택.html**: 배포 채널 선택 +- **12-최종승인.html**: 이벤트 최종 검토 및 승인 + +#### 이벤트 관리 및 모니터링 (13~17) +- **13-이벤트상세.html**: 이벤트 상세 정보 및 실시간 KPI +- **14-참여자목록.html**: 참여자 관리 및 필터링 +- **15-이벤트참여.html**: 사용자 이벤트 참여 화면 (고객용) +- **16-당첨자추첨.html**: 당첨자 추첨 및 관리 +- **17-성과분석.html**: 실시간 대시보드 및 성과 분석 + +### 2.2 화면 흐름도 + +``` +[01-로그인 / 02-회원가입] + ↓ +[05-대시보드] (Bottom Nav: 홈) + ↓ + ├─ [06-이벤트목록] (Bottom Nav: 이벤트) + │ ↓ + │ [13-이벤트상세] → [14-참여자목록] → [16-당첨자추첨] + │ ↓ + │ [17-성과분석] (Bottom Nav: 분석) + │ + └─ [새 이벤트 생성 플로우] (FAB) + ↓ + [07-목적선택] + ↓ + [08-AI추천] + ↓ + [09-콘텐츠미리보기] + ↓ + [10-콘텐츠편집] + ↓ + [11-배포채널선택] + ↓ + [12-최종승인] + ↓ + [13-이벤트상세] + +[03-프로필] (Bottom Nav: 프로필) + ↓ +[04-로그아웃확인] +``` + +--- + +## 3. 공통 컴포넌트 + +### 3.1 Navigation + +#### Bottom Navigation (모든 메인 화면) +``` +구조: 4개 탭 +- 홈: 05-대시보드.html +- 이벤트: 06-이벤트목록.html +- 분석: 17-성과분석.html +- 프로필: 03-프로필.html + +디자인: +- 높이: 60px +- 배경: White +- 그림자: 0 -2px 8px rgba(0, 0, 0, 0.08) +- 아이콘: Material Icons (24px) +- 활성화: KT Red (#E31E24) +- 비활성화: Gray (#9E9E9E) +``` + +#### Header +``` +구조: 타이틀 + 뒤로가기 + 프로필 +- 대시보드: 뒤로가기 없음 +- 이벤트 생성 플로우: 프로필 버튼 숨김 + +디자인: +- 높이: 56px +- 배경: White +- 제목: H1 (24px Bold) +- 아이콘: Material Icons (24px) +``` + +#### FAB (Floating Action Button) +``` +위치: 우측 하단 고정 +기능: 새 이벤트 생성 (07-이벤트목적선택.html) + +디자인: +- 크기: 56 x 56px +- 배경: KT Red (#E31E24) +- 아이콘: add (White, 24px) +- 그림자: 0 4px 12px rgba(227, 30, 36, 0.3) +- Bottom Navigation 위 80px +``` + +### 3.2 Card 컴포넌트 + +#### Default Card +```css +배경: #FFFFFF +테두리: 1px solid #E0E0E0 +둥근 모서리: 12px +그림자: 0 2px 8px rgba(0, 0, 0, 0.08) +패딩: 24px +``` + +#### Event Card +``` +구조: +- 이벤트명 (H3) +- 상태 배지 (진행중/예정/종료) +- 기간 정보 (Body-S) +- 통계 정보 (참여자, ROI 등) + +상태: +- Hover: 테두리 #E31E24, 그림자 증가 +- Selected: 테두리 2px solid #E31E24 +``` + +#### Selection Card (09-콘텐츠미리보기) +``` +특징: 카드 전체가 선택 가능한 영역 +- Radio 버튼 숨김 (기능은 유지) +- 선택 시 시각적 피드백: + - 테두리: 3px solid #E31E24 + - 그림자: 0 4px 12px rgba(227, 30, 36, 0.2) + - 우측 상단 체크 배지 표시 +- Hover: transform translateY(-2px) +``` + +### 3.3 Form 컴포넌트 + +#### Text Input +```css +높이: 48px +패딩: 16px +테두리: 1px solid #D9D9D9 +둥근 모서리: 8px +폰트: Body-L (16px Regular) + +Focus: +- 테두리: 2px solid #0066FF +- 그림자: 0 0 0 4px rgba(0, 102, 255, 0.1) + +Error: +- 테두리: 2px solid #D32F2F +- 그림자: 0 0 0 4px rgba(211, 47, 47, 0.1) +``` + +#### Checkbox & Radio +``` +크기: 24 x 24px (터치 영역 44px) + +Checkbox: +- 둥근 모서리: 4px +- Checked: 배경 #E31E24, 체크마크 White + +Radio: +- 둥근 모서리: 50% (원형) +- Selected: 테두리 #E31E24, 내부 점 12px +``` + +### 3.4 Modal 컴포넌트 + +#### Modal Dialog +``` +최대 너비: 400px (Mobile), 480px (Tablet+) +패딩: 24px +둥근 모서리: 16px +그림자: 0 8px 24px rgba(0, 0, 0, 0.2) + +Backdrop: rgba(0, 0, 0, 0.6) + +애니메이션: +- Show: opacity 0→1, scale 0.95→1, 250ms +- Hide: opacity 1→0, scale 1→0.95, 200ms +``` + +#### Bottom Sheet +``` +최대 높이: 80vh +둥근 모서리: 24px 24px 0 0 +Handle: 40px x 4px, #D9D9D9 (상단 중앙) + +애니메이션: +- Open: translateY(100% → 0), 300ms +- Close: translateY(0 → 100%), 250ms +``` + +#### Toast +``` +위치: 하단 중앙, Bottom Nav 위 80px +배경: #1A1A1A (90% opacity) +텍스트: White +패딩: 16px 24px +둥근 모서리: 8px +자동 닫힘: 3초 + +타입별 아이콘: +- Success: ✓ (#00C853) +- Error: ✕ (#D32F2F) +- Info: ⓘ (#0288D1) +``` + +--- + +## 4. 화면별 상세 설계 + +### 4.1 인증 영역 + +#### 01-로그인.html +``` +레이아웃: +- 로고 (상단 중앙) +- 로그인 폼 (중앙 정렬) +- 회원가입/비밀번호찾기 링크 (하단) + +컴포넌트: +- Email Input +- Password Input +- "로그인 유지" Checkbox +- Primary Button (로그인) +- Text Button (회원가입, 비밀번호 찾기) + +유저스토리: UFR-USER-020 +``` + +#### 02-회원가입.html +``` +레이아웃: 세로 스크롤 +섹션: +1. 기본 정보 + - 이름, 전화번호, 이메일, 비밀번호 +2. 매장 정보 + - 매장명, 업종, 주소, 영업시간 +3. 사업자번호 (검증 필요) + +컴포넌트: +- Text Input (각 필드) +- Select Dropdown (업종) +- Primary Button (회원가입) +- 검증 에러 메시지 + +유저스토리: UFR-USER-010 +``` + +#### 03-프로필.html +``` +레이아웃: +- 프로필 헤더 (상단) +- 편집 폼 (세로 스크롤) +- 저장/로그아웃 버튼 (하단 고정) + +섹션: +1. 사용자 정보 (아이콘 + 이름/이메일) +2. 기본 정보 편집 +3. 매장 정보 편집 +4. 비밀번호 변경 +5. 로그아웃 버튼 + +컴포넌트: +- Text Input (각 필드) +- Primary Button (저장) +- Text Button (로그아웃, Error 색상) + +유저스토리: UFR-USER-030 +Bottom Nav: 프로필 탭 활성화 +``` + +#### 04-로그아웃확인.html +``` +유형: Modal Dialog + +구조: +- 제목: "로그아웃 하시겠습니까?" +- 본문: 안내 메시지 +- 버튼: 취소 (Secondary) / 확인 (Primary) + +유저스토리: UFR-USER-040 +``` + +### 4.2 대시보드 영역 + +#### 05-대시보드.html +``` +레이아웃: 세로 스크롤 + +섹션: +1. KPI 요약 (그리드) + - 진행 중 이벤트 수 + - 총 참여자 수 + - 평균 ROI + +2. 빠른 시작 (2개 카드) + - 새 이벤트 만들기 + - 분석 보기 + +3. 진행 중인 이벤트 (카드 리스트) + - 최대 5개 표시 + - "전체보기" 링크 + +4. 최근 활동 (타임라인) + +컴포넌트: +- KPI Card (3개, 그리드) +- Action Card (2개, 그리드) +- Event Card (리스트) +- Timeline Item (리스트) +- FAB (새 이벤트) + +유저스토리: UFR-EVENT-010 +Bottom Nav: 홈 탭 활성화 +``` + +#### 06-이벤트목록.html +``` +레이아웃: 세로 스크롤 + +섹션: +1. 검색 바 +2. 필터 (상태, 기간) +3. 정렬 (최신순, 참여자순, ROI순) +4. 이벤트 카드 리스트 +5. 페이지네이션 + +컴포넌트: +- Search Input +- Filter Chips +- Dropdown (정렬) +- Event Card (리스트) +- Pagination + +유저스토리: UFR-EVENT-070 +Bottom Nav: 이벤트 탭 활성화 +``` + +### 4.3 이벤트 생성 플로우 + +#### 07-이벤트목적선택.html +``` +레이아웃: 세로 스크롤 + +섹션: +- 제목: "이벤트 목적을 선택하세요" +- 옵션 카드 (4개) + 1. 신규 고객 유치 + 2. 재방문 유도 + 3. 매출 증대 + 4. 인지도 향상 + +컴포넌트: +- Option Card (4개, Radio 버튼 포함) + - 아이콘 + 제목 + 설명 +- Primary Button (다음) + +상호작용: +- 카드 선택 시 강조 표시 +- 선택 후 다음 버튼 활성화 + +유저스토리: UFR-EVENT-020 +Progress: 1/7 단계 +``` + +#### 08-AI이벤트추천.html +``` +레이아웃: 세로 스크롤 + +섹션: +1. AI 트렌드 분석 결과 (상단 카드) + - 업종 트렌드 (store 아이콘) + - 지역 트렌드 (location_on 아이콘) + - 시즌 트렌드 (wb_sunny 아이콘) + +2. 예산별 추천 이벤트 제목 및 설명 + - "예산별 추천 이벤트" + - "각 예산별 2가지 방식 (온라인 1개, 오프라인 1개)을 추천합니다" + +3. 예산 선택 네비게이션 (Sticky) + - 💰 저비용 / 💰💰 중비용 / 💰💰💰 고비용 + - 탭 형태, 클릭 시 해당 섹션으로 스크롤 + +4. 예산별 추천 이벤트 (각 예산당 2개 카드) + - 저비용 (25~30만원): 온라인/오프라인 각 1개 + - 중비용 (60~70만원): 온라인/오프라인 각 1개 + - 고비용 (200~250만원): 온라인/오프라인 각 1개 + - 각 카드 구성: + - 온라인/오프라인 배지 + - 이벤트 제목 (인라인 편집 가능, editable-field) + - 경품명 (인라인 편집 가능, editable-field) + - 참여 방법 + - 예상 통계 (참여자 수, 비용, ROI) + - Radio 버튼 (카드 내부) + +컴포넌트: +- Trend Analysis Card (3개 트렌드 항목) +- Budget Navigation (Sticky, 3개 버튼) +- Option Card (총 6개, Radio 선택) + - 온라인/오프라인 배지 + - Editable Field (제목, 경품) + - Radio 버튼 (visible) +- Primary Button (다음) + +상호작용: +- 예산 네비게이션 클릭: 해당 섹션으로 smooth scroll +- Editable Field 클릭: 인라인 편집 활성화 +- 제목/경품 hover: 편집 가능 표시 (점선 테두리) +- Radio 선택: 1개만 선택 가능 +- 선택 후 다음 버튼 활성화 + +유저스토리: UFR-EVENT-030, UFR-AI-010 +Progress: 2/7 단계 + +특징: +- 예산별 2가지 방식 제공 (온라인/오프라인) +- 총 6개 옵션 중 1개 선택 +- 인라인 편집으로 즉시 커스터마이징 +``` + +#### 09-콘텐츠미리보기.html +``` +레이아웃: 세로 스크롤 + +섹션: +- 제목: "SNS 이미지 스타일을 선택하세요" +- 스타일 카드 (5개 그리드) + 1. 심플 - 깔끔하고 읽기 쉬운 디자인 + 2. 모던 - 트렌디하고 세련된 디자인 + 3. 귀여움 - 친근하고 따뜻한 디자인 + 4. 고급스러움 - 프리미엄 느낌의 디자인 + 5. 트렌디 - MZ세대 감성의 디자인 + +컴포넌트: +- Style Selection Card (5개, 카드 선택 UI) + 구조: + - Selected Badge (우측 상단, 조건부) + - 크기: 32x32px + - 배경: KT Red (#E31E24) + - 아이콘: check (White, 20px) + - 둥근 모서리: 50% (원형) + - Image Preview (1:1 비율) + - 배경: Gray-100 (플레이스홀더) + - 둥근 모서리: 12px + - Style Name (H3) + - Description (Body-S, Secondary) + - "크게보기" 버튼 (Secondary Button, Small) + - Radio Input (display: none) + + 스타일: + - 기본: border 3px solid transparent + - Hover: transform translateY(-2px), 그림자 증가 + - Selected: border-color KT Red, 그림자 강조 + - Cursor: pointer + +- Fullscreen Modal + - 배경: rgba(0, 0, 0, 0.95) + - Close 버튼 (우측 상단) + - Image (contain, max 100%) + +- Primary Button (다음) + +상호작용: +- 카드 클릭: Radio 선택 토글 +- Selected 시: 테두리 강조 + 체크 배지 표시 +- "크게보기" 클릭: 전체화면 모달 (이벤트 버블링 방지) +- 모달 닫기: 배경 클릭 or X 버튼 +- AI 생성 시간: 약 5초 (로딩 표시) + +유저스토리: UFR-CONT-010 +Progress: 3/7 단계 + +구현 특징: +- Radio 버튼 숨김 (폼 제출용으로만 사용) +- 카드 전체가 label로 작동 +- 이벤트 버블링 방지 (stopPropagation) +- 키보드 접근성 지원 (Tab, Enter) +- transition: all 0.3s ease +``` + +#### 10-콘텐츠편집.html +``` +레이아웃: +- Mobile: 세로 스택 (편집폼 → 미리보기) +- Desktop: 좌우 분할 (편집폼 | 미리보기) + +섹션: +1. 텍스트 편집 (좌측) + - 제목 입력 + - 경품 입력 + - 참여 안내 입력 + +2. 미리보기 (우측) + - 실시간 업데이트 + +삭제된 기능: +- 로고 위치 선택 (상단/하단/중앙) +- 로고 크기 조정 + +컴포넌트: +- Text Input (제목) +- Text Input (경품) +- Textarea (참여 안내) +- Preview Card (실시간) +- Primary Button (다음) +- Secondary Button (저장) + +상호작용: +- 입력 시 실시간 미리보기 업데이트 + +유저스토리: UFR-CONT-020 +Progress: 4/7 단계 +``` + +#### 11-배포채널선택.html +``` +레이아웃: 세로 스크롤 + +섹션: +1. 채널 선택 (복수 선택) + - 우리동네TV (Checkbox) + - 링고비즈 (Checkbox) + - SNS (Checkbox) + - QR코드 (Checkbox) + +2. 채널별 옵션 (조건부 표시) + - 우리동네TV: 지역 선택 + - SNS: 플랫폼 선택 (Instagram, Naver, Facebook) + - QR코드: 생성 옵션 + +컴포넌트: +- Checkbox List (채널) +- Conditional Options (각 채널) +- Primary Button (다음) + +상호작용: +- 채널 선택 시 해당 옵션 표시 +- 최소 1개 선택 필수 + +유저스토리: UFR-DIST-010 +Progress: 5/7 단계 +``` + +#### 12-최종승인.html +``` +레이아웃: 세로 스크롤 + +섹션: +1. 이벤트 요약 + - 제목, 경품, 참여 방법 +2. 이미지 미리보기 +3. 배포 채널 +4. 일정 설정 + - 시작일: 즉시 or 예약 + - 종료일: 선택 + +컴포넌트: +- Summary Card (요약 정보) +- Image Preview +- Channel Badges +- Date Picker (일정) +- Primary Button (승인 및 배포) +- Secondary Button (수정) + +상호작용: +- 수정: 이전 단계로 이동 +- 승인: 이벤트 생성 및 배포 + +유저스토리: UFR-DIST-020 +Progress: 7/7 단계 +``` + +### 4.4 이벤트 관리 및 모니터링 + +#### 13-이벤트상세.html +``` +레이아웃: 세로 스크롤 + +섹션: +1. 이벤트 헤더 + - 이미지 썸네일 + - 제목, 상태, 기간 + +2. 실시간 KPI (4개 카드) + - 참여자 수 + - 조회수 + - ROI + - 전환율 + +3. 빠른 액션 + - 참여자 목록 + - 당첨자 관리 + - 성과 분석 + - 이벤트 수정 + +4. 참여 추이 차트 + +컴포넌트: +- Event Header (이미지 + 정보) +- KPI Card (4개, 그리드) +- Action Button (4개, 그리드) +- Chart (참여 추이) + +유저스토리: UFR-EVENT-060 +Bottom Nav: 이벤트 탭 활성화 +``` + +#### 14-참여자목록.html +``` +레이아웃: 세로 스크롤 + +섹션: +1. 검색 바 +2. 필터 (채널, 상태) +3. 참여자 카드 리스트 +4. 페이지네이션 +5. 엑셀 다운로드 (Desktop) + +컴포넌트: +- Search Input +- Filter Dropdowns +- Participant Card (리스트) + - 이름, 전화번호, 참여 경로, 일시, 당첨 여부 +- Pagination +- Download Button (Desktop) + +상호작용: +- 카드 클릭: 참여자 상세 모달 + +유저스토리: UFR-PART-020 +``` + +#### 15-이벤트참여.html +``` +유형: 고객용 화면 (공개 URL) + +레이아웃: 세로 스크롤 + +섹션: +1. 이벤트 이미지 +2. 이벤트 정보 + - 제목, 경품, 참여 방법 +3. 참여 폼 + - 이름, 전화번호 입력 +4. 개인정보 동의 +5. 참여하기 버튼 + +컴포넌트: +- Event Banner (이미지) +- Info Card (정보) +- Text Input (이름, 전화번호) +- Checkbox (동의) +- Primary Button (참여하기) + +상호작용: +- 유효성 검증 +- 중복 참여 방지 +- 참여 완료 모달 + +유저스토리: UFR-PART-010 +``` + +#### 16-당첨자추첨.html +``` +레이아웃: 세로 스크롤 + +섹션: +1. 추첨 설정 + - 당첨자 수 입력 + - 자동 추첨 버튼 + +2. 당첨자 목록 (추첨 후) + - 이름, 전화번호, 당첨 경품 + +3. 액션 + - 문자 발송 + - 엑셀 다운로드 + +컴포넌트: +- Number Input (당첨자 수) +- Primary Button (추첨) +- Winner Card (리스트) +- Action Buttons (문자, 다운로드) + +상호작용: +- 추첨: 애니메이션 효과 +- 결과: 즉시 표시 + +유저스토리: UFR-PART-030 +``` + +#### 17-성과분석.html +``` +레이아웃: 세로 스크롤 + +섹션: +1. 요약 KPI (4개 카드) + - 참여자 수 + - 총 비용 + - 예상 수익 + - ROI + +2. 차트 (2개, 그리드) + - 채널별 성과 (파이 차트) + - 시간대별 참여 추이 (라인 차트) + +3. 상세 분석 (2개, 그리드) + - ROI 상세 (테이블) + - 참여자 프로필 (바 차트) + +컴포넌트: +- Summary Card (4개, 그리드) +- Chart Card (파이, 라인) +- Table (ROI 상세) +- Bar Chart (참여자 프로필) +- Refresh Indicator (실시간 업데이트) + +상호작용: +- Pull to Refresh (모바일) +- 5분마다 자동 갱신 + +유저스토리: UFR-ANAL-010 +Bottom Nav: 분석 탭 활성화 +``` + +--- + +## 5. 반응형 디자인 + +### 5.1 Breakpoints +``` +Mobile (기본): 320px ~ 767px +Tablet: 768px ~ 1023px +Desktop: 1024px 이상 +``` + +### 5.2 레이아웃 변화 + +#### 대시보드 (05) +``` +Mobile: KPI 세로 스택 +Tablet: KPI 2x2 그리드, 이벤트 2열 +Desktop: KPI 4열, 이벤트 3열 + 사이드바 +``` + +#### 이벤트 생성 (09, 10) +``` +Mobile: 세로 스택 +Tablet: 세로 스택 (간격 증가) +Desktop: 좌우 분할 (편집 | 미리보기) +``` + +#### 성과 분석 (17) +``` +Mobile: 차트 세로 스택 +Tablet: 차트 2x1 그리드 +Desktop: 차트 2x2 그리드 +``` + +--- + +## 6. 인터랙션 패턴 + +### 6.1 Navigation +- **Bottom Nav**: 탭 클릭 시 즉시 화면 전환 +- **Back Button**: 이전 화면으로 이동 +- **FAB**: 새 이벤트 생성 플로우 시작 + +### 6.2 Form +- **실시간 검증**: 입력 필드 blur 시 유효성 검사 +- **에러 메시지**: 필드 하단에 빨간색 텍스트 +- **성공 피드백**: Toast 메시지 + +### 6.3 Loading States +- **AI 처리**: Progress Indicator + 예상 시간 +- **데이터 로딩**: Skeleton Screen +- **버튼 클릭**: Spinner + 비활성화 + +### 6.4 Feedback +- **성공**: Green Toast + 체크 아이콘 +- **에러**: Red Toast + X 아이콘 +- **정보**: Blue Toast + i 아이콘 + +### 6.5 Gestures (Mobile) +- **Swipe**: 이벤트 카드 좌우 스와이프 (삭제/편집) +- **Pull to Refresh**: 대시보드, 성과 분석 +- **Long Press**: 컨텍스트 메뉴 표시 + +--- + +## 7. 접근성 고려사항 + +### 7.1 WCAG 2.1 AA 준수 +- **색상 대비**: 최소 4.5:1 (텍스트), 3:1 (UI 요소) +- **터치 영역**: 최소 44x44px +- **키보드 네비게이션**: 모든 인터랙티브 요소 접근 가능 +- **Focus Indicator**: 명확한 포커스 표시 + +### 7.2 스크린 리더 지원 +- **ARIA Labels**: 모든 버튼, 링크, 폼 필드 +- **ARIA Roles**: 적절한 역할 지정 +- **Live Regions**: 동적 콘텐츠 업데이트 알림 + +### 7.3 대안 제공 +- **색상 외 표현**: 아이콘 + 텍스트 조합 +- **키보드 대안**: 드래그 앤 드롭 → 버튼 클릭 +- **음성 대안**: 이미지 alt 텍스트 + +--- + +## 8. 성능 최적화 + +### 8.1 이미지 +- **포맷**: WebP (fallback: JPG) +- **압축**: Quality 80-85% +- **Lazy Loading**: 스크롤 시 로드 + +### 8.2 폰트 +- **Font Display**: swap +- **Preload**: 주요 폰트 +- **Subset**: 자주 쓰는 글자만 + +### 8.3 애니메이션 +- **GPU 가속**: transform, opacity +- **Will-Change**: 애니메이션 직전만 적용 + +--- + +## 9. 에러 처리 + +### 9.1 네트워크 에러 +``` +표시: Toast (빨간색) +메시지: "네트워크 연결을 확인해주세요" +액션: 재시도 버튼 +``` + +### 9.2 Validation 에러 +``` +표시: Input 하단 메시지 +색상: Error Red (#D32F2F) +예시: "이메일 형식이 올바르지 않습니다" +``` + +### 9.3 서버 에러 +``` +표시: Modal Dialog +메시지: "일시적인 오류가 발생했습니다. 잠시 후 다시 시도해주세요." +액션: 확인 버튼 +``` + +### 9.4 Empty State +``` +표시: 중앙 정렬 메시지 + 아이콘 +예시: +- "아직 이벤트가 없습니다" +- "참여자가 없습니다" +액션: 관련 CTA 버튼 +``` + +--- + +## 10. 디자인 시스템 참조 + +- **스타일 가이드**: design/uiux/style-guide.md +- **색상 시스템**: KT Red (#E31E24), AI Blue (#0066FF) +- **타이포그래피**: Pretendard, 8단계 스케일 +- **간격 시스템**: 4px 기반, 6단계 +- **컴포넌트**: Button, Card, Input, Modal, Toast, Bottom Nav +- **아이콘**: Material Icons Outlined/Filled + +--- + +## 11. 변경 이력 + +### Version 2.1 (2025-10-21) +- 프로토타입 실제 구현 내용 반영 +- 08-AI이벤트추천: 예산별 2가지 방식(온라인/오프라인) 상세화 +- 08-AI이벤트추천: Budget Navigation (Sticky) 추가 +- 08-AI이벤트추천: Editable Field (인라인 편집) 기능 추가 +- 09-콘텐츠미리보기: Selection Card 세부 구현 상세 기술 +- 09-콘텐츠미리보기: Fullscreen Modal, 이벤트 버블링 방지 추가 + +### Version 2.0 (2025-10-21) +- 프로토타입 분석 기반 전면 개정 +- 화면 번호 체계 정립 (01~17번) +- 네비게이션 구조 변경 (햄버거 메뉴 제거, Bottom Nav 4탭) +- 이벤트 생성 플로우 상세화 (7단계) +- 카드 선택 UI 패턴 추가 (09-콘텐츠미리보기) +- 로고 위치 선택 삭제 (10-콘텐츠편집) +- 성과 분석 Bottom Nav 추가 (17-성과분석) +- 실시간 KPI 업데이트 추가 (13-이벤트상세) + +### Version 1.0 (2025-10-17) +- 초안 작성 + +--- + +**문서 끝**