2023의 게시물 표시

리액트로 만드는 수도권 전철 노선도 개발 일지 - 2. 끝 없는 노선도 그리기 작업

이미지
  <그림> 2023년 2월 2일 기준 작업 중인 svg 기반 수도권 전철 노선도 경로 이전 포스트에서는 노선 경로를 비교적 자유롭게 설정하였으나, 이번 작업에서는 다음 두 가지 작업에 중점을 두었다. 노선의 경로를 되도록 사선 (45도 기울기)나 수평, 수직선이 되도록 한다. 서울시 영역 내부(특히 2호선)의 인접한 역간의 상대적인 위치를 노선도에 반영한다. 예) 강남 구간의 격자형 대로변을 따라 배치된 전철 노선 이번 주에 시간을 조금 더 투자하면 서울시 내부 전철 노선은 만족스러운 수준으로 경로 배치를 마무리할 수 있을 것 같다. 이 프로젝트는 노선도 자체가 컨텐츠다보니 개발보다 리소스(지하철 노선 경로 등)을 준비하는 데 대부분의 시간이 소모되는 것 같다...

리액트로 만드는 수도권 전철 노선도 개발 일지 - 1. 노선도 디자인은 개발자가 아닌 디자이너의 역할

이미지
개발을 시작하겠다고 한 지 몇 주가 지났는데 진척이 없다. 그 이유는 개발자 입장에서 가독성 높은 노선도를 그리는 작업이 어렵기 때문이다. 그림. 작업중인 노선도 이 노선도를 그리기 위해서 1주일에 평균 4시간 정도 투자하고 있다. 그러나 예쁘게 그리기란 정말 어려웠다. 노선도의 선을 그릴 때는 보통 수평선, 수직선, 대각선, 역대각선을 사용한다. 그런데 그 선을 맞추면서 역들을 표시한다는 것이 어려웠다. 그리고 벡터 그래픽 툴인 잉크스케이프를 다루는 일도 익숙하지 않아서 상당히 고생하고 있다. 노선도 디자인은 역시 개발자가 아닌 디자이너의 역할인 것 같고, 개발자는 노선도에 정보를 동적으로 표시할 수 있는 기능을 추가하는 역할인 것 같다. 그런데 나와 함께 일할 디자이너는 없기 때문에, 그냥 시간을 갈아넣어서 노선도를 만들어야겠다. 대신 예쁘게 그리기는 포기했다. 나름 사대문안과 강남 지역은 상대적인 위치에 맞게 역을 적절히 배치한 것 같아 만족한다.