Claude를 활용해 Ordnance Survey 지도에 Squadrats 격자를 오버레이하는 브라우저 확장 프로그램 제작기

커뮤니티 반응

사용자는 비전문가임에도 불구하고 Claude를 통해 복잡한 도구를 만들어낸 것에 대해 매우 만족하고 있으며, LLM의 능력을 높게 평가하고 있다.

합의점 vs 논쟁점

합의점

Claude가 웹 페이지의 렌더링 구조를 분석하고 코드를 주입하는 능력이 뛰어나다.
복잡한 문제 해결 시 여러 LLM을 병용하는 것이 도움이 된다.

실용적 조언

웹 서비스에 없는 기능을 추가하고 싶을 때 브라우저 확장 프로그램 형태의 코드 인젝션을 고려해볼 수 있다.
Claude가 코딩 중 막힐 경우 Gemini 등 다른 모델에게 질문하여 얻은 힌트를 제공하면 해결될 가능성이 높다.

섹션별 상세

사용자는 영국 Ordnance Survey(OS) 지도의 렌더링 방식을 분석하기 위해 Claude에게 코드 작성을 요청했다. Claude는 OS 지도가 맵 타일을 렌더링하는 내부 로직을 조사하고, 여기에 Squadrats의 1마일 단위 격자 데이터를 주입(Inject)하는 코드를 생성했다. 이 과정은 단순히 텍스트를 생성하는 것을 넘어 웹 서비스의 구조를 파악하고 기능을 확장하는 리버스 엔지니어링적 접근을 포함한다.

개발 과정에서 Claude가 특정 단계에서 해결책을 찾지 못하고 정체되는 현상이 발생했다. 사용자는 Gemini로부터 얻은 힌트를 Claude에게 전달하여 병목 지점을 해결했으며, 이는 서로 다른 LLM의 강점을 조합하여 복잡한 코딩 문제를 해결하는 멀티 모델 워크플로우의 유용성을 보여준다. 최종적으로 Claude는 확장 프로그램의 전체 코드뿐만 아니라 일반 사용자가 설치할 수 있는 상세 가이드까지 제공했다.

완성된 확장 프로그램은 OS 지도 위에 방문 여부에 따른 색상 오버레이를 실시간으로 표시한다. 방문하지 않은 구역은 투명하게, 방문한 큰 구역은 연한 녹색으로, 세부 구역까지 방문한 곳은 연한 파란색으로 구분하여 시각화한다. 이는 API나 공식 지원이 없는 상황에서도 LLM을 통해 개인화된 지리 정보 시스템(GIS) 도구를 단시간에 구축할 수 있음을 입증한다.

Ordnance Survey 지도 위에 녹색과 파란색 격자가 오버레이된 스크린샷 — ScreenshotClaude가 생성한 코드가 실제 지도 서비스 위에서 Squadrats 격자 데이터를 어떻게 시각화하는지 보여준다. 방문 구역(녹색/파란색)과 미방문 구역의 차이를 명확히 구분하여 확장 프로그램의 실질적인 작동 결과를 증명한다.

용어 해설

브라우저 확장 프로그램(Browser Extension): — 웹 브라우저의 기능을 확장하거나 웹 페이지의 내용을 수정하는 소프트웨어 모듈이다. 이 사례에서는 Claude가 생성한 코드를 통해 Ordnance Survey 지도 웹사이트의 동작을 변경하고 새로운 시각적 레이어를 추가하는 용도로 사용됐다.
오버레이(Overlay): — 기존의 이미지나 지도 데이터 위에 추가적인 정보나 그래픽을 겹쳐서 표시하는 기술이다. Squadrats의 격자 데이터를 Ordnance Survey 지도 위에 시각적으로 덧씌워 사용자가 방문한 구역을 구분할 수 있게 한다.
코드 인젝션(Code Injection): — 실행 중인 프로그램이나 웹 페이지의 코드 흐름에 외부 코드를 삽입하여 동작을 변경하는 기법이다. Claude는 지도 서비스의 렌더링 방식을 분석한 뒤, 격자 데이터를 지도 위에 강제로 그려넣는 코드를 삽입하는 방식을 제안했다.

언급된 도구

Claude추천

코드 작성 및 브라우저 확장 프로그램 개발

Gemini추천

Claude가 막힌 부분에 대한 해결 힌트 제공

Squadrats중립

격자 기반 지구 탐험 게임 데이터 소스

Ordnance Survey추천

영국 지도 서비스 플랫폼