SVG 포인터 이벤트: 아트워크에 맞는 클릭 영역 만들기

SVG의 pointer-events는 그래픽의 어느 부분이 포인터 이벤트의 대상이 될 수 있는지 제어합니다. 채워진 도형, 얇은 스트로크, 빈 구멍은 같은 일러스트레이션에 속해 있어도 다르게 반응할 수 있습니다. 사용자가 기대하는 동작에 맞게 히트 영역을 설정하고 색이 있는 부분만큼 빈 공간도 꼼꼼하게 테스트하세요.

이 안내는 선택 가능한 다이어그램, 클릭 가능한 엠블럼, 버튼 안의 아이콘처럼 웹 인터페이스에 쓰이는 아트워크를 위한 것입니다. SVG에 이미 사용할 수 있는 경로가 있다면 상호작용 코드를 직접 수정하세요. 편집 가능한 도형이 여전히 PNG나 JPG에 갇혀 있을 때만 벡터화가 작업 흐름에 들어갑니다.

클릭을 받는 요소부터 확인하기

SVG에서 기본값 auto는 visiblePainted처럼 동작합니다. 보이는 도형의 fill이 none이 아니면 채우기 위에서, stroke가 none이 아니면 스트로크 위에서 대상이 될 수 있습니다. SVG 상호작용 명세는 이 히트 테스트 규칙을 정의합니다.

이것이 아이콘이 고장 난 것처럼 보이는 이유일 수 있습니다. 리스너가 외곽선에서는 작동하지만 빈 중심에서는 반응하지 않을 수 있습니다. 브라우저는 주변 사각형 안의 모든 점을 같은 의미로 가정하지 않고 도형을 테스트합니다.

이 작업 흐름에서 유용한 값은 다음과 같습니다.

all은 ‘SVG 뷰포트 안의 모든 점’을 의미하지 않습니다. 여전히 요소의 도형을 가리킵니다. 섬세한 그림을 둘러싼 특정 사각형이 반응해야 한다면 그 사각형을 의도적으로 만드세요.

투명한 칠과 칠 없음도 구분하세요. fill="transparent"는 여전히 채우기 값이고 fill="none"은 채우기를 제거합니다. 불투명도만으로 오버레이가 클릭을 무시하도록 만드는 것은 신뢰할 수 없습니다.

채우기, 구멍, 열린 스트로크 테스트하기

직접 작성한 원본 도형으로 작은 인라인 SVG 실험을 만들었습니다. 사각형 구멍이 있는 파란색 복합 경로, 주황색 열린 스트로크, 별도의 투명 대상 위에 놓인 동일한 스트로크 사본이 들어 있습니다. 이들은 교육용 예제이며 PerfectVector 변환 결과가 아닙니다.

브라우저 테스트에서 파란색 띠를 클릭하자 ring이 기록되었습니다. 빈 중심을 클릭하자 이를 포함하는 SVG인 ring-stage가 기록되었습니다. 주황색 선에서는 trail이, 정점 아래의 공간에서는 stroke-stage가 기록되었습니다. 세 번째 패널에서는 두 위치 모두 hit이 기록되었습니다.

파란색 경로는 사각형 하위 경로 두 개와 fill-rule="evenodd"를 사용합니다.

<svg id="ring-stage" viewBox="0 0 240 180">
  <path id="ring" fill="#2874c8" fill-rule="evenodd"
    d="M30 20H210V160H30Z M85 60H155V120H85Z" />
</svg>

짝홀 채우기 규칙에 따라 안쪽 사각형은 채워진 영역 바깥에 있습니다. 실제 구멍입니다. 위에 겹친 흰색 사각형은 자체 히트 동작을 가진 또 다른 칠해진 도형이 됩니다. 도형 자체가 잘못되었다면 이벤트 규칙을 바꾸기 전에 SVG 구멍 수정 안내를 사용하세요.

두 번째 패널의 열린 스트로크는 다음과 같습니다.

<svg id="stroke-stage" viewBox="0 0 240 180">
  <path id="trail" d="M30 140L120 35L210 140"
    fill="none" stroke="#db704c" stroke-width="12"
    pointer-events="stroke" />
</svg>

빠르게 테스트하려면 두 코드 중 하나를 HTML 파일에 넣고 그 뒤에 다음 로거를 배치하세요. SVG에 width="360" height="270"처럼 눈에 보이는 크기를 지정하세요.

<output id="result" aria-live="polite">Click the artwork.</output>
<script>
  const stage = document.querySelector('svg');
  const result = document.querySelector('#result');
  stage.addEventListener('click', (event) => {
    result.textContent = `Target: ${event.target.id}`;
  });
</script>

칠해진 영역, 빈 내부, 그림 밖의 모서리를 클릭하세요. event.target을 기록하면 경로를 맞힌 클릭과 SVG 컨테이너에만 도달한 클릭을 구분할 수 있습니다. 이 예제는 대상 선택을 테스트하며 완성된 상호작용 컨트롤은 아닙니다.

아트워크를 두껍게 하지 않고 히트 대상 추가하기

주황색 선 주변 전체 영역에서 그 선을 선택해야 한다고 가정해 봅시다. 보이는 스트로크를 키우면 일러스트레이션이 바뀝니다. 별도의 대상을 사용하면 상호작용 영역에 자체 도형을 지정할 수 있습니다.

<svg id="hit-stage" viewBox="0 0 240 180">
  <rect id="hit" x="20" y="20" width="200" height="140"
    fill="transparent" pointer-events="all" />
  <path d="M30 140L120 35L210 140"
    fill="none" stroke="#db704c" stroke-width="12"
    pointer-events="none" />
</svg>

사각형은 아트워크 뒤에 있습니다. 주황색 경로는 포인터 대상에서 제외되므로 그 경로를 통과한 클릭을 사각형이 받을 수 있습니다. 좌표가 원하는 대상을 명시적으로 정의하며, 보이는 경로 데이터는 두 번째 패널과 동일합니다.

이 방식은 가리키기 어려운 다이어그램 영역이나 얇은 선에 유용합니다. 대상이 관련 없는 컨트롤과 겹치지 않도록 하고 두 영역이 만나는 곳에서 무엇이 일어나야 하는지 결정하세요. 큰 보이지 않는 도형도 보이는 도형처럼 쉽게 옆 대상의 클릭을 가로챌 수 있습니다.

한 가지 동작을 수행하는 단순한 아이콘이라면 SVG 사각형을 추가하지 않아도 네이티브 HTML 버튼이 필요한 대상을 제공하는 경우가 많습니다.

컨트롤에서 키보드 활성화 처리하기

포인터 대상 지정은 라벨, 키보드 활성화, 버튼 의미를 제공하지 않습니다. 단일 동작 아이콘은 이름이 있는 HTML 버튼 안에 넣고 아트워크는 장식용으로 두세요.

<button id="select-trail" type="button">
  <svg aria-hidden="true" viewBox="0 0 24 24"
    width="24" height="24" style="pointer-events: none">
    <path d="M3 20L12 4L21 20" fill="none"
      stroke="currentColor" stroke-width="3" />
  </svg>
  Select trail
</button>
<output id="selection" aria-live="polite"></output>
<script>
  const button = document.querySelector('#select-trail');
  const selection = document.querySelector('#selection');
  button.addEventListener('click', () => {
    selection.textContent = 'Trail selected';
  });
</script>

네이티브 button 요소가 컨트롤 동작을 제공하고 보이는 텍스트가 이름을 제공합니다. 눈에 보이는 포커스 표시를 유지하세요. 다른 페이지로 이동하는 동작에는 실제 링크를 사용하세요.

이 실험에서는 Tab으로 버튼에 포커스를 두고 Enter와 Space로 각각 활성화했습니다. 실제 인터페이스에서도 이 키들을 테스트하세요. 여러 독립적인 동작을 가진 다이어그램에는 해당 동작을 위한 적절한 키보드 상호작용 설계가 필요합니다. 감싸는 버튼 하나로 모든 동작을 나타낼 수는 없습니다.

pointer-events: none 설정은 비활성 상태도 아닙니다. 원래 포커스 가능한 컨트롤을 키보드 탐색에서 제거하지 않습니다. MDN은 키보드 포커스와 이벤트 전파를 모두 설명합니다. 하위 요소는 다시 대상 지정에 참여할 수 있으며 그 이벤트는 여전히 부모 리스너를 통과할 수 있습니다. 버튼을 비활성화해야 한다면 네이티브 disabled 속성을 사용하세요.

시작 아트워크가 PNG인 경우

단일 이미지로 된 PNG 또는 JPG만 있고 인터페이스에 독립적으로 편집 가능한 도형이 필요하다면 PerfectVector의 이미지 벡터화 작업 흐름으로 SVG 후보 파일을 준비할 수 있습니다. 원본과 비교하고 중요한 구멍과 영역을 살펴본 뒤 어떤 부분에 별도의 상호작용 대상을 줄지 결정하세요.

추적은 도형을 제공합니다. 애플리케이션에는 여전히 의미 있는 ID, 동작 핸들러, 이름, 포커스 동작, 의도적인 히트 영역이 필요합니다. 추적된 시각적 외곽선은 사용자가 클릭해야 할 영역보다 훨씬 복잡할 수 있습니다. 작은 인터페이스 아이콘은 수동으로 다시 그리거나 기존 벡터 마스터를 사용하는 편이 유지보수에 더 쉬울 수 있습니다. PNG 아이콘 준비 안내는 복원한 아트워크를 UI 키트에 가져오기 전에 확인할 사항을 설명합니다.

아이콘이 컨트롤 안에서 단순한 장식이라면 CSS 마스크 아이콘이 색상 동작에 적합할 수 있습니다. 동작은 여전히 감싸는 컨트롤이 담당합니다. 더 폭넓은 벡터화 안내는 경로 복원이 처음부터 어떤 경우에 유용한지 다룹니다.

배포 전에 원하는 영역 검증하기

큰 편집기 미리보기뿐 아니라 실제 표시 크기에서 테스트하세요.

1. 채워진 영역, 스트로크, 각 구멍, 빈 모서리를 클릭하세요.
2. 잘못된 동작이 실행되면 이벤트 대상을 살펴보세요.
3. 포인터를 가로채는 투명 사각형이나 오버레이가 있는지 확인하세요.
4. 인접한 대상이 예상 밖으로 겹치지 않는지 확인하세요.
5. 적절한 곳에서 Tab, Enter, Space를 사용하고 포커스가 보이는지 확인하세요.
6. 인터페이스가 지원하는 기기에서 터치 상호작용을 테스트하세요.

이 실험은 한 브라우저에서 이 특정 도형들을 검증합니다. 마스크, 클리핑, 필터, 복잡한 가져온 아트워크에 대한 모든 브라우저의 동작을 입증하지는 않습니다. 디자인에서 이런 기능을 사용한다면 자체 테스트에 추가하세요.

편집 가능한 도형이 없다면 PerfectVector에서 소스 이미지를 테스트한 뒤 윤곽과 구멍을 살펴보세요. 아트워크가 올바른 상태가 되면 상호작용 영역을 별도로 정의하고 테스트하세요.

FAQ

SVG가 외곽선을 클릭할 때만 반응하는 이유는 무엇인가요? SVG의 기본 포인터 동작에서는 채워지지 않은 도형이 칠해진 스트로크 위에서만 대상이 될 수 있습니다. 채우기 값과 원하는 동작을 확인하세요. 빈 공간이 같은 동작을 활성화해야 한다면 의도적으로 만든 히트 대상이나 감싸는 네이티브 컨트롤을 사용하세요.

pointer-events="all"은 SVG 전체를 클릭 가능하게 만드나요? 요소의 칠이나 가시성 값과 관계없이 채우기 및 스트로크 영역을 대상으로 지정합니다. SVG 뷰포트 전체를 자동으로 대상으로 바꾸지는 않습니다. 그 영역이 필요하다면 명시적인 도형을 추가하거나 감싸는 컨트롤을 사용하세요.

투명한 사각형도 클릭을 받을 수 있나요? 네. 투명하다고 도형이나 채우기가 없는 것은 아닙니다. 적절한 pointer-events 값을 가진 투명 사각형은 의도적인 히트 대상이 될 수 있지만 실수로 클릭을 가로챌 수도 있습니다.

이미지를 벡터화하면 접근성 있는 버튼이 만들어지나요? 아닙니다. 벡터화는 래스터 아트워크에서 편집 가능한 도형을 만들 수 있습니다. 이름, 키보드 동작, 동작 핸들러, 포커스, 상호작용 영역은 인터페이스에서 구현하고 테스트해야 합니다.

Sources

1. W3C — SVG 2 스크립팅과 상호작용 — SVG 포인터 대상 지정과 pointer-events 값이 사용하는 도형을 정의합니다.
2. W3C — SVG 2 칠하기 — 채우기 규칙이 경로의 내부와 구멍을 결정하는 방식을 정의합니다.
3. MDN — pointer-events — 대상 지정, 전파, 상속, 키보드 포커스의 한계를 설명합니다.
4. MDN — button 요소 — 네이티브 버튼 동작, 이름 지정, 비활성 상태를 설명합니다.