레이아웃
위치, 간격 및 정렬은 텍스트를 읽기 전에 계층 구조를 전달합니다. 이 스킬은 해당 구조를 구축하고 스트레스 테스트를 진행합니다: 크기를 조정하고, 번역하고, RTL(오른쪽에서 왼쪽)로 미러링하세요.
모든 수정 사항은 프로젝트의 스타일 시스템으로 작성하세요. 아래 숫자는 밀도 시스템이 정립되지 않은 인터페이스를 위한 시작점이며, 해당 시스템이 적용되는 경우에는 익숙해 보이는 대체 값 대신 그대로 사용하세요. 의도적인 플랫폼 크롬, 간결한 전문 도구 및 프로젝트 토큰은 스트레스 테스트를 통과하는 한 유지하세요.
히트 영역과 포커스 동작은 better-accessibility에 속합니다. 모서리 반경, 그림자 및 애니메이션은 better-ui에 속합니다. 줄 길이와 텍스트 간격은 better-typography에 속합니다.
공간으로 그룹화하고, 선은 사용하지 마세요
공간을 먼저 그룹화하고, 배경 모양은 두 번째로, 구분선은 마지막으로, 공간만으로 구조를 전달할 수 없는 경우에만 사용하세요. 그룹 간 간격은 그룹 내 간격보다 최소 2배 이상이어야 합니다(8px 그룹 내 → 16px+ 그룹 간). 그렇지 않으면 그룹화가 노이즈로 읽힙니다. 정렬 가장자리와 중요도 순서는 grouping-and-alignment.md를 참조하세요.
컨트롤을 콘텐츠와 구분하여 유지하세요
모든 상호작용 요소에 배경 모양, 테두리 또는 일관된 배치 영역을 제공하세요. 옆에 있는 정적 텍스트처럼 스타일링된 컨트롤은 컨트롤로 인식되지 않습니다.
공유된 가장자리에 정렬하세요
정렬 가장자리를 선택하고 이를 고수하세요; 모든 벗어난 가장자리는 노이즈로 읽힙니다. 종속성 수준별로 하나의 프로젝트 간격 단계를 사용하세요. 16px이 유용한 기본값입니다.
방향 종속적인 레이아웃에는 논리적 속성(logical properties)을 사용하세요: padding-inline-start, margin-inline-end. 물리적 왼쪽과 오른쪽은 진정한 물리적 지오메트리에만 사용하세요.
중요도 순서로 정렬하세요
가장 중요한 콘텐츠는 상단과 시작 가장자리(leading edge) 근처에 위치합니다. 읽기 순서는 위에서 아래로, 시작에서 끝(leading to trailing)으로 흐릅니다. 왼쪽과 오른쪽이 아닌 시작(leading)과 끝(trailing)으로 생각하세요.
숨겨진 콘텐츠를 암시하세요
점진적 공개(progressive disclosure)는 시각적인 어포던스가 필요합니다. 프로젝트의 정해진 단서를 사용하거나, 다음 항목이 스크롤 가장자리 너머로 16–32px 정도 살짝 보이게 하거나, 공개 컨트롤을 표시하세요. 단서 없이 숨겨진 콘텐츠는 존재하지 않는 것과 같습니다.
대상 사이에 여유 공간을 확보하세요
밀도 시스템이 정립되지 않은 경우, 인접한 테두리 또는 채워진 컨트롤 사이에는 12px부터 시작하고, 테두리 없는 텍스트 및 아이콘 전용 컨트롤 주변에는 24px을 사용하세요. better-accessibility 히트 영역이 겹치지 않고 컨트롤이 구분되는 한, 간결한 레이아웃에서는 더 적은 간격을 사용할 수 있습니다. 레이아웃 여백과 중단점 레시피는 spacing-and-adaptivity.md를 참조하세요.
버튼을 가장자리에서 안쪽으로 들여쓰세요
콘텐츠 레이아웃에서 전체 너비 버튼은 레이아웃 여백 안쪽에 가시적인 모서리 반경과 함께 배치하고, 모바일에서는 인라인 방향으로 16px 부근에서 시작하세요. 가장자리에서 가장자리로 연결되는 액션(edge-to-edge action)은 기존 플랫폼 크롬을 따르고, 안전 영역을 고려하며, 시스템 UI와 구분 가능한 경우에만 작동합니다.
콘텐츠는 넘치고, 컨트롤은 떠 있어야 합니다
배경과 미디어는 뷰포트 가장자리까지 확장됩니다. 컨트롤과 텍스트는 레이아웃 여백과 안전 영역(env(safe-area-inset-*)) 안에 유지됩니다. 고정(sticky) 크롬은 콘텐츠 레이어를 차단하지 않고 그 위에 떠 있어야 합니다.
구조를 유지하다가 깨질 때까지 유지하세요
중단점은 기기 사전 설정이 아닌 콘텐츠에서 비롯됩니다. 확장된 레이아웃이 실제로 맞는 한 유지하고, 늦게 축소하세요. 컴포넌트 수준 적응에는 컨테이너 쿼리를 선호하고, 가장 작은 크기와 가장 큰 크기를 먼저 테스트하세요.
성장과 잘림을 계획하세요
번역된 문자열은 길어지고, 짧은 문자열은 비례적으로 더 많이 길어지므로, 한 단어 버튼 레이블이 화면에서 가장 위험한 요소입니다. 텍스트 컨테이너에 고정 너비나 높이를 설정하지 말고, 행이 줄바꿈되도록 두세요. 비율을 예산으로 잡기보다는 유사 지역화(pseudo-localization)와 대표적인 로케일 하나로 테스트하세요.
크기 조정이나 스크롤 시 중요한 액션이 잘리는 곳에 배치하지 마세요. 정상 흐름(normal flow)에 두거나, 해당 제품에 적합한 안정적인 크롬에 두세요.
완료 전에 확인하세요
| 실수 | 수정 방법 |
|---|---|
현지화 가능한 레이아웃에서 margin-left / padding-right 사용 | margin-inline-start / padding-inline-end |
| 콘텐츠 레이아웃 버튼이 뷰포트 가장자리에 닿음 | 프로젝트 여백 안쪽으로 들여쓰기; 의도적인 플랫폼 크롬 유지 |
| 기본값이기 때문에 768/1024에서 중단점 설정 | 콘텐츠가 실제로 맞지 않는 지점에서 중단 |
| 한 언어에 맞춰 크기가 조정된 고정 너비 텍스트 컨테이너 | max-width와 줄바꿈; 유사 지역화 테스트 |
| 패널의 잘리기 쉬운 하단에 주요 액션 배치 | 고정 위치(sticky) 또는 안전 영역 패딩이 있는 안정적인 크롬 |
보고
심각도. HIGH는 지원되는 뷰포트에서 콘텐츠나 액션을 차단합니다. MEDIUM은 계층 구조, 읽기 순서 또는 적응성을 해칩니다. LOW는 고립된 정렬 또는 간격 다듬기입니다.
검증. 브라우저 없이: 물리적 속성 대신 논리적 속성 사용 여부, 지원되는 뷰포트 목록에 대한 컨테이너 및 미디어 쿼리, 의도된 읽기 순서에 대한 DOM 순서를 확인하세요. 브라우저 사용 시: 지원되는 모든 너비, 200% 확대 및 RTL 미러링을 확인하세요. 실행할 수 없었던 모든 검사는 Not verified로 보고하세요.
형식. 각 원칙을 위반한 결과를 원칙별로 그룹화하고, 심각도 순서로 정렬하며, 근본 원인별로 한 행에 해당 위치가 나타나는 모든 위치를 나열하세요:
| 심각도 | 위치 | 수정 전 | 수정 후 | 이유 |
|---|
위치는 path/to/file:line 형식입니다. 이유는 원칙과 사용자 영향을 명시합니다.
HIGH가 남아 있으면 Block으로 끝내고, 그렇지 않으면 Approve로 끝내되, 나머지는 작업할 내용으로 테이블에 남겨 두세요. 검사하지 않은 범위를 Approve하지 마세요. 보고할 내용이 없으면 "No actionable layout findings"라고 명시하고 검증 결과를 보고하세요.