Design System Inspiration of KRDS (대한민국 정부 디자인 시스템)

1. Visual Theme & Atmosphere

KRDS는 대한민국 행정·공공기관 웹·앱이 공유하는 정부 표준 디자인 시스템입니다. 화면은 마케팅 브랜드가 아니라 공공 서비스의 도구처럼 보이도록 설계되었습니다 — 순백 배경(#ffffff) 위에 거의 검정에 가까운 본문(#1E2124), 그리고 신뢰감을 주는 정부 블루(#256EF4)가 단 하나의 강조색으로 작동합니다. 강조색은 그래픽 장식이 아니라 행위(action), 즉 "신청", "확인", "다음 단계"가 있는 자리에만 나타납니다. 영역 분리는 그림자가 아니라 얇은 회색 보더(#58616A 1px / #B1B8BE 1px / #CDD1D5 1px)와 8px 라운드로 처리되어, 시각적 무게가 일관되게 가라앉아 있습니다.

이 시스템은 "디지털 정부서비스 UI/UX 가이드라인"을 표준 토큰·컴포넌트로 정착시킨 것으로, 행정안전부(MOIS)가 2024년 4월에 공식 배포했습니다 (행정안전부 보도자료). 분위기를 한 줄로 요약하면 **"읽기 쉽고, 예측 가능하며, 접근성을 우선하는 공공 유틸리티"**입니다. 화려한 일러스트, 그라데이션, 톤다운된 마케팅 영문 카피, 과장된 모션은 의도적으로 배제되어 있습니다.

Key Characteristics:

• 정부 블루 Primary 50 #256EF4(액션) + Primary 60 #0B50D0(텍스트·pressed) + Primary 5 #ECF2FE(약한 배경) — Primary는 11단계(595) 명도 팔레트로 정의되어 있고, 모든 UI는 이 중 34단계만 사용
• Pretendard GOV 단일 폰트 패밀리 (한글·라틴·숫자 일체) — 시스템 한글 폴백 포함
• 본문 기본 17px·400 / 1.5 line-height, 페이지 제목 H1 xlarge = 40px(PC) / 28px(mobile)·700 — Display(36/44/60), Heading(1540), Body(1319) 세 레이어 스케일
• 5단계 컴포넌트 사이즈 (xsmall · small · medium · large · xlarge) — 버튼·인풋·셀렉트·태그 전반에 동일 적용
• 글자·화면 표시 설정 UI 내장 — 사용자가 폰트 크기를 90% / 100% / 110% / 130% / 150%로 직접 확대 (--krds-zoom-*)
• 라운드 스케일: 2px / 4px / 6px / 8px / 10px / 12px / 1000px — 그림자는 거의 사용하지 않음 (--krds-box-shadow-outline만 focus용)
• 컨텐츠 폭 1200px (gutter 24px) + 4단계 브레이크포인트 (small 360 / medium 768 / large 1024 / xlarge 1280) — 정부 사이트의 표준 와이드 레이아웃
• 매직 넘버 컬러 시스템 — 명도 단계별로 WCAG 대비율을 보장: 매직넘버 40=3:1, 50=4.5:1, 70=7:1, 90=15:1. 토큰 단계부터 KWCAG 2.1 / WCAG 2.1 AA 준수가 강제됨
• 시스템 컬러 4종 — Danger #DE3412 / Warning #FFB114 / Success #228738 / Information #0B78CB (모두 50단계 base, light/high-contrast 토큰 레이어 자동 매핑)
• 선명한 화면 모드(High-contrast mode) 내장 — 일반 모드와 동일 컴포넌트가 --krds-color-high-contrast-* 레이어 한 줄 교체만으로 전환

디지털 포용·접근성 강령 (Accessibility Mandate). KRDS는 시각적 선호가 아니라 법적·정책적 의무에서 출발합니다. 대한민국 「장애인차별금지 및 권리구제 등에 관한 법률」(장차법)과 「웹 접근성 국가표준 KWCAG 2.1 (KS X OT 0003)」이 공공기관 웹·앱에 WCAG 2.1 AA 동등 이상의 접근성을 요구하며, KRDS는 이를 토큰·컴포넌트 단계부터 강제하는 기술 표준 역할을 합니다. 행정안전부는 KRDS를 "누구나 쉽게 사용할 수 있는 공공 웹·앱"의 구현 수단으로 정의했고 (행정안전부 보도자료), 라이브 사이트 푸터에는 웹 접근성 인증 마크가 상시 표시됩니다 (기본 패턴 summary 페이지 푸터 확인). 따라서 색대비 4.5:1 (매직넘버 50), 4px focus halo, 사용자 줌 90~150%, 선명한 화면 모드는 "권고"가 아니라 KRDS의 기본 동작입니다.

2. Color Palette & Roles

Brand

• Government Blue (#256EF4): Primary brand color — buttons, active links, primary CTA, focus rings.
• Primary Deep (#0B50D0): Primary text on light surface, secondary-button text, pressed state.
• Navy (#346FB2): Secondary brand color — side menu, segmented controls, header secondary.
• Government Red (Point) (#D63D4A): Restricted accent — emphasis badges, critical alerts only.

Surface & Background

• Page Background (#FFFFFF): The primary page background — card and input default canvas.
• Subtle Surface (#F4F5F6): Table headers, gray subtle surfaces.
• Divider (#E6E8EA): Light dividers.

Foreground (Text)

• Body Text (#1E2124): Primary body text and H1 headlines.
• Subtle Text (#464C53): Placeholder, inactive GNB items.
• Caption Text (#6D7882): Captions, meta, helper text.

Semantic

• Danger / Critical (#DE3412): Validation errors, required-field errors, immediate alerts.
• Warning (#FFB114): Warning badge backgrounds (use #9E6A00 for text-on-light contrast).
• Success (#228738): Confirmation, completed states.
• Information (#0B78CB): Informational panels, info icons.

---

Standard Style — Full Token Scale

KRDS의 색상 시스템은 표준형 스타일(Standard Style) 기준으로 11단계 명도(5/10/20/30/40/50/60/70/80/90/95) × 8개 색상군(Gray, Primary, Secondary, Point, Danger, Warning, Success, Information) + Gray 0/100 (white/black)으로 구성됩니다. 각 토큰은 --krds-color-light-<name>-<step> 형태로 노출되며, 선명한 화면 모드는 --krds-color-high-contrast-<name>-<step>로 동일 의미를 다른 명도에 매핑합니다.

Primary (Government Blue — 정부 청색)

Secondary (Navy — 정부 회청)

세컨더리는 Primary와 보조를 맞추는 안정적인 네이비 톤으로, 사이드 메뉴·세그먼티드 컨트롤·헤더 보조 영역에 쓰입니다.

Gray (회색 — 텍스트 / 보더 / 표면)

System Colors (Semantic)

— Danger는 입력 검증·필수 오류·즉시 알림에 사용 (border 2px solid #DE3412). — Warning은 노란색 톤이지만 텍스트로 쓰일 때는 콘트라스트 확보를 위해 #9E6A00(warning-50). 배경 50단계 #FFB114 위 텍스트는 #1E2124로 사용. — Point(정부 적색)는 강조 배지·중요 알림에 매우 제한적으로 사용 (Select error 보더가 이 컬러: #AB2B36).

Focus

• Focus Ring: --krds-box-shadow-outline: 0 0 0 0.4rem #256EF4 (4px outline halo). 모든 인터랙티브 요소(버튼·input·select·체크박스·라디오·링크)에 일관 적용. 인셋 버전 --krds-box-shadow-outline-inset: inset 0 0 0 0.2rem #256EF4도 함께 정의.
• 정부 사이트는 키보드 사용자(스크린 리더 / 보조기기 사용자)가 첫 번째 사용자 그룹이므로 focus 가시성은 타협 항목이 아닙니다.

매직 넘버 (Magic Number)

KRDS 컬러 팔레트는 명도 단계 간 차이를 WCAG 대비율과 직접 매핑합니다:

• 매직넘버 40 → 3:1
• 매직넘버 50 → 4.5:1 (AA normal text 통과 기준)
• 매직넘버 70 → 7:1 (AAA)
• 매직넘버 90 → 15:1

이 매핑 덕분에 디자이너는 "primary-50 위 gray-0" 같은 조합을 선택하면 즉시 대비율을 보장받습니다.

3. Typography Rules

Font Family

• Primary: "Pretendard GOV", "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif
• 설계 원칙: KRDS 전용 빌드인 Pretendard GOV는 라이선스가 명확하고(오픈 폰트), 한글·라틴·기호의 메트릭이 균일하여 정부 문서에서 자주 발생하는 혼용 표기(예: "민원 24", "행정 API")가 정렬·자간 어긋남 없이 표현됩니다. 라이브 페이지에서 --krds-font-family-base: Pretendard GOV로 확인됨.
• 확장형 스타일 (자체 폰트를 가진 기관의 경우): 노토 산스 / 나눔 고딕 / 스포카 한 산스 등 고딕 계열만 허용. 자체 폰트가 고딕이 아니면 본문·제목에 사용 금지.

3-Layer Type Scale

KRDS는 Display / Heading / Body 3계층 + Navigation / Label 시멘틱 토큰으로 구성됩니다. 모두 line-height 150%, regular 400 / bold 700 두 두께만 사용.

Display (마케팅 / 배너 전용 — 본문 사용 금지)

Heading (H1~H5)

Body (본문 — bold / regular 각 4단계)

Semantic Role Tokens (Navigation / Label)

Principles

• 두 굵기 원칙: Regular(400)와 Bold(700)만 (--krds-font-weight-regular, --krds-font-weight-bold). Medium 단계 없음 — 정부 문서 톤의 절제.
• 17px가 본문 기본: 일반적인 14~16px보다 살짝 큰 17px를 기본 본문으로 채택해 노안·저시력 사용자 가독성을 우선 (Pretendard GOV가 다른 서체 대비 작아 보이기 때문에 의도적으로 +1px).
• 줄간격 1.5 (150%): WCAG 1.4.12 Text Spacing AA를 준수해 모든 텍스트 line-height는 150% 이상.
• 사용자 직접 확대: --krds-zoom-{small, medium, large, xlarge, xxlarge} = 0.9 / 1 / 1.1 / 1.3 / 1.5. 헤더의 "글자·화면 설정"에서 최대 150%까지 확대 가능. 브라우저 줌과 별개의 1차 컨트롤.
• letter-spacing 0 (Display만 1px): 자간을 인위적으로 좁히지 않음 (--krds-letter-spacing-none: 0rem). 한글 가독성 우선.
• rem 단위 기본: 모든 토큰이 rem 단위. font-size-base: 62.5%로 1rem = 10px로 설정해 px↔rem 환산이 자명.

4. Component Stylings

KRDS 컴포넌트는 5단계 크기 토큰(xsmall/small/medium/large/xlarge)을 공유하며 모든 변형이 aria-disabled / 키보드 포커스 / 4px focus-ring halo를 기본 제공합니다. 각 variant 블록은 default 크기(Button=medium, Input=large, Select=large)의 측정값을 기준으로 하고, 크기 스케일은 표/프로즈로 보조합니다.

Buttons

소스: component_05_02.html. 5단계 크기 × 6개 변형 = 30개 컴포넌트 슬롯.

Primary

• Background: #256EF4
• Text: #FFFFFF
• Border: 1px solid #256EF4
• Radius: 6px
• Padding: 0 16px
• Font: 17px / 400
• Hover: Primary 60 #0B50D0 배경
• Active: Primary 70 #083891 배경 (pressed)
• Disabled: Gray 20 #CDD1D5 배경 + Gray 50 #6D7882 텍스트 + cursor not-allowed
• Use: 핵심 액션 — "시작하기", "신청하기", "확인", "다음 단계" (한 화면당 1개 권장)

사이즈 스케일 (height / radius / padding / font):

• xsmall: 32px / 4px / 0 10px / 15px·400
• small: 40px / 6px / 0 12px / 15px·400
• medium (default): 48px / 6px / 0 16px / 17px·400
• large: 56px / 8px / 0 20px / 19px·400
• xlarge: 64px / 8px / 0 24px / 19px·400

Secondary

• Background: #ECF2FE (Primary 5)
• Text: #0B50D0 (Primary 60)
• Border: 1px solid #256EF4
• Radius: 6px
• Padding: 0 16px
• Font: 17px / 400
• Use: 보조 액션 — "자세히 보기", "이전 단계", "다운로드" (Primary 옆 동일 위계, 사이즈 스케일 Primary와 동일 — radius 4/6/6/8/8)

Tertiary (Outline)

• Background: transparent
• Text: #1E2124 (Gray 90)
• Border: 1px solid #58616A (Gray 60)
• Radius: 6px
• Padding: 0 16px
• Font: 17px / 400
• Hover: Gray 5 #F4F5F6 배경
• Use: 부가 / 취소 / 초기화 — "취소", "초기화", "닫기" (사이즈 스케일 Primary와 동일)

Text / Link

• Background: transparent
• Text: #1E2124 (text variant) 또는 #256EF4 (link variant)
• Border: 1px transparent (focus 시 가시화)
• Radius: 4~8px (크기별)
• Padding: 0 2px~9px (텍스트 흐름에 맞춤)
• Font: medium height 28px
• Use: 인라인 액션 — "파일 다운로드", "문의 및 건의", "찜하기"

Icon Only

• Background: transparent
• Text: #1E2124
• Radius: 6~8px (크기별)
• Padding: 0 (icon-size 1.6/2/2.4rem = 16/20/24px, --krds-icon--size-*)
• Use: 단독 아이콘 컨트롤 — 검색 / 닫기 / 도움말 토글

Icon + Border

• Background: #FFFFFF
• Text: #1E2124
• Border: 1px solid #B1B8BE (Gray 30)
• Radius: 1000px (--krds-radius-max, 원형)
• Use: 보조 컨트롤 — "새로고침", "맨 위로"

Floating

• Background: Primary #256EF4
• Text: #FFFFFF
• Radius: 1000px (원형)
• Shadow: 약한 box-shadow
• Use: 페이지 우하단 부유 액션 — "맨 위로 / 챗봇 / 음성지원" (스크롤 시 표시, component_05_03.html)

Inputs

소스: component_09_*.html. 5단계 크기 + 4단계 상태. Default = large.

Text Input

• Background: #FFFFFF
• Text: #464C53 (Gray 70, placeholder 포함)
• Border: 1px solid #58616A
• Radius: 8px
• Padding: 0 16px
• Font: 19px / 400
• Focus: 보더 유지 + box-shadow: 0 0 0 4px #256EF4 halo (focus ring)
• Disabled: bg #CDD1D5 (Gray 20) / text #6D7882 (Gray 50) / border 1px #B1B8BE (Gray 30) / aria-disabled="true"
• Use: 일반 텍스트 입력 (component_09_03.html) — height 56px default

상태 — Required: 라벨 옆 빨간 별표(* Danger 50 #DE3412) + aria-required="true". Error: border 2px solid #DE3412 + helper text Danger 50 + aria-invalid="true" + 에러 영역 자동 포커스 이동.

사이즈 스케일 (height / radius / padding / font / border):

Textarea

• Background: #FFFFFF
• Text: #464C53
• Border: 1px solid #58616A
• Radius: 8px
• Padding: 0 16px
• Font: 19px / 400
• Use: 다행 입력 (component_09_02.html) — Text Input과 동일 토큰 + 기본 높이 14.4rem (144px), 자동 리사이즈 비권장

Date Input

• Background: #FFFFFF
• Text: #464C53
• Border: 1px solid #58616A
• Radius: 8px
• Padding: 0 16px
• Font: 19px / 400
• Use: 날짜 입력 (component_09_01.html) — Text Input + 캘린더 아이콘 + Calendar 컴포넌트(component_04_03.html) 연동, YYYY-MM-DD 또는 분리형 (YYYY / MM / DD 셋 박스)

File Upload

• Background: #FFFFFF
• Text: #1E2124
• Border: 1px solid #58616A
• Radius: 8px
• Padding: 0 16px
• Use: 파일 첨부 (component_09_04.html) — Tertiary 버튼 + 파일명 표시 영역 + 진행 표시기 + 삭제 칩

Select

소스: component_06_03.html. 네이티브 <select class="krds-form-select"> 기반. Default = large.

Select

• Background: #FFFFFF
• Text: #1E2124
• Border: 1px solid #58616A
• Radius: 6px
• Padding: 0 48px 0 16px (우측 chevron 영역)
• Font: 19px / 400
• Disabled: bg #CDD1D5 + border #B1B8BE
• Use: 옵션 선택 — Error border 2px solid #AB2B36 (Point 60 — 셀렉트는 Danger가 아닌 Point를 사용해 입력 폼과 시각 구분). Completed (값 선택 후): 보더 유지, 텍스트 진해짐.

사이즈 스케일 (height / radius / padding-right / font):

Toggles

체크박스 · 라디오 · 토글 스위치 (component_06_01.html / 06_02 / 06_07).

Checkbox

• Background: #FFFFFF (Checked: #256EF4)
• Text: #FFFFFF (check 아이콘)
• Border: 1px solid #58616A
• Radius: 4px
• Padding: 16/20/24px 정사각
• Use: 다중 선택 — Checked 배경 #256EF4 + 흰색 check 아이콘. Indeterminate / Error / Disabled 상태 제공.

Radio

• Background: #FFFFFF
• Text: #256EF4 (내부 dot)
• Border: 1px solid #58616A (Checked: 외곽 #256EF4)
• Radius: 1000px (원형)
• Padding: 16/20/24px 원
• Use: 단일 선택 — 그룹 단위 키보드 탐색 (role="radiogroup")

Toggle Switch

• Background: #B1B8BE (Off) / #256EF4 (On)
• Text: #FFFFFF (thumb)
• Radius: max (pill, 트랙 32px 폭 / 16px 높이)
• Disabled: bg #CDD1D5
• Use: 켜기/끄기 토글 — On 시 흰색 thumb 우측 이동

Cards

소스: component_04_*.html. 표면(surface) 컴포넌트 모음.

Standard Panel

• Background: #FFFFFF
• Border: 1px solid #B1B8BE (Gray 30)
• Radius: 8px
• Padding: 24px (--krds-padding-8)
• Shadow: none — 보더로 영역 구분
• Use: 일반 콘텐츠 카드, 본문 내 모듈

Info Panel (Light Primary)

• Background: #ECF2FE (Primary 5)
• Text: 강조 #0B50D0 + 본문 #1E2124
• Border: none
• Radius: 8px
• Padding: 16px 24px (--krds-padding-6 --krds-padding-8)
• Use: 안내·도움말 패널 — "이 페이지에서는…", "도움말", 정보성 알림

Critical Alert

• Background: #DE3412 (Danger 50)
• Text: #FFFFFF
• Radius: 0 (풀-블리드)
• Padding: 페이지 폭 가득
• Use: 페이지 상단 풀-블리드 긴급 공지 배너 (component_04_02.html) — 모바일 헤더 긴급 배지 높이 3.9rem (--krds-critical-alerts--mobile-badge-size-height)

Accordion

• Background: #FFFFFF
• Text: #1E2124
• Border: 1px solid #B1B8BE
• Radius: 8px
• Use: 보더 분리 disclosure 패널 (component_04_07.html / 04_04) — max-height 400ms ease 전환

Modals

Modal

• Background: #FFFFFF
• Text: #1E2124
• Radius: 12px (--krds-radius-xlarge1)
• Padding: 40px (--krds-padding-10)
• Shadow: 0 0.2rem 0 0 rgba(0,0,0,a1), 0 0.4rem 0.8rem 0 rgba(0,0,0,a2) (드롭다운·툴팁과 공유)
• Use: 다이얼로그 (component_04_05.html) — "글자·화면 표시 설정", "전체 메뉴", 양식 확인. Min-height 264px. 백드롭 fade-in 400ms / opacity 0→0.5 black.

사이즈 (--krds-modal--size-*): small 400px / medium 560px / large 760px.

Badges

소스: component_04_06.html. outline / bg(filled) × 9개 의미 = 18개 변형. 모두 동일 형태: radius 4px / padding 0 8px / 15px·400 / height 24px.

Primary

• Background: #256EF4 (filled) / transparent (outline)
• Text: #FFFFFF (filled) / #0B50D0 (outline)
• Border: 1px solid #256EF4 (outline)
• Radius: 4px
• Padding: 0 8px
• Font: 15px / 400
• Use: 콘텐츠 분류, 액션 강조

Secondary

• Background: #063A74 (filled) / transparent (outline)
• Text: #FFFFFF (filled) / #052B57 (outline)
• Border: 1px solid #052B57 (outline)
• Radius: 4px
• Padding: 0 8px
• Font: 15px / 400
• Use: 카테고리 그룹

Gray

• Background: #6D7882 (filled) / transparent (outline)
• Text: #FFFFFF (filled) / #464C53 (outline)
• Border: 1px solid #464C53 (outline)
• Radius: 4px
• Padding: 0 8px
• Font: 15px / 400
• Use: 메타 / 일반 분류

Point

• Background: #D63D4A (filled) / transparent (outline)
• Text: #FFFFFF (filled) / #AB2B36 (outline)
• Border: 1px solid #AB2B36 (outline)
• Radius: 4px
• Padding: 0 8px
• Font: 15px / 400
• Use: 강조 / 신규 / 중요 (적색 포인트)

Danger

• Background: #DE3412 (filled) / transparent (outline)
• Text: #FFFFFF (filled) / #BD2C0F (outline)
• Border: 1px solid #BD2C0F (outline)
• Radius: 4px
• Padding: 0 8px
• Font: 15px / 400
• Use: 오류 / 반려

Warning

• Background: #FFB114 (filled) / transparent (outline)
• Text: #1E2124 (filled — warning 50 배경 위 텍스트는 검정으로 대비 확보) / #8A5C00 (outline)
• Border: 1px solid #8A5C00 (outline)
• Radius: 4px
• Padding: 0 8px
• Font: 15px / 400
• Use: 주의

Success

• Background: #228738 (filled) / transparent (outline)
• Text: #FFFFFF (filled) / #267337 (outline)
• Border: 1px solid #267337 (outline)
• Radius: 4px
• Padding: 0 8px
• Font: 15px / 400
• Use: 완료 / 성공

Information

• Background: #0B78CB (filled) / transparent (outline)
• Text: #FFFFFF (filled) / #096AB3 (outline)
• Border: 1px solid #096AB3 (outline)
• Radius: 4px
• Padding: 0 8px
• Font: 15px / 400
• Use: 안내 / 진행 중

Disabled

• Background: #8A949E (filled) / transparent (outline)
• Text: #FFFFFF (filled) / #6D7882 (outline)
• Border: 1px solid #6D7882 (outline)
• Radius: 4px
• Padding: 0 8px
• Font: 15px / 400
• Use: 비활성

Tag (필터 칩)

• Background: #FFFFFF (Selected: #ECF2FE)
• Text: #1E2124 (Selected: #0B50D0)
• Border: 1px solid #CDD1D5 (Gray 20, Selected: #256EF4)
• Radius: pill (height와 동일)
• Padding: 8px 10px (medium)
• Font: 15px / 400 (medium)
• Use: 선택 가능한 필터 chip (component_06_04.html) — 삭제 버튼(btn-delete)이 우측에 위치

사이즈 스케일 (height / radius / padding / font):

추가로 bg-light-* (#ECF2FE 등 5단계 배경 + 60단계 텍스트) 변형이 있어 부드러운 분류 라벨에 사용 (홈 배지 "아이덴티티" / "서비스 패턴" 등).

Tabs

소스: component_04_10.html. 수평 탭 라인 + 키보드 좌우 탐색 (role="tablist" / aria-selected).

Horizontal Tab

• Background: transparent
• Text: #464C53 / 400 (비활성), #256EF4 / 700 (활성)
• Border: 활성 하단 2px solid #256EF4
• Use: 페이지 내 섹션 전환 — 활성 탭만 하단 보더 강조

Toasts

모바일 알림 — component_12_05.html / component_12_06.html.

Toast

• Background: #1E2124
• Text: #FFFFFF
• Radius: 8px
• Padding: 16px
• Use: 화면 중앙 또는 하단 카드 — 3초 자동 닫힘

Snackbar

• Background: #1E2124
• Text: #FFFFFF
• Radius: 0 (풀-블리드 띠)
• Padding: 16px
• Use: 하단 풀-블리드 띠 — 액션 버튼 포함 가능 (예: "되돌리기"), 4초 자동 닫힘

Tooltips

소스: component_08_*.

Tooltip

• Background: #1E2124
• Text: #FFFFFF
• Radius: 12px
• Padding: 8px
• Use: 보조 설명 — 화살표 8px / 400ms fade

Help Panel

• Background: #FFFFFF
• Text: #1E2124
• Border: 1px solid #B1B8BE
• Use: 우측에서 슬라이드-인 측면 패널 — 폼 도움말·정책 안내 (우측 영역에서 펼쳐짐)

Coachmark

• Background: rgba(0,0,0,0.5) overlay + #FFFFFF 카드
• Text: #1E2124
• Radius: 8px
• Use: 페이지 첫 방문 시 단계별 가이드 오버레이 + 점진적 disclosure

Pagination / Breadcrumb / Side Menu

보조 내비게이션 (component_03_*). 캐노니컬 스키마에 1:1로 대응하지 않아 프로즈로 보존합니다.

• Pagination: 숫자 버튼 40×40 / 활성 #256EF4 배경 + 흰색 / hover gray 5
• Breadcrumb: 13px·400 / #464C53 / > 구분자 / 마지막 항목 #1E2124 (현재 위치)
• Side Menu: 좌측 고정 / 활성 항목 좌측 4px bar #256EF4 + 배경 #ECF2FE + 텍스트 #0B50D0/700

Step Indicator / Spinner

진행 표시 (component_07_*). 캐노니컬 variant에 매핑되지 않으므로 프로즈로만 기록합니다 (참고용).

• 단계 표시기: 1→2→3 진행 표시. 활성 단계 #256EF4 배경 + 흰색 번호. 완료 단계 #228738(Success) 체크. 비활성 #CDD1D5 배경 + #6D7882 번호.
• 스피너: 24/32/48px 원형 + #256EF4 arc / prefers-reduced-motion에서 정적 상태 점선으로 대체.

Mobile-only

소스: component_12_*. 뒤로가기 / 바텀시트 / 수량토글 / 토스트 / 스낵바 / 탭바 / 스플래시 스크린 / 범위 슬라이더 — 위 Toasts 등 해당 variant에서 다룹니다.

§4 노트 — 모든 컴포넌트는 --krds-light-* (일반 모드)와 --krds-high-contrast-* (선명한 화면 모드) 두 토큰 레이어를 동시에 가지며, 다크 모드 전환은 같은 컴포넌트가 토큰만 바꿔 끼우는 방식으로 동작합니다.

5. Layout Principles

Spacing System — 8-Point Grid

--krds-padding-* 스케일 (라이브 토큰):

모든 값이 8-pt grid의 배수(2/4/8/16/24/32/40) 또는 KRDS 보조 단위(10/12/20). 컴포넌트 내부 패딩은 padding-6 (16px), padding-8 (24px), padding-10 (40px)이 표준.

Grid & Container — Breakpoints

• 데스크톱: 콘텐츠 영역 최대 1200px (--krds-contents-size), 가운데 정렬, 좌우 24px gutter — 1248px 디바이스 이상에서 폭 고정, 미만에서는 비례 축소
• 표준형 스타일은 xsmall(<360px)를 최적화 대상에서 제외
• 확장형 스타일 (자유 폭): 3~6단계 브레이크포인트로 가변, 단 컬럼/가터/마진 규칙은 동일

Sub-page Layout

브레이크포인트 large 이상에서 다음 5 영역으로 구성:

1. Header — GNB + 유틸리티 (글자·화면 설정 / 검색 / 전체메뉴)
2. Left menu (선택) — 사이드 메뉴 (깊은 IA)
3. Main contents — 본문 (콘텐츠 내 탐색 anchor 포함)
4. Right menu (선택) — 콘텐츠 내 탐색 (플로팅) / 도움 패널 (slide-in)
5. Footer — 운영기관 식별자 + 정책 링크 + 면책 + 공식 배너

Whitespace Philosophy

• 밀도 < 여백: 정부 사이트는 한 화면에 많은 정보를 보여줘야 하지만, KRDS는 그 안에서도 충분한 vertical rhythm을 유지합니다. 섹션 간 64~80px (padding-9 + padding-10 조합)의 여백이 시각적 피로를 줄입니다.
• 그림자보다 보더: 영역 분리는 거의 항상 1px 보더(#58616A 강 / #B1B8BE 약 / #CDD1D5 부드러움)와 라운드로 처리. 그림자는 모달 / 드롭다운 / 툴팁에만 한정.
• GNB 56px / x-large CTA 64px: 헤더 높이와 핵심 액션 높이가 비례 — 누르기 쉬운 크기를 우선.

Border Radius Scale (라이브 토큰)

• 2px (--krds-radius-xsmall1/2/3): xsmall input / 미세 요소
• 4px (--krds-radius-small1/2/3): 배지 / xsmall 버튼
• 6px (--krds-radius-medium1/2): small·medium 버튼 / small select
• 8px (--krds-radius-medium3/4): 표준 라운드 — 패널 / 카드 / large·xlarge 버튼 / 표준 input
• 10px (--krds-radius-large1/2): xlarge input (검색)
• 12px (--krds-radius-xlarge1/2): 모달
• 1000px (--krds-radius-max): 원형 컨트롤 / pill 태그

Basic Patterns (KRDS 기본 패턴)

KRDS는 컴포넌트보다 상위 단위로 **12개 기본 패턴(Basic Patterns)**을 공식 운영합니다 — 컴포넌트 조합으로 반복되는 핵심 과업을 수행하는 인터페이스 세트입니다 (기본 패턴 summary). 모든 패턴은 페이지 레이아웃 구성 규칙으로 작동하며, "사용성·접근성·인터랙션 가이드·플랫폼 고려사항"을 함께 명시합니다.

§4 컴포넌트(버튼·입력·셀렉트·모달 등)는 위 12개 패턴의 빌딩 블록이며, 페이지 레이아웃은 패턴 단위로 구성됩니다 — 예: 신청 페이지 = 입력폼 + 첨부파일 + 확인 + 오류 패턴 결합.

Service Patterns (KRDS 서비스 패턴)

기본 패턴이 페이지 단위 컴포지션이라면 서비스 패턴 5종은 **사용자 여정(user-journey blueprint)**입니다 — 시민이 정부 디지털 서비스를 이용하는 전형적 시나리오를 단계별로 정의합니다 (서비스 패턴 summary).

서비스 패턴은 3단계 준수 수준 (필수 / 권장 / 우수) 체크리스트로 평가됩니다 — 모든 정부 사이트는 최소 "필수" 항목을 충족해야 합니다.

6. Depth & Elevation

KRDS는 별도 elevation 페이지(style_08.html)를 두지만 실제 사용은 4단계로 제한됩니다.

그림자 철학: 정부 사이트는 "층위가 많아 보이는" 화면을 피합니다. 시각적 평탄성(visual flatness)이 신뢰감과 예측 가능성을 만든다는 가정 — Material식 elevation 6단계가 아니라 사실상 0/1/2/3 4단계로 충분합니다.

7. Do's and Don'ts

Do

• 정부 블루(#256EF4)는 액션 자리에만 — Primary 버튼, 활성 링크, 활성 탭, focus ring, side-menu 활성 표시
• 본문은 17px / 400 / line-height 1.5 — 노안·저시력 사용자를 우선
• 모든 인터랙티브 요소에 가시성 높은 4px outline focus ring 적용 (--krds-box-shadow-outline)
• 양식 검증은 명시적 에러 라벨 + aria-invalid + 에러 영역 자동 포커스 + 2px border #DE3412
• "글자·화면 표시 설정"을 항상 헤더에 노출 — 사용자의 1차 컨트롤
• 한글 본문에 letter-spacing 0을 유지 — 인위적 자간 압축 금지 (Display만 1px)
• Pretendard GOV 또는 시스템 한글 폴백을 사용
• 색상은 매직넘버에 맞춰 선택 — primary-50 위 gray-0이면 즉시 4.5:1+ 통과
• 모든 컴포넌트는 일반 모드 / 선명한 화면 모드 두 토큰 레이어로 검증

Don't

• Primary 50을 배경 / 일러스트 / 헤더 풀-블리드에 쓰지 말 것 — 색은 행위(action)다
• 그림자로 깊이감을 만들지 말 것 — 보더와 라운드로 충분
• 한 화면에 두 개 이상의 Primary 버튼을 같은 위계로 두지 말 것 — 첫 번째 행위가 명확해야 함
• 마케팅 카피·과장 표현 금지 — "혁신적인", "최고의", "감동의" 같은 수식어 금지
• 모션을 강조 수단으로 쓰지 말 것 — prefers-reduced-motion 사용자가 다수
• 정보 부재 상태에 "데이터가 없습니다" 같은 무미한 표현 금지 — 다음 행동을 안내할 것
• KWCAG 2.1 AA 미달 컬러 / 컴포넌트 사용 금지 (4.5:1 contrast 최소)
• Body 사이즈와 H4/H5 사이즈(17/15px)가 충돌하는 위계는 weight 차이(700/400)로만 구분 — 컬러 강조 금지
• 자체 폰트가 고딕 계열이 아니면 본문·제목에 사용 금지 (Display / 배너만 한정)

8. Responsive Behavior

Breakpoints (재확인)

Touch Targets (라이브 측정)

• Primary CTA xlarge: 64px 높이 (양식 제출 등 핵심 액션)
• Primary CTA large: 56px / medium: 48px / small: 40px / xsmall: 32px
• 입력 필드 large: 56px / xlarge: 80px (검색)
• 셀렉트 large: 56px / medium: 48px / small: 40px
• 모바일 탭바 / 바텀시트 높이: 별도 모바일 카테고리에서 정의

Mobile-specific Components

KRDS는 component_12_* 카테고리에 모바일 전용 컴포넌트 8종을 운영합니다: 뒤로가기 / 바텀시트 / 수량토글 / 토스트 / 스낵바 / 탭바 / 스플래시 스크린 / 범위 슬라이더. 모바일 컨텍스트의 인터랙션을 별도 시스템으로 인정.

Image Behavior

• 콘텐츠 일러스트 / 사진은 1200px 컨테이너 안에서 풀-블리드 또는 16:9 / 4:3 비율
• 아이콘은 16 / 20 / 24px 그리드 (--krds-icon--size-{xsmall..xlarge} = 1.6/1.6/2/2.4/2.4rem)
• 접근 가능한 미디어 (component_11_01.html)는 캡션 / 자막 / 음성 해설 슬롯 명시

9. Agent Prompt Guide

Quick Color Reference

• Primary action: #256EF4 (primary-50)
• Primary pressed / link text: #0B50D0 (primary-60)
• Primary subtle bg: #ECF2FE (primary-5)
• Body text: #1E2124 (gray-90)
• Secondary text / placeholder: #464C53 (gray-70)
• Border strong: #58616A (gray-60)
• Border subtle: #B1B8BE (gray-30)
• Disabled surface: #CDD1D5 (gray-20)
• Background: #FFFFFF (gray-0)
• Surface gray subtle: #F4F5F6 (gray-5)
• Danger: #DE3412 / Success: #228738 / Information: #0B78CB / Warning: #FFB114+#9E6A00(text)

Example Component Prompts

• "Primary 버튼 xlarge: #256EF4 배경 / 흰색 텍스트 / 19px·400 / 8px radius / 0 24px padding / 64px 높이. Hover #0B50D0, pressed #083891, focus ring 4px #256EF4."
• "필수 입력 텍스트 필드 large: 흰색 배경 / #58616A 1px 보더 / 8px radius / 17~19px·400 / 56px 높이 / #464C53 placeholder / focus 시 #256EF4 4px halo. 라벨 옆 빨간 별표(*) + aria-required."
• "Error 텍스트 필드: 동일 + 보더 2px solid #DE3412 + 하단 helper text #DE3412 15px·400 + aria-invalid='true' + 에러 영역 자동 포커스."
• "Light Primary 안내 패널: #ECF2FE 배경 / 8px radius / 16px 24px padding / #0B50D0 강조 + #1E2124 본문."
• "Outline Primary 배지: 투명 / #0B50D0 텍스트 / #256EF4 1px 보더 / 4px radius / 0 8px padding / 15px·400 / 24px 높이."
• "Tertiary 버튼 large: 투명 / #1E2124 / #58616A 1px / 8px radius / 0 20px / 56px. 취소·초기화·닫기."
• "Select large: 흰색 / #58616A 1px / 6px radius / 0 48px 0 16px / 19px·400 / 56px. Error 시 2px solid #AB2B36 (Point 60 — 셀렉트는 Danger가 아닌 Point를 쓴다)."
• "Tag 필터 칩 large: 흰색 / #CDD1D5 1px / 40px radius (pill) / 8px 12px / 17px·400 / 40px. Selected 시 #ECF2FE 배경 + #256EF4 보더 + #0B50D0 텍스트."
• "Modal medium: 560px 폭 / #FFFFFF / 12px radius / 40px padding / drop shadow + black/0.5 백드롭 fade-in 400ms."

Iteration Guide

1. 컬러는 매직넘버 룰을 따른다 — primary-50 위 gray-0 / gray-90 / white를 첫 후보로
2. 라운드는 2 / 4 / 6 / 8 / 10 / 12 / 1000px 일곱 단계만
3. 본문은 17px / 400 / 1.5 line-height가 기본 (16px이 아님)
4. 컴포넌트 사이즈 5단계: xsmall(32) / small(40) / medium(48) / large(56) / xlarge(64) — 버튼·input·select 모두 동일
5. 모든 인터랙티브 요소에 4px outline focus ring (#256EF4) 필수
6. 그림자 사용은 모달 / 드롭다운 / 툴팁으로 한정 — 카드는 보더로
7. aria-* 속성, 키보드 탐색, KWCAG 2.1 AA 색대비를 토큰 단계부터 만족시킬 것
8. 일반 모드와 선명한 화면 모드 두 토큰 레이어를 동시에 검증
9. 모션은 400ms / ease-in-out 표준, prefers-reduced-motion: reduce에서 즉시 전환

---

10. Voice & Tone

KRDS의 보이스는 공공 서비스 안내 데스크의 화법입니다 — 정중하고(-합니다/-해 주세요), 절제되며, 사용자를 평가하거나 설득하려 들지 않습니다. 마케팅 감탄("놀라운", "혁신적인", "최고의")은 금지이고, 동시에 권위적 명령("입력하라", "확인할 것")도 피합니다. 기본 어미는 **하십시오체(-합니다)와 해요체의 정중한 변형(-해 주세요, -해 주십시오)**의 혼용이며, 페이지 헤드라인은 명사형으로 짧게 — "모두를 위한 디지털 서비스 경험" — 행위 문장은 동사형으로 — "시작하기", "신청하기", "자세히 보기". 영문 카피가 필요한 경우 plain English UK Gov 스타일로 — "Apply now" 가 "Get started today!" 보다 우선합니다.

금지 표현. "혁신적인", "차세대", "최고의", "고객님께서는 ~해 주시기 바랍니다" (지나친 격식), "데이터가 없습니다", "오류가 발생했습니다" 단독 사용, "잘 모르시겠다면" (사용자 능력 평가), 영문 보일러플레이트 "Oops, something went wrong". 어려운 한자어·일본식 행정 용어는 「쉬운 우리말 쓰기」(국립국어원·행정안전부 권장) 원칙에 따라 평이한 한국어로 치환 (예: "기재하다" → "쓰다 / 적다", "취하한다" → "취소한다", "당해 연도" → "올해").

Voice samples.

• 모두를 위한 디지털 서비스 경험 — 홈 헤드라인 (페이지 제목).
• 시작하기 — Primary CTA (xlarge, #256EF4 / 흰색 / 64px).
• 자세히 보기 — 카드 내부의 x-large text 버튼 (보조 액션).
• 글자·화면 설정 — 헤더 유틸리티 버튼 (a11y 1차 컨트롤).
• 통합검색 / 전체메뉴 — GNB 액션 버튼.
• 디자인 스타일 / 컴포넌트 / 기본 패턴 / 서비스 패턴 / 소식·소통 / KRDS 소개 — GNB 카테고리 6개.
• 누구나 쉽게 사용할 수 있는 공공 웹·앱 — 행정안전부 KRDS 소개 문구.
• KRDS는 공공 웹·앱이 일관된 사용자 경험을 제공할 수 있도록 디자인 토큰과 컴포넌트를 표준화합니다. — 일러스트레이션 (브랜드 문장 패턴, 실제 페이지 카피의 톤을 재구성).

11. Brand Narrative

KRDS(대한민국 정부 디자인 시스템, Korea Republic Design System)는 **행정안전부(Ministry of the Interior and Safety, MOIS)**가 주관하여 2024년 4월에 공식 공개한 범정부 UI/UX 디자인 시스템입니다. 정부는 2023년 전자정부 서비스 이용 실태조사에서 "동일한 행동을 반복적으로 요청한다", "표현이 일관되지 않다", "어려운 행정 용어가 많다"는 핵심 피드백을 받았고, 이를 해소하기 위해 2023년 7월부터 12월까지 범정부 디자인시스템 구축 사업을 진행한 뒤 (행정안전부 보도자료, 대한민국 정책브리핑), 2024년 4월 공식 사이트 www.krds.go.kr을 통해 가이드라인·디자인 토큰·컴포넌트 라이브러리(Figma)·HTML 마크업을 일반 공개했습니다. 영문명은 Korea Design System / Korea Republic Design System으로 표기되며, 영문 자료에서는 Pan-Government UI/UX Design System으로 소개되기도 합니다 (MOIS 영문 공지).

KRDS의 적용 대상은 대한민국 정부 상징(Government Symbol)을 사용하는 모든 기관의 웹·모바일 웹·앱입니다 — 중앙 행정기관, 소속기관, 공공기관, 지방자치단체가 포함되며, 시스템의 목적은 (1) 디지털 약자(고령자·장애인·저시력 사용자)를 포함한 모두에게 동일한 사용 경험을 제공하고, (2) 디자이너와 개발자가 같은 토큰·컴포넌트를 공유함으로써 공공 서비스의 품질 편차를 줄이는 것입니다 (Design Compass — KRDS 소개, Design Compass EN — Launch announcement). 정책 맥락에서는 **「국가정보화 기본법」, 「장애인차별금지 및 권리구제 등에 관한 법률(장차법)」, 「웹 접근성 국가표준(KWCAG 2.1 / KS X OT 0003)」**이 공공기관 웹에 WCAG 2.1 AA 동등 이상의 접근성을 법적으로 요구하고 있으며 (TPGi — South Korea Disability Discrimination Act, AAAtraq — Digital Accessibility in South Korea), KRDS는 그 기술적 구현 표준 역할을 담당합니다.

비교 좌표는 분명합니다 — KRDS는 영국의 GOV.UK Design System, 미국의 U.S. Web Design System (USWDS), 싱가포르의 **Singapore Government Design System**와 같은 계보에 속하는 국가 단위 공공 디자인 시스템입니다. 한국의 이전 표준(과거 "전자정부 표준프레임워크 UI 가이드", 각 부처 개별 가이드)을 통합·승계하며, 디자인 토큰 / 컴포넌트 / 마크업이 한 곳에서 공개·버전 관리된다는 점이 차이입니다 (HEROPY.DEV — KRDS 소개, 나무위키 — 범정부 UI/UX 디자인 시스템).

KRDS가 거부하는 것: 정부 사이트마다 다른 표기와 배치(이전의 전자정부 사이트 파편화), 마케팅 톤의 카피(공공 서비스는 권유 대상이 아닙니다), 시각적 화려함을 통한 신뢰 연출(과한 그라데이션 / 일러스트 / 모션). 거부하지 않는 것: 가독성·예측 가능성·접근성. 정부 블루 #256EF4는 그래서 "정부의 색"이 아니라 "행위(action)의 색"으로 기능합니다 — 단 하나의 버튼이 사용자가 무엇을 해야 하는지를 결정하도록.

12. Principles

1. 접근성 우선 (Accessibility First). KWCAG 2.1 AA / WCAG 2.1 AA가 법적 의무이며, KRDS는 토큰 단계부터 색대비 4.5:1(매직넘버 50), 키보드 탐색, 스크린 리더 보조 텍스트, focus 가시성(4px halo)을 강제합니다. 일반 모드와 선명한 화면 모드 두 토큰 레이어를 동시에 운영합니다. UI implication: 어떤 컴포넌트도 a11y 검수 없이 §4에 추가되지 않으며, color-only로 의미를 전달하는 패턴은 반려됩니다.
2. 일관성 (Consistency). 같은 행위는 모든 정부 사이트에서 같은 형태로 — Primary 버튼은 어디서나 #256EF4 / 8px / 19px·400 / 64px(xlarge)입니다. UI implication: 부처별 / 사이트별 커스텀 컬러·라운드·폰트를 새로 만들지 않습니다. 브랜드 표시가 필요한 경우 헤더의 운영기관 식별자(component_02_02) 슬롯에 한정.
3. 명료성 (Clarity). 한 화면이 하나의 결정을 안내해야 합니다. Primary 버튼은 한 화면에 하나, 양식 라벨은 명사형 1개, 검증 오류는 무엇 / 왜 / 어떻게 셋을 모두 제공. UI implication: "확인 / 취소 / 다음 / 이전"이 모두 같은 위계로 떠 있는 화면은 위계 재배치가 필요합니다.
4. 안정성 (Predictability). 정부 서비스는 처음 방문하는 사용자가 다수입니다 — 사이트마다 학습 곡선이 다시 시작되면 안 됩니다. 위치(헤더 / GNB / 푸터), 컴포넌트(버튼·입력·표·페이지네이션), 패턴(검색 / 신청 / 조회 / 결과)이 사이트를 옮겨도 동일하게 작동해야 합니다. UI implication: "신선한" 인터랙션, 비표준 컨트롤, 가독성을 희생한 시각 강조는 거부됩니다.
5. 사용자 중심 (User-Centred). "공급자(부처)의 업무 구조"가 아니라 시민이 하려는 행위를 기준으로 정보를 정렬합니다. KRDS의 컴포넌트 카테고리가 "아이덴티티 / 탐색 / 레이아웃 및 표현 / 액션 / 선택 / 피드백 / 도움 / 입력 / 설정 / 콘텐츠 / 모바일"로 구성된 것이 그 증거 — 모두 사용자가 하려는 행위 분류입니다. UI implication: IA 회의에서 "부서별로 묶자"가 아니라 "시민이 같은 시점에 함께 처리하는 일끼리 묶자"가 기준이 됩니다.

13. Personas

아래 페르소나는 KRDS가 공개적으로 지목하는 "디지털 약자 및 일반 시민" 사용자 군집을 기반으로 재구성한 가상의 인물입니다. 특정 개인을 지칭하지 않습니다.

김순자 (Kim Soon-ja), 68세, 대전. 정부24에서 주민등록등본을 발급받고 국민건강보험공단 앱에서 진료 내역을 확인합니다. 노안으로 16px 본문은 자주 놓치기 때문에 헤더의 "글자·화면 설정"에서 130%로 키워 쓰며, 양식의 빨간 별표가 명확히 보이지 않으면 다음 단계로 넘어가지 못합니다. KRDS가 그를 위해 만든 것: 17px·1.5 line-height 기본 본문 + 130% 사용자 줌 + 충분한 색대비(매직넘버 50).

박지훈 (Park Ji-hoon), 29세, 서울, 시각장애. 스크린 리더(NVDA / VoiceOver)로 정부 사이트를 사용합니다. 본문 시맨틱이 망가져 있거나, 버튼이 <div>로 만들어져 있거나, focus 순서가 시각 순서와 다르면 즉시 페이지를 떠납니다. KRDS가 그를 위해 만든 것: aria-* 속성을 포함한 마크업, 키보드 fully navigable한 컴포넌트, 4px outline focus ring, 선명한 화면 모드.

Sarah Kim, 34세, 미국 거주 한국 국적자. 해외 거주 한국인 — 영문 인터페이스 옵션, plain English 안내문, 시간대 표시(KST)가 명확한 양식을 기대합니다. KRDS의 영문 모드(English)와 GOV.UK·USWDS 친화적인 명사형 라벨이 그의 학습 비용을 낮춥니다.

이주임 (Lee Joo-im), 41세, 광역시 공무원. 부처 웹사이트의 콘텐츠를 편집·게시하는 운영자. CMS에서 컴포넌트를 조립할 때 "어떤 버튼이 Primary인지", "어떤 배지가 status용인지"를 빠르게 결정할 수 있어야 합니다. KRDS는 그를 위해 11개 컴포넌트 카테고리(아이덴티티 / 탐색 / 레이아웃 및 표현 / 액션 / 선택 / 피드백 / 도움 / 입력 / 설정 / 콘텐츠 / 모바일)와 각 변형의 사용 가이드를 명시합니다.

최민호 (Choi Min-ho), 22세, 모바일-only 사용자. 데스크톱을 거의 사용하지 않는 청년 사용자. 정부 서비스도 스마트폰에서 끝내야 합니다. KRDS의 모바일 전용 컴포넌트 카테고리(component_12_* 8종 — 바텀시트 / 스낵바 / 탭바 / 뒤로가기 등)가 그를 위한 별도 시스템.

14. States

Service Journey States (서비스 패턴 노드별 상태)

KRDS 서비스 패턴 5종이 정의하는 사용자 여정 각 단계의 표준 상태 — 위 표가 "컴포넌트 상태"라면 아래 표는 "여정 노드 상태"입니다 (service_summary).

15. Motion & Easing

Durations (라이브 페이지에서 측정된 --krds-transition-* 토큰 기준):

Easings:

모션 자세 (Motion stance). 스프링·바운스·오버슈트는 KRDS에서 금지됩니다. 정부 서비스는 "재미있는" 인터랙션을 통해 신뢰를 얻지 않습니다 — 사용자가 자신이 무엇을 했는지 즉시 / 예측 가능하게 / 차분하게 알 수 있어야 합니다. 모든 전환은 400ms 안에 끝나고, easing은 ease-in-out / ease / linear 셋으로 충분합니다. prefers-reduced-motion: reduce 사용자에게는 모든 motion-* 토큰이 0ms로 축소되며, 페이드 / 슬라이드 / 접힘 모두 즉시 전환됩니다. 이 규칙은 a11y 권고가 아니라 KRDS의 기본 동작입니다 (정부 서비스 사용자 중 전정기관 민감성·인지장애 보유자 비율이 일반 사이트보다 높습니다).

Signature motions.

1. 메뉴 / 드롭다운 열기·닫기. 400ms / ease-in-out로 opacity + transform translateY(-4px → 0). 백드롭 없음 (full-page 모달이 아니므로). 닫힐 때 동일 시간 / 역방향.
2. 아코디언·디스클로저. max-height 400ms / ease 전환. 콘텐츠 fade 없음 — height 변화만으로 충분하고, fade를 더하면 글자가 흐려져 가독성이 손해.
3. 모달 진입. opacity fade 400ms linear + 백드롭 동시 fade (black/0.5). transform 사용하지 않음 (성능 우선 / 미감 절제). 모달 자체는 12px radius --krds-radius-xlarge1.
4. 사이드 메뉴 폭 변경. width 400ms / ease (--krds-transition-collapse-width).
5. Reduce motion. 모든 위 전환이 0ms 즉시. 백드롭은 그대로 표시되되 fade 없이 즉시 가시화.

---

Verified: 2026-05-08 (deep re-verification — 10 pages inspected) Tier 1 sources: 10 live pages on www.krds.go.kr — index + 3 style pages (color/typography/layout) + 6 component pages (buttons/inputs/select/tag/modal/badge). 588 --krds-color-* tokens enumerated, full radius/padding/size-height/transition token sets extracted. Tier 2 sources: getdesign.md/krds — no record / styles.refero.design — no record. KRDS 자체가 정부 발행 canonical token catalog. Tier 3 (Philosophy): 행정안전부 보도자료, 대한민국 정책브리핑, Design Compass(KR/EN), TPGi(KWCAG·장차법), AAAtraq(2025 a11y 동향), GOV.UK / USWDS / Singapore GDS 비교 좌표. Style ref: yeogiotte (한국 공공·민간 정중한 한국어 톤 참조), karrot (한국 voice 형식 참조). Conflicts unresolved: none. KRDS는 단일 정부 발행 시스템이므로 부처별 변형 / 외부 aggregator 충돌 없음.