diff --git a/design/uiux/prototype/00-메인대시보드.html b/design/uiux/prototype/00-메인대시보드.html deleted file mode 100644 index 3bacdd4..0000000 --- a/design/uiux/prototype/00-메인대시보드.html +++ /dev/null @@ -1,307 +0,0 @@ - - - - - - 메인 대시보드 - KT AI 이벤트 자동 생성 - - - - - - - - - - - - -
-
- store - KT 이벤트 도우미 -
-
- - -
-
- - -
-

안녕하세요, 정우진님!

-

우진이네 고깃집

-
- - -
-
-

진행 중인 이벤트

- 전체보기 > -
- -
- -
-
- - -
-

빠른 실행

- -
- -
-
- add_circle - 새 이벤트
만들기 -
-
- - -
-
- event_note - 이벤트
관리 -
-
- - -
-
- bar_chart - 통계
보기 -
-
- - -
-
- help - 도움말 -
-
-
-
- - -
-
-
- lightbulb -
-

AI 활용 팁

-

이벤트 목적을 명확히 입력하면 더 정확한 기획안을 받을 수 있어요!

-
-
-
-
- -
- - - -
- - - - - - - - diff --git a/design/uiux/prototype/01-회원가입.html b/design/uiux/prototype/01-회원가입.html deleted file mode 100644 index 0018670..0000000 --- a/design/uiux/prototype/01-회원가입.html +++ /dev/null @@ -1,407 +0,0 @@ - - - - - - 회원가입 - KT AI 이벤트 자동 생성 - - - - - - - - - - - - -
- -

회원가입

-
-
- - -
-
- - -
- store -

KT 이벤트 도우미

-

환영합니다!

-
- - -
- - -
- - - 올바른 이메일 형식이 아닙니다. -
- - -
- - - 비밀번호는 8자 이상, 영문과 숫자 조합이어야 합니다. -
- - -
- - - 비밀번호가 일치하지 않습니다. -
- -
- - -
- - - 상호명을 입력해주세요. -
- - -
- - - 업종을 선택해주세요. -
- - -
- - - 위치를 입력해주세요. -
- - -
- - - 올바른 전화번호 형식이 아닙니다. -
- -
- - -
- - - - - - - -
- - - - - -

- 이미 계정이 있으신가요? - 로그인 -

- -
- -
-
- - - - - - - - diff --git a/design/uiux/prototype/03-이벤트목적선택.html b/design/uiux/prototype/03-이벤트목적선택.html deleted file mode 100644 index b2465ab..0000000 --- a/design/uiux/prototype/03-이벤트목적선택.html +++ /dev/null @@ -1,291 +0,0 @@ - - - - - - 이벤트 목적 선택 - KT AI 이벤트 자동 생성 - - - - - - - - - - - - -
- -

이벤트 만들기

-
-
- - -
-
- - -
-
-
1
-
목적
-
-
-
2
-
정보
-
-
-
3
-
기획
-
-
-
4
-
이미지
-
-
-
5
-
배포
-
-
- - -
-

이벤트 목적을 선택하세요

-

AI가 목적에 맞는 이벤트를 기획합니다

-
- - -
-
- - -
-
-
- person_add -
-
-

신규 고객 유치

-

처음 방문하는 고객을 늘립니다

-
- check_circle -
-
- - -
-
-
- replay -
-
-

재방문 유도

-

기존 고객의 재방문을 늘립니다

-
- check_circle -
-
- - -
-
-
- restaurant_menu -
-
-

신메뉴 홍보

-

새로운 메뉴를 알립니다

-
- check_circle -
-
- - -
-
-
- more_horiz -
-
-

기타

-

직접 목적을 입력합니다

-
- check_circle -
-
- -
-
- - -
- -
- -
- - - -
- - - - - - - - - - diff --git a/design/uiux/prototype/08-이벤트기획안승인.html b/design/uiux/prototype/08-이벤트기획안승인.html deleted file mode 100644 index d942e24..0000000 --- a/design/uiux/prototype/08-이벤트기획안승인.html +++ /dev/null @@ -1,330 +0,0 @@ - - - - - - 이벤트 기획안 승인 - KT AI 이벤트 자동 생성 - - - - - - - - - - - - -
- -

이벤트 기획안

-
-
- - -
-
- - -
-
-
1
-
목적
-
-
-
2
-
정보
-
-
-
3
-
기획
-
-
-
4
-
이미지
-
-
-
5
-
배포
-
-
- - -
-
- auto_awesome -

AI가 생성한 기획안

-
-

내용을 확인하고 승인해주세요

-
- - -
-
-
- - -
- -

우진이네 여름 특별 할인 이벤트

-
- -
- - -
- -

- 여름 시즌 신규 고객 유치를 위한 20% 할인 이벤트입니다. 점심 시간대 직장인을 타겟으로 하며, SNS 공유 시 추가 쿠폰을 제공합니다. 시원한 여름 메뉴와 함께 특별한 혜택을 경험하세요! -

-
- -
- - -
- - -
-
- group -
-
-
타겟 고객
-
20-30대 직장인
-
-
- - -
-
- calendar_month -
-
-
이벤트 기간
-
2025.06.01 ~ 2025.06.30 (30일)
-
-
- - -
-
- local_offer -
-
-
할인 혜택
-
전 메뉴 20% 할인
-
-
- - -
-
- card_giftcard -
-
-
추가 혜택
-
SNS 공유 시 10% 쿠폰 추가 증정
-
-
- -
- -
-
-
- - -
-
-
- tips_and_updates -
-

AI 제안

-

타겟 고객층에 맞춰 점심 시간대(11:00-14:00)에 집중 홍보하면 더 좋은 효과를 얻을 수 있습니다.

-
-
-
-
- - -
-
- - -
-
- -
- - - -
- - - - - - - - diff --git a/design/uiux/prototype/09-AI이미지생성.html b/design/uiux/prototype/09-AI이미지생성.html deleted file mode 100644 index da844dc..0000000 --- a/design/uiux/prototype/09-AI이미지생성.html +++ /dev/null @@ -1,401 +0,0 @@ - - - - - - AI 이미지 생성 - KT AI 이벤트 자동 생성 - - - - - - - - - - - - - - -
- -

AI 이미지 생성

-
-
- - -
-
- - -
-
-
1
-
목적
-
-
-
2
-
정보
-
-
-
3
-
기획
-
-
-
4
-
이미지
-
-
-
5
-
배포
-
-
- - -
-
- image -

AI가 생성한 이미지

-
-

마음에 드는 이미지를 선택하세요 (복수 선택 가능)

-
- - -
-
- - -
-
-
-
🔥
-
여름 특별 이벤트
-
20% 할인
-
-
-
- check -
-
-

스타일: 모던, 밝은 느낌

-
-
- - -
-
-
-
🍖
-
우진이네 고깃집
-
여름 시즌 특가
-
-
-
- check -
-
-

스타일: 따뜻한 색감, 식욕 자극

-
-
- - -
-
-
-
❄️
-
시원한 여름
-
20% OFF
-
-
-
- check -
-
-

스타일: 시원한 느낌, 여름 테마

-
-
- -
-
- - -
- -
- - -
-
-
- info -
-

- 💡 여러 이미지를 선택하여 다양한 채널에 활용할 수 있습니다. -

-
-
-
-
- - -
- -
- -
- - - -
- - - - - - - - diff --git a/design/uiux/prototype/15-다중채널배포설정.html b/design/uiux/prototype/15-다중채널배포설정.html deleted file mode 100644 index 8c95067..0000000 --- a/design/uiux/prototype/15-다중채널배포설정.html +++ /dev/null @@ -1,681 +0,0 @@ - - - - - - 다중 채널 배포 설정 - KT AI 이벤트 자동 생성 - - - - - - - - - - - - -
- -

배포 설정

-
-
- - -
-
- -
-
-
1
-
목적
-
-
-
2
-
정보
-
-
-
3
-
기획
-
-
-
4
-
이미지
-
-
-
5
-
배포
-
-
- - -
-

배포 채널 선택

-

- 이벤트를 배포할 채널을 선택하세요 (복수 선택 가능) -

- -
- - - - - - - - - - - - - - - - - - - - - - - -
-
- - -
-

배포 일정

- -
- - - - - - - - -
-
- - -
-
-
-

배포 요약

-
-
- check_circle - 우리동네TV, 링고비즈, genie TV, 하이오더, SNS, 문자 메시지 - (6개 채널) -
-
- schedule - 즉시 배포 -
-
- image - 선택된 이미지 1개 -
-
-
-
-
- - -
- -
-
- - - -
- - - - - - - - diff --git a/design/uiux/prototype/18-이벤트참여신청.html b/design/uiux/prototype/18-이벤트참여신청.html deleted file mode 100644 index 5d04682..0000000 --- a/design/uiux/prototype/18-이벤트참여신청.html +++ /dev/null @@ -1,381 +0,0 @@ - - - - - - 이벤트 참여 신청 - 우진이네 고깃집 - - - - - - - - - - - - - - -
-
- store - 우진이네 고깃집 -
-
- - -
- - -
-
-
🔥
-

여름 특별 할인

-

전 메뉴 20% 할인!

-
-
- -
- - -
-

우진이네 여름 특별 할인 이벤트

-

- 시원한 여름 메뉴와 함께 특별한 혜택을 경험하세요! -

-
- - -
-

이벤트 혜택

- -
- - -
-
- calendar_today -
-
-
이벤트 기간
-
2025.06.01 ~ 2025.06.30
-
-
- - -
-
- local_offer -
-
-
할인 혜택
-
전 메뉴 20% 할인
-
-
- - -
-
- card_giftcard -
-
-
추가 혜택
-
SNS 공유 시 10% 쿠폰 추가
-
-
- -
-
- - -
-

참여 신청

- -
- - -
- - - 이름을 입력해주세요. -
- - -
- - - 전화번호를 입력해주세요. -
- - -
- - -
- - - - -
-
- - -
-
-
-

유의사항

-
    -
  • 이벤트 참여는 선착순으로 마감됩니다
    • -
  • 중복 신청은 불가능합니다
    • -
  • 신청 후 문자로 쿠폰을 받으실 수 있습니다
    • -
-
-
-
- - -
-

이 이벤트를 친구에게 공유하세요!

-
- - -
-
- -
-
- - - - - - - - diff --git a/design/uiux/prototype/21-실시간대시보드.html b/design/uiux/prototype/21-실시간대시보드.html deleted file mode 100644 index 06f7ee4..0000000 --- a/design/uiux/prototype/21-실시간대시보드.html +++ /dev/null @@ -1,538 +0,0 @@ - - - - - - 실시간 대시보드 - KT AI 이벤트 자동 생성 - - - - - - - - - - - - - - -
-
-

실시간 대시보드

- -
- - -
-
- - -
- - -
-
- event -
-
12
-
전체 이벤트
-
- arrow_upward - +2 이번 달 -
-
- - -
-
- play_circle -
-
3
-
진행 중
-
- trending_up - 진행 중 -
-
- - -
-
- group -
-
1,248
-
총 참여자
-
- arrow_upward - +156 오늘 -
-
- - -
-
- trending_up -
-
+23%
-
매출 증가율
-
- arrow_upward - 전월 대비 -
-
- -
- - -
-

참여자 추이

-
-
- show_chart -
참여자 증가 추이 그래프
-
-
-

- 최근 7일간 일평균 178명의 고객이 이벤트에 참여했습니다. -

-
- - -
-
-

진행 중인 이벤트

- -
- -
- -
-
- - -
-
-
- auto_awesome -
-

AI 인사이트

-

- 현재 진행 중인 이벤트의 참여율이 예상보다 15% 높습니다. - 추가 할인 혜택을 제공하면 더 큰 효과를 얻을 수 있습니다. -

- -
-
-
-
- -
- - - -
- - - - - - - - diff --git a/design/uiux/prototype/25-AI개선안제안.html b/design/uiux/prototype/25-AI개선안제안.html deleted file mode 100644 index e784520..0000000 --- a/design/uiux/prototype/25-AI개선안제안.html +++ /dev/null @@ -1,467 +0,0 @@ - - - - - - AI 개선안 제안 - KT AI 이벤트 자동 생성 - - - - - - - - - - - - - - -
- -

AI 개선안 제안

-
-
- - -
-
- - -
-
- auto_awesome -

AI가 분석한 개선안

-
-

- 현재 진행 중인 이벤트를 분석하여 성과를 높일 수 있는 개선안을 제안합니다. -

-
- - -
- -
- - -
- -
- -
- - - -
- - - - - - - - diff --git a/design/uiux/prototype/99-마이페이지.html b/design/uiux/prototype/99-마이페이지.html deleted file mode 100644 index acb71d2..0000000 --- a/design/uiux/prototype/99-마이페이지.html +++ /dev/null @@ -1,646 +0,0 @@ - - - - - - 마이페이지 - KT AI 이벤트 자동 생성 - - - - - - - - - - - - - - -
-
-

MY

- -
- - -
-
- - -
-
정
-

정우진

-

우진이네 고깃집

-

woojin@example.com

- -
- - -
-

사업장 관리

-
-
-
- store -
-
-
사업장 정보
-
업종, 주소, 연락처 관리
-
- chevron_right -
- -
-
- schedule -
-
-
운영 시간
-
영업 시간 및 휴무일 설정
-
- chevron_right -
-
-
- - -
-

이벤트 관리

-
-
-
- history -
-
-
이벤트 내역
-
지난 이벤트 조회 및 관리
-
- chevron_right -
- -
-
- folder_special -
-
-
저장된 템플릿
-
자주 사용하는 이벤트 템플릿
-
- chevron_right -
-
-
- - -
-

계정 설정

-
-
-
- notifications -
-
-
알림 설정
-
이벤트 알림 수신
-
-
-
- -
-
- language -
-
-
언어 설정
-
한국어
-
- chevron_right -
- -
-
- lock -
-
-
보안 설정
-
비밀번호 변경, 2단계 인증
-
- chevron_right -
-
-
- - -
-

고객 지원

-
-
-
- help -
-
-
사용 가이드
-
서비스 이용 방법 안내
-
- chevron_right -
- -
-
- question_answer -
-
-
자주 묻는 질문
-
FAQ 및 문제 해결
-
- chevron_right -
- -
-
- support_agent -
-
-
고객센터
-
1:1 문의 및 상담
-
- chevron_right -
- -
-
- description -
-
-
약관 및 정책
-
이용약관, 개인정보처리방침
-
- chevron_right -
-
-
- - -
-
-
-
- info -
-
-
앱 정보
-
버전 1.0.0
-
- chevron_right -
-
-
- - -
- -
- -
- - - -
- - - - - - - - diff --git a/design/uiux/prototype/common.css b/design/uiux/prototype/common.css deleted file mode 100644 index 4e147ba..0000000 --- a/design/uiux/prototype/common.css +++ /dev/null @@ -1,1097 +0,0 @@ -/* - * KT AI 기반 소상공인 이벤트 자동 생성 서비스 - * 공통 스타일시트 - * - * 스타일 가이드 준수: design/uiux/style-guide.md - * Mobile First 디자인 - */ - -/* ============================================ - 1. CSS 변수 시스템 - ============================================ */ -:root { - /* Primary Colors */ - --color-primary: #E31E24; - --color-primary-hover: #C11A1F; - --color-primary-light: #FFE5E6; - - /* Secondary Colors */ - --color-secondary: #0066FF; - --color-secondary-hover: #0052CC; - --color-secondary-light: #E6F0FF; - - /* Grayscale */ - --color-gray-900: #1A1A1A; - --color-gray-800: #424242; - --color-gray-700: #616161; - --color-gray-600: #757575; - --color-gray-500: #9E9E9E; - --color-gray-400: #BDBDBD; - --color-gray-300: #D9D9D9; - --color-gray-200: #E0E0E0; - --color-gray-100: #F5F5F5; - --color-white: #FFFFFF; - - /* Semantic Colors */ - --color-success: #00C853; - --color-success-light: #E8F5E9; - --color-warning: #FFA000; - --color-warning-light: #FFF8E1; - --color-error: #D32F2F; - --color-error-light: #FFEBEE; - --color-info: #0288D1; - --color-info-light: #E1F5FE; - - /* Typography */ - --font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif; - --font-size-display: 28px; - --font-size-h1: 24px; - --font-size-h2: 20px; - --font-size-h3: 18px; - --font-size-body-l: 16px; - --font-size-body-m: 14px; - --font-size-body-s: 12px; - --font-size-button: 16px; - - --font-weight-regular: 400; - --font-weight-medium: 500; - --font-weight-semibold: 600; - --font-weight-bold: 700; - - --line-height-tight: 1.3; - --line-height-normal: 1.4; - --line-height-relaxed: 1.5; - --line-height-loose: 1.6; - - /* Spacing */ - --space-xs: 4px; - --space-s: 8px; - --space-m: 16px; - --space-l: 24px; - --space-xl: 32px; - --space-2xl: 48px; - - /* Effects */ - --shadow-button: 0 2px 4px rgba(0, 0, 0, 0.1); - --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08); - --shadow-modal: 0 8px 24px rgba(0, 0, 0, 0.15); - - --radius-small: 4px; - --radius-medium: 8px; - --radius-large: 12px; - --radius-xlarge: 16px; - - --transition-fast: 100ms ease-out; - --transition-normal: 200ms ease-out; - --transition-slow: 300ms ease-out; - - /* Layout */ - --max-width: 1200px; - --bottom-nav-height: 60px; - --top-bar-height: 56px; - - /* Touch Target */ - --touch-target-min: 44px; -} - -/* ============================================ - 2. Reset & Base Styles - ============================================ */ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -html { - font-size: 16px; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -body { - font-family: var(--font-family); - font-size: var(--font-size-body-l); - font-weight: var(--font-weight-regular); - line-height: var(--line-height-relaxed); - color: var(--color-gray-900); - background-color: var(--color-white); - overflow-x: hidden; -} - -a { - color: inherit; - text-decoration: none; -} - -button { - font-family: inherit; - cursor: pointer; - border: none; - background: none; -} - -img { - max-width: 100%; - height: auto; - display: block; -} - -input, -textarea, -select { - font-family: inherit; - font-size: inherit; - border: none; - outline: none; -} - -/* ============================================ - 3. Typography Classes - ============================================ */ -.display { - font-size: var(--font-size-display); - font-weight: var(--font-weight-bold); - line-height: var(--line-height-tight); - letter-spacing: -0.02em; -} - -.h1 { - font-size: var(--font-size-h1); - font-weight: var(--font-weight-bold); - line-height: var(--line-height-tight); - letter-spacing: -0.01em; -} - -.h2 { - font-size: var(--font-size-h2); - font-weight: var(--font-weight-bold); - line-height: var(--line-height-normal); -} - -.h3 { - font-size: var(--font-size-h3); - font-weight: var(--font-weight-semibold); - line-height: var(--line-height-normal); -} - -.body-l { - font-size: var(--font-size-body-l); - font-weight: var(--font-weight-regular); - line-height: var(--line-height-relaxed); -} - -.body-m { - font-size: var(--font-size-body-m); - font-weight: var(--font-weight-regular); - line-height: var(--line-height-relaxed); -} - -.body-s { - font-size: var(--font-size-body-s); - font-weight: var(--font-weight-regular); - line-height: var(--line-height-relaxed); -} - -.button-text { - font-size: var(--font-size-button); - font-weight: var(--font-weight-semibold); - line-height: var(--line-height-relaxed); -} - -/* Text Utilities */ -.text-bold { font-weight: var(--font-weight-bold); } -.text-semibold { font-weight: var(--font-weight-semibold); } -.text-medium { font-weight: var(--font-weight-medium); } -.text-center { text-align: center; } -.text-right { text-align: right; } - -/* ============================================ - 4. Layout System - ============================================ */ -.container { - width: 100%; - max-width: var(--max-width); - margin: 0 auto; - padding: 0 var(--space-m); -} - -/* Flexbox Utilities */ -.flex { display: flex; } -.flex-col { flex-direction: column; } -.flex-row { flex-direction: row; } -.flex-wrap { flex-wrap: wrap; } -.items-center { align-items: center; } -.items-start { align-items: flex-start; } -.items-end { align-items: flex-end; } -.justify-center { justify-content: center; } -.justify-between { justify-content: space-between; } -.justify-around { justify-content: space-around; } -.justify-end { justify-content: flex-end; } -.flex-1 { flex: 1; } -.gap-xs { gap: var(--space-xs); } -.gap-s { gap: var(--space-s); } -.gap-m { gap: var(--space-m); } -.gap-l { gap: var(--space-l); } -.gap-xl { gap: var(--space-xl); } - -/* Grid System - Mobile First (4 columns) */ -.grid { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: var(--space-m); -} - -.col-1 { grid-column: span 1; } -.col-2 { grid-column: span 2; } -.col-3 { grid-column: span 3; } -.col-4 { grid-column: span 4; } - -/* Spacing Utilities */ -.m-xs { margin: var(--space-xs); } -.m-s { margin: var(--space-s); } -.m-m { margin: var(--space-m); } -.m-l { margin: var(--space-l); } -.m-xl { margin: var(--space-xl); } - -.mt-xs { margin-top: var(--space-xs); } -.mt-s { margin-top: var(--space-s); } -.mt-m { margin-top: var(--space-m); } -.mt-l { margin-top: var(--space-l); } -.mt-xl { margin-top: var(--space-xl); } - -.mb-xs { margin-bottom: var(--space-xs); } -.mb-s { margin-bottom: var(--space-s); } -.mb-m { margin-bottom: var(--space-m); } -.mb-l { margin-bottom: var(--space-l); } -.mb-xl { margin-bottom: var(--space-xl); } - -.ml-xs { margin-left: var(--space-xs); } -.ml-s { margin-left: var(--space-s); } -.ml-m { margin-left: var(--space-m); } - -.mr-xs { margin-right: var(--space-xs); } -.mr-s { margin-right: var(--space-s); } -.mr-m { margin-right: var(--space-m); } - -.p-xs { padding: var(--space-xs); } -.p-s { padding: var(--space-s); } -.p-m { padding: var(--space-m); } -.p-l { padding: var(--space-l); } -.p-xl { padding: var(--space-xl); } - -.pt-xs { padding-top: var(--space-xs); } -.pt-s { padding-top: var(--space-s); } -.pt-m { padding-top: var(--space-m); } -.pt-l { padding-top: var(--space-l); } - -.pb-xs { padding-bottom: var(--space-xs); } -.pb-s { padding-bottom: var(--space-s); } -.pb-m { padding-bottom: var(--space-m); } -.pb-l { padding-bottom: var(--space-l); } - -.px-m { padding-left: var(--space-m); padding-right: var(--space-m); } -.py-m { padding-top: var(--space-m); padding-bottom: var(--space-m); } - -/* ============================================ - 5. Component Styles - ============================================ */ - -/* Buttons */ -.btn { - display: inline-flex; - align-items: center; - justify-content: center; - min-height: var(--touch-target-min); - padding: 12px var(--space-l); - font-size: var(--font-size-button); - font-weight: var(--font-weight-semibold); - line-height: var(--line-height-relaxed); - border-radius: var(--radius-medium); - transition: all var(--transition-normal); - cursor: pointer; - text-align: center; - white-space: nowrap; - user-select: none; -} - -.btn:focus-visible { - outline: 2px solid var(--color-secondary); - outline-offset: 2px; -} - -.btn-primary { - background-color: var(--color-primary); - color: var(--color-white); - box-shadow: var(--shadow-button); -} - -.btn-primary:hover { - background-color: var(--color-primary-hover); -} - -.btn-primary:active { - transform: translateY(1px); - box-shadow: none; -} - -.btn-primary:disabled { - background-color: var(--color-gray-300); - color: var(--color-gray-600); - cursor: not-allowed; - box-shadow: none; -} - -.btn-secondary { - background-color: var(--color-white); - color: var(--color-primary); - border: 2px solid var(--color-primary); -} - -.btn-secondary:hover { - background-color: var(--color-primary-light); -} - -.btn-secondary:active { - transform: translateY(1px); -} - -.btn-text { - background-color: transparent; - color: var(--color-gray-700); - padding: var(--space-s) var(--space-m); - min-height: auto; -} - -.btn-text:hover { - color: var(--color-primary); - background-color: var(--color-gray-100); -} - -.btn-full { - width: 100%; -} - -.btn-icon { - display: inline-flex; - align-items: center; - gap: var(--space-s); -} - -/* Cards */ -.card { - background-color: var(--color-white); - border: 1px solid var(--color-gray-200); - border-radius: var(--radius-large); - box-shadow: var(--shadow-card); - overflow: hidden; - transition: box-shadow var(--transition-normal); -} - -.card:hover { - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); -} - -.card-header { - padding: var(--space-m); - border-bottom: 1px solid var(--color-gray-200); - font-weight: var(--font-weight-semibold); -} - -.card-body { - padding: var(--space-m); -} - -.card-footer { - padding: var(--space-m); - border-top: 1px solid var(--color-gray-200); - background-color: var(--color-gray-100); -} - -.card-clickable { - cursor: pointer; -} - -.card-clickable:active { - transform: scale(0.98); -} - -/* Input Fields */ -.input-group { - display: flex; - flex-direction: column; - gap: var(--space-s); - margin-bottom: var(--space-m); -} - -.input-group label { - font-size: var(--font-size-body-m); - font-weight: var(--font-weight-medium); - color: var(--color-gray-900); -} - -.input { - width: 100%; - min-height: 48px; - padding: 12px var(--space-m); - font-size: var(--font-size-body-l); - color: var(--color-gray-900); - background-color: var(--color-white); - border: 1px solid var(--color-gray-300); - border-radius: var(--radius-medium); - transition: all var(--transition-normal); -} - -.input::placeholder { - color: var(--color-gray-500); -} - -.input:focus { - border-color: var(--color-secondary); - box-shadow: 0 0 0 3px var(--color-secondary-light); -} - -.input:disabled { - background-color: var(--color-gray-100); - color: var(--color-gray-600); - cursor: not-allowed; -} - -.input-error { - color: var(--color-error); - font-size: var(--font-size-body-s); - margin-top: var(--space-xs); - display: none; -} - -.input-group.error .input { - border-color: var(--color-error); -} - -.input-group.error .input-error { - display: block; -} - -.textarea { - min-height: 120px; - resize: vertical; - font-family: inherit; -} - -/* Checkbox & Radio */ -.checkbox, -.radio { - display: flex; - align-items: center; - gap: var(--space-s); - cursor: pointer; - min-height: var(--touch-target-min); -} - -.checkbox input, -.radio input { - width: 20px; - height: 20px; - cursor: pointer; -} - -/* Select */ -.select { - appearance: none; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23616161' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position: right var(--space-m) center; - padding-right: 48px; -} - -/* Bottom Navigation */ -.bottom-nav { - position: fixed; - bottom: 0; - left: 0; - right: 0; - height: var(--bottom-nav-height); - background-color: var(--color-white); - border-top: 1px solid var(--color-gray-200); - display: flex; - justify-content: space-around; - align-items: center; - z-index: 1000; - box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08); -} - -.nav-item { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 2px; - min-width: 60px; - min-height: var(--touch-target-min); - color: var(--color-gray-600); - transition: color var(--transition-fast); - cursor: pointer; -} - -.nav-item .material-icons { - font-size: 24px; -} - -.nav-item span:not(.material-icons) { - font-size: 11px; - font-weight: var(--font-weight-medium); -} - -.nav-item:hover { - color: var(--color-gray-900); -} - -.nav-item.active { - color: var(--color-primary); -} - -.nav-item:focus-visible { - outline: 2px solid var(--color-secondary); - outline-offset: -2px; -} - -/* Top Bar */ -.top-bar { - position: sticky; - top: 0; - left: 0; - right: 0; - height: var(--top-bar-height); - background-color: var(--color-white); - border-bottom: 1px solid var(--color-gray-200); - display: flex; - align-items: center; - padding: 0 var(--space-m); - z-index: 999; -} - -.top-bar-title { - flex: 1; - text-align: center; - font-size: var(--font-size-h3); - font-weight: var(--font-weight-semibold); -} - -.back-button { - width: var(--touch-target-min); - height: var(--touch-target-min); - display: flex; - align-items: center; - justify-content: center; - color: var(--color-gray-900); - cursor: pointer; -} - -/* Page Container with Bottom Nav */ -.page { - min-height: 100vh; - padding-bottom: calc(var(--bottom-nav-height) + var(--space-m)); -} - -.page-content { - padding: var(--space-m); -} - -/* Stepper */ -.stepper { - display: flex; - align-items: center; - justify-content: space-between; - padding: var(--space-m) 0; -} - -.step { - display: flex; - flex-direction: column; - align-items: center; - flex: 1; - position: relative; -} - -.step-number { - width: 32px; - height: 32px; - border-radius: 50%; - background-color: var(--color-gray-300); - color: var(--color-gray-600); - display: flex; - align-items: center; - justify-content: center; - font-weight: var(--font-weight-semibold); - font-size: var(--font-size-body-m); - margin-bottom: var(--space-xs); - z-index: 1; -} - -.step.active .step-number { - background-color: var(--color-primary); - color: var(--color-white); -} - -.step.completed .step-number { - background-color: var(--color-success); - color: var(--color-white); -} - -.step-label { - font-size: var(--font-size-body-s); - color: var(--color-gray-600); - text-align: center; -} - -.step.active .step-label { - color: var(--color-gray-900); - font-weight: var(--font-weight-semibold); -} - -.step:not(:last-child)::after { - content: ''; - position: absolute; - top: 16px; - left: 50%; - width: 100%; - height: 2px; - background-color: var(--color-gray-300); - z-index: 0; -} - -.step.completed:not(:last-child)::after { - background-color: var(--color-success); -} - -/* AI Loading Components */ -.ai-loading { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - padding: var(--space-2xl); - text-align: center; -} - -.spinner { - width: 48px; - height: 48px; - border: 4px solid var(--color-gray-200); - border-top-color: var(--color-secondary); - border-radius: 50%; - animation: spin 1s linear infinite; -} - -@keyframes spin { - to { transform: rotate(360deg); } -} - -.ai-loading p { - margin-top: var(--space-m); - color: var(--color-gray-700); -} - -.progress-bar { - width: 100%; - height: 8px; - background-color: var(--color-gray-200); - border-radius: 4px; - overflow: hidden; - margin-top: var(--space-m); -} - -.progress-fill { - height: 100%; - background-color: var(--color-secondary); - transition: width var(--transition-slow); -} - -/* Skeleton Loading */ -.skeleton { - background: linear-gradient( - 90deg, - var(--color-gray-200) 25%, - var(--color-gray-100) 50%, - var(--color-gray-200) 75% - ); - background-size: 200% 100%; - animation: skeleton-loading 1.5s ease-in-out infinite; - border-radius: var(--radius-small); -} - -@keyframes skeleton-loading { - 0% { background-position: 200% 0; } - 100% { background-position: -200% 0; } -} - -.skeleton-text { - height: 16px; - margin-bottom: var(--space-s); -} - -.skeleton-title { - height: 24px; - width: 60%; - margin-bottom: var(--space-m); -} - -.skeleton-card { - height: 120px; -} - -/* Toast */ -.toast { - position: fixed; - bottom: calc(var(--bottom-nav-height) + var(--space-m)); - left: 50%; - transform: translateX(-50%) translateY(100px); - min-width: 280px; - max-width: 90%; - padding: var(--space-m) var(--space-l); - background-color: var(--color-gray-900); - color: var(--color-white); - border-radius: var(--radius-medium); - box-shadow: var(--shadow-modal); - z-index: 2000; - opacity: 0; - transition: all var(--transition-slow); -} - -.toast.show { - opacity: 1; - transform: translateX(-50%) translateY(0); -} - -.toast.success { - background-color: var(--color-success); -} - -.toast.error { - background-color: var(--color-error); -} - -.toast.warning { - background-color: var(--color-warning); -} - -/* Modal */ -.modal-overlay { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: rgba(0, 0, 0, 0.5); - display: flex; - align-items: center; - justify-content: center; - z-index: 1500; - opacity: 0; - visibility: hidden; - transition: all var(--transition-slow); -} - -.modal-overlay.show { - opacity: 1; - visibility: visible; -} - -.modal { - background-color: var(--color-white); - border-radius: var(--radius-large); - box-shadow: var(--shadow-modal); - max-width: 90%; - width: 400px; - max-height: 80vh; - overflow: hidden; - transform: scale(0.9); - transition: transform var(--transition-slow); -} - -.modal-overlay.show .modal { - transform: scale(1); -} - -.modal-header { - padding: var(--space-l); - border-bottom: 1px solid var(--color-gray-200); -} - -.modal-title { - font-size: var(--font-size-h2); - font-weight: var(--font-weight-bold); -} - -.modal-body { - padding: var(--space-l); - overflow-y: auto; -} - -.modal-footer { - padding: var(--space-l); - border-top: 1px solid var(--color-gray-200); - display: flex; - gap: var(--space-m); - justify-content: flex-end; -} - -/* Bottom Sheet */ -.bottom-sheet-overlay { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: rgba(0, 0, 0, 0.5); - z-index: 1500; - opacity: 0; - visibility: hidden; - transition: all var(--transition-slow); -} - -.bottom-sheet-overlay.show { - opacity: 1; - visibility: visible; -} - -.bottom-sheet { - position: fixed; - bottom: 0; - left: 0; - right: 0; - background-color: var(--color-white); - border-radius: var(--radius-xlarge) var(--radius-xlarge) 0 0; - box-shadow: var(--shadow-modal); - max-height: 80vh; - transform: translateY(100%); - transition: transform var(--transition-slow); - z-index: 1501; -} - -.bottom-sheet-overlay.show .bottom-sheet { - transform: translateY(0); -} - -.bottom-sheet-handle { - width: 40px; - height: 4px; - background-color: var(--color-gray-300); - border-radius: 2px; - margin: var(--space-m) auto; -} - -.bottom-sheet-content { - padding: 0 var(--space-l) var(--space-l); - overflow-y: auto; - max-height: calc(80vh - 60px); -} - -/* Badge */ -.badge { - display: inline-flex; - align-items: center; - padding: 4px var(--space-s); - font-size: var(--font-size-body-s); - font-weight: var(--font-weight-medium); - border-radius: 12px; - line-height: 1; -} - -.badge-primary { - background-color: var(--color-primary-light); - color: var(--color-primary); -} - -.badge-success { - background-color: var(--color-success-light); - color: var(--color-success); -} - -.badge-warning { - background-color: var(--color-warning-light); - color: var(--color-warning); -} - -.badge-error { - background-color: var(--color-error-light); - color: var(--color-error); -} - -.badge-gray { - background-color: var(--color-gray-200); - color: var(--color-gray-700); -} - -/* Divider */ -.divider { - height: 1px; - background-color: var(--color-gray-200); - margin: var(--space-m) 0; -} - -/* ============================================ - 6. Utility Classes - ============================================ */ - -/* Colors */ -.text-primary { color: var(--color-primary); } -.text-secondary { color: var(--color-secondary); } -.text-success { color: var(--color-success); } -.text-warning { color: var(--color-warning); } -.text-error { color: var(--color-error); } -.text-gray-900 { color: var(--color-gray-900); } -.text-gray-700 { color: var(--color-gray-700); } -.text-gray-600 { color: var(--color-gray-600); } -.text-gray-500 { color: var(--color-gray-500); } - -.bg-white { background-color: var(--color-white); } -.bg-gray-100 { background-color: var(--color-gray-100); } -.bg-gray-200 { background-color: var(--color-gray-200); } -.bg-primary-light { background-color: var(--color-primary-light); } -.bg-secondary-light { background-color: var(--color-secondary-light); } - -/* Display */ -.block { display: block; } -.inline-block { display: inline-block; } -.hidden { display: none; } - -/* Position */ -.relative { position: relative; } -.absolute { position: absolute; } -.fixed { position: fixed; } -.sticky { position: sticky; } - -/* Width */ -.w-full { width: 100%; } -.w-auto { width: auto; } - -/* Border Radius */ -.rounded-small { border-radius: var(--radius-small); } -.rounded-medium { border-radius: var(--radius-medium); } -.rounded-large { border-radius: var(--radius-large); } -.rounded-full { border-radius: 9999px; } - -/* Shadow */ -.shadow-card { box-shadow: var(--shadow-card); } -.shadow-button { box-shadow: var(--shadow-button); } -.shadow-modal { box-shadow: var(--shadow-modal); } - -/* ============================================ - 7. Responsive - Tablet (768px+) - ============================================ */ -@media (min-width: 768px) { - :root { - --font-size-display: 32px; - --font-size-h1: 28px; - --font-size-h2: 24px; - --font-size-h3: 20px; - --font-size-body-l: 18px; - } - - .container { - padding: 0 var(--space-l); - } - - /* Grid: 8 columns for tablet */ - .grid { - grid-template-columns: repeat(8, 1fr); - } - - .tablet-col-2 { grid-column: span 2; } - .tablet-col-4 { grid-column: span 4; } - .tablet-col-6 { grid-column: span 6; } - .tablet-col-8 { grid-column: span 8; } - - .page-content { - padding: var(--space-l); - } - - /* Bottom Nav can be hidden on tablet, use sidebar instead */ - .tablet-sidebar-layout { - display: grid; - grid-template-columns: 240px 1fr; - } -} - -/* ============================================ - 8. Responsive - Desktop (1024px+) - ============================================ */ -@media (min-width: 1024px) { - :root { - --font-size-display: 36px; - --font-size-h1: 32px; - --font-size-h2: 28px; - --font-size-h3: 24px; - --font-size-body-l: 20px; - } - - /* Grid: 12 columns for desktop */ - .grid { - grid-template-columns: repeat(12, 1fr); - } - - .desktop-col-3 { grid-column: span 3; } - .desktop-col-4 { grid-column: span 4; } - .desktop-col-6 { grid-column: span 6; } - .desktop-col-8 { grid-column: span 8; } - .desktop-col-12 { grid-column: span 12; } - - .page-content { - padding: var(--space-xl); - } - - /* Hide bottom nav on desktop */ - .desktop-hide-bottom-nav .bottom-nav { - display: none; - } - - .desktop-hide-bottom-nav .page { - padding-bottom: var(--space-m); - } -} - -/* ============================================ - 9. Accessibility - ============================================ */ - -/* Focus styles */ -*:focus-visible { - outline: 2px solid var(--color-secondary); - outline-offset: 2px; -} - -/* Screen reader only */ -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border-width: 0; -} - -/* Reduced motion */ -@media (prefers-reduced-motion: reduce) { - *, - *::before, - *::after { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - } -} - -/* High contrast mode */ -@media (prefers-contrast: high) { - .btn-primary { - border: 2px solid var(--color-gray-900); - } - - .card { - border: 2px solid var(--color-gray-900); - } -} diff --git a/design/uiux/prototype/common.js b/design/uiux/prototype/common.js deleted file mode 100644 index b7e50ac..0000000 --- a/design/uiux/prototype/common.js +++ /dev/null @@ -1,774 +0,0 @@ -/** - * KT AI 기반 소상공인 이벤트 자동 생성 서비스 - * 공통 JavaScript - * - * 기능: - * - 네비게이션 관리 - * - 상태 관리 (localStorage) - * - UI 유틸리티 (Toast, Modal, Bottom Sheet) - * - 폼 검증 - * - 애니메이션 헬퍼 - */ - -// ============================================ -// 1. Navigation Manager -// ============================================ -const NavManager = { - /** - * 화면 이동 - * @param {string} pageNumber - 화면 번호 (00, 01, 03 등) - * @param {string} pageName - 화면명 (한글) - */ - navigate: (pageNumber, pageName) => { - window.location.href = `${pageNumber}-${pageName}.html`; - }, - - /** - * 뒤로가기 - */ - back: () => { - window.history.back(); - }, - - /** - * Bottom Navigation 초기화 - * @param {string} activeMenu - 활성 메뉴 ('home' | 'event' | 'analytics' | 'my') - */ - initBottomNav: (activeMenu = 'home') => { - const navItems = document.querySelectorAll('.nav-item'); - - navItems.forEach(item => { - const menu = item.getAttribute('data-nav'); - - // 활성 메뉴 표시 - if (menu === activeMenu) { - item.classList.add('active'); - } - - // 클릭 이벤트 - item.addEventListener('click', (e) => { - e.preventDefault(); - - switch (menu) { - case 'home': - NavManager.navigate('00', '메인대시보드'); - break; - case 'event': - NavManager.navigate('03', '이벤트목적선택'); - break; - case 'analytics': - NavManager.navigate('21', '실시간대시보드'); - break; - case 'my': - NavManager.navigate('99', '마이페이지'); - break; - } - }); - }); - } -}; - -// ============================================ -// 2. State Management -// ============================================ -const AppState = { - /** - * 데이터 저장 - * @param {string} key - 저장 키 - * @param {*} data - 저장할 데이터 - */ - save: (key, data) => { - try { - localStorage.setItem(key, JSON.stringify(data)); - return true; - } catch (error) { - console.error('Failed to save data:', error); - return false; - } - }, - - /** - * 데이터 로드 - * @param {string} key - 로드 키 - * @returns {*} 저장된 데이터 또는 null - */ - load: (key) => { - try { - const data = localStorage.getItem(key); - return data ? JSON.parse(data) : null; - } catch (error) { - console.error('Failed to load data:', error); - return null; - } - }, - - /** - * 데이터 삭제 - * @param {string} key - 삭제 키 - */ - remove: (key) => { - localStorage.removeItem(key); - }, - - /** - * 전체 데이터 삭제 - */ - clear: () => { - localStorage.clear(); - }, - - /** - * 사용자 정보 저장 - */ - saveUser: (userData) => { - AppState.save('user', userData); - }, - - /** - * 사용자 정보 로드 - */ - loadUser: () => { - return AppState.load('user'); - }, - - /** - * 이벤트 데이터 저장 - */ - saveEvent: (eventData) => { - const events = AppState.load('events') || []; - events.push(eventData); - AppState.save('events', events); - }, - - /** - * 이벤트 목록 로드 - */ - loadEvents: () => { - return AppState.load('events') || []; - } -}; - -// ============================================ -// 3. UI Manager -// ============================================ -const UIManager = { - /** - * Toast 메시지 표시 - * @param {string} message - 메시지 내용 - * @param {string} type - 타입 ('success' | 'error' | 'warning' | 'info') - * @param {number} duration - 표시 시간 (ms, 기본 3000) - */ - showToast: (message, type = 'info', duration = 3000) => { - // 기존 Toast 제거 - const existingToast = document.querySelector('.toast'); - if (existingToast) { - existingToast.remove(); - } - - // Toast 생성 - const toast = document.createElement('div'); - toast.className = `toast ${type}`; - toast.textContent = message; - toast.setAttribute('role', 'alert'); - toast.setAttribute('aria-live', 'polite'); - - document.body.appendChild(toast); - - // 애니메이션 - setTimeout(() => { - toast.classList.add('show'); - }, 10); - - // 자동 제거 - setTimeout(() => { - toast.classList.remove('show'); - setTimeout(() => { - toast.remove(); - }, 300); - }, duration); - }, - - /** - * Modal 표시 - * @param {Object} options - Modal 옵션 - * @param {string} options.title - 제목 - * @param {string} options.body - 내용 - * @param {string} options.confirmText - 확인 버튼 텍스트 - * @param {string} options.cancelText - 취소 버튼 텍스트 - * @param {Function} options.onConfirm - 확인 콜백 - * @param {Function} options.onCancel - 취소 콜백 - */ - showModal: (options) => { - const { - title = '알림', - body = '', - confirmText = '확인', - cancelText = '취소', - onConfirm = null, - onCancel = null - } = options; - - // Modal HTML 생성 - const modalHTML = ` - - `; - - // DOM에 추가 - const modalContainer = document.createElement('div'); - modalContainer.innerHTML = modalHTML; - document.body.appendChild(modalContainer.firstElementChild); - - const modalElement = document.getElementById('modal'); - - // 표시 애니메이션 - setTimeout(() => { - modalElement.classList.add('show'); - }, 10); - - // 확인 버튼 - const confirmBtn = document.getElementById('modal-confirm'); - confirmBtn.addEventListener('click', () => { - if (onConfirm) onConfirm(); - UIManager.closeModal(); - }); - - // 취소 버튼 - const cancelBtn = document.getElementById('modal-cancel'); - if (cancelBtn) { - cancelBtn.addEventListener('click', () => { - if (onCancel) onCancel(); - UIManager.closeModal(); - }); - } - - // 배경 클릭으로 닫기 - modalElement.addEventListener('click', (e) => { - if (e.target === modalElement) { - if (onCancel) onCancel(); - UIManager.closeModal(); - } - }); - - // ESC 키로 닫기 - const handleEscape = (e) => { - if (e.key === 'Escape') { - if (onCancel) onCancel(); - UIManager.closeModal(); - document.removeEventListener('keydown', handleEscape); - } - }; - document.addEventListener('keydown', handleEscape); - }, - - /** - * Modal 닫기 - */ - closeModal: () => { - const modal = document.getElementById('modal'); - if (modal) { - modal.classList.remove('show'); - setTimeout(() => { - modal.remove(); - }, 300); - } - }, - - /** - * Bottom Sheet 표시 - * @param {Object} options - Bottom Sheet 옵션 - * @param {string} options.content - HTML 내용 - * @param {Function} options.onClose - 닫기 콜백 - */ - showBottomSheet: (options) => { - const { content = '', onClose = null } = options; - - // Bottom Sheet HTML 생성 - const sheetHTML = ` -
-
-
-
- ${content} -
-
-
- `; - - // DOM에 추가 - const sheetContainer = document.createElement('div'); - sheetContainer.innerHTML = sheetHTML; - document.body.appendChild(sheetContainer.firstElementChild); - - const sheetElement = document.getElementById('bottom-sheet'); - - // 표시 애니메이션 - setTimeout(() => { - sheetElement.classList.add('show'); - }, 10); - - // 배경 클릭으로 닫기 - sheetElement.addEventListener('click', (e) => { - if (e.target === sheetElement) { - if (onClose) onClose(); - UIManager.closeBottomSheet(); - } - }); - }, - - /** - * Bottom Sheet 닫기 - */ - closeBottomSheet: () => { - const sheet = document.getElementById('bottom-sheet'); - if (sheet) { - sheet.classList.remove('show'); - setTimeout(() => { - sheet.remove(); - }, 300); - } - }, - - /** - * Loading 표시 - * @param {string} message - 로딩 메시지 - */ - showLoading: (message = 'AI가 처리하고 있습니다...') => { - const loadingHTML = ` - - `; - - const loadingContainer = document.createElement('div'); - loadingContainer.innerHTML = loadingHTML; - document.body.appendChild(loadingContainer.firstElementChild); - }, - - /** - * Loading 숨기기 - */ - hideLoading: () => { - const loading = document.getElementById('loading'); - if (loading) { - loading.remove(); - } - }, - - /** - * Progress Bar 업데이트 - * @param {number} percent - 진행률 (0-100) - */ - updateProgress: (percent) => { - const progressFill = document.querySelector('.progress-fill'); - if (progressFill) { - progressFill.style.width = `${percent}%`; - } - } -}; - -// ============================================ -// 4. Form Validator -// ============================================ -const FormValidator = { - /** - * 이메일 검증 - * @param {string} email - 이메일 주소 - * @returns {boolean} - */ - validateEmail: (email) => { - const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; - return emailRegex.test(email); - }, - - /** - * 비밀번호 검증 (8자 이상, 영문+숫자 조합) - * @param {string} password - 비밀번호 - * @returns {boolean} - */ - validatePassword: (password) => { - const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/; - return passwordRegex.test(password); - }, - - /** - * 전화번호 검증 (한국 형식) - * @param {string} phone - 전화번호 - * @returns {boolean} - */ - validatePhone: (phone) => { - const phoneRegex = /^01[0-9]-?[0-9]{3,4}-?[0-9]{4}$/; - return phoneRegex.test(phone); - }, - - /** - * 필수 입력 검증 - * @param {string} value - 입력값 - * @returns {boolean} - */ - validateRequired: (value) => { - return value && value.trim().length > 0; - }, - - /** - * Input 요소에 에러 표시 - * @param {HTMLElement} inputElement - Input 요소 - * @param {string} errorMessage - 에러 메시지 - */ - showError: (inputElement, errorMessage) => { - const inputGroup = inputElement.closest('.input-group'); - if (inputGroup) { - inputGroup.classList.add('error'); - const errorElement = inputGroup.querySelector('.input-error'); - if (errorElement) { - errorElement.textContent = errorMessage; - } - } - }, - - /** - * Input 요소의 에러 제거 - * @param {HTMLElement} inputElement - Input 요소 - */ - clearError: (inputElement) => { - const inputGroup = inputElement.closest('.input-group'); - if (inputGroup) { - inputGroup.classList.remove('error'); - } - }, - - /** - * 폼 전체 검증 - * @param {HTMLFormElement} formElement - Form 요소 - * @returns {boolean} - */ - validateForm: (formElement) => { - let isValid = true; - const inputs = formElement.querySelectorAll('input[required], textarea[required]'); - - inputs.forEach(input => { - FormValidator.clearError(input); - - // 필수 입력 체크 - if (!FormValidator.validateRequired(input.value)) { - FormValidator.showError(input, '필수 입력 항목입니다.'); - isValid = false; - return; - } - - // 타입별 검증 - if (input.type === 'email' && !FormValidator.validateEmail(input.value)) { - FormValidator.showError(input, '올바른 이메일 형식이 아닙니다.'); - isValid = false; - } else if (input.type === 'password' && !FormValidator.validatePassword(input.value)) { - FormValidator.showError(input, '비밀번호는 8자 이상, 영문과 숫자 조합이어야 합니다.'); - isValid = false; - } else if (input.type === 'tel' && !FormValidator.validatePhone(input.value)) { - FormValidator.showError(input, '올바른 전화번호 형식이 아닙니다.'); - isValid = false; - } - }); - - return isValid; - } -}; - -// ============================================ -// 5. Animation Helpers -// ============================================ -const AnimationHelper = { - /** - * Fade In - * @param {HTMLElement} element - 대상 요소 - * @param {number} duration - 지속 시간 (ms) - */ - fadeIn: (element, duration = 300) => { - element.style.opacity = '0'; - element.style.display = 'block'; - - let opacity = 0; - const increment = 50 / duration; - - const timer = setInterval(() => { - opacity += increment; - element.style.opacity = opacity; - - if (opacity >= 1) { - clearInterval(timer); - element.style.opacity = '1'; - } - }, 50); - }, - - /** - * Fade Out - * @param {HTMLElement} element - 대상 요소 - * @param {number} duration - 지속 시간 (ms) - */ - fadeOut: (element, duration = 300) => { - let opacity = 1; - const decrement = 50 / duration; - - const timer = setInterval(() => { - opacity -= decrement; - element.style.opacity = opacity; - - if (opacity <= 0) { - clearInterval(timer); - element.style.opacity = '0'; - element.style.display = 'none'; - } - }, 50); - }, - - /** - * Slide Down - * @param {HTMLElement} element - 대상 요소 - * @param {number} duration - 지속 시간 (ms) - */ - slideDown: (element, duration = 300) => { - element.style.height = '0'; - element.style.overflow = 'hidden'; - element.style.display = 'block'; - - const targetHeight = element.scrollHeight; - let height = 0; - const increment = (targetHeight * 50) / duration; - - const timer = setInterval(() => { - height += increment; - element.style.height = `${height}px`; - - if (height >= targetHeight) { - clearInterval(timer); - element.style.height = 'auto'; - element.style.overflow = 'visible'; - } - }, 50); - } -}; - -// ============================================ -// 6. Utility Functions -// ============================================ -const Utils = { - /** - * 날짜 포맷 (YYYY.MM.DD) - * @param {Date} date - 날짜 객체 - * @returns {string} - */ - formatDate: (date) => { - const year = date.getFullYear(); - const month = String(date.getMonth() + 1).padStart(2, '0'); - const day = String(date.getDate()).padStart(2, '0'); - return `${year}.${month}.${day}`; - }, - - /** - * 날짜 포맷 (YYYY-MM-DD) - * @param {Date} date - 날짜 객체 - * @returns {string} - */ - formatDateISO: (date) => { - const year = date.getFullYear(); - const month = String(date.getMonth() + 1).padStart(2, '0'); - const day = String(date.getDate()).padStart(2, '0'); - return `${year}-${month}-${day}`; - }, - - /** - * 숫자 포맷 (천 단위 콤마) - * @param {number} number - 숫자 - * @returns {string} - */ - formatNumber: (number) => { - return number.toLocaleString('ko-KR'); - }, - - /** - * 퍼센트 포맷 - * @param {number} value - 값 - * @param {number} decimals - 소수점 자릿수 - * @returns {string} - */ - formatPercent: (value, decimals = 1) => { - return `${value.toFixed(decimals)}%`; - }, - - /** - * 디바운스 (연속 호출 방지) - * @param {Function} func - 실행할 함수 - * @param {number} wait - 대기 시간 (ms) - * @returns {Function} - */ - debounce: (func, wait = 300) => { - let timeout; - return function executedFunction(...args) { - const later = () => { - clearTimeout(timeout); - func(...args); - }; - clearTimeout(timeout); - timeout = setTimeout(later, wait); - }; - }, - - /** - * 쓰로틀 (일정 시간마다 한 번만 실행) - * @param {Function} func - 실행할 함수 - * @param {number} limit - 제한 시간 (ms) - * @returns {Function} - */ - throttle: (func, limit = 300) => { - let inThrottle; - return function executedFunction(...args) { - if (!inThrottle) { - func(...args); - inThrottle = true; - setTimeout(() => inThrottle = false, limit); - } - }; - }, - - /** - * 랜덤 ID 생성 - * @returns {string} - */ - generateId: () => { - return `id-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`; - }, - - /** - * 요소가 뷰포트에 보이는지 확인 - * @param {HTMLElement} element - 대상 요소 - * @returns {boolean} - */ - isInViewport: (element) => { - const rect = element.getBoundingClientRect(); - return ( - rect.top >= 0 && - rect.left >= 0 && - rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && - rect.right <= (window.innerWidth || document.documentElement.clientWidth) - ); - } -}; - -// ============================================ -// 7. 예제 데이터 -// ============================================ -const SampleData = { - // 사용자 정보 - user: { - name: '정우진', - businessName: '우진이네 고깃집', - businessType: '한식당', - location: '서울 강남구', - email: 'woojin@example.com', - phone: '010-1234-5678' - }, - - // 이벤트 예제 - event: { - id: 'evt-001', - name: '우진이네 여름 특별 할인 이벤트', - purpose: '신규 고객 유치', - startDate: '2025.06.01', - endDate: '2025.06.30', - discountRate: 20, - target: '20-30대 직장인', - status: 'in_progress' - }, - - // 이벤트 목록 - events: [ - { - id: 'evt-001', - name: '우진이네 여름 특별 할인 이벤트', - status: 'in_progress', - startDate: '2025.06.01', - participants: 127 - }, - { - id: 'evt-002', - name: '신메뉴 출시 기념 이벤트', - status: 'in_progress', - startDate: '2025.05.15', - participants: 89 - }, - { - id: 'evt-003', - name: '재방문 고객 감사 이벤트', - status: 'completed', - startDate: '2025.04.01', - participants: 254 - } - ], - - // 통계 데이터 - analytics: { - totalEvents: 5, - activeEvents: 2, - completedEvents: 3, - totalParticipants: 127, - salesIncrease: 23, - conversionRate: 15.4 - }, - - // AI 생성 콘텐츠 - aiContent: { - plan: '여름 시즌 신규 고객 유치를 위한 20% 할인 이벤트입니다. 점심 시간대 직장인을 타겟으로 하며, SNS 공유 시 추가 쿠폰을 제공합니다.', - images: [ - { id: 1, url: 'https://via.placeholder.com/400x300?text=여름+특별+이미지1', selected: true }, - { id: 2, url: 'https://via.placeholder.com/400x300?text=여름+특별+이미지2', selected: false }, - { id: 3, url: 'https://via.placeholder.com/400x300?text=여름+특별+이미지3', selected: false } - ], - improvement: '참여율 향상을 위해 쿠폰 사용 기한을 1주일에서 2주일로 연장하고, SNS 공유 혜택을 10%에서 15%로 상향 조정하는 것을 제안합니다.' - } -}; - -// ============================================ -// 8. 초기화 -// ============================================ -document.addEventListener('DOMContentLoaded', () => { - // Back 버튼 초기화 - const backButtons = document.querySelectorAll('.back-button'); - backButtons.forEach(btn => { - btn.addEventListener('click', () => { - NavManager.back(); - }); - }); - - // 예제 데이터 로드 (개발용) - if (!AppState.loadUser()) { - AppState.saveUser(SampleData.user); - } -}); - -// Export for use in other files -if (typeof module !== 'undefined' && module.exports) { - module.exports = { - NavManager, - AppState, - UIManager, - FormValidator, - AnimationHelper, - Utils, - SampleData - }; -} diff --git a/design/uiux/uiux.md b/design/uiux/uiux.md index 5076604..d55e252 100644 --- a/design/uiux/uiux.md +++ b/design/uiux/uiux.md @@ -1,2221 +1,2298 @@ # KT AI 기반 소상공인 이벤트 자동 생성 서비스 - UI/UX 설계서 ## 문서 정보 -- 작성일: 2025-10-17 -- 버전: 1.0 -- 설계 원칙: Mobile First, 유저스토리 기반, 우선순위 중심 +- **작성일**: 2025-01-20 +- **버전**: 1.0 +- **작성자**: UI/UX Designer (박민지 "픽셀") +- **참조 문서**: design/userstory.md + +## 1. 설계 개요 + +### 1.1 설계 목적 +소상공인이 이벤트 기획부터 배포, 분석까지 모바일 환경에서 손쉽게 수행할 수 있는 직관적이고 효율적인 사용자 경험 제공 + +### 1.2 설계 원칙 + +#### Mobile First 디자인 철학 +1. **우선순위 중심 설계**: 작은 화면에서 가장 중요한 기능과 콘텐츠에 집중 +2. **점진적 향상**: 모바일 기본 경험 먼저 구축 후, 화면이 커질수록 추가 기능 제공 +3. **성능 최적화**: 모바일 환경의 제약(느린 네트워크, 제한된 처리 능력)을 먼저 고려 + +#### 핵심 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 네비게이션 구조 + +#### 바텀 네비게이션 (소상공인용) +1. **홈** → 21-실시간대시보드 +2. **이벤트** → 이벤트 목록 + 새 이벤트 생성 버튼 +3. **분석** → 22-채널별성과분석 +4. **마이페이지** → 설정, 매장정보, 로그아웃 + +#### 상단 앱바 +- 컨텍스트별 제목 +- 뒤로가기 (하위 화면) +- 액션 버튼 (저장, 공유 등) + +## 4. 화면별 상세 설계 + +### 4.1 User Service --- -## 1. 프로토타입 화면 목록 정의 - -### 1.1 소상공인용 앱/웹 (26개 화면) - -#### User 서비스 -1. **01-회원가입** - 소상공인 회원가입 (UFR-USER-010) -2. **02-매장정보등록** - 매장 정보 및 사업자번호 검증 (UFR-USER-020) - -#### Event Planning 서비스 -3. **03-이벤트목적선택** - 이벤트 목적 설정 (UFR-PLAN-010) -4. **04-AI트렌드분석결과** - 업종/지역 트렌드 분석 결과 (UFR-PLAN-020) -5. **05-AI경품추천** - 예산 기반 경품 추천 (UFR-PLAN-030) -6. **06-AI참여방법설계** - 참여 방법 옵션 제시 (UFR-PLAN-040) -7. **07-AI홍보문구생성** - 홍보 문구 및 해시태그 생성 (UFR-PLAN-050) -8. **08-이벤트기획안승인** - 완성된 기획안 검토 및 승인 (UFR-PLAN-060) - -#### Content Generation 서비스 -9. **09-AI이미지생성** - 브랜드 컬러/로고 기반 이미지 생성 (UFR-CONT-010) -10. **10-AI영상제작** - 15초 홍보 영상 제작 (UFR-CONT-020) -11. **11-SNS콘텐츠생성** - 플랫폼별 최적화 콘텐츠 (UFR-CONT-030) -12. **12-QR포스터생성** - 인쇄용 QR 포스터 (UFR-CONT-040) -13. **13-콘텐츠편집** - 생성된 콘텐츠 수정 (UFR-CONT-050) -14. **14-콘텐츠최종승인** - 콘텐츠 미리보기 및 승인 (UFR-CONT-060) - -#### Distribution 서비스 -15. **15-다중채널배포설정** - 배포 채널 선택 및 일정 설정 (UFR-DIST-010) -16. **16-배포진행상태** - 채널별 배포 진행 상황 (UFR-DIST-020~050) -17. **17-오프라인자료다운로드** - QR 포스터 및 인쇄물 다운로드 (UFR-DIST-060) - -#### Participation 서비스 -18. **18-이벤트참여신청** - 고객용 이벤트 참여 화면 (UFR-PART-010) -19. **19-참여완료** - 응모번호 발급 화면 (UFR-PART-010) -20. **20-당첨자명단관리** - 당첨자 조회 및 경품 지급 관리 (UFR-PART-050) - -#### Analytics 서비스 -21. **21-실시간대시보드** - 이벤트 성과 실시간 모니터링 (UFR-ANAL-010) -22. **22-채널별성과분석** - 채널별 노출/참여율 비교 (UFR-ANAL-020) -23. **23-ROI분석** - 투자 대비 수익 분석 (UFR-ANAL-030) -24. **24-분석리포트** - PDF 종합 리포트 (UFR-ANAL-040) - -#### AI Learning 서비스 -25. **25-AI개선안제안** - 이벤트 개선안 제시 (UFR-AIMPR-010) -26. **26-다음이벤트아이디어** - 시즌별 이벤트 아이디어 (UFR-AIMPR-020) - -#### 공통 -27. **00-메인대시보드** - 홈 화면 (진입점) -28. **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 -- 비즈니스 중요도: ⭐⭐⭐⭐ +- **목적**: 신규 소상공인의 간편한 회원가입 처리 +- **관련 유저스토리**: UFR-USER-010 +- **비즈니스 중요도**: Must (M/8) **주요 기능** -- 기본 정보 입력 -- KT 본인 인증 -- 중복 가입 방지 +1. 기본 정보 입력 (이름, 전화번호, 이메일) +2. KT 본인 인증 (선택) - 추가 혜택 제공 +3. 개인정보 수집 동의 **UI 구성요소** + +**모바일 (320px~767px)** ``` -┌─────────────────────────────┐ -│ ← 회원가입 │ -├─────────────────────────────┤ -│ │ -│ 환영합니다! 👋 │ -│ 사장님의 이벤트 성공을 │ -│ 함께 만들어갑니다 │ -│ │ -│ ┌─────────────────────┐ │ -│ │ 이름 * │ │ -│ │ [_______________] │ │ -│ └─────────────────────┘ │ -│ │ -│ ┌─────────────────────┐ │ -│ │ 전화번호 * │ │ -│ │ [010-____-____] │ │ -│ └─────────────────────┘ │ -│ │ -│ ┌─────────────────────┐ │ -│ │ 이메일 * │ │ -│ │ [________@_____] │ │ -│ └─────────────────────┘ │ -│ │ -│ ┌─────────────────────┐ │ -│ │ 📱 KT 본인 인증 │ │ -│ └─────────────────────┘ │ -│ │ -├─────────────────────────────┤ -│ [ 다음 단계로 ] │ -└─────────────────────────────┘ +┌─────────────────────────┐ +│ ← [뒤로] 회원가입 │ +├─────────────────────────┤ +│ │ +│ KT 이벤트 마케팅 │ +│ 환영합니다 🎉 │ +│ │ +│ ┌──────────────────┐ │ +│ │ 이름 │ │ +│ │ [입력 필드] │ │ +│ └──────────────────┘ │ +│ │ +│ ┌──────────────────┐ │ +│ │ 전화번호 │ │ +│ │ [010-XXXX-XXXX] │ │ +│ └──────────────────┘ │ +│ │ +│ ┌──────────────────┐ │ +│ │ 이메일 │ │ +│ │ [example@xx.com] │ │ +│ └──────────────────┘ │ +│ │ +│ ┌──────────────────┐ │ +│ │ ☐ KT 본인 인증 │ │ +│ │ (인증 시 혜택 +) │ │ +│ └──────────────────┘ │ +│ │ +│ ☑ 개인정보 수집 동의 │ +│ (필수) [자세히보기] │ +│ │ +├─────────────────────────┤ +│ [ 다음 단계 ] │ +└─────────────────────────┘ ``` **인터랙션** -- 입력 필드 실시간 검증 (형식 확인) - - 이름: 2자 이상 - - 전화번호: 010-XXXX-XXXX - - 이메일: example@domain.com -- `KT 본인 인증` 버튼 → KT 인증 시스템 연동 -- 인증 완료 시 인증 토큰 저장 -- `다음 단계로` → `02-매장정보등록` -- 중복 가입 시 "이미 가입된 전화번호입니다" 알림 +- 입력 필드 포커스 시 라벨 상단 이동 (Material Design) +- 실시간 형식 검증 (전화번호, 이메일) +- KT 인증 선택 시 바텀 시트로 인증 프로세스 표시 +- 모든 필드 입력 완료 시 "다음 단계" 버튼 활성화 + +**반응형 처리** +- 태블릿(768px~): 입력 필드 최대 너비 500px 중앙 정렬 +- 데스크톱(1024px~): 좌측에 서비스 소개 이미지, 우측에 폼 배치 + +**접근성** +- 모든 입력 필드에 적절한 label과 placeholder +- 에러 메시지는 aria-live로 스크린 리더에 즉시 전달 +- Tab 키 순서 논리적으로 설정 + +--- #### 02-매장정보등록 **개요** -- 목적: 맞춤형 이벤트를 위한 매장 정보 수집 -- 관련 유저스토리: UFR-USER-020 -- 비즈니스 중요도: ⭐⭐⭐⭐ +- **목적**: 맞춤형 이벤트 생성을 위한 매장 정보 수집 및 검증 +- **관련 유저스토리**: UFR-USER-020 +- **비즈니스 중요도**: Must (M/13) **주요 기능** -- 매장 기본 정보 입력 -- 사업자번호 검증 -- 무료 체험 쿠폰 자동 발급 +1. 매장 기본 정보 입력 (매장명, 업종, 주소, 영업시간) +2. 사업자번호 검증 (국세청 API 연동) +3. 메뉴/상품 정보 입력 (선택) +4. 매장 이미지 업로드 (선택) +5. 무료 체험 쿠폰 자동 발급 **UI 구성요소** + +**모바일 (320px~767px)** ``` -┌─────────────────────────────┐ -│ ← 매장정보 등록 │ -├─────────────────────────────┤ -│ 매장명 * │ -│ [___________________] │ -│ │ -│ 업종 * ℹ️ │ -│ [드롭다운 ▼] │ -│ 음식점 / 카페 / 소매업... │ -│ │ -│ 주소 * 🔍 │ -│ [___________________] │ -│ [도로명 주소 검색] │ -│ │ -│ 영업시간 │ -│ 월 [09:00] ~ [21:00] ✓ │ -│ 화 [09:00] ~ [21:00] ✓ │ -│ 수 [09:00] ~ [21:00] ✓ │ -│ ... │ -│ │ -│ 사업자번호 * ℹ️ │ -│ [___-__-_____] │ -│ [검증하기] │ -│ │ -│ ✅ 사업자번호 확인 완료 │ -│ 매장명: OO치킨 │ -│ 대표자: 홍길동 │ -│ │ -├─────────────────────────────┤ -│ [ 등록 완료 ] │ -└─────────────────────────────┘ +┌─────────────────────────┐ +│ ← [뒤로] 매장정보등록 │ +├─────────────────────────┤ +│ 진행상황: ━━━━━━━━━ 2/2 │ +├─────────────────────────┤ +│ │ +│ 필수 정보 │ +│ │ +│ [매장명 입력] │ +│ │ +│ [업종 선택 ▼] │ +│ 음식점/카페/소매업... │ +│ │ +│ [주소 검색 🔍] │ +│ (도로명 주소) │ +│ │ +│ 영업시간 │ +│ 월: [09:00] ~ [21:00] │ +│ 화: [09:00] ~ [21:00] │ +│ ... (요일별 설정) │ +│ │ +│ [사업자번호] │ +│ XXX-XX-XXXXX │ +│ [검증하기] ← AI 자동검증│ +│ │ +│ ───────────────────── │ +│ 선택 정보 (이벤트 맞춤화)│ +│ │ +│ 메뉴/상품 (최대 10개) │ +│ + [메뉴 추가] │ +│ │ +│ 매장 특징 │ +│ [텍스트 입력 영역] │ +│ (최대 200자) │ +│ │ +│ 대표 이미지 (최대 3장) │ +│ [📷] [📷] [📷] │ +│ │ +├─────────────────────────┤ +│ [ 등록 완료하기 ] │ +└─────────────────────────┘ ``` **인터랙션** -- 업종 드롭다운 → 카테고리 리스트 표시 -- 주소 검색 버튼 → 도로명 주소 API 모달 -- 영업시간 체크박스 → 요일별 활성화/비활성화 -- `검증하기` 버튼 → 국세청 API 연동 - - 형식 검증 (XXX-XX-XXXXX) - - 사업자번호 유효성 확인 - - 휴폐업 여부 확인 - - 매장명 일치 확인 -- 검증 성공 → ✅ 표시 및 사업자 정보 자동 입력 -- 검증 실패 → ❌ 오류 메시지 (유효하지 않은 번호 / 휴폐업 등) -- `등록 완료` → 무료 체험 쿠폰 발급 알림 → `00-메인대시보드` +1. **주소 검색**: 바텀 시트로 주소 검색 UI 표시 (카카오 주소 API) +2. **사업자번호 검증**: + - 입력 완료 시 자동 검증 시작 + - 로딩 인디케이터 표시 + - 검증 성공: ✅ "확인됨" 표시 + - 검증 실패: ❌ 명확한 오류 메시지 +3. **메뉴 추가**: 바텀 시트로 메뉴명, 가격, 설명 입력 +4. **이미지 업로드**: + - 카메라 또는 갤러리 선택 + - 업로드 진행률 표시 + - 미리보기 제공 + +**반응형 처리** +- 태블릿: 2단 레이아웃 (필수정보 | 선택정보) +- 데스크톱: 3단 레이아웃 + 우측에 진행 상황 및 혜택 안내 + +**검증 및 피드백** +- 매장명: 2자 이상 필수 +- 사업자번호: 형식 검증 → 국세청 API 검증 +- 검증 실패 시 재입력 유도, 이전 입력값 유지 --- -### 3.3 Event Planning 서비스 +### 4.2 Event Planning Service + +--- #### 03-이벤트목적선택 **개요** -- 목적: 이벤트 방향성 설정 -- 관련 유저스토리: UFR-PLAN-010 -- 비즈니스 중요도: ⭐⭐⭐⭐⭐ +- **목적**: 이벤트 기획의 방향성 설정 +- **관련 유저스토리**: UFR-PLAN-010 +- **비즈니스 중요도**: Must (M/3) **주요 기능** -- 4가지 목적 중 선택 -- 목적별 설명 및 효과 제시 +1. 4가지 목적 중 하나 선택 (라디오 버튼) +2. 각 목적별 설명 및 예상 효과 제시 **UI 구성요소** + +**모바일** ``` -┌─────────────────────────────┐ -│ ← 이벤트 목적 선택 │ -├─────────────────────────────┤ -│ │ -│ 어떤 목적의 이벤트를 │ -│ 만드실 건가요? 🎯 │ -│ │ -│ ┌─────────────────────┐ │ -│ │ 👥 신규고객 유치 ℹ️ │ │ -│ │ 새로운 고객을 확보하고│ │ -│ │ 매장 인지도를 높입니다│ │ -│ │ 예상 효과: 신규 방문 │ │ -│ │ +25% ↑ │ │ -│ └─────────────────────┘ │ -│ │ -│ ┌─────────────────────┐ │ -│ │ 🔄 재방문 유도 ℹ️ │ │ -│ │ 기존 고객의 재방문을 │ │ -│ │ 촉진합니다 │ │ -│ │ 예상 효과: 재방문율 │ │ -│ │ +40% ↑ │ │ -│ └─────────────────────┘ │ -│ │ -│ ┌─────────────────────┐ │ -│ │ 💰 매출 증대 ℹ️ │ │ -│ │ 단기 매출 향상에 │ │ -│ │ 집중합니다 │ │ -│ │ 예상 효과: 매출 │ │ -│ │ +35% ↑ │ │ -│ └─────────────────────┘ │ -│ │ -│ ┌─────────────────────┐ │ -│ │ 📢 인지도 향상 ℹ️ │ │ -│ │ 브랜드 인지도를 │ │ -│ │ 제고합니다 │ │ -│ │ 예상 효과: SNS 공유 │ │ -│ │ +50% ↑ │ │ -│ └─────────────────────┘ │ -│ │ -├─────────────────────────────┤ -│ [ 다음 ] │ -└─────────────────────────────┘ +┌─────────────────────────┐ +│ ← [닫기] 새 이벤트 기획 │ +├─────────────────────────┤ +│ 단계 1/6: 목적 선택 │ +│ ━━━━━━━━━━━━━━━━━━━━━ │ +│ │ +│ 이벤트 목적을 선택하세요 │ +│ │ +│ ┌─────────────────────┐│ +│ │ ○ 신규고객 유치 ││ +│ │ 새로운 고객 확보 ││ +│ │ 예상효과: 👤+30% ││ +│ └─────────────────────┘│ +│ │ +│ ┌─────────────────────┐│ +│ │ ○ 재방문 유도 ││ +│ │ 기존 고객 재방문 ││ +│ │ 예상효과: 🔄+25% ││ +│ └─────────────────────┘│ +│ │ +│ ┌─────────────────────┐│ +│ │ ○ 매출 증대 ││ +│ │ 단기 매출 향상 ││ +│ │ 예상효과: 💰+40% ││ +│ └─────────────────────┘│ +│ │ +│ ┌─────────────────────┐│ +│ │ ○ 인지도 향상 ││ +│ │ 브랜드 인지도 제고 ││ +│ │ 예상효과: 📢+50% ││ +│ └─────────────────────┘│ +│ │ +├─────────────────────────┤ +│ [ 다음 (AI분석) ] │ +└─────────────────────────┘ ``` **인터랙션** -- 카드 터치 → 라디오 버튼 선택 + 카드 강조 (테두리 색상) -- ℹ️ 아이콘 터치 → 상세 설명 모달 - - 예시 이벤트 - - 성공 사례 - - 권장 경품 유형 -- 선택 전: `다음` 버튼 비활성화 (회색) -- 선택 후: `다음` 버튼 활성화 (파란색) -- `다음` 버튼 → AI 트렌드 분석 시작 (로딩 3초) → `04-AI트렌드분석결과` +- 카드 선택 시 라디오 버튼 활성화 및 카드 하이라이트 +- 선택 완료 시 "다음" 버튼 활성화 +- 각 카드 롱프레스/호버 시 상세 툴팁 표시 + +**성능** +- 초기 로딩 < 1초 +- 선택 즉시 다음 단계 준비 (프리페치) + +--- #### 04-AI트렌드분석결과 **개요** -- 목적: 업종/지역 트렌드 기반 성공 전략 제시 -- 관련 유저스토리: UFR-PLAN-020 -- 비즈니스 중요도: ⭐⭐⭐⭐ +- **목적**: AI가 분석한 업종/지역 트렌드 제시 +- **관련 유저스토리**: UFR-PLAN-020 +- **비즈니스 중요도**: Must (M/13) **주요 기능** -- AI 트렌드 분석 결과 표시 -- 추천 이벤트 방향 제시 -- 예상 성공률 표시 +1. 업종, 지역, 시즌 기반 트렌드 분석 +2. 주요 트렌드 3-5가지 제시 +3. 예상 성공률 표시 **UI 구성요소** + +**모바일** ``` -┌─────────────────────────────┐ -│ ← AI 트렌드 분석 │ -├─────────────────────────────┤ -│ │ -│ 🤖 AI가 분석한 결과예요 │ -│ │ -│ 📍 우리 매장 정보 │ -│ 업종: 음식점 (치킨) │ -│ 지역: 수원시 영통구 │ -│ 시즌: 가을 (10월) │ -│ │ -│ 📊 주요 트렌드 (Top 3) │ -│ ┌─────────────────────┐ │ -│ │ 1️⃣ 할로윈 테마 │ │ -│ │ 10월 성공률 85% ⬆️ │ │ -│ │ 유사 업종 성공 사례 │ │ -│ │ 12건 │ │ -│ └─────────────────────┘ │ -│ ┌─────────────────────┐ │ -│ │ 2️⃣ 단체 할인 │ │ -│ │ 영통구 인기 78% ⬆️ │ │ -│ │ 평균 참여율 +42% │ │ -│ └─────────────────────┘ │ -│ ┌─────────────────────┐ │ -│ │ 3️⃣ SNS 친구 초대 │ │ -│ │ 바이럴 효과 72% ⬆️ │ │ -│ │ 공유율 평균 2.3배 │ │ -│ └─────────────────────┘ │ -│ │ -│ 💡 추천 전략 │ -│ 할로윈 테마 + 단체 할인 조합│ -│ 예상 성공률: 89% 🎯 │ -│ │ -├─────────────────────────────┤ -│ [ 경품 추천 받기 ] │ -└─────────────────────────────┘ +┌─────────────────────────┐ +│ ← [뒤로] AI 트렌드 분석 │ +├─────────────────────────┤ +│ 단계 2/6: 트렌드 분석 │ +│ ━━━━━━━━━━━━━━━━━━━━━ │ +│ │ +│ 🤖 AI가 분석중입니다... │ +│ [프로그레스 바] │ +│ │ +│ (분석 완료 후) │ +│ │ +│ 📊 분석 결과 │ +│ │ +│ 매장: 수원 왕갈비통닭 │ +│ 업종: 치킨 전문점 │ +│ 지역: 수원시 팔달구 │ +│ 시즌: 겨울 (12월) │ +│ │ +│ ┌─────────────────────┐│ +│ │ 주요 트렌드 ││ +│ │ ││ +│ │ 1️⃣ 연말 모임 증가 ││ +│ │ → 단체 할인 이벤트 ││ +│ │ 효과적 ││ +│ │ ││ +│ │ 2️⃣ 배달 주문 급증 ││ +│ │ → 배달 경품 추천 ││ +│ │ ││ +│ │ 3️⃣ SNS 공유 활발 ││ +│ │ → 바이럴 참여방법 ││ +│ │ 권장 ││ +│ └─────────────────────┘│ +│ │ +│ 예상 성공률: 78% 🎯 │ +│ (동일 업종 평균 대비) │ +│ │ +├─────────────────────────┤ +│ [ 다음 (경품추천) ] │ +└─────────────────────────┘ ``` **인터랙션** -- 트렌드 카드 터치 → 상세 설명 확장 - - 성공 사례 리스트 - - 참여율 그래프 -- `경품 추천 받기` → AI 경품 추천 시작 (로딩 3초) → `05-AI경품추천` +- AI 분석 진행 시 애니메이션 표시 (3-13초 소요) +- 분석 결과 순차적 페이드인 애니메이션 +- 각 트렌드 탭 시 상세 정보 바텀 시트 + +**성능** +- AI 분석 시간: 목표 3초 이내 +- 실패 시 재시도 버튼 제공 + +--- #### 05-AI경품추천 **개요** -- 목적: 예산 대비 최적 경품 선정 -- 관련 유저스토리: UFR-PLAN-030 -- 비즈니스 중요도: ⭐⭐⭐⭐⭐ +- **목적**: 예산 대비 최적 경품 AI 추천 및 수정 +- **관련 유저스토리**: UFR-PLAN-030 +- **비즈니스 중요도**: Must (M/21) **주요 기능** -- 예산 설정 -- AI 추천 경품 Top 5 제시 -- 예상 참여율 표시 +1. 예산 입력 +2. AI가 Top 5 경품 추천 +3. 경품 선택 및 수정 가능 **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% │ │ -│ └─────────────────────┘ │ -│ │ -├─────────────────────────────┤ -│ [ 선택 완료 ] │ -└─────────────────────────────┘ +┌─────────────────────────┐ +│ ← [뒤로] AI 경품 추천 │ +├─────────────────────────┤ +│ 단계 3/6: 경품 선택 │ +│ ━━━━━━━━━━━━━━━━━━━━━ │ +│ │ +│ 예산 설정 │ +│ ┌─────────────────────┐│ +│ │ 100,000원 ││ +│ │ [슬라이더] ││ +│ │ 1만원 ━━●━━ 500만원││ +│ └─────────────────────┘│ +│ │ +│ 🤖 AI 추천 경품 (Top 5) │ +│ │ +│ ┌─────────────────────┐│ +│ │ 1. 치킨세트 무료교환 ││ +│ │ 매력도: ⭐⭐⭐⭐⭐││ +│ │ 예상참여율: 45% ││ +│ │ [선택] [수정] ││ +│ └─────────────────────┘│ +│ │ +│ ┌─────────────────────┐│ +│ │ 2. 5천원 할인쿠폰 ││ +│ │ 매력도: ⭐⭐⭐⭐ ││ +│ │ 예상참여율: 38% ││ +│ │ [선택] [수정] ││ +│ └─────────────────────┘│ +│ │ +│ ┌─────────────────────┐│ +│ │ 3. KT 멤버십 포인트 ││ +│ │ 매력도: ⭐⭐⭐ ││ +│ │ 예상참여율: 32% ││ +│ │ [선택] [수정] ││ +│ └─────────────────────┘│ +│ │ +│ ... (스크롤) │ +│ │ +│ [+ 직접 입력하기] │ +│ │ +├─────────────────────────┤ +│ [ 다음 (참여방법) ] │ +└─────────────────────────┘ ``` **인터랙션** -- 예산 슬라이더 조정 → 실시간 경품 목록 업데이트 (1초 디바운스) -- 경품 카드 터치 → 라디오 버튼 선택 + 상세 정보 확장 - - 경품 이미지 - - 타겟 고객층 매력도 - - 유사 이벤트 성공 사례 -- `선택 완료` → AI 참여방법 설계 시작 (로딩 2초) → `06-AI참여방법설계` +1. **예산 슬라이더**: 실시간 경품 추천 업데이트 +2. **경품 수정**: 바텀 시트로 경품명, 수량, 가격 수정 +3. **직접 입력**: 새 경품 추가 폼 표시 +4. **선택 시**: 카드 하이라이트, 예상 효과 재계산 + +**검증** +- 예산 초과 시 경고 메시지 +- 경품 수정 시 실시간 예상참여율 재계산 + +--- #### 06-AI참여방법설계 **개요** -- 목적: 참여 난이도와 바이럴 효과를 고려한 참여 방법 선택 -- 관련 유저스토리: UFR-PLAN-040 -- 비즈니스 중요도: ⭐⭐⭐⭐ +- **목적**: 간단하면서도 재방문을 유도하는 참여 방법 AI 제안 +- **관련 유저스토리**: UFR-PLAN-040 +- **비즈니스 중요도**: Must (M/21) **주요 기능** -- 3가지 참여 방법 옵션 제시 -- 난이도 및 예상 참여율 표시 +1. 3가지 참여 방법 옵션 제시 +2. 각 옵션별 난이도 및 예상 참여율 표시 +3. 1개 선택 **UI 구성요소** + +**모바일** ``` -┌─────────────────────────────┐ -│ ← 참여 방법 설계 │ -├─────────────────────────────┤ -│ │ -│ 🎯 참여 방법을 선택하세요 │ -│ │ -│ ┌─────────────────────┐ │ -│ │ ○ 옵션 1: 간편 참여 │ │ -│ │ │ │ -│ │ QR 코드 스캔 → │ │ -│ │ 정보 입력 → 완료 │ │ -│ │ │ │ -│ │ 난이도: ⭐ 쉬움 │ │ -│ │ 예상 참여율: 75% │ │ -│ │ 바이럴 효과: 낮음 │ │ -│ └─────────────────────┘ │ -│ │ -│ ┌─────────────────────┐ │ -│ │ ○ 옵션 2: 재방문 유도│ │ -│ │ │ │ -│ │ 매장 방문 → │ │ -│ │ 리뷰 작성 → 응모 │ │ -│ │ │ │ -│ │ 난이도: ⭐⭐ 보통 │ │ -│ │ 예상 참여율: 58% │ │ -│ │ 바이럴 효과: 중간 │ │ -│ │ 🎁 재방문 가산점 │ │ -│ └─────────────────────┘ │ -│ │ -│ ┌─────────────────────┐ │ -│ │ ○ 옵션 3: 바이럴형 │ │ -│ │ │ │ -│ │ SNS 공유 → │ │ -│ │ 친구 3명 태그 → 응모│ │ -│ │ │ │ -│ │ 난이도: ⭐⭐⭐ 어려움│ │ -│ │ 예상 참여율: 42% │ │ -│ │ 바이럴 효과: 높음 │ │ -│ │ 🔥 확산력 3.2배 │ │ -│ └─────────────────────┘ │ -│ │ -├─────────────────────────────┤ -│ [ 선택 완료 ] │ -└─────────────────────────────┘ +┌─────────────────────────┐ +│ ← [뒤로] AI 참여방법 설계│ +├─────────────────────────┤ +│ 단계 4/6: 참여방법 선택 │ +│ ━━━━━━━━━━━━━━━━━━━━━ │ +│ │ +│ 🤖 AI 추천 참여방법 │ +│ │ +│ ┌─────────────────────┐│ +│ │ 옵션 1: 간편형 ││ +│ │ 📱 QR 코드 스캔 ││ +│ │ ││ +│ │ 난이도: ⭐ (쉬움) ││ +│ │ 예상참여율: 60% ││ +│ │ 재방문율: 20% ││ +│ │ ││ +│ │ ✓ 빠른 참여 ││ +│ │ ✓ 매장 방문 불필요 ││ +│ │ [선택하기] ││ +│ └─────────────────────┘│ +│ │ +│ ┌─────────────────────┐│ +│ │ 옵션 2: 재방문 유도형││ +│ │ 🏪 매장 방문 + 리뷰 ││ +│ │ ││ +│ │ 난이도: ⭐⭐ (보통) ││ +│ │ 예상참여율: 35% ││ +│ │ 재방문율: 80% ││ +│ │ ││ +│ │ ✓ 높은 재방문율 ││ +│ │ ✓ 리뷰 축적 ││ +│ │ [선택하기] ││ +│ └─────────────────────┘│ +│ │ +│ ┌─────────────────────┐│ +│ │ 옵션 3: 바이럴형 ││ +│ │ 📢 SNS 공유 + 태그 ││ +│ │ ││ +│ │ 난이도: ⭐⭐⭐ ││ +│ │ 예상참여율: 25% ││ +│ │ 바이럴 확산: 150% ││ +│ │ ││ +│ │ ✓ 입소문 효과 ││ +│ │ ✓ 신규고객 유입 ││ +│ │ [선택하기] ││ +│ └─────────────────────┘│ +│ │ +├─────────────────────────┤ +│ [ 다음 (홍보문구) ] │ +└─────────────────────────┘ ``` **인터랙션** -- 옵션 카드 터치 → 라디오 버튼 선택 + 상세 시나리오 확장 -- 각 옵션별 예상 시나리오 애니메이션 -- `선택 완료` → AI 홍보문구 생성 시작 (로딩 2초) → `07-AI홍보문구생성` +- 옵션 카드 탭 시 상세 설명 확장 +- 선택 시 카드 하이라이트 및 체크마크 표시 +- 옵션 간 비교를 위한 나란히 보기 모드 제공 + +--- #### 07-AI홍보문구생성 **개요** -- 목적: 매력적인 홍보 문구 및 해시태그 생성 -- 관련 유저스토리: UFR-PLAN-050 -- 비즈니스 중요도: ⭐⭐⭐⭐ +- **목적**: GPT-4 기반 홍보 문구 및 해시태그 자동 생성 +- **관련 유저스토리**: UFR-PLAN-050 +- **비즈니스 중요도**: Must (M/13) **주요 기능** -- AI 생성 홍보 문구 5가지 버전 -- SNS 해시태그 자동 생성 -- 플랫폼별 최적화 미리보기 +1. 5개 버전 홍보 문구 생성 +2. SNS 해시태그 자동 생성 +3. 플랫폼별 최적화 (Instagram, Blog, Kakao) +4. 선택 및 편집 가능 **UI 구성요소** + +**모바일** ``` -┌─────────────────────────────┐ -│ ← AI 홍보 문구 생성 │ -├─────────────────────────────┤ -│ │ -│ ✨ AI가 만든 홍보 문구 │ -│ │ -│ ┌─────────────────────┐ │ -│ │ ○ 버전 1 (친근함) │ │ -│ │ │ │ -│ │ "🎃 할로윈 특별 이벤트!│ │ -│ │ 치킨 먹고 경품 받자~ │ │ -│ │ 지금 바로 참여하세요!"│ │ -│ │ │ │ -│ │ [미리보기] │ │ -│ └─────────────────────┘ │ -│ │ -│ ┌─────────────────────┐ │ -│ │ ○ 버전 2 (공식적) │ │ -│ │ │ │ -│ │ "왕갈비통닭의 가을 │ │ -│ │ 고객 감사 이벤트. │ │ -│ │ 총 500만원 상당의 │ │ -│ │ 경품을 드립니다." │ │ -│ │ │ │ -│ │ [미리보기] │ │ -│ └─────────────────────┘ │ -│ │ -│ ┌─────────────────────┐ │ -│ │ ○ 버전 3 (트렌디) │ │ -│ │ │ │ -│ │ "요즘 핫한 우리 매장💯│ │ -│ │ 이벤트로 더 핫하게! │ │ -│ │ 놓치면 후회할걸?🔥" │ │ -│ │ │ │ -│ │ [미리보기] │ │ -│ └─────────────────────┘ │ -│ │ -│ ┌─────────────────────┐ │ -│ │ ○ 버전 4 (감성적) │ │ -│ │ ... │ │ -│ └─────────────────────┘ │ -│ │ -│ ┌─────────────────────┐ │ -│ │ ○ 버전 5 (유머러스) │ │ -│ │ ... │ │ -│ └─────────────────────┘ │ -│ │ -│ 📱 추천 해시태그 │ -│ #왕갈비통닭 #수원맛집 │ -│ #할로윈이벤트 #치킨이벤트 │ -│ #영통구맛집 │ -│ │ -├─────────────────────────────┤ -│ [문구 직접 편집] [선택 완료]│ -└─────────────────────────────┘ +┌─────────────────────────┐ +│ ← [뒤로] AI 홍보문구 생성│ +├─────────────────────────┤ +│ 단계 5/6: 홍보문구 선택 │ +│ ━━━━━━━━━━━━━━━━━━━━━ │ +│ │ +│ 🤖 AI가 생성중입니다... │ +│ [프로그레스 바] │ +│ │ +│ (생성 완료 후) │ +│ │ +│ 📝 생성된 홍보 문구 │ +│ │ +│ ┌─────────────────────┐│ +│ │ 버전 1: 친근한 톤 ││ +│ │ ─────────────────── ││ +│ │ "🎉 연말 대박 이벤트!││ +│ │ 수원 왕갈비통닭에서 ││ +│ │ 치킨세트를 공짜로! ││ +│ │ 지금 바로 참여하세요"││ +│ │ ││ +│ │ 해시태그: #수원맛집 ││ +│ │ #치킨이벤트 #연말특가││ +│ │ ││ +│ │ [선택] [편집] ││ +│ └─────────────────────┘│ +│ │ +│ ┌─────────────────────┐│ +│ │ 버전 2: 공식적인 톤 ││ +│ │ ─────────────────── ││ +│ │ "왕갈비통닭 12월 ││ +│ │ 프로모션을 시작합니다││ +│ │ 선착순 100명에게 ││ +│ │ 치킨세트 무료 증정" ││ +│ │ ││ +│ │ [선택] [편집] ││ +│ └─────────────────────┘│ +│ │ +│ ... (스크롤로 5개) │ +│ │ +│ [🔄 다시 생성하기] │ +│ │ +├─────────────────────────┤ +│ [ 다음 (최종확인) ] │ +└─────────────────────────┘ ``` **인터랙션** -- 버전 카드 터치 → 라디오 버튼 선택 -- `미리보기` 버튼 → 플랫폼별 미리보기 모달 - - Instagram 피드 모의 화면 - - Naver Blog 게시글 형식 - - Kakao Channel 메시지 형식 -- `문구 직접 편집` → 텍스트 에디터 모달 -- `선택 완료` → `08-이벤트기획안승인` +1. **생성 과정**: 로딩 애니메이션 + 진행 상태 (13초 이내) +2. **편집**: 바텀 시트로 텍스트 편집기 표시 +3. **미리보기**: 플랫폼별 미리보기 (Instagram 피드, 블로그 등) +4. **다시 생성**: 새로운 5개 문구 생성 (다른 톤앤매너) + +**성능** +- AI 생성 시간: 목표 13초 이내 +- 편집 실시간 반영 + +--- #### 08-이벤트기획안승인 **개요** -- 목적: 완성된 기획안 최종 검토 및 승인 -- 관련 유저스토리: UFR-PLAN-060 -- 비즈니스 중요도: ⭐⭐⭐⭐⭐ +- **목적**: 완성된 기획안 최종 검토 및 승인 +- **관련 유저스토리**: UFR-PLAN-060 +- **비즈니스 중요도**: Must (M/5) **주요 기능** -- 전체 기획 내용 요약 표시 -- 수정 및 승인 기능 -- 예상 효과 제시 +1. 전체 기획안 요약 제시 +2. 예상 예산 및 효과 표시 +3. 승인 또는 이전 단계 수정 **UI 구성요소** + +**모바일** ``` -┌─────────────────────────────┐ -│ ← 기획안 최종 검토 │ -├─────────────────────────────┤ -│ │ -│ ✅ 이벤트 기획이 완료되었어요│ -│ │ -│ 📋 기획안 요약 │ -│ ┌─────────────────────┐ │ -│ │ 🎯 목적: 신규고객 유치│ │ -│ │ [수정] │ │ -│ └─────────────────────┘ │ -│ ┌─────────────────────┐ │ -│ │ 🎁 경품: 치킨세트 무료│ │ -│ │ 예산: 500,000원 │ │ -│ │ [수정] │ │ -│ └─────────────────────┘ │ -│ ┌─────────────────────┐ │ -│ │ 🎯 참여방법: QR 스캔 │ │ -│ │ 난이도: 쉬움 │ │ -│ │ [수정] │ │ -│ └─────────────────────┘ │ -│ ┌─────────────────────┐ │ -│ │ ✨ 홍보문구 │ │ -│ │ "🎃 할로윈 특별..." │ │ -│ │ [수정] │ │ -│ └─────────────────────┘ │ -│ │ -│ 📊 예상 효과 │ -│ ┌─────────────────────┐ │ -│ │ 예상 참여자: 500명 │ │ -│ │ 예상 ROI: 245% │ │ -│ │ 매출 증가: +35% │ │ -│ └─────────────────────┘ │ -│ │ -│ ⏱️ 기획 소요 시간: 9초 │ -│ │ -├─────────────────────────────┤ -│ [이전 단계] [기획안 승인] │ -└─────────────────────────────┘ +┌─────────────────────────┐ +│ ← [뒤로] 기획안 최종확인 │ +├─────────────────────────┤ +│ 단계 6/6: 기획안 승인 │ +│ ━━━━━━━━━━━━━━━━━━━━━ │ +│ │ +│ ✅ 기획 완료! │ +│ │ +│ ┌─────────────────────┐│ +│ │ 📋 기획안 요약 ││ +│ │ ││ +│ │ 목적: 신규고객 유치 ││ +│ │ 경품: 치킨세트 무료 ││ +│ │ 참여: QR코드 스캔 ││ +│ │ 홍보: "🎉 연말..." ││ +│ │ ││ +│ │ [수정하기 ✏️] ││ +│ └─────────────────────┘│ +│ │ +│ ┌─────────────────────┐│ +│ │ 💰 예상 비용 ││ +│ │ ││ +│ │ 경품 비용: 100,000원││ +│ │ 플랫폼 비용: 무료 ││ +│ │ ────────────────── ││ +│ │ 총 예산: 100,000원 ││ +│ └─────────────────────┘│ +│ │ +│ ┌─────────────────────┐│ +│ │ 📈 예상 효과 ││ +│ │ ││ +│ │ 참여율: 60% ││ +│ │ 예상참여자: ~180명 ││ +│ │ ROI: 240% ││ +│ └─────────────────────┘│ +│ │ +│ ⏱ 전체 소요시간: 8초 │ +│ │ +├─────────────────────────┤ +│ [← 이전] [승인하기 ✓] │ +└─────────────────────────┘ ``` **인터랙션** -- 각 섹션 `수정` 버튼 → 해당 단계로 이동 -- `이전 단계` → `07-AI홍보문구생성` -- `기획안 승인` → 기획안 DB 저장 + 이벤트 ID 생성 → `09-AI이미지생성` +- 각 섹션 탭 시 해당 단계로 이동하여 수정 가능 +- 승인 시 확인 다이얼로그 표시 +- 승인 완료 후 콘텐츠 생성 단계로 자동 이동 + +**성능** +- 전체 기획 과정: 목표 10초 이내 완료 (AI 처리 포함) --- -### 3.4 Content Generation 서비스 +### 4.3 Content Generation Service + +--- #### 09-AI이미지생성 **개요** -- 목적: 브랜드 컬러/로고 기반 홍보 이미지 생성 -- 관련 유저스토리: UFR-CONT-010 -- 비즈니스 중요도: ⭐⭐⭐⭐⭐ +- **목적**: 브랜드 컬러/로고 반영한 이미지 3종 AI 생성 +- **관련 유저스토리**: UFR-CONT-010 +- **비즈니스 중요도**: Must (M/34) **주요 기능** -- 브랜드 컬러 설정 -- 로고 업로드 -- AI 이미지 3종 생성 +1. 브랜드 컬러 선택 또는 입력 +2. 로고 이미지 업로드 +3. Stable Diffusion으로 3가지 스타일 이미지 생성 +4. 미리보기 및 다운로드 **UI 구성요소** + +**모바일** ``` -┌─────────────────────────────┐ -│ ← AI 이미지 생성 │ -├─────────────────────────────┤ -│ │ -│ 🎨 브랜드 설정 │ -│ ┌─────────────────────┐ │ -│ │ 브랜드 컬러 │ │ -│ │ [🔴] #FF5733 │ │ ← 컬러 피커 -│ └─────────────────────┘ │ -│ ┌─────────────────────┐ │ -│ │ 로고 업로드 │ │ -│ │ [📁 파일 선택] │ │ -│ │ PNG, JPG (최대 5MB) │ │ -│ └─────────────────────┘ │ -│ │ -│ 🤖 AI 이미지 생성 중... │ -│ [████████████░░░] 85% │ -│ 예상 소요 시간: 15초 남음 │ -│ │ -│ ✅ 생성 완료! │ -│ │ -│ 📸 생성된 이미지 (3종) │ -│ ┌─────────────────────┐ │ -│ │ ○ 1. 심플 스타일 │ │ -│ │ [ 이미지 ]│ │ -│ │ 미니멀 디자인 │ │ -│ └─────────────────────┘ │ -│ ┌─────────────────────┐ │ -│ │ ○ 2. 화려한 스타일 │ │ -│ │ [ 이미지 ]│ │ -│ │ 풍성한 그래픽 │ │ -│ └─────────────────────┘ │ -│ ┌─────────────────────┐ │ -│ │ ○ 3. 트렌디 스타일 │ │ -│ │ [ 이미지 ]│ │ -│ │ 최신 디자인 트렌드 │ │ -│ └─────────────────────┘ │ -│ │ -├─────────────────────────────┤ -│ [재생성] [선택 완료] │ -└─────────────────────────────┘ +┌─────────────────────────┐ +│ ← [뒤로] AI 이미지 생성 │ +├─────────────────────────┤ +│ 콘텐츠 1/5: 이미지 │ +│ ━━━━━━━━━━━━━━━━━━━━━ │ +│ │ +│ 브랜드 설정 │ +│ │ +│ ┌─────────────────────┐│ +│ │ 브랜드 컬러 ││ +│ │ [🎨] #FF5733 ││ +│ │ (컬러 피커) ││ +│ └─────────────────────┘│ +│ │ +│ ┌─────────────────────┐│ +│ │ 로고 업로드 ││ +│ │ [📷 이미지 선택] ││ +│ │ (미리보기) ││ +│ └─────────────────────┘│ +│ │ +│ [AI 이미지 생성 시작] │ +│ │ +│ (생성 중) │ +│ 🤖 AI가 이미지 생성중...│ +│ ▓▓▓▓░░░░░░ 40% │ +│ 예상 소요: 2분 30초 │ +│ │ +│ (생성 완료 후) │ +│ │ +│ 생성된 이미지 (3종) │ +│ │ +│ ┌────┐ ┌────┐ ┌────┐ │ +│ │심플││화려││트렌││ │ +│ │ ││ ││디 ││ │ +│ │ ○ ││ ● ││ ○ ││ │ +│ └────┘ └────┘ └────┘ │ +│ │ +│ [다운로드] [다시생성] │ +│ │ +├─────────────────────────┤ +│ [ 다음 (영상제작) ] │ +└─────────────────────────┘ ``` **인터랙션** -- 컬러 피커 → HEX 코드 입력 또는 팔레트 선택 -- `파일 선택` → 로컬 파일 업로드 (5MB 제한) -- 생성 중 프로그레스 바 표시 (90초) -- 이미지 카드 터치 → 전체 화면 미리보기 -- `재생성` → 다시 AI 생성 (동일 설정) -- `선택 완료` → 선택한 이미지 저장 → `10-AI영상제작` (병렬 처리) +1. **브랜드 컬러**: 컬러 피커 또는 HEX 코드 직접 입력 +2. **로고 업로드**: 카메라/갤러리 선택, 최대 5MB +3. **생성 진행**: 실시간 진행률 표시 (2-3분) +4. **이미지 선택**: 탭하여 확대, 스와이프로 비교 +5. **다운로드**: 선택한 이미지 저장 + +**성능** +- AI 이미지 생성: 목표 2-3분 이내 +- 백그라운드 처리로 다른 작업 가능 (알림으로 완료 통지) + +--- #### 10-AI영상제작 **개요** -- 목적: 15초 홍보 영상 자동 제작 -- 관련 유저스토리: UFR-CONT-020 -- 비즈니스 중요도: ⭐⭐⭐⭐⭐ +- **목적**: 15초 분량의 홍보 영상 AI 제작 (SNS 및 우리동네TV용) +- **관련 유저스토리**: UFR-CONT-020 +- **비즈니스 중요도**: Must (M/34) **주요 기능** -- 배경 음악 선택 -- 텍스트 오버레이 편집 -- 15초 영상 생성 +1. 배경 음악 선택 +2. 텍스트 오버레이 편집 +3. 우리동네TV용 해상도 선택 (1920x1080, 16:9) +4. 15초 영상 자동 제작 **UI 구성요소** + +**모바일** ``` -┌─────────────────────────────┐ -│ ← AI 영상 제작 │ -├─────────────────────────────┤ -│ │ -│ 🎬 영상 설정 │ -│ ┌─────────────────────┐ │ -│ │ 배경 음악 선택 🎵 │ │ -│ │ [드롭다운 ▼] │ │ -│ │ • 경쾌한 팝 │ │ -│ │ • 차분한 재즈 │ │ -│ │ • 신나는 일렉 │ │ -│ │ [미리듣기 ▶️] │ │ -│ └─────────────────────┘ │ -│ │ -│ ┌─────────────────────┐ │ -│ │ 텍스트 오버레이 │ │ -│ │ [________________] │ │ -│ │ "🎃 할로윈 특별..." │ │ ← 기획안 연동 -│ │ [편집] │ │ -│ └─────────────────────┘ │ -│ │ -│ 🤖 AI 영상 제작 중... │ -│ [██████████░░░░] 70% │ -│ 예상 소요 시간: 27초 남음 │ -│ │ -│ ✅ 제작 완료! │ -│ │ -│ 🎥 영상 미리보기 │ -│ ┌─────────────────────┐ │ -│ │ │ │ -│ │ [ ▶️ 재생 ] │ │ -│ │ │ │ -│ │ 00:00 ━━●━━ 00:15 │ │ -│ └─────────────────────┘ │ -│ │ -│ 💾 다운로드 가능 │ -│ • 영상 파일 (MP4) │ -│ • 자막 파일 (SRT) │ -│ │ -├─────────────────────────────┤ -│ [재제작] [다음 단계] │ -└─────────────────────────────┘ +┌─────────────────────────┐ +│ ← [뒤로] AI 영상 제작 │ +├─────────────────────────┤ +│ 콘텐츠 2/5: 영상 │ +│ ━━━━━━━━━━━━━━━━━━━━━ │ +│ │ +│ 영상 설정 │ +│ │ +│ ┌─────────────────────┐│ +│ │ 배경 음악 ││ +│ │ [▶️ 경쾌한 음악 1] ││ +│ │ [ 신나는 음악 2] ││ +│ │ [ 차분한 음악 3] ││ +│ └─────────────────────┘│ +│ │ +│ ┌─────────────────────┐│ +│ │ 텍스트 오버레이 ││ +│ │ "🎉 연말 대박..." ││ +│ │ [편집하기] ││ +│ └─────────────────────┘│ +│ │ +│ ┌─────────────────────┐│ +│ │ 해상도 선택 ││ +│ │ ☑ SNS용 (1080x1080) ││ +│ │ ☑ 우리동네TV ││ +│ │ (1920x1080, 16:9) ││ +│ └─────────────────────┘│ +│ │ +│ [AI 영상 제작 시작] │ +│ │ +│ (제작 중) │ +│ 🎬 AI가 영상 제작중... │ +│ ▓▓▓▓▓░░░░░ 50% │ +│ 예상 소요: 3분 │ +│ │ +│ (완료 후) │ +│ ┌─────────────────────┐│ +│ │ [▶️ 15초 미리보기] ││ +│ │ ─────────────────── ││ +│ │ SNS용, 우리동네TV용 ││ +│ │ 영상 각 1개 생성완료 ││ +│ └─────────────────────┘│ +│ │ +│ [다운로드] [다시제작] │ +│ │ +├─────────────────────────┤ +│ [ 다음 (SNS콘텐츠) ] │ +└─────────────────────────┘ ``` **인터랙션** -- 배경 음악 드롭다운 → 목록 선택 -- `미리듣기` → 음악 재생 (5초 미리듣기) -- 텍스트 오버레이 `편집` → 텍스트 에디터 모달 -- 생성 중 프로그레스 바 (90초, 이미지 생성과 병렬) -- 영상 재생 컨트롤 (재생/일시정지, 시크바) -- `재제작` → 설정 변경 후 다시 생성 -- `다음 단계` → `11-SNS콘텐츠생성` +1. **배경 음악**: 재생 버튼으로 미리듣기 +2. **텍스트 편집**: 바텀 시트로 텍스트, 폰트, 위치 조정 +3. **제작 진행**: 실시간 진행률 + 예상 소요 시간 (3-5분) +4. **미리보기**: 전체 화면으로 재생, 재생/일시정지 컨트롤 + +**성능** +- AI 영상 제작: 목표 3-5분 이내 +- 백그라운드 처리 + 푸시 알림 + +--- #### 11-SNS콘텐츠생성 **개요** -- 목적: 플랫폼별 최적화 콘텐츠 생성 -- 관련 유저스토리: UFR-CONT-030 -- 비즈니스 중요도: ⭐⭐⭐⭐ +- **목적**: Instagram, Naver Blog, Kakao Channel용 최적화 콘텐츠 생성 +- **관련 유저스토리**: UFR-CONT-030 +- **비즈니스 중요도**: Must (M/21) **주요 기능** -- 플랫폼 선택 -- 자동 해상도 조정 -- 게시 텍스트 생성 +1. SNS 플랫폼 선택 (Instagram 필수, 나머지 선택) +2. 플랫폼별 해상도 자동 조정 +3. 해시태그 자동 삽입 +4. 일괄 다운로드 **UI 구성요소** + +**모바일** ``` -┌─────────────────────────────┐ -│ ← SNS 콘텐츠 생성 │ -├─────────────────────────────┤ -│ │ -│ 📱 플랫폼 선택 │ -│ ┌─────────────────────┐ │ -│ │ ✅ Instagram (필수) │ │ -│ │ 1080x1080 정사각형 │ │ -│ └─────────────────────┘ │ -│ ┌─────────────────────┐ │ -│ │ ☐ Naver Blog │ │ -│ │ 800x600 가로형 │ │ -│ └─────────────────────┘ │ -│ ┌─────────────────────┐ │ -│ │ ☐ Kakao Channel │ │ -│ │ 800x800 정사각형 │ │ -│ └─────────────────────┘ │ -│ │ -│ 🎨 생성 완료! (2종) │ -│ │ -│ 📸 Instagram │ -│ ┌─────────────────────┐ │ -│ │ [ 이미지 ] │ │ -│ │ 1080x1080px │ │ -│ └─────────────────────┘ │ -│ 📝 게시 텍스트 │ -│ "🎃 할로윈 특별 이벤트! │ -│ #왕갈비통닭 #수원맛집..." │ -│ [미리보기] │ -│ │ -│ 📸 Naver Blog │ -│ ┌─────────────────────┐ │ -│ │ [ 이미지 ] │ │ -│ │ 800x600px │ │ -│ └─────────────────────┘ │ -│ 📝 게시 텍스트 │ -│ "수원 왕갈비통닭의..." │ -│ [미리보기] │ -│ │ -├─────────────────────────────┤ -│ [💾 전체 다운로드] [다음] │ -└─────────────────────────────┘ +┌─────────────────────────┐ +│ ← [뒤로] SNS 콘텐츠 생성 │ +├─────────────────────────┤ +│ 콘텐츠 3/5: SNS │ +│ ━━━━━━━━━━━━━━━━━━━━━ │ +│ │ +│ 플랫폼 선택 │ +│ │ +│ ┌─────────────────────┐│ +│ │ ✅ Instagram ││ +│ │ 1080x1080 (정사각형) ││ +│ │ [미리보기] ││ +│ └─────────────────────┘│ +│ │ +│ ┌─────────────────────┐│ +│ │ ☐ Naver Blog ││ +│ │ 800x600 (가로형) ││ +│ │ [미리보기] ││ +│ └─────────────────────┘│ +│ │ +│ ┌─────────────────────┐│ +│ │ ☐ Kakao Channel ││ +│ │ 800x800 (정사각형) ││ +│ │ [미리보기] ││ +│ └─────────────────────┘│ +│ │ +│ [콘텐츠 생성하기] │ +│ │ +│ (생성 완료 후) │ +│ │ +│ 생성된 콘텐츠 │ +│ │ +│ ┌────┐ ┌────┐ │ +│ │Inst││Blog│ │ +│ │agram││ │ │ +│ └────┘ └────┘ │ +│ │ +│ 게시 텍스트: │ +│ "🎉 연말 대박 이벤트! │ +│ #수원맛집 #치킨이벤트" │ +│ │ +│ [📦 일괄 다운로드] │ +│ │ +├─────────────────────────┤ +│ [ 다음 (QR포스터) ] │ +└─────────────────────────┘ ``` **인터랙션** -- 플랫폼 체크박스 → 선택/해제 -- Instagram은 필수 선택 (비활성화) -- 플랫폼 선택 변경 → 자동 재생성 (20초) -- `미리보기` → 플랫폼별 게시 화면 모의 -- `전체 다운로드` → ZIP 파일 다운로드 -- `다음` → `12-QR포스터생성` +1. **플랫폼 선택**: 체크박스로 다중 선택 +2. **미리보기**: 바텀 시트로 플랫폼별 미리보기 (실제 피드 모습) +3. **생성**: 선택한 플랫폼 수만큼 최적화 콘텐츠 생성 (30초 이내) +4. **다운로드**: ZIP 파일로 일괄 다운로드 + +**성능** +- SNS 콘텐츠 생성: 30초 이내 +- 미리보기 즉시 로딩 + +--- #### 12-QR포스터생성 **개요** -- 목적: 오프라인 홍보용 QR 포스터 생성 -- 관련 유저스토리: UFR-CONT-040 -- 비즈니스 중요도: ⭐⭐⭐ +- **목적**: QR 코드 포함 인쇄용 포스터 생성 +- **관련 유저스토리**: UFR-CONT-040 +- **비즈니스 중요도**: Must (M/8) **주요 기능** -- QR 코드 생성 -- 포스터 크기 선택 -- 인쇄 최적화 +1. QR 연결 URL 자동 설정 +2. 포스터 크기 선택 (A4/A3) +3. QR 포스터 PDF 생성 **UI 구성요소** + +**모바일** ``` -┌─────────────────────────────┐ -│ ← QR 포스터 생성 │ -├─────────────────────────────┤ -│ │ -│ 📋 포스터 설정 │ -│ ┌─────────────────────┐ │ -│ │ 크기 선택 │ │ -│ │ ○ A4 (210x297mm) │ │ -│ │ ○ A3 (297x420mm) │ │ -│ └─────────────────────┘ │ -│ │ -│ 🔗 QR 연결 URL │ -│ https://event.kt.com/... │ ← 자동 생성 -│ │ -│ ✅ 생성 완료! │ -│ │ -│ 🖼️ 포스터 미리보기 │ -│ ┌─────────────────────┐ │ -│ │ │ │ -│ │ [배경 이미지] │ │ -│ │ │ │ -│ │ 🎃 할로윈 특별 이벤트│ │ -│ │ │ │ -│ │ [QR 코드] │ │ -│ │ 스캔하고 참여하세요! │ │ -│ │ │ │ -│ │ 기간: 10/20~10/31 │ │ -│ │ 경품: 치킨세트 무료 │ │ -│ │ │ │ -│ └─────────────────────┘ │ -│ │ -│ 💾 다운로드 가능 │ -│ • A4 포스터 PDF │ -│ • QR 코드 단독 PNG │ -│ │ -├─────────────────────────────┤ -│ [다운로드] [다음 단계] │ -└─────────────────────────────┘ +┌─────────────────────────┐ +│ ← [뒤로] QR 포스터 생성 │ +├─────────────────────────┤ +│ 콘텐츠 4/5: QR 포스터 │ +│ ━━━━━━━━━━━━━━━━━━━━━ │ +│ │ +│ QR 코드 설정 │ +│ │ +│ ┌─────────────────────┐│ +│ │ 연결 URL (자동생성) ││ +│ │ ktevnt.co/abc123 ││ +│ │ [📋 복사] ││ +│ └─────────────────────┘│ +│ │ +│ ┌─────────────────────┐│ +│ │ QR 코드 미리보기 ││ +│ │ ┌────────────────┐ ││ +│ │ │ [QR 이미지] │ ││ +│ │ └────────────────┘ ││ +│ └─────────────────────┘│ +│ │ +│ 포스터 크기 │ +│ ○ A4 (210x297mm) │ +│ ○ A3 (297x420mm) │ +│ │ +│ [포스터 생성하기] │ +│ │ +│ (생성 완료 후) │ +│ │ +│ ┌─────────────────────┐│ +│ │ 📄 생성된 포스터 ││ +│ │ ││ +│ │ [미리보기 이미지] ││ +│ │ ││ +│ │ A4 PDF: 2.1MB ││ +│ │ QR 이미지: 150KB ││ +│ └─────────────────────┘│ +│ │ +│ [다운로드] [인쇄하기] │ +│ │ +├─────────────────────────┤ +│ [ 다음 (콘텐츠편집) ] │ +└─────────────────────────┘ ``` **인터랙션** -- 크기 라디오 버튼 → 선택 변경 시 재생성 -- QR URL 자동 생성 (이벤트 참여 페이지) -- 포스터 미리보기 → 확대/축소 가능 -- `다운로드` → PDF 파일 다운로드 -- `다음 단계` → `13-콘텐츠편집` 또는 `14-콘텐츠최종승인` +1. **URL 복사**: 클립보드 복사 + 토스트 메시지 +2. **크기 선택**: 라디오 버튼, 미리보기 즉시 업데이트 +3. **생성**: 20초 이내 완료 +4. **인쇄**: 시스템 인쇄 다이얼로그 호출 + +**성능** +- QR 포스터 생성: 20초 이내 +- PDF 파일 크기 최적화 (<5MB) + +--- #### 13-콘텐츠편집 **개요** -- 목적: 생성된 콘텐츠 개인화 수정 -- 관련 유저스토리: UFR-CONT-050 -- 비즈니스 중요도: ⭐⭐⭐ +- **목적**: 생성된 콘텐츠 간단 수정 +- **관련 유저스토리**: UFR-CONT-050 +- **비즈니스 중요도**: Should (S/13) **주요 기능** -- 텍스트 편집 -- 색상 조정 -- 레이아웃 변경 +1. 이미지/영상 텍스트 수정 +2. 색상 조정 +3. 편집 이력 관리 (최대 3개 버전) **UI 구성요소** + +**모바일** ``` -┌─────────────────────────────┐ -│ ← 콘텐츠 편집 │ -├─────────────────────────────┤ -│ │ -│ ✏️ 편집할 콘텐츠 선택 │ -│ ┌─────────────────────┐ │ -│ │ 📸 이미지 편집 │ │ -│ └─────────────────────┘ │ -│ ┌─────────────────────┐ │ -│ │ 🎥 영상 편집 │ │ -│ └─────────────────────┘ │ -│ ┌─────────────────────┐ │ -│ │ 📱 SNS 텍스트 편집 │ │ -│ └─────────────────────┘ │ -│ ┌─────────────────────┐ │ -│ │ 🖼️ 포스터 편집 │ │ -│ └─────────────────────┘ │ -│ │ -│ [예: 이미지 편집 모드] │ -│ ┌─────────────────────┐ │ -│ │ [ 이미지 ] │ │ -│ └─────────────────────┘ │ -│ │ -│ 🎨 편집 도구 │ -│ ┌─────────────────────┐ │ -│ │ T 텍스트 │ │ -│ │ [할로윈 특별 이벤트] │ │ -│ │ 폰트 [맑은 고딕 ▼] │ │ -│ │ 크기 [24px ▼] │ │ -│ │ 색상 [🔴 #FF5733] │ │ -│ └─────────────────────┘ │ -│ ┌─────────────────────┐ │ -│ │ 🎨 배경 색상 │ │ -│ │ [🟠 #FFA500] │ │ -│ └─────────────────────┘ │ -│ ┌─────────────────────┐ │ -│ │ 📐 레이아웃 │ │ -│ │ [템플릿 1] [템플릿 2]│ │ -│ └─────────────────────┘ │ -│ │ -│ 📜 편집 이력 (최대 3개) │ -│ [원본으로 되돌리기] │ -│ │ -├─────────────────────────────┤ -│ [취소] [저장] │ -└─────────────────────────────┘ +┌─────────────────────────┐ +│ ← [뒤로] 콘텐츠 편집 │ +├─────────────────────────┤ +│ 콘텐츠 편집 (선택) │ +│ │ +│ 편집할 콘텐츠 선택 │ +│ │ +│ ┌────┐ ┌────┐ ┌────┐ │ +│ │이미││영상││SNS ││ │ +│ │지 ││ ││ ││ │ +│ └────┘ └────┘ └────┘ │ +│ │ +│ (이미지 편집 예시) │ +│ │ +│ ┌─────────────────────┐│ +│ │ [이미지 미리보기] ││ +│ │ ││ +│ │ 텍스트: "🎉..." ││ +│ │ [편집] ││ +│ └─────────────────────┘│ +│ │ +│ 편집 도구 │ +│ [T 텍스트] [🎨 색상] │ +│ [↔️ 크기] [📐 위치] │ +│ │ +│ 편집 이력 │ +│ • 원본 │ +│ • 버전 1 (현재) │ +│ [원본으로 되돌리기] │ +│ │ +├─────────────────────────┤ +│ [취소] [저장하기] │ +└─────────────────────────┘ ``` **인터랙션** -- 콘텐츠 카드 선택 → 해당 편집 모드 진입 -- 텍스트 편집 → 실시간 미리보기 반영 -- 색상 변경 → 컬러 피커 -- 레이아웃 템플릿 → 여러 레이아웃 옵션 -- `원본으로 되돌리기` → 편집 전 상태로 복원 -- `취소` → 편집 내용 버리고 이전 화면 -- `저장` → 수정사항 적용 → `14-콘텐츠최종승인` +1. **콘텐츠 선택**: 카드 탭으로 선택 +2. **텍스트 편집**: 바텀 시트로 텍스트 에디터 +3. **색상 조정**: 컬러 피커 +4. **실시간 미리보기**: 편집 사항 즉시 반영 +5. **되돌리기**: 이전 버전으로 복원 + +**성능** +- 편집 실시간 반영 +- 최대 3개 버전 관리 + +--- #### 14-콘텐츠최종승인 **개요** -- 목적: 완성된 콘텐츠 최종 검토 -- 관련 유저스토리: UFR-CONT-060 -- 비즈니스 중요도: ⭐⭐⭐⭐⭐ +- **목적**: 완성된 콘텐츠 최종 검토 및 승인 +- **관련 유저스토리**: UFR-CONT-060 +- **비즈니스 중요도**: Must (M/3) **주요 기능** -- 전체 콘텐츠 미리보기 -- 콘텐츠 승인 및 저장 +1. 전체 콘텐츠 미리보기 +2. 승인 또는 이전 단계 수정 **UI 구성요소** + +**모바일** ``` -┌─────────────────────────────┐ -│ ← 콘텐츠 최종 승인 │ -├─────────────────────────────┤ -│ │ -│ ✅ 모든 콘텐츠가 준비되었어요│ -│ │ -│ 📦 생성된 콘텐츠 (6종) │ -│ │ -│ ┌─────────────────────┐ │ -│ │ 📸 이미지 (심플) │ │ -│ │ [썸네일] [미리보기]│ │ -│ └─────────────────────┘ │ -│ ┌─────────────────────┐ │ -│ │ 🎥 15초 영상 │ │ -│ │ [썸네일] [재생 ▶️] │ │ -│ └─────────────────────┘ │ -│ ┌─────────────────────┐ │ -│ │ 📱 Instagram 콘텐츠 │ │ -│ │ [썸네일] [미리보기]│ │ -│ └─────────────────────┘ │ -│ ┌─────────────────────┐ │ -│ │ 📱 Naver Blog 콘텐츠 │ │ -│ │ [썸네일] [미리보기]│ │ -│ └─────────────────────┘ │ -│ ┌─────────────────────┐ │ -│ │ 🖼️ A4 QR 포스터 │ │ -│ │ [썸네일] [미리보기]│ │ -│ └─────────────────────┘ │ -│ ┌─────────────────────┐ │ -│ │ 🖼️ A3 QR 포스터 │ │ -│ │ [썸네일] [미리보기]│ │ -│ └─────────────────────┘ │ -│ │ -│ ⏱️ 콘텐츠 생성 시간: 2분 45초│ -│ │ -├─────────────────────────────┤ -│ [수정하기] [콘텐츠 승인] │ -└─────────────────────────────┘ +┌─────────────────────────┐ +│ ← [뒤로] 콘텐츠 최종확인 │ +├─────────────────────────┤ +│ 콘텐츠 5/5: 최종 승인 │ +│ ━━━━━━━━━━━━━━━━━━━━━ │ +│ │ +│ ✅ 콘텐츠 생성 완료! │ +│ │ +│ 생성된 콘텐츠 (갤러리) │ +│ │ +│ ┌────┐ ┌────┐ ┌────┐ │ +│ │이미││이미││이미││ │ +│ │지1 ││지2 ││지3 ││ │ +│ └────┘ └────┘ └────┘ │ +│ │ +│ ┌────┐ ┌────┐ │ +│ │15초││SNS ││ │ +│ │영상││세트││ │ +│ └────┘ └────┘ │ +│ │ +│ ┌────┐ │ +│ │QR ││ │ +│ │포스││ │ +│ │터 ││ │ +│ └────┘ │ +│ │ +│ [📦 전체 다운로드] │ +│ │ +│ ⏱ 콘텐츠 생성시간: 7분 │ +│ (목표: 5-8분 이내) │ +│ │ +├─────────────────────────┤ +│ [← 수정] [승인하기 ✓] │ +└─────────────────────────┘ ``` **인터랙션** -- `미리보기` / `재생` → 전체 화면 모드 -- `수정하기` → `13-콘텐츠편집` -- `콘텐츠 승인` → 콘텐츠 DB 저장 + 콘텐츠 ID 생성 → `15-다중채널배포설정` +- 각 콘텐츠 탭 시 전체 화면 미리보기 +- 승인 시 확인 다이얼로그 +- 승인 완료 후 배포 단계로 자동 이동 + +**성능** +- 전체 콘텐츠 생성: 목표 5-8분 이내 --- -### 3.5 Distribution 서비스 +### 4.4 Distribution Service -#### 15-다중채널배포설정 +--- + +#### 15-배포채널선택 **개요** -- 목적: 여러 채널 동시 배포 설정 -- 관련 유저스토리: UFR-DIST-010 -- 비즈니스 중요도: ⭐⭐⭐⭐⭐ +- **목적**: 다중 채널 배포 설정 +- **관련 유저스토리**: UFR-DIST-010 +- **비즈니스 중요도**: Must (M/13) **주요 기능** -- 배포 채널 선택 -- 채널별 세부 설정 -- 배포 일정 설정 +1. 배포 채널 선택 (다중 선택) +2. 즉시 배포 또는 예약 배포 +3. 채널별 개별 설정 **UI 구성요소** + +**모바일** ``` -┌─────────────────────────────┐ -│ ← 배포 채널 설정 │ -├─────────────────────────────┤ -│ │ -│ 📡 배포 채널 선택 │ -│ │ -│ KT 서비스 │ -│ ┌─────────────────────┐ │ -│ │ ☐ 우리동네TV ⚙️ │ │ -│ │ 지역 타겟 광고 │ │ -│ └─────────────────────┘ │ -│ ┌─────────────────────┐ │ -│ │ ☐ 링고비즈 연결음 ⚙️ │ │ -│ │ 전화 연결음 업데이트 │ │ -│ └─────────────────────┘ │ -│ ┌─────────────────────┐ │ -│ │ ☐ 지니TV 광고 ⚙️ │ │ -│ │ 가정용 TV 광고 │ │ -│ └─────────────────────┘ │ -│ │ -│ SNS 플랫폼 │ -│ ┌─────────────────────┐ │ -│ │ ✅ Instagram (필수) │ │ -│ │ 계정 연동 완료 ✓ │ │ -│ └─────────────────────┘ │ -│ ┌─────────────────────┐ │ -│ │ ☐ Naver Blog ⚙️ │ │ -│ │ [계정 연동 필요] │ │ -│ └─────────────────────┘ │ -│ ┌─────────────────────┐ │ -│ │ ☐ Kakao Channel ⚙️ │ │ -│ │ [계정 연동 필요] │ │ -│ └─────────────────────┘ │ -│ │ -│ 🕐 배포 일시 │ -│ ○ 즉시 배포 │ -│ ○ 예약 배포 │ -│ [2025-10-20] [14:00] │ -│ │ -│ 📊 선택된 채널: 1개 │ -│ │ -├─────────────────────────────┤ -│ [ 배포 시작 ] │ -└─────────────────────────────┘ +┌─────────────────────────┐ +│ ← [뒤로] 배포 채널 선택 │ +├─────────────────────────┤ +│ 배포 1/3: 채널 선택 │ +│ ━━━━━━━━━━━━━━━━━━━━━ │ +│ │ +│ KT 채널 │ +│ │ +│ ┌─────────────────────┐│ +│ │ ☐ 우리동네TV ││ +│ │ 지역 주변 노출 ││ +│ │ [설정 >] ││ +│ └─────────────────────┘│ +│ │ +│ ┌─────────────────────┐│ +│ │ ☐ 링고비즈 연결음 ││ +│ │ 매장 전화 연결음 ││ +│ │ [설정 >] ││ +│ └─────────────────────┘│ +│ │ +│ ┌─────────────────────┐│ +│ │ ☐ 지니TV 광고 ││ +│ │ TV 광고 송출 ││ +│ │ [설정 >] ││ +│ └─────────────────────┘│ +│ │ +│ SNS 채널 │ +│ │ +│ ┌─────────────────────┐│ +│ │ ✅ Instagram (필수) ││ +│ │ [계정 연동 ✓] ││ +│ └─────────────────────┘│ +│ │ +│ ┌─────────────────────┐│ +│ │ ☐ Naver Blog ││ +│ │ [계정 연동하기] ││ +│ └─────────────────────┘│ +│ │ +│ ┌─────────────────────┐│ +│ │ ☐ Kakao Channel ││ +│ │ [계정 연동하기] ││ +│ └─────────────────────┘│ +│ │ +│ 배포 시간 │ +│ ○ 즉시 배포 │ +│ ○ 예약 배포 │ +│ [날짜/시간 선택] │ +│ │ +├─────────────────────────┤ +│ [ 다음 (배포 시작) ] │ +└─────────────────────────┘ ``` **인터랙션** -- 채널 체크박스 → 선택/해제, 선택 수 업데이트 -- ⚙️ 설정 아이콘 → 채널별 상세 설정 모달 - - 우리동네TV: 반경 (500m/1km), 송출 시간대 - - 링고비즈: 연결음 미리듣기 - - 지니TV: 타겟 지역, 노출 시간대, 예산 - - SNS: 계정 OAuth 연동, 예약 시간 -- Instagram 필수 체크 (비활성화) -- 예약 배포 선택 → 날짜/시간 선택기 -- `배포 시작` → 배포 요청 발송 → `16-배포진행상태` +1. **채널 선택**: 체크박스로 다중 선택 +2. **설정**: 바텀 시트로 채널별 세부 설정 (반경, 시간대, 예산 등) +3. **계정 연동**: OAuth 인증 플로우 +4. **예약 배포**: 날짜/시간 피커 + +**성능** +- 채널 설정 즉시 저장 +- 배포 준비 완료 시 다음 단계 활성화 + +--- #### 16-배포진행상태 **개요** -- 목적: 채널별 배포 진행 상황 모니터링 -- 관련 유저스토리: UFR-DIST-020~050 -- 비즈니스 중요도: ⭐⭐⭐⭐ +- **목적**: 실시간 배포 진행 상황 모니터링 +- **관련 유저스토리**: UFR-DIST-020~050 +- **비즈니스 중요도**: Must (M/47) **주요 기능** -- 실시간 배포 상태 표시 -- 배포 완료/실패 확인 -- 재시도 기능 +1. 채널별 배포 상태 실시간 표시 +2. 배포 실패 시 자동 재시도 (3회) +3. 실패 시 알림 및 수동 재시도 옵션 **UI 구성요소** + +**모바일** ``` -┌─────────────────────────────┐ -│ ← 배포 진행 상황 │ -├─────────────────────────────┤ -│ │ -│ 📡 배포 진행중... (2/4) │ -│ [████████░░░░░░] 50% │ -│ │ -│ ✅ 배포 완료 │ -│ ┌─────────────────────┐ │ -│ │ Instagram │ │ -│ │ ✓ 포스팅 완료 │ │ -│ │ 🔗 게시물 보기 │ │ -│ │ 완료 시각: 14:02 │ │ -│ └─────────────────────┘ │ -│ │ -│ 🔄 배포 중 │ -│ ┌─────────────────────┐ │ -│ │ 우리동네TV │ │ -│ │ ⏳ 영상 업로드 중... │ │ -│ │ [██████░░░░] 60% │ │ -│ └─────────────────────┘ │ -│ ┌─────────────────────┐ │ -│ │ 지니TV │ │ -│ │ ⏳ 광고 예약 중... │ │ -│ │ [████░░░░░░] 40% │ │ -│ └─────────────────────┘ │ -│ │ -│ ⏸️ 대기중 │ -│ ┌─────────────────────┐ │ -│ │ Naver Blog │ │ -│ │ ⏸️ 순서 대기 │ │ -│ └─────────────────────┘ │ -│ │ -│ ❌ 배포 실패 (재시도 가능) │ -│ ┌─────────────────────┐ │ -│ │ 링고비즈 │ │ -│ │ ❌ API 연결 오류 │ │ -│ │ [재시도 1/3] │ │ -│ └─────────────────────┘ │ -│ │ -├─────────────────────────────┤ -│ [배포 취소] [완료 대기] │ -└─────────────────────────────┘ +┌─────────────────────────┐ +│ ← [뒤로] 배포 진행 중 │ +├─────────────────────────┤ +│ 배포 2/3: 진행 상태 │ +│ ━━━━━━━━━━━━━━━━━━━━━ │ +│ │ +│ 배포 진행 중... 🚀 │ +│ │ +│ ┌─────────────────────┐│ +│ │ ✅ Instagram ││ +│ │ 배포 완료 (3초) ││ +│ │ [게시물 보기] ││ +│ └─────────────────────┘│ +│ │ +│ ┌─────────────────────┐│ +│ │ 🔄 우리동네TV ││ +│ │ 배포 중... (15초) ││ +│ │ ▓▓▓▓░░░░░░ 40% ││ +│ └─────────────────────┘│ +│ │ +│ ┌─────────────────────┐│ +│ │ ⏳ 지니TV ││ +│ │ 대기 중... ││ +│ └─────────────────────┘│ +│ │ +│ ┌─────────────────────┐│ +│ │ ❌ Naver Blog ││ +│ │ 배포 실패 (재시도중) ││ +│ │ 1/3 재시도 ││ +│ │ [수동 재시도] ││ +│ └─────────────────────┘│ +│ │ +│ 전체 진행률: 50% │ +│ 예상 소요: 45초 남음 │ +│ │ +│ [취소] [새로고침] │ +│ │ +├─────────────────────────┤ +│ (배포 완료 시) │ +│ [다음 (완료 화면) ✓] │ +└─────────────────────────┘ ``` **인터랙션** -- 실시간 진행 상태 업데이트 (폴링 5초) -- `게시물 보기` 링크 → 해당 플랫폼 게시물 새 탭 -- `재시도` 버튼 → 실패한 채널 재배포 (최대 3회) -- 모든 배포 완료 → 자동으로 `17-오프라인자료다운로드` -- `배포 취소` → 진행중인 배포 중단 확인 다이얼로그 +1. **실시간 업데이트**: 5초 간격 자동 새로고침 +2. **게시물 보기**: 외부 링크로 실제 게시물 확인 +3. **수동 재시도**: 실패한 채널 개별 재시도 +4. **취소**: 진행 중인 배포 중단 (확인 다이얼로그) + +**성능** +- 전체 배포: 목표 1분 이내 +- 병렬 배포로 시간 단축 + +--- #### 17-오프라인자료다운로드 **개요** -- 목적: 오프라인 홍보 자료 다운로드 -- 관련 유저스토리: UFR-DIST-060 -- 비즈니스 중요도: ⭐⭐⭐ +- **목적**: QR 포스터 및 인쇄용 자료 다운로드 +- **관련 유저스토리**: UFR-DIST-060 +- **비즈니스 중요도**: Should (S/5) **주요 기능** -- QR 포스터 다운로드 -- 인쇄용 파일 제공 -- 다운로드 이력 관리 +1. QR 포스터 (A4/A3 PDF) +2. QR 코드 이미지 (PNG) +3. 고해상도 이미지 +4. 일괄 다운로드 (ZIP) **UI 구성요소** + +**모바일** ``` -┌─────────────────────────────┐ -│ ← 오프라인 자료 다운로드 │ -├─────────────────────────────┤ -│ │ -│ ✅ 배포가 완료되었습니다! │ -│ │ -│ 💾 다운로드 가능 파일 │ -│ │ -│ 📋 포스터 │ -│ ┌─────────────────────┐ │ -│ │ A4 QR 포스터 (PDF) │ │ -│ │ 210x297mm, 300dpi │ │ -│ │ [📥 다운로드] │ │ -│ └─────────────────────┘ │ -│ ┌─────────────────────┐ │ -│ │ A3 QR 포스터 (PDF) │ │ -│ │ 297x420mm, 300dpi │ │ -│ │ [📥 다운로드] │ │ -│ └─────────────────────┘ │ -│ │ -│ 🖼️ 이미지 │ -│ ┌─────────────────────┐ │ -│ │ QR 코드 (PNG) │ │ -│ │ 단독 이미지, 1080px │ │ -│ │ [📥 다운로드] │ │ -│ └─────────────────────┘ │ -│ ┌─────────────────────┐ │ -│ │ 홍보 이미지 (PNG) │ │ -│ │ 고해상도, 1080x1080 │ │ -│ │ [📥 다운로드] │ │ -│ └─────────────────────┘ │ -│ │ -│ 📦 전체 파일 │ -│ ┌─────────────────────┐ │ -│ │ 모든 파일 (ZIP) │ │ -│ │ 4개 파일, 12.5MB │ │ -│ │ [📥 일괄 다운로드] │ │ -│ └─────────────────────┘ │ -│ │ -├─────────────────────────────┤ -│ [대시보드로 이동] │ -└─────────────────────────────┘ +┌─────────────────────────┐ +│ ← [뒤로] 오프라인 자료 │ +├─────────────────────────┤ +│ 배포 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 파일 생성 후 다운로드 -- 다운로드 이력 자동 기록 -- `대시보드로 이동` → `21-실시간대시보드` +- 개별 다운로드: 파일 저장 다이얼로그 +- 전체 다운로드: ZIP 파일로 압축 다운로드 +- 다운로드 이력: 이전 다운로드 기록 표시 --- -### 3.6 Participation 서비스 +### 4.5 Participation Service (고객용) -#### 18-이벤트참여신청 (고객용) +--- + +#### 18-이벤트참여 **개요** -- 목적: 고객의 간편한 이벤트 참여 -- 관련 유저스토리: UFR-PART-010 -- 비즈니스 중요도: ⭐⭐⭐⭐⭐ +- **목적**: 고객의 간편한 이벤트 참여 +- **관련 유저스토리**: UFR-PART-010 +- **비즈니스 중요도**: Must (M/8) **주요 기능** -- 이벤트 정보 표시 -- 참여 정보 입력 -- 중복 참여 방지 +1. 이름, 전화번호 입력 +2. 참여 경로 자동 추적 +3. 개인정보 수집 동의 +4. 중복 참여 방지 **UI 구성요소** + +**모바일** ``` -┌─────────────────────────────┐ -│ │ -│ [ 이벤트 배너 이미지 ] │ -│ │ -│ 🎃 할로윈 특별 이벤트 │ -│ 왕갈비통닭 │ -│ │ -│ 📅 기간: 2025.10.20 ~ 10.31│ -│ 🎁 경품: 치킨세트 무료 (10명)│ -│ │ -│ 🎯 참여 방법 │ -│ 1️⃣ 정보 입력 │ -│ 2️⃣ 참여 완료 │ -│ 3️⃣ 당첨자 발표 (11/1) │ -│ │ -│ ──────────────────── │ -│ │ -│ 👤 고객명 * │ -│ [___________________] │ -│ │ -│ 📱 전화번호 * │ -│ [010-____-____] │ -│ │ -│ 📍 참여 경로 * │ -│ ○ Instagram │ -│ ○ Naver Blog │ -│ ○ QR 코드 스캔 │ -│ ○ 우리동네TV │ -│ ○ 지니TV │ -│ ○ 기타 │ -│ │ -│ ┌─────────────────────┐ │ -│ │ ☐ 개인정보 수집 및 │ │ -│ │ 이용 동의 (필수) │ │ -│ │ [약관 보기] │ │ -│ └─────────────────────┘ │ -│ │ -│ [ 참여하기 ] │ -│ │ -└─────────────────────────────┘ +┌─────────────────────────┐ +│ 🎉 수원 왕갈비통닭 │ +│ 연말 대박 이벤트! │ +├─────────────────────────┤ +│ │ +│ 경품: 치킨세트 무료교환 │ +│ 당첨인원: 100명 │ +│ 기간: ~2025-12-31 │ +│ │ +│ 참여방법 │ +│ 1. 매장 방문 │ +│ 2. QR 코드 스캔 │ +│ 3. 정보 입력 │ +│ │ +│ ───────────────────── │ +│ │ +│ 참여 신청 │ +│ │ +│ [이름 입력] │ +│ │ +│ [전화번호] │ +│ 010-XXXX-XXXX │ +│ │ +│ 참여 경로 (자동 감지) │ +│ 📍 QR 코드 스캔 │ +│ │ +│ ☑ 개인정보 수집 동의 │ +│ (필수) [자세히] │ +│ │ +│ ───────────────────── │ +│ │ +│ 💡 매장 방문 고객은 │ +│ 당첨 확률 UP! 🎁 │ +│ │ +├─────────────────────────┤ +│ [ 참여하기 ] │ +└─────────────────────────┘ ``` **인터랙션** -- 입력 필드 실시간 검증 - - 고객명: 2자 이상 - - 전화번호: 010-XXXX-XXXX 형식 -- 참여 경로 자동 추적 (URL 파라미터) -- `약관 보기` → 개인정보 처리방침 모달 -- 동의 체크박스 필수 -- `참여하기` 버튼 → 중복 체크 → `19-참여완료` 또는 중복 알림 +1. **자동 입력**: 참여 경로 자동 감지 (QR/SNS/TV) +2. **실시간 검증**: 전화번호 형식 체크 +3. **중복 체크**: 제출 시 중복 참여 확인 +4. **에러 처리**: + - 중복: "이미 참여하셨습니다 (참여일시 표시)" + - 기타: 명확한 오류 메시지 + +**접근성** +- 큰 터치 영역 (44x44px 이상) +- 명확한 라벨과 에러 메시지 +- 고대비 색상 + +--- #### 19-참여완료 **개요** -- 목적: 응모번호 발급 및 안내 -- 관련 유저스토리: UFR-PART-010 -- 비즈니스 중요도: ⭐⭐⭐⭐ +- **목적**: 참여 완료 확인 및 응모번호 발급 +- **관련 유저스토리**: UFR-PART-010 +- **비즈니스 중요도**: Must (M/8) **주요 기능** -- 응모번호 발급 -- 당첨 발표일 안내 -- 참여 정보 확인 +1. 응모번호 자동 발급 +2. 당첨 발표일 안내 +3. 매장 정보 표시 **UI 구성요소** + +**모바일** ``` -┌─────────────────────────────┐ -│ │ -│ ✅ 참여가 완료되었습니다! │ -│ │ -│ 🎟️ 응모번호 │ -│ ┌─────────────────────┐ │ -│ │ │ │ -│ │ EV-20251020-1523 │ │ -│ │ │ │ -│ └─────────────────────┘ │ -│ │ -│ 👤 홍길동님 │ -│ 📱 010-1234-5678 │ -│ │ -│ 📅 당첨 발표일 │ -│ 2025년 11월 1일 (금) │ -│ 오후 2시 │ -│ │ -│ 📩 당첨 시 SMS로 알림을 │ -│ 보내드립니다 │ -│ │ -│ 🎁 경품 │ -│ 치킨세트 무료 (10명) │ -│ 수령 기한: 당첨 발표 후 7일 │ -│ 수령 장소: 왕갈비통닭 매장 │ -│ │ -│ ──────────────────── │ -│ │ -│ 📱 SNS에 공유하고 │ -│ 친구들도 초대하세요! │ -│ [Instagram 공유] │ -│ [Kakao 공유] │ -│ │ -└─────────────────────────────┘ +┌─────────────────────────┐ +│ ✅ 참여 완료! │ +├─────────────────────────┤ +│ │ +│ 🎉 🎁 🎉 │ +│ │ +│ 이벤트 참여가 완료 │ +│ 되었습니다! │ +│ │ +│ ┌─────────────────────┐│ +│ │ 응모번호 ││ +│ │ ││ +│ │ A-12345678 ││ +│ │ ││ +│ │ [📋 복사하기] ││ +│ └─────────────────────┘│ +│ │ +│ 당첨 발표일 │ +│ 📅 2025-12-31 │ +│ │ +│ 당첨 시 입력하신 전화번호│ +│ 로 SMS/알림톡 발송됩니다│ +│ │ +│ ───────────────────── │ +│ │ +│ 매장 정보 │ +│ 📍 수원 왕갈비통닭 │ +│ 🏪 경기도 수원시... │ +│ ☎️ 031-XXX-XXXX │ +│ │ +│ [매장 위치 보기] │ +│ │ +│ ───────────────────── │ +│ │ +│ 💬 친구에게 공유하기 │ +│ [Instagram] [Kakao] │ +│ │ +└─────────────────────────┘ ``` **인터랙션** -- 응모번호 자동 발급 및 표시 -- `Instagram 공유` → 공유 시트 (이벤트 페이지 링크) -- `Kakao 공유` → 카카오톡 공유 API -- 화면 스크린샷 저장 가능 +- 응모번호 복사: 클립보드 복사 + 토스트 +- 위치 보기: 지도 앱 연동 +- 공유하기: SNS 공유 기능 + +--- + +### 4.6 Analytics & Management Service + +--- #### 20-당첨자명단관리 **개요** -- 목적: 소상공인의 당첨자 관리 및 경품 지급 추적 -- 관련 유저스토리: UFR-PART-050 -- 비즈니스 중요도: ⭐⭐⭐⭐ +- **목적**: 당첨자 명단 조회 및 경품 지급 관리 +- **관련 유저스토리**: UFR-PART-050 +- **비즈니스 중요도**: Must (M/5) **주요 기능** -- 당첨자 명단 조회 -- 경품 지급 상태 관리 -- 명단 다운로드 +1. 이벤트별 당첨자 목록 +2. 경품 지급 상태 업데이트 +3. 엑셀 다운로드 **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%) │ -│ [██░░░░░░░░] │ -│ │ -├─────────────────────────────┤ -│ [참여자 전체 명단 다운로드] │ -└─────────────────────────────┘ +┌─────────────────────────┐ +│ ← [뒤로] 당첨자 명단 │ +├─────────────────────────┤ +│ 이벤트: 연말 대박 이벤트 │ +│ 당첨인원: 100명 │ +├─────────────────────────┤ +│ │ +│ 검색 [🔍 이름/전화번호] │ +│ │ +│ 지급 상태 필터 │ +│ [전체] [미지급] [완료] │ +│ │ +│ ┌─────────────────────┐│ +│ │ 김철수 ││ +│ │ 010-1234-5678 ││ +│ │ 응모: A-12345678 ││ +│ │ 참여일: 2025-12-15 ││ +│ │ 경로: QR코드 ││ +│ │ ││ +│ │ ☐ 경품 지급 완료 ││ +│ └─────────────────────┘│ +│ │ +│ ┌─────────────────────┐│ +│ │ 이영희 ││ +│ │ 010-2345-6789 ││ +│ │ 응모: A-23456789 ││ +│ │ 참여일: 2025-12-16 ││ +│ │ 경로: Instagram ││ +│ │ ││ +│ │ ✅ 경품 지급 완료 ││ +│ │ 지급일: 2025-12-20 ││ +│ └─────────────────────┘│ +│ │ +│ ... (스크롤) │ +│ │ +│ ───────────────────── │ +│ │ +│ [📊 참여자 전체 명단] │ +│ [📥 엑셀 다운로드] │ +│ │ +└─────────────────────────┘ ``` **인터랙션** -- 당첨자 카드 체크박스 → 경품 지급 상태 업데이트 - - 체크 시 지급 일시 자동 기록 - - 당첨자에게 확인 문자 발송 (옵션) -- `엑셀 다운로드` → 당첨자 명단 Excel 파일 -- `참여자 전체 명단 다운로드` → 전체 참여자 Excel (분석용) -- 지급 현황 자동 업데이트 +1. **검색**: 실시간 검색 필터링 +2. **상태 필터**: 미지급/완료 필터 +3. **체크박스**: 지급 완료 시 체크, 자동으로 지급일 기록 +4. **다운로드**: 엑셀 파일 다운로드 + +**반응형** +- 태블릿: 테이블 레이아웃 +- 데스크톱: 페이지네이션 + 대량 작업 --- -### 3.7 Analytics 서비스 - #### 21-실시간대시보드 **개요** -- 목적: 이벤트 성과 실시간 모니터링 -- 관련 유저스토리: UFR-ANAL-010 -- 비즈니스 중요도: ⭐⭐⭐⭐⭐ +- **목적**: 이벤트 성과 실시간 모니터링 +- **관련 유저스토리**: UFR-ANAL-010 +- **비즈니스 중요도**: Must (M/21) **주요 기능** -- 핵심 지표 실시간 표시 -- 채널별 노출/참여 현황 -- 자동/수동 새로고침 +1. 총 참여자 수, 노출 수, 매출 증가율 실시간 표시 +2. 5분 간격 자동 업데이트 +3. 채널별 성과 요약 **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% ▉ │ -│ │ -│ ──────────────────── │ -│ │ -│ [📊 상세 분석 보기] │ -│ │ -├─────────────────────────────┤ -│ 🏠 홈 │ 🎪 이벤트 │ 📊 분석 │ 👤 │ -└─────────────────────────────┘ +┌─────────────────────────┐ +│ ☰ 실시간 대시보드 🔔 │ +├─────────────────────────┤ +│ 마지막 업데이트: 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분 간격) -- 수동 새로고침 (우상단 🔄 아이콘 또는 당겨서 새로고침) -- 지표 카드 터치 → 해당 지표 상세 팝업 -- 그래프 터치 → 시간대별 상세 데이터 -- 탭 전환 → `22-채널별성과분석`, `23-ROI분석` -- `상세 분석 보기` → 전체 분석 대시보드 (데스크톱 최적화) +1. **자동 새로고침**: 5분 간격 +2. **수동 새로고침**: 버튼 탭 +3. **상세 보기**: 각 지표 탭 시 상세 분석 화면으로 이동 +4. **푸시 알림**: 주요 이벤트 발생 시 (목표 달성 등) + +**성능** +- 데이터 로딩: 5분 간격 자동 업데이트 +- 캐싱으로 빠른 초기 로딩 + +**반응형** +- 태블릿: 2x2 그리드 +- 데스크톱: 대시보드 전체 한눈에 표시 + +--- #### 22-채널별성과분석 **개요** -- 목적: 채널별 효율성 비교 -- 관련 유저스토리: UFR-ANAL-020 -- 비즈니스 중요도: ⭐⭐⭐⭐ +- **목적**: 채널별 노출 수, 참여율, 전환율 비교 +- **관련 유저스토리**: UFR-ANAL-020 +- **비즈니스 중요도**: Must (M/13) **주요 기능** -- 채널별 노출/참여/전환 비교 -- 채널 효율성 순위 +1. 채널별 성과 지표 +2. 비교 분석 시각화 +3. 가장 효과적인 채널 강조 **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 │ -│ │ -│ 📈 비교 그래프 │ -│ [막대 그래프 시각화] │ -│ │ -├─────────────────────────────┤ -│ [이전] [다음] │ -└─────────────────────────────┘ +┌─────────────────────────┐ +│ ← [뒤로] 채널별 성과분석 │ +├─────────────────────────┤ +│ │ +│ 📊 채널별 성과 비교 │ +│ │ +│ 기간: 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코드가 가장 높은 │ +│ 전환율을 보입니다. │ +│ 오프라인 홍보를 강화하면│ +│ 효과가 더 좋을 것 같아요│ +│ │ +└─────────────────────────┘ ``` **인터랙션** -- 채널 카드 터치 → 상세 데이터 확장 - - 시간대별 노출 추이 - - 일별 참여율 변화 - - 비용 상세 내역 -- 그래프 인터랙션 (확대/축소) -- 순위 정렬 변경 (노출수/참여율/전환율/CPA) +1. **기간 선택**: 드롭다운으로 기간 변경 +2. **상세 보기**: 채널별 상세 분석 페이지 +3. **차트 인터랙션**: 탭하여 수치 확인 + +**반응형** +- 태블릿: 2열 레이아웃 +- 데스크톱: 차트 확대 + 비교 테이블 + +--- #### 23-ROI분석 **개요** -- 목적: 투자 대비 수익 분석 -- 관련 유저스토리: UFR-ANAL-030 -- 비즈니스 중요도: ⭐⭐⭐⭐⭐ +- **목적**: 투자 대비 효과 자동 계산 +- **관련 유저스토리**: UFR-ANAL-030 +- **비즈니스 중요도**: Must (M/13) **주요 기능** -- 비용/수익 계산 -- ROI 자동 계산 -- 손익분기점 표시 +1. 총 비용 자동 집계 +2. 수익 데이터 수집 (POS 연동) +3. 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 분석 │ +├─────────────────────────┤ +│ │ +│ 💰 투자 대비 효과 │ +│ │ +│ ┌─────────────────────┐│ +│ │ 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 추이 -- `PDF 리포트 생성` → `24-분석리포트` +- 비용/수익 항목 탭 시 상세 내역 +- 그래프 인터랙션으로 일별 ROI 확인 + +**성능** +- POS 데이터 5분 간격 동기화 +- ROI 실시간 재계산 + +--- #### 24-분석리포트 **개요** -- 목적: 종합 분석 리포트 생성 및 다운로드 -- 관련 유저스토리: UFR-ANAL-040 -- 비즈니스 중요도: ⭐⭐⭐ +- **목적**: 종합 분석 리포트 PDF 생성 +- **관련 유저스토리**: UFR-ANAL-040 +- **비즈니스 중요도**: Should (S/8) **주요 기능** -- PDF 리포트 자동 생성 -- 리포트 미리보기 -- 이메일 발송 +1. 전체 성과 요약 +2. 그래프 및 차트 시각화 +3. 업종 평균 벤치마킹 +4. PDF 다운로드 및 이메일 발송 **UI 구성요소** + +**모바일** ``` -┌─────────────────────────────┐ -│ ← 분석 리포트 생성 │ -├─────────────────────────────┤ -│ │ -│ 📄 종합 분석 리포트 │ -│ │ -│ 🤖 리포트 생성 중... │ -│ [██████████░░░░] 70% │ -│ │ -│ ✅ 생성 완료! │ -│ │ -│ 📋 리포트 내용 │ -│ • 이벤트 개요 │ -│ • 참여 통계 │ -│ • 노출 통계 │ -│ • 매출 분석 │ -│ • ROI 분석 │ -│ • 채널별 성과 비교 │ -│ • 업종 평균 대비 벤치마킹 │ -│ • 시각화 차트 12종 │ -│ │ -│ 📄 미리보기 │ -│ ┌─────────────────────┐ │ -│ │ [ PDF 썸네일 ] │ │ -│ │ 1/8 페이지 │ │ -│ └─────────────────────┘ │ -│ [◀️ 이전] [다음 ▶️] │ -│ │ -│ 📥 다운로드 옵션 │ -│ ┌─────────────────────┐ │ -│ │ [📥 PDF 다운로드] │ │ -│ │ 할로윈이벤트_리포트.pdf│ │ -│ │ 2.8MB, 8페이지 │ │ -│ └─────────────────────┘ │ -│ ┌─────────────────────┐ │ -│ │ [📧 이메일 발송] │ │ -│ │ 등록된 이메일로 전송 │ │ -│ └─────────────────────┘ │ -│ │ -├─────────────────────────────┤ -│ [대시보드로] │ -└─────────────────────────────┘ +┌─────────────────────────┐ +│ ← [뒤로] 분석 리포트 │ +├─────────────────────────┤ +│ │ +│ 📊 종합 분석 리포트 │ +│ │ +│ 이벤트: 연말 대박 이벤트 │ +│ 기간: 2025-12-01~12-31 │ +│ │ +│ ┌─────────────────────┐│ +│ │ 리포트 미리보기 ││ +│ │ ││ +│ │ [PDF 썸네일 이미지] ││ +│ │ ││ +│ │ 10페이지 ││ +│ │ 5.2MB ││ +│ └─────────────────────┘│ +│ │ +│ 포함 내용 │ +│ ✅ 이벤트 개요 │ +│ ✅ 참여 통계 │ +│ ✅ 노출 통계 │ +│ ✅ 매출 분석 │ +│ ✅ ROI 분석 │ +│ ✅ 채널별 성과 비교 │ +│ ✅ 업종 평균 벤치마킹 │ +│ ✅ 그래프 시각화 │ +│ │ +│ [📥 PDF 다운로드] │ +│ [✉️ 이메일로 받기] │ +│ │ +│ ───────────────────── │ +│ │ +│ 생성 이력 │ +│ • 2025-12-31 16:00 │ +│ [다운로드] │ +│ │ +└─────────────────────────┘ ``` **인터랙션** -- 리포트 생성 프로그레스 표시 -- 미리보기 페이지 네비게이션 -- `PDF 다운로드` → PDF 파일 다운로드 -- `이메일 발송` → 등록 이메일로 리포트 전송 -- `대시보드로` → `21-실시간대시보드` +1. **PDF 생성**: 데이터 집계 → 그래프 생성 → PDF 레이아웃 → 파일 생성 (30초 이내) +2. **이메일 발송**: 등록된 이메일로 자동 발송 +3. **미리보기**: 썸네일 탭 시 전체 화면 미리보기 + +**성능** +- 리포트 생성: 30초 이내 +- PDF 파일 크기 최적화 (<10MB) --- -### 3.8 AI Learning 서비스 +## 5. 화면 간 전환 및 네비게이션 -#### 25-AI개선안제안 +### 5.1 네비게이션 패턴 -**개요** -- 목적: AI 기반 이벤트 개선안 제시 -- 관련 유저스토리: UFR-AIMPR-010 -- 비즈니스 중요도: ⭐⭐⭐⭐ +#### 바텀 네비게이션 (소상공인용) +``` +┌───────────────────────────────┐ +│ [홈] [이벤트] [분석] [MY] │ +└───────────────────────────────┘ -**주요 기능** -- 성공/실패 요인 분석 -- 3가지 개선안 제시 -- 예상 효과 표시 +홈: 21-실시간대시보드 +이벤트: 이벤트 목록 + [+ 새 이벤트] FAB +분석: 22-채널별성과분석 +MY: 매장정보, 설정, 로그아웃 +``` -**UI 구성요소** +**특징**: +- 4개 주요 섹션 +- 현재 선택된 탭 강조 (아이콘 + 라벨) +- 고정 위치 (항상 표시) + +#### 상단 앱바 ``` ┌─────────────────────────────┐ -│ ← AI 개선안 제안 │ -├─────────────────────────────┤ -│ │ -│ 🤖 AI가 분석한 개선안 │ -│ │ -│ ✅ 성공 요인 │ -│ • Instagram 채널 효율 우수 │ -│ • 참여 방법 간편성 │ -│ • 시즌 트렌드 반영 우수 │ -│ │ -│ ❗ 개선 포인트 │ -│ • 지니TV 채널 참여율 저조 │ -│ • 경품 매력도 부족 │ -│ • 홍보 문구 클릭률 낮음 │ -│ │ -│ 💡 AI 추천 개선안 (Top 3) │ -│ │ -│ ┌─────────────────────┐ │ -│ │ 1순위 🥇 │ │ -│ │ │ │ -│ │ 경품 변경 │ │ -│ │ 치킨세트 → 상품권 │ │ -│ │ (50,000원 상당) │ │ -│ │ │ │ -│ │ 📊 예상 효과: │ │ -│ │ 참여율 +45% ↑ │ │ -│ │ ROI +67% ↑ │ │ -│ │ │ │ -│ │ 근거: 유사 업종에서 │ │ -│ │ 상품권 경품 참여율 │ │ -│ │ 평균 62% 높음 │ │ -│ │ │ │ -│ │ [이 개선안으로 시작] │ │ -│ └─────────────────────┘ │ -│ │ -│ ┌─────────────────────┐ │ -│ │ 2순위 🥈 │ │ -│ │ 참여 방법 단순화 │ │ -│ │ [상세 보기 ▼] │ │ -│ └─────────────────────┘ │ -│ │ -│ ┌─────────────────────┐ │ -│ │ 3순위 🥉 │ │ -│ │ 배포 채널 조정 │ │ -│ │ [상세 보기 ▼] │ │ -│ └─────────────────────┘ │ -│ │ -├─────────────────────────────┤ -│ [피드백 제공] [다음 아이디어]│ +│ [←] 화면 제목 [액션] │ └─────────────────────────────┘ ``` -**인터랙션** -- 개선안 카드 `상세 보기` → 확장하여 근거 및 상세 설명 표시 -- `이 개선안으로 시작` → 해당 개선안 반영하여 `03-이벤트목적선택` (새 이벤트) -- `피드백 제공` → 개선안 평가 모달 (도움됨/도움 안됨) -- `다음 아이디어` → `26-다음이벤트아이디어` +**패턴**: +- 하위 화면: 뒤로가기 버튼 +- 최상위 화면: 메뉴 버튼 (☰) +- 컨텍스트별 액션 (저장, 공유, 편집 등) -#### 26-다음이벤트아이디어 - -**개요** -- 목적: 시즌별 이벤트 아이디어 제안 -- 관련 유저스토리: UFR-AIMPR-020 -- 비즈니스 중요도: ⭐⭐⭐ - -**주요 기능** -- 시즌 트렌드 반영 -- 5가지 아이디어 제안 -- 빠른 기획 시작 - -**UI 구성요소** +#### 마법사 (Wizard) 패턴 +이벤트 기획 및 콘텐츠 생성 단계에서 사용: ``` ┌─────────────────────────────┐ -│ ← 다음 이벤트 아이디어 │ -├─────────────────────────────┤ +│ 단계 3/6: 경품 선택 │ +│ ━━━━━━━━━━━━━━━━━━━━━━━━━ │ │ │ -│ ✨ 11월 추천 이벤트 아이디어 │ +│ [콘텐츠] │ │ │ -│ 🤖 AI가 학습한 결과를 바탕으로│ -│ 제안합니다 │ -│ │ -│ ┌─────────────────────┐ │ -│ │ 1. 🍂 가을 감사제 │ │ -│ │ │ │ -│ │ 📅 추천 기간: │ │ -│ │ 11/1 ~ 11/15 │ │ -│ │ │ │ -│ │ 🎯 목적: 재방문 유도 │ │ -│ │ │ │ -│ │ 📊 예상 성과: │ │ -│ │ 참여 700명 │ │ -│ │ ROI 280% │ │ -│ │ │ │ -│ │ 💡 핵심 전략: │ │ -│ │ 단골 고객 특별 할인 │ │ -│ │ 친구 초대 이벤트 │ │ -│ │ │ │ -│ │ [이 아이디어로 시작] │ │ -│ └─────────────────────┘ │ -│ │ -│ ┌─────────────────────┐ │ -│ │ 2. 🎄 연말 특별 이벤트│ │ -│ │ [상세 보기 ▼] │ │ -│ └─────────────────────┘ │ -│ │ -│ ┌─────────────────────┐ │ -│ │ 3. 🏃 일일 한정 특가 │ │ -│ │ [상세 보기 ▼] │ │ -│ └─────────────────────┘ │ -│ │ -│ ┌─────────────────────┐ │ -│ │ 4. 👨‍👩‍👧 가족 이벤트 │ │ -│ │ [상세 보기 ▼] │ │ -│ └─────────────────────┘ │ -│ │ -│ ┌─────────────────────┐ │ -│ │ 5. 🎁 럭키드로우 │ │ -│ │ [상세 보기 ▼] │ │ -│ └─────────────────────┘ │ -│ │ -├─────────────────────────────┤ -│ [메인으로] │ +│ [← 이전] [다음 →] │ └─────────────────────────────┘ ``` -**인터랙션** -- 아이디어 카드 `상세 보기` → 확장하여 상세 전략 및 예시 표시 -- `이 아이디어로 시작` → 해당 아이디어 기본 설정으로 `03-이벤트목적선택` -- 시즌 변경 시 자동으로 트렌드 업데이트 -- `메인으로` → `00-메인대시보드` +**특징**: +- 진행률 표시 +- 이전/다음 버튼 +- 중간 저장 가능 ---- +### 5.2 전환 애니메이션 -### 3.9 공통 화면 +#### 화면 전환 +- **앞으로 이동**: 슬라이드 인 (우→좌) +- **뒤로 이동**: 슬라이드 아웃 (좌→우) +- **바텀 네비게이션**: 페이드 전환 +- **모달/바텀 시트**: 슬라이드 업 -#### 99-마이페이지 +#### 요소 전환 +- **리스트 아이템**: 페이드 인 (순차적) +- **카드 선택**: 스케일 + 하이라이트 +- **로딩**: 스켈레톤 스크린 → 실제 콘텐츠 -**개요** -- 목적: 사용자 정보 및 설정 관리 -- 비즈니스 중요도: ⭐⭐⭐ +### 5.3 제스처 -**주요 기능** -- 매장 정보 수정 -- 알림 설정 -- 계정 관리 +- **스와이프**: + - 좌우: 이미지 갤러리, 탭 전환 + - 아래: 바텀 시트 닫기, 당겨서 새로고침 +- **롱프레스**: 툴팁 표시, 컨텍스트 메뉴 +- **핀치 줌**: 이미지 확대/축소 -**UI 구성요소** +## 6. 반응형 설계 전략 + +### 6.1 브레이크포인트 + +| 디바이스 | 해상도 | 레이아웃 | 주요 변경사항 | +|---------|--------|---------|--------------| +| Mobile | 320px~767px | 단일 컬럼 | 세로 스택, 바텀 네비게이션 | +| Tablet | 768px~1023px | 2컬럼 | 사이드 패널, 그리드 레이아웃 | +| Desktop | 1024px+ | 다중 컬럼 | 대시보드 전체 표시, 사이드바 | + +### 6.2 Mobile First 적용 + +#### 우선순위 정의 +**1순위 (모바일)**: +- 핵심 액션 (이벤트 생성, 참여, 승인) +- 실시간 지표 (참여자 수, ROI) +- 주요 알림 + +**2순위 (태블릿)**: +- 상세 통계 +- 비교 분석 +- 추가 설정 옵션 + +**3순위 (데스크톱)**: +- 전체 대시보드 +- 벤치마킹 데이터 +- 고급 필터 + +#### 점진적 향상 예시 + +**대시보드 화면**: + +**Mobile (320px)**: ``` -┌─────────────────────────────┐ -│ ← 마이페이지 │ -├─────────────────────────────┤ -│ │ -│ 👤 사장님 정보 │ -│ ┌─────────────────────┐ │ -│ │ 홍길동 │ │ -│ │ 010-1234-5678 │ │ -│ │ hong@example.com │ │ -│ │ [수정] │ │ -│ └─────────────────────┘ │ -│ │ -│ 🏪 매장 정보 │ -│ ┌─────────────────────┐ │ -│ │ 왕갈비통닭 │ │ -│ │ 음식점 (치킨) │ │ -│ │ 수원시 영통구... │ │ -│ │ [수정] │ │ -│ └─────────────────────┘ │ -│ │ -│ 🔔 알림 설정 │ -│ ┌─────────────────────┐ │ -│ │ ✅ 이벤트 시작 알림 │ │ -│ │ ✅ 참여자 알림 │ │ -│ │ ✅ 당첨자 발표 알림 │ │ -│ │ ☐ 마케팅 정보 수신 │ │ -│ └─────────────────────┘ │ -│ │ -│ 💳 결제 정보 │ -│ [무료 체험 쿠폰: 0회 남음] │ -│ [결제 수단 등록] │ -│ │ -│ ℹ️ 기타 │ -│ • 이용 약관 │ -│ • 개인정보 처리방침 │ -│ • 고객 지원 │ -│ • 버전 정보 (v1.0.0) │ -│ │ -│ [로그아웃] │ -│ │ -└─────────────────────────────┘ +┌─────────┐ +│ 참여자 │ +│ 1,234명 │ +├─────────┤ +│ 노출수 │ +│ 15,678회│ +├─────────┤ +│ 매출증가│ +│ +42% │ +├─────────┤ +│ ROI │ +│ 245% │ +└─────────┘ ``` -**인터랙션** -- `수정` 버튼 → 해당 정보 수정 모달 -- 알림 토글 → 실시간 반영 -- `결제 수단 등록` → 결제 정보 입력 모달 -- 각 메뉴 터치 → 해당 상세 페이지 -- `로그아웃` → 확인 다이얼로그 → 로그인 화면 - ---- - -## 4. 화면간 전환 및 네비게이션 - -### 4.1 네비게이션 구조 - -**하단 탭 네비게이션 (소상공인 앱)** +**Tablet (768px)**: ``` -┌──────┬──────┬──────┬──────┐ -│ 🏠 │ 🎪 │ 📊 │ 👤 │ -│ 홈 │이벤트│ 분석 │ 마이 │ -└──────┴──────┴──────┴──────┘ +┌─────────┬─────────┐ +│ 참여자 │ 노출수 │ +│ 1,234명 │15,678회│ +├─────────┼─────────┤ +│ 매출증가│ ROI │ +│ +42% │ 245% │ +├─────────┴─────────┤ +│ 채널별 성과 차트 │ +└───────────────────┘ ``` -- **홈 (🏠)**: `00-메인대시보드` -- **이벤트 (🎪)**: 이벤트 생성 플로우 (`03-이벤트목적선택`) -- **분석 (📊)**: `21-실시간대시보드` -- **마이 (👤)**: `99-마이페이지` +**Desktop (1024px+)**: +``` +┌──────────────────────────────────┐ +│ ┌────────┬────────┬────────────┐ │ +│ │참여자 │노출수 │매출 +42% │ │ +│ │1,234명 │15,678회│ROI 245% │ │ +│ └────────┴────────┴────────────┘ │ +│ │ +│ ┌────────────────────────────┐ │ +│ │ 채널별 성과 상세 차트 │ │ +│ │ [대형 그래프] │ │ +│ └────────────────────────────┘ │ +│ │ +│ ┌────────────┬────────────────┐ │ +│ │진행중 이벤트│ 최근 활동 │ │ +│ └────────────┴────────────────┘ │ +└──────────────────────────────────┘ +``` -### 4.2 전환 애니메이션 +### 6.3 터치 타겟 최적화 -**화면 전환 규칙 (Mobile First)** -- 순차 진행: 슬라이드 인 (좌→우) -- 이전 단계: 슬라이드 아웃 (우→좌) -- 탭 전환: 페이드 인/아웃 -- 모달: 바텀 시트 (아래→위) +**최소 크기**: 44x44px (Apple HIG, Material Design 권장) -### 4.3 백 버튼 동작 +**적용 예시**: +- 버튼: 48dp 높이 +- 체크박스/라디오: 44x44px 터치 영역 +- 리스트 아이템: 56dp 높이 +- FAB: 56x56dp -**Android 백 버튼 / iOS 스와이프 백** -- 순차 플로우 내: 이전 단계로 -- 메인 화면: 앱 종료 확인 -- 모달: 모달 닫기 +## 7. 접근성 보장 방안 ---- +### 7.1 WCAG 2.1 AA 준수 -## 5. 반응형 설계 전략 +#### 색상 대비 +- **일반 텍스트**: 최소 4.5:1 +- **대형 텍스트**: 최소 3:1 +- **UI 컴포넌트**: 최소 3:1 -### 5.1 브레이크포인트 +**예시**: +- 주요 버튼: 진한 파란색 (#0066CC) on 흰색 (6.3:1) ✅ +- 경고 메시지: 빨간색 (#CC0000) on 흰색 (5.8:1) ✅ -**Mobile (320px ~ 767px)** - 기본 디자인 -- 단일 컬럼 레이아웃 -- 스택형 UI -- 터치 친화적 인터페이스 (최소 44x44px) -- 폰트 크기: 14px (본문), 16px (입력 필드), 20px (제목) +#### 키보드 네비게이션 +- Tab 순서 논리적 설정 +- 포커스 인디케이터 명확히 표시 +- 모든 인터랙티브 요소 키보드 접근 가능 -**Tablet (768px ~ 1023px)** - 확장 디자인 -- 2열 그리드 (카드형 콘텐츠) -- 사이드바 네비게이션 (접이식) -- 확장된 대시보드 (6개 지표 카드) -- 폰트 크기: 16px (본문), 18px (입력 필드), 24px (제목) +#### 스크린 리더 지원 +- 의미 있는 대체 텍스트 (alt text) +- ARIA 레이블 적절히 사용 +- 동적 콘텐츠 변경 시 aria-live 사용 -**Desktop (1024px+)** - 완전 확장 -- 3열 그리드 -- 고정 사이드바 네비게이션 -- 전체 대시보드 (12개 지표 + 고급 차트) -- 멀티 패널 (리스트 + 상세 동시 표시) -- 폰트 크기: 16px (본문), 18px (입력 필드), 28px (제목) +**예시**: +```html + -### 5.2 Progressive Enhancement +
+ AI가 분석 중입니다... +
+``` -**Mobile (필수 기능)** -- 이벤트 생성 (AI 기획 ~ 배포) -- 실시간 대시보드 (핵심 지표 4개) -- 당첨자 관리 -- 간단한 차트 (막대/선 그래프) +### 7.2 접근성 체크리스트 -**Tablet (향상 기능)** -- 채널별 비교 분석 -- 확장된 대시보드 (6개 지표) -- 드래그 앤 드롭 콘텐츠 편집 -- 인터랙티브 차트 (확대/축소) +- [ ] 모든 이미지에 대체 텍스트 +- [ ] 폼 요소에 명확한 라벨 +- [ ] 에러 메시지 명확하고 구체적 +- [ ] 색상만으로 정보 전달하지 않음 +- [ ] 터치 타겟 최소 44x44px +- [ ] 자동 재생 영상/음악 없음 (또는 컨트롤 제공) +- [ ] 타임아웃 있는 작업에 충분한 시간 제공 -**Desktop (고급 기능)** -- 전체 분석 대시보드 (12개 지표) -- 고급 차트 (히트맵, 퍼널 분석) -- 멀티 패널 워크플로우 -- 키보드 단축키 지원 +## 8. 성능 최적화 방안 -### 5.3 터치/마우스 최적화 +### 8.1 로딩 전략 -**Mobile/Tablet (터치)** -- 최소 터치 영역: 44x44px -- 스와이프 제스처 (화면 전환, 새로고침) -- 롱 프레스 (상세 정보, 컨텍스트 메뉴) -- 핀치 줌 (차트, 이미지) +#### 초기 로딩 +- **Critical CSS**: 인라인 삽입 (above-the-fold) +- **코드 스플리팅**: 라우트별 번들 분리 +- **이미지 최적화**: WebP 포맷, 반응형 이미지 -**Desktop (마우스/키보드)** -- 호버 효과 (툴팁, 미리보기) -- 우클릭 컨텍스트 메뉴 -- 키보드 네비게이션 (Tab, Enter, ESC) -- 드래그 앤 드롭 (콘텐츠 편집, 순서 변경) +**목표**: +- 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 +- 데이터: 무한 스크롤 페이지네이션 -## 6. 접근성 보장 방안 (WCAG 2.1 AA) +### 8.2 AI 처리 피드백 -### 6.1 시각적 접근성 +AI 작업은 시간이 걸리므로 명확한 피드백 필수: -**색상 대비** -- 본문 텍스트: 최소 4.5:1 대비율 -- 대형 텍스트 (18px+): 최소 3:1 대비율 -- UI 컴포넌트: 최소 3:1 대비율 -- 색상만으로 정보 전달 금지 (아이콘, 패턴 병행) +**패턴**: +1. **즉각적 피드백**: "AI가 분석 시작했습니다" +2. **진행률 표시**: 프로그레스 바 + 예상 소요 시간 +3. **백그라운드 처리**: 다른 작업 가능 +4. **완료 알림**: 푸시 알림 + 인앱 알림 -**폰트** -- 최소 폰트 크기: 14px (본문), 16px (입력 필드) -- 줄 간격: 최소 1.5 (본문), 1.2 (제목) -- 글자 간격 조정 가능 -- 고대비 모드 지원 +**예시**: +``` +🤖 AI가 이미지 생성중... +▓▓▓▓▓░░░░░ 50% +예상 소요: 1분 30초 남음 -### 6.2 청각적 접근성 +✅ 백그라운드에서 계속 진행됩니다. + 완료되면 알려드릴게요! +``` -**영상 콘텐츠** -- 자막 파일 제공 (SRT) -- 영상 내 텍스트 오버레이 -- 시각적 피드백 (로딩, 완료) +### 8.3 캐싱 전략 -### 6.3 운동 능력 접근성 +| 데이터 유형 | 캐싱 전략 | 갱신 주기 | +|------------|----------|----------| +| 정적 자산 (이미지, CSS, JS) | Service Worker | 앱 업데이트 시 | +| 트렌드 분석 결과 | Redis | 1시간 | +| 경품 추천 | Redis | 5분 | +| 실시간 대시보드 | 클라이언트 메모리 | 5분 | +| 사용자 정보 | LocalStorage | 세션 유지 | -**터치/클릭** -- 최소 터치 영역: 44x44px -- 충분한 요소 간 간격 (8px 이상) -- 드래그 앤 드롭 대안 제공 (버튼 클릭) -- 시간 제한 없음 또는 연장 가능 +### 8.4 성능 목표 -### 6.4 인지적 접근성 +| 기능 | 성능 목표 | 측정 방법 | +|-----|----------|----------| +| 이벤트 기획 | 10초 이내 | AI 처리 시간 합계 | +| 콘텐츠 생성 | 5-8분 이내 | 병렬 처리 시간 | +| 배포 | 1분 이내 | 채널별 병렬 배포 | +| 대시보드 로딩 | 1초 이내 | LCP | +| 화면 전환 | 300ms 이내 | 애니메이션 완료 시간 | -**명확성** -- 간결한 언어 사용 -- 명확한 레이블 및 안내 -- 에러 메시지 구체적으로 제공 -- 아이콘 + 텍스트 병행 - -**일관성** -- 일관된 네비게이션 구조 -- 일관된 인터랙션 패턴 -- 예측 가능한 동작 - -### 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. 변경 이력 +## 9. 변경 이력 | 버전 | 날짜 | 변경 내용 | 작성자 | -|------|------|-----------|--------| -| 1.0 | 2025-10-17 | 초기 UI/UX 설계서 작성 | 박민지 (픽셀) | +|-----|------|----------|--------| +| 1.0 | 2025-01-20 | 초기 UI/UX 설계서 작성 | 박민지 | --- -## 부록: KT 사장님Easy 벤치마킹 결과 +## 부록 -### 주요 인사이트 -1. **AI 중심 설계**: AI Agent, AI 이미지 제작 등 AI 기능 전면 배치 -2. **통합 관리**: 하나의 앱에서 로봇, CCTV, 주문 시스템 등 통합 관리 -3. **데이터 기반**: 매출 비교, 유동인구 분석 등 데이터 분석 제공 -4. **실용적 혜택**: 무료 체험, 포인트 등 실질적 혜택 강조 -5. **인사이트 콘텐츠**: 사장님을 위한 고민 해결 팁, 트렌드 콘텐츠 제공 +### A. 디자인 시스템 가이드라인 -### 적용 사항 -- AI 기능을 전면에 배치 (기획, 콘텐츠 생성, 개선안) -- 실시간 데이터 분석 대시보드 -- 무료 체험 쿠폰 제공 -- 간편한 UI (Mobile First) -- 인사이트 제공 (AI 개선안, 다음 이벤트 아이디어) +#### 색상 팔레트 +``` +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. 참조 자료 + +1. **KT 사장님Easy**: https://product.kt.com/wDic/soho/marketing.do?itemCode=sajangeasy +2. **wwit.design 닷슬래시대시**: https://wwit.design/2023/09/30/dotslashdash/ +3. **Material Design**: https://material.io/design +4. **Apple Human Interface Guidelines**: https://developer.apple.com/design/human-interface-guidelines/ +5. **WCAG 2.1**: https://www.w3.org/WAI/WCAG21/quickref/ --- -**문서 끝** +**문서 종료** \ No newline at end of file