# 비주얼 편집 모드

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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.waveon.io/editor/visual-edit-mode.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.