AI Tools Lab
전체 메뉴 열기전체 메뉴 닫기
학습·업무편집 예시

경로를 찾는 인터랙티브 노선도 만들기

가상 역과 연결 시간으로 작은 노선도를 만듭니다. 최단 시간과 환승 기준을 분리하고, 길이 없는 경우와 작은 화면의 역 이름까지 점검합니다.

Claude Opus 5.5 · SVG · JavaScript

작성 AI Tools Lab 운영자오류 제보·정정 요청
단색 노선 세 개와 역·경로 설명을 배치한 가상 노선도 콘셉트 이미지
AI 생성 콘셉트 이미지 · 실제 실행 캡처가 아닙니다. 내 자료와 목적에 맞춰 새로 만들어 보세요.

01준비할 자료

  • 가상 역 6개 이내의 ID·이름·화면 좌표와 노선별 연결 목록. 실제 운행 정보로 사용하지 않습니다.
  • 연결 구간별 이동 시간과 환승 비용. 같은 구간도 어떤 노선으로 이동하는지 구분합니다.
  • 경로 선택 목표: 이동 시간과 환승 비용의 합을 최소화합니다. ‘환승 횟수 최소’는 다른 목표입니다.
  • 도달 가능한 두 역, 같은 역, 다른 역과 연결되지 않은 역, 이름이 긴 역의 시험 자료.

아래 도구는 이 예시의 구현 방향입니다. 선택한 AI 도구에서 코드·파일을 다룰 수 있는지 먼저 확인하고, 설치 버전과 실행 방법을 기록하세요.

02시작 프롬프트

대괄호 안을 내 정보로 바꿔서 사용하세요.

Claude Opus 5.5로 가상 도시 [도시 이름]의 작은 SVG 노선도를 만들어 주세요.
역 데이터는 id·name·x·y, 연결 데이터는 from·to·line·minutes로 분리하세요. 모든 구간은 양방향이며 minutes는 양수입니다.
빨강 R 노선은 A-B 2분, B-C 3분, C-D 2분입니다. 파랑 B 노선은 B-E 1분, E-D 2분입니다. F는 연결되지 않은 시험 역입니다. 이는 예시이며 실제 교통 정보가 아닙니다.
출발·도착 선택, 경로 강조, 노선별 구간 목록, 이동 시간·환승 횟수·환승 비용·합계 표시를 넣으세요.
환승은 다른 노선으로 바꿀 때마다 4분으로 계산하고 최초 탑승은 환승으로 세지 마세요. 경로 탐색 상태에 현재 노선을 포함해 이동 시간과 환승 비용 합계를 최소화하세요. 같은 합계이면 환승이 적은 경로를, 그래도 같으면 역 ID 순서의 고정 규칙을 사용하세요.
A-D의 기준 결과는 R 노선 7분입니다. B-D는 파랑 노선 3분입니다. A-F는 경로 없음, A-A는 이동 0분이어야 합니다.
SVG 확대·축소·초기화와 터치로 역 선택을 지원하고 출발·도착 select로도 같은 작업이 가능하게 하세요. 단색 선·배경·기호만 사용하고 그라디언트를 사용하지 마세요.
실시간 출발·요금·운행 상태를 임의로 추가하지 말고, 위 시험 자료와 기준 결과를 확인하는 방법을 설명하세요.

03만들고 다듬는 순서

  1. 그림보다 역과 연결 데이터를 먼저 만듭니다

    역의 ID와 표시 이름을 분리하면 이름이 길어져도 연결 관계가 바뀌지 않습니다. 첫 버전은 역 6개 정도로 제한하고 연결되지 않은 F를 하나 남깁니다. 보기 좋은 선을 먼저 그린 뒤 경로 데이터를 맞추면 그림에는 연결되어 있는데 탐색에는 없는 구간이 생길 수 있습니다.

  2. 환승을 어디에서 세는지 정합니다

    노선을 갈아탈 때 더하는 비용까지 계산하려면, 어느 노선으로 역에 도착했는지도 기억해야 합니다. 그래서 탐색 상태에는 역과 현재 노선을 함께 두도록 요청합니다. 최초 탑승은 환승으로 세지 않고 다른 노선으로 바뀔 때만 비용을 더합니다. 색이 같아 보여도 노선 ID가 다르면 정한 규칙에 따라 처리합니다.

  3. 작은 예시의 정답을 손으로 계산합니다

    A에서 D까지 빨강 노선으로 가면 2+3+2로 7분입니다. B에서 파랑으로 갈아타면 이동 2+1+2에 환승 4분이 더해져 9분이므로 빨강 경로를 선택해야 합니다. 반대로 B에서 출발하면 파랑의 1+2가 3분이며 최초 탑승은 환승이 아닙니다. 이런 결과를 먼저 확인한 뒤 노선을 늘립니다.

  4. 경로 없음과 같은 역을 먼저 처리합니다

    A에서 F를 선택하면 무한 시간이나 빈 경로를 정상 결과처럼 보여 주지 말고 ‘연결된 경로가 없습니다’라고 표시합니다. 출발과 도착이 같으면 이동 0분으로 처리하고 이미 강조했던 경로를 지웁니다. 선택을 바꿨는데 이전 경로가 남으면 계산보다 화면 상태 갱신을 먼저 수정합니다.

  5. 확대해도 선택한 역을 읽게 합니다

    역 이름이 겹치면 전체 그림을 더 크게 만드는 것만으로 해결하지 말고 이름 위치를 바꾸거나 선택한 역의 설명을 따로 보여 줍니다. 터치로 가는 역을 고르기 어렵다면 출발·도착 선택 상자를 같은 데이터와 연결합니다. 초기화 버튼은 지도 위치만 복구할지 경로 선택도 지울지 명확히 정합니다.

  6. 결과를 확인할 수 있는 경로 설명을 붙입니다

    ‘7분’만 표시하지 말고 탑승 노선과 역 순서, 순수 이동 시간, 환승 횟수와 비용을 함께 보여 줍니다. 같은 합계가 나오는 경로는 고정된 선택 규칙으로 표시합니다. 실제 출발 대기시간을 데이터에 넣지 않았다면 합계에 포함되어 있다고 설명하지 않습니다.

04완성 전 체크

직접 확인한 항목만 체크하세요. 체크 상태는 저장되거나 서버로 전송되지 않습니다.

05막힐 때 확인할 것

이동 시간은 짧지만 환승을 포함하면 느린 경로가 선택됩니다

탐색이 구간 이동 시간만 합산하는지 확인하고 역과 현재 노선을 상태로 두도록 요청합니다. A-D의 7분과 9분 계산을 함께 제시하고 최초 탑승에는 환승 비용을 넣지 않게 합니다.

연결되지 않은 역을 고르면 이전 경로가 계속 보입니다

새 탐색을 시작할 때 경로 강조와 요약을 먼저 초기화하도록 요청합니다. 경로 없음은 정상적인 별도 결과로 처리하고 숫자 변환에서 Infinity나 빈 값을 그대로 보여 주지 않게 합니다.

지도는 보기 좋은데 휴대전화에서 역을 고르기 어렵습니다

작은 점만 클릭 대상으로 사용하지 말고 주변에 충분한 터치 영역을 두도록 요청합니다. 이름 겹침을 조정하고 출발·도착 선택 상자를 제공해 지도 조작 없이도 같은 경로를 찾게 합니다.

06출처와 참고 자료

아래 공개 사례는 주제의 참고 자료입니다. 이 글의 도구 선택·절차·프롬프트는 AI Tools Lab의 독립적인 편집 예시이며, 원 제작자의 실제 입력이나 실행 재현 기록이 아닙니다.

Meridian Metro의 가상 노선도 사례를 참고해 경로 계산을 설명할 수 있는 작은 예시로 범위를 줄였습니다. 위 분 단위 값은 이 레시피의 시험용 데이터이며 실제 운행·대기 시간을 나타내지 않습니다.