refactor(blog): 반응형 읽기 레이아웃 정렬

Author: 박은우

app/layout.tsx

@@ -1,6 +1,9 @@
 import type { Metadata, Viewport } from 'next';
 import type { ReactNode } from 'react';
 import '@/styles/globals.css';
+import '@/styles/viewport/content.css';
+import '@/styles/viewport/mobile.css';
+import '@/styles/viewport/tablet.css';
 import '@/styles/tossface.css';
 
 import AppProviders from '@/site/providers/AppProviders';

blog/ui/mdx/components.tsx

@@ -52,27 +52,27 @@ export function getMDXComponents(components: MDXComponents): MDXComponents {
   return {
     h1: createHeading(
       'h1',
-      'mt-16 mb-8 text-3xl font-bold text-[var(--color-text-primary)]'
+      'mt-16 mb-8 font-semibold text-[var(--color-text-primary)]'
     ),
     h2: createHeading(
       'h2',
-      'mt-12 mb-6 text-2xl font-bold text-[var(--color-text-primary)]'
+      'mt-12 mb-6 font-semibold text-[var(--color-text-primary)]'
     ),
     h3: createHeading(
       'h3',
-      'mt-8 mb-4 text-xl font-bold text-[var(--color-text-primary)]'
+      'mt-8 mb-4 font-semibold text-[var(--color-text-primary)]'
     ),
     h4: createHeading(
       'h4',
-      'mt-8 mb-4 text-lg font-bold text-[var(--color-text-primary)]'
+      'mt-8 mb-4 font-semibold text-[var(--color-text-primary)]'
     ),
     h5: createHeading(
       'h5',
-      'mt-8 mb-4 text-base font-bold text-[var(--color-text-primary)]'
+      'mt-8 mb-4 font-semibold text-[var(--color-text-primary)]'
     ),
     h6: createHeading(
       'h6',
-      'mt-8 mb-4 text-base font-bold text-[var(--color-text-primary)]'
+      'mt-8 mb-4 font-semibold text-[var(--color-text-primary)]'
     ),
     p: (props) => <p {...props}>{props.children}</p>,
     img: (props) => {

blog/ui/pages/BlogPostPage.tsx

@@ -15,7 +15,6 @@ import {
   TableOfContents,
   GiscusComments,
   SeriesNavigation,
-  ViewCounter,
 } from '@/blog/ui/components';
 import PostViewTracker from '@/infra/analytics/components/PostViewTracker';
 import DwellTimeTracker from '@/infra/analytics/components/DwellTimeTracker';
@@ -154,39 +153,23 @@ export default async function BlogPostPage({
       <DwellTimeTracker slug={post.slug} />
       <ScrollDepthTracker slug={post.slug} />
 
-      <article className="py-10">
+      <article className="ark-article">
         <Container size="md">
           {/* Header */}
-          <header className="mb-10">
-            <span className="mb-4 inline-block rounded-[var(--radius-selection)] bg-[var(--color-bg-secondary)] px-3 py-1 text-sm font-medium text-[var(--color-text-secondary)]">
+          <header className="ark-article-header">
+            <span className="mb-4 inline-block rounded-[var(--radius-selection)] bg-[var(--color-bg-secondary)] px-3 py-1 text-xs font-medium text-[var(--color-text-secondary)]">
               {post.category}
             </span>
-            <h1 className="text-3xl font-bold leading-tight text-[var(--color-text-primary)] md:text-4xl">
-              {post.title}
-            </h1>
-            <div className="mt-6 flex flex-wrap items-center gap-4 text-sm text-[var(--color-text-tertiary)]">
+            <h1 className="ark-article-title">{post.title}</h1>
+            <div className="ark-article-meta">
               <time>{formattedDate}</time>
               {readingTimeLabel && (
                 <>
                   <span className="h-1 w-1 rounded-full bg-[var(--color-divider)]" />
                   <span>{readingTimeLabel}</span>
                 </>
               )}
-              <span className="h-1 w-1 rounded-full bg-[var(--color-divider)]" />
-              <ViewCounter slug={post.slug} />
             </div>
-            {post.tags && (
-              <div className="mt-4 flex flex-wrap items-center gap-2">
-                {post.tags.map((tag) => (
-                  <span
-                    key={tag}
-                    className="rounded-[var(--radius-selection)] bg-[var(--color-bg-secondary)] px-2.5 py-1.5 text-xs font-medium text-[var(--color-text-tertiary)]"
-                  >
-                    #{tag}
-                  </span>
-                ))}
-              </div>
-            )}
           </header>
 
           {/* Series Navigation */}

docs/adr/0050-use-compact-mobile-navigation-and-article-entry-scale.md

@@ -0,0 +1,64 @@
+# 0050. 모바일 컴팩트 탐색과 글 상세 진입 스케일을 사용한다
+
+Date: 2026-07-23
+Status: Accepted
+
+## 배경
+
+현재 shell은 모바일에서도 `1fr 4fr` grid를 사용해 로고와 탐색을 왼쪽
+열에 고정한다. 작은 화면에서 이 열이 본문 폭을 지속적으로 차지해 글을
+읽을 수 있는 공간이 줄어든다.
+
+또한 홈의 14px 소개 문장과 글 상세의 제목·17px 본문 사이의 대비가 커서,
+사용자가 글에 진입할 때 본문이 갑자기 커진 것처럼 느낄 수 있다.
+
+## 결정
+
+- 데스크톱의 `2fr 6fr 4fr` shell과 sticky identity rail은 유지한다.
+- 모바일은 단일 콘텐츠 열로 전환하고, `identity → 주요 탐색 → content`
+  순서의 상단 영역을 사용한다.
+- 모바일 identity 영역은 로고와 GitHub, Email, RSS를 가로로 배치한다.
+  주요 탐색도 별도의 가로 행으로 항상 노출한다.
+- 홈 소개 문장에는 16px `--text-entry` 토큰을 사용해 기존 14px보다 본문에
+  가까운 진입 크기를 제공한다. JetBrains Mono와 24px line-height는
+  유지한다.
+- 글 상세 제목은 모바일 32px, 데스크톱 40px으로 두고, 본문 내부 제목은
+  28px, 24px, 20px 순서로 글 제목과 중복되지 않게 한다. 메타데이터와
+  본문 사이의 간격은 의미 토큰으로 관리하고, 본문은 17px과 1.72
+  line-height를 유지한다.
+- 글 상세의 시리즈 탐색, 댓글, 목차, 읽기 진행도와 MDX pipeline은
+  변경하지 않는다.
+
+## 결과
+
+- 모바일 글 본문이 좌측 레일에 의해 축소되지 않는다.
+- 로고와 주요 이동 경로는 글을 읽기 전 상단에서 계속 발견할 수 있다.
+- 콘텐츠 읽기 baseline은 유지하면서 글 진입 시 제목과 본문의 시각적
+  점프가 줄어든다.
+
+## 검토한 대안
+
+- 모바일 좌측 레일을 유지하고 폭만 줄인다: 본문 폭 문제를 근본적으로
+  해결하지 못하므로 채택하지 않는다.
+- 모바일에서 탐색을 접기 UI로 숨긴다: 본문 폭은 확보되지만 핵심 경로의
+  발견 가능성이 낮아지므로 채택하지 않는다.
+- 본문을 16px로 줄인다: 진입 대비는 낮아지지만 현재의 긴 글 가독성
+  기준을 훼손하므로 채택하지 않는다.
+
+## 검증
+
+- AppShell 및 스타일 테스트로 링크 구조, 단일 열 규칙, 읽기 토큰을
+  검증한다.
+- Playwright mobile 프로젝트에서 상단 탐색, article 본문 폭, 표 가로
+  스크롤을 검증한다.
+- Playwright desktop 프로젝트에서 기존 2-6-4 좌표와 17px 본문 기준을
+  검증한다.
+
+## Related History
+
+- [ADR 0037](0037-adopt-zero-log-grid-site-shell.md): 2-6-4 shell과
+  기존 모바일 1-4 grid
+- [ADR 0038](0038-use-jetbrains-mono-for-home-statement.md): 홈 소개
+  문장의 JetBrains Mono 사용
+- [ADR 0040](0040-keep-external-links-in-sticky-identity-rail.md):
+  identity rail 외부 링크 배치

docs/adr/README.md

@@ -67,6 +67,7 @@ ADR은 AI 협업 가이드와 별개의 문서다. 사람이 결정했든 AI가
 | [0047](0047-isolate-publication-policy.md)                                           | Accepted   | 공개 정책을 blog 도메인 모듈로 분리한다                      |
 | [0048](0048-centralize-blog-publication-rules.md)                                    | Accepted   | 블로그 발행 규칙을 단일 policy 모듈로 확장한다               |
 | [0049](0049-share-publication-policy-data-with-audit.md)                             | Accepted   | 발행 정책 데이터를 content audit과 공유한다                  |
+| [0050](0050-use-compact-mobile-navigation-and-article-entry-scale.md)                | Accepted   | 모바일 컴팩트 탐색과 글 상세 진입 스케일을 사용한다          |
 
 ## 작성 조건
 

site/shell/AppShell/AppShell.test.tsx

@@ -17,14 +17,12 @@ describe('AppShell', () => {
 
     const primaryNavigation = within(screen.getByLabelText('Ark 주요 탐색'));
 
-    expect(primaryNavigation.getByRole('link', { name: 'Archive' })).toHaveAttribute(
-      'href',
-      '/archive'
-    );
-    expect(primaryNavigation.getByRole('link', { name: 'Resume' })).toHaveAttribute(
-      'href',
-      '/resume'
-    );
+    expect(
+      primaryNavigation.getByRole('link', { name: 'Archive' })
+    ).toHaveAttribute('href', '/archive');
+    expect(
+      primaryNavigation.getByRole('link', { name: 'Resume' })
+    ).toHaveAttribute('href', '/resume');
     expect(
       primaryNavigation.queryByRole('link', { name: 'Tech' })
     ).not.toBeInTheDocument();
@@ -33,6 +31,9 @@ describe('AppShell', () => {
       screen.getByLabelText('Ark 외부 링크')
     );
     expect(container.querySelector('footer')).toBeNull();
+    expect(
+      container.querySelector('[data-page-layout="home"]')
+    ).toBeInTheDocument();
   });
 
   it('treats existing post routes as part of Archive', () => {
@@ -43,8 +44,9 @@ describe('AppShell', () => {
       </AppShell>
     );
 
-    expect(
-      screen.getByRole('link', { name: 'Archive' })
-    ).toHaveAttribute('aria-current', 'page');
+    expect(screen.getByRole('link', { name: 'Archive' })).toHaveAttribute(
+      'aria-current',
+      'page'
+    );
   });
 });

site/shell/AppShell/AppShell.tsx

@@ -72,6 +72,7 @@ export default function AppShell({ children }: AppShellProps) {
       <div
         data-page-scroll-container
         data-page-scroll-mode="document"
+        data-page-layout={pathname === '/' ? 'home' : 'content'}
         className="ark-site-grid"
       >
         <aside className="ark-site-identity">
@@ -106,7 +107,6 @@ export default function AppShell({ children }: AppShellProps) {
           })}
         </nav>
       </div>
-
     </div>
   );
 }