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

# 빠르게 시작하기

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