From f4b93843b7205e5cd6592d619293fc0b61a249a5 Mon Sep 17 00:00:00 2001
From: dev-wooyeon <une@kakao.com>
Date: Wed, 22 Apr 2026 14:08:23 +0900
Subject: [PATCH] =?UTF-8?q?fix(blog):=20=EB=A0=88=EC=9D=B4=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=20=EC=9E=94=EB=B2=84=EA=B7=B8=EC=99=80=20=EB=AA=A8?=
 =?UTF-8?q?=EB=B0=94=EC=9D=BC=20=ED=83=90=EC=83=89=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

방문자 관점에서 보이는 레이아웃 잔버그를 정리했어요.

모바일 하단 네비게이션을 좌측 드로어로 바꾸고
헤더와 글로벌 레이아웃의 간섭을 줄였어요.
베트남 여행 글의 어색한 문장 배치도 함께 정리했어요.
---
 .../index.mdx"                                |   4 +-
 src/shared/layout/AppShell/AppShell.tsx       |  57 ++++-
 .../layout/Header/MobileBottomNav.test.tsx    | 117 ++++-----
 src/shared/layout/Header/MobileBottomNav.tsx  | 234 ++++++++++++++----
 src/styles/globals.css                        |  10 +-
 5 files changed, 279 insertions(+), 143 deletions(-)

diff --git "a/posts/\353\262\240\355\212\270\353\202\250-\354\227\254\355\226\211-\355\233\204\352\270\260/index.mdx" "b/posts/\353\262\240\355\212\270\353\202\250-\354\227\254\355\226\211-\355\233\204\352\270\260/index.mdx"
index 9bbb9c6f..93dee98e 100644
--- "a/posts/\353\262\240\355\212\270\353\202\250-\354\227\254\355\226\211-\355\233\204\352\270\260/index.mdx"
+++ "b/posts/\353\262\240\355\212\270\353\202\250-\354\227\254\355\226\211-\355\233\204\352\270\260/index.mdx"
@@ -83,7 +83,9 @@
   ![](/assets/posts/2026-02-05-travel-vietnam-review/food3.jpeg)
 </ImageGrid>
 
-유튜브로 미리 찾아본 식당들 전부 만족했어요. 그중에서도 가장 추천하는 식당은 [Beni 2](https://share.google/1wtyxMhTXyT2QvGCO)예요. ⭐⭐⭐⭐⭐
+유튜브로 미리 찾아본 식당들은 전부 만족스러웠어요. 그중에서 가장 추천하는 곳은 [Beni 2](https://share.google/1wtyxMhTXyT2QvGCO)예요.
+
+체감 평점으로는 ⭐⭐⭐⭐⭐ 정도였습니다.
 
 - 해산물 맛집이예요. 랍스터랑 세트메뉴로 주문해서 먹었는데 하나같이 다 맛있었어요.
 - 찐로컬 분위기로 현지인들도 많았어요.
diff --git a/src/shared/layout/AppShell/AppShell.tsx b/src/shared/layout/AppShell/AppShell.tsx
index edd0dabc..d304fdc5 100644
--- a/src/shared/layout/AppShell/AppShell.tsx
+++ b/src/shared/layout/AppShell/AppShell.tsx
@@ -3,7 +3,7 @@
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import type { ReactNode } from 'react';
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useKBar } from 'kbar';
 import { clsx } from 'clsx';
 import type { FeedData } from '@/domains/post/model/types';
@@ -212,19 +212,24 @@ function SearchButton() {
 
 export default function AppShell({ children, posts }: AppShellProps) {
   const pathname = usePathname();
+  const [mobileNavOpen, setMobileNavOpen] = useState(false);
 
   const activeSection = useMemo(
     () => resolveSection(pathname, posts),
     [pathname, posts]
   );
 
+  useEffect(() => {
+    setMobileNavOpen(false);
+  }, [pathname]);
+
   return (
     <div className="min-h-screen bg-[var(--color-grey-50)] text-[var(--color-text-primary)] md:flex md:h-screen md:overflow-hidden">
       <ThemeTransitionWash />
 
       <aside className="hidden h-screen w-16 shrink-0 border-r border-[var(--color-grey-200)] bg-[var(--color-bg-primary)] md:sticky md:top-0 md:flex">
         <div className="flex h-full w-full flex-col justify-between">
-          <div className="flex flex-col items-center gap-2 px-1.5 py-3">
+          <div className="flex flex-col items-center gap-1 px-1 py-3">
             {RAIL_NAV_ITEMS.map((item) => {
               const isActive = item.id === activeSection;
 
@@ -234,7 +239,7 @@ export default function AppShell({ children, posts }: AppShellProps) {
                   href={item.href}
                   aria-label={item.label}
                   className={clsx(
-                    'flex w-full flex-col items-center gap-1 rounded-2xl px-1 py-1.5 transition-colors',
+                    'flex w-full flex-col items-center gap-1 rounded-2xl px-1 py-2 transition-colors',
                     isActive
                       ? 'text-[var(--color-toss-blue)]'
                       : 'text-[var(--color-grey-500)] hover:text-[var(--color-grey-900)]'
@@ -242,7 +247,7 @@ export default function AppShell({ children, posts }: AppShellProps) {
                 >
                   <span
                     className={clsx(
-                      'flex h-9 w-9 items-center justify-center rounded-xl border transition-colors',
+                      'flex h-10 w-10 items-center justify-center rounded-xl border transition-colors',
                       isActive
                         ? 'border-[var(--color-toss-blue)] bg-[var(--color-toss-blue)] text-white shadow-sm'
                         : 'border-transparent hover:border-[var(--color-grey-100)] hover:bg-[var(--color-bg-primary)]'
@@ -250,7 +255,7 @@ export default function AppShell({ children, posts }: AppShellProps) {
                   >
                     {item.icon}
                   </span>
-                  <span className="text-center text-xs leading-none tracking-tight">
+                  <span className="text-center text-xs font-medium leading-none tracking-tight">
                     {item.label}
                   </span>
                 </Link>
@@ -275,7 +280,40 @@ export default function AppShell({ children, posts }: AppShellProps) {
 
       <div className="min-w-0 flex-1 bg-[var(--color-bg-primary)] md:flex md:h-screen md:flex-col md:overflow-hidden">
         <header className="sticky top-0 z-[var(--z-sticky)] border-b border-[var(--color-grey-200)] bg-[var(--color-bg-primary)]/95 backdrop-blur-md">
-          <div className="grid h-14 grid-cols-[1fr_minmax(0,560px)_1fr] items-center gap-3 px-4 md:px-6">
+          <div className="flex h-14 items-center gap-3 px-4 md:hidden">
+            <button
+              type="button"
+              aria-label={mobileNavOpen ? '메뉴 닫기' : '메뉴 열기'}
+              aria-expanded={mobileNavOpen}
+              aria-controls="mobile-nav-drawer"
+              onClick={() => setMobileNavOpen((current) => !current)}
+              className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-[var(--color-grey-200)] bg-[var(--color-grey-50)] text-[var(--color-grey-500)] transition-colors hover:border-[var(--color-grey-300)] hover:text-[var(--color-grey-900)]"
+            >
+              <svg
+                width="18"
+                height="18"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.9"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                aria-hidden="true"
+              >
+                <line x1="4" y1="7" x2="20" y2="7" />
+                <line x1="4" y1="12" x2="20" y2="12" />
+                <line x1="4" y1="17" x2="20" y2="17" />
+              </svg>
+            </button>
+
+            <div className="min-w-0 flex-1">
+              <SearchButton />
+            </div>
+
+            <ThemeToggle />
+          </div>
+
+          <div className="hidden h-14 grid-cols-[1fr_minmax(0,560px)_1fr] items-center gap-3 px-6 md:grid">
             <div />
             <div className="flex justify-center">
               <div className="w-full max-w-xl">
@@ -294,7 +332,12 @@ export default function AppShell({ children, posts }: AppShellProps) {
         </div>
       </div>
 
-      <MobileBottomNav pathname={pathname} visible />
+      <MobileBottomNav
+        pathname={pathname}
+        visible
+        open={mobileNavOpen}
+        onOpenChange={setMobileNavOpen}
+      />
     </div>
   );
 }
diff --git a/src/shared/layout/Header/MobileBottomNav.test.tsx b/src/shared/layout/Header/MobileBottomNav.test.tsx
index d82815b9..e9de5bd2 100644
--- a/src/shared/layout/Header/MobileBottomNav.test.tsx
+++ b/src/shared/layout/Header/MobileBottomNav.test.tsx
@@ -1,5 +1,5 @@
 import { act, render, screen } from '@testing-library/react';
-import { createElement, type ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import MobileBottomNav from './MobileBottomNav';
 
@@ -20,29 +20,6 @@ vi.mock('next/link', () => ({
   ),
 }));
 
-vi.mock('framer-motion', () => ({
-  motion: {
-    nav: ({
-      children,
-      ...props
-    }: {
-      children: ReactNode;
-      initial?: unknown;
-      animate?: unknown;
-      transition?: unknown;
-      [key: string]: unknown;
-    }) => {
-      const {
-        initial: _initial,
-        animate: _animate,
-        transition: _transition,
-        ...domProps
-      } = props;
-      return createElement('nav', domProps, children);
-    },
-  },
-}));
-
 vi.mock('@/shared/analytics/lib/analytics', () => {
   return {
     AnalyticsEvents: {
@@ -55,93 +32,83 @@ vi.mock('@/shared/analytics/lib/analytics', () => {
 });
 
 describe('MobileBottomNav', () => {
-  it('renders four mobile nav links', () => {
-    render(<MobileBottomNav pathname="/" visible />);
-
-    expect(screen.getByRole('link', { name: '홈' })).toBeInTheDocument();
-    expect(
-      screen.getByRole('link', { name: 'Engineering' })
-    ).toBeInTheDocument();
-    expect(screen.getByRole('link', { name: 'Life' })).toBeInTheDocument();
-    expect(screen.getByRole('link', { name: 'Resume' })).toBeInTheDocument();
+  it('renders drawer links when open', () => {
+    render(<MobileBottomNav pathname="/" visible open />);
+
+    expect(screen.getByRole('link', { name: /Home/ })).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: /Tech/ })).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: /Life/ })).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: /Resume/ })).toBeInTheDocument();
   });
 
   it('marks active item based on exact home path', async () => {
-    render(<MobileBottomNav pathname="/" visible />);
+    render(<MobileBottomNav pathname="/" visible open />);
 
-    const home = await screen.findByRole('link', { name: '홈' });
+    const home = await screen.findByRole('link', { name: /Home/ });
     expect(home).toHaveAttribute('aria-current', 'page');
 
-    const engineering = await screen.findByRole('link', {
-      name: 'Engineering',
-    });
-    expect(engineering).not.toHaveAttribute('aria-current');
+    const tech = await screen.findByRole('link', { name: /Tech/ });
+    expect(tech).not.toHaveAttribute('aria-current');
   });
 
   it('marks active item for nested engineering path', async () => {
-    render(<MobileBottomNav pathname="/engineering/how-to-test" visible />);
+    render(
+      <MobileBottomNav pathname="/engineering/how-to-test" visible open />
+    );
 
-    const engineering = await screen.findByRole('link', {
-      name: 'Engineering',
-    });
-    expect(engineering).toHaveAttribute('aria-current', 'page');
+    const tech = await screen.findByRole('link', { name: /Tech/ });
+    expect(tech).toHaveAttribute('aria-current', 'page');
   });
 
-  it('applies inactive hover style token for non-active items', async () => {
-    render(<MobileBottomNav pathname="/" visible />);
-
-    const life = await screen.findByRole('link', { name: 'Life' });
-    const lifeContent = life.querySelector('div');
+  it('renders drawer shell when open', () => {
+    render(<MobileBottomNav pathname="/" visible open />);
 
-    expect(lifeContent).toHaveClass('border-transparent');
-    expect(lifeContent).toHaveClass('hover:bg-[var(--mobile-nav-hover-bg)]');
-    expect(lifeContent).toHaveClass(
-      'group-active:bg-[var(--mobile-nav-hover-bg)]'
-    );
-    expect(lifeContent).toHaveClass('min-h-14');
+    expect(screen.getByLabelText('모바일 네비게이션')).toBeInTheDocument();
+    expect(screen.getByText('블로그 섹션과 외부 링크')).toBeInTheDocument();
   });
 
-  it('applies focus and touch token classes on each nav control', async () => {
-    render(<MobileBottomNav pathname="/" visible />);
+  it('calls close handler when backdrop is clicked', () => {
+    const handleOpenChange = vi.fn();
 
-    const home = await screen.findByRole('link', { name: '홈' });
-    expect(home).toHaveClass(
-      'focus-visible:ring-[var(--mobile-nav-focus-ring)]'
+    render(
+      <MobileBottomNav
+        pathname="/"
+        visible
+        open
+        onOpenChange={handleOpenChange}
+      />
     );
-    expect(home).toHaveClass(
-      'focus-visible:ring-offset-[var(--mobile-nav-focus-offset)]'
-    );
-    expect(home).toHaveClass('touch-manipulation');
-    expect(home).toHaveClass('active:scale-[0.97]');
+
+    screen.getAllByRole('button', { name: '메뉴 닫기' })[0].click();
+    expect(handleOpenChange).toHaveBeenCalledWith(false);
   });
 
   it('tracks analytics on tab click', async () => {
     mockTrackEvent.mockClear();
 
     await act(async () => {
-      render(<MobileBottomNav pathname="/engineering" visible />);
+      render(<MobileBottomNav pathname="/engineering" visible open />);
       await Promise.resolve();
     });
 
-    const resume = screen.getByRole('link', { name: 'Resume' });
+    const resume = screen.getByRole('link', { name: /Resume/ });
     await act(async () => {
       await Promise.resolve();
       resume.dispatchEvent(new MouseEvent('click', { bubbles: true }));
     });
 
     expect(mockTrackEvent).toHaveBeenCalledWith('click', {
-      target: 'mobile_bottom_nav',
+      target: 'mobile_nav_drawer',
       destination: '/resume',
     });
   });
 
-  it('applies motion offset class when hidden', () => {
-    render(<MobileBottomNav pathname="/" visible={false} />);
+  it('hides pointer events when closed', () => {
+    render(<MobileBottomNav pathname="/" visible open={false} />);
 
-    const nav = screen.getByLabelText('모바일 하단 네비게이션');
-    expect(nav).toHaveClass('fixed');
-    expect((nav as HTMLDivElement).getAttribute('aria-label')).toBe(
-      '모바일 하단 네비게이션'
-    );
+    const drawerRoot =
+      screen.getAllByRole('button', { name: '메뉴 닫기', hidden: true })[0]
+        .parentElement;
+    expect(drawerRoot).toHaveClass('pointer-events-none');
   });
 });
diff --git a/src/shared/layout/Header/MobileBottomNav.tsx b/src/shared/layout/Header/MobileBottomNav.tsx
index 8516bb35..8b7d8697 100644
--- a/src/shared/layout/Header/MobileBottomNav.tsx
+++ b/src/shared/layout/Header/MobileBottomNav.tsx
@@ -1,8 +1,7 @@
 'use client';
 
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import Link from 'next/link';
-import { motion } from 'framer-motion';
 import { clsx } from 'clsx';
 import { AnalyticsEvents, trackEvent } from '@/shared/analytics/lib/analytics';
 import { AppSectionIcon } from '@/shared/ui/icons/AppSectionIcon';
@@ -10,6 +9,8 @@ import { AppSectionIcon } from '@/shared/ui/icons/AppSectionIcon';
 interface MobileBottomNavProps {
   pathname: string;
   visible: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
 }
 
 interface MobileNavItem {
@@ -21,6 +22,8 @@ interface MobileNavItem {
 export default function MobileBottomNav({
   pathname,
   visible,
+  open = false,
+  onOpenChange,
 }: MobileBottomNavProps) {
   const navItems = useMemo<MobileNavItem[]>(
     () => [
@@ -48,73 +51,200 @@ export default function MobileBottomNav({
     []
   );
 
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onOpenChange?.(false);
+      }
+    };
+
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.body.style.overflow = previousOverflow;
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [open, onOpenChange]);
+
   return (
-    <motion.nav
-      initial={false}
-      animate={{ y: visible ? 0 : 140, opacity: visible ? 1 : 0.95 }}
-      transition={{ duration: 0.26, ease: [0.32, 0.72, 0, 1] }}
-      className="md:hidden fixed inset-x-0 bottom-0 z-[var(--z-mobile-bottom-nav)] px-3 pb-[calc(env(safe-area-inset-bottom)+8px)] pointer-events-none"
-      aria-label="모바일 하단 네비게이션"
+    <div
+      className={clsx(
+        'fixed inset-0 z-[var(--z-overlay)] md:hidden',
+        visible && open ? 'pointer-events-auto' : 'pointer-events-none'
+      )}
+      aria-hidden={!open}
     >
-      <div className="mx-auto max-w-[800px] pointer-events-auto">
-        <div className="grid grid-cols-4 gap-1.5 px-2.5 py-2 rounded-[var(--radius-lg)] border border-[var(--mobile-nav-border)] bg-[var(--mobile-nav-bg)] shadow-[var(--mobile-nav-shadow)] backdrop-blur-xl">
+      <button
+        type="button"
+        aria-label="메뉴 닫기"
+        className={clsx(
+          'absolute inset-0 bg-black/40 backdrop-blur-sm transition-opacity',
+          open ? 'opacity-100' : 'opacity-0'
+        )}
+        onClick={() => onOpenChange?.(false)}
+      />
+
+      <aside
+        id="mobile-nav-drawer"
+        className={clsx(
+          'absolute inset-y-0 left-0 flex w-72 max-w-full flex-col border-r border-[var(--color-border)] bg-[var(--color-bg-primary)] shadow-xl transition-transform',
+          open ? 'translate-x-0' : '-translate-x-full'
+        )}
+        aria-label="모바일 네비게이션"
+      >
+        <div className="flex items-center justify-between border-b border-[var(--color-border)] px-4 py-4">
+          <div>
+            <p className="text-xs font-semibold uppercase tracking-wide text-[var(--color-grey-400)]">
+              탐색
+            </p>
+            <p className="mt-1 text-sm text-[var(--color-grey-500)]">
+              블로그 섹션과 외부 링크
+            </p>
+          </div>
+          <button
+            type="button"
+            aria-label="메뉴 닫기"
+            onClick={() => onOpenChange?.(false)}
+            className="flex h-10 w-10 items-center justify-center rounded-full border border-[var(--color-grey-200)] bg-[var(--color-grey-50)] text-[var(--color-grey-500)] transition-colors hover:border-[var(--color-grey-300)] hover:text-[var(--color-grey-900)]"
+          >
+            <svg
+              width="18"
+              height="18"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.9"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              aria-hidden="true"
+            >
+              <line x1="4" y1="7" x2="20" y2="7" />
+              <line x1="4" y1="12" x2="20" y2="12" />
+              <line x1="4" y1="17" x2="20" y2="17" />
+            </svg>
+          </button>
+        </div>
+
+        <nav className="flex-1 overflow-y-auto px-3 py-4">
+          <div className="space-y-2">
           {navItems.map((item) => {
             const isActive = isActiveItem(item, pathname);
-            const itemClassName = clsx(
-              'flex min-h-14 items-center justify-center rounded-[var(--radius-md)] border px-2 py-2 transition-all group-active:scale-[0.99] group-active:translate-y-[1px]',
-              isActive
-                ? 'border-[var(--mobile-nav-active-border)] bg-[var(--mobile-nav-active-bg)]'
-                : 'border-transparent hover:bg-[var(--mobile-nav-hover-bg)] group-active:bg-[var(--mobile-nav-hover-bg)]'
-            );
-
-            const content = (
-              <div className={itemClassName}>
-                <div className="flex flex-col items-center gap-0.5">
-                  <span
-                    className={clsx(
-                      'flex h-5 w-5 items-center justify-center',
-                      isActive
-                        ? 'text-[var(--mobile-nav-active-text)]'
-                        : 'text-[var(--mobile-nav-text)]'
-                    )}
-                    aria-hidden="true"
-                  >
-                    <NavIcon id={item.id} />
-                  </span>
-                  <span
-                    className={clsx(
-                      'text-[10px] font-semibold leading-none',
-                      isActive
-                        ? 'text-[var(--mobile-nav-active-text)]'
-                        : 'text-[var(--mobile-nav-text)]'
-                    )}
-                  >
-                    {item.label}
-                  </span>
-                </div>
-              </div>
-            );
 
             return (
               <Link
                 key={item.id}
                 href={item.href}
-                onClick={() =>
+                onClick={() => {
+                  onOpenChange?.(false);
                   trackEvent(AnalyticsEvents.click, {
-                    target: 'mobile_bottom_nav',
+                    target: 'mobile_nav_drawer',
                     destination: item.href,
-                  })
-                }
-                className="group w-full rounded-[var(--radius-md)] touch-manipulation transition-transform duration-100 active:scale-[0.97] active:translate-y-[1px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--mobile-nav-focus-ring)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--mobile-nav-focus-offset)]"
+                  });
+                }}
+                className={clsx(
+                  'flex items-center gap-3 rounded-2xl border px-3 py-3 transition-colors',
+                  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--mobile-nav-focus-ring)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--mobile-nav-focus-offset)]',
+                  isActive
+                    ? 'border-[var(--mobile-nav-active-border)] bg-[var(--mobile-nav-active-bg)]'
+                    : 'border-transparent hover:bg-[var(--mobile-nav-hover-bg)]'
+                )}
                 aria-current={isActive ? 'page' : undefined}
               >
-                {content}
+                <span
+                  className={clsx(
+                    'flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border',
+                    isActive
+                      ? 'border-[var(--color-toss-blue)] bg-[var(--color-toss-blue)] text-white'
+                      : 'border-[var(--color-border)] bg-[var(--color-grey-50)] text-[var(--mobile-nav-text)]'
+                  )}
+                  aria-hidden="true"
+                >
+                  <NavIcon id={item.id} />
+                </span>
+                <span className="min-w-0">
+                  <span
+                    className={clsx(
+                      'block text-sm font-semibold',
+                      isActive
+                        ? 'text-[var(--mobile-nav-active-text)]'
+                        : 'text-[var(--color-text-primary)]'
+                    )}
+                  >
+                    {item.label}
+                  </span>
+                  <span className="mt-0.5 block text-xs text-[var(--color-grey-500)]">
+                    {getDescription(item.id)}
+                  </span>
+                </span>
               </Link>
             );
           })}
+          </div>
+        </nav>
+
+        <div className="border-t border-[var(--color-border)] px-3 py-3">
+          <div className="space-y-1.5">
+            <ExternalLink
+              href="https://github.com/dev-wooyeon"
+              label="GitHub"
+              onNavigate={() => onOpenChange?.(false)}
+            />
+            <ExternalLink
+              href="mailto:parkwooyeon.dev@gmail.com"
+              label="Email"
+              onNavigate={() => onOpenChange?.(false)}
+            />
+            <ExternalLink
+              href="/feed.xml"
+              label="RSS"
+              onNavigate={() => onOpenChange?.(false)}
+            />
+          </div>
         </div>
-      </div>
-    </motion.nav>
+      </aside>
+    </div>
+  );
+}
+
+function getDescription(id: MobileNavItem['id']) {
+  switch (id) {
+    case 'home':
+      return '전체 피드와 최근 글';
+    case 'engineering':
+      return '기술 글과 시리즈';
+    case 'life':
+      return '에세이와 회고';
+    case 'resume':
+      return '경력과 프로젝트';
+    default:
+      return '';
+  }
+}
+
+function ExternalLink({
+  href,
+  label,
+  onNavigate,
+}: {
+  href: string;
+  label: string;
+  onNavigate: () => void;
+}) {
+  return (
+    <a
+      href={href}
+      onClick={onNavigate}
+      className="flex items-center justify-between rounded-xl px-3 py-2.5 text-sm text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-grey-50)] hover:text-[var(--color-text-primary)]"
+    >
+      <span>{label}</span>
+      <span className="text-xs text-[var(--color-grey-400)]">열기</span>
+    </a>
   );
 }
 
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 4ff9f44e..7adc8e71 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -9,8 +9,8 @@
 @import 'tailwindcss';
 
 :root {
-  --mobile-bottom-nav-height: 84px;
-  --mobile-bottom-nav-offset: var(--mobile-bottom-nav-height);
+  --mobile-bottom-nav-height: 0px;
+  --mobile-bottom-nav-offset: 0px;
 }
 
 /* ===== Local Fonts ===== */
@@ -248,12 +248,6 @@
   }
 }
 
-@media (max-width: 767px) {
-  body {
-    padding-bottom: calc(var(--mobile-bottom-nav-offset) + env(safe-area-inset-bottom));
-  }
-}
-
 /* ===== Focus Styles (Accessibility) ===== */
 :focus-visible {
   outline: 2px solid var(--color-toss-blue);