줄 맞춰 왼쪽으로

KRDS CP-054 — 드롭다운 메뉴 영역 내에서 레이블은 좌측으로 정렬로 사용하고 있다.

0. 들어가며 — 사이트 내비게이션의 핵심

이번 174편부터는 메인 메뉴(Main menu) 그룹 15개(CP-054~068)입니다.

메인 메뉴는 사이트의 핵심 내비게이션입니다 — 사용자가 ’어디로 갈지’를 정하는 주된 길잡이죠. 보통 헤더에 위치하며, 마우스를 올리거나 클릭하면 하위 메뉴가 드롭다운으로 펼쳐집니다. 그 첫 규칙 CP-054는 드롭다운 안 레이블(메뉴 이름)을 좌측 정렬하라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 좌측 정렬

CP-054 (컴포넌트 > 메인 메뉴) “드롭다운 메뉴 영역 내에서 레이블은 좌측으로 정렬로 사용하고 있다.”

드롭다운 메뉴 안의 메뉴 항목(레이블)들을 왼쪽으로 정렬하라는 뜻입니다.

정리: 드롭다운 메뉴 레이블은 좌측 정렬로 사용하라. 이게 CP-054입니다.

2. 왜 좌측 정렬인가

드롭다운 메뉴는 여러 메뉴 항목(레이블)이 세로로 나열된 목록입니다. 이 항목들을 어떻게 정렬할지 — 왼쪽, 가운데, 오른쪽 — 가 가독성을 좌우하죠.

답은 좌측 정렬입니다. 이유는 읽기 시작점의 일관성에 있습니다. 한국어·영어는 왼쪽→오른쪽으로 읽으므로, 각 줄의 시작점(왼쪽 끝)이 가지런히 정렬돼 있어야 시선이 자연스럽게 위아래로 흐릅니다. 좌측 정렬이면 모든 항목의 첫 글자가 같은 세로선에 맞춰져, 눈이 그 선을 따라 빠르게 목록을 훑죠.

반면 가운데 정렬하면 — 각 항목의 길이가 달라 시작점이 들쭉날쭉해집니다. “정책소개”, “보도자료 및 알림마당”, “민원”처럼 길이가 다른 항목을 가운데 정렬하면, 시선이 매 줄마다 다른 시작점을 찾아 좌우로 움직여야 해 읽기가 피로하죠. 우측 정렬은 더욱 부자연스럽습니다(읽기 방향과 반대).

여러 줄의 텍스트 목록에서 좌측 정렬이 표준인 것은 이런 가독성 원리 때문입니다(타이포그래피 편의 정렬 원칙). 특히 메뉴는 사용자가 빠르게 훑어 원하는 항목을 찾아야 하는 목록이라, 좌측 정렬로 시작점을 가지런히 맞추는 것이 중요합니다.

이는 작아 보이지만 사용성에 영향을 주는 디테일입니다. 드롭다운 메뉴 레이블을 좌측 정렬해 — 사용자가 메뉴 목록을 빠르고 편하게 훑게 하는 것이 CP-054죠. 메인 메뉴 그룹의 시작을 ’읽기 편한 정렬’이라는 기본기로 여는 것입니다.

3. 점검 / 개선

무엇을 점검하나

좌측 정렬 — 드롭다운 메뉴 항목들이 왼쪽 정렬됐는가.

시작점 일치 — 모든 항목의 첫 글자가 같은 세로선인가.

가운데/우측 아님 — 가운데·우측 정렬로 들쭉날쭉하지 않은가.

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

역할	책임
디자이너	드롭다운 메뉴 레이블 좌측 정렬 설계
퍼블리셔/개발	좌측 정렬 구현

기관 유형	CP-054 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (드롭다운 메뉴 사용 시)

드롭다운 메인 메뉴를 사용하는 사이트 = 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 드롭다운 메뉴 항목이 좌측 정렬됐나요?

□ 모든 항목의 첫 글자가 같은 세로선인가요?

□ 가운데·우측 정렬로 들쭉날쭉하지 않나요?

❓ FAQ

Q1. 가운데 정렬이 더 예쁘지 않나요? 보기엔 그럴 수 있으나, 길이가 다른 항목을 가운데 정렬하면 시작점이 들쭉날쭉해 읽기 피로합니다. 목록은 좌측 정렬이 가독성에 좋습니다. Q2. 아이콘이 있는 메뉴는요? 아이콘+레이블 구조에서도 레이블 정렬은 좌측 기준으로 가지런히 맞춥니다. Q3. KRDS를 채택하면 자동인가요? 표준 드롭다운 메뉴는 레이블을 좌측 정렬합니다.

6. 마무리

CP-054의 메시지:

줄 맞춰 왼쪽으로 — 좌측 정렬이 메뉴 목록을 빠르게 훑게 한다.

드롭다운 메뉴 항목을 좌측 정렬하면 모든 시작점이 가지런해, 시선이 위아래로 자연스럽게 흐릅니다. 가운데·우측 정렬은 시작점이 들쭉날쭉해 읽기 피로하죠. 읽기 편한 정렬이라는 기본기로 메인 메뉴 그룹을 엽니다.

다음 편은 드롭다운 영역의 높이를 다룹니다. CP-055 — “드롭다운 최대 높이는 뷰포트를 초과하지 않고, 초과 시 스크롤을 생성한다.”

다음 편 예고 ▶ 「175. (CP-055) 드롭다운 영역의 최대 높이는 뷰포트를 초과하지 않도록 하고 최대 높이를 초과하는 경우에 스크롤이 생성되도록 제공하고 있다.」

ViewCheck는 드롭다운 메뉴 레이블이 좌측 정렬됐는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 메인 메뉴(Main menu) 가이드 — https://www.krds.go.kr/html/site/component/component_06.html

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

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