네이티브 Scottish Government Design System 4.3.0 CharacterCount/CSS, 독창적인 워크숍 콘텐츠와 로컬 검증, Arial 대체 글꼴. · 구현 레퍼런스
02
Scottish Government 디자인 시스템 디자인 참고 자료
공개된 CSS와 JavaScript의 Scottish Government Design System 4.3.0 버전을 바탕으로 최신 공식 타이포그래피, 색상, 그리드 지침을 제공합니다. 미리 보기에서 네이티브 CharacterCount와 스타일을 실행합니다. Arial은 독립 예제에서 명시적으로 사용하는 대체 글꼴입니다. Scottish Government 부서는 Roboto를 사용해야 합니다. 현재 패키지 에셋은 이전 설치 예제와 다릅니다.
이 예시의 핵심 상호작용은 내용을 파괴하지 않는 길이 안내입니다. 사용자는 긴 접근성 요청 사항을 붙여넣고, 얼마나 편집해야 하는지 확인하면서 텍스트를 모두 보존할 수 있습니다. 네이티브 문자 수 카운터는 남은 문자 수, 허용 길이 초과 스타일, 지연된 보조 기술 메시지를 처리합니다. 이 메모를 미리 보기에 적합한지 여부는 애플리케이션이 별도로 판단합니다.
이는 독창적인 워크숍 노트 예시로, 스코틀랜드 정부 서비스도 의료 정보 요청도 아닙니다. 신원 확인용 그래픽, 저장 기능, 제출 기능이 없습니다. 필드 힌트는 실질적인 접근성 지원 필요 사항을 묻고 비공개 정보는 적지 않도록 안내하므로, 공식 업무 절차를 차용하지 않고도 과제를 이해할 수 있습니다.
스코틀랜드 정부 부서 및 정책 분야에서는 Roboto를 사용해야 합니다. 다른 도입 조직은 읽기 쉬운 다른 글꼴을 사용할 수 있지만 크기 및 줄 높이 규칙은 유지하고 결과를 테스트해야 합니다. 독립 실행형 예시는 Arial 대체 글꼴을 명시하며, 웹 글꼴이 없을 때 Roboto가 사용된다고 주장하지 않습니다.
본문은 16/24px에서 19/32px로, 기본 제목은 30/40px에서 44/56px로 바뀝니다. 두 변경 사항은 모두 네이티브 대형 화면 스타일시트에서 적용됩니다. ds_h 3 클래스는 문서의 제목 계층을 바꾸지 않고 시각적 크기만 변경합니다. 짧은 양식에 작은 섹션 제목이 필요하지만 문서 개요에 인위적인 단계를 추가할 필요는 없을 때 이 구분이 중요합니다.
파란색은 기본 브랜드 및 링크 역할을 하고, 검은색은 텍스트에, 노란색은 포커스에 사용됩니다. 이는 이름이 지정된 Sass 설정이며, 임의로 만든 CSS 사용자 지정 속성 모음이 아닙니다. 브랜드 조정은 시스템을 설정 모듈로 불러오기 전에 적용합니다. 다른 브랜드 색상을 변경하더라도 공식 지침에 따라 포커스 색상 팔레트는 유지해야 합니다.
허용 길이를 초과한 경우에만 문자 카운터가 부정적 상태를 나타내는 빨간색을 사용합니다. 애플리케이션 수준의 두 번째 오류로 빈 필드를 표시할 때도 같은 부정적 역할을 사용할 수 있지만, 메시지는 문자 수가 아니라 답변이 누락되었다는 점을 설명해야 합니다. 미리보기에서 긍정적인 녹색을 사용해 원격 제출이 성공한 것처럼 표시하지 마세요.
공식 그리드 표에는 중간, 대형, 특대형 중단점에서 각각 736, 928, 1120px의 내부 콘텐츠 너비가 명시되어 있습니다. 이에 대응하는 네이티브 래퍼 박스는 양쪽에 16px 패딩을 포함하므로 768, 960, 1152px입니다. 이 차이를 이해하면 두 너비를 중첩해 레이아웃이 의도치 않게 두 번 좁아지는 일을 방지할 수 있습니다.
미리보기에서는 네이티브 래퍼 안에 42rem의 본문 읽기 열을 배치합니다. 이 최대 너비는 짧은 양식에 적합하도록 애플리케이션에서 선택한 값이지, 새로운 시스템 설정이 아닙니다. 768px 미만에서는 래퍼가 유동 너비로 바뀌며, 양쪽에 같은 16px 간격을 두어 textarea가 화면 가장자리에 붙지 않도록 합니다.
간격 유틸리티는 반응형입니다. 예를 들어 ds_!_margin-bottom--4는 48rem에서 24px에서 32px로 늘어나며, 더 큰 단계의 간격도 함께 늘어납니다. 참고 자료에는 두 값이 모두 표시되므로 데스크톱 스크린샷의 간격을 어디서나 고정된 값으로 오해하지 않을 수 있습니다.
ds_question 루트에는 data-module과 선택적 백분율 임계값이 지정됩니다. 연결된 label과 힌트는 일반적인 접근성 지원 HTML입니다. maxlength가 있는 textarea를 사용하면 유용한 JavaScript 비활성화 시 대체 동작을 제공합니다. 기능이 활성화되면 컴포넌트가 maxlength 값을 읽은 뒤 제한을 제거하므로, 붙여넣은 내용이 소리 없이 잘리지 않습니다.
200자 필드에서 임계값이 80%라면 160자부터 문자 수를 표시합니다. 공개 컴포넌트 페이지의 예시 문구와 250자 코드 예시는 서로 다른 수치를 사용하므로, 이 예시에서는 일관된 제한 하나를 사용합니다. JavaScript이 없더라도 표시되는 힌트에 제한이 안내되며 네이티브 maxlength가 적용됩니다.
html
<div class="ds_question" data-threshold="80" data-module="ds-character-count">
<label class="ds_label" for="access-note">What would help you take part?</label>
<p class="ds_hint-text" id="access-hint">Describe an access need for this practice workshop. Do not include medical or contact details.</p>
<textarea maxlength="200" class="ds_input" rows="5" id="access-note"
name="access-note" aria-describedby="access-hint"></textarea>
</div>
버전이 지정된 구현은 aria-hidden이 적용된 화면 표시용 메시지와 보조 기술용 별도의 숨김 메시지를 생성합니다. 기존 aria-describedby를 삭제하지 않고 관련 ID를 추가합니다. 숨김 메시지를 업데이트하기 전에 1000ms 기다려 입력 피드백이 먼저 완료되도록 합니다.
실제 길이는 JavaScript string.value.length에서 가져옵니다. UTF-16 코드 단위를 세므로 기본 다국어 평면 밖의 기호는 두 단위, 결합 이모지는 그보다 더 많은 단위를 차지할 수 있습니다. 다른 문자 계산 정책이 필요한 서비스는 이 구성 요소가 사람이 인식하는 문자를 센다고 약속하는 대신, 카운터와 서버 측 유효성 검사를 동일한 기준에 맞춰야 합니다.
이 구성 요소는 input 이벤트를 수신합니다. 애플리케이션에서 예시 텍스트를 채우거나 필드를 프로그래밍 방식으로 비우는 경우에도 input 이벤트를 발생시켜야 합니다. 데모의 예시 및 초기화 동작은 이를 수행합니다. 소스 코드의 주석에는 음성 인식 폴링이 언급되어 있지만, 검토한 구현에는 폴링 간격을 설정하는 코드가 없습니다. 따라서 이 가이드에서는 해당 동작을 제공한다고 안내하지 않습니다.
현재 패키지는 @scottish-government/design-system입니다. 버전 4.3.0의 컴파일된 스타일시트 경로는 dist/css/design-system.min.css이지만, 이전 설치 안내에는 여전히 dist/styles/main.css가 나옵니다. 이 예제에서는 실제로 배포된 에셋 경로를 사용합니다. 스크립트는 ES 모듈을 내보내므로 일반 클래식 스크립트 태그 대신 type="module"을 사용해 가져오세요.
이 필드용 CharacterCount 인스턴스를 만들고 init을 호출합니다. 페이지에 여러 구성 요소가 있다면 DS.initAll도 사용할 수 있지만, 이 예제에서는 필요한 카운터만 초기화합니다. 별도의 분석 서비스는 설정하지 않습니다. 서버 측 유효성 검사는 라이브러리와 별개입니다. 카운터는 편집을 돕는 컨트롤이지 입력을 강제하는 경계가 아닙니다.
버전 4.3.0으로 고정된 패키지를 설치하고 컴파일된 CSS 및 모듈을 로컬 에셋 디렉터리에 복사합니다.
모듈을 가져오기 전에 전체 레이블, 도움말 및 텍스트 영역 구조를 페이지에 배치합니다.
카운터를 한 번 초기화한 다음, 일반 input 이벤트를 사용해 애플리케이션의 미리 보기 및 초기화 동작을 연결합니다.
제한보다 적은 글자 수로 시작해 160자를 넘긴 다음 200자보다 긴 텍스트를 붙여 넣습니다. 텍스트 영역에는 전체 값이 유지되어야 하며, “글자 수 초과” 메시지가 표시되고 aria-invalid가 true로 설정되어야 합니다. 글자 수를 제한 미만으로 줄이고 오류 클래스와 유효하지 않은 상태가 모두 해제되는지 확인합니다.
애플리케이션의 미리 보기 동작은 비어 있거나 글자 수 제한을 초과한 메모를 연결된 오류 메시지와 함께 차단합니다. 유효한 메모는 textContent를 사용해 로컬 미리 보기에 표시되므로, 입력한 마크업은 해석되지 않고 텍스트로 표시됩니다. 메모 수정 동작을 선택하면 값이 유지된 채 같은 텍스트 영역으로 돌아갑니다. 초기화 동작은 input 이벤트를 통해 텍스트를 지우므로 기본 글자 수 표시도 초기화됩니다.
화면 너비 390px에서 제목 줄바꿈, 전체 너비 텍스트 영역, 버튼 줄바꿈 및 오류 요약을 확인합니다. 더 넓은 화면에서는 본문 열이 지나치게 넓은 문단이 되지 않아야 합니다. 이 검사는 이 예제를 확인하기 위한 것입니다. 실제 서비스에는 최종 사용 환경에서의 사용자 조사, 글꼴 테스트 및 보조 기술 검토가 여전히 필요합니다.
<div class="ds_question" data-threshold="80" data-module="ds-character-count">
<label class="ds_label" for="access-note">What would help you take part?</label>
<p class="ds_hint-text" id="access-hint">Describe an access need for this practice workshop. Do not include medical or contact details.</p>
<textarea maxlength="200" class="ds_input" rows="5" id="access-note"
name="access-note" aria-describedby="access-hint"></textarea>
</div>
전체 문서에 레이아웃, 컨트롤 및 초기화가 포함되어 있습니다. 링크된 예시 아카이브의 압축을 풀면 정확한 상대 경로의 벤더 에셋을 얻을 수 있습니다. 그런 다음 HTTP로 제공하세요.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Scottish design system character count specimen</title><link rel="stylesheet" href="vendor/scot-4.3.0/dist/css/design-system.min.css"><style>body,button,input,textarea{font-family:Arial,sans-serif!important}body{margin:0}main{padding-top:32px;padding-bottom:32px}.reading{max-width:42rem}.eyebrow{border-top:4px solid #0065bd;padding-top:16px;color:#5e5e5e}.actions{display:flex;flex-wrap:wrap;gap:16px}.actions .ds_button{margin:0}.preview-text{white-space:pre-wrap;overflow-wrap:anywhere;border-left:4px solid #b3b3b3;padding-left:24px}[hidden]{display:none!important}</style><main class="ds_wrapper"><div class="reading"><p class="ds_small eyebrow">Independent specimen · Workshop access note</p><section id="entry"><h1>Tell us what would help</h1><p>Practice a short access note for a community workshop. This page does not save or send your text.</p><div id="error" class="ds_error-summary" tabindex="-1" hidden><h2 class="ds_error-summary__title">There is a problem</h2><p><a href="#access-note" id="error-link"></a></p></div><form id="form" novalidate><div class="ds_question" data-threshold="80" data-module="ds-character-count">
<label class="ds_label" for="access-note">What would help you take part?</label>
<p class="ds_hint-text" id="access-hint">Describe an access need for this practice workshop. Do not include medical or contact details.</p>
<textarea maxlength="200" class="ds_input" rows="5" id="access-note"
name="access-note" aria-describedby="access-hint"></textarea>
</div><p class="ds_small">Use up to 200 characters. The count appears after 160.</p><div class="actions"><button class="ds_button" type="submit">Preview note</button><button class="ds_button ds_button--secondary" id="sample" type="button">Try a long example</button><button class="ds_button ds_button--secondary" id="reset" type="button">Reset</button></div></form></section><section id="preview" hidden><h1 tabindex="-1">Your note preview</h1><p id="result" class="preview-text"></p><p>No note has been sent. You can return to edit it.</p><button id="edit" class="ds_button ds_button--secondary">Edit note</button></section></div></main><script type="module">import DS from './vendor/scot-4.3.0/dist/scripts/design-system.js';const field=document.querySelector('[data-module="ds-character-count"]');new DS.components.CharacterCount(field).init();const input=document.querySelector('#access-note'),entry=document.querySelector('#entry'),preview=document.querySelector('#preview'),error=document.querySelector('#error');function setValue(value){input.value=value;input.dispatchEvent(new Event('input',{bubbles:true}));input.focus()}document.querySelector('#sample').onclick=()=>setValue('A clear route from the entrance to the workshop room would help me take part. Please describe where the quiet seating area is and whether instructions will be available in writing. I would also appreciate knowing where to find the nearest accessible entrance.');document.querySelector('#reset').onclick=()=>{setValue('');error.hidden=true};document.querySelector('#form').onsubmit=e=>{e.preventDefault();let message=!input.value.trim()?'Enter a short access note.':input.value.length>200?'Shorten your note to 200 characters or fewer.':'';if(message){document.querySelector('#error-link').textContent=message;error.hidden=false;error.focus();return}error.hidden=true;document.querySelector('#result').textContent=input.value;entry.hidden=true;preview.hidden=false;preview.querySelector('h1').focus()};document.querySelector('#edit').onclick=()=>{entry.hidden=false;preview.hidden=true;input.focus()};window.demoReady=true;</script></html>
Sources에서 완전한 예시를 다운로드하세요. README에 정확한 로컬 실행 명령이 안내되어 있습니다.
벤더 경로는 이 문서에 대한 상대 경로로 유지하세요. 아카이브에는 이 미리보기에 사용된 에셋이 모두 포함되어 있습니다.
04
Scottish Government 디자인 시스템 AI 에이전트 설정
구현 시작점
로컬 데모는 실제 4.3.0 CSS 및 CharacterCount 모듈을 실행합니다. 대체 글꼴을 명시적으로 지정하며, 설치 페이지에 나오는 이전 dist/styles 경로는 사용하지 않습니다. Sources의 완전한 작동 예제 ZIP에는 정확한 미리 보기 의존성과 전체 문서도 포함되어 있습니다. 압축을 푼 뒤 해당 디렉터리에서 python3 -m http.server 8080을 실행하고 http://localhost:8080/scottish-government.html을 여세요. 모듈 기반 예제를 file://로 열지 마세요.
bash / HTML
npm install --save-exact @scottish-government/[email protected]
mkdir -p public/vendor/scot
cp node_modules/@scottish-government/design-system/dist/css/design-system.min.css public/vendor/scot/
cp node_modules/@scottish-government/design-system/dist/scripts/design-system.js public/vendor/scot/
<link rel="stylesheet" href="/vendor/scot/design-system.min.css">
<script type="module">
import DS from '/vendor/scot/design-system.js';
const root = document.querySelector('[data-module="ds-character-count"]');
new DS.components.CharacterCount(root).init();
// Or DS.initAll() when the page uses multiple DS components.
</script>
프로젝트를 위한 프롬프트
에이전트 프롬프트
독립적인 접근성 메모 양식에서 실제 Scottish Government Design System 4.3.0 CharacterCount 구성 요소를 사용합니다. 검증된 dist/css/design-system.min.css 및 ES 모듈 dist/scripts/design-system.js 경로를 고정해 사용합니다. 글자 수 제한 200자, 임계값 80%, 연결된 도움말 및 범위가 지정된 구성 요소 초기화를 설정합니다. 붙여 넣은 글자 수 초과 텍스트를 그대로 유지하고, 기본 글자 수 및 ARIA 업데이트는 라이브러리에 맡깁니다. 별도의 로컬 유효성 검사와 안전한 텍스트 전용 미리 보기·수정·초기화 기능을 추가합니다. 프로그래밍 방식으로 예시 텍스트를 입력하거나 초기화할 때는 input 이벤트를 발생시켜야 합니다. 게시된 반응형 글꼴 및 간격을 사용하고, 글꼴을 명시적으로 선택하며, 공식 정체성을 사용하거나 제출 기능을 가장하지 않습니다.
05
Scottish Government 디자인 시스템 출처 및 범위
독립적인 구현 참고 자료입니다. Scottish Government 부서는 Roboto를 사용해야 합니다. 이 비브랜드 예제에서는 Arial을 대체 글꼴로 명시했습니다. 텍스트는 자체 작성되었으며 저장 또는 제출 기능이 없고 공식 기관과 제휴하지 않습니다. 코드 라이선스와 정부 그래픽 에셋 사용 허가는 별개입니다.
