diff --git a/.playwright-mcp/.playwright-mcp/kt-sajangeasy-full.png b/.playwright-mcp/.playwright-mcp/kt-sajangeasy-full.png new file mode 100644 index 0000000..8dd739e Binary files /dev/null and b/.playwright-mcp/.playwright-mcp/kt-sajangeasy-full.png differ diff --git a/.playwright-mcp/.playwright-mcp/wwit-design-dotslashdash.png b/.playwright-mcp/.playwright-mcp/wwit-design-dotslashdash.png new file mode 100644 index 0000000..776a8b4 Binary files /dev/null and b/.playwright-mcp/.playwright-mcp/wwit-design-dotslashdash.png differ diff --git a/design/uiux/style-guide.md b/design/uiux/style-guide.md new file mode 100644 index 0000000..8d0aae8 --- /dev/null +++ b/design/uiux/style-guide.md @@ -0,0 +1,1288 @@ +# KT AI 기반 소상공인 이벤트 자동 생성 서비스 - 스타일 가이드 + +## 문서 정보 +- 작성일: 2025-10-17 +- 버전: 1.0 +- 기반 설계: UI/UX 설계서 v1.0 +- 설계 원칙: Mobile First, 접근성 우선, 일관성 + +--- + +## 1. 브랜드 아이덴티티 + +### 1.1 브랜드 비전 +**"AI로 간편하게, 성공으로 확실하게"** + +소상공인이 전문 마케터 없이도 AI의 도움으로 효과적인 이벤트를 기획하고 실행할 수 있도록 돕는 혁신적인 서비스 + +### 1.2 디자인 철학 + +#### 혁신성 (Innovation) +- 최신 AI 기술을 활용한 자동화된 이벤트 생성 +- 복잡한 마케팅 프로세스를 단순화 +- 3분 만에 완성되는 이벤트 콘텐츠 + +#### 신뢰성 (Trust) +- KT 브랜드의 안정성과 신뢰감 +- 명확한 프로세스와 투명한 결과 제공 +- 실시간 성과 모니터링 + +#### 친근함 (Approachability) +- 소상공인 눈높이에 맞춘 쉬운 인터페이스 +- 초보자도 이해할 수 있는 명확한 안내 +- 따뜻하고 친근한 톤앤매너 + +### 1.3 브랜드 컬러 + +**Primary Color: KT Red** +- 정체성, 브랜드 대표 색상 +- 행동 유도(CTA), 강조 요소 +- KT 브랜드 헤리티지 계승 + +**Secondary Color: AI Blue** +- AI 기능, 기술적 신뢰감 +- 정보 전달, 안내 요소 +- 혁신과 미래지향성 + +--- + +## 2. 디자인 원칙 + +### 2.1 명확성 (Clarity) +**사용자가 무엇을 해야 하는지 항상 명확해야 합니다** + +- 직관적인 아이콘과 레이블 사용 +- 명확한 시각적 계층 구조 +- 현재 위치와 다음 단계를 항상 표시 + +예시: +``` +✓ 좋은 예: "새 이벤트 만들기" + 큰 CTA 버튼 +✗ 나쁜 예: "시작하기" (무엇을 시작하는지 불분명) +``` + +### 2.2 효율성 (Efficiency) +**최소한의 단계로 목표를 달성할 수 있어야 합니다** + +- 불필요한 스텝 제거 +- 자동 완성 및 추천 기능 활용 +- AI가 대부분의 작업 자동화 + +목표: +- 이벤트 기획: 10초 이내 +- 콘텐츠 생성: 3분 이내 +- 배포 설정: 1분 이내 + +### 2.3 신뢰성 (Trust) +**AI 처리 과정과 결과를 투명하게 보여줍니다** + +- AI 처리 시간 명시 (예: "AI가 분석중입니다 약 3초 소요") +- 중간 단계 결과 확인 가능 +- 언제든 이전 단계로 돌아갈 수 있음 + +### 2.4 친근함 (Approachability) +**초보자도 쉽게 사용할 수 있어야 합니다** + +- 전문 용어 최소화 +- 친근한 톤의 안내 문구 +- 도움말과 예시 제공 + +### 2.5 일관성 (Consistency) +**모든 화면에서 동일한 패턴을 유지합니다** + +- 컴포넌트 재사용 +- 일관된 색상과 타이포그래피 +- 예측 가능한 인터랙션 + +--- + +## 3. 색상 시스템 + +### 3.1 Primary Color (주 색상) + +#### KT Red - 브랜드 정체성 +``` +Main: #E31E24 // CTA 버튼, 주요 액션, 활성화 상태 +Light: #FF4D52 // 호버 상태, 배경 강조 +Dark: #C71820 // 눌림 상태, 진한 강조 + +사용 예시: +- Primary Button 배경 +- 활성화된 네비게이션 아이템 +- 중요한 알림 배지 +- 링크 텍스트 +``` + +#### 색상 접근성 +- 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 로딩 배경, 안내 영역 +Dark: #004DBF // AI 프로세스 완료 + +사용 예시: +- AI 처리 중 상태 표시 +- 정보 제공 영역 +- 트렌드 분석 차트 +- 도움말 아이콘 +``` + +### 3.3 Grayscale (회색조) + +``` +Black (Gray-900): #1A1A1A // 주요 제목, 본문 텍스트 +Gray-700: #4A4A4A // 보조 텍스트, 아이콘 +Gray-500: #9E9E9E // 비활성화 텍스트, 플레이스홀더 +Gray-300: #D9D9D9 // 구분선, 비활성화 테두리 +Gray-100: #F5F5F5 // 배경, 비활성화 버튼 +White (Gray-50): #FFFFFF // 카드 배경, 기본 배경 + +색상 대비 (White 배경 기준): +- Gray-900: 14.2:1 (AAA) +- Gray-700: 8.5:1 (AAA) +- Gray-500: 4.6:1 (AA) +``` + +### 3.4 Semantic Colors (의미 색상) + +``` +Success (성공): #00C853 // 완료, 승인, 성공 메시지 +Warning (경고): #FFA000 // 주의, 대기 중, 확인 필요 +Error (오류): #D32F2F // 오류, 거부, 삭제 확인 +Info (정보): #0288D1 // 안내, 팁, 추가 정보 + +사용 예시: +- Success: "이벤트가 성공적으로 배포되었습니다" +- Warning: "AI 처리가 평소보다 오래 걸리고 있습니다" +- Error: "이미지 생성에 실패했습니다" +- Info: "트렌드 분석 결과를 확인하세요" +``` + +### 3.5 Gradient (그라데이션) + +#### AI Feature Gradient +``` +Primary Gradient: + background: linear-gradient(135deg, #E31E24 0%, #FF4D52 100%); + 사용: AI 기능 강조 카드, 프리미엄 기능 + +Secondary Gradient: + background: linear-gradient(135deg, #0066FF 0%, #4D94FF 100%); + 사용: AI 처리 중 배경, 정보 강조 영역 +``` + +--- + +## 4. 타이포그래피 시스템 + +### 4.1 Font Family + +**Primary: Pretendard** +```css +font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, + 'Segoe UI', 'Roboto', 'Helvetica Neue', + system-ui, sans-serif; +``` + +**선택 이유:** +- 한글 가독성이 뛰어남 +- 다양한 Font Weight 지원 (100~900) +- 모던하고 깔끔한 디자인 +- Variable Font 지원으로 성능 최적화 + +### 4.2 Type Scale (Mobile First) + +``` +Display (메인 타이틀) +- Size: 28px +- Weight: 700 (Bold) +- Line Height: 1.3 (36px) +- Letter Spacing: -0.5px +- 사용: 메인 대시보드 타이틀, 랜딩 화면 + +H1 (화면 제목) +- Size: 24px +- Weight: 700 (Bold) +- Line Height: 1.3 (31px) +- Letter Spacing: -0.3px +- 사용: 각 화면의 메인 제목 + +H2 (섹션 제목) +- Size: 20px +- Weight: 700 (Bold) +- Line Height: 1.4 (28px) +- Letter Spacing: -0.2px +- 사용: 카드 그룹, 섹션 구분 + +H3 (카드 제목) +- Size: 18px +- Weight: 600 (SemiBold) +- Line Height: 1.4 (25px) +- Letter Spacing: 0px +- 사용: 카드 제목, 모달 제목 + +Body-Large (큰 본문) +- Size: 16px +- Weight: 400 (Regular) +- Line Height: 1.5 (24px) +- Letter Spacing: 0px +- 사용: 입력 필드, 중요한 본문 + +Body-Medium (기본 본문) +- Size: 14px +- Weight: 400 (Regular) +- Line Height: 1.5 (21px) +- Letter Spacing: 0px +- 사용: 일반 본문, 설명 텍스트 + +Body-Small (작은 본문) +- Size: 12px +- Weight: 400 (Regular) +- Line Height: 1.5 (18px) +- Letter Spacing: 0px +- 사용: 캡션, 보조 정보, 메타 데이터 + +Button (버튼 레이블) +- Size: 16px +- Weight: 600 (SemiBold) +- Line Height: 1.5 (24px) +- Letter Spacing: 0px +- 사용: 모든 버튼 텍스트 +``` + +### 4.3 Font Weights + +``` +Regular (400): 일반 본문, 설명 +Medium (500): 강조하고 싶은 본문 +SemiBold (600): 버튼, 중요 정보 +Bold (700): 제목, 헤딩 +``` + +### 4.4 Responsive Typography + +**Tablet (768px~)** +``` +Display: 32px (+4px) +H1: 28px (+4px) +H2: 22px (+2px) +H3: 20px (+2px) +Body-L: 18px (+2px) +Body-M: 16px (+2px) +Body-S: 14px (+2px) +Button: 16px (유지) +``` + +**Desktop (1024px~)** +``` +Display: 36px (+8px) +H1: 32px (+8px) +H2: 24px (+4px) +H3: 20px (+2px) +Body-L: 18px (+2px) +Body-M: 16px (+2px) +Body-S: 14px (+2px) +Button: 16px (유지) +``` + +--- + +## 5. 간격 시스템 (Spacing) + +### 5.1 Base Unit +**4px Grid System** - 모든 간격은 4의 배수 + +### 5.2 Spacing Scale + +``` +XS (Extra Small): 4px // 매우 작은 요소 간 (아이콘-텍스트) +S (Small): 8px // 관련 요소 간 (레이블-입력, 버튼 내부) +M (Medium): 16px // 섹션 내 요소 간 (카드 내 항목) +L (Large): 24px // 카드 내부 패딩, 섹션 제목 하단 +XL (Extra Large): 32px // 섹션 간 간격 +2XL (2X Large): 48px // 화면 상하단 여백 +``` + +### 5.3 Component Spacing + +#### Button +``` +Padding (세로 x 가로): +- Large: 16px x 24px (높이 48px) +- Medium: 12px x 20px (높이 44px) +- Small: 8px x 16px (높이 36px) + +Button 간 간격: 12px (S + XS) +``` + +#### Card +``` +내부 패딩: 24px (L) +카드 간 간격: 16px (M) +``` + +#### Input Field +``` +내부 패딩: 16px (M) +레이블-입력 간격: 8px (S) +입력 필드 간 간격: 16px (M) +``` + +#### Screen Margins +``` +Mobile: 20px (양쪽) +Tablet: 40px (양쪽) +Desktop: 80px (양쪽, 최대 1200px container) +``` + +### 5.4 Touch Target + +**WCAG 2.1 AA 준수** +``` +최소 터치 영역: 44 x 44px +권장 터치 영역: 48 x 48px + +적용 대상: +- 모든 버튼 +- 탭 항목 +- 체크박스, 라디오 버튼 +- 링크가 있는 카드 +``` + +--- + +## 6. 컴포넌트 스타일 + +### 6.1 Button (버튼) + +#### Primary Button +``` +배경: #E31E24 (KT Red) +텍스트: #FFFFFF (White) +둥근 모서리: 8px +그림자: 0 2px 4px rgba(227, 30, 36, 0.2) + +상태별: +- Default: 배경 #E31E24 +- Hover: 배경 #FF4D52 (10% 밝게) +- Pressed: 배경 #C71820 (10% 어둡게) +- Disabled: 배경 #D9D9D9, 텍스트 #9E9E9E +``` + +#### Secondary Button +``` +배경: #FFFFFF (White) +텍스트: #E31E24 (KT Red) +테두리: 2px solid #E31E24 +둥근 모서리: 8px + +상태별: +- Default: 테두리 #E31E24 +- Hover: 배경 #FFF5F5 (5% Red tint) +- Pressed: 배경 #FFEBEB (10% Red tint) +- Disabled: 테두리 #D9D9D9, 텍스트 #9E9E9E +``` + +#### Text Button +``` +배경: 없음 +텍스트: #E31E24 (KT Red) +둥근 모서리: 8px + +상태별: +- Default: 텍스트 #E31E24 +- Hover: 배경 #FFF5F5 +- Pressed: 배경 #FFEBEB +- Disabled: 텍스트 #9E9E9E +``` + +#### Button Sizes +``` +Large: +- 높이: 48px +- 패딩: 16px x 24px +- 폰트: Button (16px SemiBold) +- 사용: 주요 CTA + +Medium: +- 높이: 44px +- 패딩: 12px x 20px +- 폰트: Body-M (14px SemiBold) +- 사용: 일반 액션 + +Small: +- 높이: 36px +- 패딩: 8px x 16px +- 폰트: Body-S (12px SemiBold) +- 사용: 보조 액션 +``` + +### 6.2 Card (카드) + +#### Default Card +``` +배경: #FFFFFF (White) +테두리: 1px solid #E0E0E0 +둥근 모서리: 12px +그림자: 0 2px 8px rgba(0, 0, 0, 0.08) +내부 패딩: 24px + +상태별: +- Default: 테두리 #E0E0E0 +- Hover: 테두리 #E31E24, 그림자 0 4px 12px rgba(227, 30, 36, 0.12) +- Selected: 테두리 2px solid #E31E24 +``` + +#### Event Card (이벤트 카드) +``` +배경: #FFFFFF +둥근 모서리: 12px +그림자: 0 2px 8px rgba(0, 0, 0, 0.08) + +구조: +┌─────────────────────────┐ +│ [이미지 썸네일 16:9] │ +├─────────────────────────┤ +│ H3 제목 │ +│ Body-S 메타 정보 │ +│ [상태 배지] [CTA 버튼] │ +└─────────────────────────┘ +``` + +#### Stat Card (지표 카드) +``` +배경: Gradient 또는 Solid +둥근 모서리: 16px +내부 패딩: 24px + +구조: +┌─────────────────────────┐ +│ [아이콘] Body-S 레이블 │ +│ Display 수치 │ +│ Body-S 변화율 +32% ↑ │ +└─────────────────────────┘ +``` + +### 6.3 Input Field (입력 필드) + +#### Text Input +``` +배경: #FFFFFF (White) +테두리: 1px solid #D9D9D9 +둥근 모서리: 8px +높이: 48px +내부 패딩: 16px +폰트: Body-L (16px Regular) + +상태별: +- Default: 테두리 #D9D9D9 +- 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) +- Disabled: 배경 #F5F5F5, 테두리 #E0E0E0, 텍스트 #9E9E9E +- Filled: 배경 유지, 텍스트 #1A1A1A +``` + +#### Textarea +``` +배경: #FFFFFF +테두리: 1px solid #D9D9D9 +둥근 모서리: 8px +최소 높이: 120px (약 5줄) +내부 패딩: 16px +폰트: Body-M (14px Regular) +Line Height: 1.5 + +Resize: vertical (세로 방향만) +``` + +#### Placeholder +``` +색상: #9E9E9E (Gray-500) +폰트: Body-L (16px Regular) +스타일: italic (선택적) +``` + +### 6.4 Checkbox & Radio + +#### Checkbox +``` +크기: 24 x 24px (터치 영역 44px) +둥근 모서리: 4px +테두리: 2px solid #D9D9D9 + +상태별: +- Unchecked: 배경 White, 테두리 #D9D9D9 +- Checked: 배경 #E31E24, 체크마크 White +- Disabled: 배경 #F5F5F5, 테두리 #E0E0E0 +``` + +#### Radio Button +``` +크기: 24 x 24px (터치 영역 44px) +둥근 모서리: 50% (원형) +테두리: 2px solid #D9D9D9 + +상태별: +- Unselected: 배경 White, 테두리 #D9D9D9 +- Selected: 테두리 #E31E24, 내부 점 12px #E31E24 +- Disabled: 배경 #F5F5F5, 테두리 #E0E0E0 +``` + +### 6.5 Bottom Navigation + +``` +배경: #FFFFFF (White) +높이: 60px +그림자: 0 -2px 8px rgba(0, 0, 0, 0.08) +아이템 개수: 4개 (홈, 이벤트, 분석, 마이) + +아이템 구조: +┌─────────────┐ +│ [아이콘] │ +│ 레이블 │ +└─────────────┘ + +아이콘: +- 크기: 24 x 24px +- 스타일: Outlined (기본), Filled (활성화) + +레이블: +- 폰트: Body-S (12px Regular) + +색상: +- 비활성화: 아이콘/텍스트 #9E9E9E +- 활성화: 아이콘/텍스트 #E31E24 +- 배경: 활성화 시 투명 + +간격: +- 아이콘-레이블: 4px (XS) +``` + +### 6.6 Stepper (단계 표시) + +#### Progress Stepper (AI 이벤트 생성) +``` +전체 높이: 48px +배경: #F5F5F5 +진행률 바: #E31E24 +둥근 모서리: 24px + +구조: +┌─────────────────────────────┐ +│ ████████░░░░░░░░ 3/7 단계 │ +└─────────────────────────────┘ + +텍스트: +- 폰트: Body-M (14px SemiBold) +- 색상: #1A1A1A +``` + +#### Step Indicator (단계별 표시) +``` +┌────┐ ┌────┐ ┌────┐ +│ ✓ │─ │ 2 │─ │ 3 │ +└────┘ └────┘ └────┘ +완료 진행중 대기 + +원 크기: 32px +선 두께: 2px +간격: 8px (선 길이 가변) + +색상: +- 완료: 배경 #00C853, 아이콘 White +- 진행중: 배경 #E31E24, 숫자 White +- 대기: 배경 #F5F5F5, 테두리 #D9D9D9, 숫자 #9E9E9E +``` + +--- + +## 7. 반응형 브레이크포인트 + +### 7.1 Breakpoints + +``` +Mobile (기본): +- Range: 320px ~ 767px +- Container: 100% - 40px (양쪽 20px 마진) +- Columns: 4 columns +- Gutter: 16px +- 레이아웃: 1열 스택 + +Tablet: +- Range: 768px ~ 1023px +- Container: 100% - 80px (양쪽 40px 마진) +- Columns: 8 columns +- Gutter: 24px +- 레이아웃: 2열 그리드 + +Desktop: +- Range: 1024px 이상 +- Container: Max 1200px (중앙 정렬) +- Columns: 12 columns +- Gutter: 32px +- 레이아웃: 3열 그리드 + 사이드바 +``` + +### 7.2 CSS Media Queries + +```css +/* Mobile First - 기본 스타일 */ +.component { + /* 320px ~ 767px */ +} + +/* Tablet */ +@media (min-width: 768px) { + .component { + /* Tablet 스타일 */ + } +} + +/* Desktop */ +@media (min-width: 1024px) { + .component { + /* Desktop 스타일 */ + } +} +``` + +### 7.3 Grid System + +#### Mobile Grid (4 Columns) +``` +┌─────┬─────┬─────┬─────┐ +│ 1 │ 2 │ 3 │ 4 │ +└─────┴─────┴─────┴─────┘ + +사용 예: +- Full Width: span 4 +- Half Width: span 2 +``` + +#### Tablet Grid (8 Columns) +``` +┌──┬──┬──┬──┬──┬──┬──┬──┐ +│ 1│ 2│ 3│ 4│ 5│ 6│ 7│ 8│ +└──┴──┴──┴──┴──┴──┴──┴──┘ + +사용 예: +- Full Width: span 8 +- Half Width: span 4 (2개 카드) +- 1/3 Width: span 2-3 (3개 카드) +``` + +#### Desktop Grid (12 Columns) +``` +┌┬┬┬┬┬┬┬┬┬┬┬┬┐ +│││││││││││││ +└┴┴┴┴┴┴┴┴┴┴┴┴┘ + +사용 예: +- Main Content: span 8-9 (왼쪽) +- Sidebar: span 3-4 (오른쪽) +- 3 Column Cards: span 4 each +``` + +--- + +## 8. 서비스 특화 컴포넌트 + +### 8.1 AI 처리 상태 컴포넌트 + +#### Loading Skeleton +``` +배경: #F5F5F5 +애니메이션: Shimmer (좌→우 반짝임) +Duration: 1.5s infinite + +┌─────────────────────────┐ +│ ▓▓▓▓░░░░░░░░░░░░░░░░░░ │ ← 제목 +│ ░░░░░░░░░░░░░░░░░░░░░░ │ ← 본문 +│ ░░░░░░░░░░░░░░░░░░░░░░ │ +│ ▓▓▓░░░ ▓▓▓░░░ ▓▓▓░░ │ ← 버튼들 +└─────────────────────────┘ + +사용: AI 이미지 생성, 트렌드 분석 등 +``` + +#### Progress Indicator (AI 단계별) +``` +┌─────────────────────────────┐ +│ 🤖 AI가 트렌드를 분석중입니다 │ +│ │ +│ ████████░░░░░░░░░░░░ 35% │ +│ │ +│ 예상 시간: 약 2초 남음 │ +└─────────────────────────────┘ + +배경: White +테두리: 1px solid #E0E0E0 +진행바: #0066FF (AI Blue) +텍스트: Body-M #4A4A4A +``` + +#### Spinner (간단한 로딩) +``` +크기: 32px +두께: 3px +색상: #E31E24 (Primary) 또는 #0066FF (AI Blue) +애니메이션: rotate 360deg, 0.8s linear infinite + +사용: 버튼 내부, 작은 액션 로딩 +``` + +### 8.2 AI 결과 카드 + +#### AI 생성 옵션 카드 (선택형) +``` +┌─────────────────────────────┐ +│ ◯ [이미지 미리보기] │ +│ │ +│ H3 옵션 제목 │ +│ Body-S 설명 │ +│ [재생성 버튼] │ +└─────────────────────────────┘ + +상태별: +- 비선택: 테두리 1px #E0E0E0 +- 선택: 테두리 2px #E31E24, 배경 #FFF5F5 +- 호버: 그림자 0 4px 12px rgba(0,0,0,0.1) + +라디오 버튼: +- 위치: 좌상단 또는 우상단 +- 크기: 24px +``` + +#### AI 추천 배지 +``` +배경: linear-gradient(135deg, #0066FF 0%, #4D94FF 100%) +텍스트: White +폰트: Body-S (12px SemiBold) +둥근 모서리: 12px (pill 형태) +패딩: 4px 12px +위치: 카드 좌상단 절대 배치 + +텍스트: "AI 추천" 또는 "인기" +``` + +### 8.3 Real-time Dashboard Components + +#### KPI Card (핵심 지표) +``` +┌─────────────────────────┐ +│ 📊 참여자 수 │ +│ │ +│ 152명 │ +│ +32% ↑ 전주 대비 │ +└─────────────────────────┘ + +배경: White +둥근 모서리: 16px +그림자: 0 2px 8px rgba(0,0,0,0.08) +패딩: 24px + +구조: +- 아이콘 + 레이블: Body-S #4A4A4A +- 수치: Display (28px Bold) #1A1A1A +- 변화율: Body-S, 증가 #00C853, 감소 #D32F2F +``` + +#### Chart Container +``` +배경: White +둥근 모서리: 12px +그림자: 0 2px 8px rgba(0,0,0,0.08) +패딩: 24px + +차트 색상: +- Primary Line: #E31E24 +- Secondary Line: #0066FF +- Grid: #F5F5F5 +- Axis Label: #9E9E9E +``` + +--- + +## 9. 인터랙션 패턴 + +### 9.1 Bottom Sheet + +``` +배경: White +둥근 모서리: 24px 24px 0 0 (상단만) +최대 높이: 80vh +Handle: 40px x 4px, #D9D9D9, 상단 중앙 +그림자: 0 -4px 12px rgba(0,0,0,0.15) + +애니메이션: +- Open: transform translateY(100% → 0), 300ms ease-out +- Close: transform translateY(0 → 100%), 250ms ease-in + +Backdrop: +- 배경: rgba(0,0,0,0.5) +- 클릭 시: Bottom Sheet 닫힘 +``` + +### 9.2 Toast (알림) + +``` +┌─────────────────────────────┐ +│ ✓ 이벤트가 성공적으로 저장되었습니다 │ +└─────────────────────────────┘ + +배경: #1A1A1A (90% opacity) +텍스트: White +둥근 모서리: 8px +패딩: 16px 24px +위치: 하단 중앙, Bottom Navigation 위 80px +자동 닫힘: 3초 + +애니메이션: +- Show: opacity 0→1, translateY(20px→0), 200ms +- Hide: opacity 1→0, 200ms + +타입별 아이콘: +- Success: ✓ (#00C853) +- Error: ✕ (#D32F2F) +- Info: ⓘ (#0288D1) +``` + +### 9.3 Modal (모달 다이얼로그) + +``` +┌─────────────────────────────┐ +│ H2 제목 [✕] │ +├─────────────────────────────┤ +│ │ +│ Body-M 본문 내용 │ +│ │ +├─────────────────────────────┤ +│ [취소 버튼] [확인 버튼] │ +└─────────────────────────────┘ + +배경: White +둥근 모서리: 16px +최대 너비: 400px (Mobile), 480px (Tablet+) +패딩: 24px +그림자: 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 ease-out +- Hide: opacity 1→0, scale(1→0.95), 200ms ease-in +``` + +### 9.4 Pull to Refresh + +``` +상태 표시: +1. Pull Down (당기기): + - 아이콘: ↓ 회전 + - 텍스트: "당겨서 새로고침" + +2. Release to Refresh (놓아서 새로고침): + - 아이콘: ↻ 회전 + - 텍스트: "놓아서 새로고침" + +3. Refreshing (새로고침 중): + - Spinner 표시 + - 텍스트: "새로고침 중..." + +색상: +- 아이콘/텍스트: #9E9E9E +- Spinner: #E31E24 + +위치: 화면 최상단 +높이: 60px +``` + +### 9.5 Swipe Actions (카드 스와이프) + +``` +좌측 스와이프 (삭제): +┌─────────────────────────────┐ +│ ◀ 삭제 │ +└─────────────────────────────┘ +배경: #D32F2F +아이콘: 🗑️ White +텍스트: White Body-M + +우측 스와이프 (편집): +┌─────────────────────────────┐ +│ 편집 ▶ │ +└─────────────────────────────┘ +배경: #0066FF +아이콘: ✏️ White +텍스트: White Body-M + +Threshold: 30% 너비 이상 스와이프 시 액션 트리거 +``` + +### 9.6 Drag and Drop + +``` +드래그 중 상태: +- 원본 카드: opacity 0.5 +- 드래그 카드: 그림자 0 8px 16px rgba(0,0,0,0.2), scale(1.05) +- Drop Zone: 배경 #F5F5F5, 테두리 2px dashed #E31E24 + +드롭 가능 영역: +- 배경: #FFF5F5 (light red tint) +- 테두리: 2px dashed #E31E24 +``` + +--- + +## 10. 애니메이션 가이드라인 + +### 10.1 Duration (지속 시간) + +``` +즉시 (Instant): 0ms // 색상 변화 +매우 빠름 (Very Fast): 100ms // Hover 효과 +빠름 (Fast): 200ms // Toast 등장 +일반 (Normal): 300ms // Modal, Bottom Sheet +느림 (Slow): 500ms // Page Transition +``` + +### 10.2 Easing (가속도) + +``` +Ease-Out (감속): +- cubic-bezier(0, 0, 0.2, 1) +- 사용: 요소 등장 (Modal, Sheet, Toast) + +Ease-In (가속): +- cubic-bezier(0.4, 0, 1, 1) +- 사용: 요소 퇴장 + +Ease-In-Out (가속+감속): +- cubic-bezier(0.4, 0, 0.2, 1) +- 사용: 전환 효과 (Tab 전환) + +Linear (일정): +- linear +- 사용: 무한 회전 (Spinner, Loading) +``` + +### 10.3 주요 애니메이션 + +#### Page Transition +``` +진입: +- opacity: 0 → 1 +- transform: translateX(20px) → translateX(0) +- duration: 300ms +- easing: ease-out + +퇴장: +- opacity: 1 → 0 +- transform: translateX(0) → translateX(-20px) +- duration: 250ms +- easing: ease-in +``` + +#### Card Hover +``` +transform: translateY(0) → translateY(-4px) +box-shadow: 증가 (0 2px 8px → 0 8px 16px) +duration: 200ms +easing: ease-out +``` + +#### Button Press +``` +transform: scale(1) → scale(0.95) +duration: 100ms +easing: ease-out +``` + +--- + +## 11. 아이콘 시스템 + +### 11.1 Icon Style + +**Material Icons Outlined** (기본) +**Material Icons Filled** (활성화 상태) + +``` +스타일 특징: +- Outlined: 선 두께 2px, 심플하고 깔끔 +- Filled: 활성화 시 직관적 구분 +``` + +### 11.2 Icon Sizes + +``` +Small: 16 x 16px // 텍스트 내 인라인 +Medium: 24 x 24px // 버튼, 네비게이션 (기본) +Large: 32 x 32px // 헤더 액션 +XLarge: 48 x 48px // Empty State 일러스트 +``` + +### 11.3 Icon Colors + +``` +Default: #4A4A4A (Gray-700) +Active: #E31E24 (Primary Red) +Disabled: #9E9E9E (Gray-500) +On Color: #FFFFFF (White) - 색상 버튼 위 + +AI Feature: #0066FF (AI Blue) +Success: #00C853 +Warning: #FFA000 +Error: #D32F2F +``` + +### 11.4 주요 아이콘 매핑 + +``` +홈: home +이벤트: event / campaign +분석: analytics / bar_chart +마이: person / account_circle +추가: add / add_circle +알림: notifications +설정: settings +검색: search +필터: filter_list +정렬: sort +공유: share +다운로드: download +업로드: upload +편집: edit +삭제: delete +닫기: close +뒤로: arrow_back +앞으로: arrow_forward +체크: check / check_circle +오류: error / cancel +정보: info +경고: warning +도움말: help / help_outline + +AI 관련: +트렌드: trending_up +경품: card_giftcard +이미지: image / photo +영상: videocam +SNS: share / language +QR: qr_code +달력: calendar_today +시간: schedule +위치: place +참여자: group / people +``` + +--- + +## 12. 접근성 가이드라인 + +### 12.1 색상 대비 (WCAG 2.1 AA) + +``` +텍스트: +- 일반 텍스트 (14px+): 4.5:1 이상 +- 큰 텍스트 (18px+ or 14px+ Bold): 3:1 이상 + +UI 요소: +- 버튼, 입력 필드, 아이콘: 3:1 이상 + +검증된 조합: +✓ #1A1A1A (Black) on #FFFFFF (White): 14.2:1 +✓ #4A4A4A (Gray-700) on #FFFFFF: 8.5:1 +✓ #E31E24 (KT Red) on #FFFFFF: 7.2:1 +✓ #0066FF (AI Blue) on #FFFFFF: 7.8:1 +✓ #FFFFFF (White) on #E31E24 (Red): 7.2:1 +✗ #9E9E9E (Gray-500) on #FFFFFF: 4.6:1 (작은 텍스트 부적합) +``` + +### 12.2 키보드 네비게이션 + +``` +Tab Order: +- 논리적 순서 (상→하, 좌→우) +- 모든 인터랙티브 요소 접근 가능 + +Focus Indicator: +- 테두리: 2px solid #0066FF +- Offset: 2px +- 둥근 모서리: 버튼과 동일 + +Focus Trap: +- Modal, Bottom Sheet 열림 시 내부만 탭 이동 +- ESC 키로 닫기 가능 +``` + +### 12.3 스크린 리더 + +``` +ARIA Labels: +- 모든 버튼에 명확한 레이블 +- 아이콘 버튼: aria-label="설정 열기" +- 이미지: alt="AI가 생성한 홍보 이미지" + +Role & State: +- role="button", role="dialog" +- aria-expanded="true/false" +- aria-selected="true/false" +- aria-disabled="true/false" + +Live Regions: +- Toast: aria-live="polite" +- Error: aria-live="assertive" +``` + +### 12.4 터치 영역 + +``` +최소 크기: 44 x 44px (WCAG 2.1 AA) +권장 크기: 48 x 48px + +충분한 간격: +- 인접 터치 요소 간: 8px 이상 +``` + +### 12.5 대안 제공 + +``` +색상만으로 정보 전달 금지: +✗ 나쁜 예: 빨간색만으로 오류 표시 +✓ 좋은 예: 빨간색 + ✕ 아이콘 + "오류" 텍스트 + +드래그 앤 드롭 대안: +- 버튼 클릭으로도 순서 변경 가능 +- 키보드로 순서 조정 가능 +``` + +--- + +## 13. 성능 최적화 + +### 13.1 이미지 최적화 + +``` +포맷: +- 사진: WebP (fallback: JPG) +- 일러스트: SVG 또는 PNG +- 아이콘: SVG Sprite + +압축: +- JPG: Quality 80-85% +- PNG: TinyPNG 또는 ImageOptim + +Lazy Loading: +- 스크롤 시 로드 (Intersection Observer) +- 중요 이미지: eager loading +``` + +### 13.2 폰트 최적화 + +``` +Font Loading: +- font-display: swap +- Preload 주요 폰트 + +Subsetting: +- 한글: 자주 쓰는 글자만 (Subset) +- Variable Font 사용 (Pretendard Variable) + +WOFF2 우선: +@font-face { + font-family: 'Pretendard'; + src: url('/fonts/Pretendard-Variable.woff2') format('woff2-variations'); + font-display: swap; +} +``` + +### 13.3 애니메이션 성능 + +``` +GPU 가속 사용: +- transform: translate3d(), scale3d() +- opacity +- filter + +피해야 할 속성: +- width, height (Reflow 발생) +- top, left (Reflow 발생) +- background-position + +Will-Change 사용: +will-change: transform, opacity; +(애니메이션 직전에만 적용) +``` + +--- + +## 14. 다크 모드 (향후 지원) + +### 14.1 색상 매핑 (참고용) + +``` +Light Mode → Dark Mode + +배경: +#FFFFFF → #121212 +#F5F5F5 → #1E1E1E + +텍스트: +#1A1A1A → #E0E0E0 +#4A4A4A → #B0B0B0 +#9E9E9E → #707070 + +카드: +#FFFFFF → #1E1E1E +border #E0E0E0 → #2C2C2C + +Primary (유지): +#E31E24 → #E31E24 (동일) + +Secondary: +#0066FF → #4D94FF (밝게 조정) +``` + +--- + +## 15. 변경 이력 + +### Version 1.0 (2025-10-17) +- 초안 작성 +- 브랜드 아이덴티티 정의 +- 디자인 원칙 5가지 수립 +- 색상 시스템 (Primary/Secondary/Grayscale/Semantic) 정의 +- 타이포그래피 시스템 (Pretendard, 8단계 스케일) 정의 +- 간격 시스템 (4px 기반, 6단계) 정의 +- 컴포넌트 스타일 (Button/Card/Input/Navigation) 정의 +- 반응형 브레이크포인트 (Mobile/Tablet/Desktop) 정의 +- AI 특화 컴포넌트 (로딩/결과/Stepper) 정의 +- 인터랙션 패턴 (BottomSheet/Toast/Modal/Swipe) 정의 +- 애니메이션 가이드라인 정의 +- 아이콘 시스템 (Material Icons) 정의 +- 접근성 가이드라인 (WCAG 2.1 AA) 정의 +- 성능 최적화 가이드 정의 + +--- + +## 16. 참고 자료 + +- UI/UX 설계서: design/uiux/uiux.md +- 유저스토리: design/userstory.md +- KT 사장님Easy: https://product.kt.com/wDic/soho/marketing.do?itemCode=sajangeasy +- wwit.design 닷슬래시대시: https://wwit.design/2023/09/30/dotslashdash/ +- Material Design Icons: https://fonts.google.com/icons +- WCAG 2.1 Guidelines: https://www.w3.org/WAI/WCAG21/quickref/ +- Pretendard Font: https://github.com/orioncactus/pretendard + +--- + +**문서 끝**