StylePeek - 디자인 스타일 검사기

DevTools를 열지 않고도 웹사이트의 글꼴, 색상, 간격을 즉시 검사할 수 있습니다.

StylePeek은 빠른 작업을 위해 만들어진 디자인 검사 도구입니다. 사이드 패널을 열고 요소를 클릭하면 스타일이 즉시 표시됩니다. 페이지 새로고침 없음, DOM 오염 없음, 번거로움 없음.

사용 방법:
1. StylePeek 아이콘을 클릭하여 사이드 패널 열기
2. "검사 시작"을 클릭하고 페이지에서 원하는 요소 선택
3. 사이드 패널에서 타이포그래피, 색상, 간격을 즉시 확인
4. 원클릭으로 원하는 값 복사

사이드 패널은 브라우징 중에도 열려 있어, 다른 페이지나 탭에서도 다시 열 필요 없이 요소를 검사할 수 있습니다.

무료 기능:
- 글꼴, 크기, 두께, 줄 높이 검사
- 미리보기 견본과 함께 색상 추출 (hex, RGB, HSL)
- 시각적 박스 모델로 마진과 패딩 측정
- 검사된 값 원클릭 복사
- 모든 웹사이트에서 작동

PRO 기능:
- Tailwind CSS 클래스로 스타일 내보내기
- CSS 커스텀 속성 또는 JSON 디자인 토큰으로 내보내기
- 이미지에서 색상 추출
- 전체 페이지 디자인 분석 및 스타일 개요

개인정보 보호:
- 모든 검사는 브라우저에서 로컬로 실행되며, 어떤 서버로도 데이터가 전송되지 않습니다
- DOM 주입 없음 — 검사 대상 페이지가 완전히 깨끗하게 유지됩니다
- 무료 기능 사용 시 계정 불필요

호스트 권한 안내:
StylePeek은 클릭한 요소의 CSS 스타일을 읽기 위해 웹 페이지 접근 권한이 필요합니다. 이 권한은 탭 간에 사이드 패널이 작동하기 위해 필수적입니다. 페이지 콘텐츠는 수집, 저장 또는 전송되지 않습니다.

레퍼런스 사이트를 확인하는 웹 디자이너, 레이아웃을 디버깅하는 프론트엔드 개발자, 일관성을 감사하는 디자인 시스템 팀에게 완벽한 도구입니다.