Ctrlk
For the complete documentation index, see llms.txt. This page is also available as Markdown.

빠르게 시작하기

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

준비물

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

사용 예시

완료!

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

다음 단계

Core Concepts

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

Your First App

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

자주 묻는 질문

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

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

생성이 중간에 멈췄어요

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

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

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

이전웨이브온 소개
다음핵심 개념 소개

마지막 업데이트