[1]All-in-One Gestures
점심식사를 마치고 사무실에 돌아온 이 팀장은 신입 디자이너 박 군이 모니터를 뚫어져라 쳐다보면서 마우스를 열심히 움직이고 있는 것을 보고 깜짝 놀랐다. 점심시간에도 쉬지 않고 일하는 박 군이 걱정되어 그에게 다가간 이 팀장. 하지만 예상과 달리 박군은 브라우저 하나만 띄워놓고 열심히 웹 서핑 중이었다. “아니, 이 사람, 고작 인터넷 하면서 마우스는 왜 그렇게 문질러대나!” 박군은 All-in-One Gestures에 중독됐던 것이다.
All-in-One Gestures만 있으면 마우스만 문질러도 웬만한 기능은 다 실행할 수 있다. 이전 문서가 보고 싶으면 마우스를 왼쪽으로 살짝 움직여주면 되고, 탭을 닫을 때는 ㄴ을 그려주면 된다. 어디 그뿐인가. 플래시도 감추고, 닫았던 탭도 다시 열고, 그림도 줄였다 늘이고, 마우스만 문질러서 할 수 있는 기능이 60가지가 넘는다. 이 가운데 정말 유용한 동작 두 가지만 소개하면 다음과 같다.
<화면 1>은 단칼에 여러 적을 쓰러뜨리는 무림의 고수처럼 단 한 번의 ‘문지름’으로 여러 개의 링크를 여는 제스처다. 이렇게 여러 개의 링크를 그은 후 ‘링크(들)을 새 탭으로 열기’(기본 설정 : 오른쪽-위-왼쪽) 동작을 시전(試展)하면 커서가 훑고 지나간 자리의 링크들이 모두 새 탭으로 열린다.
<화면 2>는 URL에 포함된 숫자를 증가/감소시키는 기능으로 게시판에서 글을 읽을 때 유용하다. 동작을 실행하면 다음과 같은 대화상자가 나타나는데 여기서 변경할 부분을 선택하면 된다.
[2]Adblock
협력 업체의 직원에게 메일을 보내야 하는데 메일 주소를 잊어버린 박 군. 메일 주소를 찾으려고 협력 업체의 사이트에 접속했는데 광고로 도배를 해놓아서 도대체 원하는 링크를 찾을 수가 없다. 10분 동안 광고의 틈바구니를 헤메고 다닌 다혈질 박군 “이 놈의 광고, 다 틀어막아 버리고 싶어!” 광고에 지치셨습니까? Adblock이 확실이 막아 드립니다!
Adblock은 차단 목록에 있는 그림 파일이나 플래시가 화면에 표시되지 않도록 확실하게 ‘틀어막아’ 준다. 일정 크기 이상의 그림이나 플래시에는 [Adblock] 딱지가 표시되는데 이것을 누르거나 문맥 메뉴에서 [Adblock …]을 선택하면 해당 파일을 차단할 수 있다. [Adblock] 딱지를 표시하지 않으려면 설정에서 Obj-Tabs를 끄면 된다.
Adblock이 강력한 것은 바로 차단 목록에 *과 정규식을 사용할 수 있기 때문이다. 파일을 일일이 목록에 추가하지 않아도 광고들을 싸잡아 차단할 수 있다. 예를 들어 월간 마이크로소프트의 홈페이지에서 그림 파일과 플래시를 전혀 보고 싶지 않다면 차단 목록에 http://imaso.co.kr/*을 추가하면 된다. 사이트에 관계없이 모든 광고를 차단하고 싶다면 간단히 */ad* , */*bann* , *ad-* 이렇게 세 개만 등록하면 충분하다. Adblock 게시판에 등록된 추천 차단 목록은 다음과 같다.
/D(588
googlesyndication
us.yimg.com/a/
//buy_assets//
/[Wd_](top
/[Wd](double
/[Wd]click(stream
/[Wd]value(stream
/[Wd]dime(xchange
/[W_](onlineads?
js
xchange)?)[Wd]/
Adblock이 차단한 그림과 플래시 때문에 가끔 사이트의 모양이 엉망으로 나오는 경우가 있는데 <화면 3>처럼 차단 방식을 ‘Hide ads’로 설정하면 차단된 그림과 플래시가 있어야 할 공간의 크기가 그대로 유지돼 사이트의 모양에 아무런 지장을 주지 않는다.
[3]FastDic 0.2.4
아버지가 기본 브라우저를 파이어폭스로 바꿔놓은 바람에 얼떨결에 파이어폭스를 쓰게 된 장 군. 다 마음에 드는데 한 가지 정말 아쉬운 것이 있다. 인터넷 익스플로러(IE)를 쓸 때는 IE Toy를 이용해 웹 상의 단어를
FastDic을 이용하면 단어나 선택문에 커서를 대고
[4]Web Developer
무엇이든 주먹구구식으로 처리하는 신 씨. 가족 홈페이지를 만든다고 HTML도 배우고 CSS도 배워서 웹 에디터도 마다하고 문서 편집기로 열심히 만들었는데 저런! 다 만든 파일을 브라우저에 불러오니 모양이 생각했던 것과는 전혀 딴 판이다. 내용을 다시 하나하나 살펴볼 생각을 하니 눈 앞이 캄캄한데…. 걱정마시라 웹 개발자를 위한 필수 확장기능, Web Developer가 있으니.
Web Developer는 브라우저에서 웹 문서의 다양한 부분을 건드릴 수 있게 해주는 도구막대이다. 여러 가지 기능이 있는데 신 씨에게 유용한 기능은 [CSS] - [CSS 편집 기능], [정보] - [id와 class 값 표시], [테두리 표시] - [블럭요소 테두리 표시]가 될 것이다. <화면 5>는 update.mozilla.or.kr에 이 세 가지 기능을 사용한 화면이다. 눈으로 보면서 손쉽게 CSS를 편집할 수 있다.
사이트를 분석할 때 여러 개의 자바 스크립트가 사용되어 내용을 살펴보는 것이 불편하다면 [정보] - [JavaScript 보기]를 통해 해당 사이트에 사용된 모든 자바 스크립트의 내용을 한꺼번에 볼 수 있다.
사이트를 운영하다 보면 그림 파일이 삭제되어 화면에 표시되지 않는데도 모르고 지나치는 경우가 있는데 이럴 때는 [이미지] - [경로에 문제가 있는 이미지 찾기]를 하면 문제가 있는 그림 파일의 목록을 얻을 수 있다. alt가 지정되지 않은 그림 파일을 찾고 싶다면 [이미지] - [alt 속성이 없는 이미지를 테두리로 표시]를 이용하면 된다.
또 오래된 링크의 경우 사이트가 사라지거나 주소가 변경되어 연결이 되지 않을 때가 있는데 이것을 일일이 찾는 것은 쉽지 않은 일이다. 이 때는 [도구] - [Validate Links]를 하면 W3C의 링크 체커(Link Checker)를 이용할 수 있다. 만약 웹 문서가 W3C에서 마련한 표준 규격에 맞는지 확인하고 싶다면 [도구] - [Validate CSS], [도구] - [Validate HTML]을 사용하면 된다.
[5]Extension Developer
이제 막 확장기능 제작에 입문한 곰 씨, 기초가 제대로 닦여 있지 않아 코드 한 줄 작성하는 데도 애를 먹는다. 특히 이번에 개발하고 있는 확장기능은 기능을 시험해 보려면 파이어폭스를 종료하고 확장기능 파일을 교체한 후 다시 파이어폭스를 시작해야 하는데 이게 여간 귀찮은 일이 아니다. 자바 스크립트가 제대로 작동하는지 시험할 수 있는 도구가 있다면 참 유용할텐데…. 이때 사용할 수 있는 확장기능이 Extension Developer다. 바로 쓰고 바로 확인하자.
Extension Developer는 자바 스크립트와 HTML, XUL을 작성하고 실행할 수 있는 환경을 제공하기 때문에 웹 사이트와 확장기능을 개발하는 데 매우 유용하다. HTML 에디터와 XUL 에디터 기능은 사용자가 입력하는 동시에 결과가 출력되는데 별다른 편집기가 존재하지 않는 XUL 문서를 작성할 때 특히 유용하다.
자바 스크립트를 시험할 수 있는 도구는 Javascript Environment와 Javascript Shell 두 가지다. Javascript Environment에 여러 줄의 코드를 입력해 실행하면 그 결과가 HTML 에디터와 XUL 에디터처럼 창 아래에 표시된다. 오류가 발생하면 문제가 있는 오류 행과 내용이 출력되기 때문에 이를 수정하는 데도 유용하다.
Javascript Shell은 명령을 한 줄씩 밖에 입력할 수 없다. 그러나 명령이 실행되면 반환되는 결과를 바로 표시해 주기 때문에 간단한 스크립트를 시험하기에 좋다. 스크립트가 적용될 창을 선택할 수 있어 확장기능뿐만 아니라 웹 사이트의 기능을 개발, 점검하는 데도 유용하다. 특히 파이어폭스의 뼈대를 이루는 browser.xul에도 스크립트를 적용할 수 있어 파이어폭스의 내부 기능을 조절할 수 있다. <화면 7>처럼 browser.xul의 제목 즉 파이어폭스의 제목이 변경할 수 있다.@
* 이 기사는 ZDNet Korea의 제휴매체인 마이크로소프트웨어에 게재된 내용입니다.
