글 탐색에는 다이얼 같은 인터랙션이 좋겠다. 모바일에서 특히 유용하겠지. 엄지로 상하로 스크롤하며 이전글 다음글로 이동할 수 있고, 다이얼 목차에서 페이지 면을 상하스크롤로 한번에 여러 글을 이동할 수 있게.
책 여러 페이지를 엄지로 쓸어내리며 탐색하는 경험에서 착안했다. 이 블로그는 실물 다이어리가 핵심 메타포니까 일관성을 유지하면서 여러 페이지 탐색을 달성할 수 있다.
다이얼 목차에 대해 상상해보자. 글 하나하나가 눈금이 될 것이다. 눈금을 지나갈때마다 작은 진동을 준다. 눈금 하나에 도달했다고, 페이지를 바로 이동하지는 않는다. 디바운스 처리를 하고, 페이지에는 책이 넘어가는 듯한 애니메이션을 실행한다. opacity와 transform 조절만으로 충분할 것 같고 진짜 책을 모방할 이유는 없다. 본질만 남기고, 애니메이션은 완전히 웹에 적합한 형태로 변환한다.
다이얼 목차는 숨기고 있다가 상단바에서 토글 버튼으로 열 수 있고, 열리면 아래로 1열의 다이얼 목차 세로줄이 생긴다.
헤더의 오른쪽 끝에 둔다. 헤더 상단 패딩이 넉넉하여 모바일에서 엄지로 쉽게 터치할 수 있을 것이다.
지금 헤더의 오른쪽 끝에는 다크모드 토글 버튼이 있는데, 이는 없애고 시스템 설정을 따라가게 한다. 물론 전환 애니메이션, 다크모드, 라이트모드일때 다른 컬러 팔레트를 보여주고 싶은 마음도 있지만 선택과 집중을 하기로 한다. 오히려 시스템 설정을 바꿔가며 봐야 알 수 있는 차이가 되어 가치가 생기기도 한다.
