개요
주말 점심에 어울리는 가벼운 특선 레시피를 제공하는 웹 앱을 만들어보았다. 민트베어님이 첫 주차에 제시한 방법 대로 구글 AI Studoo를 활용했는데 목표는 간결한 UI, 카테고리 기반 탐색, 즐겨찾기 기능, 그리고 AI를 활용한 레시피 자동 생성 기능을 만들어보는 것이었다.
개발 과정
요구사항 정의 및 초기 설계
권고하는 PRD 생성기를 사용했는데, PRD를 정말 잘 만들어줘서 앱을 개발하는데까지 무리없이 진행됐다. 특별히 요청하지 않았는데도 다음과 같은 기능이 설계되고 개발되었다:
레시피 목록 및 상세 보기, 카테고리 필터, 즐겨찾기(로컬 저장), AI를 통한 레시피 생성(외부 생성형 모델 연동)
타입 안전성을 위해 TypeScript를 적용하고, 디자인은 Tailwind CSS로 자동 구성되었다.
프로젝트 초기화 및 폴더 구조
타입 정의는 types.ts에 모아두었고, 초기 샘플 데이터는 constants.ts에 배치했다. 주요 진입점은 index.tsx이며, 앱 본문은 App.tsx에 구현했다.
UI 구현
내비게이션과 레시피 카드, 상세 페이지 레이아웃을 컴포넌트화했다.
RecipeCard,Navbar같은 재사용 컴포넌트를 만들어 목록/상세/즐겨찾기 화면에서 공유했다.사용자 상호작용(즐겨찾기 토글, 재료 체크)은 로컬 상태 및
localStorage로 영구 저장되게 했다.
AI 연동 (Gemini)
AI 생성 기능은 services/geminiService.ts에 구현했다. 핵심은 생성 모델에 JSON 스키마를 명시하고, 모델이 반환한 텍스트를 파싱해 Recipe 타입으로 변환하는 것이다.
로컬에서 실행 및 검증
개발 중 실제 동작을 빠르게 확인하기 위해 npm run dev로 Vite 개발 서버를 실행했다. 서버는 자동으로 사용 가능한 포트(localhost:3002)를 할당해 정상적으로 앱을 열어 UI/상호작용을 확인했다.
문제점
모바일 앱 시도(Expo 사용 시도)
문제: 내 폰(안드로이드)으로도 실행되면 좋겠다 싶어서 Expo 사용 시도해봤다(npx expo start --android) 하지만 웹 앱은 Vite 기반으로 만들어졌기 때문에 오류가 발생했다. ConfigError: Cannot determine the project's Expo SDK version because the module 'expo' is not installed. 기술스택에 대한 명시없이, PRD만 가지고 개발에 착수한 실수 때문이었다. Expo는 React Native(모바일) 전용 툴체인이고, Vite 웹 앱에 바로 적용되지 않는다.
해결방법을 물어보니 모바일 앱으로 전환/포팅하려면 새 Expo 프로 젝트를 생성(npx create-expo-app)한 뒤, 필요한 코드만 포팅하거나 네이티브 환경에 맞게 재구성하면 된다고 알려주었다.
그러나 그렇게 재구성하는 방법을 적용하진 않았다. 프로젝트를 처음부터 다시 수행하는게 깔끔할 것이고, 다시 구현해도 많은 시간이 걸리진 않을 것 같았기 때문이다. 다행히 깃허브에 저장해두었으니, 개발계획에 참고할 수 있을 것이다.
배운 점
프로젝트 목적(웹 vs 모바일)을 처음부터 명확히 하는 것이 중요하다는 걸 또다시 깨달았다. (예: Vite, Expo)를 잘못 선택하면 개발 흐름이 크게 꼬일 수 있다. 내가 이걸 모르는 것도 아니었지만, 개발방법을 정석대로 따라가지 않아서 치룬 대가다.
타입스크립트를 사용하면 API 경계에서 기대 타입을 문서화하고, 런타임 오류를 줄이는 데 큰 도움이 된다는 걸 알게됐다. (이 내용은 좀 더 공부해 봐야겠다)
로컬 개발 경험을 위해
npm run dev나 npx expo start --android같은 간단한 스크립트는 README.md에 정리해두면 개발을 재개하거나 앱을 개선하려고할 때 유용할 것이다.
향후 계획
우선 모바일에서도 사용할 수 있는 앱을 개발하려고 한다는 프로젝트의 목적을 분명히 맑히고 나서 PRD를 생성하고, 선호하는 기술스택과 프로젝트 플랜을 먼저 명시해 주고나서, 앱을 처음부터 다시 제작해볼 생각이다.
