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

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

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

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


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

'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일 일요일.


Posted by 까만거북이

댓글을 달아 주세요