숫자는 오른쪽, 글자는 왼쪽

KRDS CP-240 — 양적 데이터를 전달하기 위한 숫자는 오른쪽으로 정렬, 텍스트 데이터, 명목 데이터는 왼쪽으로 정렬하고 있다.

0. 들어가며 — 360편, 정렬로 비교를 돕기

이번 360편은 숫자(양적 데이터)는 오른쪽 정렬, 텍스트·명목 데이터는 왼쪽 정렬하라는 규칙입니다. 시리즈 360편을 이 규칙으로 맞습니다.

표에서 같은 열의 값을 세로로 비교할 때 — 정렬 방향이 비교 효율을 좌우합니다. 숫자는 오른쪽 정렬해야 자릿수가 맞아 크기 비교가 쉽고, 텍스트는 왼쪽 정렬해야 첫 글자가 맞아 읽기 쉽죠. CP-240은 데이터 유형별 정렬 규칙을 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 유형별 정렬

CP-240 (컴포넌트 > 표) “양적 데이터를 전달하기 위한 숫자는 오른쪽으로 정렬, 텍스트 데이터, 명목 데이터는 왼쪽으로 정렬하고 있다.”

표에서 숫자(양·금액·수치)는 오른쪽 정렬, 텍스트나 명목(이름·분류) 데이터는 왼쪽 정렬해, 같은 열 값의 비교· 읽기를 쉽게 하라는 뜻입니다.

정리: 숫자는 오른쪽, 텍스트·명목은 왼쪽으로 정렬하라. 이게 CP-240입니다.

2. 왜 유형별로 정렬 방향이 다른가

표의 핵심은 ’같은 열의 값을 세로로 비교’하는 것입니다. 이 비교 효율은 — 값들의 정렬 방향에 따라 크게 달라 지죠. 데이터 유형(숫자 vs 텍스트)마다 비교·읽기에 유리한 정렬이 다릅니다.

① 숫자(양적 데이터) 오른쪽 정렬. 숫자를 세로로 비교할 때, 가장 중요한 것은 자릿수 정렬입니다. 숫자는 오른쪽 끝(일의 자리)을 기준으로 자릿수가 늘어나죠 일·십·백·천. 오른쪽 정렬하면 같은 자릿수가 세로로 맞아떨어집니다:

9 85 1,234 12,500

이렇게 정렬되면 — 사용자가 자릿수(숫자 길이)만 봐도 크기를 직관적으로 비교하죠. “1,234와 12,500 중 뭐가 큰가” 를 자릿수가 맞아 한눈에 압니다. 그런데 숫자를 왼쪽 정렬하면:

9 85 1,234 12,500

자릿수가 안 맞아 — 크기 비교가 어렵습니다. 짧은 “9”가 왼쪽으로 튀어나와 “12,500”보다 길어 보이거나 헷갈리죠. 그래서 숫자(금액·수량·비율 등 양적 데이터)는 오른쪽 정렬이 원칙입니다. 소수점이 있으면 소수점 기준으로 정렬하기도 하죠.

② 텍스트·명목 데이터 왼쪽 정렬. 반대로 텍스트(이름·항목·설명)나 명목 데이터(분류·코드 등)는 읽기가 왼쪽에서 시작합니다. 왼쪽 정렬하면 모든 값의 첫 글자가 세로로 맞아, 사용자가 왼쪽 기준선을 따라 시선을 내리며 빠르게 훑죠:

서울특별시 부산광역시 대구광역시

첫 글자가 맞아 읽기 흐름이 일정합니다. 텍스트를 오른쪽 정렬하면 — 길이가 다른 텍스트의 끝이 맞고 시작이 들쭉 날쭉해, 읽기 시작점이 흩어져 훑기 어렵죠. 그래서 텍스트·명목 데이터는 왼쪽 정렬이 원칙입니다.

헤더 정렬. 보통 — 각 열의 헤더(<th>)도 그 열 데이터의 정렬과 맞추는 게 자연스럽습니다(숫자 열 헤더는 오른쪽, 텍스트 열 헤더는 왼쪽). 헤더와 데이터의 정렬이 맞으면 시각적으로 정돈되죠.

이 정렬 규칙은 — 데이터를 ’읽고 비교하는 방식’에 맞춘 것입니다. 숫자는 크기 비교(자릿수), 텍스트는 읽기(첫 글자)가 핵심이라 각각 오른쪽·왼쪽이 유리하죠. 이는 표 가독성·비교성(CP-239의 셀·행 구성)의 한 축이고, 정렬 기능(CP-241)으로 순서를 바꿔도 이 정렬 방향은 유지됩니다.

예외·주의. 중앙 정렬은 — 짧고 일정한 값(예: 한 글자 상태 표시, 체크 표시)에 가끔 쓰지만, 숫자·텍스트의 비교에는 부적합하죠. 그리고 — 정렬 방향은 데이터 유형에 따르되, 한 열 안에서는 일관되게 적용해야 합니다(한 숫자 열의 일부만 다르게 정렬하면 비교가 깨짐).

정리하면 — 표에서 숫자는 자릿수 비교를 위해 오른쪽, 텍스트·명목은 읽기를 위해 왼쪽으로 정렬해, 데이터 유형에 맞는 비교·읽기 효율을 확보해야 합니다.

3. 점검 / 개선

무엇을 점검하나

숫자 오른쪽 — 숫자(양적) 데이터 열이 오른쪽 정렬됐는가(자릿수 정렬).

텍스트 왼쪽 — 텍스트·명목 데이터 열이 왼쪽 정렬됐는가(첫 글자 정렬).

열 내 일관 — 한 열 안에서 정렬 방향이 일관된가.

개선 방향

숫자 열 오른쪽 정렬(소수점 기준), 텍스트·명목 열 왼쪽 정렬.

헤더 정렬을 데이터와 맞춤. 열 내 일관 유지.

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

역할	책임
디자이너	데이터 유형별 정렬 규칙 정의
퍼블리셔/개발	열별 정렬 구현

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

숫자·텍스트 데이터를 담은 표를 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 숫자(양적) 데이터 열이 오른쪽 정렬됐나요(자릿수 정렬)?

□ 텍스트·명목 데이터 열이 왼쪽 정렬됐나요(첫 글자 정렬)?

□ 한 열 안에서 정렬 방향이 일관된가요?

❓ FAQ

Q1. 왜 숫자는 오른쪽인가요? 오른쪽 정렬하면 자릿수가 세로로 맞아 크기를 한눈에 비교합니다. 왼쪽 정렬하면 자릿수가 안 맞아 헷갈리죠. Q2. 텍스트는 왜 왼쪽인가요? 읽기가 왼쪽에서 시작하니, 왼쪽 정렬해야 첫 글자가 맞아 빠르게 훑습니다. Q3. 중앙 정렬은요? 짧고 일정한 값(상태 표시 등)에 가끔 쓰지만, 숫자·텍스트 비교에는 부적합합니다.

6. 마무리

CP-240의 메시지:

숫자는 오른쪽, 글자는 왼쪽 — 데이터 유형에 맞게 정렬해 비교를 돕는다.

표에서 숫자는 자릿수 비교를 위해 오른쪽, 텍스트·명목은 읽기를 위해 왼쪽으로 정렬해야 같은 열 값을 효율적으로 비교·읽습니다. 데이터를 읽고 비교하는 방식에 맞춘 규칙이죠. 다음 편은 사용자 정렬 기능입니다.

다음 편 예고 ▶ 「361. (CP-241) 사용자가 원하는 대로 데이터를 정렬할 수 있는 기능을 제공하고 있다.」

ViewCheck는 표의 숫자·텍스트 데이터가 유형에 맞게 정렬됐는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 표(Table) 가이드 — https://www.krds.go.kr/html/site/component/component_22.html

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

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