mirror of
https://github.com/ktds-dg0501/kt-event-marketing.git
synced 2025-12-06 23:26:25 +00:00
1289 lines
29 KiB
Markdown
1289 lines
29 KiB
Markdown
# 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
|
|
|
|
---
|
|
|
|
**문서 끝**
|