01 Maps01 지도
Case study케이스 스터디 Live운영 중 Web · Installable React · MapLibre GL

Korean History Map한국사 지도

Drag the time bar from Gojoseon to today and the map redraws territories, capitals and events for that year. Built with AI, from textbook data to quizzes.시간 막대를 고조선에서 오늘까지 밀면, 그 해의 영역과 수도, 사건이 지도 위에서 바뀝니다. 교과서 자료를 정리하는 일부터 퀴즈까지 AI와 함께 만들었습니다.

How it was made만든 방식
All 8 commits co-authored by Claude Opus커밋 8개 모두 Claude Opus와 공동 작성
Platform플랫폼
Web for phone screens. Installable, and it works offline after the first visit휴대폰 화면용 웹. 홈 화면에 추가할 수 있고, 첫 방문 뒤에는 오프라인에서도 열림
Built with기술
React, MapLibre GL, Vite, TypeScript, Cloudflare Workers
Status상태
Live at guksa.orgguksa.org에서 운영 중
Korean History Map in the year 475: territories of Goguryeo, Baekje, Silla and Gaya in colour, event markers, and a time bar at the bottom.

475, Three Kingdoms475년, 삼국 시대

The same map in dark mode, with glowing territory colours on a dark blue sea.

Dark mode어두운 화면

Map quiz question: a map with territories but no names, asking which century it shows, with four answer buttons.

Map quiz지도 퀴즈

Two-moment compare view: the Korean peninsula in 110 BC and 100 BC stacked one above the other, with a short note below.

Compare two moments두 시점 비교

What it does무엇을 하나요

Time bar시간 막대

Drag through 10 eras, from 2333 BC to 2026. The bar snaps to the nearest event year when you let go, and press-and-drag moves one year at a time. Play runs time by itself at 1x, 2x or 4x.10개 시대, 기원전 2333년부터 2026년까지 밀며 오갑니다. 손을 떼면 가까운 사건 연도에 맞춰 멈추고, 길게 누른 뒤 끌면 1년씩 움직입니다. 재생은 1배, 2배, 4배로 시간을 흘려 보냅니다.

Territories and capitals영역과 수도

104 polities (24 Korean, 80 neighboring) are drawn as 372 territory polygons, with 30 capitals. Territories and capitals change as the year changes.나라 104개(우리 역사 속 24개, 주변 80개)를 영역 372개로 그리고, 수도 30곳을 표시합니다. 연도가 바뀌면 영역과 수도도 그 시대에 맞게 바뀝니다.

Events on the map지도 위의 사건

354 events sit on the map as cards and pins. Previous and next buttons step through them one at a time, and tapping a card moves the time bar and the map to that event.사건 354건이 카드와 지도 위 표시로 놓여 있습니다. 이전, 다음 버튼으로 한 건씩 넘기고, 카드를 누르면 시간 막대와 지도가 그 사건으로 옮겨 갑니다.

Dotted lines for disputed areas학설이 갈리면 점선으로

Where scholars disagree on a location or extent, the outline is dotted and faded. 103 of the 372 polygons are marked this way. Tap one to read which views exist and why it is unclear.학계에서 위치나 범위를 두고 견해가 갈리는 곳은 점선과 옅은 색으로 그립니다. 영역 372개 가운데 103개가 그렇습니다. 누르면 어떤 견해가 있는지, 왜 분명하지 않은지 설명이 나옵니다.

Heritage and search문화유산과 찾기

164 heritage items appear as icons on the map. Search finds events and people, even by Korean initial consonants.문화유산 164건이 지도 위 아이콘으로 놓입니다. 사건과 인물은 초성(예: ㅇㅈㅁㄷ)으로도 찾을 수 있습니다.

Study tools and sharing공부 도구와 공유

A map quiz (10 questions), an order quiz (5), a heritage quiz (10), a two-year compare view and a heritage collection. Any year can be shared as a link with ?year=, and there is a dark mode.지도 퀴즈(10문제), 순서 퀴즈(5문제), 문화유산 퀴즈(10문제), 두 시점 비교, 문화유산 모아 보기가 있습니다. 연도 하나를 링크(?year=)로 공유할 수 있고, 어두운 화면도 지원합니다.

History data you can trace.출처를 따라갈 수 있는 역사 자료

8/8

commits co-authored by Claude OpusClaude Opus와 공동 작성한 커밋 수

  1. 01

    Textbook first교과서가 먼저

    Territories, capitals, events and years follow the current high school Korean history textbook and National Institute of Korean History materials. Gaps are filled from the Encyclopedia of Korean Culture, and each event lists its source.나라 영역, 수도, 사건과 연도는 현행 고등학교 한국사 교과서와 국사편찬위원회 자료를 기준으로 삼았습니다. 교과서에 자세히 없는 내용은 한국민족문화대백과사전 등으로 보탰고, 사건마다 출처를 적었습니다.

  2. 02

    Data as plain files자료는 평범한 파일로

    Eras, polities, capitals, events, heritage items and study sets are JSON files, and territories are GeoJSON. A check script validates the data, and tests run with vitest and Playwright.시대, 나라, 수도, 사건, 문화유산, 학습 묶음은 JSON 파일이고, 영역은 GeoJSON입니다. 점검 스크립트로 자료를 확인하고, 테스트는 vitest와 Playwright로 돌립니다.

  3. 03

    Web first, app shell ready웹이 먼저, 앱 틀도 준비

    A React and MapLibre GL web app built with Vite and TypeScript, served as static files from Cloudflare Workers. A Capacitor iOS shell with an offline bundle is set up too.Vite와 TypeScript로 만든 React, MapLibre GL 웹앱을 Cloudflare Workers의 정적 파일로 올렸습니다. 인터넷 없이 도는 Capacitor iOS 앱 틀도 준비해 두었습니다.

Honest about the gaps.부족한 점도 적어 둡니다

Territories are rough extents drawn at textbook-map level, not border lines. Entries I could not yet check against the textbook are flagged in the data and tracked in a to-check list.나라 영역은 교과서 지도 수준으로 어림잡은 범위이고, 국경선이 아닙니다. 아직 교과서와 맞춰 보지 못한 항목은 데이터에 표시해 두고, 확인할 목록으로 따로 정리하고 있습니다.

By the numbers.숫자로 보면

Eras시대

10

from 2333 BC to 2026기원전 2333년부터 2026년까지

Polities나라

104

24 Korean, 80 neighboring우리 역사 속 24개, 주변 80개

Territories영역

372

polygons, 103 of them dotted as disputed영역 도형, 그중 103개는 점선으로 표시

Events사건

354

events with a card on the map지도에 카드로 놓인 사건

Heritage문화유산

164

heritage items, plus 10 two-year compare sets문화유산, 그리고 두 시점 비교 묶음 10개

Photos사진

350

photos with author and license credited저작자와 이용 조건을 적은 사진

Where the data comes from.자료는 어디서 왔나요

The app has a “basis of this map” screen that says the same things in plain words.앱에도 ‘이 지도의 기준’ 화면이 있어서, 같은 내용을 쉬운 말로 밝혀 두었습니다.

History data역사 자료

The current high school Korean history textbook and National Institute of Korean History materials (its 우리역사넷 site). The Encyclopedia of Korean Culture for what the textbook leaves out.현행 고등학교 한국사 교과서와 국사편찬위원회 자료(우리역사넷)입니다. 교과서에 자세히 없는 내용은 한국민족문화대백과사전으로 보탰습니다.

Base map바탕 지도

Coastlines, rivers and relief are drawn from Natural Earth public data. The Daedong River, the Geum River and Dokdo were added by hand, and Dokdo is drawn larger than real so it stays visible.해안선, 강, 산지는 Natural Earth 공개 자료로 그렸습니다. 대동강, 금강, 독도는 직접 그려 넣었고, 독도는 잘 보이도록 실제보다 크게 그렸습니다.

Photos사진

Only photos that are free to use on Wikimedia Commons, each with its author and license.위키미디어 공용에서 자유롭게 쓸 수 있는 사진만 골랐고, 사진마다 저작자와 이용 조건을 적었습니다.

Status and links.현황과 링크

At a glance한눈에 보기

Status상태
Live운영 중
Address주소
guksa.org
Last commit마지막 커밋
Nov 5, 20262026년 11월 5일
iPhone app아이폰 앱
Not on the App Store앱스토어에는 아직 없음

Links링크

Keep exploring더 둘러보기 See all work전체 작업 보기 Coin Laundry빨래멍 Next work다음 작업