# Det Fælles Designsystem 디자인 시스템 ## Det Fælles Designsystem 디자인 시스템 인터페이스 미리보기 기획 리소스 5개의 원본을 비교하고, 정렬 순서를 바꾸고, 검색 결과가 없을 때 복구해 보세요. ## Det Fælles Designsystem 디자인 시스템 디자인 참고 자료 실제 DKFDS 11.3.0 Borger.dk 테마, 간격 맵, 타이포그래피 맵, 포커스 변수를 사용합니다. 표시된 이름은 Sass 소스 참조입니다. ### Borger.dk 테마 및 포커스 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | $borger-primary | #44831E | 실제 11.3.0 Sass 구성입니다. 이 이름은 소스 변수이며, CSS 사용자 지정 속성이 아닙니다. | | $borger-primary-dark | #3C5C22 | 실제 11.3.0 Sass 구성입니다. 이 이름은 소스 변수이며, CSS 사용자 지정 속성이 아닙니다. | | $borger-primary-darker | #233614 | 실제 11.3.0 Sass 구성입니다. 이 이름은 소스 변수이며, CSS 사용자 지정 속성이 아닙니다. | | $header-portal-background-color | #f1f1f1 | 실제 11.3.0 Sass 구성입니다. 이 이름은 소스 변수이며, CSS 사용자 지정 속성이 아닙니다. | | $theme-focus-width | 3px | 실제 11.3.0 Sass 구성입니다. 이 이름은 소스 변수이며, CSS 사용자 지정 속성이 아닙니다. | | $theme-focus-offset | 1px | 실제 11.3.0 Sass 구성입니다. 이 이름은 소스 변수이며, CSS 사용자 지정 속성이 아닙니다. | | $theme-focus-style | solid | 실제 11.3.0 Sass 구성입니다. 이 이름은 소스 변수이며, CSS 사용자 지정 속성이 아닙니다. | | $typography-text-max-width | 66ch | 실제 11.3.0 Sass 구성입니다. 이 이름은 소스 변수이며, CSS 사용자 지정 속성이 아닙니다. | | $typography-font-family | IBM Plex Sans, system-ui, system, sans-serif | 실제 11.3.0 Sass 구성입니다. 이 이름은 소스 변수이며, CSS 사용자 지정 속성이 아닙니다. | ### 간격 맵 키 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | 0 | 0px | 공개된 $spacers 맵입니다. 305와 405 같은 비순차 키는 각각 12px와 20px를 의미합니다. 키를 픽셀 크기로 해석하지 마세요. | | 1 | 2px | 공개된 $spacers 맵입니다. 305와 405 같은 비순차 키는 각각 12px와 20px를 의미합니다. 키를 픽셀 크기로 해석하지 마세요. | | 2 | 4px | 공개된 $spacers 맵입니다. 305와 405 같은 비순차 키는 각각 12px와 20px를 의미합니다. 키를 픽셀 크기로 해석하지 마세요. | | 3 | 8px | 공개된 $spacers 맵입니다. 305와 405 같은 비순차 키는 각각 12px와 20px를 의미합니다. 키를 픽셀 크기로 해석하지 마세요. | | 305 | 12px | 공개된 $spacers 맵입니다. 305와 405 같은 비순차 키는 각각 12px와 20px를 의미합니다. 키를 픽셀 크기로 해석하지 마세요. | | 4 | 16px | 공개된 $spacers 맵입니다. 305와 405 같은 비순차 키는 각각 12px와 20px를 의미합니다. 키를 픽셀 크기로 해석하지 마세요. | | 405 | 20px | 공개된 $spacers 맵입니다. 305와 405 같은 비순차 키는 각각 12px와 20px를 의미합니다. 키를 픽셀 크기로 해석하지 마세요. | | 5 | 24px | 공개된 $spacers 맵입니다. 305와 405 같은 비순차 키는 각각 12px와 20px를 의미합니다. 키를 픽셀 크기로 해석하지 마세요. | | 505 | 28px | 공개된 $spacers 맵입니다. 305와 405 같은 비순차 키는 각각 12px와 20px를 의미합니다. 키를 픽셀 크기로 해석하지 마세요. | | 6 | 32px | 공개된 $spacers 맵입니다. 305와 405 같은 비순차 키는 각각 12px와 20px를 의미합니다. 키를 픽셀 크기로 해석하지 마세요. | | 7 | 40px | 공개된 $spacers 맵입니다. 305와 405 같은 비순차 키는 각각 12px와 20px를 의미합니다. 키를 픽셀 크기로 해석하지 마세요. | | 8 | 48px | 공개된 $spacers 맵입니다. 305와 405 같은 비순차 키는 각각 12px와 20px를 의미합니다. 키를 픽셀 크기로 해석하지 마세요. | ### 글꼴 크기 맵 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | 2xs | 1.2rem | 공개된 $fds-font-sizes 항목입니다. 기본 루트 글꼴 크기는 브라우저의 글꼴 환경 설정을 존중하는 62.5%입니다. 브라우저 기본 글꼴 크기가 16px일 때 1.6rem은 16px입니다. | | xs | 1.4rem | 공개된 $fds-font-sizes 항목입니다. 기본 루트 글꼴 크기는 브라우저의 글꼴 환경 설정을 존중하는 62.5%입니다. 브라우저 기본 글꼴 크기가 16px일 때 1.6rem은 16px입니다. | | sm | 1.6rem | 공개된 $fds-font-sizes 항목입니다. 기본 루트 글꼴 크기는 브라우저의 글꼴 환경 설정을 존중하는 62.5%입니다. 브라우저 기본 글꼴 크기가 16px일 때 1.6rem은 16px입니다. | | md | 1.8rem | 공개된 $fds-font-sizes 항목입니다. 기본 루트 글꼴 크기는 브라우저의 글꼴 환경 설정을 존중하는 62.5%입니다. 브라우저 기본 글꼴 크기가 16px일 때 1.6rem은 16px입니다. | | lg | 2.0rem | 공개된 $fds-font-sizes 항목입니다. 기본 루트 글꼴 크기는 브라우저의 글꼴 환경 설정을 존중하는 62.5%입니다. 브라우저 기본 글꼴 크기가 16px일 때 1.6rem은 16px입니다. | | xl | 2.1rem | 공개된 $fds-font-sizes 항목입니다. 기본 루트 글꼴 크기는 브라우저의 글꼴 환경 설정을 존중하는 62.5%입니다. 브라우저 기본 글꼴 크기가 16px일 때 1.6rem은 16px입니다. | | 2xl | 2.2rem | 공개된 $fds-font-sizes 항목입니다. 기본 루트 글꼴 크기는 브라우저의 글꼴 환경 설정을 존중하는 62.5%입니다. 브라우저 기본 글꼴 크기가 16px일 때 1.6rem은 16px입니다. | | 3xl | 2.4rem | 공개된 $fds-font-sizes 항목입니다. 기본 루트 글꼴 크기는 브라우저의 글꼴 환경 설정을 존중하는 62.5%입니다. 브라우저 기본 글꼴 크기가 16px일 때 1.6rem은 16px입니다. | | 4xl | 2.8rem | 공개된 $fds-font-sizes 항목입니다. 기본 루트 글꼴 크기는 브라우저의 글꼴 환경 설정을 존중하는 62.5%입니다. 브라우저 기본 글꼴 크기가 16px일 때 1.6rem은 16px입니다. | | 5xl | 3.2rem | 공개된 $fds-font-sizes 항목입니다. 기본 루트 글꼴 크기는 브라우저의 글꼴 환경 설정을 존중하는 62.5%입니다. 브라우저 기본 글꼴 크기가 16px일 때 1.6rem은 16px입니다. | | 6xl | 4.0rem | 공개된 $fds-font-sizes 항목입니다. 기본 루트 글꼴 크기는 브라우저의 글꼴 환경 설정을 존중하는 62.5%입니다. 브라우저 기본 글꼴 크기가 16px일 때 1.6rem은 16px입니다. | | 7xl | 4.8rem | 공개된 $fds-font-sizes 항목입니다. 기본 루트 글꼴 크기는 브라우저의 글꼴 환경 설정을 존중하는 62.5%입니다. 브라우저 기본 글꼴 크기가 16px일 때 1.6rem은 16px입니다. | ## Det Fælles Designsystem 디자인 시스템 종합 가이드 실제 인터페이스를 위해 이 시스템을 선택하고 적용하고 검토하는 실용 가이드. 완전한 안내와 구현 시작점, 소스 링크. ## Det Fælles Designsystem 디자인 시스템 DKFDS 테마 및 구현 범위 ### Borger.dk 또는 Virk를 의도적으로 선택하세요 > Det Fælles Designsystem는 Borger.dk와 Virk용 스타일시트를 별도로 제공합니다. 이 예제는 dkfds 11.3.0 버전을 고정하고 Borger.dk 스타일시트를 사용해 특유의 녹색 기본 컨트롤과 IBM Plex Sans 텍스트를 적용합니다. 버튼 하나의 색상만 바꾸고 테마 전체를 변경했다고 간주하지 않습니다. 다른 테마를 사용하려면 구현 단계에서 명시적으로 선택해야 합니다. ### 정렬 기능이 라이브러리 기본 제공이라고 오해하지 마세요 공개된 표 가이드에는 표 마크업과 스타일이 제공되지만, 정렬과 검색 동작은 애플리케이션에서 구현하도록 명시되어 있습니다. 미리보기에는 정렬과 검색을 모두 직접 구현한 완전한 예제가 포함되어 있습니다. 이 구분은 중요합니다. DKFDS JavaScript만 가져와서는 임의의 표가 검색 및 정렬 가능한 데이터 뷰로 바뀌지 않습니다. ## Det Fælles Designsystem 디자인 시스템 Sass 값과 기본 간격 체계 ### 소스 맵을 실제 매핑으로 해석하세요 참고 자료에는 임의로 만들어 낸 --token 이름이 아니라 실제 Sass 값이 기록되어 있습니다. 간격 맵은 8px를 기준으로 하며, 305와 같은 키는 12px, 405는 20px에 해당합니다. 개발자는 이 숫자를 픽셀 값 그대로 취급하지 말고 라이브러리의 헬퍼나 해당 유틸리티 규칙을 사용해야 합니다. 매개변수 표에서 이 매핑을 확인할 수 있습니다. ### 루트 글꼴 크기 규칙을 따르세요 기본 루트 글꼴 크기는 브라우저의 글꼴 환경 설정을 존중하는 62.5%입니다. 따라서 일반적인 브라우저 기본 설정에서 소스의 글꼴 크기 맵은 기본 본문 크기보다 작은 단계로 1.6rem을 포함합니다. 루트 글꼴 크기가 다른 환경에 rem 값을 그대로 복사하면 결과가 크게 달라질 수 있습니다. 이 예제는 실제 스타일시트를 불러와 글꼴과 간격이 일관되도록 합니다. ## Det Fælles Designsystem 디자인 시스템의 시맨틱 표 구조 ### 캡션과 명확한 열 역할을 사용하세요 리소스 비교 표에는 캡션, 열 제목, 일반 데이터 셀이 있습니다. 사용자가 항목을 비교할 수 있도록 제목, 형식, 분 단위 시간, 용도를 각각 별도의 열에 배치합니다. 읽는 데 걸리는 시간은 예시로 작성한 추정치이며, 실제 트래픽이나 성능 통계가 아닙니다. 캡션에서 이 점을 분명히 밝히면서도 표 구조는 그대로 유지합니다. - 유용한 캡션과 열 제목을 제공하세요. - 애플리케이션 모델에서 숫자 데이터는 숫자 형식으로 유지하세요. - 좁은 화면에서는 스크롤 가능한 영역에 접근성 레이블을 지정하세요. ### 모바일에서는 표 내부를 스크롤하게 하세요 정렬 가능한 표는 키보드로 포커스할 수 있는 반응형 스크롤 영역 안에 배치됩니다. 최소 너비를 유지해 열의 가독성을 확보하면서 바깥 페이지가 뷰포트를 벗어나지 않도록 합니다. 이 예제는 좁은 화면에서 정렬 표를 관련 없는 카드 형태로 바꾸지 않습니다. 그렇게 하려면 별도의 탐색 및 정렬 컨트롤 규칙이 필요하기 때문입니다. 키보드 사용자는 스크롤 영역에 포커스할 수 있습니다. ## Det Fælles Designsystem 디자인 시스템의 정렬 상태와 숫자 비교 ### 활성 정렬 기준은 하나만 유지하세요 제목 열은 오름차순으로 정렬됩니다. 같은 헤더를 다시 활성화하면 정렬 방향이 바뀌고, 분 열을 선택하면 오름차순으로 정렬됩니다. aria-sort는 현재 활성화된 헤더에만 적용되며, 각 버튼의 숨겨진 안내 문구는 다음 동작을 설명합니다. 표시되는 화살표는 별도의 장식이 아니라 동일한 상태를 나타냅니다. ### 숫자는 숫자로 비교하세요 분은 숫자 데이터이므로 뺄셈으로 비교해 정렬합니다. 제목에는 localeCompare를 사용합니다. 숫자 문자열을 사전식으로 정렬하면 값이 커질수록 순서가 잘못 표시됩니다. 원본 행 객체를 단일 기준 데이터로 유지하고, 렌더링에는 행 콘텐츠를 마크업으로 해석하지 않는 textContent를 사용합니다. ## Det Fælles Designsystem 디자인 시스템의 검색 제출 및 결과 없음 복구 ### 제출할 때 검색어를 적용하세요 양식이 제출되면 Enter 키 입력을 포함해 표시된 모든 속성을 대상으로 검색합니다. 입력하는 동안 표 내용이 바뀌지 않으므로 읽는 흐름이 끊기지 않습니다. 상태 메시지에는 현재 표시된 항목 수와 정렬 순서가 안내되고, 검색어는 입력란에 유지됩니다. 이는 이 예제에서 선택한 제출 방식의 검색 모델입니다. ### 정렬 순서를 유지하면서 검색어를 초기화하세요 검색 결과가 없으면 복구 안내 메시지가 표시됩니다. 초기화하면 모든 행이 복원되고 검색 입력란에 포커스가 이동하며, 선택한 정렬 열과 방향은 유지됩니다. 따라서 검색 상태와 정렬 상태는 서로 별개의 변수로 관리됩니다. 데이터 다섯 행 전체가 이미 로컬에 있으므로 인위적인 로딩 상태는 표시하지 않습니다. ## Det Fælles Designsystem 디자인 시스템의 전체 작동 통합 ### 배포 에셋을 경로 그대로 불러오세요 11.3.0 패키지의 export map에는 CSS 심층 경로 가져오기가 아니라 JavaScript 항목이 공개되어 있습니다. 설정 과정에서 배포 파일을 public/dkfds에 복사하고 index.html에서 스타일시트를 연결해 글꼴과 이미지의 상대 경로를 유지합니다. 제공된 main.js와 denmark.css는 해당 기본 파일과 같은 위치에 저장하세요. 로컬 미리보기에는 동일한 에셋이 포함되어 있어 안정적으로 확인할 수 있습니다. 1. dkfds 11.3.0을 설치하고 배포 파일을 public/dkfds에 복사하세요. 2. 제공된 HTML 기본 파일에서 Borger.dk 스타일시트를 불러오세요. 3. 전체 항목과 CSS를 저장한 다음 로컬 앱을 실행하세요. 4. 숫자 정렬, 검색 제출, 초기화, 모바일 화면의 내부 스크롤을 확인하세요. ### 비교 흐름 전체를 확인하세요 분 열을 양방향으로 정렬하고, 일치하는 항목이 없는 검색어를 제출한 다음 초기화하세요. Template을 검색하면 템플릿 행 두 개만 남고 현재 정렬 순서는 유지되는지 확인하세요. 휴대폰 너비에서는 표 내부를 스크롤할 수 있고 페이지 자체에는 가로 넘침이 없는지 확인하세요. 또한 번들에 포함된 모든 에셋이 로드되고 브라우저 오류가 없는지도 점검합니다. ## Det Fælles Designsystem 디자인 시스템 컴포넌트 예제 ### main.js — 비교 동작 전체 구현 원본 데이터 전체, 숫자 및 텍스트 정렬, 제출 방식 필터링, 초기화 기능입니다. ``` // index.html loads /dkfds/css/dkfds-borgerdk.css from the copied distribution. import './denmark.css'; const rows=[{name:'Content inventory',type:'Worksheet',minutes:25,note:'Map the purpose and owner of each section.'},{name:'Accessibility review',type:'Checklist',minutes:30,note:'Inspect keyboard use, reading order and clear labels.'},{name:'Research questions',type:'Template',minutes:15,note:'Separate assumptions from questions that need evidence.'},{name:'Decision summary',type:'Template',minutes:10,note:'Record a choice, its reason and what remains uncertain.'},{name:'Prototype walkthrough',type:'Guide',minutes:20,note:'Walk through one realistic task and note friction.'}];let key='name',direction=1,query='';document.getElementById('root').innerHTML=`

DET FÆLLES DESIGNSYSTEM / ORIGINAL TABLE STUDY

Find a planning resource

Compare five authored resources. Search the full table or sort by title and estimated reading time.

Original resource comparison; reading times are sample estimates
FormatPurpose
`;const $=id=>document.getElementById(id);function render(){const list=rows.filter(r=>Object.values(r).join(' ').toLowerCase().includes(query)).sort((a,b)=>direction*(key==='minutes'?a.minutes-b.minutes:a.name.localeCompare(b.name)));$('rows').replaceChildren(...list.map(r=>{const tr=document.createElement('tr');[r.name,r.type,String(r.minutes),r.note].forEach(value=>{const td=document.createElement('td');td.textContent=value;tr.append(td)});return tr}));$('count').textContent=list.length+' of '+rows.length+' resources · sorted by '+(key==='name'?'title':'minutes')+' '+(direction===1?'ascending':'descending');$('empty').hidden=!!list.length;document.querySelectorAll('.sort').forEach(b=>{const active=b.dataset.key===key;active?b.parentElement.setAttribute('aria-sort',direction===1?'ascending':'descending'):b.parentElement.removeAttribute('aria-sort');b.querySelector('.arrow').textContent=active?(direction===1?'↑':'↓'):'↕';b.querySelector('.sr-only').textContent=' — sort '+(active&&direction===1?'descending':'ascending')})}$('search-form').addEventListener('submit',e=>{e.preventDefault();query=$('search').value.trim().toLowerCase();render()});$('reset').addEventListener('click',()=>{$('search').value='';query='';render();$('search').focus()});document.querySelectorAll('.sort').forEach(b=>b.addEventListener('click',()=>{direction=key===b.dataset.key?-direction:1;key=b.dataset.key;render()}));render(); ``` 코드 참조 - 공개된 표 통합 범위에 따라 정렬과 검색은 애플리케이션에서 직접 구현합니다. ### denmark.css — 원본 페이지 구성 반응형 검색 컨트롤과 키보드로 포커스할 수 있는 표 스크롤 영역입니다. ``` body{margin:0}main{max-width:1160px;padding:32px;margin:auto}.eyebrow{font-size:14px;font-weight:600;letter-spacing:.04em}.lead{max-width:66ch}#search-form{margin:32px 0}.search-controls{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.search-controls input{flex:1;min-width:180px;max-width:480px}#count{font-weight:600}.table--responsive-scroll{position:relative;max-width:100%;overflow:auto}.table{min-width:720px;width:100%}.table caption{text-align:left;font-weight:600;margin-bottom:16px}.table th:nth-child(1){width:25%}.table th:nth-child(2){width:15%}.table th:nth-child(3){width:16%}.arrow{margin-left:8px}.sort{white-space:nowrap}aside,#empty{padding:24px;margin-top:32px;background:#f1f1f1;border-left:4px solid #44831e}aside h2,#empty h2{margin-top:0}aside li{margin:8px 0}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.search-controls{gap:12px}.search-controls input{flex-basis:100%;max-width:none}h1{font-size:34px}} @media(max-width:480px){.search-controls input{min-width:0;width:100%}.search-controls .button{max-width:100%;white-space:normal}h1{overflow-wrap:anywhere}} ``` 코드 참조 - 좁은 화면에서는 표가 스크롤 영역 안에서 열 구성을 유지합니다. ### index.html — 배포용 전체 에셋 셸 상대 경로 에셋을 유지하면서 게시된 스타일시트를 불러옵니다. ``` Planning resource comparison
``` 코드 참조 - Vite 루트의 index.html을 이 셸로 교체합니다. ## Det Fælles Designsystem 디자인 시스템 에이전트 설정 ### 구현 시작점 공식 스타일시트와 글꼴을 로컬에서 실행합니다. 정렬과 필터링은 애플리케이션이 처리하므로 이 정적 표 스타일에는 DKFDS.init 호출이 필요하지 않습니다. ``` npm create vite@latest dkfds-table -- --template vanilla cd dkfds-table npm install npm install dkfds@11.3.0 mkdir -p public/dkfds cp -R node_modules/dkfds/dist/. public/dkfds/ # Replace index.html, src/main.js and src/denmark.css with the supplied examples. npm run dev ``` ### 프로젝트를 위한 프롬프트 ``` 실제 11.3.0 Borger.dk 배포 파일과 글꼴 환경을 사용해 DKFDS 리소스 비교를 구현합니다. 완전한 자체 숫자·제목 정렬, 활성 aria-sort 헤더 하나, 제출 방식 검색, 결과 개수 안내, 정렬 순서를 유지하는 초기화 기능을 구현합니다. 표는 키보드로 접근할 수 있는 별도의 영역 안에서 가로로 스크롤되도록 합니다. ``` ## Det Fælles Designsystem 디자인 시스템 출처 및 범위 DKFDS 11.3.0 Borger.dk 스타일과 글꼴을 사용한 OpenDesign 독자적인 비교 화면입니다. 정렬, 검색, 예시 데이터는 자체 애플리케이션 코드이며 DKFDS에 내장된 표 기능이 아닙니다. - 표 안내 마크업, 스크롤, 정렬, 검색의 역할입니다. - 패키지와 테마 배포 스타일시트와 초기화 범위입니다. - 테마 조정 소스 수준의 테마 설정입니다. - 버전이 지정된 소스 Sass 맵, 테마 값, 에셋 라이선스입니다. ## Det Fælles Designsystem 디자인 시스템 관련 자료 ### 디자인 시스템 .italia Bootstrap Italia의 실제 타이포그래피와 반응형 Stepper 구조, 복구 가능한 로컬 폼 상태를 활용해 읽기 쉬운 서비스 절차를 구현하세요. ### Designsystemet 문자 수 피드백과 프레젠테이션 상태 유지 기능을 갖춘 완전한 작업 설명 편집기를 통해 Designsystemet의 실제 테마 역할, 크기 모드, 네이티브 필드 동작을 살펴보세요. ### DSFR 프랑스 정부 디자인 시스템의 구체적인 타이포그래피, 그리드, 아코디언 API을 제도적 맥락에서 살펴봅니다. 교육용으로 명확하게 중립적인 예시 화면에서 연결형과 독립형 펼침 동작을 비교합니다. - [구현 레퍼런스](https://designsystem.dk/komponenter/tables/) - [출처](https://github.com/detfaellesdesignsystem/dkfds-components) - [코드 참조](https://designsystem.dk/komponenter/tables/) - [코드 참조](https://designsystem.dk/kom-i-gang/implementering-kode/hent-kodepakken/) - [표 안내 마크업, 스크롤, 정렬, 검색의 역할입니다.](https://designsystem.dk/komponenter/tables/) - [패키지와 테마 배포 스타일시트와 초기화 범위입니다.](https://designsystem.dk/kom-i-gang/implementering-kode/hent-kodepakken/) - [테마 조정 소스 수준의 테마 설정입니다.](https://designsystem.dk/kom-i-gang/implementering-kode/justering/) - [버전이 지정된 소스 Sass 맵, 테마 값, 에셋 라이선스입니다.](https://github.com/detfaellesdesignsystem/dkfds-components)