[데뷰2017] 네이버의 차트 오픈소스 개발기 “지난한 고민과 노력의 과정”

네이버(대표 한성숙)가 차트 오픈소스를 개발한 과정을 소상히 밝혔다. 차트 라이브러리인 ‘빌보드.JS’를 완성해 선보이기까지 많은 고민과 노력의 과정이 있었다. 지난 6월 공개된 빌보드.JS는 개발자 사이에서 좋은 평을 얻고 있다. 

16일 코엑스 그랜드볼룸에서 열린 개발자 컨퍼런스 ‘네이버 데뷰(DEVEW)’를 통해, 박재성 FE플랫폼 담당자는 "일상에서 쉽게 차트를 자주 접하지만, 막상 개발자로서 경험을 하는 동안에도 차트 개발은 쉽게 경험해 보기 어려운 영역"이라고 말했다. 그는 네이버에서 FE기술 리서치 및 오픈소스 개발에 참여하고 있다.

차트는 데이터를 시각화한 것이다. 시각적인 구현을 위해선 차트 라이브러리가 필요하다. 결국 UI(디자인)와 인터렉션을 결합해 구현해내는 것이 관건이다. 차트는 한번 개발되더라도 지속적인 개선 요인이 없어 경험 향상이 어렵다. 

차트는 어떻게 개발할까. 우선 직접 모두 다 만드는 방법이 있다. 두 번째로는 외부 라이브러리를 사용해 개발하는 것이다. 박재성 FE플랫폼 담당자는 모두 직접 개발하는 것이 현실적으로 매우 어렵기 때문에, 외부 라이브러리를 활용하는 것이 좋다고 말했다. 

그는 “만약 여러분이 아주 호기롭게 차트 따위는 하루만에도 만들 수 있지 않을까 싶어, 직접 개발하고자 한다면 여러분에게 해드리고 싶은 한 가지 말이 있다. ‘진심으로 행운을 빌어요’”라고 농을 던졌다. 결국 상용이나 외부 오픈소스를 활용하는 게 좋다는 뜻이다. 

그러나, 외부 라이브러리를 활용하는 것은 비용 문제를 야기한다. 상용 및 오픈소스를 사용하는 데에는 많은 라이센스 비용이 뒤따르기 때문. 어떤 라이브러리를 사용할지 결정하는 데에도 어려움이 따른다. 비용 문제를 고려하면 이것저것 사용하기 어려워, 합리적인 선택이 쉽지 않다.

그러면 어떤 차트 라이브러리를 택해야 할까. 성향에 따라 갈린다. 빠른 대용량 데이터를 처리할 수 있는 성능을 중요시하고 이에 반해 디자인은 별로 중요하게 여기지 않는 사람은  캔버스(Canvas)가, 디자인 및 요소별 커스터마이징(주문제작)과 다양한 해상도를 중요하게 보는 사람은 SVG를 택하는 게 좋다. Canvas는 대용량 트래픽을 실시간으로 따져 볼 수 있으며, 수치의 변화를 도드라지게 나타낸다. 주로 소수의 참여자(admin)가 존재한다. SVG는 대규모의 불특정 사용자(엔드 유저)를 대상으로, 다양한 디자인과 UX를 나타낸다. 주로 정적인 데이터를 시각화한다. 

◆ 네이버의 개발 초기 단계는 ? = 그렇다면, 네이버는 그동안 어떻게 차트를 개발해 왔을까. 좀 더 네이버 사례에 집중해보자. 

네이버는 그간 서비스마다 서로 다른 라이브러리를 사용해왔다. 그로 인해 다양한 문제들이 나타났다. 우선 기술적 노하우 축적이 안 된다는 문제가 있다. 또한 상용 라이브러리 사용 시 비용문제가 대두된다. 아울러 경험이 누적되지 않아 기술적 노하우가 추적되지 않고, 차트 적용 시 매번 반복되는 리소스 낭비가 문제로 떠올랐다. 

물론, 네이버는 처음엔 차트를 자체 개발하려고 했으나 성공적이지 못했다. 서비스 적용 후, 유지가 잘 안되고 개발 주체들이 이직하는 등의 이유로 어려움을 겪었다. 

이에 네이버는 간접적인 형태로 접근한다. 라이브러리의 발전은 생태계에 맡기고 필요한 기능은 PR을 통해 해결한다는 전략이었다. 그래서 만들어낸 것이 'C3.JS 확장 라이브러리'다. 네이버가 개발 기반으로 C3.JS를 선정한 이유는 간결한 인터페이스, 풍부한 문서와 예제 때문이다. 또한 C3.JS의 큰 인기도 중요하게 고려한 요소였다. C3.JS는 엔드 유저 대상으로 디자인과 기능 커스터마이징이 용이한 것이 특징이다.

그러나, 개발 과정은 험난했다. 차트 개발 경험이 없어, 차트 내 명칭이 제각각으로 불렸다. 명칭 정립이 덜 된 것이다. 더구나 SVG 텍스트는 ‘<br> 불가’ 및 줄바꿈을 새로운 노드로 해야 하는 등 불편함이 많았다. 또한 C3.JS는 모바일 환경에선 지원되지 않았다. iOS나 안드로이드 등 서로 다른 운영체제에서 저마다 각각 다른 문제가 발생하기도 했다.

◆ C3+ 개발 완성 후.. 또 다른 문제 직면 = 험난한 과정 속에서도 네이버는 결국 C3.JS 확장 라이브러리인 C3+를 만들어냈다. C3.JS를 확장한 테마 형태의 디자인 차트를 생성하는 데 성공한 것이다. C3.JS에서 확장됨은 물론, 기능이 보완되고 테마가 덧입혀졌다. 모바일 지원도 가능해졌다. 커스텀 축을 지원하고 확장 옵션도 생겼다. 

이는 네이버의 블로그와 포스트 서비스의 통계에 적용됐다. 이를 통해 네이버는 훨씬 발전한 통계 서비스를 제공하게 됐다. C3+을 통해 네이버는 매번 다른 라이브러리를 다뤄 생겨났던 반복적인 비용을 제거하고, 기본 디자인을 활용해 커스터마이징에 따른 비용을 제거했다. 

그러나 기쁨도 잠시, 네이버는 곧 현실적인 고민에 직면했다. 네이버 개발자들은 래퍼 및 애드온 형태가 꾸준하게 발전할 수 있을지와 그 효용성에 의문을 품기 시작했다. 기반 라이브러리인 C3.JS이 얼마나 지속될지도 의문이었다. 오픈소스 발전에 기댈 수 있을 것이란 기대가, C3.JS의 더딘 발전으로 인해 위기를 맞은 것이다. 

◆ 빌보드.JS 탄생... “이제 시작” = 이에 네이버는 ‘빌보드.JS’로 다시 상황을 타개해 나갔다. 빌보드.JS는 재사용이 가능한 쉬운 ‘인터페이스 자바스크립트 차트 라이브러리’로, D3v4+에 기반한 것이 특징이다. 커스터마이징 기능은 150개 이상의 다양한 옵션이 제공되는 등 보다 개선된 서비스를 제공한다. 

더 나아가 네이버는 원 개발자 및 커미터(오픈SW고급개발자)에게 C3.JS 프로젝트에 참여하고 싶다는 메일을 보냈다. 하지만 몇 주가 흘러도 메일 회신이 없었다. 이에 네이버는 인기 코드 공유 사이트인 깃허브(GITHUB) 사이트에 공개적으로 프로젝트와 관련해 문의했다. 다음날 결국, 새로운 프로젝트를 시작하자는 답을 얻는다. 포크(FORK, 기존 오픈소스 소프트웨어를 새로 업그레이드 하는 것)가 성사된 것이다. 다만, 당면한 C3.JS의 미해결 문제들, 가령 모바일 환경 지원 부족이나, 오래된 개발 스타일의 코드 등은 과제로 남았다. 

네이버가 빌보드.JS를 릴리즈(release)하기 3주전, 갑작스럽게도 C3.JS의 차기작 계획이 발표되고 새로운 커미터가 추가됐다. 네이버는 이미 많은 진전을 통해 릴리즈를 앞둔 상황이었다. 그러나 네이버는 많은 고민 끝에 계획대로 릴리즈를 진행했다. 

이 오픈소스의 이름을 짓는 대도 많은 고민이 있었다. 원래는 C3+ 2.0으로 할 계획이었으나, C3.JS와 흡사하다는 이유로 취소됐다. 결국, 이름은 음악차트로 유명해진 빌보드(Billboard)란 단어가 앞에 붙어 완성됐다. 빌보드.JS의 탄생이다. 드디어 지난 6월 8일 빌보드.JS의 1.0.0 버전이 세간에 공개됐다. 그러나 공개된 처음부터 사용자들의 관심이 쏠리진 않았다. 

▲네이버는 빌보드.JR이 깃허브에서 공개 후 2주만에 별 1000개를 얻었다고 밝혔다. (사진=네이버)

이에 네이버는 홍보 전략의 필요성을 깨달았다. 많은 다수의 관련 사이트에 홍보성 정보를 전파했다. 결국 ‘자바스크립트 위클리’ 등 유력 매체에 빌보드.JS이 소개되는 등 소기의 성과를 거뒀다. 최근, 깃허브를 통해 ‘자바스크립트 언어부문’ 랭킹 3위에 오르기도 했다. 깃허브에서의 빌보드.JS의 다운로드수는 최근 들어 매달 오르고 있다. 

네이버는 향후에도 빌보드.JS에 신규 기능을 추가하고, 버그 등 문제에 발빠르게 대처하겠다는 전략이다. 박재성 FE플랫폼 담당자는 “오픈소스를 할 때 누군가의 비난에 일일이 반응할 필요는 없다. 자신의 기분을 상하지 않게 하는 게 중요하다”며 “비난하는 사람들은 비난에 대한 반응을 먹고 산다. 그런 상황에 놓인다면 유연하게 대처할 것”이라고 말했다. 

마지막으로 오픈 소스 방식을 택한 이유에 대해, 그는 “여러분이 개발자로서 살아가는 동안 많은 오픈소스들의 도움을 받았을 것”이라며 “내가 받은 만큼 다른 개발자들에게 도움을 줄 수 있는 일을 한다면, 좀 더 좋은 세상을 만들 수 있을 것이라고 생각했다”고 설명했다.