세계지도에 내가 가본 나라를 색칠하여 땅따먹기하듯 기록할 수 있는 웹앱을 만들어 배포하려고 한다.
내가 여행 가본 나라들을 한눈에 보고, 또 앞으로는 어디를 색칠할지 기대할 수 있는 그런 앱이 되었으면 한다.
일정 및 프로젝트 관리
첫 2주동안 대부분의 기능 구현 > 2주간 디자인 및 배포.
작은 프로젝트인 만큼 기간은 한 달로 잡았다. 그래도 혼자서 진행하는 프로젝트이고, 배포까지 하려면 길지 않은 시간이라고 생각해 빠른 템포로 진행하려 한다.
또한 비록 개인 프로젝트이지만 생각이 어디로 튈지 모르는 내 특성을 고려하여 Github에서 칸반으로 할 일들을 관리할 예정이다. (동시에 개발중인 이슈 최대 3개로 제한)
주요기능과 부가기능
주요기능
- 세계지도 뷰와 리스트뷰로 나뉨.
- 리스트뷰에서는 전체 나라 중 내가 가본 나라를 검색하여 체크할 수 있음.
- 세계지도 뷰에서는 리스트뷰에서 내가 가봤다고 체크한 나라들이 색칠되어 보임.
부가기능
- 언어 설정
- 공유 (세계지도 뷰 캡처본)
사용할 기술과 채택한 이유
1. 지도 시각화
Mapbox GL JS
https://www.mapbox.com/mapbox-gljs
위에서도 언급했듯 이 앱에는 세계지도 뷰가 있는데, 우선은 2D 형태의 세계지도로 만들고 가능하면 3D 뷰도 추가할 예정이다. 또한 나라별로 동적으로 색칠 유무가 바뀌어야 한다. 이 세 가지가 모두 가능하며 자유롭게 디자인을 변경할 수 있고 많이 사용되는 Mapbox GL JS를 사용하고자 한다.
2. 프론트엔드
Vanilla JS, HTML, CSS
(사실 위에서 말한 Mapbox GL JS도 결국 자바스크립트 라이브러리이기 때문에 완전히 바닐라 JS라고 말하긴 어렵지만..)
Vanilla JS로 개발하려고 하는 이유는 이 웹앱의 경우 매우 간단하기 때문에 React.js나 Next.js 같은 라이브러리/프레임워크를 사용함으로써 얻는 득(생산성)보다 실(성능 저하)이 크다고 생각했다. 또한 최근에는 계속 리액트 혹은 넥스트를 사용해왔는데 오히려 자바스크립트에 대한 이해가 조금 떨어지는 듯한 느낌이 들어서 라이브러리/프레임워크 의존 없이 자바스크립트만으로 코드를 짜면서 언어에 대한 이해도와 숙련도를 높일 수 있지 않을까 하는 기대가 있었다.
그래서 일단은 자바스크립트와 Web API만을 사용한 아주 Light한 웹앱을 구현하고, 추후 기능이 추가되는 등의 이유로 생산성이 많이 떨어지게 되는 경우 React/Next.js로 개선할 계획이다.
3. 배포
Netlify
사용법 (출처:조코딩 유튜브)
내 컴퓨터로 24시간 돌릴 수 없기 때문에 서버를 임대해주는 웹 호스팅 서비스를 이용해야 한다. AWS는 1년동안만 무료로 사용 가능하고, 계속 무료로 사용 가능한 서비스 중 백엔드 없는 가벼운 사이트를 올리기 좋은 Netlify를 선택했다. (단, 무료는 1개 사이트에 한해, 월 빌드 시간 300분/ 용량 100G로 제한됨.)
목표
이 웹앱을 만들면서 내가 얻고자 하는 것, 시도해보고자 하는 것은 다음과 같다.
- 웹에 배포되어 모두가 들어와 볼 수 있는 나만의 앱!
- 개발 속도 및 프로젝트 진행 속도 상승
- 자바스크립트에 대한 이해도 상승
- Lighthouse로 성능, SEO 측정하여 개선
- 애니메이션 효과 사용
