📱 AppMonster 앱 제작 가이드북

AI로 코딩 없이 웹 앱 만들기

버전 1.0 | 2026년 1월

대화만으로 웹 앱을 만들고 즉시 배포하세요

📋 목차

서비스 소개
페이지 구성
빠른 시작 가이드
온보딩 프로세스
AI 채팅으로 앱 만들기
파일 업로드 기능
미리보기 & 배포
마이페이지
결제 시스템
자주 묻는 질문

1. 서비스 소개

1.1 AppMonster 앱 빌더란?

AppMonster 앱 빌더는 AI 기반의 노코드(No-Code) 웹 앱 제작 플랫폼입니다. 채팅 대화만으로 아이디어를 실제 웹 앱으로 만들 수 있습니다.

🎯 핵심 가치

기능	설명	대상
AI 웹 앱 제작	대화만으로 웹 앱 생성	기획자, 디자이너, 1인 창업자
실시간 미리보기	즉시 결과 확인	빠른 검증이 필요한 스타트업
즉시 배포	URL로 바로 공유	프로토타입 테스트

🌟 주요 특징

✅ 코딩 지식 불필요 - 대화형 인터페이스
✅ 실시간 미리보기 - 모바일/태블릿/데스크톱 뷰
✅ 웹 앱 즉시 배포 - URL로 바로 공유
✅ 파일 업로드 지원 - 이미지/문서 드래그 앤 드롭
✅ 스트리밍 응답 - AI가 실시간으로 작업 진행 상황 표시
✅ HTTPS 보안 - 안전한 웹 앱

1.2 이런 분께 추천합니다

💡 아이디어는 있지만 개발자가 없는 창업자
🎨 프로토타입을 빠르게 만들고 싶은 디자이너
📊 MVP를 검증하고 싶은 기획자
🏪 자사 서비스 웹 앱이 필요한 소상공인
🎓 포트폴리오를 만들고 싶은 학생

2. 페이지 구성

2.1 전체 페이지 구조

AppMonster
├── 🏠 홈 (/)
│   ├── 서비스 소개
│   ├── 쇼케이스 (만들어진 앱 예시)
│   ├── 로드맵 (개발 예정 기능)
│   └── 새 앱 만들기 버튼
│
├── 🔐 로그인 (/login)
│   ├── Naver 로그인
│   ├── Google 로그인
│   └── Apple 로그인
│
├── 📝 온보딩 (/onboarding)
│   ├── Step 1: 앱 유형 선택 (/onboarding/step1-app-type)
│   ├── Step 2: 기능 선택 (/onboarding/step2-features)
│   ├── Step 3: 프로젝트 정보 (/onboarding/step3-project-info)
│   └── 생성 중 (/onboarding/generating)
│
├── 💬 앱 제작 채팅 (/appmon/chat/[id])
│   ├── AI 대화 채팅창
│   ├── 미리보기 패널
│   └── 파일 업로드
│
├── 👤 마이페이지 (/mypage)
│   ├── 대시보드
│   ├── 내 앱 목록 (/mypage/app)
│   └── 토큰 사용 내역
│
├── 💳 결제 (/payment)
│   ├── 토큰 구매 (/payment/token)
│   └── 구독 관리 (/payment/subscribe)
│
├── 📄 약관
│   ├── 서비스 이용약관 (/term/service)
│   ├── 개인정보처리방침 (/term/privacy)
│   └── 결제 약관 (/term/payment)
│
└── 📣 마케팅 자동화 (/marketing)
    └── Instagram 자동화 (별도 가이드 참조)

2.2 주요 페이지 경로

페이지	경로	설명
홈	`/`	메인 랜딩 페이지
로그인	`/login`	소셜 로그인
온보딩 시작	`/onboarding/step1-app-type`	앱 유형 선택
기능 선택	`/onboarding/step2-features`	원하는 기능 선택
프로젝트 정보	`/onboarding/step3-project-info`	앱 이름, 설명 입력
앱 생성 중	`/onboarding/generating`	AI가 앱 생성 중
채팅 룸	`/appmon/chat/[id]`	AI와 대화하며 앱 제작
마이페이지	`/mypage`	대시보드 & 내 앱 관리
내 앱 상세	`/mypage/app/[id]`	앱 상세 정보
토큰 구매	`/payment/token`	토큰 패키지 구매
마케팅	`/marketing`	마케팅 자동화 대시보드

3. 빠른 시작 가이드

3.1 회원가입 및 로그인

로그인 페이지 (`/login`)

AppMonster는 간편한 소셜 로그인을 지원합니다.

지원 플랫폼:

🟢 Naver 계정
🔵 Google 계정

⚠️ 인앱 브라우저 주의: 카카오톡, Instagram 등 인앱 브라우저에서는 Google 로그인이 제한될 수 있습니다. 외부 브라우저(Chrome, Safari)를 사용해주세요.

3.2 홈 페이지 둘러보기 (`/`)

로그인 후 홈 페이지에서 다음 기능을 이용할 수 있습니다:

[🆕 새 앱 만들기] - 새로운 앱 생성
[📱 내 앱 보기] - 마이페이지로 이동
📊 쇼케이스 - 다른 사용자들이 만든 앱 예시
🗺️ 로드맵 - 개발 예정 기능 확인
💎 보유 토큰 - 현재 보유 토큰 수

4. 온보딩 프로세스

새 앱을 만들 때 온보딩 프로세스를 통해 AI가 더 정확한 앱을 생성할 수 있습니다.

4.1 Step 1: 앱 유형 선택 (`/onboarding/step1-app-type`)

만들고 싶은 앱의 카테고리를 선택합니다.

앱 유형 예시

카테고리	설명	예시
쇼핑몰	상품 판매 앱	의류 쇼핑몰, 식품 스토어
포트폴리오	개인/회사 소개	디자이너 포트폴리오, 회사 소개
랜딩 페이지	단일 페이지	이벤트 페이지, 서비스 소개
유틸리티	기능 중심 앱	계산기, 할 일 목록
커뮤니티	소셜 기능	게시판, 커뮤니티
기타	자유 형식	직접 설명

4.2 Step 2: 기능 선택 (`/onboarding/step2-features`)

앱에 포함할 기능들을 선택합니다.

선택 가능한 기능 예시

✅ 사용자 인증 (로그인/회원가입)
✅ 상품 목록
✅ 장바구니
✅ 검색 기능
✅ 필터/정렬
✅ 이미지 갤러리
✅ 문의 폼
✅ 지도 연동
✅ SNS 공유

4.3 Step 3: 프로젝트 정보 (`/onboarding/step3-project-info`)

앱의 기본 정보를 입력합니다.

항목	설명	예시
앱 이름	앱의 이름	"내 쇼핑몰"
앱 설명	앱에 대한 상세 설명	"패션 의류를 판매하는 쇼핑몰입니다"
색상 테마	원하는 색상	"파란색 계열"

4.4 생성 중 (`/onboarding/generating`)

온보딩 정보를 바탕으로 AI가 초기 앱을 생성합니다.

🤖 AI가 앱을 생성하고 있습니다...
진행률 표시
현재 작업 내용 표시

생성이 완료되면 자동으로 채팅 페이지로 이동합니다.

5. AI 채팅으로 앱 만들기

5.1 채팅 페이지 (`/appmon/chat/[id]`)

채팅 페이지는 앱 제작의 핵심 공간입니다.

화면 구성

왼쪽: 💬 채팅 영역

AI 메시지와 사용자 메시지가 표시됩니다
하단 입력창에서 메시지를 입력합니다
📎 버튼으로 파일을 첨부할 수 있습니다

오른쪽: 👁️ 미리보기 영역

생성된 앱의 실시간 미리보기
모바일/태블릿/데스크톱 모드 전환

5.2 AI 에이전트 시스템

AppMonster는 여러 전문 AI 에이전트가 협력하여 앱을 제작합니다.

에이전트 유형

에이전트	역할	상태 표시
📋 기획자	요구사항 분석	"요구사항을 분석하고 있습니다..."
🎨 디자이너	UI/UX 디자인	"디자인을 설계하고 있습니다..."
💻 개발자	코드 생성	"코드를 작성하고 있습니다..."
🔍 리뷰어	코드 검토	"코드를 검토하고 있습니다..."

스트리밍 진행 상황

AI가 작업할 때 실시간으로 진행 상황을 확인할 수 있습니다:

🤖 AI가 작업 중입니다...
📋 현재 에이전트: 기획자 (Planner)
📊 진행률: 45%
💬 "사용자의 요구사항을 분석하고 있습니다..."

5.3 효과적인 프롬프트 작성법

좋은 프롬프트 예시

❌ 안 좋은 예:

쇼핑몰 만들어줘

✅ 좋은 예:

패션 의류 쇼핑몰을 만들어주세요.
- 메인 페이지에 배너 슬라이더
- 상품은 그리드 형태로 표시
- 카테고리: 상의, 하의, 아우터
- 색상: 블랙 & 화이트 미니멀

수정 요청 예시

"버튼 색상을 파란색으로 바꿔줘"
"헤더를 고정해줘"
"모바일에서 1열로 표시되게 해줘"
"이미지 슬라이더 추가해줘"

5.4 사용자 선택 (User Choice)

AI가 작업 중 사용자의 선택이 필요한 경우가 있습니다.

플랜 리뷰 카드

AI가 제안하는 작업 계획을 검토하고 승인/거절할 수 있습니다:

📋 AI가 제안한 작업 계획:

메인 페이지 레이아웃 수정
헤더에 네비게이션 추가
상품 카드 디자인 변경

[✅ 승인하기] [❌ 다시 제안받기]

5.5 제안 메뉴 (Suggestions)

빠른 수정을 위한 제안 메뉴를 사용할 수 있습니다:

일반 제안:

색상 변경
레이아웃 수정
컴포넌트 추가

창의적 제안:

전체적인 디자인 개선
새로운 기능 추가
스타일 변경

6. 파일 업로드 기능

6.1 지원 파일 형식

이미지 파일

확장자	MIME 타입	설명
`.jpg`, `.jpeg`	image/jpeg	사진, 이미지
`.png`	image/png	투명 배경 이미지
`.gif`	image/gif	애니메이션 이미지
`.webp`	image/webp	최신 웹 이미지 포맷
`.svg`	image/svg+xml	벡터 이미지

문서 파일

확장자	MIME 타입	설명
`.pdf`	application/pdf	PDF 문서
`.docx`, `.doc`	application/vnd...	Word 문서
`.xlsx`, `.xls`	application/vnd...	Excel 스프레드시트
`.pptx`, `.ppt`	application/vnd...	PowerPoint
`.txt`	text/plain	텍스트 파일
`.csv`	text/csv	CSV 데이터

파일 제한

최대 파일 크기: 10MB

6.2 업로드 방법

📎 클릭 업로드

채팅 입력창 왼쪽 📎 버튼 클릭
파일 선택
업로드 완료 후 메시지와 함께 전송

🖱️ 드래그 앤 드롭

파일을 채팅 영역으로 드래그
"파일을 놓아주세요" 오버레이 표시
파일을 놓으면 자동 업로드

지원 형식 안내:

이미지: JPG, PNG, GIF, WebP, SVG
문서: PDF, DOCX, XLSX, PPTX, TXT, CSV

6.3 파일 활용 예시

"이 이미지처럼 디자인해줘"
[첨부: reference-design.png]

"이 로고를 헤더에 넣어줘"
[첨부: company-logo.svg]

"이 엑셀 파일의 상품 목록을 앱에 표시해줘"
[첨부: products.xlsx]

7. 미리보기 & 배포

7.1 실시간 미리보기

채팅 페이지 오른쪽에서 생성된 앱을 실시간으로 확인할 수 있습니다.

디바이스 모드

모드	아이콘	화면 크기
모바일	📱	375px 너비
태블릿	📲	768px 너비
데스크톱	🖥️	전체 너비

미리보기 컨트롤

[🔄 새로고침] - 미리보기 갱신
[📋 URL 복사] - 미리보기 URL 복사
[🔗 새 창 열기] - 별도 창에서 확인

7.2 웹 앱 배포

앱 생성이 완료되면 자동으로 웹 URL이 제공됩니다.

배포된 앱 특징

✅ 즉시 접속 가능한 고유 URL
✅ HTTPS 보안 적용
✅ 모바일 반응형 지원
✅ 전 세계 어디서나 접속 가능

8. 마이페이지

8.1 대시보드 (`/mypage`)

마이페이지에서 앱 관리 및 토큰 현황을 확인할 수 있습니다.

📊 통계:

내 앱 수
보유 토큰
채팅방 수

📱 내 앱 목록:

앱 이름 및 상태 (배포됨/생성 중)
미리보기 및 채팅 바로가기

💎 토큰 사용 내역:

날짜별 사용 기록
작업 종류 및 소비 토큰

기타:

💳 토큰 충전하기
🚪 로그아웃

8.2 내 앱 관리 (`/mypage/app/[id]`)

각 앱의 상세 정보를 확인하고 관리할 수 있습니다.

앱 관리 기능

기능	설명
채팅 이어하기	앱 수정을 위해 채팅방으로 이동
미리보기	배포된 앱 확인
URL 복사	배포 URL 복사
앱 삭제	앱 영구 삭제

9. 결제 시스템

9.1 토큰 시스템

AppMonster는 토큰 기반 요금제를 사용합니다.

토큰 패키지 (`/payment/token`)

패키지	토큰	가격	토큰당 가격
무료	10,000	0원	-
스타터	50,000	12,900원	0.26원
베이직	100,000	19,900원	0.20원
프로	300,000	59,900원	0.20원

토큰 소비 기준

작업	예상 소비 토큰
새 앱 생성 (온보딩)	약 1,000~3,000
앱 수정 요청	약 500~1,500
AI 스트리밍 응답	사용량에 따라 변동

9.2 결제 방법

지원 결제 수단 (토스페이먼츠)

💳 신용카드/체크카드

VISA
MasterCard
국내 전 카드사

📱 간편결제

네이버페이
카카오페이
토스

결제 흐름

/payment/token에서 패키지 선택
토스페이먼츠 결제창 열림
결제 완료
/payment/callback/token/success로 리다이렉트
토큰 자동 충전

9.3 결제 관련 페이지

페이지	경로	설명
토큰 구매	`/payment/token`	토큰 패키지 선택
결제 성공	`/payment/callback/token/success`	결제 완료 처리
결제 실패	`/payment/callback/token/fail`	결제 실패 안내
구독 관리	`/payment/subscribe`	구독 상품 관리

10. 자주 묻는 질문

앱 제작 관련

Q: 코딩을 전혀 몰라도 앱을 만들 수 있나요?

A: 네, 가능합니다! AppMonster는 채팅형 인터페이스로 코딩 지식 없이 웹 앱을 만들 수 있습니다. AI가 요구사항을 이해하고 자동으로 코드를 생성합니다.

Q: 만든 앱을 수정할 수 있나요?

A: 물론입니다. 채팅방에서 "버튼 색상 바꿔줘", "메뉴 추가해줘" 등 자연어로 수정을 요청하면 AI가 반영합니다.

Q: 앱은 어떻게 배포되나요?

A: 앱 생성이 완료되면 고유한 웹 URL이 자동으로 제공됩니다. 이 URL을 공유하면 누구나 앱에 접속할 수 있습니다.

Q: 어떤 파일을 업로드할 수 있나요?

A: 이미지(JPG, PNG, GIF, WebP, SVG)와 문서(PDF, DOCX, XLSX, PPTX, TXT, CSV) 파일을 업로드할 수 있습니다. 최대 파일 크기는 10MB입니다.

Q: 앱을 여러 개 만들 수 있나요?

A: 네, 토큰이 있으면 제한 없이 앱을 만들 수 있습니다. 마이페이지에서 모든 앱을 관리할 수 있습니다.

결제 관련

Q: 무료 체험이 있나요?

A: 네, 회원가입 시 10,000 토큰이 무료로 제공됩니다.

Q: 환불 정책은 어떻게 되나요?

A: 토큰 구매 후 미사용 토큰에 한해 7일 이내 100% 환불 가능합니다.

Q: 토큰은 만료되나요?

A: 구매한 토큰은 만료되지 않습니다.

기술 관련

Q: 어떤 브라우저를 지원하나요?

A: Chrome, Firefox, Safari, Edge 등 최신 브라우저를 지원합니다.

Q: 모바일에서도 앱을 만들 수 있나요?

A: 앱 제작은 PC/태블릿에서 권장됩니다. 모바일 접속 시 PC 사용을 권장하는 안내가 표시됩니다.

📚 용어 사전

용어	설명
노코드(No-Code)	코딩 없이 앱을 만드는 방식
토큰	서비스 이용권. AI 기능 사용 시 차감
온보딩	앱 생성 전 정보를 수집하는 단계
스트리밍	AI 응답을 실시간으로 받는 방식
프롬프트	AI에게 전달하는 명령/요청
에이전트	특정 역할을 수행하는 AI
배포	앱을 인터넷에 공개하는 것

📞 고객 지원

문의 채널

채널	연락처	응답 시간
이메일	peterparker@picometer.me	1영업일 이내

서비스 운영 시간

서비스: 24시간 365일 운영
고객 지원: 평일 09:00-18:00 (KST)

AppMonster 앱 빌더로 아이디어를 현실로 만드세요!