# Element Plus 디자인 시스템

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

두 개의 기본 Transfer 목록에서 모듈을 필터링하고 이동한 다음, 선택된 키를 확인하고 로컬에서 선택 항목을 적용합니다.

## Element Plus 디자인 시스템 디자인 레퍼런스

Element Plus 2.14.7 기본 컴파일 CSS. 변수는 시맨틱 별칭을 포함해 패키지에서 검증된 값입니다. 전송 목록 레이아웃은 디자인 시스템의 기반과 분리된 기존 반응형 구성 규칙을 사용합니다.

### 기본 및 상태 색상

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --el-color-primary | #409eff | 기본 강조 색상입니다. |
| --el-color-primary-light-3 | #79bbff | 더 밝은 상호작용에 사용하는 기본 색조입니다. |
| --el-color-primary-light-5 | #a0cfff | 중간 색조입니다. |
| --el-color-primary-light-7 | #c6e2ff | 밝은 색조입니다. |
| --el-color-primary-light-9 | #ecf5ff | 절제된 선택 항목/키 패널 배경입니다. |
| --el-color-primary-dark-2 | #337ecc | 더 어두운 기본 상태입니다. |
| --el-color-success | #67c23a | 성공 역할. |
| --el-color-warning | #e6a23c | 경고 역할입니다. |
| --el-color-danger | #f56c6c | 오류/위험 역할입니다. |
| --el-color-info | #909399 | 정보 표시용 중립 역할입니다. |
### 시맨틱 텍스트 및 배경

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --el-text-color-primary | #303133 | 본문의 기본 텍스트입니다. |
| --el-text-color-regular | #606266 | 일반 컴포넌트 텍스트입니다. |
| --el-text-color-secondary | #909399 | 도움말 및 메타데이터입니다. |
| --el-text-color-placeholder | #a8abb2 | 자리표시자 역할입니다. |
| --el-bg-color | #fff | 기본 배경입니다. |
| --el-bg-color-page | #f2f3f5 | 페이지 배경. |
| --el-bg-color-overlay | #fff | 오버레이 배경입니다. |
| --el-border-color | #dcdfe6 | 기본 경계선. |
| --el-border-color-light | #e4e7ed | 카드/요약 영역의 은은한 경계선입니다. |
### 타이포그래피, 컨트롤 및 모양

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --el-font-family | "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif | 기본 글꼴 우선순위입니다. |
| --el-font-size-extra-large | 20px | 20px 제목 크기입니다. |
| --el-font-size-large | 18px | 18px 크기입니다. |
| --el-font-size-medium | 16px | 16px 크기입니다. |
| --el-font-size-base | 14px | 기본 14px입니다. |
| --el-font-size-small | 13px | 13px 크기입니다. |
| --el-font-size-extra-small | 12px | 12px 크기입니다. |
| --el-border-radius-base | 4px | 표준 컴포넌트 모서리입니다. |
| --el-border-radius-small | 2px | 작은 모서리입니다. |
| --el-component-size-large | 40px | 큰 컨트롤 높이입니다. |
| --el-component-size | 32px | 기본 컨트롤 높이입니다. |
| --el-component-size-small | 24px | 작은 컨트롤 높이입니다. |
### 기존 모듈 작업 공간 레이아웃

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| Desktop panel arrangement | two panels with 180px reserved between | 기본 Transfer를 바탕으로 한 기존 구성입니다. |
| Narrow layout | ≤700px: stacked panels | Element Plus 토큰이 아닌 기존 중단점입니다. |
| Page spacing | 32px desktop; 20px 16px mobile | 기존 바깥쪽 여백입니다. |
| Summary spacing | 24px padding / 24px gap | 기존 선택 키 및 모듈 요약 구성입니다. |
## Element Plus 디자인 시스템 전체 가이드

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

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

## Element Plus 디자인 시스템: 전송 목록에는 두 가지 선택 상태가 있습니다

### 전송 목록의 두 가지 선택 방식

> Element Plus Transfer는 체크한 항목을 이동하는 컨트롤과 함께 사용 가능한 목록과 대상 목록을 표시합니다. 모듈 작업 공간은 실제 2.14.7 Vue 컴포넌트를 사용합니다. v-model에는 대상 키가 저장되며, 처음에는 catalog와 tokens가 들어 있습니다. 목록 안의 체크박스는 다음 전송 작업을 위해 항목을 표시합니다. 체크했다고 해서 해당 항목이 이미 대상에 포함된 것은 아닙니다.

실시간 모델 표시 영역에서 이 차이를 확인할 수 있습니다. 원본 목록의 항목을 체크하면 추가할 준비가 됩니다. 추가를 누르면 대상 키 배열이 변경되고, 선택한 모듈 요약이 업데이트되며, 이전에 적용한 결과가 초기화됩니다. 따라서 두 개의 정적인 목록만 보고 추측하는 대신 라이브러리의 모델 계약을 확인할 수 있습니다.

지원 사양 읽기

## Element Plus 디자인 시스템의 기본 역할 및 컴포넌트의 실제 크기

### 기본 역할과 구체적인 컴포넌트 크기

Element Plus는 --el-color-primary와 그 밝고 어두운 파생 색상, 상태 역할, 텍스트 색상 및 배경 변수를 제공합니다. 표에는 설치된 패키지에서 컴파일된 실제 값이 표시됩니다. 주변의 키 패널은 primary-light-9와 일반 텍스트를 사용하고, 작업 버튼은 기본 스타일을 사용합니다.

기본 타이포그래피에는 14px 기본 크기와 함께 12, 13, 16, 18, 20px 크기가 포함됩니다. 컴포넌트 크기 변수는 소형/기본/대형 컨트롤의 크기를 나타냅니다. 이를 페이지 레이아웃의 간격 체계와 혼동하지 마세요. 작업 공간의 24px 간격과 32px 바깥 여백은 별도로 지정한 기존 구성 방식입니다.

지원 사양 읽기

## Element Plus 디자인 시스템의 안정적인 키, 레이블 및 비활성화 옵션

### 안정적인 키, 레이블, 비활성화된 옵션

각 옵션에는 키, 레이블, 비활성화 여부가 있습니다. 선택 배열에는 키가 저장되므로 레이블을 변경해도 항목의 정체성은 유지됩니다. 샘플 모듈로는 자산 카탈로그, 토큰 검사기, 검토 대기열, 버전 기록, 프로젝트 간 검색이 있습니다. 감사 로그 내보내기는 표시되지만 선택할 수 없는 옵션을 보여주기 위해 비활성화되어 있습니다.

이 예시의 사용 가능 여부는 정적인 데모 데이터입니다. 권한 확인이나 이러한 모듈이 설치 가능한 제품으로 존재한다는 보장이 아닙니다. 실제 애플리케이션에서는 제품 모델에 따라 옵션의 데이터 원본과 권한 규칙을 정해야 합니다. Transfer 체크박스를 클릭할 수 있다는 사실만으로 권한이 있다고 판단하지 마세요.

지원 사양 읽기

## Element Plus 디자인 시스템에서 검색은 표시 여부만 바꾸며 구성 항목은 바꾸지 않습니다

### 검색은 표시 여부만 바꾸며 구성원은 바꾸지 않습니다

filterable은 각 패널에 독립적인 검색 기능을 추가합니다. 검색 안내 문구는 ‘모듈 찾기’라는 구체적인 동작을 제시합니다. 기본 필터링은 옵션 레이블을 기준으로 검색합니다. 검색 중 선택한 항목이 대상 목록에 표시되지 않더라도 선택 키 배열에서는 제거되지 않습니다. 요약과 표시 영역에서 전체 대상 목록을 계속 확인할 수 있습니다.

사용자 지정 왼쪽 빈 상태 슬롯과 오른쪽 빈 상태 슬롯은 검색 결과가 없는 패널과 아무 항목도 선택되지 않은 전체 상태를 구분합니다. 또한 대상 배열이 비어 있으면 페이지 수준에서 적용 버튼을 비활성화합니다. 검색 결과 없음과 선택된 모듈 없음은 서로 다른 상태입니다.

1. 사용 가능한 항목 패널에서 ‘검토 대기열’을 검색합니다.

2. 검색 결과로 나온 항목을 체크하고 ‘추가’를 누릅니다.

3. 검색어를 지우고 검토 대기열이 모델 표시 영역과 대상 목록에 나타나는지 확인합니다.

지원 사양 읽기

## Element Plus 디자인 시스템의 두 목록 관계를 모바일에서도 유지합니다

### 두 목록의 관계를 모바일에서도 유지합니다

데스크톱에서는 기본 Transfer 패널을 나란히 배치하고, 추가 및 제거 버튼을 위한 전용 영역을 둡니다. 화면 너비가 700px 이하인 경우 패널을 세로로 쌓고 작업 버튼은 그 사이에 가로로 배치합니다. 제목은 각각 ‘사용 가능한 모듈’과 ‘작업 공간 모듈’로 유지해 이동 방향을 명확히 합니다.

전체 컨트롤을 축소해 휴대폰 화면에 억지로 맞추지 않습니다. 레이블, 체크박스, 검색창, 목록 내용을 읽기 좋은 기본 크기로 유지하면서 구성을 조정합니다. 선택 키 표시 영역과 텍스트 요약은 아래에서 한 열로 배치해, 작은 화면에서도 정보를 숨기지 않고 그대로 제공합니다.

지원 사양 읽기

## Element Plus 디자인 시스템의 초안 구성 및 적용된 스냅샷

### 초안 구성원과 적용된 스냅샷

‘적용’을 누르면 선택 키 배열을 로컬에서 복사합니다. 이후 전송 항목이 변경되면 적용 상태가 초기화되므로, 사용자가 초안 구성을 바꾼 뒤에도 성공 알림이 계속 표시되지 않습니다. ‘초기 구성 복원’을 누르면 catalog/tokens 배열을 새로 할당하고 적용 결과도 초기화합니다. 이러한 상태 전환은 Vue 소스의 몇 줄로 명확하게 구현되어 있습니다.

알림은 로컬 미리보기 선택 항목이 적용되었다는 사실만 알립니다. 설치 완료, 권한 변경 또는 외부 업데이트를 의미하지 않습니다. 실제 설정 화면에서는 적용된 스냅샷이 저장 결과 확인을 반영해야 합니다. 컴포넌트 이벤트만으로 서버의 확인 응답을 대신할 수는 없습니다.

지원 사양 읽기

## Element Plus 디자인 시스템의 네이티브 컨트롤과 이해하기 쉬운 안내

### 네이티브 컨트롤과 이해하기 쉬운 안내

이 예제는 네이티브 Transfer 체크박스와 이동 버튼을 그대로 사용합니다. 방향 아이콘만 표시하는 대신 버튼에 제거 및 추가라는 텍스트를 넣었습니다. 목록이 세로로 쌓일 때 특히 유용합니다. 패널 제목은 원본과 대상의 역할을 설명하고, 안내 문구는 선택한 다음 이동하는 순서를 설명합니다.

비활성화된 옵션도 목록에 표시되며, 옵션이 일치하지 않을 때는 빈 패널 슬롯으로 결과가 없음을 알립니다. 키보드 사용자는 별도의 포인터 전용 핸들러 없이 검색 필드, 체크박스, 버튼에 접근할 수 있어야 합니다. 컴포넌트가 자체 동작을 관리하므로, 애플리케이션에서 선택 컨트롤처럼 보이기만 하는 행을 그려 기존 구조를 대체하지 않습니다.

- 패널 제목으로 대상 목록을 구분합니다.

- 텍스트 레이블로 세로 배치에서도 이동 방향을 명확히 표시합니다.

- 라이브 모델 판독 영역에서 숨겨진 선택 항목을 확인할 수 있습니다.

지원 사양 읽기

## Element Plus 디자인 시스템: Vue 컴포넌트 컴파일 및 CSS 로드

### Vue 컴포넌트를 빌드하고 CSS을(를) 불러오기

Vue 3 Vite 프로젝트에서 element-plus@2.14.7을 설치하고, 기존 레이아웃 CSS보다 먼저 element-plus/dist/index.css를 가져옵니다. 전체 App.vue는 script setup을 사용하고 컴포넌트를 직접 가져옵니다. ElConfigProvider에 영어 로캘을 전달해 기본 패널 및 빈 상태 문구가 영어 참조 페이지와 일관되게 표시되도록 합니다.

제공된 프로덕션 스타일 설정에서는 Vue Vite 플러그인을 통해 App.vue를 가져옵니다. 오프라인 예제는 동일한 단일 파일 컴포넌트를 컴파일한 뒤 로컬에서 번들링해 만들었습니다. 외부 CDN, 자동 가져오기 서비스 또는 런타임 템플릿 컴파일러가 필요하지 않습니다. 기존 프로젝트에서 자동 가져오기 플러그인을 사용하는 경우, 선택한 전체 또는 컴포넌트별 가져오기 방식에 맞춰 생성된 스타일을 일관되게 유지하세요.

지원 사양 읽기

## Element Plus 디자인 시스템: 테마 재정의 시 컴포넌트 간 관계 유지

### 테마 재정의 시 컴포넌트 간 관계를 유지해야 합니다

CSS 사용자 지정 속성을 사용하면 모든 컴포넌트 선택자를 다시 작성하지 않고도 공통 역할을 변경할 수 있습니다. 작업 화면은 배경, 텍스트, 테두리, 모서리에 실제 --el 변수를 사용합니다. 이 구성에 맞게 네이티브 Transfer를 배치하는 데 필요한 레이아웃 선택자만 변경합니다.

더 폭넓은 브랜드 테마를 적용하려면 문서화된 Sass 또는 CSS 변수 방식을 사용하고, 호버·비활성화·포커스 상태를 함께 살펴보세요. 한 스크린샷에서 기본 색상 헥스 값만 바꾸면 더 밝은 표면과 더 어두운 상호작용 상태를 놓치게 됩니다. 소스에 근거한 표에서 시작 값을 확인하고, 완전히 작동하는 네이티브 미리 보기에서 실제 컴포넌트에 적용했을 때의 결과를 살펴볼 수 있습니다.

지원 사양 읽기

## Element Plus 디자인 시스템 컴포넌트 예제

### 완전한 Vue 모듈 선택 컴포넌트

네이티브 Transfer, Card, Alert, Button, Tag를 사용하는 단일 파일 컴포넌트입니다.

```
<script setup>
import {ref,computed} from 'vue';
import {ElConfigProvider,ElTransfer,ElCard,ElButton,ElTag,ElAlert} from 'element-plus';
import en from 'element-plus/es/locale/lang/en';
const modules=[{key:'catalog',label:'Asset catalog',disabled:false},{key:'tokens',label:'Token inspector',disabled:false},{key:'review',label:'Review queue',disabled:false},{key:'history',label:'Version history',disabled:false},{key:'audit',label:'Audit export · unavailable',disabled:true},{key:'search',label:'Cross-project search',disabled:false}];
const selected=ref(['catalog','tokens']),applied=ref(null);const names=computed(()=>modules.filter(x=>selected.value.includes(x.key)).map(x=>x.label));
const changed=()=>{applied.value=null};
</script>
<template><ElConfigProvider :locale="en"><main class="module-desk"><header><p class="eyebrow">ELEMENT PLUS / WORKSPACE COMPOSITION</p><h1>Choose the tools this team needs.</h1><p>Move modules between lists, then inspect the exact selected keys.</p></header><ElCard shadow="never"><template #header><div class="card-heading"><h2>Module selection</h2><ElTag type="info">{{selected.length}} selected</ElTag></div></template><ElTransfer v-model="selected" :data="modules" filterable filter-placeholder="Find a module" :titles="['Available modules','Workspace modules']" :button-texts="['Remove','Add']" @change="changed"><template #left-empty><p class="empty">No available module matches.</p></template><template #right-empty><p class="empty">No selected module matches.</p></template></ElTransfer><p class="help">Check a module before using Add or Remove. Audit export stays disabled in this sample.</p></ElCard><div class="summary-grid"><section class="summary"><h2>Workspace modules</h2><ul v-if="names.length"><li v-for="name in names" :key="name">{{name}}</li></ul><p v-else>No modules selected. Add at least one before applying.</p><div class="actions"><ElButton type="primary" :disabled="!selected.length" @click="applied=[...selected]">Apply locally</ElButton><ElButton @click="selected=['catalog','tokens'];changed()">Restore starting set</ElButton></div><ElAlert v-if="applied" title="Selection applied to the local preview" type="success" :closable="false" show-icon description="No installation, entitlement change or external update was performed." /></section><section class="key-panel"><p class="eyebrow">V-MODEL VALUE</p><pre>{{JSON.stringify(selected,null,2)}}</pre><p>The model contains keys, not option objects. Search filters visibility without changing this array.</p></section></div><footer>Native Element Plus Transfer, Card, Tag, Button and Alert. Local module names and availability are original examples.</footer></main></ElConfigProvider></template>
```

코드 참조

- v-model에는 옵션 객체 전체가 아니라 선택한 키가 저장됩니다.

- 비활성화된 옵션은 표시되지만 이동할 수 없습니다.

- 전송 선택을 변경하면 이전 적용 상태가 지워집니다.

### 반응형 Transfer 구성

스타일은 네이티브 패널과 컨트롤을 유지하면서 좁은 화면에서 세로로 배치합니다.

```
body{margin:0;background:var(--el-bg-color-page);font-family:var(--el-font-family);color:var(--el-text-color-primary);font-size:var(--el-font-size-base);line-height:1.6}.module-desk{max-width:1080px;margin:auto;padding:32px}header{max-width:700px;margin-bottom:28px}h1{font-size:34px;line-height:1.2;letter-spacing:-.03em;margin:10px 0 16px}h2{font-size:20px;line-height:1.3;margin:0}.eyebrow{font-size:11px;letter-spacing:.12em;font-weight:700;color:var(--el-text-color-secondary)}.card-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.el-transfer{--el-transfer-panel-body-height:210px;display:flex;align-items:center;justify-content:center}.el-transfer-panel{width:calc((100% - 180px)/2)}.el-transfer__buttons{padding:0 20px;display:flex;flex-direction:column;gap:10px}.el-transfer__buttons .el-button{margin:0}.help,.empty{font-size:13px;color:var(--el-text-color-secondary)}.empty{padding:16px}.summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}.summary,.key-panel{background:var(--el-bg-color);border:1px solid var(--el-border-color-light);border-radius:var(--el-border-radius-base);padding:24px}.actions{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}.actions .el-button{margin:0}.key-panel{background:var(--el-color-primary-light-9)}pre{font:14px/1.7 monospace;white-space:pre-wrap}.key-panel p{font-size:13px}.summary li{margin:6px 0}footer{font-size:12px;color:var(--el-text-color-secondary);margin-top:20px}@media(max-width:700px){.module-desk{padding:20px 16px}h1{font-size:28px}.el-transfer{flex-direction:column;gap:16px}.el-transfer-panel{width:100%}.el-transfer__buttons{flex-direction:row;padding:0}.summary-grid{grid-template-columns:1fr}.el-card__body{padding:16px}}
```

코드 참조

- 중단점과 주변 레이아웃은 이 예제를 위해 선택한 설정입니다.

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

### 구현 시작점

Vue 3 및 Element Plus 2.14.7에서 검증했습니다. App.vue에서 영어 ConfigProvider와 명시적 컴포넌트 가져오기를 설정합니다. 모든 상태는 로컬에 저장됩니다.

```
// Create the project first:
// npm create vite@latest element-plus-specimen -- --template vue
// cd element-plus-specimen && npm install
// In a Vite Vue 3 project:
// npm install element-plus@2.14.7
// Save the complete single-file component above as App.vue.
// main.js
import {createApp} from 'vue';
import 'element-plus/dist/index.css';
import './style.css';
import App from './App.vue';
createApp(App).mount('#app');
// index.html: <div id="app"></div>
// style.css: use the complete responsive composition above.
// Vite's standard Vue template includes @vitejs/plugin-vue for .vue files.
// Keep the template index.html and replace its entry with the code above.
// npm run dev
```

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

```
제공된 Element Plus 2.14.7 작업 공간 모듈 선택기를 네이티브 ElTransfer를 사용해 확장하세요. 키가 지정된 모듈 여섯 개, 비활성화된 Audit 항목, 필터 동작, 제어되는 선택 키 배열을 유지합니다. 적용 시 현재 모듈 선택을 저장하고, 이후 편집하면 저장된 상태가 오래된 값임을 눈에 띄게 표시해야 합니다. 복원하면 초기 선택으로 돌아갑니다. Transfer를 관련 없는 목록으로 다시 만들지 말고, 반응형 2패널 레이아웃과 비활성화된 항목의 동작을 유지하세요. 원래 구성 CSS보다 먼저 네이티브 스타일시트를 불러오세요.
```

## Element Plus 디자인 시스템의 출처와 범위

Element Plus 2.14.7 네이티브 참조입니다. 모듈 이름과 권한은 독자적인 예시이며, 로컬 선택은 설치나 권한을 변경하지 않습니다.

- Transfer 모델 키, 필터링, 비활성화된 데이터, 빈 슬롯입니다.

- 테마 설정 CSS 변수 및 Sass 사용자 지정입니다.

- 빠른 시작 Vue 컴포넌트 및 스타일시트 설정입니다.

- Config Provider 로캘 설정입니다.

- 색상 기본 색상 역할입니다.

- 테두리 테두리와 형태의 기초입니다.

## Element Plus 디자인 시스템 관련 자료

### Flowbite

기본 Flowbite 4 아코디언과 드로어 구성에 검증된 의미적 테마 별칭, 고정 포장 체크리스트, 접근성 높은 로컬 자재 메모 워크플로를 더했습니다.

### Fomantic UI

컴파일된 테마 값 검증, jQuery 드롭다운 및 평점 모듈, 명시적인 키보드 지원, 로컬에 영구 보관되는 관심 목록을 갖춘 네이티브 Fomantic UI 독서 목록입니다.

### Foundation

XY Grid, Abide 사용자 지정 유효성 검사기, Reveal 확인 대화상자, 실제 Sass 설정, 완전한 로컬 통합 코드를 활용한 실제 작동하는 Foundation 증명 작업 공간입니다.


- [구현 레퍼런스](https://element-plus.org/en-US/component/transfer.html)
- [출처](https://element-plus.org/en-US/guide/theming.html)
- [출처](https://element-plus.org/en-US/component/transfer.html)
- [지원 사양 읽기](https://element-plus.org/en-US/component/transfer.html)
- [지원 사양 읽기](https://element-plus.org/en-US/guide/theming.html)
- [지원 사양 읽기](https://element-plus.org/en-US/guide/quickstart.html)
- [코드 참조](https://element-plus.org/en-US/component/transfer.html)
- [코드 참조](https://element-plus.org/en-US/guide/theming.html)
- [Transfer 모델 키, 필터링, 비활성화된 데이터, 빈 슬롯입니다.](https://element-plus.org/en-US/component/transfer.html)
- [테마 설정 CSS 변수 및 Sass 사용자 지정입니다.](https://element-plus.org/en-US/guide/theming.html)
- [빠른 시작 Vue 컴포넌트 및 스타일시트 설정입니다.](https://element-plus.org/en-US/guide/quickstart.html)
- [Config Provider 로캘 설정입니다.](https://element-plus.org/en-US/component/config-provider.html)
- [색상 기본 색상 역할입니다.](https://element-plus.org/en-US/component/color.html)
- [테두리 테두리와 형태의 기초입니다.](https://element-plus.org/en-US/component/border.html)