2단어, 한 줄로

KRDS CP-305 — 레이블은 2단어 이내로 구성하고 텍스트 줄 바꿈이 발생하지 않게 하고 있다.

0. 들어가며 — 태그가 두 줄로 접히면

이번 425편은 태그 레이블을 2단어 이내로 구성하고 텍스트 줄바꿈이 발생하지 않게 하라는 규칙입니다.

앞 CP-304가 ’간결·명확’이라는 원칙이었다면 — 이번 CP-305는 그것을 2단어 이내, 줄바꿈 없음이라는 구체적 기준으로 못 박습니다. 태그가 길어 두 줄로 접히면 — 모양이 깨지고 다른 콘텐츠를 밀어내죠. CP-305는 글자 수와 줄바꿈을 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 2단어 이내 + 줄바꿈 없음

CP-305 (컴포넌트 > 태그) “레이블은 2단어 이내로 구성하고 텍스트 줄 바꿈이 발생하지 않게 하고 있다.”

태그 레이블을 2단어 이내의 짧은 텍스트로 구성하고, 한 줄에 표시되어 줄바꿈이 일어나지 않게 하라는 뜻입니다.

정리: 태그 레이블은 2단어 이내, 한 줄(줄바꿈 없음)로. 이게 CP-305입니다.

2. 왜 2단어 이내·줄바꿈 없음인가

CP-304의 ’간결·명확’을 — 태그의 작은 크기에 맞춰 구체적 수치로 정한 게 CP-305입니다. 태그가 작은 라벨로서 제 역할을 하려면, 글자 수와 줄 수를 제한해야 하죠.

① 2단어 이내. 태그 레이블을 2단어 이내로 제한하는 이유:

태그의 본질 태그는 ‘분류·상태를 한눈에’가 목적입니다(CP-304). 2단어를 넘으면 이미 ’한눈에’가 아니라 ’읽어야 하는’ 텍스트가 되죠. 1~2단어가 빠른 인지의 한계입니다. ‘접수중’, ’온라인 신청’처럼 짧게요.

공간 효율 — 여러 태그가 나열될 때(게시글 목록의 여러 분류 태그), 각 태그가 짧아야 — 자리를 적게 차지하고 많은 태그를 늘어놓을 수 있습니다. 길면 몇 개만으로 줄이 꽉 차죠.

3단어 이상이면 태그가 아닐 수도 — 분류를 3단어 이상 설명해야 한다면 — 그건 태그로 부적합하거나, 분류 체계가 너무 복잡한 것일 수 있죠. 더 짧은 분류명을 고민합니다.

② 줄바꿈 없음. 태그 텍스트가 — 한 줄을 넘겨 줄바꿈되면 안 됩니다.

모양 깨짐 — 태그는 보통 한 줄 높이의 알약·사각 라벨입니다. 텍스트가 두 줄로 접히면 — 태그가 세로로 커지면서 모양이 깨지고, 옆 태그·콘텐츠와 높이가 안 맞아 레이아웃이 들쭉날쭉해지죠.

인접 콘텐츠 밀어냄 — 줄바꿈으로 태그가 커지면 — 주변 콘텐츠를 밀어내거나, 줄 간격이 벌어집니다.

가독성 저하 — 작은 태그 안에서 텍스트가 두 줄로 접히면 — 답답하고 읽기 어렵죠.

그래서 — ①레이블 자체를 2단어 이내로 짧게 해 줄바꿈 가능성을 없애고, ②CSS로도 white-space: nowrap 등을 줘 한 줄을 강제하거나, 부득이 길면 잘림 처리(말줄임)를 합니다. 다만 — 근본 해법은 레이블을 짧게(2단어 이내) 하는 것이죠.

반응형 고려. 모바일 등 좁은 화면에서도 — 태그가 줄바꿈되지 않아야 합니다. 데스크톱에선 한 줄이어도 모바일 좁은 폭에서 접힐 수 있으니 — 2단어 이내라면 대부분 안전하죠. 긴 한 단어(긴 합성어)도 좁은 폭에서 잘릴 수 있어 주의합니다.

CP-304·CP-305의 관계. CP-304(간결·명확)는 원칙, CP-305(2단어·줄바꿈 없음)는 구체 기준입니다. 함께 — 태그를 짧고 한 줄로 유지해, 작은 라벨로서의 빠른 인지·깔끔한 레이아웃을 보장하죠.

이 규칙은 태그의 ’형태 안정성’을 담당합니다 — 레이블을 2단어 이내·한 줄로 제한해, 태그가 작고 일정한 형태를 유지하며 한눈에 읽히게 하죠.

정리하면 — 태그가 3단어 이상이거나 줄바꿈되면 빠른 인지가 깨지고 레이아웃이 망가지므로, 레이블을 2단어 이내로 짧게 하고 한 줄(줄바꿈 없음)로 표시해야 합니다.

3. 점검 / 개선

무엇을 점검하나

2단어 이내 — 태그 레이블이 2단어 이내로 짧은가.

줄바꿈 없음 — 태그 텍스트가 한 줄에 표시되고 두 줄로 접히지 않는가.

반응형 — 모바일 좁은 폭에서도 줄바꿈되지 않는가.

개선 방향

레이블을 2단어 이내로 단축(근본 해법). 3단어 이상이면 분류명 재고.

CSS white-space: nowrap 등으로 한 줄 강제. 반응형에서 줄바꿈 검증.

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

역할	책임
콘텐츠/UX	2단어 이내 레이블 작성
디자이너/개발	한 줄 유지·반응형 처리

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

태그를 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 태그 레이블이 2단어 이내로 짧은가요?

□ 태그 텍스트가 한 줄에 표시되고 두 줄로 접히지 않나요?

□ 모바일 좁은 폭에서도 줄바꿈되지 않나요?

❓ FAQ

Q1. 왜 2단어인가요? 태그는 ‘한눈에’ 보는 라벨입니다. 2단어가 빠른 인지의 한계죠. 3단어 이상은 읽어야 하는 텍스트가 됩니다. Q2. 줄바꿈되면 뭐가 문제죠? 태그가 세로로 커져 모양이 깨지고, 옆 콘텐츠와 높이가 안 맞아 레이아웃이 들쭉 날쭉해집니다. Q3. CSS로 nowrap만 주면 되나요? 그건 보조입니다. 근본은 레이블을 짧게(2단어 이내) 하는 것이죠. 길면 잘려서 의미가 깨질 수 있습니다.

6. 마무리

CP-305의 메시지:

2단어, 한 줄로 — 태그 레이블을 2단어 이내·줄바꿈 없이.

태그가 3단어 이상이거나 줄바꿈되면 빠른 인지가 깨지고 레이아웃이 망가집니다. 레이블을 2단어 이내로 짧게, 한 줄로 유지하는 게 핵심이죠. 다음 편은 태그 배치와 개수입니다.

다음 편 예고 ▶ 「426. (CP-306) 관련 요소 주변에 태그를 배치하고, 지나치게 많은 태그를 사용하지 않고 있다.」

ViewCheck는 태그 레이블이 2단어 이내·줄바꿈 없이 표시되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 태그(Tag) 가이드 — https://www.krds.go.kr/html/site/component/component_29.html

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

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