diff --git a/components/skeleton/LinkCardSkeleton.tsx b/components/skeleton/LinkCardSkeleton.tsx
new file mode 100644
index 0000000..30506a7
--- /dev/null
+++ b/components/skeleton/LinkCardSkeleton.tsx
@@ -0,0 +1,15 @@
+import Skeleton from "react-loading-skeleton";
+import "react-loading-skeleton/dist/skeleton.css";
+
+const LinkCardSkeleton = () => {
+  return (
+    <div className="w-full p-4 border border-gray-300 rounded-lg shadow-sm">
+      <Skeleton height={160} />
+      <Skeleton width="80%" className="mt-2" />
+      <Skeleton width="60%" className="mt-2" />
+      <Skeleton width="40%" className="mt-2" />
+    </div>
+  );
+};
+
+export default LinkCardSkeleton;
diff --git a/lib/api/axiosInstanceApi.ts b/lib/api/axiosInstanceApi.ts
index 9c7b8b1..4497699 100644
--- a/lib/api/axiosInstanceApi.ts
+++ b/lib/api/axiosInstanceApi.ts
@@ -5,7 +5,8 @@ const axiosInstance = axios.create({
 });
 
 export const proxy = axios.create({
-  baseURL: "https://linkbrary-9-99.vercel.app",
+  //baseURL: "https://linkbrary-9-99.vercel.app",
+  baseURL: "http://localhost:3000",
 });
 
 proxy.interceptors.response.use(
diff --git a/package-lock.json b/package-lock.json
index 5f077b1..2dd2b7b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "react-dom": "^18.2.0",
         "react-hot-toast": "^2.4.1",
         "react-icons": "^5.3.0",
+        "react-loading-skeleton": "^3.5.0",
         "react-spinners": "^0.14.1",
         "zustand": "^5.0.1"
       },
@@ -4763,6 +4764,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/react-loading-skeleton": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/react-loading-skeleton/-/react-loading-skeleton-3.5.0.tgz",
+      "integrity": "sha512-gxxSyLbrEAdXTKgfbpBEFZCO/P153DnqSCQau2+o6lNy1jgMRr2MmRmOzMmyrwSaSYLRB8g7b0waYPmUjz7IhQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/react-spinners": {
       "version": "0.14.1",
       "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.14.1.tgz",
diff --git a/package.json b/package.json
index b92faf0..ba1a948 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^5.3.0",
+    "react-loading-skeleton": "^3.5.0",
     "react-spinners": "^0.14.1",
     "zustand": "^5.0.1"
   },
diff --git a/pages/favorite/index.tsx b/pages/favorite/index.tsx
index 59c3652..b62fdf0 100644
--- a/pages/favorite/index.tsx
+++ b/pages/favorite/index.tsx
@@ -8,8 +8,8 @@ import Container from "@/components/Layout/Container";
 import LinkCard from "@/components/Link/LinkCard";
 import Pagination from "@/components/Pagination";
 import useFetchLinks from "@/hooks/useFetchLinks";
-import LoadingSpinner from "@/components/LoadingSpinner";
 import EmptyFavoriteList from "@/components/Favorite/EmptyFavoriteList";
+import LinkCardSkeleton from "@/components/skeleton/LinkCardSkeleton";
 
 interface FavoriteDataType {
   id: number;
@@ -87,8 +87,10 @@ const FavoritePage = ({
         </div>
         {/* 로딩 중일 때 */}
         {isLoading ? (
-          <div className="min-h-[100px] h-full pt-20 pb-20">
-            <LoadingSpinner />
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+            {[...Array(3)].map((_, index) => (
+              <LinkCardSkeleton key={index} />
+            ))}
           </div>
         ) : linkCardList.length > 0 ? (
           <>
diff --git a/pages/link/index.tsx b/pages/link/index.tsx
index 1bf93fa..c330ef4 100644
--- a/pages/link/index.tsx
+++ b/pages/link/index.tsx
@@ -23,6 +23,7 @@ import useFetchLinks from "@/hooks/useFetchLinks";
 import useViewport from "@/hooks/useViewport";
 import useFolderName from "@/hooks/useFolderName";
 import LoadingSpinner from "@/components/LoadingSpinner";
+import LinkCardSkeleton from "@/components/skeleton/LinkCardSkeleton";
 
 interface LinkPageProps {
   linkList: LinkData[];
@@ -119,8 +120,10 @@ const LinkPage = ({
             )}
           </div>
           {isLoading ? (
-            <div className="min-h-[100px] h-full pt-20 pb-20">
-              <LoadingSpinner />
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+              {[...Array(3)].map((_, index) => (
+                <LinkCardSkeleton key={index} />
+              ))}
             </div>
           ) : linkCardList.length !== 0 ? (
             <>