# 앱 만들기 개요

Waveon에서 다양한 앱을 만드는 방법을 알아봅니다.

***

### 이 섹션에서 다루는 내용

<table 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>Multi-page Apps</strong></td><td>여러 페이지로 구성된 앱 만들기</td><td></td></tr><tr><td><strong>Forms &#x26; Inputs</strong></td><td>입력 폼 만들기와 유효성 검사</td><td></td></tr><tr><td><strong>Tables &#x26; Lists</strong></td><td>데이터 테이블과 목록 표시</td><td></td></tr><tr><td><strong>Modals &#x26; Popups</strong></td><td>모달, 팝업, 알림 만들기</td><td></td></tr><tr><td><strong>Styling &#x26; Design</strong></td><td>디자인과 스타일링 적용</td><td></td></tr></tbody></table>

***

### 앱 개발 기본 원칙

#### 1. 작게 시작하기

한 번에 모든 기능을 요청하지 말고, 기본 기능부터 시작합니다.

```
❌ 나쁜 예:
"직원 관리, 재고 관리, 고객 관리, 대시보드, 리포트가 있는
종합 관리 시스템을 만들어줘"

✅ 좋은 예:
"직원 목록을 보여주는 테이블을 만들어줘"
→ (완성 후) "직원 추가 폼을 추가해줘"
→ (완성 후) "수정/삭제 기능을 추가해줘"
```

#### 2. 점진적으로 기능 추가

기본 기능이 동작하면 하나씩 기능을 추가합니다.

```
1단계: 기본 UI
2단계: 데이터 저장
3단계: 검색/필터
4단계: 수정/삭제
5단계: 디자인 개선
```

#### 3. 자주 테스트하기

각 단계마다 Preview에서 테스트합니다.

* 의도한 대로 동작하는지 확인
* 에러가 없는지 확인
* 사용성에 문제가 없는지 확인

***

### 자주 만드는 앱 유형

#### 관리 시스템

* 직원 관리
* 재고 관리
* 고객 관리 (CRM)
* 주문 관리

→ 핵심: CRUD(생성, 조회, 수정, 삭제) + 검색/필터

#### 대시보드

* 매출 대시보드
* KPI 모니터링
* 프로젝트 현황

→ 핵심: 데이터 시각화 + 요약 정보

#### 입력 폼

* 신청서
* 설문조사
* 예약 폼

→ 핵심: 폼 유효성 검사 + 제출 처리

#### 목록/카탈로그

* 상품 목록
* 포트폴리오
* 갤러리

→ 핵심: 카드 레이아웃 + 필터/정렬

***

### 앱 구조 설계 팁

#### 단일 페이지 앱

간단한 앱은 하나의 페이지로 충분합니다.

```
/ (메인)
├── 입력 폼
├── 데이터 테이블
└── 필터/검색
```

#### 다중 페이지 앱

복잡한 앱은 여러 페이지로 나눕니다.

```
/                   → 대시보드 (요약)
/employees          → 직원 목록
/employees/:id      → 직원 상세
/employees/new      → 직원 등록
/settings           → 설정
```

→ Multi-page Apps 상세

***

### 프롬프트 작성 팁

#### 명확한 요구사항

```
직원 관리 테이블을 만들어줘.

컬럼:
- 이름 (텍스트)
- 부서 (텍스트)
- 이메일 (텍스트)
- 입사일 (날짜)
- 상태 (재직중/휴직/퇴사)

기능:
- 행 클릭 시 상세 모달
- 상태별 필터 드롭다운
- 이름 검색
```

#### 디자인 요구사항

```
디자인 요구사항:
- 전체 배경: 연한 회색 (#f5f5f5)
- 카드 배경: 흰색, 둥근 모서리 (8px)
- 주요 버튼: 파란색 (#2563eb)
- 테이블 헤더: 회색 배경
```

#### 동작 요구사항

```
삭제 버튼 클릭 시:
1. "정말 삭제하시겠습니까?" 확인 팝업
2. 확인 클릭 → 데이터 삭제 → 테이블 새로고침
3. 취소 클릭 → 팝업만 닫기
```

***

### 다음 단계

기본 앱 만들기에 익숙해졌다면 다음 가이드를 참고하세요:


---

# 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/guides/building-apps.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.