refactor(site): 모바일 읽기 흐름 개선

모바일 헤더와 메뉴를 텍스트 중심으로 단순화하고 홈 아카이브에서 날짜와 제목의 읽기 순서를 조정했습니다.\n\nADR 0035에 모바일 아카이브와 메뉴의 반복 규칙을 기록했습니다.

Author: dev-wooyeon

blog/ui/components/PostCard.test.tsx

@@ -84,7 +84,13 @@ describe('PostCard', () => {
     });
 
     expect(link).toHaveAttribute('href', '/blog/test-post');
-    expect(link).toHaveClass('min-h-11');
+    expect(link).toHaveClass(
+      'min-h-11',
+      'flex-col',
+      'sm:flex-row',
+      'items-start',
+      'sm:items-baseline'
+    );
     expect(link).not.toHaveClass('border');
     expect(screen.getByText('2026.02.10')).toHaveAttribute(
       'dateTime',
@@ -94,6 +100,10 @@ describe('PostCard', () => {
     expect(screen.queryByText('테스트 설명')).not.toBeInTheDocument();
     expect(screen.queryByText('#redis')).not.toBeInTheDocument();
     expect(screen.queryByText('약 12분')).not.toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: '테스트 글' })).toHaveClass(
+      'text-lg',
+      'sm:text-base'
+    );
   });
 
   it('uses a static content surface for the list variant', () => {

blog/ui/components/PostCard/PostCard.tsx

@@ -32,7 +32,7 @@ export default function PostCard({ post, variant = 'default' }: PostCardProps) {
       <Link
         href={`/blog/${post.slug}`}
         className={clsx(
-          'group flex min-h-11 items-baseline gap-3 rounded-[var(--radius-action)] py-2',
+          'group flex min-h-11 flex-col items-start gap-1.5 rounded-[var(--radius-action)] py-3 sm:flex-row sm:items-baseline sm:gap-3 sm:py-2',
           'transition-colors duration-[var(--duration-200)] ease-[var(--ease-default)]',
           'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-toss-blue)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-bg-primary)]'
         )}
@@ -43,7 +43,7 @@ export default function PostCard({ post, variant = 'default' }: PostCardProps) {
         >
           {formatArchiveDate(post.date)}
         </time>
-        <h3 className="min-w-0 text-base font-semibold leading-snug tracking-tight text-[var(--color-text-primary)] transition-colors duration-[var(--duration-200)] ease-[var(--ease-default)] group-hover:text-[var(--color-toss-blue)] group-focus-visible:text-[var(--color-toss-blue)]">
+        <h3 className="min-w-0 text-lg font-semibold leading-snug tracking-tight text-[var(--color-text-primary)] transition-colors duration-[var(--duration-200)] ease-[var(--ease-default)] group-hover:text-[var(--color-toss-blue)] group-focus-visible:text-[var(--color-toss-blue)] sm:text-base">
           {post.title}
         </h3>
       </Link>

blog/ui/components/PostList.test.tsx

@@ -66,6 +66,7 @@ describe('PostList', () => {
     render(<PostList posts={samplePosts} layout="archive" />);
 
     expect(screen.getByRole('list')).toBeInTheDocument();
+    expect(screen.getByRole('list')).toHaveClass('space-y-2', 'sm:space-y-1');
     expect(screen.getAllByRole('listitem')).toHaveLength(2);
     expect(
       screen.getByRole('link', { name: /2026\.02\.01 첫 번째 글/ })

blog/ui/components/PostList/PostList.tsx

@@ -49,7 +49,7 @@ function getItemVariants(effectiveMotionMode: EffectiveMotionMode): Variants {
 }
 
 const layoutClassNames = {
-  archive: 'space-y-1',
+  archive: 'space-y-2 sm:space-y-1',
   grid: 'grid gap-6 md:grid-cols-2',
   list: 'space-y-4',
 } satisfies Record<NonNullable<PostListProps['layout']>, string>;

docs/README.md

@@ -1,6 +1,6 @@
 # 문서 인덱스
 
-Last updated: 2026-07-19
+Last updated: 2026-07-20
 
 이 인덱스는 현재 코드베이스와 함께 유지해야 하는 문서만 추적한다. 계속
 업데이트할 문서가 아니라면 삭제하거나, 오래 남겨야 하는 결정만 ADR로 옮긴다.
@@ -33,6 +33,7 @@ Last updated: 2026-07-19
 - `docs/adr/0032-reduce-desktop-rail-to-home-wordmark-and-utilities.md`
 - `docs/adr/0033-use-a-white-canvas-without-content-cards.md`
 - `docs/adr/0034-adopt-the-graphite-ink-palette.md`
+- `docs/adr/0035-prioritize-mobile-archive-reading-order.md`
 - `docs/blog-quality-guide.md`
 - `docs/database/db-schema.md`
 - `docs/database/supabase-view-count.sql`

docs/adr/0035-prioritize-mobile-archive-reading-order.md

@@ -0,0 +1,61 @@
+# 0035. 모바일 아카이브의 읽기 순서를 우선한다
+
+Date: 2026-07-20
+Status: Accepted
+
+## 배경
+
+데스크톱과 태블릿에서는 얇은 레일, 링크형 필터, 날짜와 제목만 있는 아카이브
+행이 하나의 편집 지면으로 읽힌다. 반면 모바일 상단에는 메뉴 버튼만 보이고,
+드로어는 아이콘, 설명, 카드형 링크를 앞세워 사이트의 읽기 의도보다 탐색 UI를
+먼저 인식하게 했다.
+
+모바일 아카이브 행은 날짜와 제목을 같은 줄에 배치했다. 좁은 화면에서 긴 제목은
+날짜와 가로 폭을 경쟁하므로, 제목을 읽는 흐름도 데스크톱보다 약해졌다.
+
+## 결정
+
+- `md` 미만의 상단 헤더에는 홈으로 연결되는 `ark` 워드마크와 명시적인 메뉴
+  조작을 함께 둔다.
+- 모바일 메뉴는 전체 화면의 텍스트 중심 탐색으로 표현한다. 기존 Home, Tech,
+  Life, Resume route와 외부 링크는 유지하고, 아이콘, 설명, 카드형 표면은
+  제거한다.
+- 홈 아카이브 행은 `sm` 미만에서 발행일을 제목 위에 둔다. `sm` 이상에서는
+  기존처럼 날짜와 제목을 한 행에 배치한다.
+- 홈 아카이브에는 계속 발행일과 제목만 표시한다. 카테고리, 요약, 태그, 읽기
+  시간, 카드 표면은 추가하지 않는다.
+- 메뉴의 Escape 닫기, 배경 클릭 닫기, scroll lock, `inert`, analytics event는
+  유지한다.
+
+## 결과
+
+- 모바일 첫 화면에서도 `ark`와 글 아카이브가 먼저 보이며, 메뉴를 열어야만
+  탐색 선택지가 전면에 나타난다.
+- 긴 제목은 날짜와 가로 폭을 나누지 않고 한 줄 또는 여러 줄로 자연스럽게
+  읽힌다.
+- 데스크톱과 태블릿의 레일, 링크형 필터, 수평 아카이브 행은 그대로 유지된다.
+
+## 검토한 대안
+
+- 하단 탭 바를 둔다: 탐색은 빠르지만 모든 읽기 화면에 앱 형태의 고정 chrome을
+  추가한다.
+- 기존 측면 드로어의 여백만 줄인다: 아이콘과 설명, 카드형 위계가 남아
+  콘텐츠보다 메뉴가 먼저 보이는 문제를 해결하지 못한다.
+- 모바일에서도 날짜와 제목을 한 행에 유지한다: 행 수는 줄지만 긴 제목의
+  가독성과 제목 우선 위계를 잃는다.
+
+## 검증
+
+- `PostCard`와 `PostList` 컴포넌트 테스트로 모바일 수직 행과 `sm` 이상 수평
+  행의 class 경계를 검증한다.
+- 모바일 Playwright smoke test로 워드마크, 메뉴 열기와 닫기, route 이동을
+  검증한다.
+
+## Related History
+
+- [ADR 0029](0029-use-link-like-controls-for-home-category-filtering.md): 홈
+  필터의 링크형 상태 컨트롤
+- [ADR 0030](0030-use-date-title-rows-for-home-archive.md): 홈 아카이브의 최소
+  정보 구조
+- [ADR 0032](0032-reduce-desktop-rail-to-home-wordmark-and-utilities.md):
+  데스크톱 레일과 모바일 드로어의 역할 구분

docs/adr/README.md

@@ -1,6 +1,6 @@
 # Architecture Decision Records
 
-Last updated: 2026-07-19
+Last updated: 2026-07-20
 
 이 디렉터리는 커밋 히스토리에서 복원한 아키텍처 의사결정을 기록한다.
 ADR은 AI 협업 가이드와 별개의 문서다. 사람이 결정했든 AI가 초안을
@@ -52,6 +52,7 @@ ADR은 AI 협업 가이드와 별개의 문서다. 사람이 결정했든 AI가
 | [0032](0032-reduce-desktop-rail-to-home-wordmark-and-utilities.md)                   | Accepted   | 데스크톱 레일을 홈 워드마크와 보조 링크로 축소한다           |
 | [0033](0033-use-a-white-canvas-without-content-cards.md)                             | Accepted   | 콘텐츠 카드 없이 흰 캔버스를 사용한다                        |
 | [0034](0034-adopt-the-graphite-ink-palette.md)                                       | Accepted   | Graphite Ink 팔레트를 채택한다                               |
+| [0035](0035-prioritize-mobile-archive-reading-order.md)                              | Accepted   | 모바일 아카이브의 읽기 순서를 우선한다                       |
 
 ## 작성 조건
 

site/home/ui/pages/HomePageClient.tsx

@@ -25,8 +25,8 @@ export default function HomePageClient({ posts }: HomePageClientProps) {
   );
 
   return (
-    <Container size="md" className="py-8 md:pt-4 md:pb-10">
-      <section aria-label="글 아카이브" className="space-y-5">
+    <Container size="md" className="py-6 sm:py-8 md:pt-4 md:pb-10">
+      <section aria-label="글 아카이브" className="space-y-6 sm:space-y-5">
         <CategoryFilter
           categories={FEED_CATEGORIES}
           activeCategory={activeCategory}

site/navigation/MobileBottomNav.test.tsx

@@ -75,11 +75,13 @@ describe('MobileBottomNav', () => {
     );
   });
 
-  it('renders drawer shell when open', () => {
+  it('renders a text-first drawer shell when open', () => {
     render(<MobileBottomNav pathname="/" visible open />);
 
     expect(screen.getByLabelText('모바일 네비게이션')).toBeInTheDocument();
-    expect(screen.getByText('블로그 섹션과 외부 링크')).toBeInTheDocument();
+    expect(screen.getByText('메뉴')).toBeInTheDocument();
+    expect(screen.queryByText('전체 피드와 최근 글')).not.toBeInTheDocument();
+    expect(screen.queryByText('기술 글과 시리즈')).not.toBeInTheDocument();
   });
 
   it('calls close handler when backdrop is clicked', () => {