잘리지 않게 적당히

KRDS CP-299 — 옵션 텍스트는 컨테이너와 옵션 목록 영역에 표현될 수 있는 적절한 길이로 제공하고 있다.

0. 들어가며 — 옵션이 잘려 보이면

이번 419편은 셀렉트 옵션 텍스트를 컨테이너와 옵션 목록 영역에 표현될 수 있는 적절한 길이로 제공하라는 규칙입니다.

셀렉트의 옵션 텍스트가 너무 길면 — 닫힌 셀렉트 박스(컨테이너)나 펼친 목록 영역에서 잘리거나 넘쳐, 사용자가 무엇을 고르는지 못 읽죠. CP-299는 옵션 텍스트를 표시 영역에 맞는 적절한 길이로 제공하라고 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 적절한 옵션 텍스트 길이

CP-299 (컴포넌트 > 셀렉트) “옵션 텍스트는 컨테이너와 옵션 목록 영역에 표현될 수 있는 적절한 길이로 제공하고 있다.”

셀렉트의 옵션 텍스트를, 닫힌 셀렉트 박스(컨테이너)와 펼친 옵션 목록 영역 모두에서 잘리지 않고 표현될 수 있는 적절한 길이로 제공하라는 뜻입니다.

정리: 옵션 텍스트를 표시 영역에 맞게 적절한 길이로 제공하라. 이게 CP-299입니다.

2. 왜 적절한 텍스트 길이인가

셀렉트는 — 두 곳에서 옵션 텍스트가 보입니다: ①닫힌 컨테이너(선택된 옵션이 표시되는 셀렉트 박스)와 ②펼친 옵션 목록(선택지가 나열되는 드롭다운 영역). 옵션 텍스트가 — 이 두 영역에 들어갈 수 있는 길이여야, 사용자가 온전히 읽고 고르죠.

옵션 텍스트가 너무 길 때:

닫힌 컨테이너에서 잘림 선택한 옵션이 닫힌 셀렉트 박스보다 길면, 텍스트가 잘려(...) 보입니다. 사용자가 자기가 무엇을 골랐는지 끝까지 확인 못 하죠. 특히 비슷하게 시작하는 긴 옵션들(‘서울특별시 종로구 ○○동’, ‘서울특별시 종로구 △△동’)은 뒷부분이 잘리면 구별이 안 됩니다.

펼친 목록에서 넘침·줄바꿈 — 펼친 옵션 목록에서도 — 텍스트가 영역보다 길면 잘리거나, 줄바꿈돼 목록이 들쭉 날쭉해지죠. 스캔이 어렵습니다.

모바일에서 심화 — 좁은 모바일 화면에선 — 컨테이너·목록 폭이 더 좁아, 긴 옵션 잘림이 심해집니다.

그래서 CP-299는 — 옵션 텍스트를 표시 영역에 맞는 적절한 길이로 제공하라고 합니다:

간결한 옵션 텍스트 — 옵션 텍스트를 — 핵심만 담아 간결하게. 불필요하게 긴 수식·중복을 줄이죠. 예: ‘대한 민국 서울특별시’ 대신 맥락상 ’서울’로 충분하면 짧게.

영역 폭 확보 — 옵션이 본질적으로 길어야 하면(주소 등) — 컨테이너·목록 폭을 충분히 잡아 잘리지 않게 합니다.

잘림 처리 부득이 길면 잘릴 때 title/툴팁으로 전체를 볼 수 있게 하거나, 목록에선 줄바꿈 대신 가로 스크롤 등 처리. 다만 닫힌 컨테이너의 선택값은 핵심 식별 부분이 보이게 합니다.

컨트롤 선택과도 연결. 옵션이 본질적으로 매우 길고 많으면(긴 주소 200개) — 셀렉트 자체가 부적합할 수 있죠 (CP-298). 검색형 입력이 나을 수 있습니다. 즉 옵션 길이·개수를 함께 보고 적합한 컨트롤을 고릅니다.

이 규칙은 셀렉트의 ’가독성’을 담당합니다 — 적정 개수(CP-298)에 더해, 옵션 텍스트가 표시 영역에 맞아 잘리지 않게 (299) 해, 사용자가 선택지를 온전히 읽고 고르게 하죠. 텍스트 목록·캐러셀 텍스트 길이 규칙(CP-184 등)의 셀렉트 버전입니다.

정리하면 — 옵션 텍스트가 너무 길면 닫힌 컨테이너·펼친 목록에서 잘려 사용자가 못 읽으므로, 표시 영역에 맞는 적절한 길이로(또는 충분한 폭·잘림 처리로) 제공해야 합니다.

3. 점검 / 개선

무엇을 점검하나

컨테이너 잘림 — 선택된 옵션이 닫힌 셀렉트 박스에서 잘리지 않는가.

목록 표현 — 펼친 목록에서 옵션이 잘리거나 들쭉날쭉 줄바꿈되지 않는가.

모바일 — 좁은 화면에서도 옵션 핵심이 읽히는가.

개선 방향

옵션 텍스트를 간결하게(불필요한 수식 제거). 본질적으로 길면 영역 폭 확보.

부득이 잘리면 title/툴팁으로 전체 제공. 매우 길고 많으면 검색형 입력 검토(CP-298).

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

역할	책임
콘텐츠/UX	옵션 텍스트 간결화
디자이너/개발	컨테이너·목록 폭·잘림 처리

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

셀렉트를 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 선택된 옵션이 닫힌 셀렉트 박스에서 잘리지 않나요?

□ 펼친 목록에서 옵션이 잘리거나 들쭉날쭉 줄바꿈되지 않나요?

□ 좁은 모바일 화면에서도 옵션 핵심이 읽히나요?

❓ FAQ

Q1. 옵션이 본질적으로 길면(주소 등) 어쩌죠? 컨테이너·목록 폭을 충분히 잡거나, title/툴팁으로 전체를 보이게 합니다. 매우 길고 많으면 검색형이 낫고요. Q2. 잘릴 때 ...만 보이면 안 되나요? 닫힌 컨테이너에선 핵심 식별 부분이 보여야 합니다. 비슷한 긴 옵션은 뒷부분이 잘리면 구별이 안 되죠. Q3. 두 영역이 뭔가요? ①닫힌 셀렉트 박스(선택값 표시)와 ②펼친 옵션 목록입니다. 둘 다에서 잘리지 않아야 하죠.

6. 마무리

CP-299의 메시지:

잘리지 않게 적당히 — 옵션 텍스트를 표시 영역에 맞는 길이로 제공하라.

옵션 텍스트가 너무 길면 닫힌 컨테이너·펼친 목록에서 잘려 사용자가 선택지를 못 읽습니다. 간결한 텍스트, 충분한 폭, 적절한 잘림 처리로 온전히 읽히게 하죠. 다음 편은 셀렉트 레이블입니다.

다음 편 예고 ▶ 「420. (CP-300) 모든 셀렉트에는 레이블을 제공하고 있다.」

ViewCheck는 셀렉트 옵션 텍스트가 표시 영역에 맞게 적절한지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 셀렉트(Select) 가이드 — https://www.krds.go.kr/html/site/component/component_28.html

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

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