Files
2nd/10_Wiki/Topics/Architecture/시스템 아키텍처 시각화 (System Architecture Visualization).md
T
koriweb d8a80f6272 chore(wiki): dangling 링크 canonical 정규화 (768파일/1200건)
이름만 다른(표기 변형) [[위키링크]]를 대상 문서의 canonical 제목으로 치환해
끊겼던 1,200개 링크를 연결. 제목/파일명 정규화 일치만 적용하고 별칭 매칭은
과병합 위험으로 제외(애매성 가드). 원본은 _link_reconcile_backup/ 에 백업.
도구: Datacollect/scripts/link_reconcile_apply.mjs

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-08 12:24:15 +09:00

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