diff --git a/pages/boards/[articleId].tsx b/pages/boards/[articleId].tsx
index e78a8cb..bba02f1 100644
--- a/pages/boards/[articleId].tsx
+++ b/pages/boards/[articleId].tsx
@@ -29,6 +29,8 @@ import { CommentsData, CommentType } from 'types/board';
 import ModalDefault from '@/components/Modal/ModalDefault';
 import { useSnackbar } from 'context/SnackBarContext';
 import CommentEmpty from '@/components/boards.page/CommentEmpty';
+import Spinner from '@/components/Spinner';
+import ErrorMessage from '@/components/ErrorMessage';
 
 export default function BoardsDetails() {
   const [boardData, setBoardData] = useState<ArticleData | null>(null);
@@ -37,6 +39,7 @@ export default function BoardsDetails() {
 
   const [isModal, setIsModal] = useState(false);
   const [commentToDelete, setCommentToDelete] = useState<number | null>(null);
+  const [dataError, setDataError] = useState(false);
   const router = useRouter();
   const { articleId } = router.query;
   const { isAuthenticated } = useProfileContext();
@@ -51,7 +54,9 @@ export default function BoardsDetails() {
         if (res) {
           setUserId(res.id);
         }
+        setDataError(false);
       } catch (error) {
+        setDataError(true);
         console.log('유저 정보를 불러오지 못했습니다.', error);
       }
     };
@@ -67,7 +72,9 @@ export default function BoardsDetails() {
       try {
         const res = await getBoardDetail(articleId);
         setBoardData(res);
+        setDataError(false);
       } catch (error) {
+        setDataError(true);
         console.error('게시글 데이터를 불러오지 못했습니다.', error);
       }
     };
@@ -156,7 +163,7 @@ export default function BoardsDetails() {
         showSnackbar('로그인이 필요한 서비스입니다.', 'fail');
       }
     } catch (error) {
-      console.error('댓글을 등록하지 못했습니다.', error);
+      showSnackbar('댓글을 등록하지 못했습니다.', 'fail');
     }
   };
 
@@ -165,7 +172,7 @@ export default function BoardsDetails() {
     try {
       await updateCommentMutation.mutateAsync({ id, newContent });
     } catch (error) {
-      console.error('댓글을 수정하지 못했습니다.', error);
+      showSnackbar('댓글을 수정하지 못했습니다.', 'fail');
     }
   };
 
@@ -177,7 +184,7 @@ export default function BoardsDetails() {
         setIsModal(false);
         setCommentToDelete(null);
       } catch (error) {
-        console.error('댓글을 삭제하지 못했습니다.', error);
+        showSnackbar('댓글을 삭제하지 못했습니다.', 'fail');
       }
     }
   };
@@ -194,13 +201,26 @@ export default function BoardsDetails() {
 
   // 게시글 데이터 로딩 상태
   if (!boardData) {
-    return <div>게시글을 불러오는 중입니다...</div>;
+    return (
+      <div className="flex h-[540px] items-center justify-center">
+        <Spinner />
+      </div>
+    );
   }
 
   // 댓글 페칭 에러 처리
-  if (commentsError) {
+  if (commentsError || dataError) {
     return (
-      <div>댓글을 불러오지 못했습니다: {(commentsError as Error).message}</div>
+      <div className="container flex min-h-screen items-center justify-center pb-5">
+        <ErrorMessage
+          title="데이터를 가져오는데 문제가 발생했습니다."
+          code="500"
+        >
+          서버에서 전송한 데이터를 가져오는데 문제가 발생했습니다.
+          <br />
+          다시 한 번 시도해주세요.
+        </ErrorMessage>
+      </div>
     );
   }
 
@@ -272,11 +292,19 @@ export default function BoardsDetails() {
 
             {/* 무한 스크롤 로더 */}
             <div ref={ref} className="h-10">
-              {isFetchingNextPage && <p>로딩 중...</p>}
+              {isFetchingNextPage && (
+                <div className="flex h-[540px] items-center justify-center">
+                  <Spinner />
+                </div>
+              )}
             </div>
 
             {/* 일반 로딩 표시기 */}
-            {isFetching && !isFetchingNextPage && <p>로딩 중...</p>}
+            {isFetching && !isFetchingNextPage && (
+              <div className="flex h-[540px] items-center justify-center">
+                <Spinner />
+              </div>
+            )}
           </div>
         </div>
         <ModalDefault
diff --git a/pages/boards/index.tsx b/pages/boards/index.tsx
index a765e87..5588bc4 100644
--- a/pages/boards/index.tsx
+++ b/pages/boards/index.tsx
@@ -19,6 +19,7 @@ import Router from 'next/router';
 import EmptyList from '@/components/EmptyList';
 import { useSnackbar } from 'context/SnackBarContext';
 import Spinner from '@/components/Spinner';
+import ErrorMessage from '@/components/ErrorMessage';
 
 const BoardCardList_Swiper = dynamic(
   () => import('@/components/boards.page/BoardCardList.swiper'),
@@ -31,6 +32,7 @@ interface BoardsProps {
   initialBoards: Board[];
   initialLikeBoards: Board[];
   totalCount: number;
+  hasError: boolean;
 }
 
 // SSR 데이터 패칭
@@ -52,6 +54,7 @@ export const getServerSideProps: GetServerSideProps = async () => {
         initialLikeBoards,
         initialBoards,
         totalCount,
+        hasError: false,
       },
     };
   } catch (error) {
@@ -61,6 +64,7 @@ export const getServerSideProps: GetServerSideProps = async () => {
         initialLikeBoards: [],
         initialBoards: [],
         totalCount: 0,
+        hasError: true,
       },
     };
   }
@@ -70,6 +74,7 @@ export default function Boards({
   initialBoards,
   initialLikeBoards,
   totalCount,
+  hasError,
 }: BoardsProps) {
   const [boards, setBoards] = useState<Board[]>(initialBoards);
   const [likeBoards] = useState<Board[]>(initialLikeBoards);
@@ -77,6 +82,7 @@ export default function Boards({
   const [value, setValue] = useState('');
   const [searchValue, setSearchValue] = useState('');
   const [selectedOption, setSelectedOption] = useState('최신순');
+  const [isError, setIsError] = useState(false);
   const { showSnackbar } = useSnackbar();
 
   const [isLoading, setIsLoading] = useState(false);
@@ -91,6 +97,7 @@ export default function Boards({
       const orderBy = selectedOption === '최신순' ? 'recent' : 'like';
       try {
         setIsLoading(true);
+        setIsError(false);
         const res = await getBoards({
           orderBy,
           pageSize: PAGE_SIZE,
@@ -100,8 +107,10 @@ export default function Boards({
         setBoards(res.list);
       } catch {
         setBoards([]);
+        setIsError(true);
       } finally {
         setIsLoading(false);
+        setIsError(false);
       }
     };
 
@@ -135,6 +144,21 @@ export default function Boards({
 
   const pxTablet = 'ta:px-[60px]';
 
+  if (hasError || isError) {
+    return (
+      <div className="container flex min-h-screen items-center justify-center pb-5">
+        <ErrorMessage
+          title="데이터를 가져오는데 문제가 발생했습니다."
+          code="500"
+        >
+          서버에서 전송한 데이터를 가져오는데 문제가 발생했습니다.
+          <br />
+          다시 한 번 시도해주세요.
+        </ErrorMessage>
+      </div>
+    );
+  }
+
   return (
     <main className="pt-[80px] tamo:pt-[60px]">
       <div className="flex flex-col gap-[60px] py-[60px] mo:gap-10 mo:py-10">