diff --git a/.gitignore b/.gitignore
index 3c9db78..255a2be 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,4 +3,5 @@ dist/
 build/
 .env
 .env.*
-.playwright-mcp/
\ No newline at end of file
+.playwright-mcp/
+.vscode/
diff --git a/index.html b/index.html
index fd4ca21..d4719f6 100644
--- a/index.html
+++ b/index.html
@@ -445,6 +445,99 @@ <h2 class="mt-5 text-xl font-bold tracking-tight text-slate-950">
         </article>
       </section>
 
+      <!-- 생태계 & 패키지 (Ecosystem & Integrations) -->
+      <section aria-label="생태계 및 연동 라이브러리" class="mt-12">
+        <div class="-mx-5 sm:mx-0 rounded-none sm:rounded-2xl border-y-2 border-x-0 sm:border-2 border-slate-900 bg-white p-5 sm:p-7 shadow-none sm:sticker-shadow">
+          <div class="flex flex-wrap items-center justify-between gap-2 border-b border-slate-100 pb-4">
+            <div>
+              <div class="inline-block rounded-md border border-slate-900 bg-violet-200 px-2 py-0.5 text-[10px] font-extrabold uppercase tracking-wide text-slate-900">
+                Ecosystem 📦
+              </div>
+              <h2 class="mt-2 text-xl font-bold tracking-tight text-slate-950">
+                연동 패키지 &amp; 생태계
+              </h2>
+            </div>
+            <span class="font-mono text-xs text-slate-500">Packages &amp; Real-world Usage</span>
+          </div>
+
+          <div class="mt-5 grid gap-4 sm:grid-cols-2">
+            <!-- Laravel ImageForge 카드 -->
+            <div class="flex flex-col justify-between rounded-xl border-2 border-slate-900 bg-slate-50/60 p-4 transition-all hover:bg-white hover:-translate-y-0.5">
+              <div>
+                <div class="flex items-center justify-between gap-2">
+                  <span class="inline-flex items-center gap-1.5 rounded-md border border-slate-900 bg-rose-100 px-2 py-0.5 text-[11px] font-mono font-bold text-rose-900">
+                    <span class="h-1.5 w-1.5 rounded-full bg-rose-500"></span>
+                    Laravel
+                  </span>
+                  <a
+                    href="https://github.com/replworks/laravel-imageforge"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="inline-flex items-center gap-1 text-[11px] font-mono font-bold text-slate-600 hover:text-slate-950 underline underline-offset-2"
+                  >
+                    <span>GitHub</span>
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                    </svg>
+                  </a>
+                </div>
+
+                <h3 class="mt-3 font-mono text-sm font-bold text-slate-900">
+                  <a
+                    href="https://github.com/replworks/laravel-imageforge"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="hover:text-indigo-600 hover:underline"
+                  >
+                    replworks/laravel-imageforge
+                  </a>
+                </h3>
+                <p class="mt-1.5 text-xs text-slate-600 leading-relaxed font-medium">
+                  Image Forge를 Laravel 애플리케이션에서 간편하게 연동하고 최적화 URL을 생성하는 패키지입니다.
+                </p>
+              </div>
+
+              <!-- 도입 사례 뱃지 / 썸네일 -->
+              <div class="mt-4 pt-3.5 border-t border-slate-200/80">
+                <div class="flex items-center justify-between text-xs mb-2.5">
+                  <span class="text-[11px] font-bold text-slate-500 uppercase tracking-wider">실제 적용 서비스</span>
+                  <a
+                    href="https://wifinote.net"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="inline-flex items-center gap-1 font-mono text-[11px] font-bold text-indigo-700 bg-indigo-50 hover:bg-indigo-100 px-2 py-0.5 rounded border border-indigo-200 transition"
+                  >
+                    <span>wifinote.net</span>
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-2.5 w-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                    </svg>
+                  </a>
+                </div>
+
+                <a
+                  href="https://wifinote.net"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="group relative block overflow-hidden rounded-lg border-2 border-slate-900 bg-slate-900 sticker-shadow-sm transition hover:-translate-y-0.5"
+                >
+                  <img
+                    src="https://img.repl.net/wifinote/assets/seo/og.png?w=640&amp;f=webp"
+                    alt="wifinote.net 서비스 썸네일 미리보기"
+                    loading="lazy"
+                    class="w-full aspect-[1.91/1] object-cover transition-transform duration-300 group-hover:scale-105 opacity-95 group-hover:opacity-100"
+                    width="640"
+                    height="335"
+                  />
+                  <div class="absolute bottom-1.5 right-1.5 rounded bg-slate-900/80 px-1.5 py-0.5 font-mono text-[9px] font-bold text-emerald-300 backdrop-blur-xs">
+                    ⚡ img.repl.net (w=480, webp)
+                  </div>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
       <!-- 하단 푸터 (L2 단일 링크 요구사항 만족) -->
       <footer class="mt-auto pt-14 pb-8 flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-t border-slate-200 text-sm text-slate-500 font-medium">
         <div class="flex flex-col gap-1 sm:flex-row sm:items-center sm:gap-2 order-2 sm:order-1">