Chrome 확장 프로그램

웹 디자인 분석,
어떤 도구를 써야 할까?

PixelKit은 CSS 검사, 색상 추출, 타이포그래피, 간격 측정(px 단위), WCAG 2.1 대비 검사(AA 4.5:1 / AAA 7:1)를 포함한 8가지 도구를 제공합니다.

무료 4가지 + Pro 9가지 도구로 디자이너와 개발자의 웹 디자인 워크플로를 완성하세요.

PixelKit을 설치 없이 체험할 수 있나요?

네, 아래에서 확장 프로그램 설치 없이 PixelKit의 핵심 기능을 바로 경험할 수 있습니다.

PixelKit에는 어떤 기능이 있나요?

무료 4가지 + Pro 전용 5가지, 총 8가지 핵심 도구

Hoverify 인스펙터

무료

요소 위에 마우스를 올리면 Box Model, 6개 Typography 속성(font-family, size, weight, line-height, letter-spacing, color), Layout, Background, 접근성 정보를 실시간으로 표시합니다.

색상 팔레트 추출

Pro

웹 페이지에서 사용된 모든 색상을 자동 수집하고, 클러스터링 알고리즘으로 카테고리별 분류합니다.

폰트 인스펙터

Pro

텍스트 요소의 font-family, size, weight, line-height, letter-spacing, color 6개 속성을 즉시 확인합니다.

WCAG 대비 검사

Pro

WCAG 2.1 공식으로 전경/배경 대비율을 실시간 계산합니다. AA 기준 4.5:1, AAA 기준 7:1 등급을 판정합니다.

간격 측정

Pro

두 요소 사이의 수평/수직/대각선 거리를 픽셀(px) 단위로 Figma 스타일 빨간 점선과 함께 표시합니다.

CSS 복사

Pro

요소의 Computed CSS를 클릭 한 번으로 클립보드에 복사합니다. 범위 선택 가능.

그리드 오버레이

무료

12컬럼 CSS Grid를 오버레이하여 레이아웃 정렬을 시각적으로 확인합니다.

Style Strip

Pro

4단계로 CSS를 점진적으로 제거하여 HTML 구조를 분석합니다.

PixelKit 가격은 얼마인가요?

무료($0)로 시작하고, Pro는 월 $1 또는 평생 $20입니다. 기본 4가지 도구는 영구 무료.

Free

$0영구
  • Hoverify 인스펙터
  • Color Picker (히스토리 5개)
  • Grid 오버레이
  • Screenshot (visible만)
무료 설치
가장 인기

Pro Monthly

$1/ 월
  • 모든 Free 기능 포함
  • Palette Extractor
  • Font Inspector
  • Spacing Measure
  • WCAG Contrast Checker
  • CSS Copy / Style Strip
  • Visual Editor / Layout Editor
  • Quick Theme / Presets
  • API 도구 전체
Pro 구매하기

Pro Lifetime

$20일시불
  • 모든 Pro 기능 포함
  • 평생 업데이트
  • 우선 지원
Pro 구매하기

자주 묻는 질문

PixelKit은 무엇인가요?+

PixelKit은 웹 페이지의 시각 디자인을 분석·편집하는 Chrome 확장 프로그램입니다. CSS 검사, 색상 추출, 타이포그래피 분석, 간격 측정, WCAG 대비 검사 등 8가지 도구를 제공합니다.

PixelKit은 어떻게 설치하나요?+

Chrome 웹 스토어에서 'PixelKit'을 검색하거나, 랜딩 페이지의 설치 버튼을 클릭하면 됩니다. 설치 후 바로 사용 가능합니다.

PixelKit은 무료인가요?+

네, 기본 4가지 도구(Hoverify 인스펙터, Color Picker, Grid 오버레이, Screenshot)는 영구 무료입니다. Pro 플랜은 월 $1 또는 평생 $20입니다.

Pro 플랜에서 추가되는 기능은?+

Pro 플랜에서는 Palette Extractor, Font Inspector, Spacing Measure, WCAG Contrast Checker, CSS Copy, Style Strip, Visual/Layout Editor, Quick Theme, Presets 등 9가지 추가 도구를 사용할 수 있습니다.

WCAG 대비 검사는 어떻게 작동하나요?+

WCAG 2.1 공식을 기반으로 전경(텍스트)과 배경 색상의 대비율을 실시간으로 계산합니다. AA 등급(4.5:1 이상)과 AAA 등급(7:1 이상)을 자동 판정합니다.

Chrome 외 다른 브라우저에서도 사용 가능한가요?+

네, Chromium 기반 브라우저인 Edge, Brave, Arc 등에서도 Chrome 웹 스토어를 통해 설치·사용 가능합니다.

PixelKit은 어떻게 설치하나요?

Chrome 웹 스토어에서 "PixelKit"을 검색하거나, 아래 버튼을 클릭하면 바로 설치 페이지로 이동합니다.
무료로 시작하고, 필요할 때 Pro로 업그레이드하세요.

Chrome 웹 스토어에서 설치