AI를 활용한 IoT 플라스틱컵 수거함🌏Green Drop🌏

📜 1. 프로젝트 개요

👑 SSAFY 9기 2학기 공통 프로젝트 - 최우수상(1위) 수상 👑

📅 개발기간

2023년 7월 4일 ~ 8월 18일

💡 기획의도

무더운 여름철 잦은 음료 취식으로 인하여 플라스틱 컵 사용량이 점점 증가하고 있지만, 정작 쓰레기를 버릴 때는 내용물을 비우지 않거나, 홀더 같은 것들이 분리배출되지 않아 실제로 플라스틱 컵이 재활용되는 비율은 절반도 채 되지 않았습니다.

현재 우리 SSAFY 교육동을 보아도, 1층 카페 옆 플라스틱 전용 수거함이 있으나, 실제로는 종이 컵, 휴지, 커피 스틱 등이 함께버려져 분리배출이 제대로 되어있지 않거나, 강의 장 쓰레기통 같은 경우에도 일반쓰레기와 플라스틱 컵이 혼합되어 제대로 분리배출이 되지 않고 있다는 것을 알 수 있습니다.

실제 연수원 사용자 54명을 대상으로 진행한 설문조사에서도 평소 플라스틱 컵을 강의실 뒤편에 가장 많이 버리며 복도, 화장실, 1층 카페 순으로 정작 플라스틱 컵 전용 수거 함 인 1층 카페의 이용률은 가장 적은 것을 알 수 있었습니다.

다음과 같은 문제 상황 속에서 플라스틱 컵 전용 수거함에 넛지 효과를 불러 일으키기위한 수단으로 밸런스 게임을 접목하여 사용자로 하여금 플라스틱 컵을 투표수단으로 사용하여 자연스럽게 분리배출을 할 수 있도록 유도하는 프로젝트를 기획하였습니다.

👯 2. 팀원 소개

김장호	이대건	이승현	조영헌	천원준	최경인
@KJH0406	@leedaegeon	@leverest96	@marine-doe	@wonjunchun	@Fizioo0102
FE / PM / Design	FE	FE / Infra(FE)	IoT / AI	BE / AI / DB	BE / Infra(BE) / DB

💻 3. 기술 스택

Communication

Development-FE

버전 상세 정보

React.js : 18.2.0
Redux-toolkit : 1.9.5
Node.js : 18.16.1
Axios : 1.4.0
React-bootstrap : 2.8.0
react-query : 3.39.3
react-router-dom : 6.14.1
react-apexcharts : 1.4.1
react-calendar : 4.6.0
react-slick : 0.29.0
serialport : 11.0.1

Development - BE

버전 상세 정보

Java : openjdk : 17.0.7
Spring Boot : 3.0.8
Spring Security : 6.1.3
Gradle : 7.6.1
MySQL : 8.0.33
QueryDsl : 5.0.0
JPA : -
Hibernate : -

Deploy

버전 상세 정보

Ubuntu : 20.04 LTS
Jenkins : 2.422
Docker : 24.0.6

AIoT

버전 상세 정보

Python : 3.7.3
Tensorflow : 2.4.0
OpenCV : 47.1.0.25
Flask : 2.37
Pycharm : 10.1.4

📂 5. 화면 구성

• FIGMA 와이어 프레임 FIGMA 바로가기

📃 4. ERD

♻️ 6. 서비스 소개

🥤 플라스틱 컵 분리수거 함

모니터 화면에 해당일자 밸런스 게임 표시

플라스틱 컵을 투입구에 올려놓으면 무게 센서 및 웹 캠(Open CV 활용)을 통해 플라스틱 컵 여부를 판별하여 수거

🌏 Green Drop Ver.1 ~ 3 상세 이미지

🌏 Green Drop Ver. 1

• 구성 : 아두이노 + 라즈베리파이 + 무게센서

• 기능 소개 : 무게 센서를 통해서 순수 플라스틱 컵의 무게를 판단하여 컵 홀더 및 내용물 등을 수거하지 않도록 구현

🌏 Green Drop Ver. 2

• 구성 : 아두이노 + 노트북(AI) + 웹캠2개(side view)

• 기능 소개 : 웹 캠(Open CV 활용)과 Teachable Machine(Google) 통해 직접 학습된 모델을 사용하여 플라스틱 컵 여부를 판별하도록 구현

🌏 Green Drop Ver. 3

• 구성 : 아두이노 + 라즈베리파이(AI) + 웹캠1개(top view)

• 기능 소개 : 웹 캠을 Top view로 전환함으로써 라즈베리파이를 통해 플라스틱 컵 판별 AI 모델을 구동할 수 있는 환경 구현

🥤 웹서비스

• 서비스 소개
  

  • 저희 서비스 소개를 시작으로 react-slick Carousel을 사용하여 서비스의 다양한 기능을 소개하였습니다.
  
  
  

  ---

• 밸런스게임
  

  • 실시간으로 IoT 수거함 디바이스 화면에는 인기있는 밸런스 게임이 게시되어 있습니다.

  • 밸런스 게임 게시판에서 수거함 디바이스 화면에 표시될 다양한 게임 주제를 작성하고 확인할 수 있습니다.

  • 또한 지난 밸런스 게임 결과를 확인할 수 있으며, 카테고리 별로 게임 주제를 필터링하여 확인 할 수 있도록 구현하였습니다.

  • 밸런스 게임 조회
    

  
  

  • 밸런스 게임 등록
    

  
  

  • 밸런스 게임 수정/삭제
    

  
  

  • 댓글 기능
    

  
  

  ---

• 수거 현황
  

  • 실시간으로 IoT 수거함에서 수거되고 있는 일회용 플라스틱 컵의 개수를 확인할 수 있습니다.
  • 당일은 시간 별 수거되는 양을 확인할 수 있으며, 주간 수거된 개수도 함께 확인할 수 있도록 구현하였습니다.
  
  
  

  ---

• 부가 기능
  

  • 그린 스토리 : 환경에 도움이 되는 다양한 기사를 제공하고 있습니다.
  • 분리 배출 가이드 : 환경부에서 제공하는 분리수거 가이드와 평소 잘 알지 못했던 금속, 고철 류 등을 포함하여 더욱 다양한 분리 배출 가이드를 제공하고 있습니다.
  • 수거함 위치 : 저희 IoT수거함의 위치를 제공하여 더 많은 사용자가 동참할 수 있도록 하였습니다.
  
  
  

  ---

• 관리자 페이지
  

  • 실시간으로 수거되고 있는 플라스틱 컵의 개수 및 IoT수거함 디바이스 화면에 게시되어있는 당일의 밸런스 게임 주제를 대시보드를 통해 확인할 수 있습니다.
  • 밸런스 게임 게시판을 관리할 수 있습니다. (향후 확장성 고려)
  
  
  

🥤 실제 사용 영상 YOUTUBE 바로가기

• GreenDrop ver.1 유저 테스트

• GreenDrop ver.3

🥤 GreenDrop 사진첩

📷 유저테스트

📷 제작과정