빠르게 시작하기

예상 소요 시간: 5분 목표: 첫 번째 앱을 만들고 미리보기까지 완료

준비물

• Waveon 계정 (회원가입)

• Chrome 브라우저 (권장)

---

Step 1: 새 앱 만들기

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

1. www.waveon.io/templates 접속

2. 원하는 템플릿을 선택

3. 미리보기를 통해 확인

4. 시작하기 클릭 하여 진행

템플릿으로 시작하기를 권장합니다.

• AI 크레딧 절약 : 템플릿을 이용하면 직접 만드는것 대비 AI크레딧을 절약할수 있습니다.

• 미리 세팅된 로직 : 템플릿에는 필요한 동작들이 대부분 구현되어 있어서 직접 제작보다 빠릅니다.

• 안정된 시스템 : 템플릿은 버그나, 예외처리등이 되어 있어서 직접 구현 대비 버그가 적습니다.

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

1. www.waveon.io/templates 접속

2. [AI로 제작하기] 클릭

3. 입력창에 원하는 시스템에 대한 설명을 입력

---

Step 2: 에디터 살펴보기

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

패널	위치	역할
Chat	왼쪽	AI와 대화하며 앱 생성/수정
Code	중앙	생성된 React 코드 확인 (Pro 전용)
Preview	오른쪽	실시간 앱 미리보기

Code 패널은 Pro 플랜 이상에서 편집 가능합니다. Free 플랜에서는 읽기 전용입니다.

---

Step 3: AI에게 요청하기

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

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

직원 관리

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

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

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

재고 관리

고객 관리

---

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 업로드 후]
이 데이터 구조를 기반으로 입력 폼을 만들어줘

---

완료!

축하합니다! 첫 번째 앱을 만들었습니다. Preview에서 실제로 폼을 입력하고 동작을 테스트해보세요.

---

다음 단계

Core Concepts

에디터 구조와 핵심 개념 이해하기

Your First App

완전한 CRUD 앱 만들기 튜토리얼

---

자주 묻는 질문

AI가 잘못된 코드를 생성했어요

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

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

생성이 중간에 멈췄어요

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

Code 패널이 비활성화되어 있어요

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