Deck.GL 시작하기

deckgl을 이용해서 웹 어플리케이션에 지도를 손쉽게 올려보자.

이전 글에서 D3.js를 이용해서 웹에 지도를 그려보았다. D3.js는 훌륭한 렌더링 라이브러리지만 자유도가 높은 만큼 써야하는 코드의 양도 많고 하나부터 열까지 모든 부분을 생각하며 코드를 작성해야하기 때문에 생산성이 매우 떨어진다. 그리고 많은 데이터 포인트를 다룰 때에는 cpu자원만 사용하는(추가 라이브러리로 gpu자원을 활용할 수 있다.) d3.js는 필연적으로 많은 데이터 포인트 표시가 필요한 지도 시각화에서는 조금 버거운 감이 없지 않았다.

Deck.gl

Deck.gl는 위와 같은 d3.js의 아쉬운점을 잘 채워주는 라이브러리다. WebGl을 잘 활용하여 렌더링 하기 때문에 3D 콘텐츠를 웹에서 효율적으로 렌더링 할 수 있게 도와준다. 또한 지도 시각화를 목적으로 만들어진 만큼, 지도 시각화에 필요한 귀찮은 일들을 내부적으로 잘 처리해준다. d3.js로 폴리곤을 표현하고 그 위에 레이어들을 올릴 때에는 프로젝션이나 이벤트, 데이터 바인딩과 업데이트를많이 신경써야 했지만 deck.gl을 사용하면 이러한 부분들을 공짜로 혹은 직관적이고 쉽게 해결할 수 있다.

기본 사용법

기타 차트 라이브러리들을 사용해본 경험이 있다면 deck.gl의 사용방식에 매우 익숙할 것이다. 클래스 친화적인 사용법으로 deck.gl이 요구하는 설정값과 데이터들을 넣고 인스턴스를 생성하고 나면 단순히 그 레이어들을 쌓아 주기만 하면 된다.

base map에 기타 레이어를 올린 모습

데이터 업데이트나 재렌더링 시 문제되는 최적화 문제도 스스로 처리해 주니, 리엑트 컴포넌트처럼 사용하더라도 구현 그 자체에는 사실상 문제가 없는 수준이다.

carto base map을 렌더링 하기 위한 코드

위는 리엑트에서 베이스 맵을 렌더링 하는 코드인데, react-map-gl(ver5)을이용해서 carto base 맵의 url을 mapStyle로 넣어주면 carto에서 제공하는 타일맵을 제공 받을 수 있다. 위 코드에서 주석 처리 된 layers에 여러가지 레이어를 올려서 시험해 볼 수 있다. 공식 문서를 참고하여 원하는 레이어를 추가하면 된다. Chat gpt의 도움을 받으면 레이어들을 쉽게 올려볼 수 있다. 베이스 맵을 렌더링 하는 코드만으로의 결과는 아래와 같다.

carto base map