네이티브 ONS 73.13.1 Checkbox 및 Mutually Exclusive CSS/JavaScript입니다. 질문, 앱 검증/검토 및 명시적인 Arial 대체 글꼴은 독자적으로 작성했습니다. · 구현 레퍼런스
02
ONS 디자인 시스템 디자인 레퍼런스
공개 서비스 매뉴얼을 기준으로 확인한 ONS Design System 73.13.1 컴파일 CSS, JavaScript 및 Sass 변수입니다. 예제에서는 네이티브 Checkbox와 Mutually Exclusive 동작을 사용합니다. 독립 실행형 예제에서는 OpenSans 대신 Arial을 사용하며, 프로덕션 복사 레시피에는 패키지에 포함된 글꼴이 적용됩니다. 여행 관련 질문과 현지 검토 내용은 원본 데모 콘텐츠입니다.
ONS는 통계 자료 수집과 정보 발행을 모두 담당합니다. 설문지에서 상호 배타적인 응답은 데이터 품질과 관련된 문제입니다. 사용자가 이동 수단을 선택하는 동시에 이동하지 않았다고 답할 수 없어야 합니다. 네이티브 Mutually Exclusive 컴포넌트는 해당 선택지를 연결하고, 보조 기술이 선택 해제 동작을 안내하도록 합니다.
예제에서는 도서관 방문에 관한 자체 제작 질문과 로컬 답변 미리보기를 제공합니다. ONS의 정체성을 나타내는 그래픽은 의도적으로 사용하지 않으며, 답변을 수집한다고 주장하지도 않습니다. 실제 설문조사에는 별도의 동의, 보존 기간, 분기 처리 및 서버 측 검증이 필요합니다.
기본 글꼴은 Open Sans이며, 글자 모양을 뚜렷하게 구분하기 위해 스타일 세트 1을 선택했습니다. 네이티브 Sass 타입 매트릭스는 임의로 연속형 스케일을 만들지 않고 고정된 작은 값과 큰 값을 사용합니다. 본문 텍스트는 18px, 행간은 28px로 유지합니다. 기본 큰 클래스는 중간 중단점에서 32/44에서 48/56으로 바뀝니다.
질문이 하나인 페이지에서는 필드셋 범례 안에 h 1을 배치해 그룹의 접근 가능한 이름과 화면에 표시되는 제목을 일치시킬 수 있습니다. 그 위에 관련 없는 h 1을 하나 더 만들지 마세요. 예제에서는 서비스 맥락을 작은 단락으로 표시하고, 선택 안내는 범례 아래에 배치합니다.
독립 실행형 데모는 글꼴 누락 요청이 발생하지 않도록 Arial을 명시적으로 사용합니다. 설치 방법에서는 글꼴을 CSS와 함께 복사합니다. 도입하는 쪽에서 대체 글꼴이 아닌 게시된 OpenSans 서체를 사용하려면 이 작업이 필요합니다.
ONS는 원시 색상에 의미 변수명을 부여합니다. 텍스트는 검정색, 일반 링크는 Ocean Blue, 기본 버튼은 Leaf Green입니다. 포커스 색상은 Sun Yellow입니다. 오류에는 Ruby Red를 사용하지만, 오류 메시지에는 여전히 필요한 조치를 명시해야 합니다. 초록색 계속 버튼은 답변이 이미 검증을 통과했다는 뜻이 아닙니다.
로컬 설문은 기본 체크박스 테두리와 선택 상태 표시를 사용합니다. 모든 답변을 각각 별도의 홍보용 카드처럼 꾸미지는 않습니다. 짧고 중립적인 상단 선으로 독립된 예시를 질문과 구분하되, ONS 마스트헤드를 재현하지는 않습니다.
12열 그리드는 ons-col-8@m와 같은 클래스로 너비를 지정합니다. 740px 이상에서는 해당 클래스가 8개 열을 차지하고, 그보다 좁을 때는 같은 요소가 사용 가능한 콘텐츠 너비 전체를 채웁니다. 로컬 예시에서는 기본 열 클래스를 사용해 긴 질문이 데스크톱 화면 전체로 늘어나지 않고 읽기 좋은 너비로 줄바꿈되도록 합니다.
확인한 릴리스에서 기본 컨테이너의 최대 너비는 64.6256rem이고 가로 패딩은 1rem입니다. 공개 그리드 가이드에는 8px 기준선과 600px 간격 경계의 16/24px 거터도 설명되어 있습니다. 이러한 개념은 740px 중간 열 중단점과 구분해야 합니다. 모두에 적용되는 단일 모바일 전환 지점이 아닙니다.
답변 검토 화면은 같은 열 안에서 질문을 대체하고, 답변 변경을 선택하면 기존 컨트롤로 돌아갑니다. 페이지 이동이나 네트워크 요청 없이 값이 메모리에 유지됩니다.
실제 간격 유틸리티는 8px 기준선 설명보다 세분화되어 있습니다. 루트 글꼴 크기가 16px일 때 xs, s, m, l, xl의 하단 여백은 각각 12, 16, 20, 24, 32px입니다. 따라서 참고 자료에서는 실제 유틸리티 값을 그리드 지침과 별도로 나열합니다.
체크박스는 ons-checkbox 안에 ons-checkbox__input과 연결된 ons-checkbox__label을 사용합니다. 입력란에는 일반적인 name 및 value 속성을 유지해 기본 폼 의미가 그대로 작동하도록 합니다. 상위 ons-checkboxes__item 구조는 스타일시트가 기대하는 간격과 클릭 영역을 제공합니다.
일반 선택지는 ons-js-exclusive-group-item을 함께 사용합니다. 마지막 선택지는 대신 ons-js-exclusive-option을 사용하고, 효과를 설명하는 data-deselect-message도 포함합니다. 두 형용사 속성을 모두 갖춘 live-region span은 반드시 있어야 합니다. 단순한 장식용 마크업이 아닙니다. 이를 제거하면 기본 컨트롤러의 전제 조건이 충족되지 않습니다.
이 소스 예시는 일반 선택지 세 개와 상반되는 답변 하나를 포함한 완전한 예시입니다. 실제 질문에 맞게 명사와 값을 바꾸세요. 관련 없는 검증 컨트롤의 이름만 “exclusive”로 바꾸면 안 됩니다.
html
<fieldset class="ons-fieldset"><legend class="ons-fieldset__legend"><h1 class="ons-fieldset__legend-title">How did you travel to your local library last week?</h1></legend>
<div class="ons-js-mutually-exclusive ons-mutually-exclusive">
<p class="ons-checkboxes__label">Select all that apply</p><div class="ons-checkboxes__items"><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="walk" name="travel" value="walk" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="walk" id="walk-label">Walk or wheel</label></span></span><br><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="cycle" name="travel" value="cycle" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="cycle" id="cycle-label">Cycle</label></span></span><br><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="bus" name="travel" value="bus" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="bus" id="bus-label">Bus or tram</label></span></span><br></div>
<p class="ons-checkboxes--mutually-exclusive__item ons-u-mt-s"><span class="ons-checkboxes__label ons-u-fs-r--b" aria-hidden="true">Or</span><span class="ons-checkbox"><input type="checkbox" id="none" name="travel" value="none" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-option" data-deselect-message="Selecting this will uncheck all other options"><label class="ons-checkbox__label" for="none" id="none-label"><span class="ons-u-vh">Or, </span>I did not visit the library</label></span></p>
<span class="ons-js-exclusive-alert ons-u-vh" role="alert" aria-live="polite" data-group-adjective="deselected" data-option-adjective="deselected"></span></div></fieldset>
상반되는 선택지를 해제하는 역할은 라이브러리가 담당합니다. 예시의 간단한 애플리케이션 핸들러는 답변이 하나 이상 있는지 확인한 뒤 로컬 검토 화면을 표시할 뿐입니다. 선택된 항목이 없으면 텍스트 오류를 표시하고 연결된 메시지에 포커스를 둡니다. 오류 링크는 첫 번째 선택지로 바로 연결되어 사용자가 조치를 취할 수 있습니다.
컨트롤러는 DOM 체크박스 값뿐 아니라 캐시된 hasValue 상태도 추적합니다. checked=false만으로 초기화하면 캐시에 이전 상태가 남을 수 있습니다. 따라서 초기화 동작에서는 선택된 입력란을 각각 클릭해 기본 리스너가 모델을 업데이트하도록 한 다음 질문으로 포커스를 되돌립니다. 이는 스타일시트만 살펴봐서는 확인할 수 없는 구체적인 통합 관련 고려 사항입니다.
검토 화면에는 선택한 항목의 라벨이 목록으로 표시됩니다. 답변 변경을 선택해도 컨트롤과 선택 상태가 유지됩니다. 이 예시에는 서버가 없으므로 설문 응답이 접수되었다고 알리는 완료 화면은 표시하지 않습니다.
npm 패키지에는 컴파일된 에셋, Sass 소스, Nunjucks 매크로, 기본 페이지 템플릿이 포함되어 있습니다. 이 미리보기에서는 컴파일된 HTML 방식을 사용합니다. 공식 CSS과 main.js를 복사하고, 문서에 나온 마크업을 구성한 다음 본문 콘텐츠 뒤에 스크립트를 불러옵니다. DOM이 준비되면 스크립트가 일치하는 컴포넌트 훅을 초기화합니다.
서버 렌더링 프로젝트에서는 components의 Nunjucks 매크로 파일을 사용할 수도 있습니다. Checkbox 매크로는 체크박스 배열, 레이블, 설명, 오류 설정 및 mutuallyExclusive 설정을 받습니다. dontWrap을 설정하면 필드셋을 둘러싼 질문 컴포넌트가 담당하게 됩니다. 이는 접근 가능한 그룹 이름을 생략하는 방법이 아닙니다.
개별 Sass 파일을 선택해 가져오는 경우 먼저 시스템 변수, 헬퍼, 유틸리티, 기본 스타일, 객체를 가져온 다음 컴포넌트 규칙과 필요한 컴포넌트 종속 항목을 가져옵니다. 컴파일된 전체 CSS를 사용하면 이 소규모 독립 예시에서 종속 항목을 선택할 필요가 없습니다.
도보와 버스를 선택한 다음 “방문하지 않았습니다”를 선택합니다. 앞서 선택한 두 항목이 모두 해제되어야 합니다. 그런 다음 자전거를 선택합니다. 상반되는 답변은 해제되고 자전거는 선택된 상태로 유지되어야 합니다. 포커스가 있는 입력란에서 스페이스 키를 눌러 같은 과정을 반복하고, 시각적인 체크 표시만으로 모든 동작이 올바르다고 판단하지 말고 알림 영역도 확인합니다.
선택하지 않고 계속 진행해 오류를 확인한 다음, 유효한 답변을 검토하고 ‘답변 변경’으로 돌아오세요. 마지막으로 모순되는 답변을 선택한 뒤 재설정하고 다른 항목을 선택하세요. 이렇게 하면 네이티브 컨트롤러에 이전 상태가 남아 있는지 확인할 수 있습니다. 390px 화면에서도 페이지를 가로로 스크롤하지 않고 질문과 모든 레이블을 읽을 수 있어야 합니다.
이 테스트는 로컬 상호작용을 확인하며, 실제 서비스 설문조사의 데이터 제출, 접근성 인증 또는 통계 질문의 품질을 검증하지 않습니다. 실제 서비스를 운영하려면 모순되는 값에 대한 서버 측 검증과 응답 선택지가 빠짐없이 구성되었는지 확인하는 조사가 필요합니다.
전체 문서에 레이아웃, 컨트롤 및 초기화가 포함되어 있습니다. 링크된 예시 아카이브의 압축을 풀면 정확한 상대 경로의 벤더 에셋을 얻을 수 있습니다. 그런 다음 HTTP로 제공하세요.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ONS survey question specimen</title><link rel="stylesheet" href="vendor/ons-73.13.1/css/main.css"><style>body,input,button,select,textarea{font-family:Arial,sans-serif!important}body{margin:0}main{padding-top:32px;padding-bottom:32px}.specimen{border-top:4px solid var(--ons-color-ocean-blue);padding-top:16px}.actions{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-top:32px}[hidden]{display:none!important}.error{border-left:4px solid var(--ons-color-errors);padding:16px;margin:24px 0;color:var(--ons-color-errors)}.quiet{color:var(--ons-color-text-light)}fieldset{min-width:0}.ons-checkbox__label{max-width:100%}</style><main class="ons-container"><p class="ons-u-fs-s specimen">Independent specimen · Original library survey</p><div class="ons-grid"><div class="ons-grid__col ons-col-8@m"><section id="question"><p class="quiet">Travel · Question 1 of 1</p><div id="error" class="error" tabindex="-1" hidden><strong>Select a travel method or tell us you did not visit.</strong><p><a href="#walk">Go to the answer choices</a></p></div><form id="survey" novalidate><fieldset class="ons-fieldset"><legend class="ons-fieldset__legend"><h1 class="ons-fieldset__legend-title">How did you travel to your local library last week?</h1></legend>
<div class="ons-js-mutually-exclusive ons-mutually-exclusive">
<p class="ons-checkboxes__label">Select all that apply</p><div class="ons-checkboxes__items"><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="walk" name="travel" value="walk" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="walk" id="walk-label">Walk or wheel</label></span></span><br><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="cycle" name="travel" value="cycle" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="cycle" id="cycle-label">Cycle</label></span></span><br><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="bus" name="travel" value="bus" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="bus" id="bus-label">Bus or tram</label></span></span><br></div>
<p class="ons-checkboxes--mutually-exclusive__item ons-u-mt-s"><span class="ons-checkboxes__label ons-u-fs-r--b" aria-hidden="true">Or</span><span class="ons-checkbox"><input type="checkbox" id="none" name="travel" value="none" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-option" data-deselect-message="Selecting this will uncheck all other options"><label class="ons-checkbox__label" for="none" id="none-label"><span class="ons-u-vh">Or, </span>I did not visit the library</label></span></p>
<span class="ons-js-exclusive-alert ons-u-vh" role="alert" aria-live="polite" data-group-adjective="deselected" data-option-adjective="deselected"></span></div></fieldset><div class="actions"><button class="ons-btn" type="submit"><span class="ons-btn__inner">Review answer</span></button><button id="reset" type="button" class="ons-btn ons-btn--secondary"><span class="ons-btn__inner">Reset</span></button></div></form><p class="ons-u-mt-l ons-u-fs-s quiet">Practice only. Your selection stays in this page and is not submitted.</p></section><section id="review" hidden><h1 tabindex="-1">Review your answer</h1><h2 class="ons-u-fs-m">Travel to the library last week</h2><ul id="answer"></ul><p>No response has been sent. Return to the question to change your selection.</p><button id="change" class="ons-btn ons-btn--secondary"><span class="ons-btn__inner">Change answers</span></button></section></div></div></main><script src="vendor/ons-73.13.1/scripts/main.js"></script><script>const form=document.querySelector('#survey'),q=document.querySelector('#question'),r=document.querySelector('#review'),err=document.querySelector('#error'),checks=[...form.querySelectorAll('input[type=checkbox]')];form.onsubmit=e=>{e.preventDefault();const chosen=checks.filter(x=>x.checked);if(!chosen.length){err.hidden=false;err.focus();return}err.hidden=true;document.querySelector('#answer').replaceChildren(...chosen.map(x=>{let li=document.createElement('li');li.textContent=document.querySelector('label[for="'+x.id+'"]').textContent.replace(/^Or, /,'');return li}));q.hidden=true;r.hidden=false;r.querySelector('h1').focus()};document.querySelector('#change').onclick=()=>{r.hidden=true;q.hidden=false;checks[0].focus()};document.querySelector('#reset').onclick=()=>{checks.filter(x=>x.checked).forEach(x=>x.click());err.hidden=true;checks[0].focus()};window.demoReady=true;</script></html>
Sources에서 완전한 예시를 다운로드하세요. README에 정확한 로컬 실행 명령이 안내되어 있습니다.
벤더 경로는 이 문서에 대한 상대 경로로 유지하세요. 아카이브에는 이 미리보기에 사용된 에셋이 모두 포함되어 있습니다.
04
ONS 디자인 시스템 에이전트 설정
구현 시작점
로컬 예제에서는 네이티브 73.13.1 컴파일된 CSS과 JavaScript를 사용합니다. Arial은 명시적인 로컬 대체 글꼴이며, 프로덕션용 복사 지침에는 패키지에 포함된 OpenSans 글꼴이 사용됩니다. Sources에 있는 완전한 작업 예제 ZIP에는 정확한 미리보기 종속성과 전체 문서도 포함되어 있습니다. 압축을 푼 디렉터리에서 python3 -m http.server 8080을 실행한 다음 http://localhost:8080/ons.html을 여세요. 모듈 기반 예제를 file://로 열지 마세요.
bash / HTML
npm install --save-exact @ons/[email protected]
mkdir -p public/vendor/ons
cp -R node_modules/@ons/design-system/css public/vendor/ons/
cp -R node_modules/@ons/design-system/scripts public/vendor/ons/
cp -R node_modules/@ons/design-system/fonts public/vendor/ons/
<!-- In your page head -->
<link rel="stylesheet" href="/vendor/ons/css/main.css">
<!-- Place the compiled component markup in the body. -->
<!-- Immediately before </body>; initializes matching component hooks -->
<script src="/vendor/ons/scripts/main.js"></script>
프로젝트를 위한 프롬프트
에이전트 프롬프트
네이티브 Checkbox 및 Mutually Exclusive 훅, 연결된 fieldset/legend, 일반 답변 그룹과 상반 응답 하나를 사용하는 독립형 ONS73.13.1 설문 예제를 만드세요. 필수 라이브 영역과 선택 해제 속성을 포함하세요. 일치하는 네이티브 CSS와 main.js를 제공하고, 대체 상호 배타성 컨트롤러를 작성하지 마세요. 서버에 제출되었다고 표시하지 말고 로컬에서 빈 답변을 검증하고 수정 사항을 보존한 채 답변을 검토할 수 있게 하세요. 캐시된 상태가 일관되게 유지되도록 네이티브 이벤트를 통해 재설정하세요. 공식 아이덴티티 표시 없이 ons-col-8@m과 검증된 타이포그래피 및 의미 색상 규칙을 사용하세요.
05
ONS 디자인 시스템 출처 및 범위
설문 문구를 새로 작성한 독립형 구현 예제입니다. 네이티브 코드는 MIT 라이선스를 따르며, ONS 아이덴티티와 콘텐츠에는 별도의 라이선스가 적용됩니다. 답변은 전송되거나 저장되지 않으며 공식 통계로 제시되지 않습니다.
