디자이너가 쓰기 좋은 크롬(Chrome) 플러그인

크롬 브라우저

웹 브라우저 시장에는 큰 변화가 있었다. 단연 IE 몰락과 크롬의 대두이다. 현재 주변 지인을 보거나 브라우저 시장 점유율만 찾아봐도 쉽게 변화를 확인할 수 있다. 첨부한 표를 보면 더욱 공감할 것이다.

 

브라우저 시장 점유율

 

특히나 크롬을 웹서핑 목적 외 디자이너와 개발자는 개발자 도구와 각종 플러그인을 이용하는 경우도 많을 것이다. 나 역시 크롬을 이용하면서 개발자 도구와 다양한 플러그인을 잘 사용하고 있다. 그래서 디자이너로 내가 사용하고 있는 플러그인은 어떤 것이 있는지 소개하고자 한다. 만약 모르고 있다면 한 번 사용해 보고 계속 사용해야 할지 판단해 보는 것도 좋을 것 같다.

 

우선 첫번째로 소개할 플러그인은 'CSS Peeper' 이다. 

 

CSS Peeper는 빠르게 웹사이트의 Text, Elements의 속성을 확인할 수 있는 도구이다. 플러그인 설치하고 실행하면 도구창이 실행되고, 확인하고 싶은 Text, Elemets를 선택하면 속성을 쉽고 빠르게 확인할 수 있다. 물론 개발자 도구로 CSS 속성을 확인할 수 있지만 플러그인을 사용하면 훨씬 쉽고 편하게 확인할 수 있어 나는 자주 이용하고 있다.

 

CSS Peeper를 실제로 사용해 본 화면이다. 아래 캡쳐 화면 처럼 정보를 확인하고 싶은 Text, Elements 를 선택하면 우측 Inspector 화면에 속성이 표시된다. 간단하게 웹사이트 내 요소의 속성을 쉽게 확인하고 싶을 때 유용하게 사용하는 플러그인이다.

 

CSS Peeper 실행화면

 

 

 

 

What Font는 웹사이트의 Text의 속성을 확인할 수 있는 플러그인으로 먼저 소개한 CSS Peeper와 중복되는 기능이다. 두 플러그인 모두 Text의 속성을 확인할 수 있으나 다른 차이는 What Font는 Text에 대해서만 확인이 가능하다.

What Font

CSS Peeper와 다르게 텍스트만 확인하고 싶을 때는 What Font로 빠르게 텍스트 속성만 확인한다. 만약 비슷한 기능의 플러그인 설치하고 싶지 않다면 굳이 설치할 필요는 없다.

 

 

 

ColorZilla는 웹사이트의 컬러값을 확인할 수 있는 플러그인으로 웹사이트 내 표시된 컬러 정보를 추출할 수 있다. 웹사이트에 컬러가 궁금하면 ColorZilla를 실행하여 확인하고 싶은 Element를 클릭하면 쉽게 색상값을 확인할 수 있다.

 

Color Zilla 실행화면

 

 

Design Grid Overay는 웹사이트에 그리드를 생성해볼 수 있는 플러그인으로 웹 디자인 시, 디자이너는 그리드 시스템을 이용하여 디자인 작업을 진행하는데 해당 플러그인을 통해 그리드를 만들어 확인하고 싶은 웹사이트가 어떤 그리드 시스템으로 디자인 됐는지 확인할 수 있다. 개인적으로 디자인 작업 시 그리드 시스템은 중요한 작업이라고 생각하기 때문에 다른 웹사이트의 그리드 시스템을 알아보기 위해 사용해 보는 것도 좋을 것 같다.

 

Web Grid 실행화면

 

 

Sizzy는 반응형 웹(Responsive Web) 화면을 한 번에 확인할 수 있다. 반응형 웹 사이트를 확인할 때 브라우저를 임의로 줄여서 보는 것이 아니라, 해당 플러그인을 실행하면 한 화면에서 해상도 별 화면을 확인할 수가 있다. 따라서 한 화면에서 디바이스별로 어떻게 표시되는지 쉽게 확인할 수 있다. 만약 반응형 웹 디자인(RWD)을 한다면 한 번 이용해 보길 추천한다.

Sizzy Homepage

 

 

Site Pallete는 웹사이트의 컬러를 추출해준다. 벤치마킹하거나 컬러가 너무 웹사이트가 있어서 컬러를 확인하고 싶을 때 사용하면 유용한 플러그인으로 컬러를 추출하는 시간도 길지 않아 손쉽게 해당 웹사이트의 컬러 정보를 확인할 수 있다. 나는 가끔 내가 좋아하는 브랜드의 웹사이트에 접속하여 해당 플러그인으로 컬러를 추출해 본다. 어떤 색상을 사용하고 있는지 궁금하기도 하고 어떤 이유에서 이런 컬러를 사용했는지 고민해보기 위해서다.

 

Site Pallete 실행화면

 

 

 

Page Ruler는 웹사이트의 구성 요소의 크기를 확인할 수 있는 플러그인이다. 각 컴포넌트의 거리를 측정하기 위해 Page Ruler를 실행하여 측정하고 싶은 요소를 드래그하면 좌표값과 함께 가로, 세로 크기를 쉽게 확인할 수 있다. 따라서 레퍼런스를 확인하면서 해당 디자인의 크기를 확인하고 싶을 때 아주 간편하게 사용하기 좋은 플러그인이다.

 

 

이 외에도 더 많은 플러그인을 사용하고 있지만 지금 소개한 플러그인은 웹디자인을 할 때 사용해보면 좋을 만한 플러그인이라고 생각한다. 모두 크롬의 관리자도구를 이용하면 전부 확인할 수 있지만 플러그인을 이용하면 쉽고 빠르게 확인할 수 있어 자주 사용하는 기능의 플러그인이 있다면 설치해서 사용하는 것을 추천한다.

 

단, 크롬이 브라우저 중에서도 메모리를 많이 먹는 브라우저로 유명하기 때문에 본인 데스크탑 성능을 고려해서 사용하면 좋을 듯 하다. 사용하지 않는 플러그인이 있다면 삭제하여 불필요하게 비대해지는 크롬을 만들지 말자.