필자가 요즘 즐겨사용하는 브로우저는 Maxthon 이다. 이 Maxthon을 쓰면서 가끔 IE를 사용하곤한다. 빈약한 기능때문에 사용할 일이 거의없을 것 같은 IE를 사용하는 이유는 필자가 팁으로 소개한 두개의 확장, InstanSource와 IE Developer Toolbar때문이다.

사실 Maxthon의 뛰어난 기능과 그 많은 플러그인을 생각하면 InstanSource나 IE Developer Toolbar와 같은 플러그인이 없다는 것이 오히려 의아할 부분이었다. 물론 ViewPage라는 유사한 플러그인이지 존재하지만 JavaScript로 동작하기 때문에 속도가 늦고 그 한계가 분명하기 때문이다.

며칠전 Maxthon의 플러그인 사이트 를 방문했다가 조금 이상한 내용을 보게되었다. 필자가 현재 사용하고 있는 ViewPage 플러그인의 버전이 1.31인데 동일한 저자가 작성한 ViewPage 1.1 버전이 새로운 플러그인으로 올라왔기때문이었다.

확인 결과 이 플러그인은 VeiwPage의 COM 버전으로 JavaScript가 아닌 실행 파일(DLL)로 동작하는 플러그인이었다. 아울러 InstantSource의 기능과 IE Developer Toolbar을 합쳐놓은 것 같은 플러그인이었다. 물론 InstantSource의 모든 기능과 IE Developer Toolbar의 모든 기능을 합처놓은 것은 아니지만 InstantSource나 IE Developer Toolbar의 기능을 더이상 부러워하지 않아도 될 정도로 강력한 플러그인이었다.

아울러 InstantSource의 기능을 흉내낸 소스창 보이기/숨기기 기능도 가지고 있었다. 따라서 이번팁에서 Maxthon의 새로운 플러그인, ViewPage를 소개하겠다.

---

---

일단 ViewPage COM 버전을 Maxthon에 설치하면 좌측(또는 우측) 탐색창에 그림과 같은 버튼이 새로 추가된다. 이 버튼을 클릭하면 ViewPage COM 버전을 사용할 수 있다. 그러나 막상 ViewPage를 창을 불러들여도 페이지가 변경됨!이라는 썰렁한 메시지만 나타나므로 조금 당혹 스러울 수 있다.

따라서 가급적 옵션/일반/자동으로 DOM 구조 읽기를 체크해두기 바란다. ViewPage에서는 보기, 새로 고침, 요소 표시, 찾기, 속성창 표시, 고급, 옵션, 정보의 8개의 버튼을 지원하며 각각의 버튼은 하위 메뉴나 창을 가지고 있다. 각각의 버튼에대해 알아보면 다음과 같다.

I. 보기 보기 버튼에서 탐색창에 표시할 항목을 설정할 수 있다. 탐색창에 표시할 수 있는 항목은 다음과 같다.

		HTML DOM 구조 HTML 문서의 DOM 구조를 표시한다. 그림처럼 처음에는 HEAD, BODY밖에 표시되지 않는다. 그 이유는 HTML에서 최상위 구조가 HEAD와 BODY이기 때문이다. 그러나 + 기호를 클릭하면 HTML 문서가 계층적으로 표시된다. 아울러 요소 표시 버튼을 클릭하면 해당 태그를 페이지에서 표시할 수 있으며, 속성창 표시를 클릭하면 탐색창 하단에서 선택한 태그의 속성을 확인할 수 있다.
		페이지 정보 현재 읽은 페이지에대한 자세한 정보를 제공한다. 제공되는 정보는 도메인, URL, 제목, 문자집합, 참조 URL, 키워드, 설명, 파일 크기, 작성일, 변경일등이며, 문자집합과 키워드, 설명은 해당 페이지의 META 태그로부터 가져온다.
		프레임 현재 읽은 페이지에대한 프레임 구조를 가져온다. 프레임을 선택하고 마우스 우측 버튼을 클릭하면 URL 복사와 프레임 정보의 두 가지 메뉴를 사용할 수 있다. 프레임 정보의 경우 페이지 정보와 비슷하게 해당 프레임에대한 다양한 정보를 표시한다. 속성창을 표시한 경우 탐색창 하단에서 각 프레임의 내용을 바로 확인할 수 있다.
		링크 현재 읽은 페이지의 모든 링크를 가져온다. 고급/링크(고급)에서는 링크를 관리할 수 있는 독립창을 띄울 수 있다. 링크를 선택하고 마우스 우측 버튼을 클릭하면 URL 복사, 새창으로 열기, 체크된 것 열기, HTML로 저장하고 열기, 코드 작성의 하위 메뉴를 사용할 수 있다. 코드 작성으로는 선택한 링크를 BBCode(QAOS.com의 게시판 코드)나 HTML 코드로 변환할 수 있다. 속성창을 표시한 경우 탐색창 하단에서 앵커 태그의 내용을 바로 확인할 수 있다.
		이미지 현재 읽은 페이지의 모든 이미지 링크를 가져온다. 고급/이미지(고급)에서는 이미지 링크를 관리할 수 있는 독립창을 띄울 수 있다. 링크를 선택하고 마우스 우측 버튼을 클릭하면 URL 복사, 이미지 저장, 선택한 것 모두 저장, 필터에 추가, 코드 작성의 하위 메뉴를 사용할 수 있다. 코드 작성의 경우 링크와 비슷하게 선택한 이미지 링크를 BBCode나 HTML 코드로 변환할 수 있으며, 필터에 추가 기능을 이용하면 해당 이미지를 Maxthon의 광고 필터에 추가할 수 있다. 속성창을 표시한 경우 탐색창 하단에서 이미지 태그의 내용을 바로 확인할 수 있다
		서식 현재 읽은 페이지의 서식 파일을 가져오며, 서식 파일을 구조적으로 표시한다. 서식 항목을 선택하고 마우스 우측 메뉴를 클릭하면 내용 보기 메뉴를 사용할 수 있다. 내용 보기는 해당 서식 항목의 내용이나 전체 서식을 볼 수 있다. 속성창을 표시한 경우 탐색창 하단에서 서식 파일 항목의 속성을 확인할 수 있다.
		스크립트 HTML 소스에 포함된 스크립트와 외부 스크립트를 표시한다. 스크립트를 선택하고 마우스 우측 메뉴를 클릭하면 스크립트 보기와 필터에 추가 메뉴를 사용할 수 있다. 스크립트 보기 메뉴는 해당 스크립트를 독립된 창으로 확인할 수 있으며, 필터에 추가로는 선택한 스크립트를 Maxthon의 광고 필터에 추가할 수 있다. 속성창을 표시한 경우 해당 스크립트의 내용을 탐색창 하단의 속성창에서 바로 확인할 수 있다.
		플래쉬 현재 읽은 페이지에 포함된 모든 플래쉬 링크를 출력한다. 플래쉬 링크를 선택한 후 마우스 우측 버튼을 클릭하면 새 이름으로 저장, 체크된 것 저장, URL 복사, 필터에 추가, 속성의 메뉴를 사용할 수 있다. 필터에 추가는 이미지나 스크립트처럼 Maxthon의 광고 필터에 추가하는 기능이며, 속성은 해당 플래쉬에대한 소스와 속성, 서식등을 확인할 수 있다. 속성창을 표시한 경우 해당 플래쉬 소스를 탐색창 하단의 속성창에서 확인할 수 있다.
		미디어 현재 읽은 페이지에 포함된 미디어 링크를 출력한다. 미디어 링크를 선택한 후 마우스 우측 버튼을 클릭하면 새 이름으로 저장, 체크된 것 저장, URL 복사, 속성의 하위 메뉴를 사용할 수 있으며, 속성을 이용하면, 선택한 미디어의 HTML 소스와 속성, 서식 등을 확인할 수 있다.

II. 새로 고침 ViewPage 정보를 다시 읽는다.

III. 요소 표시 ViewPage 탐색창에서 선택한 항목을 웹 페이지에 표시한다. 그림에서 알 수 있듯이 A 태그를 선택하면 웹 페이지에서 A 태그가 녹색의 배경색으로 선택되는 것을 알 수 있다.



IV. 찾기 웹 페이지에서 HTML 태그나 속성을 검색한다. 일단 버튼을 클릭하면 그림과 같은 검색창이 나타나다.



검색창에서 적당한 옵션과 검색어를 입력하면 찾은 결과가 탐색창에 나타난다.

V. 속성창 표시 탐색창 하단에 각 항목의 속성을 출력하는 속성창을 표시한다.

VI. 고급 고급 버튼은 보기 버튼과 마찬가지로 상당히 많은 하위 메뉴를 가지고 있으며, 여러가지 유용한 옵션을 포함하고 있다.

		소스창 보이기/숨기기 Instant Source에서 제공하는 기능과 비슷한 기능을 하는 소스창을 띄우거나 숨긴다. 화살표 버튼을 클릭하면 커서 아래 요소와 선택한 요소를 선택할 수 있다. 커서 아래 요소를 선택하고 소스를 보려는 페이지 구성 요소에 Ctrl 키를 누른 상태에서 마우스 커서를 올려놓으면 그림처럼 커서 아래 요소의 소스가 출력된다. 윗쪽 화살표는 선택한 요소의 부모 요소를 탐색창에 출력한다. 아울러 마지막 버튼으로는 소스창의 투명도를 설정할 수 있다.
		격자 표시 웹 페이지에 수평/수직 줄자와 이 줄자를 연결하는 격자를 표시한다. 웹 페이지를 설계하는 경우 상당히 유용한 기능이다.
		디자인 모드 켜기/끄기 현재 읽은 페이지의 폼 요소를 간단히 편집할 수 있다. 각각의 항목을 클립보드로 복사할 수 있으며, 복사된 항목을 붙여 넣을 수도 있다. 현재 버전에서는 완벽하게 동작하는 것 같지는 않다.
		스크립트 실행 로컬 스크립트 파일이나 사용자가 입력한 스크립트를 실행한다. 자바 스크립트를 작성하는 경우 상당히 유용한 기능이다.
		쿠키 현재 설정된 쿠키를 확인하고 필요한 경우 해당 쿠키를 변경할 수 있다. 쿠키를 이용해서 각종 정보를 저장하는 사이트의 경우 상당히 유용히 사용할 수 있는 기능이다.
		링크(고급) 현재 읽은 페이지의 모든 링크를 관리할 수 있는 링크 창을 띄운다.
		이미지(고급) 현재 읽은 페이지의 모든 이미지 링크를 관리할 수 있는 이미지 창을 띄운다.
		페이지를 그림으로 저장 현재 페이지를 자동적으로 스크롤하면서 이미지로 저장한다. 저장할 수 있는 형식은 JPG, PNG, BMP이다.

VII. 옵션 ViewPage의 각종 옵션을 설정한다. 설정할 수 있는 옵션은 다음과 같다.

		일반 언어와 서식, 자동으로 DOM 구조 읽기 등을 설정할 수 있다.
		속성창 속성창의 배경색, 글자색, 글꼴 등을 설정한다.
		격자 출력되는 격자의 속성을 설정한다. 격자의 배치, 격자의 크기, 커서 및 줄자를 설정할 수 있다.
		구문 강조 구문 강조에 사용되는 색상을 설정한다.
		기타 그림 저장 경로와 그림 파일의 형식 및 품질을 설정한다.

VIII. 정보 정보, 기부, 기부 코드 입력, 홈페이지의 네 가지 하위메뉴를 사용할 수 있다. 정보 메뉴는 플러그인 개발자에대한 간단한 정보(저자, 전자우편, 웹사이트)가 출력된다. 웹사이트의 경우 ViewPage의 웹사이트가 연결되어야 하지만 아직까지 홈페이지가 만들지지 않은 것 같다.