# 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 버튼]  │
└─────────────────────────┘
```

#### 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
둥근 모서리: 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 (세로 방향만)
```

#### 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)
폰트: 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 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)
높이: 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.8 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.1 (2025-10-21)

- 프로토타입 기반 컴포넌트 업데이트
- Editable Field 컴포넌트 추가 (인라인 편집)
- Budget Navigation 컴포넌트 추가 (Sticky 탭 네비게이션)
- Option Card 컴포넌트 추가 (온라인/오프라인 배지)
- Selection Card 세부사항 보완 (이미지 비율, z-index)
- 이벤트 버블링 방지 가이드 추가

### 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

---

**문서 끝**
