Layerpin logo
시작

Layerpin 소개

정적 도면, 평면도, 배선도, 일러스트를 맞춤형 핀, 벡터 도형, Deep Zoom, 안전한 웹 임베드를 갖춘 고성능 인터랙티브 지도로 변환하세요.

Layerpin이란 무엇인가요?

Layerpin은 평면도, 건축 도면, 행사 행사장, 박물관 갤러리, 캠퍼스 지도, 매장 배치도, 제품 구조도 등 맞춤형 시각 미디어에 특화된 인터랙티브 이미지 맵 제작 플랫폼입니다.

지구 좌표와 위성 데이터가 필요한 기존 지도 도구(Google Maps, Mapbox 등)와 달리, Layerpin은 서브픽셀 정규화 좌표계, 반응형 터치 컨트롤, 실시간 검색 및 글로벌 CDN 캐싱을 통해 사용자의 이미지 위에서 직접 작동합니다.

도면 & 건축 설계

건축 도면 위에 분양/임대 구역, 면적, 입주사 정보, 사진 투어 및 편의시설을 직접 표기할 수 있습니다.

이벤트 & 전시관

박람회 부스, 무대 일정, 비상구, 부대시설 및 스폰서 구역을 검색과 카테고리 필터로 안내합니다.

기술 도면 & 부품 구조도

부품 분해도, 공장 라인, 기술 도면을 핫스팟 팝업과 링크가 포함된 대화형 문서로 제작합니다.

기가픽셀 & 문화예술 작품

초고해상도 드론 항공사진, 미술관 명화, 복잡한 CAD 도면을 Deep Zoom 다중 해상도 타일링으로 부드럽게 감상할 수 있습니다.

4단계 제작 워크플로

원본 이미지에서 웹사이트 삽입용 초고속 인터랙티브 맵까지, 제작 과정이 4단계로 체계화되어 있습니다:

  1. 1
    원본 이미지 또는 도면 업로드
    PNG, JPEG, WebP, SVG, AVIF 고해상도 이미지를 업로드하세요. 초대형 CAD나 항공 지도는 기가픽셀 이미지를 올리면 자동으로 Deep Zoom 피라미드가 생성됩니다.
  2. 2
    인터랙티브 핀, 영역, 지시선 그리기
    Layerpin의 11가지 전용 도구로 맞춤 핀 배치, 다각형 구역 그리기, 실측 거리 측정, 서식 있는 텍스트 콜아웃을 자유롭게 추가하세요.
  3. 3
    카테고리, 미디어 및 상세 카드로 꾸미기
    갤러리, 버튼, 태그, Markdown 설명을 연결하세요. 핀을 색상 카테고리로 묶고 범례 토글과 실시간 키워드 검색을 적용할 수 있습니다.
  4. 4
    안정적인 스냅샷 발행 및 웹사이트 삽입
    지연 없이 엣지 CDN에 캐싱되는 읽기 전용 스냅샷을 발행하세요. 도메인 보안 설정이 포함된 반응형 iframe 코드를 복사하거나 공개 링크를 공유할 수 있습니다.

핵심 아키텍처 & 좌표계

모든 기기에서 왜곡 없는 반응형 지도를 구현하기 위해 Layerpin은 세 가지 공학적 원칙을 따릅니다:

0–100 정규화 지도 좌표계

화면 크기에 따라 어긋나는 절대 픽셀과 달리, 0.00~100.00의 정규화 단위를 사용합니다. 모바일, 태블릿, 4K 모니터 어디서 보든 핀이 정확한 이미지 픽셀 위치에 완벽히 고정됩니다.

비공개 임시 작업 공간

편집기 내 수정 사항은 비공개 초안으로 유지됩니다. 방문자에게 영향을 주지 않고 좌표, 스타일, 필터를 자유롭게 테스트할 수 있습니다.

발행된 엣지 스냅샷

「발행」을 누르면 전 세계 CDN에 동결된 스냅샷이 생성되어, 데이터베이스 부하 없이 15ms 미만의 초고속 로딩을 제공합니다.

주요 플랫폼 기능

인터랙티브 시각 지도의 제작, 디자인, 구성, 배포에 필요한 모든 전문 도구를 갖추고 있습니다:

11가지 정밀 그리기 도구

마커, 다각형, 직사각형, 원, 선/연결선, 브러시, 텍스트, 콜아웃, 측정, 지우개, 선택 도구를 모두 지원합니다.

정보 카드 & 팝업

호버 툴팁, 사이드 서랍, 모달 창을 통해 슬라이드 사진, 버튼, 태그, Markdown 설명을 풍성하게 보여줍니다.

카테고리 & 다중 선택 범례

색상별 카테고리, 범례 온오프 토글, 실시간 검색, 개수 카운터, 맞춤 아이콘으로 핀을 체계적으로 분류합니다.

Deep Zoom 기가픽셀 엔진

피라미드 타일 로더가 필요한 조각만 실시간 스트리밍하여 50,000px 대형 도면도 메모리 과부하 없이 60FPS로 렌더링합니다.

웹사이트 임베드 & 보안

승인된 도메인에서만 지도가 노출되도록 제한하는 반응형 iframe 코드로 보안을 유지합니다.

단축키 & 전문가 팁

25개 이상의 단축키로 도구 선택, 스타일 복사, 대비 조절을 신속하게 처리해 제작 시간을 대폭 단축하세요.

Pinny AI 지도 어시스턴트

텍스트나 CSV로 핀 자동 생성, 경계선 트레이싱, 카테고리 병합, 16개 언어 일괄 번역을 자체 API 키(BYOK)로 안전하게 수행합니다.

다국어 지도 & 번역

핀, 도형, 필터, 설명을 16개 언어로 번역하고 실시간 언어 전환 및 매끄러운 대체 표시를 지원합니다.

스프레드시트 가져오기 & CSV 내보내기

CSV, Excel, Numbers 파일로 대량의 마커를 업로드하고, 언제든지 CSV나 JSON으로 백업할 수 있습니다.

지도 복제 & 스테이징 환경

Deep Zoom 데이터, 마커, 설정을 그대로 복제하여 발행 전 안전하게 테스트 환경을 운영할 수 있습니다.

첫 번째 지도 만들기

만들 준비가 되셨나요? 아래의 빠른 시작 단계에 따라 첫 지도를 발행해보세요:

  1. 1
    지도 대시보드 열기
    지도 대시보드로 이동한 뒤 「지도 만들기」를 클릭합니다.
  2. 2
    이미지 또는 도면 업로드
    컴퓨터에서 평면도나 그래픽 파일(JPEG, PNG, WebP, SVG, AVIF)을 선택합니다.
  3. 3
    첫 번째 핀과 도형 배치
    M 키(마커)나 P 키(다각형)를 누른 뒤 캔버스 원하는 위치를 클릭해 배치합니다.
  4. 4
    지도 발행하기
    상단 헤더의 「발행」을 클릭하세요. 지도가 즉시 배포되어 어디든 삽입할 수 있습니다!

웹사이트 임베드 & 보안

웹사이트 삽입은 반응형 iframe 코드 한 줄이면 충분합니다. 모바일 터치 제스처와 핀치 줌을 완벽하게 지원합니다:

<iframe
  src="https://layerpin.com/m/YOUR_MAP_ID"
  width="100%"
  height="600"
  style="border: 0; border-radius: 12px; overflow: hidden;"
  allow="fullscreen"
  loading="lazy"
></iframe>
보안 팁: 지도 설정의 「임베드 및 보안」에서 승인된 도메인을 지정하여 조회수 한도를 보호하세요. 미승인 사이트의 접근은 자동 차단됩니다. React, Next.js, WordPress, Webflow, Shopify 연동 가이드를 확인해보세요.
개발자 및 AI 코딩 도구용: 사용법: llms.txt 모든 문서 주제 색인용 또는 llms-full.txt 전체 문서 컨텍스트용.