제 5회 D2 CAMPUS FEST O.T - billboard.js 차트오픈소스개발기

1. HOW TO BECOME A GLOBAL OPEN-SOURCE?HOW TO BECOME A GLOBAL OPEN-SOURCE?
차차트트 오오픈픈소소스스 개개발발기기
2018.02.012018.02.01
박재성박재성

2. WHO IS THIS GUY?WHO IS THIS GUY?
Books
Open Source
, ,
MS MVP (2018)
자바스크립트 UI 개발과 Jindo 프레임워크 (2011)
자바스크립트 성능 이야기 (2012)
JindoJS egjs billboard.js

3. 차트란 무엇인가?차트란 무엇인가?

4. 훗 차트, 너란녀석훗 차트, 너란녀석
1) 데이터의 시각화
2) 차트 라이브러리? 1)의 구현을 위한 도구
그러나 차트의 적용은 무엇일까?그러나 차트의 적용은 무엇일까?
결국, 시각화가 기본이다.결국, 시각화가 기본이다.
UI(디자인) + 인터렉션UI(디자인) + 인터렉션
구현(적용)이 관건구현(적용)이 관건

5. CHARTSCHARTS
ARE EVERYWHEREARE EVERYWHERE
iOS 10
89%
iOS 9
9%
Earlier
2%

6. 차트 같은걸 끼얹나?차트 같은걸 끼얹나?
차트는 자주 접하지만, 개발은 그렇지 않다.차트는 자주 접하지만, 개발은 그렇지 않다.
한번 개발(또는 경험)되더라도 지속적인한번 개발(또는 경험)되더라도 지속적인
개선 요인이 별로 없어 경험 향상이 어렵다.개선 요인이 별로 없어 경험 향상이 어렵다.

7. YOU, 차트 개발 해야함YOU, 차트 개발 해야함
몇 가지의 선택지들몇 가지의 선택지들
직접 개발한다.직접 개발한다.
외부 라이브러리를 사용한다.외부 라이브러리를 사용한다.
→ 상용 or 오픈소스→ 상용 or 오픈소스
어떤 기술을 사용할 것인가?어떤 기술을 사용할 것인가?
→ Vector(SVG) or Bitmap(Canvas)→ Vector(SVG) or Bitmap(Canvas)

8. 그래, 직접 개발!그래, 직접 개발!
Good Luck! 진심으로 행운을 빕니다.Good Luck! 진심으로 행운을 빕니다.
https://giphy.com/gifs/starwars-star-wars-force-3ohuPdEqZR8tDeuN3O/https://giphy.com/gifs/starwars-star-wars-force-3ohuPdEqZR8tDeuN3O/

9. 역시, 외부 라이브러리!역시, 외부 라이브러리!
상용 or 오픈소스?상용 or 오픈소스?
상용 → 결국 비용의 문제상용 → 결국 비용의 문제
라이센스 비용 부담 (ex. Highcharts 10 developer $3,320)라이센스 비용 부담 (ex. Highcharts 10 developer $3,320)
오픈소스 → 어떤 라이브러를 사용할 것인가?오픈소스 → 어떤 라이브러를 사용할 것인가?
결정의 어려움 (많은 고려요소 필요)결정의 어려움 (많은 고려요소 필요)

10. 다양한 차트 라이브러리다양한 차트 라이브러리
어떤 것을 선택할 것인가?어떤 것을 선택할 것인가?
[참고][참고] https://bestof.js.org/tags/charthttps://bestof.js.org/tags/chart

11. 기술 선택 가이드기술 선택 가이드
성능 중요(빠른 대용량 데이터 처리),성능 중요(빠른 대용량 데이터 처리),
상대적으로 디자인은 덜 중요한 경우 →상대적으로 디자인은 덜 중요한 경우 → Canvas (비트맵)Canvas (비트맵)
디자인 및 요소별 커스터마이징,디자인 및 요소별 커스터마이징,
다양한 해상도(Zoom) 중요 →다양한 해상도(Zoom) 중요 → SVG (벡터)SVG (벡터)
[참고][참고] SVG 대 캔버스: 선택 방법SVG 대 캔버스: 선택 방법

12. 영역별 다른 관점,영역별 다른 관점,
디자인 보단 실시간 변화 표현 중요디자인 보단 실시간 변화 표현 중요
대용량 트래픽의 실시간(realtime) 변화 확인
수치의 변화가 중요. 기본 디자인 사용에 문제 없음
관리도구 등에 적합. 소수의 참여자(admin)

13. 영역별 다른 관점,영역별 다른 관점,
엔드 유저대상, 다양한 디자인/UX 중요엔드 유저대상, 다양한 디자인/UX 중요
주로 정적인 데이터의 시각화
디자인과 UX 적용의 유연성 필요
대규모의 불특정 사용자(엔드유저)를 대상

14. 그간 네이버에서의 차트그간 네이버에서의 차트
서비스들마다 다른 라이브러리를 사용서비스들마다 다른 라이브러리를 사용
그리고 그로 인한 다양한 문제그리고 그로 인한 다양한 문제

15. 문제들문제들
기술적 know-how 축적 안됨기술적 know-how 축적 안됨
상용 라이브러리 사용시 비용 문제상용 라이브러리 사용시 비용 문제
경험이 누적되지 않아 차트 적용(디자인/개발)시,경험이 누적되지 않아 차트 적용(디자인/개발)시,
매번 반복되는 리소스의 낭비매번 반복되는 리소스의 낭비

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

17. 그렇다면그렇다면
오픈소스 사용은 어떨까?오픈소스 사용은 어떨까?
지속적 업데이트, 기술적 트렌드 반영, 안정성 등을지속적 업데이트, 기술적 트렌드 반영, 안정성 등을
기대할 수 있으니 합리적이지 않을까?기대할 수 있으니 합리적이지 않을까?
향후 오픈소스 업데이트 지속되지 않을 경우,향후 오픈소스 업데이트 지속되지 않을 경우,
fork를 통한 유지 고려도 가능fork를 통한 유지 고려도 가능
공통된 라이브러리를 사용하면, 각각 다른 라이브러리 사용으로공통된 라이브러리를 사용하면, 각각 다른 라이브러리 사용으로
인한 관리 및 기술경험 누적되지 않는 이슈 해결 기대인한 관리 및 기술경험 누적되지 않는 이슈 해결 기대
[참고][참고] 그간 사용되었던 다양한 차트 라이브러리들:그간 사용되었던 다양한 차트 라이브러리들:
,, ,, ,, ,, , etc., etc.NVD3NVD3 C3.jsC3.js Chart.jsChart.js HighchartsHighcharts echartsecharts

18. 직접 개발도 해봤고,직접 개발도 해봤고,
외부(상용/오픈)의 것도 사용해 봤으니외부(상용/오픈)의 것도 사용해 봤으니
간접적인 형태로 접근해 보자간접적인 형태로 접근해 보자
라이브러리의 발전은 생태계에 맡기자.라이브러리의 발전은 생태계에 맡기자.
필요한 기능은 PR을 통해 해결필요한 기능은 PR을 통해 해결
오픈소스는 일정 수준 검증 되었다.오픈소스는 일정 수준 검증 되었다.
다양한 문서, practice가 존재한다.다양한 문서, practice가 존재한다.

19. 그래서, 만들다.그래서, 만들다.
C3.JS 확장 라이브러리 개발C3.JS 확장 라이브러리 개발

20. 차트 개발, 어려운 문제들차트 개발, 어려운 문제들
고난의 시작고난의 시작

21. 개발시,개발시,
보편적으로 겪게 되는 문제들보편적으로 겪게 되는 문제들
커뮤니케이션커뮤니케이션
디자인 & 인터렉션 커스터마이징디자인 & 인터렉션 커스터마이징
그리고 또 그리고 수많은...그리고 또 그리고 수많은...

22. 커뮤니케이션커뮤니케이션
나의 이름은 무엇 인가요?나의 이름은 무엇 인가요?
차트 개발 경험이 많이 없는 경우, 부르는 명칭도 제각각차트 개발 경험이 많이 없는 경우, 부르는 명칭도 제각각

23. 이제, 디자인을 적용해 보자.이제, 디자인을 적용해 보자.
디자인 가이드디자인 가이드
각 요소들의 크기와 위치를 가이드에 맞춰주세요.각 요소들의 크기와 위치를 가이드에 맞춰주세요.

24. OMG! SVG TEXTOMG! SVG TEXT
I'm SVG text
텍스트 스타일링은 가능텍스트 스타일링은 가능
<br> 같은거 안됨. 줄바꿈은 새로운 노드로<br> 같은거 안됨. 줄바꿈은 새로운 노드로
위치(via attributes) 여백 등의 조정이 어려움위치(via attributes) 여백 등의 조정이 어려움
→ transform:translate 또는 <tspan> 사용→ transform:translate 또는 <tspan> 사용

25. 모바일 환경모바일 환경
C3.js는 모바일 환경 미지원C3.js는 모바일 환경 미지원
Swipe 제스처를 통한 데이터 확인 UX 필요Swipe 제스처를 통한 데이터 확인 UX 필요

26. 환경별 다른 이벤트 발생환경별 다른 이벤트 발생
터치하고 바로 떼었을 때터치하고 바로 떼었을 때
iOS 11 (iPhone 7)iOS 11 (iPhone 7)
touchstart → touchend → mouseover → mousemove → mouseout
(포커스 이동되면 발생)
Android 7 (Galaxy S8)Android 7 (Galaxy S8)
touchstart → touchend → mouseover → mousemove → mousedown
→ mouseup → click → mouseout (포커스 이동되면 발생)
http://jsbin.com/xiyarahttp://jsbin.com/xiyara

27. 최소값최소값
y축 기반 값에 따른 up/down 표현y축 기반 값에 따른 up/down 표현
0 1 2 3 4
100,000
100,500
101,000
101,500
102,000
102,500
103,000
103,500
104,000
0 1 2 3 4
0
10,000
20,000
30,000
40,000
50,000
60,000
70,000
80,000
90,000
100,000
110,000
위의 차트는 모두 동일한 값을 표현하고 있습니다.위의 차트는 모두 동일한 값을 표현하고 있습니다.

28. 데이터는 없지만,데이터는 없지만,
데이터는 표현해야 한다?데이터는 표현해야 한다?
데이터가 0인 경우,데이터가 0인 경우,
표현이 되어야 할까? 안되어야 할까?표현이 되어야 할까? 안되어야 할까?

29. C3+C3+
C3.JS 확장 라이브러리C3.JS 확장 라이브러리

30. C3+?C3+?
C3.js를 확장한 테마 형태의 디자인 차트 생성C3.js를 확장한 테마 형태의 디자인 차트 생성
C3.JS: 확장 + 기능 보완 + 테마C3.JS: 확장 + 기능 보완 + 테마
커스텀 축 지원
범례 템플릿
모바일 지원
테마를 통한 차트 생성
확장 옵션

31. 블로그/포스트 통계 적용블로그/포스트 통계 적용
[네이버 블로그] 블로그 통계가 새로워졌습니다!
[네이버 포스트] 훨씬 좋아진 통계, 지금 제공합니다!

32. C3+ GOALC3+ GOAL
매번 다른 기술/라이브러리를 다루는매번 다른 기술/라이브러리를 다루는
반복적인 비용 제거반복적인 비용 제거
기본적 디자인(테마)을 활용해기본적 디자인(테마)을 활용해
커스터마이징(디자인)에 따른 비용 제거커스터마이징(디자인)에 따른 비용 제거
기술적 경험 축적: SVG, D3, C3.js기술적 경험 축적: SVG, D3, C3.js

33. BUT, 현실적 문제직면BUT, 현실적 문제직면
장기적 관점에서, C3+ 발전을 위해 외부 공개 목표장기적 관점에서, C3+ 발전을 위해 외부 공개 목표
하지만,하지만,
래퍼/애드온 형태의 지속적 발전과 효용성 의문래퍼/애드온 형태의 지속적 발전과 효용성 의문
기반 라이브러리인 C3.js 지속성 의문기반 라이브러리인 C3.js 지속성 의문
오픈소스의 발전에 기댈 수 있을 것이란 기대는오픈소스의 발전에 기댈 수 있을 것이란 기대는
C3.js의 더딘 발전(또는 중단?)으로 위기 직면C3.js의 더딘 발전(또는 중단?)으로 위기 직면

34. Re-usable, easy interface JavaScript chart libraryRe-usable, easy interface JavaScript chart library
based on D3 v4+based on D3 v4+

35. 차트를 만들어 봅시다.차트를 만들어 봅시다.

36. STEP 1STEP 1
파일을 로딩 합니다.파일을 로딩 합니다.
<!-- D3.js를 로딩 -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<!-- billboard.js와 기본 스타일을 로딩 -->
<script src="billboard.js"></script>
<link rel="stylesheet" href="billboard.css">

37. STEP 2STEP 2
차트가 노출될차트가 노출될
영역을 설정합니다.영역을 설정합니다.
<div id="chart"></div>

38. STEP 3STEP 3
옵션과 함께 차트를 생성합니다.옵션과 함께 차트를 생성합니다.
Declarative APIDeclarative API
bb.generate({
bindto: "#chart",
data: {
columns: [
["data1", 30, 200, 100, 400, 150, 250],
["data2", 100, 80, 130, 240, 350, 90],
["data3", 150, 120, 58, 135, 258, 159]
],
type: "bar",
colors: {
data1: "#2acefd",
data2: "#f87070",
data3: "#1f77b4"
},
labels: true
}
});

39. 짠!짠!
bar line spline pie bubble gauge area-spline step donut
scatter
30
200
100
400
150
250
100
80
130
240
350
90
150
120
58
135
258
159
0 1 2 3 4 5
0
50
100
150
200
250
300
350
400
450
data1 data2 data3

40. 커스터마이징의 용이성커스터마이징의 용이성
150개 이상의 제공
SVG 노드: 필요한 경우, 직접 핸들링 가능
CSS로 스타일링 가능
다양한 옵션

41. THE UNKNOWN WAY TOTHE UNKNOWN WAY TO
FORK에서 공개까지FORK에서 공개까지

42. C3.JS 프로젝트 참여 시도C3.JS 프로젝트 참여 시도
원 개발자 및 커미터에게 메일을 통한 문의원 개발자 및 커미터에게 메일을 통한 문의

43. 일단 활동하자일단 활동하자
PR도 보내고 이슈들에 대한 답변도 하고PR도 보내고 이슈들에 대한 답변도 하고
[참고][참고] https://github.com/c3js/c3/issues/1924#issuecomment-271224192https://github.com/c3js/c3/issues/1924#issuecomment-271224192

44. 그렇게 몇 주가 흘렀지만그렇게 몇 주가 흘렀지만
메일 회신도 없고,메일 회신도 없고,
프로젝트 ACTIVITY도 딱히 없는 상태...프로젝트 ACTIVITY도 딱히 없는 상태...

45. 공개적 문의공개적 문의
issue를 등록해 공개적으로 프로젝트 유지 문의issue를 등록해 공개적으로 프로젝트 유지 문의
[참고][참고] https://github.com/c3js/c3/issues/1965https://github.com/c3js/c3/issues/1965

46. 그리고, 그 다음날그리고, 그 다음날

47. 그래, FORK 하자그래, FORK 하자
''향후 오픈소스의 업데이트 지속 안될 경우,향후 오픈소스의 업데이트 지속 안될 경우,
fork를 통한 유지fork를 통한 유지'의 명제'의 명제
당면한 C3.js의 미해결 과제들:당면한 C3.js의 미해결 과제들:
D3 최신버전 v4+ 미지원
모바일 환경에 대한 지원 부족
오래된 개발 스타일 코드 (ES3)
SVG polyfill 제거
등등...

48. 합리성, 당위성 & 신뢰합리성, 당위성 & 신뢰
Fork 한다고 해서 사용자가 오진 않는다.Fork 한다고 해서 사용자가 오진 않는다.
기존 커뮤니티에 당위성이 제시 필요기존 커뮤니티에 당위성이 제시 필요
과연 이 사람(개발자)이 믿을만 한가?과연 이 사람(개발자)이 믿을만 한가?

49. THE JOURNEYTHE JOURNEY
GOING FROM D3 V3 TO V4GOING FROM D3 V3 TO V4
WITHIN TWO MONTHSWITHIN TWO MONTHS

50. OOPS~, D3 V4OOPS~, D3 V4
v3 → v4: Breaking Changes
공식 문서( ) 있으나,
마이그레이션 가이드 없고 만들지 않을거임.
Changes in D3 4.0
[참고][참고] https://github.com/d3/d3/issues/2893https://github.com/d3/d3/issues/2893
D3 V4 - What's new?D3 V4 - What's new?

51. D3 V4로 업그레이드D3 V4로 업그레이드
변경된 모듈에 대한 목록을 모두 작성변경된 모듈에 대한 목록을 모두 작성
v3 v4
d3.time.scale d3.scaleTime
d3.svg.line() d3.line
d3.behavior.drag d3.drag
......
모듈의 behavior 변경되어, 기존과 유사한 것도 있지만모듈의 behavior 변경되어, 기존과 유사한 것도 있지만
다르게 처리되는 것들이 대다수다르게 처리되는 것들이 대다수
이전 버전과 변경된 문서를 읽고 비교하고, 테스트 하고...이전 버전과 변경된 문서를 읽고 비교하고, 테스트 하고...

52. 그외 작업들그외 작업들
차트 생성 흐름에 따른 오류들의 순차적 해결/변환차트 생성 흐름에 따른 오류들의 순차적 해결/변환
ES3 → ES6로 전환 병행 및 개발 환경 변경ES3 → ES6로 전환 병행 및 개발 환경 변경
API 문서화 (API 문서화 ( ))
테스트 코드 업데이트(d3 v4 호환) 및 커버리지 개선테스트 코드 업데이트(d3 v4 호환) 및 커버리지 개선
JSDocJSDoc

53. RELEASE 3주전RELEASE 3주전
YAY~!, 이제 끝이 보인다.YAY~!, 이제 끝이 보인다.

54. 어느 날, 갑자기 두둥~어느 날, 갑자기 두둥~
갑작스러운 C3.js 차기 릴리즈 계획과 새로운 커미터 추가
[참고][참고] https://github.com/c3js/c3/issues/2033https://github.com/c3js/c3/issues/2033

55. 고민고민
이미 많은 진전을 통해 릴리즈를 앞둔상황이미 많은 진전을 통해 릴리즈를 앞둔상황
계획만을 통한 발전에 대한 의문계획만을 통한 발전에 대한 의문
커미터 추가 후에도 활발한 활동 없어,커미터 추가 후에도 활발한 활동 없어,
빠른 시일 내 D3 v4 지원 어렵다는 판단빠른 시일 내 D3 v4 지원 어렵다는 판단
계획대로
릴리즈 하자.

56. 오픈소스 네이밍오픈소스 네이밍
원래는 C3+ 2.0으로 계획, 그러나 C3.js 연관성의 부정적 의견원래는 C3+ 2.0으로 계획, 그러나 C3.js 연관성의 부정적 의견
'billboard'는 음악 차트
의미는 다르지만 '차트'를 연관
오랫동안 친숙한 이름
FE 프로젝트에서는 기 등록된 npm 모듈명 확인 필요
[참고][참고] Open Source Project Name CheckerOpen Source Project Name Checker

57. RELEASE!RELEASE!
2017년 6월8일, v1.0.0 공개2017년 6월8일, v1.0.0 공개

58. 그러나, 공개한다고 갑자기그러나, 공개한다고 갑자기
관심과 사용자가 몰려오진 않는다.관심과 사용자가 몰려오진 않는다.
홍보전략 필요홍보전략 필요

59. 직접 발로뛰기직접 발로뛰기
다수의 'ECHO' 사이트에 등록하기다수의 'ECHO' 사이트에 등록하기
많은 곳에서 해당 사이트에 등록된 정보를 활용, 재전파 한다.많은 곳에서 해당 사이트에 등록된 정보를 활용, 재전파 한다.

60. 뉴스레터 소개 요청하기뉴스레터 소개 요청하기
JavaScript WeeklyJavaScript Weekly
[참고][참고] FE 관련 뉴스레터는 사실, 한 곳에서 발행FE 관련 뉴스레터는 사실, 한 곳에서 발행
https://cooperpress.com/https://cooperpress.com/

61. 유력 매체 소개유력 매체 소개
JavaScript Weekly 소개JavaScript Weekly 소개

62. GITHUB TRENDING!GITHUB TRENDING!
JavaScript 언어부문 3위 기록JavaScript 언어부문 3위 기록
[참고][참고] https://github.com/trending/javascripthttps://github.com/trending/javascript

63. GITHUB STARGITHUB STAR
공개 후, 첫 6일간 700개
14일 후,14일 후, 1,000개1,000개도달!도달!
Star의 가치는?Star의 가치는?
cdnjs 등록은 최소 200개 요구됨
Vuejs도 첫 6일간 615개
How I Got From 0 to 1 000 Stars on GitHub in Three Months

64. THIRD-PARTY APPS!THIRD-PARTY APPS!
Angular, React, R, Web Components 등의Angular, React, R, Web Components 등의
자발적인 10여개의 프로젝트 등장자발적인 10여개의 프로젝트 등장
[참고][참고] https://github.com/naver/billboard.js/wiki/Third-party-applicationshttps://github.com/naver/billboard.js/wiki/Third-party-applications

65. 해외 사용사례해외 사용사례
[참고][참고] What is Liferay Portal?What is Liferay Portal?

66. 지속적 성장지속적 성장
NPM Downloads
`17 Jun / 370 Oct / 1,706
Jul / 479 Nov / 2,024
Aug / 862 Dec / 2,376
Sep / 1,124 `18 Jan / 2,619
[참고][참고] npm-stat: billboard.js, 2017.6.8 ~ 2018.1.31npm-stat: billboard.js, 2017.6.8 ~ 2018.1.31

67. 충실한 문서충실한 문서
문서 작성은 아주, 아주 중요하다.문서 작성은 아주, 아주 중요하다.
대표 사이트:
C3.js에서 마이그레이션 하기 가이드
잘 작성된 API 문서
왜 Fork 하게 되었나?
Readme
https://naver.github.io/billboard.js/

68. 101개의 풍부한 예제101개의 풍부한 예제
많은 예제는 '무엇'이 가능 또는 할수 있는지 보여줄 수 있다.많은 예제는 '무엇'이 가능 또는 할수 있는지 보여줄 수 있다.
https://naver.github.io/billboard.js/demo/https://naver.github.io/billboard.js/demo/

69. 이제 부터가 시작이제 부터가 시작
Star의 수는 보다 발전할 수 있도록 도와주는 역할Star의 수는 보다 발전할 수 있도록 도와주는 역할
이슈에 대한 빠른 대응 필요이슈에 대한 빠른 대응 필요
신규 기능과 버그에 대한 처리신규 기능과 버그에 대한 처리
을 통해 향후 방향에 대한 정보제공을 통해 향후 방향에 대한 정보제공RoadmapRoadmap

70. C3.JS STATUS (JAN '18)C3.JS STATUS (JAN '18)
2017년부터 D3.js v4 작업 진행 중이나 완료되진 못한 상태2017년부터 D3.js v4 작업 진행 중이나 완료되진 못한 상태
마이그레이션 작업에 billboard.js 참고해 보라는 코멘트마이그레이션 작업에 billboard.js 참고해 보라는 코멘트
[참고]
https://github.com/c3js/c3/issues/2143
https://github.com/c3js/c3/pull/2246

71. OPENSOURCE IS HARDOPENSOURCE IS HARD
& PAINFUL& PAINFUL
정기적이며 지속적인 활동(업데이트) 필요정기적이며 지속적인 활동(업데이트) 필요

72. PLAYGROUNDPLAYGROUND
온라인에서 바로 옵션들을 수정하고 확인온라인에서 바로 옵션들을 수정하고 확인
[참고][참고] https://naver.github.io/billboard.js/playground/https://naver.github.io/billboard.js/playground/

73. DOCUMENTATIONDOCUMENTATION
릴리즈 노트: ,v1.1.0 v1.2.0
꾸준한 API 업데이트
API는 한번 작성되면 끝이 아니다.
정확한 의미와 동작을 기술 그리고 지속적 업데이트

74. 테스트 코드테스트 코드
Fork 당시 73% 였던 커버리지를 82%로 향상Fork 당시 73% 였던 커버리지를 82%로 향상
단순한 커버리지 향상이 아닌,단순한 커버리지 향상이 아닌,
사용자에게 신뢰를 제공하는 지표사용자에게 신뢰를 제공하는 지표

75. 빠른 대응빠른 대응
자생적이고 활발한 커뮤니티가 형성되기 전까지는자생적이고 활발한 커뮤니티가 형성되기 전까지는
단순한 질문부터 어려운 이슈들을단순한 질문부터 어려운 이슈들을
해결(답변)해 줄수 있어야 한다.해결(답변)해 줄수 있어야 한다.
[참고][참고] https://stackoverflow.com/questions/tagged/billboard.jshttps://stackoverflow.com/questions/tagged/billboard.js

76. 오픈소스의 중요한 요소들오픈소스의 중요한 요소들
안정성, 충분한 문서 그리고 책임감안정성, 충분한 문서 그리고 책임감
[참고][참고] http://opensourcesurvey.org/2017/http://opensourcesurvey.org/2017/

77. 오픈소스의 어려움오픈소스의 어려움
누군가의 노력이 대가없이 제공되는 것.누군가의 노력이 대가없이 제공되는 것.
그러나, 쉽게 비난 받기도 한다.그러나, 쉽게 비난 받기도 한다.
https://twitter.com/spf13/status/907403135592878080https://twitter.com/spf13/status/907403135592878080

78. 의연하게 대처하기의연하게 대처하기
You shouldn’t let strangers on the internetYou shouldn’t let strangers on the internet
negatively affect your mood or your drivenegatively affect your mood or your drive
......
The trolls feed on yourThe trolls feed on your
annoyance and discourse.annoyance and discourse.
— Sindre Sorhus— Sindre Sorhus
[참고][참고] Between the Wires: An interview with open source developer Sindre SorhusBetween the Wires: An interview with open source developer Sindre Sorhus
1,093 npm Packages1,093 npm Packages

79. WHY DOWHY DO
OPEN SOURCE?OPEN SOURCE?
세상에서 내가 도움 받은 것에 대해세상에서 내가 도움 받은 것에 대해
다시 기여하는 의미있고 가치있는 행동다시 기여하는 의미있고 가치있는 행동
[참고][참고] 네이버 오픈소스 가이드네이버 오픈소스 가이드
GitHub Open Source GuidesGitHub Open Source Guides

80. 성공적인 오픈소스를 위한성공적인 오픈소스를 위한
3 ACTIONS3 ACTIONS MUSTMUST TO TODOTO TODO
영어영어 → 당장 잘하지 못하더라도→ 당장 잘하지 못하더라도
꾸준함꾸준함 → 기능추가, 문서, 릴리즈, etc.→ 기능추가, 문서, 릴리즈, etc.
홍보홍보 → 끊임없이 알릴 수 있는 방법을 실행→ 끊임없이 알릴 수 있는 방법을 실행

81. AMAAMA
(ASK ME ANYTING)(ASK ME ANYTING)

82. 맙습니다.맙습니다.맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.고맙습니다.
hank You.hank You.hank You.hank You.hank You.hank You.hank You.hank You.hank You.hank You.hank You.hank You.hank You.hank You.hank You.hank You.hank You.hank You.hank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.Thank You.
racias.racias.racias.racias.racias.racias.racias.racias.racias.racias.racias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.Gracias.
i h b billb d j// i h b / /billb d j /// i h b / /billb d j /// ith b / /billb d j /// ith b / /billb d j /// ith b / /billb d j /ps://github com/naver/billboard js/ps://github com/naver/billboard js/ps://github com/naver/billboard js/tps://github com/naver/billboard js/tps://github com/naver/billboard js/tps://github com/naver/billboard js/tps://github.com/naver/billboard.js/tps://github.com/naver/billboard.js/tps://github.com/naver/billboard.js/tps://github.com/naver/billboard.js/tps://github.com/naver/billboard.js/ttps://github.com/naver/billboard.js/ttps://github.com/naver/billboard.js/ttps://github.com/naver/billboard.js/ttps://github.com/naver/billboard.js/ttps://github.com/naver/billboard.js/ttps://github.com/naver/billboard.js/ttps://github.com/naver/billboard.js/ttps://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/https://github.com/naver/billboard.js/