먹기 전에 찰칵! 사진 한 장으로 내 식단을 똑똑하게 분석해주는 스마트 식단 관리 서비스 🥙
- 음식 사진 촬영만으로 AI가 자동으로 영양 정보를 분석하고 시각화해주는 서비스입니다.
- AI 피드백으로 건강한 식습관을 형성하고, 직관적인 데이터 시각화로 자신의 영양 섭취 패턴을 쉽게 파악할 수 있습니다.
- 기획 및 와이어프레임 제작 : 2025. 03. 28 ~ 2025. 04. 03
- 개발 기간 : 2025. 04. 04 ~ 2025. 04. 30
- 배포 주소 : https://jiwooda.vercel.app/
llddang |
jiyxxn |
woohyuckk |
arendt9797 |
hayul |
|
Team Leader
Frontend |
Sub Leader
Frontend |
Frontend | Frontend | Designer |
AI 기반 이미지 인식, 자동 영양 분석, 상태 관리, 폼 검증, 에러 모니터링, 반응형 UI 제공
- Next.js 기반 웹 애플리케이션으로 서버 컴포넌트와 클라이언트 컴포넌트를 효과적으로 분리하여 최적화된 성능을 제공합니다.
- 앱 라우팅(App Router) 시스템을 활용하여 직관적인 페이지 구조와 효율적인 라우팅을 구현했습니다.
- Gemini API를 활용한 이미지 인식 기능으로 음식 사진을 분석하여 자동으로 영양 정보를 추출하고 기록합니다.
- Zustand를 사용하여 애플리케이션의 상태 관리를 단순하고 직관적으로 처리하며, 복잡한 사용자 데이터를 효과적으로 관리합니다.
- React Hook Form과 Zod를 결합하여 강력한 폼 검증 시스템을 구축, 사용자 입력 데이터의 유효성을 효과적으로 검사해 타입 안전성을 확보합니다.
- Shadcn UI 컴포넌트와 Tailwind CSS를 활용하여 반응형 디자인을 구현, PC와 모바일 환경 모두에 최적화된 UI/UX로 어떤 기기에서든 동일한 품질의 사용자 경험을 제공합니다.
- Sentry를 도입하여 실시간으로 애플리케이션 오류를 모니터링하고, 사용자에게 친화적인 에러 메시지를 제공함으로써 사용자 경험을 향상시켰습니다.
- 인터랙티브 차트와 데이터 시각화를 통해 사용자의 영양 섭취 패턴과 식습관을 직관적으로 파악할 수 있도록 정보를 제공합니다.
- 모바일 퍼스트 설계로 언제 어디서나 식사 사진을 쉽게 촬영하고 기록할 수 있는 환경을 우선적으로 구축하되, 데스크톱에서는 보다 편안한 시각으로 식단 데이터를 리뷰하고 관리할 수 있는 확장된 기능을 제공합니다.
홈 (/)
온보딩 (/onboarding)
사진으로 식사 기록 (/meal/post)
사진없이 식사 기록 (/meal/post)
리포트 (/report)
마이페이지 (/my-page)
-
- 각 컴포넌트/기능별 이슈 생성
- 유형별 브랜치 운영 (
Feature/#이슈번호-이슈명,Refactor/#이슈번호-이슈명)
-
- Github Discussion을 활용한 논의 기록
- DTO의 컨벤션을 변환하는 Camelize 함수의 타입 정의 논의
- Supabase Storage 에러 핸들링 관련 이슈
📦 todayeat
├─ public
│ ├─ fonts
│ ├─ icons
│ ├─ illustrations
│ ├─ images
│ └─ lottie
└─ src
├─ **tests** # 📋 유틸리티 함수 테스트
├─ apis # 🌐 API 호출 함수
├─ app
│ ├─ (auth) # 🔐 인증 관련 페이지(로그인, 회원가입 등)
│ ├─ (client) # 👤 인증된 사용자 페이지(마이페이지, 식단기록 등)
│ ├─ (home)
│ │ ├─ _components # 🧱 컴포넌트 구성
│ │ ├─ _constants # 📌 상수 정의
│ │ ├─ _contexts # 🔄 컨텍스트 API
│ │ ├─ _hooks # 🪝 커스텀 훅
│ │ ├─ _types # 📝 TypeScript 타입 정의
│ │ ├─ _utils # 🛠️ 유틸리티 함수
│ │ ├─ layout.tsx
│ │ └─ page.tsx
│ ├─ api # 🚀 서버리스 API 엔드포인트
│ │ ├─ auth
│ │ ├─ gemini
│ │ └─ report
│ ├─ error.tsx # ⚠️ 에러 핸들링 컴포넌트
│ ├─ global-error.tsx
│ ├─ layout.tsx # 📐 전체 레이아웃 구성
│ ├─ robots.ts # 🤖 크롤링에서 접근 가능한 구성
│ └─ sitemap.ts # 🗺️ 검색 엔진 크롤러의 색인 보조
├─ components
│ ├─ commons # 🔄 공통 컴포넌트
│ ├─ layouts # 📏 레이아웃 컴포넌트
│ └─ ui # 🎨 UI 기본 컴포넌트(shadcn/ui 기반)
├─ constants # 📌 상수 정의
├─ hooks # 🪝 커스텀 훅
├─ lib # 📚 외부 라이브러리
│ ├─ gemini.ts
│ ├─ sentry.ts
│ ├─ shadcn.ts
│ └─ supabase
├─ schemas # 🔍 폼의 zod 검증 로직 (example.schema.ts)
├─ store # 🏪 전역 상태 관리(Zustand) (example.store.ts)
├─ types # 📝 TypeScript 타입 정의 (example.type.ts)
│ └─ DTO # 📦 데이터 전송 객체 타입 (example.dto.ts)
├─ utils # 🛠️ 유틸리티 함수 (example.util.ts)
└─ middleware.ts
중간 발표 때는 마감을 지킨다고 힘들었지만 최종발표 때는 널널해서 좋은 것 같습니당!
이번 프로젝트에서 서로의 생각을 이야기하며 정의한 개념들과 새롭게 알게된 코드 패턴이 많아서 정말 알차고 뿌듯한 프로젝트였다고 생각합니다. 얼른 이 기억이 사라지기 전에 글로 정리를 해놔야겠어요!단 기간에 프로젝트를 끝낸다는 것이 많이 힘든 일임에도 불구하고 옆에서 같이 파이팅해주셔서 잘 끝낼 수 있었던 것 같아요.
앞으로도 프로젝트를 진행하게 되었을 때, 이번만큼 코드리뷰가 활발한 팀에 속하면 얼마나 좋을까 생각합니다.
바쁘고 힘들고 정줄을 종종 놓았지만 역시 망각은 인간의 축복이라고 힘들었던 기억은 사라지고 재밌었고 뿌듯한 기억과 멋들어진 결과물만이 남았네요!정말 재밌고 즐거웠던 프로젝트였습니다! 감사합니다!
투데잇을 개발했던 지난 3주를 돌아보면 마치 아주 긴 꿈을 꾼 것 같습니다.
능력 있는 팀원들과 의견을 나누고 서로의 생각 차이를 좁혀가는 과정, 그리고 모두가 '완성도 높은 프로젝트'라는 하나의 목표를 향해 함께 달려갔던 모든 순간이 이제는 전부 애틋합니다.항상 궁금한 것도 모르는 것도 많았던 저를 이해해 주시고, 제가 스스로도 해낼 수 없다고 생각했던 과제들을 믿고 맡겨주신 팀원들 덕분에 짧은 시간 내에 크게 성장할 수 있었던 값진 기회였습니다.
> '한 명이 말하면 나머지는 듣는다!' 라는 원활한 의견 공유와 회의를 위한 저희의 그라운드 룰이 있습니다.
이제 앞으로 함께 회의할 날이 많지 않을 것이라는 생각에 이 규칙이 앞으로는 서로의 개발 여정을 나눌 때, 한 명이 말하면 나머지가 경청하는 서로의 든든한 지지대가 되어주길 바랍니다.모두 고생 많았습니다. 앞으로도 오래 봐요.
훌륭한 팀원들을 만나 시간가는 줄 모르고 한달이 지나간 것 같습니다.
한 달 동안 진행된 이번 팀 프로젝트를 통해 개발적인 역량뿐만 아니라, 원활한 소통과 협업의 중요성을 깊이 깨달았습니다. 무엇보다도 훌륭한 팀원들과 함께하면서, 혼자서는 도달할 수 없었던 성과를 함께 이뤄낸 값진 경험이었습니다.프로젝트 기간동안 저희가 가장 많이 주고 받은 말은 “제가 고민이 있는데요”였습니다. 이 말은 단순한 질문을 넘어, 자신의 생각을 공유하고 함께 문제를 해결하는 문화를 자연스럽게 만들어 낸 것 같습니다. 이런 문화 덕분에 각자의 역할에만 머무르지 않고, 적극적으로 피드백하여 더 발전해 나갈 수 있었습니다.
쉽지 않았던 만큼 많은 것을 얻었고, 이 소중한 경험을 바탕으로 한층 더 성장하는 개발자가 되겠습니다.
정신없이 지나갔던 최종 프로젝트였습니다!
열정과 실력 모두 갖춘 팀원들과 함께 프로젝트를 진행하며 정말 많은 것들을 배웠습니다. 서로의 코드를 리뷰 해주며 기술적으로 새로운 문법이나 디자인 패턴을 알아가기도 했고, 잊고 있었거나 생각지 못한 시각으로 코드를 바라볼 수 있었습니다.
그러나 이번 프로젝트에서 가장 많이 얻은 건 팀원들 간 의사소통 방법이었습니다. 기술적인, 디자인 적인 의사결정 뿐만 아니라 변수 이름, 함수 이름같이 비교적 간단한 고민들도 자신만의 근거를 들어 서로 의견을 주고받으며 의견을 교환하고, 각자 생각의 장점들을 취합하여 더 좋은 결론을 이끌어낼 수 있었습니다.
끝까지 열심히 달려 좋은 결과물을 만들어낸 우리 팀원들에게 감사드리며, 팀원들과 더욱 어울릴 수 있는 개발자로 성장하겠습니다.