HTML Lens

HTML 구조, 스타일, 접근성을 시각화하는 브라우저 확장 프로그램

HTML Lens는 웹 퍼블리셔와 프론트엔드 개발자를 위한 브라우저 확장 프로그램입니다. 이 확장 프로그램은 웹 페이지의 HTML 요소를 시각적으로 탐색하고, 각 요소의 마진, 패딩, 콘텐츠 영역을 오버레이로 표시해줍니다. 또한, aria- 속성, role, tabindex 등 접근성과 관련된 속성들을 분석하고 표시하여, 웹 접근성 진단에 도움을 줍니다. 사용자는 원하는 요소를 마우스로 선택하여 해당 요소의 구조와 접근성 관련 정보, 클래스, ID, 스타일 정보를 직관적으로 확인할 수 있습니다. 🔍 주요 기능: 마우스 오버로 요소의 박스 모델(마진/패딩/콘텐츠) 시각화 aria-, role, tabindex 등 접근성 속성 탐색 선택된 요소에 대한 포커스, 관계 엘리먼트 추적 기능 (업데이트 예정) UI : 다크/라이트 모드 전환 드래그 가능한 인터페이스 및 투명도 조절 👤 누가 사용하면 좋을까요? 웹 접근성을 고려해야 하는 퍼블리셔, 디자이너, 개발자 HTML/CSS 구조를 빠르게 분석하고 싶은 사람 실제 페이지 구조와 사용자 경험(UI/UX)의 일관성을 테스트하려는 QA 담당자 💡 이 확장 프로그램은 기존의 DevTools와는 다른 관점에서, 실무 퍼블리셔가 원하는 핵심 정보만을 빠르게 확인할 수 있도록 설계되었습니다.