❶ 배경
왜 ‘제주도의 멸종위기 동물’에 초점을 두어 기획되었나요?
Ⅰ급 멸종위기 동물
전국 49종 중 16종
Ⅱ급 멸종위기 동물
전국 127종 중 72종
서식지를 잃고 서서히 지구를 떠나고 있는 이 동물들은, 사람들에게도 관심을 받지 못하고 잊혀지고 있답니다.
잊혀지는 동물들과 그 동물들을 아프게 하는 여러 환경 문제를 쉽고 재미있게 알려주어 제주도의 멸종위기종, 더 나아가 환경 보호에 자연스럽게 관심을 가질 수 있다면 어떨까요?
그래서 탄생된 저희의 서비스! 바로 또바기도감이에요.
❷ 서비스 소개
또바기도감은 어떤 서비스인가요?
‘또바기’란 ‘언제나 한결같이 꼭 그렇게’라는 뜻을 가진 제주도 방언으로, 제주도의 멸종위기 동물들이 도감으로 남아 언제나 한결같이 꼭 그렇게 우리의 곁에 함께할 것이라는 뜻을 담았어요.
‘또바기도감’은 제주도 멸종위기 동물을 위한 도감으로, 동물들의 실제 서식지에 직접 방문해 환경 문제 관련 미션을 수행하면 동물 카드를 수집할 수 있는 참여형 게이미피케이션 서비스예요.
서비스의 기능이 궁금해요.
또바기도감의 주요 기능은 크게 두가지예요.
도감
서식지도
서식지도
제주도 지도에서 서식지를 클릭해 동물의 실루엣으로 흥미로운 힌트를 얻고 해당 지역에 직접 방문해 보아요.
서식지에 도착하면 동물을 찾을 수 있어요! 환경오염으로 인해 아파하는 동물에게 도움을 주어 카드를 수집해 보아요.
도감
수집한 동물들을 도감에서 다시 만나 보아요. 언제나 한결같이 꼭 그렇게 저희 곁에 머무를 거랍니다.
아키텍쳐는 어떻게 구성되어 있나요?
안전하고 안정적인 배포를 위한 아키텍쳐 구성
•
직접 구입한 Domain(ttobagi.site) 연결과 SSL인증을 적용(프론트: www.ttobagi.site, 백엔드: api.ttobagi.site)하여 안전한 웹서버를 구축했어요.
•
프론트는 Cloud Front와 S3를 이용해 정적 웹 호스팅으로 배포하였고, 백엔드는 ELB와 EC2(t2.micro)를 연결해 배포했어요.
•
특히 프론트는 Github Action을 이용해 자동 배포 환경을 구성했어요.
❸ 핵심 기술
프론트엔드에서 활용된 기술이 궁금해요.
쉽고 빠른 사용자 경험을 제공하는 Single Page Application
다음과 같은 기술을 사용해 React 프로젝트를 구현했어요.
React
JSX 문법과 Virtual DOM을 사용하는 JavaScript SPA 라이브러리
Axios
Node.js와 브라우저를 위한 HTTP 클라이언트
Kakao Map API에 여러 기능을 추가한 지도 구현
•
카카오맵 API를 사용해 지도 기능을 구현했어요.
•
Geolocation을 활용해 사용자의 현재 위치를 표시했어요.
◦
다양한 브라우저를 지원하기 위해 SSL 인증서를 생성하여 https 환경으로 변경했어요.
•
다수의 마커를 생성하고, 마커 위에 마우스를 올려놓으면 이름과 주소가 보이도록 만들었어요.
Styled-Components를 사용한 컴포넌트별 스타일 적용
•
별도의 CSS 파일 없이 Styled-Components를 사용해 컴포넌트별로 스타일을 적용했어요.
•
컴포넌트 단위 스타일링을 통해 코드 재사용성을 높이고, 효과적인 UI 단위 테스트를 진행할 수 있어요.
Kakao Login API를 활용한 로그인 구현
•
카카오로부터 인가코드를 받고 백엔드에 넘겨주었어요.
•
백엔드에서 온 토큰을 확인하고 홈화면으로 리다이렉트 해주었어요.
Axios 라이브러리를 활용한 HTTP 비동기 통신 라이브러리
•
요청 객체에 url이 존재하고 자동으로 JSON 데이터 형식으로 전환해주어 사용했어요.
•
react hook 기반에서는 useEffect를 사용해 lifeCycle을 관리했어요.
•
사용자가 수집한 동물 도감을 전체 도감과 비교해 수집하지 않은 것은 색깔이 없는 이미지로 가져왔어요.
백엔드에서 활용된 기술이 궁금해요.
쉽고 빠르게 조회 · 추가 할 수 있는 동물 도감 API 구축
•
동물 도감을 쉽게 조회 및 추가할 수 있도록 모델 API를 설계했어요.
•
다음과 같은 기술을 사용해 REST API 서버를 설계 및 배포했어요.
Django Rest Framework (DRF)
Python 기반의 Django REST API 프레임워크
NGINX
빠른 정적파일(이미지 등) 서빙 담당
Kakao Social Login과 JWT를 활용한 안전한 로그인
•
JSON Web Token (JWT)을 이용해 안전한 로그인 API를 구현했어요.
•
백엔드에서 카카오 로그인 API를 JWT와 연결하여 더욱 안전한 로그인 API를 설계했어요.
❹ 디자인
서비스의 디자인이 궁금해요.
멸종위기 동물과 환경 문제에 대한 호기심과 관심을 이끄는 UX
사용자 경험은 다음과 같이 설계했어요.
서비스에 진입하자마자 모든 동물 리스트를 확인할 수 있어요
수집 전에는 동물의 실루엣만 확인할 수 있으며 수집을 해야만 동물 카드를 확인할 수 있어요
특정 지역에 도달하면 바로 동물을 수집할 수 있어요
동물들의 실제 서식지에 직접 방문해 환경 문제 관련 미션을 수행해야만 동물 카드를 획득할 수 있어요
간결하고 큼지막한 UI와 귀여운 느낌의 일러스트
한 눈에 들어오는 디자인으로 진입장벽 없이 누구나 쉽고 즐겁게 사용할 수 있어요.
❺ 팀 소개
안녕하세요, 저희는 구름톤 3기 또바기입니다!
또바기 포기하지 않는다!
E가 1명, I가 4명?! (그래서 B1A4처럼 팀 이름을 E1I4로 지었지만 읽기가 어려워 개명했어요)
)
+ 앞으로의 계획
기획
디자인
프론트엔드
백엔드