[크롬 확장] 'Eye dropper' :: 웹페이지의 특정 부분 색을 추출하는 확장 프로그램

(처음)
웹개발까지는 아니더라도 블로그나 웹사이트 등을 관리하시는 분이라면, 웹사이트에서 어떤 특정 부분의 색깔의 코드가 궁금할 때가 종종 있으실 것입니다.

조금 전, 저의 경우, 이 블로그의 배경 색깔을 어둡고 칙칙한 색으로 바꾸었다가 다시 원상 복귀시키려고 했지만, 도통 코드가 기억나지 않더군요.
회색이라는 것은 사람의 감각으로 알고 있었지만, 그 다음.
여섯자리의 코드가 기억나지 않는 것이었지요.

구글링을 하기 전에 '스키치(Skitch)', '씨숄(Seashore)'을 돌려서 알아보려 했으나..
안타깝게도 RGB코드를 알려주지는 않네요.. 엉엉.ㅠ

그래서 구글링을 하고서 이에 유용한 크롬(Chrome) 확장 프로그램(Extension)을 발견했습니다. :)


(가운데)
'Eye Dropper(아이 드롭퍼)' 설치!
크롬의 확장 프로그램 설치는 너무나도 쉽습니다.
이미 아이 드롭퍼를 설치하시는 정도라면, 크롬 확장 하나쯤은 사용하고 계시겠지요? :)
아니시더라도 상관 없습니다.
아래 링크로 타고 가셔서 오른쪽 위에 보이는 [CHROME에 설치] 버튼을 클릭하시고, 계속해서 나오는 메시지에서 [설치] 버튼을 클릭하면 됩니다.

Chrome 웹 스토어 - Eye Dropper
https://chrome.google.com/webstore/detail/hmdcmlfkchdmnmnmheododdhjedfccka

'eye dropper' 설치

아이 드롭퍼를 이용해 웹페이지의 색상 추출하기.
확장을 설치하고 나면, 아래 제가 직접 찍은 스크린샷처럼 중고등학교 시절 과학실에서 많이 보던(...) 스포이드 모양의 아이콘이 생깁니다.

'eye dropper' : 확장 아이콘

스포이드 아이콘을 클릭하면, 아래처럼 창이 등장합니다.
그럼, [Pick color from webpage](번역: 웹페이지에서 색상을 추출하기) 버튼을 클릭하세요.

'eye dropper' : 색상 추출.

그리고나면, 마우스의 커서 모양이 바뀝니다.

잠깐, 여기서 한마디.
만약, 크롬에서 확장이 제대로 작동하지 않는다면, 크롬을 완전히 종료하시고 다시 실행시켜봅니다.
맥의 경우, 단축키 조합인 '[command] + [Q]'를 이용합니다.

마우스 커서가 바뀌고, 아래 스크린샷처럼 크롬에서 오른쪽 구석에 마우스 커서가 가리키고 있는 부분의 색상에 대한 HTML 코드와 RGB 코드가 나타납니다.

'eye dropper' : 코드 표시.

위 스크린샷의 웹사이트는 제가 색상 코드를 확인할 때 주로 사용하는 웹사이트로입니다.
아래 링크를 참고하세요. :)

Color Name 색상이름표   rgb 코드
http://netmeeting.com.ne.kr/data/data-rgb.html 

색상 추출에서 빠져나가려면, 마우스의 오른쪽 클릭(보조 클릭)을 하면 됩니다.


아이 드롭퍼를 조금 더 활용해보기.
아이 드롭퍼 확장 프로그램은 생각보다 더 많은 기능을 지원합니다.

색상 추출하기에서 웹사이트의 특정 부분을 클릭을 하면, 아래 스크린샷처럼 그 부분의 색상 정보가 확장 안의 히스토리 안에 남게 됩니다.

'eye dropper' : 색상 히스토리

색깔이 있는 박스 위에 마우스 커서를 올리면, 그에 대한 HTML 코드를 알 수 있습니다.
만약, 히스토리를 모두 지우고 싶다면, 아래의 [Clear colors history](번역: 색상 히스토리 지우기)를 클릭하면 됩니다.

이번에는 위의 탭들 중에서 [Color picker](번역: 색상 추출기)를 클릭해봅니다.
그러면, 이미지 편집 프로그램에서 흔히 볼 수 있는 색상 판넬이 보입니다.
포토샵이나 그림판(...) 등을 한번이라도 다뤄보신 분은 때때로 간단하고도 아주 유용하게 사용하실 수 있을 것 같네요. :)

'eye dropper' : 색상 추출기

옵션 살펴보기.
아이 드롭퍼에서 오른쪽 아래에 있는 'Option'을 클릭하면, 확장 프로그램임에도 불구하고, 다양한 옵션을 제공하는 것을 볼 수 있습니다.
옵션 부분의 설정들을 제가 직접 몇가지 번역해서 아래 정리해보겠습니다.

Main(메인) 탭.

'eye dropper' 옵션

Automaticaly copy picked color to clipboard when picking from webpage
 : 웹페이지에서 색상이 추출되면, 자동으로 색상을 클립보드에 저장합니다.

Do not copy # character, only RGB color
 : 오로지 RGB 색상 코드만 복사하고, # 문자는 복사하지 않습니다.

Disable webpage picking with mouse right click
 : 마우스 오른쪽 클릭으로 웹페이지 추출을 끕니다.

Appearance(외형) 탭.

'eye dropper' 옵션

Dropper cursor:
 : 드롭퍼 커서의 모양을 설정합니다.
move mouse over icon to see how it looks like
 : 마우스를 아이콘 위에 올려보면, 어떤 모양인지 알 수 있습니다. 

Enable box with color information in right bottom corner 
 : 오른쪽 아래 구석에 색상 정보 박스를 보이게 합니다. 

Enable color tooltip next to the mouse cursor
 : 마우스 커서 옆에 색상 툴팁(정보)를 보이게 합니다.

Color picker(색상 추출기) 탭.

'eye dropper' 옵션

Completely disable Color picker
 : 색상 추출기가 보이지 않게 만듭니다.

Keyboard Shortcuts(키보드 단축키) 탭.

'eye dropper' 옵션

Pick color from webpage: none
 : 웹페이지에서 색상 추출하기: 없음.

이 페이지에서 'none' 부분을 클릭하면, 단축키를 아래 스크린샷처럼 설정할 수 있습니다.

'eye dropper' 옵션

Shortcut:
 : 단축키:

Just press any keyboard shortcut you want to assign to this function and press Save when you are done.
 : 이 기능에 원하는 단축키를 키보드로 누르고, 준비가 됬으면 Save를 누릅니다.

[Disable shortcut]
 : 단축키 없애기.

[Save shortcut]
 : 단축키 저장하기.


(끝)
오늘 찾은 이 확장 프로그램, 아이 드롭퍼가 매우 유용할 것 같아 소개하는 내내 매우 뿌듯합니다.

도움되셨길 바라며, 포스팅을 줄입니다.
고맙습니다. 좋은 하루 되세요. :)

 + 이 글은 아래 링크의 도움을 받아 작성되었습니다.

배움과 나눔    블로그 스킨 편집에 도움되는 구글크롬 확장프로그램들
http://lovemyself.tistory.com/141 

포스팅 끝.
2012년 2월 27일 일요일.