만들기 전에 먼저 종이를 꺼냈다

앱을 만들겠다고 결심했을 때 가장 먼저 한 일은 컴퓨터를 켜는 것이 아니었다. 노트를 꺼내 이 앱이 무엇을 해야 하는지 적기 시작했다. 코딩을 모르는 사람이 AI와 함께 앱을 만들 때 가장 위험한 실수는 기획 없이 바로 개발에 뛰어드는 것이다. 무엇을 만들지 명확하지 않으면 Claude에게 무엇을 물어봐야 할지도 모른다. 기획이 설계의 절반이다.

k냉털은 단순한 레시피 검색 앱이 아니었다. 냉장고에 있는 재료를 인식해서 AI가 요리를 추천해주고, 그 요리의 칼로리를 계산해주고, 부족한 재료는 바로 구매할 수 있어야 했다. 이 흐름을 한 문장으로 정리하면 이렇다. 냉장고를 열고 → 사진을 찍고 → 요리를 추천받고 → 바로 만든다. 이 단순한 흐름에서 기능 목록이 나왔다.

k냉털에 넣을 기능은 크게 6가지다

앱에 넣을 기능은 처음부터 욕심을 부리지 않기로 했다. 처음부터 완벽한 앱을 만들려고 하면 아무것도 완성되지 않는다. 핵심 기능부터 만들고, 나머지는 업데이트로 추가하는 방식이 현실적이다. 고민 끝에 k냉털의 핵심 기능은 크게 6가지로 정리됐다.

첫 번째 — 재료 입력 (카메라 + 수동)

냉장고 속 재료를 입력하는 방식은 두 가지다. 카메라로 재료를 찍으면 AI가 자동으로 인식하는 방식과, 직접 텍스트로 입력하는 방식이다. 카메라 인식은 편리하지만 정확도가 100%가 아니기 때문에 수동 입력을 병행하는 것이 필수였다. 사용자가 원하는 방식을 선택할 수 있어야 앱의 완성도가 올라간다.

두 번째 — AI 레시피 추천

입력된 재료를 바탕으로 AI가 만들 수 있는 요리를 추천한다. 단순히 레시피를 검색해서 보여주는 것이 아니라, 있는 재료를 조합해서 실제로 만들 수 있는 요리를 생성하는 방식이다. 이 핵심 기능을 구현하기 위해 Gemini API를 선택했다. k냉털이 어떤 앱인지는 1편에서 자세히 소개했다.

세 번째 — 칼로리 자동 계산

추천된 요리의 칼로리를 AI가 자동으로 계산해서 보여준다. 다이어트나 건강 관리에 관심 있는 사용자에게 유용한 기능이다. 별도의 영양 데이터베이스를 구축하지 않고 Gemini API가 추정해서 계산하는 방식으로 구현했다.

네 번째 — 레시피 저장

마음에 드는 레시피를 앱 안에 저장해두는 기능이다. 매번 재료를 입력해서 추천받을 필요 없이 자주 만드는 요리는 저장해두고 바로 꺼내볼 수 있다. 저장 기능이 없으면 앱을 껐다 켤 때마다 처음부터 다시 시작해야 하기 때문에 반드시 필요한 기능이었다.

다섯 번째 — 쿠팡 파트너스 연동

레시피에 필요한 재료 중 집에 없는 것이 있으면 쿠팡에서 바로 구매할 수 있는 링크를 제공한다. 사용자 입장에서는 편리한 기능이고, 개발자 입장에서는 쿠팡 파트너스를 통한 수익화 수단이 된다. 앱의 사용성과 수익화를 동시에 잡는 기능이다.

여섯 번째 — 유통기한 관리

냉장고에 넣어둔 재료의 유통기한을 등록해두면 만료 전에 알림을 보내주는 기능이다. 재료를 버리는 일을 줄이는 것이 k냉털의 출발점이었기 때문에 이 기능은 앱의 철학과 직결된다. 초기 버전에서는 기본적인 등록과 조회 기능만 구현하고 알림은 업데이트로 추가했다.

어떤 기술 스택으로 만들까

기능 목록이 정리되고 나서 다음 고민은 어떤 기술로 만드느냐였다. 코딩을 모르는 입장에서 기술 스택을 스스로 선택하기는 어렵다. 그래서 Claude에게 직접 물어봤다. "코딩을 모르는 사람이 AI 기반 레시피 추천 앱을 만들려고 한다. 어떤 방식으로 만드는 게 현실적인가?" 이 질문에서 나온 답이 기술 스택의 출발점이 됐다.

React + Vite를 선택한 이유

여러 선택지 중에서 React와 Vite 조합을 선택했다. 웹 기술 기반이기 때문에 나중에 안드로이드 앱으로 변환할 수 있고, GitHub 웹 에디터에서도 코드를 수정할 수 있다는 점이 결정적이었다. 개발 환경 설치나 복잡한 설정 없이 시작할 수 있다는 것도 장점이었다. AI 개발에 활용할 수 있는 무료 도구들은 이 글에서 참고했다.

Gemini API를 선택한 이유

AI 레시피 추천의 핵심인 언어 모델은 Google의 Gemini API를 선택했다. 사용자가 직접 API를 입력하는 방식은 비용면에서는 유리하지만, 사용자들의 불편함이 있기에, 사용자들은 전액 무료로 사용가능하고, 개발자가 비용을 부담하는 방식으로 전환하였고, 이미지 인식과 텍스트 생성을 모두 지원하며, 한국어 성능이 안정적이라는 점이 이유였다. ChatGPT API와 비교했을 때 비용 면에서 유리했고, 구글 플레이스토어에 올리는 앱이기 때문에 구글 생태계 안에서 통합하는 것이 자연스럽다고 판단했다.

웹앱에서 TWA로 가는 방향

처음부터 네이티브 앱을 만들려고 하지 않았다. 웹앱을 먼저 완성하고, 이것을 TWA(Trusted Web Activity) 방식으로 안드로이드 앱으로 포장해서 구글 플레이에 올리는 계획이었다. 개발 속도가 빠르고 유지보수가 쉽다는 장점이 있다. 나중에 이 계획이 예상치 못한 문제로 바뀌게 되는데, 그 이야기는 뒤편에서 다룬다.

화면 설계 — 사용자가 보게 될 것들

기술 스택이 정해지면 다음은 화면 구성이다. 사용자가 앱을 열었을 때 어떤 순서로 무엇을 보게 되는지 정리해야 Claude에게 각 화면을 만들어달라고 요청할 수 있다. k냉털의 화면은 크게 6개로 정리됐다.

홈 화면

앱을 실행하면 가장 먼저 보이는 화면이다. 카메라로 재료를 촬영하는 버튼, 직접 재료를 입력하는 버튼, 저장된 레시피로 바로 가는 버튼이 배치된다. 사용자가 다음에 무엇을 해야 하는지 한눈에 보여야 한다.

재료 입력 화면

카메라로 찍은 사진을 AI가 분석해서 재료 목록을 자동으로 채워주거나, 직접 재료 이름을 입력하는 화면이다. 인식된 재료를 수정하거나 추가 삭제할 수 있어야 한다.

레시피 추천 화면

입력된 재료를 바탕으로 AI가 추천한 요리 목록이 표시된다. 각 요리를 탭하면 레시피 상세 내용과 칼로리가 나온다.

저장된 레시피 화면

이전에 저장해둔 레시피 목록을 보여주는 화면이다. 날짜순이나 카테고리별로 정렬할 수 있다.

장보기 리스트

레시피를 추천받고 나면 필요한 재료 중 집에 없는 것들이 생긴다. 그 재료들을 따로 메모해두지 않으면 마트에 가서 뭘 사야 할지 잊어버리기 일쑤다. 장보기 리스트 기능은 레시피에서 부족한 재료를 탭 한 번으로 리스트에 추가하고, 마트까지 가지 않고 쿠팡에서 바로 구매 할 수 있게 버튼을 만들고, 구매하면 체크해서 지울 수 있는 기능이다. 재료를 직접 추가하거나 삭제하는 것도 가능하다. 냉장고 재료 관리부터 요리 추천, 장보기까지 하나의 흐름으로 연결되는 것이 k냉털이 목표로 하는 방향이다.

유통기한 관리 화면

냉장고에 넣어둔 재료의 유통기한을 등록하고 확인하는 화면이다. 만료가 임박한 재료는 상단에 표시된다.

Claude에게 첫 번째로 한 질문

기획과 설계가 정리되고 나서 Claude에게 처음 한 질문은 이것이었다. "React와 Vite로 냉장고 재료 인식 레시피 추천 앱을 만들려고 한다. 처음 프로젝트 구조를 어떻게 잡으면 되는가?" 막연하게 "앱 만들어줘"라고 하지 않고 기술 스택과 목적을 명확하게 제시했기 때문에 Claude도 구체적인 답을 줄 수 있었다.

이 첫 번째 질문에서 받은 답변이 k냉털의 폴더 구조와 초기 파일 구성의 기초가 됐다. 기획을 먼저 해두지 않았다면 이 질문 자체를 할 수 없었을 것이다. AI와 함께 앱 개발을 준비하는 과정은 2편에서 자세히 다뤘다.

기획 단계에서 가장 중요한 것은 완벽한 기획서가 아니다. 내가 만들고 싶은 것이 무엇인지 한 문장으로 설명할 수 있을 만큼 정리되는 것이다. 그 한 문장이 있어야 AI와 제대로 된 대화를 시작할 수 있다. k냉털의 한 문장은 이것이었다. 냉장고 재료를 사진으로 찍으면 AI가 요리를 추천해주는 앱.

기획과 설계를 마치고

기능 목록 6가지, 기술 스택 결정, 화면 구성 6개. 이것이 k냉털 개발의 출발점이었다. 이 단계에서 코드는 한 줄도 작성하지 않았다. 하지만 이 준비가 있었기 때문에 이후 개발 과정에서 방향을 잃지 않을 수 있었다.

다음 편에서는 실제로 Claude와 함께 웹앱의 첫 번째 버전을 만드는 과정을 다룬다. 처음 화면이 브라우저에 뜨던 그 순간, 코딩을 모르는 사람이 AI와 함께 앱을 만든다는 것이 현실이 되는 경험을 솔직하게 담을 예정입니다.