바이브코딩과 함께하는 주말 프로젝트!

이거 어디서 찍었더라? 사진을 찍은 위치 지도에 썸네일 표시해주는앱 입니다.

예전에 구글맵의 타임라인에 있어서 잘 쓰던 기능인데 없어져서 만들어봤습니다.

-관련글 : 추억을 구글에게 도둑맞았습니다-

내 컴퓨터에 사진 들어있는 폴더를 지정하면 지도상의 찍은 위치에 썸네일을 뿌려줍니다. 썸네일을 누르면 큰 사진이 뜹니다.

하부폴더도 다 읽어들이고, 여러개의 폴더도 지정 가능합니다.

소스로 직접 컴파일하셔도 되지만,

윈도우용 포터블 실행파일 링크 올립니다.

PhotoMap (v1.1.4)

사진의 GPS 위치 정보를 기반으로 지도와 갤러리 형태로 한눈에 보여주는 독립 실행형(Portable) Electron 데스크톱 앱입니다.

🚀 주요 기능

복수 폴더 및 하위 폴더 스캔: 여러 개의 사진 폴더를 동시에 관리할 수 있으며, 지정한 폴더 내의 하위 폴더까지 모두 재귀적으로 탐색하여 사진을 읽어옵니다.
설정 자동 저장: 등록된 사진 폴더 목록은 앱을 껐다 켜도 자동으로 유지됩니다.
2가지 뷰 모드 지원:
- 🗺️ 지도 모드 (Explore): 사진의 GPS 위치를 지도 위에 마커로 표시하며, 클러스터 기능을 지원하여 밀집된 지역을 보기 쉽게 요약합니다. (클러스터 아이콘에 가장 최근 사진의 썸네일과 개수 표시)
- 🖼️ 갤러리 모드 (Gallery): 사진을 가장 최근 촬영된 순서(내림차순)로 정렬하고 날짜별로 그룹화하여 격자 형태로 보여줍니다.
GPS 경고 뱃지 & 필터링: 위치 정보가 없는 사진은 갤러리 모드에서 경고 뱃지가 달리며 흐리게 표시됩니다. 상단의 토글 스위치를 통해 위치 정보가 있는 사진만 모아서 볼 수 있습니다.
라이트박스 뷰어 (상세 보기): 지도 마커 팝업이나 갤러리 썸네일을 클릭하면 원본 고화질 사진을 큰 화면으로 볼 수 있으며, 방향키로 이동 가능합니다.
자동 방향 회전: EXIF의 Orientation(방향) 정보를 분석하여 세로 사진도 올바른 방향으로 자동 회전되어 보여집니다.

이 앱은 별도의 설치 과정이나 서버 실행이 필요 없는 포터블 버전으로 제공됩니다.

기술 스택: Electron, Vanilla JavaScript, CSS (글래스모피즘 디자인), HTML
오픈소스 라이브러리: leaflet, leaflet.markercluster (지도), exifreader (메타데이터 파싱), sharp (썸네일 생성 및 이미지 회전 처리)

# 의존성 설치 npm install 앱 실행 npm start 포터블 배포용 빌드 (dist/win-unpacked)

npm run build:portable