AI로 레시피 앱 만드는 방법

첫 버전은 작게 시작하세요. 레시피 앱은 여러 방향으로 확장될 수 있지만, 가장 빠른 길은 명확한 버전 1을 만드는 것입니다.

핵심 사용자 흐름을 정합니다:

• 레시피 둘러보기
• 이름이나 재료로 검색
• 식사 유형, 요리 종류, 준비 시간으로 필터링
• 레시피 상세 페이지 열기
• 계정이 필요하다면 즐겨찾기 저장

첫 빌드에서는 화면 목록을 정리합니다:

• 홈 또는 둘러보기 화면
• 레시피 목록 화면
• 레시피 상세 화면
• 저장한 레시피 화면, 필요할 경우
• 계정이 중요할 때만 간단한 프로필 또는 로그인 화면

그다음 각 레시피에 필요한 데이터를 정합니다:

• 제목
• 짧은 설명
• 이미지
• 준비 시간
• 조리 시간
• 인분
• 재료
• 조리 단계
• 채식, 빠른 요리, 글루텐프리 같은 태그

또한 이것이 웹사이트인지 모바일 앱인지도 정하세요. Moremade에서는 웹사이트를 React + Tailwind 코드로 만들고, 모바일 앱은 React Native with Expo로 만듭니다. 사람들이 주로 휴대폰으로 사용할 앱이라면 모바일 앱으로 시작하세요.

첫 프롬프트는 구조를 정하기 때문에 중요합니다. 화면, 데이터 필드, 동작을 구체적으로 적으세요. "레시피 앱 만들어줘"처럼 모호하게 시작하지 마세요.

좋은 프롬프트에는 다음이 포함됩니다:

• 플랫폼: 웹 또는 모바일
• 대상 사용자
• 필요한 화면
• 핵심 상호작용
• 샘플 콘텐츠
• 평이한 표현의 시각 스타일

다음은 좋은 시작 프롬프트 예시입니다:

홈 요리사용 React Native (Expo) 모바일 레시피 앱을 만들어 주세요. 추천 레시피와 카테고리가 있는 홈 화면, 식사 유형, 요리 종류, 준비 시간으로 검색과 필터를 제공하는 둘러보기 화면, 이미지, 재료, 단계별 조리법, 인분, 준비 시간, 조리 시간, 태그가 있는 레시피 상세 화면, 저장한 레시피 화면을 포함해 주세요. 12개의 레시피 샘플 데이터를 사용해 주세요. 큰 레시피 사진, 단순한 하단 내비게이션, 깔끔한 여백으로 읽기 쉽고 정돈된 스타일로 만들어 주세요. 검색과 필터가 샘플 데이터에서 작동해야 합니다.

이 정도면 프로젝트를 지나치게 복잡하게 만들지 않으면서도 구체적인 첫 초안을 생성하기에 충분합니다.

첫 빌드 후에는 라이브 미리보기를 열어 기본을 살펴보세요:

• 내비게이션이 자연스러운가
• 사용자가 레시피를 빠르게 찾을 수 있는가
• 요리 중에도 상세 페이지를 읽기 쉬운가
• 필터가 한눈에 보이는가
• 휴대폰 화면에서 텍스트가 충분히 큰가

한 번에 한 가지씩 바꾸는 짧은 후속 프롬프트를 사용하세요. 전체 디자인을 다시 요청하는 것보다 보통 더 잘 작동합니다.

유용한 예시 3개:

• "검색을 둘러보기 화면 맨 위로 옮기고, 필터는 가로 칩 행으로 유지해 주세요. 검색 플레이스홀더는 '레시피나 재료 검색'으로 바꿔 주세요."
• "레시피 상세 화면에 저장 버튼을 고정으로 추가하고, 재료와 조리법 섹션의 줄 간격을 넓혀 읽기 쉽게 만들어 주세요."
• "일반적인 샘플 요리를 더 현실적인 평일 저녁 식사로 바꾸고, 고단백, 채식, 30분 이내 같은 태그를 추가해 주세요."

Moremade에는 시각적 인스펙터도 있어서 요소를 가리키며 변경할 수 있고, 생성된 소스를 더 직접적으로 확인할 수 있는 코드 뷰도 있습니다. 이후 변경으로 앱이 더 나빠졌을 때 돌아갈 수 있도록 버전 기록도 제공됩니다.

많은 레시피 앱은 버전 1에서 사용자 계정이나 결제가 필요하지 않습니다. 백엔드 기능이 필요한 실제 이유가 없다면 정적 샘플 데이터로 시작하세요.

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

• 기기 간 저장 레시피를 위한 사용자 계정
• 사용자가 직접 만든 레시피용 데이터베이스
• 업로드한 레시피 사진을 위한 파일 저장소

다음 같은 기능에 비용을 받으려면 Stripe를 사용하세요:

• 프리미엄 식단 섹션
• 유료 레시피 팩
• 고급 기능용 구독

Moremade에는 Supabase와 Stripe용 기본 연결 기능이 포함되어 있습니다. 앱이 단순히 둘러보기, 검색, 레시피 상세 보기만 필요하다면 처음에는 둘 다 건너뛰세요. 사용자 흐름이 작동한 뒤 나중에 추가하면 됩니다.

실용적인 순서는 다음과 같습니다:

1. 샘플 레시피로 앱을 만든다
2. 화면과 상호작용을 확인한다
3. 사용자가 계정이나 저장 데이터를 필요로 하면 Supabase를 추가한다
4. 명확하게 구매할 유료 기능이 있을 때만 Stripe를 추가한다

이렇게 하면 첫 버전이 더 단순해지고 테스트도 쉬워집니다.

레시피 앱은 주방에서, 작은 화면에서, 종종 한 손으로 사용됩니다. 그에 맞게 테스트하세요.

다음 항목을 확인하세요:

• 레시피 제목이 어색하게 줄바꿈되지 않는가
• 재료 목록을 쉽게 훑어볼 수 있는가
• 조리 단계 사이 간격이 충분한가
• 필터 컨트롤을 엄지로 사용하기 쉬운가
• 사진이 적절한 크기로 로드되는가
• 저장한 레시피를 다시 쉽게 찾을 수 있는가

현실적인 길이의 콘텐츠로도 테스트하세요. 짧은 가짜 레시피는 괜찮아 보여도 실제 레시피에서는 레이아웃이 깨질 수 있습니다.

무언가 어색하다면, 막연한 불만 대신 구체적인 프롬프트를 보내세요. 예:

• "레시피 카드의 이미지 높이를 줄여서 한 화면에 더 많은 레시피가 보이게 해 주세요."
• "터치 입력을 위해 재료 체크박스를 더 크게 만들어 주세요."
• "제목 아래에 인분, 준비 시간, 조리 시간을 한 줄 요약으로 보여 주세요."

웹사이트를 만드는 경우에도 휴대폰 크기 뷰포트에서 테스트하세요. 많은 레시피 사이트는 모바일 브라우저에서 가장 많이 사용됩니다.

앱이 외부 테스트를 할 만큼 충분히 좋아지면 게시하세요.

Moremade에서는 한 번의 클릭으로 무료 yourname.moremade.ai 서브도메인에 게시할 수 있습니다. 유료 플랜에서는 커스텀 도메인을 연결할 수 있습니다. 도메인도 Moremade 안에서 구매할 수 있습니다.

초기 테스트에는 무료 서브도메인만으로도 충분한 경우가 많습니다. 도메인 비용을 지불하거나 세부를 다듬기 전에 피드백을 받고 싶을 때 유용합니다.

클라이언트나 팀과 작업한다면 전체 소스를 ZIP으로 내보내거나 GitHub에 푸시할 수도 있습니다. Moremade는 두 가지를 모두 지원합니다. 이렇게 하면 코드를 직접 보유할 수 있고 한 가지 호스팅 방식에 묶이지 않습니다.

현명한 출시 순서는 다음과 같습니다:

• 임시 서브도메인에 게시
• 소규모 사용자에게 테스트
• 레이아웃과 콘텐츠 문제 수정
• 프로젝트 가치가 있을 때 나중에 커스텀 도메인 연결

가장 큰 실수는 보통 코드가 아니라 범위와 프롬프트에서 발생합니다.

다음 사항을 주의하세요:

• 첫 빌드에서 너무 많은 것을 요구하기
• 꼭 필요한 기능과 나중에 넣을 아이디어를 섞기
• 핵심 레시피 흐름을 검증하기 전에 로그인부터 추가하기
• "더 좋게 만들어줘" 또는 "더 현대적으로 만들어줘" 같은 모호한 프롬프트 사용하기
• 긴 재료 목록과 실제 레시피 안내를 테스트하지 않기
• 모바일 가독성을 무시하기

다음과 같은 습관이 도움이 됩니다:

• 버전 1을 짧은 글머리표 목록으로 정의하기
• 실제 레시피와 비슷한 샘플 데이터 사용하기
• 한 번에 한 화면 또는 한 상호작용씩 다듬기
• 제품이 필요로 할 때만 백엔드 기능 추가하기
• 안정적인 마일스톤에 도달하면 코드를 내보내기

이 과정을 따르면 더 빨리 작동하는 레시피 앱을 만들고, 다음에 무엇을 만들지 더 깔끔하게 결정할 수 있습니다.