---
id: wiki-2026-0508-시스템-아키텍처-시각화-system-architecture
title: 시스템 아키텍처 시각화 (System Architecture Visualization)
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Architecture Visualization, C4 Model, Architecture Diagrams]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [architecture, visualization, diagrams, c4]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: text
  framework: structurizr-mermaid-d2
---

# 시스템 아키텍처 시각화 (System Architecture Visualization)

## 매 한 줄
> **"매 diagram 은 매 system 의 매 mental model 을 매 stakeholder 간 매 align 하는 매 communication tool 이다"**. Simon Brown 의 매 C4 model (2018) 이 매 modern de-facto standard. 매 2026 trend 는 매 diagram-as-code (Structurizr DSL, D2, Mermaid) 으로 매 version control + AI generation.

## 매 핵심

### 매 C4 levels
1. **System Context**: 매 system + actors + 매 external systems.
2. **Container**: 매 deployable unit (web app, DB, queue).
3. **Component**: 매 container 내부 logical block.
4. **Code (optional)**: UML class — 매 거의 사용 X.

### 매 supplementary diagrams
- **Deployment**: physical / cloud topology.
- **Sequence**: temporal interactions.
- **State**: entity lifecycle.
- **ERD**: data model.
- **Network**: subnets / firewalls.

### 매 응용
1. 매 stakeholder 별 매 abstraction level 선택.
2. 매 ADR 의 시각적 근거.
3. 매 onboarding 의 매 first artifact.

## 💻 패턴

### C4 Container (Structurizr DSL)
```
workspace {
  model {
    customer = person "Customer"
    shop = softwareSystem "Shop" {
      web   = container "Web App"  "React 19" "TypeScript"
      api   = container "API"      "Spring Boot 4" "Java 25"
      db    = container "Database" "PostgreSQL 17"
      queue = container "Queue"    "Kafka 4.0"
    }
    payment = softwareSystem "Stripe" "External"

    customer -> web "Browses"
    web -> api "Calls" "REST/JSON"
    api -> db "Reads/writes" "JDBC"
    api -> queue "Publishes events"
    api -> payment "Charges" "HTTPS"
  }
  views {
    container shop { include * autolayout lr }
    theme default
  }
}
```

### Mermaid C4 (in markdown)
```mermaid
C4Container
    Person(user, "Customer")
    System_Boundary(shop, "Shop") {
      Container(web, "Web App", "React")
      Container(api, "API", "Spring Boot")
      ContainerDb(db, "DB", "PostgreSQL")
    }
    Rel(user, web, "Uses")
    Rel(web, api, "Calls", "REST")
    Rel(api, db, "Reads/writes", "JDBC")
```

### D2 (modern DSL)
```d2
user -> web: browses
web -> api: REST/JSON {
  style.stroke: blue
}
api -> db: SQL
api -> kafka -> worker

shape: sequence_diagram
```

### Sequence (Mermaid)
```mermaid
sequenceDiagram
  participant U as User
  participant W as Web
  participant A as API
  participant S as Stripe
  U->>W: Submit checkout
  W->>A: POST /orders
  A->>S: Charge
  S-->>A: Receipt
  A-->>W: 201 Created
```

### CI render → PNG (Structurizr CLI)
```yaml
- name: Render diagrams
  run: |
    docker run --rm -v $PWD:/usr/local/structurizr \
      structurizr/cli export -workspace workspace.dsl -format mermaid
    docker run --rm -v $PWD:/data minlag/mermaid-cli \
      -i workspace-Container.mmd -o docs/architecture.png
```

### AI-assisted diagram generation
```bash
# Claude Opus 4.7 reads codebase, infers C4 Container
claude diagram --level=container --format=structurizr ./src > workspace.dsl
```

## 매 결정 기준
| Context | Tool |
|---|---|
| 매 living architecture (versioned) | Structurizr DSL |
| 매 quick markdown embed | Mermaid |
| 매 modern, scriptable | D2 |
| 매 deployment topology | draw.io / Excalidraw |
| 매 cloud-specific | AWS / Azure architecture icons |

**기본값**: 매 Structurizr DSL (1 source) + 매 Mermaid export → README.

## 🔗 Graph
- 부모: [[소프트웨어 아키텍처 설계]]
- 변형: [[C4 Model]] · [[UML]] · [[ArchiMate]]
- 응용: [[아키텍처 다이어그램 Architecture Diagram]] · [[ADR]]
- Adjacent: [[Diagram-as-Code]] · [[Mermaid]] · [[D2]]

## 🤖 LLM 활용
**언제**: 매 codebase → diagram inference / 매 diagram → narrative explanation.
**언제 X**: 매 production deployment topology — 매 SRE 검증 필수.

## ❌ 안티패턴
- **Diagram zoo**: 매 100 가지 abstraction level 의 mix.
- **PowerPoint architecture**: 매 version 무관, 매 stale.
- **No legend**: 매 box meaning 매 unclear.
- **Over-abstracted**: 매 "Cloud" box 1개로 매 모든 detail 숨김.

## 🧪 검증 / 중복
- Verified (Brown, *The C4 Model for Software Architecture* (c4model.com); Bass *SAIP 4e*).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — C4 / Structurizr / D2 / Mermaid 패턴 추가 |