KRDS (KRDS 대한민국 정부 디자인 시스템)
공식 배너 아래 17px 본문과 정부 청색 하나로 끝내는 누구나 읽히는 공공 화면
Brand DNA
브랜드 DNA
- 브랜드명: KRDS (Korea Design System, 대한민국 정부 디자인 시스템)
- 한 줄 정체성: 행정안전부가 2024년 공개한 범정부 UI/UX 디자인 시스템. 중앙행정기관·공공기관 누리집이 같은 눈금과 같은 부품으로 만들어지도록 토큰·컴포넌트·패턴을 묶었다
- 공식 디자인 철학: 「디지털 정부서비스 UI/UX 가이드라인」에 뿌리를 둔 누구나 쉽게 쓰는 공공 서비스 — 접근성(WCAG 2.1 적합성을 컴포넌트마다 명시), 일관성, 예측 가능한 흐름
- 시그니처 요소 1개: 화면 맨 위의 공식 배너(「이 누리집은 대한민국 공식 전자정부 누리집입니다.」) + 흰 바탕 위 17px 본문과 정부 청색 Primary 50(#256EF4) 한 가지로 행동을 이끄는 구성
Tone & Mood
톤 & 무드
- 핵심 키워드 3개: 신뢰, 명료, 포용
- 무드 설명: 장식보다 읽힘이 먼저다. 큰 본문(17px)과 넉넉한 행간(150%), 한 화면에 하나의 주요 행동. 색은 정부 상징의 청색·회색·적색을 디지털용으로 다듬어 쓰고, 강조는 청색 하나에 몰아준다.
- 비주얼 스타일: 모던 미니멀 — 평평한 면, 얇은 1px 경계선, 절제된 그림자
- 밀도(Density): Comfortable — 고령층·저시력 사용자를 전제로 본문 17px·버튼 48~56px 높이를 기본으로 잡는다
- 모서리 성향: Soft (4~8px) — 버튼 6px, 큰 버튼·입력창 8px, 카드 10~12px
- 평면성: Flat — 위계는 면 색(흰색↔회색 면 교차)과 경계선으로, 그림자는 떠 있는 요소에만
Color System
컬러 시스템 (CSS 변수)
KRDS 공식 토큰(krds_tokens.css)은 5~95 단계(11단)다. 아래는 스키마의 9단계에 대응시킨 값이며, 괄호 안이 공식 단계명이다. 공식 문서는 두 모드(기본 모드 / 선명한 화면 모드)를 둔다. 이 파일은 기본 모드다.
:root {
/* Primary — 정부 청색 (primary-5 ~ primary-90) */
--color-primary-50: #ECF2FE; /* primary-5 — 선택 행·정보 면 */
--color-primary-100: #D8E5FD; /* primary-10 — element-primary-light */
--color-primary-200: #B1CEFB; /* primary-20 */
--color-primary-300: #86AFF9; /* primary-30 */
--color-primary-400: #4C87F6; /* primary-40 */
--color-primary-500: #256EF4; /* primary-50 — 버튼 채움·링크 기본 */
--color-primary-600: #0B50D0; /* primary-60 — hover, text-primary */
--color-primary-700: #083891; /* primary-70 — pressed */
--color-primary-800: #052561; /* primary-80 */
--color-primary-900: #03163A; /* primary-90 */
/* Secondary — 정부 남색 (보조 면·보조 제목) */
--color-secondary-50: #EEF2F7; /* secondary-5 — 공식 배너 배경 */
--color-secondary-500: #346FB2; /* secondary-50 */
--color-secondary-700: #063A74; /* secondary-70 */
--color-secondary-800: #052B57; /* secondary-80 — text-secondary */
/* Point — 정부 적색 (강조 점, 소량) */
--color-point-500: #D63D4A; /* point-50 */
/* Neutral — gray-0 ~ gray-100 */
--color-neutral-0: #FFFFFF; /* gray-0 — 페이지·카드 */
--color-neutral-50: #F4F5F6; /* gray-5 — surface-gray-subtler */
--color-neutral-100: #E6E8EA; /* gray-10 */
--color-neutral-200: #CDD1D5; /* gray-20 — border-gray-light */
--color-neutral-300: #B1B8BE; /* gray-30 — border-gray */
--color-neutral-500: #6D7882; /* gray-50 */
--color-neutral-700: #464C53; /* gray-70 — text-subtle */
--color-neutral-900: #1E2124; /* gray-90 — text-basic */
--color-neutral-1000: #000000; /* gray-100 */
/* Semantic (bg = -5, fg = -60 텍스트) */
--color-success-bg: #EAF6EC; /* success-5 */
--color-success-fg: #267337; /* success-60 */
--color-warning-bg: #FFF3DB; /* warning-5 */
--color-warning-fg: #8A5C00; /* warning-60 */
--color-error-bg: #FDEFEC; /* danger-5 */
--color-error-fg: #BD2C0F; /* danger-60 */
--color-info-bg: #E7F4FE; /* information-5 */
--color-info-fg: #096AB3; /* information-60 */
/* Surface — 흰 면과 회색 면을 번갈아 쌓는다 */
--bg-base: #FFFFFF; /* background-white */
--bg-subtle: #F4F5F6; /* surface-gray-subtler — 섹션 구분 */
--bg-elevated: #FFFFFF; /* surface-white — 카드 */
--bg-overlay: rgba(0,0,0,0.5);/* alpha-black50 — 모달 딤 */
/* Text */
--text-primary: #1E2124; /* text-basic (gray-90) */
--text-secondary: #464C53; /* text-subtle (gray-70) */
--text-tertiary: #6D7882; /* gray-50 — 캡션 (추정 매핑) */
--text-on-primary: #FFFFFF;
--text-disabled: #8A949E; /* text-disabled (gray-40) */
/* Border */
--border-default: #B1B8BE; /* border-gray (gray-30) */
--border-subtle: #CDD1D5; /* border-gray-light (gray-20) */
--border-strong: #58616A; /* border-gray-dark (gray-60) */
--border-focus: #256EF4; /* border-primary — 포커스 링 */
--border-width: 1px; /* border-width-variable-regular (선명한 화면 모드 2px) */
}### ③.1 사용 컨텍스트 주석
- 매직넘버: 두 색의 단계 차이가 40이면 3:1, 50이면 4.5:1, 70이면 7:1, 90이면 15:1 이상 대비가 나온다(공식). 예: gray-5 배경 위 gray-60 글자 → 차이 55 → 본문 사용 가능.
--color-primary-500: 주요 버튼 채움·링크. 링크 방문 색은#5917B8.--color-secondary-50: 공식 배너 배경(surface-secondary-subtler).--color-point-500: 필수 입력 표시(*)·새 소식 점처럼 아주 작은 면에만.
Typography
타이포그래피
- 폰트 페어링:
- 한글: Pretendard GOV (OFL — 공식 기본 서체, 국문·영문 공용)
- 영문: Pretendard GOV (OFL) / 폴백 Pretendard, Apple SD Gothic Neo, Malgun Gothic
- 굵기: Regular(400)·Bold(700) 두 가지만 쓴다(공식 토큰
font-weight-regular / bold) - 위계 (PC 기준, font-size / font-weight / line-height / letter-spacing):
- Display (display-large): 60px / 700 / 1.3 / 0 (line-height 추정)
- H1 (heading-xlarge): 40px / 700 / 1.4 / 0 (line-height 추정)
- H2 (heading-large): 32px / 700 / 1.4 / 0 (line-height 추정)
- H3 (heading-medium): 24px / 700 / 1.5 / 0
- Body Large (body-large): 19px / 400 / 1.5 / 0
- Body (body-medium): 17px / 400 / 1.5 / 0 — KRDS 본문 기본값
- Body Small (body-small): 15px / 400 / 1.5 / 0
- Caption (body-xsmall): 13px / 400 / 1.5 / 0
- 모바일: display-large 44px, heading-xlarge 28px, heading-large 24px, 본문은 PC 와 같은 17px 유지.
- 글자 크기 조절: 공식 헤더의 「화면 크기」 설정으로 사용자가 배율을 키울 수 있다 → rem 단위(루트 10px) 필수.
Spacing
스페이싱
- Base unit: 8px (세밀 조정용 2·4·6px 포함, 공식
number-1 ~ number-21) - 토큰: ``
css --space-xs: 4px; /* number-3 */ --space-sm: 8px; /* number-5 */ --space-md: 16px; /* number-8 */ --space-lg: 24px; /* number-10 */ --space-xl: 32px; /* number-12 */ --space-2xl: 48px; /* number-16 — H1↔H2 간격 */ --space-3xl: 64px; /* number-18 — 좌측 메뉴↔본문 */`` - 레이아웃 간격(공식): 헤더↔브레드크럼 24px, 브레드크럼↔H1 40px, H2↔H2 80px, 카드 패딩 16~40px(xsmall~large)
- Container: 중단점 360 / 768 / 1024 / 1280 / 1440px(공식). 콘텐츠 최대 폭 1200px, 좌우 패딩 PC 24px·모바일 16px (추정)
Border Radius
Border Radius
--radius-none: 0;
--radius-sm: 4px; /* radius-small — xsmall 버튼·태그 */
--radius-md: 6px; /* radius-medium1·2 — 기본 버튼(40~48px) */
--radius-lg: 8px; /* radius-medium3·4 — 큰 버튼·입력창 */
--radius-xl: 12px; /* radius-xlarge — 카드·모달 (large 10px 도 있음) */
--radius-full: 9999px; /* radius-max — 단계 표시 원·스위치 */Shadow / Elevation
Shadow / Elevation
공식 토큰은 그림자 색만 3단계로 정의한다(alpha-shadow1~3). 오프셋·번짐은 컴포넌트 CSS 기준 (추정).
--shadow-none: none; /* 카드 기본 — 경계선만 */
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05); /* shadow1 — 입력 hover (추정) */
--shadow-md: 0 2px 8px rgba(0,0,0,0.08); /* shadow2 — 드롭다운·툴팁 */
--shadow-lg: 0 4px 16px rgba(0,0,0,0.12); /* shadow3 — 모달 */
--shadow-xl: 0 8px 24px rgba(0,0,0,0.12); /* 전체 메뉴·바텀시트 (추정) */Iconography
Iconography
- 스타일: Outline 중심 (선택·활성 상태만 Filled)
- Stroke 굵기: 1.5~2px (24px 기준, 추정)
- 모서리 처리: Round
- 추천 라이브러리: KRDS 공식 시스템 아이콘(리소스 다운로드 제공). 대체재는 Lucide — 선 굵기와 둥근 끝이 가장 비슷하다
- 규칙: 아이콘 단독 버튼에는 반드시 대체 텍스트(
aria-label), 의미 전달을 색에만 맡기지 않는다
Component Guide
컴포넌트 가이드 (상태별 CSS)
Button — 크기 5단(32 / 40 / 48 / 56 / 64px), 기본 48px
.btn {
font: 700 17px/1.5 "Pretendard GOV", "Pretendard", "Malgun Gothic", sans-serif;
height: 48px; padding: 0 20px; border-radius: var(--radius-md);
display: inline-flex; align-items: center; justify-content: center; gap: 4px;
border: 1px solid transparent; cursor: pointer;
transition: background-color var(--duration-base) var(--ease-in-out);
}
/* 포커스 = 흰 2px 안쪽 선 + 청색 4px 바깥 고리 (공식 box-shadow-outline) */
.btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 0; box-shadow: 0 0 0 4px var(--border-focus); }
.btn-primary { background: var(--color-primary-500); color: var(--text-on-primary); }
.btn-primary:hover { background: var(--color-primary-600); }
.btn-primary:active { background: var(--color-primary-700); }
.btn-primary:disabled { background: var(--color-neutral-200); color: var(--text-disabled); cursor: not-allowed; }
.btn-primary[aria-busy="true"] { color: transparent; position: relative; }
.btn-primary[aria-busy="true"]::after {
content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: krds-spin .8s linear infinite;
}
@keyframes krds-spin { to { transform: rotate(360deg); } }
.btn-secondary { background: var(--color-primary-50); color: var(--color-primary-600); border-color: var(--color-primary-500); }
.btn-secondary:hover { background: var(--color-primary-100); }
.btn-secondary:active { background: var(--color-primary-200); }
.btn-secondary:disabled { background: var(--bg-subtle); border-color: var(--border-subtle); color: var(--text-disabled); }
.btn-ghost { background: transparent; color: var(--text-primary); border-color: var(--border-default); } /* tertiary */
.btn-ghost:hover { background: var(--bg-subtle); }
.btn-ghost:active { background: var(--color-neutral-100); }
.btn-ghost:disabled { color: var(--text-disabled); border-color: var(--border-subtle); }
.btn-danger { background: #DE3412; color: #fff; } /* danger-50 */
.btn-danger:hover { background: #BD2C0F; } /* danger-60 */
.btn-danger:active { background: #8A240F; } /* danger-70 */
.btn-danger:disabled { background: var(--color-neutral-200); color: var(--text-disabled); }Input — 라벨은 항상 입력창 위, 도움말·오류 문구는 아래
.field-label { display: block; font: 700 17px/1.5 inherit; color: var(--text-primary); margin-bottom: 8px; }
.field-label .req { color: var(--color-point-500); }
.input {
width: 100%; height: 56px; padding: 0 16px;
font: 400 17px/1.5 inherit; color: var(--text-primary);
background: var(--bg-base); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
}
.input::placeholder { color: var(--text-tertiary); }
.input:focus { outline: 2px solid #FFFFFF; box-shadow: 0 0 0 4px var(--border-focus); border-color: var(--border-focus); }
.input[aria-invalid="true"] { border-color: #DE3412; background: var(--color-error-bg); }
.field-error { margin-top: 8px; font-size: 15px; color: var(--color-error-fg); }
.input:disabled { background: var(--color-neutral-100); color: var(--text-disabled); border-color: var(--border-subtle); }Card
.card { background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: 24px; }
.card-emphasis { background: var(--color-primary-50); border-color: var(--color-primary-100); }
.card-outlined { background: transparent; border: 1px solid var(--border-default); }
.card-link:hover { border-color: var(--color-primary-500); }
.card-link:hover .card-title { text-decoration: underline; text-underline-offset: 4px; }Badge / Tag
.badge { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--radius-sm); font: 700 13px/1 inherit; }
.badge-solid { background: var(--color-primary-500); color: #fff; }
.badge-subtle { background: var(--color-primary-50); color: var(--color-primary-600); }
.badge-outline { border: 1px solid var(--border-default); color: var(--text-secondary); }Navigation — 공식 배너(masthead) + 헤더(유틸리티 + 주 메뉴)
.masthead { background: var(--color-secondary-50); min-height: 32px; display: flex; align-items: center; gap: 8px; padding: 0 24px; font-size: 15px; color: var(--text-primary); }
.gov-header { background: var(--bg-base); border-bottom: 1px solid var(--border-subtle); }
.gov-header__util { display: flex; justify-content: flex-end; gap: 16px; padding: 8px 24px 0; font-size: 13px; color: var(--text-secondary); }
.gov-header__main { display: flex; align-items: center; gap: 40px; height: 72px; padding: 0 24px; }
.gov-gnb a { font: 700 17px/1.5 inherit; color: var(--text-primary); text-decoration: none; padding: 24px 4px; border-bottom: 3px solid transparent; }
.gov-gnb a:hover { color: var(--color-primary-600); }
.gov-gnb a[aria-current="page"] { color: var(--color-primary-600); border-bottom-color: var(--color-primary-500); }Motion
Motion
공식 코드는 transition-base: .4s ease-in-out 하나를 기본으로 쓴다. 나머지는 (추정).
--duration-fast: 150ms; /* hover 색 변화 (추정) */
--duration-base: 250ms; /* 드롭다운·아코디언 (추정) */
--duration-slow: 400ms; /* 공식 transition-base, 펼침·전체 메뉴 */
--ease-out: cubic-bezier(0, 0, 0.2, 1); /* (추정) */
--ease-in-out: ease-in-out; /* 공식 */prefers-reduced-motion: reduce 에서는 모든 전환을 끈다 — 전정기관 장애 사용자 배려.
Anti-patterns
Anti-patterns
1. 본문을 15px 아래로 줄이거나 px 고정으로 박아 「화면 크기」 확대를 막기 금지 2. 매직넘버 50 미만 조합(예: gray-5 배경 위 gray-40 글자)으로 본문 쓰기 금지 — 4.5:1 미달 3. 한 화면에 주요(청색 채움) 버튼 여러 개 배치 금지 — 주요 행동은 하나 4. 필수·오류·상태를 색(적색·녹색)만으로 알리기 금지 — 문구·아이콘을 함께 5. 공식 배너를 빼거나 정부 상징을 임의로 변형·장식하기 금지, 포커스 링을 outline: none 으로 지우기 금지