이 예제는 @ongov/ontario-design-system-complete-styles 9.1.0을 고정하고 공개된 확장/축소 스크립트를 사용합니다. 이는 별도의 Ontario 웹 컴포넌트 런타임이 아니라 HTML/CSS 구현입니다. 패키지의 내보내기 맵은 컴파일된 테마를 styles/css/compiled/ontario-theme.min.css에서 제공합니다. 경로 중간에 dist를 더한 잘못된 심층 가져오기는 최신 번들러에서 실패합니다.
아코디언 규칙 포함
검토한 9.1.0 패키지에서는 컴파일된 테마에 이 예제에서 사용하는 아코디언 선택자가 포함되어 있지 않습니다. 따라서 페이지에는 제공된 CSS에 패키지 자체의 ontario-accordion.scss에서 컴파일한 규칙을 포함합니다. 해당 심층 JavaScript 경로는 내보내기 대상이 아니므로, 공개된 dist/scripts 디렉터리의 스크립트를 복사합니다. 이는 선택적인 시각적 다듬기가 아니라 빌드에 필요한 구체적인 요구 사항입니다.
Ontario 디자인 시스템 Ontario 타이포그래피 및 계층 구조
의도된 글꼴 조합 유지
공개된 테마는 제목에 Raleway Modified를, 일반 텍스트에 Open Sans를 사용합니다. 미리보기에는 페이지에서 사용하는 일반 두께 400 및 700 글꼴 파일이 포함되어 있습니다. 따라서 외부 글꼴에 의존하지 않으면서도 특징적인 제목 글자 형태를 유지할 수 있습니다. 글꼴이 로드된 후 타이포그래피를 검토하세요. 대체 글꼴로 표시하면 줄바꿈과 아코디언 제목의 상대적인 굵기가 달라질 수 있습니다.
단계를 한눈에 파악하기 쉽게 구성하세요
제목은 하나의 작업을 소개하고, 도입부는 가이드 사용 방법을 설명하며, 세 개의 단계 제목은 명확한 순서를 제시합니다. 각 패널에는 보충 문단과 목록이 들어갑니다. 필수 참여 및 접근 정보는 숨겨진 패널을 찾아야만 볼 수 있게 해서는 안 되므로, 옆에 있는 안내는 계속 표시합니다. 계층 구조는 콘텐츠 모델의 일부이지, 모든 문장을 제목으로 만들 이유가 아닙니다.
Ontario 디자인 시스템 색상 역할과 컴포넌트의 기능적 시각 단서
링크와 포커스에 서로 다른 역할 부여
내보낸 링크 색상은 #0066CC이며, 호버·활성·방문 상태에는 각각 별도의 색상이 사용됩니다. 포커스 색상은 #009ADB입니다. 아코디언에는 표시되는 라벨, 방향 아이콘, 확장 상태가 함께 있으며, 파란색 글자만으로 동작을 설명하지 않습니다. 회색 경계선은 모든 문단을 개별 카드로 만들지 않으면서 단계를 구분합니다.
게시된 간격 단계를 사용합니다
간격 표는 0부터 5rem까지 이름이 지정된 중간 단계와 함께 제시합니다. 예시에는 공식 컴포넌트 규칙을 중심으로 직접 작성한 2열 레이아웃을 적용했습니다. 760px에서의 레이아웃 전환은 이 가이드에 포함된 구성상의 결정이며, 새로운 Ontario 중단점으로 안내하지 않습니다. 공식 중단점은 참고 표에 별도로 기록되어 있습니다.
Ontario 디자인 시스템 아코디언 구조와 상태
각 버튼을 해당 콘텐츠에 연결합니다
각 단계에는 실제 버튼이 포함된 제목이 있습니다. 버튼의 aria-controls는 고유 ID가 지정된 콘텐츠 섹션 하나를 가리키며, aria-expanded는 해당 섹션의 열림 여부를 나타냅니다. 콘텐츠에서는 aria-labelledby를 사용해 버튼을 참조합니다. 기본 스크립트는 패널을 열고 닫을 때 컴포넌트 클래스와 aria-hidden을 함께 처리합니다. 중복 ID가 있으면 시각적 레이아웃이 올바르게 보여도 이 연결이 깨집니다.
버튼 ID와 콘텐츠 ID는 고유하게 지정합니다.
실제 인터랙티브 버튼을 제목으로 감쌉니다.
마크업을 버전이 지정된 스크립트의 표시 동작에 맞춥니다.
전체 단계 제어 상태를 동기화합니다
Ontario 디자인 시스템 연결된 도입부와 필수 콘텐츠
실제 버튼을 통해 단계를 엽니다
사이드바 링크는 단계를 가리킨 다음, 해당 단계가 닫혀 있으면 기본 버튼을 호출합니다. 단계가 열린 뒤에는 버튼에 포커스를 둡니다. 이렇게 하면 버튼의 expanded 속성, 제목 클래스, 콘텐츠 표시 상태가 하나의 전환 과정에서 함께 바뀝니다. 추가 핸들러는 애플리케이션 코드이며, 동작을 재현할 수 있도록 전체 코드를 제공합니다.
펼쳐 볼 가치가 있는 보충 정보를 작성합니다
직접 작성한 세 단계에는 소규모 워크숍을 위한 준비, 준비물, 후속 조치가 담겨 있습니다. 각 단계에는 구체적인 작업과 예시의 범위를 설명하는 문단이 포함됩니다. 실제 초대장이라면 목적, 접근 관련 안내, 참여 방법을 계속 표시해야 합니다. 이 패턴은 긴 가이드를 구성하기 위한 것이며, 페이지를 짧아 보이게 하려고 필수 정보를 숨겨서는 안 됩니다.
Ontario 디자인 시스템 전체 소스 코드와 검증
버전이 지정된 예제를 다시 만듭니다
Vite vanilla 프로젝트를 만들고 고정된 complete-styles 패키지를 설치한 다음, 확장/축소 스크립트를 src에 복사합니다. 루트 마운트 요소를 유지하면서 제공된 main.js와 ontario.css를 저장합니다. CSS에는 이번 릴리스용으로 컴파일된 공식 아코디언 규칙과, 명확하게 구분해 표시한 직접 작성 레이아웃 규칙이 포함됩니다. 이 HTML 구현에는 컴포넌트 등록이나 백엔드 서비스가 필요하지 않습니다.
고정된 complete-styles 패키지를 설치합니다.
확장/축소 스크립트를 복사하고 전체 진입 파일과 CSS를 저장합니다.
모든 패널을 연 다음, 링크를 통해 단계를 접었다가 다시 엽니다.
키보드 포커스, expanded 속성, 모바일 레이아웃을 확인합니다.
링크와 그룹 동작을 점검합니다
모든 단계를 열고, 모두 접기를 실행한 다음, 사이드바 링크를 사용해 가운데 단계를 다시 엽니다. 버튼의 expanded 상태와 콘텐츠 표시 여부가 일치하는지 확인합니다. 사이드바가 가이드 아래에 배치되는 모바일 너비에서도 반복합니다. 로컬 점검에서는 글꼴 파일이 로드되는지, 페이지에 가로 넘침이 없는지, 기본 스크립트에서 브라우저 오류가 발생하지 않는지도 확인합니다.
Ontario 디자인 시스템 컴포넌트 예제
main.js — 워크숍 가이드 전체 코드
직접 작성한 전체 콘텐츠, 게시된 스크립트 가져오기, 링크를 통한 열기 동작.
자바스크립트
import '@ongov/ontario-design-system-complete-styles/styles/css/compiled/ontario-theme.min.css';
import './ontario-expand-collapse.js';
import './ontario.css';
const topics=[['Plan the session','Make the purpose clear before people arrive.',['Publish the topic, duration and format in plain language.','Explain how participants can ask about access needs.','Tell people whether any preparation is optional or required.'],'In this sample workshop, participants discuss one familiar interface and identify one improvement. No personal information or application account is needed.'],['Prepare the materials','Offer content in a form people can use during and after the session.',['Use a meaningful heading structure in documents.','Give diagrams a concise written explanation.','Provide an accessible alternative to an activity that depends on dragging or precise pointer movement.'],'A simple agenda and an editable notes document are enough for this authored example. A real organizer should confirm the tools and formats with participants.'],['Follow up clearly','Make the next action explicit without overstating what has been agreed.',['Separate decisions from ideas that still need investigation.','State who owns any agreed follow-up.','Share notes through the channel agreed with participants.'],'This local example does not email participants or store a registration. It demonstrates the relationship between persistent guidance and expandable supporting content.']];
const icon=(dir)=>`<svg class="ontario-icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24"><path d="${dir==='up'?'M6 15l6-6 6 6':'M6 9l6 6 6-6'}" fill="none" stroke="currentColor" stroke-width="2.4"/></svg>`;
document.getElementById('root').innerHTML=`<main><p class="kicker">ONTARIO DESIGN SYSTEM / ORIGINAL CONTENT STUDY</p><h1>Run an inclusive workshop</h1><p class="ontario-lead-statement">Use this sample guide to prepare a small design discussion. Expand a stage for supporting details, or open all stages to read them together.</p><div class="layout"><section aria-labelledby="guide-heading"><h2 id="guide-heading">Workshop stages</h2><div class="ontario-accordions__container"><div class="ontario-accordion__controls"><button class="ontario-accordion__button--expand-all" aria-expanded="false"><span class="ontario-accordion--expand-open-all">Expand all</span><span class="ontario-accordion--expand-close-all">Collapse all</span></button></div>${topics.map(([title,intro,items,note],i)=>`<div class="ontario-accordion" id="stage-${i}"><h3 class="ontario-accordion-heading"><button class="ontario-accordion__button" id="stage-button-${i}" aria-controls="stage-content-${i}" aria-expanded="false" data-toggle="ontario-collapse"><span class="ontario-accordion__button-icon--close">${icon('up')}</span><span class="ontario-accordion__button-icon--open">${icon('down')}</span>${title}</button></h3><section class="ontario-accordion__content" id="stage-content-${i}" aria-labelledby="stage-button-${i}" aria-hidden="true" data-toggle="ontario-expander-content"><p>${intro}</p><ul>${items.map(x=>'<li>'+x+'</li>').join('')}</ul><p>${note}</p></section></div>`).join('')}</div></section><aside><h2>Keep the essentials visible</h2><p>Session purpose, access arrangements and joining instructions belong in the main invitation. Do not hide them inside a collapsed guide.</p><h3>Jump to a stage</h3><ul class="jump">${topics.map(([title],i)=>`<li><a class="stage-link" href="#stage-${i}">${title}</a></li>`).join('')}</ul><p class="note">Published Ontario 9.1.0 styles and expand/collapse script, with original content and composition. This is not an official service page.</p></aside></div></main>`;
// Drive linked opening through the native button so its ARIA state stays synchronized.
document.querySelectorAll(".stage-link").forEach(link=>link.addEventListener("click",()=>{const button=document.querySelector(link.hash+" .ontario-accordion__button");if(button.getAttribute("aria-expanded")!=="true")button.click();button.focus()}));
미리보기에서는 로컬 글꼴 파일과 함께 게시된 아코디언 스크립트를 사용합니다. 별도의 웹 컴포넌트 라이브러리는 불러오지 않습니다.
sh
npm create vite@latest ontario-guide -- --template vanilla
cd ontario-guide
npm install
npm install @ongov/[email protected]
cp node_modules/@ongov/ontario-design-system-complete-styles/dist/scripts/ontario-expand-collapse.js src/ontario-expand-collapse.js
# Replace src/main.js and add src/ontario.css. Keep <div id="root"></div>.
npm run dev
프로젝트를 위한 프롬프트
에이전트 프롬프트
complete-styles 9.1.0과 여기에 맞는 아코디언 스크립트로 Ontario 워크숍 가이드를 만듭니다. 컴포넌트 전용 아코디언 CSS, 실제 Raleway Modified/Open Sans 글꼴, 접근 가능한 버튼-콘텐츠 ID, 동기화된 펼치기/접기 동작을 포함합니다. 필수 정보는 계속 표시하고, 단계 링크는 기본 버튼을 통해 연결합니다.
05
Ontario 디자인 시스템 출처와 범위
Ontario 9.1.0 스타일과 게시된 확장/축소 스크립트를 사용해 OpenDesign에서 작성한 워크숍 가이드입니다. 콘텐츠와 페이지 구성은 직접 작성했으며, 공식 서비스 페이지가 아닙니다.
