건강한 라이프스타일에 대한 관심이 높아지면서, 식단과 운동을 체계적으로 관리하고자 하는 수요도 증가하고 있습니다. 그러나 기존 건강 관리 앱은 사용자가 직접 영양소와 칼로리를 입력해야 하거나 단순 기록에 그쳐 불편함이 컸습니다. 이에 따라, AI를 활용해 사용자의 입력 부담을 줄이고 지속 가능한 건강 관리 경험을 제공하고자 했습니다. 음식 사진과 운동 기록만으로 영양 정보를 분석하고 칼로리를 계산하여, 맞춤형 피드백과 목표 달성을 지원하는 시스템을 구축한 것이 이 프로젝트의 출발점입니다.

운동의 액티브한 느낌과 식단, 영양의 조화로운 이미지를 함께 전달하는 디자인을 구성하는 데 어려움이 있었습니다. 팀원들과 정기적인 회의를 통해 아이디어를 공유하고, 여러 시안을 바탕으로 시각적으로 가장 효과적인 디자인 방향을 도출하여 구현했습니다. 운동 및 식단 데이터의 종류가 많아서 기능별로 3개의 Context로 분리하고 각 Context를 StateContext, DispatchContext로 나누어, 사용자 흐름에 맞춰 적절히 공급되도록 구성했습니다. 또한, AI 응답 지연으로 인한 사용자 경험 저하를 방지하기 위해 호출 횟수를 최소화하고, 로딩 컴포넌트를 도입해 명확한 피드백을 제공했습니다. 많은 양의 음식 데이터를 한 번에 렌더링할 경우 발생하는 성능 저하 문제는 무한 스크롤 기반의 부분 렌더링 기법과 React 최적화 기법을 적용해 불필요한 리렌더링을 줄이는 방식으로 해결했습니다.

디자인을 포함한 여러 주요 의사결정 과정에서 팀원들과 긴밀하게 협업하며, 소통의 중요성을 깊이 체감할 수 있었습니다. 특히 웹과 모바일 서비스가 동일한 백엔드를 공유하는 구조였기 때문에, 기능의 일관성과 사용자 흐름을 유지하기 위해 주 1회 이상의 대면 회의를 통해 의견을 조율하고 방향성을 함께 설정했습니다. 또한 웹 프론트엔드를 맡아 개발하면서도, Spring Boot 기반의 백엔드와 OpenAI API까지 연동되는 전체 시스템 구조를 이해하고 설계 흐름을 파악하는 경험을 쌓았습니다. 백엔드 팀원과의 협업을 통해 데이터 구조 설계부터 프론트의 context 및 컴포넌트 구조까지, 일관성과 효율성을 고려한 통합적인 설계 방식을 배우게 되었습니다.