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 관계를 관리하도록 하세요.
글자 수 표시기의 계산 기준 이해
Designsystemet 디자인 시스템 애플리케이션 검증 및 검토 상태
작성한 작업 내용을 별도로 검증
애플리케이션에서는 작업 제목과 결과를 필수로 입력해야 하며, 결과가 예시의 제한을 초과하면 제출을 거부합니다. 실행 가능한 안내 메시지를 표시한 후 해당 필드에 포커스를 둡니다. 네이티브 글자 수 표시기는 길이를 안내하고, 제출 핸들러는 로컬 검토 규칙을 적용합니다. maxlength로 인해 붙여넣은 텍스트가 알림 없이 잘려 나가지 않습니다.
표시 방식이 바뀌어도 데이터 유지
검토가 완료되면 현재 제목과 결과를 텍스트로 표시합니다. 두 필드 중 하나를 수정하면 결과가 지워지지만, 표시 방식이나 크기를 바꾸어도 작업 개요는 달라지지 않으므로 결과를 유지합니다. 이 구분은 의도된 동작이며 검증을 거쳤습니다. 프로젝트 관리 서비스로 전송되는 내용은 없으며, 외부에 작업이 생성되었다고 미리보기에서 주장하지 않습니다.
Designsystemet 디자인 시스템의 네이티브 필드 전체 구현
버전이 지정된 예제 재현
Vite 바닐라 프로젝트를 만들고, 버전이 고정된 Designsystemet 패키지 2개와 Inter를 설치한 다음 전체 엔트리 파일과 digdir.css를 저장하세요. 루트 마운트 요소는 그대로 유지하세요. 소스에는 등록, 테마 순서, 카운터 마크업, 표시 설정 컨트롤, 모든 검토 및 검증 상태 전환이 포함되어 있습니다. 로컬 미리보기에서도 직접 그린 모방 요소 대신 동일한 네이티브 필드 옵저버를 사용합니다.
동작을 한 번 가져온 다음 컴포넌트 CSS와 기본 테마를 가져옵니다.
Inter 400, 500, 600을 불러오고 전체 엔트리 파일/CSS를 저장합니다.
글자 수 제한 초과 카운터를 확인하고 결과를 수정합니다.
검토를 실행하고 크기와 모양을 바꾼 다음 텍스트를 편집해 결과를 초기화합니다.
글자 수 제한 초과 및 복구 동작 테스트
결과 입력란에 일반 문자 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=`<main><header><div><p class="eyebrow">DESIGNSYSTEMET / NATIVE FIELD STUDY</p><h1 class="ds-heading" data-size="lg">Write a useful task brief</h1></div><button id="theme" class="ds-button" data-variant="secondary" aria-pressed="false">Dark appearance</button></header><p class="ds-paragraph lead">Describe one outcome clearly. The native field connects its label, hint and character feedback while the theme controls size and appearance.</p><div class="layout"><form id="brief-form" novalidate><ds-field class="ds-field"><label>Task title</label><input id="title" class="ds-input" type="text" value="Review the navigation"/><p data-field="description">Use a short label that identifies the work.</p></ds-field><ds-field class="ds-field"><label>Desired outcome</label><textarea id="outcome" class="ds-input" rows="4">Make the main sections easier to find without changing the accepted content.</textarea><p data-field="description">Describe the result, not a list of implementation instructions.</p><p data-field="counter" data-limit="140" data-over="%d characters over the sample limit" data-under="%d characters remaining"></p></ds-field><p id="error" class="ds-validation-message" hidden role="alert"></p><button class="ds-button" type="submit">Review brief</button></form><aside class="ds-card" data-color="neutral"><h2 class="ds-heading" data-size="sm">Reading size</h2><p class="ds-paragraph">The theme changes the complete size mode rather than scaling only a heading.</p><ds-field class="ds-field"><label for="size">Component size</label><select class="ds-input" id="size"><option value="sm">Small</option><option value="md" selected>Medium</option><option value="lg">Large</option></select></ds-field><h3 class="ds-heading" data-size="xs">A clear brief contains</h3><ul><li>One concrete outcome.</li><li>Constraints that must remain true.</li><li>A way to check the result.</li></ul><p class="small">Default theme and web behavior 1.23.0. Original local application; no task is created elsewhere.</p></aside></div><section id="review" class="ds-card" data-color="success" hidden tabindex="-1"><h2 class="ds-heading" data-size="sm">Local brief review</h2><h3 id="review-title" class="ds-heading" data-size="xs"></h3><p id="review-body" class="ds-paragraph"></p><p class="small">Editing a field clears this review. Appearance and reading size preserve it.</p></section></main>`;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()});
테마와 크기를 변경해도 입력값은 유지되며, 콘텐츠를 편집할 때만 검토 결과가 무효화됩니다.
04
Designsystemet 디자인 시스템 에이전트 설정
구현 시작점
실제 브라우저에서 네이티브 레이블 연결, 카운터 상태, 검증 복구, 라이트/다크 모드와 크기 변경을 테스트했습니다.
sh
npm create vite@latest ds-brief -- --template vanilla
cd ds-brief
npm install
npm install @digdir/[email protected] @digdir/[email protected] @fontsource/inter
# Replace src/main.js and add src/digdir.css. Keep <div id="root"></div>.
npm run dev
프로젝트를 위한 프롬프트
에이전트 프롬프트
올바른 순서로 Designsystemet 1.23.0 동작/CSS/기본 테마를 사용해 간단한 편집기를 만드세요. 네이티브 컨트롤 하나가 포함된 ds-field, 실제 data-field 카운터 속성, Inter 글꼴 굵기를 사용하세요. 모양과 크기를 변경할 때는 검토 결과를 유지하고, 콘텐츠를 편집하면 결과를 지우세요. 붙여 넣은 입력을 자르지 말고 기존 140자 제한을 적용하세요.
05
Designsystemet 디자인 시스템의 출처와 범위
OpenDesign가 Designsystemet CSS와 웹 동작 1.23.0을 사용해 만든 로컬 편집기입니다. 기본 테마와 필드 옵저버는 네이티브 요소이며, 개요 콘텐츠와 140자 제한, 검토 작업 흐름은 자체 구현입니다.
