zio
4cee6c1f66
- design.md v1.3: SCR-13~17 매핑·상세 스펙 순증 (기존 SCR-01~12 무수정) - React 이식 5화면 + Recharts 도입 + chartColors(§1 토큰)·shared.css 공통 프리미티브 - App.tsx 라우트 5종 + AppShell NavLink 배선 (신규 4항목, /_styleguide 네비 비노출) - QA: tsc 위양성 교정(tsconfig.app 기준)·미사용 import 제거 → tsc/vite build EXIT 0 - reviewer: 배포 가능(Critical/Major 0) — Minor 티켓 BACKLOG 등재, R15-01 홀 필터 배선 즉시 수정 - docs: UNDEVELOPED_BACKLOG.md 신설(세션 미개발 통합) + WORK_STATUS 갱신 - stitch: 재취득 4화면 + component_guide 2종 + _icons 7종 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
675 lines
94 KiB
Markdown
675 lines
94 KiB
Markdown
# 킨텍스 AI 전시관리 시스템 — UI 디자인 스펙 (design.md)
|
||
|
||
> 작성: 디자인 에이전트(designer) · 작성일: 2026-07-11 · 버전: v1.3
|
||
> 근거 문서: `docs/PLANNING.md` v1.0 (모듈 맵 M1~M9, P0 기능, 나노바나나 표준 샷 세트 S1~S7) · 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 프롬프트만 영어.
|
||
|
||
---
|
||
|
||
## 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)
|
||
|
||
주최자 (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 + 단일 라우트)를 유지한다.
|
||
- **모바일**: 하단 탭 바 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 로 상태 보존 │
|
||
│ │ │
|
||
└──────────┴─────────────────────────────────────────────────┘
|
||
```
|
||
|
||
- **사이드바(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.
|
||
```
|
||
|
||
---
|
||
|
||
## 3. 화면별 스펙
|
||
|
||
> P0 모듈(M2·M3·M4·M5) 중심 총 14개 화면(웹 12 + 모바일 2) + **v2.0 확장 SCR-13~17(경영분석 M16·홀운영 M14·전시일정 M1·M6·관리자 M18·컴포넌트 가이드)**. 각 Stitch 프롬프트는 화면 1개를 1회 생성하는 기준으로 작성했다.
|
||
|
||
---
|
||
|
||
### SCR-01 로그인 & 행사 워크스페이스 선택
|
||
|
||
- **대상**: 전 역할 공통 · **진입 경로**: 최초 접속 / 초대 링크 클릭
|
||
- **레이아웃 (위→아래)**:
|
||
1. 좌우 분할: 좌측 55% 브랜드 패널 — 나노바나나 생성 부스 예상 사진 배경 + 카피 "신청서를 내는 순간, 시공 후 사진을 먼저 봅니다" + AI 이미지 고지 캡션
|
||
2. 우측 45% 로그인 카드: 이메일/비밀번호, 이메일 인증 로그인, 킨텍스 내부 계정(SSO) 버튼 분리
|
||
3. 로그인 후: 행사 워크스페이스 카드 그리드(행사명, 기간, 홀, 내 역할 배지, D-데이 칩) + 초대 코드 입력 필드
|
||
- **핵심 컴포넌트/상태**: 역할 배지(주최자/참가업체/장치업체/홀매니저) · 빈 상태: "참여 중인 행사가 없습니다 — 초대 링크를 확인하세요" · 에러: 미등록 장치업체 초대 수락 시 차단 모달("킨텍스 등록업체만 참여할 수 있습니다").
|
||
- **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-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` (내부 전용, 프로덕션 비노출) — 제품 내비게이션·사이드바에 포함하지 않는다.
|
||
|
||
---
|
||
|
||
## 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.
|
||
```
|
||
|
||
---
|
||
|
||
## 5. Stitch 사용 가이드 (요약)
|
||
|
||
1. stitch.withgoogle.com에서 새 프로젝트 생성 → 플랫폼은 웹 화면(SCR-01~12)은 Desktop, SCR-M1/M2는 Mobile 선택.
|
||
2. 화면당 위 코드블록 프롬프트 1개를 그대로 붙여넣어 생성 — 프롬프트에 색상·레이아웃·예시 데이터가 포함되어 있어 추가 지시 없이 1회 생성이 기준.
|
||
3. 결과 보정은 짧은 추가 지시로: 예) "Make the right quote panel 340px and sticky". 한국어 텍스트가 깨지면 "Keep all labels in Korean exactly as given" 재지시.
|
||
4. 생성 화면은 Figma로 내보내 디자인 시스템 토큰(§1)과 대조 후 조정한다.
|
||
|
||
---
|
||
|
||
## 6. 변경 이력
|
||
|
||
| 버전 | 일자 | 작성자 | 내용 |
|
||
|---|---|---|---|
|
||
| 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/·타 문서 무수정 |
|