피드로 돌아가기
Trace AI: I Pointed a Camera at a Whiteboard. Notion Built the Entire System Design Doc.
Dev.toDev.to
Backend

Notion이 Claude Vision과 MCP를 활용해 화이트보드 사진 1장을 2분 내에 완성된 시스템 설계 문서로 변환

Trace AI: I Pointed a Camera at a Whiteboard. Notion Built the Entire System Design Doc.

Tombri Bowei2026년 3월 29일3advanced

Context

엔지니어링 팀은 화이트보드 사진을 촬영한 후 이를 설계 문서로 전환하려는 의도를 가지고 있다. 회의가 끝나고 추진력이 떨어지면서 대부분의 아키텍처 스케치는 누군가의 카메라 롤에서 썩어간다. 이는 중요한 설계 정보가 체계적인 문서화되지 않은 채 방치되는 문제를 낳는다.

Technical Solution

  • Claude Vision을 통한 화이트보드 분석: 업로드된 사진을 Claude Vision으로 분석하여 아키텍처 스케치를 구조화된 JSON 형식의 설계 정보로 변환
  • Notion MCP 서버를 subprocess로 실행: @notionhq/notion-mcp-server를 Python MCP SDK로 스폰하여 Claude가 실시간으로 Notion 블록을 생성하고 수정할 수 있는 환경 구성
  • Claude 에이전트 루프 구현: Claude가 고정된 명령어를 따르지 않고 자체 판단으로 블록 구조, Mermaid 다이어그램 분할(2000자 제한 준수), 콘텐츠 포맷 결정을 반복 수행(최대 25회 반복)
  • 양방향 동기화 파이프라인: Notion에서 Mermaid 다이어그램이 수동으로 수정되면 Trace가 변경사항을 감지하고 아키텍처를 재분석하여 관련 섹션 자동 업데이트
  • 다중 진입점 지원: Notion Inbox, Slack, Discord 3가지 채널에서 화이트보드 사진 입력을 수용하여 팀이 이미 사용 중인 도구에서 직접 실행 가능
  • 자동 산출물 생성: Mermaid.js 순서도/순서 다이어그램, 컴포넌트 분석, 보안 취약점 플래깅, 병목 지점 감지, Notion 액션 아이템 추출, AWS 비용 추정, 복잡도 점수를 일괄 생성

Impact

전체 처리 시간: 사진 입력부터 완성된 문서까지 2분 이내

Key Takeaway

Model Context Protocol(MCP)을 활용하면 AI 에이전트가 API 래퍼 수준을 넘어 자체 판단으로 도구를 조작하고 엣지 케이스를 처리하는 지능형 자동화가 가능하다. 아키텍처 문서화처럼 구조화되면서도 맥락 판단이 필요한 작업에 이 패턴을 적용하면 팀의 설계 정보 손실을 근본적으로 방지할 수 있다.


엔지니어링 팀에서 Claude Vision과 공식 MCP 서버를 활용하면, 스케치나 다이어그램을 단순 이미지 설명이 아닌 구조화된 설계 문서로 자동 변환할 수 있다. 이때 Claude의 에이전트 루프를 통해 도구 API의 제약(예: 문자 제한)을 자체 판단으로 우회하고, 양방향 동기화를 구성하면 팀이 수정한 내용이 분석 결과에 즉시 반영되는 살아있는 문서 시스템을 구축할 수 있다.

원문 읽기
Trace AI: I Pointed a Camera at a Whiteboard. Notion Built the Entire System Design Doc. | Devpick