이전 글에서의 변경사항

이전 글에선 DOM을 직접 계산해서 페이지 넘김을 구현했기 때문에 일부 예외적인 상황에서 페이지 계산이 잘못되는 문제가 있었다. 이번에 그 문제를 개선한 버전을 만들어 보았다.

개요

(이하 ChatGPT가 추천한 개요)

이 포스팅에서는 HTML 컨텐츠를 페이지 형식으로 배열하고, 스크롤 대신 페이지 넘김 형식으로 브라우징할 수 있는 방법을 구현하는 방법에 대해 다룹니다. 이를 위해 CSS Multi-column layout을 적용하고, 스크롤을 구현하는 데 JavaScript를 사용합니다. 또한, 화면 크기 변경 시 해당 항목의 페이지 위치를 찾아서 보여주는 기능도 구현합니다. 이러한 방법으로 React를 사용하여 다음과 같은 디자인을 구현합니다.

배경

대부분의 웹 사이트는 길쭉한 레이아웃으로 화면을 구성하고, 사용자가 스와이프해서 레이아웃을 둘러볼 것을 가정하는 게 보통이다. 예를 들면 iOS 디바이스에서 위에서 아래로 스와이프하면 화면을 새로고침하는데, 이는 사용자들이 화면을 아래쪽으로 스크롤할 것을 가정하고 만든 디자인이라고 말할 수 있다. 반대로 아래에서 위로 스와이프할 땐 스크롤만 하지 새로고침은 안하잖아?

근데 컨텐츠가 너무 길어서 스와이프를 계속 하다보면 태블릿 화면 한쪽이 손가락으로 문대져서 맨들맨들해지는 것을 볼 수 있다. 그리고 나이를 먹었는지 스크롤하는 화면을 눈으로 따라다니기가 싫어진다. 그냥 다음 페이지로 넘어가서 처음부터 읽는 게 독자 입장에선 맘편하다.

요구사항

전체 컨텐츠를 CSS Multi-column layout 으로 배열하고, 다음 페이지로 넘어가기 부분을 구현한다.

구현

CSS Multi-column layout 적용

CSS가 대충 다 해준다. 가로화면에선 column 두개, 세로화면에선 한개 하는 식도 가능하다.

스크롤 적용

Paginated Tiles with CSS Multi-Column Layout이라는 코드 예제를 참조했다.

CSS marginLeft를 써서 페이지 넘김을 구현하는 것인데, 위 예제에선 column-gap을 0px로 설정했기 때문에 단순히 width만큼씩 옮기면 페이지가 전환되는 효과를 볼 수 있다. 그런데 column-gap을 0px로 설정하면 한 페이지에 여러개의 column을 표시하는 경우에 간격이 없는 볼썽사나운 모습이 된다.

그래서 column-gap을 적당히 설정하면 page를 옮길 때마다 offset이 생기게 된다. 따라서 CSS calc를 이용해서 width와 column-gap만큼씩 offset을 줘서 페이지 넘김을 구현했다. (TODO: 왜 column-gap만큼만 더하면 되는지 계산을 좀 해봐야 함)

디자인

이런 식으로 구현해놓고 나자 React 항목은 다음과 같은 디자인이 되었다.

• props
  • children: 레이아웃에 들어갈 항목들.
• useState
  • cursor: 현재 보여지고 있는 페이지 번호
• useEffect(..., [cursor])
  • 변경된 cursor 값에 따라 페이지 변환을 해야 한다

데모는?

만들면 좋은데… 다른 코드 환경에 맞춰 제작한 코드를 블로그로 옮기는게 쉽지가 않다. 나중에…;;

문제점: 화면 크기 변경 적용

현재 해결 안된 문제로는 페이지 크기 변경 시, 현재 어딜 보고 있는건지 추적을 안한다는 것이다. 이를테면 현재 3페이지를 보고 있다가, 갑자기 화면 사이즈가 절반으로 줄어들면 이전에 보던 내용이 표시되고 있는 페이지를 찾아 보여줄 수 있으면 좋을 것이다. 근데 현재는 그냥 바뀐 화면에서도 아묻따 3페이지를 표시하기 때문에, 원래 보고싶던 내용보다 한참 앞의 부분을 보여주게 된다는 문제가 생긴다.

일단 현재 쓰는 환경에선 페이지 크기가 크게 변경될 여지가 별로 없기 때문에 패스.