diff --git a/frontend/src/components/@common/Loading/LoadingCeluveat.stories.tsx b/frontend/src/components/@common/Loading/LoadingCeluveat.stories.tsx
deleted file mode 100644
index 21ac035ff..000000000
--- a/frontend/src/components/@common/Loading/LoadingCeluveat.stories.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import LoadingCeluveat from './LoadingCeluveat';
-
-const meta: Meta<typeof LoadingCeluveat> = {
-  title: 'Loading/LoadingCeluveat',
-  component: LoadingCeluveat,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof LoadingCeluveat>;
-
-export const Default: Story = {
-  args: { size: 30 },
-};
diff --git a/frontend/src/components/@common/Loading/index.tsx b/frontend/src/components/@common/Loading/index.tsx
deleted file mode 100644
index 8d95a1cf0..000000000
--- a/frontend/src/components/@common/Loading/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as LoadingCeluveat } from './LoadingCeluveat';
-export { default as LoadingDots } from './LoadingDots';
-export { default as Skeleton } from './Skeleton';
diff --git a/frontend/src/components/@common/Loading/LoadingDots.stories.tsx b/frontend/src/components/@common/LoadingDots/LoadingDots.stories.tsx
similarity index 100%
rename from frontend/src/components/@common/Loading/LoadingDots.stories.tsx
rename to frontend/src/components/@common/LoadingDots/LoadingDots.stories.tsx
diff --git a/frontend/src/components/@common/Loading/LoadingDots.tsx b/frontend/src/components/@common/LoadingDots/LoadingDots.tsx
similarity index 100%
rename from frontend/src/components/@common/Loading/LoadingDots.tsx
rename to frontend/src/components/@common/LoadingDots/LoadingDots.tsx
diff --git a/frontend/src/components/@common/LoadingDots/index.tsx b/frontend/src/components/@common/LoadingDots/index.tsx
new file mode 100644
index 000000000..c819498e7
--- /dev/null
+++ b/frontend/src/components/@common/LoadingDots/index.tsx
@@ -0,0 +1,3 @@
+import LoadingDots from './LoadingDots';
+
+export default LoadingDots;
diff --git a/frontend/src/components/@common/LoadingIndicator/LoadingIndicator.stories.tsx b/frontend/src/components/@common/LoadingIndicator/LoadingIndicator.stories.tsx
new file mode 100644
index 000000000..0df4eb8c4
--- /dev/null
+++ b/frontend/src/components/@common/LoadingIndicator/LoadingIndicator.stories.tsx
@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import LoadingIndicator from './LoadingIndicator';
+
+const meta: Meta<typeof LoadingIndicator> = {
+  title: 'Loading/LoadingIndicator',
+  component: LoadingIndicator,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof LoadingIndicator>;
+
+export const Default: Story = {
+  args: { size: 30 },
+};
diff --git a/frontend/src/components/@common/Loading/LoadingCeluveat.tsx b/frontend/src/components/@common/LoadingIndicator/LoadingIndicator.tsx
similarity index 91%
rename from frontend/src/components/@common/Loading/LoadingCeluveat.tsx
rename to frontend/src/components/@common/LoadingIndicator/LoadingIndicator.tsx
index ea024f14e..fa0fe92eb 100644
--- a/frontend/src/components/@common/Loading/LoadingCeluveat.tsx
+++ b/frontend/src/components/@common/LoadingIndicator/LoadingIndicator.tsx
@@ -3,11 +3,11 @@ import Cel from '~/assets/icons/celuveat_cel.svg';
 import Luv from '~/assets/icons/celuveat_luv.svg';
 import Eat from '~/assets/icons/celuveat_eat.svg';
 
-interface LoadingAnimationProps {
+interface LoadingIndicatorProps {
   size: number;
 }
 
-function LoadingAnimation({ size }: LoadingAnimationProps) {
+function LoadingIndicator({ size }: LoadingIndicatorProps) {
   return (
     <StyledLoadingAnimation>
       <StyledBouncing size={size}>
@@ -23,6 +23,8 @@ function LoadingAnimation({ size }: LoadingAnimationProps) {
   );
 }
 
+export default LoadingIndicator;
+
 const StyledLoadingAnimation = styled.div`
   display: flex;
   gap: 0.6rem;
@@ -72,5 +74,3 @@ const StyledBouncing = styled.div<{ size: number }>`
   background: none;
   animation: ${bounceAnimation} 1.6s ease-in-out infinite;
 `;
-
-export default LoadingAnimation;
diff --git a/frontend/src/components/@common/LoadingIndicator/index.tsx b/frontend/src/components/@common/LoadingIndicator/index.tsx
new file mode 100644
index 000000000..334b5c42c
--- /dev/null
+++ b/frontend/src/components/@common/LoadingIndicator/index.tsx
@@ -0,0 +1,3 @@
+import LoadingIndicator from './LoadingIndicator';
+
+export default LoadingIndicator;
diff --git a/frontend/src/components/@common/Loading/Skeleton.stories.tsx b/frontend/src/components/@common/Skeleton/Skeleton.stories.tsx
similarity index 91%
rename from frontend/src/components/@common/Loading/Skeleton.stories.tsx
rename to frontend/src/components/@common/Skeleton/Skeleton.stories.tsx
index 98ac959f7..79a64e3c1 100644
--- a/frontend/src/components/@common/Loading/Skeleton.stories.tsx
+++ b/frontend/src/components/@common/Skeleton/Skeleton.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Skeleton from './Skeleton';
 
 const meta: Meta<typeof Skeleton> = {
-  title: 'Loading/Skeleton',
+  title: 'Skeleton',
   component: Skeleton,
 };
 
diff --git a/frontend/src/components/@common/Loading/Skeleton.tsx b/frontend/src/components/@common/Skeleton/Skeleton.tsx
similarity index 100%
rename from frontend/src/components/@common/Loading/Skeleton.tsx
rename to frontend/src/components/@common/Skeleton/Skeleton.tsx
diff --git a/frontend/src/components/@common/Skeleton/index.tsx b/frontend/src/components/@common/Skeleton/index.tsx
new file mode 100644
index 000000000..63e5e4d7d
--- /dev/null
+++ b/frontend/src/components/@common/Skeleton/index.tsx
@@ -0,0 +1,3 @@
+import Skeleton from './Skeleton';
+
+export default Skeleton;