방문기록의 시각적 구분 by localStorage

예전에는 시각적으로 표현되었던 ‘방문했던 페이지'가 이제는 우리의 뇌에 의존하여 골라내야한다.

인터넷에서의 전통적으로 페이지 이동의 역할을 해주는 태그는 a 라는 앵커태그가 있다. 그리고 이 앵커태그는 아무런 스타일링을 하지 않으면 파란색으로 보여지고, 한 번 방문했던 기록이 있으면 보라색으로 표시를 해준다. 시각적으로는 엄청 올드해보이지만 어차피 내꺼도 아닌 사이트에서 대충 이용하기에는 엄청나게 편리하다. 내가 무엇을 봤고 안 봤는지 머리를 잠깐 빌리지 않아도 그냥 보면 알 수 있다.

기본값 디자인 같은 크레이그리스트 https://sfbay.craigslist.org/search/roo

색깔을 조금 바꾸어주는 것도 쉽다. 단지 css 에서 a:linka:visited 라는 가상의 셀렉터에 color 속성만 바꾸어주면 된다.

그런데 왜 이런 기똥찬 기능을 최근의 웹디자이너들은 활용하지 않게 되었는가?(여기 미디엄 사이트도 안 되어 있다. 의외로 네이버는 되어 있다)조사 같은걸 하지 않았으니 자세히는 모르겠고 그냥 내 생각으로는 이렇다.

  • 한 요소를 두 가지 색상으로 구현하는게 까다롭고 귀찮다. 게다가 사용자마다 방문 여부에 따라 달라지므로 어떻게 보여질지 예측하기도 쉽지 않다.
  • 사실 이게 정확하지가 않다. 즉, 페이징이 있는 리스트의 경우에는 같은 페이지로 이동을 하더라도 페이징이나 검색어에 관한 정보들을 같이 GET 파라미터로 넘겨주는 경우가 있는데, 이 정보가 미세하게 달라도 같은 페이지를 방문했어도 방문을 안했다고 나오는 경우가 많다(예를들면 domain.com/iddomain.com/id?page=1은 다르게 취급된다). 만약 이 색을 정상적으로 표시할 수 있도록 URI 스키마를 짜려고하는 경우 이러한 부수정보를 전달하기 위하여 추가 작업들을 많이 해주어야 한다.
  • SPA가 유행하면서 전통적으로 a 태그를 이용한 Full Page Redirecting의 경우가 현저하게 줄었다. 버튼들이 페이지 이동의 링크라기보다 특정 이벤트를 발생시키는 UI 요소로써 기능하게 되었다(실제로 a[href] 를 안 쓰는 경우도 많다).
  • 놀랍게도 아무도 신경쓰지 않는다. 즉, 의뢰한 클라이언트도, 이용하는 이용자들도.. 왜 색상이구분되지 않느냐고 따지는 사람이 없는데, 굳이 이것저것 고려해서 보강할 이유가 없는 것처럼 느껴진다.

든 요즘 웹에서는 방문했던 페이지의 표식이 변경되는 경우는 찾기가 힘들어졌다고 봐도 무방할 것이다. 오히려 어디에선가 방문했던 페이지의 색이 무언가 좀 달라지면 더 어색할 수도 있을 법도 하다.

하지만 조금이라도 사용자 편의성을 고려하여야한다면, 우리는 요소가 a 가 아니더라도, 파라미터로 인해서 같은 페이지의 주소가 여러개일지라도, SPA 라서 고유주소가 없다 하더라도 어떻게든 이 표식을 넣어보려고 시도해볼 수 있다.

구현을 위해서 생각해낸 방법은 간단하다. localStorage 라고 요즘 웬만한 브라우저에서는 다 지원하는 HTML5의 스펙이 있는데, 이것을 이용해 저장하면 딱 현재의 브라우저에서만 작동되고 철저하게 클라이언트에서 작동되는 것이므로 방문기록을 기억하기에는 아주 적합한 스펙이라 할 수 있다.

사용자의 페이지 이동 액션이 일어나는 순간에 해당 페이지의 고유번호(이를테면 bbs_id 등)를 localStorage 에 기록하고, 해당 페이지의 버튼을 출력하는 페이지에서는 이 localStorage 의 값을 읽어와서 방문 여부를 체크해서 표식이 다른 클래스를 부여해주는 것이다.

당연히 이렇게 방문기록을 하여야할 페이지(UI뷰)가 여러개일 것이므로 우리는 일종의 스택으로 관리를 하여야한다. 당연히 가장 최근에 방문했던 기록들이 더 중요할 것이므로, 최대 100개 정도를 기억하도록하고 오래전에 기록되었던 고유번호는 밀려나도록 하는 First In First Out(발음이 귀여운 피포)의 자료구조형으로 하면 될 것이다.

아래는 간단한 스크립트의 예시이다. 값이 없는 경우 등의 예외처리가 빠져있어서 바로쓸 수는 없지만 간단하게 동작을 이해할 수 있다.

위 스크립트를 조금 변형하여 실제로 SPA로 이루어진 서비스에 적용을 해보았다. 색깔로 구분되어 있기에 방문했던 페이지를 실수(?)로 또 클릭해서 힘빠질 일은 없다.

SPA로 만들어진 리스트이지만 클릭했던 게시물이 약간 비활성화처리된 것처럼 보여진다.

바로 가져다가 사용할 수 있는 스크립트는 아래 codepen 예시를 참고하면 된다. 이러한 구분이 없다고 불편하지는 않겠지만, 있으면 페이지 네비게이션이 훨씬 편리해질 것이다.

약간의 기술을 이용하여, 편리한 서비스와 기능을 만드는데 관심이 많음

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store