리액트로 만드는 수도권 전철 노선도 개발 일지

노선도를 만들자

웹 개발을 연습하면서 내 철도 덕심을 자극하기 위해 리액트로 수도권 전철 노선도를 만들어보기로 했다.

개발을 시작하기에 앞서 웹에서 지하철 노선도를 어떻게 구현해야 하는 지 고민되었다. 애초에 관련된 기술이나 지식이 없었기 때문에 일단은 가장 간단하게 만들 수 있는 방법을 선택해야 한다.

다른 사람들은 어떻게 구현했는지 살펴봤다.

만약 canvas를 사용한다면 이전에 회사에서 사용해본 적이 있는 konvajs를 활용할 것이다. canvas 기반 2d 그래픽을 다룰 수 있는 가장 강력한 툴 중 하나다.

한편 svg를 사용한다면 inkspace를 활용하여 svg로 노선도 경로 좌표를 편집하고, 리액트 컴포넌트로 분해해서 노선도의 굵기나 색상 등을 커스터마이징할 수 있도록 할 것이다. svg를 태그 속성 값으로 편집하기에는 너무 비효율적인 측면이 있다.

지하철 노선도는 다이어그램에 가깝기 때문에 단순한 점과 선과 면은 svg로 처리하는 것이 합리적이라고 생각한다. 그래서 고민 끝에 svg 기반으로 노선도를 렌더링하기로 했다.

1. svg로 수도권 전철 노선도 작성 (3주)

2. 웹에서 svg 노선도를 배경으로 역 도형과 역명 추가 (3주)

4. 최단거리 환승 알고리즘 구현 (3주)

5. 최단거리 환승 경로 노선도 표시 (3주)

6. 각 노선 별 운행 계통에 따른 노선도 구현 (3주)

P.S. 노선도 그리기는 너무 고통스럽다...

그림. Inkscape에서 그리고 있는 노선도