EcoSense AI: 60초 안에 탄소 발자국을 확인하세요

Source: Dev.to

EcoSense AI – AI‑기반 탄소 발자국 분석기 (2026년 지구의 날)

작동 방식

1. Transportation – 통근 수단 및 거리 🚗
2. Diet – 고기 위주부터 비건까지 🍽️
3. Home Energy – 화석 연료에서 100 % 재생 가능 에너지 ⚡
4. Shopping – 패스트 패션에서 최소/중고품까지 🛍️

Google Gemini 2.0 Flash가 답변을 분석하고 다음을 반환합니다:

• 0‑100 점수와 문자 등급이 포함된 친환경 점수
• 연간 CO₂ 배출량(kg) 추정치(전 세계 평균 대비)
• 시각적 지표가 포함된 카테고리별 영향 분석
• 발자국을 줄이기 위한 개인 맞춤형 팁 5가지
• 복사하여 게시할 수 있는 공유 가능한 지구의 날 서약문

목표는 탄소 인식을 접근하기 쉽고 실천 가능하게 만드는 것—실용적이며 설교식이 아닙니다.

실시간 데모: (약 60 초 소요)

기능

• 연간 탄소 발자국 추정치 계산
• 친환경 등급 부여 (A+ ~ F)
• 카테고리별 영향 분석 표시
• 개인 맞춤형 감축 팁 5가지 제공
• 공유 가능한 지구의 날 서약문 생성

기술 스택

• Next.js 16 (정적 내보내기)
• Tailwind CSS (맞춤형 지구의 날 테마)
• Google Gemini 2.0 Flash (서버‑사이드 프록시를 통한 AI 분석)
• Cloudflare Pages (호스팅 + 서버리스 함수)
• Lucide React (아이콘)

아키텍처

flowchart TD
    Browser["Browser (Static HTML/JS)"]
    API["/api/generate (Cloudflare Function)"]
    Gemini["Google Gemini API"]
    
    Browser --> API --> Gemini
    style Browser fill:#f9f,stroke:#333,stroke-width:2px
    style API fill:#bbf,stroke:#333,stroke-width:2px
    style Gemini fill:#bfb,stroke:#333,stroke-width:2px

• API 키는 Cloudflare Function 내부에만 존재하며 클라이언트로 전달되지 않습니다.
• 프런트엔드는 구조화된 프롬프트를 /api/generate 로 전송합니다.
• 함수는 서버‑사이드에서 Gemini API 키를 추가하고 Gemini REST API를 호출한 뒤, 생성된 텍스트만 반환합니다.

설정

npm install
npm run build
# Deploy
wrangler pages deploy out
# Remember to set GEMINI_API_KEY in Cloudflare Pages environment variables

주요 파일

• app/page.tsx – 단계별 마법사, 친환경 점수용 SVG 도넛 차트, 결과 표시가 포함된 전체 React UI.
• functions/api/generate.js – Gemini API를 프록시하는 Cloudflare Function(키가 브라우저에 노출되지 않음).
• app/globals.css – 맞춤형 지구의 날 녹색 테마.

기타 주목할 만한 컴포넌트

• SVG 도넛 차트 – 친환경 점수를 시각적으로 표현.
• 색상‑코드된 영향 배지 (빨강 → 초록) – 각 옵션별 표시.
• 카테고리별 분류 바 – 결과 화면에 표시.
• 클립보드 복사 지구의 날 서약문 – 소셜 공유용.

Google Gemini 최적 활용

Gemini는 네 가지 간단한 입력을 포괄적인 환경 분석과 개인 맞춤형 권고안으로 변환하는 핵심 엔진입니다. 프롬프트 엔지니어링을 통해 Gemini가 일관된 JSON 형태와 현실적인 CO₂ 추정치를 반환하도록 하여 결과가 실제로 유용하도록 합니다.

제작 목적: DEV Weekend Challenge – Earth Day Edition
GitHub에서 보기: (실제 URL로 교체)