diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 230fea3f..62e18b73 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -13,7 +13,7 @@
         "@tanstack/react-query-devtools": "^5.17.9",
         "axios": "^1.5.1",
         "history": "^5.3.0",
-        "map-befine-swiper": "^0.8.3",
+        "map-befine-swiper": "^0.9.4",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-ga4": "^2.1.0",
@@ -18522,9 +18522,9 @@
       }
     },
     "node_modules/map-befine-swiper": {
-      "version": "0.8.3",
-      "resolved": "https://registry.npmjs.org/map-befine-swiper/-/map-befine-swiper-0.8.3.tgz",
-      "integrity": "sha512-yWUTckvw6hX/Qu+KwLV26UFKVfZyjje8EbMh6aN16DS4KNttO2vTQXUSTWbI8YarOpGyax1rwK0ImNTIaITdgw==",
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/map-befine-swiper/-/map-befine-swiper-0.9.4.tgz",
+      "integrity": "sha512-oXG038LTTEzM/aQM7Yg+nOa3yUqDDhI5pz0MJ6nxeaZY00l8JfUvz12gDBwDJXhJCx9iBOnPxn4YHi9bul8mQQ==",
       "dependencies": {
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
diff --git a/frontend/package.json b/frontend/package.json
index d9dba4f1..1de20651 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -20,7 +20,7 @@
     "@tanstack/react-query-devtools": "^5.17.9",
     "axios": "^1.5.1",
     "history": "^5.3.0",
-    "map-befine-swiper": "^0.8.3",
+    "map-befine-swiper": "^0.9.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-ga4": "^2.1.0",
diff --git a/frontend/src/components/Banner/index.tsx b/frontend/src/components/Banner/index.tsx
index 091e0c75..a568a3c0 100644
--- a/frontend/src/components/Banner/index.tsx
+++ b/frontend/src/components/Banner/index.tsx
@@ -22,17 +22,7 @@ export default function Banner() {
   };
 
   return (
-    <Swiper
-      as="section"
-      width={1140}
-      height={400}
-      $simpleTab
-      $tabBoxPosition="bottom"
-      $isNotTabBoxShow
-      swipeable
-      swiper
-      autoplay
-    >
+    <Swiper tag="section" width={1140} height="auto" $tabBoxPosition="bottom" autoplay>
       <Tab label="붕어빵 지도">
         <Box cursor="pointer" onClick={goToBoongABbangTopic}>
           <BannerImage
diff --git a/frontend/src/components/PinImageContainer/index.tsx b/frontend/src/components/PinImageContainer/index.tsx
index b07a0e43..1584ff6d 100644
--- a/frontend/src/components/PinImageContainer/index.tsx
+++ b/frontend/src/components/PinImageContainer/index.tsx
@@ -59,9 +59,7 @@ function PinImageContainer({ images, getPinData }: PinImageContainerProps) {
                   $errorDefaultSrc={NOT_FOUND_IMAGE}
                 />
               </div>
-              <RemoveImageIconWrapper
-                onClick={() => onRemovePinImage(image.id)}
-              >
+              <RemoveImageIconWrapper onClick={() => onRemovePinImage(image.id)}>
                 <RemoveImageButton />
               </RemoveImageIconWrapper>
             </ImageWrapper>
@@ -84,15 +82,7 @@ function PinImageContainer({ images, getPinData }: PinImageContainerProps) {
 
   return (
     <Wrapper>
-      <Swiper
-        as="ul"
-        width={330}
-        height={100}
-        $elementsOneTab={3}
-        swiper
-        swipeable
-        $isNotTabBoxShow
-      >
+      <Swiper tag="ul" width={330} height={100} $slidePerTab={3}>
         {images.map((image, index) => (
           <Tab label={`${index}`} key={image.id}>
             <ImageWrapper key={`image-${index}`}>
@@ -105,9 +95,7 @@ function PinImageContainer({ images, getPinData }: PinImageContainerProps) {
                   $errorDefaultSrc={NOT_FOUND_IMAGE}
                 />
               </div>
-              <RemoveImageIconWrapper
-                onClick={() => onRemovePinImage(image.id)}
-              >
+              <RemoveImageIconWrapper onClick={() => onRemovePinImage(image.id)}>
                 <RemoveImageButton />
               </RemoveImageIconWrapper>
             </ImageWrapper>
diff --git a/frontend/src/components/TopicCardContainer/index.tsx b/frontend/src/components/TopicCardContainer/index.tsx
index 48aa58f5..0099d681 100644
--- a/frontend/src/components/TopicCardContainer/index.tsx
+++ b/frontend/src/components/TopicCardContainer/index.tsx
@@ -30,22 +30,11 @@ function TopicCardContainer({
     <section>
       <Flex $justifyContent="space-between" $alignItems="flex-end">
         <Box>
-          <MediaText
-            as="h2"
-            color="black"
-            $fontSize="extraLarge"
-            $fontWeight="bold"
-            tabIndex={0}
-          >
+          <MediaText as="h2" color="black" $fontSize="extraLarge" $fontWeight="bold" tabIndex={0}>
             {containerTitle}
           </MediaText>
           <Space size={0} />
-          <MediaText
-            color="gray"
-            $fontSize="default"
-            $fontWeight="normal"
-            tabIndex={0}
-          >
+          <MediaText color="gray" $fontSize="default" $fontWeight="normal" tabIndex={0}>
             {containerDescription}
           </MediaText>
         </Box>
@@ -68,14 +57,16 @@ function TopicCardContainer({
       <Space size={4} />
 
       <Swiper
-        as="ul"
+        tag="ul"
         width={1140}
-        height={300}
-        $elementsOneTab={5}
-        $elementsMediaQueries={[1180, 900, 660, 320]}
-        swiper
-        swipeable
-        $isNotTabBoxShow
+        height="auto"
+        $slidePerTab={5}
+        $breakPoints={{
+          1100: 4,
+          900: 3,
+          660: 2,
+          320: 1,
+        }}
       >
         {topics &&
           topics.map(
diff --git a/frontend/webpack.common.js b/frontend/webpack.common.js
index 2a5777a5..83c60894 100644
--- a/frontend/webpack.common.js
+++ b/frontend/webpack.common.js
@@ -2,7 +2,6 @@ const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { ProvidePlugin, DefinePlugin } = require('webpack');
 const DotenvWebpackPlugin = require('dotenv-webpack');
-const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const CompressionPlugin = require('compression-webpack-plugin');
 
 module.exports = {
@@ -29,9 +28,6 @@ module.exports = {
     new DotenvWebpackPlugin({
       systemvars: true,
     }),
-    new BundleAnalyzerPlugin({
-      openAnalyzer: false,
-    }),
     new CompressionPlugin({
       filename: '[path][base].gz',
       algorithm: 'gzip',