AI로 습관 추적 앱을 만드는 방법

프롬프트를 쓰기 전에, 가장 작은 유용한 버전을 정의하세요.

습관 추적 앱이라면 보통 다음이 필요합니다.

• 오늘의 습관을 보여주는 홈 화면
• 습관을 완료 또는 건너뜀으로 표시하는 기능
• 습관을 만들거나 수정하는 화면
• 연속 달성(streak)이나 주간 완료율 같은 간단한 진행 상황 보기
• 기본 설정

그다음 각 습관에 어떤 데이터가 필요한지도 정하세요. 단순하게 유지하세요.

실용적인 시작 모델 예시는 다음과 같습니다.

• 습관 이름
• 색상 또는 아이콘
• 빈도: 매일, 평일, 사용자 지정 요일
• 목표: 하루 1회, 여러 번, 분, 물 잔 수, 횟수
• 현재 연속 달성 수
• 완료 기록

또한 이 앱이 다음 중 무엇인지도 정하세요.

• 개인용 단일 사용자 프로토타입
• 로그인과 저장된 데이터가 있는 앱
• 구독이 있는 유료 앱

아이디어를 먼저 검증하고 싶다면, 계정이나 결제 없이 시작하세요. 그러면 첫 빌드가 더 작고 검토하기 쉬워집니다.

Moremade에서는 평범한 언어로 앱을 설명하면 AI 에이전트가 소스 코드를 작성합니다. 웹사이트의 경우 React와 Tailwind를 생성하고, 모바일 앱의 경우 React Native와 Expo를 생성합니다.

습관 추적 앱의 첫 프롬프트에는 다음이 포함되어야 합니다.

• 플랫폼: 웹 앱 또는 모바일 앱
• 핵심 화면
• 주요 동작
• 시각적 스타일
• 데이터가 당장은 로컬이어도 되는지, 아니면 백엔드가 필요한지

첫 프롬프트 예시:

React Native와 Expo를 사용해 모바일 습관 추적 앱을 만들어 주세요. 오늘의 습관을 카드로 보여주는 홈 화면이 있고, 완료 표시를 위해 체크박스 또는 탭 가능한 영역을 두는 깔끔하고 단순한 인터페이스를 원합니다. 습관 생성 화면과 습관 수정 화면을 추가해 주세요. 각 습관은 이름, 아이콘, 색상, 빈도, 하루 목표 횟수를 지원해야 합니다. 현재 연속 달성과 최근 7일 완료 현황이 포함된 진행 상황 보기도 추가해 주세요. 지금은 로그인 없이 로컬 샘플 데이터만 사용해 주세요. 차분하고 미니멀한 스타일에 여백을 충분히 두고, 터치 대상은 크게 만들어 주세요.

이 정도면 모든 픽셀을 지나치게 지정하지 않고도 첫 동작 구조를 만들기에 충분합니다.

첫 생성이 끝나면 라이브 미리보기에서 앱을 점검하세요. 한 번의 거대한 후속 요청으로 모든 문제를 고치려 하지 마세요. 화면별로 작업하는 것이 좋습니다.

확인할 항목은 다음과 같습니다.

• 주요 흐름이 완성되어 있는지
• 습관 카드가 한눈에 잘 들어오는지
• 모바일 터치 대상이 충분히 큰지
• 진행 정보가 이해하기 쉬운지
• 라벨이 사용자가 습관을 생각하는 방식과 맞는지

좋은 후속 프롬프트는 구체적이고 범위가 좁습니다. 예:

• "홈 화면에서 습관을 Morning, Afternoon, Evening 섹션으로 나눠 주세요."
• "완료 동작을 각 습관 카드 오른쪽에 더 큰 원형 체크 버튼으로 바꾸고, 현재 연속 달성 수는 습관 이름 아래에 표시해 주세요."
• "간단한 7일 그리드와 이번 주 완료 비율이 있는 주간 진행 화면을 추가해 주세요."

Moremade에는 시각적 인스펙터와 코드 보기도 있어서, 어떤 요소를 바꿔야 하는지 정확히 알고 있을 때 도움이 됩니다. 더 큰 제품 변경에는 채팅을 사용하고, 특정 버튼, 카드, 간격 문제를 집어서 수정할 때는 인스펙터를 사용하세요.

습관 추적 앱은 여러 기기에서 진행 상황을 저장해야 하는 경우가 많습니다. 그런 필요가 있다면, 기본 인터페이스가 자연스러워진 뒤에 Supabase를 추가하세요.

여기서 관련된 기본 연결 도구는 Supabase입니다. 다음을 지원하기 때문입니다.

• 데이터베이스 테이블
• 로그인
• 나중에 아바타나 업로드를 추가할 경우 파일 저장소

권장 순서는 다음과 같습니다.

1. 먼저 로컬 데이터로 앱을 만듭니다.
2. 화면과 상호작용이 자연스러운지 확인합니다.
3. Supabase를 연결합니다.
4. Moremade에 로컬 샘플 데이터를 실제 습관 기록과 완료 기록으로 바꾸라고 요청합니다.
5. 사용자가 개인 데이터를 써야 한다면 로그인을 추가합니다.

많은 습관 추적 앱에서는 초기에 Stripe가 필요하지 않습니다. 구독 플랜이나 1회성 프리미엄 업그레이드처럼 실제로 유료 제품을 만들 때만 Stripe를 추가하세요. Moremade는 설정한 가격으로 Stripe 결제를 지원하지만, 첫 버전에는 불필요한 복잡성이 될 수 있습니다.

첫 데이터 모델은 단순하게 유지하세요.

• users
• habits
• habit_completions

이 정도면 보통 사용 가능한 MVP를 만들기에 충분합니다.

미리보기에서 보기 좋아도, 습관 추적 앱은 짧고 반복적인 순간에 사용됩니다. 테스트는 속도와 명확성에 집중해야 합니다.

다음 실용적인 항목을 확인하세요.

• 한 번의 탭으로 습관을 완료 처리할 수 있는가?
• 습관 추가 흐름이 충분히 짧은가?
• 연속 달성과 기록을 찾아 헤매지 않고 읽을 수 있는가?
• 휴대폰에서 버튼을 누르기 쉬운가?
• 습관이 많아져도 앱이 여전히 이해되는가?

Expo로 모바일 앱을 만든다면 여백, 스크롤 동작, 입력 폼에 특히 주의하세요. 웹사이트를 만든다면 좁은 모바일 폭에서 테스트하고, 레이아웃이 엄지 손가락 사용에 여전히 적합한지 확인하세요.

이 단계에서 유용한 다듬기 프롬프트 예:

• "새 습관을 만드는 데 필요한 탭 수를 줄여 주세요."
• "작은 휴대폰 폭에서도 더 넓은 여백과 고정 하단 내비게이션으로 홈 화면이 더 잘 작동하게 해 주세요."
• "오늘 완료 개수를 상단에 표시하고, 완료된 습관은 시각적으로 흐리게 처리해 주세요."

이 테스트 단계에서는 시각적 마감보다 제품 문제를 더 일찍 발견하는 경우가 많습니다.

앱이 사용할 수 있을 정도가 되면 배포하세요. Moremade는 yourname.moremade.ai 무료 서브도메인으로 한 번에 배포할 수 있습니다. 이는 데모, 사용자 테스트, 협업자와의 공유에 좋은 기본값입니다.

브랜딩된 주소가 필요하다면, 유료 플랜에서 커스텀 도메인을 지원합니다. 도메인은 Moremade 안에서 구매할 수도 있습니다.

배포 전에 짧은 릴리스 점검을 하세요.

• 자리표시자 텍스트와 가짜 라벨을 제거했는지
• 핵심 버튼이 모두 동작하는지
• Supabase 연결이 올바른 프로젝트를 가리키는지
• 로그인/로그아웃을 켰다면 제대로 동작하는지
• 앱 제목과 기본 메타데이터가 맞는지

Moremade는 전체 소스 코드를 ZIP으로 내보내거나 GitHub로 푸시할 수 있으므로, 배포가 곧 종속을 의미하는 것은 아닙니다. Moremade 안에서 계속 다듬거나, 나중에 코드를 다른 곳으로 옮길 수도 있습니다.

대부분의 문제는 기술적인 것보다, 너무 일찍 너무 많은 것을 만들 때 생깁니다.

다음 실수는 피하세요.

• 계정, 결제, 알림, 소셜 기능, 분석을 한 번에 시작하는 것. 먼저 습관 생성과 완료 기능을 만드세요.
• 모호한 프롬프트를 쓰는 것. "습관 추적 앱을 만들어 주세요"는 너무 넓습니다. 화면, 동작, 데이터 필드를 명시하세요.
• 한 프롬프트에서 너무 많은 것을 바꾸는 것. 작은 요청이 더 명확한 결과를 만들고 검증도 쉽습니다.
• 습관이 3개뿐인 이상적인 사용자만을 위한 디자인을 하는 것. 10개 또는 20개 습관이 있을 때를 확인하세요.
• 내보내기를 건너뛰는 것. 안정적인 버전에 도달하면 ZIP을 다운로드하거나 GitHub로 푸시하세요.
• 버전 기록을 무시하는 것. 큰 변경을 하기 전에 의미 있는 체크포인트를 저장하세요.

좋은 첫 릴리스는 사용자가 습관을 추가하고, 완료하고, 최근 진행 상황을 설명 없이 이해할 수 있는 버전입니다.