Grid Diagonal Test

브라우저에서 텍스트/영역 크기를 실제 단위(mm, pt)로 빠르게 점검하기 위한 샘플 도구 모음입니다.
기존 단일 HTML + 인라인 스크립트 형태를 공통 모듈 기반 구조로 정리해, 유지보수성과 재사용성을 높였습니다.

이 프로젝트는?

• 접근성 QA 또는 UI 검수에서 픽셀 단위 결과를 실제 물리 단위로 환산해 확인하는 방법에 대한 POC 입니다.

핵심 기능

• t1 영역 측정기
  • 드래그로 임의 영역 선택
  • px/mm/대각선(mm) 실시간 표시
  • 해상도/모니터 인치 설정값 즉시 반영
• t2 포인트 인스펙터
  • pt 기준 박스를 화면에 배치
  • 박스 드래그 이동
  • PPI, 1pt(px), 1mm(px), 박스 실측(mm) 표시

빠른 시작

요구사항

• Node.js 18+
• npm 9+

설치 및 실행

npm install
npx gulp webserver

브라우저에서 기본적으로 아래 주소를 열어 사용합니다.

• http://localhost:8000
• 테스트 목록: /
• 영역 측정기: /t1
• 포인트 인스펙터: /t2

프로젝트 구조

src/
  index.html
  shared/
    metrics.js     # PPI, pt/px, mm/px 환산 공통 계산
    ui.js          # 컨트롤 패널 생성/입력 정규화 유틸
    styles.css     # 공통 패널 스타일
  t1/
    index.html
    app.js         # 영역 드래그 측정기
  t2/
    index.html
    app.js         # 포인트 박스 인스펙터

개발 가이드

변경 시 체크리스트

1. npx gulp webserver 실행 후 /t1, /t2 로드 확인
2. 시작/종료 토글 정상 동작 확인
3. 입력값 변경 시 환산 정보 즉시 갱신 확인
4. 드래그 동작(t1 영역, t2 박스) 정상 확인