AI로 모바일 앱을 만드는 방법

AI 빌더를 열기 전에, 기본 사항을 평이한 언어로 적어두세요.

짧게 정리하면 됩니다:

• 앱의 대상 사용자
• 가장 중요한 단일 작업
• 처음에 필요한 3개에서 5개의 화면
• 각 화면이 보여주거나 수집하는 데이터
• 사용자가 계정을 만들어야 하는지 여부
• 결제가 필요한지 여부

간단한 습관 추적기 예시:

• 사용자: 매일 습관을 관리하는 사람들
• 주요 작업: 매일 습관 완료 표시하기
• 화면: 홈, 습관 상세, 습관 추가, 프로필
• 데이터: 습관 이름, 목표 빈도, 완료 기록
• 계정: 예, 진행 상황을 기기 간 동기화하려면 필요
• 결제: 아니요, 유료 요금제를 계획하지 않는다면 불필요

이 단계가 중요한 이유는 AI가 "피트니스 앱 만들어줘" 같은 넓은 아이디어보다 제약이 있는 입력에서 더 잘 작동하기 때문입니다.

Moremade에서는 자연어로 앱을 설명하면 AI 에이전트가 소스 코드를 작성합니다. 모바일 앱은 Expo를 사용하는 React Native 앱으로 만들어집니다.

첫 프롬프트에는 다음을 포함하세요:

• 앱의 목적
• 대상 사용자
• 필요한 화면
• 각 화면의 핵심 동작
• 시각적 스타일
• 아직 넣지 않을 항목

첫 버전은 좁게 잡으세요. 완성본이 아니라, 사용할 수 있는 초안을 요청하는 것이 좋습니다.

iPhone과 Android용으로 Habit Day라는 모바일 앱을 만들어 주세요. 사용자가 일일 습관을 추적하는 앱입니다. Home, Habit Detail, Add Habit, Profile의 4개 화면을 만들어 주세요. Home에서는 오늘의 습관을 보여주고 눈에 잘 띄는 완료 버튼을 두세요. Habit Detail에서는 습관 이름, 목표 빈도, 메모, 최근 완료 기록을 보여주세요. Add Habit에서는 사용자가 이름을 입력하고 daily 또는 weekly 빈도를 선택한 뒤 저장할 수 있어야 합니다. 깔끔하고 단순한 레이아웃에 큰 터치 영역과 중립적인 색상을 사용하세요. 아직 결제, 소셜 기능, 알림은 추가하지 마세요.

이 정도의 구체성은 한 줄 요청보다 훨씬 좋은 첫 결과를 만드는 경우가 많습니다.

첫 빌드 후에는 라이브 미리보기를 사용해 사용자의 관점에서 앱을 확인하세요. 누락된 상태, 불명확한 라벨, 어색한 간격, 내비게이션 문제를 살펴보세요.

Moremade에서는 채팅으로 앱을 변경할 수 있고, 시각적 인스펙터와 코드 뷰도 포함되어 있습니다. 버튼 크기나 패딩처럼 특정 요소가 어긋났을 때는 시각적 인스펙터를 사용하세요. 변경이 여러 화면의 동작이나 레이아웃에 영향을 줄 때는 채팅을 사용하세요.

좋은 후속 프롬프트는 구체적입니다. 예를 들면:

• "Home 화면에서 add habit 버튼을 하단 고정 액션 버튼으로 옮기고, 완료된 습관이 미완료 습관 아래에 표시되게 해주세요."
• "Home에 습관이 아직 없을 때 무엇을 해야 하는지 설명하는 빈 상태를 추가하고, Add Habit을 여는 버튼을 넣어주세요."
• "Profile 화면을 더 단순하게 만들어서 아바타 플레이스홀더는 제거하고, 이름, 이메일, sign out 버튼만 보여주세요."

짧은 수정 주기가 가장 효과적입니다. 관련된 변경을 한 번에 적용하고, 다시 미리보기를 확인한 뒤 계속 진행하세요.

첫 앱 초안에 항상 백엔드가 필요한 것은 아닙니다. 앱이 단순한 프로토타입이거나 로컬 데모라면, 계정이나 결제를 추가하기 전에 흐름을 검증할 수 있습니다.

백엔드 기능이 필요할 때 Moremade에는 Supabase와 Stripe용 기본 연결 기능이 포함되어 있습니다.

다음이 필요하면 Supabase를 사용하세요:

• 사용자 sign-in
• 앱 데이터용 데이터베이스
• 파일 저장소

일반적인 사례로는 저장된 진행 상황이 있는 작업 앱, 사용자 계정이 있는 마켓플레이스, 데이터가 지속되어야 하는 내부 도구가 있습니다.

다음이 필요하면 Stripe를 사용하세요:

• 유료 구독
• 일회성 구매
• 직접 설정한 가격의 결제

사용자 여정에 실제 결제 단계가 없다면 Stripe를 추가하지 마세요.

실용적인 지시는 이런 식일 수 있습니다:

• "Supabase email sign-in을 추가하고 습관을 사용자별로 저장해서 각 사람이 자기 데이터만 보게 해주세요."
• "프리미엄 플랜용 Stripe checkout 화면을 추가하되, 무료 버전은 결제 없이도 사용할 수 있게 유지해 주세요."

이 요소들은 핵심 화면이 동작한 뒤에 추가하세요. 그렇지 않으면 제품 범위와 통합 세부사항을 동시에 디버깅하게 됩니다.

브라우저 크기 프레임에서는 괜찮아 보이는 모바일 앱도 실제 기기에서는 실패할 수 있습니다.

가능하다면 iPhone과 Android 모두에서 기본 사항을 확인하세요:

• 터치 영역 크기
• 작은 화면에서의 텍스트 줄바꿈
• 키보드가 입력 필드를 가리는지 여부
• 긴 목록과 스크롤 동작
• 로딩 상태와 빈 상태
• 뒤로가기 내비게이션 동작

Moremade는 React Native와 Expo로 모바일 앱을 만들기 때문에, 단순한 목업이 아니라 실제 앱 코드베이스를 향해 작업하게 됩니다. 그래서 초기에 기기 테스트를 해보는 가치가 있습니다.

테스트하면서 수정 사항은 구체적으로 적으세요:

• "Add Habit에서 키보드가 열리면 save 버튼이 숨겨집니다. 버튼이 키보드 위에 계속 보이도록 해주세요."
• "Habit Detail 화면에서 notes 필드와 completion history 목록 사이 간격을 더 넓혀 주세요."
• "Android에서는 헤더 제목을 더 짧게 하고 두 줄로 줄바꿈되지 않게 해주세요."

이 시점에서 앱이 본격적으로 안정적으로 느껴지기 시작하는 경우가 많습니다.

공유할 만한 버전이 준비되면 Moremade에서 배포할 수 있습니다.

Moremade가 제공하는 기능:

• 무료 yourname.moremade.ai 서브도메인에 원클릭 배포
• 유료 플랜에서 커스텀 도메인 연결
• Moremade 안에서 도메인 구매
• 언제든지 전체 소스 코드를 ZIP으로 내보내기
• 소스 코드를 GitHub로 push

내부 검토나 초기 피드백에는 무료 서브도메인만으로도 충분한 경우가 많습니다. 앱이 고객 프로젝트의 일부이거나 공개 출시를 앞두고 있다면 유료 플랜을 사용하고 커스텀 도메인을 연결하세요.

버전 기록은 Standard와 Pro 플랜에서 사용할 수 있으며, 여러 차례 수정이 시작되면 특히 유용합니다.

Moremade에서 배포하더라도 거기에 묶이지 않습니다. 소스는 ZIP으로 내보내거나 GitHub로 push할 수 있습니다.

대부분의 문제는 도구 자체보다 범위와 모호한 지시에서 발생합니다.

다음 실수를 조심하세요:

• 첫 프롬프트에서 너무 많은 것을 요구하기
• 프로토타입 목표와 프로덕션 요구사항을 섞기
• 핵심 흐름이 동작하기 전에 sign-in과 결제를 추가하기
• "더 좋게 해주세요"처럼 문제를 특정하지 않는 피드백을 주기
• 실제 휴대폰에서 테스트하지 않기
• 빈 목록, 잘못된 폼 입력, 느린 로딩 상태 같은 엣지 케이스를 잊기

더 나은 프로세스는 다음과 같습니다:

1. 가장 작은 유용한 버전부터 만들기
2. 미리보기를 꼼꼼히 검토하기
3. 구체적인 프롬프트로 다듬기
4. 정당한 이유가 있을 때만 데이터나 결제를 추가하기
5. 방향이 안정되면 코드를 내보내기

이 방식은 앱을 이해하기 쉽게 유지하고 재작업을 줄여줍니다.