diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml
index 48745297..4347ea0b 100644
--- a/.github/workflows/storybook.yml
+++ b/.github/workflows/storybook.yml
@@ -22,11 +22,22 @@ jobs:
         with:
           fetch-depth: 0
 
-      - name: Corepack 활성화
-        run: corepack enable
-
-      - name: pnpm 설치
-        run: corepack prepare pnpm@latest --activate
+      - name: Corepack 최신 버전 설치
+        run: npm install -g corepack@latest
+  
+      - name: 기존 pnpm 제거 (필요한 경우만)
+        run: |
+            if command -v pnpm &> /dev/null; then
+              echo "pnpm detected, removing..."
+              npm uninstall -g pnpm
+            fi
+  
+      - name: Corepack 활성화 및 최신 pnpm 설치
+        run: |
+            corepack enable
+            corepack prepare pnpm@latest-10 --activate
+            npm install -g pnpm@latest || echo "pnpm already installed"
+  
 
       - name: 캐시 종속성
         id: cache
diff --git a/next.config.ts b/next.config.ts
index bcd69237..75293411 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -20,6 +20,7 @@ const nextConfig: NextConfig = {
         hostname: 'zzikzzik-bucket.s3.ap-northeast-2.amazonaws.com',
       },
     ],
+    formats: ['image/avif', 'image/webp'], // AVIF 우선 적용
   },
 };
 
diff --git a/src/apis/UserProfile/getUserProfile.ts b/src/apis/UserProfile/getUserProfile.ts
new file mode 100644
index 00000000..031fe4a3
--- /dev/null
+++ b/src/apis/UserProfile/getUserProfile.ts
@@ -0,0 +1,23 @@
+import axios from 'axios';
+import { API_ENDPOINTS } from '@/constants/ApiEndpoints';
+
+const apiUrl = process.env.NEXT_PUBLIC_API_URL;
+
+export const getUserProfile = async (userId: number, token: string) => {
+  try {
+    const response = await axios.get(
+      apiUrl + API_ENDPOINTS.AUTH.USER_PROFILE(userId),
+      {
+        headers: {
+          token: token,
+          'Content-Type': 'application/json',
+          Accept: '*/*',
+        },
+      },
+    );
+    return response.data;
+  } catch (error) {
+    console.error('❌ API 요청 실패:', error);
+    throw new Error('사용자 프로필을 가져오는 중 문제가 발생했습니다.');
+  }
+};
diff --git a/src/app/(route)/userProfile/[userId]/page.tsx b/src/app/(route)/userProfile/[userId]/page.tsx
index 55d62a19..61750a66 100644
--- a/src/app/(route)/userProfile/[userId]/page.tsx
+++ b/src/app/(route)/userProfile/[userId]/page.tsx
@@ -1,6 +1,14 @@
+import {
+  dehydrate,
+  HydrationBoundary,
+  QueryClient,
+} from '@tanstack/react-query';
+import { cookies } from 'next/headers';
 import { PageContainer } from '@/components/common/PageContainer';
 import { UserProfileContent } from '@/components/UserProfile/UserProfileContent';
 import { UserProfileHeader } from '@/components/UserProfile/UserProfileHeader';
+import { QUERY_KEYS } from '@/constants/QueryKeys';
+import { getUserProfile } from '@/apis/UserProfile/getUserProfile';
 
 interface UserProfileProps {
   userId: string;
@@ -13,10 +21,22 @@ export default async function userProfile({
 }) {
   const { userId } = await params;
 
+  const cookieStore = await cookies();
+  const token = cookieStore.get('token')?.value || '';
+
+  const queryClient = new QueryClient();
+
+  await queryClient.prefetchQuery({
+    queryKey: [QUERY_KEYS.USER_PROFILE, Number(userId)],
+    queryFn: () => getUserProfile(Number(userId), token),
+  });
+
   return (
     <PageContainer>
-      <UserProfileHeader userId={userId} />
-      <UserProfileContent userId={userId} />
+      <HydrationBoundary state={dehydrate(queryClient)}>
+        <UserProfileHeader userId={userId} />
+        <UserProfileContent userId={userId} />
+      </HydrationBoundary>
     </PageContainer>
   );
 }
diff --git a/src/components/UserProfile/UserProfileContent/index.tsx b/src/components/UserProfile/UserProfileContent/index.tsx
index dea42649..f5df5f01 100644
--- a/src/components/UserProfile/UserProfileContent/index.tsx
+++ b/src/components/UserProfile/UserProfileContent/index.tsx
@@ -3,14 +3,13 @@
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import { useUserProfileQuery } from '@/hooks/apis/Auth/useUserProfileQuery';
-import { Spinner } from '@/components/common/Spinner';
 
 interface UserProfileContent {
   userId: string;
 }
 
 export const UserProfileContent = ({ userId }: UserProfileContent) => {
-  const { completeResponses, isLoading } = useUserProfileQuery(Number(userId));
+  const { completeResponses } = useUserProfileQuery(Number(userId));
 
   const router = useRouter();
 
@@ -18,33 +17,29 @@ export const UserProfileContent = ({ userId }: UserProfileContent) => {
     router.push(`/completes/${completeId}`);
   };
 
-  if (isLoading) {
-    return (
-      <div className="flex min-h-screen items-center justify-center">
-        <Spinner className="size-28" />
-      </div>
-    );
-  }
-
   return (
     <div className="mt-8 grid grid-cols-3 gap-8">
       {completeResponses.map((complete) =>
         complete.completePic ? (
-          <Image
+          <div
             key={complete.completeId}
-            sizes="100vw"
-            width={48}
-            height={48}
-            className="flex h-109 w-full rounded-4"
-            priority
-            src={complete.completePic}
-            alt="인증한 이미지"
+            className="relative aspect-square w-full overflow-hidden rounded-4"
             onClick={() => handleClick(complete.completeId)}
-          />
+          >
+            <Image
+              priority
+              fill
+              sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+              style={{ objectFit: 'cover' }}
+              className="rounded-4"
+              src={complete.completePic}
+              alt="인증한 이미지"
+            />
+          </div>
         ) : (
           <div
             key={complete.completeId}
-            className="flex h-109 w-full rounded-4 bg-gray-200"
+            className="flex aspect-square w-full rounded-4 bg-gray-200"
           />
         ),
       )}
diff --git a/src/components/UserProfile/UserProfileHeader/index.tsx b/src/components/UserProfile/UserProfileHeader/index.tsx
index d53d4031..deb64861 100644
--- a/src/components/UserProfile/UserProfileHeader/index.tsx
+++ b/src/components/UserProfile/UserProfileHeader/index.tsx
@@ -40,7 +40,7 @@ export const UserProfileHeader = ({ userId }: UserProfileHeader) => {
             <Image
               width={48}
               height={48}
-              sizes="100vw"
+              sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
               className="flex size-64 rounded-full"
               priority
               src={profilePic}