# 웨이브온 소개 ### Waveon이란? Waveon은 코딩 없이 **AI와 대화하며** 업무용 웹 애플리케이션을 만드는 플랫폼입니다. 원하는 기능을 자연어로 설명하면, AI가 즉시 React 기반 앱을 생성합니다. 데이터베이스 설정, 서버 구축 없이 바로 사용할 수 있습니다. *** ### 핵심 기능 #### 1. AI 대화로 앱 생성 채팅창에 원하는 앱을 설명하면 AI가 만들어줍니다. ``` "직원 정보를 관리하는 대시보드를 만들어줘. 이름, 부서, 입사일을 입력하고 목록으로 볼 수 있게 해줘." ``` #### 2. 실시간 미리보기 AI가 코드를 생성하는 동안 오른쪽 Preview 패널에서 결과를 바로 확인할 수 있습니다. #### 3. 비주얼 편집 모드 화면에서 요소를 직접 클릭하여 선택하고, AI에게 해당 요소만 수정하도록 요청할 수 있습니다. #### 4. 파일 업로드 이미지, PDF, Excel 파일을 업로드하여 AI에게 참고 자료로 제공할 수 있습니다. *** ### 도움이 필요하신가요? * **이메일**: * 또는 웹사이트 접속하셔서 **문의하기** 를 통해 문의 주시면 빠르게 답변 드리도록 하겠습니다. # 빠르게 시작하기 {% 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개의 패널로 구성되어 있습니다.
패널위치역할
Chat왼쪽AI와 대화하며 앱 생성/수정
Code중앙생성된 React 코드 확인 (Pro 전용)
Preview오른쪽실시간 앱 미리보기
{% 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 %} *** ### 다음 단계
Core Concepts에디터 구조와 핵심 개념 이해하기/pages/OnqpFvFaltuMHbYnvj2Z
Your First App완전한 CRUD 앱 만들기 튜토리얼/pages/ld0PCthPw4bzkIlen6Q9
*** ### 자주 묻는 질문
AI가 잘못된 코드를 생성했어요 다시 요청하거나, 더 구체적으로 설명해주세요. ``` 방금 만든 테이블에서 에러가 나. 데이터가 없을 때 "데이터가 없습니다" 메시지를 보여줘 ```
생성이 중간에 멈췄어요 **Stop** 버튼을 누르고 다시 요청하거나, 페이지를 새로고침해주세요.
Code 패널이 비활성화되어 있어요 Code 편집은 Pro 플랜 이상에서 가능합니다. Free 플랜에서는 읽기만 가능합니다.
# 핵심 개념 소개 {% hint style="success" %} **예상 소요 시간**: 5분\ **목표**: 웨이브온 구조와 핵심 개념 이해하기 {% endhint %} #### 앱 (App) Waveon에서 만드는 하나의 웹 애플리케이션입니다. * 고유한 URL을 가짐 * 여러 페이지를 포함할 수 있음 * React 기반으로 동작 *** #### 워크스페이스(Workspace) 다른 사용자를 초대하여 함께 협업이 가능한 공간 입니다. * 다른 사용자를 초대 가능 * 사용자의 권한 관리가 가능 * 워크스페이스에서 만든 앱은 다른 사용자와 공유 및 공동작업 * 기본적으로 개인 워크스페이스 생성 *** #### 데이터(Data) 앱을 통해 저장된 데이터를 조회할수 있는 페이지 입니다. * 앱에서 데이터 베이스 연동해줘, 또는 데이터베이스에 입력해줘 와 같은 방식으로 AI에게 지시 * 해당 데이터는 "데이터" 페이지에서 조회 가능 * 워크스페이스에서는 다른 사용자, 다른 앱 간에 데이터를 공유 *** #### 설정 ( 앱 설정, 워크스페이스 설정 ) 앱 또는 워크스페이스를 설정하고 관리할수 있습니다. * 개인 워크스페이스 상태에서 설정 버튼 클릭시 개인 설정이 가능 * 팀 워크스페이스 상태에서 설정 버튼 클릭시 팀 워크스페이스 설정이 가능 * 앱 에디터에서 설정 버튼 클릭시 앱의 설정 가능 *** #### 게시하기 (Publish) 만든 앱을 인터넷에 공개하는 것입니다. 에디터에서 우측 상단 **게시하기** 버튼을 눌러 게시를 진행할수 있습니다. **배포 후 제공되는 것** * **앱 URL**: `https://your-app.waveon.me` * **버전 관리**: 이전 버전으로 롤백 가능 * **도메인 설정**: 보유한 도메인으로 접속 설정 가능 *** ### 워크플로우 요약 ``` 1. 프롬프트 입력 → 2. AI가 코드 생성 → 3. Preview 확인 ↑ ↓ ←←←←←←←← 4. 수정 요청 ←←←←←←←←←←←←←←←← ↓ 5. 만족하면 배포 ``` *** ### 다음 단계 # 첫 앱 만들기 {% hint style="success" %} **예상 소요 시간**: 15분\ **목표**: 데이터 저장이 가능한 직원 관리 앱 완성 {% endhint %} ### 만들 앱 소개 이 튜토리얼에서는 **직원 관리 앱**을 처음부터 끝까지 만들어봅니다. #### 완성 기능 * ✅ 직원 추가 폼 * ✅ 직원 목록 테이블 * ✅ 검색 기능 * ✅ 수정 기능 * ✅ 삭제 기능 * ✅ 부서별 필터 *** ### Part 1: 기본 앱 생성 {% stepper %} {% step %} #### 새 앱 시작 [waveon.io](https://waveon.io) 접속 후 다음 프롬프트를 입력합니다: ``` 직원 관리 앱을 만들어줘. 필요한 기능: 1. 직원 추가 폼 (이름, 부서, 이메일, 입사일) 2. 직원 목록 테이블 3. 검색 기능 디자인은 심플하고 깔끔하게 해줘. ``` {% endstep %} {% step %} #### 결과 확인 AI가 앱을 생성하면 Preview 패널에서 결과를 확인합니다. * 폼이 제대로 표시되는지 * 테이블이 있는지 * 검색창이 있는지 {% endstep %} {% step %} #### 테스트 Preview에서 직접 테스트해봅니다: 1. 폼에 테스트 데이터 입력 2. 추가/등록 버튼 클릭 3. 테이블에 데이터가 표시되는지 확인 {% hint style="info" %} 이 단계에서는 데이터가 **메모리에만** 저장됩니다. 페이지를 새로고침하면 사라집니다. {% endhint %} {% endstep %} {% endstepper %} *** ### Part 2: 데이터 저장 기능 현재는 새로고침하면 데이터가 사라집니다. 영구 저장 기능을 추가합니다. {% stepper %} {% step %} #### 데이터 저장 요청 ``` 직원 데이터를 서버에 저장할 수 있게 해줘. 폼을 제출하면 데이터베이스에 저장되고, 테이블에서 저장된 데이터를 불러와서 보여줘. ``` {% endstep %} {% step %} #### 테스트 1. 폼에 데이터 입력 후 제출 2. **페이지 새로고침** 3. 데이터가 유지되는지 확인 {% endstep %} {% endstepper %} {% hint style="info" %} **데이터는 어디에 저장되나요?**\ Waveon이 제공하는 클라우드 데이터베이스에 자동으로 저장됩니다. 별도의 서버 설정이 필요 없습니다. {% endhint %} *** ### Part 3: 수정 기능 추가 {% stepper %} {% step %} #### 수정 기능 요청 ``` 테이블에서 직원을 클릭하면 수정할 수 있게 해줘. 수정 폼은 모달(팝업)로 띄워줘. ``` {% endstep %} {% step %} #### 테스트 1. 테이블에서 아무 행 클릭 2. 수정 모달이 열리는지 확인 3. 데이터 수정 후 저장 4. 테이블에 반영되는지 확인 {% endstep %} {% endstepper %} *** ### Part 4: 삭제 기능 추가 {% stepper %} {% step %} #### 삭제 기능 요청 ``` 각 행에 삭제 버튼을 추가해줘. 삭제 버튼 클릭 시 "정말 삭제하시겠습니까?" 확인 팝업을 띄워줘. 확인하면 삭제하고, 취소하면 아무 일도 안 일어나게. ``` {% endstep %} {% step %} #### 테스트 1. 삭제 버튼 클릭 2. 확인 팝업 표시 확인 3. "확인" 클릭 시 데이터 삭제 4. "취소" 클릭 시 팝업만 닫힘 {% endstep %} {% endstepper %} *** ### Part 5: 필터 기능 추가 {% stepper %} {% step %} #### 필터 기능 요청 ``` 부서별로 필터링할 수 있는 드롭다운을 추가해줘. 옵션: 전체, 개발팀, 마케팅팀, 영업팀, 인사팀 "전체"를 선택하면 모든 직원을 보여주고, 특정 부서를 선택하면 해당 부서 직원만 보여줘. ``` {% endstep %} {% step %} #### 테스트 1. 여러 부서의 직원 데이터 추가 2. 드롭다운에서 부서 선택 3. 해당 부서 직원만 표시되는지 확인 {% endstep %} {% endstepper %} *** ### Part 6: 디자인 다듬기 (선택) 기능이 완성되었으면 디자인을 개선합니다. {% tabs %} {% tab title="색상 변경" %} ``` 전체 테마 색상을 파란색 계열로 바꿔줘. - 주요 버튼: 진한 파란색 (#2563eb) - 배경: 연한 회색 (#f8fafc) - 테이블 헤더: 밝은 파란색 배경 ``` {% endtab %} {% tab title="레이아웃" %} ``` PC에서는 폼을 왼쪽(40%), 테이블을 오른쪽(60%)에 나란히 배치해줘. 모바일에서는 폼이 위, 테이블이 아래로 쌓이게 해줘. ``` {% endtab %} {% tab title="카드 스타일" %} ``` 폼과 테이블을 각각 카드 형태로 감싸줘. - 흰색 배경 - 둥근 모서리 (8px) - 살짝 그림자 효과 ``` {% endtab %} {% endtabs %} *** ### Part 7: 게시하기 앱이 완성되었으면 배포하여 다른 사람과 공유합니다. {% stepper %} {% step %} #### 게시하기 버튼 클릭 에디터 상단 오른쪽의 **\[게시]** 버튼을 클릭합니다. {% endstep %} {% step %} #### 배포 완료 배포가 완료되면 앱 URL이 생성됩니다: ``` https://your-app-name.waveon.me ``` 이 URL을 팀원에게 공유하면 됩니다. {% endstep %} {% step %} #### 접근 권한 설정 (선택) 앱 설정에서 접근 권한을 설정할 수 있습니다: | 옵션 | 설명 | | ---------------- | -------------- | | **공개** | 누구나 접근 가능 | | **링크 공유** | URL을 아는 사람만 접근 | | **비공개** | 로그인한 특정 사용자만 | | {% endstep %} | | | {% endstepper %} | | *** ### Part 8: 함께 사용하기 앱을 단독으로 사용할수도 있지만, 업무 앱의 경우 함께 공동으로 이용 해야합니다. 그런 경우 워크스페이스를 이용하면 접근 권한 관리, 사용자 제어 등이 가능합니다. {% stepper %} {% step %} #### 워크스페이스 생성 웨이브온 접속 이후 왼쪽 상단 워크스페이스 스위처를 클릭하여 새로운 워크스페이스를 생성 합니다. {% endstep %} {% step %} #### 앱 생성 또는 이전 **\[신규 생성]** * 워크스페이스 스위처에서 워크스페이스로 진입한 이후 우측 상단 **앱 생성**을 클릭 * 일반 앱과 동일하게 생성하면 워크스페이스에서 앱 생성 * 이 앱은 워크스페이스 내 사용자들과 함께 공유 **\[앱 이전]** * 프로젝트 메뉴에서 기존에 만든 앱의 더보기 (점 3개 아이콘) 를 클릭 * 이동 클릭 * 이동할 워크스페이스를 선택 * 앱 이동 완료 {% endstep %} {% step %} #### 멤버 초대 설정메뉴에서 멤버를 클릭 후 워크스페이스를 함께 이용할 사용자를 초대합니다. {% endstep %} {% step %} #### 멤버 승인 초대받은 사용자가 수락하면 워크스페이스를 공동으로 이용 할 수 있습니다. {% endstep %} {% endstepper %} ### 완료! {% hint style="success" %} **축하합니다!** 완전한 CRUD(생성, 조회, 수정, 삭제) 기능을 갖춘 직원 관리 앱을 만들었습니다. {% endhint %} *** ### 전체 프롬프트 요약 | Part | 목적 | 핵심 프롬프트 | | ---- | ------ | ---------------------- | | 1 | 기본 구조 | "직원 관리 앱을 만들어줘..." | | 2 | 데이터 저장 | "데이터를 서버에 저장할 수 있게..." | | 3 | 수정 기능 | "클릭하면 수정할 수 있게..." | | 4 | 삭제 기능 | "삭제 버튼을 추가하고 확인 팝업..." | | 5 | 필터 기능 | "부서별로 필터링할 수 있게..." | | 6 | 디자인 | "색상을 파란색 계열로..." | | 7 | 배포 | 배포 버튼 클릭 | | 8 | 워크스페이스 | 공동작업 진행 | *** ### 다음 단계
여러 페이지 만들기다중 페이지 앱 구성하기
외부 API 연동Slack, Google Sheets 등 연동
워크스페이스 활용팀원과 함께 앱 관리하기
템플릿 둘러보기미리 만들어진 앱 활용
*** ### 문제가 있나요?
데이터가 저장되지 않아요 "데이터를 서버에 저장할 수 있게 해줘"라고 다시 요청해보세요. AI가 API 연동 코드를 추가합니다.
수정 모달이 안 열려요 1. Visual Edit 모드로 테이블 행을 선택 2. "이 행을 클릭하면 수정 모달이 열리게 해줘"라고 요청
필터가 작동하지 않아요 드롭다운 값과 데이터의 부서명이 정확히 일치하는지 확인하세요. ``` 필터 드롭다운의 옵션과 직원 데이터의 부서 필드 값이 정확히 일치하도록 수정해줘. ```
# 에디터 설명 에디터는 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 패널 편집 | ❌ | ✅ | | 파일 생성/삭제 | ❌ | ✅ | *** ### 다음 단계
Chat PanelAI와 효과적으로 대화하기
Visual Edit Mode요소 선택하여 수정하기
Code Panel코드 직접 편집하기
# AI 채팅 패널 AI 채팅은 AI와 대화하며 앱을 만드는 핵심 공간입니다. *** ### 구성 요소 | 요소 | 설명 | | ------------ | --------------------- | | **대화 내역** | 이전 요청과 AI 응답 | | **프롬프트 입력창** | 새로운 요청 입력 | | **전송 버튼** | 프롬프트 전송 (Enter 또는 클릭) | | **+ 버튼** | 파일 업로드 메뉴 | | **🎯 버튼** | Visual Edit 모드 토글 | | **페이지 칩** | 현재 작업 중인 페이지 경로 | *** ### 프롬프트 작성 가이드 #### 좋은 프롬프트의 특징 {% hint style="success" %} **구체적**이고 **명확**할수록 원하는 결과를 얻습니다. {% endhint %} #### 예시 비교 {% tabs %} {% tab title="❌ 나쁜 예" %} ``` 폼 만들어줘 ``` **문제점**: 어떤 폼인지, 어떤 필드가 필요한지 불명확 {% endtab %} {% tab title="✅ 좋은 예" %} ``` 직원 등록 폼을 만들어줘. 필드: - 이름 (필수, 텍스트) - 이메일 (필수, 이메일 형식 검증) - 부서 (드롭다운: 개발팀, 마케팅팀, 영업팀) - 입사일 (날짜 선택) 제출 버튼은 파란색으로, 필수 필드 미입력 시 에러 메시지 표시 ``` **장점**: 필드, 타입, 검증, 디자인까지 명확 {% endtab %} {% endtabs %} #### 프롬프트 구조 템플릿 ``` [무엇을] 만들어줘/수정해줘/추가해줘 필요한 기능: - 기능 1 - 기능 2 - 기능 3 디자인/스타일: - 색상, 레이아웃 등 동작: - 버튼 클릭 시 어떤 일이 일어나는지 - 에러 처리 방법 ``` *** ### 대화 내역 #### 메시지 유형 | 유형 | 설명 | | --------- | ----------- | | User | 내가 보낸 요청 | | Assistant | AI 응답 | | Tool Call | 파일 생성/수정 작업 | | Error | 오류 발생 | | Aborted | 중단된 요청 | #### Tool Call 메시지 AI가 파일을 수정할 때 표시됩니다. * **파일 경로**: 수정된 파일 위치 * **수정 라인**: 변경된 코드 라인 수 * **미리보기**: 변경된 코드 일부 #### 후속 제안 (Follow-up Suggestions) AI 응답 후 관련 후속 작업을 제안합니다. ``` 🔹 "테이블에 페이지네이션 추가" 🔹 "검색 필터 기능 추가" 🔹 "모바일 반응형 적용" ``` 클릭하면 해당 프롬프트가 자동 입력됩니다. *** ### 파일 업로드 #### 업로드 방법 1. **+ 버튼** 클릭 → 파일 선택 2. **드래그 앤 드롭**: 파일을 입력창에 드롭 3. **붙여넣기**: 클립보드 이미지 Ctrl+V #### 지원 파일 형식 | 유형 | 형식 | | ------- | -------------------------------- | | **이미지** | PNG, JPG, GIF, WebP | | **문서** | PDF, Word (.docx), Excel (.xlsx) | | **텍스트** | TXT, CSV | #### 활용 예시 {% tabs %} {% tab title="디자인 참고" %} ``` [이미지 업로드] 이 디자인을 참고해서 비슷한 스타일로 만들어줘. 색상과 레이아웃을 최대한 따라해줘. ``` {% endtab %} {% tab title="데이터 구조 참고" %} ``` [Excel 업로드] 이 엑셀 파일의 컬럼 구조를 기반으로 입력 폼과 테이블을 만들어줘. ``` {% endtab %} {% tab title="기획서 참고" %} ``` [PDF 업로드] 이 기획서에 있는 화면을 구현해줘. 2페이지의 대시보드 화면부터 시작하자. ``` {% endtab %} {% endtabs %} *** ### Visual Edit 토글 🎯 버튼을 클릭하면 Visual Edit 모드가 활성화됩니다. #### 활성화 시 변화 * Preview에서 요소 클릭 가능 * 선택한 요소 정보가 Chat에 표시 * 해당 요소에 대한 수정 요청 가능 #### 선택된 요소 칩 ``` 🎯