83.3K+다운로드
정부 및 공공 서비스 · 새 리소스

NHS 디자인 시스템.

NHS.UK 타이포그래피와 반응형 간격, 그룹화된 라디오 선택지, 맥락에 맞는 세부 정보를 활용해 명확한 예약 선호도 선택 흐름을 구성하세요.

OpenDesign 다운로드 DESIGN.md 다운로드
OpenDesign 가이드8개 챕터참조 항목 27개독자적 적용 가이드
01

NHS 디자인 시스템 인터페이스 미리보기

방법을 선택하고, 선택 사항인 도움말을 확인하고, 응답하지 않은 질문을 해결한 다음 선호 사항을 수정하세요.

예약 선호 사항 및 로컬 검토전체 예시 열기
네이티브 NHS.UK frontend 10.6.1 CSS/JS, Arial 재정의 및 자체 로컬 상태를 사용합니다. 임상 서비스와 연동되지 않습니다. · 구현 레퍼런스
02

NHS 디자인 시스템 디자인 참조

NHS.UK frontend 10.6.1 및 NHS 디지털 서비스 매뉴얼을 참고했습니다. 미리보기는 라이선스가 필요한 Frutiger나 NHS 로고가 아니라 Arial과 공식 로컬 CSS/JS를 사용합니다. 반응형 값은 선택한 패키지에 맞춰 확인했으며 임상 콘텐츠는 제공하지 않습니다.

타이포그래피와 아이덴티티

출처
이름 / 규칙값 / 구성용도
Font stackFrutiger W01, Arial, sans-serifFrutiger를 사용하려면 관련 라이선스가 필요하므로 이 연구에서는 Arial을 사용합니다.
nhsuk-body16px small / 19px large기본 본문 텍스트.
nhsuk-body-l26px desktop도입부의 모든 문장이 아니라 리드 문단에 사용합니다.
nhsuk-body-s14px small / 16px large보조 정보는 필요한 곳에만 사용합니다.
nhsuk-heading-lTransactional h1다음 h2 제목에 heading-m을 사용합니다.

시맨틱 색상 변수

출처
이름 / 규칙값 / 구성용도
$nhsuk-text-colour#212b32 본문 콘텐츠
$nhsuk-secondary-text-colour#4c6272 안내
$nhsuk-link-colour#005eb8 연결된 페이지
$nhsuk-focus-colour#ffeb3b 키보드 포커스
$nhsuk-border-colour#d8dde0 구조적 경계
$nhsuk-input-border-colour#4c6272 입력 경계
$nhsuk-error-colour#d5281b 유효성 검사 피드백
$nhsuk-button-colour#007f3b 주요 작업

반응형 간격

출처
이름 / 규칙값 / 구성용도
nhsuk-u-margin-bottom-14px → 4px768px 이하의 작은 화면에서 768px 초과 화면으로 전환할 때는 로컬 중복 선언 대신 클래스를 사용하세요.
nhsuk-u-margin-bottom-28px → 8px768px 이하의 작은 화면에서 768px 초과 화면으로 전환할 때는 로컬 중복 선언 대신 클래스를 사용하세요.
nhsuk-u-margin-bottom-38px → 16px768px 이하의 작은 화면에서 768px 초과 화면으로 전환할 때는 로컬 중복 선언 대신 클래스를 사용하세요.
nhsuk-u-margin-bottom-416px → 24px768px 이하의 작은 화면에서 768px 초과 화면으로 전환할 때는 로컬 중복 선언 대신 클래스를 사용하세요.
nhsuk-u-margin-bottom-524px → 32px768px 이하의 작은 화면에서 768px 초과 화면으로 전환할 때는 로컬 중복 선언 대신 클래스를 사용하세요.
nhsuk-u-margin-bottom-632px → 40px768px 이하의 작은 화면에서 768px 초과 화면으로 전환할 때는 로컬 중복 선언 대신 클래스를 사용하세요.
nhsuk-u-margin-bottom-740px → 48px768px 이하의 작은 화면에서 768px 초과 화면으로 전환할 때는 로컬 중복 선언 대신 클래스를 사용하세요.
nhsuk-u-margin-bottom-848px → 56px768px 이하의 작은 화면에서 768px 초과 화면으로 전환할 때는 로컬 중복 선언 대신 클래스를 사용하세요.
nhsuk-u-margin-bottom-956px → 64px768px 이하의 작은 화면에서 768px 초과 화면으로 전환할 때는 로컬 중복 선언 대신 클래스를 사용하세요.

페이지 구성

출처
이름 / 규칙값 / 구성용도
nhsuk-width-container960px maximum고정 너비 외부 컨테이너.
nhsuk-main-wrapper--sSmaller vertical wrapper거래형 서비스에 권장됩니다.
nhsuk-grid-column-two-thirdsDesktop column; mobile stack그리드 너비는 769px부터 적용됩니다.
Breakpoints320 / 641 / 769 / 990px모바일, 태블릿, 데스크톱, 대형 데스크톱.
nhsuk-u-reading-widthReadable content measure주변 컨테이너가 넓을 때 사용하세요.
03

NHS 디자인 시스템 전체 가이드

실제 인터페이스를 위해 이 시스템을 선택하고 적용하고 검토하는 실용 가이드.

DESIGN-nhs.md

완전한 안내와 구현 시작점, 소스 링크.

가이드 다운로드

NHS 디자인 시스템 NHS 맥락과 글꼴

잘못된 정체성을 내세우지 않는 의료 인터페이스

NHS.UK 프런트엔드는 시각적·상호작용 기반을 제공하지만, 진료 일정을 예약하거나 진료소에서 지원하는 방문 방식을 결정하지는 않습니다. 이 예시에서는 가상의 예약 정보를 보여 주고 방문자가 선호 방식을 선택할 수 있게 합니다. 선택 결과는 로컬에서 확인하는 용도일 뿐, 예약으로 이어지지 않습니다.

이 OpenDesign 가이드에서

Frutiger는 라이선스 조건이 적용되는 NHS 브랜드 자산입니다. 이 독립 리소스에서는 문서에 명시된 대체 글꼴인 Arial을 사용하고 NHS 로고는 포함하지 않습니다. 공식 CSS는 그대로 유지하며, Frutiger 요청을 방지하도록 로컬 글꼴을 명시적으로 재정의합니다.

지원 사양 읽기

NHS 디자인 시스템 트랜잭션 화면의 타이포그래피

질문이 계층 구조를 이끌도록 구성하기

페이지의 질문에는 nhsuk-heading-l을, 하위 섹션에는 nhsuk-heading-m을 사용합니다. 이는 안내 내용이 heading-xl로 시작하는 긴 편집형 페이지와 다릅니다. 라디오 필드셋에서는 그룹 의미를 유지하면서 범례에 제목 크기 스타일을 적용할 수 있습니다.

일반 문단 클래스는 본문, 리드 문구, 작은 보조 문구를 구분합니다. 26px 리드 문구는 페이지 시작 부분에 한 번 사용하는 것이 적절하며, 예약 안내에는 일반 본문 텍스트를 사용합니다. 미리보기에는 날짜와 위치 이름이 줄바꿈될 수 있도록 충분한 너비를 확보합니다.

지원 사양 읽기

NHS 디자인 시스템 간격과 컨테이너

NHS 간격 단위는 GOV.UK 간격 단위와 다릅니다

NHS 반응형 단위는 GOV.UK와 다른 순서를 따르며 768px 초과 지점에서 전환됩니다. 예를 들어 단위 6은 32px에서 40px로 바뀝니다. 헬퍼 이름이 비슷하다는 이유만으로 GOV.UK의 단위 6 값을 NHS에 적용하지 마세요.

이 데모에서는 960px 컨테이너와 2/3 너비의 본문 열을 사용합니다. 네이티브 그리드 동작에 따라 데스크톱보다 작은 화면에서는 한 열로 표시됩니다. 레이아웃 변경은 라이브러리가 제어하며, 별도의 작은 브랜드 스트립에는 애플리케이션 스타일을 적용합니다.

scss
.appointment-section {
  @include nhsuk-responsive-margin(6, "bottom");
}

코드 참조

지원 사양 읽기

반응형 경계값

문서에서는 641px을 태블릿, 769px을 데스크톱 기준으로 정의합니다. 그리드 열 너비는 데스크톱 기준에서 적용되지만, 그렇다고 모든 타이포그래피 규칙이 같은 경계값을 따르는 것은 아닙니다. 모든 속성에 전역 중단점을 하나씩 구현하는 대신 네이티브 클래스를 사용하세요.

지원 사양 읽기

NHS 디자인 시스템 방문 방식 선택 그룹

필드셋 하나, 답변 하나

이 예시에서는 표시되는 범례가 있는 nhsuk-fieldset을 사용하고, 라디오 입력에 같은 name 속성값을 지정합니다. 각 입력에는 고유한 id와 라벨이 있습니다. aria-describedby를 통해 힌트를 그룹과 연결합니다. 이러한 관계를 설정하면 브라우저가 하나의 상호 배타적인 선택 항목으로 인식할 수 있습니다.

라디오 항목 구조에서는 입력과 라벨을 nhsuk-radios__item 안에 배치합니다. 기본 라디오는 주요 질문에 적합하고, 작은 변형은 필터처럼 더 촘촘한 맥락에 사용합니다. 가상의 방문 방식은 화살표 키로 조작해도 서로 배타적으로 선택됩니다.

  • 범례가 결정할 내용을 알려 줍니다.
  • 공통 attendance 이름으로 선택 그룹을 만듭니다.
  • 각 라벨은 서로 다른 입력 ID를 대상으로 합니다.

지원 사양 읽기

NHS 디자인 시스템 필수 정보를 숨기지 않는 도움말

네이티브 details 요소 사용하기

details 예시에는 nhsuk-details__summary와 summary-text span이 있으며, 그 뒤에 nhsuk-details__text가 옵니다. 브라우저의 네이티브 동작으로 열립니다. 예약 정보와 실제 예약이 이루어지지 않는다는 사실은 모든 방문자에게 중요하므로 공개 영역에 표시하세요.

10.6에서는 Nunjucks API에 summary.text 또는 summary.html을 사용하며, 이전의 summaryText 옵션은 더 이상 사용되지 않습니다. 매크로를 사용한다면 새로운 객체 형식을 선택하세요. HTML 예시는 템플릿 의존성을 추가하지 않으면서 동일한 구조를 유지합니다.

지원 사양 읽기

NHS 디자인 시스템 선택 오류 및 확인

미리 선택하지 않고 그룹 유효성 검사하기

처음에는 아무 옵션도 선택되어 있지 않습니다. 답변을 선택하지 않고 계속하면 인라인 오류가 표시되고 그룹이 오류 메시지와 연결됩니다. 그러면 미리보기에서 오류에 포커스가 이동합니다. 확인 화면에서 돌아와도 선택한 항목은 그대로 표시됩니다. 이는 네이티브 컨트롤 위에 애플리케이션 상태 처리로 구현하는 동작입니다.

확인 화면에는 선택한 방문 방식과 가상의 예약 정보가 다시 표시됩니다. 작업 버튼에는 ‘선호 방식 변경’이라고 표시합니다. 의료 서비스에서 해당 선호 방식을 수락했다는 인상을 주는 확인 문구는 없으며, 건강 관련 조언이나 준비 요건도 임의로 추가하지 않습니다.

  1. 방문 방식을 선택하기 전에 계속 진행하세요.
  2. 전화를 선택하고 로컬 확인 화면을 여세요.
  3. 방문으로 선호 방식을 변경하고 확인 화면이 업데이트되는지 살펴보세요.

지원 사양 읽기

NHS 디자인 시스템 로컬 프런트엔드 에셋

선택한 패키지와 모듈 사용하기

설정 과정에서는 10.6.1 CSS와 브라우저 모듈을 정적 에셋 디렉터리에 복사합니다. 모듈은 initAll을 내보내며, 컴포넌트 마크업이 생성된 후 이를 호출하세요. 독립형 예시에서도 동일한 배포 파일을 로컬에서 제공하고 페이지 수준에서 Arial을 재정의합니다.

스타일에는 컴포넌트 규칙과 반응형 기반 스타일이 포함됩니다. 확인 패널을 변경하는 작은 스크립트는 별도의 애플리케이션 코드입니다. 실제 서비스에서는 가상의 예약 레코드를 관리되는 데이터로 대체하고, 자체 백엔드를 통해 실제 선호 방식 요청을 처리해야 합니다.

지원 사양 읽기

NHS 디자인 시스템 구성 검토하기

의료 서비스 맥락 확인하기

중점적으로 확인할 사항은 방문자가 예약 정보를 식별할 수 있는지, 방문 방식에 대한 선호가 아직 확정되지 않았음을 이해하는지, 맥락을 잃지 않고 선택한 방식을 변경할 수 있는지입니다. 일반적인 성공 토스트는 이 차이를 흐릴 수 있습니다.

키보드로 라디오 그룹과 details 요약을 조작해 보고, 진료소 이름이 긴 경우 좁은 화면에서 어떻게 표시되는지 확인하세요. 선택 항목이 없는 경우 표시되는 오류는 그룹으로 돌아갈 수 있게 해야 합니다. 라이브러리는 재사용 가능한 동작을 제공하지만, 실제 예약 규칙과 임상 정보에 대한 책임은 해당 기관에 있습니다.

지원 사양 읽기

NHS 디자인 시스템 컴포넌트 예시

방문 방식 라디오 그룹

상호 배타적인 네이티브 입력과 NHS 컴포넌트 클래스를 사용한 라벨 지정 필드셋입니다.

html
<fieldset class="nhsuk-fieldset" aria-describedby="contact-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">How would you prefer to attend?</legend>
  <div class="nhsuk-hint" id="contact-hint">Select one option.</div>
  <div class="nhsuk-radios" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="in-person" name="attendance" type="radio" value="in-person">
      <label class="nhsuk-label nhsuk-radios__label" for="in-person">In person</label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="telephone" name="attendance" type="radio" value="telephone">
      <label class="nhsuk-label nhsuk-radios__label" for="telephone">Telephone</label>
    </div>
  </div>
</fieldset>

코드 참조

선택적 추가 안내

네이티브 details 요소를 사용하면 작업 내용을 숨기지 않고 추가 정보를 표시할 수 있습니다.

html
<details class="nhsuk-details">
  <summary class="nhsuk-details__summary">
    <span class="nhsuk-details__summary-text">About these example choices</span>
  </summary>
  <div class="nhsuk-details__text"><p>These are fictional options, not available appointment slots.</p></div>
</details>

코드 참조

완전한 독립 실행형 예시

전체 문서에 레이아웃, 컨트롤 및 초기화가 포함되어 있습니다. 링크된 예시 아카이브의 압축을 풀면 정확한 상대 경로의 벤더 에셋을 얻을 수 있습니다. 그런 다음 HTTP로 제공하세요.

html
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Appointment preference — OpenDesign study</title><link rel="stylesheet" href="vendor/nhsuk-10.6.1/nhsuk-frontend.min.css"><style>body,body *,body *::before,body *::after{font-family:Arial,sans-serif!important}[hidden]{display:none!important}.study-strip{background:white;border-bottom:1px solid #d8dde0;padding:16px}.study-strip p{margin:0}.study-card{background:#fff;border:1px solid #d8dde0;padding:24px;margin-bottom:32px}h1:focus{outline:none}.study-result{border-left:4px solid #005eb8;padding:16px 24px;background:white}button,a,input{touch-action:manipulation}</style></head><body><header class="study-strip"><p class="nhsuk-body-s"><strong>OpenDesign · NHS component study</strong><br>Fictional appointment. This page cannot book or change care.</p></header><main class="nhsuk-width-container nhsuk-main-wrapper nhsuk-main-wrapper--s" id="maincontent"><div class="nhsuk-grid-row"><div class="nhsuk-grid-column-two-thirds"><div class="study-card"><h2 class="nhsuk-heading-m">Example appointment</h2><p class="nhsuk-body">Community clinic · Alex Example<br>Tuesday, 20 October · 10:30am</p></div><section id="choice"><h1 class="nhsuk-heading-l">Choose an attendance preference</h1><form id="form" novalidate><div class="nhsuk-form-group" id="group"><fieldset class="nhsuk-fieldset" aria-describedby="contact-hint">
  <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">How would you prefer to attend?</legend>
  <div class="nhsuk-hint" id="contact-hint">Select one option.</div>
  <div class="nhsuk-radios" data-module="nhsuk-radios">
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="in-person" name="attendance" type="radio" value="in-person">
      <label class="nhsuk-label nhsuk-radios__label" for="in-person">In person</label>
    </div>
    <div class="nhsuk-radios__item">
      <input class="nhsuk-radios__input" id="telephone" name="attendance" type="radio" value="telephone">
      <label class="nhsuk-label nhsuk-radios__label" for="telephone">Telephone</label>
    </div>
  </div>
</fieldset></div><details class="nhsuk-details">
  <summary class="nhsuk-details__summary">
    <span class="nhsuk-details__summary-text">About these example choices</span>
  </summary>
  <div class="nhsuk-details__text"><p>These are fictional options, not available appointment slots.</p></div>
</details><button class="nhsuk-button" type="submit">Review preference</button></form></section><section id="review" hidden><h1 class="nhsuk-heading-l" tabindex="-1" id="review-title">Your preference</h1><div class="study-result"><p class="nhsuk-body" id="selected"></p><p class="nhsuk-body">This is a local example. The appointment has not changed.</p></div><button class="nhsuk-button nhsuk-button--secondary nhsuk-u-margin-top-5" id="change" type="button">Change preference</button></section><p class="nhsuk-body-s">Native 10.6.1 controls with Arial. <a href="vendor/nhsuk-10.6.1/LICENSE.txt">Frontend licence</a>.</p></div></div></main><script type="module">import{initAll}from './vendor/nhsuk-10.6.1/nhsuk-frontend.min.js';initAll();const form=document.getElementById('form'),group=document.getElementById('group'),fs=group.querySelector('fieldset');form.addEventListener('submit',e=>{e.preventDefault();document.getElementById('error')?.remove();group.classList.remove('nhsuk-form-group--error');fs.setAttribute('aria-describedby','contact-hint');const value=form.querySelector(':checked')?.value;if(!value){group.classList.add('nhsuk-form-group--error');const p=document.createElement('p');p.id='error';p.className='nhsuk-error-message';p.tabIndex=-1;p.textContent='Select how you would prefer to attend';fs.querySelector('.nhsuk-radios').before(p);fs.setAttribute('aria-describedby','contact-hint error');p.focus();return}document.getElementById('selected').textContent='Selected method: '+(value==='telephone'?'Telephone':'In person');document.getElementById('choice').hidden=true;document.getElementById('review').hidden=false;document.getElementById('review-title').focus()});document.getElementById('change').addEventListener('click',()=>{document.getElementById('review').hidden=true;document.getElementById('choice').hidden=false;form.querySelector(':checked').focus()});</script></body></html>

코드 참조

  • Sources에서 완전한 예시를 다운로드하세요. README에 정확한 로컬 실행 명령이 안내되어 있습니다.
  • 벤더 경로는 이 문서에 대한 상대 경로로 유지하세요. 아카이브에는 이 미리보기에 사용된 에셋이 모두 포함되어 있습니다.
04

NHS 디자인 시스템 에이전트 설정

구현 시작점

셸 명령어와 HTML를 각각 해당 파일에 배치하세요. Arial은 독립 미리보기에서만 사용하는 명시적 재정의입니다. NHS 조직은 실제 글꼴 라이선스와 브랜드 요구사항을 따라야 합니다. Sources의 전체 작동 예제 ZIP에는 정확한 미리보기 종속성과 전체 문서도 들어 있습니다. 압축을 풀고 해당 디렉터리에서 python3 -m http.server 8080을 실행한 다음 http://localhost:8080/nhs.html을 여세요. 모듈 기반 예제는 file://로 열지 마세요.

셸 / HTML
npm install [email protected]
mkdir -p public/assets
cp node_modules/nhsuk-frontend/dist/nhsuk/nhsuk-frontend.min.css public/assets/
cp node_modules/nhsuk-frontend/dist/nhsuk/nhsuk-frontend.min.js public/assets/

<link rel="stylesheet" href="/assets/nhsuk-frontend.min.css">
<style>body, body *, body *::before, body *::after { font-family: Arial, sans-serif !important; }</style>
<script type="module">
  import { initAll } from '/assets/nhsuk-frontend.min.js';
  initAll();
</script>

프로젝트를 위한 프롬프트

에이전트 프롬프트
NHS.UK Frontend 10.6.1을 사용해 독립적인 예약 선호도 질문을 만드세요. 상호 배타적인 참석 방법에는 fieldset과 legend를, 라디오 버튼 안내에는 연결된 힌트를, 선택 사항인 도움말에는 네이티브 Details를 사용하세요. 질문과 필수 안내는 항상 보이게 하세요. 답변하지 않은 상태로 검토 단계에 진입하면 링크가 포함된 오류 요약과 인라인 오류를 표시하고, 로컬 검토 화면에서 돌아왔을 때 선택한 방법을 유지하세요. 문서에 명시된 Arial 학습용 재정의와 함께 일치하는 CSS 및 모듈 initAll을 로드하세요. 예약 조회, 실제 예약 변경, 임상 조언 또는 NHS를 사칭하는 내용을 추가하지 마세요.
05

NHS 디자인 시스템 출처 및 범위

NHS.UK frontend 10.6.1을 사용한 독립 예약 선호도 학습 예제입니다. NHS 로고, 라이선스가 있는 Frutiger 글꼴, 실제 예약, 임상 안내 또는 NHS의 보증을 암시하는 내용은 포함하지 않습니다.