# Canada.ca 디자인 시스템 ## Canada.ca 디자인 시스템 인터페이스 미리보기 작성된 주제 6개를 필터링하고, 네이티브 세부 정보 항목을 펼쳐 보고, 검색 결과가 없을 때 복구하는 과정을 확인하세요. ## Canada.ca 디자인 시스템 디자인 참조 자료 게시된 @gcds-core/components 1.6.0 CSS 내보내기 항목 및 구성 요소 계약을 사용합니다. 로컬 미리보기에는 @gcds-core/fonts 1.1.1이 포함되어 있습니다. ### 시맨틱 색상 및 상호작용 역할 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | --gcds-text-primary | #333 | 텍스트, 인터페이스 표면 또는 상호작용 상태에 해당하는 시맨틱 역할을 사용하세요. 포커스 색상은 장식용 강조색이 아닙니다. | | --gcds-text-secondary | #595959 | 텍스트, 인터페이스 표면 또는 상호작용 상태에 해당하는 시맨틱 역할을 사용하세요. 포커스 색상은 장식용 강조색이 아닙니다. | | --gcds-bg-primary | #26374a | 텍스트, 인터페이스 표면 또는 상호작용 상태에 해당하는 시맨틱 역할을 사용하세요. 포커스 색상은 장식용 강조색이 아닙니다. | | --gcds-bg-light | #f2f2f2 | 텍스트, 인터페이스 표면 또는 상호작용 상태에 해당하는 시맨틱 역할을 사용하세요. 포커스 색상은 장식용 강조색이 아닙니다. | | --gcds-link-default | #1f497a | 텍스트, 인터페이스 표면 또는 상호작용 상태에 해당하는 시맨틱 역할을 사용하세요. 포커스 색상은 장식용 강조색이 아닙니다. | | --gcds-link-hover | #1354ec | 텍스트, 인터페이스 표면 또는 상호작용 상태에 해당하는 시맨틱 역할을 사용하세요. 포커스 색상은 장식용 강조색이 아닙니다. | | --gcds-link-visited | #4b248f | 텍스트, 인터페이스 표면 또는 상호작용 상태에 해당하는 시맨틱 역할을 사용하세요. 포커스 색상은 장식용 강조색이 아닙니다. | | --gcds-focus-background | #1354ec | 텍스트, 인터페이스 표면 또는 상호작용 상태에 해당하는 시맨틱 역할을 사용하세요. 포커스 색상은 장식용 강조색이 아닙니다. | | --gcds-focus-text | #fff | 텍스트, 인터페이스 표면 또는 상호작용 상태에 해당하는 시맨틱 역할을 사용하세요. 포커스 색상은 장식용 강조색이 아닙니다. | | --gcds-danger-text | #b3192e | 텍스트, 인터페이스 표면 또는 상호작용 상태에 해당하는 시맨틱 역할을 사용하세요. 포커스 색상은 장식용 강조색이 아닙니다. | | --gcds-disabled-background | #d9d9d9 | 텍스트, 인터페이스 표면 또는 상호작용 상태에 해당하는 시맨틱 역할을 사용하세요. 포커스 색상은 장식용 강조색이 아닙니다. | | --gcds-border-default | #8c8c8c | 텍스트, 인터페이스 표면 또는 상호작용 상태에 해당하는 시맨틱 역할을 사용하세요. 포커스 색상은 장식용 강조색이 아닙니다. | ### 타이포그래피 및 읽기 편한 너비 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | --gcds-font-h1 | 700 2.5625rem/117% "Lato",sans-serif | 게시된 CSS 타이포그래피 내보내기 항목입니다. 줄 길이나 줄바꿈을 판단하기 전에 Lato와 Noto Sans를 불러오세요. | | --gcds-font-h2 | 700 2.4375rem/123% "Lato",sans-serif | 게시된 CSS 타이포그래피 내보내기 항목입니다. 줄 길이나 줄바꿈을 판단하기 전에 Lato와 Noto Sans를 불러오세요. | | --gcds-font-h3 | 700 1.8125rem/137% "Lato",sans-serif | 게시된 CSS 타이포그래피 내보내기 항목입니다. 줄 길이나 줄바꿈을 판단하기 전에 Lato와 Noto Sans를 불러오세요. | | --gcds-font-h4 | 700 1.6875rem/133% "Lato",sans-serif | 게시된 CSS 타이포그래피 내보내기 항목입니다. 줄 길이나 줄바꿈을 판단하기 전에 Lato와 Noto Sans를 불러오세요. | | --gcds-font-text | 400 1.25rem/160% "Noto Sans",sans-serif | 게시된 CSS 타이포그래피 내보내기 항목입니다. 줄 길이나 줄바꿈을 판단하기 전에 Lato와 Noto Sans를 불러오세요. | | --gcds-font-text-small | 400 1.125rem/155% "Noto Sans",sans-serif | 게시된 CSS 타이포그래피 내보내기 항목입니다. 줄 길이나 줄바꿈을 판단하기 전에 Lato와 Noto Sans를 불러오세요. | | --gcds-text-character-limit | 65ch | 게시된 CSS 타이포그래피 내보내기 항목입니다. 줄 길이나 줄바꿈을 판단하기 전에 Lato와 Noto Sans를 불러오세요. | ### 간격 및 컨테이너 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | --gcds-spacing-100 | 0.5rem | 토큰 접미사 숫자를 픽셀 수로 간주하지 말고 내보낸 rem 값을 사용하세요. | | --gcds-spacing-150 | 0.75rem | 토큰 접미사 숫자를 픽셀 수로 간주하지 말고 내보낸 rem 값을 사용하세요. | | --gcds-spacing-200 | 1rem | 토큰 접미사 숫자를 픽셀 수로 간주하지 말고 내보낸 rem 값을 사용하세요. | | --gcds-spacing-300 | 1.5rem | 토큰 접미사 숫자를 픽셀 수로 간주하지 말고 내보낸 rem 값을 사용하세요. | | --gcds-spacing-400 | 2rem | 토큰 접미사 숫자를 픽셀 수로 간주하지 말고 내보낸 rem 값을 사용하세요. | | --gcds-spacing-600 | 3rem | 토큰 접미사 숫자를 픽셀 수로 간주하지 말고 내보낸 rem 값을 사용하세요. | | --gcds-container-sm | 30rem | 토큰 접미사 숫자를 픽셀 수로 간주하지 말고 내보낸 rem 값을 사용하세요. | | --gcds-container-md | 48rem | 토큰 접미사 숫자를 픽셀 수로 간주하지 말고 내보낸 rem 값을 사용하세요. | | --gcds-container-lg | 62rem | 토큰 접미사 숫자를 픽셀 수로 간주하지 말고 내보낸 rem 값을 사용하세요. | | --gcds-container-xl | 71.25rem | 토큰 접미사 숫자를 픽셀 수로 간주하지 말고 내보낸 rem 값을 사용하세요. | ## Canada.ca 디자인 시스템 전체 가이드 실제 인터페이스를 위해 이 시스템을 선택하고 적용하고 검토하는 실용 가이드. 완전한 안내와 구현 시작점, 소스 링크. ## Canada.ca 디자인 시스템 현재 구성 요소 및 패키지 범위 ### 현재 네임스페이스를 사용하세요 > GC Design System은 이 Canada.ca 리소스에 사용되는 구성 요소 시스템입니다. 이 예제에서는 @gcds-core/components 1.6.0을 고정해 사용하며, 독립형 입력, 세부 정보 및 버튼 커스텀 요소를 등록합니다. 이전 예제에서는 @cdssnc 네임스페이스를 사용했을 수 있습니다. 다른 릴리스의 등록 코드를 섞지 말고 실제 설치된 패키지 버전을 따르세요. ### 콘텐츠 살펴보기와 서비스 제공을 구분하세요 이 예제에는 작성된 준비 주제 6개가 나옵니다. Government of Canada 서명, 예약 연동 또는 필수 문서에 관한 주장은 포함되어 있지 않습니다. 실제로 검색할 수 있는 펼침형 콘텐츠 패턴을 보여 주는 것이 목적입니다. 구성 요소를 재사용한다고 해서 애플리케이션이 공식 서비스가 되거나 콘텐츠가 모든 Canada.ca 요구 사항을 충족하는 것은 아닙니다. ## Canada.ca 디자인 시스템 타이포그래피 및 읽기 리듬 ### 글꼴 두 가지를 모두 불러오세요 제목에는 Lato를, 일반 텍스트에는 Noto Sans를 사용합니다. 게시된 데스크톱 본문 역할은 줄 높이 160%에 1.25rem이며, 내보낸 읽기 너비 참조 값은 65ch입니다. 이 값은 조밀한 대시보드보다 훨씬 여유로운 읽기 리듬을 만듭니다. 로컬 미리보기에는 게시된 글꼴 파일이 포함되어 있어 외부 글꼴 요청이 실패해도 결과가 눈에 띄지 않게 달라지지 않습니다. ### 글꼴 축약 속성 전체를 준수하세요 토큰 표에는 명목 픽셀 크기뿐 아니라 실제 CSS 글꼴 축약 속성도 나옵니다. 글꼴 두께, 줄 높이, 글꼴 계열을 함께 고려해야 합니다. 주 제목에는 Canada.ca에서 영감을 받은 독창적인 구성 요소로 짧은 빨간색 밑줄을 사용합니다. 너비 72px은 일반적인 GC 간격 토큰이 아닙니다. 좁은 뷰포트에서는 읽기 쉬운 본문 텍스트를 유지하면서 레이아웃을 한 열로 바꿉니다. ## Canada.ca 디자인 시스템 시맨틱 색상 및 포커스 동작 ### 의미 있는 상태에는 공개 역할을 사용하세요 기본 텍스트는 #333, 보조 텍스트는 #595959, 차분한 파란색 표면 역할은 #26374a입니다. CSS에서 내보낸 항목에는 링크, 포커스, 위험 상태에 각각 별도의 역할이 있습니다. 링크를 색상 변경만으로 구분해서는 안 됩니다. 네이티브 세부 정보 펼침 요소에는 사용자가 알아볼 수 있는 조작 표시와 접근 가능한 펼침 상태도 있습니다. ### 눈에 보이는 포커스 표시를 제거하지 마세요 네이티브 입력 및 버튼 컴포넌트가 자체 포커스 동작을 제공합니다. 애플리케이션 CSS은 외부 레이아웃을 처리하며, 아웃라인을 지우려고 섀도 루트에 접근하지 않습니다. 초기화하면 포커스가 검색 필드로 돌아가므로 키보드 사용자는 바로 검색어를 수정할 수 있습니다. 섀도 DOM에서는 사용자 지정 스타일과 표시 규칙이 적용되는 방식이 달라지므로, 일반 요소 선택자가 모든 상태를 다룬다고 가정하지 말고 렌더링된 컴포넌트를 확인하세요. ## Canada.ca 디자인 시스템 세부 정보 콘텐츠와 정보 우선순위 ### 보충 설명에만 세부 정보 공개 기능 사용 각 네이티브 gcds-details에는 기본 슬롯에 details-title과 보충 텍스트가 들어갑니다. 필수 안내는 사이드바에 표시된 상태로 유지합니다. 실제 예약 시간, 주소 또는 요건을 패널을 펼쳐야만 확인할 수 있게 해서는 안 됩니다. 샘플 주제 여섯 개는 정보 제공만을 위한 것으로, 신원 정보를 수집하거나 예약이 완료된 것처럼 보이게 하지 않습니다. - 중요한 서비스 정보는 펼치지 않아도 볼 수 있게 유지하세요. - 짧고 구체적인 세부 정보 제목을 사용하세요. - 콘텐츠를 찾기 어렵게 만드는 중첩 공개 기능은 피하세요. ### 필터링 중에도 공개 상태 유지 애플리케이션은 각 details 요소를 한 번만 만듭니다. 필터링할 때 컴포넌트를 제거하고 다시 만드는 대신 일반 래퍼를 숨깁니다. 이 방식은 주제가 일시적으로 사라졌다가 다시 나타나도 펼쳐진 상태를 유지합니다. 래퍼의 표시 여부를 제어하면 사용자 지정 요소 호스트의 내부 표시 스타일이 외부 hidden 규칙을 따를 것이라고 가정하지 않아도 됩니다. ## Canada.ca 디자인 시스템 검색 상태와 결과 없음 복구 ### 문서화된 사용자 지정 이벤트 수신 gcds-input에는 label, input-id, name이 필요합니다. gcdsInput 이벤트는 event.detail에 새 값을 제공합니다. 애플리케이션은 앞뒤 공백을 제거하고 소문자로 바꾼 검색어를 주제 제목 및 본문과 비교합니다. 라이브 상태 영역에는 표시된 항목 수를 알리고, 일치하는 항목이 없으면 설명 없이 빈 영역만 남기는 대신 유용한 복구 메시지를 표시합니다. ### 초기화를 완전한 상태 전환으로 처리 보조 네이티브 버튼을 누르면 컴포넌트 값이 지워지고, 항목 여섯 개가 모두 다시 표시되며, 내부 입력에 포커스가 놓입니다. 독자가 이전에 펼친 공개 항목 상태는 초기화하지 않습니다. 이렇게 검색 상태와 읽기 상태를 분리하면 예측 가능한 동작을 유지할 수 있습니다. 원격 데이터 세트를 검색하는 프로덕션 기능이라면 로딩, 요청 실패, 결과 순서 규칙도 필요하지만, 여기의 로컬 6개 항목 필터에는 그런 동작이 필요하지 않습니다. ## Canada.ca 디자인 시스템 전체 JavaScript 통합 ### 작동하는 예제 구현 Vite 바닐라 프로젝트를 만들고, 버전이 고정된 컴포넌트 패키지를 설치한 다음, 아래의 전체 JavaScript으로 진입 파일을 교체하세요. canada.css는 같은 위치에 저장하고 루트 마운트 요소를 유지하세요. 사용자 지정 요소 진입점은 필요한 종속성을 등록하며, 패키지 CSS은 토큰 레이어를 제공합니다. 소스에는 전체 데이터 세트와 등록, 필터링, 초기화 동작이 포함되어 있습니다. 1. Vite 바닐라 프로젝트에 버전이 고정된 패키지를 설치하세요. 2. 전체 진입 파일과 canada.css를 저장하고 루트 마운트를 유지하세요. 3. 일치하는 항목이 없는 단어를 검색하고 복구 메시지가 표시되는지 확인하세요. 4. 초기화한 뒤 주제를 펼치고 다시 필터링해 읽기 상태가 유지되는지 확인하세요. ### 공개 상태를 유지하면서 결과 래퍼 숨기기 각 gcds-details를 일반 래퍼 안에 넣고 필터링할 때 래퍼의 hidden 상태를 전환하세요. 사용자 지정 요소 자체의 표시 규칙이 일반 CSS 선택자를 바탕으로 한 예상과 다르게 작동할 수 있습니다. 인스턴스를 마운트된 상태로 유지하면 검색어를 지웠을 때 펼쳐 둔 주제가 같은 상태로 돌아옵니다. 검색과 세부 정보 공개는 서로 별개의 컨트롤입니다. gcdsInput 이벤트의 event.detail에서 검색어를 읽고, 결과 수를 알리며, 네이티브 details 요소가 자체 펼침 상태를 관리하도록 두세요. 초기화할 때는 쿼리 모델뿐 아니라 컴포넌트 값도 업데이트한 다음 입력에 포커스를 돌려야 합니다. 결과 영역 전체를 다시 만들면 독자의 위치가 사라집니다. ## Canada.ca 디자인 시스템 컴포넌트 예제 ### main.js — 네이티브 주제 필터 전체 코드 컴포넌트 등록, 직접 작성한 주제, 필터링, 공개 상태 유지, 초기화를 포함한 전체 진입 파일입니다. ``` import {defineCustomElement as input} from '@gcds-core/components/dist/components/gcds-input.js'; import {defineCustomElement as details} from '@gcds-core/components/dist/components/gcds-details.js'; import {defineCustomElement as button} from '@gcds-core/components/dist/components/gcds-button.js'; import '@gcds-core/components/dist/gcds/gcds.css'; import './canada.css'; input();details();button(); document.getElementById('root').innerHTML=`

GC DESIGN SYSTEM / ORIGINAL CONTENT STUDY

Prepare for an appointment

Find a preparation topic in this fictional service guide. These are sample explanations, not government requirements.

Reset filter

Preparation topics

`; const topics=[['Confirm the time','Check the time and time zone shown in a real booking confirmation. This sample does not contain a live appointment.'],['Review the location','A real service should provide an address or joining instructions. A location belongs in visible booking details, not only inside a collapsed panel.'],['Plan access needs','Ask the service about accessibility arrangements through its official contact route. This sample demonstrates disclosure behavior and does not promise a particular accommodation.'],['Check documents','Follow the actual service’s published document requirements. This authored example intentionally does not invent a list of mandatory identity documents.'],['Keep a reference','If the service provides a booking reference, keep it with your confirmation. Do not paste personal reference numbers into this public specimen.'],['Prepare questions','Write down what you want to understand. In a real service, clear preparation content can reduce the need to remember questions during the appointment.']];const $=id=>document.getElementById(id);const entries=topics.map(([title,text])=>{const el=document.createElement('gcds-details');el.setAttribute('details-title',title);const p=document.createElement('p');p.textContent=text;el.append(p);const wrapper=document.createElement('div');wrapper.append(el);$('topics').append(wrapper);return{el,wrapper,title,text}});function render(q=''){let count=0;for(const item of entries){item.wrapper.hidden=!(item.title+' '+item.text).toLowerCase().includes(q.trim().toLowerCase());if(!item.wrapper.hidden)count++}$('count').textContent=count+' of '+topics.length+' sample topics';$('empty').hidden=count>0}$('filter').addEventListener('gcdsInput',e=>render(e.detail));$('reset').addEventListener('click',()=>{$('filter').value='';render();$('filter').shadowRoot.querySelector('input')?.focus()});render(); ``` 코드 참조 - 루트 마운트 요소와 함께 src/main.js로 저장하세요. 게시된 패키지 CSS은 기본 글꼴 URL을 불러옵니다. 이 로컬 미리보기에는 같은 공개 글꼴이 포함되어 있습니다. ### canada.css — 반응형 콘텐츠 구성 네이티브 컴포넌트 스타일을 둘러싼 원본 페이지 레이아웃입니다. ``` *{box-sizing:border-box}body{margin:0;background:white;color:var(--gcds-text-primary);font:var(--gcds-font-text)}main{padding:32px}h1{font:var(--gcds-font-h1);margin:16px 0 24px;max-width:24ch}h1:after{content:'';display:block;width:72px;height:6px;background:#a62a1e;margin-top:16px}h2{font:var(--gcds-font-h3);margin:0 0 24px}h3{font:var(--gcds-font-h4)}p{margin:0 0 24px;max-width:65ch}.eyebrow,.small{font:var(--gcds-font-text-small)}.lead{max-width:65ch}.search-row{display:flex;align-items:end;gap:24px;margin:32px 0;border-top:1px solid #ccc;padding-top:24px}.search-row gcds-input{flex:1;max-width:650px}.search-row gcds-button{margin-bottom:var(--gcds-input-margin)}.layout{display:grid;grid-template-columns:1.6fr 1fr;gap:48px}aside{background:var(--gcds-color-grayscale-50);border-left:4px solid var(--gcds-color-blue-muted);padding:24px;align-self:start}aside h2{font:var(--gcds-font-h4)}aside ol{padding-left:24px}aside li{padding-left:8px;margin:16px 0}#count{font:var(--gcds-font-text-small)}#empty{padding:24px;background:var(--gcds-color-grayscale-50)}gcds-details{display:block}gcds-details p{padding-top:8px}[hidden]{display:none!important}@media(max-width:767px){main{padding:20px}.layout{grid-template-columns:1fr;gap:32px}.search-row{display:block}.search-row gcds-button{display:block;margin-top:16px}h1{font-size:2rem}aside{padding:20px}} ``` 코드 참조 - 레이아웃의 중단점과 제목 밑줄의 형태는 이 예제만을 위한 설정이며, 공식 토큰이 추가된 것은 아닙니다. ## Canada.ca 디자인 시스템 에이전트 설정 ### 구현 시작점 로컬 미리보기는 버전이 고정된 사용자 지정 요소를 실행하며, 원격 서비스나 인증 정보가 필요하지 않습니다. ``` npm create vite@latest gc-topics -- --template vanilla cd gc-topics npm install npm install @gcds-core/components@1.6.0 # Replace src/main.js and add src/canada.css; keep
. npm run dev ``` ### 프로젝트를 위한 프롬프트 ``` GC Design System 1.6.0으로 주제 여섯 개를 다루는 준비 안내를 만드세요. 정식 타이포그래피와 토큰 CSS을 불러오고, 네이티브 입력, details, 버튼 컴포넌트를 사용하세요. 필터링 중에도 공개 상태를 유지하고, 결과 수를 알리며, 완전한 초기화 동작을 제공하세요. 필수 콘텐츠는 계속 표시하고, 샘플 설명과 공식 서비스 요건을 명확히 구분하세요. ``` ## Canada.ca 디자인 시스템 출처와 범위 GC Design System 1.6.0을 사용하는, OpenDesign 작성자의 Canada.ca 애플리케이션 연구 예제입니다. 샘플 주제는 가상의 안내이며, 정부 요건이나 공식 예약 서비스가 아닙니다. - 입력 API 필수 식별자, 레이블, 사용자 지정 이벤트입니다. - 세부 정보 API 보충 콘텐츠 공개 및 제목 규칙입니다. - 타이포그래피 글꼴 모음 및 읽기 크기입니다. - 간격 게시된 간격 시스템입니다. - 용어 및 패키지 범위 현재 패키지 네임스페이스 및 사용 맥락입니다. ## Canada.ca 디자인 시스템 관련 리소스 ### CFPB 디자인 시스템 CFPB의 편집용 그리드, 현재 타이포그래피와 기본 Expandables를 구현합니다. 작동하는 읽기 워크시트와 검증된 패키지 API, 명확한 아이덴티티 경계를 제공합니다. ### CMS 디자인 시스템 버전이 지정된 테마 변수, 실제 Review 구성 요소 API, 사용자 답변과 포커스를 유지하는 편집 및 검토 흐름을 구현하세요. ### Det Fælles Designsystem 완전한 리소스 비교를 통해 덴마크 DKFDS 테마, 실제 Sass 척도, 접근성을 고려한 표 패턴을 살펴보세요. 숫자 정렬, 제출 방식 검색, 결과 없음 상태 복구를 포함합니다. - [구현 레퍼런스](https://design-system.canada.ca/en/components/input/code/) - [출처](https://design-system.canada.ca/en/styles/colour/) - [출처](https://design-system.canada.ca/en/styles/typography/) - [출처](https://design-system.canada.ca/en/styles/spacing/) - [코드 참조](https://design-system.canada.ca/en/components/input/code/) - [코드 참조](https://design-system.canada.ca/en/styles/typography/) - [입력 API 필수 식별자, 레이블, 사용자 지정 이벤트입니다.](https://design-system.canada.ca/en/components/input/code/) - [세부 정보 API 보충 콘텐츠 공개 및 제목 규칙입니다.](https://design-system.canada.ca/en/components/details/code/) - [타이포그래피 글꼴 모음 및 읽기 크기입니다.](https://design-system.canada.ca/en/styles/typography/) - [간격 게시된 간격 시스템입니다.](https://design-system.canada.ca/en/styles/spacing/) - [용어 및 패키지 범위 현재 패키지 네임스페이스 및 사용 맥락입니다.](https://design-system.canada.ca/en/terms-of-use/)