공공기관 웹이나 앱을 만들(거나 손볼) 일이 생기면 한 번쯤 이런 생각이 든다. "정부가 정해둔 디자인 표준 같은 건 없나?" 아니면 어디선가 'KRDS'라는 말을 듣고 이게 뭔가 검색해서 들어왔을 수도 있다. 결론부터 말하면 KRDS는 행정·공공기관이 지켜야 할 '정부 디지털 서비스 UI/UX 통합 가이드라인'이고, 웹사이트와 Figma 파일로 무료 공개돼 있다. 이 글을 보면 KRDS가 뭔지, 어떻게 구성돼 있는지, 어디서 받는지까지 한 번에 감이 잡힌다.
솔직히 밝혀두면, 나도 실제 프로젝트에 KRDS를 적용해본 건 아니고 공식 사이트를 직접 둘러보면서 구조를 정리한 글이다. 그러니 "이걸로 뭘 만들어봤다"가 아니라 "처음 보는 사람이 전체 그림을 빠르게 잡는 용도"로 읽으면 딱 맞다. (2026.07 기준 정리 / 최신 배포본은 '25년 8월판)
(스크린샷: KRDS 공식 사이트 www.krds.go.kr 메인 화면, 상단 '디지털 정부서비스 UI/UX 가이드라인' 문구 부분)
(alt: KRDS 공식 사이트 메인 화면 — 디지털 정부서비스 UI/UX 가이드라인 소개)
(파일명 제안: krds-main-screen.png)
1. KRDS가 뭔가 — 한 줄 정의부터
KRDS는 KoRea Design System의 약자다. 행정안전부가 주관하고 한국지능정보사회진흥원(NIA)이 운영하는, 대한민국 정부의 디지털 서비스 디자인 시스템이다.
왜 만들었나부터 짚으면 이해가 빠르다. 그동안 정부·공공 웹과 앱은 기관별, 심하면 부서별로 UI/UX를 따로따로 만들었다. 그러다 보니 국민 입장에서는 A기관 사이트와 B기관 사이트의 버튼·입력폼·오류 화면이 다 제각각이라 매번 새로 배워야 하는 셈이었다. KRDS는 이 공통 요소들을 하나의 표준으로 묶어서, 어느 정부 서비스를 쓰든 비슷한 방식으로 이해하고 조작할 수 있게 만드는 것이 목표다.
한 가지 짚어둘 게 있다. KRDS는 "이렇게 하면 좋아요" 수준의 권고가 아니다. 전자정부법, 정보시스템 구축·운영 지침, 전자정부 웹사이트 품질관리 지침 등을 근거로 행정기관·공공기관이 준수해야 할 대상으로 제시된다. 즉 공공 서비스를 새로 구축하거나 개편할 때 참고가 아니라 기준이 되는 문서다.
참고: 그래서 민간 기업이 만드는 서비스에는 법적 강제력이 없다. 다만 접근성과 일관성을 꽤 잘 정리해둔 공개 자료라, 민간에서도 자사 디자인 시스템을 잡을 때 참고하는 경우가 많다.
2. 어떻게 구성돼 있나 — 5개의 축
KRDS를 처음 열면 항목이 많아 당황스럽기 마련인데, 크게 다섯 개 축으로 나눠 보면 지도가 그려진다.
- 디자인 원칙 — 가이드 전체를 관통하는 대원칙. 사이트 '시작하기' 영역에서 7가지 원칙으로 제시돼 있다.
- 스타일 가이드 — 색상, 타이포그래피 같은 시각 표현의 기준. 기본 서체는 국·영문 모두 Pretendard GOV를 쓴다.
- 컴포넌트 — 화면을 구성하는 최소 부품(버튼, 표, 헤더 등).
- 기본 패턴 — 여러 컴포넌트를 조합해 만드는 공통 과업 단위(입력폼, 동의, 오류 등).
- 서비스 패턴 — 사용자의 실제 여정 단위(방문, 검색, 로그인, 신청 등).
핵심은 아래로 갈수록 조립 단위가 커진다는 점이다. 작은 부품(컴포넌트)을 모아 공통 과업(기본 패턴)을 만들고, 그 과업들을 이어 하나의 서비스 흐름(서비스 패턴)을 완성하는 구조다. 이 위계만 잡고 있으면 방대한 항목 사이에서 길을 덜 잃는다.
3. 핵심 3층 뜯어보기 — 컴포넌트 / 기본 패턴 / 서비스 패턴
위 5개 축에서 실제로 화면을 만드는 알맹이는 아래 세 층이다. 헷갈리기 쉬워서 표로 한 번 정리했다.
| 층위 | 조립 단위 | 예시 | 한 줄 역할 |
|---|---|---|---|
| 컴포넌트 | 화면 최소 부품 | 헤더, 푸터, 공식 배너, 버튼, 표, 아코디언, 모달, 탭 | 개별 요소 하나 |
| 기본 패턴 | 공통 과업 | 입력폼, 동의, 오류, 개인 식별 정보 입력, 필터링·정렬, 확인 | 자주 반복되는 작업 묶음 |
| 서비스 패턴 | 사용자 여정 | 방문, 검색, 로그인, 신청, 정책 정보 확인 | 서비스 이용 흐름 전체 |
조금 더 풀어보면 이렇다.
- 컴포넌트는 다시 성격별로 묶여 있다. 서비스 정체성을 보여주는 아이덴티티(공식 배너, 운영기관 식별자, 헤더·푸터), 화면 이동을 돕는 탐색(건너뛰기 링크, 메인 메뉴, 브레드크럼, 페이지네이션 등), 정보를 배치·표현하는 레이아웃·표현(구조화 목록, 모달, 아코디언, 표, 탭 등), 그리고 액션·선택·피드백·도움·입력 계열로 나뉜다. 화면에서 눈에 보이는 거의 모든 조각이 여기 들어 있다고 보면 된다.
- 기본 패턴은 서비스 종류와 상관없이 반복되는 과업이다. 예를 들어 '오류' 패턴은 단순히 문제가 났다고 알리는 데 그치지 않고, 사용자가 원래 하려던 걸 끝까지 해낼 수 있게 유도하라고 안내한다. '동의' 패턴은 방대하고 어려운 약관을 알기 쉽게 구조화하라고 말한다.
- 서비스 패턴은 방문→검색→로그인→신청처럼 실제 이용 흐름을 다룬다. 컴포넌트와 기본 패턴을 조합해 하나의 완결된 사용자 경험을 설계하는 층이다.
4. 뭐가 좋나 — 눈에 띄는 지점
사이트를 둘러보며 "이건 꽤 신경 썼네" 싶었던 부분만 추리면 이렇다.
- 접근성이 기본 전제로 깔려 있다. 컴포넌트·패턴마다 웹접근성(WCAG, Web Content Accessibility Guidelines) 적합성을 함께 표기해두는 식이라, 접근성을 나중에 얹는 게 아니라 처음부터 챙기도록 유도한다.
- 문서가 아니라 살아있는 자료다. 예전 정부 가이드는 두꺼운 PDF 한 부로 끝나는 경우가 많았는데, KRDS는 웹사이트 + Figma 파일로 제공돼서 실무에 바로 끌어다 쓰기 좋다.
- 자체 검증 체크리스트를 준다. 내가 만든 화면이 가이드를 잘 따랐는지 스스로 점검할 수 있는 체크리스트가 함께 제공된다.
5. 어디서 받나 — 시작 포인트
공식 사이트 www.krds.go.kr로 들어가면 '시작하기'와 '리소스 다운로드' 메뉴가 있다. 여기서 받을 수 있는 것들은 대략 이렇다.
- 디지털 정부서비스 UI/UX 가이드라인 문서(PDF) — 2026.07 확인 시점 기준 최신은 '25년 8월판이다. 배포본은 갱신되니 받을 때 사이트에서 최신 날짜를 한 번 확인하자.
- Figma용 디자인 리소스(컴포넌트·패턴 예제)
- 기본 서체 Pretendard GOV
- 자체 검증 체크리스트
주의: 검색하다 보면
v04.krds.go.kr같은 주소가 뜰 수 있는데, 이건 버전/미리보기 성격의 서브도메인이다. 실제 최신 자료와 공식 안내는www.krds.go.kr에서 확인하는 게 안전하다.
6. 마무리 — 핵심 3줄 요약
- KRDS(KoRea Design System)는 행안부·NIA가 만든 정부 디지털 서비스 UI/UX 표준으로, 공공기관은 준수 대상이다.
- 구성은 디자인 원칙·스타일 가이드·컴포넌트·기본 패턴·서비스 패턴이며, 컴포넌트 → 기본 패턴 → 서비스 패턴 순으로 조립 단위가 커진다.
- 웹사이트 + Figma + 체크리스트로 무료 공개돼 있고, 받는 곳은 www.krds.go.kr이다.
다음 단계로는, 실제로 컴포넌트 하나(예: 버튼이나 입력폼)를 골라 KRDS 가이드대로 만들어보고 그 과정을 기록하면 이 입문 글과 자연스럽게 이어지는 실전편이 된다.
자주 묻는 질문(FAQ)
Q. KRDS는 꼭 지켜야 하나?
행정기관·공공기관이 디지털 서비스를 구축·운영할 때는 준수 대상이다. 전자정부법 등을 근거로 하는 기준 문서라 단순 권고와는 성격이 다르다.
Q. 민간 기업도 써도 되나?
법적 강제 대상은 아니지만, 공개된 자료라 자유롭게 참고할 수 있다. 접근성과 공통 패턴이 잘 정리돼 있어 자사 디자인 시스템의 출발점으로 삼기 좋다.
Q. v04.krds.go.kr과 www.krds.go.kr은 뭐가 다른가?www가 공식 서비스 주소다. v04는 버전/미리보기 성격의 서브도메인으로 보이며, 최신 배포본 목록도 www 쪽이 더 최신이다. 자료를 받거나 링크를 걸 때는 www.krds.go.kr을 쓰는 걸 권한다.
발행 참고용 메타데이터
URL 슬러그(영문 권장): krds-government-uiux-guideline
메타 설명(약 150자):
KRDS(정부 디지털 서비스 UI/UX 가이드라인)가 뭔지, 컴포넌트·기본 패턴·서비스 패턴으로 나뉜 구성과 다운로드 방법까지 정부 표준 디자인 시스템을 처음 보는 사람도 감 잡도록 정리했다. 공공 웹·앱 실무 입문용.
제목 후보:
- KRDS란? 정부 디지털 서비스 UI/UX 가이드라인 정리 ← 추천(검색어 'KRDS'·'정부 UI/UX 가이드라인'을 앞쪽에 배치, 입문 의도와 일치)
- 정부 UI/UX 가이드라인 KRDS, 처음부터 구조 정리
- 공공 웹·앱 디자인 표준 KRDS 한눈에 정리하기
검색 의도: 정보형(입문·개념 이해). "KRDS", "정부 UI/UX 가이드라인", "디지털 정부서비스 디자인 시스템", "공공 웹 디자인 가이드" 등으로 유입되는 독자 대상.
구조화 데이터 제안: Article + FAQPage(위 FAQ 블록 활용). 스킨 head 수정 영역이라 글만으로는 적용 불가 — 스킨에서 별도 확인 필요.
링크 처리: 본문 KRDS 링크는 외부·비제휴이므로 일반 링크(필요 시 rel="noopener"). 제휴 링크 없음 → 고지 문구 불필요.
내부 링크: 현재 이 주제와 직접 연결되는 기존 글이 없어 비워뒀다. 접근성/디자인 관련 기존 글이 있으면 YYYY.MM.DD - [카테고리] - 글 제목 포맷으로 도입부에 연결 권장.
확인 필요(사용자 직접):
- 디자인 원칙 "7가지" 수치는 2차 자료 기반이다. 발행 전 사이트 '시작하기'에서 실제 원칙 개수·명칭을 확인하면 더 정확하다.
- 스크린샷 1컷(메인 화면) 자리표시자 삽입해둠 — 직접 캡처 후 넣으면 된다.
'IT > Tech' 카테고리의 다른 글
| 리얼포스 키보드 청소 방법 - 키캡 세척과 본체 관리 총정리 (0) | 2026.07.17 |
|---|---|
| 마누스 AI 안드로이드 대란 총정리, 지금 무료로 시작하는 방법 (0) | 2026.07.11 |
| 클라우드플레어(cloudflare) 페이지에 내 도메인 연결하는 방법 (0) | 2026.07.08 |
| 퍼플렉시티 프로 월 3천원에 저렴하게 사용하는 방법 : 겜스고 공유 구독 솔직 정리 최신 (0) | 2026.06.27 |
| 맥미니 도커로 한국어 TTS 서버 직접 구축하기 — Chatterbox Multilingual 셀프 도커 설치 방법 (1) | 2026.06.03 |