이 샘플은 @abgov/web-components 3.0.0을 실행합니다. 해당 JavaScript를 가져오면 사용자 지정 요소가 등록되고, index.css를 가져오면 전역 토큰 레이어가 적용됩니다. 원시 HTML API에서는 goa 접두사가 붙은 요소를 사용하고, React 예시에서는 이벤트 표면이 다른 Goab 래퍼를 사용합니다. React onChange 속성을 원시 사용자 지정 요소에 그대로 복사하지 마세요.
패키지 버전과 디자인 버전을 구분하세요
패키지 버전과 컴포넌트 스타일 버전은 서로 다른 필드입니다. 일부 컨트롤에는 별도의 버전 속성이 문서화되어 있습니다. 이 예제에서는 토큰 값을 다른 버전 기준으로 설명하면서 스타일 버전을 조용히 바꾸는 대신, 고정된 패키지의 기본값을 유지합니다. 표에는 이 빌드에서 사용한 실제 라이트 테마 내보내기 값이 기록되어 있습니다.
Alberta 디자인 시스템 역할, 리듬 및 타이포그래피
색상으로 상태를 알리세요
기본 작업과 진행 강조 색상에는 기본 인터랙션 역할을 사용합니다. 검토 중 오류가 발생하면 유용한 안내와 함께 긴급 상태 텍스트를 표시하고, 로컬 검토가 완료되면 성공 색상의 보조 표면을 사용합니다. 성공 색상은 로컬 검토 상태를 나타내며, 정부 서비스에 제출된 애플리케이션을 뜻하지 않습니다. 색상에 의존하지 않아도 텍스트 레이블과 숫자 수치로 같은 정보를 전달합니다.
글꼴 사용 범위를 명시하세요
공개된 글꼴 패밀리의 첫 글꼴은 Acumin이며, 스타일시트에는 외부 호스팅 글꼴 선언이 포함되어 있습니다. 미리보기에서는 Arial 대체 글꼴을 명시적으로 사용하고 원격 글꼴 요청을 제거합니다. Acumin을 재배포하지는 않습니다. 승인된 브랜드 글꼴을 불러올 수 있도록 토큰 참조에는 실제 글꼴 패밀리 이름을 그대로 유지합니다. 대체 글꼴을 라이선스가 있는 글꼴로 바꿀 때는 줄바꿈을 다시 확인하세요.
Alberta 디자인 시스템 체크박스 레이블 및 설명
독립적인 작업에는 각각 별도의 선택 항목을 사용하세요
기본 goa-checkbox 컨트롤 네 개로 어떤 순서로든 검토할 수 있는 준비 항목을 나타냅니다. 각 컨트롤에는 고유한 name, 화면에 표시되는 텍스트, 용도를 설명하는 문구가 있습니다. 라디오 컨트롤은 하나만 선택할 수 있다는 의미를 주므로 이 작업을 잘못 나타냅니다. 실제 서비스에서는 가상의 준비 항목을 조사에 기반한 안내로 바꿔야 합니다.
각 체크박스에 고유하고 변경되지 않는 name을 지정하세요.
화면에 표시되는 레이블은 간결하게, 설명은 구체적으로 작성하세요.
여러 항목을 선택할 수 있는 경우에만 독립형 체크박스를 사용하세요.
사용자 지정 이벤트 페이로드 읽기
원시 웹 컴포넌트는 event.detail에 name, checked, value를 담아 _change를 발생시킵니다. 애플리케이션은 checked 불리언 값을 사용해 선택한 인덱스의 Set을 업데이트합니다. 레이블 텍스트에서 상태를 추론하거나 내부의 작은 입력 요소를 클릭하도록 요구하지 않습니다. 따라서 화면에 표시되는 레이블을 클릭하거나 키보드로 선택해도 동일한 상태 전환이 이루어집니다.
Alberta 디자인 시스템 진행 상황 및 검토 상태
선택 항목을 기준으로 진행 상황을 계산하세요
개수와 기본 HTML 진행률 요소는 동일한 Set에서 계산됩니다. 두 항목을 선택하면 네 개 중 두 개로 표시되고, 컨트롤을 초기화하면 두 표시기 모두 0으로 돌아갑니다. 진행률 요소에는 접근 가능한 이름이 있고, 그 옆 상태 텍스트에는 명확한 개수가 표시됩니다. 업로드, 네트워크 요청 또는 완료 타이머를 흉내 내지 않습니다.
수정 후에는 이전 요약을 무효화하세요
Alberta 디자인 시스템 반응형 체크리스트 구성
작업과 맥락을 알아보기 쉽게 유지하세요
데스크톱 레이아웃에서는 체크리스트 옆에 진행 상황 패널을 배치합니다. 화면 폭이 좁으면 문서 순서에 따라 컨트롤 뒤에 패널이 표시됩니다. 작업 레이블은 읽기 쉬운 크기를 유지하고, 설명은 자연스럽게 다음 줄로 이어집니다. 측면 패널의 파란색 선은 절제된 안내 표식으로, 또 다른 경쟁 요소가 되는 작업을 만들지 않습니다.
상호작용 대상을 충분히 크게 유지하세요
컴포넌트 라이브러리는 체크박스와 버튼의 상호작용 스타일을 제공합니다. 애플리케이션 CSS은 기본 클릭 영역을 바꾸지 않고 간격과 주변 그리드를 제어합니다. 작은 화면에서는 두 작업 버튼이 줄바꿈될 수 있습니다. 검토는 기본 작업이고, 선택 항목 해제는 실제 애플리케이션의 다음 단계처럼 보이지 않도록 보조 스타일을 적용합니다.
Alberta 디자인 시스템 체크리스트 전체 구현
전체 소스 실행
Vite 바닐라 프로젝트를 만들고, 버전이 고정된 web-components 패키지를 설치한 다음 제공된 엔트리 파일과 CSS을 저장합니다. 루트 마운트 요소는 그대로 둡니다. JavaScript에는 직접 작성한 네 가지 작업, 기본 이벤트 바인딩, 파생된 개수, 검토 및 초기화 전환이 모두 포함됩니다. 계정, 비공개 엔드포인트, 외부 데이터셋은 필요하지 않습니다.
@abgov/web-components 3.0.0을 설치하고 JavaScript와 index.css를 가져옵니다.
루트 마운트 요소가 포함된 전체 엔트리 파일과 alberta.css를 저장합니다.
여러 작업을 선택하고 파생된 진행률을 확인합니다.
검토하고 선택 항목을 수정한 다음 기본 선택 항목을 모두 해제합니다.
컴포넌트 이벤트와 체크리스트 정책 분리
선택 상태의 기준으로 원시 _change 이벤트의 event.detail.checked를 사용합니다. React 래퍼의 props와 원시 goa-checkbox 이벤트는 서로 다른 인터페이스입니다. 페이로드에 맞게 조정하지 않고 핸들러를 복사하면 진행률 표시가 체크박스의 실제 상태와 동기화되지 않을 수 있습니다.
체크리스트에서 최소 한 항목을 선택하도록 하는 것은 애플리케이션 정책이지 기본 체크박스 규칙이 아닙니다. 하나의 선택 Set에서 개수, 진행률 값, 검토 문구를 도출합니다. 선택 항목을 해제할 때는 Set뿐 아니라 각 사용자 지정 요소의 checked 속성도 초기화합니다. 선택 사항을 수정하면 이전 검토 결과를 즉시 지워 이전 선택을 설명하는 문구가 남지 않도록 합니다. 실제 준비 서비스에서는 미완료 체크리스트를 허용할 수도 있으므로, 진행률을 필수 조건으로 삼기 전에 정책을 정하세요.
Alberta 디자인 시스템 컴포넌트 예시
main.js — 기본 체크리스트 전체 코드
등록, 직접 작성한 작업 콘텐츠, 선택 처리, 검토 및 초기화 전환이 모두 포함됩니다.
자바스크립트
import '@abgov/web-components';
import '@abgov/web-components/index.css';
import './alberta.css';
document.getElementById('root').innerHTML=`<main><p class="eyebrow">ALBERTA DESIGN SYSTEM / COMPONENT STUDY</p><h1>Prepare a submission</h1><p class="lead">Track an original sample checklist. These preparation steps are illustrative, not eligibility rules for a government program.</p><div class="workspace"><section aria-labelledby="tasks-heading"><h2 id="tasks-heading">Your preparation checklist</h2><p>Check each item when you have reviewed it.</p><div id="tasks"></div><div class="actions"><goa-button id="review">Review checklist</goa-button><goa-button id="reset" type="tertiary">Clear selections</goa-button></div><p id="error" role="alert" hidden>Select at least one item before reviewing.</p><section id="result" hidden tabindex="-1" aria-labelledby="result-heading"><h3 id="result-heading">Local review</h3><p id="result-text"></p></section></section><aside><p class="eyebrow">YOUR PROGRESS</p><strong id="total">0 of 4</strong><progress id="progress" value="0" max="4" aria-label="Reviewed preparation items"></progress><p id="status" role="status">No items reviewed yet.</p><h3>What happens next</h3><p>Your selections stay only in this page. Review summarizes your progress; it does not submit an application.</p><ul><li>Use the real service’s current instructions.</li><li>Do not enter personal information in a public example.</li><li>Recheck the summary after changing a selection.</li></ul></aside></div></main>`;
const labels=['Read the service instructions','Identify questions to ask','Check your own supporting information','Choose a time to complete the task'];const selected=new Set();const $=id=>document.getElementById(id);const controls=labels.map((text,i)=>{const el=document.createElement('goa-checkbox');el.setAttribute('name','step-'+i);el.setAttribute('text',text);el.setAttribute('description',['Understand the actual task before collecting information.','Record anything that needs clarification from the service.','Use the real service’s requirements, not this sample list.','Leave enough time to review the information you provide.'][i]);el.addEventListener('_change',e=>{e.detail.checked?selected.add(i):selected.delete(i);update()});$('tasks').append(el);return el});function update(){$('total').textContent=selected.size+' of 4';$('progress').value=selected.size;$('status').textContent=selected.size===4?'All sample items reviewed.':selected.size+' sample items reviewed.';$('result').hidden=true;$('error').hidden=true}$('review').addEventListener('_click',()=>{if(!selected.size){$('error').hidden=false;controls[0].shadowRoot.querySelector('input')?.focus();return}$('result-text').textContent=selected.size+' reviewed: '+[...selected].sort().map(i=>labels[i]).join('; ')+'. This is a local summary only.';$('result').hidden=false;$('result').focus()});$('reset').addEventListener('_click',()=>{selected.clear();controls.forEach(el=>el.setAttribute('checked','false'));update()});
로컬 미리보기에서는 사용하지 않는 외부 글꼴 가져오기를 생략합니다. 전체 패키지 스타일시트에는 외부 글꼴 선언이 포함될 수 있지만, 재정의 설정을 통해 이 예제에서는 Arial을 사용합니다.
04
Alberta 디자인 시스템 에이전트 설정
구현 시작점
버전이 고정된 기본 컨트롤은 제출 백엔드 없이 로컬에서 브라우저 테스트를 마쳤습니다.
sh
npm create vite@latest alberta-checklist -- --template vanilla
cd alberta-checklist
npm install
npm install @abgov/[email protected]
# Replace src/main.js and add src/alberta.css. Keep <div id="root"></div>.
npm run dev
프로젝트를 위한 프롬프트
에이전트 프롬프트
web-components 3.0.0, 실제 시맨틱 CSS 역할, 명시적인 글꼴 라이선스 범위를 사용해 Alberta 준비 체크리스트를 구성합니다. 기본 체크박스 설명을 사용하고, 선택 상태에서 진행률을 도출하며, 항목이 비어 있으면 검토를 거부하고, 수정 후 오래된 요약을 지우며, 실제 컨트롤을 초기화합니다. 모든 결과는 로컬에서 처리하고 직접 작성한 작업은 예시임을 분명히 표시합니다.
05
Alberta 디자인 시스템 출처 및 범위
Alberta web components 3.0.0과 명시적인 Arial 대체 글꼴을 사용하는 OpenDesign 컴포넌트 예제입니다. 직접 작성한 작업은 허구이며 정부의 자격 요건이나 제출 요건을 정의하지 않습니다.
