kt-event-marketing/design/uiux/style-guide.md

# KT AI 기반 소상공인 이벤트 자동 생성 서비스 - 스타일 가이드

## 문서 정보

**버전**: 1.0
**작성일**: 2025-08-15
**작성자**: UI/UX Designer
**적용 범위**: KT AI 기반 소상공인 이벤트 자동 생성 서비스 전체

---

## 목차

1. [브랜드 아이덴티티](#1-브랜드-아이덴티티)
2. [디자인 원칙](#2-디자인-원칙)
3. [컬러 시스템](#3-컬러-시스템)
4. [타이포그래피](#4-타이포그래피)
5. [간격 시스템](#5-간격-시스템)
6. [컴포넌트 스타일](#6-컴포넌트-스타일)
7. [반응형 브레이크포인트](#7-반응형-브레이크포인트)
8. [대상 서비스 특화 컴포넌트](#8-대상-서비스-특화-컴포넌트)
9. [인터랙션 패턴](#9-인터랙션-패턴)
10. [변경 이력](#10-변경-이력)

---

## 1. 브랜드 아이덴티티

### 1.1 서비스 컨셉

**"AI가 만드는 성공 이벤트, 클릭 한 번으로 시작하세요"**

KT AI 기반 소상공인 이벤트 자동 생성 서비스는 복잡한 이벤트 기획, 콘텐츠 제작, 다중 채널 배포를 AI 기술로 자동화하여 소상공인이 손쉽게 효과적인 마케팅 이벤트를 실행할 수 있도록 지원하는 통합 마케팅 플랫폼입니다.

### 1.2 타겟 사용자

**주요 사용자**: 소상공인 및 중소기업 사장님
**특징**:
- 마케팅 전문 지식이 부족함
- 시간과 예산이 제한적
- 빠르고 확실한 결과를 원함
- 복잡한 기술보다 직관적인 사용성 선호

### 1.3 브랜드 퍼스널리티

- **전문적 (Professional)**: KT의 신뢰성과 기술력 기반
- **혁신적 (Innovative)**: 최신 AI 기술로 자동화 구현
- **접근 가능한 (Accessible)**: 누구나 쉽게 사용 가능
- **결과 중심 (Result-Oriented)**: 명확한 성과 측정과 개선

### 1.4 디자인 철학

**"KT의 신뢰 + 현대적 웹 UI"**

- **KT 브랜드 헤리티지**: KT Red (#E60012)를 주요 색상으로 활용하여 브랜드 정체성 유지
- **클린하고 직관적**: 불필요한 요소 제거, 핵심 기능에 집중
- **AI 투명성**: AI 처리 과정을 명확히 표시하여 신뢰 구축
- **데이터 시각화**: 복잡한 분석 결과를 이해하기 쉬운 차트와 카드로 표현

### 1.5 참고 디자인

**KT 사장이지 플랫폼** (https://product.kt.com/wDic/soho/marketing.do?itemCode=sajangeasy)
- 카드 기반 정보 구조
- 명확한 섹션 구분
- 큰 CTA 버튼과 직관적 아이콘
- KT 브랜드 컬러 일관성

**뤼튼 디자인 시스템** (https://wwit.design/2024/12/24/wrtn/)
- 깔끔한 배경 색상 체계
- 일관된 컴포넌트 패딩 및 간격
- 명확한 타이포그래피 위계

---

## 2. 디자인 원칙

### 2.1 간결함 (Simplicity)

**"최소한의 클릭으로 작업 완료"**

- 3클릭 이내 주요 작업 완료 목표
- 복잡한 설정은 스마트 기본값 제공
- 불필요한 옵션 숨기기 (고급 설정은 접기/펼치기)

**적용 예시**:
- 이벤트 기획: 목적 선택 → AI 자동 기획 → 승인 (3단계)
- 배포: 채널 선택 → 배포 시작 (2단계)

### 2.2 명확함 (Clarity)

**"현재 위치와 다음 단계를 명확히 표시"**

- 모든 다단계 프로세스에 StepIndicator 표시
- 현재 상태와 가능한 액션을 명확히 구분
- 에러 메시지는 구체적이고 해결 방법 포함

**적용 예시**:
- StepIndicator: "Step 2/3" 표시
- 진행률 표시: "████████░░ 65%"
- 상태 표시: ✅ 완료, ⏳ 진행 중, ⏸️ 대기 중

### 2.3 피드백 (Feedback)

**"모든 액션에 즉각적인 피드백 제공"**

- 버튼 클릭 시 로딩 상태 표시
- 성공/실패 시 Toast 알림
- 실시간 데이터는 자동 업데이트 (5분 간격)

**적용 예시**:
- 버튼: "처리 중..." + 스피너
- Toast: "배포가 완료되었습니다" (3초 표시)
- 실시간 분석: "🔄 5분 전" 표시

### 2.4 AI 투명성 (AI Transparency)

**"AI 처리 과정과 결과를 명확히 표시"**

- AI 처리 중: 현재 단계와 진행률 표시
- 완료 후: AI가 도출한 근거 설명
- 수정 가능: AI 결과를 사용자가 직접 편집 가능

**적용 예시**:
- AI 기획 진행: "⏳ 최적 경품 추천 중... 💡 예산 300,000원 기준 분석 중"
- AI 개선 제안: "✅ 성공 요인: 참여율이 업종 평균보다 21% 높습니다"

---

## 3. 컬러 시스템

### 3.1 Primary 색상

#### KT Red (주요 액션)
```
색상: #E60012
용도: 주요 버튼, 중요 강조, 선택 상태
명도: 100%, 90%, 80% (호버, 활성화 상태)
```

**사용 가이드**:
- Primary Button 배경색
- 선택된 카드 테두리
- 중요 알림 아이콘
- 진행 바 활성 영역

**접근성**: 흰색 텍스트와 대비율 4.5:1 이상 충족

#### Black (보조 액션)
```
색상: #000000
용도: Secondary Button, 헤더, 강조 텍스트
```

**사용 가이드**:
- Secondary Button 배경색
- 헤더 및 네비게이션
- 제목 텍스트 (Heading)

### 3.2 배경 및 중립 색상

#### White (기본 배경)
```
색상: #FFFFFF
용도: 페이지 배경, 카드 배경, 버튼 텍스트
```

#### Grey Scale (보조 및 구분)
```
Grey-100: #F5F5F5  → 배경 구분, 비활성 영역
Grey-200: #EEEEEE  → 입력 필드 배경
Grey-300: #CCCCCC  → 테두리, 비활성 텍스트
Grey-500: #999999  → 보조 텍스트
Grey-700: #666666  → Caption, 힌트 텍스트
Grey-900: #333333  → 본문 텍스트
```

### 3.3 기능적 색상 (Functional Colors)

#### Success (성공)
```
색상: #00C73C
용도: 완료 상태, 성공 메시지, 긍정 지표
아이콘: ✅
```

**사용 예시**:
- 배포 완료: "✅ 우리동네TV 배포 완료"
- 검증 성공: "사업자번호 검증 완료 ✅"

#### Warning (경고)
```
색상: #FFC107
용도: 주의 필요, 확인 요청
아이콘: ⚠️
```

**사용 예시**:
- "⚠️ 예산이 부족할 수 있습니다"
- 검토 필요 상태 표시

#### Error (오류)
```
색상: #FF0000
용도: 오류 상태, 실패 메시지, 필수 입력
아이콘: ❌
```

**사용 예시**:
- 입력 오류: "전화번호 형식이 올바르지 않습니다"
- 배포 실패: "❌ 지니TV 배포 실패"

#### Info (정보)
```
색상: #2196F3
용도: 안내 메시지, 도움말, 팁
아이콘: 💡, ℹ️
```

**사용 예시**:
- "💡 첫 1회 무료 체험 쿠폰을 드립니다!"
- 툴팁 배경색

### 3.4 색상 사용 우선순위

1. **Primary (KT Red)**: 주요 액션 1개만 (페이지당)
2. **Secondary (Black)**: 보조 액션
3. **Outline (Grey)**: 취소, 뒤로가기
4. **Functional**: 상태 표시 전용

---

## 4. 타이포그래피

### 4.1 글꼴 (Font Family)

```
Primary Font: 'Noto Sans KR', sans-serif
Fallback: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
```

**선정 이유**:
- 한글 가독성 최적화
- 웹 폰트로 빠른 로딩
- 다양한 굵기 지원 (100-900)
- 무료 라이선스

### 4.2 타이포그래피 스케일

#### Heading 1 (대제목)
```
크기: 32px
굵기: 700 (Bold)
행간: 48px (1.5)
용도: 페이지 타이틀
예시: "이벤트 목적을 선택해주세요"
```

#### Heading 2 (중제목)
```
크기: 24px
굵기: 700 (Bold)
행간: 36px (1.5)
용도: 섹션 타이틀
예시: "진행 중인 이벤트"
```

#### Heading 3 (소제목)
```
크기: 18px
굵기: 700 (Bold)
행간: 27px (1.5)
용도: 카드 제목, 서브 섹션
예시: "📋 이벤트 개요"
```

#### Body (본문)
```
크기: 14px
굵기: 400 (Regular)
행간: 22.4px (1.6)
용도: 일반 텍스트, 설명
예시: "선택한 목적에 맞춰 AI가 최적의 이벤트를 기획합니다"
```

#### Caption (캡션)
```
크기: 12px
굵기: 400 (Regular)
행간: 18px (1.5)
용도: 힌트, 보조 정보, 날짜
예시: "예상 소요 시간: 약 10초"
```

### 4.3 폰트 굵기 (Font Weight)

```
Light: 300    → 거의 사용하지 않음
Regular: 400  → Body, Caption (기본)
Medium: 500   → 강조할 Body 텍스트
Bold: 700     → Heading 전체, 버튼 텍스트
```

### 4.4 텍스트 색상

```
Primary Text (제목, 본문): Grey-900 (#333333)
Secondary Text (보조): Grey-700 (#666666)
Disabled Text (비활성): Grey-300 (#CCCCCC)
Link Text (링크): Primary (#E60012)
```

### 4.5 반응형 타이포그래피

#### Desktop (1920px)
- 위 스케일 그대로 적용

#### Tablet (768-1024px)
```
H1: 28px
H2: 20px
H3: 16px
Body: 14px
Caption: 12px
```

#### Mobile (375-767px)
```
H1: 24px
H2: 18px
H3: 16px
Body: 14px
Caption: 12px
```

---

## 5. 간격 시스템

### 5.1 기본 그리드

**Base Unit**: 4px

모든 간격은 4px의 배수로 설정하여 일관성 유지

### 5.2 간격 스케일 (Spacing Scale)

```
Space-0:  0px   → 간격 없음
Space-1:  4px   → 최소 간격 (아이콘-텍스트)
Space-2:  8px   → 작은 간격 (버튼 내부 패딩)
Space-3:  12px  → 기본 간격 (입력 필드 사이)
Space-4:  16px  → 중간 간격 (카드 내부 요소)
Space-5:  20px  → -
Space-6:  24px  → 큰 간격 (카드 패딩, 섹션 사이)
Space-8:  32px  → 더 큰 간격 (버튼 패딩)
Space-10: 40px  → 섹션 구분
Space-12: 48px  → 페이지 상하 여백
```

### 5.3 컴포넌트별 간격 가이드

#### 버튼
```
내부 패딩 (Padding):
- Large: 16px 32px (상하 좌우)
- Medium: 12px 24px
- Small: 8px 16px

버튼 간 간격 (Margin):
- 가로 배치: 12px
- 세로 배치: 16px
```

#### 카드 (Card)
```
내부 패딩: 24px
카드 간 간격: 16px (가로), 24px (세로)
카드와 섹션 간: 32px
```

#### 입력 필드 (Input)
```
내부 패딩: 12px 16px
레이블과 필드 간: 8px
필드 간 간격: 16px
```

#### 섹션 구분
```
페이지 여백: 48px (상하)
섹션 간 여백: 40px
서브 섹션 간: 24px
```

### 5.4 레이아웃 그리드

#### Desktop (1920px)
```
Container: max-width 1440px, 중앙 정렬
좌우 여백: 48px
컬럼: 12 column grid
Gutter: 24px
```

#### Tablet (768-1024px)
```
Container: 100%
좌우 여백: 32px
컬럼: 8 column grid
Gutter: 16px
```

#### Mobile (375-767px)
```
Container: 100%
좌우 여백: 16px
컬럼: 4 column grid
Gutter: 12px
```

---

## 6. 컴포넌트 스타일

### 6.1 버튼 (Button)

#### Primary Button (주요 액션)
```css
배경: #E60012
텍스트: #FFFFFF
패딩: 16px 32px (Large), 12px 24px (Medium), 8px 16px (Small)
테두리: 없음
모서리: border-radius 4px
그림자: 없음
폰트: 14px, Bold

상태:
- Hover: 배경 #CC0010 (10% 어둡게)
- Active: 배경 #B3000E (20% 어둡게)
- Disabled: 배경 #CCCCCC, 텍스트 #999999
```

**사용 예시**: "승인하고 다음", "배포 시작", "회원가입"

#### Secondary Button (보조 액션)
```css
배경: #000000
텍스트: #FFFFFF
패딩: 16px 32px (Large), 12px 24px (Medium), 8px 16px (Small)
테두리: 없음
모서리: border-radius 4px

상태:
- Hover: 배경 #333333
- Active: 배경 #555555
- Disabled: 배경 #CCCCCC, 텍스트 #999999
```

**사용 예시**: "사업자번호 검증하기", "원본으로 되돌리기"

#### Outline Button (취소/뒤로가기)
```css
배경: 투명 (#FFFFFF)
텍스트: #333333
패딩: 16px 32px (Large), 12px 24px (Medium), 8px 16px (Small)
테두리: 1px solid #CCCCCC
모서리: border-radius 4px

상태:
- Hover: 배경 #F5F5F5, 테두리 #999999
- Active: 배경 #EEEEEE
- Disabled: 텍스트 #CCCCCC, 테두리 #EEEEEE
```

**사용 예시**: "이전", "건너뛰기", "수정하기"

#### Icon Button (아이콘만)
```css
크기: 40px × 40px
배경: 투명
아이콘 색상: #666666

상태:
- Hover: 배경 #F5F5F5
- Active: 아이콘 색상 #E60012
```

**사용 예시**: 검색 버튼, 설정 아이콘

### 6.2 입력 필드 (Input Fields)

#### Text Input (텍스트 입력)
```css
높이: 40px
패딩: 12px 16px
배경: #FFFFFF
테두리: 1px solid #CCCCCC
모서리: border-radius 4px
폰트: 14px, Regular
플레이스홀더: Grey-500 (#999999)

상태:
- Focus: 테두리 #E60012 (2px)
- Error: 테두리 #FF0000, 배경 #FFF5F5
- Disabled: 배경 #F5F5F5, 텍스트 #CCCCCC
```

#### Number Input (숫자 입력)
```css
Text Input과 동일
추가: 우측 증감 버튼 (▲▼)
```

#### Textarea (긴 텍스트)
```css
최소 높이: 120px
패딩: 12px 16px
기타: Text Input과 동일
```

#### Select Dropdown (선택)
```css
높이: 40px
패딩: 12px 16px
배경: #FFFFFF
테두리: 1px solid #CCCCCC
모서리: border-radius 4px
아이콘: ▼ (우측)

상태:
- Focus: 테두리 #E60012
- Open: 드롭다운 메뉴 표시 (아래로 슬라이드)
```

#### Checkbox (체크박스)
```css
크기: 20px × 20px
테두리: 1px solid #CCCCCC
모서리: border-radius 4px

상태:
- Checked: 배경 #E60012, 체크 아이콘 (#FFFFFF)
- Hover: 테두리 #E60012
```

#### Radio Button (라디오 버튼)
```css
크기: 20px × 20px (원형)
테두리: 1px solid #CCCCCC

상태:
- Selected: 내부 원 #E60012 (12px)
- Hover: 테두리 #E60012
```

### 6.3 카드 (Card)

#### 기본 카드
```css
배경: #FFFFFF
패딩: 24px
모서리: border-radius 8px
그림자: 0 2px 8px rgba(0,0,0,0.1)

상태:
- Hover: 그림자 0 4px 16px rgba(0,0,0,0.15)
         transform translateY(-2px)
- Active: 테두리 2px solid #E60012
```

#### Selection Card (선택 카드)
```css
기본 카드 + 테두리 2px solid transparent

상태:
- Selected: 테두리 2px solid #E60012
            배경 #FFF5F5 (옅은 빨강)
- Hover: 그림자 확대, 약간 상승
```

**사용 예시**: 이벤트 목적 선택 카드

### 6.4 모달 (Modal)

```css
배경 오버레이: rgba(0,0,0,0.5)
모달 박스:
  - 배경: #FFFFFF
  - 패딩: 32px
  - 모서리: border-radius 8px
  - 최대 너비: 600px
  - 그림자: 0 4px 24px rgba(0,0,0,0.2)

애니메이션: Scale + Fade-in (200ms)
닫기 버튼: 우측 상단 ✕
```

### 6.5 Toast 알림

```css
배경: #333333 (일반), #00C73C (성공), #FF0000 (오류)
텍스트: #FFFFFF
패딩: 16px 24px
모서리: border-radius 4px
위치: 화면 상단 중앙 또는 하단 중앙
그림자: 0 2px 8px rgba(0,0,0,0.2)

애니메이션: Slide-up (250ms)
표시 시간: 3초 (자동 닫힘)
```

### 6.6 Progress Bar (진행 바)

```css
높이: 8px
배경: #EEEEEE
진행 영역: #E60012
모서리: border-radius 4px
애니메이션: 진행 애니메이션 (smooth)

텍스트: 65% (우측 표시)
```

**사용 예시**: AI 기획 진행, 콘텐츠 생성 진행

### 6.7 Table (테이블)

```css
헤더:
  - 배경: #F5F5F5
  - 텍스트: Grey-900, Bold
  - 패딩: 12px 16px
  - 테두리: 1px solid #EEEEEE

행 (Row):
  - 배경: #FFFFFF
  - 텍스트: Grey-900, Regular
  - 패딩: 12px 16px
  - 테두리: 1px solid #EEEEEE

상태:
  - Hover: 배경 #F5F5F5
  - Selected: 배경 #FFF5F5
```

---

## 7. 반응형 브레이크포인트

### 7.1 브레이크포인트 정의

```css
Desktop:  1920px (주요 작업 환경)
Tablet:   768px - 1024px
Mobile:   375px - 767px
```

### 7.2 레이아웃 조정

#### Desktop (1920px)
```
그리드: 3-4 컬럼
Sidebar: 고정 표시 (240px)
카드: 280px × 160px
기능: 전체 사용 가능
```

#### Tablet (768-1024px)
```
그리드: 2 컬럼
Sidebar: 접기 가능 (햄버거 메뉴)
카드: 200px × 140px
기능: 주요 기능 사용 가능 (일부 제한)
```

#### Mobile (375-767px)
```
그리드: 1 컬럼
Sidebar: 오버레이 방식
카드: 전체 너비 (세로 배치)
테이블: 카드 리스트로 변경
기능: 조회 중심 (이벤트 생성은 Desktop 권장)
```

### 7.3 터치 최적화 (Mobile/Tablet)

```
버튼 최소 크기: 44px × 44px
터치 타겟 간격: 8px 이상
스와이프: 좌우 스와이프로 카드 이동
드롭다운: 바텀 시트로 변경
```

---

## 8. 대상 서비스 특화 컴포넌트

### 8.1 AIProcessing (AI 처리 표시)

**용도**: AI 기획 진행, 콘텐츠 생성 진행 화면

```css
구성:
  - 전체 진행 바 (Progress Bar)
  - 단계별 상태 리스트
    ✅ 완료: 초록색 아이콘 + 결과 요약
    ⏳ 진행 중: 노란색 아이콘 + 애니메이션 + 현재 작업 설명
    ⏸️ 대기 중: 회색 아이콘
  - 예상 소요 시간 텍스트

애니메이션:
  - 진행 바: 부드러운 전환 (transition: width 0.5s ease)
  - 진행 중 아이콘: 회전 또는 펄스 효과

색상:
  - 완료: #00C73C
  - 진행 중: #FFC107
  - 대기: #CCCCCC
```

**사용 화면**: 05-AI기획진행, 07-콘텐츠생성진행

### 8.2 DataCard (데이터 카드)

**용도**: 대시보드, 실시간 분석 화면의 주요 지표 표시

```css
크기: 280px × 160px
배경: #FFFFFF
패딩: 24px
모서리: border-radius 8px
그림자: 0 2px 8px rgba(0,0,0,0.1)

구성:
  - 아이콘: 좌측 상단 (24px)
  - 제목: 12px, Grey-700
  - 큰 숫자: 32px, Bold, Grey-900
  - 변화율: 14px, 색상은 증감에 따라
    상승: #00C73C ↑
    하락: #FF0000 ↓
  - 미니 차트 (선택): 하단 (Sparkline)

상태:
  - Hover: 그림자 확대
```

**예시**:
```
┌──────────────────┐
│ 📊 총 참여자     │
│   523명         │
│ 📈 +12          │
└──────────────────┘
```

### 8.3 ChannelCard (배포 채널 카드)

**용도**: 배포 채널 설정 및 현황 표시

```css
크기: 전체 너비
배경: #FFFFFF
패딩: 24px
모서리: border-radius 8px
테두리: 1px solid #EEEEEE

구성:
  - 체크박스: 좌측 상단
  - 채널명: 18px, Bold
  - 설정 옵션: 채널별 상이 (Select, Input 등)
  - 예상 효과: 우측 하단 (Caption)

상태:
  - Selected: 테두리 2px solid #E60012
  - Disabled: 배경 #F5F5F5
```

**사용 화면**: 10-배포채널설정, 11-배포현황

### 8.4 EventCard (이벤트 카드)

**용도**: 진행 중인 이벤트 표시

```css
크기: 전체 너비
배경: #FFFFFF
패딩: 24px
모서리: border-radius 8px
그림자: 0 2px 8px rgba(0,0,0,0.1)

구성:
  - 이벤트 아이콘: 🎉 (좌측)
  - 이벤트명: 18px, Bold
  - 상태 정보: 14px, Grey-700
    "상태: 배포 완료 | 참여자: 523명 | D-5"
  - 진행 바: Progress Bar (전체 너비)
  - 액션 버튼: 3개 (Primary, Secondary, Outline)

상태:
  - Hover: 그림자 확대, 약간 상승
```

**사용 화면**: 03-대시보드

### 8.5 StepIndicator (단계 표시)

**용도**: 다단계 프로세스의 현재 위치 표시

```css
구성:
  - 단계 번호 + 단계명 + 연결선
  - 원형 아이콘 (32px)

상태:
  - Completed: 배경 #00C73C, 체크 아이콘 ✓
  - Active: 배경 #E60012, 흰색 숫자
  - Inactive: 배경 #CCCCCC, 회색 숫자

연결선:
  - Completed: #00C73C
  - Active/Inactive: #CCCCCC
```

**예시**: "Step 2/3"

### 8.6 StatusList (상태 목록)

**용도**: AI 처리 단계별 상태 표시

```css
구성:
  - 상태 아이콘 (좌측)
  - 단계명: 16px, Bold
  - 상세 설명: 14px, Grey-700
  - 간격: 16px (항목 간)

아이콘:
  - ✅ 완료: #00C73C
  - ⏳ 진행 중: #FFC107 + 회전 애니메이션
  - ⏸️ 대기: #CCCCCC
```

---

## 9. 인터랙션 패턴

### 9.1 전환 효과 (Transitions)

#### 페이지 전환
```css
애니메이션: Fade-in
지속 시간: 300ms
Easing: ease-in-out
```

#### 모달
```css
애니메이션: Scale (0.95 → 1.0) + Fade-in
지속 시간: 200ms
Easing: cubic-bezier(0.4, 0, 0.2, 1)
배경: Fade-in 150ms
```

#### 드롭다운
```css
애니메이션: Slide-down
지속 시간: 150ms
Easing: ease-out
```

#### Toast 알림
```css
애니메이션: Slide-up (하단) 또는 Slide-down (상단)
지속 시간: 250ms
Easing: ease-out
자동 닫힘: 3초 후
```

### 9.2 호버 효과 (Hover States)

#### 버튼
```css
변화: 배경색 10% 어둡게
커서: pointer
지속 시간: 150ms
Easing: ease
```

#### 카드
```css
변화: 그림자 확대 (0 2px 8px → 0 4px 16px)
       약간 상승 (translateY: -2px)
지속 시간: 200ms
Easing: ease
```

#### 링크
```css
변화: 밑줄 표시 (text-decoration: underline)
색상: #E60012 (Primary)
```

#### 아이콘 버튼
```css
변화: 배경 #F5F5F5
       아이콘 색상 변화 (#666666 → #E60012)
지속 시간: 150ms
```

### 9.3 로딩 상태 (Loading States)

#### 버튼 로딩
```css
상태: 비활성화 (disabled)
텍스트: "처리 중..."
아이콘: 회전하는 스피너 (좌측)
스피너 색상: #FFFFFF
```

#### 페이지 로딩
```css
위치: 화면 중앙
스피너: 큰 원형 스피너 (48px)
색상: #E60012
배경: 반투명 오버레이 (rgba(255,255,255,0.8))
```

#### AI 처리 로딩
```css
진행 바: Progress Bar (애니메이션)
상태 텍스트: 현재 단계 설명
아이콘: ⏳ + 회전 애니메이션
```

#### 데이터 로드
```css
스켈레톤 UI: 콘텐츠 모양의 회색 박스
애니메이션: 좌→우 그라데이션 이동 (Shimmer effect)
색상: #EEEEEE → #F5F5F5 → #EEEEEE
```

### 9.4 포커스 상태 (Focus States)

```css
모든 인터랙티브 요소:
  - 아웃라인: 2px solid #E60012
  - 오프셋: 2px
  - 모서리: border-radius 유지
```

**접근성**: 키보드 네비게이션 시 명확한 포커스 표시

### 9.5 스크롤 애니메이션

```css
요소 등장: Fade-in + Slide-up (20px)
지속 시간: 400ms
Easing: ease-out
Trigger: 요소가 화면에 50% 진입 시
```

---

## 10. 변경 이력

### Version 1.0 (2025-08-15)

**초기 버전 생성**

**작성 내용**:
- 브랜드 아이덴티티 정의
- 4가지 핵심 디자인 원칙 수립
- 컬러 시스템 (Primary, Functional, Grey Scale)
- 타이포그래피 시스템 (Noto Sans KR 기반)
- 4px 기반 간격 시스템
- 기본 및 복합 컴포넌트 스타일 정의
- 반응형 브레이크포인트 (Desktop/Tablet/Mobile)
- 서비스 특화 컴포넌트 8종 (AIProcessing, DataCard 등)
- 인터랙션 패턴 및 애니메이션 정의

**참고 자료**:
- KT 사장이지 플랫폼 디자인
- 뤼튼 디자인 시스템
- UI/UX 설계서 (design/uiux/uiux.md)
- 유저스토리 (design/userstory.md)

**작성 원칙 준수**:
✅ 39개 유저스토리와 완전히 매칭
✅ 불필요한 추가 설계 없음
✅ KT 브랜드 아이덴티티 유지
✅ 실무 구현 가능한 명세

---

## 부록: 빠른 참조

### 주요 색상
```
Primary:   #E60012
Secondary: #000000
Success:   #00C73C
Warning:   #FFC107
Error:     #FF0000
Info:      #2196F3
```

### 타이포그래피
```
H1: 32px Bold
H2: 24px Bold
H3: 18px Bold
Body: 14px Regular
Caption: 12px Regular
```

### 간격
```
Space-2: 8px
Space-4: 16px
Space-6: 24px
Space-8: 32px
Space-12: 48px
```

### 컴포넌트 크기
```
버튼 높이: 48px (L), 40px (M), 32px (S)
입력 필드: 40px
카드 모서리: 8px
버튼 모서리: 4px
```

---

**문서 끝**