GPT-6 Astra와 ChatGPT Work으로 러닝 경로 생성하기

I live at <my address>. Figure out 5K and 10K running routes from me that loop from my house. Use OSM data.

27분간 작동한 끝에, 요청한 결과물을 정확히 만들어냈습니다. 임베디드 시각화 화면은 물론, 다운로드 가능한 GPX 파일과 GeoJSON 파일까지 함께 제공됐죠. 생성된 5K 경로는 다음과 같습니다.

경로를 어떻게 생성했는지 물어봤더니, 이렇게 답했습니다.

Nominatim으로 주소를 찾고, Overpass로 로컬 OpenStreetMap 도로 및 트레일 데이터를 내려받은 뒤, 로컬에서 루프 경로를 계산했습니다.

아쉬운 점은, 실제로 실행된 코드와 세부 처리 과정이 ChatGPT UI에서 전혀 보이지 않았다는 것입니다. 이런 투명성 부재는 명백한 결함이라고 생각합니다.

뒤늦게 사용된 Python 코드 사본을 요청했지만, ChatGPT는 제공하지 못했습니다. 스레드가 압축(compaction) 처리된 탓으로 보입니다. 압축 기능을 사용하는 LLM 시스템이라면, 압축 전 텍스트를 반드시 보존하고 에이전트 도구 호출을 통해 접근할 수 있도록 해야 이런 문제를 막을 수 있다고 생각합니다.

지도 시각화에는 visualize 스킬이 활용됐습니다. ChatGPT UI에 직접 임베딩하기 위해 /workspace/el-granada-5k-share.html 파일을 생성하는 방식이었습니다.

해당 HTML 사본은 다음과 같이 시작합니다.

<div id="eg-share-loop">
  <div class="viz-row"><h3>El Granada harbor loop</h3><span class="text-small">5.1 km</span></div>
  <div id="eg-share-stage"></div>
  <div class="text-small text-muted">Map data © <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener">OpenStreetMap contributors</a></div>
  <style>
    #eg-share-loop { width:100%; }
    #eg-share-loop #eg-share-stage { width:100%; margin:8px 0; }
    #eg-share-loop .eg-share-map { display:block; width:100%; touch-action:none; }
    #eg-share-loop .eg-share-map text { fill:var(--foreground); font-size:12px; font-weight:400; }
    #eg-share-loop .eg-share-label { paint-order:stroke; stroke:var(--background); stroke-width:3px; stroke-linejoin:round; }
  </style>
  <script type="application/json" id="eg-share-data">{"route":{"type":"LineString","coordinates":[[-122.467425,37.4997753] ...</script>
  <script src="https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js"></script>
  <script>
  (() => {
    const root=document.getElementById('eg-share-loop');

<script type="application/json"> 요소에는 러닝 경로와 지도를 렌더링하는 데 필요한 전체 지오메트리 데이터가 담겨 있습니다. D3를 사용하며, visualize 스킬의 해당 섹션에 명시된 허용 CDN 주소에서 로드됩니다.

외부 리소스

• CSP는 cdnjs.cloudflare.com, esm.sh, cdn.jsdelivr.net, unpkg.com, fonts.googleapis.com, fonts.gstatic.com, fonts.bunny.net만 허용하며, 그 외 출처는 차단되고 오류 없이 무시됩니다.

현재 보고 계신 글은 블로그의 long-form 아티클만 포함된 피드입니다. 모든 포스트를 받아보려면 /atom/everything/을 구독하거나, 다른 구독 옵션을 확인해 보세요.