방문기록의 시각적 구분 by localStorage
인터넷에서의 전통적으로 페이지 이동의 역할을 해주는 태그는 a 라는 앵커태그가 있다. 그리고 이 앵커태그는 아무런 스타일링을 하지 않으면 파란색으로 보여지고, 한 번 방문했던 기록이 있으면 보라색으로 표시를 해준다. 시각적으로는 엄청 올드해보이지만 어차피 내꺼도 아닌 사이트에서 대충 이용하기에는 엄청나게 편리하다. 내가 무엇을 봤고 안 봤는지 머리를 잠깐 빌리지 않아도 그냥 보면 알 수 있다.
색깔을 조금 바꾸어주는 것도 쉽다. 단지 css 에서 a:link 와 a:visited 라는 가상의 셀렉터에 color 속성만 바꾸어주면 된다.
그런데 왜 이런 기똥찬 기능을 최근의 웹디자이너들은 활용하지 않게 되었는가?(여기 미디엄 사이트도 안 되어 있다. 의외로 네이버는 되어 있다)조사 같은걸 하지 않았으니 자세히는 모르겠고 그냥 내 생각으로는 이렇다.
- 한 요소를 두 가지 색상으로 구현하는게 까다롭고 귀찮다. 게다가 사용자마다 방문 여부에 따라 달라지므로 어떻게 보여질지 예측하기도 쉽지 않다.
- 사실 이게 정확하지가 않다. 즉, 페이징이 있는 리스트의 경우에는 같은 페이지로 이동을 하더라도 페이징이나 검색어에 관한 정보들을 같이
GET파라미터로 넘겨주는 경우가 있는데, 이 정보가 미세하게 달라도 같은 페이지를 방문했어도 방문을 안했다고 나오는 경우가 많다(예를들면domain.com/id와domain.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로 이루어진 서비스에 적용을 해보았다. 색깔로 구분되어 있기에 방문했던 페이지를 실수(?)로 또 클릭해서 힘빠질 일은 없다.
바로 가져다가 사용할 수 있는 스크립트는 아래 codepen 예시를 참고하면 된다. 이러한 구분이 없다고 불편하지는 않겠지만, 있으면 페이지 네비게이션이 훨씬 편리해질 것이다.
