디자이너를 위한 10가지 최고의 크롬 익스텐션 (10 best Chrome extensions for designers)

이 글은 Brendan Mahony10 best Chrome extensions for designers글을 번역했습니다. 저의 모든 글은 허가를 받고 진행 하였습니다

디자이너로서 워크플로우의 속도를 높이고 개선을 위한 새로운 팁, 트릭 및 툴을 거의 항상 찾고 있습니다. 몇 달 동안 Chrome 익스텐션을 테스트한 후, 디자이너를 위한 10가지 확장 기능 및 플러그인의 목록을 정리했습니다.

Window Resizer

디자이너라면 이 글을 읽으면서 27인치 iMac을 응시할 가능성이 높습니다. 하지만 대부분의 사용자들은 아기 코끼리 크기의 모니터를 가지고 있지 않습니다.
따라서 Window Resizer를 만나게 됩니다. 이것은 여러분의 사이트가 다른 뷰포트에서 어떻게 보이는지를 볼 때 실제 생명을 구하는 것입니다. 확장자를 열고 미리 설정된 뷰포트를 클릭하거나 사용자 정의 항목을 입력하기만 하면 됩니다.
presentation

Loom

그들은 사진이 천개의 단어 가치가 있다고 말합니다. 그래서 비디오는 만개의 단어 가치가 있다고? 1M? 누가 알겠습니까? 많은 것을요. Loom은 애니메이션, 사용자 흐름 또는 버그를 녹화하고 팀과 공유할 수 있는 정말 놀라운 무료 소프트웨어입니다.
지난 몇 달 동안 이 도구를 많이 사용했어요. 캡처할 수 없는 것들을 스크린샷으로 전달하려고 할 때 좋습니다. 익스텐션을 설치하고 기록을 누르기만 하면 됩니다. 작업을 마치면 비디오를 공유하고 누가 봤는지 등에 대한 통계를 얻을 수 있습니다. 10/10은 친구에게 추천합니다.
presentation

Toybox

구성 요소를 검사하고 스크린샷을 캡처하고 사이트에서 버그를 로깅하는 데 많은 시간을 할애하고 계십니까? 토이박스 크롬 익스텐션보다(Toybox chrome extension) 더 멀리 보지 마세요. 이는 피드백을 남겨두고 사이트에서 직접 CSS를 검사하는 가장 빠른 방법입니다.
InVision 설명 및 Zeplin Inspection과 같이 설계 파일 대신 사이트에서 사용할 수 있습니다. 이뿐만 아니라 코멘트를 남길 때 자동으로 스크린샷을 찍고 브라우저 데이터, OS 정보, 뷰포트 크기 등을 기록하여 문제를 재현하는 데 큰 도움이 됩니다. 이것은 어떤 제품 팀이나 에이전시에게 있어 심각한 필수품입니다.

Muzli

아침 커피(또는 차)에 영감을 줄까요? 머즐리(Muzli) 크롬 확장(Muzli chrome extension)이 당신을 지원합니다. 새로운 브라우저 창을 열 때마다 멋진 디자인의 최신 피드를 볼 수 있습니다. 그들은 여러분에게 새롭고 멋진 것을 제공하기 위해 수 많은 디자인 자료들을 끌어냅니다.
몇 년 동안 이 익스텐션을 사용했는데 정말 좋아요.
presentation

SVG Grabber

때로는 페이지의 로고나 아이콘을 잡기만 하면 됩니다. 만약 그것이 여러분이 하는 일처럼 들린다면, SVG Grabber를 여러분의 삶에 환영합니다. 단일 버튼을 클릭하면 페이지에 있는 모든 SVG가 자동으로 당겨집니다. 필요한 파일을 캡처하고 신속하게 다운로드할 수 있는 기능을 완벽하게 파악할 수 있습니다.
제가 항상 사용하는 익스텐션은 아니지만, 그런 까다로운 순간들을 위해 뒷짐을 지고 있는 것은 정말 좋은 일입니다.
presentation

Page Ruler

페이지의 개체 크기를 측정하는 것은 심각한 문제가 될 수 있습니다. 스크린샷 도구를 자주 여는 사람이라면 Page Ruler extension을 사용하는 것이 좋습니다.
익스텐션을 열고 측정할 상자를 끌면 모든 준비가 완료됩니다! 다른 건 별로 없어요.
presentation

Dark Mode Dev Tools

다크 모드 — 모든 디자이너에게 있어 진정한 필수 요소입니다. 따라서 이것은 Chrome Dev Tools에 바로 내장되어 있으며 확장자는 아닙니다. 하지만 여전히 언급할 수 있을 것으로 생각했습니다.
간단히 Dev Tools > 오른쪽 상단 모서리에 있는 3개의 점 엘립을 클릭하세요 > Click Settings > Under Appearance > Dark로 전환합니다. 다 됐어요! 더 이상 어쩔 수 없어요! 이제 완전한 어둠 속에서 DOM을 통해 빠져나갈 수 있습니다.
presentation

ColorZilla

어떤 색상이 사용되는지 빠르게 확인할 수 있는 방법이 필요할 때도 있습니다. ColorZilla는 이 문제에 대한 훌륭한 솔루션입니다. 페이지의 요소 위에 마우스를 올려 놓으면 사용 중인 16진수 및 rgb 색상 값을 볼 수 있습니다. 클릭해서 클립보드에 빠르게 복사합니다. 빠르고 간단하며 효율적입니다.
그들은 몇 가지 다른 기능을 가지고 있지만, 그것들을 너무 많이 사용하지 않았습니다.
presentation

Fontface Ninja

또 다른 간편하고 경쾌하며 아름다운 다운로드 익스텐션은 Fontface Ninja입니다. 이렇게 하면 요소 위로 마우스를 가져가서 사용 중인 글꼴을 볼 수 있습니다. 또한 페이지의 글꼴에서 바로 이동하여 확장 도구 모음을 사용하여 구입할 수도 있습니다.
간단하고 편리한 연장선입니다.
presentation

Custom Cursor

이 강아지는 디자이너가 특정하지는 않지만, 저는 며칠 전에 이 강아지를 발견했고 이것이 정말 매력적이라고 생각했어요. 사용자 정의 커서에서는 기본 커서를 feat-town 선택 항목으로 변경할 수 있을 뿐만 아니라 사용자 정의 커서를 업로드할 수도 있습니다.
아주 재미있고, 펑키하고, 아주 신선합니다. 한번 해 보세요.
presentation
읽어주셔서 감사하고 저만큼 이러한 익스텐션 기능도 즐기시기 바랍니다:) 워크플로우에서 사용하는 다른 익스텐션 기능이 있다면 의견을 적어 주십시오!

이 글은 번역 글입니다. 원본 링크입니다.


안녕하세요! Early adopter입니다.
페이스북 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다.
"보버"에서 "디자인 번역 공장" 연재를 저와 함께 해주실 분을 찾습니다. 하단 "리뷰" 또는 "페이스북"으로 편하게 메시지 주세요!
PS. 제가 사용하는 블로그 "보버"에 "함께 쓰는 블로그"라는 기능이 요번에 추가됐네요 ㅋ (미디엄에 퍼블리케이션 같은 기능..)
하단 링크 글을 보시면 "디자인 번역 공장"에 어떻게 함께 연재할 수 있는지 자세히 설명되어있습니다. 또는 쉽게 FB 메시지 주세요!
https://bit.ly/2LxR0Bz