개발 시작 전 준비한 것들

기획과 설계가 끝났으니 이제 진짜 만들어야 했다. 그런데 코딩을 모르는 사람이 앱을 만들려면 코드보다 먼저 준비해야 할 것들이 있다. 어디에 배포할지, 어떤 API를 쓸지, 코드는 어디에 저장할지. 이 세 가지를 먼저 결정하지 않으면 Claude에게 무엇을 만들어달라고 해야 할지도 모른다. 순서대로 하나씩 정리했다.

닷홈 vs 클라우드플레어 — 어디에 올릴까

웹앱을 만들면 인터넷에 올려야 한다. 처음에는 이미 운영 중인 corerealhub.com 블로그가 닷홈에 올라가 있어서 닷홈을 그대로 쓸까 생각했다. 그런데 조금 알아보니 클라우드플레어 Pages라는 선택지가 있었다. 두 가지를 비교해보니 k냉털 같은 웹앱에는 클라우드플레어가 더 적합했다. 속도, 무료 트래픽, 배포 편의성 면에서 차이가 있었다.또한 데이터베이스도 필요할것 같아서 슈파베이스의 이용 내용도 함께 확인했다.

Gemini API 발급 순서

k냉털의 핵심 기능인 재료 인식과 레시피 추천은 Gemini API가 담당한다. API를 쓰려면 먼저 발급을 받아야 한다. Google AI Studio에서 계정을 만들고 API 키를 발급받는 과정은 생각보다 간단했다. 아래 이미지에 발급 순서를 정리해뒀다.

Gemini API 사용 요금

API를 쓰면 요금이 발생한다. 처음에는 이 부분이 걱정됐다. 그런데 Gemini API는 무료 사용량이 꽤 넉넉하다. 개인 앱 수준에서는 무료 티어로도 충분히 운영할 수 있다. 다만 사용자가 많아지면 요금이 발생하기 때문에 구조는 미리 파악해두는 것이 좋다. 실제 요금표는 아래 이미지를 참고하면 된다.

GitHub 저장소 만들기

코드를 저장하고 버전을 관리하는 공간이 필요하다. GitHub가 그 역할을 한다. 코딩을 몰라도 GitHub는 반드시 써야 한다. Claude가 만들어준 코드를 저장해두지 않으면 수정할 때마다 처음부터 다시 시작해야 하기 때문이다. 저장소를 만드는 순서는 어렵지 않다. 아래 이미지에 정리해뒀다.

개발 순서를 먼저 정했다

준비가 끝나고 나서 무작정 만들기 시작하지 않았다. Claude에게 첫 번째 코드를 요청하기 전에 전체 개발 순서를 먼저 정리했다. 순서 없이 시작하면 나중에 기능을 추가할 때 구조가 꼬이기 쉽다. 아래 표는 k냉털 개발을 진행한 순서다. 실제로 이 순서대로 진행되지 않은 부분도 있지만, 큰 흐름은 이 계획에서 벗어나지 않았다.

Claude와 함께 웹앱 첫 시작

준비가 끝나고 드디어 Claude에게 첫 번째 질문을 했다. "React와 Vite로 냉장고 재료 인식 레시피 추천 앱을 만들려고 한다. GitHub 저장소에 올릴 수 있는 초기 프로젝트 구조를 만들어달라." 질문을 입력하고 잠시 기다리자 파일 구조와 코드가 쏟아져 나왔다. 코딩을 한 번도 해본 적 없는 사람 입장에서 그 순간은 꽤 충격적이었다. 내가 한 건 질문 한 줄뿐인데 화면을 가득 채운 코드가 나타난 것이다.

중요한 것은 질문을 어떻게 하느냐였다. 처음에는 막연하게 "앱 만들어줘"라고 했다가 원하는 결과가 나오지 않는 경우가 많았다. 점점 요령이 생기면서 기술 스택, 원하는 기능, 파일 구조 방향까지 구체적으로 설명하게 됐다. Claude는 질문이 구체적일수록 훨씬 정확한 코드를 만들어줬다. 코딩을 모른다고 해서 질문을 대충 해서는 안 된다는 것을 개발 초반에 배웠다.

그 코드를 GitHub에 붙여넣고 클라우드플레어 Pages와 연결하자 실제 주소가 생겼다. 브라우저에 그 주소를 입력했을 때 화면이 뜨던 순간은 지금도 기억난다. 허전하고 투박한 화면이었지만 내가 만든 앱이 인터넷에 올라간 것이었다. 기획서 위에만 존재하던 것이 현실이 되는 순간이었다. 기획과 설계 과정은 3편에서 자세히 다뤘다.

첫 화면이 뜬 이후부터는 기능을 하나씩 붙여나가는 작업이 시작됐다. 버튼을 만들고, 입력창을 만들고, Gemini API와 연결하는 순서로 진행했다. 매 단계마다 Claude에게 "이 기능을 추가해달라", "이 부분이 작동하지 않는다"고 설명하면 수정된 코드가 나왔다. 이 과정을 반복하면서 앱이 조금씩 모양을 갖춰갔다.

Claude 사용량 한도와의 현실

그런데 개발을 진행하면서 예상치 못한 장벽이 생겼다. Claude의 사용량 한도였다. 유료 플랜 중 가장 저렴한 것으로 구독했는데, 복잡한 코드 작업을 하다 보면 한도가 금방 찼다. 딱 중요한 순간에 "사용량 한도에 도달했습니다" 메시지가 뜨면 몇 시간, 길게는 하루를 기다렸다가 다시 시작해야 했다.

다시 시작할 때는 이전 작업 내용을 Claude에게 다시 설명해야 했다. 어디까지 만들었는지, 어떤 구조로 잡았는지, 무엇이 문제였는지를 처음부터 다시 전달하는 과정이 반복됐다. 3개월이라는 개발 기간이 길어진 이유 중 하나가 바로 이 사용량 한도와의 싸움이었다. AI로 앱을 만들겠다고 생각하는 사람이라면 이 부분을 미리 알고 시작하는 것이 좋다. 개발에 활용할 수 있는 AI 도구들은 이 글에서 확인할 수 있다.

첫 번째 버전을 만들고 나서

준비 과정부터 첫 화면이 뜨기까지, 코딩을 모르는 사람이 AI와 함께 앱을 만든다는 것이 실제로 가능하다는 걸 확인한 단계였다. 물론 첫 번째 버전은 껍데기에 가까웠다. 재료 인식도 레시피 추천도 아직 없었다. 버튼을 눌러도 아무 일이 일어나지 않는 화면이었다. 하지만 그 화면이 있었기 때문에 다음 단계로 나아갈 수 있었다.

다음 편에서는 핵심 기능인 재료 인식과 AI 레시피 추천 기능을 실제로 구현하는 과정을 다룬다. Gemini API와 연결하는 순간, 앱이 처음으로 진짜 앱처럼 동작하기 시작하는 경험을 솔직하게 담을 예정입니다.