주요 기능은 완성하고 디자인 대강 마무리해서 Netlify에 배포했다. (아무래도 혼자서 하니까 점점 미루게 되어...)
https://myworld-travelmap.netlify.app/
나머지 기능과 내 앱만의 차별점도 추가하고, 성능도 개선하여야 한다.
느낀 점 - 기술적
처음으로 바닐라 자바스크립트로 프로젝트를 해보니까 확실히 자바스크립트가 많이 부족했다는 걸 체감했다. 그리고 초반에는 리액트가 너무나 그리워졌다...🥹
특히 어려웠던 부분은 상태 관리였다. 리액트에서는 주로 Hook을 사용해 state를 관리하거나, zustand 같은 라이브러리를 사용하여 관리하였는데 기초 문법조차 헷갈리는 자바스크립트로만 구현하려다 보니 너무 막막했다. 그래서 이 부분은 인프런에서 관련 강의를 구매하여 따로 공부를 했다. 강의에서 배운 것을 어떻게 이해하여 내 프로젝트에 적용했는지는 추후 따로 게시글로 남길 예정이다.
다음으로 은근히 시간이 오래 걸렸던 부분은 번들링에 관련해서다. 처음부터 Mapbox-gl 공식문서에서 하라는 대로 웹팩을 사용했으면 조금 빨랐겠지만, 번들링이 왜 필요하며 어떨 때 사용하는 것인지에 관해 제대로 알고 넘어가기 위해 시간을 들였다. 또한 따로 웹팩을 설치하여 사용해본 적은 없었기에 초기 설정(webpack.config.js)이나 webpack-dev-server 사용과 관련한 부분에서 조금 헤매기도 했다.
Mapbox-gl을 사용하는 부분은 공식 홈페이지를 일일이 찾아보며 이해하고, 구현하기엔 시간 소요가 너무 클 것이라 판단해 ChatGPT의 도움을 받았다. 그리하여 크게 어렵지 않게 진행할 수 있었다.
느낀 점 - 기타
습관 고치기
나는 평소에 리팩토링이나 디자인적인 부분을 초반부터 신경쓰느라 정작 중요한 기능 구현이 늦어지는 일이 종종 있었다. 이번에는 나의 그런 나쁜 습관에 대해 정확히 인지하고 다음과 같이 실행했다.
- 깃허브 칸반보드 활용
- 중요도 순으로 이슈 진행
- 동시 진행하는 이슈는 최대 3개로 제한
- 기능 구현할 때는 기능 구현에만 집중하기 !!!
이렇게 했더니 전처럼 일의 순서가 뒤엉키지 않고 나의 계획 아래에서 차근차근 진행됨을 느꼈다. 그래서 시간이 많지 않았음에도 주요 기능 모두 동작하고 디자인도 적당히 보기 좋게 완성이 된 것 같다.
마음가짐
프로젝트를 진행할 때면 내 마음 속에 나도 모르는 두려움이 뭉게뭉게 떠다닌다는 것을 알았다. 일을 미루는 행태의 원인도 바로 그것이었다.
두려움의 실체는 일을 제대로 해내지 못했을 경우 타인의 평가와 스스로에 대한 실망에 대한 것이고, 현재 내 실력과 내가 바라는 결과물 사이의 공백으로부터 발생한다. 두려움에 잠식되지 않으려면 두려움의 실체를 직시하고 인정한 뒤, 그 공백을 최대한 실현 가능한 구체적인 일들로 촘촘히 메꾸어야 한다.
앞으로의 계획
기능 추가
필수)
먼저 초기에 계획한 기능 중 아직 구현하지 못한 언어 설정 기능(ko/en)을 추가해야 한다.
또한 가본 나라 퍼센테이지 표시 기능과, 타 앱들과의 차별성을 위해 나라 선택 시 해당 나라의 인삿말을 텍스트와 음성으로 띄우는 기능도 추가할 것이다.
가능하면)
이미지 저장(공유) 기능 (초기에 계획했던 기능이나, mapbox 특성 상 어려울 수도 있어보임).
지도 확대/축소 기능.
팔레트 기능(사용자가 색상 선택할 수 있게).
디자인
- 현재는 선택된 나라를 같은 색상으로만 띄우고 있는데, 다양한 색상으로 알록달록하게 보여주도록 수정.
- 현재 검정색 배경 -> 별 박힌 우주 느낌 이미지 배경으로 깔기
성능 개선
- 지도 로딩 속도 정확히 측정하여 개선 (현재 약 1초)
- Light House로 초기 로딩 속도 및 seo 측정하여 개선
