1ef2235939
- SessionStart hook (scripts/graphify_setup.py): auto-install graphifyy[sql], build knowledge graph on first run (graphify extract --code-only, local AST), incremental graphify update thereafter — install-only smartness - knowledge/kintex/: all 183 KINTEX md docs bundled (planning/design/analysis) - knowledge/guardia/: distilled GUARDiA-wide knowledge from 2,483 md files (solutions-catalog, standard-framework, operations-cicd, lessons-learned; credentials/IP-free curated) - SKILL.md: graph-first codebase query rules + knowledge base loading guide Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
1925 lines
290 KiB
Markdown
1925 lines
290 KiB
Markdown
# 킨텍스 AI 전시관리 시스템 — UI 디자인 스펙 (design.md)
|
||
|
||
> 작성: 디자인 에이전트(designer) · 작성일: 2026-07-12 · 버전: **v2.4**
|
||
> 근거 문서: `docs/PLANNING.md` **v3.0**(모듈 맵 M1~M18 + §5B 공통/시스템관리 레이어 + §1A 멀티테넌시, 6+2 역할, 나노바나나 표준 샷 세트 S1~S7) · `docs/FEATURE_BACKLOG_100.md`(100대 기능 F001~F100·NFR 4축) · Stitch 산출물 `stitch_kintex_ai_system_architect/`(18화면 + DESIGN.md 3변형) 학습·정합
|
||
> **단일 출처(Single Source of Truth)**: 프론트 구현 토큰·컴포넌트 계약은 본 문서가 권위다. Stitch 화면(code.html/screen.png)은 시각 참조로만 사용하며, 상충 시 본 문서를 따른다.
|
||
> 용도: **각 화면의 "Stitch 프롬프트" 코드블록을 Google Stitch(stitch.withgoogle.com)에 그대로 붙여넣어 화면을 생성**한다. 문서는 한국어, Stitch 프롬프트만 영어.
|
||
>
|
||
> **v2.0 범위 확장**: v1.3까지는 P0 코어 + SCR-13~17 중심 19화면이었다. v2.0은 **PLANNING v3.0의 전 모듈(M1~M18)·공통레이어(§5B)·6+2 역할(전시업체·공사/장치업체·주최자·킨텍스 직원(운영·관리)·시스템 관리자(테넌트/플랫폼)·일반 대중 공개사이트) × 웹(MDI)·모바일**을 빠짐없이 커버하는 **전 화면 인벤토리**로 확장한다. 기존 SCR-01~17·SCR-M1/M2 번호·토큰은 **재번호화 없이 유지**하고, 신규 화면만 이어서 부여한다 — 업무 웹 `SCR-18+`, 관리자 백오피스 `SCR-A*`, 공개사이트 `SCR-P*`, 모바일 `SCR-M3+`. 전 화면 요약 매트릭스는 **§2.8**, 화면 상세는 §3(코어·도메인 웹)·§3A(관리자)·§3B(공개사이트)·§4(모바일)에 정의한다.
|
||
|
||
---
|
||
|
||
## 1. 디자인 시스템
|
||
|
||
### 1-1. 브랜드 톤
|
||
|
||
- **킨텍스 CI 기반 블루 계열, 신뢰감 있는 B2B 실무 톤.** 화려함보다 밀도·정확성·진행 상태 가시성이 우선.
|
||
- 이 제품의 히어로는 **시각화**다: 홀 도면 캔버스, 시공 예상 사진(나노바나나), before/after 슬라이더, 배선 오버레이를 화면에서 가장 크게 배치한다.
|
||
- AI가 생성한 것(배치안·설계 초안·예상 이미지·사전심사 플래그)은 항상 **"AI 생성/초안" 라벨**로 사람 산출물과 구분한다 (PLANNING.md R1·R2 리스크 대응).
|
||
|
||
### 1-2. 컬러 팔레트
|
||
|
||
| 토큰 | Hex | 용도 |
|
||
|---|---|---|
|
||
| `primary-700` | `#004C86` | 헤더, 강조 텍스트, hover |
|
||
| `primary-600` | `#0066B3` | **주 브랜드 블루(킨텍스 CI)** — 주요 버튼, 활성 탭, 링크 |
|
||
| `primary-100` | `#D9EAF7` | 선택 배경, 활성 사이드바 항목 |
|
||
| `primary-050` | `#EFF6FC` | 페이지 서브 배경, 테이블 호버 |
|
||
| `ai-accent` | `#6D4AFF` | **AI 액션 전용** — "AI 자동배치", "예상 사진 생성" 버튼, AI 라벨 |
|
||
| `success` | `#0E8A5F` | 승인 완료, 규정 통과, 결제 완료 |
|
||
| `warning` | `#B45309` | 마감 임박(D-3 이내), 확인 필요 플래그 |
|
||
| `error` | `#D92D20` | 규정 위반, 반려, 마감 초과 |
|
||
| `neutral-900` | `#101828` | 본문 제목 |
|
||
| `neutral-700` | `#344054` | 본문 텍스트 |
|
||
| `neutral-500` | `#667085` | 보조 텍스트, 플레이스홀더 |
|
||
| `neutral-200` | `#E4E7EC` | 구분선, 카드 테두리 |
|
||
| `neutral-050` | `#F9FAFB` | 앱 배경 |
|
||
| `canvas-bg` | `#1C2536` | **에디터 캔버스 전용 다크 서피스** (배치 에디터·배선 뷰의 도면 영역) |
|
||
| 배선-전기 | `#EF4444` | S6 오버레이: 전기 경로 (적) |
|
||
| 배선-네트워크 | `#3B82F6` | S6 오버레이: 네트워크/전화 경로 (청) |
|
||
| 배선-급배수 | `#22C55E` | S6 오버레이: 급배수·압축공기 경로 (녹) |
|
||
|
||
명도 대비는 WCAG AA 이상: 본문 텍스트는 `neutral-700` 이상, 컬러 배경 위 텍스트는 흰색(`#FFFFFF`) 고정. `warning`·`error`는 텍스트 사용 시 위 표의 진한 값만 사용.
|
||
|
||
> **Stitch 실증 정합(v1.1)**: Stitch가 생성한 3개 디자인 변형 중 **Precision Enterprise AI** 변형이 위 토큰을 그대로 검증했다 — `primary-container #0066B3`(우리 `primary-600`), 캔버스 `#1C2536`, AI 액센트 `#6D4AFF`, `error #D92D20`, 배경 `#F9FAFB`, 본문 `#101828`, 카드 테두리 `#E4E7EC`가 실제 code.html(`booth_layout_editor` 등 시공 화면 전체)에 반영됨. StatusBadge 진행(회색→파랑→**보라(AI)**→녹색→빨강)도 동일. 나머지 2개 변형(Intelligence·Nexus)은 더 짙은 헤리티지 블루 `#0059A6`/`#00427D`를 primary로 채택했는데, 이는 우리 `primary-700 #004C86`보다 약간 짙다. **결론: 우리 `docs/design.md`가 프론트 구현의 단일 출처이며 `#0066B3`를 주 브랜드 블루로 유지한다.** `#0059A6`·`#00427D`는 헤더/hover의 짙은 대체 톤으로만 허용(신규 토큰 추가 금지). Intelligence 변형의 `ai-surface #F5F3FF`(옅은 보라 배경)는 AI 구동 섹션 배경으로 채택 가능 — 우리 `primary-050`과 별개로 AI 카드 배경에 한해 사용.
|
||
|
||
### 1-3. 타이포그래피 (한국어)
|
||
|
||
- 서체: **Pretendard** (fallback: Noto Sans KR, system-ui). 숫자·좌표·견적 금액은 tabular numerals.
|
||
- 스케일: Display 28/36 Bold(대시보드 KPI) · H1 24/32 Bold · H2 20/28 SemiBold · H3 16/24 SemiBold · Body 14/22 Regular · Caption 12/18 Regular · Mono 13(좌표·치수·스키마 값, JetBrains Mono).
|
||
- B2B 밀도: 기본 Body 14px, 테이블 행 높이 44px(모바일 터치 타깃 48px).
|
||
|
||
> **Stitch 실증 정합(v1.1)**: 제품 UI 텍스트는 한국어이므로 **Pretendard가 권위 서체(단일 출처)**로 유지된다. Stitch는 라틴 문자 대체로 **Hanken Grotesk**(Intelligence·Nexus 변형) / **Inter**(Precision 변형)를 선택하고 Pretendard를 한글 fallback으로 지정했다 — 실제 렌더 화면과의 라틴·숫자 자형 일관성을 원할 경우 Pretendard 로드 실패 시 **Inter를 라틴/tabular-numeral 보조 서체**로 허용(별도 브랜드 결정 없이는 Pretendard 우선). 모노 서체는 우리 JetBrains Mono를 유지(Stitch 변형별 Geist/Courier Prime은 채택하지 않음). Stitch가 base body 14px·Bold 600/700 강조·label 12px 트래킹을 확정한 점은 우리 스케일과 일치한다. 단 Stitch 데이터 리스트 행 높이는 40px였으나, 우리는 접근성·터치 타깃 위해 **44px(웹)/48px(모바일)를 권위값**으로 유지한다.
|
||
|
||
### 1-4. 컴포넌트 원칙
|
||
|
||
- **상태 배지(StatusBadge)**: 신청 흐름 `작성중(회색)→제출됨(파랑)→AI검토(보라)→승인(녹색)→반려(빨강)→시공중→검수완료`. 모든 목록·카드에 동일 배지 사용.
|
||
- **D-데이 칩(DdayChip)**: `D-25`, `D-7` 등 마감 역산 칩. D-3 이내 `warning`, 초과 `error`.
|
||
- **AI 라벨**: 보라(`ai-accent`) 외곽선 칩 "AI 초안", "AI 생성 이미지". 생성 이미지는 카드 하단에 고지문 "AI 생성 예상 이미지 — 실제 시공 결과와 다를 수 있음"을 항상 노출(제거 불가).
|
||
- **위반 플래그(ViolationFlag)**: 심각도 2단계 — 차단(빨강, 제출 불가)·경고(주황, 확인 후 진행). 도면 위에는 같은 색 하이라이트 + 번호 핀으로 목록과 1:1 연결.
|
||
- **캔버스 화면 공통**: 좌측 도구 패널(240px) + 중앙 캔버스 + 우측 속성/견적 패널(320~360px) 3열. 캔버스 하단에 줌 컨트롤·축척·좌표 표시.
|
||
- 로딩: 이미지 생성은 비동기(RenderJob 큐) — 스켈레톤 + 진행 배지("생성 중… 평균 40초"), 완료 시 WebSocket 푸시로 교체. 실패 시 카드 내 재시도 버튼.
|
||
|
||
**라운드·엘리베이션·그리드 토큰 (Stitch 3변형 만장일치 — v1.1 신설, 이전 스펙에 누락됐던 항목)**
|
||
|
||
- **라운드(radius)**: 버튼·인풋·작은 요소 `4px(0.25rem)` · 카드·모달·섹션 블록 `8px(0.5rem)` · 상태/AI 칩은 pill(`9999px`). 산업·건축 톤 유지 위해 **8px를 최대 라운드로 제한**(그 이상 금지).
|
||
- **엘리베이션**: 무거운 그림자 대신 **톤 레이어 + 1px 테두리**(`neutral-200 #E4E7EC`). Level 0 배경 → Level 1 카드(흰색+1px 테두리, 그림자 없음) → Level 2 모달·드롭다운(소프트 앰비언트 그림자 Y4 Blur12 10% + backdrop-blur 8px). **AI 구동 카드는 좌측 4px 보라(`ai-accent`) 테두리 액센트**로 사람 산출물과 구분(상태 카드는 좌측 4px 상태색 액센트).
|
||
- **그리드·간격**: 12컬럼 · 컨테이너 최대 `1440px` · 4px 베이스 · 거터 24px · 데스크톱 페이지 마진 48px(태블릿 32px, 모바일 16px). 속성/견적 패널 등 고밀도 영역 패딩은 8~12px로 타이트하게.
|
||
- **데이터 테이블**: 긴 목록은 지브라 스트라이프(홀수행 `neutral-050 #F9FAFB`), 헤더는 sticky + `label` 타이포 + 옅은 회색 배경, 행 hover `#F1F5F9`. 복잡 테이블은 컬럼 숨김보다 가로 스크롤 우선.
|
||
|
||
### 1-5. 반응형 기준·다크모드
|
||
|
||
- **웹 1440px**(설계·에디터·대시보드 기준 해상도) / **모바일 390px**(조회·승인·현장 시나리오). 태블릿은 웹 레이아웃 축소 대응.
|
||
- 배치 에디터·배선 뷰 등 캔버스 편집은 **데스크톱 전용**, 모바일에서는 읽기 전용 뷰어 + 승인 액션만 제공.
|
||
- **다크모드: Phase 1 미지원 (라이트 모드 단일).** 단, 에디터의 도면 캔버스 영역만 다크 서피스(`canvas-bg`)를 사용해 부스 폴리곤·배선·위반 하이라이트의 대비를 확보한다. 전면 다크모드는 Phase 3 검토.
|
||
|
||
---
|
||
|
||
## 2. 정보 구조 (IA)
|
||
|
||
행사(Event) 단위 워크스페이스. 로그인 → 행사 선택 → 역할별 홈. (권한: 주최자=owner, 참가업체=부스 단위 멤버, 장치업체=참가업체 초대(등록업체만), 홀매니저=킨텍스 내부 계정 전체 열람+승인)
|
||
|
||
### 2-1. 역할별 사이트맵
|
||
|
||
```
|
||
공통
|
||
└─ 로그인 (SCR-01) → 메인 홈 (SCR-HOME) — 요약 KPI·행사배너·전시일정 캘린더·공지·내 행사 워크스페이스(선택)
|
||
|
||
주최자 (Organizer)
|
||
├─ 대시보드 — D-데이 마일스톤 타임라인 (SCR-02)
|
||
├─ 플로어플랜 스튜디오 [M2]
|
||
│ ├─ 부스 배치 에디터 (SCR-03)
|
||
│ └─ 배치안 비교 (S7 조감) (SCR-04)
|
||
├─ 참가업체 관리 (초대 링크·신청 현황) — SCR-02 내 탭
|
||
├─ 서류·마일스톤 [M6, P1] — Phase 2
|
||
└─ 홀 배정·견적 [M1, P1] — Phase 2
|
||
|
||
참가업체 (Exhibitor)
|
||
├─ 내 부스 홈 — 진행 상태·마감 리마인더 (SCR-05)
|
||
├─ 부스 설계 스튜디오 [M3] (SCR-06)
|
||
├─ 유틸리티 신청 [M4]
|
||
│ ├─ 배선 뷰 (전기/네트워크/급배수) (SCR-07)
|
||
│ └─ 신청 요약·위치표시도 (SCR-08)
|
||
└─ 시각화 갤러리 [M5] (SCR-12)
|
||
|
||
장치·시공업체 (Contractor)
|
||
├─ 수주 부스 목록 → 부스 설계 스튜디오 (SCR-06 공유)
|
||
├─ 규정 검증 리포트 — 제출 전 자동 플래깅 (SCR-09)
|
||
└─ 현장 체크리스트 (모바일, SCR-M1)
|
||
|
||
홀매니저 (Hall Manager, 킨텍스 내부)
|
||
├─ 승인 큐 — AI 사전심사 플래그 (SCR-10)
|
||
├─ 검수 상세 (도면+위반 오버레이) (SCR-11)
|
||
├─ 홀 유틸리티 부하 집계 — SCR-10 내 위젯
|
||
└─ 현장 검수 (모바일, SCR-M2)
|
||
```
|
||
|
||
### 2-2. 내비게이션 (MDI 셸 기준 — v1.2)
|
||
|
||
- **웹(업무 포털)**: **MDI(다중 문서 인터페이스) 셸**을 표준 AppShell로 채택한다. 좌측 고정 사이드바(240px) + **상단 문서 탭바** + 중앙 활성 문서 영역의 3영역 구조다.
|
||
- 좌측 사이드바(240px): 상단 행사 전환 드롭다운(행사명+기간+홀), 역할별 메뉴, 하단 사용자 메뉴. **메뉴 클릭은 라우트 이동이 아니라 "문서 탭 열기/활성 전환"**이다.
|
||
- 상단: 탭바 위에 얇은 유틸리티 바 — 브레드크럼(활성 탭 경로) + 알림 벨(마감·승인 이벤트) + "D-31" 행사 카운트다운 칩 상시 노출.
|
||
- **단일 라우트 SPA → 탭 호스트로 전환**: 기존 "한 번에 한 화면" 라우팅을 폐기하고, 여러 문서(대시보드·배치 에디터·설계 스튜디오·배선 뷰·갤러리·승인 큐·검수 상세 등)를 탭으로 동시에 열어 상태를 보존한 채 전환한다. 상세 표준은 **§2.7 MDI 셸**을 따른다.
|
||
- **웹(공개/관람객 사이트)**: **MDI 비적용.** 공개 홍보 사이트(`www/expo.`)·관람객 사전등록은 SEO·딥링크·공유가 목적이므로 전통적 페이지 내비(헤더 GNB + 단일 라우트)를 유지한다.
|
||
- **웹 인증 셸 하단 상태바/푸터(ShellFooter — v2.1.2 신설)**: 업무 포털 AppShell(§2.7)은 상단 유틸리티 바(top)·좌측 사이드바(left)에 더해 **전 셸 화면 공통의 얇은 하단 상태바(약 36px)**를 항상 노출한다. 사이드바 우측 전폭, DocumentHost 아래 고정(sticky bottom), 상단 1px 테두리 `neutral-200 #E4E7EC`, 배경 `neutral-050 #F9FAFB`(다크 토큰 대응 — 하드코딩 금지, CSS 변수 주입).
|
||
- **좌측**: 저작권 "© 2026 KINTEX. All rights reserved." (`neutral-500 #667085`, Caption 12px).
|
||
- **우측(또는 중앙-우 정렬)**: ① **시스템 상태 점** — 정상 `success #0E8A5F` 채운 점 + "시스템 정상", 점검 `warning #B45309` + "점검 중"(상태는 헬스 API 파생, 미연동 시 기본 "정상") ② **앱 버전** 칩 "v2.1.2"(tabular numerals·mono) ③ **고객지원 링크** "고객지원"(→ 지원 채널/문의, `primary-600 #0066B3`).
|
||
- **접근성**: 상태 점은 색 외 텍스트 라벨 병기(색만으로 상태 전달 금지), `role="contentinfo"`, 링크 포커스 링 `primary-600` 2px, 명도 대비 WCAG AA. i18n 키 `shell.footer.*`.
|
||
- **모바일**: 셸 푸터 미적용(하단 탭 바가 그 자리를 차지) — 버전·상태·지원은 "더보기"(SCR-M3 계열)로 이관.
|
||
- **모바일**: 하단 탭 바 4개 — 홈 / 내 부스(또는 승인 큐) / 알림 / 더보기. 화면 전환은 네이티브 스택 내비(모바일은 MDI 미적용 — 단일 화면 포커스). 캔버스 화면은 뷰어 모드.
|
||
|
||
---
|
||
|
||
## 2.5 Stitch 산출물 ↔ SCR 매핑 (구현 이식 기준)
|
||
|
||
`stitch_kintex_ai_system_architect/`의 18개 Stitch 생성 화면 중 **우리 P0/P1 범위(부스 시공 중심)에 해당하는 14개**를 아래 SCR과 1:1로 매핑한다. **kintex-frontend-dev는 이식 시 이 표를 권위로 따른다** — Stitch 화면의 시각 언어(Precision Enterprise AI 팔레트 `#0066B3`/`#1C2536`/`#6D4AFF`)를 참조하되, 상충 시 본 `docs/design.md`가 단일 출처다.
|
||
|
||
| Stitch 화면 디렉터리 | SCR ID | 화면명 | 대상 역할 | 플랫폼 |
|
||
|---|---|---|---|---|
|
||
| `login_workspace_selection_kintex_ai_system` | SCR-01 | 로그인 & 행사 워크스페이스 선택 | 공통 | 웹 |
|
||
| `organizer_dashboard_kintex_ai_system` | SCR-02 | 주최자 대시보드 | 주최자 | 웹 |
|
||
| `booth_layout_editor_kintex_ai_system` | SCR-03 | 부스 배치 에디터 | 주최자 | 웹 |
|
||
| `layout_comparison_kintex_ai_system` | SCR-04 | 배치안 비교(S7 조감) | 주최자 | 웹 |
|
||
| `exhibitor_home_kintex_ai_system` | SCR-05 | 참가업체 부스 홈 | 참가업체 | 웹 |
|
||
| `booth_design_studio_kintex_ai_system` | SCR-06 | 부스 설계 스튜디오 | 참가·장치업체 | 웹 |
|
||
| `utility_wiring_view_kintex_ai_system` | SCR-07 | 유틸리티 배선 뷰 | 참가·장치업체 | 웹 |
|
||
| `utility_order_summary_kintex_ai_system` | SCR-08 | 유틸리티 신청 요약·위치표시도 | 참가업체 | 웹 |
|
||
| `compliance_report_kintex_ai_system` | SCR-09 | 규정 검증 리포트 | 장치업체 | 웹 |
|
||
| `manager_approval_queue_kintex_ai_system` | SCR-10 | 홀매니저 승인 큐 | 홀매니저 | 웹 |
|
||
| `review_details_kintex_ai_system` | SCR-11 | 홀매니저 검수 상세 | 홀매니저 | 웹 |
|
||
| `visualization_gallery_kintex_ai_system` | SCR-12 | 시각화 갤러리 | 전 역할 | 웹 |
|
||
| `contractor_on_site_checklist_kintex_ai_system` | SCR-M1 | 시공업체 현장 체크리스트 | 장치업체 현장 | 모바일 |
|
||
| `manager_field_inspection_kintex_ai_system` | SCR-M2 | 홀매니저 현장 검수 | 홀매니저 | 모바일 |
|
||
|
||
각 SCR의 상세 레이아웃·상태·Stitch 프롬프트는 아래 §3(웹)·§4(모바일)에 정의돼 있다. Stitch 화면은 시각 참조(screen.png)로만 사용하고, 프론트 토큰·컴포넌트 계약은 본 문서를 따른다.
|
||
|
||
### 2.5-1. v2.0 확장 화면 매핑 (SCR-13~17 — 도메인·경영·시스템·스타일가이드)
|
||
|
||
PLANNING v2.0/v3.0에서 도메인 모듈(M10~M18)이 정식 편입되며, Stitch가 재취득한 아래 5개 화면을 SCR-13~17로 정합화한다. §2.6에서 "P2 후보(기획 미반영)"로 보류됐던 4개 화면 중 **M14·M16·M18은 planner가 PLANNING §5/§5A에 정식 반영**(M16 P1 승격·M18 P1·M14 P2)하여 승격 요건을 충족했고, exhibition_schedule은 방문객용이 아닌 **운영사·주최자용 행사 일정/홀 가동 관리 화면**으로 재해석되어 M1(홀 배정·행사일정)·M6(마일스톤)에 접합된다. SCR-17은 §1 디자인 시스템의 실증 스타일가이드(제품 화면 아님·내부 참조)다.
|
||
|
||
| Stitch 화면 디렉터리 | SCR ID | 화면명 | 모듈 | 우선순위 | 대상 역할 | 플랫폼 |
|
||
|---|---|---|---|---|---|---|
|
||
| `business_intelligence_kintex_ai_system` | SCR-13 | 경영분석 대시보드 | **M16** | P1 | 주최자·운영사(참가업체 ROI 관점 병행) | 웹 |
|
||
| `hall_operations_kintex_ai_system` | SCR-14 | 홀 현장운영 대시보드 | **M14** | P2 | 홀매니저·운영 | 웹 |
|
||
| `exhibition_schedule_kintex_ai_system` | SCR-15 | 전시 일정 관리 | **M1·M6** | P1 | 주최자·운영사 | 웹 |
|
||
| `admin_dashboard_kintex_ai_system` | SCR-16 | 관리자 대시보드 | **M18** | P1 | 테넌트 관리자·플랫폼 슈퍼관리자 | 웹(백오피스) |
|
||
| `component_guide_updated_kintex_ai_system` | SCR-17 | 컴포넌트 가이드(스타일가이드) | §1 디자인 시스템 | — (내부 참조) | 디자이너·프론트 개발 | 웹(내부) |
|
||
|
||
> **`component_guide_updated`가 최신본**이며 `component_guide`(구버전)은 참조하지 않는다. SCR-17은 배포 제품 라우트가 아닌 **개발/디자인 내부 참조(스토리북 성격)**로만 노출한다.
|
||
|
||
> **공통 NFR(SCR-13~17)**: ① **테마** — 라이트 모드 단일이 기본(§1-5), Recharts·게이지·히트맵 등 데이터 시각화는 §1 컬러 토큰을 CSS 변수로 주입해 향후 다크모드(Phase 3) 전환에 대비(하드코딩 hex 금지). ② **웹접근성** — 명도 대비 WCAG AA 이상, 차트는 색 외 패턴/라벨 병기, KPI·표는 `aria-label`·스크린리더 읽기 순서 준수, 키보드 포커스 링 `primary-600` 2px. ③ **다국어** — 화면 문자열은 i18n 키로 분리(M17 CMS 다국어 한/영/중/일 정책 정합), 숫자·통화·날짜는 로케일 포맷(tabular numerals) 사용. ④ **AI 산출물 구분** — 예측·매칭·이상탐지 등 AI 지표는 AiLabel(보라 `ai-accent`)로 사람 산출물과 항상 구분(§1-4).
|
||
|
||
## 2.6 범위 게이트 — P2 후보 (기획 반영 전 이식 금지)
|
||
|
||
`docs/PLANNING.md`가 **범위 권위**다(부스 신청→설계→유틸리티→규정검증→승인→시공→검수 파이프라인 중심). Stitch `kintex_ai_system_proposal.md`와 아래 4개 Stitch 화면은 PLANNING 범위 밖 비전(AI 컨시어지·CCTV 혼잡도·에너지 최적화·비즈니스 매칭·AR 내비 등)이므로 **P2 후보로만 분류**한다. **P0/P1으로 끌어오지 않으며, 승격하려면 먼저 planner에 기획 반영을 요청해야 한다(designer 임의 승격 금지).**
|
||
|
||
| Stitch 화면 디렉터리 | 성격 | PLANNING 근거 | 처리 |
|
||
|---|---|---|---|
|
||
| `business_intelligence_kintex_ai_system` | 비즈니스 매칭·성과 분석·트렌드 리포트 | 범위 밖(참가업체 매칭·바이어 분석은 부스 시공 파이프라인 아님) | P2 후보 — 기획 반영 필요 |
|
||
| `hall_operations_kintex_ai_system` | 실시간 혼잡도·에너지·주차 예측(CCTV/센서) | 범위 밖(현장 운영 IoT/CV, PLANNING 미정의) | P2 후보 — 기획 반영 필요 |
|
||
| `exhibition_schedule_kintex_ai_system` | 전시 세션/일정 편성·개인화 추천 | 범위 밖(방문객 대상 서비스) | P2 후보 — 기획 반영 필요 |
|
||
| `admin_dashboard_kintex_ai_system` | 플랫폼 전역 관리자(시스템 운영) | 범위 밖(Phase 1 역할=주최자/참가/장치/홀매니저에 미포함) | P2 후보 — 기획 반영 필요 |
|
||
|
||
> 위 4개 Stitch 화면의 시각 자산은 참고만 하고 프론트 구현에 착수하지 않는다. `kintex_ai_system_proposal.md`는 Stitch가 자동 생성한 확장 비전 문서로, 우리 PLANNING과 별개다.
|
||
|
||
> **갱신(v1.3 · 2026-07-11)**: 위 표의 3개 화면은 **planner의 정식 기획 반영으로 P2 후보 게이트를 통과**했다 — `business_intelligence`→**M16 경영분석 BI(P1 승격, PLANNING §5A M16·M16-1)**, `hall_operations`→**M14 현장운영(P2, PLANNING §5A M14)**, `admin_dashboard`→**M18 관리자 시스템(P1, PLANNING §5A M18·§5B)**. 따라서 designer 임의 승격이 아니라 기획 근거를 갖춰 각각 SCR-13·SCR-14·SCR-16으로 정합화한다(§2.5-1·§3). `exhibition_schedule`은 방문객 서비스가 아닌 **운영사·주최자용 행사일정/홀 가동 관리 화면**(M1 배정 가용성 캘린더 + M6 마일스톤)으로 재분류되어 SCR-15로 편입한다. 단, Stitch 화면이 담은 **비전성 요소(CCTV/센서 실시간 혼잡·에너지 IoT·AI 컨시어지 플로팅 봇·매칭 성과 분석 등)는 여전히 해당 모듈의 P2/후속 범위**이며, PLANNING이 명시한 초기 데이터 원천(M4/M10 파생·수기 입력) 밖의 하드웨어 연동은 착수하지 않는다(§3 각 SCR "데이터 원천" 참조).
|
||
|
||
---
|
||
|
||
## 2.7 MDI 셸 (다중 문서 인터페이스) — AppShell 표준 (v1.2 신설)
|
||
|
||
> **엔터프라이즈 전시관리 실무자는 여러 문서(부스·행사·도면·승인건)를 동시에 열어 오가며 작업한다.** 배치 에디터에서 위반을 확인하다가 승인 큐로, 다시 설계 스튜디오로 이동해도 각 화면의 미저장 편집·스크롤·폼 값이 유지돼야 한다. 따라서 업무 포털의 AppShell을 **단일 라우트 SPA → MDI 탭 호스트**로 전환한다. 이 절이 `kintex-frontend-dev`의 AppShell 전환 기준(단일 출처)이다. 모든 치수·색상은 §1 디자인 토큰을 사용한다.
|
||
|
||
### 2.7-1. 셸 레이아웃
|
||
|
||
3영역 고정 그리드(웹 1440px 기준):
|
||
|
||
```
|
||
┌────────────────────────────────────────────────────────────┐
|
||
│ [유틸리티 바] 브레드크럼(활성 탭) · 알림벨 · D-데이 칩 · 사용자 │ 높이 48px
|
||
├──────────┬─────────────────────────────────────────────────┤
|
||
│ │ [탭바] ▸ 대시보드 │ 부스 에디터 ● │ 승인 큐 │ + │ 높이 40px
|
||
│ 사이드바 ├─────────────────────────────────────────────────┤
|
||
│ 240px │ │
|
||
│ (메뉴) │ DocumentHost (활성 탭 문서) │
|
||
│ │ 비활성 탭은 언마운트하지 않고 │
|
||
│ │ display:none 로 상태 보존 │
|
||
│ ├─────────────────────────────────────────────────┤
|
||
│ │ [ShellFooter] © 2026 KINTEX … ● 시스템 정상 · v2.1.2 · 고객지원 │ 높이 36px
|
||
└──────────┴─────────────────────────────────────────────────┘
|
||
```
|
||
|
||
- **ShellFooter(높이 36px)**: 사이드바 우측 전폭 하단에 고정(sticky). 좌측 저작권, 우측 시스템 상태 점·앱 버전·고객지원 링크. 상세 규격은 §2-2 "웹 인증 셸 하단 상태바/푸터"를 따른다(전 셸 화면 공통·§1 토큰·WCAG AA).
|
||
|
||
- **사이드바(240px)**: 기존 역할별 메뉴 유지. 항목 클릭 → 해당 문서 탭 열기(중복 방지 시 기존 탭 활성). 활성 문서에 해당하는 메뉴 항목은 `primary-100 #D9EAF7` 배경으로 하이라이트.
|
||
- **탭바(높이 40px)**: 사이드바 우측 상단, 유틸리티 바 아래 전폭. 문서 탭이 좌→우로 나열되고, 우측 끝 `+`(빠른 열기 팔레트). 탭바 배경 `neutral-050 #F9FAFB`, 하단 1px 테두리 `neutral-200`.
|
||
- **DocumentHost(중앙)**: 활성 탭의 문서만 시각적으로 표시. **비활성 탭은 DOM에서 언마운트하지 않고 `display:none`(또는 offscreen)으로 유지**해 스크롤·폼·에디터 상태를 보존한다(§2.7-3). 배경은 화면별(대시보드=`neutral-050`, 에디터/배선 뷰 캔버스 영역=`canvas-bg #1C2536`).
|
||
- **엘리베이션**: 탭바·문서 경계는 그림자 대신 §1-4 규칙대로 1px 테두리로 구분. 활성 탭만 문서 영역과 같은 흰색 서피스로 "연결"된 느낌(활성 탭 하단 테두리 제거).
|
||
|
||
### 2.7-2. 탭(Tab) 시각·상호작용 규격
|
||
|
||
- **탭 구성**: `[아이콘] 문서 라벨 [dirty ●] [x]`. 라벨 최대폭 200px(초과 시 말줄임 `…`, 툴팁 전체 표시). 상태 배지가 있는 문서(승인건 등)는 라벨 앞에 §1-4 StatusBadge 소형 점.
|
||
- **활성 탭**: 흰색 배경 + 상단 2px `primary-600 #0066B3` 인디케이터 + `neutral-900` 텍스트. **비활성 탭**: `neutral-050` 배경 + `neutral-500` 텍스트, hover 시 `#F1F5F9`.
|
||
- **dirty(미저장) 표시**: 미저장 변경이 있으면 `x` 자리에 채워진 점 **●**(`warning #B45309`) 표시, hover 시 `x`로 전환. **닫기 시 미저장이면 확인 다이얼로그**("저장하지 않은 변경이 있습니다 — 닫으시겠습니까? / 저장 후 닫기 · 저장 안 함 · 취소").
|
||
- **동작 규격**:
|
||
| 동작 | 트리거 | 결과 |
|
||
|---|---|---|
|
||
| 열기 | 사이드바 메뉴 · 화면 내 링크 · 딥링크 URL 진입 | 새 탭 생성 후 활성. **중복 방지**: 같은 문서키(§2.7-6)가 이미 열려 있으면 새로 만들지 않고 기존 탭을 활성·포커스 |
|
||
| 활성 전환 | 탭 클릭 · Ctrl+Tab | URL 동기화(§2.7-4), DocumentHost가 해당 문서 표시 |
|
||
| 닫기 | `x` 클릭 · 미들클릭 · Ctrl+W | dirty면 확인 다이얼로그. 활성 탭 닫으면 오른쪽(없으면 왼쪽) 인접 탭 활성 |
|
||
| 재정렬 | 탭 드래그(HTML5 DnD/포인터) | 순서 변경, 세션 저장 반영 |
|
||
| 컨텍스트 메뉴 | 우클릭 | 닫기 · 다른 탭 모두 닫기 · 오른쪽 탭 모두 닫기 · 새 창으로 분리(딥링크 복제) |
|
||
- **최대 탭 수**: 기본 **12개**. 초과 시 새 탭 열기 요청이 오면 토스트("탭이 12개를 초과했습니다 — 사용하지 않는 탭을 닫아주세요") + LRU(가장 오래 비활성·非dirty) 탭 닫기 제안. dirty 탭은 자동 닫기 대상에서 제외.
|
||
- **오버플로우**: 탭 총 폭이 탭바를 넘으면 ① 탭 폭 축소(최소 120px)까지 우선 → ② 그 이상은 **가로 스크롤**(마우스 휠·좌우 셰브론) + 우측 **오버플로우 드롭다운(▾)**(전체 탭 목록, dirty·상태 배지 포함, 검색 가능). 활성 탭은 항상 보이도록 자동 스크롤 인.
|
||
- **핀 고정(선택)**: 대시보드/승인 큐 등 홈 성격 문서는 핀 고정 가능(아이콘만·닫기 숨김·항상 최좌측). 역할 진입 시 홈 탭 1개는 기본 핀 고정으로 자동 오픈.
|
||
|
||
### 2.7-3. 탭별 상태 보존
|
||
|
||
- **보존 대상**: ① 에디터 미저장 편집(부스 폴리곤 위치·설계 스펙 폼) ② 스크롤 위치 ③ 폼 입력·필터·선택 행 ④ 캔버스 줌·팬·레이어 토글.
|
||
- **구현 원칙**: 비활성 탭은 **언마운트 금지**(`display:none` 유지) — React 컴포넌트 인스턴스와 로컬/스토어 상태를 살려둔다. 무거운 캔버스(SCR-03 배치 에디터, SCR-07 배선 뷰)는 활성일 때만 렌더 루프·WebGL 컨텍스트를 활성화하고 비활성 시 일시정지(freeze)하되 상태 객체는 메모리에 유지.
|
||
- **메모리 가드**: 최대 탭 수(12) + freeze로 상한을 두되, 캔버스 문서는 동시 3개 초과 시 가장 오래된 비활성 캔버스의 WebGL 컨텍스트만 파기(상태 스냅샷은 유지 → 재활성 시 복원). 이는 §1-5 "캔버스 편집=데스크톱 전용" 제약과 정합.
|
||
- **dirty 판정**: 각 문서는 자신의 dirty 여부를 탭 스토어에 보고한다(저장 성공 시 false). 브라우저 이탈(`beforeunload`) 시 dirty 탭이 하나라도 있으면 네이티브 확인 경고.
|
||
|
||
### 2.7-4. 세션 복원 & 딥링크 ↔ 탭 URL 동기화
|
||
|
||
- **각 탭은 라우트를 가진다.** 활성 탭 전환 시 브라우저 URL이 그 문서의 딥링크로 동기화(`history.replaceState`), 탭 열기/닫기는 push. 예:
|
||
- `/o/{eventId}/dashboard` → 주최자 대시보드(SCR-02)
|
||
- `/o/{eventId}/floorplan/{layoutId}` → 부스 배치 에디터(SCR-03)
|
||
- `/e/{eventId}/booth/{boothId}/studio` → 설계 스튜디오(SCR-06)
|
||
- `/e/{eventId}/booth/{boothId}/utility` → 배선 뷰(SCR-07)
|
||
- `/m/{eventId}/approvals` · `/m/{eventId}/review/{submissionId}` → 승인 큐·검수 상세(SCR-10/11)
|
||
- `/gallery/{scope}` → 시각화 갤러리(SCR-12)
|
||
- **딥링크 진입**: 외부에서 위 URL로 진입하면 셸이 부팅되며 **해당 문서 탭 1개를 열고 활성화**(중복 방지 규칙 적용). 알림·메일 링크는 이 경로를 사용.
|
||
- **세션 복원**: 열린 탭 목록(문서키·라우트·순서·핀·활성 인덱스)을 `localStorage`(키 `kintex.mdi.{role}.{eventId}`)에 디바운스 저장. 새로고침·재접속 시 복원하되 **미저장 편집 내용 자체는 복원 대상 아님**(탭은 되살아나지만 서버에 저장되지 않은 편집은 "이어서 편집" 초안 API가 있을 때만). 복원 실패 시 홈 탭만 열고 토스트.
|
||
- **행사 전환**: 사이드바에서 행사(eventId)를 바꾸면 현재 행사 탭 세션을 저장하고 대상 행사의 세션을 로드(행사별로 탭 셋 분리). dirty 탭이 있으면 전환 전 확인.
|
||
|
||
### 2.7-5. 단축키 & 접근성
|
||
|
||
- **단축키**: `Ctrl+W` 활성 탭 닫기 · `Ctrl+Tab` / `Ctrl+Shift+Tab` 다음/이전 탭 · `Ctrl+1~9` N번째 탭 · `Ctrl+클릭`(사이드바 메뉴/링크) 백그라운드 새 탭 · `Ctrl+Shift+T` 마지막 닫은 탭 복원 · `Alt+←/→` 탭 재정렬. dirty 탭 `Ctrl+W`는 확인 다이얼로그를 거친다. 텍스트 입력·에디터 포커스 중에는 편집 단축키가 우선(충돌 방지).
|
||
- **접근성(ARIA)**: 탭바는 `role="tablist"`(수평, `aria-orientation="horizontal"`), 각 탭 `role="tab"`(`aria-selected`, `aria-controls`가 문서 패널 id 참조), 문서 영역 `role="tabpanel"`(`aria-labelledby`가 탭 id). **키보드 로빙 탭 인덱스**: 좌우 화살표로 탭 간 이동, Enter/Space로 활성, Delete로 닫기(dirty 확인 경유). 닫기 `x`는 `aria-label="{문서명} 탭 닫기"`. dirty ● 는 스크린리더용 `aria-label="저장되지 않음"` 텍스트 병기. 포커스 링은 `primary-600` 2px, 명도 대비 WCAG AA 이상.
|
||
|
||
### 2.7-6. 역할별 적용
|
||
|
||
| 역할 | 포털 | MDI | 비고 |
|
||
|---|---|---|---|
|
||
| 관리자(Admin) | `admin.` 백오피스 | **적용** | 사용자·RBAC·감사로그·룰셋 등 다수 관리 문서 병행 |
|
||
| 주최자(Organizer) | `organizer.` 콘솔 | **적용** | 대시보드·배치 에디터·비교·참가업체 관리 병행(SCR-02·03·04) |
|
||
| 참가업체(Exhibitor) | `exhibitor.` 포털 | **적용** | 부스 홈·설계 스튜디오·배선 뷰·갤러리 병행(SCR-05·06·07·08·12) |
|
||
| 장치·시공업체(Contractor) | 참가업체 포털 공유 | **적용** | 수주 부스별 설계 스튜디오·규정 리포트 다중 오픈(SCR-06·09) |
|
||
| 홀매니저(Hall Manager) | `ops.` 운영 | **적용** | 승인 큐 + 검수 상세 여러 건 동시 검토(SCR-10·11) |
|
||
| 관람객/일반 대중(Visitor/Public) | 공개 사이트 `www/expo.` | **비적용** | SEO·공유·딥링크 목적 전통 페이지 내비 유지 |
|
||
|
||
- **모바일 전 역할**: MDI 비적용(단일 화면 포커스 + 네이티브 스택 내비). 현장·조회·승인 시나리오는 한 화면 집중이 안전(오조작 방지).
|
||
- 6개 역할 포털은 각자 독립 번들이지만 **동일한 MDI 셸 컴포넌트·탭 스토어를 공유 라이브러리로 상속**한다(§2.7-7). 역할별 차이는 사이드바 메뉴·허용 문서 라우트·홈 핀 탭뿐이다.
|
||
|
||
### 2.7-7. 컴포넌트 & 상태 스토어 표준
|
||
|
||
프론트 공유 라이브러리에 다음 컴포넌트·스토어를 신설한다(§1 토큰 사용, 로직은 kintex-frontend-dev 소관 — 여기서는 계약만 정의).
|
||
|
||
- **`<AppShell>`**: 사이드바 + `<UtilityBar>` + `<TabBar>` + `<DocumentHost>` 조립. 역할·eventId를 props로 받아 메뉴·세션키·허용 라우트를 주입.
|
||
- **`<TabBar>`**: 탭 목록 렌더·드래그 재정렬·오버플로우(스크롤+드롭다운)·`+` 팔레트. `role="tablist"`. props: `tabs`, `activeId`, `onActivate`, `onClose`, `onReorder`, `maxTabs=12`.
|
||
- **`<Tab>`**: 단일 탭 프레젠테이션(아이콘·라벨·dirty ●·닫기). `role="tab"`. 상태: 활성/비활성/hover/dirty/pinned.
|
||
- **`<DocumentHost>`**: 열린 문서들을 keep-alive로 렌더(활성만 표시, 비활성 `display:none`). 문서키→라우트→컴포넌트 매핑(문서 레지스트리)을 통해 lazy 로드. `role="tabpanel"`.
|
||
- **탭 상태 스토어(`useMdiStore`)** — 문서 인스턴스의 단일 진실:
|
||
- `DocumentInstance { id, docKey, route, title, icon, params, dirty, pinned, status?, createdAt, lastActiveAt }`
|
||
- `docKey` = 문서 정체성(중복 방지 키). 예: `floorplan:{layoutId}`, `booth-studio:{boothId}`, `review:{submissionId}`. **같은 docKey는 탭 1개**로 강제.
|
||
- `params`: 문서 복원용 파라미터(스크롤·필터 등 경량 상태 스냅샷은 문서가 자체 스토어로 관리, 스토어에는 식별·라우팅·dirty만 보관해 비대화 방지).
|
||
- 액션: `openTab(docKey, route, meta)` / `activateTab(id)` / `closeTab(id, {force})` / `reorder(from,to)` / `setDirty(id,bool)` / `pinTab(id)` / `restoreSession()` / `persistSession()`.
|
||
- **직렬화 규칙**: `localStorage`에는 `{id, docKey, route, title, icon, pinned, order, activeId}`만 저장(dirty·휘발 상태 제외). 복원 시 문서는 라우트로 재구성.
|
||
|
||
**MDI 셸 Stitch 프롬프트** (셸 크롬 생성용 — 문서 콘텐츠는 각 SCR 프롬프트로 별도 생성):
|
||
|
||
```
|
||
An enterprise MDI (multiple document interface) application shell for "KINTEX AI 전시관리", a Korean B2B exhibition management web app. Desktop 1440px, light theme, primary blue #0066B3, backgrounds #F9FAFB, 1px borders #E4E7EC, Korean sans-serif (Pretendard style). All UI text in Korean. Layout: a slim 48px top utility bar with a breadcrumb "부스 배치 에디터 · 배치안 B", a notification bell, a countdown chip "개장 D-31", and a user avatar on the right. A fixed left sidebar 240px with an event switcher dropdown "2026 스마트팩토리 코리아 ▾" and a vertical menu ("대시보드, 플로어플랜 스튜디오, 참가업체 관리, 승인 큐, 시각화 갤러리"), the "플로어플랜 스튜디오" item highlighted with a light blue #D9EAF7 background. To the right of the sidebar, below the utility bar, a horizontal document TAB BAR 40px tall on #F9FAFB with a bottom border: several browser-style tabs in a row — a pinned home tab with only a dashboard icon, then "부스 배치 에디터" as the ACTIVE tab (white background, 2px blue #0066B3 top indicator, connected to the content below, with a small close × ), then "장치 도면 검수" tab showing an amber unsaved dot ● instead of ×, then "승인 큐" tab, then a truncated tab "유틸리티 배선…", and a right-side overflow chevron ▾ and a small "+" button. Below the tab bar, a large central document area showing the active document (a dark navy #1C2536 floor-plan editor canvas with small blue booth rectangles), so it's clear each tab hosts an independent document. Clean, dense, professional enterprise tool aesthetic — emphasize the browser-like tab strip and the sidebar-to-tab relationship.
|
||
```
|
||
|
||
---
|
||
|
||
## 2.8 전 화면 인벤토리 매트릭스 (v2.0)
|
||
|
||
> **완결성 원칙**: PLANNING v3.0의 어떤 모듈/역할에서도 "design.md에 화면이 없어 디자인 불가"인 페이지가 0개가 되도록 아래 인벤토리로 전수 커버한다. 상태 컬럼 — **✅Stitch**(`stitch_kintex_ai_system_architect/`에서 이미 Stitch 생성) · **✅구현**(현행 프론트 `src/frontend`/`mobile` 구현 존재) · **🔲미생성**(신규 정의, Stitch·구현 착수 전).
|
||
|
||
### 2.8-1. 모듈 × 역할 × 채널 요약 매트릭스
|
||
|
||
역할 약칭: **주**(주최자) · **참**(참가업체) · **장**(장치·공사업체) · **홀**(킨텍스 직원 — 홀매니저·운영) · **관**(시스템 관리자 — 테넌트/플랫폼) · **대**(일반 대중·관람객). 셀 = 대표 SCR(웹) / (모바일은 M접두). 다중 역할 공유 화면은 대표 역할에 표기.
|
||
|
||
| 모듈 | 주최자 | 참가업체 | 장치업체 | 킨텍스직원 | 관리자 | 대중/관람객 |
|
||
|---|---|---|---|---|---|---|
|
||
| **공통 인증/셸** | SCR-01·49·50·51 · MDI셸 §2.7 | SCR-01 | SCR-01 | SCR-01 | SCR-01 | SCR-P4 |
|
||
| **M1 홀배정·견적** | SCR-15·18·19 | SCR-20 | — | SCR-15 | SCR-A7 | — |
|
||
| **M2 배치** | SCR-03·04·19 | — | SCR-03(RO) | SCR-03(RO) | — | SCR-P3 |
|
||
| **M3 부스설계** | — | SCR-06 | SCR-06·09·38 / M1 | — | — | — |
|
||
| **M4 유틸리티** | — | SCR-07·08 | SCR-07(검토) | SCR-10(부하) | — | — |
|
||
| **M5 나노바나나** | SCR-04 | SCR-06·12 | SCR-12 | SCR-11(참고) | — | — |
|
||
| **M6 서류·마일스톤** | SCR-22·23 | SCR-05 | — | SCR-24·10 | — | — |
|
||
| **M7 등록업체 매칭** | SCR-24 | SCR-24 | SCR-38 | — | SCR-A7 | — |
|
||
| **M8 반입/반출** | SCR-25 | SCR-25 | SCR-25 / M10 | SCR-25 | — | — |
|
||
| **M9 정산·결제** | SCR-21 | SCR-21 | — | — | SCR-21 | SCR-P7(티켓결제 연계) |
|
||
| **M10 관람·배지·리드·티켓** | SCR-30 | SCR-32 / M4 | — | SCR-31 | — | SCR-P4·P7·P8 / M5·M14·M15 |
|
||
| **M11 비즈매칭** | SCR-30 | — / M8 | — | — | — | / M8 |
|
||
| **M12 마케팅·공개사이트** | SCR-33·34 | SCR-36 | — | — | — | SCR-P1·P2·P3·P5 |
|
||
| **M13 wayfinding** | — | — | — | POI=SCR-A7/SCR-35 | — | / M6·M7 |
|
||
| **M14 현장운영** | — | — | — | SCR-14 | — | — |
|
||
| **M15 공사/장치 옥션** | SCR-26·29 | SCR-26·29 | SCR-27·28 / M13 | — | — | — |
|
||
| **M16 경영분석 BI** | SCR-13 | SCR-13(참ROI) | — | SCR-13 | SCR-13 | — |
|
||
| **M17 CMS** | SCR-35 | SCR-36 | — | — | SCR-35·37 | SCR-P5 |
|
||
| **M18 관리자·시스템관리** | — | — | — | — | SCR-16·A1~A10 | — |
|
||
| **§5B 공통 업무기능** | SCR-39~48 | SCR-39~48 | SCR-38·39~48 | SCR-39~48 | SCR-39~48 | — |
|
||
|
||
### 2.8-2. 전 화면 SCR 인덱스 (상태 포함)
|
||
|
||
**웹 — 코어·도메인 (§3)**
|
||
|
||
| SCR | 화면명 | 모듈 | 역할 | P | 상태 |
|
||
|---|---|---|---|---|---|
|
||
| SCR-01 | 로그인 (성공 시 SCR-HOME 랜딩) | 공통 | 전 | P0 | ✅Stitch ✅구현 |
|
||
| SCR-HOME | 로그인 후 메인 홈(랜딩) | 공통·§5B·M1·M12 | 전 | P0 | 🔲미생성 |
|
||
| SCR-02 | 주최자 대시보드 | M1·M6 | 주 | P0 | ✅Stitch ✅구현 |
|
||
| SCR-03 | 부스 배치 에디터 | M2 | 주·홀 | P0 | ✅Stitch ✅구현 |
|
||
| SCR-04 | 배치안 비교(S7) | M2·M5 | 주 | P0 | ✅Stitch ✅구현 |
|
||
| SCR-05 | 참가업체 부스 홈 | M3·M6 | 참 | P0 | ✅Stitch ✅구현 |
|
||
| SCR-06 | 부스 설계 스튜디오 | M3·M5 | 참·장 | P0 | ✅Stitch ✅구현 |
|
||
| SCR-07 | 유틸리티 배선 뷰 | M4 | 참·장 | P0 | ✅Stitch ✅구현 |
|
||
| SCR-08 | 유틸리티 신청 요약·위치표시도 | M4b | 참 | P0 | ✅Stitch ✅구현 |
|
||
| SCR-09 | 규정 검증 리포트 | M3 | 장 | P0 | ✅Stitch ✅구현 |
|
||
| SCR-10 | 홀매니저 승인 큐 | M2·M3·M6 | 홀 | P0 | ✅Stitch ✅구현 |
|
||
| SCR-11 | 홀매니저 검수 상세 | M2·M3 | 홀 | P0 | ✅Stitch ✅구현 |
|
||
| SCR-12 | 시각화 갤러리 | M5 | 전 | P0 | ✅Stitch ✅구현 |
|
||
| SCR-13 | 경영분석 대시보드 | M16 | 주·홀·관 | P1 | ✅Stitch ✅구현 |
|
||
| SCR-14 | 홀 현장운영 대시보드 | M14 | 홀 | P2 | ✅Stitch ✅구현 |
|
||
| SCR-15 | 전시 일정 관리 | M1·M6 | 주·홀 | P1 | ✅Stitch ✅구현 |
|
||
| SCR-16 | 관리자 대시보드(랜딩) | M18 | 관 | P1 | ✅Stitch ✅구현 |
|
||
| SCR-17 | 컴포넌트 가이드(스타일가이드) | §1 | 내부 | — | ✅Stitch ✅구현 |
|
||
| SCR-18 | 홀 배정 신청 & 자동 견적 | M1 | 주 | P1 | ✅Stitch |
|
||
| SCR-19 | 부스 판매 인벤토리 | M1·M2 | 주 | P1 | ✅Stitch |
|
||
| SCR-20 | 온라인 부스 셀프 선택·판매 | M2 | 참 | P1 | ✅Stitch |
|
||
| SCR-21 | 정산·결제 대시보드 | M9 | 주·참·관 | P1 | ✅Stitch |
|
||
| SCR-22 | 서류·마일스톤 워크플로 | M6 | 주 | P1 | ✅Stitch |
|
||
| SCR-23 | 신고서류 작성(웹폼→HWP/PDF) | M6 | 주 | P1 | ✅Stitch |
|
||
| SCR-24 | 등록업체 매칭·RFQ | M7 | 참·주 | P1 | ✅Stitch |
|
||
| SCR-25 | 반입/반출 슬롯 예약 | M8 | 참·장·홀 | P2 | ✅Stitch |
|
||
| SCR-26 | 옥션 목록·개설 | M15 | 참·주 | P1 | ✅Stitch |
|
||
| SCR-27 | 옥션 상세·실시간 순위·응찰 | M15 | 장 | P1 | ✅Stitch |
|
||
| SCR-28 | 견적서 작성·제출 | M15 | 장 | P1 | ✅Stitch |
|
||
| SCR-29 | 낙찰 비교·선정(Award) | M15 | 주·참 | P1 | ✅Stitch |
|
||
| SCR-30 | 관람객 등록 관리 대시보드 | M10·M11 | 주 | P1 | ✅Stitch |
|
||
| SCR-31 | 현장 체크인 데스크/키오스크 | M10 | 홀 | P1 | ✅Stitch |
|
||
| SCR-32 | 리드 관리·AI 스코어링 | M10 | 참 | P1 | ✅Stitch |
|
||
| SCR-33 | EDM·캠페인 관리 | M12 | 주 | P1 | ✅Stitch |
|
||
| SCR-34 | 스폰서십 패키지·판매 관리 | M12 | 주 | P1 | ✅Stitch |
|
||
| SCR-35 | CMS 콘텐츠·게시 워크플로 | M17 | 주·관 | P1 | ✅Stitch |
|
||
| SCR-36 | 참가업체 마이크로사이트 편집기 | M17 | 참 | P1 | ✅Stitch |
|
||
| SCR-37 | 다국어 콘텐츠 관리 | M17 | 관 | P1 | ✅Stitch |
|
||
| SCR-38 | 업체 수주 부스 대시보드 | 업체포털 | 장 | P1 | ✅Stitch |
|
||
| SCR-39 | 업무일지(worklog) | §5B | 전 | P1 | ✅Stitch |
|
||
| SCR-40 | 통합 일정·캘린더(schedule) | §5B | 전 | P1 | ✅Stitch |
|
||
| SCR-41 | 쪽지(message) | §5B | 전 | P1 | ✅Stitch |
|
||
| SCR-42 | 공지(notice) | §5B | 전 | P1 | ✅Stitch |
|
||
| SCR-43 | 의견접수(opinion) | §5B | 전 | P2 | ✅Stitch |
|
||
| SCR-44 | 통합검색(search) | §5B | 전 | P1 | ✅Stitch |
|
||
| SCR-45 | 회의록(meeting·STT→Jasper) | §5B | 주·홀 | P1 | ✅Stitch |
|
||
| SCR-46 | 업무보고·통계(report/stats) | §5B | 주·홀 | P1 | ✅Stitch |
|
||
| SCR-47 | 알림센터(notification) | §5B | 전 | P1 | ✅Stitch |
|
||
| SCR-48 | 마이페이지·환경설정 | §5B | 전 | P1 | ✅Stitch |
|
||
| SCR-49 | 회원가입(웹) | §5B-3 | 전 | P1 | ✅Stitch |
|
||
| SCR-50 | 비밀번호 찾기·재설정 | §5B-3 | 전 | P1 | ✅Stitch |
|
||
| SCR-51 | 2차 인증(OTP) 설정 | §5B-3 | 전 | P1 | ✅Stitch |
|
||
|
||
**웹 — 관리자 백오피스 (§3A · SCR-A*)**
|
||
|
||
| SCR | 화면명 | 모듈 | 역할 | 상태 |
|
||
|---|---|---|---|---|
|
||
| SCR-A1 | 사용자 관리 | M18·§5B-1 | 관 | ✅Stitch |
|
||
| SCR-A2 | 역할·권한(RBAC) 관리 | M18·§5B-1 | 관 | ✅Stitch |
|
||
| SCR-A3 | 공통코드 관리 | M18·§5B-1 | 관 | ✅Stitch |
|
||
| SCR-A4 | 메뉴 관리 | M18·§5B-1 | 관 | ✅Stitch |
|
||
| SCR-A5 | 감사로그 | M18·§5B-1 | 관 | ✅Stitch |
|
||
| SCR-A6 | 시스템설정 | M18·§5B-1 | 관 | ✅Stitch |
|
||
| SCR-A7 | 마스터데이터 관리(홀·요율·요금·부스표준·등록업체) | M18 | 관 | ✅Stitch |
|
||
| SCR-A8 | 규정 룰셋 버전 관리 | M18 | 관 | ✅Stitch |
|
||
| SCR-A9 | 테넌트(전시관) 관리·온보딩 | §1A·M18 | 플랫폼관 | ✅Stitch |
|
||
| SCR-A10 | AI 플랫폼 설정(AiConfig) | §6·F100 | 관 | ✅Stitch |
|
||
|
||
**웹 — 공개 홍보 사이트 (§3B · SCR-P* · MDI 비적용·SEO/다국어)**
|
||
|
||
| SCR | 화면명 | 모듈 | 역할 | 상태 |
|
||
|---|---|---|---|---|
|
||
| SCR-P1 | 공개 홍보 사이트 홈 | M12 | 대 | ✅Stitch |
|
||
| SCR-P2 | 행사 상세(소개·일정·교통·연사) | M12 | 대 | ✅Stitch |
|
||
| SCR-P3 | 공개 인터랙티브 플로어플랜 | M12·M2 | 대 | ✅Stitch |
|
||
| SCR-P4 | 관람객 사전등록 폼 | M10 | 대 | ✅Stitch |
|
||
| SCR-P5 | 참가업체 마이크로사이트 공개 뷰 | M17 | 대 | ✅Stitch |
|
||
| SCR-P6 | 참가/부스 신청 문의 | M12 | 대 | ✅Stitch |
|
||
| SCR-P7 | 입장권 예매(티켓팅) | M10·M9 | 대 | ✅Stitch |
|
||
| SCR-P8 | 예매 확인·취소 | M10·M9 | 대 | ✅Stitch |
|
||
|
||
**웹 — 3-트랙 관문·서브홈 (§3C · SCR-T* · 공개·MDI 비적용·SEO/다국어 · v2.2 신설)**
|
||
|
||
| SCR | 화면명 | 모듈 | 역할 | 라우트 | 상태 |
|
||
|---|---|---|---|---|---|
|
||
| SCR-T0 | 트랙 관문 랜딩(3-트랙 분기) | 공통·M12 | 대 | `/` | 🔲미생성 |
|
||
| SCR-T1 | visitor 메인(공개 홈·AI 관람 도우미) | M10·M11·M13·M12·AI | 대 | `/visitor` | 🔲미생성 |
|
||
| SCR-T2 | business 서브홈(비즈니스 진입) | M1·M3·M4·M6 | 대 | `/business` | 🔲미생성 |
|
||
| SCR-T3 | agency 서브홈(등록업체·옥션) | M15·안전경영 | 협·대 | `/agency` | 🔲미생성 |
|
||
|
||
**모바일 (§4 · SCR-M*)**
|
||
|
||
| SCR | 화면명 | 모듈 | 역할 | 상태 |
|
||
|---|---|---|---|---|
|
||
| SCR-M1 | 시공업체 현장 체크리스트 | M3 | 장 | ✅Stitch ✅구현 |
|
||
| SCR-M2 | 홀매니저 현장 검수 | M2·M3 | 홀 | ✅Stitch ✅구현 |
|
||
| SCR-M3 | 모바일 홈·대시보드(역할별) | 공통 | 전 | ✅구현(부분) |
|
||
| SCR-M4 | 참가업체 리드캡처(배지 스캔) | M10 | 참 | ✅Stitch |
|
||
| SCR-M5 | 관람객 앱 홈·모바일 배지/QR | M10 | 대 | ✅Stitch |
|
||
| SCR-M6 | 관람객 wayfinding·실내 지도 | M13 | 대 | ✅Stitch |
|
||
| SCR-M7 | 관람객 플로어플랜·부스 검색 | M12·M2 | 대 | ✅Stitch |
|
||
| SCR-M8 | 비즈매칭·미팅 | M11 | 대·참 | ✅Stitch |
|
||
| SCR-M9 | 세션·아젠다·개인 일정 | M11 | 대 | ✅Stitch |
|
||
| SCR-M10 | 업체 반입 통행증·안전 체크 | M8 | 장 | ✅Stitch |
|
||
| SCR-M11 | 모바일 알림센터 | §5B | 전 | ✅Stitch |
|
||
| SCR-M12 | 모바일 서류·승인 조회 | M6 | 주·홀 | ✅Stitch |
|
||
| SCR-M13 | 모바일 옥션 순위 조회 | M15 | 장·참 | ✅Stitch |
|
||
| SCR-M14 | 모바일 티켓 예매 | M10·M9 | 대 | ✅Stitch |
|
||
| SCR-M15 | 내 티켓 지갑 | M10·M9 | 대 | ✅Stitch |
|
||
|
||
**집계**: 웹 코어·도메인 52 (기존 17 + 신규 34 + **SCR-HOME 신규 1**) · 관리자 10 (신규) · 공개사이트 8 (기존 6 + 신규 2 티켓) · 모바일 15 (기존 3 + 신규 12) = **총 85화면**(기존 유지 20 + 신규 65). 상태: ✅Stitch 83 · ✅구현 20 · 🔲미생성 2 (SCR-HOME 신규 정의(Stitch 착수 전) + SCR-M3(✅구현(부분))). 2026-07-12 수확으로 SCR-HOME을 제외한 신규 화면은 전량 Stitch 확보됨.
|
||
|
||
---
|
||
|
||
## 3. 화면별 스펙
|
||
|
||
> P0 모듈(M2·M3·M4·M5) 중심 총 14개 화면(웹 12 + 모바일 2) + **v2.0 확장 SCR-13~17(경영분석 M16·홀운영 M14·전시일정 M1·M6·관리자 M18·컴포넌트 가이드)** + **v2.0 도메인 확장 SCR-18~51(M1·M6·M7·M8·M9·M15·M10·M12·M17·§5B 공통레이어)** + 관리자 §3A·공개사이트 §3B·모바일 §4. 각 Stitch 프롬프트는 화면 1개를 1회 생성하는 기준으로 작성했다. **디자인 토큰은 전부 §1을 따르고 신규 토큰은 추가하지 않는다.**
|
||
|
||
---
|
||
|
||
### SCR-01 로그인 & 행사 워크스페이스 선택
|
||
|
||
- **대상**: 전 역할 공통 · **진입 경로**: 최초 접속 / 초대 링크 클릭
|
||
- **랜딩 흐름 변경(v2.1.2)**: **로그인 성공 → 메인 홈 `/home`(SCR-HOME)으로 랜딩한다.** 기존 "로그인 후 행사 워크스페이스 카드 그리드" 단계(phase)는 **제거**하고, 워크스페이스 선택은 SCR-HOME "내 행사 워크스페이스" 섹션으로 흡수한다. SCR-01은 순수 로그인·인증 화면으로 축소된다.
|
||
- **레이아웃 (위→아래)**:
|
||
1. 좌우 분할: 좌측 55% 브랜드 패널 — 나노바나나 생성 부스 예상 사진 배경 + 카피 "신청서를 내는 순간, 시공 후 사진을 먼저 봅니다" + AI 이미지 고지 캡션
|
||
2. 우측 45% 로그인 카드: 이메일/비밀번호, 이메일 인증 로그인, 킨텍스 내부 계정(SSO) 버튼 분리 + 하단 링크 "초대 코드로 참여하기"(코드 입력 모달)
|
||
- **핵심 컴포넌트/상태**: 로그인 실패 인라인 에러 · 에러: 미등록 장치업체 초대 수락 시 차단 모달("킨텍스 등록업체만 참여할 수 있습니다"). **역할 배지·워크스페이스 카드 그리드·"참여 중인 행사가 없습니다" 빈 상태·초대 코드 안내는 SCR-HOME으로 이관**(아래 §SCR-HOME 참조).
|
||
- **Stitch 프롬프트**:
|
||
|
||
```
|
||
A B2B SaaS login page for "KINTEX AI 전시관리", a Korean exhibition management platform. Desktop web, 1440px, light theme. All UI text in Korean. Split layout: left 55% is a brand panel with a photorealistic AI-rendered exhibition booth photo as background, dark blue gradient overlay (#004C86), large white headline "신청서를 내는 순간, 시공 후 사진을 먼저 봅니다" and a small caption "AI 생성 예상 이미지". Right 45% is a white card on #F9FAFB background: KINTEX wordmark logo in blue #0066B3, title "로그인", email and password inputs with Korean labels "이메일", "비밀번호", a primary blue #0066B3 button "로그인", divider, and a secondary outlined button "킨텍스 내부 계정으로 로그인". Below the card, small text link "초대 코드로 참여하기". Font is a clean Korean sans-serif (Pretendard style). Professional, trustworthy, enterprise tone.
|
||
```
|
||
|
||
---
|
||
|
||
### SCR-HOME 로그인 후 메인 홈 (랜딩 대시보드)
|
||
|
||
- **화면 ID / 이름**: SCR-HOME / 메인 홈(랜딩) · **대상**: 전 역할 공통(로그인 사용자) · **진입 경로**: 로그인 성공(SCR-01) → `/home` · **셸**: 업무 인증 AppShell(§2.7 MDI) 내부 문서(핀 고정 홈 탭). 사이드바·상단 유틸리티 바·**하단 ShellFooter**(§2-2) 공통 노출.
|
||
- **밀도 원칙(소유자 지시 2026-07-12 — 대형 공백 금지)**: SCR-HOME은 **화면이 콘텐츠로 꽉 차야 한다(large empty area 금지)**. ①**12컬럼 그리드 컴팩트 배치** — 섹션 간 세로 여백은 §1-4 토큰 준수 범위 내 최소(거터 24px 기준, 섹션 간 24px 표준·32px 초과 금지), 카드 내부 패딩은 고밀도 기준 8~16px. ②**배너 캐러셀 높이 과대 금지 — 약 220~260px**. ③**좌우 컬럼 세로 균형** — 우측 4/12는 공지만으로 좌측(캘린더+리스트) 높이에 못 미치므로 보조 위젯("내 할 일"·"빠른 작업"·"최근 활동")으로 채운다(아래 4-우). ④**빈 상태도 공간 활용** — 모든 빈 상태는 안내 문구 + **행동 버튼(CTA)** 조합으로 배치해 죽은 영역을 만들지 않는다.
|
||
- **레이아웃 (위→아래, 웹 1440px · 12컬럼 컴팩트)**:
|
||
1. **인사·요약 KPI 스트립(전폭, 단일 행)**: 좌측 인사 "안녕하세요, {이름}님" + 오늘 날짜/역할 배지(주최자/참가업체/장치업체/홀매니저/관리자). 우측에 **요약 KPI 타일 4개** — ① 진행 중 전시 수 ② 오늘 체크인 ③ D-임박 행사(가장 가까운 개장 D-데이 칩) ④ 미결 결재/승인 건수. 각 타일은 §1-4 상태색 좌측 4px 액센트, 클릭 시 해당 문서 탭 열기(딥링크). **KPI 4타일은 역할(사용자 그룹)별 구성이다(확정판 명시)** — 예시 세트: **주최자** = 진행 중 전시 · 참가업체 신청 · D-임박 마감 · 미결 결재 / **참가업체** = 내 부스 진행 상태 · 제출할 서류 · 유틸리티 마감 D-n · 미확인 견적/청구 / **공사(장치)업체** = 응찰 중 옥션 · 수주 부스 · 시공 일정 D-n · 검수 대기 / **관리자** = 승인 대기 · 활성 사용자 · 시스템 알림 · 점검 항목 (기본 예시는 주최자 세트). 데이터 없는 타일은 "—" 플레이스홀더. **인사와 KPI는 같은 행에 컴팩트 배치**(세로 분리 금지).
|
||
2. **행사소개 배너 캐러셀(전폭, 높이 220~260px 고정)**: 관리자 등록 이미지 슬라이드(SCR-01 브랜드 패널과 **동일한 login-slides 자산/API 재사용**). 좌우 내비 화살표(선 SVG)·인디케이터 점·자동 슬라이드(5초, hover/포커스 시 일시정지·`prefers-reduced-motion` 시 자동재생 정지). 각 슬라이드에 제목·부제·CTA(행사 상세/사전등록 딥링크). AI 생성 이미지가 포함되면 §1-4 고지 캡션 유지. **높이는 220~260px으로 제한**(과대 히어로 금지 — 밀도 원칙 ②).
|
||
3. **"진행 중·다가오는 전시" 쇼케이스(전폭, 가로 스크롤 포스터 카드 레일 — 확정판 추가)**: 다양한 행사 전시정보를 한눈에 노출. 배너 캐러셀 바로 아래(캘린더 위) 배치.
|
||
- **헤더 행**: 섹션 제목 "진행 중·다가오는 전시" + **탭/세그먼트 전환 `진행 중 | 이번 달 | 다음 달`**(기본값 진행 중) + 우측 끝 "전체 보기" 링크(전시 일정 진입).
|
||
- **포스터 카드 레일**: 가로 스크롤 1행에 **8~12장 노출**(1440 기준 화면당 6~7장 가시 + 나머지 스크롤). **좌우 스크롤 화살표 버튼**(선 SVG, 끝단 도달 시 해당 방향 비활성) + 휠/드래그/터치 스와이프. 카드 구성 = **포스터 이미지(세로 비율 약 2:3)** 상단 + 하단 정보 블록: 행사명(2줄 말줄임) · 기간 · 홀(hall_label) · **상태 배지(진행중/예정)** · **D-day 칩**. 카드 클릭 → 참여 행사면 해당 워크스페이스, 아니면 행사 상세.
|
||
- **포스터 폴백**: `poster_url` 없는 행사는 **브랜드 그라디언트(primary 계열) + 행사명 타이포 폴백 카드**(빈 이미지 영역 금지 — 밀도 원칙 ④ 동일 정신).
|
||
- 레일 전체 높이 약 280~320px 이내 유지(밀도 원칙 — 캘린더를 과도하게 아래로 밀지 않음). 키보드 좌우 화살표로 카드 포커스 이동, 레일은 `role="list"`/카드 `role="listitem"`.
|
||
4. **본문 2열 그리드(태블릿 2열→1열)**:
|
||
- **좌 8/12 — 현재·예정 전시 일정(달력)**: **WISE(UIWS) 캘린더 패턴 참조** — 레퍼런스 `C:\GUARDiA\workspace\uiws\frontend\src\components\CalendarView.tsx`(+ `pages/schedule` 계열)의 레이아웃·상호작용 컨벤션을 따른다:
|
||
- **월 캘린더 그리드**(6주 × 7열) + 상단 요일 헤더 행(일~토, 일=적/토=청 색상). 상단 툴바 "이전 / 다음 / 오늘" + (선택) 월·주 뷰 전환. **오늘 셀 강조**, 다른 달 셀은 흐리게(out).
|
||
- **일자별 이벤트 표시**: 단일일 전시는 셀 안 **색점(상태) + 제목 칩**, **기간(2일 이상) 전시는 날짜에 걸친 가로 이벤트 바(spanning bar, 주 단위 분할·레인 배치)**로 표시. 셀 초과 시 "+N" → 그 일자 전체 일정 팝업(WISE `moreDate` 팝업 동일). 상태 색점 범례를 캘린더 상단에 노출.
|
||
- **전시장 선택 필터(세그먼트 토글 — 동적 옵션, 하드코딩 금지)**: 캘린더 헤더에 세그먼트 컨트롤. 옵션은 **`전체` + 홀 마스터 테이블의 전시장(센터) 구분 distinct 목록**을 동적으로 렌더한다(기본값 **전체**). 현재는 제1전시장(1관)·제2전시장(2관)이지만, **추후 3관·4관 신설 시 마스터에 추가되면 세그먼트가 자동 확장**된다(코드에 관/홀 범위를 고정하지 않음). 표시 순서는 마스터 정렬을 따른다. 선택한 전시장의 홀을 점유하는 행사만 캘린더 이벤트·하단 리스트에 필터링(WISE `reloadKey` 재조회 패턴 — 세그먼트 변경 시 범위 재조회). 옵션이 많아지면(2관 초과) 세그먼트 폭 초과 시 드롭다운/스크롤로 폴백.
|
||
- 하단에 **이번 주/진행 중 전시 리스트**(행사명·홀·기간·상태 배지·D-데이 칩, 행 클릭 시 행사 대시보드/상세 진입) — 세그먼트 필터와 동기.
|
||
- 데이터: `/api/events/calendar`(점유·기간 바) + `/api/public/events`(리스트) 재사용, 홀 필터 파라미터로 전시장 세그먼트 반영.
|
||
- **우 4/12 — 세로 스택 4위젯(좌측 컬럼과 세로 균형 — 밀도 원칙 ③)**:
|
||
1. **내 할 일(역할 기반 — 확정판 추가, 최상단)**: 로그인 사용자가 **지금 해야 할 작업**을 한눈에 보여주는 카드. 카드 헤더 "내 할 일" + **건수 합계 배지**(예: "7"). **역할별 항목 구성** — 주최자 = 미결 결재 · 서류 마감 임박(D-n) · 홀 배정 확정 대기 · 옥션 낙찰 대기 / 참가업체 = 제출할 신고서류 · 부스 설계 확정 · 견적/청구 확인 / 공사(장치)업체 = 응찰 마감 임박 · 수주 시공 일정 / 관리자 = 승인 대기 · 시스템 점검 항목. **각 행 = 상태 점 + 작업명 + 대상(행사/부스/문서명) + D-day 또는 기한** — 클릭 시 해당 화면(문서 탭)으로 이동(§2.7 딥링크·중복 방지). D-3 이내 `warning`·기한 초과 `error` 색. 정렬은 기한 임박순, 최대 6행 + "전체 보기". **0건 시 "모두 완료" 상태**(success 체크 아이콘 + "처리할 작업이 없습니다") + 행동 버튼(예: "결재함 열기") — 밀도 원칙 ④.
|
||
2. **공지사항**: §5B notice 모듈 최근 5건 리스트(제목·작성일·NEW 배지·중요 고정 핀), 하단 "더보기" → `/work/notice`(SCR-42). 각 항목 클릭 시 공지 상세.
|
||
3. **빠른 작업(바로가기)**: 역할별 주요 액션 아이콘 버튼 2×3 그리드(선 SVG + 짧은 라벨) — 예: 주최자 = 배치 에디터·참가업체 초대·서류 워크플로·정산·공지 작성·통합검색 / 참가업체 = 설계 스튜디오·유틸리티 신청·갤러리·옥션·쪽지·검색. 클릭 = 해당 문서 탭 열기(딥링크, §2.7 중복 방지). 구성은 역할 기본값 + 정적 정의(개인화는 후속).
|
||
4. **최근 활동**: 내 계정 관련 최근 이벤트 타임라인 5건(승인/반려·공지 등록·쪽지 수신·마감 임박 등 — 기존 알림 피드 데이터 재사용, SCR-47 알림센터와 동일 원천). 각 행 = 상태 색점 + 요약 텍스트 + 상대시각("2시간 전"), 클릭 시 해당 문서 이동. 하단 "전체 보기" → 알림센터.
|
||
5. **내 행사 워크스페이스(전폭)**: "내 행사" 섹션 제목 + **참여 행사 카드 그리드**(행사명·기간·홀·내 역할 배지·D-데이 칩·진행 상태 요약). **카드 클릭 → 해당 행사 워크스페이스(역할별 대시보드) 진입**(주최자=SCR-02, 참가업체=SCR-05 등). SCR-01에서 이관된 워크스페이스 선택 기능이 이 섹션으로 흡수됨. 참여 행사가 없으면 **빈 상태**: "참여 중인 행사가 없습니다 — 초대 링크 또는 초대 코드를 확인하세요" + 초대 코드 입력 필드(SCR-01 기존 문구·컴포넌트 재사용).
|
||
- **핵심 컴포넌트/상태**:
|
||
- 컴포넌트: KPI 타일(StatusBadge 액센트)·이미지 캐러셀·**쇼케이스 포스터 레일(PosterRail — 포스터 카드/폴백 카드·스크롤 화살표·탭 전환)**·월 캘린더·전시 리스트·**내 할 일 리스트(TodoList — 건수 배지·기한 색상)**·NoticeList·**빠른 작업 그리드(QuickActions)·최근 활동 타임라인(ActivityFeed)**·워크스페이스 카드·DdayChip·역할 배지 — 모두 §1 기존 컴포넌트 재사용, 신규 토큰 0.
|
||
- **로딩**: 각 영역 독립 스켈레톤(KPI 4타일·배너·**쇼케이스 포스터 카드 6장**·캘린더·**내 할 일**·공지·빠른 작업·최근 활동·워크스페이스 그리드) — 부분 로드 허용(영역별 개별 로딩).
|
||
- **빈 상태(전부 안내+행동 버튼 조합 — 밀도 원칙 ④)**: 배너 미등록 시 기본 그라디언트 + 브랜드 카피 폴백(SCR-01 카피 재사용) + CTA "행사 둘러보기" · **쇼케이스 탭 0건 "해당 기간 전시가 없습니다" + "전체 일정 보기"**(개별 카드의 포스터 부재는 그라디언트+행사명 폴백 카드) · **내 할 일 0건 "모두 완료" 상태(success 체크 + "처리할 작업이 없습니다") + 행동 버튼("결재함 열기" 등 역할별)** · 공지 0건 "등록된 공지가 없습니다" + "전체 공지 보기"(권한자는 "공지 작성") · 워크스페이스 0건 초대 안내 + 초대 코드 입력 필드 + "초대 코드 확인" 버튼 · 일정 0건 "예정된 전시가 없습니다" + "전체 일정 보기" · 최근 활동 0건 "최근 활동이 없습니다" + "알림 설정".
|
||
- **에러**: 영역별 인라인 에러 카드 + 재시도(전면 에러 금지 — 한 영역 실패가 홈 전체를 막지 않음). KPI/캘린더 API 실패 시 해당 카드만 "불러오지 못했습니다 · 다시 시도".
|
||
- **데이터 소스 매핑**: ①KPI = 기존 실 API 재사용(진행 전시=이벤트 목록, 오늘 체크인=M10 체크인 집계, D-임박=이벤트 캘린더 파생, 미결 결재=승인/결재 집계) ②배너 = **기존 login-slides 자산/API 재사용**(SCR-01과 단일 출처) ③일정 = `/api/events/calendar` + `/api/public/events`, **전시장 필터 옵션 = 홀 마스터 조회 API(센터/전시장 구분 그룹, distinct·정렬 순)** — 세그먼트 옵션은 이 API 응답으로 동적 구성(하드코딩 금지, 3관·4관 확장 대비), 선택값은 캘린더·리스트 조회에 홀/센터 필터 파라미터로 전달 ④**쇼케이스 = event 테이블 `poster_url`(V32 마이그레이션 크롤 적재분·34건) + 기간(start/end) + `hall_label`** — 탭별 필터(진행 중=오늘 포함 기간 / 이번 달·다음 달=해당 월 개장), `poster_url` NULL이면 그라디언트+행사명 폴백 카드 ⑤**내 할 일 = 결재함(§5B approval)·서류 마감(M6)·옥션(M15)·정산(M9) 집계 API 조합** — 프론트 개별 호출 조합 대신 **신규 통합 API `GET /api/home/todos` 계약 제안**: 응답 `{ total: number, items: [{ type: 'approval'|'document'|'auction'|'settlement'|'system', title, target, dueDate?, dday?, severity: 'normal'|'warning'|'overdue', route }] }` — 역할(JWT)별 서버 사이드 구성·기한 임박순 정렬·최대 6건+total(백엔드 kintex-backend-dev 소관, 계약만 정의) ⑥공지 = §5B notice 최근 5건(`/work/notice` 목록 API) ⑦빠른 작업 = 역할별 정적 정의(라우트 레지스트리 — API 불필요) ⑧최근 활동 = 기존 알림/이벤트 피드 API 재사용(SCR-47 알림센터와 동일 원천, 최근 5건) ⑨워크스페이스 = 기존 워크스페이스(참여 행사) 데이터. 미연동 지표는 SCR-02 원칙대로 샘플 표기.
|
||
- **접근성·반응형·국제화**: 1440 기준, 태블릿 본문 2열→1열, 모바일은 SCR-M3(모바일 홈)로 분기. 라이트/다크 토큰(CSS 변수 주입·하드코딩 hex 금지). i18n **`home.` 네임스페이스** 전제(예 `home.greeting`·`home.kpi.*`·`home.showcase.*`·`home.todo.*`·`home.notice.more`·`home.workspace.empty`). **이모지 금지 — 전 아이콘 선 SVG**(stroke, `fill:none`). 캐러셀 자동재생은 일시정지 컨트롤 제공·`prefers-reduced-motion` 준수, 캘린더 점유는 색 외 텍스트/패턴 병기, KPI·리스트 `aria-label`, 포커스 링 `primary-600` 2px, 명도 대비 WCAG AA 이상.
|
||
- **Stitch 프롬프트**:
|
||
|
||
```
|
||
A post-login landing home dashboard for "KINTEX AI 전시관리", a Korean B2B exhibition management web app, using the "Precision Enterprise AI" design system. Desktop 1440px, light theme, primary blue #0066B3, AI accent purple #6D4AFF, backgrounds #F9FAFB, white cards with 1px #E4E7EC borders, success green #0E8A5F, warning amber #B45309, Korean sans-serif (Pretendard style), 8px card radius, dense professional enterprise tone. All UI text in Korean. NO emojis — use thin line (stroke) SVG icons only. The page sits inside an app shell: a fixed 240px left sidebar with an event switcher and vertical menu, a slim 48px top utility bar with breadcrumb, notification bell and a countdown chip "개장 D-31", AND a thin 36px bottom status FOOTER spanning the content width with left-aligned copyright "© 2026 KINTEX. All rights reserved." and right-aligned items: a small green status dot with label "시스템 정상", an app version chip "v2.1.2", and a link "고객지원". IMPORTANT — DENSE LAYOUT: the page must be completely filled with content, NO large empty areas, compact 12-column grid, minimal vertical gaps (24px) between sections, tight card padding. Main content top: a single compact row combining a greeting "안녕하세요, 김주최님" with a date and a role badge on the left, and 4 KPI stat tiles with left color accents on the right of the SAME row — "진행 중 전시 3", "오늘 체크인 1,240", "임박 행사 D-6" (amber), "미결 결재 5" (blue). Below: a full-width image CAROUSEL of exhibition promo banners, constrained to about 240px height (NOT a tall hero), with left/right arrow controls, dot indicators, and a slide title, subtitle and a CTA button. Directly below the carousel, a full-width "진행 중·다가오는 전시" SHOWCASE section: a section header row with the title, a small segmented tab control "진행 중 | 이번 달 | 다음 달" ("진행 중" selected) and a "전체 보기" link on the right; under it a HORIZONTAL SCROLLING RAIL of 8+ exhibition poster cards (about 300px tall total) with left/right scroll arrow buttons at the rail edges — each card shows a portrait-ratio (2:3) exhibition poster image on top and below it the event name (2-line ellipsis), dates, hall label like "제2전시장 홀7", a status badge "진행중" or "예정", and a D-day chip like "D-12"; one or two cards have NO poster and instead show a blue gradient placeholder with the event name in white typography as fallback. Below the showcase rail, a two-column body: left 8/12 a "전시 일정" card containing a FULL MONTH CALENDAR GRID (6 weeks × 7 columns) with a weekday header row "일 월 화 수 목 금 토" (Sunday red, Saturday blue), a toolbar with "이전 / 다음 / 오늘" and the current month title, today's cell highlighted; each day cell shows exhibition events as small colored status dots with title chips, and MULTI-DAY exhibitions appear as horizontal event BARS spanning across the dates they occupy (with a "+2" more indicator on busy days) — like a Google-Calendar-style month view. Above the calendar grid, a SEGMENTED control filter whose options are DYNAMIC (data-driven from a hall master table, not hardcoded): the first option "전체" (selected by default) followed by one segment per exhibition center — currently "제1전시장(1관)" and "제2전시장(2관)", but drawn as a variable count (2 + N, extensible to 3관/4관 in future) — which filters the calendar events and the list below by exhibition-hall complex. Beneath the calendar, a list of this-week/ongoing exhibitions with hall, dates, status badges and D-day chips. Right 4/12 a vertical stack of FOUR cards that together match the height of the left column: (1) at the TOP a "내 할 일" (my tasks) card with a count badge "7" in the header, listing role-based task rows — each row has a small colored status dot, a task name, a target and a D-day/due chip, e.g. "결재 대기 · 부스 설계 승인 · A-102 · D-1" (amber), "신고서류 제출 · 전기안전 신고 · D-3" (amber), "홀 배정 확정 대기 · 2026 로보월드", "옥션 낙찰 선정 · 부스 시공 · D-5", and a "전체 보기" link; (2) a "공지사항" card listing 5 recent notices with dates and a NEW badge and a "더보기" link at the bottom; (3) a "빠른 작업" card with a 2×3 grid of shortcut buttons, each a thin line SVG icon with a short Korean label like "배치 에디터, 참가업체 초대, 서류 워크플로, 정산, 공지 작성, 통합검색"; (4) a "최근 활동" card with a compact timeline of 5 recent activity rows, each a small colored status dot, a short Korean summary like "부스 설계 승인됨 · A-102" and a relative time "2시간 전", with a "전체 보기" link. At the very bottom of the content, a full-width "내 행사 워크스페이스" section with a grid of event workspace cards, each showing event name, period, hall, a role badge and a D-day chip, clickable to enter that event. Every empty state in this design shows a message plus an action button (never a blank area). Dense, data-rich, professional B2B dashboard aesthetic with no wasted vertical space.
|
||
```
|
||
|
||
---
|
||
|
||
### SCR-02 주최자 대시보드 (히어로: D-데이 마일스톤 타임라인)
|
||
|
||
- **대상**: 주최자 · **진입 경로**: 로그인 → 행사 선택 (주최자 기본 홈)
|
||
- **레이아웃**:
|
||
1. 상단 행사 헤더: 행사명 "2026 스마트팩토리 코리아", 기간·홀(홀7), 대형 카운트다운 "개장까지 D-31"
|
||
2. **히어로 — 마일스톤 타임라인 (가로 전폭)**: D-150 홀 배정 → D-30 사전업무협의 → D-25 유틸리티 신청 마감 → D-7 신고서류 제출 → D-0 개장. 완료 노드는 녹색 체크, 현재 구간은 파란 진행 바, 임박 노드는 주황 펄스. 각 노드 아래 카드에 잔여 항목 수("신고서류 3/7 완료")
|
||
3. KPI 카드 4개: 참가업체 신청 128/160 · 부스 배치 확정률 92% · 유틸리티 신청 완료 74% (D-25 임박 경고) · 규정 위반 미해결 5건
|
||
4. 좌측 2/3: 참가업체 현황 테이블(부스번호, 업체명, 설계 상태 배지, 유틸리티 상태, 예상 사진 썸네일) / 우측 1/3: 알림 피드(승인·반려·마감 이벤트) + "홀 전경 조감(S7)" 미니 이미지 카드
|
||
- **상태**: 로딩 — KPI 스켈레톤 · 빈 상태 — 참가업체 0명 시 "초대 링크 발급" CTA · 에러 — 데이터 로드 실패 배너+재시도.
|
||
- **Stitch 프롬프트**:
|
||
|
||
```
|
||
An enterprise dashboard for an exhibition organizer, part of "KINTEX AI 전시관리" B2B web app. Desktop 1440px, light theme, white cards on #F9FAFB, primary blue #0066B3, Korean sans-serif (Pretendard style). All UI text in Korean. Left sidebar 240px with menu items "대시보드, 플로어플랜 스튜디오, 참가업체 관리, 서류·마일스톤, 정산". Main area top: event header "2026 스마트팩토리 코리아 · 킨텍스 제2전시장 홀7 · 2026.08.11–08.14" with a large countdown chip "개장 D-31". Hero section: a horizontal milestone timeline across full width with 5 nodes labeled "D-150 홀 배정", "D-30 사전협의", "D-25 유틸리티 마감", "D-7 신고서류", "D-0 개장" — first two nodes green with check icons, third node highlighted orange with badge "D-6 남음", progress bar in blue between nodes, each node has a small card below showing counts like "신고서류 3/7 완료". Below: 4 KPI stat cards ("참가업체 128/160", "배치 확정률 92%", "유틸리티 신청 74%", "규정 위반 5건" in red). Bottom split: left 2/3 a dense data table of exhibitors with columns 부스번호, 업체명, 설계 상태 (colored status badges 승인/작성중/반려), 유틸리티, 예상 사진 (small photo thumbnails); right 1/3 a notification feed list and a small card with an isometric exhibition hall overview image labeled "홀 전경 조감 · AI 생성". Dense, professional, data-rich layout.
|
||
```
|
||
|
||
---
|
||
|
||
### SCR-03 부스 배치 에디터 (히어로: 드래그앤드롭 + AI 자동배치 + 규정 위반 오버레이) [M2]
|
||
|
||
- **대상**: 주최자 (홀매니저 읽기 전용) · **진입 경로**: 대시보드 → 플로어플랜 스튜디오 / 배치안 비교에서 "이 안 편집"
|
||
- **레이아웃**:
|
||
1. 상단 툴바: 배치안 버전 드롭다운("배치안 B v3"), 저장 상태, **보라색 AI 버튼 "AI 자동배치"**, "규정 검증 실행", "홀 전경 생성(S7)", 공유
|
||
2. 좌측 도구 패널(240px): 부스 팔레트(기본 3×3m / 프리미엄 6×3m / 아일랜드), 시설 요소(무대·라운지·주출입구), 레이어 토글(트렌치 그리드 / 기둥·셔터·비상구 / 위반 오버레이)
|
||
3. **중앙 캔버스(다크 `#1C2536`)**: 홀7 도면(126×90m, 축척 표시) 위 부스 폴리곤 드래그앤드롭. 부스는 파란 채움+부스번호, 선택 시 핸들. 트렌치 그리드는 점선, 비상구는 녹색 아이콘. **위반 오버레이**: 통로 폭 미달 구간 빨간 반투명 밴드 + 번호 핀, 바닥하중 초과 부스 주황 빗금
|
||
4. 우측 패널(360px) 탭 2개: [속성] 선택 부스 좌표·크기·타입·배정 업체 / [검증] 위반 목록 카드(핀 번호, 규정 근거 "피난 통로 3m 미만", 심각도, "위치 보기") + 요약 "차단 2 · 경고 3"
|
||
5. 하단 상태 바: 부스 수 486/510 · 판매 면적 · 줌 컨트롤
|
||
- **상태**: AI 자동배치 실행 중 — 캔버스 위 진행 오버레이("제약조건 풀이 중… 복수 안 생성") · 검증 통과 시 녹색 배너 "위반 0건 — 제출 가능" · 빈 캔버스 — "조건을 입력하고 AI 자동배치로 시작하세요" CTA.
|
||
- **Stitch 프롬프트**:
|
||
|
||
```
|
||
A professional floor plan editor screen for exhibition booth layout, in a Korean B2B web app "KINTEX AI 전시관리". Desktop 1440px. All UI text in Korean. Three-column editor layout. Top toolbar: version dropdown "배치안 B · v3", autosave label "저장됨", a distinctive purple #6D4AFF button with sparkle icon "AI 자동배치", outlined buttons "규정 검증 실행" and "홀 전경 생성". Left tool panel 240px on white: booth palette items with small square previews ("기본 부스 3×3m", "프리미엄 6×3m", "아일랜드 부스"), facility items ("무대", "라운지", "주출입구"), and layer toggles with switches ("트렌치 그리드", "기둥·비상구", "위반 오버레이" turned on). Center: large dark navy canvas #1C2536 showing a top-down exhibition hall floor plan (hall outline 126×90m with scale ruler), dozens of small blue booth rectangles arranged in rows with white booth numbers like "A-101", dashed grid lines for floor trenches, green emergency-exit icons on walls; overlay violations: two semi-transparent red bands across an aisle with numbered red pins "1", "2", and one booth hatched in orange with pin "3". Right panel 360px with two tabs "속성 | 검증", showing the 검증 tab: summary chips "차단 2 · 경고 3", a list of violation cards each with pin number, red or orange severity dot, Korean text like "피난 통로 폭 3m 미만 (규정 §4.2)" and a small link "위치 보기". Bottom status bar: "부스 486 / 510 · 판매면적 4,374㎡ · 100%" with zoom controls. Dense engineering-tool aesthetic, light UI chrome around a dark canvas.
|
||
```
|
||
|
||
---
|
||
|
||
### SCR-04 배치안 비교 (S7 홀 전경 조감) [M2+M5]
|
||
|
||
- **대상**: 주최자 · **진입 경로**: AI 자동배치 완료 → "생성된 배치안 비교" / 스튜디오 탭
|
||
- **레이아웃**:
|
||
1. 헤더: "AI 생성 배치안 3건 — 조건: 목표 510부스, 프리미엄 15%, 무대 1" + 조건 수정 버튼
|
||
2. 배치안 카드 3열 그리드: 각 카드에 **S7 아이소메트릭 조감 이미지(AI 생성 라벨+워터마크)**, 지표(부스 수·판매면적·통로 폭 최소값·위반 수), 라디오 선택
|
||
3. 하단 비교 테이블(지표 나란히) + 우측 고정 CTA "이 안으로 편집 시작"
|
||
- **상태**: S7 생성 중 — 카드 이미지 영역 스켈레톤+"조감 생성 중…" · 실패 — 도면 탑뷰 래스터로 대체 표시 + 재시도.
|
||
- **Stitch 프롬프트**:
|
||
|
||
```
|
||
A comparison screen showing 3 AI-generated exhibition floor layout options, Korean B2B web app, desktop 1440px, light theme, blue #0066B3 primary, purple #6D4AFF for AI labels. All UI text in Korean. Header: title "AI 배치안 비교", subtitle "조건: 목표 510부스 · 프리미엄 15% · 무대 1개소", outlined button "조건 수정". Three large cards in a row, each card contains: an isometric 3D-style rendering of an exhibition hall filled with rows of white booths (bird's-eye view), a small purple chip "AI 생성" and a faint diagonal watermark "AI 생성 예상 이미지" on the image, card title "배치안 A/B/C", metric rows "부스 510개 · 판매면적 4,420㎡ · 최소 통로폭 3.2m · 위반 0건" (option C shows "위반 2건" in red), and a radio button "선택". Below the cards: a compact comparison table with the same metrics side by side. Bottom right: primary blue button "이 안으로 편집 시작". Clean, decision-focused layout.
|
||
```
|
||
|
||
---
|
||
|
||
### SCR-05 참가업체 부스 홈 (진행 상태 + 마감 리마인더)
|
||
|
||
- **대상**: 참가업체 · **진입 경로**: 초대 링크 수락 → 기본 홈
|
||
- **레이아웃**:
|
||
1. 부스 요약 헤더: "부스 A-102 · 6×3m 독립부스 · 홀7" + 미니 위치 맵(홀 도면에 내 부스 하이라이트)
|
||
2. **진행 스테퍼(신청→승인→시공→검수)**: 현재 "설계 승인 대기" 강조
|
||
3. 할 일 카드 리스트(D-데이 칩): "유틸리티 신청 마감 D-6 — 인터넷은 현장 추가신청 불가" (warning 강조) / "장치업체 초대" / "설계 컨펌 대기 1건"
|
||
4. 내 부스 예상 사진 카드(S1 최신본, AI 고지) + "설계 스튜디오 열기" / "유틸리티 신청" 두 CTA
|
||
5. 신청·견적 요약: 전기 5kW ₩275,000 · 인터넷 1회선 ₩150,000 · 상태 배지
|
||
- **상태**: 설계 전 빈 상태 — S1 자리 일러스트+"설계를 시작하면 시공 예상 사진이 생성됩니다" · 마감 초과 — 할 일 카드 빨강 잠금("마감 경과 — 주최자 문의").
|
||
- **Stitch 프롬프트**:
|
||
|
||
```
|
||
A home screen for an exhibitor company in a Korean exhibition management web app, desktop 1440px, light theme, blue #0066B3, Korean sans-serif. All UI text in Korean. Top header card: "부스 A-102 · 독립부스 6×3m · 홀7" with company name "(주)한빛로보틱스", and a small floor-plan thumbnail with one booth highlighted in blue. Below: a horizontal 4-step progress stepper labeled "신청 → 승인 → 시공 → 검수", second step "승인" active in blue with note "설계 승인 대기중". Middle section "해야 할 일": vertical task cards each with a D-day chip — an orange-highlighted card "유틸리티 신청 마감 D-6" with warning subtext "인터넷 회선은 현장 추가 신청이 불가합니다", a normal card "장치업체 초대하기", a card "설계 컨펌 대기 1건". Right column: a large card titled "내 부스 예상 사진" containing a photorealistic exhibition booth render with faint watermark text "AI 생성 예상 이미지 — 실제 시공 결과와 다를 수 있음", below it two buttons: primary "부스 설계 스튜디오" and outlined "유틸리티 신청". Bottom: a compact cost summary table "전기 5kW ₩275,000 · 신청됨", "인터넷 1회선 ₩150,000 · 작성중" with status badges. Friendly but professional B2B tone.
|
||
```
|
||
|
||
---
|
||
|
||
### SCR-06 부스 설계 스튜디오 (히어로: 스펙 입력 → 나노바나나 4샷 그리드 + before/after 슬라이더) [M3+M5]
|
||
|
||
- **대상**: 참가업체(조립부스 옵션·컨펌), 장치업체(독립부스 편집) · **진입 경로**: 부스 홈 → 설계 스튜디오
|
||
- **레이아웃**:
|
||
1. 상단: 부스 컨텍스트("A-102 · 독립부스 6×3m · 높이 제한 5m"), 설계 버전 드롭다운, **보라 버튼 "예상 사진 생성"**
|
||
2. 좌측 스펙 패널(360px, 아코디언): ① 기본(업종, 전시품, 예산) ② 레이아웃 존(안내데스크/시연존/상담존/창고 토글+비율) ③ 구조(벽체 높이 슬라이더 max 5m, 간판 문구 입력, 트러스/리깅 토글 — 켜면 인라인 경고 "리깅 6.5~8.5m: 구조계산서 D-7 제출 필요") ④ 자재(마감 선택, 방염 체크 필수) ⑤ 조명(주간/야간 프리셋 — M4a 연동)
|
||
3. **중앙 히어로 — 샷 그리드 2×2**: S1 부스 정면 / S2 야간 점등 / S3 통로 뷰 / S4 부스 내부. 각 타일에 샷 라벨+AI 워터마크, 클릭 시 라이트박스
|
||
4. 그리드 하단 — **Before/After 슬라이더(S5)**: 좌 "시공 전(빈 홀 바닥)" ↔ 우 "시공 후(S1)", 중앙 드래그 핸들
|
||
5. 우측 하단 고정 바: 규정 사전 검증 요약 칩("통과 11 · 경고 1") + "장치업체에 컨펌 요청" CTA. 컨펌 모달에는 "시공 기준은 도면입니다" 동의 체크(필수)
|
||
- **상태**: 생성 중 — 타일별 스켈레톤+진행 배지("S2 생성 중… 평균 40초"), S3·S4는 온디맨드("클릭해 생성") · 실패 — 타일 내 재시도 · 한글 간판 오탈자 검수 실패 시 타일에 주황 배지 "간판 문구 확인 필요".
|
||
- **Stitch 프롬프트**:
|
||
|
||
```
|
||
A "booth design studio" screen in a Korean exhibition-tech web app where users input booth specs and see AI-generated construction preview photos. Desktop 1440px, light theme, blue #0066B3 primary, purple #6D4AFF for AI actions. All UI text in Korean. Top bar: context text "부스 A-102 · 독립부스 6×3m · 높이 제한 5m", version dropdown "설계 v2", and a prominent purple button with sparkle icon "예상 사진 생성". Left panel 360px: accordion form sections in Korean — "기본 정보" (업종 select showing "로봇/제조", 예산 input), "공간 구성" (toggle chips 안내데스크/시연존/상담존/창고 with percentage sliders), "구조" (벽체 높이 slider at 4.2m with max mark "5m 제한", text input "간판 문구" filled with "한빛로보틱스", a toggle "리깅 사용" ON with an inline orange warning "구조계산서 D-7 제출 필요"), "자재" (finish swatches, a required checkbox "방염 자재 사용 확인"), "조명" (segmented control 주간/야간). Center hero: a 2×2 grid of large photorealistic booth preview images labeled with small chips "S1 부스 정면", "S2 야간 점등", "S3 통로 뷰", "S4 부스 내부" — S2 shows a dramatic night-lit booth; each image has a faint watermark "AI 생성 예상 이미지"; the S4 tile is an empty placeholder with a button "클릭해 생성". Below the grid: a wide before/after comparison slider — left half shows an empty concrete exhibition hall floor, right half the finished booth photo, with a draggable vertical handle in the middle and labels "시공 전 / 시공 후". Bottom right sticky bar: validation summary chips "통과 11 · 경고 1" and a primary button "장치업체에 컨펌 요청". Visual-first, image-dominant layout.
|
||
```
|
||
|
||
---
|
||
|
||
### SCR-07 유틸리티 배선 뷰 (히어로: 트렌치 오버레이 + 자동 견적 패널) [M4a+M4b]
|
||
|
||
- **대상**: 참가업체(신청), 장치업체(검토) · **진입 경로**: 부스 홈 → 유틸리티 신청
|
||
- **레이아웃**:
|
||
1. 상단: 부스 컨텍스트 + 마감 배너 "유틸리티 신청 마감 D-6 · 인터넷은 현장 추가신청 불가" (warning) + 유틸리티 탭(전기 / 네트워크·전화 / 급배수·압축공기)
|
||
2. 좌측 패널(320px) — [전기 탭] 기기 목록 빌더: 행 추가(기기명, 수량, 소비전력) → 합산 "필요 용량 4.8kW → 신청 5kW" + 분전반 자동 산출("50A 1식"). [네트워크 탭] 단말 유형 선택 후 "도면에서 위치 클릭" 안내
|
||
3. **중앙 캔버스(다크)**: 부스+주변 트렌치 그리드 탑뷰. 최근접 트렌치→부스 내 단말까지 **자동 배선 경로** — 전기 빨강 실선, 네트워크 파랑 파선, 급배수 녹색 점선. 경로 위 라벨(kW·회선). 범례 우상단. 단말 위치는 드래그로 미세 조정 → 경로 실시간 재계산
|
||
4. 우측 **자동 견적 패널(340px)**: 항목 라인 — "전기 220V 단상 5kW ₩275,000", "분전반 50A 추가 1식 ₩100,000", "인터넷 유선 1회선 ₩150,000", "급배수 1구 ₩150,000" → 합계 ₩675,000. 하단 고지 "공시가 기준, 최종가는 킨텍스 확정" + CTA "위치표시도 생성 및 신청"
|
||
- **상태**: 경로 계산 중 — 캔버스 경로 펄스 애니메이션 · 트렌치 데이터가 가정 그리드일 때 캔버스 좌상단 배지 "가정 트렌치 좌표(실측 대기)" · 마감 경과 — 신청 CTA 비활성+빨강 안내.
|
||
- **Stitch 프롬프트**:
|
||
|
||
```
|
||
A utility wiring planner screen for an exhibition booth (electricity, network, plumbing) in a Korean B2B web app. Desktop 1440px. All UI text in Korean. Top: context "부스 A-102 · 홀7", an orange warning banner "유틸리티 신청 마감 D-6 — 인터넷 회선은 현장 추가 신청 불가", and tabs "전기 | 네트워크·전화 | 급배수·압축공기" with 전기 active. Left panel 320px: a device list builder titled "사용 기기 입력" with table rows (기기명 "로봇 시연장비", 수량 2, 소비전력 1.5kW; "LED 스포트 조명" 6개 0.3kW; "노트북/모니터" 3개), a computed summary card "필요 용량 4.8kW → 신청 용량 5kW" and "분전반 50A × 1식 자동 산출". Center: dark navy canvas #1C2536 with a top-down technical drawing of one booth rectangle and surrounding floor trench grid (dashed gray lines); an auto-routed solid red line from the nearest trench point to a power outlet symbol inside the booth labeled "5kW", a dashed blue line to a LAN port symbol labeled "유선 1회선", a dotted green line to a water symbol; a legend box top-right "전기 / 네트워크 / 급배수"; small badge top-left "가정 트렌치 좌표". Right panel 340px titled "자동 견적": line items "전기 220V 단상 5kW — ₩275,000", "분전반 50A 추가 — ₩100,000", "인터넷 유선 1회선 — ₩150,000", "급배수 1구 — ₩150,000", divider, bold total "합계 ₩675,000", fine print "공시가 기준이며 최종 금액은 킨텍스 확정 시 안내됩니다", and a full-width primary blue button "위치표시도 생성 및 신청". Precise engineering-CAD feel with a clean commerce-style quote panel.
|
||
```
|
||
|
||
---
|
||
|
||
### SCR-08 유틸리티 신청 요약 & 위치표시도 [M4b]
|
||
|
||
- **대상**: 참가업체 · **진입 경로**: SCR-07 → "위치표시도 생성 및 신청"
|
||
- **레이아웃**:
|
||
1. 스테퍼: 배선 설계 → **신청 확인** → 제출 완료
|
||
2. 좌측: **자동 생성 위치표시도 미리보기**(A4 문서 프레임 — 부스 도면+배선+치수+범례, "수기 작도 대체 공식 서식" 캡션) + 다운로드(PDF)
|
||
3. 우측: 신청 내역 요약 테이블(항목·수량·금액·공급 시점 "장치 마지막 날 오후"), 신청자 정보 확인, 고지 체크 2개("마감 후 변경 불가 확인", "공시가 기준 동의") → CTA "신청 제출"
|
||
4. 제출 완료 화면: 녹색 체크 + 접수번호 + "주최자 사무국/킨텍스 릴레이 안내"(kxwp 수동 릴레이 안내문)
|
||
- **상태**: 문서 생성 중 스켈레톤 · 체크 미완료 시 CTA 비활성 · 제출 실패 — 재시도+임시저장 안내.
|
||
- **Stitch 프롬프트**:
|
||
|
||
```
|
||
A submission review screen for exhibition utility orders in a Korean web app, desktop 1440px, light theme, blue #0066B3. All UI text in Korean. Top: 3-step stepper "배선 설계 → 신청 확인 → 제출 완료" with step 2 active. Left half: a document preview card showing an A4-format technical location diagram — booth outline with red/blue/green wiring paths, dimension labels in meters, a legend, document title "유틸리티 시공 위치표시도 (자동 생성)" — with a caption "수기 작도를 대체하는 공식 제출 서식입니다" and an outlined button "PDF 다운로드". Right half: a summary panel titled "신청 내역" with a table (항목, 수량, 금액): "전기 5kW ₩275,000", "분전반 50A ₩100,000", "인터넷 유선 ₩150,000", "급배수 1구 ₩150,000", total row "₩675,000", info row "공급 시점: 장치 마지막 날 오후"; applicant info block; two required checkboxes "마감(D-25) 이후 변경이 불가함을 확인했습니다" and "공시가 기준 견적에 동의합니다"; large primary button "신청 제출" (disabled style until checked). Clean document-workflow layout.
|
||
```
|
||
|
||
---
|
||
|
||
### SCR-09 장치업체 규정 검증 리포트 (제출 전 자동 플래깅) [M3]
|
||
|
||
- **대상**: 장치업체 · **진입 경로**: 설계 스튜디오 → "규정 검증" / 도면 업로드
|
||
- **레이아웃**:
|
||
1. 헤더: 부스·설계 버전 + 결과 요약 배너 — "차단 1 · 경고 2 · 통과 14" (차단 존재 시 빨강)
|
||
2. 업로드 존: 기존 도면(PDF/이미지) 업로드 → 비전 추출 시 결과에 **"참고용 검증" 라벨** 필수
|
||
3. 좌측: 검증 항목 체크리스트(그룹: 높이·리깅·복층·방염·금지작업) — 각 행: 상태 아이콘, 규정 원문 요약("장치물 높이 5m 이하"), 측정값("5.4m — 0.4m 초과"), 심각도
|
||
4. 우측: 도면 미니 뷰어 — 선택 항목의 위반 위치 하이라이트. 리깅 항목에는 자동 부속 플래그 "구조계산서 D-7 제출 필요" 칩
|
||
5. 하단: 면책 문구("본 검증은 사전 필터이며 최종 승인은 킨텍스·구조기술사 판단") + 룰셋 버전 표기 + CTA "검증 리포트 첨부하여 제출" (차단 존재 시 비활성)
|
||
- **상태**: 검증 실행 중 프로그레스 리스트 · 도면 추출 실패 — "치수 인식 불가 — 수동 입력으로 진행" 안내.
|
||
- **Stitch 프롬프트**:
|
||
|
||
```
|
||
A compliance validation report screen for exhibition booth construction drawings, Korean B2B web app, desktop 1440px, light theme. All UI text in Korean. Header: "부스 A-102 · 설계 v2 · 규정 검증 결과" with a red summary banner "차단 1건 · 경고 2건 · 통과 14건 — 차단 항목 해결 전 제출 불가". Below header, a small file-upload zone "기존 도면 업로드 (PDF/이미지)" with note chip "참고용 검증". Left 60%: a grouped checklist titled with group headers "높이 규정, 리깅, 복층, 방염, 금지작업"; each row has a status icon (red X, orange !, green check), rule text like "장치물 높이 5m 이하", measured value "측정 5.4m — 0.4m 초과" in red, and severity tag "차단"; one rigging row shows an extra purple chip "구조계산서 D-7 제출 필요". Right 40%: a small drawing viewer card showing a booth elevation drawing with the violating top section highlighted in red and a dimension callout "5.4m". Bottom: gray disclaimer text "본 검증은 사전 필터이며, 최종 승인은 킨텍스 및 구조기술사의 판단에 따릅니다 · 룰셋 v1.0", and a disabled primary button "검증 리포트 첨부하여 제출". Audit-report aesthetic, high information density.
|
||
```
|
||
|
||
---
|
||
|
||
### SCR-10 홀매니저 승인 큐 (히어로: AI 사전심사 플래그) [M2+M3+M6]
|
||
|
||
- **대상**: 홀매니저 · **진입 경로**: 킨텍스 내부 계정 로그인 → 기본 홈
|
||
- **레이아웃**:
|
||
1. 헤더: 담당 홀 필터 칩(홀6·홀7·홀8) + 검색 + 요약 KPI(대기 23 · 오늘 마감 5 · AI 차단 플래그 4)
|
||
2. **히어로 — 승인 큐 테이블(전폭)**: 열 = 행사/부스, 유형(부스 배치도·장치 도면·유틸리티·신고서류), 제출자, 제출일, D-데이, **AI 사전심사 열**(칩: "통과" 녹 / "경고 2" 주황 / "차단 1" 빨강 — 호버 시 위반 요약 툴팁), 상태, [검수] 버튼. AI 차단 행은 좌측 빨간 엣지 바. 정렬 기본: 차단→마감 임박순
|
||
3. 우측 사이드(접이식): **홀 유틸리티 부하 집계 위젯** — 홀7 전기 신청 총합 게이지(신청 412kW / 경고 임계), 인터넷 회선 수
|
||
- **상태**: 빈 큐 — "검수 대기 항목이 없습니다" · 로딩 — 테이블 행 스켈레톤 · 일괄 처리: 통과 항목 다중 선택 → "일괄 승인" (차단 플래그 항목은 선택 불가).
|
||
- **Stitch 프롬프트**:
|
||
|
||
```
|
||
An approval queue dashboard for a venue hall manager at KINTEX exhibition center, Korean B2B internal tool, desktop 1440px, light theme, blue #0066B3, purple #6D4AFF for AI elements. All UI text in Korean. Header: filter chips "홀6 · 홀7 · 홀8" (홀7 selected), a search input, and 3 KPI chips "검수 대기 23", "오늘 마감 5", "AI 차단 플래그 4" (last one red). Hero: a full-width dense data table with columns 행사/부스, 서류 유형, 제출자, 제출일, 마감, AI 사전심사, 상태, 액션. Rows include: "스마트팩토리 코리아 · A-102 / 장치 도면 / (주)공간디자인 / 07.10 / D-6 / red chip '차단 1' / 검토 대기 / [검수] button" with a red left edge bar; "B-201 / 유틸리티 위치표시도 / 한빛로보틱스 / green chip '통과' / [검수]"; "부스 배치도 v3 / 주최자 / orange chip '경고 2'". AI 사전심사 column uses small colored chips with counts. Checkboxes on rows and a toolbar button "일괄 승인". Right collapsible sidebar: a widget "홀7 유틸리티 부하" with a semicircular gauge showing "전기 신청 412kW", a threshold marker, and a stat "인터넷 128회선". Efficient, triage-oriented enterprise UI.
|
||
```
|
||
|
||
---
|
||
|
||
### SCR-11 홀매니저 검수 상세 (도면 + 위반 오버레이 + 승인/반려)
|
||
|
||
- **대상**: 홀매니저 · **진입 경로**: SCR-10 → [검수]
|
||
- **레이아웃**:
|
||
1. 헤더: 제출물 컨텍스트(행사·부스·유형·버전·제출자) + 이전/다음 큐 이동 화살표
|
||
2. 좌측 70% — 도면 뷰어(다크 캔버스): 제출 도면 + AI 위반 오버레이 토글, 위반 핀 클릭 ↔ 우측 목록 동기 하이라이트. 상단 보조 탭: [도면] [예상 사진(참고용 — 심사 근거 아님 라벨)] [이전 버전 비교]
|
||
3. 우측 30% — 검수 패널: AI 사전심사 요약 카드(플래그 목록, 각 항목에 "확인함" 체크), 협의 이력 스레드(코멘트 입력), 결정 버튼 그룹 — **[승인](녹)** / **[조건부 승인]** / **[반려](빨)** — 반려 시 사유 템플릿 선택+자유 입력 모달
|
||
- **상태**: 모든 차단 플래그에 "확인함" 체크 전 승인 버튼 비활성 · 결정 완료 후 헤더에 결과 배지+다음 항목 자동 이동 토스트.
|
||
- **Stitch 프롬프트**:
|
||
|
||
```
|
||
A document review detail screen for a hall manager inspecting a booth construction drawing, Korean B2B internal tool, desktop 1440px. All UI text in Korean. Header: breadcrumb "승인 큐 > 스마트팩토리 코리아 > 부스 A-102", context chips "장치 도면 v2 · 제출 (주)공간디자인 · 07.10", prev/next arrows. Left 70%: a dark navy #1C2536 drawing viewer showing a booth floor plan and elevation with red violation pins numbered 1–3 and a red highlighted zone, a toggle "AI 위반 오버레이" ON, zoom controls, and tabs above the viewer "도면 | 예상 사진 (참고용) | 버전 비교". Right 30% panel: card "AI 사전심사" listing flags — "1. 장치물 높이 5.4m 초과 — 차단" with a checkbox "확인함", "2. 방염 확인서 누락 — 경고" checked, "3. 리깅 구조계산서 미제출 — 경고"; below, a comment thread "협의 이력" with two short Korean messages and an input field; bottom action group: large green button "승인" (disabled style), gray button "조건부 승인", red outlined button "반려". Split reviewer layout, serious inspection tool tone.
|
||
```
|
||
|
||
---
|
||
|
||
### SCR-12 시각화 갤러리 (S1~S7 렌더 관리) [M5]
|
||
|
||
- **대상**: 참가업체·주최자·장치업체 · **진입 경로**: 부스 홈/스튜디오 → "시각화 갤러리"
|
||
- **레이아웃**:
|
||
1. 헤더: 부스/행사 스코프 전환 + 샷 필터 칩(S1 정면 · S2 야간 · S3 통로 · S4 내부 · S5 Before/After · S6 배선 오버레이 · S7 홀 전경) + 정렬(최신)
|
||
2. 마소너리 이미지 그리드: 카드 = 이미지(워터마크 상시), 샷 배지, 설계 버전 태그("설계 v2"), 생성일, 상태(완료/생성 중/실패). 생성 중 카드는 진행 배지, 실패는 재시도
|
||
3. 라이트박스: 원본 + 메타데이터(생성일·스키마 해시·모델 버전) + 다운로드 + "이 컷 다시 생성". S5는 라이트박스에서 슬라이더로 열림
|
||
4. 상단 고정 안내 바: "생성 이미지는 계약·심사 서류에 사용할 수 없습니다 (시공 기준은 도면)"
|
||
- **상태**: 빈 상태 — "아직 생성된 이미지가 없습니다 — 설계 스튜디오에서 예상 사진을 생성하세요" · 쿼터 도달 — 생성 버튼에 "행사 생성 쿼터 소진" 툴팁.
|
||
- **Stitch 프롬프트**:
|
||
|
||
```
|
||
An AI-render gallery screen for exhibition booth visualizations in a Korean web app, desktop 1440px, light theme, purple #6D4AFF AI accents. All UI text in Korean. Top: scope selector "부스 A-102", filter chips "S1 정면 · S2 야간 · S3 통로 · S4 내부 · S5 비교 · S6 배선 · S7 홀 전경", sort dropdown "최신순". A slim persistent info bar: "AI 생성 이미지는 계약·심사 서류에 사용할 수 없습니다 — 시공 기준은 도면입니다". Main: a masonry grid of image cards — photorealistic booth photos (front view, night lighting view, aisle view), one top-down wiring overlay diagram with red/blue/green lines, one isometric hall overview; every image has a faint watermark "AI 생성 예상 이미지"; each card shows a shot badge like "S2 야간", version tag "설계 v2", date "07.11", and status — one card is a loading skeleton with badge "생성 중… 평균 40초", another shows a red "실패" state with a "다시 생성" button. Visual, image-forward gallery with strict labeling.
|
||
```
|
||
|
||
---
|
||
|
||
### SCR-13 경영분석 대시보드 (히어로: 매출·가동률 지표 + 추세 차트) [M16 BI]
|
||
|
||
- **대상**: 주최자·킨텍스 운영사(관점 토글로 참가업체 ROI 병행) · **진입 경로**: 주최자 콘솔/운영 대시보드 사이드바 → "경영분석" (탭 열기)
|
||
- **모듈·우선순위**: M16 경영분석 BI · **P1**(PLANNING §5A M16·M16-1). BI는 두 관점을 격리 제공 — **① 운영사(킨텍스) 관점 수익성/ROI**(기본)와 **② 참가업체 관점 ROI**(리드·매칭·부스 비용 대비 성과). 상단 관점 토글로 전환하며 권한으로 분리(참가업체는 자기 부스 범위만).
|
||
- **레이아웃 (위→아래)**:
|
||
1. 헤더: 타이틀 "경영분석" + 부제 "킨텍스 운영 수익성 · 참가업체 인사이트", 우측 관점 토글([운영사] / [참가업체]), 기간 셀렉트("이번 행사 / 최근 90일 / 연간"), 우측 상단 "PDF 내보내기" · "Excel 내보내기" 버튼
|
||
2. **KPI 카드 3~4개(상단 밴드)**: [운영사 관점] 홀 가동률 78% · 매출(임대+유틸+옥션 수수료) ₩1.24B · ㎡당 수익(RevPAD) · 참가사 리텐션(재참가율) — 각 카드에 전기 대비 델타(▲/▼)와 §1-4 상태색. [참가업체 관점] 총 방문(부스) · 평균 체류시간 · 매칭 성공률(AiLabel "AI 매칭") 등
|
||
3. **히어로 — 추세 차트(2/3 폭)**: "매출 구성 추이"(운영사) 또는 "참가업체 vs 바이어 매칭 추이"(참가업체) — **Recharts `LineChart`/`AreaChart`**(다계열), 기간 셀렉트 연동. AI 예측 구간은 점선 + AiLabel "AI 수요예측"
|
||
4. 우측(1/3) — **부문 분석**: "홀·업종별 구성" 가로 막대 리스트(Recharts `BarChart` 또는 progress 바) — 기술/IT 45% · 제조 28% · 헬스케어 15% · 유통 12%
|
||
5. 하단(전폭) — **성과 테이블**: [운영사] 홀·행사별 P&L(행사, 홀, 매출, 공헌이익, 마진율, 상태 §1-4 StatusBadge) / [참가업체] 상위 참가사(업체명, 부스 위치, 방문 수, 매칭 수, 성과 배지 "우수/양호/보통/검토필요"). 지브라 스트라이프·sticky 헤더(§1-4)
|
||
- **핵심 컴포넌트/상태**: KPI 카드(전기 대비 델타 칩) · Recharts 차트(라이트/다크 테마 토큰 연동, tabular numerals) · StatusBadge/성과 배지 재사용 · AiLabel(수요예측·이상탐지·매칭). 로딩 — KPI·차트 스켈레톤 · 빈 상태 — "집계할 데이터가 없습니다 — 행사 종료 후 지표가 채워집니다" · 에러 — 카드별 재시도.
|
||
- **데이터 원천 (실/샘플 경계면)**: **대부분 샘플 시연.** M16 BI 데이터마트(스타 스키마 FactBooking·FactSettlement·FactUtility·FactAuction·FactVisitor + Dim*)·`KpiSnapshot` 집계 파이프라인은 **DA 후속 트랙 미구축**이므로(PLANNING §5A M16-1) 집계·예측·RevPAD·리텐션·P&L·매칭 지표는 샘플로 시연한다. 원천 목록(행사·부스·정산 레코드)은 실 API 부분 가능하나 **BI 지표는 집계 API 부재 → 샘플**(SCR-02 주최자 대시보드 KPI와 동일 원칙).
|
||
- **Stitch 프롬프트**:
|
||
|
||
```
|
||
An enterprise Business Intelligence analytics dashboard for a venue operator, part of "KINTEX AI 전시관리" B2B web app. Desktop 1440px, light theme, white cards on #F9FAFB, primary blue #0066B3, purple #6D4AFF for AI elements, Korean sans-serif (Pretendard style). All UI text in Korean. Left sidebar 240px (Dashboard, 전시 일정, 홀 운영, 경영분석 highlighted). Main top header: title "경영분석" with subtitle "킨텍스 운영 수익성 · 참가업체 인사이트", a perspective toggle "[운영사] / [참가업체]" (운영사 selected), a period select "이번 행사 ▾", and two outlined buttons "PDF 내보내기" and "Excel 내보내기". Below, a bento grid. Top band: 3 KPI stat cards — "홀 가동률 78%" with a green ▲ delta chip "+4%p", "매출 ₩1.24B" with green ▲ "+12.5%", "㎡당 수익(RevPAD) ₩58,200" — each card with a small icon and tabular-number figure. Middle row: a large chart card (2/3 width) titled "매출 구성 추이" showing a multi-series line/area chart in blue and slate with a dashed forecast segment on the right end labeled with a small purple chip "AI 수요예측", plus a period dropdown "최근 90일"; a right card (1/3) titled "업종별 구성" with horizontal bar rows "기술·IT 45%", "제조 28%", "헬스케어 15%", "유통 12%" using blue bars of varying widths and mono-number percentages. Bottom (full width): a dense data table "홀·행사별 손익(P&L)" with columns 행사, 홀, 매출, 공헌이익, 마진율, 상태 — status pill badges (녹색 "우수", 파랑 "양호", 주황 "보통", 빨강 "검토필요"), zebra striped rows, sticky header. Data-rich executive analytics aesthetic, clear number typography.
|
||
```
|
||
|
||
- **라우트**: 운영사(테넌트 전역 크로스-행사) `/analytics` · 행사 P&L 드릴다운 `/events/:eventId/analytics` · 참가업체 관점 `/events/:eventId/booths/:boothId/analytics`. MDI 적용(주최자·운영 — §2.7-6).
|
||
|
||
---
|
||
|
||
### SCR-14 홀 현장운영 대시보드 (혼잡·에너지·주차) [M14]
|
||
|
||
- **대상**: 홀매니저·킨텍스 운영 · **진입 경로**: 운영 대시보드(`ops.`) 사이드바 → "홀 운영" (행사 진행 중 상시 모니터)
|
||
- **모듈·우선순위**: M14 현장운영 · **P2**(PLANNING §5A M14). 초기 범위는 **M4(전력 부하)·M10(체크인 혼잡) 파생 데이터 + 수기 입력** 결합이며, CCTV/센서/IoT 실시간은 킨텍스 시설 인프라 의존(후속).
|
||
- **레이아웃 (위→아래)**:
|
||
1. 헤더: 타이틀 "홀 현장운영" + 부제 "실시간 시설 모니터링 및 자원 최적화" + 우측 [실시간] / [이력 조회] 토글
|
||
2. **12컬럼 벤토 그리드 — 히어로: 혼잡도 맵(span 8, 높이 500)**: 홀 도면 위 혼잡 히트(홀별 셀 Hall1~5, 임계 홀은 error 하이라이트 "홀3(혼잡)"), 하단 범례(원활 녹 / 보통 주황 / 혼잡 빨강)와 총 추정 인원. 전시장1/전시장2 홀 그룹 셀렉트. **데이터 미연동 시 상단 배지 "센서 미연동 · 체크인(M10) 파생/샘플"**
|
||
3. 우측(span 4) — **에너지·환경**: HVAC 최적화 카드(평균 온도 22.5°C, 전력 부하 4.2MW, 상태 배지 "최적"), 조명존 카드(전시홀 85% / 공용부 100%, 자동 디밍 토글) — 게이지·진행 바
|
||
4. 하단(span 12) — **주차 점유**: 4개 존 카드(존A 지하 98% error / 존B 옥외남측 75% warning / 존C 옥외북측 42% success / 하역장 20%), 각 카드 하단 점유율 바 + "N / 총면수" — iparking 연계 표기
|
||
- **핵심 컴포넌트/상태**: 히트맵(도면 오버레이·범례) · 게이지/진행 바(Recharts `RadialBar` 또는 progress) · 존 점유 카드(임계 상태색 §1-4) · 이상 시 알림 배지. 로딩 — 위젯 스켈레톤 · 빈 상태 — "진행 중인 행사가 없습니다 — 운영 데이터는 개장 시 활성화됩니다" · 에러 — 위젯별 "데이터 원본 연결 안 됨" 안내.
|
||
- **데이터 원천 (실/샘플 경계면)**: **샘플 시연 중심.** CCTV·혼잡 센서·HVAC/전력계·iparking·조명 IoT는 **미연동**(PLANNING §5A M14 "센서·IoT 연동은 킨텍스 시설 인프라 의존"). 혼잡은 M10 체크인 파생, 전력은 M4 신청 부하 집계로 **해당 모듈 구현 후 실 데이터 가능**하나 현 시점 위젯은 샘플. 하드웨어 연동 착수 금지(§2.6 갱신).
|
||
- **Stitch 프롬프트**:
|
||
|
||
```
|
||
A real-time hall operations dashboard for a KINTEX exhibition-center facility manager, Korean B2B internal tool, desktop 1440px, light theme, blue #0066B3, Korean sans-serif. All UI text in Korean. Left sidebar 240px (홀 운영 highlighted). Header: title "홀 현장운영" with subtitle "실시간 시설 모니터링 및 자원 최적화" and a segmented toggle "[실시간] / [이력 조회]". A 12-column bento grid. Hero card (span 8, tall ~500px): "실시간 혼잡도 히트맵" — a top-down hall layout with a 5-cell grid labeled Hall 1–5, soft colored heat blobs (green/orange/red) blurred over it, Hall 3 highlighted red with label "홀3 (혼잡)", a hall-group select "홀 1-5 (제1전시장) ▾", a small top-left badge "센서 미연동 · 체크인 파생/샘플", and a bottom legend "원활 / 보통 / 혼잡" plus "총 추정 인원 14,250". Right column (span 4): a "HVAC 최적화" card showing "22.5°C 평균온도", a progress bar, "전력 부하 4.2MW", and a green status pill "최적"; below it a "조명 존" card with rows "전시홀 85%", "공용부 100%" with bars and an "자동 디밍" toggle switch. Bottom (span 12): "주차 점유 현황" with 4 zone cards — "존A(지하) 98%" red, "존B(옥외남) 75%" amber, "존C(옥외북) 42%" green, "하역장 20%", each with an occupancy bar and "1,176 / 1,200" style counts. Dense real-time operations monitoring aesthetic.
|
||
```
|
||
|
||
- **라우트**: `/ops/operations` (테넌트·운영 전역, 홀매니저) · 행사 진행 중 스코프 `/events/:eventId/operations`. MDI 적용(홀매니저 — §2.7-6).
|
||
|
||
---
|
||
|
||
### SCR-15 전시 일정 관리 (행사 캘린더 + 홀 가동) [M1·M6]
|
||
|
||
- **대상**: 주최자·킨텍스 운영사 · **진입 경로**: 콘솔/운영 대시보드 사이드바 → "전시 일정"
|
||
- **모듈·우선순위**: M1 홀 배정·행사일정(가용성 캘린더) + M6 마일스톤 · **P1**. 방문객용 세션 편성이 아니라 **운영사·주최자 관점의 전 행사 일정·홀 점유 관리 화면**(§2.6 갱신 재분류).
|
||
- **레이아웃 (위→아래)**:
|
||
1. 헤더: 타이틀 "전시 일정" + 부제 "킨텍스 전 홀 행사 일정 관리·모니터링"
|
||
2. 필터/컨트롤 바: 홀 셀렉트(전체 홀 1-10 / 홀별) · 카테고리(전시/문화·예술/무역·산업/기술) · 상태(예정/진행중/종료) + 우측 [목록] / [캘린더] 뷰 토글
|
||
3. **좌측 2/3 — 행사 리스트**: 행사 카드(포스터 썸네일, 행사명, 상태 배지 §1-4 "진행중/예정/종료", 카테고리, 기간, 배정 홀, 추정 인원, [상세 편집]·[반입/물류 보기] 버튼)
|
||
4. 우측 1/3 — **미니 캘린더**(월 이동, 오늘·행사일 하이라이트) + **홀 가동률 요약**(홀1-3 85% · 홀4-5 40% 진행 바)
|
||
- **핵심 컴포넌트/상태**: 행사 카드 리스트·미니 캘린더(월 그리드)·가동률 진행 바·StatusBadge 재사용·DdayChip(개장 임박). 로딩 — 카드 스켈레톤 · 빈 상태 — "등록된 행사가 없습니다 — 새 행사를 생성하세요" CTA · 에러 — 리스트 로드 실패 배너.
|
||
- **데이터 원천 (실/샘플 경계면)**: **부분 실 API + 부분 샘플.** 행사(Event) 목록·기간·배정 홀은 **실 API 가능**(Event 엔티티 존재). 반면 **홀 가동률 집계·외부 행사일정 시스템 연동은 미구현 → 샘플**. 캘린더 점유 매트릭스는 배정(M1) 데이터 정합 후 실 전환.
|
||
- **Stitch 프롬프트**:
|
||
|
||
```
|
||
An exhibition schedule management screen for a venue operator, Korean B2B web app "KINTEX AI 전시관리", desktop 1440px, light theme, blue #0066B3, Korean sans-serif. All UI text in Korean. Left sidebar 240px (전시 일정 highlighted). Header: title "전시 일정" with subtitle "킨텍스 전 홀 행사 일정 관리·모니터링". A filter bar: three selects "전체 홀 (1-10) ▾", "전체 카테고리 ▾", "전체 상태 ▾", and on the right a view toggle "[목록] / [캘린더]". Main grid: left 2/3 a vertical list of event cards, each card with a poster thumbnail on the left and details on the right — event title "스마트팩토리 코리아", a status pill ("진행중" green or "예정" amber), category "무역·산업 전시", a row of meta with icons "2026.09.05–09.08", "홀 4, 5", "추정 25,000명", and two small buttons "상세 편집" and "반입/물류 보기". Right 1/3 column: a mini month calendar "2026년 8월" with prev/next chevrons and a highlighted date "15", and below it a "홀 가동률 (8월)" card with progress bars "홀 1-3 85%" and "홀 4-5 40%". Clean scheduling/console aesthetic, dense but organized.
|
||
```
|
||
|
||
- **라우트**: `/schedule` (테넌트 전역, 운영·주최자) · 캘린더 딥링크 `/schedule/calendar`. MDI 적용(주최자·운영 — §2.7-6).
|
||
|
||
---
|
||
|
||
### SCR-16 관리자 대시보드 (백오피스 진입 · 시스템 개요) [M18]
|
||
|
||
- **대상**: 테넌트(전시관) 관리자·플랫폼 슈퍼관리자 · **진입 경로**: 백오피스(`admin.`) 로그인 후 기본 홈
|
||
- **모듈·우선순위**: M18 관리자 시스템(백오피스) · **P1**(PLANNING §5A M18·§5B). 본 화면은 **admin 랜딩 대시보드(시스템 개요)**이며, M18 본체(사용자관리·역할/권한 RBAC·공통코드·메뉴·감사로그·시스템설정·킨텍스 마스터데이터·룰셋 버전)는 **UIWS 표준 `system` 모듈 화면**으로 별도(§5B-1) — 후속 화면 세트로 추가. 플랫폼 슈퍼관리자는 상단 **테넌트 스위처** 보유, 테넌트 관리자는 자기 전시관 고정(§1A-4).
|
||
- **레이아웃 (위→아래)**:
|
||
1. 헤더: 타이틀 "시스템 개요" + 부제 "실시간 지표 및 운영 상태" + 우측 상태 인디케이터("시스템 정상" 녹색 점) + (플랫폼 슈퍼관리자) 테넌트 스위처 드롭다운
|
||
2. **KPI 카드 3개**: 진행 행사(활성) 14 (▲+2) · 실시간 방문객 24,592 (▲+12%) · 주차 가용 18% (혼잡)
|
||
3. **차트(2/3 폭)**: "방문객 추이(오늘)" — **Recharts `BarChart`**(시간대 09:00~19:00, [오늘]/[주간] 토글), 호버 툴팁
|
||
4. 우측(1/3) — **진행 중 이벤트 리스트**: 카드(썸네일, "LIVE" 상태 점, 행사명, 홀·시간) + "준비중" 카드(진행 바)
|
||
5. (선택) 우하단 플로팅 AI 어시스턴트 버튼 — **범위 표기: AI 컨시어지는 P2/후속 트랙**(PLANNING M18 미포함), 기본은 숨김/비활성
|
||
- **핵심 컴포넌트/상태**: KPI 카드(델타 칩)·Recharts 막대 차트·라이브 이벤트 카드(상태 점)·StatusBadge. 로딩 — 스켈레톤 · 빈 상태 — "진행 중인 행사가 없습니다" · 에러 — 위젯별 재시도. RBAC: 테넌트 관리자 vs 플랫폼 슈퍼관리자 위젯 차등(크로스-테넌트 집계는 슈퍼관리자만).
|
||
- **데이터 원천 (실/샘플 경계면)**: **혼합.** 사용자 수·활성 행사 수 등 **일부 실 API 가능**(M18/시스템관리 엔티티). **실시간 방문객·주차·라이브 이벤트·시간대 추이 위젯은 집계/센서 미구축 → 샘플 시연.** 플로팅 AI 봇은 미구현(비노출 기본).
|
||
- **Stitch 프롬프트**:
|
||
|
||
```
|
||
An admin back-office overview dashboard for "KINTEX AI 전시관리" platform, Korean B2B internal tool, desktop 1440px, light theme, blue #0066B3, Korean sans-serif. All UI text in Korean. Left sidebar 240px with menu (Dashboard highlighted, 전시 일정, 홀 운영, 경영분석) and a "Create New Event" button near the bottom with Settings/Support and an "Admin Profile" row. Header: title "시스템 개요" with subtitle "실시간 지표 및 운영 상태" and a small right-aligned status indicator "● 시스템 정상" in green (plus, for super admin, a tenant switcher dropdown "KINTEX ▾"). Top band: 3 KPI cards — "진행 행사(활성) 14" with a green chip "+2 this week", "실시간 방문객 24,592" with green "+12% vs 어제", "주차 가용 18%" with an amber chip "혼잡" and a thin progress bar. Below: a 2/3-width chart card "방문객 추이 (오늘)" with a bar chart across hours 09:00–19:00 (blue bars of varying heights, hover tooltip showing values) and a "[오늘] / [주간]" toggle; a 1/3-width column "진행 중 이벤트" with event cards each showing a thumbnail, a green "LIVE NOW" dot, event title, hall + time, and one "준비중" card with an amber progress bar. Optional small floating circular assistant button bottom-right (kept subtle). Clean operational admin aesthetic.
|
||
```
|
||
|
||
- **라우트**: `/admin` (백오피스 랜딩, 테넌트 스코프 고정) · 슈퍼관리자 테넌트 스위처는 컨텍스트 전환. M18 본체 화면(별도): `/admin/users`·`/admin/roles`·`/admin/codes`·`/admin/menus`·`/admin/audit`·`/admin/settings`·`/admin/masterdata/*`(홀·요율·룰셋). MDI 적용(관리자 — §2.7-6).
|
||
|
||
---
|
||
|
||
### SCR-17 컴포넌트 가이드 (디자인 시스템 스타일가이드) [§1 실증]
|
||
|
||
- **대상**: 디자이너·프론트 개발(kintex-frontend-dev) · **진입 경로**: 내부 스타일가이드 URL(제품 내비 미노출)
|
||
- **성격**: **§1 디자인 시스템의 실증 스타일가이드(스토리북 성격).** 제품 화면이 아니라 §1 토큰·컴포넌트가 실제로 어떻게 렌더되는지 보여주는 **단일 참조**다. Stitch `component_guide_updated`(최신본)를 근거로 하되, **색·치수의 권위는 §1**(본 문서)이다.
|
||
- **레이아웃 (벤토 섹션)**:
|
||
1. 헤더: "System Reference / 컴포넌트 가이드", 설명("KINTEX AI 디자인 시스템 — 고신뢰·정밀 정보 처리 B2B 전시 환경"), 버전 배지
|
||
2. **타이포그래피 & 컬러**: Pretendard 스케일(Display 28-36 / Headline 24 / Title/H3 16-18 / Body 14) 한국어 샘플 + 팔레트 스와치(주 브랜드 블루·AI 액센트 `#6D4AFF`·Success·Error·Neutral)
|
||
3. **AI 전용 요소**: "AI 초안 컴포넌트"(좌측 4px 보라 액센트·워터마크 샘플 영역), 위반 플래그 핀(피난 통로 차단·바닥하중 초과)
|
||
4. **버튼 & 액션**: Primary / Secondary Outlined / Ghost / **AI 제안(보라)** / Disabled / 아이콘 버튼(편집·삭제·공유)
|
||
5. **상태 배지 & 칩**: 생애주기 `작성중→제출됨→AI검토(보라)→승인→반려→시공중→검수완료`(§1-4와 1:1) + DdayChip(D-3 warning)·Hall 칩·High Traffic 칩
|
||
6. **시스템 아이콘 라이브러리(커스텀 SVG)**: Dashboard·Calendar·Operations·Analytics·Search·Menu·AI Bot (stroke 스타일)
|
||
7. **데이터 시각화**: 게이지(점유율 78% 임계치 85%)·혼잡도 히트맵 범례(매우혼잡·다소혼잡·원활)·주간 추이 미니 막대 — 실제 구현은 **Recharts**로 대체
|
||
8. **폼 요소**: Input(기본/포커스/에러)·Dropdown·Checkbox·Radio
|
||
9. **피드백 & 오버레이**: Toast·Alert·마이크로 모달
|
||
- **§1 정합 주의(권위=본 문서)**: 스타일가이드가 표기한 일부 값은 §1과 미세 상이 — **KINTEX Blue `#004E8B`**(가이드) ≈ 본 문서 `primary-700 #004C86`(헤더/hover 짙은 톤)이며 **주 브랜드 블루는 `primary-600 #0066B3` 유지**(§1-2). **Success `#00734E`/Error `#BA1A1A`/히트맵 `#D92D20`·`#F79009`·`#12B76A`**는 Stitch Material 팔레트값이므로, 구현은 **§1 토큰(`success #0E8A5F`·`error #D92D20`)을 권위로 사용**하고 가이드값은 시각 참조로만 둔다. **AI 액센트 `#6D4AFF`·상태 배지 진행·라운드 4/8px·pill·좌측 액센트 바는 §1과 일치**(실증 확인).
|
||
- **데이터 원천 (실/샘플 경계면)**: **해당 없음(N/A) — 정적 참조.** 실 데이터·API 없음. 내부 문서/스토리북으로만 유지하며 배포 제품 라우트로 노출하지 않는다.
|
||
- **Stitch 프롬프트**:
|
||
|
||
```
|
||
A design-system style guide / component reference page for "KINTEX AI 전시관리", a Korean B2B exhibition platform. Desktop 1440px, light theme, primary blue #0066B3, AI accent purple #6D4AFF, backgrounds #F9FAFB, 1px borders #E4E7EC, Korean sans-serif (Pretendard). All UI text in Korean where shown. A bento grid of white bordered section cards, each with a left 4px colored accent bar and a small title. Sections: (1) "타이포그래피 & 컬러" — a Pretendard type scale with Korean samples "전시공간 최적화 엔진" (Display), "도면 분석 보고서" (Headline), "부스 배치 시뮬레이션" (Title), body text; and a color swatch grid "KINTEX Blue", "AI Accent #6D4AFF", "Success", "Error". (2) "AI 전용 요소" — an "AI 초안 컴포넌트" card with a faint diagonal "AI GENERATED" watermark area and violation flag map pins "피난 통로 차단", "바닥하중 초과" in red. (3) "버튼 & 액션" — Primary, Secondary Outlined, Ghost, a purple "AI 제안 레이아웃" button, a disabled button, and edit/delete/share icon buttons. (4) "상태 배지 & 칩" — lifecycle status chips in a row with left accent bars: "작성중"(gray), "제출됨"(blue), "AI검토"(purple), "승인"(green), "반려"(red), plus "시공중", "검수완료", and small chips "D-3", "Hall 1A", "High Traffic". (5) "데이터 시각화" — an occupancy gauge "전시장 점유율 78% / 임계치 85%", a heatmap legend "매우 혼잡 / 다소 혼잡 / 원활", and a small weekly bar chart. (6) "폼 요소" — text input (default/focus/error states), dropdown, checkbox, radio. (7) "피드백 & 오버레이" — a dark toast "데이터가 저장되었습니다", a red alert "소방법 위반 구역 3곳", and a small confirm modal. Clean, systematic, storybook-style reference layout, high density.
|
||
```
|
||
|
||
- **라우트**: `/_styleguide` (내부 전용, 프로덕션 비노출) — 제품 내비게이션·사이드바에 포함하지 않는다.
|
||
|
||
---
|
||
|
||
### SCR-18 홀 배정 신청 & 자동 견적 [M1]
|
||
|
||
- **대상**: 주최자 · **모듈/P**: M1 · P1 · **진입 경로**: 콘솔 사이드바 "홀 배정" / 전시 일정(SCR-15)에서 "이 기간 배정 신청"
|
||
- **레이아웃 (위→아래)**:
|
||
1. 좌측 2/3 — **가용성 캘린더**: 홀×날짜 그리드(홀1~10 행, 월 컬럼), 셀 상태색(예약=파랑·가배정=주황·공실=회색). 홀/반홀(1A·1B) 토글, 기간 드래그 선택
|
||
2. 우측 1/3 — **배정 신청 폼**: 홀·반홀 선택, 기간(장치·본행사·철거 구분), 목표 부스 수, 용도. 입력 즉시 하단 **자동 견적 카드** — `2,250원/㎡ × 면적 × 일수 × 성수기(+10%)/1전시장(+10%)` 라인별 산식 노출 + 관리비 예치금(15~20%) + 총액. AiLabel 없음(규칙 엔진). "가견적 PDF" · "배정 신청서(HWP) 생성" 버튼
|
||
3. 하단 고지: "최종 배정 확정은 킨텍스 내부 심사 — 본 견적은 공시요율 가견적"
|
||
- **상태/컴포넌트**: 캘린더 그리드·견적 라인 테이블(tabular numerals)·StatusBadge(신청/심사중/확정). 로딩 — 캘린더 스켈레톤 · 빈 — "선택한 기간에 배정 신청서를 작성하세요" · 에러 — 요율 마스터 로드 실패 배너. **데이터 원천**: 요율 마스터(확보)·행사일정(부분 실/샘플), 가용성은 킨텍스 내부 데이터 필요 → 부분 샘플.
|
||
- **Stitch 프롬프트**:
|
||
|
||
```
|
||
A hall booking and instant-quote screen for an exhibition organizer, Korean B2B web app "KINTEX AI 전시관리", desktop 1440px, light theme, primary blue #0066B3, backgrounds #F9FAFB, 1px borders #E4E7EC, Korean sans-serif (Pretendard). All UI text in Korean. Left sidebar 240px ("홀 배정" highlighted). Main split: left 2/3 an availability calendar — a grid with hall rows labeled "홀1, 홀1A, 홀1B, 홀2 … 홀10" and month/day columns, cells color-coded (blue "예약", amber "가배정", light gray "공실"), a selected date range highlighted in light blue #D9EAF7, and a half-hall toggle. Right 1/3 a booking form card titled "배정 신청": selects "홀/반홀", date range fields "장치 · 본행사 · 철거", a number input "목표 부스 수 510", a "용도" select; below it an auto-quote card "자동 견적(가견적)" showing itemized rows with mono numbers — "임대료 2,250원/㎡ × 4,941㎡ × 4일 = ₩44,469,000", "성수기 +10%", "제1전시장 +10%", "관리비 예치금(15%)", divider, bold total "합계 ₩58,700,000", fine print "공시요율 기준 가견적 — 최종 배정 확정은 킨텍스 심사", and two buttons "가견적 PDF" (outlined) and primary "배정 신청서(HWP) 생성". Data-dense scheduling + commerce quote aesthetic.
|
||
```
|
||
|
||
- **라우트**: `/o/:eventId/hall-booking`. MDI 적용(주최자).
|
||
|
||
---
|
||
|
||
### SCR-19 부스 판매 인벤토리 [M1·M2 / F005]
|
||
|
||
- **대상**: 주최자 · **모듈/P**: M1·M2 · P1 · **진입 경로**: 사이드바 "부스 판매" / 배치 에디터에서 "판매 현황"
|
||
- **레이아웃**:
|
||
1. 상단 KPI 밴드: 총 부스 510 · 판매 128 · 홀드 12 · 예약 22 · 잔여 348 · 판매율 25%
|
||
2. 좌측 2/3 — **판매 현황 뷰 토글**: [맵] 홀 도면 위 부스별 판매상태 히트(판매=녹·홀드=주황·예약=파랑·공실=회색, 클릭 시 우측 상세) / [테이블] 부스번호·유형·면적·가격·상태 배지·업체
|
||
3. 우측 1/3 — **부스 상세/상태 변경 패널**: 선택 부스 정보 + 상태 드롭다운(공실→홀드→예약→판매), 배정 업체 검색, 단가·프리미엄 계수, 메모
|
||
4. 상단 우측: 일괄 상태 변경·CSV 내보내기
|
||
- **상태/컴포넌트**: 판매 히트 맵(도면 오버레이)·데이터 테이블(지브라·sticky)·StatusBadge. 로딩 — 스켈레톤 · 빈 — "확정 배치가 없습니다 — 배치 에디터에서 부스를 확정하세요" · 에러 재시도. **데이터 원천**: M2 확정 배치(부스 좌표) 실 가능, 판매 상태는 신규 인벤토리 API → 부분 샘플.
|
||
- **Stitch 프롬프트**:
|
||
|
||
```
|
||
A booth sales inventory management screen for an exhibition organizer, Korean B2B web app "KINTEX AI 전시관리", desktop 1440px, light theme, blue #0066B3, Korean sans-serif. All UI text in Korean. Sidebar 240px ("부스 판매" highlighted). Top KPI band: stat cards "총 부스 510", "판매 128", "홀드 12", "예약 22", "잔여 348", and "판매율 25%" with a thin progress bar. Main split: left 2/3 with a view toggle "[맵] / [테이블]" (맵 active) showing a top-down hall floor plan where each small booth rectangle is filled by sales status color — green "판매", amber "홀드", blue "예약", light gray "공실" — with booth numbers; a small legend. Right 1/3 a detail panel for the selected booth "A-102 · 독립부스 · 6×3m": a status dropdown "공실 → 홀드 → 예약 → 판매" set to "판매", an exhibitor search field showing "(주)한빛로보틱스", price fields "단가 ₩13,500,000 · 프리미엄 계수 1.2", and a memo box; top-right buttons "일괄 상태 변경" and "CSV 내보내기". Dense inventory-management aesthetic with a colorful status map.
|
||
```
|
||
|
||
- **라우트**: `/o/:eventId/inventory`. MDI 적용(주최자).
|
||
|
||
---
|
||
|
||
### SCR-20 온라인 부스 셀프 선택·판매 [M2 / F006]
|
||
|
||
- **대상**: 참가업체 · **모듈/P**: M2 · P1 · **진입 경로**: 참가업체 포털 "부스 신청" / 공개 인터랙티브 플로어플랜(SCR-P3)에서 "부스 선택"
|
||
- **레이아웃**:
|
||
1. 좌측 히어로 — **인터랙티브 플로어플랜**: 판매 가능 부스는 초록 테두리+가격 라벨, 매진은 회색 잠금. 호버 툴팁(부스번호·면적·가격·유형), 필터(가격대·유형·존)
|
||
2. 우측 — **선택 요약·결제 카드**: 선택 부스 리스트(부스번호·유형·면적·가격), 옵션(코너/아일랜드 프리미엄), 합계 + "장바구니 담기/부스 예약", 결제(PG) 진입 버튼
|
||
3. 상단 진행 스텝: 부스 선택 → 정보 입력 → 결제 → 확정
|
||
- **상태/컴포넌트**: 인터랙티브 SVG 맵(비시각 대안=부스 목록 테이블 — N1 접근성)·요약 카드·스테퍼. 로딩 — 맵 스켈레톤 · 빈 — "현재 판매 중인 행사가 없습니다" · 동시성 — 방금 타인이 선택한 부스 잠금 토스트. **데이터 원천**: M2 부스+SCR-19 인벤토리 상태 → 부분 샘플.
|
||
- **Stitch 프롬프트**:
|
||
|
||
```
|
||
An online self-service booth selection and purchase screen for an exhibitor, Korean B2B web app, desktop 1440px, light theme, blue #0066B3, green #0E8A5F for available booths, Korean sans-serif. All UI text in Korean. Top progress stepper "부스 선택 → 정보 입력 → 결제 → 확정" (step 1 active). Left hero (2/3): an interactive top-down exhibition floor plan where available booths are outlined in green with small price labels like "₩13.5M", sold booths are gray with a lock icon; a hover tooltip on one booth "A-102 · 6×3m · 독립 · ₩13,500,000"; a filter bar "가격대 ▾ · 유형 ▾ · 존 ▾". Right panel (1/3): a "선택한 부스" summary card listing "A-102 · 독립 6×3m · ₩13,500,000", a "코너 프리미엄 +10%" option checkbox, a divider, bold total "합계 ₩14,850,000", and buttons "부스 예약" (outlined) and primary "결제하기". Friendly e-commerce-meets-floorplan aesthetic, clear availability affordances.
|
||
```
|
||
|
||
- **라우트**: `/e/:eventId/booth-select`. MDI 적용(참가업체).
|
||
|
||
---
|
||
|
||
### SCR-21 정산·결제 대시보드 [M9]
|
||
|
||
- **대상**: 주최자(납부 스케줄)·참가업체(유틸리티·부대 결제)·관리자(정산) · **모듈/P**: M9 · P1 · **진입 경로**: 사이드바 "정산"
|
||
- **레이아웃**:
|
||
1. 상단 KPI: 청구 총액 · 납부 완료 · 미납 · 다음 마감 D-데이
|
||
2. 좌측 2/3 — **납부 스케줄 타임라인/테이블**: 계약금 20%→중도금 30%+20%→잔금 30%+예치금 15~20% 행(금액·기한·상태 배지·[결제]/[영수증]) + 유틸리티/부대/옥션 수수료 정산 라인. 지브라·sticky
|
||
3. 우측 1/3 — **결제 카드**: 선택 항목 PG 결제(카드/계좌이체/세금계산서), 예치금 대비 실사용 정산 요약(검침 기반), 세금계산서 발행 버튼
|
||
4. 하단: 행사 종료 후 정산 내역(전기사용료·폐기물 처리비) 투명화 표
|
||
- **상태/컴포넌트**: 스케줄 테이블·PG 결제 모달·StatusBadge(미납 error·완료 success)·DdayChip. 로딩 스켈레톤 · 빈 — "청구 내역이 없습니다" · 에러 재시도. **데이터 원천**: 요율·납부 규칙(확보)·PG(연동 전 샘플) → 혼합.
|
||
- **Stitch 프롬프트**:
|
||
|
||
```
|
||
A settlement and payment dashboard for exhibition billing, Korean B2B web app "KINTEX AI 전시관리", desktop 1440px, light theme, blue #0066B3, success green #0E8A5F, error red #D92D20, Korean sans-serif. All UI text in Korean. Sidebar 240px ("정산" highlighted). Top KPI cards: "청구 총액 ₩64,500,000", "납부 완료 ₩38,700,000", "미납 ₩25,800,000" (red), "다음 마감 D-9" (amber D-day chip). Main split: left 2/3 a payment schedule table with columns 항목, 금액, 기한, 상태, 액션 — rows "계약금 20% ₩12,900,000 · 2026.06.01 · 완료(green pill) · [영수증]", "중도금 30% ₩19,350,000 · 07.15 · 미납(red pill) · [결제]", "잔금 30% + 예치금 15%", plus utility/booth-service/auction-fee settlement lines, zebra striped, sticky header. Right 1/3 a payment card "결제" with method segmented control "카드 / 계좌이체 / 세금계산서", a deposit-vs-actual settlement summary "예치금 ₩9.6M / 실사용 ₩7.1M / 환급 ₩2.5M", and a button "세금계산서 발행". Bottom: a small post-event settlement table "전기사용료 · 폐기물 처리비". Financial, trustworthy, number-forward layout.
|
||
```
|
||
|
||
- **라우트**: `/o/:eventId/settlement` · 참가 `/e/:eventId/booth/:boothId/payment`. MDI 적용.
|
||
|
||
---
|
||
|
||
### SCR-22 서류·마일스톤 워크플로 [M6]
|
||
|
||
- **대상**: 주최자 · **모듈/P**: M6 · P1 · **진입 경로**: 대시보드 마일스톤 노드 클릭 / 사이드바 "서류·마일스톤"
|
||
- **레이아웃**:
|
||
1. 상단 — **마일스톤 진행 바**: D-150/D-30/D-25/D-7/D-0 (SCR-02 히어로 재사용, 컴팩트)
|
||
2. 좌측 — **신고서류 체크리스트(7종+)**: 행사운영계획서·부스배치도·재해대처계획서·방화관리 책임서약서·주차관리 신청서·보안요원 배치계획·위험물 반입신고서·리깅 구조계산서 — 각 행 상태 배지(작성전/작성중/제출됨/검수중/승인/반려)·마감 D-데이·[작성]/[업로드]/[HWP 생성]
|
||
3. 우측 — **AI 서류 검수 요약 카드**: 누락 항목·불일치("배치도 부스 수 486 ≠ 운영계획서 510") AiLabel + kxwp 릴레이 안내(제출 파일 생성→수동 업로드)
|
||
- **상태/컴포넌트**: 체크리스트·StatusBadge·DdayChip·AiLabel. 로딩 스켈레톤 · 빈 — "행사를 생성하면 마일스톤·서류가 자동 구성됩니다" · 에러 재시도. **데이터 원천**: 서식 템플릿(있음)·AI 검수(Claude 라우터) → 부분 실.
|
||
- **Stitch 프롬프트**:
|
||
|
||
```
|
||
A documents and milestone workflow screen for an exhibition organizer, Korean B2B web app, desktop 1440px, light theme, blue #0066B3, purple #6D4AFF for AI, Korean sans-serif. All UI text in Korean. Sidebar 240px ("서류·마일스톤" highlighted). Top: a compact horizontal milestone bar "D-150 배정 → D-30 사전협의 → D-25 유틸리티 → D-7 신고서류 → D-0 개장" with the D-7 node highlighted amber. Main split: left 2/3 a required-documents checklist with rows, each showing a document name, a status pill and a D-day chip and action buttons — "행사운영계획서 · 승인(green) · [보기]", "부스배치도 · 제출됨(blue) · [HWP 생성]", "재해대처계획서 · 작성중(gray) · D-7 · [작성]", "리깅 구조계산서 · 반려(red) · [수정]", plus 방화관리 책임서약서, 주차관리 신청서, 보안요원 배치계획, 위험물 반입신고서. Right 1/3 an "AI 서류 검수" card with a purple accent left border listing issues: "부스배치도 부스 수 486 ≠ 운영계획서 510 (불일치)", "재해대처계획서 필수요소 누락 2건", and a note "kxwp 제출: 파일 자동 생성 후 업로드 안내". Workflow-tracker aesthetic, clear status affordances.
|
||
```
|
||
|
||
- **라우트**: `/o/:eventId/documents`. MDI 적용(주최자).
|
||
|
||
---
|
||
|
||
### SCR-23 신고서류 작성 (웹폼 → HWP/PDF) [M6 / F022]
|
||
|
||
- **대상**: 주최자 · **모듈/P**: M6 · P1 · **진입 경로**: SCR-22에서 "[작성]"
|
||
- **레이아웃**:
|
||
1. 좌측 — **웹폼(섹션 아코디언)**: 서류 유형별 필드(행사 개요·안전 담당·비상 연락·위험물 목록 등), AI 자동 채움 버튼("행사 데이터로 자동 채움" AiLabel), 필수 필드 검증
|
||
2. 우측 — **실시간 문서 미리보기**(A4 프레임, 킨텍스 제출 서식 레이아웃) — 폼 입력이 즉시 반영
|
||
3. 하단 고정: 저장(임시)·"HWP 생성"·"PDF 생성"·"제출(kxwp 릴레이 안내)"
|
||
- **상태/컴포넌트**: 폼·문서 미리보기·AiLabel. 로딩 — 미리보기 스켈레톤 · 빈 — 신규 폼 · 에러 — 필수 미입력 인라인 · 생성 실패 재시도. **데이터 원천**: 서식 템플릿·AI 자동채움(Claude) → 부분 실.
|
||
- **Stitch 프롬프트**:
|
||
|
||
```
|
||
A form-to-document authoring screen where an organizer fills a web form and sees a live official document preview, Korean B2B web app, desktop 1440px, light theme, blue #0066B3, purple #6D4AFF for AI. All UI text in Korean. Split layout: left half a form titled "재해대처계획서 작성" with accordion sections "행사 개요", "안전 관리 담당", "비상 연락 체계", "위험물 목록", each with Korean labeled inputs, and a purple button "행사 데이터로 자동 채움". Right half a document preview panel showing an A4 page with an official Korean government-style form layout, header "재해대처계획서", filled fields, a table, and a stamp box — updating live from the form. Sticky bottom bar: "임시 저장", "HWP 생성", "PDF 생성", and a primary "제출". A small note "제출은 kxwp 업로드용 파일 생성 방식입니다". Clean document-authoring split view.
|
||
```
|
||
|
||
- **라우트**: `/o/:eventId/documents/:docType/edit`. MDI 적용.
|
||
|
||
---
|
||
|
||
### SCR-24 등록업체 매칭·RFQ [M7]
|
||
|
||
- **대상**: 참가업체·주최자 · **모듈/P**: M7 · P1 · **진입 경로**: 설계 스튜디오 "업체 찾기" / 사이드바 "등록업체"
|
||
- **레이아웃**:
|
||
1. 상단 필터: 공종 14분류(전시디자인설치·리깅·전기시설…), 지역, 규모, 예산
|
||
2. 좌측 — **업체 카드 리스트**: 업체명·분류·지역·규정 준수 이력·평점·(AI 추천 배지 "부스 규모·업종 적합" AiLabel). 미등록 업체는 노출 안 됨(게이트)
|
||
3. 우측 — **RFQ 작성 패널**: 선택 업체 다중, M3 설계안·물량서 첨부, 요청 항목·마감, "견적 요청 발송". 발송 후 견적 회신 비교 진입(옥션 SCR-26으로 승격 가능)
|
||
- **상태/컴포넌트**: 업체 카드·AiLabel·첨부. 로딩 스켈레톤 · 빈 — "조건에 맞는 등록업체가 없습니다 — 필터를 조정하세요" · 에러 재시도. **데이터 원천**: 등록업체 DB(739, 수집 가능)·AI 매칭(Claude) → 부분 실.
|
||
- **Stitch 프롬프트**:
|
||
|
||
```
|
||
A registered-contractor matching and RFQ screen for exhibition booth construction, Korean B2B web app, desktop 1440px, light theme, blue #0066B3, purple #6D4AFF for AI recommendations. All UI text in Korean. Top filter bar: category chips "전시디자인설치 · 리깅 · 전기시설 · 카펫 · 급배수" (14 categories), and selects "지역 ▾", "규모 ▾", "예산 ▾". Left 2/3 a list of contractor cards, each with company name "(주)공간디자인", category tag, region "경기 고양", a compliance record "규정 준수 98% · 시공 42건", a star rating, and some cards a purple "AI 추천 · 부스 규모·업종 적합" chip; a small verified badge "킨텍스 등록업체". Right 1/3 an "견적 요청(RFQ)" panel: selected contractors chips, an attachment list "부스 설계안 v2, 물량서(BOQ)", request-item fields, a deadline date, and a primary button "견적 요청 발송" with a note "미등록 업체는 응찰할 수 없습니다". Directory + procurement aesthetic.
|
||
```
|
||
|
||
- **라우트**: `/e/:eventId/contractors` · 주최자 `/o/:eventId/contractors`. MDI 적용.
|
||
|
||
---
|
||
|
||
### SCR-25 반입/반출 슬롯 예약 [M8]
|
||
|
||
- **대상**: 참가업체·장치업체·홀매니저(운영) · **모듈/P**: M8 · P2 · **진입 경로**: 통합 일정 / 사이드바 "반입·반출"
|
||
- **레이아웃**:
|
||
1. 좌측 2/3 — **하역장·화물출입구 슬롯 그리드**: 게이트(도크1~6) 행 × 시간대 컬럼, 예약 셀(업체·차량·중량물 우선 표시), 드래그로 슬롯 선택. 중량물(5t↑) 우선 배치 하이라이트
|
||
2. 우측 1/3 — **예약 폼**: 차량정보·중량·품목, 지게차 신청(유료 옵션), 통행증 발급(QR) → 모바일(SCR-M10) 연동. 철거일 피크 대기열 예측 미니 차트
|
||
3. 상단: 행사·홀 필터, 반입/반출 전환
|
||
- **상태/컴포넌트**: 슬롯 그리드·예약 폼·QR 발급·예측 미니 차트. 로딩 스켈레톤 · 빈 — "예약 가능한 슬롯이 없습니다" · 충돌 — 동시 예약 잠금 토스트. **데이터 원천**: 하역장 배치(운영팀 협업 필요) → 샘플 중심.
|
||
- **Stitch 프롬프트**:
|
||
|
||
```
|
||
A move-in/move-out dock slot reservation screen for an exhibition, Korean B2B web app, desktop 1440px, light theme, blue #0066B3, Korean sans-serif. All UI text in Korean. Top: filters "행사 ▾ · 홀7 ▾" and a toggle "[반입] / [반출]". Left 2/3 a scheduling grid with dock rows "도크1 … 도크6" and time-slot columns (08:00–20:00), reserved cells filled blue showing "(주)공간디자인 · 5t 트럭", one cell highlighted amber "중량물 우선 5t↑", empty cells selectable. Right 1/3 a reservation form "슬롯 예약": vehicle info fields "차량번호 · 중량 · 품목", a checkbox "지게차 신청(유료)", and a "통행증 발급(QR)" button showing a small QR preview, plus a small teardown-day queue prediction mini bar chart "철거일 대기열 예측". Logistics-scheduling aesthetic with a clear time grid.
|
||
```
|
||
|
||
- **라우트**: `/e/:eventId/logistics` · 운영 `/ops/:eventId/logistics`. MDI 적용.
|
||
|
||
---
|
||
|
||
### SCR-26 공사/장치 옥션 목록·개설 [M15]
|
||
|
||
- **대상**: 참가업체·주최자(발주) · **모듈/P**: M15 · P1(핵심) · **진입 경로**: 사이드바 "옥션" / RFQ(SCR-24)에서 "역경매로 전환"
|
||
- **레이아웃**:
|
||
1. 상단: 탭 [진행중] [마감] [내가 개설] + "옥션 개설" 버튼
|
||
2. 좌측 — **옥션 카드/테이블**: 옥션명·공종·유형(역경매/RFQ)·응찰 수·현재 최저가·마감 D-데이·상태 배지. AI 자료 첨부 아이콘(배치·설계·물량·이미지)
|
||
3. **옥션 개설 모달/우측 패널**: 공종 선택, 낙찰 기준(최저가/종합평가+가중치 슬라이더: 가격·평판·납기), 라운드·마감, AI 자료 첨부(M2~M5), 초대 업체(등록업체 게이트)
|
||
- **상태/컴포넌트**: 옥션 카드·StatusBadge·DdayChip·가중치 슬라이더. 로딩 스켈레톤 · 빈 — "진행 중인 옥션이 없습니다 — 옥션을 개설하세요" · 에러 재시도. **데이터 원천**: M15 신규 엔진(미구현) → 샘플.
|
||
- **Stitch 프롬프트**:
|
||
|
||
```
|
||
A construction auction (reverse auction) list and creation screen for an exhibition platform, Korean B2B web app, desktop 1440px, light theme, blue #0066B3, purple #6D4AFF for AI attachments, Korean sans-serif. All UI text in Korean. Top: tabs "진행중 | 마감 | 내가 개설" and a primary button "옥션 개설". Left 2/3 a list of auction cards, each with auction title "A-102 독립부스 시공", a category tag "전시디자인설치", a type chip "역경매", "응찰 5개", "현재 최저가 ₩8,400,000", a D-day chip "마감 D-2", a status pill "진행중", and small purple attachment icons "배치 · 설계 · 물량서 · 예상이미지". Right 1/3 an "옥션 개설" panel: category select, an award-criteria toggle "최저가 / 종합평가", weight sliders "가격 60% · 평판 25% · 납기 15%", round/deadline fields, an AI attachment picker "M2~M5 자료 첨부", and an invited-contractor list with a note "등록업체만 초대 가능". Procurement/marketplace aesthetic.
|
||
```
|
||
|
||
- **라우트**: `/e/:eventId/auctions` · `/o/:eventId/auctions` · 개설 `/auctions/new`. MDI 적용.
|
||
|
||
---
|
||
|
||
### SCR-27 옥션 상세·실시간 순위·응찰 [M15]
|
||
|
||
- **대상**: 장치업체(응찰) · 발주자(주최자/참가) 뷰 병행 · **모듈/P**: M15 · P1 · **진입 경로**: 옥션 목록 → 옥션 클릭
|
||
- **레이아웃**:
|
||
1. 상단: 옥션 컨텍스트(공종·유형·라운드·마감 카운트다운) + 실시간 배지
|
||
2. 좌측 2/3 — **AI 자료 열람**: 탭[배치도][부스 설계안][배선/물량서(BOQ)][나노바나나 예상 이미지] — 응찰 근거 자료(워터마크 상시)
|
||
3. 우측 1/3 — **실시간 순위·응찰 패널**: 현재 순위 리스트(익명 옵션: "업체 A"), 내 위치 강조, 최저가/내 견적, 라운드 종료 타이머(Redis 실시간·WebSocket), "견적서 작성·재응찰"(SCR-28) CTA. 발주자 뷰에서는 "견적서 비교표 보기"(SCR-29)
|
||
- **상태/컴포넌트**: 자료 뷰어 탭·실시간 순위 리스트·카운트다운·AiLabel(예상이미지). 로딩 — 순위 스켈레톤 · 마감됨 — 응찰 비활성+"마감된 옥션" · 에러 — WebSocket 재연결 배지. **데이터 원천**: M15 신규 → 샘플.
|
||
- **Stitch 프롬프트**:
|
||
|
||
```
|
||
An auction detail screen with AI reference materials and a live ranking panel for exhibition construction bidding, Korean B2B web app, desktop 1440px, light theme, blue #0066B3, purple #6D4AFF for AI, Korean sans-serif. All UI text in Korean. Top: context "A-102 독립부스 시공 · 역경매 · 라운드 2 · 마감 01:24:36" with a live red dot badge "실시간". Left 2/3 an AI reference viewer with tabs "배치도 | 부스 설계안 | 물량서(BOQ) | 예상 이미지" showing a photorealistic booth render with a faint watermark "AI 생성 예상 이미지" under the 예상 이미지 tab. Right 1/3 a live ranking panel "실시간 순위": ranked rows "1위 업체 A ₩8,400,000", "2위 나의 응찰 ₩8,700,000" (highlighted), "3위 업체 C ₩8,900,000", an anonymize toggle "익명 순위", a countdown timer "라운드 종료 01:24:36", and a primary button "견적서 작성·재응찰". Competitive, real-time marketplace aesthetic.
|
||
```
|
||
|
||
- **라우트**: `/auctions/:auctionId`. MDI 적용.
|
||
|
||
---
|
||
|
||
### SCR-28 견적서 작성·제출 [M15]
|
||
|
||
- **대상**: 장치업체 · **모듈/P**: M15 · P1 · **진입 경로**: SCR-27 → "견적서 작성·재응찰"
|
||
- **레이아웃**:
|
||
1. 좌측 — **견적서 라인 에디터**: 공종·자재·수량·단가·금액 행 추가(물량서 BOQ에서 자동 프리필 AiLabel), 소계·부가세·총액 자동 계산, 납기·유효기간·조건
|
||
2. 우측 — **견적서 PDF 미리보기**(A4, 업체 로고·총액·서명란) + 버전 이력(라운드 내 재응찰 v1·v2)
|
||
3. 하단: 임시저장·"견적서 제출(응찰)" — 제출 시 순위 즉시 갱신
|
||
- **상태/컴포넌트**: 라인 테이블(tabular)·PDF 미리보기·버전 이력·AiLabel(BOQ 프리필). 로딩 미리보기 스켈레톤 · 빈 — 신규 견적서 · 에러 — 필수 미입력 인라인. **데이터 원천**: M15·BOQ(부분) → 샘플.
|
||
- **Stitch 프롬프트**:
|
||
|
||
```
|
||
A quotation (bid) authoring and submission screen for a contractor in an exhibition reverse auction, Korean B2B web app, desktop 1440px, light theme, blue #0066B3, purple #6D4AFF for AI prefill. All UI text in Korean. Split: left half a line-item quotation editor titled "견적서 작성" with a table (공종, 자재, 수량, 단가, 금액) rows like "골조 · 알루미늄 프로파일 · 48 · ₩45,000 · ₩2,160,000", a purple note "물량서(BOQ)에서 자동 채움", and computed rows "소계 ₩7,636,000", "부가세 ₩763,600", bold "총액 ₩8,399,600", plus fields "납기 · 유효기간 · 조건". Right half a quotation PDF preview (A4) with a contractor logo, itemized table, bold total, and a signature box, plus a version history list "v1 (라운드1) · v2 (현재)". Sticky bottom: "임시 저장" and primary "견적서 제출(응찰)". Precise document + spreadsheet aesthetic.
|
||
```
|
||
|
||
- **라우트**: `/auctions/:auctionId/quote`. MDI 적용.
|
||
|
||
---
|
||
|
||
### SCR-29 낙찰 비교·선정 (Award) [M15]
|
||
|
||
- **대상**: 발주자(주최자·참가업체) · **모듈/P**: M15 · P1 · **진입 경로**: 옥션 마감 → "견적서 비교"
|
||
- **레이아웃**:
|
||
1. 상단: 옥션 요약(공종·응찰 수·낙찰 기준)
|
||
2. **비교 테이블(전폭)**: 열=업체, 행=총액·항목별 단가·납기·평판·종합점수(가중 스코어 산식 노출 AiLabel). 최적값 셀 하이라이트, 종합점수 내림차순
|
||
3. 우측/하단 — **선정 패널**: 추천 업체(종합점수 1위) + 선정 사유 입력, "낙찰(Award)" → 계약/발주 전환(M6·M9) 링크, 낙찰 통지 미리보기
|
||
- **상태/컴포넌트**: 비교 테이블(sticky 열·하이라이트)·스코어 게이지·AiLabel. 로딩 스켈레톤 · 빈 — "응찰이 없습니다" · 에러 재시도. **데이터 원천**: M15 → 샘플.
|
||
- **Stitch 프롬프트**:
|
||
|
||
```
|
||
An award decision / quotation comparison screen for a buyer in an exhibition reverse auction, Korean B2B web app, desktop 1440px, light theme, blue #0066B3, purple #6D4AFF for AI score, green #0E8A5F highlights. All UI text in Korean. Top: auction summary "A-102 독립부스 시공 · 응찰 5 · 낙찰기준 종합평가". A wide comparison table with contractor columns "업체 A · 업체 B · 업체 C" and metric rows "총액 ₩8.4M / ₩8.7M / ₩8.9M", "골조 단가", "전기 단가", "납기 12일 / 10일 / 14일", "평판 4.8 / 4.6 / 4.2", and a "종합점수" row "92.4 / 89.1 / 84.7" with a small purple chip "AI 가중 스코어"; the best cells are highlighted green, columns sorted by score. Right panel "낙찰 선정": a recommended card "업체 A · 종합 1위", a "선정 사유" textarea, a primary green button "낙찰(Award)", and a note "낙찰 견적서는 계약·발주 문서로 전환됩니다". Decision-support, comparison-heavy aesthetic.
|
||
```
|
||
|
||
- **라우트**: `/auctions/:auctionId/award`. MDI 적용.
|
||
|
||
---
|
||
|
||
### SCR-30 관람객 등록 관리 대시보드 [M10·M11]
|
||
|
||
- **대상**: 주최자 · **모듈/P**: M10 · P1 · **진입 경로**: 사이드바 "관람객"
|
||
- **레이아웃**:
|
||
1. 상단 KPI: 사전등록 12,480 · 체크인 8,210 · 노쇼율 · 바이어 비중 · 리드 생성 수
|
||
2. 좌측 2/3 — **등록 추이 차트**(Recharts Area, 일자별 사전등록/체크인) + 등록 유형 분포(관람객/바이어/VIP)
|
||
3. 우측 1/3 — **등록 폼 관리**: 활성 폼 리스트, AI 폼빌더 진입(F046 AiLabel), 배지 템플릿(M17 연계)
|
||
4. 하단 — **등록자 테이블**: 이름(마스킹)·유형·소속·등록일·체크인 상태·배지 발급 — 개인정보 마스킹·감사 표기
|
||
- **상태/컴포넌트**: KPI·Recharts·등록자 테이블(PII 마스킹)·AiLabel. 로딩 스켈레톤 · 빈 — "사전등록이 아직 없습니다" · 에러 재시도. **데이터 원천**: M10 신규 → 샘플. **PII 준수**(N2).
|
||
- **Stitch 프롬프트**:
|
||
|
||
```
|
||
A visitor registration management dashboard for an exhibition organizer, Korean B2B web app, desktop 1440px, light theme, blue #0066B3, purple #6D4AFF for AI, Korean sans-serif. All UI text in Korean. Sidebar 240px ("관람객" highlighted). Top KPI cards: "사전등록 12,480", "체크인 8,210", "노쇼율 12%", "바이어 비중 34%", "리드 생성 2,140". Main: left 2/3 a chart card "등록·체크인 추이" with a multi-series area chart (blue = 사전등록, slate = 체크인) over dates, and a small donut "등록 유형 (관람객 62% · 바이어 34% · VIP 4%)". Right 1/3 a "등록 폼 관리" card with a form list and a purple button "AI 폼빌더", plus a "배지 템플릿" thumbnail. Bottom: a registrants data table with columns 이름, 유형, 소속, 등록일, 체크인, 배지 — names partially masked like "김**", status pills, zebra striped. Data-rich CRM-style aesthetic with privacy masking.
|
||
```
|
||
|
||
- **라우트**: `/o/:eventId/visitors`. MDI 적용.
|
||
|
||
---
|
||
|
||
### SCR-31 현장 체크인 데스크/키오스크 [M10]
|
||
|
||
- **대상**: 홀매니저·현장 운영 · **모듈/P**: M10 · P1 · **진입 경로**: 운영 대시보드 "체크인" / 키오스크 모드
|
||
- **레이아웃**:
|
||
1. 중앙 — **QR 스캔 존**(대형 카메라 프레임) + 수동 검색(이름·연락처·등록번호)
|
||
2. 스캔 성공 시 — **관람객 카드**: 이름·유형·소속·사진, "즉석 배지 인쇄" 버튼, 재발급
|
||
3. 우측 — **실시간 입장 집계**: 시간대별 체크인 수, 현재 장내 추정 인원, 오프라인 모드 배지("네트워크 불안정 — 로컬 저장 후 동기화")
|
||
4. 키오스크 모드 토글(셀프 체크인 대형 UI)
|
||
- **상태/컴포넌트**: 스캔 프레임·관람객 카드·집계 위젯·오프라인 폴백 배지. 로딩 — 스캔 대기 애니메이션 · 실패 — "등록 정보를 찾을 수 없습니다 — 현장 등록" · 에러 재시도. **데이터 원천**: M10 신규 → 샘플. **오프라인 폴백 필수**(F049).
|
||
- **Stitch 프롬프트**:
|
||
|
||
```
|
||
An on-site check-in desk / kiosk screen for exhibition staff, Korean B2B tool, desktop 1440px (kiosk-friendly), light theme, blue #0066B3, success green #0E8A5F. All UI text in Korean. Center: a large QR scan area with a camera viewfinder frame and text "배지 QR을 스캔하세요", and below it a manual search "이름 · 연락처 · 등록번호로 검색". On a successful scan, a visitor card appears: photo, name "정관람", type chip "바이어", company "(주)미래기술", and buttons "즉석 배지 인쇄" (primary) and "재발급". Right column: a real-time entry widget "실시간 입장" with a small bar chart by hour, a big number "현재 장내 8,210명", and an offline status badge "오프라인 — 로컬 저장 후 동기화". A top-right toggle "키오스크 모드". Fast, high-contrast, glanceable check-in aesthetic.
|
||
```
|
||
|
||
- **라우트**: `/ops/:eventId/checkin`. MDI 적용(운영).
|
||
|
||
---
|
||
|
||
### SCR-32 리드 관리·AI 스코어링 [M10]
|
||
|
||
- **대상**: 참가업체 · **모듈/P**: M10 · P1 · **진입 경로**: 참가업체 포털 "리드" (모바일 리드캡처 SCR-M4의 웹 관리)
|
||
- **레이아웃**:
|
||
1. 상단 KPI: 총 리드 · 핫리드(AI 스코어 상위) · 팔로업 대기 · 전환 추정
|
||
2. 좌측 2/3 — **리드 테이블**: 이름(마스킹)·소속·관심 제품·관심도(별점)·**AI 스코어(0~100 게이지, AiLabel)**·메모·수집 시각. 필터(스코어·태그)
|
||
3. 우측 1/3 — **리드 상세·팔로업**: 선택 리드 프로필, AI 추천 팔로업 문구(EDM 초안 AiLabel), "EDM 발송"(M12 연계)·CSV 내보내기
|
||
- **상태/컴포넌트**: 리드 테이블(PII 마스킹)·AI 스코어 게이지·AiLabel·EDM 초안. 로딩 스켈레톤 · 빈 — "수집된 리드가 없습니다 — 모바일 앱에서 배지를 스캔하세요" · 에러 재시도. **데이터 원천**: M10 신규 → 샘플. **PII 동의·보존**(R10).
|
||
- **Stitch 프롬프트**:
|
||
|
||
```
|
||
A lead management and AI scoring screen for an exhibitor, Korean B2B web app, desktop 1440px, light theme, blue #0066B3, purple #6D4AFF for AI score. All UI text in Korean. Sidebar 240px ("리드" highlighted). Top KPI cards: "총 리드 342", "핫리드 68", "팔로업 대기 120", "전환 추정 24". Main: left 2/3 a leads data table with columns 이름, 소속, 관심 제품, 관심도, AI 스코어, 수집시각 — rows with masked names "김**", companies, interest tags, 5-star interest, and an AI score shown as a small horizontal gauge with number "87" and a purple chip; filter chips "스코어 80+ · 태그". Right 1/3 a lead detail panel: profile, a purple "AI 추천 팔로업" card with a draft message, and buttons "EDM 발송" and "CSV 내보내기". Sales-CRM aesthetic with prominent AI scoring and privacy masking.
|
||
```
|
||
|
||
- **라우트**: `/e/:eventId/booth/:boothId/leads`. MDI 적용.
|
||
|
||
---
|
||
|
||
### SCR-33 EDM·캠페인 관리 [M12]
|
||
|
||
- **대상**: 주최자 · **모듈/P**: M12 · P1 · **진입 경로**: 사이드바 "마케팅"
|
||
- **레이아웃**:
|
||
1. 상단: 캠페인 KPI(발송·오픈율·클릭율·등록 전환) + "새 캠페인"
|
||
2. 좌측 2/3 — **캠페인 리스트**(상태 배지: 초안/예약/발송중/완료) + 성과 미니 지표
|
||
3. 우측 1/3 — **캠페인 빌더**: 세그먼트(사전등록자·과거 관람객·바이어) 선택, AI 카피 초안(AiLabel)·나노바나나 이미지 삽입, 발송 시점(즉시/예약), 미리보기(수신동의·수신거부 준수 표기)
|
||
- **상태/컴포넌트**: 캠페인 리스트·StatusBadge·세그먼트 셀렉터·AiLabel. 로딩 스켈레톤 · 빈 — "캠페인이 없습니다" · 에러 재시도. **데이터 원천**: M12·M10 세그먼트 → 샘플. **정보통신망법 수신동의 준수** 표기.
|
||
- **Stitch 프롬프트**:
|
||
|
||
```
|
||
An EDM / marketing campaign management screen for an exhibition organizer, Korean B2B web app, desktop 1440px, light theme, blue #0066B3, purple #6D4AFF for AI. All UI text in Korean. Sidebar 240px ("마케팅" highlighted). Top: KPI cards "발송 24,000 · 오픈율 38% · 클릭율 9% · 등록전환 1,240" and a primary button "새 캠페인". Left 2/3 a campaign list with rows showing campaign name, a status pill ("초안" gray, "예약" blue, "발송중" amber, "완료" green), audience size, and small open/click metrics. Right 1/3 a "캠페인 빌더" panel: audience segment checkboxes "사전등록자 · 과거 관람객 · 바이어", a purple button "AI 카피 초안", an image slot "나노바나나 예상 이미지 삽입", a send-time toggle "즉시 / 예약", and an email preview with a footer "수신거부 · 정보통신망법 수신동의 준수". Marketing-automation aesthetic.
|
||
```
|
||
|
||
- **라우트**: `/o/:eventId/campaigns`. MDI 적용.
|
||
|
||
---
|
||
|
||
### SCR-34 스폰서십 패키지·판매 관리 [M12 / F070]
|
||
|
||
- **대상**: 주최자 · **모듈/P**: M12 · P1 · **진입 경로**: 사이드바 "스폰서십"
|
||
- **레이아웃**:
|
||
1. 상단 KPI: 스폰서 수 · 판매액 · 잔여 패키지 · 이행물 진행률
|
||
2. 좌측 — **패키지 티어 카드**(다이아몬드/골드/실버: 혜택·가격·잔여 수량·판매 상태)
|
||
3. 우측 — **스폰서·이행물 관리**: 스폰서 리스트(계약·결제 상태), 이행물 체크리스트(로고 노출·부스·연사 세션), 노출·리드·ROI 대시보드 링크(F071)
|
||
- **상태/컴포넌트**: 티어 카드·이행물 체크리스트·StatusBadge. 로딩 스켈레톤 · 빈 — "등록된 스폰서십 패키지가 없습니다" · 에러 재시도. **데이터 원천**: 신규 → 샘플.
|
||
- **Stitch 프롬프트**:
|
||
|
||
```
|
||
A sponsorship package and sales management screen for an exhibition organizer, Korean B2B web app, desktop 1440px, light theme, blue #0066B3, Korean sans-serif. All UI text in Korean. Sidebar 240px ("스폰서십" highlighted). Top KPI cards: "스폰서 18", "판매액 ₩420,000,000", "잔여 패키지 6", "이행물 진행 72%". Left 2/3 sponsorship tier cards in a row — "다이아몬드" (gold accent, benefits list, "₩50,000,000", "잔여 1"), "골드", "실버" — each with a benefits bullet list and a "판매" status. Right 1/3 a "스폰서 관리" panel: a sponsor list with contract/payment status pills, a fulfillment checklist "로고 노출 · 부스 배정 · 연사 세션", and a link "노출·리드·ROI 대시보드". B2B sales/CRM aesthetic with clear tier hierarchy.
|
||
```
|
||
|
||
- **라우트**: `/o/:eventId/sponsorship`. MDI 적용.
|
||
|
||
---
|
||
|
||
### SCR-35 CMS 콘텐츠·게시 워크플로 [M17]
|
||
|
||
- **대상**: 주최자·관리자 · **모듈/P**: M17 · P1 · **진입 경로**: 사이드바 "콘텐츠(CMS)"
|
||
- **레이아웃**:
|
||
1. 좌측 — **콘텐츠 트리/목록**: 페이지·공지·행사 소개·연사·FAQ. 상태 배지(초안→검수→승인→게시), 언어 탭(한/영/중/일)
|
||
2. 중앙 — **콘텐츠 에디터**(블록/리치텍스트, 미디어 라이브러리, 예약 게시), sanitize 표기(XSS N2)
|
||
3. 우측 — **게시 워크플로 패널**: 버전 이력, 검수 요청·승인, 예약 게시 일정, 사이니지 배포 토글(M13 연계)
|
||
- **상태/컴포넌트**: 콘텐츠 트리·리치 에디터·StatusBadge·언어 탭·버전 이력. 로딩 스켈레톤 · 빈 — "콘텐츠가 없습니다 — 새 페이지" · 에러 재시도. **데이터 원천**: M17 신규 → 샘플.
|
||
- **Stitch 프롬프트**:
|
||
|
||
```
|
||
A headless CMS content editor with publishing workflow for an exhibition platform, Korean B2B web app, desktop 1440px, light theme, blue #0066B3, Korean sans-serif. All UI text in Korean. Three-column: left a content tree/list "페이지 · 공지 · 행사 소개 · 연사 · FAQ" with status pills ("초안" gray, "검수" amber, "게시" green) and language tabs "한 · 영 · 중 · 일". Center a block/rich-text editor with a toolbar, a media library strip, a title "행사 소개", body content blocks, and a "예약 게시" datetime field. Right a publishing panel "게시 워크플로": a version history list "v3 (현재) · v2 · v1", a "검수 요청" button, an "승인" button, a schedule "2026.08.01 09:00 예약", and a toggle "사이니지 배포". Clean content-management aesthetic, multilingual affordances.
|
||
```
|
||
|
||
- **라우트**: `/o/:eventId/cms` · 관리자 `/admin/cms`. MDI 적용.
|
||
|
||
---
|
||
|
||
### SCR-36 참가업체 마이크로사이트 편집기 [M17]
|
||
|
||
- **대상**: 참가업체 · **모듈/P**: M17 · P1 · **진입 경로**: 참가업체 포털 "마이크로사이트"
|
||
- **레이아웃**:
|
||
1. 좌측 — **섹션 편집 패널**: 부스 소개·제품·나노바나나 예상샷 갤러리·연락처·미팅 예약 링크(M11), 테마 선택
|
||
2. 중앙 — **라이브 미리보기**(반응형: 데스크톱/모바일 토글) — 공개 뷰(SCR-P5)와 동일 렌더
|
||
3. 우측 — 게시 상태·URL(서브도메인/슬러그)·SEO 메타·다국어 토글
|
||
- **상태/컴포넌트**: 섹션 편집·라이브 프리뷰·반응형 토글·AiLabel(예상샷). 로딩 스켈레톤 · 빈 — 템플릿 선택 안내 · 에러 재시도. **데이터 원천**: M17·M5 이미지 → 부분(이미지 실 가능).
|
||
- **Stitch 프롬프트**:
|
||
|
||
```
|
||
An exhibitor microsite builder screen, Korean B2B web app, desktop 1440px, light theme, blue #0066B3, purple #6D4AFF for AI images. All UI text in Korean. Left panel: section editor list "부스 소개 · 제품 · 예상샷 갤러리 · 연락처 · 미팅 예약" with edit controls and a theme picker. Center: a live preview of a company microsite with a hero banner, company name "(주)한빛로보틱스", a product grid, and an AI-render booth photo gallery with faint watermark "AI 생성 예상 이미지"; a device toggle "데스크톱 / 모바일" above the preview. Right panel: publish status "게시됨", a URL field "hanbit.expo.kintex.kr", SEO meta fields, and language toggle "한 · 영 · 중 · 일". Modern site-builder aesthetic.
|
||
```
|
||
|
||
- **라우트**: `/e/:eventId/microsite`. MDI 적용.
|
||
|
||
---
|
||
|
||
### SCR-37 다국어 콘텐츠 관리 [M17 / F069]
|
||
|
||
- **대상**: 관리자·콘텐츠 담당 · **모듈/P**: M17 · P1 · **진입 경로**: CMS(SCR-35) "다국어" / 관리자 사이드바
|
||
- **레이아웃**:
|
||
1. 상단: 언어 커버리지 요약(한 100% · 영 82% · 중 60% · 일 45%), 대상 언어 선택
|
||
2. **번역 매트릭스 테이블**: 콘텐츠 키 × 언어 셀(원문·번역·상태: 미번역/AI 초벌/검수완료). AI 자동 번역 버튼(AiLabel) + 사람 검수 워크플로
|
||
3. 우측 — 선택 항목 병렬 편집(원문↔번역), 용어집·톤 가이드
|
||
- **상태/컴포넌트**: 번역 매트릭스·커버리지 바·AiLabel·병렬 에디터. 로딩 스켈레톤 · 빈 — "번역 대상 콘텐츠가 없습니다" · 에러 재시도. **데이터 원천**: M17·AI 번역(Claude) → 부분.
|
||
- **Stitch 프롬프트**:
|
||
|
||
```
|
||
A multilingual content management (translation matrix) screen, Korean B2B web app, desktop 1440px, light theme, blue #0066B3, purple #6D4AFF for AI translation. All UI text in Korean. Top: language coverage summary with progress bars "한 100% · 영 82% · 중 60% · 일 45%" and a target-language selector. Center: a translation matrix table with rows = content keys ("행사명", "홀 안내", "참가 신청") and columns = languages (KO source, EN, ZH, JA), each cell showing translated text and a status chip ("미번역" gray, "AI 초벌" purple, "검수완료" green); a purple button "AI 자동 번역". Right panel: a side-by-side editor "원문(한) ↔ 번역(영)" with a glossary and tone guide. Localization-tool aesthetic, dense grid.
|
||
```
|
||
|
||
- **라우트**: `/admin/i18n` · `/o/:eventId/cms/i18n`. MDI 적용.
|
||
|
||
---
|
||
|
||
### SCR-38 업체 수주 부스 대시보드 [업체 포털]
|
||
|
||
- **대상**: 장치·공사업체 · **모듈/P**: 업체 포털(M3·M15·M8 진입 허브) · P1 · **진입 경로**: 업체 포털 로그인 기본 홈
|
||
- **레이아웃**:
|
||
1. 상단 KPI: 수주 부스 · 진행 옥션 · 응찰 대기 · 시공 진행 · 마감 임박
|
||
2. 좌측 2/3 — **수주 부스 리스트**: 행사·부스·발주자·설계 상태·시공 단계 스테퍼(설계→규정검증→반입→시공→검수), [설계 스튜디오]·[규정 리포트]·[반입 예약]
|
||
3. 우측 1/3 — **옥션/견적 현황**: 참여 옥션·내 순위·마감 D-데이, 알림 피드
|
||
- **상태/컴포넌트**: KPI·수주 리스트·시공 스테퍼·StatusBadge·DdayChip. 로딩 스켈레톤 · 빈 — "수주한 부스가 없습니다 — 옥션에 참여하세요" CTA · 에러 재시도. **데이터 원천**: M3·M15 → 부분 샘플.
|
||
- **Stitch 프롬프트**:
|
||
|
||
```
|
||
A contractor's awarded-booths dashboard (home) for exhibition construction, Korean B2B web app, desktop 1440px, light theme, blue #0066B3, Korean sans-serif. All UI text in Korean. Sidebar 240px (업체 포털 menu, "수주 부스" highlighted). Top KPI cards: "수주 부스 8", "진행 옥션 3", "응찰 대기 2", "시공 진행 5", "마감 임박 1". Left 2/3 a list of awarded booth cards, each with event + booth "스마트팩토리 · A-102", client "(주)한빛로보틱스", and a construction stage stepper "설계 → 규정검증 → 반입 → 시공 → 검수" with the current stage highlighted, plus buttons "설계 스튜디오", "규정 리포트", "반입 예약". Right 1/3 an "옥션 현황" panel with participating auctions, my rank "2위", D-day chips, and a notification feed. Operational contractor-portal aesthetic.
|
||
```
|
||
|
||
- **라우트**: `/c/dashboard`. MDI 적용(업체).
|
||
|
||
---
|
||
|
||
### SCR-39 ~ SCR-48 공통 업무 기능 (§5B UIWS 표준 이식)
|
||
|
||
> **UIWS(`workspace/uiws/frontend/src/pages`) 표준을 kintex §1 토큰으로 정합.** 전 포털이 공유하는 공통 업무 레이어(§5B-2). 각 화면은 UIWS 대응 페이지를 레퍼런스로 하되, **레이아웃 언어는 §1(1px 테두리·지브라 테이블·44px 행·StatusBadge)**, MDI 셸(§2.7) 문서 탭으로 열린다. 목록/상세/폼 3형태는 대표 화면 1개 프롬프트로 생성 후 파생.
|
||
|
||
#### SCR-39 업무일지 (worklog) — 전 역할 · P1
|
||
- **레이아웃**: 좌측 필터(기간·작성자·유형)+목록 테이블(날짜·제목·유형·진행상태·시간) / 우측 상세·작성 폼(공수·이슈·댓글). 킨텍스 접합: 홀매니저 현장 일지·업체 시공 일지. 상태: 로딩 스켈레톤·빈("작성된 업무일지가 없습니다")·에러 재시도. 참조: UIWS `worklog/WorklogCalendarPage`·`RelatedDocsPanel`.
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
A daily worklog screen in a Korean B2B enterprise app "KINTEX AI 전시관리", desktop 1440px, light theme, blue #0066B3, 1px borders #E4E7EC, Korean sans-serif (Pretendard). All UI text in Korean. Left sidebar 240px ("업무일지" highlighted). Main split: left 2/3 a filter bar (기간, 작성자, 유형) above a data table with columns 날짜, 제목, 유형, 진행상태, 공수 — zebra striped rows with status pills "진행중 / 완료", 44px row height, sticky header. Right 1/3 a worklog detail/compose panel: date, title, a work-type select, hours input, an issue textarea, and a comment thread with an input. Dense enterprise productivity aesthetic.
|
||
```
|
||
|
||
#### SCR-40 통합 일정·캘린더 (schedule) — 전 역할 · P1
|
||
- **레이아웃**: 월/주 캘린더 + 우측 일정 리스트/작성. 킨텍스 접합: 행사 마일스톤(M6)·옥션 마감·반입 슬롯(M8) 통합 뷰(색상 범례). SCR-15(운영 전 홀 일정)와 구분 — 본 화면은 개인/부서 업무 일정. 상태: 로딩·빈·에러. 참조: UIWS `schedule/PersonalSchedulePage`·`ScheduleCalendar`.
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
A unified personal/team schedule calendar in a Korean B2B app "KINTEX AI 전시관리", desktop 1440px, light theme, blue #0066B3, Korean sans-serif. All UI text in Korean. Sidebar 240px ("일정" highlighted). Main: a large month calendar grid "2026년 8월" with color-coded events — blue "행사 마일스톤", purple "옥션 마감", green "반입 슬롯", plus a legend and view toggle "월 / 주 / 일". Right 1/3 an agenda list for the selected day with event cards and a "일정 추가" button. Clean calendar/scheduling aesthetic.
|
||
```
|
||
|
||
#### SCR-41 쪽지 (message) — 전 역할 · P1
|
||
- **레이아웃**: 3-패널(받은/보낸/작성) — 목록·상세·수신자 선택(부서 트리). 킨텍스 접합: 주최자↔참가↔업체↔홀매니저 행사 내 커뮤니케이션. 상태: 빈("받은 쪽지가 없습니다")·읽음 표시. 참조: UIWS `message/*`.
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
An internal messaging (쪽지) screen with a 3-pane layout in a Korean B2B app "KINTEX AI 전시관리", desktop 1440px, light theme, blue #0066B3. All UI text in Korean. Sidebar 240px ("쪽지" highlighted). Layout: a left folder rail "받은 쪽지 · 보낸 쪽지 · 임시보관", a middle message list with sender, subject, time and unread bold rows, and a right reading pane with message body, sender info, and reply box; a "쪽지 쓰기" button opens a recipient picker with a department tree. Familiar mail-client aesthetic.
|
||
```
|
||
|
||
#### SCR-42 공지 (notice) — 전 역할 · P1
|
||
- **레이아웃**: 공지 목록(중요 상단 고정·팝업 설정) + 상세. 킨텍스 접합: 킨텍스 공지(852건 도메인)·행사 공지 → M17 CMS 채널 정합(경계: 발행성=CMS, 알림성=공지). 상태: 빈·로딩. 참조: UIWS `notice/*`.
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
A notice board (공지사항) screen in a Korean B2B app "KINTEX AI 전시관리", desktop 1440px, light theme, blue #0066B3. All UI text in Korean. Sidebar 240px ("공지" highlighted). Main: a pinned "중요" notice at top with a red badge, then a notice list table (제목, 작성자, 게시일, 조회수) with zebra rows, a search bar, and a "공지 작성" button; clicking opens a detail view with title, meta, body, and attachments. Clean announcement aesthetic.
|
||
```
|
||
|
||
#### SCR-43 의견접수 (opinion) — 전 역할 · P2
|
||
- **레이아웃**: 의견/건의 접수 폼 + 처리 상태 목록(접수→검토→답변). 킨텍스 접합: 고객의소리·규정 문의. 상태: 빈·로딩. 참조: UIWS `opinion/*`.
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
A feedback/suggestion (의견접수) screen in a Korean B2B app "KINTEX AI 전시관리", desktop 1440px, light theme, blue #0066B3. All UI text in Korean. Sidebar 240px ("의견접수" highlighted). Main: a submission form with a category select "규정 문의 / 개선 제안 / 불편 신고", subject, body, attachment, and a "제출" button; below, a list of my submissions with status pills "접수 / 검토중 / 답변완료" and reply preview. Simple support-form aesthetic.
|
||
```
|
||
|
||
#### SCR-44 통합검색 (search) — 전 역할 · P1
|
||
- **레이아웃**: 상단 대형 검색창 + 결과 탭(행사·부스·업체·문서·콘텐츠) + 필터. 킨텍스 접합: 크로스 모듈 검색. AI 자연어 검색 옵션(AiLabel). 상태: 빈("검색어를 입력하세요")·결과 없음. 참조: UIWS `SearchResultsPage`·`NlSearchPage`.
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
A unified/global search results screen in a Korean B2B app "KINTEX AI 전시관리", desktop 1440px, light theme, blue #0066B3, purple #6D4AFF for AI. All UI text in Korean. A large centered search bar with a purple "AI 자연어 검색" toggle. Below, result tabs "전체 · 행사 · 부스 · 업체 · 문서 · 콘텐츠" and a left facet filter, with grouped result cards each showing an icon, title, snippet with highlighted query terms, and module tag. Fast, clean search aesthetic.
|
||
```
|
||
|
||
#### SCR-45 회의록 (meeting · STT→Jasper PDF) — 주최자·홀매니저 · P1
|
||
- **레이아웃**: 회의 목록 + 상세(녹음 재생·STT 전사·요약 AiLabel·액션아이템→일정/서류). 킨텍스 접합: 사전업무협의(D-30) 회의록 자동화. Jasper PDF 출력. 상태: 전사 중 진행 배지·빈·에러. 참조: UIWS `meeting/MeetingDetailPage`.
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
A meeting minutes screen with STT transcription in a Korean B2B app "KINTEX AI 전시관리", desktop 1440px, light theme, blue #0066B3, purple #6D4AFF for AI. All UI text in Korean. Sidebar 240px ("회의록" highlighted). Main: left a meeting list, right a detail view with an audio player, a transcript panel "STT 전사" with speaker labels, a purple "AI 요약" card, an action-items table linking to 일정/서류, and a "회의록 PDF" button. Note "사전업무협의(D-30)". Productivity + AI aesthetic.
|
||
```
|
||
|
||
#### SCR-46 업무보고·통계 (report/stats · Jasper PDF) — 주최자·홀매니저 · P1
|
||
- **레이아웃**: 기간 탭(일/주/월/분기/연) + 요약 지표 + 차트(Recharts) + 작성자/유형별 표. 경계: 경영지표=M16(SCR-13), 여기는 일상 업무보고·통계. Jasper PDF. 상태: 로딩·빈·에러. 참조: UIWS `report/*`·`stats/*`.
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
A work report / statistics screen with period tabs in a Korean B2B app "KINTEX AI 전시관리", desktop 1440px, light theme, blue #0066B3. All UI text in Korean. Sidebar 240px ("업무보고" highlighted). Top: period tabs "일간 · 주간 · 월간 · 분기 · 연간" and a "보고서 PDF" button. Main: summary KPI cards, a bar/line chart (Recharts style) of work volume over time, and a breakdown table by writer and work type with zebra rows and tabular numbers. Reporting aesthetic distinct from executive BI.
|
||
```
|
||
|
||
#### SCR-47 알림센터 (notification) — 전 역할 · P1
|
||
- **레이아웃**: 알림 목록(카테고리: 마감 D-데이·낙찰·승인·결제·시스템)·읽음/안읽음·딥링크(문서 탭 열기)·규칙 설정 링크. WebSocket 실시간. 상태: 빈("새 알림이 없습니다")·로딩. 참조: UIWS `NotificationsPage`·`settings/NotificationRulesPage`.
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
A notification center screen in a Korean B2B app "KINTEX AI 전시관리", desktop 1440px, light theme, blue #0066B3, Korean sans-serif. All UI text in Korean. Sidebar 240px ("알림" highlighted). Main: category filter chips "전체 · 마감 · 낙찰 · 승인 · 결제 · 시스템", a chronological notification list with icon, title, description, timestamp, unread blue dot, and per-item deep-link action; a top-right "모두 읽음" and "알림 규칙 설정" link. Clean notification-inbox aesthetic.
|
||
```
|
||
|
||
#### SCR-48 마이페이지·환경설정 (profile/preference) — 전 역할 · P1
|
||
- **레이아웃**: 좌측 탭(프로필·보안(2FA)·알림 설정·테마/언어·즐겨찾기) + 우측 설정 폼. 킨텍스 접합: 역할별 대시보드 개인화·최근방문. 상태: 저장 토스트·검증. 참조: UIWS `auth/MyProfilePage`.
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
A my-page / settings screen in a Korean B2B app "KINTEX AI 전시관리", desktop 1440px, light theme, blue #0066B3. All UI text in Korean. Sidebar 240px. Layout: a left settings tab rail "프로필 · 보안(2차 인증) · 알림 설정 · 테마·언어 · 즐겨찾기", and a right form panel showing the 프로필 tab: avatar, name, email, department, role badge, and a save button; the 테마·언어 tab shows a light/dark theme toggle and a language select "한 · 영 · 중 · 일". Clean account-settings aesthetic.
|
||
```
|
||
|
||
---
|
||
|
||
### SCR-49 회원가입 (웹) [§5B-3]
|
||
|
||
- **대상**: 참가업체·업체·관람객 셀프 · **P1** · **진입 경로**: 로그인(SCR-01) "회원가입" / 초대 링크
|
||
- **레이아웃**: 중앙 카드(가입 유형 선택: 참가업체/등록업체/관람객), 약관·개인정보 동의, 이메일 인증, 등록업체는 사업자 검증(등록업체 DB 게이트). 스텝(유형→정보→인증→완료). 상태: 검증 인라인·중복 이메일·미등록 업체 안내.
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
A sign-up screen for "KINTEX AI 전시관리", Korean B2B web app, desktop 1440px, light theme, blue #0066B3, on #F9FAFB. All UI text in Korean. Center card with a step indicator "유형 → 정보 → 인증 → 완료". Step 1 shows account-type cards "참가업체 · 등록(장치)업체 · 관람객". The form: name, email with "인증코드 발송" button, password, company/business-number fields (for contractor, with a note "킨텍스 등록업체만 가입 가능"), consent checkboxes "이용약관 · 개인정보 처리방침 동의", and a primary "가입하기" button. Trustworthy onboarding aesthetic.
|
||
```
|
||
|
||
- **라우트**: `/signup`. MDI 비적용(인증 전).
|
||
|
||
---
|
||
|
||
### SCR-50 비밀번호 찾기·재설정 [§5B-3]
|
||
|
||
- **대상**: 전 역할 · **P1** · **진입 경로**: 로그인 "비밀번호 찾기"
|
||
- **레이아웃**: 이메일 입력→인증코드→새 비밀번호(강도 표시). 로그인 실패 잠금 안내. 상태: 코드 만료·불일치·성공 토스트. 참조: UIWS `auth/FindIdPage`·`ResetPasswordPage`.
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
A password reset screen for "KINTEX AI 전시관리", Korean B2B web app, desktop 1440px, light theme, blue #0066B3, on #F9FAFB. All UI text in Korean. Center card with a 3-step flow "이메일 확인 → 인증코드 → 새 비밀번호". Current step shows an email input and "인증코드 발송", then a 6-digit code field with a resend timer, then a new-password field with a strength meter and confirm field, and a primary "비밀번호 재설정" button. A small note about account lockout after failed attempts. Minimal secure-auth aesthetic.
|
||
```
|
||
|
||
- **라우트**: `/forgot-password`. MDI 비적용.
|
||
|
||
---
|
||
|
||
### SCR-51 2차 인증(OTP) 설정 [§5B-3]
|
||
|
||
- **대상**: 관리자·홀매니저·주최자·업체(필수)·관람객(선택) · **P1** · **진입 경로**: 최초 로그인 강제 / 마이페이지 보안 탭
|
||
- **레이아웃**: QR(authenticator 등록)·시크릿 키·6자리 코드 검증. 재설정·해제(관리자는 사용자 OTP 초기화). TOTP RFC6238 설명. 상태: 코드 불일치·성공. 참조: UIWS `auth/OtpSetupPage`.
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
A two-factor authentication (OTP) setup screen for "KINTEX AI 전시관리", Korean B2B web app, desktop 1440px, light theme, blue #0066B3, on #F9FAFB. All UI text in Korean. Center card titled "2차 인증(OTP) 등록": step 1 "인증 앱으로 QR을 스캔하세요" with a QR code image and a secret key text with copy button, step 2 "6자리 코드 입력" with a 6-digit OTP input, and a primary "등록 완료" button; a helper "Google Authenticator 등 TOTP 앱 지원". Security-focused, calm aesthetic.
|
||
```
|
||
|
||
- **라우트**: `/otp-setup`. MDI 비적용(로그인 게이트).
|
||
|
||
---
|
||
|
||
## 3A. 관리자 백오피스 화면 (SCR-A*) — M18 · §5B-1
|
||
|
||
> **admin 백오피스(`admin.`, 웹 전용).** SCR-16(랜딩 대시보드)의 하위 M18 본체 화면. UIWS `system/*` 표준을 §1 토큰으로 정합. 플랫폼 슈퍼관리자는 상단 **테넌트 스위처**, 테넌트 관리자는 자기 전시관 고정(§1A-4). 공통 레이아웃: 좌측 admin 사이드바 + 상단 유틸리티(테넌트 컨텍스트·검색) + 목록/폼 2단. 전 화면 **감사로그 기록**(N2). MDI 적용.
|
||
|
||
### SCR-A1 사용자 관리
|
||
- **레이아웃**: 사용자 목록(이름·이메일·역할·소속·상태·2FA·최근접속) + 필터/검색 + 사용자 폼(역할 배정·상태·OTP 초기화). 6역할+등록업체+관람객 계정. PII 마스킹·감사. 상태: 로딩·빈·에러.
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
A user management admin screen for "KINTEX AI 전시관리" back-office, Korean B2B tool, desktop 1440px, light theme, blue #0066B3, 1px borders #E4E7EC, Korean sans-serif. All UI text in Korean. Left admin sidebar 240px ("사용자 관리" highlighted). Top utility bar with a tenant switcher "KINTEX ▾" and a search box. Main: a users data table with columns 이름, 이메일, 역할, 소속, 상태, 2FA, 최근접속 — role badges (주최자/참가/장치/홀매니저/관리자), status pills (활성/잠금/비활성), a "2FA 설정됨" check, zebra rows, sticky header, and a right-side user detail/edit panel with role assignment, status toggle, and an "OTP 초기화" button. Enterprise admin aesthetic with masked emails.
|
||
```
|
||
|
||
### SCR-A2 역할·권한(RBAC) 관리
|
||
- **레이아웃**: 좌측 역할 트리(플랫폼/테넌트/행사 계층) + 우측 권한 매트릭스(메뉴·기능 × 허용 체크). 플랫폼 vs 테넌트 계층 구분. 상태: 저장·검증.
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
A role & permission (RBAC) management admin screen for "KINTEX AI 전시관리", Korean B2B back-office, desktop 1440px, light theme, blue #0066B3. All UI text in Korean. Left admin sidebar ("역할/권한" highlighted). Layout: a left role tree grouped by tier "플랫폼 · 테넌트 · 행사" with roles like "플랫폼 슈퍼관리자, 테넌트 관리자, 주최자, 참가업체, 장치업체, 홀매니저", and a right permission matrix table with menu/feature rows and allow checkboxes (조회/생성/수정/삭제/승인 columns), a save button. Structured access-control aesthetic.
|
||
```
|
||
|
||
### SCR-A3 공통코드 관리
|
||
- **레이아웃**: 코드 그룹 목록 + 코드 상세(홀·부스유형·공종 14분류·유틸리티 요금코드). 전역 vs 테넌트 오버라이드 표기(§1A-2). 상태: 로딩·빈.
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
A common-code management admin screen for "KINTEX AI 전시관리", Korean B2B back-office, desktop 1440px, light theme, blue #0066B3. All UI text in Korean. Left admin sidebar ("공통코드" highlighted). Split: left a code-group list "홀 · 부스유형 · 공종(14분류) · 유틸리티 요금코드 · 상태", right a code-detail table (코드, 명칭, 정렬, 사용여부) with add/edit rows and a badge distinguishing "전역" vs "테넌트 재정의". Master-data admin aesthetic.
|
||
```
|
||
|
||
### SCR-A4 메뉴 관리
|
||
- **레이아웃**: 메뉴 트리(드래그 재정렬) + 메뉴 속성(역할별 포털 IA §2-1 매핑·권한). 상태: 저장.
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
A menu management admin screen for "KINTEX AI 전시관리", Korean B2B back-office, desktop 1440px, light theme, blue #0066B3. All UI text in Korean. Left admin sidebar ("메뉴 관리" highlighted). Layout: a left draggable menu tree (nested items with drag handles and show/hide toggles), a right menu-property form (메뉴명, 경로, 아이콘, 역할별 노출 checkboxes for 주최자/참가/장치/홀매니저/관리자, 정렬). Tree-editor admin aesthetic.
|
||
```
|
||
|
||
### SCR-A5 감사로그
|
||
- **레이아웃**: 필터(사용자·액션·기간·테넌트) + 로그 테이블(시각·사용자·액션·대상·IP·결과). 승인·낙찰·설계변경·룰셋개정·리드 접근 전수. 내보내기. 상태: 로딩·빈.
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
An audit log admin screen for "KINTEX AI 전시관리", Korean B2B back-office, desktop 1440px, light theme, blue #0066B3, Korean sans-serif. All UI text in Korean. Left admin sidebar ("감사로그" highlighted). Top: filters (사용자, 액션 유형, 기간, 테넌트) and an "CSV 내보내기" button. Main: a dense audit table with columns 시각, 사용자, 액션, 대상, IP, 결과 — rows like "2026-08-01 14:22 · 최매니저 · 낙찰(Award) · 옥션 #A-102 · 성공", monospace timestamps, zebra rows, sticky header. Forensic/compliance aesthetic, high density.
|
||
```
|
||
|
||
### SCR-A6 시스템설정
|
||
- **레이아웃**: 설정 그룹(요율/규정 룰셋 버전·AI 게이트·마감 정책 D-25/D-7·알림·보안) 폼. 상태: 저장·검증.
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
A system settings admin screen for "KINTEX AI 전시관리", Korean B2B back-office, desktop 1440px, light theme, blue #0066B3. All UI text in Korean. Left admin sidebar ("시스템설정" highlighted). Main: grouped setting cards — "마감 정책" (유틸리티 D-25, 신고서류 D-7 numeric fields), "AI 플랫폼 게이트" (모델 라우터 상태 toggles), "알림" (이메일/WebSocket toggles), "보안" (로그인 실패 잠금 횟수, 세션 만료). Each group has a save button. Clean settings-form aesthetic.
|
||
```
|
||
|
||
### SCR-A7 마스터데이터 관리 (홀·요율·요금·부스표준·등록업체)
|
||
- **레이아웃**: 좌측 데이터셋 탭(홀 마스터·요율표·유틸리티 요금·부스 표준·등록업체 DB) + 우측 CRUD 테이블/폼. 킨텍스 실측=테넌트#1 시드. 트렌치 좌표·CAD 업로드(미확보 표기). 상태: 로딩·빈·에러.
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
A master-data management admin screen for "KINTEX AI 전시관리", Korean B2B back-office, desktop 1440px, light theme, blue #0066B3. All UI text in Korean. Left admin sidebar ("마스터데이터" highlighted). Split: left dataset tabs "홀 마스터 · 요율표 · 유틸리티 요금 · 부스 표준 · 등록업체 DB", right a CRUD table for the 홀 마스터 tab with columns 홀, 면적(㎡), 규격, 바닥하중, 부스수 — rows "홀7 · 11,290㎡ · 126×90×12m · 5t/㎡ · 510" with edit buttons, plus a "트렌치 좌표 CAD 업로드" area labeled "미확보 · 킨텍스 협의". Structured data-admin aesthetic with tabular numbers.
|
||
```
|
||
|
||
### SCR-A8 규정 룰셋 버전 관리
|
||
- **레이아웃**: 룰셋 버전 이력(v1.0·v1.1…) + 룰 항목(높이 5m·리깅 6.5~8.5m·복층·방염·소음·이격) 편집 + diff 뷰. 발효일·승인. 상태: 저장·버전 비교.
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
A regulation ruleset version management admin screen for "KINTEX AI 전시관리", Korean B2B back-office, desktop 1440px, light theme, blue #0066B3, Korean sans-serif. All UI text in Korean. Left admin sidebar ("규정 룰셋" highlighted). Split: left a version history list "v1.2 (발효 2026-01-01) · v1.1 · v1.0", right a rules editor listing rule rows "장치물 높이 ≤ 5m", "리깅 6.5–8.5m + 구조계산서 D-7", "복층 ≤ 1/2", "방염 필수", "소음 70–75dB", "이격 벽 30cm·천장 60cm" with editable values and severity (차단/경고), plus a "버전 비교(diff)" button showing changed rules highlighted. Governance/versioning aesthetic.
|
||
```
|
||
|
||
### SCR-A9 테넌트(전시관) 관리·온보딩 [§1A · 플랫폼 슈퍼관리자 전용]
|
||
- **레이아웃**: 테넌트 목록(KINTEX·COEX…: 코드·도메인·활성·행사수·사용자수) + 온보딩 위저드(코드·서브도메인·브랜딩·마스터데이터·관리자 계정·격리 스모크→active). 크로스-테넌트 접근 감사. 상태: 온보딩 단계·검증.
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
A tenant (venue) management and onboarding admin screen for a multi-tenant exhibition SaaS "KINTEX AI 전시관리", Korean B2B back-office, desktop 1440px, light theme, blue #0066B3. All UI text in Korean. Left admin sidebar ("테넌트 관리" highlighted, super-admin only). Main: a tenants table with columns 전시관, 코드, 도메인, 상태, 행사수, 사용자수 — rows "킨텍스 · KINTEX · kintex.wise.ai.kr · 활성 · 24 · 1,280", "코엑스 · COEX · coex.wise.ai.kr · 온보딩중"; a right "전시관 온보딩" wizard panel with steps "테넌트 생성 → 서브도메인 → 브랜딩 → 마스터데이터 입력 → 관리자 계정 → 격리 스모크 → 활성화", each step with a checkmark or current highlight, and a note "코드 배포 없이 데이터 온보딩". Platform-admin, multi-tenant aesthetic.
|
||
```
|
||
|
||
### SCR-A10 AI 플랫폼 설정 (AiConfig) [§6 · F100]
|
||
- **레이아웃**: 모델 라우터 설정(텍스트: Claude 기본→Ollama 폴백 / 이미지: 나노바나나 Gemini), 온도·top_k·RAG 토글, 나노바나나 쿼터·비용 상한(테넌트별), 상태 헬스(모델 가용). 시크릿은 env only(미표시). 상태: 저장·헬스체크. 참조: UIWS `system/aiConfig/AiConfigPage`.
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
An AI platform configuration admin screen (AiConfig) for "KINTEX AI 전시관리", Korean B2B back-office, desktop 1440px, light theme, blue #0066B3, purple #6D4AFF for AI. All UI text in Korean. Left admin sidebar ("AI 플랫폼 설정" highlighted). Main: a "텍스트/추론" card with a model router "기본: Claude → 폴백: Ollama" with health dots, sliders "temperature · top_k", and a "근거 검증(RAG)" toggle; an "이미지(시공 예상)" card showing "나노바나나 (Gemini gemini-3.1-flash-image-preview)" with a per-tenant "생성 쿼터" and "비용 상한" field; a note "API 키는 서버 env로만 관리(표시 안 함)". No secret values shown. Config-panel aesthetic with health indicators.
|
||
```
|
||
|
||
---
|
||
|
||
## 3B. 공개 홍보 사이트 화면 (SCR-P*) — M12 · M17 · MDI 비적용
|
||
|
||
> **공개 사이트 `www/expo.`** — SEO·다국어(한/영/중/일)·딥링크·공유 목적. **MDI 비적용, 전통 페이지 내비(헤더 GNB)**, SSR/정적 생성·CDN. 인증 앱과 별도 렌더 경로. 브랜딩은 테넌트 서브도메인 분기(§1A-3). 디자인은 §1 톤을 공개용으로 확장(넓은 히어로·마케팅 밀도), 라이트 테마.
|
||
|
||
### SCR-P1 공개 홍보 사이트 홈
|
||
- **레이아웃**: 헤더 GNB(행사·참가안내·관람안내·교통·언어) + 히어로(나노바나나 전경 이미지·AI 고지·사전등록 CTA) + 진행/예정 행사 카드 그리드 + 킨텍스 소개·교통(GTX-A 킨텍스역) + 푸터. 상태: 로딩·빈.
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
A public marketing website home page for "KINTEX 전시" exhibition center, Korean, desktop 1440px, light theme, primary blue #0066B3, clean modern marketing design (not MDI). All UI text in Korean. Top header GNB "행사 · 참가안내 · 관람안내 · 교통 · 🌐 언어" with a KINTEX logo. Full-width hero with a photorealistic exhibition hall render (faint watermark "AI 생성 예상 이미지"), a large headline "세계로 통하는 전시, 킨텍스", and a primary CTA "관람 사전등록". Below: a grid of event cards (poster, title, dates, hall, "사전등록" button) for "진행중 · 예정" events, a "오시는 길 · GTX-A 킨텍스역 도보 3분" transport section with a map, and a footer. SEO-friendly, spacious, multilingual public site aesthetic.
|
||
```
|
||
|
||
### SCR-P2 행사 상세 (소개·일정·교통·연사)
|
||
- **레이아웃**: 행사 히어로(배너·기간·홀) + 탭(소개·프로그램/세션·연사·참가업체·교통·FAQ) + 사전등록 고정 CTA. 다국어·공유. 상태: 로딩·빈.
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
A public event detail page for an exhibition, Korean marketing website, desktop 1440px, light theme, blue #0066B3. All UI text in Korean. A hero banner with event title "스마트팩토리 코리아 2026", dates "2026.09.05–09.08", venue "킨텍스 제2전시장 홀7", and a sticky "사전등록" CTA. Below, a tab bar "소개 · 프로그램 · 연사 · 참가업체 · 교통 · FAQ" with the 소개 tab showing rich content sections, a session agenda timeline, and speaker cards with photos. Share buttons and language selector. Attractive public event-page aesthetic.
|
||
```
|
||
|
||
### SCR-P3 공개 인터랙티브 플로어플랜
|
||
- **레이아웃**: 대형 인터랙티브 홀 맵(부스 클릭→업체 정보 팝오버·마이크로사이트 링크), 검색·필터(업종·존), 범례. 관람객 부스 탐색·부스 셀프선택(SCR-20) 진입. 비시각 대안=부스 목록(N1). 상태: 로딩·빈.
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
A public interactive floor plan page for exhibition visitors, Korean marketing website, desktop 1440px, light theme, blue #0066B3. All UI text in Korean. A large interactive top-down hall map with clickable booth rectangles; clicking a booth shows a popover with company name, category, and a "부스 상세" link. A left search/filter panel "업종 · 존 · 키워드" and a booth results list (accessible non-visual alternative), plus a legend "판매 · 예약 · 공용부". Modern, explorable venue-map aesthetic.
|
||
```
|
||
|
||
### SCR-P4 관람객 사전등록 폼
|
||
- **레이아웃**: 다단계 폼(유형 관람객/바이어·정보·관심분야·약관/개인정보 동의·완료→모바일 배지 안내). AI 폼(주최자 구성). 상태: 검증·중복·완료. 개인정보 동의 필수.
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
A public visitor pre-registration form page for an exhibition, Korean marketing website, desktop 1440px, light theme, blue #0066B3, on white. All UI text in Korean. A centered multi-step form with a progress indicator "유형 → 정보 → 관심분야 → 완료". Step shows visitor-type cards "관람객 / 바이어 / VIP", then fields 이름, 이메일, 연락처, 소속, 관심 분야 chips, and consent checkboxes "개인정보 수집·이용 동의(필수) · 마케팅 수신 동의(선택)", and a primary "등록하기" button; completion screen shows a QR badge preview and "모바일 배지가 발급되었습니다". Friendly, trustworthy registration aesthetic.
|
||
```
|
||
|
||
### SCR-P5 참가업체 마이크로사이트 공개 뷰
|
||
- **레이아웃**: 업체 브랜드 히어로 + 제품 + 나노바나나 예상샷 갤러리(워터마크) + 부스 위치(플로어플랜 딥링크) + 미팅 예약 CTA(M11). SEO·다국어. 상태: 로딩·빈.
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
A public exhibitor microsite page, Korean marketing website, desktop 1440px, light theme, blue #0066B3. All UI text in Korean. A branded hero with company name "(주)한빛로보틱스" and tagline, a product showcase grid, an AI-render booth photo gallery with faint watermark "AI 생성 예상 이미지", a "부스 위치 · A-102 홀7" card linking to the floor plan, and a "미팅 예약" CTA. Clean company-microsite aesthetic, multilingual.
|
||
```
|
||
|
||
### SCR-P6 참가/부스 신청 문의
|
||
- **레이아웃**: 참가 안내(부스 유형·요금 개요) + 문의 폼(회사·담당·규모·희망 홀·메시지) + 담당 연락처. 셀프서비스→로그인 유도. 상태: 검증·전송 완료.
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
A public "exhibit with us" inquiry page for an exhibition center, Korean marketing website, desktop 1440px, light theme, blue #0066B3. All UI text in Korean. Top: a "참가 안내" section with booth-type cards (조립부스 / 독립부스 / 프리미엄) and a rate overview. Below: an inquiry form with fields 회사명, 담당자, 연락처, 예상 규모, 희망 홀, 문의 내용, and a "문의 보내기" button, plus a contact info block and a link "이미 계정이 있으신가요? 로그인". Lead-generation marketing aesthetic.
|
||
```
|
||
|
||
### SCR-P7 입장권 예매 (티켓팅)
|
||
- **대상**: 일반 대중·관람객(비로그인 게스트 + 회원) · **모듈**: M10(티켓) · 결제=M9 연계 · **라우트**: `/tickets/:eventId/purchase` (공개, MDI 비적용·SEO)
|
||
- **레이아웃**(위→아래, 중앙 정렬 스텝 폼 720px):
|
||
1. 상단: 행사 요약 배너(포스터·행사명·기간·홀) + 스텝 진행 인디케이터 "행사·권종 → 예매자 → 결제 → 완료" (StatusBadge 진행 톤 재사용, pill 스텝)
|
||
2. **1단계 권종 선택**: 티켓 종류 카드 리스트 — 일반(₩0 사전등록/현장 유료) · 바이어(무료·자격심사) · 단체(10매↑ 할인) · VIP. 각 카드 = 권종명·설명·가격(tabular numerals)·수량 스테퍼(−/＋). 소계·할인·합계 실시간 요약(우측 sticky 요약 카드). 회원이면 로그인 배너 "로그인하면 예매 내역이 자동 저장됩니다"
|
||
3. **2단계 예매자 정보**: 게스트=이름·이메일·연락처(마스킹 저장), 회원=자동 채움. 단체는 대표자+동반자 명단(CSV 업로드 옵션). 관심분야 chips(선택). 개인정보 수집·이용 동의(필수)·마케팅 수신(선택) 체크
|
||
4. **3단계 결제**: 결제수단 선택(카드·간편결제·계좌이체) — **PG(결제대행) 위임 안내 문구 상시 노출**("결제는 PG사 보안 페이지에서 진행되며, 카드정보는 본 사이트에 저장되지 않습니다"). **카드번호 입력 UI 없음**(PG 리다이렉트/모듈 자리표시 카드). 무료 권종은 결제 단계 자동 스킵
|
||
5. **4단계 완료**: 예매번호(굵게)·발급 티켓 QR 미리보기·"이메일로 티켓을 보냈습니다" + CTA "모바일 티켓 지갑 열기"(SCR-M15 딥링크)·"예매 확인/취소"(SCR-P8)
|
||
- **상태**: 로딩(권종·재고 조회 스켈레톤) · 빈(판매 티켓 없음 "현재 예매 가능한 입장권이 없습니다") · 에러(재고 소진 시 해당 권종 "매진" 배지+비활성, 결제 실패 인라인 재시도) · degraded(PG 어댑터 미연결 시 "결제 준비 중 — 잠시 후 다시 시도" 안내, 무료 권종은 정상). 정원/재고는 서버 권위.
|
||
- **데이터 원천**: M10 티켓·권종·재고 + M9 결제 어댑터(PG) → 신규·샘플 시연. 개인정보 마스킹·WCAG AA·라이트/다크 토큰 준수, 신규 토큰 없음.
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
A public ticket purchase (ticketing) page for an exhibition, Korean marketing website, desktop 1440px, light theme, primary blue #0066B3, on white, form container ~720px centered. All UI text in Korean. Top: an event summary banner (poster thumbnail, title "스마트팩토리 코리아 2026", dates "2026.09.05–09.08", venue "제2전시장 홀7") and a pill step indicator "행사·권종 → 예매자 → 결제 → 완료" with step 1 active. Left main column shows ticket-type selection cards — "일반권 ₩0(사전등록)", "바이어권 무료·자격심사", "단체권 10매↑ 10% 할인 ₩9,000", "VIP권 ₩50,000" — each card with name, short description, price in tabular numerals, and a quantity stepper (− / value / ＋); one type shows a red "매진" badge and disabled state. A right sticky summary card lists selected tickets, 소계, 할인, and a bold 합계 with a primary button "다음 단계". Include a subtle blue login banner "로그인하면 예매 내역이 자동 저장됩니다". Below reference the later steps: a payment step must show method chips "카드 · 간편결제 · 계좌이체" and a persistent gray notice "결제는 PG사 보안 페이지에서 진행되며, 카드정보는 본 사이트에 저장되지 않습니다" (NO card number input fields). Trustworthy, conversion-focused e-commerce checkout aesthetic; rounded 8px cards, 4px inputs, WCAG AA contrast.
|
||
```
|
||
|
||
### SCR-P8 예매 확인·취소
|
||
- **대상**: 일반 대중·관람객(비로그인 게스트 조회 + 회원) · **모듈**: M10(티켓) · 환불=M9 연계 · **라우트**: `/tickets/lookup` · `/tickets/:orderNo` (공개)
|
||
- **레이아웃**(위→아래):
|
||
1. 상단: "예매 확인·취소" 타이틀 + 조회 폼 — 예매번호 + 이메일(게스트) 또는 "로그인하여 내 예매 보기"(회원). 인증 후 조회
|
||
2. **예매 상세 카드**: 행사·예매번호·예매일·결제금액(tabular)·상태 배지(예매완료/사용됨/취소/환불완료). 티켓 리스트(권종·수량·매수별 QR 썸네일→탭 시 확대). 예매자 정보(이메일·연락처 **마스킹** 표시 jo***@ex***.com, 010-****-1234)
|
||
3. **취소·환불 정책 패널**: 환불 규정 표(D-7 100% · D-3 50% · 당일 0% 등, 서버 권위) + 현재 예상 환불액 하이라이트 + 안내 문구. CTA "예매 취소" (사용됨/기간 경과 시 비활성)
|
||
4. 취소 확인 모달: 환불 정책 재고지·환불 수단(원결제수단 자동)·"취소하기"(error 톤) — PG 환불도 어댑터 위임 명시
|
||
- **상태**: 로딩(조회 스켈레톤) · 빈/미일치("일치하는 예매를 찾을 수 없습니다 — 예매번호·이메일 확인") · 에러(취소 마감·이미 사용·PG 환불 실패 인라인) · degraded(PG 환불 어댑터 미연결 시 "환불 접수됨 — 처리까지 영업일 소요" 안내). 취소 가능 여부·환불액은 서버 권위.
|
||
- **데이터 원천**: M10 예매·티켓 + M9 환불 어댑터 → 신규·샘플. PII 마스킹 필수·WCAG AA·라이트/다크 준수, 신규 토큰 없음.
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
A public "check & cancel my ticket booking" page for an exhibition, Korean marketing website, desktop 1440px, light theme, primary blue #0066B3, error red #D92D20, on white. All UI text in Korean. Top: title "예매 확인 · 취소" with a lookup form — inputs "예매번호" and "이메일", a primary "조회하기" button, and a secondary link "로그인하여 내 예매 보기". Below (results state): a booking detail card showing event title, 예매번호 "KTX-2026-018245", 예매일, 결제금액 in tabular numerals, and a green status badge "예매완료"; a ticket list with rows (권종, 수량) each showing a small QR thumbnail; a booker info block with MASKED contact "jo***@ex***.com · 010-****-1234". A right/lower panel "취소·환불 정책" shows a refund table (D-7 100%, D-3 50%, 당일 0%) with the current 예상 환불액 highlighted, and a red outline button "예매 취소" that opens a confirmation modal restating the policy and refund method. Note "환불은 PG사를 통해 원결제수단으로 처리됩니다". Clean, reassuring self-service booking-management aesthetic; 8px cards, WCAG AA.
|
||
```
|
||
|
||
---
|
||
|
||
## 3C. 3-트랙 관문·서브홈 (SCR-T*) — 공개 대외 접점 · MDI 비적용 · SEO/다국어
|
||
|
||
> **v2.2 신설.** 코엑스 3-사이트 IA(VISITOR·BUSINESS·CYBER)를 킨텍스 단일 도메인 위에 **visitor / business / agency 3-트랙**으로 정형화한 **얕은 트랙 진입 레이어**다(근거: `docs/PLANNING.md` §2-2 v3.2, `docs/analysis/coex-website.md`, planner 지시서 `_workspace/plan_3track.md`). 신규 화면은 **SCR-T0~T3 4종만**이며 나머지 대외 콘텐츠는 기존 SCR-P*·관람객 앱·업무 딥라우트를 **재사용**한다(회귀 0 목표).
|
||
>
|
||
> **라우트(얕은 트랙 진입 4개, 신규)**: `/`(SCR-T0 관문)·`/visitor`(SCR-T1)·`/business`(SCR-T2)·`/agency`(SCR-T3). 기존 딥 라우트(`/o/`·`/e/`·`/c/`·`/gallery/`·`/tickets/`)·MDI 셸(§2.7)·티켓 공개 라우트(SCR-P7/P8)·세션키는 **불변**.
|
||
>
|
||
> **SCR-HOME(인증 홈)과의 관계**: **관문 SCR-T0(`/`)은 미인증 전용 공개 랜딩**이다. 로그인 성공 시 흐름은 기존대로 `/home`(SCR-HOME, AppShell 셸 내부 핀 홈)으로 랜딩한다 — 관문은 SCR-HOME을 대체하지 않으며, 인증 세션이 있는 사용자가 `/`에 도달하면 트랙 셸이 `/home`으로 우선 리다이렉트(딥링크·SEO 크롤러·게스트 티켓 조회는 예외로 공개 유지). 즉 SCR-T0=대외 유입 관문, SCR-HOME=업무 세션 홈으로 역할이 분리된다.
|
||
>
|
||
> **디자인 토큰**: §1 라이트 테마·`primary-600 #0066B3`·Pretendard·8px 카드·WCAG AA 준수. **신규 토큰 0.** AI 생성 이미지(나노바나나)는 워터마크 "AI 생성 예상 이미지" 상시 노출 규칙 유지. 이모지 금지·선(stroke) SVG 아이콘.
|
||
|
||
### 3C-V. 공개 사이트 비주얼·모션 스펙 (전 SCR-T*·SCR-P* 공통 비주얼 레이어 · v2.4 신설)
|
||
|
||
> **v2.4 신설.** 소유자 확정("코엑스처럼 세련되게 전면 비주얼 리뉴얼 — 히어로 배경·애니메이션·비주얼, 지금 착수")에 따라, 기존 §3C 3-트랙(SCR-T0~T3)·§3B 공개 홍보(SCR-P*)의 **구조는 그대로 두고 그 위에 비주얼·모션 레이어만 얹는다**(구조 재설계 아님, 시각 격상). 대상: **미인증 공개 트랙 전체**(SCR-T0 관문·SCR-T1 visitor 메인·SCR-T2 business·SCR-T3 agency·SCR-P1~P8). **인증 업무 셸(AppShell/MDI)·관리자(SCR-A*)·모바일 앱은 대상 아님**(밀도·성능 우선 원칙 유지). **신규 컬러 토큰 0** — §1 팔레트를 CSS 변수로 주입하고, 본 절은 **모션 토큰·이미지 소스·비주얼 폴리시**만 신설한다. business/agency는 코엑스식 B2B 실무 톤을 유지하되 히어로 배경·리빌·카드 hover 등 **공통 모션만 절제 적용**(마케팅 과장 금지) — visitor(SCR-T1)만 풀 시네마틱 격상.
|
||
|
||
**V-1. 비주얼 폴리시(공통 원칙)**
|
||
|
||
- **풀블리드·공백 없음**(전역 NFR [[ui-fullbleed-responsive]] 준수): 히어로·밴드는 뷰포트 전폭, 좌우 거터 여백 금지. 콘텐츠는 `max-width 1440px` 중앙 정렬 그리드 안에서 리듬을 준다(밴드 배경만 전폭).
|
||
- **섹션 리듬**: 밴드(전폭 배경/딤) ↔ 카드 그리드(라이트 서피스) 교대. 섹션 세로 패딩 데스크톱 `96px`(태블릿 64px·모바일 40px), 섹션 헤더는 아이라인(eyebrow, 12px 트래킹 라벨)+H2. 인접 섹션 배경 톤을 번갈아 대비.
|
||
- **여백·라운드·그림자 토큰**(§1-4 재사용): 카드 라운드 8px 상한, 칩 pill. 그림자는 무거운 박스섀도 대신 **소프트 앰비언트**(hover 시에만 Level 2로 상승, Y8 Blur24 12%). 히어로/밴드 위 텍스트는 딤 오버레이로 대비 확보.
|
||
- **타이포 위계 강화**: 히어로 헤드라인 Display(1순위 visitor는 `clamp(32px,4vw,56px)` 확대 허용), 서브카피 H3, 섹션 eyebrow+H2. 숫자(통계·D-day·기간)는 tabular numerals.
|
||
- **선(stroke) SVG 아이콘 전용·이모지 금지**(불변). AI 산출물은 §1-4 AiLabel(보라)+워터마크 규칙 유지.
|
||
- **다크/라이트 양 테마**(SCR-T1은 토글 제공 — §3C SCR-T1 예외 규정): 히어로는 시네마틱 딤 톤(다크 계열 오버레이)이 기본 인상, 본문 섹션은 라이트 기본. 색은 CSS 변수 주입(hex 하드코딩 금지)로 양 테마 대응, **양 테마 WCAG AA**.
|
||
- **포스터/이미지 카드 정책**: visitor 쇼케이스·행사 레일은 큰 세로 2:3 포스터 카드 그리드/캐러셀. `poster_url`/배경 이미지 부재 시 **브랜드 그라디언트 + 옅은 기하 패턴(그리드/도트) 폴백**(V-4).
|
||
|
||
**V-2. 모션 토큰(신설 — duration/easing, CSS 커스텀 프로퍼티)**
|
||
|
||
| 토큰 | 값 | 용도 |
|
||
|---|---|---|
|
||
| `--motion-fast` | `150ms` | hover 색/보더, 칩 상태 |
|
||
| `--motion-base` | `240ms` | 카드 리프트·이미지 줌·버튼 |
|
||
| `--motion-slow` | `400ms` | 스크롤 리빌 기본 |
|
||
| `--motion-hero` | `600ms` | 히어로 인트로·대형 리빌 |
|
||
| `--motion-countup` | `1200ms` | 숫자 카운트업 |
|
||
| `--ease-emphasized` | `cubic-bezier(0.2,0,0,1)` | 리빌·히어로(감속 강조) |
|
||
| `--ease-standard` | `cubic-bezier(0.4,0,0.2,1)` | 일반 hover/전환 |
|
||
| `--ease-decelerate` | `cubic-bezier(0,0,0.2,1)` | 진입(카운트업·슬라이드인) |
|
||
|
||
**V-3. 섹션별 배경·애니메이션 트리거 매핑**
|
||
|
||
| 섹션(적용 화면) | 배경 | 애니메이션 | 트리거·파라미터 |
|
||
|---|---|---|---|
|
||
| **풀블리드 히어로**(T0·T1·T2·T3·P1) | `/media/hero/*.jpg`(전시장 전경) + 딤 그라디언트 오버레이 + AI 워터마크. 없으면 **그라디언트+패턴 폴백** | ① 인트로 리빌(로드 시 헤드라인·CTA opacity+translateY(16px)→0, `--motion-hero`) ② **라이트 파랄랙스**(배경 레이어 scroll에 `translate3d(0,y*0.18,0)`, 전경/텍스트는 고정 또는 y*0.06) | 인트로=마운트 1회 · 파랄랙스=scroll(rAF 스로틀, 데스크톱만·모바일/reduced-motion 비활성) |
|
||
| **통계 밴드**(T1·P1·P2) | 라이트 서피스 또는 밴드 딤 | **숫자 카운트업**(0→목표, `--motion-countup`, ease-decelerate) | IntersectionObserver 최초 진입 1회(`.pub-countup[data-count-to]`) |
|
||
| **AI 기능 쇼케이스 타일**(T1) | 라이트, AI 카드 `ai-surface #F5F3FF` | **스태거 리빌**(카드 순차 fade/slide-up 60~80ms 간격) + hover 리프트 | 컨테이너 진입 시 스태거 1회 · hover=`--motion-base` |
|
||
| **전시 쇼케이스/행사 레일**(T0·T1·P1) | 라이트 | ① 카드 **hover 리프트**(translateY(-4px)+그림자) + **이미지 줌**(scale 1.04, overflow hidden 컨테이너) ② 레일 **오토스크롤**(가로) | hover=`--motion-base` · 오토스크롤=`data-interval`(기본 4500ms), hover/focus 시 일시정지, reduced-motion 시 미동작 |
|
||
| **AI 기획 브리핑(연/월)**(T1) | 라이트 | 타임라인 바 진입 시 좌→우 grow(scaleX) + AI 요약 태그 fade-in | 진입 1회 · 연/월 전환 시 콘텐츠 크로스페이드(`--motion-base`) |
|
||
| **방문 가이드/가치제안 카드**(T1·T2·T3) | 라이트 | 스태거 리빌 + hover 리프트 | 진입 스태거 1회 |
|
||
| **전시장 소개/CTA 밴드**(T1·T2·T3·P2) | `/media/bands/*.jpg`(전폭 밴드) + 딤. 없으면 그라디언트 폴백 | 밴드 진입 리빌(fade/slide-up) · 배경 미세 파랄랙스(선택, 약 y*0.08) | 진입 1회 |
|
||
| **공통 섹션 블록 전반** | — | **스크롤 리빌**(opacity 0→1 + translateY(20~24px)→0, `--motion-slow` ease-emphasized) | IntersectionObserver `threshold 0.15`·`once`(재역방향 재생 금지) |
|
||
|
||
**V-4. 이미지 소스 매핑(`/media/` — build 내장, 폴백 규칙)**
|
||
|
||
- **원칙**: 히어로/밴드 비주얼은 **프론트 build 내장 정적 에셋 `/media/`** 에서 로드(외부 실시간 호출 없음·온프레미스, CDN 캐시). 나노바나나 AI 생성 전경은 워터마크 "AI 생성 예상 이미지" 상시. 파일 부재 시 **그라디언트+패턴 폴백**으로 무공백 렌더(레이아웃 시프트 0).
|
||
- **디렉터리 계약(제안)**:
|
||
- `/media/hero/` — 풀블리드 히어로 배경. `hero-gateway.jpg`(T0)·`hero-visitor.jpg`(T1)·`hero-business.jpg`(T2)·`hero-agency.jpg`(T3) (+`@2x`·`.webp` 우선, `.jpg` 폴백)
|
||
- `/media/hero/fg/` — 라이트 파랄랙스용 전경 레이어(선택, 투명 PNG/webp)
|
||
- `/media/bands/` — 섹션 밴드 배경(`band-venue.jpg` 전시장 소개 등)
|
||
- `/media/poster/` — 행사 포스터 폴백 placeholder(그라디언트 생성)
|
||
- `/media/patterns/` — 폴백 패턴 SVG(`grid.svg`·`dots.svg`·`mesh.svg`, `fill:none;stroke:currentColor` 라인 패턴)
|
||
- **로딩 성능**: 히어로 이미지는 `<link rel="preload">`+`fetchpriority="high"`·`loading="eager"`, 폴드 하단 포스터/밴드는 `loading="lazy"`+`decoding="async"`. `srcset`/`sizes`로 DPR·뷰포트 대응, `.webp` 우선 `<picture>`.
|
||
- **폴백 그라디언트**: `linear-gradient(135deg, var(--primary-700), var(--primary-600))` + 패턴 SVG 오버레이(투명도 8~12%). 포스터 폴백은 그라디언트 위 행사명 텍스트 중앙(SCR-HOME 폴백 규칙과 동일).
|
||
|
||
**V-5. 접근성(prefers-reduced-motion) — 필수**
|
||
|
||
- `@media (prefers-reduced-motion: reduce)`: **파랄랙스 전면 비활성**(배경 고정)·**오토스크롤 정지**(수동 화살표만)·**카운트업은 최종값 즉시 표시**·스크롤 리빌은 **transform 제거·opacity 1 즉시**(콘텐츠 지연 노출 금지)·hover 대형 transform 억제(색/보더 전환만 허용).
|
||
- 애니메이션은 **전부 장식**이며 정보 전달·조작 가능성을 모션에 의존하지 않는다(모션 꺼도 전 콘텐츠·기능 동등 접근). 포커스 링(`primary-600` 2px)·`aria-live`(AI 답변) 규정은 §3C 원본 유지.
|
||
- 히어로 배경 위 텍스트는 딤 오버레이로 **양 테마 WCAG AA** 대비 확보. 색만으로 상태 전달 금지(배지 텍스트 병기).
|
||
- 모션 정지 시에도 레이아웃 시프트 0(리빌은 최종 위치 기준, 이미지 폭·높이 예약).
|
||
|
||
**V-6. 성능 가이드(CSS 우선·60fps)**
|
||
|
||
- **CSS 우선**: 스크롤 리빌·hover·오토스크롤은 **CSS `transition`/`@keyframes` + IntersectionObserver로 클래스 토글**(`.is-visible`)로 구현. 애니메이션 라이브러리 불필요(기본 리빌엔 JS 애니메이션 금지). 파랄랙스만 `requestAnimationFrame` 스로틀 스크롤 핸들러(passive listener).
|
||
- **컴포지터 친화 프로퍼티만 애니메이트**: `transform`·`opacity`만 사용. `width/height/top/left`·`box-shadow` 직접 애니메이트 금지(그림자는 pseudo-element opacity 트랜지션으로 대체). `will-change`는 애니메이션 직전 부여·종료 후 제거(상시 부여 금지).
|
||
- **60fps 목표**: 파랄랙스 계산 rAF 1프레임 1회·오프스크린 요소 무시. 오토스크롤은 `transform: translateX` + `ScrollTimeline` 또는 rAF, hidden 탭에서 정지(`visibilitychange`).
|
||
- **이미지**: 위 V-4 preload/lazy·webp·srcset. 폴드 상단 CLS 방지(에스펙트 비율 예약). 저사양/데이터세이버(`prefers-reduced-data`) 시 히어로 정적·패턴 폴백으로 강등.
|
||
- **60fps 미달 시 강등 순서**: 파랄랙스 → 오토스크롤 → 스태거(→ 최종 리빌만 유지). 리빌은 항상 유지 가능한 최소 비용.
|
||
|
||
**V-7. 프론트 구현 계약(클래스/훅 ↔ 모션 매핑 — kintex-frontend-dev)**
|
||
|
||
- **CSS 커스텀 프로퍼티**(공개 트랙 루트에 주입): `--motion-fast/base/slow/hero/countup`, `--ease-emphasized/standard/decelerate`(V-2 값). §1 컬러도 동일 방식 변수 주입(라이트/다크).
|
||
- **`.pub-reveal`** + IntersectionObserver로 `.is-visible` 토글 → opacity+translateY 리빌(공통 섹션 블록·카드). **`.pub-reveal--stagger > *`** = 자식 순차 지연(`--i` 인덱스 * 70ms).
|
||
- **`.pub-hero`** > **`.pub-hero__bg`**(파랄랙스 레이어, `data-parallax="0.18"`)·`.pub-hero__fg`(전경 y*0.06)·`.pub-hero__overlay`(딤). 인트로는 마운트 시 `.is-in`.
|
||
- **`.pub-card--lift`**(hover translateY(-4px)+그림자 pseudo) · **`.pub-card__media`**(overflow hidden) > `img`(hover `scale(1.04)`).
|
||
- **`.pub-countup`**(`data-count-to`·`data-suffix`) = IO 진입 1회 카운트업, reduced-motion 시 최종값.
|
||
- **`.pub-rail--auto`**(`data-interval`) = 오토스크롤 레일(hover/focus/visibility 정지, reduced-motion 미동작).
|
||
- **폴백 유틸**: `.pub-fallback-gradient`·`.pub-pattern-grid|dots`(V-4). 이미지 `onerror`→폴백 클래스 토글.
|
||
- **적용 범위 가드**: 위 클래스·훅은 **PublicShell 하위(공개 트랙)만** 스코프. AppShell/MDI·SCR-A*·모바일 앱에는 미주입(성능·밀도 보존).
|
||
- **src 무수정**: 본 절은 스펙만 — 실제 클래스/CSS 구현은 kintex-frontend-dev 후속.
|
||
|
||
**V-8. Stitch 프롬프트 — 프리미엄 전시장 공개 홈페이지(비주얼·모션 격상판, SCR-T1 재생성용)**
|
||
|
||
```
|
||
A premium, visually striking public homepage for "KINTEX AI 전시·행사시스템" (an AI exhibition & event operations platform), the visitor track, for the general public — styled like a world-class convention-center website (COEX / Messe / global expo caliber). Korean UI text only, exactly as given; desktop 1440px, full-bleed responsive with NO empty side gutters; support BOTH light and dark theme (keep body sections light by default, but render the hero as a cinematic dark-tinted centerpiece). Primary blue #0066B3, deep #004C86, AI purple #6D4AFF; use line (stroke) SVG icons only, NO emoji. Product name must read exactly "KINTEX AI 전시·행사시스템".
|
||
|
||
HERO (full-bleed, cinematic, the centerpiece): a large photorealistic exhibition-hall panorama photograph as the background, covered by a subtle dark-to-transparent gradient overlay for text contrast and a faint corner watermark "AI 생성 예상 이미지". Give it depth like a light parallax scene (a softly blurred far background plus a crisper foreground layer). Over it, a strong typographic hierarchy: a large display headline "무엇이든 물어보세요 — AI가 관람을 안내합니다", a subheading "전시 일정 · 오시는 길 · 입장권 · 부스 위치를 대화로 한 번에", and the visual focus — a wide conversational AI assistant search bar with a small purple "AI 도우미" tag and a send (paper-plane) icon, plus example question chips "이번 주말 로봇 전시 있어? · 킨텍스 주차 어디에 해요? · 가족과 볼만한 전시 추천". Under the hero: two CTAs "사전등록" and "입장권 예매", and a subtle animated scroll-down cue.
|
||
|
||
Design should imply tasteful, restrained, performant motion: sections fade / slide up on scroll, KPI numbers count up, poster cards lift with a soft shadow and their images zoom on hover, and a poster rail auto-scrolls.
|
||
|
||
Below the hero, with generous section rhythm (alternating full-bleed bands and light card grids): (1) a stats band "누적 전시 1,200+ · 참가업체 30,000+ · 연 관람객 500만+" in big tabular numerals (implying count-up). (2) an "AI가 도와드립니다" capability showcase of 4–6 cards, each with a purple "AI" tag, a stroke icon, a title and one line ("AI 관람 도우미", "AI 전시 추천", "AI 길찾기", "AI 일정 도우미", "AI 혼잡·대기 안내", "AI 시공 예상 이미지"). (3) an "AI 전시·행사 기획 브리핑" section with a "연간 / 월간" toggle and a 12-month timeline plus a purple "AI 요약" headline. (4) a rich "진행 중 · 예정 전시" showcase — a grid/carousel of large 2:3 exhibition poster cards (poster image, title, dates "2026.09.05–09.08", hall label, a status badge, a "D-25" day chip, "사전등록"), with tabs "진행 중 | 이번 달 | 다음 달" and a venue filter "전체 · 제1전시장 · 제2전시장". (5) a "방문 가이드" 2×3 grid of stroke-icon cards ("교통 · GTX-A 킨텍스역 도보 3분", "주차 · 실시간 안내", "실내 길찾기", "편의시설", "접근성 · 휠체어·수어통역", "고객문의"). (6) a full-width "전시장 소개" band with a background photograph and KINTEX scale figures. Footer with company info, "오시는 길 · GTX-A 킨텍스역", SNS, language.
|
||
|
||
Where poster or hero/band images are missing, fall back to a branded blue gradient with a faint geometric grid/dot line-pattern overlay (no blank areas, no layout shift). Sophisticated, immersive, conversion-oriented global exhibition-center aesthetic; rounded 8px cards, soft ambient shadows, tabular numerals, strong type hierarchy, WCAG AA contrast in BOTH themes; all motion must respect prefers-reduced-motion (parallax and auto-scroll disabled, reveals instant when reduced).
|
||
```
|
||
|
||
**V-9. Stitch 프롬프트 — 3-트랙 관문 비주얼 격상판(SCR-T0 재생성용, 동일 톤)**
|
||
|
||
```
|
||
Re-generate the "track gateway" landing page for "KINTEX AI 전시·행사시스템" with a premium, cinematic visual upgrade in the same tone as the visitor homepage. Korean UI only, desktop 1440px, full-bleed (no side gutters), light theme body with a dark-tinted cinematic hero; primary blue #0066B3, AI purple #6D4AFF; line (stroke) SVG icons only, NO emoji.
|
||
|
||
Full-bleed HERO: a photorealistic exhibition-hall panorama background with a dark-to-transparent overlay and a faint watermark "AI 생성 예상 이미지", light-parallax depth, a large display headline "KINTEX AI 전시·행사시스템", a subheading "전시 기획부터 시공·관람까지 전 과정을 AI로 자동화", and CTAs "관람 사전등록" and "참가 문의". Keep the top header with the wordmark, the 3-tab track switcher "관람 · 비즈니스 · 협력사" (none active), and utilities "언어 · 로그인".
|
||
|
||
Directly below, three large branching track cards in one row that lift on hover with an image zoom — card 1 "관람객" (slightly larger, primary) "행사 일정 · 사전등록 · 오시는 길" button "관람 트랙 →"; card 2 "주최 · 참가 (비즈니스)" "대관 · 자동견적 · 부스 신청 · 시공 시안" button "비즈니스 트랙 →"; card 3 "공사 · 협력사 (에이전시)" "등록업체 · 공사 옥션 · 작업신고" button "협력사 트랙 →". Then a "진행 중 · 예정 전시" auto-scrolling rail of 2:3 poster cards (poster, title, dates, hall, "D-25" chip, "사전등록"). Sections fade/slide up on scroll. Footer with "오시는 길 · GTX-A 킨텍스역". Missing images fall back to a branded gradient with a faint grid/dot pattern. Rounded 8px cards, soft shadows, tabular numerals, WCAG AA; all motion respects prefers-reduced-motion.
|
||
```
|
||
|
||
### 3C-0. 공개 셸(PublicShell) + 3-트랙 스위처 (전 SCR-T*·SCR-P* 공통 크롬)
|
||
|
||
- **재사용 전제**: SCR-P*가 쓰는 **PublicShell**(전통 페이지 헤더 GNB·푸터·SSR/CDN·MDI 비적용)을 그대로 재사용하되, **상단에 3-트랙 전환 탭(TrackSwitcher)을 추가**한다. 관문(SCR-T0)은 트랙 미선택 상태, 서브홈(T1~T3)은 해당 트랙 탭 활성.
|
||
- **TrackSwitcher 사양**(헤더 최상단 유틸 행 또는 GNB 좌측): 세그먼트 3탭 `관람 · 비즈니스 · 협력사`(라벨=`track.shell.tab.visitor|business|agency`), 각 탭 클릭 시 `/visitor`·`/business`·`/agency` 이동. 좌측에 **KINTEX AI 전시·행사시스템** 워드마크(클릭 시 `/` 관문 복귀). 우측 유틸: 언어 전환(한/영/중/일 `track.shell.lang.*`)·`로그인`(→ SCR-01)·인증 세션 시 `내 홈`(→ `/home`).
|
||
- **활성 표시**: 활성 트랙은 `primary-600` 밑줄+굵게, 색 외 `aria-current="page"` 병기(색만으로 전달 금지). 모바일(390px)은 탭을 상단 가로 세그먼트로 유지(스크롤 없이 3탭 균등폭).
|
||
- **테넌트 정합(§1A-3)**: 셸은 서브도메인 테넌트 컨텍스트 하에서 해당 테넌트 콘텐츠만 노출(워드마크·브랜딩 분기). 트랙 셸은 `tenant_id` 격리 위에서 동작.
|
||
- **접근성**: TrackSwitcher는 `role="tablist"`(수평)·로빙 탭인덱스·포커스 링 `primary-600` 2px. 푸터 `role="contentinfo"`. **i18n 네임스페이스 `track.shell.*`**.
|
||
|
||
### SCR-T0 트랙 관문 랜딩 (3-트랙 분기 관문) [공통 · 공개 · 루트 `/`]
|
||
|
||
- **대상**: 일반 대중·대외 유입 전원(미인증) · **모듈/P**: 공통 대외 접점(M12 일부 재사용) · P1 · **진입 경로**: 루트 도메인 `/` 직접 진입·검색·광고·QR. 인증 세션 시 `/home` 우선 리다이렉트(위 SCR-HOME 관계 참조)
|
||
- **레이아웃**(위→아래, PublicShell·풀블리드 마케팅 밀도):
|
||
1. **PublicShell 헤더 + TrackSwitcher**(관문=트랙 미선택, 워드마크·언어·로그인)
|
||
2. **제품 히어로**: 풀폭 히어로 — 나노바나나 전시 전경 이미지(워터마크 "AI 생성 예상 이미지") 배경 + 대형 헤드라인 "**KINTEX AI 전시·행사시스템**" + 서브카피(전시 기획→시공→관람 전 과정 AI 자동화) + 보조 CTA "관람 사전등록"·"참가 문의". **관람객 시각 1순위**(코엑스 VISITOR 메인 톤)
|
||
3. **3-트랙 대형 분기 카드**(3열 균등, 화면 중앙 히어로 하단 정박): ① `관람객` — "행사 일정·사전등록·오시는 길", CTA "관람 트랙 →"(`/visitor`) ② `주최·참가(비즈니스)` — "대관·자동견적·부스 신청·시공 시안", CTA "비즈니스 트랙 →"(`/business`) ③ `공사·협력사(에이전시)` — "등록업체·공사 옥션·작업신고", CTA "협력사 트랙 →"(`/agency`). 각 카드=아이콘(선 SVG)·대상 라벨·1줄 가치제안·대표 액션. 관람 카드를 시각적으로 약간 크게(1순위)
|
||
4. **행사 하이라이트 레일**(기존 P1 행사 그리드 일부 재사용): 진행 중·예정 행사 가로 스크롤 포스터 카드 6~8장(포스터·행사명·기간·홀·D-day·"사전등록")
|
||
5. **PublicShell 푸터**(회사·교통 GTX-A 킨텍스역·언어·정책)
|
||
- **구성요소**: HeroBanner(AI 워터마크)·TrackCard×3·EventRail(포스터 카드)·TrackSwitcher·LanguageSelector·DdayChip·StatusBadge(행사 상태)
|
||
- **데이터 원천**: 히어로 배경 = **SCR-01 login-slides 자산/API 재사용**(나노바나나 전경) · 3-트랙 카드 = 정적 구성(트랙 메타) · 행사 하이라이트 = `/api/public/events`(SCR-P1 그리드 자산 재사용, event 테이블 poster_url) → 실 API 재사용, 트랙 카드만 신규 정적
|
||
- **상태**: 로딩(행사 레일 스켈레톤) · 빈(공개 행사 없음 → 히어로+트랙 카드만, 레일 "예정된 전시가 없습니다") · 에러(행사 API 실패 시 트랙 카드는 정상 노출·레일만 재시도) · 인증 세션 감지 시 `/home` 리다이렉트
|
||
- **접근성**: 트랙 카드는 카드 전체 클릭 가능+명시 링크 텍스트, 히어로 배경 이미지 위 헤드라인 대비 확보(오버레이 딤), 색 외 라벨 병기, WCAG AA. **i18n 네임스페이스 `track.gateway.*`**(+ 공유 `track.shell.*`)
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
A public landing "track gateway" home page for the product "KINTEX AI 전시·행사시스템" (an AI exhibition & event operations platform), Korean, desktop 1440px, light theme, primary blue #0066B3, purple #6D4AFF for AI accents, clean modern marketing design (not an MDI app shell). All UI text in Korean; use line (stroke) SVG icons only, NO emoji. Top: a public header with a "KINTEX AI 전시·행사시스템" wordmark on the left, a 3-tab track switcher "관람 · 비즈니스 · 협력사" (none active on this gateway), and right utilities "언어(한/영/중/일) · 로그인". Full-bleed hero with a photorealistic exhibition-hall render as background (with a faint watermark "AI 생성 예상 이미지" and a dim overlay for text contrast), a large headline "KINTEX AI 전시·행사시스템", a subheading "전시 기획부터 시공·관람까지 전 과정을 AI로 자동화", and two CTAs "관람 사전등록" and "참가 문의". Directly below the hero: three large branching track cards in one row — card 1 "관람객" (slightly larger, primary) with a stroke icon, text "행사 일정 · 사전등록 · 오시는 길" and a button "관람 트랙 →"; card 2 "주최 · 참가 (비즈니스)" with text "대관 · 자동견적 · 부스 신청 · 시공 시안" and a button "비즈니스 트랙 →"; card 3 "공사 · 협력사 (에이전시)" with text "등록업체 · 공사 옥션 · 작업신고" and a button "협력사 트랙 →". Below: a horizontal scrolling rail of event poster cards (poster, title, dates, hall, a "D-25" day chip, "사전등록" button) titled "진행 중 · 예정 전시". Footer with company info and "오시는 길 · GTX-A 킨텍스역". Spacious, multilingual, conversion-oriented gateway aesthetic; rounded 8px cards, WCAG AA contrast.
|
||
```
|
||
|
||
### SCR-T1 visitor 메인 (관람객 공개 홈 · AI 관람 도우미 중심 · 세련된 마케팅 홈페이지) [visitor · 공개 · `/visitor`]
|
||
|
||
> **v2.3 격상.** 기존 v2.2 "visitor 서브홈(가이드 허브)"을 **일반 대중 대상 세련된 공개 마케팅 홈페이지**로 격상하고, **화면 중심 요소를 대화형 "AI 관람 도우미"로 재구성**한다(소유자 지시 2026-07-12: "비지터가 가장 알고 싶어하는 정보를 AI로 쉽게"). business(SCR-T2)·agency(SCR-T3) 메인은 여전히 **B2B 업무 진입 톤**이며, 본 화면만 코엑스/글로벌 전시장 홈페이지 수준의 마케팅 톤(풀블리드 히어로·타이포 위계·공백 없는 밀도·전환 지향)으로 차별화한다. 기존 §3C 공개 셸(PublicShell)·TrackSwitcher·라우트(`/visitor`)·데이터 재사용 원칙·신규 토큰 0은 유지한다.
|
||
|
||
- **대상**: 일반 대중·관람객(게스트+회원, 미인증 기본 랜딩) · **모듈/P**: M10(사전등록·티켓)·M11(비즈매칭·세션)·M13(실내 길찾기)·M12(공지·홍보)·**AI 라우터(Claude→Ollama 폴백, 공개 행사 데이터)** · P1 · **진입 경로**: 미인증 기본(§2-3 순서 5 `resolveLandingTrack→visitor`)·관문 SCR-T0 "관람 트랙"·TrackSwitcher "관람"·직접 `/visitor`·검색/광고/QR
|
||
- **화면 목표(관람객 관심 우선순위)**: ① 지금/곧 어떤 전시 + 관심사 맞춤 추천 ② 가는 길·주차·소요시간 ③ 입장 방법(사전등록·입장권·무료/유료) ④ 부스 위치·볼거리·이벤트(wayfinding) ⑤ 편의시설·접근성. 이 5가지를 **AI 관람 도우미 하나의 자연어 입력으로 관통**시키고, 스크롤 하위 섹션은 동일 정보를 시각적으로 재확인시킨다.
|
||
- **레이아웃**(위→아래, PublicShell·풀블리드 마케팅 밀도·반응형 풀스크린):
|
||
1. **PublicShell 헤더 + TrackSwitcher**("관람" 활성·`aria-current`) + 우측 유틸(언어 한/영/중/일·**라이트/다크 테마 토글**·`로그인`·인증 시 `내 홈`)
|
||
2. **풀블리드 히어로 + AI 관람 도우미(중심 요소)**:
|
||
- 배경 = 대형 전시장 전경 비주얼(나노바나나 AI 생성, 워터마크 "AI 생성 예상 이미지" 상시·텍스트 대비용 딤 오버레이). 헤드라인 "**무엇이든 물어보세요 — AI가 관람을 안내합니다**"(H1/Display) + 서브카피 "전시 일정·오시는 길·입장권·부스 위치를 대화로 한 번에".
|
||
- **AI 관람 도우미 대화 입력창(히어로 정중앙·대형)**: 폭 넓은 자연어 질문 인풋(placeholder 로테이션 "이번 주말 로봇 전시 있어?" → "킨텍스 주차 어디에 해요?" → "가족과 볼만한 전시 추천") + 우측 전송 버튼(선 SVG send 아이콘) + 좌측 AiLabel(보라 `ai-accent` "AI 도우미"). 인풋 하단 **예시 질문칩(자주 묻는 것)** 5개: `이번 주말 로봇 전시 있어?` · `킨텍스 주차 어디에 해요?` · `가족과 볼만한 전시 추천` · `사전등록 어떻게 해요?` · `GTX-A로 얼마나 걸려요?`(칩 클릭=즉시 질의).
|
||
- **AI 답변 패널(질의 시 인풋 아래 확장·대화형)**: 답변 텍스트 + **구조화 결과 카드**(매칭 전시=포스터·행사명·기간·홀·D-day·"사전등록"/교통=경로·소요시간·주차 카드/입장=사전등록·입장권 CTA/부스·wayfinding 딥링크) + **후속 질문칩**("무료인가요?"·"길찾기 열기"·"티켓 예매") + 하단 고지문 "AI 생성 답변 — 정확한 정보는 공식 안내를 확인하세요"(제거 불가) + 근거 출처 링크. AI 산출물은 §1-4 AiLabel(보라)로 구분.
|
||
- 보조 CTA(인풋 하단·항상 노출): "사전등록"·"입장권 예매"(→ SCR-P4·P7).
|
||
3. **AI 기능 쇼케이스 타일(히어로 직하·AI 전면 노출 — 소유자 지시 2026-07-12)**: "이 시스템의 AI가 해주는 것"을 관람객이 한눈에 알도록 **AI 능력 카드 그리드**(4~6타일, 각 카드 좌상단 AiLabel 보라·선 SVG 아이콘·제목·1줄 설명·바로가기). 대표 타일: ① **AI 관람 도우미**(자연어 질문·위 히어로 입력창으로 스크롤/포커스) ② **AI 전시 추천**(관심사 맞춤 큐레이션→§4 추천 레일) ③ **AI 길찾기**(실내 wayfinding·최적 동선, M13 딥링크) ④ **AI 일정 도우미**(관심 세션·동선 기반 관람 코스 자동 구성, M11) ⑤ **AI 혼잡·대기 안내**(시간대별 관람 추천, degraded 시 정적 안내) ⑥ **AI 시공 예상 이미지**(나노바나나 — 참가·주최 대상 능력 홍보, "비즈니스 트랙에서" 안내). AI가 시스템 전면에 있음을 시각적으로 각인시키는 것이 목적(밀도 유지·공백 금지).
|
||
4. **AI 전시·행사 기획 브리핑(연간·월간 선제 제시 — 소유자 지시 2026-07-12)**: 단발 질의응답을 넘어 **AI가 개최 예정 전시·행사를 먼저 큐레이션**하는 섹션. 상단에 **연/월 관점 토글** — ① `연간(올해)` = 12개월 **연간 타임라인**(월별 레인 위 전시·행사 바/도트, 카테고리 색·규모 표시, 성수기 하이라이트) + 좌상단 **AiLabel 보라 "AI 요약"** 헤드라인(예: "2026년은 상반기 스마트팩토리·로봇, 하반기 헬스케어·친환경 전시가 축을 이룹니다") + 분기별 핵심 3~5건 카드 ② `월간(월 선택)` = 선택 월 캘린더/리스트(해당 월 전시·행사 카드·개막일·홀·D-day) + **AI 월간 요약**(예: "이번 달은 로봇·헬스케어 전시가 집중됩니다 · 주말 방문 추천"). 연/월 전환·이전/다음 이동 시 AI가 해당 기간 데이터를 근거로 요약·추천 갱신. **중복 회피**: 하단 "진행 중/이번 달/다음 달" 쇼케이스(레이아웃 5)와 달리 본 섹션은 **연간 기획 관점(연 타임라인 + 기간 요약)**이 차별점이며, 월간 뷰는 쇼케이스 카드 데이터와 정합(동일 event 소스, 표현만 캘린더/요약).
|
||
5. **진행 중·예정 전시 쇼케이스**(SCR-HOME 쇼케이스 레일 패턴 재사용·시각적으로 풍부): 세로 2:3 포스터 카드 그리드/캐러셀 8~12장(포스터·행사명·기간·`hall_label`·상태 배지·D-day·"사전등록") + 탭 `진행 중 | 이번 달 | 다음 달` + 전시장 세그먼트 필터(전체/제1·제2전시장, 동적 옵션). `poster_url` 부재 시 그라디언트+행사명 폴백.
|
||
6. **관심사 맞춤 추천 레일**(M11·AI): "당신의 관심사에 맞는 전시"(관심 분야 칩 선택→AI 추천, AiLabel) — 미선택 시 인기·추천 큐레이션. 관심 분야 알림 유도("관심 분야 알림 받기").
|
||
7. **방문 가이드 허브**(코엑스 가이드 차용 — 2×3 아이콘 카드, 선 SVG): ① 교통(GTX-A 킨텍스역 도보 3분·광역버스·소요시간) ② 주차(iparking 실시간·요금·게이트) ③ **실내 길찾기**(M13 wayfinding 딥링크) ④ 편의시설(식음·수유실·물품보관·ATM) ⑤ 접근성·편의(휠체어·수어통역 고지) ⑥ 고객문의(FAQ·연락처).
|
||
8. **관람객 여정 안내(3-스텝)**: `사전등록 → 배지/QR 발급 → 현장 체크인` 가로 스텝(각 1줄 설명·해당 딥링크 SCR-P4·M5·SCR-31), 티켓→체크인→배지 흐름 시각화.
|
||
9. **공지·뉴스**: 최근 공지/보도 5건 리스트(§5B notice 공개 서브셋 재사용)+더보기.
|
||
10. **전시장 소개**: 킨텍스 규모·홀 규격·부대시설 요약 밴드(+공개 홍보 SCR-P2 링크).
|
||
11. **PublicShell 푸터**: 회사정보·오시는 길(GTX-A 킨텍스역)·SNS·고객문의·정책·언어.
|
||
- **구성요소**: AiVisitorAssistant(대화 입력·예시칩·답변 패널·AiLabel)·AiCapabilityTiles(AI 기능 쇼케이스 4~6타일)·**AiPlanningBriefing(연/월 토글·연간 타임라인·월간 캘린더/리스트·AI 요약 태그)**·HeroBanner(AI 워터마크)·EventShowcaseRail(포스터 카드)·RecommendRail(관심사·AI)·GuideHubCard×6·JourneyStepper(3-스텝)·NoticeList·VenueIntroBand·TrackSwitcher·LanguageSelector·ThemeToggle·CTA(사전등록·티켓·알림)
|
||
- **데이터 원천 (★근거 = 사전 크롤 적재 온프레미스 DB — 실시간 외부 크롤 아님, 소유자 지시 2026-07-12)**:
|
||
- **AI 관람 도우미** = **신규 공개 엔드포인트 제안 `POST /api/public/ai/visitor-assistant`**(질의 body·비인증·CORS·레이트리밋·PII 미수집; 응답 = 답변 텍스트 + 구조화 결과 참조(eventId·가이드 키·CTA 딥링크) + **근거 출처(DB 레코드 id·출처 라벨)**). 백엔드는 **기존 AiTextRouter(Claude→Ollama 폴백)** 가 **미리 크롤해 DB에 적재한 공개 데이터만을 컨텍스트/근거로 RAG 답변**한다(실시간 외부 호출 없음·온프레미스·근거 인용·환각 방지 §1-4). 답변 근거 DB 테이블(예시 계약): 전시=`exhibition`/`event`(크롤 34건+, `poster_url`·기간·홀·카테고리), 교통·오시는 길=`transport_info`(경로·수단·소요시간), 주차=`parking_info`(위치·요금·게이트·실시간 여부 플래그), 입장·티켓=`ticket_policy`/M10, 편의시설=`amenity_info`, 방문 가이드/FAQ=`visitor_guide`, 부스·wayfinding=`booth`/`floorplan`. **AI는 이 테이블 밖 지식으로 답하지 않으며(범위 밖=degraded 안내), 각 답변에 참조 DB 레코드를 인용**. **계약은 제안 — 백엔드 후속(공개 조회 API가 크롤 적재 DB에서 서빙).**
|
||
- **AI 전시·행사 기획 브리핑(연간·월간)** = **신규 공개 엔드포인트 제안 `GET /api/public/events/planning?view=year|month&year=YYYY&month=MM`** — **크롤 적재 `exhibition`/`event` 테이블을 개최연·월 기준 그룹 조회**(기간·`poster_url`·카테고리·홀). **AI 기간 요약**(연간/월간 헤드라인)은 **AiTextRouter(Claude→Ollama 폴백)** 가 **해당 기간 DB 데이터만을 근거로 요약·추천**(외부 실시간 호출 없음·근거 인용·§1-4 AiLabel). 요약은 캐시(기간별)로 서빙. **계약은 제안 — 백엔드 후속(DB 서빙).** 월간 뷰는 쇼케이스(레이아웃 5)와 동일 event 소스로 정합.
|
||
- 전시 쇼케이스·추천 = `/api/public/events` ← **크롤 적재 `exhibition`/`event` 테이블**(`poster_url`, SCR-P1/HOME 자산 재사용) · AI 기능 타일 = 정적 구성(AI 능력 메타)+각 기능 딥링크 · 사전등록/티켓 = SCR-P4/P7 딥링크(M10 `ticket_policy`) · 실내 길찾기 = M13 wayfinding(SCR-M6/M9 계열, `floorplan`) 딥링크 · 방문 가이드 = **크롤 적재 `visitor_guide`/`transport_info`/`parking_info`/`amenity_info`**(정적 폴백) · 공지·뉴스 = §5B notice `/work/notice` 공개 서브셋(+크롤 보도자료) · 전시장 소개 = CMS/정적(M17). **모든 공개 조회는 DB 서빙(외부 실시간 크롤 없음)·SEO·다국어 적용, MDI 비적용**
|
||
- **상태**:
|
||
- **AI 도우미** — 대기(placeholder 로테이션·예시칩) · 생각 중(타이핑 인디케이터·"답변 생성 중…") · 성공(답변+결과 카드+**근거 DB 출처 인용**) · **degraded(AI 라우터 미가용 → "AI 도우미 점검 중 — 크롤 적재 데이터 검색으로 안내" 폴백: 질의어로 DB(`exhibition`/`visitor_guide` 등) 직접 검색+가이드 링크 노출)** · 에러(재시도) · 빈 결과("해당 정보를 찾지 못했어요 — 전체 일정/가이드 보기", DB 근거 범위 밖 질의는 "공식 안내에서 확인" 유도)
|
||
- **AI 기능 타일** — 정적 상시 노출(로딩 없음) · 각 타일 대상 기능 미가용 시 해당 타일 "준비 중" 배지(예: 나노바나나 시공 이미지=비즈니스 트랙 안내)
|
||
- **AI 기획 브리핑** — 로딩(타임라인/캘린더 스켈레톤·"AI 요약 생성 중…") · 성공(기간 데이터+AI 요약 태그) · **degraded(AI 요약 미가용 → 요약 태그 숨김, 기간 전시·행사 데이터는 DB로 정상 노출)** · 빈(해당 연/월 개최 없음 "이 기간 예정된 전시가 없습니다") · 에러(재시도) · 연/월 전환 시 부분 로딩
|
||
- **쇼케이스/추천** — 로딩 스켈레톤 · 빈("예정된 전시가 없습니다") · 에러(영역별 재시도) · 관심사 미선택(인기 큐레이션)
|
||
- **공지/가이드** — 로딩 스켈레톤 · 빈 · 가이드 허브·전시장 소개는 크롤 적재 DB(`visitor_guide` 등)/정적이라 상시 노출
|
||
- **접근성**: AI 입력창 `role="search"`+명시 라벨·예시칩 버튼 명확 텍스트, 답변 패널 `aria-live="polite"`(스트리밍 답변 스크린리더 고지), 답변 내 결과 카드 링크 텍스트 명시, AI 라벨 색 외 텍스트 병기, 히어로 배경 위 헤드라인 대비 확보(딤 오버레이), 가이드·접근성 카드 자체가 WCAG AA·수어/휠체어 정보 제공, 테마 토글 키보드 조작·포커스 링 `primary-600` 2px. 색만으로 상태 전달 금지. **라이트/다크 양 테마 모두 WCAG AA**. **i18n 네임스페이스 `track.visitor.*`**(+ 공유 `track.shell.*`)
|
||
- **테마 주의**: 본 공개 마케팅 홈페이지는 소유자 지시로 **라이트/다크 테마 토글을 제공**한다(§1-5의 업무 셸 라이트 단일 원칙에 대한 **공개 트랙 마케팅 예외**). 색은 §1 토큰을 CSS 변수로 주입(하드코딩 hex 금지)해 양 테마 대응, 라이트가 기본.
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
A premium exhibition-center marketing homepage for the product "KINTEX AI 전시·행사시스템" (an AI exhibition & event operations platform), visitor track, for the general public. Korean, desktop 1440px, full-bleed responsive layout, modern conversion-oriented marketing aesthetic (NOT an MDI business app shell). Primary blue #0066B3, purple #6D4AFF for AI accents; support BOTH light and dark theme (show LIGHT as default). All UI text in Korean exactly as given; use line (stroke) SVG icons only, NO emoji. Product name must read exactly "KINTEX AI 전시·행사시스템".
|
||
|
||
Top: a clean public header with the "KINTEX AI 전시·행사시스템" wordmark on the left, a 3-tab track switcher "관람 · 비즈니스 · 협력사" with "관람" active (underlined, aria-current), and right utilities "언어(한/영/중/일) · 라이트/다크 토글 · 로그인".
|
||
|
||
HERO (full-bleed, the centerpiece): a large photorealistic exhibition-hall panorama as background (with a faint watermark "AI 생성 예상 이미지" and a dim overlay for text contrast). Centered over it: a big headline "무엇이든 물어보세요 — AI가 관람을 안내합니다" and a subheading "전시 일정 · 오시는 길 · 입장권 · 부스 위치를 대화로 한 번에". The visual focus is a large conversational AI ASSISTANT search bar in the center: a wide natural-language question input with a rotating placeholder "이번 주말 로봇 전시 있어?", a small purple "AI 도우미" label on the left and a send (paper-plane) icon button on the right. Directly below the input, a row of example question chips: "이번 주말 로봇 전시 있어?", "킨텍스 주차 어디에 해요?", "가족과 볼만한 전시 추천", "사전등록 어떻게 해요?", "GTX-A로 얼마나 걸려요?". Show one AI answer panel expanded below the input in a chat style: an answer paragraph with a purple "AI" tag, structured result cards (a matched exhibition poster card with title/dates/hall/"사전등록", a transport card "GTX-A 킨텍스역 도보 3분 · 소요 약 40분", an entry card "무료 · 사전등록 권장"), follow-up chips "무료인가요? · 길찾기 열기 · 티켓 예매", and a small disclaimer "AI 생성 답변 — 정확한 정보는 공식 안내를 확인하세요". Under the hero, two secondary CTAs "사전등록" and "입장권 예매".
|
||
|
||
Immediately below the hero, prominently, an "AI가 도와드립니다" capability showcase — a row/grid of 4 to 6 cards that advertise what THIS system's AI does, each with a small purple "AI" tag, a stroke SVG icon, a title and one line: "AI 관람 도우미 · 무엇이든 물어보세요", "AI 전시 추천 · 관심사 맞춤 큐레이션", "AI 길찾기 · 실내 최적 동선", "AI 일정 도우미 · 나만의 관람 코스", "AI 혼잡·대기 안내 · 여유로운 시간 추천", "AI 시공 예상 이미지 · 부스 미리보기". This section must make it obvious at a glance that the platform is AI-powered.
|
||
|
||
Next, an "AI 전시·행사 기획 브리핑" section where the AI proactively curates upcoming exhibitions by period. It has a view toggle at top: "연간 (올해)" and "월간" (with a month picker "2026년 3월 ◂ ▸"). In the "연간" view, show a 12-month annual timeline (a horizontal row of month lanes Jan–Dec with colored event bars/dots grouped by category and highlighted peak seasons), with a prominent purple "AI 요약" headline card reading "2026년은 상반기 스마트팩토리·로봇, 하반기 헬스케어·친환경 전시가 축을 이룹니다" and 3–5 quarterly highlight cards. Below that, a compact "월간" summary example with a purple "AI 요약" tag "이번 달은 로봇·헬스케어 전시가 집중됩니다 · 주말 방문 추천" and a small calendar/list of that month's exhibitions (title, opening date, hall, D-day). Make it clearly AI-curated and forward-looking, distinct from the "진행 중/이번 달/다음 달" showcase below.
|
||
|
||
Scroll sections below: (1) "진행 중 · 예정 전시" showcase — a rich grid/carousel of 2:3 poster cards (poster image, title, dates "2026.09.05–09.08", hall label, a status badge, a "D-25" day chip, "사전등록"), with tabs "진행 중 | 이번 달 | 다음 달" and a venue filter "전체 · 제1전시장 · 제2전시장". (2) "당신의 관심사에 맞는 전시" recommendation rail with interest chips and a small purple "AI 추천" tag. (3) "방문 가이드" hub as a 2×3 grid of stroke-icon cards: "교통 · GTX-A 킨텍스역 도보 3분", "주차 · 실시간 주차 안내", "실내 길찾기", "편의시설 · 식음·수유실·물품보관", "접근성 · 휠체어·수어통역 안내", "고객문의 · FAQ·연락처". (4) a 3-step visitor journey "사전등록 → 배지/QR 발급 → 현장 체크인". (5) a "공지 · 뉴스" list of 5 recent items with "더보기". (6) a "전시장 소개" band with KINTEX scale/hall figures. Footer with company info, "오시는 길 · GTX-A 킨텍스역", SNS links, 고객문의, language.
|
||
|
||
All exhibition, transport, parking, entry and amenity data shown here is served from a pre-crawled on-premise database (not live external calls); the AI assistant answers ONLY from this stored data and cites its source. Spacious yet dense (no large empty gaps), sophisticated global exhibition-center homepage feel, rounded 8px cards, tabular numerals for dates, WCAG AA contrast in both themes.
|
||
```
|
||
|
||
### SCR-T2 business 서브홈 (비즈니스 안내·진입 홈) [business · 공개 · `/business`]
|
||
|
||
- **대상**: 전시주최자·참가업체(미인증 대외) · **모듈/P**: M1(대관·자동견적)·M3/M4(부스 신청·유틸리티)·M6(서류) 안내 · P1 · **진입 경로**: 관문 SCR-T0 "비즈니스 트랙" · TrackSwitcher "비즈니스" · 직접 `/business`
|
||
- **레이아웃**(위→아래, PublicShell·SCR-P6 확장·코엑스 BUSINESS+CYBER 차용):
|
||
1. **PublicShell 헤더 + TrackSwitcher**("비즈니스" 활성)
|
||
2. **비즈니스 히어로**: B2B 실무 톤 헤드라인 "전시 개최·참가, 온라인 신청 일원화" + "로그인"·"신청/문의" CTA
|
||
3. **2-분기 가치 제안 카드**(2열 대형): ① **주최자** — 홀 임대 절차(문의→가견적→계약→배정) + "자동견적(M1)"·"홀 배정·플로어플랜(M2)" 안내 + 요금/시설 규격 개요 + CTA "대관 문의·로그인" ② **참가업체** — 부스 신청·서류·시공 시안(부스 유형·유틸리티 신청 M4·규정 사전검증·나노바나나 시공 시안 M5) + CTA "참가 신청·로그인". **온라인 신청 일원화 강조**(코엑스 CYBER 차용 — "모든 신청·결제를 온라인에서")
|
||
4. **임대 절차 흐름 스텝**(코엑스 BUSINESS 임대절차): 가로 스텝 인디케이터 "문의 → 가견적 → 계약 → 홀 배정 → 부스 신청 → 시공·검수"(각 스텝 1줄 설명, 해당 모듈 배지)
|
||
5. **요금·서류 안내**: 부스 유형·요율 개요(SCR-P6 재사용) + 주요 서류(배정신청서·방염·구조계산서) 다운로드/안내
|
||
6. **로그인/문의 CTA 밴드**: "이미 계정이 있으신가요? 로그인"(→ SCR-01 → 역할 판정 → 주최자 SCR-02 / 참가 SCR-05) + 문의 폼(SCR-P6 재사용)
|
||
7. **PublicShell 푸터**
|
||
- **구성요소**: HeroBanner·ValuePropCard×2(주최자·참가)·ProcessStepper·RateOverview·DocList·InquiryForm(P6)·LoginCTA·TrackSwitcher
|
||
- **데이터 원천**: 가치 제안·절차·요금 = 정적/CMS 안내(M1·M2·M4·M5·M6 소개) · 부스 유형·요율 = SCR-P6 자산 재사용 · 문의 폼 = SCR-P6 재사용 · 로그인 CTA = SCR-01 딥링크(성공 시 역할 홈 SCR-02/05) → 신규 트랜잭션 없음(안내+진입). **SEO·다국어, MDI 비적용**
|
||
- **상태**: 로딩(요금·안내 스켈레톤) · 빈(공지성 콘텐츠 없음 시 기본 안내 유지) · 에러(문의 전송 실패 인라인 재시도) · 문의 전송 완료 토스트
|
||
- **접근성**: 2-분기 카드 각 CTA 명시 링크, 절차 스텝 `ol`+스크린리더 순서, 색 외 배지 텍스트, WCAG AA. **i18n 네임스페이스 `track.business.*`**(+ 공유 `track.shell.*`)
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
A public business sub-home / entry page for the product "KINTEX AI 전시·행사시스템", business track (for exhibition organizers and exhibitors), Korean, desktop 1440px, light theme, primary blue #0066B3, purple #6D4AFF for AI, B2B professional tone (not MDI). All UI text in Korean; line (stroke) SVG icons only, NO emoji. Top: public header with "KINTEX AI 전시·행사시스템" wordmark, a 3-tab track switcher "관람 · 비즈니스 · 협력사" with "비즈니스" active, right utilities "언어 · 로그인". Hero headline "전시 개최·참가, 온라인 신청 일원화" with CTAs "신청·문의" and "로그인". Below, two large value-proposition cards side by side: left "주최자 · 홀 임대" listing "대관 절차 · 자동견적(AI) · 홀 배정·플로어플랜 · 요금/시설 규격" with a button "대관 문의·로그인"; right "참가업체 · 부스 신청" listing "부스 신청 · 유틸리티 신청 · 규정 사전검증 · AI 시공 시안" with a button "참가 신청·로그인" (AI items marked with a small purple "AI" chip). Then a horizontal process stepper "문의 → 가견적 → 계약 → 홀 배정 → 부스 신청 → 시공·검수" with a one-line caption per step. Then a "요금·서류 안내" section with booth-type rate cards (조립부스 / 독립부스 / 프리미엄) and a document list (배정신청서 · 방염 확인서 · 구조계산서). A login/inquiry CTA band "이미 계정이 있으신가요? 로그인" plus a compact inquiry form (회사명, 담당자, 연락처, 희망 홀, 문의 내용, "문의 보내기"). Footer. Trustworthy B2B lead-generation and online-application aesthetic; rounded 8px cards, tabular numerals for rates, WCAG AA.
|
||
```
|
||
|
||
### SCR-T3 agency 서브홈 (에이전시 안내·등록업체 진입 홈) [agency · 공개 · `/agency`]
|
||
|
||
- **대상**: 공사·장치·협력업체(미인증 대외)·등록업체 · **모듈/P**: M15(공사 옥션·역경매)·안전경영(작업신고)·등록업체 검증 · P1 · **진입 경로**: 관문 SCR-T0 "협력사 트랙" · TrackSwitcher "협력사" · 직접 `/agency`
|
||
- **레이아웃**(위→아래, PublicShell·코엑스 서비스협력업체+안전경영 차용·킨텍스 옥션 차별점 강조):
|
||
1. **PublicShell 헤더 + TrackSwitcher**("협력사" 활성)
|
||
2. **에이전시 히어로**: "킨텍스 공식 등록업체로 전시 시공에 참여하세요" + "등록 안내"·"등록업체 로그인" CTA. **킨텍스 차별점(옥션) 강조** 서브카피
|
||
3. **등록업체 안내 카드**: 등록업체 현황(739개사·14개 분류) + **미등록 업체 시공 엄금·자체시공 불가 필수 고지**(warning 톤 안내) + 등록 절차(신청→자격심사→등록→수주 자격) + CTA "등록 신청"
|
||
4. **진행 중 공사 옥션 공고 리스트(M15 · 역경매)**: 카드/행 리스트 — 옥션명·대상 부스/행사·예산 범위·마감 D-day(DdayChip)·응찰 현황(참여 업체 수)·상태 배지. 각 행 "상세·응찰"(로그인 유도). **킨텍스 차별점(역경매 옥션) 히어로 다음으로 크게** 배치
|
||
5. **작업신고·규정 안내**(코엑스 안전경영 온라인작업신고): 현장 작업신고 절차·안전 규정(금지작업·소음·리깅 구조계산서)·필수 서류(방염·보험) 안내 카드 + "작업신고 하기"(로그인)
|
||
6. **등록업체 로그인 CTA 밴드**: "등록업체 로그인"(→ SCR-01 → 장치업체 판정 → 수주/응찰 대시보드 SCR-27/28)
|
||
7. **PublicShell 푸터**
|
||
- **구성요소**: HeroBanner·RegistryInfoCard(고지)·AuctionList(M15 공고 카드·DdayChip·StatusBadge)·SafetyGuideCard·LoginCTA·TrackSwitcher
|
||
- **데이터 원천**: 등록업체 현황·절차 = 정적/CMS 안내(739·14분류·등록 게이트) · **진행 중 옥션 = M15 공개 서브셋**(`/api/public/auctions` 또는 옥션 목록 SCR-24 공개 읽기 서브셋 — 응찰은 로그인 후 SCR-27/28) · 작업신고·규정 = 정적 안내 · 로그인 CTA = SCR-01 딥링크(성공 시 SCR-27/28) → 옥션 리스트만 실 API(공개 읽기), 나머지 안내 정적. **SEO·다국어, MDI 비적용**
|
||
- **상태**: 로딩(옥션 리스트 스켈레톤) · 빈(진행 중 옥션 없음 "현재 진행 중인 공사 옥션이 없습니다") · 에러(옥션 API 실패 재시도, 등록·규정 안내는 정적 상시 노출) · 마감 임박 옥션 `warning` D-day 강조
|
||
- **접근성**: 필수 등록 고지는 색 외 텍스트로 명확히("미등록 업체는 시공에 참여할 수 없습니다"), 옥션 D-day 색+텍스트 병기, 로그인 CTA 명시, WCAG AA. **i18n 네임스페이스 `track.agency.*`**(+ 공유 `track.shell.*`)
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
A public agency (contractor / booth-construction partner) sub-home page for the product "KINTEX AI 전시·행사시스템", agency track, Korean, desktop 1440px, light theme, primary blue #0066B3, warning orange #B45309, clean B2B tone (not MDI). All UI text in Korean; line (stroke) SVG icons only, NO emoji. Top: public header with "KINTEX AI 전시·행사시스템" wordmark, a 3-tab track switcher "관람 · 비즈니스 · 협력사" with "협력사" active, right utilities "언어 · 등록업체 로그인". Hero headline "킨텍스 공식 등록업체로 전시 시공에 참여하세요" with a subheading emphasizing the differentiator "공사 옥션(역경매)로 투명하게 수주", and CTAs "등록 안내" and "등록업체 로그인". Below: a "등록업체 안내" card showing "등록업체 739개사 · 14개 분류" with a prominent warning-toned notice "미등록 업체는 전시 시공에 참여할 수 없습니다 (자체시공 불가)" and a registration process "신청 → 자격심사 → 등록 → 수주 자격", button "등록 신청". Then, prominently, a "진행 중 공사 옥션 (역경매)" list of auction announcement rows/cards — each with auction name, target booth/event, budget range, a red/orange "D-3" day chip, bidder count "응찰 4개사", a status badge, and a "상세·응찰" link (login-gated). Then a "작업신고 · 안전 규정" section with cards for on-site work report procedure, prohibited works / noise limit / rigging structural calc, and required documents (방염·보험), with a button "작업신고 하기". A bottom login CTA band "등록업체 로그인". Footer. Professional partner-portal aesthetic highlighting the reverse-auction differentiator; rounded 8px cards, tabular numerals, WCAG AA contrast.
|
||
```
|
||
|
||
---
|
||
|
||
## 4. 모바일 대응 (390px)
|
||
|
||
모바일은 **조회·승인·현장** 시나리오 전용(PLANNING.md §8). 캔버스 편집(SCR-03, 07)과 스펙 편집(SCR-06 좌패널)은 모바일 미제공 — 뷰어+승인 액션만. 아래 두 화면은 **모바일 전용 신규 화면**, 나머지는 반응형 축소.
|
||
|
||
| 웹 화면 | 모바일 변화 |
|
||
|---|---|
|
||
| SCR-05 부스 홈 | 1열 스택. 할 일 카드가 최상단, 예상 사진 카드는 가로 스와이프 캐러셀 |
|
||
| SCR-06 스튜디오 | 읽기 전용: 4샷 그리드 → 세로 캐러셀 + before/after 슬라이더(터치 드래그). "컨펌 승인/수정 요청" 버튼만 활성 |
|
||
| SCR-10 승인 큐 | 테이블 → 카드 리스트(AI 플래그 칩 유지), 스와이프 액션 없음(오승인 방지 — 반드시 상세 진입) |
|
||
| SCR-12 갤러리 | 2열 그리드, 라이트박스 핀치 줌 |
|
||
|
||
---
|
||
|
||
### SCR-M1 [모바일] 시공업체 현장 체크리스트 [M3 규정 + 현장 공정]
|
||
|
||
- **대상**: 장치업체 현장 인력 · **진입 경로**: 모바일 로그인 → 수주 부스 → "현장 체크리스트" (장치 기간 중 기본 홈)
|
||
- **레이아웃**:
|
||
1. 상단 고정: 부스 A-102 · 홀7 · "장치 1일차" + 도면/예상사진(S1) 토글 썸네일(참고용 라벨)
|
||
2. 체크리스트 그룹(아코디언): ① 반입 전(방염 확인서 지참, 안전모) ② 시공 중 — 금지작업 경고 카드 상시 노출("전기톱·용접·페인트 작업 장내 금지", 소음 70~75dB 한도) ③ 구조(높이 실측 5m 이하 확인 — 수치 입력, 리깅 구조계산서 제출 확인) ④ 완료(사진 업로드 → 홀매니저 검수 요청)
|
||
3. 각 항목: 큰 체크박스(48px 터치), 사진 첨부 버튼, 미완료 필수 항목 수 배지
|
||
4. 하단 고정 CTA: "검수 요청 보내기" (필수 항목 완료 시 활성)
|
||
- **상태**: 오프라인 — 로컬 저장+"연결 시 동기화" 배지 · 위반 항목 체크 시 즉시 빨간 안내("홀매니저에게 자동 통지됩니다").
|
||
- **Stitch 프롬프트**:
|
||
|
||
```
|
||
A mobile on-site checklist app screen for a booth construction crew at KINTEX exhibition center, 390px width, light theme, blue #0066B3, large touch targets. All UI text in Korean. Sticky top header: "부스 A-102 · 홀7 · 장치 1일차" with two small thumbnail toggles "도면 | 예상 사진" (예상 사진 marked 참고용). Body: accordion checklist groups — "반입 전" (checked items "방염 확인서 지참", "안전모 착용" with green checks), an always-visible red warning card "장내 금지 작업: 전기톱 · 용접 · 페인트 / 소음 한도 70~75dB", group "시공 중" with items having large 48px checkboxes and camera attach buttons, group "구조 확인" containing a numeric input row "장치물 최고 높이 실측" with value "4.2 m" and helper "5m 이하", and item "리깅 구조계산서 제출 확인" with an orange D-day chip "D-7". A badge near top "필수 항목 3개 남음". Sticky bottom: full-width primary button "검수 요청 보내기" in disabled state, and a small offline badge "오프라인 — 연결 시 동기화". Rugged, glanceable field-work UI with big tap areas.
|
||
```
|
||
|
||
---
|
||
|
||
### SCR-M2 [모바일] 홀매니저 현장 검수
|
||
|
||
- **대상**: 홀매니저 · **진입 경로**: 모바일 홈(승인 큐 카드 리스트) → 검수 요청 알림 탭
|
||
- **레이아웃**:
|
||
1. 상단: 부스 컨텍스트 + 승인 도면 썸네일(탭 시 전체 화면 뷰어, 핀치 줌)
|
||
2. **비교 카드**: 승인 도면 vs 현장 사진(시공업체 업로드) 좌우 스와이프 비교, "AI 사전심사 플래그 3건" 요약 칩 — 탭 시 바텀시트로 플래그 목록(각 "현장 확인함" 체크)
|
||
3. 현장 검수 항목 리스트: 높이·방염 라벨·통로 침범·소음 — 각 항목 [적합]/[부적합] 세그먼트 + 부적합 시 사진 촬영 필수+메모
|
||
4. 하단 고정: [검수 승인](녹) / [시정 요청](빨) — 시정 요청 시 위반 항목 자동 첨부되어 시공업체에게 푸시
|
||
- **상태**: 플래그 미확인 시 승인 비활성 · 시정 요청 발송 완료 토스트+큐 다음 항목 제안.
|
||
- **Stitch 프롬프트**:
|
||
|
||
```
|
||
A mobile field inspection screen for a KINTEX hall manager verifying booth construction, 390px width, light theme, blue #0066B3, purple #6D4AFF AI chips. All UI text in Korean. Top: header "현장 검수 · 부스 A-102 · 홀7" with an approved drawing thumbnail. Below: a side-by-side comparison card — left half labeled "승인 도면" showing a booth plan drawing, right half labeled "현장 사진" showing a photo of a partially built booth, with swipe dots; under it a purple chip "AI 사전심사 플래그 3건" that suggests a tappable bottom sheet. Middle: inspection item list with segmented controls — rows "장치물 높이 (5m 이하)", "방염 라벨 부착", "통로 침범 여부", "소음 (70~75dB)", each with two-button segmented control [적합 | 부적합]; the "통로 침범 여부" row is set to 부적합 in red with an attached photo thumbnail and a memo field "통로 0.3m 침범". Sticky bottom: two large buttons side by side — green "검수 승인" (disabled) and red "시정 요청". Fast, one-hand-operation mobile inspection UI.
|
||
```
|
||
|
||
---
|
||
|
||
### SCR-M3 [모바일] 홈·대시보드 (역할별 진입)
|
||
|
||
- **대상**: 전 역할(로그인 후 역할 분기) · **P1** · **진입 경로**: 모바일 로그인 → 하단 탭 "홈" · **상태**: ✅구현(부분, `mobile/app/(tabs)/index.tsx`)
|
||
- **레이아웃**: 상단 행사 스위처 + 역할 배지 · 오늘 할 일/마감 D-데이 카드 · 역할별 바로가기(참가=내 부스·유틸리티 / 장치=현장 체크리스트·옥션 / 홀매니저=승인 큐·검수 / 관람객=배지·플로어플랜) · 알림 요약 · 하단 탭 4개(홈/현장·업무/알림/더보기). 상태: 로딩 스켈레톤·오프라인 배지·빈.
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
A mobile home dashboard for "KINTEX AI 전시관리", 390px width, light theme, blue #0066B3, large touch targets, Korean sans-serif. All UI text in Korean. Top: an event switcher "스마트팩토리 코리아 ▾" and a role badge "홀매니저". Body: a "오늘 할 일" section with D-day task cards, a role-specific shortcut grid of large tiles ("승인 큐 · 현장 검수 · 홀 부하 · 알림"), and a compact notification summary list. Bottom navigation bar with 4 tabs "홈 · 현장 · 알림 · 더보기". Clean, glanceable mobile dashboard with big tap areas.
|
||
```
|
||
|
||
---
|
||
|
||
### SCR-M4 [모바일] 참가업체 리드캡처 (배지 스캔)
|
||
|
||
- **대상**: 참가업체 현장 인력 · **모듈/P**: M10 · P1 · **진입 경로**: 모바일 "현장" → "리드 스캔"
|
||
- **레이아웃**: 대형 QR 스캔 카메라 프레임 + 스캔 성공 시 관람객 카드(이름·소속·유형) · 관심도 별점·태그·메모(음성 입력) · 저장→리드 목록. 오프라인 저장·동기화. 개인정보 동의 표기. 상태: 스캔 실패·중복·오프라인.
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
A mobile lead capture (badge scan) screen for an exhibitor, 390px width, light theme, blue #0066B3, large touch targets. All UI text in Korean. Top: a full-width QR scanner camera frame with guide "관람객 배지 QR을 스캔하세요". On scan, a visitor card slides up: name "정관람", company "(주)미래기술", type chip "바이어", a 5-star "관심도" rating, interest tag chips, and a memo field with a mic icon "음성 메모". A primary "리드 저장" button, an offline badge "오프라인 저장 · 동기화 대기", and a small consent note "개인정보 수집 동의 확인". Fast field-sales mobile aesthetic.
|
||
```
|
||
|
||
---
|
||
|
||
### SCR-M5 [모바일] 관람객 앱 홈 · 모바일 배지/QR
|
||
|
||
- **대상**: 관람객 · **모듈/P**: M10 · P1 · **진입 경로**: 관람객 앱 로그인/사전등록 완료
|
||
- **레이아웃**: 상단 내 모바일 배지(QR·이름·유형, 밝기 최대 안내) · 오늘 일정·추천 세션(M11) · 부스 즐겨찾기 · 하단 탭(홈/지도/매칭/마이). 오프라인 배지 캐시. 상태: 미등록·로딩.
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
A visitor app home screen with a mobile badge/QR for an exhibition, 390px width, light theme, blue #0066B3, friendly consumer tone. All UI text in Korean. Top: a personal mobile badge card showing a large QR code, name "정관람", type "바이어", and a hint "체크인 시 화면을 보여주세요". Below: "오늘 일정" cards, an "추천 세션·부스" carousel with a small purple "AI 추천" chip, and a "즐겨찾기 부스" list. Bottom tab bar "홈 · 지도 · 매칭 · 마이". Clean consumer event-app aesthetic.
|
||
```
|
||
|
||
---
|
||
|
||
### SCR-M6 [모바일] 관람객 wayfinding · 실내 지도
|
||
|
||
- **대상**: 관람객 · **모듈/P**: M13 · P2 · **진입 경로**: 관람객 앱 "지도"
|
||
- **레이아웃**: 전체 화면 실내 지도(블루닷 현재위치·경로 라인) + 상단 검색(부스·화장실·비상구·시설) + 하단 시트(목적지 정보·경로 시작). 존레벨 폴백(하드웨어 무의존). 상태: 측위 불가 시 존레벨 안내·오프라인.
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
A mobile indoor wayfinding / map screen for exhibition visitors, 390px width, light theme, blue #0066B3. All UI text in Korean. Full-screen indoor map of an exhibition hall with a blue-dot current-location marker and a highlighted route line to a destination; a top search bar "부스 · 화장실 · 비상구 · 시설 검색"; a bottom sheet showing destination info "A-102 · 한빛로보틱스 · 도보 3분" and a "경로 시작" button; a small note "존 레벨 안내(정밀 측위 미지원 시)". Clear navigation aesthetic.
|
||
```
|
||
|
||
---
|
||
|
||
### SCR-M7 [모바일] 관람객 플로어플랜 · 부스 검색
|
||
|
||
- **대상**: 관람객 · **모듈/P**: M12·M2 · P1 · **진입 경로**: 관람객 앱 "지도" 탭 내 플로어플랜 / 공개사이트 SCR-P3 모바일
|
||
- **레이아웃**: 인터랙티브 홀 맵(부스 탭→하단 시트 업체정보·마이크로사이트·길안내) + 검색·필터(업종·존) + 즐겨찾기 추가. 비시각 대안 목록. 상태: 로딩·빈.
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
A mobile interactive floor plan / booth search screen for exhibition visitors, 390px width, light theme, blue #0066B3. All UI text in Korean. An interactive hall map filling the screen with tappable booth cells; a top search bar and filter chips "업종 · 존"; tapping a booth opens a bottom sheet with company name, category, a "마이크로사이트" link, a "길안내" button, and an "즐겨찾기 ★" toggle. Below the map a toggle to a list view (accessible alternative). Explorable consumer map aesthetic.
|
||
```
|
||
|
||
---
|
||
|
||
### SCR-M8 [모바일] 비즈매칭 · 미팅
|
||
|
||
- **대상**: 관람객·참가업체(바이어 매칭) · **모듈/P**: M11 · P2 · **진입 경로**: 관람객 앱 "매칭"
|
||
- **레이아웃**: AI 추천 매치 카드 스택(프로필·관심·의향, 관심/패스 액션) + 미팅 요청·슬롯 예약 캘린더 + 내 미팅 목록(부스 위치·길안내 연계). AiLabel. 상태: 추천 없음·로딩.
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
A mobile business matchmaking / meeting screen for an exhibition, 390px width, light theme, blue #0066B3, purple #6D4AFF for AI. All UI text in Korean. Top: a stack of AI-recommended match cards, each showing a person/company profile, interests, a small purple "AI 매칭 92%" chip, and "관심 / 패스" buttons. Below: a "미팅 예약" time-slot calendar and a "내 미팅" list with time, counterpart, booth location and a "길안내" link. Networking-app aesthetic with AI matching.
|
||
```
|
||
|
||
---
|
||
|
||
### SCR-M9 [모바일] 세션·아젠다 · 개인 일정
|
||
|
||
- **대상**: 관람객 · **모듈/P**: M11(이벤트앱) · P2 · **진입 경로**: 관람객 앱 "일정"
|
||
- **레이아웃**: 세션 아젠다(트랙·시간·연사, 즐겨찾기→내 일정) + AI 세션 추천(AiLabel) + 내 개인 일정 타임라인 + 리마인더. 상태: 빈·로딩.
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
A mobile session agenda / personal schedule screen for an exhibition app, 390px width, light theme, blue #0066B3, purple #6D4AFF for AI. All UI text in Korean. Top: a track/time agenda list with session cards (시간, 세션명, 연사, 트랙 tag) and a "★" add-to-schedule toggle; a small purple "AI 추천 세션" section. A tab toggle "전체 아젠다 / 내 일정" where 내 일정 shows a personal timeline with reminders. Clean event-agenda aesthetic.
|
||
```
|
||
|
||
---
|
||
|
||
### SCR-M10 [모바일] 업체 반입 통행증 · 안전 체크
|
||
|
||
- **대상**: 장치·공사업체 현장 인력 · **모듈/P**: M8 · P2 · **진입 경로**: 업체 모바일 "반입" (SCR-25 예약 후)
|
||
- **레이아웃**: 통행증 QR(차량·슬롯·유효시간) 전체화면 표시 + 반입 안전 체크리스트(안전모·중량물 표기·금지작업) + 슬롯 시간 안내·현장 지도 링크. 오프라인 캐시. 상태: 슬롯 임박 알림·만료.
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
A mobile move-in gate pass and safety check screen for a construction crew, 390px width, light theme, blue #0066B3, large touch targets. All UI text in Korean. Top: a large gate-pass card with a QR code, vehicle number "12가3456", assigned dock "도크3", and validity "08:00–09:00 · D-2 장치". Below: a safety checklist with big checkboxes "안전모 착용 · 중량물 5t↑ 신고 · 금지작업 확인(전기톱·용접·페인트)", a "슬롯 시간 D-0 09:00" reminder, and a "현장 지도" link. Rugged field-ops mobile aesthetic.
|
||
```
|
||
|
||
---
|
||
|
||
### SCR-M11 [모바일] 알림센터
|
||
|
||
- **대상**: 전 역할 · **모듈/P**: §5B notification · P1 · **진입 경로**: 하단 탭 "알림"
|
||
- **레이아웃**: 알림 리스트(마감·낙찰·승인·결제·시스템, 아이콘·시간·안읽음) · 탭 시 해당 화면 딥링크 · 상단 필터·모두 읽음. WebSocket. 상태: 빈("새 알림 없음")·로딩·오프라인.
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
A mobile notification center for "KINTEX AI 전시관리", 390px width, light theme, blue #0066B3, large touch targets. All UI text in Korean. Top: filter chips "전체 · 마감 · 낙찰 · 승인 · 결제" and a "모두 읽음" action. Body: a chronological notification list, each row with a category icon, title, short description, timestamp, and an unread blue dot; tapping opens the related screen. Empty state "새 알림이 없습니다". Clean mobile inbox aesthetic.
|
||
```
|
||
|
||
---
|
||
|
||
### SCR-M12 [모바일] 서류·승인 조회
|
||
|
||
- **대상**: 주최자·홀매니저(조회·승인) · **모듈/P**: M6 · P1 · **진입 경로**: 모바일 "업무" → "서류/승인"
|
||
- **레이아웃**: 서류·승인 항목 카드 리스트(유형·제출자·상태 배지·마감 D-데이) + 상세(문서 뷰어·AI 검수 요약) + 승인/반려 액션(오조작 방지: 상세 진입 필수). 상태: 빈·로딩·오프라인 읽기전용.
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
A mobile document/approval review screen for an organizer or hall manager, 390px width, light theme, blue #0066B3, purple #6D4AFF for AI. All UI text in Korean. Top: a card list of documents/approvals, each with type "신고서류 · 부스배치도", submitter, a status pill, and a D-day chip. Tapping opens a detail view with a document viewer, a purple "AI 검수 요약" card listing issues, and bottom action buttons "승인" (green) / "반려" (red). No swipe-approve (must open detail). Careful, review-focused mobile aesthetic.
|
||
```
|
||
|
||
---
|
||
|
||
### SCR-M13 [모바일] 옥션 순위 조회
|
||
|
||
- **대상**: 장치업체·참가업체(발주자) · **모듈/P**: M15 · P1 · **진입 경로**: 모바일 "업무" → "옥션"
|
||
- **레이아웃**: 참여 옥션 카드(공종·마감 카운트다운·내 순위·최저가) + 실시간 순위 리스트(WebSocket) + 알림. 응찰(견적서 작성)은 웹(SCR-28) 유도 — 모바일은 조회·순위·마감 알림 중심. 상태: 마감됨·오프라인·로딩.
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
A mobile auction ranking monitor for a contractor, 390px width, light theme, blue #0066B3, purple #6D4AFF. All UI text in Korean. Top: participating auction cards with category, a countdown "마감 01:24:36", my rank "2위", and current lowest "₩8.4M". Below: a live ranking list "1위 업체 A · 2위 나 · 3위 업체 C" with the user's row highlighted, and a note "견적서 작성·재응찰은 웹에서 진행하세요". Real-time monitoring mobile aesthetic.
|
||
```
|
||
|
||
---
|
||
|
||
### SCR-M14 [모바일] 티켓 예매
|
||
|
||
- **대상**: 일반 대중·관람객(게스트+회원) · **모듈/P**: M10(티켓)·결제 M9 연계 · P1 · **진입 경로**: 관람객 앱/공개사이트 모바일 "입장권 예매" · SCR-P7의 모바일 최적화
|
||
- **레이아웃**(1열 스택, 48px 터치·하단 고정 CTA):
|
||
1. 상단: 행사 요약 칩 + 스텝 인디케이터(권종→예매자→결제→완료) 축약(단계 점)
|
||
2. 권종 선택: 티켓 종류 카드 세로 스택(권종명·가격·수량 스테퍼 48px). 하단 고정 요약 바 "합계 ₩9,000 · 다음"
|
||
3. 예매자 정보: 큰 입력 필드(게스트 이름·이메일·연락처 / 회원 자동채움), 동의 체크(필수·선택)
|
||
4. 결제: 결제수단 시트(카드·간편결제) + **PG 위임 안내 상시**("카드정보는 저장되지 않습니다"), 카드번호 입력 UI 없음. 무료 권종은 스킵
|
||
5. 완료: 예매번호·QR·"티켓 지갑에 저장됨" + CTA "내 티켓 지갑"(SCR-M15)
|
||
- **상태**: 로딩 스켈레톤 · 매진 권종 비활성+"매진" · 결제 실패 인라인 재시도 · degraded(PG 미연결 안내, 무료 권종 정상) · 오프라인 배지. 재고/정원 서버 권위.
|
||
- **데이터 원천**: M10 티켓·재고 + M9 결제 어댑터 → 신규·샘플. PII 마스킹·WCAG AA·라이트/다크, 신규 토큰 없음.
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
A mobile ticket purchase flow screen for an exhibition, 390px width, light theme, primary blue #0066B3, large 48px touch targets, Korean consumer tone. All UI text in Korean. Top: an event summary chip "스마트팩토리 코리아 2026 · 홀7" and a compact dot step indicator "권종 · 예매자 · 결제 · 완료". Body: a vertical stack of ticket-type cards — "일반권 ₩0", "바이어권 무료", "단체권 ₩9,000", "VIP권 ₩50,000" — each with name, price in tabular numerals, and a big quantity stepper (− / 1 / ＋); one card shows a "매진" badge disabled. A sticky bottom summary bar shows bold "합계 ₩9,000" and a full-width primary button "다음". Include a later payment step reference: method chips "카드 · 간편결제" and a persistent notice "결제는 PG사 보안 페이지에서 진행되며 카드정보는 저장되지 않습니다" with NO card number fields. Clean mobile checkout aesthetic, 8px cards, WCAG AA.
|
||
```
|
||
|
||
---
|
||
|
||
### SCR-M15 [모바일] 내 티켓 지갑
|
||
|
||
- **대상**: 일반 대중·관람객 · **모듈/P**: M10(티켓)·환불 M9 연계 · P1 · **진입 경로**: 관람객 앱 "마이" → "내 티켓" / 예매 완료(SCR-P7·M14) 딥링크
|
||
- **레이아웃**(1열 스택):
|
||
1. 상단: "내 티켓" 타이틀 + 행사 필터 탭(진행중·예정·지난)
|
||
2. **티켓 카드 리스트**: 각 카드 = 행사명·권종·매수·상태 배지(사용가능/사용됨/취소) + 미니 QR + "입장 QR 보기" 버튼
|
||
3. **QR 풀스크린 뷰어**(카드 탭): 대형 QR 중앙 · 이름·유형 · **화면 밝기 부스트 안내("입장 시 화면을 최대 밝기로")** + 자동 밝기 상승 · 하단 스와이프로 다른 티켓 전환 · 예매번호(마스킹 부분 노출)
|
||
4. 각 티켓 하단: "예매 상세·취소"(SCR-P8 진입) · 취소/환불 정책 링크
|
||
5. **배지 전환 안내 배너**: "티켓 QR로 현장 체크인하면 모바일 배지로 전환됩니다" — 체크인(SCR-31) 후 SCR-M5 관람객 배지/QR로 상태 승격(티켓→체크인→배지 흐름 1:1 명시)
|
||
- **상태**: 로딩 스켈레톤 · 빈("보유한 티켓이 없습니다 — 입장권 예매") · **오프라인 표시 가능**(QR·티켓 로컬 캐시, "오프라인 — 저장된 티켓 표시 중" 배지) · 사용됨/취소 티켓 흐리게(dim). 상태 전이는 서버 권위(오프라인은 캐시 표시).
|
||
- **데이터 원천**: M10 예매·티켓·체크인 상태 → 신규·샘플. SCR-M5(배지)와 상태 연동. PII 마스킹·WCAG AA·라이트/다크, 신규 토큰 없음.
|
||
- **Stitch 프롬프트**:
|
||
```
|
||
A mobile "my ticket wallet" screen for an exhibition visitor, 390px width, light theme, primary blue #0066B3, success green #0E8A5F, friendly consumer tone. All UI text in Korean. Top: title "내 티켓" with filter tabs "진행중 · 예정 · 지난". Body: a vertical list of ticket cards, each showing event title "스마트팩토리 코리아 2026", 권종 "바이어권", 매수 "1매", a green status badge "사용가능", a small QR thumbnail, and a button "입장 QR 보기"; used/canceled tickets appear dimmed. Include a full-screen QR viewer reference: a large centered QR code, name "정관람", type "바이어", a hint "입장 시 화면을 최대 밝기로 유지하세요" with a brightness-boost note, swipe dots to switch tickets, and a masked 예매번호 "KTX-****-8245". Add an info banner "티켓 QR로 현장 체크인하면 모바일 배지로 전환됩니다" and a small offline badge "오프라인 — 저장된 티켓 표시 중". Each card has a link "예매 상세·취소". Clean consumer wallet aesthetic, 8px cards, WCAG AA, high-contrast QR.
|
||
```
|
||
|
||
---
|
||
|
||
## 5. Stitch 사용 가이드 (요약)
|
||
|
||
1. stitch.withgoogle.com에서 새 프로젝트 생성 → 플랫폼은 웹 화면(SCR-01~51·SCR-A*·SCR-P*)은 Desktop, 모바일(SCR-M1~M15)은 Mobile 선택. 공개사이트(SCR-P*)는 마케팅 톤·넓은 히어로로, 관리자(SCR-A*)는 밀도 높은 백오피스 톤으로 생성한다.
|
||
2. 화면당 위 코드블록 프롬프트 1개를 그대로 붙여넣어 생성 — 프롬프트에 색상·레이아웃·예시 데이터가 포함되어 있어 추가 지시 없이 1회 생성이 기준.
|
||
3. 결과 보정은 짧은 추가 지시로: 예) "Make the right quote panel 340px and sticky". 한국어 텍스트가 깨지면 "Keep all labels in Korean exactly as given" 재지시.
|
||
4. 생성 화면은 Figma로 내보내 디자인 시스템 토큰(§1)과 대조 후 조정한다.
|
||
|
||
---
|
||
|
||
## 6. 변경 이력
|
||
|
||
| 버전 | 일자 | 작성자 | 내용 |
|
||
|---|---|---|---|
|
||
| **v2.4** | 2026-07-12 | designer | **공개 사이트 비주얼·모션 전면 리뉴얼 스펙 신설(소유자 확정: "코엑스처럼 세련되게 — 히어로 배경·애니메이션·비주얼, 지금 착수").** §3C에 **3C-V 공개 사이트 비주얼·모션 스펙** 절 순증 — 기존 SCR-T0~T3·SCR-P* **구조는 불변**, 그 위에 비주얼/모션 레이어만 격상(구조 재설계 아님). ①**비주얼 폴리시(V-1)** 풀블리드·공백 없음·섹션 리듬(밴드↔카드 교대·96/64/40px)·여백·라운드 8px·소프트 앰비언트 그림자·타이포 위계 강화·선 SVG·이모지 금지·다크/라이트·2:3 포스터 카드. ②**모션 토큰(V-2)** duration(`--motion-fast 150`/`base 240`/`slow 400`/`hero 600`/`countup 1200`)·easing(`--ease-emphasized/standard/decelerate`) 신설(컬러 신규 토큰 0). ③**섹션별 배경·애니메이션 트리거 매핑(V-3)** 풀블리드 히어로(라이트 파랄랙스+인트로 리빌)·통계 카운트업·AI 타일 스태거·쇼케이스 hover 리프트/이미지 줌·행사 레일 오토스크롤·기획 브리핑 grow·공통 스크롤 리빌(IO threshold 0.15·once). ④**이미지 소스 매핑(V-4)** build 내장 `/media/`(hero·bands·poster·patterns 계약)·부재 시 그라디언트+패턴 폴백(레이아웃 시프트 0)·preload/lazy/webp/srcset. ⑤**접근성(V-5)** `prefers-reduced-motion` 필수 — 파랄랙스/오토스크롤 정지·카운트업 즉시·리빌 instant·모션은 전부 장식(정보 비의존)·양 테마 WCAG AA. ⑥**성능(V-6)** CSS 우선·`transform`/`opacity`만·`will-change` 절제·60fps·강등 순서. ⑦**프론트 계약(V-7)** `.pub-reveal`/`--stagger`·`.pub-hero__bg[data-parallax]`·`.pub-card--lift`·`.pub-card__media img` 줌·`.pub-countup`·`.pub-rail--auto`·폴백 유틸, **PublicShell 하위만 스코프**(AppShell/MDI·SCR-A*·모바일 미주입). ⑧**영어 Stitch 프롬프트 2종(V-8·V-9)** — 프리미엄 전시장 홈페이지(SCR-T1 시네마틱 히어로·스크롤 리빌·카운트업·hover 줌·오토스크롤·폴백·reduced-motion, 제품명 정확·NO emoji·선 SVG·라이트/다크) + 3-트랙 관문(SCR-T0 동일 톤 격상). **경계 준수**: visitor(T1)만 풀 시네마틱, business/agency는 B2B 톤 유지+공통 모션 절제 적용. 신규 컬러 토큰 0·PLANNING.md·src 무수정. |
|
||
| **v2.3.2** | 2026-07-12 | designer | **SCR-T1 — AI 전시·행사 기획 브리핑(연간·월간 선제 제시) 추가(소유자 추가 지시 2026-07-12).** 단발 질의응답을 넘어 **AI가 개최 예정 전시·행사를 먼저 큐레이션**하는 섹션을 히어로 AI 능력 타일 직하(레이아웃 4번)에 신설 — **연/월 관점 토글**(① 연간=12개월 타임라인+분기 하이라이트+AiLabel "AI 요약" 헤드라인, ② 월간=선택 월 캘린더/리스트+AI 월간 요약), 연/월 전환 시 AI가 해당 기간 데이터 근거로 요약·추천 갱신. **중복 회피**: 하단 "진행 중/이번 달/다음 달" 쇼케이스(레이아웃 5)와 달리 본 섹션은 **연간 기획 관점**이 차별점, 월간은 동일 event 소스로 정합. 구성요소 `AiPlanningBriefing` 추가, 이하 레이아웃 5~11 재번호. **데이터 원천** — 신규 공개 엔드포인트 제안 `GET /api/public/events/planning?view=year|month&year&month`(크롤 적재 `exhibition`/`event`를 개최연·월 그룹 조회, AI 기간 요약은 AiTextRouter Claude→Ollama 폴백이 해당 기간 DB만 근거·근거 인용·캐시, DB 서빙·외부 실시간 호출 없음, 계약 제안). 상태(로딩·성공·**degraded(요약 미가용→데이터만 노출)**·빈·에러·기간 전환 부분 로딩) 정의. **Stitch 프롬프트 갱신** — 연간 타임라인+"AI 요약" 헤드라인("2026년은 상반기 스마트팩토리·로봇, 하반기 헬스케어·친환경…")+월간 요약("이번 달은 로봇·헬스케어 전시가 집중됩니다") 문단 추가, 쇼케이스와 구별 명시. 세련된 홈페이지 톤·풀블리드·반응형·라이트/다크·크롤 적재 DB 근거 원칙은 유지. 신규 토큰 0·PLANNING.md·src 무수정 |
|
||
| **v2.3.1** | 2026-07-12 | designer | **SCR-T1 마무리 — AI 전면 노출 + AI 답변 근거=크롤 적재 DB 명시(소유자 추가 지시 2건 2026-07-12).** ①**AI 기능 쇼케이스 타일 신설**(히어로 직하 레이아웃 3번): "AI 시스템인데 AI가 어디 있는지 모르겠다" 지적 반영 — AI 관람 도우미·AI 전시 추천·AI 길찾기·AI 일정 도우미·AI 혼잡/대기 안내·AI 시공 예상 이미지 6능력을 AiLabel 카드로 전면 홍보(구성요소 AiCapabilityTiles·상태(정적 상시·미가용 "준비 중")·이하 레이아웃 4~10 재번호). ②**데이터 원천 = 사전 크롤 적재 온프레미스 DB 명시**: AI 관람 도우미(`POST /api/public/ai/visitor-assistant`)가 **실시간 외부 크롤이 아니라 미리 크롤해 DB에 적재한 공개 데이터만을 RAG 근거로 답하고 참조 레코드를 인용**(범위 밖=degraded)함을 명문화 — 근거 테이블 계약 예시(`exhibition`/`event`·`transport_info`·`parking_info`·`ticket_policy`·`amenity_info`·`visitor_guide`·`floorplan`), 각 섹션 출처를 크롤 적재 DB로 매핑, degraded 폴백을 "크롤 적재 데이터 검색"으로 갱신, 백엔드 계약을 "공개 조회 API가 크롤 적재 DB에서 서빙(외부 실시간 호출 없음·온프레미스·근거 인용)" 전제로 기술. ③**Stitch 프롬프트 갱신** — AI 능력 쇼케이스 카드 6종 문구 + "served from a pre-crawled on-premise database, AI answers ONLY from stored data and cites its source" 추가. 세련된 홈페이지 톤·풀블리드·반응형·라이트/다크는 v2.3 그대로 유지. 신규 토큰 0·PLANNING.md·src 무수정 |
|
||
| **v2.3** | 2026-07-12 | designer | **SCR-T1 visitor 메인을 "세련된 공개 마케팅 홈페이지"로 격상 + 중심 요소를 대화형 AI 관람 도우미로 재구성(소유자 지시 2026-07-12).** ①**§3C SCR-T1 전면 재작성** — 기존 "visitor 서브홈(가이드 허브)"을 일반 대중 대상 마케팅 홈페이지(코엑스/글로벌 전시장 홈 수준·풀블리드·타이포 위계·공백 없는 밀도·전환 지향)로 격상. **화면 중심 = AI 관람 도우미**(히어로 정중앙 대형 자연어 질문 입력창 + 예시 질문칩 5종 + 대화형 답변 패널: 답변 텍스트·구조화 결과 카드(전시/교통/입장/wayfinding)·후속 질문칩·AI 고지문·근거 출처, AiLabel 보라 구분). 관람객 관심 우선순위 5(전시 추천·교통·입장·부스위치·편의)를 자연어 하나로 관통. 하위 섹션 순증: 전시 쇼케이스(2:3 포스터 그리드/캐러셀·탭·전시장 필터·`poster_url`)·관심사 맞춤 추천 레일(M11 AI)·방문가이드 허브(2×3, GTX-A·주차·M13 길찾기·편의·접근성·문의)·관람객 여정 3-스텝(사전등록→배지/QR→체크인)·공지·뉴스·전시장 소개·푸터(회사·SNS·문의). ②**데이터 원천** — **신규 공개 엔드포인트 제안 `POST /api/public/ai/visitor-assistant`**(비인증·CORS·레이트리밋·PII 미수집, 기존 AiTextRouter Claude→Ollama 폴백 + 공개 행사 데이터 근거·환각방지, **계약 제안·백엔드 후속**), 나머지 `/api/public/events`·notice·CMS 재사용. ③**상태** — AI 도우미 대기/생각중/성공/**degraded(AI 미가용→키워드 검색 폴백)**/에러/빈결과 정의. ④**테마** — 공개 마케팅 홈페이지에 한해 **라이트/다크 테마 토글 제공(§1-5 업무 셸 라이트 단일 원칙의 공개 트랙 예외)**, 색은 §1 토큰 CSS 변수 주입·라이트 기본. ⑤**접근성** — AI 입력 `role="search"`·답변 `aria-live="polite"`·색 외 라벨·양 테마 WCAG AA, i18n `track.visitor.*`. ⑥영어 **Stitch 프롬프트 전면 갱신**("premium exhibition-center marketing homepage"·1440 full-bleed·AI 관람 도우미 centerpiece·제품명 "KINTEX AI 전시·행사시스템" 정확 표기·NO emoji/line SVG·라이트·다크). ⑦**§2.8-2 인벤토리** SCR-T1 행 명칭/모듈 갱신. **경계 준수**: business(SCR-T2)·agency(SCR-T3) 메인은 B2B 업무 톤 유지(격상 대상 아님) 명시, 라우트 `/visitor`·PublicShell·TrackSwitcher·세션키·기존 SCR 불변, **신규 토큰 0**, PLANNING.md·src 무수정 |
|
||
| **v2.2** | 2026-07-12 | designer | **3-트랙(visitor/business/agency) 대외 접점 재편 — 신규 4화면 SCR-T0~T3 순증(planner 지시서 `_workspace/plan_3track.md`·PLANNING v3.2 §2-2·`docs/analysis/coex-website.md` 근거).** 코엑스 3-사이트 IA(VISITOR·BUSINESS·CYBER)를 킨텍스 단일 도메인 위 3-트랙 얕은 진입 레이어로 정형화. ①**§3C 신설** — 3C-0 공개 셸(PublicShell) 재사용+상단 3-트랙 스위처(TrackSwitcher, `role=tablist`·`관람/비즈니스/협력사`·워드마크 `/` 복귀·언어·로그인·`내 홈`) 사양, SCR-T0 관문 랜딩(루트 `/`·제품 히어로 "KINTEX AI 전시·행사시스템"+3-트랙 대형 분기 카드+행사 하이라이트 레일, 관람 1순위), SCR-T1 visitor 서브홈(`/visitor`·행사 그리드+사전등록/티켓 CTA+2×3 방문 가이드 허브(교통 GTX-A·주차·M13 실내 길찾기·편의·접근성·문의)+공지), SCR-T2 business 서브홈(`/business`·주최자/참가 2-분기 가치제안+임대 절차 스텝+요금·서류+로그인/문의 CTA→SCR-01→SCR-02/05, 온라인 신청 일원화 강조), SCR-T3 agency 서브홈(`/agency`·등록업체 안내 739·14분류·미등록 시공 엄금 고지+진행 중 M15 공사 옥션 역경매 리스트+작업신고·규정+등록업체 로그인→SCR-27/28, 옥션 차별점 강조) — 각 화면 레이아웃·구성요소·데이터 원천(기존 API 재사용 매핑: login-slides·`/api/public/events`·notice·SCR-P6·M15 공개 서브셋)·상태(로딩/빈/에러/degraded)·접근성·i18n 네임스페이스(`track.gateway/visitor/business/agency/shell.*`)+영어 Stitch 프롬프트(Precision Enterprise AI·1440·NO emoji·선 SVG·WCAG AA). ②**SCR-HOME 관계 명시**: 관문 SCR-T0(`/`)=미인증 전용 공개 랜딩, 인증 세션 시 `/home`(SCR-HOME) 우선 리다이렉트(딥링크·SEO·게스트 티켓 조회 예외). ③**§2.8-2 인벤토리**에 SCR-T* 표 추가(집계 85→**89화면**, 미생성 2→6: SCR-HOME·M3+T0~T3). **경계 준수**: 기존 SCR·라우트·MDI 셸(§2.7)·티켓 공개 라우트(SCR-P7/P8)·세션키 불변, 신규 라우트는 얕은 트랙 진입 4개만, ops/admin 트랙 외부 유지, §1A 멀티테넌시 정합. §1 토큰 권위·**신규 토큰 0**, 기존 화면 스펙·PLANNING.md·src 무수정 |
|
||
| **v2.1.2** | 2026-07-12 | designer | **로그인 후 메인 홈(SCR-HOME) 신설 + 로그인 랜딩 흐름 변경 + 셸 하단 상태바(ShellFooter) 신설(소유자 지시 2026-07-12).** ①**§3 SCR-HOME 신설**(라우트 `/home`, AppShell 셸 내부 핀 홈 탭) — 인사·요약 KPI 스트립 4타일(진행 전시·오늘 체크인·D-임박·미결 결재, 기존 실 API 재사용), 행사소개 배너 캐러셀(**SCR-01 login-slides 자산/API 재사용**·자동슬라이드·좌우 내비), 현재·예정 전시 일정 캘린더(**WISE `CalendarView` 패턴 참조** — 월 그리드 6주×7열·요일 헤더·오늘 강조·단일일 색점칩/기간 spanning bar·"+N" 팝업 + **전시장 세그먼트 필터(동적 옵션·하드코딩 금지 — `전체`+홀 마스터 센터 구분 distinct, 3관·4관 확장 대비)** 기본값 전체, `/api/events/calendar`+`/api/public/events`+홀 마스터 옵션 API 재사용), **"진행 중·다가오는 전시" 쇼케이스(확정판 — 배너 아래 가로 스크롤 포스터 카드 레일 8~12장·세로 2:3 포스터+행사명/기간/hall_label/상태배지/D-day·좌우 화살표·탭 `진행 중|이번 달|다음 달`·poster_url 부재 시 그라디언트+행사명 폴백, 데이터=event 테이블 poster_url V32 크롤 34건)**, 우측 컬럼 4위젯 스택(**내 할 일(역할 기반, 최상단) — 주최자=미결 결재/서류 마감 D-n/홀 배정 대기/옥션 낙찰 대기·참가업체=신고서류/설계 확정/견적·청구·공사업체=응찰 마감/시공 일정·관리자=승인 대기/점검, 행=상태점+작업명+대상+D-day 클릭 이동·건수 배지·0건 "모두 완료"+CTA, 데이터=§5B approval·M6·M15·M9 집계 조합 — 신규 통합 API `GET /api/home/todos` 계약 제안 명시**·공지 최근 5건+더보기(§5B notice `/work/notice`)·**빠른 작업 2×3 바로가기 그리드(역할별)**·**최근 활동 타임라인 5건(알림 피드 재사용)**), 내 행사 워크스페이스 카드 그리드(참여 행사·카드 클릭→역할별 대시보드·빈 상태 초대코드 안내) + **KPI 4타일 역할별 구성 명시(주최자/참가업체/공사업체/관리자 예시 세트)** + **밀도 원칙 4항(소유자 추가 지시)**: 대형 공백 금지·12컬럼 컴팩트(섹션 간 24px 표준/32px 상한)·배너 높이 220~260px 제한·좌우 컬럼 세로 균형·전 빈 상태 안내+행동 버튼(CTA) 조합. **본 판이 SCR-HOME 스펙 확정판** — 레이아웃·상태(영역별 로딩/빈/에러)·데이터 원천 매핑·접근성(WCAG AA·i18n `home.`·이모지 금지 선SVG·`prefers-reduced-motion`)+영어 Stitch 프롬프트(Precision Enterprise AI·1440·footer 포함). ②**SCR-01 흐름 수정**: 로그인 성공→`/home` 랜딩, "행사 워크스페이스 선택" phase 제거(SCR-HOME 섹션으로 흡수), SCR-01은 순수 로그인 화면으로 축소. ③**§2-2 ShellFooter 신설**(약 36px, 전 셸 화면 공통): 좌측 저작권 "© 2026 KINTEX. All rights reserved.", 우측 시스템 상태 점(정상/점검·색외 텍스트 병기)·앱 버전·고객지원 링크, `role="contentinfo"`·라이트/다크 토큰·WCAG AA·i18n `shell.footer.*`, 모바일 미적용(더보기 이관). §2.7-1 셸 레이아웃 다이어그램에 하단 36px 행 추가. ④**§2-1 사이트맵·§2.8-2 인벤토리**에 SCR-HOME 반영(집계 84→**85화면**, 미생성 0→2: SCR-HOME+SCR-M3). §1 토큰 권위 유지·**신규 토큰 0**, 기존 화면 스펙·PLANNING.md·src 무수정 |
|
||
| **v2.1.1** | 2026-07-12 | designer | **Stitch 잔여 39화면 전량 확보(64/64) 상태 반영 + 이전 확보 25화면 상태 정합 + 집계 갱신.** 2026-07-12 Stitch 수확 재실행으로 미확보 39화면이 전량 확보됨 — §2.8-2 인덱스 상태 컬럼만 `🔲미생성`→`✅Stitch` 교체(웹코어 SCR-22·23·25·26·27·29·30·32~51, 관리자 SCR-A5·A6·A8·A9, 공개 SCR-P1~P7, 모바일 SCR-M15). 추가로 이전 세션 확보분 25화면(디스크 code.html 존재 검증: 웹코어 SCR-18·19·20·21·24·28·31, 관리자 SCR-A1~A4·A7·A10, 공개 SCR-P8, 모바일 SCR-M4~M14)도 동일 규칙으로 정합화 — 총 64화면 상태 교체. §2.8-2 집계 문장 갱신: ✅Stitch 18→**83** · 🔲미생성 64→**0**(Stitch 미확보는 SCR-M3 1건뿐). 화면 스펙·프롬프트·구조 무수정. 수확 상세 `_workspace/stitch_gen/harvest_report.md` |
|
||
| **v2.1** | 2026-07-11 | designer | **입장권 예매 4화면 추가(M10 티켓 기획 대비 화면 갭 해소).** PLANNING v3.0 M10이 티켓을 기획 범위에 포함하나 design.md v2.0 인벤토리엔 예매 흐름 화면이 없던 갭을 메움 — 기존 번호 체계 이어서 순증(재번호화·기존 스펙 수정 없음). ①**§2.8-1 매트릭스**: M10 행에 SCR-P7·P8/M14·M15, M9 행에 SCR-P7(티켓결제 연계) 반영. ②**§2.8-2 인덱스**: 공개사이트에 SCR-P7(입장권 예매)·SCR-P8(예매 확인·취소), 모바일에 SCR-M14(모바일 티켓 예매)·SCR-M15(내 티켓 지갑) 추가, 집계 80→**84화면**(공개 6→8·모바일 13→15, 미생성 60→64). ③**§3B**: SCR-P7(행사·권종→예매자→결제→완료 다단계, 게스트+회원, 결제 PG 어댑터 위임·카드번호 입력 UI 없음)·SCR-P8(예매번호+이메일 조회·QR 티켓 상세·환불정책·취소) 상세+영어 Stitch 프롬프트. ④**§4**: SCR-M14(SCR-P7 모바일 최적화 390px·48px 터치)·SCR-M15(보유 티켓·QR 풀스크린 밝기부스트·오프라인 표시·취소 진입, 티켓→체크인→배지(SCR-M5) 전환 명시) 상세+프롬프트. §5 가이드 모바일 범위 M1~M13→M1~M15. **보안·불변 준수**: 결제 화면 카드번호 저장 UI 금지(PG 위임 명시)·PII 마스킹·WCAG AA·i18n·라이트/다크. §1 토큰 권위 유지, 신규 토큰 0. PLANNING.md·기존 화면 스펙·src 무수정 |
|
||
| **v2.0** | 2026-07-11 | designer | **전 화면 인벤토리 확장 — PLANNING v3.0 전 모듈·전 역할 커버.** 기존 SCR-01~17·SCR-M1/M2(재번호화 없이 보존)에 **신규 60화면 순증**: ①**§2.8 전 화면 인벤토리 매트릭스 신설**(모듈×역할×채널 요약표 + 전 SCR 인덱스 + 기생성/기구현/미생성 상태 컬럼, 총 80화면). ②**웹 코어·도메인 SCR-18~51**(M1 배정·견적/부스판매/셀프선택, M9 정산, M6 서류·마일스톤·서류작성, M7 매칭·RFQ, M8 물류, **M15 옥션 4종**(목록·상세순위·견적서·낙찰), M10 관람객관리·체크인·리드, M12 EDM·스폰서십, M17 CMS·마이크로사이트·다국어, 업체 대시보드, **§5B 공통 업무기능 SCR-39~48**(worklog·schedule·message·notice·opinion·search·meeting·report·notification·mypage, UIWS 표준 정합), 인증 SCR-49~51(회원가입·비번재설정·OTP)). ③**§3A 관리자 백오피스 SCR-A1~A10**(사용자·RBAC·공통코드·메뉴·감사로그·시스템설정·마스터데이터·룰셋버전·**테넌트 온보딩§1A**·AiConfig). ④**§3B 공개 홍보 사이트 SCR-P1~P6**(홈·행사상세·인터랙티브 플로어플랜·사전등록·마이크로사이트 공개뷰·참가문의, MDI 비적용·SEO/다국어). ⑤**모바일 SCR-M3~M13**(역할별 홈·리드캡처·관람객 배지/QR·wayfinding·플로어플랜·비즈매칭·세션아젠다·업체 통행증·알림·서류승인·옥션순위). 각 화면 SCR ID·화면명·역할·모듈·레이아웃·상태(로딩/빈/에러/degraded)·데이터 원천(실/샘플 경계)·라우트·**영어 Stitch 프롬프트** 포함. §1 토큰·§2.7 MDI 셸 보존, **신규 토큰 0**. AI 산출물 워터마크·AiLabel·PII 마스킹·WCAG AA·i18n·라이트/다크 토큰 불변 규칙 반영. PLANNING.md·src 무수정 |
|
||
| v1.0 | 2026-07-11 | designer | 최초 작성 — PLANNING.md v1.0 기반. 디자인 시스템·IA·P0 중심 14화면(웹 12 + 모바일 2) Stitch 프롬프트 포함. 다크모드는 Phase 1 미지원(캔버스 다크 서피스만) 결정 |
|
||
| v1.0.1 | 2026-07-11 | reviewer 반영 | 화면 수 표기 정정(13→14). 잔여 지적사항은 docs/BACKLOG.md 참조 |
|
||
| v1.1 | 2026-07-11 | designer | **Stitch 산출물 학습·정합화.** `stitch_kintex_ai_system_architect/` 18화면 code.html + DESIGN.md 3변형(Intelligence·Nexus·Precision) 학습. ①§1-2 컬러: Precision Enterprise AI 변형이 우리 토큰(#0066B3·#1C2536·#6D4AFF·#D92D20·#F9FAFB·#101828·StatusBadge 진행) 실증 확인 — 우리 팔레트를 단일 출처로 유지, #0059A6·#00427D는 짙은 대체 톤으로만 허용, ai-surface #F5F3FF AI 카드 배경 채택. ②§1-3 타이포: Pretendard 권위 유지, Inter를 라틴/tabular 보조로 허용(Stitch가 Hanken Grotesk/Inter 채택), 행 높이 44/48px 권위값 유지. ③§1-4 라운드(4/8px·pill)·엘리베이션(톤레이어+1px 테두리+AI 좌측 보라 액센트)·그리드(12컬럼·1440px·4px 베이스)·지브라 테이블 토큰 신설(이전 누락분). ④§2.5 Stitch 화면↔SCR 매핑표 신설(14화면). ⑤§2.6 범위 게이트 — proposal.md 및 범위 밖 4화면(business_intelligence·hall_operations·exhibition_schedule·admin_dashboard)을 P2 후보로 분류(PLANNING이 범위 권위, designer 임의 승격 금지). PLANNING.md·타 문서 무수정 |
|
||
| v1.3 | 2026-07-11 | designer | **v2.0 확장 화면 SCR-13~17 정합화.** Stitch 재취득 5화면(`business_intelligence`·`hall_operations`·`exhibition_schedule`·`admin_dashboard`·`component_guide_updated`)을 기존 SCR 형식대로 순증. ①§2.5-1 v2.0 확장 화면 매핑표 신설(SCR-13 M16 P1·SCR-14 M14 P2·SCR-15 M1·M6 P1·SCR-16 M18 P1·SCR-17 §1 스타일가이드) + 공통 NFR(테마·웹접근성·다국어·AI 라벨). ②§2.6 갱신 노트 — business_intelligence/hall_operations/admin_dashboard는 planner의 PLANNING §5A 정식 반영(M16/M14/M18)으로 P2 후보 게이트 통과, exhibition_schedule은 운영사·주최자용 행사일정으로 재분류(M1·M6). 비전성 요소(센서·CCTV·AI 컨시어지)는 P2/후속으로 범위 표기. ③§3에 SCR-13~17 상세(레이아웃·상태·데이터 원천 실/샘플 경계면·라우트·Stitch 영어 프롬프트) 추가 — BI 차트 Recharts, StatusBadge/AiLabel 등 공통 자산 재사용 명시, 집계/센서 API 부재분은 샘플 시연 표기(SCR-02 원칙 준수). 라우트는 App.tsx 컨벤션 정합(`/analytics`·`/ops/operations`·`/schedule`·`/admin`·`/_styleguide` + event 스코프 드릴다운). §1 토큰 권위 유지(신규 토큰 0), PLANNING.md·src/ 무수정 |
|
||
| v1.2 | 2026-07-11 | designer | **MDI(다중 문서 인터페이스) 셸 표준 신설.** 업무 포털 AppShell을 단일 라우트 SPA → 탭 호스트로 전환하는 표준을 §2.7로 정의(kintex-frontend-dev AppShell 전환 기준). ①§2-2 내비게이션을 MDI 기준으로 갱신(사이드바+상단 문서 탭바+중앙 DocumentHost, 메뉴 클릭=탭 열기, 공개/관람객 사이트·모바일은 MDI 비적용). ②§2.7 신설 — 2.7-1 셸 레이아웃(3영역 그리드) · 2.7-2 탭 규격(열기/활성/닫기·미들클릭·드래그 재정렬·중복방지·최대 12탭·오버플로우 스크롤+드롭다운·dirty ● 및 닫기 확인·핀 고정) · 2.7-3 탭별 상태 보존(비활성 언마운트 금지 display:none·캔버스 freeze·WebGL 메모리 가드·beforeunload) · 2.7-4 세션 복원 & 딥링크↔탭 URL 동기화(라우트 예시·localStorage 세션·행사 전환 분리) · 2.7-5 단축키(Ctrl+W/Tab/1~9/Shift+T·Ctrl+클릭 새 탭)+접근성(ARIA tablist/tab/tabpanel·로빙 탭인덱스·WCAG AA) · 2.7-6 역할별 적용(관리자·주최자·참가·장치·홀매니저=적용, 관람객/공개=비적용, 모바일 전역 비적용) · 2.7-7 컴포넌트·스토어 표준(AppShell·TabBar·Tab·DocumentHost·useMdiStore/DocumentInstance/docKey 중복방지·직렬화 규칙) + MDI 셸 Stitch 프롬프트(영어). §1 토큰 재사용, 신규 토큰 0. PLANNING.md·src/·타 문서 무수정 |
|