diff --git a/.env.sample b/.env.sample
index 9c08b70..a8b82aa 100644
--- a/.env.sample
+++ b/.env.sample
@@ -1,3 +1,3 @@
 VITE_KAKAO_MAP_API_KEY=
-VITE_API_BASE_URL=
+VITE_API_BASE_URL=https://whatthebus.duckdns.org
 VITE_API_KEY=
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index 61c4850..85f60e5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -39,9 +39,10 @@ function App() {
     const langId = useId();
     const [language, setLanguage] = useState<Language>(() => {
         try {
-            const stored = typeof window !== "undefined" && window.localStorage
-                ? localStorage.getItem("wtb:lang")
-                : null;
+            const stored =
+                typeof window !== "undefined" && window.localStorage
+                    ? localStorage.getItem("wtb:lang")
+                    : null;
             return stored === "en" ? "en" : "ko";
         } catch {
             return "ko";
@@ -67,10 +68,7 @@ function App() {
 
     return (
         <QueryClientProvider client={queryClient}>
-            <LanguageProvider
-                language={language}
-                setLanguage={setLanguage}
-            >
+            <LanguageProvider language={language} setLanguage={setLanguage}>
                 <ToastProvider>
                     <AppContent
                         mapId={mapId}
@@ -119,21 +117,24 @@ function AppContent({
     const { toast } = useToast();
     const errorShownRef = useRef(false);
 
-    const handleBusLocationError = useCallback((message: string) => {
-        // Only show toast once to avoid spamming on refetch failures
-        if (!errorShownRef.current) {
-            toast({
-                title: "버스 위치 조회 오류",
-                description: message,
-                variant: "destructive",
-            });
-            errorShownRef.current = true;
-            // Reset after 30 seconds to allow showing error again if it persists
-            setTimeout(() => {
-                errorShownRef.current = false;
-            }, 30000);
-        }
-    }, [toast]);
+    const handleBusLocationError = useCallback(
+        (message: string) => {
+            // Only show toast once to avoid spamming on refetch failures
+            if (!errorShownRef.current) {
+                toast({
+                    title: "버스 위치 조회 오류",
+                    description: message,
+                    variant: "destructive",
+                });
+                errorShownRef.current = true;
+                // Reset after 30 seconds to allow showing error again if it persists
+                setTimeout(() => {
+                    errorShownRef.current = false;
+                }, 30000);
+            }
+        },
+        [toast]
+    );
 
     const { data: buses = [] } = useBusLocations(handleBusLocationError);
     const handleBusNumberSelect = useBusSelection(buses, setBubbleStop);
@@ -167,8 +168,8 @@ function AppContent({
                     />
                 </Suspense>
             ) : null}
-            <MapContainer 
-                mapId={mapId} 
+            <MapContainer
+                mapId={mapId}
                 selectedStopName={bubbleStop?.name}
                 onStopClick={handleStopClick}
             >
diff --git a/src/api/bus.ts b/src/api/bus.ts
index 87c1ccb..9b198d5 100644
--- a/src/api/bus.ts
+++ b/src/api/bus.ts
@@ -4,9 +4,7 @@ import { apiGet } from "../lib/api";
 import { API_ENDPOINTS } from "../lib/endpoints";
 import { handleApiError } from "../lib/error";
 
-export const useBusLocations = (
-    onError?: (message: string) => void
-) => {
+export const useBusLocations = (onError?: (message: string) => void) => {
     return useQuery({
         queryKey: ["busLocations"],
         queryFn: async () => {
@@ -21,7 +19,7 @@ export const useBusLocations = (
                 return [];
             }
         },
-        refetchInterval: 5000,
+        refetchInterval: 7000,
         refetchIntervalInBackground: true,
         retry: 2,
     });
diff --git a/src/components/Bubble.tsx b/src/components/Bubble.tsx
index adbdfd3..4d10bac 100644
--- a/src/components/Bubble.tsx
+++ b/src/components/Bubble.tsx
@@ -57,7 +57,7 @@ export default function Bubble({ stop, onClose }: Props) {
                     document.body.appendChild(el);
 
                     const rawName = String(stop.name);
-                    
+
                     // Check if it's a bus key (starts with "bus.")
                     let displayName: string;
                     if (rawName.startsWith("bus.")) {
@@ -67,15 +67,18 @@ export default function Bubble({ stop, onClose }: Props) {
                         // It's a bus stop name
                         const translationKey = `busStop.${rawName}`;
                         const translatedName = t(translationKey);
-                        
+
                         // If translation key is returned as-is, use the raw name instead
-                        const displayBaseName = translatedName === translationKey ? rawName : translatedName;
+                        const displayBaseName =
+                            translatedName === translationKey
+                                ? rawName
+                                : translatedName;
 
                         displayName = displayBaseName;
                         if (DISPLAY_NAME_MAP[rawName]) {
-                            const directionKey = DISPLAY_NAME_MAP[rawName].includes(
-                                "죽전역"
-                            )
+                            const directionKey = DISPLAY_NAME_MAP[
+                                rawName
+                            ].includes("죽전역")
                                 ? "direction.toJukjeon"
                                 : "direction.toDKU";
                             displayName = `${displayBaseName} (${t(directionKey)})`;
diff --git a/src/components/SettingsPanel.tsx b/src/components/SettingsPanel.tsx
index 91dd319..a5994b1 100644
--- a/src/components/SettingsPanel.tsx
+++ b/src/components/SettingsPanel.tsx
@@ -83,7 +83,9 @@ const SettingsPanel: React.FC<SettingsPanelProps> = ({
                     <select
                         id={langId}
                         value={language}
-                        onChange={(e) => setLanguage(e.target.value as Language)}
+                        onChange={(e) =>
+                            setLanguage(e.target.value as Language)
+                        }
                         style={{
                             padding: 8,
                             borderRadius: 6,
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
deleted file mode 100644
index 26f8f64..0000000
--- a/src/components/ui/button.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-import type * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const buttonVariants = cva(
-    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-    {
-        variants: {
-            variant: {
-                default:
-                    "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-                destructive:
-                    "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-                outline:
-                    "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-                secondary:
-                    "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-                ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-                link: "text-primary underline-offset-4 hover:underline",
-            },
-            size: {
-                default: "h-9 px-4 py-2 has-[>svg]:px-3",
-                sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-                lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-                icon: "size-9",
-            },
-        },
-        defaultVariants: {
-            variant: "default",
-            size: "default",
-        },
-    }
-);
-
-function Button({
-    className,
-    variant,
-    size,
-    asChild = false,
-    ...props
-}: React.ComponentProps<"button"> &
-    VariantProps<typeof buttonVariants> & {
-        asChild?: boolean;
-    }) {
-    const Comp = asChild ? Slot : "button";
-
-    return (
-        <Comp
-            data-slot="button"
-            className={cn(buttonVariants({ variant, size, className }))}
-            {...props}
-        />
-    );
-}
-
-export { Button, buttonVariants };
diff --git a/src/contexts/LanguageContext.tsx b/src/contexts/LanguageContext.tsx
index b6a2b61..3ca61d8 100644
--- a/src/contexts/LanguageContext.tsx
+++ b/src/contexts/LanguageContext.tsx
@@ -22,7 +22,7 @@ const translations: Translations = {
         // Directions
         "direction.toDKU": "단국대학교 방향",
         "direction.toJukjeon": "죽전역 방향",
-        
+
         // Bus Labels
         "bus.shuttleToDKU": "셔틀버스(단국대학교 방향)",
         "bus.shuttleToJukjeon": "셔틀버스(죽전역 방향)",
@@ -55,7 +55,7 @@ const translations: Translations = {
         // Directions
         "direction.toDKU": "→ Dankook Univ.",
         "direction.toJukjeon": "→ Jukjeon Stn.",
-        
+
         // Bus Labels
         "bus.shuttleToDKU": "Shuttle Bus (→ Dankook Univ.)",
         "bus.shuttleToJukjeon": "Shuttle Bus (→ Jukjeon Stn.)",
@@ -108,11 +108,15 @@ export function LanguageProvider({
     };
 
     const formatBusNumber = (number: number): string => {
-        return language === "ko" ? `셔틀버스 ${number}` : `Shuttle Bus ${number}`;
+        return language === "ko"
+            ? `셔틀버스 ${number}`
+            : `Shuttle Bus ${number}`;
     };
 
     return (
-        <LanguageContext.Provider value={{ language, setLanguage, t, formatTime, formatBusNumber }}>
+        <LanguageContext.Provider
+            value={{ language, setLanguage, t, formatTime, formatBusNumber }}
+        >
             {children}
         </LanguageContext.Provider>
     );
diff --git a/src/hooks/useBusSelection.ts b/src/hooks/useBusSelection.ts
index c437976..e97a9af 100644
--- a/src/hooks/useBusSelection.ts
+++ b/src/hooks/useBusSelection.ts
@@ -22,7 +22,11 @@ export const useBusSelection = (
                             : bus.direction === false
                               ? "bus.shuttleToJukjeon"
                               : "bus.shuttle";
-                    setBubbleStop({ lat: bus.lat, lng: bus.lng, name: directionKey });
+                    setBubbleStop({
+                        lat: bus.lat,
+                        lng: bus.lng,
+                        name: directionKey,
+                    });
                 } catch {
                     /* ignore */
                 }
diff --git a/src/hooks/useKakaoMap.ts b/src/hooks/useKakaoMap.ts
index 638eb10..01e3b2f 100644
--- a/src/hooks/useKakaoMap.ts
+++ b/src/hooks/useKakaoMap.ts
@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import type { KakaoMap } from "../types/kakao";
 
 interface UseKakaoMapOptions {
     mapId: string;
@@ -10,7 +11,7 @@ interface UseKakaoMapOptions {
 }
 
 export const useKakaoMap = ({ mapId, toast }: UseKakaoMapOptions) => {
-    const [mapInstance, setMapInstance] = useState<unknown>(null);
+    const [mapInstance, setMapInstance] = useState<KakaoMap | null>(null);
 
     useEffect(() => {
         const kakaoApiKey = import.meta.env.VITE_KAKAO_MAP_API_KEY;
diff --git a/src/hooks/useMapOverlays.ts b/src/hooks/useMapOverlays.ts
index 01b7b40..212de9c 100644
--- a/src/hooks/useMapOverlays.ts
+++ b/src/hooks/useMapOverlays.ts
@@ -1,29 +1,33 @@
 import { useEffect } from "react";
 import type { Bus } from "../data/bus";
 import type { BusStop } from "../data/busStops";
+import type { KakaoMap } from "../types/kakao";
 import {
+    clearAllBusOverlays,
     createBusOverlays,
     createBusStopOverlays,
-    type OverlayHandle,
 } from "../utils/mapOverlays";
 
 export const useMapOverlays = (
-    map: unknown,
+    map: KakaoMap | null,
     busStops: BusStop[],
     buses: Bus[],
     selectedStopName?: string,
     onStopClick?: (stop: BusStop) => void
 ) => {
+    // 버스 정류장 오버레이 관리
     useEffect(() => {
         if (!map) return;
 
-        const overlays: OverlayHandle[] = [
-            ...createBusStopOverlays(map, busStops, selectedStopName, onStopClick),
-            ...createBusOverlays(map, buses),
-        ];
+        const stopOverlays = createBusStopOverlays(
+            map,
+            busStops,
+            selectedStopName,
+            onStopClick
+        );
 
         return () => {
-            overlays.forEach((overlay) => {
+            stopOverlays.forEach((overlay) => {
                 try {
                     overlay.setMap(null);
                 } catch {
@@ -36,5 +40,18 @@ export const useMapOverlays = (
                 }
             });
         };
-    }, [map, busStops, buses, selectedStopName, onStopClick]);
+    }, [map, busStops, selectedStopName, onStopClick]);
+
+    useEffect(() => {
+        // 컴포넌트 언마운트 또는 map 변경 시 정리
+        return () => {
+            clearAllBusOverlays();
+        };
+    }, []);
+
+    // 버스 오버레이 업데이트 (캐시 유지)
+    useEffect(() => {
+        if (!map) return;
+        createBusOverlays(map, buses);
+    }, [map, buses]);
 };
diff --git a/src/types/kakao.d.ts b/src/types/kakao.d.ts
index 236c77c..ed07597 100644
--- a/src/types/kakao.d.ts
+++ b/src/types/kakao.d.ts
@@ -1,11 +1,11 @@
-export {};
-
-interface KakaoLatLng {
+export interface KakaoLatLng {
     lat: number;
     lng: number;
+    getLat(): number;
+    getLng(): number;
 }
 
-interface KakaoMap {
+export interface KakaoMap {
     setCenter: (pos: KakaoLatLng) => void;
     setMinLevel: (level: number) => void;
     setMaxLevel: (level: number) => void;
@@ -15,8 +15,16 @@ interface KakaoMap {
         | { getLat: () => number; getLng: () => number };
 }
 
-interface KakaoOverlay {
+export interface KakaoOverlay {
     setMap: (map: KakaoMap | null) => void;
+    setPosition: (position: KakaoLatLng) => void;
+    getPosition(): KakaoLatLng;
+    setContent(content: HTMLElement | string): void;
+    getContent(): HTMLElement;
+    setVisible(visible: boolean): void;
+    getVisible(): boolean;
+    setZIndex(zIndex: number): void;
+    getZIndex(): number;
 }
 
 declare global {
diff --git a/src/utils/mapOverlays.ts b/src/utils/mapOverlays.ts
index 8dda926..bb85b45 100644
--- a/src/utils/mapOverlays.ts
+++ b/src/utils/mapOverlays.ts
@@ -1,14 +1,51 @@
 import busIconSvg from "../assets/busIcon.svg";
 import type { Bus } from "../data/bus";
 import type { BusStop } from "../data/busStops";
+import type { KakaoMap, KakaoOverlay } from "../types/kakao";
+
+// 상수 정의
+const BUS_ICON_DIMENSIONS = {
+    width: 18,
+    height: 34,
+} as const;
+
+const BUS_STOP_ICON_DIMENSIONS = {
+    width: 48,
+    height: 56,
+} as const;
+
+const ANIMATION_DURATION = "0.3s";
+const ROTATION_EASING = "ease-out";
 
 export interface OverlayHandle {
-    setMap: (map: unknown) => void;
+    setMap: (map: KakaoMap | null) => void;
     cleanup?: () => void;
 }
 
 // 버스 ID별 이전 위치와 회전 값을 저장
-const previousBusPositions = new Map<string, { lat: number; lng: number; rotation: number }>();
+const previousBusPositions = new Map<
+    string,
+    { lat: number; lng: number; rotation: number }
+>();
+
+// 버스 ID별 오버레이와 DOM 요소를 캐시
+const busOverlayCache = new Map<
+    string,
+    {
+        overlay: KakaoOverlay;
+        img: HTMLImageElement;
+        div: HTMLDivElement;
+    }
+>();
+
+// 모든 버스 오버레이 정리 (페이지 이동 시 호출)
+export const clearAllBusOverlays = () => {
+    for (const [busId, cached] of busOverlayCache.entries()) {
+        cached.overlay.setMap(null);
+        busOverlayCache.delete(busId);
+        previousBusPositions.delete(busId);
+    }
+};
 
 // 두 좌표 사이의 각도 계산 (북쪽 기준, 시계방향)
 const calculateAngle = (
@@ -19,22 +56,42 @@ const calculateAngle = (
 ): number => {
     const deltaLat = currLat - prevLat;
     const deltaLng = currLng - prevLng;
-    
+
     // atan2를 사용하여 각도 계산 (라디안)
     // atan2(y, x)는 x축 기준 각도를 반환하므로, 북쪽 기준으로 변환
     const angleRad = Math.atan2(deltaLng, deltaLat);
-    
+
     // 라디안을 도(degree)로 변환
     const angleDeg = angleRad * (180 / Math.PI);
-    
+
     return angleDeg;
 };
 
+// 최단 경로로 회전하도록 각도 정규화 (0 ~ 360 범위)
+const normalizeRotation = (newAngle: number, prevAngle: number): number => {
+    // 이전 각도를 0 ~ 360 범위로 정규화
+    const normalizedPrev = ((prevAngle % 360) + 360) % 360;
+
+    // 새 각도도 0 ~ 360 범위로 정규화
+    const normalizedNew = ((newAngle % 360) + 360) % 360;
+
+    // 각도 차이 계산
+    let diff = normalizedNew - normalizedPrev;
+
+    // 최단 경로로 차이 조정
+    if (diff > 180) diff -= 360;
+    if (diff < -180) diff += 360;
+
+    // 정규화된 이전 각도에서 최단 거리만큼 회전 후 0~360 범위로
+    const result = normalizedPrev + diff;
+    return ((result % 360) + 360) % 360;
+};
+
 // Helper to create Lucide icon as SVG element
 const createIconSVG = (iconType: "mapPin" | "bus", showCircle = false) => {
     const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-    svg.setAttribute("width", "48");
-    svg.setAttribute("height", "56");
+    svg.setAttribute("width", String(BUS_STOP_ICON_DIMENSIONS.width));
+    svg.setAttribute("height", String(BUS_STOP_ICON_DIMENSIONS.height));
     svg.setAttribute("viewBox", "0 0 24 40");
     svg.setAttribute("fill", "none");
     svg.setAttribute("stroke", showCircle ? "#dc2626" : "#2563eb"); // red-600 or blue-600
@@ -152,7 +209,7 @@ const createIconSVG = (iconType: "mapPin" | "bus", showCircle = false) => {
 };
 
 export const createBusStopOverlays = (
-    map: unknown,
+    map: KakaoMap,
     busStops: BusStop[],
     selectedStopName?: string,
     onStopClick?: (stop: BusStop) => void
@@ -163,8 +220,8 @@ export const createBusStopOverlays = (
         const isSelected = selectedStopName === stop.name;
 
         const busIconDiv = document.createElement("div");
-        busIconDiv.style.width = "48px";
-        busIconDiv.style.height = "56px";
+        busIconDiv.style.width = `${BUS_STOP_ICON_DIMENSIONS.width}px`;
+        busIconDiv.style.height = `${BUS_STOP_ICON_DIMENSIONS.height}px`;
         busIconDiv.style.display = "flex";
         busIconDiv.style.alignItems = "center";
         busIconDiv.style.justifyContent = "center";
@@ -213,7 +270,9 @@ export const createBusStopOverlays = (
         // Return overlay with cleanup method
         return {
             setMap: (m: unknown) => {
-                (overlay as unknown as { setMap: (m: unknown) => void }).setMap(m);
+                (overlay as unknown as { setMap: (m: unknown) => void }).setMap(
+                    m
+                );
             },
             cleanup: () => {
                 busIconDiv.removeEventListener("click", handleClick);
@@ -224,17 +283,24 @@ export const createBusStopOverlays = (
 };
 
 export const createBusOverlays = (
-    map: unknown,
+    map: KakaoMap,
     buses: Bus[]
 ): OverlayHandle[] => {
     if (!map || typeof window === "undefined" || !window.kakao?.maps) return [];
 
     // 현재 활성 버스 ID 집합
-    const activeBusIds = new Set(buses.map(bus => bus.shuttleId || `${bus.lat}-${bus.lng}`));
-    
-    // 비활성 버스 ID를 previousBusPositions에서 제거 (메모리 누수 방지)
-    for (const busId of previousBusPositions.keys()) {
+    const activeBusIds = new Set(
+        buses.map((bus) => bus.shuttleId || `${bus.lat}-${bus.lng}`)
+    );
+
+    // 비활성 버스 ID를 캐시와 previousBusPositions에서 제거 (메모리 누수 방지)
+    for (const busId of busOverlayCache.keys()) {
         if (!activeBusIds.has(busId)) {
+            const cached = busOverlayCache.get(busId);
+            if (cached) {
+                cached.overlay.setMap(null);
+            }
+            busOverlayCache.delete(busId);
             previousBusPositions.delete(busId);
         }
     }
@@ -242,71 +308,99 @@ export const createBusOverlays = (
     return buses.map((bus) => {
         const busId = bus.shuttleId || `${bus.lat}-${bus.lng}`;
         const currentPosition = { lat: bus.lat, lng: bus.lng };
-        
+
         // 이전 위치가 있으면 각도 계산
         let rotation = 0;
         const previousData = previousBusPositions.get(busId);
-        
+
         if (previousData) {
             // 이전 위치와 현재 위치가 다른 경우에만 각도 계산
             if (
                 previousData.lat !== currentPosition.lat ||
                 previousData.lng !== currentPosition.lng
             ) {
-                rotation = calculateAngle(
+                const newAngle = calculateAngle(
                     previousData.lat,
                     previousData.lng,
                     currentPosition.lat,
                     currentPosition.lng
                 );
+                // 최단 경로로 회전하도록 정규화
+                rotation = normalizeRotation(newAngle, previousData.rotation);
             } else {
                 // 위치가 변경되지 않았으면 이전 회전 값 재사용
                 rotation = previousData.rotation;
-            } 
+            }
         }
-        
+
         // 현재 위치와 회전 값을 저장
-        previousBusPositions.set(busId, { 
-            lat: currentPosition.lat, 
-            lng: currentPosition.lng, 
-            rotation 
+        previousBusPositions.set(busId, {
+            lat: currentPosition.lat,
+            lng: currentPosition.lng,
+            rotation,
         });
 
-        const busDiv = document.createElement("div");
-        busDiv.style.width = "18px";
-        busDiv.style.height = "34px";
-        busDiv.style.display = "flex";
-        busDiv.style.alignItems = "center";
-        busDiv.style.justifyContent = "center";
-        busDiv.style.cursor = "pointer";
-        busDiv.setAttribute("role", "img");
-        busDiv.setAttribute("aria-label", bus.shuttleId || "bus");
-
-        const img = document.createElement("img");
-        img.src = busIconSvg;
-        img.alt = "버스";
-        img.style.width = "18px";
-        img.style.height = "34px";
-        // 회전 적용
-        img.style.transform = `rotate(${rotation}deg)`;
-        img.style.transformOrigin = "center center";
-        img.style.transition = "transform 0.3s ease-out";
-        busDiv.appendChild(img);
-
-        const busPosition = new window.kakao.maps.LatLng(bus.lat, bus.lng);
-        const busOverlay = new window.kakao.maps.CustomOverlay({
-            position: busPosition,
-            content: busDiv,
-            yAnchor: 1,
-        });
-        (busOverlay as unknown as { setMap: (m: unknown) => void }).setMap(map);
+        // 캐시된 오버레이가 있으면 재사용
+        let cached = busOverlayCache.get(busId);
+
+        if (cached) {
+            // 기존 오버레이 업데이트
+            const busPosition = new window.kakao.maps.LatLng(bus.lat, bus.lng);
+            cached.overlay.setPosition(busPosition);
+
+            // map 인스턴스가 변경되었을 수 있으므로 항상 setMap 호출
+            cached.overlay.setMap(map);
+
+            // 회전 업데이트 (CSS transition이 적용됨)
+            cached.img.style.transform = `rotate(${rotation}deg)`;
+        } else {
+            // 새 오버레이 생성
+            const busDiv = document.createElement("div");
+            busDiv.style.width = `${BUS_ICON_DIMENSIONS.width}px`;
+            busDiv.style.height = `${BUS_ICON_DIMENSIONS.height}px`;
+            busDiv.style.display = "flex";
+            busDiv.style.alignItems = "center";
+            busDiv.style.justifyContent = "center";
+            busDiv.style.cursor = "pointer";
+            busDiv.setAttribute("role", "img");
+            busDiv.setAttribute("aria-label", bus.shuttleId || "bus");
+
+            const img = document.createElement("img");
+            img.src = busIconSvg;
+            img.alt = "버스";
+            img.style.width = `${BUS_ICON_DIMENSIONS.width}px`;
+            img.style.height = `${BUS_ICON_DIMENSIONS.height}px`;
+            img.style.transform = `rotate(${rotation}deg)`;
+            img.style.transformOrigin = "center center";
+            img.style.transition = `transform ${ANIMATION_DURATION} ${ROTATION_EASING}`;
+            busDiv.appendChild(img);
+
+            const busPosition = new window.kakao.maps.LatLng(bus.lat, bus.lng);
+            const busOverlay = new window.kakao.maps.CustomOverlay({
+                position: busPosition,
+                content: busDiv,
+                yAnchor: 1,
+            });
+            busOverlay.setMap(map);
+
+            // 캐시에 저장
+            cached = { overlay: busOverlay, img, div: busDiv };
+            busOverlayCache.set(busId, cached);
+        }
 
         return {
-            setMap: (m: unknown) => {
-                (busOverlay as unknown as { setMap: (m: unknown) => void }).setMap(m);
+            setMap: (m) => {
+                if (cached) {
+                    cached.overlay.setMap(m);
+                }
             },
             cleanup: () => {
-                // 오버레이 제거 시 previousBusPositions에서도 제거
+                // 오버레이를 지도에서 제거
+                if (cached) {
+                    cached.overlay.setMap(null);
+                }
+                // 캐시와 previousBusPositions에서도 제거
+                busOverlayCache.delete(busId);
                 previousBusPositions.delete(busId);
             },
         };