서비스 개요
텍스트나 단순 그리드 리스트 형태의 정적인 정보 전달 방식에서 벗어나, AI가 분석한 나의 냉장고 상태를 가장 직관적으로 체감할 수 있는 비주얼 인터페이스를 지향한 프로젝트입니다. 유저가 업로드한 데이터의 피드백 루프를 시각적으로 완성하는 데 초점을 맞추었습니다.
./dehy
dehy
dehy는 사용자가 냉장고 내부를 촬영해 전송하면, 이미지 분석 모델을 거쳐 도출된 식재료 데이터를 모바일 앱 상에서 직관적이고 인상적인 그래픽으로 연동해 주는 서비스입니다. 백엔드 AI 연산 영역을 제외한 React Native 기반의 프론트엔드 아키텍처 수립과 클라이언트 내 Three.js 엔진을 활용한 데이터 시각화 구현을 전담했습니다.
dehy.log
$ role
모바일 프론트엔드, 결과 화면 구현, Three.js 기반 시각화
$ stats
플랫폼: Mobile app / 분야: Food / AI / 성과: 예비창업패키지 최우수상
$ focus
- - 식재료 인식 API 응답 객체와 모바일 UI 데이터 매핑
- - React Native 환경 내 Three.js(WebGL) 렌더링 파이프라인 최적화
- - 인식 결과의 가시성을 높이는 역동적인 3D 그래픽 대시보드 구현
담당 범위
서버의 컴퓨터 비전 및 음식 인식 백엔드 모델과의 밀접한 API 컨트랙트를 바탕으로, 클라이언트 사이드의 전반적인 프론트엔드 아키텍처를 제어했습니다. 분석 연산이 완료되어 수신된 식재료 종류, 신선도, 수량 등의 정량적 데이터를 모바일 내 그래픽 엔진의 상태값으로 바인딩하는 인터페이스 레이어를 견고하게 구축했습니다.
Three.js 시각화
네이티브 브리지 환경의 리소스를 고려하여 React Native 내에 Three.js 기반 3D 렌더링 컨텍스트를 안정적으로 올렸습니다. 제한된 모바일 하드웨어 자원 안에서 프레임 드랍을 최소화하며, 인식된 식재료 데이터를 입체적이고 세련된 그래픽 요소로 컨버전하여 유저에게 차별화된 시각적 만족감을 제공했습니다.
프로젝트 성과
중소벤처기업부 예비창업패키지 지원사업을 통해 진행되었으며, 완성도 높은 프론트엔드 아키텍처와 시각적 기술 데모 성과를 인정받아 최종 평가에서 '최우수상'을 수상하는 쾌거를 이루었습니다. 아이디어를 실제 구동 가능한 고성능 비즈니스 모델 화면으로 구체화하는 엔지니어링 역량을 입증한 경험입니다.