# gov.cz 디자인 시스템 ## gov.cz 디자인 시스템 인터페이스 미리보기 두 페이지에 걸쳐 오리지널 자료 여섯 개를 둘러보고, 상세 읽기 화면을 연 다음 해당 동작으로 돌아가세요. ## gov.cz 디자인 시스템 디자인 레퍼런스 실제 @gov-design-system-ce/styles 4.7.1의 tokens.css 색상 기본값과 시맨틱 별칭입니다. 미리보기에서는 게시된 스타일과 Roboto 패키지를 사용합니다. ### 기본 및 중립 색상 기본값 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | --color-primary-50 | rgb(242, 246, 252) | 게시된 4.7.1 기본 색상 값입니다. 애플리케이션에서는 일반적으로 이에 대응하는 시맨틱 역할을 사용해야 합니다. | | --color-primary-100 | rgb(226, 238, 248) | 게시된 4.7.1 기본 색상 값입니다. 애플리케이션에서는 일반적으로 이에 대응하는 시맨틱 역할을 사용해야 합니다. | | --color-primary-600 | rgb(0, 70, 155) | 게시된 4.7.1 기본 색상 값입니다. 애플리케이션에서는 일반적으로 이에 대응하는 시맨틱 역할을 사용해야 합니다. | | --color-primary-700 | rgb(14, 53, 120) | 게시된 4.7.1 기본 색상 값입니다. 애플리케이션에서는 일반적으로 이에 대응하는 시맨틱 역할을 사용해야 합니다. | | --color-primary-800 | rgb(16, 38, 87) | 게시된 4.7.1 기본 색상 값입니다. 애플리케이션에서는 일반적으로 이에 대응하는 시맨틱 역할을 사용해야 합니다. | | --color-secondary-600 | rgb(250, 180, 19) | 게시된 4.7.1 기본 색상 값입니다. 애플리케이션에서는 일반적으로 이에 대응하는 시맨틱 역할을 사용해야 합니다. | | --color-neutral-0 | rgb(255, 255, 255) | 게시된 4.7.1 기본 색상 값입니다. 애플리케이션에서는 일반적으로 이에 대응하는 시맨틱 역할을 사용해야 합니다. | | --color-neutral-50 | rgb(246, 246, 246) | 게시된 4.7.1 기본 색상 값입니다. 애플리케이션에서는 일반적으로 이에 대응하는 시맨틱 역할을 사용해야 합니다. | | --color-neutral-950 | rgb(38, 38, 38) | 게시된 4.7.1 기본 색상 값입니다. 애플리케이션에서는 일반적으로 이에 대응하는 시맨틱 역할을 사용해야 합니다. | ### 읽기 및 피드백 역할 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | --text-primary | var(--color-neutral-950) | 역할이 드러나도록 시맨틱 별칭을 유지하세요. 모든 별칭을 관련 없는 로컬 hex 값으로 대체하지 마세요. | | --text-secondary | var(--color-neutral-700) | 역할이 드러나도록 시맨틱 별칭을 유지하세요. 모든 별칭을 관련 없는 로컬 hex 값으로 대체하지 마세요. | | --text-primary-color | var(--color-primary-600) | 역할이 드러나도록 시맨틱 별칭을 유지하세요. 모든 별칭을 관련 없는 로컬 hex 값으로 대체하지 마세요. | | --text-white | var(--color-neutral-0) | 역할이 드러나도록 시맨틱 별칭을 유지하세요. 모든 별칭을 관련 없는 로컬 hex 값으로 대체하지 마세요. | | --text-status-error | var(--color-error-700) | 역할이 드러나도록 시맨틱 별칭을 유지하세요. 모든 별칭을 관련 없는 로컬 hex 값으로 대체하지 마세요. | | --text-status-success | var(--color-success-700) | 역할이 드러나도록 시맨틱 별칭을 유지하세요. 모든 별칭을 관련 없는 로컬 hex 값으로 대체하지 마세요. | | --status-focus | var(--color-focus-600) | 역할이 드러나도록 시맨틱 별칭을 유지하세요. 모든 별칭을 관련 없는 로컬 hex 값으로 대체하지 마세요. | | --status-warning | var(--color-warning-400) | 역할이 드러나도록 시맨틱 별칭을 유지하세요. 모든 별칭을 관련 없는 로컬 hex 값으로 대체하지 마세요. | | --status-error | var(--color-error-600) | 역할이 드러나도록 시맨틱 별칭을 유지하세요. 모든 별칭을 관련 없는 로컬 hex 값으로 대체하지 마세요. | ### 기본 버튼 상태 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | --button-solid-primary | var(--color-primary-600) | 게시된 버튼 스타일에 사용되는 실제 상태 토큰입니다. 비활성, 마우스 오버, 활성 상태를 각각 구분하세요. | | --button-solid-primary-hover | var(--color-primary-700) | 게시된 버튼 스타일에 사용되는 실제 상태 토큰입니다. 비활성, 마우스 오버, 활성 상태를 각각 구분하세요. | | --button-solid-primary-active | var(--color-primary-800) | 게시된 버튼 스타일에 사용되는 실제 상태 토큰입니다. 비활성, 마우스 오버, 활성 상태를 각각 구분하세요. | | --button-solid-disabled | var(--color-neutral-200) | 게시된 버튼 스타일에 사용되는 실제 상태 토큰입니다. 비활성, 마우스 오버, 활성 상태를 각각 구분하세요. | | --button-outlined-primary | var(--color-primary-50) | 게시된 버튼 스타일에 사용되는 실제 상태 토큰입니다. 비활성, 마우스 오버, 활성 상태를 각각 구분하세요. | | --button-outlined-primary-hover | var(--color-primary-100) | 게시된 버튼 스타일에 사용되는 실제 상태 토큰입니다. 비활성, 마우스 오버, 활성 상태를 각각 구분하세요. | | --button-outlined-primary-active | var(--color-primary-200) | 게시된 버튼 스타일에 사용되는 실제 상태 토큰입니다. 비활성, 마우스 오버, 활성 상태를 각각 구분하세요. | ## gov.cz 디자인 시스템 전체 가이드 실제 인터페이스를 위해 이 시스템을 선택하고 적용하고 검토하는 실용 가이드. 완전한 안내와 구현 시작점, 소스 링크. ## gov.cz 디자인 시스템 Gov CE 기반 요소와 에셋 로드 순서 ### 패키지 버전을 일치시키세요 > 이 예제에서는 컴포넌트, 스타일, 아이콘, 글꼴 버전을 모두 4.7.1로 고정합니다. 기반 스타일시트 5개는 게시된 순서대로 불러옵니다. 각 스타일시트의 역할은 서로 다릅니다. 변수만으로는 카드에 스타일을 적용할 수 없고, 커스텀 요소를 등록하는 것만으로는 전역 컴포넌트 CSS를 불러오지 않습니다. 전체 엔트리에는 이 5개를 모두 포함한 뒤, 간단한 자체 구성 레이어를 추가합니다. ### 컴포넌트를 등록하기 전에 설정을 초기화하세요 동적으로 가져온 컴포넌트 엔트리 모듈이 실행되기 전에 아이콘 경로를 설정합니다. 페이지네이션은 자체 의존성으로 화살표 아이콘을 렌더링하므로 이 순서가 중요합니다. 하위 디렉터리를 그대로 유지하면서 아이콘 디렉터리 전체를 설정된 공개 경로에 복사하세요. JavaScript를 성공적으로 가져왔더라도 별도로 요청하는 아이콘이 제대로 불러와졌다는 뜻은 아닙니다. ## gov.cz 디자인 시스템 시맨틱 색상 및 상태 레퍼런스 ### 색상을 역할에 연결하세요 이 레퍼런스에서는 파란색 기본 색상과 텍스트, 포커스, 버튼 상태 별칭을 구분합니다. 겉보기에 같은 파란색을 모든 곳에 사용하면 이러한 규칙이 사라집니다. 툴킷은 공식 단색 기본 버튼을 사용하며, 활성·마우스 오버·비활성 상태의 모양은 컴포넌트 스타일시트가 결정합니다. 주변 컬렉션 레이아웃만 자체적으로 CSS 구성합니다. ### 타이포그래피와 콘텐츠 맥락이 드러나게 하세요 Roboto는 버전을 맞춘 글꼴 패키지에서 가져옵니다. 카드에는 간결하고 실행 가능한 제목, 메타데이터 줄, 요약, 읽기 동작을 배치합니다. 6개의 자료 텍스트는 체코 정부의 공식 안내문을 번역한 것이 아니라, 직접 작성한 OpenDesign 연습용 콘텐츠입니다. 정부 서비스인 것처럼 꾸미지 않으면서 계층 구조와 로컬에서 완결되는 상호작용을 보여주기 위한 자료입니다. ## gov.cz 디자인 시스템 카드 슬롯과 읽기 동작 ### 지원되는 슬롯에 제목을 배치하세요 각 gov-card의 headline 슬롯에는 제목을 넣습니다. 메타데이터, 설명, 버튼은 콘텐츠를 구성합니다. 동작의 aria-label에는 자료 제목을 포함해, 반복되는 ‘자료 읽기’ 버튼을 보조 기술에서 구분할 수 있도록 합니다. 컴포넌트는 ARIA 속성을 내부의 상호작용 요소로 전달합니다. 임의로 만든 accessible-label 속성은 같은 역할을 하지 않습니다. ### 레이아웃은 컴포넌트 계약 밖에서 관리하세요 3열 CSS 그리드는 좁은 화면에서 1열로 바뀝니다. 그리드와 중단점은 이 예제를 위해 작성한 것이며, 공식 카드 속성을 추가한 것이 아닙니다. 미리보기에서는 폭이 매우 좁은 삽입 컨테이너 안의 전역 본문 최소 너비 320px도 해제합니다. 이처럼 구성을 제한적으로 조정하면 컴포넌트 스타일을 유지하면서 부모 페이지가 넘치는 현상을 방지할 수 있습니다. ## gov.cz 디자인 시스템 네이티브 페이지네이션과 애플리케이션 상태 ### 네이티브 이벤트 페이로드를 읽으세요 gov-pagination에는 total=6 및 page-size=3을 전달합니다. gov-page 이벤트의 detail.pagination.currentPage 값에 따라 해당하는 레코드 3개를 선택합니다. 현재 페이지 컨트롤은 페이지네이션 컴포넌트가 관리하고, 데이터셋과 화면에 표시할 범위는 애플리케이션이 관리합니다. 이 영어 예제에서는 체코어 기본 탐색 레이블을 모두 영어 레이블로 명시적으로 바꿉니다. - total은 페이지 수가 아니라 레코드 수입니다. - page-size는 표시 범위의 길이를 지정합니다. - gov-page는 detail.pagination.currentPage를 제공합니다. - 탐색 레이블은 인터페이스의 언어와 일치해야 합니다. ### 페이지를 바꿀 때 오래된 상세 내용이 남지 않도록 하세요 페이지를 바꾸면 현재 열려 있는 자료를 닫아, 상세 내용이 다른 카드 모음에 속한 것처럼 보이지 않게 합니다. 개수는 전체 6개 중 1–3개 또는 4–6개 자료라고 표시합니다. 규모가 작고 데이터가 이미 정해진 경우의 로컬 페이지네이션이므로 가짜 로딩 스피너를 표시하거나 서버에서 데이터를 가져온다고 표현하지 않습니다. 서버를 사용하는 구현에서는 별도의 대기, 오류, 결과 계약이 필요합니다. ## gov.cz 디자인 시스템 읽기 포커스와 돌아가기 동작 ### 열린 자료로 포커스를 이동하세요 읽기 동작은 로컬 상세 영역에 콘텐츠를 채우고 제목에 포커스를 둡니다. 컬렉션 아래에 콘텐츠가 추가되는 동작을 수행한 뒤 키보드 사용자가 이동할 위치를 명확하게 제시합니다. 포커스 가능한 제목에는 tabindex=-1을 사용합니다. 이를 통해 애플리케이션에서 제목에 포커스를 둘 수 있으며, 일반 Tab 순서에 불필요한 정지 지점이 추가되지 않습니다. 열린 콘텐츠는 일반 텍스트로 읽을 수 있습니다. ### 자료를 연 동작으로 포커스를 돌려보내세요 ‘자료로 돌아가기’를 선택하면 상세 내용을 숨기고 원래 내부 버튼에 포커스를 둡니다. 이 UI는 모달이 아닙니다. 포커스를 가두거나 대화상자 의미를 추가하거나 페이지를 어둡게 처리하지 않습니다. 원래 컬렉션은 계속 사용할 수 있습니다. 자료를 반복해서 열고 닫고 페이지를 이동하면서 애플리케이션 상태와 포커스가 같은 자료를 따르는지 확인하세요. ## gov.cz 디자인 시스템 로컬 통합 전체 예제 ### 제공된 파일을 함께 사용하세요 이 엔트리는 레코드 6개, 카드 생성, 페이지네이션 처리, 상세 내용 포커스 동작을 모두 포함하는 완전한 애플리케이션 코드입니다. 스타일시트에는 직접 작성한 구성만 포함됩니다. 고정된 버전의 패키지 4개를 설치하고, 아이콘을 복사한 뒤, 두 파일을 바닐라 Vite 프로젝트에 저장하세요. 브라우저 미리보기는 이 컴포넌트 엔트리와 로컬 글꼴 에셋만 번들링합니다. 1. Gov CE 패키지 4개를 모두 4.7.1로 설치하세요. 2. 하위 디렉터리를 유지하면서 아이콘을 public/assets/gov-cz-icons에 복사하세요. 3. 완전한 JavaScript와 구성 CSS을 src에 저장하세요. 4. 앱을 실행하고 페이지 이동, 포커스 복귀, 아이콘 요청을 확인하세요. ### 상호작용 및 에셋 로드를 확인하세요 첫 번째 리소스를 열고, 버튼으로 돌아가 두 번째 페이지로 이동한 뒤 다른 리소스를 읽어 보세요. 시작 부분에서는 처음/이전 컨트롤이 비활성화되고 끝 부분에서는 다음/마지막 컨트롤이 비활성화되는지 확인하세요. 데스크톱과 휴대전화 너비, 더 좁은 임베드 너비에서도 같은 흐름을 점검하세요. 네트워크 패널에서 누락된 아이콘과 JavaScript 오류도 확인하세요. ## gov.cz 디자인 시스템 구성 요소 예시 ### main.js — 페이지 매김 기능이 완전히 구현된 도구 모음 전체 데이터, 기본 컴포넌트 등록, 페이지별 항목 분할 및 읽기 후 포커스 복귀. ``` import '@gov-design-system-ce/styles/tokens.css'; import '@gov-design-system-ce/styles/styles.css'; import '@gov-design-system-ce/styles/layout.css'; import '@gov-design-system-ce/styles/components.css'; import '@gov-design-system-ce/styles/animations.css'; import '@gov-design-system-ce/fonts/lib/roboto.css'; import './gov-cz.css'; window.GOV_DS_CONFIG={iconsPath:'/assets/gov-cz-icons'}; const resources=[ {title:'Map the service journey',kind:'Workshop',time:'25 minutes',summary:'Connect the first question to a useful outcome.',body:'Start with the person’s goal. Record how they discover the service, what they need before starting and how they know the task has finished. Mark every hand-off where the person must repeat information.'}, {title:'Write a clear action label',kind:'Writing guide',time:'10 minutes',summary:'Name what will happen after a button is activated.',body:'Use a verb and the object of the action. Compare Save draft with Send application and make the distinction explicit. Keep destructive and reversible actions visually and verbally distinguishable.'}, {title:'Review keyboard access',kind:'Checklist',time:'20 minutes',summary:'Inspect focus order, visible focus and recovery.',body:'Work through the page using only the keyboard. Check the first useful control, the order through repeated items, the next-page action and return from a detail view. A selected page and keyboard focus are separate states.'}, {title:'Prepare an error message',kind:'Writing guide',time:'15 minutes',summary:'Explain the issue next to a recoverable action.',body:'State what needs changing and how to change it. Preserve the person’s input. Avoid a generic failure message when the application knows which field or prerequisite is causing the problem.'}, {title:'Test a narrow layout',kind:'Checklist',time:'20 minutes',summary:'Keep reading and actions available on a small screen.',body:'Inspect a long title, two lines of metadata and the pagination controls at a narrow width. Avoid hiding essential actions behind hover. Check that only a genuinely two-dimensional region scrolls sideways.'}, {title:'Record the decision',kind:'Template',time:'10 minutes',summary:'Give the next team enough context to continue.',body:'Record the decision, the evidence used, the person responsible and the condition that would make the team revisit it. A useful record explains the reasoning without presenting an experiment as a settled rule.'} ]; document.querySelector('#root').innerHTML=`

OPENDESIGN · ORIGINAL SERVICE TOOLKIT

Small steps toward a clearer service

Six practical resources for a team review. Explore two pages and open a resource without leaving the collection.

`; await import('@gov-design-system-ce/components/dist/components/gov-card.js'); await import('@gov-design-system-ce/components/dist/components/gov-pagination.js'); let page=1,opened=-1; const cards=document.querySelector('#cards'), detail=document.querySelector('#detail'); function render(){cards.replaceChildren();resources.slice((page-1)*3,page*3).forEach((r,i)=>{let id=(page-1)*3+i;let card=document.createElement('gov-card');card.innerHTML=`

${r.title}

${r.kind} · ${r.time}

${r.summary}

Read resource`;cards.append(card)});document.querySelector('#range').textContent=`Resources ${(page-1)*3+1}–${page*3} of ${resources.length}`;detail.hidden=true;opened=-1;} cards.addEventListener('gov-click',e=>{let b=e.target.closest('[data-resource]');if(!b)return;opened=Number(b.dataset.resource);let r=resources[opened];document.querySelector('#detail-meta').textContent=r.kind+' · '+r.time;document.querySelector('#detail-title').textContent=r.title;document.querySelector('#detail-body').textContent=r.body;detail.hidden=false;document.querySelector('#detail-title').focus();}); document.querySelector('gov-pagination').addEventListener('gov-page',e=>{page=e.detail.pagination.currentPage;render();}); document.querySelector('#close').addEventListener('gov-click',()=>{detail.hidden=true;const button=cards.querySelector(`[data-resource="${opened}"] button`);button?.focus();opened=-1;});render(); ``` 코드 참조 - 컴포넌트 진입 모듈을 가져오기 전에 구성을 실행합니다. ARIA 이름에는 aria-label을 사용합니다. ### gov-cz.css — 원본 컬렉션 구성 반응형 그리드와 읽기 쉬운 로컬 상세 화면을 제공하며, 기본 컴포넌트 스타일을 유지합니다. ``` body{margin:0;color:var(--text-primary);font-family:Roboto,Arial,sans-serif}main{max-width:1160px;margin:auto;padding:32px}.eyebrow{font-size:12px;letter-spacing:.08em;font-weight:700;color:var(--color-primary-600)}h1{max-width:22ch;font-size:40px;line-height:1.15;margin:16px 0}.lead{max-width:66ch;font-size:18px;line-height:1.6}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:32px 0}.cards gov-card{height:100%}.cards h2{font-size:22px;line-height:1.3}.cards p{margin-bottom:20px;line-height:1.6}.meta{font-size:14px;color:#555}.pagination-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}#range{font-size:14px}#detail{padding:24px;border-left:4px solid var(--color-primary-600);background:var(--color-primary-50);margin-top:32px}#detail-body{max-width:66ch;line-height:1.7}aside{margin-top:32px;padding-top:24px;border-top:1px solid #ddd;font-size:14px;line-height:1.6}aside p{max-width:80ch}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.cards{grid-template-columns:1fr}h1{font-size:32px}.pagination-row{display:block}gov-pagination{max-width:100%;overflow:auto}} html,body{min-width:0}.eyebrow{overflow-wrap:anywhere} ``` 코드 참조 - 그리드 레이아웃과 임베드 시 최소 너비 재정의는 원본 애플리케이션 CSS입니다. ## gov.cz 디자인 시스템 에이전트 설정 ### 구현 시작점 아이콘 하위 디렉터리를 그대로 유지하세요. 이 예제는 컴포넌트 진입 모듈을 직접 가져오므로 복사한 지연 로더 런타임이 필요하지 않습니다. ``` npm create vite@latest gov-toolkit -- --template vanilla cd gov-toolkit npm install npm install @gov-design-system-ce/components@4.7.1 @gov-design-system-ce/styles@4.7.1 @gov-design-system-ce/icons@4.7.1 @gov-design-system-ce/fonts@4.7.1 mkdir -p public/assets/gov-cz-icons cp -R node_modules/@gov-design-system-ce/icons/lib/. public/assets/gov-cz-icons/ # Save the supplied files as src/main.js and src/gov-cz.css. # The root index.html must contain
and load /src/main.js. npm run dev ``` ### 프로젝트를 위한 프롬프트 ``` 기본 카드, 버튼 및 페이지네이션을 사용해 제공된 Gov CE 4.7.1 도구 모음을 구성하세요. 실제 스타일시트 순서와 아이콘 경로 설정을 유지하세요. gov-page detail.pagination.currentPage, 의미 있는 영어 ARIA 레이블, 페이지 변경 시 오래된 상세 화면 닫기, 읽은 뒤 포커스 복귀를 사용하세요. 원본 샘플 콘텐츠의 출처 표기를 유지하세요. ``` ## gov.cz 디자인 시스템 출처 및 범위 Gov Design System CE 4.7.1 컴포넌트, 스타일, 아이콘 및 글꼴을 사용한 독창적인 OpenDesign 서비스 도구 모음 연구입니다. 샘플 문구와 컬렉션 동작은 독창적으로 작성했으며, 공식 정부 서비스가 아닙니다. - HTML 통합 에셋 순서, 등록 및 컴포넌트 구성. - 페이지네이션 페이지 컨트롤 및 탐색 의미 구조. - 카드 카드 콘텐츠 및 제목 슬롯. - 색상 토큰 기본 및 시맨틱 색상 역할. - 타이포그래피 글꼴 및 텍스트 계층 구조. ## gov.cz 디자인 시스템 관련 리소스 ### GOV.UK 디자인 시스템 최신 v6 타이포그래피 크기 체계, 반응형 간격, 기능별 색상, 연결된 유효성 검사, 구체적인 Frontend 통합을 적용해 GOV.UK 스타일의 질문 및 답변 확인 과정을 구현합니다. ### HarvardSites 디자인 시스템 HarvardSites를 편집 플랫폼으로 이해해 보세요. 사이트 스타일을 비교하고, 문서화된 글꼴 조합을 선택하고, 대학 페이지를 목적에 맞게 설계된 콘텐츠 구성 요소로 조립할 수 있습니다. ### Helsinki 기본 HDS 선택 그룹, 시맨틱 피드백 색상, 연결된 오류 요약을 구성해 검토와 수정까지 이어지는 완전한 흐름을 구현하세요. - [구현 레퍼런스](https://designsystem.gov.cz/komponenty/pagination) - [출처](https://designsystem.gov.cz/principy/barevne-tokeny) - [코드 참조](https://designsystem.gov.cz/zaciname/developers/html) - [코드 참조](https://designsystem.gov.cz/komponenty/card) - [HTML 통합 에셋 순서, 등록 및 컴포넌트 구성.](https://designsystem.gov.cz/zaciname/developers/html) - [페이지네이션 페이지 컨트롤 및 탐색 의미 구조.](https://designsystem.gov.cz/komponenty/pagination) - [카드 카드 콘텐츠 및 제목 슬롯.](https://designsystem.gov.cz/komponenty/card) - [색상 토큰 기본 및 시맨틱 색상 역할.](https://designsystem.gov.cz/principy/barevne-tokeny) - [타이포그래피 글꼴 및 텍스트 계층 구조.](https://designsystem.gov.cz/principy/typografie)