크롬(Chrome)은 한때 전체 브라우저 시장의 약 25%를 차지하며 인터넷 익스플로러에 이어 두 번째로 많이 쓰이는 브라우저로 도약했고, 지금은 전 세계 웹 개발자들이 가장 사랑하는 사실상의 표준 브라우저로 자리 잡았습니다.
필자는 개인적으로 파이어폭스를 선호하지만, 사람들이 크롬을 사랑하는 이유는 충분히 이해할 수 있습니다. 크롬은 브라우저 벤치마크에서 대체로 앞서며, 일반 사용자도 쉽게 파워 유저가 될 수 있도록 도와줍니다. 반면 어떤 이들은 크롬을 그다지 좋아하지 않으면서도 특정 확장 프로그램 때문에 어쩔 수 없이 크롬을 쓰기도 합니다.
웹 개발자에게 크롬이 좋은 또 하나의 이유는 바로 크롬 웹 스토어와 그 방대한 확장 프로그램 생태계입니다. 웹사이트를 디자인하거나 코딩할 계획이 있다면, 지금 바로 설치해야 할 필수 도구들을 소개합니다.
ColorZilla – 컬러 피커의 모든 것
ColorZilla는 원래 파이어폭스 애드온으로 시작했지만, 인기가 워낙 높아 많은 사용자가 크롬 버전을 요청했고 그렇게 탄생했습니다. 이 확장 프로그램은 기본적으로 Paint나 Photoshop 같은 프로그램에서 볼 수 있는 스포이드(eyedropper) 도구의 고급 버전입니다.
브라우저 화면의 아무 곳이나 가리키면 해당 지점의 색상 정보를 즉시 추출할 수 있습니다. 추출한 색상은 RGB, HSV, HEX 등 원하는 방식으로 조정한 뒤 클립보드에 복사하면 됩니다. 사용법도 매우 간단합니다.
여기에 CSS 그라디언트 생성기, 웹페이지 색상 분석기, 미리 설치된 색상 팔레트까지 함께 제공됩니다.
Window Resizer – 다양한 해상도 테스트
웹 개발자의 숙제 중 하나는 모든 기기에서 쾌적한 열람 경험을 보장하는 것입니다. 모바일과 데스크톱의 차이만큼이나 작은 태블릿과 대형 모니터 사이의 차이도 신경 써야 하죠.
Window Resizer는 브라우저 창 크기를 즉석에서 손쉽게 조절할 수 있게 해주는 도구입니다. 버튼 한 번으로 다양한 해상도에서 웹사이트를 테스트해 사용자가 실제로 보는 화면을 확인하고, 그에 맞게 조정할 수 있습니다.
IE Tab – 인터넷 익스플로러 호환성 확인
웹 개발자에게 또 다른 큰 난관은 브라우저 표준(혹은 표준의 부재)입니다. 인터넷 익스플로러, 파이어폭스, 크롬, 오페라 등 여러 브라우저는 같은 웹사이트를 조금씩 다르게 렌더링하며, 어떤 브라우저는 표준을 따라잡는 속도가 느립니다.
특히 인터넷 익스플로러의 경우 표준은 무시된 채, 웹 개발자들은 각종 예외 처리를 강요당하며 머리를 쥐어뜯곤 했습니다.
IE Tab은 이 과정을 조금이라도 덜어줍니다. 새 크롬 탭에서 웹사이트를 열되, 마치 인터넷 익스플로러에서 보는 것처럼 렌더링해 보여줍니다. IE 문제의 혁신적인 해결책은 아니지만, 그래도 없는 것보다는 낫습니다.
Validity – HTML 유효성 검사
모든 HTML 코드가 동일하게 작성되는 것은 아닙니다. 표준 준수에는 브라우저의 역할이 크지만, 좋은 HTML 관행을 지키는 책임 역시 웹 개발자에게 있습니다. 그래서 HTML을 테스트하고 검증하는 도구가 필요합니다.
Validity는 서드파티 사이트를 일일이 방문할 필요 없이 이 모든 작업을 처리해 주는 확장 프로그램입니다. 웹사이트를 연 상태에서 버튼만 클릭하면, 유효하지 않은 HTML 메시지가 브라우저 콘솔에 표시됩니다. 검증은 W3C Validation Service를 통해 이루어집니다.
BuiltWith – 웹사이트 기술 스택 분석
웹 개발에서 질리는 점 하나는 사용할 수 있는 라이브러리, 프레임워크, 엔진이 너무나 많다는 것입니다. 선택의 자유는 좋지만, 기술의 종류가 너무 많아져 도무지 따라갈 수 없다면 고통스러운 일이죠.
어떤 웹사이트를 방문하다가 "이 사이트는 대체 어떤 기술로 만들어졌을까?" 궁금해 본 적 있으신가요?
BuiltWith 확장 프로그램은 버튼 하나로 현재 페이지를 분석해, 해당 사이트를 구동하는 모든 웹 라이브러리·프레임워크·엔진은 물론 광고 네트워크, 콘텐츠 배포 플랫폼, 심지어 호스팅 소프트웨어까지 알려줍니다.
Postman REST Client (더 이상 제공되지 않음)
REST API를 다루는 개발자라면 Postman은 효율적인 워크플로를 위한 필수 도구였습니다. HTTP 요청을 구성하고 JSON, XML 형식의 응답을 받을 수 있으며, 응답은 별도 창에서 HTML로 열렸습니다.
여러 요청을 '컬렉션'으로 묶어 체계적으로 관리할 수도 있고, 확장 프로그램 안에서 환경 변수를 전환하며 여러 환경에서 테스트할 수도 있었습니다. 참고로 Postman은 현재 독립형 데스크톱 앱과 웹 버전으로 제공되고 있으니, API 테스트가 필요하다면 해당 버전을 이용하세요.
Corporate Ipsum – 더미 텍스트 생성
채울 텍스트(filler text)를 만드는 한 가지 방법은 "asdf"를 백 번 복사해서 붙여넣는 것입니다. 훨씬 나은 방법은 Corporate Ipsum을 설치해 눈 깜짝할 사이에 더미 텍스트를 생성하는 것입니다.
로렘 입숨(Lorem Ipsum) 생성기는 여러 종류가 있지만, Corporate Ipsum의 매력은 브라우저 안에 바로 있다는 점입니다. 버튼 한 번이면 끝. 굳이 쓰지 않을 이유가 없죠. 이제 다시 웹사이트 코딩에 집중할 수 있습니다!
TabCloud – 탭 동기화 및 세션 저장
웹 개발은 때때로 여러 대의 컴퓨터에서 이루어집니다. 개발자에게 소스 컨트롤이 동기화의 기본 수단이지만, 여러 탭을 컴퓨터 간에 옮기고 싶다면 어떻게 할까요? 그럴 때 TabCloud가 빛을 발합니다.
TabCloud는 열려 있는 탭을 클라우드에 동기화해 다른 곳에서 다시 열 수 있게 해줍니다. 로컬에서는 세션 세이버처럼 활용해 나중에 다시 볼 탭 묶음을 저장해 둘 수도 있습니다. 탭은 구글 계정에 저장됩니다.
WhatFont – 폰트 즉시 확인
폰트 디자인은 웹 개발의 중요한 축입니다. 그래서 구글 웹 폰트(Google Web Fonts) 같은 서비스가 크게 유행했습니다. 다행히 이런 무료 폰트들은 지금 가장 아름다운 웹 폰트들에 속합니다.
하지만 솔직히 인정하세요. 웹 서핑 중 처음 보는 멋진 폰트를 발견한 적이 분명 있을 겁니다. 폰트를 확인하는 방법은 여러 가지지만, 가장 빠른 방법은 WhatFont입니다. 이 확장 프로그램이면 폰트 위에 마우스를 올리기만 해도 바로 확인할 수 있습니다. 이보다 쉬울 수 있을까요?
Awesome Screenshot (더 이상 제공되지 않음)
스크린샷이 웹 개발 루틴의 일부가 아니라면, Awesome Screenshot이 그 습관을 바꿔줄 것입니다. 스크린샷은 디자인 변경 사항을 기록하거나 진행 중인 작업을 클라이언트나 팀원과 공유할 때 매우 유용합니다.
이 확장 프로그램은 전체 페이지, 선택 영역, 보이는 영역 등 다양한 캡처 기능을 제공합니다. 주석 달기, 이미지의 민감한 부분 흐림 처리, 원클릭 공유도 가능하고, 구글 드라이브에 바로 업로드할 수도 있습니다.
개념이 마음에 드는데 더 강력한 데스크톱 프로그램을 원한다면, 스크린샷 도구 비교 자료를 참고해 자신에게 맞는 도구를 찾아보세요.
Check My Links – 깨진 링크 점검
방문자를 짜증 나게 하는 웹 개발 오류 중 최악은 단연 깨진 링크입니다. 하나 정도는 참아질 수 있지만, 그 이상이 되면 웹사이트의 신뢰도와 평판이 떨어지기 시작합니다. 다행히 이 실수는 쉽게 예방할 수 있습니다.
Check My Links는 이름 그대로 링크를 점검해 줍니다. 정상 링크는 초록색, 깨진 링크는 빨간색으로 표시되고, 마지막에는 백분율 점수까지 알려줍니다. 이후 남은 일은 깨진 링크를 고치는 것뿐입니다!
당신이 쓰는 확장 프로그램은?
생산성 관련 확장 프로그램으로 하나 더 추천하고 싶은 것은 StayFocusd입니다. 웹 개발 전용이라기보다는 범용 확장 프로그램이지만, 그만큼 유용합니다. 작업 중 웹서핑에 빠져 산만해지는 것을 막아주거든요!
이 확장 프로그램들에 대해 어떻게 생각하시나요? 그 외에 추천하고 싶은 필수 웹 개발 확장 프로그램이 있다면 아래 댓글로 공유해 주세요!