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

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

문서 정보

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

---

목차

1. 브랜드 아이덴티티
2. 디자인 원칙
3. 컬러 시스템
4. 타이포그래피
5. 간격 시스템
6. 컴포넌트 스타일
7. 반응형 브레이크포인트
8. 대상 서비스 특화 컴포넌트
9. 인터랙션 패턴
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 (주요 액션)

배경: #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 (보조 액션)

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

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

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

Outline Button (취소/뒤로가기)

배경: 투명 (#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 (아이콘만)

크기: 40px × 40px
배경: 투명
아이콘 색상: #666666

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

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

6.2 입력 필드 (Input Fields)

Text Input (텍스트 입력)

높이: 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 (숫자 입력)

Text Input과 동일
추가: 우측 증감 버튼 (▲▼)

Textarea (긴 텍스트)

최소 높이: 120px
패딩: 12px 16px
기타: Text Input과 동일

Select Dropdown (선택)

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

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

Checkbox (체크박스)

크기: 20px × 20px
테두리: 1px solid #CCCCCC
모서리: border-radius 4px

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

Radio Button (라디오 버튼)

크기: 20px × 20px (원형)
테두리: 1px solid #CCCCCC

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

6.3 카드 (Card)

기본 카드

배경: #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 (선택 카드)

기본 카드 + 테두리 2px solid transparent

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

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

6.4 모달 (Modal)

배경 오버레이: 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 알림

배경: #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 (진행 바)

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

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

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

6.7 Table (테이블)

헤더:
  - 배경: #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 브레이크포인트 정의

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 기획 진행, 콘텐츠 생성 진행 화면

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

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

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

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

8.2 DataCard (데이터 카드)

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

크기: 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 (배포 채널 카드)

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

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

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

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

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

8.4 EventCard (이벤트 카드)

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

크기: 전체 너비
배경: #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 (단계 표시)

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

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

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

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

예시: "Step 2/3"

8.6 StatusList (상태 목록)

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

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

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

---

9. 인터랙션 패턴

9.1 전환 효과 (Transitions)

페이지 전환

애니메이션: Fade-in
지속 시간: 300ms
Easing: ease-in-out

모달

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

드롭다운

애니메이션: Slide-down
지속 시간: 150ms
Easing: ease-out

Toast 알림

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

9.2 호버 효과 (Hover States)

버튼

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

카드

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

링크

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

아이콘 버튼

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

9.3 로딩 상태 (Loading States)

버튼 로딩

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

페이지 로딩

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

AI 처리 로딩

진행 바: Progress Bar (애니메이션)
상태 텍스트: 현재 단계 설명
아이콘: ⏳ + 회전 애니메이션

데이터 로드

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

9.4 포커스 상태 (Focus States)

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

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

9.5 스크롤 애니메이션

요소 등장: 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

---

문서 끝