인프라를 명확히 파악하려면 좋은 도식이 항상 도움이 됩니다. 하지만 수작업으로 만들면 시간이 많이 듭니다: 적절한 아이콘 찾기, 요소 배치, 연결선 그리기… 제가 오늘 흥미를 느끼는 것은 바로 이 모든 것을 IA로 자동화하는 것입니다.
이 글에서는 Draw.io MCP와 함께 IA 에이전트를 사용해 AWS 아키텍처 다이어그램을 자동으로 생성하는 방법을 보여드립니다. 저는 Claude Code를 사용한 예제를 다루지만, 이 접근법은 MCP와 호환되는 모든 에이전트에서 동작합니다.
출발점: 오래된 다이어그램 업데이트하기
이 블로그의 인프라 관련 글가 2018년 작성된 상태로 Draw.io에서 수작업으로 만든 다이어그램이 있었습니다. 인프라는 크게 바뀌지 않았지만 — 주로 OAC(Origin Access Control)과 CloudFront Function을 추가했을 뿐 — AWS 아이콘이 진화했고 최신 버전으로 다이어그램을 업데이트하고 싶었습니다.
자동화 솔루션을 찾던 중 Draw.io MCP Server를 확장 프로그램과 함께 발견했습니다. 직접 테스트해보니 너무 멋져서 이를 공유하는 글을 쓰기로 했습니다!
MCP Draw.io: IA로 Draw.io 제어하기
Lgazo가 만든 Draw.io MCP Server는 Draw.io를 프로그램적으로 제어할 수 있게 해주는 MCP(Model Context Protocol) 서버입니다. 즉, IA 에이전트가 Draw.io 다이어그램에서 요소를 생성하고 수정하며 정리할 수 있다는 뜻입니다.
사용 가능한 도구들
| 카테고리 | 도구 | 용도 |
|---|---|---|
| 검사(Inspection) | get-selected-cell, list-paged-model | 캔버스 상태 읽기 |
| 생성(Creation) | add-rectangle, add-edge, add-cell-of-shape | 요소 추가 |
| 수정(Modification) | edit-cell, edit-edge, set-cell-data | 기존 요소 수정 |
| 라이브러리(Library) | get-shape-categories, get-shapes-in-category | 사용 가능한 셰이프 탐색 |
요구 구성
에이전트가 Draw.io와 통신하려면 프로젝트 문서에 따라 두 가지를 설정해야 합니다:
- 로컬 MCP 서버 — 에이전트의 설정 파일에 구성(예: Claude Code용
.mcp.json) - Draw.io MCP Chrome 확장 — MCP 서버와 브라우저의 Draw.io 앱 사이를 연결
이 두 가지가 준비되면 에이전트는 Draw.io 캔버스를 직접 조작할 수 있습니다: 셰이프 생성, 위치 지정, 연결선 작성 등 모든 것을 프로그래밍적으로 수행합니다.
MCP Draw.io를 테스트하면서 깨달은 것은, 깔끔한 결과를 얻으려면 에이전트에게 명확한 지침을 줘야 한다는 점이었습니다: 리소스를 임의로 추가하지 않기, 올바른 AWS 아이콘 사용, 일관된 배치, 카테고리별 색상 적용, 텍스트에 HTML 사용 금지 등. 그래서 이러한 규칙을 인코딩한 Claude Code 스킬을 만들었습니다.
스킬 /aws-diagram 생성
Claude Code 스킬은 워크플로와 규칙을 정의하는 Markdown 파일입니다. /aws-diagram를 호출하면 Claude Code가 이 지침을 불러와 자동으로 적용합니다.
워크플로
스킬은 4단계 프로세스를 따릅니다:
- 인프라 코드 읽기 (Terraform, CloudFormation)
- AWS 리소스와 그 관계 추출
- 공식 AWS 아이콘으로 다이어그램 구성
- 설명 레이블과 함께 연결선 추가
📄 스킬 발췌: 워크플로
## Workflow
1. **Read infrastructure code** (Terraform, CloudFormation, etc.)
2. **Extract AWS resources** and their relationships
3. **Build diagram** with official AWS icons
4. **Add connections** with descriptive labels 핵심 규칙들
스킬에 여러 중요한 규칙을 인코딩해야 했습니다:
1. 절대 리소스를 임의로 추가하지 않기
주된 함정이었습니다. LLM은 논리적으로 보이는 것을 “보완”하려는 경향이 있습니다. “CloudFront가 있으니 Lambda@Edge가 있어야 할 텐데…” — 아니요! 다이어그램은 코드에 정확히 존재하는 것만 표현해야 하며, 그 이상은 그려서는 안 됩니다.
📄 스킬 발췌: 절대 리소스를 임의로 추가하지 않기
### NEVER invent resources
**Only diagram what actually exists in the infrastructure code.**
| Situation | Wrong | Correct |
| -------------------------- | --------------------------------------------- | -------------------------------------------- |
| No Lambda in Terraform | Add Lambda@Edge because "it would make sense" | Don't add Lambda |
| CloudFront Function exists | Use Lambda icon | Use CloudFront icon with "CF Function" label |
| No WAF configured | Add WAF for "security" | Don't add WAF | 2. 사용자(Users)는 외부로 표시
“Users”는 AWS 리소스가 아닙니다. 이들은 반드시 AWS 클라우드 그룹 외부에 표시되어야 합니다.
📄 스킬 발췌: 사용자 외부 배치
### Users OUTSIDE the AWS Cloud
**Users are NOT AWS resources.** They represent external actors.
WRONG:
┌─────────────────────────────────┐
│ AWS Cloud │
│ [Users] → [Route53] → [CF] │ ❌ Users inside cloud
└─────────────────────────────────┘
CORRECT:
[Users] → ┌─────────────────────────┐
│ AWS Cloud │
│ [Route53] → [CF] → [S3] │ ✅ Users outside
└─────────────────────────┘ 3. 텍스트에 HTML 사용 금지
Draw.io는 HTML을 렌더링하지 않습니다. 만약 text: "S3<br>Private"를 쓰면, 다이어그램에는 문자 그대로 <br>가 보일 것입니다.
📄 스킬 발췌: HTML 사용 금지
### NEVER use HTML in text parameters
Draw.io does NOT render HTML tags in text fields. They display as raw text.
**FORBIDDEN (will show ugly raw HTML):**
text: "S3 Bucket<br>Private" ❌ Shows "<br>" literally
text: "Route 53 DNS" ❌ Shows " " literally
text: "<font color='red'>ACM</font>" ❌ Shows raw HTML tags
**CORRECT (clean text):**
text: "S3 Bucket" ✅ Single line, clean
text: "Route 53" ✅ Service name only
text: "ACM" ✅ Simple label 4. 충돌을 피하도록 레이아웃 계획하기
엣지가 교차하면 다이어그램이 읽기 어려워집니다. 스킬은 주요 흐름을 수평선에 배치하고 보조 서비스는 위나 아래에 두도록 권장합니다.
📄 스킬 발췌: 레이아웃과 충돌 방지
### Rule 1: Main Flow on a Horizontal Line
Place the primary data flow (request path) on a single horizontal row:
[Entry] → [Service A] → [Service B] → [Service C]
y=300 y=300 y=300 y=300
### Rule 2: Auxiliary Services Above or Below
Services that connect TO a main service (not part of the flow) go above or below:
[Auth] [Edge Logic] ← Auxiliary row (y=150)
\ /
\ /
↓ ↓
[Entry] → [Gateway] → [Compute] → [Storage] ← Main flow (y=300) 5. 주석은 아래가 아니라 오른쪽에
AWS 아이콘은 레이블이 자동으로 아래에 배치됩니다. 만약 아래에 주석을 추가하면 다음 줄과 겹칩니다. 주석은 아이콘의 오른쪽에 배치하세요.
📄 스킬 발췌: 주석 배치
### Annotation Placement Rules
**CRITICAL: Place annotations to the RIGHT of icons, not below.**
**WRONG - Annotations below icons:**
[CloudFront] [S3]
|
"Cache Policies" ← Overlaps with next row!
"Security Headers"
|
[CloudFront Preview] ← Collision!
**CORRECT - Annotations to the RIGHT:**
[CloudFront] ── "Cache Policies: HTML 0s | Assets 1y"
| "Security: CSP | HSTS"
↓
[CloudFront Preview] ← No collision 색상 체계
AWS 관습에 맞춘 일관된 팔레트를 정의했습니다:
| 카테고리 | 색상 | 서비스 |
|---|---|---|
| 네트워킹 | #8C4FFF (보라) | Route53, CloudFront, VPC |
| 스토리지 | #7AA116 (녹색) | S3, EFS |
| 보안 | #DD344C (빨강) | ACM, IAM, WAF |
| 컴퓨트 | #ED7100 (주황) | Lambda, EC2 |
데이터 플로우는 환경별 색상을 사용합니다:
- Production : 녹색
#4CAF50 - Preview : 주황
#FF9800 - Configuration : 회색
#AAAAAA(대시)
📄 스킬 발췌: 색상 및 스타일
### Colors by Category
| Category | Color | Services |
| -------------- | ------------------- | ------------------------------------------ |
| **Networking** | `#8C4FFF` (violet) | Route53, CloudFront, VPC, ELB, API Gateway |
| **Compute** | `#ED7100` (orange) | Lambda, EC2, ECS, Fargate |
| **Storage** | `#7AA116` (green) | S3, EFS, EBS |
| **Database** | `#C925D1` (magenta) | RDS, DynamoDB, ElastiCache |
| **Security** | `#DD344C` (red) | ACM, IAM, WAF, Cognito |
| **General** | `#232F3D` (gray) | Users, Generic |
### AWS Icon Style Template
sketch=0;outlineConnect=0;fontColor=#232F3E;fillColor=<COLOR>;strokeColor=#ffffff;
dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=center;html=1;
fontSize=12;fontStyle=0;aspect=fixed;shape=mxgraph.aws4.resourceIcon;
resIcon=mxgraph.aws4.<SERVICE>;
### Edge Colors by Environment
| Environment | Color | Usage |
| ------------- | --------- | ---------------------- |
| Production | `#4CAF50` | Main production flow |
| Preview | `#FF9800` | Staging environments |
| Configuration | `#AAAAAA` | Dashed, non-data links | 실제 적용: jls42.org 인프라
스킬을 테스트하기 위해 제 블로그 인프라에 적용해봤습니다.
분석된 Terraform 코드
terraform/
├── cloudfront-astro.tf # Distribution CloudFront prod
├── s3-astro.tf # Bucket S3 privé avec OAC
├── acm-astro.tf # Certificat SSL
├── route53.tf # DNS
└── variables.tf # Variables
추출된 아키텍처
| 구성 요소 | AWS 서비스 | 구성 |
|---|---|---|
| DNS | Route 53 | jls42.org 존, 도메인 3개 |
| CDN | CloudFront | OAC, CF Function, 캐시 정책 |
| 스토리지 | S3 | 비공개 버킷, AES256, OAC 전용 |
| TLS | ACM | us-east-1 인증서, DNS 검증 |
생성된 다이어그램
최종 결과는 다음과 같습니다:
간단한 자연어 프롬프트에서 시작했습니다:
«Analyse en profondeur l’infrastructure de ce projet puis réalise un super schéma de l’architecture AWS comme un pro. Juste l’infra de prod, pas preview ni legacy.»
🇰🇷 «이 프로젝트의 인프라를 심층 분석한 뒤 전문가처럼 AWS 아키텍처의 멋진 도식을 만들어줘. 프로덕션 인프라만, preview나 레거시는 제외.»
Claude Code는 먼저 Terraform 파일을 분석해 인프라를 식별한 후, 지침이 포함된 스킬 /aws-diagram를 로드하여 다음을 수행했습니다:
- 주요 구성 요소 생성(Users, Route53, CloudFront, S3, ACM)
- 상세 주석 추가(캐시 정책, 보안 헤더, 버킷 설정 등)
- 레이블이 있는 연결선 그리기(HTTPS, DNS Alias, OAC, TLS Cert 등)
- 외부 서비스 추가(Plausible Analytics, Gandi 이메일)
- 카테고리별 범례 생성
모든 작업은 깔끔한 레이아웃을 준수했습니다:
- AWS 클라우드를 자동 크기 조정(900×420px)
- Users는 클라우드 왼쪽
- 외부 서비스는 오른쪽
- 다이어그램 하단에 범례
전체 워크플로: Terraform에서 비디오까지
이 경험을 더 발전시켜 데모 비디오도 만들었습니다.
녹화
다이어그램 생성 과정을 실시간으로 녹화했습니다: Claude Code가 Terraform을 읽고 요소를 하나씩 생성하며 제 눈앞에서 다이어그램을 완성하는 4분 10초 분량입니다.
FFmpeg로 후반 작업
4분은 데모로는 길기 때문에 FFmpeg를 사용해 가변 속도 가속 버전을 만들었습니다:
| 구간 | 내용 | 속도 |
|---|---|---|
| 0:00-0:10 | Claude에게 다이어그램 생성 요청 | 1x |
| 0:10-0:32 | Terraform 코드 분석 | 15x |
| 0:32-0:35 | 스킬 /aws-diagram 감지 및 자동 실행 | 1x |
| 0:35-3:46 | 브라우저에서 다이어그램 생성 | 15x |
| 3:46-3:56 | 시각적 개선을 위한 레이블 재배치 | 1x |
결과: 핵심 장면은 정상 속도로 유지하면서 4분 분량을 42초로 압축했습니다.
HeyGen으로 내레이션 추가
음성 내레이션을 추가하기 위해 내레이션 스크립트를 작성하고 영상을 30초 단위(HeyGen 제한)로 분할해 프랑스어 음성을 생성했습니다. 기본 보이스가 마음에 들지 않아 그들의 보이스 디자인 기능을 사용해 프롬프트를 조정하면서 원하는 톤을 찾아가는 방식으로 음성을 만들었습니다.
최종 결과는 글 상단에서 보실 수 있는 비디오입니다.
두 번째 예제: 고가용성 EKS 아키텍처
MCP Draw.io의 성능을 보여주기 위해 두 번째로 더 복잡한 예를 제시합니다: 고가용성 EKS(Elastic Kubernetes Service) 아키텍처. MCP는 Draw.io에서 생성 작업을 전부 처리했고, 저는 상세 프롬프트만 제공했습니다.
이번에는 원하는 아키텍처를 상세히 설명한 프롬프트를 제공했습니다:
📋 EKS 아키텍처 전체 프롬프트
Architecture EKS Hautement Disponible
Génère un diagramme d'architecture AWS EKS avec les composants suivants :
## Services AWS à inclure
### Externes (gauche du cloud)
- Users (icône utilisateurs générique)
### Networking
- Route 53 (DNS)
- Application Load Balancer (ALB) - dans les subnets publics
- NAT Gateway (3x, un par AZ)
- VPC avec 3 AZ
### Compute (subnets privés)
- EKS Control Plane (géré par AWS - représenter séparément)
- 3 Node Groups (un par AZ) avec pods à l'intérieur
### Storage
- EFS (stockage partagé cross-AZ)
### Security
- ACM (Certificate Manager)
- IAM (pour Pod Identity / IRSA)
### Observability
- CloudWatch (logs et métriques)
## Connexions à tracer
| Source | Target | Label | Style |
| ----------------- | ----------- | ------------------- | ----------- |
| Users | Route 53 | HTTPS | Solid green |
| Route 53 | ALB | DNS Alias | Solid green |
| ALB | Node Groups | Traffic | Solid green |
| ACM | ALB | TLS | Dashed gray |
| Node Groups | EFS | NFS Mount | Solid green |
| EKS Control Plane | Node Groups | kubectl API | Solid green |
| EKS Control Plane | IAM | IRSA / Pod Identity | Dashed gray |
| Node Groups | CloudWatch | Logs / Metrics | Dashed gray | 생성 결과
이 다이어그램은 프로덕션 준비된 Kubernetes 아키텍처를 보여줍니다:
- **3개의 가용 영역(Availability Zones)**으로 고가용성 확보
- 가용 영역별 중복 NAT Gateway(AZ당 1개)로 인터넷 egress 처리
- AZ에 분산된 Node Groups와 각 AZ에 배치된 파드
- Cross-AZ EFS로 공유 영구 스토리지 제공
- 분리된 AWS 관리형 Control Plane을 시각적으로 구분
- **IRSA(IAM Roles for Service Accounts)**로 파드 보안 강화
MCP Draw.io는 VPC와 AZ 그룹을 올바르게 해석하고, NAT Gateway를 퍼블릭 서브넷에, Node Groups를 프라이빗 서브넷에 배치하는 등 구조를 적절히 생성했습니다. 결과물은 시각적 선호도에 맞게 다듬거나 잠재적 오류를 수정할 수 있는 훌륭한 출발점을 제공합니다 — 완전히 새로 만드는 것보다 훨씬 빠릅니다.
이 프로젝트가 드러내는 것
이번 경험은 제 작업 방식의 여러 측면을 보여줍니다:
- 문서 자동화: 코드는 진실의 단일 소스이며 다이어그램은 코드에서 자동으로 파생되어야 합니다
- 적절한 도구 사용: MCP Draw.io는 제가 필요로 하던 도구였고, 이를 재발명할 필요는 없었습니다
- 규칙 인코딩: 스킬은 전문 지식을 캡처하고 흔한 실수를 방지합니다 — AWS뿐 아니라 모든 유형의 Draw.io 다이어그램에 적용 가능
- 실전 테스트: 제 인프라를 실험 대상으로 사용했습니다
- 탐구 확장: 자동 생성에서 내레이션 비디오 제작까지, 각 단계가 학습의 기회였습니다
스킬은 이제 제 워크플로에 통합되어 있습니다. 다음에 인프라를 수정할 때는 단순 프롬프트 한 번으로 다이어그램을 재생성할 수 있을 것입니다.
자료
- Draw.io MCP Server — Draw.io MCP 서버
- MCP - Model Context Protocol — 모델 컨텍스트 프로토콜
- Claude Code — 제가 일상적으로 사용하는 CLI 도구
MCP와 호환되는 코딩 에이전트를 사용하고 있고 문서화할 인프라가 있다면, 이 접근법을 시도해보시길 권합니다. 자동으로 깔끔한 다이어그램이 만들어지는 것을 지켜보는 것은 정말 만족스럽습니다.
읽어주셔서 감사합니다. 이 글이 실험해보고 싶은 욕구를 자극했기를 바랍니다!
이 문서는 gpt-5-mini 모델을 사용하여 fr 버전에서 ko 언어로 번역되었습니다. 번역 과정에 대한 자세한 내용은 https://gitlab.com/jls42/ai-powered-markdown-translator 를 참조하세요.