좁아도 두 줄까지

KRDS CP-157 — 화면 너비가 충분하지 않은 경우 텍스트는 2줄까지 표현하고 있다.

0. 들어가며 — 좁은 화면에서 길어지는 텍스트

이번 277편은 화면 너비가 충분하지 않을 때 긴급 공지 텍스트를 2줄까지 표현하라는 규칙입니다.

긴급 공지는 전체 너비 띠(CP-154)에 짧은 텍스트로 핵심을 전합니다. 그런데 모바일처럼 좁은 화면에선 같은 텍스트 가 여러 줄로 줄바꿈되죠 — 데스크톱에서 1줄이던 게 모바일에서 4~5줄이 되면, 긴급 공지가 화면을 과하게 차지해 본문을 한참 밀어냅니다. CP-157은 좁은 화면에서 텍스트를 2줄까지로 제한해 적정 크기를 유지하라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 좁은 화면 2줄 제한

CP-157 (컴포넌트 > 긴급 공지) “화면 너비가 충분하지 않은 경우 텍스트는 2줄까지 표현하고 있다.”

모바일 등 좁은 화면에서 긴급 공지의 텍스트가 최대 2줄을 넘지 않게 표현해, 공지가 화면을 과도하게 점유 하지 않게 하라는 뜻입니다.

정리: 좁은 화면에선 긴급 공지 텍스트를 2줄까지로 제한하라. 이게 CP-157입니다.

2. 왜 2줄까지로 제한하나

긴급 공지는 두 가지를 동시에 만족해야 합니다 — 핵심 정보를 충분히 전달하면서, 본문 이용을 과하게 막지 않기. 좁은 화면에서 이 균형이 깨지기 쉽죠.

문제 — 좁은 화면의 줄바꿈 폭증. 긴급 공지 텍스트는 전체 너비를 채웁니다(CP-154). 데스크톱(넓음)에선 한 줄에 많은 글자가 들어가 텍스트가 1~2줄이면 끝나죠. 그런데 모바일(좁음)에선 한 줄에 들어가는 글자가 1/3로 줄어, 같은 텍스트가 4~5줄로 늘어납니다. 긴급 공지가 세로로 길어져:

본문 압박 — 전체 너비 + 여러 줄이면 긴급 공지가 모바일 화면의 상당 부분(때로 절반 이상)을 차지하죠. 닫기 버튼도 없으니(CP-155) 사용자는 그 긴 공지를 지나 한참 스크롤해야 본문에 닿습니다. 긴급하되 본문 이용을 봉쇄하면 안 되는데(CP-155에서 본 균형), 긴 텍스트가 이를 위협하죠.

가독성 저하 — 너무 긴 텍스트는 핵심이 흐려집니다. 긴급 공지는 ‘핵심을 빠르게’ 전해야 하는데, 여러 줄을 읽게 하면 그 즉시성이 약해지죠.

그래서 CP-157은 좁은 화면에서 텍스트를 2줄까지로 제한합니다. 2줄은 — 핵심 메시지를 담기에 충분하면서, 화면을 과하게 점유하지 않는 적정선이죠. 이를 위해선:

① 텍스트를 애초에 짧고 핵심적으로. 긴급 공지 본문은 2줄(좁은 화면 기준)에 들어갈 만큼 간결해야 합니다. “○○ 지역 호우 경보, 외출 자제 바랍니다” 처럼 핵심만 담죠. 장황한 설명은 연결된 상세 페이지(CP-156의 단일 링크)로 미룹니다 — 공지엔 핵심 2줄 + 자세히 보기 링크, 상세는 링크 너머에.

② 2줄 초과 시 말줄임. 그래도 텍스트가 2줄을 넘으면 — 말줄임표(…)로 잘라 2줄로 맞추고, 전체 내용은 링크 너머에서 보게 합니다(-webkit-line-clamp: 2 등으로 구현). 잘려도 핵심은 앞 2줄에 담기게 작성하죠.

이 규칙은 긴급 공지의 ‘모바일 적정성’을 담당합니다 — 강력한 표현(전체 너비 CP-154, 닫기 불가 CP-155)을 쓰되, 좁은 화면에서 본문을 봉쇄할 만큼 비대해지지 않게 2줄로 제어하죠. 긴급함과 사용성의 균형을 좁은 화면에서도 유지하는 것입니다. 데스크톱·모바일 모두 ’짧고 핵심적인’ 긴급 공지를 지향하지만, 특히 좁은 화면에서 2줄 상한이 이를 강제합니다.

3. 점검 / 개선

무엇을 점검하나

2줄 제한 — 좁은 화면에서 긴급 공지 텍스트가 2줄을 넘지 않는가.

핵심 간결성 — 텍스트가 2줄에 담길 만큼 짧고 핵심적인가.

상세 분리 — 긴 내용은 연결 페이지(CP-156)로 미뤄졌는가.

개선 방향

긴급 공지 텍스트를 핵심만 2줄 이내로 작성. 상세는 단일 링크 너머로.

2줄 초과 시 -webkit-line-clamp: 2 등으로 말줄임 처리.

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

역할	책임
콘텐츠/UX 라이팅	핵심 2줄 이내 텍스트 작성
퍼블리셔/개발	좁은 화면 2줄 제한·말줄임 구현

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

모바일에서 긴급 공지를 노출하는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 좁은 화면에서 긴급 공지 텍스트가 2줄을 넘지 않나요?

□ 텍스트가 2줄에 담길 만큼 짧고 핵심적인가요?

□ 긴 내용은 연결 페이지(CP-156)로 미뤄졌나요?

❓ FAQ

Q1. 2줄로 내용이 부족하면요? 핵심만 2줄에 담고, 상세는 단일 링크(CP-156) 너머 페이지에서 제공합니다. Q2. 어떻게 2줄로 자르나요? 텍스트를 애초에 짧게 쓰고, 넘치면 -webkit-line-clamp: 2 등으로 말줄임 처리합니다. Q3. 데스크톱은 제한이 없나요? 데스크톱도 짧고 핵심적이어야 하지만, 좁은 화면에서 줄바꿈 폭증이 특히 문제라 2줄 상한을 명시합니다.

6. 마무리

CP-157의 메시지:

좁아도 두 줄까지 — 긴급 공지 텍스트를 2줄로 제한해 본문을 봉쇄하지 마라.

좁은 화면에선 같은 텍스트가 여러 줄로 늘어나 긴급 공지가 비대해지고 본문을 밀어냅니다. 핵심만 2줄에 담고 상세는 링크 너머로 미뤄, 긴급함과 본문 이용의 균형을 좁은 화면에서도 지키죠. 다음 편은 긴급 공지의 접근성 — 배너 역할 부여입니다.

다음 편 예고 ▶ 「278. (CP-158) 긴급 공지 섹션에 배너 역할을 부여함으로써 스크린 리더 사용자가 용도를 직관적이고 빠르게 탐색할 수 있도록 하고 있다.」

ViewCheck는 좁은 화면에서 긴급 공지 텍스트가 2줄로 제한되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 긴급 공지(Critical alerts) 가이드 — https://www.krds.go.kr/html/site/component/component_13.html

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

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