[Visual Inspector] 디자이너를 위한 툴 비주얼 인스펙터 (Visual Inspector)

 

 

[Visual Inspector] 디자이너를 위한 툴 비주얼 인스펙터 (Visual Inspector)

크롬을 쓰다보면 필요한 프로그램을 크롬에 직접 설치하여 쓰는 경우가 많은데,

이러한 확장 프로그램들을 쓰다보면 용량만 차지하고 쓰지는 않는 프로그램들이 있는 반면에,

편리하게 실무에서 자주 쓰게 되는 확장 프로그램들이 생기기 마련입니다.

 

비주얼 인스펙터 (Visual Inspector)가 바로 그런 프로그램인데요,
비주얼 인스펙터는 디자인 분석 툴로 웹 사이트에 적용된 위치, 불투명도, 색상, 그라디언트, 타이포 그래피 등의

구성요소를 빠르고 간편하게 확인할 수 있는 아주 편리한 툴입니다.

소개글로 디자이너가 디자인을 위해 제작되었다고 해도 과언이 아닌데요.

 

먼저 크롬에서 아래 URL로 접속하여 해당 확장 프로그램을 다운로드, 설치해줍니다.
https://chrome.google.com/webstore/detail/visual-inspector/efaejpgmekdkcngpbghnpcmbpbngoclc?hl=ko

 

 

설치가 완료되면 우측에 하늘색 눈 모양의 작은 아이콘이 생기는데,
네이버로 들어가서 해당 창을 열어보도록 하겠습니다.

 

 

창을 열고 네이버 로고를 클릭하니, 해당 위치가 한 눈에 보기 쉽게 표시가 되는데요,
(창 외의 부분은 프로그램 내에서 어두워지는 게 아니라 보기 편하게끔 제가 임의로 처리하였습니다.)

 

 

 

 

이런 식으로 위치가 확인이 가능할 뿐만아니라 각 탭에서
해당 페이지에 대한 정보를 손 쉽게 확인할 수 있고 또 변형하는 것도 가능합니다.
(변형을 한다해서 해당 페이지에 실질적으로 영향을 주지는 않습니다.)

 

 

 

 

색상 코드 확인은 물론 폰트 관련 정보도 손쉽게 알 수 있어 페이지를 서치할 때 큰 도움이 됩니다.
또한 페이지에 쓰이고 있는 이미지도 Export 버튼으로 손쉽게 다운로드도 가능합니다.