# Queensland Government 디자인 시스템 ## Queensland Government 디자인 시스템 인터페이스 미리보기 일러스트 리소스를 선택하고, 기본 모달에서 이름을 확인한 뒤 로컬 목록을 편집하세요. ## Queensland Government 디자인 시스템 디자인 참고 자료 실제로 @qld-gov-au/qgds-bootstrap5 2.4.1 CSS에서 내보내는 항목과 Bootstrap 모달 동작을 사용하며, Noto Sans는 로컬에서 불러옵니다. ### 기본 라이트 팔레트 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | --qld-color-default-color-light-action-primary | #005eb8 | 실제 QGDS Bootstrap 2.4.1 라이트 역할입니다. 이에 맞는 라이트 표면과 함께 사용하세요. | | --qld-color-default-color-light-action-primary-hover | #003e96 | 실제 QGDS Bootstrap 2.4.1 라이트 역할입니다. 이에 맞는 라이트 표면과 함께 사용하세요. | | --qld-color-default-color-light-background-default | #ffffff | 실제 QGDS Bootstrap 2.4.1 라이트 역할입니다. 이에 맞는 라이트 표면과 함께 사용하세요. | | --qld-color-default-color-light-background-alt | #e3e7ea | 실제 QGDS Bootstrap 2.4.1 라이트 역할입니다. 이에 맞는 라이트 표면과 함께 사용하세요. | | --qld-color-default-color-light-focus-default | #002e85 | 실제 QGDS Bootstrap 2.4.1 라이트 역할입니다. 이에 맞는 라이트 표면과 함께 사용하세요. | | --qld-color-default-color-light-link-default | #005eb8 | 실제 QGDS Bootstrap 2.4.1 라이트 역할입니다. 이에 맞는 라이트 표면과 함께 사용하세요. | | --qld-color-default-color-light-link-visited | #551a8b | 실제 QGDS Bootstrap 2.4.1 라이트 역할입니다. 이에 맞는 라이트 표면과 함께 사용하세요. | | --qld-color-default-color-light-text-default | #353535 | 실제 QGDS Bootstrap 2.4.1 라이트 역할입니다. 이에 맞는 라이트 표면과 함께 사용하세요. | | --qld-color-default-color-light-text-heading | #000053 | 실제 QGDS Bootstrap 2.4.1 라이트 역할입니다. 이에 맞는 라이트 표면과 함께 사용하세요. | ### 기본 다크 팔레트 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | --qld-color-default-color-dark-action-primary | #84d3ff | 실제로 짝을 이루는 다크 역할입니다. 의도된 조합인지 확인하지 않고 라이트 전경색을 다크 표면에 재사용하지 마세요. | | --qld-color-default-color-dark-action-primary-hover | #a6f7ff | 실제로 짝을 이루는 다크 역할입니다. 의도된 조합인지 확인하지 않고 라이트 전경색을 다크 표면에 재사용하지 마세요. | | --qld-color-default-color-dark-background-default | #005eb8 | 실제로 짝을 이루는 다크 역할입니다. 의도된 조합인지 확인하지 않고 라이트 전경색을 다크 표면에 재사용하지 마세요. | | --qld-color-default-color-dark-background-alt | #001d74 | 실제로 짝을 이루는 다크 역할입니다. 의도된 조합인지 확인하지 않고 라이트 전경색을 다크 표면에 재사용하지 마세요. | | --qld-color-default-color-dark-focus-default | #c6ffff | 실제로 짝을 이루는 다크 역할입니다. 의도된 조합인지 확인하지 않고 라이트 전경색을 다크 표면에 재사용하지 마세요. | | --qld-color-default-color-dark-link-default | #ffffff | 실제로 짝을 이루는 다크 역할입니다. 의도된 조합인지 확인하지 않고 라이트 전경색을 다크 표면에 재사용하지 마세요. | | --qld-color-default-color-dark-link-visited | #f2cdff | 실제로 짝을 이루는 다크 역할입니다. 의도된 조합인지 확인하지 않고 라이트 전경색을 다크 표면에 재사용하지 마세요. | | --qld-color-default-color-dark-text-default | #ffffff | 실제로 짝을 이루는 다크 역할입니다. 의도된 조합인지 확인하지 않고 라이트 전경색을 다크 표면에 재사용하지 마세요. | | --qld-color-default-color-dark-text-heading | #ffffff | 실제로 짝을 이루는 다크 역할입니다. 의도된 조합인지 확인하지 않고 라이트 전경색을 다크 표면에 재사용하지 마세요. | ### 본문, 모서리 및 모달 기하 | 이름 / 규칙 | 값 / 구성 | 용도 | | --- | --- | --- | | --qld-body-font-family | var(--qld-font-sans-serif) | 내보낸 구현 값입니다. 원본 리소스 일러스트의 색상과 8px 카드 모서리는 예시를 위한 선택 사항이며, 공식 테마 토큰이 추가된 것은 아닙니다. | | --qld-body-font-size | 1rem | 내보낸 구현 값입니다. 원본 리소스 일러스트의 색상과 8px 카드 모서리는 예시를 위한 선택 사항이며, 공식 테마 토큰이 추가된 것은 아닙니다. | | --qld-body-line-height | 1.5 | 내보낸 구현 값입니다. 원본 리소스 일러스트의 색상과 8px 카드 모서리는 예시를 위한 선택 사항이며, 공식 테마 토큰이 추가된 것은 아닙니다. | | --qld-border-radius | .25rem | 내보낸 구현 값입니다. 원본 리소스 일러스트의 색상과 8px 카드 모서리는 예시를 위한 선택 사항이며, 공식 테마 토큰이 추가된 것은 아닙니다. | | --qld-border-radius-sm | .25rem | 내보낸 구현 값입니다. 원본 리소스 일러스트의 색상과 8px 카드 모서리는 예시를 위한 선택 사항이며, 공식 테마 토큰이 추가된 것은 아닙니다. | | --qld-border-radius-lg | .25rem | 내보낸 구현 값입니다. 원본 리소스 일러스트의 색상과 8px 카드 모서리는 예시를 위한 선택 사항이며, 공식 테마 토큰이 추가된 것은 아닙니다. | | --qld-border-radius-xl | 1rem | 내보낸 구현 값입니다. 원본 리소스 일러스트의 색상과 8px 카드 모서리는 예시를 위한 선택 사항이며, 공식 테마 토큰이 추가된 것은 아닙니다. | | --qld-border-radius-xxl | 2rem | 내보낸 구현 값입니다. 원본 리소스 일러스트의 색상과 8px 카드 모서리는 예시를 위한 선택 사항이며, 공식 테마 토큰이 추가된 것은 아닙니다. | | --qld-border-radius-pill | 50rem | 내보낸 구현 값입니다. 원본 리소스 일러스트의 색상과 8px 카드 모서리는 예시를 위한 선택 사항이며, 공식 테마 토큰이 추가된 것은 아닙니다. | | --qld-modal-border-radius | var(--qld-border-radius-lg) | 내보낸 구현 값입니다. 원본 리소스 일러스트의 색상과 8px 카드 모서리는 예시를 위한 선택 사항이며, 공식 테마 토큰이 추가된 것은 아닙니다. | | --qld-modal-title-line-height | 1.5 | 내보낸 구현 값입니다. 원본 리소스 일러스트의 색상과 8px 카드 모서리는 예시를 위한 선택 사항이며, 공식 테마 토큰이 추가된 것은 아닙니다. | ## Queensland Government 디자인 시스템 전체 가이드 실제 인터페이스를 위해 이 시스템을 선택하고 적용하고 검토하는 실용 가이드. 완전한 안내와 구현 시작점, 소스 링크. ## Queensland Government 디자인 시스템 퀸즐랜드 구현 선택 ### 런타임을 정확히 명시하세요 > 퀸즐랜드 문서에는 여러 구현 경로가 나와 있습니다. 이 연구에서는 공개 패키지인 @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개로 그 이유를 알 수 있습니다. - 리소스 목록에 독립적인 체크박스를 사용합니다. - 대화상자와 동일한 데이터에서 선택 항목 수를 계산합니다. - 각 체크박스 레이블에 리소스 이름을 포함합니다. ### 선택 항목이 바뀌면 이전 확인 결과 지우기 로컬에서 확인한 뒤 다른 리소스를 선택하거나 선택 해제하면 이전 결과를 숨깁니다. 편집된 목록을 반영하지 않는 요약이 계속 표시되는 일을 방지합니다. 목록을 비우면 Set과 실제 체크박스 입력값을 모두 초기화한 다음 첫 번째 선택 항목으로 포커스를 돌려보냅니다. 미리보기에서는 파일을 만들거나 전송하지 않습니다. ## Queensland Government 디자인 시스템 검토 대화상자와 포커스 복귀 ### 검토 경계에는 네이티브 모달 사용하기 Bootstrap Modal 인스턴스는 제목을 레이블로 지정한 대화상자를 엽니다. 본문에는 현재 선택된 리소스 이름이 표시되고, 작업 버튼을 통해 편집을 계속하거나 로컬에서 확인할 수 있습니다. Escape 키와 닫기 컨트롤로 대화상자를 닫습니다. 네이티브 hidden 이벤트가 발생하면 애플리케이션은 포커스를 선택 항목 검토 버튼으로 되돌립니다. ### 불필요한 전환 경합 방지하기 이 예제에서는 선택 사항인 페이드 클래스를 사용하지 않습니다. 따라서 표시 전환 중에 빠르게 확인을 누르거나 Escape 키를 눌러도 동작이 무시되지 않고 대화상자가 즉시 닫힙니다. 모달의 포커스 관리와 백드롭 동작은 그대로 사용할 수 있습니다. 검토 작업의 적용 여부를 이해하는 데 애니메이션이 꼭 필요해서는 안 됩니다. ## Queensland Government 디자인 시스템 완성된 리소스 팩 구현 ### 동일한 로컬 학습 환경 재구성하기 Vite vanilla 프로젝트를 만들고 고정 버전의 QGDS Bootstrap 패키지를 Bootstrap 및 Noto Sans와 함께 설치합니다. 추측한 깊은 dist 경로를 가져오는 대신 패키지가 내보내는 qld.bootstrap.css 경로를 사용합니다. 전체 진입 파일과 queensland.css를 루트 마운트 요소와 함께 저장합니다. 소스에는 모든 리소스 레코드, 직접 제작한 SVG 일러스트레이션, 선택 로직, 모달 전환이 포함되어 있습니다. 1. 고정 버전의 QGDS Bootstrap 패키지와 공개 글꼴을 설치합니다. 2. 전체 진입 파일 및 CSS과 함께 패키지가 내보내는 스타일시트 경로를 사용합니다. 3. 리소스 두 개를 선택한 뒤 Escape 키와 포커스 복귀를 테스트합니다. 4. 로컬에서 확인하고 선택 항목을 수정한 뒤 이전 결과가 지워지는지 확인합니다. ### 모달 전환과 포커스 규칙을 명확히 정하기 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=`

QUEENSLAND DESIGN SYSTEM / ORIGINAL RESOURCE STUDY

Build a workshop resource pack

Choose useful sample resources, then review your local selection. No files are requested or sent.

0 resources selected

${resources.map(([title,desc,type,time],i)=>`

${type} · ${time}

${title}

${desc}

`).join('')}
`;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()}); ``` 코드 참조 - 패키지 스타일시트는 내보낸 진입점을 사용합니다. 로컬 확인은 파일 다운로드나 서비스 제출이 아닙니다. ### queensland.css — 직접 구성한 카드 레이아웃 네이티브 컴포넌트 스타일을 기반으로 반응형 카드와 장식용 문서 그림을 구성합니다. ``` body{margin:0}main{max-width:1200px;padding:32px;margin:auto}.eyebrow{font-size:14px;font-weight:700;letter-spacing:.04em}h1{max-width:26ch}.lead{max-width:65ch}.selection-bar{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;border-bottom:1px solid #ccc;margin-bottom:24px}.selection-bar p{margin:0;font-weight:700}.resource-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.resource-card{border:1px solid #ccc;border-radius:8px;overflow:hidden}.card-body{padding:24px}.card-body h2{font-size:24px;line-height:1.3}.meta{font-size:14px}.art{height:130px;display:flex;align-items:center;justify-content:space-between;padding:24px;background:#eaf4f7;color:#005e85}.art-1{background:#eef3ea;color:#3b6738}.art-2{background:#f4eef7;color:#6b427b}.art-3{background:#faf0e4;color:#8c592b}.art span{font-size:36px;font-weight:700}.art svg{width:160px;height:90px;fill:none;stroke:currentColor;stroke-width:3}.form-check{margin-top:24px}.modal-title{margin:0}.modal li{margin:12px 0}#result{margin-top:32px;padding:24px;background:#eef5f3;border-left:4px solid #20775b}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.resource-grid{grid-template-columns:1fr}.selection-bar{align-items:start;flex-direction:column}.art{height:110px}h1{font-size:34px}} ``` 코드 참조 - 일러스트레이션 색상과 카드 바깥쪽 형태는 애플리케이션에서 직접 정한 디자인입니다. ## Queensland Government 디자인 시스템 에이전트 설정 ### 구현 시작점 미리보기에는 공개 글꼴 에셋이 포함되어 있으며 네이티브 모달 동작을 사용합니다. 서버 측 제출 기능은 구현되어 있지 않습니다. ``` npm create vite@latest qld-resource-pack -- --template vanilla cd qld-resource-pack npm install npm install @qld-gov-au/qgds-bootstrap5@2.4.1 bootstrap@5.3.8 @fontsource/noto-sans # Replace src/main.js and add src/queensland.css. Keep
. npm run dev ``` ### 프로젝트를 위한 프롬프트 ``` QGDS Bootstrap 2.4.1, 실제 팔레트 역할, 기본 Modal을 사용해 Queensland 리소스 팩 연구 사례를 구현하세요. 체크박스 레이블, 파생 개수, 비활성 상태의 빈 검토 화면, Escape 키 처리, 포커스 복귀, 오래된 결과 삭제를 유지하세요. 자체 제작 일러스트와 공식 테마 토큰을 구분하고, 실제 리소스가 제공되는 것처럼 표현하지 마세요. ``` ## Queensland Government 디자인 시스템 출처 및 범위 QGDS Bootstrap 2.4.1을 활용한 OpenDesign 자체 리소스 팩 연구 사례입니다. Bootstrap 구현이며 alpha 웹 컴포넌트 스트림이 아닙니다. 선택 항목은 로컬에만 저장되며 리소스는 전송되지 않습니다. - 구현 경로 Vanilla, Bootstrap 및 개발 중인 웹 컴포넌트 옵션. - 버전이 지정된 Bootstrap 소스 게시된 CSS, 에셋 및 구현. - 카드 안내 콘텐츠 계층 구조 및 카드 사용법. - 웹 컴포넌트 상태 명시된 alpha 상태와 별도의 통합 계약. ## Queensland Government 디자인 시스템 관련 리소스 ### Ripple 완성된 워크숍 타임라인에서 Ripple의 실제 색상 역할, 14단계 간격 척도, 반응형 타이포그래피 참고 자료를 살펴보세요. 점진적 표시, 진행 상황, 다음 단계의 키보드 포커스를 제공합니다. ### Scottish Government 디자인 시스템 스코틀랜드 정부의 반응형 글자 크기, 간격, 색상 역할을 적용한 네이티브 글자 수 입력 필드입니다. 제한을 초과한 텍스트를 보존하고 수정할 수 있습니다. ### Singapore Government 디자인 시스템 최신 SGDS Web Components와 실제 반응형 토큰, 주간 및 야간 테마, 로컬 계획과 동기화되는 기본 수량 제한 기능을 사용하세요. - [구현 레퍼런스](https://github.com/qld-gov-au/qgds-bootstrap5) - [출처](https://github.com/qld-gov-au/qgds-bootstrap5) - [코드 참조](https://github.com/qld-gov-au/qgds-bootstrap5) - [코드 참조](https://www.designsystem.qld.gov.au/components/card/tabs/design) - [구현 경로 Vanilla, Bootstrap 및 개발 중인 웹 컴포넌트 옵션.](https://www.designsystem.qld.gov.au/get-started/developing) - [버전이 지정된 Bootstrap 소스 게시된 CSS, 에셋 및 구현.](https://github.com/qld-gov-au/qgds-bootstrap5) - [카드 안내 콘텐츠 계층 구조 및 카드 사용법.](https://www.designsystem.qld.gov.au/components/card/tabs/design) - [웹 컴포넌트 상태 명시된 alpha 상태와 별도의 통합 계약.](https://github.com/qld-gov-au/qgds-web-components)