&Dolphin [4th-Oasis-Hackathon]

돌고래들은 무리를 지어 생활하며 서로 협력합니다. 우리 팀 'And Dolphin'은 서로 협력하고, 'Endorphin'과 같이 사람들에게 행복을 주는 점이 비슷합니다.

Project name & Logo

프로젝트 소개

• 사용자인 유아, 아이들에게 재활용품 및 분리수거의 필수적인 이미지를 주는 웹
• 일상에 적용했을 시 사용자에게 재활용이 얼마나 중요한지, 쓰레기 분리수거의 중요성을 강조
• 헷갈리는 재활용품과 분리수거의 올바른 방법을 제공하는 유아용 캠페인 게임

기능 설명

• 게임 시작 버튼: 게임의 시작을 알리고 진행하는 기능

• 로딩 애니메이션: 로딩 중 사용자가 이목을 끌어 지루하지 않게 영상을 출력하는 기능

• 쓰레기 드레그하기: 게임 내에서 쓰레기를 움직여 올바르게 재활용하도록 하는 기능

• 다음 단계로 넘어가기: 1단계에서 2단계로 넘어가는 단편적인 기능
• 나가기: 게임을 종료하고 싶을 때 나갈 수 있게 하는 기능

• 엄마, 아빠에게 자랑하기: 카카오톡이라는 SNS와 연동되는 알림 서비스 기능이며, 이 기능의 의미대로 사용자인 아이가 게임한 결과를 부모님에게 알려주면서 자랑해주는 독보적인 기능

• 웹사이트 연동: 우리 팀에서 직접 만든 재활용품과 분리수거에 대한 올바른 지식을 알려주는 웹사이트와, 유아용 게임에 집중되어 있는 웹사이트가 서로 연결되는 기능 (위 카카오톡과 연동되는 기능 버튼 아래에, 추가로 이 기능의 버튼이 존재)

• 검색 기능: 재활용품에 대한 정보를 직접 찾아볼 수 있는 기능
• 오늘의 쓰레기: 쓰레기를 제시한 뒤 무작위로 추첨해 웹사이트 내에 쓰레기가 어떤 것이 있는지 보여주는 기능

기술 스택 (Technique Used)

Code

• React: JavaScript 라이브러리
• React DnD: 드래그 앤 드롭 기능 구현.
• HTML5Backend: React DnD와 함께 사용하여 드래그 앤 드롭 기능을 지원.

Design

• ibis Paint X: 캐릭터 디자인

  

  

• ibis Paint X Brush: 캐릭터 스케치

     

• Figma: 홈페이지 구성 및 디자인

페이지 주소

[분리배출 게임] - https://bunlissuko.netlify.app/

[분리배출 검색] - https://bunlissuko-searching.netlify.app/

시연 영상

https://youtu.be/mz_5JOibQkw