Show HN: Whiteboard (YC W26) – 사려 깊은 소프트웨어 설계를 위한 오픈 소스 IDE
요약
Whiteboard는 인간과 AI 에이전트가 하나의 공통 작업 공간에서 소프트웨어를 함께 설계할 수 있도록 돕는 오픈 소스 데스크톱 애플리케이션입니다. 이 도구는 Claude Code, Codex 등 기존 코딩 에이전트에 연결되며, 인앱 캔버스에 그리도록 지시하는 SDK를 제공하여 협업적인 소프트웨어 설계를 지원합니다.
핵심 포인트
- 인간과 AI가 함께 작업하는 오픈 소스 설계 캔버스입니다.
- Claude Code, Codex 등 기존 코딩 에이전트와 연동됩니다.
- 인앱 캔버스를 통해 에이전트의 작업을 시각적으로 설명할 수 있습니다.
- API 변경이나 원격 측정 추가 같은 복잡한 설계를 지원합니다.
Whiteboard는 인간과 에이전트가 공통 작업 공간에서 소프트웨어를 함께 설계할 수 있는 오픈 소스 데스크톱 앱입니다.
Whiteboard는 사용자가 이미 사용하는 도구들(예: Claude Code, Codex 등)에 연결되며, 에이전트에게 인앱 캔버스에 그리도록 하는 SDK를 제공하여 그 작업을 설명하게 합니다.
<p align="center"> <img src=".github/assets/whiteboard-demo.gif" width="880" alt="터미널 프롬프트에서 에이전트가 Whiteboard 리뷰를 작성하는 모습 (순서 다이어그램 포함)" /> </p>더 자세한 내용은 1분짜리 데모 비디오를 참고하세요:
빠른 시작(Quickstart)
- Whiteboard 다운로드하고 앱을 실행합니다. macOS에서는
brew install --cask devdotfast/tap/whiteboard도 사용할 수 있습니다. - 환영 화면에서 Claude Code, Codex 또는 다른 코딩 에이전트를 연결합니다.
- 에이전트에게 현재 브랜치를 최신 main과 비교하여 검토하도록 요청하고 결과를 Whiteboard에서 엽니다.
가이드(Guidance)
저희 경험상 Whiteboard는 지능, 비용, 속도 트레이드오프 측면에서 GPT-6 Sol 및 Claude Opus 5.5와 같은 모델과 가장 잘 작동합니다.
Whiteboard를 효과적으로 사용하는 몇 가지 예시 프롬프트가 있습니다. 저희는 이 시스템이 오픈 소스인 이유 중 일부로 올바른 선택 사항들이 기본 시스템 프롬프트에 내장되도록 열심히 작업하고 있지만, 그동안은 다음과 같습니다:
새로운 API 변경의 경우
새로운 API 변경의 경우
hey, 이 커밋 스택은 제가 [목표]를 수행할 수 있는 [API]를 얻도록 설정되어 있습니다.
저는 다음을 보고 싶습니다:
- 제안된 API
- 예시
- 이것에 대한 동기(컨텍스트/리포지토리에서 제공 가능하다면)
그런 다음 구현으로 깊이 들어가고, 작동 방식에 대해 설명할 수 있습니다.
원격 측정(Telemetry)을 추가하는 변경 사항의 경우:
가장 최신 posthog PR https://github.com/devdotfast/whiteboard/commit/4837e107946e27ebad50c282eb0f2585210d2a35 에서의 원격 측정 변경 사항에 대해 설명해 주시겠어요? 무엇을 추적하고 있는지, 이를 통해 어떤 좋은 대시보드나 제품 워터폴(product waterfalls)을 구축할 수 있을까요? 멈춤(hangs), 오류(errors), 충돌(crashes) 등은 어떻게 처리해야 할까요... whiteboard를 사용해 주세요.
마음에 들지 않는 것이 있다면 클립보드에 강조 표시하고 에이전트에게 주면, 필요에 맞게 Whiteboard에서 다시 그려줄 수 있습니다!
이것이 존재하는 이유는 무엇인가요?
코드로 이어지는 다이어그램
순수 HTML 도구는 명세(spec)나 다이어그램을 코드와 연결하는 쉬운 기능을 제공하지 못했습니다. 이는 특히 트레이드오프가 종종 구현의 첫 시도 후에만 발견되는 경우에 까다롭습니다. Whiteboard에서는 순서도(sequence diagram), 개체 관계 다이어그램(entity relationship diagram)과 같은 시각화나 에이전트 추적(agent’s trace)의 인용구 등을 클릭하면 기본 코드로 직접 이동할 수 있습니다. 코드를 탐색할 때는 VSCode에서 바로 키 바인딩 및 LSP(Language Server Protocol) 지원을 받을 수 있습니다.
의미론적 diff 뷰어 (Semantic diff viewer)
순수 diff 뷰는 매우 산만할 수 있기 때문에, 우리는 Rust로 의미론적이고 AST(Abstract Syntax Tree)를 인식하는 diff 뷰어를 작성하여 사용자에게 관련 있는 코드 변경 사항만 볼 수 있도록 했습니다. 몇 가지 합리적인 기본값을 설정했습니다: 추가된 큰 함수는 의사 코드(pseudocode)로 요약되며, 단위 테스트나 문서화 변경과 같은 내용은 접거나 숨겨집니다. 이 모든 것은 WASM 기반 플러그인 시스템으로 사용자 정의가 가능합니다.
결정 로그 (Decision log)
우리는 에이전트가 자율적으로 내린 결정의 집합과 그것이 변경 사항에 어떻게 영향을 미치는지 추론하기 어렵다는 것을 발견했습니다. 그래서 Whiteboard에서 에이전트가 자신의 트레이스(traces)를 쿼리하고 연결할 수 있는 도구를 만들었습니다. 이를 통해 사용자가 설정한 요구사항을 시각화하고, 그것들이 어떻게 구현되었는지 이해하며, 에이전트가 자율적으로 어떤 결정을 내렸는지 파악할 수 있습니다.
오픈 소스, 로컬 환경에서 사용
Whiteboard는 MIT 라이선스로 제공되며 사용자의 로컬 체크아웃(local checkouts)을 기반으로 실행됩니다. 팀을 위한 호스팅 제품이 계획되어 있으며, 모든 것은 항상 자체 호스팅(self-hostable) 상태로 유지될 것입니다.
알려진 제한 사항
-
현재 Whiteboard에서 파일을 편집할 수는 없습니다. 만약 이 기능이 필요하시다면, 이슈를 제기해 주십시오!
-
단일 검토 과정에서 여러 리포지토리(repos)에 걸쳐 파일 작업을 하거나 탐색하는 것은 잘 지원되지 않습니다.
-
공유 버튼을 사용하여 장치 간에 검토 내용을 공유할 수는 있지만, 검토가 공유된 후에 이루어진 업데이트는 다른 사용자에게 나타나지 않습니다. 검토를 다시 공유해야 합니다.
기여하기 (Contributing)
기여와 피드백은 환영합니다.
설정 및 풀 리퀘스트(pull request) 워크플로우에 대해서는 CONTRIBUTING.md를 읽어보시고, Code of Conduct를 따라주십시오. 취약점은 SECURITY.md에 설명된 대로 보고해 주십시오. 질문이 있으신가요? Discord에서 문의해 주세요.
개인 정보 보호 (Privacy)
Whiteboard는 로컬 체크아웃을 기반으로 실행됩니다. 익명 텔레메트리(telemetry)에는 사용자의 코드, diff, Whiteboard 텍스트, 프롬프트 또는 모델 출력 내용이 포함되지 않습니다. 개인 정보 보호 개요를 읽거나, 전체 텔레메트리 참조를 검토하거나, 언제든지 텔레메트리를 끌 수 있습니다.
라이선스 (License)
Whiteboard는 MIT License에 따라 사용할 수 있습니다. 포함된 Code - OSS 포크(fork)는 Microsoft의 MIT 라이선스와 제3자 고지 사항을 유지합니다. apps/review-desktop/LICENSE 및 apps/review-desktop/UPSTREAM를 참조하십시오.
Code OSS 패키징에 대하여
Code OSS 패키징에 대하여
모두가 전용 에이전트 TUI와 데스크톱 앱을 사용하게 되면서, 저희는 이제 텍스트 편집기를 코드의 줄 단위 diff를 검토하는 용도로만 사용하고 있습니다. 그래서 코드를 검토하기 위한 텍스트 편집기가 있으면 어떨까 생각했습니다. 이 경우, 현재 가장 성공적인 오픈 소스 에디터를 기반으로 삼는 것이 좋겠다고 판단했습니다.
저희는 패치를 유지하는 다른 포크(fork)들과 달리 Code OSS를 사용하는 이유는 코딩 에이전트들이 패치 처리에 어려움을 겪고, 기본 VS Code에서 가져온 내용 중 저희가 필요하지 않은 부분이 많기 때문입니다 (예: 현재 코드베이스의 약 45%는 Copilot으로 구성되어 있습니다 😬).
저희는 주기적으로 upstream Code OSS를 모니터링하고 보안/기능 패치가 들어오는 대로 병합(merge)합니다.
영감 받은 자료
- https://www.geoffreylitt.com/2026/07/02/understanding-is-the-new-bottleneck
— 현대 소프트웨어 엔지니어링의 제약 조건에 대한 훌륭한 개요입니다. - https://maggieappleton.com/2025-08-vibe-legacy-code/와
https://blog.val.town/vibe-code — AI가 생성한 코드가 소프트웨어 엔지니어링의 2025년 이전 개념에 어떻게 들어맞는지 설명하는 데 탁월합니다. - Karpathy의 에이전트에 대한 글:
- LLM 에이전트에 관하여: https://x.com/karpathy/status/1979644538185752935
- '주니어 엔지니어 천재'로서의 에이전트에 관하여:
https://x.com/karpathy/status/1915581920022585597
AI 자동 생성 콘텐츠
본 콘텐츠는 HN Claude Code Search의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기