Whiteboard: AI 코딩 에이전트의 설계도와 코드를 연결하는 오픈소스 리뷰 도구

Whiteboard는 Claude Code·Codex가 설계도와 결정 기록을 캔버스에 남기고, 다이어그램에서 연결된 코드와 AST 인식 diff를 리뷰하게 돕는 무료 오픈소스 데스크톱 앱입니다.

Huuush발행 2026.09.28 · 5분 read에디터: Jay Kim

3줄 요약

  1. Whiteboard는 Claude Code·Codex 같은 코딩 에이전트가 캔버스에 남긴 설계와 결정을 실제 코드 리뷰로 연결하는 MIT 오픈소스 앱이다.
  2. 다이어그램과 trace에서 코드로 이동하고, Decision Log와 Rust 기반 AST 인식 diff로 변경 맥락을 살핀다.
  3. macOS·Windows·Ubuntu·Fedora용 설치본이 있으며 MCP로 에이전트를 연결한다. 앱 안 파일 편집과 다중 리포 리뷰 등은 제한적이다.
Whiteboard에서 시퀀스 다이어그램을 선택해 연결된 코드를 확인하는 화면

Whiteboard는 AI 코딩 에이전트가 작업 내용을 캔버스에 그려 설명하고, 사람은 설계도와 결정 기록을 눌러 해당 코드로 바로 이동해 리뷰하는 오픈소스 데스크톱 앱입니다. Claude Code와 Codex 같은 도구에 연결해 쓰며, YC W26 팀 /dev/fast의 Sid, Alex, Ketan, Milan이 만들었습니다. 2026년 9월 25일(한국시간) Hacker News Show HN에 공개됐고 MIT 라이선스로 무료 이용할 수 있습니다.

출처: YouTube devfast (yc w26), 2026-09-24 17:50 KST

Whiteboard는 설계와 코드를 어떻게 잇나

Whiteboard는 에이전트가 앱 안의 캔버스에 설계와 작업 내용을 작성하도록 SDK와 MCP 연결을 제공합니다. 팀은 다른 개발자와 화이트보드 앞에서 시스템을 함께 이해하던 경험을 에이전트 작업에도 되살리고자 했습니다. AI 에이전트와 MCP의 역할을 이해하면 이 연결 방식도 쉽게 볼 수 있습니다.

다이어그램에서 코드로 바로 이동

시퀀스·ER 다이어그램과 에이전트 trace의 인용 지점을 누르면 관련 코드 위치로 이동합니다. 편집기는 Code OSS 기반이라 VS Code 키 바인딩과 LSP를 그대로 활용합니다.

Whiteboard 데모의 시퀀스 다이어그램과 연결된 코드 화면
출처: GitHub devdotfast/whiteboard

에이전트의 결정 로그와 AST 인식 diff

결정 로그는 에이전트가 스스로 내린 결정과 그 영향이 코드 변경에 어떻게 이어졌는지 파악하기 어렵다는 문제에서 출발했습니다. 요구사항과 구현, 에이전트가 독자적으로 내린 결정을 trace와 연결해 살펴볼 수 있습니다.

Rust로 만든 AST 인식 diff 뷰어는 변경을 구문 단위로 보여 줍니다. 기본 설정에서는 크게 추가된 함수를 의사코드로 요약하고 단위 테스트와 문서 변경은 접거나 숨깁니다. 표시 방식은 WASM 플러그인으로 바꿀 수 있습니다.

설치하고 코딩 에이전트 연결하기

공식 설치 페이지에서 앱을 받으면 됩니다. 2026년 9월 26일 공개된 v0.1.3은 macOS Apple Silicon DMG, Windows 설치 프로그램과 ZIP, Ubuntu .deb, Fedora .rpm을 제공합니다.

  1. 앱을 설치해 실행합니다.
  2. 첫 화면에서 Claude Code, Codex 등 사용할 코딩 에이전트를 연결합니다.
  3. 예를 들어 “현재 브랜치를 최신 main과 비교해 리뷰하고 Whiteboard에 열어 줘”라고 요청합니다.

연결은 MCP를 사용합니다. Claude Code 플러그인은 ~/.local/bin/whiteboard mcp를 stdio 서버로 실행하며, Codex 플러그인은 번들된 whiteboard-mcp를 이용합니다. Cursor도 로컬 whiteboard mcp 명령을 등록할 수 있습니다. 에이전트는 작성에 앞서 whiteboard api session_get_instructions '{}'를 호출해 앱의 최신 작성 지침을 받습니다.

저장소 README는 GPT-6 Sol과 Claude Opus 5.5를 권장합니다. 새 API 변경을 검토한다면 “제안한 API와 사용 예시, 그렇게 설계한 이유를 다이어그램에 보여 줘”처럼 요청할 수 있습니다. 마음에 들지 않는 부분은 복사해 에이전트에게 전달하면 다시 그리도록 요청할 수 있습니다. 직접 개발 실행하려면 Node.js 24와 pnpm 11을 준비하고 pnpm install, pnpm dev를 실행합니다. 구글 AI 에이전트 런타임 AX 글도 관련 에이전트 실행 환경을 살펴보는 데 도움이 됩니다.

무료 MIT 앱과 팀 호스팅 계획

데스크톱 앱은 MIT 라이선스의 무료 오픈소스이며 로컬 체크아웃에서 실행됩니다. 익명 텔레메트리에는 코드, diff, 프롬프트, 모델 출력이 포함되지 않으며 설정에서 끌 수 있습니다. 세션 관리, trajectory 저장, 멀티플레이어 리뷰를 포함한 팀용 호스팅 버전은 유료로 준비 중이고 self-host도 계속 지원할 계획입니다. GitHub 저장소는 2026년 9월 28일 기준 1,972개 스타를 받았고 같은 날에도 커밋이 올라왔습니다.

사용 전에 알아둘 점

  • 앱 안에서 파일을 직접 편집할 수 없습니다.
  • 하나의 리뷰에서 여러 리포지토리를 함께 다루는 기능은 아직 제한적입니다.
  • 공유한 리뷰를 수정해도 상대 화면에 자동 반영되지 않으므로 변경본을 다시 공유해야 합니다.

자주 묻는 질문

AI 코딩 에이전트가 작성한 설계도와 결정 기록을 캔버스에 모으고, 각 항목에서 관련 코드로 이동해 리뷰하는 오픈소스 데스크톱 앱입니다.

Claude Code와 Codex 플러그인을 제공하며 MCP를 통해 Cursor 등에서도 연결할 수 있습니다.

데스크톱 앱은 MIT 라이선스로 무료입니다. 세션 관리와 멀티플레이어 리뷰를 포함한 팀 호스팅 버전은 유료로 준비 중입니다.

v0.1.3은 macOS Apple Silicon, Windows, Ubuntu, Fedora 설치 파일을 제공합니다.

앱 안에서 파일을 편집할 수 없고 여러 리포지토리를 한 리뷰에서 다루는 기능이 제한적입니다. 공유 후 수정 내용은 다시 공유해야 상대에게 보입니다.

함께 보면 좋은 글

AI 에이전트에 마케팅 팀을 통째로 넣는 법

출처

작성자 소개

제이킴유니버스

제이킴유니버스

AI 자동화와 홈페이지 제작으로 업무 시간을 줄이고 매출을 만듭니다.