입력 필드의 정해진 구조

KRDS DS-074 — 텍스트 입력 필드는 레이블, 부가 설명, 입력 박스, 시스템 메시지 순으로 정렬하고, 각 요소 간의 간격인 gap-3(8px)과 입력 박스의 패딩값인 padding-6(16px)를 유지하여 사용하고 있다.

0. 들어가며 — 레이아웃의 마지막, 입력 필드 구조

레이아웃 24개 규칙의 마지막입니다. 그리고 이 마지막은 폼의 핵심 — 텍스트 입력 필드의 구조와 간격입니다.

입력 필드는 그냥 입력칸 하나가 아닙니다. 레이블(이름표) → 부가 설명 → 입력 박스 → 시스템 메시지(오류 등) 라는 여러 요소로 구성되죠. DS-074는 이 요소들의 정렬 순서와 간격(gap-3=8px), 패딩(padding-6=16px) 까지 못 박습니다. 폼의 가장 기본 단위인 입력 필드를 완전히 표준화하는 규칙이죠. 이번 편으로 레이아웃을 마무리합니다.

1. 규칙 원문 — 순서와 값

DS-074 (디자인 스타일 > 레이아웃) “텍스트 입력 필드는 레이블, 부가 설명, 입력 박스, 시스템 메시지 순으로 정렬하고, 각 요소 간의 간격인 gap-3(8px) 과 입력 박스의 패딩값인 padding-6(16px) 를 유지하여 사용하고 있다.”

정렬 순서

① 레이블 → ② 부가 설명 → ③ 입력 박스 → ④ 시스템 메시지 순으로 위에서 아래로 배치합니다.

간격과 패딩

요소 사이 간격: gap-3(8px)

입력 박스 안쪽 패딩: padding-6(16px)

정리: 입력 필드는 레이블→설명→박스→메시지 순으로, 요소 간 8px, 박스 패딩 16px로 구성하라. 이게 DS-074입니다.

2. 왜 이 순서인가 — 읽고 입력하는 흐름

레이블→설명→박스→메시지 순서에는 사용자의 인지·입력 흐름이 반영돼 있습니다.

레이블 — 먼저 “무엇을 입력하는 칸인가”(예: ‘이메일’)를 알려줍니다. 가장 위에 와야 사용자가 입력 전에 인지하죠.

부가 설명 — 그 다음 “어떻게 입력하는가”(예: ‘회사 이메일을 입력하세요’)를 안내합니다. 입력 전에 읽어야 하므로 박스 위에 옵니다.

입력 박스 — 실제 입력하는 칸입니다.

시스템 메시지 — 입력 후 결과(오류·확인)를 알립니다. 입력 다음에 와야 자연스럽죠.

이 순서는 ’인지 → 안내 → 입력 → 피드백’이라는 자연스러운 흐름입니다. 만약 순서가 뒤섞이면(예: 설명이 박스 아래) 사용자가 입력하고 나서야 설명을 보게 되어 비효율적이죠. 정해진 순서는 모든 입력 필드가 같은 흐름을 갖게 해, 사용자가 폼을 예측 가능하게 작성하게 합니다. 또 이 순서는 접근성(스크린리더 읽기 순서) 에도 맞아, 보조기기 사용자도 자연스러운 흐름으로 입력하죠.

그리고 요소 간 간격 8px(gap-3), 박스 패딩 16px(padding-6)은 이 구성을 표준화합니다. 레이블·설명·박스·메시지가 적절히 가까이(8px, 근접성) 묶여 ’하나의 입력 필드’로 보이고, 박스 안쪽은 16px 패딩으로 입력 텍스트가 가장 자리에 붙지 않죠. 모든 입력 필드가 같은 구조·간격을 가져, 폼 전체가 일관됩니다.

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

흔한 위반 패턴

함정 ① 순서 뒤섞임. 설명이 박스 아래, 레이블이 박스 옆 등 → 흐름 깨짐. → 정해진 순서. 함정 ② 임의 간격. 요소 간격이 제각각 → 불일치. → gap-3(8px). 함정 ③ 박스 패딩 부족. 입력 텍스트가 박스 가장자리에 붙음 → 답답. → padding-6(16px).

무엇을 점검하나

정렬 순서 — 레이블→설명→박스→메시지 순인가.

요소 간격 — 요소 사이가 gap-3(8px)인가.

박스 패딩 — 입력 박스 패딩이 padding-6(16px)인가.

Before / After

/* ✅ 입력 필드 구조 */ .field { display: flex; flex-direction: column; gap: 8px; } /* gap-3 */ .field .label { /* ① 레이블 */ } .field .desc { /* ② 부가 설명 */ } .field .input { padding: 16px; /* padding-6, ③ 입력 박스 */ } .field .message { /* ④ 시스템 메시지 */ }

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

역할	책임
디자이너	입력 필드 구조·간격 설계
퍼블리셔/개발	정렬 순서·간격·패딩 구현
기획/UX	레이블·설명·메시지 문구 작성

기관 유형	DS-074 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수

텍스트 입력 필드가 있는 모든 사이트 = 해당. 신청·로그인 폼이 있으면 적용됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 입력 필드가 레이블→설명→박스→메시지 순인가요?

□ 요소 간격이 8px(gap-3) 인가요?

□ 입력 박스 패딩이 16px(padding-6) 인가요?

□ 설명이 입력 전에(박스 위에) 오나요?

❓ FAQ

Q1. 부가 설명이 꼭 박스 위여야 하나요? 네. 입력 전에 읽어야 하는 안내라 박스 위가 자연스럽습니다. 박스 아래 두면 입력하고 나서야 보게 됩니다. Q2. 시스템 메시지가 박스 아래인 이유는? 입력 결과(오류·확인)는 입력 다음에 오는 피드백이라 박스 아래가 자연스럽습니다. Q3. 간격 8px이 너무 좁지 않나요? 레이블·설명·박스·메시지는 ’하나의 입력 필드’를 이루는 한 그룹이라, 가까이(8px) 묶어야 한 세트로 보입니다(근접성). Q4. KRDS를 채택하면 자동인가요? KRDS 텍스트 입력 컴포넌트는 이 구조·간격·패딩으로 설계돼 있습니다.

6. 마무리 — 레이아웃 24개 규칙을 마치며

DS-074의 메시지로 레이아웃을 닫습니다.

입력 필드는 정해진 순서(레이블→설명→박스→메시지)와 간격(8px·16px)으로 — 일관된 입력 경험을 위해.

입력 필드의 정렬 순서는 ’인지→안내→입력→피드백’의 자연스러운 흐름을 따르고, 표준 간격·패딩은 모든 필드를 일관되게 만듭니다. 폼의 가장 기본 단위가 표준화되면, 폼 전체가 예측 가능하고 작성하기 쉬워지죠.

여기까지 레이아웃 24개 규칙(051~074) 을 모두 마쳤습니다. 스크린 마진·그리드·브레이크포인트·콘텐츠 너비·8포인트 간격·컴포넌트별 gap 토큰·입력 필드 구조까지, 화면의 배치와 여백을 체계로 다루는 법을 정리 했습니다. 색상(26)·타이포(16)·형태(8)·레이아웃(24) 까지, 디자인 스타일 74개가 완성됐습니다.

다음 편부터는 디자인 스타일의 다섯 번째 분류, 아이콘(22개 규칙) 으로 넘어갑니다. DS-075 — “시스템 아이콘은 SVG 파일 형식을 사용한다.” 아이콘의 파일 형식부터 시작합니다.

다음 편 예고 ▶ 「075. 시스템 아이콘은 SVG 파일 형식을 사용하고 있다.」

ViewCheck는 입력 필드가 정해진 순서·간격·패딩으로 구성됐는지를 진단합니다.

📚 참고 출처

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

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

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