# KERN 디자인 시스템

## KERN 디자인 시스템 인터페이스 미리보기

메모를 수정하고, 취소하거나 삭제를 확인한 뒤 복원하고, 화면 모양을 전환해 보세요.

## KERN 디자인 시스템 디자인 참고 자료

@kern-ux/native 2.8.2에서 추출했습니다. 애플리케이션 레이아웃 선택 사항은 별도로 표시합니다.

### 타이포그래피와 도형

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| Default font | Fira Sans | 패키지에 포함된 font-face 파일을 불러오세요. CSS만으로는 글꼴 파일이 로드되지 않습니다. |
| Static sizes | 16 / 18 / 21px | 작음, 중간, 큼 크기의 정적 텍스트입니다. |
| Adaptive sizes below 768px | 21 / 26 / 32 / 48px | 중간부터 2x-큰 크기까지의 적응형 타이포그래피입니다. |
| Adaptive sizes from 768px | 24 / 32 / 48 / 72px | 패키지는 이 미디어 쿼리에서 적응형 토큰을 변경합니다. |
| Font weights | 400 / 500 / 600 | 일반, 중간, 세미볼드입니다. |
| Spacing | 0, 2, 4, 8, 16, 24, 32, 40, 48, 56, 64, 80, 96, 112, 128, 160, 192px | 일정한 간격으로 증가하는 척도가 아니라 이름이 지정된 간격 토큰입니다. |
| Border widths | 0 / 1 / 2 / 4 / 8px | 기본 테두리 두께는 2px입니다. |
| Radii | 0 / 2 / 4 / 8px / 50% | 없음, 작음, 기본, 큼, 원형입니다. |
| Focus outline | 4px | 기본 focus-visible 윤곽선에는 문맥별 action 포커스 역할이 사용됩니다. |
| Specimen width | 800px | 기존 애플리케이션의 선택 사항이며 KERN 컨테이너 토큰이 아닙니다. |
### 시맨틱 색상 매핑

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| Light text | neutral-950 | --kern-color-layout-text-default |
| Dark text | neutral-025 | 테마가 바뀌면 동일한 시맨틱 역할의 색상도 바뀝니다. |
| Light action | darkblue-700 | --kern-color-action-default입니다. on-action은 흰색입니다. |
| Dark action | darkblue-300 | on-action은 검은색으로 바뀝니다. |
| Light / dark background | white / black | --kern-color-layout-background-default |
| Theme override | data-kern-theme="light" or "dark" | 명시적으로 지정한 속성이 시스템 설정에 우선합니다. |
## KERN 디자인 시스템 종합 가이드

실제 인터페이스를 위해 이 시스템을 선택하고 적용하고 검토하는 실용 가이드.

완전한 안내와 구현 시작점, 소스 링크.

## KERN 디자인 시스템 네이티브 HTML 및 CSS와 브라우저 동작

### 패키지에서 제공하는 항목

> KERN native 2.8.2에는 컴포넌트 CSS와 글꼴이 포함되어 있습니다. 이 예제는 해당 파일을 직접 가져옵니다. 버튼, textarea, Details, Dialog는 KERN 클래스가 적용된 네이티브 요소입니다. React provider나 JavaScript 컴포넌트 생성자는 필요하지 않습니다. 다이얼로그와 관련된 판단 로직은 애플리케이션에서 제공해야 합니다. 스타일만으로는 입력값이 지워지지 않습니다.

1. 버전을 고정한 네이티브 패키지를 설치합니다.

2. 상대 경로를 유지한 채 스타일시트와 글꼴을 함께 복사합니다.

3. 아래 전체 예제를 저장한 다음 해당 디렉터리를 HTTP로 제공합니다.

지원 사양 읽기

## KERN 디자인 시스템의 Fira Sans와 적응형 타이포그래피

### 타이포그래피를 명시적으로 불러오기

kern.min.css에는 Fira Sans가 지정되어 있고, fonts/fira-sans.css에는 실제 font-face와 상대 경로의 WOFF2 에셋이 선언되어 있습니다. 글꼴 디렉터리를 그대로 유지해야 스타일시트에 올바른 글꼴이 지정되어 있는데도 다른 글꼴로 조용히 대체되는 일을 막을 수 있습니다. 정적 텍스트 크기는 16, 18, 21px로 유지되며, 적응형 제목 및 헤딩 토큰은 768px에서 바뀝니다. 계층 구조에는 제목 요소를 사용하고, 시각적 표현에는 적절한 KERN 클래스를 사용하세요. 이 예제에는 h1이 하나만 있으며 다이얼로그에는 별도의 h2가 지정되어 있습니다.

지원 사양 읽기

## KERN 디자인 시스템의 간격, 너비, 반응형 레이아웃

### 토큰과 레이아웃 구성을 구분하기

KERN은 0~192px 범위의 이름이 지정된 간격 토큰을 제공하며, 작은 값에는 2px와 4px 단위의 간격도 포함됩니다. 테두리와 모서리 반경 토큰은 별도의 척도를 사용합니다. 이 예제는 세로 간격을 24px로 유지하고 작업 행을 줄바꿈할 수 있게 구성합니다. 콘텐츠 최대 너비 800px와 다이얼로그 최대 너비 560px는 명시적으로 지정한 애플리케이션별 선택 사항이며, 어느 쪽도 범용 KERN 컨테이너로 제시하지 않습니다. 화면이 좁을 때는 페이지 여백이 16px로 바뀌고 다이얼로그 너비는 뷰포트 안에 유지됩니다. 문서에 최소 뷰포트 높이를 적용하지 않으므로 다른 요소에 포함해도 크기 조정 피드백 루프가 발생하지 않습니다.

지원 사양 읽기

## KERN 디자인 시스템의 시맨틱 색상과 외관

### 개별 16진수 값이 아니라 역할을 전환하기

패키지는 텍스트, 액션, 배경, 포커스에 시맨틱 CSS 속성을 사용합니다. 라이트 및 다크 팔레트는 이러한 역할의 색상을 함께 바꿉니다. 예를 들어 action-default는 라이트 모드에서 darkblue-700, 다크 모드에서 darkblue-300에 매핑되고, 전경색은 흰색에서 검은색으로 바뀝니다. 이 예제는 html에 data-kern-theme을 설정하고 눌림 상태를 표시하는 버튼을 제공합니다. 이 설정은 현재 문서에만 적용되며 저장되지 않습니다. 명시적 속성을 제거하면 스타일시트는 prefers-color-scheme을 따릅니다.

지원 사양 읽기

## KERN 디자인 시스템의 라벨이 있는 편집 가능한 메모

### 안내를 계속 표시하기

textarea에는 kern-form-input 안에 kern-form-input__input을 사용하고, 입력 요소의 id를 가리키는 실제 label을 연결합니다. 안내 문구에는 별도의 id를 지정하고 aria-describedby로 입력 요소와 연결합니다. 선택 입력인 로컬 메모이므로, 이 예제에서는 필수 입력 오류나 서버 저장 기능을 만들어내지 않습니다. ‘예시 복원’을 선택하면 초기값을 설정하고 편집 가능한 필드에 포커스를 둡니다. 상태 영역은 라벨을 대체하거나 비활성 텍스트로 포커스를 옮기지 않고 결과를 알립니다.

지원 사양 읽기

## KERN 디자인 시스템의 Details로 부가 정보 표시하기

### 공개 상태 관리는 브라우저에 맡기기

열린 상태는 details 요소가 관리하고 summary가 트리거 역할을 합니다. KERN은 표현을 위해 kern-details__header, 작은 제목 span, kern-details__body를 추가합니다. 이 예제에서는 보관 기간 정보를 부가 정보로 여기에 배치합니다. 필수 안내, 오류, 폐기 작업은 공개 영역 밖에 계속 표시합니다. 네이티브 키보드 동작으로 활성화할 수 있으므로 별도의 클릭 핸들러나 중복된 aria-expanded 상태가 필요하지 않습니다.

- summary는 내용을 구체적이고 간결하게 설명하도록 작성하세요.

- summary 안에 다른 버튼이나 링크를 넣지 마세요.

- 서로 관련된 항목을 묶어 공개할 때는 Accordion을 사용하세요. 관련 없는 작업을 Details처럼 보이게 만들지 마세요.

지원 사양 읽기

## KERN 디자인 시스템의 안전한 종료가 가능한 확인 다이얼로그

### 구조와 동작 제어

다이얼로그의 h2를 라벨로 사용하고, 짧은 결과 설명을 연결합니다. 헤더, 본문, 푸터에는 KERN에 문서화된 클래스를 사용합니다. showModal()은 네이티브 다이얼로그를 최상위 레이어에 표시하고, close()는 상호작용을 끝냅니다. autofocus를 통해 ‘메모 유지’에 초기 포커스를 둡니다. Escape를 누르면 텍스트를 변경하지 않고 닫히며, 닫힘 이벤트 리스너는 ‘메모 폐기’로 포커스를 돌려보냅니다. ‘예, 폐기’를 선택했을 때만 값이 변경됩니다. 데이터 삭제 확인이므로 배경 클릭으로는 다이얼로그를 닫지 않습니다. 이는 일반 예제의 배경 클릭 닫기 핸들러를 무분별하게 복사하는 대신, 중요한 결정을 위한 문서화된 지침을 따릅니다.

지원 사양 읽기

## KERN 디자인 시스템의 통합과 적용 범위

### 필요한 의존성을 모두 포함해 배포하기

아래 설정은 버전을 정확히 지정한 패키지 하나를 설치하고 CSS과 글꼴 디렉터리를 복사합니다. 전체 예제에는 자체 레이아웃 CSS, 루트 테마 속성, DOM 구조, 이벤트 연결 코드가 포함되어 있습니다. 실제 양식에 통합한 뒤에는 다이얼로그의 두 가지 결과, Escape, 좁은 화면을 모두 테스트하세요. KERN 코드는 EUPL 라이선스로 제공되며, 웹사이트의 텍스트 및 그래픽 자료에는 CC BY-NC-SA가 적용됩니다. 이 독립적인 예제는 기관의 정체성을 복제하거나 서비스가 접근성 감사를 통과했다고 암시하지 않습니다. 실제 애플리케이션에는 데이터 영속성, 서버 측 검증, 전체 사용자 여정에 대한 평가가 여전히 필요합니다.

지원 사양 읽기

## KERN 디자인 시스템 컴포넌트 예제

### 네이티브 메모 및 확인 다이얼로그 전체 예제

문서 마크업, 레이아웃 CSS, 애플리케이션 동작이 모두 포함되어 있습니다. 설정 블록을 사용해 에셋을 설치하세요.

```
<!doctype html><html lang="en" data-kern-theme="light"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>KERN workshop note</title><link rel="stylesheet" href="vendor/kern-2.8.2/kern.min.css"><link rel="stylesheet" href="vendor/kern-2.8.2/fonts/fira-sans.css"><style>body{margin:0;padding:clamp(16px,4vw,40px);color:var(--kern-color-layout-text-default)}main{max-width:800px;margin:auto;display:grid;gap:24px}.top,.actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center}.top{justify-content:space-between}.kern-dialog{max-width:min(560px,calc(100% - 32px))}textarea{width:100%;resize:vertical}#status{min-height:24px}.kern-details{width:100%}</style><main><div class="top"><span class="kern-preline">KERN · Native components</span><button class="kern-btn kern-btn--secondary" id="theme" aria-pressed="false"><span class="kern-label">Dark appearance</span></button></div><h1 class="kern-heading kern-heading--large">Workshop note</h1><p class="kern-body">Prepare a short note for your next workshop. This demonstration keeps edits only in this page.</p><div class="kern-form-input"><label class="kern-label" for="note">Your note</label><p class="kern-hint" id="hint">No personal information is needed. Nothing is submitted.</p><textarea class="kern-form-input__input" rows="5" id="note" aria-describedby="hint">Discuss accessible ways to collect workshop feedback.</textarea></div><details class="kern-details"><summary class="kern-details__header"><span class="kern-title kern-title--small">What happens to this note?</span></summary><div class="kern-details__body"><p class="kern-body">Edits live in this browser tab. Reloading restores the example text. Discarding clears the current note after confirmation; it does not delete a server record.</p></div></details><div class="actions"><button class="kern-btn kern-btn--primary" id="discard"><span class="kern-label">Discard note</span></button><button class="kern-btn kern-btn--secondary" id="restore"><span class="kern-label">Restore example</span></button></div><p id="status" class="kern-body" role="status"></p><dialog class="kern-dialog" id="confirm" aria-labelledby="confirm-title" aria-describedby="confirm-description"><header class="kern-dialog__header"><h2 class="kern-title kern-title--large" id="confirm-title">Discard this note?</h2></header><section class="kern-dialog__body"><p class="kern-body" id="confirm-description">Your current text will be cleared from this page. Choose Keep note to continue editing.</p></section><footer class="kern-dialog__footer"><button class="kern-btn kern-btn--secondary" id="keep" autofocus><span class="kern-label">Keep note</span></button><button class="kern-btn kern-btn--primary" id="clear"><span class="kern-label">Yes, discard</span></button></footer></dialog></main><script>const byId=id=>document.getElementById(id),note=byId('note'),modal=byId('confirm'),original=note.value;byId('discard').onclick=()=>modal.showModal();byId('keep').onclick=()=>modal.close('keep');byId('clear').onclick=()=>{note.value='';modal.close('discard');byId('status').textContent='Note discarded from this page.'};modal.addEventListener('close',()=>byId('discard').focus());byId('restore').onclick=()=>{note.value=original;byId('status').textContent='Example restored.';note.focus()};byId('theme').onclick=()=>{const dark=document.documentElement.dataset.kernTheme!=='dark';document.documentElement.dataset.kernTheme=dark?'dark':'light';byId('theme').setAttribute('aria-pressed',String(dark))};</script></html>
```

코드 참조

## KERN 디자인 시스템 에이전트 설정

### 구현 시작점

빌드 단계나 UI 프레임워크가 필요하지 않습니다. CSS에서 상대 경로의 WOFF2 파일을 불러오므로 글꼴 디렉터리는 그대로 유지하세요. Sources의 완전한 작업 예제 ZIP에는 정확한 미리보기 종속 항목과 전체 문서도 포함되어 있습니다. 압축을 푼 뒤 해당 디렉터리에서 python3 -m http.server 8080을 실행하고 http://localhost:8080/kern.html을 여세요. 모듈을 사용하는 예제는 file://로 열지 마세요.

```
npm install --save-exact @kern-ux/native@2.8.2
mkdir -p vendor/kern-2.8.2
cp node_modules/@kern-ux/native/dist/kern.min.css vendor/kern-2.8.2/
cp -R node_modules/@kern-ux/native/dist/fonts vendor/kern-2.8.2/
# Save the complete HTML example below as kern.html beside vendor/.
python3 -m http.server 8080
# Open http://localhost:8080/kern.html
```

### 프로젝트를 위한 프롬프트

```
@kern-ux/native 2.8.2 CSS와 패키지에 포함된 Fira Sans를 사용해 로컬 워크숍 메모 예제를 만드세요. 레이블이 지정된 kern-form-input 텍스트 영역, 보조 네이티브 Details 공개 영역, 레이블이 지정된 헤더·본문·푸터가 있는 kern-dialog를 구성하세요. showModal()로 대화상자를 열고 Keep note에 자동으로 포커스를 둡니다. Escape를 누르면 텍스트를 바꾸지 않고 대화상자를 닫으며, Yes, discard를 선택한 경우에만 메모를 지우세요. 닫을 때 트리거로 포커스를 돌려보내고 Restore example을 제공하세요. 새 팔레트 토큰을 만들지 말고 data-kern-theme을 light와 dark 사이에서 전환하세요. 기존 애플리케이션의 너비 선택지를 그대로 유지하고 메모를 로컬에 보관하세요. 업로드나 서버 초안, 정부 서비스 관련 주장은 필요하지 않습니다.
```

## KERN 디자인 시스템 출처 및 범위

KERN 코드를 사용한 독창적인 데모입니다. 정부 기관의 정체성, 영구 저장 또는 접근성 인증을 의미하지 않습니다.

- KERN 개요 공공 행정 맥락과 리소스 진입점입니다.

- 디자인 시스템 기초 요소, 구성 요소 및 시스템의 접근 방식입니다.

- 통합 가이드 네이티브 패키지 및 스타일시트 설정을 설명합니다.

- 완전한 작동 예시 다운로드 전체 HTML, 로컬 CSS/JavaScript 종속 항목, 제공된 라이선스와 정확한 실행 지침이 포함된 ZIP 파일입니다. 빌드 단계는 필요하지 않습니다.

## KERN 디자인 시스템 관련 리소스

### Michigan Forty Two

실제 역할 및 연구 필터 예제를 통해 Forty-Two에서 지원하는 WordPress 워크플로, 웹 팔레트, 인명 디렉터리 패턴을 알아보세요.

### Aksel

Aksel v8의 실제 ax 토큰, 기본 테이블 밀도, 의미에 맞는 헤더 구조를 사용하세요. 밝은 테마와 어두운 테마를 비교하면서 가상의 후속 기록을 정렬하고 선택하세요.

### NHS 디자인 시스템

NHS.UK 타이포그래피와 반응형 간격, 그룹화된 라디오 선택지, 맥락에 맞는 세부 정보를 활용해 명확한 예약 선호도 선택 흐름을 구성하세요.


- [구현 레퍼런스](https://www.kern-ux.de/komponenten/dialog/)
- [출처](https://www.npmjs.com/package/@kern-ux/native/v/2.8.2)
- [지원 사양 읽기](https://www.kern-ux.de/erste-schritte/entwicklerinnen/einbinden-von-kern/)
- [지원 사양 읽기](https://www.npmjs.com/package/@kern-ux/native/v/2.8.2)
- [지원 사양 읽기](https://www.kern-ux.de/erste-schritte/entwicklerinnen/light-dark-modus/)
- [지원 사양 읽기](https://www.kern-ux.de/komponenten/form-inputs/)
- [지원 사양 읽기](https://www.kern-ux.de/komponenten/details/)
- [지원 사양 읽기](https://www.kern-ux.de/komponenten/dialog/)
- [지원 사양 읽기](https://www.kern-ux.de/lizenz-und-nutzungsbedingungen/)
- [코드 참조](https://www.kern-ux.de/komponenten/dialog/)
- [KERN 개요 공공 행정 맥락과 리소스 진입점입니다.](https://www.kern-ux.de/)
- [디자인 시스템 기초 요소, 구성 요소 및 시스템의 접근 방식입니다.](https://www.kern-ux.de/design-system/)
- [통합 가이드 네이티브 패키지 및 스타일시트 설정을 설명합니다.](https://www.kern-ux.de/erste-schritte/entwicklerinnen/einbinden-von-kern/)