안녕하세요, 저는 Rijul입니다. 저는 비즈니스 핵심 시스템을 위해 설계된, 영향 반경(blast-radius) 인지 AI 코드 리뷰 도구인 LiveReview를 만들고 있습니다. 별표하기를 통해 개발자들이 프로젝트를 발견하고, 사용해보고, 제품 개선에 도움이 되는 피드백을 공유할 수 있도록 도와주세요.

저희는 온갖 종류의 작업을 위해 AI 에이전트를 사용합니다. 일부 에이전트는 심지어 사용자가 작업하는 동안 동반자처럼 브라우저와 상호작용할 수도 있습니다.

OpenCode를 사용하는 사람으로서, 저는 그 기능을 제 워크플로우로 가져오고 싶었습니다. OpenCode가 제가 하는 작업을 도와주는 과정에서 관련 브라우저 컨텍스트에 접근할 수 있도록 브라우저와 상호작용하기를 원했습니다.

이 글에서는 Browser MCP를 사용하여 브라우저를 OpenCode에 연결하는 방법을 알아보겠습니다.

1. 필요한 것들

설정을 하려면 두 가지 구성 요소가 필요합니다:

브라우저 확장 프로그램(Browser extension): 브라우저를 MCP 서버에 연결합니다.
로컬 MCP 서버(Local MCP server): AI 클라이언트가 모델 컨텍스트 프로토콜(Model Context Protocol, MCP)을 통해 브라우저와 상호작용할 수 있도록 합니다.

설정해 보겠습니다.

2. 브라우저 확장 프로그램 설치하기

먼저 다음 페이지를 방문하여 Browser MCP 확장 프로그램을 설치하세요:

[https://browsermcp.io/install]

Browser MCP extension installation page

확장 프로그램 설치 후, 더 많은 정보가 있는 페이지로 이동하게 됩니다.

Browser MCP setup page

이 페이지에는 공식 Browser MCP 문서 링크가 포함되어 있으며, 여기서 추가적인 설정 지침과 작동 방식에 대한 세부 정보를 찾을 수 있습니다:

[https://docs.browsermcp.io/]

OpenCode 설정 파일(configuration file)을 열고 다음 구성을 추가하세요:

    {
      "$schema": "https://opencode.ai/config.json",
      "mcp": {
...

이 구성은 OpenCode가 npx를 사용하여 Browser MCP 서버를 로컬에서 시작하도록 지시합니다.

추가를 완료한 후 설정을 저장하세요.

4. 브라우저 연결 및 테스트

MCP 서버를 구성했다면, Browser MCP가 연결되었는지 확인하세요.

Browser MCP connection in OpenCode

이제 작동하는지 테스트해 봅시다.

OpenCode로 이동하여 브라우저 상호작용이 필요한 작업을 부여하세요. 예를 들어:

    "Go to the Wikipedia page for "Open-source software" and list the main section headings."

Browser MCP 서버는 OpenCode가 브라우저와 상호작용하고 요청된 페이지로 이동할 수 있게 합니다.

Browser MCP navigating to the Wikipedia page

에이전트가 반환한 결과입니다.

OpenCode agent's result

보시다시피, OpenCode는 대화에 이미 존재하는 정보에만 의존하는 대신 브라우저를 사용하여 작업을 완료할 수 있습니다.

결론

이것이 OpenCode에 Browser MCP를 연결하는 방법입니다.

이 설정을 통해 AI 지원 워크플로우에 브라우저 상호작용을 가져올 수 있습니다. 더 이상 AI 에이전트와 브라우저를 분리하여 작업할 필요 없이, 연결된 브라우저를 통해 웹 페이지 탐색 및 정보 수집을 포함하는 작업을 OpenCode에 부여할 수 있습니다.

AI 코딩 어시스턴트가 기존 워크플로우와 함께 웹의 관련 정보까지 활용하기를 원할 때 유용합니다.

이것으로 본문은 끝입니다. 다음 글에서 뵙겠습니다!

_
당신의 팀은 주의력에 한계가 있으며, AI가 생성한 코드의 홍수는 생산성을 유지하고 보안을 확보하는 것을 더 어렵게 만들고 있어 속도를 늦추지 않고도 어려움을 겪고 있습니다._

_
저는 비즈니스 중요 시스템을 위해 설계된, blast-radius를 인지하는(blast-radius aware) AI 코드 리뷰 도구인 LiveReview를 개발하고 있습니다.

모든 diff를 동일한 강조점으로 제시하는 대신, LiveReview는 각 변경 사항의 영향 범위(blast radius)—즉, 호출 그래프(call graph)를 통해 미치는 영향의 정도—별로 점수를 매겨, 실제로 중요한 곳에 주의력을 집중할 수 있도록 합니다.

비즈니스 위험이 가장 높은 곳에서 코드 리뷰 노력을 기울이세요. 모든 diff에 고르게 분산시키지 마십시오.

⭐ GitHub에서 별표 표시하기:

GitHub logo HexmosTech / LiveReview

비즈니스 중요 시스템을 위한 위험 인지 AI 코드 리뷰

LiveReview: 비즈니스 중요 시스템을 위한 위험 인지 AI 코드 리뷰

LiveReview는 **블래스트 반경(blast radius)**을 기준으로 diff의 모든 부분을 점수화하는 AI 코드 리뷰어입니다. 블래스트 반경이란 변경 사항이 호출 그래프를 통해 얼마나 멀리 도달하는지, 영구 상태(persistent state)에 얼마나 많이 영향을 미치는지, 그리고 테스트가 얼마나 잘 되어 있는지를 의미합니다. 공유 인증 확인 로직을 3줄만 수정해도 300줄의 UI 개선보다 더 높은 위험도를 가질 수 있습니다. 팀은 모든 diff에 균등하게 주의를 기울이는 것이 아니라, 가장 위험도가 높은 코드부터 살펴봐야 합니다.

blast-radius-demo.mp4

LiveReview의 블래스트 반경 및 리뷰 우선순위 점수화가 diff 뷰어에서 실시간으로 작동합니다.