빨간색 버스에 가방을 메고 탑니다
dark mode light mode NEWSLETTER Menu

일의 확장판 5+2 (feat. 크롬)

디자이너들이 알아두면 유용한 10가지 크롬 확장 프로그램! 🏆
클릭 한번으로 화면해상도를 조절하거나, 레이아웃 마진이나 폰트를 알아차리고 싶을 때!

UX Collective가 크롬에서 디자이너에게 유용한 확장 프로그램 10개를 선정했습니다.
디자이너가 아니더라도 유용하게 사용할 수 있는 크롬 확장 프로그램 5+2개를 골라 소개해요!

Window Resizer

지금 보고 있는 Web 화면을 스마트폰에서 보면 어떤 모습일까?
27인치 아이맥에서 보는 것과 15인치 랩탑에서 보는 화면의 차이를 따져볼 때에도 유용합니다.
사용자가 직접 디바이스와 해상도를 추가하면서 필요한 화면 비율을 간단하게 볼 수 있다는 점!

Loom

스크린캡처 화면으로는 설명하기 조금 곤란한 그런 상황들이 있잖아요!
애니메이션, 화면 사용 플로우, 웹페이지 버그 등을 간편하게 녹화하는 확장 프로그램입니다!
별도의 프로그램을 구동하지 않고 크롬 상단 확장 프로그램에서 버튼 하나 누르면 녹화가 됩니다.

SVG Grabber

디자인 작업을 하지 않더라도 아이콘, 로고 등 이미지 벡터 파일이 필요할 때가 많잖아요!
물론, Google Image 검색을 통해 원하는 파일 타입을 찾을 수도 있지만 시간이 좀 걸려서요;
SVG Grabber를 이용하면 필요한 파일을 얻는 과정에 들이는 시간을 절반으로 줄일 수 있습니다!

Page Ruler

웹서핑을 하다보면 특별히 괜찮아 보이는 서비스, 페이지가 있잖아요!
웹사이트가 주는 느낌에는 여러가지가 영향을 주는데요! 컬러, 폰트, 레이아웃 등등.
레이아웃이 주는 특성을 결정하는 ‘마진(Margin)’값을 확인하는데 유용한 확장 프로그램입니다.

이미지와 이미지, 이미지와 브라우저 경계 사이의 간격을 버튼 하나로 확인할 수 있다는 점! 👍

Fontface Ninja

이 사이트에는 어떤 폰트가 쓰였지?
Fontface Ninja를 이용해서 지금 보고 있는 웹페이지 폰트를 확인할 수 있습니다.
시뮬레이터 창을 이용해 내가 원하는 단어, 문장을 써보고 느낌을 비교해 볼 수 있어요.

큐레이터의 문장 🎒

UX Collective에서 소개하지 않았지만 제가 쓰는 2개 확장 프로그램을 함께 소개합니다.
저는 두 가지 ‘새 탭 콘텐츠’ 확장 프로그램을 서로 다른 구글 계정에 연동해서 쓰고 있어요.
회사 업무용 지메일 계정에는 ‘말과 말들’을, 디자인 프로젝트용 지메일 계정에는 ‘Surfit.io’를!

말과 말들

새 탭을 열 때마다 워크룸 프레스와 작업실 유령 도서에서 발췌한 문장을 보여줍니다.
일을 하다가 잠시 멈춰서 문장을 내려 읽는 기분이 잠시나마 차분함을 선물합니다!

Surfit.io

UI/UX, Branding 부터 참고할 만한 디자인 리소스까지 다양하게 다루는 디자인 콘텐츠 아카이빙!
새 탭 페이지를 열면 내가 알아두면 좋을 디자인 콘텐츠를 모으고 정제해서 보여줍니다.