# Arco Design 디자인 시스템

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

보고서 섹션을 검색하고 선택한 뒤 포함하거나 제거하여, 별도의 로컬 개요를 준비하세요.

## Arco Design 디자인 시스템 디자인 레퍼런스

Arco React의 업스트림 소스입니다. Less 상수는 @로, 런타임 CSS 변수는 --로 표기합니다. 미리보기의 간격과 패널 레이아웃은 해당 척도를 바탕으로 한 독창적인 애플리케이션 설계입니다.

### 크기 및 간격

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| @size-mini | 24px | 컴팩트 컴포넌트 높이 별칭. |
| @size-small | 28px | 작은 컴포넌트 높이. |
| @size-default | 32px | 기본 컴포넌트 높이. |
| @size-large | 36px | 큰 컴포넌트 높이. |
| @spacing-1 … @spacing-6 | 2, 4, 6, 8, 10, 12px | 작은 간격 단위. |
| @spacing-7 … @spacing-10 | 16, 20, 24, 32px | 그룹화 간격 단위. |
| @border-radius-small | 2px | 작은 모서리 반경. |
| @border-radius-medium | 4px | 중간 모서리 반경. |
| @border-radius-large | 8px | 큰 모서리 반경. |
### 타이포그래피 및 움직임

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| @font-size-body | 14px | 전역 본문 글자 크기. |
| @line-height-base | 1.5715 | 14px에서 약 22px의 행 높이. |
| @font-family | Inter, system and CJK fallbacks | Inter라는 이름을 사용해도 글꼴이 다운로드되지는 않습니다. |
| @code-family | Consolas, Menlo | 코드에 적합한 글꼴 스택. |
| @transition-duration-1 / 2 / 3 | 0.1s / 0.2s / 0.3s | 처음 세 개의 지속 시간 상수. |
| @transition-timing-function-standard | cubic-bezier(.34,.69,.1,1) | 게시된 표준 곡선. |
### 팔레트 기준점

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| @arcoblue-6 | #165dff | Arco 블루 기준점. |
| @gray-1 | #f7f8fa | 밝은 중립색. |
| @gray-2 | #f2f3f5 | 보조 배경 중립색. |
| @gray-3 | #e5e6eb | 테두리 중립색. |
| @gray-8 | #4e5969 | 보조 텍스트 중립색. |
| @gray-10 | #1d2129 | 기본 텍스트 중립색. |
| @red-6 | #f53f3f | 빨간색 기준점. 작은 텍스트의 대비를 보장한다고 가정하지 마세요. |
| @green-6 | #00b42a | 초록색 기준점. |
### 런타임 변수 규칙

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --color-text-1 | Primary text role | 기본 변수 접두사에는 arco가 포함되지 않습니다. |
| --color-fill-2 | Secondary fill role | 테마를 따르는 영역에서는 하드코딩된 회색 대신 사용하세요. |
| --border-radius-medium | Medium corner role | 런타임에 내보내집니다. |
| body[arco-theme="dark"] | Dark theme selector | body 속성을 설정하거나 제거하세요. |
| --color-bg-2 | Container surface | 다크 모드에서는 다른 값으로 해석됩니다. |
### Transfer 상태 및 이벤트

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| dataSource | {key:string,value:string,disabled?:boolean}[] | 안정적인 키로 섹션을 식별합니다. |
| targetKeys | string[] | 대상 열에 포함되는 항목입니다. |
| selectedKeys | string[] | 대상에 포함된 항목이 아니라 체크박스 선택 상태입니다. |
| onChange | (newTargetKeys,direction,moveKeys) | 새 소속 배열을 반영합니다. |
| onSelectChange | (leftSelectedKeys,rightSelectedKeys) | 제어형 selectedKeys에는 두 배열을 함께 사용하세요. |
| filterOption | (inputValue,item) => boolean | 기본 동작은 대소문자를 구분하는 부분 문자열 일치입니다. |
| showSearch | Boolean or per-list configuration | 이 예시에서는 양쪽 열에서 검색할 수 있습니다. |
| oneWay | Boolean | 대상에서 항목을 제거하지 않으려는 경우에만 사용하세요. |
| simple | Boolean or retainSelectedItems options | 선택과 동시에 항목을 이동할 수 있으며, 명시적인 전송 동작과는 다릅니다. |
## Arco Design 디자인 시스템 전체 가이드

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

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

## Arco Design 디자인 시스템: Transfer는 단순한 체크박스 목록이 아니라 항목의 소속을 나타냅니다

### 보고서 섹션을 신중하게 선택하세요

> 보고서에 포함할 섹션과 사용 가능한 섹션, 두 집합을 비교해야 할 때 Arco Transfer가 유용합니다. 행을 체크하면 나중에 처리할 항목으로 표시되며, simple 모드를 사용하지 않는 한 섹션이 즉시 이동하지는 않습니다.

이 예시에서는 명시적인 두 단계 동작을 유지합니다. 사용자가 Acquisition channels를 선택하고 Include를 활성화한 다음 개요를 준비합니다. 이 개요는 별도의 스냅샷이므로 이후 편집기에서 변경해도 준비된 버전이 자동으로 바뀌지 않습니다.

지원 사양 읽기

## Arco Design 디자인 시스템: 크기 척도와 간격 척도를 각각 사용하세요

### 같은 숫자라도 서로 다른 치수를 나타낼 수 있습니다

Arco의 크기 상수는 4픽셀 단위로 증가하지만 간격 척도는 2, 4, 6, 8, 10, 12로 시작한 뒤 더 큰 폭으로 증가합니다. 기본 컴포넌트 크기의 별칭은 32px입니다. 크기나 간격의 접미사가 모두 같은 값을 뜻한다고 가정하면 컨트롤의 일관성이 깨집니다.

이 독창적인 구성에서는 두 Transfer 패널에 중간 모서리 반경을 적용하고 페이지 여백을 24px로 설정했습니다. 작은 체크박스와 행 구분선은 밀도 높은 선택 작업에 적합하며, 넓은 페이지 영역은 유용한 콘텐츠를 지나치게 큰 카드로 대체하지 않으면서 여백을 제공합니다.

지원 사양 읽기

## Arco Design 디자인 시스템: 애플리케이션 스타일링에서 의미 역할을 유지하세요

### CSS 변수에는 고유한 이름 규칙이 있습니다

기본 테마에서는 arco 접두사 없이 --color-text-1 및 --color-fill-2 같은 변수를 내보냅니다. 사용자 지정 빌드에서는 접두사가 달라질 수 있으므로 네임스페이스가 지정된 애플리케이션에 통합할 때 컴파일된 테마를 확인하세요. 기본 팔레트 변수는 RGB 채널이므로 완전한 16진수 색상처럼 취급하지 말고 rgb(var(--primary-6))를 사용해야 합니다.

미리보기에서는 검증된 Arco 블루 기준점을 주요 동작과 선택된 행에 사용합니다. 접근이 제한된 섹션은 오류로 오해할 수 있는 빨간색 대신 비활성화된 체크박스와 설명 텍스트로 표시합니다.

지원 사양 읽기

## Arco Design 디자인 시스템: 간결한 라벨과 긴 섹션 이름을 모두 지원하세요

### 실용적인 본문 글자 크기

기본 본문 글자 크기는 14px이며 줄 높이 배율은 1.5715입니다. 게시된 글꼴 패밀리는 Inter로 시작하며 시스템 글꼴 및 CJK 대체 글꼴을 포함합니다. 이는 CSS 글꼴 스택일 뿐, Inter 글꼴 파일이 로드되었다는 뜻은 아닙니다.

보고서 섹션 이름은 예시보다 길 수 있습니다. 오프라인 버전에서는 작은 뷰포트에서 행 텍스트를 줄바꿈하고 패널을 세로로 쌓아, 포함 및 제거 레이블을 읽기 쉽게 유지합니다. 텍스트를 알아볼 수 없을 정도로 전송 위젯 전체를 축소하지 않습니다.

지원 사양 읽기

## Arco Design 디자인 시스템: 두 개의 제어 배열로 모호한 동작 방지

### 멤버십과 선택은 서로 다른 의미입니다

targetKeys는 보고서에 포함된 항목을 나타냅니다. selectedKeys는 두 목록에서 현재 선택된 체크박스를 나타냅니다. onSelectChange는 왼쪽과 오른쪽 배열을 전달하므로, selectedKeys를 제어할 때 두 배열을 합칩니다. onChange는 새 멤버십, 방향, 이동한 키를 전달합니다.

1. 표시 레이블이 변경되더라도 각 원본 항목의 키는 안정적으로 유지하세요.

2. onSelectChange에서 왼쪽 및 오른쪽 선택 배열을 합칩니다.

3. onChange에서 전달된 새 배열로 targetKeys를 바꿉니다.

4. 이동한 후 임시 선택 상태를 지우고 해당 동작의 로컬 효과를 알립니다.

지원 사양 읽기

## Arco Design 디자인 시스템: 검색은 멤버십을 삭제하지 않고 보기 범위를 좁혀야 합니다

### 일치 규칙을 명확하게 지정하세요

기본 필터는 대소문자를 구분하는 부분 문자열 검사로 쿼리와 항목 값을 비교합니다. 제공된 예시는 이를 소문자 기준 일치로 바꿉니다. 숨겨진 선택 행을 검색해도 해당 행이 보고서 멤버십에서 사라졌다는 뜻은 아닙니다.

이 작은 목록에는 페이지네이션과 가상화가 큰 이점을 주지 않습니다. Arco는 더 많은 데이터를 위한 옵션을 제공하지만, 안정적인 키, 전체 target 집합, 필터링된 보기에서 항목을 선택하는 규칙은 여전히 애플리케이션이 관리해야 합니다.

- 사용 가능 목록과 포함 목록에는 각각 별도의 검색 필드가 있습니다.

- 검색 결과가 없다는 메시지는 필터링된 보기를 설명할 뿐, 데이터 집합이 비어 있음을 뜻하지 않습니다.

- 개요를 준비할 때는 현재 보이는 행뿐 아니라 targetKeys를 사용합니다.

지원 사양 읽기

## Arco Design 디자인 시스템: 다크 모드는 텍스트뿐 아니라 배경 표면도 바꿉니다

### 공개된 선택자를 설정하세요

Arco는 arco-theme="dark"가 설정된 테마 태그 아래에 다크 모드 오버라이드를 제공합니다. 기본 빌드에서는 이 태그가 body입니다. 해당 속성을 제거하면 일반 규칙이 복원되며, dark라는 무관한 클래스를 추가하는 것은 같은 효과가 아닙니다 API.

다크 모드 미리보기를 추가할 때는 컨테이너와 텍스트 역할을 함께 조정하세요. 오프라인 예시는 의도적으로 밝은 테마를 유지하고, 네이티브 예시는 이미 가져온 테마 CSS를 사용할 수 있습니다. 보고서 미리보기 이미지나 일러스트에 일괄 필터를 적용해 반전하지 마세요.

```
document.body.setAttribute('arco-theme', 'dark');
// Restore default:
document.body.removeAttribute('arco-theme');
```

코드 참조

지원 사양 읽기

## Arco Design 디자인 시스템: 패키지, 스타일시트, 실제 적용 범위

### 보고서 개요는 보고서 데이터를 내보내지 않습니다

React 패키지는 @arco-design/web-react이며 전체 CSS 진입점은 dist/css/arco.css입니다. 예시는 패키지 루트에서 Transfer와 Button을 가져오고 제어 상태를 사용합니다. 보고서 빌더 API를 임의로 만들어내지 않습니다.

독립 실행형 미리보기는 네이티브 체크박스와 버튼으로 선택 동작을 구현하므로 오프라인에서 작동합니다. 상호작용 로직과 반응형 구성을 검증하지만, 네이티브 패키지가 소비자 프로젝트에서 빌드되었음을 입증하지는 않습니다. 프로덕션용 내보내기 기능에는 비활성화된 예시 행을 넘어서는 백엔드와 권한 검사가 필요합니다.

지원 사양 읽기

## Arco Design 디자인 시스템 구성 요소 예시

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

전체 문서를 index.html로 저장한 뒤 브라우저에서 여세요. Arco Transfer 동작과 검증된 테마 기준점을 독립적으로 구현한 HTML 예시입니다. 기본 React 예시는 별도로 제공됩니다.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Arco report section transfer</title><style>
*{box-sizing:border-box}body{margin:0;color:#1d2129;background:#f7f8fa;font:14px/22px Arial,sans-serif}header{padding:20px 28px;background:white;border-bottom:1px solid #e5e6eb;display:flex;justify-content:space-between}.logo{font-size:18px;font-weight:bold;letter-spacing:-.02em}.logo i{font-style:normal;color:#165dff;margin-right:8px}header small{color:#4e5969}main{max-width:1050px;padding:28px;margin:auto}h1{font-size:24px;line-height:32px;margin:0 0 8px}.lead{color:#4e5969;margin:0 0 24px}.transfer{display:grid;grid-template-columns:minmax(0,1fr) 106px minmax(0,1fr);align-items:stretch}.list{border:1px solid #e5e6eb;background:white;border-radius:4px;min-width:0}.head{padding:16px;background:#f2f3f5;display:flex;gap:8px;justify-content:space-between}.head h2{font-size:14px;margin:0}.count{font-size:12px;color:#4e5969}.search{padding:12px;border-bottom:1px solid #e5e6eb}.search label{font-size:12px;display:block;margin-bottom:4px;color:#4e5969}.search input{height:32px;width:100%;border:1px solid transparent;background:#f2f3f5;padding:4px 12px;font:inherit;border-radius:2px}input:focus,button:focus-visible{outline:2px solid #165dff;outline-offset:2px}.items{min-height:290px;padding:8px}.item{display:flex;gap:10px;padding:12px 8px;border-radius:2px;align-items:start;cursor:pointer}.item:has(input:checked){background:#e8f3ff}.item input{width:16px;height:16px;accent-color:#165dff;margin-top:3px;flex-shrink:0}.item small{display:block;color:#4e5969;font-size:12px}.item:has(input:disabled){color:#86909c;cursor:not-allowed}.ops{padding:16px 12px;display:flex;flex-direction:column;gap:12px;justify-content:center}button{font:14px/22px Arial;border:1px solid #e5e6eb;background:white;color:#1d2129;border-radius:2px;padding:5px 12px;cursor:pointer}.ops button{padding:5px 4px}.primary{background:#165dff;border-color:#165dff;color:#fff}button:disabled{background:#f2f3f5;color:#86909c;border-color:#e5e6eb;cursor:not-allowed}.footer{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0}.footer p{font-size:12px;color:#4e5969;margin:0}.outline{background:white;border:1px solid #e5e6eb;border-radius:4px;padding:24px}.outline h2{font-size:16px;margin:0 0 12px}.outline ol{margin:0;padding-left:20px}.note{color:#4e5969;font-size:12px;margin-top:20px}.empty{padding:20px 8px;color:#4e5969}.selection{font-size:12px;color:#4e5969;padding:10px 16px;border-top:1px solid #e5e6eb}@media(max-width:650px){main{padding:24px 16px}.transfer{grid-template-columns:1fr}.ops{flex-direction:row;padding:12px}.ops button{padding:6px 16px}.items{min-height:160px}.footer{align-items:start;flex-direction:column}header{padding:16px}}
</style><header><span class="logo"><i>A /</i> Analytics workspace</span><small>Report studio</small></header><main><h1>Choose report sections</h1><p class="lead">Build an outline from the sections available to this workspace.</p><div class="transfer"><section class="list"><div class="head"><h2>Available sections</h2><span id="left-count" class="count"></span></div><div class="search"><label for="left-search">Find available section</label><input id="left-search" type="search" placeholder="Search by section name"></div><div class="items" id="left"></div><div class="selection" id="left-selected"></div></section><div class="ops"><button class="primary" id="include" disabled>Include →</button><button id="remove" disabled>← Remove</button></div><section class="list"><div class="head"><h2>Included in report</h2><span id="right-count" class="count"></span></div><div class="search"><label for="right-search">Find included section</label><input id="right-search" type="search" placeholder="Search included sections"></div><div class="items" id="right"></div><div class="selection" id="right-selected"></div></section></div><div class="footer"><p id="status" role="status">Select a section, then choose Include or Remove.</p><button id="prepare" class="primary">Prepare outline</button></div><section class="outline"><h2>Prepared outline</h2><div id="snapshot">No outline prepared yet.</div></section><p class="note">HTML interpretation of Arco Transfer · Original sample sections · Local outline only, no analytics data exported</p></main><script>
const data=[{key:'overview',value:'Executive overview',detail:'A concise summary of the reporting period'},{key:'traffic',value:'Acquisition channels',detail:'How people arrive at your product'},{key:'retention',value:'Retention cohorts',detail:'Returning usage by cohort'},{key:'revenue',value:'Revenue breakdown',detail:'Revenue categories and trends'},{key:'raw',value:'Raw event export',detail:'Restricted · unavailable in this specimen',disabled:true}];const $=id=>document.getElementById(id);let target=new Set(['overview']),selected=new Set();
function render(){for(const side of ['left','right']){const items=data.filter(x=>target.has(x.key)===(side==='right')),query=$(side+'-search').value.toLowerCase(),host=$(side);host.replaceChildren();$(side+'-count').textContent=items.length+' sections';const visible=items.filter(x=>x.value.toLowerCase().includes(query));if(!visible.length){const p=document.createElement('p');p.className='empty';p.textContent=query?'No matching sections.':'No sections in this column.';host.append(p)}for(const item of visible){const label=document.createElement('label');label.className='item';const input=document.createElement('input');input.type='checkbox';input.id='check-'+item.key;input.checked=selected.has(item.key);input.disabled=!!item.disabled;input.setAttribute('aria-label',item.value);input.onchange=()=>{input.checked?selected.add(item.key):selected.delete(item.key);render();$('check-'+item.key)?.focus()};const text=document.createElement('span'),small=document.createElement('small');text.textContent=item.value;small.textContent=item.detail;text.append(small);label.append(input,text);host.append(label)}$(side+'-selected').textContent=items.filter(x=>selected.has(x.key)).length+' selected'}$('include').disabled=!data.some(x=>selected.has(x.key)&&!target.has(x.key)&&!x.disabled);$('remove').disabled=!data.some(x=>selected.has(x.key)&&target.has(x.key)&&!x.disabled);$('prepare').disabled=!target.size}
function move(toTarget){const moved=data.filter(x=>selected.has(x.key)&&target.has(x.key)!==toTarget&&!x.disabled);for(const item of moved)toTarget?target.add(item.key):target.delete(item.key);selected.clear();render();$('status').textContent=moved.length+' section(s) '+(toTarget?'included in':'removed from')+' the local draft.';$(toTarget?'right-search':'left-search').focus()}
$('include').onclick=()=>move(true);$('remove').onclick=()=>move(false);for(const side of ['left','right'])$(side+'-search').oninput=render;$('prepare').onclick=()=>{const ol=document.createElement('ol');for(const item of data.filter(x=>target.has(x.key))){const li=document.createElement('li');li.textContent=item.value;ol.append(li)}$('snapshot').replaceChildren(ol);$('status').textContent='Local report outline prepared. No data exported.'};render();
</script></html>
```

코드 참조

- 권한이 제한된 보고서 섹션은 이동할 수 없습니다. 선택된 행과 포함된 섹션은 별도의 상태이며, 이는 네이티브 Transfer에서 설명한 구분과 같습니다.

### 제어형 보고서 섹션 전송

Transfer는 원본 및 대상의 멤버십을 관리하고, 애플리케이션 상태는 별도로 준비된 개요를 저장합니다. 권한이 제한된 행은 비활성 옵션을 보여줄 뿐, 서버의 권한 검사를 대신하지 않습니다.

```
// npm install @arco-design/web-react react react-dom
import React,{useState} from 'react';
import {createRoot} from 'react-dom/client';
import {Transfer,Button} from '@arco-design/web-react';
import '@arco-design/web-react/dist/css/arco.css';
const data = [
 {key:'overview',value:'Executive overview'},
 {key:'traffic',value:'Acquisition channels'},
 {key:'retention',value:'Retention cohorts'},
 {key:'revenue',value:'Revenue breakdown'},
 {key:'raw',value:'Raw event export (restricted)',disabled:true}
];
function ReportBuilder(){
 const [target,setTarget]=useState(['overview']);
 const [selected,setSelected]=useState([]);
 const [snapshot,setSnapshot]=useState([]);
 const [status,setStatus]=useState('Choose sections for a local report.');
 return <main style={{padding:24,maxWidth:960,margin:'auto'}}>
  <h1>Report sections</h1>
  <Transfer dataSource={data} targetKeys={target} selectedKeys={selected}
   titleTexts={['Available sections','Included in report']}
   operationTexts={['Include','Remove']}
   showSearch searchPlaceholder={['Find available section','Find included section']}
   filterOption={(query,item)=>item.value.toLowerCase().includes(query.toLowerCase())}
   onSelectChange={(left,right)=>setSelected([...left,...right])}
   onChange={(keys,direction,moved)=>{
    setTarget(keys);setSelected([]);
    setStatus(`${moved.length} section(s) moved to ${direction}. Draft only.`);
   }} />
  <p role="status">{status}</p>
  <Button type="primary" disabled={!target.length} onClick={()=>{
   setSnapshot([...target]);setStatus('Local report outline prepared. No data exported.');
  }}>Prepare outline</Button>
  <h2>Prepared outline</h2>
  {snapshot.length ? <ol>{snapshot.map(key=><li key={key}>{data.find(item=>item.key===key).value}</li>)}</ol> : <p>No outline prepared yet.</p>}
 </main>;
}
createRoot(document.getElementById('root')).render(<ReportBuilder />);
```

코드 참조

- 체크박스 선택과 보고서 포함 여부는 서로 다른 배열입니다.

- 사용자 지정 필터는 대소문자를 구분하지 않고 일치 항목을 찾습니다.

- 예시 데이터는 자체 제작한 것이며, 분석 데이터는 불러오거나 내보내지 않습니다. 네이티브 빌드는 별도의 통합 검사로 진행합니다.

## Arco Design 디자인 시스템: AI 에이전트 설정

### 구현 시작점

arco.css 전체 스타일시트를 한 번 가져오고 React 예시를 루트 요소에 마운트하세요. 이 React 패키지를 Arco Vue 가져오기와 함께 사용하지 마세요.

```
npm install @arco-design/web-react react react-dom
```

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

```
안정적인 dataSource 키와 별도로 제어되는 targetKeys 및 selectedKeys를 사용해 Arco React Transfer를 구성하세요. 대소문자를 구분하지 않는 필터, 명시적인 포함/제거 동작, 준비된 개요 스냅샷을 제공하세요. Arco CSS 변수 구문을 유지하고 오프라인 구현임을 정확히 설명하세요.
```

## Arco Design 디자인 시스템: 출처 및 범위

독립적인 OpenDesign 참고 자료입니다. 보고서 데이터는 자체 제작했으며 미리보기는 로컬에서만 작동합니다. 비활성 행은 권한 검사를 대신하지 않습니다.

- React 패키지 설치 및 스타일시트 진입점.

- 전역 토큰 크기, 간격, 시맨틱 매핑.

- 기본 테마 타이포그래피와 모션.

- 색상 팔레트 검증된 색상 기준값.

- CSS 변수 런타임 이름 및 다크 모드 선택자.

- Transfer API 제어 상태 및 콜백 시그니처.

## Arco Design 디자인 시스템: 관련 자료

### Atlassian 디자인 시스템

Atlassian 시맨틱 토큰과 8픽셀 간격 척도, 실제 Button, Lozenge, Toggle API, 필수 Compiled 스타일링 설정을 사용해 이슈 계획 보드를 만드세요. 이슈를 살펴보고 보드를 필터링한 뒤, 선택 상태와 상태를 혼동하지 않으면서 로컬 작업 항목을 이동하세요.

### AWS Cloudscape

실제 시각적 새로 고침 토큰, 밀도에 따른 간격, 제어형 폼 API, 작동하는 2단계 리소스 마법사를 다루는 Cloudscape 구성 가이드입니다.

### Backbase 디자인 시스템

Backbase의 Angular 모듈과 시맨틱 테마 내보내기, 명시적인 검토 상태를 활용해 브랜드에 맞는 뱅킹 검토 흐름을 구축하세요. 웹 API와 별도로 문서화된 네이티브 크기를 비교하세요.


- [구현 레퍼런스](https://raw.githubusercontent.com/arco-design/arco-design/main/components/Transfer/interface.tsx)
- [출처](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/global.less)
- [출처](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/default.less)
- [출처](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/color/colors.less)
- [출처](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/css-variables.less)
- [출처](https://raw.githubusercontent.com/arco-design/arco-design/main/components/Transfer/interface.tsx)
- [지원 사양 읽기](https://raw.githubusercontent.com/arco-design/arco-design/main/components/Transfer/interface.tsx)
- [지원 사양 읽기](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/global.less)
- [지원 사양 읽기](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/css-variables.less)
- [지원 사양 읽기](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/default.less)
- [코드 참조](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/css-variables.less)
- [지원 사양 읽기](https://raw.githubusercontent.com/arco-design/arco-design/main/README.md)
- [코드 참조](https://raw.githubusercontent.com/arco-design/arco-design/main/components/Transfer/interface.tsx)
- [React 패키지 설치 및 스타일시트 진입점.](https://raw.githubusercontent.com/arco-design/arco-design/main/README.md)
- [전역 토큰 크기, 간격, 시맨틱 매핑.](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/global.less)
- [기본 테마 타이포그래피와 모션.](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/default.less)
- [색상 팔레트 검증된 색상 기준값.](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/color/colors.less)
- [CSS 변수 런타임 이름 및 다크 모드 선택자.](https://raw.githubusercontent.com/arco-design/arco-design/main/components/style/theme/css-variables.less)
- [Transfer API 제어 상태 및 콜백 시그니처.](https://raw.githubusercontent.com/arco-design/arco-design/main/components/Transfer/interface.tsx)