☁️ Mist Map
반딧불 반디와 걸으면 밤안개가 걷히는 동네 지도
별이 깔린 남색 밤안개 속을 반딧불의 등불로 밝혀 나가는 탐험 지도의 웹 프로토타입입니다.
이런 걸 할 수 있어요
- 걸으면 걷히는 밤안개 — 지나간 자리마다 안개가 스프링처럼 부드럽게 열리고, 경계에는 등불 빛이 숨 쉬듯 번집니다. 안개 위로는 별이 반짝입니다.
- 등불에 비친 동네 지도 — 복숭아·살구색 건물, 크림색 길, 호박색 점선 산책로. 라벨 없이 그림책처럼 그렸습니다.
- 반딧불 캐릭터 반디 — 꼬리 등불을 켠 채 날갯짓하며 떠다니고, 새로 밝힐 때마다 불티가 흩날립니다.
- 앱: 화면을 꺼도 기록 — Android 앱은 기록을 켜 두면 주머니 속에서도 걸은 길을 남기고, 걷는 동안 손대지 않으면 지도를 멈추고 거리만 보여 주는 간단히 보기(절전)로 바뀝니다.
- 다른 앱 기록 가져오기 — 구글 지도 타임라인, Strava·Garmin 같은 앱의 GPX를 넣으면 지금까지 다닌 곳의 안개가 한꺼번에 쓸려 나갑니다.
- 탐험 기록 — 밝힌 면적, 걸은 거리, 발자국 수를 보여 주고, 다시 열면 가까운 곳부터 차례로 기억이 걷힙니다.
조작
| 동작 | 방법 |
|---|
| 걷기 / 달리기 | W A S D 또는 방향키 / Shift |
| 원하는 곳까지 이동 | 지도 클릭 (모바일은 탭) |
| 자동 산책 | 산책 버튼 |
| 실제로 걸으며 밝히기 | 내 위치 버튼 (위치 권한 필요) |
| 다른 앱 기록 넣기 | 가져오기 버튼, 또는 파일을 화면에 끌어다 놓기 |
| 처음부터 다시 | 초기화 버튼 |
기록은 사용 중인 브라우저의 localStorage에만 저장되고, 위치 정보는 어떤 서버로도 보내지 않습니다.
기록 가져오기
| 형식 | 어디서 받나요 |
|---|
| 구글 타임라인 JSON | Android: 휴대폰 설정 › 위치 › 위치 서비스 › 타임라인 › 타임라인 데이터 내보내기iPhone: 구글 지도 앱 › 내 타임라인 › 위치 및 개인정보 보호 설정 › 타임라인 데이터 내보내기예전 테이크아웃의 Records.json, 월별 Semantic Location History도 읽습니다 |
| GPX | Strava, Garmin Connect 등 대부분의 운동·기록 앱의 내보내기 |
| KML · GeoJSON | 구글 내 지도, 지도 편집 도구 등 |
- 이어진 경로는 약 24m 간격으로 채워 넣고, 1.5km 넘게 떨어진 두 점은 잇지 않습니다(기록 공백이나 지하철·비행기 이동).
- 이미 밝힌 곳은 다시 쌓지 않아서 같은 파일을 여러 번 넣어도 늘어나지 않습니다.
- 한 번에 최대 10만 곳까지 가져옵니다.
- 써 볼 파일이 없다면
samples/의 서울숲 산책 GPX와 구글 타임라인 샘플을 내려받아 넣어 보세요.
어떻게 그리나요
안개는 MapLibre 커스텀 레이어 위에서 WebGL2 셰이더 두 번으로 그립니다.
- 밝음 필드 — 밝힌 지점마다 가우시안 블롭을 float 텍스처에 더합니다. 가까운 지점끼리는 자연스럽게 녹아 붙습니다.
- 안개 합성 — 필드로 경계까지의 거리를 추정해 칸을 나눕니다.
- 안쪽: 지도가 보이고, 가장자리는 불빛이 닿는 끝처럼 살짝 따뜻하게 어두워집니다.
- 경계: 연기처럼 천천히 일렁이는 밝은 불빛 테.
- 바깥: 흘러가는 밤안개와 반짝이는 별. 경계 가까이는 등불 빛이 번지고 안개가 옅어져 그 너머가 어렴풋이 비칩니다.
- 걷힘 애니메이션 — 새 지점의 반경을 살짝 넘쳤다 자리 잡는 스프링 곡선으로 키우면, 불빛이 따라 밀려나며 밤안개가 걷힙니다.
로컬에서 실행
빌드 과정 없는 정적 사이트입니다. ES 모듈을 쓰므로 정적 서버로 엽니다.
python -m http.server 5174
http://localhost:5174를 열면 됩니다. URL에 ?debug를 붙이면 콘솔에서 window.__mist로 이동을 시뮬레이션할 수 있습니다.
요구 사항: WebGL2와 float 렌더 타깃을 지원하는 브라우저 (최신 Chrome · Edge · Safari · Firefox)
가져오기 파서 테스트:
npm test
구조
index.html HUD 마크업
src/main.js 캐릭터 이동, 밝히기, 저장, HUD
src/fog.js 안개 커스텀 레이어 (WebGL2 2패스)
src/importers.js GPX · KML · GeoJSON · 구글 타임라인 파서 (DOM 없이 동작)
src/mapStyle.js 등불에 비친 밤 동네 팔레트 지도 스타일
src/style.css HUD · 캐릭터 · 애니메이션
tests/ 파서 단위 테스트 (node --test)
samples/ 가져오기 시험용 샘플 기록
android/ Android 앱 (기록은 네이티브, 그리기는 이 웹 렌더러를 WebView로)
상태
웹은 안개 표현의 느낌을 확정하기 위한 프로토타입입니다.
Android 앱(M1 기록) 을 만드는 중입니다. 기록 켜기를 누르면 화면을 꺼도 걸은 길을 기록하고, 앱을 열면 그 길의 안개가 걷혀 있습니다. 앱은 이 저장소의 index.html·src/를 그대로 렌더러로 씁니다(?app 모드). 설계는 docs/app-architecture.md, 주요 결정은 DECISIONS.md에 있습니다.
cd android
./gradlew testDebugUnitTest assembleDebug # 단위 테스트 + 디버그 APK
크레딧
