빽빽하면 헷갈린다

KRDS BP-071 — 입력폼과 입력폼, 콘텐츠와 콘텐츠 사이에 충분한 간격을 제공하고 있다.

0. 들어가며 — 필드가 다닥다닥 붙어 있으면

이번 637편은 입력폼과 입력폼, 콘텐츠와 콘텐츠 사이에 충분한 간격을 제공하라는 규칙입니다.

입력 필드가 — 다닥다닥 붙어 있으면, 어느 레이블이 어느 필드 것인지 헷갈리고 답답하죠. BP-071은 폼 요소 사이에 충분한 간격을 두라고 규정합니다. 간격 토큰(DS)·터치 타겟의 폼 적용이죠. 이번 편을 풀어냅니다.

1. 원문 — 충분한 간격 제공

BP-071 (기본 패턴 > 입력 폼) “입력폼과 입력폼, 콘텐츠와 콘텐츠 사이에 충분한 간격을 제공하고 있다.”

입력 폼 요소와 콘텐츠 사이에 충분한 간격을 제공하라는 뜻입니다.

정리: 입력 폼 요소 사이에 충분한 간격을 두라. 이게 BP-071입니다.

2. 왜 충분한 간격인가

입력 폼은 여러 필드·레이블·버튼으로 구성됩니다. 이들이 너무 붙어 있으면(빽빽하면), 여러 문제가 생기죠. BP-071은 충분한 간격을 요구합니다.

간격이 부족할 때의 문제:

레이블-필드 혼동 필드와 레이블이 빽빽하면, 어느 레이블이 어느 필드 것인지 헷갈립니다. 위 필드의 레이블 인지 아래 필드 레이블인지 모호하죠(근접성 원리 깨짐).

답답함·실수 요소가 다닥다닥 붙으면, 시각적으로 답답하고 잘못된 필드를 클릭·터치하기 쉽습니다. 특히 모바일에서 작은 간격은 오터치를 부르죠.

그룹 구분 어려움 — 관련 항목 묶음(섹션) 간 — 간격이 없으면, 어디까지가 한 그룹인지 안 보입니다.

그래서 BP-071은 — 충분한 간격을 제공하라고 합니다:

필드 간 간격 입력 필드와 다음 필드 사이에, 충분한 수직 간격을요. 각 필드가 독립적으로 보이고, 레이블이 어느 필드 것인지 분명하게요.

레이블-필드 근접 레이블과 그 필드는 가깝게(한 쌍으로 묶이게), 다른 필드와는 떨어뜨립니다. 근접성으로 ’이 레이블은 이 필드 것’을 시각적으로 알리죠(BP-074 레이블).

그룹 간 간격 관련 항목 묶음(섹션) 사이에는 더 큰 간격이나 구분선을요. 그룹 경계를 보이게 합니다(BP-079 섹션 제목과 함께).

터치 타겟 간격 — 모바일에선 — 필드·버튼 사이에 충분한 간격으로, 오터치를 막습니다(터치 타겟 44px·간격).

간격 시스템(DS) 활용. 간격은 디자인 시스템의 간격 토큰(8pt 그리드 등)을 일관되게 적용합니다(DS 레이아웃·간격 규칙). 들쭉날쭉이 아니라 일관된 간격 체계로요. 시각적 리듬과 질서가 생기죠.

근접성의 원리. 게슈탈트 ‘근접성’ 원리: 가까운 것은 한 그룹으로, 먼 것은 다른 그룹으로 인식됩니다. 폼에서 레이블-필드는 가깝게, 필드-필드는 적당히, 그룹-그룹은 멀게 이 간격 위계가 구조를 드러내죠.

이 규칙은 입력 폼의 ’간격·여백’을 담당합니다 — 폼 요소 사이에 충분한 간격을 둬(071), 레이블-필드 관계를 분명히 하고 답답함·오터치를 막죠. 단일 열(BP-070)과 함께 깔끔한 폼 레이아웃을 만듭니다.

정리하면 — 폼 요소가 빽빽하면 레이블-필드가 헷갈리고 답답하며 오터치가 생기므로, 필드 간·레이블-필드·그룹 간에 충분 하고 일관된 간격을 제공해야 합니다.

3. 점검 / 개선

무엇을 점검하나

필드 간 간격 — 입력 필드 사이에 충분한 수직 간격이 있는가.

레이블-필드 근접 — 레이블이 그 필드와 가깝고 다른 필드와 떨어지는가.

그룹 간격 — 항목 묶음(섹션) 사이에 더 큰 간격·구분이 있는가.

개선 방향

필드 간 충분한 간격, 레이블-필드 근접(근접성), 그룹 간 큰 간격.

간격 토큰(8pt 그리드) 일관 적용. 모바일 터치 간격 확보.

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

역할	책임
디자이너	폼 간격 체계 설계
퍼블리셔	간격 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 입력 필드 사이에 충분한 수직 간격이 있나요?

□ 레이블이 그 필드와 가깝고 다른 필드와 떨어지나요?

□ 항목 묶음(섹션) 사이에 더 큰 간격·구분이 있나요?

❓ FAQ

Q1. 간격이 부족하면 뭐가 문제인가요? 레이블이 어느 필드 것인지 헷갈리고, 답답하며, 잘못된 필드를 클릭·터치하기 쉽습니다. 특히 모바일 오터치가 생기죠. Q2. 레이블과 필드는 얼마나 가깝게요? 레이블-필드는 한 쌍으로 가깝게, 다른 필드와는 떨어뜨립니다. 근접성으로 ’이 레이블은 이 필드 것’을 알리죠(BP-074). Q3. 간격을 어떻게 정하나요? 디자인 시스템의 간격 토큰(8pt 그리드)을 일관 적용합니다. 들쭉날쭉이 아니라 위계 있는 일관 간격으로요.

6. 마무리

BP-071의 메시지:

빽빽하면 헷갈린다 — 입력 폼 요소 사이에 충분한 간격을 제공하라.

폼 요소가 빽빽하면 레이블-필드가 헷갈리고 답답하며 오터치가 생깁니다. 필드 간·레이블-필드·그룹 간 충분하고 일관된 간격으로 관계를 분명히 하는 게 핵심이죠. 다음 편은 액션 버튼 일관 배치입니다.

다음 편 예고 ▶ 「638. (BP-072) 액션 버튼은 일관된 위치에 배치하고 정렬하고 있다.」

ViewCheck는 입력 폼 요소 사이에 충분한 간격이 제공되는지를 진단합니다.

📚 참고 출처

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

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

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