# INVYONE 화면 디자이너 — 섹션 기반 재설계 (v5)

INVYONE STUDIO
구조 (섹션/Row)
▦
섹션
반응 그룹 단위
▬
Row
가로 배치 줄
⚏
스페이서
여백
기본 컴포넌트
T
제목
Title / Heading
⚐
버튼
Action Button
✎
입력
Input / Select
🔍
검색
Search Bar
데이터
📊
통계 카드
KPI / Stats
☷
테이블
Data Grid
📈
차트
Line / Bar
▤
폼
Form
컨테이너
▢
탭
Tabs
▣
카드
Card / Paper
카드 폭 600px
NORMAL
/dashboard/orders (카드 슬롯)
SECTION · HEADER header
⋮⋮
Title
주문 관리 대시보드
Button
+ 신규
Button
↓ 내보내기
SECTION · SEARCH filter
⋮⋮
Date
📅 시작일
Date
📅 종료일
Select
▾ 상태
Search
🔍 주문번호 / 고객명 검색…
SECTION · STATS stats · reflow
⋮⋮
Stat
오늘 주문
124
Stat
처리 대기
38
Stat
매출
₩8.4M
Stat
반품
3
SECTION · TABLE full-width
⋮⋮
Table
주문 목록
주문번호고객날짜금액
ORD-2938김유진04/19₩128,000
ORD-2937박철수04/19₩84,500
ORD-2936이지은04/18₩256,000
ORD-2935정민호04/18₩49,900
속성
SECTION · HEADER
섹션 이름
반응 정책 (Policy)
최소 표시 모드
wide normal narrow tiny
반응 브레이크
WIDE
≥ 900px
가로 4열
NORMAL
560–900px
가로 2열
NARROW
360–560px
세로 스택
TINY
< 360px
핵심만 유지
💡 섹션 기반 구조
절대좌표가 아닌 섹션 → Row → 위젯 구조로 저장됩니다. 대시보드 소환 시 카드 크기에 맞춰 @container 쿼리로 자동 반응합니다.
저장 포맷 미리보기

    {
      "sections": [
        {"id": "hdr",
         "policy": "header",
         "rows": [
           {"items": [
             {"type":"title"},
             {"type":"button"},
             {"type":"button"}
           ]}
         ]},
        {"id": "stats",
         "policy": "stats",
         "rows": [...]}
      ]
    }