diff --git a/app/(sub-page)/my/components/my-result-container.tsx b/app/(sub-page)/my/components/my-result-container.tsx
index fbe77272..7d484c59 100644
--- a/app/(sub-page)/my/components/my-result-container.tsx
+++ b/app/(sub-page)/my/components/my-result-container.tsx
@@ -1,13 +1,16 @@
-import UserCreditResult from '@/app/ui/user/user-credit-result';
+import UserCreditResult from '@/app/ui/user/user-credit-result/user-credit-result';
+import UserCreditResultSkeleton from '@/app/ui/user/user-credit-result/user-credit-result-skeleton';
 import Button from '@/app/ui/view/atom/button/button';
 import Link from 'next/link';
-import React from 'react';
+import React, { Suspense } from 'react';
 
 export default function MyResultContainer() {
   return (
-    <div className="flex flex-col  justify-center gap-10">
+    <div className="flex flex-col  justify-center gap-10 px-2 lg:px-0">
       <p className="font-bold sm:text-3xl text-2xl ml-1 sm:ml-0">마이페이지</p>
-      <UserCreditResult />
+      <Suspense fallback={<UserCreditResultSkeleton />}>
+        <UserCreditResult />
+      </Suspense>
       <div className="flex justify-center">
         <Link href="/result">
           <Button label="수강현황 자세히 보기" variant="primary" size="xs" />
diff --git a/app/(sub-page)/my/page.tsx b/app/(sub-page)/my/page.tsx
index 810b34d9..77857acb 100644
--- a/app/(sub-page)/my/page.tsx
+++ b/app/(sub-page)/my/page.tsx
@@ -9,6 +9,7 @@ import { Suspense } from 'react';
 import MyResultContainer from './components/my-result-container';
 import SignButtonGroup from '@/app/ui/user/user-info-navigator/sign-button-group';
 import Responsive from '@/app/ui/responsive';
+import TakenLectureSkeleton from '@/app/ui/lecture/taken-lecture/taken-lecture-skeleton';
 
 export default function MyPage() {
   return (
@@ -26,7 +27,9 @@ export default function MyPage() {
         </Responsive>
         <div className="w-full lg:w-[70%] lg:px-[20px] pt-12 pb-2 flex flex-col gap-12">
           <MyResultContainer />
-          <TakenLecture />
+          <Suspense fallback={<TakenLectureSkeleton />}>
+            <TakenLecture />
+          </Suspense>
         </div>
       </ContentContainer>
       <Drawer drawerKey={DIALOG_KEY.LECTURE_SEARCH}>
diff --git a/app/ui/lecture/lecture-search/index.tsx b/app/ui/lecture/lecture-search/index.tsx
index 6d694c08..5f3a0aca 100644
--- a/app/ui/lecture/lecture-search/index.tsx
+++ b/app/ui/lecture/lecture-search/index.tsx
@@ -3,11 +3,11 @@ import { useAtomValue } from 'jotai';
 import LectureSearchBar from './lecture-search-bar';
 import { searchWordAtom } from '@/app/store/search-word';
 import { Suspense } from 'react';
-import { LectureSearchResultSpinner } from './lecture-search-result/lecture-search-result-spinner';
-import LectureSearchResult from './lecture-search-result';
 import Image from 'next/image';
 import searchResultIcon from '@/public/assets/searchResultIcon.svg';
 import List from '../../view/molecule/list';
+import LoadingSpinner from '../../view/atom/loading-spinner';
+import LectureSearchResult from './lecture-search-result';
 
 const emptyDataRender = () => {
   return (
@@ -30,7 +30,16 @@ export default function LectureSearch() {
       <div className="w-[800px] mx-auto my-7  flex flex-col gap-10 sm:gap-6">
         <LectureSearchBar />
         {searchable ? (
-          <Suspense fallback={<LectureSearchResultSpinner />}>
+          <Suspense
+            fallback={
+              <div className="rounded-xl border-[1px] border-gray-300 w-full h-72 overflow-auto flex justify-center items-center">
+                <LoadingSpinner
+                  className={'animate-spin shrink-0 h-12 w-12 mr-1.5 -ml-1 fill-gray-400'}
+                  style={{ transition: `width 150ms` }}
+                />
+              </div>
+            }
+          >
             <LectureSearchResult />
           </Suspense>
         ) : (
diff --git a/app/ui/lecture/lecture-search/lecture-search-result/index.tsx b/app/ui/lecture/lecture-search/lecture-search-result.tsx
similarity index 95%
rename from app/ui/lecture/lecture-search/lecture-search-result/index.tsx
rename to app/ui/lecture/lecture-search/lecture-search-result.tsx
index 16082fdc..fd786ad1 100644
--- a/app/ui/lecture/lecture-search/lecture-search-result/index.tsx
+++ b/app/ui/lecture/lecture-search/lecture-search-result.tsx
@@ -3,10 +3,10 @@ import { useAtomValue } from 'jotai';
 import { searchWordAtom } from '@/app/store/search-word';
 import { useSuspenseQuery } from '@tanstack/react-query';
 import { fetchSearchLectures } from '@/app/business/lecture/search-lecture.query';
-import AddTakenLectureButton from '../../taken-lecture/add-taken-lecture-button';
 import List from '@/app/ui/view/molecule/list';
 import Grid from '@/app/ui/view/molecule/grid';
 import { QUERY_KEY } from '@/app/utils/query/react-query-key';
+import AddTakenLectureButton from '../taken-lecture/add-taken-lecture-button';
 
 export default function LectureSearchResult() {
   const searchWord = useAtomValue(searchWordAtom);
diff --git a/app/ui/lecture/lecture-search/lecture-search-result/lecture-search-result-spinner.tsx b/app/ui/lecture/lecture-search/lecture-search-result/lecture-search-result-spinner.tsx
deleted file mode 100644
index 3efdeaa6..00000000
--- a/app/ui/lecture/lecture-search/lecture-search-result/lecture-search-result-spinner.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import LoadingSpinner from '@/app/ui/view/atom/loading-spinner';
-
-export function LectureSearchResultSpinner() {
-  return (
-    <div
-      className={'rounded-xl border-[1px] border-gray-300 w-full h-72 overflow-auto flex justify-center items-center'}
-    >
-      <LoadingSpinner
-        className={'animate-spin shrink-0 h-12 w-12 mr-1.5 -ml-1 fill-gray-400'}
-        style={{ transition: `width 150ms` }}
-      />
-    </div>
-  );
-}
diff --git a/app/ui/lecture/taken-lecture/taken-lecture-constant.ts b/app/ui/lecture/taken-lecture/taken-lecture-constant.ts
new file mode 100644
index 00000000..d4898b4f
--- /dev/null
+++ b/app/ui/lecture/taken-lecture/taken-lecture-constant.ts
@@ -0,0 +1 @@
+export const TAKEN_LECTURE_TABLE_HEADER_INFO = ['수강년도', '수강학기', '과목코드', '과목명', '학점'];
diff --git a/app/ui/lecture/taken-lecture/taken-lecture-list.tsx b/app/ui/lecture/taken-lecture/taken-lecture-list.tsx
index 8212fa93..aa01a48b 100644
--- a/app/ui/lecture/taken-lecture/taken-lecture-list.tsx
+++ b/app/ui/lecture/taken-lecture/taken-lecture-list.tsx
@@ -7,8 +7,7 @@ import { useAtom } from 'jotai';
 import { deleteTakenLecture } from '@/app/business/lecture/taken-lecture.command';
 import { useToast } from '../../view/molecule/toast/use-toast';
 import Responsive from '../../responsive';
-
-const headerInfo = ['수강년도', '수강학기', '과목코드', '과목명', '학점'];
+import { TAKEN_LECTURE_TABLE_HEADER_INFO } from './taken-lecture-constant';
 
 export default function TakenLectureList() {
   const [takenLectures, setTakenLectures] = useAtom(takenLectureAtom);
@@ -36,7 +35,7 @@ export default function TakenLectureList() {
     <>
       <Responsive minWidth={1024}>
         <Table
-          headerInfo={headerInfo}
+          headerInfo={TAKEN_LECTURE_TABLE_HEADER_INFO}
           data={optimisticLecture}
           renderActionButton={(id: number) => (
             <DeleteTakenLectureButton lectureId={id} onDelete={handleDeleteTakenLecture} />
@@ -45,7 +44,7 @@ export default function TakenLectureList() {
       </Responsive>
       <Responsive maxWidth={1023}>
         <Table
-          headerInfo={headerInfo}
+          headerInfo={TAKEN_LECTURE_TABLE_HEADER_INFO}
           data={optimisticLecture}
           onSwipeAction={handleDeleteTakenLecture}
           swipeable={true}
diff --git a/app/ui/lecture/taken-lecture/taken-lecture.skeleton.tsx b/app/ui/lecture/taken-lecture/taken-lecture.skeleton.tsx
new file mode 100644
index 00000000..70cd0f13
--- /dev/null
+++ b/app/ui/lecture/taken-lecture/taken-lecture.skeleton.tsx
@@ -0,0 +1,16 @@
+import Skeleton from '../../../utils/skeleton';
+import { TableHeader } from '../../view/molecule/table/table-header';
+import { TAKEN_LECTURE_TABLE_HEADER_INFO } from './taken-lecture-constant';
+import TakenLectureLabel from './taken-lecture-label';
+
+export default function TakenLectureSkeleton() {
+  return (
+    <div className="flex flex-col gap-2.5 w-full">
+      <TakenLectureLabel />
+      <TableHeader headerInfo={TAKEN_LECTURE_TABLE_HEADER_INFO} cols={6} />
+      {Array.from({ length: 3 }).map((_, index) => (
+        <Skeleton key={index} className="rounded-xl w-full h-12" />
+      ))}
+    </div>
+  );
+}
diff --git a/app/ui/result/result-category-card/result-category-card.skeleton.tsx b/app/ui/result/result-category-card/result-category-card.skeleton.tsx
index ade06bc0..95988486 100644
--- a/app/ui/result/result-category-card/result-category-card.skeleton.tsx
+++ b/app/ui/result/result-category-card/result-category-card.skeleton.tsx
@@ -4,7 +4,7 @@ import { cn } from '@/app/utils/shadcn/utils';
 import Book from '@/public/assets/book.svg';
 import Image from 'next/image';
 import * as React from 'react';
-import Skeleton from '../../view/atom/skeleton';
+import Skeleton from '../../../utils/skeleton';
 
 function ResultCategoryCardSkeleton() {
   return (
diff --git a/app/ui/skeletons.tsx b/app/ui/skeletons.tsx
deleted file mode 100644
index 189e5407..00000000
--- a/app/ui/skeletons.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-// 요즘 고민인데 이런 util component들? 어디다가 위치시켜야할 지 고민
-// 일단 따로 빼놨음
-
-const shimmer =
-  'before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/60 before:to-transparent';
-
-export function RevenueChartSkeleton() {
-  return (
-    <div className={`${shimmer} relative w-full overflow-hidden md:col-span-4`}>
-      <div className="mb-4 h-8 w-36 rounded-md bg-gray-100" />
-      <div className="rounded-xl bg-gray-100 p-4">
-        <div className="mt-0 grid h-[410px] grid-cols-12 items-end gap-2 rounded-md bg-white p-4 sm:grid-cols-13 md:gap-4" />
-        <div className="flex items-center pb-2 pt-6">
-          <div className="h-5 w-5 rounded-full bg-gray-200" />
-          <div className="ml-2 h-4 w-20 rounded-md bg-gray-200" />
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/app/ui/user/user-credit-result/user-credit-result-skeleton.tsx b/app/ui/user/user-credit-result/user-credit-result-skeleton.tsx
new file mode 100644
index 00000000..80b84999
--- /dev/null
+++ b/app/ui/user/user-credit-result/user-credit-result-skeleton.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import Skeleton from '../../../utils/skeleton';
+
+export default function UserCreditResultSkeleton() {
+  return <Skeleton className="min-h-20 rounded-lg py-1 px-8 gap-3" />;
+}
diff --git a/app/ui/user/user-credit-result.tsx b/app/ui/user/user-credit-result/user-credit-result.tsx
similarity index 100%
rename from app/ui/user/user-credit-result.tsx
rename to app/ui/user/user-credit-result/user-credit-result.tsx
diff --git a/app/ui/user/user-info-card/user-info-card.skeleton.tsx b/app/ui/user/user-info-card/user-info-card.skeleton.tsx
index a72b2062..35df63e4 100644
--- a/app/ui/user/user-info-card/user-info-card.skeleton.tsx
+++ b/app/ui/user/user-info-card/user-info-card.skeleton.tsx
@@ -1,4 +1,4 @@
-import Skeleton from '../../view/atom/skeleton';
+import Skeleton from '../../../utils/skeleton';
 
 function UserInfoCardSkeleton() {
   return (
diff --git a/app/ui/user/user-info-navigator/user-info-navigator.skeleton.tsx b/app/ui/user/user-info-navigator/user-info-navigator.skeleton.tsx
index 18c3ccab..534219d3 100644
--- a/app/ui/user/user-info-navigator/user-info-navigator.skeleton.tsx
+++ b/app/ui/user/user-info-navigator/user-info-navigator.skeleton.tsx
@@ -1,4 +1,4 @@
-import Skeleton from '../../view/atom/skeleton';
+import Skeleton from '../../../utils/skeleton';
 
 export default function UserInfoNavigatorSkeleton() {
   return (
diff --git a/app/ui/view/atom/label-container/label-container.skeleton.tsx b/app/ui/view/atom/label-container/label-container.skeleton.tsx
index 5a506fcd..2b369156 100644
--- a/app/ui/view/atom/label-container/label-container.skeleton.tsx
+++ b/app/ui/view/atom/label-container/label-container.skeleton.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import Skeleton from '../skeleton';
+import Skeleton from '../../../../utils/skeleton';
 
 interface LabelContainerProps {
   rightElement: ReactNode;
diff --git a/app/ui/view/atom/skeleton.tsx b/app/utils/skeleton.tsx
similarity index 56%
rename from app/ui/view/atom/skeleton.tsx
rename to app/utils/skeleton.tsx
index 4cfa96e4..71999556 100644
--- a/app/ui/view/atom/skeleton.tsx
+++ b/app/utils/skeleton.tsx
@@ -1,5 +1,5 @@
 import { cn } from '@/app/utils/shadcn/utils';
 
 export default function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn('animate-pulse rounded-md bg-slate-100 dark:bg-slate-800', className)} {...props} />;
+  return <div className={cn('animate-pulse rounded-md bg-gray-100', className)} {...props} />;
 }