---
{"id":"layout","title":"레이아웃·간격·반응형","category":"기초","order":13,"summary":"Carbon의 정렬 원칙은 참고하되 2x Grid 수치와 UI 크기를 강제하지 않습니다.","status":"문서 기준 · UI 미검증","references":["elements/2x-grid/usage","elements/spacing/overview"]}
---

# 레이아웃·간격·반응형

## 배치 원칙

- LAY-01 MUST: 같은 작업의 제목·설명·필드·후속 동작은 묶고 관련 없는 작업은 구분합니다.
- LAY-02 SHOULD: 반복되는 행·필드·툴바의 정렬축을 유지합니다. 픽셀 오프셋으로 개별 화면만 맞추지 않습니다.
- LAY-03 MUST: 모바일에서 필수 행동·단위·오류·대상을 숨기지 않습니다.
- LAY-04 MUST: 320 CSS px 폭의 일반 내용은 양방향 스크롤 없이 읽을 수 있어야 합니다. 본질적으로 2차원인 표·콘솔은 예외를 명시하고 해당 영역만 스크롤합니다.
- LAY-05 SHOULD: 고정 헤더·푸터가 포커스·오류·제출 버튼을 가리지 않게 합니다.
- LAY-06 MUST: 확대·번역으로 높이가 달라져도 버튼은 자연스럽게 줄바꿈하며 다른 카드와 겹치지 않습니다.

## 현재 값 보존

WickedHost 공통 기준은 vPanel/Pterodactyl 기반 버튼 40px·일반 입력 42px·4px 모서리입니다. Blesta도 같은 기준을 사용합니다. 기존 Blesta --vx-sp-*의 4, 8, 12, 16, 24, 32, 48, 64, 96px과 compact 40px·touch 44px·인증 입력 48px은 이행 전 소스 기록이며 공통 기준의 별도 예외가 아닙니다. 실제 운영 이행 시 확대·터치·키보드 검증을 보존합니다.

## 터치와 조작

LAY-07 MUST: WCAG 2.2 AA의 24×24 CSS px 대상 크기 또는 허용 간격·예외를 확인합니다. 프로젝트 권장은 주요 모바일 조작 44×44px입니다. 44px을 모든 상황의 WCAG AA 최소값이라고 표시하지 않습니다.

## 그림자·계층

같은 평면의 정보 카드를 전부 떠 있는 모달처럼 표현하지 않습니다. 드롭다운·모달·tooltip의 계층은 기존 제품 소유자가 관리합니다. 무한히 큰 z-index로 덮는 수리는 하지 않습니다.

## 예시

좋음: 서버 정보와 동작 그룹이 좁은 화면에서 한 줄씩 쌓이고, 데이터 표 자체만 가로 스크롤.

피함: 카드 전체 overflow:hidden으로 필수 오류와 열린 메뉴를 잘라냄.

참고: [Reflow](https://www.w3.org/WAI/WCAG22/Understanding/reflow.html), [Target size minimum](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html).