웹사이트를 보다 보면 마음에 드는 색상을 발견하는 경우가 있습니다.
브랜드 홈페이지의 메인 컬러가 깔끔해 보이기도 하고, 상세페이지의 버튼 색상이 눈에 들어오기도 합니다.
예전에는 이런 색상을 참고하려면 화면을 캡처한 뒤 포토샵을 열어 스포이드(Eyedropper) 도구로 직접 색상을 추출 했었습니다.
과정도 번거롭고, 이미지 압축 때문에 실제 색상과 조금 다르게 추출되는 경우도 있었습니다.
하지만 ColorZilla를 사용하기 시작한 이후에는 작업 방식이 많이 달라졌습니다.
웹사이트에서 원하는 부분을 클릭하기만 하면 HEX, RGB 등의 색상 코드를 바로 확인할 수 있었고, 별도의 프로그램을 실행하지 않아도 필요한 컬러를 바로 복사해 사용할 수 있었습니다.
홈페이지 제작, 상세페이지 디자인, 브랜드 컬러 분석처럼 색상을 자주 참고하는 작업에서는 지금도 가장 먼저 설치하는 크롬 확장 프로그램 중 하나입니다.
이번 글에서는 ColorZilla 설치 방법부터 실제 활용법, 그리고 작업하면서 느꼈던 팁까지 자세히 소개해 보겠습니다.
ColorZilla란?
ColorZilla는 웹사이트에 사용된 색상을 추출할 수 있는 구글 크롬 확장 프로그램입니다.
브라우저 안에서 원하는 위치를 클릭하면 해당 색상의 HEX, RGB 값을 바로 확인할 수 있으며, 복사 기능도 함께 제공합니다.
디자이너뿐만 아니라 개발자, 마케터, 홈페이지 운영자도 많이 사용하는 도구입니다.
특히 다음과 같은 작업에서 활용도가 높습니다.
- 홈페이지 컬러 분석
- 브랜드 컬러 확인
- 상세페이지 색상 참고
- 버튼 색상 추출
- 배경색 확인
- UI 디자인 벤치마킹
단순한 색상 추출 기능이지만 실무에서는 생각보다 자주 사용하는 도구입니다.
설치 방법
ColorZilla는 크롬 웹 스토어에서 무료로 설치할 수 있습니다.
1단계
크롬 웹 스토어에 접속합니다.
chrome 웹 스토어 바로 가기 →2단계
검색창에 ColorZilla를 입력합니다.
3단계
Chrome에 추가 버튼을 클릭합니다.
4단계
권한을 확인한 후 설치를 완료합니다.
설치가 끝나면 브라우저 오른쪽 상단 퍼즐 모양 아이콘에서 확인할 수 있습니다.
자주 사용할 예정이라면 압정 아이콘을 눌러 고정해 두는 것을 추천합니다.
기본 사용법
설치가 완료되었다면 사용 방법은 매우 간단합니다.
색상 추출하기
ColorZilla 아이콘을 클릭합니다.
“Pick Color From Page”를 선택합니다.
이후 마우스를 움직이면 현재 위치의 색상이 실시간으로 표시됩니다.
원하는 위치를 클릭하면 색상 코드가 자동으로 복사됩니다.
몇 초면 원하는 컬러를 확인할 수 있습니다.
색상 코드 확인
ColorZilla는 여러 형태의 색상 값을 제공합니다.
대표적으로 많이 사용하는 것은 다음과 같습니다.
HEX
웹디자인에서 가장 많이 사용하는 코드입니다.
예)
#3B82F6RGB
포토샵이나 CSS에서 자주 사용됩니다.
예)
rgb(59,130,246)프로젝트에 따라 필요한 형식을 선택하면 됩니다.
실무 활용
ColorZilla를 가장 많이 사용하는 상황도 정리해 보겠습니다.
홈페이지 제작
좋은 레퍼런스를 발견했을 때
브랜드 컬러를 빠르게 확인할 수 있습니다.
비슷한 분위기의 컬러를 참고할 때 매우 편리합니다.
상세페이지 제작
버튼 컬러나 강조 색상을 참고할 때 자주 사용합니다.
어떤 색상이 클릭을 유도하는지 분석하는 데 도움이 됩니다.
브랜드 컬러 분석
경쟁사의 브랜드 컬러를 비교하거나
업종별 컬러 사용 패턴을 분석할 때도 활용할 수 있습니다.
UI 디자인
버튼,
아이콘,
배경,
카드 UI 등
인터페이스 디자인의 컬러를 확인할 때도 많이 사용합니다.
ColorZilla가 좋은 이유
직접 사용하면서 가장 편리하다고 느낀 부분은 다음과 같습니다.
프로그램을 실행하지 않아도 된다
포토샵을 열 필요가 없습니다.
브라우저에서 바로 확인할 수 있습니다.
정확한 컬러를 얻을 수 있다
이미지를 저장한 뒤 추출하는 방식보다 훨씬 정확합니다.
작업 시간이 짧아진다
색상 하나 확인하려고 여러 프로그램을 실행하는 과정이 사라집니다.
반복 작업에서는 이 차이가 생각보다 크게 느껴졌습니다.
사용할 때 주의할 점
ColorZilla는 매우 편리하지만 몇 가지 알아두면 좋은 점도 있습니다.
투명한 요소
반투명 배경은 실제 CSS 색상과 조금 다르게 보일 수 있습니다.
그라데이션
그라데이션은 위치마다 색상이 달라집니다.
한 곳만 추출하기보다 여러 위치를 함께 확인하는 것이 좋습니다.
브랜드 컬러
추출한 색상이 공식 브랜드 컬러와 다를 수도 있습니다.
실제 홈페이지에서는 밝기나 투명도가 적용되는 경우도 있기 때문입니다.
브랜드 가이드가 있다면 함께 참고하는 것이 좋습니다.
함께 사용하면 좋은 확장 프로그램
ColorZilla는 다른 크롬 확장 프로그램과 함께 사용하면 더욱 효율적입니다.
WhatFont
폰트 이름과 스타일을 확인할 수 있습니다.
컬러와 폰트를 함께 분석할 때 좋습니다.
CSS Peeper
색상뿐 아니라 CSS 속성과 여백까지 함께 분석할 수 있습니다.
홈페이지 벤치마킹에 자주 활용합니다.
Page Ruler
레이아웃 크기를 측정할 수 있습니다.
버튼 크기나 카드 크기를 확인할 때 편리합니다.
경험 나눔
예전에는 마음에 드는 홈페이지를 발견하면 먼저 화면을 캡처했었습니다.
그리고 포토샵을 열어 스포이드 도구로 색상을 추출한 뒤 저장하는 방식으로 작업했었습니다.
당시에는 그 방법이 가장 익숙했고, 다른 방법이 있는지도 잘 몰랐습니다.
하지만 프로젝트가 많아질수록 같은 작업을 반복하는 시간이 아깝게 느껴졌습니다.
그때 처음 사용하게 된 것이 ColorZilla였습니다.
처음에는 단순히 색상을 확인하는 정도로만 생각했지만, 실제로 사용해 보니 작업 흐름이 훨씬 자연스러워졌습니다.
좋은 홈페이지를 발견하면 바로 컬러를 확인하고, 필요한 색상만 빠르게 저장해 프로젝트에 참고할 수 있었습니다.
특히 브랜드 컬러를 분석하거나 상세페이지 버튼 색상을 비교할 때는 포토샵보다 훨씬 빠르게 작업할 수 있었습니다.
지금도 새로운 프로젝트를 시작하면 레퍼런스를 살펴보면서 가장 먼저 실행하는 확장 프로그램이 바로 ColorZilla입니다.
작은 도구 하나지만 반복되는 작업 시간을 줄여주는 효과는 생각보다 훨씬 컸었습니다.
마무리
ColorZilla는 화려한 기능을 가진 프로그램은 아닙니다.
하지만 웹사이트의 색상을 빠르게 분석하고, 디자인 작업에 필요한 컬러를 손쉽게 추출할 수 있다는 점에서 실무 활용도가 매우 높은 크롬 확장 프로그램입니다.
홈페이지 제작, 상세페이지 디자인, UI 디자인처럼 레퍼런스를 자주 분석하는 작업이라면 꼭 한 번 설치해 보시길 추천드립니다.
다음 글에서는 WhatFont 사용법을 소개하면서 웹사이트에 사용된 폰트를 가장 빠르게 찾는 방법을 자세히 알아보겠습니다.
