웹 디자이너에게 꼭 필요하고 유용한 크롬 확장프로그램 5종을 소개합니다

최근 사물인터넷이 도처에 많이 보급되어 실용화 되어가고 있지만, 기업과 개인에게는 홍보와 포트폴리오를 위해 사이트를 제작하거나 외주를 통하여 제작하는 경우가 많이 있습니다.

더불어서 이런 일을 전문적으로 하는 회사 계열인 웹 에이전시 기업이 국내에 많이 존재하고 있습니다.

굳이 웹 디자이너가 아니더라도, 웹 프로그래밍 직종에서 업무하시는 분들을 위해 본 글을 바칩니다.

Tip! - 컨트롤키(커멘드키) + D 를 누르시면 즐겨찾기에 본 페이지를 저장할 수 있습니다.

1. Clear Cache

	제목	Clear Cache
	제작자	Benjamin Bojko
	프로그램 주소	https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn?hl=ko
	기능	웹 브라우저의 일시적인 캐시를 남김없이 제거합니다

본 확장 프로그램은 흔히들 말씀하시는 캐시를 지우는 확장 프로그램입니다.

캐시란 웹 사이트 로드를 빠르게 하기 위해 일시적으로 브라우저의 임시폴더에 저장하는 더미 파일들인데요.

가끔 가다 CSS를 적용했음에 불구하고 반영이 되지 않는다거나, 스크립트를 넣었는데 작동이 안되는 경우 등이 있어 사용하는 확장프로그램입니다.

사용법은 설치 후 간단히 버튼을 눌러주는 것만으로도 사용이 완료됩니다.

특히, 설치 후 나오는 다음과 같은 화면에 당황하신 분들이 종종 계실탠데요.

이 창은 닫아주셔도 별 무리 없으니 닫아주셔도 좋습니다.

적어도 이 확장프로그램을 사용하시면 CSS나 자바스크립트 같은 확장으로 삽질할 일은 덜하겠죠?

---

2. User-Agent Switcher for Chrome

	제목	User-Agent Switcher for Chrome
	제작자	Glenn Wilson
	프로그램 주소	https://chrome.google.com/webstore/detail/user-agent-switcher-for-c/djflhoibgkdhkhhcedjiklpkjnoahfmg
	기능	웹 브라우저 환경을 임의로 조작합니다

User-Agent 라 함은, 웹 브라우저에서 PC로 접속했는지, 모바일로 접속했는지, 또 무슨 기기에서 접속했는지 웹 서버에 알려주는 일종의 구호인데요.

이걸 조작하여 모바일인척, 윈도우 인척 사이트를 속일 수 있으며, 간단히 이를 통해 PC사이트의 유사성등을 파악할 수 있습니다.

* 미디어 쿼리로 제작한 사이트는 그냥 브라우저 크기를 줄였다 늘였다 해야합니다.

미디어 쿼리는 전~~~~혀 적용을 받지 않기 때문이죠.

주로 모바일이나 PC 판별용으로 주로 많이 사용되고 있습니다.

또한 운영체제가 윈도우 계열인지, 유닉스 계열인지 등의 판단용으로도 사용되기도 합니다.

예를 들어서 유저에이전트가 필자의 경우는

Mozilla/5.0 (······중략······) Safari/537.36

으로 이루어져 있습니다.

위는 프로그램 이미지인데요. 브라우저/기기별로 상세하게 정리가 되어 있습니다.

다시 원 상태로 복귀할 땐, Chrome -> Default로 복귀하면 되니 엄청 간단하죠?

---

3. Pig Toolbox

	제목	Pig Toolbox
	제작자	Smart Software
	프로그램 주소	https://chrome.google.com/webstore/detail/pig-toolbox-super-gesture/oiplkfaidhjklglajdpfehoagkmlcakh
	기능	기능이 많아서 설명을 못 할정도입니다. 종합 툴킷입니다.

* 확장 프로그램 설치 후 크롬 재시작이 필요합니다! 일부 기능이 작동하지 않을 가능성이 80%가 넘습니다.

이 확장 프로그램은 인터넷 익스플로러의 "툴바"와 유사한 기능과 쓰임을 가지고 있습니다.

토렌트 검색은 물론, 각종 강력한 기능을 제공하지만.....

마우스 우클릭 막힘 풀기 기능과, 마우스 제스쳐(마우스 우 클릭 후 이리저리 움직이면 화면이 닫히거나 하는 효과) 때문에 추천드리고자 합니다.

주로 소스를 봐야 하거나 다른 사이트를 퍼블리싱 해야 하는 경우, 마우스 우 클릭이 필요한 경우가 매우 많습니다.

그럴 때 가장 스트레스 받는게 마우스 우클릭 방지가 아닐까 싶은데요.

Alt키 + F7 버튼을 누르고 이후에 F7 버튼을 누르면 모든 우클릭/드래그 방지가 풀려서 편하게 작업하실 수 있습니다.

---

4. Window Resizer

	제목	Window Resizer
	제작자	Ionuț Botizan
	프로그램 주소	https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=ko
	기능	화면 크기를 일정 해상도에 맞춰서 표시합니다.

이건 디자이너에게 매우매우 좋은 확장 프로그램인데요.

그냥 설명이 필요 없고..

여기에 출력되는 해상도를 누르면, 크롬 화면 사이즈가 바뀌며, 설치 후에는 화면을 줄이거나 늘릴 때(리사이징시) 화면 우측 하단에 

이런 화면 값 안내 박스가 튀어나와서 웹 사이트의 사이즈를 쉽게 판단할 수 있게 도와주는 확장 프로그램입니다.

(약 2초 후 페이드 아웃으로 사라집니다)

---

5. ColorZilla

	제목	ColorZilla
	제작자	colorzilla.com
	프로그램 주소	https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp/related?hl=ko
	기능	웹 브라우저에서 색상을 추출합니다.

매우 널리 알려진 확장 프로그램입니다.

이 확장 프로그램은 웹 페이지에서 색상 추출은 물론, 자체 Color Picker 를 내장하여 웹 퍼블리싱/디자인시 쉬운 색상 따기를 할 수 있습니다.

노란색으로 표시한 확장 프로그램 아이콘을 누르시고, 색상을 추출하고 싶은 영역에 마우스를 가져다 대면

이런 식으로, RGB 값과, 색상 코드가 같이 나와서 쉽게 색상을 추출할 수 있습니다.

사실상 이 확장 프로그램 하나로, 모든 웹 사이트 색상은 다 딸 수 있다고 봐도 무방하겠습니다.

 

아래의 사랑표(하트)버튼을 눌러주시면 블로그에 매우 큰 도움이됩니다. 히히

Copyright © 이동마이의 컴퓨터 하루 & 이서현(myskys2) All Rights Reserved.