# Web Awesome 디자인 시스템

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

모서리 및 간격 크기 체계를 변경하고, 예제 화면 스타일을 전환하고, 지역을 선택한 다음 로컬 작업 공간 이름을 검증하세요.

## Web Awesome 디자인 시스템 디자인 참조

설치된 패키지에서 확인한 Web Awesome 3.14.0 기본 테마 CSS입니다. 아래 색상 항목은 의미 기반 별칭이며, 팔레트 참조를 임의의 16진수 값으로 바꾸지 않고 그대로 유지했습니다. 크기 체계에서 계산한 픽셀 예시는 루트 크기 16px, scale=1을 기준으로 합니다.

### 시맨틱 배경 및 텍스트 역할

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --wa-color-surface-default | white | 기본 예제 화면 배경. |
| --wa-color-surface-raised | white | 떠 있는 레이어. |
| --wa-color-surface-lowered | var(--wa-color-neutral-95) | 코드 표시 영역 배경. |
| --wa-color-surface-border | var(--wa-color-neutral-90) | 컨테이너 경계. |
| --wa-color-text-normal | var(--wa-color-neutral-10) | 일반 텍스트입니다. |
| --wa-color-text-quiet | var(--wa-color-neutral-40) | 보조 텍스트입니다. |
| --wa-color-text-link | var(--wa-color-brand-40) | 링크 역할. |
| --wa-color-brand-fill-loud | var(--wa-color-brand-50) | 강한 브랜드 배경색. |
| --wa-color-brand-on-loud | white | 강한 브랜드 배경색 위의 텍스트. |
| --wa-color-brand-fill-quiet | var(--wa-color-brand-95) | 절제된 배지 배경색. |
| --wa-color-brand-on-quiet | var(--wa-color-brand-40) | 절제된 브랜드 배경색 위의 텍스트. |
### 간격 및 형태

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --wa-space-scale | 1 | 간격 토큰에 사용되는 배수. |
| --wa-space-xs | calc(var(--wa-space-scale) * 0.5rem) | 기본 배율에서 8px. |
| --wa-space-s | calc(var(--wa-space-scale) * 0.75rem) | 기본 배율에서 12px. |
| --wa-space-m | calc(var(--wa-space-scale) * 1rem) | 기본 배율에서 16px. |
| --wa-space-l | calc(var(--wa-space-scale) * 1.5rem) | 기본 배율에서 24px. |
| --wa-space-xl | calc(var(--wa-space-scale) * 2rem) | 기본 배율에서 32px. |
| --wa-space-2xl | calc(var(--wa-space-scale) * 2.5rem) | 기본 배율에서 40px. |
| --wa-border-radius-scale | 1 | 크기 조절이 가능한 모서리에 사용되는 배수. |
| --wa-border-radius-s | calc(var(--wa-border-radius-scale) * 0.1875rem) | 기본 배율에서 3px. |
| --wa-border-radius-m | calc(var(--wa-border-radius-scale) * 0.375rem) | 기본 배율에서 6px. |
| --wa-border-radius-l | calc(var(--wa-border-radius-scale) * 0.75rem) | 기본 배율에서 12px. |
### 타이포그래피

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --wa-font-family-body | ui-sans-serif, system-ui, sans-serif | 본문용 시스템 산세리프 글꼴. |
| --wa-font-family-heading | var(--wa-font-family-body) | 제목 글꼴 패밀리 별칭. |
| --wa-font-family-code | ui-monospace, monospace | 고정폭 글꼴 표시. |
| --wa-font-size-scale | 1 | 글자 크기 체계 배수. |
| --wa-font-size-m | calc(1rem * var(--wa-font-size-scale)) | 기본 루트 크기와 배율에서 16px입니다. |
| --wa-font-size-l | round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px) | 기본 루트 크기와 배율에서 20px입니다. |
| --wa-font-size-xl | round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px) | 기본 루트 크기와 배율에서 25px입니다. |
| --wa-font-size-2xl | round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px) | 기본 루트 크기와 배율에서 32px입니다. |
| --wa-line-height-condensed | 1.2 | 폭이 좁은 제목/레이블입니다. |
| --wa-line-height-normal | 1.6 | 일반적인 본문 줄 높이입니다. |
### 폼 컨트롤 별칭

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --wa-form-control-background-color | var(--wa-color-surface-default) | 입력 필드 배경 별칭입니다. |
| --wa-form-control-border-color | var(--wa-color-neutral-border-loud) | 입력 경계 역할입니다. |
| --wa-form-control-border-radius | var(--wa-border-radius-m) | 필드 모서리 반경 별칭입니다. |
| --wa-form-control-label-color | var(--wa-color-text-normal) | 접근성에 적합한 레이블 색상입니다. |
| --wa-form-control-hint-color | var(--wa-color-text-quiet) | 힌트 색상 별칭입니다. |
## Web Awesome 디자인 시스템 전체 가이드

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

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

## Web Awesome 디자인 시스템 자체 컴포넌트 경계를 가진 커스텀 요소

### 독립적인 컴포넌트 경계를 갖춘 커스텀 요소

> Web Awesome는 React 애플리케이션을 요구하는 대신 등록된 HTML 커스텀 요소를 제공합니다. wa-input 또는 wa-select를 가져오면 일반 HTML에 배치하고 문서화된 속성과 이벤트를 통해 제어할 수 있습니다. 이 작업 환경에는 버전 3.14.0이 포함되어 있으며 공개 패키지에서 제공되는 컴포넌트만 사용합니다.

화면에 표시되는 컨트롤은 shadow root 구현을 포함한 실제 커스텀 요소입니다. 주변의 헤더, 섹션, 정보 표시는 독자적으로 만든 HTML 요소입니다. 따라서 이 예시에서는 상속된 커스텀 속성을 통해 컴포넌트 경계를 넘어 적용되는 스타일 결정과 페이지 구성에 속하는 스타일 결정을 구분해 살펴볼 수 있습니다.

지원 사양 읽기

## Web Awesome 디자인 시스템의 시맨틱 색상 별칭 유지

### 의미 기반 색상 별칭 유지하기

기본 테마는 올라온 표면, 기본 표면, 내려간 표면, 일반 텍스트와 차분한 텍스트, 여러 브랜드 채우기/전경색 조합을 구분합니다. 토큰 정보 표시는 내려간 표면을, 주요 예시는 기본 표면을 사용하며, 작은 배지는 brand-fill-quiet와 brand-on-quiet를 짝지어 사용합니다. 이러한 역할은 모양이 바뀌어도 의미를 유지합니다.

참조 예시에서는 각 역할을 임의의 16진수 값으로 치환하지 않고 var(--wa-color-neutral-10)과 같은 별칭을 그대로 사용합니다. 팔레트가 바뀌어도 시맨틱 할당은 유효하게 유지될 수 있습니다. 강한 브랜드 액션을 맞춤 설정할 때는 채우기와 그 위에 표시되는 전경색을 함께 고려하세요. 둘 중 하나만 바꾸면 버튼 텍스트를 읽기 어려워질 수 있습니다.

지원 사양 읽기

## Web Awesome 디자인 시스템: 모든 컴포넌트를 다시 작성하지 않고 배율 변경하기

### 모든 컴포넌트를 다시 작성하지 않고 크기 체계 변경하기

모서리 반경 선택기는 예시 영역에만 --wa-border-radius-scale을 적용합니다. 배율이 1이면 기본 소형/중형/대형 모서리 반경은 16px 루트 크기에서 각각 3, 6, 12픽셀로 계산됩니다. 배율을 0으로 설정하면 배율에 따라 달라지는 모서리가 직각이 되고, 2로 설정하면 두 배가 됩니다. 알약형과 원형 토큰은 별개의 개념이므로 이 배율에 따라 바뀐다고 가정해서는 안 됩니다.

간격 선택기는 --wa-space-scale을 변경합니다. 예시 영역의 패딩, 간격, 정보 표시 간격은 공식 간격 토큰을 사용하므로 서로의 관계를 유지한 채 함께 바뀝니다. 모든 컴포넌트의 모든 치수가 확대된다는 뜻은 아닙니다. 컴포넌트 컨트롤 크기는 별도의 토큰 관계를 따릅니다. 편집 패널은 변경 범위에 포함되지 않으므로 예시 영역을 바꾸는 동안 안정적으로 비교할 수 있습니다.

1. 정사각형을 선택하고 입력 필드, 컨테이너, 정보 표시의 모서리를 살펴보세요.

2. 여유 있는 간격을 선택하고 예시 영역의 간격을 변경되지 않은 편집 패널과 비교해 보세요.

3. 기본값 복원을 선택하면 두 배율과 모양이 함께 기본값으로 돌아갑니다.

지원 사양 읽기

## Web Awesome 디자인 시스템의 타이포그래피 토큰과 독자적인 제목 스타일

### 타이포그래피 토큰과 기본 제목 스타일 선택

기본 본문 글꼴은 ui-sans-serif, system-ui, sans-serif입니다. 제목 글꼴은 본문 글꼴의 별칭이며, 코드는 ui-monospace를 사용합니다. 일반 줄 높이 토큰은 1.6이고, 좁은 줄 높이는 1.2입니다. 중간 크기 글꼴 토큰은 font-size-scale을 곱한 1rem이며, 더 큰 크기는 반올림된 계산값을 사용합니다. 표에는 이러한 의존성을 감추지 않고 계산식을 표시합니다.

작업 환경에서는 제목에 34px, 섹션 제목에 23px을 사용하며, 로컬 중단점 700px에서 페이지 제목 크기를 줄입니다. 이 규칙은 페이지에서 독자적으로 정의한 것입니다. 기본 컴포넌트 타이포그래피와 비교할 수 있도록 기본 필드는 라이브러리의 레이블 및 힌트 스타일을 유지합니다.

지원 사양 읽기

## Web Awesome 디자인 시스템의 초기값, 속성, 변경 이벤트

### 초기값, 속성 및 변경 이벤트

각 선택 항목은 안정적인 값을 가진 wa-option 하위 요소를 포함합니다. 기본 옵션에는 현재 컴포넌트 가이드에 맞춰 selected를 지정했습니다. 실행 중 변경된 값은 select의 value 속성에서 읽습니다. 테마 컨트롤은 change 이벤트를 수신해 CSS 커스텀 속성을 업데이트하며, 렌더링된 옵션 레이블의 텍스트를 분석하지 않습니다.

지역 선택기는 일반적인 예시 필드이며 외부 스토리지 서비스를 제어하지 않습니다. 선택한 값은 로컬 작업 메시지에 표시됩니다. 유럽을 선택하면 스토리지가 할당되는 것처럼 보이지 않도록 했습니다. 실제 제품에서 쓰일 법한 용어를 사용하는 컴포넌트 예시에서는 이 구분이 중요합니다.

지원 사양 읽기

## Web Awesome 디자인 시스템의 토큰과 문서화된 파트로 스타일 지정하기

### 토큰 및 문서화된 파트로 스타일 지정하기

일반 하위 요소 선택자는 컴포넌트의 shadow tree 내부에 자유롭게 접근할 수 없습니다. 이 예시에서는 상속되는 테마 변수를 사용해 필드 배경, 텍스트, 모서리 반경을 주변 HTML와 일관되게 유지할 수 있습니다. 이는 내부에서 생성된 마크업을 직접 지정하려는 방식이 아니라 지원되는 스타일 지정 방법입니다.

컴포넌트별로 변경하려면 해당 컴포넌트의 문서화된 CSS 커스텀 속성과 CSS 파트를 참조하세요. 전역 input 선택자가 wa-input 내부의 input까지 반드시 변경하는 것은 아닙니다. 반대로 공통 상위 요소에 테마 클래스를 추가하거나 변수를 지정하면 하위 커스텀 요소 여러 개에 의도적으로 영향을 줄 수 있으므로 적용 범위를 신중히 선택해야 합니다.

지원 사양 읽기

## Web Awesome 디자인 시스템의 업그레이드, 검증, 로컬 결과

### 업그레이드, 검증 및 로컬 결과

페이지 관점에서 컴포넌트 등록은 비동기적으로 이루어집니다. 예시에서는 사용하는 API에 대해 customElements.whenDefined가 완료될 때까지 기다린 다음, 선택 항목이 업데이트될 때까지 기다린 후 초기값을 읽습니다. 이렇게 하면 아직 알 수 없는 HTML 태그에서 컴포넌트 클래스로 업그레이드되지 않은 요소에 기본값을 적용하는 일을 방지할 수 있습니다.

작업 영역 동작에서는 wa-input에 setCustomValidity와 reportValidity를 사용합니다. 공백을 제거한 이름이 두 글자 미만이면 입력이 거부되며, input 이벤트가 발생하면 맞춤 오류를 지워 다시 수정할 수 있습니다. 비활성화된 나중에 초대 버튼은 컴포넌트의 기본 비활성 상태입니다. 상태 텍스트에는 로컬에서 적용된 이름만 표시되며, 전체 코드에는 작업 영역 생성이나 할당 요청이 없습니다.

- label 속성으로 접근성 레이블을 제공합니다.

- 오류가 발생하기 전에 힌트로 이름 제한을 안내합니다.

- 비활성화된 동작은 목적을 계속 보여 주면서도 상호작용할 수 없습니다.

지원 사양 읽기

## Web Awesome 디자인 시스템: 테마와 사용할 컴포넌트 가져오기

### 테마와 사용할 컴포넌트 가져오기

Vite 바닐라 애플리케이션에 @awesome.me/webawesome@3.14.0을 설치하고, 제공된 main.js를 진입점으로 사용합니다. 기본 테마 스타일시트가 필요합니다. 예제는 페이지 레이아웃이 명시적이므로 더 광범위한 네이티브 리셋이나 유틸리티 번들은 의도적으로 불러오지 않습니다 CSS. 가져오기를 통해 마크업에 사용된 다섯 가지 컴포넌트 유형을 등록합니다.

npm dist 모듈은 번들러용입니다. dist-cdn 배포판은 의존성이 다른 방식으로 번들링되므로 브라우저에서 모듈을 직접 불러올 때 사용할 수 있습니다. dist 가져오기를 일반 script 태그에 복사한 뒤 bare 의존성이 자동으로 해석될 것이라고 가정하지 마세요. 외부 에셋이 필요한 컴포넌트에는 문서에 안내된 기본 경로 설정이 필요합니다. 이 예제는 사용자가 제공하는 아이콘 에셋을 사용하지 않으며 오프라인에서 실행할 수 있도록 번들링됩니다.

지원 사양 읽기

## Web Awesome 디자인 시스템: 공개 컴포넌트와 테마의 명확한 범위

### 공개 컴포넌트와 테마의 명확한 경계

워크벤치는 기본 테마와 공개 컴포넌트를 보여 줍니다. 일부 Web Awesome 컴포넌트, 패턴 및 디자인 리소스는 Pro 제공 항목이므로, 공개 패키지를 설치하면 카탈로그의 모든 항목을 사용할 수 있다고 오해하지 않도록 페이지를 구성했습니다. 공유 디자인 시스템의 필수 의존성으로 지정하기 전에 컴포넌트의 사용 가능 여부를 확인해야 합니다.

재사용 가능한 제품 테마 문서에는 변경한 변수와 적용 범위, 두 가지 표시 모드의 확인 방법을 기록해야 합니다. 라이브 워크벤치는 그 과정을 보여 주는 간단한 예입니다. 독자는 분리된 팔레트 이미지에 의존하지 않고, 실제로 변경한 변수를 확인하고 그 결과가 네이티브 컴포넌트에 어떻게 반영되는지 비교할 수 있습니다.

지원 사양 읽기

## Web Awesome 디자인 시스템 컴포넌트 예제

### 커스텀 요소 워크벤치 마크업

네이티브 wa-select, wa-option, wa-input, wa-switch, wa-button을 일반 시맨틱 HTML와 함께 구성합니다.

```
<main class="token-workbench"><header><p class="eyebrow">WEB AWESOME / TOKEN WORKBENCH</p><h1>See the theme cross the component boundary.</h1><p>Change a scoped token and inspect native custom elements alongside ordinary HTML.</p></header><div class="workbench-grid"><section class="controls"><h2>Theme controls</h2><wa-select id="radius" label="Corner scale"><wa-option value="0">Square / 0</wa-option><wa-option value="1" selected>Default / 1</wa-option><wa-option value="2">Rounder / 2</wa-option></wa-select><wa-select id="spacing" label="Spacing scale"><wa-option value="0.8">Compact / 0.8</wa-option><wa-option value="1" selected>Default / 1</wa-option><wa-option value="1.25">Relaxed / 1.25</wa-option></wa-select><wa-switch id="dark">Dark appearance</wa-switch><wa-button id="reset" appearance="outlined">Restore defaults</wa-button><p class="hint">These controls change only the specimen. The editing controls keep their original dimensions.</p></section><section id="specimen" class="specimen" aria-label="Theme specimen"><div class="sample-head"><span class="badge">COMPONENT PREVIEW</span><span class="hint">Free components</span></div><h2>Your next workspace</h2><p class="hint">Form labels, field borders and actions inherit semantic tokens through the shadow boundary.</p><wa-input id="workspace" label="Workspace name" hint="Use at least two characters." value="Field notes"></wa-input><wa-select id="region" label="Storage region"><wa-option value="europe" selected>Europe</wa-option><wa-option value="america">North America</wa-option><wa-option value="asia">Asia Pacific</wa-option></wa-select><div class="sample-actions"><wa-button id="create" variant="brand">Apply name locally</wa-button><wa-button disabled>Invite later</wa-button></div><p id="result" role="status">No workspace is created by this specimen.</p><div class="token-readout"><code id="values">--wa-border-radius-scale: 1;<br>--wa-space-scale: 1;</code></div></section></div><footer>Native Web Awesome 3.14.0. The surrounding workbench is original HTML/CSS.</footer></main>
```

코드 참조

- 초기 선택 항목에는 wa-option의 selected를 사용합니다.

- 무료 컴포넌트만 사용합니다.

### 전체 가져오기 코드와 토큰 제어

컴포넌트를 등록하고 업그레이드가 완료될 때까지 기다린 다음, 범위가 지정된 커스텀 속성을 변경하고 로컬 유효성 검사를 적용합니다.

```
import '@awesome.me/webawesome/dist/styles/themes/default.css';
import '@awesome.me/webawesome/dist/components/button/button.js';
import '@awesome.me/webawesome/dist/components/input/input.js';
import '@awesome.me/webawesome/dist/components/select/select.js';
import '@awesome.me/webawesome/dist/components/option/option.js';
import '@awesome.me/webawesome/dist/components/switch/switch.js';
import './style.css';
const $=id=>document.getElementById(id);function update(){const s=$('specimen');s.style.setProperty('--wa-border-radius-scale',$('radius').value);s.style.setProperty('--wa-space-scale',$('spacing').value);s.classList.toggle('wa-dark',$('dark').checked);s.classList.toggle('wa-light',!$('dark').checked);$('values').textContent=`--wa-border-radius-scale: ${$('radius').value};\n--wa-space-scale: ${$('spacing').value};`;}
Promise.all(['wa-select','wa-switch','wa-input','wa-button'].map(x=>customElements.whenDefined(x))).then(async()=>{await Promise.all([...document.querySelectorAll('wa-select')].map(e=>e.updateComplete));for(const id of ['radius','spacing','dark'])$(id).addEventListener('change',update);$('reset').addEventListener('click',()=>{$('radius').value='1';$('spacing').value='1';$('dark').checked=false;update()});$('create').addEventListener('click',()=>{const field=$('workspace');field.setCustomValidity(field.value.trim().length<2?'Use at least two non-space characters.':'');if(!field.reportValidity())return;$('result').textContent=`Applied “${field.value.trim()}” in the ${$('region').value} specimen. No workspace or storage allocation was created.`});$('workspace').addEventListener('input',()=>$('workspace').setCustomValidity(''));update()});
```

코드 참조

- whenDefined를 사용하면 업그레이드되지 않은 커스텀 요소를 읽지 않습니다 API.

- 코드에서는 사용 중인 컴포넌트만 가져옵니다.

### 범위가 지정된 예시 CSS

일반 HTML는 네이티브 커스텀 요소에 상속되는 것과 동일한 테마 변수를 사용합니다.

```
*{box-sizing:border-box}body{margin:0;font-family:var(--wa-font-family-body);font-size:16px;line-height:var(--wa-line-height-normal);color:var(--wa-color-text-normal);background:#f5f6f8}.token-workbench{max-width:1100px;margin:auto;padding:32px}header{max-width:740px;margin-bottom:28px}h1{font-size:34px;line-height:1.15;letter-spacing:-.03em}h2{font-size:23px;line-height:1.25}.eyebrow{font-size:11px;letter-spacing:.12em;font-weight:700}.workbench-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px}.controls{display:flex;flex-direction:column;gap:20px;padding:24px;background:white;border:1px solid #d9dde3;border-radius:12px}.controls h2{margin:0}.hint,footer{color:var(--wa-color-text-quiet);font-size:14px}.specimen{background:var(--wa-color-surface-default);color:var(--wa-color-text-normal);border:1px solid var(--wa-color-surface-border);border-radius:var(--wa-border-radius-l);padding:var(--wa-space-xl);display:flex;flex-direction:column;gap:var(--wa-space-l)}.specimen h2,.specimen p{margin:0}.sample-head,.sample-actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--wa-space-s)}.sample-head{justify-content:space-between}.badge{font-size:10px;letter-spacing:.09em;font-weight:700;background:var(--wa-color-brand-fill-quiet);color:var(--wa-color-brand-on-quiet);padding:4px 8px;border-radius:var(--wa-border-radius-s)}.token-readout{background:var(--wa-color-surface-lowered);padding:var(--wa-space-m);border-radius:var(--wa-border-radius-m);font:13px/1.7 var(--wa-font-family-code);white-space:pre-wrap;overflow-wrap:anywhere}#result{font-size:13px}footer{margin-top:20px}@media(max-width:700px){.token-workbench{padding:20px 16px}.workbench-grid{grid-template-columns:1fr}.controls{padding:20px}h1{font-size:28px}.specimen{padding:var(--wa-space-l)}}
```

코드 참조

- 워크벤치 제목과 레이아웃 중단점은 독자적으로 정한 값입니다.

### 완전한 index.html 문서

제공된 main.js와 스타일시트에 사용하는 Vite 루트 문서입니다.

```
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Web Awesome token workbench</title></head><body><main class="token-workbench"><header><p class="eyebrow">WEB AWESOME / TOKEN WORKBENCH</p><h1>See the theme cross the component boundary.</h1><p>Change a scoped token and inspect native custom elements alongside ordinary HTML.</p></header><div class="workbench-grid"><section class="controls"><h2>Theme controls</h2><wa-select id="radius" label="Corner scale"><wa-option value="0">Square / 0</wa-option><wa-option value="1" selected>Default / 1</wa-option><wa-option value="2">Rounder / 2</wa-option></wa-select><wa-select id="spacing" label="Spacing scale"><wa-option value="0.8">Compact / 0.8</wa-option><wa-option value="1" selected>Default / 1</wa-option><wa-option value="1.25">Relaxed / 1.25</wa-option></wa-select><wa-switch id="dark">Dark appearance</wa-switch><wa-button id="reset" appearance="outlined">Restore defaults</wa-button><p class="hint">These controls change only the specimen. The editing controls keep their original dimensions.</p></section><section id="specimen" class="specimen" aria-label="Theme specimen"><div class="sample-head"><span class="badge">COMPONENT PREVIEW</span><span class="hint">Free components</span></div><h2>Your next workspace</h2><p class="hint">Form labels, field borders and actions inherit semantic tokens through the shadow boundary.</p><wa-input id="workspace" label="Workspace name" hint="Use at least two characters." value="Field notes"></wa-input><wa-select id="region" label="Storage region"><wa-option value="europe" selected>Europe</wa-option><wa-option value="america">North America</wa-option><wa-option value="asia">Asia Pacific</wa-option></wa-select><div class="sample-actions"><wa-button id="create" variant="brand">Apply name locally</wa-button><wa-button disabled>Invite later</wa-button></div><p id="result" role="status">No workspace is created by this specimen.</p><div class="token-readout"><code id="values">--wa-border-radius-scale: 1;<br>--wa-space-scale: 1;</code></div></section></div><footer>Native Web Awesome 3.14.0. The surrounding workbench is original HTML/CSS.</footer></main>
<script type="module" src="/main.js"></script></body></html>
```

코드 참조

- Vite 바닐라 프로젝트를 만들고 위에 나온 main.js와 style.css 전체를 사용합니다.

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

### 구현 시작점

전체 main.js, CSS 및 body 예제로 번들러에서 워크벤치를 재현할 수 있습니다. 오프라인 데모는 테마 CSS를 인라인으로 포함한 esbuild 번들입니다. React 공급자는 필요하지 않습니다.

```
// Create a Vite vanilla project, then install:
// npm install @awesome.me/webawesome@3.14.0
// index.html: paste the complete workbench markup in body,
// then add <script type="module" src="/main.js"></script>.
// main.js: use the complete imports and token-controls example above.
// style.css: use the complete scoped specimen CSS above.

// Minimum registration pattern used by this example:
import '@awesome.me/webawesome/dist/styles/themes/default.css';
import '@awesome.me/webawesome/dist/components/button/button.js';
import '@awesome.me/webawesome/dist/components/input/input.js';
import '@awesome.me/webawesome/dist/components/select/select.js';
import '@awesome.me/webawesome/dist/components/option/option.js';
import '@awesome.me/webawesome/dist/components/switch/switch.js';
// Do not duplicate these imports if using the complete main.js above.
```

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

```
Web Awesome 3.14.0 범위 지정 토큰 워크벤치를 사용하고 제공된 wa-select, wa-option, wa-input, wa-button, wa-switch 요소를 등록합니다. 초기 선택 항목을 읽기 전에 컴포넌트 정의와 updateComplete가 완료될 때까지 기다립니다. --wa-border-radius-scale과 --wa-space-scale은 예시 영역에만 적용하고, 관련 없는 페이지 콘텐츠는 변경하지 않은 채 해당 영역의 wa-light/wa-dark 클래스를 전환합니다. 표시되는 토큰 값이 네이티브 컨트롤과 동기화되도록 하고 레이블을 유지합니다. 워크벤치는 검사 도구로 사용하고 기기 관리 인터페이스로 취급하지 않습니다.
```

## Web Awesome 디자인 시스템 소스와 범위

Web Awesome 3.14.0 공개 컴포넌트와 기본 테마. 레이아웃은 독자적으로 정한 값이며, 로컬에서 이름을 적용해도 워크스페이스나 저장소가 생성되지 않습니다.

- 설치 npm/dist와 dist-cdn의 차이 및 필수 테마.

- 디자인 토큰 테마 토큰 범주.

- 사용자 지정 커스텀 속성과 섀도 경계.

- Select 옵션, 값 및 초기 선택.

- 입력 유효성 검사 API.

- 스위치 불리언 커스텀 요소.

## Web Awesome 디자인 시스템 관련 리소스

### Ariakit

Ariakit는 명시적인 공유 상태와 조합 가능한 접근성 지원 요소를 갖춘 스타일 없는 React 컴포넌트를 제공합니다. 콤보박스는 입력 중인 텍스트와 확정된 선택 항목을 구분하므로 검색 기반 선택기에 유용합니다. 아래 레퍼런스 검색기에서는 그룹별 항목과 선택 불가 항목을 통해 이 차이를 보여 줍니다.

### Bits UI

Bits UI는 기본 파트와 Svelte 5 상태를 조합하는 헤드리스 Svelte 컴포넌트를 제공합니다. 이 예제에서는 파생된 혼합 상태 체크박스, 독립적으로 확장되는 아코디언 섹션, 포털 기반 검토 대화상자를 함께 사용하며 전체 스타일 구성도 포함합니다.

### Bootstrap

Bootstrap 5.3.8의 실제 간격 스케일, 의미 기반 색상, 반응형 그리드, 컴포넌트 API를 사용하세요. 작동하는 예약 양식, 오류 요약, 표 필터, 모달, 색상 모드 전환기를 살펴보고 문서에 소개된 코드를 재사용할 수 있습니다.


- [구현 레퍼런스](https://webawesome.com/docs/customizing)
- [출처](https://webawesome.com/docs/tokens/)
- [지원 사양 읽기](https://webawesome.com/docs/usage)
- [지원 사양 읽기](https://webawesome.com/docs/tokens/)
- [지원 사양 읽기](https://webawesome.com/docs/customizing)
- [지원 사양 읽기](https://webawesome.com/docs/components/select/)
- [지원 사양 읽기](https://webawesome.com/docs/components/input/)
- [지원 사양 읽기](https://webawesome.com/docs/)
- [코드 참조](https://webawesome.com/docs/components/select/)
- [코드 참조](https://webawesome.com/docs)
- [코드 참조](https://webawesome.com/docs/customizing)
- [코드 참조](https://webawesome.com/)
- [설치 npm/dist와 dist-cdn의 차이 및 필수 테마.](https://webawesome.com/docs/)
- [디자인 토큰 테마 토큰 범주.](https://webawesome.com/docs/tokens/)
- [사용자 지정 커스텀 속성과 섀도 경계.](https://webawesome.com/docs/customizing)
- [Select 옵션, 값 및 초기 선택.](https://webawesome.com/docs/components/select/)
- [입력 유효성 검사 API.](https://webawesome.com/docs/components/input/)
- [스위치 불리언 커스텀 요소.](https://webawesome.com/docs/components/switch/)