# Dell 디자인 시스템

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

로컬 검색어를 제출하고 결과 하나를 확인한 다음 초기화를 눌러 목록을 복원하세요.

## Dell 디자인 시스템 디자인 참조

DDS v3 기초 자료와 검증된 Vanilla 3.2.0 Storybook. 색상 값은 Text Input 토큰 표에 명시된 밝은 모드 미리보기용이며 모든 테마에 적용되는 값은 아닙니다. 미리보기는 독립적인 HTML/CSS에서 이 규칙을 사용하고, 코드 예제는 버전이 지정된 DDS CDN을 불러옵니다.

### 간격

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --dds-spacing-xs | 4px / 0.25rem | 아이콘과 레이블 사이의 간격. |
| --dds-spacing-sm | 8px / 0.5rem | 나란히 배치된 검색 작업. |
| --dds-spacing-md | 12px / 0.75rem | 간결한 개체 행. |
| --dds-spacing-lg | 16px / 1rem | 결과 콘텐츠의 패딩. |
| --dds-spacing-xl | 24px / 1.5rem | 검색과 결과 사이의 간격. |
| --dds-spacing-2xl | 32px / 2rem | 메인 페이지의 안쪽 여백. |
| --dds-spacing-3xl | 40px / 2.5rem | 섹션 간격. |
| --dds-spacing-4xl | 48px / 3rem | 주요 섹션 경계. |
| --dds-spacing-5xl | 64px / 4rem | 넓은 레이아웃 간격. |
| --dds-spacing-6xl | 80px / 5rem | 여유 있는 구성. |
| --dds-spacing-7xl | 96px / 6rem | 목록에서 가장 큰 간격 단계. |
### 밝은 모드 시맨틱 색상 예시

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --dds-color-text-primary | #1D2C3B | 주요 결과 레이블. |
| --dds-color-background-surface-secondary | #EBF1F6 | 보조 콘텐츠 표면. |
| --dds-color-border-brand-base | #00468B | 브랜드 입력 테두리. |
| --dds-color-background-surface-inactive | #E1E1E1 | 비활성 필드 표면. |
| --dds-color-border-inactive-base | #7E7E7E | 비활성 경계선. |
| --dds-color-text-inactive | #B6B6B6 | 비활성 레이블이며 본문 텍스트가 아닙니다. |
### 타이포그래피 단계에서 선택한 역할

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| Display 1 ≥1024px | 72px / 88px; weight 300 | 촘촘한 결과 목록이 아닌 큰 편집용 제목. |
| Heading 1 ≥1024px | 48px / 56px; weight 300 | 큰 페이지 제목. |
| Heading 1 <1024px | 40px / 48px; weight 300 | 간결한 페이지 제목. |
| Heading 4 ≥1024px | 24px / 32px; weight 400 | 섹션 제목. |
| Heading 4 <1024px | 20px / 28px; weight 400 | 간결한 섹션 제목. |
| Body 2 | 16px / 24px; weight 400 | 기본 문단 역할. |
| Body 3 | 14px / 20px; weight 400 | 밀도 높은 메타데이터. |
| Caption | 12px / 20px; weight 400 | 필드 안내 콘텐츠. |
| Button 1 | 16px / 24px; weight 500 | 기본 작업 레이블. |
### 검색 구성

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| InputGroup(element) | Initializer exported by @dds/components | 그룹 래퍼가 생성된 뒤 초기화하세요. |
| dds__input-group | Input and addon wrapper | 입력 앞뒤의 슬롯을 입력창에 인접하게 유지하세요. |
| dds__text-input | Native input class | 검색어와 결과는 애플리케이션에서 관리합니다. |
| dds__input-addon | Accessory wrapper | 장식용 선행 아이콘 또는 명확한 동작. |
| dds__button--ghost | Low-emphasis button modifier | 검색/지우기 예시에서 이 변형을 사용합니다. |
| dds__button--icon-only | Icon-only button modifier | 버튼에 aria-label을 지정해야 합니다. |
### 스타일 로드

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| dds-styles.css | All-in-one starter | 컴포넌트 스타일, 토큰, 글꼴 및 헬퍼 번들이 포함됩니다. |
| dds-tokens.css | Global and semantic tokens | 컴포넌트 토큰은 포함되지 않습니다. |
| dds-components.css | All component styles and component tokens | 번들을 분리하는 방식을 사용할 때 토큰 및 글꼴과 함께 필요합니다. |
| dds-fonts.css | CDN font definitions | DDS 글꼴 렌더링에 포함합니다. |
| dds-grid.css | Grid classes | 별도의 레이아웃 번들입니다. |
| dds-icons.css | Icon classes | 이 파일만으로는 아이콘 글꼴을 가져오지 않습니다. 아이콘 설정을 참고하세요. |
## Dell 디자인 시스템 전체 가이드

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

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

## Dell 디자인 시스템 DDS v3와 구현 범위

### 검색 서비스가 아닌 조합

> DDS는 재사용 가능한 시각적 기반과 제품 동작을 분리합니다. 이 기기 목록에 유용한 통합 지점은 부가 요소 슬롯이 있는 기본 입력 필드인 InputGroup입니다. 호출할 Search 생성자는 없으며, 디자인 시스템이 기기를 가져오지도 않습니다. 애플리케이션에서는 입력 중인 값, 적용된 검색어, 선택한 기기를 서로 다른 값으로 관리합니다. 이렇게 하면 입력과 제출의 차이가 명확해집니다.

지원 사양 읽기

### 하나의 버전 선택

아래의 공개 개발자 예시는 Vanilla 3.2.0을 대상으로 합니다. CSS 및 JavaScript도 같은 버전을 사용합니다. 기존 v2 통합은 패키징 방식이 다르므로, 이 가져오기를 적용하기 전에 마이그레이션 문서를 따라야 합니다. 현재 패키지는 Dell 내부용입니다. 문서에 안내된 CDN을 사용하면 공개 npm 레지스트리가 있다고 가정하지 않고도 이 조합을 구체적으로 평가할 수 있습니다.

지원 사양 읽기

## Dell 디자인 시스템 의미론적 표면과 경계

### 문서에 명시된 역할 이름 사용

참조 표에는 공식 컴포넌트 문서에 나온 라이트 모드 입력 값이 정리되어 있습니다. 제품 코드에서는 DDS 스타일을 불러온 후 의미론적 CSS 변수를 사용해야 합니다. 기본 텍스트와 보조 표면은 가독성 있는 결과 영역을 구성하고, 브랜드 테두리는 입력 필드의 경계를 표시합니다. 비활성 전경색은 의도적으로 흐리게 표현한 색이므로 기본 메타데이터 색상으로 사용하면 안 됩니다.

지원 사양 읽기

### DDS 토큰을 재정의하지 마세요

전역 색상 기본 요소는 의미론적 역할을 구성하며, 이러한 역할은 컴포넌트별 결정의 기반이 됩니다. 애플리케이션 작성자는 전역 색상 단계 대신 의미론적 역할을 참조해야 합니다. 다크 화면을 지원하려면 실제로 지원되는 토큰 모드를 사용해야 합니다. 페이지 배경만 바꾸면 필드, 레이블, 포커스 색상이 일관되지 않습니다. 로컬 예시는 라이트 모드로 유지합니다.

지원 사양 읽기

## Dell 디자인 시스템 문서 구조를 바꾸지 않는 반응형 타이포그래피

### 의미상 제목 하나, 시각적 크기 두 가지

화면 크기와 관계없이 페이지 제목은 h1으로 유지합니다. 문서에 명시된 Heading 1 크기인 넓은 화면의 48/56과 1024px 미만 화면의 40/48을 사용합니다. 이 예시는 독립적인 로컬 구현이므로 시스템 대체 글꼴을 사용하며, 기본 스타일시트는 DDS 글꼴 리소스를 제공합니다. 설명에는 Body 2를, 간결한 기기 메타데이터에는 Body 3을 사용합니다.

지원 사양 읽기

### 실제 이름이 들어갈 공간을 확보하세요

기기 모델명, 사무실 이름 또는 지원 상태는 여러 줄로 표시될 수 있습니다. 식별자를 읽기 쉽게 유지하고 자산 태그의 유일한 표기를 잘라내지 마세요. 좁은 화면에서는 시각적 계층 구조와 열 배치를 조정하되, 레이블과 값의 연결 관계는 유지합니다.

지원 사양 읽기

## Dell 디자인 시스템 분할 보기를 위한 4픽셀 간격 체계

### 간격 단계로 요소 간 관계를 나타내세요

연관된 동작 사이에는 sm, 결과 행 안에는 lg, 검색어 영역과 결과 영역 사이에는 xl을 사용합니다. 넓은 화면에서는 바깥 컨테이너에 2xl을 사용할 수 있습니다. 이는 문서에 명시된 간격 체계를 애플리케이션에 적용한 예이며, 모든 검색 페이지에 이와 똑같은 여백이 필요하다는 공식 지침은 아닙니다.

지원 사양 읽기

### 밀도와 재배치

DDS는 컴팩트, 기본, 여유로운 그리드를 설명합니다. 이 예시에서는 검색 컨트롤에 여유로운 그리드를 사용하고, 각 결과의 메타데이터에는 컴팩트 그리드를 적용합니다. 좁은 화면에서는 읽기 순서를 유지하도록 선택한 기기 패널을 결과 목록 아래에 배치합니다. 세부 정보 패널은 고정되어 있지 않으므로 마지막 결과를 가리지 않습니다.

- 모든 화면 너비에서 검색 레이블과 도움말을 필드 위에 둡니다.

- 행 안에 들어가지 않으면 제출 동작을 필드 아래로 옮깁니다.

- 가로 스크롤이 생기지 않도록 선택한 기기의 세부 정보를 결과 아래로 옮깁니다.

지원 사양 읽기

## Dell 디자인 시스템 검색 구성과 동작

### 수동 제출은 의도된 동작입니다

앞쪽의 검색 기호는 장식용이며, 표시되는 레이블이 기기 목록의 범위를 나타냅니다. 뒤쪽의 지우기 컨트롤은 입력값이 있을 때만 표시됩니다. 수동 모드에서는 양식을 제출하므로 Enter 키와 화면에 보이는 Search devices 버튼이 동일하게 작동합니다. 입력값을 바꾸기만 하면 적용된 결과 목록은 그대로 유지됩니다.

지원 사양 읽기

### 자동 검색은 동작 방식이 다릅니다

DDS는 네 번째 문자를 입력한 뒤 시작되는 자동 모드도 설명합니다. 이 모드로 문서화된 UI에 한 글자부터 즉시 필터링되는 동작을 연결하지 마세요. 자동 검색으로 전환한다면 수동 제출 버튼을 제거하고, 검색 시작 기준과 취소, 결과 알림을 신중하게 구현해야 합니다. 제공된 예시는 수동 모드를 선택합니다.

지원 사양 읽기

## Dell 디자인 시스템 입력값, 적용된 검색어, 선택 상태

### 예시의 상태 전환

지우기를 실행하면 입력값과 적용된 필터가 모두 초기화되고, 샘플 기기 전체 목록이 복원되며, 필드로 포커스가 돌아갑니다. 선택은 별도의 버튼 동작입니다. 검색어는 바꾸지 않고 자산 세부 정보를 표시합니다. 결과가 없으면 적용된 검색어와 명시적인 초기화 방법을 보여 줍니다. 원격 기기 목록을 검색했다고 표시하지 않습니다.

1. 자산 이름이나 태그를 입력하세요. 제출할 때까지 현재 결과가 유지됩니다.

2. 양식을 제출하고 필터링된 로컬 배열을 기준으로 결과 수를 업데이트합니다.

3. 결과를 확인하거나 검색어를 지우세요. 동작을 시작한 컨트롤에 포커스를 유지합니다.

지원 사양 읽기

## Dell 디자인 시스템 레이블, 랜드마크, 알림

### 검색 범위를 명확히 전달하세요

양식은 Device inventory라는 이름의 검색 랜드마크입니다. 입력 중에도 고정 레이블과 도움말 텍스트를 계속 표시합니다. 지우기 아이콘은 클릭 핸들러가 연결된 span이 아니라 aria-label이 지정된 버튼입니다. 장식용 기호는 보조 기술에서 숨깁니다. 결과 수는 정중한 상태 메시지로 제공하며, 입력할 때마다 알리는 대신 제출 후에 변경합니다.

지원 사양 읽기

### 선택은 페이지 이동이 아닙니다

각 결과는 눌림 상태와 전체 접근성 이름이 있는 실제 버튼입니다. 세부 정보 제목은 검사 중인 항목을 식별합니다. 이 예시에는 관리 백엔드가 없으므로 기기 관리 페이지를 여는 것처럼 보이는 링크는 없습니다. 현재 선택 항목은 테두리와 텍스트 레이블로 표시됩니다.

지원 사양 읽기

## Dell 디자인 시스템 실제 에셋을 불러오고 그룹을 초기화하세요

### 문서에 명시된 번들부터 시작하세요

승인된 내부 애플리케이션에서는 Dell Artifactory에서 @dds/components를 설치하고 프로젝트 스타일시트 파이프라인을 통해 dds-styles.css를 가져오세요. 독립형 개념 증명에는 아래에 표시된 버전 고정 공개 CDN 링크를 사용하세요. 마크업이 생성된 다음 InputGroup을 초기화하세요. 제출, 지우기, 필터링을 위한 이벤트 핸들러는 애플리케이션 코드로 구현해야 합니다.

지원 사양 읽기

### 구성이 작동한 후 최적화하세요

전체 스타일시트는 간단하게 시작할 수 있는 방법입니다. 필요한 항목만 통합하려면 전역/시맨틱 토큰과 글꼴에 더해 사용하는 각 컴포넌트의 스타일시트가 필요합니다. 토큰만으로는 컴포넌트 토큰이 포함되지 않으며, 아이콘 클래스만으로는 글꼴이 로드되지 않습니다. 이러한 지원 번들을 제거하면 컨트롤이 있는 것처럼 보여도 시각적으로 불완전할 수 있습니다.

지원 사양 읽기

## Dell 디자인 시스템 검색 동작을 테스트하세요

### 유용한 로컬 테스트

제출하지 않은 상태로 Latitude를 입력하고 이전 결과 개수가 유지되는지 확인하세요. 제출한 다음 일치하는 기기를 확인합니다. 없는 태그를 검색해 빈 상태를 확인한 뒤, 검색을 지우고 샘플 기기가 모두 다시 표시되는지 확인하세요. 키보드 입력과 좁은 화면에서도 반복합니다. 이러한 검사는 이 예시의 동작을 확인할 뿐, 이를 기반으로 하는 Dell 제품이나 네트워크 통합을 인증하지 않습니다.

지원 사양 읽기

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

### 완전한 독립형 인터랙티브 예제

문서 전체를 index.html로 저장한 다음 브라우저에서 엽니다. 독립적으로 구현한 HTML/CSS 해석을 바탕으로 DDS v3의 간격과 타이포그래피, 문서화된 라이트 모드 입력 색상을 적용했으며 시스템 대체 글꼴을 사용합니다.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Device inventory — DDS v3 study</title><style>*{box-sizing:border-box}body{margin:0;font:16px/24px Arial,sans-serif;color:#1d2c3b;background:white}header{padding:16px 32px;border-bottom:1px solid #c5d4e3;color:#00468b}main{padding:32px;max-width:1200px;margin:auto}h1{font-size:48px;line-height:56px;font-weight:300;margin:16px 0}h2{font-size:24px;line-height:32px;font-weight:400}label{display:block;font-weight:bold;margin-bottom:8px}.search{display:flex;gap:8px;align-items:stretch}.input{border:1px solid #00468b;display:flex;align-items:center;flex:1;min-width:0}.input span{padding:8px 12px}input{border:0;padding:12px 0;width:100%;min-width:0;font:inherit;background:transparent;color:inherit}button{font:inherit;cursor:pointer;padding:8px 16px;background:white;color:#00468b;border:1px solid #00468b}button:hover{background:#ebf1f6}button:focus-visible,input:focus-visible{outline:3px solid #00468b;outline-offset:3px}.input button{border:0}.submit{background:#00468b;color:white}.submit:hover{background:#003567}.helper{font-size:14px;line-height:20px;color:#516478}.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;margin-top:24px}.result{display:flex;text-align:left;align-items:center;gap:16px;width:100%;padding:16px;margin-bottom:12px;border:1px solid #c5d4e3;color:#1d2c3b}.result[aria-pressed=true]{border:2px solid #00468b;padding:15px;background:#ebf1f6}.result strong{display:block}.result small{display:block;font-size:14px}.device{width:64px;height:40px;border:3px solid #516478;border-radius:3px;background:linear-gradient(140deg,#dcebf6,#86afce);position:relative;flex-shrink:0}.device:after{content:'';position:absolute;bottom:-8px;left:-7px;right:-7px;height:4px;background:#516478;border-radius:0 0 4px 4px}.device.desktop{width:28px;height:48px;background:#c5d4e3;margin:0 18px}.device.desktop:after{display:none}aside{background:#ebf1f6;padding:24px;align-self:start}aside h2{margin-top:0}dt{font-size:12px;color:#516478;margin-top:16px}dd{margin:4px 0 0}footer{padding:16px 32px;border-top:1px solid #c5d4e3;font-size:12px;line-height:20px;color:#516478}#empty{padding:24px;background:#ebf1f6}#count{font-size:14px;margin:24px 0 0}@media(max-width:1023px){h1{font-size:40px;line-height:48px}}@media(max-width:650px){main{padding:16px}.layout{grid-template-columns:1fr}.search{flex-wrap:wrap}.input{flex-basis:100%}.submit{width:100%}header,footer{padding:16px}}</style><header>DEVICE OPERATIONS <span style="float:right;font-size:12px">Local sample inventory</span></header><main><h1>Find a device</h1><p>Review model, location and support coverage in one place.</p><form role="search" aria-label="Device inventory" id="form"><label for="query">Search devices</label><p class="helper" id="help">Enter a model or asset tag. Results change after you submit.</p><div class="search"><div class="input"><span aria-hidden="true">⌕</span><input id="query" type="search" aria-describedby="help"><button type="button" id="clear" hidden aria-label="Clear device search">Clear</button></div><button class="submit" type="submit">Search devices</button></div></form><p id="count" role="status"></p><div class="layout"><section aria-label="Matching devices"><div id="results"></div><div id="empty" hidden>No devices match this query. Clear the search to view the sample inventory.</div></section><aside aria-label="Device details"><span class="helper">SELECTED DEVICE</span><h2 id="name"></h2><dl><dt>Asset tag</dt><dd id="tag"></dd><dt>Location</dt><dd id="location"></dd><dt>Support coverage</dt><dd id="coverage"></dd><dt>Record source</dt><dd>Local demonstration data</dd></dl></aside></div></main><footer>Independent HTML/CSS interpretation of DDS v3. Published light-mode colors, spacing and type sizes; system fallback font. No Dell services are connected.</footer><script>
const devices=[{name:'Latitude 7450',tag:'LT-104',location:'London · Design studio',coverage:'Through 30 June 2027',kind:'laptop'},{name:'Precision 5680',tag:'PR-208',location:'Berlin · Engineering lab',coverage:'Through 15 March 2028',kind:'laptop'},{name:'OptiPlex 7020',tag:'OP-316',location:'Amsterdam · Front desk',coverage:'Through 20 August 2027',kind:'desktop'}];let selected=devices[0],applied='';const $=id=>document.getElementById(id);function render(){const matches=devices.filter(d=>(d.name+' '+d.tag).toLowerCase().includes(applied.toLowerCase()));$('count').textContent=matches.length+' matching device'+(matches.length===1?'':'s')+(applied?' for “'+applied+'”':'');$('results').replaceChildren();$('empty').hidden=matches.length>0;for(const d of matches){const b=document.createElement('button');b.className='result';b.setAttribute('aria-pressed',String(d===selected));const pic=document.createElement('span');pic.className='device '+d.kind;pic.setAttribute('aria-hidden','true');const label=document.createElement('span'),strong=document.createElement('strong'),small=document.createElement('small');strong.textContent=d.name;small.textContent=d.tag+' · '+d.location.split(' · ')[0];label.append(strong,small);b.append(pic,label);b.onclick=()=>{selected=d;render()};$('results').append(b)}for(const key of ['name','tag','location','coverage'])$(key).textContent=selected[key]}
$('form').onsubmit=e=>{e.preventDefault();applied=$('query').value.trim();render()};$('query').oninput=()=>{$('clear').hidden=!$('query').value};$('clear').onclick=()=>{$('query').value='';applied='';$('clear').hidden=true;render();$('query').focus()};render();
</script></html>
```

코드 참조

- 이 문서에는 자체 검색 동작이 포함되어 있습니다. InputGroup 초기화가 버전 고정 스타일시트와 스크립트에 맞게 작동하는지 확인하려면 기본 DDS 예시를 사용하세요.

### 전체 네이티브 구현 엔트리

셋업의 전체 구현을 집중적인 API 설명과 함께 여기에 모았습니다. 셋업에 문서화된 패키지 및 빌드 전제 조건을 따르세요.

```
<!doctype html>
<html lang="en"><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" crossorigin href="https://dds.dell.com/components/3.2.0/css/dds-styles.css">
<title>Local device search</title>
<main style="padding:24px;max-width:720px;margin:auto">
<h1>Find a device</h1>
<form role="search" aria-label="Device inventory" id="search-form">
<label for="query">Search devices</label>
<p id="help">Enter a model or asset tag, then submit.</p>
<div class="dds__input-group" id="device-search">
<div class="dds__input-addon" aria-hidden="true">⌕</div>
<input id="query" class="dds__text-input" type="search" aria-describedby="help">
<div class="dds__input-addon"><button class="dds__button dds__button--ghost dds__button--xs" type="button" id="clear" hidden aria-label="Clear device search">Clear</button></div>
</div>
<button class="dds__button dds__button--ghost dds__button--md" type="submit">Search devices</button>
</form>
<p id="count" role="status"></p><ul id="results"></ul>
</main>
<script type="module">
import { InputGroup } from 'https://dds.dell.com/components/3.2.0/js/index.mjs';
InputGroup(document.querySelector('#device-search'));
const inventory=['Latitude 7450 · LT-104','Precision 5680 · PR-208','OptiPlex 7020 · OP-316'];
const input=document.querySelector('#query'), clear=document.querySelector('#clear');
function render(query='') {
 const matches=inventory.filter(x=>x.toLowerCase().includes(query.toLowerCase()));
 document.querySelector('#results').replaceChildren(...matches.map(text=>{const li=document.createElement('li');li.textContent=text;return li}));
 document.querySelector('#count').textContent=matches.length+' matching devices';
}
input.addEventListener('input',()=>{clear.hidden=!input.value.length});
document.querySelector('#search-form').addEventListener('submit',event=>{event.preventDefault();render(input.value.trim())});
clear.addEventListener('click',()=>{input.value='';clear.hidden=true;render();input.focus()});
render();
</script></html>
```

코드 참조

- index.html로 저장한 뒤 문서화된 DDS 3.2.0 CDN에 네트워크로 연결된 상태에서 로컬 서버로 제공하세요. 실제 InputGroup 초기화와 로컬 필터링을 사용하며 Dell 백엔드는 사용하지 않습니다. 내부 npm 대안: npm install @dds/components --registry=https://artifacts.dell.com/artifactory/api/npm/dx-npm-prod/ . 삽입된 미리보기는 오프라인에서 HTML/CSS을 해석한 결과이며, 이 CDN 런타임이 아닙니다.

### 애플리케이션이 관리하는 검색과 InputGroup

이 설정은 기본 입력 요소와 추가 요소를 조합하고, InputGroup을 초기화한 뒤 실제 폼 제출을 연결합니다. 앞에 표시된 기호는 로컬 장식 문자이며, 아이콘 글꼴에 대한 의존성을 의미하지 않습니다.

```
import { InputGroup } from '@dds/components';
InputGroup(document.querySelector('#device-search'));
// Use the complete form and event handlers in the setup example.
```

코드 참조

- 검증된 v3 문서에는 독립형 Search API가 없습니다.

- 아이콘만 있는 버튼에는 aria-label을 사용하고, 필터링은 애플리케이션에서 구현하세요.

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

### 구현 시작점

index.html로 저장한 뒤 문서화된 DDS 3.2.0 CDN에 네트워크로 연결된 상태에서 로컬 서버로 제공하세요. 실제 InputGroup 초기화와 로컬 필터링을 사용하며 Dell 백엔드는 사용하지 않습니다. 내부 npm 대안: npm install @dds/components --registry=https://artifacts.dell.com/artifactory/api/npm/dx-npm-prod/ . 삽입된 미리보기는 오프라인에서 HTML/CSS을 해석한 결과이며, 이 CDN 런타임이 아닙니다.

```
<!doctype html>
<html lang="en"><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" crossorigin href="https://dds.dell.com/components/3.2.0/css/dds-styles.css">
<title>Local device search</title>
<main style="padding:24px;max-width:720px;margin:auto">
<h1>Find a device</h1>
<form role="search" aria-label="Device inventory" id="search-form">
<label for="query">Search devices</label>
<p id="help">Enter a model or asset tag, then submit.</p>
<div class="dds__input-group" id="device-search">
<div class="dds__input-addon" aria-hidden="true">⌕</div>
<input id="query" class="dds__text-input" type="search" aria-describedby="help">
<div class="dds__input-addon"><button class="dds__button dds__button--ghost dds__button--xs" type="button" id="clear" hidden aria-label="Clear device search">Clear</button></div>
</div>
<button class="dds__button dds__button--ghost dds__button--md" type="submit">Search devices</button>
</form>
<p id="count" role="status"></p><ul id="results"></ul>
</main>
<script type="module">
import { InputGroup } from 'https://dds.dell.com/components/3.2.0/js/index.mjs';
InputGroup(document.querySelector('#device-search'));
const inventory=['Latitude 7450 · LT-104','Precision 5680 · PR-208','OptiPlex 7020 · OP-316'];
const input=document.querySelector('#query'), clear=document.querySelector('#clear');
function render(query='') {
 const matches=inventory.filter(x=>x.toLowerCase().includes(query.toLowerCase()));
 document.querySelector('#results').replaceChildren(...matches.map(text=>{const li=document.createElement('li');li.textContent=text;return li}));
 document.querySelector('#count').textContent=matches.length+' matching devices';
}
input.addEventListener('input',()=>{clear.hidden=!input.value.length});
document.querySelector('#search-form').addEventListener('submit',event=>{event.preventDefault();render(input.value.trim())});
clear.addEventListener('click',()=>{input.value='';clear.hidden=true;render();input.focus()});
render();
</script></html>
```

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

```
완전한 DDS 3.2.0 InputGroup 구성으로 범위가 지정된 기기 인벤토리 검색을 구현하세요. 수동 제출, 눈에 보이는 범위 레이블, 로컬 결과 안내, 지우기 동작을 유지하세요. DDS 시맨틱 토큰과 반응형 타이포그래피를 사용하고, Search API를 임의로 만들거나 기존 v2 가져오기로 대체하지 마세요.
```

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

독립적인 DDS v3 참조 자료입니다. 내부 패키지를 사용하려면 Dell 레지스트리에 접근해야 하며, 프로토타입 제작에는 공개 버전 지정 CDN이 문서화되어 있습니다. Dell의 제휴, 에셋 관리 연결 또는 공식 인증을 의미하지 않습니다.

- DDS 3.2.0 설치 내부 패키지 접근, 공개 프로토타입 CDN, 필수 스타일 번들.

- 검색 구현 검색은 InputGroup으로 구성하며, 독립형 Search API는 없습니다.

- 검색 디자인 수동 및 자동 검색 동작, 범위 레이블, 랜드마크.

- 간격 시맨틱 간격 단계 11개.

- 타이포그래피 기본 및 컴팩트 간격 단계.

- 입력 토큰 입력 필드에 사용되는 문서화된 시맨틱 색상.

- 토큰 구조 전역, 시맨틱, 컴포넌트 토큰의 경계.

- 그리드 밀도와 4픽셀 간격 체계.

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

### Duet 디자인 시스템

날짜 범위 워크플로를 통해 Duet의 LocalTapiola 색상 및 간격 스케일을 살펴보세요. ISO 날짜 값, 명시적인 범위 유효성 검사, 구성 요소 포커스 메서드, 별도의 오픈 소스 선택기 경계를 다룹니다.

### Elastic UI

검증된 Borealis 스케일, 기본 테이블과 검색 컨트롤, 심각도 필터링, 로컬 저장 이벤트, 완전한 React 소스를 갖춘 Elastic UI 로그 탐색기를 만드세요.

### Emplifi Soul

Soul의 데이터 테이블 동작 명세를 6픽셀 간격, 레이어형 색상 역할, 컴팩트한 Inter 글꼴과 함께 살펴보세요. 일괄 선택, 누락 데이터 표기, 요약 행을 비교한 다음 검증된 비공개 React 패키지 진입점을 확인하세요.


- [구현 레퍼런스](https://www.delldesignsystem.com/components/search)
- [출처](https://www.delldesignsystem.com/foundations/spacing)
- [출처](https://www.delldesignsystem.com/components/text-input/?tab=Design)
- [출처](https://www.delldesignsystem.com/foundations/typography/)
- [출처](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=components-search--docs&viewMode=docs)
- [출처](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=getting-started-installation--docs&viewMode=docs)
- [지원 사양 읽기](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=components-search--docs&viewMode=docs)
- [지원 사양 읽기](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=getting-started-installation--docs&viewMode=docs)
- [지원 사양 읽기](https://www.delldesignsystem.com/components/text-input/?tab=Design)
- [지원 사양 읽기](https://www.delldesignsystem.com/getting-started/tokens)
- [지원 사양 읽기](https://www.delldesignsystem.com/foundations/typography/)
- [지원 사양 읽기](https://www.delldesignsystem.com/foundations/spacing)
- [지원 사양 읽기](https://www.delldesignsystem.com/foundations/grid)
- [지원 사양 읽기](https://www.delldesignsystem.com/components/search)
- [코드 참조](https://www.delldesignsystem.com/components/search)
- [코드 참조](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=components-search--docs&viewMode=docs)
- [DDS 3.2.0 설치 내부 패키지 접근, 공개 프로토타입 CDN, 필수 스타일 번들.](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=getting-started-installation--docs&viewMode=docs)
- [검색 구현 검색은 InputGroup으로 구성하며, 독립형 Search API는 없습니다.](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=components-search--docs&viewMode=docs)
- [검색 디자인 수동 및 자동 검색 동작, 범위 레이블, 랜드마크.](https://www.delldesignsystem.com/components/search)
- [간격 시맨틱 간격 단계 11개.](https://www.delldesignsystem.com/foundations/spacing)
- [타이포그래피 기본 및 컴팩트 간격 단계.](https://www.delldesignsystem.com/foundations/typography/)
- [입력 토큰 입력 필드에 사용되는 문서화된 시맨틱 색상.](https://www.delldesignsystem.com/components/text-input/?tab=Design)
- [토큰 구조 전역, 시맨틱, 컴포넌트 토큰의 경계.](https://www.delldesignsystem.com/getting-started/tokens)
- [그리드 밀도와 4픽셀 간격 체계.](https://www.delldesignsystem.com/foundations/grid)