세로 입력은 크기에 따라 16~24px

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

0. 들어가며 — 세로 폼 간격의 범위

지난 69편에서 가로 입력 간격(gap-5, 16px)을 봤습니다. 이번 70편은 세로형 입력 조합의 간격 — 인풋 크기에 따라 gap-5gap-7(1624px) 입니다.

폼에서 입력칸들이 세로로 쌓이는 경우(일반적인 신청서)가 많죠. 이때 입력칸 사이 간격을 입력칸 크기에 따라 16px에서 24px 사이로 조정합니다. 가로(고정 16px)와 달리, 세로는 범위를 두는 것이죠. 이번 편은 세로 폼 간격의 비례 원리를 풀어냅니다.

1. 규칙 원문 — 크기에 따른 범위

DS-070 (디자인 스타일 > 레이아웃) “인풋과 인풋을 세로형으로 조합하는 경우는 인풋의 사이즈에 따라 gap-5gap-7(16px24px) 의 토큰을 사용하고 있다.”

세로로 쌓인 입력칸 사이 간격을 입력칸 크기에 따라 16px(gap-5)에서 24px(gap-7) 사이로 정하라는 뜻입니다.

정리: 세로 입력 조합 간격은 입력칸 크기에 따라 16~24px로 비례 조정하라. 이게 DS-070입니다.

2. 왜 크기에 따라 16~24px인가

가로 입력은 16px 고정인데, 세로 입력은 왜 범위(16~24px)일까요? 입력칸 크기에 비례해야 하기 때문입니다.

세로로 쌓인 입력칸들은 크기가 다양합니다 — 작은 입력칸(짧은 텍스트), 큰 입력칸(여러 줄 텍스트 영역) 등. 작은 입력칸들 사이는 16px이 적당하지만, 큰 입력칸들 사이는 24px이 더 자연스럽습니다. 큰 요소에는 큰 간격을 (레디어스 비례 48편처럼) 두어야 균형이 맞죠. 그래서 입력칸 크기에 따라 16~24px 범위에서 조정합니다.

이는 ’간격이 요소 크기에 비례한다’는 원리입니다(레디어스 DS-048, 간격 일반). 작은 것에는 작은 간격, 큰 것에는 큰 간격. 세로 폼에서 입력칸 크기가 다양하므로 범위를 두어 비례 조정하는 것이죠. 단, 그 범위도 8포인트 그리드 토큰(gap-5~gap-7, 16·24px) 안에서 정해, 일관성을 유지합니다. 비례하되 정해진 토큰에서 고르는 것 입니다.

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

흔한 위반 패턴

함정 ① 일률적 간격. 입력 크기 무관 같은 간격 → 큰 입력에 부족 또는 작은 입력에 과함. → 크기 비례. 함정 ② 범위 밖. 16px 미만 또는 24px 초과 → 표준 미준수. → gap-5~gap-7.

무엇을 점검하나

세로 입력 간격 — 1624px(gap-5gap-7) 범위인가.

크기 비례 — 입력칸 크기에 따라 간격이 조정되는가.

Before / After

/* ✅ 세로 입력 조합 — 크기에 따라 16~24px */ .form-vertical-small { display: flex; flex-direction: column; gap: 16px; } /* 작은 입력 */ .form-vertical-large { display: flex; flex-direction: column; gap: 24px; } /* 큰 입력 */

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

역할	책임
퍼블리셔/개발	세로 입력 간격을 크기에 따라 16~24px로 구현

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

세로 폼이 있는 사이트 = 해당. 신청·로그인 폼이 있으면 대부분 적용됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 세로 입력 간격이 1624px(gap-5gap-7) 범위인가요?

□ 입력칸 크기에 따라 간격이 조정되나요?

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

❓ FAQ

Q1. 왜 가로는 고정(16px)인데 세로는 범위(16~24px)인가요? 세로로 쌓인 입력칸은 크기가 다양해(작은 칸~큰 텍스트영역), 크기에 비례한 간격이 필요합니다. 가로는 보통 한 그룹이라 16px 고정이 적당하지만, 세로는 크기 비례로 조정합니다.

Q2. 어떤 크기에 어떤 간격인가요? 작은 입력은 16px(gap-5), 큰 입력은 24px(gap-7) 쪽입니다. 입력칸이 클수록 간격도 큰 단계로요.

Q3. KRDS를 채택하면 자동인가요? KRDS 폼 컴포넌트는 입력 크기별 세로 간격이 정의돼 있습니다. 채택하면 DS-070이 충족됩니다.

6. 마무리 — 세로 입력은 크기에 비례

DS-070의 메시지는 비례 간격을 담습니다.

세로 입력 간격은 입력칸 크기에 따라 16~24px — 큰 요소엔 큰 간격을, 단 토큰 안에서.

세로로 쌓인 입력칸은 크기가 다양해, 크기에 비례한 간격(16~24px)이 균형을 맞춥니다. 작은 입력은 좁게, 큰 입력은 넓게요. 비례하되 8포인트 그리드 토큰(gap-5~gap-7) 안에서 정해 일관성을 유지합니다. 이는 레디어스 비례(48편)와 같은 ‘크기에 맞는 값’ 원리입니다.

다음 편은 체크박스·라디오 버튼의 간격을 다룹니다. DS-071 — “체크박스나 라디오 버튼을 리스트 형태로 사용 시 컴포넌트 사이즈에 따라 gap5-gap7(16-24px) 토큰을 사용한다.” 선택 컨트롤 리스트의 간격을 살펴봅니다.

다음 편 예고 ▶ 「071. 체크박스나 라디오 버튼을 리스트 형태로 사용 시 컴포넌트 사이즈에 따라 gap5-gap7(16px-24px)의 토큰을 사용하고 있다.」

우리 사이트의 세로 폼 간격이 표준인지 확인하려면? ViewCheck는 세로 입력 간격이 크기에 따라 16~24px로 적용됐는지를 진단합니다.

📚 참고 출처

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

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

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