디자이너를 위한 11가지 최고의 Chrome 확장 프로그램

사용성과 효율성에 대한 겉보기에 작은 조정이 실제로 사용자 경험에 얼마나 큰 차이를 만들 수 있는지 UX 디자이너보다 더 잘 아는 사람은 없습니다.

그러나 디자이너보다 웹 검색에 더 많은 시간을 할애하는 사람은 거의 없지만 우리 중 가장 지식이 풍부한 사람도 해당 경험의 품질을 최대화하지 못할 수 있습니다.

이를 염두에 두고 디자이너를 위한 최고의 Chrome 확장 프로그램 11개를 모았습니다.

직조기

사용자 흐름, 디자인 문제 또는 기타 버그와 관련된 문제에 대해 다른 팀원과 의사 소통하는 데 상당히 많은 시간을 할애할 가능성이 있습니다. 베틀은 당신의 삶을 훨씬 더 쉽게 만들 수 있습니다.

확장 프로그램을 사용하면 전면 카메라와 함께 화면에 표시되는 내용을 간단한 링크로 공유하기 전에 비디오를 녹화하고 설명할 수 있습니다.

Loom에서 판매 중이라면 4K 비디오, 무제한 비디오 저장, 그리기 도구, 마우스 클릭 강조, 클릭 유도문안 버튼 및 사용자 정의 썸네일을 포함한 편집 옵션 제품군을 허용하는 프리미엄 유료 서비스를 고려하십시오.

창 크기 조정

디자이너는 모든 사람이 웹 서비스를 경험하는 방법과 화면에서 아름답게 보이는 레이아웃을 알아야 합니다. 사실, 가장 중요한 것은 노화된 iPhone에서 실패할 수 있습니다.

Window Resizer는 이러한 사각지대를 해결하는 데 도움이 되며 브라우저 창의 크기를 조정하여 다양한 화면 해상도를 재현합니다. 해상도 목록을 사용자 정의할 수 있고 창의 크기와 위치를 조작할 수 있으며 효율성을 높이기 위해 확장 기능을 사용하여 전역 키 바로 가기를 만들 수도 있습니다.

무즐리

당신이 당신의 하루에 약간의 추가 디자인 영감을 사용할 수 있다면 – 그리고 누가 할 수 없습니까? – Muzli는 모닝 커피를 마시는 동안 스크롤할 수 있도록 웹 전체에서 매력적인 시각적 디자인을 선별하는 당신을 위한 것입니다.

Dribbble, Mashable 및 Product Hunt를 포함한 인터넷의 150개 이상의 소스를 통해 Muzli는 새 탭을 열 때마다 최신 디자인 아이디어, 프로젝트 및 뉴스를 제공합니다.

관심 있는 항목이 있습니까? 클릭하여 새 브라우저 창에서 자세히 알아보세요.

페이지 눈금자

UX 디자이너는 단순하지만 효과적인 아이디어를 높이 평가하는 경향이 있으며 이것이 Page Ruler를 요약합니다.

스크린샷 도구를 사용하여 웹 페이지의 개체 크기를 신중하게 측정하는 데 시간을 낭비하는 대신 Page Ruler를 사용하여 신속하게 눈금자를 그리고 페이지의 모든 요소와 픽셀 치수 및 위치의 크기를 조정하십시오.

컬러질라

웹 페이지에서 어떤 색상이 사용되고 있는지 빠르게 알 수 있는 경우가 종종 있을 것입니다. ColorZilla를 사용하면 훨씬 빠르게 찾을 수 있습니다.

마침내 Chrome에 오기 전에 가장 인기 있는 Firefox 확장 기능 중 하나인 ColorZilla는 모든 페이지의 픽셀 색상을 결정하는 고급 스포이드, CSS 그라디언트 생성기 및 색상 선택기를 제공합니다.

원하는 색상이 보이면 ColorZilla를 사용하여 16진수 및 RGB 값을 손쉽게 클립보드에 붙여넣을 수 있습니다.

폰트페이스 닌자

새로운 글꼴 아이디어를 찾기 위해 인터넷을 뒤지는 유형입니까? 디자이너와 일반적으로 글꼴 매니아라면 모든 웹사이트에서 사용되는 글꼴을 식별하고 디자인 소프트웨어에 빠르게 삽입할 수 있는 이 우아한 확장 기능을 설치하기를 원할 것입니다.

Fontface Ninja의 "Fonts DNA 엔진"은 CSS 이름만 표시하는 것이 아니라 표시되는 모든 글꼴의 실제 이름을 표시하므로 합법적으로 사용해 볼 수 있습니다. 원하는 경우 Fontface Ninja는 적절한 라이선스를 구매할 수 있는 링크도 제공합니다.

스펙트럼

색맹이라고도 하는 색각 이상은 전 세계 수백만 명의 사람들에게 영향을 미치는 것으로 추산됩니다. 해당 사람들이 귀하의 웹 페이지에 대해 긍정적인 경험을 할 수 있도록 Spectrum을 사용해 보십시오. 이 Spectrum은 웹 사이트를 신속하게 테스트하여 다양한 유형의 색맹을 가진 사람들에게 웹 사이트가 어떻게 보이는지 확인합니다.

이 확장 기능은 차트의 일부 색상이 서로 구별되지 않을 수 있기 때문에 데이터 시각화 기능이 있는 웹사이트에 특히 유용하다고 합니다.

체크봇

모든 링크가 실제로 작동하는지, 양식이 안전한지, 사이트가 빠르고 탐색하기 쉬운지 확인하는 것은 모두 UX 디자이너의 주요 사용성 문제입니다. Checkbot은 당신의 등을 돌보고 당신이 눈치채지 못한 문제를 찾아낼 것입니다.

한 번에 수백 페이지를 테스트하는 Checkbot은 깨진 링크, HTML/JavaScript/CSS 오류, 중복 제목, 보안 문제, 리디렉션 체인 및 혼합 콘텐츠 오류를 발견할 수 있습니다.

실제로 Checkbot은 SEO, 속도 및 보안에 대한 50개 이상의 모범 사례에 대해 사이트를 테스트합니다.

SVG 그래버

다른 웹사이트에서 로고, 아이콘, 일러스트레이션 또는 기타 아트워크를 가져와야 하는 경우가 자주 있습니까? 그렇다면 SVG Grabber를 사용하면 많은 시간과 지루함을 줄일 수 있습니다.

웹 사이트에서 모든 SVG 자산을 빠르게 미리 보고 가져올 수 있는 도구입니다. 단 한 번의 클릭으로 확장 프로그램은 페이지의 모든 SVG를 자동으로 릴링(reel in)하기 전에 필요한 것을 선별하고 빠르게 다운로드할 수 있습니다.

UX 체크

간단히 말해서, UX Check는 휴리스틱 평가를 산들 바람으로 바꿔줍니다.

확장 프로그램을 사용하면 웹사이트에서 사용성 문제를 스캔할 수 있으므로 실제 사용자 없이 테스트할 수 있습니다. UX Check 는 시스템 상태의 가시성, 오류 방지, 일관성 및 표준을 포함하는 상호 작용 디자인 에 대한 Nielsen Norman Group의 10가지 일반 원칙을 기반으로 개선해야 하는 사이트 영역에 플래그를 지정 하고 문제의 스크린샷을 저장합니다.

작업이 완료되면 모든 항목을 문서 파일로 내보내 팀원과 쉽게 공유할 수 있습니다.

기업입숨

특히 텍스트가 많은 새로운 디자인을 테스트하는 경우 Lorem Ipsum의 일반적인 첫 번째 단락에 질릴 수 있습니다. 우리 중 라틴계에 지친 사람들을 위해 Corporate Ipsum은 필러 텍스트로 사용하기 위해 무작위로 기업의 이중 언어를 불러일으키는 재미있는 확장 프로그램입니다.

당신이 보던 그 긴 더미 텍스트 대신에, 예를 들어 다음과 같은 기업 전문 용어로 당신을 맞이할 수 있습니다.

라틴어 대신 영어 단어만 있으면 디자인이 훨씬 더 자연스러워 보이고 무작위로 조합된 텍스트가 종종 전혀 의미가 없다는 사실은 확장 기능의 매력의 일부일 뿐입니다.

BrainStation의 UX 디자인 과정에 대해 자세히 알아보세요.