diff --git a/package.json b/package.json
index 567d1d6..7a58440 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-intersection-observer": "^9.10.2",
+    "react-iphone-layout": "^1.1.1",
     "react-responsive-carousel": "^3.2.23",
     "react-router-dom": "6.22.2",
     "react-toastify": "^10.0.5",
diff --git a/src/app/layout/RootLayout.tsx b/src/app/layout/RootLayout.tsx
index 48594cb..58ce683 100644
--- a/src/app/layout/RootLayout.tsx
+++ b/src/app/layout/RootLayout.tsx
@@ -1,10 +1,20 @@
+import { IPhoneLayout } from 'react-iphone-layout';
+import 'react-iphone-layout/dist/ReactIPhoneLayout.css';
 import { Outlet } from 'react-router-dom';
+
 import './RootLayout.scss';
 
+/**
+ * 🚨 현재 적용되어 있는 IPhoneLayout은 DEV 모드에서만 활성화되어야 하지만,
+ * 실제 개발 서버에서도 볼 수 있도록 하기 위해 따로 처리하지 않겠습니다.
+ * 하지만 실제 PROD 모드로 배포할 경우에는 <IPhoneLayout />을 제거해주세요.
+ */
 export const RootLayout = () => {
   return (
-    <div className='wrap'>
-      <Outlet />
-    </div>
+    <IPhoneLayout>
+      <div className='wrap'>
+        <Outlet />
+      </div>
+    </IPhoneLayout>
   );
 };
diff --git a/src/app/layout/iPhone/hooks/useUtilityIPhone.tsx b/src/app/layout/iPhone/hooks/useUtilityIPhone.tsx
deleted file mode 100644
index 67b00d3..0000000
--- a/src/app/layout/iPhone/hooks/useUtilityIPhone.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { useEffect, useRef } from 'react';
-
-const IPHONE_MIN_SIZE = 75;
-const IPHONE_INIT_SIZE = 75;
-const IPHONE_MAX_SIZE = 100;
-
-const IPHONE_PROTRAIT_MODE = 0; // 세로 모드
-const IPHONE_LANDSCAPE_MODE = -90; // 가로 모드
-
-/**
- * iPhone 레이아웃의 크기를 동적으로 변경하는 훅입니다.
- * @returns iPhone 레이아웃의 참조와 사이즈 변경 핸들러
- */
-export const useUtilityIPhone = () => {
-  const iPhoneSizeRef = useRef<number>(IPHONE_INIT_SIZE);
-  const iPhoneModeRef = useRef<number>(IPHONE_PROTRAIT_MODE);
-  const iPhoneLayoutRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    document.documentElement.style.setProperty(
-      '--iphone-size',
-      `${IPHONE_INIT_SIZE}%`,
-    );
-
-    document.documentElement.style.setProperty(
-      '--iphone-mode',
-      `${IPHONE_PROTRAIT_MODE}deg`,
-    );
-  }, []);
-
-  const changeStyle = () => {
-    if (iPhoneLayoutRef.current) {
-      iPhoneLayoutRef.current.style.height = `${iPhoneSizeRef.current}%`;
-      document.documentElement.style.setProperty(
-        '--iphone-size',
-        `${iPhoneSizeRef.current}%`,
-      );
-    }
-  };
-
-  const handleSizeUp = () => {
-    if (iPhoneSizeRef.current >= IPHONE_MAX_SIZE) return;
-
-    iPhoneSizeRef.current += 1;
-    changeStyle();
-  };
-
-  const handleSizeDown = () => {
-    if (iPhoneSizeRef.current <= IPHONE_MIN_SIZE) return;
-
-    iPhoneSizeRef.current -= 1;
-    changeStyle();
-  };
-
-  const handleRotate = () => {
-    if (iPhoneModeRef.current === IPHONE_PROTRAIT_MODE) {
-      // 가로 모드로 변경
-      iPhoneModeRef.current = IPHONE_LANDSCAPE_MODE;
-      document.documentElement.style.setProperty(
-        '--iphone-mode',
-        `${IPHONE_LANDSCAPE_MODE}deg`,
-      );
-    } else {
-      // 세로 모드로 변경
-      iPhoneModeRef.current = IPHONE_PROTRAIT_MODE;
-      document.documentElement.style.setProperty(
-        '--iphone-mode',
-        `${IPHONE_PROTRAIT_MODE}deg`,
-      );
-    }
-  };
-
-  return { iPhoneLayoutRef, handleRotate, handleSizeUp, handleSizeDown };
-};
diff --git a/src/app/layout/iPhone/index.ts b/src/app/layout/iPhone/index.ts
deleted file mode 100644
index 2aea9c1..0000000
--- a/src/app/layout/iPhone/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { IPhoneLayout } from './ui';
diff --git a/src/app/layout/iPhone/ui/IPhoneLayout.scss b/src/app/layout/iPhone/ui/IPhoneLayout.scss
deleted file mode 100644
index 0fa8431..0000000
--- a/src/app/layout/iPhone/ui/IPhoneLayout.scss
+++ /dev/null
@@ -1,92 +0,0 @@
-.iPhone-status,
-.iPhone-utility-container {
-  display: none;
-}
-
-@media (min-width: 1080px) {
-  .root-layout {
-    width: 100vw;
-    height: 100vh;
-
-    background-color: #eff2f9;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    .iPhone-layout {
-      position: relative;
-
-      background-image: url('/assets/image/iPhone.png');
-      background-size: cover;
-      background-repeat: no-repeat;
-      background-position: center center;
-
-      /* 아이폰 이미지의 비율 설정 */
-      aspect-ratio: 256 / 538;
-      height: var(--iphone-size);
-      rotate: var(--iphone-mode);
-
-      transition: rotate 1.5s;
-
-      .iPhone-status {
-        /* children의 크기를 아이폰 화면 크기에 맞게 설정 */
-        display: block;
-        width: 100%;
-        background-color: white;
-        overflow: hidden;
-
-        z-index: 9999;
-        position: sticky;
-        top: 0;
-      }
-
-      .client-area {
-        /* children의 크기를 아이폰 화면 크기에 맞게 설정 */
-        position: absolute;
-        bottom: 9.25%;
-        left: 3.5%;
-        right: 2.75%;
-        top: 10.3%;
-
-        z-index: 32;
-        background-color: white;
-
-        overflow-x: hidden;
-      }
-
-      .iPhone-utility-container {
-        position: absolute;
-        left: 50%;
-        bottom: calc(2% + (var(--iphone-size) - 80%) * 0.025);
-        transform: translateX(-50%);
-
-        display: flex;
-        align-items: center;
-        gap: 24px;
-
-        .size-down-btn,
-        .rotation-btn,
-        .size-up-btn {
-          width: 40px;
-          height: 40px;
-
-          border-radius: 50%;
-          border: 1px solid $gray5;
-
-          color: white;
-          font-size: 24px;
-
-          cursor: pointer;
-        }
-      }
-    }
-  }
-
-  .Toastify__toast-container {
-    padding: 0;
-    margin-bottom: 0;
-
-    bottom: calc(26% - (var(--iphone-size) - 60%) * 0.4);
-  }
-}
diff --git a/src/app/layout/iPhone/ui/IPhoneLayout.tsx b/src/app/layout/iPhone/ui/IPhoneLayout.tsx
deleted file mode 100644
index 0ae508b..0000000
--- a/src/app/layout/iPhone/ui/IPhoneLayout.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * 해당 레이아웃은 DEV 모드에서만 활성화되는 레이아웃입니다.
- * 이 레이아웃은 아이폰 레이아웃을 구현하며, 아이폰 레이아웃은 1440px 이상의 환경에서만 확인하실 수 있습니다.
- */
-
-import { Outlet } from 'react-router-dom';
-
-import { useUtilityIPhone } from '../hooks/useUtilityIPhone';
-
-import iPhoneStatus from '/assets/image/iPhone_status.png';
-import './IPhoneLayout.scss';
-
-export const IPhoneLayout = () => {
-  const { iPhoneLayoutRef, handleSizeDown, handleRotate, handleSizeUp } =
-    useUtilityIPhone();
-
-  return (
-    <div className='root-layout'>
-      <div ref={iPhoneLayoutRef} className='iPhone-layout'>
-        <div className='client-area'>
-          <img className='iPhone-status' src={iPhoneStatus} />
-          <Outlet />
-        </div>
-
-        <div className='iPhone-utility-container'>
-          <button className='size-down-btn' onClick={handleSizeDown}>
-            -
-          </button>
-          <button className='rotation-btn' onClick={handleRotate} />
-          <button className='size-up-btn' onClick={handleSizeUp}>
-            +
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/src/app/layout/iPhone/ui/index.ts b/src/app/layout/iPhone/ui/index.ts
deleted file mode 100644
index 092276f..0000000
--- a/src/app/layout/iPhone/ui/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { IPhoneLayout } from './IPhoneLayout';
diff --git a/src/app/layout/index.ts b/src/app/layout/index.ts
index feb618f..8e1d631 100644
--- a/src/app/layout/index.ts
+++ b/src/app/layout/index.ts
@@ -1,2 +1 @@
-export { IPhoneLayout } from './iPhone';
 export { RootLayout } from './RootLayout';
diff --git a/src/app/routers/index.tsx b/src/app/routers/index.tsx
index 80215d9..468f196 100644
--- a/src/app/routers/index.tsx
+++ b/src/app/routers/index.tsx
@@ -3,17 +3,12 @@ import { createBrowserRouter, RouteObject } from 'react-router-dom';
 import { FeedMainPage } from '@/pages/feed-main';
 import { ProfileMainPage } from '@/pages/profile';
 
-import { IPhoneLayout } from '../layout';
+import { RootLayout } from '../layout';
 
-/**
- * 🚨 현재 iPhone Layout은 DEV 모드에서만 활성화되는 부분이지만,
- * 실제 PROD 환경에서도 볼 수 있도록 하기 위해 따로 처리하지 않겠습니다.
- * 하지만 실제 PROD 모드로 배포할 경우에는 <IPhoneLayout />을 제거하고 <RootLayout />으로 변경해주세요.
- */
 const root: RouteObject[] = [
   {
     path: '/',
-    element: <IPhoneLayout />,
+    element: <RootLayout />,
     children: [
       { index: true, element: <FeedMainPage /> },
       { path: 'users/:userId', element: <ProfileMainPage /> },
diff --git a/yarn.lock b/yarn.lock
index ee6671a..454e388 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3557,6 +3557,14 @@ react-intersection-observer@^9.10.2:
   resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-9.10.2.tgz#d5b14f80c9a6bed525becc228db7dccac5d0ec1c"
   integrity sha512-j2hGADK2hCbAlfaq6L3tVLb4iqngoN7B1fT16MwJ4J16YW/vWLcmAIinLsw0lgpZeMi4UDUWtHC9QDde0/P1yQ==
 
+react-iphone-layout@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/react-iphone-layout/-/react-iphone-layout-1.1.1.tgz#d1cc3e758ce61d33d210d45728f8ae36b4d2e9ac"
+  integrity sha512-Xg6bq7IzSf6tg8hNCKntjSF0s7Ao3+QlqYUEWDgMpHMBvZ209dz7Ezg6EKAErAn16HTxTI9s5dAefY6L8R0Mxg==
+  dependencies:
+    react "^18.2.0"
+    react-dom "^18.2.0"
+
 react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"