Show GN: Git 변경사항을 6명의 프론트엔드 리뷰어가 동시에 보는 Claude Code 플러그인

git diff나 단일 파일을 6가지 관점(React 성능 / 코드 품질 / 버그 / TypeScript / 접근성 / 보안)으로 동시 리뷰하고, synthesizer 에이전트가 결과를 단일 우선순위 리포트로 합쳐주는 Claude Code 플러그인입니다.

만든 배경

PR 리뷰를 LLM에게 시킬 때 "전반적으로 리뷰해줘"라고 한 컨텍스트에 다 넣으면 두 가지 문제가 있습니다.

• 추론 오염: perf 관점의 톤이 a11y 관점의 톤에 영향을 줍니다.
• Mode collapse: diff에서 가장 두드러진 한 축으로 답이 쏠립니다.

각 가이드라인은 사실 '서로 다른 질문'에 답합니다. perf는 '빠른가', a11y는 '모두에게 도달하나', security는 '데이터가 새는가', quality는 '변경하기 쉬운가'. 그래서 한 사람한테 다 시키는 대신, 각자 격리된 sub-agent 컨텍스트에서 같은 변경을 검토한 뒤 결과만 모아 머지하는 구조로 만들었습니다.

6개 기본 리뷰어 (업계 검증된 가이드라인 그대로)

• react-perf — Vercel React Best Practices
• quality — Toss Frontend Fundamentals (가독성/예측가능성/응집도/결합도)
• bugs — React rules-of-hooks + ESLint/TS-ESLint 정확성 룰
• ts — Google TypeScript Style Guide + Effective TypeScript
• a11y — WCAG 2.2 + ARIA APG
• security — 프론트엔드 보안 패턴 (XSS, 시크릿 누출, 안전하지 않은 저장 등)

리뷰어는 직접 추가/교체할 수 있습니다 (i18n, motion, design tokens 등).

사용법

Claude Code 안에서 두 줄로 설치:

/plugin marketplace add huurray/fe-review-agents
/plugin install fe-review-agents@fe-review-agents

리뷰 실행:

/fe-review-agents:diff-review # staged 변경
/fe-review-agents:diff-review branch:main # main 대비 diff
/fe-review-agents:file-review src/App.tsx # 단일 파일 딥다이브

옵션:

• lang=ko|en (기본 ko)
• severity_min=LOW|MED|HIGH|CRITICAL (그 이하 심각도는 리포트에서 제외)

트레이드오프

토큰은 단일 컨텍스트 대비 대략 6배 듭니다. 그 대신 추론 오염과 mode collapse 없이 다관점 커버리지를 얻습니다. 비용을 아끼려는 팀보다는, 돈보다 안정성을 우선하는 팀에 맞는 도구입니다.

영감

토스가 사내에서 쓴다고 알려진 Compounding Engineering 패턴(여러 LLM이 병렬로 PR을 본다)에서 영감을 받았습니다.

피드백/이슈/PR 환영합니다. 🙏