UI 칼선 가이드
외부 디자이너를 위한 키오스크 UI 레이아웃 가이드
키오스크 UI 스킨/테마를 디자인할 때 참고할 영역 구분 가이드입니다. 각 화면의 header, content, nav, 터치 영역 등의 경계를 점선과 색상으로 표시하고, px 치수를 기입합니다.
뷰포트 스펙
| 항목 | 값 |
|---|---|
| CSS 뷰포트 너비 | 1280px |
| CSS 뷰포트 높이 | 800px (기준) |
| 물리 해상도 | 1920×1200~1920×1280 |
| DPR | 1.5x |
범례
| 선 스타일 | 의미 |
|---|---|
| 빨간 점선 (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 공유
- 프레임 제작 가이드 — 4x6 / 2인치 컷 블리드·트림·안전영역