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

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

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


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


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

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


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

홈페이지 이동하기 : https://www.canvasflip.com/visual-inspector/
 
Posted by kimdirector | 2018.03.14 | Hit : 656
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
폰트 전달 이미지 다운로드 홈페이지 로고디자인 웹사이트 HTML5 원격 데스크톱 CSS 반응형 네비게이션 웹디자인 PM 개발자 디자인 결제 OS 기술 접근성 퍼블리셔 포토샵 스마트폰 로고 활용팁 PSD 픽토그램 이미지 사용자 경험 인맥관리 바이러스 Parallax 디자인 iOS 네이버 예술가 마크업 플랫 아이디어 HTML5