diff --git a/src/app/recommend/_components/MapView/index.tsx b/src/app/recommend/_components/MapView/index.tsx
index 8b2345f..3fa9180 100644
--- a/src/app/recommend/_components/MapView/index.tsx
+++ b/src/app/recommend/_components/MapView/index.tsx
@@ -1,12 +1,13 @@
 "use client";
 
+import { useState } from "react";
 import { Map, MapMarker, Polyline, useKakaoLoader } from "react-kakao-maps-sdk";
 import { RecommendationResponse } from "@/lib/type";
 import { COORDINATE } from "@/constants/spaceData";
 import { Coordinate, getMidpoint } from "@/utils/getMidpoint";
 import { getDestination } from "@/utils/getDestination";
 import RecommendationMarker from "./RecommendationMarker";
-import { useState } from "react";
+import ErrorScreen from "@/components/ErrorScreen";
 
 export default function MapView({
   spaceData,
@@ -18,8 +19,9 @@ export default function MapView({
   });
   const [selectedSpace, setSelectedSpace] = useState<Coordinate | null>(null);
 
-  if (loading) return <div>Loading</div>;
-  if (error) return <div>Error</div>;
+  if (loading)
+    return <div className="h-full w-full animate-pulse bg-slate-200" />;
+  if (error) return <ErrorScreen />;
 
   const origin = COORDINATE.SAEMANGEUM;
   const destination = getDestination();
diff --git a/src/app/recommend/_components/RecommendationPanel/SkeletonCard.tsx b/src/app/recommend/_components/RecommendationPanel/SkeletonCard.tsx
index 83eb1a9..5b9df75 100644
--- a/src/app/recommend/_components/RecommendationPanel/SkeletonCard.tsx
+++ b/src/app/recommend/_components/RecommendationPanel/SkeletonCard.tsx
@@ -1,15 +1,13 @@
-import Skeleton from "@/components/Loading/Skeleton";
-
 export default function SkeletonCard() {
   return (
-    <div className="flex h-full w-full animate-pulse gap-2 sm:flex-col sm:gap-3">
-      <div className="size-40 rounded-[6px] sm:h-[180px] sm:w-full" />
+    <div className="flex h-full w-full gap-2 sm:flex-col sm:gap-3">
+      <div className="size-40 shrink-0 animate-pulse rounded-md bg-slate-200 sm:h-[180px] sm:w-full" />
       <div className="flex flex-1 flex-col gap-2">
-        <Skeleton width="80%" height="1rem" />
-        <Skeleton width="60%" height="0.875rem" />
-        <div className="mt-2 flex gap-2">
-          <Skeleton width="60px" height="1.5rem" className="rounded-[6px]" />
-          <Skeleton width="40px" height="1.5rem" className="rounded-[6px]" />
+        <div className="h-[26px] w-4/5 animate-pulse rounded-md bg-slate-200" />
+        <div className="h-[20px] w-3/5 animate-pulse rounded-md bg-slate-200" />
+        <div className="mt-1 flex gap-2">
+          <div className="h-[28px] w-12 animate-pulse rounded-md bg-slate-200" />
+          <div className="h-[28px] w-12 animate-pulse rounded-md bg-slate-200" />
         </div>
       </div>
     </div>
diff --git a/src/app/recommend/_components/RecommendationPanel/SpaceCard.tsx b/src/app/recommend/_components/RecommendationPanel/SpaceCard.tsx
index 35066f9..cb81ac8 100644
--- a/src/app/recommend/_components/RecommendationPanel/SpaceCard.tsx
+++ b/src/app/recommend/_components/RecommendationPanel/SpaceCard.tsx
@@ -30,14 +30,14 @@ export default function SpaceCard({
       />
       <div>
         <div className="flex flex-col gap-1">
-          <div className="flex items-center">
-            <h2 className="text-title-small text-[#1F2229]">{title}</h2>
-          </div>
+          <h2 className="text-title-small text-left text-[#1F2229]">{title}</h2>
           <div className="flex items-start gap-1">
             <div className="size-4 py-0.5">
               <MapPin size={16} color="#616A80" />
             </div>
-            <div className="text-body-small text-[#616A80]">{position}</div>
+            <div className="text-body-small text-left text-[#616A80]">
+              {position}
+            </div>
           </div>
         </div>
         <div className="mt-[8px] flex gap-[8px]">
diff --git a/src/components/Loading/Skeleton.tsx b/src/components/Loading/Skeleton.tsx
deleted file mode 100644
index 9b4016b..0000000
--- a/src/components/Loading/Skeleton.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import clsx from "clsx";
-
-interface SkeletonProps {
-  width?: string;
-  height?: string;
-  rounded?: string;
-  className?: string;
-}
-
-const Skeleton = ({
-  width = "100%",
-  height = "1rem",
-  rounded = "rounded-md",
-  className,
-}: SkeletonProps) => {
-  return (
-    <div
-      className={clsx(
-        "animate-pulse bg-slate-200",
-        width,
-        height,
-        rounded,
-        className
-      )}
-      style={{ width, height }}
-    />
-  );
-};
-
-export default Skeleton;