화면을 클릭하면 그 줄을 고쳐 준다

웹 화면에서 고치고 싶은 요소를 클릭하고 원하는 바를 적으면, 클로드 코드(Claude Code)가 해당 소스 파일의 정확한 위치를 찾아 즉시 수정하는 오픈소스 도구 '핀픽스(PinFix)'가 공개됐다. 디자인 시안에 코멘트를 다는 방식으로 프론트엔드를 고친다는 발상이다.

무슨 일인가

지금까지 코딩 에이전트에게 화면 수정을 시키려면 말이 길어졌다. 어느 페이지의 어느 영역인지, 그 컴포넌트가 어느 파일에 있는지를 사람이 먼저 찾아 설명해야 했다. 대화의 절반이 위치 설명으로 나갔고, 엉뚱한 컴포넌트를 고치는 일도 잦았다.

핀픽스는 순서를 뒤집는다. 개발 서버를 띄운 상태에서 단축키로 주석 모드에 들어가면 마우스를 올린 요소가 테두리로 강조되고, 클릭해 핀을 꽂는 순간 도구는 이미 그 요소의 소스 파일과 줄·열 위치를 알고 있다. 대화가 위치 설명이 아니라 요구사항부터 시작된다는 것이 이 도구의 핵심이다. 수정은 소스 파일에 직접 반영되고, 개발 서버의 핫 리로드가 결과를 곧바로 화면에 보여 준다.

핵심 짚어보기

설치는 빌드 설정에 플러그인 한 줄을 추가하는 것으로 끝난다. 비트(Vite)·웹팩(Webpack)·알스팩(Rspack) 계열 설정을 모두 지원하고, 리액트(React)·뷰(Vue)·스벨트(Svelte)를 포함해 JSX·TSX 기반이면 프레임워크를 가리지 않는다. 개발 모드에서만 활성화되며 통신용 서버는 자동으로 뜨고 자동으로 정리된다.

말로 설명하는 쪽이 오히려 느린 작업을 위해 조정 패널도 붙어 있다. 텍스트·레이아웃·여백·크기·색상·테두리·타이포그래피를 브라우저 개발자 도구 다루듯 직접 조절하는 방식이다. 즉 미세 조정은 손으로, 구조 변경은 말로 시키는 분업이 한 화면에서 가능해진다.

달리 보면 이 도구가 실제로 줄여 주는 것은 코드를 쓰는 시간이 아니라 맥락을 넘기는 시간이다. 요청 한 건마다 파일을 찾고 경로를 확인하고 설명을 적던 몇 분이 클릭 한 번으로 대체된다. 수정 요청이 하루 스무 건씩 쌓이는 작업에서는 이 몇 분이 곧 하루치 작업량을 가른다.

1인기업 실전 적용 포인트

• 랜딩 페이지 문구와 여백 수정처럼 잦고 사소한 작업에서 시간이 가장 많이 샌다. 이런 작업만 넘겨도 체감 차이가 크다.
• 클라이언트가 화면을 보며 요청하는 자리에서 그대로 반영해 보여 줄 수 있다. 수정 요청을 받아 적고 다음 날 처리하던 왕복이 사라진다.
• 개발 모드 전용이라는 점을 확인하고 쓰되, 배포 빌드에 플러그인이 섞이지 않도록 설정을 분리하라.
• 구조를 아직 다 파악하지 못한 프로젝트를 넘겨받았을 때 특히 쓸모 있다. 화면에서 짚으면 위치를 찾아 주므로 탐색 시간이 줄어든다.

전망 / 주의점

공개 초기 단계 프로젝트이고, 소스 위치 추적이 빌드 도구가 남기는 정보에 의존하므로 설정이 복잡한 프로젝트에서는 위치가 어긋날 수 있다. 에이전트가 소스를 직접 고치는 구조인 만큼 버전 관리 없이 쓰는 것은 권하지 않는다. 변경 전 커밋이 최소한의 안전장치다. 화면을 가리키며 지시하는 방식 자체는 앞으로 코딩 에이전트 도구들이 공통으로 흡수해 갈 인터페이스로 보인다.

출처: GitHub (https://github.com/ForeverSc/pinfix)