01
눈에 보이는 그 너머까지.
요소에 담긴 CSS와 크기, 폰트 정보를 한눈에 확인하세요.
Pro 1개월 무료 체험웹 디자인 검사,
디자이너와 개발자를 위한 크롬 확장
웹 디자인 검사,
브라우저 안에서.
웹사이트의 CSS와 색상, 폰트, 간격을 살펴보세요. 레이아웃 점검과 페이지 QA, 스크린샷까지 하나로 이어지는 크롬 확장 프로그램입니다.
체험 후 월 $0.99 · 체험 종료 전 취소 가능
좋은 디자인을 더 가까이직접 체험하기
CSS InspectorColor PickerTypographySpacingScreenshotsPage QA
작은 디테일을 위한 도구
좋은 디자인은 디테일에서.
처음 눈에 들어온 색부터 마지막으로 맞춘 간격까지. 기본 도구 4종은 계속 무료로, 모든 Pro 도구는 1개월 무료로 경험하세요.
02
마음에 드는 색을 모으세요.
페이지의 팔레트를 추출하고, 폰트를 찾고, 대비를 확인하세요.
03
모든 픽셀에 제자리를.
간격을 재고, 그리드를 맞추고, 완성된 화면을 담으세요.
01
Hoverify 인스펙터
무료요소 위에 마우스를 올리면 Box Model, 6개 Typography 속성(font-family, size, weight, line-height, letter-spacing, color), Layout, Background, 접근성 정보를 실시간으로 표시합니다.
02
색상 팔레트 추출
Pro웹 페이지에서 사용된 모든 색상을 자동 수집하고, 클러스터링 알고리즘으로 카테고리별 분류합니다.
03
폰트 인스펙터
Pro텍스트 요소의 font-family, size, weight, line-height, letter-spacing, color 6개 속성을 즉시 확인합니다.
04
WCAG 대비 검사
ProWCAG 2.1 공식으로 전경/배경 대비율을 실시간 계산합니다. AA 기준 4.5:1, AAA 기준 7:1 등급을 판정합니다.
05
간격 측정
Pro두 요소 사이의 수평/수직/대각선 거리를 픽셀(px) 단위로 Figma 스타일 빨간 점선과 함께 표시합니다.
06
CSS 복사
Pro요소의 Computed CSS를 클릭 한 번으로 클립보드에 복사합니다. 범위 선택 가능.
07
그리드 오버레이
무료12컬럼 CSS Grid를 오버레이하여 레이아웃 정렬을 시각적으로 확인합니다.
08
Style Strip
Pro4단계로 CSS를 점진적으로 제거하여 HTML 구조를 분석합니다.
09
페이지 QA
Pro가로 넘침, 이미지 설명, 접근 가능한 이름과 제목 순서를 확인합니다. 문제 위치를 찾고 보고서를 저장하세요.
10
팔레트를 CSS로
Pro추출한 색상을 재사용 가능한 CSS 변수로 만드세요. 한 번에 복사하거나 파일로 저장합니다.
PixelKit을 설치 없이 체험할 수 있나요?
네, 아래에서 확장 프로그램 설치 없이 PixelKit의 핵심 기능을 바로 경험할 수 있습니다.
가벼운 가격, 든든한 도구.
기본은 계속 무료. Pro의 모든 기능은 한 달 동안 무료로.
Free
$0영구
무료 설치
- Hoverify 인스펙터
- Color Picker (히스토리 5개)
- Grid 오버레이
- Screenshot (visible만)
Pro Monthly
Pro 1개월 무료 체험$0첫 1개월
체험 후 월 $0.99 · 체험 종료 전 취소 가능
1개월 무료로 시작- 모든 Free 기능 포함
- Palette Extractor
- Font Inspector
- Spacing Measure
- WCAG Contrast Checker
- CSS Copy / Style Strip
- Visual Editor / Layout Editor
- Quick Theme / Presets
- API 도구 전체
- 페이지 QA · 제목 구조 · JSON 보고서
Pro Lifetime
$19.99일시불
Pro 구매하기
- 모든 Pro 기능 포함
- 평생 업데이트
- 우선 지원
1개월 무료 체험은 Pro 월 구독에 적용됩니다. 신청 시 결제 수단을 등록하며, 체험 종료 전에 취소하지 않으면 월 $0.99가 자동 청구됩니다. 평생 이용권은 $19.99를 한 번 결제하는 별도 상품입니다.
1
Polar에서 Pro 월 구독 무료 체험을 신청하세요.
2
Polar 계정 또는 이메일에서 라이선스 키를 확인하세요.
3
확장 프로그램에 키를 입력하면 Pro가 활성화됩니다.
자주 묻는 질문
PixelKit은 무엇인가요?+
PixelKit은 웹 페이지의 시각 디자인을 분석·편집하는 Chrome 확장 프로그램입니다. CSS 검사, 색상 추출, 타이포그래피 분석, 간격 측정, WCAG 대비 검사 등 8가지 도구를 제공합니다.
PixelKit은 어떻게 설치하나요?+
Chrome 웹 스토어에서 'PixelKit'을 검색하거나, 랜딩 페이지의 설치 버튼을 클릭하면 됩니다. 설치 후 바로 사용 가능합니다.
PixelKit은 무료인가요?+
기본 도구 4종(요소 검사, 컬러 피커, 그리드 오버레이, 현재 화면 캡처)은 계속 무료입니다. Pro 월 구독은 1개월 무료 체험 후 월 $0.99이며, 평생 이용권은 $19.99입니다.
1개월 무료 체험은 어떻게 이용하나요?+
Polar에서 Pro 월 구독을 선택해 체험을 신청한 뒤, 발급된 라이선스 키를 확장 프로그램에 입력하세요. 결제 수단 등록이 필요하며 체험 종료 전 Polar에서 취소하지 않으면 월 $0.99가 자동 청구됩니다. 평생 이용권은 별도 상품으로 $19.99입니다.
웹사이트의 CSS와 폰트는 어떻게 확인하나요?+
Chrome 웹 스토어에서 PixelKit을 설치하고 검사할 페이지를 여세요. 툴바의 인스펙터로 요소 위에 마우스를 올리면 CSS와 타이포그래피 정보를 확인할 수 있습니다. Pro에서는 폰트 상세 검사와 CSS 복사도 사용할 수 있습니다.
배포 전에 웹페이지의 디자인 문제를 점검할 수 있나요?+
Pro의 페이지 QA에서 가로 넘침, 이미지 설명 누락과 로드 실패, 이름 없는 입력창·버튼·링크, 제목 단계 건너뜀을 검사합니다. 결과의 위치를 확인하고 JSON으로 저장하세요. iframe과 Shadow DOM을 제외한 기본 검사이며 전체 접근성 감사를 대체하지 않습니다.
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 웹 스토어를 통해 설치·사용 가능합니다.
Pro 1개월 무료 체험
다음 아이디어를 펼쳐보세요.
더 좋은 디자인을 위한 작은 도구들. Pro의 모든 기능을 한 달 동안 경험하세요.
1개월 무료로 시작체험 후 월 $0.99 · 체험 종료 전 취소 가능