HTML Lens

About

HTML Lens는 웹 퍼블리셔와 프론트엔드 개발자를 위한 브라우저 확장 프로그램입니다.

이 확장 프로그램은 웹 페이지의 HTML 요소를 시각적으로 탐색하고, 각 요소의 마진, 패딩, 콘텐츠 영역을 오버레이로 표시해줍니다. 또한, aria- 속성, role, tabindex 등 접근성과 관련된 속성들을 분석하고 표시하여, 웹 접근성 진단에 도움을 줍니다.

사용자는 원하는 요소를 마우스로 선택하여 해당 요소의 구조와 접근성 관련 정보, 클래스, ID, 스타일 정보를 직관적으로 확인할 수 있습니다.

🔍 주요 기능:

마우스 오버로 요소의 박스 모델(마진/패딩/콘텐츠) 시각화
aria-, role, tabindex 등 접근성 속성 탐색
선택된 요소에 대한 포커스, 관계 엘리먼트 추적 기능 (업데이트 예정)

UI :
다크/라이트 모드 전환
드래그 가능한 인터페이스 및 투명도 조절

👤 누가 사용하면 좋을까요?

웹 접근성을 고려해야 하는 퍼블리셔, 디자이너, 개발자
HTML/CSS 구조를 빠르게 분석하고 싶은 사람
실제 페이지 구조와 사용자 경험(UI/UX)의 일관성을 테스트하려는 QA 담당자

💡 이 확장 프로그램은 기존의 DevTools와는 다른 관점에서, 실무 퍼블리셔가 원하는 핵심 정보만을 빠르게 확인할 수 있도록 설계되었습니다.