화면 좌표 명세 (내부)
키오스크 화면별 영역 경계와 px 좌표 — 스킨 제작·검증용 내부 참고 문서
고객용 문서가 아닙니다
이 섹션은 키오스크 UI 스킨을 직접 제작하거나 규격을 검증할 때 참고하는 내부 문서입니다. 행사 브랜딩을 위해 디자인을 준비하고 계시다면 커스터마이징 을 봐 주세요 — 작업 크기, 템플릿 파일, 제출 마감이 거기 정리돼 있습니다.
각 화면의 header, content, nav, 터치 영역 경계를 점선과 색상으로 표시하고 px 치수를 기입합니다.
SVG 와 각 문서의 「주요 영역」 절은 제품의 레이아웃 SSOT(product/apps/web/lib/kiosk-layout/layout-contract.ts)에서
scripts/design/gen-cutline-screen-guides.mts 가 생성합니다. 손으로 고치지 말고 스크립트를 다시 돌리세요.
뷰포트 스펙
| 비율 | CSS 뷰포트 | 물리 해상도 | DPR |
|---|---|---|---|
| 16:10 (기준) | 1280 × 800 | 1920 × 1200 | 1.5x |
| 16:9 | 1280 × 720 | 1920 × 1080 | 1.5x |
이 문서의 좌표는 16:10 · CSS 1280 × 800 기준입니다. 16:9 값은 각 화면 문서 하단에 함께 적어 두었습니다. 물리 픽셀을 그대로 뷰포트로 쓰면 Windows 150% 배율이 빠져 레이아웃 breakpoint 가 실제 장비보다 넓게 평가됩니다.
공통 크롬
| 요소 | 16:10 (800h) | 16:9 (720h) | 토큰 |
|---|---|---|---|
| PageTimer | 120 × 120, x=1128 y=64 | y=57.6 | size-kiosk-timer · top-kiosk-chrome-y · right-8 |
| NavBar | y=664, 좌우 인셋 32px | y=624 | top-kiosk-navbar-y · left-8 right-8 |
| 하단 예약 | 136px | 96px | pb-kiosk-navbar-pb |
| 헤더 상하 여백 | 40px | 36px | --kiosk-header-py |
크롬은 (01-before-shoot) 과 (03-after-shoot) 레이아웃 그룹에만 붙습니다.
HOME · INTRO · CAPTURE · PRINT · QR 에는 PageTimer 도 NavBar 도 없습니다.
범례
| 선 스타일 | 의미 |
|---|---|
| 빨간 점선 (stroke-dasharray 6 3) | 영역 경계 (칼선) |
| 파란 점선 (stroke-dasharray 4 2) | 터치 영역 |
| 초록 실선 | 안전 영역 |
전체 흐름 개요
SVG 다운로드
화면별 가이드
- HOME — 홈 화면
- COUPON — 쿠폰 입력
- FRAME SELECT — 프레임 선택
- COUNT — 촬영 매수 선택
- READY — 촬영 준비
- CAPTURE — 촬영
- PHOTO SELECT — 사진 선택
- AI LETTER — AI 편지
- AI CHARACTER — AI 캐릭터
- AI BACKGROUND — AI 배경
- PRINT — 인쇄
- QR — QR 공유
INTRO(/intro) · AI MODE(/ai-mode) · AI STYLE(/ai-style) · AI CHARACTER BATCH(/ai-character-batch) 는
레이아웃 계약에는 있지만 아직 전용 문서가 없습니다. 전체 흐름 개요 그림에는 표시돼 있습니다.
INTRO() · AI MODE() · AI STYLE() · AI CHARACTER BATCH() 는 레이아웃 계약에는 있지만 아직 전용 문서가 없습니다. 전체 흐름 개요에는 표시돼 있습니다.
인쇄 규격
- 프레임 인쇄 규격 — 4x6 / 2인치 컷의 블리드·칼선·안전영역과 좌표 변환
고객에게 내려주는 프레임 템플릿은 이 규격을 기준으로 scripts/design/gen-customizing-guide-assets.mts가 생성합니다.