https://break7.net/

1<!doctype html>
2<html lang="ko"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"><meta name="theme-color" content="#f5f6f1"><meta name="description" content="실제 역 위치 위에서 움직이는 수도권 1–9호선. 서울시 운행 정보로 보는 작은 실시간 철도 지도."><title>wnode — 수도권 1–9호선</title>
3<link rel="icon" href="/favicon.svg"><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,500,0,0&display=block"><link rel="stylesheet" href="/assets/vendor/maplibre-gl.css"><link rel="stylesheet" href="/assets/metro.css?v=1"><link rel="stylesheet" href="/assets/metro-lines.css?v=2"></head>
4<body><main id="map" aria-label="수도권 1–9호선 실제 역 위치 지도"></main><canvas id="trains" aria-hidden="true"></canvas>
5<header class="brand"><button id="about-button" aria-label="지도 소개" aria-expanded="false"><svg viewBox="0 0 36 36" aria-hidden="true"><path d="M8 8L27 27M8 27L27 8" stroke="#00a84d" stroke-width="4"/><circle cx="8" cy="8" r="4"/><circle cx="27" cy="8" r="4"/><circle cx="8" cy="27" r="4"/></svg><strong>wnode</strong><span>SEOUL</span></button></header>
6<div class="live-pill" role="status"><i id="live-dot"></i><span id="live-status">운행 정보 연결 중</span></div>
7<nav class="map-tools" aria-label="지도 도구"><button id="settings-button" aria-label="지도 설정" title="지도 설정" aria-expanded="false"><span class="material-symbols-rounded">tune</span></button><button id="fit-button" aria-label="선택한 노선 전체 보기" title="선택한 노선 전체 보기"><span class="material-symbols-rounded">center_focus_strong</span></button><button id="locate" aria-label="내 위치" title="내 위치"><span class="material-symbols-rounded">my_location</span></button><div class="zoom-stack"><button id="zoom-in" aria-label="확대"><span class="material-symbols-rounded">add</span></button><button id="zoom-out" aria-label="축소"><span class="material-symbols-rounded">remove</span></button></div></nav>
8<section class="sheet" id="about" hidden><div class="sheet-head"><h1>서울에서 이어지는 작은 열차.</h1><button data-close="about" aria-label="닫기"><span class="material-symbols-rounded">close</span></button></div><p>1~9호선과 지선, 노선별 458개 역을 실제 위치에.<br>서울시 운행 정보가 작은 열차를 움직입니다.</p><p>역 좌표와 정차 순서는 공식 자료를 바탕으로 구성했습니다. 환승역은 노선별로 집계하되, 지도에서는 호선별 좌표의 대표 지점 하나로 합쳐 표시합니다. 선로는 최대 한 번의 45도 꺾임으로 표현한 도식이며 실제 선로 위치가 아닙니다. 공항철도·경의중앙선 등 다른 노선은 아직 포함하지 않습니다.</p><p>열차는 GPS 위치가 아닌 <b>운행 정보 기반 추정 위치</b>입니다. 한국시간 05:00~다음 날 01:30에 12분 간격으로 1~9호선 정보를 공동 갱신합니다. 현재 지도는 1~9호선과 지선을 표시합니다. 갱신 사이에는 여러 역을 이어서 추정 이동하며, 관측 후 15분이 지난 정보는 숨깁니다. 급행 정차·정확한 소요시간·운영사별 제공 누락은 재현하지 못합니다. 탑승 안내용으로 사용할 수 없습니다.</p><p class="sources">출처: 서울특별시 공공데이터 · 서울교통공사<br><a href="https://www.data.go.kr/data/15099316/fileData.do" target="_blank" rel="noopener">역 좌표 (2025.08.14)</a> · <a href="https://data.seoul.go.kr/dataList/OA-21232/A/1/datasetView.do" target="_blank" rel="noopener">역사마스터 교차검증</a> · <a href="https://data.seoul.go.kr/dataList/OA-12601/A/1/datasetView.do" target="_blank" rel="noopener">실시간 열차 위치정보</a></p></section>
9<section class="sheet right" id="settings" hidden><div class="sheet-head"><h2>지도 설정</h2><button data-close="settings" aria-label="닫기"><span class="material-symbols-rounded">close</span></button></div><label>지도 표현<select id="map-mode"><option value="game">게임 지도</option><option value="simple">간략 지도</option><option value="detail">상세 지도</option></select></label><label>다크 모드<input type="checkbox" role="switch" id="dark"></label><label>열차 표시<input type="checkbox" role="switch" id="show-trains" checked></label><label>역 이름<input type="checkbox" role="switch" id="show-labels" checked></label><p>역과 선로는 고정되어 있습니다.<br>지도를 움직이거나 확대해서 살펴보세요.</p></section>
10<section class="sheet station-sheet" id="station-card" hidden><div class="sheet-head"><h2 id="station-name"></h2><button data-close="station-card" aria-label="역 정보 닫기"><span class="material-symbols-rounded">close</span></button></div><div class="station-code" id="station-code"></div><p id="station-info"></p><p class="muted">열차를 클릭하면 운행 방향과 관측 시각을 볼 수 있습니다.</p></section>
11<section class="search-sheet" id="search" hidden><label for="station-search">역 찾기</label><input id="station-search" placeholder="역 이름을 입력하세요" autocomplete="off"><div id="station-results"></div></section>
12<section class="search-sheet" id="line-picker" hidden><div class="sheet-head"><h2>노선 선택</h2><button data-close="line-picker" aria-label="노선 선택 닫기"><span class="material-symbols-rounded">close</span></button></div><div id="line-options"></div></section>
13<footer class="dock"><button class="line-chip" id="line-button" title="노선 선택" aria-expanded="false"><span class="line-number" id="line-number">全</span><span><strong id="line-title">서울 · 수도권</strong><small id="line-subtitle">1–9호선 · 지선 포함</small></span></button><span class="dock-divider"></span><button class="icon" id="search-button" aria-label="역 검색" aria-expanded="false"><span class="material-symbols-rounded">search</span></button><div class="train-count"><strong id="train-count">—</strong><small>추정 열차</small></div><span class="dock-divider optional"></span><div class="update"><span id="updated">정보 확인 중</span><small>12분 갱신 · 이동은 추정</small></div></footer>
14<div id="toast" role="status" hidden></div>

15<script src="/assets/vendor/maplibre-gl.js"></script>

15<script src="/assets/core/geometry.js"></script>

15<script src="/assets/metro-model.js?v=2"></script>

15<script src="/assets/metro-network-model.js?v=3"></script>

15<script src="/assets/core/renderer.js?v=lanes1"></script>

15<script src="/assets/metro-lanes.js?v=3"></script>

15<script src="/assets/metro.js?v=9"></script>

15</body></html>