WordPress 웹사이트 제작자를 위한 가장 유용한 5가지 Chrome 확장 프로그램

워크플로를 최적화하는 것은 프로젝트의 성공에 매우 중요합니다. 시간과 돈을 절약하고 동료, 고객과의 의사 소통을 개선하고 완성 된 WordPress 사이트의 품질을 향상시킵니다.

요즘에는 작업을 보다 효율적으로 수행하는 데 도움이 되는 응용 프로그램, 플러그인 또는 추가 기능이 항상 있습니다. 이 기사에서는 ProteusThemes의 브라우저(특히 Google Chrome)에서 다양한 유형의 콘텐츠를 통신, 편집 및 분석하기 위해 어떤 종류의 확장 프로그램을 사용하는지 보여드리고 싶었습니다.

내가 사용하는 5개의 Chrome 확장 프로그램은 모두 무료로 사용할 수 있으며 몇 분 안에 설정할 수 있습니다. 그것들을 살펴봅시다:

– WhatFont

– 페이지 눈금자

– 컬러질라

– 멋진 스크린샷

– 스타일봇

Chrome 웹 스토어 에서 모든 확장 프로그램을 설치할 수 있습니다 . 확장 프로그램을 설치하면 해당 아이콘이 브라우저 도구 모음의 오른쪽 상단 모서리에 있는 URL 필드 옆에 표시됩니다. 확장 프로그램을 실행하거나 아이콘을 클릭하여 모든 옵션을 볼 수 있습니다.

URL 필드 끝에 있는 메뉴를 클릭하고 추가 도구를 선택하거나 확장 아이콘을 마우스 오른쪽 버튼으로 클릭하여 필요한 옵션을 선택하면 설치된 모든 확장을 확인, 수정, 활성화 또는 비활성화할 수 있습니다.

각 확장 프로그램에 대해 자세히 알아보겠습니다.

WhatFont

WhatFont 확장 프로그램 받기

웹사이트에서 동일한 글꼴을 사용하고 싶었던 적이 있습니까? 코드에서 글꼴을 검색하거나 WhatFont를 사용할 수 있습니다. 이 확장은 텍스트를 클릭하여 다른 웹페이지에서 사용되는 글꼴을 식별합니다. 팝업 창에는 글꼴에 대한 모든 정보가 표시됩니다. 텍스트 위로 마우스를 가져가면 사용된 글꼴 이름을 확인할 수도 있습니다.

나는 다음 프로젝트에 대한 영감을 찾거나 라이브를 시작하기 전에 WordPress 웹 사이트의 최종 버전을 확인할 때 이 도구를 사용합니다. 다양한 브라우저 해상도에서 글꼴을 테스트할 때 웹 디자이너와 개발자가 자주 사용합니다.

확장은 글꼴의 다음과 같은 특성을 보여줍니다.

• 글꼴 두께 및 스타일(선택 항목의 두께 및 스타일 표시).

• 글꼴 모음(글꼴의 출처가 되는 전체 서체 모음을 표시하므로 추적할 수 있음).

• 글꼴 크기(현재 표시되는 해상도에서 사용되는 글꼴의 크기입니다. 두 개의 다른 글꼴이 같은 크기로 설정되면 차이점 때문에 하나가 다른 글꼴보다 크게 보이는 경우가 많습니다. 크기는 픽셀로 표시되며 불행히도 확장자는 다른 활자체 측정이 없음).

• 글꼴 높이(대문자 상단에서 가장 낮은 디센더 하단까지의 높이에 작은 버퍼 공간을 더한 값).

• 글꼴 색상(글꼴의 HEX 색상 모델입니다. 링크의 텍스트 색상을 읽을 때 주의하십시오. 경우에 따라 선택 항목에 호버 모드에서 링크 색상이 표시됨).

• Google Fonts, Font Squirrel 또는 TypeKit 링크(경우에 따라 글꼴이 대화형 애플리케이션 프로그래밍 인터페이스 모음에 연결되어 웹사이트에서 웹 글꼴을 검색하고 사용할 수 있습니다 . 동일한 글꼴을 찾거나 전체 서체 가져오기) .
• 문자(대문자 및 소문자 샘플이 선택한 글꼴로 표시됨).

또한 WhatFont를 사용하는 동안 웹 페이지와 상호 작용할 수 없으며 페이지의 스크롤만 활성화됩니다. 이전 팝업을 잃지 않고 여러 글꼴을 클릭하여 비교할 수 있습니다.

페이지 눈금자

페이지 눈금자 확장 가져오기

페이지 눈금자를 사용하면 모든 페이지에 눈금자를 그릴 수 있으며 요소의 너비와 높이, 웹 페이지에서의 위치를 ​​표시할 수 있습니다. 더 이상 코드를 보거나 스크린샷을 만들고 Photoshop에서 측정할 필요가 없습니다. 이 도구는 웹 페이지에서 더 큰 요소의 크기와 위치를 확인할 때 유용합니다. 예를 들어 모든 패딩과 여백을 확인할 수 있습니다. 더 작은 요소나 세부 사항도 측정할 수 있습니다.

페이지 눈금자를 사용하는 방법

브라우저 도구 모음의 오른쪽 상단에 있는 아이콘을 클릭하거나 ALT + P 를 눌러 눈금자 도구 사용을 시작합니다 . 왼쪽, 위쪽, 오른쪽, 아래쪽 선택 항목의 너비, 높이 및 위치를 표시하는 파란색 눈금자 막대가 나타납니다.

선택하려면 클릭하고 끌어서 놓습니다. 선택 데이터는 파란색 도구 모음에 즉시 표시됩니다. 눈금자의 측면과 모서리를 클릭하고 이동하여 눈금자의 선택 크기를 변경합니다. 파란색 눈금자 막대의 필드에 원하는 크기나 위치를 수동으로 입력할 수도 있습니다. 또 다른 옵션은 필드의 작은 화살표를 클릭하여 선택 영역의 크기를 조정하거나 이동하는 것입니다. 이를 통해 정확한 변경을 수행할 수 있습니다. 선택 영역을 중앙에서 드래그하여 이동하는 것도 가능합니다.

더 작은 세부 사항을 측정하려면 웹 페이지를 확대하십시오. 이 도구의 가장 큰 장점은 확대할 때 눈금자가 선택 항목에 추가 픽셀을 추가하지 않는다는 것입니다.

눈금자의 색상을 변경하여 눈금자의 선택과 페이지 요소에 사용된 색상 간의 대비를 더 잘 만들 수 있으므로 보다 정확한 측정을 수행할 수 있습니다.

멀리 떨어져 있는 두 요소 사이의 공간을 측정하려면 "안내선 표시" 옵션을 켜서 눈금자 가장자리에서 확장된 안내선을 표시합니다.

측정하는 동안 방해가 되는 경우 도구 모음을 웹 페이지 하단에 고정할 수 있습니다.

"요소 모드"를 활성화(도구 모음 왼쪽에 있는 밝은 파란색 화살표 클릭)하여 페이지의 요소 위로 마우스를 이동할 때 요소의 윤곽을 그립니다. 요소를 클릭하면 안정적인 선택을 얻을 수 있습니다. 확장 프로그램은 또한 웹사이트 코드에 따라 요소 사이를 이동할 수 있도록 표시하고 허용합니다.

요소 모드에서 요소 찾기 및 이동

플러그인의 유일한 단점: 모바일 보기에서 요소의 크기를 가져와야 하는 경우 다른 크기 조정 Chrome 플러그인(예: Window Resizer)과 동시에 Page Ruler를 사용해야 합니다. 개발자 모드의 웹페이지에서

컬러질라

ColorZilla 확장 프로그램 받기

ColorZilla는 웹 개발자와 그래픽 디자이너에게 색상 관련 작업을 지원하는 확장 프로그램입니다. 일반적으로 색상 팔레트를 만들거나 색상 조합에서 영감을 얻거나 특정 요소의 색상을 확인하는 데 사용됩니다. 다른 응용 프로그램을 열지 않고도 웹 페이지의 어느 부분에서나 색상을 읽고 해당 색상을 조정한 다음 다른 프로그램에 붙여넣을 수 있습니다.

이 도구는 RGB 및 16진수 형식의 색상 판독값을 제공합니다. ColorZilla의 스포이드 아이콘을 클릭하면 다양한 옵션 메뉴가 열립니다.

ColorZilla 사용 방법

ColorZilla의 가장 일반적인 용도는 요소의 색상을 읽는 것입니다. "페이지에서 색상 선택"을 클릭하면 현재 표시된 페이지에서 색상을 선택할 수 있습니다. 색상 샘플, RGB 및 HEX 색상 형식, 색상 요소의 크기 및 코드를 보여주는 웹 페이지 상단의 도구 모음이 열립니다. 도구 모음은 평균 색상을 계산하기 위해 색상의 더 큰 패치를 선택하는 옵션도 제공합니다.

클릭하여 색상의 HEX 형식을 선택하고 복사합니다. CTRL + V 또는 CMD + V 버튼을 사용하여 HEX 색상 코드를 붙여넣습니다 . 다른 형식으로 한 번 복사하려면 드롭다운 메뉴를 열고 "클립보드에 복사"를 선택한 다음 원하는 형식을 선택할 수 있습니다.

옵션에서 다음에 선택한 모든 색상의 형식을 변경할 수 있습니다. 거기에서 # 형식(66CAA6)을 비활성화하고 HEX 코드를 소문자(66caa6)로 만들 수 있습니다. 변경 사항을 저장하는 것을 잊지 마십시오.

마지막으로 선택한 색상은 "색상 선택기" 아래에 있는 ColorZilla 아이콘의 드롭다운 메뉴에 저장됩니다. 색상 선택기는 선택한 색상의 기록을 저장하고 색상을 편집할 수 있는 옵션이 있으며 여기에서 복사할 수 있습니다.

"Webpage Color Analyser"는 현재 웹 페이지에서 사용되는 모든 CSS 색상을 읽습니다. 색상을 클릭하면 이 색상의 각 요소가 강조 표시되고 색상의 RGB 및 HEX 형식이 표시됩니다.

내장된 팔레트 브라우저를 사용하면 기존 색상 세트에서 색상을 선택할 수 있습니다. 색상 관련 옵션 중 하나는 그라디언트 생성을 위한 고급 옵션인 "CSS 그라디언트 생성기"입니다.

멋진 스크린샷

멋진 스크린샷 확장 프로그램 받기

이 확장 프로그램을 사용하면 웹 페이지를 쉽게 스크린샷하고 녹화할 수 있습니다. 로컬 이미지를 가져와서 편집하고 내보낼 수도 있습니다. ProteusThemes에서는 우리가 제공하는 WordPress 지원뿐만 아니라 내부적으로 의사 소통하기 위해 매일 사용합니다. 이 도구는 원격으로 작업하는 경우 매우 유용합니다. 예, 동일한 작업을 수행할 수 있는 다른 확장 프로그램이 많이 있지만 간단하고 강력하기 때문에 Awesome Screenshot이 마음에 듭니다.

멋진 스크린샷을 사용하는 방법

이 확장을 통해 다음을 수행할 수 있습니다.

– 웹페이지의 보이는 부분을 캡처하려면(지연된 캡션 옵션),

– 선택한 영역을 캡처하려면(이미지로 원하는 영역 선택),

– 전체 웹 페이지를 캡처하려면

– 바탕 화면을 스크린샷하려면

– 로컬 이미지를 가져오고 편집하고

– 화면의 비디오를 녹화합니다.

웹 페이지를 스크린샷하는 방법 중 하나를 선택하려면 브라우저 도구 모음에서 카메라 렌즈 아이콘을 클릭하십시오. 멋진 스크린샷의 지연된 캡처를 제외한 모든 작업은 즉시 수행됩니다. 당신이 만든 스크린샷은 PNG 또는 JPEG 이미지로 저장됩니다. 이미지의 원하는 형식은 확장 프로그램의 옵션에서 선택할 수 있으며, 지연된 캡처 시간, 단축 코드 및 이미지를 자동으로 저장하려는 폴더와 같은 다른 설정도 있습니다.

웹 페이지의 모바일 보기를 원하거나 WordPress 웹 페이지의 스크린샷을 다른 해상도로 만들려면 개발자 모드로 이동하여 수정하거나 다른 크기 조정 확장을 먼저 활성화할 수 있습니다(예: Website Resizer).

스크린샷을 저장하기 전에 편집하고 댓글을 달 수 있습니다. 캡처를 스크롤하고 자르고 개인 데이터가 포함된 부분을 쉽게 흐리게 처리합니다. 강조 및 명확성을 위해 텍스트, 원, 화살표 및 다른 색상의 선으로 이미지에 주석을 달 수 있습니다. 저장하기 전에 이미지를 보려면 돋보기 아이콘으로 확대 및 축소하세요.

Awesome Screenshot으로 도구 모음 및 스크린샷 편집 옵션

결과에 만족하면 이미지를 컴퓨터, 클라우드에 저장하거나 공유하거나 인쇄하십시오.

이 확장에는 30초 화면 비디오를 무료로 녹화할 수 있는 옵션도 있습니다. 탭이나 윈도우 영상을 만들 수 있습니다. 동영상은 WebM 형식으로 저장하거나 Google 드라이브로 전송하거나 YouTube에 직접 업로드할 수 있습니다. 녹음은 "내 녹음" 아래의 멋진 스크린샷 드롭다운 메뉴에서 찾을 수 있습니다.

확장 기능의 유일한 두 가지 단점은 브라우저를 확대할 때 선택한 영역의 캡처가 작동하지 않고 많은 사용자가 스티커 요소가 있는 웹사이트의 멋진 스크린샷을 얻을 수 없다는 것입니다.

재미있는 상식: 이 기사에서 보고 있는 대부분의 스크린샷과 비디오는 Awesome Screenshot으로 만들어졌습니다.

스타일봇

Stylebot 확장 프로그램 가져오기

Stylebot을 사용하면 보기 전용으로 웹사이트의 CSS를 편집하고 조작할 수 있습니다. 웹사이트의 CSS를 정확하고 장기적으로 변경 하려면 약간의 CSS 지식이 필요합니다 . WordPress 페이지의 변경 사항을 더 빨리 미리 보기 위해서만 필요한 경우 고급 CSS 지식이 필요하지 않습니다. 이 도구는 가능한 모든 요소를 ​​변경하고, 새 요소를 추가하고, 삭제하고, 웹사이트의 다른 레이아웃을 만드는 데 사용되므로 완벽한 스크린샷을 만들고, 원치 않는 실수를 수정하거나 웹사이트의 CSS를 저장할 수 있으므로 변경 사항도 적용됩니다. 다음 방문에서 볼 수 있습니다. 생성한 웹사이트의 스타일을 가져오거나 내보낼 수 있으며 다른 사람과 공유할 수 있습니다.

고급 편집을 위해 Stylebot을 개발자 모드와 함께 사용하여 페이지의 요소를 식별합니다.

스타일봇 사용 방법

Stylebot을 열려면 브라우저 도구 모음에서 CSS 아이콘을 클릭하거나 ALT + M 을 누릅니다 . 프로그래밍 능력이 별로 없으신 분들은 새로 오픈한 칼럼 하단에 있는 기본 모드를 선택하시길 추천드립니다.

고급 모드는 선택한 요소에 대한 CSS 코드를 작성하는 텍스트 필드를 엽니다. 여기에서는 개발자 모드와 함께 작업하여 중첩된 요소에서 변경하려는 요소의 이름을 찾고 Stylebot에서 편집을 계속하는 것이 더 쉽습니다. 동시에 많은 편집 모드를 사용하고 싶다면 그렇게 할 수 있습니다. 간단한 편집은 고급 또는 CSS 편집 모드에서 볼 수 있는 코드로 변환됩니다.

"CSS 편집" 옵션은 CSS 코드 필드를 열어 전체 웹사이트에 적용되며 저장, 공유 및 다음에 웹사이트 방문 시 사용할 수 있습니다. 변경한 모든 사항이 표시됩니다. 웹 사이트를 새로 고치면 변경한 모든 내용이 그대로 유지됩니다. 스타일을 제거하려면 Stylebot 아이콘을 클릭하고 "스타일 제거"를 선택하십시오.
기본 모드에는 웹 사이트를 더 빠르고 쉽게 편집할 수 있는 간단한 섹션이 있습니다. 우리는 때때로 이것을 빠른 미리보기 도구로 사용합니다(예: 더 큰 제목이 어떻게 보이는지 테스트하거나 배경 색상을 변경하는 등). 초보자도 처음부터 쉽게 사용할 수 있습니다.

여기에서 변경할 수 있습니다.

– 텍스트,

– 색상, 배경,

– 국경,

– 레이아웃 및 가시성.

커서를 사용하여 웹 사이트에서 요소(녹색 테두리로 강조 표시됨)를 수동으로 선택합니다. 요소의 이름은 Stylebot 열의 상단에 표시됩니다. 새로 선택하려면 열의 왼쪽 상단 아이콘을 클릭하기만 하면 됩니다. 요소 제목의 드롭다운 화살표는 이전에 선택한 섹션을 제공합니다. 올바른 요소가 선택되면 값을 입력하고 미리 스타일이 지정된 옵션을 선택하여 웹사이트 변경을 시작할 수 있습니다. 기본 모드에서는 편집 옵션이 제한됩니다. 글꼴 크기, 텍스트 색상, 패딩 및 여백 등을 변경할 수 있습니다.

Stylebot 편집 또는 보기 경험을 더 즐겁게 만들려면 Stylebot 아이콘을 클릭하고 옵션을 선택하십시오. 여기에서 개인화된 바로 가기를 만들고, 선호하는 편집 모드를 선택하고, 다른 웹사이트에 적용된 스타일을 활성화 및 비활성화하고, 스타일 가져오기 및 내보내기 등을 할 수 있습니다.

그래서 여기에 ProteusThemes에서 매일 사용하고 워크플로를 더 쉽게 만들 수 있는 가장 필수적이고 강력한 5가지 확장 기능만 있습니다. 달리 생각하십니까? 더 나은 대안을 추천하시겠습니까? 코멘트를 남겨주세요.