좁은 화면엔 접어서

KRDS BP-102 — [모바일] 화면 너비가 충분하지 않은 경우, 필터링 및 정렬 컨트롤 버튼을 축약하여 우측 상단에 제공한다.

0. 들어가며 — 모바일에서 필터를 다 펼치면

이번 668편은 [모바일] 화면 너비가 충분하지 않은 경우, 필터링·정렬 컨트롤 버튼을 축약하여 우측 상단에 제공하라는 규칙입니다.

넓은 화면에선 — 주요 필터를 항상 노출(BP-089)했지만, 모바일은 — 공간이 좁아 다 펼치면 화면을 차지하죠. BP-102는 모바일에서 필터·정렬을 축약 버튼(우측 상단)으로 제공하라고 규정합니다. BP-089의 반응형 짝이죠. 이번 편을 풀어냅니다.

1. 원문 — 모바일 축약 버튼 우상단

BP-102 (기본 패턴 > 필터링·정렬) “[모바일] 화면 너비가 충분하지 않은 경우, 필터링 및 정렬 컨트롤 버튼을 축약하여 우측 상단에 제공한다.”

좁은 화면에서 필터·정렬 컨트롤을 축약 버튼으로 우측 상단에 제공하라는 뜻입니다.

정리: 모바일에선 필터·정렬을 축약 버튼(우상단)으로 제공하라. 이게 BP-102입니다.

2. 왜 모바일 축약인가

넓은 화면(데스크톱)에서는 주요 필터를 항상 노출(BP-089)하는 게 좋습니다. 발견성·접근성 때문이죠. 그런데 좁은 화면(모바일)에서는 사정이 다릅니다. 필터를 다 펼치면, 좁은 화면을 필터가 차지해 정작 결과(목록)를 볼 공간이 없죠. BP-102는 모바일에서 축약을 허용합니다.

모바일에서 필터를 다 펼칠 때의 문제:

공간 부족 모바일은 화면이 좁습니다. 필터를 다 펼치면, 화면 대부분을 필터가 차지하죠. 정작 결과 목록 은 한참 스크롤해야 보입니다.

스크롤 부담 긴 필터를 다 지나야 결과에 닿으면, 사용자가 매번 긴 필터를 스크롤하느라 불편하죠.

그래서 BP-102는 — 축약 버튼으로 제공하라고 합니다:

축약 버튼 모바일에서는 필터·정렬을, ‘필터’ 아이콘 버튼 하나로 축약합니다. 평소엔 버튼만 보이고, 누르면 필터 패널(바텀시트·전체화면 등)이 펼쳐지죠. 결과 목록을 가리지 않으면서, 필요할 때 필터를 열게요.

우측 상단 배치 이 축약 버튼을 우측 상단에 둡니다. 정렬 컨트롤(BP-096 우상단)과 일관된 위치죠. 사용자 가 익숙한 자리에서 필터·정렬을 찾게요.

적용 상태 표시 축약 버튼에도 필터가 적용 중임을 표시합니다(활성 색, 적용 개수 배지 ‘필터 3’). 접혀 있어도 조건이 걸린 걸 알게요(BP-091).

반응형 분기 — BP-089 ↔ BP-102.

넓은 화면(BP-089) — 주요 필터 항상 노출(발견성).

좁은 화면(BP-102) — 축약 버튼 우상단(공간 절약).

같은 필터를 — 화면 너비에 따라 다르게 제공하는, 반응형 디자인입니다. ’화면 너비가 충분한가’를 — 기준으로 분기하죠.

축약해도 접근성 유지. 축약 버튼·패널도 키보드·스크린 리더로 접근 가능해야 합니다. 버튼에 레이블(‘필터 열기’), 패널은 포커스 관리(열면 포커스 이동, 닫으면 복귀)와 초점 가둠 탈출(ESC) 등을요(모달 접근성). 축약이 접근성을 해치면 안 되죠.

바텀시트·전체화면 패널. 모바일 필터 패널은 보통 화면 아래에서 올라오는 바텀시트나, 전체화면 오버레이로요. 그 안에 필터·정렬 옵션을 두고, ‘적용’·‘초기화’(BP-099·101) 버튼을 함께 둡니다.

이 규칙은 필터링·정렬의 ’모바일 반응형’을 담당합니다 — 좁은 화면에서 필터·정렬을 축약 버튼(우상단)으로 제공해(102), 공간을 절약하면서 필터를 쓰게 하죠. BP-089(넓은 화면 노출)의 반응형 짝입니다.

정리하면 — 모바일에서 필터를 다 펼치면 좁은 화면을 차지해 결과를 못 보므로, 필터·정렬을 축약 버튼(우측 상단)으로 제공 하고 적용 상태·접근성을 유지해야 합니다.

3. 점검 / 개선

무엇을 점검하나

축약 버튼 — 모바일에서 필터·정렬이 축약 버튼으로 제공되는가.

우상단·적용 표시 — 버튼이 우측 상단에 있고 적용 상태(배지)를 표시하는가.

접근성 — 버튼·패널이 키보드·스크린 리더로 접근 가능한가(포커스 관리).

개선 방향

모바일은 필터·정렬을 축약 버튼(우상단)으로. 패널은 바텀시트·전체화면.

적용 개수 배지(BP-091). 포커스 관리·ESC 탈출(접근성). 넓은 화면은 BP-089.

4. 누가 담당하나 / 우리 사이트에 해당될까?

역할	책임
기획/UX	모바일 필터 패널 설계
퍼블리셔/개발	축약 버튼·반응형 구현

기관 유형	BP-102 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 권장 (모바일 필터·정렬)

모바일을 지원하며 필터·정렬을 쓰는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 모바일에서 필터·정렬이 축약 버튼으로 제공되나요?

□ 버튼이 우측 상단에 있고 적용 상태(배지)를 표시하나요?

□ 버튼·패널이 키보드·스크린 리더로 접근 가능한가요(포커스 관리)?

❓ FAQ

Q1. BP-089(항상 노출)와 모순 아닌가요? 아닙니다. BP-089는 넓은 화면(노출), BP-102는 좁은 화면(축약)입니다. 화면 너비에 따라 다르게 제공하는 반응형이죠. Q2. 왜 우측 상단인가요? 정렬 컨트롤 위치(BP-096 우상단)와 일관되게요. 사용자가 익숙한 자리에서 필터·정렬을 찾습 니다. 적용 개수 배지로 조건 걸린 것도 알리고요. Q3. 축약하면 접근성이 나빠지지 않나요? 버튼·패널을 키보드·스크린 리더로 접근 가능하게 하면 됩니다. 버튼 레이블, 패널 포커스 관리(열기·닫기·ESC)로요. 축약이 접근성을 해치면 안 되죠.

6. 마무리

BP-102의 메시지:

좁은 화면엔 접어서 — 모바일에선 필터·정렬을 축약 버튼(우상단)으로 제공하라.

모바일에서 필터를 다 펼치면 좁은 화면을 차지해 결과를 못 봅니다. 축약 버튼(우상단)으로 공간을 절약하면서 적용 상태· 접근성을 유지하는 게 핵심이죠. 다음 편은 결과 수 live-region입니다.

다음 편 예고 ▶ 「669. (BP-103) 전체 검색 결과 수 안내 텍스트에 live-region을 적용하고 aria-live=“polite”로 스크린 리더에 전달하고 있다.」

ViewCheck는 모바일에서 필터·정렬이 축약 버튼으로 제공되는지를 진단합니다.

📚 참고 출처

KRDS 기본 패턴 — 필터링·정렬 가이드 — https://www.krds.go.kr/html/site/pattern/pattern_10.html

KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준

KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준