기본 페이지
필요한 구조 영역을 모두 갖춘 표준 페이지 틀이다.
시스템의 모든 페이지는 이 템플릿에서 영역 내용만 바꿔 만든다. 구조가 하나뿐이라 건너뛰기 링크, 랜드마크 순서, 포커스 동작이 어디서나 같다. 다시 방문한 스크린 리더 사용자가 페이지 구조를 새로 익힐 필요가 없다.
구조
세로로 쌓는 한 열 레이아웃이다. 위에서부터 헤더, 내비게이션, 본문 영역, 피드백 영역(선택), 푸터 순서로 놓인다.
┌──────────────────────────────┐
│ Header │ brand, global actions
├──────────────────────────────┤
│ Navigation │ top nav / breadcrumbs / tabs
├──────────────────────────────┤
│ Main │ <main id="ds-main-content">
│ │
├──────────────────────────────┤
│ Feedback (optional) │ date modified, help, related
├──────────────────────────────┤
│ Footer │ secondary nav, legal
└──────────────────────────────┘
헤더 앞에는 건너뛰기 링크를 첫 번째 포커스 요소로 두고, #ds-main-content로 이동하게 한다.
영역
| Region | Required | Purpose | Element |
|---|---|---|---|
| Header | Yes | 브랜드, 전역 내비게이션 | <header> |
| Navigation | Yes | 페이지·섹션 단위 길 찾기 | <nav aria-label="…"> |
| Content area | Yes | 페이지의 주요 콘텐츠 | <main id="ds-main-content"> |
| Feedback region | Optional | 수정 날짜, 도움말 링크, 관련 콘텐츠 | <aside> |
| Footer | Yes | 보조 내비게이션, 법적 고지, 연락처 | <footer> |
영역의 순서는 바꾸지 않고, 영역을 새로 추가하지도 않는다. 여섯 번째 영역이 필요해 보인다면 그 콘텐츠는 <main> 안에 들어가야 한다.
랜드마크와 라벨
페이지마다 <main>은 하나만 둔다. 각 <nav>에는 서로 구분되는 aria-label을 붙인다. 섹션 내비게이션과 목차가 모두 있는 문서 페이지에는 <nav>가 두 개 있는데, 라벨이 없으면 스크린 리더 사용자는 둘을 구분할 수 없다.
사용
다음 페이지는 기본 페이지 템플릿으로 시작한다.
- 콘텐츠 페이지
- 문서 페이지
- 폼 페이지
- 랜딩 페이지 (hero 변형 사용)
틀(shell)은 이 템플릿을 용도에 맞게 구체화한 것이다. 어떤 내비게이션을 쓸지, 컨테이너 폭은 얼마로 할지, 피드백 영역에 무엇을 둘지를 정한다. Page shells를 참고한다.
커스터마이징
- 본문 영역에는 컴포넌트와 패턴을 자유롭게 조합해 넣을 수 있다
- 내비게이션은 상단 내비게이션, 사이드 내비게이션, 브레드크럼 중에서 쓴다
- 피드백 영역은 선택이지만 두는 것을 권장한다
반응형 동작
| Breakpoint | Layout |
|---|---|
| Mobile (<600px) | 한 열, 가장자리 여백 --ds-space-4, 하단 탭 내비게이션 |
| Tablet (600–1023px) | 한 열, 여백 --ds-space-5 |
| Desktop (≥1024px) | 컨테이너로 폭 제한, 여백 --ds-space-6, 내비게이션은 사이드바로 옮겨도 된다 |
페이지 상태
이 템플릿으로 만든 페이지에는 모두 네 가지 상태가 있고, 네 상태 모두 같은 <main> 영역에 표시된다.
| State | Content |
|---|---|
| Loading | 최종 레이아웃과 같은 모양의 스켈레톤. main을 비워 두지 않는다 |
| Loaded | 페이지 콘텐츠 |
| Empty | 상황에 맞는 유형의 empty state |
| Error | 다시 시도 버튼과, 무엇이 그대로인지 알려 주는 문장이 있는 에러 상태 |
헤더, 내비게이션, 푸터는 네 상태 모두에서 보여 준다. 콘텐츠를 불러오는 동안 이런 기본 UI까지 사라지면, 느린 페이지가 고장 난 페이지처럼 보인다.
접근성
- 건너뛰기 링크를 첫 번째 포커스 요소로 두고,
tabindex="-1"을 지정한<main>으로 이동하게 한다 - 페이지마다
<h1>은 하나만 두고, 제품 이름이 아니라 페이지 이름을 쓴다 - 본문 영역 전체에서 제목 수준을 건너뛰지 않고 순서대로 쓴다
- 라우트가 바뀌면 포커스를
<h1>으로 옮기고 문서 제목도 바꾼다 - 모든 영역에서 DOM 순서는 화면 순서와 같게 한다
알려진 공백
- 랜딩 페이지용 hero 변형은 언급만 있고 정의되지 않았다.
- 피드백 영역에 무엇을 담을지 콘텐츠 모델이 문서화되지 않았다.