P82282866/kt-event-marketing

Fork 0

cherry2250 294516adfb edit uiux

2025-10-17 14:40:03 +09:00

90 KiB

Raw Blame History

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

문서 정보

작성일: 2025-10-17
버전: 1.0
설계 원칙: Mobile First, 유저스토리 기반, 우선순위 중심

1. 프로토타입 화면 목록 정의

1.1 소상공인용 앱/웹 (26개 화면)

User 서비스

01-회원가입 - 소상공인 회원가입 (UFR-USER-010)
02-매장정보등록 - 매장 정보 및 사업자번호 검증 (UFR-USER-020)

Event Planning 서비스

03-이벤트목적선택 - 이벤트 목적 설정 (UFR-PLAN-010)
04-AI트렌드분석결과 - 업종/지역 트렌드 분석 결과 (UFR-PLAN-020)
05-AI경품추천 - 예산 기반 경품 추천 (UFR-PLAN-030)
06-AI참여방법설계 - 참여 방법 옵션 제시 (UFR-PLAN-040)
07-AI홍보문구생성 - 홍보 문구 및 해시태그 생성 (UFR-PLAN-050)
08-이벤트기획안승인 - 완성된 기획안 검토 및 승인 (UFR-PLAN-060)

Content Generation 서비스

09-AI이미지생성 - 브랜드 컬러/로고 기반 이미지 생성 (UFR-CONT-010)
10-AI영상제작 - 15초 홍보 영상 제작 (UFR-CONT-020)
11-SNS콘텐츠생성 - 플랫폼별 최적화 콘텐츠 (UFR-CONT-030)
12-QR포스터생성 - 인쇄용 QR 포스터 (UFR-CONT-040)
13-콘텐츠편집 - 생성된 콘텐츠 수정 (UFR-CONT-050)
14-콘텐츠최종승인 - 콘텐츠 미리보기 및 승인 (UFR-CONT-060)

Distribution 서비스

15-다중채널배포설정 - 배포 채널 선택 및 일정 설정 (UFR-DIST-010)
16-배포진행상태 - 채널별 배포 진행 상황 (UFR-DIST-020~050)
17-오프라인자료다운로드 - QR 포스터 및 인쇄물 다운로드 (UFR-DIST-060)

Participation 서비스

18-이벤트참여신청 - 고객용 이벤트 참여 화면 (UFR-PART-010)
19-참여완료 - 응모번호 발급 화면 (UFR-PART-010)
20-당첨자명단관리 - 당첨자 조회 및 경품 지급 관리 (UFR-PART-050)

Analytics 서비스

21-실시간대시보드 - 이벤트 성과 실시간 모니터링 (UFR-ANAL-010)
22-채널별성과분석 - 채널별 노출/참여율 비교 (UFR-ANAL-020)
23-ROI분석 - 투자 대비 수익 분석 (UFR-ANAL-030)
24-분석리포트 - PDF 종합 리포트 (UFR-ANAL-040)

AI Learning 서비스

25-AI개선안제안 - 이벤트 개선안 제시 (UFR-AIMPR-010)
26-다음이벤트아이디어 - 시즌별 이벤트 아이디어 (UFR-AIMPR-020)

공통

00-메인대시보드 - 홈 화면 (진입점)
99-마이페이지 - 사용자 설정 및 정보

2. 화면 간 사용자 플로우 정의

2.1 신규 가입 플로우

01-회원가입
  → KT 본인 인증
  → 02-매장정보등록
  → 사업자번호 검증
  → 무료 체험 쿠폰 발급
  → 00-메인대시보드

2.2 이벤트 생성 플로우 (핵심)

00-메인대시보드
  → 03-이벤트목적선택
  → 04-AI트렌드분석결과 (AI 처리 3초)
  → 05-AI경품추천 (AI 처리 3초)
  → 06-AI참여방법설계 (AI 처리 2초)
  → 07-AI홍보문구생성 (AI 처리 2초)
  → 08-이벤트기획안승인
  → 09-AI이미지생성 (AI 처리 90초)
  → 10-AI영상제작 (AI 처리 90초, 병렬)
  → 11-SNS콘텐츠생성 (20초)
  → 12-QR포스터생성 (10초)
  → [선택] 13-콘텐츠편집
  → 14-콘텐츠최종승인
  → 15-다중채널배포설정
  → 16-배포진행상태
  → 17-오프라인자료다운로드
  → 21-실시간대시보드

총 소요 시간: 기획 10초 + 콘텐츠 3분 + 배포 1분 = 약 4분 10초

2.3 이벤트 관리 플로우

00-메인대시보드
  → 21-실시간대시보드 (진행중 이벤트 선택)
  → [탭 전환] 22-채널별성과분석
  → [탭 전환] 23-ROI분석
  → 24-분석리포트 (PDF 다운로드)
  → 20-당첨자명단관리
  → 25-AI개선안제안
  → 26-다음이벤트아이디어
  → [순환] 03-이벤트목적선택 (새 이벤트)

2.4 고객 참여 플로우 (별도 고객용 페이지)

이벤트 발견 (SNS/QR/TV/Blog)
  → 18-이벤트참여신청
  → 정보 입력 (이름, 전화번호)
  → 중복 체크
  → 19-참여완료 (응모번호 발급)
  → 당첨 발표일 대기
  → SMS/알림톡 수신

3. 화면별 상세 설계

3.1 공통 화면

00-메인대시보드 (홈)

개요

목적: 이벤트 현황 한눈에 파악, 빠른 액션
관련 유저스토리: 전체 서비스 진입점
비즈니스 중요도: ⭐⭐⭐⭐⭐ (최상)

주요 기능

새 이벤트 빠른 생성
진행중 이벤트 현황 확인
주요 지표 요약 (참여자 수, ROI)
알림 및 액션 아이템

UI 구성요소

┌─────────────────────────────┐
│ 🏪 [매장명]        🔔 ⚙️    │ ← 헤더
├─────────────────────────────┤
│                             │
│  ┌─────────────────────┐   │
│  │  ➕ 새 이벤트 만들기 │   │ ← 대형 CTA
│  └─────────────────────┘   │
│                             │
│  🎪 진행중 이벤트 (2)       │
│  ┌─────────────────────┐   │
│  │ 🎁 가을맞이 특별할인  │   │
│  │ 참여 152명 · D-7    │   │
│  │ [상세보기 →]        │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ 🍕 신메뉴 이벤트     │   │
│  │ 참여 89명 · D-14    │   │
│  │ [상세보기 →]        │   │
│  └─────────────────────┘   │
│                             │
│  📊 이번 달 성과             │
│  참여자 +32% │ ROI 245%    │
│                             │
├─────────────────────────────┤
│ 🏠 홈 │ 🎪 이벤트 │ 📊 분석 │ 👤 │ ← 하단 네비게이션
└─────────────────────────────┘

인터랙션

새 이벤트 만들기 버튼 → 03-이벤트목적선택 화면
진행중 이벤트 카드 터치 → 21-실시간대시보드 (해당 이벤트)
알림 아이콘 → 알림 목록 모달
설정 아이콘 → 99-마이페이지
하단 네비게이션 탭 → 해당 화면 전환

3.2 User 서비스

01-회원가입

개요

목적: 소상공인 신규 회원 가입
관련 유저스토리: UFR-USER-010
비즈니스 중요도: ⭐⭐⭐⭐

주요 기능

기본 정보 입력
KT 본인 인증
중복 가입 방지

UI 구성요소

┌─────────────────────────────┐
│ ← 회원가입                   │
├─────────────────────────────┤
│                             │
│  환영합니다! 👋              │
│  사장님의 이벤트 성공을       │
│  함께 만들어갑니다           │
│                             │
│  ┌─────────────────────┐   │
│  │ 이름 *              │   │
│  │ [_______________]   │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ 전화번호 *           │   │
│  │ [010-____-____]     │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ 이메일 *            │   │
│  │ [________@_____]    │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │  📱 KT 본인 인증      │   │
│  └─────────────────────┘   │
│                             │
├─────────────────────────────┤
│  [    다음 단계로    ]       │
└─────────────────────────────┘

인터랙션

입력 필드 실시간 검증 (형식 확인)
- 이름: 2자 이상
- 전화번호: 010-XXXX-XXXX
- 이메일: example@domain.com
KT 본인 인증 버튼 → KT 인증 시스템 연동
인증 완료 시 인증 토큰 저장
다음 단계로 → 02-매장정보등록
중복 가입 시 "이미 가입된 전화번호입니다" 알림

02-매장정보등록

개요

목적: 맞춤형 이벤트를 위한 매장 정보 수집
관련 유저스토리: UFR-USER-020
비즈니스 중요도: ⭐⭐⭐⭐

주요 기능

매장 기본 정보 입력
사업자번호 검증
무료 체험 쿠폰 자동 발급

UI 구성요소

┌─────────────────────────────┐
│ ← 매장정보 등록              │
├─────────────────────────────┤
│  매장명 *                    │
│  [___________________]      │
│                             │
│  업종 * ℹ️                   │
│  [드롭다운 ▼]               │
│  음식점 / 카페 / 소매업...   │
│                             │
│  주소 * 🔍                   │
│  [___________________]      │
│  [도로명 주소 검색]          │
│                             │
│  영업시간                     │
│  월 [09:00] ~ [21:00] ✓    │
│  화 [09:00] ~ [21:00] ✓    │
│  수 [09:00] ~ [21:00] ✓    │
│  ...                        │
│                             │
│  사업자번호 * ℹ️              │
│  [___-__-_____]            │
│  [검증하기]                  │
│                             │
│  ✅ 사업자번호 확인 완료       │
│  매장명: OO치킨              │
│  대표자: 홍길동              │
│                             │
├─────────────────────────────┤
│  [    등록 완료    ]         │
└─────────────────────────────┘

인터랙션

업종 드롭다운 → 카테고리 리스트 표시
주소 검색 버튼 → 도로명 주소 API 모달
영업시간 체크박스 → 요일별 활성화/비활성화
검증하기 버튼 → 국세청 API 연동
- 형식 검증 (XXX-XX-XXXXX)
- 사업자번호 유효성 확인
- 휴폐업 여부 확인
- 매장명 일치 확인
검증 성공 → ✅ 표시 및 사업자 정보 자동 입력
검증 실패 → ❌ 오류 메시지 (유효하지 않은 번호 / 휴폐업 등)
등록 완료 → 무료 체험 쿠폰 발급 알림 → 00-메인대시보드

3.3 Event Planning 서비스

03-이벤트목적선택

개요

목적: 이벤트 방향성 설정
관련 유저스토리: UFR-PLAN-010
비즈니스 중요도: ⭐⭐⭐⭐⭐

주요 기능

4가지 목적 중 선택
목적별 설명 및 효과 제시

UI 구성요소

┌─────────────────────────────┐
│ ← 이벤트 목적 선택           │
├─────────────────────────────┤
│                             │
│  어떤 목적의 이벤트를         │
│  만드실 건가요? 🎯           │
│                             │
│  ┌─────────────────────┐   │
│  │ 👥 신규고객 유치 ℹ️  │   │
│  │ 새로운 고객을 확보하고│   │
│  │ 매장 인지도를 높입니다│   │
│  │ 예상 효과: 신규 방문  │   │
│  │ +25% ↑              │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ 🔄 재방문 유도 ℹ️     │   │
│  │ 기존 고객의 재방문을  │   │
│  │ 촉진합니다           │   │
│  │ 예상 효과: 재방문율  │   │
│  │ +40% ↑              │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ 💰 매출 증대 ℹ️       │   │
│  │ 단기 매출 향상에     │   │
│  │ 집중합니다           │   │
│  │ 예상 효과: 매출      │   │
│  │ +35% ↑              │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ 📢 인지도 향상 ℹ️     │   │
│  │ 브랜드 인지도를      │   │
│  │ 제고합니다           │   │
│  │ 예상 효과: SNS 공유  │   │
│  │ +50% ↑              │   │
│  └─────────────────────┘   │
│                             │
├─────────────────────────────┤
│  [       다음       ]       │
└─────────────────────────────┘

인터랙션

카드 터치 → 라디오 버튼 선택 + 카드 강조 (테두리 색상)
ℹ️ 아이콘 터치 → 상세 설명 모달
- 예시 이벤트
- 성공 사례
- 권장 경품 유형
선택 전: 다음 버튼 비활성화 (회색)
선택 후: 다음 버튼 활성화 (파란색)
다음 버튼 → AI 트렌드 분석 시작 (로딩 3초) → 04-AI트렌드분석결과

04-AI트렌드분석결과

개요

목적: 업종/지역 트렌드 기반 성공 전략 제시
관련 유저스토리: UFR-PLAN-020
비즈니스 중요도: ⭐⭐⭐⭐

주요 기능

AI 트렌드 분석 결과 표시
추천 이벤트 방향 제시
예상 성공률 표시

UI 구성요소

┌─────────────────────────────┐
│ ← AI 트렌드 분석             │
├─────────────────────────────┤
│                             │
│  🤖 AI가 분석한 결과예요     │
│                             │
│  📍 우리 매장 정보            │
│  업종: 음식점 (치킨)         │
│  지역: 수원시 영통구         │
│  시즌: 가을 (10월)          │
│                             │
│  📊 주요 트렌드 (Top 3)      │
│  ┌─────────────────────┐   │
│  │ 1️⃣ 할로윈 테마       │   │
│  │ 10월 성공률 85% ⬆️   │   │
│  │ 유사 업종 성공 사례   │   │
│  │ 12건                │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ 2️⃣ 단체 할인         │   │
│  │ 영통구 인기 78% ⬆️   │   │
│  │ 평균 참여율 +42%    │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ 3️⃣ SNS 친구 초대     │   │
│  │ 바이럴 효과 72% ⬆️   │   │
│  │ 공유율 평균 2.3배   │   │
│  └─────────────────────┘   │
│                             │
│  💡 추천 전략                │
│  할로윈 테마 + 단체 할인 조합│
│  예상 성공률: 89% 🎯        │
│                             │
├─────────────────────────────┤
│  [   경품 추천 받기   ]      │
└─────────────────────────────┘

인터랙션

트렌드 카드 터치 → 상세 설명 확장
- 성공 사례 리스트
- 참여율 그래프
경품 추천 받기 → AI 경품 추천 시작 (로딩 3초) → 05-AI경품추천

05-AI경품추천

개요

목적: 예산 대비 최적 경품 선정
관련 유저스토리: UFR-PLAN-030
비즈니스 중요도: ⭐⭐⭐⭐⭐

주요 기능

예산 설정
AI 추천 경품 Top 5 제시
예상 참여율 표시

UI 구성요소

┌─────────────────────────────┐
│ ← AI 경품 추천               │
├─────────────────────────────┤
│                             │
│  💰 예산 설정                │
│  ┌─────────────────────┐   │
│  │ 500,000원           │   │
│  │ ●────────────○      │   │ ← 슬라이더
│  │ 10,000원 ~ 5,000,000원│  │
│  └─────────────────────┘   │
│                             │
│  🎁 추천 경품 Top 5          │
│                             │
│  ┌─────────────────────┐   │
│  │ ○ 1. 치킨세트 무료   │   │
│  │    └ 💰 50만원       │   │
│  │    └ 📊 예상 참여율   │   │
│  │       ████████░░ 85% │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ ○ 2. KT 멤버십 포인트│   │
│  │    └ 💰 40만원       │   │
│  │    └ 📊 예상 참여율   │   │
│  │       ███████░░░ 72% │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ ○ 3. 커피 쿠폰 10매  │   │
│  │    └ 💰 30만원       │   │
│  │    └ 📊 예상 참여율   │   │
│  │       ██████░░░░ 68% │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ ○ 4. 영화 예매권     │   │
│  │    └ 💰 25만원       │   │
│  │    └ 📊 예상 참여율   │   │
│  │       █████░░░░░ 65% │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ ○ 5. 편의점 상품권   │   │
│  │    └ 💰 20만원       │   │
│  │    └ 📊 예상 참여율   │   │
│  │       ████░░░░░░ 60% │   │
│  └─────────────────────┘   │
│                             │
├─────────────────────────────┤
│  [    선택 완료    ]         │
└─────────────────────────────┘

인터랙션

예산 슬라이더 조정 → 실시간 경품 목록 업데이트 (1초 디바운스)
경품 카드 터치 → 라디오 버튼 선택 + 상세 정보 확장
- 경품 이미지
- 타겟 고객층 매력도
- 유사 이벤트 성공 사례
선택 완료 → AI 참여방법 설계 시작 (로딩 2초) → 06-AI참여방법설계

06-AI참여방법설계

개요

목적: 참여 난이도와 바이럴 효과를 고려한 참여 방법 선택
관련 유저스토리: UFR-PLAN-040
비즈니스 중요도: ⭐⭐⭐⭐

주요 기능

3가지 참여 방법 옵션 제시
난이도 및 예상 참여율 표시

UI 구성요소

┌─────────────────────────────┐
│ ← 참여 방법 설계             │
├─────────────────────────────┤
│                             │
│  🎯 참여 방법을 선택하세요    │
│                             │
│  ┌─────────────────────┐   │
│  │ ○ 옵션 1: 간편 참여  │   │
│  │                     │   │
│  │ QR 코드 스캔 →      │   │
│  │ 정보 입력 → 완료    │   │
│  │                     │   │
│  │ 난이도: ⭐ 쉬움      │   │
│  │ 예상 참여율: 75%    │   │
│  │ 바이럴 효과: 낮음   │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ ○ 옵션 2: 재방문 유도│   │
│  │                     │   │
│  │ 매장 방문 →         │   │
│  │ 리뷰 작성 → 응모    │   │
│  │                     │   │
│  │ 난이도: ⭐⭐ 보통    │   │
│  │ 예상 참여율: 58%    │   │
│  │ 바이럴 효과: 중간   │   │
│  │ 🎁 재방문 가산점    │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ ○ 옵션 3: 바이럴형   │   │
│  │                     │   │
│  │ SNS 공유 →          │   │
│  │ 친구 3명 태그 → 응모│   │
│  │                     │   │
│  │ 난이도: ⭐⭐⭐ 어려움│   │
│  │ 예상 참여율: 42%    │   │
│  │ 바이럴 효과: 높음   │   │
│  │ 🔥 확산력 3.2배     │   │
│  └─────────────────────┘   │
│                             │
├─────────────────────────────┤
│  [    선택 완료    ]         │
└─────────────────────────────┘

인터랙션

옵션 카드 터치 → 라디오 버튼 선택 + 상세 시나리오 확장
각 옵션별 예상 시나리오 애니메이션
선택 완료 → AI 홍보문구 생성 시작 (로딩 2초) → 07-AI홍보문구생성

07-AI홍보문구생성

개요

목적: 매력적인 홍보 문구 및 해시태그 생성
관련 유저스토리: UFR-PLAN-050
비즈니스 중요도: ⭐⭐⭐⭐

주요 기능

AI 생성 홍보 문구 5가지 버전
SNS 해시태그 자동 생성
플랫폼별 최적화 미리보기

UI 구성요소

┌─────────────────────────────┐
│ ← AI 홍보 문구 생성          │
├─────────────────────────────┤
│                             │
│  ✨ AI가 만든 홍보 문구       │
│                             │
│  ┌─────────────────────┐   │
│  │ ○ 버전 1 (친근함)    │   │
│  │                     │   │
│  │ "🎃 할로윈 특별 이벤트!│   │
│  │ 치킨 먹고 경품 받자~ │   │
│  │ 지금 바로 참여하세요!"│  │
│  │                     │   │
│  │ [미리보기]          │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ ○ 버전 2 (공식적)    │   │
│  │                     │   │
│  │ "왕갈비통닭의 가을   │   │
│  │ 고객 감사 이벤트.    │   │
│  │ 총 500만원 상당의    │   │
│  │ 경품을 드립니다."    │   │
│  │                     │   │
│  │ [미리보기]          │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ ○ 버전 3 (트렌디)    │   │
│  │                     │   │
│  │ "요즘 핫한 우리 매장💯│  │
│  │ 이벤트로 더 핫하게!  │   │
│  │ 놓치면 후회할걸?🔥"  │   │
│  │                     │   │
│  │ [미리보기]          │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ ○ 버전 4 (감성적)    │   │
│  │ ...                 │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ ○ 버전 5 (유머러스)  │   │
│  │ ...                 │   │
│  └─────────────────────┘   │
│                             │
│  📱 추천 해시태그            │
│  #왕갈비통닭 #수원맛집       │
│  #할로윈이벤트 #치킨이벤트   │
│  #영통구맛집               │
│                             │
├─────────────────────────────┤
│  [문구 직접 편집] [선택 완료]│
└─────────────────────────────┘

인터랙션

버전 카드 터치 → 라디오 버튼 선택
미리보기 버튼 → 플랫폼별 미리보기 모달
- Instagram 피드 모의 화면
- Naver Blog 게시글 형식
- Kakao Channel 메시지 형식
문구 직접 편집 → 텍스트 에디터 모달
선택 완료 → 08-이벤트기획안승인

08-이벤트기획안승인

개요

목적: 완성된 기획안 최종 검토 및 승인
관련 유저스토리: UFR-PLAN-060
비즈니스 중요도: ⭐⭐⭐⭐⭐

주요 기능

전체 기획 내용 요약 표시
수정 및 승인 기능
예상 효과 제시

UI 구성요소

┌─────────────────────────────┐
│ ← 기획안 최종 검토           │
├─────────────────────────────┤
│                             │
│  ✅ 이벤트 기획이 완료되었어요│
│                             │
│  📋 기획안 요약              │
│  ┌─────────────────────┐   │
│  │ 🎯 목적: 신규고객 유치│   │
│  │ [수정]              │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ 🎁 경품: 치킨세트 무료│   │
│  │ 예산: 500,000원     │   │
│  │ [수정]              │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ 🎯 참여방법: QR 스캔 │   │
│  │ 난이도: 쉬움        │   │
│  │ [수정]              │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ ✨ 홍보문구          │   │
│  │ "🎃 할로윈 특별..."  │   │
│  │ [수정]              │   │
│  └─────────────────────┘   │
│                             │
│  📊 예상 효과                │
│  ┌─────────────────────┐   │
│  │ 예상 참여자: 500명   │   │
│  │ 예상 ROI: 245%      │   │
│  │ 매출 증가: +35%     │   │
│  └─────────────────────┘   │
│                             │
│  ⏱️ 기획 소요 시간: 9초      │
│                             │
├─────────────────────────────┤
│  [이전 단계] [기획안 승인]   │
└─────────────────────────────┘

인터랙션

각 섹션 수정 버튼 → 해당 단계로 이동
이전 단계 → 07-AI홍보문구생성
기획안 승인 → 기획안 DB 저장 + 이벤트 ID 생성 → 09-AI이미지생성

3.4 Content Generation 서비스

09-AI이미지생성

개요

목적: 브랜드 컬러/로고 기반 홍보 이미지 생성
관련 유저스토리: UFR-CONT-010
비즈니스 중요도: ⭐⭐⭐⭐⭐

주요 기능

브랜드 컬러 설정
로고 업로드
AI 이미지 3종 생성

UI 구성요소

┌─────────────────────────────┐
│ ← AI 이미지 생성             │
├─────────────────────────────┤
│                             │
│  🎨 브랜드 설정              │
│  ┌─────────────────────┐   │
│  │ 브랜드 컬러          │   │
│  │ [🔴] #FF5733        │   │ ← 컬러 피커
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ 로고 업로드          │   │
│  │ [📁 파일 선택]      │   │
│  │ PNG, JPG (최대 5MB) │   │
│  └─────────────────────┘   │
│                             │
│  🤖 AI 이미지 생성 중...     │
│  [████████████░░░] 85%      │
│  예상 소요 시간: 15초 남음   │
│                             │
│  ✅ 생성 완료!               │
│                             │
│  📸 생성된 이미지 (3종)      │
│  ┌─────────────────────┐   │
│  │ ○ 1. 심플 스타일     │   │
│  │ [        이미지      ]│  │
│  │ 미니멀 디자인        │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ ○ 2. 화려한 스타일   │   │
│  │ [        이미지      ]│  │
│  │ 풍성한 그래픽        │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ ○ 3. 트렌디 스타일   │   │
│  │ [        이미지      ]│  │
│  │ 최신 디자인 트렌드   │   │
│  └─────────────────────┘   │
│                             │
├─────────────────────────────┤
│  [재생성] [선택 완료]        │
└─────────────────────────────┘

인터랙션

컬러 피커 → HEX 코드 입력 또는 팔레트 선택
파일 선택 → 로컬 파일 업로드 (5MB 제한)
생성 중 프로그레스 바 표시 (90초)
이미지 카드 터치 → 전체 화면 미리보기
재생성 → 다시 AI 생성 (동일 설정)
선택 완료 → 선택한 이미지 저장 → 10-AI영상제작 (병렬 처리)

10-AI영상제작

개요

목적: 15초 홍보 영상 자동 제작
관련 유저스토리: UFR-CONT-020
비즈니스 중요도: ⭐⭐⭐⭐⭐

주요 기능

배경 음악 선택
텍스트 오버레이 편집
15초 영상 생성

UI 구성요소

┌─────────────────────────────┐
│ ← AI 영상 제작               │
├─────────────────────────────┤
│                             │
│  🎬 영상 설정                │
│  ┌─────────────────────┐   │
│  │ 배경 음악 선택 🎵    │   │
│  │ [드롭다운 ▼]        │   │
│  │ • 경쾌한 팝          │   │
│  │ • 차분한 재즈        │   │
│  │ • 신나는 일렉        │   │
│  │ [미리듣기 ▶️]        │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ 텍스트 오버레이      │   │
│  │ [________________]  │   │
│  │ "🎃 할로윈 특별..."  │   │ ← 기획안 연동
│  │ [편집]              │   │
│  └─────────────────────┘   │
│                             │
│  🤖 AI 영상 제작 중...       │
│  [██████████░░░░] 70%       │
│  예상 소요 시간: 27초 남음   │
│                             │
│  ✅ 제작 완료!               │
│                             │
│  🎥 영상 미리보기            │
│  ┌─────────────────────┐   │
│  │                     │   │
│  │    [ ▶️ 재생 ]      │   │
│  │                     │   │
│  │  00:00 ━━●━━ 00:15  │   │
│  └─────────────────────┘   │
│                             │
│  💾 다운로드 가능            │
│  • 영상 파일 (MP4)          │
│  • 자막 파일 (SRT)          │
│                             │
├─────────────────────────────┤
│  [재제작] [다음 단계]        │
└─────────────────────────────┘

인터랙션

배경 음악 드롭다운 → 목록 선택
미리듣기 → 음악 재생 (5초 미리듣기)
텍스트 오버레이 편집 → 텍스트 에디터 모달
생성 중 프로그레스 바 (90초, 이미지 생성과 병렬)
영상 재생 컨트롤 (재생/일시정지, 시크바)
재제작 → 설정 변경 후 다시 생성
다음 단계 → 11-SNS콘텐츠생성

11-SNS콘텐츠생성

개요

목적: 플랫폼별 최적화 콘텐츠 생성
관련 유저스토리: UFR-CONT-030
비즈니스 중요도: ⭐⭐⭐⭐

주요 기능

플랫폼 선택
자동 해상도 조정
게시 텍스트 생성

UI 구성요소

┌─────────────────────────────┐
│ ← SNS 콘텐츠 생성            │
├─────────────────────────────┤
│                             │
│  📱 플랫폼 선택              │
│  ┌─────────────────────┐   │
│  │ ✅ Instagram (필수)  │   │
│  │ 1080x1080 정사각형   │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ ☐ Naver Blog        │   │
│  │ 800x600 가로형      │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ ☐ Kakao Channel     │   │
│  │ 800x800 정사각형    │   │
│  └─────────────────────┘   │
│                             │
│  🎨 생성 완료! (2종)         │
│                             │
│  📸 Instagram                │
│  ┌─────────────────────┐   │
│  │   [   이미지   ]    │   │
│  │ 1080x1080px         │   │
│  └─────────────────────┘   │
│  📝 게시 텍스트              │
│  "🎃 할로윈 특별 이벤트!     │
│  #왕갈비통닭 #수원맛집..."   │
│  [미리보기]                 │
│                             │
│  📸 Naver Blog               │
│  ┌─────────────────────┐   │
│  │   [   이미지   ]    │   │
│  │ 800x600px           │   │
│  └─────────────────────┘   │
│  📝 게시 텍스트              │
│  "수원 왕갈비통닭의..."      │
│  [미리보기]                 │
│                             │
├─────────────────────────────┤
│  [💾 전체 다운로드] [다음]   │
└─────────────────────────────┘

인터랙션

플랫폼 체크박스 → 선택/해제
Instagram은 필수 선택 (비활성화)
플랫폼 선택 변경 → 자동 재생성 (20초)
미리보기 → 플랫폼별 게시 화면 모의
전체 다운로드 → ZIP 파일 다운로드
다음 → 12-QR포스터생성

12-QR포스터생성

개요

목적: 오프라인 홍보용 QR 포스터 생성
관련 유저스토리: UFR-CONT-040
비즈니스 중요도: ⭐⭐⭐

주요 기능

QR 코드 생성
포스터 크기 선택
인쇄 최적화

UI 구성요소

┌─────────────────────────────┐
│ ← QR 포스터 생성             │
├─────────────────────────────┤
│                             │
│  📋 포스터 설정              │
│  ┌─────────────────────┐   │
│  │ 크기 선택            │   │
│  │ ○ A4 (210x297mm)    │   │
│  │ ○ A3 (297x420mm)    │   │
│  └─────────────────────┘   │
│                             │
│  🔗 QR 연결 URL              │
│  https://event.kt.com/...   │ ← 자동 생성
│                             │
│  ✅ 생성 완료!               │
│                             │
│  🖼️ 포스터 미리보기          │
│  ┌─────────────────────┐   │
│  │                     │   │
│  │   [배경 이미지]     │   │
│  │                     │   │
│  │  🎃 할로윈 특별 이벤트│  │
│  │                     │   │
│  │    [QR 코드]        │   │
│  │ 스캔하고 참여하세요! │   │
│  │                     │   │
│  │  기간: 10/20~10/31  │   │
│  │  경품: 치킨세트 무료 │   │
│  │                     │   │
│  └─────────────────────┘   │
│                             │
│  💾 다운로드 가능            │
│  • A4 포스터 PDF            │
│  • QR 코드 단독 PNG         │
│                             │
├─────────────────────────────┤
│  [다운로드] [다음 단계]      │
└─────────────────────────────┘

인터랙션

크기 라디오 버튼 → 선택 변경 시 재생성
QR URL 자동 생성 (이벤트 참여 페이지)
포스터 미리보기 → 확대/축소 가능
다운로드 → PDF 파일 다운로드
다음 단계 → 13-콘텐츠편집 또는 14-콘텐츠최종승인

13-콘텐츠편집

개요

목적: 생성된 콘텐츠 개인화 수정
관련 유저스토리: UFR-CONT-050
비즈니스 중요도: ⭐⭐⭐

주요 기능

텍스트 편집
색상 조정
레이아웃 변경

UI 구성요소

┌─────────────────────────────┐
│ ← 콘텐츠 편집                │
├─────────────────────────────┤
│                             │
│  ✏️ 편집할 콘텐츠 선택        │
│  ┌─────────────────────┐   │
│  │ 📸 이미지 편집       │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ 🎥 영상 편집         │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ 📱 SNS 텍스트 편집   │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ 🖼️ 포스터 편집       │   │
│  └─────────────────────┘   │
│                             │
│  [예: 이미지 편집 모드]      │
│  ┌─────────────────────┐   │
│  │    [  이미지  ]     │   │
│  └─────────────────────┘   │
│                             │
│  🎨 편집 도구                │
│  ┌─────────────────────┐   │
│  │ T 텍스트            │   │
│  │ [할로윈 특별 이벤트] │   │
│  │ 폰트 [맑은 고딕 ▼]  │   │
│  │ 크기 [24px ▼]       │   │
│  │ 색상 [🔴 #FF5733]   │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ 🎨 배경 색상         │   │
│  │ [🟠 #FFA500]        │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ 📐 레이아웃          │   │
│  │ [템플릿 1] [템플릿 2]│  │
│  └─────────────────────┘   │
│                             │
│  📜 편집 이력 (최대 3개)     │
│  [원본으로 되돌리기]         │
│                             │
├─────────────────────────────┤
│  [취소] [저장]              │
└─────────────────────────────┘

인터랙션

콘텐츠 카드 선택 → 해당 편집 모드 진입
텍스트 편집 → 실시간 미리보기 반영
색상 변경 → 컬러 피커
레이아웃 템플릿 → 여러 레이아웃 옵션
원본으로 되돌리기 → 편집 전 상태로 복원
취소 → 편집 내용 버리고 이전 화면
저장 → 수정사항 적용 → 14-콘텐츠최종승인

14-콘텐츠최종승인

개요

목적: 완성된 콘텐츠 최종 검토
관련 유저스토리: UFR-CONT-060
비즈니스 중요도: ⭐⭐⭐⭐⭐

주요 기능

전체 콘텐츠 미리보기
콘텐츠 승인 및 저장

UI 구성요소

┌─────────────────────────────┐
│ ← 콘텐츠 최종 승인           │
├─────────────────────────────┤
│                             │
│  ✅ 모든 콘텐츠가 준비되었어요│
│                             │
│  📦 생성된 콘텐츠 (6종)      │
│                             │
│  ┌─────────────────────┐   │
│  │ 📸 이미지 (심플)     │   │
│  │ [썸네일]   [미리보기]│   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ 🎥 15초 영상         │   │
│  │ [썸네일]   [재생 ▶️] │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ 📱 Instagram 콘텐츠  │   │
│  │ [썸네일]   [미리보기]│   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ 📱 Naver Blog 콘텐츠 │   │
│  │ [썸네일]   [미리보기]│   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ 🖼️ A4 QR 포스터      │   │
│  │ [썸네일]   [미리보기]│   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ 🖼️ A3 QR 포스터      │   │
│  │ [썸네일]   [미리보기]│   │
│  └─────────────────────┘   │
│                             │
│  ⏱️ 콘텐츠 생성 시간: 2분 45초│
│                             │
├─────────────────────────────┤
│  [수정하기] [콘텐츠 승인]    │
└─────────────────────────────┘

인터랙션

미리보기 / 재생 → 전체 화면 모드
수정하기 → 13-콘텐츠편집
콘텐츠 승인 → 콘텐츠 DB 저장 + 콘텐츠 ID 생성 → 15-다중채널배포설정

3.5 Distribution 서비스

15-다중채널배포설정

개요

목적: 여러 채널 동시 배포 설정
관련 유저스토리: UFR-DIST-010
비즈니스 중요도: ⭐⭐⭐⭐⭐

주요 기능

배포 채널 선택
채널별 세부 설정
배포 일정 설정

UI 구성요소

┌─────────────────────────────┐
│ ← 배포 채널 설정             │
├─────────────────────────────┤
│                             │
│  📡 배포 채널 선택            │
│                             │
│  KT 서비스                   │
│  ┌─────────────────────┐   │
│  │ ☐ 우리동네TV ⚙️      │   │
│  │ 지역 타겟 광고       │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ ☐ 링고비즈 연결음 ⚙️  │   │
│  │ 전화 연결음 업데이트 │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ ☐ 지니TV 광고 ⚙️     │   │
│  │ 가정용 TV 광고       │   │
│  └─────────────────────┘   │
│                             │
│  SNS 플랫폼                  │
│  ┌─────────────────────┐   │
│  │ ✅ Instagram (필수)  │   │
│  │ 계정 연동 완료 ✓    │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ ☐ Naver Blog ⚙️      │   │
│  │ [계정 연동 필요]     │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ ☐ Kakao Channel ⚙️   │   │
│  │ [계정 연동 필요]     │   │
│  └─────────────────────┘   │
│                             │
│  🕐 배포 일시                │
│  ○ 즉시 배포                │
│  ○ 예약 배포                │
│     [2025-10-20] [14:00]   │
│                             │
│  📊 선택된 채널: 1개         │
│                             │
├─────────────────────────────┤
│  [    배포 시작    ]         │
└─────────────────────────────┘

인터랙션

채널 체크박스 → 선택/해제, 선택 수 업데이트
⚙️ 설정 아이콘 → 채널별 상세 설정 모달
- 우리동네TV: 반경 (500m/1km), 송출 시간대
- 링고비즈: 연결음 미리듣기
- 지니TV: 타겟 지역, 노출 시간대, 예산
- SNS: 계정 OAuth 연동, 예약 시간
Instagram 필수 체크 (비활성화)
예약 배포 선택 → 날짜/시간 선택기
배포 시작 → 배포 요청 발송 → 16-배포진행상태

16-배포진행상태

개요

목적: 채널별 배포 진행 상황 모니터링
관련 유저스토리: UFR-DIST-020~050
비즈니스 중요도: ⭐⭐⭐⭐

주요 기능

실시간 배포 상태 표시
배포 완료/실패 확인
재시도 기능

UI 구성요소

┌─────────────────────────────┐
│ ← 배포 진행 상황             │
├─────────────────────────────┤
│                             │
│  📡 배포 진행중... (2/4)     │
│  [████████░░░░░░] 50%       │
│                             │
│  ✅ 배포 완료                │
│  ┌─────────────────────┐   │
│  │ Instagram            │   │
│  │ ✓ 포스팅 완료        │   │
│  │ 🔗 게시물 보기       │   │
│  │ 완료 시각: 14:02    │   │
│  └─────────────────────┘   │
│                             │
│  🔄 배포 중                  │
│  ┌─────────────────────┐   │
│  │ 우리동네TV           │   │
│  │ ⏳ 영상 업로드 중...  │   │
│  │ [██████░░░░] 60%    │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ 지니TV               │   │
│  │ ⏳ 광고 예약 중...    │   │
│  │ [████░░░░░░] 40%    │   │
│  └─────────────────────┘   │
│                             │
│  ⏸️ 대기중                   │
│  ┌─────────────────────┐   │
│  │ Naver Blog           │   │
│  │ ⏸️ 순서 대기         │   │
│  └─────────────────────┘   │
│                             │
│  ❌ 배포 실패 (재시도 가능)  │
│  ┌─────────────────────┐   │
│  │ 링고비즈             │   │
│  │ ❌ API 연결 오류     │   │
│  │ [재시도 1/3]        │   │
│  └─────────────────────┘   │
│                             │
├─────────────────────────────┤
│  [배포 취소] [완료 대기]     │
└─────────────────────────────┘

인터랙션

실시간 진행 상태 업데이트 (폴링 5초)
게시물 보기 링크 → 해당 플랫폼 게시물 새 탭
재시도 버튼 → 실패한 채널 재배포 (최대 3회)
모든 배포 완료 → 자동으로 17-오프라인자료다운로드
배포 취소 → 진행중인 배포 중단 확인 다이얼로그

17-오프라인자료다운로드

개요

목적: 오프라인 홍보 자료 다운로드
관련 유저스토리: UFR-DIST-060
비즈니스 중요도: ⭐⭐⭐

주요 기능

QR 포스터 다운로드
인쇄용 파일 제공
다운로드 이력 관리

UI 구성요소

┌─────────────────────────────┐
│ ← 오프라인 자료 다운로드     │
├─────────────────────────────┤
│                             │
│  ✅ 배포가 완료되었습니다!    │
│                             │
│  💾 다운로드 가능 파일        │
│                             │
│  📋 포스터                   │
│  ┌─────────────────────┐   │
│  │ A4 QR 포스터 (PDF)   │   │
│  │ 210x297mm, 300dpi   │   │
│  │ [📥 다운로드]        │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ A3 QR 포스터 (PDF)   │   │
│  │ 297x420mm, 300dpi   │   │
│  │ [📥 다운로드]        │   │
│  └─────────────────────┘   │
│                             │
│  🖼️ 이미지                   │
│  ┌─────────────────────┐   │
│  │ QR 코드 (PNG)        │   │
│  │ 단독 이미지, 1080px  │   │
│  │ [📥 다운로드]        │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ 홍보 이미지 (PNG)    │   │
│  │ 고해상도, 1080x1080 │   │
│  │ [📥 다운로드]        │   │
│  └─────────────────────┘   │
│                             │
│  📦 전체 파일                │
│  ┌─────────────────────┐   │
│  │ 모든 파일 (ZIP)      │   │
│  │ 4개 파일, 12.5MB    │   │
│  │ [📥 일괄 다운로드]   │   │
│  └─────────────────────┘   │
│                             │
├─────────────────────────────┤
│  [대시보드로 이동]           │
└─────────────────────────────┘

인터랙션

다운로드 버튼 → 해당 파일 다운로드
일괄 다운로드 → ZIP 파일 생성 후 다운로드
다운로드 이력 자동 기록
대시보드로 이동 → 21-실시간대시보드

3.6 Participation 서비스

18-이벤트참여신청 (고객용)

개요

목적: 고객의 간편한 이벤트 참여
관련 유저스토리: UFR-PART-010
비즈니스 중요도: ⭐⭐⭐⭐⭐

주요 기능

이벤트 정보 표시
참여 정보 입력
중복 참여 방지

UI 구성요소

┌─────────────────────────────┐
│                             │
│  [ 이벤트 배너 이미지 ]      │
│                             │
│  🎃 할로윈 특별 이벤트        │
│  왕갈비통닭                  │
│                             │
│  📅 기간: 2025.10.20 ~ 10.31│
│  🎁 경품: 치킨세트 무료 (10명)│
│                             │
│  🎯 참여 방법                │
│  1️⃣ 정보 입력               │
│  2️⃣ 참여 완료               │
│  3️⃣ 당첨자 발표 (11/1)      │
│                             │
│  ────────────────────       │
│                             │
│  👤 고객명 *                 │
│  [___________________]      │
│                             │
│  📱 전화번호 *               │
│  [010-____-____]            │
│                             │
│  📍 참여 경로 *              │
│  ○ Instagram                │
│  ○ Naver Blog               │
│  ○ QR 코드 스캔              │
│  ○ 우리동네TV                │
│  ○ 지니TV                   │
│  ○ 기타                     │
│                             │
│  ┌─────────────────────┐   │
│  │ ☐ 개인정보 수집 및   │   │
│  │    이용 동의 (필수)  │   │
│  │ [약관 보기]          │   │
│  └─────────────────────┘   │
│                             │
│  [    참여하기    ]          │
│                             │
└─────────────────────────────┘

인터랙션

입력 필드 실시간 검증
- 고객명: 2자 이상
- 전화번호: 010-XXXX-XXXX 형식
참여 경로 자동 추적 (URL 파라미터)
약관 보기 → 개인정보 처리방침 모달
동의 체크박스 필수
참여하기 버튼 → 중복 체크 → 19-참여완료 또는 중복 알림

19-참여완료

개요

목적: 응모번호 발급 및 안내
관련 유저스토리: UFR-PART-010
비즈니스 중요도: ⭐⭐⭐⭐

주요 기능

응모번호 발급
당첨 발표일 안내
참여 정보 확인

UI 구성요소

┌─────────────────────────────┐
│                             │
│  ✅ 참여가 완료되었습니다!    │
│                             │
│  🎟️ 응모번호                 │
│  ┌─────────────────────┐   │
│  │                     │   │
│  │   EV-20251020-1523  │   │
│  │                     │   │
│  └─────────────────────┘   │
│                             │
│  👤 홍길동님                 │
│  📱 010-1234-5678           │
│                             │
│  📅 당첨 발표일              │
│  2025년 11월 1일 (금)       │
│  오후 2시                   │
│                             │
│  📩 당첨 시 SMS로 알림을      │
│     보내드립니다             │
│                             │
│  🎁 경품                     │
│  치킨세트 무료 (10명)        │
│  수령 기한: 당첨 발표 후 7일 │
│  수령 장소: 왕갈비통닭 매장  │
│                             │
│  ────────────────────       │
│                             │
│  📱 SNS에 공유하고           │
│     친구들도 초대하세요!     │
│  [Instagram 공유]            │
│  [Kakao 공유]                │
│                             │
└─────────────────────────────┘

인터랙션

응모번호 자동 발급 및 표시
Instagram 공유 → 공유 시트 (이벤트 페이지 링크)
Kakao 공유 → 카카오톡 공유 API
화면 스크린샷 저장 가능

20-당첨자명단관리

개요

목적: 소상공인의 당첨자 관리 및 경품 지급 추적
관련 유저스토리: UFR-PART-050
비즈니스 중요도: ⭐⭐⭐⭐

주요 기능

당첨자 명단 조회
경품 지급 상태 관리
명단 다운로드

UI 구성요소

┌─────────────────────────────┐
│ ← 당첨자 명단 관리           │
├─────────────────────────────┤
│                             │
│  🏆 이벤트: 할로윈 특별 이벤트│
│  당첨자: 10명               │
│                             │
│  📥 [엑셀 다운로드]          │
│                             │
│  ┌─────────────────────┐   │
│  │ 1. 홍길동            │   │
│  │ 📱 010-1234-5678    │   │
│  │ 🎟️ EV-1523          │   │
│  │ ☐ 경품 지급 완료     │   │
│  │ 참여일: 10/20 14:32 │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ 2. 김철수            │   │
│  │ 📱 010-2345-6789    │   │
│  │ 🎟️ EV-1587          │   │
│  │ ✅ 경품 지급 완료    │   │
│  │ 지급일: 11/2 10:15  │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ 3. 이영희            │   │
│  │ 📱 010-3456-7890    │   │
│  │ 🎟️ EV-1612          │   │
│  │ ☐ 경품 지급 완료     │   │
│  │ 참여일: 10/21 11:08 │   │
│  └─────────────────────┘   │
│                             │
│  ... (7명 더)               │
│                             │
│  📊 지급 현황: 2/10 (20%)   │
│  [██░░░░░░░░]               │
│                             │
├─────────────────────────────┤
│  [참여자 전체 명단 다운로드] │
└─────────────────────────────┘

인터랙션

당첨자 카드 체크박스 → 경품 지급 상태 업데이트
- 체크 시 지급 일시 자동 기록
- 당첨자에게 확인 문자 발송 (옵션)
엑셀 다운로드 → 당첨자 명단 Excel 파일
참여자 전체 명단 다운로드 → 전체 참여자 Excel (분석용)
지급 현황 자동 업데이트

3.7 Analytics 서비스

21-실시간대시보드

개요

목적: 이벤트 성과 실시간 모니터링
관련 유저스토리: UFR-ANAL-010
비즈니스 중요도: ⭐⭐⭐⭐⭐

주요 기능

핵심 지표 실시간 표시
채널별 노출/참여 현황
자동/수동 새로고침

UI 구성요소

┌─────────────────────────────┐
│ ← 실시간 대시보드            │  🔄
├─────────────────────────────┤
│                             │
│  🎃 할로윈 특별 이벤트        │
│  진행중 · D-7               │
│  마지막 업데이트: 2분 전      │
│                             │
│  ────────────────────       │
│                             │
│  📊 핵심 지표                │
│  ┌─────────┬─────────┐     │
│  │ 👥 참여자 │ 📺 노출수│     │
│  │         │         │     │
│  │  1,523  │ 45,892  │     │
│  │ ↑ +152  │ ↑ +2.3K │     │
│  │ (+11%)  │ (+5%)   │     │
│  └─────────┴─────────┘     │
│  ┌─────────┬─────────┐     │
│  │ 🏪 방문↑ │ 💰 ROI  │     │
│  │         │         │     │
│  │  +32%   │  245%   │     │
│  │ vs 평균 │ 예상치  │     │
│  └─────────┴─────────┘     │
│                             │
│  📈 시간대별 참여 추이        │
│  ┌─────────────────────┐   │
│  │     ▁▃▅▇█▇▅▃▁       │   │
│  │ 09 12 15 18 21 시   │   │
│  └─────────────────────┘   │
│                             │
│  탭: [전체] 채널별 ROI      │
│                             │
│  🎯 참여 채널 분석            │
│  Instagram   45% ████▌     │
│  우리동네TV  28% ██▊       │
│  QR 코드     18% █▊        │
│  Naver Blog   9% ▉         │
│                             │
│  ────────────────────       │
│                             │
│  [📊 상세 분석 보기]         │
│                             │
├─────────────────────────────┤
│ 🏠 홈 │ 🎪 이벤트 │ 📊 분석 │ 👤 │
└─────────────────────────────┘

인터랙션

자동 새로고침 (5분 간격)
수동 새로고침 (우상단 🔄 아이콘 또는 당겨서 새로고침)
지표 카드 터치 → 해당 지표 상세 팝업
그래프 터치 → 시간대별 상세 데이터
탭 전환 → 22-채널별성과분석, 23-ROI분석
상세 분석 보기 → 전체 분석 대시보드 (데스크톱 최적화)

22-채널별성과분석

개요

목적: 채널별 효율성 비교
관련 유저스토리: UFR-ANAL-020
비즈니스 중요도: ⭐⭐⭐⭐

주요 기능

채널별 노출/참여/전환 비교
채널 효율성 순위

UI 구성요소

┌─────────────────────────────┐
│ ← 채널별 성과 분석           │
├─────────────────────────────┤
│                             │
│  탭: 전체 [채널별] ROI      │
│                             │
│  📊 채널 성과 비교            │
│                             │
│  🥇 가장 효과적인 채널        │
│  ┌─────────────────────┐   │
│  │ Instagram            │   │
│  │ 📊 노출 20,642회     │   │
│  │ 👥 참여 685명        │   │
│  │ 🏪 방문 214명        │   │
│  │ 💡 참여율: 3.3%      │   │
│  │ 💡 전환율: 31.2%     │   │
│  │ 💰 CPA: 2,190원     │   │
│  └─────────────────────┘   │
│                             │
│  🥈 2위                     │
│  ┌─────────────────────┐   │
│  │ 우리동네TV           │   │
│  │ 📊 노출 12,850회     │   │
│  │ 👥 참여 427명        │   │
│  │ 🏪 방문 165명        │   │
│  │ 💡 참여율: 3.3%      │   │
│  │ 💡 전환율: 38.6%     │   │
│  │ 💰 CPA: 2,800원     │   │
│  └─────────────────────┘   │
│                             │
│  🥉 3위: QR 코드             │
│  4위: Naver Blog            │
│  5위: 지니TV                │
│  6위: Kakao Channel         │
│                             │
│  📈 비교 그래프              │
│  [막대 그래프 시각화]        │
│                             │
├─────────────────────────────┤
│  [이전] [다음]              │
└─────────────────────────────┘

인터랙션

채널 카드 터치 → 상세 데이터 확장
- 시간대별 노출 추이
- 일별 참여율 변화
- 비용 상세 내역
그래프 인터랙션 (확대/축소)
순위 정렬 변경 (노출수/참여율/전환율/CPA)

23-ROI분석

개요

목적: 투자 대비 수익 분석
관련 유저스토리: UFR-ANAL-030
비즈니스 중요도: ⭐⭐⭐⭐⭐

주요 기능

비용/수익 계산
ROI 자동 계산
손익분기점 표시

UI 구성요소

┌─────────────────────────────┐
│ ← ROI 분석                   │
├─────────────────────────────┤
│                             │
│  탭: 전체 채널별 [ROI]      │
│                             │
│  💰 투자 대비 수익 분석       │
│                             │
│  📊 ROI                      │
│  ┌─────────────────────┐   │
│  │                     │   │
│  │      245%           │   │
│  │    ↑ +12%           │   │
│  │                     │   │
│  └─────────────────────┘   │
│                             │
│  💸 총 투자 비용              │
│  ┌─────────────────────┐   │
│  │ 경품 비용     500,000원│  │
│  │ 우리동네TV    300,000원│  │
│  │ 지니TV        400,000원│  │
│  │ Instagram       0원   │  │
│  │ 기타 채널      50,000원│  │
│  │ ─────────────────   │  │
│  │ 합계       1,250,000원│  │
│  └─────────────────────┘   │
│                             │
│  💵 총 수익                  │
│  ┌─────────────────────┐   │
│  │ 매출 증가  2,800,000원│  │
│  │ (이벤트 기간 vs 평균) │  │
│  │                     │   │
│  │ 신규 고객 LTV         │  │
│  │ 243명 × 4,500원     │  │
│  │ = 1,093,500원       │  │
│  │ ─────────────────   │  │
│  │ 합계       3,893,500원│  │
│  └─────────────────────┘   │
│                             │
│  📈 손익 분기                │
│  ✅ 달성 (D-3에 달성)        │
│  순이익: +2,643,500원       │
│                             │
│  📊 ROI 추이 그래프          │
│  [꺾은선 그래프]             │
│                             │
├─────────────────────────────┤
│  [PDF 리포트 생성]           │
└─────────────────────────────┘

인터랙션

비용/수익 카드 → 상세 내역 확장
그래프 → 일별 ROI 추이
PDF 리포트 생성 → 24-분석리포트

24-분석리포트

개요

목적: 종합 분석 리포트 생성 및 다운로드
관련 유저스토리: UFR-ANAL-040
비즈니스 중요도: ⭐⭐⭐

주요 기능

PDF 리포트 자동 생성
리포트 미리보기
이메일 발송

UI 구성요소

┌─────────────────────────────┐
│ ← 분석 리포트 생성           │
├─────────────────────────────┤
│                             │
│  📄 종합 분석 리포트          │
│                             │
│  🤖 리포트 생성 중...         │
│  [██████████░░░░] 70%       │
│                             │
│  ✅ 생성 완료!               │
│                             │
│  📋 리포트 내용              │
│  • 이벤트 개요              │
│  • 참여 통계                │
│  • 노출 통계                │
│  • 매출 분석                │
│  • ROI 분석                 │
│  • 채널별 성과 비교          │
│  • 업종 평균 대비 벤치마킹   │
│  • 시각화 차트 12종          │
│                             │
│  📄 미리보기                 │
│  ┌─────────────────────┐   │
│  │ [ PDF 썸네일 ]      │   │
│  │ 1/8 페이지          │   │
│  └─────────────────────┘   │
│  [◀️ 이전] [다음 ▶️]         │
│                             │
│  📥 다운로드 옵션            │
│  ┌─────────────────────┐   │
│  │ [📥 PDF 다운로드]    │   │
│  │ 할로윈이벤트_리포트.pdf│ │
│  │ 2.8MB, 8페이지      │   │
│  └─────────────────────┘   │
│  ┌─────────────────────┐   │
│  │ [📧 이메일 발송]     │   │
│  │ 등록된 이메일로 전송 │   │
│  └─────────────────────┘   │
│                             │
├─────────────────────────────┤
│  [대시보드로]                │
└─────────────────────────────┘

인터랙션

리포트 생성 프로그레스 표시
미리보기 페이지 네비게이션
PDF 다운로드 → PDF 파일 다운로드
이메일 발송 → 등록 이메일로 리포트 전송
대시보드로 → 21-실시간대시보드

3.8 AI Learning 서비스

25-AI개선안제안

개요

목적: AI 기반 이벤트 개선안 제시
관련 유저스토리: UFR-AIMPR-010
비즈니스 중요도: ⭐⭐⭐⭐

주요 기능

성공/실패 요인 분석
3가지 개선안 제시
예상 효과 표시

UI 구성요소

┌─────────────────────────────┐
│ ← AI 개선안 제안             │
├─────────────────────────────┤
│                             │
│  🤖 AI가 분석한 개선안        │
│                             │
│  ✅ 성공 요인                │
│  • Instagram 채널 효율 우수  │
│  • 참여 방법 간편성          │
│  • 시즌 트렌드 반영 우수     │
│                             │
│  ❗ 개선 포인트               │
│  • 지니TV 채널 참여율 저조   │
│  • 경품 매력도 부족          │
│  • 홍보 문구 클릭률 낮음     │
│                             │
│  💡 AI 추천 개선안 (Top 3)   │
│                             │
│  ┌─────────────────────┐   │
│  │ 1순위 🥇             │   │
│  │                     │   │
│  │ 경품 변경            │   │
│  │ 치킨세트 → 상품권   │   │
│  │ (50,000원 상당)     │   │
│  │                     │   │
│  │ 📊 예상 효과:        │   │
│  │ 참여율 +45% ↑       │   │
│  │ ROI +67% ↑          │   │
│  │                     │   │
│  │ 근거: 유사 업종에서  │   │
│  │ 상품권 경품 참여율   │   │
│  │ 평균 62% 높음       │   │
│  │                     │   │
│  │ [이 개선안으로 시작] │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ 2순위 🥈             │   │
│  │ 참여 방법 단순화     │   │
│  │ [상세 보기 ▼]       │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ 3순위 🥉             │   │
│  │ 배포 채널 조정       │   │
│  │ [상세 보기 ▼]       │   │
│  └─────────────────────┘   │
│                             │
├─────────────────────────────┤
│  [피드백 제공] [다음 아이디어]│
└─────────────────────────────┘

인터랙션

개선안 카드 상세 보기 → 확장하여 근거 및 상세 설명 표시
이 개선안으로 시작 → 해당 개선안 반영하여 03-이벤트목적선택 (새 이벤트)
피드백 제공 → 개선안 평가 모달 (도움됨/도움 안됨)
다음 아이디어 → 26-다음이벤트아이디어

26-다음이벤트아이디어

개요

목적: 시즌별 이벤트 아이디어 제안
관련 유저스토리: UFR-AIMPR-020
비즈니스 중요도: ⭐⭐⭐

주요 기능

시즌 트렌드 반영
5가지 아이디어 제안
빠른 기획 시작

UI 구성요소

┌─────────────────────────────┐
│ ← 다음 이벤트 아이디어       │
├─────────────────────────────┤
│                             │
│  ✨ 11월 추천 이벤트 아이디어 │
│                             │
│  🤖 AI가 학습한 결과를 바탕으로│
│     제안합니다               │
│                             │
│  ┌─────────────────────┐   │
│  │ 1. 🍂 가을 감사제    │   │
│  │                     │   │
│  │ 📅 추천 기간:        │   │
│  │ 11/1 ~ 11/15       │   │
│  │                     │   │
│  │ 🎯 목적: 재방문 유도 │   │
│  │                     │   │
│  │ 📊 예상 성과:        │   │
│  │ 참여 700명          │   │
│  │ ROI 280%            │   │
│  │                     │   │
│  │ 💡 핵심 전략:        │   │
│  │ 단골 고객 특별 할인  │   │
│  │ 친구 초대 이벤트     │   │
│  │                     │   │
│  │ [이 아이디어로 시작] │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ 2. 🎄 연말 특별 이벤트│  │
│  │ [상세 보기 ▼]       │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ 3. 🏃 일일 한정 특가 │   │
│  │ [상세 보기 ▼]       │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ 4. 👨‍👩‍👧 가족 이벤트   │   │
│  │ [상세 보기 ▼]       │   │
│  └─────────────────────┘   │
│                             │
│  ┌─────────────────────┐   │
│  │ 5. 🎁 럭키드로우      │   │
│  │ [상세 보기 ▼]       │   │
│  └─────────────────────┘   │
│                             │
├─────────────────────────────┤
│  [메인으로]                  │
└─────────────────────────────┘

인터랙션

아이디어 카드 상세 보기 → 확장하여 상세 전략 및 예시 표시
이 아이디어로 시작 → 해당 아이디어 기본 설정으로 03-이벤트목적선택
시즌 변경 시 자동으로 트렌드 업데이트
메인으로 → 00-메인대시보드

3.9 공통 화면

99-마이페이지

개요

목적: 사용자 정보 및 설정 관리
비즈니스 중요도: ⭐⭐⭐

주요 기능

매장 정보 수정
알림 설정
계정 관리

UI 구성요소

┌─────────────────────────────┐
│ ← 마이페이지                 │
├─────────────────────────────┤
│                             │
│  👤 사장님 정보              │
│  ┌─────────────────────┐   │
│  │ 홍길동               │   │
│  │ 010-1234-5678       │   │
│  │ hong@example.com    │   │
│  │ [수정]              │   │
│  └─────────────────────┘   │
│                             │
│  🏪 매장 정보                │
│  ┌─────────────────────┐   │
│  │ 왕갈비통닭           │   │
│  │ 음식점 (치킨)        │   │
│  │ 수원시 영통구...     │   │
│  │ [수정]              │   │
│  └─────────────────────┘   │
│                             │
│  🔔 알림 설정                │
│  ┌─────────────────────┐   │
│  │ ✅ 이벤트 시작 알림   │   │
│  │ ✅ 참여자 알림       │   │
│  │ ✅ 당첨자 발표 알림   │   │
│  │ ☐ 마케팅 정보 수신   │   │
│  └─────────────────────┘   │
│                             │
│  💳 결제 정보                │
│  [무료 체험 쿠폰: 0회 남음]  │
│  [결제 수단 등록]            │
│                             │
│  ℹ️ 기타                     │
│  • 이용 약관                │
│  • 개인정보 처리방침         │
│  • 고객 지원                │
│  • 버전 정보 (v1.0.0)       │
│                             │
│  [로그아웃]                  │
│                             │
└─────────────────────────────┘

인터랙션

수정 버튼 → 해당 정보 수정 모달
알림 토글 → 실시간 반영
결제 수단 등록 → 결제 정보 입력 모달
각 메뉴 터치 → 해당 상세 페이지
로그아웃 → 확인 다이얼로그 → 로그인 화면

4. 화면간 전환 및 네비게이션

4.1 네비게이션 구조

하단 탭 네비게이션 (소상공인 앱)

┌──────┬──────┬──────┬──────┐
│ 🏠   │ 🎪   │ 📊   │ 👤   │
│ 홈    │이벤트│ 분석 │ 마이 │
└──────┴──────┴──────┴──────┘

홈 (🏠): 00-메인대시보드
이벤트 (🎪): 이벤트 생성 플로우 (03-이벤트목적선택)
분석 (📊): 21-실시간대시보드
마이 (👤): 99-마이페이지

4.2 전환 애니메이션

화면 전환 규칙 (Mobile First)

순차 진행: 슬라이드 인 (좌→우)
이전 단계: 슬라이드 아웃 (우→좌)
탭 전환: 페이드 인/아웃
모달: 바텀 시트 (아래→위)

4.3 백 버튼 동작

Android 백 버튼 / iOS 스와이프 백

순차 플로우 내: 이전 단계로
메인 화면: 앱 종료 확인
모달: 모달 닫기

5. 반응형 설계 전략

5.1 브레이크포인트

Mobile (320px ~ 767px) - 기본 디자인

단일 컬럼 레이아웃
스택형 UI
터치 친화적 인터페이스 (최소 44x44px)
폰트 크기: 14px (본문), 16px (입력 필드), 20px (제목)

Tablet (768px ~ 1023px) - 확장 디자인

2열 그리드 (카드형 콘텐츠)
사이드바 네비게이션 (접이식)
확장된 대시보드 (6개 지표 카드)
폰트 크기: 16px (본문), 18px (입력 필드), 24px (제목)

Desktop (1024px+) - 완전 확장

3열 그리드
고정 사이드바 네비게이션
전체 대시보드 (12개 지표 + 고급 차트)
멀티 패널 (리스트 + 상세 동시 표시)
폰트 크기: 16px (본문), 18px (입력 필드), 28px (제목)

5.2 Progressive Enhancement

Mobile (필수 기능)

이벤트 생성 (AI 기획 ~ 배포)
실시간 대시보드 (핵심 지표 4개)
당첨자 관리
간단한 차트 (막대/선 그래프)

Tablet (향상 기능)

채널별 비교 분석
확장된 대시보드 (6개 지표)
드래그 앤 드롭 콘텐츠 편집
인터랙티브 차트 (확대/축소)

Desktop (고급 기능)

전체 분석 대시보드 (12개 지표)
고급 차트 (히트맵, 퍼널 분석)
멀티 패널 워크플로우
키보드 단축키 지원

5.3 터치/마우스 최적화

Mobile/Tablet (터치)

최소 터치 영역: 44x44px
스와이프 제스처 (화면 전환, 새로고침)
롱 프레스 (상세 정보, 컨텍스트 메뉴)
핀치 줌 (차트, 이미지)

Desktop (마우스/키보드)

호버 효과 (툴팁, 미리보기)
우클릭 컨텍스트 메뉴
키보드 네비게이션 (Tab, Enter, ESC)
드래그 앤 드롭 (콘텐츠 편집, 순서 변경)

6. 접근성 보장 방안 (WCAG 2.1 AA)

6.1 시각적 접근성

색상 대비

본문 텍스트: 최소 4.5:1 대비율
대형 텍스트 (18px+): 최소 3:1 대비율
UI 컴포넌트: 최소 3:1 대비율
색상만으로 정보 전달 금지 (아이콘, 패턴 병행)

폰트

최소 폰트 크기: 14px (본문), 16px (입력 필드)
줄 간격: 최소 1.5 (본문), 1.2 (제목)
글자 간격 조정 가능
고대비 모드 지원

6.2 청각적 접근성

영상 콘텐츠

자막 파일 제공 (SRT)
영상 내 텍스트 오버레이
시각적 피드백 (로딩, 완료)

6.3 운동 능력 접근성

터치/클릭

최소 터치 영역: 44x44px
충분한 요소 간 간격 (8px 이상)
드래그 앤 드롭 대안 제공 (버튼 클릭)
시간 제한 없음 또는 연장 가능

6.4 인지적 접근성

명확성

간결한 언어 사용
명확한 레이블 및 안내
에러 메시지 구체적으로 제공
아이콘 + 텍스트 병행

일관성

일관된 네비게이션 구조
일관된 인터랙션 패턴
예측 가능한 동작

6.5 스크린 리더 지원

ARIA 레이블

모든 버튼에 aria-label
폼 필드에 aria-describedby (도움말)
에러 메시지에 aria-live="polite"
로딩 상태에 aria-busy="true"

키보드 네비게이션

모든 인터랙티브 요소 Tab 접근 가능
포커스 표시 명확 (파란색 테두리 2px)
Skip to content 링크
Escape 키로 모달 닫기

7. 성능 최적화 방안

7.1 로딩 성능

First Contentful Paint (FCP): < 1.5초

Critical CSS 인라인
폰트 preload
이미지 최적화 (WebP, AVIF)
코드 스플리팅 (라우트별)

Time to Interactive (TTI): < 3초

JavaScript 번들 최소화
불필요한 폴리필 제거
Tree shaking
서버 사이드 렌더링 (SSR) 또는 정적 생성 (SSG)

7.2 런타임 성능

AI 처리 시간 최적화

API 병렬 호출 (기획안 10초 목표)
응답 캐싱 (Redis, 24시간)
프롬프트 최적화 (토큰 수 감소)
스켈레톤 UI (로딩 중 사용자 경험)

콘텐츠 생성 최적화

이미지/영상 병렬 생성 (3분 목표)
GPU 가속 활용
웹 워커 활용 (메인 스레드 차단 방지)

실시간 데이터

폴링 간격 최적화 (5분, 사용자 액션 시 즉시)
WebSocket 활용 (실시간 업데이트)
데이터 증분 업데이트 (전체 재로드 방지)

7.3 네트워크 최적화

이미지

Lazy loading (스크롤 시 로드)
Responsive images (srcset, sizes)
WebP/AVIF 포맷 사용
CDN 활용

API 호출

요청 배치 (batch API)
응답 캐싱 (Service Worker)
중복 요청 제거 (debounce, throttle)

7.4 오프라인 지원 (PWA)

Service Worker

핵심 에셋 캐싱 (HTML, CSS, JS)
API 응답 캐싱 (stale-while-revalidate)
오프라인 폴백 페이지

IndexedDB

작성 중인 이벤트 로컬 저장
네트워크 복구 시 동기화

8. 변경 이력

버전	날짜	변경 내용	작성자
1.0	2025-10-17	초기 UI/UX 설계서 작성	박민지 (픽셀)

부록: KT 사장님Easy 벤치마킹 결과

주요 인사이트

AI 중심 설계: AI Agent, AI 이미지 제작 등 AI 기능 전면 배치
통합 관리: 하나의 앱에서 로봇, CCTV, 주문 시스템 등 통합 관리
데이터 기반: 매출 비교, 유동인구 분석 등 데이터 분석 제공
실용적 혜택: 무료 체험, 포인트 등 실질적 혜택 강조
인사이트 콘텐츠: 사장님을 위한 고민 해결 팁, 트렌드 콘텐츠 제공

적용 사항

AI 기능을 전면에 배치 (기획, 콘텐츠 생성, 개선안)
실시간 데이터 분석 대시보드
무료 체험 쿠폰 제공
간편한 UI (Mobile First)
인사이트 제공 (AI 개선안, 다음 이벤트 아이디어)

문서 끝

90 KiB Raw Blame History Unescape Escape

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

문서 정보

1. 프로토타입 화면 목록 정의

1.1 소상공인용 앱/웹 (26개 화면)

User 서비스

Event Planning 서비스

Content Generation 서비스

Distribution 서비스

Participation 서비스

Analytics 서비스

AI Learning 서비스

공통

2. 화면 간 사용자 플로우 정의

2.1 신규 가입 플로우

2.2 이벤트 생성 플로우 (핵심)

2.3 이벤트 관리 플로우

2.4 고객 참여 플로우 (별도 고객용 페이지)

3. 화면별 상세 설계

3.1 공통 화면

00-메인대시보드 (홈)

3.2 User 서비스

01-회원가입

02-매장정보등록

3.3 Event Planning 서비스

03-이벤트목적선택

04-AI트렌드분석결과

05-AI경품추천

06-AI참여방법설계

07-AI홍보문구생성

08-이벤트기획안승인

3.4 Content Generation 서비스

09-AI이미지생성

10-AI영상제작

11-SNS콘텐츠생성

12-QR포스터생성

13-콘텐츠편집

14-콘텐츠최종승인

3.5 Distribution 서비스

15-다중채널배포설정

16-배포진행상태

17-오프라인자료다운로드

3.6 Participation 서비스

18-이벤트참여신청 (고객용)

19-참여완료

20-당첨자명단관리

3.7 Analytics 서비스

21-실시간대시보드

22-채널별성과분석

23-ROI분석

24-분석리포트

3.8 AI Learning 서비스

25-AI개선안제안

26-다음이벤트아이디어

3.9 공통 화면

99-마이페이지

4. 화면간 전환 및 네비게이션

4.1 네비게이션 구조

4.2 전환 애니메이션

4.3 백 버튼 동작

5. 반응형 설계 전략

5.1 브레이크포인트

5.2 Progressive Enhancement

5.3 터치/마우스 최적화

6. 접근성 보장 방안 (WCAG 2.1 AA)

6.1 시각적 접근성

6.2 청각적 접근성

6.3 운동 능력 접근성

6.4 인지적 접근성

6.5 스크린 리더 지원

7. 성능 최적화 방안

7.1 로딩 성능

7.2 런타임 성능

7.3 네트워크 최적화

7.4 오프라인 지원 (PWA)

8. 변경 이력

부록: KT 사장님Easy 벤치마킹 결과

주요 인사이트

적용 사항

90 KiB

Raw Blame History