Measure Distance는 웹 페이지에서 두 요소 사이의 정확한 수평, 수직, 대각선 거리를 픽셀 단위로 측정할 수 있는 도구입니다. 요소를 클릭하거나 드래그하여 선택하면 실시간으로 거리, 각도, ΔX, ΔY 값이 표시되며, 측정 결과를 복사하거나 스크린샷과 함께 사용할 수 있습니다.
디자인 구현 시 "이 두 요소 사이 간격이 정확히 몇 픽셀인가?" 또는 "이 버튼과 텍스트 사이의 여백이 스펙과 일치하는가?" 같은 질문을 자주 하게 됩니다. Measure Distance는 페이지 위에 직접 측정 도구를 제공하여 이러한 질문을 즉시 해결합니다. 첫 번째 요소를 클릭한 후 두 번째 요소를 클릭하거나 드래그하면 실시간으로 수평 거리(ΔX), 수직 거리(ΔY), 직선 거리, 각도가 계산되어 표시됩니다. 측정선은 페이지에 시각적으로 그려지며, 정렬 가이드도 함께 제공되어 정확한 측정이 가능합니다. 모든 측정 결과는 원클릭으로 클립보드에 복사할 수 있어 디자인 스펙 검증이나 버그 리포트에 바로 활용할 수 있습니다.
첫 번째 요소를 클릭한 후 두 번째 요소를 클릭하면 두 요소 사이의 정확한 픽셀 거리가 즉시 계산됩니다. 수평, 수직, 대각선 거리가 모두 표시됩니다.
드래그 모드를 사용하면 페이지의 아무 지점에서 시작하여 드래그하는 동안 실시간으로 거리와 각도를 확인할 수 있습니다. 자유로운 측정이 필요할 때 유용합니다.
측정 중에 수평(ΔX)과 수직(ΔY) 거리가 명확하게 표시되어 정렬과 간격을 정확히 검증할 수 있습니다.
두 요소 사이의 직선 거리와 각도(도 단위)도 함께 계산되어 대각선 배치나 회전된 요소를 측정할 때 도움이 됩니다.
측정값을 한 번 클릭으로 클립보드에 복사할 수 있습니다. "ΔX: 48px, ΔY: 24px, Distance: 53.67px" 형식으로 바로 디자인 문서나 이슈에 붙여넣을 수 있습니다.
측정선이 페이지에 선명하게 그려지며, 시작점과 끝점에 마커가 표시되어 어떤 요소를 측정했는지 직관적으로 확인할 수 있습니다.
구현된 요소 간 간격이 디자인 스펙(예: 24px)과 일치하는지 정확한 픽셀 값으로 확인할 수 있습니다.
브라우저 창 크기를 변경하면서 요소 간 거리가 어떻게 변하는지 실시간으로 측정하여 반응형 디자인의 일관성을 검증하세요.
"헤더와 콘텐츠 사이 간격이 48px인데 스펙은 32px입니다"처럼 정확한 측정값을 포함한 버그 리포트를 작성할 수 있습니다.
요소들이 수평 또는 수직으로 제대로 정렬되었는지 ΔX 또는 ΔY 값이 0에 가까운지 확인하여 미세한 정렬 오류를 잡을 수 있습니다.
사이트 전체에서 카드 간격, 섹션 여백 등이 일관되게 적용되었는지 여러 페이지에서 측정하여 디자인 시스템 준수 여부를 확인하세요.
DevSuite Pro 플로팅 독을 열고 Measure Distance 아이콘을 클릭하세요. 도구가 활성화되고 측정 모드가 시작됩니다.
측정을 시작할 첫 번째 요소를 클릭하세요. 요소가 강조 표시되고 시작점이 기록됩니다.
두 번째 요소를 클릭하거나 마우스를 드래그하여 측정하세요. 실시간으로 거리 값이 업데이트됩니다.
표시된 ΔX, ΔY, 직선 거리, 각도를 확인하세요. 필요하면 복사 버튼을 클릭하여 값을 클립보드에 저장합니다.
다른 요소를 측정하려면 다시 시작하거나, 도구 아이콘을 클릭하여 측정 모드를 종료하세요.
