웹을 통해 새로운 창조를 꿈꾸는 인간 - kimdirector
www.kimdirector.co.kr Photo by unsplash.com
kimdirector
Creative Web & Mobile UI/UX Planner and Designer
Humans dreaming of new creation through the UI/UX



GUESTROOM
Download Review
HOME GUESTROOM Download Review
웹디자이너라면 설치하자, ‘비주얼 인스펙터’
Posted by kimdirector | 2018.03.14 | Hit : 770
웹디자이너 비주얼 인스펙터 확장 프로그램
목록보기이전보기

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

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


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


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

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


보다 자세한 내용을 알고 싶으신 분들은 홈페이지에서 확인할 수 있습니다.
일단 설치는 진행되지만, 프로그램을 사용하기 위해서는 로그인이 필요하며, 기본으로 제공되는 툴 자체로만으로 만족할 수 없다면 일정 비용을 지불하고 유료로 전환해 보는 것도 나쁘지 않을 것 같습니다. 판단은 개인의 몫이니까요.

홈페이지 이동하기 : https://www.canvasflip.com/visual-inspector/
 
Posted by kimdirector | 2018.03.14 | Hit : 770
Origin http://www.bloter.net/archives/289732
Tags 웹디자이너 비주얼 인스펙터 확장 프로그램
Trackback http://www.kimdirector.co.kr/bbs/zerotb.php?id=Download&no=116

COMMENT
목록보기 이전보기
GUESTROOM
Leaders Story
Download Review
Practical Use Tip
IT Information & News
Insight Story
Popular Contents
Category Cloud
About us Review Portfolio Design Review Leaders Story Mobile UXD IT Information Web Identity Everyday Story Mobile Life Webdesign
Web Standard Homepage Work Web Plan Report Practical Use Tip Inspiration Download Recommend Site
Tags
웹사이트 시계 실버라이트5.0 애플리케이션 UI 테더링 시작 삼성전자 디자인 Codepen 웹기획 플래시 디자인 모바일 스마트폰 아이폰 CIP GUI 마이크로소프트 프레임 홈페이지 스크린세이버 에버노트 아이콘 웹표준 로고디자인 디자이너 트위터 트렌드 PS PLAY 가이드 의사소통 쇼핑몰 마우스 웹디자인 Font PNG 셔터스톡 솔루션