웹페이지 잡음영역 필터링, 핵심내용 영역 추출을 구현하여 기사 페이지의 해상도 변환 기능을 구현.

잡음(?)영역 필터링은 웹페이지의 광고영역, 템플릿영역, 네비게이션 영역 등을 제거하여,
웹페이지의 핵심내용을 추출하는 기능이다.

예제인 아래 페이지의 가로 해상도는 1024 해상도이다.
사용자 삽입 이미지

하지만 페이지에서 실제 주내용 영역은 붉은색 사각형으로 체크된 부분이고..
나머지 부분은 실제 주내용에서 관련 없는 광고나 네비게이션 영역으로 구성된다..

PC의 웹브라우저로 페이지를 봤을때는 큰 문제가 없으나,
성능이 떨어지는 모바일 장비의 브라우저로 이 페이지를 열어 보았을때,
불필요한 영역까지 Rendering 하는것은 상당한 과부하가 아닐수 없다..

그래서 웹페이지에서 핵심영역의 내용만을 추출하여,
모바일 장비의 가로해상도에 맞춰 Page의 View를 변환하는 기능을 구현해 보았다.

아래는 위에 설명한 기능을 구현한 것이다.
가로 해상도를 320으로 설정하여 페이지를 변환 PC 브라우저에서 열어본 모습이다.

사용자 삽입 이미지

하나의 페이지는 핵심내용 추출영역과 Navigation 영역으로 2개의 페이지로 추출된다.

아래의 Demo Site에서 다른 기사류의 페이지도 확인해 볼 수 있다.

해상도 변환 Demo Site 가기

URL란에 변환을 원하는 사이트를 입력하고 변환 버튼을 누르면 변환페이지가 출력된다.

** 네비게이션 영역은 아직 미구현이며, 주로 네이버, 조선일부 페이지 위주로 테스트 하였으므로 다른 사이트의 오동작 가능성 높음.

이런 기능외에도 검색엔진이나 웹에이전트를 개발해본 사람이라면  
아주 써먹을 데가 많다는데 반론의 여지가 없을 것이다.ㅋ

+ Recent posts