쓸 만큼 넓게

KRDS CP-393 — 입력 영역을 텍스트의 길이를 고려하여 적절한 크기로 제공하고 있다.

0. 들어가며 — 긴 글을 좁은 칸에 쓰면

이번 513편부터 텍스트 영역(Textarea) 그룹입니다(6개). 첫 규칙은 입력 영역을 텍스트 길이를 고려하여 적절한 크기로 제공하라는 규칙입니다.

텍스트 영역은 — 여러 줄의 긴 글(문의 내용, 의견, 사유 등)을 받는 입력창입니다. 이 입력창이 — 받을 텍스트 양에 비해 너무 좁으면, 사용자가 자기가 쓴 글을 한눈에 못 보고 답답하죠. CP-393은 텍스트 영역 크기를 규정합니다. 이번 편을 풀어냅니다.

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

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

텍스트 영역을, 받을 텍스트의 예상 길이를 고려해 적절한 크기(높이·너비)로 제공하라는 뜻입니다.

정리: 텍스트 영역을 받을 글 길이에 맞는 적절한 크기로 제공하라. 이게 CP-393입니다.

2. 왜 적절한 크기인가

텍스트 영역(Textarea)은 여러 줄의 긴 텍스트를 받는 입력창입니다(한 줄짜리 텍스트 입력 필드와 다름). 문의 내용, 의견, 신청 사유, 자기소개 등 긴 글을 받죠. 이 입력창의 크기가 받을 텍스트 양에 맞아야, 사용자가 편하게 쓰고 검토합니다.

크기가 부적절할 때:

너무 작을 때 긴 글을 받는데 텍스트 영역이 두세 줄만 보이게 작으면, 사용자는 자기가 쓴 글을 한눈에 못 봅니다. 좁은 칸에서 위아래로 스크롤하며 써야 하고, 앞에 쓴 내용을 확인하려면 또 스크롤해야 하죠. 답답하고 실수(중복·맥락 놓침)가 늘어납니다.

너무 클 때 짧은 글을 받는데 텍스트 영역이 화면을 가득 채울 만큼 크면, 빈 공간이 많아 어색하고 사용 자가 ‘이렇게 많이 써야 하나?’ 부담을 느낄 수 있죠.

그래서 CP-393은 — 텍스트 영역을 받을 텍스트 길이에 맞는 적절한 크기로 제공하라고 합니다:

예상 길이 반영 받을 글의 예상 분량을 고려해 높이(보이는 줄 수)와 너비를 정합니다. 긴 글(의견·사유)은 여러 줄이 보이게 넉넉히, 짧은 글은 그에 맞게. 사용자가 쓰는 양을 한눈에 보게요.

충분한 가시 영역 — 적어도 — 사용자가 작성 중인 글의 상당 부분을 스크롤 없이 볼 수 있게 합니다. 맥락을 유지하며 쓰게요.

크기 조절(resize) 허용. 고정 크기보다 사용자가 크기를 조절할 수 있게 하면 더 좋습니다. CSS resize 속성으로 텍스트 영역 모서리를 드래그해 크게/작게 할 수 있게요. 사용자가 자기 글 길이에 맞춰 조절하죠. 단, 무조건 허용보다 레이아웃을 고려해(가로 resize는 레이아웃 깨질 수 있어 세로만 허용 등) 적절히요.

자동 확장(auto-grow)도 고려. 입력하는 만큼 텍스트 영역이 자동으로 높이가 늘어나는(auto-grow) 구현도 좋죠. 사용자가 스크롤 없이 쓴 글 전체를 보며 작성합니다. 다만 너무 길어지면 페이지 레이아웃 영향을 고려하고요.

모바일. 좁은 모바일 화면에선 — 텍스트 영역이 화면을 적절히 쓰되, 키보드가 올라왔을 때 입력 영역이 가려지지 않게 배려합니다.

이 규칙은 텍스트 영역의 ’입력 편의’를 담당합니다 — 받을 글 길이에 맞는 크기로(393), 사용자가 쓴 글을 한눈에 보며 편하게 작성하게 하죠. 이후 텍스트 영역 규칙들(레이블·복붙·글자수·대비·접근성)이 이 위에 쌓입니다.

정리하면 — 텍스트 영역이 받을 글에 비해 너무 작으면 사용자가 답답하게 스크롤하며 써야 하므로, 예상 텍스트 길이를 고려한 적절한 크기로 제공하고 가능하면 크기 조절·자동 확장을 지원해야 합니다.

3. 점검 / 개선

무엇을 점검하나

적절한 크기 — 텍스트 영역이 받을 글 길이에 맞는 높이·너비인가.

충분한 가시 영역 — 작성 중인 글의 상당 부분이 스크롤 없이 보이는가.

크기 조절·확장 — 크기 조절(resize)이나 자동 확장이 지원되는가.

개선 방향

받을 글 예상 분량에 맞춰 높이(줄 수)·너비 설정. 긴 글은 넉넉히.

CSS resize(세로) 또는 auto-grow 지원. 모바일 키보드 가림 배려.

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

역할	책임
디자이너	텍스트 영역 크기·resize 정의
퍼블리셔/개발	크기·자동 확장 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 텍스트 영역이 받을 글 길이에 맞는 높이·너비인가요?

□ 작성 중인 글의 상당 부분이 스크롤 없이 보이나요?

□ 크기 조절(resize)이나 자동 확장이 지원되나요?

❓ FAQ

Q1. 텍스트 영역과 텍스트 입력 필드 차이가 뭔가요? 텍스트 영역(textarea)은 여러 줄 긴 글, 텍스트 입력(input)은 한 줄 짧은 값입니다. 용도가 다르죠. Q2. 크기를 사용자가 조절하게 하면 안 되나요? 좋습니다. CSS resize로요. 단, 가로 resize는 레이아웃을 깰 수 있어 세로만 허용하는 게 안전하죠. Q3. 자동 확장이 뭔가요? 입력하는 만큼 텍스트 영역 높이가 자동으로 늘어나는 것입니다. 스크롤 없이 글 전체를 보며 쓰죠.

6. 마무리

CP-393의 메시지:

쓸 만큼 넓게 — 텍스트 영역을 받을 글 길이에 맞는 적절한 크기로 제공하라.

텍스트 영역이 받을 글에 비해 너무 작으면 사용자가 답답하게 스크롤하며 써야 합니다. 예상 길이에 맞는 크기로 제공 하고 크기 조절·자동 확장을 지원하는 게 핵심이죠. 다음 편은 텍스트 영역 레이블·플레이스홀더입니다.

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

ViewCheck는 텍스트 영역이 적절한 크기로 제공되는지를 진단합니다.

📚 참고 출처

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

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

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