레시피 앱 만드는 법: 레시피, 인분 조절, 장보기 목록, 검색

레시피 앱은 좋은 검색, 보기 좋은 요리 페이지, 그리고 주방에서 쓸 수 있는 몇 가지 도구, 즉 인분 조절, 단위 변환, 레시피를 장보기 목록으로 바꾸는 기능을 갖춘 레시피 모음입니다. 가족 요리책이든, 레시피 카드를 붙인 음식 블로그든, 다른 사람에게 제공하는 레시피 제품이든, 나머지 모든 것을 가능하게 하는 결정은 하나입니다. 재료를 텍스트 단락이 아니라 구조화된 데이터로 저장하는 것입니다. 이것만 제대로 하면 유용한 기능들이 쉬워집니다.

어떤 종류의 레시피 앱인지 정하세요

데이터 모델은 네 가지 모두 같습니다. 달라지는 것은 누가 쓸 수 있는지, 그리고 페이지를 검색 엔진이 찾아야 하는지 여부입니다.

레시피 앱에 필요한 것

페이지

• 레시피 목록 또는 홈 — 사진, 제목, 총 소요 시간, 태그가 있는 카드.
• 레시피 페이지 — 요리를 위한 화면. 사진, 인분 조절 컨트롤, 재료 목록, 번호가 매겨진 단계, 메모.
• 검색과 필터 — 이름, 재료, 태그(채식, 간편, 디저트), 시간별.
• 레시피 추가 및 수정 — 재료를 한 줄씩 다루는 양식.
• 컬렉션 — "평일 저녁", "크리스마스", "엄마의 레시피".
• 장보기 목록 — 레시피 하나 또는 여러 개에서 만든 목록.

데이터

• 레시피 — 제목, 슬러그, 설명, 인분, 준비 시간, 조리 시간, 사진, 태그, 출처, 작성자, 공개 범위.
• 재료 — 레시피, 위치, 분량, 단위, 이름, 메모("곱게 다진"), 선택적 그룹("소스용").
• 단계 — 레시피, 위치, 텍스트, 선택적 타이머.
• 컬렉션과 컬렉션 항목.
• 장보기 목록 항목 — 사용자, 재료명, 분량, 단위, 체크 여부.

분량은 숫자여야 합니다. "1 ½ 컵"은 분량 1.5, 단위 cup이 됩니다. 앱이 이해하는 단위 목록을 작게 유지하고, 분량 없는 자유 텍스트("한 꼬집", "기호에 맞게")는 허용하세요.

권한

개인 요리책에는 계정 하나와 비공개 레시피가 필요합니다. 가족 요리책에는 여러 사람이 편집할 수 있는 공유 컬렉션이 필요합니다. 공개 사이트에는 독자(로그인 없음)와 편집자가 필요합니다. 커뮤니티에는 자신의 레시피를 소유하는 회원과 무엇이든 숨길 수 있는 운영자가 필요합니다.

실제로 쓰게 만드는 기능

인분 조절. 모든 분량에 새 인분 ÷ 원래 인분을 곱하세요. 자연스러운 분수로 보여 주세요(0.75컵이 아니라 ¾컵). 어색한 양은 반올림하세요. 양념, 굽는 시간, 팬 크기처럼 비례하지 않는 것도 있으니, 레시피에 짧은 메모를 두면 도움이 됩니다.

단위 변환. 미터법/미국식 전환 기능. 부피와 무게는 같은 종류 안에서 변환하세요. 밀가루 컵을 그램으로 바꾸려면 재료마다 밀도가 필요한데, 이는 첫 기능이 아니라 나중 기능입니다.

요리 모드. 큰 글씨, 한 번에 한 단계 또는 체크박스가 있는 스크롤 목록, 요리하는 동안 화면이 꺼지지 않도록 유지(많은 기기의 브라우저가 화면 잠금 방지를 지원합니다). 사람들이 가장 고마워하는 기능입니다.

장보기 목록. 여러 레시피의 재료를 합치고, 같은 재료를 같은 단위로 병합하고, 통로별로 묶고, 장을 볼 때 사람들이 항목을 체크할 수 있게 하세요.

재료로 검색. "닭고기와 대파로 뭘 만들 수 있을까?"는 재료가 별도 레코드이기 때문에 가능합니다. 앱에 검색 추가하기를 참고하세요.

공개 레시피 페이지의 SEO

사람들이 검색으로 레시피를 찾아야 한다면, 각 레시피에는 고유한 URL, 고유한 제목과 설명, 그리고 페이지가 로드될 때 HTML에 들어 있는 레시피 내용이 필요합니다. 나중에 JavaScript로 그리는 것이 아니어야 합니다. 데이터베이스에서 생성한 schema.org Recipe 구조화 데이터(재료, 단계, 시간, 인분, 이미지)를 추가해서 항상 페이지와 일치하게 하세요. 평점은 실제 사람들이 페이지에 남긴 경우에만 포함하세요. 구조화된 데이터란 무엇인가에서 마크업을 설명하고, 구글의 공식 문서가 사용하는 필드를 나열합니다.

예시 첫 프롬프트

휴대폰을 우선으로 설계된 가족 레시피 앱을 만들어 줘. 각 레시피에는 제목, 사진, 인분, 준비 시간과 조리 시간, 태그, 재료, 번호가 매겨진 단계가 있어. 재료는 분량, 단위, 이름, 메모를 가진 각자의 레코드로 저장하고, "소스용" 같은 선택적 섹션으로 묶어 줘. 레시피 페이지에는 모든 분량을 조절하고 보기 좋은 분수로 보여 주는 인분 컨트롤, 미터법/미국식 단위 전환, 큰 글씨, 단계 체크박스, 화면이 꺼지지 않는 요리 모드가 있어야 해. 레시피 이름이나 재료로 검색하고, 태그와 총 소요 시간으로 필터링할 수 있게 해 줘. 사용자는 레시피를 컬렉션에 저장하고, 하나 이상의 레시피를 장보기 목록에 추가할 수 있어야 하며, 목록은 같은 재료를 합치고 항목을 체크할 수 있어야 해. 가족 구성원은 이메일과 비밀번호로 로그인하고, 모두가 편집할 수 있는 요리책 하나를 공유해. 모든 데이터는 데이터베이스에, 사진은 파일 저장소에 저장해 줘. 샘플 레시피 여섯 개를 넣어 줘.

만드는 단계

1. 샘플 데이터로 레시피 페이지 만들기. 다른 무엇보다 먼저 요리 화면을 휴대폰에서 훌륭하게 만드세요.
2. 구조화된 재료 입력. 각 줄이 분량, 단위, 재료, 메모로 이루어진 양식. 또한 목록을 붙여 넣으면 텍스트를 줄 단위로 나눠 주고, 잘못 나뉜 부분을 요리하는 사람이 고칠 수 있는 "목록 붙여넣기" 상자도 제공하세요.
3. 인분과 단위. 까다로운 경우로 테스트하세요. ⅓컵을 두 배로, 달걀 1개를 반으로, "소금 기호에 맞게".
4. 검색과 필터.
5. 장보기 목록. "양파 2개"와 "양파 1개"를 "양파 3개"로 합치세요. 단위가 다른 것은 추측하지 말고 따로 두세요.
6. 로그인과 공유. 앱에 로그인 추가하기를 참고하세요.
7. 사진. 업로드할 때 크기를 줄여서 페이지를 빠르게 유지하세요.
8. 공개 페이지와 마크업(공개할 경우). 그런 다음 게시하고 레시피 페이지의 소스를 확인하세요.

흔한 실수

• 재료를 텍스트 한 칸에 넣는 것. 인분 조절, 장보기 목록, 재료 검색을 잃게 됩니다.
• 화면에 소수로 표시하는 것. "0.333컵"은 쓸 수 없습니다. 분수로 보여 주세요.
• 요리 전에 긴 이야기를 두는 것. 자신의 앱에서는 재료를 위쪽 가까이에 두고, 이야기가 있다면 "레시피로 이동" 링크를 두세요.
• 원본 크기 사진. 휴대폰 사진은 큽니다. 크기를 줄이고 압축하세요.
• 다른 사이트의 레시피를 공개적으로 복사하는 것. 개인적으로 가져오는 것과 다른 사람의 글과 사진을 다시 공개하는 것은 다릅니다.
• 구조화된 데이터에 가짜 평점. 검색 엔진은 오해를 부르는 마크업에 불이익을 줄 수 있습니다.
• 영양 수치를 정확한 값처럼 표시하는 것. 영양을 계산한다면 추정치라고 밝히고 데이터 출처를 적으세요.

완성된 레시피 앱이 더 나은 경우

자신의 레시피를 저장하고 요리하고 싶다면, 기존의 레시피 관리 앱이 이미 웹사이트에서 가져오고, 기기 간에 동기화되고, 오프라인에서 작동합니다. 음식 블로그라면, 레시피 카드 플러그인이 있는 블로깅 플랫폼이 마크업과 인쇄 화면을 기본으로 처리합니다.

직접 만드는 편이 나은 경우는 그런 도구가 하지 않는 것이 필요할 때입니다. 원가 계산이나 알레르겐 추적이 있는 기업용 레시피 시스템, 자체 구조를 가진 대가족용 공유 요리책, 식단표나 매장과 연결된 레시피, 또는 완전히 자기만의 디자인이 필요할 때입니다. 실제 목표가 일주일 식사 계획이라면 다음으로 식단 플래너 앱 만드는 법을 읽어 보세요.

Mythex로 만들기

Mythex에서는 채팅으로 레시피 앱을 설명하고, 라이브 미리보기의 휴대폰 크기 프레임에서 요리 화면을 확인한 뒤, 가족이나 독자가 휴대폰에서 열고 홈 화면에 추가할 수 있는 공개 주소로 게시할 수 있습니다. Mythex는 레시피와 재료를 위한 전용 Postgres 데이터베이스를 추가하고, 앱이 필요로 하면 사진을 위한 파일 저장소를 추가합니다. 로그인은 직접 가져오는 방식입니다. 방식은 여러분이 고르고, 에이전트가 연결합니다. Pro에서는 Mythex가 이것을 Android 및 iPhone 앱으로도 감싸서 Google Play 내부 테스트와 TestFlight로 보낼 수 있습니다. 공개 레시피 사이트라면 음식 블로그 템플릿과 모바일 친화적 웹앱 만드는 법 가이드를 참고하세요.

자주 묻는 질문