콘텐츠로 이동

빌드 케이스 #3: 지하철 +/- 방향 표기 데모 앱

공모전 제출용 웹앱. 카카오맵 + 서울 공공데이터 API로 실제 지하철 데이터를 연동한 데모.

프로젝트 개요

  • 목적: "모두의 공모전" 제출 - 지하철 노선도 방향 표기 개선안
  • 핵심 아이디어: 역번호 증가 방향 = +, 감소 방향 = -로 플랫폼 방향 안내
  • 프로젝트 폴더: D:\Sites\2026-지하철\
  • 앱 폴더: D:\Sites\2026-지하철\app\

사용 API 정리

1. 카카오맵 API (지도 표시용)

  • 역할: 지도 렌더링, 역 마커, 노선 Polyline, 커스텀 오버레이(+/- 표시)
  • 무료 한도: 일 30만 호출 (넉넉)
  • 가입: https://developers.kakao.com (카카오 계정으로 로그인)
  • 키 발급 과정:
  • 로그인 → [앱] → [앱 생성] (아이콘 이미지 필요, 128px)
  • 앱 생성 시 도메인 등록 필요 (localhost는 안 됨, 실제 사이트 넣기)
  • [제품 설정] → [카카오맵] → 사용 설정 ON (필수! 안 하면 지도 안 뜸)
  • [앱] → [플랫폼 키] → JavaScript 키 복사 (웹앱용 키)
  • JavaScript 키 클릭 → 테스트할 로컬 주소 등록 가능 (localhost:3000 등)
  • 사용할 키: JavaScript 키
  • 주의사항:
  • 대중교통 길찾기 API는 제공 안 함 (자동차만)
  • 지도 위에 마커/선/오버레이 그리기는 완벽 지원
  • 카카오 로고/저작권 표시 제거 금지 (약관)

2. 서울 열린데이터 API (역 정보 + 경로 검색 + 실시간 도착)

  • 역할: 지하철역 정보, 최단경로 검색, 실시간 열차 도착 정보
  • 무료 한도: 일 1,000건 (활용사례 등록하면 무제한)
  • 가입: https://data.seoul.go.kr (서울시 통합회원)
  • 키 발급 과정:
  • 서울시 홈페이지 회원가입
  • 로그인 → [이용안내] → [Open API 소개] → 인증키 신청
  • 일반 인증키 신청 (역 정보, 경로 검색용)
  • 실시간 지하철 인증키 별도 신청 (실시간 도착 정보용)
  • 신청 시 이메일, 활용 용도 입력 필요
  • 즉시 발급됨
  • 인증키 2개 필요:
  • 일반 인증키 → 역 정보(OA-15442), 최단경로(OA-22724), 역간거리(OA-12034)
  • 지하철 인증키 → 실시간 도착정보(OA-12764)
  • 주요 API 목록:
API 코드 기능 용도
OA-15442 노선별 지하철역 정보 역 목록, 역코드
OA-22724 최단경로 이동정보 출발역→도착역 경로 (최소시간/최단거리/최소환승)
OA-12764 실시간 도착정보 열차 몇 분 후 도착
OA-12601 실시간 열차 위치 열차 현재 위치
OA-12034 역간거리 정보 역 사이 거리(km), 소요시간(분)

3. ODsay API (백업 - 대중교통 길찾기)

  • 역할: 출발지→도착지 대중교통 경로 검색 (지하철+버스 통합)
  • 무료 한도: 일 1,000건 (6개월)
  • 가입: https://lab.odsay.com
  • 키 발급 과정:
  • 회원가입 → 애플리케이션 등록
  • 서비스 플랫폼 환경에서 URI 선택 → 도메인 입력 (프로토콜 제외)
  • localhost 등록 안 됨 - 실제 도메인만 가능
  • Server 방식은 공인 IP 필요
  • 주의: 로컬 개발 테스트가 어려움. 배포 후 실서버에서 사용하거나, 서울 열린데이터 OA-22724로 대체 가능
  • 주요 API:
  • subwayPath - 지하철 전용 경로 검색
  • searchPubTransPath - 대중교통 통합 길찾기
  • subwayStationInfo - 역 상세 정보

4. 공공데이터포털 (역 좌표 데이터 - 파일)

  • 역할: 역 위경도 좌표, 역번호, 환승 정보 (파일 다운로드)
  • 가입: https://www.data.go.kr
  • API 키 불필요 (파일 다운로드)
  • 핵심 데이터셋:
데이터셋 번호 내용 비고
15099316 1~8호선 역사 좌표(위경도) 276역, 소수점 6자리
15013205 전국도시철도역사정보 1,073역, 역번호/영문명/환승 포함
15013203 전국도시철도노선정보 노선 정보

API 선택 시 비교 메모

지도 API: 카카오맵 vs 네이버맵

항목 카카오맵 네이버맵
무료 한도 일 30만 무료 없음 (2025.7~ 전면 유료)
결제수단 등록 불필요 필수 (신용카드)
대중교통 길찾기 미제공 미제공
커스텀 오버레이 완벽 지원 완벽 지원
가입 난이도 카카오 계정만 네이버 클라우드 + 카드
결론 채택 탈락 (무료 없음)
  • 둘 다 대중교통 길찾기 API가 없어서 ODsay 또는 서울 열린데이터로 보충 필요

경로 검색: 서울 열린데이터 vs ODsay

항목 서울 열린데이터 (OA-22724) ODsay (subwayPath)
무료 한도 일 1,000건 일 1,000건 (6개월)
로컬 테스트 가능 불가 (도메인 필요)
데이터 범위 서울 지하철 전국 대중교통
결론 메인으로 사용 백업/보조

앱 구조 (계획)

카카오맵 JS API          ← 지도 표시 (무료 30만/일)
  └ 마커, Polyline,      ← 역 위치 + 노선 그리기
    CustomOverlay        ← +/- 방향 표시 오버레이

서울 열린데이터 OA-22724  ← 경로 검색 (최단경로)
서울 열린데이터 OA-12764  ← 실시간 도착 정보

공공데이터포털 15099316   ← 역 좌표 데이터 (파일, 무제한)
공공데이터포털 15013205   ← 역번호+역명+환승 (파일, 무제한)

삽질 로그

카카오맵 앱 등록

  • 앱 생성 시 아이콘 이미지 필요 (128px, 250KB 이하)
  • 플랫폼 도메인에 localhost는 등록 안 됨 → 실제 도메인 넣기
  • JavaScript 키 눌러서 들어가면 테스트 로컬 주소 등록 가능 (localhost:3000)

ODsay 앱 등록

  • URI에 localhost 등록 안 됨 (도메인명만 가능)
  • Server 방식은 공인 IP 필요
  • 로컬 개발 테스트 불가 → 배포 후 사용하거나 서울 열린데이터로 대체

현재 보유 API 키

API 키 종류 용도
카카오맵 JavaScript 키 지도 표시
서울 열린데이터 일반 인증키 역 정보, 경로 검색
서울 열린데이터 실시간 지하철 인증키 실시간 도착 정보
ODsay API 키 대중교통 길찾기 (백업)

키 값은 보안상 이 문서에 적지 않음. 프로젝트 config 파일에서 관리.

참고 링크