plugin-architecture

대규모 AI 코드 리뷰 오케스트레이션 (새 탭에서 열림)

Cloudflare는 기존 AI 코드 리뷰 도구의 유연성 부족과 단순 요약 방식의 한계를 극복하기 위해 오픈소스 에이전트인 OpenCode 기반의 CI 네이티브 오케스트레이션 시스템을 구축했습니다. 이 시스템은 보안, 성능 등 각 분야에 특화된 다수의 전문 에이전트를 코디네이터가 관리하여 노이즈를 줄이고 정확도 높은 리뷰 결과를 제공합니다. 현재 수만 개의 머지 리퀘스트를 처리하며 실제 버그와 보안 취약점을 효과적으로 차단하는 등 엔지니어링 생산성을 획기적으로 개선하고 있습니다. **기존 접근 방식의 한계와 다중 에이전트 전략** * 단순히 Git Diff를 LLM에 입력하는 방식은 환각(Hallucination) 현상과 무의미한 수정 제안 등 노이즈가 많아 실질적인 코드 품질 향상에 한계가 있었음. * Cloudflare는 하나의 거대한 모델 대신 보안, 성능, 코드 품질, 문서화, 릴리스 관리, 내부 규정 준수 등 최대 7개의 전문 에이전트를 동시에 실행하는 구조를 선택함. * '코디네이터 에이전트'가 개별 에이전트의 발견 사항을 취합하여 중복을 제거하고, 문제의 실제 심각도를 판단한 뒤 하나의 구조화된 리뷰 코멘트로 통합함. **플러그인 기반의 유연한 아키텍처** * 다양한 버전 관리 시스템(VCS)과 AI 프로바이더를 지원하기 위해 `ReviewPlugin` 인터페이스 기반의 컴포저블 아키텍처를 채택함. * 리뷰 실행 주기는 세 단계로 나먐: 병렬로 실행되는 `Bootstrap`(비동기 준비), 순차적으로 실행되며 실패 시 중단되는 `Configure`(필수 설정), 그리고 원격 설정 로드 등을 처리하는 `postConfigure` 단계임. * `ConfigureContext` API를 통해 각 플러그인은 독립적으로 에이전트 등록, 프롬프트 주입, 환경 변수 설정을 수행하며, 최종적으로 `opencode.json` 설정 파일로 병합됨. * 이러한 격리 구조 덕분에 GitLab 플러그인이 AI Gateway 설정을 알 필요가 없는 등 컴포넌트 간 결합도를 최소화함. **OpenCode와 Bun을 활용한 기술적 구현** * OpenCode는 오픈소스이며 서버 중심 구조를 가지고 있어 프로그래밍 방식으로 세션을 생성하고 SDK를 통해 결과를 수집하기에 적합함. * 대규모 머지 리퀘스트 처리 시 발생하는 Linux 커널의 `ARG_MAX` 제한(E2BIG 에러)을 해결하기 위해, Bun의 `stdin` 스트림을 통해 대용량 프롬프트를 전달함. * 오케스트레이터는 OpenCode를 자식 프로세스(`Bun.spawn`)로 실행하며, 모든 출력은 JSONL 형식의 `stdout` 이벤트를 통해 실시간으로 모니터링 및 수집됨. Cloudflare의 사례는 단순한 AI 도입을 넘어, 대규모 조직의 복잡한 표준과 요구사항을 충족하기 위해 다중 에이전트와 플러그인 시스템이 왜 필요한지 잘 보여줍니다. 특히 CI/CD 파이프라인의 핵심 경로에 AI를 배치할 때 발생하는 인자 크기 제한이나 도구 간 결합도 문제를 해결한 아키텍처는 대규모 엔지니어링 팀에 실질적인 가이드라인이 될 것입니다.

마이크로소프트 존 프리드 (새 탭에서 열림)

마이크로소프트는 대규모 조직 내 디자인 일관성을 유지하고 반복적인 수작업을 줄이기 위해 Figma 플러그인을 워크플로우의 핵심으로 도입했습니다. 이들은 단순한 도구 활용을 넘어, 디자인 시스템과 실시간 데이터를 연결하는 맞춤형 플러그인을 통해 수천 명의 디자이너와 엔지니어 사이의 협업 간극을 좁혔습니다. 결과적으로 디자인 프로세스의 자동화를 실현하며 제품의 품질과 팀의 생산성을 동시에 높이는 성과를 거두었습니다. ### 대규모 디자인 시스템 관리와 일관성 유지 * 수백 개의 제품과 수천 명의 디자이너가 협업하는 환경에서 수동 업데이트는 오류를 유발하고 일관성을 해치는 주요 원인이었습니다. * 마이크로소프트는 'Fluent UI' 디자인 시스템을 플러그인과 결합하여, 디자인 요소의 변경 사항이 모든 제품군에 즉각적이고 정확하게 반영되도록 시스템화했습니다. * 중앙 집중화된 도구를 통해 개별 디자이너가 최신 가이드를 일일이 확인하지 않아도 시스템의 규칙을 준수할 수 있는 환경을 구축했습니다. ### 실제 데이터를 활용한 현실적인 디자인 환경 구축 * 'Content Reel'과 같은 플러그인을 개발하여 더미 텍스트 대신 실제 사용자 이름, 아바타, 아이콘 등의 데이터를 디자인 파일에 즉시 삽입할 수 있게 했습니다. * 이를 통해 디자이너는 실제 사용자가 경험하게 될 화면을 더 정확하게 예측하고, 텍스트 길이에 따른 레이아웃 깨짐 등 엣지 케이스를 디자인 단계에서 사전에 발견할 수 있게 되었습니다. ### 반복 업무 자동화를 통한 디자인 생산성 극대화 * 레이아웃 정렬, 접근성 검사, 레드라이닝(치수 및 사양 표기) 등 소모적인 수작업을 자동화 플러그인으로 대체했습니다. * 디자이너가 픽셀 단위의 단순 조정 작업에 시간을 쏟는 대신, 제품의 핵심 사용자 경험과 복잡한 문제 해결에 집중할 수 있는 시간을 확보했습니다. * 자동화된 검수 도구는 디자인 핸드오프(Hand-off) 과정에서의 커뮤니케이션 오류를 줄여 개발 효율성까지 증대시켰습니다. ### 디자인과 엔지니어링의 유기적인 기술 연동 * 디자인 토큰(Design Tokens)을 관리하는 플러그인을 활용하여 디자인 변경 사항을 코드로 직접 변환하고 배포 프로세스의 정확도를 높였습니다. * 플러그인은 단순한 그리기 도구를 넘어 디자인과 개발 사양을 연결하는 가교 역할을 수행하며, 디자인 시스템의 업데이트가 엔지니어링 환경으로 즉각 전파될 수 있는 파이프라인을 형성했습니다. 마이크로소프트의 사례는 대규모 조직일수록 도구의 자동화와 커스텀 플러그인 구축이 선택이 아닌 필수임을 보여줍니다. 반복적인 작업은 기술에 맡기고 디자이너는 창의적인 의사결정에 집중할 수 있는 '도구 기반의 워크플로우'를 구축하는 것이 현대적인 제품 개발 조직의 핵심 경쟁력입니다.

플러그인 보안 업데이트 (새 탭에서 열림)

Figma는 사용자의 생산성을 높이기 위해 서드파티 개발자가 기능을 확장할 수 있는 플러그인 시스템을 구축하면서, 보안과 성능이라는 두 마리 토끼를 잡는 것을 최우선 과제로 삼았습니다. 단순히 외부 코드를 실행하는 것을 넘어, 메인 애플리케이션의 안정성을 해치지 않으면서도 네이티브 기능처럼 매끄럽게 작동하는 환경을 만드는 것이 핵심입니다. 이를 위해 Figma는 브라우저의 기본 보안 모델을 넘어 WebAssembly와 가상화된 JavaScript 엔진을 결합한 독창적인 샌드박스 구조를 설계했습니다. ### 기존 격리 방식의 한계와 도전 * **Iframe의 제약:** 초기에 고려된 Iframe 방식은 보안상 이점이 있지만, 렌더링 오버헤드가 크고 메인 스레드와의 통신(postMessage)이 비동기적으로만 이루어져 성능 병목 현상이 발생했습니다. * **Web Worker의 부재:** Worker는 별도 스레드에서 실행되어 메인 UI를 차단하지 않지만, DOM에 직접 접근할 수 없고 데이터 복사 비용이 커서 복잡한 그래픽 작업이 많은 Figma에는 부적합했습니다. * **신뢰할 수 없는 코드:** 누구나 플러그인을 올릴 수 있는 환경에서 사용자의 비공개 디자인 데이터와 액세스 토큰을 보호하기 위해서는 완벽한 코드 격리가 필수적이었습니다. ### WebAssembly와 QuickJS를 이용한 보안 샌드박스 * **QuickJS의 도입:** Figma는 매우 가볍고 표준을 잘 준수하는 JavaScript 엔진인 QuickJS를 WebAssembly(Wasm)로 컴파일하여 브라우저 내부에서 실행했습니다. * **가상 머신 기반 격리:** 플러그인 코드는 메인 브라우저 엔진이 아닌, Wasm 위에서 돌아가는 QuickJS 엔진 안에서만 실행됩니다. 이를 통해 플러그인은 브라우저 API나 메인 앱의 메모리에 직접 접근하는 것이 원천적으로 차단됩니다. * **자원 제어:** Wasm 기반 샌드박스를 사용하면 플러그인이 사용하는 메모리 양을 제한하거나, 무한 루프에 빠진 플러그인을 강제로 종료하는 등의 세밀한 제어가 가능해져 앱 전체의 안정성을 보장합니다. ### 효율적인 통신을 위한 API 설계 * **프록시를 통한 간접 접근:** 플러그인이 Figma의 문서 객체 모델(SceneGraph)을 다룰 때, 직접적인 객체 참조 대신 프록시(Proxy)를 거쳐 필요한 데이터만 선별적으로 전달합니다. * **동기적 인터페이스의 구현:** 개발자 경험을 위해 비동기 통신 구조 위에서도 마치 동기적으로 코드를 작성하는 것과 같은 직관적인 API를 제공하여 플러그인 제작의 진입장벽을 낮췄습니다. * **성능 최적화:** 메인 앱과 샌드박스 간의 데이터 교환을 최소화하기 위해 변경 사항을 배치(Batch)로 처리하거나 필요한 시점에만 데이터를 가져오는 지연 평가(Lazy evaluation) 방식을 도입했습니다. ### 안전하고 지속 가능한 확장성 웹 환경에서 외부 코드를 실행해야 한다면 브라우저가 제공하는 기본 격리 기능에만 의존하기보다, WebAssembly와 같은 기술을 활용해 자체적인 샌드박스 계층을 구축하는 것이 보안과 성능을 모두 지키는 가장 확실한 방법입니다. Figma의 사례는 사용자 데이터 보호라는 엄격한 기준을 유지하면서도 개발자 생태계를 성공적으로 확장할 수 있는 기술적 청사진을 제시합니다.