View Source Chart - 웹 소스를 보기 편하게

웹 코딩을 볼 줄 아는 분들이라면 종종 페이지의 소스를 분석하기도 하실겁니다.

독특한 디자인의 사이트나 특이한 효과를 보이는 페이지를 보면 이건 어떻게 만들었나 하면서 말이죠.

하지만, 대부분의 소스들은 한눈에 들어오도록 깔끔하게 쓰인 것들은 드물 뿐 아니라 좀 복잡한 페이지의 경우 시작된 이 태그의 닫는 태그는 또 어디에 있는지 찾기 조차 힘든 것이 사실이죠.

FF의 기본기능인 '페이지 소스'를 통해 본 소스.(사실 이정도만 해도 보기 쉬운 편에 속한다.)

지금 소개하는 확장기능 View Source Chart는 웹 페이지의 소스를 좀 더 이해하기 쉽게 보여 줍니다.

View Source Chart설치후 '소스 차트로 보기'를 통해 본 소스.

 위에서 처럼 View Source Chart를 통해 보여지는 소스는 여는 태그와 닫는 태그를 박스로 묶어서 보여주며, 태그의 성격에 따라 다른 색상으로 표시되어 좀 더 명확히 볼수가 있습니다.
 예를 들어 스트립트는 녹색 글자로  표시되며, 링크는 파랑으로 표시되고, <dl><dd><ul><li>와 같은 목록 태그는 녹색 바탕, 테이블은 하늘색 바탕 등 으로 성격에 따라 다른 색으로 표시됩니다.

불필요한 부분은 클릭하면

이렇게 접혀 소스를 분석하기 편하게 된다.

게다가 소스를 분석하는데 방해가 되는 불필요한 박스의 경우 클릭하면 접혀 소스를  더욱 보기 편하게 만들 수 있습니다.

 이 확장기능은 한글지역화를 한 것이 2년여 전으로 좀 된 확장기능으로 그동안 재미있는 일화가 있습니다.
대부분의 확장기능들은 무료로 배포되지만 이 확장기능은 좀 특이하게 한동안 최신버전은 유료로 배포되었습니다. FF2.x까지 동작하는 버전만 무료로 공개하고 FF3.x에서 돌아가는 최신버전은 제작자의 사이트에 방문해 구입해야했죠.

그러던 것이 다시 무료로 배포되었습니다.
그동안 얼마나 많이 팔렸는지는 잘 모르겠습니다만, 요즘 확장기능 공식배포처인 addons.mozilla.org에서 후원금 모금을 지원하고 있으니 유료 판매보다 후원금을 모금받는 것이 더 좋은 방법이었지 않았나 싶네요.