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

# 첫 앱 만들기

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