평일의 바쁜 일상에서 벗어나 주말을 맞이하면 "가뿐하고 맛있게 먹을 만한 것이 없을까?"라는 고민에 빠지곤 한다. 토요일 오후에 집에서 냉장고 속 애매하게 남은 채소와 두부 등의 재료로 근사한 다이어트 식단을 만들고자 하는 갈증에서 '위크엔드 가뿐 런치' 앱을 개발해 보었다.
처음에는 간단한 레시피 앱을 구상했으나, AI(Gemini)를 활용하며 사용자 맞춤형 레시피를 제안하는 스마트 앱으로 진화했다. 그 과정에서 겪은 주요 시행착오와 해결 과정을 기술한다.
개발 동기 및 초기 시행착오
사실 예전에 Google AI Studio에서 개발을 시도했으나 실패를 경험했다. 안드로이드 스마트폰에서 앱을 실행해보고 싶어 npx expo start --android 명령어로 Expo 사용을 시도했다. 하지만 당시 웹 앱은 Vite 기반으로 구축되어 있었기에 다음과 같은 오류가 발생하며 중단되었다. ConfigError: Cannot determine the project's Expo SDK version because the module 'expo' is not installed. 이는 구체적인 기술 스택에 대한 정의 없이 PRD(제품 요구사항 정의서)만 가지고 Google AI Studio에서 개발에 착수했기 때문이다. Expo는 React Native 전용 툴체인으로, Vite 기반 웹 앱에 직접 적용할 수 없다는 사실을 간과했었다.
개발 과정과 시행착오
프로젝트 초기 구조 설계의 효율화
상황: Expo와 TypeScript를 도입하려 했으나, 레시피 앱에 필요한 홈, 리스트, 상세, 즐겨찾기 등의 화면 구조를 수동으로 설계하는 데 소요되는 시간이 부담이었다.
AI 요청: "주말 점심 다이어트 식단 앱 PRD를 토대로 Expo 기반의 React Native 프로젝트 구조를 설계해줘. 홈 화면은 카드 UI를 적용하고 싶다."
결과: AI가 PRD를 분석하여
screens,navigation,store등 체계적인 폴더 구조와 기본 테마 설정을 생성해서 해결했다.
모바일 환경에 최적화된 UI 정밀 조정
상황: 초기 디자인에서는 긴 메뉴명이나 설명이 텍스트 간 겹침 현상을 일으키거나 화면 밖으로 이탈하는 문제가 발생했다.
AI 요청: "레시피 카드 UI에서 제목은 최대 2줄로 제한하고
ellipsizeMode를 적용해줘. 전체적인 요소 간격은 일관된 시스템에 맞춰 조정한다."결과:
flexWrap과 정교한lineHeight설정이 적용되었다. 이를 통해 다양한 기기 환경에서도 가독성 높은 반응형 UI를 구축했다.
사무적인 글꼴
상황: 기본 시스템 폰트(Sans-serif)는 지나치게 기계적인 인상을 주었고, 요리 앱 특유의 건강하고 따뜻한 감성을 전달하기에 부족했다.
AI 요청: "한국어 필기체 느낌의 '가구체'와 정갈한 '고운바탕체'를 Expo 프로젝트에 적용할 수 있도록
expo-font설정 및 테마 적용 코드를 작성해줘."결과: 앱 로딩 시 폰트를 미리 로드하도록 설정하고, 제목과 본문에 적절한 폰트를 배치함으로써 잡지 같은 감성적인 디자인을 완성했다.
단조롭고 칙칙한 흑백 아이콘
상황: 기존의 무채색 선형 아이콘은 단조로웠으며, 요리의 특징을 직관적으로 전달하지 못했다.
AI 요청: "기존
MaterialCommunityIcons를 대신해 요리의 특징에 부합하는 에모지와 파스텔톤 컬러가 적용된 배지 스타일로 수정해줘."결과: 칼로리(🔥), 조리 시간(⏰) 등 핵심 정보를 에모지와 컬러로 강조하여 생동감 있는 화면을 구성했다.
이미지 로직 최적화를 통한 시각적 만족도 향상
상황: 레시피에 적합한 이미지가 없어 플레이스홀더를 사용한 탓에 시각적 소구력이 떨어지는 문제가 있었다.
AI 요청: "레시피 제목 키워드에 맞춰 고화질 음식 사진을 매핑하는 로직을 작성해줘. 이미지가 없는 경우를 대비한 기본 이미지도 설정한다."
결과: 제목과 연계된 고해상도 이미지가 상단에 배치되도록 개선했다. 사용자의 시각적 만족도를 높힐 수 있는 지는 계속 시험해보아야 한다.
인터랙티브한 조리 단계 체크리스트 구현
상황: 상세 화면에서 재료 준비 상태나 조리 진행 단계를 직관적으로 파악하기 어려웠다.
AI 요청: "재료 리스트에 체크 기능을 부여하고, 체크 상태에 따라 실시간으로 변화하는 프로그레스 바(Progress Bar)를 추가해줘."
결과: 사용자의 상호작용에 반응하는 프로그레스 바를 구현했다. 이를 통해 사용자가 요리 과정을 흥미롭게 따라갈 수 있는 환경이 마련됐다.
향후 계획
앞으로는 완전히 새로운 레시피를 생성하는 대신, 이미 검증된 추천 메뉴 데이터베이스 내에서 사용자에게 제안하는 방식으로 재개발해보려고 한다. 아무래도 존재하지 않는 가상의 음식 사진을 가져오는 것이 무리(이미지 매핑 오류와 기술적 한계)가 있고, 이런 사용자의 경험이 악영향을 끼칠 것 같기 때문이다. 더욱 안정적이고 고도화된 사용자 경험을 제공하는 것이 프로젝트의 원래 취지니까.
