# Leaflet으로 서울시만 보이게 하는 지도 마스크 구현하기 (플러그인X)

Leaflet 마스크, 마스킹 효과

Leaflet에서 특정 지역만 남기고 나머지를 반투명하게 가리는 ‘마스크(Mask)’ 효과를 만들고 싶었던 적이 있나요?

이번 글에서는 별도의 플러그인 없이 순수 Leaflet만으로 서울시만 밝게, 외곽은 어둡게 처리하는 방법을 정리했습니다.

---

구현 원리

1. 전 세계(–180~180, –90~90) 범위의 큰 사각형 polygon을 하나 만든다.
2. 그 안에서 서울시 polygon을 빼내면,
   → 서울시만 “구멍처럼” 뚫린 반투명 마스크가 생긴다.

즉,

L.polygon([outer, ...inner])
을 사용해 outer(전세계) 에서 inner(서울시 내부) 를 구멍으로 빼주는 구조입니다.

---

전체 코드 및 결과화면

See the Pen leaflet mask by note (@somieee) on CodePen.

 

이렇게 하면 서울시만 밝게 남고, 서울 외곽은 회색 반투명 마스크로 덮입니다.
확대해도 자연스럽게 서울 경계가 강조되어 보입니다.

 

마무리

Leaflet은 플러그인 없이도 기본 도형 기능만으로 충분히 다양한 시각화 효과를 만들 수 있습니다.

이 “마스크 구조”는 행정구역 강조, 데이터 분석 영역 표시, 사용자 초점 지도(Spotlight Map) 등에 폭넓게 응용할 수 있는 유용한 기법입니다