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