페이지 인스펙터
웹 페이지의 폰트·색상·이미지·SVG를 분석합니다. 어떤 사이트에서든 북마클릿으로 실행됩니다.
라이브 데모 — 이 페이지를 분석했습니다. 아무 웹사이트나 검사하려면 아래 북마클릿을 설치하세요.
이 페이지 분석 중…
아무 페이지에서나 사용 (북마클릿)
보고 있는 페이지를 떠나지 않고 페이지 인스펙터을(를) 쓰고 싶나요? 아래 버튼을 즐겨찾기 바에 끌어다 놓고, 아무 웹사이트에서나 클릭하면 그 자리에서 페이지 인스펙터이(가) 열립니다 — 전부 브라우저 안에서만 실행됩니다.
주의해서 사용하세요: 북마클릿은 클릭한 페이지 위에서 실행됩니다. 인터넷 뱅킹·결제·의료 등 민감한 사이트에서는 사용을 피하세요 — 사용 책임은 본인에게 있습니다. 모든 처리는 로컬에서 이루어지며 어떤 데이터도 전송되지 않습니다. 이용약관를 참고하세요.
- 즐겨찾기 바가 숨겨져 있다면 표시하세요 — Ctrl+Shift+B (Mac은 ⌘+Shift+B).
- 위 버튼을 즐겨찾기 바에 끌어다 놓습니다.
- 아무 웹사이트나 열고 북마크를 클릭하면 우측 상단에 페이지 인스펙터 패널이 나타납니다. ✛로 코너를 이동하고, ›/‹로 가장자리에 접었다 다시 꺼낼 수 있습니다.
- 북마크를 다시 클릭하면(또는 ✕) 닫힙니다.
참고: 보안 정책이 엄격한 일부 사이트에서는 북마클릿이 차단될 수 있습니다.
예시
웹사이트 폰트 식별
입력
아무 페이지에서 북마클릿 클릭 → 폰트 탭
출력
Inter — 400/600/700 · 142× Roboto Mono — 400 · 18×
색 팔레트 추출
입력
색 탭
출력
#111827 · 308 #2563EB · 47 #F9FAFB · 22 (클릭해 hex 복사)
형식·크기와 함께 이미지 나열
입력
이미지 탭
출력
logo.svg — SVG hero.webp — WEBP · 1600×900
도구 소개
페이지 인스펙터는 어떤 라이브 사이트든 어떻게 만들어졌는지 드러내는 무료 웹페이지 분석기입니다: 렌더링하는 폰트, 색 팔레트, 모든 이미지와 인라인 SVG, 링크, 그리고 빠른 기술 개요. 전적으로 브라우저에서 업로드 없이 실행되므로 웹사이트의 폰트 찾기, 색 추출, 이미지 감사, SVG 아이콘 확인을 빠르고 비공개로 할 수 있습니다 — 레이아웃을 역설계하는 디자이너든, 디버깅하는 개발자든, 그저 궁금한 사람이든.
사용 방법
- 위의 라이브 데모를 써보세요 — 개요·폰트·색·이미지·SVG·링크 탭에서 바로 이 페이지를 분석합니다.
- 다른 사이트를 검사하려면 아래의 페이지 인스펙터 버튼을 즐겨찾기 바에 끌어다 놓으세요.
- 아무 웹사이트를 열고 북마크를 클릭하면 그 위에 패널이 열립니다.
- 탭을 전환해 폰트를 읽고, hex 색을 복사하고, 이미지를 열고, 인라인 SVG 마크업을 확인하세요.
무엇을 검사하나
- 폰트 — 실제로 렌더링된 폰트 패밀리를 굵기·이탤릭과 함께 사용 빈도순으로.
- 색 — 텍스트·배경·테두리 색을 hex로, 빈도순 정렬해 브랜드 색이 먼저 뜨도록.
- 이미지 — 모든 <img>와 CSS 배경 이미지를 형식·원본 크기와 함께.
- SVG — 인라인 SVG 아이콘을 미리보기와 마크업 열람과 함께.
- 링크 — 모든 링크를 내부·외부로 구분.
- 개요 — 제목·메타 설명·canonical·DOM 노드 수·스크립트/스타일시트 수·대략적 HTML 크기.
렌더링된 페이지를 읽으므로 스타일시트에 선언된 것이 아니라 사용자가 실제로 보는 폰트와 색을 알려줍니다. 그것이 드러내는 SEO 태그를 만들려면 메타 태그 생성기와 함께 쓰세요.
책임 있는 사용
페이지 인스펙터는 페이지의 구조·스타일·미디어를 분석하는 개발·학습용 도구로, 브라우저 내장 개발자 도구가 이미 노출하는 것과 같은 정보를 봅니다. 콘텐츠를 복사·저장·재배포하지 않습니다: 이미지·영상은 새 탭에서 열리고 SVG 코드는 열람용으로만 표시됩니다. 열람하는 모든 이미지·영상·SVG는 원소유자(웹사이트와 저작자)의 자산입니다. 그것으로 하는 행위의 책임은 전적으로 사용자에게 있으며, 저작권 자산을 허가 없이 재사용하지 마세요. 이용약관을 참고하세요.
자주 묻는 질문
페이지 인스펙터는 무엇을 보여주나요?
라이브 웹페이지를 분석해 폰트(굵기 포함), 텍스트·배경·테두리에 쓰인 색, 모든 이미지(형식·크기), 인라인 SVG, 링크(내부 vs 외부), 그리고 개요 — 제목·설명·DOM 노드 수·HTML 크기 등 — 를 나열합니다.
이 페이지 말고 다른 웹사이트는 어떻게 검사하나요?
페이지 인스펙터 버튼을 즐겨찾기 바에 끌어다 놓고, 아무 웹사이트를 연 뒤 그 북마크를 클릭하세요. 그 페이지 위에 폰트·색·이미지·SVG·링크를 보여주는 패널이 열립니다. 이 페이지의 데모는 지금 읽고 있는 페이지에 똑같은 분석을 실행합니다.
확장 프로그램을 설치해야 하나요?
아니요. 북마클릿입니다 — 주소가 작은 자바스크립트 조각인 평범한 북마크죠. 설치할 것도, 부여할 권한도 없습니다. 클릭할 때만, 보고 있는 탭에서만 실행됩니다.
웹사이트가 쓰는 폰트를 찾아주나요?
네. 모든 텍스트 요소의 계산된 font-family를 읽으므로 CSS에 선언된 것뿐 아니라 실제 화면에 렌더링된 폰트를 굵기·이탤릭 사용 여부와 함께 알려줍니다. 어떤 사이트의 타이포그래피든 빠르게 식별하는 방법입니다.
페이지의 색 팔레트를 추출할 수 있나요?
네. 모든 요소의 텍스트·배경·테두리 색을 모아 hex로 변환하고 빈도순으로 정렬하므로 주요 브랜드 색이 위로 올라옵니다. 스와치를 클릭하면 hex 코드가 복사됩니다.
제 데이터가 어딘가로 업로드되나요?
아니요. 모든 것이 브라우저에서 로컬로 실행됩니다 — 인스펙터는 현재 페이지만 읽고 서버로 아무것도 보내지 않습니다. 가입도 없고 완전 무료입니다.
왜 일부 이미지나 색이 안 보이나요?
인스펙터는 렌더링된 DOM을 읽으므로 화면 아래에서 지연 로드되는 이미지, 교차 출처 iframe 내부 콘텐츠, 클릭 후 적용되는 스타일은 페이지에 나타나기 전까지 안 보일 수 있습니다. 스크롤하거나 상호작용한 뒤 다시 스캔하세요.