doyeon 58ab3bac44 프로토타입 파일 구조 개선 및 CSS 디렉토리 통합

- 중복 프로토타입 파일 삭제
- common.css/js를 css 디렉토리로 통합
- uiux.md 업데이트

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

2025-10-20 13:50:09 +09:00

81 KiB

Raw Blame History

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

문서 정보

작성일: 2025-01-20
버전: 1.0
작성자: UI/UX Designer (박민지 "픽셀")
참조 문서: design/userstory.md

1. 설계 개요

1.1 설계 목적

소상공인이 이벤트 기획부터 배포, 분석까지 모바일 환경에서 손쉽게 수행할 수 있는 직관적이고 효율적인 사용자 경험 제공

1.2 설계 원칙

Mobile First 디자인 철학

우선순위 중심 설계: 작은 화면에서 가장 중요한 기능과 콘텐츠에 집중
점진적 향상: 모바일 기본 경험 먼저 구축 후, 화면이 커질수록 추가 기능 제공
성능 최적화: 모바일 환경의 제약(느린 네트워크, 제한된 처리 능력)을 먼저 고려

핵심 UX 원칙

단순성: 복잡한 AI 기능을 단순한 인터페이스로 제공
피드백: 모든 AI 처리 과정에 대한 명확한 진행 상황 표시
일관성: 전체 플로우에서 일관된 패턴과 컴포넌트 사용
효율성: 최소한의 입력으로 최대한의 결과 제공 (AI 자동화)
신뢰성: AI 추천에 대한 투명성과 수정 가능성 제공

1.3 참조 사이트 분석

KT 사장님Easy

깔끔한 현대적 인터페이스, 대형 타이포그래피
단계별 기능 소개를 시각적 예시로 제시
QR 코드 다운로드 강조
캐러셀을 통한 프로모션 전달

wwit.design 닷슬래시대시

미니멀 모바일 우선 디자인
바텀 시트를 통한 보조 액션
탭 네비게이션으로 섹션 구분
명확한 빈 상태(Empty State) 처리
점진적 정보 공개

2. 프로토타입 화면 목록

2.1 화면 분류 및 우선순위

화면번호	화면명	관련 유저스토리	비즈니스 중요도	비고
User Service
01	회원가입	UFR-USER-010	Must (M/8)	KT 인증 선택
02	매장정보등록	UFR-USER-020	Must (M/13)	사업자번호 검증
Event Planning Service
03	이벤트목적선택	UFR-PLAN-010	Must (M/3)	기획 시작점
04	AI트렌드분석결과	UFR-PLAN-020	Must (M/13)	AI 분석 결과
05	AI경품추천	UFR-PLAN-030	Must (M/21)	경품 수정 가능
06	AI참여방법설계	UFR-PLAN-040	Must (M/21)	3가지 옵션
07	AI홍보문구생성	UFR-PLAN-050	Must (M/13)	5개 버전
08	이벤트기획안승인	UFR-PLAN-060	Must (M/5)	최종 확인
Content Generation Service
09	AI이미지생성	UFR-CONT-010	Must (M/34)	3종 이미지
10	AI영상제작	UFR-CONT-020	Must (M/34)	15초 영상, 우리동네TV 16:9
11	SNS콘텐츠생성	UFR-CONT-030	Must (M/21)	Instagram, Blog, Kakao
12	QR포스터생성	UFR-CONT-040	Must (M/8)	A4/A3 PDF
13	콘텐츠편집	UFR-CONT-050	Should (S/13)	간단한 수정
14	콘텐츠최종승인	UFR-CONT-060	Must (M/3)	최종 확인
Distribution Service
15	배포채널선택	UFR-DIST-010	Must (M/13)	다중 채널
16	배포진행상태	UFR-DIST-020~050	Must (M/47)	실시간 상태
17	오프라인자료다운로드	UFR-DIST-060	Should (S/5)	QR/PDF
Participation Service
18	이벤트참여	UFR-PART-010	Must (M/8)	고객용
19	참여완료	UFR-PART-010	Must (M/8)	응모번호 발급
Analytics & Management Service
20	당첨자명단관리	UFR-PART-050	Must (M/5)	경품 지급 관리
21	실시간대시보드	UFR-ANAL-010	Must (M/21)	5분 갱신
22	채널별성과분석	UFR-ANAL-020	Must (M/13)	비교 분석
23	ROI분석	UFR-ANAL-030	Must (M/13)	투자 대비 효과
24	분석리포트	UFR-ANAL-040	Should (S/8)	PDF 다운로드

총 24개 화면 (Must: 21개, Should: 3개)

3. 화면 간 사용자 플로우

3.1 메인 플로우 (소상공인)

[시작]
  ↓
[01-회원가입] → [02-매장정보등록]
  ↓
[21-실시간대시보드] (홈)
  ↓
┌─────────────────────┐
│ 이벤트 생성 플로우    │
├─────────────────────┤
[03-이벤트목적선택]
  ↓
[04-AI트렌드분석결과]
  ↓
[05-AI경품추천] ←→ (수정 가능)
  ↓
[06-AI참여방법설계]
  ↓
[07-AI홍보문구생성] ←→ (편집 가능)
  ↓
[08-이벤트기획안승인]
└─────────────────────┘
  ↓
┌─────────────────────┐
│ 콘텐츠 생성 플로우    │
├─────────────────────┤
[09-AI이미지생성]
  ↓
[10-AI영상제작]
  ↓
[11-SNS콘텐츠생성]
  ↓
[12-QR포스터생성]
  ↓
[13-콘텐츠편집] (선택)
  ↓
[14-콘텐츠최종승인]
└─────────────────────┘
  ↓
┌─────────────────────┐
│ 배포 플로우          │
├─────────────────────┤
[15-배포채널선택]
  ↓
[16-배포진행상태]
  ↓
[17-오프라인자료다운로드] (선택)
└─────────────────────┘
  ↓
┌─────────────────────┐
│ 모니터링 & 관리      │
├─────────────────────┤
[21-실시간대시보드]
  ↓
[22-채널별성과분석]
  ↓
[23-ROI분석]
  ↓
[20-당첨자명단관리]
  ↓
[24-분석리포트] (선택)
└─────────────────────┘

3.2 고객 플로우

[이벤트 발견]
(QR코드/SNS/우리동네TV/지니TV/링고비즈)
  ↓
[18-이벤트참여]
  ↓
[19-참여완료]
  ↓
(당첨 발표 대기)
  ↓
[당첨 알림 수신] (SMS/알림톡)

3.3 네비게이션 구조

바텀 네비게이션 (소상공인용)

홈 → 21-실시간대시보드
이벤트 → 이벤트 목록 + 새 이벤트 생성 버튼
분석 → 22-채널별성과분석
마이페이지 → 설정, 매장정보, 로그아웃

상단 앱바

컨텍스트별 제목
뒤로가기 (하위 화면)
액션 버튼 (저장, 공유 등)

4. 화면별 상세 설계

4.1 User Service

01-회원가입

개요

목적: 신규 소상공인의 간편한 회원가입 처리
관련 유저스토리: UFR-USER-010
비즈니스 중요도: Must (M/8)

주요 기능

기본 정보 입력 (이름, 전화번호, 이메일)
KT 본인 인증 (선택) - 추가 혜택 제공
개인정보 수집 동의

UI 구성요소

모바일 (320px~767px)

┌─────────────────────────┐
│ ← [뒤로]  회원가입        │
├─────────────────────────┤
│                         │
│  KT 이벤트 마케팅        │
│  환영합니다 🎉          │
│                         │
│  ┌──────────────────┐  │
│  │ 이름              │  │
│  │ [입력 필드]       │  │
│  └──────────────────┘  │
│                         │
│  ┌──────────────────┐  │
│  │ 전화번호          │  │
│  │ [010-XXXX-XXXX]  │  │
│  └──────────────────┘  │
│                         │
│  ┌──────────────────┐  │
│  │ 이메일            │  │
│  │ [example@xx.com] │  │
│  └──────────────────┘  │
│                         │
│  ┌──────────────────┐  │
│  │ ☐ KT 본인 인증   │  │
│  │ (인증 시 혜택 +) │  │
│  └──────────────────┘  │
│                         │
│  ☑ 개인정보 수집 동의  │
│  (필수) [자세히보기]   │
│                         │
├─────────────────────────┤
│ [     다음 단계     ]   │
└─────────────────────────┘

인터랙션

입력 필드 포커스 시 라벨 상단 이동 (Material Design)
실시간 형식 검증 (전화번호, 이메일)
KT 인증 선택 시 바텀 시트로 인증 프로세스 표시
모든 필드 입력 완료 시 "다음 단계" 버튼 활성화

반응형 처리

태블릿(768px~): 입력 필드 최대 너비 500px 중앙 정렬
데스크톱(1024px~): 좌측에 서비스 소개 이미지, 우측에 폼 배치

접근성

모든 입력 필드에 적절한 label과 placeholder
에러 메시지는 aria-live로 스크린 리더에 즉시 전달
Tab 키 순서 논리적으로 설정

02-매장정보등록

개요

목적: 맞춤형 이벤트 생성을 위한 매장 정보 수집 및 검증
관련 유저스토리: UFR-USER-020
비즈니스 중요도: Must (M/13)

주요 기능

매장 기본 정보 입력 (매장명, 업종, 주소, 영업시간)
사업자번호 검증 (국세청 API 연동)
메뉴/상품 정보 입력 (선택)
매장 이미지 업로드 (선택)
무료 체험 쿠폰 자동 발급

UI 구성요소

모바일 (320px~767px)

┌─────────────────────────┐
│ ← [뒤로]  매장정보등록    │
├─────────────────────────┤
│ 진행상황: ━━━━━━━━━ 2/2 │
├─────────────────────────┤
│                         │
│ 필수 정보               │
│                         │
│ [매장명 입력]           │
│                         │
│ [업종 선택 ▼]           │
│ 음식점/카페/소매업...   │
│                         │
│ [주소 검색 🔍]          │
│ (도로명 주소)           │
│                         │
│ 영업시간                │
│ 월: [09:00] ~ [21:00]  │
│ 화: [09:00] ~ [21:00]  │
│ ... (요일별 설정)       │
│                         │
│ [사업자번호]            │
│ XXX-XX-XXXXX           │
│ [검증하기] ← AI 자동검증│
│                         │
│ ─────────────────────   │
│ 선택 정보 (이벤트 맞춤화)│
│                         │
│ 메뉴/상품 (최대 10개)   │
│ + [메뉴 추가]           │
│                         │
│ 매장 특징               │
│ [텍스트 입력 영역]      │
│ (최대 200자)            │
│                         │
│ 대표 이미지 (최대 3장)  │
│ [📷] [📷] [📷]         │
│                         │
├─────────────────────────┤
│ [   등록 완료하기   ]   │
└─────────────────────────┘

인터랙션

주소 검색: 바텀 시트로 주소 검색 UI 표시 (카카오 주소 API)
사업자번호 검증:
- 입력 완료 시 자동 검증 시작
- 로딩 인디케이터 표시
- 검증 성공: ✅ "확인됨" 표시
- 검증 실패: ❌ 명확한 오류 메시지
메뉴 추가: 바텀 시트로 메뉴명, 가격, 설명 입력
이미지 업로드:
- 카메라 또는 갤러리 선택
- 업로드 진행률 표시
- 미리보기 제공

반응형 처리

태블릿: 2단 레이아웃 (필수정보 | 선택정보)
데스크톱: 3단 레이아웃 + 우측에 진행 상황 및 혜택 안내

검증 및 피드백

매장명: 2자 이상 필수
사업자번호: 형식 검증 → 국세청 API 검증
검증 실패 시 재입력 유도, 이전 입력값 유지

4.2 Event Planning Service

03-이벤트목적선택

개요

목적: 이벤트 기획의 방향성 설정
관련 유저스토리: UFR-PLAN-010
비즈니스 중요도: Must (M/3)

주요 기능

4가지 목적 중 하나 선택 (라디오 버튼)
각 목적별 설명 및 예상 효과 제시

UI 구성요소

모바일

┌─────────────────────────┐
│ ← [닫기] 새 이벤트 기획  │
├─────────────────────────┤
│ 단계 1/6: 목적 선택      │
│ ━━━━━━━━━━━━━━━━━━━━━ │
│                         │
│ 이벤트 목적을 선택하세요 │
│                         │
│ ┌─────────────────────┐│
│ │ ○ 신규고객 유치      ││
│ │   새로운 고객 확보   ││
│ │   예상효과: 👤+30%  ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ ○ 재방문 유도        ││
│ │   기존 고객 재방문   ││
│ │   예상효과: 🔄+25%  ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ ○ 매출 증대          ││
│ │   단기 매출 향상     ││
│ │   예상효과: 💰+40%  ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ ○ 인지도 향상        ││
│ │   브랜드 인지도 제고 ││
│ │   예상효과: 📢+50%  ││
│ └─────────────────────┘│
│                         │
├─────────────────────────┤
│ [     다음 (AI분석)  ]  │
└─────────────────────────┘

인터랙션

카드 선택 시 라디오 버튼 활성화 및 카드 하이라이트
선택 완료 시 "다음" 버튼 활성화
각 카드 롱프레스/호버 시 상세 툴팁 표시

성능

초기 로딩 < 1초
선택 즉시 다음 단계 준비 (프리페치)

04-AI트렌드분석결과

개요

목적: AI가 분석한 업종/지역 트렌드 제시
관련 유저스토리: UFR-PLAN-020
비즈니스 중요도: Must (M/13)

주요 기능

업종, 지역, 시즌 기반 트렌드 분석
주요 트렌드 3-5가지 제시
예상 성공률 표시

UI 구성요소

모바일

┌─────────────────────────┐
│ ← [뒤로] AI 트렌드 분석  │
├─────────────────────────┤
│ 단계 2/6: 트렌드 분석    │
│ ━━━━━━━━━━━━━━━━━━━━━ │
│                         │
│ 🤖 AI가 분석중입니다... │
│ [프로그레스 바]         │
│                         │
│ (분석 완료 후)          │
│                         │
│ 📊 분석 결과            │
│                         │
│ 매장: 수원 왕갈비통닭    │
│ 업종: 치킨 전문점       │
│ 지역: 수원시 팔달구     │
│ 시즌: 겨울 (12월)       │
│                         │
│ ┌─────────────────────┐│
│ │ 주요 트렌드          ││
│ │                     ││
│ │ 1️⃣ 연말 모임 증가   ││
│ │ → 단체 할인 이벤트  ││
│ │   효과적             ││
│ │                     ││
│ │ 2️⃣ 배달 주문 급증   ││
│ │ → 배달 경품 추천    ││
│ │                     ││
│ │ 3️⃣ SNS 공유 활발   ││
│ │ → 바이럴 참여방법   ││
│ │   권장               ││
│ └─────────────────────┘│
│                         │
│ 예상 성공률: 78% 🎯    │
│ (동일 업종 평균 대비)   │
│                         │
├─────────────────────────┤
│ [   다음 (경품추천)  ]  │
└─────────────────────────┘

인터랙션

AI 분석 진행 시 애니메이션 표시 (3-13초 소요)
분석 결과 순차적 페이드인 애니메이션
각 트렌드 탭 시 상세 정보 바텀 시트

성능

AI 분석 시간: 목표 3초 이내
실패 시 재시도 버튼 제공

05-AI경품추천

개요

목적: 예산 대비 최적 경품 AI 추천 및 수정
관련 유저스토리: UFR-PLAN-030
비즈니스 중요도: Must (M/21)

주요 기능

예산 입력
AI가 Top 5 경품 추천
경품 선택 및 수정 가능

UI 구성요소

모바일

┌─────────────────────────┐
│ ← [뒤로] AI 경품 추천    │
├─────────────────────────┤
│ 단계 3/6: 경품 선택      │
│ ━━━━━━━━━━━━━━━━━━━━━ │
│                         │
│ 예산 설정               │
│ ┌─────────────────────┐│
│ │ 100,000원           ││
│ │ [슬라이더]          ││
│ │ 1만원 ━━●━━ 500만원││
│ └─────────────────────┘│
│                         │
│ 🤖 AI 추천 경품 (Top 5) │
│                         │
│ ┌─────────────────────┐│
│ │ 1. 치킨세트 무료교환 ││
│ │    매력도: ⭐⭐⭐⭐⭐││
│ │    예상참여율: 45%   ││
│ │    [선택] [수정]     ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ 2. 5천원 할인쿠폰    ││
│ │    매력도: ⭐⭐⭐⭐  ││
│ │    예상참여율: 38%   ││
│ │    [선택] [수정]     ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ 3. KT 멤버십 포인트  ││
│ │    매력도: ⭐⭐⭐    ││
│ │    예상참여율: 32%   ││
│ │    [선택] [수정]     ││
│ └─────────────────────┘│
│                         │
│ ... (스크롤)            │
│                         │
│ [+ 직접 입력하기]       │
│                         │
├─────────────────────────┤
│ [  다음 (참여방법)   ]  │
└─────────────────────────┘

인터랙션

예산 슬라이더: 실시간 경품 추천 업데이트
경품 수정: 바텀 시트로 경품명, 수량, 가격 수정
직접 입력: 새 경품 추가 폼 표시
선택 시: 카드 하이라이트, 예상 효과 재계산

검증

예산 초과 시 경고 메시지
경품 수정 시 실시간 예상참여율 재계산

06-AI참여방법설계

개요

목적: 간단하면서도 재방문을 유도하는 참여 방법 AI 제안
관련 유저스토리: UFR-PLAN-040
비즈니스 중요도: Must (M/21)

주요 기능

3가지 참여 방법 옵션 제시
각 옵션별 난이도 및 예상 참여율 표시
1개 선택

UI 구성요소

모바일

┌─────────────────────────┐
│ ← [뒤로] AI 참여방법 설계│
├─────────────────────────┤
│ 단계 4/6: 참여방법 선택  │
│ ━━━━━━━━━━━━━━━━━━━━━ │
│                         │
│ 🤖 AI 추천 참여방법     │
│                         │
│ ┌─────────────────────┐│
│ │ 옵션 1: 간편형       ││
│ │ 📱 QR 코드 스캔      ││
│ │                     ││
│ │ 난이도: ⭐ (쉬움)   ││
│ │ 예상참여율: 60%     ││
│ │ 재방문율: 20%       ││
│ │                     ││
│ │ ✓ 빠른 참여         ││
│ │ ✓ 매장 방문 불필요  ││
│ │ [선택하기]          ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ 옵션 2: 재방문 유도형││
│ │ 🏪 매장 방문 + 리뷰  ││
│ │                     ││
│ │ 난이도: ⭐⭐ (보통) ││
│ │ 예상참여율: 35%     ││
│ │ 재방문율: 80%       ││
│ │                     ││
│ │ ✓ 높은 재방문율     ││
│ │ ✓ 리뷰 축적         ││
│ │ [선택하기]          ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ 옵션 3: 바이럴형     ││
│ │ 📢 SNS 공유 + 태그   ││
│ │                     ││
│ │ 난이도: ⭐⭐⭐     ││
│ │ 예상참여율: 25%     ││
│ │ 바이럴 확산: 150%   ││
│ │                     ││
│ │ ✓ 입소문 효과       ││
│ │ ✓ 신규고객 유입     ││
│ │ [선택하기]          ││
│ └─────────────────────┘│
│                         │
├─────────────────────────┤
│ [  다음 (홍보문구)   ]  │
└─────────────────────────┘

인터랙션

옵션 카드 탭 시 상세 설명 확장
선택 시 카드 하이라이트 및 체크마크 표시
옵션 간 비교를 위한 나란히 보기 모드 제공

07-AI홍보문구생성

개요

목적: GPT-4 기반 홍보 문구 및 해시태그 자동 생성
관련 유저스토리: UFR-PLAN-050
비즈니스 중요도: Must (M/13)

주요 기능

5개 버전 홍보 문구 생성
SNS 해시태그 자동 생성
플랫폼별 최적화 (Instagram, Blog, Kakao)
선택 및 편집 가능

UI 구성요소

모바일

┌─────────────────────────┐
│ ← [뒤로] AI 홍보문구 생성│
├─────────────────────────┤
│ 단계 5/6: 홍보문구 선택  │
│ ━━━━━━━━━━━━━━━━━━━━━ │
│                         │
│ 🤖 AI가 생성중입니다... │
│ [프로그레스 바]         │
│                         │
│ (생성 완료 후)          │
│                         │
│ 📝 생성된 홍보 문구     │
│                         │
│ ┌─────────────────────┐│
│ │ 버전 1: 친근한 톤    ││
│ │ ─────────────────── ││
│ │ "🎉 연말 대박 이벤트!││
│ │  수원 왕갈비통닭에서 ││
│ │  치킨세트를 공짜로!  ││
│ │  지금 바로 참여하세요"││
│ │                     ││
│ │ 해시태그: #수원맛집  ││
│ │ #치킨이벤트 #연말특가││
│ │                     ││
│ │ [선택] [편집]       ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ 버전 2: 공식적인 톤  ││
│ │ ─────────────────── ││
│ │ "왕갈비통닭 12월    ││
│ │  프로모션을 시작합니다││
│ │  선착순 100명에게    ││
│ │  치킨세트 무료 증정" ││
│ │                     ││
│ │ [선택] [편집]       ││
│ └─────────────────────┘│
│                         │
│ ... (스크롤로 5개)      │
│                         │
│ [🔄 다시 생성하기]      │
│                         │
├─────────────────────────┤
│ [    다음 (최종확인) ]  │
└─────────────────────────┘

인터랙션

생성 과정: 로딩 애니메이션 + 진행 상태 (13초 이내)
편집: 바텀 시트로 텍스트 편집기 표시
미리보기: 플랫폼별 미리보기 (Instagram 피드, 블로그 등)
다시 생성: 새로운 5개 문구 생성 (다른 톤앤매너)

성능

AI 생성 시간: 목표 13초 이내
편집 실시간 반영

08-이벤트기획안승인

개요

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

주요 기능

전체 기획안 요약 제시
예상 예산 및 효과 표시
승인 또는 이전 단계 수정

UI 구성요소

모바일

┌─────────────────────────┐
│ ← [뒤로] 기획안 최종확인 │
├─────────────────────────┤
│ 단계 6/6: 기획안 승인    │
│ ━━━━━━━━━━━━━━━━━━━━━ │
│                         │
│ ✅ 기획 완료!           │
│                         │
│ ┌─────────────────────┐│
│ │ 📋 기획안 요약       ││
│ │                     ││
│ │ 목적: 신규고객 유치  ││
│ │ 경품: 치킨세트 무료  ││
│ │ 참여: QR코드 스캔    ││
│ │ 홍보: "🎉 연말..."  ││
│ │                     ││
│ │ [수정하기 ✏️]       ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ 💰 예상 비용         ││
│ │                     ││
│ │ 경품 비용: 100,000원││
│ │ 플랫폼 비용: 무료    ││
│ │ ────────────────── ││
│ │ 총 예산: 100,000원  ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ 📈 예상 효과         ││
│ │                     ││
│ │ 참여율: 60%         ││
│ │ 예상참여자: ~180명  ││
│ │ ROI: 240%           ││
│ └─────────────────────┘│
│                         │
│ ⏱ 전체 소요시간: 8초    │
│                         │
├─────────────────────────┤
│ [← 이전]  [승인하기 ✓]  │
└─────────────────────────┘

인터랙션

각 섹션 탭 시 해당 단계로 이동하여 수정 가능
승인 시 확인 다이얼로그 표시
승인 완료 후 콘텐츠 생성 단계로 자동 이동

성능

전체 기획 과정: 목표 10초 이내 완료 (AI 처리 포함)

4.3 Content Generation Service

09-AI이미지생성

개요

목적: 브랜드 컬러/로고 반영한 이미지 3종 AI 생성
관련 유저스토리: UFR-CONT-010
비즈니스 중요도: Must (M/34)

주요 기능

브랜드 컬러 선택 또는 입력
로고 이미지 업로드
Stable Diffusion으로 3가지 스타일 이미지 생성
미리보기 및 다운로드

UI 구성요소

모바일

┌─────────────────────────┐
│ ← [뒤로] AI 이미지 생성  │
├─────────────────────────┤
│ 콘텐츠 1/5: 이미지       │
│ ━━━━━━━━━━━━━━━━━━━━━ │
│                         │
│ 브랜드 설정             │
│                         │
│ ┌─────────────────────┐│
│ │ 브랜드 컬러          ││
│ │ [🎨] #FF5733        ││
│ │ (컬러 피커)         ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ 로고 업로드          ││
│ │ [📷 이미지 선택]    ││
│ │ (미리보기)          ││
│ └─────────────────────┘│
│                         │
│ [AI 이미지 생성 시작]   │
│                         │
│ (생성 중)               │
│ 🤖 AI가 이미지 생성중...│
│ ▓▓▓▓░░░░░░ 40%        │
│ 예상 소요: 2분 30초     │
│                         │
│ (생성 완료 후)          │
│                         │
│ 생성된 이미지 (3종)     │
│                         │
│ ┌────┐ ┌────┐ ┌────┐ │
│ │심플││화려││트렌││  │
│ │    ││    ││디  ││  │
│ │ ○ ││ ● ││ ○ ││  │
│ └────┘ └────┘ └────┘ │
│                         │
│ [다운로드] [다시생성]   │
│                         │
├─────────────────────────┤
│ [    다음 (영상제작) ]  │
└─────────────────────────┘

인터랙션

브랜드 컬러: 컬러 피커 또는 HEX 코드 직접 입력
로고 업로드: 카메라/갤러리 선택, 최대 5MB
생성 진행: 실시간 진행률 표시 (2-3분)
이미지 선택: 탭하여 확대, 스와이프로 비교
다운로드: 선택한 이미지 저장

성능

AI 이미지 생성: 목표 2-3분 이내
백그라운드 처리로 다른 작업 가능 (알림으로 완료 통지)

10-AI영상제작

개요

목적: 15초 분량의 홍보 영상 AI 제작 (SNS 및 우리동네TV용)
관련 유저스토리: UFR-CONT-020
비즈니스 중요도: Must (M/34)

주요 기능

배경 음악 선택
텍스트 오버레이 편집
우리동네TV용 해상도 선택 (1920x1080, 16:9)
15초 영상 자동 제작

UI 구성요소

모바일

┌─────────────────────────┐
│ ← [뒤로] AI 영상 제작    │
├─────────────────────────┤
│ 콘텐츠 2/5: 영상         │
│ ━━━━━━━━━━━━━━━━━━━━━ │
│                         │
│ 영상 설정               │
│                         │
│ ┌─────────────────────┐│
│ │ 배경 음악            ││
│ │ [▶️ 경쾌한 음악 1]   ││
│ │ [  신나는 음악 2]    ││
│ │ [  차분한 음악 3]    ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ 텍스트 오버레이      ││
│ │ "🎉 연말 대박..."   ││
│ │ [편집하기]          ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ 해상도 선택          ││
│ │ ☑ SNS용 (1080x1080) ││
│ │ ☑ 우리동네TV        ││
│ │   (1920x1080, 16:9) ││
│ └─────────────────────┘│
│                         │
│ [AI 영상 제작 시작]     │
│                         │
│ (제작 중)               │
│ 🎬 AI가 영상 제작중...  │
│ ▓▓▓▓▓░░░░░ 50%        │
│ 예상 소요: 3분          │
│                         │
│ (완료 후)               │
│ ┌─────────────────────┐│
│ │ [▶️ 15초 미리보기]   ││
│ │ ─────────────────── ││
│ │ SNS용, 우리동네TV용  ││
│ │ 영상 각 1개 생성완료 ││
│ └─────────────────────┘│
│                         │
│ [다운로드] [다시제작]   │
│                         │
├─────────────────────────┤
│ [  다음 (SNS콘텐츠)  ]  │
└─────────────────────────┘

인터랙션

배경 음악: 재생 버튼으로 미리듣기
텍스트 편집: 바텀 시트로 텍스트, 폰트, 위치 조정
제작 진행: 실시간 진행률 + 예상 소요 시간 (3-5분)
미리보기: 전체 화면으로 재생, 재생/일시정지 컨트롤

성능

AI 영상 제작: 목표 3-5분 이내
백그라운드 처리 + 푸시 알림

11-SNS콘텐츠생성

개요

목적: Instagram, Naver Blog, Kakao Channel용 최적화 콘텐츠 생성
관련 유저스토리: UFR-CONT-030
비즈니스 중요도: Must (M/21)

주요 기능

SNS 플랫폼 선택 (Instagram 필수, 나머지 선택)
플랫폼별 해상도 자동 조정
해시태그 자동 삽입
일괄 다운로드

UI 구성요소

모바일

┌─────────────────────────┐
│ ← [뒤로] SNS 콘텐츠 생성 │
├─────────────────────────┤
│ 콘텐츠 3/5: SNS          │
│ ━━━━━━━━━━━━━━━━━━━━━ │
│                         │
│ 플랫폼 선택             │
│                         │
│ ┌─────────────────────┐│
│ │ ✅ Instagram        ││
│ │ 1080x1080 (정사각형) ││
│ │ [미리보기]          ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ ☐ Naver Blog        ││
│ │ 800x600 (가로형)    ││
│ │ [미리보기]          ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ ☐ Kakao Channel     ││
│ │ 800x800 (정사각형)  ││
│ │ [미리보기]          ││
│ └─────────────────────┘│
│                         │
│ [콘텐츠 생성하기]       │
│                         │
│ (생성 완료 후)          │
│                         │
│ 생성된 콘텐츠           │
│                         │
│ ┌────┐ ┌────┐         │
│ │Inst││Blog│          │
│ │agram││   │          │
│ └────┘ └────┘         │
│                         │
│ 게시 텍스트:            │
│ "🎉 연말 대박 이벤트!   │
│  #수원맛집 #치킨이벤트" │
│                         │
│ [📦 일괄 다운로드]      │
│                         │
├─────────────────────────┤
│ [  다음 (QR포스터)   ]  │
└─────────────────────────┘

인터랙션

플랫폼 선택: 체크박스로 다중 선택
미리보기: 바텀 시트로 플랫폼별 미리보기 (실제 피드 모습)
생성: 선택한 플랫폼 수만큼 최적화 콘텐츠 생성 (30초 이내)
다운로드: ZIP 파일로 일괄 다운로드

성능

SNS 콘텐츠 생성: 30초 이내
미리보기 즉시 로딩

12-QR포스터생성

개요

목적: QR 코드 포함 인쇄용 포스터 생성
관련 유저스토리: UFR-CONT-040
비즈니스 중요도: Must (M/8)

주요 기능

QR 연결 URL 자동 설정
포스터 크기 선택 (A4/A3)
QR 포스터 PDF 생성

UI 구성요소

모바일

┌─────────────────────────┐
│ ← [뒤로] QR 포스터 생성  │
├─────────────────────────┤
│ 콘텐츠 4/5: QR 포스터    │
│ ━━━━━━━━━━━━━━━━━━━━━ │
│                         │
│ QR 코드 설정            │
│                         │
│ ┌─────────────────────┐│
│ │ 연결 URL (자동생성)  ││
│ │ ktevnt.co/abc123    ││
│ │ [📋 복사]           ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ QR 코드 미리보기     ││
│ │ ┌────────────────┐ ││
│ │ │ [QR 이미지]    │ ││
│ │ └────────────────┘ ││
│ └─────────────────────┘│
│                         │
│ 포스터 크기             │
│ ○ A4 (210x297mm)       │
│ ○ A3 (297x420mm)       │
│                         │
│ [포스터 생성하기]       │
│                         │
│ (생성 완료 후)          │
│                         │
│ ┌─────────────────────┐│
│ │ 📄 생성된 포스터     ││
│ │                     ││
│ │ [미리보기 이미지]    ││
│ │                     ││
│ │ A4 PDF: 2.1MB       ││
│ │ QR 이미지: 150KB    ││
│ └─────────────────────┘│
│                         │
│ [다운로드] [인쇄하기]   │
│                         │
├─────────────────────────┤
│ [  다음 (콘텐츠편집) ]  │
└─────────────────────────┘

인터랙션

URL 복사: 클립보드 복사 + 토스트 메시지
크기 선택: 라디오 버튼, 미리보기 즉시 업데이트
생성: 20초 이내 완료
인쇄: 시스템 인쇄 다이얼로그 호출

성능

QR 포스터 생성: 20초 이내
PDF 파일 크기 최적화 (<5MB)

13-콘텐츠편집

개요

목적: 생성된 콘텐츠 간단 수정
관련 유저스토리: UFR-CONT-050
비즈니스 중요도: Should (S/13)

주요 기능

이미지/영상 텍스트 수정
색상 조정
편집 이력 관리 (최대 3개 버전)

UI 구성요소

모바일

┌─────────────────────────┐
│ ← [뒤로] 콘텐츠 편집     │
├─────────────────────────┤
│ 콘텐츠 편집 (선택)       │
│                         │
│ 편집할 콘텐츠 선택       │
│                         │
│ ┌────┐ ┌────┐ ┌────┐ │
│ │이미││영상││SNS ││  │
│ │지  ││    ││    ││  │
│ └────┘ └────┘ └────┘ │
│                         │
│ (이미지 편집 예시)      │
│                         │
│ ┌─────────────────────┐│
│ │ [이미지 미리보기]    ││
│ │                     ││
│ │ 텍스트: "🎉..."     ││
│ │ [편집]              ││
│ └─────────────────────┘│
│                         │
│ 편집 도구               │
│ [T 텍스트] [🎨 색상]   │
│ [↔️ 크기] [📐 위치]    │
│                         │
│ 편집 이력               │
│ • 원본                  │
│ • 버전 1 (현재)         │
│ [원본으로 되돌리기]     │
│                         │
├─────────────────────────┤
│ [취소] [저장하기]       │
└─────────────────────────┘

인터랙션

콘텐츠 선택: 카드 탭으로 선택
텍스트 편집: 바텀 시트로 텍스트 에디터
색상 조정: 컬러 피커
실시간 미리보기: 편집 사항 즉시 반영
되돌리기: 이전 버전으로 복원

성능

편집 실시간 반영
최대 3개 버전 관리

14-콘텐츠최종승인

개요

목적: 완성된 콘텐츠 최종 검토 및 승인
관련 유저스토리: UFR-CONT-060
비즈니스 중요도: Must (M/3)

주요 기능

전체 콘텐츠 미리보기
승인 또는 이전 단계 수정

UI 구성요소

모바일

┌─────────────────────────┐
│ ← [뒤로] 콘텐츠 최종확인 │
├─────────────────────────┤
│ 콘텐츠 5/5: 최종 승인    │
│ ━━━━━━━━━━━━━━━━━━━━━ │
│                         │
│ ✅ 콘텐츠 생성 완료!    │
│                         │
│ 생성된 콘텐츠 (갤러리)  │
│                         │
│ ┌────┐ ┌────┐ ┌────┐ │
│ │이미││이미││이미││  │
│ │지1 ││지2 ││지3 ││  │
│ └────┘ └────┘ └────┘ │
│                         │
│ ┌────┐ ┌────┐         │
│ │15초││SNS ││         │
│ │영상││세트││         │
│ └────┘ └────┘         │
│                         │
│ ┌────┐                 │
│ │QR  ││                │
│ │포스││                │
│ │터  ││                │
│ └────┘                 │
│                         │
│ [📦 전체 다운로드]      │
│                         │
│ ⏱ 콘텐츠 생성시간: 7분  │
│ (목표: 5-8분 이내)      │
│                         │
├─────────────────────────┤
│ [← 수정] [승인하기 ✓]   │
└─────────────────────────┘

인터랙션

각 콘텐츠 탭 시 전체 화면 미리보기
승인 시 확인 다이얼로그
승인 완료 후 배포 단계로 자동 이동

성능

전체 콘텐츠 생성: 목표 5-8분 이내

4.4 Distribution Service

15-배포채널선택

개요

목적: 다중 채널 배포 설정
관련 유저스토리: UFR-DIST-010
비즈니스 중요도: Must (M/13)

주요 기능

배포 채널 선택 (다중 선택)
즉시 배포 또는 예약 배포
채널별 개별 설정

UI 구성요소

모바일

┌─────────────────────────┐
│ ← [뒤로] 배포 채널 선택  │
├─────────────────────────┤
│ 배포 1/3: 채널 선택      │
│ ━━━━━━━━━━━━━━━━━━━━━ │
│                         │
│ KT 채널                 │
│                         │
│ ┌─────────────────────┐│
│ │ ☐ 우리동네TV         ││
│ │ 지역 주변 노출       ││
│ │ [설정 >]            ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ ☐ 링고비즈 연결음    ││
│ │ 매장 전화 연결음     ││
│ │ [설정 >]            ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ ☐ 지니TV 광고        ││
│ │ TV 광고 송출         ││
│ │ [설정 >]            ││
│ └─────────────────────┘│
│                         │
│ SNS 채널                │
│                         │
│ ┌─────────────────────┐│
│ │ ✅ Instagram (필수)  ││
│ │ [계정 연동 ✓]       ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ ☐ Naver Blog        ││
│ │ [계정 연동하기]      ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ ☐ Kakao Channel     ││
│ │ [계정 연동하기]      ││
│ └─────────────────────┘│
│                         │
│ 배포 시간               │
│ ○ 즉시 배포             │
│ ○ 예약 배포             │
│   [날짜/시간 선택]      │
│                         │
├─────────────────────────┤
│ [  다음 (배포 시작)  ]  │
└─────────────────────────┘

인터랙션

채널 선택: 체크박스로 다중 선택
설정: 바텀 시트로 채널별 세부 설정 (반경, 시간대, 예산 등)
계정 연동: OAuth 인증 플로우
예약 배포: 날짜/시간 피커

성능

채널 설정 즉시 저장
배포 준비 완료 시 다음 단계 활성화

16-배포진행상태

개요

목적: 실시간 배포 진행 상황 모니터링
관련 유저스토리: UFR-DIST-020~050
비즈니스 중요도: Must (M/47)

주요 기능

채널별 배포 상태 실시간 표시
배포 실패 시 자동 재시도 (3회)
실패 시 알림 및 수동 재시도 옵션

UI 구성요소

모바일

┌─────────────────────────┐
│ ← [뒤로] 배포 진행 중    │
├─────────────────────────┤
│ 배포 2/3: 진행 상태      │
│ ━━━━━━━━━━━━━━━━━━━━━ │
│                         │
│ 배포 진행 중... 🚀      │
│                         │
│ ┌─────────────────────┐│
│ │ ✅ Instagram        ││
│ │ 배포 완료 (3초)     ││
│ │ [게시물 보기]       ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ 🔄 우리동네TV        ││
│ │ 배포 중... (15초)   ││
│ │ ▓▓▓▓░░░░░░ 40%    ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ ⏳ 지니TV            ││
│ │ 대기 중...          ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ ❌ Naver Blog       ││
│ │ 배포 실패 (재시도중) ││
│ │ 1/3 재시도          ││
│ │ [수동 재시도]       ││
│ └─────────────────────┘│
│                         │
│ 전체 진행률: 50%        │
│ 예상 소요: 45초 남음    │
│                         │
│ [취소] [새로고침]       │
│                         │
├─────────────────────────┤
│ (배포 완료 시)          │
│ [다음 (완료 화면) ✓]    │
└─────────────────────────┘

인터랙션

실시간 업데이트: 5초 간격 자동 새로고침
게시물 보기: 외부 링크로 실제 게시물 확인
수동 재시도: 실패한 채널 개별 재시도
취소: 진행 중인 배포 중단 (확인 다이얼로그)

성능

전체 배포: 목표 1분 이내
병렬 배포로 시간 단축

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

개요

목적: QR 포스터 및 인쇄용 자료 다운로드
관련 유저스토리: UFR-DIST-060
비즈니스 중요도: Should (S/5)

주요 기능

QR 포스터 (A4/A3 PDF)
QR 코드 이미지 (PNG)
고해상도 이미지
일괄 다운로드 (ZIP)

UI 구성요소

모바일

┌─────────────────────────┐
│ ← [뒤로] 오프라인 자료   │
├─────────────────────────┤
│ 배포 3/3: 자료 다운로드  │
│ ━━━━━━━━━━━━━━━━━━━━━ │
│                         │
│ ✅ 배포 완료!           │
│                         │
│ 오프라인 홍보 자료       │
│                         │
│ ┌─────────────────────┐│
│ │ 📄 QR 포스터 (A4)   ││
│ │ 2.1MB PDF           ││
│ │ [다운로드]          ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ 📄 QR 포스터 (A3)   ││
│ │ 4.5MB PDF           ││
│ │ [다운로드]          ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ 📷 QR 코드 이미지    ││
│ │ 150KB PNG           ││
│ │ [다운로드]          ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ 🖼️ 고해상도 이미지   ││
│ │ 5.2MB (300dpi)      ││
│ │ [다운로드]          ││
│ └─────────────────────┘│
│                         │
│ [📦 전체 다운로드 (ZIP)]│
│                         │
│ 다운로드 이력           │
│ • 2025-01-20 15:30     │
│                         │
├─────────────────────────┤
│ [  홈으로 이동하기   ]  │
└─────────────────────────┘

인터랙션

개별 다운로드: 파일 저장 다이얼로그
전체 다운로드: ZIP 파일로 압축 다운로드
다운로드 이력: 이전 다운로드 기록 표시

4.5 Participation Service (고객용)

18-이벤트참여

개요

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

주요 기능

이름, 전화번호 입력
참여 경로 자동 추적
개인정보 수집 동의
중복 참여 방지

UI 구성요소

모바일

┌─────────────────────────┐
│ 🎉 수원 왕갈비통닭      │
│ 연말 대박 이벤트!       │
├─────────────────────────┤
│                         │
│ 경품: 치킨세트 무료교환  │
│ 당첨인원: 100명         │
│ 기간: ~2025-12-31      │
│                         │
│ 참여방법                │
│ 1. 매장 방문            │
│ 2. QR 코드 스캔         │
│ 3. 정보 입력            │
│                         │
│ ─────────────────────   │
│                         │
│ 참여 신청               │
│                         │
│ [이름 입력]             │
│                         │
│ [전화번호]              │
│ 010-XXXX-XXXX          │
│                         │
│ 참여 경로 (자동 감지)   │
│ 📍 QR 코드 스캔         │
│                         │
│ ☑ 개인정보 수집 동의    │
│   (필수) [자세히]       │
│                         │
│ ─────────────────────   │
│                         │
│ 💡 매장 방문 고객은     │
│    당첨 확률 UP! 🎁    │
│                         │
├─────────────────────────┤
│ [    참여하기    ]      │
└─────────────────────────┘

인터랙션

자동 입력: 참여 경로 자동 감지 (QR/SNS/TV)
실시간 검증: 전화번호 형식 체크
중복 체크: 제출 시 중복 참여 확인
에러 처리:
- 중복: "이미 참여하셨습니다 (참여일시 표시)"
- 기타: 명확한 오류 메시지

접근성

큰 터치 영역 (44x44px 이상)
명확한 라벨과 에러 메시지
고대비 색상

19-참여완료

개요

목적: 참여 완료 확인 및 응모번호 발급
관련 유저스토리: UFR-PART-010
비즈니스 중요도: Must (M/8)

주요 기능

응모번호 자동 발급
당첨 발표일 안내
매장 정보 표시

UI 구성요소

모바일

┌─────────────────────────┐
│ ✅ 참여 완료!           │
├─────────────────────────┤
│                         │
│        🎉 🎁 🎉        │
│                         │
│  이벤트 참여가 완료      │
│  되었습니다!            │
│                         │
│ ┌─────────────────────┐│
│ │ 응모번호             ││
│ │                     ││
│ │    A-12345678       ││
│ │                     ││
│ │ [📋 복사하기]       ││
│ └─────────────────────┘│
│                         │
│ 당첨 발표일             │
│ 📅 2025-12-31          │
│                         │
│ 당첨 시 입력하신 전화번호│
│ 로 SMS/알림톡 발송됩니다│
│                         │
│ ─────────────────────   │
│                         │
│ 매장 정보               │
│ 📍 수원 왕갈비통닭      │
│ 🏪 경기도 수원시...     │
│ ☎️ 031-XXX-XXXX        │
│                         │
│ [매장 위치 보기]        │
│                         │
│ ─────────────────────   │
│                         │
│ 💬 친구에게 공유하기    │
│ [Instagram] [Kakao]     │
│                         │
└─────────────────────────┘

인터랙션

응모번호 복사: 클립보드 복사 + 토스트
위치 보기: 지도 앱 연동
공유하기: SNS 공유 기능

4.6 Analytics & Management Service

20-당첨자명단관리

개요

목적: 당첨자 명단 조회 및 경품 지급 관리
관련 유저스토리: UFR-PART-050
비즈니스 중요도: Must (M/5)

주요 기능

이벤트별 당첨자 목록
경품 지급 상태 업데이트
엑셀 다운로드

UI 구성요소

모바일

┌─────────────────────────┐
│ ← [뒤로] 당첨자 명단     │
├─────────────────────────┤
│ 이벤트: 연말 대박 이벤트 │
│ 당첨인원: 100명         │
├─────────────────────────┤
│                         │
│ 검색 [🔍 이름/전화번호] │
│                         │
│ 지급 상태 필터           │
│ [전체] [미지급] [완료]  │
│                         │
│ ┌─────────────────────┐│
│ │ 김철수               ││
│ │ 010-1234-5678       ││
│ │ 응모: A-12345678    ││
│ │ 참여일: 2025-12-15  ││
│ │ 경로: QR코드         ││
│ │                     ││
│ │ ☐ 경품 지급 완료    ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ 이영희               ││
│ │ 010-2345-6789       ││
│ │ 응모: A-23456789    ││
│ │ 참여일: 2025-12-16  ││
│ │ 경로: Instagram     ││
│ │                     ││
│ │ ✅ 경품 지급 완료   ││
│ │ 지급일: 2025-12-20  ││
│ └─────────────────────┘│
│                         │
│ ... (스크롤)            │
│                         │
│ ─────────────────────   │
│                         │
│ [📊 참여자 전체 명단]   │
│ [📥 엑셀 다운로드]      │
│                         │
└─────────────────────────┘

인터랙션

검색: 실시간 검색 필터링
상태 필터: 미지급/완료 필터
체크박스: 지급 완료 시 체크, 자동으로 지급일 기록
다운로드: 엑셀 파일 다운로드

반응형

태블릿: 테이블 레이아웃
데스크톱: 페이지네이션 + 대량 작업

21-실시간대시보드

개요

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

주요 기능

총 참여자 수, 노출 수, 매출 증가율 실시간 표시
5분 간격 자동 업데이트
채널별 성과 요약

UI 구성요소

모바일

┌─────────────────────────┐
│ ☰ 실시간 대시보드    🔔 │
├─────────────────────────┤
│ 마지막 업데이트: 15:35  │
│ [🔄 새로고침]           │
├─────────────────────────┤
│                         │
│ 진행 중인 이벤트        │
│ "연말 대박 이벤트"      │
│ D-5 (2025-12-31까지)   │
│                         │
│ ┌─────────────────────┐│
│ │ 총 참여자            ││
│ │ 1,234명 👥          ││
│ │ +45 (오늘)          ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ 총 노출 수           ││
│ │ 15,678회 👁️        ││
│ │ +230 (최근 1시간)   ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ 매출 증가율          ││
│ │ +42% 💰            ││
│ │ (이벤트 전 대비)    ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ 예상 ROI             ││
│ │ 245% 📈            ││
│ │ (투자 대비 수익)    ││
│ └─────────────────────┘│
│                         │
│ 채널별 참여 현황        │
│ ┌───────────────────┐ │
│ │ QR코드      45%   │ │
│ │ Instagram   30%   │ │
│ │ 우리동네TV  15%   │ │
│ │ Naver Blog  10%   │ │
│ └───────────────────┘ │
│                         │
│ [📊 상세 분석 보기]     │
│                         │
├─────────────────────────┤
│ [홈][이벤트][분석][MY]  │
└─────────────────────────┘

인터랙션

자동 새로고침: 5분 간격
수동 새로고침: 버튼 탭
상세 보기: 각 지표 탭 시 상세 분석 화면으로 이동
푸시 알림: 주요 이벤트 발생 시 (목표 달성 등)

성능

데이터 로딩: 5분 간격 자동 업데이트
캐싱으로 빠른 초기 로딩

반응형

태블릿: 2x2 그리드
데스크톱: 대시보드 전체 한눈에 표시

22-채널별성과분석

개요

목적: 채널별 노출 수, 참여율, 전환율 비교
관련 유저스토리: UFR-ANAL-020
비즈니스 중요도: Must (M/13)

주요 기능

채널별 성과 지표
비교 분석 시각화
가장 효과적인 채널 강조

UI 구성요소

모바일

┌─────────────────────────┐
│ ← [뒤로] 채널별 성과분석 │
├─────────────────────────┤
│                         │
│ 📊 채널별 성과 비교     │
│                         │
│ 기간: 2025-12-01~현재   │
│ [기간 선택 ▼]           │
│                         │
│ 종합 순위               │
│ 🥇 QR코드 (가장 효과적) │
│ 🥈 Instagram           │
│ 🥉 우리동네TV           │
│                         │
│ ┌─────────────────────┐│
│ │ QR코드               ││
│ │ ─────────────────── ││
│ │ 노출: 5,678회        ││
│ │ 참여: 556명 (9.8%)  ││
│ │ 전환: 223명 (40%)   ││
│ │ CPA: 180원          ││
│ │                     ││
│ │ [상세 보기 >]       ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ Instagram           ││
│ │ ─────────────────── ││
│ │ 노출: 4,523회        ││
│ │ 참여: 370명 (8.2%)  ││
│ │ 전환: 148명 (40%)   ││
│ │ CPA: 270원          ││
│ │                     ││
│ │ [상세 보기 >]       ││
│ └─────────────────────┘│
│                         │
│ ... (스크롤)            │
│                         │
│ ─────────────────────   │
│                         │
│ 비교 차트 (막대 그래프)  │
│ ┌───────────────────┐ │
│ │ QR    ▓▓▓▓▓▓▓▓▓▓│ │
│ │ Insta ▓▓▓▓▓▓▓    │ │
│ │ TV    ▓▓▓▓       │ │
│ │ Blog  ▓▓         │ │
│ └───────────────────┘ │
│                         │
│ 💡 인사이트:            │
│ QR코드가 가장 높은      │
│ 전환율을 보입니다.      │
│ 오프라인 홍보를 강화하면│
│ 효과가 더 좋을 것 같아요│
│                         │
└─────────────────────────┘

인터랙션

기간 선택: 드롭다운으로 기간 변경
상세 보기: 채널별 상세 분석 페이지
차트 인터랙션: 탭하여 수치 확인

반응형

태블릿: 2열 레이아웃
데스크톱: 차트 확대 + 비교 테이블

23-ROI분석

개요

목적: 투자 대비 효과 자동 계산
관련 유저스토리: UFR-ANAL-030
비즈니스 중요도: Must (M/13)

주요 기능

총 비용 자동 집계
수익 데이터 수집 (POS 연동)
ROI 자동 계산 및 시각화

UI 구성요소

모바일

┌─────────────────────────┐
│ ← [뒤로] ROI 분석       │
├─────────────────────────┤
│                         │
│ 💰 투자 대비 효과       │
│                         │
│ ┌─────────────────────┐│
│ │ ROI                  ││
│ │                     ││
│ │     245%            ││
│ │                     ││
│ │ 투자한 금액 대비     ││
│ │ 2.45배 수익!        ││
│ └─────────────────────┘│
│                         │
│ 비용 내역               │
│ ┌─────────────────────┐│
│ │ 경품 비용            ││
│ │ 100,000원           ││
│ │                     ││
│ │ 플랫폼 이용료        ││
│ │ • 우리동네TV: 무료  ││
│ │ • 지니TV: 무료      ││
│ │ • SNS: 무료         ││
│ │                     ││
│ │ ────────────────── ││
│ │ 총 투자: 100,000원  ││
│ └─────────────────────┘│
│                         │
│ 수익 내역               │
│ ┌─────────────────────┐│
│ │ 매출 증가액          ││
│ │ 180,000원           ││
│ │ (이벤트 기간 vs 평균)││
│ │                     ││
│ │ 신규 고객 가치       ││
│ │ 65,000원            ││
│ │ (78명 × 예상 LTV)   ││
│ │                     ││
│ │ ────────────────── ││
│ │ 총 수익: 245,000원  ││
│ └─────────────────────┘│
│                         │
│ 손익 분기점             │
│ ✅ 달성 (3일차)         │
│                         │
│ 회수 기간 예상          │
│ 📅 약 1.5개월          │
│                         │
│ ─────────────────────   │
│                         │
│ ROI 추이 그래프         │
│ ┌───────────────────┐ │
│ │       ╱╲           │ │
│ │     ╱    ╲         │ │
│ │   ╱        ╲       │ │
│ └───────────────────┘ │
│ 12/1  12/10  12/20    │
│                         │
└─────────────────────────┘

인터랙션

비용/수익 항목 탭 시 상세 내역
그래프 인터랙션으로 일별 ROI 확인

성능

POS 데이터 5분 간격 동기화
ROI 실시간 재계산

24-분석리포트

개요

목적: 종합 분석 리포트 PDF 생성
관련 유저스토리: UFR-ANAL-040
비즈니스 중요도: Should (S/8)

주요 기능

전체 성과 요약
그래프 및 차트 시각화
업종 평균 벤치마킹
PDF 다운로드 및 이메일 발송

UI 구성요소

모바일

┌─────────────────────────┐
│ ← [뒤로] 분석 리포트     │
├─────────────────────────┤
│                         │
│ 📊 종합 분석 리포트     │
│                         │
│ 이벤트: 연말 대박 이벤트 │
│ 기간: 2025-12-01~12-31 │
│                         │
│ ┌─────────────────────┐│
│ │ 리포트 미리보기      ││
│ │                     ││
│ │ [PDF 썸네일 이미지]  ││
│ │                     ││
│ │ 10페이지             ││
│ │ 5.2MB               ││
│ └─────────────────────┘│
│                         │
│ 포함 내용               │
│ ✅ 이벤트 개요          │
│ ✅ 참여 통계            │
│ ✅ 노출 통계            │
│ ✅ 매출 분석            │
│ ✅ ROI 분석             │
│ ✅ 채널별 성과 비교     │
│ ✅ 업종 평균 벤치마킹   │
│ ✅ 그래프 시각화        │
│                         │
│ [📥 PDF 다운로드]       │
│ [✉️ 이메일로 받기]      │
│                         │
│ ─────────────────────   │
│                         │
│ 생성 이력               │
│ • 2025-12-31 16:00     │
│   [다운로드]           │
│                         │
└─────────────────────────┘

인터랙션

PDF 생성: 데이터 집계 → 그래프 생성 → PDF 레이아웃 → 파일 생성 (30초 이내)
이메일 발송: 등록된 이메일로 자동 발송
미리보기: 썸네일 탭 시 전체 화면 미리보기

성능

리포트 생성: 30초 이내
PDF 파일 크기 최적화 (<10MB)

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

5.1 네비게이션 패턴

바텀 네비게이션 (소상공인용)

┌───────────────────────────────┐
│ [홈] [이벤트] [분석] [MY]     │
└───────────────────────────────┘

홈: 21-실시간대시보드
이벤트: 이벤트 목록 + [+ 새 이벤트] FAB
분석: 22-채널별성과분석
MY: 매장정보, 설정, 로그아웃

특징:

4개 주요 섹션
현재 선택된 탭 강조 (아이콘 + 라벨)
고정 위치 (항상 표시)

상단 앱바

┌─────────────────────────────┐
│ [←] 화면 제목        [액션] │
└─────────────────────────────┘

패턴:

하위 화면: 뒤로가기 버튼
최상위 화면: 메뉴 버튼 (☰)
컨텍스트별 액션 (저장, 공유, 편집 등)

마법사 (Wizard) 패턴

이벤트 기획 및 콘텐츠 생성 단계에서 사용:

┌─────────────────────────────┐
│ 단계 3/6: 경품 선택          │
│ ━━━━━━━━━━━━━━━━━━━━━━━━━ │
│                             │
│ [콘텐츠]                    │
│                             │
│ [← 이전]       [다음 →]     │
└─────────────────────────────┘

특징:

진행률 표시
이전/다음 버튼
중간 저장 가능

5.2 전환 애니메이션

화면 전환

앞으로 이동: 슬라이드 인 (우→좌)
뒤로 이동: 슬라이드 아웃 (좌→우)
바텀 네비게이션: 페이드 전환
모달/바텀 시트: 슬라이드 업

요소 전환

리스트 아이템: 페이드 인 (순차적)
카드 선택: 스케일 + 하이라이트
로딩: 스켈레톤 스크린 → 실제 콘텐츠

5.3 제스처

스와이프:
- 좌우: 이미지 갤러리, 탭 전환
- 아래: 바텀 시트 닫기, 당겨서 새로고침
롱프레스: 툴팁 표시, 컨텍스트 메뉴
핀치 줌: 이미지 확대/축소

6. 반응형 설계 전략

6.1 브레이크포인트

디바이스	해상도	레이아웃	주요 변경사항
Mobile	320px~767px	단일 컬럼	세로 스택, 바텀 네비게이션
Tablet	768px~1023px	2컬럼	사이드 패널, 그리드 레이아웃
Desktop	1024px+	다중 컬럼	대시보드 전체 표시, 사이드바

6.2 Mobile First 적용

우선순위 정의

1순위 (모바일):

핵심 액션 (이벤트 생성, 참여, 승인)
실시간 지표 (참여자 수, ROI)
주요 알림

2순위 (태블릿):

상세 통계
비교 분석
추가 설정 옵션

3순위 (데스크톱):

전체 대시보드
벤치마킹 데이터
고급 필터

점진적 향상 예시

대시보드 화면:

Mobile (320px):

┌─────────┐
│ 참여자  │
│ 1,234명 │
├─────────┤
│ 노출수  │
│ 15,678회│
├─────────┤
│ 매출증가│
│ +42%   │
├─────────┤
│ ROI    │
│ 245%   │
└─────────┘

Tablet (768px):

┌─────────┬─────────┐
│ 참여자  │ 노출수  │
│ 1,234명 │15,678회│
├─────────┼─────────┤
│ 매출증가│ ROI    │
│ +42%   │ 245%   │
├─────────┴─────────┤
│ 채널별 성과 차트   │
└───────────────────┘

Desktop (1024px+):

┌──────────────────────────────────┐
│ ┌────────┬────────┬────────────┐ │
│ │참여자  │노출수  │매출 +42%  │ │
│ │1,234명 │15,678회│ROI 245%  │ │
│ └────────┴────────┴────────────┘ │
│                                  │
│ ┌────────────────────────────┐  │
│ │ 채널별 성과 상세 차트       │  │
│ │ [대형 그래프]              │  │
│ └────────────────────────────┘  │
│                                  │
│ ┌────────────┬────────────────┐ │
│ │진행중 이벤트│ 최근 활동      │ │
│ └────────────┴────────────────┘ │
└──────────────────────────────────┘

6.3 터치 타겟 최적화

최소 크기: 44x44px (Apple HIG, Material Design 권장)

적용 예시:

버튼: 48dp 높이
체크박스/라디오: 44x44px 터치 영역
리스트 아이템: 56dp 높이
FAB: 56x56dp

7. 접근성 보장 방안

7.1 WCAG 2.1 AA 준수

색상 대비

일반 텍스트: 최소 4.5:1
대형 텍스트: 최소 3:1
UI 컴포넌트: 최소 3:1

예시:

주요 버튼: 진한 파란색 (#0066CC) on 흰색 (6.3:1) ✅
경고 메시지: 빨간색 (#CC0000) on 흰색 (5.8:1) ✅

키보드 네비게이션

Tab 순서 논리적 설정
포커스 인디케이터 명확히 표시
모든 인터랙티브 요소 키보드 접근 가능

스크린 리더 지원

의미 있는 대체 텍스트 (alt text)
ARIA 레이블 적절히 사용
동적 콘텐츠 변경 시 aria-live 사용

예시:

<button aria-label="이벤트 생성하기">
  + 새 이벤트
</button>

<div role="alert" aria-live="polite">
  AI가 분석 중입니다...
</div>

7.2 접근성 체크리스트

모든 이미지에 대체 텍스트
폼 요소에 명확한 라벨
에러 메시지 명확하고 구체적
색상만으로 정보 전달하지 않음
터치 타겟 최소 44x44px
자동 재생 영상/음악 없음 (또는 컨트롤 제공)
타임아웃 있는 작업에 충분한 시간 제공

8. 성능 최적화 방안

8.1 로딩 전략

초기 로딩

Critical CSS: 인라인 삽입 (above-the-fold)
코드 스플리팅: 라우트별 번들 분리
이미지 최적화: WebP 포맷, 반응형 이미지

목표:

First Contentful Paint (FCP): <1.8초
Largest Contentful Paint (LCP): <2.5초
Time to Interactive (TTI): <3.8초

Lazy Loading

이미지: Intersection Observer 사용
컴포넌트: React.lazy() 또는 동적 import
데이터: 무한 스크롤 페이지네이션

8.2 AI 처리 피드백

AI 작업은 시간이 걸리므로 명확한 피드백 필수:

패턴:

즉각적 피드백: "AI가 분석 시작했습니다"
진행률 표시: 프로그레스 바 + 예상 소요 시간
백그라운드 처리: 다른 작업 가능
완료 알림: 푸시 알림 + 인앱 알림

예시:

🤖 AI가 이미지 생성중...
▓▓▓▓▓░░░░░ 50%
예상 소요: 1분 30초 남음

✅ 백그라운드에서 계속 진행됩니다.
   완료되면 알려드릴게요!

8.3 캐싱 전략

데이터 유형	캐싱 전략	갱신 주기
정적 자산 (이미지, CSS, JS)	Service Worker	앱 업데이트 시
트렌드 분석 결과	Redis	1시간
경품 추천	Redis	5분
실시간 대시보드	클라이언트 메모리	5분
사용자 정보	LocalStorage	세션 유지

8.4 성능 목표

기능	성능 목표	측정 방법
이벤트 기획	10초 이내	AI 처리 시간 합계
콘텐츠 생성	5-8분 이내	병렬 처리 시간
배포	1분 이내	채널별 병렬 배포
대시보드 로딩	1초 이내	LCP
화면 전환	300ms 이내	애니메이션 완료 시간

9. 변경 이력

버전	날짜	변경 내용	작성자
1.0	2025-01-20	초기 UI/UX 설계서 작성	박민지

부록

A. 디자인 시스템 가이드라인

색상 팔레트

Primary: #0066CC (KT Blue)
Secondary: #FF6B00 (KT Orange)
Success: #00C853
Warning: #FFA000
Error: #D32F2F
Background: #FFFFFF
Surface: #F5F5F5
Text Primary: #212121
Text Secondary: #757575

타이포그래피

H1: 24px/32px Bold (모바일)
H2: 20px/28px Bold
H3: 18px/24px SemiBold
Body: 16px/24px Regular
Caption: 14px/20px Regular
Small: 12px/16px Regular

간격 시스템

XXS: 4px
XS: 8px
S: 12px
M: 16px
L: 24px
XL: 32px
XXL: 48px

그림자

Elevation 1: 0 2px 4px rgba(0,0,0,0.1)
Elevation 2: 0 4px 8px rgba(0,0,0,0.12)
Elevation 3: 0 8px 16px rgba(0,0,0,0.14)

B. 컴포넌트 라이브러리

주요 재사용 컴포넌트:

Button (Primary, Secondary, Text, Outlined)
Card (기본, 선택 가능, 호버)
Input (Text, Number, Select, Checkbox, Radio)
ProgressBar (Determinate, Indeterminate)
BottomSheet
Dialog
Skeleton Screen
Empty State
Error State

C. 참조 자료

KT 사장님Easy: https://product.kt.com/wDic/soho/marketing.do?itemCode=sajangeasy
wwit.design 닷슬래시대시: https://wwit.design/2023/09/30/dotslashdash/
Material Design: https://material.io/design
Apple Human Interface Guidelines: https://developer.apple.com/design/human-interface-guidelines/
WCAG 2.1: https://www.w3.org/WAI/WCAG21/quickref/

문서 종료

81 KiB Raw Blame History Unescape Escape

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

문서 정보

1. 설계 개요

1.1 설계 목적

1.2 설계 원칙

Mobile First 디자인 철학

핵심 UX 원칙

1.3 참조 사이트 분석

KT 사장님Easy

wwit.design 닷슬래시대시

2. 프로토타입 화면 목록

2.1 화면 분류 및 우선순위

3. 화면 간 사용자 플로우

3.1 메인 플로우 (소상공인)

3.2 고객 플로우

3.3 네비게이션 구조

바텀 네비게이션 (소상공인용)

상단 앱바

4. 화면별 상세 설계

4.1 User Service

01-회원가입

02-매장정보등록

4.2 Event Planning Service

03-이벤트목적선택

04-AI트렌드분석결과

05-AI경품추천

06-AI참여방법설계

07-AI홍보문구생성

08-이벤트기획안승인

4.3 Content Generation Service

09-AI이미지생성

10-AI영상제작

11-SNS콘텐츠생성

12-QR포스터생성

13-콘텐츠편집

14-콘텐츠최종승인

4.4 Distribution Service

15-배포채널선택

16-배포진행상태

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

4.5 Participation Service (고객용)

18-이벤트참여

19-참여완료

4.6 Analytics & Management Service

20-당첨자명단관리

21-실시간대시보드

22-채널별성과분석

23-ROI분석

24-분석리포트

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

5.1 네비게이션 패턴

바텀 네비게이션 (소상공인용)

상단 앱바

마법사 (Wizard) 패턴

5.2 전환 애니메이션

화면 전환

요소 전환

5.3 제스처

6. 반응형 설계 전략

6.1 브레이크포인트

6.2 Mobile First 적용

우선순위 정의

점진적 향상 예시

6.3 터치 타겟 최적화

7. 접근성 보장 방안

7.1 WCAG 2.1 AA 준수

색상 대비

키보드 네비게이션

스크린 리더 지원

7.2 접근성 체크리스트

8. 성능 최적화 방안

8.1 로딩 전략

초기 로딩

Lazy Loading

8.2 AI 처리 피드백

8.3 캐싱 전략

8.4 성능 목표

9. 변경 이력

부록

81 KiB

Raw Blame History