GOV.UK Design System

GOV.UK デザインシステム / 2012– / 양식 / 플랫폼 화면 언어

영국 정부의 Government Digital Service가 공공 서비스를 위해 공개하고 유지하는 설계 언어다. 모든 것을 장식 없는 왼쪽 정렬 한 단으로 GDS Transport에 짜고, 모서리를 굴리지 않은 초록 버튼은 아래 변의 짙은 초록 띠로 두께를 얻어 누르면 그만큼 가라앉는다. 키보드 초점이 놓인 요소는 노란 바탕과 검은 밑줄로 나타낸다.

GOV.UK Design System — GOV.UK 첫 화면에 조판된 GDS Transport 2025년 — Wikimedia Commons / Public domain
GOV.UK 첫 화면에 조판된 GDS Transport 2025년 — Wikimedia Commons / Public domain

한눈에 판단

시각적 특징

  • 장식이 없는 한 단의 왼쪽 정렬이고 테두리도 그림자도 거의 쓰지 않는다
  • 모서리를 굴리지 않은 초록 버튼의 아래 변에 짙은 초록 띠가 깔리고 누르면 그 두께만큼 가라앉는다
  • 초점이 놓인 요소만 노란 바탕으로 바뀌고 그 아래에 검은 선이 그어진다
  • 글자 크기는 48, 36, 24, 19, 16px이라는 성긴 단계만 있고 중간 크기가 없다

적합한 용도

  • 행정이나 공공 서비스의 신청 화면을 한 화면에 한 가지 질문씩 묻는 왼쪽 정렬 한 단으로 다시 짤 때
  • 키보드만으로 조작하는 사람에게 지금 초점이 어디에 있는지 의심 없이 전하고 싶을 때

이 양식 사용하기

짧은 지침을 프로젝트에 적용하거나 구조화된 사양을 AI 도구에 넘길 수 있습니다.

design.md이미지 프롬프트JSON APIMCP·기계 접근겹치기
ChatGPT에서 열기Claude에서 열기Google AI에서 열기
자세한 제작법과 출처제작 규칙, 실제 사례, 비교, 연구, 인용 형식

사전 항목

타이포그래피
산세리프 한 종류만 쓰고 크기는 다섯 단계로 고정해 중간을 만들지 않는다. 제목은 굵게, 본문은 19px을 기준으로 둔다.
구성
내용의 폭을 한 단으로 좁히고 모두 왼쪽 한 줄에 맞춘다. 단 나눔도 테두리도 쓰지 않고 화제의 끊김은 가로줄만으로 나타낸다.
재료
색은 뜻에 묶어서만 쓰고 장식으로 돌리지 않는다. 버튼은 모서리 반지름을 0으로 하고 자신의 더 어두운 색 띠를 아래 변에 깔아 두께를 만든다. 초점은 노란 바탕과 검은 밑줄로 고정한다.
주의
보기 좋게 다듬으려고 버튼 모서리를 굴리거나 입력란의 테두리를 가늘게 하면, 이 양식이 유일하게 기대는 두 신호인 누를 수 있는 두께와 초점의 위치가 사라진다.
더 읽을거리
the colour usage rules in the Styles section of the GOV.UK Design System / how the focused helper in govuk-frontend produces the yellow ground and the black underline / the origin of the typeface GDS Transport, and why it is distributed for government services alone

관련 항목

플랫폼 화면 언어 더 보기

플랫폼 화면 언어에서 공통 인상이 많은 항목을 우선해 골랐습니다.

플랫폼 화면 언어 전체 보기

이 항목을 인용하기

사전은 링크되기 위해 있다. 글을 쓰는 자리에 맞는 형식을 그대로 가져가면 된다.

Link
https://indexstyle.org/ko/styles/govuk-design-system
Markdown
[GOV.UK Design System — IndexStyle](https://indexstyle.org/ko/styles/govuk-design-system)
HTML
<a href="https://indexstyle.org/ko/styles/govuk-design-system">GOV.UK Design System — IndexStyle</a>

색인의 원래 위치로