[My toy] 💖여자친구💖를 위한 특별한 편지 - JavaScript

✍ 만들게된 계기

어느덧 여자친구와 만난지도 4년이 넘어가고 있다.
곧 4번째 생일을 맞이하는데, '이번에는 어떤 선물을 할까..' 라는 생각을 하다가
오랜만에 핸드폰에 있는 갤러리를 열어봤다.

사진을 잘 찍지 않는 탓에 내 폰에는 사진이 많이 없었다..
하지만 어디를 가면 꼭 한 장은 사진을 남겼었는데,

몇 번 훑어보다 문득 몇 장 없는 사진이라도 활용해서,
'지도에다 편지를 쓰면 어떨까?' 하는 기막힌(?) 아이디어가 떠올랐다.

---

💡 기술 스택 & 내용 구상

- 기술 스택

• HTML, CSS, Vanilla JS로 만들었다.

- api 및 내용 구상

어떤 지도 api를 쓸까 고민하다 예제가 잘 나와있는 카카오맵 api 를 쓰기로 했고,
웹으로 만들기로 했다.

지도 api는 선정했으니 이제 구상을 하면 되는데.. 그 내용은 이러하다!

• 선정한 위치에 지도 마커를 놓고 그 곳에 있는 링크를 클릭하면,
• 그 장소에 대한 회상 사진 및 짤막한 편지를 쓴 페이지가 나오게 구상
  (사진이 많이 없어서 가능할 것 같았다.)

---

🎉 구현 결과

- 가벼운 인터렉션

• 위에 조그마한 nav바를 둬서 가벼운 인터렉션과 간단한 말을 넣어줬다.

- 주요 기능

• 커스텀 오버레이를 이용해 해당 장소 링크를 조금 예쁘게 바꿔줬다.

• 링크 클릭시 갑자기 페이지가 나오는게 어색해서 로딩중.. 이라는 화면을 잠깐 띄워주고 사진과 글귀를 넣어준 페이지를 보여줬다.

• 마지막으로 보여줄 화면에는 노래도 한 곡 삽입해줬다 ㅎㅎ

📝 여러개의 마커 표시하기 예제
📝 커스텀 오버레이 예제

- 추가 기능

• 카카오맵 api에서 제공해주는 클러스터러 라이브러리를 이용하여 어느 정도 지도가 축소되면 해당 지역의 마커 개수를 클러스터링해서 보여줬다.

📝 마커 클러스터러 라이브러리 예제

• 그리고 지도가 확대됐을 때, 다른 마커로 편하게 이동할 수 있게 Tracker도 추가로 만들어줬다.

📝 Tracker 예제

---

📌 만든 후기

api를 처음 다뤄봐서 그런지 원하는대로 구현하기가 조금 어려웠다.
그래도 docs문서가 세세히 나와있어서 어떻게든 되긴했다. (카카오 👍)

css로 지도를 꾸며줄 때 창 하단에 Tracker가 잘리는 불상사가 벌어졌는데,
원인은 위에 nav바를 생성해줌으로써 발생하는 것이었다.

아기자기한 nav바를 포기할 수 없어 처음에는 nav의 css를 이것저것 만져봤지만.. 해결이 되지 않았다. (아래가 돌아오면 위가 nav에 가려짐 😭)

코드도 뜯어보니 트래커가 맵 끝을 기반으로 생성이돼서 js 코드 내부에 좌표를 바꿔줘야 위치가 변경되는듯 했다.

이렇게 복잡하게는 하기 싫어서 하루내내 고민하다 문득!
'그냥 map의 height를 좀 줄이면 되는거 아닌가?' 하는 생각에 바로 적용해주니 하루내내 고민했던게 부끄러워질만큼 쉽게 해결됐다. ㅋㅋ (멍청이!)

좀 더 예쁘게 만들고 싶어 이것저것 찾아보면서 꾸며봤으나..
ㅋㅋ 이게 내 최선인듯 하다. (내가 미아내!)

허접하지만.. 그래도 좋아해 주겠지..?

---

P . S - 사적인 공간들과 사진들이 많아 링크는 따로 올리지 않겠습니다..!
긴 글 읽어주셔서 감사합니다 ㅎㅎ 그리고.. 다행히도 많이 좋아해 줬습니다!