zio/kintex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
main
kintex/docs/design.md
ythong 94e7bc6d26 docs(design): v2.8 on-accent token and filled-button white text rule 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-24 12:12:57 +09:00

336 KiB
Raw Permalink Blame History

킨텍스 AI 전시관리 시스템 — UI 디자인 스펙 (design.md)

작성: 디자인 에이전트(designer) · 작성일: 2026-07-14 · 최종 갱신: 2026-07-23 · 버전: v2.8 근거 문서: 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 라벨
on-accent #FFFFFF 유색(filled) 배경 위 텍스트 전용(v2.8) — primary·ai-accent·success·warning·error 등 배경색이 채워진 버튼/배지/칩의 글자색. 다크모드에서도 항상 흰색 유지(구현 정합: 프론트 기구현 토큰 --color-on-accent, src/frontend/src/styles/tokens.css — --color-white는 다크에서 서피스로 반전되므로 유색 배경 글자엔 이 토큰만 사용)
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 이상, 컬러 배경 위 텍스트는 흰색(on-accent #FFFFFF) 고정. warning·error는 (밝은 배경 위) 텍스트 사용 시 위 표의 진한 값만 사용.

유색 배경 버튼 = 흰색 텍스트 (소유자 확정 규칙 2026-07-15 — v2.8): 배경색이 채워진(filled/solid) 버튼은 텍스트를 항상 흰색 계열(on-accent #FFFFFF)로 한다 — primary-600 주 버튼, ai-accent AI 버튼, success/warning/error 상태 버튼 등 유색 배경 전부에 적용(라이트·다크 공통 — --color-on-accent는 다크에서도 흰색 유지). outline·ghost·텍스트(tertiary) 버튼은 해당 없음(투명/흰 배경이므로 자기 색 텍스트 — 예: outline은 primary-600 글자). 배지·칩·솔리드 배너 등 유색 채움 서피스의 글자도 동일 원칙.

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. 컴포넌트 원칙

  • 버튼(Button) 텍스트 색(v2.8 — 소유자 지시 2026-07-15): 변형 4종 — Primary(파랑 채움)·AI(보라 채움)·상태(success/warning/error 채움)는 텍스트 on-accent(흰색) 고정, Secondary Outlined·Ghost·텍스트 버튼은 자기 색 텍스트(§1-2 규칙 참조). Disabled는 회색 배경+neutral-500 텍스트. 구현은 --color-on-accent 토큰 사용(하드코딩 #fff·--color-white 금지 — 다크모드 반전 사고 방지).
  • 상태 배지(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-4A. 전역 컴포넌트 표준 (v2.7 신설 — 2026-07-23 세션 6 소유자 확정)

아래 6개 표준은 전 화면 공통 강제 규칙이다. 개별 화면 스펙은 이를 재정의하지 않으며, 신규/기존 화면 모두 준수한다. 근거: docs/OWNER_FEEDBACK.md 세션 6.

  • G1. 디자인 시스템 재확정 — Nifty 문자 그대로 / Stitch 산출물 우선(강한 반복 피드백): 전 프론트 화면은 Nifty 컴포넌트(docs/DESIGN_SYSTEM_NIFTY.md)를 문자 그대로 사용한다(카드 .kx-card·테이블 .kx-table·버튼·드롭다운·List Group·타이포/모달/Offcanvas 등 UI-elements 전체, 자체 재해석 금지). 신규 화면은 Stitch 산출물(stitch_kintex_ai_system_architect/)을 먼저 이식하고 그 위에 Nifty 토큰으로 수렴시킨다 — 손그림·임의 스타일 금지. 본 문서 §1 토큰이 단일 출처이며, Nifty 참조는 §1 토큰으로 번역해 적용한다(docs/analysis/nifty-design-refs.md).
  • G2. 페이지 타이틀 선(stroke) SVG 아이콘 의무: 모든 페이지·섹션 타이틀 앞에는 선으로 그린(stroke, fill:none, stroke:currentColor) SVG 아이콘을 붙인다 — 공용 세트 icons.tsx에서 조달(화면별 의미 아이콘). 이모지 절대 금지. 타이틀-아이콘 정렬은 좌측 정렬·아이콘 20~24px·타이틀과 8px 간격. 기존 이모지/무아이콘 타이틀은 전 화면 스윕으로 교체.
  • G3. 모든 그리드에 PDF 출력 버튼(JasperReports): 데이터 그리드(테이블)를 노출하는 모든 화면은 그리드 상단 우측 툴바에 "PDF 출력" 버튼을 표준 제공한다 — 서버 사이드 JasperReports(WISE Jasper 패턴) 로 현재 필터·정렬·검색 상태를 반영한 리포트를 생성·다운로드(범용 grid-pdf 백엔드 계약, application/pdf). 버튼은 선 SVG 문서 아이콘 + 라벨 "PDF 출력", CSV/Excel 내보내기와 병렬. 로딩 중 "생성 중…" 비활성, 실패 시 인라인 재시도. 빈 그리드는 비활성.
  • G4. 목록 위젯 10줄 프리뷰 + "전체보기(N)" 표준: 대시보드·홈의 목록형 위젯(내 할 일·공지·최근 활동·알림 피드·타임라인 등)은 최대 10줄만 프리뷰하고, 항목이 초과하면 하단에 "전체보기(N)" 버튼(N=전체 건수)을 노출해 전용 목록/센터로 이동한다(무한 확장·위젯 내 스크롤 폭주 금지). 0건은 안내 문구 + 행동 버튼(CTA) 조합(§SCR-HOME 밀도 원칙 ④).
  • G5. 목록 오버플로 규격 — minmax(0,1fr): 알림 피드·타임라인·목록 위젯이 그리드/플렉스 자식일 때 트랙을 minmax(0,1fr)로 잡아 긴 텍스트·세로 글자 짤림·컬럼 블로우아웃을 원천 차단한다(min-width:0/min-height:0 수렴). 항목 텍스트는 말줄임(ellipsis) 또는 줄바꿈으로 처리하고 컨테이너를 넘기지 않는다.
  • G6. 유색 배경 버튼 글자 = --color-on-accent(흰색) 전역: primary·AI·success·warning·error 등 유색(솔리드) 배경 버튼의 텍스트는 항상 --color-on-accent(흰색 #FFFFFF, 다크 토큰에서도 흰색 고정) 를 사용한다(공개 사이트 포함 전 화면). 옅은 ghost/outline 버튼만 예외(색 텍스트). 유색 배경 위 텍스트 하드코딩 hex 금지 — CSS 변수 주입.

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
└─ 정산·결제 [M9, P1] — Phase 2 (SCR-21) ※ SCR-02 사이드바 "정산" 메뉴와 정합 (v2.5 B-05)

참가업체 (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

집계(v2.5 정정 — B-04): 웹 코어·도메인 52 (기존 17 + 신규 34 + SCR-HOME 신규 1) · 관리자 10 (신규) · 공개사이트 8 (기존 6 + 신규 2 티켓) · 3-트랙 관문·서브홈 4 (SCR-T0~T3 — v2.2 신설, 이전 집계 문장에 누락되어 있던 것을 정정) · 모바일 15 (기존 3 + 신규 12) = 총 89화면. 상태: ✅Stitch 83 · ✅구현 20 · 🔲미생성 6 (SCR-HOME + SCR-T0~T3 4화면 + SCR-M3(✅구현(부분)·Stitch 미확보)). 2026-07-12 수확으로 위 6화면을 제외한 화면은 전량 Stitch 확보됨.

3. 화면별 스펙

P0 코어 총 15개 화면(웹 13 = SCR-01·SCR-HOME·SCR-02~12, 모바일 2 = SCR-M1·M2 — v2.5 B-04 정정: SCR-HOME(v2.1.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·3-트랙 §3C·모바일 §4. 전 화면 집계는 **§2.8-2(총 89화면)**를 권위로 한다. 각 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 참조).
  • 2차 인증 패널 로고(v2.7 — 세션 6): 로그인 2단계 OTP 챌린지(OtpChallengePanel)와 OTP 설정(SCR-51)의 상단 로고는 KINTEX 워드마크(32px, .kx-otp__logo) 로 통일 — 방패/자물쇠 보안 아이콘 대체 금지(SCR-51 브랜드 아이콘 확정 참조).
  • 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 "로그인", a tertiary text button "이메일 인증으로 로그인" right below it, 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 원칙대로 샘플 표기.
  • 목록 위젯 표준(v2.7 — 세션 6 소유자 확정 · §1-4A G4·G5 적용): 내 할 일·공지·최근 활동 3개 목록 위젯은 최대 10줄 프리뷰 + 하단 "전체보기(N)" 버튼(N=전체 건수)으로 통일한다(기존 "6행/5건 + 더보기" 표기를 10줄 표준으로 갱신 — 내 할 일 6행→10줄, 공지·최근 활동 5건→10줄). 각 위젯 컨테이너는 minmax(0,1fr) 트랙으로 잡아 항목 텍스트가 세로로 짤리거나 컬럼을 밀어내지 않게 하고(최근 활동 타임라인 포함), 항목은 말줄임/줄바꿈으로 처리. "더보기"/"전체 보기" 라벨은 "전체보기(N)"로 정합(공지→/work/notice, 최근 활동→알림센터, 내 할 일→역할별 작업 목록).
  • 접근성·반응형·국제화: 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, §1-4A G2 — 각 섹션 타이틀 앞 선 SVG 아이콘). 캐러셀 자동재생은 일시정지 컨트롤 제공·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-데이 마일스톤 타임라인)

  • 대상: 주최자 · 진입 경로: 로그인 → 행사 선택 (주최자 기본 홈)
  • IA 정합 메모(v2.5 — B-05 해소): Stitch 프롬프트의 사이드바 메뉴 "정산"은 v2.0에서 정식 화면이 된 SCR-21 정산·결제 대시보드(M9 · Phase 2) 진입 메뉴다. §2-1 주최자 사이트맵에 "정산·결제 [M9]"를 추가해 IA↔프롬프트 불일치를 해소했다(메뉴 표기 문구는 "정산" 유지).
  • 레이아웃:
    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)" 미니 이미지 카드
  • 오버플로·목록 규격(v2.7 — 세션 6 소유자 확정 · §1-4A G4·G5): ①마일스톤 타임라인(진행 단계)이 짤리지 않도록 히어로 타임라인 트랙은 minmax(0,1fr)로 잡고 노드 카드가 컨테이너를 넘기지 않게 한다(D-노드 라벨 말줄임·5노드 균등폭). ②우측 알림 피드는 그리드 자식 트랙 minmax(0,1fr)로 잡아 세로 글자 짤림/컬럼 블로우아웃을 원천 차단(텍스트 말줄임), 최대 10줄 프리뷰 + "전체보기(N)"(알림센터 이동)로 통일. ③참가업체 현황 테이블은 §1-4A G3(그리드 PDF 출력 버튼) 적용. 데이터: 참가업체 현황·알림 피드는 V68(참가업체 24사)·V69(옥션·수주·피드 파생) 시드로 채움(빈 화면 방지).
  • 상태: 로딩 — 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]

  • 대상: 주최자 (홀매니저 읽기 전용) · 진입 경로: 대시보드 → 플로어플랜 스튜디오 / AI 자동배치 위저드 ③단계 "이 안으로 편집 시작"(apply-option 저장 완료 후 캔버스 진입 — SCR-04)
  • 레이아웃:
    1. 상단 툴바: 홀 선택 셀렉트(전시장별 optgroup 그룹핑 — "제2전시장 · 홀7", 변경 시 해당 홀 배치 라우트로 전환, v2.6 M2-1 정합), 배치안 버전 드롭다운("배치안 B v3"), 저장 상태, 보라색 AI 버튼 "AI 자동배치"(클릭 시 3단계 위저드 다이얼로그 오픈 — 아래 M2-1 절), "규정 검증 실행", "홀 전경 생성(S7)", 공유
    2. 좌측 도구 패널(240px): 도면 툴그룹(JPG / DWG 탭 — 디폴트 = DWG, v2.7 세션 6 — 아래 "도면 언더레이" 절), 부스 팔레트(표준 규격 선택/드래그: 기본 3×3m / 프리미엄 6×3m / 아일랜드 — 카드 클릭 선택 후 캔버스 드래그앤드롭 배치), 시설 요소(무대·라운지·주출입구), 레이어 토글(트렌치 그리드 / 기둥·셔터·비상구 / 위반 오버레이)
    3. 중앙 캔버스(다크 #1C2536): 실측 홀 도면(JPG 또는 DWG)을 배경 언더레이로 로드하고, 도면 내 전시 바닥면 캘리브레이션 영역(분율 좌표 — 구현 정본 hallFloorplan.ts FLOOR_REGIONS·DWG_HALL_DIMS)에 홀 좌표계(홀7 기준 126×90m, 축척 표시)를 정렬해 부스 폴리곤이 평면도 안에 표시·드래그앤드롭된다(도면 없는 추상 캔버스에 배치 후 도면 덧그리기 금지 — PLANNING v3.5 M2-1 원칙 1). 부스는 파란 채움+부스번호, 선택 시 핸들. 트렌치 그리드는 점선, 비상구는 녹색 아이콘. 위반 오버레이: 통로 폭 미달 구간 빨간 반투명 밴드 + 번호 핀(차단 2건 — 핀 1·2), 바닥하중 초과 부스 주황 빗금(경고 3건 — 핀 3·4·5) — 우측 [검증] 탭 요약 "차단 2 · 경고 3"과 핀이 1:1 일치(v2.5 B-07 정정)
    4. 우측 패널(360px) 탭 2개: [속성] 선택 부스 좌표·크기·타입·배정 업체 / [검증] 위반 목록 카드(핀 번호, 규정 근거 "피난 통로 3m 미만", 심각도, "위치 보기") + 요약 "차단 2 · 경고 3"
    5. 하단 상태 바: 부스 수 486/510 · 판매 면적 · 줌 컨트롤(현재 배율 % + 리셋)
  • 플로어플랜 표준 확정(v2.7 — 세션 6 소유자 확정): ①도면 탭 디폴트 = DWG — 좌측 도면 툴그룹은 JPG/DWG 2탭이며 기본 선택은 DWG(CAD 렌더 PNG /media/floorplans/dwg/hall{1~10}.png, 미보유 홀은 탭 비활성·JPG 폴백). ②부스 팔레트 — 표준 규격 카드를 클릭해 선택하고 캔버스로 드래그앤드롭 배치(규격은 마스터 부스표준 기준). ③평면도 확대 팝업(.kx-floorplan-lightbox, 신설) — 캔버스 상단 "확대" 버튼(또는 도면 더블클릭) 시 대형 모달로 현재 도면(DWG/JPG)을 크게 열람(role="dialog" aria-modal, 배경 클릭·Esc 닫기, 모달 내 휠 줌·드래그 이동). AI 자동배치 완료 결과도 이 확대 팝업에 우선 표시(아래 SCR-04 AI UX 참조).
  • 도면 언더레이 — JPG/DWG 탭 (v2.7 신설 — 구현 정본 BoothLayoutEditorPage.tsx·hallFloorplan.ts): 좌측 도구 패널 "도면" 그룹에 언더레이 소스 전환 탭 2개(role="tablist")를 둔다. 부스 배치가 어떤 도면 위에서 그려지는지를 사용자가 선택한다. 기본 선택 = DWG(세션 6 소유자 확정 — 위 "플로어플랜 표준 확정" ① 참조), DWG 미보유 홀은 JPG 폴백.
    • JPG 탭: 킨텍스 공개 크롤본 홀 도면 JPG(/media/floorplans/hall{n}.jpg, 빌드 내장). 도면 여백·범례·미니맵을 포함하므로 전시 바닥면 채색 영역(제1전시장 연노랑·제2전시장 라임그린)의 분율 좌표(FLOOR_REGIONS)에 홀 사각형을 정렬한다. 전 홀(H1~H10) 보유.
    • DWG 탭(기본값): CAD(DWG) 원본에서 홀 바닥면만 3m 여백으로 정확 크롭 렌더한 실측 도면 PNG(/media/floorplans/dwg/hall{n}.png). 렌더 파라미터에서 캘리브레이션이 결정적으로 산출되므로(region = [m/(W+2m), …], m=3) JPG보다 정밀. 미보유 홀은 탭 비활성(disabled) + 툴팁 "이 홀은 CAD 렌더 준비 중". 현 시점 제1전시장(K1 — H1~H5, 축정렬) 렌더 완료분 노출, 제2전시장(K2 — H6~10)은 CAD 원본상 홀이 기울어 배치돼 렌더 시 회전 보정(H6 −12°·H9 −11°·H10 +11°·H7/H8 축정렬) 적용(근거 docs/analysis/cad-extraction.md §K2).
    • 동작: 탭 전환 시 캔버스 언더레이 이미지·캘리브레이션 영역이 즉시 교체되고 부스 좌표는 불변(같은 홀 좌표계). DWG 미보유 홀 선택 시 자동으로 JPG로 폴백. 도면 로드 실패 시 언더레이 없이 다크 서피스만 렌더(부스·격자는 유지 — onError 폴백).
  • 캔버스 팬·줌 인터랙션 (v2.7 신설 — 소유자 지시 2026-07-14, 구현 정본 FloorplanCanvas.tsx): 대형 홀 도면 위 정밀 배치를 위해 캔버스에 팬(드래그 이동)·줌을 제공한다.
    • 줌: 마우스 휠 위/아래로 확대/축소(휠 스텝 배율, 하한~상한 클램프), 배율은 하단 상태 바 줌 컨트롤(% 표시·리셋)과 양방향 동기(onZoomChange). 휠 이벤트는 페이지 스크롤을 억제(preventDefault).
    • 팬: 캔버스 빈 영역 좌클릭 드래그로 이동(transform: translate + scale), 드래그 중 커서 grabbing. 드래그 임계값(threshold) 초과 시에만 팬으로 판정하고, 팬 직후 따라오는 click은 캡처 단계에서 차단해 부스 선택/해제 오발을 방지한다(미세 클릭과 드래그 구분).
    • 접근성: 캔버스 role="img" + aria-label(홀 치수·부스 수). 팬/줌은 마우스 보조 인터랙션이며 부스 선택·검증 등 핵심 조작은 팬 없이도 가능.
  • 상태: AI 자동배치 생성 중 — 위저드 다이얼로그 내 진행 화면("제약조건 풀이 중… 복수 안 생성" — 캔버스 오버레이 아님, v2.6 정정) · 검증 통과 시 녹색 배너 "위반 0건 — 제출 가능" · 빈 캔버스 — "AI 자동배치(3단계 위저드)로 시작하세요" CTA(위저드 ①단계 진입).
  • M2-1 자동배치 3단계 위저드 진입 모드 (v2.6 신설 — PLANNING v3.5 M2-1 정합, 구현 정본 AutoLayoutDialog.tsx): 위저드는 SCR-03의 진입 모드(모달 다이얼로그 .kx-auto)로 편입 — 배치 미존재 시 ①단계부터 시작, 기존 배치 존재 시 캔버스 직행(+툴바 "AI 자동배치"로 위저드 재실행). 단계 표시기(① 어디에 → ② 조건 → ③ 배치안 선택, 완료 단계 체크 표시) 공통.
    • ① 어디에: 셀렉트 3단 캐스케이드 — 대분류(전시장: 제1/제2전시장) > 중분류(홀 H1~H10, 라벨에 실측 치수 "…— 63×171m" 병기) > 소분류(구역, 기본값 "홀 전체"). 소스 = GET /api/halls/tree(V60 hall_zone 계층). 상위 변경 시 하위 초기화. 트리 로드 실패 시 degraded 노트("⚠ 평면도 목록을 불러오지 못해 현재 홀 기준으로 진행합니다")로 계속 진행. 액션: "취소" / "다음 — 조건 입력".
    • ② 조건: 자연어 한 줄 입력(placeholder 예: "부스 120개, 프리미엄 3할, 무대 1개, 입구 2개로 3안 뽑아줘") + 보라 AI 버튼 "AI 해석"(POST …/auto-generate/interpret, Enter 동일) → 해석 결과를 AI 해석 폼(목표 부스 수·프리미엄 비율%·무대 수·주출입구 수·생성 안 수 1~3)에 채움 + 해석 노트("✓ …" / degraded "⚠ AI 해석을 사용할 수 없습니다. 아래 값을 직접 입력해 주세요."). 최종 권위는 폼(사용자 수정 가능 — 해석만 LLM, 패킹은 결정론 엔진 §8A P1). 액션: "← 평면도 다시 선택" / 보라 "배치안 생성"(POST …/auto-generate?ai=true, zoneId 포함 — 구역 선택 시 구역 경계가 패킹 하드 제약).
    • ③ 배치안 선택: SCR-04(아래) — 3안 카드 그리드·S7 온디맨드 생성·라이트박스·apply-option 저장 계약을 위저드 ③단계 화면으로 실현.
  • 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: a hall selector dropdown "제2전시장 · 홀7" (grouped by exhibition center), version dropdown "배치안 B · v3", autosave label "저장됨", a distinctive purple #6D4AFF button with sparkle icon "AI 자동배치", outlined buttons "규정 검증 실행" and "홀 전경 생성", and an icon button with a share icon labeled "공유" at the right end of the toolbar. Left tool panel 240px on white: a "도면" tool group with two tabs "JPG / DWG" where the DWG tab is selected by default (a crisp CAD-rendered hall floor plan), a booth palette with small square previews to pick and drag onto the canvas ("기본 부스 3×3m", "프리미엄 6×3m", "아일랜드 부스"), facility items ("무대", "라운지", "주출입구"), and layer toggles with switches ("트렌치 그리드", "기둥·비상구", "위반 오버레이" turned on). Center: large dark navy canvas #1C2536 with an "확대" (expand) icon button at its top-right corner that opens a large full-screen modal of the drawing; the canvas shows the DWG-rendered top-down exhibition hall floor-plan as the base layer, with the booth layout aligned inside the drawing's exhibition floor area (hall outline 126×90m with scale ruler) — dozens of small blue booth rectangles arranged in rows with white booth numbers like "A-101" sitting inside the floor plan, dashed grid lines for floor trenches, green emergency-exit icons on walls; the canvas supports pan and zoom (a subtle "grab" cursor hint and a zoom percentage indicator); overlay violations: two semi-transparent red bands across an aisle with numbered red pins "1", "2", and three booths hatched in orange with numbered orange pins "3", "4", "5". 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]

  • 대상: 주최자 · 진입 경로: SCR-03 AI 자동배치 위저드 ②단계 "배치안 생성" 완료 → ③단계(동일 다이얼로그 내 전환). v2.6부터 별도 페이지가 아니라 위저드 ③단계 화면으로 실현(PLANNING v3.5 M2-1 (3) 화면 계약, 구현 정본 AutoLayoutDialog.tsx phase result) — 기존 선택/비교 UX 계약은 보존하고 진입·S7 생성·저장 계약만 개정.
  • 레이아웃:
    1. 위저드 다이얼로그 헤더(AiLabel "AI 자동배치" + 제목) + 단계 표시기("① 어디에 → ② 조건 → ③ 배치안 선택" — ①②는 완료 체크, ③ 활성)
    2. 배치안 카드 3열 그리드(카드 전체가 라디오 선택 영역): 각 카드 상단 이미지 슬롯은 기본이 점선 테두리 CTA 박스 — 안내 문구 "조감 이미지는 필요할 때만 생성합니다" + 보라 AI 버튼 "조감 이미지 생성". S7 조감은 자동 생성되지 않는다(쿼터 보호 — M2-1 원칙 3): 버튼 클릭 시에만 POST …/auto-generate/preview로 RenderJob 발행 → WebSocket 구독으로 진행 상태 갱신 → 완료 시 카드에 AiImage(S7 홀 전경 샷 라벨 + 대각 워터마크 "AI 생성 예상 이미지 — 실제 시공 결과와 다를 수 있습니다" + 고지 "계약·심사 서류에 사용 불가")
    3. 카드 본문: 안 라벨(1안/2안/3안), 지표 리스트(부스 수/목표 · 판매면적㎡ · 최소 통로폭m · 위반 건수 — 위반>0 빨강, 0건 녹색) + WISE AI 요약(AiLabel + 안 특성 한 줄, 예: "통로 가시성을 우선한 안입니다")
    4. 그리드 하단 안내 문구: "생성한 조감 이미지는 자동 저장되어 시각화 갤러리에서 다시 보거나 공사 옥션 참고 이미지로 쓸 수 있습니다" — 이미지는 render_job 영속(일회성 미리보기로 휘발 금지), 렌더 갤러리(SCR-12) boothRef=HALL-{hallId} 재열람 + M15 옥션 자료 패키지 MaterialPackage.aiImageUrl 재사용(M2-1 원칙 4)
    5. 하단 액션: 좌 "조건 수정"(②단계 복귀) / 우 주 CTA "이 안으로 편집 시작" — 클릭 시 POST …/apply-option으로 선택안을 실제 배치안 버전으로 저장(3안은 비교 단계까지 미저장 미리보기 — M2-1 원칙 5. 저장 중 버튼 라벨 "저장 중…" 비활성) 후 다이얼로그 닫힘 → 에디터 캔버스(SCR-03) 진입(적용 홀이 현재 라우트와 다르면 해당 홀 배치 라우트로 이동)
  • AI 자동배치 결과 UX — 시각 우선(v2.7 — 세션 6 소유자 확정): AI 자동배치(②단계 "배치안 생성") 완료 시, 배치 결과를 먼저 시각적으로 보여준다 — ③단계 진입과 동시에 평면도 확대 팝업(.kx-floorplan-lightbox, SCR-03 신설 모달)에 대표안(1안)의 배치 결과를 도면 위에 크게 렌더해 사용자가 "평면도 안에 부스가 어떻게 놓였는지"를 한눈에 확인하게 한다(시각 우선 원칙). 배치안(3안)의 지표·비교 상세는 그 다음, 버튼 클릭 시 노출 — 확대 팝업 하단/우측 "배치안 비교 보기(3안)" 버튼을 누르면 3안 카드 그리드(지표·AI 요약·조감 CTA)로 전개된다(자동으로 상세 표를 먼저 펼치지 않음). 팝업 안에서 안 전환(1안/2안/3안 토글) 시 도면 배치 렌더가 즉시 갱신. 조감(S7) 이미지는 여전히 온디맨드(원칙 3) — 배치 결과 시각은 도면 위 부스 배치 렌더(무료·즉시)이고, 포토리얼 조감은 버튼 생성.
  • 이미지 확대 라이트박스(.kx-lightbox, v2.6 신설): 생성 완료된 조감 이미지 클릭 → 확대 팝업(role="dialog" aria-modal, 배경 클릭·Esc 닫기) — 원본 크기 이미지 + 워터마크 고지 문구 유지("AI 생성 예상 이미지 — 실제 시공 결과와 다를 수 있습니다. 계약·심사 서류에 사용 불가.") + 액션 2개: "이미지 저장"(<a download> 다운로드) / "닫기".
  • 샘플 지표 산술 정합(v2.5 — B-08 정정): 판매면적 샘플은 부스 수 × 기본 3×3m(9㎡) 기준으로 통일 — 510부스 = 4,590㎡(SCR-03 하단 상태 바의 486부스 = 4,374㎡와 동일 산식). 기존 4,420㎡ 표기는 산술 오류로 폐기.
  • 상태: S7 미요청(기본) — 점선 CTA 박스(스켈레톤 아님) · 생성 요청 중 — 버튼 "요청 중…" 비활성 · 생성 중 — AiImage QUEUED/RUNNING 스피너 · 생성 실패/큐 미가용 — 오류 노트("이미지 생성 큐가 준비되지 않았습니다…") 표시하되 배치안 선택·적용은 계속 가능 · apply-option 저장 실패 — 오류 노트("배치안 저장 실패: …") + 재시도.
  • Stitch 프롬프트:
A modal wizard dialog (step 3 of 3) for comparing AI-generated exhibition floor layout options, in a Korean B2B web app "KINTEX AI 전시관리", desktop 1440px, light theme, blue #0066B3 primary, purple #6D4AFF for AI actions and labels. All UI text in Korean. The dialog floats on a dimmed backdrop over a floor plan editor. Dialog header: a small purple chip "AI 자동배치" next to the title "평면도 안 자동 배치", subtitle "전시장 평면도를 고르고 조건을 입력하면, 도면 바닥면 안에 배치안을 생성합니다", close X button. Below the header a 3-step indicator "① 어디에 → ② 조건 → ③ 배치안 선택" with steps 1 and 2 marked done (check) and step 3 active in blue. Body: three selectable option cards in a row, each with a radio button and title "1안 / 2안 / 3안". Card 1 and Card 2: the top image slot is an empty placeholder box with a dashed border, caption "조감 이미지는 필요할 때만 생성합니다" and a purple button with sparkle icon "조감 이미지 생성". Card 3: the top slot is filled with an isometric bird's-eye rendering of an exhibition hall full of white booth rows, a small purple chip "AI 생성 · S7 홀 전경" and a faint diagonal watermark "AI 생성 예상 이미지" across the image. Each card body shows metric rows "부스 508 / 510 · 판매면적 4,572㎡ · 최소 통로폭 3.2m · 위반 0건" (one card shows "위반 2건" in red) and a short purple-accented AI summary line like "통로 가시성을 우선한 안입니다" with a tiny "WISE AI" chip. Under the card grid a helper note: "생성한 조감 이미지는 자동 저장되어 시각화 갤러리에서 다시 보거나 공사 옥션 참고 이미지로 쓸 수 있습니다". Dialog footer: ghost button "조건 수정" on the left, primary blue button "이 안으로 편집 시작" on the right. Clean, decision-focused modal 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 · 상태 배지
  • 조립부스 분기(v2.5 신설 — B-01): 부스 유형이 **조립부스(기본형)**인 참가업체는 ① 헤더가 "부스 B-201 · 조립부스 3×3m(기본형) · 홀7"로 표기되고 ② 할 일 카드에 "조립부스 옵션 신청 마감 D-n"(warning)이 추가되며 ③ "장치업체 초대하기" 카드는 미노출(조립부스는 주최측 일괄 시공 — PLANNING M3) ④ CTA "부스 설계 스튜디오"는 SCR-06 조립부스 모드(간판·가구·조명 옵션 선택)로 진입한다. 예상 사진 카드·진행 스테퍼(신청→승인→시공→검수)는 동일.
  • 상태: 설계 전 빈 상태 — 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.
  • 조립부스 모드 (v2.5 신설 — B-01 해소 · PLANNING M3 Phase 1 범위): 부스 유형이 **조립부스(assembled — 주최측 기본 구조, 옥타놈 셸 스킴)**이면 본 화면은 자유 설계 대신 옵션 선택 모드로 렌더된다(신규 SCR 부여 없이 SCR-06의 모드 분기 — 진입 분기는 SCR-05 "조립부스 분기" 참조).
    • 상단 컨텍스트: "부스 B-201 · 조립부스 3×3m(기본형)" + 회색 칩 "조립부스" + 마감 칩 "옵션 신청 마감 D-6"(warning). 보라 버튼 "예상 사진 생성"은 동일.
    • 좌측 옵션 패널(360px, 아코디언 3그룹 — 독립부스 스펙 패널 대체):
      1. 간판 — 간판 문구 입력(국문·영문), 서체 프리셋 3종 라디오 카드, 간판 색상 스와치. 한글 오탈자 자동 검수 연동(실패 시 주황 배지 — 독립부스와 동일 규칙).
      2. 가구 — 조립부스 표준 자재 카탈로그(마스터 데이터) 기반 카탈로그 그리드. 항목 카드 = 썸네일 + 명칭 + 수량 스테퍼 + "기본 제공"/"추가 ₩" 칩: 안내데스크(기본)·상담 테이블(추가)·의자(기본 4)·유리 쇼케이스(추가)·브로슈어 랙(추가)·파이텍스(바닥) 색상 스와치.
      3. 조명 — 스포트라이트 수량 스테퍼(기본 3등 포함, 초과분 추가 요금)·형광등 토글·주간/야간 세그먼트(M4a 연동).
    • 중앙 히어로: 옵션 반영 프리뷰 — 옵션 변경 시 3D 프리뷰/예상 사진(S1) 즉시 갱신(PLANNING M3 "옵션 선택 → 3D 프리뷰 + M5 예상 사진 즉시 생성"), AI 워터마크 상시. 하단 Before/After 슬라이더는 "기본형 ↔ 옵션 적용" 비교로 대체.
    • 우측 하단 고정 바: 옵션 견적 요약("기본 제공 ₩0 + 추가 옵션 ₩155,000 = 합계 ₩155,000") + CTA "옵션 신청 제출". 장치업체 컨펌 플로 미적용(조립부스는 주최자/킨텍스 접수·주최측 시공) — 제출 모달에 "옵션 마감 후 변경 불가" 확인 체크(필수).
    • 상태: 간판 문구 미입력 시 제출 비활성 · 마감 경과 시 옵션 편집 잠금 + "마감 경과 — 주최자 문의"(SCR-05 규칙 동일) · 프리뷰 생성 중 타일 스켈레톤+진행 배지 · 오탈자 검수 실패 시 주황 배지 "간판 문구 확인 필요".
  • Stitch 프롬프트 (조립부스 모드):
A "shell scheme booth options" variant of the booth design studio in a Korean exhibition-tech web app, where an exhibitor with a standard assembled booth (octanorm shell scheme) picks signage, furniture and lighting options instead of free-form design. Desktop 1440px, light theme, blue #0066B3 primary, purple #6D4AFF for AI actions, Korean sans-serif (Pretendard style). All UI text in Korean. Top bar: context text "부스 B-201 · 조립부스 3×3m (기본형)" with a gray chip "조립부스", an amber deadline chip "옵션 신청 마감 D-6", and a prominent purple button with sparkle icon "예상 사진 생성". Left panel 360px: accordion option groups in Korean — "간판" (a text input "간판 문구" filled with "한빛로보틱스", an English name input, 3 font preset radio cards, a row of signage color swatches), "가구" (a catalog grid of furniture option cards, each with a small thumbnail, name, quantity stepper and a price chip: "안내데스크 · 기본 제공 · 1", "상담 테이블 · ₩30,000 · 1", "의자 · 기본 제공 · 4", "유리 쇼케이스 · ₩70,000 · 1", "브로슈어 랙 · ₩15,000 · 1", and a "파이텍스 색상" swatch row), "조명" (a stepper row "스포트라이트 · 기본 3등 포함 → 5등 (+₩40,000)", a toggle "형광등", a segmented control "주간 | 야간"). Center hero: one large photorealistic preview image of a standard aluminium-frame shell scheme booth with a fascia signboard reading "한빛로보틱스", the selected furniture and spotlights visible, a faint watermark "AI 생성 예상 이미지" and a small caption chip "옵션 반영 즉시 갱신". Below the preview: a wide before/after comparison slider with a draggable vertical handle and labels "기본형 / 옵션 적용". Bottom right sticky bar: a compact quote summary "기본 제공 ₩0 + 추가 옵션 ₩155,000 = 합계 ₩155,000" and a primary blue button "옵션 신청 제출". Catalog-shopping-like option picking, but professional B2B tone.
  • 조명 배치안 제안(M4a) 전용 UI 검토 메모(v2.5 — B-10): PLANNING M4a의 "조도 목표(전시품 강조/상담존)별 조명 배치안 제안"은 Phase 1에서는 본 화면 좌패널 ⑤조명 프리셋(주간/야간) + S2 야간 점등 컷(SCR-12 갤러리)으로 흡수한다. 조도 히트맵·조명 기구 배치 캔버스 등 전용 화면 신설은 정밀 조도 시뮬레이션(P2 — PLANNING §9 Phase 3)과 함께 별도 SCR로 분리 검토하며, 현 시점 신규 화면은 없다(신설 시 designer 경유·Stitch 의뢰 원칙 준수).

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 · Phase 2]

  • 대상: 홀매니저 · 진입 경로: 킨텍스 내부 계정 로그인 → 기본 홈
  • 로드맵 라벨(v2.5 — B-10): PLANNING §9 로드맵 기준 홀매니저 대시보드는 Phase 2 범위다. 화면·Stitch·구현은 선행 확보(§2.8-2 ✅) — 라벨은 운영 투입(전 홀 확장·워크플로 통합) 시점 표기.
  • 레이아웃:
    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 홀매니저 검수 상세 (도면 + 위반 오버레이 + 승인/반려) [M2+M3 · Phase 2]

  • 대상: 홀매니저 · 진입 경로: SCR-10 → [검수]
  • 로드맵 라벨(v2.5 — B-10): SCR-10과 동일 — Phase 2(홀매니저 대시보드) 범위(화면·구현은 선행 확보).
  • 레이아웃:
    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]

  • 대상: 참가업체·주최자·장치업체 · 진입 경로: 부스 홈/스튜디오 → "시각화 갤러리" / SCR-04 위저드 "생성한 조감 이미지는… 시각화 갤러리에서 다시 보거나…" 안내 링크
  • 홀 조감(S7) 스코프 (v2.7 명문화 — M2-1 원칙 4): SCR-04 위저드에서 온디맨드 생성한 홀 전경 조감(S7)은 render_job 영속 후 본 갤러리에서 boothRef=HALL-{hallId} 필터로 재열람된다(부스 단위 S1~S6과 동일 갤러리 체계 — 부스 스코프 대신 홀 스코프). 헤더 스코프 전환에 부스(예: "부스 A-102")뿐 아니라 홀(예: "홀7 조감") 스코프를 포함하며, 홀 스코프 선택 시 S7 카드가 필터된다. 갤러리 라이트박스에서 다운로드한 이미지·aiImageUrl은 M15 공사 옥션 자료 패키지(MaterialPackage.aiImageUrl) 참고 이미지로 재사용된다(일회성 미리보기로 휘발 금지).
  • 레이아웃:
    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): 홀 도면 배경 = DWG 렌더 평면도(/media/floorplans/dwg/hall{1~10}.png, 홀 선택 시 해당 홀 도면 표출 — v2.7 세션 6, 추상 격자 대신 실제 CAD 렌더 평면도 위에 혼잡 히트 오버레이) + 혼잡 히트(홀별 셀 Hall1~10, 임계 홀은 error 하이라이트 "홀3(혼잡)"), 하단 범례(원활 녹 / 보통 주황 / 혼잡 빨강)와 총 추정 인원. 전시장1/전시장2 홀 그룹 셀렉트. 데이터 미연동 시 상단 배지 "센서 미연동 · 체크인(M10) 파생/샘플"
    • 홀 카드·상세 평면도 표출(v2.7 — 세션 6 소유자 확정): 홀 목록 카드 및 홀 상세는 DWG 렌더 평면도 썸네일/뷰어(hall1~10.png) 를 표출한다(홀별 도면 시각 확인). 미보유 홀은 JPG 폴백 또는 "도면 준비중" 플레이스홀더. 도면 클릭 시 확대 팝업(SCR-03 .kx-floorplan-lightbox 재사용).
    1. 우측(span 4) — 에너지·환경: HVAC 최적화 카드(평균 온도 22.5°C, 전력 부하 4.2MW, 상태 배지 "최적"), 조명존 카드(전시홀 85% / 공용부 100%, 자동 디밍 토글) — 게이지·진행 바
    2. 하단(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 DWG-rendered CAD floor plan of the selected hall (crisp architectural line drawing) as the background, with soft colored heat blobs (green/orange/red) blurred over it, Hall 3 highlighted red with label "홀3 (혼잡)", a hall-group select "홀 1-10 (제1·제2전시장) ▾", a small top-left badge "센서 미연동 · 체크인 파생/샘플", and a bottom legend "원활 / 보통 / 혼잡" plus "총 추정 인원 14,250". Below or beside it, hall cards each show a small DWG-rendered floor-plan thumbnail. 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% 진행 바)
  • 레이아웃 규격 확정(v2.7 — 세션 6 소유자 확정, "오른쪽 달력 깨짐·짤림" 해소): 본문 2단 스플릿은 좌 목록 minmax(0,1fr) + 우측 미니 캘린더 사이드바 minmax(280px, 340px) 트랙으로 고정한다 — 우측 사이드바가 280px 미만으로 찌그러지거나 340px를 넘겨 캘린더 격자가 깨지지 않게 한다. 미니 캘린더는 이 폭 안에서 7열 격자가 균등 분할(셀 정사각 근사)되고, 좁은 뷰포트(태블릿 이하)에서는 사이드바가 하단으로 접혀 전폭 배치. 좌측 목록 트랙은 min-width:0(G5)로 블로우아웃 방지.
  • 핵심 컴포넌트/상태: 행사 카드 리스트·미니 캘린더(월 그리드)·가동률 진행 바·StatusBadge 재사용·DdayChip(개장 임박). 행사 리스트 그리드에 §1-4A G3 PDF 출력 버튼. 로딩 — 카드 스켈레톤 · 빈 상태 — "등록된 행사가 없습니다 — 새 행사를 생성하세요" 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 is a fixed sidebar between 280px and 340px wide (never squeezed narrower or stretched wider): a mini month calendar "2026년 8월" with prev/next chevrons and a highlighted date "15" whose 7-column grid divides evenly into near-square cells, and below it a "홀 가동률 (8월)" card with progress bars "홀 1-3 85%" and "홀 4-5 40%". The left list column must not blow out (min-width 0, text ellipsis). 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.
  • 브랜드 아이콘 확정(v2.7 — 세션 6 소유자 확정): 카드 상단 로고는 방패(shield) 아이콘이 아니라 KINTEX 워드마크 로고를 사용한다 — 크기 32px(구현 정본 .kx-otp__logo, OtpSetupPage·OtpChallengePanel 공통). 방패/자물쇠형 보안 아이콘으로 대체 금지. 로고 아래 화면 제목("2차 인증(OTP) 등록")은 §1-4A G2에 따라 선 SVG 아이콘 + 텍스트.
  • 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: at the TOP a KINTEX WORDMARK logo (about 32px tall, blue #0066B3) — NOT a shield or padlock security icon. 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 앱 지원". Use thin line (stroke) SVG icons only, no emoji. 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)은 해당 트랙 탭 활성.
  • 루트 디폴트 변경(v2.7 — 세션 6 소유자 확정 P1): 공개 루트 /는 /visitor로 리다이렉트(디폴트) 한다 — kintex.wise.ai.kr 접속 시 관람객 메인(SCR-T1)이 첫 화면. ★기존 "루트 / = 제품 소개 관문(SCR-T0)" 원칙을 대체한다(메모리 product-identity-first 공개 루트 한정 갱신). SCR-T0 관문 랜딩은 라우트로 보존하되 루트 진입점에서 내리고, 제품 소개는 TrackSwitcher·푸터·about 링크로 접근. 인증 세션 시 /home 우선 리다이렉트는 유지.
  • 셸 로고 확정(v2.7 — P2): TrackSwitcher 좌측 로고는 킨텍스 CI 이미지 ci/CI_JPG/CI_01.jpg 를 사용한다(워드마크 텍스트 대체 — /visitor·/business·/agency 전 트랙 공통, 클릭 시 /→/visitor 복귀). 배경 대비 확보(밝은 헤더 위 원본, 어두운 헤더는 화이트 변형 필요 시 CSS 필터/대체 자산). alt="KINTEX".
  • 로고 옆 행사검색(v2.7 — P4): 로고 바로 우측에 행사검색 입력창을 배치 — 입력폭 10자(width: 10ch 기준, 최소 폭), placeholder "행사 검색", 선 SVG 돋보기 아이콘, Enter/버튼 시 행사 검색 결과(공개 행사 목록 필터)로 이동. 좁은 뷰포트에서는 아이콘 버튼으로 축약(탭 시 확장). role="search".
  • 공개 정보 페이지 4종(v2.7 — P3): GNB는 행사 · 참가안내 · 관람안내 · 교통 4개 공개 정보 페이지를 실동작 링크로 노출한다(기존 "안됨" 해소) — ①행사=공개 행사 목록/캘린더(SCR-P1 그리드·/api/public/events) ②참가안내=비즈니스 트랙 참가 안내(SCR-T2·SCR-P6) ③관람안내=관람객 방문 가이드(SCR-T1 방문 가이드 허브·visitor_guide) ④교통=오시는 길(GTX-A 킨텍스역·주차, transport_info/parking_info). 각 항목은 트랙 서브홈/기존 SCR로 딥링크(신규 화면 없이 재사용), 언어(한/영/중/일) 병기.
  • TrackSwitcher 사양(헤더 최상단 유틸 행 또는 GNB 좌측): 세그먼트 3탭 관람 · 비즈니스 · 협력사(라벨=track.shell.tab.visitor|business|agency), 각 탭 클릭 시 /visitor·/business·/agency 이동. 좌측에 CI 로고(CI_01.jpg) + 행사검색 입력(10ch)(위 P2·P4). 우측 유틸: 언어 전환(한/영/중/일 track.shell.lang.*)·로그인(→ SCR-01)·인증 세션 시 내 홈(→ /home). 유색 배경 버튼 글자는 §1-4A G6 --color-on-accent(흰색) 전역 준수(P5).
  • 트랙 히어로 5장 로테이션(v2.7 — 세션 6 소유자 확정 P7 · SCR-T1·T2·T3 공통): 3개 트랙 페이지(관람/비즈니스/협력사)의 히어로 배경은 각 5장 이미지 로테이션(슬라이드쇼) 으로 한다.
    • 이미지 = 신규 크롤 실이미지(kintex.com 등 실자산 크롤 — 나노바나나 AI 생성 배경이 아닌 실사진, 세션 6 지시). 빌드 내장 /media/hero/<track>/hero-<track>-01~05.jpg(+.webp·@2x, .jpg 폴백). 트랙별 이미지 셋 차별화 — 관람=관람객·전시장 전경·행사 현장, 비즈니스=부스·상담·계약/시공, 협력사=시공 현장·장비·안전 톤(셋이 서로 구분되게).
    • 로테이션 규격: 5초 간격 자동 전환(크로스페이드), 하단 도트 인디케이터(5개, 현재 활성 강조·클릭 이동), hover/포커스 시 일시정지. prefers-reduced-motion 시 자동 로테이션 정지(첫 장 고정·도트로 수동 전환만). CLS 0(고정 종횡비 프레임·이미지 크기 예약·레이아웃 시프트 0), 첫 장 preload·나머지 lazy. AI 생성 이미지가 아니므로 "AI 생성 예상 이미지" 워터마크 미부착(실사진). 접근성: role="group"·aria-roledescription="carousel"·도트 aria-label.
  • 활성 표시: 활성 트랙은 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-트랙 분기 관문) [공통 · 공개 · 라우트 /gateway]

  • 루트 디폴트 변경(v2.7 — 세션 6 소유자 확정 P1): 공개 루트 /는 이제 /visitor(SCR-T1)로 리다이렉트한다(관람객 메인이 첫 화면). SCR-T0 관문은 라우트로 보존하되 루트 진입점에서 내림(직접//gateway 접근·about 링크·TrackSwitcher로 도달). 이하 스펙(제품 히어로·3-트랙 카드)은 유지.
  • 대상: 일반 대중·대외 유입 전원(미인증) · 모듈/P: 공통 대외 접점(M12 일부 재사용) · P1 · 진입 경로: 관문 라우트 직접 진입·about 링크. 루트 / 진입은 /visitor로 리다이렉트(위 변경). 인증 세션 시 /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 관람 도우미(중심 요소):
      • 배경 = 크롤 실이미지 5장 로테이션(§3C-0 "트랙 히어로 5장 로테이션" P7 — 관람 트랙 셋 /media/hero/visitor/*, 도트 인디케이터·5초 자동전환·prefers-reduced-motion 정지·CLS 0). 실사진이므로 AI 워터마크 미부착. 텍스트 대비용 딤 오버레이 유지. v2.7 변경: 기존 "나노바나나 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. 배경 = 크롤 실이미지 5장 로테이션(§3C-0 P7 — 비즈니스 트랙 셋 /media/hero/business/*: 부스·상담·계약/시공 톤, 도트 인디케이터·prefers-reduced-motion 정지·CLS 0, v2.7)
    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. 킨텍스 차별점(옥션) 강조 서브카피. 배경 = 크롤 실이미지 5장 로테이션(§3C-0 P7 — 협력사 트랙 셋 /media/hero/agency/*: 시공 현장·장비·안전 톤, 도트 인디케이터·prefers-reduced-motion 정지·CLS 0, v2.7)
    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 규정 + 현장 공정 · Phase 3]

  • 대상: 장치업체 현장 인력 · 진입 경로: 모바일 로그인 → 수주 부스 → "현장 체크리스트" (장치 기간 중 기본 홈)
  • 로드맵 라벨(v2.5 — B-10): PLANNING §9 기준 현장 모바일 운영 도구는 Phase 3 범위다(화면·Stitch·구현은 선행 확보 — 라벨은 현장 운영 투입 시점 표기).
  • 레이아웃:
    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 [모바일] 홀매니저 현장 검수 [M2+M3 · Phase 3]

  • 대상: 홀매니저 · 진입 경로: 모바일 홈(승인 큐 카드 리스트) → 검수 요청 알림 탭
  • 로드맵 라벨(v2.5 — B-10): SCR-M1과 동일 — Phase 3(현장 모바일 운영 도구) 범위(화면·구현은 선행 확보).
  • 레이아웃:
    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. 글로벌 스타일 지침(전 화면 공통 — 프롬프트에 1회 부가, v2.8): 각 프롬프트 뒤에 다음 문장을 덧붙이거나, 생성 결과에서 위반 시 재지시한다 — "All filled buttons and solid colored chips/badges (blue, purple, green, amber, red backgrounds) must use white text; only outlined, ghost and text buttons use colored text." (§1-2 유색 배경 버튼 = 흰색 텍스트 규칙. 개별 화면 프롬프트를 일괄 수정하지 않고 이 지침으로 통제한다.)
  5. 생성 화면은 Figma로 내보내 디자인 시스템 토큰(§1)과 대조 후 조정한다.

6. 변경 이력

버전 일자 작성자 내용
v2.8 2026-07-15 designer "버튼 배경색이 있는 것은 텍스트 흰색계열 적용" 규칙 명문화(소유자 지시 2026-07-15). ①**§1-2 컬러 팔레트에 on-accent #FFFFFF 토큰 행 순증 — 유색(filled) 배경 위 텍스트 전용, 다크모드에서도 항상 흰색 유지(신규 발명 아님 — 프론트 기구현 --color-on-accent(src/frontend/src/styles/tokens.css·OWNER_FEEDBACK 7.1/7.2 기배포)와 문서 정합. --color-white는 다크에서 서피스 반전되므로 유색 배경 글자엔 on-accent만 사용) + WCAG 문단 아래 "유색 배경 버튼 = 흰색 텍스트" 확정 규칙 문단 신설: primary-600·ai-accent·success/warning/error 등 채움(filled/solid) 버튼 전부 텍스트 on-accent 고정(라이트·다크 공통), outline·ghost·텍스트(tertiary) 버튼은 해당 없음(자기 색 텍스트), 유색 채움 배지·칩·솔리드 배너 동일 원칙. ②§1-4 컴포넌트 원칙에 "버튼(Button) 텍스트 색" 항목 신설 — 변형별 규정(채움 4계열=on-accent 흰색 / Outlined·Ghost·텍스트=자기 색 / Disabled=회색+neutral-500) + 구현 시 --color-on-accent 토큰 사용·하드코딩 #fff/--color-white 금지(다크 반전 사고 방지). ③§5 Stitch 사용 가이드**에 글로벌 스타일 지침 1회 명시(4번 항목 신설) — 전 화면 프롬프트 공통 부가 문장 "All filled buttons and solid colored chips/badges … must use white text; only outlined, ghost and text buttons use colored text."(개별 화면 프롬프트 일괄 수정 없이 지침으로 통제·위반 시 재지시). ④상충 문구 전수 점검 — 화면 스펙·Stitch 프롬프트에 유색 배경 버튼에 어두운 텍스트를 지시하는 문구 0건 확인(정정 대상 없음, 기존 프롬프트 무수정). 화면 스펙·SCR 번호·타 절 무수정·PLANNING.md·src 무수정
v2.7 2026-07-23 designer 세션 6 시연 준비 소유자 확정 사항 반영(docs/OWNER_FEEDBACK.md 세션 6). 순증·정정만(신규 컬러 토큰 0·전면 재작성 없음·PLANNING/src 무수정). ①**§1-4A 전역 컴포넌트 표준 신설(G1~G6): G1 Nifty 문자 그대로/Stitch 산출물 우선 이식(강피드백 — DESIGN_SYSTEM_NIFTY.md), G2 전 페이지·섹션 타이틀 앞 선 SVG 아이콘 의무(icons.tsx·이모지 금지), G3 모든 그리드 PDF 출력 버튼(JasperReports 범용 grid-pdf), G4 목록 위젯 10줄 프리뷰+"전체보기(N)", G5 목록/피드/타임라인 오버플로 minmax(0,1fr), G6 유색 배경 버튼 글자 --color-on-accent(흰색) 전역. ②SCR-51·SCR-01**: 2차 인증(OTP) 로고 = 방패 아이콘 → KINTEX 워드마크 32px(.kx-otp__logo, OtpSetup·OtpChallenge 공통), Stitch 프롬프트 갱신. ③SCR-HOME: 내 할 일·공지·최근 활동 목록 위젯을 10줄+전체보기(N)·minmax(0,1fr) 표준으로 갱신(6행/5건→10줄). ④SCR-02: 마일스톤 타임라인·알림 피드 오버플로 minmax(0,1fr)(진행단계 짤림·세로글자 해소), 참가업체 그리드 PDF 버튼, V68/V69 시드. ⑤SCR-15: 본문 스플릿 = 좌 minmax(0,1fr) + 우측 미니 캘린더 사이드바 minmax(280px,340px)(달력 깨짐·짤림 해소), Stitch 프롬프트 갱신. ⑥공개 사이트(§3C-0·SCR-T0~T3): 루트 /→/visitor 디폴트 리다이렉트(기존 '루트=제품소개' 대체), 셸 로고 = ci/CI_JPG/CI_01.jpg, 로고 옆 행사검색 입력(10ch), 공개 정보 페이지 4종(행사·참가안내·관람안내·교통) 실링크, 트랙 3페이지 히어로 5장 로테이션(신규 크롤 실이미지·트랙별 셋 차별화·도트 인디케이터·prefers-reduced-motion 정지·CLS 0). ⑦SCR-03/04: 도면 탭 디폴트=DWG, 부스 팔레트(표준 규격 선택/드래그), 평면도 확대 팝업(.kx-floorplan-lightbox), AI 자동배치 결과 시각 우선(완료 시 확대 팝업에 배치 결과 렌더 → 배치안 3안 상세는 버튼 클릭), Stitch 프롬프트 갱신. ⑧SCR-14: 홀 히어로·홀 카드/상세에 DWG 렌더 평면도(hall1~10.png) 표출, Stitch 프롬프트 갱신
v2.7 2026-07-15 designer SCR-03·SCR-12 — PLANNING v3.5 §M2-1 이후 반영된 최근 구현(도면 JPG/DWG 언더레이 탭·캔버스 팬/줌·K1/K2 홀 DWG 렌더·홀 조감 갤러리 재열람)을 design.md에 정합화(구현 정본 BoothLayoutEditorPage.tsx·FloorplanCanvas.tsx·hallFloorplan.ts). v2.6 이후 소유자 지시로 구현됐으나 스펙 문서에 없던 격차만 순증(기존 구조·번호·토큰 불변, 신규 토큰 0). ①SCR-03 좌측 도구 패널에 "도면" 그룹 = JPG/DWG 언더레이 소스 전환 탭 신설 절 추가 — JPG(공개 크롤본 /media/floorplans/hall{n}.jpg, FLOOR_REGIONS 분율 캘리브레이션, 전 홀 H1~H10 보유·기본값) / DWG(CAD 원본 3m 여백 크롭 렌더 /media/floorplans/dwg/hall{n}.png, 렌더 파라미터 결정론 캘리브레이션으로 JPG보다 정밀, 미보유 홀 탭 disabled+"CAD 렌더 준비 중" 툴팁, 현 시점 K1 제1전시장 H1~H5 축정렬 완료·K2 제2전시장 H6~10 회전보정(H6 −12°·H9 −11°·H10 +11°) 근거 cad-extraction.md §K2), 탭 전환 시 언더레이·캘리브레이션 즉시 교체·부스 좌표 불변·DWG 미보유 자동 JPG 폴백·로드 실패 다크 서피스 폴백. 레이아웃 ②③에 도면 탭·언더레이 반영, 캔버스 언더레이를 "JPG 또는 DWG"로 일반화. ②SCR-03 캔버스 팬·줌 인터랙션 신설 절 — 마우스 휠 확대/축소(하한~상한 클램프·페이지 스크롤 억제·하단 줌 컨트롤 % 양방향 동기 onZoomChange), 좌클릭 드래그 팬(translate+scale·grabbing 커서·드래그 임계값 초과 시에만 팬 판정·팬 직후 click 캡처 차단으로 부스 선택 오발 방지), 접근성(role=img·aria-label). 하단 상태 바 줌 컨트롤에 "현재 배율 %+리셋" 명시. ③SCR-03 Stitch 프롬프트 갱신 — 좌측 패널에 "도면 JPG
v2.6 2026-07-14 designer SCR-03/04 — PLANNING v3.5 §M2-1 "자동 배치 이지 플로우(3단계 위저드)" 정합(구현 정본 AutoLayoutDialog.tsx·BoothLayoutEditorPage.tsx·FloorplanCanvas.tsx·hallFloorplan.ts에 맞춘 스펙 문서화). ①SCR-03: "AI 자동배치" 버튼 = 3단계 위저드 모달(.kx-auto) 진입 모드 신설 절 추가 — ① 어디에(전시장>홀>구역 셀렉트 3단 캐스케이드, 소스 GET /api/halls/tree(V60 hall_zone)·"홀 전체" 기본·트리 실패 degraded 진행) → ② 조건(자연어 한 줄+"AI 해석" …/auto-generate/interpret→AI 해석 폼이 최종 권위, degraded 수동 입력) → ③ 배치안 선택(SCR-04). 툴바에 홀 선택 셀렉트(전시장 optgroup) 추가, 캔버스는 실측 홀 도면 JPG의 전시 바닥면 캘리브레이션 영역(FLOOR_REGIONS)에 홀 좌표계 정렬(부스가 평면도 안에 표시 — M2-1 원칙 1) 명문화, 생성 중 상태를 캔버스 오버레이→위저드 내 진행 화면으로 정정, Stitch 프롬프트에 홀 셀렉트·도면 JPG 베이스 반영 ②SCR-04: 별도 페이지→위저드 ③단계 화면으로 실현 재정의 — 3안 카드 그리드에서 조감(S7)은 자동 생성 금지, 카드별 점선 CTA "조감 이미지 생성" 클릭 시에만 …/auto-generate/preview RenderJob 발행(원칙 3), 생성 후 AiImage(워터마크+고지) 표시, 이미지 클릭→확대 라이트박스(.kx-lightbox) 신설(고지 문구 유지+"이미지 저장" 다운로드+닫기, 원칙 4)·render_job 영속→시각화 갤러리 boothRef=HALL-{hallId} 재열람·M15 옥션 참고 이미지 재사용 안내 문구, "이 안으로 편집 시작" = apply-option 실저장(저장 중 "저장 중…" 표기) 후 에디터 진입(원칙 5), 하단 비교 테이블 항목은 카드 내 지표+AI 요약으로 흡수, 상태 6종 재정의(S7 미요청 점선 CTA 기본·생성 실패에도 선택/적용 계속 가능), Stitch 프롬프트 위저드 3단계 구조로 전면 갱신(단계 표시기·점선 CTA 2장+생성 완료 1장·산술 정합 508부스=4,572㎡ 동일 산식). 신규 토큰 0·타 절 무수정·PLANNING.md·src 무수정
v2.5 2026-07-14 designer BACKLOG designer 잔여 티켓 일괄 해소(B-01·B-04~B-08·B-10) — 소유자 지시 "백로그 미진행 사항 진행". 기존 구조·번호 체계·토큰 불변(신규 토큰 0), 스펙 정정·순증만. ①B-01(Major): SCR-06에 조립부스 모드 신설(PLANNING M3 Phase 1 범위 — 신규 SCR 없이 모드 분기) — 좌측 옵션 패널 3그룹(간판 문구·서체·색/가구 표준 자재 카탈로그 그리드(수량 스테퍼+기본 제공·추가 ₩ 칩)/조명 스포트 스테퍼·주간야간), 옵션 변경 시 3D 프리뷰·S1 예상 사진 즉시 갱신, Before/After "기본형↔옵션 적용", 옵션 견적 요약+CTA "옵션 신청 제출"(장치업체 컨펌 미적용 — 주최측 시공), 상태(마감 잠금·문구 미입력 비활성·오탈자 배지) + 전용 영어 Stitch 프롬프트 1종(견적 산술 정합 30,000+70,000+15,000+40,000=155,000). SCR-05에 조립부스 분기(헤더 표기·옵션 마감 할 일 카드·장치업체 초대 미노출·스튜디오 진입 분기) 순증 ②B-04: 화면 수 표기 정정 — §3 헤더 "총 14개(웹12+모바일2)"→P0 코어 15개(웹 13 = SCR-01·HOME·02~12 + 모바일 2)(SCR-HOME 신설 반영), §2.8-2 집계 문장의 SCR-T0~T3 4화면 누락 정정 85→총 89화면(✅Stitch 83·미생성 6 상태 정합 — v2.2 변경이력과 일치화) ③B-05: SCR-02 사이드바 "정산" 메뉴 IA 불일치 해소 — §2-1 주최자 사이트맵에 "정산·결제 [M9, P1] — Phase 2 (SCR-21)" 추가 + SCR-02에 정합 메모(프롬프트 메뉴 문구 유지) ④B-06: SCR-01 Stitch 프롬프트에 스펙에만 있던 "이메일 인증으로 로그인" 버튼 추가 ⑤B-07: SCR-03 프롬프트에 툴바 "공유" 버튼 추가 + 위반 요약(차단2·경고3)↔캔버스 핀 불일치 정정(주황 빗금 부스 1→3개, 핀 3·4·5 — 스펙 레이아웃 ③에 핀·건수 명시로 1:1 고정) ⑥B-08: SCR-04 샘플 지표 산술 오류 정정 — 판매면적 4,420㎡→4,590㎡(510부스×9㎡, SCR-03 486부스=4,374㎡와 동일 산식 명문화) ⑦B-10: SCR-10/11 헤딩·메모에 Phase 2(PLANNING §9 홀매니저 대시보드), SCR-M1/M2에 Phase 3(현장 모바일 운영 도구) 로드맵 라벨 부착(화면·구현 선행 확보 명시 — P0 우선순위 컬럼과 구분) + 조명 배치안 제안(M4a) 전용 UI 검토 메모를 SCR-06에 신설(Phase 1은 조명 프리셋+S2 야간 컷으로 흡수, 조도 히트맵·기구 배치 캔버스 전용 SCR은 정밀 조도 시뮬레이션(P2)과 함께 분리 검토 — 현 시점 신규 화면 없음). PLANNING.md·src 무수정
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
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·좌우 화살표·탭 `진행 중
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/·타 문서 무수정