04 · Patterns · 탐색 · 구조
페이지 헤더Page Header
제목·설명·액션·브레드크럼으로 구성된, 화면 최상단의 고정 구역. 사용자가 ‘어디에 있고 무엇을 할 수 있는지’를 3초 안에 답해야 합니다.
구성 요소
신청 내역
최근 30일간 접수된 수련회·봉사·교육 신청을 확인합니다.
- Breadcrumb — 상위 맥락. 깊이 3단계 이상에서만 유효.
- Title — 이 페이지의 정체. 동사형이 아닌 명사형(“신청 내역”).
- Description — 선택. 제목만으로 부족할 때 한 줄.
- Primary action — 이 화면에서 가장 흔한 행동 하나만. 오른쪽 정렬.
- Secondary action(s) — 내보내기·필터 같은 보조 행동. 최대 2개.
원칙
- 액션은 3개 이하. 더 필요하면 오버플로우 메뉴로.
- Primary는 항상 오른쪽 끝. 데스크톱과 모바일 모두에서.
- 제목은
h1그대로. 페이지당h1은 하나. - 모바일에서는 Description이 제목 아래로 내려가고, 액션은 아래 줄로 접힙니다.
Do· Primary 하나
“새 항목 추가”를 Primary로, “내보내기”를 Secondary로. 사용자가 가장 자주 누를 행동이 시각적으로 가장 강해야 합니다.
Don't· Primary 3개
세 버튼이 모두 진한 색이면 뇌는 우선순위를 포기합니다. Primary·Secondary·Ghost의 위계가 없다면 모든 버튼이 없는 것과 같습니다.
반응형
데스크톱: 제목과 액션이 같은 줄, 사이는 flex 자동 정렬.
모바일 (< 640px): 제목·설명이 위, 액션은 아래 줄에 가로 스크롤 또는 2열. Primary만 표시하고 나머지는 오버플로우 버튼으로 접기.
접근성
- 제목은 반드시
<h1>. 스크린리더 사용자가 ‘지금 이 페이지’를 특정하는 첫 단서입니다. - Breadcrumb 영역은
nav aria-label="경로"로 감쌈. - 아이콘 버튼은
aria-label필수. ‘새로 만들기’ 같이 동사로.