architecture pattern

design/uiux/style-guide.md

@@ -1,6 +1,7 @@
 # KT AI 기반 소상공인 이벤트 자동 생성 서비스 - 스타일 가이드
 
 ## 문서 정보
+
 - 작성일: 2025-10-17
 - 버전: 1.0
 - 기반 설계: UI/UX 설계서 v1.0
@@ -11,6 +12,7 @@
 ## 1. 브랜드 아이덴티티
 
 ### 1.1 브랜드 비전
+
 **"AI로 간편하게, 성공으로 확실하게"**
 
 소상공인이 전문 마케터 없이도 AI의 도움으로 효과적인 이벤트를 기획하고 실행할 수 있도록 돕는 혁신적인 서비스
@@ -18,16 +20,19 @@
 ### 1.2 디자인 철학
 
 #### 혁신성 (Innovation)
+
 - 최신 AI 기술을 활용한 자동화된 이벤트 생성
 - 복잡한 마케팅 프로세스를 단순화
 - 3분 만에 완성되는 이벤트 콘텐츠
 
 #### 신뢰성 (Trust)
+
 - KT 브랜드의 안정성과 신뢰감
 - 명확한 프로세스와 투명한 결과 제공
 - 실시간 성과 모니터링
 
 #### 친근함 (Approachability)
+
 - 소상공인 눈높이에 맞춘 쉬운 인터페이스
 - 초보자도 이해할 수 있는 명확한 안내
 - 따뜻하고 친근한 톤앤매너
@@ -35,11 +40,13 @@
 ### 1.3 브랜드 컬러
 
 **Primary Color: KT Red**
+
 - 정체성, 브랜드 대표 색상
 - 행동 유도(CTA), 강조 요소
 - KT 브랜드 헤리티지 계승
 
 **Secondary Color: AI Blue**
+
 - AI 기능, 기술적 신뢰감
 - 정보 전달, 안내 요소
 - 혁신과 미래지향성
@@ -49,6 +56,7 @@
 ## 2. 디자인 원칙
 
 ### 2.1 명확성 (Clarity)
+
 **사용자가 무엇을 해야 하는지 항상 명확해야 합니다**
 
 - 직관적인 아이콘과 레이블 사용
@@ -56,12 +64,14 @@
 - 현재 위치와 다음 단계를 항상 표시
 
 예시:
+
 ```
 ✓ 좋은 예: "새 이벤트 만들기" + 큰 CTA 버튼
 ✗ 나쁜 예: "시작하기" (무엇을 시작하는지 불분명)
 ```
 
 ### 2.2 효율성 (Efficiency)
+
 **최소한의 단계로 목표를 달성할 수 있어야 합니다**
 
 - 불필요한 스텝 제거
@@ -69,11 +79,13 @@
 - AI가 대부분의 작업 자동화
 
 목표:
+
 - 이벤트 기획: 10초 이내
 - 콘텐츠 생성: 3분 이내
 - 배포 설정: 1분 이내
 
 ### 2.3 신뢰성 (Trust)
+
 **AI 처리 과정과 결과를 투명하게 보여줍니다**
 
 - AI 처리 시간 명시 (예: "AI가 분석중입니다 약 3초 소요")
@@ -81,6 +93,7 @@
 - 언제든 이전 단계로 돌아갈 수 있음
 
 ### 2.4 친근함 (Approachability)
+
 **초보자도 쉽게 사용할 수 있어야 합니다**
 
 - 전문 용어 최소화
@@ -88,6 +101,7 @@
 - 도움말과 예시 제공
 
 ### 2.5 일관성 (Consistency)
+
 **모든 화면에서 동일한 패턴을 유지합니다**
 
 - 컴포넌트 재사용
@@ -101,6 +115,7 @@
 ### 3.1 Primary Color (주 색상)
 
 #### KT Red - 브랜드 정체성
+
 ```
 Main:   #E31E24  // CTA 버튼, 주요 액션, 활성화 상태
 Light:  #FF4D52  // 호버 상태, 배경 강조
@@ -114,12 +129,14 @@ Dark:   #C71820  // 눌림 상태, 진한 강조
 ```
 
 #### 색상 접근성
+
 - White 배경 대비: 7.2:1 (WCAG AAA)
 - Gray-100 배경 대비: 6.8:1 (WCAG AAA)
 
 ### 3.2 Secondary Color (보조 색상)
 
 #### AI Blue - 혁신과 신뢰
+
 ```
 Main:   #0066FF  // AI 기능 강조, 정보 아이콘
 Light:  #4D94FF  // AI 로딩 배경, 안내 영역
@@ -166,6 +183,7 @@ Info (정보):     #0288D1  // 안내, 팁, 추가 정보
 ### 3.5 Gradient (그라데이션)
 
 #### AI Feature Gradient
+
 ```
 Primary Gradient:
   background: linear-gradient(135deg, #E31E24 0%, #FF4D52 100%);
@@ -183,13 +201,14 @@ Secondary Gradient:
 ### 4.1 Font Family
 
 **Primary: Pretendard**
+
 ```css
-font-family: 'Pretendard', -apple-system, BlinkMacSystemFont,
+font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
-             'Segoe UI', 'Roboto', 'Helvetica Neue',
+  "Helvetica Neue", system-ui, sans-serif;
-             system-ui, sans-serif;
 ```
 
 **선택 이유:**
+
 - 한글 가독성이 뛰어남
 - 다양한 Font Weight 지원 (100~900)
 - 모던하고 깔끔한 디자인
@@ -267,6 +286,7 @@ Bold (700):      제목, 헤딩
 ### 4.4 Responsive Typography
 
 **Tablet (768px~)**
+
 ```
 Display: 32px (+4px)
 H1: 28px (+4px)
@@ -279,6 +299,7 @@ Button: 16px (유지)
 ```
 
 **Desktop (1024px~)**
+
 ```
 Display: 36px (+8px)
 H1: 32px (+8px)
@@ -295,6 +316,7 @@ Button: 16px (유지)
 ## 5. 간격 시스템 (Spacing)
 
 ### 5.1 Base Unit
+
 **4px Grid System** - 모든 간격은 4의 배수
 
 ### 5.2 Spacing Scale
@@ -311,6 +333,7 @@ XL (Extra Large):  32px  // 섹션 간 간격
 ### 5.3 Component Spacing
 
 #### Button
+
 ```
 Padding (세로 x 가로):
 - Large:  16px x 24px (높이 48px)
@@ -321,12 +344,14 @@ Button 간 간격: 12px (S + XS)
 ```
 
 #### Card
+
 ```
 내부 패딩: 24px (L)
 카드 간 간격: 16px (M)
 ```
 
 #### Input Field
+
 ```
 내부 패딩: 16px (M)
 레이블-입력 간격: 8px (S)
@@ -334,6 +359,7 @@ Button 간 간격: 12px (S + XS)
 ```
 
 #### Screen Margins
+
 ```
 Mobile:  20px (양쪽)
 Tablet:  40px (양쪽)
@@ -343,6 +369,7 @@ Desktop: 80px (양쪽, 최대 1200px container)
 ### 5.4 Touch Target
 
 **WCAG 2.1 AA 준수**
+
 ```
 최소 터치 영역: 44 x 44px
 권장 터치 영역: 48 x 48px
@@ -361,6 +388,7 @@ Desktop: 80px (양쪽, 최대 1200px container)
 ### 6.1 Button (버튼)
 
 #### Primary Button
+
 ```
 배경: #E31E24 (KT Red)
 텍스트: #FFFFFF (White)
@@ -375,6 +403,7 @@ Desktop: 80px (양쪽, 최대 1200px container)
 ```
 
 #### Secondary Button
+
 ```
 배경: #FFFFFF (White)
 텍스트: #E31E24 (KT Red)
@@ -389,6 +418,7 @@ Desktop: 80px (양쪽, 최대 1200px container)
 ```
 
 #### Text Button
+
 ```
 배경: 없음
 텍스트: #E31E24 (KT Red)
@@ -402,6 +432,7 @@ Desktop: 80px (양쪽, 최대 1200px container)
 ```
 
 #### Button Sizes
+
 ```
 Large:
 - 높이: 48px
@@ -425,6 +456,7 @@ Small:
 ### 6.2 Card (카드)
 
 #### Default Card
+
 ```
 배경: #FFFFFF (White)
 테두리: 1px solid #E0E0E0
@@ -439,6 +471,7 @@ Small:
 ```
 
 #### Event Card (이벤트 카드)
+
 ```
 배경: #FFFFFF
 둥근 모서리: 12px
@@ -455,6 +488,7 @@ Small:
 ```
 
 #### Selection Card (선택형 카드)
+
 ```
 사용: 옵션 선택 화면 (09-콘텐츠미리보기.html)
 특징: 카드 전체가 선택 가능한 인터랙티브 영역
@@ -523,6 +557,7 @@ Radio Button:
 ```
 
 #### Stat Card (지표 카드)
+
 ```
 배경: Gradient 또는 Solid
 둥근 모서리: 16px
@@ -539,6 +574,7 @@ Radio Button:
 ### 6.3 Input Field (입력 필드)
 
 #### Text Input
+
 ```
 배경: #FFFFFF (White)
 테두리: 1px solid #D9D9D9
@@ -556,6 +592,7 @@ Radio Button:
 ```
 
 #### Textarea
+
 ```
 배경: #FFFFFF
 테두리: 1px solid #D9D9D9
@@ -569,6 +606,7 @@ Resize: vertical (세로 방향만)
 ```
 
 #### Editable Field (인라인 편집)
+
 ```
 사용: 08-AI이벤트추천.html (제목, 경품 편집)
 특징: contenteditable을 활용한 인라인 편집
@@ -610,6 +648,7 @@ Resize: vertical (세로 방향만)
 ```
 
 #### Placeholder
+
 ```
 색상: #9E9E9E (Gray-500)
 폰트: Body-L (16px Regular)
@@ -619,6 +658,7 @@ Resize: vertical (세로 방향만)
 ### 6.4 Checkbox & Radio
 
 #### Checkbox
+
 ```
 크기: 24 x 24px (터치 영역 44px)
 둥근 모서리: 4px
@@ -631,6 +671,7 @@ Resize: vertical (세로 방향만)
 ```
 
 #### Radio Button
+
 ```
 크기: 24 x 24px (터치 영역 44px)
 둥근 모서리: 50% (원형)
@@ -766,6 +807,7 @@ Editable Field:
 ### 6.8 Stepper (단계 표시)
 
 #### Progress Stepper (AI 이벤트 생성)
+
 ```
 전체 높이: 48px
 배경: #F5F5F5
@@ -783,6 +825,7 @@ Editable Field:
 ```
 
 #### Step Indicator (단계별 표시)
+
 ```
 ┌────┐  ┌────┐  ┌────┐
 │ ✓  │─ │ 2  │─ │ 3  │
@@ -854,6 +897,7 @@ Desktop:
 ### 7.3 Grid System
 
 #### Mobile Grid (4 Columns)
+
 ```
 ┌─────┬─────┬─────┬─────┐
 │  1  │  2  │  3  │  4  │
@@ -865,6 +909,7 @@ Desktop:
 ```
 
 #### Tablet Grid (8 Columns)
+
 ```
 ┌──┬──┬──┬──┬──┬──┬──┬──┐
 │ 1│ 2│ 3│ 4│ 5│ 6│ 7│ 8│
@@ -877,6 +922,7 @@ Desktop:
 ```
 
 #### Desktop Grid (12 Columns)
+
 ```
 ┌┬┬┬┬┬┬┬┬┬┬┬┬┐
 │││││││││││││
@@ -895,6 +941,7 @@ Desktop:
 ### 8.1 AI 처리 상태 컴포넌트
 
 #### Loading Skeleton
+
 ```
 배경: #F5F5F5
 애니메이션: Shimmer (좌→우 반짝임)
@@ -911,6 +958,7 @@ Duration: 1.5s infinite
 ```
 
 #### Progress Indicator (AI 단계별)
+
 ```
 ┌─────────────────────────────┐
 │ 🤖 AI가 트렌드를 분석중입니다  │
@@ -927,6 +975,7 @@ Duration: 1.5s infinite
 ```
 
 #### Spinner (간단한 로딩)
+
 ```
 크기: 32px
 두께: 3px
@@ -939,6 +988,7 @@ Duration: 1.5s infinite
 ### 8.2 AI 결과 카드
 
 #### AI 생성 옵션 카드 (선택형)
+
 ```
 ┌─────────────────────────────┐
 │ ◯ [이미지 미리보기]          │
@@ -959,6 +1009,7 @@ Duration: 1.5s infinite
 ```
 
 #### AI 추천 배지
+
 ```
 배경: linear-gradient(135deg, #0066FF 0%, #4D94FF 100%)
 텍스트: White
@@ -973,6 +1024,7 @@ Duration: 1.5s infinite
 ### 8.3 Real-time Dashboard Components
 
 #### KPI Card (핵심 지표)
+
 ```
 ┌─────────────────────────┐
 │ 📊 참여자 수             │
@@ -993,6 +1045,7 @@ Duration: 1.5s infinite
 ```
 
 #### Chart Container
+
 ```
 배경: White
 둥근 모서리: 12px
@@ -1176,6 +1229,7 @@ Linear (일정):
 ### 10.3 주요 애니메이션
 
 #### Page Transition
+
 ```
 진입:
 - opacity: 0 → 1
@@ -1191,6 +1245,7 @@ Linear (일정):
 ```
 
 #### Card Hover
+
 ```
 transform: translateY(0) → translateY(-4px)
 box-shadow: 증가 (0 2px 8px → 0 8px 16px)
@@ -1199,6 +1254,7 @@ easing: ease-out
 ```
 
 #### Button Press
+
 ```
 transform: scale(1) → scale(0.95)
 duration: 100ms
@@ -1456,6 +1512,7 @@ Secondary:
 ## 15. 변경 이력
 
 ### Version 1.1 (2025-10-21)
+
 - 프로토타입 기반 컴포넌트 업데이트
 - Editable Field 컴포넌트 추가 (인라인 편집)
 - Budget Navigation 컴포넌트 추가 (Sticky 탭 네비게이션)
@@ -1464,6 +1521,7 @@ Secondary:
 - 이벤트 버블링 방지 가이드 추가
 
 ### Version 1.0 (2025-10-17)
+
 - 초안 작성
 - 브랜드 아이덴티티 정의
 - 디자인 원칙 5가지 수립

design/uiux/uiux-design.md

@@ -1,6 +1,7 @@
 # KT AI 기반 소상공인 이벤트 자동 생성 서비스 - UI/UX 설계서
 
 ## 문서 정보
+
 - 작성일: 2025-10-21
 - 버전: 2.0
 - 기반 문서: 유저스토리 v2.0, 프로토타입 분석
@@ -11,14 +12,17 @@
 ## 1. 서비스 개요
 
 ### 1.1 서비스 목적
+
 소상공인이 AI의 도움으로 전문 마케터 없이도 효과적인 이벤트를 기획하고 실행할 수 있도록 지원
 
 ### 1.2 핵심 가치
+
 - **혁신성**: AI 기반 자동화로 3분 만에 이벤트 콘텐츠 생성
 - **신뢰성**: KT 브랜드 기반의 안정적인 서비스
 - **접근성**: 초보자도 쉽게 사용할 수 있는 직관적 인터페이스
 
 ### 1.3 타겟 사용자
+
 - **Primary**: 마케팅 전문 지식이 부족한 소상공인
 - **Secondary**: 이벤트 마케팅 경험이 있는 중소기업 담당자
 
@@ -29,12 +33,14 @@
 ### 2.1 전체 화면 구조 (총 17개)
 
 #### 인증 영역 (01~04)
+
 - **01-로그인.html**: 이메일/비밀번호 로그인
 - **02-회원가입.html**: 신규 사용자 등록
 - **03-프로필.html**: 사용자 프로필 및 매장 정보 관리
 - **04-로그아웃확인.html**: 로그아웃 확인 모달
 
 #### 대시보드 영역 (05~06)
+
 - **05-대시보드.html**: 메인 홈 화면
   - KPI 요약 (진행 중 이벤트, 총 참여자, 평균 ROI)
   - 빠른 시작 (새 이벤트, 분석)
@@ -43,6 +49,7 @@
 - **06-이벤트목록.html**: 전체 이벤트 목록 및 필터링
 
 #### 이벤트 생성 플로우 (07~12, 7단계)
+
 - **07-이벤트목적선택.html**: 이벤트 목적 선택
 - **08-AI이벤트추천.html**: AI 트렌드 분석 및 이벤트 추천
 - **09-콘텐츠미리보기.html**: SNS 이미지 스타일 선택
@@ -51,6 +58,7 @@
 - **12-최종승인.html**: 이벤트 최종 검토 및 승인
 
 #### 이벤트 관리 및 모니터링 (13~17)
+
 - **13-이벤트상세.html**: 이벤트 상세 정보 및 실시간 KPI
 - **14-참여자목록.html**: 참여자 관리 및 필터링
 - **15-이벤트참여.html**: 사용자 이벤트 참여 화면 (고객용)
@@ -98,6 +106,7 @@
 ### 3.1 Navigation
 
 #### Bottom Navigation (모든 메인 화면)
+
 ```
 구조: 4개 탭
 - 홈: 05-대시보드.html
@@ -115,6 +124,7 @@
 ```
 
 #### Header
+
 ```
 구조: 타이틀 + 뒤로가기 + 프로필
 - 대시보드: 뒤로가기 없음
@@ -128,6 +138,7 @@
 ```
 
 #### FAB (Floating Action Button)
+
 ```
 위치: 우측 하단 고정
 기능: 새 이벤트 생성 (07-이벤트목적선택.html)
@@ -143,6 +154,7 @@
 ### 3.2 Card 컴포넌트
 
 #### Default Card
+
 ```css
 배경: #FFFFFF
 테두리: 1px solid #E0E0E0
@@ -152,6 +164,7 @@
 ```
 
 #### Event Card
+
 ```
 구조:
 - 이벤트명 (H3)
@@ -165,6 +178,7 @@
 ```
 
 #### Selection Card (09-콘텐츠미리보기)
+
 ```
 특징: 카드 전체가 선택 가능한 영역
 - Radio 버튼 숨김 (기능은 유지)
@@ -178,6 +192,7 @@
 ### 3.3 Form 컴포넌트
 
 #### Text Input
+
 ```css
 높이: 48px
 패딩: 16px
@@ -195,6 +210,7 @@ Error:
 ```
 
 #### Checkbox & Radio
+
 ```
 크기: 24 x 24px (터치 영역 44px)
 
@@ -210,6 +226,7 @@ Radio:
 ### 3.4 Modal 컴포넌트
 
 #### Modal Dialog
+
 ```
 최대 너비: 400px (Mobile), 480px (Tablet+)
 패딩: 24px
@@ -224,6 +241,7 @@ Backdrop: rgba(0, 0, 0, 0.6)
 ```
 
 #### Bottom Sheet
+
 ```
 최대 높이: 80vh
 둥근 모서리: 24px 24px 0 0
@@ -235,6 +253,7 @@ Handle: 40px x 4px, #D9D9D9 (상단 중앙)
 ```
 
 #### Toast
+
 ```
 위치: 하단 중앙, Bottom Nav 위 80px
 배경: #1A1A1A (90% opacity)
@@ -256,6 +275,7 @@ Handle: 40px x 4px, #D9D9D9 (상단 중앙)
 ### 4.1 인증 영역
 
 #### 01-로그인.html
+
 ```
 레이아웃:
 - 로고 (상단 중앙)
@@ -273,6 +293,7 @@ Handle: 40px x 4px, #D9D9D9 (상단 중앙)
 ```
 
 #### 02-회원가입.html
+
 ```
 레이아웃: 세로 스크롤
 섹션:
@@ -292,6 +313,7 @@ Handle: 40px x 4px, #D9D9D9 (상단 중앙)
 ```
 
 #### 03-프로필.html
+
 ```
 레이아웃:
 - 프로필 헤더 (상단)
@@ -315,6 +337,7 @@ Bottom Nav: 프로필 탭 활성화
 ```
 
 #### 04-로그아웃확인.html
+
 ```
 유형: Modal Dialog
 
@@ -329,6 +352,7 @@ Bottom Nav: 프로필 탭 활성화
 ### 4.2 대시보드 영역
 
 #### 05-대시보드.html
+
 ```
 레이아웃: 세로 스크롤
 
@@ -360,6 +384,7 @@ Bottom Nav: 홈 탭 활성화
 ```
 
 #### 06-이벤트목록.html
+
 ```
 레이아웃: 세로 스크롤
 
@@ -384,6 +409,7 @@ Bottom Nav: 이벤트 탭 활성화
 ### 4.3 이벤트 생성 플로우
 
 #### 07-이벤트목적선택.html
+
 ```
 레이아웃: 세로 스크롤
 
@@ -409,6 +435,7 @@ Progress: 1/7 단계
 ```
 
 #### 08-AI이벤트추천.html
+
 ```
 레이아웃: 세로 스크롤
 
@@ -464,6 +491,7 @@ Progress: 2/7 단계
 ```
 
 #### 09-콘텐츠미리보기.html
+
 ```
 레이아웃: 세로 스크롤
 
@@ -524,6 +552,7 @@ Progress: 3/7 단계
 ```
 
 #### 10-콘텐츠편집.html
+
 ```
 레이아웃:
 - Mobile: 세로 스택 (편집폼 → 미리보기)
@@ -558,6 +587,7 @@ Progress: 4/7 단계
 ```
 
 #### 11-배포채널선택.html
+
 ```
 레이아웃: 세로 스크롤
 
@@ -587,6 +617,7 @@ Progress: 5/7 단계
 ```
 
 #### 12-최종승인.html
+
 ```
 레이아웃: 세로 스크롤
 
@@ -618,6 +649,7 @@ Progress: 7/7 단계
 ### 4.4 이벤트 관리 및 모니터링
 
 #### 13-이벤트상세.html
+
 ```
 레이아웃: 세로 스크롤
 
@@ -651,6 +683,7 @@ Bottom Nav: 이벤트 탭 활성화
 ```
 
 #### 14-참여자목록.html
+
 ```
 레이아웃: 세로 스크롤
 
@@ -676,6 +709,7 @@ Bottom Nav: 이벤트 탭 활성화
 ```
 
 #### 15-이벤트참여.html
+
 ```
 유형: 고객용 화면 (공개 URL)
 
@@ -706,6 +740,7 @@ Bottom Nav: 이벤트 탭 활성화
 ```
 
 #### 16-당첨자추첨.html
+
 ```
 레이아웃: 세로 스크롤
 
@@ -735,6 +770,7 @@ Bottom Nav: 이벤트 탭 활성화
 ```
 
 #### 17-성과분석.html
+
 ```
 레이아웃: 세로 스크롤
 
@@ -773,6 +809,7 @@ Bottom Nav: 분석 탭 활성화
 ## 5. 반응형 디자인
 
 ### 5.1 Breakpoints
+
 ```
 Mobile (기본): 320px ~ 767px
 Tablet: 768px ~ 1023px
@@ -782,6 +819,7 @@ Desktop: 1024px 이상
 ### 5.2 레이아웃 변화
 
 #### 대시보드 (05)
+
 ```
 Mobile:  KPI 세로 스택
 Tablet:  KPI 2x2 그리드, 이벤트 2열
@@ -789,6 +827,7 @@ Desktop: KPI 4열, 이벤트 3열 + 사이드바
 ```
 
 #### 이벤트 생성 (09, 10)
+
 ```
 Mobile:  세로 스택
 Tablet:  세로 스택 (간격 증가)
@@ -796,6 +835,7 @@ Desktop: 좌우 분할 (편집 | 미리보기)
 ```
 
 #### 성과 분석 (17)
+
 ```
 Mobile:  차트 세로 스택
 Tablet:  차트 2x1 그리드
@@ -807,26 +847,31 @@ 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**: 컨텍스트 메뉴 표시
@@ -836,17 +881,20 @@ Desktop: 차트 2x2 그리드
 ## 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 텍스트
@@ -856,16 +904,19 @@ Desktop: 차트 2x2 그리드
 ## 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**: 애니메이션 직전만 적용
 
@@ -874,6 +925,7 @@ Desktop: 차트 2x2 그리드
 ## 9. 에러 처리
 
 ### 9.1 네트워크 에러
+
 ```
 표시: Toast (빨간색)
 메시지: "네트워크 연결을 확인해주세요"
@@ -881,6 +933,7 @@ Desktop: 차트 2x2 그리드
 ```
 
 ### 9.2 Validation 에러
+
 ```
 표시: Input 하단 메시지
 색상: Error Red (#D32F2F)
@@ -888,6 +941,7 @@ Desktop: 차트 2x2 그리드
 ```
 
 ### 9.3 서버 에러
+
 ```
 표시: Modal Dialog
 메시지: "일시적인 오류가 발생했습니다. 잠시 후 다시 시도해주세요."
@@ -895,6 +949,7 @@ Desktop: 차트 2x2 그리드
 ```
 
 ### 9.4 Empty State
+
 ```
 표시: 중앙 정렬 메시지 + 아이콘
 예시:
@@ -919,6 +974,7 @@ Desktop: 차트 2x2 그리드
 ## 11. 변경 이력
 
 ### Version 2.1 (2025-10-21)
+
 - 프로토타입 실제 구현 내용 반영
 - 08-AI이벤트추천: 예산별 2가지 방식(온라인/오프라인) 상세화
 - 08-AI이벤트추천: Budget Navigation (Sticky) 추가
@@ -927,6 +983,7 @@ Desktop: 차트 2x2 그리드
 - 09-콘텐츠미리보기: Fullscreen Modal, 이벤트 버블링 방지 추가
 
 ### Version 2.0 (2025-10-21)
+
 - 프로토타입 분석 기반 전면 개정
 - 화면 번호 체계 정립 (01~17번)
 - 네비게이션 구조 변경 (햄버거 메뉴 제거, Bottom Nav 4탭)
@@ -937,6 +994,7 @@ Desktop: 차트 2x2 그리드
 - 실시간 KPI 업데이트 추가 (13-이벤트상세)
 
 ### Version 1.0 (2025-10-17)
+
 - 초안 작성
 
 ---