Show HN: Whiteboard — 에이전트와 함께 소프트웨어 설계를 살피는 오픈소스 캔버스

AI 요약

Whiteboard는 개발자와 코딩 에이전트가 같은 작업 공간에서 소프트웨어 구조와 변경 사항을 검토하는 오픈소스 데스크톱 앱입니다. Claude Code, Codex 같은 에이전트에 SDK를 제공해 앱 안의 캔버스에 내용을 그리게 합니다. 저장소의 현재 브랜치를 최신 main과 비교하거나, 에이전트에게 변경 사항을 설명하는 다이어그램을 만들도록 요청하는 식으로 사용합니다.

코드와 연결되는 설계 자료

시퀀스 다이어그램, 엔터티 관계 다이어그램, 에이전트 추적 기록의 인용문을 클릭하면 해당 코드로 이동합니다. 편집기에는 VS Code의 키 바인딩과 LSP 지원을 가져왔습니다. 설계 자료와 구현 코드 사이를 오가며 변경의 맥락을 살피는 방식입니다.

AST를 읽는 diff 뷰어

일반 diff는 변경량이 많을 때 검토가 어려워질 수 있습니다. Whiteboard는 Rust로 AST를 인식하는 의미 기반 diff 뷰어를 만들었습니다. 큰 함수 추가는 의사 코드로 요약하고, 단위 테스트와 문서 변경은 접거나 숨기는 기본 설정을 제공합니다. 동작은 WASM 기반 플러그인 시스템으로 조정할 수 있습니다.

에이전트의 판단과 작업 기록

개발자가 정한 요구 사항이 어떻게 구현됐는지, 에이전트가 어떤 결정을 자율적으로 내렸는지 추적하기 어렵다는 문제에서 출발했습니다. 에이전트가 자신의 작업 기록을 조회하고 캔버스에 연결하는 도구를 제공합니다. 작성자는 구현 과정에서 드러난 선택과 요구 사항을 함께 살펴보는 데 초점을 둡니다. 계획만 먼저 승인하는 방식 외에도, 계획과 코드를 함께 만든 뒤 결과를 설명하는 흐름을 주로 사용한다고 밝혔습니다. 계획용 버전 관리 아티팩트를 다루는 scratchpad 기능은 실험 단계입니다.

배포와 현재 제약

MIT 라이선스로 공개하며 로컬 저장소를 대상으로 실행합니다. 익명 텔레메트리에는 코드, diff, 캔버스 내용, 프롬프트, 모델 출력이 포함되지 않으며 설정에서 끌 수 있습니다. 현재 Whiteboard 안에서 파일을 편집할 수 없고, 하나의 리뷰에서 여러 저장소를 다루는 기능도 충분히 지원하지 않습니다. 공유한 리뷰는 이후 변경 사항이 자동 반영되지 않아 다시 공유해야 합니다. 팀용 호스팅 제품을 계획 중이며, 자체 호스팅은 계속 지원한다고 밝혔습니다.

Hacker News 반응

• @bbor — 의미 기반 diff 기능은 정말 훌륭한 아이디어입니다. 다만 파일을 편집할 수 없는데 IDE라고 부르는 점은 혼란스러울 수 있습니다. 다이어그램에 코드처럼 LSP를 붙일지, 직접 TypeScript 호출로 둘지도 궁금합니다.
  • @sidharthkmenon — 좋은 지적입니다. VS Code를 코드 검토에 주로 쓰는 사람이 많아 IDE라는 말을 골랐지만, 편집 기능을 아직 제공하지 않아 캔버스 같은 다른 이름도 고민하고 있습니다. 앱을 다시 빌드하지 않고 다이어그램 종류를 추가하는 확장 시스템도 만들 계획입니다.
• @2001zhaozhao — 에이전트의 계획을 시각적으로 검토하고 수정하는 방식은 현재 Plan Mode보다 나아 보입니다. 다만 Mermaid 파일로도 비슷한 결과를 얻을 수 있고, 계획에 구체적인 코드 변경까지 넣으면 구현 품질에 영향을 줄 수 있지 않을까요?
  • @sidharthkmenon — Whiteboard는 보통 계획을 승인한 뒤 에이전트가 코드를 작성하고, 그 코드를 설명하는 데 씁니다. 계획과 구현을 함께 캔버스에 먼저 작성하는 방식은 실험 중입니다. 구현 과정에서 드러나는 선택이 상위 명세를 더 구체적으로 만든다고 봅니다.
• @asdev — 팀의 도구가 늘면 또 하나의 정보 원천이 생깁니다. 프로젝트가 진행되며 캔버스 내용이 낡을 수 있고, 에이전트가 갱신하면 설계 자료가 읽기 어려워질 수도 있습니다.
  • @milanb — 변경 사항을 이해해야 할 때는 Whiteboard를 유용하게 쓰고 있습니다. 기존 도구에서는 계획과 실제 구현 사이에 오간 내용이 남지 않는다는 점을 문제로 봅니다. 한 캔버스에 설계 시점의 계획과 이후 진행 과정을 함께 담고 싶습니다.
• @8organicbits — 데모 다이어그램의 ‘아니오’ 분기 뒤에 세션 서비스로 돌아가 ‘해제 대기’를 한다고 표시돼 있는데, diff의 코드에서는 그렇게 보이지 않습니다. 에이전트가 구조를 지어낸 건 아닌지 걱정됩니다.
  • @sidharthkmenon — 해당 GIF는 실제 앱 화면이 아니라 디자인용 예시였고, 갱신을 놓쳤습니다. 실제 다이어그램은 코드와 연결됩니다. 실제 화면으로 바꾸겠습니다.
• @factorialboy — macOS 앱 용량이 736MB라니 난감합니다.
  • @sidharthkmenon — VS Code 기반으로 만들어 코드 탐색을 익숙하게 제공하기로 했습니다. 앱 용량은 개발자로서 저도 불만이며, diff 뷰어만 138MB입니다. 앞으로 네이티브 앱으로 다시 작성해 용량을 줄이고, 당장은 다른 방법도 찾아보겠습니다.
• @nmekala35 — Cursor를 많이 쓰는데, 지금 만든 기능만으로는 새 IDE로 옮길 이유가 분명하지 않습니다.
  • @sidharthkmenon — IDE라는 이름은 정확하지 않습니다. Whiteboard는 Cursor나 에이전트 개발 환경과 함께 쓰는 캔버스로, 구현 내용과 선택을 이해하는 데 초점을 둡니다.
• @itissid — 에이전트가 만든 추적 기록과 문서 중 실제 변경에 중요한 부분은 일부뿐입니다. 내부 문서 도구가 커지면 새 변경을 승인하는 데 필요한 만큼만 이해하기가 어려워질 수 있습니다.
  • @sidharthkmenon — 복잡한 변경을 검토할 때 Whiteboard가 도움이 됐습니다. 이런 과정이 더 큰 시스템 안에서 기록돼야 한다는 의견에도 동의합니다.

원문: Hacker News / 번역·요약: Trawling