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

# 앱 만들기 개요

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. 취소 클릭 → 팝업만 닫기
```

***

### 다음 단계

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