껍데기 앱에 뇌를 달다

4편에서 웹앱의 첫 번째 화면을 브라우저에 띄우는 데 성공했다. 버튼이 있고, 입력창이 있고, 그럴싸한 레이아웃도 있었다. 하지만 아무 버튼을 눌러도 아무 일도 일어나지 않았다. 화면은 있지만 두뇌가 없는 상태였다. 이 앱에 실제로 생각하는 능력을 심어줄 차례였다. 그것이 바로 Gemini API 연동이다.

Gemini API는 k냉털의 핵심이다. 냉장고 재료 사진을 보고 무슨 재료인지 알아내고, 그 재료로 만들 수 있는 요리를 추천하고, 칼로리까지 계산하는 모든 과정이 Gemini API를 통해 이루어진다. 이 연동이 성공하는 순간 k냉털은 단순한 웹페이지에서 진짜 AI 앱으로 바뀐다. 개발 준비 과정과 웹앱 첫 시작은 4편에서 다뤘다.

Gemini API 연동 과정은 크게 3단계입니다

API 연동이라고 하면 어렵게 들릴 수 있다. 하지만 Claude와 함께라면 각 단계를 하나씩 물어보면서 진행할 수 있다. k냉털의 Gemini API 연동은 크게 세 단계로 이루어졌다.

첫 번째 단계 — API 키 환경변수 설정

Gemini API를 사용하려면 API 키가 필요하다. 3편에서 발급받은 API 키를 코드에 직접 넣으면 보안상 위험하다. GitHub에 코드를 올리면 API 키가 그대로 노출되기 때문이다. 해결책은 환경변수로 관리하는 것이다. `.env` 파일에 API 키를 저장하고, 코드에서는 그 변수를 불러오는 방식이다. Claude에게 "React 앱에서 Gemini API 키를 환경변수로 안전하게 관리하는 방법"을 물어보자 바로 `.env` 파일 설정 방법과 코드를 알려줬다. 코딩을 모르는 사람도 따라 할 수 있는 수준이었다.

두 번째 단계 — Claude에게 연동 코드 요청

환경변수 설정이 끝나자 본격적인 연동 코드를 요청했다. "React 앱에서 Gemini API를 호출해서 텍스트로 입력된 재료 목록을 받아 레시피를 추천하는 함수를 만들어달라"고 구체적으로 요청했다. 막연하게 "API 연동해줘"라고 하지 않고 입력값(재료 목록)과 출력값(레시피 추천)을 명확하게 설명한 것이 포인트였다. Claude는 API 호출 함수, 프롬프트 구성, 응답 파싱까지 한 번에 작성해줬다.

세 번째 단계 — 첫 번째 응답이 나오던 순간

코드를 GitHub에 붙여넣고 배포한 후 앱을 열어 재료를 입력하고 버튼을 눌렀다. 로딩 스피너가 돌아가다가 화면에 텍스트가 나타나기 시작했다. "입력하신 재료로 만들 수 있는 요리를 추천해드립니다." 그 문장이 뜨던 순간은 지금도 선명하게 기억난다. 코딩을 한 번도 해본 적 없는 사람이 AI와 대화만으로 실제로 작동하는 AI 앱을 만들어낸 것이다.

재료 인식 기능 구현하기

텍스트로 재료를 입력받는 기능이 작동하자 다음 단계는 카메라로 찍은 사진에서 재료를 자동으로 인식하는 기능이었다. 이것이 k냉털의 핵심 차별점이다. 직접 재료를 타이핑하는 것과 사진 한 장으로 재료가 자동으로 채워지는 것은 사용자 경험에서 완전히 다른 차원이다.

카메라로 사진 찍기

모바일 환경에서 카메라를 여는 것은 생각보다 간단했다. HTML의 `input type="file"` 태그에 `capture="environment"` 속성을 추가하면 스마트폰 후면 카메라가 바로 열린다. Claude에게 "모바일에서 카메라로 사진을 찍어 Gemini API로 전송하는 코드"를 요청하자 이미지를 Base64로 변환해서 API에 전달하는 전체 코드를 만들어줬다. 파일 선택, 미리보기, API 전송까지 한 번에 처리되는 구조였다.

AI가 재료를 읽어내는 순간

냉장고 속 재료 사진을 찍어 전송했다. Gemini가 사진을 분석하고 재료 목록을 텍스트로 반환했다. 당근, 계란, 두부, 파 — 사진 속 재료들이 자동으로 입력창에 채워졌다. 그 순간 k냉털이 단순한 레시피 앱이 아니라 진짜 AI 앱이라는 것을 처음으로 실감했다. 물론 처음부터 완벽하지는 않았다. 비슷한 색깔의 재료를 혼동하거나, 봉지 안에 든 재료는 인식하지 못하는 경우도 있었다. 그래서 자동 인식된 재료를 수동으로 수정할 수 있는 기능을 함께 구현했다.

처음 겪은 오류들 — API 키 문제

연동 과정이 순탄하지만은 않았다. 가장 먼저 마주친 문제는 API 키 오류였다. 코드는 맞는데 계속 "API key not valid" 오류가 떴다. 원인을 찾는 데 꽤 시간이 걸렸다. 문제는 환경변수 이름이었다. React 앱에서 환경변수는 반드시 `REACT_APP_`으로 시작해야 한다. `GEMINI_KEY`가 아니라 `REACT_APP_GEMINI_KEY`로 써야 했던 것이다. 이 규칙을 몰라서 한참을 헤맸다.

두 번째 문제는 Cloudflare Pages 배포 환경에서 환경변수가 적용되지 않는 것이었다. 로컬에서는 잘 되는데 배포하면 API 키를 못 읽는 상황이 반복됐다. Cloudflare Pages 대시보드에서 환경변수를 별도로 등록해야 한다는 것을 Claude에게 물어보고 나서야 해결됐다. 코딩을 모르는 입장에서 오류 메시지만 보고 원인을 찾는 것은 쉽지 않다. 오류 메시지를 그대로 Claude에게 붙여넣고 "이게 무슨 뜻이고 어떻게 해결하냐"고 묻는 것이 가장 빠른 방법이었다. 기획과 설계 단계에서 기술 스택을 선택한 이유는 3편에서 다뤘다.

뇌가 생긴 앱, 다음은 몸을 만들 차례다

Gemini API 연동 과정은 크게 세 단계였다. API 키 환경변수 설정, 연동 코드 구현, 카메라 이미지 인식 연동. 이 세 단계를 거치면서 k냉털은 버튼을 눌러도 아무 반응이 없던 껍데기에서 재료를 인식하고 레시피를 추천하는 진짜 AI 앱으로 바뀌었다.

하지만 아직 갈 길이 멀었다. 레시피 추천은 되지만 화면이 투박했고, 칼로리 계산도 아직 없었고, 저장 기능도 없었다. 다음 편에서는 앱의 UI를 다듬고 칼로리 계산, 레시피 저장 기능을 추가하는 과정을 담을 예정입니다.