가이드는 있는데 코드가 없다 — krdscn/ui를 만든 이유

공공기관 웹사이트를 만드는 프로젝트에는 어느 순간 꼭 등장하는 요구사항이 있어요. "KRDS를 준수해 주세요."

KRDS는 대한민국 정부 디자인 시스템이에요. 쉽게 말해 정부와 공공기관 웹사이트가 따라야 하는 디자인 규칙집이죠. 이 규칙 덕분에 정부24에서 민원을 떼든 다른 기관 사이트에서 지원금을 신청하든, 버튼은 비슷한 자리에 비슷한 모양으로 있고 안내 문구는 비슷한 방식으로 나와요. 국민 입장에서 사이트마다 사용법을 새로 배우지 않아도 되는 거예요.

여기까지는 좋아요. 문제는 그다음이에요.

레시피는 있는데 밀키트가 없어요

KRDS 공식 자료는 디자인 가이드 중심이에요. 어떤 색을 쓰고, 버튼은 얼마나 크고, 안내 문구는 어디에 두는지 — 그림과 문서로는 아주 자세해요. 그런데 개발자가 실제 화면을 만들 때 바로 가져다 쓸 코드는 마땅치 않았어요.

요리에 비유하면 이래요. 사진과 설명이 자세한 레시피는 있는데, 밀키트가 없어요. 재료 손질부터 전부 직접 해야 하죠. 그리고 공공 프로젝트를 할 때마다 같은 요리를 매번 처음부터 다시 했어요.

버튼, 입력창, 달력, 팝업. 지난 프로젝트에서 만든 걸 가져오면 되지 않냐고요? 프로젝트마다 사정이 다르고, 현장에서 만든 코드는 보통 그 프로젝트의 것이라 다음 현장으로 들고 갈 수 없어요. 그래서 또 처음부터. 몇 번째인지 모를 같은 버튼을 만들다 보면 이런 생각이 들어요.

"이걸 한 번만 제대로 만들어서, 누구나 가져다 쓰게 하면 안 되나?"

그래서 만들었어요

krdscn/ui는 그 질문의 답이에요. KRDS의 규칙을 따르는 화면 부품 — 개발자들은 이걸 컴포넌트라고 불러요 — 41개를 만들었고, 사용법을 보여주는 예제 199개와 함께 문서 사이트로 공개했어요.

개발자라면 부품을 이렇게 한 줄로 가져다 쓸 수 있어요. 프로젝트마다 반복하던 일을 이 한 줄이 대신해요.

import { Button } from "@/components/ui/krds/(action)/button"

만들면서 한 고민들

솔직히 만드는 것 자체보다, 만들면서 마주친 결정들이 훨씬 어려웠어요. 이 시리즈는 그 고민의 기록이에요.

• 만들지 않기로 했어요 — 처음부터 다 만들 것인가, 검증된 것 위에 얹을 것인가. 프로젝트의 방향을 가른 첫 결정
• 정부의 파랑은 몇 번일까 — 표준의 공식 이름을 버려야 했던 순간. 표준을 지킨다는 것의 의미
• "같다"는 말을 증명하기 — 기계에게 판정을 맡기려다 막히고, 기계와 사람의 역할을 다시 나눈 이야기
• 마우스 없이 쓰는 사람들 — 보이지 않는 사용자를 위한 설계

한 편씩, 편하게 읽어주세요.