적을 만큼의 너비

KRDS CP-399 — 입력 필드는 텍스트의 길이를 고려하여 적절한 크기로 제공하고 있다.

0. 들어가며 — 긴 값을 좁은 칸에 적으면

이번 519편부터 텍스트 입력 필드(Text input) 그룹입니다(7개). 첫 규칙은 입력 필드를 텍스트 길이를 고려하여 적절한 크기로 제공하라는 규칙입니다.

텍스트 입력 필드는 — 한 줄의 짧은 값(이름, 이메일, 전화번호 등)을 받는 입력창입니다. 이 필드 너비가 — 받을 값 길이에 비해 너무 좁으면, 사용자가 입력한 값을 한눈에 못 보죠. CP-399는 입력 필드 크기를 규정합니다. 텍스트 영역 CP-393의 텍스트 입력 버전이죠. 이번 편을 풀어냅니다.

1. 원문 — 텍스트 길이 고려한 적절한 크기

CP-399 (컴포넌트 > 텍스트 입력 필드) “입력 필드는 텍스트의 길이를 고려하여 적절한 크기로 제공하고 있다.”

텍스트 입력 필드를, 받을 값의 예상 길이를 고려해 적절한 너비로 제공하라는 뜻입니다.

정리: 입력 필드를 받을 값 길이에 맞는 적절한 너비로 제공하라. 이게 CP-399입니다.

2. 왜 적절한 크기인가

텍스트 입력 필드(<input type="text">)는 한 줄의 짧은 값을 받는 입력창입니다(여러 줄 텍스트 영역과 다름). 이름, 이메일, 전화번호, 우편번호, 카드번호 등 한 줄 값을 받죠. 이 필드의 너비가 받을 값 길이에 맞아야, 사용자가 입력한 값을 한눈에 보고 확인합니다.

너비가 부적절할 때:

너무 좁을 때 긴 값(이메일, 카드번호)을 받는데 필드가 너무 좁으면, 입력한 값이 필드 안에서 가로로 넘쳐 일부만 보입니다. 사용자는 자기가 적은 전체 값을 한눈에 못 보고, 좌우로 스크롤하며 확인해야 하죠. 오타·자릿수 실수를 발견하기 어렵습니다.

길이 힌트 역할 필드 너비는 받을 값의 길이 힌트도 됩니다. 우편번호 칸이 짧으면 ‘짧은 숫자’, 이메일 칸이 길면 ’긴 텍스트’를 받는다는 시각적 신호죠. 너비가 값 길이와 안 맞으면 이 힌트가 잘못 전달됩니다(짧은 우편번호 칸이 화면 끝까지 길면 어색).

너무 넓을 때 — 짧은 값(우편번호 5자리)을 받는데 — 필드가 화면 끝까지 길면, 빈 공간이 많아 어색하고 ‘많이 적어야 하나?’ 헷갈립니다.

그래서 CP-399는 — 입력 필드를 받을 값 길이에 맞는 적절한 너비로 제공하라고 합니다:

값 길이 반영 — 받을 값의 예상 길이에 맞춰 너비를 정합니다. 우편번호(5~6자)는 짧게, 이메일·주소는 길게요. 값을 한눈에 보게요.

길이 힌트 활용 — 필드 너비로 — ’이 칸엔 이 정도 길이의 값을 적는구나’를 시각적으로 암시합니다. 적절한 너비가 입력 가이드 역할을 하죠.

반응형. 모바일 등 좁은 화면에선 — 입력 필드가 화면 폭에 맞춰 조정되되, 받을 값을 적절히 보이게 합니다. 데스크톱 의 고정 너비와 모바일의 유연한 너비를 함께 고려하죠.

여러 필드 정렬. 폼에 여러 입력 필드가 있으면 — 각 필드 너비를 값 길이에 맞추되, 전체 폼이 정돈돼 보이게 정렬합니다. 너비가 제각각이어도 — 의미 있는 차이(우편번호 짧고 주소 길고)면 자연스럽죠.

이 규칙은 텍스트 입력 필드의 ’입력 편의·가이드’를 담당합니다 — 받을 값 길이에 맞는 너비로(399), 사용자가 입력값을 한눈에 보고 길이 힌트도 얻게 하죠. 텍스트 영역 크기(CP-393)와 같은 정신이되, 한 줄 값에 맞춘 것입니다. 이후 텍스트 입력 규칙들(레이블·복붙·자동완성·대비·초점·접근성)이 이 위에 쌓입니다.

정리하면 — 입력 필드가 받을 값에 비해 너무 좁으면 입력값을 한눈에 못 보고 길이 힌트도 잘못 주므로, 예상 값 길이를 고려한 적절한 너비로 제공해야 합니다.

3. 점검 / 개선

무엇을 점검하나

적절한 너비 — 입력 필드가 받을 값 길이에 맞는 너비인가.

한눈에 보임 — 입력한 값이 가로 스크롤 없이 한눈에 보이는가.

길이 힌트 — 필드 너비가 값 길이 힌트 역할을 하는가(우편번호 짧고 이메일 길고).

개선 방향

받을 값 길이에 맞춰 필드 너비 설정(우편번호 짧게, 이메일·주소 길게).

입력값이 한눈에 보이게. 반응형에서 화면 폭 맞춤. 너비로 길이 가이드.

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

역할	책임
디자이너	입력 필드 너비 정의
퍼블리셔/개발	너비·반응형 구현

기관 유형	CP-399 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (텍스트 입력 사용 시)

텍스트 입력 폼을 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 입력 필드가 받을 값 길이에 맞는 너비인가요?

□ 입력한 값이 가로 스크롤 없이 한눈에 보이나요?

□ 필드 너비가 값 길이 힌트 역할을 하나요(우편번호 짧고 이메일 길고)?

❓ FAQ

Q1. 텍스트 입력과 텍스트 영역 차이가 뭔가요? 텍스트 입력(input)은 한 줄 짧은 값(이름·이메일), 텍스트 영역 (textarea)은 여러 줄 긴 글입니다. Q2. 모든 필드를 같은 너비로 하면 안 되나요? 값 길이가 다른데 같은 너비면 어색하고 힌트가 안 됩니다. 우편번호는 짧게, 주소는 길게 맞추죠. Q3. 너비가 길이 힌트가 되나요? 네. 짧은 칸은 짧은 값, 긴 칸은 긴 값을 받는다는 시각적 신호죠. 값 길이와 맞춰야 이 힌트가 맞습니다.

6. 마무리

CP-399의 메시지:

적을 만큼의 너비 — 입력 필드를 받을 값 길이에 맞는 적절한 너비로 제공하라.

입력 필드가 받을 값에 비해 너무 좁으면 입력값을 한눈에 못 보고 길이 힌트도 잘못 줍니다. 예상 값 길이에 맞는 너비로 제공하는 게 핵심이죠. 다음 편은 입력 필드 레이블·플레이스홀더입니다.

다음 편 예고 ▶ 「520. (CP-400) 모든 텍스트 입력 필드에는 레이블을 제공하고, 도움말의 대체 수단으로 플레이스 홀더를 사용하고 있지 않다.」

ViewCheck는 텍스트 입력 필드가 적절한 크기로 제공되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 텍스트 입력 필드(Text input) 가이드 — https://www.krds.go.kr/html/site/component/component_40.html

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

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