본 프로젝트는 2022년 11월 카카오, 구름에서 주최하여 진행한 제 3회 9oorumthon 출품작입니다.
환경부가 2022년에 지정한 제주도의 멸종위기 야생동물은 무려
🦅 Ⅰ급 멸종위기 동물 전국 49종 중 16종
🦎 Ⅱ급 멸종위기 동물 전국 127종 중 72종 에 달해요.
서식지를 잃고 서서히 지구를 떠나고 있는 이 동물들은, 사람들에게도 관심을 받지 못하고 잊혀지고 있답니다.
🌏 잊혀지는 동물들과 그 동물들을 아프게 하는 여러 환경 문제를 쉽고 재미있게 알려줌으로써
제주도의 멸종위기종, 더 나아가 환경 보호에 자연스럽게 관심을 가질 수 있다면 어떨까요?
그래서 탄생된 저희의 서비스! 바로 또바기도감이에요.
🚶 ‘또바기’란 ‘언제나 한결같이 꼭 그렇게’라는 뜻을 가진 제주도 방언으로,
제주도의 멸종위기 동물들이 도감으로 남아 언제나 한결같이 꼭 그렇게 우리의 곁에 함께할 것이라는 뜻을 담았어요.
👊 ‘또바기도감’은 제주도 멸종위기 동물을 위한 도감으로, 동물들의 실제 서식지에 직접 방문해 환경 문제 관련 미션을 수행하면 동물 카드를 수집할 수 있는 참여형 게이미피케이션 서비스예요.
또바기도감의 주요 기능은 크게 두 가지예요.
- 📖 도감
- 🗺️ 서식지도
제주도 지도에서 서식지를 클릭해 동물의 실루엣으로 흥미로운 힌트를 얻고 해당 지역에 직접 방문해 보아요.
서식지에 도착하면 동물을 찾을 수 있어요! 환경오염으로 인해 아파하는 동물에게 도움을 주어 카드를 수집해 보아요.
수집한 동물들을 도감에서 다시 만나 보아요. 언제나 한결같이 꼭 그렇게 저희 곁에 머무를 거랍니다.
⚙ 안전하고 안정적인 배포를 위한 아키텍쳐 구성
- 직접 구입한 Domain(ttobagi.site) 연결과 SSL인증을 적용(프론트: www.ttobagi.site, 백엔드: api.ttobagi.site)하여 안전한 웹서버를 구축했어요.
- 프론트는 Cloud Front와 S3를 이용해 정적 웹 호스팅으로 배포하였고, 백엔드는 ELB와 EC2를 연결해 배포했어요.
- 특히 프론트는 Github Action을 이용해 자동 배포 환경을 구성했어요.
🔥 쉽고 빠른 사용자 경험을 제공하는 Single Page Application
아래 기술을 사용해 React 프로젝트를 구현했어요.
- React: JSX 문법과 Virtual DOM을 사용하는 JavaScript SPA 라이브러리
- Styled-Components: 컴포넌트 단위 스타일링을 지원하는 CSS-in-JS 라이브러리
🗺️ Kakao Map API에 여러 기능을 추가한 지도 구현
- 카카오맵 API를 사용해 지도 기능을 구현했어요.
- Geolocation을 활용해 사용자의 현재 위치를 표시했어요.
- 다양한 브라우저를 지원하기 위해 SSL 인증서를 생성하여 https 환경으로 변경했어요.
- 다수의 마커를 생성하고, 마커 위에 마우스를 올려놓으면 이름과 주소가 보이도록 만들었어요.
👤 Kakao Login Api를 활용한 로그인 구현
- 카카오로부터 인가코드를 받고 백엔드에 넘겨주었어요.
- 백엔드에서 온 토큰을 확인하고 홈화면으로 리다이렉트 해주었어요.
💡 Axios 라이브러리를 활용한 HTTP 비동기 통신
- 요청 객체에 url이 존재하고 자동으로 JSON 데이터 형식으로 전환해주어 사용했어요.
- react hook 기반에서는 useEffect를 사용해 lifeCycle을 관리했어요.
- 사용자가 수집한 동물 도감을 전체 도감과 비교해 수집하지 않은 것은 색깔이 없는 이미지로 가져왔어요.
🔥 쉽고 빠르게 조회 · 추가 할 수 있는 동물 도감 API 구축
- 아래 기술을 사용해 REST API 서버를 설계 및 배포했어요.
- Django Rest Framework (DRF): Python 기반의 Django REST API 프레임워크
- NGINX: 빠른 정적파일(이미지 등) 서빙 담당
- 동물 도감을 쉽게 조회 및 추가할 수 있도록 모델 API를 설계했어요.
🔒 Kakao Social Login과 JWT를 활용한 안전한 로그인
- JSON Web Token (JWT)을 이용해 안전한 로그인 API를 구현했어요.
- 백엔드에서 카카오 로그인 API를 JWT와 연결하여 더욱 안전한 로그인 API를 설계했어요.
프론트엔드
🙋 앞으로 프론트엔드에서는 이런 걸 구현해 볼 예정이에요.
- JavaScript에서 TypeScript로 리팩토링을 진행할 예정이에요.
- 보다 나은 사용자 경험을 위해 React Native를 활용하여 모바일 앱을 개발할 예정이에요.
백엔드
🙋 앞으로 백엔드에서는 이런 걸 구현해 볼 예정이에요.
- 공공 데이터 포털의 오픈 API를 활용하여 제주도 멸종위기 동물을 조회해 도감에 추가해 갈 예정이에요.
- 주변 상권 데이터를 조회하여 도감 지도와 연결해볼 예정이에요.
- 모은 도감이나 동물 카드를 SNS에 공유할 수 있도록 API를 설계할 예정이에요.
- 더욱 간편하고 안정적인 배포를 위해 Kubernetes를 도입해볼 예정이예요.
또바기, 포기하지 않는다! 👊
E가 1명, I가 4명… (그래서 원래 팀 이름이 E1I4였지만 읽기가 어려워 개명했어요😂)
왼쪽부터 순서대로 또바기 팀원들을 소개해 드려요.
 디자이너:윤가빈 |
프론트엔드:김원표 |
프론트엔드:장지아 (팀장) |
백엔드:조은찬 |
기획:신홍석 |