요약

네이버 웹툰 페이지는 모든 웹툰을 같은 순서로 보여주기 때문에 자주 보는 웹툰을 따로 정리하지 않으면 목록 중간에서 찾기 너무 어렵다. 브라우저 애드온을 만들어서 자주보는 웹툰을 따로 정렬하도록 해 봤다.

목표

마법스크롤 상인 지오를 웹툰 목록 페이지에서 바로 찾을 수 있게 한다.

조건

• 외부 통신 하지마. 방문 기록을 외부 통신으로 알리는 것 싫고 그냥 브라우저 애드온 안에서 해결했으면 좋겠음
  • 브라우저가 바뀌면 방문 기록 날아간다고? 그정도는 괜찮음. 어차피 매일매일 찾는 수고를 덜 목적이니까

세부 디자인

큰그림

• 방문 기록을 저장한다
• 저장한 방문 기록을 이용해서 하루의 웹툰 목록을 정렬한다

스토리지

최대한 단순하게 만들기 위해 브라우저 자체적으로 제공하는 기능 위주로 우선 사용할 생각이었고, 그 때문에 localStorage를 선택하게 되었다. 그 외의 다른 후보로는 Web SQL이라던가, 외부 데이터베이스에 연결하는 방법이 검토되었다.

웹툰 목록 정렬

초기 구현은 단순하게, 각 웹툰 작품마다 어떤 score를 뱉는 mapper 함수를 정의하고, 그 score를 가지고 DOM을 직접 정렬하는 무식한 방법을 사용했다. DOM을 on-the-fly로 정렬하기 때문에 초기 로딩 시점에 한프레임 정도 원래 목록이 나왔다가 재정렬되는 것이 보이긴 하던데, 개인 사용에는 지장없으니 무시하기로 했다.

mapper 함수는 취향 따라 구현이 가능한 영역일 텐데, 일단 인터페이스만 제공해 두고 기본 구현은 역시나 간단하게 최근 30일 내에 한번이라도 방문한 적이 있으면 1, 그렇지 않으면 0을 뱉도록 했다. sort가 stable sort이기 때문에 기존 인기작 우선의 우선순위가 일부 남아있게 된다. 내 취향이 딱히 인기작을 꺼리는 것은 아니라서 인기작이 상단에 배치되는 게 크게 문제되진 않았다.

방문 기록 수집

작품 내 본문 영역에 진입하는 시점에 이 웹툰을 ‘봤다’ 고 취급하도록 localStorage에 기록하도록 했다.