가로로 나란한 입력 요소는 16px

KRDS DS-069 — 인풋과 인풋, 카드, 셀렉트 등 가로형으로 조합할 경우의 사이 간격은 gap-5(16px) 토큰을 사용하고 있다.

0. 들어가며 — 폼 요소의 간격

지금까지 카드 간격을 봤습니다. 이번 69편부터는 폼(form) 요소 — 인풋(입력 필드)·셀렉트 등의 간격입니다. 그 첫 주제가 가로형 조합의 간격 — gap-5(16px)입니다.

폼에서 입력 요소들이 가로로 나란히 놓이는 경우가 있습니다 — 예를 들어 ’생년월일’을 연/월/일 세 입력칸으로, 또는 인풋과 셀렉트를 한 줄에. 이렇게 가로로 조합할 때 요소 사이 간격을 KRDS는 gap-5(16px) 로 못 박습니다. 이번 편은 가로형 폼 간격 표준값을 풀어냅니다.

1. 규칙 원문 — 가로 조합 16px

DS-069 (디자인 스타일 > 레이아웃) “인풋과 인풋, 카드, 셀렉트 등 가로형으로 조합할 경우의 사이 간격은 gap-5(16px) 토큰을 사용하고 있다.”

“gap-5(16px)”

8포인트 그리드 기반 간격 토큰 중 16px 단계입니다(8×2).

“가로형으로 조합”

입력 요소(인풋·셀렉트·카드 등)를 가로로 나란히 놓는 경우입니다.

정리: 가로로 나란한 입력 요소 사이 간격은 gap-5(16px)로 하라. 이게 DS-069입니다.

2. 왜 가로 조합은 16px인가

가로로 나란한 입력 요소 사이 간격 16px(gap-5)은 적정한 값입니다. 너무 좁으면(8px) 요소들이 붙어 구분이 어렵고, 너무 넓으면(24px+) 한 그룹(예: 생년월일)인데 따로 떨어져 보이죠. 16px은 가로 요소들이 적절히 구분되면서도 한 줄의 그룹으로 묶여 보이는 균형값입니다.

카드 간격(24px, 67편)보다 좁은 데는 이유가 있습니다. 가로로 조합되는 입력 요소들은 보통 하나의 의미 그룹(연/월/일, 검색어+버튼 등)을 이룹니다. 이들은 카드처럼 독립적이기보다 함께 작동하는 한 세트라, 더 가까이(16px) 두어 ’한 그룹’임을 보여주는 것이죠. 근접성(66편) 원리입니다 — 함께 작동하는 것은 가깝게. 독립적인 카드는 24px, 한 세트인 가로 입력은 16px로 차등하는 것입니다.

이렇게 컴포넌트 종류·관계에 따라 간격을 정하는 것이 KRDS 간격 토큰 체계입니다. 카드 24px, 가로 입력 16px처럼, ’무엇 사이의 간격인가’에 따라 8포인트 그리드 토큰에서 적정값을 정해 두죠. 그러면 디자이너·개발자가 ’가로 입력 간격은 16px’을 고민 없이 적용할 수 있습니다.

3. 흔한 위반 패턴 / 점검 / 개선

흔한 위반 패턴

함정 ① 임의 간격. 가로 입력 사이를 12px·20px 등으로 → 표준 미준수. → gap-5(16px). 함정 ② 과한 간격. 한 그룹 입력을 너무 떨어뜨림 → 그룹감 상실. → 16px.

무엇을 점검하나

가로 입력 간격 — 가로 조합 입력 사이가 16px(gap-5)인가.

그룹감 — 한 세트 입력이 적절히 묶여 보이는가.

Before / After

/* ✅ 가로 입력 조합 gap-5(16px) */ .input-row { display: flex; gap: 16px; } /* 인풋+인풋+셀렉트 등 */

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

역할	책임
퍼블리셔/개발	가로 입력 간격을 gap-5(16px)로 구현

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

가로 조합 폼이 있는 사이트 = 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 가로로 나란한 입력 요소 간격이 16px(gap-5) 인가요?

□ 한 그룹 입력이 적절히 묶여 보이나요?

□ 간격이 토큰으로 관리되나요?

❓ FAQ

Q1. 왜 카드(24px)보다 좁나요? 가로 조합 입력은 보통 한 의미 그룹(연/월/일 등)이라, 더 가까이(16px) 둬서 ’한 세트’임을 보여줍니다. 독립적인 카드는 24px로 더 떨어뜨립니다.

Q2. 세로 조합은요? 세로 조합은 입력 크기에 따라 16~24px입니다(DS-070). 가로는 16px 고정, 세로는 범위입니다.

Q3. KRDS를 채택하면 자동인가요? KRDS 폼 컴포넌트는 가로 조합 간격이 gap-5(16px)로 정의돼 있습니다. 채택하면 DS-069가 충족됩니다.

6. 마무리 — 가로 입력은 16px

DS-069의 메시지는 폼 간격 표준을 담습니다.

가로로 나란한 입력 요소는 gap-5(16px) — 함께 작동하는 한 세트는 가깝게.

가로 조합 입력은 보통 한 의미 그룹이라, 카드(24px)보다 가까운 16px로 묶어 ’한 세트’임을 보여줍니다. 근접성 원리에 따라 컴포넌트 관계에 맞는 간격을 정하는 것이죠. 토큰 규칙 덕에 ’가로 입력 16px’을 일관 적용할 수 있습니다.

다음 편은 세로 조합 입력 간격을 다룹니다. DS-070 — “인풋과 인풋을 세로형으로 조합하는 경우는 인풋 사이즈에 따라 gap-5gap-7(1624px) 토큰을 사용한다.” 세로 폼 간격의 범위를 살펴봅니다.

다음 편 예고 ▶ 「070. 인풋과 인풋을 세로형으로 조합하는 경우는 인풋의 사이즈에 따라 gap-5gap-7(16px24px)의 토큰을 사용하고 있다.」

우리 사이트의 가로 폼 간격이 표준인지 확인하려면? ViewCheck는 가로 조합 입력 간격이 gap-5(16px)인지를 진단합니다.

📚 참고 출처

KRDS 레이아웃(Layout)·디자인 토큰 가이드 — https://www.krds.go.kr/html/site/style/style_04.html

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

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