2025-10-17 13:49:39 +09:00

71 KiB
Raw Blame History

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

1. 개요

1.1 설계 목적

본 문서는 KT AI 기반 소상공인 이벤트 자동 생성 서비스의 UI/UX 설계를 정의합니다. 사용자 친화적이고 직관적인 인터페이스를 통해 소상공인이 복잡한 이벤트 기획, 콘텐츠 생성, 다중 채널 배포를 쉽고 빠르게 수행할 수 있도록 설계되었습니다.

1.2 참고 사이트 분석

참고: KT 사장이지 플랫폼 (https://product.kt.com/wDic/soho/marketing.do?itemCode=sajangeasy)

주요 디자인 특징:

  • 클린한 카드 기반 레이아웃
  • KT 브랜드 컬러 (빨강/검정/흰색) 활용
  • 명확한 섹션 구분 및 시각적 계층 구조
  • 큰 CTA 버튼과 직관적인 아이콘
  • 실시간 미리보기 및 진행 상태 표시

1.3 화면 구성

총 15개의 화면으로 구성되며, 각 화면은 유저스토리와 1:1 또는 1:N 매핑됩니다.


2. 디자인 원칙

2.1 사용자 중심 설계

  • 간결함: 최소한의 클릭으로 작업 완료
  • 명확함: 현재 위치와 다음 단계를 명확히 표시
  • 피드백: 모든 액션에 즉각적인 피드백 제공
  • AI 투명성: AI 처리 과정과 결과를 명확히 표시

2.2 시각적 디자인

  • 색상: KT 브랜드 컬러 기반 (Primary: #E60012, Secondary: #000000, Background: #FFFFFF)
  • 타이포그래피: 명확한 계층 구조 (Heading 1~3, Body, Caption)
  • 여백: 충분한 여백으로 가독성 확보
  • 아이콘: 직관적인 아이콘 사용

2.3 반응형 디자인

  • Desktop: 1920px 최적화 (주요 작업 환경)
  • Tablet: 768px - 1024px 지원 (조회 및 간단한 작업)
  • Mobile: 375px - 767px 지원 (조회 중심)

3. 공통 UI 컴포넌트

3.1 기본 컴포넌트

Button

  • Primary Button: 주요 액션 (배경: #E60012, 텍스트: #FFFFFF)
  • Secondary Button: 보조 액션 (배경: #000000, 텍스트: #FFFFFF)
  • Outline Button: 취소/뒤로가기 (테두리: #CCCCCC, 텍스트: #333333)
  • 크기: Large (48px), Medium (40px), Small (32px)

Input Fields

  • Text Input: 단일 텍스트 입력
  • Number Input: 숫자 입력 (예산, 인원)
  • Select Dropdown: 선택 옵션
  • Textarea: 긴 텍스트 입력
  • 상태: Default, Focus, Error, Disabled

Card

  • 그림자: Box-shadow (0 2px 8px rgba(0,0,0,0.1))
  • 모서리: Border-radius 8px
  • 패딩: 24px
  • 호버 효과: 그림자 확대

3.2 복합 컴포넌트

Header

  • 높이: 64px
  • 구성: 로고 + 메인 메뉴 + 사용자 정보
  • 고정: 스크롤 시 상단 고정

Sidebar

  • 너비: 240px (접힘 시 64px)
  • 구성: 아이콘 + 메뉴명
  • 활성 표시: 선택된 메뉴 강조

StepIndicator

  • 구성: 단계 번호 + 단계명 + 연결선
  • 상태: Completed (체크), Active (강조), Inactive (회색)

DataCard

  • 구성: 제목 + 큰 숫자 + 변화율 + 미니 차트
  • 크기: 280px × 160px

AIProcessing

  • 구성: 진행 바 + 진행률 (%) + 현재 단계 설명
  • 애니메이션: 진행 바 애니메이션 + 펄스 효과

4. 화면별 상세 설계

4.1 인증 및 온보딩

01-회원가입

관련 유저스토리: UFR-USER-010

레이아웃:

┌─────────────────────────────────────────┐
│            KT 로고                       │
│                                         │
│         회원가입                         │
│                                         │
│  ┌─────────────────────────────────┐   │
│  │  이름         [              ]  │   │
│  │  전화번호     [              ]  │   │
│  │  이메일       [              ]  │   │
│  │                                 │   │
│  │  [ KT 본인 인증하기 ]          │   │
│  │                                 │   │
│  │  [ 회원가입 ]                  │   │
│  └─────────────────────────────────┘   │
│                                         │
│     이미 계정이 있으신가요? [로그인]    │
└─────────────────────────────────────────┘

UI 컴포넌트:

  • Logo (KT 브랜드)
  • Heading: "회원가입"
  • Text Input: 이름, 전화번호, 이메일
  • Primary Button: "KT 본인 인증하기"
  • Primary Button: "회원가입"
  • Text Link: "로그인"

주요 인터랙션:

  1. 입력 필드 실시간 유효성 검사
    • 이름: 2자 이상
    • 전화번호: 010-XXXX-XXXX 형식
    • 이메일: example@domain.com 형식
  2. "KT 본인 인증하기" 클릭 → KT 인증 팝업
  3. 인증 완료 후 "회원가입" 버튼 활성화
  4. 회원가입 성공 → 매장정보등록 화면으로 이동

에러 처리:

  • 입력 오류 시 Input 하단에 빨간색 에러 메시지
  • 중복 가입 시 Toast 알림: "이미 가입된 전화번호입니다"

02-매장정보등록

관련 유저스토리: UFR-USER-020

레이아웃:

┌─────────────────────────────────────────┐
│            Step 2/2                     │
│         매장 정보 등록                   │
│                                         │
│  ┌─────────────────────────────────┐   │
│  │  매장명       [              ]  │   │
│  │  업종         [  ▼ 선택     ]  │   │
│  │  주소         [   🔍 검색    ]  │   │
│  │  영업시간                       │   │
│  │    월-금  [09:00] ~ [18:00]   │   │
│  │    토-일  [10:00] ~ [17:00]   │   │
│  │                                 │   │
│  │  사업자번호   [   -  -     ]   │   │
│  │  [ 사업자번호 검증하기 ]       │   │
│  │                                 │   │
│  │  [이전]        [등록 완료]     │   │
│  └─────────────────────────────────┘   │
│                                         │
│  💡 첫 1회 무료 체험 쿠폰을 드립니다!  │
└─────────────────────────────────────────┘

UI 컴포넌트:

  • StepIndicator: "Step 2/2"
  • Text Input: 매장명, 사업자번호
  • Select Dropdown: 업종 (음식점, 카페, 소매업 등)
  • Search Button: 주소 검색 (도로명 주소 API)
  • Time Picker: 영업시간 (요일별)
  • Secondary Button: "사업자번호 검증하기"
  • Outline Button: "이전"
  • Primary Button: "등록 완료"
  • Info Box: 무료 체험 쿠폰 안내

주요 인터랙션:

  1. 주소 검색 버튼 클릭 → 주소 검색 팝업
  2. 사업자번호 입력 후 "검증하기" 클릭 → 검증 API 호출
    • 성공: 초록색 체크 아이콘 표시
    • 실패: 빨간색 에러 메시지 표시
  3. "등록 완료" 클릭 → 무료 체험 쿠폰 발급 + 대시보드 이동

검증 처리:

  • 사업자번호 유효성: XXX-XX-XXXXX 형식
  • 휴폐업 여부 확인
  • 매장명과 사업자 정보 일치 확인

4.2 메인 화면

03-대시보드

관련 유저스토리: 진행 중인 이벤트 현황, UFR-ANAL-010 일부

레이아웃:

┌─────────────────────────────────────────────────────────┐
│ [로고] 대시보드 | 이벤트 관리 | 참여자 | 분석        [👤] │
├─────────────────────────────────────────────────────────┤
│                                                         │
│  안녕하세요, [매장명] 사장님! 👋                        │
│                                                         │
│  ┌───────────────┐ ┌───────────────┐ ┌──────────────┐ │
│  │ 진행중        │ │ 총 참여자     │ │ 이번달 ROI   │ │
│  │   3건        │ │   1,247명    │ │   245%       │ │
│  │ 📊 +2        │ │ 📈 +120      │ │ 💰 ↑15%     │ │
│  └───────────────┘ └───────────────┘ └──────────────┘ │
│                                                         │
│  빠른 실행                                              │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐              │
│  │ 🎯      │ │ 📊       │ │ 💡       │              │
│  │ 새 이벤트 │ │ 실시간   │ │ AI 제안  │              │
│  │ 만들기   │ │ 분석     │ │ 보기     │              │
│  └──────────┘ └──────────┘ └──────────┘              │
│                                                         │
│  진행 중인 이벤트                                       │
│  ┌─────────────────────────────────────────────────┐  │
│  │ 🎉 여름 할인 이벤트                             │  │
│  │ 상태: 배포 완료 | 참여자: 523명 | D-5          │  │
│  │ ────────────────────■───── 85%                 │  │
│  │ [상세보기] [참여자관리] [실시간분석]           │  │
│  └─────────────────────────────────────────────────┘  │
│                                                         │
│  최근 완료된 이벤트                                     │
│  • 봄맞이 이벤트 (5/15 종료) - ROI: 180%               │
│  • 신메뉴 출시 이벤트 (4/30 종료) - ROI: 220%          │
│                                                         │
└─────────────────────────────────────────────────────────┘

UI 컴포넌트:

  • Header (고정)
  • Greeting: "안녕하세요, [매장명] 사장님!"
  • DataCard × 3: 진행중 이벤트, 총 참여자, 이번달 ROI
  • QuickAction Card × 3: 새 이벤트, 실시간 분석, AI 제안
  • EventCard: 진행 중인 이벤트 (제목, 상태, 진행률, 액션 버튼)
  • List: 최근 완료된 이벤트

주요 인터랙션:

  1. "새 이벤트 만들기" 클릭 → 이벤트목적선택 화면
  2. "실시간 분석" 클릭 → 실시간분석 화면
  3. "AI 제안 보기" 클릭 → AI개선제안 화면
  4. EventCard 클릭 → 해당 이벤트 상세 화면
  5. 5분마다 DataCard 자동 업데이트

4.3 이벤트 기획

04-이벤트목적선택

관련 유저스토리: UFR-PLAN-010

레이아웃:

┌─────────────────────────────────────────────────────────┐
│  ← 대시보드                                    Step 1/3  │
├─────────────────────────────────────────────────────────┤
│                                                         │
│     이벤트 목적을 선택해주세요                          │
│     선택한 목적에 맞춰 AI가 최적의 이벤트를 기획합니다  │
│                                                         │
│  ┌──────────────────┐ ┌──────────────────┐            │
│  │  🎯 신규고객 유치 │ │  🔄 재방문 유도  │            │
│  │                  │ │                  │            │
│  │  새로운 고객을    │ │  기존 고객의     │            │
│  │  확보합니다       │ │  재방문을 촉진   │            │
│  │                  │ │                  │            │
│  │  예상 참여율 8%  │ │  예상 참여율 15% │            │
│  └──────────────────┘ └──────────────────┘            │
│                                                         │
│  ┌──────────────────┐ ┌──────────────────┐            │
│  │  💰 매출 증대    │ │  📢 인지도 향상  │            │
│  │                  │ │                  │            │
│  │  단기 매출을      │ │  브랜드 인지도를 │            │
│  │  향상시킵니다     │ │  높입니다        │            │
│  │                  │ │                  │            │
│  │  예상 참여율 10% │ │  예상 참여율 12% │            │
│  └──────────────────┘ └──────────────────┘            │
│                                                         │
│                           [다음 단계]                   │
└─────────────────────────────────────────────────────────┘

UI 컴포넌트:

  • Back Button: "← 대시보드"
  • StepIndicator: "Step 1/3"
  • Heading: "이벤트 목적을 선택해주세요"
  • SelectionCard × 4: 각 목적별 카드
    • 아이콘 + 제목 + 설명 + 예상 참여율
    • 선택 시 테두리 강조 (Primary 색상)
  • Primary Button: "다음 단계" (선택 전 비활성화)

주요 인터랙션:

  1. 카드 클릭 → 선택 상태 (단일 선택)
  2. 호버 시 카드 확대 애니메이션
  3. 선택 후 "다음 단계" 버튼 활성화
  4. "다음 단계" 클릭 → AI기획진행 화면 + AI 분석 시작

툴팁:

  • 각 목적 카드에 "?" 아이콘 → 상세 설명 툴팁

05-AI기획진행

관련 유저스토리: UFR-PLAN-020, 030, 040, 050

레이아웃:

┌─────────────────────────────────────────────────────────┐
│  ← 이전                                       Step 2/3  │
├─────────────────────────────────────────────────────────┤
│                                                         │
│     AI가 이벤트를 기획하고 있습니다 🤖                  │
│                                                         │
│  ┌─────────────────────────────────────────────────┐  │
│  │  ████████████████████░░░░░░░░░░  65%           │  │
│  └─────────────────────────────────────────────────┘  │
│                                                         │
│  ┌─────────────────────────────────────────────────┐  │
│  │  ✅ 업종 트렌드 분석 완료                       │  │
│  │     → 카페 업종, 강남 지역, 여름 시즌 분석     │  │
│  │                                                 │  │
│  │  ⏳ 최적 경품 추천 중...                       │  │
│  │     💡 예산 300,000원 기준 분석 중            │  │
│  │                                                 │  │
│  │  ⏸️  참여 방법 설계 대기 중                   │  │
│  │                                                 │  │
│  │  ⏸️  홍보 문구 생성 대기 중                   │  │
│  └─────────────────────────────────────────────────┘  │
│                                                         │
│  예상 소요 시간: 약 10초                               │
│                                                         │
└─────────────────────────────────────────────────────────┘

UI 컴포넌트:

  • Back Button: "← 이전"
  • StepIndicator: "Step 2/3"
  • Heading: "AI가 이벤트를 기획하고 있습니다 🤖"
  • Progress Bar: 전체 진행률 (0% → 100%)
  • StatusList: 각 단계별 진행 상태
    • 완료: 초록색 + 결과 요약
    • 진행 중: 노란색 + 애니메이션
    • ⏸️ 대기 중: 회색
  • Text: 예상 소요 시간

주요 인터랙션:

  1. 자동 진행 (사용자 액션 없음)
  2. 각 단계 완료 시:
    • 진행 바 업데이트 (25% 씩 증가)
    • 상태 아이콘 변경
    • 결과 요약 표시
  3. 전체 완료 (100%) 시 → 자동으로 기획안검토 화면 이동

에러 처리:

  • AI API 오류 시: "잠시 후 다시 시도해주세요" Toast + 재시도 버튼

성능 요구사항:

  • 전체 기획 과정 10초 이내 완료

06-기획안검토

관련 유저스토리: UFR-PLAN-060

레이아웃:

┌─────────────────────────────────────────────────────────┐
│  ← 이전                                       Step 3/3  │
├─────────────────────────────────────────────────────────┤
│                                                         │
│     완성된 기획안을 검토해주세요                        │
│                                                         │
│  ┌─────────────────────────────────────────────────┐  │
│  │  📋 이벤트 개요                                 │  │
│  │  • 목적: 신규고객 유치                          │  │
│  │  • 예상 기간: 7일                               │  │
│  │  • 예상 예산: 300,000원                         │  │
│  └─────────────────────────────────────────────────┘  │
│                                                         │
│  ┌─────────────────────────────────────────────────┐  │
│  │  🎁 선택된 경품                                 │  │
│  │  • 스타벅스 아메리카노 Tall (30명)              │  │
│  │  • 예상 매력도: ⭐⭐⭐⭐                       │  │
│  │  [경품 변경하기]                                │  │
│  └─────────────────────────────────────────────────┘  │
│                                                         │
│  ┌─────────────────────────────────────────────────┐  │
│  │  🎯 참여 방법                                   │  │
│  │  • QR 코드 스캔 후 정보 입력                    │  │
│  │  • 예상 참여율: 8%                              │  │
│  │  [참여 방법 변경하기]                           │  │
│  └─────────────────────────────────────────────────┘  │
│                                                         │
│  ┌─────────────────────────────────────────────────┐  │
│  │  📢 홍보 문구                                   │  │
│  │  "여름맞이 특별 이벤트! 아메리카노 받고 시원하게│  │
│  │   여름나기 ☕🌊 지금 바로 참여하세요!"         │  │
│  │  #여름이벤트 #카페 #강남맛집                    │  │
│  │  [홍보 문구 변경하기]                           │  │
│  └─────────────────────────────────────────────────┘  │
│                                                         │
│  ┌─────────────────────────────────────────────────┐  │
│  │  📊 예상 효과                                   │  │
│  │  • 예상 참여자: 약 200명                        │  │
│  │  • 예상 ROI: 150%                               │  │
│  └─────────────────────────────────────────────────┘  │
│                                                         │
│                   [수정하기]  [승인하고 다음]          │
└─────────────────────────────────────────────────────────┘

UI 컴포넌트:

  • Back Button: "← 이전"
  • StepIndicator: "Step 3/3"
  • Summary Card × 5: 이벤트 개요, 경품, 참여방법, 홍보문구, 예상효과
    • 각 카드에 [변경하기] 버튼
  • Outline Button: "수정하기" (전체 수정)
  • Primary Button: "승인하고 다음"

주요 인터랙션:

  1. [변경하기] 버튼 클릭 → 해당 섹션 수정 모달
  2. "수정하기" 클릭 → 이전 단계로 돌아가기
  3. "승인하고 다음" 클릭 → 기획안 저장 + 콘텐츠생성진행 화면

수정 모달:

  • 경품 변경: AI 추천 Top 5 중 재선택
  • 참여 방법 변경: 3가지 옵션 중 재선택
  • 홍보 문구 변경: 5개 버전 중 재선택 또는 직접 편집

4.4 콘텐츠 생성

07-콘텐츠생성진행

관련 유저스토리: UFR-CONT-010, 020, 030, 040

레이아웃:

┌─────────────────────────────────────────────────────────┐
│  ← 대시보드                                    Step 1/3  │
├─────────────────────────────────────────────────────────┤
│                                                         │
│     AI가 콘텐츠를 생성하고 있습니다 🎨                  │
│                                                         │
│  ┌─────────────────────────────────────────────────┐  │
│  │  ██████████████████░░░░░░░░  70%                │  │
│  └─────────────────────────────────────────────────┘  │
│                                                         │
│  ┌──────────────┐ ┌──────────────┐ ┌──────────────┐  │
│  │  🖼️ 이미지   │ │  🎬 영상     │ │  📱 SNS      │  │
│  │              │ │              │ │              │  │
│  │  ✅ 심플     │ │  ⏳ 제작 중  │ │  ⏸️ 대기    │  │
│  │  ✅ 화려     │ │  15초/15초   │ │              │  │
│  │  ✅ 트렌디   │ │              │ │              │  │
│  └──────────────┘ └──────────────┘ └──────────────┘  │
│                                                         │
│  ┌──────────────────────────────────────────────┐     │
│  │  📄 QR 포스터                                │     │
│  │  ⏸️ 대기 중                                 │     │
│  └──────────────────────────────────────────────┘     │
│                                                         │
│  예상 소요 시간: 약 3분                                │
│                                                         │
└─────────────────────────────────────────────────────────┘

UI 컴포넌트:

  • Back Button
  • StepIndicator: "Step 1/3"
  • Progress Bar: 전체 진행률
  • ContentCard × 4: 이미지(3종), 영상, SNS, QR포스터
    • 상태: 완료, 진행 중, ⏸️ 대기 중
    • 진행 중일 때: 미니 프로그레스 바
  • Text: 예상 소요 시간

주요 인터랙션:

  1. 자동 진행 (병렬 처리)
  2. 각 콘텐츠 완료 시:
    • 썸네일 미리보기 표시
    • 상태 업데이트
  3. 전체 완료 시 → 콘텐츠편집 화면 (자동 또는 [다음] 버튼)

성능 요구사항:

  • 전체 콘텐츠 생성 3분 이내 완료

08-콘텐츠편집

관련 유저스토리: UFR-CONT-050

레이아웃:

┌─────────────────────────────────────────────────────────┐
│  ← 이전                                       Step 2/3  │
├─────────────────────────────────────────────────────────┤
│                                                         │
│  ┌─────────────┐  ┌──────────────────────────────┐    │
│  │ 이미지 - 심플│  │  [미리보기 영역]             │    │
│  │             │  │                              │    │
│  │ 이미지 - 화려│  │                              │    │
│  │             │  │      생성된 콘텐츠           │    │
│  │ 이미지-트렌디│  │      미리보기                │    │
│  │             │  │                              │    │
│  │ 영상 15초   │  │                              │    │
│  │             │  └──────────────────────────────┘    │
│  │ SNS-Insta   │                                       │
│  │             │  ┌──────────────────────────────┐    │
│  │ SNS-Naver   │  │  편집 도구                   │    │
│  │             │  │  ┌─────┐ ┌─────┐ ┌─────┐  │    │
│  │ SNS-Kakao   │  │  │텍스트│ │색상 │ │레이아웃│  │    │
│  │             │  │  └─────┘ └─────┘ └─────┘  │    │
│  │ QR 포스터   │  │                             │    │
│  └─────────────┘  │  텍스트: [_______________]  │    │
│                    │  색상: ⬜🔴🔵⚫          │    │
│                    │  크기: [━━━━●────] 14px   │    │
│                    │                             │    │
│                    │  [원본으로 되돌리기]       │    │
│                    └──────────────────────────────┘    │
│                                                         │
│                          [건너뛰기]  [저장하고 다음]   │
└─────────────────────────────────────────────────────────┘

UI 컴포넌트:

  • Sidebar: 콘텐츠 목록 (선택 가능)
  • Preview Area: 선택한 콘텐츠 미리보기
  • Edit Toolbar: 텍스트, 색상, 레이아웃 편집 도구
  • Button: "원본으로 되돌리기"
  • Outline Button: "건너뛰기"
  • Primary Button: "저장하고 다음"

주요 인터랙션:

  1. 사이드바에서 콘텐츠 선택 → 미리보기 영역에 표시
  2. 편집 도구로 실시간 수정 → 미리보기 즉시 반영
  3. "원본으로 되돌리기" → 수정사항 취소
  4. "저장하고 다음" → 수정사항 적용 + 콘텐츠승인 화면

편집 기능:

  • 텍스트: 내용, 폰트, 크기, 색상
  • 색상: 브랜드 컬러 변경
  • 레이아웃: 템플릿 변경

09-콘텐츠승인

관련 유저스토리: UFR-CONT-060

레이아웃:

┌─────────────────────────────────────────────────────────┐
│  ← 이전                                       Step 3/3  │
├─────────────────────────────────────────────────────────┤
│                                                         │
│     완성된 콘텐츠를 확인해주세요                        │
│                                                         │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐              │
│  │ [이미지1] │ │ [이미지2] │ │ [이미지3] │              │
│  │  심플     │ │  화려     │ │  트렌디   │              │
│  └──────────┘ └──────────┘ └──────────┘              │
│                                                         │
│  ┌──────────────────────────────────┐                 │
│  │  [영상 미리보기]                  │                 │
│  │  15초 영상                        │                 │
│  │  ▶️ 재생                         │                 │
│  └──────────────────────────────────┘                 │
│                                                         │
│  ┌─────────┐ ┌─────────┐ ┌─────────┐                │
│  │Instagram│ │Naver Blog│ │ Kakao  │                │
│  │[미리보기]│ │[미리보기]│ │[미리보기]│                │
│  └─────────┘ └─────────┘ └─────────┘                │
│                                                         │
│  ┌──────────────────────────────────┐                 │
│  │  QR 포스터 (A4)                   │                 │
│  │  [미리보기 및 다운로드]            │                 │
│  └──────────────────────────────────┘                 │
│                                                         │
│              [수정하기]  [승인하고 배포하기]           │
└─────────────────────────────────────────────────────────┘

UI 컴포넌트:

  • Gallery View: 이미지 3종 썸네일
  • Video Player: 영상 미리보기 (재생 버튼)
  • SNS Preview Card × 3: 플랫폼별 미리보기
  • Poster Preview: QR 포스터 미리보기
  • Outline Button: "수정하기"
  • Primary Button: "승인하고 배포하기"

주요 인터랙션:

  1. 이미지/영상 클릭 → 확대 모달
  2. SNS 미리보기 클릭 → 플랫폼별 게시물 미리보기
  3. "수정하기" → 콘텐츠편집 화면
  4. "승인하고 배포하기" → 콘텐츠 저장 + 배포채널설정 화면

다운로드 기능:

  • 각 콘텐츠 개별 다운로드
  • 전체 콘텐츠 일괄 다운로드 (ZIP)

4.5 배포 관리

10-배포채널설정

관련 유저스토리: UFR-DIST-010, 020, 030, 040, 050

레이아웃:

┌─────────────────────────────────────────────────────────┐
│  ← 대시보드                                    Step 1/2  │
├─────────────────────────────────────────────────────────┤
│                                                         │
│     배포할 채널을 선택하고 설정해주세요                 │
│                                                         │
│  ┌─────────────────────────────────────────────────┐  │
│  │  ☑️ 우리동네TV                                  │  │
│  │  반경: ◯ 500m  ● 1km                           │  │
│  │  시간대: [평일 저녁 6-9시 ▼]                   │  │
│  │  예상 노출: ~2,000명                            │  │
│  └─────────────────────────────────────────────────┘  │
│                                                         │
│  ┌─────────────────────────────────────────────────┐  │
│  │  ☑️ 링고비즈 (연결음)                           │  │
│  │  전화번호: 02-1234-5678 (자동)                  │  │
│  │  [연결음 미리듣기]                              │  │
│  └─────────────────────────────────────────────────┘  │
│                                                         │
│  ┌─────────────────────────────────────────────────┐  │
│  │  ☑️ 지니TV 광고                                 │  │
│  │  타겟 지역: [반경 3km ▼]                       │  │
│  │  노출 시간대: [저녁 7-11시 ▼]                  │  │
│  │  예산: [100,000원]                              │  │
│  │  예상 노출: ~1,500가구                          │  │
│  └─────────────────────────────────────────────────┘  │
│                                                         │
│  ┌─────────────────────────────────────────────────┐  │
│  │  ☑️ SNS 자동 포스팅                             │  │
│  │  ☑️ Instagram  ☑️ Naver Blog  ☑️ Kakao        │  │
│  │  예약 시간: [즉시 배포 ▼]                      │  │
│  └─────────────────────────────────────────────────┘  │
│                                                         │
│  ┌─────────────────────────────────────────────────┐  │
│  │  📄 오프라인 홍보 자료                          │  │
│  │  QR 포스터 다운로드 가능                        │  │
│  └─────────────────────────────────────────────────┘  │
│                                                         │
│                                   [배포 시작]           │
└─────────────────────────────────────────────────────────┘

UI 컴포넌트:

  • ChannelCard × 5: 각 배포 채널
    • Checkbox: 채널 선택/해제
    • 설정 옵션: 각 채널별 상세 설정
    • 예상 효과: 예상 노출 수
  • Primary Button: "배포 시작"

주요 인터랙션:

  1. Checkbox 선택/해제 → 해당 채널 설정 활성화/비활성화
  2. 각 채널별 상세 설정 입력
  3. "배포 시작" 클릭 → 확인 모달 → 배포 시작 + 배포현황 화면

검증:

  • 최소 1개 채널 선택 필수
  • 예산 범위 확인 (지니TV)
  • SNS 계정 연동 확인

11-배포현황

관련 유저스토리: UFR-DIST-060, 배포 진행 상태

레이아웃:

┌─────────────────────────────────────────────────────────┐
│  ← 대시보드                                    Step 2/2  │
├─────────────────────────────────────────────────────────┤
│                                                         │
│     배포 진행 상황                                      │
│                                                         │
│  ┌─────────────────────────────────────────────────┐  │
│  │  ████████████████████████████████  100%         │  │
│  └─────────────────────────────────────────────────┘  │
│                                                         │
│  ┌─────────────────────────────────────────────────┐  │
│  │  ✅ 우리동네TV                                  │  │
│  │  배포 ID: #UDTV-20250815-001                    │  │
│  │  송출 시작: 2025-08-15 18:00                    │  │
│  └─────────────────────────────────────────────────┘  │
│                                                         │
│  ┌─────────────────────────────────────────────────┐  │
│  │  ✅ 링고비즈                                    │  │
│  │  업데이트 완료: 2025-08-15 17:45                │  │
│  │  [연결음 확인하기]                              │  │
│  └─────────────────────────────────────────────────┘  │
│                                                         │
│  ┌─────────────────────────────────────────────────┐  │
│  │  ✅ 지니TV                                      │  │
│  │  광고 ID: #GTV-20250815-042                     │  │
│  │  노출 시작: 2025-08-15 19:00                    │  │
│  └─────────────────────────────────────────────────┘  │
│                                                         │
│  ┌─────────────────────────────────────────────────┐  │
│  │  ✅ SNS 포스팅                                  │  │
│  │  ✅ Instagram: [게시물 보기]                    │  │
│  │  ✅ Naver Blog: [게시물 보기]                   │  │
│  │  ✅ Kakao Channel: [게시물 보기]                │  │
│  └─────────────────────────────────────────────────┘  │
│                                                         │
│  ┌─────────────────────────────────────────────────┐  │
│  │  📄 오프라인 홍보 자료                          │  │
│  │  [QR 포스터 다운로드 (A4)]                     │  │
│  │  [QR 포스터 다운로드 (A3)]                     │  │
│  │  [전체 자료 다운로드 (ZIP)]                    │  │
│  └─────────────────────────────────────────────────┘  │
│                                                         │
│        [실시간 분석 보기]  [참여자 관리]  [완료]       │
└─────────────────────────────────────────────────────────┘

UI 컴포넌트:

  • Progress Bar: 전체 배포 진행률
  • StatusCard × 4: 각 채널별 배포 상태
    • 완료, 진행 중, 실패
    • 배포 ID, 시작 시각
    • 게시물 링크 (SNS)
  • Download Section: 오프라인 자료 다운로드
  • Action Buttons: 실시간 분석, 참여자 관리, 완료

주요 인터랙션:

  1. 실시간 업데이트 (10초 간격)
  2. 각 채널 상태 변경 시 Toast 알림
  3. 실패 시: 재시도 버튼 표시
  4. "실시간 분석 보기" → 실시간분석 화면
  5. "참여자 관리" → 참여자관리 화면
  6. "완료" → 대시보드

에러 처리:

  • 배포 실패 시: 재시도 버튼 (최대 3회)
  • 실패 사유 표시

성능 요구사항:

  • 전체 배포 1분 이내 완료

4.6 참여 및 분석

12-참여자관리

관련 유저스토리: UFR-PART-050, 030, 040

레이아웃:

┌─────────────────────────────────────────────────────────┐
│  ← 대시보드                                             │
├─────────────────────────────────────────────────────────┤
│                                                         │
│  여름 할인 이벤트 > 참여자 관리                         │
│                                                         │
│  ┌─────────────┐ ┌─────────────┐ ┌─────────────┐     │
│  │ 총 참여자   │ │ 당첨자      │ │ 경품 지급   │     │
│  │   523명    │ │   30명     │ │   28명     │     │
│  └─────────────┘ └─────────────┘ └─────────────┘     │
│                                                         │
│  [🔍 검색]  [필터 ▼]  [엑셀 다운로드]  [자동 추첨]   │
│                                                         │
│  ┌─────────────────────────────────────────────────┐  │
│  │ No │ 이름  │ 전화번호      │ 참여일시    │상태│  │
│  ├────┼──────┼──────────────┼───────────┼────┤  │
│  │ 1  │김OO │ 010-1234-**** │ 08/15 14:32│당첨│  │
│  │ 2  │이OO │ 010-5678-**** │ 08/15 15:10│당첨│  │
│  │ 3  │박OO │ 010-9012-**** │ 08/15 16:22│참여│  │
│  │ 4  │최OO │ 010-3456-**** │ 08/15 17:45│참여│  │
│  │ ... (더 보기)                                   │  │
│  └─────────────────────────────────────────────────┘  │
│                                                         │
│  [이전]  1 2 3 4 5 ... 53  [다음]                     │
│                                                         │
└─────────────────────────────────────────────────────────┘

UI 컴포넌트:

  • Breadcrumb: "여름 할인 이벤트 > 참여자 관리"
  • DataCard × 3: 총 참여자, 당첨자, 경품 지급 완료
  • Search Input: 이름/전화번호 검색
  • Dropdown: 필터 (전체/당첨/미당첨)
  • Button: 엑셀 다운로드, 자동 추첨
  • Table: 참여자 목록
    • 번호, 이름, 전화번호(마스킹), 참여일시, 상태
    • 상태: 당첨(빨강), 참여(회색)
  • Pagination: 페이지 네비게이션

주요 인터랙션:

  1. 검색 입력 → 실시간 필터링
  2. 필터 선택 → 테이블 필터링
  3. "자동 추첨" 클릭 → 추첨 확인 모달 → 추첨 실행
    • 추첨 중: 로딩 애니메이션
    • 완료: "추첨이 완료되었습니다. 당첨자 30명에게 알림이 발송됩니다." Toast
  4. 당첨자 행 클릭 → 상세 정보 모달 (경품 지급 상태 변경 가능)
  5. "엑셀 다운로드" → 참여자 전체 명단 다운로드

추첨 알고리즘:

  • 중복 참여자 제외
  • 매장 방문 고객 가산점 적용
  • 난수 기반 무작위 추첨

13-실시간분석

관련 유저스토리: UFR-ANAL-010, 020, 030

레이아웃:

┌─────────────────────────────────────────────────────────┐
│  ← 대시보드                                    🔄 5분 전 │
├─────────────────────────────────────────────────────────┤
│                                                         │
│  여름 할인 이벤트 > 실시간 분석                         │
│                                                         │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌─────────┐ │
│  │ 총 참여자│ │ 총 노출  │ │ 참여율   │ │ ROI     │ │
│  │  523명  │ │ 8,234회 │ │  6.3%   │ │ 180%   │ │
│  │ 📈 +12  │ │ 📊 +342 │ │ ⬆️ 0.2% │ │ 💰 +5% │ │
│  └──────────┘ └──────────┘ └──────────┘ └─────────┘ │
│                                                         │
│  ┌─────────────────────────────────────────────────┐  │
│  │  📊 참여자 추이 (시간별)                        │  │
│  │                                                 │  │
│  │  100 ┤                                   ●     │  │
│  │   80 ┤                             ●           │  │
│  │   60 ┤                       ●                 │  │
│  │   40 ┤                 ●                       │  │
│  │   20 ┤           ●                             │  │
│  │    0 └─────────────────────────────────────    │  │
│  │      10시  12시  14시  16시  18시  20시       │  │
│  └─────────────────────────────────────────────────┘  │
│                                                         │
│  ┌──────────────────┐ ┌──────────────────────────┐   │
│  │  📺 채널별 성과  │ │  💰 비용 대비 효과       │   │
│  │                  │ │                          │   │
│  │  우리동네TV  35% │ │  총 투자: 300,000원     │   │
│  │  지니TV      28% │ │  매출 증가: 540,000원   │   │
│  │  Instagram   22% │ │  ROI: 180%              │   │
│  │  Naver Blog  10% │ │  손익 분기: 달성 ✅     │   │
│  │  Kakao        5% │ │                          │   │
│  └──────────────────┘ └──────────────────────────┘   │
│                                                         │
│        [상세 리포트 다운로드]  [AI 개선 제안 보기]     │
└─────────────────────────────────────────────────────────┘

UI 컴포넌트:

  • Auto-refresh Indicator: "🔄 5분 전" (마지막 업데이트 시각)
  • DataCard × 4: 총 참여자, 총 노출, 참여율, ROI
    • 실시간 변화 표시 (▲▼ + 증감량)
  • Line Chart: 시간별 참여자 추이
  • Pie Chart: 채널별 성과 분포
  • Summary Card: 비용 대비 효과
  • Action Buttons: 상세 리포트, AI 개선 제안

주요 인터랙션:

  1. 5분마다 자동 새로고침
  2. 차트 호버 → 상세 수치 툴팁
  3. "상세 리포트 다운로드" → PDF 생성 + 다운로드
  4. "AI 개선 제안 보기" → AI개선제안 화면

데이터 수집:

  • KT 채널 API (우리동네TV, 지니TV)
  • SNS API (Instagram, Naver, Kakao)
  • POS 시스템 (매출 데이터)
  • 참여자 DB

성능 요구사항:

  • 5분 간격 실시간 데이터 수집 및 업데이트

14-상세리포트

관련 유저스토리: UFR-ANAL-040

레이아웃:

┌─────────────────────────────────────────────────────────┐
│  ← 실시간 분석                                          │
├─────────────────────────────────────────────────────────┤
│                                                         │
│  여름 할인 이벤트 > 상세 리포트                         │
│                                                         │
│  ┌─────────────────────────────────────────────────┐  │
│  │  📋 이벤트 개요                                 │  │
│  │  • 기간: 2025-08-15 ~ 2025-08-22 (7일)         │  │
│  │  • 목적: 신규고객 유치                          │  │
│  │  • 경품: 스타벅스 아메리카노 (30명)             │  │
│  │  • 투자 비용: 300,000원                         │  │
│  └─────────────────────────────────────────────────┘  │
│                                                         │
│  ┌─────────────────────────────────────────────────┐  │
│  │  📊 참여 통계                                   │  │
│  │  • 총 참여자: 523명                             │  │
│  │  • 채널별 참여:                                 │  │
│  │    - 우리동네TV: 183명 (35%)                    │  │
│  │    - 지니TV: 146명 (28%)                        │  │
│  │    - Instagram: 115명 (22%)                     │  │
│  │    - Naver Blog: 52명 (10%)                     │  │
│  │    - Kakao: 27명 (5%)                           │  │
│  └─────────────────────────────────────────────────┘  │
│                                                         │
│  ┌─────────────────────────────────────────────────┐  │
│  │  📺 노출 통계                                   │  │
│  │  • 총 노출: 8,234회                             │  │
│  │  • 도달률: 62%                                  │  │
│  │  • 참여율: 6.3%                                 │  │
│  └─────────────────────────────────────────────────┘  │
│                                                         │
│  ┌─────────────────────────────────────────────────┐  │
│  │  💰 매출 분석                                   │  │
│  │  • 이벤트 기간 매출: 2,140,000원                │  │
│  │  • 평균 매출: 1,600,000원                       │  │
│  │  • 매출 증가율: +34%                            │  │
│  │  • 객단가 변화: 28,000원 → 31,500원 (+12%)     │  │
│  └─────────────────────────────────────────────────┘  │
│                                                         │
│  ┌─────────────────────────────────────────────────┐  │
│  │  📈 ROI 분석                                    │  │
│  │  • 총 투자: 300,000원                           │  │
│  │  • 총 수익: 540,000원 (매출 증가분)             │  │
│  │  • ROI: 180%                                    │  │
│  │  • 손익 분기: 달성 ✅                          │  │
│  └─────────────────────────────────────────────────┘  │
│                                                         │
│  ┌─────────────────────────────────────────────────┐  │
│  │  📊 업종 평균 대비 벤치마킹                     │  │
│  │  • 참여율: 6.3% (업종 평균: 5.2%) ⬆️ 21%      │  │
│  │  • ROI: 180% (업종 평균: 150%) ⬆️ 20%         │  │
│  └─────────────────────────────────────────────────┘  │
│                                                         │
│                        [PDF 다운로드]                   │
└─────────────────────────────────────────────────────────┘

UI 컴포넌트:

  • Summary Cards × 5: 이벤트 개요, 참여 통계, 노출 통계, 매출 분석, ROI 분석
  • Benchmark Card: 업종 평균 대비 비교
  • Charts: 막대 그래프, 파이 차트 (각 섹션에 포함)
  • Primary Button: "PDF 다운로드"

주요 인터랙션:

  1. 스크롤하여 전체 리포트 확인
  2. "PDF 다운로드" 클릭 → 리포트 PDF 생성 + 다운로드
    • 파일명: "여름할인이벤트_분석리포트_20250822.pdf"
  3. 이메일 발송 옵션 (선택)

PDF 구성:

  • 표지 (이벤트명, 기간)
  • 목차
  • 각 섹션별 상세 내용 + 그래프
  • 종합 의견 및 제언

4.7 AI 제안

15-AI개선제안

관련 유저스토리: UFR-AIMPR-010, 020

레이아웃:

┌─────────────────────────────────────────────────────────┐
│  ← 대시보드                                             │
├─────────────────────────────────────────────────────────┤
│                                                         │
│  AI 개선 제안                                           │
│                                                         │
│  ┌─────────────────────────────────────────────────┐  │
│  │  🤖 여름 할인 이벤트 분석 결과                  │  │
│  │                                                 │  │
│  │  ✅ 성공 요인                                   │  │
│  │  • 참여율이 업종 평균보다 21% 높습니다          │  │
│  │  • 우리동네TV 채널이 가장 효과적이었습니다      │  │
│  │  • 경품 매력도가 높았습니다 (⭐⭐⭐⭐)         │  │
│  │                                                 │  │
│  │  ⚠️ 개선 필요 영역                             │  │
│  │  • Kakao 채널 참여율이 낮습니다 (5%)           │  │
│  │  • 저녁 시간대 참여가 집중되어 있습니다         │  │
│  └─────────────────────────────────────────────────┘  │
│                                                         │
│  🎯 AI 개선 제안 (우선순위 순)                         │
│                                                         │
│  ┌─────────────────────────────────────────────────┐  │
│  │  1⃣ 경품 다양화                                │  │
│  │  현재 단일 경품보다 1등, 2등, 3등 구성 추천     │  │
│  │  예상 효과: 참여율 +15% 증가                    │  │
│  │  [이 제안으로 기획하기]                         │  │
│  └─────────────────────────────────────────────────┘  │
│                                                         │
│  ┌─────────────────────────────────────────────────┐  │
│  │  2⃣ 참여 방법 단순화                           │  │
│  │  정보 입력 항목 축소 (이름, 전화번호만)         │  │
│  │  예상 효과: 참여율 +10% 증가                    │  │
│  │  [이 제안으로 기획하기]                         │  │
│  └─────────────────────────────────────────────────┘  │
│                                                         │
│  ┌─────────────────────────────────────────────────┐  │
│  │  3⃣ 채널 집중 전략                             │  │
│  │  효율 낮은 채널(Kakao) 제외, 우리동네TV 집중    │  │
│  │  예상 효과: ROI +20% 증가                       │  │
│  │  [이 제안으로 기획하기]                         │  │
│  └─────────────────────────────────────────────────┘  │
│                                                         │
│  💡 다음 이벤트 아이디어 (시즌별)                      │
│                                                         │
│  ┌─────────────────────────────────────────────────┐  │
│  │  🍂 가을 신메뉴 출시 이벤트                     │  │
│  │  타겟: 신규고객 유치                            │  │
│  │  경품: 신메뉴 무료 제공권                       │  │
│  │  예상 성과: 참여율 7%, ROI 160%                 │  │
│  │  [이 아이디어로 기획하기]                       │  │
│  └─────────────────────────────────────────────────┘  │
│                                                         │
│  ┌─────────────────────────────────────────────────┐  │
│  │  🎃 핼러윈 특별 이벤트                          │  │
│  │  타겟: 재방문 유도                              │  │
│  │  경품: 핼러윈 한정 굿즈                         │  │
│  │  예상 성과: 참여율 9%, ROI 180%                 │  │
│  │  [이 아이디어로 기획하기]                       │  │
│  └─────────────────────────────────────────────────┘  │
│                                                         │
│  ... (총 5개 아이디어)                                 │
│                                                         │
└─────────────────────────────────────────────────────────┘

UI 컴포넌트:

  • Analysis Summary Card: 성공 요인 + 개선 필요 영역
  • Recommendation Card × 3: AI 개선 제안 (우선순위 순)
    • 제목, 설명, 예상 효과
    • [이 제안으로 기획하기] 버튼
  • Idea Card × 5: 다음 이벤트 아이디어
    • 시즌, 타겟, 경품, 예상 성과
    • [이 아이디어로 기획하기] 버튼

주요 인터랙션:

  1. Recommendation Card 확장 → 상세 내용 표시
  2. "이 제안으로 기획하기" 클릭 → 제안 내용 반영하여 이벤트목적선택 화면 (자동 입력)
  3. Idea Card 클릭 → 아이디어 상세 보기
  4. "이 아이디어로 기획하기" → 아이디어 기반으로 새 이벤트 시작

AI 학습:

  • 이벤트 결과 데이터 자동 학습
  • 성공 패턴 축적
  • 실패 요인 회피 로직
  • 개인화 추천 강화

5. 네비게이션 플로우

5.1 메인 플로우

회원가입 (01)
    ↓
매장정보등록 (02)
    ↓
대시보드 (03) ←──────────────────────┐
    ↓                                 │
이벤트목적선택 (04)                   │
    ↓                                 │
AI기획진행 (05)                       │
    ↓                                 │
기획안검토 (06)                       │
    ↓                                 │
콘텐츠생성진행 (07)                   │
    ↓                                 │
콘텐츠편집 (08)                       │
    ↓                                 │
콘텐츠승인 (09)                       │
    ↓                                 │
배포채널설정 (10)                     │
    ↓                                 │
배포현황 (11) ────┬───────────────────┤
    ↓             ↓                   │
참여자관리 (12)  실시간분석 (13) ─────┤
                   ↓                   │
              상세리포트 (14)          │
                   ↓                   │
              AI개선제안 (15) ─────────┘

5.2 메뉴 구조

대시보드 (03)
│
├─ 이벤트 관리
│  ├─ 새 이벤트 만들기 (04)
│  ├─ 진행 중인 이벤트 (리스트)
│  └─ 완료된 이벤트 (리스트)
│
├─ 참여자 관리 (12)
│
├─ 분석 및 리포트
│  ├─ 실시간 분석 (13)
│  └─ 상세 리포트 (14)
│
├─ AI 제안 (15)
│
└─ 설정
   ├─ 매장 정보 수정
   ├─ 계정 설정
   └─ 채널 연동 관리

6. 반응형 디자인

6.1 브레이크포인트

  • Desktop: 1920px (주요 작업 환경)
  • Tablet: 768px - 1024px
  • Mobile: 375px - 767px

6.2 레이아웃 조정

Desktop (1920px)

  • 3-4 컬럼 그리드
  • Sidebar 고정 표시 (240px)
  • 모든 기능 사용 가능

Tablet (768px - 1024px)

  • 2 컬럼 그리드
  • Sidebar 접기 가능 (햄버거 메뉴)
  • DataCard 크기 축소
  • 주요 기능 사용 가능 (일부 제한)

Mobile (375px - 767px)

  • 1 컬럼 그리드
  • Sidebar 오버레이 방식
  • 조회 중심 (이벤트 생성은 Desktop 권장)
  • 카드 세로 배치
  • 테이블 → 카드 리스트로 변경

6.3 터치 최적화 (Mobile/Tablet)

  • 버튼 최소 크기: 44px × 44px
  • 터치 타겟 간격: 8px 이상
  • 스와이프 제스처 지원
  • 드롭다운 → 바텀 시트

7. 성능 및 접근성

7.1 성능 요구사항

  • 초기 로딩: 3초 이내
  • 페이지 전환: 1초 이내
  • AI 처리: 10초 이내 (기획), 3분 이내 (콘텐츠)
  • 배포: 1분 이내
  • 실시간 업데이트: 5분 간격

7.2 접근성 (WCAG 2.1 AA)

  • 색상 대비: 최소 4.5:1
  • 키보드 네비게이션: Tab 순서 지원
  • 스크린 리더: ARIA 레이블 적용
  • 포커스 표시: 명확한 포커스 링
  • 에러 메시지: 명확하고 구체적

7.3 브라우저 지원

  • Chrome 90+
  • Firefox 88+
  • Safari 14+
  • Edge 90+

8. UI 컴포넌트 스펙

8.1 색상 팔레트

Primary: #E60012 (KT Red)
Secondary: #000000 (Black)
Background: #FFFFFF (White)
Grey-100: #F5F5F5
Grey-200: #EEEEEE
Grey-300: #CCCCCC
Grey-500: #999999
Grey-700: #666666
Grey-900: #333333
Success: #00C73C
Warning: #FFC107
Error: #FF0000
Info: #2196F3

8.2 타이포그래피

Font Family: 'Noto Sans KR', sans-serif

Heading 1: 32px, Bold, Line-height 1.5
Heading 2: 24px, Bold, Line-height 1.5
Heading 3: 18px, Bold, Line-height 1.5
Body: 14px, Regular, Line-height 1.6
Caption: 12px, Regular, Line-height 1.5

8.3 간격 시스템

Space-0: 0px
Space-1: 4px
Space-2: 8px
Space-3: 12px
Space-4: 16px
Space-5: 20px
Space-6: 24px
Space-8: 32px
Space-10: 40px
Space-12: 48px

8.4 그림자

Shadow-1: 0 1px 3px rgba(0,0,0,0.12)
Shadow-2: 0 2px 8px rgba(0,0,0,0.15)
Shadow-3: 0 4px 16px rgba(0,0,0,0.20)

9. 인터랙션 및 애니메이션

9.1 전환 효과

  • 페이지 전환: Fade-in (300ms)
  • 모달: Scale + Fade (200ms)
  • 드롭다운: Slide-down (150ms)
  • Toast: Slide-up (250ms)

9.2 호버 효과

  • 버튼: 색상 어둡게 (10%), 커서 포인터
  • 카드: 그림자 확대, 약간 상승
  • 링크: 밑줄 표시

9.3 로딩 상태

  • 버튼: 스피너 + "처리 중..." 텍스트
  • 페이지: 중앙 로딩 스피너
  • AI 처리: 진행 바 + 애니메이션
  • 데이터 로드: 스켈레톤 UI

10. 검토 결과

10.1 유저스토리 매핑 완료

모든 39개 유저스토리가 15개 화면에 완전히 매핑됨 각 화면이 명확한 목적과 유저스토리를 가짐

10.2 참고 사이트 디자인 반영

KT 브랜드 컬러 및 디자인 언어 적용 카드 기반 레이아웃 및 클린한 UI 명확한 CTA 및 진행 상태 표시

10.3 기술적 실현 가능성

모든 화면이 현재 기술로 구현 가능 성능 요구사항이 명확히 정의됨 반응형 디자인 및 접근성 고려

10.4 사용자 경험

직관적인 네비게이션 플로우 명확한 피드백 및 에러 처리 AI 투명성 및 진행 상태 표시


부록: 화면 목록 요약

번호 화면명 관련 유저스토리 주요 기능
01 회원가입 UFR-USER-010 회원가입, KT 본인 인증
02 매장정보등록 UFR-USER-020 매장 정보, 사업자번호 검증
03 대시보드 - 현황 조회, 빠른 실행
04 이벤트목적선택 UFR-PLAN-010 목적 선택
05 AI기획진행 UFR-PLAN-020~050 AI 자동 기획 (10초)
06 기획안검토 UFR-PLAN-060 기획안 검토 및 승인
07 콘텐츠생성진행 UFR-CONT-010~040 AI 콘텐츠 생성 (3분)
08 콘텐츠편집 UFR-CONT-050 콘텐츠 수정
09 콘텐츠승인 UFR-CONT-060 콘텐츠 최종 승인
10 배포채널설정 UFR-DIST-010~050 다중 채널 설정
11 배포현황 UFR-DIST-060 배포 진행 상태 (1분)
12 참여자관리 UFR-PART-030,040,050 참여자 조회, 추첨, 관리
13 실시간분석 UFR-ANAL-010,020,030 실시간 대시보드 (5분 간격)
14 상세리포트 UFR-ANAL-040 종합 리포트 PDF
15 AI개선제안 UFR-AIMPR-010,020 AI 개선안 및 아이디어

작성일: 2025-08-15 버전: 1.0 작성자: UI/UX Designer