웹 디자이너를 위한 상위 10개 Chrome 확장 프로그램 및 도구

웹 개발(web development) 프로젝트 의 속도를 높이거나 협업하거나 감사하기 위해 유용한 도구가 필요한 디자이너라면 Chrome 확장 프로그램에는 다양한 도구가 있습니다.

이 목록은 디자인 작업(design work) 을 수행하는 모든 사용자가 키트 가방(kit bag) 에 가지고 있어야 하는 가장 인기 있고 일부는 필요하다고 주장하는 도구와 Chrome 확장 프로그램으로 구성되어 있습니다.

1. DomFlags

DOM 플래그(DOM Flags) 는 개발자가 브라우저 도구로 작업할 수 있는 새로운 방법을 제공하는 사용하기 쉬운 Chrome 확장 프로그램 입니다. (Chrome extension)이를 통해 개발자는 요소 스타일 지정 작업의 속도를 높일 수 있습니다.

각 요소에 대한 키보드 단축키를 사용하여 탐색을 북마크할 수 있습니다.

우리 모두는 매우 상세한 요소를 검사하는 데 어려움을 경험했으며 길을 잃기 쉽습니다.

DOM 플래그(DOM Flags) 를 사용하면 구성 요소를 자동으로 정확하게 검사하는 기능이 포함된 스타일 요소를 추적할 수 있습니다. 이는 결과적으로 DevTools 워크플로 및 구현(DevTools workflow and implementation) 속도를 높이는 데 도움이 됩니다 .

DOM 플래그(DOM Flags) 를 사용하면 변경 사항을 추적할 수 있습니다. 그리고 작업 중인 요소에 계속 초점을 맞추세요.

2. 시지

Sizzy 는 디자이너와 개발자에게 여러 뷰포트에서 사이트를 테스트할 수 있는 간단한 방법을 제공합니다.

Sizzy 는 실시간으로 디자인을 확인할 수 있는 간단한 방법을 제공합니다. 다양한 장치와 화면 크기에 대한 대화형 보기를 제공합니다. 장치 키보드(device keyboard) 를 시뮬레이션한 다음 가로 모드와 세로 모드(landscape and portrait modes) 간에 전환 할 수도 있습니다 .

Chrome 확장 프로그램(Chrome extension) 을 설치하면 툴바에 버튼이 추가되며, 이 버튼을 클릭하면 Sizzy 플랫폼(Sizzy platform) 에서 현재 URL 이 열립니다 . 확장 프로그램은 모든 " x-frame-options(x-frame-options) " 헤더 를 차단 하므로 모든 웹사이트를 온라인으로 볼 수 있습니다.

Sizzy 는 오픈 소스 프로젝트 이며 (source project)여기(here) 에서 전체 코드를 볼 수 있습니다 .

3. 체크봇

Checkbot 은 보안 문제에 대해 사이트를 테스트하고 웹사이트 페이지 로딩 속도를 감사할 수도 있습니다. 이것은 디자이너에게 일반적인 오류를 식별하는 수단을 제공하고 사이트 보안(site security) , 검색 엔진(search engine)사이트 속도(site speed) 의 개선을 권장 합니다.

50개 이상의 모범 사례 지표를 사용하여 모범 사례 SEO , 깨진 링크, 중복 콘텐츠(duplicate content) 등에 대해 웹사이트를 감사합니다 . 이 도구는 CSS(CSS) , JS 및 HTML 도 검증 합니다.

Checkbot은 디자이너와 코더의 오류(designer and coder errors) 를 실시간으로 찾아내어 반복적으로 작업을 다시 확인해야 하는 수고를 덜어줍니다.

깨진 페이지 링크를 수정하는 양질의 도구(quality tool) 를 찾고 있다면 고유한 콘텐츠와 페이지 제목(content and page titles) 을 확인 하고 리디렉션 체인을 제거하면 이 도구가 유용할 것입니다.

디자이너의 경우 CSS 및 JS를 최소화하고 CSS를 최소화하고 브라우저 캐싱을 활용하는 방법에 대한 권장 사항을 제공하는 데 도움이 (CSS)(CSS and JS) 있습니다 .

4. GistBox 클리퍼

GistBox 는 웹 디자이너에게 가장 유용한 Chrome 확장 프로그램 중 하나입니다.(Chrome)

GistBox 는 보고 있는 웹 페이지의 모든 코드 블록 에서 (code block)GitHub Gist 를 생성할 수 있습니다 .

코드 블록의 오른쪽 상단 모서리(right-hand corner) 에 작은 버튼이 표시됩니다. 이 버튼을 누르면 Gist 에 코드를 저장할 수 있는 팝업이 표시됩니다 .

마우스 오른쪽 버튼을 클릭하여 새로운 Gist를 생성하고 나중에 검사하고 사용할 수 있도록(inspection and use) 코드 블록을 저장할 수 있습니다 .

GitHub 와 통합 하면 디자이너와 개발자가 코드 블록을 수집하고 조작하거나 나중에 사용할 수 있도록 분류할 수 있습니다. 이를 통해 편리하고 효율적인 (convenient and efficient) Chrome 확장(Chrome extension) 도구가 됩니다.

5. 컬러질라

ColorZilla 는 개별 (ColorZilla)웹 디자인(web design) 프로젝트 에 대해 태그를 지정하고 레이블을 지정하고 분류할 수 있는 16진수 코드를 수집하는 데 매우 유용한 Chrome 확장 프로그램입니다 .

모든 웹 페이지에서 색상을 추출하고 ColorZilla 클립보드에 저장할 스포이드 도구를 선택할 수 있습니다.

이를 통해 나중에 사용할 수 있도록 색상 팔레트를 신속하게 개발할 수 있으며 웹 디자인 및 개발(design and development) 에서 일관되게 색상을 사용할 수 있습니다 .

ColorZilla 는 또한 이미지를 (ColorZilla)CSS 로 변환할 수 있도록 색상 분석기 및 CSS 그라디언트 편집기(gradient editor) 역할을 합니다 .

6. 왓폰트

 이 Chrome 확장 프로그램(Chrome Extension) 은 자신이 좋아하는 글꼴을 활용하고 자신의 웹 디자인 프로젝트(web design project) 에 통합하려는 사람들을 위한 진정한 시간 절약 기능입니다 .

WhatFont Chrome 확장 프로그램(WhatFont Chrome extension) 을 사용하면 개발자가 모든 웹 페이지의 거의 모든 글꼴을 빠르게 분석하고 식별할 수 있습니다.

확장 기능은 잘 개발되었으며 검사 도구를 열지 않고 글꼴 위로 마우스를 흔드는 것만으로 확장 기능이 작동합니다.

뿐만 아니라 확장 프로그램은 Pages go(Pages) 글꼴 을 제공하는 데 사용되는 서비스를 식별하고 Google 글꼴 API 및 Typekit을 지원합니다.(Google Font API and Typekit.)

7. 라이트샷

LightShot 은 페이지 전체 또는 일부를 캡처하여 업로드하거나 다운로드하거나 타사 대상(party destination) 으로 보낼 수 있는 빠른 스크린샷 도구(screenshot tool) 입니다 .

LightShot 으로 찍은 스크린샷 은 소셜 미디어에서 사용 및 공유하거나 인쇄할 수 있습니다.

화면의 선택된 부분에 텍스트, 화살표 등을 추가하고 주석을 달 수 있습니다. 그러나 웹 디자이너를 위한 이 간단한 도구의 가장 뛰어난 기능 중 하나는 이미지를 선택하여 온라인에서 유사한 이미지에 대한 전체 Google 이미지 검색을 진행할 수 있다는 것입니다.(Google image)

LightShot 은 여러 언어로 구성할 수 있습니다.

확장 프로그램은 순수 JavaScript 로 작성되었으며 (JavaScript)Windows , Chromebook , Linux 및 Mac OS(Linux and Mac OS) 에서도 작동합니다 . 또한 데스크톱 응용 프로그램(desktop application) 으로 액세스할 수 있으므로 여러 장치에 의존하는 웹 디자이너에게 탁월한 선택입니다.

8. 멋진 스크린샷

Lightshot 과 마찬가지로 Awesome Screenshot 은 화면 및 이미지 캡처 확장 프로그램입니다.

그러나 여러 가지 면 에서 Lightshot 과 다릅니다 . 멋진 스크린샷(Awesome Screenshot) 은 모든 스크린샷을 Google 드라이브(Google drive) 에 연결하도록 구성할 수 있습니다 .

전체 페이지를 캡처하기 위해 보기를 벗어난 요소를 스크린샷할 수 있습니다. 추가 편집 및 주석 도구(editing and annotation tools) 가 있습니다 . 쉼표를 사용하면 확장 프로그램 내에서 자르고 이미지를 편집할 수 있습니다.

데스크톱용 Chrome 애플리케이션(Chrome application) 을 설치하여 기능을 확장할 수도 있습니다 . 확장 프로그램은 또한 비디오 캡처 및 공유를 허용하므로 모든 사이트에서 작업할 때 다른 개발자 또는 디자이너와 공동 작업할 수 있습니다.

스크린샷에 이미지를 추가할 수 있을 뿐만 아니라 다른 사람에게 보여주고 싶지 않은 파란색 요소를 지우거나 요소 를 지울 수 있습니다.(blue or erase elements)

9. 캐시 지우기

Clear Cache Chrome 확장 프로그램(Cache Chrome Extension) 은 보고 있는 페이지의 쿠키와 캐시를 지울 수 있는 빠르고 간단한 도구입니다. 몇 가지 간단한 페이지 요소를 지우기 위해 브라우저의 설정 페이지로 이동할 필요가 없습니다.

여러 편집 작업을 수행하고 실시간으로 보고 싶은 웹 디자이너에게 이것은 오래된 데이터를 보는 데 따른 많은 좌절감을 없애줄 훌륭한 도구입니다.

캐시와 쿠키를 지워야 할 때가 있지만 Chrome 설정으로 이동하는 것은 지루합니다. 캐시(Cache) 지우기 를 사용하면 버튼 클릭으로 캐시와 전역 또는 로컬 쿠키를 지울 수 있습니다.

캐시(Cache) 지우기 를 사용하면 페이지에서 지우고 싶은 요소를 구성할 수 있습니다. 변수(Variables) 에는 Cash , 다운로드, 모든 시스템, 양식 데이터, at Cash , 인덱스 데이터베이스(index database) , 플러그인 데이터, 비밀번호 등이 포함됩니다.

10. 웹 개발자 구글 크롬 확장 프로그램

웹 개발자 Google Chrome 확장 프로그램 을 사용하면 개발자와 디자이너가 웹 페이지에서 모범 (Web Developer Google Chrome Extension)사례 디자인(practice design) , 코딩, 사용성 및 검색 엔진 최적화 위반 사항을 쉽게 감사, 분석 및 확인할 수 있습니다 .

그것은 우리의 리소스를 탐색하는 데 무겁지 않지만 웹 디자인에 유용한 수많은 정보를 제공하는 훌륭한 올인원 도구이며 웹 사이트 또는 페이지 내의 검색 엔진 최적화 요소도 담당합니다.(search engine optimization)

 확장 프로그램은 여러 웹 개발자 도구와 함께 도구 모음을 설치합니다.

이 도구는 여러 장치에서 사용하는 모범 사례(practice use) 와 충돌하는 페이지 크기, 너비 및 치수에 대한 표시를 제공합니다 . 임베디드 JavaScript 를 확인 하고 다양한 장치의 시뮬레이션을 통해 웹 사이트를 볼 수 있습니다.

확장 기능은 Windows , Linux 및 Mac OS에서 잘 작동합니다. 코딩 및 디자인 문제(coding and design issues) 외에도 메타 태그 정보(tag information) , 응답 헤더, 색상 정보(color information) 및 지형 정보에 대한 통찰력도 제공합니다 .

개발자 Chris Pedericks의 웹사이트(Chris Pedericks’ website) 에서 도구의 주요 기능과 전체 기능을 검토할 수 있습니다 .

의심할 여지 없이 웹 디자이너나 개발자(designer or developer) 가 사용할 수 있는 다른 고품질의 유용한 Chrome 확장 프로그램이 많이 있습니다.

이 목록은 가장 인기 있고 유용한 몇 가지 도구를 보여줍니다. 내가 이 목록에 있는 도구보다 더 유용하거나 우수하다고 생각하는 도구에 대한 권장 사항이 있습니까? 알려주십시오.



About the author

저는 Windows 11 및 10 플랫폼에서 10년 이상의 경험을 가진 소프트웨어 엔지니어입니다. 저는 Windows 7과 Windows 8을 위한 고품질 소프트웨어를 개발하고 유지 관리하는 데 중점을 두었습니다. 또한 Chrome, Firefox, Xbox One 및 파일을 포함하되 이에 국한되지 않는 다양한 다른 프로젝트에서도 작업했습니다.



Related posts