From 7ab2fd897b4b378e528f1cd011a41707bac6f87f Mon Sep 17 00:00:00 2001 From: cherry2250 Date: Fri, 17 Oct 2025 14:00:40 +0900 Subject: [PATCH] add style guide --- design/uiux/style-guide.md | 1035 ++++++++++++++++++++++++++++++++++++ 1 file changed, 1035 insertions(+) create mode 100644 design/uiux/style-guide.md diff --git a/design/uiux/style-guide.md b/design/uiux/style-guide.md new file mode 100644 index 0000000..c87f02a --- /dev/null +++ b/design/uiux/style-guide.md @@ -0,0 +1,1035 @@ +# 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 +``` + +--- + +**문서 끝**