feat: [academy] Nginx 백과사전 SVG 이미지 1~4번 생성

- 1.svg: Nginx 히어로 이미지 (로고, 네트워크 배경)
- 2.svg: 웹 서버 = 접수 창구 비유 다이어그램
- 3.svg: Apache vs Nginx 비교 인포그래픽
- 4.svg: Nginx 설정 계층 구조 (마트료시카)

public/images/academy/nginx-encyclopedia/1.svg

@@ -0,0 +1,88 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500">
+  <defs>
+    <linearGradient id="bg1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#0e3c4a"/>
+      <stop offset="100%" stop-color="#0f172a"/>
+    </linearGradient>
+    <linearGradient id="nGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#22d3ee"/>
+      <stop offset="100%" stop-color="#06b6d4"/>
+    </linearGradient>
+    <filter id="glow1">
+      <feGaussianBlur stdDeviation="6" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <filter id="softGlow">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+  </defs>
+
+  <!-- 배경 -->
+  <rect width="800" height="500" fill="url(#bg1)"/>
+
+  <!-- 네트워크 연결 선들 (배경 장식) -->
+  <!-- 노드들 -->
+  <circle cx="80" cy="80" r="4" fill="#22d3ee" opacity="0.3"/>
+  <circle cx="200" cy="50" r="3" fill="#22d3ee" opacity="0.2"/>
+  <circle cx="150" cy="150" r="3" fill="#67e8f9" opacity="0.25"/>
+  <circle cx="650" cy="70" r="4" fill="#22d3ee" opacity="0.3"/>
+  <circle cx="720" cy="130" r="3" fill="#67e8f9" opacity="0.2"/>
+  <circle cx="600" cy="40" r="3" fill="#22d3ee" opacity="0.25"/>
+  <circle cx="100" cy="400" r="4" fill="#22d3ee" opacity="0.2"/>
+  <circle cx="180" cy="450" r="3" fill="#67e8f9" opacity="0.15"/>
+  <circle cx="700" cy="420" r="4" fill="#22d3ee" opacity="0.2"/>
+  <circle cx="620" cy="460" r="3" fill="#67e8f9" opacity="0.15"/>
+  <circle cx="50" cy="250" r="3" fill="#22d3ee" opacity="0.2"/>
+  <circle cx="750" cy="280" r="3" fill="#22d3ee" opacity="0.2"/>
+  <circle cx="300" cy="30" r="2" fill="#67e8f9" opacity="0.2"/>
+  <circle cx="500" cy="470" r="2" fill="#67e8f9" opacity="0.15"/>
+
+  <!-- 연결 선들 -->
+  <line x1="80" y1="80" x2="200" y2="50" stroke="#22d3ee" stroke-width="1" opacity="0.15" stroke-dasharray="4,4"/>
+  <line x1="200" y1="50" x2="150" y2="150" stroke="#22d3ee" stroke-width="1" opacity="0.12" stroke-dasharray="4,4"/>
+  <line x1="80" y1="80" x2="150" y2="150" stroke="#67e8f9" stroke-width="1" opacity="0.1" stroke-dasharray="4,4"/>
+  <line x1="650" y1="70" x2="720" y2="130" stroke="#22d3ee" stroke-width="1" opacity="0.15" stroke-dasharray="4,4"/>
+  <line x1="600" y1="40" x2="650" y2="70" stroke="#67e8f9" stroke-width="1" opacity="0.12" stroke-dasharray="4,4"/>
+  <line x1="200" y1="50" x2="300" y2="30" stroke="#22d3ee" stroke-width="1" opacity="0.1" stroke-dasharray="4,4"/>
+  <line x1="100" y1="400" x2="180" y2="450" stroke="#22d3ee" stroke-width="1" opacity="0.12" stroke-dasharray="4,4"/>
+  <line x1="700" y1="420" x2="620" y2="460" stroke="#22d3ee" stroke-width="1" opacity="0.12" stroke-dasharray="4,4"/>
+  <line x1="50" y1="250" x2="80" y2="80" stroke="#22d3ee" stroke-width="1" opacity="0.08" stroke-dasharray="6,6"/>
+  <line x1="750" y1="280" x2="720" y2="130" stroke="#22d3ee" stroke-width="1" opacity="0.08" stroke-dasharray="6,6"/>
+  <line x1="150" y1="150" x2="50" y2="250" stroke="#67e8f9" stroke-width="1" opacity="0.08" stroke-dasharray="6,6"/>
+  <line x1="100" y1="400" x2="50" y2="250" stroke="#22d3ee" stroke-width="1" opacity="0.08" stroke-dasharray="6,6"/>
+
+  <!-- 중앙 큰 Nginx "N" 로고 -->
+  <g transform="translate(400, 200)" filter="url(#glow1)">
+    <!-- 육각형 배경 -->
+    <polygon points="0,-100 87,-50 87,50 0,100 -87,50 -87,-50" fill="none" stroke="#22d3ee" stroke-width="2.5" opacity="0.4"/>
+    <polygon points="0,-80 69,-40 69,40 0,80 -69,40 -69,-40" fill="#0e3c4a" fill-opacity="0.6" stroke="#22d3ee" stroke-width="1.5" opacity="0.6"/>
+
+    <!-- N 글자 -->
+    <text x="0" y="18" text-anchor="middle" font-family="sans-serif" font-weight="900" font-size="100" fill="url(#nGrad)" filter="url(#softGlow)">N</text>
+  </g>
+
+  <!-- 로고 주변 궤도 점들 -->
+  <circle cx="400" cy="200" r="130" fill="none" stroke="#22d3ee" stroke-width="0.5" opacity="0.15" stroke-dasharray="3,8"/>
+  <circle cx="325" cy="100" r="5" fill="#22d3ee" opacity="0.5" filter="url(#softGlow)"/>
+  <circle cx="490" cy="310" r="4" fill="#67e8f9" opacity="0.4" filter="url(#softGlow)"/>
+  <circle cx="280" cy="230" r="3" fill="#22d3ee" opacity="0.35"/>
+
+  <!-- 메인 타이틀 -->
+  <text x="400" y="360" text-anchor="middle" font-family="sans-serif" font-weight="800" font-size="48" fill="#ffffff" letter-spacing="4">Nginx 백과사전</text>
+
+  <!-- 구분선 -->
+  <line x1="280" y1="380" x2="520" y2="380" stroke="#22d3ee" stroke-width="2" opacity="0.6"/>
+
+  <!-- 서브 텍스트 -->
+  <text x="400" y="415" text-anchor="middle" font-family="sans-serif" font-weight="400" font-size="22" fill="#67e8f9" opacity="0.9" letter-spacing="6">기초부터 실전까지</text>
+
+  <!-- 하단 장식 점선 -->
+  <line x1="200" y1="460" x2="600" y2="460" stroke="#22d3ee" stroke-width="1" opacity="0.15" stroke-dasharray="2,6"/>
+</svg>

public/images/academy/nginx-encyclopedia/2.svg

@@ -0,0 +1,161 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500">
+  <defs>
+    <linearGradient id="bg2" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#0e3c4a"/>
+      <stop offset="100%" stop-color="#0f172a"/>
+    </linearGradient>
+    <filter id="glow2">
+      <feGaussianBlur stdDeviation="4" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <filter id="shadow2">
+      <feDropShadow dx="0" dy="2" stdDeviation="3" flood-color="#000" flood-opacity="0.3"/>
+    </filter>
+  </defs>
+
+  <!-- 배경 -->
+  <rect width="800" height="500" fill="url(#bg2)"/>
+
+  <!-- 타이틀 -->
+  <text x="400" y="42" text-anchor="middle" font-family="sans-serif" font-weight="700" font-size="26" fill="#ffffff">웹 서버 = 접수 창구</text>
+  <line x1="280" y1="52" x2="520" y2="52" stroke="#22d3ee" stroke-width="1.5" opacity="0.5"/>
+
+  <!-- ===== 좌측: 클라이언트 (사람 3명) ===== -->
+  <text x="90" y="90" text-anchor="middle" font-family="sans-serif" font-weight="600" font-size="14" fill="#67e8f9">클라이언트</text>
+
+  <!-- 사람 1 -->
+  <g transform="translate(90, 140)">
+    <circle cx="0" cy="0" r="16" fill="none" stroke="#22d3ee" stroke-width="2"/>
+    <circle cx="0" cy="-2" r="7" fill="#22d3ee" opacity="0.6"/>
+    <line x1="0" y1="16" x2="0" y2="42" stroke="#22d3ee" stroke-width="2"/>
+    <line x1="-14" y1="28" x2="14" y2="28" stroke="#22d3ee" stroke-width="2"/>
+    <line x1="0" y1="42" x2="-10" y2="58" stroke="#22d3ee" stroke-width="2"/>
+    <line x1="0" y1="42" x2="10" y2="58" stroke="#22d3ee" stroke-width="2"/>
+    <text x="0" y="76" text-anchor="middle" font-family="sans-serif" font-size="11" fill="#94a3b8">요청 1</text>
+  </g>
+
+  <!-- 사람 2 -->
+  <g transform="translate(90, 260)">
+    <circle cx="0" cy="0" r="16" fill="none" stroke="#67e8f9" stroke-width="2"/>
+    <circle cx="0" cy="-2" r="7" fill="#67e8f9" opacity="0.6"/>
+    <line x1="0" y1="16" x2="0" y2="42" stroke="#67e8f9" stroke-width="2"/>
+    <line x1="-14" y1="28" x2="14" y2="28" stroke="#67e8f9" stroke-width="2"/>
+    <line x1="0" y1="42" x2="-10" y2="58" stroke="#67e8f9" stroke-width="2"/>
+    <line x1="0" y1="42" x2="10" y2="58" stroke="#67e8f9" stroke-width="2"/>
+    <text x="0" y="76" text-anchor="middle" font-family="sans-serif" font-size="11" fill="#94a3b8">요청 2</text>
+  </g>
+
+  <!-- 사람 3 -->
+  <g transform="translate(90, 370)">
+    <circle cx="0" cy="0" r="16" fill="none" stroke="#22d3ee" stroke-width="2"/>
+    <circle cx="0" cy="-2" r="7" fill="#22d3ee" opacity="0.6"/>
+    <line x1="0" y1="16" x2="0" y2="42" stroke="#22d3ee" stroke-width="2"/>
+    <line x1="-14" y1="28" x2="14" y2="28" stroke="#22d3ee" stroke-width="2"/>
+    <line x1="0" y1="42" x2="-10" y2="58" stroke="#22d3ee" stroke-width="2"/>
+    <line x1="0" y1="42" x2="10" y2="58" stroke="#22d3ee" stroke-width="2"/>
+    <text x="0" y="76" text-anchor="middle" font-family="sans-serif" font-size="11" fill="#94a3b8">요청 3</text>
+  </g>
+
+  <!-- 클라이언트 → 접수창구 화살표 -->
+  <g opacity="0.8">
+    <!-- 화살표 1 -->
+    <line x1="130" y1="160" x2="245" y2="220" stroke="#22d3ee" stroke-width="1.5" stroke-dasharray="6,3"/>
+    <polygon points="245,220 235,214 237,224" fill="#22d3ee"/>
+    <!-- 화살표 2 -->
+    <line x1="130" y1="280" x2="245" y2="260" stroke="#67e8f9" stroke-width="1.5" stroke-dasharray="6,3"/>
+    <polygon points="245,260 235,254 235,266" fill="#67e8f9"/>
+    <!-- 화살표 3 -->
+    <line x1="130" y1="390" x2="245" y2="300" stroke="#22d3ee" stroke-width="1.5" stroke-dasharray="6,3"/>
+    <polygon points="245,300 235,296 237,306" fill="#22d3ee"/>
+  </g>
+
+  <!-- ===== 중앙: 접수 창구 (웹 서버) ===== -->
+  <g filter="url(#shadow2)">
+    <rect x="250" y="130" width="200" height="240" rx="12" fill="#164e63" stroke="#22d3ee" stroke-width="2.5"/>
+    <!-- 상단 바 -->
+    <rect x="250" y="130" width="200" height="40" rx="12" fill="#22d3ee" opacity="0.15"/>
+    <rect x="250" y="158" width="200" height="12" fill="#164e63"/>
+    <!-- 서버 아이콘 -->
+    <rect x="335" y="140" width="30" height="22" rx="3" fill="none" stroke="#22d3ee" stroke-width="1.5"/>
+    <circle cx="350" cy="148" r="2" fill="#22d3ee"/>
+    <line x1="340" y1="155" x2="360" y2="155" stroke="#22d3ee" stroke-width="1"/>
+  </g>
+
+  <text x="350" y="200" text-anchor="middle" font-family="sans-serif" font-weight="700" font-size="20" fill="#ffffff">웹 서버</text>
+  <text x="350" y="222" text-anchor="middle" font-family="sans-serif" font-weight="400" font-size="13" fill="#67e8f9">(Nginx)</text>
+
+  <!-- 접수 창구 내부 기능 표시 -->
+  <text x="350" y="260" text-anchor="middle" font-family="sans-serif" font-size="12" fill="#94a3b8">요청을 받아</text>
+  <text x="350" y="278" text-anchor="middle" font-family="sans-serif" font-size="12" fill="#94a3b8">적절한 곳으로</text>
+  <text x="350" y="296" text-anchor="middle" font-family="sans-serif" font-size="12" fill="#94a3b8">안내합니다</text>
+
+  <!-- 접수 창구 내부 화살표 아이콘 -->
+  <g transform="translate(350, 340)" opacity="0.6">
+    <line x1="-20" y1="0" x2="20" y2="0" stroke="#fbbf24" stroke-width="2"/>
+    <polygon points="20,0 14,-5 14,5" fill="#fbbf24"/>
+  </g>
+
+  <!-- ===== 접수창구 → 방들 화살표 ===== -->
+  <g opacity="0.8">
+    <!-- 화살표 → 정적파일 -->
+    <line x1="450" y1="190" x2="545" y2="140" stroke="#4ade80" stroke-width="1.5" stroke-dasharray="6,3"/>
+    <polygon points="545,140 535,136 537,146" fill="#4ade80"/>
+    <!-- 화살표 → PHP-FPM -->
+    <line x1="450" y1="250" x2="545" y2="260" stroke="#a78bfa" stroke-width="1.5" stroke-dasharray="6,3"/>
+    <polygon points="545,260 535,254 535,266" fill="#a78bfa"/>
+    <!-- 화살표 → 보안 -->
+    <line x1="450" y1="320" x2="545" y2="385" stroke="#f87171" stroke-width="1.5" stroke-dasharray="6,3"/>
+    <polygon points="545,385 535,380 537,390" fill="#f87171"/>
+  </g>
+
+  <!-- ===== 우측: 3개 방 ===== -->
+
+  <!-- 방 1: 정적 파일 창고 -->
+  <g filter="url(#shadow2)">
+    <rect x="550" y="90" width="200" height="100" rx="10" fill="#0f2a1e" stroke="#4ade80" stroke-width="2"/>
+  </g>
+  <!-- 폴더 아이콘 -->
+  <g transform="translate(580, 120)">
+    <rect x="0" y="4" width="24" height="18" rx="2" fill="none" stroke="#4ade80" stroke-width="1.5"/>
+    <path d="M0,8 L0,6 Q0,4 2,4 L8,4 L10,2 L14,2 Q16,2 16,4 L16,8" fill="none" stroke="#4ade80" stroke-width="1.5"/>
+  </g>
+  <text x="650" y="125" text-anchor="middle" font-family="sans-serif" font-weight="600" font-size="15" fill="#4ade80">정적 파일 창고</text>
+  <text x="650" y="148" text-anchor="middle" font-family="sans-serif" font-size="11" fill="#94a3b8">HTML, CSS, JS, 이미지</text>
+  <text x="650" y="165" text-anchor="middle" font-family="sans-serif" font-size="11" fill="#94a3b8">직접 꺼내서 전달</text>
+
+  <!-- 방 2: PHP-FPM 처리실 -->
+  <g filter="url(#shadow2)">
+    <rect x="550" y="210" width="200" height="100" rx="10" fill="#1a1333" stroke="#a78bfa" stroke-width="2"/>
+  </g>
+  <!-- 기어 아이콘 -->
+  <g transform="translate(580, 240)">
+    <circle cx="12" cy="12" r="6" fill="none" stroke="#a78bfa" stroke-width="1.5"/>
+    <circle cx="12" cy="12" r="2.5" fill="#a78bfa" opacity="0.6"/>
+    <line x1="12" y1="2" x2="12" y2="6" stroke="#a78bfa" stroke-width="1.5"/>
+    <line x1="12" y1="18" x2="12" y2="22" stroke="#a78bfa" stroke-width="1.5"/>
+    <line x1="2" y1="12" x2="6" y2="12" stroke="#a78bfa" stroke-width="1.5"/>
+    <line x1="18" y1="12" x2="22" y2="12" stroke="#a78bfa" stroke-width="1.5"/>
+  </g>
+  <text x="650" y="248" text-anchor="middle" font-family="sans-serif" font-weight="600" font-size="15" fill="#a78bfa">PHP-FPM 처리실</text>
+  <text x="650" y="271" text-anchor="middle" font-family="sans-serif" font-size="11" fill="#94a3b8">동적 요청 처리</text>
+  <text x="650" y="288" text-anchor="middle" font-family="sans-serif" font-size="11" fill="#94a3b8">Laravel 앱 실행</text>
+
+  <!-- 방 3: 보안 검사실 -->
+  <g filter="url(#shadow2)">
+    <rect x="550" y="330" width="200" height="100" rx="10" fill="#2a1215" stroke="#f87171" stroke-width="2"/>
+  </g>
+  <!-- 방패 아이콘 -->
+  <g transform="translate(580, 358)">
+    <path d="M12,2 L22,8 L22,16 Q22,24 12,28 Q2,24 2,16 L2,8 Z" fill="none" stroke="#f87171" stroke-width="1.5"/>
+    <path d="M9,15 L12,18 L17,12" fill="none" stroke="#f87171" stroke-width="2" stroke-linecap="round"/>
+  </g>
+  <text x="650" y="368" text-anchor="middle" font-family="sans-serif" font-weight="600" font-size="15" fill="#f87171">보안 검사실</text>
+  <text x="650" y="391" text-anchor="middle" font-family="sans-serif" font-size="11" fill="#94a3b8">SSL/TLS 암호화</text>
+  <text x="650" y="408" text-anchor="middle" font-family="sans-serif" font-size="11" fill="#94a3b8">접근 제어, 방화벽</text>
+
+  <!-- 하단 설명 -->
+  <text x="400" y="478" text-anchor="middle" font-family="sans-serif" font-size="13" fill="#94a3b8" opacity="0.7">클라이언트 요청 → 웹 서버(접수 창구) → 적절한 처리 부서로 분배</text>
+</svg>

public/images/academy/nginx-encyclopedia/3.svg

@@ -0,0 +1,165 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500">
+  <defs>
+    <linearGradient id="bg3" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#0e3c4a"/>
+      <stop offset="100%" stop-color="#0f172a"/>
+    </linearGradient>
+    <filter id="glow3">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <filter id="shadow3">
+      <feDropShadow dx="0" dy="2" stdDeviation="3" flood-color="#000" flood-opacity="0.3"/>
+    </filter>
+  </defs>
+
+  <!-- 배경 -->
+  <rect width="800" height="500" fill="url(#bg3)"/>
+
+  <!-- 타이틀 -->
+  <text x="400" y="38" text-anchor="middle" font-family="sans-serif" font-weight="700" font-size="24" fill="#ffffff">Apache vs Nginx 비교</text>
+  <line x1="260" y1="48" x2="540" y2="48" stroke="#22d3ee" stroke-width="1.5" opacity="0.4"/>
+
+  <!-- 중앙 구분선 -->
+  <line x1="400" y1="60" x2="400" y2="420" stroke="#334155" stroke-width="2" stroke-dasharray="8,4"/>
+  <text x="400" y="440" text-anchor="middle" font-family="sans-serif" font-weight="600" font-size="13" fill="#334155">VS</text>
+
+  <!-- ===== 좌측: Apache ===== -->
+  <!-- Apache 헤더 -->
+  <rect x="40" y="65" width="320" height="44" rx="8" fill="#7c2d12" opacity="0.3"/>
+  <text x="200" y="93" text-anchor="middle" font-family="sans-serif" font-weight="700" font-size="22" fill="#fbbf24">Apache</text>
+
+  <!-- 프로세스 기반 라벨 -->
+  <rect x="120" y="118" width="160" height="28" rx="14" fill="none" stroke="#fbbf24" stroke-width="1.5" opacity="0.7"/>
+  <text x="200" y="137" text-anchor="middle" font-family="sans-serif" font-weight="600" font-size="14" fill="#fbbf24">프로세스 기반</text>
+
+  <!-- 프로세스 다이어그램: 요청마다 프로세스 생성 -->
+  <text x="200" y="175" text-anchor="middle" font-family="sans-serif" font-size="12" fill="#94a3b8">요청마다 새 프로세스 생성</text>
+
+  <!-- 요청 화살표들 + 프로세스 박스들 -->
+  <g transform="translate(60, 190)">
+    <!-- 요청 1 → 프로세스 1 -->
+    <text x="0" y="14" font-family="sans-serif" font-size="11" fill="#94a3b8">요청1</text>
+    <line x1="38" y1="10" x2="75" y2="10" stroke="#fbbf24" stroke-width="1" stroke-dasharray="3,2"/>
+    <polygon points="75,10 69,6 69,14" fill="#fbbf24"/>
+    <rect x="80" y="0" width="80" height="22" rx="4" fill="#7c2d12" opacity="0.5" stroke="#fbbf24" stroke-width="1"/>
+    <text x="120" y="15" text-anchor="middle" font-family="sans-serif" font-size="10" fill="#fbbf24">프로세스 1</text>
+    <!-- CPU 아이콘 -->
+    <rect x="170" y="2" width="18" height="18" rx="2" fill="none" stroke="#fbbf24" stroke-width="1" opacity="0.5"/>
+    <rect x="174" y="6" width="10" height="10" rx="1" fill="#fbbf24" opacity="0.3"/>
+
+    <!-- 요청 2 → 프로세스 2 -->
+    <text x="0" y="48" font-family="sans-serif" font-size="11" fill="#94a3b8">요청2</text>
+    <line x1="38" y1="44" x2="75" y2="44" stroke="#fbbf24" stroke-width="1" stroke-dasharray="3,2"/>
+    <polygon points="75,44 69,40 69,48" fill="#fbbf24"/>
+    <rect x="80" y="34" width="80" height="22" rx="4" fill="#7c2d12" opacity="0.5" stroke="#fbbf24" stroke-width="1"/>
+    <text x="120" y="49" text-anchor="middle" font-family="sans-serif" font-size="10" fill="#fbbf24">프로세스 2</text>
+    <rect x="170" y="36" width="18" height="18" rx="2" fill="none" stroke="#fbbf24" stroke-width="1" opacity="0.5"/>
+    <rect x="174" y="40" width="10" height="10" rx="1" fill="#fbbf24" opacity="0.3"/>
+
+    <!-- 요청 3 → 프로세스 3 -->
+    <text x="0" y="82" font-family="sans-serif" font-size="11" fill="#94a3b8">요청3</text>
+    <line x1="38" y1="78" x2="75" y2="78" stroke="#fbbf24" stroke-width="1" stroke-dasharray="3,2"/>
+    <polygon points="75,78 69,74 69,82" fill="#fbbf24"/>
+    <rect x="80" y="68" width="80" height="22" rx="4" fill="#7c2d12" opacity="0.5" stroke="#fbbf24" stroke-width="1"/>
+    <text x="120" y="83" text-anchor="middle" font-family="sans-serif" font-size="10" fill="#fbbf24">프로세스 3</text>
+    <rect x="170" y="70" width="18" height="18" rx="2" fill="none" stroke="#fbbf24" stroke-width="1" opacity="0.5"/>
+    <rect x="174" y="74" width="10" height="10" rx="1" fill="#fbbf24" opacity="0.3"/>
+
+    <!-- 요청 4 → 프로세스 4 -->
+    <text x="0" y="116" font-family="sans-serif" font-size="11" fill="#94a3b8">요청4</text>
+    <line x1="38" y1="112" x2="75" y2="112" stroke="#fbbf24" stroke-width="1" stroke-dasharray="3,2"/>
+    <polygon points="75,112 69,108 69,116" fill="#fbbf24"/>
+    <rect x="80" y="102" width="80" height="22" rx="4" fill="#7c2d12" opacity="0.5" stroke="#fbbf24" stroke-width="1"/>
+    <text x="120" y="117" text-anchor="middle" font-family="sans-serif" font-size="10" fill="#fbbf24">프로세스 4</text>
+    <rect x="170" y="104" width="18" height="18" rx="2" fill="none" stroke="#fbbf24" stroke-width="1" opacity="0.5"/>
+    <rect x="174" y="108" width="10" height="10" rx="1" fill="#fbbf24" opacity="0.3"/>
+  </g>
+
+  <!-- Apache 메모리 바 -->
+  <text x="80" y="350" font-family="sans-serif" font-size="12" fill="#94a3b8">메모리 사용량</text>
+  <rect x="80" y="358" width="220" height="20" rx="4" fill="#1e293b"/>
+  <rect x="80" y="358" width="185" height="20" rx="4" fill="#fbbf24" opacity="0.7"/>
+  <text x="170" y="372" text-anchor="middle" font-family="sans-serif" font-weight="600" font-size="11" fill="#1e293b">높음 (84%)</text>
+
+  <!-- Apache 특징 -->
+  <text x="80" y="405" font-family="sans-serif" font-size="11" fill="#f87171">* 동시 접속 증가 시 메모리 급증</text>
+  <text x="80" y="422" font-family="sans-serif" font-size="11" fill="#94a3b8">* .htaccess 디렉토리별 설정</text>
+
+  <!-- ===== 우측: Nginx ===== -->
+  <!-- Nginx 헤더 -->
+  <rect x="440" y="65" width="320" height="44" rx="8" fill="#083344" opacity="0.5"/>
+  <text x="600" y="93" text-anchor="middle" font-family="sans-serif" font-weight="700" font-size="22" fill="#22d3ee">Nginx</text>
+
+  <!-- 이벤트 기반 라벨 -->
+  <rect x="520" y="118" width="160" height="28" rx="14" fill="none" stroke="#22d3ee" stroke-width="1.5" opacity="0.7"/>
+  <text x="600" y="137" text-anchor="middle" font-family="sans-serif" font-weight="600" font-size="14" fill="#22d3ee">이벤트 기반</text>
+
+  <!-- 이벤트 루프 다이어그램 -->
+  <text x="600" y="175" text-anchor="middle" font-family="sans-serif" font-size="12" fill="#94a3b8">하나의 워커가 여러 요청 처리</text>
+
+  <g transform="translate(600, 260)">
+    <!-- 중앙 워커 원 -->
+    <circle cx="0" cy="0" r="40" fill="#083344" stroke="#22d3ee" stroke-width="2.5" filter="url(#glow3)"/>
+    <text x="0" y="-5" text-anchor="middle" font-family="sans-serif" font-weight="700" font-size="13" fill="#22d3ee">워커</text>
+    <text x="0" y="12" text-anchor="middle" font-family="sans-serif" font-size="10" fill="#67e8f9">프로세스</text>
+
+    <!-- 요청 1 (상단) -->
+    <line x1="0" y1="-75" x2="0" y2="-45" stroke="#22d3ee" stroke-width="1.5"/>
+    <polygon points="0,-45 -4,-52 4,-52" fill="#22d3ee"/>
+    <rect x="-30" y="-100" width="60" height="22" rx="4" fill="#164e63" stroke="#22d3ee" stroke-width="1"/>
+    <text x="0" y="-85" text-anchor="middle" font-family="sans-serif" font-size="10" fill="#67e8f9">요청 1</text>
+
+    <!-- 요청 2 (우상단) -->
+    <line x1="62" y1="-44" x2="32" y2="-28" stroke="#22d3ee" stroke-width="1.5"/>
+    <polygon points="32,-28 39,-32 36,-24" fill="#22d3ee"/>
+    <rect x="50" y="-65" width="60" height="22" rx="4" fill="#164e63" stroke="#22d3ee" stroke-width="1"/>
+    <text x="80" y="-50" text-anchor="middle" font-family="sans-serif" font-size="10" fill="#67e8f9">요청 2</text>
+
+    <!-- 요청 3 (우하단) -->
+    <line x1="62" y1="44" x2="32" y2="28" stroke="#22d3ee" stroke-width="1.5"/>
+    <polygon points="32,28 39,24 36,32" fill="#22d3ee"/>
+    <rect x="50" y="35" width="60" height="22" rx="4" fill="#164e63" stroke="#22d3ee" stroke-width="1"/>
+    <text x="80" y="50" text-anchor="middle" font-family="sans-serif" font-size="10" fill="#67e8f9">요청 3</text>
+
+    <!-- 요청 4 (하단) -->
+    <line x1="0" y1="75" x2="0" y2="45" stroke="#22d3ee" stroke-width="1.5"/>
+    <polygon points="0,45 -4,52 4,52" fill="#22d3ee"/>
+    <rect x="-30" y="78" width="60" height="22" rx="4" fill="#164e63" stroke="#22d3ee" stroke-width="1"/>
+    <text x="0" y="93" text-anchor="middle" font-family="sans-serif" font-size="10" fill="#67e8f9">요청 4</text>
+
+    <!-- 요청 5 (좌하단) -->
+    <line x1="-62" y1="44" x2="-32" y2="28" stroke="#22d3ee" stroke-width="1.5"/>
+    <polygon points="-32,28 -39,24 -36,32" fill="#22d3ee"/>
+    <rect x="-110" y="35" width="60" height="22" rx="4" fill="#164e63" stroke="#22d3ee" stroke-width="1"/>
+    <text x="-80" y="50" text-anchor="middle" font-family="sans-serif" font-size="10" fill="#67e8f9">요청 5</text>
+
+    <!-- 요청 6 (좌상단) -->
+    <line x1="-62" y1="-44" x2="-32" y2="-28" stroke="#22d3ee" stroke-width="1.5"/>
+    <polygon points="-32,-28 -39,-32 -36,-24" fill="#22d3ee"/>
+    <rect x="-110" y="-65" width="60" height="22" rx="4" fill="#164e63" stroke="#22d3ee" stroke-width="1"/>
+    <text x="-80" y="-50" text-anchor="middle" font-family="sans-serif" font-size="10" fill="#67e8f9">요청 6</text>
+  </g>
+
+  <!-- Nginx 메모리 바 -->
+  <text x="480" y="390" font-family="sans-serif" font-size="12" fill="#94a3b8">메모리 사용량</text>
+  <rect x="480" y="398" width="220" height="20" rx="4" fill="#1e293b"/>
+  <rect x="480" y="398" width="66" height="20" rx="4" fill="#22d3ee" opacity="0.7"/>
+  <text x="513" y="412" text-anchor="middle" font-family="sans-serif" font-weight="600" font-size="11" fill="#0f172a">낮음 (30%)</text>
+
+  <!-- Nginx 특징 -->
+  <text x="480" y="440" font-family="sans-serif" font-size="11" fill="#4ade80">* 동시 접속 증가에도 안정적</text>
+  <text x="480" y="457" font-family="sans-serif" font-size="11" fill="#94a3b8">* 비동기 이벤트 루프 아키텍처</text>
+
+  <!-- 하단: SAM이 Nginx를 선택한 이유 -->
+  <g transform="translate(400, 484)">
+    <rect x="-180" y="-16" width="360" height="28" rx="14" fill="#083344" stroke="#22d3ee" stroke-width="1.5" opacity="0.6"/>
+    <text x="-6" y="3" text-anchor="middle" font-family="sans-serif" font-weight="600" font-size="13" fill="#22d3ee">SAM은 Nginx를 선택</text>
+    <!-- 화살표 -->
+    <polygon points="150,0 156,-6 156,6" fill="#22d3ee" opacity="0.8"/>
+    <text x="-140" y="3" text-anchor="middle" font-family="sans-serif" font-size="12" fill="#fbbf24" opacity="0.7">&#x2192;</text>
+  </g>
+</svg>

public/images/academy/nginx-encyclopedia/4.svg

@@ -0,0 +1,153 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500">
+  <defs>
+    <linearGradient id="bg4" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#0e3c4a"/>
+      <stop offset="100%" stop-color="#0f172a"/>
+    </linearGradient>
+    <filter id="shadow4">
+      <feDropShadow dx="0" dy="2" stdDeviation="4" flood-color="#000" flood-opacity="0.3"/>
+    </filter>
+    <filter id="glow4">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge>
+        <feMergeNode in="blur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+  </defs>
+
+  <!-- 배경 -->
+  <rect width="800" height="500" fill="url(#bg4)"/>
+
+  <!-- 타이틀 -->
+  <text x="400" y="38" text-anchor="middle" font-family="sans-serif" font-weight="700" font-size="24" fill="#ffffff">Nginx 설정 계층 구조</text>
+  <line x1="250" y1="48" x2="550" y2="48" stroke="#22d3ee" stroke-width="1.5" opacity="0.4"/>
+
+  <!-- ===== 중첩 사각형 (마트료시카) ===== -->
+  <!-- 중심점: 360, 240 -->
+
+  <!-- Layer 1: main (가장 바깥) - 회색 -->
+  <rect x="80" y="68" width="560" height="340" rx="16" fill="#1e293b" fill-opacity="0.4" stroke="#64748b" stroke-width="2.5" filter="url(#shadow4)"/>
+  <!-- main 라벨 -->
+  <rect x="92" y="76" width="70" height="24" rx="4" fill="#64748b" opacity="0.3"/>
+  <text x="127" y="93" text-anchor="middle" font-family="sans-serif" font-weight="700" font-size="14" fill="#94a3b8">main</text>
+  <!-- main 설명 -->
+  <text x="175" y="93" font-family="sans-serif" font-size="11" fill="#64748b">전체 설정 (worker 수, 로그 경로)</text>
+
+  <!-- Layer 2: events - 보라색 -->
+  <rect x="650" y="110" width="160" height="70" rx="10" fill="#1a1333" fill-opacity="0.5" stroke="#a78bfa" stroke-width="2"/>
+  <rect x="660" y="118" width="64" height="22" rx="4" fill="#a78bfa" opacity="0.2"/>
+  <text x="692" y="134" text-anchor="middle" font-family="sans-serif" font-weight="700" font-size="13" fill="#a78bfa">events</text>
+  <text x="730" y="155" text-anchor="middle" font-family="sans-serif" font-size="10" fill="#94a3b8">연결 수 설정</text>
+  <text x="730" y="168" text-anchor="middle" font-family="sans-serif" font-size="10" fill="#94a3b8">worker_connections</text>
+  <!-- events와 main 연결 점선 -->
+  <line x1="640" y1="145" x2="655" y2="145" stroke="#a78bfa" stroke-width="1" stroke-dasharray="3,2" opacity="0.5"/>
+
+  <!-- Layer 3: http - 시안 -->
+  <rect x="115" y="110" width="520" height="285" rx="14" fill="#083344" fill-opacity="0.3" stroke="#22d3ee" stroke-width="2"/>
+  <rect x="127" y="118" width="54" height="22" rx="4" fill="#22d3ee" opacity="0.15"/>
+  <text x="154" y="134" text-anchor="middle" font-family="sans-serif" font-weight="700" font-size="13" fill="#22d3ee">http</text>
+  <text x="220" y="134" font-family="sans-serif" font-size="11" fill="#0e7490">HTTP 프로토콜 설정 (gzip, MIME 타입)</text>
+
+  <!-- Layer 4: server - 녹색 -->
+  <rect x="150" y="150" width="470" height="230" rx="12" fill="#052e16" fill-opacity="0.3" stroke="#4ade80" stroke-width="2"/>
+  <rect x="162" y="158" width="62" height="22" rx="4" fill="#4ade80" opacity="0.15"/>
+  <text x="193" y="174" text-anchor="middle" font-family="sans-serif" font-weight="700" font-size="13" fill="#4ade80">server</text>
+  <text x="270" y="174" font-family="sans-serif" font-size="11" fill="#16a34a">도메인별 가상 호스트 (listen, server_name)</text>
+
+  <!-- Layer 5: location (가장 안쪽) - 앰버 -->
+  <!-- location 블록 1 -->
+  <rect x="185" y="195" width="200" height="170" rx="10" fill="#451a03" fill-opacity="0.3" stroke="#fbbf24" stroke-width="2" filter="url(#glow4)"/>
+  <rect x="197" y="203" width="72" height="22" rx="4" fill="#fbbf24" opacity="0.15"/>
+  <text x="233" y="219" text-anchor="middle" font-family="sans-serif" font-weight="700" font-size="13" fill="#fbbf24">location</text>
+
+  <text x="285" y="250" text-anchor="middle" font-family="sans-serif" font-size="11" fill="#94a3b8">경로별 처리 규칙</text>
+
+  <!-- location 예시들 -->
+  <g transform="translate(200, 268)">
+    <rect x="0" y="0" width="170" height="24" rx="4" fill="#1e293b" opacity="0.6"/>
+    <text x="85" y="16" text-anchor="middle" font-family="monospace" font-size="11" fill="#fbbf24">location / { ... }</text>
+  </g>
+  <g transform="translate(200, 298)">
+    <rect x="0" y="0" width="170" height="24" rx="4" fill="#1e293b" opacity="0.6"/>
+    <text x="85" y="16" text-anchor="middle" font-family="monospace" font-size="11" fill="#fbbf24">location /api { ... }</text>
+  </g>
+  <g transform="translate(200, 328)">
+    <rect x="0" y="0" width="170" height="24" rx="4" fill="#1e293b" opacity="0.6"/>
+    <text x="85" y="16" text-anchor="middle" font-family="monospace" font-size="11" fill="#fbbf24">location ~* \.jpg$ { }</text>
+  </g>
+
+  <!-- location 블록 2 (두번째 location) -->
+  <rect x="410" y="195" width="195" height="170" rx="10" fill="#451a03" fill-opacity="0.2" stroke="#fbbf24" stroke-width="1.5" stroke-dasharray="6,3"/>
+  <rect x="422" y="203" width="72" height="22" rx="4" fill="#fbbf24" opacity="0.1"/>
+  <text x="458" y="219" text-anchor="middle" font-family="sans-serif" font-weight="700" font-size="13" fill="#fbbf24" opacity="0.7">location</text>
+
+  <text x="507" y="250" text-anchor="middle" font-family="sans-serif" font-size="11" fill="#94a3b8" opacity="0.7">다른 경로 규칙</text>
+
+  <g transform="translate(425, 268)" opacity="0.6">
+    <rect x="0" y="0" width="165" height="24" rx="4" fill="#1e293b" opacity="0.4"/>
+    <text x="82" y="16" text-anchor="middle" font-family="monospace" font-size="11" fill="#fbbf24" opacity="0.7">location /static { }</text>
+  </g>
+  <g transform="translate(425, 298)" opacity="0.6">
+    <rect x="0" y="0" width="165" height="24" rx="4" fill="#1e293b" opacity="0.4"/>
+    <text x="82" y="16" text-anchor="middle" font-family="monospace" font-size="11" fill="#fbbf24" opacity="0.7">location /admin { }</text>
+  </g>
+
+  <!-- ===== 우측: 비유 설명 ===== -->
+  <!-- 건물 비유 (우측 하단) -->
+  <g transform="translate(660, 220)">
+    <text x="0" y="0" font-family="sans-serif" font-weight="600" font-size="12" fill="#ffffff" opacity="0.8">비유</text>
+    <line x1="0" y1="6" x2="50" y2="6" stroke="#22d3ee" stroke-width="1" opacity="0.3"/>
+
+    <!-- 건물 아이콘 -->
+    <rect x="0" y="18" width="100" height="22" rx="4" fill="#334155" opacity="0.5"/>
+    <text x="50" y="33" text-anchor="middle" font-family="sans-serif" font-size="11" fill="#94a3b8">건물 = main</text>
+
+    <rect x="10" y="48" width="80" height="22" rx="4" fill="#334155" opacity="0.5"/>
+    <text x="50" y="63" text-anchor="middle" font-family="sans-serif" font-size="11" fill="#22d3ee">층 = http</text>
+
+    <rect x="20" y="78" width="60" height="22" rx="4" fill="#334155" opacity="0.5"/>
+    <text x="50" y="93" text-anchor="middle" font-family="sans-serif" font-size="11" fill="#4ade80">호 = server</text>
+
+    <rect x="30" y="108" width="40" height="22" rx="4" fill="#334155" opacity="0.5"/>
+    <text x="50" y="123" text-anchor="middle" font-family="sans-serif" font-size="11" fill="#fbbf24">방 = loc</text>
+
+    <!-- 화살표 -->
+    <line x1="50" y1="40" x2="50" y2="48" stroke="#64748b" stroke-width="1"/>
+    <line x1="50" y1="70" x2="50" y2="78" stroke="#64748b" stroke-width="1"/>
+    <line x1="50" y1="100" x2="50" y2="108" stroke="#64748b" stroke-width="1"/>
+  </g>
+
+  <!-- 하단 비유 텍스트 -->
+  <g transform="translate(400, 430)">
+    <rect x="-300" y="-10" width="600" height="50" rx="10" fill="#1e293b" opacity="0.4"/>
+    <!-- 건물 → 층 → 호 → 방 -->
+    <text x="-210" y="12" text-anchor="middle" font-family="sans-serif" font-weight="600" font-size="14" fill="#94a3b8">건물</text>
+    <text x="-170" y="12" text-anchor="middle" font-family="sans-serif" font-size="16" fill="#64748b">&#x2192;</text>
+    <text x="-130" y="12" text-anchor="middle" font-family="sans-serif" font-weight="600" font-size="14" fill="#22d3ee">층</text>
+    <text x="-95" y="12" text-anchor="middle" font-family="sans-serif" font-size="16" fill="#64748b">&#x2192;</text>
+    <text x="-55" y="12" text-anchor="middle" font-family="sans-serif" font-weight="600" font-size="14" fill="#4ade80">호</text>
+    <text x="-20" y="12" text-anchor="middle" font-family="sans-serif" font-size="16" fill="#64748b">&#x2192;</text>
+    <text x="20" y="12" text-anchor="middle" font-family="sans-serif" font-weight="600" font-size="14" fill="#fbbf24">방</text>
+
+    <!-- 구분선 -->
+    <line x1="55" y1="-2" x2="55" y2="26" stroke="#334155" stroke-width="1"/>
+
+    <text x="180" y="8" text-anchor="middle" font-family="sans-serif" font-size="12" fill="#94a3b8">바깥에서 안쪽으로</text>
+    <text x="180" y="26" text-anchor="middle" font-family="sans-serif" font-size="12" fill="#94a3b8">설정이 상속됩니다</text>
+  </g>
+
+  <!-- 범례 (좌측 상단 여백) -->
+  <g transform="translate(660, 82)" opacity="0.6">
+    <circle cx="6" cy="6" r="4" fill="#64748b"/>
+    <text x="16" y="10" font-family="sans-serif" font-size="9" fill="#94a3b8">main</text>
+    <circle cx="6" cy="22" r="4" fill="#a78bfa"/>
+    <text x="16" y="26" font-family="sans-serif" font-size="9" fill="#94a3b8">events</text>
+    <circle cx="56" cy="6" r="4" fill="#22d3ee"/>
+    <text x="66" y="10" font-family="sans-serif" font-size="9" fill="#94a3b8">http</text>
+    <circle cx="56" cy="22" r="4" fill="#4ade80"/>
+    <text x="66" y="26" font-family="sans-serif" font-size="9" fill="#94a3b8">server</text>
+    <circle cx="106" cy="6" r="4" fill="#fbbf24"/>
+    <text x="116" y="10" font-family="sans-serif" font-size="9" fill="#94a3b8">location</text>
+  </g>
+</svg>