짧게 써야 안 잘린다

KRDS CP-139 — [모바일] 레이블 텍스트는 짧고 간결하게 작성하여 잘리지 않도록 하고 있다.

0. 들어가며 — 좁은 칸에 긴 글자를 넣으면

이번 259편은 탭 레이블 텍스트를 짧고 간결하게 작성해 잘리지 않게 하라는 규칙입니다.

탭 바는 화면 하단을 5개 이내(CP-137)로 균등 분할하므로, 각 탭 칸은 좁습니다(약 70~86px). 여기에 “마이페이지 설정 관리”처럼 긴 레이블을 넣으면 — 칸을 넘쳐 글자가 잘리거나(…), 두 줄로 접히거나, 줄어들어 안 읽히죠. CP-139는 레이블을 짧게 써서 좁은 칸에 깔끔히 담기게 하라고 규정합니다. CP-138(아이콘+레이블)의 짝이죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 짧고 간결한 레이블

CP-139 (컴포넌트 > 탭 바) [모바일] “레이블 텍스트는 짧고 간결하게 작성하여 잘리지 않도록 하고 있다.”

탭 레이블을 좁은 탭 칸에 온전히 담길 만큼 짧고 간결한 단어로 작성해, 글자가 잘리거나 줄바꿈·축소되지 않게 하라는 뜻입니다.

정리: 탭 레이블은 짧고 간결하게 — 잘리지 않게 하라. 이게 CP-139입니다.

2. 왜 레이블을 짧게 써야 하나

탭 바의 구조적 제약에서 출발합니다. 탭은 5개 이내로 화면을 균등 분할하고(CP-134·137), 각 탭은 동일한 너비를 가지며, 그 안에 아이콘과 레이블이 함께 들어갑니다(CP-138). 즉 레이블에 허용된 가로 공간이 매우 좁죠 — 한 탭 칸(약 70~86px)에서 좌우 여백을 빼면 레이블이 쓸 수 있는 너비는 더 작습니다. 이 좁은 공간에 긴 텍스트를 넣으면 문제가 생깁니다:

① 글자 잘림(truncation). 레이블이 칸보다 길면 끝이 잘려 “마이페이…”처럼 말줄임 처리되거나, 그냥 잘려 사라지죠. 잘린 레이블은 의미를 온전히 전달 못 해, 아이콘+레이블로 명확히 하려던 CP-138의 의도가 무너집니다.

② 줄바꿈·축소. 잘림을 피하려고 두 줄로 줄바꿈하면 — 탭 높이가 들쭉날쭉해지고(CP-134의 동일 높이 위반) 레이아웃이 흐트러집니다. 또는 글자를 강제로 작게 줄이면 — 너무 작아 안 읽히고, 탭마다 글자 크기가 달라져 일관성이 깨지죠.

③ 시각적 어수선함. 긴 레이블은 좁은 칸을 꽉 채워 답답하고, 옆 탭과의 여백도 줄어 어수선합니다.

그래서 CP-139는 레이블을 짧고 간결하게 쓰라고 합니다. 핵심 원칙:

핵심 단어 하나 — “마이페이지”보다 “마이”, “내정보 설정”보다 “설정”, “전체 메뉴 보기”보다 “전체”처럼, 의미를 담는 가장 짧은 단어를 고릅니다. 보통 2~5글자(한글) 수준이죠.

명사 위주 — “검색하기”보다 “검색”, “알림 확인”보다 “알림”처럼 동사·조사를 빼고 핵심 명사로.

일관된 길이 — 탭들의 레이블 길이를 비슷하게 맞추면 시각적으로 정돈됩니다.

짧은 레이블이 가능한 이유는 — 레이블이 아이콘과 함께 있기 때문입니다(CP-138). 아이콘이 시각적 의미를 보조하므로, 레이블은 그 의미를 확정하는 짧은 단어면 충분하죠. 아이콘(집) + 레이블(홈), 아이콘(사람) + 레이블(MY)처럼요. 레이블 혼자 모든 걸 설명할 필요가 없습니다.

이 규칙은 CP-138(아이콘+레이블)·CP-134(동일 너비·높이)와 긴밀히 엮입니다 — 균등한 좁은 칸(134)에 아이콘+ 레이블(138)을 담으려면 레이블이 짧아야(139) 하죠. 세 규칙이 함께 정돈되고 명확한 탭을 만듭니다. 잘리거나 줄바꿈되는 긴 레이블은 이 정돈을 깨뜨립니다.

정리하면 — 좁은 탭 칸의 제약에 맞춰 레이블을 핵심 단어로 짧게 써, 잘림·줄바꿈 없이 온전히 읽히게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

잘림 없음 — 레이블이 칸을 넘쳐 잘리거나 …처리되지 않는가.

줄바꿈·축소 없음 — 두 줄 줄바꿈이나 강제 축소가 없는가.

간결성 — 핵심 단어 위주로 짧게(보통 2~5글자) 작성됐는가.

개선 방향

긴 레이블을 핵심 명사로 단축(“마이페이지”→“MY”/“마이”).

탭 레이블 길이를 비슷하게 맞춰 정돈. 잘림 발생 탭 우선 수정.

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

역할	책임
콘텐츠/UX 라이팅	짧고 명확한 레이블 단어 선정
퍼블리셔/개발	잘림·줄바꿈 없는 레이블 표현 확인

기관 유형	CP-139 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (모바일 탭 바 사용 시)

모바일 하단 탭 바를 쓰는 사이트·앱이 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 레이블이 칸을 넘쳐 잘리거나 …처리되지 않나요?

□ 두 줄 줄바꿈이나 강제 축소가 없나요?

□ 핵심 단어 위주로 짧게(2~5글자) 작성됐나요?

❓ FAQ

Q1. 정확한 의미를 위해 길게 쓰면 안 되나요? 좁은 칸에서 잘립니다. 아이콘이 의미를 보조하므로 레이블은 짧은 핵심 단어면 충분합니다(CP-138). Q2. 몇 글자가 적당한가요? 정해진 수보다 ‘안 잘리고 읽히는’ 길이가 기준입니다. 보통 한글 2~5글자 수준 입니다. Q3. 글자를 작게 줄이면 안 되나요? 너무 작으면 안 읽히고 탭마다 크기가 달라집니다. 글자 크기를 줄이지 말고 단어를 짧게 하세요.

6. 마무리

CP-139의 메시지:

짧게 써야 안 잘린다 — 탭 레이블은 핵심 단어로 간결하게.

탭 칸은 좁아 긴 레이블은 잘리거나 줄바꿈됩니다. 아이콘이 의미를 보조하므로(CP-138) 레이블은 핵심 명사 위주의 짧은 단어로 충분하죠. 잘림·줄바꿈 없이 온전히 읽히게 해 정돈된 탭을 유지합니다. 다음 편은 홈·전체 버튼의 배치 위치입니다.

다음 편 예고 ▶ 「260. (CP-140) [모바일] 탭바에 홈 버튼, 전체 버튼이 사용되는 경우 각각 가장 왼쪽, 가장 오른쪽 항목으로 배치하고 있다.」

ViewCheck는 탭 바 레이블이 짧고 간결해 잘리지 않는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 탭 바(Tab bars) 가이드 — https://www.krds.go.kr/html/site/component/component_11.html

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

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