SamProject/sam-manage
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: [academy] 환경변수 관리 백과사전 SVG 일러스트 5종 추가

Browse Source 
- 1.svg: 열쇠 고리 비유 Hero 이미지
- 2.svg: .env 역할 개념도 (App → Services 흐름)
- 3.svg: 프로젝트별 .env 구조 (MNG/API/React)
- 4.svg: Docker Override 우선순위 다이어그램
- 5.svg: MNG ↔ API 동기화 필수 변수 맵
This commit is contained in:
김보곤
2026-02-23 12:42:13 +09:00
parent d701722a48
commit 7ac2b99234
5 changed files with 556 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
public/images/academy/env-management/1.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

113
public/images/academy/env-management/2.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

111
public/images/academy/env-management/3.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 7.5 KiB

88
public/images/academy/env-management/4.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

165
public/images/academy/env-management/5.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 9.4 KiB