가장 큰 글자에도 절제가 필요하다

KRDS DS-038 — 디스플레이(Display)의 글자 크기를 과도한 크기로 적용하지 않고 있다.

0. 들어가며 — 강조에도 한계가 있다

지난 37편에서 가장 큰 계층인 display(디스플레이) 를 봤습니다. 메인 배너의 큰 헤드라인처럼 시각적 임팩트를 주는 영역이죠. 이번 38편은 그 display에 ‘과도하게 크지 마라’ 는 제한을 둡니다.

display는 ‘크게 강조하는’ 영역인데, 왜 거기에 상한을 둘까요? 색의 강조(DS-008·012)에서 봤듯, 강조도 지나치면 역효과이기 때문입니다. 글자가 화면을 압도할 만큼 크면, 임팩트는커녕 부담스럽고 정보 전달을 방해합니다. DS-038은 ’가장 큰 글자에도 절제가 필요하다’는 원칙을 담습니다. 이번 편은 display의 적정 크기와, 과도한 크기의 부작용을 풀어냅니다.

1. 규칙 원문 — 절제의 요구

DS-038 (디자인 스타일 > 타이포그래피) “디스플레이(Display)의 글자 크기를 과도한 크기로 적용하지 않고 있다.”

“디스플레이(Display)”

타이포 계층의 가장 큰 층(37편). 배너 헤드라인 등 시각 강조 텍스트입니다.

“과도한 크기로 적용하지 않고”

display가 크되, 지나치게 크면 안 된다는 뜻입니다. 화면을 압도할 정도의 과도한 크기는 피하라는 것이죠.

정리: 가장 큰 계층인 display도 과도하게 크지 않게, 절제해서 쓰라. 이게 DS-038입니다.

2. 왜 과도한 크기가 문제인가

display를 무작정 크게 하면 어떤 문제가 생길까요?

부담스럽고 압도적이다

너무 큰 글자는 사용자를 압도합니다. 화면을 가득 채우는 거대한 글자는 임팩트가 아니라 부담으로 느껴집니다. 특히 정부 서비스처럼 차분하고 신뢰감 있어야 할 곳에서, 과도하게 큰 글자는 경박하거나 과장된 인상을 줄 수 있습니다. 강조의 목적은 주목이지 압도가 아닙니다.

정보 밀도를 해친다

글자가 과도하게 크면 화면 공간을 많이 차지해, 정작 전달할 정보가 들어갈 자리가 줄어듭니다. 큰 헤드라인 하나가 첫 화면을 다 차지하면, 사용자는 스크롤을 한참 내려야 실제 콘텐츠를 봅니다. 강조 하나를 위해 정보 전달을 희생하는 셈이죠.

반응형에서 깨진다

과도하게 큰 글자는 작은 화면(모바일)에서 특히 문제입니다. 데스크톱에서 멋졌던 거대한 헤드라인이 모바일에서는 화면을 넘치거나 줄바꿈이 어색해집니다. 절제된 크기라야 다양한 화면에서 안정적입니다.

핵심: display의 목적은 ’시각적 강조’이지 ’화면 압도’가 아닙니다. 강조는 적정 크기에서 가장 효과적이고, 과도하면 오히려 역효과입니다. 이는 색 강조의 5% 상한(DS-012)과 같은 정신입니다.

3. ‘과도하지 않은’ 적정선 — 맥락 속 절제

“그럼 얼마나 커야 적정한가?”는 맥락에 따라 다릅니다. DS-038은 절대 수치를 못 박기보다 ’과도하지 않게’라는 원칙을 제시합니다. 적정선을 찾는 기준을 봅시다.

display는 heading보다 크되(37편의 계층), 화면을 압도하지 않는 선이어야 합니다. 큰 헤드라인이 사용자의 시선을 끌면서도, 그 아래 콘텐츠로 자연스럽게 이어지는 정도가 좋습니다. 헤드라인을 보고 “오, 무슨 내용이지?” 하며 아래로 시선이 흐르게 하는 것이 강조의 목적이지, 헤드라인에서 시선이 멈춰 압도당하게 하는 게 아닙니다.

실무 기준으로는 — display가 한 화면(특히 모바일)을 혼자 다 차지하지 않고, 그 아래 콘텐츠가 함께 보이는 정도가 적정합니다. 또 display 텍스트가 줄바꿈 없이(또는 자연스러운 줄바꿈으로) 안정적으로 들어가는 크기가 좋습니다. 화면을 넘치거나, 어색하게 잘리거나, 콘텐츠를 다 밀어내면 과도한 것입니다.

KRDS 타이포 토큰을 채택하면 display 크기가 적정 범위로 정의돼 있어, 이 절제를 자동으로 지킬 수 있습니다. 자체 설계라면 ‘강조하되 압도하지 않는’ 선을 다양한 화면에서 검증해야 합니다.

4. 흔한 위반 패턴 / 점검 / 개선

흔한 위반 패턴

함정 ① 화면 압도. display가 첫 화면을 다 차지 → 콘텐츠가 안 보임. → 콘텐츠와 함께 보이는 크기로. 함정 ② 모바일 넘침. 데스크톱 기준 거대 글자가 모바일에서 넘침 → 반응형 조정. 함정 ③ 과장된 인상. 지나치게 큰 글자로 경박한 인상 → 차분한 적정 크기로. 함정 ④ 정보 밀어냄. 강조 하나가 정보 전달을 희생 → 강조와 정보의 균형.

무엇을 점검하나

적정 크기 — display가 과도하게 크지 않은가.

콘텐츠 공존 — display와 콘텐츠가 한 화면에 함께 보이는가.

반응형 — 모바일에서 display가 넘치거나 깨지지 않는가.

강조 효과 — 크기가 압도가 아니라 주목을 유도하는가.

Before / After

/* ❌ Before: 과도한 display */ .display { font-size: 6rem; } /* 96px — 모바일에서 화면 압도 */ /* ✅ After: 절제된 display + 반응형 */ .display { font-size: 2.5rem; } /* 40px — 강조하되 절제 */ @media (max-width: 600px) { .display { font-size: 2rem; } /* 모바일에서 조정 */ }

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

역할	책임
디자이너	display를 강조하되 과도하지 않게 설계
퍼블리셔/개발	반응형으로 display 크기 조정

기관 유형	DS-038 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수

display(큰 헤드라인·배너)를 쓰는 사이트에 적용됩니다. display가 없으면 해당 없음(N/A)일 수 있습니다.

6. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ display(큰 헤드라인)가 화면을 압도하지 않나요?

□ display와 콘텐츠가 한 화면에 함께 보이나요?

□ 모바일에서 display가 넘치거나 깨지지 않나요?

□ 큰 글자가 주목을 유도하되 부담스럽지 않나요?

❓ FAQ

Q1. 강조하려면 클수록 좋지 않나요? 아닙니다. 강조는 적정 크기에서 가장 효과적입니다. 과도하게 크면 부담스럽고, 정보 밀도를 해치며, 반응형에서 깨집니다. 강조의 목적은 주목이지 압도가 아닙니다(색 강조 5% 상한과 같은 원리).

Q2. 적정 크기의 기준이 뭔가요? 절대 수치보다 ’맥락 속 적정’입니다. display가 콘텐츠와 함께 보이고, 모바일에서 안정적이며, 압도하지 않는 선입니다. KRDS 토큰을 쓰면 적정 범위가 정의돼 있습니다.

Q3. 임팩트 있는 배너를 만들고 싶은데요? 임팩트는 크기만으로 만드는 게 아닙니다. 색·여백·이미지·카피와 조합하면 절제된 크기로도 강한 인상을 줄 수 있습니다. 크기에만 의존하면 압도만 남습니다.

Q4. 모바일에서 display를 줄여도 되나요? 권장됩니다. 반응형으로 화면 크기에 맞춰 display를 조정하면, 작은 화면에서 넘치거나 깨지지 않습니다. 다만 heading보다는 커야 위계가 유지됩니다.

Q5. display가 없으면 DS-038은요? display급 큰 헤드라인이 없으면 이 규칙은 해당 없음(N/A)일 수 있습니다. display를 쓸 때 과도하지 말라는 조건부 규칙입니다.

7. 마무리 — 큰 글자에도 절제를

DS-038의 메시지는 강조의 절제를 다시 확인시킵니다.

가장 큰 글자(display)조차 절제가 필요하다 — 강조의 목적은 주목이지 압도가 아니다.

display는 강조하는 영역이지만, 강조도 지나치면 역효과입니다. 화면을 압도하는 거대한 글자는 부담스럽고, 정보를 밀어내며, 반응형에서 깨집니다. 강조는 적정 크기에서 가장 효과적이죠. 이는 색 강조를 5%로 절제한 것(DS-012), 강조색을 아껴 쓴 것(DS-008)과 같은, ’강조는 절제에서 나온다’는 일관된 원리입니다.

다음 편은 heading 계층의 세부 구조를 다룹니다. DS-039 — “헤딩(Heading)의 글자 크기를 h1부터 h5까지 계층을 설정한다.” 제목 안에서도 단계를 나누는 이유를 살펴봅니다.

다음 편 예고 ▶ 「039. 헤딩(Heading)의 글자 크기를 h1부터 h5까지 계층을 설정하고 있다.」

우리 사이트의 display가 적절한지 확인하려면? ViewCheck는 display 글자 크기가 과도하지 않은지, 콘텐츠와 공존하는지, 반응형에서 안정적인지를 진단합니다.

📚 참고 출처

KRDS 서체(Typography) 스타일 가이드 — https://www.krds.go.kr/html/site/style/style_03.html

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

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