이코에코(Eco²)

AI 기반 분리배출 안내 서비스

이코에코(Eco²) = Eco(AI 캐릭터) × Eco(환경)

지구를 형상화한 AI 캐릭터 '이코(Eco)'와 함께하는 분리배출 안내 환경 행동 코칭 서비스

---

🌱 2025 새싹 해커톤

AI와 함께 만드는 새로운 변화(Redesign everything with ai)

🏆 우수상 수상 🏆

---

🔗 Links

---

👀 웹 서비스 소개

배달·간편식 증가로 생활 폐기물, 특히 플라스틱 배출량이 급증하고 있음에도 시민들은 품목별 분리배출 기준을 정확히 알기 어려워 오분리 문제가 지속되고 있습니다. 기존 분리배출 앱들 역시 사용자가 직접 품목을 검색하거나 메뉴를 일일이 탐색해야 하는 번거로움으로 인해 실제 사용률이 낮은 상황입니다.

이 문제를 해결하기 위해 저희는 카메라 촬영만으로 AI가 폐기물을 자동 인식하고 즉시 분리방법을 안내해 사용자의 피로도를 최소화고, AI 캐릭터 ‘이코(Eco)’를 중심으로 한 게이미피케이션 요소 및 유상 수거함 위치 연계 등 현실 보상 기능을 제공하는 앱을 개발하고자 하였습니다. 이를 통해 저희는 분리배출을 ‘해야 하는 일’에서 ‘하고 싶은 경험’으로 전환하는 국내 최초의 AI 코칭 + 게임화 결합 분리수거 서비스를 제작하고자 합니다.

🛠️ 시스템 구성도 (Architecture)

👥 개발 팀 소개

• 개발 기간 : 📅 2025.10.23 ~ 2025.12.01

✨ 주요 기능

📸 AI 쓰레기 스캐너

사용자가 폐기물을 촬영하면 AI가 재질, 형태, 혼합 여부 등을 분석해 바로 분리배출 방법을 안내합니다.

💬 채팅

이코 캐릭터와 함께 분리배출 관련 질문에 대한 답변을 받을 수 있습니다.

🎮 게이미피케이션

분리배출 정확도에 따라 AI 캐릭터 수집 보상을 받으며 재미있게 환경을 보호할 수 있습니다.

💡 맞춤형 코칭 피드백

"이물질이 남았으니 미지근한 물에 헹궈보세요." 와 같이 분리배출에 대한 실시간 피드백을 제공합니다.

🗺️ 위치 기반 서비스

사용자 위치 기반 재활용품 회수 보상 거점과 친환경 매장을 안내합니다.

🛠 기술 스택

💻 Frontend Core

📚 Libraries & Tools

🔧 Development Tools

🚀 Deploy & Hosting

📦 주요 라이브러리 상세

카테고리	라이브러리	버전	용도
Core	React	19.1.1	UI 프레임워크
	React DOM	19.1.1	DOM 렌더링
Routing & State	React Router DOM	7.9.5	클라이언트 사이드 라우팅
	React Activation	0.13.4	페이지 상태 유지 (Keep Alive)
UI & Animation	Framer Motion	12.23.24	애니메이션 및 인터랙션
	TailwindCSS	4.1.16	유틸리티 우선 CSS 프레임워크
Map	React Kakao Maps SDK	1.2.0	카카오맵 연동
Build Tools	Vite	7.1.7	빌드 도구 및 개발 서버
	TypeScript	5.9.3	타입 안정성
	Vite Plugin PWA	1.1.0	PWA 지원
Code Quality	ESLint	9.38.0	코드 린팅
	Prettier	3.6.2	코드 포맷팅
Git Hooks & Deploy	Husky	9.1.7	Git 훅 자동화
	gh-pages	6.3.0	GitHub Pages 배포

🚀 실행 방법

📋 사전 요구사항

• Node.js 18.0.0 이상
• Yarn 4.9.2 이상

🔧 설치 및 실행

# 1️⃣ 저장소 클론
git clone https://github.com/eco2-team/frontend.git
cd frontend

# 2️⃣ 의존성 설치
yarn install

# 3️⃣ 환경 변수 설정 (.env 파일 생성)
VITE_KAKAO_APP_KEY=your_kakao_app_key

# 4️⃣ 개발 서버 실행
yarn dev

# 5️⃣ 빌드
yarn build

# 6️⃣ 배포
yarn deploy

📜 주요 스크립트

명령어	설명
yarn dev	개발 서버 실행
yarn build	프로덕션 빌드
yarn lint	ESLint 실행
yarn preview	빌드 결과 미리보기
yarn deploy	GitHub Pages 배포

---

📄 License

이 프로젝트는 Eco² Team의 소유입니다.

🌱 이코에코와 함께 지구를 지켜요! 🌍

_{Made with 💚 by Eco² Team}