koriweb
d8a80f6272
이름만 다른(표기 변형) [[위키링크]]를 대상 문서의 canonical 제목으로 치환해 끊겼던 1,200개 링크를 연결. 제목/파일명 정규화 일치만 적용하고 별칭 매칭은 과병합 위험으로 제외(애매성 가드). 원본은 _link_reconcile_backup/ 에 백업. 도구: Datacollect/scripts/link_reconcile_apply.mjs Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
166 lines
4.8 KiB
Markdown
166 lines
4.8 KiB
Markdown
---
|
|
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 (Architecture Documentation)]]
|
|
- 응용: [[아키텍처 다이어그램 (Architecture Diagram)]] · [[ADR]]
|
|
- Adjacent: [[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 패턴 추가 |
|