1<!DOCTYPE html> 2<html lang="ko"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>AI Info</title> 7 8 9 <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css" /> 10 11 12
12<script src="https://cdn.tailwindcss.com"></script>
12 13
13<script> 14 tailwind.config = { 15 darkMode: 'class', 16 theme: { 17 extend: { 18 fontFamily: { 19 sans: ['Pretendard', '-apple-system', 'BlinkMacSystemFont', 'system-ui', 'Roboto', 'sans-serif'], 20 }, 21 colors: { 22 brand: { 23 50: '#eff6ff', 24 500: '#3b82f6', 25 600: '#2563eb', 26 700: '#1d4ed8', 27 } 28 } 29 } 30 } 31 } 32 </script>
32 33 34 35 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" /> 36 37 38
38<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
38 39 40 41 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" /> 42
42<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js"></script>
42 43
43<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js"></script>
43 44 45 46 <link rel="stylesheet" href="/assets/style.css" /> 47 48 49 50 <style> 51 :root { 52 53 --color-border-subtle: #e2e8f0; 54 55 --color-danger: #b91c1c; 56 57 --color-info: #0369a1; 58 59 --color-link: #1d4ed8; 60 61 --color-neutral: #ffffff; 62 63 --color-on-neutral: #0f172a; 64 65 --color-primary: #1d4ed8; 66 67 --color-primary-hover: #1e40af; 68 69 --color-success: #15803d; 70 71 --color-surface: #ffffff; 72 73 --color-surface-elevated: #f1f5f9; 74 75 --color-text-body: #334155; 76 77 --color-text-muted: #64748b; 78 79 --color-text-primary: #0f172a; 80 81 --color-warning: #b45309; 82 83 84 --rounded-full: 9999px; 85 86 --rounded-lg: 12px; 87 88 --rounded-md: 8px; 89 90 --rounded-sm: 4px; 91 92 93 --spacing-lg: 24px; 94 95 --spacing-md: 16px; 96 97 --spacing-sm: 8px; 98 99 --spacing-xl: 32px; 100 101 --spacing-xs: 4px; 102 103 } 104 </style> 105 106 107 108</head> 109<body class="bg-slate-50 text-slate-900 min-h-screen flex flex-col font-sans antialiased selection:bg-blue-600 selection:text-white"> 110 111 112 <header class="sticky top-0 z-40 w-full border-b border-slate-200 bg-white/80 backdrop-blur-md"> 113 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between"> 114 <div class="flex items-center gap-4"> 115 <a href="/" class="flex items-center gap-2 group"> 116 <div class="w-9 h-9 rounded-lg bg-blue-600 flex items-center justify-center text-white font-bold text-lg shadow-md shadow-blue-500/20 group-hover:scale-105 transition-transform"> 117 AI 118 </div> 119 <div class="flex flex-col"> 120 <span class="text-lg font-bold tracking-tight text-slate-900 group-hover:text-blue-600 transition-colors"> 121 AI Info 122 </span> 123 <span class="text-xs text-slate-500 hidden sm:inline"> 124 Enterprise AI & Software Engineering Tech Blog 125 </span> 126 </div> 127 </a> 128 </div> 129 130 <nav class="flex items-center gap-2"> 131 <a href="/about/" class="px-3.5 py-1.5 text-sm font-medium transition-colors bg-blue-50 text-blue-700 border border-blue-200 rounded-lg font-semibold"> 132 About 133 </a> 134 </nav> 135 </div> 136 </header> 137 138 139 <div class="flex-1 max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8"> 140 141<div class="max-w-5xl mx-auto py-4 space-y-12"> 142 143 144 <section class="relative overflow-hidden rounded-3xl bg-gradient-to-b from-white via-slate-50 to-slate-100 border border-slate-200 p-8 sm:p-10 shadow-xl backdrop-blur-sm dark:from-slate-900/90 dark:via-slate-900/60 dark:to-slate-950/80 dark:border-slate-800"> 145 <div class="absolute -top-24 -right-24 w-96 h-96 bg-blue-600/10 rounded-full blur-3xl pointer-events-none"></div> 146 <div class="absolute -bottom-24 -left-24 w-96 h-96 bg-indigo-600/10 rounded-full blur-3xl pointer-events-none"></div> 147 148 <div class="relative z-10 space-y-6"> 149 150 <div class="flex flex-wrap items-center gap-2"> 151 <span class="px-3 py-1 text-xs font-semibold rounded-full bg-blue-50 text-blue-700 border border-blue-200 dark:bg-blue-500/10 dark:text-blue-400 dark:border-blue-500/30"> 152 Technical Head of Product 153 </span> 154 <span class="px-3 py-1 text-xs font-semibold rounded-full bg-indigo-50 text-indigo-700 border border-indigo-200 dark:bg-indigo-500/10 dark:text-indigo-400 dark:border-indigo-500/30"> 155 AI Solutions Architect 156 </span> 157 <span class="px-3 py-1 text-xs font-semibold rounded-full bg-emerald-50 text-emerald-700 border border-emerald-200 font-mono dark:bg-emerald-500/10 dark:text-emerald-400 dark:border-emerald-500/30"> 158 25+ Years Experience 159 </span> 160 </div> 161 162 163 <div> 164 <h1 class="text-3xl sm:text-5xl font-extrabold text-slate-900 tracking-tight leading-tight dark:text-white"> 165 ì¤ìë°° <span class="text-xl sm:text-2xl font-medium text-slate-500 ml-2 dark:text-slate-400">Yun Sangbae</span> 166 </h1> 167 <p class="text-sm sm:text-base text-slate-600 mt-2 font-mono dark:text-slate-400"> 168 AXP Lead · AI Agent Orchestrator · Cloud/DevOps Architect · Hands-on Prototyper 169 </p> 170 </div> 171 172 173 <div class="relative rounded-2xl bg-white/90 border-l-4 border-blue-600 p-5 sm:p-6 text-slate-800 text-sm sm:text-base leading-relaxed font-medium shadow-sm dark:bg-slate-950/70 dark:border-blue-500 dark:text-slate-200"> 174 “25ë + ìíí¸ì¨ì´ ìì§ëì´ë§ ë° í´ë¼ì°ë/DevOps ê¹ì´ë¥¼ ë°íì¼ë¡, AI íí°/ìì´ì í¸ ì¤ì¼ì¤í¸ë ì´ì 기ë°ì ì´ê°ì¸í íìµ ê²½í íë«í¼(AXP) ë¹ì ì 0 to 1 íë¡ëí¸ë¡ ë«ì´ë´ê³ , 1ì¸ ì´ê³ ì Hands-on íë¡í íì´íë
174¶í° 10ì¸+ 기ì ì¡°ì§ ë¦¬ë© ë° B2B AX ë¹ì¦ëì¤ ì°ê³ê¹ì§ ì´ê´íë Technical Head of Productì ëë¤.” 175 </div> 176 177 178 <div class="flex flex-wrap items-center gap-3 pt-2"> 179 <a href="mailto:[email protected]" class="inline-flex items-center gap-2 px-4 py-2 text-xs font-semibold rounded-xl bg-white hover:bg-slate-50 text-slate-700 border border-slate-200 shadow-sm transition-colors dark:bg-slate-800 dark:hover:bg-slate-700 dark:text-slate-200 dark:border-slate-700"> 180 <svg class="w-4 h-4 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg> 181 [email protected] 182 </a> 183 <a href="https://github.com/joincdream" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 px-4 py-2 text-xs font-semibold rounded-xl bg-white hover:bg-slate-50 text-slate-700 border border-slate-200 shadow-sm transition-colors dark:bg-slate-800 dark:hover:bg-slate-700 dark:text-slate-200 dark:border-slate-700"> 184 <svg class="w-4 h-4 text-slate-700 dark:text-slate-300" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.53 1.032 1.53 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/></svg> 185 GitHub 186 </a> 187 <a href="https://linkedin.com/in/yundream" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 px-4 py-2 text-xs font-semibold rounded-xl bg-white hover:bg-slate-50 text-slate-700 border border-slate-200 shadow-sm transition-colors dark:bg-slate-800 dark:hover:bg-slate-700 dark:text-slate-200 dark:border-slate-700"> 188 <svg class="w-4 h-4 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg> 189 LinkedIn 190 </a> 191 <a href="https://www.joinc.co.kr" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 px-4 py-2 text-xs font-semibold rounded-xl bg-blue-50 hover:bg-blue-100 text-blue-700 border border-blue-200 transition-colors dark:bg-blue-950/80 dark:hover:bg-blue-900 dark:text-blue-300 dark:border-blue-800/60"> 192 Tech Blog 193 </a> 194 </div> 195 </div> 196 </section> 197 198 199 <section class="grid grid-cols-2 lg:grid-cols-4 gap-4"> 200 <div class="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm dark:bg-slate-900/60 dark:border-slate-800/80"> 201 <div class="text-3xl sm:text-4xl font-extrabold text-blue-600 font-mono tracking-tight dark:text-blue-400">25+</div> 202 <div class="text-sm font-semibold text-slate-900 mt-1 dark:text-slate-200">Years Engineering</div> 203 <div class="text-xs text-slate-500 mt-1 leading-snug dark:text-slate-400">C/C++, í´ë¼ì°ë/DevOpsë¶í° ìµì ìì±í AI ìì´ì í¸ê¹ì§</div> 204 </div> 205 <div class="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm dark:bg-slate-900/60 dark:border-slate-800/80"> 206 <div class="text-3xl sm:text-4xl font-extrabold text-indigo-600 font-mono tracking-tight dark:text-indigo-400">0 to 1</div> 207 <div class="text-sm font-semibold text-slate-900 mt-1 dark:text-slate-200">AXP Product Lead</div> 208 <div class="text-xs text-slate-500 mt-1 leading-snug dark:text-slate-400">AI íí° & ìì´ì í¸ ì¤ì¼ì¤í¸ë ì´ì ê¸°ë° íìµ ê²½í ì¤ê³</div> 209 </div> 210 <div class="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm dark:bg-slate-900/60 dark:border-slate-800/80"> 211 <div class="text-3xl sm:text-4xl font-extrabold text-emerald-600 font-mono tracking-tight dark:text-emerald-400">10+</div> 212 <div class="text-sm font-semibold text-slate-900 mt-1 dark:text-slate-200">Team Leadership</div> 213 <div class="text-xs text-slate-500 mt-1 leading-snug dark:text-slate-400">1ì¸ìì 7ì¸ AI ì¡°ì§ ë¹ë© ë° 10ì¸+ ê°ë°ì¤/DevOps ì´ê´</div> 214 </div> 215 <div class="bg-white border border-slate-200 rounded-2xl p-5 shadow-sm dark:bg-slate-900/60 dark:border-slate-800/80"> 216 <div class="text-3xl sm:text-4xl font-extrabold text-amber-600 font-mono tracking-tight dark:text-amber-400">CES Award</div> 217 <div class="text-sm font-semibold text-slate-900 mt-1 dark:text-slate-200">Global Recognition</div> 218 <div class="text-xs text-slate-500 mt-1 leading-snug dark:text-slate-400">LG íì± ëíí ì¤ë§í¸í ê¸ë¡ë² Choice Award 2ê° ë¶ë¬¸ ìì</div> 219 </div> 220 </section> 221 222 223 <section class="space-y-4"> 224 <h2 class="text-xl font-bold text-slate-900 tracking-tight flex items-center gap-2 dark:text-white">
225 <span class="text-blue-600 dark:text-blue-400">ð¡</span> Professional Summary 226 </h2> 227 <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> 228 <div class="bg-white border border-slate-200 rounded-2xl p-6 space-y-2 shadow-sm dark:bg-slate-900/50 dark:border-slate-800/80"> 229 <h3 class="text-base font-bold text-slate-900 flex items-center gap-2 dark:text-white"> 230 <span class="w-2 h-2 rounded-full bg-blue-600 dark:bg-blue-500"></span> 231 AXP 0 to 1 ì´ê´ & ì´ê°ì¸í íìµ ê²½í ì¤ê³ 232 </h3> 233 <p class="text-xs sm:text-sm text-slate-600 leading-relaxed dark:text-slate-300"> 234 ë¨ì LMS를 ëì´ ë©í° AI ìì´ì í¸ ì¤ì¼ì¤í¸ë ì´ì ë° ì ì íìµ ë°ì´í° ë¶ì ìì§ì ì íì ì´ìíì¬ "ì¬ëë¤ì´ ë°°ì°ë ë°©ìì ì¬ì¤ê³"í©ëë¤. ì구ì¬í ì ìì ì¬ì©ì ì¬ì (User Journey) ì¤ê³ë¶í° AI íì´íë¼ì¸ 구ì¶, ì ì ë¡ê·¸ ë¶ì 기ë°ì 몰ì /ì±ì¥ í¼ëë°± 룹(Feedback Loop) ì¤ê³ë¥¼ ì´ê´í©ëë¤. 235 </p> 236 </div> 237 238 <div class="bg-white border border-slate-200 rounded-2xl p-6 space-y-2 shadow-sm dark:bg-slate-900/50 dark:border-slate-800/80"> 239 <h3 class="text-base font-bold text-slate-900 flex items-center gap-2 dark:text-white"> 240 <span class="w-2 h-2 rounded-full bg-indigo-600 dark:bg-indigo-500"></span> 241 1ì¸ AI ì´ê³ ì Hands-on íë¡í íì´í 242 </h3> 243 <p class="text-xs sm:text-sm text-slate-600 leading-relaxed dark:text-slate-300"> 244 ì¤íìì¤ <strong>HarnessHub</strong> íë¡ì í¸ë¥¼ íµí´ SDLC ê¸°ë° ìì´ì í¸ ì ì´ ë° Visual Workflow DAG ëìë³´ë(Go/Vue 3/TypeScript/Docker)를 1ì¸ íë¡í íì´íì¼ë¡ 0 to 1 ì§ì 구ííë©° AI í´ ê¸°ë°ì ìëì ì¸ ë리ë²ë¦¬ ìëì ì¦ëª íìµëë¤. 245 </p> 246 </div> 247 248 <div class="bg-white border border-slate-200 rounded-2xl p-6 space-y-2 shadow-sm dark:bg-slate-900/50 dark:border-slate-800/80"> 249 <h3 class="text-base font-bold text-slate-900 flex items-center gap-2 dark:text-white"> 250 <span class="w-2 h-2 rounded-full bg-emerald-600 dark:bg-emerald-500"></span> 251 ìì±í AI ì루ì PO & 10ì¸+ 기ì ì¡°ì§ ë¦¬ë© 252 </h3> 253 <p class="text-xs sm:text-sm text-slate-600 leading-relaxed dark:text-slate-300"> 254 CloITìì 1ì¸ì¼ë¡ ììí´ 7ì¸ ê·ëª¨ì AI ì ë´ ì¡°ì§ì ì§ì ë¹ë©íê³ , 미ëì´ ìì± íë«í¼ì POì´ì ë©ì¸ ìí¤í í¸ë¡ Artifact Centric Workflow ì¤ì¬ì íì¤í 구íê³¼ 릴리ì¦ë¥¼ ììíìµëë¤. 미ëì ê°ë°ì¤ì¥, ííìëª PMì í¬í¨í´ 10ì¸ ì´ì ì¡°ì§ ê´ë¦¬ ìëì ê°ì¶ê³ ììµëë¤. 255 </p> 256 </div> 257 258 <div class="bg-white border border-slate-200 rounded-2xl p-6 space-y-2 shadow-sm dark:bg-slate-900/50 dark:border-slate-800/80"> 259 <h3 class="text-base font-bold text-slate-900 flex items-center gap-2 dark:text-white"> 260 <span class="w-2 h-2 rounded-full bg-amber-600 dark:bg-amber-500"></span> 261 ê²½ìì§ ì°ê³ B2B AX ë¹ì¦ëì¤ ì¶ì§ & 기ì -ì¬ì íµì 262 </h3> 263 <p class="text-xs sm:text-sm text-slate-600 leading-relaxed dark:text-slate-300"> 264 ìì ê±´ì ë기ì /기ê´(ííìëª , í¼ìì¤, êµë¯¼ì°ê¸ ë±) Presales ë° PoC를 주ëíì¬ ë¹ì¦ëì¤ ê°ì¹ë¥¼ ì ëì ROIë¡ ì ì¦íìµëë¤. ê²½ìì§ì AXP ë¹ì¦ëì¤ ëª¨ë¸(BM)ì ê°ë°ì§ì´ ì´í´í ì ìë íì¤ì 기ì ë¡ëë§µì¼ë¡ ì ííí©ëë¤. 265 </p> 266 </div> 267 </div> 268 </section> 269 270 271 <section class="space-y-4"> 272 <h2 class="text-xl font-bold text-slate-900 tracking-tight flex items-center gap-2 dark:text-white"> 273 <span class="text-indigo-600 dark:text-indigo-400">ð ï¸</span> Core Competencies 274 </h2> 275 <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> 276 277 278 <div class="bg-white border border-slate-200 rounded-2xl p-5 space-y-3 shadow-sm dark:bg-slate-900/50 dark:border-slate-800/80"> 279 <h3 class="text-sm font-semibold text-slate-900 uppercase tracking-wider flex items-center justify-between dark:text-slate-200">
280 <span>Product & AI Architecture</span> 281 <span class="text-xs text-blue-600 font-mono dark:text-blue-400">0 to 1 PO</span> 282 </h3> 283 <div class="flex flex-wrap gap-1.5"> 284 <span class="px-2.5 py-1 text-xs rounded-lg bg-blue-50 text-blue-700 border border-blue-200 dark:bg-blue-950/60 dark:text-blue-300 dark:border-blue-800/40">AXP ë¹ì ì립</span> 285 <span class="px-2.5 py-1 text-xs rounded-lg bg-blue-50 text-blue-700 border border-blue-200 dark:bg-blue-950/60 dark:text-blue-300 dark:border-blue-800/40">User Journey ì¤ê³</span> 286 <span class="px-2.5 py-1 text-xs rounded-lg bg-blue-50 text-blue-700 border border-blue-200 dark:bg-blue-950/60 dark:text-blue-300 dark:border-blue-800/40">AI Agent Orchestration</span> 287 <span class="px-2.5 py-1 text-xs rounded-lg bg-blue-50 text-blue-700 border border-blue-200 dark:bg-blue-950/60 dark:text-blue-300 dark:border-blue-800/40">RAG íì´ë¸ë¦¬ë ìì¸</span> 288 <span class="px-2.5 py-1 text-xs rounded-lg bg-blue-50 text-blue-700 border border-blue-200 dark:bg-blue-950/60 dark:text-blue-300 dark:border-blue-800/40">Knowledge Graph</span> 289 <span class="px-2.5 py-1 text-xs rounded-lg bg-blue-50 text-blue-700 border border-blue-200 dark:bg-blue-950/60 dark:text-blue-300 dark:border-blue-800/40">Artifact Centric UI/UX</span> 290 </div> 291 </div> 292 293 294 <div class="bg-white border border-slate-200 rounded-2xl p-5 space-y-3 shadow-sm dark:bg-slate-900/50 dark:border-slate-800/80"> 295 <h3 class="text-sm font-semibold text-slate-900 uppercase tracking-wider flex items-center justify-between dark:text-slate-200"> 296 <span>Tech Stack & Hands-on</span> 297 <span class="text-xs text-indigo-600 font-mono dark:text-indigo-400">Full-Stack</span> 298 </h3> 299 <div class="flex flex-wrap gap-1.5"> 300 <span class="px-2.5 py-1 text-xs rounded-lg bg-indigo-50 text-indigo-700 border border-indigo-200 dark:bg-indigo-950/60 dark:text-indigo-300 dark:border-indigo-800/40">Go (Golang)</span> 301 <span class="px-2.5 py-1 text-xs rounded-lg bg-indigo-50 text-indigo-700 border border-indigo-200 dark:bg-indigo-950/60 dark:text-indigo-300 dark:border-indigo-800/40">Python</span> 302 <span class="px-2.5 py-1 text-xs rounded-lg bg-indigo-50 text-indigo-700 border border-indigo-200 dark:bg-indigo-950/60 dark:text-indigo-300 dark:border-indigo-800/40">TypeScript</span> 303 <span class="px-2.5 py-1 text-xs rounded-lg bg-indigo-50 text-indigo-700 border border-indigo-200 dark:bg-indigo-950/60 dark:text-indigo-300 dark:border-indigo-800/40">React / Next.js</span> 304 <span class="px-2.5 py-1 text-xs rounded-lg bg-indigo-50 text-indigo-700 border border-indigo-200 dark:bg-indigo-950/60 dark:text-indigo-300 dark:border-indigo-800/40">FastAPI</span> 305 <span class="px-2.5 py-1 text-xs rounded-lg bg-indigo-50 text-indigo-700 border border-indigo-200 dark:bg-indigo-950/60 dark:text-indigo-300 dark:border-indigo-800/40">OpenAPI 3.0</span> 306 <span class="px-2.5 py-1 text-xs rounded-lg bg-indigo-50 text-indigo-700 border border-indigo-200 dark:bg-indigo-950/60 dark:text-indigo-300 dark:border-indigo-800/40">Tailwind CSS</span> 307 </div> 308 </div> 309 310 311 <div class="bg-white border border-slate-200 rounded-2xl p-5 space-y-3 shadow-sm dark:bg-slate-900/50 dark:border-slate-800/80"> 312 <h3 class="text-sm font-semibold text-slate-900 uppercase tracking-wider flex items-center justify-between dark:text-slate-200"> 313 <span>Cloud & MLOps / DevOps</span> 314 <span class="text-xs text-emerald-600 font-mono dark:text-emerald-400">Infrastructure</span> 315 </h3> 316 <div class="flex flex-wrap gap-1.5"> 317 <span class="px-2.5 py-1 text-xs rounded-lg bg-emerald-50 text-emerald-700 border border-emerald-200 dark:bg-emerald-950/60 dark:text-emerald-300 dark:border-emerald-800/40">AWS</span> 318 <span class="px-2.5 py-1 text-xs rounded-lg bg-emerald-50 text-emerald-700 border border-emerald-200 dark:bg-emerald-950/60 dark:text-emerald-300 dark:border-emerald-800/40">GCP</span>
319 <span class="px-2.5 py-1 text-xs rounded-lg bg-emerald-50 text-emerald-700 border border-emerald-200 dark:bg-emerald-950/60 dark:text-emerald-300 dark:border-emerald-800/40">Docker</span> 320 <span class="px-2.5 py-1 text-xs rounded-lg bg-emerald-50 text-emerald-700 border border-emerald-200 dark:bg-emerald-950/60 dark:text-emerald-300 dark:border-emerald-800/40">Kubernetes</span> 321 <span class="px-2.5 py-1 text-xs rounded-lg bg-emerald-50 text-emerald-700 border border-emerald-200 dark:bg-emerald-950/60 dark:text-emerald-300 dark:border-emerald-800/40">Terraform (IaC)</span> 322 <span class="px-2.5 py-1 text-xs rounded-lg bg-emerald-50 text-emerald-700 border border-emerald-200 dark:bg-emerald-950/60 dark:text-emerald-300 dark:border-emerald-800/40">GitHub Actions</span> 323 <span class="px-2.5 py-1 text-xs rounded-lg bg-emerald-50 text-emerald-700 border border-emerald-200 dark:bg-emerald-950/60 dark:text-emerald-300 dark:border-emerald-800/40">Prometheus/Grafana</span> 324 </div> 325 </div> 326 327 328 <div class="bg-white border border-slate-200 rounded-2xl p-5 space-y-3 shadow-sm dark:bg-slate-900/50 dark:border-slate-800/80"> 329 <h3 class="text-sm font-semibold text-slate-900 uppercase tracking-wider flex items-center justify-between dark:text-slate-200"> 330 <span>Data, Analytics & Leadership</span> 331 <span class="text-xs text-amber-600 font-mono dark:text-amber-400">Impact</span> 332 </h3> 333 <div class="flex flex-wrap gap-1.5"> 334 <span class="px-2.5 py-1 text-xs rounded-lg bg-amber-50 text-amber-700 border border-amber-200 dark:bg-amber-950/60 dark:text-amber-300 dark:border-amber-800/40">PostgreSQL / pgvector</span> 335 <span class="px-2.5 py-1 text-xs rounded-lg bg-amber-50 text-amber-700 border border-amber-200 dark:bg-amber-950/60 dark:text-amber-300 dark:border-amber-800/40">Elasticsearch</span> 336 <span class="px-2.5 py-1 text-xs rounded-lg bg-amber-50 text-amber-700 border border-amber-200 dark:bg-amber-950/60 dark:text-amber-300 dark:border-amber-800/40">Kafka / ETL</span> 337 <span class="px-2.5 py-1 text-xs rounded-lg bg-amber-50 text-amber-700 border border-amber-200 dark:bg-amber-950/60 dark:text-amber-300 dark:border-amber-800/40">10ì¸+ ì¡°ì§ ë¦¬ë©</span> 338 <span class="px-2.5 py-1 text-xs rounded-lg bg-amber-50 text-amber-700 border border-amber-200 dark:bg-amber-950/60 dark:text-amber-300 dark:border-amber-800/40">B2B Presales / PoC</span> 339 <span class="px-2.5 py-1 text-xs rounded-lg bg-amber-50 text-amber-700 border border-amber-200 dark:bg-amber-950/60 dark:text-amber-300 dark:border-amber-800/40">SAFe Agile</span> 340 </div> 341 </div> 342 343 </div> 344 </section> 345 346 347 <section class="bg-gradient-to-r from-blue-50/60 via-white to-indigo-50/60 border border-blue-200 rounded-3xl p-6 sm:p-8 shadow-sm space-y-4 dark:from-slate-900/90 dark:via-blue-950/30 dark:to-slate-900/90 dark:border-blue-500/30"> 348 <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 pb-3 border-b border-slate-200 dark:border-slate-800"> 349 <div> 350 <span class="text-xs font-semibold text-blue-600 uppercase tracking-wider dark:text-blue-400">Featured Open-Source Project</span> 351 <h3 class="text-2xl font-extrabold text-slate-900 tracking-tight mt-1 dark:text-white"> 352 HarnessHub & create-harness-app 353 </h3> 354 </div> 355 <a href="https://github.com/joincdream/harness-hub" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 px-4 py-2 text-xs font-bold rounded-xl bg-blue-600 hover:bg-blue-500 text-white shadow-md shadow-blue-500/20 transition-all self-start sm:self-auto"> 356 <span>GitHub Repository</span> → 357 </a> 358 </div> 359 360 <p class="text-xs sm:text-sm text-slate-600 leading-relaxed dark:text-slate-300"> 361 AI ìì´ì í¸ì ë¹ê²°ì ì±(Non-determinism)ê³¼ 기ì ë¶ì±ë¥¼ íµì í기 ìí ì ì¸ì SDLC ì²ì¬ì§ ë°°í¬ ë ì§ì¤í¸ë¦¬ ë° CLI/ì¹ ì»¨í¸ë¡¤ íìì ëë¤. AI ì½ë© ë구를 íë¡ëì ìì¤ì ìì í ê°ëë ì¼ ìì ê°ëë ìí¤í ì²ë¥¼ 0 to 1 ì§ì ì¤ê³Â·êµ¬ííìµëë¤. 362 </p> 363 364 <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 pt-2 text-xs text-slate-600 dar
364k:text-slate-300"> 365 <div class="bg-white rounded-xl p-3 border border-slate-200 shadow-xs dark:bg-slate-900/80 dark:border-slate-800"> 366 <strong class="text-slate-900 block mb-1 dark:text-white">ð DAG Visualizer</strong> 367 Artifact ê¸°ë° ì¤í ë¨ê³ ë° íìµ/ê°ë° ìí¬íë¡ì° ìê°í 368 </div> 369 <div class="bg-white rounded-xl p-3 border border-slate-200 shadow-xs dark:bg-slate-900/80 dark:border-slate-800"> 370 <strong class="text-slate-900 block mb-1 dark:text-white">â¡ Go Native Full-Stack</strong> 371 Go REST API + Vue 3/TS ëìë³´ë 1ì¸ ì´ê³ ì íë¡í íì´í 372 </div> 373 <div class="bg-white rounded-xl p-3 border border-slate-200 shadow-xs dark:bg-slate-900/80 dark:border-slate-800"> 374 <strong class="text-slate-900 block mb-1 dark:text-white">ð¦ CLI Starter Kit</strong> 375 create-harness-app íµí ìì í AI íì ì²ì¬ì§ ë°°í¬ 376 </div> 377 </div> 378 </section> 379 380 381 <section class="space-y-6"> 382 <h2 class="text-xl font-bold text-slate-900 tracking-tight flex items-center gap-2 dark:text-white"> 383 <span class="text-emerald-600 dark:text-emerald-400">ð¼</span> Professional Experience 384 </h2> 385 386 <div class="relative border-l-2 border-slate-200 ml-4 sm:ml-6 pl-6 sm:pl-8 space-y-10 dark:border-slate-800"> 387 388 389 <div class="relative group"> 390 <div class="absolute -left-[31px] sm:-left-[39px] top-1.5 w-4 h-4 rounded-full bg-blue-600 border-4 border-slate-50 group-hover:scale-125 transition-transform shadow-md shadow-blue-500/50 dark:bg-blue-500 dark:border-slate-950"></div> 391 <div class="flex flex-wrap items-center justify-between gap-2 mb-1"> 392 <h3 class="text-lg font-bold text-slate-900 dark:text-white">CloIT (í´ë¡ì)</h3> 393 <span class="px-2.5 py-0.5 text-xs font-semibold rounded-full bg-blue-50 text-blue-700 border border-blue-200 font-mono dark:bg-blue-500/10 dark:text-blue-400 dark:border-blue-500/30"> 394 2024 395 </span> 396 </div> 397 <div class="text-xs font-medium text-slate-500 mb-3 dark:text-slate-400"> 398 Generative AI Solutions Architect / Tech Lead (AI ìë¹ì¤ íì¥) 399 </div> 400 <ul class="text-xs sm:text-sm text-slate-600 space-y-2 list-disc list-outside ml-4 leading-relaxed dark:text-slate-300"> 401 <li><strong>AI ì ë´ ì¡°ì§ ë¹ë© & PM</strong>: 1ì¸ì¼ë¡ ììí´ 7ì¸ ê·ëª¨ ì ë´ ì¡°ì§ êµ¬ì¶, í르ìë ë¶ìë¶í° íë¡ëì ë°°í¬ê¹ì§ ìëí¬ìë ì´ê´.</li> 402 <li><strong>ë§ì¼í ìì/ì´ë¯¸ì§ ìì± íë«í¼ (PO)</strong>: Artifact Centric Workflow ì¤ì¬ UI/UX ë° ë°±ìë(FastAPI/Go) API ì§ì ì¤ê³Â·ê°ë°.</li> 403 <li><strong>í¼ìì¤ AI DAM ìì¤í êµ¬ì¶ (Production)</strong>: VLM ê¸°ë° SKU ìë ë¼ë²¨ë§ ë° ì ì¬ë ê²ìì¼ë¡ ëì§í¸ ìì° ê´ë¦¬ ìëí.</li> 404 <li><strong>êµë´ ì ì½Â·ë°ì´ì¤ ì§ì£¼ì¬ RAG 구ì¶</strong>: íì´ë¸ë¦¬ë ìì¸(Hybrid Indexing) ë° ìë² ë© íëì¼ë¡ ì ë³´ íì ì íë 90% ì´ì ê·¹ëí.</li> 405 <li><strong>ì¨í¨ë¡ì§ ì§ì ê·¸ëí(Knowledge Graph) PoC 리ë©</strong>: êµë¯¼ì°ê¸ í¬ì ë¶ì ë° ê±´ì¤ ê·ì ëì RAG ìí¤í ì² ì¤ê³.</li> 406 <li><strong>ìì ê±´ì B2B AI Presales & PoC</strong>: 10ì¬ ê±´ ì´ìì ìí°íë¼ì´ì¦ ê³¼ì ìí¤í ì² ì´ê´ ë° 1ê°ì ë´ ê³ ì ë리ë²ë¦¬.</li> 407 </ul> 408 </div> 409 410 411 <div class="relative group"> 412 <div class="absolute -left-[31px] sm:-left-[39px] top-1.5 w-4 h-4 rounded-full bg-slate-300 border-4 border-slate-50 group-hover:scale-125 transition-transform dark:bg-slate-700 dark:border-slate-950"></div> 413 <div class="flex flex-wrap items-center justify-between gap-2 mb-1"> 414 <h3 class="text-lg font-bold text-slate-900 dark:text-white">Amazon Web Services (AWS)</h3> 415 <span class="px-2.5 py-0.5 text-xs font-semibold rounded-full bg-slate-100 text-slate-600 border border-slate-200 font-mono dark:bg-slate-800 dark:text-slate-400 dark:border-slate-700"> 416 2023 417 </span> 418 </div> 419 <div class="text-xs font-medium text-slate-500 mb-2 dark:text-slate-400">Technical Account Manager (TAM)</div> 420 <p class="text-xs sm:text-sm text-slate-600 leading-relaxed dark:text-slate-300"> 421 ëí ìí°íë¼ì´ì¦ ê³ ê° ëì AWS ì°-ìí¤í í°ë íë ììí¬ ê¸°ë° ê¸°ì ì문 ì ê³µ ë° C-Level-ì¤ë¬´ ìì§ëì´ ê° í´ë¼ì°ë ì í 기ì ë³ëª© í´ê²°. 422 </p> 423 </div> 424 425 426 <div class="relative group"> 427 <div class="absolute -left-[31px] sm:-left-[39px] top-1.5 w-4 h-4 rounded-full bg-slate-300 border-4 border-slate-50 group-hover:scale-125 transition-transform dark:bg-slate-700 dark:border-slate-950"></div> 428 <div class="flex flex-wrap items-center justify-between gap-2 mb-1"> 429 <h3 class="text-lg font-bold text-slate-900 dark:text-white">Medium (미ëì)</h3>
430 <span class="px-2.5 py-0.5 text-xs font-semibold rounded-full bg-slate-100 text-slate-600 border border-slate-200 font-mono dark:bg-slate-800 dark:text-slate-400 dark:border-slate-700"> 431 2022 432 </span> 433 </div> 434 <div class="text-xs font-medium text-slate-500 mb-2 dark:text-slate-400">ê°ë°ì¤ì¥ & DevOps íì¥</div> 435 <p class="text-xs sm:text-sm text-slate-600 leading-relaxed dark:text-slate-300"> 436 Hyperledger BESU ê¸°ë° Token Mainnet ë° DEX ë¶ì° ì¸íë¼ ìí¤í ì²ë§, í í¬ë ¸ë¯¹ì¤ ë¶ì/ì¤ê³ ë° CI/CD 구ì¶. 437 </p> 438 </div> 439 440 441 <div class="relative group"> 442 <div class="absolute -left-[31px] sm:-left-[39px] top-1.5 w-4 h-4 rounded-full bg-slate-300 border-4 border-slate-50 group-hover:scale-125 transition-transform dark:bg-slate-700 dark:border-slate-950"></div> 443 <div class="flex flex-wrap items-center justify-between gap-2 mb-1"> 444 <h3 class="text-lg font-bold text-slate-900 dark:text-white">ííìëª </h3> 445 <span class="px-2.5 py-0.5 text-xs font-semibold rounded-full bg-slate-100 text-slate-600 border border-slate-200 font-mono dark:bg-slate-800 dark:text-slate-400 dark:border-slate-700"> 446 2019 447 </span> 448 </div> 449 <div class="text-xs font-medium text-slate-500 mb-2 dark:text-slate-400">íë¡ì í¸ ê´ë¦¬ (PM) & DevOps íì¥</div> 450 <p class="text-xs sm:text-sm text-slate-600 leading-relaxed dark:text-slate-300"> 451 ê¸ìµê¶ ë§ë¶ë¦¬ ì¸íë¼ ê¸°ë° ë¸ë¡ì²´ì¸ Stable Coin ìì¤í êµ¬ì¶ ì´ê´ ë° SAFe Agile ê¸°ë° ê¸°í/ê°ë° ê´ë¦¬. 452 </p> 453 </div> 454 455 456 <div class="relative group"> 457 <div class="absolute -left-[31px] sm:-left-[39px] top-1.5 w-4 h-4 rounded-full bg-slate-300 border-4 border-slate-50 group-hover:scale-125 transition-transform dark:bg-slate-700 dark:border-slate-950"></div> 458 <div class="flex flex-wrap items-center justify-between gap-2 mb-1"> 459 <h3 class="text-lg font-bold text-slate-900 dark:text-white">NaverLabs (ë¤ì´ë²ë©ì¤)</h3> 460 <span class="px-2.5 py-0.5 text-xs font-semibold rounded-full bg-slate-100 text-slate-600 border border-slate-200 font-mono dark:bg-slate-800 dark:text-slate-400 dark:border-slate-700"> 461 2016 462 </span> 463 </div> 464 <div class="text-xs font-medium text-slate-500 mb-2 dark:text-slate-400">í´ë¼ì°ë ìí¤í í¸ / SW ìì§ëì´ / PM</div> 465 <p class="text-xs sm:text-sm text-slate-600 leading-relaxed dark:text-slate-300"> 466 Go ê¸°ë° ìì¨ì£¼í ì°¨ë OBD ë¶ì° ë°ì´í° ìì§ ë°±ìë(Kafka/Phoenix) ë° AWS EMR ê¸°ë° 40ìµ ê±´ ì²ë¦¬ ì¤ë´ì¸¡ì WPS ìì¤í ê°ë°. 467 </p> 468 </div> 469 470 471 <div class="relative group"> 472 <div class="absolute -left-[31px] sm:-left-[39px] top-1.5 w-4 h-4 rounded-full bg-slate-300 border-4 border-slate-50 group-hover:scale-125 transition-transform dark:bg-slate-700 dark:border-slate-950"></div> 473 <div class="flex flex-wrap items-center justify-between gap-2 mb-1"> 474 <h3 class="text-lg font-bold text-slate-900 dark:text-white">주ìíì¬ êµ¬ë¦ (goorm)</h3> 475 <span class="px-2.5 py-0.5 text-xs font-semibold rounded-full bg-slate-100 text-slate-600 border border-slate-200 font-mono dark:bg-slate-800 dark:text-slate-400 dark:border-slate-700"> 476 2015 477 </span> 478 </div> 479 <div class="text-xs font-medium text-slate-500 mb-2 dark:text-slate-400">ìíí¸ì¨ì´ ìì§ëì´ / í´ë¼ì°ë ìí¤í í¸</div> 480 <p class="text-xs sm:text-sm text-slate-600 leading-relaxed dark:text-slate-300"> 481 ì¨ë¼ì¸ ì½ë© íê° ë° í´ë¼ì°ë IDE íµì¬ Container Orchestration ìì¤í ê°ë° (ì¨ë맨ë ì¸íë¼ë¡ ìëí í¬ ë¹ì© ëí ì ê°). 482 </p> 483 </div> 484 485 486 <div class="relative group"> 487 <div class="absolute -left-[31px] sm:-left-[39px] top-1.5 w-4 h-4 rounded-full bg-slate-300 border-4 border-slate-50 group-hover:scale-125 transition-transform dark:bg-slate-700 dark:border-slate-950"></div> 488 <div class="flex flex-wrap items-center justify-between gap-2 mb-1"> 489 <h3 class="text-lg font-bold text-slate-900 dark:text-white">LG ì ì</h3>
490 <span class="px-2.5 py-0.5 text-xs font-semibold rounded-full bg-slate-100 text-slate-600 border border-slate-200 font-mono dark:bg-slate-800 dark:text-slate-400 dark:border-slate-700"> 491 2013 492 </span> 493 </div> 494 <div class="text-xs font-medium text-slate-500 mb-2 dark:text-slate-400">ìíí¸ì¨ì´ ìì§ëì´ / í´ë¼ì°ë ìí¤í í¸</div> 495 <p class="text-xs sm:text-sm text-slate-600 leading-relaxed dark:text-slate-300"> 496 LINE ì°ë ëíí í IoT ìë¹ì¤ 'LG íì±' 0 to 1 기í, Ruby ë°±ìë íë¡í íì´í ë° í´ë¼ì°ë ìí¤í ì² ì£¼ë (<strong>2014 CES ì¤ë§í¸í Choice Award 2ê° ë¶ë¬¸ ìì</strong>). 497 </p> 498 </div> 499 500 501 <div class="relative group pt-2"> 502 <div class="absolute -left-[31px] sm:-left-[39px] top-3.5 w-3 h-3 rounded-full bg-slate-300 border-2 border-slate-50 dark:bg-slate-800 dark:border-slate-700"></div> 503 <h4 class="text-sm font-semibold text-slate-600 mb-2 dark:text-slate-400">ì´ì ìì§ëì´ë§ ê²½ë ¥ (2013ë ì´ì )</h4> 504 <div class="text-xs text-slate-500 space-y-1 leading-relaxed"> 505 <p><strong>KT Cloudware</strong> (2011~2013) · í´ë¼ì°ë ìí¤í í¸ (Private Cloud ê°ìí ì¸íë¼)</p> 506 <p><strong>ì¤íë§ë£¨ ì¤íëì¤ (NCSoft)</strong> (2007~2010) · SW ìì§ëì´ / QA (íì§ ëª¨ëí°ë§ ë° 24Hz ìì ê²ì)</p> 507 <p><strong>OnNET (ì¨ë·)</strong> (2006~2007) · ê²ììì§ ê°ë°ì (Lucene ê²ì ìê³ ë¦¬ì¦ íë)</p> 508 <p><strong>Coconut (ìë© ì½ì½ë)</strong> (2001~2005) · SW ìì§ëì´ (ëì©ë ë¡ê·¸ ìì§ ë° C/C++ ë³´ì ìì´ì í¸)</p> 509 <p><strong>리ë ì¤ ì¸í°ë¤ì ë</strong> (2000~2001) · SW ìì§ëì´ (C/C++ ë©ì¼ ì²ë¦¬ ë°±ìë)</p> 510 </div> 511 </div> 512 513 </div> 514 </section> 515 516 517 <section class="space-y-4 pt-4 border-t border-slate-200 dark:border-slate-800"> 518 <h2 class="text-xl font-bold text-slate-900 tracking-tight flex items-center gap-2 dark:text-white"> 519 <span class="text-amber-600 dark:text-amber-400">ð</span> Education & Honors 520 </h2> 521 <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs sm:text-sm text-slate-600 dark:text-slate-300"> 522 <div class="bg-white border border-slate-200 rounded-xl p-4 space-y-1 shadow-sm dark:bg-slate-900/40 dark:border-slate-800"> 523 <div class="font-bold text-slate-900 dark:text-white">ì¡°ì ëíêµ</div> 524 <div class="text-xs text-slate-500 dark:text-slate-400">ììë ¥ê³µíê³¼ íì¬ ì¡¸ì (1992 ~ 2000)</div> 525 </div> 526 <div class="bg-white border border-slate-200 rounded-xl p-4 space-y-1 shadow-sm dark:bg-slate-900/40 dark:border-slate-800"> 527 <div class="font-bold text-slate-900 dark:text-white">SAFe Software Engineer ì¸ì¦</div> 528 <div class="text-xs text-slate-500 dark:text-slate-400">Scaled Agile Framework (2021)</div> 529 </div> 530 <div class="bg-white border border-slate-200 rounded-xl p-4 space-y-1 shadow-sm dark:bg-slate-900/40 dark:border-slate-800"> 531 <div class="font-bold text-slate-900 dark:text-white">CES ì¤ë§í¸í Choice Award 2ê° ë¶ë¬¸ ìì</div> 532 <div class="text-xs text-slate-500 dark:text-slate-400">LG íì± ìë¹ì¤ ìí¤í ì² ì£¼ë (2014)</div> 533 </div> 534 <div class="bg-white border border-slate-200 rounded-xl p-4 space-y-1 shadow-sm dark:bg-slate-900/40 dark:border-slate-800"> 535 <div class="font-bold text-slate-900 dark:text-white">êµì íì ë ¼ë¬¸ ê²ì¬ (IEICE)</div> 536 <div class="text-xs text-slate-500 dark:text-slate-400">“Hexagonal Platform Architecture Implementation for IoT Devices and Services” (2018)</div> 537 </div> 538 </div> 539 </section> 540 541</div> 542 543 </div> 544 545 546 <footer class="border-t border-slate-200 bg-white py-8 mt-auto"> 547 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-slate-500"> 548 <p>© 2026 joinc.co.kr. All rights reserved.</p> 549 <p class="text-slate-400">Built with Static GitOps Engine & Hosted on GitHub Pages</p> 550 </div> 551 </footer> 552 553 554 <div id="mermaid-modal" class="fixed inset-0 z-50 hidden bg-slate-900/50 backdrop-blur-sm p-2 sm:p-4 md:p-6 flex items-center justify-center"> 555 <div class="relative w-full h-full max-w-[98vw] max-h-[96vh] bg-white border border-slate-200 rounded-2xl p-4 sm:p-6 shadow-2xl flex flex-col"> 556 <div class="flex items-center justify-between pb-3 sm:pb-4 border-b border-slate-200"> 557 <div class="flex items-center gap-2">
558 <span class="inline-block w-2.5 h-2.5 rounded-full bg-blue-600 animate-pulse"></span> 559 <span class="text-sm font-semibold text-slate-800">ë¤ì´ì´ê·¸ë¨ ì ì²´ íë©´ íë</span> 560 </div> 561 <button id="modal-close-btn" class="px-3.5 py-1.5 text-xs sm:text-sm bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-lg transition-colors border border-slate-200 font-medium flex items-center gap-1.5"> 562 <span>ë«ê¸°</span> 563 <kbd class="px-1.5 py-0.5 text-[10px] bg-white border border-slate-300 rounded text-slate-500">ESC</kbd> 564 </button> 565 </div> 566 <div id="modal-body" class="flex-1 overflow-auto flex items-center justify-center p-2 sm:p-6 bg-slate-50 rounded-xl"> 567 568 </div> 569 </div> 570 </div> 571 572 573
573<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
573 574
574<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
574 575
575<script> 576 577 mermaid.initialize({ 578 startOnLoad: false, 579 theme: 'default', 580 themeVariables: { 581 fontFamily: 'Pretendard, sans-serif', 582 fontSize: '13px', 583 } 584 }); 585 586 document.addEventListener("DOMContentLoaded", async () => { 587 const rawBlocks = document.querySelectorAll(".mermaid-raw"); 588 for (let i = 0; i < rawBlocks.length; i++) { 589 const rawEl = rawBlocks[i]; 590 const container = rawEl.closest(".mermaid-container"); 591 const code = rawEl.textContent.trim(); 592 const id = "mermaid-svg-" + i; 593 try { 594 const { svg } = await mermaid.render(id, code); 595 const svgWrapper = document.createElement("div"); 596 svgWrapper.className = "cursor-zoom-in w-full flex justify-center py-2"; 597 svgWrapper.innerHTML = svg; 598 599 600 svgWrapper.addEventListener("click", () => { 601 openMermaidModal(svg); 602 }); 603 604 container.appendChild(svgWrapper); 605 } catch (err) { 606 console.error("Mermaid render error:", err); 607 container.innerHTML = `<pre class="text-xs text-rose-600 p-4">${err.message}</pre>`; 608 } 609 } 610 }); 611 612 613 const modal = document.getElementById("mermaid-modal"); 614 const modalBody = document.getElementById("modal-body"); 615 const closeBtn = document.getElementById("modal-close-btn"); 616 617 function openMermaidModal(svgHtml) { 618 modalBody.innerHTML = svgHtml; 619 const svg = modalBody.querySelector("svg"); 620 if (svg) { 621 svg.removeAttribute("width"); 622 svg.removeAttribute("height"); 623 svg.style.width = "100%"; 624 svg.style.maxWidth = "100%"; 625 svg.style.maxHeight = "80vh"; 626 svg.style.height = "auto"; 627 svg.style.display = "block"; 628 svg.style.margin = "auto"; 629 } 630 modal.classList.remove("hidden"); 631 document.body.classList.add("overflow-hidden"); 632 } 633 634 function closeMermaidModal() { 635 modal.classList.add("hidden"); 636 modalBody.innerHTML = ""; 637 document.body.classList.remove("overflow-hidden"); 638 } 639 640 if (closeBtn) closeBtn.addEventListener("click", closeMermaidModal); 641 if (modal) { 642 modal.addEventListener("click", (e) => { 643 if (e.target === modal) closeMermaidModal(); 644 }); 645 } 646 document.addEventListener("keydown", (e) => { 647 if (e.key === "Escape" && modal && !modal.classList.contains("hidden")) { 648 closeMermaidModal(); 649 } 650 }); 651 652 653 function initKaTeX() { 654 if (typeof renderMathInElement === "function") { 655 renderMathInElement(document.body, { 656 delimiters: [ 657 { left: "$$", right: "$$", display: true }, 658 { left: "$", right: "$", display: false }, 659 { left: "\\(", right: "\\)", display: false }, 660 { left: "\\[", right: "\\]", display: true } 661 ], 662 ignoredTags: ["script", "noscript", "style", "textarea", "pre", "code"], 663 ignoredClasses: ["mermaid-raw", "mermaid-container"], 664 throwOnError: false 665 }); 666 } 667 } 668 669 if (document.readyState === "loading") { 670 document.addEventListener("DOMContentLoaded", initKaTeX); 671 } else { 672 initKaTeX(); 673 } 674 </script>
674 675</body> 676</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.