diff --git a/src/components/Map.tsx b/src/components/Map.tsx
index 7b9a2c2..36501c7 100644
--- a/src/components/Map.tsx
+++ b/src/components/Map.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react'
 import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'
 import { Icon } from 'leaflet'
 import { Attraction } from '../types'
@@ -18,6 +19,13 @@ const attractionIcon = new Icon({
 })
 
 const Map = ({ attractions }: MapProps) => {
+  const [isMounted, setIsMounted] = useState(false)
+  
+  // 클라이언트 사이드에서만 렌더링 (SSR 에러 방지)
+  useEffect(() => {
+    setIsMounted(true)
+  }, [])
+
   // 구마모토 중심 좌표
   const kumamotoCenter: [number, number] = [32.8031, 130.7079]
   
@@ -25,6 +33,18 @@ const Map = ({ attractions }: MapProps) => {
   const tilesUrl = import.meta.env.VITE_MAP_TILES_URL || 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
   const isCustomTiles = !!import.meta.env.VITE_MAP_TILES_URL
 
+  // 서버 사이드에서는 로딩 화면 표시
+  if (!isMounted) {
+    return (
+      <div className="bg-white rounded-lg shadow-md p-6">
+        <h2 className="text-2xl font-bold text-gray-800 mb-6">🗺️ 구마모토 지도</h2>
+        <div className="w-full h-96 rounded-lg overflow-hidden border border-gray-200 flex items-center justify-center bg-gray-100">
+          <p className="text-gray-500">지도를 불러오는 중...</p>
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div className="bg-white rounded-lg shadow-md p-6">
       <h2 className="text-2xl font-bold text-gray-800 mb-6">🗺️ 구마모토 지도</h2>