motif MCP가 Claude Code에 UI 버그 재현을 위한 동영상 시청 기능을 제공하다

Claude Code는 기본적으로 비디오를 시청할 수 없어서 호버 상태, 애니메이션, 스크롤 동작 같은 시각적 UI 버그를 진단할 때 버그를 글로 설명해야 하므로 번거롭습니다. motif는 새로운 MCP 서버로, Claude Code가 버그의 화면 녹화를 가리키게 하여 이 문제를 해결합니다.

작동 방식

버그를 녹화하고 motif에 파일을 지정하면 세 가지 결과를 반환합니다: 시각적으로 발생하는 현상, 근본 원인, diff입니다. 내부적으로 Gemini 2.5 Flash를 사용하는데, 이 모델은 단일 스크린샷이 아닌 프레임 시퀀스로 비디오를 처리하기 때문에 200ms 오버슛이나 잘못된 타이밍에 리셋되는 호버 상태와 관련된 버그에 중요합니다.

설정

Gemini API 키가 필요합니다. 그런 다음 mcp.json에 두 줄을 추가하세요:

{
  "mcpServers": {
    "motif": {
      "command": "npx",
      "args": ["motif-mcp"],
      "env": {
        "GEMINI_API_KEY": "your-key-here"
      }
    }
  }
}

그러면 인터페이스는 간단합니다: Claude Code에게 녹화를 시청하라고 지시하면 됩니다.

사용해보기

npx motif-mcp를 실행하여 시작하세요. 프로젝트는 초기 단계이므로 피드백을 환영합니다.

대상 사용자

프론트엔드 작업에 Claude Code를 사용하는 개발자로서, 시각적 문제에 대해 수동으로 버그를 설명하는 단계를 건너뛰고 싶은 분들입니다.