dynoblog — 2026년 5월 22일

# Dynoblog에 슬라이드쇼 기능 추가: /shuffle 페이지 개발기

이번 업데이트에서는 **dynoblog에 완전히 새로운 탐색 경험을 제공하는 `/shuffle` 페이지를 구현**했습니다. 기존의 카테고리나 검색 기반 네비게이션을 넘어, 블로그에 담긴 수천 개의 사진과 문장을 랜덤하게 페어링하여 슬라이드쇼 형식으로 보여주는 기능입니다. 사용자는 키보드나 터치로 다음 페어를 넘기면서 마치 '오늘의 디노'라는 주제로 매일 새로운 콜라주를 감상하듯 블로그를 탐색할 수 있습니다. 특히 흥미로운 점은 같은 포스트에서 추출한 사진과 문장을 페어링하여 **의미 있는 조합을 만들어낸다**는 것입니다.

기술적으로 가장 도전적인 부분은 **성능 최적화**였습니다. 초기에 30초 이상 걸리던 사진 처리 로직을 Vercel 함수 타임아웃(10초)에 맞추기 위해, 샘플링을 30개로 제한하고 Ring Buffer 기반의 `useShuffleBuffer` 훅으로 클라이언트 측에서 점진적으로 다음 페어를 준비하는 방식으로 개선했습니다. 또한 `sharp` 라이브러리로 이미지 메타데이터를 캐싱하고, 문장 추출 시 정규표현식 최적화로 처리 시간을 단축했습니다. Hydration mismatch 문제는 서버에서 첫 번째 페어를 결정하고 클라이언트 렌더링으로 복잡한 로직(Math.random 등)을 처리하는 방식으로 깔끔하게 해결했습니다.

함께 관리하는 `/popular` 페이지(조회수 기반 Hidden Gems 추천)와 admin 대시보드(24시간 활동 카드)도 함께 개선했으며, 전체 104개 파일 변경으로 북마크·검색 UI, 시리즈/연재 기능, 메뉴-카테고리 DB 연동(ARCH-014) 등 아키텍처 수준의 리팩토링도 병행했습니다. 이 과정에서 AI와의 협업으로 복잡한 상태 관리 로직과 성능 프로파일링을 신속하게 검토할 수 있었고, 최종적으로 부드러운 UX와 안정적인 성능을 동시에 달성할 수 있었습니다.