# 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 --- **문서 끝**