diff --git a/src/feature/create-album/components/CreateComplete.tsx b/src/feature/create-album/components/CreateComplete.tsx
index 419c1e5..cb924b3 100644
--- a/src/feature/create-album/components/CreateComplete.tsx
+++ b/src/feature/create-album/components/CreateComplete.tsx
@@ -3,6 +3,7 @@ import { CountdownTimer } from '@/global/components/CountdownTimer';
 import LongButton from '@/global/components/LongButton';
 import { Check } from 'lucide-react';
 import { useRouter } from 'next/navigation';
+import { useCallback } from 'react';
 
 interface CreateCompleteProps {
   albumId: string;
@@ -11,9 +12,9 @@ interface CreateCompleteProps {
 export default function CreateComplete({ albumId }: CreateCompleteProps) {
   const router = useRouter();
 
-  const handleClick = () => {
+  const handleClick = useCallback(() => {
     router.push(`/album/upload/${albumId}`);
-  };
+  }, [router, albumId]);
 
   return (
     <div className='mt-[200px] flex flex-col items-center gap-4'>
diff --git a/src/global/components/CountdownTimer.tsx b/src/global/components/CountdownTimer.tsx
index 14a630a..cf71214 100644
--- a/src/global/components/CountdownTimer.tsx
+++ b/src/global/components/CountdownTimer.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { AnimatePresence, motion } from 'framer-motion';
+import { AnimatePresence, LazyMotion, domAnimation, m } from 'framer-motion';
 import { useEffect, useState } from 'react';
 
 interface TimeLeft {
@@ -47,7 +47,7 @@ function AnimatedNumber({ number, label }: AnimatedNumberProps) {
       <div className='bg-element-gray-lighter flex h-[50px] w-[50px] flex-col items-center justify-center rounded-xl'>
         <div className='typo-heading-md-medium text-text-subtle relative h-[30px] w-[30px] overflow-hidden'>
           <AnimatePresence mode='wait'>
-            <motion.div
+            <m.div
               key={formattedNumber}
               initial={{ y: 20, opacity: 0 }}
               animate={{ y: 0, opacity: 1 }}
@@ -56,7 +56,7 @@ function AnimatedNumber({ number, label }: AnimatedNumberProps) {
               className='absolute top-0 right-0 left-0 text-center'
             >
               {formattedNumber}
-            </motion.div>
+            </m.div>
           </AnimatePresence>
         </div>
       </div>
@@ -114,15 +114,52 @@ export function CountdownTimer({ albumId }: CountdownTimerProps) {
     return () => clearInterval(timer);
   }, [targetDate]);
 
+  // 레이아웃 시프트 방지를 위해 초기 렌더링 시에도 공간 확보
+  if (!targetDate) {
+    return (
+      <div className='flex items-end justify-center opacity-0'>
+        <div className='mx-2 flex flex-col items-center gap-2'>
+          <div className='bg-element-gray-lighter flex h-[50px] w-[50px] flex-col items-center justify-center rounded-xl'></div>
+          <span className='typo-caption-sm-medium text-text-subtler uppercase'>
+            Days
+          </span>
+        </div>
+        <span className='mb-9 text-2xl font-semibold text-[#D9D9D9]'>:</span>
+        <div className='mx-2 flex flex-col items-center gap-2'>
+          <div className='bg-element-gray-lighter flex h-[50px] w-[50px] flex-col items-center justify-center rounded-xl'></div>
+          <span className='typo-caption-sm-medium text-text-subtler uppercase'>
+            HOURS
+          </span>
+        </div>
+        <span className='mb-9 text-2xl font-semibold text-[#D9D9D9]'>:</span>
+        <div className='mx-2 flex flex-col items-center gap-2'>
+          <div className='bg-element-gray-lighter flex h-[50px] w-[50px] flex-col items-center justify-center rounded-xl'></div>
+          <span className='typo-caption-sm-medium text-text-subtler uppercase'>
+            Mins
+          </span>
+        </div>
+        <span className='mb-9 text-2xl font-semibold text-[#D9D9D9]'>:</span>
+        <div className='mx-2 flex flex-col items-center gap-2'>
+          <div className='bg-element-gray-lighter flex h-[50px] w-[50px] flex-col items-center justify-center rounded-xl'></div>
+          <span className='typo-caption-sm-medium text-text-subtler uppercase'>
+            Secs
+          </span>
+        </div>
+      </div>
+    );
+  }
+
   return (
-    <div className='flex items-end justify-center'>
-      <AnimatedNumber number={timeLeft.days} label='Days' />
-      <span className='mb-9 text-2xl font-semibold text-[#D9D9D9]'>:</span>
-      <AnimatedNumber number={timeLeft.hours} label='HOURS' />
-      <span className='mb-9 text-2xl font-semibold text-[#D9D9D9]'>:</span>
-      <AnimatedNumber number={timeLeft.minutes} label='Mins' />
-      <span className='mb-9 text-2xl font-semibold text-[#D9D9D9]'>:</span>
-      <AnimatedNumber number={timeLeft.seconds} label='Secs' />
-    </div>
+    <LazyMotion features={domAnimation}>
+      <div className='flex items-end justify-center'>
+        <AnimatedNumber number={timeLeft.days} label='Days' />
+        <span className='mb-9 text-2xl font-semibold text-[#D9D9D9]'>:</span>
+        <AnimatedNumber number={timeLeft.hours} label='HOURS' />
+        <span className='mb-9 text-2xl font-semibold text-[#D9D9D9]'>:</span>
+        <AnimatedNumber number={timeLeft.minutes} label='Mins' />
+        <span className='mb-9 text-2xl font-semibold text-[#D9D9D9]'>:</span>
+        <AnimatedNumber number={timeLeft.seconds} label='Secs' />
+      </div>
+    </LazyMotion>
   );
 }