디지털 정부 디자인 시스템 프로젝트 사례 요약
- 클라이언트
- 디지털 정부 서비스
- 산업
- 공공 서비스, 디자인 시스템
- 문제
- 디지털 정부 서비스 UI/UX 가이드라인 배포 이후, 인력과 비용 제약이 있는 공공기관이 가이드라인을 더 빠르게 적용할 방법이 필요했습니다.
- 플립 역할
- 플립커뮤니케이션즈는 KRDS 웹사이트, 디자인 라이브러리, HTML 컴포넌트 KIT, 전문가 문의 응대 흐름을 설계했습니다.
- 접근
- 디자인 라이브러리와 HTML 컴포넌트 KIT를 연동하고 토큰 기반 구조를 적용해 반응형 화면과 대비모드 구현을 더 빠르게 지원했습니다.
- 제작물
- KRDS 웹사이트, 디자인 시스템, 디자인 라이브러리, HTML 컴포넌트 KIT, 리소스 다운로드, 튜토리얼, 문의 지원 채널
- 결과
- 공공기관 실무자가 디자인 시스템을 활용하고 범정부 UI/UX 가이드라인을 적용할 수 있도록 웹사이트와 전문가 문의 응대를 제공했습니다.
- 키워드
- KRDS, 디지털 정부, 공공 UI UX, 디자인 시스템, HTML 컴포넌트 KIT, 디자인 토큰
디지털 정부 디자인 시스템
KRDS (KoRea Design System)
디지털 정부 디자인 시스템
- 2025.01.15
RESPONSE
커뮤니티 중심으로 KRDS V1.0.0에 대한
응원과 관심이 지속되고 있습니다.
BACKGROUND
“어떻게 하면 더 많은 공공기관 서비스에
KRDS를 빠르게 적용할 수 있을까?”
사용자 경험(UX) 및 인터페이스(UI)를 중요한 문제로 인식하고 공공 서비스를 개선하고자 시작된 본 사업은 그 첫걸음으로 ‘디지털 정부 서비스 UIUX 가이드라인’을 배포했습니다. 하지만 인력, 비용 등 여러 제약을 가진 공공 기관의 업무 환경에서 “어떻게 하면 더 많은 웹 앱 프로덕트에 가이드라인을 빠르게 적용하게 할 수 있을까?” 는 다음 숙제로 남아있었습니다.
“효율적인 업무 환경을 위해서는 ‘시스템 개선’이 필요했습니다
이에 저희는 효율적인 업무 프로세스를 위해 고민하였으며, 자체 보유한 디자인 시스템을 보강하여, 기존에 이루어지던 수동 작업 방식을 ‘자동화한 디자인 시스템’을 개발하게 되었습니다.
DESIGN SYSTEM(1)
KRDS 디자인 시스템은 ‘토큰’으로 설계되어
실무자들의 업무 효율을 극대화 합니다.
토큰 변경만으로 웹사이트에 자동 반영
KRDS는 ‘디자인 라이브러리’와 ‘HTML 컴포넌트 KIT’를 연동하여, 토큰 값 변경만으로 CSS에 자동 반영 후 HTML에 자동 적용되도록 할 수 있습니다.
반응형 및 선명한 화면을 토큰으로 빠르게 구현
대비모드(선명한 화면 모드)와 반응형 모드 작업 시 KRDS 변수기능을 활용하면 작업자들이 좀더 편하고 빠르게 화면을 구현할 수 있습니다.
코드 개발 없이 화면 구현 가능
KIT를 통해 컴포넌트 및 상호작용에 대한 ‘표준화된 코드’를 제공하여, 개발자가 별도의 작업 없이 화면 구현이 가능하며, 디자인 없이도 개발자가 UI 일관성을 유지할 수 있습니다.
DESIGN SYSTEM(2)
KRDS 디자인 시스템은 ‘사용성과 접근성 향상’을 위한
바로 사용 가능한 솔루션입니다.
접근성을 위한 최적의 가이드
KRDS 디자인 토큰은 디지털 취약계층을 고려하여 설계된 토큰으로, 디지털 정부 서비스를 사용하는 모두에게 불편함이 없도록 W3C 웹 콘텐츠 접근성 지침 레벨 AA이상의 원칙을 기반으로 설계되었습니다. KRDS 사용 시, 각 기관별 실무자가 자체 색상 팔레트를 제작해야하기 때문에, 저희는 “어떻게 하면 웹 접근성을 준수하는 색상 팔레트를 모두가 쉽게 만들 수 있을까?” 를 고민했습니다. 그 해답으로 ‘매직 넘버’를 사용하였고, 이는 솔루션 제공에 큰 도움이 되었습니다.
가이드라인 적용 효과 확인
실제 서비스에서의 사용자 의견을 포함하여 다양한 정성·정량적 방법론에 근거하여 사용자 관점의 가이드라인 적용 효과를 확인하였으며, 데이터에 기반한 가이드라인 보완/개선 방향성 및 향후 성과 검증 방안을 도출하였습니다.
WEB SITE
KRDS 웹사이트는 디자인 시스템의 ‘첫 모범사례’이며,
디지털 정부 서비스 UI/UX에 대한 철학을 전달합니다.
실무자를 위한 가이드 웹사이트
사용자가 필요로 하는 주요 정보 및 기능을 중심으로 구현하여, 실무담당자(디자이너, 개발
자, 정부관계자 등)가 업무 수행 시 빠르게 원하는 목표를 달성 할 수 있도록 하였습니다.
Structure
Sub
Tutorials
-
Step1. 이해하고 시작하기
-
Step2. 가이드라인 이해하기
-
Step3. 문의하기
designer flow
1디자이너 컨텐츠
2튜토리얼 영상 시청
3리소스 다운로드
4리소스 사용방법 보기
5가이드라인 탐색하기
6궁금한 점 문의하기
SUPPORT
‘전문 인력’의 문의 응대로 가이드 적용에
실질적인 도움을 제공합니다.
저희는 공공기관이 디자인 시스템을 잘 활용하고, 범정부 UIUX 가이드라인을 효율적으로 적용할
수 있도록, 웹사이트의 소통채널을 중심으로 전문가 문의 응대를 지원하고 있습니다.
“KRDS를 더 많은 곳에서 적용할 수 있도록 돕는 일,
그래서 국민의 일상에 작은 도움이 될 수 있게 하는 일,
나아가 한국의 디자인 시스템(KRDS)이 세계적인 수준으로 도약하게 만드는 일
이것이 플립이 가진 역량으로 대한민국에 기여할 수 있는 의미 있는 일입니다.”
