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

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

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

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 모듈 32G1,200₩ 36,000,000완료2026-04-22
SO-26-0420LG디스플레이패널 27인치800₩ 64,000,000완료2026-04-25
SO-26-0419현대차센서 모듈3,400₩ 18,500,000대기2026-04-30
SO-26-0418SK하이닉스웨이퍼 검사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 캔버스를 통째로 비례 축소해서 보여줍니다. 카드가 작아도 자유배치 모양은 그대로 — 글자가 작아도 비율이 유지되어 "이 화면이 어떻게 생겼는지" 가 한눈에 보입니다.