웹디자이너와 블로거에게 강력히 추천하는 OS X 색상 선택 패널 튜닝

2012.10.21 18:46    작성자: ONE™

들어가며

Back to the Mac 블로그는 워드프레스용으로 제작된 NeoEase 테마를 Tyzen님이 티스토리에 적용되도록 수정한 것을 사용하고 있습니다. 하지만 좀 더 깔끔하고 차분한 분위기를 내고 싶어 세부적인 부분을 제 입맛에 맞게 여기저기 많이 수정해서 쓰고 있습니다. 다행히 소시적에 HTML 공부를 해둔 것이 현재 블로그 스킨과 css 스타일을 수정하는데 좋은 밑거름이 되고 있습니다. 처음에 고군분투하면서 코드를 익힐 때만해도 과연 이런걸 써먹을 날이 올까 상당히 회의적이었는데 역시 젊어서 고생은 사서도 한다는 말이 맞는 것 같습니다 :-)

OS X 소프트웨어 중 웹디자인이나 블로깅을 좀 더 편하게 할 수 있게 해주는 다양한 솔루션이 나와있지만 블로깅을 하는 시간보다 이런 툴을 익히는게 시간이 더 걸릴 정도로 기능이 복잡한 경우가 많고, 또 전업 웹디자이너가 아닌데 불필요하게 시스템 자원을 낭비하는 것 같아 이런 툴들을 거의 사용하지 않고 대부분 텍스트 편집기에 전적으로 의지하고 있습니다.

그런데 웹페이지의 기본적인 레이아웃 수정이나 CSS 엘레먼트, 스크립트 관련 부분은 텍스트 편집기로 대부분 처리할 수 있는데 서체나 테이블의 색상을 지정해 주기 위해 알아야 하는 색상 코드는 OS X 자체적으로 제공되는 기능이 없어 어쩔 수 없이 외부 프로그램의 도움을 받는 수 밖에 없습니다. 애플은 OS X에 '색상 선택(Color Picker) 패널'이라는 심플하면서도 강력한 색상 팔레트를 준비해 두었음에도 RGB 색상 코드 기능을 포함하지 않아 웹디자인용으로 색상 선택 패널을 활용하는데 상당한 제한이 따라오는 편입니다. 

하지만 비교적 간단한 방법으로 OS X 기본 색상 선택 패널에 RGB 색상 코드 기능을 추가하고, 또 색상 선택 패널을 독립적으로 실행되도록 스크립트를 짜 웹디자인과 블로깅에 활용할 수 있는 방법이 있습니다.

적용 방법

0. 일단 최종 결과물이 어떤 것인지 먼저 보여드리겠습니다.

외부 프로그램이 아닌 OS X의 자체 색상 선택 패널에서 색상 RGB 코드 기능을 추가해 줄 수 있습니다. 쉽게 말해, 별도의 프로그램을 실행할 필요없이 맥 화면에 표시되는 그 어떤 픽셀의 색상값도 쉽게 [딸 수 있고(Pick)], RGB 코드를 직관적으로 [파악할 수]있으며, HTML이나 CSS 코드에 바로 [붙여넣기] 해줄 수 있습니다.

1. 그럼 바로 설치에 들어가 보도록 하죠. 이 RGB 코드 분석 탭의 이름은 'RCWebColorPicker'이며, '플러그인' 형식으로 개발자 홈페이지에서 무료로 배포되고 있습니다. 모든 OS X 버전과 호환되며 다음 링크에서 내려받을 수 있습니다.

➥ RCWebColorPicker 다운로드 링크 (무료) / 개발자 홈페이지

+ 2012년 10월 25일 업데이트: 웹디자인 뿐만 아니라 앱 개발에 사용할 수 있는 보다 강력한 컬러 픽커를 발견했습니다 :-)

➥ Developer Color Picker 다운로드 링크 (무료)

2. 내려받은 dmg 파일을 마운트하면 안에 RCWebColorPicker.colorPicker 라는 이름의 파일이 있는데, 이를 사용자 라이브러리 폴더의 ColorPickers 폴더에 넣어 줍니다. ➥ 참고: OS X 사용자 라이브러리 폴더에 접근하는 10가지의 다양한 방법

3. 시스템을 재부팅하면 RGB 코드 분석 탭이 색상 선택 패널에 추가되며 텍스트 편집기를 비롯한 모든 맥용 프로그램에서 색상 관련 작업을 할 때 사용할 수 있습니다.

하지만...

색상 선택 패널은 텍스트 편집기나 포토샵 같이 '단독으로 실행 할 수 있는 프로그램'이 아니기 때문에 항상 다른 프로그램을 경유해서 실행해야 한다는 문제가 있습니다.

이때 한가지 작업만 더 추가로 해주면 색상 선택 패널도 일반 프로그램과 마찬가지로 사용자가 필요한 즉시 단독으로 실행하는 것이 가능해집니다.

애플스크립트(Applescript)로 색상 선택 패널을 띄우는 명령어를 응용 프로그램 타입으로 래핑해야하는데 그냥 복잡한 것 싫다!고 하시는 분들을 위해 미리 작업해둔 프로그램을 올려드립니다. 아래 파일을 내려받으신 후 응용 프로그램 폴더에 넣고 그냥 실행만 해주시면 됩니다.

ColorPicker.zip

* 이렇게 만든 (애플스크립트) 프로그램에 OS X의 디지털 컬러 측정기의 아이콘을 그대로 복사해 넣어주었습니다^^


이제 좀 더 편하게 색상 코드를 확인하세요!

프로그램 코드 보기

• 응용 프로그램 폴더에 위 ColorPicker 프로그램을 넣어두시고 스팟라이트(Spotlight)나 알프레드(Alfred), 혹은 퀵실버(QuickSilver)를 통해 실행하면 필요할 때 신속하고 편하게 사용하실 수 있습니다. 아니면 애플스크립트를 지원하는 런쳐 프로그램(예: Alfred)에 애플스크립트 형식 그대로 등록해 놓고 사용하셔도 무방합니다. 

이제 색상 RGB 값 구한다고 맥 앱스토어에서 유료 프로그램들 돈 주고 구매하실 필요가 없습니다 :-) 기능적인 면에서 상용 프로그램에 비해 전혀 부족하지않고, 또 OS X에서 원래 제공되는 기능처럼 시스템과 일체감이 상당히 우수하기 때문입니다.

한 가지 더

색상 선택 패널 하단에는 자주 사용하는 색상을 미리 등록해 놓을 수 있는 격자 모양의 테이블이 있습니다. 

기본적으로 15개가 표시되는데 아래 점 모양의 버튼을 아래로 드래그하면 이 격자 테이블이 늘어나며 최대 150개까지 색상을 저장해 놓을 수 있습니다. (애플은 이런 건 참 꼼꼼하 만들어놨으면서 왜 RGB 코드 기능은 넣어주지 않았는지.. 그래도 플러그인 형식으로 부가 기능을 추가해 줄 수 있는 점은 높이 살만합니다.) 



같이 읽으면 좋은 글
• 맥 관련 블로그를 운영하시는 분들을 위한 추천 무료 어플 - Shade
• 블로그 글을 편하게 읽을 수 있는 사파리 읽기 도구가 OS X 업그레이드 후 비활성화 되는 문제와 해결 방법

저작자 표시 비영리 변경 금지
신고
    
  1. Blog Icon
    멤멤

    와.. 이런게 있었군요! 평상시 이런게 있었으면 했는데 정말 감사합니다!

  2. Blog Icon
    oyster

    와~ 최근 코다로 작업하면서...
    컬러픽이 안되는 곳이 있어서.... 색상코드가 있었으면했는데...
    원님이 이렇게 또 귀한 도움이 주시네요.
    너무 너무 너무 감사합니다~~ 복많이 받으실거에요^^ 최고!!

  3. 전 spot color라는걸로 흐고 있어요 ㅎㅎ
    색을 rgb, hex로 바꿔서 복사도 돼서 편하더라구요

  4. 살펴보니 R/G/B 별 슬라이드 기능이 없는 대신 NSColor로 따는 기능이 있군요. 조금 더 개발자 중심의 컬러 픽커인 것 같습니다. 훌륭하네요.
    다른 분들도 참고하시게 링크로 남겨둡니다.
    http://zachwaugh.com/spotcolor/

  5. 쎄미님, 말씀하신 픽커보다 좀 더 기능이 다듬어진(?) 컬러 픽커를 찾았습니다 :-)
    http://panic.com/~wade/picker/

  6. 우오왕~ 고맙습니다~~

  7. ㄷㄷㄷ spot color는 저 컬러피커 창 제목이지 피커 컴포넌트? 이름이 아니군요 ;;;;;;

    제가 쓰고 있는게 developer picker 였어요 ;;;;;

  8. Blog Icon
    라라별

    후아... 정말 감사합니다 눈물이 납니다

  9. Blog Icon
    iduMees

    pages 쓸 때 rgb가 없어서 불편했는데 정말 감사합니다.

  10. 이미지 편집 작업을 많이 하는 저도 거의 매일 이용하는 기능 중 하나입니다.
    정말 유용하죠 :-)

  11. Blog Icon
    마늘대디

    정말 좋은정보 감사합니다 ^^

티스토리 툴바