로컬에 번들로 포함된 네이티브 Web Awesome 3.14.0 커스텀 요소 및 기본 테마. · 구현 레퍼런스
02
Web Awesome 디자인 시스템 디자인 참조
설치된 패키지에서 확인한 Web Awesome 3.14.0 기본 테마 CSS입니다. 아래 색상 항목은 의미 기반 별칭이며, 팔레트 참조를 임의의 16진수 값으로 바꾸지 않고 그대로 유지했습니다. 크기 체계에서 계산한 픽셀 예시는 루트 크기 16px, scale=1을 기준으로 합니다.
Web Awesome는 React 애플리케이션을 요구하는 대신 등록된 HTML 커스텀 요소를 제공합니다. wa-input 또는 wa-select를 가져오면 일반 HTML에 배치하고 문서화된 속성과 이벤트를 통해 제어할 수 있습니다. 이 작업 환경에는 버전 3.14.0이 포함되어 있으며 공개 패키지에서 제공되는 컴포넌트만 사용합니다.
화면에 표시되는 컨트롤은 shadow root 구현을 포함한 실제 커스텀 요소입니다. 주변의 헤더, 섹션, 정보 표시는 독자적으로 만든 HTML 요소입니다. 따라서 이 예시에서는 상속된 커스텀 속성을 통해 컴포넌트 경계를 넘어 적용되는 스타일 결정과 페이지 구성에 속하는 스타일 결정을 구분해 살펴볼 수 있습니다.
기본 테마는 올라온 표면, 기본 표면, 내려간 표면, 일반 텍스트와 차분한 텍스트, 여러 브랜드 채우기/전경색 조합을 구분합니다. 토큰 정보 표시는 내려간 표면을, 주요 예시는 기본 표면을 사용하며, 작은 배지는 brand-fill-quiet와 brand-on-quiet를 짝지어 사용합니다. 이러한 역할은 모양이 바뀌어도 의미를 유지합니다.
참조 예시에서는 각 역할을 임의의 16진수 값으로 치환하지 않고 var(--wa-color-neutral-10)과 같은 별칭을 그대로 사용합니다. 팔레트가 바뀌어도 시맨틱 할당은 유효하게 유지될 수 있습니다. 강한 브랜드 액션을 맞춤 설정할 때는 채우기와 그 위에 표시되는 전경색을 함께 고려하세요. 둘 중 하나만 바꾸면 버튼 텍스트를 읽기 어려워질 수 있습니다.
모서리 반경 선택기는 예시 영역에만 --wa-border-radius-scale을 적용합니다. 배율이 1이면 기본 소형/중형/대형 모서리 반경은 16px 루트 크기에서 각각 3, 6, 12픽셀로 계산됩니다. 배율을 0으로 설정하면 배율에 따라 달라지는 모서리가 직각이 되고, 2로 설정하면 두 배가 됩니다. 알약형과 원형 토큰은 별개의 개념이므로 이 배율에 따라 바뀐다고 가정해서는 안 됩니다.
간격 선택기는 --wa-space-scale을 변경합니다. 예시 영역의 패딩, 간격, 정보 표시 간격은 공식 간격 토큰을 사용하므로 서로의 관계를 유지한 채 함께 바뀝니다. 모든 컴포넌트의 모든 치수가 확대된다는 뜻은 아닙니다. 컴포넌트 컨트롤 크기는 별도의 토큰 관계를 따릅니다. 편집 패널은 변경 범위에 포함되지 않으므로 예시 영역을 바꾸는 동안 안정적으로 비교할 수 있습니다.
기본 본문 글꼴은 ui-sans-serif, system-ui, sans-serif입니다. 제목 글꼴은 본문 글꼴의 별칭이며, 코드는 ui-monospace를 사용합니다. 일반 줄 높이 토큰은 1.6이고, 좁은 줄 높이는 1.2입니다. 중간 크기 글꼴 토큰은 font-size-scale을 곱한 1rem이며, 더 큰 크기는 반올림된 계산값을 사용합니다. 표에는 이러한 의존성을 감추지 않고 계산식을 표시합니다.
작업 환경에서는 제목에 34px, 섹션 제목에 23px을 사용하며, 로컬 중단점 700px에서 페이지 제목 크기를 줄입니다. 이 규칙은 페이지에서 독자적으로 정의한 것입니다. 기본 컴포넌트 타이포그래피와 비교할 수 있도록 기본 필드는 라이브러리의 레이블 및 힌트 스타일을 유지합니다.
각 선택 항목은 안정적인 값을 가진 wa-option 하위 요소를 포함합니다. 기본 옵션에는 현재 컴포넌트 가이드에 맞춰 selected를 지정했습니다. 실행 중 변경된 값은 select의 value 속성에서 읽습니다. 테마 컨트롤은 change 이벤트를 수신해 CSS 커스텀 속성을 업데이트하며, 렌더링된 옵션 레이블의 텍스트를 분석하지 않습니다.
지역 선택기는 일반적인 예시 필드이며 외부 스토리지 서비스를 제어하지 않습니다. 선택한 값은 로컬 작업 메시지에 표시됩니다. 유럽을 선택하면 스토리지가 할당되는 것처럼 보이지 않도록 했습니다. 실제 제품에서 쓰일 법한 용어를 사용하는 컴포넌트 예시에서는 이 구분이 중요합니다.
일반 하위 요소 선택자는 컴포넌트의 shadow tree 내부에 자유롭게 접근할 수 없습니다. 이 예시에서는 상속되는 테마 변수를 사용해 필드 배경, 텍스트, 모서리 반경을 주변 HTML와 일관되게 유지할 수 있습니다. 이는 내부에서 생성된 마크업을 직접 지정하려는 방식이 아니라 지원되는 스타일 지정 방법입니다.
컴포넌트별로 변경하려면 해당 컴포넌트의 문서화된 CSS 커스텀 속성과 CSS 파트를 참조하세요. 전역 input 선택자가 wa-input 내부의 input까지 반드시 변경하는 것은 아닙니다. 반대로 공통 상위 요소에 테마 클래스를 추가하거나 변수를 지정하면 하위 커스텀 요소 여러 개에 의도적으로 영향을 줄 수 있으므로 적용 범위를 신중히 선택해야 합니다.
페이지 관점에서 컴포넌트 등록은 비동기적으로 이루어집니다. 예시에서는 사용하는 API에 대해 customElements.whenDefined가 완료될 때까지 기다린 다음, 선택 항목이 업데이트될 때까지 기다린 후 초기값을 읽습니다. 이렇게 하면 아직 알 수 없는 HTML 태그에서 컴포넌트 클래스로 업그레이드되지 않은 요소에 기본값을 적용하는 일을 방지할 수 있습니다.
작업 영역 동작에서는 wa-input에 setCustomValidity와 reportValidity를 사용합니다. 공백을 제거한 이름이 두 글자 미만이면 입력이 거부되며, input 이벤트가 발생하면 맞춤 오류를 지워 다시 수정할 수 있습니다. 비활성화된 나중에 초대 버튼은 컴포넌트의 기본 비활성 상태입니다. 상태 텍스트에는 로컬에서 적용된 이름만 표시되며, 전체 코드에는 작업 영역 생성이나 할당 요청이 없습니다.
Vite 바닐라 애플리케이션에 @awesome.me/[email protected]을 설치하고, 제공된 main.js를 진입점으로 사용합니다. 기본 테마 스타일시트가 필요합니다. 예제는 페이지 레이아웃이 명시적이므로 더 광범위한 네이티브 리셋이나 유틸리티 번들은 의도적으로 불러오지 않습니다 CSS. 가져오기를 통해 마크업에 사용된 다섯 가지 컴포넌트 유형을 등록합니다.
npm dist 모듈은 번들러용입니다. dist-cdn 배포판은 의존성이 다른 방식으로 번들링되므로 브라우저에서 모듈을 직접 불러올 때 사용할 수 있습니다. dist 가져오기를 일반 script 태그에 복사한 뒤 bare 의존성이 자동으로 해석될 것이라고 가정하지 마세요. 외부 에셋이 필요한 컴포넌트에는 문서에 안내된 기본 경로 설정이 필요합니다. 이 예제는 사용자가 제공하는 아이콘 에셋을 사용하지 않으며 오프라인에서 실행할 수 있도록 번들링됩니다.
워크벤치는 기본 테마와 공개 컴포넌트를 보여 줍니다. 일부 Web Awesome 컴포넌트, 패턴 및 디자인 리소스는 Pro 제공 항목이므로, 공개 패키지를 설치하면 카탈로그의 모든 항목을 사용할 수 있다고 오해하지 않도록 페이지를 구성했습니다. 공유 디자인 시스템의 필수 의존성으로 지정하기 전에 컴포넌트의 사용 가능 여부를 확인해야 합니다.
재사용 가능한 제품 테마 문서에는 변경한 변수와 적용 범위, 두 가지 표시 모드의 확인 방법을 기록해야 합니다. 라이브 워크벤치는 그 과정을 보여 주는 간단한 예입니다. 독자는 분리된 팔레트 이미지에 의존하지 않고, 실제로 변경한 변수를 확인하고 그 결과가 네이티브 컴포넌트에 어떻게 반영되는지 비교할 수 있습니다.
컴포넌트를 등록하고 업그레이드가 완료될 때까지 기다린 다음, 범위가 지정된 커스텀 속성을 변경하고 로컬 유효성 검사를 적용합니다.
자바스크립트
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()});
Vite 바닐라 프로젝트를 만들고 위에 나온 main.js와 style.css 전체를 사용합니다.
04
Web Awesome 디자인 시스템 에이전트 설정
구현 시작점
전체 main.js, CSS 및 body 예제로 번들러에서 워크벤치를 재현할 수 있습니다. 오프라인 데모는 테마 CSS를 인라인으로 포함한 esbuild 번들입니다. React 공급자는 필요하지 않습니다.
자바스크립트
// Create a Vite vanilla project, then install:
// npm install @awesome.me/[email protected]
// 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 클래스를 전환합니다. 표시되는 토큰 값이 네이티브 컨트롤과 동기화되도록 하고 레이블을 유지합니다. 워크벤치는 검사 도구로 사용하고 기기 관리 인터페이스로 취급하지 않습니다.
05
Web Awesome 디자인 시스템 소스와 범위
Web Awesome 3.14.0 공개 컴포넌트와 기본 테마. 레이아웃은 독자적으로 정한 값이며, 로컬에서 이름을 적용해도 워크스페이스나 저장소가 생성되지 않습니다.
