Files
2nd/10_Wiki/Topics/Architecture/시스템 아키텍처 시각화 (System Architecture Visualization).md
T
Antigravity Agent f8b21af4be Wiki cleanup: error-doc removal, dedup merge, link normalization
10_Wiki/Topics 대규모 정리:
- 오류 캡처/미완성 stub 문서 227개 제거
- 교차폴더 중복 43클러스터 병합 (63파일 → redirect)
- 링크명 정규화: 깨진 링크 수정·redirect 직결·개념 매핑 ~2,400건
- 카테고리 MOC 6개 신규 생성
- Graph 섹션 미해결 related-keyword 링크 10,058건 제거

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-20 23:52:15 +09:00

4.7 KiB

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

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)

user -> web: browses
web -> api: REST/JSON {
  style.stroke: blue
}
api -> db: SQL
api -> kafka -> worker

shape: sequence_diagram

Sequence (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)

- 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

# 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

🤖 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 패턴 추가