# 첫 앱 만들기

{% 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    | 워크스페이스 | 공동작업 진행                |

***

### 다음 단계

<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>여러 페이지 만들기</strong></td><td>다중 페이지 앱 구성하기</td><td></td></tr><tr><td><strong>외부 API 연동</strong></td><td>Slack, Google Sheets 등 연동</td><td></td></tr><tr><td><strong>워크스페이스 활용</strong></td><td>팀원과 함께 앱 관리하기</td><td></td></tr><tr><td><strong>템플릿 둘러보기</strong></td><td>미리 만들어진 앱 활용</td><td></td></tr></tbody></table>

***

### 문제가 있나요?

<details>

<summary>데이터가 저장되지 않아요</summary>

"데이터를 서버에 저장할 수 있게 해줘"라고 다시 요청해보세요. AI가 API 연동 코드를 추가합니다.

</details>

<details>

<summary>수정 모달이 안 열려요</summary>

1. Visual Edit 모드로 테이블 행을 선택
2. "이 행을 클릭하면 수정 모달이 열리게 해줘"라고 요청

</details>

<details>

<summary>필터가 작동하지 않아요</summary>

드롭다운 값과 데이터의 부서명이 정확히 일치하는지 확인하세요.

```
필터 드롭다운의 옵션과 직원 데이터의 부서 필드 값이
정확히 일치하도록 수정해줘.
```

</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/your-first-app.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.