Claude Code에 브라우저 컨텍스트를 제공하는 더 깔끔한 방법 — 몇 가지 메모
Found a cleaner way to give Claude Code real browser context — some notes
핵심 요약
Claude Code에 브라우저 컨텍스트를 효과적으로 전달하기 위해 opera-browser-cli를 활용하는 방법을 공유함.
- 브라우저 컨텍스트 — Claude Code가 로그인 상태나 다단계 탐색을 처리할 수 있도록 브라우저를 연동함.
- Opera Neon 활용 — opera-browser-cli를 사용하여 Claude Code SKILLs를 기본적으로 통합함.
- 아키텍처 분리 — Claude Code가 오케스트레이션을 담당하고 CLI가 브라우저 네이티브 작업을 처리함.
- 실패 복구 — 브라우저 파이프라인이 멈췄을 때의 복구 방안에 대해 커뮤니티의 의견을 구함.
몇 달 동안 같은 벽에 부딪혔음: Claude Code는 웹에서 무엇을 해야 할지는 기가 막히게 찾아내지만, 여러 사이트에 걸친 실제 로그인 상태가 필요한 작업이 되면 바로 무너짐. 스크린샷 기반 접근 방식은 토큰 노이즈가 너무 많이 발생함. Playwright 스타일 도구는 에이전트가 직접 해석해야 하는 원시 DOM을 던져줌. 모든 우회 방법이 문제를 해결하기보다는 임시방편으로 땜질하는 느낌이었음.
상황을 바꾼 건 Opera Neon의 명령줄 인터페이스인 opera-browser-cli였음. Claude Code를 위해 이걸 특별히 써보게 된 이유는, 설정 스크립트를 실행하면 Claude Code SKILLs가 기본으로 설치되기 때문임. 즉, 통합이 나중에 덧붙인 게 아니라 의도된 사용 사례라는 뜻임.
설정은 간단함: Node.js ≥ 20을 설치하고 npm install -g opera-browser-cli && opera-browser-cli setup을 실행하면 됨. 그 후 Neon은 터미널에서 호출 가능한 Do, Make, Research 등 38개의 명령어를 제공함. 헤드리스 모드 덕분에 눈에 보이는 창 없이 백그라운드에서 실행되는데, 이게 바로 파이프라인 관련 작업에 필요했던 기능임.
나한테 효과적인 아키텍처는 이거임: Claude Code가 오케스트레이션을 담당하고 무엇을 해야 할지 결정함. CLI는 인증된 세션, 다단계 탐색, 콘텐츠의 의미론적 이해가 중요한 페이지 등 실제 브라우저 네이티브 작업이 필요한 모든 것을 처리함. 깔끔한 분리, 땜질은 없음.
이게 유일한 해결책이라고 주장하는 건 아님. 하지만 커뮤니티 어디에서도 이 내용을 본 적이 없고, Claude Code SKILLs가 기본으로 포함된 걸 보니 다른 사람들도 유용하게 쓸 수 있을 것 같았음.
혹시 다른 브라우저 레이어로 비슷한 설정을 해본 사람이 있는지 궁금함. 특히 브라우저 파이프라인이 멈췄을 때 실패 복구를 어떻게 처리하고 있는지 관심이 많음.


