왜 하필 13단계일까

KRDS DS-004 — 색상과 채도를 기준으로 명도를 총 13단계로 구분하고, Gray의 0(White), 100(Black)을 제외한 다른 색상들을 11단계로 구분하여 색상 팔레트를 구성하고 있다.

0. 들어가며 — ’단계가 있다’에서 ’몇 단계인가’로

지난 3편(DS-003)에서 우리는 “색은 연함~진함의 단계로 설계해야 한다”는 원리를 다뤘습니다. 그런데 거기서 자연스럽게 따라오는 질문이 있습니다.

“좋다, 단계로 만들자. 그런데 몇 단계로? 3단계? 10단계? 100단계?”

이 질문에 KRDS가 내놓은 정확한 답이 바로 DS-004입니다. 막연히 “단계를 두라”가 아니라, “명도를 총 13단계로, 색은 11단계로” 라고 숫자를 못 박았습니다.

처음 보면 “왜 이렇게 깐깐하게 숫자까지 정하지?” 싶을 수 있습니다. 하지만 이 규격에는 분명한 이유가 있습니다. 단계 수가 정해져야 여러 기관의 팔레트가 서로 호환되고, 색을 고르는 일이 예측 가능해지며, 대비 보장 체계(매직 넘버)가 작동하기 때문입니다. 이번 편은 이 ’13’과 ’11’이라는 숫자의 정체와, 그 뒤에 숨은 설계 철학을 끝까지 파헤칩니다. 색상 규격의 가장 단단한 뼈대를 다루는 편입니다.

1. 규칙 원문 — 네 개의 조건이 겹쳐 있다

이번 규칙 문장은 846개 중에서도 유난히 깁니다. 그만큼 조건이 촘촘합니다. 네 토막으로 끊어 읽어봅시다.

DS-004 “① 색상과 채도를 기준으로 ② 명도를 총 13단계로 구분하고, ③ Gray의 0(White), 100(Black)을 제외한 다른 색상들을 ④ 11단계로 구분하여 색상 팔레트를 구성하고 있다.”

① “색상과 채도를 기준으로”

색에는 세 가지 속성이 있습니다 — 색상(Hue, 빨강이냐 파랑이냐), 채도(Saturation, 선명하냐 탁하냐), 명도(Lightness, 밝냐 어둡냐). 이 조항은 “색상과 채도는 기준(축)으로 고정해 두고”라는 뜻입니다. 즉 같은 파랑(색상 고정), 같은 선명도(채도 고정)를 유지한 채 — 다음 조건으로 넘어갑니다.

② “명도를 총 13단계로 구분”

고정된 색상·채도 위에서, 밝기(명도)만 13단계로 쪼갠다는 뜻입니다. 같은 파랑이지만 아주 밝은 파랑부터 아주 어두운 파랑까지 13칸으로 나누는 것이죠. 핵심은 “단계를 가르는 축은 명도” 라는 점입니다.

③ “Gray의 0(White), 100(Black)을 제외한”

여기서 Gray가 특별 취급을 받습니다. Gray만 0(완전한 흰색)과 100(완전한 검정)을 포함해 양 끝까지 갖습니다. 그래서 Gray는 13단계 전체를 씁니다.

④ “다른 색상들을 11단계로 구분”

Gray가 아닌 색(파랑·빨강 등)들은 0과 100을 빼고 11단계만 갖습니다. 왜 뺄까요? 순수한 흰색과 검정은 ’무채색’이라 색이 없습니다. “완전히 흰 파랑”이나 “완전히 검은 빨강”은 결국 흰색·검정과 같아지므로, 그 두 칸은 Gray가 대표로 갖고 다른 색은 공유하는 것입니다. 그래서 색 계열은 0·100을 뺀 11단계입니다.

정리: Gray = 13단계(0~100 전부), 그 외 색 = 11단계(0·100 제외). 이 한 줄이 DS-004의 전부입니다.

2. 왜 ‘숫자까지’ 정해야 했나 — 규격의 힘

“단계를 두라”까지는 알겠는데, 굳이 13·11이라는 숫자까지 표준으로 박은 이유가 뭘까요? 세 가지입니다.

(1) 호환성 — 기관이 달라도 색이 통한다

KRDS의 목표는 ‘범정부’ 통일입니다. A 부처와 B 공단이 각자 다른 단계 수로 팔레트를 만들면, 둘의 색은 서로 매핑되지 않습니다. “A의 중간 파랑”과 “B의 중간 파랑”이 같은 밝기라는 보장이 없죠. 하지만 모두가 같은 13단계 격자를 쓰면, “A의 60단계 = B의 60단계 = 같은 명도”가 됩니다. 단계 수의 표준화는 정부 서비스 전체를 하나의 좌표계로 묶는 일입니다.

(2) 예측 가능성 — 색을 고르는 일이 계산이 된다

단계 수가 정해지면 색 선택이 ’감’이 아니라 ’좌표 읽기’가 됩니다. “배경은 5단계, 본문은 60단계” 같은 규칙이 성립하고, 디자이너가 바뀌어도 같은 결과가 나옵니다. 단계 수가 들쭉날쭉하면 이런 규칙 자체가 세워지지 않습니다.

(3) 매직 넘버가 작동하려면 — 격자가 필요하다

2·3편에서 본 매직 넘버(단계 차 50 = 대비 4.5:1) 는, 단계가 일정한 명도 격자 위에 있을 때만 작동합니다. 단계가 제멋대로면 “50 차이”가 항상 같은 대비를 보장하지 못합니다. 13단계라는 고정된 명도 격자가 있어야, 단계 번호 빼기만으로 대비를 알 수 있는 매직 넘버 체계가 성립합니다. DS-004는 사실상 DS-002·003이 작동하기 위한 토대인 셈입니다.

즉 ’13단계’는 단순한 디자인 취향이 아니라, 호환성·예측가능성·접근성 체계 전체를 떠받치는 인프라 입니다. 숫자를 박은 데는 이유가 있습니다.

격자가 없으면 무슨 일이 벌어지나 — 한 기관의 가상 시나리오

규격의 가치는 그게 없을 때 가장 잘 드러납니다. 단계 격자 없이 색을 다루는 기관에서 실제로 벌어지는 일을 따라가 봅시다.

처음엔 멀쩡합니다. 외주 업체가 메인 웹사이트를 만들면서 파랑 두세 개, 회색 네댓 개를 골라 썼습니다. 화면도 깔끔합니다. 그런데 1년 뒤 산하 포털을 새로 구축하면서 다른 업체가 들어옵니다. 이 업체도 ’파랑’을 쓰는데, 명도 격자가 없으니 앞 사이트의 파랑과 미묘하게 다른 파랑을 씁니다. 사용자가 두 사이트를 오가면 “어, 색이 좀 다른데?” 하는 미세한 위화감을 느낍니다. 통일성에 금이 가기 시작합니다.

문제는 여기서 그치지 않습니다. 격자가 없으니 두 사이트의 색을 서로 매핑할 방법이 없습니다. “본문은 어느 회색?”이라는 질문에 사이트마다 다른 답이 나오고, 접근성 점검을 하면 한 곳은 통과, 한 곳은 미달인데 왜 그런지 체계적으로 설명할 수가 없습니다. 색이 격자 위에 있지 않으니 “단계 차 50”이라는 공통 기준 자체가 성립하지 않기 때문입니다. 결국 각 사이트를 따로따로, 색 하나하나 손으로 검사해야 합니다.

몇 년이 더 지나면 기관은 수십 개의 서비스를 운영하게 되고, 그 색들은 제각각입니다. 이제 와서 통일하려면 전수 조사 후 전면 재작업이 필요한데, 비용도 시간도 감당하기 어렵습니다. 처음에 13단계 격자 하나만 잡아뒀다면 일어나지 않았을 일입니다.

이 시나리오가 보여주는 건 명확합니다 — 규격은 ‘지금 당장의 제약’처럼 보이지만, 실제로는 ’미래의 혼란을 막는 보험’ 입니다. DS-004가 숫자까지 못 박은 이유가 여기 있습니다. 표준 격자는 한 기관 안에서도, 범정부 차원에서도 색을 ’관리 가능한 자산’으로 만들어 줍니다.

3. 색의 세 가지 속성 — 왜 ’명도’를 축으로 나누나

DS-004를 제대로 이해하려면 색의 3요소를 알아야 합니다. 어렵지 않습니다.

색상(Hue) — “무슨 색이냐”. 빨강·주황·노랑·초록·파랑… 색의 종류.

채도(Saturation) — “얼마나 선명하냐”. 쨍한 빨강 vs 탁한 벽돌색. 색의 순도.

명도(Lightness) — “얼마나 밝냐”. 밝은 하늘색 vs 어두운 남색. 색의 밝기.

DS-004는 색상·채도는 그대로 두고 명도만 단계로 나눈다고 했습니다. 왜 하필 명도일까요?

답은 2편에 있습니다 — 명도 대비가 접근성(가독성)을 결정하기 때문입니다. 두 색이 얼마나 잘 구분되느냐는 색상이나 채도가 아니라 밝기 차이(명도 대비) 가 좌우합니다. 빨강과 초록은 색상이 정반대지만 명도가 비슷해서 겹치면 잘 안 보입니다(특히 색맹 사용자에게). 반대로 같은 파랑이라도 아주 밝은 것과 아주 어두운 것은 또렷이 구분됩니다.

그래서 색을 명도 축으로 단계화하면, 단계 차이가 곧 가독성의 차이가 됩니다. “배경은 밝은 단계, 글자는 어두운 단계”라는 직관이 그대로 접근성으로 연결됩니다. 명도를 기준으로 나누는 것은 곧 접근성을 기준으로 나누는 것입니다. 색상·채도가 아니라 명도를 택한 데는 이런 깊은 이유가 있습니다.

4. 13단계와 11단계의 실제 구조

이제 그 13단계가 구체적으로 어떻게 생겼는지 봅시다.

명도 0~100 축

KRDS는 밝기를 0(완전한 흰색)부터 100(완전한 검정)까지의 척도로 다룹니다. 숫자가 작을수록 밝고, 클수록 어둡습니다. (값이 클수록 진하다고 기억하면 됩니다.)

Gray — 0~100, 13단계

Gray는 양 끝(0·100)을 포함해 명도 축 전체를 13칸으로 채웁니다. KRDS 가이드와 토큰에서 확인되는 단계 값에는 0, 5, 10, … 50, … 90, 95, 100 이 포함됩니다. 흥미로운 점은 양 끝 근처(0·5·10, 90·95·100)에 단계가 더 촘촘하다는 것입니다.

왜 끝이 촘촘할까요? 화면에서 가장 많이 쓰이는 색이 아주 밝은 배경(거의 흰색) 과 아주 진한 텍스트(거의 검정) 이기 때문입니다. 이 영역에서 미세한 명도 차이(예: 흰색과 아주 연한 회색 배경)가 카드·구획·깊이감을 만들어 냅니다. 그래서 끝부분을 세밀하게 쪼개 둔 것입니다. 반대로 중간 영역은 상대적으로 듬성해도 됩니다.

정확한 13단계 전체 숫자 목록은 KRDS의 디자인 토큰 규격(HTML Kit/Figma 라이브러리) 에 정의돼 있습니다. 가이드 페이지에는 0·5·10·50·90·95·100 등 일부 값과 매직 넘버(40·50·70·90)가 제시됩니다. 자체 구현 시에는 KRDS 토큰 키트의 값을 그대로 가져다 쓰는 것이 가장 안전합니다.

그 외 색 — 0·100 제외, 11단계

Primary·Secondary·System 등 유채색 계열은 0(흰)과 100(검)을 빼고 11단계를 갖습니다. 앞서 설명했듯, 순백·순흑은 색이 없는 무채색이라 Gray가 대표로 보유하고, 유채색은 그 사이 11칸만 정의하는 것이 합리적이기 때문입니다. 이렇게 하면 모든 색 계열이 같은 명도 좌표 위에 정렬됩니다.

5. 매직 넘버와 13단계 — 격자가 좌표가 된다

3편에서 “단계 차이가 대비를 보장한다”고 했는데, 13단계 규격이 그걸 어떻게 가능하게 하는지 구체적으로 봅시다.

13단계가 일정한 명도 격자를 이루기 때문에, 두 색의 단계 번호 차이가 곧 명도 대비로 환산됩니다.

단계 차이(매직넘버)	대비비	실전 의미
40	3:1	큰 글씨·UI 요소 통과
50	4.5:1	본문 텍스트 통과
70	7:1	본문 강화(AAA)
90	15:1	선명한 화면 모드 본문

예를 들어 배경이 명도 5단계라면, 본문 글자는 그보다 55단계 이상 진한 색(60단계 이상) 을 고르면 단계 차가 55 ≥ 50이라 본문 대비(4.5:1)가 자동 보장됩니다. 계산기 없이 뺄셈 한 번으로 끝납니다.

이것이 가능한 유일한 조건이 바로 “단계가 명도 기준으로 일정하게 13칸 격자를 이룬다” 는 DS-004의 규격입니다. 단계 수가 제각각이거나 명도가 아니라 채도로 나눴다면, 이 우아한 좌표계는 무너집니다. 그래서 DS-004는 색상 규칙 중에서도 가장 기초가 되는 뼈대입니다 — 이게 흔들리면 DS-002(대비)도 DS-003(단계 설계)도 함께 흔들립니다.

6. 왜 하필 13과 11일까 — ’적당함’의 과학

“꼭 13단계여야 하나? 10단계나 20단계면 안 되나?”라는 의문이 들 수 있습니다. 사실 정답이 하나만 있는 문제는 아닙니다. 다만 13/11이라는 숫자는 두 극단 사이의 균형점입니다.

단계가 너무 적으면(예: 3~5단계) — 배경·면·테두리·본문·강조 등 화면이 요구하는 다양한 명도를 감당할 수 없습니다. 결국 필요한 명도가 팔레트에 없어서 임의 색을 끌어다 쓰게 되고(→ DS-001 위반), 위계 표현도 빈약해집니다.

단계가 너무 많으면(예: 30~50단계) — 인접 단계의 차이가 거의 안 보여서 구분이 무의미해지고, 관리 대상만 폭증합니다. 디자이너는 “이 회색이 47단계였나 48단계였나” 헷갈리고, 토큰 목록은 비대해집니다.

13단계(Gray)는 이 사이에서 충분히 풍부하되 관리 가능한 지점입니다. 게다가 끝을 촘촘히 한 비균등 설계 덕분에, 실제로 색이 가장 많이 필요한 밝은 배경·진한 텍스트 영역의 표현력을 확보하면서도 전체 단계 수는 절제했습니다. 이는 우연이 아니라 수많은 화면을 분석해 도출한 실용적 균형입니다.

조금 더 들여다보면, ’끝부분을 촘촘히 한다’는 결정에는 화면 디자인의 실제 패턴이 반영돼 있습니다. 우리가 보는 거의 모든 웹 화면은 밝은 바탕(흰색~아주 연한 회색) 위에 진한 글자(거의 검정) 라는 구조를 공유합니다. 그래서 색 사용 빈도를 집계하면 명도 분포가 양 끝에 몰립니다. 흰색 배경, 그 위에 살짝 떠 보이는 연회색 카드, 그보다 조금 진한 구분선, 그리고 진한 본문 텍스트 — 이 모든 게 명도 축의 양 끝 좁은 구간에서 일어납니다. 그 구간을 5단위(0·5·10, 90·95·100)로 세밀하게 쪼개 둬야 카드와 배경, 구분선과 면을 자연스럽게 구분할 수 있습니다. 반면 명도 40~60 같은 중간 영역은 강조나 보조 요소에 가끔 쓰일 뿐이라 듬성해도 무방합니다. 13단계라는 숫자는 이렇게 ’어디에 색이 실제로 필요한가’를 데이터로 본 결과인 셈입니다. 균등하게 13칸을 자른 게 아니라, 필요한 곳에 단계를 몰아준 영리한 비균등 설계입니다.

7. 해외 디자인 시스템과 비교 — 10이냐 11이냐 13이냐

다른 시스템은 몇 단계를 쓸까요?

시스템	단계 수	표기
🇰🇷 KRDS	Gray 13 / 유채색 11	0~100 (끝부분 촘촘)
Material Design	10단계	50, 100, 200 … 900
Tailwind CSS	11단계	50, 100 … 900, 950
🇺🇸 USWDS	계열별 다단계	grade 0~100

흥미롭게도 Tailwind도 최근 11단계(950 추가)로 늘렸습니다. 처음엔 10단계였는데, 아주 어두운 영역의 표현이 부족해 끝에 단계를 더한 것이죠. KRDS가 Gray를 13단계로, 그것도 양 끝을 촘촘히 한 것과 같은 문제의식입니다 — 실무에서 가장 많이 쓰는 명도 영역을 더 세밀하게.

즉 “13/11단계”는 한국만의 특이한 숫자가 아니라, 업계가 공통으로 도달한 ’10단계 안팎’이라는 합의의 한국식 정교화입니다. 정부 서비스 특성상 접근성(끝부분 명도)이 특히 중요하기에, 그 영역을 더 세분한 것이 KRDS의 특징입니다.

8. 무엇을 점검하나

DS-004는 화면 결과물보다 팔레트의 구조 규격을 봅니다.

단계 수 — Gray 계열이 13단계(0·100 포함), 유채색 계열이 11단계(0·100 제외)로 구성됐는가.

명도 기준 — 단계를 가르는 축이 명도(Lightness)인가. (채도만 다른 가짜 단계가 아닌가.)

양 끝 포함 여부 — Gray가 0(흰)·100(검)을 포함하는가.

토큰 정합 — 단계 값이 KRDS 토큰 규격과 매핑되는가.

이 항목 역시 운영 화면만으로는 부분 판정만 가능하고, 디자인 토큰/팔레트 정의 문서를 함께 봐야 정확합니다. ‘구조 점검’ 성격이 강한 항목이라는 점에서 DS-003과 한 묶음입니다.

9. 누가 담당하나

역할	책임
디자인 시스템 담당 / 리드 디자이너	팔레트를 13/11단계 규격으로 구성(또는 KRDS 채택) — 주관
퍼블리셔 / 프론트 개발	단계를 토큰으로 정확히 구현, 단계 누락 없게
접근성 담당	단계 격자가 매직 넘버(대비)와 정합하는지 확인

DS-003·004는 모두 디자인 시스템 설계자의 영역입니다. 한 번 규격대로 잘 잡아두면, 이후 모든 화면이 그 격자 위에서 굴러갑니다. 반대로 이 규격이 어긋나면 — 그 위에 쌓은 모든 색 규칙이 조금씩 틀어집니다. 그래서 초기 설계 단계에서 반드시 못 박아야 할 항목입니다.

10. 우리 사이트에 해당될까?

적용 대상

기관 유형	DS-004 적용
중앙행정기관(대표)	✅ KRDS 표준 13/11단계 채택
중앙행정기관(운영)	✅ 자체 팔레트면 규격 준수 필요, KRDS 채택 시 자동 충족
공공기관	✅ 동일
지방자치단체	✅ 동일

핵심: 채택이냐 설계냐

KRDS 토큰을 채택하면 → 13/11단계가 이미 그 안에 구현돼 있으므로 DS-004는 자동 충족입니다. 별도로 단계를 셀 필요도 없습니다.

자체 팔레트를 설계하면 → Gray 13단계·유채색 11단계라는 규격을 직접 맞춰야 합니다. 단계 수를 세고, 명도 기준으로 정렬됐는지 검증해야 합니다.

대부분의 기관에게 답은 명확합니다 — KRDS 토큰 키트를 가져다 쓰는 것. 이 단계 규격은 직접 설계해서 얻는 이득이 거의 없는, ’바퀴의 재발명’에 해당하는 영역이기 때문입니다.

예외(N/A)

색을 쓰는 사이트는 팔레트가 필요하므로 N/A는 드뭅니다. 다만 점검 대상이 토큰/디자인 파일이라, 운영 사이트만으로는 ’단계 규격 준수’를 완전히 판정하기 어렵습니다.

11. 단계별 개선 방법

가장 빠른 길 — KRDS 토큰 채택

/* KRDS Gray 13단계 개념 (양 끝 촘촘 / 정확한 값은 KRDS 토큰 키트 기준) */ :root { --gray-0: #ffffff; /* White */ --gray-5: ...; /* 아주 연한 배경 */ --gray-10: ...; --gray-50: ...; /* 중간 */ --gray-60: ...; /* 본문 (흰 배경과 매직넘버 60) */ --gray-90: ...; --gray-95: ...; /* 아주 진한 면 */ --gray-100: #000000; /* Black */ } /* 유채색은 0·100 제외 11단계: primary-5 ~ primary-95 */

자체 팔레트를 규격에 맞추려면

Gray를 0(흰)·100(검) 포함 13단계로 정렬한다(양 끝 촘촘히).

유채색은 0·100 제외 11단계로 정렬한다.

모든 단계가 명도(Lightness) 기준으로 일정 격자를 이루는지 확인한다.

단계 격자가 매직 넘버(50=4.5:1) 와 정합하는지 검증한다.

13단계, 화면 어디에 쓰나 — 역할 매핑

단계를 만들어도 “그래서 어느 단계를 어디에 쓰지?”가 막막할 수 있습니다. 명도 단계는 화면에서 대체로 다음과 같은 역할로 배치됩니다. (정확한 토큰은 KRDS 시맨틱 토큰을 따르되, 감을 잡는 용도로 보세요.)

명도 영역	대표 단계	화면에서의 역할
가장 밝음	Gray-0 (흰색)	페이지 기본 배경(Surface)
아주 밝음	Gray-5 ~ 10	카드·패널 배경, 영역 구분 바탕, 비활성 면
밝음	Gray-10 ~ 30	테두리, 구분선, 입력칸 경계
중간	Gray-40 ~ 50	보조 텍스트, 플레이스홀더(단, 대비 확인 필수)
어두움	Gray-60 ~ 70	본문 텍스트(흰 배경과 매직넘버 60~70 → 대비 충분)
아주 어두움	Gray-90 ~ 95	제목, 강조 텍스트, 진한 면
가장 어두움	Gray-100 (검정)	최대 강조(드물게 사용)

이 매핑을 보면 왜 양 끝이 촘촘해야 하는지 다시 분명해집니다. 배경(0)과 카드(5)와 구분선(10)은 모두 아주 밝은 영역에 몰려 있는데, 이들을 구분하려면 그 좁은 구간에 단계가 여러 개 있어야 합니다. 만약 밝은 영역에 단계가 0과 20밖에 없다면, 카드와 배경의 차이를 표현할 색이 없어서 카드가 배경에 묻히거나, 반대로 너무 튀게 됩니다.

유채색(Primary 등)의 11단계도 비슷한 논리로 배치됩니다. 아주 연한 단계(예: primary-5~10)는 강조 영역의 은은한 배경(선택된 항목, 알림 박스 바탕)에, 중간 단계(primary-50 안팎)는 핵심 버튼과 링크에, 진한 단계 (primary-70~90)는 hover 상태나 진한 배경 위 강조에 쓰입니다. 같은 파랑이지만 단계를 달리해 배경 역할과 강조 역할을 한 계열 안에서 모두 소화하는 것이죠.

이렇게 단계별 역할이 정리되면, 디자이너는 새 화면을 만들 때 색을 ’발명’하지 않습니다. “여기는 카드니까 Gray-5, 본문이니까 Gray-60” 식으로 역할에 맞는 단계를 고르기만 하면 됩니다. 13단계 규격이 단순한 숫자 놀음이 아니라 실무를 단순하게 만드는 작업 매뉴얼인 이유입니다. 그리고 이 역할 매핑을 시맨틱 토큰(--color-surface, --color-text-default 등)으로 한 번 고정해 두면, 쓰는 사람은 단계 번호조차 신경 쓸 필요가 없어집니다 — 역할 이름만 부르면 되니까요.

정비 우선순위

① Gray 13단계 정렬(화면 대부분) → ② Primary 11단계 → ③ System 색 11단계 → ④ 기타 계열

12. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 우리 Gray가 흰색(0)부터 검정(100)까지 단계로 정의돼 있나요?

□ 단계가 대략 10단계 이상으로 충분히 촘촘한가요?

□ 밝은 배경/진한 텍스트 영역에 세밀한 단계가 있나요?

□ 유채색(파랑 등)도 연함~진함 여러 단계로 펼쳐져 있나요?

□ 우리 단계가 KRDS 토큰(0~100)과 매핑되나요?

❓ FAQ

Q1. 꼭 정확히 13단계여야 하나요? 12개나 14개면 위반인가요? KRDS 표준 규격은 Gray 13 / 유채색 11입니다. 자체 설계라면 이 규격에 맞추는 것이 정합성에 가장 좋습니다. 다만 본질은 ’개수 그 자체’보다 명도 기준의 일정한 격자 + 매직 넘버 정합입니다. 가장 확실한 길은 KRDS 토큰을 그대로 채택해 고민을 없애는 것입니다.

Q2. 단계 숫자(0·5·10…)의 정확한 값은 어디서 받나요? KRDS 공식 사이트의 디자인 토큰 / HTML Component Kit / Figma 라이브러리에 단계별 정확한 색상값이 정의돼 있습니다. 가이드 문서에는 일부 값과 매직 넘버만 예시로 나옵니다.

Q3. 왜 유채색만 0·100을 빼나요? 불공평해 보여요. 0은 순백, 100은 순흑인데 이건 ‘색이 없는’ 무채색입니다. “완전히 흰 빨강”은 그냥 흰색이라 빨강 팔레트에 둘 의미가 없죠. 그래서 양 끝은 Gray가 대표로 갖고, 유채색은 그 사이 11칸만 정의합니다. 불공평이 아니라 중복 제거입니다.

Q4. 우리는 색이 단순한 정적 페이지인데도 13단계가 필요한가요? 배경·텍스트·구분선만 있어도 최소 몇 단계의 Gray는 필요합니다. 다만 KRDS 토큰을 채택하면 13단계가 이미 들어 있으니, “필요한 만큼만 골라 쓰면” 됩니다. 단계가 많다고 다 써야 하는 건 아닙니다.

Q5. 채도 단계는 왜 안 나누나요? 명도가 가독성·대비를 결정하기 때문입니다. 채도로 단계를 나누면 대비 보장이 안 됩니다. 그래서 단계의 기준 축은 명도여야 합니다(DS-004의 “색상과 채도를 기준으로” = 그 둘은 고정, 명도만 변화).

Q6. 기존 사이트의 색을 KRDS 단계에 ’근접 매핑’만 해도 되나요? 좋은 출발점입니다. 우리 사이트의 회색·파랑이 KRDS 단계 중 어디에 가장 가까운지 매핑해 보면, 어떤 색이 규격에서 벗어나 있는지·어떤 단계가 비어 있는지가 한눈에 드러납니다. 다만 최종적으로는 근접 매핑에 그치지 말고, KRDS 토큰 값으로 교체해야 매직 넘버 대비 보장까지 완성됩니다. 매핑은 진단, 교체는 치료입니다.

Q7. 13단계를 다 쓰지 않으면 위반인가요? 아닙니다. 13단계는 ’쓸 수 있는 선택지’이지 ’모두 써야 하는 의무’가 아닙니다. 단순한 사이트는 그중 5~6개 단계만 써도 됩니다. DS-004가 보는 것은 팔레트가 13/11단계 규격으로 구성돼 있느냐이지, 모든 단계를 화면에 노출했느냐가 아닙니다. 도구함에 공구가 다 있되, 필요한 것만 꺼내 쓰면 됩니다.

13. 마무리 — 규격은 ‘제약’이 아니라 ’공용어’

DS-004는 846개 중에서도 가장 ‘규격다운’ 규칙입니다. 13단계, 11단계, 0과 100 — 숫자가 빽빽합니다. 그래서 “왜 이렇게까지 정해놨나” 싶을 수 있지만, 이 규격은 제약이 아니라 공용어입니다.

도량형을 떠올려 보세요. 모두가 미터·킬로그램이라는 같은 단위를 쓰기에 거래와 협업이 가능합니다. 13단계 명도 격자도 마찬가지입니다 — 모든 정부 서비스가 같은 명도 좌표를 공유하기에, 색이 호환되고, 대비가 예측 가능하며, 접근성이 자동으로 따라옵니다. 숫자를 정한 것은 자유를 뺏기 위해서가 아니라, 협업의 토대를 만들기 위해서입니다.

그리고 거듭 강조하지만 — 대부분의 기관은 이 규격을 직접 구현할 필요가 없습니다. KRDS 토큰 키트를 가져다 쓰는 순간 DS-004는 끝입니다. 어려운 건 이해이지 적용이 아닙니다.

다음 편에서는 이 팔레트가 두 개의 얼굴을 갖는다는 이야기로 넘어갑니다. DS-005 — “일반 모드와 선명한 화면 모드를 색상 팔레트에 제공하고 있다.” 같은 13단계 격자가, 저시력·고령 사용자를 위한 고대비 모드에서 어떻게 다시 짜이는지 살펴봅니다.

다음 편 예고 ▶ 「005. 일반 모드와 선명한 화면 모드를 색상 팔레트에 제공하고 있다.」

우리 팔레트가 13/11단계 규격에 맞는지 확인하려면? ViewCheck는 사이트가 실제 사용하는 색을 KRDS 표준 명도 단계(0~100)에 역매핑해, 단계 체계가 규격대로 구성됐는지·끝부분 명도가 충분한지·매직 넘버 대비와 정합하는지를 함께 진단합니다.

📚 참고 출처

KRDS 색상(Color) 스타일 가이드 (13/11단계·매직넘버) — https://www.krds.go.kr/html/site/style/style_02.html

KRDS 디자인 토큰 가이드 — https://www.krds.go.kr/html/site/style/style_07.html

U.S. Web Design System — System color tokens (grade) — https://designsystem.digital.gov/design-tokens/color/system-tokens/

Programming Design Systems — Perceptually uniform color spaces — https://programmingdesignsystems.com/color/perceptually-uniform-color-spaces/