GuideFlow - 웹 UI 가이드·그리드·측정

웹 UI 검수를 위한 정밀 가이드, DOM 스냅, 그리드 생성, 요소 측정 및 사이트별 자동 실행 도구입니다.

GuideFlow는 웹페이지 위에 정밀한 가이드와 그리드를 만들고, 실제 UI 요소의 크기와 간격을 측정할 수 있는 웹 UI 검수 도구입니다. 디자이너와 프론트엔드 개발자가 브라우저에서 바로 레이아웃, 정렬, 간격을 확인할 수 있도록 가이드, 그리드, 요소 측정, 사이트별 자동 실행 기능을 하나의 Side Panel에 제공합니다. 주요 기능 • 정밀 가이드 상단 Ruler에서 드래그하면 수평 가이드, 왼쪽 Ruler에서 드래그하면 수직 가이드를 생성할 수 있습니다. 위치를 px 단위로 직접 입력할 수도 있습니다. • 미러 가이드 한쪽 가이드를 기준으로 반대편에 동일한 간격의 가이드를 생성하고 대칭 위치를 유지할 수 있습니다. • DOM 요소 스냅 가이드를 이동할 때 페이지 요소의 가장자리와 중앙에 자동으로 스냅하여 보다 정확한 정렬 작업을 할 수 있습니다. • 가이드 간 거리 확인 가이드 사이의 거리를 px 단위로 확인할 수 있으며, 표시 방식을 선택 시 / 항상 / 숨김으로 설정할 수 있습니다. • 컬럼·간격·베이스라인 그리드 컬럼 수, Gutter, Margin을 직접 설정해 레이아웃 그리드를 생성할 수 있습니다. 모바일·태블릿·데스크톱에 맞춘 반응형 프리셋도 지원합니다. • 요소 크기 측정 페이지의 요소를 선택하면 실제 화면에 표시되는 Width × Height 값을 px 단위로 확인할 수 있습니다. • 요소 간 거리 측정 두 요소를 선택해 가로·세로 간격을 측정하고 측정값을 바로 복사할 수 있습니다. • 사이트별 가이드 유지 원하는 사이트에 가이드를 저장해 새로고침 후에도 동일한 가이드를 복원할 수 있습니다. • 사이트별 자동 실행 도메인, 경로 또는 현재 URL 단위로 GuideFlow 실행 범위를 등록할 수 있습니다. 등록된 사이트에 다시 방문하면 설정에 따라 GuideFlow를 자동으로 실행할 수 있습니다. • 등록 사이트 관리 등록된 사이트와 자동 실행·가이드 유지 상태를 Side Panel에서 한눈에 관리할 수 있습니다. • 한국어 / English 지원 GuideFlow 메뉴 언어를 한국어와 영어로 전환할 수 있습니다. GuideFlow는 이런 작업에 유용합니다 • 디자인 시안과 실제 웹페이지의 정렬 확인 • 컨테이너 및 콘텐츠 영역의 위치 검수 • 컬럼 그리드와 반응형 레이아웃 확인 • 버튼, 카드, 이미지 등 UI 요소 크기 확인 • 요소 사이 간격 측정 • 프론트엔드 구현 결과 QA • 반복적으로 확인하는 사이트의 가이드 환경 유지 GuideFlow의 측정값은 웹페이지의 CSS px 기준으로 표시됩니다. 사용자가 등록한 사이트 정보와 GuideFlow 설정은 브라우저의 로컬 저장소에 저장되며, GuideFlow 기능 제공을 위해 외부 서버로 전송하지 않습니다. 가이드, 그리드, 측정을 오가며 웹 UI를 더 빠르고 정확하게 검수해보세요.