# Singapore Government 디자인 시스템

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

값을 늘리고, 유효하지 않은 수량을 입력한 뒤, 유효성을 검사하고 초기화해 보세요. 값을 유지한 채 기본 낮/밤 토큰을 전환할 수도 있습니다.

## Singapore Government 디자인 시스템 디자인 참고 자료

싱가포르 SGDS 웹 컴포넌트 3.29.0, 배포된 테마 파일, 반응형 토큰, custom-elements 매니페스트를 사용합니다. 미리보기에서는 원본 index.umd.min.js 번들과 로컬 테마 가져오기를 실행합니다. Arial 대체 서체를 명시적으로 사용하며 Tailwind 유틸리티 컴파일이나 공식 마스트헤드는 사용하지 않습니다. v3 패키지는 v2 Bootstrap 기반 SGDS와 별개입니다.

### 실제 반응형 글꼴 토큰

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --sgds-font-size-heading-xl | 32→36→40px | 기본, 1024px 및 1440px 범위. 해당 line-height-xl은 40→44→48px입니다. |
| --sgds-font-size-heading-md | 24→26→28px | 해당 line-height-md는 28→32→32px입니다. |
| --sgds-font-size-heading-sm | 20→22→24px | 간결한 섹션 제목 역할. |
| --sgds-font-size-body-md | 16px in all three ranges | Body-lg는 18→20→20px이며 body-sm은 14px입니다. |
| --sgds-font-family-brand | Inter,system-ui,sans-serif | 글꼴 파일은 별도로 불러오며, 미리보기에서는 Arial로 재정의합니다. |
| --sgds-font-weight-* | 300,400,600,700 | 라이트, 레귤러, 세미볼드, 볼드. |
| --sgds-letter-spacing-tight | -0.4px | root.css의 제목 자간. |
### 원시 및 시맨틱 테마 역할

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --sgds-color-default | Day#1a1a1a;night#f3f3f3 | gray1000→gray100으로 매핑됩니다. 본문 텍스트 색상을 하드코딩하지 마세요. |
| --sgds-bg-default | Day#ffffff;night#0e0e0e | 루트 표면은 sgds-night-theme에 따라 달라집니다. |
| --sgds-color-subtle | Day#525252;night#a5a5a5 | 보조 텍스트에는 함께 사용하는 표면에서 충분한 대비를 유지하세요. |
| --sgds-primary-surface-default | #6b4feb | 현재 두 테마 파일 모두에서 Product-primary600을 사용합니다. |
| --sgds-primary-color-default | Day#6b4feb;night#a999f3 | 텍스트 역할은 채워진 표면의 역할과 다릅니다. |
| --sgds-border-color-default | Day#868686 | 야간 테마의 모든 테두리에 동일한 원시 토큰을 재사용하지 마세요. |
### 간격, 테두리 및 반응형 변경

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --sgds-spacer-0…12 | 0,2,4,8,12,16,20,24,32,48,64,96,128px | 루트 글꼴 크기 16px 기준의 rem 값이며, 원시 토큰입니다. |
| --sgds-gap-md / --sgds-gap-2-xl | 16px /32px | 고정된 시맨틱 간격. |
| --sgds-layout-gap-md | 16→24→32px | 실제 패키지에서는 1024/1440px에서 반응형으로 변경됩니다. 이는 512/768 그리드 중단점이 아닙니다. |
| --sgds-text-gap-md | 12→16→16px | 텍스트 간격에는 별도의 반응형 역할이 있습니다. |
| --sgds-form-border-radius-md | 8px | border-radius-md의 별칭. |
| --sgds-form-border-width-default | 1px | border-width-1의 별칭. |
### 표준 그리드 참고 자료

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| xs / sm | 320–511 /512–767px | 4/8열, 16px 거터, 20/24px 고정 여백. |
| md | 768–1023px | 8열, 24px 거터, 28px 고정 여백. |
| lg | 1024–1279px | 12열, 888px 컨테이너, 24px 거터. |
| xl | 1280–1439px | 12열, 1168px 컨테이너, 32px 거터. |
| 2xl | 1440px+ | 12열, 1312px 컨테이너, 32px 거터. |
| Preview composition | 888px maximum;two columns→one below768px | 작은 플래너를 위한 의도적인 구성입니다. 모든 표준 그리드 프리셋을 완전히 구현한 것은 아닙니다. |
### QuantityToggle 공개 API

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| value / step | Number;defaults0 /1 | 기본 이벤트가 발생한 뒤 요소 값을 읽으세요. |
| min / max | Number constraints | hintText로 선택한 서비스 제한을 설명하세요. |
| label / hintText | String properties/attributes | 접근 가능한 필드 이름과 표시되는 범위 안내를 제공하세요. |
| hasFeedback | style \| text \| both | 단순한 Boolean 속성이 아니라 문자열 값을 사용하는 피드백 모드입니다. |
| invalidFeedback / invalid | Message /Boolean state | 관련 없는 빨간색 테두리를 쓰지 말고 컴포넌트 피드백을 사용하세요. |
| Events | sgds-input;sgds-change;sgds-invalid;sgds-valid | 입력값과 버튼을 통한 수정 사항을 요약에 반영하려면 input과 change 이벤트를 모두 수신하세요. |
| Validation methods | checkValidity();reportValidity() | 제약 조건 결과는 Boolean으로 반환하세요. reportValidity로 피드백을 표시할 수 있습니다. |
| readonly versus disabled | Visible fixed value versus unavailable control | disabled는 제출에서 제외되지만 readonly는 값을 유지합니다. |
## Singapore Government 디자인 시스템 전체 가이드

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

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

## Singapore Government 디자인 시스템 현재 SGDS 제품군 선택

### 웹 컴포넌트와 이전 Bootstrap 페이지

> SGDS v 3은 @govtechsg/sgds-web-component를 사용합니다. 이 버전의 커스텀 요소, 테마 토큰, 최신 유틸리티 통합은 이전 @govtechsg/sgds Bootstrap 스타일시트와는 구현 방식이 다릅니다. v 2 JavaScript의 지침을 v 3 태그와 혼용하면 새 컨트롤이 초기화될 것이라고 기대하지 마세요.

이 예제는 실제 3.29.0 브라우저 번들을 사용해 수량 조절 컨트롤과 버튼을 등록합니다. 싱가포르 정부의 마스트헤드나 소속을 주장하지 않는 오리지널 커뮤니티 워크숍 계획 도구를 보여 줍니다. 컨트롤은 로컬 값만 변경하며 예약이나 결제 절차는 없습니다.

지원 사양 읽기

## Singapore Government 디자인 시스템 테마 토큰은 계층적으로 구성됩니다

### 기본 색상과 시맨틱 용도

루트 파일은 기본 회색, 제품 기본 보라색 및 기타 팔레트 계열을 정의합니다. 그런 다음 낮 테마와 밤 테마 파일이 기본 색상을 기본 텍스트, 보조 텍스트, 채움 배경, 테두리 같은 역할에 연결합니다. 밤 모드에서는 기본 텍스트 역할이 다른 기본 색상으로 바뀌더라도 기본 채움 배경 역할은 같은 기본 색상을 유지할 수 있습니다.

미리보기는 문서 배경, 텍스트, 테두리, 음영 패널에 시맨틱 속성을 사용합니다. 따라서 루트에 sgds-night-theme을 설정하면 커스텀 요소뿐 아니라 주변 구성도 함께 업데이트됩니다. 검은색을 하드코딩한 문단은 컨트롤 자체가 정상적으로 전환되더라도 이러한 연동을 깨뜨립니다.

보라색 팔레트는 공개된 제품 기본값이지, 정부 기관을 사칭해도 된다는 뜻이 아닙니다. 기관의 정체성을 드러내거나 승인된 마스트헤드를 사용하려면 별도의 허가가 필요합니다.

지원 사양 읽기

## Singapore Government 디자인 시스템 실제 값을 사용하는 반응형 타이포그래피

### 축약된 비율이 아니라 제공된 토큰을 확인하세요

현재 responsive.css는 heading-xl을 세 구간에서 각각 32, 36, 40px로 설정하고, 이에 맞춰 줄 높이를 40, 44, 48px로 지정합니다. 값은 1024px와 1440px에서 바뀝니다. 이는 그리드의 더 작은 레이아웃 경계인 512px와 768px와는 별개입니다. Body-md는 16px로 유지됩니다.

공개 타이포그래피 개요에서는 일반적인 비율과 글꼴 조합 원칙을 설명하고, 제공된 토큰 시트에는 각 역할의 정확한 픽셀 별칭이 명시되어 있습니다. 이 참고 자료는 구현 값을 안내할 때 실제 적용 가능한 별칭을 사용합니다. HTML에서 제목의 의미상 계층을 유지하고 적절한 시각 토큰을 적용하세요. 작은 섹션 제목을 위해 의미상 계층을 인위적으로 낮출 필요는 없습니다.

브랜드 서체는 Inter이며, 설정 문서에는 300, 400, 600, 700의 글꼴 두께가 안내되어 있습니다. 이 로컬 예제는 Arial을 명시적으로 대체 서체로 사용하며 원격 글꼴을 불러오지 않습니다. 서비스를 적용할 때는 CSS에 지정된 서체 이름에만 의존하지 말고 선택한 글꼴을 불러와 테스트하세요.

지원 사양 읽기

## Singapore Government 디자인 시스템 용도에 따라 다른 간격 역할

### 모든 간격을 하나의 척도로 통일하지 마세요

기본 간격 척도에는 4, 8, 12, 16px뿐 아니라 2px도 포함됩니다. 고정 간격 별칭과 반응형 레이아웃·컴포넌트·텍스트 간격은 이러한 기본 값 위에 구성됩니다. 기본 layout-gap-md는 16→24→32px로 바뀌지만, text-gap-md는 12→16→16px로 바뀝니다. 따라서 ‘medium’이라는 같은 이름이 모든 용도에서 같은 값을 뜻하지는 않습니다.

이 계획 도구는 적당한 크기의 두 콘텐츠 영역, 즉 수량 컨트롤과 현재 계획을 함께 보여 주기 위해 최대 너비를 888px로 제한합니다. 768px 미만에서는 두 영역을 세로로 배치합니다. 이는 애플리케이션의 구성 방식일 뿐, SGDS 표준 그리드 전체의 최대 너비가 언제나 888px라는 뜻은 아닙니다. 표준 컨테이너의 더 넓은 규칙은 참고 자료에서 별도로 안내합니다.

지원 사양 읽기

## Singapore Government 디자인 시스템 범위가 정해진 개수 컨트롤

### 수량에는 식별자가 아닌 개수를 사용하세요

한 번에 한 단위씩 조정할 수 있는 소량의 개수에는 수량 조절 컨트롤이 적합합니다. 이 예제에서는 참가자 수를 1~5명, 공동 사용 키트 수를 0~3개로 설정합니다. 이는 시연을 위한 제한값입니다. 실제 서비스에서는 실제 이용 가능 수량이나 정책에 따라 값을 정하고 힌트에 안내해야 합니다. 우편번호, 식별자, 정확한 통화 금액에는 다른 입력 컨트롤을 사용해야 합니다.

네이티브 컴포넌트는 숫자 입력란 양옆에 감소 및 증가 아이콘 버튼을 배치합니다. min, max, step은 숫자이고 value에는 현재 개수가 반영되며, label과 hintText는 맥락을 제공합니다. 최솟값이나 최댓값에 도달하면 해당 버튼을 사용할 수 없게 됩니다. 직접 입력한 값에도 제약 조건 검증이 필요합니다.

hasFeedback에는 문자열 style, text 또는 both를 지정할 수 있습니다. 이 예제는 both와 구체적인 invalidFeedback 메시지를 함께 사용합니다. 다른 컴포넌트의 설정을 따라 hasFeedback을 불리언으로 취급하면 API 이 구체적인 설정을 잃게 됩니다.

```
<sgds-quantity-toggle
  id="people" name="people" label="Participants"
  hintText="Choose 1 to 5 participants"
  min="1" max="5" step="1" value="1"
  hasFeedback="both"
  invalidFeedback="Enter a whole number from 1 to 5">
</sgds-quantity-toggle>
<output id="participant-total">1</output>
<script>
  customElements.whenDefined('sgds-quantity-toggle').then(() => {
    const quantity = document.querySelector('#people');
    const update = () => {
      document.querySelector('#participant-total').textContent = String(quantity.value);
    };
    ['sgds-input', 'sgds-change'].forEach(name => {
      quantity.addEventListener(name, update);
    });
  });
</script>
```

코드 참조

지원 사양 읽기

## Singapore Government 디자인 시스템 요약을 최신 상태로 유지하세요

### 두 가지 이벤트 경로와 하나의 데이터 소스

요약은 각 호스트 요소의 value를 읽습니다. 입력한 값을 반영하는 sgds-input과 버튼 변경 사항을 확정하는 sgds-change 이벤트를 모두 수신합니다. 두 이벤트가 반드시 같은 경로로 발생하는 것은 아니기 때문입니다. 처음 로컬 예제에서는 입력값만 테스트해 증가 버튼의 변경 사항을 놓쳤지만, 최종 예제는 두 이벤트를 모두 처리합니다.

Check plan은 두 네이티브 요소에 reportValidity를 호출하고 로컬 상태 메시지를 표시합니다. 유효하지 않은 숫자를 그럴듯한 합계로 바꾸지는 않습니다. Reset은 호스트 요소에 초기 값을 설정하고 setInvalid(false)로 애플리케이션에 표시되는 오류 상태를 지운 다음, updateComplete 이후 요약을 새로 고칩니다.

disabled 필드는 readonly 필드와 같지 않습니다. disabled 필드의 값은 폼 제출에서 제외되지만 readonly 필드의 값은 유지됩니다. 실제 서비스에서 확정된 수량을 검토하는 동안 변경할 수 없도록 하려면, 단지 회색으로 보이게 하려고 필드를 비활성화하지 말고 적절한 상태를 사용하세요.

- 요약에서 직접 입력과 증가 버튼을 모두 지원한다면 sgds-input과 sgds-change를 사용하세요.

- 섀도 DOM 내부에 접근하지 말고 커스텀 요소의 호스트에서 value를 읽으세요.

- 로컬 유효성 피드백을 예약이나 제출 완료 표시와 구분하세요.

지원 사양 읽기

## Singapore Government 디자인 시스템 등록 전에 스타일 불러오기

### 테마 의존 파일을 순서대로 불러오세요

번들 애플리케이션에서는 day.css, night.css, css/sgds.css를 이 순서로 불러온 다음 컴포넌트 라이브러리를 한 번만 불러오세요. day/night 파일은 root.css를 불러오고, root.css는 responsive.css를 불러옵니다. 기초 스타일 파일은 reboot.css와 grid.css를 불러옵니다. 정적 파일을 복사할 때는 처음 세 파일만이 아니라 이러한 상대 경로 의존성도 유지해야 합니다.

공식 utility.css는 Tailwind CSS v 4 설정 진입점입니다. 설정된 Tailwind 빌드 과정을 거쳐야 하며, 일반 브라우저 스타일시트로 추가해도 모든 sgds: 유틸리티 클래스가 생성되지는 않습니다. 이 예시에서는 일반 레이아웃 CSS와 의미 기반 사용자 지정 속성을 대신 사용하므로 유틸리티 빌드를 전제로 하지 않습니다.

브라우저에서 분리해 실행하는 예제에 게시된 파일은 index.umd.min.js입니다. 패키지 메타데이터에는 여전히 index.umd.js가 언급되어 있지만, 확인한 배포본에는 해당 파일이 없습니다. 로컬 미리보기에서는 실제 minified 번들을 사용하고, npm 설정에서는 번들러용으로 문서화된 패키지 가져오기를 사용합니다.

1. 3.29.0으로 고정하고 기초 스타일 규칙보다 먼저 테마 토큰을 가져오세요.

2. Inter를 제공하거나, 충분히 테스트한 대체 글꼴을 신중하게 선택하세요.

3. 사용자 지정 요소를 한 번 등록하고, 필요한 경우 정의가 완료될 때까지 기다린 다음 애플리케이션 리스너를 연결하세요.

지원 사양 읽기

## Singapore Government 디자인 시스템 한도와 테마 함께 테스트하기

### 경계를 통해 통합 오류 확인하기

Participants를 두 번 늘리고 컨트롤과 요약 모두 3으로 표시되는지 확인하세요. 9를 직접 입력한 뒤 Check plan을 실행하세요. 컴포넌트에 범위 안내가 표시되고 상태 메시지에서 값을 수정하도록 요청해야 합니다. 값을 5로 수정하고, 값이 유효한 상태에서 증가 컨트롤이 비활성화되는지 확인하세요.

수량을 입력한 뒤 야간 테마로 전환하고 값이 유지되는지, 요약을 읽을 수 있는지, 경계 동작이 여전히 올바른지 확인하세요. 초기화한 다음 키보드로 다시 테스트하세요. Tab 키를 누르면 입력란과 버튼에 적절한 순서로 포커스가 이동해야 하며, Enter 또는 Space 키를 누르면 포커스된 버튼이 실행되어야 합니다.

로컬 테스트에서는 1440,768 및 390px에서 컴포넌트 동작을 확인하고 테마 종속 항목이 로컬에서 제공되는지 검사합니다. 향후 정부 서비스의 브라우저 지원이나 접근성 인증을 보장하는 것은 아닙니다. 해당 서비스에서는 전체 흐름, 문구, 테마 사용자 지정 및 데이터 처리를 테스트해야 합니다.

지원 사양 읽기

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

### 수량 제한과 두 가지 이벤트 경로

완전한 네이티브 컨트롤과 동기화된 출력.

```
<sgds-quantity-toggle
  id="people" name="people" label="Participants"
  hintText="Choose 1 to 5 participants"
  min="1" max="5" step="1" value="1"
  hasFeedback="both"
  invalidFeedback="Enter a whole number from 1 to 5">
</sgds-quantity-toggle>
<output id="participant-total">1</output>
<script>
  customElements.whenDefined('sgds-quantity-toggle').then(() => {
    const quantity = document.querySelector('#people');
    const update = () => {
      document.querySelector('#participant-total').textContent = String(quantity.value);
    };
    ['sgds-input', 'sgds-change'].forEach(name => {
      quantity.addEventListener(name, update);
    });
  });
</script>
```

코드 참조

### 번들 v3 설정

올바른 테마 순서, 라이브러리 등록 및 Tailwind 유틸리티의 명시적 경계.

```
npm install --save-exact @govtechsg/sgds-web-component@3.29.0

/* globals.css — tokens before foundation rules */
@import "@govtechsg/sgds-web-component/themes/day.css";
@import "@govtechsg/sgds-web-component/themes/night.css";
@import "@govtechsg/sgds-web-component/css/sgds.css";
/* Only for a configured Tailwind CSS v4 build: */
/* @import "@govtechsg/sgds-web-component/css/utility.css"; */

// main.js — register custom elements once
import '@govtechsg/sgds-web-component';

// Enable the published night theme; omit class for day.
document.documentElement.classList.toggle('sgds-night-theme');
```

코드 참조

### 완전한 독립 실행형 예시

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

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>SGDS quantity specimen</title><link rel="stylesheet" href="vendor/sgds-3.29.0/themes/day.css"><link rel="stylesheet" href="vendor/sgds-3.29.0/themes/night.css"><link rel="stylesheet" href="vendor/sgds-3.29.0/css/sgds.css"><style>:root{--sgds-font-family-brand:Arial,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--sgds-bg-default);color:var(--sgds-color-default);font-family:var(--sgds-font-family-brand)}main{max-width:888px;margin:auto;padding:32px 20px}h1{font-size:var(--sgds-font-size-heading-xl);line-height:var(--sgds-line-height-xl);letter-spacing:var(--sgds-letter-spacing-tight)}h2{font-size:var(--sgds-font-size-heading-sm);line-height:var(--sgds-line-height-sm)}p{max-width:60ch;line-height:1.5}.eyebrow{color:var(--sgds-color-subtle);font-size:14px}.layout{display:grid;grid-template-columns:1fr 1fr;gap:var(--sgds-layout-gap-md);margin:32px 0}.control{border:1px solid var(--sgds-border-color-default);border-radius:var(--sgds-border-radius-md);padding:24px;background:var(--sgds-bg-alternate)}sgds-quantity-toggle{display:block;max-width:100%}dl{margin:24px 0}dt{color:var(--sgds-color-subtle)}dd{margin:0 0 16px;font-weight:600}.actions{display:flex;flex-wrap:wrap;gap:16px}#status{min-height:24px}button.native{font:inherit;background:transparent;border:1px solid var(--sgds-border-color-default);color:inherit;padding:8px 12px;border-radius:8px}button.native:focus-visible{outline:3px solid var(--sgds-primary-border-color-default);outline-offset:3px}@media(max-width:767px){.layout{grid-template-columns:1fr}.control{padding:20px}}</style><main><p class="eyebrow">Independent specimen · Community workshop planning</p><h1>Plan a small workshop group</h1><p>Adjust two bounded quantities and inspect the local summary. This example does not reserve places or equipment.</p><button class="native" id="theme" aria-pressed="false">Night theme</button><div class="layout"><section class="control"><h2>People and materials</h2><form id="planner"><sgds-quantity-toggle id="people" name="people" label="Participants" hintText="Choose 1 to 5 participants" min="1" max="5" step="1" value="1" hasFeedback="both" invalidFeedback="Enter a whole number from 1 to 5"></sgds-quantity-toggle><div style="height:24px"></div><sgds-quantity-toggle id="kits" name="kits" label="Shared material kits" hintText="Choose 0 to 3 kits" min="0" max="3" step="1" value="0" hasFeedback="both" invalidFeedback="Enter a whole number from 0 to 3"></sgds-quantity-toggle></form></section><section><h2>Current plan</h2><dl><dt>Participants</dt><dd id="p-value">1</dd><dt>Material kits</dt><dd id="k-value">0</dd></dl><p>These are demonstration limits. A real service should explain its own availability and eligibility rules.</p><div class="actions"><sgds-button id="review">Check plan</sgds-button><sgds-button id="reset" variant="outline">Reset</sgds-button></div><p id="status" role="status" aria-live="polite"></p></section></div></main><script src="vendor/sgds-3.29.0/index.umd.min.js"></script><script type="module">await Promise.all(['sgds-quantity-toggle','sgds-button'].map(x=>customElements.whenDefined(x)));const p=document.querySelector('#people'),k=document.querySelector('#kits'),status=document.querySelector('#status');await Promise.all([p.updateComplete,k.updateComplete]);const update=()=>{document.querySelector('#p-value').textContent=String(p.value);document.querySelector('#k-value').textContent=String(k.value);status.textContent=''};[p,k].forEach(x=>['sgds-input','sgds-change'].forEach(name=>x.addEventListener(name,update)));document.querySelector('#review').onclick=()=>{const validP=p.reportValidity(),validK=k.reportValidity();status.textContent=validP&&validK?'The quantities are within the demo limits. Nothing has been reserved.':'Correct the highlighted quantity before continuing.'};document.querySelector('#reset').onclick=async()=>{p.value=1;k.value=0;p.setInvalid(false);k.setInvalid(false);await Promise.all([p.updateComplete,k.updateComplete]);update()};document.querySelector('#theme').onclick=e=>{const night=document.documentElement.classList.toggle('sgds-night-theme');e.currentTarget.setAttribute('aria-pressed',String(night));e.currentTarget.textContent=night?'Day theme':'Night theme'};window.demoReady=true;</script></html>
```

코드 참조

- Sources에서 완전한 예시를 다운로드하세요. README에 정확한 로컬 실행 명령이 안내되어 있습니다.

- 벤더 경로는 이 문서에 대한 상대 경로로 유지하세요. 아카이브에는 이 미리보기에 사용된 에셋이 모두 포함되어 있습니다.

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

### 구현 시작점

독립 실행 미리보기에서는 검증된 원본 index.umd.min.js 번들과 로컬 CSS 종속 항목 체인을 사용합니다. npm 설정 예시는 번들러용이며, utility.css에는 Tailwind v4가 필요하므로 이 정적 미리보기에서는 의도적으로 제외했습니다. Sources의 전체 작업 예제 ZIP에는 미리보기에 필요한 정확한 종속 항목과 전체 문서도 포함되어 있습니다. 압축을 풀고 해당 디렉터리에서 python3 -m http.server 8080을 실행한 다음 http://localhost:8080/singapore-sgds.html을 여세요. 모듈을 사용하는 예제는 file://로 열지 마세요.

```
npm install --save-exact @govtechsg/sgds-web-component@3.29.0

/* globals.css — tokens before foundation rules */
@import "@govtechsg/sgds-web-component/themes/day.css";
@import "@govtechsg/sgds-web-component/themes/night.css";
@import "@govtechsg/sgds-web-component/css/sgds.css";
/* Only for a configured Tailwind CSS v4 build: */
/* @import "@govtechsg/sgds-web-component/css/utility.css"; */

// main.js — register custom elements once
import '@govtechsg/sgds-web-component';

// Enable the published night theme; omit class for day.
document.documentElement.classList.toggle('sgds-night-theme');
```

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

```
실제3.29.0 sgds-quantity-toggle 및 sgds-button 요소를 사용해 싱가포르 SGDS v3 플래너를 구축하세요. day/night/root/responsive 토큰 체인 전체와 기초 스타일을 가져온 다음 네이티브 컴포넌트를 등록하세요. 참가자 수와 재료 키트 수에 상한을 설정하고, hasFeedback="both", 정확한 레이블과 힌트, 형식 검증을 제공하세요. sgds-input과 sgds-change 모두를 수신해 동기화되는 요약도 구현하세요. 테마 전환 시 값을 초기화하지 않고 루트의 sgds-night-theme를 토글해야 합니다. 로컬 유효성과 예약의 차이를 분명히 유지하세요. v2 Bootstrap 코드를 불러오거나 원본 utility.css가 Tailwind 클래스를 생성하는 것처럼 가장하지 마세요.
```

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

MIT 라이선스 코드와 독창적인 워크숍 콘텐츠를 사용한 독립 구현 예시입니다. 정부 기관의 마스트헤드, 소속, 예약, 네트워크 제출 또는 공식 정책상의 한도를 의미하지 않습니다.

- 개발 v3 설치 및 CSS 가져오기 순서.

- 수량 목적, 제약 조건 및 컨트롤 동작.

- 간격 고정 및 반응형 간격 역할.

- Heading 제목 역할 별칭.

- 유형 타이포그래피 의도 및 글꼴 지침.

- 그리드 표준 반응형 그리드 프리셋.

- 중단점 그리드 중단점 및 컨테이너 참조.

- 토큰 계층형 토큰 모델.

- 시맨틱 의미 기반 색상 역할.

- 완전한 작동 예시 다운로드 전체 HTML, 로컬 CSS/JavaScript 종속 항목, 제공된 라이선스와 정확한 실행 지침이 포함된 ZIP 파일입니다. 빌드 단계는 필요하지 않습니다.

## Singapore Government 디자인 시스템 관련 리소스

### Decanter

Decanter Tailwind 프리셋, 반응형 글꼴 크기 체계, 유동적인 화면 가장자리를 활용해 학술 및 편집용 페이지를 구성하세요. 주제 필터가 작동하고 초록을 펼쳐 볼 수 있는 독창적인 행사 카드를 살펴보세요.

### Suomi.fi 디자인 시스템

Source Sans 3, 명시적인 간격 토큰 및 복구 가능한 문서 선택 패턴으로 읽기 쉬운 핀란드 공공 서비스 양식을 만드세요.

### UNDP 디자인 시스템

UNDP가 공개한 색상 및 간격 토큰, 키보드로 조작할 수 있는 네이티브 탭, 로컬에서 읽기 진행 상황을 검토할 수 있는 전체 워크숍 읽기 예제를 살펴보세요.


- [구현 레퍼런스](https://www.designsystem.tech.gov.sg/components/quantity-toggle)
- [출처](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/themes/responsive.css)
- [출처](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/themes/day.css)
- [출처](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/themes/root.css)
- [출처](https://www.designsystem.tech.gov.sg/foundations/layout/breakpoint)
- [출처](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/custom-elements.json)
- [지원 사양 읽기](https://www.designsystem.tech.gov.sg/get-started/develop)
- [지원 사양 읽기](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/themes/day.css)
- [지원 사양 읽기](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/themes/responsive.css)
- [지원 사양 읽기](https://www.designsystem.tech.gov.sg/foundations/spacing/gap)
- [코드 참조](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/custom-elements.json)
- [지원 사양 읽기](https://www.designsystem.tech.gov.sg/components/quantity-toggle)
- [지원 사양 읽기](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/custom-elements.json)
- [코드 참조](https://www.designsystem.tech.gov.sg/get-started/develop)
- [코드 참조](https://www.designsystem.tech.gov.sg/components/quantity-toggle)
- [개발 v3 설치 및 CSS 가져오기 순서.](https://www.designsystem.tech.gov.sg/get-started/develop)
- [수량 목적, 제약 조건 및 컨트롤 동작.](https://www.designsystem.tech.gov.sg/components/quantity-toggle)
- [간격 고정 및 반응형 간격 역할.](https://www.designsystem.tech.gov.sg/foundations/spacing/gap)
- [Heading 제목 역할 별칭.](https://www.designsystem.tech.gov.sg/foundations/typography/heading)
- [유형 타이포그래피 의도 및 글꼴 지침.](https://www.designsystem.tech.gov.sg/foundations/typography)
- [그리드 표준 반응형 그리드 프리셋.](https://www.designsystem.tech.gov.sg/foundations/layout/responsive-grid)
- [중단점 그리드 중단점 및 컨테이너 참조.](https://www.designsystem.tech.gov.sg/foundations/layout/breakpoint)
- [토큰 계층형 토큰 모델.](https://www.designsystem.tech.gov.sg/foundations/design-tokens)
- [시맨틱 의미 기반 색상 역할.](https://www.designsystem.tech.gov.sg/foundations/colour/semantic-colour)