정렬은 목록 우상단 정해진 자리

KRDS BP-096 — 정렬 컨트롤은 대상 목록 오른쪽 상단에 배치하고 있다.

0. 들어가며 — 정렬은 어디서 바꾸지

이번 662편은 정렬 컨트롤을 대상 목록 오른쪽 상단에 배치하라는 규칙입니다.

‘최신순/인기순’ 같은 정렬을 — 바꾸려는데, 그 컨트롤이 화면마다 다른 곳에 있으면 찾기 어렵죠. BP-096은 정렬 컨트롤을 목록 오른쪽 상단이라는 관습적 위치에 두라고 규정합니다. 일관된 위치로 예측 가능성을 주죠. 이번 편을 풀어냅니다.

1. 원문 — 정렬 컨트롤 우상단

BP-096 (기본 패턴 > 필터링·정렬) “정렬 컨트롤은 대상 목록 오른쪽 상단에 배치하고 있다.”

정렬 컨트롤을 대상 목록의 오른쪽 상단에 배치하라는 뜻입니다.

정리: 정렬 컨트롤을 목록 오른쪽 상단에 배치하라. 이게 BP-096입니다.

2. 왜 목록 우상단인가

필터링(BP-094)은 우선순위 순으로 좌측·상단에 배치했죠. 정렬은 다릅니다. 정렬 컨트롤(‘최신순/오래된순/인기순’ 등)은 그 자체로 별도 관습적 위치가 있습니다. BP-096은 대상 목록의 오른쪽 상단을 정합니다.

정렬 위치가 들쭉날쭉할 때의 문제:

매번 찾기 정렬 컨트롤이 화면마다 다른 곳(상단, 하단, 좌측)에 있으면, 사용자는 매번 찾아야 합니다.

필터와 혼동 — 정렬과 필터가 — 같은 자리에 섞이면, 무엇이 정렬이고 무엇이 필터인지 헷갈리죠.

그래서 BP-096은 — 목록 오른쪽 상단에 두라고 합니다:

목록 우상단 배치 정렬 컨트롤을 정렬 대상인 목록의 오른쪽 상단에 둡니다. 목록 바로 위, 오른쪽이죠. 사용자 가 목록을 보며 자연스럽게 정렬 컨트롤을 찾게요. 이건 웹 전반의 관습적 패턴입니다(많은 사이트가 정렬을 목록 우상단에 둠).

필터와 구분 필터(좌측·상단, BP-094)와 정렬(목록 우상단)을 위치로 구분합니다. 사용자가 무엇이 필터이고 정렬인지 위치로 알죠.

목록과 근접 정렬은 그 목록에 적용되므로, 해당 목록 가까이(바로 위) 둡니다. 어느 목록의 정렬인지 명확하게요.

왜 오른쪽 상단인가. 목록의 왼쪽 상단은 보통 제목·결과 수가, 오른쪽 상단은 정렬·보기 옵션이 오는 게 웹 관습입니다. 사용자가 이미 학습한 패턴이라, 거기 두면 직관적으로 찾죠. 관습을 따르는 게 사용성을 높입니다(일관 된 패턴).

필터·정렬 배치의 종합:

필터링 — 우선순위 순, 좌측·상단(BP-094) + 군집화(BP-095).

정렬 — 목록 오른쪽 상단(BP-096).

이렇게 — 필터와 정렬이 위치로 역할이 구분되죠.

일관성·예측 가능성. 정렬을 항상 같은 자리(목록 우상단)에 두면, 사용자가 어느 목록에서든 정렬을 바로 찾습니다. 일관성은 예측 가능성을 주는 UX 원칙이죠(BP-072 버튼 일관 배치와 통함).

이 규칙은 필터링·정렬의 ’정렬 위치’를 담당합니다 — 정렬 컨트롤을 목록 우상단에 배치해(096), 사용자가 관습적 위치에서 정렬을 바로 찾고 필터와 구분하게 하죠.

정리하면 — 정렬 컨트롤이 화면마다 다르면 매번 찾아야 하고 필터와 혼동되므로, 정렬을 대상 목록의 오른쪽 상단(웹 관습적 위치)에 일관되게 배치해야 합니다.

3. 점검 / 개선

무엇을 점검하나

우상단 배치 — 정렬 컨트롤이 대상 목록의 오른쪽 상단에 있는가.

필터와 구분 — 정렬이 필터(좌측·상단)와 위치로 구분되는가.

목록 근접 — 정렬이 적용 대상 목록 가까이(바로 위)에 있는가.

개선 방향

정렬 컨트롤을 목록 오른쪽 상단(관습적 위치)에 일관 배치.

필터(좌·상단, BP-094)와 위치 구분. 해당 목록과 근접.

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

역할	책임
기획/UX	정렬 위치 설계
퍼블리셔	우상단 배치 구현

기관 유형	BP-096 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 권장 (정렬 사용 시)

목록에 정렬을 쓰는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 정렬 컨트롤이 대상 목록의 오른쪽 상단에 있나요?

□ 정렬이 필터(좌측·상단)와 위치로 구분되나요?

□ 정렬이 적용 대상 목록 가까이(바로 위)에 있나요?

❓ FAQ

Q1. 왜 목록 오른쪽 상단인가요? 웹 관습입니다. 목록 좌상단은 제목·결과 수, 우상단은 정렬·보기 옵션이 오죠. 사용자가 학습한 패턴이라 거기 두면 직관적으로 찾습니다. Q2. 필터와 정렬을 같이 두면 안 되나요? 위치로 구분하는 게 좋습니다. 필터는 좌측·상단(BP-094), 정렬은 목록 우상단 (BP-096)으로요. 사용자가 무엇이 무엇인지 위치로 알죠. Q3. 정렬을 목록 아래 두면요? 사용자는 목록을 보기 전에 정렬을 정하려 합니다. 목록 위(우상단)에 둬야 자연스럽죠. 관습적 위치를 따르는 게 사용성을 높입니다.

6. 마무리

BP-096의 메시지:

정렬은 목록 우상단 정해진 자리 — 정렬 컨트롤을 대상 목록 오른쪽 상단에 배치하라.

정렬이 화면마다 다르면 매번 찾아야 하고 필터와 혼동됩니다. 정렬을 목록 우상단 관습적 위치에 일관 배치해 바로 찾게 하는 게 핵심이죠. 다음 편은 데이터 특성 기반 필터·정렬입니다.

다음 편 예고 ▶ 「663. (BP-097) 데이터 집합의 특성을 고려하여 결과를 좁히는 데 도움이 되는 속성을 중심으로 필터링 ·정렬할 수 있도록 하고 있다.」

ViewCheck는 정렬 컨트롤이 목록 오른쪽 상단에 배치되는지를 진단합니다.

📚 참고 출처

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

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

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