전철로 오락실을 방문한다면 직선거리가 가까운 곳보다 환승 없이 갈 수 있는 곳이 편할 수 있다. 예를 들어 같은 노선에서 두 곳을 둘러볼 계획이라면, 거리순 목록을 읽는 것보다 역과 점포를 함께 보는 편이 이동 순서를 생각하기 쉽다.

뮤즈캣 Beta에는 이런 탐색을 위한 수도권 리듬게임 오락실 노선도를 연결했다. 개별 점포의 주소를 확인하는 기능에 철도망을 따라 후보를 고르는 방법을 더한 것이다.

철도망을 이용한 오락실 탐색

거리순 목록은 현재 위치 주변을 찾기에 적합하다. 반면 한 노선의 방문 후보나 환승 관계를 비교하려면 역과 점포의 위치를 따로 맞춰 봐야 한다. 여러 장소를 방문할 때는 이 확인이 반복된다.

수도권 리듬게임 오락실 노선도는 광역전철 주변 점포의 영업 현황을 정리하는 별도 프로젝트다. 노선도를 통해 살펴볼 역과 지역을 고르고, 점포의 자세한 정보는 뮤즈캣 문서에서 확인하도록 연결했다.

외부 지도 제작자와의 협업

노선도는 뮤즈캣 개발자가 아닌 외부 기여자를 클라이언트로 두고 만든 첫 시스템이기도 하다. 여기서 클라이언트란 지도를 제작하고, 그 결과물을 서비스에서 어떻게 보여주고 배포할지 요구하는 사람이다. 내가 쓸 화면을 스스로 정하는 일과는 출발점이 달랐다.

제작자는 역과 점포, 기호를 배치한 지도를 제공한다. 이를 웹에서 다시 편집하는 도구보다, 결과물을 읽고 필요한 판본을 내려받는 기능이 요구에 맞았다. 테마별 표시와 확대, 범례, 판본 설명은 그 과정에서 필요한 기능이다.

지도 내용의 수정은 제작자가, 전달받은 판본의 게시는 서비스가 맡는다. 새 파일을 받았을 때 웹 표시와 배포 파일이 같은 버전인지 확인하는 일도 이 협업에 포함된다.

노선도의 등재 기준과 기호

한 장의 지도에 모든 정보를 넣으면 점포명과 노선을 읽기 어려워진다. 등재에는 역에서의 접근 거리와 리듬게임 운영 여부를 사용하고, 한 역에 여러 점포가 있으면 이름의 우선순위와 복수 점포 표시를 정했다. 지원하는 게임 네트워크도 기호로 구분한다.

노선은 등재 점포 주변을 중심으로 간소화하므로 범례를 함께 읽어야 한다. 화면에서 노선 색과 네트워크 기호를 설명하고 별도 안내에서 등재 기준을 제공한다. 노선도에 이름을 적는 기준과 개별 점포의 상세 정보를 각각 확인할 수 있는 구성이다.

2023-12-25 Beta 코드 재현. 당시 번들에 포함된 수도권 노선도이다.

flowchart TD
    accTitle: 장소 정보를 철도 노선의 관점으로 정리하기
    accDescr: 전철역과 점포의 관계를 등재 기준으로 정리하고 이름과 기호를 지도에 표시해 이동할 지역을 고르게 한다.
    A[전철역과 주변 점포] --> B[등재 기준과 표기 우선순위]
    B --> C[역 이름·점포명·기호 배치]
    C --> D[노선을 따라 방문 후보 탐색]

웹 지도와 다운로드 판본

웹 화면은 밝은 테마와 어두운 테마에 맞는 SVG를 표시한다. SVG는 확대해도 선과 글자를 유지하기에 적합한 벡터 형식이다. 확대와 이동을 연결하고 모바일의 초기 배율을 높여 작은 화면에서도 관심 구간을 볼 수 있도록 했다. 범례는 지도 옆 메뉴에서 확인한다.

다운로드 화면은 따로 저장된 판본 목록에서 버전 이름과 발표일, 설명, 미리보기, 파일 링크를 읽는다. 생성 시각 순으로 최신 판본과 다른 판본을 구분한다. 화면용 SVG와 내려받을 파일은 갱신 경로가 달라, 운영자가 두 자료를 맞춰 게시해야 한다.

flowchart LR
    accTitle: 화면용 지도와 배포 문서의 두 경로
    accDescr: 웹 화면은 테마별 SVG를 표시하고 내려받기 화면은 판본 메타데이터와 파일 링크를 조회한다. 두 자료의 갱신은 운영자가 맞춘다.
    O[지도 제작과 갱신] --> S[테마별 정적 SVG]
    O --> V[판본 정보와 파일 링크]
    S --> W[확대·이동하는 웹 지도]
    V --> D[미리보기와 내려받기]

방문 계획과 판본 갱신

지도는 노선을 따라 방문 후보를 비교하는 데 쓸 수 있고, 파일을 내려받아 미리 보거나 업장에 인쇄해 둘 수도 있다. 맞춤 인쇄용 판본의 요청 창구도 안내해 같은 결과물을 웹 밖에서 사용할 수 있게 했다.

이 지도는 점포와 노선의 변화에 맞춰 다시 제작하는 편집물이다. 실시간 열차 운행이나 경로 안내를 제공하지 않으며, 영업 정보가 방문 당일과 같다고 보장할 수도 없다. 후보를 고른 뒤 점포의 최신 정보를 확인하고, 제작된 파일과 게시된 판본을 계속 맞춰 가야 한다.

flowchart TD
    accTitle: 노선도에서 방문 후보까지
    accDescr: 노선도와 범례로 후보 지역을 고른 뒤 점포의 최신 상세 정보를 확인한다. 지도 제작자는 변경된 점포와 노선을 다음 판본에 반영한다.
    M[노선도와 범례] --> C[방문 후보 선택]
    C --> A[점포 상세 정보 확인]
    E[점포와 노선의 변화] --> U[다음 지도 판본 갱신]