# UNDP 디자인 시스템

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

화살표 키로 탐색하고, 섹션을 살펴본 다음 로컬 읽기 횟수를 초기화하세요.

## UNDP 디자인 시스템 디자인 참고 자료

공개 @undp/design-system-assets 2.0.2 배포판의 구체적인 값과 동작입니다. 독자적으로 구성한 페이지와 진행 상태 동작은 별도로 표시합니다.

### 색상 팔레트 및 의미에 따른 표면

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --undpds-color-blue-600 | #006eb5 | 공개 패키지의 실제 값입니다. 예제에서는 편집 콘텐츠의 주요 영역에 파란색을, 보조 읽기 카드에 노란색을 사용합니다. 이러한 콘텐츠별 색상 지정은 독자적으로 구성했습니다. |
| --undpds-color-blue-700 | #1f5a95 | 공개 패키지의 실제 값입니다. 예제에서는 편집 콘텐츠의 주요 영역에 파란색을, 보조 읽기 카드에 노란색을 사용합니다. 이러한 콘텐츠별 색상 지정은 독자적으로 구성했습니다. |
| --undpds-color-gray-200 | #f7f7f7 | 공개 패키지의 실제 값입니다. 예제에서는 편집 콘텐츠의 주요 영역에 파란색을, 보조 읽기 카드에 노란색을 사용합니다. 이러한 콘텐츠별 색상 지정은 독자적으로 구성했습니다. |
| --undpds-color-gray-300 | #edeff0 | 공개 패키지의 실제 값입니다. 예제에서는 편집 콘텐츠의 주요 영역에 파란색을, 보조 읽기 카드에 노란색을 사용합니다. 이러한 콘텐츠별 색상 지정은 독자적으로 구성했습니다. |
| --undpds-color-gray-700 | #232e3d | 공개 패키지의 실제 값입니다. 예제에서는 편집 콘텐츠의 주요 영역에 파란색을, 보조 읽기 카드에 노란색을 사용합니다. 이러한 콘텐츠별 색상 지정은 독자적으로 구성했습니다. |
| --undpds-color-yellow-600 | #fbc412 | 공개 패키지의 실제 값입니다. 예제에서는 편집 콘텐츠의 주요 영역에 파란색을, 보조 읽기 카드에 노란색을 사용합니다. 이러한 콘텐츠별 색상 지정은 독자적으로 구성했습니다. |
| --undpds-color-dark-red | #d12800 | 공개 패키지의 실제 값입니다. 예제에서는 편집 콘텐츠의 주요 영역에 파란색을, 보조 읽기 카드에 노란색을 사용합니다. 이러한 콘텐츠별 색상 지정은 독자적으로 구성했습니다. |
| --undpds-color-background-default | #fff | 공개 패키지의 실제 값입니다. 예제에서는 편집 콘텐츠의 주요 영역에 파란색을, 보조 읽기 카드에 노란색을 사용합니다. 이러한 콘텐츠별 색상 지정은 독자적으로 구성했습니다. |
| --undpds-color-border-default | #000 | 공개 패키지의 실제 값입니다. 예제에서는 편집 콘텐츠의 주요 영역에 파란색을, 보조 읽기 카드에 노란색을 사용합니다. 이러한 콘텐츠별 색상 지정은 독자적으로 구성했습니다. |
### 현재 간격 스케일

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --undpds-spacing-002 | 2px | 내보낸 이름은 표기된 그대로 사용하세요. 구성 요소 CSS에는 이전 버전의 숫자 별칭도 포함되어 있으므로, 별칭 접미사만 보고 값을 추정하지 마세요. |
| --undpds-spacing-004 | 4px | 내보낸 이름은 표기된 그대로 사용하세요. 구성 요소 CSS에는 이전 버전의 숫자 별칭도 포함되어 있으므로, 별칭 접미사만 보고 값을 추정하지 마세요. |
| --undpds-spacing-008 | 8px | 내보낸 이름은 표기된 그대로 사용하세요. 구성 요소 CSS에는 이전 버전의 숫자 별칭도 포함되어 있으므로, 별칭 접미사만 보고 값을 추정하지 마세요. |
| --undpds-spacing-012 | 12px | 내보낸 이름은 표기된 그대로 사용하세요. 구성 요소 CSS에는 이전 버전의 숫자 별칭도 포함되어 있으므로, 별칭 접미사만 보고 값을 추정하지 마세요. |
| --undpds-spacing-016 | 16px | 내보낸 이름은 표기된 그대로 사용하세요. 구성 요소 CSS에는 이전 버전의 숫자 별칭도 포함되어 있으므로, 별칭 접미사만 보고 값을 추정하지 마세요. |
| --undpds-spacing-024 | 24px | 내보낸 이름은 표기된 그대로 사용하세요. 구성 요소 CSS에는 이전 버전의 숫자 별칭도 포함되어 있으므로, 별칭 접미사만 보고 값을 추정하지 마세요. |
| --undpds-spacing-032 | 32px | 내보낸 이름은 표기된 그대로 사용하세요. 구성 요소 CSS에는 이전 버전의 숫자 별칭도 포함되어 있으므로, 별칭 접미사만 보고 값을 추정하지 마세요. |
| --undpds-spacing-040 | 40px | 내보낸 이름은 표기된 그대로 사용하세요. 구성 요소 CSS에는 이전 버전의 숫자 별칭도 포함되어 있으므로, 별칭 접미사만 보고 값을 추정하지 마세요. |
| --undpds-spacing-048 | 48px | 내보낸 이름은 표기된 그대로 사용하세요. 구성 요소 CSS에는 이전 버전의 숫자 별칭도 포함되어 있으므로, 별칭 접미사만 보고 값을 추정하지 마세요. |
| --undpds-spacing-064 | 64px | 내보낸 이름은 표기된 그대로 사용하세요. 구성 요소 CSS에는 이전 버전의 숫자 별칭도 포함되어 있으므로, 별칭 접미사만 보고 값을 추정하지 마세요. |
| --undpds-spacing-080 | 80px | 내보낸 이름은 표기된 그대로 사용하세요. 구성 요소 CSS에는 이전 버전의 숫자 별칭도 포함되어 있으므로, 별칭 접미사만 보고 값을 추정하지 마세요. |
| --undpds-spacing-096 | 96px | 내보낸 이름은 표기된 그대로 사용하세요. 구성 요소 CSS에는 이전 버전의 숫자 별칭도 포함되어 있으므로, 별칭 접미사만 보고 값을 추정하지 마세요. |
| --undpds-spacing-160 | 160px | 내보낸 이름은 표기된 그대로 사용하세요. 구성 요소 CSS에는 이전 버전의 숫자 별칭도 포함되어 있으므로, 별칭 접미사만 보고 값을 추정하지 마세요. |
### 글꼴 및 테두리 참고 자료

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --undpds-font-family-proximanova | ProximaNova,sans-serif | 공개된 선언을 보여 주는 것으로, 이 미리보기에서 브랜드 글꼴을 불러온다는 의미는 아닙니다. 미리보기에서는 의도적으로 Arial 대체 글꼴을 사용합니다. |
| --undpds-font-family-sohnebreit | SohneBreit,ProximaNova,sans-serif | 공개된 선언을 보여 주는 것으로, 이 미리보기에서 브랜드 글꼴을 불러온다는 의미는 아닙니다. 미리보기에서는 의도적으로 Arial 대체 글꼴을 사용합니다. |
| --undpds-font-size-14 | 0.875rem | 공개된 선언을 보여 주는 것으로, 이 미리보기에서 브랜드 글꼴을 불러온다는 의미는 아닙니다. 미리보기에서는 의도적으로 Arial 대체 글꼴을 사용합니다. |
| --undpds-font-size-16 | 1rem | 공개된 선언을 보여 주는 것으로, 이 미리보기에서 브랜드 글꼴을 불러온다는 의미는 아닙니다. 미리보기에서는 의도적으로 Arial 대체 글꼴을 사용합니다. |
| --undpds-font-size-20 | 1.25rem | 공개된 선언을 보여 주는 것으로, 이 미리보기에서 브랜드 글꼴을 불러온다는 의미는 아닙니다. 미리보기에서는 의도적으로 Arial 대체 글꼴을 사용합니다. |
| --undpds-font-size-24 | 1.5rem | 공개된 선언을 보여 주는 것으로, 이 미리보기에서 브랜드 글꼴을 불러온다는 의미는 아닙니다. 미리보기에서는 의도적으로 Arial 대체 글꼴을 사용합니다. |
| --undpds-font-size-32 | 2rem | 공개된 선언을 보여 주는 것으로, 이 미리보기에서 브랜드 글꼴을 불러온다는 의미는 아닙니다. 미리보기에서는 의도적으로 Arial 대체 글꼴을 사용합니다. |
| --undpds-font-size-40 | 2.5rem | 공개된 선언을 보여 주는 것으로, 이 미리보기에서 브랜드 글꼴을 불러온다는 의미는 아닙니다. 미리보기에서는 의도적으로 Arial 대체 글꼴을 사용합니다. |
| --undpds-font-weight-regular | 400 | 공개된 선언을 보여 주는 것으로, 이 미리보기에서 브랜드 글꼴을 불러온다는 의미는 아닙니다. 미리보기에서는 의도적으로 Arial 대체 글꼴을 사용합니다. |
| --undpds-font-weight-bold | 700 | 공개된 선언을 보여 주는 것으로, 이 미리보기에서 브랜드 글꼴을 불러온다는 의미는 아닙니다. 미리보기에서는 의도적으로 Arial 대체 글꼴을 사용합니다. |
| --undpds-border-default | 2px | 공개된 선언을 보여 주는 것으로, 이 미리보기에서 브랜드 글꼴을 불러온다는 의미는 아닙니다. 미리보기에서는 의도적으로 Arial 대체 글꼴을 사용합니다. |
### 기본 탭 구조와 동작

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| data-undpds-component | tabs | tabs()가 검색하는 루트를 표시합니다. |
| Tab collection | .tabs-title[role="tab"] | 예제에서는 포커스 가능한 목록 항목과 이에 대응하는 패널을 사용합니다. 초기화 시 ID와 aria-controls가 설정됩니다. |
| Panels | .tabs-content > .tabs-panel | 탭과 같은 순서로 패널을 하나씩 배치하고, 각 패널에 고유하고 안정적인 ID를 지정합니다. |
| Deep links | data-deep-link="false" | 섹션을 전환할 때 포함된 예제의 URL 해시가 바뀌지 않도록 합니다. |
| Keyboard | Arrow keys, Home, End, Enter, Space | 기본 스크립트가 포커스를 이동하고 해당 패널을 활성화합니다. |
| State | aria-selected, tabindex, hidden, aria-hidden | 초기화와 선택 시 의미 구조가 업데이트되고 실제 패널 표시 여부도 변경됩니다. |
## UNDP 디자인 시스템 전체 가이드

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

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

## UNDP 디자인 시스템 UNDP 런타임 및 에셋 경계

### 정적 페이지에는 에셋 패키지를 사용하세요

> 제공된 예제는 @undp/design-system-assets 2.0.2를 설치합니다. 이 배포판에는 기본 CSS, 구성 요소 CSS 및 브라우저 스크립트가 포함되어 있으며, Storybook 전체 개발 저장소를 시작하는 것과는 다릅니다. 이 구성에는 기본 스타일시트, 탭 스타일시트 및 탭 스크립트만 필요합니다. all.min.js나 모든 구성 요소 스타일시트를 불러와도 읽기 작업 공간이 개선되지는 않으며, 관련 없는 동작만 추가됩니다.

- base-minimal.min.css는 기본 스타일과 타이포그래피 선언을 제공합니다.

- components/tab.min.css는 기본 탭의 표시 방식을 제공합니다.

- js/tabs.min.js는 tabs() 초기화 함수를 내보냅니다.

### 기관의 정체성과 예제 콘텐츠를 구분하세요

이 안내는 로컬 워크숍 계획을 주제로 독자적으로 작성한 OpenDesign 연습 콘텐츠입니다. UNDP 프로그램이나 정책 성명 또는 보고 포털이 아닙니다. 미리보기에는 엠블럼이나 기관 탐색 메뉴가 없습니다. 기본 스타일과 동작은 정확히 명시하고, 안내 내용과 체크박스를 이용한 진행 상태 및 초기화 동작은 독자적으로 작성한 애플리케이션 코드라고 분명히 설명합니다.

## UNDP 디자인 시스템 UNDP 디자인 시스템 색상 역할 및 편집 위계

### 실제 파란색 계열을 기준으로 구성하세요

제공되는 --undpds-color-blue-600은 #006eb5이고 blue-700은 #1f5a95입니다. 예제에서는 전자를 주요 영역의 배경에, 후자를 초기화 동작에 사용합니다. gray-200은 절제된 보조 카드를 구성하고, gray-300은 탭을 구분하며, yellow-600은 테두리 강조색으로 쓰입니다. 현재 선택된 탭에는 라이브러리의 진한 빨간색 밑줄이 표시됩니다. 이러한 역할은 스크린샷에서 추정한 것이 아니라 제공된 CSS에서 확인할 수 있습니다.

### SDG 색상에 임의의 상태 의미를 부여하지 마세요

기본 패키지에는 일반 색상 토큰뿐 아니라 별도의 SDG 팔레트도 포함되어 있습니다. 개발을 주제로 한 페이지라고 해서 해당 항목을 사용할 수 있다는 이유만으로 임의의 성공 또는 오류 상태에 지정해서는 안 됩니다. 이 구성에서는 완료 여부를 체크된 컨트롤과 알아보기 쉬운 개수로 표시하며, 색상만으로 검토 상태를 나타내지 않습니다.

## UNDP 디자인 시스템 UNDP 타이포그래피, 간격 및 글꼴 범위

### 선언된 글꼴과 실제로 불러온 글꼴을 구분하세요

패키지에는 ProximaNova 및 SohneBreit 글꼴 패밀리가 선언되어 있고 글꼴 파일도 포함되어 있지만, 이 미리보기에서는 의도적으로 Arial 대체 글꼴을 사용합니다. 예시의 설명과 CSS에서 이러한 대체를 확인할 수 있습니다. 참고 표에는 실제 글꼴 패밀리 선언이 그대로 기록되어 있어 원래 시스템을 이해하는 데 도움이 됩니다. 브랜드 글꼴을 적용하는 프로젝트에서는 글꼴 패밀리 이름만 지정하면 글꼴을 사용할 수 있다고 가정하지 말고, 적절한 에셋과 사용 권한을 확보해야 합니다.

### 실제 간격 이름을 사용하세요

현재 픽셀 간격 척도는 spacing-002부터 spacing-160까지이며, 12, 24, 48픽셀을 포함합니다. 탭 스타일시트에서는 spacing-03(8px), spacing-09(48px)과 같은 이전 별칭도 사용하며, 이 버전에는 두 별칭이 모두 포함되어 있습니다. 데모는 이러한 라이브러리 규칙을 유지하면서 720px 미만에서 단일 열로 바뀌는 2열 편집형 레이아웃을 추가합니다. 이 레이아웃의 중단점은 구성 요소 스타일시트의 48em 중단점과는 별개의 자체 구성 결정입니다.

## UNDP 디자인 시스템 UNDP 기본 탭 구조 및 초기화

### 탭과 패널의 개수를 일치시키세요

루트에는 data-undpds-component="tabs"가 있고, 목록에는 role="tablist"가 지정되어 있습니다. 그 안에는 role="tab"이 지정된 .tabs-title 요소 세 개가 있으며, .tabs-content 안에는 .tabs-panel 섹션 세 개가 있습니다. 스크립트는 순서에 따라 이 요소들을 짝짓습니다. 패널이 누락되거나 탭과 패널의 개수가 다르면 제대로 초기화되지 않습니다. 따라서 tabs()를 실행하기 전에 각 패널에 고정 ID를 부여하고 콘텐츠를 모두 채워 두어야 합니다. 기본 초기화 과정에서 aria-controls 및 aria-labelledby 관계가 설정되고, 선택된 항목에는 is-active가 지정됩니다.

### 해시 동작을 신중히 결정하세요

패키지에서는 기본적으로 딥링크가 활성화됩니다. 이 임베디드 작업 공간에서는 탭 목록에 data-deep-link="false"를 지정해 섹션을 전환해도 URL 해시가 바뀌지 않도록 합니다. 섹션 공유가 유용한 독립형 페이지라면 딥링크를 활성화할 수 있지만, 이 경우 초기 해시 선택과 히스토리 변경을 테스트해야 합니다. 임베디드 미리보기에서는 어느 페이지가 탐색을 담당하는지 결정하지 않은 채 해시 규칙을 적용하지 마세요.

## UNDP 디자인 시스템 UNDP 키보드 탐색 및 표시 상태

### 실제 패널 표시 여부를 확인하세요

화살표 키와 Home 또는 End 키를 누르면 기본 구현에서 활성 탭과 포커스가 이동합니다. Enter와 Space 키로도 탭을 활성화할 수 있습니다. 스크립트는 tabindex, aria-selected, hidden 및 aria-hidden을 함께 업데이트합니다. 활성 CSS 클래스만 확인하면 여러 패널이 계속 표시되거나 숨겨진 패널이 여전히 포커스를 받는 오류를 놓칠 수 있습니다. 브라우저 테스트에서는 선택된 항목뿐 아니라 실제로 표시되는 콘텐츠도 확인합니다.

### 검토 컨트롤을 해당 섹션에 연결해 두세요

각 패널에는 '이 섹션을 검토 완료로 표시'라는 레이블이 있는 네이티브 체크박스가 있습니다. 패널을 숨겨도 해당 노드가 다시 생성되지 않으므로 상태가 유지됩니다. 진행 개수는 정중한 방식으로 알리는 상태 메시지이며, 이 로컬 미리보기의 상태만 나타냅니다. 학습 이수 자격이나 서버 측 완료 기록이 아닙니다. 사용자는 섹션으로 돌아와 선택을 직접 취소할 수 있습니다.

## UNDP 디자인 시스템 UNDP 로컬 진행 상태 및 복구

### 초기화 범위를 명확히 하세요

읽기 진행 상태 초기화는 체크박스 세 개를 모두 지우고 개수를 다시 계산합니다. 활성 탭을 변경하거나 콘텐츠를 지우지는 않습니다. 이벤트 핸들러는 체크박스 변경 시와 동일한 진행 상태 함수를 사용하므로 완료 상태를 서로 다르게 정의할 일이 없습니다. 이 예시는 현재 문서 외부에 아무것도 저장하지 않으므로, 페이지를 완전히 새로고침하면 새로운 읽기 세션이 시작됩니다.

### 선택 사항인 읽기가 필수처럼 느껴지지 않게 하세요

개수는 현재 상태를 파악하는 데 도움을 줄 뿐, 이후 섹션에 접근하지 못하도록 막지 않습니다. 검토 완료 섹션이 0개여도 세 탭 모두 이용할 수 있으며, 원하는 순서로 살펴볼 수 있습니다. 확인을 필수로 요구하는 실제 워크플로를 만들려면 이 로컬 진행 상태 모델을 빌려 쓰는 대신 별도의 요구 사항과 오류 처리, 데이터 저장 방식을 마련해야 합니다.

## UNDP 디자인 시스템 UNDP 반응형 읽기 구성

### 콘텐츠를 억지로 줄이지 말고 재배치하세요

파란색 소개 영역과 각 패널은 넓은 화면에서 2열로 표시됩니다. 너비가 720px이 되면 한 열로 쌓이고, 바깥쪽 여백은 16px로 줄어들며 큰 제목도 한 단계 작아집니다. 필요하면 탭 목록이 줄바꿈되지만 모든 레이블은 그대로 표시됩니다. 고정 높이 패널을 사용하지 않으므로 번역이나 문단이 길어져도 잘리지 않으며, 보조 설명도 장식용 이미지가 아닌 실제 텍스트로 표시됩니다.

### 임베드된 영역에서 너비를 테스트하세요

상세 페이지의 콘텐츠 영역은 브라우저 표시 영역보다 좁습니다. 이 예시는 데스크톱, 태블릿, 휴대폰 너비뿐 아니라 독립 문서로서 너비 280px까지 테스트했습니다. 휴대폰 전체 화면에 맞는 구성 요소라도 상세 페이지의 안쪽 프레임에서는 넘칠 수 있습니다. 공통 페이지 테스트에서는 두 경우를 모두 측정합니다.

## UNDP 디자인 시스템 UNDP 정적 통합 전체 구성

### 제공된 파일을 한곳에 모아 두세요

제공된 index.html, undp.css, undp-app.js를 같은 디렉터리에 저장하고, 버전이 고정된 에셋 패키지를 설치한 다음 해당 디렉터리를 서버에 제공하세요. HTML는 애플리케이션 스크립트를 불러오기 전에 패키지의 기본 CSS, 탭 CSS 및 탭 브라우저 스크립트를 불러옵니다. 이 예시에는 번들러, jQuery 또는 GSAP가 필요하지 않습니다. 로컬에 임베드된 미리보기에서는 사용하지 않는 font-face 선언을 제거하고 동일한 구성 요소 에셋을 인라인으로 포함합니다.

1. 제공된 파일 세 개를 모두 같은 디렉터리에 저장하세요.

2. @undp/design-system-assets@2.0.2를 설치하세요.

3. 폴더를 서버에 제공하고 포인터와 키보드로 탭 선택을 테스트하세요.

4. 모든 섹션을 검토하고, 이전 섹션으로 돌아간 다음 로컬 개수를 초기화하세요.

### 구성 요소 동작과 애플리케이션 동작을 구분하세요

탭 스크립트는 패널 선택과 키보드 탐색을 담당합니다. 간단한 애플리케이션 스크립트는 검토 체크박스, 개수 표시, 초기화만 담당합니다. 이렇게 경계를 나누면 업그레이드 사항을 검토하기 쉽습니다. 먼저 기본 탭 동작과 토큰 변경 사항을 비교한 다음, 로컬 상태가 여전히 작동하는지 확인합니다. 애플리케이션 프레임워크 전체를 복사하면 어떤 동작이 실제로 디자인 시스템에서 비롯되는지 파악하기 어려워집니다.

## UNDP 디자인 시스템 컴포넌트 예시

### undp-index.html — 전체 소스

이 파일을 index.html로 저장하세요. 세 개의 콘텐츠 패널과 에셋 가져오기가 모두 포함되어 있습니다.

```
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Workshop reading brief</title><link rel="stylesheet" href="./node_modules/@undp/design-system-assets/css/base-minimal.min.css"><link rel="stylesheet" href="./node_modules/@undp/design-system-assets/css/components/tab.min.css"><link rel="stylesheet" href="./undp.css"></head><body><main><header class="intro"><div><p class="eyebrow">Learning brief / original sample</p><h1>Plan a local resilience workshop</h1></div><p>A small reading workspace for exploring how a development brief can separate context, participation and follow-through.</p></header><p class="study-note">Native UNDP 2.0.2 tab styles and keyboard behavior. Original OpenDesign sample content, not a UNDP programme or official policy. This preview uses Arial fallback rather than the distributed brand fonts.</p><div class="tabs" data-undpds-component="tabs"><ul role="tablist" aria-label="Workshop reading sections" data-deep-link="false"><li role="tab" class="tabs-title is-active" tabindex="0">Understand</li><li role="tab" class="tabs-title" tabindex="-1">Include</li><li role="tab" class="tabs-title" tabindex="-1">Follow through</li></ul><div class="tabs-content"><section id="understand" class="tabs-panel is-active"><div class="panel-grid"><div><h2>Start with the local context</h2><p>A useful workshop begins with a question people can answer from experience. Ask which everyday service is hardest to rely on during a disruption. Avoid assuming that a technical solution is already agreed.</p><h3>Prepare the conversation</h3><ol><li>Write one plain-language question.</li><li>Invite examples of what already works.</li><li>Record uncertainty separately from an agreed need.</li></ol></div><aside class="reading-card"><h3>What would change the decision?</h3><p>Collect contrasting experiences, not just the first answer. A disagreement can reveal who is missing from the conversation.</p><label><input type="checkbox" data-read="understand">Mark this section as reviewed</label></aside></div></section><section id="include" class="tabs-panel"><div class="panel-grid"><div><h2>Make participation practical</h2><p>Participation depends on when, where and how a session takes place. Offer more than one way to contribute and explain how notes will be used before the discussion begins.</p><h3>Remove avoidable barriers</h3><ol><li>Offer spoken and written contributions.</li><li>Ask participants about access needs privately.</li><li>Explain how to decline recording or attribution.</li></ol></div><aside class="reading-card"><h3>Who has not been heard?</h3><p>A count of attendees does not prove representative participation. Check whether the invitation, language or format prevented people from joining.</p><label><input type="checkbox" data-read="include">Mark this section as reviewed</label></aside></div></section><section id="follow" class="tabs-panel"><div class="panel-grid"><div><h2>Close the loop with participants</h2><p>End with a short record of decisions, open questions and named next steps. Send a readable summary back through a channel that participants can actually access.</p><h3>Turn discussion into a next step</h3><ol><li>Separate decisions from suggestions.</li><li>Attach an owner and review point to the next action.</li><li>Invite corrections before treating the notes as agreed.</li></ol></div><aside class="reading-card"><h3>What happens after the session?</h3><p>A clear follow-up commitment is more useful than a polished report with no owner. Keep unresolved issues visible in the next conversation.</p><label><input type="checkbox" data-read="follow">Mark this section as reviewed</label></aside></div></section></div></div><div class="bottom"><p id="progress" role="status">0 of 3 sections reviewed in this preview</p><button id="reset" type="button">Reset reading progress</button></div></main><script src="./node_modules/@undp/design-system-assets/js/tabs.min.js"></script><script src="./undp-app.js"></script></body></html>
```

코드 참조

- 파일 이름과 상대 패키지 경로를 함께 유지하세요.

### undp.css — 전체 소스

원본의 반응형 레이아웃과 명시적인 Arial 대체 글꼴을 유지합니다.

```
*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif}h1,h2,h3,p,button{font-family:inherit}main{max-width:1100px;margin:auto;padding:40px}.intro{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;padding:32px;background:var(--undpds-color-blue-600);color:white}.intro h1{font-size:40px;line-height:1.1;margin:16px 0}.intro p{font-size:16px;line-height:1.6}.eyebrow{font-size:12px!important;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.study-note{font-size:13px;line-height:1.6;margin:24px 0}.tabs>ul{display:flex;flex-wrap:wrap;padding-left:0;gap:16px;margin-top:32px}.tabs>ul li{margin-right:0;padding:12px 0;font-size:16px}.tabs-title:focus-visible{outline:3px solid var(--undpds-color-blue-600);outline-offset:4px}.tabs-panel{padding-top:24px!important}.panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}h2{font-size:28px;line-height:1.2;margin:0 0 24px}h3{font-size:20px;line-height:1.3}p,li{font-size:16px;line-height:1.6}li{margin-bottom:12px}.reading-card{background:var(--undpds-color-gray-200);padding:24px;border-left:4px solid var(--undpds-color-yellow-600)}.reading-card p:last-child{margin-bottom:0}label{display:flex;gap:12px;align-items:flex-start;margin-top:24px;font-size:16px;line-height:1.5}input{width:20px;height:20px;accent-color:var(--undpds-color-blue-600);flex-shrink:0}#progress{border-top:2px solid var(--undpds-color-gray-300);padding-top:24px;font-size:14px}button{background:transparent;border:2px solid var(--undpds-color-blue-600);color:var(--undpds-color-blue-700);padding:12px 16px;font-weight:700;cursor:pointer;min-height:44px}.bottom{display:flex;justify-content:space-between;gap:24px;align-items:center;margin-top:32px}button:focus-visible,input:focus-visible{outline:3px solid var(--undpds-color-blue-600);outline-offset:4px}[hidden]{display:none!important}@media(max-width:720px){main{padding:16px}.intro,.panel-grid{grid-template-columns:1fr;gap:16px}.intro{padding:24px}.intro h1{font-size:32px}.bottom{flex-wrap:wrap}}
```

코드 참조

- 파일 이름과 상대 패키지 경로를 함께 유지하세요.

### undp-app.js — 전체 소스

기본 탭 초기화와 원래의 로컬 진행 상태 및 초기화 동작입니다.

```
tabs();const boxes=[...document.querySelectorAll('[data-read]')];function progress(){document.querySelector('#progress').textContent=boxes.filter(x=>x.checked).length+' of 3 sections reviewed in this preview';}boxes.forEach(x=>x.addEventListener('change',progress));document.querySelector('#reset').addEventListener('click',()=>{boxes.forEach(x=>x.checked=false);progress();});
```

코드 참조

- 파일 이름과 상대 패키지 경로를 함께 유지하세요.

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

### 구현 시작점

http://localhost:8000/을 여세요. HTML는 실제 패키지 에셋을 가져오며, 전체 Storybook 프로젝트는 필요하지 않습니다.

```
npm init -y
npm install @undp/design-system-assets@2.0.2
# Save the supplied HTML as index.html alongside undp.css and undp-app.js.
python3 -m http.server 8000
```

### 프로젝트를 위한 프롬프트

```
제공된 모든 HTML, CSS, JavaScript를 사용해 UNDP 2.0.2의 기본 탭 기반 읽기 작업 공간을 구현하세요. 실제 토큰 이름, 탭과 패널의 일치하는 개수, 화살표/Home/End 동작, 명시적인 Arial 대체 글꼴, 로컬 전용 검토 진행 상태, 탐색을 막지 않는 동작을 유지하세요. 원본 워크숍 텍스트와 기관 정책을 명확히 구분하세요.
```

## UNDP 디자인 시스템 출처 및 범위

UNDP 2.0.2의 기본 탭 에셋과 독창적인 콘텐츠를 사용하는 OpenDesign 애플리케이션 가이드입니다. Arial 대체 글꼴을 명시적으로 사용하며, UNDP 프로그램이나 공식 정책을 나타내지 않습니다.

- 공식 디자인 시스템 컴포넌트 문서와 최신 디자인 가이드입니다.

- 공식 저장소 배포 방식과 개발 맥락입니다.

- 고정된 기반 CSS 이 버전에서 사용하는 실제 토큰 및 타이포그래피 선언입니다.

- 고정된 탭 구현 선택, 포커스, 딥 링크, 패널 표시를 관리합니다.

## UNDP 디자인 시스템 관련 자료

### USWDS

USWDS 간격 디자인 토큰, 테마 역할, 의미 구조의 표와 기본 제공 아코디언을 연결해 기회를 비교하고 검색할 수 있습니다.

### VA 디자인 시스템

VA의 시맨틱 토큰과 네이티브 Process List로 명확한 서비스 여정을 구성하세요. 단계별 설명을 보여 주고 상태를 알기 쉽게 표시하며, 부가 정보는 주요 흐름을 방해하지 않도록 제공하세요.

### W3C 디자인 시스템

유동적인 글자 크기, 의미에 맞는 색상 역할, JavaScript 없이도 읽을 수 있는 기본 접기형 콘텐츠로 회복력 있는 읽기 인터페이스를 구축하세요.


- [구현 레퍼런스](https://github.com/undp/design-system)
- [출처](https://cdn.jsdelivr.net/npm/@undp/design-system-assets@2.0.2/css/base-minimal.min.css)
- [출처](https://cdn.jsdelivr.net/npm/@undp/design-system-assets@2.0.2/js/tabs.min.js)
- [코드 참조](https://github.com/undp/design-system)
- [공식 디자인 시스템 컴포넌트 문서와 최신 디자인 가이드입니다.](https://design.undp.org/)
- [공식 저장소 배포 방식과 개발 맥락입니다.](https://github.com/undp/design-system)
- [고정된 기반 CSS 이 버전에서 사용하는 실제 토큰 및 타이포그래피 선언입니다.](https://cdn.jsdelivr.net/npm/@undp/design-system-assets@2.0.2/css/base-minimal.min.css)
- [고정된 탭 구현 선택, 포커스, 딥 링크, 패널 표시를 관리합니다.](https://cdn.jsdelivr.net/npm/@undp/design-system-assets@2.0.2/js/tabs.min.js)
