화이트보드에 시스템 아키텍처 블록 다이어그램을 20분 만에 그리는 법, 그리고 AI가 도움이 되는 경우

시스템 아키텍처 다이어그램에 담아야 할 것

시스템 아키텍처 다이어그램은 소프트웨어 시스템에 관한 질문 하나에, 특정 독자를 위해 답합니다. "결제가 체크아웃에서 은행까지 어떻게 가는가?"는 질문입니다. "우리 플랫폼의 모든 것"은 질문이 아니고, 거기에 답하려는 다이어그램은 아무도 읽을 수 없는 상자 마흔 개로 끝납니다.

거의 모든 블록 다이어그램에는 세 가지가 필요합니다.

• 상자. 각각 실행되거나 데이터를 저장하는 것입니다. 웹 앱, API, 워커, 데이터베이스, 큐 등.
• 화살표. 각각 방향과 동사가 있는 관계입니다. "주문을 보낸다", "에서 읽는다", "이벤트를 발행한다" 등.
• 시스템의 경계. 시스템을 쓰는 사람과 시스템이 의존하는 외부 시스템입니다. 결제 대행사나 이메일 서비스 등.

보통 빠져야 할 것은 인프라 세부 사항(로드 밸런서, 서브넷, 가용 영역)과 코드 세부 사항(클래스, 함수)입니다. 앞의 것은 배포에 관한 질문일 때, 뒤의 것은 컴포넌트 하나에 관한 질문일 때만 그립니다.

C4의 네 가지 레벨과 화이트보드에 맞는 레벨

Simon Brown이 만들고 c4model.com에 정리된 C4 모델은, 무엇을 얼마나 그릴지 정하는 데 저희가 아는 가장 유용한 방법입니다. 시스템을 네 단계의 확대 수준으로 설명하고, 시스템 전경, 동적 동작, 배포를 위한 보조 다이어그램도 정의합니다.

실제로 저희는 프로젝트 킥오프의 첫 5분 동안 레벨 1을 그리고, 나머지 시간을 레벨 2에 씁니다. 레벨 3은 논쟁할 만큼 복잡한 컨테이너가 있을 때 등장합니다. 레벨 4를 손으로 그리는 일은 거의 없습니다.

화이트보드에 블록 다이어그램을 20분 만에 그리는 법

이 방법은 실제 화이트보드, 온라인 캔버스, 종이 어디서나 통합니다. 시간 배분은 웹 프런트엔드, API, 백그라운드 작업, 몇 가지 외부 서비스가 있는 SaaS 제품 정도의 중간 규모 시스템을 가정합니다.

0~3분: 맨 위에 질문 쓰기

보드 맨 위에 이 다이어그램이 무엇에, 누구를 위해 답하는지 한 문장으로 씁니다. "예약이 어떻게 생성되고 확정되는가, 새로 온 백엔드 개발자를 위해"면 충분합니다. 이후에 넣는 상자는 모두 이 문장에 답하는 데 도움이 되어야 합니다.

3~8분: 사람과 외부 시스템 그리기

가장자리에 사람(고객, 직원, 관리자)과 외부 시스템(결제 대행사, 이메일 서비스, 캘린더 API)을 그립니다. 우리가 소유하지 않은 것은 다른 모양이나 색으로 표시합니다. 이것이 시스템 컨텍스트이고, 누군가 잊고 있던 의존성이 여기서 자주 드러납니다.

8~14분: 컨테이너 그리기

가운데에 실행 중인 애플리케이션이나 데이터 저장소마다 상자 하나를 그립니다. 각 상자에는 세 줄을 씁니다. 이름, 괄호 안의 기술, 하는 일 한 문장. "Booking API(Node.js) - 예약을 생성하고 확정한다"가 "API"라고만 적은 상자보다 낫습니다. 상자는 열두 개 정도로 제한하세요. 더 필요하다면 다이어그램 두 장을 그리고 있는 것입니다.

14~18분: 동사가 붙은 화살표 그리기

관계마다 화살표 하나로 상자를 잇고, 요청이나 데이터가 흐르는 방향을 가리키게 합니다. 모든 화살표에 동사를, 필요하면 프로토콜도 적습니다. "확인 메일을 보낸다(SMTP)", "가용 시간을 읽는다(HTTPS 위 JSON)". 라벨 없는 화살표가 오해가 사는 곳입니다.

18~20분: 범례, 제목, 날짜 넣기

모양, 색, 선 스타일을 설명하는 작은 범례, 어느 C4 레벨인지 밝히는 제목, 오늘 날짜를 적습니다. 날짜는 생각보다 중요합니다. 날짜 없는 다이어그램은 사실이 아니게 된 뒤에도 오래도록 믿어집니다.

블록 다이어그램을 읽기 쉽게 유지하는 표기 규칙

• 종류마다 모양은 하나. 애플리케이션은 사각형, 데이터베이스는 원통, 사람은 사람 아이콘. 의미를 섞지 마세요.
• 색은 장식이 아니라 소유를 뜻한다. 예를 들어 우리 시스템은 한 가지 색, 외부 시스템은 회색.
• 화살표는 한 방향. 두 상자가 양방향으로 주고받는다면 동사 두 개와 화살표 두 개를 그립니다.
• 고립된 상자는 없다. 모든 상자에 화살표가 적어도 하나 있어야 하고, 없다면 이 다이어그램에 속하지 않습니다.
• 가까이 두지 말고 경계로 묶는다. 우리 시스템 안에 있는 것들을 점선으로 둘러 경계를 분명히 합니다.
• 약어 말고 라벨을 쓴다. "PSP"는 방 안의 사람마다 다르게 읽힙니다.

구체적인 예시: 컨테이너 레벨의 예약 제품

간단한 예약 제품에 대해 저희가 그릴 레벨 2 다이어그램을 말로 설명합니다. 읽으면서 함께 스케치해 보세요.

맨 위: "예약이 어떻게 생성되고 확정되는가, 새로 온 백엔드 개발자를 위해. C4 컨테이너 레벨. 2026년 10월 28일."

왼쪽에 사람: 고객. 오른쪽에 회색 외부 시스템 셋: 결제 대행사, 이메일 서비스, Google 캘린더.

"예약 시스템"이라는 점선 경계 안에 상자 다섯 개:

1. 웹 앱(Next.js) - 가용 시간을 보여 주고 예약을 받는다.
2. Booking API(Node.js) - 예약을 검증하고 생성한다.
3. 워커(Node.js) - 확인 메일을 보내고 캘린더를 동기화한다.
4. 데이터베이스(PostgreSQL) - 예약, 고객, 가용 시간을 저장한다.
5. 큐(Redis) - 워커의 작업을 보관한다.

화살표: 고객 "으로 시간대를 예약한다" 웹 앱, 웹 앱 "을 통해 예약을 생성한다(HTTPS)" Booking API, Booking API "를 읽고 쓴다" 데이터베이스, Booking API "를 통해 결제한다" 결제 대행사, Booking API "에 확인 작업을 넣는다" 큐, 워커 "에서 작업을 가져온다" 큐, 워커 "를 통해 메일을 보낸다" 이메일 서비스, 워커 "에 일정을 만든다" Google 캘린더.

상자 아홉 개, 화살표 여덟 개이고, 새로 온 개발자도 1분 안에 읽을 수 있습니다.

화이트보드냐 AI 생성기냐: Miro AI, Eraser DiagramGPT, tldraw 비교

"화이트보드 블록 다이어그램 AI" 검색이 늘어난 것은 여러 도구가 이제 텍스트로 초안을 만들어 주기 때문입니다. 생성된 초안이 아껴 주는 것은 그리는 시간이지 생각하는 시간이 아닙니다. 질문, 레벨, 상자는 여전히 직접 정해야 합니다. 아래는 2026년 10월 기준 각 회사 페이지에서 확인한 내용입니다.

Miro AI

Miro의 AI 다이어그램 생성기는 프롬프트나 보드에 이미 있는 스티커 메모 묶음으로 완전히 편집 가능한 다이어그램을 만듭니다. 생성 한 번에 크레딧 하나를 쓰고, Miro 가격 페이지에 따르면 Free는 월 10크레딧, Starter는 멤버당 25, Business는 50입니다. C4나 아키텍처 전용 유형은 없어서 플로차트와 UML 옵션에 약간의 수정을 더해 완성합니다. 팀이 이미 쓰는 워크숍 보드의 일부로 다이어그램을 그린다면 좋은 선택입니다.

Eraser DiagramGPT

Eraser의 DiagramGPT는 셋 중 가장 엔지니어링 지향적입니다. 다섯 가지 다이어그램 유형 중 하나가 클라우드 아키텍처이고, 결과는 도형으로도, Eraser의 다이어그램 코드 문법으로도 편집할 수 있어 라벨을 텍스트로 고치는 편이 빠를 때 편리합니다. Eraser 가격 페이지를 보면 무료 요금제의 AI 크레딧은 3개로, 시험해 보기에는 충분하지만 의지하기에는 부족합니다.

tldraw

tldraw는 손그림 느낌의 빠르고 무료인 화이트보드로, 초기 스케치에 잘 맞습니다. AI 쪽은 개발자를 위한 것입니다. tldraw SDK에는 캔버스를 읽고 편집하는 AI를 만들기 위한 에이전트 스타터 키트가 있고, tldraw 라이선스 페이지는 SDK 가격을 문의로 안내합니다. tldraw.com 자체에 내장된 AI 다이어그램 생성기는 제공사 페이지에서 확인하지 못해 여기서는 평가하지 않습니다.

Visual Paradigm과 LLM이 작성한 Mermaid까지 포함한 더 넓은 비교는 AI 블록 다이어그램 도구 비교 글에서 볼 수 있습니다.

Atrix 화이트보드의 위치와 하지 못하는 것

Atrix는 저희가 만드는 도구이므로 한계부터 적겠습니다. Atrix 페이지에는 Excalidraw 화이트보드를 블록으로 넣을 수 있고, 빈 상태로 시작하거나 아키텍처와 플로차트를 포함한 템플릿 열세 가지 중에서 고를 수 있습니다. 그리는 것은 수작업입니다. Atrix 화이트보드에는 텍스트로 다이어그램을 생성하는 기능이 없습니다. 대신 다이어그램이 그것을 설명하는 문단 바로 아래, 프로젝트에 연결된 페이지 안에 놓이고, 실시간 공동 편집, 댓글, 버전 기록을 함께 씁니다.

Atrix의 AI는 그림이 아니라 글을 다룹니다. Develop 실행은 브리프를 받아 요구 사항, 아키텍처 문서, 계획된 이슈를 만듭니다. 아키텍처 문서는 텍스트이고, 저희는 그것을 바탕으로 같은 페이지의 화이트보드에 컨테이너 다이어그램을 그립니다. 화이트보드가 정확히 무엇을 하는지는 문서와 화이트보드 페이지에, Develop 실행이 무엇을 만드는지는 AI 에이전트 페이지에 적혀 있습니다. 프롬프트로 다이어그램을 그려 주는 도구가 필요하다면 Miro AI나 Eraser를 쓰고 결과를 문서에서 링크하세요.

다이어그램을 둘러싼 문서에 대해서는 AI로 아키텍처 문서 쓰는 법을 참고하세요.

자주 묻는 질문

소프트웨어 아키텍처에서 블록 다이어그램이란 무엇인가요?

블록 다이어그램은 시스템의 주요 부분을 상자로, 그 관계를 화살표로 보여 주며 구현 세부 사항은 담지 않습니다. C4 용어로 말하면 소프트웨어 블록 다이어그램 대부분은 시스템 컨텍스트 다이어그램이나 컨테이너 다이어그램입니다.

화이트보드에 아키텍처 다이어그램을 그리는 가장 좋은 방법은?

다이어그램이 답할 질문을 쓰고, 사람과 외부 시스템을 먼저 그린 다음, 가운데에 컨테이너, 이어서 라벨 붙은 화살표를 그리고, 마지막으로 범례와 날짜를 넣습니다. 상세 수준은 하나로, 상자는 열두 개 안팎으로 유지하세요.

AI가 시스템 아키텍처 다이어그램을 그릴 수 있나요?

초안으로는 가능합니다. Miro AI와 Eraser DiagramGPT는 프롬프트로 편집 가능한 다이어그램을 만들고, 어떤 LLM이든 Mermaid 코드를 써서 다른 곳에서 렌더링할 수 있습니다. 다만 초안은 설명한 내용만 반영하므로 상자와 화살표를 모두 확인해야 합니다.

C4 모델이란 무엇인가요?

Simon Brown의 C4 모델은 소프트웨어 아키텍처를 시스템 컨텍스트, 컨테이너, 컴포넌트, 코드의 네 레벨로 설명합니다. 각 레벨은 바로 위 레벨을 확대한 것입니다. 시스템 전경, 동적 동작, 배포를 위한 보조 다이어그램도 정의합니다.

Atrix는 텍스트로 다이어그램을 생성하나요?

아니요. Atrix 페이지에는 아키텍처 템플릿을 포함한 Excalidraw 화이트보드가 있고, 그리는 것은 수작업입니다. AI 에이전트는 아키텍처 문서를 텍스트로 쓰며, 그 내용을 같은 페이지의 화이트보드에서 다이어그램으로 그릴 수 있습니다.

다음 단계

페이지를 열고 아키텍처 템플릿으로 화이트보드를 넣은 뒤, 20분 방법으로 시스템의 컨테이너 다이어그램을 그려 보세요. 페이지와 화이트보드가 어떻게 어울리는지는 문서와 화이트보드 페이지에서 볼 수 있습니다.

출처

2026년 10월 확인: C4 모델, Miro AI 다이어그램 생성기, Miro 가격, Eraser DiagramGPT, Eraser 가격, tldraw, tldraw 라이선스.