페이지 틀

용도에 따라 페이지 단위 레이아웃을 구성하는 패턴이다. 틀(shell)마다 내비게이션 위치, 콘텐츠 폭, 피드백 영역 같은 레이아웃 뼈대를 정해 둔다. 덕분에 새 페이지를 빈 캔버스가 아니라 이미 검증된 구조에서 시작할 수 있다.

틀은 템플릿과 패턴의 중간쯤에 있다. template은 페이지에 어떤 영역이 있는지 정하고, 틀은 페이지 종류에 따라 그 영역을 어떤 내비게이션, 어떤 콘텐츠 폭, 어떤 피드백 요소로 채울지 정한다.

틀 유형

콘텐츠 중심 페이지

• 본문을 읽기 편하게 하는 데 집중한다
• 콘텐츠 폭을 제한한다
• 내비게이션은 최소한으로 둔다 (브레드크럼 + 상단 내비)
• 쓰는 곳: 아티클, 문서, 텍스트가 많은 페이지

640px이면 본문 한 줄이 45–75자 사이에 들어온다. Sizing을 참고한다.

내비게이션 중심 페이지

• 깊은 위계를 다루는 사이드바 내비게이션
• 내비게이션 옆에 콘텐츠 영역
• 쓰는 곳: 문서 사이트, 설정, 관리자 패널

태블릿 브레이크포인트보다 좁아지면 사이드바는 시트로 접힌다. 가로 스크롤 메뉴로 바꾸지 않는다. 가로로 스크롤되는 내비게이션은 항목 대부분이 화면 밖에 숨는다.

폼 페이지

• 폭을 제한한 컨테이너 안에 폼을 가운데 정렬한다
• 여러 단계 폼에는 진행 표시를 둔다
• 제출 영역을 분명하게 둔다
• 쓰는 곳: 가입, 결제, 데이터 입력

플로우 안의 폼 페이지에서는 전역 내비게이션을 일부러 뺀다. 반쯤 진행한 송금 옆에 하단 탭 바가 있으면 그만두기 쉬워지고, 뒤로 가는 방법은 플로우가 이미 제공한다.

문서 페이지

• 섹션 위계를 보여 주는 사이드 내비게이션
• 콘텐츠 영역 안의 목차
• 코드 예시와 인터랙티브 프리뷰
• 쓰는 곳: 디자인 시스템 문서, API 문서, 가이드

1100px보다 좁으면 목차 레일을 숨긴다. 이 폭에서는 길 찾기보다 콘텐츠 열의 폭이 더 중요하다.

구성

각 틀은 다음 요소로 구성된다.

• 템플릿 (기본 페이지)
• 내비게이션 패턴 (상단 내비, 사이드 내비, 브레드크럼)
• 콘텐츠 레이아웃 (폭 제한, 사이드바 + 콘텐츠, 가운데 정렬)
• 피드백 영역 (선택)

구성 표

모든 틀의 영역은 같다

유형이 무엇이든 틀은 같은 템플릿 영역을 같은 순서로 채운다. 헤더, 내비게이션, main, 피드백(선택), 푸터 순이다. 틀은 각 영역에 무엇을 넣을지만 정하고, 영역을 추가하거나 순서를 바꾸지 않는다. 그래서 페이지 유형이 달라도 건너뛰기 링크, 랜드마크 구조, 포커스 순서가 똑같이 유지된다.

모바일에서는 틀이 하나로 모인다

600px보다 좁으면 네 틀이 모두 같은 모양이 된다. 한 열 레이아웃에 가장자리 여백은 --ds-space-4이고, 내비게이션은 하단 탭 바에 두거나 플로우 안이라면 숨긴다. 틀 사이의 차이는 데스크톱에서 공간이 남을 때만 생긴다. 휴대폰 레이아웃이 곧 디자인이고 데스크톱은 거기에 여유 공간을 더한 것이라는 모바일 우선 원칙과도 맞는다.

틀 고르기

다섯 번째 틀이 필요해 보이면, 먼저 콘텐츠만 다를 뿐 실은 이 넷 중 하나가 아닌지 따져 본다. 새 틀은 비용이 크다. 틀이 하나 늘 때마다 포커스 순서, 랜드마크, 반응형 동작을 따로 검증해야 하는 레이아웃이 하나 더 생긴다.

접근성

• 틀마다 <main>은 하나만 두고, 건너뛰기 링크가 여기로 이동한다.
• 랜드마크 구조가 모든 틀에서 같으므로, 다시 방문한 스크린 리더 사용자는 늘 같은 레이아웃을 만난다.
• 각 <nav>에는 서로 구분되는 aria-label을 붙인다. 문서 페이지에는 <nav>가 두 개 있으므로 반드시 구분돼야 한다.
• 모든 틀에서 DOM 순서는 화면 순서와 같게 한다. 레이아웃 그리드에 order를 쓰지 않는다.
• 하단 고정 액션 바가 포커스된 요소를 가리면 안 된다 (SC 2.4.11).

알려진 공백

• 틀은 구성 방식으로만 문서화돼 있고 컴포넌트로 구현되지 않았다.
• 페이지 단위의 로딩 상태나 에러 상태를 문서화한 틀이 없다.
• 폼 틀의 하단 고정 액션 바는 설명돼 있지만 safe-area 처리 방식은 정해지지 않았다.