웹 개발자를 위한 크롬 색상 선택기 완벽 가이드
구글 크롬은 웹 개발 작업에 필수적인 Chrome DevTools 도구 세트를 제공합니다. 그 중에서도 특히 유용한 기능이 바로 크롬 색상 선택기입니다.
이 강력한 도구를 어떻게 활성화하고 사용할 수 있을까요? 어떤 기능들이 제공될까요?
본 글에서는 크롬 색상 선택기의 활용법과 다양한 기능에 대해 자세히 알아보겠습니다.
크롬 색상 선택기 실행 방법
크롬 색상 선택기는 키보드 단축키 또는 그래픽 사용자 인터페이스(GUI)를 통해 접근할 수 있습니다.
키보드를 사용하는 경우, 먼저 Ctrl + Shift + I (Mac에서는 Command + Option + I) 키를 눌러 DevTools를 실행한 후 색상 선택기로 이동합니다.
마우스를 사용할 때는 웹 페이지에서 마우스 오른쪽 버튼을 클릭한 후 “검사” 옵션을 선택하여 DevTools에 접근할 수 있습니다.
크롬 DevTools를 새 탭이 열릴 때마다 자동으로 실행되도록 설정할 수도 있습니다. 이렇게 하면 브라우저의 모든 탭에서 색상 선택기에 더욱 빠르게 액세스할 수 있습니다.
자동 실행을 위해서는 다음과 같은 플래그를 사용하여 명령줄에서 크롬의 새 인스턴스를 실행해야 합니다:
--auto-open-devtools-for-tabs
다음은 리눅스 터미널에서 자동 DevTools 실행 옵션으로 크롬을 시작하는 예시입니다:
google-chrome-stable --auto-open-devtools-for-tabs
크롬 색상 선택기 사용 방법
DevTools가 실행되면, 작업 중인 웹 페이지 또는 디자인에서 색상을 추출하는 데 필요한 도구를 찾을 차례입니다.
기본적으로 DevTools 하단 영역에서 “스타일” 섹션이 활성화된 상태로 표시됩니다. (위 스크린샷 참고)
다른 섹션을 선택한 경우, “스타일”을 클릭하여 웹 페이지의 CSS 코드로 이동하세요.
여기서 CSS 코드를 스크롤하면서 본문 섹션 아래에서 배경이나 색상으로 표시된 색상 상자를 찾아야 합니다. 이 상자가 바로 색상 선택기입니다.
색상 상자를 클릭하면 더 많은 옵션이 있는 색상 선택기가 나타납니다 (아래 스크린샷 참고).
이제 크롬 브라우저에서 색상 선택기를 사용하여 원하는 색상을 자유롭게 탐색하고 활용할 수 있습니다.
색상의 16진수 코드 또는 RGB 값을 확인하고, 웹 페이지 디자인을 분석하고 검토하는 데 필요한 모든 도구를 사용할 수 있습니다.
크롬 색상 선택기의 다양한 기능
크롬에 내장된 색상 선택기는 단순한 16진수 코드 확인 이상의 다양한 기능을 제공합니다.
다음은 기대할 수 있는 주요 기능들입니다:
색상 팔레트: 다양한 색조를 직접 선택하는 대신 미리 정의된 색상 팔레트에서 빠르게 색상을 선택할 수 있습니다.
색상 형식 변경: 16진수 코드 외에도 RGBA 및 HSLA 색상 값으로 변환할 수 있습니다.
스포이드 도구: 웹 페이지에서 원하는 요소를 선택하여 해당 색상의 16진수 코드를 추출할 수 있습니다. 색상 선택기에서 스포이드 토글을 클릭하여 활성화/비활성화할 수 있습니다.
색상을 세밀하게 조정하고 정확한 색상을 얻을 수 있는 다양한 추가 옵션:
- 클립보드에 복사: 추출한 색상 코드를 클립보드에 빠르게 복사합니다.
- 색상 그라데이션: 색상 음영을 조정하여 다양한 색상 조합을 실험합니다.
- 불투명도 조절: 투명도 수준을 조정하여 단색 또는 미묘한 효과를 적용합니다.
- 배경색 선택기: 완벽한 대비를 위한 적절한 배경색을 선택합니다.
- 명암비 조절: 텍스트나 요소의 가독성을 높이기 위해 명암비를 조정합니다.
참고: 이 색상 선택기 도구는 구글 크롬 뿐만 아니라 Brave와 같은 크롬 기반의 다른 웹 브라우저에서도 사용할 수 있습니다.
구글 프레젠테이션에서 크롬 색상 선택기 활용법
구글 프레젠테이션 웹 페이지의 헤더 섹션을 마우스 오른쪽 버튼으로 클릭하면 색상 선택기 도구에 접근할 수 있습니다. 구글 프레젠테이션 자체에는 내장된 색상 선택 도구가 없지만, 이 방법으로 충분히 활용할 수 있습니다.
만약 Google Slides에서 DevTools를 사용하는 것이 불편하다면, 다양한 크롬 확장 프로그램을 사용해 볼 수도 있습니다.
색상 선택기 대안: 크롬 확장 프로그램
크롬 확장 프로그램은 편리하지만, 업데이트가 꾸준히 이루어지지 않을 수 있다는 점을 유의해야 합니다. 확장 프로그램 설치 시 브라우저 데이터에 대한 접근 권한이 필요하므로 신중하게 선택해야 합니다. 여기에서 추천하는 확장 프로그램도 마찬가지입니다.
그럼에도 불구하고, 유용하게 사용할 수 있는 몇 가지 인기있는 확장 프로그램을 소개합니다:
#1. 컬러질라
컬러질라 확장 프로그램은 크롬 내장 색상 선택기와 유사한 필수 기능을 모두 제공하며, 추가적으로 최근에 선택한 색상 히스토리 기능까지 제공합니다.
따라서 Google Slides 뿐만 아니라 모든 사용 사례에 편리하게 활용할 수 있습니다.
#2. ColorPick 스포이드
DevTools 스포이드 사용에 어려움을 느끼는 경우 ColorPick 스포이드 확장 프로그램을 사용해보세요. 웹 도구에 접근하지 않고도 간편하게 스포이드 기능을 이용할 수 있습니다.
색상을 선택하면 RGB 값과 색상 팔레트 생성 옵션이 표시됩니다. 컬러질라와 마찬가지로 선택한 색상의 히스토리도 확인할 수 있습니다.
마무리하며 🎨
크롬 DevTools 색상 선택기는 매우 유용한 도구입니다. 복잡한 전문 도구 없이도 간편하게 색상과 관련 코드 또는 값을 확인할 수 있습니다. 크롬에 내장된 도구를 통해 타사 확장 프로그램 없이도 필요한 모든 작업을 수행할 수 있습니다.
그래픽 디자이너부터 웹사이트 템플릿을 만드는 웹 개발자까지, 모두에게 도움이 될 것입니다.
물론, 필요에 따라 타사 확장 프로그램을 선택할 수도 있지만, 가능한 한 DevTools를 통해 제공되는 모든 기능을 충분히 활용해보는 것을 추천합니다.