ibelick/mesurer

해결하는 문제

Mesurer는 브라우저 내 시각 요소를 정확하게 측정하고 검사하며 캡처할 수 있는 방법을 제공합니다. 개발자가 코딩 에이전트에게 정확한 시각적 피드백과 레이아웃 요구사항을 전달할 수 있도록 설계되어, "이렇게 보이게 해줘"와 같은 모호한 요청을 줄입니다.

작동 방식

애플리케이션에 삽입할 수 있는 React 컴포넌트입니다. 활성화되면 UI 위에 겹쳐지는 정밀한 도구들—예: 자, 가이드, 색상 선택기—를 제공합니다. 사용자는 키보드 단축키를 통해 X-ray 모드나 텍스트 인스펙터와 같은 다양한 검사 모드를 전환할 수 있어, 렌더링된 페이지의 레이아웃과 스타일을 분석할 수 있습니다.

대상 사용자

AI 코딩 에이전트와 함께 작업하며 정밀한 픽셀 단위의 측정값과 시각적 사양을 캡처하고 전달할 수 있는 신뢰할 수 있는 방법이 필요한 프론트엔드 개발자 및 디자이너입니다.

주요 기능

• 시각적 검사 도구: 색상 선택기, 타이포그래피용 텍스트 인스펙터, 요소 구조를 확인할 수 있는 X-ray 모드 포함.
• 코드 기반 정밀도: 픽셀 룰러와 드래그 가능한 가이드를 통해 수직 및 수평 정렬 확인 가능.
• 캡처 기능: 보이는 탭의 특정 영역을 드래그하여 스크린샷으로 캡처 가능.
• 측정 오버레이: Alt 키를 누르고 있으면 거리 오버레이를 통해 빠르게 간격 확인 가능.
• 상태 지속성: 사용자 정의 가능한 스토리지 어댑터를 사용해 페이지 새로 고침 후에도 작업 공간 상태를 저장 가능.