P82282866/kt-event-marketing

Fork 0

cherry2250 f3606f2089 push uiux

2025-10-21 14:42:02 +09:00

56 KiB

Raw Blame History

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

문서 정보

프로젝트명: KT AI 기반 소상공인 이벤트 자동 생성 서비스
작성일: 2025-10-21
버전: 1.0
작성자: UI/UX Designer

1. 프로젝트 개요

1.1 서비스 목적

소상공인 및 중소기업의 이벤트 기획·제작·운영 역량과 시간 부족 문제를 해결하기 위한 AI 기반 이벤트 자동 생성 서비스

1.2 핵심 가치 제안

AI 트렌드 분석: 업종/지역/시즌 트렌드 자동 분석
3가지 이벤트 추천: 목적에 맞는 최적화된 이벤트 기획안
자동 콘텐츠 생성: SNS 이미지 3가지 스타일 자동 생성
다중 채널 배포: 우리동네TV, 링고비즈, 지니TV, SNS 동시 배포
실시간 성과 측정: 통합 대시보드로 투자대비수익률 분석

1.3 타겟 사용자

주 사용자: 소상공인 (음식점, 카페, 소매점 운영자)
사용 환경: 모바일 중심 (60%), 데스크톱 (40%)
사용 시간: 매장 운영 중 짧은 시간 활용 (5-10분 내 이벤트 생성)

1.4 마이크로서비스 구성

User - 사용자 인증 및 매장정보 관리
Event - 이벤트 기획 및 관리
AI - AI 기반 트렌드 분석 및 이벤트 추천
Content - SNS 콘텐츠 생성
Distribution - 다중 채널 배포 관리
Participation - 이벤트 참여 및 당첨자 관리
Analytics - 실시간 효과 측정 및 통합 대시보드

2. 설계 원칙

2.1 Mobile First 디자인 철학

우선순위 중심 설계 (Priority-Driven Design)

Above the Fold 최적화: 스크롤 없이 핵심 정보 확인
Single Column Layout: 모바일에서 단일 컬럼으로 정보 수직 배치
Progressive Disclosure: 상세 정보는 탭/아코디언으로 숨김

점진적 향상 (Progressive Enhancement)

Mobile (320-767px)      → 핵심 기능만 제공
Tablet (768-1023px)     → 부가 정보 추가
Desktop (1024px+)       → 전체 기능 및 상세 분석

성능 최적화 (Performance Optimization)

First Contentful Paint: < 1.5s
Time to Interactive: < 3s
Lighthouse Score: > 90

2.2 유저스토리 기반 설계

불필요한 추가 설계 금지: 20개 유저스토리와 정확히 매칭
우선순위 반영: M(Must) > S(Should) > C(Could) > W(Won't) 순서로 개발

2.3 사용성 원칙

3 Tap Rule: 모든 주요 기능은 3번 탭 내 도달 가능
터치 영역: 최소 44x44px (애플 권장)
가독성: 최소 글꼴 크기 14px (모바일), 16px (데스크톱)
색상 대비: WCAG AA 등급 이상 (4.5:1)

3. 프로토타입 화면 목록

총 17개 화면

No	화면명	유저스토리	우선순위	마이크로서비스	Mobile 중요도
인증 및 사용자 관리
01	로그인	UFR-USER-020	M/8	User	⭐⭐⭐
02	회원가입	UFR-USER-010	M/21	User	⭐⭐⭐
03	프로필편집	UFR-USER-030	C/8	User	⭐
04	로그아웃확인	UFR-USER-040	S/3	User	⭐
메인 및 대시보드
05	대시보드	UFR-EVENT-010	S/13	Event	⭐⭐⭐
06	이벤트목록	UFR-EVENT-070	S/13	Event	⭐⭐
이벤트 생성 플로우
07	이벤트목적선택	UFR-EVENT-020	M/5	Event	⭐⭐⭐
08	AI이벤트추천	UFR-EVENT-030	M/34	AI	⭐⭐⭐
09	SNS이미지생성	UFR-CONT-010	M/21	Content	⭐⭐⭐
10	콘텐츠편집	UFR-CONT-020	S/13	Content	⭐⭐
11	배포채널선택	UFR-EVENT-040	M/13	Event	⭐⭐
12	최종승인	UFR-EVENT-050	M/13	Event	⭐⭐⭐
이벤트 관리
13	이벤트상세	UFR-EVENT-060	S/13	Event	⭐⭐⭐
14	참여자목록	UFR-PART-020	S/8	Participation	⭐
참여자 관리
15	이벤트참여	UFR-PART-010	M/13	Participation	⭐⭐⭐
16	당첨자추첨	UFR-PART-030	M/13	Participation	⭐
성과 분석
17	실시간대시보드	UFR-ANAL-010	M/34	Analytics	⭐⭐

4. 화면 간 사용자 플로우

graph TD
    Start([시작]) --> Login{로그인 여부}

    %% 최초 사용자 플로우
    Login -->|미로그인| SignUp[02-회원가입]
    SignUp --> Login01[01-로그인]
    Login01 --> Dashboard[05-대시보드]

    Login -->|로그인됨| Dashboard

    %% 메인 대시보드 액션
    Dashboard --> EventList[06-이벤트목록]
    Dashboard --> EventDetail[13-이벤트상세]
    Dashboard --> Profile[03-프로필편집]
    Dashboard --> CreateEvent[07-이벤트목적선택]
    Dashboard --> Logout[04-로그아웃확인]

    %% 이벤트 생성 플로우 (핵심)
    CreateEvent --> AIRecommend[08-AI이벤트추천]
    AIRecommend --> ImageGen[09-SNS이미지생성]
    ImageGen --> ContentEdit[10-콘텐츠편집]
    ContentEdit --> ChannelSelect[11-배포채널선택]
    ChannelSelect --> FinalApproval[12-최종승인]
    FinalApproval --> Dashboard

    %% 이벤트 관리 플로우
    EventDetail --> ParticipantList[14-참여자목록]
    EventDetail --> DrawWinner[16-당첨자추첨]
    EventDetail --> Analytics[17-실시간대시보드]

    EventList --> EventDetail

    %% 고객 참여 플로우 (별도)
    External([외부 채널<br/>SNS/TV/연결음]) --> Participate[15-이벤트참여]
    Participate --> ThankYou([참여 완료])

    %% 프로필 편집
    Profile --> Dashboard

    %% 로그아웃
    Logout --> Login01

    style Dashboard fill:#4A90E2,color:#fff
    style CreateEvent fill:#7ED321,color:#fff
    style AIRecommend fill:#7ED321,color:#fff
    style FinalApproval fill:#7ED321,color:#fff
    style Analytics fill:#F5A623,color:#fff
    style Participate fill:#BD10E0,color:#fff

5. 화면별 상세 설계

5.1 인증 및 사용자 관리

01-로그인

개요

목적: 기존 사용자의 안전한 서비스 접근
관련 유저스토리: UFR-USER-020
비즈니스 중요도: M/8 (필수, 낮은 복잡도)

주요 기능

전화번호/비밀번호 입력
로그인 유지 옵션
비밀번호 찾기
회원가입 링크

UI 구성요소

Mobile (320-767px)

┌─────────────────────┐
│                     │
│   [서비스 로고]      │
│                     │
│ ┌─────────────────┐ │
│ │ 전화번호 입력    │ │
│ └─────────────────┘ │
│ ┌─────────────────┐ │
│ │ 비밀번호 입력    │ │
│ └─────────────────┘ │
│                     │
│ ☐ 로그인 유지       │
│                     │
│ ┌─────────────────┐ │
│ │   로그인 버튼   │ │
│ └─────────────────┘ │
│                     │
│  비밀번호 찾기  |  회원가입 │
│                     │
└─────────────────────┘

Desktop (1024px+)

┌─────────────────────────────────────┐
│                                     │
│        [서비스 로고 + 설명]          │
│                                     │
│    ┌──────────────────────┐        │
│    │  전화번호 입력        │        │
│    └──────────────────────┘        │
│    ┌──────────────────────┐        │
│    │  비밀번호 입력        │        │
│    └──────────────────────┘        │
│                                     │
│    ☐ 로그인 유지                    │
│                                     │
│    ┌──────────────────────┐        │
│    │     로그인 버튼       │        │
│    └──────────────────────┘        │
│                                     │
│    비밀번호 찾기  |  회원가입        │
│                                     │
└─────────────────────────────────────┘

인터랙션

포커스 이동: Enter 키로 다음 입력 필드 이동
입력 검증: 실시간 형식 검증 (전화번호 형식, 비밀번호 최소 길이)
비밀번호 표시: 눈 아이콘 클릭으로 비밀번호 보기/숨기기
로그인 실패: 오류 메시지 입력 필드 하단에 빨간색으로 표시
로딩 상태: 버튼 비활성화 + 스피너 표시

반응형 처리

Mobile: 세로 전체 화면, 버튼 하단 고정
Tablet: 중앙 카드 형태 (최대 너비 480px)
Desktop: 좌측 브랜딩 + 우측 로그인 폼 (50:50 레이아웃)

접근성

Label과 Input 연결 (for/id 속성)
오류 메시지는 aria-live="assertive"
Tab 키 순서: 전화번호 → 비밀번호 → 로그인 유지 → 로그인 버튼

02-회원가입

개요

목적: 신규 소상공인 사용자 온보딩
관련 유저스토리: UFR-USER-010
비즈니스 중요도: M/21 (필수, 중간 복잡도)

주요 기능

다단계 폼 (3단계)
- Step 1: 기본 정보 (이름, 전화번호, 이메일, 비밀번호)
- Step 2: 매장 정보 (매장명, 업종, 주소, 영업시간)
- Step 3: 사업자번호 검증
진행 인디케이터
단계별 유효성 검증
사업자번호 국세청 DB 연동 검증

UI 구성요소

Mobile (320-767px) - Step 1

┌─────────────────────┐
│ ← 회원가입           │
├─────────────────────┤
│ ●──○──○  (진행바)   │
│                     │
│ 기본 정보 입력       │
│                     │
│ ┌─────────────────┐ │
│ │ 이름 *          │ │
│ └─────────────────┘ │
│ ┌─────────────────┐ │
│ │ 전화번호 *       │ │
│ └─────────────────┘ │
│ ┌─────────────────┐ │
│ │ 이메일 *        │ │
│ └─────────────────┘ │
│ ┌─────────────────┐ │
│ │ 비밀번호 *       │ │
│ └─────────────────┘ │
│ ┌─────────────────┐ │
│ │ 비밀번호 확인 *  │ │
│ └─────────────────┘ │
│                     │
│ 비밀번호는 8자 이상, │
│ 영문/숫자/특수문자   │
│ 포함                │
│                     │
│ ┌─────────────────┐ │
│ │     다음 단계   │ │
│ └─────────────────┘ │
└─────────────────────┘

Mobile (320-767px) - Step 2

┌─────────────────────┐
│ ← 회원가입           │
├─────────────────────┤
│ ○──●──○  (진행바)   │
│                     │
│ 매장 정보 입력       │
│                     │
│ ┌─────────────────┐ │
│ │ 매장명 *        │ │
│ └─────────────────┘ │
│ ┌─────────────────┐ │
│ │ 업종 선택 *     │ │ (드롭다운)
│ └─────────────────┘ │
│ ┌─────────────────┐ │
│ │ 주소 검색 *     │ │
│ └─────────────────┘ │
│ ┌─────────────────┐ │
│ │ 상세 주소       │ │
│ └─────────────────┘ │
│ ┌─────────────────┐ │
│ │ 영업시간        │ │ (선택)
│ └─────────────────┘ │
│                     │
│ ┌─────────────────┐ │
│ │     다음 단계   │ │
│ └─────────────────┘ │
└─────────────────────┘

Mobile (320-767px) - Step 3

┌─────────────────────┐
│ ← 회원가입           │
├─────────────────────┤
│ ○──○──●  (진행바)   │
│                     │
│ 사업자번호 검증      │
│                     │
│ ┌─────────────────┐ │
│ │ 사업자번호 *    │ │
│ │ 000-00-00000    │ │
│ └─────────────────┘ │
│                     │
│ ┌─────────────────┐ │
│ │   검증하기      │ │
│ └─────────────────┘ │
│                     │
│ [검증 결과 영역]     │
│ ✓ 정상 사업자        │
│   업체명: 왕갈비통닭  │
│   대표자: 홍길동     │
│                     │
│ ┌─────────────────┐ │
│ │  회원가입 완료  │ │
│ └─────────────────┘ │
└─────────────────────┘

인터랙션

진행바: 현재 단계 표시, 클릭으로 이전 단계 이동 가능
필수 필드: 별표(*) 표시, 미입력 시 다음 버튼 비활성화
실시간 검증:
- 전화번호: 010-0000-0000 형식 자동 포맷
- 이메일: @ 포함 여부 확인
- 비밀번호: 8자 이상, 영문/숫자/특수문자 포함 여부 표시
주소 검색: Daum 주소 API 팝업 또는 Bottom Sheet
사업자번호 검증:
- 로딩 인디케이터 (3초 이내)
- 성공: 녹색 체크 + 업체 정보 표시
- 실패: 빨간색 X + 오류 메시지
뒤로 가기: 이전 입력 값 유지

반응형 처리

Mobile: 전체 화면, 단계별 스크롤
Tablet: 중앙 카드 (최대 너비 600px)
Desktop: 좌측 진행바 + 우측 폼 (30:70 레이아웃)

접근성

진행바는 aria-label="회원가입 진행 단계"
필수 필드는 aria-required="true"
검증 결과는 aria-live="polite"

03-프로필편집

개요

목적: 사용자 정보 수정
관련 유저스토리: UFR-USER-030
비즈니스 중요도: C/8 (선택, 낮은 복잡도)

주요 기능

기본 정보 수정 (이름, 전화번호, 이메일)
매장 정보 수정 (매장명, 업종, 주소, 영업시간)
비밀번호 변경 (현재 비밀번호 확인 필수)
변경사항 저장 확인 다이얼로그

UI 구성요소

Mobile (320-767px)

┌─────────────────────┐
│ ☰  프로필 편집    👤│ ← Header 추가
├─────────────────────┤
│                     │
│ ▼ 기본 정보          │
│   이름: [홍길동   ]  │
│   전화번호: [010-...] │
│   이메일: [hong@...]│
│                     │
│ ▼ 매장 정보          │
│   매장명: [왕갈비...]│
│   업종: [음식점   ]  │
│   주소: [수원시...]  │
│   영업시간: [10:00~]│
│                     │
│ ▼ 비밀번호 변경      │
│   현재 비밀번호: [ ] │
│   새 비밀번호: [   ] │
│   비밀번호 확인: [ ] │
│                     │
│ ┌─────────────────┐ │
│ │   저장하기      │ │
│ └─────────────────┘ │
├─────────────────────┤
│ 홈  이벤트 분석 프로필│ ← Nav Bottom 추가
└─────────────────────┘

인터랙션

아코디언: 각 섹션 클릭으로 접기/펼치기
전화번호 변경: 재인증 다이얼로그 표시 (SMS 인증)
저장 확인: "변경사항을 저장하시겠습니까?" 다이얼로그
취소 확인: 변경사항이 있을 경우 "저장하지 않고 나가시겠습니까?" 다이얼로그
성공 토스트: "프로필이 성공적으로 업데이트되었습니다" (2초)

반응형 처리

Mobile: 전체 화면, 아코디언 형태
Tablet/Desktop: 중앙 카드 (최대 너비 720px), 저장 버튼 하단 고정

04-로그아웃확인

개요

목적: 안전한 로그아웃
관련 유저스토리: UFR-USER-040
비즈니스 중요도: S/3 (권장, 낮은 복잡도)

주요 기능

로그아웃 확인 다이얼로그
세션 종료
로그인 화면 이동

UI 구성요소

Mobile (320-767px)

┌─────────────────────┐
│                     │
│   [어두운 배경]      │
│                     │
│ ┌─────────────────┐ │
│ │ 로그아웃         │ │
│ ├─────────────────┤ │
│ │                 │ │
│ │ 로그아웃 하시겠  │ │
│ │ 습니까?         │ │
│ │                 │ │
│ ├─────────────────┤ │
│ │ ┌─────┐┌─────┐│ │
│ │ │취소 ││확인 ││ │
│ │ └─────┘└─────┘│ │
│ └─────────────────┘ │
│                     │
└─────────────────────┘

인터랙션

다이얼로그 표시: 프로필 메뉴 → 로그아웃 선택
확인: 세션 종료 + 로그인 화면 이동 (애니메이션)
취소: 다이얼로그 닫기, 이전 화면 유지
배경 클릭: 취소와 동일

반응형 처리

Mobile: Bottom Sheet 형태
Tablet/Desktop: 중앙 Modal Dialog (최대 너비 400px)

5.2 메인 및 대시보드

05-대시보드

개요

목적: 메인 허브, 이벤트 현황 한눈에 파악
관련 유저스토리: UFR-EVENT-010
비즈니스 중요도: S/13 (권장, 중간 복잡도)

주요 기능

진행중 이벤트 3개 표시 (모바일)
예정/종료 이벤트 개수
"새 이벤트 만들기" 버튼 (FAB)
Bottom Navigation (홈, 이벤트, 분석, 프로필)

UI 구성요소

Mobile (320-767px)

┌─────────────────────┐
│ 대시보드     [프로필]│
├─────────────────────┤
│                     │
│ 안녕하세요, 홍길동님!│
│                     │
│ ┌─────────────────┐ │
│ │ 진행중 3 | 예정 1│ │
│ │ 종료 5  | 총 9개 │ │
│ └─────────────────┘ │
│                     │
│ 진행중 이벤트        │
│ ┌─────────────────┐ │
│ │ 신규고객 이벤트  │ │
│ │ 참여자: 128명    │ │
│ │ D-5 종료까지     │ │
│ └─────────────────┘ │
│ ┌─────────────────┐ │
│ │ 재방문 이벤트    │ │
│ │ 참여자: 56명     │ │
│ │ D-12 종료까지    │ │
│ └─────────────────┘ │
│ ┌─────────────────┐ │
│ │ 매출증대 이벤트  │ │
│ │ 참여자: 89명     │ │
│ │ D-20 종료까지    │ │
│ └─────────────────┘ │
│                     │
│ 더보기 >            │
│                     │
├─────────────────────┤
│ [홈][이벤트][분석][프로필] │ ← Bottom Navigation
└─────────────────────┘
            [+] ← FAB

Desktop (1024px+)

┌─────────────────────────────────────┐
│ [로고] 대시보드                [프로필] │
├─────────────────────────────────────┤
│ [사이드바]  안녕하세요, 홍길동님!     │
│           ┌────────────────────────┐│
│ • 대시보드  │ 진행중 5 | 예정 2 | 종료 10 ││
│ • 이벤트   └────────────────────────┘│
│ • 분석                              │
│ • 프로필   진행중 이벤트             │
│           ┌──────┐┌──────┐┌──────┐│
│           │이벤트1││이벤트2││이벤트3││
│           │참여128││참여56││참여89││
│           │D-5   ││D-12  ││D-20  ││
│           └──────┘└──────┘└──────┘│
│           ┌──────┐┌──────┐         │
│           │이벤트4││이벤트5│         │
│           │...   ││...   │         │
│           └──────┘└──────┘         │
│                                     │
│           예정 이벤트               │
│           ┌──────┐┌──────┐         │
│           │이벤트1││이벤트2│         │
│           └──────┘└──────┘         │
│                                     │
└─────────────────────────────────────┘

인터랙션

이벤트 카드 클릭: 이벤트 상세 화면 이동
FAB 클릭: 이벤트 목적 선택 화면 이동
더보기: 이벤트 목록 화면 이동
Bottom Navigation: 메뉴 전환 (애니메이션)

반응형 처리

Mobile: 카드 1열, Bottom Navigation
Tablet: 카드 2열, Bottom Navigation
Desktop: 카드 3열, Side Navigation

5.3 이벤트 생성 플로우

08-AI이벤트추천

개요

목적: AI 트렌드 분석 + 3가지 이벤트 추천
관련 유저스토리: UFR-EVENT-030 (통합)
비즈니스 중요도: M/34 (필수, 최고 복잡도)

주요 기능

트렌드 분석 결과 표시 (업종/지역/시즌)
3가지 예산 수준별 이벤트 추천 (저비용/중비용/고비용)
각 예산별 온/오프라인 방식 4가지 추천 (온라인 2개, 오프라인 2개)
제목/경품 간편 수정 (인라인 편집)
로딩 인디케이터 (10초 이내)

UI 구성요소

Mobile (320-767px) - 로딩 상태

┌─────────────────────┐
│ ☰  AI 이벤트 추천  👤│ ← Header 추가
├─────────────────────┤
│                     │
│                     │
│  [AI 아이콘 애니메이션]│
│                     │
│  AI가 트렌드를 분석하고│
│  최적의 이벤트를     │
│  추천하고 있어요...  │
│                     │
│  [진행 바 50%]       │
│                     │
│                     │
├─────────────────────┤
│ 홈  이벤트 분석 프로필│ ← Nav Bottom 추가
└─────────────────────┘

Mobile (320-767px) - 완료 상태

┌─────────────────────┐
│ ☰  AI 이벤트 추천  👤│ ← Header
├─────────────────────┤
│ ▼ 트렌드 분석 결과   │
│ (접기/펼치기)        │
│                     │
│ 예산별 추천 이벤트   │
│ (각 예산별 4가지 방식)│
│                     │
│ ┌─────────────────┐ │
│ │ 💰 옵션 1: 저비용│ │
│ │ ────────────────│ │
│ │ 🌐 온라인 방식 1 │ │
│ │ [SNS 팔로우..✏] │ │ ← 제목 인라인 편집
│ │ 경품: [커피 쿠폰✏]│ │ ← 경품 인라인 편집
│ │ 참여: SNS 팔로우 │ │
│ │ 예상: 180명     │ │
│ │ 비용: 25만원    │ │
│ │ 투자대비수익률: 520%│ │
│ │ ○ 선택          │ │
│ └─────────────────┘ │
│                     │
│ ┌─────────────────┐ │
│ │ 🌐 온라인 방식 2 │ │
│ │ [온라인주문..✏] │ │
│ │ 경품: [할인쿠폰✏]│ │
│ │ 참여: 온라인주문시│ │
│ │ 예상: 200명     │ │
│ │ 비용: 28만원    │ │
│ │ 투자대비수익률: 480%│ │
│ │ ○ 선택          │ │
│ └─────────────────┘ │
│                     │
│ ┌─────────────────┐ │
│ │ 🏪 오프라인 방식1│ │
│ │ [전화번호 등록..✏]│ │
│ │ 경품: [커피 쿠폰✏]│ │
│ │ 참여: 전화번호   │ │
│ │ 예상: 150명     │ │
│ │ 비용: 30만원    │ │
│ │ 투자대비수익률: 450%│ │
│ │ ○ 선택          │ │
│ └─────────────────┘ │
│                     │
│ ┌─────────────────┐ │
│ │ 🏪 오프라인 방식2│ │
│ │ [매장방문..✏]   │ │
│ │ 경품: [즉석할인✏]│ │
│ │ 참여: 매장 방문  │ │
│ │ 예상: 120명     │ │
│ │ 비용: 22만원    │ │
│ │ 투자대비수익률: 500%│ │
│ │ ○ 선택          │ │
│ └─────────────────┘ │
│                     │
│ ┌─────────────────┐ │
│ │ 💳 옵션 2: 중비용│ │
│ │ ────────────────│ │
│ │ 🌐 온라인 방식 1 │ │
│ │ [인스타 댓글..✏]│ │
│ │ 경품: [상품권1만✏]│ │
│ │ 참여: SNS 댓글  │ │
│ │ 예상: 250명     │ │
│ │ 비용: 48만원    │ │
│ │ 투자대비수익률: 380%│ │
│ │ ○ 선택          │ │
│ └─────────────────┘ │
│                     │
│ ┌─────────────────┐ │
│ │ 🌐 온라인 방식 2 │ │
│ │ [앱 리뷰..✏]    │ │
│ │ 경품: [포인트✏] │ │
│ │ 참여: 앱리뷰작성 │ │
│ │ 예상: 220명     │ │
│ │ 비용: 45만원    │ │
│ │ 투자대비수익률: 350%│ │
│ │ ○ 선택          │ │
│ └─────────────────┘ │
│                     │
│ ┌─────────────────┐ │
│ │ 🏪 오프라인 방식1│ │
│ │ [재방문 이벤트✏]│ │
│ │ 경품: [상품권1만✏]│ │
│ │ 참여: 영수증제출 │ │
│ │ 예상: 200명     │ │
│ │ 비용: 50만원    │ │
│ │ 투자대비수익률: 320%│ │
│ │ ○ 선택          │ │
│ └─────────────────┘ │
│                     │
│ ┌─────────────────┐ │
│ │ 🏪 오프라인 방식2│ │
│ │ [친구초대..✏]   │ │
│ │ 경품: [할인쿠폰✏]│ │
│ │ 참여: 친구와방문 │ │
│ │ 예상: 180명     │ │
│ │ 비용: 42만원    │ │
│ │ 투자대비수익률: 360%│ │
│ │ ○ 선택          │ │
│ └─────────────────┘ │
│                     │
│ ┌─────────────────┐ │
│ │ 💎 옵션 3: 고비용│ │
│ │ ────────────────│ │
│ │ 🌐 온라인 방식 1 │ │
│ │ [유튜브 구독..✏]│ │
│ │ 경품: [상품권5만✏]│ │
│ │ 참여: 유튜브구독 │ │
│ │ 예상: 400명     │ │
│ │ 비용: 95만원    │ │
│ │ 투자대비수익률: 280%│ │
│ │ ○ 선택          │ │
│ └─────────────────┘ │
│                     │
│ ┌─────────────────┐ │
│ │ 🌐 온라인 방식 2 │ │
│ │ [온라인설문..✏] │ │
│ │ 경품: [경품세트✏]│ │
│ │ 참여: 설문응답   │ │
│ │ 예상: 350명     │ │
│ │ 비용: 88만원    │ │
│ │ 투자대비수익률: 300%│ │
│ │ ○ 선택          │ │
│ └─────────────────┘ │
│                     │
│ ┌─────────────────┐ │
│ │ 🏪 오프라인 방식1│ │
│ │ [VIP초대 이벤트✏]│ │
│ │ 경품: [고급상품✏]│ │
│ │ 참여: VIP 초대장│ │
│ │ 예상: 300명     │ │
│ │ 비용: 100만원   │ │
│ │ 투자대비수익률: 250%│ │
│ │ ○ 선택          │ │
│ └─────────────────┘ │
│                     │
│ ┌─────────────────┐ │
│ │ 🏪 오프라인 방식2│ │
│ │ [럭키드로우..✏] │ │
│ │ 경품: [명품경품✏]│ │
│ │ 참여: 구매고객추첨│ │
│ │ 예상: 280명     │ │
│ │ 비용: 92만원    │ │
│ │ 투자대비수익률: 270%│ │
│ │ ○ 선택          │ │
│ └─────────────────┘ │
│                     │
│ ┌─────────────────┐ │
│ │   다음 단계     │ │ ← 선택 후 활성화
│ └─────────────────┘ │
├─────────────────────┤
│ 홈  이벤트 분석 프로필│ ← Nav Bottom
└─────────────────────┘

트렌드 분석 결과 펼침 상태

┌─────────────────────┐
│ ▼ 트렌드 분석 결과   │
│ ────────────────────│
│                     │
│ 📊 업종 트렌드       │
│ • 최근 성공 유형:    │
│   할인 쿠폰 (참여율  │
│   35% ↑)           │
│ • 선호 경품:        │
│   커피/상품권       │
│ • 효과적 참여방법:   │
│   전화번호 > SNS    │
│                     │
│ 📍 지역 특성         │
│ • 지역 성공률:      │
│   수원 지역 28% ↑   │
│ • 지역 고객 특성:    │
│   20-30대 여성 주력│
│                     │
│ 🗓️ 시즌 특성         │
│ • 추천 이벤트:      │
│   봄 신메뉴 프로모션│
│ • 특별 시즌:        │
│   화이트데이 (3/14) │
│                     │
└─────────────────────┘

인터랙션

로딩:
- AI 아이콘 애니메이션 (회전)
- 진행 바 0% → 100% (10초)
- 완료 시 부드러운 전환
트렌드 분석 접기/펼치기: 아코디언 형태
제목/경품 편집:
- 연필 아이콘 클릭 → 인라인 편집 모드
- 최대 글자수 표시 (제목 50자, 경품 30자)
- Enter/저장 시 변경사항 저장
옵션 선택: 라디오 버튼, 1개만 선택 가능
다음 단계: 선택 후 버튼 활성화, 콘텐츠 생성 화면 이동

반응형 처리

Mobile: 세로 스크롤, 카드 1열
Tablet: 카드 1열 유지, 너비 증가
Desktop: 좌측 트렌드 분석 (30%) + 우측 추천안 (70%)

09-SNS이미지생성

개요

목적: 3가지 스타일 SNS 이미지 자동 생성
관련 유저스토리: UFR-CONT-010
비즈니스 중요도: M/21 (필수, 중간 복잡도)

주요 기능

이벤트 정보 기반 이미지 생성
3가지 스타일 제공 (심플/화려/트렌디)
생성 중 로딩 (5초 이내)
이미지 풀스크린 미리보기

UI 구성요소

Mobile (320-767px) - 생성 중

┌─────────────────────┐
│ ☰  SNS 이미지 생성 👤│ ← Header 추가
├─────────────────────┤
│                     │
│  [AI 이미지 생성 중] │
│                     │
│  딥러닝 모델이       │
│  이벤트에 어울리는   │
│  이미지를 생성하고   │
│  있어요...          │
│                     │
│  [스피너 애니메이션] │
│                     │
│  예상 시간: 5초      │
│                     │
├─────────────────────┤
│ 홈  이벤트 분석 프로필│ ← Nav Bottom 추가
└─────────────────────┘

Mobile (320-767px) - 완료

┌─────────────────────┐
│ ☰  SNS 이미지 생성 👤│ ← Header
├─────────────────────┤
│ 스타일 1: 심플       │
│ ┌─────────────────┐ │
│ │                 │ │
│ │  [이미지 미리보기]│ │
│ │                 │ │
│ │ [이벤트 제목]    │ │
│ │ [경품 정보]      │ │
│ │                 │ │
│ └─────────────────┘ │
│ ○ 선택 | 🔍 크게보기 │
│                     │
│ 스타일 2: 화려       │
│ ┌─────────────────┐ │
│ │  [이미지...]     │ │
│ └─────────────────┘ │
│ ○ 선택 | 🔍 크게보기 │
│                     │
│ 스타일 3: 트렌디     │
│ ┌─────────────────┐ │
│ │  [이미지...]     │ │
│ └─────────────────┘ │
│ ○ 선택 | 🔍 크게보기 │
│                     │
│ ┌─────────────────┐ │
│ │ 건너뛰기 | 다음  │ │
│ └─────────────────┘ │
├─────────────────────┤
│ 홈  이벤트 분석 프로필│ ← Nav Bottom
└─────────────────────┘

인터랙션

생성 로딩:
- Skeleton Screen (이미지 영역)
- 스피너 + 진행 메시지
이미지 선택: 라디오 버튼, 1개 선택
크게보기: 풀스크린 모달, 핀치 줌 가능
건너뛰기: 이미지 없이 다음 단계 (콘텐츠 편집 스킵)
다음: 선택한 이미지로 콘텐츠 편집 화면 이동

반응형 처리

Mobile: 이미지 1열, 세로 스크롤
Tablet: 이미지 2열 (1+2 또는 3열)
Desktop: 이미지 3열 가로 배치

12-최종승인

개요

목적: 모든 설정 최종 확인 및 승인
관련 유저스토리: UFR-EVENT-050
비즈니스 중요도: M/13 (필수, 중간 복잡도)

주요 기능

이벤트 정보 요약 (제목, 경품, 기간)
SNS 이미지 미리보기
배포 채널 목록
수정 버튼 (각 섹션별 이전 단계 이동)
승인 및 배포 버튼

UI 구성요소

Mobile (320-767px)

┌─────────────────────┐
│ ☰  최종 승인      👤│ ← Header 추가
├─────────────────────┤
│                     │
│ ✓ 이벤트 정보  [수정]│
│ ────────────────────│
│ • 제목: 신규고객...  │
│ • 경품: 커피 쿠폰    │
│ • 기간: 2025-11-01 ~ │
│        2025-11-15   │
│ • 참여방법: 전화번호 │
│                     │
│ ✓ SNS 이미지   [수정]│
│ ────────────────────│
│ ┌─────────────────┐ │
│ │ [선택한 이미지]  │ │
│ │ (스타일 1: 심플) │ │
│ └─────────────────┘ │
│                     │
│ ✓ 배포 채널    [수정]│
│ ────────────────────│
│ • 우리동네TV (예상 5만명)│
│ • 링고비즈 (예상 3만명)  │
│ • SNS (네이버, 카카오)  │
│                     │
│ ✓ 예상 성과          │
│ ────────────────────│
│ • 총 참여자: 150명   │
│ • 총 비용: 30만원    │
│ • 투자대비수익률: 450%│
│                     │
│ ⚠️ 주의사항           │
│ 배포 후에는 이벤트 제목,│
│ 경품, 기간을 변경할 수 │
│ 없습니다.           │
│                     │
│ ┌─────────────────┐ │
│ │  승인 및 배포   │ │
│ └─────────────────┘ │
├─────────────────────┤
│ 홈  이벤트 분석 프로필│ ← Nav Bottom 추가
└─────────────────────┘

인터랙션

수정 버튼: 각 섹션별 이전 단계 화면 이동
승인 확인: "이벤트를 승인하고 배포하시겠습니까?" 다이얼로그
승인 완료:
- 로딩 인디케이터 (배포 중...)
- 성공 토스트: "이벤트가 성공적으로 배포되었습니다"
- 대시보드 화면 이동 + 새 이벤트 카드 추가

반응형 처리

Mobile: 전체 화면, 세로 스크롤
Tablet/Desktop: 중앙 카드 (최대 너비 800px), 좌우 여백

5.4 참여자 관리

15-이벤트참여

개요

목적: 고객이 이벤트에 참여하는 화면 (모바일 최적화 최우선)
관련 유저스토리: UFR-PART-010
비즈니스 중요도: M/13 (필수, 중간 복잡도)

주요 기능

이벤트 정보 표시 (제목, 경품, 기간)
SNS 이미지 표시
참여 폼 (이름, 전화번호)
개인정보 동의 체크박스
참여 완료 애니메이션

UI 구성요소

Mobile (320-767px)

┌─────────────────────┐
│                     │
│ ┌─────────────────┐ │
│ │                 │ │
│ │  [이벤트 이미지] │ │
│ │                 │ │
│ └─────────────────┘ │
│                     │
│ 🎉 신규고객 유치 이벤트│
│                     │
│ 경품: ☕ 커피 쿠폰    │
│ 기간: 2025-11-01 ~  │
│       2025-11-15    │
│                     │
│ ────────────────────│
│                     │
│ 참여하기            │
│                     │
│ ┌─────────────────┐ │
│ │ 이름 *          │ │
│ └─────────────────┘ │
│ ┌─────────────────┐ │
│ │ 전화번호 *       │ │
│ │ 010-0000-0000   │ │
│ └─────────────────┘ │
│                     │
│ ☐ 개인정보 수집 및   │
│    이용에 동의합니다 │
│    [전문보기]        │
│                     │
│ ┌─────────────────┐ │
│ │   참여하기      │ │
│ └─────────────────┘ │
│                     │
│ 참여자: 128명        │
│                     │
└─────────────────────┘

참여 완료 상태

┌─────────────────────┐
│                     │
│      ┌────┐         │
│      │ ✓ │         │
│      └────┘         │
│                     │
│  참여가 완료되었습니다! │
│                     │
│  홍길동님의 행운을   │
│  기원합니다!        │
│                     │
│  ────────────────── │
│                     │
│  당첨자 발표        │
│  2025-11-16 (월)    │
│                     │
│  ┌─────────────────┐│
│  │   확인          ││
│  └─────────────────┘│
│                     │
└─────────────────────┘

인터랙션

폼 검증:
- 이름: 2자 이상
- 전화번호: 010-0000-0000 형식 자동 포맷
- 개인정보 동의: 필수 체크
전문보기: Bottom Sheet로 개인정보 처리방침 표시
참여하기:
- 중복 참여 체크
- 로딩 (1초)
- 애니메이션 (체크 아이콘 + 축하 메시지)
확인: 참여 완료 화면 닫기

반응형 처리

Mobile: 전체 화면 (최적화)
Tablet: 중앙 카드 (최대 너비 480px)
Desktop: 중앙 카드 (최대 너비 600px)

접근성

이미지 alt 텍스트: "신규고객 유치 이벤트 포스터"
참여 버튼: aria-label="이벤트에 참여하기"
개인정보 동의: 필수 체크 aria-required="true"

5.5 성과 분석

17-실시간대시보드

개요

목적: 이벤트 성과 실시간 측정 및 분석
관련 유저스토리: UFR-ANAL-010
비즈니스 중요도: M/34 (필수, 최고 복잡도)

주요 기능

요약 카드 4개 (참여자, 비용, 수익, 투자대비수익률)
채널별 성과 분석 (파이 차트)
시간대별 참여 추이 (라인 차트)
투자대비수익률 상세 분석 (테이블)
참여자 프로필 분석 (막대 차트)
실시간 업데이트 (5분 간격)

UI 구성요소

Mobile (320-767px)

┌─────────────────────┐
│ ☰  실시간 대시보드 👤│ ← Header 추가
├─────────────────────┤
│                     │
│ 📊 요약 (실시간)     │
│ ┌────────┐┌────────┐│
│ │참여자수 ││총 비용 ││
│ │  128명 ││ 30만원 ││
│ └────────┘└────────┘│
│ ┌────────┐┌────────┐│
│ │예상수익 ││투자대비││
│ │ 135만원││수익률  ││
│ │        ││  450% ││
│ └────────┘└────────┘│
│                     │
│ 📺 채널별 성과       │
│ ┌─────────────────┐ │
│ │  [파이 차트]     │ │
│ │ 우리동네TV: 45%  │ │
│ │ 링고비즈: 30%    │ │
│ │ SNS: 25%        │ │
│ └─────────────────┘ │
│                     │
│ 📈 시간대별 참여 추이 │
│ ┌─────────────────┐ │
│ │  [라인 차트]     │ │
│ │ 피크: 오후 2-4시 │ │
│ └─────────────────┘ │
│                     │
│ 💰 투자대비수익률 상세│
│ ┌─────────────────┐ │
│ │총 비용: 30만원   │ │
│ │• 경품: 25만원    │ │
│ │• 채널: 5만원     │ │
│ │                 │ │
│ │예상 수익: 135만원│ │
│ │• 매출 증가: 100만│ │
│ │• 신규 LTV: 35만  │ │
│ │                 │ │
│ │투자대비수익률:    │ │
│ │(135-30)/30×100  │ │
│ │= 450%           │ │
│ └─────────────────┘ │
│                     │
│ 👥 참여자 프로필     │
│ ┌─────────────────┐ │
│ │[막대 차트]       │ │
│ │연령: 20대 35%   │ │
│ │     30대 40%    │ │
│ │     40대 25%    │ │
│ │성별: 여 60%     │ │
│ │     남 40%      │ │
│ └─────────────────┘ │
│                     │
├─────────────────────┤
│ 홈  이벤트 분석 프로필│ ← Nav Bottom 추가
└─────────────────────┘

Desktop (1024px+)

┌─────────────────────────────────────┐
│ ← 실시간 대시보드                    │
├─────────────────────────────────────┤
│ 📊 요약 (실시간 업데이트)            │
│ ┌─────┐┌─────┐┌─────┐┌─────┐       │
│ │참여자││비용 ││수익 ││투자대││      │
│ │128명││30만 ││135만││비수익││      │
│ │     ││     ││     ││률450%││     │
│ └─────┘└─────┘└─────┘└─────┘       │
│                                     │
│ ┌──────────────────┐┌──────────────┐│
│ │📺 채널별 성과     ││📈 시간대별 추이││
│ │                  ││              ││
│ │ [파이 차트]       ││ [라인 차트]   ││
│ │                  ││              ││
│ │ • 우리동네TV 45% ││ 피크: 오후2-4 ││
│ │ • 링고비즈 30%   ││              ││
│ │ • SNS 25%        ││              ││
│ └──────────────────┘└──────────────┘│
│                                     │
│ ┌──────────────────┐┌──────────────┐│
│ │💰 투자대비수익률  ││👥 참여자 프로필││
│ │                  ││              ││
│ │ [상세 테이블]     ││ [차트]        ││
│ │                  ││              ││
│ └──────────────────┘└──────────────┘│
│                                     │
└─────────────────────────────────────┘

인터랙션

실시간 업데이트:
- 5분 간격 자동 폴링
- 변경 사항 하이라이트 (숫자 카운터 애니메이션)
차트 인터랙션:
- 파이 차트: 호버/클릭 시 상세 정보 툴팁
- 라인 차트: 호버 시 시간대별 정확한 수치 표시
새로고침: Pull to Refresh (모바일)
상세보기: 각 섹션 클릭 시 확장/축소

반응형 처리

Mobile: 세로 스크롤, 카드 1열, 단순한 차트 (막대/파이)
Tablet: 카드 2열, 차트 확장
Desktop: 카드 4열, 복잡한 차트 (라인/영역), 2열 레이아웃

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

6.1 네비게이션 구조

┌─────────────────────┐
│                     │
│   [화면 콘텐츠]      │
│                     │
├─────────────────────┤
│[홈][이벤트][분석][프로필]│
└─────────────────────┘

메뉴 항목:

홈: 대시보드 (05-대시보드)
이벤트: 이벤트 목록 (06-이벤트목록)
분석: 실시간 대시보드 (17-실시간대시보드)
프로필: 프로필 편집 (03-프로필편집)

┌─────────────────────────────────────┐
│ [로고]                       [프로필] │
├──────┬──────────────────────────────┤
│ 메뉴  │ [화면 콘텐츠]                 │
│      │                              │
│• 홈   │                              │
│• 이벤트│                              │
│• 분석 │                              │
│• 프로필│                              │
│      │                              │
└──────┴──────────────────────────────┘

6.2 화면 전환 애니메이션

Forward Navigation (다음 단계):

Slide Left (왼쪽으로 슬라이드)
Duration: 300ms
Easing: ease-out

Backward Navigation (이전 단계):

Slide Right (오른쪽으로 슬라이드)
Duration: 300ms
Easing: ease-out

Tab Navigation (탭 전환):

Fade In/Out
Duration: 200ms
Easing: ease-in-out

Modal/Dialog:

Fade In + Scale Up (등장)
Fade Out + Scale Down (퇴장)
Duration: 250ms
Easing: cubic-bezier(0.4, 0, 0.2, 1)

6.3 Floating Action Button (FAB)

위치: 우측 하단 기능: "새 이벤트 만들기" 동작: 07-이벤트목적선택 화면 이동

         ┌─────┐
         │  +  │
         └─────┘

7. 반응형 설계 전략

7.1 브레이크포인트

/* Mobile First Breakpoints */

/* Mobile: 320px ~ 767px (기본 스타일) */
@media (min-width: 768px) {
  /* Tablet: 768px ~ 1023px */
}

@media (min-width: 1024px) {
  /* Desktop: 1024px ~ 1439px */
}

@media (min-width: 1440px) {
  /* Large Desktop: 1440px ~ */
  /* 최대 너비 1280px, 중앙 정렬 */
}

7.2 레이아웃 전략

Grid System

Mobile:

1열 레이아웃
좌우 여백: 16px
요소 간 간격: 16px

Tablet:

2열 레이아웃 (50:50 또는 30:70)
좌우 여백: 24px
요소 간 간격: 24px

Desktop:

3열 레이아웃 (33:33:33 또는 20:60:20)
좌우 여백: 32px
요소 간 간격: 32px
최대 너비: 1280px (중앙 정렬)

7.3 타이포그래피

/* Mobile */
h1: 24px / 1.2 / bold
h2: 20px / 1.3 / bold
h3: 18px / 1.4 / semibold
body: 14px / 1.5 / regular
small: 12px / 1.5 / regular

/* Desktop */
h1: 32px / 1.2 / bold
h2: 28px / 1.3 / bold
h3: 24px / 1.4 / semibold
body: 16px / 1.5 / regular
small: 14px / 1.5 / regular

7.4 터치 영역

Mobile:

최소 터치 영역: 44x44px (애플 권장)
버튼 높이: 48px
입력 필드 높이: 48px

Desktop:

최소 클릭 영역: 32x32px
버튼 높이: 40px
입력 필드 높이: 40px

8. 접근성 보장 방안

8.1 WCAG 2.1 AA 준수

색상 대비:

일반 텍스트: 4.5:1
큰 텍스트 (18px 이상): 3:1
UI 컴포넌트: 3:1

키보드 네비게이션:

모든 기능 Tab 키로 접근 가능
Focus Indicator 명확히 표시 (2px 파란색 테두리)
Escape 키로 모달/다이얼로그 닫기

스크린 리더:

모든 이미지 alt 텍스트 제공
폼 Label과 Input 연결 (for/id)
ARIA 속성 활용:
- aria-label
- aria-describedby
- aria-live (동적 콘텐츠)
- aria-required (필수 입력)

8.2 접근성 체크리스트

이미지:

모든 이미지 alt 속성 제공
장식용 이미지 alt="" 처리

폼:

Label과 Input 연결
필수 필드 표시 (*, aria-required)
오류 메시지 스크린 리더 읽기

네비게이션:

키보드만으로 모든 기능 접근 가능
Focus 순서 논리적
Skip Navigation 링크 제공

콘텐츠:

제목 계층 구조 (h1 > h2 > h3)
색상만으로 정보 전달하지 않음
충분한 색상 대비

9. 성능 최적화 방안

9.1 이미지 최적화

Lazy Loading:

<img src="image.webp" loading="lazy" alt="이벤트 포스터">

Responsive Images:

<img
  src="image-800.webp"
  srcset="image-400.webp 400w,
          image-800.webp 800w,
          image-1200.webp 1200w"
  sizes="(max-width: 768px) 100vw, 50vw"
  alt="이벤트 포스터"
>

WebP 포맷:

압축률 30% 향상
Fallback: JPEG/PNG

이미지 CDN:

Cloudflare/AWS CloudFront
자동 리사이즈 및 포맷 변환

9.2 코드 최적화

Code Splitting:

// 페이지별 번들 분리
const Dashboard = lazy(() => import('./Dashboard'));
const EventCreate = lazy(() => import('./EventCreate'));

Tree Shaking:

불필요한 코드 제거
ES6 Module 사용

Minification:

JS/CSS 압축
Gzip/Brotli 압축

9.3 로딩 전략

Skeleton Screen:

┌─────────────────────┐
│ ┌─────────────────┐ │
│ │░░░░░░░░░░░░░░░░ │ │ ← Skeleton Card
│ │░░░░░░░░░░░░░░░░ │ │
│ └─────────────────┘ │
│ ┌─────────────────┐ │
│ │░░░░░░░░░░░░░░░░ │ │
│ └─────────────────┘ │
└─────────────────────┘

Critical CSS:

Above the Fold CSS 인라인 삽입
나머지 CSS 비동기 로드

Defer/Async Script:

<script src="analytics.js" defer></script>
<script src="chat.js" async></script>

9.4 데이터 최적화

Pagination:

목록은 20개씩 페이징
Infinite Scroll (모바일)

Debouncing:

// 검색 입력 시 500ms 대기 후 API 호출
const debouncedSearch = debounce(search, 500);

LocalStorage:

임시 저장 (이벤트 생성 진행 상태)
오프라인 대응

9.5 성능 목표

Core Web Vitals:

LCP (Largest Contentful Paint): < 2.5s
FID (First Input Delay): < 100ms
CLS (Cumulative Layout Shift): < 0.1

추가 지표:

First Contentful Paint: < 1.5s
Time to Interactive: < 3s
Lighthouse Score: > 90
이미지 로딩: < 1s (per image)
API 응답: < 500ms (평균)

10. 변경 이력

버전	날짜	변경 내용	작성자
1.0	2025-10-21	최초 작성	UI/UX Designer

부록

A. 디자인 시스템 (추후 작성 예정)

컬러 팔레트
타이포그래피 시스템
스페이싱 시스템
아이콘 라이브러리
컴포넌트 라이브러리

B. 프로토타입 링크 (추후 추가 예정)

Figma 프로토타입 링크
HTML 프로토타입 링크

C. 사용성 테스트 결과 (추후 추가 예정)

테스트 참가자 정보
주요 발견 사항
개선 권장 사항

문서 끝

56 KiB Raw Blame History Unescape Escape

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

문서 정보

목차

1. 프로젝트 개요

1.1 서비스 목적

1.2 핵심 가치 제안

1.3 타겟 사용자

1.4 마이크로서비스 구성

2. 설계 원칙

2.1 Mobile First 디자인 철학

우선순위 중심 설계 (Priority-Driven Design)

점진적 향상 (Progressive Enhancement)

성능 최적화 (Performance Optimization)

2.2 유저스토리 기반 설계

2.3 사용성 원칙

3. 프로토타입 화면 목록

총 17개 화면

4. 화면 간 사용자 플로우

5. 화면별 상세 설계

5.1 인증 및 사용자 관리

01-로그인

02-회원가입

03-프로필편집

04-로그아웃확인

5.2 메인 및 대시보드

05-대시보드

5.3 이벤트 생성 플로우

08-AI이벤트추천

09-SNS이미지생성

12-최종승인

5.4 참여자 관리

15-이벤트참여

5.5 성과 분석

17-실시간대시보드

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

6.1 네비게이션 구조

Mobile (Bottom Navigation)

Desktop (Side Navigation)

6.2 화면 전환 애니메이션

6.3 Floating Action Button (FAB)

7. 반응형 설계 전략

7.1 브레이크포인트

7.2 레이아웃 전략

Grid System

7.3 타이포그래피

7.4 터치 영역

8. 접근성 보장 방안

8.1 WCAG 2.1 AA 준수

8.2 접근성 체크리스트

9. 성능 최적화 방안

9.1 이미지 최적화

9.2 코드 최적화

9.3 로딩 전략

9.4 데이터 최적화

9.5 성능 목표

10. 변경 이력

부록

A. 디자인 시스템 (추후 작성 예정)

B. 프로토타입 링크 (추후 추가 예정)

C. 사용성 테스트 결과 (추후 추가 예정)

56 KiB

Raw Blame History