트렌드

[블로팁] 웹디자이너라면 설치하자, ‘비주얼 인스펙터’

2017.09.12

개발자도구를 열어봤다

‘F12’를 누르면 등장하는 개발자도구는 무척 유용하다. 개발자도구를 활용하면 지금 보고 있는 웹페이지의 구성요소를 확인하고 부분적인 수정도 해 볼 수 있다. 문제는 이 개발자도구가 전혀 직관적이지 못하다는 데 있다. 기본적인 코딩을 모르면 접근성이 대폭 떨어진다. 이 문제를 해결해줄 수 있는 도구가 등장했다. 사용자 경험 분석 도구를 제공하는 캔바스플립의 ‘비주얼 인스펙터’다.

비주얼 인스펙터 소개 페이지 갈무리

비주얼 인스펙터 소개 페이지 갈무리

비주얼 인스펙터 소개 페이지 갈무리

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

네이버 검색창을 상-큼한 하늘색으로 바꿔보았다

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

chaibs@bloter.net

뉴스, 콘텐츠, 미디어, 플랫폼