feat: Lottie 애니메이션 라이브러리 로컬 통합

- lottie-web 라이브러리를 로컬에 다운로드 (CDN 차단 문제 해결)
- AI 분석 로딩 애니메이션을 커스텀 JSON 파일로 변경
- 외부 CDN 의존성 제거로 안정성 향상

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

backend/static/animations/ai-loading.json

@@ -0,0 +1,224 @@
+{
+  "v": "5.7.4",
+  "fr": 60,
+  "ip": 0,
+  "op": 120,
+  "w": 200,
+  "h": 200,
+  "nm": "AI Loading",
+  "ddd": 0,
+  "assets": [],
+  "layers": [
+    {
+      "ddd": 0,
+      "ind": 1,
+      "ty": 4,
+      "nm": "Circle Outer",
+      "sr": 1,
+      "ks": {
+        "o": {"a": 0, "k": 100},
+        "r": {
+          "a": 1,
+          "k": [
+            {"i": {"x": [0.667], "y": [1]}, "o": {"x": [0.333], "y": [0]}, "t": 0, "s": [0]},
+            {"t": 120, "s": [360]}
+          ]
+        },
+        "p": {"a": 0, "k": [100, 100, 0]},
+        "a": {"a": 0, "k": [0, 0, 0]},
+        "s": {"a": 0, "k": [100, 100, 100]}
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "d": 1,
+              "ty": "el",
+              "s": {"a": 0, "k": [120, 120]},
+              "p": {"a": 0, "k": [0, 0]},
+              "nm": "Ellipse Path 1"
+            },
+            {
+              "ty": "st",
+              "c": {"a": 0, "k": [0.396, 0.4, 0.961, 1]},
+              "o": {"a": 0, "k": 100},
+              "w": {"a": 0, "k": 8},
+              "lc": 2,
+              "lj": 1,
+              "ml": 4,
+              "nm": "Stroke 1"
+            },
+            {
+              "ty": "tr",
+              "p": {"a": 0, "k": [0, 0], "ix": 2},
+              "a": {"a": 0, "k": [0, 0], "ix": 1},
+              "s": {"a": 0, "k": [100, 100], "ix": 3},
+              "r": {"a": 0, "k": 0, "ix": 6},
+              "o": {"a": 0, "k": 100, "ix": 7},
+              "sk": {"a": 0, "k": 0, "ix": 4},
+              "sa": {"a": 0, "k": 0, "ix": 5},
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Ellipse 1",
+          "np": 2,
+          "cix": 2,
+          "ix": 1,
+          "mn": "ADBE Vector Group"
+        },
+        {
+          "ty": "tm",
+          "s": {
+            "a": 1,
+            "k": [
+              {"i": {"x": [0.667], "y": [1]}, "o": {"x": [0.333], "y": [0]}, "t": 0, "s": [0]},
+              {"t": 60, "s": [100]}
+            ]
+          },
+          "e": {
+            "a": 1,
+            "k": [
+              {"i": {"x": [0.667], "y": [1]}, "o": {"x": [0.333], "y": [0]}, "t": 0, "s": [0]},
+              {"t": 60, "s": [100]}
+            ]
+          },
+          "o": {"a": 0, "k": 0},
+          "m": 1,
+          "ix": 2,
+          "nm": "Trim Paths 1"
+        }
+      ],
+      "ip": 0,
+      "op": 120,
+      "st": 0,
+      "bm": 0
+    },
+    {
+      "ddd": 0,
+      "ind": 2,
+      "ty": 4,
+      "nm": "Dots",
+      "sr": 1,
+      "ks": {
+        "o": {
+          "a": 1,
+          "k": [
+            {"i": {"x": [0.667], "y": [1]}, "o": {"x": [0.333], "y": [0]}, "t": 0, "s": [0]},
+            {"i": {"x": [0.667], "y": [1]}, "o": {"x": [0.333], "y": [0]}, "t": 20, "s": [100]},
+            {"i": {"x": [0.667], "y": [1]}, "o": {"x": [0.333], "y": [0]}, "t": 40, "s": [0]},
+            {"i": {"x": [0.667], "y": [1]}, "o": {"x": [0.333], "y": [0]}, "t": 60, "s": [100]},
+            {"i": {"x": [0.667], "y": [1]}, "o": {"x": [0.333], "y": [0]}, "t": 80, "s": [0]},
+            {"t": 100, "s": [100]}
+          ]
+        },
+        "r": {"a": 0, "k": 0},
+        "p": {"a": 0, "k": [100, 150, 0]},
+        "a": {"a": 0, "k": [0, 0, 0]},
+        "s": {"a": 0, "k": [100, 100, 100]}
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "d": 1,
+              "ty": "el",
+              "s": {"a": 0, "k": [12, 12]},
+              "p": {"a": 0, "k": [-20, 0]},
+              "nm": "Ellipse 1"
+            },
+            {
+              "ty": "fl",
+              "c": {"a": 0, "k": [0.396, 0.4, 0.961, 1]},
+              "o": {"a": 0, "k": 100},
+              "r": 1,
+              "nm": "Fill 1"
+            },
+            {
+              "ty": "tr",
+              "p": {"a": 0, "k": [0, 0]},
+              "a": {"a": 0, "k": [0, 0]},
+              "s": {"a": 0, "k": [100, 100]},
+              "r": {"a": 0, "k": 0},
+              "o": {"a": 0, "k": 100},
+              "sk": {"a": 0, "k": 0},
+              "sa": {"a": 0, "k": 0},
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Dot 1"
+        },
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "d": 1,
+              "ty": "el",
+              "s": {"a": 0, "k": [12, 12]},
+              "p": {"a": 0, "k": [0, 0]},
+              "nm": "Ellipse 2"
+            },
+            {
+              "ty": "fl",
+              "c": {"a": 0, "k": [0.396, 0.4, 0.961, 1]},
+              "o": {"a": 0, "k": 100},
+              "r": 1,
+              "nm": "Fill 2"
+            },
+            {
+              "ty": "tr",
+              "p": {"a": 0, "k": [0, 0]},
+              "a": {"a": 0, "k": [0, 0]},
+              "s": {"a": 0, "k": [100, 100]},
+              "r": {"a": 0, "k": 0},
+              "o": {"a": 0, "k": 100},
+              "sk": {"a": 0, "k": 0},
+              "sa": {"a": 0, "k": 0},
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Dot 2"
+        },
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "d": 1,
+              "ty": "el",
+              "s": {"a": 0, "k": [12, 12]},
+              "p": {"a": 0, "k": [20, 0]},
+              "nm": "Ellipse 3"
+            },
+            {
+              "ty": "fl",
+              "c": {"a": 0, "k": [0.396, 0.4, 0.961, 1]},
+              "o": {"a": 0, "k": 100},
+              "r": 1,
+              "nm": "Fill 3"
+            },
+            {
+              "ty": "tr",
+              "p": {"a": 0, "k": [0, 0]},
+              "a": {"a": 0, "k": [0, 0]},
+              "s": {"a": 0, "k": [100, 100]},
+              "r": {"a": 0, "k": 0},
+              "o": {"a": 0, "k": 100},
+              "sk": {"a": 0, "k": 0},
+              "sa": {"a": 0, "k": 0},
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Dot 3"
+        }
+      ],
+      "ip": 0,
+      "op": 120,
+      "st": 0,
+      "bm": 0
+    }
+  ],
+  "markers": []
+}

backend/templates/admin.html

@@ -1363,31 +1363,29 @@
                 return;
             }
 
-            // Lottie 로딩 애니메이션 표시
+            // Lottie 애니메이션 로딩 표시 (로컬)
             document.getElementById('aiAnalysisContent').innerHTML = `
-                <div id="lottie-container" style="text-align: center; padding: 40px;">
+                <div style="text-align: center; padding: 60px;">
-                    <div id="lottie-animation" style="width: 200px; height: 200px; margin: 0 auto;"></div>
+                    <div id="lottie-animation" style="width: 200px; height: 200px; margin: 0 auto 24px;"></div>
-                    <div style="font-size: 16px; color: #495057; font-weight: 600; margin-top: 16px;">
+                    <div style="font-size: 16px; color: #495057; font-weight: 600; margin-bottom: 8px;">
                         AI가 구매 패턴을 분석하고 있습니다...
                     </div>
-                    <div style="font-size: 14px; color: #868e96; margin-top: 8px;">
+                    <div style="font-size: 14px; color: #868e96;">
                         최대 10-15초 소요될 수 있습니다
                     </div>
                 </div>
             `;
 
-            // Lottie 애니메이션 초기화 (무료 AI/로봇 애니메이션)
+            // Lottie 애니메이션 로드
-            if (lottieAnimation) {
+            if (window.lottie) {
-                lottieAnimation.destroy();
-            }
-
                 lottieAnimation = lottie.loadAnimation({
                     container: document.getElementById('lottie-animation'),
                     renderer: 'svg',
                     loop: true,
                     autoplay: true,
-                path: 'https://lottie.host/d5cb5c0e-1b0f-4f0a-8e5f-9c3e9d6e5a3a/3R3xKR0P0r.json' // AI 로봇 애니메이션
+                    path: '/static/animations/ai-loading.json'
                 });
+            }
 
             // API 호출
             fetch(`/admin/ai-analyze-user/${userId}`, {
@@ -1398,11 +1396,6 @@
             })
             .then(response => response.json())
             .then(data => {
-                if (lottieAnimation) {
-                    lottieAnimation.destroy();
-                    lottieAnimation = null;
-                }
-
                 if (data.success) {
                     // 캐시 저장
                     aiAnalysisCache[cacheKey] = {
@@ -1415,10 +1408,6 @@
                 }
             })
             .catch(error => {
-                if (lottieAnimation) {
-                    lottieAnimation.destroy();
-                    lottieAnimation = null;
-                }
                 showAIAnalysisError('네트워크 오류가 발생했습니다. 다시 시도해주세요.');
                 console.error('AI Analysis Error:', error);
             });
@@ -1540,5 +1529,8 @@
             }
         });
     </script>
+
+    <!-- Lottie 애니메이션 라이브러리 (로컬) -->
+    <script src="/static/js/lottie.min.js"></script>
 </body>
 </html>