빠른 시작: 첫 앱 만들기
핵심 요약무료 계정을 만들고, 프로젝트 페이지의 입력란에 앱이 할 일을 적은 뒤 만들기를 누르세요. MonstarX가 기능을 계획하고, 앱을 작성하고, 보통 몇 분 안에 미리보기에서 실행해 보여 줍니다. 앱을 써 보고, 대화에서 수정을 요청한 다음, 게시를 클릭하면 your-app.monstarx.app 주소로 온라인에 공개됩니다.
몇 분 뒤면 페이지, 데이터베이스, 로그인을 갖춘 진짜 웹 앱을 만들어 인터넷에 공개하게 됩니다. 코드는 한 줄도 쓸 필요가 없습니다. 한두 문장으로 설명할 수 있는 아이디어만 있으면 됩니다.
이 가이드에서는 요가 스튜디오 예약 사이트를 예로 만들어 봅니다. 생각해 둔 아이디어가 있다면 그것으로 따라 해도 됩니다.
시작하기 전에
섹션 제목: “시작하기 전에”- 최신 브라우저(Chrome, Safari, Edge, Firefox)가 있는 컴퓨터나 휴대폰
- 10분 정도의 시간
1단계: 무료 계정 만들기
섹션 제목: “1단계: 무료 계정 만들기”-
monstarx.com에 접속해 만들기 시작을 클릭하세요. 이미 계정이 있다면 로그인을 클릭하세요.
-
이메일 주소로 계정을 만드세요. Google이나 GitHub 로그인이 보이면 그것으로 만들어도 됩니다. Free 요금제는 신용카드가 필요 없습니다.
MonstarX 계정은 내가 만드는 앱과는 별개입니다. 앱마다 그 앱 사용자를 위한 로그인이 따로 있습니다.
2단계: 앱 설명하기
섹션 제목: “2단계: 앱 설명하기”로그인하면 MonstarX의 홈인 프로젝트 페이지가 열립니다. 맨 위의 큰 입력란에 다음에는 무엇을 만들까요?라고 적혀 있습니다.
-
입력란을 클릭하고 앱을 쉬운 말로 설명하세요. 누구를 위한 앱인지, 사람들이 그 앱에서 무엇을 할 수 있어야 하는지 적으면 됩니다.
우리 요가 스튜디오 예약 사이트를 만들어 주세요. 주간 수업 시간표, 수업별 정원 제한, 회원 로그인이 있고, 예약하면 확인 이메일이 가야 합니다.
-
만들기를 누르거나 Enter 키를 누르세요. (줄을 바꾸려면 Shift Enter를 누르세요.)
무엇을 써야 할지 모르겠다면 입력란 아래의 아이디어(고객 포털, 예약 사이트, 내부 도구, AI 도우미, 마켓플레이스 앱) 중 하나를 클릭하세요. 입력란이 채워지면 내 상황에 맞게 고치면 됩니다. 입력을 멈추면 AI로 요청 자동 개선이 대략적인 아이디어를 자세한 요청으로 바꿔 주겠다고 제안합니다. AI로 요청 자동 개선을 참고하세요.
지금은 그냥 두어도 되는 옵션
섹션 제목: “지금은 그냥 두어도 되는 옵션”입력란 아래에 스위치가 몇 개 있습니다. 첫 앱을 만들 때는 하나도 필요 없습니다.
| 옵션 | 하는 일 |
|---|---|
| 먼저 계획 | 만들기 전에 MonstarX가 몇 가지를 묻습니다. 누가 앱을 쓰는지, 앱 이름, 디자인 같은 것들입니다. 먼저 계획을 참고하세요. |
| 먼저 디자인 | 완성품처럼 보이는 첫 화면 몇 가지를 보여 줍니다. 고른 화면이 앱 전체의 디자인을 정합니다. 먼저 디자인을 참고하세요. |
| 자동(모델) | 요청마다 가장 알맞은 AI 모델을 고릅니다. 모델 선택하기를 참고하세요. |
| 클립 아이콘 | 스크린샷, 시안, 문서, 스프레드시트를 첨부합니다. 파일 첨부를 참고하세요. |
| 가져오기 | GitHub, Lovable, .zip 파일, 공개 웹사이트에서 이미 가진 앱을 가져옵니다. 앱 가져오기를 참고하세요. |
| Figma | Figma 디자인을 작동하는 앱으로 바꿉니다. Figma로 시작하기를 참고하세요. |
| 내 에이전트 | Claude Code, Codex, Cursor에서 만든 앱을 MonstarX로 보냅니다. 내 코딩 에이전트로 시작하기를 참고하세요. |
3단계: 만들어지는 과정 지켜보기
섹션 제목: “3단계: 만들어지는 과정 지켜보기”MonstarX가 프로젝트를 만들고 엽니다. 이제부터 작업은 브라우저가 아니라 MonstarX 클라우드에서 진행됩니다.
화면에서 보이는 것은 다음과 같습니다.
- 대화 맨 위에 내 요청이 있고, 그 아래에 MonstarX가 지금 하는 일이 표시됩니다. “추론 중…”, “기능을 계획하는 중…”, “코드 작성 중…” 같은 문구입니다.
- 기능 계획: “주간 수업 시간표”, “회원 로그인과 회원가입”처럼 무엇을 만들지 정리한 짧은 체크리스트입니다. 하나씩 만들 때마다 체크 표시가 됩니다. 대화 맨 위의 기능 막대에서 몇 개가 완성되었는지 볼 수 있습니다.
- 오른쪽의 미리보기. 보여 줄 것이 생기기 전까지는 타이머와 함께 앱을 만드는 중… 카드가 나오고, 그 아래에 기다리는 동안 즐길 수 있는 작은 게임 Monstar Run이 있습니다(스페이스바를 누르면 점프합니다).
첫 빌드는 보통 몇 분 걸립니다. 앱이 클수록 더 오래 걸립니다.
4단계: 앱 써 보기
섹션 제목: “4단계: 앱 써 보기”빌드가 끝나면 미리보기에 앱이 나타납니다. 실제로 실행 중인 진짜 앱입니다. 방문자처럼 이곳저곳 클릭해 보고, 양식을 채우고, 회원가입도 해 보세요.
대화에서 다음 항목을 찾아보세요.
- 데모 계정 준비됨: 앱에 로그인 기능이 있으면 MonstarX가 바로 로그인해 볼 수 있도록 이메일과 비밀번호를 만들어 둡니다. 옆의 버튼으로 복사하세요.
- 계획한 기능을 모두 만들었습니다: 지금 앱이 무엇을 하는지 짧게 요약합니다.
- 다음에 해 볼 만한 것: 다음에 넣을 만한 기능을 제안합니다. 추가를 클릭하면 계획에 들어가고(전부 넣으려면 모두 추가 버튼을 누르세요. 버튼에 개수가 함께 표시됩니다), 그다음 만들기를 누르면 됩니다. 꼭 할 필요는 없습니다.
MonstarX는 만든 내용을 바탕으로 프로젝트에 짧은 이름과 설명도 붙여 줍니다. 맨 위의 이름을 클릭하면 언제든 바꿀 수 있습니다.
5단계: 요청으로 무엇이든 바꾸기
섹션 제목: “5단계: 요청으로 무엇이든 바꾸기”같은 대화에서 계속 이어 가세요. 바꿀 내용을 쉬운 말로 입력하고 보내기를 누르면 됩니다.
처음 해 보기 좋은 수정 요청은 다음과 같습니다.
- “헤더를 진한 초록색으로 바꾸고, 제목에는 세리프 글꼴을 써 주세요.”
- “강사 소개 페이지를 추가해 주세요. 강사마다 사진과 짧은 소개를 넣어 주세요.”
- “수업 정원이 차면 예약 버튼 대신 대기자 등록 버튼을 보여 주세요.”
설명하기보다 직접 가리키고 싶다면 미리보기 위의 편집을 클릭하고, 바꾸고 싶은 부분을 클릭한 다음, 그곳을 어떻게 바꿀지 말하세요. 편집 모드를 참고하세요.
변경 사항은 모두 버전으로 저장됩니다. 마음에 들지 않는 변경이 있으면 맨 위의 버전을 열고 바로 전 버전을 복원하세요. 버전을 참고하세요.
6단계: 게시하기
섹션 제목: “6단계: 게시하기”마음에 들면 앱을 인터넷에 공개하세요.
-
프로젝트 오른쪽 위의 게시를 클릭하세요.
-
사이트 게시를 클릭하세요. 메뉴에 사이트 준비 중, 사이트 빌드 중, 사이트를 온라인에 올리는 중 순서로 진행 상황이 표시되며, 진행되는 동안 메뉴를 닫아도 됩니다.
-
사이트 방문을 클릭해 사이트를 열거나, 링크 복사를 클릭해 공유하세요.
이제 앱이 프로젝트 이름으로 만든 고유 주소(예: yoga-studio-booking.monstarx.app)에 HTTPS로 공개되었습니다. 나중에 앱을 고치면 게시를 누르고 다시 게시를 클릭해 공개된 사이트를 업데이트하세요. 방문자는 만들다 만 변경 사항을 절대 보지 않습니다. 앱 게시하기를 참고하세요.
sagebrookyoga.com 같은 내 도메인을 쓰고 싶나요? 몇 번의 클릭으로 도메인을 구매하거나 이미 가진 도메인을 연결할 수 있습니다.
다음 단계
섹션 제목: “다음 단계”- 제대로 테스트하세요. MonstarX가 실제 브라우저에서 앱을 테스트하고 실패한 부분을 고칩니다. QA 테스트를 참고하세요.
- 데이터를 확인하세요. 관리자 탭에서 가입한 사람과 모든 예약을 알기 쉬운 양식으로 볼 수 있습니다. 관리자 패널을 참고하세요.
- 요청으로 더 좋은 결과를 얻으세요. 요청 작성 팁을 참고하세요.
- 화면 구성을 익히세요. 작업 공간 둘러보기를 참고하세요.
자주 묻는 질문
섹션 제목: “자주 묻는 질문”첫 빌드는 얼마나 걸리나요?
보통 몇 분 걸립니다. 기능이 많은 큰 앱은 더 오래 걸립니다. 빌드가 진행되는 동안 탭을 닫아도 됩니다. 빌드는 MonstarX에서 계속 진행되며, 완료되면 알림을 받을 수 있습니다.
첫 요청에는 무엇을 써야 하나요?
누구를 위한 앱인지, 사람들이 그 앱에서 무엇을 할 수 있어야 하는지를 한두 문장, 많아야 세 문장으로 쓰세요. 나머지는 나중에 얼마든지 추가할 수 있습니다. 요청 작성 팁을 참고하세요.
첫 앱을 만드는 데 비용이 드나요?
Free 요금제에서는 들지 않습니다. 요청을 보낼 때마다 요금제의 사용량이 조금씩 차감되는데, Free 요금제의 사용량으로 작은 앱 하나를 만들고 게시하기에 충분합니다. 사용량과 한도를 참고하세요.
빌드를 멈출 수 있나요?
네. 프롬프트 입력란의 빨간색 중지 버튼을 클릭하세요. 그때까지 만든 내용은 그대로 남고, 새 요청으로 이어서 작업할 수 있습니다.
앱이 완성되면 바로 공개되나요?
아니요. 게시를 클릭하기 전까지는 고유 주소로 인터넷에 공개되지 않습니다. 나, 프로젝트를 공유한 사람, 미리보기 링크를 받은 사람만 볼 수 있습니다.
문제가 생기면 어떻게 해야 하나요?
보이는 상황을 대화에서 MonstarX에게 알려 주거나, 버전에서 이전 버전을 복원하세요. 문제 해결을 참고하세요.