웹 디자이너에게 컴퓨터에 반드시 있어야 하는 소프트웨어를 물으면 아마 대부분 포토샵과 일러스트레이터를 꼽을 것입니다. 이 두 가지는 디자인 작업 흐름의 핵심이 맞지만, 그 외에도 '있는지 몰랐던' 작은 도구들이 존재합니다.
가장 좋은 점은 따로 다운로드할 필요조차 없다는 것입니다. 크롬 확장 프로그램만 설치하면 바로 사용할 수 있죠. 웹 페이지의 폰트를 식별하는 것부터 요소 간 거리를 측정하는 것까지, 오늘 소개할 웹 디자인용 크롬 확장 프로그램들은 여러분의 작업을 한결 수월하게 만들어 줄 것입니다.
1. Dropbox for Gmail
드롭박스(Dropbox)는 파일 호스팅 서비스로 시작했지만, 곧 주요 사용자층이 동료들과 작업물을 공유하는 디자이너라는 사실을 깨달았습니다. 디자인 파일은 용량이 커서 이메일 첨부로 보내기 어려운 경우가 많기 때문에, 파일 링크를 드롭박스로 전송하는 편이 훨씬 간편합니다.
Dropbox for Gmail은 이 과정을 더욱 편리하게 만들어 줍니다. 새 메일 작성 창 하단의 드롭박스 버튼으로 파일을 연결하면, 받는 사람은 전송되는 파일을 미리 엿볼 수 있습니다. 이미지 파일 링크는 이메일에 바로 표시되고, 다른 형식의 파일은 유용한 미리보기가 생성됩니다.
설치: Dropbox for Gmail
2. FontFace Ninja
수천 가지의 폰트가 존재하는 만큼 타이포그래피의 가능성은 무궁무진합니다. 특히 어디선가 본 아름다운 폰트를 식별해서 내 프로젝트에 활용할 수 있다면 금상첨화겠죠.
FontFace Ninja는 바로 그 일을 도와주는 크롬 확장 프로그램입니다. 이미지에서 폰트를 찾아내는 도구와 비슷하지만, 차이점이 있다면 FontFace Ninja는 페이지 CSS에 코딩된 폰트 정보, 즉 제목과 본문에 적용된 서체를 직접 읽어낸다는 점입니다.
확장 프로그램을 실행하면 지정한 폰트에 대한 정보를 보여줍니다. 서체뿐만 아니라 굵기, 크기, 높이, 너비, 색상까지 확인할 수 있습니다. 마음에 드는 폰트를 북마크하려면 자매 서비스인 FontFace Dojo 계정이 필요합니다.
설치: FontFace Ninja
3. ColorPick Eyedropper
색감이 아무리 뛰어나더라도 RGB나 HTML 값을 모르면 온라인에서 본 특정 색상을 그대로 재현하기란 쉽지 않습니다. 다행히 ColorPick Eyedropper가 있다면 추측으로 색을 맞출 필요가 없습니다.
맥용 최고의 컬러 피커 앱처럼, ColorPick Eyedropper는 포인터가 가리키는 모든 색상의 값을 알려줍니다. 차이점은 항상 브라우저 안에 상주한다는 것이고, 무언가를 업로드할 필요 없이 아이콘을 클릭하고 원하는 위치에 타겟만 올려두면 됩니다.
이 확장 프로그램은 텍스트, 이미지는 물론 웹 페이지에서 볼 수 있는 거의 모든 요소(심지어 광고까지)에서 색상을 읽어냅니다. 색상을 캡처하면 HTML, RGB, HSL 값을 한 번에 확인할 수 있습니다.
설치: ColorPick Eyedropper
4. Dimensions
오픈소스 확장 프로그램인 Dimensions는 웹 디자이너, 특히 소규모 기업의 단발성 프로젝트를 맡는 디자이너에게 보물 같은 도구입니다. 클라이언트가 기존 파일이나 문서 없이 웹사이트만 넘기며 "이런 느낌인데 텍스트와 이미지만 바꿔주세요"라고 요청하면, 레이아웃을 파악하는 것 자체가 고역이 되곤 합니다.
Dimensions를 사용하면 페이지 내 모든 요소의 높이와 너비, 그리고 요소 사이의 여백까지 손쉽게 측정할 수 있습니다. 덕분에 기존 페이지를 재현하기도 쉬워지고, 완성된 디자인이 실제 구현된 후 검증하기에도 유용합니다.
설치: Dimensions
5. Visual Inspector
Visual Inspector는 디자인 팀을 위한 강력한 피드백 및 협업 도구로, 앞서 소개한 세 가지 확장 프로그램의 기능을 하나로 묶고 여기에 더 많은 기능까지 얹었습니다.
Inspect 탭에서는 페이지의 어떤 요소든 선택해 치수부터 파일 이름까지 상세한 정보를 확인할 수 있습니다. Colors와 Typography 하위 탭에서는 색상 팔레트와 사용된 모든 폰트를 한눈에 볼 수 있고, Assets 탭은 페이지의 모든 이미지를 한곳에 모아 보여줍니다.
Collaborate 탭에서는 팀원들과 피드백을 주고받으며 논의할 수 있습니다. 페이지의 아무 요소나 클릭하는 것만으로도 간단히 코멘트를 남길 수 있습니다.
대부분의 고급 도구가 그렇듯 Visual Inspector는 유료 요금제가 존재합니다. 코멘트 추가와 변경 사항 동기화를 이용하려면 사용자당 월 9달러부터 지불해야 합니다. 다만 색상, 폰트, 이미지 검사 같은 기본 기능은 무료로 사용할 수 있습니다.
설치: Visual Inspector
6. Easy Screen Capture
맥에서 스크린샷 찍기는 아주 쉽고, 윈도우에서도 조금만 번거로울 뿐이라 화면 캡처 확장 프로그램이 굳이 필요할까 싶을 수 있습니다. 하지만 Easy Screen Capture에는 분명한 장점이 있습니다.
무엇보다 화면에 보이는 영역이 아니라 웹 페이지 전체를 통째로 캡처할 수 있습니다. 긴 페이지에서 여러 문제점을 보고해야 할 때, 매번 스크린샷을 세네 번씩 찍어야 하는 수고를 덜어주는 귀한 기능입니다.
또 하나의 매력적인 기능은 캡처한 이미지를 클립보드에 복사해 채팅이나 이메일에 바로 붙여넣을 수 있다는 점입니다. 불필요한 이미지 파일이 컴퓨터에 쌓이는 것도 방지할 수 있죠.
설치: Easy Screen Capture
7. Muzli 2
마지막으로, 매일 아침 반드시 해결해야 할 중요한 과제가 있습니다. 바로 남아 있는 잠기를 털어내고 작업 리듬에 몸을 맞추는 일이죠. InVision의 Muzli 2는 예술, 디자인, UX, 기술 분야의 엄선된 아티클을 담은 아침 신문 역할을 해줍니다.
Muzli는 크롬의 기본 새 탭을 대체하며, 표시되는 콘텐츠를 직접 커스터마이징할 수 있습니다. 관심사에 따라 Dribbble, Behance부터 99designs, Creative Bloq까지 다양한 사이트의 피드를 추천해 줍니다. 첫 커피를 마시며 스크롤하기에 충분한 영감이 가득합니다!
디자인 콘텐츠로 가득 찬 브라우저 탭 하나가 부담스럽게 느껴진다면 Lite 버전도 있습니다. 이 버전은 기본 탭을 덮어쓰지 않으며, 확장 프로그램 아이콘을 클릭할 때마다 언제든 피드에 접근할 수 있습니다.
설치: Muzli 2
디자인 작업 전반을 위한 크롬 확장 프로그램 활용법
이 목록의 크롬 확장 프로그램들이 디자인 소프트웨어를 대체할 수는 없지만, 타이포그래피 정보 수집부터 동료와의 협업까지, 디자이너의 일상에서 벌어지는 사소한 작업들을 모두 커버해 줍니다.
크롬 웹 스토어가 이렇게나 많은 도구로 가득 차 있다는 걸 알게 되면, 새 확장 프로그램을 설치하는 것을 멈추기가 오히려 어려워질 겁니다. 확장 프로그램이 방치되기 전에 크롬 확장 프로그램을 효율적으로 관리하는 방법도 함께 익혀두시길 권합니다.