capsrock/nordic-civic-design-skill

Nordic Civic Design

HDS의 값을 바탕으로 공공 서비스 화면을 만들기 위한 지침입니다. 헬싱키 시와는 관계없는 비공식 스킬입니다.

시의 서비스로 보이게 하는 것이 목적이 아닙니다. 사용하는 것은 수치와 구성의 방식이며, 시를 식별하는 요소는 사용하지 않습니다.

사용하지 않는 것

• 로고, 시 문장, 물결 모티브: 로고는 등록 상표로, 재제작이나 수정이 허가되지 않았습니다. 물결 모티브는 시의 시각 요소로, 제3자의 이용 조건을 확인할 수 없습니다.
• Helsinki Grotesk 폰트 파일: Camelot Typefaces의 상용 서체로, 재배포나 AI 학습에의 이용이 금지되어 있습니다. 번들링이나 웹, 앱에 임베딩하지 않습니다. CSS에서 서체 이름만 지정합니다.
• '헬싱키 시'를 명시하는 표현: 결과물의 이름이나 본문에 시의 공식으로 오인될 수 있는 단어를 넣지 않습니다.

서체

font-family: HelsinkiGroteskPro, "Schibsted Grotesk", Arial, "Noto Sans JP", sans-serif;

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Schibsted+Grotesk:wght@400;500;700&display=swap">

라이선스를 가진 사람의 환경에서는 원래 서체가 사용되고, 그 외에는 Schibsted Grotesk가 사용됩니다. 이것은 HDS의 지정이 아니라 이 스킬의 선택입니다. 공식 대체 서체는 Arial입니다.

Schibsted Grotesk는 OFL 1.1이며, 굵기는 400에서 900까지 있습니다. HDS의 3단계(400, 500, 700)를 그대로 사용할 수 있습니다.

일문 지정은 HDS에 없습니다. 일본어 화면에서는 Noto Sans JP를 기본으로 하고, 행 높이는 1.75로 합니다. 이것도 이 스킬의 판단입니다.

형태

형태의 기준이 HDS스러움의 중심입니다. 무너뜨리면 인상이 크게 달라집니다.

• 둥근 모서리는 0: 버튼, 입력 필드, 카드의 모든 곳에서 사용하지 않습니다.
• 테두리는 2px: 버튼, 입력 필드, 카드의 테두리에 사용합니다.
• 조작 부품은 높이 56px: 버튼과 입력 필드의 표준입니다. 작은 버튼은 44px입니다.
• 그림자는 사용하지 않음: HDS는 '그림자는 브랜드의 일부가 아니다'라고 명시하고 있습니다. 높이 표현, 강조, 문자 장식에 그림자를 사용하지 않습니다. 사용하는 것은 내용 위에 겹치는 토스트 알림과 다이얼로그의 구분뿐입니다.
• 카드는 테두리 없음이 기본: HDS의 기본입니다. 테두리 없는 카드는 연한 회색(--color-black-5) 면 위에 둡니다. 흰 바탕에 둘 때는 2px의 테두리 있음으로 합니다. 이 흰 바탕의 처리는 이 스킬의 판단입니다.
• 알림은 왼쪽에 8px의 띠: 면 전체를 강한 색으로 칠하지 않고, 연한 배경과 왼쪽 띠로 전달합니다.

색상

값은 references/tokens.css에, 색상별 사용처와 대비 표는 references/foundation.md에 있습니다. 색상 이름(bus, tram, metro, engel 등)은 헬싱키 시내 풍경에서 따왔습니다.

• 조작의 색상은 bus: --color-bus (#0000bf)를 주요 조작과 링크에 사용합니다. 호버는 --color-bus-dark입니다.
• 포커스는 coat-of-arms: --color-focus-outline의 3px 윤곽선을 사용합니다. 어두운 배경에서는 흰색으로 합니다.
• 본문은 black-90: --color-black-90 (#1a1a1a)입니다. 문자 색상은 검은색이나 흰색 중 하나이며, 다른 색상의 문자는 의도가 있을 때만 사용합니다.
• 액센트 색상은 면으로 사용: summer, suomenlinna, metro 등은 제목 띠나 구분선에 크게 사용합니다. 작게 흩뿌리면 개성이 나오지 않습니다. 한 화면에 1색을 기준으로 합니다. 이 기준은 이 스킬의 판단입니다.
• 흰 바탕에 문자로 배치할 수 있는 브랜드 색상은 4개: bus, brick, coat-of-arms, tram뿐입니다. metro는 큰 문자에 한하며, summer나 engel 등의 밝은 색상은 흰 바탕에서 면으로 사용합니다.
• -light와 -dark 변종은 주색으로 하지 않음: 호버 등 부품의 상태와 정보의 종류 구분에만 사용합니다.
• 상태 색상은 액센트와 구분: error, success, alert, info는 상태를 전달할 때만 사용합니다. 브랜드 색상을 상태 표시에 사용하지 않습니다. 색상만으로 전달하지 않고, 문자나 아이콘을 곁들입니다.

문자와 배경의 조합은 WCAG 2.1 AA의 대비비를 충족합니다. 본문은 4.5:1 이상, 큰 문자는 3:1 이상입니다. 브랜드 색상 위의 문자 색상은 foundation.md의 표에 따릅니다(bus, coat-of-arms, tram, brick 위는 흰색, 그 외는 black-90). 회색 문자는 --color-black-60까지이며, --color-black-50 이하는 흰 바탕에서 사용하지 않습니다.

여백

4px를 기준으로 합니다. 값은 --spacing-*와 --spacing-layout-*를 사용하며, 중간 값을 만들지 않습니다.

• 부품의 내부와 부품 사이: --spacing-*의 8, 12, 16, 24, 32px
• 섹션 사이: --spacing-layout-*의 48, 64, 96, 128px
• 작은 여백으로 모으고, 큰 여백으로 나눔: 가까운 것은 관계가 있는 것처럼 보입니다. 여백이 넓은 요소일수록 중요해 보입니다.
• 화면의 성격에 따라 밀도 변경: 홍보나 안내 화면은 넓게, 정보량이 많은 업무 화면은 좁힙니다.

문자

• 굵기는 3단계: 본문 400, 버튼이나 폼 라벨 500, 강조 700입니다.
• 본문은 16px부터: 16px가 HDS의 본문 최소값이며, 모든 화면 폭에서 사용할 수 있습니다. 글자량이 적은 화면에서는 18px를 기본으로 하고, 좁은 화면에서 16px로 낮춥니다. 14px는 보조적인 문자와 부품 내에서만 사용합니다.
• 제목은 두 가지 척도: 데스크탑은 h1이 64px, h2가 48px. 모바일과 업무 화면에서는 h1이 40px, h2가 32px입니다. 제목 계층은 의미대로 사용하며, 겉모양만 바꾸고 싶을 때는 토큰으로 크기를 변경합니다.
• 행 높이: 긴 본문은 1.5, 짧은 단락과 리드문은 1.2, 1줄 제목과 부품은 1, 작은 문자와 인용은 1.75입니다.

제목의 굵기는 700을 기본으로 합니다. 이것은 이 스킬의 판단이며, HDS 문서에는 제목 굵기 지정이 없습니다. 값의 표와 사용처는 references/foundation.md에 있습니다.

부품

references/components.md를 읽은 후 부품을 만듭니다. 버튼, 입력 필드, 체크박스, 알림, 카드, 링크의 값과 사용처가 있습니다. 요점은 다음과 같습니다.

• primary 버튼은 한 화면에 1개: 화면에서 가장 중요한 조작만입니다. 취소나 닫기는 supplementary로 하고, 테두리가 없으므로 아이콘을 붙입니다. 페이지 이동은 버튼이 아니라 링크입니다.
• 입력 필드에는 라벨을 반드시 붙임: 필수 항목은 *로 표시하고, 표시의 의미를 폼의 시작 부분에서 설명합니다.
• 알림은 중요한 정보에만: 인라인은 동시에 1개가 기준이며, 동적으로 추가하지 않습니다. 에러 등 중요한 알림은 자동으로 사라지지 않습니다.
• 카드 전체를 클릭 가능하게 하지 않음: 전체를 누를 수 있도록 하고 싶을 때는 Linkbox입니다.
• 외부 링크에는 아이콘: 원칙적으로 새 탭에서 열지 않습니다.

여기에 없는 부품은 형태, 색상, 여백의 기준으로부터 조립합니다. HDS의 값으로 확인하지 않은 것을 HDS의 값으로 쓰지 않습니다.

확인할 것

만든 후에는 다음을 살펴봅니다.

1. 둥근 모서리와 그림자가 남아 있지 않은가(토스트 알림과 다이얼로그의 그림자는 제외)
2. 토큰에 없는 색상과 여백 값을 사용하지 않았는가
3. 조작 부품의 높이가 44px 이상인가
4. 포커스 윤곽선이 보이는가
5. 문자와 배경의 대비비가 AA를 충족하는가
6. 로고, 물결 모티브, 시의 명칭을 사용하지 않았는가

출처

토큰과 부품의 값은 hds-design-tokens와 hds-core의 6.0.7에서, 사용처는 HDS의 공식 문서(https://hds.hel.fi/, 원문은 동일한 리포지토리의 site/src/docs)에서 가져왔습니다. 모두 MIT License, Copyright (c) 2023 City of Helsinki입니다. 라이선스 문은 references/LICENSE-HDS.txt에 있습니다. 스킬을 배포할 때는 이 파일도 함께 배포합니다. 색상 이름의 유래는 헬싱키 시의 비주얼 아이덴티티 안내에 따릅니다.