콘텐츠 연속성 UX — 사용자가 읽던 곳으로 돌아오게 만들기

목록이 풍부해질수록 사용자는 원하는 글을 다시 찾기 어려워집니다. 검색과 카테고리는 새 글을 발견하는 길이고, 최근 기록은 이미 읽던 글로 돌아오는 길입니다. 둘은 서로 대체하지 않습니다.

사용자 흐름부터 그리기

목록에서 발견 → 상세에서 읽기 → 브라우저를 닫음 → 목록 재방문 → 최근 글 이어보기

마지막 화살표가 없으면 사용자는 제목과 카테고리를 기억해 검색해야 합니다. 서비스가 이미 알고 있는 방문 경로를 다시 보여 주면 그 기억 비용을 없앨 수 있습니다.

저장할 최소 데이터

서버 계정이 없는 공개 사이트라면 브라우저의 localStorage로 충분합니다. 저장값은 경로·제목·카테고리·방문 시각 네 가지면 됩니다. 본문이나 검색어는 보관하지 않습니다.

type RecentItem = {
  path: string;
  title: string;
  category: string;
  visitedAt: number;
};

같은 글을 다시 열면 새 항목을 추가하지 말고 맨 앞으로 옮깁니다. 최대 3~5개만 남기면 저장량과 선택 부담을 함께 줄일 수 있습니다.

실패해도 본문은 살아 있어야 한다

사생활 보호 모드나 저장 공간 제한 때문에 localStorage 읽기·쓰기가 예외를 던질 수 있습니다. 최근 기록은 향상 기능이므로 try/catch로 건너뛰고 본문 읽기는 계속되어야 합니다. 서버 렌더에서는 빈 목록을 반환해 hydration 차이도 피합니다.

모바일 레이아웃

최근 글은 목록 위에 배치하되 전체 화면을 점유하면 안 됩니다. 모바일에서는 다음 카드가 살짝 보이는 가로 스냅 목록이 “옆으로 더 있음”을 알려 줍니다. 각 카드는 제목 두 줄, 카테고리, 날짜, 명확한 “계속 읽기” 행동만 둡니다. 데스크톱에서는 같은 데이터를 2~3열 그리드로 바꾸면 됩니다.

회귀 테스트

자동 테스트는 실제 사용자 순서를 그대로 따릅니다.

1. 상세 글을 연다.
2. 목록으로 돌아간다.
3. 최근 기록 섹션에 같은 제목이 보이는지 확인한다.
4. 카드를 눌러 원래 상세 경로로 돌아가는지 확인한다.
5. 모바일에서 카드의 터치 높이와 가로 오버플로를 확인한다.

기능 자체보다 중요한 것은 돌아오는 과정이 한 번의 선택으로 끝나는가입니다.