# Template Renderer Scale Demo — INVYONE

# Template Renderer — Scale 기반 자유배치 데모

디자이너 캔버스(1920×1080) 위에 자유배치된 블록들을, 카드 크기에 따라 `transform: scale` 로 비례 축소. 하한선(0.5)에 도달하면 카드 안에서 스크롤. role/band/responsivePolicy 추측 없음.

## ① 카드 폭을 줄여보세요 — 자유배치 모양은 100% 보존

카드 너비 1200px 카드 높이 680px scale 0.625 FIT
📊 수주 관리
canvas 1920×1080 · scale 0.625
이번달 수주
128
↑ 12.4% (전월 대비)
매출 합계
₩ 4.2억
↑ 8.1%
처리 대기
23
↓ 4건 감소
완료율
92%
목표 95%
수주 목록

수주번호 | 고객사 | 품목 | 수량 | 금액 | 상태 | 납기
--- | --- | --- | --- | --- | --- | ---
SO-26-0421 | 삼성전자 | RAM 모듈 32G | 1,200 | ₩ 36,000,000 | 완료 | 2026-04-22
SO-26-0420 | LG디스플레이 | 패널 27인치 | 800 | ₩ 64,000,000 | 완료 | 2026-04-25
SO-26-0419 | 현대차 | 센서 모듈 | 3,400 | ₩ 18,500,000 | 대기 | 2026-04-30
SO-26-0418 | SK하이닉스 | 웨이퍼 검사 | 200 | ₩ 12,000,000 | 완료 | 2026-04-21
SO-26-0417 | 네이버 | 서버 부품 | 50 | ₩ 8,500,000 | 대기 | 2026-05-02
SO-26-0416 | 카카오 | 네트워크 장비 | 120 | ₩ 21,000,000 | 완료 | 2026-04-28
SO-26-0415 | 포스코 | 특수합금 | 15 | ₩ 45,000,000 | 대기 | 2026-05-10

월별 수주 추이
« 1 2 3 4 5 »

👉 가로/세로 슬라이더 를 움직여 보세요. 카드 영역에 맞춰 `scale` 이 자동 계산되고, `0.5` 미만으로 축소될 상황이면 그 시점부터 카드 안에 스크롤이 생깁니다 (콩알 방지).

## ② 대시보드 — 한 화면에 카드 5개 (각자 자유배치 보존)

📊 수주 관리
FHD 캔버스
👥 부서 관리
FHD 캔버스
📦 출고 관리
FHD 캔버스
🛒 발주 관리
FHD 캔버스
📈 영업 리포트
FHD 캔버스

각 카드는 1920×1080 캔버스를 통째로 비례 축소해서 보여줍니다. 카드가 작아도 자유배치 모양은 그대로 — 글자가 작아도 비율이 유지되어 "이 화면이 어떻게 생겼는지" 가 한눈에 보입니다.