diff --git a/src/pages/Chat/ChatRoom.tsx b/src/pages/Chat/ChatRoom.tsx
index 48f008dd..61f539cd 100644
--- a/src/pages/Chat/ChatRoom.tsx
+++ b/src/pages/Chat/ChatRoom.tsx
@@ -3,7 +3,7 @@ import { useParams } from 'react-router-dom';
 import type { ChatMessage } from '@/apis/chat/entity';
 import SendArrowIcon from '@/assets/svg/chat-send-arrow.svg';
 import LinkifiedText from '@/components/common/LinkifiedText';
-import useKeyboardHeight from '@/utils/hooks/useViewportHeight';
+import useViewportHeightLock from '@/utils/hooks/useViewportHeightLock';
 import { cn } from '@/utils/ts/cn';
 import useChat from './hooks/useChat';
 import useChatRoomScroll from './hooks/useChatRoomScroll';
@@ -84,7 +84,7 @@ function ChatRoom() {
     useChat(Number(chatRoomId));
   const [value, setValue] = useState('');
 
-  useKeyboardHeight();
+  useViewportHeightLock();
 
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const baseTextareaHeightRef = useRef(0);
diff --git a/src/utils/hooks/useKeyboardHeight.ts b/src/utils/hooks/useKeyboardHeight.ts
deleted file mode 100644
index 94910d2c..00000000
--- a/src/utils/hooks/useKeyboardHeight.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { useEffect } from 'react';
-
-function useKeyboardHeight() {
-  useEffect(() => {
-    const visualViewport = window.visualViewport;
-    const root = document.documentElement;
-    const body = document.body;
-    const prevBodyOverflow = body.style.overflow;
-    const prevBodyHeight = body.style.height;
-    const prevRootHeight = root.style.height;
-
-    const setViewportHeight = () => {
-      const height = visualViewport?.height ?? window.innerHeight;
-      const offset = Math.max(0, visualViewport?.offsetTop ?? 0);
-      document.documentElement.style.setProperty('--viewport-height', `${height}px`);
-      document.documentElement.style.setProperty('--viewport-offset', `${offset}px`);
-    };
-
-    setViewportHeight();
-
-    body.style.overflow = 'hidden';
-    body.style.height = 'var(--viewport-height)';
-    root.style.height = 'var(--viewport-height)';
-
-    const options = { passive: true } as const;
-
-    visualViewport?.addEventListener('resize', setViewportHeight, options);
-    visualViewport?.addEventListener('scroll', setViewportHeight, options);
-    window.addEventListener('resize', setViewportHeight, options);
-
-    return () => {
-      visualViewport?.removeEventListener('resize', setViewportHeight);
-      visualViewport?.removeEventListener('scroll', setViewportHeight);
-      window.removeEventListener('resize', setViewportHeight);
-      body.style.overflow = prevBodyOverflow;
-      body.style.height = prevBodyHeight;
-      root.style.height = prevRootHeight;
-    };
-  }, []);
-}
-
-export default useKeyboardHeight;
diff --git a/src/utils/hooks/useViewportHeight.ts b/src/utils/hooks/useViewportHeight.ts
deleted file mode 100644
index 85e33af5..00000000
--- a/src/utils/hooks/useViewportHeight.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { useEffect } from 'react';
-
-function useKeyboardHeight() {
-  useEffect(() => {
-    const visualViewport = window.visualViewport;
-    const root = document.documentElement;
-    const body = document.body;
-    const prevBodyOverflow = body.style.overflow;
-    const prevBodyHeight = body.style.height;
-    const prevRootHeight = root.style.height;
-
-    const setViewportHeight = () => {
-      const height = visualViewport?.height ?? window.innerHeight;
-      const offset = Math.max(0, visualViewport?.offsetTop ?? 0);
-      document.documentElement.style.setProperty('--viewport-height', `${height}px`);
-      document.documentElement.style.setProperty('--viewport-offset', `${offset}px`);
-    };
-
-    setViewportHeight();
-
-    body.style.height = 'var(--viewport-height)';
-    root.style.height = 'var(--viewport-height)';
-
-    visualViewport?.addEventListener('resize', setViewportHeight);
-    visualViewport?.addEventListener('scroll', setViewportHeight);
-    window.addEventListener('resize', setViewportHeight);
-
-    return () => {
-      visualViewport?.removeEventListener('resize', setViewportHeight);
-      visualViewport?.removeEventListener('scroll', setViewportHeight);
-      window.removeEventListener('resize', setViewportHeight);
-      body.style.overflow = prevBodyOverflow;
-      body.style.height = prevBodyHeight;
-      root.style.height = prevRootHeight;
-    };
-  }, []);
-}
-
-export default useKeyboardHeight;
diff --git a/src/utils/hooks/useViewportHeightLock.ts b/src/utils/hooks/useViewportHeightLock.ts
new file mode 100644
index 00000000..0bb8ebfc
--- /dev/null
+++ b/src/utils/hooks/useViewportHeightLock.ts
@@ -0,0 +1,20 @@
+import { useLayoutEffect } from 'react';
+
+function useViewportHeightLock() {
+  useLayoutEffect(() => {
+    const root = document.documentElement;
+    const body = document.body;
+    const prevBodyHeight = body.style.height;
+    const prevRootHeight = root.style.height;
+
+    body.style.height = 'var(--viewport-height)';
+    root.style.height = 'var(--viewport-height)';
+
+    return () => {
+      body.style.height = prevBodyHeight;
+      root.style.height = prevRootHeight;
+    };
+  }, []);
+}
+
+export default useViewportHeightLock;