앱 만들기는 세 단계로 생각하면 쉽습니다. 먼저 웹앱으로 만들지 앱스토어용 네이티브 앱으로 만들지 정하고, 누가 무엇을 하는 앱인지 한 장으로 정리한 뒤, 직접 코딩, 노코드, AI 중 개발 방법을 고릅니다. 이 글은 AI로 웹앱을 만드는 경우를 중심으로 설명합니다. VibeDream은 웹앱과 브라우저 게임을 만들며, 앱스토어나 구글 플레이에 올리는 네이티브 앱은 만들지 않습니다.
웹앱과 네이티브 앱의 차이
- 웹앱: 링크로 열리고 휴대폰과 컴퓨터 브라우저에서 모두 작동합니다. 스토어 심사가 없고 설치도 필요 없습니다.
- 네이티브 앱: 앱스토어나 구글 플레이에서 설치합니다. 기기 기능을 더 많이 쓸 수 있지만 개발자 계정, 심사, 기기별 개발이 필요해 준비가 훨씬 많습니다.
예약, 신청서, 모임 관리, 팀 내부 도구처럼 대부분의 첫 앱은 웹앱으로 충분합니다.
앱 개발 방법 세 가지
- 직접 코딩: 가장 자유롭지만 프로그래밍을 배우는 데 오랜 시간이 걸립니다.
- 노코드 도구: 블록을 끌어다 놓아 만듭니다. 빠르게 배우지만 도구가 제공하는 기능 안에서만 만들 수 있고 코드를 가져가기 어렵습니다.
- AI 앱 빌더: 원하는 앱을 말로 설명하면 AI가 실제 코드를 작성합니다. 이런 방식을 바이브 코딩이라고 부릅니다.
시작 전에 정리할 다섯 가지
- 누가 쓰나요? 예: 동네 풋살 모임 회원 20명.
- 핵심 기능 하나는? 예: 매주 경기 참석 여부를 모으기.
- 어떤 화면이 필요한가요? 예: 이번 주 경기, 참석 체크, 회원 목록, 관리자 화면.
- 어떤 데이터를 저장하나요? 예: 이름, 연락처, 경기 날짜, 참석 여부.
- 규칙은? 예: 정원 12명, 넘으면 대기 명단으로.
AI로 앱 만드는 순서
VibeDream에서 New Project를 누르고 Direct Prompt를 고른 뒤 정리한 내용을 한 번에 적습니다. 화면은 현재 영어이지만 한국어로 요청할 수 있습니다.
동네 풋살 모임 참석 관리 웹앱을 만들어 주세요.
화면: 이번 주 경기(날짜, 장소, 참석 인원), 참석 체크(이름을 고르고 참석/불참), 회원 목록, 비밀번호로 보호된 관리자 화면(/admin)에서 경기 추가.
정원은 12명이고, 13번째부터는 대기 명단에 올려 주세요. 누가 불참으로 바꾸면 대기 1번을 자동으로 참석으로 올려 주세요.
모든 데이터를 저장하고, 휴대폰에서 먼저 보기 좋게 큰 버튼으로 만들어 주세요.
모든 문구는 한국어로 해 주세요.미리보기가 나오면 결과를 아는 경우로 테스트합니다. 13명이 참석을 누르면 1명이 대기 명단에 있어야 하고, 한 명이 불참으로 바꾸면 그 사람이 참석으로 올라가야 합니다. 틀리면 이 예시를 그대로 적어 고쳐 달라고 요청하세요. 한 번에 한 가지씩 고치는 것이 가장 확실합니다.
공개하고 링크로 공유하기
Put it online을 누르고 이름을 정하면 1~3분 뒤 futsal.vibedreams.ai 같은 주소에 HTTPS로 공개됩니다. 공개와 업데이트는 각각 5크레딧이며 호스팅은 포함입니다. 수정한 내용은 Update it을 눌렀을 때만 회원들에게 보이므로, 미리보기에서 마음껏 시험해도 됩니다. 앱 링크를 단체 채팅방에 공유하면 끝입니다.
코드는 Code 탭에서 볼 수 있고 ZIP으로 받거나 GitHub에 동기화할 수 있습니다. 로그인과 데이터 저장은 요청하면 AI가 앱 안에 만들어 주고, 채팅 아래의 Add login이나 Add database를 누르면 원터치로 설정됩니다. 원터치 결제 기능은 준비 중입니다. 웹사이트를 만드는 순서는 홈페이지 만들기, 영어로 된 자세한 가이드는 How to build an app에 있습니다. 요금은 월 49달러부터이며 요금 페이지에서 확인할 수 있습니다.