웹을 통해 새로운 창조를 꿈꾸는 인간 - 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 : 587
웹디자이너 비주얼 인스펙터 확장 프로그램
목록보기이전보기

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

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


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


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

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


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

홈페이지 이동하기 : https://www.canvasflip.com/visual-inspector/
 
Posted by kimdirector | 2018.03.14 | Hit : 587
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
Best View 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
UX리서치 무료 프리젠테이션 게티이미지코리아 커뮤니케이션 네비게이션 인재 디자인 아이패드 디지털데일리 모바일 글꼴 사용자 경험 웨어러블 사용성 협업 아이폰 홈페이지 Example 애플리케이션 개발자 kimdirector 모바일 프리랜서 Adobe 모바일 앱 네이버 웹디자인 CIP 솔루션 HTML5 페이스북 웹표준 Adobe 이벤트 로고디자인 UI CEO 윈도우7