▶ d3.js 튜토리얼 :: ⑧ clipPath로 문서요소 다루기

▶ d3.js 튜토리얼 :: ⑧ clipPath로 문서요소 다루기

---

이번에 살펴볼 것은 clipPath()기능이다. "클립패스"라는 이름에서 포토샵이나 일러스트에서 활용하는 "클리핑 마스크"를 떠올린 사람이있을 것이다. 그렇다. 이 clipPath는 포토샵이나 일러스트레이터에서 클리핑마스크라고 불리는 기능과 동일하게 기능하는 메서드이다. D3에서 clipPath는 SVG문서요소이며, 이 메서드를 적용하면, 메서드가 적용된 부분(영역)만 화면에 출력되게 된다.

포토샵이나 일러스트를 몰라도 상관없다. 용어가 복잡해 이해가 어렵다면 아래에서 clipPath 전&후 비교사진을통해 다룰 내용을 어렵지않게 추측해볼 수 있을것이다.

여기서 중요한 것

 "clipPath가 적용되면, clipPath로 덮인 픽셀만(부분만) 화면에 출력한다."

g처럼 clipPath도 가시적인 존재가 아니라서 자기 자신을 보이게 할 수는 없지만, 

가시적인 문서요소를 가지고 있다.(마스크 만드는데 사용 한다.)

clipPath 활용방법

---

clipPath를 적용해보기위해 예제로 만들어놨던 스캐터플롯(scatter plot)을 가져왔다. 그래프를 살펴보면 circle들이 그래프밖으로 보기싫게 삐져나와있는 모습을 볼 수 있다.

[만약 없다면, clipPath가 적용되는지 확인할 수 있는 간단한 결과물을 만들도록 하자.]

clipPath로 우리가 할 것 : 화면에 뿌려진 모든 점을 덮기.

clipPath()로 화면에 뿌려놓은 포인트들을 특정도형으로 덮음으로써(범위지정함으로써) 해당하는 픽셀만 따로 설정 할 수 있게 된다. 이 clipPath를 활용하여 위에보이는 산포도의 점들이 특정범위를 벗어날 경우, 해당하는 픽셀을 잘라버리는데 활용할 수 있다. 

clipPath적용 전 후 결과사진

포토샵, 일러스트레이트 등의 그래픽프로그램을 다뤄본 사람이라면 한번에 이해했겠지만, 그렇지않은경우라면 개념이나 용어하나하나가 혼란스러울 수 있다. 그런 분들을 위해 clipPath를 적용하기 전화 후의 결과물 사진을 캡쳐했다.

실제 적용한 화면을 보면 확실히 쉽게 이해할 수 있을 것이라 생각한다. 이 clipPath기능을 그래픽프로그램의 클리핑마스크라는 개념과 비교해보자면, 그래픽 프로그램 쪽 훨씬 쉽고, 빠르다. 그럼에도 불구하고, 이러한 기능은 일정 기준을 잡은 뒤, 코드를 작성하여 수십, 수백번 적용가능할 뿐만 아니라, 나아가 이러한 기능의 범위를 사용자에게 부여한다면, 굳이 콘텐츠 제작하는 시점에서 범위를 정하지않아도 되는, 놀랍도록 효율적인 콘텐츠를 만들어낼 수 있다.

클리핑 패스를 사용하는 세 단계^[각주:1]

① clipPath를 정의하고 ID를 준다.

② clipPath안에 가시적인 문서요소를 넣는다.(보통 rect를 많이 사용하지만 circle이나 다른 문서요소도 상관없다.)

③ 마스크로 덮을 문서요소에 clipPath참조를 추가한다.

이를 적용하는 코드는 다음 과 같다.

데이터가 몇개안되는 작은 경우라면 각 점에 직접 clipPath를 추가하는 방법이 있다. 그러나 그런경우가 아니라면(대부분 아닐 것이다.) 'g'그룹안에 모든 점을 넣은 뒤, 이것을 참조해서 덮어버리는 것이 편리하며, 효율적이다.

위코드에서 clip-path 속성을 가진 g 문서요소 안에 circle들을 다 넣었다.

 그런데 여기서 url(#chart-area)라는 조금 낯선 코드형태가 보인다. 이것은 clip-path속성이 새로 추가한 클리핑 패스를 참조하기위해 사용하는 문법이며, 스캇머레이(2014)는 이것이 SVG표준안이기때문에 이상하더라도 어쩔 수 없다고 설명하고있다.

참고문헌

---

스캇머레이 지음, 변치훈 옮김, 『D3.js: 쉽고 빠른 인터랙티브 데이터 시각화』, 인사이트, 2014.3

1. 위의 책, 199쪽. [본문으로]