레이아웃#
Figma Foundation · 03. Layout & Space · 값은
coui_core가 정본입니다. 정본 파일은 Figma 라이브러리. 겹침 순서는 레이어링.
CoUI 는 레이아웃을 통일 컴포넌트로 구성합니다. raw Flutter Stack/Positioned 나 네이티브 HTML 대신 아래 컴포넌트를 블럭처럼 합성하세요 — Flutter / Web 이 동일하게 렌더됩니다.
| 컴포넌트 | 용도 | 문서 |
|---|---|---|
Stacks / Position |
z-index 스택 + 위치 지정 (raw Stack/Positioned 대체) |
/components/stack-layout |
Group |
절대 좌표 배치 컨테이너 (CoreGroupPositionedData, CSS position:absolute 대응) |
/components/group |
Gap |
두 형제 사이 1-off 간격 (Gap.space16() 등) |
/components/gap |
ResponsiveGrid |
반응형 그리드 (열 수 자동) | /components/responsive-grid |
ResponsiveContainer |
breakpoint 기반 반응형 컨테이너 | /components/responsive-container |
Resizable |
드래그로 크기 조절되는 패널 | /components/resizable |
Basic |
leading/title/subtitle/trailing 정형 행 레이아웃 | /components/basic |
간격 — Gap vs spacing#
-
두 명명된 형제 사이 1-off 간격:
Gap(gapStyle: ...)또는 토큰 단축const Gap.space16(). -
N개 자식 균등 분포: Flutter
Row/Column/Wrap의spacing:(네이티브 균등 분포).
// 1-off
Column(children: [Header(), const Gap.space16(), Body()])
// N-sibling 균등
Column(spacing: CoreSpace.space12, children: [...])
모든 간격·치수는
CoreSpace등 디자인 토큰을 경유합니다 (raw 숫자 금지). 축 전체는 디자인 토큰, 형태는 형태, 겹침은 레이어링, 표는 색상·타이포그래피 참고.
간격 사다리 — CoreSpace#
padding / gap / margin 은 CoreSpace.spaceN 만 씁니다. 값은 logical px 이고, Web 은 CoreSpace.scale.spaceN
키(p-space16)로 같은 칸을 읽습니다.
| 구간 | 토큰 | 간격 |
|---|---|---|
| Small | space0 … space16 | 2px |
| Medium | space20 … space32 | 4px |
| Large | space36 … space64 | 4px |
| Extra large | space72 … space256 | 8px |
이름에 없는 18 같은 값이 필요하면 가장 가까운 칸을 고르거나 토큰 확장을 요청합니다. Figma 의 같은 축은 03. Layout & Space
입니다.