# 한국 디지털 정부서비스 UI/UX 가이드라인, KRDS로 발전

> Clean Markdown view of GeekNews topic #18866. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=18866](https://news.hada.io/topic?id=18866)
- GeekNews Markdown: [https://news.hada.io/topic/18866.md](https://news.hada.io/topic/18866.md)
- Type: news
- Author: [carnoxen](https://news.hada.io/@carnoxen)
- Published: 2025-01-23T10:58:31+09:00
- Updated: 2025-01-23T10:58:31+09:00
- Original source: [krds.go.kr](https://www.krds.go.kr/html/site/index.html)
- Points: 42
- Comments: 12

## Summary

한국의 행정 및 공공 기관용 웹 어플리케이션 디자인 가이드라인이 "한국 디자인 시스템(KRDS)"으로 변경되었습니다. 주요 변경사항으로는 엘리베이션, 선명한 화면 모드, 탭바 등 11종의 신규 가이드라인 추가와 기존 가이드라인의 세부내용 개선 및 표준 프로토타입 보완이 포함됩니다. 이 시스템은 색상, 타이포그래피, 형태, 레이아웃, 아이콘 등 디자인 스타일과 컴포넌트, 기본 패턴, 서비스 패턴을 포함한 다양한 요소를 다루고 있습니다. 예상 외(?)로 잘 만들었다는 평이네요.

## Topic Body

한국의 행정/공공 기관의 웹 어플리케이션을 만들 때 적용할 디자인 목록을 보여주는 사이트입니다. 2025.1.16 "디지털 정부서비스 UI/UX 가이드라인"에서 "한국 디자인 시스템(KRDS)"이라는 이름으로 새롭게 변경되었습니다.  
  
### 주요 변경사항  
1) 신규 가이드라인 추가 (11종)  
   - 디자인 스타일 : 엘리베이션 (Elevation), 선명한 화면 모드 (High contrast mode)  
   - 탐색 : 탭바 (Tab bars)  
   - 레이아웃 및 표현 : 스플래시 스크린 (Splash screen), 텍스트 목록 (Text list)  
   - 선택 : 토글 스위치 (Toggle switch)  
   - 도움 : 툴팁 (Tooltip)  
   - 설정 : 언어 변경 (Language switcher), 화면 크기 조정 (Resize)  
   - 콘텐츠 : 접근 가능한 미디어, 숨긴 콘텐츠 (Visually hidden)  
2) 기존 가이드라인 세부내용 개선 및 표준 프로토타입 보완 (20종)  
   - 디자인 스타일 (5종) : 색상 (Color), 타이포그래피 (Typography), 형태 (Shape), 레이아웃 (Layout), 아이콘 (Icon)  
   - 컴포넌트 (7종) : 운영기관 식별자 (Identifier), 헤더 (Header), 푸터 (Footer), 메인 메뉴 (Main menu), 라디오 버튼 (Radio button), 셀렉트 (Select), 파일 업로드 (File upload)  
   - 기본 패턴 (2종) : 입력 폼, 필터링·정렬  
   - 서비스 패턴 (6종) : (검색)검색어 입력, (검색)검색 결과 확인, (검색)상세 검색, (로그인)로그인 정보 입력 , (로그인)서비스 이용, (신청)서비스 정보 확인  
  
---  
### 관련 항목  
* [USWDS - 미국 연방정부용 디자인 시스템](https://news.hada.io/topic?id=6263)

## Comments



### Comment 34210

- Author: bobross0
- Created: 2025-02-05T17:50:06+09:00
- Points: 2

왜 잘 만든건데...

### Comment 33815

- Author: jjpark78
- Created: 2025-01-24T13:31:27+09:00
- Points: 2

이런거 할 여유와 의지가 있다면 그걸 그대로 자바와 스프링 프레임워크 걷어내는거에도 힘좀 쓰시지..  
  
보안 레벨, 테스트 통과 품질, 표준 통신 규격, 인증 표준등등만 강력하게 빈틈없이 만들어주고  
  
중소기업들이 언어나 프레임웍에 지배되지 않고 자유롭게 개발했으면 함.  
  
죽어가는 자바라는 언어에 생명줄 대고 있는 대한민국 정부 프레임워크의 기술락인의 부정적인 효과가 나중에 어떤 눈덩이로 불어올지 ㄷㄷㄷ 합니다.

### Comment 33833

- Author: carnoxen
- Created: 2025-01-24T17:40:47+09:00
- Points: 1
- Parent comment: 33815
- Depth: 1

자바 대안은 찾을 수 있겠지만, 스프링 대안은 글쎄요...

### Comment 33803

- Author: techtech
- Created: 2025-01-24T09:58:15+09:00
- Points: 2

아주 좋네요!!

### Comment 33793

- Author: riki3
- Created: 2025-01-23T21:11:18+09:00
- Points: 3

?? 왜.. 잘 만들었을까요?

### Comment 33795

- Author: jic5760
- Created: 2025-01-24T08:45:29+09:00
- Points: 2
- Parent comment: 33793
- Depth: 1

ㅋㅋㅋㅋㅋㅋㅋㅋ 진짜 왜 잘만들었지....  
약간 토스 느낌도 나네요

### Comment 33791

- Author: white9s
- Created: 2025-01-23T17:52:16+09:00
- Points: 3

상당히 공을 많이 들인 거 같은데요, 퀄리티가 훌륭합니다.  
앞으로도 꾸준히 관리가 되었으면 좋겠네요.

### Comment 33789

- Author: savvykang
- Created: 2025-01-23T17:13:46+09:00
- Points: 2

세계 각국의 정부용 디자인 시스템 참고자료입니다. https://github.com/ctdesign/gov-design-systems-list/blob/master/README.md

### Comment 33787

- Author: bbulbum
- Created: 2025-01-23T16:29:41+09:00
- Points: 2

과거 정부서비스 가이드라인때 보고 진지하게 가이드가 괜찮다 싶었는데, 더 밀어주나 보네요.  
공공기관 특유의 그 맛이 제 입맛엔 어색하지만 나쁘지 않군요.

### Comment 33788

- Author: bbulbum
- Created: 2025-01-23T16:30:09+09:00
- Points: 2
- Parent comment: 33787
- Depth: 1

github 과 figma 링크도 있네요

### Comment 33778

- Author: nemorize
- Created: 2025-01-23T15:03:21+09:00
- Points: 2

생각보다 더 많이 괜찮은데요..?!

### Comment 33774

- Author: felizgeek
- Created: 2025-01-23T13:03:10+09:00
- Points: 2

JS, CSS로 설치가능하고 컴포넌트 예시 코드도 있습니다.   
의존성 없이 실행할 수 있어 훌륭해요.  
  
<link href="https://cdn.jsdelivr.net/npm/krds-uiux@1.0.1/resources/cdn/krds.min.css" type="text/css" rel="stylesheet" />  
<script defer src="https://cdn.jsdelivr.net/npm/krds-uiux@1.0.1/resources/cdn/krds.min.js"></script>  
  
Component Head 코드 포함  
https://www.krds.go.kr/html/site/component/component_02_03.html