11단계 — 읽던 콘텐츠 이어보기 UX

앞선 단계에서 타입 안전한 화면을 만들었습니다. 이제 사용자가 페이지를 닫았다가 돌아오는 시간의 흐름까지 설계합니다. 완성할 기능은 글 상세 방문을 기록하고 목록에서 “읽던 노트 이어보기”를 제공하는 작은 연속성 레이어입니다.

1. 완료 기준을 사용자 문장으로 쓰기

“어제 읽던 글을 제목을 다시 입력하지 않고 한 번 눌러 연다.” 이 문장이 구현 범위를 정합니다. 계정 동기화, 추천 알고리즘, 무제한 기록은 필요 없습니다.

2. 외부 데이터처럼 검증하기

localStorage는 내 코드가 전에 썼더라도 외부 데이터입니다. JSON.parse() 결과를 unknown으로 보고, 배열과 각 필드의 타입을 확인한 뒤 사용합니다. 잘못된 값은 빈 기록으로 복구합니다.

3. React와 브라우저 저장소 연결하기

렌더 중 저장하지 않습니다. 상세 페이지 마운트는 외부 시스템 동기화이므로 effect에서 기록합니다. 목록은 useSyncExternalStore로 저장소를 구독하면 같은 탭과 다른 탭 변경을 한 계약으로 받을 수 있습니다. 서버 스냅샷은 항상 같은 빈 배열 참조를 돌려 hydration을 안정시킵니다.

4. 카드의 정보 우선순위

모바일 카드 한 장에는 네 가지만 둡니다.

• 어떤 글인지: 제목
• 어디에 속하는지: 카테고리
• 언제 읽었는지: 날짜
• 무엇을 할지: 계속 읽기

첫 카드는 강조 테두리를 쓰고, 다음 카드 일부를 노출해 가로 탐색을 암시합니다. 640px 이상에서는 그리드로 전환합니다.

5. 직접 검증하기

상세 → 목록 → 최근 카드 → 상세 순서를 Playwright로 자동화하세요. 저장 키만 직접 검사하는 테스트보다 화면 제목과 최종 URL을 검증하는 테스트가 사용자 결과를 더 강하게 증명합니다. 저장소가 깨진 JSON이거나 접근 거부를 던질 때도 페이지가 열리는지 별도 확인합니다.

마무리

프론트엔드는 한 화면을 그리는 기술로 끝나지 않습니다. 사용자가 떠났다가 돌아오는 순간을 잇는 것도 화면 설계입니다. 다음에는 콘텐츠 연속성 UX 노트에서 저장 최소화와 모바일 패턴을 다시 확인하세요.