DEVIEW 2017 [SESSION 5] 14일 만에 GitHub 스타 천 개 받은 차트 오픈소스 개발기

DAY 1 / 16:00~16:45 / TRACK 1

14일 만에 GitHub 스타 천 개 받은 차트 오픈소스 개발기

차트: 데이터의 시각화, UI + UX

외부 라이브러리

• 상용

  • 비용의 문제, 라이센스 비용 부담

• 오픈소스

  • 굉장히 다양함. 결정의 문제

라이브러리 찾기: https://bestof.js.org/

결정?

• 성능 중요

• 디자인 및 요소별 커스터 마이징

• 영역별 다른 관점

  • 시스템, 실시간

    • 성능, 실시간데이터

  • 엔드유저, 정적임

    • UI/UX 중요

처음엔 자체 개발

그러나, 성공적이진 못했다. 서비스 적용 이후, 메인터넌스 잘 안됨 개발 주체의 부재상황(이직 등) 또는 다른 서비스 개발 등으로 인한 지원 어려움 타 라이브러리 대비 범용성 부족

오픈소스 사용은 어떨까?

• 지속적 업데이트

• 기술적 트렌드 반영

• 안정성 등을 기대할 수 있으니 합리적이지 않을까?

향후 오픈소스 업데이트 지속되지 않을 경우, fork를 통한 유지 고려도 가능 공통된 라이브러리를 사용하면 각각 다른 라이브러리 사용으로 인한 관리 및 기술경험 누적되지 않는 이슈 해결 기대

[참고] 그간 사용되었던 다양한 차트 라이브러리들: NVD3 C3.js Chart.js Highcharts echarts

간접적인 형태로 접근해보자

• 라이브러리의 발전은 생태계에 맡기자

• 필요한 기능은 PR 으로 해결하자

• 오픈소스는 일정 수준 검증되었다(안정성)

개발

기반 라이브러리 C3.JS 선정 이유

• 가장 인기있는 D3.js 기반

• 인기도 비교

• 간결한 인터페이스

• 풍부한 문서, 예제 존재

• 내부 서비스들에서 이미 다수 사용

• 엔드유저를 위한 것이므로 디자인/기능 커스터마이징 가능여부 중요

SVG TEXT I'm SVG text

텍스트 스타일링은 가능 <br> 같은거 안됨

줄바꿈은 새로운 노드로 위치(via attributes)

여백 등의 조정이 어려움 → transform:translate 또는 <tspan> 사용

모바일 환경 C3.js는 모바일 환경 미지원

Swipe 제스처를 통한 데이터 확인 UX 필요

환경별 다른 이벤트 발생

iOS, Android 간의 터치 이벤트 처리 방식 다름

http://jsbin.com/xiyara

데이터는 없지만, 데이터는 표현해야 한다

데이터가 0인 경우, 표현이 되어야 할까? 안되어야 할까?

관점에 대한 차이

C3+

C3.js 확장 라이브러리 개발

문제점

• 래퍼.애드온 형태의 지속적 발전과 효용성 의문

• 메인턴스의 중단

• 프로젝트 참여 시도, 실패(답변 없음)

직접 만들자! billboard.js

Fork 에 대한 합리성, 당위성 & 신뢰

• Fork 한다고 사용자가 오지 않는다

• 기존 커뮤니티에 당위성 제시 필요

• 과연 이 사람이 믿을만 한가?

홍보

• 직접 발로 뛰기

  • 다수의 ECHO 사이트에 등록하기

    • JavaScript Live

    • Echo JS

    • Hacker News ...

  • 뉴스레터 소개 요청하기

    • JavaScript Weekly

    • JavaScript Daily

Star 의 가치는?

cdnjs 등록은 최소 200개 유도됨

충실한 문서

• C3.js 에서 마이그레이션 하기 가이드

• 잘 작성된 API 문서

• 왜 Fork 하게 되었나?

• Readme

• 많은 예제 - '무엇' 이 가능, 할 수 있는지 보여줄 수 있다.

• 꾸준한 문서 업데이트

오픈소스의 어려움

누군가의 노력이 대가없이 제공되는 것. 그러나, 쉽게 비난 받기도 한다.