글자 색에도 역할이 있다

KRDS DS-041 — 본문 글자의 색상을 주로 그레이 계열로 유지하고, 주요 동작에는 primary, secondary, point, system 색상을 적용하고 있다.

0. 들어가며 — 두 영역이 만나다

타이포그래피의 거의 마지막 편입니다. 그리고 이 편은 타이포그래피와 색상(앞의 26편)이 만나는 자리 입니다.

DS-041은 글자의 색을 규정합니다. 핵심은 두 가지 — 본문 글자는 주로 그레이(Gray) 계열로 유지하고, 주요 동작(버튼·링크 등)에는 primary, secondary, point, system 색상을 적용하라는 것이죠. 글자 색에도 ’역할’을 부여하는 것입니다.

이건 색상 규칙들의 연장입니다. 7편(역할 색)에서 색을 Primary·Secondary·Gray로 나눴고, DS-041은 그 역할을 ’글자 색’에 적용합니다 — 읽는 본문은 차분한 Gray로, 행동을 유도하는 곳은 강조색으로. 이번 편은 글자 색이 왜 이렇게 나뉘어야 하는지, 색상 규칙과 어떻게 이어지는지를 풀어냅니다.

1. 규칙 원문 — 글자 색의 두 역할

DS-041 (디자인 스타일 > 타이포그래피) “본문 글자의 색상을 ① 주로 그레이 계열로 유지하고, ② 주요 동작에는 primary, secondary, point, system 색상을 적용하고 있다.”

① “본문 글자는 주로 그레이 계열”

읽는 본문 텍스트는 회색(Gray) 계열로 유지하라는 뜻입니다. 진한 회색 본문, 연한 회색 보조 텍스트처럼요.

② “주요 동작에는 primary, secondary, point, system”

버튼·링크 등 행동을 유도하거나 상태를 알리는 텍스트에는 강조색(primary·secondary·point·system)을 쓰라는 뜻입니다. point는 강조 포인트 색, system은 상태 색(빨강·노랑·초록·파랑, 13~17편)입니다.

정리: 읽는 본문은 차분한 Gray로, 행동·상태를 알리는 글자는 역할에 맞는 색으로 적용하라. 이게 DS-041입니다.

2. 왜 본문은 그레이인가 — 차분함과 가독성

본문 글자를 회색 계열로 유지하라는 데는 이유가 있습니다.

본문은 ‘읽는’ 텍스트입니다. 길게 이어지는 본문에 강한 색(빨강·파랑 등)을 쓰면, 눈이 피로하고 산만해집니다. 또 본문이 컬러면 ‘강조’로 오인될 수 있죠 — 색이 있는 글자는 ’특별한 의미가 있나?’ 하고 주목하게 만드니까요. 본문은 차분한 무채색(Gray)이라야 편안하게 오래 읽힙니다. 진한 회색(거의 검정)이 가독성과 안정감을 동시에 줍니다.

이는 색상 규칙들과 정확히 맞닿습니다. 7편에서 Gray는 ’배경·텍스트·구분선’의 색이라 했고(DS-007), 60:30:10 에서 본문은 차분한 60% 영역이라 했죠(DS-009). DS-041은 그 원리를 글자 색에 적용한 것입니다 — 화면의 대부분을 차지하는 본문은 차분한 Gray로 두어, 강조색이 빛날 무대를 마련하는 것이죠.

또한 본문을 Gray 단계로 관리하면 명도 대비(20편)도 챙길 수 있습니다. Gray 단계에서 배경과 매직넘버 50 이상 차이 나는 단계를 본문에 쓰면, 가독성(4.5:1)이 자동 보장됩니다. 본문 Gray는 가독성·차분함·체계성을 한 번에 확보하는 선택입니다.

3. 주요 동작에는 왜 색을 — 행동 유도

반대로 ’주요 동작’에는 색을 씁니다. 왜일까요?

버튼·링크처럼 사용자가 행동해야 할 곳, 또는 상태를 알려야 할 곳은 주목받아야 합니다. 차분한 Gray 본문 사이에서 색이 있는 글자(링크의 파랑, 버튼의 강조색)는 도드라져 “여기를 누르세요”, “이건 특별합니다”를 전달하죠. 이게 색의 강조 기능입니다(8편).

쓰이는 색은 역할에 따라 다릅니다. - primary 핵심 행동(주요 버튼·링크). 정부 청색 등(DS-007·008). - secondary 보조 행동·강조. - point 포인트 강조색. - system 상태 알림(오류 빨강·성공 초록 등, 13~17편).

즉 글자 색이 그 글자의 ‘역할’을 말합니다. 차분한 Gray는 ’읽는 정보’, 강조색은 ‘행동·상태’. 사용자는 글자 색만 보고도 “이건 읽는 것, 이건 누르는 것, 이건 경고”를 직관적으로 구분합니다. 색이 글자의 기능을 안내 하는 것이죠.

4. 글자 색도 ‘색에만 의존하지 말라’

DS-041을 적용할 때 잊지 말아야 할 것이 있습니다 — 글자 색에도 6편(색약)·13편(상태색)의 원리가 적용 됩니다.

링크를 파랑(primary)으로 표시하더라도, 색만으로 링크를 구분하면 색약자나 흑백 환경에서 못 알아봅니다. 그래서 본문 속 링크는 색 + 밑줄을 함께 줘야 하죠(6편, 다음 편 DS-042). 마찬가지로 상태를 system 색으로 표시하더라도, 색 + 아이콘 + 텍스트를 함께 줘야 합니다(13편).

즉 DS-041의 ’주요 동작에 색 적용’은 ’색만으로’가 아니라 ’색을 포함해’입니다. 색은 행동·상태를 직관적으로 알리는 강력한 신호이되, 그 색을 못 보는 사용자를 위해 형태·밑줄·아이콘 등 다른 단서를 함께 제공해야 합니다. 글자 색은 거들 뿐, 의미는 여러 채널로 전달되어야 한다는 원리는 여기서도 그대로입니다.

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

흔한 위반 패턴

함정 ① 본문에 컬러. 본문을 파랑·빨강 등 컬러로 → 피로, 강조 오인. → 본문은 Gray. 함정 ② 동작에 Gray. 링크·버튼을 회색으로 → 행동 유도 약함. → 강조색 적용. 함정 ③ 색 남용. 본문 곳곳에 컬러 강조 남발 → 산만, 강조 희석. → 절제(8편). 함정 ④ 색만으로 링크. 링크를 색만으로 → 색약자 못 알아봄. → 밑줄 함께(42편).

무엇을 점검하나

본문 색 — 본문이 주로 Gray 계열인가.

동작 색 — 버튼·링크·상태에 적절한 역할색이 적용됐는가.

절제 — 본문에 컬러 강조가 남발되지 않았는가.

다중 채널 — 링크·상태가 색만이 아니라 밑줄·아이콘과 함께인가.

Before / After

/* ❌ Before: 본문 컬러 + 링크 회색 */ body { color: #2266cc; } /* 본문이 파랑 — 피로·오인 */ a { color: #888; } /* 링크가 회색 — 행동 유도 약함 */ /* ✅ After: 본문 Gray + 동작 색 */ body { color: var(--gray-80); } /* 차분한 본문 */ a { color: var(--primary-60); text-decoration: underline; } /* 링크 강조색+밑줄 */ .text-danger { color: var(--system-danger); } /* 상태색 */

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

역할	책임
디자이너	본문은 Gray, 동작은 역할색으로 설계
퍼블리셔/개발	글자 색을 역할 토큰으로 적용

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

글자가 있는 모든 사이트 = 해당.

7. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 본문 글자가 차분한 Gray 계열인가요?

□ 버튼·링크에 적절한 강조색이 쓰였나요?

□ 본문에 컬러 강조를 남발하지 않나요?

□ 링크가 색 + 밑줄로 표시되나요(42편)?

□ 상태 글자가 색 + 아이콘·텍스트와 함께인가요(13편)?

❓ FAQ

Q1. 본문에 브랜드색을 쓰면 안 되나요? 본문은 Gray가 원칙입니다. 브랜드색은 버튼·링크 등 동작 영역에 쓰세요. 본문을 브랜드색으로 하면 피로하고, 강조로 오인되며, 정작 강조해야 할 곳이 묻힙니다.

Q2. point 색이 뭔가요? 포인트 강조색으로, 특별히 주목시킬 요소에 쓰는 색입니다. primary·secondary 외에 추가 강조가 필요할 때 사용하되, 역시 절제해야 합니다(강조색 5% 상한, DS-012).

Q3. 보조 텍스트는 연한 Gray로 해도 되나요? 네, 보조 텍스트는 연한 Gray로 위계를 줄 수 있습니다. 단, 명도 대비(20편)는 지켜야 합니다 — 너무 연하면 가독성이 떨어집니다(연회색 본문 함정).

Q4. 링크는 무조건 색을 써야 하나요? 링크는 강조색(primary 등)으로 표시하되, 색만이 아니라 밑줄도 함께 줘야 합니다(6편·42편). 색약자·흑백 환경에서도 링크를 구분할 수 있게요.

Q5. KRDS를 채택하면 자동인가요? KRDS는 본문 Gray, 동작 강조색을 역할 토큰으로 정의합니다. 채택하고 역할에 맞는 토큰을 쓰면 DS-041이 충족됩니다.

8. 마무리 — 색이 글자의 역할을 말한다

DS-041의 메시지는 타이포와 색상을 잇습니다.

글자 색에도 역할이 있다 — 읽는 본문은 차분한 Gray로, 행동·상태는 역할에 맞는 색으로.

본문을 차분한 Gray로 유지하면 편안하게 읽히고, 강조색이 빛날 무대가 마련됩니다. 행동·상태를 알리는 글자에 역할색을 쓰면, 사용자는 글자 색만 보고도 ’읽는 것·누르는 것·경고’를 구분합니다. 이는 색에 역할을 부여한 것(7편), 강조를 절제한 것(8편)이 글자에 적용된 모습이죠. 색상과 타이포그래피는 따로가 아니라, ’글자 색의 역할’에서 하나로 만납니다.

다음 편은 타이포그래피의 마지막, 밑줄을 다룹니다. DS-042 — “글자 밑줄을 텍스트 링크에만 사용하고, 강조하는 부분에서 사용하지 않는다.” 밑줄을 링크 전용으로 남겨야 하는 이유를 살펴봅니다.

다음 편 예고 ▶ 「042. 글자 밑줄을 텍스트 링크에만 사용하고, 강조하는 부분에서 사용하지 않고 있다.」

우리 사이트의 글자 색이 역할에 맞는지 확인하려면? ViewCheck는 본문이 Gray 계열인지, 동작·상태에 적절한 역할색이 쓰였는지, 색이 다른 단서(밑줄·아이콘)와 함께 쓰였는지를 진단합니다.

📚 참고 출처

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

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

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