diff --git a/index.html b/index.html
index e631329..aef5c90 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,7 @@
   </head>
   <body>
     <div id="app"></div>
+    <script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=042e55278939bfa9163a67a6fe4021c0&libraries=services,clusterer,drawing"></script>
     <script type="module" src="/src/main.js"></script>
   </body>
 </html>
diff --git a/src/assets/main.css b/src/assets/main.css
index 804254a..b7ccd1a 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,6 +1,7 @@
 @import './base.css';
 
 #app {
+  height: 100vh;
   margin: 0 auto;
   font-weight: normal;
 }
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index 9cb2404..c4cd744 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -9,7 +9,7 @@ import { RouterLink } from 'vue-router';
         <RouterLink :to="{ name: 'home' }">EnjoyTrip</RouterLink>
       </div>
       <div class="menuWrapper">
-        <div class="item"><RouterLink :to="{ name: 'home' }">검색</RouterLink></div>
+        <div class="item"><RouterLink :to="{ name: 'search' }">검색</RouterLink></div>
         <div class="item"><RouterLink :to="{ name: 'board' }">게시판</RouterLink></div>
         <div class="item" v-if="true"><RouterLink :to="{ name: 'home' }">로그인</RouterLink></div>
         <template v-else>
diff --git a/src/components/common/KakaoMap.vue b/src/components/common/KakaoMap.vue
new file mode 100644
index 0000000..2da57aa
--- /dev/null
+++ b/src/components/common/KakaoMap.vue
@@ -0,0 +1,30 @@
+<!-- eslint-disable no-undef -->
+<script setup>
+import { onMounted, ref } from 'vue';
+
+const mapDiv = ref(null);
+const map = ref(null);
+
+onMounted(() => {
+  const options = {
+    center: new kakao.maps.LatLng(33.450701, 126.570667),
+    level: 3,
+  };
+
+  map.value = new kakao.maps.Map(mapDiv.value, options);
+});
+</script>
+
+<template>
+  <div id="map" ref="mapDiv" />
+</template>
+
+<style scoped>
+#map {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/components/search/SideBar.vue b/src/components/search/SideBar.vue
new file mode 100644
index 0000000..90ea1ba
--- /dev/null
+++ b/src/components/search/SideBar.vue
@@ -0,0 +1,18 @@
+<script setup></script>
+
+<template>
+  <div class="sidebar">asdf</div>
+</template>
+
+<style scoped>
+.sidebar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 320px;
+  height: 100%;
+  background-color: var(--color-background);
+  z-index: 99;
+  border-right: 1px solid var(--color-border);
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index f8903b4..0c9d3a3 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -30,6 +30,17 @@ const router = createRouter({
         },
       ],
     },
+    {
+      path: '/search',
+      component: () => import('@/views/SearchView.vue'),
+      children: [
+        {
+          path: '',
+          name: 'search',
+          component: () => import('@/components/common/KakaoMap.vue'),
+        },
+      ],
+    },
   ],
 });
 
diff --git a/src/views/SearchView.vue b/src/views/SearchView.vue
new file mode 100644
index 0000000..ef5ddd2
--- /dev/null
+++ b/src/views/SearchView.vue
@@ -0,0 +1,19 @@
+<script setup>
+import AppHeader from '@/components/AppHeader.vue';
+import { RouterView } from 'vue-router';
+</script>
+
+<template>
+  <AppHeader />
+  <main>
+    <RouterView />
+  </main>
+</template>
+
+<style scoped>
+main {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+</style>
