diff --git a/apps/landing/src/app/(detail)/docs/LeftMenu.tsx b/apps/landing/src/app/(detail)/docs/LeftMenu.tsx
index fbc79520..ce3a5bec 100644
--- a/apps/landing/src/app/(detail)/docs/LeftMenu.tsx
+++ b/apps/landing/src/app/(detail)/docs/LeftMenu.tsx
@@ -4,7 +4,7 @@ export function LeftMenu() {
   return (
     <VStack gap="6px" h="1008px" p="20px 16px" w="220px">
       <Flex alignItems="center" borderRadius="6px" p="6px 10px">
-        <Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
+        <Text flex="1" opacity="0.8" typography="buttonSmid">
           개요
         </Text>
       </Flex>
@@ -16,89 +16,89 @@ export function LeftMenu() {
         p="6px 10px"
       >
         <Box bg="$primary" boxSize="8px" />
-        <Text flex="1 0 0" typography="buttonS">
+        <Text flex="1" typography="buttonS">
           설치
         </Text>
       </Flex>
       <Flex alignItems="center" borderRadius="6px" gap="10px" p="6px 10px">
-        <Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
+        <Text flex="1" opacity="0.8" typography="buttonSmid">
           개념
         </Text>
         <Image boxSize="16px" src="/menu-arrow.svg" />
       </Flex>
       <Flex gap="8px">
         <Box borderColor="$border" w="10px" />
-        <VStack flex="1 0 0" gap="6px">
+        <VStack flex="1" gap="6px">
           <Flex alignItems="center" borderRadius="6px" p="6px 10px">
-            <Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
+            <Text flex="1" opacity="0.8" typography="buttonSmid">
               유틸리티 퍼스트
             </Text>
           </Flex>
           <Flex alignItems="center" borderRadius="6px" p="6px 10px">
-            <Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
+            <Text flex="1" opacity="0.8" typography="buttonSmid">
               하이브리드 접근 방식
             </Text>
           </Flex>
           <Flex alignItems="center" borderRadius="6px" p="6px 10px">
-            <Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
+            <Text flex="1" opacity="0.8" typography="buttonSmid">
               헤드리스 컴포넌트
             </Text>
           </Flex>
         </VStack>
       </Flex>
       <Flex alignItems="center" borderRadius="6px" gap="10px" p="6px 10px">
-        <Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
+        <Text flex="1" opacity="0.8" typography="buttonSmid">
           구성 요소
         </Text>
         <Image boxSize="16px" src="/menu-arrow.svg" />
       </Flex>
       <Flex alignItems="center" borderRadius="6px" gap="10px" p="6px 10px">
-        <Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
+        <Text flex="1" opacity="0.8" typography="buttonSmid">
           API
         </Text>
         <Image boxSize="16px" src="/menu-arrow.svg" />
       </Flex>
       <Flex gap="8px">
         <Box borderColor="$border" w="10px" />
-        <VStack flex="1 0 0" gap="6px">
+        <VStack flex="1" gap="6px">
           <Flex alignItems="center" borderRadius="6px" p="6px 10px">
-            <Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
+            <Text flex="1" opacity="0.8" typography="buttonSmid">
               스타일이 지정됨
             </Text>
           </Flex>
           <Flex alignItems="center" borderRadius="6px" p="6px 10px">
-            <Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
+            <Text flex="1" opacity="0.8" typography="buttonSmid">
               CSS
             </Text>
           </Flex>
         </VStack>
       </Flex>
       <Flex alignItems="center" borderRadius="6px" gap="10px" p="6px 10px">
-        <Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
+        <Text flex="1" opacity="0.8" typography="buttonSmid">
           테마
         </Text>
         <Image boxSize="16px" src="/menu-arrow.svg" />
       </Flex>
       <Flex gap="8px">
         <Box borderColor="$border" w="10px" />
-        <VStack flex="1 0 0" gap="6px">
+        <VStack flex="1" gap="6px">
           <Flex alignItems="center" borderRadius="6px" p="6px 10px">
-            <Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
+            <Text flex="1" opacity="0.8" typography="buttonSmid">
               테마 사용자 정의
             </Text>
           </Flex>
           <Flex alignItems="center" borderRadius="6px" p="6px 10px">
-            <Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
+            <Text flex="1" opacity="0.8" typography="buttonSmid">
               테마 토큰
             </Text>
           </Flex>
           <Flex alignItems="center" borderRadius="6px" p="6px 10px">
-            <Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
+            <Text flex="1" opacity="0.8" typography="buttonSmid">
               중단점
             </Text>
           </Flex>
           <Flex alignItems="center" borderRadius="6px" p="6px 10px">
-            <Text flex="1 0 0" opacity="0.8" typography="buttonSmid">
+            <Text flex="1" opacity="0.8" typography="buttonSmid">
               구성 요소 테마
             </Text>
           </Flex>
diff --git a/apps/landing/src/app/(detail)/docs/RightIndex.tsx b/apps/landing/src/app/(detail)/docs/RightIndex.tsx
index 72a633a3..02c6705e 100644
--- a/apps/landing/src/app/(detail)/docs/RightIndex.tsx
+++ b/apps/landing/src/app/(detail)/docs/RightIndex.tsx
@@ -5,7 +5,7 @@ export function RightIndex() {
     <VStack gap="16px" p="20px 16px" w="200px">
       <VStack>
         <Flex alignItems="center" gap="10px" p="6px 0px">
-          <Text color="$text" flex="1 0 0" typography="captionBold">
+          <Text color="$text" flex="1" typography="captionBold">
             Contents
           </Text>
         </Flex>
@@ -13,7 +13,7 @@ export function RightIndex() {
           <Box bg="$primary" borderRadius="100%" boxSize="6px" />
           <Text
             color="$primary"
-            flex="1 0 0"
+            flex="1"
             opacity="0.8"
             typography="captionBold"
           >
@@ -21,39 +21,34 @@ export function RightIndex() {
           </Text>
         </Flex>
         <Flex alignItems="center" gap="10px" p="4px 10px 30px">
-          <Text color="$text" flex="1 0 0" opacity="0.6" typography="caption">
+          <Text color="$text" flex="1" opacity="0.6" typography="caption">
             General Guides
           </Text>
         </Flex>
         <Flex alignItems="center" gap="10px" p="4px 10px 30px">
-          <Text color="$text" flex="1 0 0" opacity="0.6" typography="caption">
+          <Text color="$text" flex="1" opacity="0.6" typography="caption">
             Framework Guides
           </Text>
         </Flex>
         <Flex alignItems="center" gap="10px" p="4px 10px">
-          <Text color="$text" flex="1 0 0" opacity="0.6" typography="caption">
+          <Text color="$text" flex="1" opacity="0.6" typography="caption">
             Next Steps
           </Text>
         </Flex>
         <Flex alignItems="center" gap="10px" p="4px 10px">
-          <Text color="$text" flex="1 0 0" opacity="0.6" typography="caption">
+          <Text color="$text" flex="1" opacity="0.6" typography="caption">
             Playground
           </Text>
         </Flex>
         <Flex alignItems="center" gap="10px" p="4px 10px">
-          <Text color="$text" flex="1 0 0" opacity="0.6" typography="caption">
+          <Text color="$text" flex="1" opacity="0.6" typography="caption">
             Acknowledgement
           </Text>
         </Flex>
       </VStack>
       <Box bg="undefined" h="1px" />
       <Flex gap="4px">
-        <Text
-          color="$caption"
-          flex="1 0 0"
-          textAlign="right"
-          typography="small"
-        >
+        <Text color="$caption" flex="1" textAlign="right" typography="small">
           Edit this page
         </Text>
         <Image
diff --git a/apps/landing/src/app/page.tsx b/apps/landing/src/app/page.tsx
index a26deb57..7049be2e 100644
--- a/apps/landing/src/app/page.tsx
+++ b/apps/landing/src/app/page.tsx
@@ -5,7 +5,7 @@ import { CodeBoard } from '../components/CodeBoard'
 import { Container } from '../components/Container'
 import { Discord } from '../components/Discord'
 import { Header } from '../components/Header'
-import { IMAGE_PREFIX } from '../constants'
+import { URL_PREFIX } from '../constants'
 
 export default function HomePage() {
   return (
@@ -14,7 +14,7 @@ export default function HomePage() {
       <Box mt="150px">
         <VStack alignItems="center" gap="50px" maxW="800px" mx="auto">
           <VStack alignItems="center" gap="24px">
-            <Image h="50px" src={IMAGE_PREFIX + '/icon.svg'} w="52px" />
+            <Image h="50px" src={URL_PREFIX + '/icon.svg'} w="52px" />
             <Text color="$title" textAlign="center" typography="h1">
               Lorem ipsum dolor sit amet,
               <br />
@@ -31,7 +31,7 @@ export default function HomePage() {
             className={css`
               text-decoration: none;
             `}
-            href="/docs/overview"
+            href={URL_PREFIX + '/docs/overview'}
           >
             <Flex
               alignItems="center"
@@ -45,7 +45,7 @@ export default function HomePage() {
                 <Text color="$base" typography="buttonL">
                   Get started
                 </Text>
-                <Image boxSize="24px" src={IMAGE_PREFIX + '/arrow.svg'} />
+                <Image boxSize="24px" src={URL_PREFIX + '/arrow.svg'} />
               </Flex>
             </Flex>
           </Link>
@@ -69,18 +69,18 @@ export default function HomePage() {
               <Flex
                 bg="$cardBg"
                 borderRadius="20px"
-                flex="1 0 0"
+                flex="1"
                 gap="10px"
                 p="24px"
               >
                 <Flex px="8px">
-                  <Image boxSize="32px" src={IMAGE_PREFIX + '/idea.svg'} />
+                  <Image boxSize="32px" src={URL_PREFIX + '/idea.svg'} />
                 </Flex>
-                <VStack flex="1 0 0" gap="10px">
+                <VStack flex="1" gap="10px">
                   <Text color="$title" typography="h6">
                     Feature title
                   </Text>
-                  <Text flex="1 0 0" typography="body" w="484px">
+                  <Text flex="1" typography="body" w="484px">
                     Lorem ipsum dolor sit amet.
                   </Text>
                 </VStack>
@@ -88,18 +88,18 @@ export default function HomePage() {
               <Flex
                 bg="$cardBg"
                 borderRadius="20px"
-                flex="1 0 0"
+                flex="1"
                 gap="10px"
                 p="30px 24px"
               >
                 <Flex px="8px">
-                  <Image boxSize="32px" src={IMAGE_PREFIX + '/trophy.svg'} />
+                  <Image boxSize="32px" src={URL_PREFIX + '/trophy.svg'} />
                 </Flex>
-                <VStack flex="1 0 0" gap="10px">
+                <VStack flex="1" gap="10px">
                   <Text color="$title" typography="h6">
                     Feature title
                   </Text>
-                  <Text flex="1 0 0" typography="body" w="484px">
+                  <Text flex="1" typography="body" w="484px">
                     Lorem ipsum dolor sit amet. Etiam sit amet feugiat turpis.
                     Proin nec ante a sem vestibulum sodales non ut ex.
                   </Text>
@@ -110,18 +110,18 @@ export default function HomePage() {
               <Flex
                 bg="$cardBg"
                 borderRadius="20px"
-                flex="1 0 0"
+                flex="1"
                 gap="10px"
                 p="30px 24px"
               >
                 <Flex px="8px">
-                  <Image boxSize="32px" src={IMAGE_PREFIX + '/heart.svg'} />
+                  <Image boxSize="32px" src={URL_PREFIX + '/heart.svg'} />
                 </Flex>
-                <VStack flex="1 0 0" gap="10px">
+                <VStack flex="1" gap="10px">
                   <Text color="$title" typography="h6">
                     Feature title
                   </Text>
-                  <Text flex="1 0 0" typography="body" w="484px">
+                  <Text flex="1" typography="body" w="484px">
                     Lorem ipsum dolor sit amet. Etiam sit amet feugiat turpis.
                     Proin nec ante a sem vestibulum.
                   </Text>
@@ -130,18 +130,18 @@ export default function HomePage() {
               <Flex
                 bg="$cardBg"
                 borderRadius="20px"
-                flex="1 0 0"
+                flex="1"
                 gap="10px"
                 p="30px 24px"
               >
                 <Flex px="8px">
-                  <Image boxSize="32px" src={IMAGE_PREFIX + '/notice.svg'} />
+                  <Image boxSize="32px" src={URL_PREFIX + '/notice.svg'} />
                 </Flex>
-                <VStack flex="1 0 0" gap="10px">
+                <VStack flex="1" gap="10px">
                   <Text color="$title" typography="h6">
                     Feature title
                   </Text>
-                  <Text flex="1 0 0" typography="body" w="484px">
+                  <Text flex="1" typography="body" w="484px">
                     Lorem ipsum dolor sit amet. Etiam sit amet feugiat turpis.
                   </Text>
                 </VStack>
diff --git a/apps/landing/src/components/CodeBoard.tsx b/apps/landing/src/components/CodeBoard.tsx
index a4665196..95179f0d 100644
--- a/apps/landing/src/components/CodeBoard.tsx
+++ b/apps/landing/src/components/CodeBoard.tsx
@@ -62,7 +62,7 @@ export function CodeBoard() {
           <Flex
             alignItems="center"
             borderRadius="1000px"
-            flex="1 0 0"
+            flex="1"
             p="12px 34px"
           >
             <Text typography="buttonM">code menu</Text>
@@ -70,7 +70,7 @@ export function CodeBoard() {
           <Flex
             alignItems="center"
             borderRadius="1000px"
-            flex="1 0 0"
+            flex="1"
             p="12px 34px"
           >
             <Text opacity="0.6" typography="buttonM">
@@ -80,7 +80,7 @@ export function CodeBoard() {
           <Flex
             alignItems="center"
             borderRadius="1000px"
-            flex="1 0 0"
+            flex="1"
             p="12px 34px"
           >
             <Text opacity="0.6" typography="buttonM">
diff --git a/apps/landing/src/components/Discord.tsx b/apps/landing/src/components/Discord.tsx
index eb6690bf..0f2fde55 100644
--- a/apps/landing/src/components/Discord.tsx
+++ b/apps/landing/src/components/Discord.tsx
@@ -1,13 +1,13 @@
 import { Center, css, Flex, Image, Text, VStack } from '@devup-ui/react'
 import Link from 'next/link'
 
-import { IMAGE_PREFIX } from '../constants'
+import { URL_PREFIX } from '../constants'
 
 export function Discord() {
   return (
     <Center
       bgColor="$joinBg"
-      bgImage="url(/discord-bg.svg)"
+      bgImage={`url(${URL_PREFIX}/discord-bg.svg)`}
       borderRadius="40px 40px 0px 40px"
       h="380px"
     >
@@ -39,7 +39,7 @@ export function Discord() {
               <Text color="#FFF" typography="buttonLbold">
                 Join our Discord
               </Text>
-              <Image boxSize="24px" src={IMAGE_PREFIX + '/outlink.svg'} />
+              <Image boxSize="24px" src={URL_PREFIX + '/outlink.svg'} />
             </Flex>
           </Flex>
         </Link>
diff --git a/apps/landing/src/components/Footer.tsx b/apps/landing/src/components/Footer.tsx
index f0feee84..34012645 100644
--- a/apps/landing/src/components/Footer.tsx
+++ b/apps/landing/src/components/Footer.tsx
@@ -1,12 +1,12 @@
 import { Flex, Image, Text, VStack } from '@devup-ui/react'
 
-import { IMAGE_PREFIX } from '../constants'
+import { URL_PREFIX } from '../constants'
 
 export function Footer() {
   return (
     <VStack bg="$footerBg" gap="80px" p="60px 320px">
       <Flex justifyContent="space-between">
-        <VStack flex="1 0 0" gap="20px" minWidth="240px">
+        <VStack flex="1" gap="20px" minWidth="240px">
           <Text color="$footerTitle" typography="buttonS">
             메뉴 타이틀 1
           </Text>
@@ -28,7 +28,7 @@ export function Footer() {
             </Text>
           </VStack>
         </VStack>
-        <VStack flex="1 0 0" gap="20px" minWidth="240px">
+        <VStack flex="1" gap="20px" minWidth="240px">
           <Text color="$footerTitle" typography="buttonS">
             메뉴 타이틀 2
           </Text>
@@ -39,7 +39,7 @@ export function Footer() {
             상세 메뉴 2
           </Text>
         </VStack>
-        <VStack flex="1 0 0" gap="20px" minWidth="240px">
+        <VStack flex="1" gap="20px" minWidth="240px">
           <Text color="$footerTitle" typography="buttonS">
             메뉴 타이틀 3
           </Text>
@@ -59,7 +59,7 @@ export function Footer() {
       </Flex>
       <Flex alignItems="flex-end" justifyContent="space-between">
         <Flex alignItems="flex-end">
-          <Image alt="white-logo" src={IMAGE_PREFIX + '/white-logo.svg'} />
+          <Image alt="white-logo" src={URL_PREFIX + '/white-logo.svg'} />
         </Flex>
         <VStack alignItems="flex-end" gap="10px">
           <Text color="$footerText" textAlign="right" typography="small">
diff --git a/apps/landing/src/components/Header/index.tsx b/apps/landing/src/components/Header/index.tsx
index b4ccc0cb..3d3b1712 100644
--- a/apps/landing/src/components/Header/index.tsx
+++ b/apps/landing/src/components/Header/index.tsx
@@ -1,7 +1,7 @@
 import { css, Flex, Image, Text } from '@devup-ui/react'
 import Link from 'next/link'
 
-import { IMAGE_PREFIX } from '../../constants'
+import { URL_PREFIX } from '../../constants'
 import { HeaderWrap } from './HeaderWrap'
 
 export function Header() {
@@ -12,9 +12,9 @@ export function Header() {
           className={css`
             text-decoration: none;
           `}
-          href="/"
+          href={URL_PREFIX + '/'}
         >
-          <Image h="42px" src={IMAGE_PREFIX + '/logo.svg'} />
+          <Image h="42px" src={URL_PREFIX + '/logo.svg'} />
         </Link>
       </Flex>
       <Flex alignItems="center" gap="10px">
@@ -23,7 +23,7 @@ export function Header() {
             className={css`
               text-decoration: none;
             `}
-            href="/docs/overview"
+            href={URL_PREFIX + '/docs/overview'}
           >
             <Text color="$title" opacity="0.6" typography="buttonLsemiB">
               Docs
@@ -35,7 +35,7 @@ export function Header() {
             className={css`
               text-decoration: none;
             `}
-            href="/team"
+            href={URL_PREFIX + '/team'}
           >
             <Text color="$title" opacity="0.6" typography="buttonLsemiB">
               Team
@@ -51,7 +51,7 @@ export function Header() {
               href="https://github.com/dev-five-git/devup-ui"
               target="_blank"
             >
-              <Image boxSize="24px" src={IMAGE_PREFIX + '/github.svg'} />
+              <Image boxSize="24px" src={URL_PREFIX + '/github.svg'} />
             </Link>
           </Flex>
           <Flex alignItems="center" px="10px">
@@ -62,11 +62,11 @@ export function Header() {
               href="https://discord.gg/BtNffusw"
               target="_blank"
             >
-              <Image boxSize="24px" src={IMAGE_PREFIX + '/discord.svg'} />
+              <Image boxSize="24px" src={URL_PREFIX + '/discord.svg'} />
             </Link>
           </Flex>
           <Flex alignItems="center" px="10px">
-            <Image boxSize="24px" src={IMAGE_PREFIX + '/light.svg'} />
+            <Image boxSize="24px" src={URL_PREFIX + '/light.svg'} />
           </Flex>
         </Flex>
       </Flex>
diff --git a/apps/landing/src/constants.ts b/apps/landing/src/constants.ts
index 53527804..02b411ba 100644
--- a/apps/landing/src/constants.ts
+++ b/apps/landing/src/constants.ts
@@ -1,2 +1,2 @@
-export const IMAGE_PREFIX =
+export const URL_PREFIX =
   process.env.NODE_ENV === 'production' ? '/devup-ui' : ''