웹 개발자를 위한 필수 브라우저 툴

출처 : http://www.kimdirector.co.kr/bbs/view.php?id=webdesign&no=289

 

웹디자이너와 웹 개발자 또는 웹퍼블리셔들에게 도움이 되는 내용일 것 같습니다. 해외에서 많이 사용하고 있는 사례이기는 하지만, 국내에서의 웹 디자이너와 개발자에게도 필요한 툴이 있을 것 같기도 합니다. 아래에 소개하고 있는 대부부의 툴이 구글 크롬과 익스플로러, 파이어폭스의 확장형 툴들입니다. 물론 오픈형 소스이기도 하구요. 저도 몇가지 사용하고 있는 툴이 있어서 기분이 좋습니다. 다 사용할 필요는 없겠지만, 나름대로 쓸만한 툴들도 눈에 들어오네요. 

 

웹사이트 제작이나 개발을 하다보면 생각지도 못한 부분에서 확장형 툴들이 도움이 되기도 합니다. 저의 경우에는 구글 크롬이 기본 브라우저도 되어 있으서 필요에 따라서 또는 뭔가 새로운 툴이 업데이트 되었는지 살피기 위해 "Crome Web Store"에 자주 가는 편입니다. 요즘에는 클라우드가 기본시 되는 경우가 많아서 태블릿과 스마트폰, PC 모두 동시에 동기화가 되기 떄문에 더욱 많이 찾게 되는 것 같습니다.

 

아래에 소개하는 브라우저 툴 소개 원문은 ITWorld에서 퍼온 전문 내용이고, 모두 17가지를 소개하고 있습니다.

모두 좋은 툴이기는 하지만 개인적인 성향에 따라, 필요에 따라 접해 보는 것도 나쁠 것 같지는 않습니다. 

 

웹 개발자를 위한 필수 브라우저 툴

 

웹 디자이너와 개발자에게 브라우저 내에서 사용할 수 있는 가장 유용한 툴은 무엇일까? 전문가가 추천하는 툴을 살펴보자.

 

파이어버그(Firebug)

고전의 반열에 오른 파이어폭스용 파이어버그는 HTML이 포함된 창(왼쪽 아래)과 CSS 데이터가 포함된 창(오른쪽 아래)으로 페이지 코드를 표시해 사용자가 HTML을 변경하거나 다양한 스타일을 즉석에서 실험해볼 수 있도록 한다(다른 브라우저용 북마크릿(bookmarklet)으로도 제공된다).

 

웹 디벨로퍼(Web Developer)

크롬과 파이어폭스용 애드온으로 나온 웹 디벨로퍼는 페이지와 연결된 스타일시트를 보여준다. 또한 스타일시트를 편집하고 실제 웹 사이트 코드에 변경 사항을 적용하기 전에 편집 결과를 신속하게 확인할 수 있다.

 

구글 크롬 디벨로퍼 툴(Google Chrome Developer Tools)

크롬 브라우저에 내장된 크롬 디벨로퍼 툴을 사용하면 실제 사이트를 변경하지 않고도 변경이 적용된 웹 페이지를 브라우저에서 신속하게 확인할 수 있다. 클릭지(Clickzy)의 제이슨 힙웰이 컴퓨터월드 웹 사이트로 실험한 결과 몇 번의 클릭만으로 배경과 로고를 바꿀 수 있었다.

 

자바스크립트 디미니피어(JavaScript Deminifier)

자바스크립트 디미니피어 파이어폭스 애드온을 사용하면 압축된 자바스크립트 파일의 내용을 보고 신속하게 문제를 해결할 수 있다. 왼쪽의 스크린샷은 브라우저에서 자바스크립트 내용의 소스 보기를 선택할 경우 표시되는 화면이고, 두 번째 스크린샷은 JS 디미니피어 버튼을 클릭할 경우 표시되는 화면이다.

 

폰트 파인더(Font Finder)

크롬, 파이어폭스, 사파리 5용으로 제공되는 이 애드온은 웹 페이지의 원하는 텍스트 요소에 사용된 글꼴, 색, 글자 간격과 같은 정보를 보여주며, 이런 특성을 변경하거나 복사해서 다른 페이지에 적용하는 기능도 제공한다.

 

메저잇(MeasureIt)

크롬, 파이어폭스, 사파리용 메저잇을 사용하면 화면에 표시되는 물체를 둘러싸는 상자를 그려서 해당 개체의 픽셀 크기를 신속하게 측정할 수 있다. 스크린샷에서 Hulu.com의 주 이미지의 크기가 이미지 오른쪽, 'battleground'라는 단어 바로 위에 표시된 것을 볼 수 있다.

 

컬러질라(ColorZilla)

파이어폭스, 크롬용 컬러질라 애드온은 스포이트 개념을 차용해 웹 사이트의 색(예를 들어 컴퓨터월드 홈 페이지에 있는 안드로이드 이미지의 색 등)을 판별하며 색을 조정하거나 다른 곳에 복사해 붙여넣을 수 있는 기능을 제공한다.

 

플래시블럭(Flashblock)

파이어폭스용 플래시블럭(크롬용으로도 비슷한 플래시블럭 애드온이 있음)은 웹 페이지의 플래시 요소가 자동으로 로드되지 않도록 하고, 각 플래시 개체 자리에 버튼을 표시한다. 이 버튼을 클릭하면 해당 플래시가 실행된다. 웹 개발자는 플래시블럭을 통해 플래시를 사용하지 않는 사람의 브라우저에서 페이지가 어떻게 보이는지 확인할 수 있다.

 

와이슬로우(Yslow)

속도 측정기가 필요한가? 파이어폭스, 크롬, 사파리, 오페라용 와이슬로우 애드온은 웹 페이지 성능을 여러 범주별로 평가하고 전체적인 점수를 부여하며, 사이트 속도를 높이기 위한 구체적인 방법을 제시한다.

 

페이지 스피드(Page Speed)

크롬, 파이어폭스용 페이지 스피드는 여러 가지 기준에 대한 웹 페이지에 등급을 매기고 전체적인 점수를 부여한다. 노란색과 빨간색 깃발이 표시되는 항목은 개선의 여지가 있는 영역임을 나타낸다.

 

쇼IP(ShowIP)

파이어폭스용 애드온인 쇼IP는 브라우저 창 왼쪽 하단의 상태 표시줄에 현재 표시되는 웹 페이지의 IP 주소를 보여준다.

 

찰스(Charles)

HTTP 프록시 도구인 찰스는 예를 들어 Computerworld.com 홈 페이지의 트위터 위젯이 트위터 API에 대해 익명 호출을 수행하고 그 결과 JSON 응답이 반환되는 과정을 하단 창을 통해 세부적으로 보여준다.

 

IE 탭(IE Tab)

IE 탭 확장 기능은 크롬 또는 파이어폭스 브라우저 세션 내에서 탭으로 인터넷 익스플로러 세션을 만들어주므로 개발자는 인터넷 익스플로러 브라우저를 따로 실행하지 않고도 IE 호환성을 테스트할 수 있다. 각 인터넷 익스플로러 탭에는 IE 로고가 표시된다. 새 탭을 만들려면 크롬에서 오른쪽 상단 도구 모음의 렌치 공구 아이콘 왼쪽에 표시되는 IE 버튼을 클릭하면 된다.

 

크롬용 SEO

크롬용 SEO 확장 기능은 알렉사(Alexa) 퀀트캐스트(Quantcast), 구글 등 다양한 측정원에서 가져온 웹 페이지의 SEO 데이터를 종합해서 보여준다.

 

웹랭크 SEO(WebRank SEO)

크롬, 파이어폭스, 오페라, 사파리용 애드온으로 제공되는 웹랭크 SEO는 알렉사, 컴핏(Compete), 퀀트캐스트의 페이지 순위를 보여주고 웹 사이트의 백링크, 인기 있는 검색 엔진에 인덱싱된 페이지 수, 관련 소셜 네트워크 활동에 대한 정보를 제공한다.

 

SEO 툴바(SEO Toolbar)

파이어폭스 애드온인 SEO 툴바는 기본적인 SEO 측정치를 무료로 제공한다. 더 세부적인 측정치(SEOmoz의 사이트 익스플로러 페이지 오른쪽에 'PRO only'로 표시되는 항목들)를 보거나 드롭다운 메뉴에 표시되는 다른 도구를 활용하려면 SEOmoz Pro 사이트의 월별 유료 요금제 서비스에 가입해야 한다.

 

노터블(Notable)

온라인 협업 서비스인 노터블은 웹 페이지를 구성 요소별로 분할하고 이 구성 요소의 이미지를 업로드해서 다른 사람들과 공유할 수 있도록 한다. 그러면 협업 참여자는 각 섹션에 의견을 첨부할 수 있다.