웹사이트나 블로그의 스킨을 수정하려다 보면 원하는 위치의 소스가 정확히 어느 부분인지 찾는데 꽤 애를 먹는 경우가 있지요. 특히 웹표준에 맞춰 스타일과 마크업을 깔끔하게 구분하지 못한 사이트의 경우 일일이 소스파일을 하나씩 열어 검색해가야 하는 어려움이 있습니다. 그런 고민을 조금이나마 덜어줄 수 있는 플러그인을 하나 발견해서, 소개할까 해요. 물론, 동적으로 잘 구조화된 사이트라면 보다 더욱 유용하게 사용할 수 있을 겁니다. (먼저 이 녀석을 소개해주신 DesignMyself에 감사드리면서…)

FIrebug
/ Joe Hewitt
다운로드 (파이어폭스 애드온)
공식웹사이트

이 플러그인은 파이어폭스 1.5 이후 버전에서 사용할 수 있고, 특정 스크립트 소스를 자신이 운영하는 웹사이트에 미리 넣어두면 파이어폭스 이외의 브라우저에서도 사용할 수 있다고 합니다. (‘있다고 합니다’는 즉, amy는 아직 안해봤다는 뜻^^) 필요한 분은 여기를 클릭해서 안내를 받으세요.

음… 사실 홈페이지에 접속하자마자 떡하니 뜬 저 로고의 벌레 때문에 흠칫 놀랐습니다. 다리가 나보다 많이 달린 생물들은 일단 경계하고 보는 소심한 성격때문에, 혹은 어린시절 창가를 펄펄 날아다니던 바퀴벌레에 기절할 듯 놀랐던 트라우마 때문에. 아무튼.

파이어폭스를 사용하고 계시다면 위의 “다운로드”에서 바로 다운받아 설치하시고, 파이어폭스를 아직 사용하지 않는 분이라면 먼저 파이어폭스를 설치해주세요. >>Firefox 다운로드

플러그인을 내려받아 설치하고 나면 화면 오른쪽 밑에 작은 동그라미가 붙어있을 거에요. 그 녀석을 클릭하면 아래와 같은 화면이 뜹니다. 비활성화되어 있으니 활성화시켜달라는 거죠. Enable Firebug를 클릭하시면 됩니다. 그냥 구석의 동그라미에서 마우스 오른쪽 버튼을 클릭해도 메뉴가 뜨지요.

Enable Firebug
그러면 바로 해당 사이트의 마크업(왼쪽 html부분)과 스타일(오른쪽 CSS부분)의 소스창(Console)이 펼쳐집니다. 아직 이 상태에서는 화면이 그냥 브라우저와 다를 바 없이 작동하지요.

소스창이 떴습니다.
이제 우리에게 필요한 소스보기를 실행하려면 소스창의 왼쪽 상단 메뉴 중 “Inspect”를 클릭합니다. 그러면 상단의 화면에서 마우스를 움직일때 마다 해당 위치의 소스가 아래쪽 소스창에 펼쳐집니다.

원하는 위치의 소스를 찾습니다
이것으로 Firebug의 작동준비는 모두 완료되었네요. 위 화면은 기본설정이고, 그밖에 메뉴를 보면 그림파일, 자바스크립트, 플래시 기타 등등 여러가지 요소들을 살펴볼 수 있습니다. 하나씩 써 보면서 이 벌레녀석이 할 수 있는 더 많은 능력들을 찾아보는 것도 재미있겠죠.

ps. 지금 저에게 가장 흥미로운 부분은 바로 아래처럼 CSS 레이아웃을 보여주는 기능이네요. 이거 은근히 신경쓰이는 부분이거든요! ^^

CSS Layout 보기 기능