왼쪽에서 오른쪽, 위에서 아래

KRDS CP-320 — 단계는 좌에서 우 또는 상에서 하의 순서로 논리적으로 전개될 수 있도록 구성하고 있다.

0. 들어가며 — 단계가 어느 방향으로 흐르는지

이번 440편은 단계가 좌→우 또는 상→하의 순서로 논리적으로 전개되게 구성하라는 규칙입니다.

단계 표시기의 단계들이 — 읽기 흐름(좌→우, 상→하)을 따라 배치돼야, 사용자가 ‘어느 방향으로 진행되는지’ 직관적으로 알죠. 거꾸로(우→좌)거나 뒤죽박죽이면 — 순서를 잘못 읽습니다. CP-320은 단계의 전개 방향을 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 좌→우 또는 상→하 논리적 전개

CP-320 (컴포넌트 > 단계 표시기) “단계는 좌에서 우 또는 상에서 하의 순서로 논리적으로 전개될 수 있도록 구성하고 있다.”

단계들을 왼쪽에서 오른쪽으로(가로) 또는 위에서 아래로(세로) 순서대로 배치해, 사용자가 진행 방향을 논리적으로 인지하게 하라는 뜻입니다.

정리: 단계를 좌→우 또는 상→하 순서로 전개하라. 이게 CP-320입니다.

2. 왜 좌→우 / 상→하인가

단계 표시기는 — 순서가 있는 절차를 보여줍니다(1단계 → 2단계 → …). 이 순서가 — 화면에서 어느 방향으로 배치되느냐가 중요하죠. 사용자가 방향을 직관적으로 알아야, 순서를 올바로 읽습니다.

읽기 흐름과 일치. 한국어(및 대부분 언어)의 읽기 흐름은 — 좌에서 우로(가로), 위에서 아래로(세로) 입니다. 사용자는 — 무의식적으로 이 방향으로 내용을 읽고 진행을 기대하죠. 그래서 단계도:

가로 배치 → 좌에서 우로 — 단계를 가로로 늘어놓으면 — 왼쪽이 첫 단계, 오른쪽으로 갈수록 다음 단계. ’동의 (왼쪽) → 입력 → 확인 → 완료(오른쪽)’처럼요. 화살표·연결선도 오른쪽을 향하죠.

세로 배치 → 위에서 아래로 — 단계를 세로로 쌓으면 — 위가 첫 단계, 아래로 갈수록 다음 단계. 모바일에서 세로 단계 표시기가 흔하죠.

거꾸로·뒤죽박죽일 때의 문제:

순서 오인 — 단계를 우→좌(오른쪽이 첫 단계)로 배치하면 — 사용자는 읽기 흐름상 왼쪽을 첫 단계로 착각해, 순서를 거꾸로 읽습니다. ’지금 거의 다 왔다’고 생각했는데 실은 시작이라거나요.

진행 방향 혼란 — 단계들이 일관된 방향 없이 배치되면 — 어느 쪽으로 진행되는지 몰라 혼란스럽죠.

그래서 CP-320은 — 단계를 좌→우 또는 상→하로 일관되게 전개하라고 합니다. 읽기 흐름과 일치시켜, 사용자가 방향을 직관적으로 알게요.

‘논리적으로 전개’. 원문의 ’논리적으로’는 — 단순히 방향뿐 아니라, 단계들이 절차의 논리적 순서대로 배치되라는 뜻이기도 하죠. 실제 진행 순서(동의가 먼저, 완료가 마지막)와 화면 배치 순서가 일치해야 합니다. 화면상 2번째 단계가 실제론 4번째 진행이면 안 되죠.

반응형 전환. 데스크톱에서 가로(좌→우)였다가 — 모바일 좁은 화면에서 세로(상→하)로 전환되는 경우가 많습니다. 이때도 — 각 방향에서 올바른 순서(가로는 좌→우, 세로는 상→하)를 유지해야 하죠. 전환 시 순서가 꼬이지 않게 합니다.

이 규칙은 단계 표시기의 ’방향 직관성’을 담당합니다 — 단계를 읽기 흐름(좌→우, 상→하)에 맞춰 논리적 순서로 전개해 (320), 사용자가 진행 방향과 순서를 직관적으로 알게 하죠. 페이지네이션 순서(CP-114)·캐러셀 방향의 단계 표시기 버전입니다.

정리하면 — 단계가 읽기 흐름과 어긋나거나 뒤죽박죽이면 순서를 오인하므로, 좌에서 우 또는 위에서 아래로 절차의 논리적 순서대로 전개해야 합니다.

3. 점검 / 개선

무엇을 점검하나

방향 일치 — 가로는 좌→우, 세로는 상→하로 단계가 전개되는가.

논리 순서 — 화면 배치 순서가 실제 진행 순서와 일치하는가.

반응형 전환 — 가로↔세로 전환 시 순서가 꼬이지 않는가.

개선 방향

단계를 좌→우(가로) 또는 상→하(세로)로 배치. 화살표·연결선도 진행 방향.

배치 순서를 실제 절차 순서와 일치. 반응형 전환 시 순서 검증.

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

역할	책임
디자이너	단계 배치 방향·순서 설계
퍼블리셔/개발	전개 방향·반응형 구현

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

다단계 절차를 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 가로는 좌→우, 세로는 상→하로 단계가 전개되나요?

□ 화면 배치 순서가 실제 진행 순서와 일치하나요?

□ 가로↔세로 전환 시 순서가 꼬이지 않나요?

❓ FAQ

Q1. 왜 좌→우인가요? 한국어 등 대부분 언어의 읽기 흐름이 좌→우, 상→하입니다. 단계도 그에 맞춰야 방향을 직관적으로 알죠. Q2. 세로 배치는 안 되나요? 됩니다. 세로면 위→아래 순서로요. 모바일에서 세로가 흔하죠. 방향 안에서 순서가 맞으면 됩니다. Q3. 반응형으로 방향이 바뀌면요? 가로(데스크톱)↔세로(모바일) 전환 시 각 방향의 올바른 순서를 유지해야 합니다. 전환 시 순서가 꼬이지 않게 하죠.

6. 마무리

CP-320의 메시지:

왼쪽에서 오른쪽, 위에서 아래 — 단계를 읽기 흐름에 맞춰 논리적으로 전개하라.

단계가 읽기 흐름과 어긋나면 사용자가 순서를 오인합니다. 좌→우(가로) 또는 상→하(세로)로, 실제 절차 순서대로 전개하는 게 핵심이죠. 다음 편은 단계 개수입니다.

다음 편 예고 ▶ 「441. (CP-321) 단계의 수는 최소 3개에서 최대 7개 이내로 제공하고 있다.」

ViewCheck는 단계가 좌→우·상→하 순서로 전개되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 단계 표시기(Step indicator) 가이드 — https://www.krds.go.kr/html/site/component/component_31.html

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

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