> 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/overview.md).

# 에디터 설명

에디터는 AI와 대화하며 React 기반 웹 앱을 만드는 Waveon의 핵심 도구입니다.

***

### 에디터 접근 방법

#### 새 앱 생성 시

1. [waveon.io](https://waveon.io) 메인 화면에서 프롬프트 입력
2. 자동으로 에디터가 열림

#### 기존 앱 편집 시

1. 대시보드에서 앱 선택
2. **\[편집]** 버튼 클릭

***

### 에디터 구조

#### 전체 레이아웃

```
┌─────────────────────────────────────────────────────────────┐
│                        Header                                │
├─────────────┬─────────────────┬─────────────────────────────┤
│             │                 │                             │
│    Chat     │      Code       │         Preview             │
│   Panel     │     Panel       │          Panel              │
│             │   (Pro 전용)     │                             │
│             │                 │                             │
├─────────────┴─────────────────┴─────────────────────────────┤
│                    Right Panel (Visual Edit 시)              │
└─────────────────────────────────────────────────────────────┘
```

***

### 구성 요소

#### 1. Header

| 요소               | 설명            |
| ---------------- | ------------- |
| **앱 이름**         | 클릭하여 변경 가능    |
| **PC/Mobile 토글** | Preview 뷰 전환  |
| **Code 토글**      | Code 패널 표시/숨김 |
| **Tips 버튼**      | 에디터 사용 팁 모달   |
| **배포 버튼**        | 앱 배포          |

#### 2. Chat Panel

AI와 대화하는 공간입니다.

* 프롬프트 입력
* 대화 내역 확인
* 파일 업로드
* Visual Edit 토글

| 기능                 | 설명              |
| ------------------ | --------------- |
| **대화 내역**          | 이전 요청과 AI 응답 확인 |
| **프롬프트 입력**        | 새로운 요청 입력       |
| **파일 업로드**         | 이미지, PDF 등 첨부   |
| **Visual Edit 토글** | 요소 선택 모드 활성화    |
| **현재 페이지 표시**      | 작업 중인 페이지 경로    |

**프롬프트 입력 팁**

{% hint style="info" %}
**구체적으로 설명할수록** AI가 원하는 결과를 만들어냅니다.
{% endhint %}

```
❌ 나쁜 예: "폼 만들어줘"

✅ 좋은 예: "직원 등록 폼을 만들어줘.
이름(필수), 이메일(필수), 부서(드롭다운), 입사일(날짜선택) 필드가 필요해.
제출 버튼은 파란색으로."
```

#### 3. Code Panel

생성된 React 코드를 확인하고 편집합니다.

* 파일 트리
* 코드 에디터
* 파일 관리 (생성, 삭제, 이동)

→ Code Panel 상세

{% hint style="warning" %}
Code 패널 편집은 **Pro 플랜 이상**에서 가능합니다.
{% endhint %}

#### 4. Preview Panel

실시간으로 앱을 미리봅니다.

* 실시간 렌더링
* PC/Mobile 뷰 전환
* 상호작용 테스트
* Visual Edit 요소 선택

→ Preview Panel 상세

#### 5. Right Panel

Visual Edit 모드에서 선택한 요소의 정보를 표시합니다.

→ Visual Edit Mode 상세

***

### 기본 워크플로우

```
┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│  프롬프트    │ ──→ │  AI 코드    │ ──→ │  Preview    │
│    입력     │     │    생성     │     │    확인     │
└─────────────┘     └─────────────┘     └─────────────┘
       ↑                                       │
       │                                       │
       └──────────── 수정 요청 ←───────────────┘
```

1. **Chat 패널**에서 원하는 기능 설명
2. AI가 코드를 생성하면 **Preview 패널**에서 확인
3. 수정이 필요하면 **추가 요청** 또는 **Visual Edit**으로 특정 요소 선택
4. 만족하면 **배포**

***

### 플랜별 기능

| 기능          | Free      | Pro |
| ----------- | --------- | --- |
| Chat 패널     | ✅         | ✅   |
| Preview 패널  | ✅         | ✅   |
| Visual Edit | ✅         | ✅   |
| 파일 업로드      | ✅         | ✅   |
| Code 패널 보기  | ✅ (읽기 전용) | ✅   |
| Code 패널 편집  | ❌         | ✅   |
| 파일 생성/삭제    | ❌         | ✅   |

***

### 다음 단계

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Chat Panel</strong></td><td>AI와 효과적으로 대화하기</td><td></td></tr><tr><td><strong>Visual Edit Mode</strong></td><td>요소 선택하여 수정하기</td><td></td></tr><tr><td><strong>Code Panel</strong></td><td>코드 직접 편집하기</td><td></td></tr></tbody></table>