SVG로 그리는 이공계 도식들

2026 · 04 · 29 · 3 min read

글에 그림이 필요한데 figma를 켜고 싶진 않을 때, 인라인 SVG 만큼 가벼운 게 없다. 외부 자산 없음, git에 그대로 들어감, 검색되고, 5년 후에도 깨지지 않는다. 색은 mid-gray 한 톤(#888)만 쓰고 stroke만으로 형태를 잡으면, 라이트/다크 어디에 박아도 자연스럽다.

이 글은 그 스타일로 만든 도식 열 개의 견본첩이다. 통계, 자료구조, 네트워크, 분산 시스템, 신호, 전자공학, 광학, 최적화, 확률 — 이공계 글에서 자주 등장하는 "한 번 그려두면 천 단어를 절약하는" 그림들.

1. 정규분포 — 68/95/99.7 규칙

통계의 첫 페이지. ±σ에 데이터의 68%가, ±2σ에 95%가, ±3σ에 99.7%가 들어간다. 외워두면 "3σ를 넘으면 거의 일어나지 않는다"는 직관이 자동으로 생긴다.

Normal distribution: 68-95-99.7 rule

곡선 자체는 polyline 한 줄이다. 표준정규의 13개 샘플 점을 픽셀 좌표로 변환해서 이어붙였다. 음영은 ±σ 영역만 살짝.

2. 이진 탐색 트리

자료구조 강의의 단골. 정렬되지 않은 입력에서 in-order로 순회하면 정렬된 수열이 나온다. 그게 이진 탐색 트리의 정의 그 자체.

Binary search tree

노드는 fill 없는 원, 간선은 원 둘레까지만 짧게 끊는다(원 안을 가로지르지 않게). 에지를 자르려고 두 점 사이 단위벡터를 계산해서 반지름만큼 안쪽으로 밀어주는 게 트릭.

3. TCP 3-way handshake

네트워크의 인사. SYN → SYN-ACK → ACK 세 번 주고받으면 연결이 ESTABLISHED가 된다. 상태 동기화의 가장 작은 정직한 예시.

TCP three-way handshake

시퀀스 다이어그램은 두 개의 dashed 수직선(lifeline) + 가로 화살표 세 개로 끝난다. 시간은 위에서 아래로 흐른다.

4. CAP 정리

분산 시스템의 1교시 1과목. Consistency, Availability, Partition tolerance 셋을 동시에는 못 가진다. 네트워크가 갈라지는 순간(P), C와 A 중 하나를 골라야 한다.

CAP theorem

삼각형 한 개로 끝나는 다이어그램이지만, 실무에서 "우리는 CP인가 AP인가"라는 질문 한 줄로 시스템의 영혼이 드러난다.

5. 사인파 — 진폭과 주기

신호의 알파벳. y = A·sin(ωt). 진폭 A는 위아래 크기, 주기 T = 2π/ω는 한 사이클의 폭.

Sine wave

곡선은 0~2π 구간을 21개 점으로 샘플링한 polyline. 베지어 근사보다 polyline이 코드도 짧고 픽셀 정확도도 충분하다.

6. 유한 상태 기계 (FSM)

주문 한 건은 보통 draft → submitted → paid 같은 상태 사이를 오간다. 어느 상태에서 어떤 이벤트가 오면 어디로 가는지를 그래프로 그리면, 가능한 모든 경로가 한 장에 보인다.

Finite state machine: order lifecycle

상태는 타원, 전이는 라벨 달린 화살표. 종료(accepting) 상태는 이중 테두리로 표시했다.

7. RC 저주파 통과 필터

전자공학에서 가장 단순한 회로 중 하나. 저항(R)과 커패시터(C) 하나씩만 있으면 차단 주파수 f_c = 1/(2πRC) 위의 신호를 깎아낼 수 있다.

RC low-pass filter

지그재그(저항)와 평행선 두 줄(커패시터), 접지 기호는 전기/전자 회로도의 표준 글리프. 한번 익혀두면 어디서든 보인다.

8. 경사 하강법

머신러닝의 심장. 손실함수 등고선 위에서 가장 가파른 방향(−∇L)으로 한 발씩 내려가면, 결국 최소점에 도착한다.

Gradient descent on a quadratic surface

등고선은 동심 타원, 갱신 경로는 점점 짧아지는 화살표. 학습률 η가 크면 진동하고, 작으면 도착이 느리다는 직관이 그림 한 장에서 나온다.

9. 스넬의 법칙 — 굴절

광학의 기본. 빛이 매질 경계를 넘으면, 밀도가 높은 쪽에서 더 법선에 가까워진다. n₁ sin θ₁ = n₂ sin θ₂.

$Snell's law: refraction at boundary$

경계는 가로선, 법선은 점선. 입사각/굴절각은 작은 호 두 개로 표시. 음영으로 "아래쪽이 더 밀하다"는 신호를 살짝 준다.

10. 마르코프 연쇄

확률 모델의 기본형. 다음 상태가 오직 현재 상태에만 의존한다(memoryless). 노드는 상태, 화살표는 전이 확률, 한 노드에서 나가는 확률은 합이 1.

Markov chain: weather model

self-loop는 "같은 상태에 머무는 확률". 화살표 하나하나가 "이번 발걸음에서 어디로 갈지"의 지도다.

어떻게 만들까

이 도식들을 그릴 때 지킨 규칙 몇 가지.

원칙                    이유
────────────────────────────────────────────────────
색은 #888 한 톤만        라이트/다크 모두에서 자연스러움
fill="none"             테두리만 → 배경색에 무관
stroke-width: 1         가는 선이 글의 결과 어울림
시스템 폰트 + serif      도식 안 글자가 본문 폰트와 통일
viewBox만 지정          반응형 (max-width: 100% 자동)
파일당 한 도식           재사용 가능, git diff 깔끔

SVG는 결국 텍스트다. 한번 패턴이 손에 익으면, 새 다이어그램이 필요할 때 마다 figma를 여는 대신 30~50줄짜리 SVG 파일 하나가 더 빠르다. 그리고 그 파일은 다음 글에서도 그대로 쓸 수 있다.

가장 좋은 도구는 이미 가지고 있는 것이다.