기본 GOV.UK Frontend 6.5.1 CSS, Button 및 ErrorSummary JavaScript를 로컬에서 제공합니다. 대체 Helvetica 글꼴을 사용하며, 폼 유효성 검사와 검토 화면 탐색은 독립적으로 구현되어 로컬에서만 작동합니다. · 구현 레퍼런스
02
GOV.UK 디자인 시스템 디자인 참고 자료
2026년 10월 3일 기준 GOV.UK Frontend 6.5.1 및 최신 v6 문서를 확인했습니다. 16진수 값은 참고용 스냅샷이며, 프로덕션에서는 이름이 지정된 Sass 함수를 사용하는 것이 좋습니다. 미리보기에서는 공식 CSS 및 JavaScript를 로컬에서 불러오고, 대체 글꼴과 독립적인 아이덴티티를 사용합니다.
이 참고 자료는 작은 화면에서 더 큰 글자 크기를 사용하고 기능별 색상을 수정한 v6 문서를 따릅니다. 따라서 이전 스크린샷에는 다른 값이 표시될 수 있습니다. 위 표에는 릴리스별 값을 혼용하지 않고 현재 문서에 명시된 기본값을 기록했습니다.
실제 적용 사례는 가상의 지역 행사 문의 양식입니다. 왕관, GOV.UK 워드마크, Transport 글꼴 또는 실제 제출 엔드포인트를 사용하지 않습니다. 작업 내용과 로컬 유효성 검사 규칙은 애플리케이션의 선택 사항이며, 컴포넌트의 구조는 연결된 공식 예제를 바탕으로 합니다.
사용 자격을 갖춘 service.gov.uk 서비스에는 GDS Transport가 공식 구현의 일부로 포함됩니다. 다른 도메인의 공공 서비스는 다른 글꼴을 사용해야 합니다. 이 독립 연구에서는 권장 대안인 Helvetica Neue, Helvetica, Arial, sans-serif를 사용합니다. 글꼴을 바꾸더라도 시스템의 계층 구조를 버릴 필요는 없습니다.
문의 질문에는 govuk-heading-l을, 보조 문구에는 govuk-body를 사용하세요. 좁은 화면에서는 제목이 27/30px이고, 넓은 화면에서는 36/40px로 바뀝니다. v6에서 본문 문구는 19/25px를 유지합니다. 작은 화면에서 본문 크기를 16px로 설정하면 이 레퍼런스가 아니라 이전 동작을 재현하게 됩니다.
반응형 규칙은 한 화면 크기의 스크린샷만으로 확인할 수 없으므로 크기 표에는 두 가지 값이 모두 포함되어 있습니다. 프로덕션 CSS은 상대 단위를 사용합니다. govuk-heading-l 같은 클래스는 외형을 제어하지만, 의미에 맞는 요소가 h1인지 h2인지는 결정하지 않습니다.
scss
.app-question-note {
@include govuk-font($size: 19);
}
// Size and line-height only, without changing the font family:
.app-existing-font { @include govuk-font-size($size: 19); }
질문 그룹 사이에는 간격 단위 6이 유용합니다. 좁은 화면에서는 20px, 태블릿 경계보다 넓은 화면에서는 30px의 간격을 제공합니다. 정적 헬퍼 govuk-spacing(6)은 화면 너비와 관계없이 30px를 반환합니다. 따라서 두 버전이 데스크톱에서 똑같아 보여도 헬퍼를 선택하면 동작이 달라집니다.
표준 너비 컨테이너의 최대 너비는 1020px입니다. 그 안에 그리드의 3분의 2 너비 열을 배치하면 바깥 페이지 구조의 정렬을 유지하면서 질문 영역의 너비를 제한할 수 있습니다. 작은 화면에서는 자연스럽게 세로로 쌓입니다. 이 미리보기는 각 필드를 대시보드 카드에 넓게 펼치는 대신 이러한 읽기 구조를 유지합니다.
html
<div class="govuk-width-container">
<main class="govuk-main-wrapper" id="main-content">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-l">Tell us about the event</h1>
<!-- Question form -->
</div>
</div>
</main>
</div>
v6에서 링크에 사용하는 기능 색상은 #1a65a6이고 오류 색상은 #ca3535입니다. 실제 Sass 빌드에서는 govuk-functional-colour("link")와 govuk-functional-colour("error")를 사용하면 업그레이드 시 상위 버전의 색상 팔레트를 적용할 수 있습니다. 이러한 기능별 역할은 일반적인 빨간색이나 파란색 일러스트 색상을 선택하는 것과 다릅니다.
포커스 노란색은 포커스 표시용으로만 사용하세요. 기본 선택 색상이나 홍보용 강조 색상으로 사용해서는 안 됩니다. 미리보기에서는 노란색에 어두운 텍스트와 선명한 어두운 테두리를 함께 사용합니다. 오류는 빨간색만으로 표현하지 말고 텍스트와 배치로도 식별할 수 있어야 합니다.
입력 예제는 govuk-form-group, govuk-label, govuk-hint, govuk-input을 함께 사용합니다. 레이블은 입력 필드의 ID를 대상으로 하고, aria-describedby는 힌트를 참조합니다. 입력값이 유효하지 않으면 오류 클래스와 함께 오류 메시지 ID도 추가하세요. 이러한 연결 관계 없이 시각적으로만 빨간 테두리를 표시하면 재현이 완전하지 않습니다.
이 문의 양식에서는 행사 이름과 연락처 이메일을 함께 받습니다. 각각 레이블이 있는 별도의 입력값으로, 짧은 작업 하나에 포함됩니다. 모든 필드를 각각 별도의 페이지에 배치하라는 뜻은 아닙니다. 미리보기에서는 유효성 검사를 보여주기 위해서만 두 항목 모두를 필수로 설정합니다. 실제 허가 요건을 규정하는 것은 아닙니다.
GOV.UK Frontend는 구성 요소에 스타일을 적용하고 기능을 보강합니다. 하지만 이 서비스에서 허용되는 이메일을 판단하거나, 임시 저장하거나, 문의를 접수하지는 않습니다. 미리보기에서 JavaScript은 두 입력값의 유효성을 검사하고 현재 페이지에서만 값을 저장합니다. 페이지를 새로고침하면 이 테스트 값은 지워집니다.
잘못된 값을 입력한 상태에서 계속을 누르면 양식 앞에 오류 요약을 표시하고 포커스를 요약으로 이동하세요. 목록의 각 링크는 해당 답변을 대상으로 합니다. 단일 텍스트 필드의 경우 입력 필드 ID를 대상으로 하고, 그룹으로 구성된 선택 항목의 경우 공식 지침에 따라 적절한 첫 번째 컨트롤을 대상으로 해야 합니다.
기본 요약에는 개선 기능을 적용하기 위해 data-module="govuk-error-summary"가 사용됩니다. 미리보기에서는 유효성 검사에 실패한 경우에만 요약을 삽입한 다음, 로컬 6.5.1 모듈에서 ErrorSummary를 생성합니다. 라이브러리는 포커스와 링크를 통한 이동을 처리하고, 애플리케이션은 메시지를 제공하고 입력값을 유지하며 더 이상 유효하지 않은 오류를 제거합니다.
두 필드를 모두 비워둔 채 계속을 누르세요. 행사 이름 오류를 따라가서 가상의 제목을 입력한 다음 유효하지 않은 이메일을 입력하세요. 다시 계속을 누르면 남은 오류만 표시되고 제목은 유지됩니다. 주소를 올바르게 수정하면 검토 화면으로 이동합니다. 이렇게 하면 오류 상태를 계속 표시되는 예시가 아니라 실제 흐름으로 확인할 수 있습니다.
답변 확인 화면에는 govuk-summary-list가 포함됩니다. 각 행은 dt 키, dd 값, dd 작업 영역으로 구성됩니다. 변경 링크 뒤에는 숨김 레이블을 추가해 어떤 답변을 가리키는지 표시합니다. 행사 이름이 길면 값 영역에서 줄바꿈되어 수정 위치로 이동하는 경로를 가리지 않습니다.
변경 작업을 선택하면 양식이 복원되고 선택한 필드에 포커스가 이동합니다. 계속을 누르면 다시 유효성을 검사하고 업데이트된 검토 화면으로 돌아갑니다. 돌아오는 경로는 애플리케이션 코드가 처리하며, 디자인 시스템은 표시 구조를 제공합니다.
데이터를 접수하는 서비스가 없으므로 이 테스트는 검토 화면에서 끝납니다. 실제 답변 확인 페이지는 실제 전송 작업에 앞서 표시되며, 전송할 정보를 보여줘야 합니다. 선언문이나 백엔드 확인 기능이 있는 애플리케이션에는 추가 서비스 로직이 필요합니다. 녹색 패널만으로는 그런 결과를 만들 수 없습니다.
아래 설정은 govuk-frontend@6 및 Node 패키지 임포터를 사용하는 Dart Sass를 이용합니다. 문서화된 브랜딩 미적용 글꼴 설정을 컴파일하고 브라우저용 JavaScript 배포 파일을 복사합니다. 실제 프로젝트에서 정확한 릴리스를 기록할 수 있도록 해석된 잠금 파일을 커밋하세요.
이 예제는 Transport를 불러오거나 정부 이미지 에셋을 사용하지 않습니다. 브랜딩 적용 대상인 서비스는 문서화된 에셋 경로를 통해 공식 에셋도 제공해야 합니다. 다른 빌드 도구를 사용하는 애플리케이션도 번들링 방식만 조정하면 동일한 Sass 모듈과 initAll 진입점을 사용할 수 있습니다.
독립 실행형 미리보기는 공식 CSS 및 JavaScript를 로컬에 복사해 버전 6.5.1로 실행합니다. 범위를 좁힌 글꼴 재정의 설정으로 전체 예제에서 Transport를 대체합니다. 양식 유효성 검사와 검토 화면은 애플리케이션 코드로 구현하고, Button 및 ErrorSummary 개선 기능은 라이브러리에서 가져옵니다. 별도의 Sass 빌드 레시피에는 권장하는 설정 방법을 설명했지만, 여기서는 컴파일하지 않았습니다.
returnTo 매개변수는 여기서 사용하는 애플리케이션 규칙이며, Frontend API의 일부가 아닙니다.
수정 화면에서 검토 화면으로 돌아가도 관련 없는 답변은 모두 유지됩니다.
완전한 독립 실행형 예시
전체 문서에 레이아웃, 컨트롤 및 초기화가 포함되어 있습니다. 링크된 예시 아카이브의 압축을 풀면 정확한 상대 경로의 벤더 에셋을 얻을 수 있습니다. 그런 다음 HTTP로 제공하세요.
html
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Event enquiry — OpenDesign component study</title><link rel="stylesheet" href="vendor/govuk-6.5.1/govuk-frontend.min.css"><style>
body{margin:0;background:#fff}body,body *,body *::before,body *::after{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif!important}[hidden]{display:none!important}.study-header{border-bottom:1px solid #cecece;padding:15px 0;background:#f3f3f3}.study-header p{margin:0}.study-header strong{display:block;margin-bottom:5px}.study-note{border-top:1px solid #cecece;padding-top:20px;margin-top:30px}.study-actions{display:flex;gap:20px;align-items:baseline;flex-wrap:wrap}.govuk-summary-list__value{overflow-wrap:anywhere}main:focus,h1:focus{outline:none}.govuk-width-container{max-width:1020px}.study-tools{margin:20px 0}.study-tools button{font:inherit;background:none;border:0;padding:0;color:#1a65a6;text-decoration:underline;cursor:pointer}.study-tools button:focus{outline:3px solid #ffdd00;background:#ffdd00;color:#0b0c0c}.study-header .govuk-body-s{max-width:75ch}
</style></head><body class="govuk-template__body"><script>document.body.className+=' js-enabled'+('noModule' in HTMLScriptElement.prototype?' govuk-frontend-supported':'');</script>
<a class="govuk-skip-link" href="#main-content">Skip to main content</a>
<header class="study-header"><div class="govuk-width-container"><p class="govuk-body-s"><strong>OpenDesign · Component study</strong>GOV.UK Frontend 6.5.1 with an alternative font. Fictional enquiry; no information is sent.</p></div></header>
<main class="govuk-width-container govuk-main-wrapper" id="main-content"><div class="govuk-grid-row"><div class="govuk-grid-column-two-thirds">
<section id="questions"><div id="errors"></div><h1 class="govuk-heading-l" id="question-title" tabindex="-1">Tell us about the event</h1><p class="govuk-body">Enter fictional details to try linked validation and the check-answers pattern.</p>
<form id="event-form" novalidate>
<div class="govuk-form-group" id="name-group"><label class="govuk-label" for="event-name">Event name</label><div class="govuk-hint" id="event-name-hint">Use the name shown on your event information.</div><input class="govuk-input" id="event-name" name="eventName" type="text" aria-describedby="event-name-hint"></div>
<div class="govuk-form-group" id="email-group"><label class="govuk-label" for="contact-email">Contact email</label><div class="govuk-hint" id="contact-email-hint">For example, [email protected]. Use a fictional address.</div><input class="govuk-input" id="contact-email" name="email" type="email" spellcheck="false" autocomplete="email" aria-describedby="contact-email-hint"></div>
<button class="govuk-button" data-module="govuk-button" type="submit">Continue to check answers</button>
</form><div class="study-tools govuk-body-s"><button id="fill" type="button">Use example details</button></div></section>
<section id="review" hidden><a class="govuk-back-link" href="#questions" id="back">Back</a><h1 class="govuk-heading-l govuk-!-margin-top-6" tabindex="-1" id="review-title">Check your answers</h1><dl class="govuk-summary-list"><div class="govuk-summary-list__row"><dt class="govuk-summary-list__key">Event name</dt><dd class="govuk-summary-list__value" id="review-name"></dd><dd class="govuk-summary-list__actions"><a class="govuk-link change" href="#event-name" data-field="event-name">Change<span class="govuk-visually-hidden"> event name</span></a></dd></div><div class="govuk-summary-list__row"><dt class="govuk-summary-list__key">Contact email</dt><dd class="govuk-summary-list__value" id="review-email"></dd><dd class="govuk-summary-list__actions"><a class="govuk-link change" href="#contact-email" data-field="contact-email">Change<span class="govuk-visually-hidden"> contact email</span></a></dd></div></dl><h2 class="govuk-heading-m">This example ends at review</h2><p class="govuk-body">Nothing has been submitted. Your answers stay in this page until it is reset or reloaded.</p><button class="govuk-button govuk-button--secondary" data-module="govuk-button" id="reset" type="button">Start again</button></section>
<aside class="study-note"><h2 class="govuk-heading-s">Try the recovery path</h2><ol class="govuk-list govuk-list--number"><li>Continue with empty fields to show the error summary.</li><li>Follow an error link, enter a title and an invalid email.</li><li>Correct the email, then change an answer from review.</li></ol><p class="govuk-body-s">Native component CSS and ErrorSummary behaviour. Local application logic only. No government logo, Transport font, external request or stored account.</p><p class="govuk-body-s"><a class="govuk-link" href="https://design-system.service.gov.uk/components/error-summary/" target="_blank" rel="noreferrer">Official error summary reference</a> · <a class="govuk-link" href="vendor/govuk-6.5.1/LICENSE.txt">Frontend licence</a></p></aside>
</div></div></main><script type="module">
import {initAll, ErrorSummary} from './vendor/govuk-6.5.1/govuk-frontend.min.js';
initAll();
const q=document.querySelector('#questions'),r=document.querySelector('#review'),form=document.querySelector('#event-form'),holder=document.querySelector('#errors');
const fields=[{id:'event-name',group:'name-group',empty:'Enter an event name'},{id:'contact-email',group:'email-group',empty:'Enter a contact email',invalid:'Enter an email address in the correct format, like [email protected]'}];
function clearErrors(){holder.replaceChildren();for(const f of fields){document.getElementById(f.group).classList.remove('govuk-form-group--error');const input=document.getElementById(f.id);input.classList.remove('govuk-input--error');input.removeAttribute('aria-invalid');input.setAttribute('aria-describedby',f.id+'-hint');document.getElementById(f.id+'-error')?.remove();}document.title='Event enquiry — OpenDesign component study';}
function edit(id='event-name'){r.hidden=true;q.hidden=false;document.getElementById(id).focus();}
form.addEventListener('submit',event=>{event.preventDefault();clearErrors();const errors=[];for(const f of fields){const input=document.getElementById(f.id);const value=input.value.trim();const message=!value?f.empty:(f.id==='contact-email'&&(!input.validity.valid||!value.includes('@'))?f.invalid:null);if(message){errors.push({id:f.id,message});document.getElementById(f.group).classList.add('govuk-form-group--error');input.classList.add('govuk-input--error');input.setAttribute('aria-invalid','true');input.setAttribute('aria-describedby',f.id+'-hint '+f.id+'-error');const p=document.createElement('p');p.id=f.id+'-error';p.className='govuk-error-message';const hidden=document.createElement('span');hidden.className='govuk-visually-hidden';hidden.textContent='Error: ';p.append(hidden,document.createTextNode(message));input.before(p);}}
if(errors.length){const summary=document.createElement('div');summary.className='govuk-error-summary';summary.dataset.module='govuk-error-summary';summary.innerHTML='<div role="alert"><h2 class="govuk-error-summary__title">There is a problem</h2><div class="govuk-error-summary__body"><ul class="govuk-list govuk-error-summary__list"></ul></div></div>';for(const err of errors){const li=document.createElement('li'),a=document.createElement('a');a.href='#'+err.id;a.textContent=err.message;li.append(a);summary.querySelector('ul').append(li);}holder.append(summary);new ErrorSummary(summary);document.title='Error: Event enquiry — OpenDesign component study';return;}
document.getElementById('review-name').textContent=document.getElementById('event-name').value;document.getElementById('review-email').textContent=document.getElementById('contact-email').value;q.hidden=true;r.hidden=false;document.getElementById('review-title').focus();document.title='Check your answers — OpenDesign component study';});
document.querySelectorAll('.change').forEach(a=>a.addEventListener('click',e=>{e.preventDefault();edit(a.dataset.field)}));document.getElementById('back').addEventListener('click',e=>{e.preventDefault();edit()});document.getElementById('fill').addEventListener('click',()=>{clearErrors();document.getElementById('event-name').value='Riverside community picnic';document.getElementById('contact-email').value='[email protected]';document.getElementById('event-name').focus()});document.getElementById('reset').addEventListener('click',()=>{form.reset();clearErrors();edit();document.getElementById('question-title').focus()});
</script></body></html>
Sources에서 완전한 예시를 다운로드하세요. README에 정확한 로컬 실행 명령이 안내되어 있습니다.
벤더 경로는 이 문서에 대한 상대 경로로 유지하세요. 아카이브에는 이 미리보기에 사용된 에셋이 모두 포함되어 있습니다.
04
GOV.UK 디자인 시스템 AI 에이전트 설정
구현 시작점
표시된 위치에 셸 명령어, app.scss 내용 및 HTML 조각을 각각 배치하세요. 미리보기는 글꼴 재정의 설정과 함께 공식 6.5.1 에셋을 로컬에 복사해 실행합니다. 이 Sass 빌드 레시피는 문서화했지만 이 작업 공간에서는 컴파일하지 않았습니다. Sources에 있는 전체 작업 예제 ZIP에는 미리보기의 정확한 종속 항목과 전체 문서도 포함되어 있습니다. 해당 ZIP을 추출한 디렉터리에서 python3 -m http.server 8080을 실행한 다음 http://localhost:8080/gov-uk.html을 여세요. 모듈을 사용하는 예제는 file://로 열지 마세요.
sh / scss / html
# Run in a project directory
npm install [email protected]
npm install --save-dev sass
mkdir -p public/assets
# Save the following as app.scss
@use "pkg:govuk-frontend" as * with (
$govuk-font-family: ("Helvetica Neue", Helvetica, Arial, sans-serif)
);
# Compile, then copy the browser module
npx sass --pkg-importer=node app.scss public/assets/app.css
cp node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.js public/assets/
<!-- In the HTML head -->
<link rel="stylesheet" href="/assets/app.css">
<!-- At the start of body -->
<script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script>
<!-- After the question / summary markup -->
<script type="module">
import { initAll } from '/assets/govuk-frontend.min.js';
initAll();
</script>
프로젝트를 위한 프롬프트
에이전트 프롬프트
이 가이드의 GOV.UK Frontend v6 및 브랜드를 적용하지 않은 Helvetica 글꼴 설정을 사용해 두 필드로 구성된 이벤트 문의 양식을 구현하세요. 실제 form-group/input/error-summary 및 summary-list 구조, 연결된 인라인 오류, 유지되는 답변, 해당 항목을 대상으로 하는 변경 링크, 검토 화면에서만 완료되는 흐름을 사용하세요. Frontend 클래스를 통해 문서화된 반응형 글자 스타일과 간격을 적용하세요. 실제 프로젝트의 정체성을 유지하고 공식 제출 기능이나 존재하지 않는 백엔드 결과를 만들지 마세요. 입력란이 비어 있는 상태, 잘못된 이메일 주소, 수정된 상태, 검토 상태, 답변 변경 상태를 확인하세요.
05
GOV.UK 디자인 시스템 출처 및 범위
GOV.UK Frontend 6.5.1의 컴포넌트 CSS와 JavaScript를 사용하는 독립적인 OpenDesign 애플리케이션 예제입니다. 정부 로고나 Transport 글꼴, 공식 서비스, 실제 제출 기능 또는 규정 준수 인증을 의미하지 않습니다. 양식 규칙과 검토 화면 간 이동은 독자적인 애플리케이션 코드입니다.
