VS Code의 통합 브라우저(Integrated Browser)에는 이미 렌더링된 페이지에서 요소를 선택하고 그 컨텍스트(context)를 Copilot Chat에 추가할 수 있는 유용한 기능이 있습니다. 저에게 문제는 제가 주로 Claude Code VS Code 확장을 사용한다는 점이었고, 동일하게 선택된 요소의 컨텍스트를 가져와 다른 코딩 에이전트(coding agent)로 전달하는 간단한 방법이 없어 보였다는 것입니다. 그래서 저는 무료 오픈 소스 VS Code 확장 프로그램인 Pinpoint를 만들었습니다. 워크플로우는 다음과 같습니다: VS Code의 통합 브라우저에서 앱을 엽니다. Pinpoint 버튼을 클릭하고 요소를 선택합니다. Pinpoint가 해당 요소의 DOM과 관련 스타일 컨텍스트를 캡처합니다. 결과물을 로컬 .pinpoint/ Markdown 파일에 작성합니다. 복사된 @.pinpoint/... 참조를 Claude Code에 붙여넣습니다. 이 보고서에는 셀렉터(selector), URL, outer HTML, 크기(dimensions), 일치 및 상속된 CSS, 필터링된 계산된 값(computed values), 그리고 해결된 CSS 변수(resolved CSS variables)가 포함됩니다. 이 도구는 Claude Code와 직접 통합되거나 문서화되지 않은 Claude 명령에 의존하지 않습니다. Claude가 읽을 수 있는 일반적인 워크스페이스 파일을 생성하며, 이는 동일한 워크플로우가 다른 코딩 에이전트와도 작동함을 의미합니다. 내부적으로 이 확장은 VS Code의 디버거(debugger)를 통합 브라우저에 연결하고, 격리된 요소 선택기(element picker)를 주입한 뒤, 디버거를 연결 해제합니다. 그 후 브라우저가 적절한 통신 브리지(communication bridge)를 노출하지 않기 때문에, 클립보드(clipboard)를 임시 IPC 채널로 사용하여 캡처된 데이터를 확장 프로그램으로 반환합니다. 솔직히 약간 기괴한(cursed) 구현 방식이긴 하지만, 저장소(repository)를 보고 추측하게 만드는 대신 Claude에게 제가 의도한 렌더링된 요소가 정확히 무엇인지 알려주는 데 매우 유용했습니다. GitHub: https://github.com/MarcellM01/Pinpoint VS Code Marketplace: https://marketplace.visualstudio.com/items?itemName=marcellm01.tinysuite-pinpoint 이 프로젝트는 완전히 무료이며 오픈 소스(MIT)입니다.