diff --git a/frontend/src/components/google-maps/marker/components/MaxDeltaAreaMarkerContainer/components/RegionMarkerRenderer.tsx b/frontend/src/components/google-maps/marker/components/MaxDeltaAreaMarkerContainer/components/RegionMarkerRenderer.tsx
index b3233bfda..0e521cfe2 100644
--- a/frontend/src/components/google-maps/marker/components/MaxDeltaAreaMarkerContainer/components/RegionMarkerRenderer.tsx
+++ b/frontend/src/components/google-maps/marker/components/MaxDeltaAreaMarkerContainer/components/RegionMarkerRenderer.tsx
@@ -1,6 +1,7 @@
-import { useEffect } from 'react';
+import { useLayoutEffect } from 'react';
+
+import { useMarker } from '@marker/hooks/useRenderMarker';
 
-import { useRenderRegionMarker } from '../hooks/useRenderRegionMarker';
 import type { Region } from '../types';
 
 export interface RegionMarkerProps {
@@ -8,12 +9,12 @@ export interface RegionMarkerProps {
 }
 
 const RegionMarkerRenderer = ({ region }: RegionMarkerProps) => {
-  const { renderRegionMarker } = useRenderRegionMarker();
+  const { renderRegionMarker } = useMarker();
 
-  useEffect(() => {
-    const unmountRegionMarker = renderRegionMarker(region);
+  useLayoutEffect(() => {
+    const unmount = renderRegionMarker(region);
 
-    return unmountRegionMarker;
+    return unmount;
   }, []);
 
   return <></>;
diff --git a/frontend/src/components/google-maps/marker/components/MaxDeltaAreaMarkerContainer/hooks/useRenderRegionMarker.tsx b/frontend/src/components/google-maps/marker/components/MaxDeltaAreaMarkerContainer/hooks/useRenderRegionMarker.tsx
deleted file mode 100644
index 7e2448542..000000000
--- a/frontend/src/components/google-maps/marker/components/MaxDeltaAreaMarkerContainer/hooks/useRenderRegionMarker.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { createRoot } from 'react-dom/client';
-
-import { useExternalValue } from '@utils/external-state';
-
-import { getGoogleMapStore, googleMapActions } from '@stores/google-maps/googleMapStore';
-
-import RegionMarker from '../components/RegionMarker';
-import type { Region } from '../types';
-
-export const useRenderRegionMarker = () => {
-  const googleMap = useExternalValue(getGoogleMapStore());
-
-  const renderRegionMarker = (region: Region) => {
-    const { latitude, longitude, count, regionName } = region;
-
-    const container = document.createElement('div');
-
-    container.style.opacity = '0';
-    container.classList.add('marker-animation');
-    container.addEventListener('animationend', () => {
-      container.classList.remove('marker-animation');
-      container.style.opacity = '1';
-    });
-
-    const markerInstance = new google.maps.marker.AdvancedMarkerElement({
-      position: { lat: latitude, lng: longitude },
-      map: googleMap,
-      title: regionName,
-      content: container,
-    });
-
-    createRoot(container).render(<RegionMarker count={count} regionName={regionName} />);
-
-    markerInstance.addListener('click', () => {
-      googleMapActions.moveTo({ lat: latitude, lng: longitude }, 12);
-    });
-
-    return () => {
-      markerInstance.map = null;
-    };
-  };
-
-  return { renderRegionMarker };
-};
diff --git a/frontend/src/components/google-maps/marker/components/SmallMediumDeltaAreaMarkerContainer/components/marker/CarffeineMarkerRenderer.tsx b/frontend/src/components/google-maps/marker/components/SmallMediumDeltaAreaMarkerContainer/components/marker/CarffeineMarkerRenderer.tsx
index 0b8f668d9..966b4d10b 100644
--- a/frontend/src/components/google-maps/marker/components/SmallMediumDeltaAreaMarkerContainer/components/marker/CarffeineMarkerRenderer.tsx
+++ b/frontend/src/components/google-maps/marker/components/SmallMediumDeltaAreaMarkerContainer/components/marker/CarffeineMarkerRenderer.tsx
@@ -8,7 +8,6 @@ interface Props {
   station: StationMarker;
 }
 
-// TODO: 여기다가 옵셔널로 infoWindow 열리고 닫히는 속성 넣어서 한번 컨트롤 해보기
 const CarffeineMarkerRenderer = ({ station }: Props) => {
   const { renderCarffeineMarker } = useMarker();
 
diff --git a/frontend/src/components/google-maps/marker/hooks/useRenderMarker.tsx b/frontend/src/components/google-maps/marker/hooks/useRenderMarker.tsx
index c8861951b..e7c2f8b93 100644
--- a/frontend/src/components/google-maps/marker/hooks/useRenderMarker.tsx
+++ b/frontend/src/components/google-maps/marker/hooks/useRenderMarker.tsx
@@ -1,6 +1,8 @@
 import { createRoot } from 'react-dom/client';
 
 import StyledClusterMarker from '@marker/components/LargeDeltaAreaMarkerContainer/components/StyledClusterMarker';
+import RegionMarker from '@marker/components/MaxDeltaAreaMarkerContainer/components/RegionMarker';
+import type { Region } from '@marker/components/MaxDeltaAreaMarkerContainer/types';
 import CarFfeineMarker from '@marker/components/SmallMediumDeltaAreaMarkerContainer/components/CarFfeineMarker';
 import {
   addMarkerInstanceToExternalStore,
@@ -76,6 +78,23 @@ export const useMarker = () => {
     };
   };
 
+  const renderRegionMarker = (region: Region) => {
+    const { latitude, longitude, count, regionName } = region;
+
+    const markerInstance = createMarkerInstance(latitude, longitude);
+    const container = createMarkerDomElement();
+
+    markerInstance.title = regionName;
+    markerInstance.content = container;
+
+    bindRegionMarkerClickEvent(markerInstance, region);
+    createRoot(container).render(<RegionMarker count={count} regionName={regionName} />);
+
+    return () => {
+      markerInstance.map = null;
+    };
+  };
+
   const bindStationMarkerClickEvent = (
     markerInstance: google.maps.marker.AdvancedMarkerElement,
     stationId: string
@@ -102,9 +121,21 @@ export const useMarker = () => {
     });
   };
 
+  const bindRegionMarkerClickEvent = (
+    markerInstance: google.maps.marker.AdvancedMarkerElement,
+    region: Region
+  ) => {
+    const { latitude, longitude } = region;
+
+    markerInstance.addListener('click', () => {
+      googleMapActions.moveTo({ lat: latitude, lng: longitude }, 12);
+    });
+  };
+
   return {
     renderDefaultMarker,
     renderCarffeineMarker,
     renderClusterMarker,
+    renderRegionMarker,
   };
 };