From 7ac2b99234d1ba2300a47310b8063c0755be2af0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Mon, 23 Feb 2026 12:42:13 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20[academy]=20=ED=99=98=EA=B2=BD=EB=B3=80?=
 =?UTF-8?q?=EC=88=98=20=EA=B4=80=EB=A6=AC=20=EB=B0=B1=EA=B3=BC=EC=82=AC?=
 =?UTF-8?q?=EC=A0=84=20SVG=20=EC=9D=BC=EB=9F=AC=EC=8A=A4=ED=8A=B8=205?=
 =?UTF-8?q?=EC=A2=85=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 1.svg: 열쇠 고리 비유 Hero 이미지
- 2.svg: .env 역할 개념도 (App → Services 흐름)
- 3.svg: 프로젝트별 .env 구조 (MNG/API/React)
- 4.svg: Docker Override 우선순위 다이어그램
- 5.svg: MNG ↔ API 동기화 필수 변수 맵
---
 public/images/academy/env-management/1.svg |  79 ++++++++++
 public/images/academy/env-management/2.svg | 113 ++++++++++++++
 public/images/academy/env-management/3.svg | 111 ++++++++++++++
 public/images/academy/env-management/4.svg |  88 +++++++++++
 public/images/academy/env-management/5.svg | 165 +++++++++++++++++++++
 5 files changed, 556 insertions(+)
 create mode 100644 public/images/academy/env-management/1.svg
 create mode 100644 public/images/academy/env-management/2.svg
 create mode 100644 public/images/academy/env-management/3.svg
 create mode 100644 public/images/academy/env-management/4.svg
 create mode 100644 public/images/academy/env-management/5.svg

diff --git a/public/images/academy/env-management/1.svg b/public/images/academy/env-management/1.svg
new file mode 100644
index 00000000..0be24659
--- /dev/null
+++ b/public/images/academy/env-management/1.svg
@@ -0,0 +1,79 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500">
+  <defs>
+    <linearGradient id="bg1" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#0d2d1f"/>
+      <stop offset="100%" stop-color="#0f172a"/>
+    </linearGradient>
+    <pattern id="dots" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
+      <circle cx="10" cy="10" r="1" fill="#34d399" opacity="0.08"/>
+    </pattern>
+    <filter id="glow1">
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+    <linearGradient id="keyGrad" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#6ee7b7"/>
+      <stop offset="100%" stop-color="#34d399"/>
+    </linearGradient>
+  </defs>
+
+  <!-- 배경 -->
+  <rect width="800" height="500" fill="url(#bg1)"/>
+  <rect width="800" height="500" fill="url(#dots)"/>
+
+  <!-- 상단 .env 텍스트 -->
+  <text x="400" y="60" text-anchor="middle" font-family="monospace" font-size="36" font-weight="bold" fill="#34d399" filter="url(#glow1)">.env</text>
+
+  <!-- 열쇠 고리 본체 (큰 원) -->
+  <circle cx="400" cy="200" r="65" fill="none" stroke="url(#keyGrad)" stroke-width="8" opacity="0.9"/>
+  <circle cx="400" cy="200" r="65" fill="none" stroke="#6ee7b7" stroke-width="2" opacity="0.3"/>
+
+  <!-- 고리 상단 잠금 장식 -->
+  <rect x="385" y="128" width="30" height="14" rx="4" fill="#1e3a2f" stroke="#34d399" stroke-width="2"/>
+
+  <!-- 연결 줄 (고리에서 아래로) -->
+  <line x1="340" y1="258" x2="240" y2="330" stroke="#34d399" stroke-width="2" opacity="0.6"/>
+  <line x1="400" y1="265" x2="400" y2="330" stroke="#34d399" stroke-width="2" opacity="0.6"/>
+  <line x1="460" y1="258" x2="560" y2="330" stroke="#34d399" stroke-width="2" opacity="0.6"/>
+
+  <!-- 열쇠 1: MNG -->
+  <g transform="translate(240, 330)">
+    <!-- 열쇠 머리 (원) -->
+    <circle cx="0" cy="18" r="18" fill="none" stroke="#34d399" stroke-width="3"/>
+    <circle cx="0" cy="18" r="6" fill="#0d2d1f" stroke="#34d399" stroke-width="2"/>
+    <!-- 열쇠 몸체 -->
+    <rect x="-3" y="36" width="6" height="40" rx="2" fill="#34d399"/>
+    <!-- 열쇠 이빨 -->
+    <rect x="3" y="56" width="10" height="4" rx="1" fill="#34d399"/>
+    <rect x="3" y="64" width="7" height="4" rx="1" fill="#34d399"/>
+    <!-- 라벨 -->
+    <rect x="-28" y="84" width="56" height="24" rx="6" fill="#34d399" opacity="0.15" stroke="#34d399" stroke-width="1"/>
+    <text x="0" y="101" text-anchor="middle" font-family="sans-serif" font-size="13" font-weight="bold" fill="#34d399">MNG</text>
+  </g>
+
+  <!-- 열쇠 2: API -->
+  <g transform="translate(400, 330)">
+    <circle cx="0" cy="18" r="18" fill="none" stroke="#fbbf24" stroke-width="3"/>
+    <circle cx="0" cy="18" r="6" fill="#0d2d1f" stroke="#fbbf24" stroke-width="2"/>
+    <rect x="-3" y="36" width="6" height="40" rx="2" fill="#fbbf24"/>
+    <rect x="3" y="52" width="10" height="4" rx="1" fill="#fbbf24"/>
+    <rect x="3" y="60" width="12" height="4" rx="1" fill="#fbbf24"/>
+    <rect x="3" y="68" width="8" height="4" rx="1" fill="#fbbf24"/>
+    <rect x="-28" y="84" width="56" height="24" rx="6" fill="#fbbf24" opacity="0.15" stroke="#fbbf24" stroke-width="1"/>
+    <text x="0" y="101" text-anchor="middle" font-family="sans-serif" font-size="13" font-weight="bold" fill="#fbbf24">API</text>
+  </g>
+
+  <!-- 열쇠 3: React -->
+  <g transform="translate(560, 330)">
+    <circle cx="0" cy="18" r="18" fill="none" stroke="#a78bfa" stroke-width="3"/>
+    <circle cx="0" cy="18" r="6" fill="#0d2d1f" stroke="#a78bfa" stroke-width="2"/>
+    <rect x="-3" y="36" width="6" height="40" rx="2" fill="#a78bfa"/>
+    <rect x="3" y="54" width="10" height="4" rx="1" fill="#a78bfa"/>
+    <rect x="3" y="62" width="14" height="4" rx="1" fill="#a78bfa"/>
+    <rect x="-28" y="84" width="56" height="24" rx="6" fill="#a78bfa" opacity="0.15" stroke="#a78bfa" stroke-width="1"/>
+    <text x="0" y="101" text-anchor="middle" font-family="sans-serif" font-size="13" font-weight="bold" fill="#a78bfa">React</text>
+  </g>
+
+  <!-- 하단 캡션 -->
+  <text x="400" y="470" text-anchor="middle" font-family="sans-serif" font-size="20" fill="#e2e8f0">환경 변수 — 서비스를 여는 열쇠</text>
+</svg>
\ No newline at end of file
diff --git a/public/images/academy/env-management/2.svg b/public/images/academy/env-management/2.svg
new file mode 100644
index 00000000..2bafb1d6
--- /dev/null
+++ b/public/images/academy/env-management/2.svg
@@ -0,0 +1,113 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500">
+  <defs>
+    <linearGradient id="bg2" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#0d2d1f"/>
+      <stop offset="100%" stop-color="#0f172a"/>
+    </linearGradient>
+    <filter id="glow2">
+      <feGaussianBlur stdDeviation="2" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+  </defs>
+
+  <!-- 배경 -->
+  <rect width="800" height="500" fill="url(#bg2)"/>
+
+  <!-- === .env 파일 박스 (왼쪽) === -->
+  <rect x="40" y="100" width="190" height="220" rx="12" fill="#0d2d1f" stroke="#34d399" stroke-width="2"/>
+  <!-- 제목 바 -->
+  <rect x="40" y="100" width="190" height="36" rx="12" fill="#34d399" opacity="0.15"/>
+  <rect x="40" y="124" width="190" height="12" fill="#34d399" opacity="0.15"/>
+  <text x="135" y="124" text-anchor="middle" font-family="monospace" font-size="14" font-weight="bold" fill="#34d399">.env 파일</text>
+  <!-- key=value 라인 -->
+  <text x="56" y="160" font-family="monospace" font-size="10" fill="#6ee7b7">DB_HOST=mysql</text>
+  <text x="56" y="178" font-family="monospace" font-size="10" fill="#6ee7b7">DB_PORT=3306</text>
+  <text x="56" y="196" font-family="monospace" font-size="10" fill="#fbbf24">MAIL_HOST=smtp</text>
+  <text x="56" y="214" font-family="monospace" font-size="10" fill="#a78bfa">GEMINI_API_KEY=xxx</text>
+  <text x="56" y="232" font-family="monospace" font-size="10" fill="#f87171">FCM_KEY=yyy</text>
+  <text x="56" y="250" font-family="monospace" font-size="10" fill="#94a3b8">APP_DEBUG=true</text>
+  <text x="56" y="268" font-family="monospace" font-size="10" fill="#94a3b8">APP_URL=...</text>
+
+  <!-- 화살표 1: .env → App -->
+  <line x1="235" y1="210" x2="295" y2="210" stroke="#34d399" stroke-width="2" marker-end="url(#arrowGreen2)"/>
+  <defs>
+    <marker id="arrowGreen2" markerWidth="10" markerHeight="8" refX="9" refY="4" orient="auto">
+      <path d="M0,0 L10,4 L0,8 Z" fill="#34d399"/>
+    </marker>
+    <marker id="arrowAmber2" markerWidth="10" markerHeight="8" refX="9" refY="4" orient="auto">
+      <path d="M0,0 L10,4 L0,8 Z" fill="#fbbf24"/>
+    </marker>
+  </defs>
+
+  <!-- === Laravel App 박스 (중앙) === -->
+  <rect x="300" y="140" width="200" height="140" rx="14" fill="#0d2d1f" stroke="#6ee7b7" stroke-width="2.5"/>
+  <!-- Laravel 아이콘 (간소화) -->
+  <rect x="300" y="140" width="200" height="40" rx="14" fill="#34d399" opacity="0.12"/>
+  <rect x="300" y="168" width="200" height="12" fill="#34d399" opacity="0.12"/>
+  <text x="400" y="167" text-anchor="middle" font-family="sans-serif" font-size="16" font-weight="bold" fill="#6ee7b7">Laravel App</text>
+  <!-- config() 호출 표시 -->
+  <text x="400" y="200" text-anchor="middle" font-family="monospace" font-size="11" fill="#94a3b8">config('database')</text>
+  <text x="400" y="218" text-anchor="middle" font-family="monospace" font-size="11" fill="#94a3b8">config('mail')</text>
+  <text x="400" y="236" text-anchor="middle" font-family="monospace" font-size="11" fill="#94a3b8">config('services')</text>
+  <text x="400" y="254" text-anchor="middle" font-family="monospace" font-size="11" fill="#94a3b8">env('FCM_KEY')</text>
+
+  <!-- 화살표 2: App → Services -->
+  <line x1="505" y1="175" x2="575" y2="110" stroke="#6ee7b7" stroke-width="2" marker-end="url(#arrowGreen2)"/>
+  <line x1="505" y1="195" x2="575" y2="195" stroke="#fbbf24" stroke-width="2" marker-end="url(#arrowAmber2)"/>
+  <line x1="505" y1="215" x2="575" y2="280" stroke="#a78bfa" stroke-width="2"/>
+  <line x1="505" y1="240" x2="575" y2="360" stroke="#f87171" stroke-width="2"/>
+  <!-- 화살표 끝 (보라, 빨강) -->
+  <polygon points="575,276 575,284 585,280" fill="#a78bfa"/>
+  <polygon points="575,356 575,364 585,360" fill="#f87171"/>
+
+  <!-- === 서비스 박스들 (오른쪽) === -->
+
+  <!-- DB (MySQL) -->
+  <g transform="translate(585, 72)">
+    <rect width="170" height="52" rx="10" fill="#0d2d1f" stroke="#6ee7b7" stroke-width="1.5"/>
+    <!-- 실린더 아이콘 -->
+    <ellipse cx="28" cy="20" rx="10" ry="5" fill="none" stroke="#6ee7b7" stroke-width="1.5"/>
+    <line x1="18" y1="20" x2="18" y2="34" stroke="#6ee7b7" stroke-width="1.5"/>
+    <line x1="38" y1="20" x2="38" y2="34" stroke="#6ee7b7" stroke-width="1.5"/>
+    <ellipse cx="28" cy="34" rx="10" ry="5" fill="none" stroke="#6ee7b7" stroke-width="1.5"/>
+    <text x="56" y="24" font-family="sans-serif" font-size="13" font-weight="bold" fill="#6ee7b7">DB</text>
+    <text x="56" y="40" font-family="monospace" font-size="10" fill="#94a3b8">MySQL 8.0</text>
+  </g>
+
+  <!-- Mail -->
+  <g transform="translate(585, 168)">
+    <rect width="170" height="52" rx="10" fill="#0d2d1f" stroke="#fbbf24" stroke-width="1.5"/>
+    <!-- 편지 아이콘 -->
+    <rect x="14" y="16" width="22" height="16" rx="2" fill="none" stroke="#fbbf24" stroke-width="1.5"/>
+    <polyline points="14,16 25,27 36,16" fill="none" stroke="#fbbf24" stroke-width="1.5"/>
+    <text x="50" y="24" font-family="sans-serif" font-size="13" font-weight="bold" fill="#fbbf24">Mail</text>
+    <text x="50" y="40" font-family="monospace" font-size="10" fill="#94a3b8">SMTP</text>
+  </g>
+
+  <!-- AI -->
+  <g transform="translate(585, 258)">
+    <rect width="170" height="52" rx="10" fill="#0d2d1f" stroke="#a78bfa" stroke-width="1.5"/>
+    <!-- 뇌 아이콘 (간소화) -->
+    <circle cx="25" cy="24" r="10" fill="none" stroke="#a78bfa" stroke-width="1.5"/>
+    <path d="M20,20 Q25,14 30,20" fill="none" stroke="#a78bfa" stroke-width="1.2"/>
+    <path d="M20,28 Q25,34 30,28" fill="none" stroke="#a78bfa" stroke-width="1.2"/>
+    <line x1="25" y1="14" x2="25" y2="34" stroke="#a78bfa" stroke-width="1" opacity="0.5"/>
+    <text x="50" y="24" font-family="sans-serif" font-size="13" font-weight="bold" fill="#a78bfa">AI</text>
+    <text x="50" y="40" font-family="monospace" font-size="10" fill="#94a3b8">Gemini / Claude</text>
+  </g>
+
+  <!-- FCM -->
+  <g transform="translate(585, 340)">
+    <rect width="170" height="52" rx="10" fill="#0d2d1f" stroke="#f87171" stroke-width="1.5"/>
+    <!-- 종 아이콘 -->
+    <path d="M21,18 Q25,10 29,18 L30,28 L20,28 Z" fill="none" stroke="#f87171" stroke-width="1.5"/>
+    <line x1="25" y1="28" x2="25" y2="32" stroke="#f87171" stroke-width="1.5"/>
+    <circle cx="25" cy="33" r="2" fill="#f87171"/>
+    <text x="46" y="24" font-family="sans-serif" font-size="13" font-weight="bold" fill="#f87171">FCM</text>
+    <text x="46" y="40" font-family="monospace" font-size="10" fill="#94a3b8">Push 알림</text>
+  </g>
+
+  <!-- 하단 캡션 -->
+  <rect x="140" y="430" width="520" height="36" rx="8" fill="#34d399" opacity="0.08"/>
+  <text x="400" y="454" text-anchor="middle" font-family="sans-serif" font-size="16" fill="#e2e8f0">설정 파일이 앱과 외부 서비스를 연결한다</text>
+</svg>
\ No newline at end of file
diff --git a/public/images/academy/env-management/3.svg b/public/images/academy/env-management/3.svg
new file mode 100644
index 00000000..ceac3ba2
--- /dev/null
+++ b/public/images/academy/env-management/3.svg
@@ -0,0 +1,111 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500">
+  <defs>
+    <linearGradient id="bg3" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#0d2d1f"/>
+      <stop offset="100%" stop-color="#0f172a"/>
+    </linearGradient>
+  </defs>
+
+  <!-- 배경 -->
+  <rect width="800" height="500" fill="url(#bg3)"/>
+
+  <!-- 상단 제목 -->
+  <text x="400" y="40" text-anchor="middle" font-family="sans-serif" font-size="20" font-weight="bold" fill="#e2e8f0">프로젝트별 .env 구조</text>
+
+  <!-- === MNG 박스 === -->
+  <g transform="translate(20, 60)">
+    <rect width="246" height="370" rx="12" fill="#0d2d1f" stroke="#34d399" stroke-width="2"/>
+    <!-- 헤더 -->
+    <rect width="246" height="38" rx="12" fill="#34d399" opacity="0.18"/>
+    <rect y="26" width="246" height="12" fill="#34d399" opacity="0.18"/>
+    <text x="123" y="28" text-anchor="middle" font-family="sans-serif" font-size="16" font-weight="bold" fill="#34d399">MNG</text>
+    <!-- 항목들 -->
+    <text x="16" y="62" font-family="monospace" font-size="10" fill="#a78bfa">APP</text>
+    <rect x="8" y="50" width="32" height="16" rx="3" fill="#a78bfa" opacity="0.1"/>
+    <text x="16" y="82" font-family="monospace" font-size="10" fill="#a78bfa">DB</text>
+    <rect x="8" y="70" width="22" height="16" rx="3" fill="#a78bfa" opacity="0.1"/>
+    <text x="16" y="102" font-family="monospace" font-size="10" fill="#34d399">Session</text>
+    <rect x="8" y="90" width="56" height="16" rx="3" fill="#34d399" opacity="0.1"/>
+    <text x="16" y="122" font-family="monospace" font-size="10" fill="#34d399">Mail</text>
+    <rect x="8" y="110" width="36" height="16" rx="3" fill="#34d399" opacity="0.1"/>
+    <text x="16" y="142" font-family="monospace" font-size="10" fill="#34d399">SAM API 연동</text>
+    <rect x="8" y="130" width="100" height="16" rx="3" fill="#34d399" opacity="0.1"/>
+    <text x="16" y="162" font-family="monospace" font-size="10" fill="#a78bfa">Google AI</text>
+    <rect x="8" y="150" width="72" height="16" rx="3" fill="#a78bfa" opacity="0.1"/>
+    <text x="16" y="182" font-family="monospace" font-size="10" fill="#a78bfa">Claude AI</text>
+    <rect x="8" y="170" width="72" height="16" rx="3" fill="#a78bfa" opacity="0.1"/>
+    <text x="16" y="202" font-family="monospace" font-size="10" fill="#a78bfa">FCM</text>
+    <rect x="8" y="190" width="32" height="16" rx="3" fill="#a78bfa" opacity="0.1"/>
+    <text x="16" y="222" font-family="monospace" font-size="10" fill="#34d399">Notion</text>
+    <rect x="8" y="210" width="50" height="16" rx="3" fill="#34d399" opacity="0.1"/>
+    <text x="16" y="242" font-family="monospace" font-size="10" fill="#34d399">기상청 API</text>
+    <rect x="8" y="230" width="76" height="16" rx="3" fill="#34d399" opacity="0.1"/>
+    <!-- 범례 아이콘 -->
+    <circle cx="16" cy="280" r="5" fill="#a78bfa" opacity="0.4"/>
+    <text x="26" y="284" font-family="sans-serif" font-size="9" fill="#94a3b8">공통</text>
+    <circle cx="16" cy="298" r="5" fill="#34d399" opacity="0.4"/>
+    <text x="26" y="302" font-family="sans-serif" font-size="9" fill="#94a3b8">MNG 전용</text>
+  </g>
+
+  <!-- === API 박스 === -->
+  <g transform="translate(278, 60)">
+    <rect width="246" height="370" rx="12" fill="#0d2d1f" stroke="#fbbf24" stroke-width="2"/>
+    <!-- 헤더 -->
+    <rect width="246" height="38" rx="12" fill="#fbbf24" opacity="0.18"/>
+    <rect y="26" width="246" height="12" fill="#fbbf24" opacity="0.18"/>
+    <text x="123" y="28" text-anchor="middle" font-family="sans-serif" font-size="16" font-weight="bold" fill="#fbbf24">API</text>
+    <!-- 항목들 -->
+    <text x="16" y="62" font-family="monospace" font-size="10" fill="#a78bfa">APP</text>
+    <rect x="8" y="50" width="32" height="16" rx="3" fill="#a78bfa" opacity="0.1"/>
+    <text x="16" y="82" font-family="monospace" font-size="10" fill="#a78bfa">DB</text>
+    <rect x="8" y="70" width="22" height="16" rx="3" fill="#a78bfa" opacity="0.1"/>
+    <text x="16" y="102" font-family="monospace" font-size="10" fill="#fbbf24">Slack 로깅</text>
+    <rect x="8" y="90" width="76" height="16" rx="3" fill="#fbbf24" opacity="0.1"/>
+    <text x="16" y="122" font-family="monospace" font-size="10" fill="#fbbf24">Swagger</text>
+    <rect x="8" y="110" width="60" height="16" rx="3" fill="#fbbf24" opacity="0.1"/>
+    <text x="16" y="142" font-family="monospace" font-size="10" fill="#fbbf24">Sanctum</text>
+    <rect x="8" y="130" width="60" height="16" rx="3" fill="#fbbf24" opacity="0.1"/>
+    <text x="16" y="162" font-family="monospace" font-size="10" fill="#fbbf24">Legacy DB</text>
+    <rect x="8" y="150" width="72" height="16" rx="3" fill="#fbbf24" opacity="0.1"/>
+    <text x="16" y="182" font-family="monospace" font-size="10" fill="#fbbf24">바로빌</text>
+    <rect x="8" y="170" width="52" height="16" rx="3" fill="#fbbf24" opacity="0.1"/>
+    <text x="16" y="202" font-family="monospace" font-size="10" fill="#a78bfa">Google AI</text>
+    <rect x="8" y="190" width="72" height="16" rx="3" fill="#a78bfa" opacity="0.1"/>
+    <text x="16" y="222" font-family="monospace" font-size="10" fill="#a78bfa">Claude AI</text>
+    <rect x="8" y="210" width="72" height="16" rx="3" fill="#a78bfa" opacity="0.1"/>
+    <text x="16" y="242" font-family="monospace" font-size="10" fill="#a78bfa">FCM</text>
+    <rect x="8" y="230" width="32" height="16" rx="3" fill="#a78bfa" opacity="0.1"/>
+    <!-- 범례 -->
+    <circle cx="16" cy="280" r="5" fill="#a78bfa" opacity="0.4"/>
+    <text x="26" y="284" font-family="sans-serif" font-size="9" fill="#94a3b8">공통</text>
+    <circle cx="16" cy="298" r="5" fill="#fbbf24" opacity="0.4"/>
+    <text x="26" y="302" font-family="sans-serif" font-size="9" fill="#94a3b8">API 전용</text>
+  </g>
+
+  <!-- === React 박스 === -->
+  <g transform="translate(536, 60)">
+    <rect width="246" height="370" rx="12" fill="#0d2d1f" stroke="#a78bfa" stroke-width="2"/>
+    <!-- 헤더 -->
+    <rect width="246" height="38" rx="12" fill="#a78bfa" opacity="0.18"/>
+    <rect y="26" width="246" height="12" fill="#a78bfa" opacity="0.18"/>
+    <text x="123" y="28" text-anchor="middle" font-family="sans-serif" font-size="16" font-weight="bold" fill="#a78bfa">React</text>
+    <!-- 항목들 -->
+    <text x="16" y="68" font-family="monospace" font-size="10" fill="#a78bfa">NEXT_PUBLIC_API_URL</text>
+    <rect x="8" y="56" width="156" height="16" rx="3" fill="#a78bfa" opacity="0.1"/>
+    <text x="16" y="96" font-family="monospace" font-size="10" fill="#a78bfa">NEXT_PUBLIC_API_KEY</text>
+    <rect x="8" y="84" width="156" height="16" rx="3" fill="#a78bfa" opacity="0.1"/>
+    <text x="16" y="124" font-family="monospace" font-size="10" fill="#a78bfa">NODE_ENV</text>
+    <rect x="8" y="112" width="66" height="16" rx="3" fill="#a78bfa" opacity="0.1"/>
+    <!-- 간결한 설명 -->
+    <text x="123" y="180" text-anchor="middle" font-family="sans-serif" font-size="11" fill="#64748b">Next.js 환경 변수는</text>
+    <text x="123" y="196" text-anchor="middle" font-family="sans-serif" font-size="11" fill="#64748b">NEXT_PUBLIC_ 접두사로</text>
+    <text x="123" y="212" text-anchor="middle" font-family="sans-serif" font-size="11" fill="#64748b">클라이언트 노출 여부 결정</text>
+    <!-- 범례 -->
+    <circle cx="16" cy="280" r="5" fill="#a78bfa" opacity="0.4"/>
+    <text x="26" y="284" font-family="sans-serif" font-size="9" fill="#94a3b8">React 전용</text>
+  </g>
+
+  <!-- 하단 캡션 -->
+  <rect x="170" y="448" width="460" height="36" rx="8" fill="#34d399" opacity="0.08"/>
+  <text x="400" y="472" text-anchor="middle" font-family="sans-serif" font-size="16" fill="#e2e8f0">각 프로젝트는 독립된 .env 파일을 보유</text>
+</svg>
\ No newline at end of file
diff --git a/public/images/academy/env-management/4.svg b/public/images/academy/env-management/4.svg
new file mode 100644
index 00000000..4241373d
--- /dev/null
+++ b/public/images/academy/env-management/4.svg
@@ -0,0 +1,88 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500">
+  <defs>
+    <linearGradient id="bg4" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#0d2d1f"/>
+      <stop offset="100%" stop-color="#0f172a"/>
+    </linearGradient>
+    <marker id="arrowDown4" markerWidth="10" markerHeight="8" refX="5" refY="8" orient="auto">
+      <path d="M0,0 L10,0 L5,8 Z" fill="#34d399"/>
+    </marker>
+  </defs>
+
+  <!-- 배경 -->
+  <rect width="800" height="500" fill="url(#bg4)"/>
+
+  <!-- 상단 제목 -->
+  <text x="400" y="36" text-anchor="middle" font-family="sans-serif" font-size="20" font-weight="bold" fill="#e2e8f0">Docker Override 우선순위</text>
+
+  <!-- === 왼쪽: 3단 계층 다이어그램 === -->
+
+  <!-- 1단: docker-compose environment (최상위, 강조) -->
+  <rect x="40" y="70" width="360" height="70" rx="14" fill="#34d399" opacity="0.15" stroke="#34d399" stroke-width="2.5"/>
+  <text x="60" y="96" font-family="sans-serif" font-size="11" fill="#34d399" font-weight="bold">1순위 (최우선)</text>
+  <text x="60" y="118" font-family="monospace" font-size="14" fill="#6ee7b7" font-weight="bold">docker-compose environment:</text>
+  <!-- 빛나는 효과 -->
+  <rect x="40" y="70" width="360" height="70" rx="14" fill="#34d399" opacity="0.04"/>
+
+  <!-- 화살표 1→2 -->
+  <line x1="220" y1="140" x2="220" y2="165" stroke="#34d399" stroke-width="2" marker-end="url(#arrowDown4)"/>
+  <text x="240" y="158" font-family="sans-serif" font-size="10" fill="#6ee7b7">덮어쓴다</text>
+
+  <!-- 2단: .env 파일 -->
+  <rect x="40" y="174" width="360" height="70" rx="14" fill="#0d2d1f" stroke="#6ee7b7" stroke-width="1.5" opacity="0.8"/>
+  <text x="60" y="200" font-family="sans-serif" font-size="11" fill="#6ee7b7">2순위</text>
+  <text x="60" y="222" font-family="monospace" font-size="14" fill="#94a3b8">.env 파일</text>
+
+  <!-- 화살표 2→3 -->
+  <line x1="220" y1="244" x2="220" y2="269" stroke="#34d399" stroke-width="2" marker-end="url(#arrowDown4)" opacity="0.6"/>
+  <text x="240" y="262" font-family="sans-serif" font-size="10" fill="#6ee7b7" opacity="0.6">덮어쓴다</text>
+
+  <!-- 3단: .env.example (기본값, 약한) -->
+  <rect x="40" y="278" width="360" height="70" rx="14" fill="#0d2d1f" stroke="#475569" stroke-width="1" opacity="0.5"/>
+  <text x="60" y="304" font-family="sans-serif" font-size="11" fill="#64748b">3순위 (기본값)</text>
+  <text x="60" y="326" font-family="monospace" font-size="14" fill="#64748b">.env.example</text>
+
+  <!-- 왼쪽 우선순위 바 -->
+  <rect x="26" y="70" width="6" height="278" rx="3" fill="#34d399" opacity="0.2"/>
+  <rect x="26" y="70" width="6" height="70" rx="3" fill="#34d399" opacity="0.6"/>
+
+  <!-- === 오른쪽: 실제 예시 === -->
+  <rect x="440" y="70" width="340" height="278" rx="14" fill="#0d2d1f" stroke="#475569" stroke-width="1"/>
+  <rect x="440" y="70" width="340" height="36" rx="14" fill="#34d399" opacity="0.1"/>
+  <rect x="440" y="94" width="340" height="12" fill="#34d399" opacity="0.1"/>
+  <text x="610" y="95" text-anchor="middle" font-family="sans-serif" font-size="14" font-weight="bold" fill="#e2e8f0">실제 예시: DB_HOST</text>
+
+  <!-- .env 예시 (취소선 효과) -->
+  <rect x="460" y="120" width="300" height="52" rx="8" fill="#0d2d1f" stroke="#475569" stroke-width="1"/>
+  <text x="476" y="140" font-family="sans-serif" font-size="11" fill="#64748b">API .env 파일</text>
+  <text x="476" y="160" font-family="monospace" font-size="12" fill="#64748b" text-decoration="line-through">DB_HOST=127.0.0.1</text>
+  <!-- X 마크 -->
+  <g transform="translate(730, 142)">
+    <circle r="10" fill="#f87171" opacity="0.2"/>
+    <line x1="-5" y1="-5" x2="5" y2="5" stroke="#f87171" stroke-width="2"/>
+    <line x1="5" y1="-5" x2="-5" y2="5" stroke="#f87171" stroke-width="2"/>
+  </g>
+
+  <!-- docker-compose 예시 (강조) -->
+  <rect x="460" y="190" width="300" height="68" rx="8" fill="#34d399" opacity="0.08" stroke="#34d399" stroke-width="1.5"/>
+  <text x="476" y="212" font-family="sans-serif" font-size="11" fill="#34d399" font-weight="bold">docker-compose.yml</text>
+  <text x="476" y="234" font-family="monospace" font-size="12" fill="#6ee7b7">DB_HOST=sam-mysql-1</text>
+  <text x="476" y="250" font-family="sans-serif" font-size="10" fill="#34d399">이것이 실제 적용됨</text>
+  <!-- 체크 마크 -->
+  <g transform="translate(730, 230)">
+    <circle r="12" fill="#34d399" opacity="0.2"/>
+    <polyline points="-6,0 -2,5 7,-5" fill="none" stroke="#34d399" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+  </g>
+
+  <!-- 결과 -->
+  <rect x="460" y="276" width="300" height="52" rx="8" fill="#0d2d1f" stroke="#6ee7b7" stroke-width="1"/>
+  <text x="476" y="296" font-family="sans-serif" font-size="11" fill="#6ee7b7">컨테이너 내부 실제 값</text>
+  <text x="476" y="316" font-family="monospace" font-size="13" fill="#6ee7b7" font-weight="bold">DB_HOST = sam-mysql-1</text>
+
+  <!-- 화살표: docker-compose → 결과 -->
+  <line x1="610" y1="258" x2="610" y2="272" stroke="#34d399" stroke-width="1.5" marker-end="url(#arrowDown4)"/>
+
+  <!-- 하단 캡션 -->
+  <rect x="170" y="440" width="460" height="36" rx="8" fill="#34d399" opacity="0.08"/>
+  <text x="400" y="464" text-anchor="middle" font-family="sans-serif" font-size="16" fill="#e2e8f0">Docker 환경 변수가 .env보다 우선한다</text>
+</svg>
\ No newline at end of file
diff --git a/public/images/academy/env-management/5.svg b/public/images/academy/env-management/5.svg
new file mode 100644
index 00000000..9bc1a718
--- /dev/null
+++ b/public/images/academy/env-management/5.svg
@@ -0,0 +1,165 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500">
+  <defs>
+    <linearGradient id="bg5" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#0d2d1f"/>
+      <stop offset="100%" stop-color="#0f172a"/>
+    </linearGradient>
+    <filter id="glow5">
+      <feGaussianBlur stdDeviation="2" result="blur"/>
+      <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+    </filter>
+  </defs>
+
+  <!-- 배경 -->
+  <rect width="800" height="500" fill="url(#bg5)"/>
+
+  <!-- 상단 제목 -->
+  <text x="400" y="36" text-anchor="middle" font-family="sans-serif" font-size="20" font-weight="bold" fill="#e2e8f0">양쪽이 같아야 하는 변수</text>
+
+  <!-- 자물쇠 아이콘 (중앙 상단) -->
+  <g transform="translate(400, 72)">
+    <!-- 자물쇠 고리 -->
+    <path d="M-10,-12 Q-10,-24 0,-24 Q10,-24 10,-12" fill="none" stroke="#34d399" stroke-width="2.5" stroke-linecap="round"/>
+    <!-- 자물쇠 몸체 -->
+    <rect x="-14" y="-12" width="28" height="22" rx="4" fill="#34d399" opacity="0.2" stroke="#34d399" stroke-width="2"/>
+    <!-- 열쇠 구멍 -->
+    <circle cx="0" cy="-2" r="3" fill="#0d2d1f"/>
+    <rect x="-1.5" y="0" width="3" height="6" rx="1" fill="#0d2d1f"/>
+  </g>
+
+  <!-- === MNG .env 박스 (왼쪽) === -->
+  <rect x="30" y="110" width="250" height="350" rx="14" fill="#0d2d1f" stroke="#34d399" stroke-width="2"/>
+  <rect x="30" y="110" width="250" height="38" rx="14" fill="#34d399" opacity="0.15"/>
+  <rect x="30" y="136" width="250" height="12" fill="#34d399" opacity="0.15"/>
+  <text x="155" y="136" text-anchor="middle" font-family="monospace" font-size="15" font-weight="bold" fill="#34d399">MNG .env</text>
+
+  <!-- MNG 변수 목록 -->
+  <!-- INTERNAL_EXCHANGE_SECRET (빨강 - 가장 중요) -->
+  <rect x="44" y="160" width="222" height="28" rx="6" fill="#f87171" opacity="0.08" stroke="#f87171" stroke-width="1"/>
+  <text x="54" y="179" font-family="monospace" font-size="9.5" fill="#f87171" font-weight="bold">INTERNAL_EXCHANGE_SECRET</text>
+  <!-- 중요 뱃지 -->
+  <rect x="218" y="164" width="42" height="16" rx="4" fill="#f87171" opacity="0.25"/>
+  <text x="239" y="176" text-anchor="middle" font-family="sans-serif" font-size="8" fill="#f87171" font-weight="bold">필수</text>
+
+  <!-- GEMINI_API_KEY (보라) -->
+  <rect x="44" y="198" width="222" height="28" rx="6" fill="#a78bfa" opacity="0.08" stroke="#a78bfa" stroke-width="1"/>
+  <text x="54" y="217" font-family="monospace" font-size="9.5" fill="#a78bfa">GEMINI_API_KEY</text>
+
+  <!-- GEMINI_MODEL (보라) -->
+  <rect x="44" y="236" width="222" height="28" rx="6" fill="#a78bfa" opacity="0.08" stroke="#a78bfa" stroke-width="1"/>
+  <text x="54" y="255" font-family="monospace" font-size="9.5" fill="#a78bfa">GEMINI_MODEL</text>
+
+  <!-- VERTEX_AI_PROJECT_ID (보라) -->
+  <rect x="44" y="274" width="222" height="28" rx="6" fill="#a78bfa" opacity="0.08" stroke="#a78bfa" stroke-width="1"/>
+  <text x="54" y="293" font-family="monospace" font-size="9.5" fill="#a78bfa">VERTEX_AI_PROJECT_ID</text>
+
+  <!-- GOOGLE_STORAGE_BUCKET (보라) -->
+  <rect x="44" y="312" width="222" height="28" rx="6" fill="#a78bfa" opacity="0.08" stroke="#a78bfa" stroke-width="1"/>
+  <text x="54" y="331" font-family="monospace" font-size="9.5" fill="#a78bfa">GOOGLE_STORAGE_BUCKET</text>
+
+  <!-- DB_HOST (amber) -->
+  <rect x="44" y="350" width="222" height="28" rx="6" fill="#fbbf24" opacity="0.08" stroke="#fbbf24" stroke-width="1"/>
+  <text x="54" y="369" font-family="monospace" font-size="9.5" fill="#fbbf24">DB_HOST</text>
+
+  <!-- DB_DATABASE (amber) -->
+  <rect x="44" y="388" width="222" height="28" rx="6" fill="#fbbf24" opacity="0.08" stroke="#fbbf24" stroke-width="1"/>
+  <text x="54" y="407" font-family="monospace" font-size="9.5" fill="#fbbf24">DB_DATABASE</text>
+
+  <!-- === API .env 박스 (오른쪽) === -->
+  <rect x="520" y="110" width="250" height="350" rx="14" fill="#0d2d1f" stroke="#34d399" stroke-width="2"/>
+  <rect x="520" y="110" width="250" height="38" rx="14" fill="#34d399" opacity="0.15"/>
+  <rect x="520" y="136" width="250" height="12" fill="#34d399" opacity="0.15"/>
+  <text x="645" y="136" text-anchor="middle" font-family="monospace" font-size="15" font-weight="bold" fill="#34d399">API .env</text>
+
+  <!-- API 변수 목록 -->
+  <!-- INTERNAL_EXCHANGE_SECRET (빨강) -->
+  <rect x="534" y="160" width="222" height="28" rx="6" fill="#f87171" opacity="0.08" stroke="#f87171" stroke-width="1"/>
+  <text x="544" y="179" font-family="monospace" font-size="9.5" fill="#f87171" font-weight="bold">INTERNAL_EXCHANGE_SECRET</text>
+  <rect x="708" y="164" width="42" height="16" rx="4" fill="#f87171" opacity="0.25"/>
+  <text x="729" y="176" text-anchor="middle" font-family="sans-serif" font-size="8" fill="#f87171" font-weight="bold">필수</text>
+
+  <!-- GEMINI_API_KEY (보라) -->
+  <rect x="534" y="198" width="222" height="28" rx="6" fill="#a78bfa" opacity="0.08" stroke="#a78bfa" stroke-width="1"/>
+  <text x="544" y="217" font-family="monospace" font-size="9.5" fill="#a78bfa">GEMINI_API_KEY</text>
+
+  <!-- GEMINI_MODEL (보라) -->
+  <rect x="534" y="236" width="222" height="28" rx="6" fill="#a78bfa" opacity="0.08" stroke="#a78bfa" stroke-width="1"/>
+  <text x="544" y="255" font-family="monospace" font-size="9.5" fill="#a78bfa">GEMINI_MODEL</text>
+
+  <!-- VERTEX_AI_PROJECT_ID (보라) -->
+  <rect x="534" y="274" width="222" height="28" rx="6" fill="#a78bfa" opacity="0.08" stroke="#a78bfa" stroke-width="1"/>
+  <text x="544" y="293" font-family="monospace" font-size="9.5" fill="#a78bfa">VERTEX_AI_PROJECT_ID</text>
+
+  <!-- GOOGLE_STORAGE_BUCKET (보라) -->
+  <rect x="534" y="312" width="222" height="28" rx="6" fill="#a78bfa" opacity="0.08" stroke="#a78bfa" stroke-width="1"/>
+  <text x="544" y="331" font-family="monospace" font-size="9.5" fill="#a78bfa">GOOGLE_STORAGE_BUCKET</text>
+
+  <!-- DB_HOST (amber) -->
+  <rect x="534" y="350" width="222" height="28" rx="6" fill="#fbbf24" opacity="0.08" stroke="#fbbf24" stroke-width="1"/>
+  <text x="544" y="369" font-family="monospace" font-size="9.5" fill="#fbbf24">DB_HOST</text>
+
+  <!-- DB_DATABASE (amber) -->
+  <rect x="534" y="388" width="222" height="28" rx="6" fill="#fbbf24" opacity="0.08" stroke="#fbbf24" stroke-width="1"/>
+  <text x="544" y="407" font-family="monospace" font-size="9.5" fill="#fbbf24">DB_DATABASE</text>
+
+  <!-- === 중앙 연결선들 === -->
+
+  <!-- INTERNAL_EXCHANGE_SECRET 연결 (빨강, 굵게) -->
+  <line x1="266" y1="174" x2="534" y2="174" stroke="#f87171" stroke-width="2.5" stroke-dasharray="6,3" filter="url(#glow5)"/>
+  <text x="400" y="170" text-anchor="middle" font-family="sans-serif" font-size="8" fill="#f87171" font-weight="bold">SYNC</text>
+
+  <!-- GEMINI_API_KEY 연결 (보라) -->
+  <line x1="266" y1="212" x2="534" y2="212" stroke="#a78bfa" stroke-width="1.5" stroke-dasharray="4,4"/>
+
+  <!-- GEMINI_MODEL 연결 (보라) -->
+  <line x1="266" y1="250" x2="534" y2="250" stroke="#a78bfa" stroke-width="1.5" stroke-dasharray="4,4"/>
+
+  <!-- VERTEX_AI_PROJECT_ID 연결 (보라) -->
+  <line x1="266" y1="288" x2="534" y2="288" stroke="#a78bfa" stroke-width="1.5" stroke-dasharray="4,4"/>
+
+  <!-- GOOGLE_STORAGE_BUCKET 연결 (보라) -->
+  <line x1="266" y1="326" x2="534" y2="326" stroke="#a78bfa" stroke-width="1.5" stroke-dasharray="4,4"/>
+
+  <!-- DB_HOST 연결 (amber) -->
+  <line x1="266" y1="364" x2="534" y2="364" stroke="#fbbf24" stroke-width="1.5" stroke-dasharray="4,4"/>
+
+  <!-- DB_DATABASE 연결 (amber) -->
+  <line x1="266" y1="402" x2="534" y2="402" stroke="#fbbf24" stroke-width="1.5" stroke-dasharray="4,4"/>
+
+  <!-- 중앙 동기화 아이콘들 -->
+  <!-- 양방향 화살표 아이콘 (각 연결선 중앙) -->
+  <g transform="translate(400, 212)">
+    <circle r="8" fill="#0d2d1f" stroke="#a78bfa" stroke-width="1"/>
+    <text x="0" y="4" text-anchor="middle" font-family="sans-serif" font-size="9" fill="#a78bfa">=</text>
+  </g>
+  <g transform="translate(400, 250)">
+    <circle r="8" fill="#0d2d1f" stroke="#a78bfa" stroke-width="1"/>
+    <text x="0" y="4" text-anchor="middle" font-family="sans-serif" font-size="9" fill="#a78bfa">=</text>
+  </g>
+  <g transform="translate(400, 288)">
+    <circle r="8" fill="#0d2d1f" stroke="#a78bfa" stroke-width="1"/>
+    <text x="0" y="4" text-anchor="middle" font-family="sans-serif" font-size="9" fill="#a78bfa">=</text>
+  </g>
+  <g transform="translate(400, 326)">
+    <circle r="8" fill="#0d2d1f" stroke="#a78bfa" stroke-width="1"/>
+    <text x="0" y="4" text-anchor="middle" font-family="sans-serif" font-size="9" fill="#a78bfa">=</text>
+  </g>
+  <g transform="translate(400, 364)">
+    <circle r="8" fill="#0d2d1f" stroke="#fbbf24" stroke-width="1"/>
+    <text x="0" y="4" text-anchor="middle" font-family="sans-serif" font-size="9" fill="#fbbf24">=</text>
+  </g>
+  <g transform="translate(400, 402)">
+    <circle r="8" fill="#0d2d1f" stroke="#fbbf24" stroke-width="1"/>
+    <text x="0" y="4" text-anchor="middle" font-family="sans-serif" font-size="9" fill="#fbbf24">=</text>
+  </g>
+
+  <!-- 범례 (하단) -->
+  <g transform="translate(200, 470)">
+    <rect x="0" y="-10" width="14" height="4" rx="1" fill="#f87171"/>
+    <text x="20" y="-4" font-family="sans-serif" font-size="10" fill="#94a3b8">보안 필수</text>
+    <rect x="100" y="-10" width="14" height="4" rx="1" fill="#a78bfa"/>
+    <text x="120" y="-4" font-family="sans-serif" font-size="10" fill="#94a3b8">AI / 스토리지</text>
+    <rect x="230" y="-10" width="14" height="4" rx="1" fill="#fbbf24"/>
+    <text x="250" y="-4" font-family="sans-serif" font-size="10" fill="#94a3b8">데이터베이스</text>
+  </g>
+</svg>
\ No newline at end of file