Gov24 (정부24)

초록→청색 테를 두른 알약 검색창 하나와 순위가 붙은 「자주 찾는 서비스」로 여는 모든 민원의 입구

한국소비자차가운modern-minimal고딕comfortableroundsubtle라이트한글 지원출시 2017개정 2025

갤러리에서 열기 — 적용 예시 · 가이드 다운로드

Brand DNA

브랜드 DNA

브랜드명: 정부24 (Gov24, www.gov.kr → 2025년 개편 후 plus.gov.kr 로 연결)
한 줄 정체성: 행정안전부가 운영하는 대한민국 정부 대표 민원 포털. 민원 신청·증명서 발급·혜택알리미(구 보조금24)·정책정보를 한 누리집에 모은 「모든 정부 서비스의 입구」
공식 디자인 철학: 메인 문구 그대로 「모든 정부 서비스, 이제 한 곳에서 찾아보세요」. 2025년 7월 10일 「정부24+」 전면 개편(4월 시범 개통)으로 한 번 로그인하면 복지로·고용24 서비스까지 추가 인증 없이 쓰게 했다. 화면 규칙은 KRDS(범정부 UI/UX 디자인 시스템)를 그대로 따른다
KRDS 와의 관계: 정부24 는 KRDS 가이드라인 시범 적용 5개 누리집(정부24·복지로·고용노동부·국립중앙도서관·건강보험공단) 중 하나였고(행정안전부 보도자료), 현재 CSS(variable.css)의 --iw-* 색 토큰은 KRDS krds_tokens.css 값과 한 자리도 다르지 않다(primary-50 #256EF4, gray-90 #1E2124, secondary-5 #EEF2F7 등). 글자 크기 토큰(1.3~4rem)·간격(0.4rem 단위)도 KRDS 눈금이다. 즉 색·글자·간격 = KRDS, 화면 구성·검색·민원 부품 = 정부24 고유
시그니처 요소 1개: 메인 한가운데의 알약형 통합검색창 — 높이 60px·완전 둥근 모서리에 초록(#0FB87D)→청색(#256EF4) 102° 그라디언트 테를 두르고, 옆 스위치로 「AI 검색」을 켜고 끈다. 그 아래 순위 번호가 붙은 「자주 찾는 서비스」 1~10위(토지(임야)대장·주민등록등본(초본)·자동차등록원부…)가 이어진다

Tone & Mood

톤 & 무드

핵심 키워드 3개: 한곳, 친절, 믿음
무드 설명: 국민 누구나 들어오는 창구라서 화면은 KRDS 의 흰 바탕·17px 본문·청색 하나로 차분하다. 그 위에 정부24 만의 표정 — 알약 검색창, 초록→청색 AI 테, 폴더 탭처럼 튀어나온 「최근 이용」 패널, 「~할 수 있어요」 어투의 메뉴 설명 — 을 얹어 관공서보다 생활 앱에 가깝게 말을 건다.
비주얼 스타일: 모던 미니멀 — 평면 면과 1px 경계선, 연청색 면(#E7F4FE)으로 개인화 영역만 구분
밀도(Density): Comfortable — 메뉴마다 한 줄 설명이 붙고 본문 17px·검색창 60px 로 고령층 사용을 전제한다
모서리 성향: Round (12~16px) — 서비스 카드 12px, 개인화 패널 16px, 검색창은 32px(알약). 버튼·배지만 KRDS 의 4~8px
평면성: Subtle — 개인화 패널에 0 2px 8px rgba(0,0,0,.04) 정도의 아주 옅은 그림자, 나머지는 경계선

Color System

컬러 시스템 (CSS 변수)

정부24 CSS(plus.gov.kr/static/css/prod/variable.css)의 --iw-* 토큰을 옮겼다. 색 램프는 KRDS 공식 토큰과 동일하다(아래 「KRDS」 표기). 정부24 에만 있는 값은 「정부24 고유」로 표기했다.

:root {
  /* Primary — 정부24 청색 = KRDS primary (--iw-primary-5 ~ 90) */
  --color-primary-50:  #ECF2FE;  /* --iw-primary-5  — 선택 행, 강조 배지 면 (KRDS) */
  --color-primary-100: #D8E5FD;  /* --iw-primary-10 — 개인화 패널 테두리 (KRDS) */
  --color-primary-200: #B1CEFB;  /* --iw-primary-20 (KRDS) */
  --color-primary-300: #86AFF9;  /* --iw-primary-30 (KRDS) */
  --color-primary-400: #4C87F6;  /* --iw-primary-40 (KRDS) */
  --color-primary-500: #256EF4;  /* --iw-primary-50 — 주요 버튼·검색 버튼·순위 숫자 (KRDS) */
  --color-primary-600: #0B50D0;  /* --iw-primary-60 — 링크·활성 탭 글자 (KRDS) */
  --color-primary-700: #083891;  /* --iw-primary-70 — pressed (KRDS) */
  --color-primary-800: #052561;  /* --iw-primary-80 (KRDS) */
  --color-primary-900: #03163A;  /* --iw-primary-90 (KRDS) */

  /* 정부24 고유 — AI 검색 그라디언트의 시작색 */
  --color-ai-green: #0FB87D;     /* main.css .main-search-ai 테·AI 스위치·생활가이드 활성 탭 */
  --gradient-ai: linear-gradient(102deg, #0FB87D 10.14%, #256EF4 89.86%); /* 끝 % 는 (추정) */

  /* 정부24 고유 — 로고 워드마크 남색 */
  --color-brand-navy: #003963;   /* logo-header.svg 워드마크 채움 (로고는 static.gov.kr/content/images/layout/logo-header.svg 원본을 인라인) */

  /* Secondary — 정부 남색 = KRDS secondary */
  --color-secondary-50:  #EEF2F7;  /* --iw-secondary-5 — 공식 배너 배경 (KRDS) */
  --color-secondary-500: #346FB2;  /* --iw-secondary-50 (KRDS) */
  --color-secondary-700: #063A74;  /* --iw-secondary-70 — 모바일 탭 활성 배경 */
  --color-secondary-800: #052B57;  /* --iw-secondary-80 — 보조 배지 글자 */

  /* Point — 정부 적색 */
  --color-point-500: #D63D4A;      /* --iw-point-50 (KRDS). 레거시 --iw-color-element-point 는 #CC3340 */

  /* Neutral — KRDS gray */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F4F5F6;  /* --iw-gray-5 — 검색 영역·섹션 면 */
  --color-neutral-100:  #E6E8EA;  /* --iw-gray-10 — 목록 구분선 */
  --color-neutral-200:  #CDD1D5;  /* --iw-gray-20 — 약한 경계선 */
  --color-neutral-300:  #B1B8BE;  /* --iw-gray-30 — 기본 경계선 */
  --color-neutral-500:  #6D7882;  /* --iw-gray-50 — 캡션·비활성 탭 */
  --color-neutral-700:  #464C53;  /* --iw-gray-70 — 보조 글자 */
  --color-neutral-900:  #1E2124;  /* --iw-gray-90 — 본문 (main.css 최다 사용색) */
  --color-neutral-1000: #000000;

  /* Semantic — KRDS 램프 그대로 */
  --color-success-bg: #EAF6EC;   /* --iw-success-5 */
  --color-success-fg: #267337;   /* --iw-success-60 */
  --color-warning-bg: #FFF3DB;   /* --iw-warning-5 */
  --color-warning-fg: #8A5C00;   /* --iw-warning-60 */
  --color-error-bg:   #FDEFEC;   /* --iw-danger-5 */
  --color-error-fg:   #BD2C0F;   /* --iw-danger-60 */
  --color-info-bg:    #E7F4FE;   /* --iw-info-5 — 「최근 이용·즐겨찾기」 패널 바탕 (정부24 용법) */
  --color-info-fg:    #096AB3;   /* --iw-info-60 */

  /* Surface */
  --bg-base:     #FFFFFF;        /* 헤더·페이지 */
  --bg-subtle:   #F4F5F6;        /* 검색 영역·섹션 구분 */
  --bg-elevated: #FFFFFF;        /* 서비스 카드 */
  --bg-overlay:  rgba(0,0,0,0.5);/* 모달 딤 (추정 — KRDS alpha-black50) */

  /* Text */
  --text-primary:    #1E2124;    /* gray-90 */
  --text-secondary:  #464C53;    /* gray-70 */
  --text-tertiary:   #6D7882;    /* gray-50 */
  --text-on-primary: #FFFFFF;
  --text-disabled:   #8A949E;    /* gray-40 */

  /* Border */
  --border-default: #B1B8BE;     /* --iw-color-border-gray */
  --border-subtle:  #CDD1D5;     /* --iw-color-border-gray-light */
  --border-strong:  #58616A;     /* gray-60 — tertiary 버튼 테두리 (정부24 실측) */
  --border-focus:   #256EF4;
}

### ③.1 사용 컨텍스트 주석

정부24 가 KRDS 와 다른 곳: 색 값은 같고 쓰는 자리가 다르다. --color-info-bg(#E7F4FE)를 경보가 아닌 개인화(최근 이용·즐겨찾기) 패널 바탕으로 쓰고, --color-ai-green 은 KRDS 에 없는 색이다.
--gradient-ai: AI 검색창 테(2px), AI 스위치 켜짐, 「생활·가족가이드」 활성 탭 원형 이미지 테에만. 글자·넓은 면에는 쓰지 않는다.
--color-brand-navy: 로고 워드마크 전용. UI 글자색은 gray-90 을 쓴다.
다크 모드 관련: layout.css·main.css 에 html[data-theme=dark-mode] 규칙이 있으나 대상은 모바일 「쉬운 홈」·헤더·푸터뿐이다(#131416·#1E2124 면). 정부24 전체에 걸친 다크 모드 토글은 확인되지 않아 이 문서는 라이트만 다룬다. 헤더의 「화면크기」(작게~가장 크게 5단)는 글자 배율 조절이지 테마가 아니다.

Typography

타이포그래피

폰트 페어링:
- 한글: Pretendard GOV (OFL — static.gov.kr 에서 서브셋 woff2 셀프호스팅, KRDS 공식 서체)
- 영문: Pretendard GOV (OFL) / 폴백 Pretendard, Apple SD Gothic Neo, Malgun Gothic
단위: 루트 10px + rem. 헤더 「화면크기」 5단 조절이 이 rem 을 키운다
위계 (PC 기준, --iw-fz-* 토큰 — 값은 KRDS 와 동일, line-height 는 추정):
- Display (메인 검색 헤드라인): 40px(--iw-fz-xlg 4rem) / 700 / 1.35 / -0.01em — 1024px 이하 28px
- H1: 32px(--iw-fz-lg) / 700 / 1.4 / 0 — 모바일 24px
- H2 (「자주 찾는 서비스」 같은 섹션 제목): 24px(--iw-fz-md) / 700 / 1.5 / 0 — 모바일 22px
- H3 (서비스명): 19px(--iw-fz-sm) / 700 / 1.5 / 0
- Body Large: 19px(--iw-fz-b-lg) / 400 / 1.5 / 0
- Body: 17px(--iw-fz-b-md) / 400 / 1.5 / 0
- Body Small (메뉴 한 줄 설명, 탭 라벨): 15px(--iw-fz-b-sm) / 400~700 / 1.5 / 0
- Caption: 13px(--iw-fz-b-xsm) / 400 / 1.5 / 0
어투: 메뉴 설명은 「~할 수 있어요」「~찾아드려요」 해요체. 버튼은 「신청」「발급」「조회」 짧은 동사

Spacing

스페이싱

Base unit: 4px (--iw-gap-1 0.4rem ~ --iw-gap-20 8rem, 4px 간격 20단)
토큰: ``css --space-xs: 4px; /* --iw-gap-1 */ --space-sm: 8px; /* --iw-gap-2 */ --space-md: 16px; /* --iw-gap-4 — 검색창과 AI 스위치 사이 */ --space-lg: 24px; /* --iw-gap-6 — 헤더 좌우 패딩 */ --space-xl: 32px; /* --iw-gap-8 */ --space-2xl: 48px; /* --iw-gap-12 */ --space-3xl: 64px; /* --iw-gap-16 */ ``
Container: 헤더·본문 max-width 1248px(124.8rem), 좌우 패딩 PC 24px·모바일 16px. 메인 검색창 max-width 588px

Border Radius

--radius-none: 0;
--radius-sm: 4px;        /* 배지 (.badge 0.4rem) */
--radius-md: 8px;        /* 버튼·입력 (0.6~0.8rem) */
--radius-lg: 12px;       /* 서비스 카드·최근 이용 카드 (1.2rem, main.css 최다) */
--radius-xl: 16px;       /* 개인화 패널 (1.6rem, 탭 쪽 모서리만 0) */
--radius-full: 9999px;   /* 통합검색창(3.2rem 알약)·AI 스위치·순위 원 */

KRDS 는 카드 10~12px·입력 8px 인데, 정부24 는 메인 검색창을 알약(32px) 으로 둥글린다 — 가장 큰 차이.

Shadow / Elevation

main.css 실측값.

--shadow-none: none;                                   /* 기본 카드 — 경계선만 */
--shadow-sm: 0 2px 8px 0 rgba(0,0,0,0.04);             /* 최근 이용·즐겨찾기 패널 */
--shadow-md: 0 6px 8px 0 rgba(37,110,244,0.10);        /* 검색창·강조 카드 — 청색 기운 그림자 */
--shadow-lg: 0 16px 24px 0 rgba(0,0,0,0.12);           /* 전체메뉴·자동완성 드롭다운 */
--shadow-xl: 0 16px 32px 0 rgba(0,0,0,0.16);           /* 모달 (추정) */

Iconography

스타일: Outline 중심의 단색 아이콘 + 서비스 바로가기용 컬러 일러스트 썸네일(원형 안 3D풍 사물)
Stroke 굵기: 1.5~2px (추정)
모서리 처리: Round
추천 라이브러리: 실제로는 static.gov.kr/content/images/common/ico/*.svg 자체 세트를 mask-image 로 칠한다(다크 쉬운 홈에서 색만 바꾸려고). 대체재는 Lucide
규칙: 새 창 링크엔 ico-new-window 를 꼭 붙이고, 아이콘 단독 버튼엔 대체 텍스트

Component Guide

컴포넌트 가이드 (상태별 CSS)

Button — 모양은 KRDS 버튼(primary / secondary / tertiary), 테두리 색은 정부24 실측

.g24-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);
}
.g24-btn:focus-visible { outline: 2px solid #FFFFFF; box-shadow: 0 0 0 4px var(--border-focus); }

.g24-btn--primary { background: var(--color-primary-500); color: var(--text-on-primary); }
.g24-btn--primary:hover { background: var(--color-primary-600); }
.g24-btn--primary:active { background: var(--color-primary-700); }
.g24-btn--primary:disabled { background: var(--color-neutral-200); color: var(--text-disabled); cursor: not-allowed; }
.g24-btn--primary[aria-busy="true"] { color: transparent; position: relative; }
.g24-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: g24-spin .8s linear infinite;
}
@keyframes g24-spin { to { transform: rotate(360deg); } }

/* .btn.secondary 실측: primary-60 글자 + primary 테두리 + primary-5 면 */
.g24-btn--secondary { background: var(--color-primary-50); color: var(--color-primary-600); border-color: var(--color-primary-500); }
.g24-btn--secondary:hover { background: var(--color-primary-100); }
.g24-btn--secondary:active { background: var(--color-primary-200); }
.g24-btn--secondary:disabled { background: var(--bg-subtle); border-color: var(--border-subtle); color: var(--text-disabled); }

/* .btn.tertiary 실측: gray-90 글자 + gray-60 테두리 (KRDS 문서 예시보다 진한 테두리) */
.g24-btn--ghost { background: transparent; color: var(--text-primary); border-color: var(--border-strong); }
.g24-btn--ghost:hover { background: var(--bg-subtle); }
.g24-btn--ghost:active { background: var(--color-neutral-100); }
.g24-btn--ghost:disabled { color: var(--text-disabled); border-color: var(--border-subtle); }

.g24-btn--danger { background: #DE3412; color: #fff; }       /* --iw-danger-50 */
.g24-btn--danger:hover { background: #BD2C0F; }
.g24-btn--danger:active { background: #8A240F; }
.g24-btn--danger:disabled { background: var(--color-neutral-200); color: var(--text-disabled); }

Input — 정부24 고유: 알약형 통합검색창 + AI 그라디언트 테

.g24-search { max-width: 588px; padding: 2px; border-radius: var(--radius-full); background: var(--border-default); }
.g24-search.is-ai { background: var(--gradient-ai); box-shadow: var(--shadow-md); }
.g24-search__field {
  display: flex; align-items: center; height: 60px; padding: 0 8px 0 24px;
  background: var(--bg-base); border-radius: var(--radius-full);
}
.g24-search__field input { flex: 1; border: 0; background: transparent; font: 400 17px/1.5 inherit; color: var(--text-primary); }
.g24-search__field input::placeholder { color: var(--text-tertiary); }
.g24-search:focus-within { background: var(--color-primary-500); }          /* 포커스 = 테 색만 청색으로, 한 겹 */
.g24-search.is-error { background: #DE3412; }
.g24-search.is-disabled .g24-search__field { background: var(--color-neutral-100); }
.g24-search__submit { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--color-primary-500); color: #fff; }

/* 일반 폼 입력은 KRDS 입력 그대로 */
.g24-input { width: 100%; height: 56px; padding: 0 16px; font: 400 17px/1.5 inherit; border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.g24-input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 4px var(--color-primary-100); outline: none; }
.g24-input[aria-invalid="true"] { border-color: #DE3412; }
.g24-input:disabled { background: var(--color-neutral-100); color: var(--text-disabled); }

Card — 서비스 카드 / 개인화 패널(폴더 탭) / Outlined

.g24-card { background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 20px 24px; }
.g24-card:hover { border-color: var(--color-primary-500); }
/* 「최근 이용 / 즐겨찾기」: 왼쪽 위만 각진 연청색 패널 + 위로 튀어나온 탭 */
.g24-panel { background: var(--color-info-bg); border: 1px solid var(--color-primary-100); border-radius: 0 var(--radius-xl) var(--radius-xl) var(--radius-xl); box-shadow: var(--shadow-sm); padding: 16px; }
.g24-panel__tab { display: inline-block; padding: 12px 20px 10px; font: 700 15px/1 inherit; color: var(--text-tertiary); background: var(--color-info-bg); border: 1px solid var(--color-primary-100); border-bottom: 0; border-radius: 12px 12px 0 0; }
.g24-panel__tab[aria-selected="true"] { color: var(--color-primary-600); }
.g24-recent { width: 230px; height: 104px; background: #fff; border-radius: var(--radius-lg); padding: 16px; }
.g24-card--outlined { background: transparent; border: 1px solid var(--border-default); }

Badge / Tag — .badge 실측(높이 24px·15px·4px 모서리)

.g24-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--radius-sm); font: 700 15px/1 inherit; }
.g24-badge--solid   { background: var(--color-primary-500); color: #fff; }                 /* .bg-primary */
.g24-badge--subtle  { background: var(--color-primary-50); color: var(--color-primary-600); } /* .bg-primary-5 */
.g24-badge--outline { border: 1px solid var(--color-secondary-700); color: var(--color-secondary-800); } /* .secondary */
.g24-badge--sm { height: 20px; }

Navigation — 공식 배너 + 로고·유틸 줄 + 메가 메뉴(메뉴마다 한 줄 설명)

.g24-masthead { background: var(--color-secondary-50); min-height: 32px; padding: 0 16px; font-size: 15px; line-height: 32px; }
.g24-header { background: #fff; border-bottom: 1px solid var(--color-neutral-100); }
.g24-header__top { max-width: 1248px; margin: 0 auto; padding: 12px 24px 0; display: flex; justify-content: space-between; align-items: center; }
.g24-logo { width: 142px; height: 48px; display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 24px; color: var(--color-brand-navy); }
.g24-gnb { max-width: 1248px; margin: 0 auto; padding: 0 24px; display: flex; gap: 40px; }
.g24-gnb a { font: 700 19px/1.5 inherit; color: var(--text-primary); padding: 16px 0 14px; border-bottom: 2px solid transparent; text-decoration: none; }
.g24-gnb a:hover, .g24-gnb a[aria-expanded="true"] { color: var(--color-primary-600); border-bottom-color: var(--color-primary-500); }
.g24-mega dt { font: 700 17px/1.5 inherit; }
.g24-mega dd { margin: 2px 0 16px; font-size: 15px; color: var(--text-secondary); }  /* 「~할 수 있어요」 설명 */

Motion

--duration-fast: 150ms;                          /* hover 색 변화 (추정) */
--duration-base: 300ms;                          /* AI 스위치 토글·탭 전환 (추정) */
--duration-slow: 400ms;                          /* 전체메뉴 펼침 — KRDS transition-base */
--ease-out: cubic-bezier(0, 0, 0.2, 1);          /* (추정) */
--ease-in-out: ease-in-out;

「최근 이용」 카드는 swiper 가로 넘김(좌우 32px 원형 버튼). AI 스위치를 켜면 일반 검색창이 숨고 그라디언트 테 검색창이 같은 자리에 나타난다(display 전환, 애니메이션 없음). prefers-reduced-motion 에서는 넘김 애니메이션을 끈다.

Anti-patterns

1. AI 그라디언트(초록→청색)를 넓은 배경·본문 글자에 칠하기 금지 — 검색창 테·스위치·활성 탭 테 같은 가는 선과 작은 점에만 2. 메인에 검색창을 두 개 이상 두거나 검색창 옆에 주요 버튼을 따로 늘어놓기 금지 — 입구는 알약 검색창 하나 3. 「자주 찾는 서비스」를 아이콘만 있는 격자로 바꿔 이름·순위를 숨기기 금지 — 민원은 정확한 서식 이름으로 찾는다 4. 공식 배너(「이 누리집은 대한민국 공식 전자정부 누리집입니다.」)와 「화면크기」 조절을 빼기 금지 5. 메뉴 이름만 던지고 설명을 생략하기 금지 — 행정 용어는 「~할 수 있어요」 한 줄 설명을 붙인다

Gov24 (정부24)

Brand DNA

브랜드 DNA

Tone & Mood

톤 & 무드

Color System

컬러 시스템 (CSS 변수)

Typography

타이포그래피

Spacing

스페이싱

Border Radius

Border Radius

Shadow / Elevation

Shadow / Elevation

Iconography

Iconography

Component Guide

컴포넌트 가이드 (상태별 CSS)

Motion

Motion

Anti-patterns

Anti-patterns

Sources

출처