18년 7월 프롬디자이너 발표 그래프에서 대시보드까지, 서비스를 위한 데이터 시각화

1. 그래프부터 대시보드까지,
서비스를 위한 데이터 시각화
이민호

2. 발표자에 대한 TMI
데이터 분석 스타트업에서 시작해서
현재는 카카오에서 데이터 분석 업무를 합니다
디자이너는 아닙니다. 데이터 분석합니다
응용통계학 전공
이과처럼 보이지만 문과입니다.. 공대 아닙니다 (단호)
심지어 입학은 정치외교학과
디자인에 관심은 많습니다!

3. 데이터 분석가의 흔한 업무목록
Chapter 1.

4. 우리 팀이 하는 일
각종 서비스에 남기는
다양한 데이터
데이터를 활용해 가치를 만들어낸다
서로 다른 서비스의 데이터를 종합하여 시너지를 낸다

5. 내가 하는 일 : 데이터 분석
서비스 의사 결정을 돕기 위한
지표 분석
우리 서비스는 성장하고 있는가?
이번 달 방문자수가 감소한 이유는 무엇 때문일까?
생일인 사람에게 보낼 선물로 어떤 상품을 추천하면 좋을까?
지금 뜨고 있는 키워드/상품을 MD들에게 제공할 수 있을까?
새로운 가치를 만들어내기 위한
모델링

6. 내가 하는 일 : 분석한 결과를 서비스 담당자들에게 전달
보통 분석한 결과에 대한 레포트를 작성한다
문제 정의 데이터 분석 과정 결론
레포트
그래프1
그래프2
그래프3
그래프4
그래프5
그래프6
......
짧게 한두줄 표..? 짧게 한두줄

7. 내가 하는 일 : 자동화
동일한 분석 작업이 반복되면 자동화시킨다
"저번에 분석해주신 결과 최신화해주세요~"
"신규 이벤트 참여자에 대해서도 살펴볼 수 있을까요?"
"다른 서비스에 해주신 분석 보고 왔는데요~~~~ ㅎㅎ"
.......

8. 데이터를 분석할 때 시각화는 어떻게 쓰이고 있을까?
그래프 대시보드
데이터 분석 분석 결과 전달 반복업무 자동화

9. 데이터 분석가가 시각화로 밥벌어먹기
Chapter 2.

10. 그래프
그래프를 그리는 목적?
분석용 레포트용

11. 그래프 : 분석을 위한 그래프
분석을 처음 시작하는 단계
가설을 세우고 검증하는 프로세스를
최대한 빨리 돌 수 있도록 하기 위한 분석/시각화 작업
데이터를 파악하기 위한 EDA
정보량이 많은 그래프 ( Box Plot 등등 )
선택과 집중을 위해 빠르게 데이터를 탐색하고 결정한다 ( 인터렉션이 가능한 그래프 )
탐색적 자료분석

12. 분석을 위한 그래프 ▹ 레포트용 그래프
분석 방향이 잡히고, 전달하려는 메세지가 결정되면
레포트용 그래프로 작업

13. 그래프 : 레포트용 그래프
전달력이 높아야 한다
그래프만 보더라도 내용을 파악할 수 있도록
그래프 제목, 축 이름 등등 충분한 설명
말하고자 하는 바에 집중하는 그래픽
R, 파이썬에서 벡터 그래픽으로 작업 (svg, pdf 등)
벡터 그래픽 도구를 통해 수정
시각적인 퀄리티가 높으면 좋다
시간이 충분하다면 후보정까지

14. 그래프 : 레포트용 그래프
시각화 결과물이 외부에 공개되는 경우
....도 드물지만 있었음

15. 그래프 : 레포트용 그래프
데이터로 본 제19대 대통령 선거
http://media.daum.net/election/2017/0509/special/analysis/
해당 페이지의 그래픽 작업을 위한 데이터를 제공
워드클라우드는 작업한 결과물이 그대로 올라갔다

16. 그래프 ▹ 대시보드
그렇게 그래프를 계속 찍어내다 보면 문득, 대시보드가 필요하다는 생각이 든다

17. 대시보드가 필요할 때
제공해야 하는 정보를 반복적으로 전달할 필요가 있을 때
데이터를 가지고 있는 곳과 필요로 하는 곳이 다를 때
특히 개인정보 이슈 등으로 데이터를 전달하는 것이 부담스러운 경우

18. 대시보드를 만들기 전에
대시보드가 꼭 필요한 상황인지 다시 고민해보자

19. “ 대시보드 만들어서
데이터 한 번 살펴보고 이야기하면 좋겠어요~ ”
^^

20. 목적없는 대시보드 ......
구체적인 니즈가 없는데 대시보드를 만들게 되면,
요구사항이 계속 변경되거나 너무 많은 요구사항이 생길 수 있다
데이터 먼저 살펴보고 대시보드가 정말 필요한지 판단해야 한다
파멸의 시작 , 워라밸 브레이커
ex) 각 서비스의 지역별 분포를 보고싶어요~
-> 고생해서 지도를 그렸지만 모든 서비스의 지역별 분포가 동일할 수 있다

21. 대시보드
처음부터 모든 기능을 제공하려고 하지 말고,
반복적으로 수행해야 하는 작업 중에서 가장 중요한 것부터 접근하자

22. 사용자가 쓰는 대시보드를 만들자
만들기 편한 방향으로만 작업하다보면 사용자 입장에서 이상한 요소들이 많이 생긴다
사태가 심각해진다면 대시보드 쓰는 방법 설명할 시간에 그래프 그리는게 더 빠를 수 있음..
대시보드를 사용할 대상자들을 상대로 사전 인터뷰
서비스가 바뀐다면 데이터도 바뀐다 -> 대시보드를 가만히 놔두면 언젠가는 못쓰게된다
16년버전 대시보드, 17년, 18년..... 버려지는 수많은 대시보드 중 하나가 되지 않도록!
이용자의 편의를 고려한다
지속적인 유지/관리를 전제로 한다

23. 단계별 대시보드 작업
1단계. 수작업
2단계. 시각화 도구
3단계. 직접 구축

24. 단계별 대시보드 작업 : 1단계. 수작업
사업부서나 마케팅부서를 보면
엑셀 / 구글 시트에 직접 수치들을 채워넣는 것을 종종 볼 수 있다
그거랑 비슷!
다양한 그래프를 미리 그려놓고 배치한다

25. 단계별 대시보드 작업 : 2단계. 시각화 도구
데이터만 잘 연결된다면 시각화를 쉽게 구현할 수 있다
유지보수가 편하다
쉽게 대시보드를 구축할 수 있게 해주는 도구를 사용한다
구글 데이터 스튜디오

26. 단계별 대시보드 작업 : 2단계. 시각화 도구
구글 데이터 스튜디오
datastudio.google.com
구글 스프레드 시트로 데이터를 말아두면 대시보드 처럼 구성할 수 있다
Google Analytics를 직접 연결할 수 있다
무료..!!! 지만 생각보다 고퀄!!!

27. 단계별 대시보드 작업 : 3단계. 직접 구축
요구사항이 특수한 경우에는 직접 구축해야 한다
개발자가 붙지 않는다면 결국 데이터 + 백엔드 + 프론트엔드 를 혼자서 처리하게 된다
차트/프론트/백엔드 등등 구축하는 과정에서 라이브러리를 잘 선택하는 것이 중요하다
웹페이지로 직접 구축한다

28. 참고. 라이브러리 선택의 기준
쉽게 개발할 수 있는가?
내가 구성한 내용을 모두 구현할 수 있는가? (기능, 디자인)
많이들 사용하는 라이브러리인가?
개발 편의성
자유도
인지도

29. 대시보드를 만들고 나서
사용자 인터뷰
다 만들었다고 끝이 아니다!
1. 사용자가 화면과 도움말만 보고 대시보드를 쉽게 사용할 수 있는가?
2. 추가적인 요구 사항을 확인해보자
대시보드는 하나의 제품을 만드는 것
계속해서 사용될 수 있는 대시보드를 만들자
피드백을 받고 반영하는 과정을 반복

30. 좋은 시각화 : 기획과 디자인의 영역
기획 :
전달하려는 메세지 가다듬기
디자인 :
메세지의 전달력 높이기
독자가 어떤 사람인지 파악하기
전달하려는 메세지를 명확하게 할 것
메세지에 집중할 수 있는 디자인
적절한 종류의 그래프 사용

31. 일하는 방법
Chapter 3.

32. 주로 사용하는 도구
분석용 그래프
레포트용 그래프
약간의 인터렉션이 필요하지만 빠르게 작업할 때
다양한 니즈를 만족시켜야 하는 프로토타입형 대시보드
R (ggplot2, plotly), 파이썬 (altair, plotnine, plotly)
R (ggplot2)
구글 스프레드시트 + 데이터스튜디오
HTML + JS
- 프론트 프레임워크 : vue
- CSS 프레임워크 : 부트스트랩, Semantic-UI
- 그래프 라이브러리 : D3, Vega, Vega-lite, Billboard.js, Highchart, ...
프로덕션 레벨의 전문적인 대시보드는 무리하지 말고 개발자/디자이너/기획자에게 SOS....

33. 그래프 작업
그래프 템플릿을 사전에 만들어두고, 필요한 경우에만 일부 수정해서 사용한다
Template Graph

34. 그래프 작업
자주 사용하는 색상, 폰트 등은 미리 설정해둔다

35. 웹대시보드 작업 플로우 ( 혼자 작업할 때 )
대시보드 스펙 확정
웹 페이지 구성
페이지 서빙
요구 사항과 가능/불가능한 항목들 조율
디자인
HTML로 바로 작업한다
CSS 프레임워크와 공개된 템플릿을 최대한 활용해서 만들고자 하는 대시보드의 형태를 구성한다
그래프는 이미지로만 얹어둔다
데이터
요구사항에 따라 DB를 연결하거나 정적인 파일/객체로 제공
시각화 과정에서 필요로하는 형태로 데이터를 미리 정제해둔다
인터렉션
자바스크립트를 통해 필요한 인터렉션을 적용한다
데이터 바인딩이 중요한 경우, jQuery만으로 만들기보다는 Vue 등 프론트 프레임워크 사용
웹서버 : 주로 python의 flask 사용하여 웹어플리케이션 작성
시각화
시각화 라이브러리를 통해 실제 그래프를 작성한다
요구사항에 맞는 라이브러리를 선택해서 작업
시각화 라이브러리 중 라이센스가 필요한 경우가 있음. 확인 필요! (회사에서 구매해 둔게 있다면 좋다)

36. 디자이너와의 협업
분석가 디자이너
1. 데이터 현황 파악, 그래프 초안 작성
어떤 정보를 제공할 것인가?
어떤 형태로 제공할 것인가?
프로젝트에 참여하는 경우 기획자의 기획의도에 맞는 방향으로 진행

37. 디자이너와의 협업
2. 디자인 가이드 제공
어떻게 하면 중요한 정보에 집중하게 만들 수 있을까?
현재 그래프의 시각적 요소들이 적절하게 사용되고 있는가? (색상, 명도 등등)
분석가 디자이너

38. 디자이너와의 협업
3. 디자인 가이드에 맞게 그래프 수정
필요한 경우 자동화
반복작업은 최대한 줄이자
분석가 디자이너

39. 협업 프로젝트 사례
A 서비스를 사용하는 이용자들은 어떤 사람들인지 알고싶다
▸ 대시보드를 통해 제공해보자

40. 협업 프로젝트 사례
신규 사용자를 유입시키기 위해 다른 서비스의 플친을 통해 메세지를 보내려고 한다. 어떤 서비스와 크로스 프로모션을 진행하는 것이 제일 좋을까?
다른 서비스에서는 돈을 많이 썼는데 우리 서비스에서 아직 구매 경험이 없는 사람은 얼마나 될까?
어떤 정보가 필요한가? 서비스에서 궁금할만한 정보를 나열해본다
전체 사용자들의 분포
우리 서비스 사용자들은 남자가 많을까 여자가 많을까?
우리 서비스를 많이 사용하는 연령대는 어디일까?
특정 사용자 그룹에 대한 정보
일부 사용자에게 타겟팅된 쿠폰 메세지를 보내야 한다면, 어떤 사용자들에게 보내야 구매로 이어질 확률이 높을까?
우리 서비스의 플러스친구를 구독하는 사용자 중에서 구매경험이 없는 사용자는 얼마나 될까? 이 사용자들은 어떤 사람들일까?
다른 서비스와 동시에 사용하는 사람들에 대한 정보

41. 협업 프로젝트 사례
일반적인 분석을 가정하고 필요한 그래프를 샘플로 그린다
현재 가지고 있는 데이터를 통해 제공할 수 있는 정보인지 체크
우리가 제공하려는 정보에 가장 적합한 형태의 그래프를 찾는다
디자이너 / 기획자와 논의하기 위한 초안
간단한 프로토타입을 만들 수 있다면
커뮤니케이션을 빠르게 진행할 수 있다

42. 협업 프로젝트 사례
대시보드 상세 기획을 진행한다
제공할 정보의 범위 차트 상세 기획 UI
인터렉션 대시보드 이용 시나리오 (UX)

43. 협업 프로젝트 사례
기획 초안을 바탕으로 디자이너가 시안을 작업한다
프론트개발자에게 시안 전달 ▹ 피드백 반복

44. TL; DR
Chapter 4.

45. 그래프 색상 선정
http://paletton.com/
주어진 색상을 기준으로 파레트 구성해야 할 때

46. 그래프 색상 선정
데이터시각화에서 많이 사용하는 색상 파레트
ColorBrewer Viridis

47. 그래프 색상 선정
시각화를 위한 색상 파레트 선정 기준
1) 데이터를 정확하게 표현할 수 있어야 한다
2) 흑백으로 출력되더라도 잘 보여야한다
3) 색각 이상인 경우에도 잘 보여야한다
(Perceptually Uniform)

48. 다양한 시각화 라이브러리는 각각의 특징이 있다
난이도/자유도 스펙트럼
billboard.js
highchart
vega-lite
altair
ggplot2
plotnine
vega d3
어렵다..
자유도가 높다
쉽다
제공되는 기능만 가능하다
장단점을 잘 파악하고 있다가 필요할 때 활용하면 좋다

49. 다양한 시각화 라이브러리는 각각의 특징이 있다
grammar of graphics
- vega, ggplot2, vega-lite, plotnine, altair
- 모두 visual encoding을 기반으로 작동한다
같은 문법체계를 따르는 시각화 도구는 사용방법들이 비슷하다

50. 스터디하세요 스터디
스터디를 통해 다른 분야의 사람들을 만나면서
시야도 넓히고, 자극도 얻고, 강제로 공부를 하게 된다
빅데이터 분석 학회 yBigta
데이터 디자인 팀
스터디 <라온하제>
디자인과 관련된 다양한 주제

51. 마지막으로 하고 싶은 말
데이터 분석에서도 디자인적인 고민이 많이 필요하다
제공할 정보를 선별하고, 정보전달력을 높이기 위해서
우리의 분석과 데이터가 필요한 곳에 잘 쓰였으면 좋겠다

52. 감사합니다!!
:D