[Chrome] Visual Inspector by CanvasFlip

[Chrome] Visual Inspector by CanvasFlip

http://www.bloter.net/archives/289732

‘F12’를 누르면 등장하는 개발자도구는 무척 유용하다. 개발자도구를 활용하면 지금 보고 있는 웹페이지의 구성요소를 확인하고 부분적인 수정도 해 볼 수 있다. 문제는 이 개발자도구가 전혀 직관적이지 못하다는 데 있다. 기본적인 코딩을 모르면 접근성이 대폭 떨어진다. 

이 문제를 해결해줄 수 있는 도구가 등장했다. 

사용자 경험 분석 도구를 제공하는 캔바스플립의 ‘비주얼 인스펙터’다.

비주얼 인스펙터는 크롬에 설치해 사용하는 확장프로그램이다. 해당 웹사이트의 색상 구성, 글꼴, 이미지 등을 한눈에 확인할 수 있게 보여준다. 개발자도구를 활용하기 편한 방식으로 보여주는 도구다. 개발자와 소통하며 일해야 하는 디자이너나 기획자에게 무척 편리하다. 물론, 직관적인 방식은 누구에게나 접근성이 좋기 때문에 개발자에게도 편하다.

구성요소 중 하나를 클릭하면 어떤 요소인지 알려준다. 직접 수정할 수도 있다. 위치와 사이즈도 변경할 수 있으며, 회전시켜볼 수도 있다. 당연히 색상도 바꿔볼 수 있고, 정렬도 수정해볼 수 있다. 기타 등등 웹디자인에 필요한 대부분 요소를 확인하고 고쳐볼 수 있다. 이렇게 고쳐본 결과물은 이미지 파일로 받을 수도 있다. 당연히 사용자가 지금 보는 화면의 요소만 고쳐본 것일 뿐, 실제 서버에 적용되는 것은 아니기 때문에 걱정할 필요는 없다.

...

...