앱 만들기 개요

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

---

이 섹션에서 다루는 내용

Multi-page Apps

여러 페이지로 구성된 앱 만들기

Forms & Inputs

입력 폼 만들기와 유효성 검사

Tables & Lists

데이터 테이블과 목록 표시

Modals & Popups

모달, 팝업, 알림 만들기

Styling & Design

디자인과 스타일링 적용

---

앱 개발 기본 원칙

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

---

다음 단계

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