단계는 자연스러운 순서로

KRDS BP-068 — 단계별 데이터를 입력 받는 경우 각 단계 내 콘텐츠는 논리적, 선형적 관계를 가지고 있다.

0. 들어가며 — 단계가 뒤죽박죽이면

이번 634편은 단계별 데이터를 입력받는 경우 각 단계 내 콘텐츠는 논리적·선형적 관계를 가지게 하라는 규칙입니다.

긴 폼을 — 여러 단계로 나눌 때, 단계와 항목이 — 자연스러운 순서가 아니면 사용자가 혼란스럽죠. BP-068은 단계 내 콘텐츠가 논리적·선형적 흐름을 갖게 하라고 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 단계 논리·선형 관계

BP-068 (기본 패턴 > 입력 폼) “단계별 데이터를 입력받는 경우 각 단계 내 콘텐츠는 논리적, 선형적 관계를 가지고 있다.”

다단계 폼에서 각 단계 내 콘텐츠가 논리적·선형적 관계를 갖게 하라는 뜻입니다.

정리: 다단계 폼의 단계·항목을 논리적·선형적 순서로 구성하라. 이게 BP-068입니다.

2. 왜 논리적·선형적 관계인가

긴 폼(회원가입·신청서)은 한 번에 다 받기보다, 여러 단계로 나눠 받죠(다단계 폼). 그런데 단계와 단계 내 항목이, 자연스러운 순서가 아니면 사용자가 혼란스럽습니다. BP-068은 논리적·선형적 관계를 요구합니다.

단계가 비논리적일 때의 문제:

흐름 혼란 단계 순서가 자연스럽지 않으면(예: 결제 먼저, 상품 선택 나중), 사용자가 왜 이 순서인지 이해 못 하고 혼란스럽습니다.

항목 뒤섞임 한 단계 안에 관련 없는 항목이 섞이면(개인정보 + 결제 + 배송이 한 단계), 사용자가 무엇을 하는 단계인지 헷갈리죠.

앞뒤 의존 깨짐 — 뒤 단계가 — 앞 단계 입력에 의존하는데(앞에서 고른 상품에 따라 옵션 결정), 순서가 어긋나면 진행이 안 되죠.

그래서 BP-068은 — 논리적·선형적 관계를 요구합니다:

논리적 관계 단계와 항목을 의미상 자연스럽게 묶고 배열합니다. 관련 항목끼리 한 단계에(1단계: 개인정보, 2단계: 신청내용, 3단계: 확인). 각 단계가 하나의 주제를 갖게요.

선형적 관계 단계를 앞→뒤 순서로, 자연스러운 흐름으로요. 앞 단계가 뒤 단계의 전제가 되게(정보 입력 → 확인 → 제출). 사용자가 한 방향으로 따라가게 하죠.

단계 간 의존 존중 뒤 단계가 앞 단계 입력에 의존하면, 그 순서를 지킵니다. 앞에서 정한 게 뒤에 반영되게요.

다단계 폼의 효과. 긴 폼을 논리적 단계로 나누면, 사용자가 한 번에 한 주제씩 집중해 부담이 줄죠(인지 부하 감소). 진행률(BP-069)과 함께 어디까지 왔는지도 알고요. 단, 단계가 자연스러워야 이 효과가 납니다.

선형 vs 비선형. 대부분의 신청·가입 폼은 선형(순서대로)이 맞습니다. 단, 일부는 단계를 자유롭게 오갈 수도 있죠(이미 채운 단계 수정). 그래도 기본 흐름은 논리적·선형이어야, 사용자가 길을 잃지 않습니다.

이 규칙은 입력 폼의 ’단계 구조’를 담당합니다 — 단계와 항목을 논리적·선형적으로 구성해(068), 사용자가 자연스러운 흐름으로 다단계 폼을 진행하게 하죠. 진행률 표시(BP-069)와 짝을 이룹니다.

정리하면 — 다단계 폼의 단계·항목이 비논리적이면 사용자가 혼란스러우므로, 관련 항목을 한 단계로 묶고 단계를 자연스러운 선형 순서로 배열해야 합니다.

3. 점검 / 개선

무엇을 점검하나

논리적 묶음 — 관련 항목끼리 한 단계로 묶이고 각 단계가 한 주제인가.

선형 순서 — 단계가 앞→뒤 자연스러운 흐름인가.

의존 존중 — 뒤 단계가 앞 단계 입력에 의존하는 순서가 지켜지는가.

개선 방향

단계를 주제별로 묶고(개인정보→신청내용→확인) 선형 배열.

단계 간 의존 존중. 진행률(BP-069)과 함께 흐름 안내.

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

역할	책임
기획/UX	단계 구조·순서 설계
개발	다단계 폼 구현

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

다단계 입력 폼을 쓰는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 관련 항목끼리 한 단계로 묶이고 각 단계가 한 주제인가요?

□ 단계가 앞→뒤 자연스러운 흐름인가요?

□ 뒤 단계가 앞 단계 입력에 의존하는 순서가 지켜지나요?

❓ FAQ

Q1. 왜 단계를 나누나요? 긴 폼을 한 번에 받으면 부담이 큽니다. 논리적 단계로 나누면 한 번에 한 주제씩 집중해 인지 부하가 줄죠. 진행률도 알 수 있고요. Q2. 논리적·선형이 뭔가요? 논리적=관련 항목을 자연스럽게 묶기, 선형=앞→뒤 순서로 흐르기입니다. ’개인정보→신청 내용→확인’처럼요. Q3. 단계를 자유롭게 오가면 안 되나요? 이미 채운 단계 수정은 허용할 수 있습니다. 단 기본 흐름은 논리적·선형이어야 길을 잃지 않죠.

6. 마무리

BP-068의 메시지:

단계는 자연스러운 순서로 — 다단계 폼의 단계·항목을 논리적·선형적으로 구성하라.

단계가 비논리적이면 사용자가 혼란스럽습니다. 관련 항목을 한 단계로 묶고 단계를 자연스러운 선형 순서로 배열하는 게 핵심이죠. 다음 편은 단계 완수·진행률 표시입니다.

다음 편 예고 ▶ 「635. (BP-069) 단계별 데이터를 입력 받는 경우 단계의 완수, 진행률을 표시하고 있다.」

ViewCheck는 다단계 폼의 단계가 논리적·선형적으로 구성되는지를 진단합니다.

📚 참고 출처

KRDS 기본 패턴 — 입력 폼 가이드 — https://www.krds.go.kr/html/site/pattern/pattern_08.html

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

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