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 이동을 검증한다.