shared-dg05-dodari/kt-event-marketing
7
0
Fork 0
mirror of https://github.com/ktds-dg0501/kt-event-marketing.git synced 2025-12-06 13:26:23 +00:00
Code Issues Packages Projects Releases Wiki Activity
kt-event-marketing/design/uiux/uiux-design.md
cherry2250 54914bf81a architecture pattern
2025-10-21 17:12:35 +09:00

22 KiB
Raw Blame History

KT AI 기반 소상공인 이벤트 자동 생성 서비스 - UI/UX 설계서

문서 정보

  • 작성일: 2025-10-21
  • 버전: 2.0
  • 기반 문서: 유저스토리 v2.0, 프로토타입 분석
  • 설계 원칙: Mobile First, 접근성 우선, 일관성

1. 서비스 개요

1.1 서비스 목적

소상공인이 AI의 도움으로 전문 마케터 없이도 효과적인 이벤트를 기획하고 실행할 수 있도록 지원

1.2 핵심 가치

  • 혁신성: AI 기반 자동화로 3분 만에 이벤트 콘텐츠 생성
  • 신뢰성: KT 브랜드 기반의 안정적인 서비스
  • 접근성: 초보자도 쉽게 사용할 수 있는 직관적 인터페이스

1.3 타겟 사용자

  • Primary: 마케팅 전문 지식이 부족한 소상공인
  • Secondary: 이벤트 마케팅 경험이 있는 중소기업 담당자

2. 화면 구성

2.1 전체 화면 구조 (총 17개)

인증 영역 (01~04)

  • 01-로그인.html: 이메일/비밀번호 로그인
  • 02-회원가입.html: 신규 사용자 등록
  • 03-프로필.html: 사용자 프로필 및 매장 정보 관리
  • 04-로그아웃확인.html: 로그아웃 확인 모달

대시보드 영역 (05~06)

  • 05-대시보드.html: 메인 홈 화면
    • KPI 요약 (진행 중 이벤트, 총 참여자, 평균 ROI)
    • 빠른 시작 (새 이벤트, 분석)
    • 진행 중인 이벤트 목록
    • 최근 활동 타임라인
  • 06-이벤트목록.html: 전체 이벤트 목록 및 필터링

이벤트 생성 플로우 (07~12, 7단계)

  • 07-이벤트목적선택.html: 이벤트 목적 선택
  • 08-AI이벤트추천.html: AI 트렌드 분석 및 이벤트 추천
  • 09-콘텐츠미리보기.html: SNS 이미지 스타일 선택
  • 10-콘텐츠편집.html: 텍스트 및 색상 편집
  • 11-배포채널선택.html: 배포 채널 선택
  • 12-최종승인.html: 이벤트 최종 검토 및 승인

이벤트 관리 및 모니터링 (13~17)

  • 13-이벤트상세.html: 이벤트 상세 정보 및 실시간 KPI
  • 14-참여자목록.html: 참여자 관리 및 필터링
  • 15-이벤트참여.html: 사용자 이벤트 참여 화면 (고객용)
  • 16-당첨자추첨.html: 당첨자 추첨 및 관리
  • 17-성과분석.html: 실시간 대시보드 및 성과 분석

2.2 화면 흐름도

[01-로그인 / 02-회원가입]
         ↓
[05-대시보드] (Bottom Nav: 홈)
    ↓
    ├─ [06-이벤트목록] (Bottom Nav: 이벤트)
    │      ↓
    │  [13-이벤트상세] → [14-참여자목록] → [16-당첨자추첨]
    │      ↓
    │  [17-성과분석] (Bottom Nav: 분석)
    │
    └─ [새 이벤트 생성 플로우] (FAB)
         ↓
       [07-목적선택]
         ↓
       [08-AI추천]
         ↓
       [09-콘텐츠미리보기]
         ↓
       [10-콘텐츠편집]
         ↓
       [11-배포채널선택]
         ↓
       [12-최종승인]
         ↓
       [13-이벤트상세]

[03-프로필] (Bottom Nav: 프로필)
    ↓
[04-로그아웃확인]

3. 공통 컴포넌트

3.1 Navigation

Bottom Navigation (모든 메인 화면)

구조: 4개 탭
- 홈: 05-대시보드.html
- 이벤트: 06-이벤트목록.html
- 분석: 17-성과분석.html
- 프로필: 03-프로필.html

디자인:
- 높이: 60px
- 배경: White
- 그림자: 0 -2px 8px rgba(0, 0, 0, 0.08)
- 아이콘: Material Icons (24px)
- 활성화: KT Red (#E31E24)
- 비활성화: Gray (#9E9E9E)

Header

구조: 타이틀 + 뒤로가기 + 프로필
- 대시보드: 뒤로가기 없음
- 이벤트 생성 플로우: 프로필 버튼 숨김

디자인:
- 높이: 56px
- 배경: White
- 제목: H1 (24px Bold)
- 아이콘: Material Icons (24px)

FAB (Floating Action Button)

위치: 우측 하단 고정
기능: 새 이벤트 생성 (07-이벤트목적선택.html)

디자인:
- 크기: 56 x 56px
- 배경: KT Red (#E31E24)
- 아이콘: add (White, 24px)
- 그림자: 0 4px 12px rgba(227, 30, 36, 0.3)
- Bottom Navigation 위 80px

3.2 Card 컴포넌트

Default Card

배경: #FFFFFF
테두리: 1px solid #E0E0E0
둥근 모서리: 12px
그림자: 0 2px 8px rgba(0, 0, 0, 0.08)
패딩: 24px

Event Card

구조:
- 이벤트명 (H3)
- 상태 배지 (진행중/예정/종료)
- 기간 정보 (Body-S)
- 통계 정보 (참여자, ROI 등)

상태:
- Hover: 테두리 #E31E24, 그림자 증가
- Selected: 테두리 2px solid #E31E24

Selection Card (09-콘텐츠미리보기)

특징: 카드 전체가 선택 가능한 영역
- Radio 버튼 숨김 (기능은 유지)
- 선택 시 시각적 피드백:
  - 테두리: 3px solid #E31E24
  - 그림자: 0 4px 12px rgba(227, 30, 36, 0.2)
  - 우측 상단 체크 배지 표시
- Hover: transform translateY(-2px)

3.3 Form 컴포넌트

Text Input

높이: 48px
패딩: 16px
테두리: 1px solid #D9D9D9
둥근 모서리: 8px
폰트: Body-L (16px Regular)

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)

Checkbox & Radio

크기: 24 x 24px (터치 영역 44px)

Checkbox:
- 둥근 모서리: 4px
- Checked: 배경 #E31E24, 체크마크 White

Radio:
- 둥근 모서리: 50% (원형)
- Selected: 테두리 #E31E24, 내부 점 12px

3.4 Modal 컴포넌트

Modal Dialog

최대 너비: 400px (Mobile), 480px (Tablet+)
패딩: 24px
둥근 모서리: 16px
그림자: 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
- Hide: opacity 1→0, scale 1→0.95, 200ms

Bottom Sheet

최대 높이: 80vh
둥근 모서리: 24px 24px 0 0
Handle: 40px x 4px, #D9D9D9 (상단 중앙)

애니메이션:
- Open: translateY(100% → 0), 300ms
- Close: translateY(0 → 100%), 250ms

Toast

위치: 하단 중앙, Bottom Nav 위 80px
배경: #1A1A1A (90% opacity)
텍스트: White
패딩: 16px 24px
둥근 모서리: 8px
자동 닫힘: 3초

타입별 아이콘:
- Success: ✓ (#00C853)
- Error: ✕ (#D32F2F)
- Info: ⓘ (#0288D1)

4. 화면별 상세 설계

4.1 인증 영역

01-로그인.html

레이아웃:
- 로고 (상단 중앙)
- 로그인 폼 (중앙 정렬)
- 회원가입/비밀번호찾기 링크 (하단)

컴포넌트:
- Email Input
- Password Input
- "로그인 유지" Checkbox
- Primary Button (로그인)
- Text Button (회원가입, 비밀번호 찾기)

유저스토리: UFR-USER-020

02-회원가입.html

레이아웃: 세로 스크롤
섹션:
1. 기본 정보
   - 이름, 전화번호, 이메일, 비밀번호
2. 매장 정보
   - 매장명, 업종, 주소, 영업시간
3. 사업자번호 (검증 필요)

컴포넌트:
- Text Input (각 필드)
- Select Dropdown (업종)
- Primary Button (회원가입)
- 검증 에러 메시지

유저스토리: UFR-USER-010

03-프로필.html

레이아웃:
- 프로필 헤더 (상단)
- 편집 폼 (세로 스크롤)
- 저장/로그아웃 버튼 (하단 고정)

섹션:
1. 사용자 정보 (아이콘 + 이름/이메일)
2. 기본 정보 편집
3. 매장 정보 편집
4. 비밀번호 변경
5. 로그아웃 버튼

컴포넌트:
- Text Input (각 필드)
- Primary Button (저장)
- Text Button (로그아웃, Error 색상)

유저스토리: UFR-USER-030
Bottom Nav: 프로필 탭 활성화

04-로그아웃확인.html

유형: Modal Dialog

구조:
- 제목: "로그아웃 하시겠습니까?"
- 본문: 안내 메시지
- 버튼: 취소 (Secondary) / 확인 (Primary)

유저스토리: UFR-USER-040

4.2 대시보드 영역

05-대시보드.html

레이아웃: 세로 스크롤

섹션:
1. KPI 요약 (그리드)
   - 진행 중 이벤트 수
   - 총 참여자 수
   - 평균 ROI

2. 빠른 시작 (2개 카드)
   - 새 이벤트 만들기
   - 분석 보기

3. 진행 중인 이벤트 (카드 리스트)
   - 최대 5개 표시
   - "전체보기" 링크

4. 최근 활동 (타임라인)

컴포넌트:
- KPI Card (3개, 그리드)
- Action Card (2개, 그리드)
- Event Card (리스트)
- Timeline Item (리스트)
- FAB (새 이벤트)

유저스토리: UFR-EVENT-010
Bottom Nav: 홈 탭 활성화

06-이벤트목록.html

레이아웃: 세로 스크롤

섹션:
1. 검색 바
2. 필터 (상태, 기간)
3. 정렬 (최신순, 참여자순, ROI순)
4. 이벤트 카드 리스트
5. 페이지네이션

컴포넌트:
- Search Input
- Filter Chips
- Dropdown (정렬)
- Event Card (리스트)
- Pagination

유저스토리: UFR-EVENT-070
Bottom Nav: 이벤트 탭 활성화

4.3 이벤트 생성 플로우

07-이벤트목적선택.html

레이아웃: 세로 스크롤

섹션:
- 제목: "이벤트 목적을 선택하세요"
- 옵션 카드 (4개)
  1. 신규 고객 유치
  2. 재방문 유도
  3. 매출 증대
  4. 인지도 향상

컴포넌트:
- Option Card (4개, Radio 버튼 포함)
  - 아이콘 + 제목 + 설명
- Primary Button (다음)

상호작용:
- 카드 선택 시 강조 표시
- 선택 후 다음 버튼 활성화

유저스토리: UFR-EVENT-020
Progress: 1/7 단계

08-AI이벤트추천.html

레이아웃: 세로 스크롤

섹션:
1. AI 트렌드 분석 결과 (상단 카드)
   - 업종 트렌드 (store 아이콘)
   - 지역 트렌드 (location_on 아이콘)
   - 시즌 트렌드 (wb_sunny 아이콘)

2. 예산별 추천 이벤트 제목 및 설명
   - "예산별 추천 이벤트"
   - "각 예산별 2가지 방식 (온라인 1개, 오프라인 1개)을 추천합니다"

3. 예산 선택 네비게이션 (Sticky)
   - 💰 저비용 / 💰💰 중비용 / 💰💰💰 고비용
   - 탭 형태, 클릭 시 해당 섹션으로 스크롤

4. 예산별 추천 이벤트 (각 예산당 2개 카드)
   - 저비용 (25~30만원): 온라인/오프라인 각 1개
   - 중비용 (60~70만원): 온라인/오프라인 각 1개
   - 고비용 (200~250만원): 온라인/오프라인 각 1개
   - 각 카드 구성:
     - 온라인/오프라인 배지
     - 이벤트 제목 (인라인 편집 가능, editable-field)
     - 경품명 (인라인 편집 가능, editable-field)
     - 참여 방법
     - 예상 통계 (참여자 수, 비용, ROI)
     - Radio 버튼 (카드 내부)

컴포넌트:
- Trend Analysis Card (3개 트렌드 항목)
- Budget Navigation (Sticky, 3개 버튼)
- Option Card (총 6개, Radio 선택)
  - 온라인/오프라인 배지
  - Editable Field (제목, 경품)
  - Radio 버튼 (visible)
- Primary Button (다음)

상호작용:
- 예산 네비게이션 클릭: 해당 섹션으로 smooth scroll
- Editable Field 클릭: 인라인 편집 활성화
- 제목/경품 hover: 편집 가능 표시 (점선 테두리)
- Radio 선택: 1개만 선택 가능
- 선택 후 다음 버튼 활성화

유저스토리: UFR-EVENT-030, UFR-AI-010
Progress: 2/7 단계

특징:
- 예산별 2가지 방식 제공 (온라인/오프라인)
- 총 6개 옵션 중 1개 선택
- 인라인 편집으로 즉시 커스터마이징

09-콘텐츠미리보기.html

레이아웃: 세로 스크롤

섹션:
- 제목: "SNS 이미지 스타일을 선택하세요"
- 스타일 카드 (5개 그리드)
  1. 심플 - 깔끔하고 읽기 쉬운 디자인
  2. 모던 - 트렌디하고 세련된 디자인
  3. 귀여움 - 친근하고 따뜻한 디자인
  4. 고급스러움 - 프리미엄 느낌의 디자인
  5. 트렌디 - MZ세대 감성의 디자인

컴포넌트:
- Style Selection Card (5개, 카드 선택 UI)
  구조:
  - Selected Badge (우측 상단, 조건부)
    - 크기: 32x32px
    - 배경: KT Red (#E31E24)
    - 아이콘: check (White, 20px)
    - 둥근 모서리: 50% (원형)
  - Image Preview (1:1 비율)
    - 배경: Gray-100 (플레이스홀더)
    - 둥근 모서리: 12px
  - Style Name (H3)
  - Description (Body-S, Secondary)
  - "크게보기" 버튼 (Secondary Button, Small)
  - Radio Input (display: none)

  스타일:
  - 기본: border 3px solid transparent
  - Hover: transform translateY(-2px), 그림자 증가
  - Selected: border-color KT Red, 그림자 강조
  - Cursor: pointer

- Fullscreen Modal
  - 배경: rgba(0, 0, 0, 0.95)
  - Close 버튼 (우측 상단)
  - Image (contain, max 100%)

- Primary Button (다음)

상호작용:
- 카드 클릭: Radio 선택 토글
- Selected 시: 테두리 강조 + 체크 배지 표시
- "크게보기" 클릭: 전체화면 모달 (이벤트 버블링 방지)
- 모달 닫기: 배경 클릭 or X 버튼
- AI 생성 시간: 약 5초 (로딩 표시)

유저스토리: UFR-CONT-010
Progress: 3/7 단계

구현 특징:
- Radio 버튼 숨김 (폼 제출용으로만 사용)
- 카드 전체가 label로 작동
- 이벤트 버블링 방지 (stopPropagation)
- 키보드 접근성 지원 (Tab, Enter)
- transition: all 0.3s ease

10-콘텐츠편집.html

레이아웃:
- Mobile: 세로 스택 (편집폼 → 미리보기)
- Desktop: 좌우 분할 (편집폼 | 미리보기)

섹션:
1. 텍스트 편집 (좌측)
   - 제목 입력
   - 경품 입력
   - 참여 안내 입력

2. 미리보기 (우측)
   - 실시간 업데이트

삭제된 기능:
- 로고 위치 선택 (상단/하단/중앙)
- 로고 크기 조정

컴포넌트:
- Text Input (제목)
- Text Input (경품)
- Textarea (참여 안내)
- Preview Card (실시간)
- Primary Button (다음)
- Secondary Button (저장)

상호작용:
- 입력 시 실시간 미리보기 업데이트

유저스토리: UFR-CONT-020
Progress: 4/7 단계

11-배포채널선택.html

레이아웃: 세로 스크롤

섹션:
1. 채널 선택 (복수 선택)
   - 우리동네TV (Checkbox)
   - 링고비즈 (Checkbox)
   - SNS (Checkbox)
   - QR코드 (Checkbox)

2. 채널별 옵션 (조건부 표시)
   - 우리동네TV: 지역 선택
   - SNS: 플랫폼 선택 (Instagram, Naver, Facebook)
   - QR코드: 생성 옵션

컴포넌트:
- Checkbox List (채널)
- Conditional Options (각 채널)
- Primary Button (다음)

상호작용:
- 채널 선택 시 해당 옵션 표시
- 최소 1개 선택 필수

유저스토리: UFR-DIST-010
Progress: 5/7 단계

12-최종승인.html

레이아웃: 세로 스크롤

섹션:
1. 이벤트 요약
   - 제목, 경품, 참여 방법
2. 이미지 미리보기
3. 배포 채널
4. 일정 설정
   - 시작일: 즉시 or 예약
   - 종료일: 선택

컴포넌트:
- Summary Card (요약 정보)
- Image Preview
- Channel Badges
- Date Picker (일정)
- Primary Button (승인 및 배포)
- Secondary Button (수정)

상호작용:
- 수정: 이전 단계로 이동
- 승인: 이벤트 생성 및 배포

유저스토리: UFR-DIST-020
Progress: 7/7 단계

4.4 이벤트 관리 및 모니터링

13-이벤트상세.html

레이아웃: 세로 스크롤

섹션:
1. 이벤트 헤더
   - 이미지 썸네일
   - 제목, 상태, 기간

2. 실시간 KPI (4개 카드)
   - 참여자 수
   - 조회수
   - ROI
   - 전환율

3. 빠른 액션
   - 참여자 목록
   - 당첨자 관리
   - 성과 분석
   - 이벤트 수정

4. 참여 추이 차트

컴포넌트:
- Event Header (이미지 + 정보)
- KPI Card (4개, 그리드)
- Action Button (4개, 그리드)
- Chart (참여 추이)

유저스토리: UFR-EVENT-060
Bottom Nav: 이벤트 탭 활성화

14-참여자목록.html

레이아웃: 세로 스크롤

섹션:
1. 검색 바
2. 필터 (채널, 상태)
3. 참여자 카드 리스트
4. 페이지네이션
5. 엑셀 다운로드 (Desktop)

컴포넌트:
- Search Input
- Filter Dropdowns
- Participant Card (리스트)
  - 이름, 전화번호, 참여 경로, 일시, 당첨 여부
- Pagination
- Download Button (Desktop)

상호작용:
- 카드 클릭: 참여자 상세 모달

유저스토리: UFR-PART-020

15-이벤트참여.html

유형: 고객용 화면 (공개 URL)

레이아웃: 세로 스크롤

섹션:
1. 이벤트 이미지
2. 이벤트 정보
   - 제목, 경품, 참여 방법
3. 참여 폼
   - 이름, 전화번호 입력
4. 개인정보 동의
5. 참여하기 버튼

컴포넌트:
- Event Banner (이미지)
- Info Card (정보)
- Text Input (이름, 전화번호)
- Checkbox (동의)
- Primary Button (참여하기)

상호작용:
- 유효성 검증
- 중복 참여 방지
- 참여 완료 모달

유저스토리: UFR-PART-010

16-당첨자추첨.html

레이아웃: 세로 스크롤

섹션:
1. 추첨 설정
   - 당첨자 수 입력
   - 자동 추첨 버튼

2. 당첨자 목록 (추첨 후)
   - 이름, 전화번호, 당첨 경품

3. 액션
   - 문자 발송
   - 엑셀 다운로드

컴포넌트:
- Number Input (당첨자 수)
- Primary Button (추첨)
- Winner Card (리스트)
- Action Buttons (문자, 다운로드)

상호작용:
- 추첨: 애니메이션 효과
- 결과: 즉시 표시

유저스토리: UFR-PART-030

17-성과분석.html

레이아웃: 세로 스크롤

섹션:
1. 요약 KPI (4개 카드)
   - 참여자 수
   - 총 비용
   - 예상 수익
   - ROI

2. 차트 (2개, 그리드)
   - 채널별 성과 (파이 차트)
   - 시간대별 참여 추이 (라인 차트)

3. 상세 분석 (2개, 그리드)
   - ROI 상세 (테이블)
   - 참여자 프로필 (바 차트)

컴포넌트:
- Summary Card (4개, 그리드)
- Chart Card (파이, 라인)
- Table (ROI 상세)
- Bar Chart (참여자 프로필)
- Refresh Indicator (실시간 업데이트)

상호작용:
- Pull to Refresh (모바일)
- 5분마다 자동 갱신

유저스토리: UFR-ANAL-010
Bottom Nav: 분석 탭 활성화

5. 반응형 디자인

5.1 Breakpoints

Mobile (기본): 320px ~ 767px
Tablet: 768px ~ 1023px
Desktop: 1024px 이상

5.2 레이아웃 변화

대시보드 (05)

Mobile:  KPI 세로 스택
Tablet:  KPI 2x2 그리드, 이벤트 2열
Desktop: KPI 4열, 이벤트 3열 + 사이드바

이벤트 생성 (09, 10)

Mobile:  세로 스택
Tablet:  세로 스택 (간격 증가)
Desktop: 좌우 분할 (편집 | 미리보기)

성과 분석 (17)

Mobile:  차트 세로 스택
Tablet:  차트 2x1 그리드
Desktop: 차트 2x2 그리드

6. 인터랙션 패턴

6.1 Navigation

  • Bottom Nav: 탭 클릭 시 즉시 화면 전환
  • Back Button: 이전 화면으로 이동
  • FAB: 새 이벤트 생성 플로우 시작

6.2 Form

  • 실시간 검증: 입력 필드 blur 시 유효성 검사
  • 에러 메시지: 필드 하단에 빨간색 텍스트
  • 성공 피드백: Toast 메시지

6.3 Loading States

  • AI 처리: Progress Indicator + 예상 시간
  • 데이터 로딩: Skeleton Screen
  • 버튼 클릭: Spinner + 비활성화

6.4 Feedback

  • 성공: Green Toast + 체크 아이콘
  • 에러: Red Toast + X 아이콘
  • 정보: Blue Toast + i 아이콘

6.5 Gestures (Mobile)

  • Swipe: 이벤트 카드 좌우 스와이프 (삭제/편집)
  • Pull to Refresh: 대시보드, 성과 분석
  • Long Press: 컨텍스트 메뉴 표시

7. 접근성 고려사항

7.1 WCAG 2.1 AA 준수

  • 색상 대비: 최소 4.5:1 (텍스트), 3:1 (UI 요소)
  • 터치 영역: 최소 44x44px
  • 키보드 네비게이션: 모든 인터랙티브 요소 접근 가능
  • Focus Indicator: 명확한 포커스 표시

7.2 스크린 리더 지원

  • ARIA Labels: 모든 버튼, 링크, 폼 필드
  • ARIA Roles: 적절한 역할 지정
  • Live Regions: 동적 콘텐츠 업데이트 알림

7.3 대안 제공

  • 색상 외 표현: 아이콘 + 텍스트 조합
  • 키보드 대안: 드래그 앤 드롭 → 버튼 클릭
  • 음성 대안: 이미지 alt 텍스트

8. 성능 최적화

8.1 이미지

  • 포맷: WebP (fallback: JPG)
  • 압축: Quality 80-85%
  • Lazy Loading: 스크롤 시 로드

8.2 폰트

  • Font Display: swap
  • Preload: 주요 폰트
  • Subset: 자주 쓰는 글자만

8.3 애니메이션

  • GPU 가속: transform, opacity
  • Will-Change: 애니메이션 직전만 적용

9. 에러 처리

9.1 네트워크 에러

표시: Toast (빨간색)
메시지: "네트워크 연결을 확인해주세요"
액션: 재시도 버튼

9.2 Validation 에러

표시: Input 하단 메시지
색상: Error Red (#D32F2F)
예시: "이메일 형식이 올바르지 않습니다"

9.3 서버 에러

표시: Modal Dialog
메시지: "일시적인 오류가 발생했습니다. 잠시 후 다시 시도해주세요."
액션: 확인 버튼

9.4 Empty State

표시: 중앙 정렬 메시지 + 아이콘
예시:
- "아직 이벤트가 없습니다"
- "참여자가 없습니다"
액션: 관련 CTA 버튼

10. 디자인 시스템 참조

  • 스타일 가이드: design/uiux/style-guide.md
  • 색상 시스템: KT Red (#E31E24), AI Blue (#0066FF)
  • 타이포그래피: Pretendard, 8단계 스케일
  • 간격 시스템: 4px 기반, 6단계
  • 컴포넌트: Button, Card, Input, Modal, Toast, Bottom Nav
  • 아이콘: Material Icons Outlined/Filled

11. 변경 이력

Version 2.1 (2025-10-21)

  • 프로토타입 실제 구현 내용 반영
  • 08-AI이벤트추천: 예산별 2가지 방식(온라인/오프라인) 상세화
  • 08-AI이벤트추천: Budget Navigation (Sticky) 추가
  • 08-AI이벤트추천: Editable Field (인라인 편집) 기능 추가
  • 09-콘텐츠미리보기: Selection Card 세부 구현 상세 기술
  • 09-콘텐츠미리보기: Fullscreen Modal, 이벤트 버블링 방지 추가

Version 2.0 (2025-10-21)

  • 프로토타입 분석 기반 전면 개정
  • 화면 번호 체계 정립 (01~17번)
  • 네비게이션 구조 변경 (햄버거 메뉴 제거, Bottom Nav 4탭)
  • 이벤트 생성 플로우 상세화 (7단계)
  • 카드 선택 UI 패턴 추가 (09-콘텐츠미리보기)
  • 로고 위치 선택 삭제 (10-콘텐츠편집)
  • 성과 분석 Bottom Nav 추가 (17-성과분석)
  • 실시간 KPI 업데이트 추가 (13-이벤트상세)

Version 1.0 (2025-10-17)

  • 초안 작성

문서 끝