diff --git a/src/components/Card/Common/CommonCard.css.ts b/src/components/Card/Card.css.ts
similarity index 100%
rename from src/components/Card/Common/CommonCard.css.ts
rename to src/components/Card/Card.css.ts
diff --git a/src/components/Card/Common/CommonCard.tsx b/src/components/Card/Card.tsx
similarity index 83%
rename from src/components/Card/Common/CommonCard.tsx
rename to src/components/Card/Card.tsx
index 759febe..0c84937 100644
--- a/src/components/Card/Common/CommonCard.tsx
+++ b/src/components/Card/Card.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React, { PropsWithChildren } from 'react';
 import Tag, { ExcludedTags } from '@/composable/Tag/Tag';
-import { bgColorVariants, cardStyle } from './CommonCard.css';
+import { bgColorVariants, cardStyle } from './Card.css';
 
 interface Props {
   className?: string;
@@ -10,7 +10,7 @@ interface Props {
   onClick?: () => void;
 }
 
-const CommonCard = ({
+const Card = ({
   children,
   as,
   className,
@@ -32,4 +32,4 @@ const CommonCard = ({
   );
 };
 
-export default React.memo(CommonCard);
+export default React.memo(Card);
diff --git a/src/components/Card/History/HistoryCard.context.ts b/src/components/HistoryCard/HistoryCard.context.ts
similarity index 100%
rename from src/components/Card/History/HistoryCard.context.ts
rename to src/components/HistoryCard/HistoryCard.context.ts
diff --git a/src/components/Card/History/HistoryCard.css.ts b/src/components/HistoryCard/HistoryCard.css.ts
similarity index 100%
rename from src/components/Card/History/HistoryCard.css.ts
rename to src/components/HistoryCard/HistoryCard.css.ts
diff --git a/src/components/Card/History/HistoryCard.test.tsx b/src/components/HistoryCard/HistoryCard.test.tsx
similarity index 100%
rename from src/components/Card/History/HistoryCard.test.tsx
rename to src/components/HistoryCard/HistoryCard.test.tsx
diff --git a/src/components/Card/History/HistoryCard.tsx b/src/components/HistoryCard/HistoryCard.tsx
similarity index 95%
rename from src/components/Card/History/HistoryCard.tsx
rename to src/components/HistoryCard/HistoryCard.tsx
index 93ce5cc..fc7b341 100644
--- a/src/components/Card/History/HistoryCard.tsx
+++ b/src/components/HistoryCard/HistoryCard.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React, { PropsWithChildren } from 'react';
 import { getStaticContext } from '@/utils/context/StaticContext';
-import CommonCard from '../Common/CommonCard';
+import Card from '../Card/Card';
 import StaticContextHistoryCard, {
   HistoryCardContextProps,
 } from './HistoryCard.context';
@@ -43,7 +43,7 @@ const HistoryCard = ({
         period,
       }}
     >
-      <CommonCard
+      <Card
         as="button"
         className={classNames(
           className,
@@ -54,7 +54,7 @@ const HistoryCard = ({
         onClick={onClick}
       >
         {children}
-      </CommonCard>
+      </Card>
     </StaticContextHistoryCard.Provider>
   );
 };
diff --git a/src/components/HistoryCarousel/HistoryCarousel.tsx b/src/components/HistoryCarousel/HistoryCarousel.tsx
index 3a0f834..3fc869e 100644
--- a/src/components/HistoryCarousel/HistoryCarousel.tsx
+++ b/src/components/HistoryCarousel/HistoryCarousel.tsx
@@ -4,10 +4,10 @@ import React, { useEffect, useRef } from 'react';
 import { useSwiper } from 'swiper/react';
 import HistoryDetailCard, {
   HistoryDetailCardProps,
-} from '@/components/Card/History/Detail/HistoryDetailCard';
+} from '@/components/HistoryDetailCard/HistoryDetailCard';
 import HistoryImpactCard, {
   HistoryImpactCardProps,
-} from '@/components/Card/History/Impact/HistoryImpactCard';
+} from '@/components/HistoryImpactCard/HistoryImpactCard';
 import OceanSwiper from '@/components/OceanSwiper/OceanSwiper';
 import Button from '@/composable/Button/Button';
 import CommonIcon from '@/composable/Icon/CommonIcon';
diff --git a/src/components/Card/History/Detail/HistoryDetailCard.context.ts b/src/components/HistoryDetailCard/HistoryDetailCard.context.ts
similarity index 100%
rename from src/components/Card/History/Detail/HistoryDetailCard.context.ts
rename to src/components/HistoryDetailCard/HistoryDetailCard.context.ts
diff --git a/src/components/Card/History/Detail/HistoryDetailCard.css.ts b/src/components/HistoryDetailCard/HistoryDetailCard.css.ts
similarity index 100%
rename from src/components/Card/History/Detail/HistoryDetailCard.css.ts
rename to src/components/HistoryDetailCard/HistoryDetailCard.css.ts
diff --git a/src/components/Card/History/Detail/HistoryDetailCard.tsx b/src/components/HistoryDetailCard/HistoryDetailCard.tsx
similarity index 97%
rename from src/components/Card/History/Detail/HistoryDetailCard.tsx
rename to src/components/HistoryDetailCard/HistoryDetailCard.tsx
index 0ebd2fd..c3e9269 100644
--- a/src/components/Card/History/Detail/HistoryDetailCard.tsx
+++ b/src/components/HistoryDetailCard/HistoryDetailCard.tsx
@@ -3,7 +3,7 @@ import React, { PropsWithChildren } from 'react';
 import MarkdownViewer from '@/components/MarkdownViewer/MarkdownViewer';
 import CommonIcon from '@/composable/Icon/CommonIcon';
 import { getStaticContext } from '@/utils/context/StaticContext';
-import CommonCard from '../../Common/CommonCard';
+import Card from '../Card/Card';
 import StaticContextHistoryDetailCard, {
   HistoryDetailContextProps,
 } from './HistoryDetailCard.context';
@@ -52,7 +52,7 @@ const HistoryDetailCard = ({
         content,
       }}
     >
-      <CommonCard
+      <Card
         className={classNames(
           className,
           sizeToken ? wrapVariants[sizeToken] : wrapStyle,
@@ -60,7 +60,7 @@ const HistoryDetailCard = ({
         bgColorToken="GRAY"
       >
         {children}
-      </CommonCard>
+      </Card>
     </StaticContextHistoryDetailCard.Provider>
   );
 };
diff --git a/src/components/Card/History/Impact/HistoryImpactCard.context.ts b/src/components/HistoryImpactCard/HistoryImpactCard.context.ts
similarity index 100%
rename from src/components/Card/History/Impact/HistoryImpactCard.context.ts
rename to src/components/HistoryImpactCard/HistoryImpactCard.context.ts
diff --git a/src/components/Card/History/Impact/HistoryImpactCard.css.ts b/src/components/HistoryImpactCard/HistoryImpactCard.css.ts
similarity index 100%
rename from src/components/Card/History/Impact/HistoryImpactCard.css.ts
rename to src/components/HistoryImpactCard/HistoryImpactCard.css.ts
diff --git a/src/components/Card/History/Impact/HistoryImpactCard.tsx b/src/components/HistoryImpactCard/HistoryImpactCard.tsx
similarity index 96%
rename from src/components/Card/History/Impact/HistoryImpactCard.tsx
rename to src/components/HistoryImpactCard/HistoryImpactCard.tsx
index bac178a..9a87192 100644
--- a/src/components/Card/History/Impact/HistoryImpactCard.tsx
+++ b/src/components/HistoryImpactCard/HistoryImpactCard.tsx
@@ -6,7 +6,7 @@ import CommonIcon from '@/composable/Icon/CommonIcon';
 import { StaticContextUserInfo } from '@/Provider/UserInfoProvider.context';
 import { getStaticContext } from '@/utils/context/StaticContext';
 import calcRemToPxNumber from '@/utils/style/calcRemToPxNumber';
-import CommonCard from '../../Common/CommonCard';
+import Card from '../Card/Card';
 import {
   HistoryImpactContextProps,
   StaticContextHistoryImpactCard,
@@ -47,7 +47,7 @@ const HistoryImpactCard = ({
         content,
       }}
     >
-      <CommonCard
+      <Card
         className={classNames(
           className,
           sizeToken ? wrapStyleVariants[sizeToken] : wrapStyle,
@@ -55,7 +55,7 @@ const HistoryImpactCard = ({
         bgColorToken="USER"
       >
         {children}
-      </CommonCard>
+      </Card>
     </StaticContextHistoryImpactCard.Provider>
   );
 };
diff --git a/src/components/HistorySummary/HistorySummary.tsx b/src/components/HistorySummary/HistorySummary.tsx
index 3c99849..458783f 100644
--- a/src/components/HistorySummary/HistorySummary.tsx
+++ b/src/components/HistorySummary/HistorySummary.tsx
@@ -7,12 +7,12 @@ import React, {
   useContext,
   useState,
 } from 'react';
-import HistoryCard from '@/components/Card/History/HistoryCard';
-import { HistoryCardContextProps } from '@/components/Card/History/HistoryCard.context';
+import HistoryCard from '@/components/HistoryCard/HistoryCard';
+import { HistoryCardContextProps } from '@/components/HistoryCard/HistoryCard.context';
 import {
   defaultCardWidthStyle,
   detailViewCardWidthStyle,
-} from '@/components/Card/History/HistoryCard.css';
+} from '@/components/HistoryCard/HistoryCard.css';
 import Button from '@/composable/Button/Button';
 import CommonIcon from '@/composable/Icon/CommonIcon';
 import Pagination from '@/composable/Pagination/Pagination';
diff --git a/src/components/NormalProject/NormalProject.tsx b/src/components/NormalProject/NormalProject.tsx
index 8bd6b53..a300235 100644
--- a/src/components/NormalProject/NormalProject.tsx
+++ b/src/components/NormalProject/NormalProject.tsx
@@ -24,9 +24,9 @@ import {
 import { createNestedArray } from '@/utils/array/createNestedArray';
 import { getPeriod } from '@/utils/date/getPeriod';
 import { getCurrentBreakPoints } from '@/utils/layout/getCurrentBreakPoints';
-import ProjectCard from '../Card/Project/ProjectCard';
 import OceanSwiper from '../OceanSwiper/OceanSwiper';
 import { ProjectContextData } from '../Project/Project.context';
+import ProjectCard from '../ProjectCard/ProjectCard';
 import {
   ContextDispatchNormalProject,
   ContextValueNormalProject,
diff --git a/src/components/Card/Project/ProjectCard.animation.tsx b/src/components/ProjectCard/ProjectCard.animation.tsx
similarity index 100%
rename from src/components/Card/Project/ProjectCard.animation.tsx
rename to src/components/ProjectCard/ProjectCard.animation.tsx
diff --git a/src/components/Card/Project/ProjectCard.context.ts b/src/components/ProjectCard/ProjectCard.context.ts
similarity index 100%
rename from src/components/Card/Project/ProjectCard.context.ts
rename to src/components/ProjectCard/ProjectCard.context.ts
diff --git a/src/components/Card/Project/ProjectCard.css.ts b/src/components/ProjectCard/ProjectCard.css.ts
similarity index 100%
rename from src/components/Card/Project/ProjectCard.css.ts
rename to src/components/ProjectCard/ProjectCard.css.ts
diff --git a/src/components/Card/Project/ProjectCard.test.tsx b/src/components/ProjectCard/ProjectCard.test.tsx
similarity index 100%
rename from src/components/Card/Project/ProjectCard.test.tsx
rename to src/components/ProjectCard/ProjectCard.test.tsx
diff --git a/src/components/Card/Project/ProjectCard.tsx b/src/components/ProjectCard/ProjectCard.tsx
similarity index 100%
rename from src/components/Card/Project/ProjectCard.tsx
rename to src/components/ProjectCard/ProjectCard.tsx
diff --git a/src/components/Card/Skill/SkillCard.css.ts b/src/components/SkillCard/SkillCard.css.ts
similarity index 100%
rename from src/components/Card/Skill/SkillCard.css.ts
rename to src/components/SkillCard/SkillCard.css.ts
diff --git a/src/components/Card/Skill/SkillCard.test.tsx b/src/components/SkillCard/SkillCard.test.tsx
similarity index 100%
rename from src/components/Card/Skill/SkillCard.test.tsx
rename to src/components/SkillCard/SkillCard.test.tsx
diff --git a/src/components/Card/Skill/SkillCard.tsx b/src/components/SkillCard/SkillCard.tsx
similarity index 100%
rename from src/components/Card/Skill/SkillCard.tsx
rename to src/components/SkillCard/SkillCard.tsx
diff --git a/src/components/SkillList/SkillList.tsx b/src/components/SkillList/SkillList.tsx
index 7e4c571..0534366 100644
--- a/src/components/SkillList/SkillList.tsx
+++ b/src/components/SkillList/SkillList.tsx
@@ -6,12 +6,12 @@ import Button from '@/composable/Button/Button';
 import CommonIcon from '@/composable/Icon/CommonIcon';
 import Spacer from '@/composable/Spacer/Spacer';
 import { getStaticContext } from '@/utils/context/StaticContext';
-import SkillCard from '../Card/Skill/SkillCard';
 import {
   DispatcherContextSkill,
   StaticContextSkill,
   ValueContextSkill,
 } from '../Skill/Skill.context';
+import SkillCard from '../SkillCard/SkillCard';
 import {
   bundleStyle,
   buttonStyle,
diff --git a/src/components/SkillSlide/SkillSlide.tsx b/src/components/SkillSlide/SkillSlide.tsx
index 40cdb1a..35c2fd1 100644
--- a/src/components/SkillSlide/SkillSlide.tsx
+++ b/src/components/SkillSlide/SkillSlide.tsx
@@ -7,9 +7,9 @@ import { useReactiveLayout } from '@/hook/useReactiveLayout';
 import { W100 } from '@/styles/common/layout.css';
 import { createNestedArray } from '@/utils/array/createNestedArray';
 import { getStaticContext } from '@/utils/context/StaticContext';
-import SkillCard from '../Card/Skill/SkillCard';
 import OceanSwiper from '../OceanSwiper/OceanSwiper';
 import { StaticContextSkill } from '../Skill/Skill.context';
+import SkillCard from '../SkillCard/SkillCard';
 import TextTab from '../TextTab/TextTab';
 import TextTabGroup from '../TextTabGroup/TextTabGroup';
 import {
diff --git a/src/containers/HistoryCarouselContainer.tsx b/src/containers/HistoryCarouselContainer.tsx
index 402b5b2..d1787a7 100644
--- a/src/containers/HistoryCarouselContainer.tsx
+++ b/src/containers/HistoryCarouselContainer.tsx
@@ -3,9 +3,9 @@
 import { useSuspenseQuery } from '@apollo/client';
 import classNames from 'classnames';
 import { useContext } from 'react';
-import HistoryDetailCard from '@/components/Card/History/Detail/HistoryDetailCard';
 import { ValueContextHistory } from '@/components/History/History.context';
 import HistoryCarousel from '@/components/HistoryCarousel/HistoryCarousel';
+import HistoryDetailCard from '@/components/HistoryDetailCard/HistoryDetailCard';
 import Button from '@/composable/Button/Button';
 import Spacer from '@/composable/Spacer/Spacer';
 import { GET_HISTORY_ITEM_BY_HISTORY_ID } from '@/gql/queries/history_item';
diff --git a/src/stories/Components/Card/History/HistoryCard.stories.tsx b/src/stories/Components/HistoryCard.stories.tsx
similarity index 91%
rename from src/stories/Components/Card/History/HistoryCard.stories.tsx
rename to src/stories/Components/HistoryCard.stories.tsx
index 77687cd..902095a 100644
--- a/src/stories/Components/Card/History/HistoryCard.stories.tsx
+++ b/src/stories/Components/HistoryCard.stories.tsx
@@ -1,11 +1,11 @@
 import { Meta, StoryObj } from '@storybook/react';
 import HistoryCard, {
   HistoryCardProps,
-} from '@/components/Card/History/HistoryCard';
+} from '@/components/HistoryCard/HistoryCard';
 import { backgroundColorVariants } from '@/styles/common/color.css';
 
 const meta: Meta<typeof HistoryCard> = {
-  title: 'Components/Card/History/HistoryCard',
+  title: 'Components/HistoryCard',
   component: HistoryCard,
   tags: ['autodocs'],
   parameters: { layout: 'fullscreen' },
diff --git a/src/stories/Components/History/HistoryCarousel/HistoryCarousel.stories.tsx b/src/stories/Components/HistoryCarousel.stories.tsx
similarity index 99%
rename from src/stories/Components/History/HistoryCarousel/HistoryCarousel.stories.tsx
rename to src/stories/Components/HistoryCarousel.stories.tsx
index d7f9157..7d4da4c 100644
--- a/src/stories/Components/History/HistoryCarousel/HistoryCarousel.stories.tsx
+++ b/src/stories/Components/HistoryCarousel.stories.tsx
@@ -3,7 +3,7 @@ import HistoryCarousel from '@/components/HistoryCarousel/HistoryCarousel';
 import UserInfoProvider from '@/Provider/UserInfoProvider';
 
 const meta: Meta<typeof HistoryCarousel> = {
-  title: 'Components/History/Carousel',
+  title: 'Components/HistoryCarousel',
   component: HistoryCarousel,
   tags: ['autodocs'],
   parameters: { layout: 'fullscreen' },
diff --git a/src/stories/Components/Card/History/Detail/HistoryDetailCard.stories.tsx b/src/stories/Components/HistoryDetailCard.stories.tsx
similarity index 94%
rename from src/stories/Components/Card/History/Detail/HistoryDetailCard.stories.tsx
rename to src/stories/Components/HistoryDetailCard.stories.tsx
index 17c6f5f..cd46780 100644
--- a/src/stories/Components/Card/History/Detail/HistoryDetailCard.stories.tsx
+++ b/src/stories/Components/HistoryDetailCard.stories.tsx
@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import HistoryDetailCard, {
   HistoryDetailCardProps,
-} from '@/components/Card/History/Detail/HistoryDetailCard';
+} from '@/components/HistoryDetailCard/HistoryDetailCard';
 
 const Template = (args: HistoryDetailCardProps) => (
   <HistoryDetailCard {...args}>
@@ -11,7 +11,7 @@ const Template = (args: HistoryDetailCardProps) => (
 );
 
 const meta: Meta<typeof HistoryDetailCard> = {
-  title: 'Components/Card/History/Detail/HistoryDetailCard',
+  title: 'Components/HistoryDetailCard',
   component: Template,
   tags: ['autodocs'],
   parameters: { layout: 'fullscreen' },
diff --git a/src/stories/Components/Card/History/Impact/HistoryImpactCard.stories.tsx b/src/stories/Components/HistoryImpactCard.stories.tsx
similarity index 91%
rename from src/stories/Components/Card/History/Impact/HistoryImpactCard.stories.tsx
rename to src/stories/Components/HistoryImpactCard.stories.tsx
index 4ef19fb..d727694 100644
--- a/src/stories/Components/Card/History/Impact/HistoryImpactCard.stories.tsx
+++ b/src/stories/Components/HistoryImpactCard.stories.tsx
@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import HistoryImpactCard, {
   HistoryImpactCardProps,
-} from '@/components/Card/History/Impact/HistoryImpactCard';
+} from '@/components/HistoryImpactCard/HistoryImpactCard';
 import UserInfoProvider from '@/Provider/UserInfoProvider';
 
 const Template = (args: HistoryImpactCardProps) => (
@@ -12,7 +12,7 @@ const Template = (args: HistoryImpactCardProps) => (
 );
 
 const meta: Meta<typeof HistoryImpactCard> = {
-  title: 'Components/Card/History/Impact/HistoryImpactCard',
+  title: 'Components/HistoryImpactCard',
   component: Template,
   tags: ['autodocs'],
   parameters: { layout: 'fullscreen' },
diff --git a/src/stories/Components/History/HistorySummary/HistorySummary.stories.tsx b/src/stories/Components/HistorySummary.stories.tsx
similarity index 98%
rename from src/stories/Components/History/HistorySummary/HistorySummary.stories.tsx
rename to src/stories/Components/HistorySummary.stories.tsx
index b9ac2b3..d9abbf6 100644
--- a/src/stories/Components/History/HistorySummary/HistorySummary.stories.tsx
+++ b/src/stories/Components/HistorySummary.stories.tsx
@@ -1,6 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Suspense } from 'react';
-import { StaticContextPageInfo } from '@/app/context';
 import HistoryCarousel from '@/components/HistoryCarousel/HistoryCarousel';
 import HistorySummary, {
   HistorySummaryProps,
@@ -116,7 +115,7 @@ const CarouselTemplate = () => {
 };
 
 const meta: Meta<typeof Template> = {
-  title: 'Components/History/Summary',
+  title: 'Components/HistorySummary',
   component: Template,
   tags: ['autodocs'],
   parameters: { layout: 'fullscreen' },
diff --git a/src/stories/Components/Card/ProjectCard.stories.tsx b/src/stories/Components/ProjectCard.stories.tsx
similarity index 96%
rename from src/stories/Components/Card/ProjectCard.stories.tsx
rename to src/stories/Components/ProjectCard.stories.tsx
index 4bd7843..495501f 100644
--- a/src/stories/Components/Card/ProjectCard.stories.tsx
+++ b/src/stories/Components/ProjectCard.stories.tsx
@@ -1,13 +1,13 @@
 import { Meta, StoryObj } from '@storybook/react';
 import ProjectCard, {
   ProjectCardProps,
-} from '@/components/Card/Project/ProjectCard';
+} from '@/components/ProjectCard/ProjectCard';
 import { jaeyoonColorTheme } from '@/styles/theme/jaeyoon.css';
 import { sungyeonColorTheme } from '@/styles/theme/sungyeon.css';
 import { yejiColorTheme } from '@/styles/theme/yeji.css';
 
 const meta: Meta<typeof ProjectCard> = {
-  title: 'Components/Card/ProjectCard',
+  title: 'Components/ProjectCard',
   component: ProjectCard,
   tags: ['autodocs'],
   parameters: { layout: 'fullscreen' },
diff --git a/src/stories/Components/Card/SkillCard.stories.tsx b/src/stories/Components/SkillCard.stories.tsx
similarity index 89%
rename from src/stories/Components/Card/SkillCard.stories.tsx
rename to src/stories/Components/SkillCard.stories.tsx
index 72a9a67..ebb615f 100644
--- a/src/stories/Components/Card/SkillCard.stories.tsx
+++ b/src/stories/Components/SkillCard.stories.tsx
@@ -1,9 +1,9 @@
 import { Meta, StoryObj } from '@storybook/react';
-import SkillCard from '@/components/Card/Skill/SkillCard';
+import SkillCard from '@/components/SkillCard/SkillCard';
 import { backgroundColorVariants } from '@/styles/common/color.css';
 
 const meta: Meta<typeof SkillCard> = {
-  title: 'Components/Card/SkillCard',
+  title: 'Components/SkillCard',
   component: SkillCard,
   tags: ['autodocs'],
   parameters: { layout: 'fullscreen' },