# Designsystemet 디자인 시스템 ## Designsystemet 디자인 시스템 인터페이스 미리보기 네이티브 글자 수 표시기를 사용하고 테마와 크기를 변경해 보세요. 변경 사항에 따라 검토 결과를 유지하거나 무효화합니다. ## Designsystemet 디자인 시스템 디자인 참고 자료 @digdir/designsystemet-css/web 1.23.0의 기본 테마 내보내기와 네이티브 ds-field 구현입니다. 색상 표에는 라이트 모드 값이 명시되어 있습니다. ### 기본 라이트 강조 역할 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | --ds-color-accent-background-default | #fff | 1.23.0의 실제 기본 라이트 테마 역할입니다. 런타임 다크 모드에는 별도의 역할 값이 적용됩니다. | | --ds-color-accent-background-tinted | #eef4fa | 1.23.0의 실제 기본 라이트 테마 역할입니다. 런타임 다크 모드에는 별도의 역할 값이 적용됩니다. | | --ds-color-accent-surface-tinted | #ddeaf6 | 1.23.0의 실제 기본 라이트 테마 역할입니다. 런타임 다크 모드에는 별도의 역할 값이 적용됩니다. | | --ds-color-accent-surface-hover | #c7ddf0 | 1.23.0의 실제 기본 라이트 테마 역할입니다. 런타임 다크 모드에는 별도의 역할 값이 적용됩니다. | | --ds-color-accent-border-subtle | #99c0e3 | 1.23.0의 실제 기본 라이트 테마 역할입니다. 런타임 다크 모드에는 별도의 역할 값이 적용됩니다. | | --ds-color-accent-border-default | #2a7cc5 | 1.23.0의 실제 기본 라이트 테마 역할입니다. 런타임 다크 모드에는 별도의 역할 값이 적용됩니다. | | --ds-color-accent-text-default | #002c54 | 1.23.0의 실제 기본 라이트 테마 역할입니다. 런타임 다크 모드에는 별도의 역할 값이 적용됩니다. | | --ds-color-accent-base-default | #0062ba | 1.23.0의 실제 기본 라이트 테마 역할입니다. 런타임 다크 모드에는 별도의 역할 값이 적용됩니다. | | --ds-color-accent-base-hover | #004f96 | 1.23.0의 실제 기본 라이트 테마 역할입니다. 런타임 다크 모드에는 별도의 역할 값이 적용됩니다. | | --ds-color-accent-base-active | #003d75 | 1.23.0의 실제 기본 라이트 테마 역할입니다. 런타임 다크 모드에는 별도의 역할 값이 적용됩니다. | | --ds-color-accent-base-contrast-default | #fff | 1.23.0의 실제 기본 라이트 테마 역할입니다. 런타임 다크 모드에는 별도의 역할 값이 적용됩니다. | ### 기본 라이트 중립 역할 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | --ds-color-neutral-background-default | #fff | 불필요하게 상태 의미를 부여하지 않으면서 보조 배경과 텍스트에 중립 역할을 사용하세요. | | --ds-color-neutral-background-tinted | #f3f3f4 | 불필요하게 상태 의미를 부여하지 않으면서 보조 배경과 텍스트에 중립 역할을 사용하세요. | | --ds-color-neutral-surface-default | #fff | 불필요하게 상태 의미를 부여하지 않으면서 보조 배경과 텍스트에 중립 역할을 사용하세요. | | --ds-color-neutral-surface-tinted | #e8e8e9 | 불필요하게 상태 의미를 부여하지 않으면서 보조 배경과 텍스트에 중립 역할을 사용하세요. | | --ds-color-neutral-border-subtle | #bbbcbd | 불필요하게 상태 의미를 부여하지 않으면서 보조 배경과 텍스트에 중립 역할을 사용하세요. | | --ds-color-neutral-text-subtle | #5b5d60 | 불필요하게 상태 의미를 부여하지 않으면서 보조 배경과 텍스트에 중립 역할을 사용하세요. | | --ds-color-neutral-text-default | #292c30 | 불필요하게 상태 의미를 부여하지 않으면서 보조 배경과 텍스트에 중립 역할을 사용하세요. | | --ds-color-neutral-base-default | #24272b | 불필요하게 상태 의미를 부여하지 않으면서 보조 배경과 텍스트에 중립 역할을 사용하세요. | | --ds-color-neutral-base-contrast-default | #fff | 불필요하게 상태 의미를 부여하지 않으면서 보조 배경과 텍스트에 중립 역할을 사용하세요. | ### 크기 모드 및 타이포그래피 기초 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | --ds-size-mode-font-size--sm | 1 | 실제로 내보내는 스칼라 값 또는 식입니다. 모든 스칼라 값을 픽셀 값으로 해석하지 말고 data-size 모드를 사용하세요. | | --ds-size-mode-font-size--md | 1.125 | 실제로 내보내는 스칼라 값 또는 식입니다. 모든 스칼라 값을 픽셀 값으로 해석하지 말고 data-size 모드를 사용하세요. | | --ds-size-mode-font-size--lg | 1.3125 | 실제로 내보내는 스칼라 값 또는 식입니다. 모든 스칼라 값을 픽셀 값으로 해석하지 말고 data-size 모드를 사용하세요. | | --ds-size-base | 18 | 실제로 내보내는 스칼라 값 또는 식입니다. 모든 스칼라 값을 픽셀 값으로 해석하지 말고 data-size 모드를 사용하세요. | | --ds-font-family | Inter | 실제로 내보내는 스칼라 값 또는 식입니다. 모든 스칼라 값을 픽셀 값으로 해석하지 말고 data-size 모드를 사용하세요. | | --ds-font-weight-regular | 400 | 실제로 내보내는 스칼라 값 또는 식입니다. 모든 스칼라 값을 픽셀 값으로 해석하지 말고 data-size 모드를 사용하세요. | | --ds-font-weight-medium | 500 | 실제로 내보내는 스칼라 값 또는 식입니다. 모든 스칼라 값을 픽셀 값으로 해석하지 말고 data-size 모드를 사용하세요. | | --ds-font-weight-semibold | 600 | 실제로 내보내는 스칼라 값 또는 식입니다. 모든 스칼라 값을 픽셀 값으로 해석하지 말고 data-size 모드를 사용하세요. | | --ds-line-height-sm | 1.3 | 실제로 내보내는 스칼라 값 또는 식입니다. 모든 스칼라 값을 픽셀 값으로 해석하지 말고 data-size 모드를 사용하세요. | | --ds-line-height-md | 1.5 | 실제로 내보내는 스칼라 값 또는 식입니다. 모든 스칼라 값을 픽셀 값으로 해석하지 말고 data-size 모드를 사용하세요. | | --ds-line-height-lg | 1.7 | 실제로 내보내는 스칼라 값 또는 식입니다. 모든 스칼라 값을 픽셀 값으로 해석하지 말고 data-size 모드를 사용하세요. | | --ds-border-radius-base | 0.25rem | 실제로 내보내는 스칼라 값 또는 식입니다. 모든 스칼라 값을 픽셀 값으로 해석하지 말고 data-size 모드를 사용하세요. | | --ds-border-radius-sm | min(.5 * var(--ds-border-radius-base), var(--ds-border-radius-scale)) | 실제로 내보내는 스칼라 값 또는 식입니다. 모든 스칼라 값을 픽셀 값으로 해석하지 말고 data-size 모드를 사용하세요. | | --ds-border-radius-md | min(var(--ds-border-radius-base), 2 * var(--ds-border-radius-scale)) | 실제로 내보내는 스칼라 값 또는 식입니다. 모든 스칼라 값을 픽셀 값으로 해석하지 말고 data-size 모드를 사용하세요. | | --ds-border-radius-lg | min(2 * var(--ds-border-radius-base), 5 * var(--ds-border-radius-scale)) | 실제로 내보내는 스칼라 값 또는 식입니다. 모든 스칼라 값을 픽셀 값으로 해석하지 말고 data-size 모드를 사용하세요. | ## Designsystemet 디자인 시스템 전체 가이드 실제 인터페이스를 위해 이 시스템을 선택하고 적용하고 검토하는 실용 가이드. 완전한 안내와 구현 시작점, 소스 링크. ## Designsystemet 디자인 시스템 동작, CSS 및 테마 패키지 ### 세 부분을 올바른 순서로 불러오기 > Designsystemet은 프레임워크와 무관한 동작, 컴포넌트 CSS 및 테마 값을 분리합니다. 이 예시에서는 designsystemet-web과 designsystemet-css를 1.23.0으로 고정하고, CSS을 불러온 다음 기본 테마를 불러오며 동작을 한 번 등록합니다. 동작 패키지 없이 스타일만 적용한 필드는 여기에 표시된 ds-field 연결 구현과 동일하지 않습니다. ### 현재의 일반 HTML 계약 사용 이 예시에서는 일반 input, textarea 및 select 요소를 ds-field로 감싸고 ds-input 클래스를 적용합니다. 네이티브 폼 컨트롤을 유지하면서 패키지가 레이블과 설명을 연결합니다. 이전의 React 전용 필드 API을 복사하지 않습니다. 전체 소스에는 올바른 패키지 가져오기와 원래 애플리케이션의 검토 로직이 포함되어 있습니다. ## Designsystemet 디자인 시스템 색상 구성 및 크기 모드 ### 데이터 속성으로 모양 변경 페이지 루트의 data-color-scheme을 light 또는 dark로 설정합니다. 테마가 이에 맞는 시맨틱 색상을 제공하며 폼 값은 그대로 유지됩니다. 매개변수 표에는 기본 라이트 값이 명시되어 있으며, 같은 16진수 색상이 다크 모드에도 적용된다고 가장하지 않습니다. 보조 모양 변경 버튼에는 다음에 실행될 동작을 설명합니다. ### 크기 모드가 전체 시스템에 적용되도록 설정 읽기 크기 컨트롤은 data-size를 sm, md, lg로 변경합니다. 이렇게 하면 제목만 확대되는 대신 테마의 크기 모드가 바뀝니다. 공개된 모드 배율은 1, 1.125, 1.3125이며 토큰 수식에 적용됩니다. 이 값대로 모든 컨트롤의 픽셀 크기를 설정하라는 일반 지침은 아닙니다. 이 예시에서는 데스크톱뿐 아니라 휴대폰 너비에서도 큰 모드를 테스트합니다. ## Designsystemet 디자인 시스템 Inter 및 시맨틱 타이포그래피 ### 필요한 글꼴 두께 포함 미리보기에는 Inter 400, 500, 600을 포함하고 소문자 l 모양을 위한 문서화된 cv05 글꼴 기능을 활성화합니다. 페이지에서는 네이티브 제목 및 문단 클래스를 사용하므로 글꼴 두께와 줄 높이가 테마를 따릅니다. 고정된 14px 주석은 작성자가 별도로 지정한 보조 문구로, 기본 인터랙션 크기 체계에 포함되지 않습니다. ### 도움말 콘텐츠를 해당 컨트롤 가까이에 배치 제목 안내는 레이블의 목적을 설명하고, 결과 안내는 입력할 콘텐츠의 종류를 설명합니다. 두 안내는 각 컨트롤 가까이에 배치되고 ds-field로 연결됩니다. 보조 안내는 별도의 카드에 담으며, 좁은 화면에서는 폼 다음에 표시됩니다. 안내를 표시하는 데 마우스 오버에 의존하지 않습니다. ## Designsystemet 디자인 시스템 자동 관계 설정 및 글자 수 피드백 ### ds-field가 컨트롤 하나를 연결하도록 구성 각 ds-field에는 input과 유사한 컨트롤 하나, 레이블 및 선택적 data-field 설명이 포함됩니다. 패키지가 ID를 할당하고 레이블과 설명의 관계를 설정합니다. 관련 없는 컨트롤을 하나의 ds-field 안에 묶으면 이 자동 연결 규칙이 모호해집니다. 여러 항목은 래퍼를 일반 폼 컨테이너처럼 사용하지 말고 fieldset으로 그룹화하세요. - 각 ds-field에는 input과 유사한 컨트롤을 하나씩만 넣으세요. - 관련 도움말에는 data-field 설명을 사용하세요. - 네이티브 옵저버가 ID와 aria-describedby 관계를 관리하도록 하세요. ### 글자 수 표시기의 계산 기준 이해 네이티브 글자 수 표시기는 data-limit, data-under, data-over를 사용하며 %d는 남은 글자 수 또는 초과 글자 수로 바뀝니다. 1.23.0에서는 JavaScript 문자열 길이를 기준으로 계산하고 data-label/data-state를 통해 피드백을 표시하며, 제한을 초과하면 잘못된 상태도 표시합니다. 모든 이모지의 글자 수를 자소 단위로 계산한다고 보장하지는 않습니다. 140자 제한은 이 예시의 작성 기준이며, Designsystemet의 공식 콘텐츠 규칙이 아닙니다. ## Designsystemet 디자인 시스템 애플리케이션 검증 및 검토 상태 ### 작성한 작업 내용을 별도로 검증 애플리케이션에서는 작업 제목과 결과를 필수로 입력해야 하며, 결과가 예시의 제한을 초과하면 제출을 거부합니다. 실행 가능한 안내 메시지를 표시한 후 해당 필드에 포커스를 둡니다. 네이티브 글자 수 표시기는 길이를 안내하고, 제출 핸들러는 로컬 검토 규칙을 적용합니다. maxlength로 인해 붙여넣은 텍스트가 알림 없이 잘려 나가지 않습니다. ### 표시 방식이 바뀌어도 데이터 유지 검토가 완료되면 현재 제목과 결과를 텍스트로 표시합니다. 두 필드 중 하나를 수정하면 결과가 지워지지만, 표시 방식이나 크기를 바꾸어도 작업 개요는 달라지지 않으므로 결과를 유지합니다. 이 구분은 의도된 동작이며 검증을 거쳤습니다. 프로젝트 관리 서비스로 전송되는 내용은 없으며, 외부에 작업이 생성되었다고 미리보기에서 주장하지 않습니다. ## Designsystemet 디자인 시스템의 네이티브 필드 전체 구현 ### 버전이 지정된 예제 재현 Vite 바닐라 프로젝트를 만들고, 버전이 고정된 Designsystemet 패키지 2개와 Inter를 설치한 다음 전체 엔트리 파일과 digdir.css를 저장하세요. 루트 마운트 요소는 그대로 유지하세요. 소스에는 등록, 테마 순서, 카운터 마크업, 표시 설정 컨트롤, 모든 검토 및 검증 상태 전환이 포함되어 있습니다. 로컬 미리보기에서도 직접 그린 모방 요소 대신 동일한 네이티브 필드 옵저버를 사용합니다. 1. 동작을 한 번 가져온 다음 컴포넌트 CSS와 기본 테마를 가져옵니다. 2. Inter 400, 500, 600을 불러오고 전체 엔트리 파일/CSS를 저장합니다. 3. 글자 수 제한 초과 카운터를 확인하고 결과를 수정합니다. 4. 검토를 실행하고 크기와 모양을 바꾼 다음 텍스트를 편집해 결과를 초기화합니다. ### 글자 수 제한 초과 및 복구 동작 테스트 결과 입력란에 일반 문자 150자를 붙여 넣고 제한보다 10자 초과로 표시되는지 확인하세요. 검토에서 이 입력을 거부해야 합니다. 짧은 결과로 바꾼 뒤 검토를 통과시키고, 결과를 유지한 상태에서 다크 모드와 읽기 크기를 변경하세요. 제목을 수정해 이전 검토 결과가 지워지는지 확인하세요. 각 뷰포트 너비에서 포커스 표시와 줄바꿈도 확인하세요. ## Designsystemet 디자인 시스템 컴포넌트 예제 ### main.js — 네이티브 필드 및 테마 전체 예제 전체 편집기, 실제 카운터 마크업, 모양 및 크기 설정 컨트롤, 로컬 검토 검증을 제공합니다. ``` import '@digdir/designsystemet-web'; import '@digdir/designsystemet-css'; import '@digdir/designsystemet-css/theme'; import '@fontsource/inter/latin-400.css'; import '@fontsource/inter/latin-500.css'; import '@fontsource/inter/latin-600.css'; import './digdir.css'; document.documentElement.dataset.colorScheme='light';document.documentElement.dataset.size='md';document.getElementById('root').innerHTML=`

DESIGNSYSTEMET / NATIVE FIELD STUDY

Write a useful task brief

Describe one outcome clearly. The native field connects its label, hint and character feedback while the theme controls size and appearance.

Use a short label that identifies the work.

Describe the result, not a list of implementation instructions.

`;const $=id=>document.getElementById(id);function edit(){$('review').hidden=true;$('error').hidden=true}['title','outcome'].forEach(id=>$(id).addEventListener('input',edit));$('theme').addEventListener('click',()=>{const dark=document.documentElement.dataset.colorScheme!=='dark';document.documentElement.dataset.colorScheme=dark?'dark':'light';$('theme').setAttribute('aria-pressed',String(dark));$('theme').textContent=dark?'Light appearance':'Dark appearance'});$('size').addEventListener('change',e=>document.documentElement.dataset.size=e.target.value);$('brief-form').addEventListener('submit',e=>{e.preventDefault();let message='',focus='outcome';if(!$('title').value.trim()){message='Enter a task title.';focus='title'}else if(!$('outcome').value.trim())message='Describe the desired outcome.';else if($('outcome').value.length>140)message='Shorten the outcome to 140 characters or fewer.';if(message){$('error').textContent=message;$('error').hidden=false;$(focus).focus();return}$('review-title').textContent=$('title').value.trim();$('review-body').textContent=$('outcome').value.trim();$('review').hidden=false;$('review').focus()}); ``` 코드 참조 - Select는 ds-field 안에서 현재 ds-input 스타일을 사용합니다. 카운터 피드백은 네이티브 옵저버가 관리합니다. ### digdir.css — 반응형 레이아웃 원본 Inter의 기능 설정을 포함한 네이티브 테마 기반 레이아웃입니다. ``` body{margin:0;font-family:Inter,sans-serif;font-feature-settings:"cv05" 1}main{max-width:1160px;margin:auto;padding:32px}header{display:flex;gap:24px;justify-content:space-between;align-items:start}.eyebrow{font-size:13px;letter-spacing:.04em;font-weight:600}.lead{max-width:65ch;margin-top:24px}.layout{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;margin-top:32px}form{display:grid;gap:24px;align-content:start}form button{justify-self:start}aside{padding:24px;align-self:start}aside h3{margin-top:32px}aside select{margin-top:8px}aside li{margin:12px 0}.small{font-size:14px;line-height:1.6}#review{padding:24px;margin-top:32px}#review h3{margin-top:16px}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.layout{grid-template-columns:1fr;gap:24px}header{flex-direction:column}} ``` 코드 참조 - 테마와 크기를 변경해도 입력값은 유지되며, 콘텐츠를 편집할 때만 검토 결과가 무효화됩니다. ## Designsystemet 디자인 시스템 에이전트 설정 ### 구현 시작점 실제 브라우저에서 네이티브 레이블 연결, 카운터 상태, 검증 복구, 라이트/다크 모드와 크기 변경을 테스트했습니다. ``` npm create vite@latest ds-brief -- --template vanilla cd ds-brief npm install npm install @digdir/designsystemet-css@1.23.0 @digdir/designsystemet-web@1.23.0 @fontsource/inter # Replace src/main.js and add src/digdir.css. Keep
. npm run dev ``` ### 프로젝트를 위한 프롬프트 ``` 올바른 순서로 Designsystemet 1.23.0 동작/CSS/기본 테마를 사용해 간단한 편집기를 만드세요. 네이티브 컨트롤 하나가 포함된 ds-field, 실제 data-field 카운터 속성, Inter 글꼴 굵기를 사용하세요. 모양과 크기를 변경할 때는 검토 결과를 유지하고, 콘텐츠를 편집하면 결과를 지우세요. 붙여 넣은 입력을 자르지 말고 기존 140자 제한을 적용하세요. ``` ## Designsystemet 디자인 시스템의 출처와 범위 OpenDesign가 Designsystemet CSS와 웹 동작 1.23.0을 사용해 만든 로컬 편집기입니다. 기본 테마와 필드 옵저버는 네이티브 요소이며, 개요 콘텐츠와 140자 제한, 검토 작업 흐름은 자체 구현입니다. - 설정 및 테마 순서 네이티브 동작, CSS, 테마 및 글꼴 설정입니다. - 테마 기반 요소 크기, 색상 및 타이포그래피 진입점입니다. - 공개 구현 버전이 지정된 ds-field 옵저버와 생성된 테마입니다. - 시스템 범위 공유 컴포넌트 및 가이드라인 범위입니다. ## Designsystemet 디자인 시스템 관련 자료 ### DSFR 프랑스 정부 디자인 시스템의 구체적인 타이포그래피, 그리드, 아코디언 API을 제도적 맥락에서 살펴봅니다. 교육용으로 명확하게 중립적인 예시 화면에서 연결형과 독립형 펼침 동작을 비교합니다. ### Europa Component Library 키보드 조작, 모두 열기 동작, JavaScript이 없는 환경에서도 읽을 수 있는 대체 표시를 포함한 완전한 기본 아코디언 안내를 통해 Europa의 EC 색상, 타이포그래피 및 간격 역할을 살펴보세요. ### gov.cz 디자인 시스템 6개 자료로 구성된 완전한 읽기 툴킷을 통해 Gov Design System CE의 실제 색상 역할, 카드 슬롯, 네이티브 페이지네이션을 살펴보세요. 포커스와 페이지 상태도 명확하게 확인할 수 있습니다. - [구현 레퍼런스](https://designsystemet.no/en/fundamentals/code/setup) - [출처](https://github.com/digdir/designsystemet) - [코드 참조](https://designsystemet.no/en/fundamentals/code/setup) - [설정 및 테마 순서 네이티브 동작, CSS, 테마 및 글꼴 설정입니다.](https://designsystemet.no/en/fundamentals/code/setup) - [테마 기반 요소 크기, 색상 및 타이포그래피 진입점입니다.](https://designsystemet.no/en/fundamentals) - [공개 구현 버전이 지정된 ds-field 옵저버와 생성된 테마입니다.](https://github.com/digdir/designsystemet) - [시스템 범위 공유 컴포넌트 및 가이드라인 범위입니다.](https://designsystemet.no/en/intro)