ADP 필기 5장 데이터 시각화

2023-06-12 12 분 소요

[1] 시각화 인사이트 프로세스의 의미

1. 인사이트 과정과 시각화

탐색 -> 분석 -> 활용의 단계를 거침

탐색 (관계발견)
- 자료 및 자료사이의 관계를 살펴봄
- 지혜를 도출하는 과정
- 목적: 시각화를 통해 객관적인 패턴 발견
- 도구: 개괄전 패턴을 찾는데 도움
분석 (관계 규명)
- 탐색을 통해 찾은 관계를 명확히 규명 ~ 의미를 찾아내는 단계
- 정성적 기법과 정량적 기법 모두 사용
- 목적: 관계의 구체적인 모델링 및 적용
- 도구: 모델링 및 조정
활용 (통찰 검증 및 보완)
- 도출한 인사이트를 실제 활용, 가치 인정을 위한 검증
- 목적: 타인에게 효과적으로 설명 또는 설득
- 도구: 메세지 전달 도움

2. DIKW

데이터: 기초 자료
정보: 데이터 간의 관계가 형성
지식: 정보가 상위 개념의 관계를 맺고 조직화 됨
지혜: 개인화, 개인의 경험, 사고 등과 결합되고 관계를 맺을때 구조화 됨

[2] 탐색 (1단계)

1. 데이터 확인

데이터 명세화: 차원 및 측정값
- 모든 데이터는 하나 이상의 측정값과 차원을 가지고 있음
  - 하나의 차원은 차원이라고 명시하지 않는 경우도 있음
- 측정값을 분류할 수 있는 모든 것이 차원이 됨
- 연속적인 데이터로 구성된 차원은 구간 형태로 재구성 될 수 있음
- 동일한 데이터 항목이라도 차원이 될 수 있고 측정값이 될 수 있음
데이터 구성원리 (1) 이벤트 기록
- 데이터는 이벤트로 생성됨
- 데이터가 어떤 원리로 생성, 구성되었는지 알아야함
데이터 구성원리 (2) 객체지향 관점 접근
- 데이터 구성과 생성 배경에 대해 고민
- 모든 객체들은 행위와 고유 속성 값을 갖고 있음
- 객체지향 관점 요소: Object, Class, Method

2. 연결 고리의 확인

공통요소 찾기
- 항목명이 아닌 정의와 데이터형을 보고 찾아야 함
공통요소로 변환하기
- 데이터형이 달라도 공통요소로 만들어 낼 수 있음
- 즉, 형태를 변환해 연결 고리를 찾아 낼 수 있음
- 시간, 공간 데이터를 변환할 수 있음 -> Geocoding: 좌표계를 주소 및 행정구역으로 변환, 반대도 가능
- 규칙을 통한 변환
탐색 범위의 설정
- 보유한 데이터를 어떤 조합의 차원과 측정값으로 설정할 수 있는지 고민
- 차원과 측정값의 조합 하나하나가 통찰을 추출하는 각각의 관점이 됨
- 전체 조합의 종류가 탐색의 범위가 되나 너무 많으면 어느정도 범위를 설정하는 것이 좋음
  - 측정값에 하나의 차원만 연결해 탐색 후 단계적으로 차원을 늘려가며 탐색
  - 목표와 관련 있을만한 조합을 만듦
  - 상식적인 조합만을 사용

3. 관계의 탐색

탐색 및 분석의 대상은 관계이며 관계는 상관관계, 인과관계로 나뉨
인과관계는 상관관계 중에서 원인과 결과의 시간적 선후 관계가 있는 것

이상값 처리
- 우선적으로 시각화 도구를 이용해 패턴을 찾아보는 것이 좋음
- 이상치 발생의 여러가지 이유가 존재
  - 측정에는 문제가 없으나 기록, 관리되는 과정에서 문제
  - 의미있는 이상치일 경우 구체적으로 확인
시각화 도구 선정
- 모션차트: 시간 데이터에서 시간 외 다른 차원의 측정값들이 어떻게 변화하는지 움직임을 통해 보여주는 동적 시각화 도구
비정형 데이터
- 워들: 워드클라우드
잘라보고 달리보기
- 차원과 측정값의 구조는 여러가지 관점으로 본다는 의미
- 잘라보기: 전체 데이터에 대해 패턴을 탐색 후, 일정 기준에 따라 일부분만 보는 것
- 달리보기: 여러 차원이 있는 경우 차원을 기준으로 서로 다른 관점을 보는 것
- OLAP: 기업에서 쓰는 BI 도구, 실시간으로 기업 다차원 데이터에 접근해 슬라이스/ 다이스 하며 분석, 리포팅
내려다보고 올려다보기
- 데이터는 계층형 구조 -> 계층형 구조가 없어도 만들어 낼 수 있음
- 내려보기(drill down): 하위 계층으로 기준을 세분화
- 올려보기(reverse drill down): 현재보다 상위 계층의 관점에서 봄
- 하위 계층에서 패턴을 본 뒤, 상위 계층을 살펴보고 차이점을 바탕으로 다시 하위 계층에서 살펴봄
- 트리맵: 면적을 이용해 차원을 표현한 시각화 도구
- 하이퍼볼릭 트리
척도의 조정
- 정량적 데이터를 표시할 때 척도에 주의하여야 함
- 스파크라인 차트: 다른 범위의 측정값들을, 동일 공간의 범위 내에서 패턴 비교

[3] 분석 (2단계)

분석은 탐색을 통해 찾은 관계를 수치적으로 살펴보며 의미있는 모델이나 특정값으로 표현하는 과정

1. 2차 탐색

중요한 패턴들을 살피기 위해 우선순위 결정
조합을 바꾸어가며 점검

2. 분석기법

차원이 많거나 불연속 데이터가 많은 경우 통계적 분석을 사용
통계적 분석 종류
- 평균 - T검정
- 비율 - 직접확률계산, F분포
- 분할표 - 카이제곱, 피셔, 맥네마, 잔차
- 선형/비선형 인과관계 - 회귀류, 판별분석
- 요인선별 - 요인분석, 주성분 분석
- 분류 및 다차원 공간 배치 - 군집, 다차원척도법 (MDS)
- 패턴 - 대응분석

3. 지표의 설정과 분석

인사이트를 커뮤니케이션에서 활용할때 유용 + 분석할때 유용
지표의 단위를 살펴야함
지표가 통계적 모델을 만들 때 포함된다면 과대평가가 됨
요인분석: 지표가 지표를 만든 다른 요인들과 설명력이 겹치는지 여부 확인

[4] 활용 (3단계)

통찰은 내부에 적용하거나 외부에 대한 설명으로 나뉨

1. 내부 적용

통찰은 어떤 식으로든 내부에 적용 가능
통찰의 필요성 및 활용 방안
- 기존 문제 해결 방식이나 설명 모델의 수정
- 새로운 문제 해결
- 새롭게 발견한 가능성에 대한 구체적인 탐색과 발전
통찰을 실행할 때 현실적인 여건을 반영했는지 검토 필요

2. 외부에 대한 설명

인터랙티브 인포그래픽과 정보 디자인을 시각화 도구로 이용
잘라보고 달리보기, 내려보고 올려보기 와 같은 조작을 통해 수용자가 정보를 구체적으로 이해할 수 있음
시각화 도구는 시각화 인사이트 프로세스 전반에 걸쳐 일관성과 통일성을 갖고 활용됨

3. 인사이트 발전과 확장

탑다운 vs 바텀업
- 처음 살펴볼때는 바텀업
- 의미를 파악한 후에 탑다운 방식으로 검증
2차 잘라보기, 달리보기, 내려다보기, 올려다보기
- 인사이트 적용시 데이터 현실성 및 분석 모델의 적정성을 살펴봐야함
- 2차 작업을 통해 인사이트를 고도화 및 확장 할 수 있음
실시간 vs 비실시간
- 인사이트 도출 후 주기적으로 검증과 반복 필요
- 위 프로세스를 위한 환경 구축 또한 필요

2장 시각화 디자인

시각화는 데이터 분석과 의사소통이라는 목적을 가짐

[1] 시각 이해의 위계

1. 데이터 - 시각화

가공되지 않고 의미를 갖지 않기에 정보 자체가 아님
정보로서 가치가 부적하여 분석의 대상은 되어도 디자인의 대상은 될 수 없음
불완전, 비연속적, 완전한 메세지가 아니기에 정보 전달의 가치는 없음

2. 정보 - 디자인

데이터와 달리 그 자체로 의미가 있음
생산자와 사용자의 관점에 따라 다르게 전달
나름대로의 형태와 형식을 갖고 있음
데이터가 정보로서 가치를 갖기 위해서는 조직화 되고 변형 되어야 함
콘텍스트가 없으면 정보가 존재할 수 없음 -> 전체적인 맥락을 고려해 활용
- 콘텍스트: 데이터가 어디서 왔고, 이해하는 사람의 태도와 환경이 무엇인지 설명
다른 영역의 데이터들로 조직화해 발생
생산자와 소비자의 두 영역에 모두 포함되며 자기 조직화가 되지 않은 일반적인 의미만 내재

3. 지식 - 매핑

다른 영역의 정보가 자기 조직화해 획득
정보가 특정 영역에서 경험에 의해 자기 맥락을 갖게 될 때 지식이 됨
경험을 통해 다른 관점과 방법으로 해석 -> 다양한 상황에서 적용할 수 있게 일반화

4. 지혜 - 정의되지 않은 것

지식이 자기 내면화가 돼서 개인적인 맥락 안에 포함될 때 지혜가 됨
자기 내면화한 지식이기 때문에 명시적인 언어로 전달이 어려움
추상적이고 철학적인 단계

5. 정보 시각화

대규모 비수량 정보를 시각적으로 표현
데이터 시각화 분야보다 한 단계 더 가공 필요
방대한 정보를 한번에 이해하도록 시각적 표현과 인터랙션 기술을 이용해 추상적 정보를 직관적으로 전달함

6. 정보 디자인

사용할 수 있는 효과적인 정보와 복잡한 기술 데이터를 시각적으로 표현
정보 디자인 개념도
- 의미만들기(인지) <-> 형태만들기(지각) <-> 맥락만들기(경험)
데이터 시각화, 정보 시각화도 정보 디자인의 범위에 속함
스토리텔링 형식의 설득형 메시지를 전달하는 것에 초점

7. 인포그래픽

중요한 정보를 한장의 그래픽으로 표현해 사람들이 손쉽게 정보를 이해할 수 있도록 만드는 그래픽 메시지
정보형 메시지: 객관적인 정보를 전달, 실제 사실을 왜곡하더라도 사람이 쉽게 이해할 수 있도록 개념적으로 구현
설득형 메시지: 주장하는 바를 알리는데 목적, 정보 자체보다는 주장하는 바를 전달하기 위해 사용

8. 빅데이터 시각화

정보형 메시지 전달에 초점
원인과 결과 인과관계를 왜곡 없이 전달
표현이 다차원적이여야 함
통계적 차원의 시각화 방법이 포함

[2] 시각화 프로세스

1. 정보 디자인 프로세스

1단계: 데이터 수집
- 데이터로부터 스토리를 시작할 수 있는 단서 찾아냄 Not chart
- 시각화 전문가가 원데이터를 수집하기 어려움
2단계: 모든 것을 읽기
3단계: 내러티브 찾기
- 스토리 텔링과 유사한 의미
- 인포그래픽은 데이터를 단순화, 프로세스 설명, 트렌드 창조, 논란 보조 등의 특별한 의도와 함께 시작됨
4단계: 문제의 정의
- 논리성 검토
- 주관적인 디테일
5단계: 계층구조 만들기
- 이야기의 중심을 찾음
- 최종 결과물이 나타나기 시작
6단계: 와이어 프레임 그리기
- 계층구조가 결정되면 와이어 프레임이 창조
- 정보의 계층 구조를 이해하게 만듦
7단계: 포맷 선택하기
- 파트와 그래프를 이용
- 프로세스를 설명하기 위한 다이어그램, 흐름도 등이 필요
- 충분한 예산이 있다면 인터랙션 시도
8단계: 시각 접근 방법 결정하기
- 차트와 그래프를 일러스트와 함께 보여주거나 전통적인 데이터 시각 표현 함께 사용
9단계: 정제와 테스트
- 의도와 맞게 비주얼 스토리텔링이 잘되었는지 확인
- 처음 보는 사람도 이해되는지 확인
10단계: 세상에 선보이기

2. 빅데이터 시각화 방법론

정보 디자인 교과서: 4단계
- 조직화된 데이터, 시각적 매핑, 시각적 형태, 전달 방식
마티아스 샤피로: 3단계
- 질문 만들기, 데이터 수집, 시각적 표현
- 시각화에 적당한 주제를 선별하는데 우선
- 범주를 두지 않고 시각화를 다루는 사람에 좌우됨
벤 프라이: 7단계
- 획득, 분해 - 컴퓨터 공학
- 선별, 마이닝 - 데이터 마이닝
- 표현, 정제 - 그래픽 디자인
- 상호작용 - 정보 시각화

3. 빅데이터 시각화 도구

엑셀, 구글차트
D3.js, 파이썬, R
일러스트레이터, 인포그램
매니아이즈, 프로세싱, YDF

[3] 빅데이터 시각화 프로세스

1. 정보 구조화

데이터 수집 -> 분류 -> 배열 -> 조직화하여 질서를 부여하는 작업
질문을 먼저 만들어 내거나 전달하려는 목표를 먼저 설정하고 시작할 수 있음
다양한 툴을 사용해 개발
기계학습을 적용해 정보 추출하는 방법도 연구됨
수집 마이닝 후 시각화가 이루어지는 것과 시각화에 목표를 맞추고 정보 구조화에 접근하는 것은 다름

정보 구조화 단계적 순서

데이터 수집 및 탐색
- 데이터 에디팅: 유의미한 데이터 선정 및 무의미한 데이터 필터링
데이터 분류
- CSV, JSON, XML
배열 (LATCH)
- Location / Alphabet / Time / Category / Hierachy
재배열(관계맺기)
- 데이터에 의미를 부여하는 기본적인 과정
- 분류된 데이터를 수용자가 인식하기 쉽게 패턴을 만ㄷ름

2. 정보 시각화

시간 시각화
- 막대그래프
- 누적 막대 그래프: 전체 합이 의미 있는 경우 사용
- 점그래프: 점의 집중 정도와 배치에 따라 흐름 파악 용이, 두 변수 연관관계
- 연속형 데이터: 연결된 점, 선 그래프
분포 시각화
- 최대, 최소, 전체 분포로 나뉨 -> 분포 정도를 중점
- 부분을 전부 합치면 1 또는 100%
- 원그래프: 조각 크기 비교 어려움
- 도넛차트: 수치는 면적이 아닌 길이
- 트리맵: 영역 기반 시각화, 사각형 크기가 수치, 위계가 있는 데이터나 트리구조에도 사용 가능
- 누적연속그래프: 한 시점의 세로 단면은 그 시점의 분포, 연속적인 누적 막대 그래프로 볼 수 있음
관계 시각화
- 스캐터 플롯: 데이터 관련성 여부를 시각적으로 판단
- 버블차트: 세가지 요소의 상관관계 표현
- 갭마인더: 유엔의 데이터를 바탕으로 한 버블차트
- 히스토그램
비교 시각화
- 히트맵: 여러 가지 변수 비교
- 감정 히트맵
- 체르노프 페이스: 전문가의 흥미가 주 목적
- 스타차트: 거미줄 모양으로 변수 연관 및 거리를 표현
- 평행 좌표계: 대상이 많은 데이터에서 집단적인 경향성을 알아볼 수 있게 해줌
- 다차원척도법: 개별 데이터 간의 유사도를 바탕으로 시각화, 거리행렬을 포함하는 데이터 시각화에 유용
공간 시각화
- 지오차트

3. 정보 시각 표현

정보 표현을 위한 정보 디자인의 그래픽 요소는 정보의 내용을 시각적으로 전환해 사용자 감각을 자극, 쉽게 이해하도록 함

자크 베르탱의 그래픽 7 요소
- 위치, 크기, 모양, 색, 명도, 기울기, 질감
타이포 그래피
- 디자인 안에서 글씨 표현
- 타이포 그래피에서 가장 어려운 일이 서체 선택
그리드
- 현대 디자인에서 가장 중요한 요소
- 그리드를 이용해 블록 레이아웃을 잡고 요소를 효율적으로 올려 놓아 전체적인 조화 추구
- 왼쪽 상단에 중요 정보
- 역피라미드: 중요한 정보가 위쪽에
- 망 그리드: 정확하게 개체를 배치, 디자인이 쉬워짐
- 3등분 법칙: 미학적으로 만족스러운 균형
아이소타이프
- 많은 양의 데이터를 쉽게 지각할 수 있도록 함
- 문자와 숫자 대신 상징적 도형, 정해진 기호를 조합해 시각적이고 직접적으로 나타냄
- 픽토그램을 뜻하는 것은 아님
- 하나의 기호가 일정한 수량을 대표함
- 시공간을 초월해 읽혀야 함
인터랙션
- 빅데이터 시각화를 위한 의미있고 이해할 수 있으며 유용한 기술 및 방법
- 사용자가 정보를 필터링하며 인사이트를 얻을 수 있는 기회 제공
- 인터랙션 위에 구현된 정보 디자인은 비선형적 구조
- 정보 제시 순서가 고정돼있지 않고 사용자가 임의로 접근
- 다른 구조의 비슷한 데이터 셋을 불러오는 템플릿 위에 자신의 데이터를 사용할 수 있음

4. 시각 정보 디자인 7원칙

시각적 비교 강화
인과 관계 제시
다중 변수 표시
텍스트, 그래픽, 데이터를 조화롭게 배치
콘텐츠의 질과 연관성, 진실성을 분명히
시간순이 아닌 공간순 나열 - 이해가 쉬워짐
정량적 자료의 정량성을 제거하지 마라

[4] 빅데이터와 시각화 디자인

빅데이터 시각화 디자인의 방향

빅데이터 분석 능력과 동시에 시각화 능력, IT 기술 위에 서비스로 구현할 수 있는 능력 선호
데이터 시각화 기술이 아닌, 비주얼 인식의 심리적인 부분 인지
시각화 기술이 주는 한계에 대한 이해
궁극적으로 정보 디자인의 의도와 방향이 목적과 어긋나지 않도록 함
데이터의 범주 안에서 정보를 보고, 사용자를 위한 시각화 목적을 설정하고 이를 고수해야 함
전문성이 단절되거나 전달되어서는 안됨
시각화의 아름다움에서 정보성이 결여된다면 효율성과 참신성이 떨어지는 문제 발생
빅데이터 시장에서 시각화 논의가 뜨겁기 때문움에도 관심과 직무는 많지 않음

3장 시각화 구현

[1] 시각화 구현 개요

1. 시각화 플랫폼

기존 BI 플랫폼: 데이터 분석, 마이닝 등 기법을 통해 결과 리포트를 생성하기 위한 시각화 지원
전문 시각화 플랫폼: 다양한 관점에서 인사이트를 얻을 수 있도록 ‘지식 시각화’ 관점에서 시각화 지원
Gephi: 엣지와 노드로 이루어져 복잡한 네트워크 형태의 데이터를 시각화 할 때 유용

Information Builder
PowerPivot, PowerView
Visual Insight, Visual Intelligence
SAS, Tableau, Tibco, R, Excel, Weka, Gephi
Cognos Insight, QliKView, WolframAlpha, Better World Flux, Dipity, Many Eyes, CartoDB

2. 시각화 라이브러리

라이브러리가 제공하는 API로 코드 작성하여 시각화
D3.js: 대표적인 시각화 라이브러리로 js 기반 HTML 지원
JqueryVisualize, Flot, jqPlot: Jquery 기반 플러그인으로 웹사이트에서 사용할 수 있는 개발 편의성 측면의 장점

Flot
jQuery Visualize, jqPlot, D3.js, JavaScript InfoVis Toolkit, Node Box
Google Chart, Tangle

3. 인포그래픽스

웹서비스 형태로 제공, 사전 제작된 템플릿으로 인포그래픽 구현 가능

iChart, Visualize Free, Visual.ly

[2] R 시각화

1. xy 그래프

전체적인 내용을 파악할 수 있지만, 많은 데이터가 있을 때에는 의미 파악이 어려움

ggplot(Data, aes(x=x, y=y, colour=Diet, group=group))+geom_line()

aes(): 그래프의 x축과 y축을 지정
geom_line(): ggplot에서 선 그래프를 그리는 함수

2. 포인트 그래프

geom_point(alpha=.3) : alpha는 투명도를 나타냄

3. 스무스 그래프

그래프를 좀 더 명확히 구분 할 수 있음
geom_smooth(alpha=.4, size=3) : size는 선 굵기

4. 개선된 그래프

포인트 그래프와 스무스 그래프를 동시에 표현

5. 히스토그램

분포가 연속적이며 선으로 되어있어 내용을 파악하기 어렵거나 분류 유형이 많을 경우 히스토그램을 이용해 쉽게 파악 가능
facet_grid(변수 ~.): 가로로 출력
facet_grid(.~ 변수): 세로로 출력
binwidth: 구간의 간격

6. 포인트 그래프

간단하게 데이터를 정적으로 보여주며, 유형별로 색을 다르게하여 특성을 파악할 수 있음
coord_cartesian(ylim=c(0,40)): y축을 0~40으로 범위 지정
scale_colour_continuous(breaks=c(100,300)): 범위 지정
size: 포인트에 크기 할당
geo_hline: 임의의 선 삽입
shape: 포인트 전체를 다른 모양으로 바꿈, NA면 모양을 없앨 수 있음
annotate(“rect”, xmin~max, ymin~max): 특정 영역을 박스로 지정

7. 막대그래프

막대 그래프에 옵션을 주어 알아보기 쉽게 할 수 있음
fill은 막대 내부의 색, colour은 막대 테두리의 색 지정 -> 히스토그램도 가능
factor(변수): 범주형 데이터는 factor로 전환해 범주화
geom_bar(): 막대그래프 생성

8. 선그래프

시간의 흐름에 따른 등락을 보기 쉽기에 시계열 지표에 사용

9. 샤이니

R에서 곧바로 인터렉티브하게 웹 앱을 만들 수 있는 패키지
시각화 자료를 웹으로 쉽게 배포 할 수 있음
slider, tabsets, datatable, morewidget, html_ui

10. 모자이크 플롯

복수의 categorical variable 분포 파악에 도움되는 시각화 방법

[3] D3.js

D3.js는 자바 스크립트 기반의 데이터 시각화 라이브러리, SVG, canvas 등 에서 동작하며 css를 통해 요소 조작 가능

1. D3.js 시각화 구현 절차

데이터 획득 -> 데이터 파싱(API 이용) -> 데이터 필터링(제거) -> 데이터 표현 -> 상호작용 추가
객체 지향 언어이므로 객체를 생성하여 프로그래밍
SVG: 그림을 그리기 위한 HTML 태그
Scale: 시각화의 최적화를 위한 함수

2. 막대 차트 예제

객체 생성

var width = 500;
var height = 200;
var svg = d3.select("#chart").append("svg").attr("width", width).attr("height", height)

데이터 입력
- D3는 Json 배열 형태의 데이터를 입력으로 사용
스케일 정의
- 막대차트의 높이가 100, 데이터 범위 0~100 -> 데이터와 막대의 높이는 1:1
- 막대차트의 높이가 50, 데이터 범위 0~100 -> 값이 50이라면 막대 높이는 25
- 막대차트의 높이를 100%로 보고 비율에 따라 높이를 정함
```
var padding = 20;
var y = d3.scale.liner().domain([0, d3.max(dataset)]).range([height-padding+5,5])
var x = d3.scale.liner().domain([0, dataset.length]).range([padding, width])
```
축 추가
```
var xAxis=d3.svg.axis().scale(x).orient('bottom');
var yAxis=d3.svg.axis().scale(y).ticks(5).orient('left');
svg.append('g').attr('class','axis').attr('transform','translate(0,"+(height-padding)+")').call(xAxis)
svg.append('g').attr('class','axis').attr('transform','translate(0,"+padding+",0)').call(yAxis)
```
- ticks: 눈금의 크기 지정
- transform: 객체에 변형을 주기 위한 기능, translate, rotate 등 같은 기능을 사용하기 위해 먼저 정의
- translate(a, b): a는 x 축방향 a만큼 이동 (음수일 경우 왼쪽), b는 y축 방향으로 이동
- ratate(c): c만큼 시계 방향으로 회전 (음수일 경우 반시계 방향)

3. 파이차트

객체 생성
- “#chart” 요소 선택
- 출력상의 문제를 해결하기 위해 차트를 이동시켜야 함 -> transeform
파이모양 구현
- innerRadius와 outerRadius를 통해 반지름 길이 지정

4. 히트맵

히트맵 구현을 위해서는 canvas 객체 필요
drawImnage: canvas에 준비한 이미지를 출력하기 위한 함수
canvas는 SVG에 비해 객체 를 정보에 저장할 수 없고, 다시 그리기가 불리하지만 성능이 높다
SVG는 객체에 모든 정보를 담고 있기에 event handler를 연결할 수 있지만 canvas는 그렇지 못함

Twitter Facebook LinkedIn

sigi