diff --git a/public/images/loading.gif b/public/images/loading.gif
new file mode 100644
index 0000000..e022aab
Binary files /dev/null and b/public/images/loading.gif differ
diff --git a/src/app/categories/[tag]/page.jsx b/src/app/categories/[tag]/page.jsx
index 92c7bfc..0638b3d 100644
--- a/src/app/categories/[tag]/page.jsx
+++ b/src/app/categories/[tag]/page.jsx
@@ -3,6 +3,8 @@ import Link from 'next/link';
 import { Fragment, Suspense } from 'react';
 import { FaBook, FaTag, FaRegCalendarPlus, FaRegCalendarXmark } from 'react-icons/fa6';
 
+import Loading from '@/components/common/Loading';
+
 import { PATH_DOCS, EXT_MD_REGEXP } from '@/constants';
 import { compareMarkdownDocument } from '@/utils/compare';
 import { readMarkdownTagTree } from '@/utils/fs';
@@ -24,7 +26,7 @@ export default async function Page({ params, searchParams }) {
   const tagTree = await readMarkdownTagTree(PATH_DOCS);
 
   return (
-    <Suspense key={sort + order} fallback={<span>loading...</span>}>
+    <Suspense key={sort + order} fallback={<Loading />}>
       {tagTree[params.tag]
         .sort(compareMarkdownDocument(sort, order))
         .map(({ basename, data: { title, description, created, updated, tags } }) => (
diff --git a/src/app/posts/[markdown]/loading.jsx b/src/app/posts/[markdown]/loading.jsx
new file mode 100644
index 0000000..d696d1b
--- /dev/null
+++ b/src/app/posts/[markdown]/loading.jsx
@@ -0,0 +1,5 @@
+import LoadingGif from '@/components/common/Loading';
+
+export default function Loading() {
+  return <LoadingGif />;
+}
diff --git a/src/components/common/Loading/Loading.jsx b/src/components/common/Loading/Loading.jsx
new file mode 100644
index 0000000..b1fb416
--- /dev/null
+++ b/src/components/common/Loading/Loading.jsx
@@ -0,0 +1,19 @@
+import Image from 'next/image';
+
+import styles from './Loading.module.scss';
+
+export default function Loading({ content }) {
+  return (
+    <div className={styles.loading}>
+      <div>
+        <Image
+          src={'/images/loading.gif'}
+          width={48}
+          height={48}
+          alt="GitHub gif loading image"
+        />
+        <div>{content} 불러오는 중...</div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/common/Loading/Loading.module.scss b/src/components/common/Loading/Loading.module.scss
new file mode 100644
index 0000000..2016751
--- /dev/null
+++ b/src/components/common/Loading/Loading.module.scss
@@ -0,0 +1,3 @@
+.loading {
+  @include props-flex-center;
+}
diff --git a/src/components/common/Loading/index.js b/src/components/common/Loading/index.js
new file mode 100644
index 0000000..a57e397
--- /dev/null
+++ b/src/components/common/Loading/index.js
@@ -0,0 +1,3 @@
+import Loading from './Loading';
+
+export default Loading;