웹 페이지, 스크립트, 스타일 작성에 유용한 오픈 소스 도구를 소개합니다. 여기서 소개하는 도구를 사용하면 새로운 사이트나 페이지를 제작하기가 한결 수월해집니다. 이 기사에서는 즉석에서 HTML 마크업, CSS, 자바스크립트를 수정하는 방법, DOM과 클라이언트-서버 통신을 검사하는 방법, 북마크릿으로 개발을 안전하고 쉽게 만드는 방법을 살펴봅니다.
자바스크립트 프로그램이 점차 복잡해지는 추세다. 서버와 클라이언트 단에 있는 코드를 제대로 디버깅하려면 개발자가 익혀야 할 도구와 프로그램 범위도 늘어났다. 마크업, 스크립트, CSS 등 다양한 기술을 사용하는 요즘 웹 사이트에서 서버와 클라이언트가 통신하는 내용까지 추적하려면 여러 도구가 필요하다.
이 기사에서는 클라이언트쪽 개발에 초점을 맞추어 개발자의 고생을 덜어줄 몇 가지 파이어폭스 도구를 소개한다. 파이어폭스 도구를 사용하면 즉석에서 페이지를 검사하고, 자료를 변경하고, 심지어 자바스크립트 코드를 디버깅할 수도 있다. 자바스크립트 곳곳에 alert() 문을 추가하던 기존 방식에서 벗어나 최신 방식으로 코드를 디버깅하고, 검사하고, 수정할 수 있다.
이 기사에서 소개하는 내용을 숙지하고 나면 파이어폭스 확장 기능과 도구를 자신의 프로젝트에 무리 없이 적용하게 되리라 생각한다.
이 기사에서는 다양한 도구를 사용하여 즉석에서 HTML 코드를 검사하고 수정하며, 자바스크립트 코드에서 고급 디버깅을 수행하고, DOM을 수정하고, 클라이언트와 서버 사이 통신을 검사하고, 동작 중인 웹 사이트에 개발 코드를 추가하여 새 기능을 테스트한다.
기사 내용을 따라가려면 다음 도구가 필요하다.
- Web Developer Toolbar for Firefox: 즉석에서 HTML 코드를 검사하고, 수정하고, 자바스크립트를 디버깅한다.
- 파이어버그(Firebug): 자바스크립트와 CSS를 디버깅하고, DOM을 수정하고, 클라이언트와 서버 사이 통신 내용을 검사한다.
- 그리스몽키(Greasemonkey)와 북마클릿, jQuery: 동작 중인 웹 사이트에 개발 코드를 추가하여 새 기능을 테스트한다.
보다시피, 이 기사는 상당히 많은 주제를 다룬다. 그래서 각 도구가 제공하는 기능을 깊이 있게 소개하지 못한다. 하지만 각 도구를 사용하는 방법과 장점은 충분히 납득하게 되리라 믿는다. 불행하게도, 클라이언트/서버 통신은 이 기사 범위를 벗어나므로 다음 기회로 미룬다.
여기서 사용하는 도구는 모두 무료다. 앞서 언급한 목록이나 참고자료에서 내려받도록 한다. 기사를 읽으면서 예제를 따라하려면, 지금 도구를 내려받아 설치할 것을 권한다. 도구를 설치한 후에는 브라우저를 다시 시작해야 한다는 사실에 주의한다.
많은 예제가 IBM 지원 사이트(http://www.ibm.com/support)나 구글 결과 페이지를 활용하므로 새 브라우저를 열어서 두 페이지를 띄워둬도 좋겠다.
새로운 웹 프로그램을 접했는데 프로그램이 동작하는 방식과 구현된 방식이 궁금하다고 가정하자. 직접 프로그램을 디버깅하고 확장하려는 입장일 수도 있고, 단순히 남의 프로그램을 파악하여 내 프로젝트에 활용하려는 입장일 수도 있겠다.
"Web Developer Toolbar for Firefox"(참고자료 참조)는 웹 사이트나 웹 응용 프로그램을 재빨리 검사하고 수정하게 해주는 멋진 확장 기능이다. 설치하면 브라우저에 별도로 도구 막대가 표시된다.http://www.ibm.com/support/ 사이트가 사용하는 클래스와 ID를 파악하려면 도구 막대에서 Information > Display ID & Class details를 선택한다. 그러면 문서 내에 모든 id와 클래스가 표시된다. 그림 1은 IBM 지원 사이트의 왼쪽 메뉴 구조를 살펴본 결과다.
그림 1. IBM 지원 사이트 왼쪽 메뉴 -- id와 클래스를 표시한 결과
외곽선(outline) 기능도 멋지다. 예를 들어, 테이블 외곽선은 물론 블록 엘리먼트 외곽선도 모두 확인이 가능하다. (참고로, ibm.com은 테이블을 사용하지 않는다.) 외곽선 기능을 사용하면 div 엘리먼트가 배열되는 방식이 금방 드러난다. 새로운 사이트를 개발할 때 매우 편리한 기능이다.
테스트 기능 역시 굉장하다. 자바스크립트나 쿠키나 스타일을 비활성화한 후 웹 사이트가 제대로 동작하는지 테스트할 수 있다. 또한 페이지가 스크린 리더 프로그램이나 검색 엔진에 어떻게 보일지도 테스트할 수 있다. 이미지를 끄고 alt 태그를 모두 표시하면 사용성 문제가 즉각 드러난다. 이 방법은 페이지에 사용된 이미지 정보를 얻기도 편하다.
도구 막대에서 Forms에 있는 기능은 프로그램 보안을 테스트하기에 적합하다. 단순히 폼을 테스트하는 기능뿐만 아니라, 필드를 쓰기 가능하게 만들거나, 텍스트 필드의 최대 길이 제한을 제거하거나, 텍스트 입력 필드의 select 드롭다운을 변경하여 자바스크립트 검증 코드를 확인할 수 있다. 즉석에서 정말 간단히 수정하여 프로그램 동작을 확인할 수 있으므로 프로그램 원시 코드를 변경할 필요가 없다. Forms > Convert Form Methods > GETs to POSTs를 사용하여 ibm.com에서 검색 폼이 동작하는 방식을 바꿔보자. 그림 2를 참고한다.
그림 2. 검색 폼 상세 정보
이제 검색 폼에 키워드를 입력하고 Search 버튼을 클릭하면 결과가 표시되는 대신 Help 페이지로 이동한다. ibm.com 검색 엔진이 의도한 대로 동작한다는 뜻이다.
Web Developer Toolbar가 제공하는 멋진 기능 두 가지를 더 소개하자면, (Cookies > View Cookie Information를 통해) 매우 간편한 인터페이스로 쿠기 정보를 보고 편집하는 기능과 (Information > View JavaScript를 통해) 페이지에 사용된 자바스크립트 코드를 모두 살펴보는 기능이다. 후자는 인라인 스크립트와 동적으로 메모리에 올라온 스크립트를 모두 포함한다.
다음 도구로 넘어가기 전에 잠시 시간을 들여 Web Development Toolbar를 둘러보기 바란다. 앞으로 여러분에게 필수불가결한 도구로 자리잡으리라 믿는다. Internet Explorer Developer Toolbar도 IE에서 비슷한 기능을 제공한다. 자세한 내용은 참고자료를 살펴보자.
지금까지 정적 페이지를 탐색했으니, 이제 자바스크립트 개발 도구 중 가장 강력한 확장 기능 하나를 사용해 동적인 영역을 탐험해 보자. 아직 파이어버그(참고자료 참조)를 설치하지 않았다면, 지금 설치한 후 파이어폭스를 다시 시작한다. 그러면 브라우저 오른쪽 하단 구석에 조그만 확인란이 생긴다. 이 확인란을 클릭하면 그림 3과 같은 패널이 뜨는데, 이 패널이 파이어버그 콘솔이다. 큰 그림을 보려면 여기를 클릭한다.
그림 3. 파이어버그 콘솔
파이어버그 콘솔은 메모리를 많이 잡아먹으므로 꼭 필요한 경우에만 띄우는 편이 좋다. 필요하다면 특정 호스트에서만 파이어버그를 활성화한다. 파이어버그의 힘을 빌어 코드를 개발하고 디버깅할 테스트 시스템에서만 파이어버그를 활성화해도 좋다.
일단 활성화하면 콘솔 상단에 다양한 파이어버그 기능이 열거된다. 우선 HTML 옵션부터 살펴보자. HTML 옵션은 페이지에 들어있는 HTML 소스 코드를 읽기 좋게 가공해서 표시한다. 섹션을 확장하거나 축소할 수 있으며, 강력한 Inspect 버튼을 사용하여 DOM을 탐색할 수도 있다. 콘솔에 표시되는 DOM은 동적 변경이 모두 적용된 현 상태 DOM이라는 사실에 주의한다. 스크립트로 엘리먼트를 제거했다면 파이어버그 뷰에도 표시되지 않는다.
IBM 지원 페이지(http://www.ibm.com/support)에서 Inspect > Choose support type을 선택한다. 일단 엘리먼트를 선택하면 DOM 뷰가 업데이트되면서 선택한 엘리먼트에 대한 HTML 코드가 표시된다. 원하는 엘리먼트를 클릭하여 편집하면 DOM과 페이지에 변경이 곧바로 적용된다. 그림 4처럼 onchange 이벤트 핸들러에 alert() 문을 추가해 보자.
그림 4. 파이어버그에서 전용 코드 추가
Enter 키를 눌러서 변경을 저장한 후 드롭다운 목록에서 다른 항목을 선택한다. 짜잔, alert()에 넣었던 메시지가 뜬다. 여기서 페이지에 가한 변경은 영구적이지 않다는 사실에 주의한다. 페이지를 다시 로드하면 변경은 모두 사라진다. 변경하고픈 내용을 간단히 테스트하거나 DOM을 수정하여 스크립트를 테스트하려는 경우에 유용한 기능이다(다음 절에서 좀 더 자세히 다룬다).
선택한 엘리먼트에 적용되는 CSS 스타일은 파이어버그 패널 오른쪽에 모두 파란색으로 표시된다. 간격 문제를 찾아내기 위해 스크립트로 동적인 변경을 가할 때와 CSS 코드를 디버깅할 때 특히 유용한 기능이다. Layout 탭은 엘리먼트 간격과 외곽선을 보여주며, DOM 탭은 선택한 엘리먼트의 DOM 속성을 모두 열거한다. 둘 다 자바스크립트 코드를 개발할 때 유용한 기능이다.
두 말할 필요 없이, 파이어버그는 DOM 속성만이 아니라 CSS 스타일도 즉석에서 수정하고 확인할 수 있다. 그림 5는 파이어버그의 CSS 검사 콘솔이다.
그림 5. 파이어버그의 CSS 검사 콘솔
오랫동안 자바스크립트는 당연히 받아야 할 대접을 받지 못했다. 단순히 "장난감" 프로그래밍 언어라고 여겨진 탓에 IDE와 디버거가 없었다. Venkman Debugger나 IE Script Debugger(참고자료 참조)와 같은 프로그램이 나왔지만, 사용하기 어렵고 기능이 부실했다. 대다수 개발자는 코드에 alert() 문을 넣고 페이지를 계속 다시 고치면서 기능이 올바를 때까지 구현하는 방식을 택했다.
파이어버그가 내장하는 자바스크립트 디버거는 정지점(breakpoint), 동적으로 변수 값 확인과 명령 실행 등의 기능을 제공하면서 상황을 완전히 바꾸어 놓았다. 이제 alert()를 벗어날 때가 왔다.
앞서 IBM 지원 사이트에서 Webdeveloper Toolbar's Information > View JavaScript 메뉴를 실행했을 때 드롭다운 목록이 IBMSupportDropdowns.selectChange(this) 함수를 호출한다는 사실을 발견했으리라. 또한 이 함수가 ddnav.js라는 스크립트 파일에 있다는 사실도 알아챘을 것이다. 이제 파이어버그에서 Script 탭을 선택한 후 드롭다운에서 ddnav.js 스크립트를 선택하여 IBMSupportDropdowns.selectChange 함수를 살펴보자. 행 번호를 클릭하면 정지점이 설정된다. 그림 6은 ddnav.js에 정지점을 설정한 모습이다. 큰 그림을 보려면 여기를 클릭한다.
그림 6. 파이어버그에서 정지점 설정하기
이제 IBM 지원 페이지의 드롭다운 목록에서 아무 항목이나 선택한다. 그러면 정지점에서 실행이 멈춘다. 메뉴에 있는 버튼이나 단축키를 사용하여 코드를 실행해 본다. 행 단위로 수행하기 위해 F8(계속, continue), F10(한 단계 건너 뛰기, step over), F11(내부로 들어가기, step into)을 제공한다.
파이어버그는 왼편에 코드를, 오른편에 (현재 범위에서 정의된) 모든 변수와 객체를 표시한다. DOM 엘리먼트를 클릭하면 HTML DOM 뷰가 뜬다. 앞서 언급했듯이, 여기서는 코드를 즉석에서 변경할 수 있다. 소스 코드에서 변수 위로 마우스를 가져가면 변수 내용이 표시된다. 변수에 새로운 감시점을 설정하려면 New watch expression에 변수를 입력한 후 Enter 키를 누른다.
Console 탭을 선택하면 현재 실행이 정지된 함수 문맥 내에서 코드가 실행된다. 즉, 즉석에서 변수 내용을 수정하거나 함수를 호출할 수 있다. 콘솔이나 코드에서 발생한 오류는 모두 Console에 표시된다. 오류를 클릭하면 오류가 발생한 코드가 표시된다.
파이어버그로 인해 자바스크립트를 사용하기가 무척 수월해지고 확장성이 높아졌다는 사실은 반박할 여지가 없다. 일단 익숙해지면 파이어버그 없이 자바스크립트 코드를 짜던 시절이 믿기지 않으리라.
웹 2.0 프로그램은 백그라운드에서 비동기식으로 서버와 통신한다. 전송하는 자료는 JSON을 사용한 자바스크립트부터 XML까지 어느 형식이나 가능하다. 자바스크립트 코드가 자료를 가져오므로 브라우저 앞단에서는 뒷단에서 오가는 디버깅 정보를 보지 못한다. 그러므로 클라이언트와 서버 사이에 통신을 살펴보려면 직접 검사해야 한다.
파이어버그에서 Net 탭을 선택한다. 파이어버그는 백그라운드에서 모든 페이지 요청을 모은다.
그림 7. 파이어버그를 사용하여 네트워크 트래픽 검사
메뉴에서 요청 유형별로 요청을 확인할 수 있다. 요청 앞에 있는 삼각형을 클릭하면 요청 전체와 요청 헤더/응답이 표시된다. Timing 정보를 확인하면 병목 지점이 쉽게 드러난다.
클라이언트와 서버 사이 통신을 검사하는 방법은 많다. Fiddler2 , Wireshark, Microsoft Network Monitor 등 다양한 도구가 많지만, 자세한 내용은 이 기사 범위를 벗어나므로 다음 기회로 미룬다.
이미 운영 중인 사이트에다 스크립트를 적용해 테스트한다면 얼마나 편리할까? 프로그램 원시 코드가 없거나, 다른 사람이 소유한 사이트거나, 다른 사이트에 해를 끼치지 않고 새 기능을 테스트하고 싶다면? 예를 들어, 구글 결과 페이지는 세 가지 조건에 모두 해당한다. 그래서 다음 예제로는 구글 결과 페이지를 사용한다. 브라우저 하나를 띄운 후 www.google.com에서 검색을 수행한다. 그런 다음, 결과 페이지를 개선해 보겠다.
DOM을 수정하는 아주 편리한 방법 중 하나가 파이어버그 콘솔과 jQuery 북마크릿을 조합하는 방법이다(참고자료 참조). jQuery는 작지만 강력한 라이브러리로, 이 라이브러리를 사용하면 CSS3 문법으로 DOM을 살펴보고 수정할 수 있다. jQuery에 대한 자세한 내용은 "Simplify Ajax development with jQuery" 기사를 참조한다(jQuery와 관련 기사는 참고자료를 살펴본다).
북마크릿을 사용하면 기존 페이지에 jQuery를 삽입할 수 있다. 따라서 파이어버그 콘솔 내에서 jQuery의 강력함을 십분 활용할 수 있다. 구글 결과 페이지를 예제로 살펴보자. 먼저 페이지를 jQuerify한 다음 파이어버그 콘솔을 연다. 콘솔에서 다음 코드를 입력하고 실행한다. 코드는 딱 한 줄이다! (페이지를 jQuerify하는 방법은 참고자료를 참조한다.)
$('#sd').append(' > Search at <a href="http://search.yahoo.com/search?p='
+ encodeURI($('input[@name="q"]').attr('value')) + '">Yahoo</a>');
|
결과는 그림 8과 비슷하다.
그림 8. jQuery로 구글 결과 페이지 개선
위 코드는 구글 결과 페이지에 새 링크를 추가한다. 새 링크를 클릭하면 야후에서 같은 검색을 수행한다. 불행하게도, 페이지마다 jQuery를 실행해야 하므로 매번 코드를 직접 실행해야 한다. 그러나 코드로 페이지 모양새를 바꾸기가 별로 어렵지 않으므로, 원하는 페이지가 나올 때까지 코드를 계속 바꿔가며 테스트하기도 어렵지 않다.
일단 코드를 완벽하게 구현했다면, 그리스몽키 확장 기능을 사용하여 스크립트를 영구히 적용한다. 그러면 구글 결과 페이지를 띄울 때마다 짧지만 유용한 스크립트가 적용된다. 그리스몽키는 웹 페이지를 읽을 때마다 이른바 "사용자 스크립트"를 페이지에 적용한다. 새 스크립트를 추가하려면 상태 막대에서 그리스몽키 아이콘을 마우스 오른쪽 버튼으로 클릭한 후 New User Script를 선택한다. 입력 필드에 이름, 이름공간, 설명을 입력한 다음 include 목록에 구글 결과 페이지를 입력한다. 그림 9는 새 그리스몽키 스크립트를 추가하는 화면이다.
그림 9. 새 그리스몽키 스크립트 추가
이제 텍스트 편집기를 열고 Listing 1처럼 사용자 스크립트를 추가한다.
Listing 1. 구글 결과 페이지를 개선하는 그리스몽키 스크립트
// ==UserScript==
// @name Yahoo Search on Google
// @namespace google_yahoo
// @description 야후! 링크를 구글 결과 페이지에 추가한다.
// @include http://www.google.com/search
// ==/UserScript==
var jq = document.createElement('script');
jq.src = 'http://code.jquery.com/jquery-latest.js';
jq.type = 'text/javascript';
document.getElementsByTagName('head') [0].appendChild(jq);
// jQuery가 메모리에 올라올 때까지 기다린다.
(function wait_jq()
{
if(typeof unsafeWindow.jQuery == 'undefined')
{
window.setTimeout(wait_jq,100);
return;
}
$ = unsafeWindow.jQuery;
$('#sd').append(
' > Search at <a href="http://search.yahoo.com/search?p='
+ encodeURI($('input[@name="q"]').attr('value'))
+ '">Yahoo</a>'
);
})();
|
위 스크립트를 저장하고 나면, 구글 결과 페이지를 띄울 때마다 링크가 자동으로 표시된다. 기존 웹 페이지를 온갖 방법으로 수정하는 사용자 스크립트가 아주 많다. 자세한 내용은 userscripts.org를 살펴본다.
IE에도 비슷한 확장 기능이 있다. IE7Pro라는 기능인데, 이름이 드러내듯이 IE 7에서만 동작한다. 하지만 (개선된 탭, 마우스 제스처, 광고 차단기, 그리스몽키와 비슷한 사용자 스크립트 등) 브라우저에 빠진 기능을 많이 제공한다.
이러한 확장 기능을 사용하면 어느 웹 페이지에도 작은 스크립트 코드를 적용할 수 있다. 원시 코드에 접근이 불가능한 사이트에 기능을 추가할 때도 편리하지만, 자신의 사이트에서 (원시 코드를 건드리지 않고) 새 기능을 재빨리 테스트하거나 시연할 때도 아주 편리하다. 물론, 실행 가능한 코드는 자바스크립트로 제한된다. 동작 중인 사이트에 아무 내용이나 추가하려면 프록시를 사용하는 방법이 궁극적이지만, 프록시는 이 기사 범위를 벗어날 뿐 아니라 훨씬 어려우므로 여기서 다루지 않는다.
이 기사에서는 웹 페이지, 스크립트, 응용 프로그램을 다루는 방법을 다양하게 살펴보았다. Web Developer Toolbar로 사이트를 검사하는 방법, 파이어버그 확장 기능으로 사이트 내용을 수정하는 방법 등을 살펴보았다. 또한 정지점을 지정하고 객체 내용을 검사해 자바스크립트 코드를 쉽게 디버깅하는 방법도 익혔으며, 개인 경험을 향상하기 위해 코드를 영구적으로 수정해 웹 페이지를 개선하는 방법도 다루었다.
두 말할 필요없이 각 도구는 기사 한 편, 아니 기사 연재물로 다뤄도 충분할 정도로 내용이 많다. 하지만 고급 기능으로 파고들기 전에 먼저 도구를 사용하면서 친숙해지기를 권한다. 이 기사가 독자들의 호기심과 의욕에 일조했기 바란다.
출처: http://www.ibm.com/developerworks/kr/library/wa-jstools/#resources