정부의 파랑은 몇 번일까

정부 웹사이트의 파란색을 유심히 본 적 있나요? 그냥 파랑이 아니에요. 정확히 #256ef4라는 번호를 가진, 정해진 파랑이에요.

디자인 시스템에는 "디자인 토큰"이라는 개념이 있어요. 어렵게 들리지만 사실은 색과 크기의 공식 사전이에요. "대표 파랑 = #256ef4", "본문 글자 크기 = 17px"처럼 이름과 값을 정해두는 거죠. 사전이 있으면 디자이너와 개발자가 "그 파랑"이라고만 말해도 서로 같은 색을 떠올릴 수 있어요.

KRDS도 이런 사전을 제공해요. 문제는 이름이었어요.

이름이 너무 많은 걸 담고 있었어요

KRDS 공식 사전의 이름은 krds-light-color-primary-50 같은 식이에요. 자세히 보면 이름 안에 "light"가 들어 있죠. 밝은 화면용 이름과 어두운 화면용 이름이 따로 있는 거예요.

이걸 그대로 쓰면 어떻게 될까요? 화면 부품 41개가 전부 "지금 밝은 모드인가, 어두운 모드인가"를 스스로 물어보고 다른 이름을 골라 써야 해요. 부품마다 그 질문이 스며들고, 하나라도 빠뜨리면 어두운 모드에서 그 부품만 밝은 색으로 남는 사고가 나요.

여기서 오래 고민했어요. 표준을 구현한다면서 표준의 공식 이름을 안 쓰는 게 맞나? 이름까지 지켜야 "KRDS를 준수했다"고 말할 수 있는 것 아닌가?

질문을 바꿨어요

고민 끝에 질문을 바꿨어요. "이름을 지키는 게 목적인가, 이름이 가리키는 색을 지키는 게 목적인가."

사용자가 화면에서 만나는 건 이름이 아니라 색이에요. 그래서 값은 전부 KRDS 그대로 두고, 이름만 다시 설계했어요. 이름에서 밝기(light/dark)를 빼고, 사전을 두 층으로 나눴어요.

• 원료 층 — 진짜 색 값들. "primary-50 = #256ef4" 같은 원료 약 90개
• 역할 층 — "본문 글자색", "화면 바탕색"처럼 쓰임새로 부르는 이름. 각 이름이 원료를 가리켜요

--krds-color-primary-50: #256ef4; /* 원료: KRDS 대표 파랑 */
--krds-foreground: var(--krds-color-gray-90); /* 역할: 본문 글자색 */

이렇게 나누면 어두운 모드가 거의 공짜가 돼요. 부품들은 "본문 글자색"이라는 역할 이름만 쓰고, 모드가 바뀌면 그 역할이 가리키는 원료만 바꿔치기하면 되거든요. 41개 부품은 모드에 대해 아무것도 몰라도 돼요.

17이라는 숫자

사전을 옮기다 보면 KRDS의 디테일에 감탄하는 순간들이 있어요. 제일 좋아하는 건 본문 글자 크기예요. 15도 16도 아니고 17px이에요.

일반적인 웹사이트보다 한두 단계 커요. 공공 서비스는 20대만 쓰는 게 아니니까요. 돋보기 없이도 읽히는 크기 — 숫자 하나에 "누가 이 서비스를 쓰는가"에 대한 답이 들어 있어요. 버튼이 일반적인 것보다 큰 것도, 키보드 초점 표시가 두 겹 테두리로 유난히 또렷한 것도 같은 이유예요.

배운 것

표준을 지킨다는 건 표준의 껍데기(이름)를 베끼는 게 아니라 표준의 의도(값과 이유)를 지키는 일이었어요. 이름은 우리 도구에 맞게 바꿨지만, 사용자가 만나는 색과 크기는 전부 KRDS 그대로예요.

그런데 "전부 그대로"라는 말, 어떻게 믿을 수 있을까요? 다음 글은 그 증명에 대한 이야기예요 — 「"같다"는 말을 증명하기」.