개인적으로 저는 매일 아침 몸무게를 재고, 그날의 식단을 기록하는 습관을 가지고 있습니다.
처음에는 단순히 다이어리에 수기로 기록해왔는데,
먹은 것이 많을수록 매번 일일이 적는 것이 점점 번거롭게 느껴졌고,
기록만 한다고 해서 식습관이 자동으로 개선되는 것도 아니라는 점에서 아쉬움을 느끼기 시작했습니다.
그래서 생각했습니다.
기록만으로 끝나는 것이 아니라, 입력한 식단을 바탕으로 스스로 피드백을 받고, 더 나은 방향으로 식사를 바꿔볼 수는 없을까?
이런 필요에서 출발해, 직접 식단 관리 웹앱을 만들어보기로 결심했습니다.
하루의 식단을 간단히 입력하면, 자동으로 영양소를 분석하고
오늘 식단이 얼마나 균형 잡혔는지 점수와 개선 제안까지 보여주는
작고 유용한 건강 리포트 서비스를 만들고자 했습니다.
Firebase Studio로 빠르게 시작하기
처음에는 GPT를 활용해 간단한 PRD를 작성했고, 그 내용을 Firebase Studio에 입력하여 프로젝트를 빠르게 구성해보았습니다.
아침, 점심, 저녁, 간식 등을 입력하면, gemini로 api 요청을 보내 식단을 분석하고, 그 결과를 표기합니다.
기본적인 식단 입력 UI부터 보고서 생성까지 꽤 쉽게 만들어졌고, AI의 코드 자동화 덕분에 빠르게 결과물을 볼 수 있었어요.
한국 신청서의 스크린 샷
Cursor + GitHub 연동으로 리디자인
전체적으로 제가 원하는 방향성의 프로젝트는 잘 만들어졌지만, 막상 결과물을 보니 아쉬운 점들이 있었습니다.
예를 들어, 음식별 영양 정보가 지나치게 단순하거나, 개선 제안의 문장이 애매하게 느껴졌고, 전체 리포트 구조도 마음에 들지 않았습니다.
그래서 gemini로 세세한 수정사항을 요청했지만, 잘 반영이 안되더라구요... 그래서 결국 Firebase Studio로 생성된 코드를 깃헙 레포로 연동한 뒤, Cursor로 다시 열어 작업을 이어갔습니다.
원하는 레포트 형식을 만드는건 gpt로 하는게 더 좋을 것 같아서 gpt 데스크톱으로 원하는 레포트 형식을 만들고, 이를 커서에 적용해달라 했습니다. (gpt 데스크톱은 공동작업 기능이 있는데 이를 이용해 커서 코드를 수정할 수 있었습니다.)
이후 자잘한 처리(식단 입력이 안 되어 있으면, 제출 버튼을 비활성화한다던가)를 진행했고, 스타일도 조금 심플하게 변경했습니다.
어두운 방에서 코드 편집기의 스크린 샷
최종적으로 식단 보고서 내용은 만족스럽게 수정되었습니다. 다만, 조금 더 시각적인 요소(예: 탄단지 비율 차트, 식단 점수 시각화 등)를 넣고 싶어서, 아직 배포는 하지 않은 상태입니다.
다음 주 중으로 리포트를 최종적으로 다듬고, 다시 Firebase Studio에서 프로젝트를 불러와 연동을 완료한 뒤, 배포까지 마무리할 예정입니다.
한국 음식 앱의 스크린 샷
마무리하며
이번 프로젝트를 통해 Firebase Studio를 처음 사용해보면서 느낀 점은, MVP 수준의 프로토타입을 만들기에는 정말 훌륭한 도구라는 것입니다. 단 몇 분 만에 기획 내용을 기반으로 작동하는 웹앱이 생성되는 경험은 굉장히 신기했습니다.
하지만, 실제로 사용자에게 보여줄 수 있을 수준의 완성도를 만들기 위해서는 코드를 직접 다듬고, 세부적인 사항을 고민하는 게 필요했습니다.
오히려 처음부터 Cursor나 자체 개발을 선택했더라면, 시간은 좀 더 들었겠지만 수정의 반복 없이 더 빠르게 완성도 있는 결과물을 만들 수 있었겠다는 생각도 들었습니다.
그럼에도 불구하고, Firebase Studio는 개발 진입장벽을 확실히 낮춰주는 도구라는 점에서는 분명한 장점이 있다고 느꼈습니다.
앞으로도 기획 초기 단계나 빠른 실험이 필요한 프로젝트에는 계속해서 활용해보고 싶습니다.
