프로그래머인데도 Chrome을 사용하지 않는다면, 그것은 소수에 속하는 셈입니다.
개발 작업에서 Chrome이 선호되는 데에는 여러 가지 이유가 있습니다. 웹의 방향성을 주도하는 Google의 막대한 영향력, 개발 과정을 한결 수월하게 만들어주는 기본 내장 기능, 그리고 무엇보다 방대한 확장 프로그램 생태계까지 말입니다.
마지막 요소가 특히 중요합니다. Chrome은 데스크톱 브라우저 시장 점유율의 압도적인 비중을 차지하고 있기 때문에, 대부분의 확장 프로그램 개발자들이 Chrome을 우선적으로 지원하는 것은 당연한 일입니다. 그렇다면 어떤 분야의 개발자든, 특히 웹 개발자라면 반드시 활용해야 할 최고의 Chrome 확장 프로그램들을 살펴보겠습니다.
일반 개발용 확장 프로그램
1. Session Buddy
Chrome에는 '커스텀 사용자 프로필'이라는 훌륭한 기능이 있어 북마크, 설정, 탭, 방문 기록 등을 목적별로 분리해서 관리할 수 있습니다. 아직 만들지 않았다면 프로그래밍 전용 프로필을 하나 설정해두는 것이 좋습니다.
Session Buddy는 여기서 한 단계 더 나아갑니다. 특정 '탭 세션'을 저장해두고 필요할 때 자유롭게 전환할 수 있어, 여러 프로젝트를 동시에 진행할 때 특히 유용합니다.
2. iMacros for Chrome
iMacros는 반복적인 작업을 자동화해주는 확장 프로그램입니다. 마우스 클릭이나 키 입력 같은 동작을 '녹화'하여 매크로로 저장한 뒤, 원할 때 클릭 한 번으로 실행할 수 있습니다. 폼 입력이나 변경 사항 테스트처럼 반복되는 작업에서 상당한 시간을 절약해줍니다. Chrome 외부 환경의 매크로가 필요하다면 AutoHotkey 스크립트를 추천합니다.
3. Web Timer
Web Timer는 각종 웹사이트에 소비(혹은 낭비)하는 시간을 추적해주는 도구로, 미루는 습관을 줄이는 데 큰 도움이 됩니다. Chrome이 활성화된 상태일 때만 측정하며, 사용자가 자리를 비운 유휴 상태임을 감지하면 자동으로 추적을 멈추는 똑똑함도 갖추고 있습니다.
더 강력한 시간 관리 도구를 원한다면 크로스 플랫폼을 지원하는 Toggl을 적극 추천합니다.
4. Awesome Screenshot
Awesome Screenshot은 스크린샷 캡처, 화면 녹화, 이미지 주석 및 흐림 처리, 원클릭 공유까지 모두 처리할 수 있는 올인원 확장 프로그램입니다. 특히 웹페이지 전체를 스크롤 끝까지 캡처하여 하나의 거대한 이미지로 합쳐주는 기능이 인상적입니다. Chrome 밖에서도 사용 가능한 캡처 솔루션이 필요하다면 별도의 스크린샷 도구를 찾아보는 것도 좋습니다.
5. Marmoset
Marmoset은 코드를 3D 스크린샷으로 만들어주는 재미있는 도구입니다. 캡처한 이미지를 3D 공간에서 회전하고 왜곡하고 크기를 조절할 수 있어, 코드 조각을 공유할 때 훨씬 눈길을 끕니다. 코드 기반 스톡 이미지 제작이나 프로젝트 홈페이지에 소스 코드 미리보기를 넣을 때도 활용도가 높습니다.
웹 개발용 확장 프로그램
6. Web Developer
웹 개발 보조용으로 단 하나의 확장 프로그램만 설치할 수 있다면 이것을 선택하세요. Web Developer에는 JavaScript와 플러그인 원클릭 on/off, 반응형 디자인 테스트를 위한 창 크기 조절, 이미지 테스트 및 디버깅 등 편리한 기능이 가득 담겨 있습니다.
7. User-Agent Switcher
Chrome 웹 스토어에 수많은 'User-Agent 스위처' 확장 프로그램이 있지만, 그중에서도 이것이 가장 뛰어납니다. 꾸준히 업데이트되고 있으며, 링크를 가로채지 않고, 다양한 기본 User-Agent 문자열을 제공하는 동시에 커스텀 문자열 생성도 지원합니다. 안정적으로 작동하는 거의 유일한 확장 프로그램이라 해도 과언이 아닙니다.
8. Wappalyzer
특정 사이트가 어떤 웹 기술로 구동되는지 알고 싶다면, Wappalyzer가 클릭 한 번으로 알려줍니다. CMS(예: WordPress), 웹 프레임워크(예: React), 각종 도구와 유틸리티(예: Google Analytics), 전자상거래 플랫폼(예: Shopify) 등을 정확하게 감지해냅니다.
9. IE Tab
여전히 상당수의 데스크톱 사용자가 Internet Explorer를 사용하고 있는데, IE는 현대 웹 표준과는 거리가 멀기 때문에 골치 아픈 문제입니다. 그래서 필요한 것이 IE Tab입니다. 새 탭에서 IE를 에뮬레이션하여 IE6, IE7, IE8, IE9 등 다양한 버전과 ActiveX 컨트롤까지 테스트할 수 있습니다. 아무리 오래된 브라우저라도 모두 호환되는 웹사이트를 만들어야 한다면 정말 유용한 도구입니다.
10. Click&Clean
웹사이트를 개발할 때 최신 변경 사항을 확인하기 위해 매번 브라우징 데이터를 삭제하는 일만큼 번거로운 일도 없습니다. Click&Clean은 이 과정을 빠르게 만들어줄 뿐 아니라, 데이터베이스와 플러그인 데이터 삭제, 특정 사이트의 쿠키 보존 등 세밀한 정리 옵션까지 제공합니다.
11. WhatFont
WhatFont는 웹에서 폰트를 식별하는 가장 빠른 방법입니다. 요소를 우클릭해 검사(Inspect)한 후 스타일시트를 뒤져가며 폰트를 찾는 대신, WhatFont를 사용하면 요소 위에 마우스를 올리기만 해도 폰트를 바로 확인할 수 있습니다. 심지어 해당 폰트가 Google Fonts나 TypeKit처럼 어떤 방식으로 서빙되는지까지 알려줍니다.
12. ColorPick Eyedropper
ColorPick Eyedropper는 웹페이지의 어느 픽셀이든 확대해서 정확한 색상 코드를 얻을 수 있는 도구입니다. 색상 코드는 HEX, RGB, HSL 형식으로 제공됩니다. 스타일시트를 검사해 색상을 찾거나 이미지를 내려받아 편집기에서 색을 추출하는 것보다 훨씬 빠르고 편리합니다.
13. Lorem Ipsum Generator
웹사이트를 개발하다 보면 결국 더미 텍스트가 필요해집니다. 웹에는 로렘 입숨 생성기가 넘쳐나지만, Lorem Ipsum Generator는 현재 탭에서 즉시 사용할 수 있다는 장점이 있습니다. 속도가 빠르고, 문단 수와 문단당 문장 수도 자유롭게 조절할 수 있습니다.
14. Check My Links
웹 개발 프로젝트를 마무리할 때는 핵심 페이지를 최종 점검하며 모든 링크가 정상 작동하는지 확인해야 합니다. Check My Links는 이 과정을 최대한 간편하게 만들어줍니다. 버튼을 클릭하면 현재 페이지의 모든 링크를 스캔한 뒤, 정상 링크와 깨진 링크를 색상으로 구분해 표시해줍니다.
15. Dimensions
Dimensions는 엄밀히 말하면 웹 개발보다는 웹 디자인용 도구지만, 두 분야가 겹치는 경우가 많기 때문에 설치해두면 좋습니다. 텍스트, 이미지, 동영상, 폼 필드 등 웹 요소 사이의 거리를 즉시 측정할 수 있으며, 마우스 커서부터 각 요소까지의 거리도 잴 수 있습니다.
추가로 활용하면 좋은 Chrome 확장 프로그램
위에 소개한 것들 외에도 탭 관리용 Chrome 확장 프로그램과 업무 생산성 향상용 Chrome 확장 프로그램을 적극 추천합니다. Chrome으로 개발하면서 느끼는 불편함 두 가지를 해결해줄 수 있는 부분입니다.
또한 보안부터 엔터테인먼트, 쇼핑, 일반 생산성까지 폭넓게 다루는 최고의 Chrome 확장 프로그램 모음도 함께 살펴보시기 바랍니다.