kt-event-marketing-fe/design/frontend/style-guide.md

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

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

/* 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

---

문서 끝