HTML 이미지 맵(<map> 및 <area> 태그)은 단 하나의 이미지 파일 위에 여러 개의 클릭 가능한 영역(Link Hotspots)을 설정하는 고전적이면서도 매우 효율적인 웹 마크업 기술입니다. 이미지를 물리적으로 쪼개어 슬라이싱하거나 복잡한 절대 좌표 CSS 레이아웃을 작성하지 않아도, 지도, 인체 구조도, 혹은 가구 가구 카탈로그 속 특정 제품 위치 등을 각각 개별 링크로 연결할 수 있습니다. 하지만 시각적인 도구 없이 각 링크 영역의 정확한 픽셀 좌표(사각형, 원, 복잡한 다각형)를 추출하는 것은 불가능에 가까운 수학적 수작업입니다. JuicyDevs HTML 이미지 맵 에디터는 브라우저상에서 실시간으로 작동하는 캔버스(Canvas) 기반 드로잉 도구입니다. 임의의 이미지를 로드한 뒤 사각형, 원, 혹은 마우스 클릭으로 꼭짓점을 찍어 나가는 다각형 도구로 핫스팟 영역을 시각적으로 드로잉하면, 실시간으로 영역의 픽셀 좌표를 계산하여 표준 HTML 코드를 자동으로 완성합니다. 로컬 브라우저 보안 아키텍처로 설계되어 선택한 어떤 이미지 자산도 서버로 업로드되지 않으므로, 미공개 디자인 시안이나 대외비 브랜드 리소스를 다룰 때 완벽한 안전성을 보장합니다.
HTML5 Canvas를 사용하여 그래픽 요소를 렌더링하고 사용자의 클릭 이벤트를 절대 좌표계 정보로 수집합니다. 브라우저 창의 렌더링 크기와 이미지 본래의 해상도 비율(Natural Width/Height Ratio)을 수학적으로 상호 역산하여 화면 스케일과 관계없이 항상 원본 해상도 규격에 맞는 정확한 coords 값을 산출합니다.