우아한테크코스 8기 프리코스 오픈 미션, 감정지도를 구현한 저장소입니다.
때는 2025년 11월 7일..
👩🏻는 👨🏻와 12시에 점심 약속을 잡아두었습니다.
하지만 12시에 끝날 예정이던 특강이 예정보다 20분이나 늦게 종료되었고..
👨🏻는 1시에 수업이 있는 상황이었습니다.
초조함에 사로잡힌 👩🏻는 자타공인 길치 였음에도 평소처럼 지도를 켜서 길을 확인하는 대신 감만 믿고 빠르게 걸음을 옮겼습니다.
그러나 역시 길치답게 가장 돌아가는 길을 선택해 걷고 있었습니다.
돌아왔다며 한소리를 듣고 다짐했습니다.
더 이상 몸이 고생할 수 없다. 길 외우고야 말겠다.
그 동안의 경험을 돌아보며 저는 길을 좌표로 외우는 사람이 아니라 그 길 위에서 있었던 일과 함께 기억하는 사람임을 깨달았습니다. 이 깨달음을 바탕으로 내가 걸었던 순간의 감정과 이야기를 지도 위에 함께 기록하는 감정 지도를 만들어 보자는 아이디어로 이 프로젝트를 시작하게 되었습니다.
나의 감정 지도는 사용자가 걸어온 길을 단순한 이동 경로가 아니라 그때그때의 감정과 기억이 담긴 기록으로 남기기 위한 웹 기반 감정 기록 서비스입니다.
세종대학교 캠퍼스를 배경으로 사용자는 지도를 클릭해 특정 위치에서 느꼈던 감정과 짧은 메모를 남길 수 있습니다. 이렇게 기록된 감정들은 지도 위의 마커로 시각화되며 원하는 시점에 전체 감정 기록을 JSON 파일로 내보내어 하나의 데이터로 보관할 수 있습니다. 또한 파일 불러오기를 통하여 사용자의 감정 지도를 공유할 수 있습니다.
- 길치인 내가 길을 좌표가 아닌 감정과 추억으로 기억할 수 있는 도구 만들기
- 일상 속에서 스쳐 지나가는 감정들을 공간과 함께 시각화해서 다시 돌아볼 수 있게 하기
- 프론트엔드만으로도 지도,상호작용,데이터 저장(JSON 내보내기) 흐름을 경험해 보기
-
HTML / CSS / JavaScript
- 순수 HTML, CSS, JS로 화면 구성 및 상호작용 구현
- DOM 조작, 이벤트 처리(지도 클릭, 버튼 클릭), JSON 생성/다운로드 로직 작성
-
Leaflet.js
- 오픈소스 지도 라이브러리
- 세종대학교 일대를 중심으로 하는 인터랙티브 지도 구성
- 지도 클릭 이벤트를 사용해 마커 생성 및 팝업 표시
-
OpenStreetMap 타일
- Leaflet의 타일 소스로 사용
-
브라우저 내장 Web API
- File API (Blob, FileReader)
- 사용자가 남긴 감정 기록을 자바스크립트 객체 배열로 관리하고 이를 JSON 문자열로 변환한 뒤 Blob을 통해 emoMap-spots.json 파일로 다운로드
- File API (Blob, FileReader)
1. 페이지 로드 & 지도 초기화
- 사용자가 index.html을 브라우저에서 열면 Leaflet 라이브러리와 OpenStreetMap 타일이 로드되고 script.js가 실행되면서 지도가 만들어집니다.
- script.js 상단에서 세종대학교 중심 좌표를 지정합니다.
- 이 좌표를 기준으로 Leaflet 지도를 생성하고, 확대/이동 범위를 세종대 근처로 제한합니다.
- OpenStreetMap 타일을 지도 배경으로 추가하여 세종대 일대를 시각적으로 표시합니다.
2.DOM 요소 & 데이터 배열을 이용해 기본 상태 준비
- 감정 선택창, 메모 입력창, 감정 이모지 버튼들, JSON 저장/불러오기 버튼을 각각 DOM에서 가져옵니다.
- 사용자가 마지막으로 클릭한 지도 좌표를 기억할 clickedLatLng와, 감정 기록들을 담아둘 spots 배열을 준비합니다.
3. 지도 클릭을 통한 감정 입력
- 사용자가 지도 위 임의의 위치를 클릭하면 해당 좌표가 clickedLatLng에 저장됩니다.
- 동시에 감정 선택창이 화면에 나타나고 사용자는 이모지(감정)와 한 줄 메모를 입력할 수 있습니다.
4. 감정 이모지 선택 후 마커 생성 & 배열 저장
- 이모지 버튼을 누르면
- 마지막으로 클릭한 좌표(clickedLatLng)
- 선택한 감정(emotion)
- 입력한 메모(memo)를 이용해 하나의 spot 객체를 생성합니다.
- 생성된 spot 객체를 spots 배열에 추가합니다.
- createMarker(spot, true)를 호출하여 지도 위에 마커를 생성하고 팝업에 감정과 메모를 표시합니다.
- 감정 선택창을 다시 숨기고 다음 입력을 위해 상태를 초기화합니다.
5. 감정 기록을 다운로드하여 JSON으로 내보내기
- 상단의 '내 감정 기록 저장하기' 버튼을 누르면 현재까지 spots 배열에 쌓인 감정 기록을 JSON 문자열로 변환합니다.
- 이 문자열을 Blob으로 감싼 뒤 emoMap-spots.json 파일 형태로 브라우저에서 바로 다운로드할 수 있도록 합니다.
6. JSON 파일 불러오기
- 사용자가 파일 입력을 통해 JSON 파일을 선택하면 FileReader로 파일 내용을 읽어옵니다.
- JSON.parse를 사용해 문자열을 자바스크립트 객체 배열로 변환합니다.
- 변환된 각 기록을 spots 배열에 넣고 createMarker를 호출해 지도 위에 마커를 다시 그려줌으로써 이전에 저장했던 감정 지도를 복원할 수 있습니다.