크롬 확장 프로그램 추천, 비주얼 인스펙터(Visual Inspector) 디자인 분석 툴

크롬 확장 프로그램 추천, 비주얼 인스펙터(Visual Inspector) 디자인 분석 툴

 

환경: Chrome

 

크롬은 개발자들을 위해 웹 사이트 분석도구를 제공합니다. 그것이 바로 F12 를 누르면 나타나는 개발자도구 화면입니다. 현재 보고 있는 웹페이지의 구성 요소들을 확인할 수 있습니다. 하지만 코드로만 볼 수 있어서 직관적이지 못합니다. 그래서 확장 프로그램으로 비주얼 인스펙터(Visual Inspector) 를 많이 사용합니다.

 

▼ 캔버스클립에서 제공하는 비주얼 인스펙터는 웹사이트 분석도구입니다. 크롬의 확장 프로그램으로 설치가 가능합니다. 해당 웹사이트의 색상 구성, 글꼴, 이미지 등을 한눈에 확인할 수 있습니다. 설치를 위해 오른쪽 상단에 있는 더보기 > 설정 메뉴를 선택합니다.

 

▼ 설정 화면에서 접근성 > Chrome 웹 스토어 열기 링크를 클릭합니다. 비주얼 인스펙터를 다운받기 위한 웹 스토어로 이동하기 위해서 입니다. 

 

▼ Chrome 웹 스토어에서 “visual inspector” 을 검색한 후 설치합니다. 배포하는 회사는 canvasflip.com 입니다. 

 

▼ 설치가 끝나면 화면에 3가지 선택 옵션이 나타납니다. 무료 사용을 위해 왼쪽 카드에 있는 Sign Up for free 를 클릭합니다. 

 

▼ 오른쪽 상단에 생긴 확장 프로그램 아이콘을 클릭해 보세요. 비주얼 인스펙터 분석 화면이 팝업으로 나타납니다. 

 

▼ 비주얼 인스펙터 분석 화면을 띄운 후 마우스로 웹페이지를 클릭해 보세요. 화면에는 빨간색 라인으로 영역의 경계가 표시되고 팝업에 분석 내용이 나타납니다. 웹페이지에서 해당 객체의 위치, 사이즈 이미지 종류 등 다양한 정보를 표시합니다. 

 

▼ 팝업에서 각 구성 요소에 임으로 값을 수정하면 디자인을 변경할 수 있습니다. 주로 소스를 반영하기 전에 테스트할 때 많이 이용합니다. 

 

▼ 세 번째 탭에는 선택한 영역에 반영된 CSS 를 보여줍니다. 

 

▼ 다섯 번째 탭에는 반영된 폰트의 종류를 보여 줍니다. 

 

▼ 마지막 탭인 사진기 모양에는 화면에 사용된 아이콘이나 이미지에 대한 정보를 알려 줍니다. 파일을 다운받을 수도 있습니다.