diff --git a/frontend/src/components/@common/NavItem/NavItemSkeleton.tsx b/frontend/src/components/@common/NavItem/NavItemSkeleton.tsx
new file mode 100644
index 000000000..687618bae
--- /dev/null
+++ b/frontend/src/components/@common/NavItem/NavItemSkeleton.tsx
@@ -0,0 +1,51 @@
+import styled from 'styled-components';
+
+import { BORDER_RADIUS, paintSkeleton } from '~/styles/common';
+
+function NavItemSkeleton() {
+  return (
+    <StyledNavItem>
+      <div />
+      <div>
+        <span />
+      </div>
+    </StyledNavItem>
+  );
+}
+
+export default NavItemSkeleton;
+
+const StyledNavItem = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  width: 68px;
+
+  border: none;
+  background: none;
+
+  & > div {
+    ${paintSkeleton}
+  }
+
+  & > div:first-child {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    width: 36px;
+    height: 36px;
+
+    border-radius: 50%;
+    margin-bottom: 0.4rem;
+  }
+
+  & > div:last-child {
+    width: 40px;
+    height: 12px;
+
+    border-radius: ${BORDER_RADIUS.xs};
+  }
+`;
diff --git a/frontend/src/components/@common/NavItem/index.tsx b/frontend/src/components/@common/NavItem/index.tsx
index 3a623f836..9fa473243 100644
--- a/frontend/src/components/@common/NavItem/index.tsx
+++ b/frontend/src/components/@common/NavItem/index.tsx
@@ -1,3 +1,5 @@
 import NavItem from '~/components/@common/NavItem/NavItem';
+import NavItemSkeleton from './NavItemSkeleton';
 
+export { NavItemSkeleton };
 export default NavItem;
diff --git a/frontend/src/components/MainPageNavBar/MainPageNavBarSkeleton.tsx b/frontend/src/components/MainPageNavBar/MainPageNavBarSkeleton.tsx
new file mode 100644
index 000000000..6161d22c5
--- /dev/null
+++ b/frontend/src/components/MainPageNavBar/MainPageNavBarSkeleton.tsx
@@ -0,0 +1,57 @@
+import styled from 'styled-components';
+import { NavItemSkeleton } from '../@common/NavItem';
+
+interface MainPageNavBarSkeletonProps {
+  navItemLength: number;
+}
+
+function MainPageNavBarSkeleton({ navItemLength }: MainPageNavBarSkeletonProps) {
+  return (
+    <StyledNavBar>
+      <NavItemSkeleton />
+      <StyledLine />
+      <div>
+        {Array.from({ length: navItemLength }, () => (
+          <NavItemSkeleton />
+        ))}
+      </div>
+    </StyledNavBar>
+  );
+}
+
+export default MainPageNavBarSkeleton;
+
+const StyledNavBar = styled.nav`
+  display: flex;
+  align-items: center;
+
+  position: sticky;
+  top: 80px;
+  z-index: 11;
+
+  width: 100%;
+  height: 80px;
+
+  background-color: var(--white);
+
+  padding-left: 1.2rem;
+  border-bottom: 1px solid var(--gray-1);
+
+  & > div:last-child {
+    display: flex;
+    align-items: center;
+
+    & > * {
+      margin: 0 0.6rem;
+    }
+  }
+`;
+
+const StyledLine = styled.div`
+  margin-left: 1.2rem;
+
+  width: 1px;
+  height: 46px;
+
+  background-color: var(--gray-3);
+`;
diff --git a/frontend/src/components/MainPageNavBar/index.tsx b/frontend/src/components/MainPageNavBar/index.tsx
index 4f3ce590e..e1dfb47a1 100644
--- a/frontend/src/components/MainPageNavBar/index.tsx
+++ b/frontend/src/components/MainPageNavBar/index.tsx
@@ -1,3 +1,5 @@
 import MainPageNavBar from './MainPageNavBar';
+import MainPageNavBarSkeleton from './MainPageNavBarSkeleton';
 
+export { MainPageNavBarSkeleton };
 export default MainPageNavBar;
diff --git a/frontend/src/pages/MainPage.tsx b/frontend/src/pages/MainPage.tsx
index a38d28a39..39f810281 100644
--- a/frontend/src/pages/MainPage.tsx
+++ b/frontend/src/pages/MainPage.tsx
@@ -3,11 +3,12 @@ import { styled, css } from 'styled-components';
 
 import Map from '~/components/@common/Map';
 import RestaurantCardList from '~/components/RestaurantCardList';
-import MainPageNavBar from '~/components/MainPageNavBar';
+import MainPageNavBar, { MainPageNavBarSkeleton } from '~/components/MainPageNavBar';
 import useBooleanState from '~/hooks/useBooleanState';
 import useMediaQuery from '~/hooks/useMediaQuery';
 import MobileMainPage from './MobileMainPage';
 import LoadingIndicator from '~/components/@common/LoadingIndicator';
+import RESTAURANT_CATEGORY from '~/constants/restaurantCategory';
 
 function MainPage() {
   const { isMobile } = useMediaQuery();
@@ -28,7 +29,7 @@ function MainPage() {
 
   return (
     <>
-      <Suspense fallback={<div>로딩중...</div>}>
+      <Suspense fallback={<MainPageNavBarSkeleton navItemLength={RESTAURANT_CATEGORY.length} />}>
         <MainPageNavBar />
       </Suspense>
       <StyledLayout isMapExpanded={isMapExpanded}>
diff --git a/frontend/src/pages/RestaurantDetail.tsx b/frontend/src/pages/RestaurantDetail.tsx
index b66665ce7..55cbe4bf3 100644
--- a/frontend/src/pages/RestaurantDetail.tsx
+++ b/frontend/src/pages/RestaurantDetail.tsx
@@ -146,7 +146,6 @@ function RestaurantDetail() {
                     <button aria-label="전화번호 복사" type="button" onClick={copyClipBoard(phoneNumber)}>
                       <Copy width={16} />
                       복사
-
                     </button>
                   </div>
                   <div>카테고리 : {category}</div>