Layerpin logo
만들기 시작

마커와 모양: 올바른 지도 항목 선택

핀, 다각형, 직사각형, 폴리라인 및 라벨의 전략적 사용을 마스터하여 공간 계층 구조를 쉽게 전달하는 깔끔하고 직관적인 대화형 지도를 만듭니다.

LP

Layerpin 팀

읽는 데 7분
정확한 마커와 지정된 영역 경계가 있는 지도

핵심 규칙: 목적지에 대한 점수, 영토에 대한 영역

대화형 지도에서 가장 흔한 실수는 넓은 지리적 영역에 핀 마커를 과도하게 사용하거나 반대로 정확한 개체에 작은 모양을 그리는 것입니다. 올바른 지도 요소를 선택하는 것은 기본적으로 방문자가 레이아웃을 얼마나 빨리 소화하는지를 결정합니다.

위치가 입구 게이트, 안내 키오스크, 경치가 좋은 전망대, 기계 또는 특정 책상 등 개별적인 단일 지점인 경우 마커 핀을 사용하세요. 마커 핀은 다음 질문에 답합니다. '이 물건은 정확히 어디에 있습니까?'

위치가 측정 가능한 물리적 영역(소매점 부지, 주거용 토지, 사무실 건물, 주차장 또는 공원 보호 구역)을 차지하는 경우 **모양(다각형 및 직사각형)**을 사용하세요. 모양은 다음 질문에 답합니다. '이 공간의 경계, 면적 및 범위는 무엇입니까?'

  1. 1
    방문자가 정확한 좌표를 찾아야 하는지 또는 경계 영역을 이해해야 하는지 평가하세요.
  2. 2
    뷰포트 영역의 5% 미만 관심 지점에 대한 마커 핀은 기본값입니다.
  3. 3
    방, 건물, 토지, 구역의 기본값은 다각형이나 직사각형입니다.

폴리라인, 커넥터 및 사용자 정의 라인을 사용하는 경우

핀과 모양 외에도 LayerPin은 폴리라인, 화살표 및 콜아웃 커넥터와 같은 특수 벡터 라인 도구를 제공합니다.

산책로, 마라톤 경로, 유틸리티 파이프라인, 가이드 투어 경로, 대중교통 노선 등 연속적인 선형 기능을 위해 폴리라인을 사용하세요. 폴리라인은 사용자 정의 획 스타일, 대시, 화살표 및 다중 세그먼트 정점 편집을 지원합니다.

지도 영역이 너무 조밀하여 항목 위에 라벨을 직접 맞출 수 없는 경우 커넥터를 사용하세요. 지시선은 기본 건축 아트웍을 가리지 않고 중심에서 벗어난 타이틀 카드나 아이콘을 정확한 좌표에 연결합니다.

  1. 1
    경로, 경계, 루트 및 유틸리티 채널에 대한 폴리라인 도구를 선택합니다.
  2. 2
    혼잡한 지역에서는 콜아웃 커넥터를 사용하여 라벨을 깔끔하게 오프셋하세요.
  3. 3
    선 두께(2px~6px)와 대시 패턴을 조정하여 다양한 경로 유형을 구분합니다(예: 기본 복도는 실선, 비상 출구는 대시).
다각형 경로선 및 구역과 함께 핀을 표시하는 대화형 내비게이션 지도

도형 스타일링 마스터하기: 불투명도, 테두리 및 대비

스타일이 잘못된 모양은 그 아래에 있는 지도 그림을 가립니다. 스타일이 잘 지정된 모양은 기본 레이블이나 질감을 숨기지 않고 선명한 색상 색조를 제공하여 그림을 향상시킵니다.

기본 모양 채우기 불투명도를 15%에서 30% 사이로 설정합니다. 이 미묘한 워시는 건축적 세부 사항을 읽을 수 있게 유지하면서 영역을 설정합니다. 대비되는 색상의 선명한 1.5~2.5픽셀 실선 테두리와 함께 사용하세요.

마우스를 올려 선택하면 불투명도를 40~50%로 높이고 테두리를 두껍게 하여 명확한 대화형 피드백을 제공합니다. LayerPin을 사용하면 브랜드 지침에 직접적으로 부합하는 맞춤형 색상 토큰을 설정할 수 있습니다.

  1. 1
    기본 채우기 불투명도를 낮게(15-25%) 유지하여 배경 맵이 완전히 표시되도록 합니다.
  2. 2
    밝은 배경 이미지와 어두운 배경 이미지 모두에 잘 어울리는 독특한 획 색상을 사용하세요.
  3. 3
    원활한 대화형 피드백을 위해 눈에 띄는 호버 및 선택 상태를 구성합니다.

마커와 도형을 조화롭게 결합

고급 대화형 지도는 모양과 마커를 응집력 있는 복합 시스템으로 결합하는 경우가 많습니다. 예를 들어 전체 쇼핑몰 건물 주위에 다각형을 그리고 그 안에 앵커 매장과 비상구를 위한 특정 카테고리 핀을 배치합니다.

일관된 상호 작용 규칙을 설정합니다. 다각형을 클릭하면 임대 정보 카드가 열리는 경우 그 안에 있는 하위 핀을 클릭하면 특정 판매자 카드가 열립니다. 다각형 경계 내에서 쉽게 클릭할 수 있도록 하위 핀의 Z-색인 스택이 더 높아야 합니다.

LayerPin의 레이어 관리 패널을 사용하여 요소 순서를 바꾸고 배경 모양을 잠그면 편집 중에 실수로 클릭하는 것을 방지할 수 있습니다.

Layerpin logo

인터랙티브 지도를 만들 준비가 되셨나요?

비공개로 제작하고 방문자 화면을 확인한 뒤 준비가 되면 게시하세요. No credit card needed.

무료로 시작