티스토리 뷰
먼저글에서 설명한 바와 같이, Endless scroll 방식의 Autopagerize는 미리 정해진 사이트에서만 동작한다. 특히 한국의 게시판에서는 대부분 안 되는것 같다. 그래서 다른 방법을 찾다가, Autopager라는 Firefox Addon을 발견했다. Autopager는 높은 자유도 통해서 Autopagerize의 단점을 보완했다. 이 글에서는 Autopager를 설정하는 방법에 대해서 설명할까 한다. 이 글은 좀 복잡하기 때문에 먼저글을 읽어보는게 좋다. 아니면 무작정 따라 하다가 이해가 안되는 개념이 나타나면 읽어봐도 무방하다.
또한 설명은 직접 부딪혀서 얻은 지식으로 추측이 다소 포함되어 있을 수 있으므로 전문가의 도움이 필요하다. 지적이 필요하면 언제든지 자유롭게 댓글을 날려주시길...
자동 설정하기
다시 말하지만 Autopagerize는 제작자가 고쳐주기 전이나, 혹은 능력자가 아닌 이상 건드릴 수 없지만 Autopager는 Site Wizard를 통해서 사용자가 직접 적용할 수 있다. 간단히 방법을 설명하자면,
먼저 원하는 사이트를 켠다. 클리앙에 적용해 보도록 하자. 모두의 공원 페이지를 열고 첫 번째 페이지가 아닌 2번째나 3번째 페이지를 열어놓자. 아마 주소는 http://clien.career.co.kr/cs2/bbs/board.php?bo_table=park&page=2 이렇게 될 것이다. 그리고 Autopager>>Site Wizard를 실행하면 아래와 같이 나온다.
나 같은 경우에는 All in One Sidebar 애드온을 사용해서 사이드바에 Site Wizard가 뜨는 것을 볼 수 있다.
먼저 좌측 상단의 돋보기 모양 아이콘을 눌러서 잘 맞는 설정을 자동 찾기 한다. 이 과정에서 페이지 소스를 분석하고 미리 가지고 있는 데이터를 기반으로 지금 사이트에 적합한 설정이 있는지 검색하게 된다. 잠시후 검색이 끝나면 최적 설정을 보여주고 Link XPath와 Contents XPath가 완성된다.
중간 쯤의 흰색 바탕 영역을 보면 Matched를 보여주면서 가장 확률이 높은 요소를 보여주는데 이에 대한 지식이 있다면 다른 것들을 선택해도 된다.
별다른 문제가 없다면, 이 상태에서 상단의 돋보기 아이콘이 있던 줄의 초록색 체크마크 아이콘을 클릭하면 새로운 창이 뜨면서 Site Wizard로 찾은 설정을 실제로 적용하는 Setting 창이 뜬다. 이때 확인을 누르면 브라우저에서 사이트가 새로고침이 되면서 적용이 되고 잘 되었다면 정상적으로 작동하게 된다. 이 일련의 자동 설정 과정은 동해랑님의 블로그에서 더 자세하게 설명이 되어 있다.
그런데 자동이라는게 그렇듯이 인공지능이 아닌 이상 모든 경우에 동작하는 설정을 찾아내지는 못한다. 클리앙의 경우에도 자동 설정으로 찾으면 페이지가 10개씩 넘어가는 문제가 생긴다. 그래서 수동으로 설정이 필요한데, 지금부터는 수동으로 설정하는 다소 어려운 방법에 대해서 설명할까 한다.
사실 Autopager는 온라인으로 설정을 Publish하고 공유할 수 있어서 한 사람이 만들어 놓은 설정을 다른 사람은 그냥 클릭 몇 번으로 이용할 수 있다. 따라서 "나는 그냥 자동으로만 만족할래", "어려운거 싫어" 하는 사람은 아래에 이어지는 내용을 무시해도 좋다. 하지만 내가 가는 사이트가 마이너한 사이트라 내가 아니면 대신 해 줄 사람이 없어서 꼭 방법을 알아야 겠다는 사람은 아래 글을 더 읽을 필요가 있다.
내 경우가 그랬는데, 클리앙 사진 게시판은 한 페이지에 3~4개 정도의 게시물이 있는데 하루에 올라오는 양이 많아서 페이지 넘김이 다른 게시판에 비해서 특히 많다. Autopagerize도 안되고 위의 자동 설정 방법을 적용해 봐도 10페이지씩 넘어가는 문제가 생겨 직접 해결해 보고자 삽질 끝에 알아낸 방법이다.
Autopager의 원리
내부적으로 어떻게 되는지 알리가 없는 초보지만 추측을 해 보자면, 일단 1)원하는 주소(URL)에서 설정이 존재하면 기능이 동작한다. 2)다음페이지를 나타내는 링크의 위치를 지정해 주면, 스크롤을 해서 마지막 쯤에 이르렀을 때 자동으로 다음페이지 버튼을 가상으로 눌러서 얻은 다음페이지의 소스에서 3)원하는 컨텐츠 영역만 추출하여 현재 페이지의 다음에 붙여준다.
동작하기 위한 기본 요소
앞에서 번호를 붙였듯이, 당연히 1)동작할 주소가 필요하다. 이 값은 URL Pattern으로 Site Wizard나 Setting에 써 주어야 하는 항목이다.
그리고 가상으로 다음페이지를 누르기 위해서는 HTML 소스 내에서 어디에 위치하는지 2)다음페이지를 나타내는 링크의 위치가 필요하다.
위의 그림은 클리앙에서 사용되는 게시판 페이지 버튼 영역이다. 현재 페이지가 '1'이므로 '2'의 링크가 필요하다. 웹페이지의 소스를 열어서 보면 정확하게 <A href="./board.php?bo_table=park&page=2">2</A>이 다음 페이지를 나타내는 링크가 된다. 이런 정보가 Link XPath이다.
마지막으로 3)반복하길 원하는 컨텐츠 영역을 지정해 주어야 한다. 클리앙 모두의 공원 게시판을 예로 들면, 바깥쪽의 메뉴 부분 그리고 상단, 하단은 제외하고 게시판 영역만 이어지는 페이지로 반복시켜야 할 것이다. 따라서 대략 빨간색의 컨텐츠 영역을 지정해 주면 된다. 이 정보는 Contents XPath가 된다.
이와 같이, Autopager가 동작하기 위해서 는 최소 3개의 항목이 필요하다.
그러면 어떻게 지정해 줄 것인가?
우선 URL Pattern은 Site Wizard에서 자동으로 채워지는 값으로 해도 무방하다. 아니면 정규식으로 원하는 URL에서만 동작하도록 설정할 수 있는데, 정규식도 알아야 하고 일단은 그냥 쓰도록 하자.
나머지 2개의 정보(Link XPath와 Contents XPath)를 지정해 주기 위해서는 우선 XPath를 알아야 한다. XPath라는 것은 HTML이나 XML에서 원하는 정보가 있는 위치를 찾는 방법이라고 한다. 이는 C:\Windows\abc 와 같이 우리가 흔히 쓰는 파일 경로에서 원하는 폴더나 파일을 찾아가는 방식과 유사하다. XPath에 대한 Tutorial은 링크1과 링크2에서 찾을 수 있다. 개인적으로는 링크1에서 개념을 잡고 링크2의 Example로 익히면 좋은 것 같다.
그러면 이제 클리앙의 Link XPath를 찾아보자. 클리앙의 게시판은 모두 동일하므로 아무 게시판이나 열어보자. 현재 페이지가 1인 경우 페이지 영역이 아래와 같은 그림일 것이다.
이때 페이지 소스는 열어서 paging 부분을 찾으면 아래 그림과 같다.
그럼 현재 페이지가 5인 경우를 한 번 보자. 각각 다음과 같을 것이다.
클리앙의 경우에는 현재 페이지를 가리키는 항목(노드)의 속성(Attribute)이 'cur_page'로 명시가 되어 있어서 Link XPath를 지정하기 편하다. 말로 풀어 쓰면 <A class=cur_page> 어떤것 </A> 다음에 오는 <A>를 Link XPath를 지정하면 된다.
이를 XPath Syntax에 맞게 표현하면, //div[@class='paging']/a[@class='cur_page']/following-sibling::a[1]이 된다. 해석은 속성이 class=paging인 <DIV> 아래 class=curpage인 <A>를 찾는다. 그리고 난 후 오는 sibling중 첫번째 <A>항목을 선택하라!!
이렇게 지정해 주면 Link XPath가 언제나 다음페이지의 링크 <A>를 가리키게 된다.
Setting Window의 Pick 버튼으로도 Link XPath를 지정해 줄 수 있는데, 사이트 맞다 달라서 언제나 동작하지는 않고 조금 제한적이다. 예를 들어, 지름 커뮤니터 뽐뿌의 경우에는 "-다음페이지"라고 어떤 게시파은 "Next>>"와 같이 다음 페이지로 이동하는 버튼에 패턴 매칭이 가능한 Text가 존재하지만 클리앙의 경우에는 그런게 없어서 Pick 기능으로 Link XPath를 지정하는 것은 불가능하다. 하지만 Pick 버튼을 눌러서 이런 노드는 어떤 식으로 표현되는지 등의 보조적인 도움을 받을 수 있으므로 잘 이용하면 좋은 툴이다.
다음은 Contents XPath를 지정할 차례이다. 이때는 반대로 Pick 기능이 큰 효과를 발휘한다. Pick을 누르고 원래 브라우징 화면으로 마우스 커서를 대면 프레임 경계가 진해지면서 선택된 <DIV> <TABLE> <P> 등등의 영역이 나타나는데, 원하는 영역을 선택하면 된다.
클리앙의 경우 Contents XPath는 //div[@class='board_main'] 값은 페이징 영역과 검색 영역까지 포함하는 말 그대로 board main이고 더 제한적으로 //div[@id='content']/div[@class='board_main']/table 로 지정하면 리스트 부분만 계속적으로 반복되게 된다. 전자는 목록 외에 페이징 영역과 검색 영역이 반복되므로 좀 지저분 할 수 있다. 반대로 후자는 깔끔한 대신 가끔 검색 하려고 하면 Autopager 기능을 꺼야 하는 경우가 생길 수도 있다. 자신에게 맞게 잘 설정하는게 필요한 시점이다.
또한 <DVI> 같은 하나의 항목으로 원하는 영역이 한 번에 묶이지 않는 경우는 'Add' 버튼을 눌러서 더해나가면서 추가시킬 수 있다.
기타
빠른 스크롤을 하다 보면 실제로는 1페이지 로딩해서 기다리는게 좀 모자라는 경우가 있다. 그때는 Autopager 메뉴에서 Immediately Load의 값을 3이나 더 높여 놓으면 3페이지 미리 읽고 기다리므로 더 끊김없는 페이징을 느낄 수 있다.
또한 가끔 게시판의 Footer가 너무 길면 다음 페이지가 나와야 할 시점임에도 불구하고 스크롤의 끝이 아니기 때문에 Autopager가 동작하지 않는 것을 볼 수 있다. 이때는 개별 페이지 세팅에 들어가서 Paging when space is less than ( ) window heights에서 값을 1에서 2나 3으로 높여주면 된다.
이외에 옵션이나 채워 넣어야할 세팅 값이 굉장히 많은데, 아직은 잘 모르겠다. 나도 아직 배우는 중이라서... 그리고 너무 남용하면 좋지 않다. 특히 사이트가 느린 경우에는 페이지 반응 속도가 스크롤 속도를 못 따라 가면서 스크롤이 끊긴다. 게다가 메모리도 좀 먹는지 이상하게 좀 느리고 버벅이는 감도 있고... 하지만 무난한 인터넷 속도에 사진 게시판은 정말 Autopager의 효과가 극대화 되는 곳 같다.
현재 가능한 페이지
뽐뿌 목록, 구글 관련 사이트(모두는 아님), 네이버 검색 일부분, 네이버 웹툰, 지식인, 다음 블로그검색, 다음 카페검색, 다음 웹툰, 클리앙 게시판 목록
이렇게 편한 툴이 있다니! 하는 마음에서 여러 사람들과 지식을 나누려고 글을 썼다. 내가 처음에 찾을 당시만 해도 국내 사이트에 자세한 설정을 소개한 것이 없었다. 그나마 이용하기 쉽게 해놓은 것이라지만 XPath를 알아야 한다는 것은 일반 사용자들에게 꽤 어렵다. 그래도 일단 공유된 세팅만 사용해도 그 편함은 이루 말할 수 없을 것이다. 일단 사용해보고 욕심이 나서 움직일때 이 글이 도움이 된다면, 그래서 많은 사이트들에 적용이 가능해서 편한 웹서핑이 가능하다면, 그걸로 만족할 따름이다.
또한 설명은 직접 부딪혀서 얻은 지식으로 추측이 다소 포함되어 있을 수 있으므로 전문가의 도움이 필요하다. 지적이 필요하면 언제든지 자유롭게 댓글을 날려주시길...
자동 설정하기
다시 말하지만 Autopagerize는 제작자가 고쳐주기 전이나, 혹은 능력자가 아닌 이상 건드릴 수 없지만 Autopager는 Site Wizard를 통해서 사용자가 직접 적용할 수 있다. 간단히 방법을 설명하자면,
먼저 원하는 사이트를 켠다. 클리앙에 적용해 보도록 하자. 모두의 공원 페이지를 열고 첫 번째 페이지가 아닌 2번째나 3번째 페이지를 열어놓자. 아마 주소는 http://clien.career.co.kr/cs2/bbs/board.php?bo_table=park&page=2 이렇게 될 것이다. 그리고 Autopager>>Site Wizard를 실행하면 아래와 같이 나온다.
나 같은 경우에는 All in One Sidebar 애드온을 사용해서 사이드바에 Site Wizard가 뜨는 것을 볼 수 있다.
먼저 좌측 상단의 돋보기 모양 아이콘을 눌러서 잘 맞는 설정을 자동 찾기 한다. 이 과정에서 페이지 소스를 분석하고 미리 가지고 있는 데이터를 기반으로 지금 사이트에 적합한 설정이 있는지 검색하게 된다. 잠시후 검색이 끝나면 최적 설정을 보여주고 Link XPath와 Contents XPath가 완성된다.
중간 쯤의 흰색 바탕 영역을 보면 Matched를 보여주면서 가장 확률이 높은 요소를 보여주는데 이에 대한 지식이 있다면 다른 것들을 선택해도 된다.
별다른 문제가 없다면, 이 상태에서 상단의 돋보기 아이콘이 있던 줄의 초록색 체크마크 아이콘을 클릭하면 새로운 창이 뜨면서 Site Wizard로 찾은 설정을 실제로 적용하는 Setting 창이 뜬다. 이때 확인을 누르면 브라우저에서 사이트가 새로고침이 되면서 적용이 되고 잘 되었다면 정상적으로 작동하게 된다. 이 일련의 자동 설정 과정은 동해랑님의 블로그에서 더 자세하게 설명이 되어 있다.
그런데 자동이라는게 그렇듯이 인공지능이 아닌 이상 모든 경우에 동작하는 설정을 찾아내지는 못한다. 클리앙의 경우에도 자동 설정으로 찾으면 페이지가 10개씩 넘어가는 문제가 생긴다. 그래서 수동으로 설정이 필요한데, 지금부터는 수동으로 설정하는 다소 어려운 방법에 대해서 설명할까 한다.
사실 Autopager는 온라인으로 설정을 Publish하고 공유할 수 있어서 한 사람이 만들어 놓은 설정을 다른 사람은 그냥 클릭 몇 번으로 이용할 수 있다. 따라서 "나는 그냥 자동으로만 만족할래", "어려운거 싫어" 하는 사람은 아래에 이어지는 내용을 무시해도 좋다. 하지만 내가 가는 사이트가 마이너한 사이트라 내가 아니면 대신 해 줄 사람이 없어서 꼭 방법을 알아야 겠다는 사람은 아래 글을 더 읽을 필요가 있다.
내 경우가 그랬는데, 클리앙 사진 게시판은 한 페이지에 3~4개 정도의 게시물이 있는데 하루에 올라오는 양이 많아서 페이지 넘김이 다른 게시판에 비해서 특히 많다. Autopagerize도 안되고 위의 자동 설정 방법을 적용해 봐도 10페이지씩 넘어가는 문제가 생겨 직접 해결해 보고자 삽질 끝에 알아낸 방법이다.
Autopager의 원리
내부적으로 어떻게 되는지 알리가 없는 초보지만 추측을 해 보자면, 일단 1)원하는 주소(URL)에서 설정이 존재하면 기능이 동작한다. 2)다음페이지를 나타내는 링크의 위치를 지정해 주면, 스크롤을 해서 마지막 쯤에 이르렀을 때 자동으로 다음페이지 버튼을 가상으로 눌러서 얻은 다음페이지의 소스에서 3)원하는 컨텐츠 영역만 추출하여 현재 페이지의 다음에 붙여준다.
동작하기 위한 기본 요소
앞에서 번호를 붙였듯이, 당연히 1)동작할 주소가 필요하다. 이 값은 URL Pattern으로 Site Wizard나 Setting에 써 주어야 하는 항목이다.
그리고 가상으로 다음페이지를 누르기 위해서는 HTML 소스 내에서 어디에 위치하는지 2)다음페이지를 나타내는 링크의 위치가 필요하다.
위의 그림은 클리앙에서 사용되는 게시판 페이지 버튼 영역이다. 현재 페이지가 '1'이므로 '2'의 링크가 필요하다. 웹페이지의 소스를 열어서 보면 정확하게 <A href="./board.php?bo_table=park&page=2">2</A>이 다음 페이지를 나타내는 링크가 된다. 이런 정보가 Link XPath이다.
마지막으로 3)반복하길 원하는 컨텐츠 영역을 지정해 주어야 한다. 클리앙 모두의 공원 게시판을 예로 들면, 바깥쪽의 메뉴 부분 그리고 상단, 하단은 제외하고 게시판 영역만 이어지는 페이지로 반복시켜야 할 것이다. 따라서 대략 빨간색의 컨텐츠 영역을 지정해 주면 된다. 이 정보는 Contents XPath가 된다.
이와 같이, Autopager가 동작하기 위해서 는 최소 3개의 항목이 필요하다.
그러면 어떻게 지정해 줄 것인가?
우선 URL Pattern은 Site Wizard에서 자동으로 채워지는 값으로 해도 무방하다. 아니면 정규식으로 원하는 URL에서만 동작하도록 설정할 수 있는데, 정규식도 알아야 하고 일단은 그냥 쓰도록 하자.
나머지 2개의 정보(Link XPath와 Contents XPath)를 지정해 주기 위해서는 우선 XPath를 알아야 한다. XPath라는 것은 HTML이나 XML에서 원하는 정보가 있는 위치를 찾는 방법이라고 한다. 이는 C:\Windows\abc 와 같이 우리가 흔히 쓰는 파일 경로에서 원하는 폴더나 파일을 찾아가는 방식과 유사하다. XPath에 대한 Tutorial은 링크1과 링크2에서 찾을 수 있다. 개인적으로는 링크1에서 개념을 잡고 링크2의 Example로 익히면 좋은 것 같다.
그러면 이제 클리앙의 Link XPath를 찾아보자. 클리앙의 게시판은 모두 동일하므로 아무 게시판이나 열어보자. 현재 페이지가 1인 경우 페이지 영역이 아래와 같은 그림일 것이다.
이때 페이지 소스는 열어서 paging 부분을 찾으면 아래 그림과 같다.
그럼 현재 페이지가 5인 경우를 한 번 보자. 각각 다음과 같을 것이다.
클리앙의 경우에는 현재 페이지를 가리키는 항목(노드)의 속성(Attribute)이 'cur_page'로 명시가 되어 있어서 Link XPath를 지정하기 편하다. 말로 풀어 쓰면 <A class=cur_page> 어떤것 </A> 다음에 오는 <A>를 Link XPath를 지정하면 된다.
이를 XPath Syntax에 맞게 표현하면, //div[@class='paging']/a[@class='cur_page']/following-sibling::a[1]이 된다. 해석은 속성이 class=paging인 <DIV> 아래 class=curpage인 <A>를 찾는다. 그리고 난 후 오는 sibling중 첫번째 <A>항목을 선택하라!!
이렇게 지정해 주면 Link XPath가 언제나 다음페이지의 링크 <A>를 가리키게 된다.
Setting Window의 Pick 버튼으로도 Link XPath를 지정해 줄 수 있는데, 사이트 맞다 달라서 언제나 동작하지는 않고 조금 제한적이다. 예를 들어, 지름 커뮤니터 뽐뿌의 경우에는 "-다음페이지"라고 어떤 게시파은 "Next>>"와 같이 다음 페이지로 이동하는 버튼에 패턴 매칭이 가능한 Text가 존재하지만 클리앙의 경우에는 그런게 없어서 Pick 기능으로 Link XPath를 지정하는 것은 불가능하다. 하지만 Pick 버튼을 눌러서 이런 노드는 어떤 식으로 표현되는지 등의 보조적인 도움을 받을 수 있으므로 잘 이용하면 좋은 툴이다.
다음은 Contents XPath를 지정할 차례이다. 이때는 반대로 Pick 기능이 큰 효과를 발휘한다. Pick을 누르고 원래 브라우징 화면으로 마우스 커서를 대면 프레임 경계가 진해지면서 선택된 <DIV> <TABLE> <P> 등등의 영역이 나타나는데, 원하는 영역을 선택하면 된다.
클리앙의 경우 Contents XPath는 //div[@class='board_main'] 값은 페이징 영역과 검색 영역까지 포함하는 말 그대로 board main이고 더 제한적으로 //div[@id='content']/div[@class='board_main']/table 로 지정하면 리스트 부분만 계속적으로 반복되게 된다. 전자는 목록 외에 페이징 영역과 검색 영역이 반복되므로 좀 지저분 할 수 있다. 반대로 후자는 깔끔한 대신 가끔 검색 하려고 하면 Autopager 기능을 꺼야 하는 경우가 생길 수도 있다. 자신에게 맞게 잘 설정하는게 필요한 시점이다.
또한 <DVI> 같은 하나의 항목으로 원하는 영역이 한 번에 묶이지 않는 경우는 'Add' 버튼을 눌러서 더해나가면서 추가시킬 수 있다.
기타
빠른 스크롤을 하다 보면 실제로는 1페이지 로딩해서 기다리는게 좀 모자라는 경우가 있다. 그때는 Autopager 메뉴에서 Immediately Load의 값을 3이나 더 높여 놓으면 3페이지 미리 읽고 기다리므로 더 끊김없는 페이징을 느낄 수 있다.
또한 가끔 게시판의 Footer가 너무 길면 다음 페이지가 나와야 할 시점임에도 불구하고 스크롤의 끝이 아니기 때문에 Autopager가 동작하지 않는 것을 볼 수 있다. 이때는 개별 페이지 세팅에 들어가서 Paging when space is less than ( ) window heights에서 값을 1에서 2나 3으로 높여주면 된다.
이외에 옵션이나 채워 넣어야할 세팅 값이 굉장히 많은데, 아직은 잘 모르겠다. 나도 아직 배우는 중이라서... 그리고 너무 남용하면 좋지 않다. 특히 사이트가 느린 경우에는 페이지 반응 속도가 스크롤 속도를 못 따라 가면서 스크롤이 끊긴다. 게다가 메모리도 좀 먹는지 이상하게 좀 느리고 버벅이는 감도 있고... 하지만 무난한 인터넷 속도에 사진 게시판은 정말 Autopager의 효과가 극대화 되는 곳 같다.
현재 가능한 페이지
뽐뿌 목록, 구글 관련 사이트(모두는 아님), 네이버 검색 일부분, 네이버 웹툰, 지식인, 다음 블로그검색, 다음 카페검색, 다음 웹툰, 클리앙 게시판 목록
이렇게 편한 툴이 있다니! 하는 마음에서 여러 사람들과 지식을 나누려고 글을 썼다. 내가 처음에 찾을 당시만 해도 국내 사이트에 자세한 설정을 소개한 것이 없었다. 그나마 이용하기 쉽게 해놓은 것이라지만 XPath를 알아야 한다는 것은 일반 사용자들에게 꽤 어렵다. 그래도 일단 공유된 세팅만 사용해도 그 편함은 이루 말할 수 없을 것이다. 일단 사용해보고 욕심이 나서 움직일때 이 글이 도움이 된다면, 그래서 많은 사이트들에 적용이 가능해서 편한 웹서핑이 가능하다면, 그걸로 만족할 따름이다.
'생활 속 > 컴퓨터' 카테고리의 다른 글
| Intel X25 SSD G2 80G CrystalDisk bench (0) | 2010.11.16 |
|---|---|
| eee901에 OSX 설치하기 (0) | 2010.04.24 |
| 페이지를 편하게 넘기자! (2) | 2010.03.05 |
| DVI의 규격 (0) | 2010.03.03 |
| My Firefox Addons List (0) | 2010.03.03 |
댓글