# 빠르게 시작하기

{% hint style="success" %}
**예상 소요 시간**: 5분\
**목표**: 첫 번째 앱을 만들고 미리보기까지 완료
{% endhint %}

### 준비물

* [ ] Waveon 계정 ([회원가입](https://waveon.io/signup))
* [ ] Chrome 브라우저 (권장)

***

### Step 1: 새 앱 만들기

#### 방법 A: 템플릿으로 시작 (권장, AI로 수정 가능)

1. [www.waveon.io/templates](https://www.waveon.io/templates) 접속
2. 원하는 템플릿을 선택
3. 미리보기를 통해 확인
4. 시작하기 클릭 하여 진행

{% hint style="info" %}
템플릿으로 시작하기를 권장합니다.

* AI 크레딧 절약 : 템플릿을 이용하면 직접 만드는것 대비 AI크레딧을 절약할수 있습니다.
* 미리 세팅된 로직 : 템플릿에는 필요한 동작들이 대부분 구현되어 있어서 직접 제작보다 빠릅니다.
* 안정된 시스템 : 템플릿은 버그나, 예외처리등이 되어 있어서 직접 구현 대비 버그가 적습니다.
  {% endhint %}

#### 방법 B: AI로 처음부터 시작

1. [www.waveon.io/templates](https://www.waveon.io/templates) 접속
2. **\[AI로 제작하기]** 클릭
3. 입력창에 원하는 시스템에 대한 설명을 입력

***

### Step 2: 에디터 살펴보기

앱이 생성되면 **에디터**가 열립니다. 3개의 패널로 구성되어 있습니다.

<table><thead><tr><th width="159.59375">패널</th><th width="154.19921875">위치</th><th>역할</th></tr></thead><tbody><tr><td><strong>Chat</strong></td><td>왼쪽</td><td>AI와 대화하며 앱 생성/수정</td></tr><tr><td><strong>Code</strong></td><td>중앙</td><td>생성된 React 코드 확인 (Pro 전용)</td></tr><tr><td><strong>Preview</strong></td><td>오른쪽</td><td>실시간 앱 미리보기</td></tr></tbody></table>

{% hint style="info" %}
**Code 패널**은 Pro 플랜 이상에서 편집 가능합니다. Free 플랜에서는 읽기 전용입니다.
{% endhint %}

***

### Step 3: AI에게 요청하기

Chat 패널에 원하는 기능을 자연어로 설명하세요.

#### 좋은 프롬프트 예시 - 구체적인 설명과 지시를 포함

{% tabs %}
{% tab title="직원 관리" %}

```
직원 관리 기능을 추가해줘.

필요한 기능:
- 직원 추가 폼 (이름, 부서, 이메일, 입사일)
- 직원 목록 테이블
- 검색 기능

디자인은 심플하고 깔끔하게
```

{% endtab %}

{% tab title="재고 관리" %}

```
입고 관리에서 입고 조회 메뉴 페이지에서 "단위" 컬럼을 제거해줘.
```

{% endtab %}

{% tab title="고객 관리" %}

```
고객 관리 CRM을 만들어줘.

필요한 기능:
- 고객 정보 입력 (회사명, 담당자, 연락처, 상태)
- 고객 목록 (상태별 필터)
- 상담 메모 기록
```

{% endtab %}
{% endtabs %}

***

### Step 4: 결과 확인하기

AI가 앱을 생성하는 동안 **Preview 패널**에서 실시간으로 결과를 확인할 수 있습니다.

#### PC / Mobile 전환

에디터 상단의 토글로 PC와 Mobile 뷰를 전환할 수 있습니다.

***

### Step 5: 수정 요청하기

결과가 마음에 들지 않으면 추가 요청을 보내세요.

#### 기능 추가

```
테이블에 수정/삭제 버튼을 추가해줘
```

#### 디자인 변경

```
전체 색상을 파란색 계열로 바꿔줘
헤더에 회사 로고 자리를 만들어줘
```

#### 레이아웃 수정

```
폼을 왼쪽에, 테이블을 오른쪽에 나란히 배치해줘
```

***

### Step 6: Visual Edit 모드 (선택)

특정 요소만 수정하고 싶을 때 사용합니다.

1. Chat 패널 하단의 **Visual Edit** 버튼(🎯) 클릭
2. Preview에서 수정할 요소 클릭
3. 선택된 요소 정보가 Chat에 표시됨
4. 해당 요소에 대한 수정 요청

```
이 버튼 색상을 빨간색으로 바꿔줘
```

***

### Step 7: 파일 업로드 (선택)

이미지나 문서를 AI에게 참고 자료로 제공할 수 있습니다.

#### 지원 파일 형식

* **이미지**: PNG, JPG, GIF
* **문서**: PDF, Word, Excel, CSV, TXT

#### 사용 예시

```
[이미지 업로드 후]
이 디자인을 참고해서 비슷한 스타일로 만들어줘
```

```
[Excel 업로드 후]
이 데이터 구조를 기반으로 입력 폼을 만들어줘
```

***

### 완료!

{% hint style="success" %}
**축하합니다!** 첫 번째 앱을 만들었습니다.\
Preview에서 실제로 폼을 입력하고 동작을 테스트해보세요.
{% endhint %}

***

### 다음 단계

<table data-card-size="large" 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>Core Concepts</strong></td><td>에디터 구조와 핵심 개념 이해하기</td><td><a href="/pages/OnqpFvFaltuMHbYnvj2Z">/pages/OnqpFvFaltuMHbYnvj2Z</a></td></tr><tr><td><strong>Your First App</strong></td><td>완전한 CRUD 앱 만들기 튜토리얼</td><td><a href="/pages/ld0PCthPw4bzkIlen6Q9">/pages/ld0PCthPw4bzkIlen6Q9</a></td></tr></tbody></table>

***

### 자주 묻는 질문

<details>

<summary>AI가 잘못된 코드를 생성했어요</summary>

다시 요청하거나, 더 구체적으로 설명해주세요.

```
방금 만든 테이블에서 에러가 나. 데이터가 없을 때 "데이터가 없습니다" 메시지를 보여줘
```

</details>

<details>

<summary>생성이 중간에 멈췄어요</summary>

**Stop** 버튼을 누르고 다시 요청하거나, 페이지를 새로고침해주세요.

</details>

<details>

<summary>Code 패널이 비활성화되어 있어요</summary>

Code 편집은 Pro 플랜 이상에서 가능합니다. Free 플랜에서는 읽기만 가능합니다.

</details>


---

# 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/getting-started/undefined.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.