> For the complete documentation index, see [llms.txt](https://docs.waveon.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.waveon.io/editor/visual-edit-mode.md).

# 비주얼 편집 모드

Visual Edit 모드는 화면에서 요소를 직접 선택하여 AI에게 수정을 요청하는 기능입니다.

***

### 왜 사용하나요?

#### 문제 상황

```
"버튼 색상을 바꿔줘"
```

→ AI: "어떤 버튼인가요? 여러 개의 버튼이 있습니다."

#### Visual Edit로 해결

1. Visual Edit 모드 활성화
2. 수정할 버튼 클릭
3. "이 버튼 색상을 빨간색으로 바꿔줘"

→ AI가 정확히 어떤 버튼인지 알고 수정

***

### 사용 방법

#### Step 1: Visual Edit 모드 활성화

Chat 패널 하단의 🎯 버튼을 클릭합니다.

버튼이 파란색으로 변하면 활성화된 상태입니다.

#### Step 2: 요소 선택

Preview에서 수정할 요소를 클릭합니다.

* 마우스를 올리면 요소가 하이라이트됨
* 클릭하면 선택됨

#### Step 3: 선택 정보 확인

선택된 요소의 정보가 Chat 패널에 표시됩니다.

```
🎯 <button> | src/App.js:42
```

| 정보        | 설명                                |
| --------- | --------------------------------- |
| **태그명**   | HTML 요소 종류 (button, input, div 등) |
| **파일 경로** | 해당 코드가 있는 파일                      |
| **라인 번호** | 코드의 정확한 위치                        |

#### Step 4: 수정 요청

선택된 요소에 대한 수정을 요청합니다.

```
이 버튼의 텍스트를 "저장하기"로 바꾸고 색상은 초록색으로 해줘
```

AI는 선택된 요소의 정확한 위치를 알고 있으므로 해당 부분만 수정합니다.

***

### Right 패널

요소를 선택하면 오른쪽에 상세 정보 패널이 열립니다.

#### 표시 정보

| 항목         | 설명                                 |
| ---------- | ---------------------------------- |
| **태그명**    | `<button>`, `<input>`, `<table>` 등 |
| **파일 위치**  | `src/components/Form.js:28`        |
| **ID**     | 요소의 id 속성 (있는 경우)                  |
| **Class**  | 요소의 class 속성                       |
| **현재 스타일** | 적용된 CSS 스타일                        |

#### 닫기

Right 패널의 X 버튼 또는 다른 곳 클릭으로 닫습니다.

***

### 선택 해제

#### 방법 1: X 버튼

Chat 패널의 요소 칩에서 X 버튼 클릭

```
🎯 <button> | src/App.js:42  [X]
```

#### 방법 2: 빈 영역 클릭

Preview에서 요소가 아닌 빈 영역 클릭

#### 방법 3: 모드 비활성화

🎯 버튼을 다시 클릭하여 Visual Edit 모드 비활성화

***

### 활용 예시

#### 특정 버튼 수정

```
1. 버튼 선택
2. "이 버튼을 더 크게 만들고, 아이콘을 추가해줘"
```

#### 테이블 열 추가

```
1. 테이블 선택
2. "이 테이블에 '상태' 열을 추가해줘"
```

#### 입력 필드 수정

```
1. 입력 필드 선택
2. "이 입력 필드에 placeholder를 '이메일을 입력하세요'로 해줘"
```

#### 레이아웃 수정

```
1. 컨테이너/div 선택
2. "이 영역의 배경색을 연한 회색으로 바꾸고 패딩을 추가해줘"
```

#### 모달 수정

```
1. 모달 내부 요소 선택
2. "이 모달의 너비를 더 넓게 하고 제목을 '직원 정보 수정'으로 바꿔줘"
```

***

### 선택 팁

#### 중첩된 요소

요소가 중첩되어 있을 때는 원하는 요소가 선택될 때까지 클릭 위치를 조정합니다.

{% hint style="info" %}
더 구체적인 위치를 클릭하면 더 내부의 요소가 선택됩니다.

* 버튼 가장자리 클릭 → 버튼 자체 선택
* 버튼 텍스트 클릭 → 텍스트 span 선택
  {% endhint %}

#### 보이지 않는 요소

숨겨진 요소(모달, 드롭다운 등)는 먼저 표시 상태로 만든 후 선택합니다.

1. 모달을 여는 버튼 클릭 → 모달 열림
2. Visual Edit 모드에서 모달 내부 요소 선택

#### 동적 요소

리스트 항목처럼 반복되는 요소는 하나를 선택하면 해당 컴포넌트 전체에 적용됩니다.

***

### 제한사항

#### 선택 불가능한 경우

* 아직 렌더링되지 않은 요소
* CSS로 완전히 숨겨진 요소 (`display: none`)
* iframe 내부 요소

#### 수정 불가능한 경우

* 외부 라이브러리의 내부 구조
* package.json에 정의된 의존성

***

### Visual Edit vs 프롬프트만 사용

| 상황                 | 권장 방법       |
| ------------------ | ----------- |
| 특정 요소 1개 수정        | Visual Edit |
| 여러 요소 일괄 수정        | 프롬프트        |
| 새 기능 추가            | 프롬프트        |
| 전체 디자인 변경          | 프롬프트        |
| "이 버튼"처럼 지칭하고 싶을 때 | Visual Edit |

***

### 팁

{% hint style="success" %}
**Visual Edit + 구체적 설명 조합**

요소를 선택한 후 구체적으로 설명하면 최상의 결과를 얻습니다.

```
[버튼 선택 후]
"이 버튼을:
- 너비 100%로
- 높이 48px로
- 배경색 #2563eb로
- 텍스트 '저장하기'로
- 호버 시 약간 어둡게"
```

{% endhint %}

{% hint style="info" %}
**빠른 선택 해제**

실수로 잘못된 요소를 선택했다면 요소 칩의 X 버튼으로 빠르게 해제할 수 있습니다.
{% endhint %}