웹사이트를 개발할 때는 수많은 복잡한 요구 사항을 체크리스트로 정리해야 합니다. 색상과 폰트 구성, CSS 레이아웃 문제, 다양한 기기에서의 반응형 웹 대응까지, 새로운 이슈가 발생할 때마다 빠르게 파악하고 해결하는 것이 중요합니다. 아래에서는 구글 크롬(및 크로미움 기반 브라우저)에서 활용할 수 있는 최고의 웹 개발 확장 프로그램 11가지를 소개합니다.
1. Color Pick Eyedropper
어떤 웹페이지의 색상 조합이 마음에 들어 자신의 프로젝트에 활용하고 싶었던 적이 있나요? 'Color Pick Eyedropper'라는 크롬 확장 프로그램을 사용하면 조정 가능한 줌 기능과 함께 색상을 정밀하게 추출할 수 있습니다.
이런 유형의 확장 프로그램은 색상 추출을 위해 모든 사이트에 대한 접근 권한이 필요합니다. 좀 더 고급 기능을 원한다면 그라디언트 생성기, 팔레트 뷰어, 색상 기록 기능을 갖춘 ColorZilla라는 유사 도구도 좋은 선택입니다.
2. One-Click Full Page Screenshot
전체 페이지 스크린샷 촬영은 일상 업무에서 꼭 필요한 작업입니다. 디자인 변경 사항을 전달하는 가장 효과적인 방법은 웹사이트 전체를 있는 그대로 캡처하는 것일 때가 많습니다. 'One Click Full Page Screenshot' 확장 프로그램을 사용하면 이 작업을 손쉽게 처리할 수 있습니다.
스크린샷 캡처가 진행되는 동안 스크롤 이미지가 완성되면, 완료된 결과물이 새 창으로 열립니다.
완성된 전체 웹페이지 화면은 PNG 형식으로 바로 다운로드할 수 있습니다. 또한 필터 적용, 웹페이지 위에 그리기, 텍스트 추가 등 다양한 효과를 이미지에 적용할 수도 있습니다.
3. EditThisCookie
웹 개발자라면 쿠키를 추가, 삭제, 편집, 보호, 차단하기 위해 쿠키 관리 도구가 필요합니다. EditThisCookie는 쿠키를 자유롭게 다루고 JSON 형식으로 내보내거나 가져올 수 있는 유용한 확장 프로그램입니다. 오래된 쿠키를 제거하고 쿠키의 최대 만료 날짜를 제한함으로써 웹사이트를 안정적으로 유지하는 데 큰 도움이 됩니다.
4. ModHeader
ModHeader는 웹페이지의 HTTP 헤더를 수정할 수 있는 가장 인기 있는 크롬 확장 프로그램 중 하나입니다. 한두 번의 클릭만으로 URL 또는 리소스 유형에 따른 헤더 수정을 활성화할 수 있습니다. 특히 여러 프로필을 만들어 수정된 헤더에 서로 다른 값을 지정할 수 있다는 점이 강점입니다. 모든 수정 사항은 하나의 탭에만 적용하거나 사이트 전체에 적용하도록 설정할 수 있습니다.
5. UX Check
누구나 운영 중인 웹사이트에 대해 휴리스틱 평가가 필요할 때가 있습니다. UX Check는 UX 관련 피드백을 사이드 패널에 표시해 주는 확장 프로그램으로 이 과정을 간편하게 만들어 줍니다. 평가 기준에 맞지 않는 요소를 클릭하면 메모를 추가하고 스크린샷을 남길 수 있으며, 최종적으로 모든 결과를 .docx 형식으로 내보낼 수 있습니다.
6. Window Resizer
웹 개발자는 다양한 화면 크기에서 웹페이지를 에뮬레이션해야 합니다. Window Resizer를 사용하면 노트북, 태블릿, 스마트폰은 물론 직접 지정한 임의의 화면 크기까지 손쉽게 테스트할 수 있습니다.
이 도구에는 '회전(Rotate)'과 '실시간 측정(Live Measurement)' 같은 실용적인 기능과 함께 다양한 시각적 커스터마이징 옵션이 포함되어 있습니다. 진정한 반응형 웹사이트를 만들고 싶다면 모든 화면 크기에서 외관을 반드시 점검하세요.
7. Lorem Ipsum Generator
웹페이지 작업을 빠르게 마무리하려면 기본 텍스트(더미 텍스트)가 필요합니다. Lorem Ipsum Generator 확장 프로그램은 단락 수와 단락당 문장 수를 다양하게 조절할 수 있는 여러 기본 텍스트 옵션을 제공합니다. '자동 선택(Auto select)' 옵션으로 텍스트 일부분 또는 전체를 손쉽게 선택할 수 있습니다. 텍스트 변형의 폭이 넓어 최종 템플릿도 세련된 느낌을 줍니다.
8. BuiltWith Technology Profiler
BuiltWith는 웹사이트를 지탱하는 모든 기반 기술을 파악할 수 있는 검증된 확장 프로그램입니다. 클릭 한 번으로 프로필을 생성하여 해당 웹사이트를 돋보이게 만드는 최신 애드온과 도구들을 알려줍니다. 이를 통해 그 기능들을 참고해 자신의 프로젝트에 그대로 응용할 수 있습니다.
9. WhatFont
WhatFont는 웹페이지에서 사용된 다양한 폰트를 식별하는 가장 빠르고 간편한 방법 중 하나입니다. 텍스트 위에 마우스 커서만 올리면 폰트의 상세 정보를 즉시 확인할 수 있습니다. TypeKit과 Google Font API 같은 고급 폰트 서비스도 지원합니다.
10. CheckMyLinks
때로는 웹사이트의 모든 링크에 대한 객관적인 요약이 필요합니다. CheckMyLinks는 유효한 링크, 유효하지 않은 링크, 깨진 링크를 한눈에 정리해 주는 인기 확장 프로그램입니다. 실행 중인 웹사이트의 링크 검사 결과는 사이드 패널에서 즉시 확인할 수 있습니다. 웹사이트 게시 전이나 변경 사항 배포 직전의 마지막 점검에 매우 유용한 도구입니다.
11. Pesticide
웹사이트에서 CSS 레이아웃 문제가 예상되나요? Pesticide는 모든 페이지 요소에 외곽선(outline)을 표시해 이러한 문제를 손쉽게 디버깅할 수 있게 해줍니다. Ctrl 키를 누른 상태에서 요소 정보를 확인하고 해당 요소가 페이지에서 어떻게 배치되어 있는지 분석할 수 있습니다.
웹 애플리케이션의 핵심 세부 사항을 관리하는 인기 확장 프로그램은 이 밖에도 많습니다. 예를 들어 JSON 파일을 다루는 개발자에게는 JSON Viewer가 유용하며, 웹사이트의 모든 요소를 트리 구조로 시각화해 주는 HTML Tree Generator도 있습니다.
위에서 소개한 것 외에도 브라우징 속도를 개선해 주는 다양한 크롬 확장 프로그램이 있습니다. 함께 살펴보세요!