솔직히 블로그를 처음 시작하고 꽤 오랫동안 페이지네이션을 그냥 방치해뒀습니다. 회색 숫자가 줄지어 있는 티스토리 기본 디자인, 딱히 문제가 있다고 생각하지 않았습니다. 페이지네이션은 그냥 있으면 되는 거지, 뭘 더 신경 쓰나 싶었습니다. 그런데 방문자 데이터를 들여다보다가 뭔가 이상하다는 걸 알아챘습니다. 2페이지로 넘어가는 비율이 생각보다 훨씬 낮았고, 그 원인이 페이지네이션에 있다는 걸 그때 처음 의심하기 시작했습니다.
기본 디자인이 독자를 막고 있었다
방문자가 1페이지에서 이탈하는 비율을 보면서 처음에는 콘텐츠 문제인 줄만 알았습니다. 글이 재미없는 건가, 정보가 부족한 건가. 그런데 제가 직접 다른 기기로 블로그를 열어보니 문제가 바로 보였습니다. 현재 내가 몇 페이지에 있는지 전혀 알 수가 없었습니다. 숫자들은 비슷한 회색으로 나란히 있고, active 클래스가 적용된 현재 페이지도 겨우 밑줄 하나 차이였습니다. 내가 독자라도 다음 페이지로 넘어갈 마음이 생기지 않겠다 싶었습니다.
여기서 active 클래스란 현재 사용자가 위치한 페이지 번호에 자동으로 붙는 CSS 선택자입니다. 이 클래스에 배경색이나 글자색 변화를 주지 않으면, 방문자는 자신이 어느 위치에 있는지 파악하기 어렵습니다. UX(사용자 경험) 관점에서 이건 꽤 치명적인 허점입니다.
UX란 사용자가 어떤 서비스나 인터페이스를 사용할 때 느끼는 전반적인 경험을 뜻합니다. 버튼 하나, 숫자 색깔 하나가 실제 행동에 영향을 준다는 게 처음에는 와닿지 않았는데, 직접 데이터로 확인하고 나서는 생각이 완전히 바뀌었습니다. 디자인이 독자 행동에 이렇게 직접적인 영향을 미친다는 걸 그때 처음 실감했습니다. 콘텐츠를 아무리 잘 써도 독자가 탐색 자체를 포기하면 소용이 없다는 게, 데이터로 보면 꽤 명확하게 보입니다.
active 클래스와 SEO 속성, 놓치기 쉬운 두 가지
F12 개발자 도구로 티스토리 페이지네이션 구조를 열어보면 .paging 또는 .paginate 클래스가 보입니다. 저는 이걸 확인하고 나서 라운드 버튼 스타일로 전면 수정했습니다. border-radius 속성을 50%로 설정하고 40px 정사각형으로 만들면 깔끔한 원형 버튼이 완성됩니다. 여기서 border-radius란 CSS에서 요소의 모서리를 둥글게 처리하는 속성으로, 값이 50%가 되면 완전한 원형으로 표시됩니다. 코드 몇 줄로 분위기가 완전히 달라지는 걸 보면서, 왜 이걸 진작 안 건드렸나 싶었습니다.
active 클래스에 배경색을 확실히 부여하고 나니, 지금 내가 몇 페이지에 있다는 게 한눈에 들어왔습니다. 이 변경 이후로 2페이지 이동 비율이 눈에 띄게 올랐습니다. 제 경험상 이 부분이 가장 직접적인 효과를 냈습니다. 콘텐츠를 건드리지 않고 페이지네이션 스타일 하나만 바꿨는데 데이터가 달라지는 걸 보면, UI가 행동에 미치는 영향을 다시 한번 실감하게 됩니다.
그런데 CSS 예제만 다루는 글들이 거의 빠뜨리는 게 하나 있습니다. 바로 rel="next"와 rel="prev" 속성입니다. 이 속성은 HTML의 link 태그나 anchor 태그에 붙여서 페이지 간의 연속 관계를 구글 크롤러에게 알려주는 역할을 합니다. 크롤러란 검색 엔진이 웹사이트를 자동으로 방문하며 콘텐츠를 수집하는 프로그램인데, 이 관계 정보가 없으면 페이지가 독립적인 문서처럼 처리될 수 있습니다. 구글의 공식 문서에 따르면 이 속성을 통해 검색 엔진이 전체 콘텐츠를 더 효율적으로 파악할 수 있다고 명시하고 있습니다(출처: Google Search Central).
티스토리처럼 플랫폼 기반 블로그는 스킨 수준에서 이 속성이 이미 처리되어 있는 경우도 있지만, 직접 확인하지 않으면 알 수 없습니다. F12로 확인해보는 걸 권합니다. 있으면 다행이고, 없으면 직접 추가해야 합니다. 이걸 확인하지 않고 SEO가 안 된다고 콘텐츠만 보강하는 건, 수도꼭지가 잠겨 있는데 물이 왜 안 나오냐고 하는 것과 비슷합니다.
또 하나, aria-label 속성도 그냥 지나치기 쉽습니다. aria-label이란 스크린 리더 사용자를 위해 HTML 요소에 텍스트 설명을 붙이는 접근성 속성입니다. 스크린 리더는 시각 장애인이 화면 내용을 음성으로 듣기 위해 사용하는 보조 기술인데, 네비게이션 영역에 aria-label="페이지 내비게이션"처럼 명시해두면 이 도구가 올바르게 읽어줍니다. 접근성 기준을 충족하는 건 구글 애드센스 심사에서도 긍정적으로 작용합니다(출처: MDN Web Docs). 처음엔 접근성이 나와 상관없는 얘기처럼 느껴졌는데, 애드센스 심사 기준을 들여다보고 나서는 생각이 달라졌습니다.
모바일 반응형 처리, 반쪽짜리로 두지 않으려면
PC에서 잘 보이던 페이지네이션이 모바일에서는 완전히 무너진 경험, 저는 직접 겪었습니다. 페이지 번호가 5~6개만 돼도 한 줄에 들어가지 못해 줄 바꿈이 생기고, 레이아웃이 어그러졌습니다. 처음에는 글씨 크기 문제인 줄 알았는데, 근본 원인은 번호 수가 너무 많다는 것이었습니다. 문제를 잘못 진단하면 해결도 엉뚱한 방향으로 흘러갑니다. 저도 한참 글씨 크기만 건드리다 시간을 날렸습니다.
해결책은 미디어 쿼리였습니다. 미디어 쿼리란 CSS에서 화면 크기나 기기 유형에 따라 다른 스타일을 적용할 수 있게 해주는 조건문입니다. 480px 이하 화면에서는 현재 페이지(active)와 이전/다음 버튼(prev, next)을 제외한 나머지 번호를 숨기는 방식으로 처리했습니다. 결과는 예상보다 훨씬 깔끔했고, 모바일에서 버튼을 누르기도 훨씬 편해졌습니다. 굳이 모든 페이지 번호를 다 보여줄 필요가 없다는 걸, 모바일에서 직접 보고 나서야 알았습니다.
모바일 방문자 비율이 PC를 넘어선 지는 이미 오래됩니다. 국내 인터넷 이용 통계를 보면 스마트폰을 통한 인터넷 이용률이 꾸준히 증가하고 있습니다(출처: 과학기술정보통신부). PC 기준으로만 만든 페이지네이션은 이미 절반 이상의 방문자 경험을 포기하는 것과 같습니다. 제 경험상 이건 선택이 아닙니다. PC에서 잘 보이는 것과 모바일에서 잘 보이는 것은 아예 다른 문제입니다. 둘 다 챙기지 않으면 둘 중 하나는 무너집니다.
이전/다음 버튼에는 CSS의 ::before나 ::after 가상 요소를 활용하거나, 유니코드 화살표 문자를 직접 넣는 방식이 깔끔합니다. 여기서 가상 요소(::before, ::after)란 실제 HTML 마크업을 건드리지 않고 CSS만으로 요소 앞뒤에 내용을 추가하는 기능입니다. 버튼에 "이전", "다음" 텍스트를 그냥 쓰는 것보다 화살표로 처리하면 공간도 아끼고 시각적으로도 훨씬 자연스럽습니다. 글자보다 기호가 직관적인 경우가 있고, 페이지 이동 버튼이 딱 그 경우입니다.
페이지네이션은 블로그에서 존재감이 거의 없는 요소입니다. 그래서 오히려 방치하기 쉽습니다. 저도 오랫동안 그랬고요. 하지만 방문자 데이터를 보고 나서는 생각이 달라졌습니다. active 클래스 하나 제대로 잡고, 모바일 미디어 쿼리 하나 추가하는 것만으로도 독자가 블로그를 탐색하는 방식이 바뀝니다. 지금 티스토리 스킨에서 F12 한 번 눌러서 .paging 클래스를 확인해보시길 권합니다. 생각보다 빠르게 바꿀 수 있습니다.
참고