EcoLens 🌍 — 모든 물체 스캔, 탄소 영향을 확인하세요 (Haiti 및 자원 제한 환경용)

발행: 2시간 전 (2026년 4월 20일 AM 11:52 GMT+9)

6 분 소요

Source: Dev.to

내가 만든 것

EcoLens는 식사, 제품, 차량, 전자 기기 등 어떤 물체든 사진을 찍으면 즉시 탄소 발자국을 확인하고, 친환경 대안과 실제 지역 상황에 맞춘 조언을 제공하는 웹 앱입니다.

EcoLens만의 차별점: 하이티와 같은 자원 제한 환경을 위해 특별히 설계되었습니다. 대부분의 “그린” 앱이 제시하는 솔루션(전기차, 퇴비 서비스, 유기농 슈퍼마켓 등)은 현지에 존재하지 않지만, EcoLens는 여러분이 실제로 사는 곳에 맞는 현실적이고 실행 가능한 조언을 제공합니다.

데모

(데모 링크 또는 임베드가 가능한 경우 여기에 추가할 수 있습니다.)

내가 해결하고자 하는 문제

대부분의 carbon‑footprint 도구는 서구 환경에 맞게 설계되었습니다. 다음과 같은 제안을 합니다:

“Buy an electric vehicle” ❌ 아이티에서는 이용할 수 없음
“Use your composting service” ❌ 존재하지 않음
“Shop at the organic supermarket” ❌ 접근 불가

EcoLens는 여러분이 사는 곳에서 실제로 효과적인 조언을 제공합니다.

How It Works

📸 사용자가 어떤 물체의 사진을 업로드합니다.
⚙️ React 프런트엔드가 이를 ASP.NET Core 백엔드에 전송합니다.
🤖 백엔드가 OpenRouter API를 통해 Google AI 모델을 호출합니다.
📊 AI가 물체를 식별하고 환경 영향을 계산합니다.
✅ 결과가 탄소 점수, CO₂ 추정치, 친환경 대안 및 지역‑맥락 팁과 함께 표시됩니다.

특별 기능: 아이티 요리 인식

EcoLens는 아이티 요리를 이름으로 인식하고 문화적으로 적절한 조언을 제공합니다:

🍚 Diri djon djon (검은 버섯 밥)
🥩 Griot (아이티식 튀긴 돼지고기)
🎃 Soup joumou (호박 수프)
🍌 Bannann peze (두 번 튀긴 플랜테인)
🌽 Maïs moulu ak legim (야채와 함께 갈은 옥수수)

기술 스택

계층	기술
Frontend	React 19 + Vite + Axios
Backend	ASP.NET Core 9 (C#)
AI	Google Gemma via OpenRouter API
Dev Assistant	GitHub Copilot

왜 OpenRouter를 직접적인 Gemini API 대신 사용하는가?

Google Gemini API는 지리적 제한으로 인해 아이티 및 많은 글로벌 사우스 국가에서 무료 티어 접근이 차단됩니다. OpenRouter를 통해 라우팅하면 이러한 제한 없이 Google의 Gemma 모델에 접근할 수 있어, Google AI를 핵심에 두면서 전 세계적으로 이용 가능하게 합니다.

시스템은 다섯 개 모델에 대한 자동 폴백을 사용하여 최대 신뢰성을 제공합니다:

google/gemma-3-27b-it:free
google/gemma-3-12b-it:free
google/gemma-4-31b-it:free
nvidia/nemotron-nano-12b-v2-vl:free
google/gemma-3-4b-it:free

GitHub Copilot을 활용한 AI 지원 개발

GitHub Copilot은 EcoLens 개발 전반에 걸쳐 다음과 같이 사용되었습니다:

ASP.NET Core 보일러플레이트 및 컨트롤러 구조 생성.
OpenRouter API 통합 디버깅.
JSON 파싱 로직 개선 제안.
React 컴포넌트 개발 속도 향상.

내가 겪은 도전 과제

1. Google Gemini API 지리적 제한

가장 큰 어려움은 Gemini 무료 티어가 아이티에서 차단된다는 것을 발견한 것이었습니다. 해결책은 Google Gemma 모델을 사용하는 OpenRouter였습니다.

2. 경고 없이 무료 모델이 폐기됨

앱이 중단되지 않도록 다섯 가지 모델을 순차적으로 시도하는 자동 폴백 시스템을 구축했습니다.

3. AI로부터 일관된 JSON 얻기

Gemma는 때때로 JSON 앞이나 뒤에 텍스트를 반환합니다. 응답에서 첫 번째 {와 마지막 }를 찾아내는 견고한 추출 로직으로 해결했습니다.

내가 배운 것

멀티모달 AI API(이미지 + 텍스트)를 ASP.NET Core에 통합하는 방법.
글로벌 사우스 개발자에게 영향을 미치는 지리적 API 제한의 현실.
여러 무료 AI 모델을 활용한 신뢰할 수 있는 폴백 시스템 구축 방법.
실제 로컬 컨텍스트에 맞춰 개발하는 중요성.

다음 단계

모바일 최적화 카메라 캡처.
사용자별 과거 분석 기록.
저연결 환경을 위한 오프라인 모드.
카리브해 및 아프리카 지역에 대한 지원 확대.

소스 코드

🔗 GitHub Repository

❤️와 함께 아이티에서 제작되었습니다 — DEV Weekend Challenge — Earth Day 2026 🌱
OpenRouter + Google Gemma AI + GitHub Copilot으로 구동됩니다.