---
type: knowledge
domain: design
status: active
last-reviewed: 2026-07-13
revision: 2
---

# 시빅 인스티튜셔널 (Civic Institutional)

> 한 줄 정의
> 공공기관처럼 보이는 장식을 만드는 스타일이 아니라, 시민이 실제 민원을 이해하고 끝내도록 돕는 서비스 설계 프로필. 한국 공공 웹·앱은 KRDS를 기준으로 하고 기관 고유 표현은 실제 업무와 콘텐츠에서만 확장한다.

![[preview-civic-institutional.jpg]]

> [!SUCCESS] v2 재설계
> 가상 기관·가짜 문서번호·포스터형 구도를 폐기했다. 현재 샘플은 정부24의 실제 주민등록표 등본·초본 발급 정보와 KRDS 공개 토큰을 사용한 반응형 서비스 화면이며, 공식 화면과 구분되도록 비공식 예시임을 명시한다.

## 언제 쓰나 / 피하나

| 적합 | 부적합 |
|------|--------|
| 민원·신청·조회 중심 공공서비스 | 감성 캠페인·엔터테인먼트 랜딩 |
| 공기업·협회·대학 행정 포털 | 프리미엄 라이프스타일·패션 |
| 규정·절차·공지의 우선순위가 중요한 화면 | 둥글고 장난스러운 소비자 앱 |

## 스타일 DNA

### 팔레트 — KRDS 시멘틱 역할을 따른다

| 토큰 | 값 | 역할 |
|------|-----|------|
| primary-5 | `#ECF2FE` | 주색의 가장 옅은 정보 배경 |
| primary-50 | `#256EF4` | 주요 버튼·핵심 액션 |
| primary-60 | `#0B50D0` | 링크·호버·주색 텍스트 |
| gray-0 | `#FFFFFF` | 기본 표면 |
| gray-5 | `#F4F5F6` | 보조 표면 |
| gray-20 | `#CDD1D5` | 구분선 |
| gray-60 | `#58616A` | 보조 텍스트·입력 경계 |
| gray-90 | `#1E2124` | 본문·제목 |
| danger-5/60 | `#FDEFEC` / `#BD2C0F` | 제한·오류 안내 배경/텍스트 |

- 중앙행정기관의 표준형 서비스라면 임의의 “점잖은 네이비”를 새로 만들지 않고 KRDS 표준 팔레트를 우선한다.
- 색은 액션·선택·경고·성공 같은 의미에만 쓴다. 기관다움은 어두운 헤더 면적이 아니라 공식 식별과 일관된 과업 경험에서 생긴다.

### 타이포와 위계

- 표준형 국·영문 서체는 **Pretendard GOV**. 임의 명조·영문 세리프를 섞어 권위를 연출하지 않는다.
- KRDS PC 기준: H1 40px, 섹션 제목 24px, 큰 본문 19px, 기본 본문 17px, 작은 본문 15px를 출발점으로 한다.
- 숫자·신청번호는 같은 산세리프의 tabular 숫자를 사용한다. 별도 모노 폰트는 업무상 구분 가치가 있을 때만.

### 구조 — 공식성의 문법

- 화면의 직업을 먼저 쓴다: `{시민}이 {민원 조건}을 이해하고 {신청 또는 조회}를 완료한다.`
- 서비스 제목 아래에 신청 방법·자격·기간·수수료를 먼저 노출하고, 주요 행동은 한 곳에만 둔다.
- 카드는 독립된 반복 항목에만 쓴다. 상세 정보는 정의 목록·아코디언·표처럼 내용에 맞는 구조로 표현한다.
- KRDS 신청 패턴에 따라 신청 전 자격·제한을 확인시키고, 처리 결과 화면에서는 전체 단계와 현재 위치를 함께 표시한다.
- 1024px 아래에서 한 열로 전환하고, 핵심 행동이 설명보다 먼저 오도록 순서를 바꾼다.

## 핵심 레시피 (CSS)

```css
:root {
  --primary-5:#ecf2fe; --primary-50:#256ef4; --primary-60:#0b50d0;
  --gray-0:#fff; --gray-5:#f4f5f6; --gray-20:#cdd1d5;
  --gray-60:#58616a; --gray-90:#1e2124;
}
body { font-family:'Pretendard GOV',Pretendard,sans-serif; color:var(--gray-90); }
.service-layout { display:grid; grid-template-columns:minmax(0,760px) minmax(260px,1fr); gap:72px; }
.service-facts { display:grid; grid-template-columns:130px 1fr; }
.service-facts > * { padding:14px 0; border-bottom:1px solid var(--gray-20); }
.primary-action { min-height:52px; background:var(--primary-50); color:#fff; border-radius:6px; }
:focus-visible { outline:4px solid #ffbf47; outline-offset:3px; }
@media (max-width:760px) {
  .service-layout { grid-template-columns:1fr; }
  .service-action { order:-1; }
}
```

## 흔한 실수

- 가상 기관명·가짜 국장·임의 문서번호로 공신력 연출 → 실제 권한·콘텐츠가 없으면 비공식 샘플임을 분명히 쓴다.
- 모든 화면을 네이비 헤더·정보 카드로 통일 → 기관 느낌만 남고 민원별 과업 차이가 사라진다.
- 실제 자격·수수료·처리 기간 대신 보기 좋은 가짜 데이터 사용 → 공식 출처와 확인일을 남긴다.
- 데스크톱 정상 상태 한 장만 제작 → 모바일·긴 콘텐츠·오류·제한·완료 상태까지 검증한다.
- 작은 회색 본문 → 기본 본문 17px와 4.5:1 대비를 하한으로 삼는다.
- 안내 링크와 주요 신청 버튼을 같은 위계로 표현 → 주 행동은 한 개만 채우고 나머지는 링크·보조 버튼으로 낮춘다.

## 실물 레퍼런스

- [KRDS — 디자인 원칙](https://www.krds.go.kr/html/site/utility/utility_02.html) — 사용자 중심·일관성·맥락 적응 원칙.
- [KRDS — 색상](https://www.krds.go.kr/html/site/style/style_02.html) · [타이포그래피](https://www.krds.go.kr/html/site/style/style_03.html) — 표준 팔레트와 Pretendard GOV 규칙.
- [KRDS — 신청 서비스 패턴](https://www.krds.go.kr/html/site/service/service_04_01.html) — 신청 전 확인부터 결과 확인까지의 사용자 여정.
- [정부24 — 주민등록표 등본(초본) 발급](https://www.gov.kr/mw/AA020InfoCappView.do?CappBizCD=13100000015&HighCtgCD=A01010001&Mcode=1020&tp_seq=01) — v2 샘플의 실제 콘텐츠 출처.
- [GOV.UK Design Principles](https://www.gov.uk/guidance/government-design-principles) — 사용자 필요·핵심 최소화·반복 원칙의 국제 비교.

- 로컬 데모: `스타일/_previews/시빅-인스티튜셔널.html`

## 관련 문서

- [[디자인 스타일 카탈로그]] · 인접 스타일: [[정책 리포트]] (서비스가 아니라 보고서), [[스위스 인터내셔널]] (더 중립적인 규율), [[데이터 디자인]] (수치 중심 화면)