2020년 웹 디자이너를 위한 상위 15개 Chrome 확장 프로그램

Google 크롬은 가장 널리 알려진 웹 브라우저이며, Google에서만 제작했기 때문이 아닙니다. 웹 브라우저 시장 점유율 목록에서 확고한 리더이며 가장 가까운 라이벌인 Mozilla Firefox보다 45% 이상 앞서 있습니다. Chrome과 같은 iOS 버전인 WebKit(Safari)으로 모바일 웹 브라우저 시장에서 공동 선두를 달리고 있습니다. Chrome은 수많은 기술을 지원하는 견고하고 안정적인 JavaScript 엔진으로 유명합니다. 특히 Node.js 프레임워크는 Google Chrome을 구동하는 엔진을 기반으로 합니다.

Chrome은 그 자체로 모든 종류의 평판을 얻습니다. 일부는 보안 및 심층 도구의 부족을 비난하기로 선택합니다. 그러나 더 큰 그림에서 Chrome보다 더 나은 브라우저를 상상하는 것은 어렵습니다. 속도, 확장성, 성능 및 개발자 도구와 같은 요소는 웹 디자이너와 웹 개발자 모두가 장기적 전략을 위해 Chrome을 계속 사용하도록 합니다.

Google 크롬 확장 프로그램의 안전 및 개인 정보 보호에 대해 많은 논의가 있었습니다. 그러나 결국 커뮤니티에 좋은 것을 제공하고자 하는 신뢰할 수 있는 개발자와 신생 기업의 신중한 확장 선택입니다. Chrome 기능의 확장으로 인해 개발자는 확장 프로그램을 구축하는 데 필요한 툴킷과 기능을 제공하여 생산성을 높이고 더 중요하게는 브라우저에서 구축할 수 있는 접근성을 높일 수 있습니다.

프론트엔드 개발자는 브라우저와 모바일 웹용 웹사이트와 앱을 구축할 때 IDE와 유사한 매우 유연한 경험을 제공하기 때문에 Chrome을 사용하는 가장 큰 승자입니다. 우리는 디자이너를 위한 최고의 15가지 Google 크롬 확장 프로그램을 다룰 것이며, 그 중 일부는 개발자에게도 유용할 것입니다. 이 목록은 현재 웹에서 가장 인기 있는 커뮤니티 포럼에서 디자이너들이 공유한 연구를 기반으로 하며 편견이 없습니다.

사용자 에이전트 스위처

사용자 에이전트는 페이지에 대한 각각의 새로운 요청 내에서 보내는 지문입니다. 그러면 웹사이트는 사용자 에이전트를 감지하고 브라우저 기능에 따라 적절한 버전의 웹사이트를 제공할 수 있습니다. 이것은 누군가가 데스크탑 또는 모바일 장치에서 웹 사이트를 탐색하는지 여부를 결정하는 웹 사이트의 표준 기술입니다. User-Agent Switcher 확장을 사용하면 User-Agent를 다른 브라우저나 모바일 장치로 변경할 수 있으므로 이러한 장치와 브라우저에 디자인이 표시되는 방식을 빠르게 실험할 수 있습니다. 개발자가 앞뒤로 전환해야 하는 시간을 절약하여 생산성을 높이는 데 도움이 되는 강력한 기능을 갖춘 작은 확장입니다.

GoFull페이지

웹 디자인 작업을 하거나 웹사이트의 전체 화면을 캡처하여 클라이언트를 보여주고 싶을 때 GoFullPage를 사용하는 것이 좋습니다. 웹 디자이너를 위한 사용이 간편한 이 Chrome 확장 프로그램은 자명합니다. 간단히 말해서 이 도구는 현재 보고 있는 전체 페이지를 캡처합니다. 버튼만 누르면 다른 옵션을 확인할 필요가 없습니다. 그 외에도 키보드 단축키를 사용하여 GoFullPage가 작동하도록 할 수도 있습니다.

이 확장 프로그램이 페이지를 부분적으로 캡처한 다음 이미지(PNG, JPG) 또는 PDF를 다운로드할 수 있는 새 탭을 여는 것을 볼 수 있습니다. 물론 바탕 화면에 끌어다 놓기만 하면 됩니다. 단순한 블로그든 복잡한 웹 사이트든 온라인 상점이든 GoFullPage는 땀 없이 모든 것을 캡처합니다.

구조시간

웹 디자인 작업에 있어 시간이 중요합니다. 결국, 당신이 대신 훨씬 더 양질의 일을 할 수 있을 때 주의를 산만하게 하는 데 집중하는 데 많은 시간을 보내고 싶지 않습니다. Chrome 확장 프로그램인 RescueTime 덕분에 하루 종일 Chrome에서 보낸 시간을 추적할 수 있습니다. 생산적이거나 비생산적입니까? RescueTime은 상황을 파악하는 데 도움이 되므로 그에 따라 시간을 관리할 수 있습니다.

그것은 당신이 소비하는 각 웹 사이트의 시간 추적에 관한 것이 아닙니다. RescueTime은 또한 페이지를 "매우 생산적" 및 "매우 산만함"으로 분류합니다. 또한 컴퓨터에서 멀어질 때도 인식합니다. 이 경우 추적을 중지합니다. 매일 Chrome에서 무엇을 하고 있는지 궁금하다면 RescueTime을 사용하여 작업에 소요하는 시간과 "확인하는 것"에 대해 더 잘 이해할 수 있습니다.

캐시 지우기

Chrome에는 자체 기능이 있지만 Clear Cache 확장 프로그램을 사용하여 캐시를 지울 때 속도를 높일 수 있습니다. 클릭 한 번으로 Chrome에 추가하고 즉시 사용할 수 있습니다. 캐시를 지울 때 도구는 추가 확인을 요청하지 않으며 팝업 및 기타 다른 작업을 생성합니다. 그러나 모든 데이터를 전역적으로 제거하려면 추가 권한이 필요합니다. 결국 실수로 모든 것을 청소하고 싶지는 않습니다.

또한 앱 캐시, 쿠키, 다운로드, 양식 데이터, 기록, 로컬 저장소 등 삭제하려는 항목을 쉽게 지정할 수 있습니다. 데이터를 지울 때 포함하거나 제외할 도메인을 설정할 수도 있습니다. Clear Cache는 기간도 지원합니다. 빠르고 간단하며, 이것이야말로 최고의 워크플로를 향상시킬 때 가장 중요한 것입니다.

자

웹사이트의 요소를 측정하는 데 도움이 되는 가상 눈금자를 갖고 싶습니까? 그렇다면 Ruler는 마술을 부리는 실용적인 Chrome 확장 프로그램입니다. 웹 디자이너로서 이 도구는 마우스 기술만 사용하여 각 페이지의 모든 것을 측정할 수 있으므로 각 요소의 크기를 파악할 때 매우 유용할 수 있습니다.

사이트에 눈금자를 추가하고 요소를 픽셀 단위로 측정할 수 있습니다. 또한 마우스 커서를 눈금자로 사용할 수도 있어 측정하려는 특정 모양을 그릴 수 있습니다. 페이지 자체의 크기와 치수에 대한 모든 필요한 정보를 픽셀 단위로 찾을 수 있습니다. 확장 프로그램을 추가하고 오른쪽 상단에 나타나는 버튼을 클릭하기만 하면 됩니다. 이제 페이지, 요소 및 구성 요소를 측정하는 가상 눈금자가 있습니다.

창 크기 조정

모든 기술 커뮤니티에서 500,000명 이상의 활성 사용자가 있는 Window Resizer 확장은 디자이너가 다양한 종류의 해상도를 스푸핑하여 이러한 해상도가 디자인과 상호 작용하는 방식을 더 잘 이해할 수 있도록 도와줍니다. 대다수의 인구를 대상으로 하는 웹사이트를 구축하는 것은 필수적입니다. 그리고 이 확장은 오류가 발생하기 시작할 수 있는 위치를 정확히 찾아내는 데 도움이 되므로 필요한 코드를 즉시 변경할 수 있습니다. 브라우저 창의 너비와 높이, 위치를 빠르게 변경할 수 있으며 라이브 코딩을 수행할 때 다양한 화면 해상도를 확인할 수 있는 기능을 크게 향상시키는 내장 단축 코드 기능이 있습니다.

WhatFont

수백만 개의 활성 웹 사이트와 우리가 매일 방문하는 수많은 새로운 웹 사이트에는 항상 우리의 시선을 사로잡는 무언가, 특정 위젯이나 동적 기능, 눈에 띄게 보이는 특정 글꼴이 있습니다. 그것에 대한 이름을 정하십시오. WhatFont 확장 프로그램을 사용하면 웹 사이트 페이지에서 글꼴을 빠르게 검사하고 글꼴 이름을 빠르게 배울 수 있으므로 검색을 시작할 수 있습니다. 그 외에도 WhatFont는 Google Fonts 또는 Typekit과 같은 프리미엄 또는 무료 서비스에서 제공되는 글꼴을 제공하는 데 사용되는 서비스의 종류를 이해하는 데 도움이 됩니다.

탭 패키지 도구

디자이너와 개발자는 모두 탭을 깨끗하고 체계적으로 유지하기 위해 고군분투합니다. 디자인 작업을 할 때 우리는 끊임없이 다른 소스, 연구 자료, 영감 작업 및 디자인을 완성하는 방법에 대한 예를 살펴보고 이러한 탭은 오히려 빨리 쌓이는 경향이 있습니다! Tab Packager를 사용하면 이제 모든 탭을 단일 URL로 패키징한 다음 해당 URL에서 액세스하는 간단한 방법을 즐길 수 있습니다. 이렇게 하면 각 탭이 무엇으로 구성되어 있는지 추측하기 위해 탭을 훑어보는 대신 목록으로 계속 돌아가 필요한 것을 빠르게 얻을 수 있으므로 생산성이 향상됩니다.

CSS-Shack

Photoshop은 레이어를 다루는 유일한 도구가 아닙니다. 사실 모든 프론트엔드 개발자는 CSS 구성에서 레이어를 처리해야 합니다. 웹 디자이너를 위한 이 Chrome 확장 프로그램을 사용하면 스타일 레이어를 만든 다음 해당 레이어를 CSS 파일로 내보내 더 쉽게 액세스할 수 있습니다. 몇 번의 클릭만으로 디자인, 와이어프레임 또는 버튼과 같은 간단한 요소를 빠르게 구축할 수 있습니다. 무작위 실험 및 샌드박스 테스트이든, 구축하려는 완전한 스타일 가이드이든 CSS-Shack은 해당 부서에서 도움이 되는 도구를 제공합니다.

플랫 컬러 가이드

FLAT 스타일 가이드를 사용하여 새로운 웹 디자인을 구축하지만 사용할 올바른 색상 코드가 확실하지 않습니까? 사용하기 쉬운 Flat Colors Guide 확장 기능으로 걱정이 금세 사라집니다. 확장 기능을 설치하고 확장 기능 버튼을 클릭하기만 하면 일반적으로 FLAT 디자인에 사용되는 색상을 로드할 수 있습니다.

컬러질라

ColorZilla는 Mozilla 브라우저에서 수백만 명의 활성 사용자를 보유하고 있습니다. 마지막으로, 이미 800,000명 이상의 활성 사용자를 축적한 Google Chrome 확장 프로그램도 사용할 수 있습니다. ColorZilla를 사용하면 주어진 페이지의 색상을 빠르게 평가할 수 있습니다. 그리고 이러한 색상을 사용하여 최적화하고 디자인을 구축하는 데 사용하는 다른 도구에 로드할 수 있습니다. 페이지 내 단일 픽셀의 색상에 쉽게 액세스하여 어떤 상황에서도 색상에 적합한 깊이를 제공합니다. 바로 가기를 사용하면 색상을 더 빠르게 조작하고 최적화할 수 있습니다.

스타일봇

Stylebot은 현재 탐색 중인 모든 웹사이트 및 요소의 CSS 코드를 조작하기 위한 라이브 편집 도구입니다. CSS를 사용하여 개별 요소를 빠르게 선택하고 모양을 변경할 수 있습니다. 자동화된 내장 도구를 사용하여 원하는 것을 변경하거나 나만의 CSS를 작성하세요. 이것은 CSS에 대해 더 많이 배우는 데 도움이 됩니다. 또한 라이브 편집이 작동하는 방식과 원하는 디자인 변경 사항을 얼마나 더 빨리 만들 수 있는지를 엿볼 수 있습니다. 150,000명 이상의 사용자가 있는 이것은 모든 웹 디자이너가 툴킷에 포함해야 하는 확장 기능입니다.

즐기기CSS

EnjoyCSS는 브라우저에서 바로 사용할 수 있는 웹 디자인 제품군 스튜디오입니다! 직접 선택한 모든 요소의 UI 설정을 관리할 수 있는 직접적인 CSS3 생성기입니다. 전환을 만들고, 요소를 변형하고, 그라디언트, 그림자 등으로 작업합니다. 또한 EnjoyCSS에는 요소에 직접 적용할 수 있는 미리 빌드된 변환 라이브러리가 있습니다.

에밋 라이브스타일

Emmet LiveStyle은 텍스트 편집기에서 CSS, LESS 또는 SCSS 파일을 편집하는 동안 웹 페이지 스타일시트를 즉시 업데이트합니다. 파일 저장 또는 페이지 새로고침 없음: 순수한 실시간 경험! 그리고 이것은 DevTools의 업데이트를 올바른 방식으로 소스 코드로 다시 전송하는 첫 번째 도구입니다. 이 확장에 대한 많은 리뷰에서 이 도구 없이는 웹 디자인 워크플로를 상상할 수 없다고 언급합니다.

웹 개발자

Mozilla Firefox에는 Google Chrome과 마찬가지로 자체 개발자 도구가 있습니다. 최근 몇 년 동안 일어난 일은 많은 Firefox 사용자가 Chrome으로 전환했다는 것입니다. 그러나 여전히 특정 부서에서 특정 기능이 누락되거나 부족한 느낌이 듭니다. 전환하는 사람들의 가장 큰 손실 중 하나는 Mozilla 개발자 도구의 손실입니다. 그리고 엄청난 수요가 있었기 때문에 몇몇 개발자들이 모여서 Chrome용 Firefox 개발자 도구의 정확한 미러를 구축했습니다. 이미 백만 명이 넘는 활성 사용자가 있는 이 확장 기능은 실제 환경에서 웹 디자인 작업을 위해 브라우저 툴킷을 확장하려는 기존 디자이너와 야심 찬 디자이너 모두에게 큰 성공을 거두었습니다.