한 줄에 하나씩 위에서 아래로

KRDS BP-070 — 콘텐츠는 가능한 한 하나의 열에 수직으로 정렬하여 입력 받고 있다.

0. 들어가며 — 입력 필드를 좌우로 늘어놓으면

이번 636편은 콘텐츠는 가능한 한 하나의 열에 수직으로 정렬하여 입력받게 하라는 규칙입니다.

입력 필드를 — 한 줄에 여러 개 좌우로 늘어놓으면, 시선이 갈팡질팡하고 모바일에선 깨지죠. BP-070은 입력 폼을 단일 열 수직 정렬로 구성하라고 규정합니다. 폼 레이아웃의 기본 원칙이죠. 이번 편을 풀어냅니다.

1. 원문 — 단일 열 수직 정렬

BP-070 (기본 패턴 > 입력 폼) “콘텐츠는 가능한 한 하나의 열에 수직으로 정렬하여 입력받고 있다.”

입력 폼 콘텐츠를 가능한 한 하나의 열에 수직으로 정렬하라는 뜻입니다.

정리: 입력 폼을 단일 열에 수직으로 정렬하라. 이게 BP-070입니다.

2. 왜 단일 열 수직 정렬인가

입력 폼은 여러 필드로 구성됩니다. 이 필드들을 어떻게 배열하느냐가 폼의 사용성을 좌우하죠. BP-070은 가능한 한 하나의 열에 수직으로 정렬하라고 합니다.

필드를 좌우로 늘어놓을 때의 문제:

시선 갈팡질팡 한 줄에 필드를 여러 개 좌우로 두면, 사용자의 시선이 좌우로 왔다 갔다 합니다. 위에서 아래로 자연스럽게 내려가지 못하고, 어디를 봐야 할지 헷갈리죠.

순서 혼란 좌우 배치는 입력 순서가 모호합니다. ’Z자’로 가는지, 위아래로 가는지 헷갈려 항목을 빠뜨리기 쉽죠.

모바일 깨짐 좁은 화면(모바일)에선 좌우 배치가 깨지거나 너무 좁아집니다. 반응형에서 불리하죠.

그래서 BP-070은 — 단일 열 수직 정렬을 권합니다:

하나의 열 입력 필드를 한 열에, 위에서 아래로 하나씩 배열합니다. 사용자의 시선이 수직으로 자연스럽게 내려가며 순서대로 입력하죠.

수직 흐름 위 → 아래의 명확한 한 방향 흐름이라, 입력 순서가 분명하고 항목을 빠뜨리지 않습니다.

반응형 유리 단일 열은 어떤 화면 너비에서도 잘 작동합니다. 모바일에서도 그대로 수직이라 깨지지 않죠.

**‘가능한 한’의 여지.** 다만 밀접하게 관련된 짧은 항목은, 예외적으로 한 줄에 둘 수 있습니다. 예: ’시/도’와 ’구/군’ 같은 한 쌍의 주소 필드, 또는 생년월일의 년/월/일. 의미상 한 단위인 것은 묶을 수 있죠. 단 기본은 단일 열이고, 이런 묶음은 예외적·신중하게요.

왜 단일 열이 좋은가. 연구에 따르면 단일 열 폼이, 다중 열보다 완료 속도가 빠르고 오류가 적습니다. 시선이 한 방향으로만 흐르니 인지 부담이 적죠. 폼 UX의 정설입니다.

이 규칙은 입력 폼의 ’레이아웃 기본’을 담당합니다 — 단일 열 수직 정렬로(070), 시선이 자연스럽게 흐르고 순서가 분명 하며 반응형에도 유리하게 하죠.

정리하면 — 입력 필드를 좌우로 늘어놓으면 시선이 갈팡질팡하고 순서가 혼란스러우며 모바일에서 깨지므로, 가능한 한 하나의 열에 수직으로 정렬해야 합니다(밀접한 짧은 쌍만 예외).

3. 점검 / 개선

무엇을 점검하나

단일 열 — 입력 필드가 한 열에 수직으로 배열되는가.

수직 흐름 — 위→아래 한 방향 흐름이 분명한가.

예외 신중 — 한 줄 묶음이 밀접한 짧은 쌍(시/도+구/군 등)에 한정되는가.

개선 방향

입력 필드를 단일 열 수직 정렬. 위→아래 흐름.

밀접한 짧은 쌍만 예외적 한 줄. 반응형에서 단일 열 유지.

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

역할	책임
디자이너	폼 레이아웃 설계
퍼블리셔	단일 열 구현

기관 유형	BP-070 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 권장 (입력 폼)

입력 폼이 있는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 입력 필드가 한 열에 수직으로 배열되나요?

□ 위→아래 한 방향 흐름이 분명한가요?

□ 한 줄 묶음이 밀접한 짧은 쌍(시/도+구/군 등)에 한정되나요?

❓ FAQ

Q1. 왜 단일 열이 좋나요? 시선이 한 방향(위→아래)으로만 흘러 인지 부담이 적고, 입력 순서가 분명하며, 모바일에서도 안 깨집니다. 연구상 완료 속도가 빠르고 오류가 적죠. Q2. 좌우로 두면 공간이 절약되지 않나요? 공간은 절약돼도 시선이 갈팡질팡하고 순서가 혼란스럽습니다. 폼은 빠른 완료가 중요하지 공간 절약이 목적이 아니죠. Q3. 한 줄에 두 항목을 둬도 되나요? 밀접한 짧은 쌍(시/도+구/군, 년/월/일)만 예외적으로요. 기본은 단일 열이고 묶음은 신중하게 씁니다.

6. 마무리

BP-070의 메시지:

한 줄에 하나씩 위에서 아래로 — 입력 폼을 단일 열에 수직으로 정렬하라.

좌우 배치는 시선이 갈팡질팡하고 순서가 혼란스러우며 모바일에서 깨집니다. 단일 열 수직 정렬로 자연스러운 흐름·분명한 순서·반응형을 잡는 게 핵심이죠. 다음 편은 충분한 간격입니다.

다음 편 예고 ▶ 「637. (BP-071) 입력폼과 입력폼, 콘텐츠와 콘텐츠 사이에 충분한 간격을 제공하고 있다.」

ViewCheck는 입력 폼이 단일 열 수직 정렬로 구성되는지를 진단합니다.

📚 참고 출처

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

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

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