shaunbent/govuk-proposal-pages

GOV.UK 제안 페이지

목적

방향을 주장하거나, 아이디어를 설명하거나, 변경 사항을 피칭하는 단일 자체 포함 HTML 페이지를 생성합니다. 실제 GOV.UK 디자인 시스템 스타일과 소규모 재사용 가능한 구성 요소 라이브러리를 사용합니다.

지배 원칙: 내용을 보여주고, 설명하지 마십시오. 팀이 소유한 것들의 목록은 카드 그리드가 됩니다. 일련의 단계는 흐름이 됩니다. 비교는 차이점이 강조된 표가 됩니다. 산문은 구성 요소 사이의 연결 조직일 뿐, 주요 정보 전달 방식이 아닙니다.

내용을 설명하세요; 이 스킬이 외형을 처리합니다.

출력물은 하나의 HTML 파일입니다

이 스킬로 만든 페이지는 파일로 공유되며, 종종 SharePoint 또는 유사한 문서 라이브러리에 업로드되어 거기서 연결됩니다. 따라서:

• 모든 것이 하나의 .html 파일 안에 있습니다. CSS, 글꼴 및 이미지가 포함됩니다(글꼴과 이미지는 base64 데이터 URI로). 외부 스타일시트, 스크립트, 글꼴 또는 이미지가 없습니다.
• JavaScript가 꺼져 있어도 페이지가 올바르게 읽혀야 합니다. 일부 문서 라이브러리는 미리보기에서 스크립트를 제거하거나 차단합니다. 대화형 구성 요소(예: 보기 전환기)는 개선 사항입니다. JavaScript 없이 표시되는 기본 상태는 그 자체로 의미가 있어야 합니다.
• 독자를 위한 빌드 단계가 없습니다. 파일이 브라우저에서 직접 열립니다.

파일

• page-starter.html은 빈 페이지입니다: GOV.UK Frontend CSS, base64로 포함된 GDS Transport 글꼴, 전체 구성 요소 CSS, 상태 배너, 히어로 및 변경 로그가 포함된 바닥글입니다. 모든 새 페이지는 이 파일의 복사본으로 시작합니다. GDS Transport는 GOV.UK 용도로만 라이선스가 부여됩니다. GOV.UK 외부에서는 다른 서체로 교체하십시오(NOTICE.md 참조).
• docs/index.html은 이 스킬에 대한 문서 페이지이며, 스킬 자체로 구축되었습니다. "구성 요소" 섹션은 시각적 참조 자료입니다: 각 구성 요소의 이름, 라벨, 사용 시기, 피해야 할 시기, 라이브 예제가 포함되어 있습니다. gx-specimen__demo 블록에서 구성 요소 마크업을 복사하십시오. gx- 클래스는 복사하지 마십시오; 이 클래스는 문서 페이지 스타일링만 합니다. 시작 파일과 동일한 구성 요소 CSS를 사용하므로 복사된 마크업이 변경 없이 작동합니다.

문서 구조

구성 요소를 선택하기 전에 주장을 정리하십시오. 대부분의 제안은 이 순서를 따릅니다. 내용에 필요하지 않은 섹션은 생략하십시오.

섹션	기능	자주 어울리는 구성 요소
상태 및 히어로	문서가 무엇인지, 한 가지 핵심 내용을 전달합니다	상태 배너, 히어로
정의	청중이 아이디어를 모를 경우 설명합니다	카테고리, 팬아웃, 레이어, 코드 쌍
제공하는 것	모든 그룹을 위한 이점을 조기에 제시합니다	혜택 그리드, 와이드 카드
지금인 이유	현재 문제와 증거를 제시합니다	사일로, 통계, 비교 표, 다대일, 연구 인용
작동 방식	제안된 접근 방식을 제시합니다	흐름, 전후 비교, 허브 앤 스포크, 팬인, 작업 예제
담당자	책임을 명시합니다	책임, 패널
시작 지점	범위와 순서를 제시합니다	단계, 타임라인
위험	발생할 수 있는 문제를 제시합니다	위험
미결 질문	독자에게 필요한 사항을 질문합니다	미결 질문
성공	어떻게 성공했는지 확인할 방법을 제시합니다	성공 측정, 결과
바닥글	버전 및 변경 로그	변경 로그

독자가 이미 솔루션 공간을 이해하고 있는 경우에만 "지금인 이유"를 먼저 넣으십시오(편집 원칙 참조).

구성 요소 카탈로그

모든 구성 요소에는 이름이 있습니다. 이 스킬을 사용하는 사람은 구성 요소를 이름으로 요청할 수 있으며("애플리케이션이 어디서 오는지 보여주기 위해 팬인 사용"), 제안할 때도 동일한 이름을 사용해야 합니다. docs/index.html의 "구성 요소" 섹션에는 각 구성 요소가 라이브로, 클래스, 사용 시기, 피해야 할 시기와 함께 표시됩니다. 거기서 마크업을 복사하십시오.

페이지 가구

이름	클래스	사용 시기
상태 배너	pt-topbanner	모든 페이지. 문서의 버전과 한 줄 설명을 표시합니다.
히어로	pt-hero	모든 페이지. 눈썹 태그, 제목 및 문서에서 가장 날카로운 문장.
지원 노트	pt-note	다이어그램, 표 또는 통계 아래의 메타 정보: 출처, 주의 사항, "예시".
변경 로그	pt-footer	모든 페이지의 바닥글. 최신 항목부터 표시.

카드

이름	클래스	사용 시기
혜택 그리드	pt-owns-grid	전달, 소유 또는 획득한 세 가지 또는 네 가지 항목.
와이드 카드	pt-owns-card--wide	형제 항목보다 더 많은 공간이 필요하거나 행에 하나의 카드만 남지 않도록 할 때.
원칙	pt-works-grid	세 가지 원칙 또는 작업 방식.
카테고리	pt-categories	각각 카테고리를 보여주는 작은 시각적 요소가 있는 유형.
패널	pt-card	그리드 카드보다 더 많은 공간이 필요한 포인트. 다른 카드와 동일한 스타일.
위험	govuk-inset-text pt-card pt-card--warning	보호해야 할 위험. 경험을 바탕으로 명확하게 진술.
결과	pt-card pt-card--success	성공 시 이 상태가 되는 것.

숫자

이름	클래스	사용 시기
통계	pt-baseline-grid	핵심 숫자. 각 숫자에는 명확한 라벨이 있으며, 가능한 경우 집합이 명시된 총합에 도달합니다.

다이어그램

이름	클래스	사용 시기
팬아웃	pt-fanout	하나의 소스가 여러 출력을 공급.
팬인	pt-fanin	하나의 것으로 합쳐지는 여러 소스: 결정에 대한 입력, 하나의 레코드를 공급하는 데이터, 하나의 서비스에 기여하는 팀. 세 개에서 다섯 개의 입력에 가장 잘 작동합니다. 예제는 y 12.5, 37.5, 62.5 및 87.5에서 시작하는 네 개의 곡선을 그립니다. 다른 수의 입력에 대해서는 각 곡선을 입력의 중심에서 시작하십시오(세 개의 경우: 16.7, 50 및 83.3).
허브 앤 스포크	pt-hub	최대 네 개의 연결된 부분이 있는 하나의 중앙 요소.
사일로	pt-silos	여러 곳에 별도로 보관된 동일한 것. 아무것도 연결하지 않음. 다른 복사본에 플래그 지정.
다대일	pt-many-to-one	동일한 것으로 이어지는 여러 이름 또는 경로: 중복, 별칭, 중복 작업.
전후 비교	pt-before-after	현재와 제안된 동일한 항목을 나란히 표시.
레이어	pt-layers	라벨이 있는 화살표로 연결된 서로 위에 쌓이는 수준. 커넥터 라벨은 일반 두께.
흐름	pt-flow	번호가 매겨진 단계와 최종 상태가 있는 프로세스. 결정되지 않은 목적지는 "합의할 접근 방식" 태그로 열려 있음 표시.
단계	pt-phases	실제 순서대로 작업 단계. 현재 단계는 채워짐.
타임라인	pt-timeline	날짜가 있는 이정표. 과거 이정표는 채워지고, 미래는 비어 있음.
스펙트럼	pt-spectrum	두 끝 사이의 범위에 있는 것들의 위치: 성숙도, 노력, 위험.
팀	pt-squads	특히 재구성 시 팀 간의 관계. 상태를 변경하는 팀은 점선으로 표시.

표 및 목록

이름	클래스	사용 시기
비교 표	pt-compare	여러 옵션 또는 장소를 나란히 표시. 행을 그룹화하고 전체 셀에서 이상한 값을 강조.
책임	pt-split	누가 무엇을 담당하는지. 두 그룹을 나란히 표시.
미결 질문	pt-questions	답변을 원하는 질문. 각각 대상자 태그 포함.
성공 측정	pt-check-list	다섯 또는 여섯 개의 확인 가능한 결과.

예제 및 증거

이름	클래스	사용 시기
작업 예제	pt-example	구체적인 사례: 시각적 자료, 각 장소에서 오늘날 처리하는 방식.
연구 인용	pt-quote	사용자, 동료 또는 이해관계자가 실제로 말한 내용. 누가 말했는지 포함.
코드 쌍	pt-code-pair	데이터, 코드 또는 구성. 단독 또는 나란히 표시. 단순화된 스니펫은 "예시" 라벨.
색상 점	pt-swatch	표나 문장에서 인라인으로 표시된 색상 또는 상태. 항상 텍스트 라벨과 쌍을 이룸.

대화형

이름	클래스	사용 시기
보기 전환기	pt-views	"오늘"과 "제안"과 같은 두 상태 간에 다이어그램 전환. 선택 사항, JavaScript 필요.

내용이 이 중 어느 것에도 맞지 않으면 짧은 단락을 작성하거나(적당히 괜찮음) 구성 요소를 추가하십시오(라이브러리 확장 참조).

편집 원칙

구조

• 하나의 문서, 하나의 일관된 주제. 모든 구성 요소는 중심 주장에 기여해야 합니다. 흥미롭지만 하중을 지지하지 않는 것은 잘라내십시오.
• 청중이 아이디어를 모를 경우 아이디어를 먼저 설명하고 정당화하십시오. 문제 우선은 사람들이 이미 솔루션 공간을 이해할 때 작동합니다. 그렇지 않으면 문제 섹션이 탈출구 없는 불만 목록으로 읽힙니다. 기본 순서는 "문서 구조"를 참조하십시오.
• 이점을 먼저 제시하십시오. 독자는 첫 화면 또는 두 화면 내에 관심을 가질지 결정합니다.
• 첫 번째 예제로 전체 범위를 보여주십시오. 첫 번째 예제가 좁으면 독자는 전체 제안이 좁다고 가정합니다. 아이디어가 광범위하게 적용되는 경우, 넓이를 암시하는 예제로 시작한 다음 좁은 사례를 증거로 사용하십시오.
• 있을 필요가 없는 섹션은 잘라내십시오. 섹션이 다른 대화를 위한 결정에 관한 것이라면 생략하십시오.

언어

• 용어를 사용하기 전에 소개하십시오. 여기에는 제목, 라벨 및 표 그룹이 포함됩니다. 용어가 설명되기 전에 나타나면 대신 일반 설명을 사용하십시오.
• 각 용어에 하나의 역할을 부여하십시오. 두 개의 유사한 단어가 모두 나타나는 경우(예: 단일 선택에 대한 "결정"과 전체 방법에 대한 "접근 방식"), 문서 전체에서 각각 고유한 의미를 유지하십시오.
• 접근 방식을 "일반적인 방식"으로 설명하고, "유일한 방식"이라고 말하지 마십시오. 정말 유일한 방식이 아니라면 더 정확하고 토론을 유도합니다.
• 설명하는 단어를 사용하고 비난하지 마십시오. "일부 장소에서는 정의되고 다른 곳에서는 그렇지 않음"은 상황을 설명합니다. "격차" 또는 "누락"은 누군가가 실패했음을 암시합니다.
• 작성자가 표현을 제공하면 그대로 사용하십시오. 문법만 수정하고 변경한 사항을 말하십시오.

증거

• 소스의 실제 데이터를 사용하십시오(시스템, 스프레드시트, 내보내기). 기억하거나 추정한 수치를 사용하지 마십시오. 숫자가 어디서 왔는지 말하십시오.
• 스크린샷 또는 요약에서 읽은 모든 내용에 플래그를 지정하여 페이지를 공유하기 전에 확인할 수 있도록 하십시오.
• 상태를 과장하지 마십시오. 어떤 것이 공식적으로 동의되지 않았지만 잘 받아들여졌다면 정확하게 말하거나 상태를 생략하십시오.
• 결정되지 않은 선택은 결정되지 않은 것으로 표시하십시오. 옵션에 "합의할 접근 방식" 태그를 붙이는 것이 추측을 결정으로 제시하는 것보다 낫습니다.

혼합 청중에 대한 어조

• 공평하십시오. 여러 팀 또는 장소와 관련된 문제를 보여줄 때 각 팀의 역할을 보여주십시오. 한 그룹을 지목하는 페이지는 해당 그룹이 방어적으로 읽습니다.
• 방 안의 모든 그룹을 위한 공유 이점을 구성하십시오. 각 그룹이 얻는 것을 각 용어로 설명하십시오. 실제 동기라도 그룹 간의 마찰을 문서에서 언급하지 마십시오. 이점은 설명하지 않고도 해결할 수 있습니다.

하우스 스타일

기본 하우스 스타일, 상황에 맞게 변경하십시오:

• 영국 영어, 문장 케이스 제목, 옥스포드 쉼표
• 엠 대시 없음. 쉼표, 콜론, 세미콜론 또는 마침표로 재구성
• "X가 아니라 Y입니다" 구조 없음
• 군사적 또는 전투적 은유 없음
• 정부는 이름의 일부가 아닌 경우 소문자로 표기
• 평이하고, 직접적이며, 자신감 있음. 모든 단어가 그 자리를 차지하며, 소개 줄은 핵심 내용 줄을 반복하지 않음

시각적 규칙

• 모든 곳에서 하나의 카드 처리 방식. 카드는 흰색, 1px 회색 테두리, 4px 파란색 상단 테두리, 선택적 아이콘, 작은 제목(govuk-heading-s) 및 작은 본문 텍스트(govuk-body-s). 일회성 카드 스타일을 만들지 마십시오. 새 내용을 일치하도록 다시 스타일링하십시오.
• 그리드에 고아 없음. 그리드에서 하나의 카드가 행에 혼자 남게 되면 해당 카드를 넓게 만들거나 열 수를 변경하십시오.
• 색상 견본은 원형입니다. GOV.UK 디자인 시스템 색상 페이지와 일치합니다.
• 비교 표는 전체 셀을 강조합니다. 텍스트 뒤의 인라인 배경이 아닙니다. 따라서 각 열 아래에 값이 정렬됩니다. 모든 셀 및 그룹 헤더는 동일한 왼쪽 가장자리를 공유합니다.
• 다이어그램의 커넥터 라벨은 일반 두께입니다. 굵은 글씨는 제목과 가리키는 대상에 사용됩니다.
• 지원 노트(pt-note): 보조 텍스트 색상(#505a5f)의 16px 작은 본문 텍스트. 다이어그램, 표 또는 통계 아래의 메타 정보에 사용: 주의 사항, 출처, "예시" 라벨.
• 나란히 있는 코드 블록은 동일한 높이입니다.
• 다이어그램은 box-sizing: border-box를 사용합니다(구성 요소 CSS에서 설정). 따라서 패딩과 테두리가 구성 요소를 상자 밖으로 밀어내지 않습니다.
• 히어로 태그는 한 줄로 유지됩니다. GOV.UK 태그는 기본적으로 최대 너비 160px입니다. 구성 요소 CSS가 히어로 및 배너에 대해 이를 해제합니다.
• 사용자 정의 글꼴 또는 이미지는 포함되어야 하며, 라이선스가 허용하는 경우에만 가능합니다. 먼저 라이선스를 확인하십시오. 사용자 정의 서체는 종종 수동 수직 중앙 정렬이 필요합니다. 렌더링된 텍스트를 측정하고 패딩을 조정하십시오.
• 접근성: 다이어그램에 텍스트 대안 제공(role="img" 및 다이어그램 내용을 설명하는 aria-label 포함), 대화형 컨트롤에 가시적 포커스 상태 유지, 색상만으로 차이를 보여주지 마십시오(강조된 셀도 굵게 표시).

대화형 구성 요소

보기 전환기(pt-views)를 사용하면 독자가 다이어그램을 "오늘"과 "제안" 또는 "밝음"과 "어두움"과 같은 상태 간에 전환할 수 있습니다. 선택 사항입니다:

• 기본 상태는 JavaScript 없이도 의미가 있는 상태여야 합니다.
• aria-pressed가 있는 실제 <button> 요소를 사용하십시오.
• 스크립트를 인라인으로 유지하고 작게 유지하십시오. 시작 파일에 재사용 가능한 스크립트가 포함되어 있습니다.

빌드 워크플로

1. 먼저 내용을 수집하십시오: 주장, 증거, 대상 및 하고자 하는 작업. 내용이 명확해지기 전에 구성 요소를 선택하면 내용이 얇은 정교한 페이지가 생성됩니다.
2. "문서 구조"를 사용하여 섹션을 계획하고 카탈로그에서 이름별로 구성 요소를 선택하십시오. 사람이 특정 구성 요소를 요청한 경우 해당 구성 요소를 사용하십시오.
3. page-starter.html을 새 파일로 복사하고 배너, 히어로 및 바닥글을 채우십시오.
4. docs/index.html의 "구성 요소" 섹션에서 각 구성 요소의 마크업을 복사하고 자리 표시자 내용을 바꾸십시오. 페이지에 자리 표시자 텍스트를 남기지 마십시오.
5. 페이지가 보기 전환기를 사용하는 경우 시작 파일 끝에 스크립트를 유지하고, 그렇지 않으면 삭제하십시오.
6. 페이지를 브라우저에서 확인하고 시각적 회귀가 없는지 확인하십시오.

라이브러리 확장

기존 구성 요소로 표현할 수 없는 새로운 유형의 정보가 있는 경우 새 구성 요소를 추가할 수 있습니다. 클래스에 대해 의미 있는 이름을 선택하고 govuk-body 및 govuk-heading-s와 같은 GOV.UK 타이포그래피 유틸리티를 사용하여 내용을 일관되게 유지하십시오. 구성 요소 CSS는 페이지 시작 파일의 <style> 블록에 있습니다. 이 CSS 파일은 GOV.UK Frontend 원본 스타일시트와 동일한 방식으로 업데이트됩니다.