KRDS
디자인 시스템은 단순히 시각적 규칙을 정리하는 것을 넘어, 디지털 서비스의 일관성을 확보하고 접근성을 높이며, 실무자 간 협업을 원활하게 만드는 데 중요한 역할을 한다. 범정부 디자인 시스템(KRDS)은 이러한 목표를 바탕으로 1차 가이드 개발을 시작으로, 2차 디자인 시스템 개발을 통해 더욱 발전된 체계와 사용자 경험을 제공하고자 했다. 이번 글에서는 2차 가이드에서 개선된 주요 내용을 살펴보고, 이를 기반으로 구축된 KRDS 웹사이트가 실무에서 어떤 가치를 제공했는지 알아보고자 한다.
1차 가이드의 시작과 한계
범정부 UI/UX 가이드 1차에서는 기초적인 스타일 가이드와 컴포넌트, 패턴의 사용성 가이드 및 예시 파일을 제공했다. 색상, 서체, 형태, 배치, 시스템 아이콘의 다섯 가지 카테고리로 구성된 1차 스타일 가이드는 핵심 요소를 심플하게 정리했지만, 실무자들이 그 중요성과 활용 방안을 명확히 이해하기에는 다소 부족한 부분이 있었다.
‘이렇게 적용하세요’라는 방식으로 수치와 규칙을 제시했지만, 실무자들이 가이드 준수의 필요성을 체감하기 어려웠고, 구체적인 배경 설명이 부족한 점이 아쉬움으로 남았다.
명확하고 설득력있는 가이드
2차 가이드는 ‘왜 이렇게 적용해야 하는가?’라는 질문에 답하기 위해 설득력 있는 설명을 추가했다. 단순한 수치 제공에서 벗어나, 지침을 준수해야 하는 이유와 그로 인해 기대되는 효과를 제시했다. 또한, 표준형과 확장형으로 구분된 적용 방안을 통해 기관별로 맞춤형 디자인을 구현할 수 있도록 했다.
토큰 기반 디자인 시스템
기존의 디자인 리소스는 에셋 개념의 주요 색상과 글자만 스타일로 등록되어 있어 일관성 유지와 재사용성에 한계가 있었다. 2차 프로젝트에서는 에셋 중심의 리소스를 토큰을 기반으로 한 체계적인 디자인시스템으로 재구축했다. 이를 통해 모든 컴포넌트와 패턴에 디자인 토큰을 적용하여 시각적 일관성을 강화하고, 유지 보수 및 확장성을 개선했다.
디자인 토큰의 도입으로 디자이너와 퍼블리셔 간의 협업 프로세스가 명확해졌으며, 커뮤니케이션 오류를 줄이고 반복 작업을 감소시키는 성과를 얻었고, 이러한 변화는 작업 효율성을 높임과 동시에 최종 사용자 경험의 품질을 크게 향상시킬것으로 기대하고 있다.
디지털 취약계층을 고려한 설계
2차 가이드의 가장 큰 특징 중 하나는 디지털 취약계층을 적극적으로 배려한 설계이다.
선명한 화면 모드
선명한 화면 모드는 다크 모드와는 다르다. 선명한 화면 모드는 고대비 모드이면서 어두운 배경을 베이스로 두고 있다. 일반 모드보다 텍스트와 배경 간의 명도 차이를 크게 하여 콘텐츠의 가독성을 극대화한다. 또한, 버튼과 링크, 텍스트 인풋 등의 UI에서 기능과 상태를 정확하게 인지할 수 있도록 색상 외의 부가 설명, 아이콘과 같은 요소를 통해 기능을 구분할 수 있도록 다른 장치를 구성한다.
* 고대비 모드는 주로 장애인 접근성을 고려해 설계되었지만, 최근에는 다양한 사용자층의 요구를 충족시키는 보편적 디자인의 일환으로 주목을 받는다. 특히 나이가 많은 사용자나 시각적 인지 능력이 낮은 사용자가 디지털 환경에 쉽게 접근하도록 도와준다. 고대비 모드는 텍스트와 배경의 명도차이를 이용해 콘텐츠, 가독성을 극대화 하고, 색맹이나 저시력자를 포함한 다양한 사용자를 고려한다. 또한 버튼, 링크 등 상호작용 요소를 명확히 구분하는 점이 특징이다.
매직넘버와 팔레트
기존 12단계 색상 팔레트에 95값을 추가하여 13단계로 확장했다. 이를 통해 일반 모드와 선명한 화면 모드 간의 색상 매칭이 가능해졌다.
(0,5,10,20 … 90,100으로 정렬되던 값을 95값을 추가해 0,5,10,20 … 80, 95, 100값으로 설정되었다)
비슷한 색일수록 색에 대한 디테일이 보인다. 밝은 배경엔 밝은 레이어의 색상을 디테일하게 볼 수 있고, 어두운 배경에선 어두운 색상의 레이어 색상을 디테일 하게 볼 수 있다. 다크 모드 없이 사용되는 기존 모드에서는 95가 배경과 구분이 잘 안되는 색상이였지만, 일반 모드에서 선명한 화면 모드로 전환시키기 위해서는 필요했다.
작업시 배경과 텍스트, 아이콘의 조합을 매번 명도 대비를 체크하며 작업하는 일은 쉬운 일이 아니다. WCAG 기준에 따른 명도 대비를 쉽게 계산 할 수 있도록 색상팔레트에 매직넘버를 사용했다.
예를 들면, 기존에는 배경색 : gray-5, 글자 색상 : gray-60을 사용하는 경우 명도 대비를 확인하기 위해서는 툴을 사용하여 각 색상 코드를 입력하여 확인했다. 하지만 매직넘버를 사용하면 gray-5와 gray-60의 매직 넘버는 50이므로 ‘명도대비 4.5:1을 준수한다’라는 것을 검증 없이 알 수 있다.
주요 색상은 색약자(특히, 적록색맹과 청색맹 사용자)/색각 이상자를 고려한 색상으로 재구성 했다. 단순히 보기 좋은 색상이 아니라, 누구나 제약없이 서비스를 이용할 수 있도록 사용성을 고려한 디자인으로 발전시켰다.
글자 계층
글자 계층을 기본 구조(Display-Heading-Body)로 심플하게 구성하고, 네비게이션, 레이블과 같은 시멘틱 개념을 추가했다. 기존(Display-Heading-Title-Body)의 구조에서는 헤딩과 타이틀의 역할을 혼돈할 수 있어 이를 코딩의 기본 구조(h1, h2 등)를 반영한 계층 구조를 설정하여 명칭에 대한 애매함을 줄였다. 이런 명칭은 디자인 토큰에서 h1-h2 사이 간격 표기라거나, 타이포의 계층 구조를 표현할때 요긴하게 쓰였다.
브레이크포인트의 유연성 강화
PC, 태블릿, 모바일의 브레이크 포인트를 디바이스 기준 명칭에서 사이즈 기반 명칭으로 변경하여, 다양한 기관들의 사용 범위를 유연하게 대응할 수 있도록 했다. 한국에서 많이 사용되는 디바이스 너비를 기준을 각 기관, 기업들의 브레이크포인트 분할 개수와 포인트를 고민하여 설정했다.
간격 토큰의 세분화
페이지 요소 간의 간격 조정은 디자인에서 가장 반복적이고 시간이 많이 소요되는 작업 중 하나다. 간격에 대한 테스트는 계속 하게되는데 스타일로 등록 할 수 없어 번거러운 작업을 진행했었다. 하지만 2차 가이드에서는 간격 토큰을 활용하여 제목과 본문 사이, 리스트 간 간격 등 여러 요소를 세분화하여 정의했다. 이를 통해 작업 중반이나 후반에도 간격 이슈에서 자유로워질 수 있었다.
예를 들어, 브레드크럼과 헤딩 사이의 간격을 40px에서 24px으로 변경하려면 디자인 작업에서는 모든 페이지에 들어가 간격을 수정했어야 했다. 하지만 지금은 토큰으로 적용하고, 로컬베리어블을 통해 40라는 수치를 24으로 변경만 하면 된다.
명칭에 대한 집착
스타일 가이드 요소들의 명칭을 변경했다.
KRDS 가이드를 제작하는 과정에서 대부분의 용어를 한국어로 표현하려 했다. 1차 가이드가 오픈된 후, 한국어로 제공된 UI/UX 가이드가 이해하기 쉽다는 긍정적인 피드백이 많았다. 그러나 일부 디자인 용어는 번역 과정에서 원래 뉘앙스와 세부적인 의미를 온전히 담아내지 못하는 아쉬움이 남아있었다.
예를 들어, 타이포그래피(typography)를 ‘서체’로 표기하면, 한국에서는 ‘서체’가 글자의 모양이나 글꼴을 뜻하는 좁은 의미로 사용된다. 반면, 타이포그래피는 글자의 크기, 스타일, 간격, 배치 등 디자인의 전체적인 구성과 결과물을 포함하는 더 넓은 개념이다. 이처럼 잘못된 번역은 용어의 본질적인 의미를 오해하게 만들 수 있다. 또한, 그리드(grid), 아이콘(icon), 로고(logo) 등 국제적으로 통용되는 디자인 용어를 번역하면 원래의 뉘앙스가 왜곡될 위험이 있었다. 예를 들어, ‘그리드’를 단순히 ‘격자’로 번역하면 디자이너와 개발자 간의 소통에서 혼란이 생길 수 있다.
이를 해결하기 위해, 2차 가이드에서는 주요 디자인 용어를 다시 원어 그대로 사용하는 방향으로 전환했다.
이와 같은 명칭 선택은 단순히 번역을 넘어서, 디자인 가이드가 실무자들 간의 정확하고 효과적인 의사소통을 돕고, 사용자들이 혼동 없이 이해할 수 있도록 한다.
실무자를 위한 가이드
KRDS 웹사이트는 디지털 정부 서비스를 위한 실무자들에게 직관적이고 체계적인 정보를 제공하는 플랫폼이다. “무엇을, 누가, 어떻게, 어디까지 사용해야 하는가?”라는 핵심 질문에 대한 해답을 제시하며, 실무자들이 효율적으로 활용할 수 있는 최적의 환경을 구축했다. 신규 방문자는 온보딩 과정을 통해 KRDS의 내용을 체계적으로 익힐 수 있으며, 재방문자는 최적화된 탐색 경로를 통해 필요한 자료를 신속히 확인할 수 있다.
1차 과정에서는 PDF 문서의 가이드를 웹상으로 그대로 옮기는 작업을 진행했다. 2차에서는 가이드를 기반으로 한 웹사이트를 구축하여, 실무자들이 더욱 쉽게 접근하고 활용할 수 있도록 했다.
디자이너, 개발자, 정부관계자 실무자의 입장에서 어떻게 시작을 해야하는지, 어떻게 사용해야하는지에 대해 자연스러운 흐름으로 확인할 수 있도록 하고, 검색 기능을 추가하여 쉽게 탐색할 수 있도록 했다.
KRDS의 가이드를 가지고 각 기관의 아이덴티티를 살리는 작업을 어떻게 해야할까? 라는 고민이 많을 수 있다. KRDS의 웹사이트를 보면, 중요 UI요소에서 KRDS의 가이드를 정확히 지키며, KRDS만의 그래픽 색상을 적용하여 배너, 인포그래픽, 이미지등에 활용하여 가이드에 충실한 KRDS만의 디자인을 완성시켰다. 이 사이트 자체가 가이드의 실질적인 활용 가능성을 보여주는 좋은 예시가 될 거라고 기대한다.
마무리,
범정부 디자인 시스템 2차 가이드는 단순히 내용을 고도화하는 것을 넘어, 실무자들에게 명확하고 설득력 있는 체계를 제공했다. 이를 통해 디지털 취약계층을 배려한 설계를 구현하고, 디자인 토큰을 활용한 시스템화를 통해 협업의 효율성을 극대화했다. 이를 통해 공공 서비스가 단순한 기술적 구현을 넘어, 모두를 위한 포괄적 디자인 철학을 실현하는 데 기여하길 바란다. 앞으로도 KRDS는 공공 디자인의 모범 사례로 자리매김하며, 디지털 정부 서비스의 발전에 중추적인 역할을 하길 기대한다.
