---
type: bookmarks
tags: ['maps', 'ui']
status: release
ctime: 2022-04-09
mtime: 2026-10-07
---

지도같은 화면 구현이 보여서 확인해보니 드래그로 구현이 되어 있었다. 그래서 혹시 지도로 구현된게 없을까 해서 찾아본 자료들. [leafletjs](https://leafletjs.com/) 보니까 _Non-geographical maps_ 라는 표현을 사용했다.

![큰 이미지를 미리 여러 해상도로 줄여 두고, 해상도마다 256px 정사각형 타일로 잘라 둔다. 줌 0 은 그림 전체가 타일 하나, 줌 1 은 2×2, 줌 2 는 4×4 이고, 줌이 하나 오를 때마다 가로세로 해상도가 두 배가 된다. 맨 위 줌에서 원본과 1:1 이 된다. 뷰어는 지금 줌에서 화면에 걸친 타일만 /z/x/y.png 로 요청한다 — 줌 2 에서 화면이 가운데 네 칸에 걸치면 그 네 장만 받는다. 그래서 900MB 짜리 그림도 화면 하나 분량만 내려받는다. 최대 줌은 긴 변을 256 으로 나눈 값의 log2 를 올림한 것이다 — 2000×3000 이미지면 log2(3000/256)=3.55 라 4. gdal2tiles-leaflet 의 -l 옵션은 기준점 [0,0] 을 지리 좌표처럼 왼쪽 아래가 아니라 그림처럼 왼쪽 위에 두고, leaflet-rastercoords 는 최대 줌 기준으로 그림의 픽셀 (x, y) 와 지도 좌표를 서로 바꿔 마커를 픽셀 위치에 놓게 한다.](/svg/image_tile_pyramid.svg)

---

- [How to Make an Interactive Story Map Using Leaflet and Non-Geographical Images](https://jarednielsen.medium.com/how-to-make-an-interactive-story-map-using-leaflet-and-non-geographical-images-821f49ff3b0d)[^20-1]
- [nielsenjared/pictorial-st-louis](https://github.com/nielsenjared/pictorial-st-louis)[^20-2]
- [commenthol/gdal2tiles-leaflet](https://github.com/commenthol/gdal2tiles-leaflet)[^20-3]
- [commenthol/leaflet-rastercoords](https://github.com/commenthol/leaflet-rastercoords?tab=readme-ov-file)[^20-4]

---

- [openseadragon/openseadragon](https://github.com/openseadragon/openseadragon)[^20-5]

---

[^20-1]: Leaflet 으로 지도가 아닌 큰 그림을 확대·이동하는 스토리 맵 만들기 (아래 pictorial-st-louis 와 같은 저자의 글).

[^20-2]: 의회도서관의 옛 지도 그림(전체 PNG 약 900MB)을 타일로 잘라 Leaflet 에 올린 결과물. 아래 gdal2tiles-leaflet 으로 타일을 만들고 leaflet-rastercoords 로 좌표를 맞춘다.

[^20-3]: 큰 이미지를 Leaflet 용 타일로 자르는 `gdal2tiles.py` 개조판. `-l` 옵션으로 기준점 `[0,0]` 을 왼쪽 위(지리 좌표가 아니라 그림의 픽셀 좌표)에 둔다.

[^20-4]: 위에서 만든 타일을 그림 좌표 그대로 쓰게 하는 Leaflet 플러그인 — 원본 이미지 크기만 주면 마커를 픽셀 (x, y) 위치에 놓을 수 있다.

[^20-5]: 확대 가능한 이미지 전용 웹 뷰어(순수 JS). 지도 라이브러리를 빌리지 않고 같은 일(타일 기반 확대·이동)을 하는 다른 길.