몇 자까지인지, 얼마나 남았는지

KRDS CP-396 — 입력 가능한 글자 수에 제한이 있는 경우 제한 글자 수 정보를 제공하고 있다.

0. 들어가며 — 다 썼는데 글자 수 초과라면

이번 516편은 입력 가능한 글자 수에 제한이 있는 경우 제한 글자 수 정보를 제공하라는 규칙입니다.

텍스트 영역에 — 글자 수 제한(예: 500자 이내)이 있는데 그걸 안 알려주면, 사용자는 한참 쓴 뒤 ‘글자 수 초과’ 오류를 만나 좌절하죠. CP-396은 제한 글자 수와 남은 글자 수 정보를 제공하라고 규정합니다. 오류 예방 정신이죠. 이번 편을 풀어냅니다.

1. 원문 — 제한 글자 수 정보 제공

CP-396 (컴포넌트 > 텍스트 영역) “입력 가능한 글자 수에 제한이 있는 경우 제한 글자 수 정보를 제공하고 있다.”

텍스트 영역에 입력 글자 수 제한이 있을 때, 그 제한 글자 수(와 현재/남은 글자 수) 정보를 사용자에게 제공하라는 뜻입니다.

정리: 글자 수 제한이 있으면 그 정보를 제공하라. 이게 CP-396입니다.

2. 왜 글자 수 제한 정보인가

텍스트 영역에는 — 종종 입력 글자 수 제한이 있습니다(예: ‘500자 이내’, ‘최대 1,000자’). 데이터 저장 한계, 요약 유도 등의 이유죠. 이 제한이 있는데 — 사용자에게 안 알려주면 문제가 생깁니다.

글자 수 정보가 없을 때:

초과 후 좌절 사용자가 제한을 모른 채 길게 쓰다가, 제출 시(또는 입력이 막힐 때) ‘글자 수 초과’ 오류를 만나면 좌절합니다. 애써 쓴 글을 줄여야 하죠. 어디를 줄여야 할지 막막하고, 길게 쓴 게 헛수고가 됩니다.

얼마나 더 쓸지 모름 — 제한을 알아도 — 지금 몇 자 썼고 얼마나 남았는지 모르면, 분량 조절이 어렵습니다.

입력 막힘 혼란 — 제한에 도달해 더 입력이 안 되는데 — 왜 안 되는지 모르면, ‘키보드가 고장났나?’ 당황하죠.

그래서 CP-396은 — 글자 수 제한이 있으면 그 정보를 제공하라고 합니다:

제한 글자 수 표시 입력 전·중에 ’최대 500자’처럼 제한을 명시합니다. 사용자가 ’아, 500자까지구나’를 알고 분량을 조절하죠.

현재/남은 글자 수 카운터 입력하는 동안 ‘120 / 500’ 또는 ‘380자 남음’ 같은 실시간 카운터를 보여 줍니다. 사용자가 지금 몇 자 썼고 얼마나 남았는지 실시간으로 알며 쓰죠. 이게 가장 효과적입니다.

초과 임박 경고 — 제한에 가까워지면(예: 90% 도달) — 카운터 색을 바꾸거나 경고해, 사용자가 마무리하게 안내하죠.

예방 중심. 핵심은 — 글자 수 초과 오류가 나기 전에 정보를 줘 예방하는 것입니다(오류 예방, WCAG 3.3.2 정신). 다 쓴 뒤 ’초과입니다’라고 하기보다 — 쓰는 동안 카운터로 분량을 알려, 사용자가 알아서 조절하게요.

접근성 스크린 리더에도. 글자 수 카운터는 시각적으로만이 아니라 스크린 리더 사용자에게도 전달돼야 하죠. 다만 매 글자마다 카운터가 읽히면 방해되니, aria-live="polite"로 적절히(예: 제한 임박 시) 알리거나, 카운터를 aria-describedby로 연결해 필요시 확인하게 합니다. 제한 자체는 레이블·도움말에 명시해 처음부터 알게 하고요.

maxlength 주의. HTML maxlength 속성으로 입력을 제한 글자 수에서 막을 수 있죠. 단, maxlength만으로 말없이 막으면 사용자가 왜 더 안 써지는지 모릅니다. maxlength + 카운터·안내를 함께 둬, 막히는 이유를 알게 합니다. 또 붙여넣기가 잘리는 경우도 안내하면 좋고요(복붙 허용 CP-395와 함께).

이 규칙은 텍스트 영역의 ’분량 안내’를 담당합니다 — 글자 수 제한·현재·남은 수를 알려(396), 사용자가 분량을 조절 하며 초과 좌절 없이 작성하게 하죠. 오류를 예방하는 배려입니다.

정리하면 — 글자 수 제한을 안 알리면 사용자가 길게 쓴 뒤 초과 오류에 좌절하므로, 제한 글자 수와 현재/남은 글자 수 정보(실시간 카운터)를 제공해 분량을 조절하게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

제한 표시 — 글자 수 제한(최대 N자)이 명시되는가.

실시간 카운터 — 현재/남은 글자 수가 실시간으로 표시되는가.

접근성 — 카운터가 스크린 리더에 적절히 전달되고, maxlength 막힘이 안내되는가.

개선 방향

제한 글자 수 명시 + 실시간 카운터(‘120/500’). 제한 임박 경고.

aria-live/aria-describedby로 스크린 리더 전달. maxlength + 안내 병행.

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

역할	책임
퍼블리셔/개발	글자 수 카운터·제한 안내 구현
콘텐츠/UX	제한·경고 문구

기관 유형	CP-396 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (글자 수 제한 텍스트 영역 시)

글자 수 제한이 있는 텍스트 영역을 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 글자 수 제한(최대 N자)이 명시되나요?

□ 현재/남은 글자 수가 실시간으로 표시되나요?

□ 카운터가 스크린 리더에 전달되고, maxlength 막힘이 안내되나요?

❓ FAQ

Q1. maxlength로 막으면 충분하지 않나요? 말없이 막으면 왜 더 안 써지는지 모릅니다. 카운터·안내를 함께 둬 이유를 알게 하죠. Q2. 카운터를 매 글자 스크린 리더가 읽으면 방해되지 않나요? 그래서 aria-live=“polite”로 적절히(제한 임박 등) 알리거나 필요시 확인하게 합니다. 매 글자 읽지 않죠. Q3. 왜 미리 알려야 하나요? 다 쓴 뒤 초과 오류에 좌절하지 않게, 쓰는 동안 분량을 조절하도록 예방하는 거죠.

6. 마무리

CP-396의 메시지:

몇 자까지인지, 얼마나 남았는지 — 글자 수 제한 정보와 실시간 카운터를 제공하라.

글자 수 제한을 안 알리면 사용자가 길게 쓴 뒤 초과 오류에 좌절합니다. 제한 글자 수와 현재/남은 수를 알려 분량을 조절하게 하는 게 핵심이죠. 다음 편은 텍스트 영역 명도 대비입니다.

다음 편 예고 ▶ 「517. (CP-397) 입력 영역과 인접 배경 간 명도 대비를 3:1 이상으로 준수하고 있다.」

ViewCheck는 글자 수 제한 정보가 제공되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 텍스트 영역(Textarea) 가이드 — https://www.krds.go.kr/html/site/component/component_39.html

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

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