퀸즐랜드 문서에는 여러 구현 경로가 나와 있습니다. 이 연구에서는 공개 패키지인 @qld-gov-au/qgds-bootstrap5 2.4.1과 해당 Bootstrap 모달 동작을 사용합니다. 더 최신 Lit 웹 컴포넌트 스트림을 실행한다고 주장하지 않습니다. 구현 이름과 버전을 명시해 독자가 이름이 비슷한 컴포넌트와 호환되지 않는 초기화 규칙을 혼동하지 않도록 합니다.
안정적인 예시와 개발 스트림을 구분하세요
공식 웹 컴포넌트 저장소에서는 현재 버전을 알파로 표시하고 있으며, 이전 Vanilla 경로는 별도의 참조 구현입니다. 실행 가능한 예제는 테스트를 마친 Bootstrap 기반 경로 하나만 사용합니다. 향후 마이그레이션할 때는 스타일시트 URL만 바꾸지 말고 마크업, 토큰 이름, 컴포넌트 계약을 다시 확인해야 합니다.
Queensland Government 디자인 시스템 테마 역할과 리소스 일러스트레이션
라이트 및 다크 역할을 함께 살펴보기
매개변수 표에는 실제 패키지의 라이트 및 다크 역할이 함께 포함되어 있습니다. 주요 동작, 링크 색상, 포커스 및 텍스트 역할은 표면 맥락에 따라 달라집니다. 현재 리소스 팩은 라이트 구성으로 되어 있으며, 다크 항목은 참고용 값일 뿐 페이지에 테마 전환 컨트롤이 있다는 뜻은 아닙니다.
브랜드 토큰을 새로 만들지 않고 일러스트레이션 사용하기
각 카드에는 직접 제작한 번호가 표시된 문서 그림이 있습니다. 차분한 색상의 일러스트레이션 배경 네 가지로 직접 구성한 리소스 유형을 구분합니다. 이 색상과 카드 바깥쪽의 8px 모서리 반경은 애플리케이션 스타일이며, 공개된 역할 표와는 별도로 명시되어 있습니다. 인터페이스의 기반이 되는 실제 버튼, 체크박스 스타일, 모달 스타일은 라이브러리에서 제공합니다.
Queensland Government 디자인 시스템 읽기 편한 크기와 카드 콘텐츠
공개 본문 글꼴 불러오기
패키지의 본문 역할은 산세리프 글꼴에 1rem 크기와 1.5 줄 높이를 사용합니다. 미리보기에서는 로컬 Noto Sans 글꼴을 불러오므로 원격 Google Fonts 요청에 의존하지 않습니다. 카드를 한 열로 배치해도 제목, 설명, 선택 항목 수 상태를 읽기 쉽습니다.
각 리소스에 유용한 설명 제공하기
모든 카드에는 유형, 예상 읽기 시간, 구체적인 제목, 간단한 목적이 표시됩니다. 소요 시간은 직접 작성한 워크숍 예상치이며 사용 분석 데이터가 아닙니다. 선택 레이블에 리소스 이름을 반복해 표시하므로 보조 기술에서 따로 접하더라도 동작을 이해할 수 있습니다. 카드 전체를 모호한 클릭 대상으로 만들지 않았습니다.
Queensland Government 디자인 시스템 체크박스 선택과 파생 피드백
선택 항목이 없으면 검토 작업을 사용할 수 없게 하기
독립적인 체크박스로 리소스 네 가지를 원하는 조합으로 선택할 수 있습니다. Set에 선택한 인덱스를 저장하고, 항목 수와 검토 목록은 해당 상태에서 파생됩니다. Set이 비어 있으면 선택 항목 검토가 비활성화됩니다. 이렇게 하면 유용한 콘텐츠가 없는 대화상자가 열리는 일을 방지하면서 화면에 표시된 0개로 그 이유를 알 수 있습니다.
리소스 목록에 독립적인 체크박스를 사용합니다.
대화상자와 동일한 데이터에서 선택 항목 수를 계산합니다.
각 체크박스 레이블에 리소스 이름을 포함합니다.
선택 항목이 바뀌면 이전 확인 결과 지우기
Queensland Government 디자인 시스템 검토 대화상자와 포커스 복귀
검토 경계에는 네이티브 모달 사용하기
Bootstrap Modal 인스턴스는 제목을 레이블로 지정한 대화상자를 엽니다. 본문에는 현재 선택된 리소스 이름이 표시되고, 작업 버튼을 통해 편집을 계속하거나 로컬에서 확인할 수 있습니다. Escape 키와 닫기 컨트롤로 대화상자를 닫습니다. 네이티브 hidden 이벤트가 발생하면 애플리케이션은 포커스를 선택 항목 검토 버튼으로 되돌립니다.
불필요한 전환 경합 방지하기
이 예제에서는 선택 사항인 페이드 클래스를 사용하지 않습니다. 따라서 표시 전환 중에 빠르게 확인을 누르거나 Escape 키를 눌러도 동작이 무시되지 않고 대화상자가 즉시 닫힙니다. 모달의 포커스 관리와 백드롭 동작은 그대로 사용할 수 있습니다. 검토 작업의 적용 여부를 이해하는 데 애니메이션이 꼭 필요해서는 안 됩니다.
Queensland Government 디자인 시스템 완성된 리소스 팩 구현
동일한 로컬 학습 환경 재구성하기
Vite vanilla 프로젝트를 만들고 고정 버전의 QGDS Bootstrap 패키지를 Bootstrap 및 Noto Sans와 함께 설치합니다. 추측한 깊은 dist 경로를 가져오는 대신 패키지가 내보내는 qld.bootstrap.css 경로를 사용합니다. 전체 진입 파일과 queensland.css를 루트 마운트 요소와 함께 저장합니다. 소스에는 모든 리소스 레코드, 직접 제작한 SVG 일러스트레이션, 선택 로직, 모달 전환이 포함되어 있습니다.
고정 버전의 QGDS Bootstrap 패키지와 공개 글꼴을 설치합니다.
전체 진입 파일 및 CSS과 함께 패키지가 내보내는 스타일시트 경로를 사용합니다.
리소스 두 개를 선택한 뒤 Escape 키와 포커스 복귀를 테스트합니다.
로컬에서 확인하고 선택 항목을 수정한 뒤 이전 결과가 지워지는지 확인합니다.
모달 전환과 포커스 규칙을 명확히 정하기
QGDS Bootstrap 경로에서는 Bootstrap Modal을 사용하므로 모달의 네이티브 수명 주기에 따라 닫아야 합니다. 임의로 지연 시간을 정하지 말고 hidden.bs.modal 이벤트가 발생한 뒤 포커스를 선택 항목 검토 버튼으로 되돌립니다. 나중에 fade를 추가한다면 전환 시간을 고려하세요. 모달이 열리는 중에 즉시 닫으려는 요청은 무시될 수 있습니다.
모달을 열 때 현재 선택 항목으로 검토 목록을 만들고, 체크박스가 변경되면 이전 로컬 확인 결과를 무효화합니다. Escape 키를 누르면 선택 항목은 그대로 두고 검토 대화상자만 닫습니다. 체크박스 대상과 카드 일러스트레이션을 분리하면 카드 전체를 클릭할 때 동작이 서로 충돌하지 않고, 각 리소스에 정확한 접근성 선택 레이블을 제공할 수 있습니다.
Queensland Government 디자인 시스템 컴포넌트 예제
main.js — 리소스 선택 및 모달 검토 전체 구현
원본 데이터, 일러스트레이션, 체크박스 상태, 네이티브 모달 통합을 모두 포함합니다.
자바스크립트
import Modal from 'bootstrap/js/dist/modal';
import '@qld-gov-au/qgds-bootstrap5/qld.bootstrap.css';
import '@fontsource/noto-sans/latin-400.css';
import '@fontsource/noto-sans/latin-700.css';
import './queensland.css';
const resources=[['Conversation planner','A short structure for a useful team discussion.','Guide','10 min'],['Observation notes','Capture what happened before interpreting why.','Worksheet','15 min'],['Decision record','Keep a reasoned account of the choice and its limits.','Template','10 min'],['Review checklist','Check content, keyboard behavior and narrow layouts.','Checklist','20 min']];document.getElementById('root').innerHTML=`<main><p class="eyebrow">QUEENSLAND DESIGN SYSTEM / ORIGINAL RESOURCE STUDY</p><h1>Build a workshop resource pack</h1><p class="lead">Choose useful sample resources, then review your local selection. No files are requested or sent.</p><div class="selection-bar"><p id="count" role="status">0 resources selected</p><button id="review" class="btn btn-primary" disabled>Review selection</button></div><div class="resource-grid">${resources.map(([title,desc,type,time],i)=>`<article class="resource-card"><div class="art art-${i}" aria-hidden="true"><span>${String(i+1).padStart(2,'0')}</span><svg viewBox="0 0 160 90"><rect x="20" y="10" width="120" height="70" rx="4"/><path d="M38 30h84M38 45h58M38 60h70"/></svg></div><div class="card-body"><p class="meta">${type} · ${time}</p><h2>${title}</h2><p>${desc}</p><div class="form-check"><input class="form-check-input" type="checkbox" value="${i}" id="resource-${i}"><label class="form-check-label" for="resource-${i}">Add ${title.toLowerCase()}</label></div></div></article>`).join('')}</div><div id="review-modal" class="modal" tabindex="-1" aria-labelledby="review-heading" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><div class="modal-header"><h2 id="review-heading" class="modal-title fs-4">Review your resource pack</h2><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close review"></button></div><div class="modal-body"><p>These original resources form a local planning list.</p><ul id="review-list"></ul><p class="small">This preview does not produce files or contact a service.</p></div><div class="modal-footer"><button class="btn btn-secondary" data-bs-dismiss="modal">Keep editing</button><button id="confirm" class="btn btn-primary">Confirm local list</button></div></div></div></div><section id="result" hidden role="status"><h2>Local list ready</h2><p id="result-text"></p><button id="clear" class="btn btn-secondary">Clear the list</button></section></main>`;const selected=new Set();const $=id=>document.getElementById(id);const modal=new Modal($('review-modal'));document.querySelectorAll('.form-check-input').forEach(input=>input.addEventListener('change',()=>{const i=Number(input.value);input.checked?selected.add(i):selected.delete(i);$('count').textContent=selected.size+' resource'+(selected.size===1?'':'s')+' selected';$('review').disabled=!selected.size;$('result').hidden=true}));$('review').addEventListener('click',()=>{$('review-list').replaceChildren(...[...selected].sort().map(i=>{const li=document.createElement('li');li.textContent=resources[i][0];return li}));modal.show()});$('review-modal').addEventListener('hidden.bs.modal',()=>$('review').focus());$('confirm').addEventListener('click',()=>{$('result-text').textContent=[...selected].sort().map(i=>resources[i][0]).join(', ')+'. Your selection is held only until this page reloads.';$('result').hidden=false;modal.hide()});$('clear').addEventListener('click',()=>{selected.clear();document.querySelectorAll('.form-check-input').forEach(i=>i.checked=false);$('count').textContent='0 resources selected';$('review').disabled=true;$('result').hidden=true;document.querySelector('.form-check-input').focus()});
미리보기에는 공개 글꼴 에셋이 포함되어 있으며 네이티브 모달 동작을 사용합니다. 서버 측 제출 기능은 구현되어 있지 않습니다.
sh
npm create vite@latest qld-resource-pack -- --template vanilla
cd qld-resource-pack
npm install
npm install @qld-gov-au/[email protected][email protected] @fontsource/noto-sans
# Replace src/main.js and add src/queensland.css. Keep <div id="root"></div>.
npm run dev
프로젝트를 위한 프롬프트
에이전트 프롬프트
QGDS Bootstrap 2.4.1, 실제 팔레트 역할, 기본 Modal을 사용해 Queensland 리소스 팩 연구 사례를 구현하세요. 체크박스 레이블, 파생 개수, 비활성 상태의 빈 검토 화면, Escape 키 처리, 포커스 복귀, 오래된 결과 삭제를 유지하세요. 자체 제작 일러스트와 공식 테마 토큰을 구분하고, 실제 리소스가 제공되는 것처럼 표현하지 마세요.
05
Queensland Government 디자인 시스템 출처 및 범위
QGDS Bootstrap 2.4.1을 활용한 OpenDesign 자체 리소스 팩 연구 사례입니다. Bootstrap 구현이며 alpha 웹 컴포넌트 스트림이 아닙니다. 선택 항목은 로컬에만 저장되며 리소스는 전송되지 않습니다.
