From 6e2159cf677d4b9bc84f997e2a5d089f6e4272f0 Mon Sep 17 00:00:00 2001
From: caadiq <caadiq@gmail.com>
Date: Wed, 22 Apr 2026 00:29:39 +0900
Subject: [PATCH] =?UTF-8?q?MapleStory=20=ED=8F=B0=ED=8A=B8=20font-display:?=
 =?UTF-8?q?=20optional=20=EB=A1=9C=20override=ED=95=B4=20CLS=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

개발자도구 Performance 분석 결과 CLS 0.17로 레이아웃 이동이 큼. JSDelivr
Maplestory.css의 font-display: swap이 폰트 도착 시 텍스트 너비를 swap
시켜서 카드 애니메이션 중에 레이아웃 튀어 버벅임 발생.

- JSDelivr CSS 링크 제거하고 @font-face를 index.html에 직접 선언하며
  font-display: optional 로 변경
- woff2만 참조 (fallback 포맷 제거)
- cdn.jsdelivr.net preconnect 추가해 첫 방문 시에도 빠르게 시도

첫 방문 시: fallback(Noto Sans KR)으로 즉시 렌더, Maplestory가 100ms
내 도착하지 못하면 그대로 유지. 이후 캐시된 재방문부터는 정상 적용.
레이아웃 이동 0, 애니메이션 부드럽게 진행.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/index.html | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/frontend/index.html b/frontend/index.html
index e9b837a..261dca3 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -6,8 +6,26 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&display=swap" rel="stylesheet" />
-    <link href="https://cdn.jsdelivr.net/gh/fonts-archive/Maplestory/Maplestory.css" rel="stylesheet" />
+    <!-- MapleStory 폰트: font-display: optional 로 override. 첫 방문시 폰트가 100ms 내에
+         도착하지 않으면 fallback 유지, 이후 캐시되면 적용됨. 레이아웃 이동 제거 목적. -->
+    <style>
+      @font-face {
+        font-family: 'Maplestory';
+        font-weight: 300;
+        font-style: normal;
+        font-display: optional;
+        src: url('https://cdn.jsdelivr.net/gh/fonts-archive/Maplestory/Maplestory-Light.woff2') format('woff2');
+      }
+      @font-face {
+        font-family: 'Maplestory';
+        font-weight: 700;
+        font-style: normal;
+        font-display: optional;
+        src: url('https://cdn.jsdelivr.net/gh/fonts-archive/Maplestory/Maplestory-Bold.woff2') format('woff2');
+      }
+    </style>
     <script type="text/javascript" src="https://openapi.nexon.com/js/analytics.js?app_id=274844" async></script>
     <script>
       (function () {