제2회 hello world 오픈세미나 hello world-raphael차트
Transcript of 제2회 hello world 오픈세미나 hello world-raphael차트
Raphael.js로����������� ������������������ SVG����������� ������������������ 차트����������� ������������������ 만들기����������� ������������������
포털����������� ������������������ Ajax팀����������� ������������������
안오균����������� ������������������
오늘은,����������� ������������������ ����������� ������������������
����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ 자바스크립트로����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ 차트를����������� ������������������ 만들고,����������� ������������������ 다듬었던����������� ������������������ 이야기.����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ 느꼈던����������� ������������������ 것들.����������� ������������������
왜����������� ������������������ 있는����������� ������������������ 걸����������� ������������������ 쓰지����������� ������������������ 않고����������� ������������������ 새로����������� ������������������ 만들었나?����������� ������������������
왜����������� ������������������ SVG를����������� ������������������ 선택했나?����������� ������������������
왜����������� ������������������ Raphael.js를����������� ������������������ 선택했나?����������� ������������������
만들기����������� ������������������ >>����������� ������������������
Naver����������� ������������������ Analytics����������� ������������������
하지만,����������� ������������������ 차트����������� ������������������ 개발은����������� ������������������ 처음이었어요...����������� ������������������
굳이����������� ������������������ 새로����������� ������������������ 개발해야����������� ������������������ 할까?����������� ������������������
이미����������� ������������������ 좋은����������� ������������������ 자바스크립트����������� ������������������ 차트����������� ������������������ 많잖아?����������� ������������������
amCharts����������� ������������������ 드래그로����������� ������������������ 줌����������� ������������������ 인/아웃!����������� ������������������
HighCharts����������� ������������������ 인쇄까지!����������� ������������������
����������� ������������������ 디자인!����������� ������������������
상위기획����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ->����������� ������������������ 상세기획����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ->����������� ������������������ 디자인����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ->����������� ������������������ 마크업����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ->����������� ������������������ 자바스크립트����������� ������������������ 개발����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ->����������� ������������������ 서버����������� ������������������ 개발����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ->����������� ������������������ QA����������� ������������������
����������� ������������������
개발����������� ������������������ 프로세스����������� ������������������
상용����������� ������������������ 차트는����������� ������������������ 대부분의����������� ������������������ 기능을����������� ������������������ 훌륭하게����������� ������������������ 제공.����������� ������������������
BUT,����������� ������������������ 상세한����������� ������������������ 디자인����������� ������������������ 커스터마이징이����������� ������������������ 어려움.����������� ������������������
����������� ������������������
����������� ������������������
����������� ������������������
만들자!!����������� ������������������
뭘로����������� ������������������ 만들까?����������� ������������������
1.����������� ������������������ SVG����������� ������������������ or����������� ������������������ Canvas����������� ������������������
2.����������� ������������������ 라이브러리를����������� ������������������ 사용해야����������� ������������������ 할까?����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ 아님����������� ������������������ 새로����������� ������������������ 만들까?����������� ������������������
2차원����������� ������������������ 벡터����������� ������������������ 그래픽����������� ������������������ XML����������� ������������������ 마크업����������� ������������������ 언어����������� ������������������
Scalable����������� ������������������ Vector����������� ������������������ Graphics
SVG가����������� ������������������ 새로운����������� ������������������ 건가?����������� ������������������ 어디에����������� ������������������ 쓰였던����������� ������������������ 거지?����������� ������������������
이거!����������� ������������������
SVG����������� ������������������ vs����������� ������������������ Canvas����������� ������������������
����������� ������������������ SVG����������� ������������������ Canvas����������� ������������������
벡터����������� ������������������ 방식����������� ������������������ 비트맵����������� ������������������ 방식����������� ������������������
선언전����������� ������������������ 마크업����������� ������������������ DOM����������� ������������������ 트리와����������� ������������������ 무관����������� ������������������
각����������� ������������������ 요소는����������� ������������������ DOM����������� ������������������ 노드����������� ������������������ 이벤트����������� ������������������ 핸들링����������� ������������������ 유리����������� ������������������ ����������� ������������������
이벤트����������� ������������������ 핸들링이����������� ������������������ 어려움����������� ������������������
SVG����������� ������������������ Canvas����������� ������������������
객체����������� ������������������ 수가����������� ������������������ 많아질수록����������� ������������������ 성능����������� ������������������ 저하����������� ������������������
객체����������� ������������������ 수가����������� ������������������ 많아도����������� ������������������ 영향����������� ������������������ 없음����������� ������������������
해상도����������� ������������������ 영향����������� ������������������ 없음����������� ������������������ 렌더링����������� ������������������ 영역이����������� ������������������ 클����������� ������������������ 수록����������� ������������������
성능����������� ������������������ 저하����������� ������������������
중간����������� ������������������ 수준����������� ������������������ 이하의����������� ������������������ 그래픽,����������� ������������������ 애니메이션����������� ������������������
게임����������� ������������������ 그래픽,����������� ������������������ 이미지����������� ������������������ 편집기����������� ������������������
SVG����������� ������������������ vs����������� ������������������ Canvas����������� ������������������ (성능)����������� ������������������
����������� ������������������
SVG����������� ������������������ Canvas����������� ������������������
IE9+,����������� ������������������ Android����������� ������������������ 3.0+,����������� ������������������ 그����������� ������������������ 외����������� ������������������ 모던브라우저����������� ������������������
IE9+,����������� ������������������ Android����������� ������������������ 2.1+,����������� ������������������ 그����������� ������������������ 외����������� ������������������ 모던브라우저����������� ������������������
SVG����������� ������������������ vs����������� ������������������ Canvas����������� ������������������ (지원범위)����������� ������������������
����������� ������������������
http://caniuse.com/#search=svg����������� ������������������
IE8����������� ������������������ 이하에서는:����������� ������������������
����������� ������������������ ����������� ������������������ -����������� ������������������ SVG����������� ������������������ to����������� ������������������ Flash����������� ������������������ (svgweb)����������� ������������������
����������� ������������������ ����������� ������������������ -����������� ������������������ SVG����������� ������������������ to����������� ������������������ VML����������� ������������������ (raphael.js)����������� ������������������
����������� ������������������ ����������� ������������������ -����������� ������������������ Canvas����������� ������������������ to����������� ������������������ VML����������� ������������������ (excanvas)����������� ������������������
����������� ������������������
Android����������� ������������������ 2.x����������� ������������������ 에서는:����������� ������������������ ����������� ������������������
����������� ������������������ ����������� ������������������ -����������� ������������������ SVG����������� ������������������ to����������� ������������������ Canvas����������� ������������������ (canvg.js,����������� ������������������ Fabric.js)����������� ������������������
크로스����������� ������������������ 브라우징은����������� ������������������ 어떻게����������� ������������������ 지원하나?����������� ������������������
-����������� ������������������ 복잡하지����������� ������������������ 않은����������� ������������������ 그래픽.����������� ������������������
-����������� ������������������ 툴팁����������� ������������������ 인터렉션����������� ������������������ 필요����������� ������������������
-����������� ������������������ 서비스의����������� ������������������ 타겟이����������� ������������������ 주로����������� ������������������ 데스크탑����������� ������������������
-����������� ������������������ IE8����������� ������������������ 이하����������� ������������������ 크로스����������� ������������������ 브라우징����������� ������������������ 지원����������� ������������������
-����������� ������������������ 아이패드,����������� ������������������ 갤럭시탭����������� ������������������ 등����������� ������������������ 태블릿����������� ������������������ 지원(Android����������� ������������������ 3.0+)����������� ������������������
SVG로����������� ������������������ 결정!����������� ������������������
오픈소스����������� ������������������ SVG����������� ������������������ 라이브러리����������� ������������������
IE에서는����������� ������������������ VML로����������� ������������������ 표현����������� ������������������
친숙한����������� ������������������ API����������� ������������������
잘����������� ������������������ 정리된����������� ������������������ 문서����������� ������������������
메서드����������� ������������������ 확장이����������� ������������������ 쉬움����������� ������������������
github에서����������� ������������������ 코드����������� ������������������ 호스팅����������� ������������������
Raphael.js����������� ������������������
var����������� ������������������ paper����������� ������������������ =����������� ������������������ Raphael(0,����������� ������������������ 0,����������� ������������������ 200,����������� ������������������ 200);����������� ������������������
var����������� ������������������ circle����������� ������������������ =����������� ������������������ paper.circle(100,����������� ������������������ 100,����������� ������������������ 50);����������� ������������������
circle.attr({����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ 'fill':����������� ������������������ '#00f',����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ 'stroke':����������� ������������������ '#000',����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ 'stroke-width':����������� ������������������ 5����������� ������������������
});����������� ������������������
����������� ������������������
원����������� ������������������ 그리기����������� ������������������
<svg����������� ������������������ version="1.1"����������� ������������������ ...����������� ������������������ >����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ...����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ <circle����������� ������������������ cx="100"����������� ������������������ cy="100"����������� ������������������ r="50"����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ fill="#03f"����������� ������������������ stroke="#000"����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ stroke-width="5"></circle>����������� ������������������
</svg>����������� ������������������
����������� ������������������
원����������� ������������������ 그리기����������� ������������������ (svg)����������� ������������������
이런����������� ������������������ 것까지!!����������� ������������������
circle.click(����������� ������������������ function����������� ������������������ ()����������� ������������������ {����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ...����������� ������������������
}����������� ������������������ );����������� ������������������
����������� ������������������
circle.animate(����������� ������������������ {����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ 'fill':����������� ������������������ 'orange',����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ 'stroke':����������� ������������������ 'red'����������� ������������������
},����������� ������������������ 500,����������� ������������������ 'ease-in'����������� ������������������ );����������� ������������������
����������� ������������������
이벤트����������� ������������������ 바인딩����������� ������������������ 및����������� ������������������ 애니메이션����������� ������������������
한����������� ������������������ 땀����������� ������������������ 한����������� ������������������ 땀����������� ������������������ 그려나가기����������� ������������������ 시작했습니다...����������� ������������������
하지만...����������� ������������������ ����������� ������������������
어떤����������� ������������������ 문제들이����������� ������������������ 있었나?����������� ������������������
어떤����������� ������������������ 해결책이����������� ������������������ 있었고����������� ������������������ 무엇을����������� ������������������ 선택했나?����������� ������������������
어떻게����������� ������������������ 개선했나?����������� ������������������
다듬기����������� ������������������ >>����������� ������������������
-����������� ������������������ 문제:����������� ������������������
����������� ������������������ ����������� ������������������ 1px����������� ������������������ 테두리를����������� ������������������ 가진����������� ������������������ 막대를����������� ������������������ 그리면����������� ������������������
����������� ������������������ ����������� ������������������ 테두리가����������� ������������������ 뿌옇게����������� ������������������ 보이는����������� ������������������ 문제����������� ������������������
1px����������� ������������������ 테두리����������� ������������������ 또렷하게����������� ������������������ 그리기����������� ������������������
100px,����������� ������������������ 100px����������� ������������������
위치에����������� ������������������ 그린����������� ������������������ 박스����������� ������������������
(100,����������� ������������������ 100)����������� ������������������
-����������� ������������������ 원인:����������� ������������������
����������� ������������������ ����������� ������������������ 테두리는����������� ������������������ 픽셀을����������� ������������������ 기준으로����������� ������������������ 양쪽으로����������� ������������������ 늘어나기����������� ������������������ 때문����������� ������������������
1px����������� ������������������ 테두리를����������� ������������������ 가진����������� ������������������
100px,����������� ������������������ 100px����������� ������������������
위치에����������� ������������������ 그린����������� ������������������ 박스����������� ������������������
0.5px����������� ������������������
0.5px����������� ������������������
1px����������� ������������������
(99.5,����������� ������������������ 99.5)����������� ������������������
1px����������� ������������������ 테두리를����������� ������������������ 가진����������� ������������������
100px,����������� ������������������ 100px����������� ������������������
위치에����������� ������������������ 그린����������� ������������������ 박스����������� ������������������
(99,����������� ������������������ 99)����������� ������������������
안티앨리어싱이����������� ������������������ 적용된����������� ������������������ 테두리����������� ������������������ 부분����������� ������������������
1px����������� ������������������ 테두리를����������� ������������������ 가진����������� ������������������
100.5px,����������� ������������������ 100.5px����������� ������������������
위치에����������� ������������������ 그린����������� ������������������ 박스����������� ������������������
(100,����������� ������������������ 100)����������� ������������������
-����������� ������������������ 해결:����������� ������������������
����������� ������������������ ����������� ������������������ 0.5픽셀����������� ������������������ 이동해서����������� ������������������ 그리기����������� ������������������
(100.5,����������� ������������������ 100.5)����������� ������������������
라파엘의����������� ������������������ 커스텀����������� ������������������ 메서드를����������� ������������������ 이용����������� ������������������
Raphael.fn.n_1pxBorderRect����������� ������������������ =����������� ������������������ function����������� ������������������ (x,����������� ������������������ y,����������� ������������������ w,����������� ������������������ h)����������� ������������������ {����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ return����������� ������������������ this.rect(x+0.5,����������� ������������������ y+0.5,����������� ������������������ w-1,����������� ������������������ h-1);����������� ������������������
};����������� ������������������
����������� ������������������
var����������� ������������������ rect����������� ������������������ =����������� ������������������ paper.n_1pxBorderRect(x,����������� ������������������ y,����������� ������������������ w,����������� ������������������ h);����������� ������������������
����������� ������������������
디자이너가����������� ������������������ 생각한����������� ������������������ 그라데이션����������� ������������������
개발자가����������� ������������������ 만들어온����������� ������������������ 그라데이션����������� ������������������
아름다운����������� ������������������ 투명����������� ������������������ 그라데이션����������� ������������������ 구현하기����������� ������������������
-����������� ������������������ 원인:����������� ������������������
����������� ������������������ ����������� ������������������ Raphael에서는����������� ������������������ 마지막����������� ������������������ 그래디언트����������� ������������������ 스탑에만����������� ������������������
����������� ������������������ ����������� ������������������ 투명도를����������� ������������������ 적용할����������� ������������������ 수����������� ������������������ 있음����������� ������������������
첫����������� ������������������ 번째����������� ������������������ 그래디언트����������� ������������������ 스탑에는����������� ������������������ 투명도����������� ������������������ 적용����������� ������������������ 안됨����������� ������������������ ����������� ������������������
-����������� ������������������ 해결:����������� ������������������
����������� ������������������ ����������� ������������������ 다른����������� ������������������ 그래디언트����������� ������������������ 스탑에도����������� ������������������ 투명도를����������� ������������������ 줄����������� ������������������ 수����������� ������������������ 있도록����������� ������������������
����������� ������������������ ����������� ������������������ 코드����������� ������������������ 수정했으나����������� ������������������ 컨펌����������� ������������������ 안됨����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������
����������� ������������������ ����������� ������������������ 그라데이션����������� ������������������ 적용을����������� ������������������ 위해����������� ������������������
����������� ������������������ ����������� ������������������ 별도의����������� ������������������ 이미지를����������� ������������������ 사용함����������� ������������������
-����������� ������������������ 문제:����������� ������������������
����������� ������������������ ����������� ������������������ 차트����������� ������������������ 영역을����������� ������������������ 벗어나는����������� ������������������ 툴팁이����������� ������������������ 있음����������� ������������������
툴팁����������� ������������������ 구현하기����������� ������������������
툴팁이����������� ������������������
주황색����������� ������������������ 차트����������� ������������������ 영역을����������� ������������������ 벗어남����������� ������������������
이����������� ������������������ 툴팁은����������� ������������������ <div>����������� ������������������ 엘리먼트����������� ������������������
-����������� ������������������ 해결:����������� ������������������
����������� ������������������ ����������� ������������������ 영역에����������� ������������������ 맞춰����������� ������������������ 툴팁의����������� ������������������ 위치를����������� ������������������ 바꿨으나����������� ������������������
����������� ������������������ ����������� ������������������ 툴팁에����������� ������������������ 표현할����������� ������������������ 값이����������� ������������������ 아주����������� ������������������ 큰����������� ������������������ 경우가����������� ������������������ 있어����������� ������������������ 재수정����������� ������������������
����������� ������������������ ����������� ������������������ 툴팁은����������� ������������������ 마크업으로����������� ������������������ 구현함����������� ������������������
-����������� ������������������ 문제:����������� ������������������
����������� ������������������ ����������� ������������������ 스택형����������� ������������������ 막대차트에����������� ������������������ 3개월����������� ������������������ 치����������� ������������������ 데이터����������� ������������������ 표시����������� ������������������ 요청����������� ������������������
����������� ������������������ ����������� ������������������ 한����������� ������������������ 페이지에����������� ������������������ 5개의����������� ������������������ 차트를����������� ������������������ 표현할����������� ������������������ 수����������� ������������������ 있도록����������� ������������������ 요청����������� ������������������
성능����������� ������������������ 개선����������� ������������������ 사례����������� ������������������
막대를����������� ������������������ 그리는����������� ������������������ 데����������� ������������������ 필요한����������� ������������������ 노드의����������� ������������������ 개수����������� ������������������
����������� ������������������
=����������� ������������������ 막대����������� ������������������ 하나����������� ������������������ 당����������� ������������������ 총����������� ������������������ 4개의����������� ������������������ Rect����������� ������������������ 노드����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ x����������� ������������������ 한����������� ������������������ 차트에����������� ������������������ 91개의����������� ������������������ 막대����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ x����������� ������������������ 한����������� ������������������ 페이지에����������� ������������������ 총����������� ������������������ 5개의����������� ������������������ 차트����������� ������������������
����������� ������������������
=����������� ������������������ 4����������� ������������������ x����������� ������������������ 91����������� ������������������ x����������� ������������������ 5����������� ������������������ =����������� ������������������ 1820개의����������� ������������������ 노드����������� ������������������
각각����������� ������������������ 하나의����������� ������������������ Rect����������� ������������������ 노드����������� ������������������
-����������� ������������������ 해결:����������� ������������������
����������� ������������������ ����������� ������������������ 각각의����������� ������������������ Rect로����������� ������������������ 되어있던����������� ������������������ 스택을����������� ������������������ 한����������� ������������������ 개의����������� ������������������ Path로����������� ������������������ 그림����������� ������������������
같은����������� ������������������ 색의����������� ������������������ 막대는����������� ������������������ 한����������� ������������������ 개의����������� ������������������ Path����������� ������������������ 노드����������� ������������������ ����������� ������������������
Path����������� ������������������ 시작점����������� ������������������
Path����������� ������������������ 끝점����������� ������������������
같은����������� ������������������ 컬러의����������� ������������������ 막대를����������� ������������������ 한����������� ������������������ 개의����������� ������������������ Path����������� ������������������ 노드로!
컬러별로����������� ������������������ 각각����������� ������������������ 하나의����������� ������������������ Path����������� ������������������ 노드����������� ������������������ 막대의����������� ������������������ 개수가����������� ������������������ 많아져도����������� ������������������ 성능에����������� ������������������ 큰����������� ������������������ 영향����������� ������������������ 없음����������� ������������������
-����������� ������������������ 문제:����������� ������������������
����������� ������������������ ����������� ������������������ IE8����������� ������������������ 이하,����������� ������������������ VML로����������� ������������������ 표현할����������� ������������������ 때����������� ������������������ 텍스트가����������� ������������������ 뭉개져����������� ������������������ 보임����������� ������������������
IE에서의����������� ������������������ 텍스트����������� ������������������ 안티앨리어싱����������� ������������������
VML����������� ������������������
SVG����������� ������������������
-����������� ������������������ 원인:����������� ������������������
����������� ������������������ ����������� ������������������ Raphael은����������� ������������������ VML로����������� ������������������ 텍스트를����������� ������������������ 표현할����������� ������������������ 때,����������� ������������������
����������� ������������������ ����������� ������������������ VML의����������� ������������������ TextPath����������� ������������������ 노드를����������� ������������������ 사용함.����������� ������������������
����������� ������������������
����������� ������������������ ����������� ������������������ TextPath����������� ������������������ 노드는����������� ������������������ 변형이����������� ������������������ 쉽지만,����������� ������������������
����������� ������������������ ����������� ������������������ 작은����������� ������������������ 폰트일����������� ������������������ 경우����������� ������������������ 안티앨리어싱����������� ������������������ 때문에����������� ������������������ 뭉개져보임.����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������
-����������� ������������������ 해결:����������� ������������������
����������� ������������������ ����������� ������������������ 안티앨리어싱����������� ������������������ 제거하면����������� ������������������ 글자가����������� ������������������ 깨짐.����������� ������������������
����������� ������������������ ����������� ������������������ 라이브러리를����������� ������������������ 수정����������� ������������������ 시도했으나����������� ������������������ 비효율적임.����������� ������������������
����������� ������������������
����������� ������������������ ����������� ������������������ 디자인측과����������� ������������������ 협의해����������� ������������������ 그대로����������� ������������������ 유지하기로����������� ������������������ 함.����������� ������������������
-����������� ������������������ 대안:����������� ������������������
����������� ������������������ ����������� ������������������ 텍스트를����������� ������������������ 마크업으로����������� ������������������ 구현하는����������� ������������������ 방법.����������� ������������������
차트의����������� ������������������ 텍스트는����������� ������������������ 모두����������� ������������������ <div>����������� ������������������ 엘리먼트����������� ������������������
-����������� ������������������ 대안:����������� ������������������
����������� ������������������ ����������� ������������������ 축����������� ������������������ 레이블에����������� ������������������ 변함이����������� ������������������ 없다면����������� ������������������ 고정����������� ������������������ 이미지를����������� ������������������ 사용함.����������� ������������������
차트의����������� ������������������ 배경은����������� ������������������ 이미지~!����������� ������������������
서비스마다����������� ������������������ 차트의����������� ������������������ 형태와����������� ������������������ 디자인이����������� ������������������ 다름����������� ������������������
원하는����������� ������������������ 인터랙션이����������� ������������������ 다름����������� ������������������
차트를����������� ������������������ 보여주려는����������� ������������������ 디바이스가����������� ������������������ 다름����������� ������������������
서비스별로����������� ������������������ 데이터셋이����������� ������������������ 다름����������� ������������������
����������� ������������������
����������� ������������������
모든����������� ������������������ 서비스를����������� ������������������ 만족시킬����������� ������������������ 수는����������� ������������������ 없음!����������� ������������������
차트를����������� ������������������ 재사용할����������� ������������������ 수����������� ������������������ 있을까?����������� ������������������
차트의����������� ������������������ 큼직한����������� ������������������ 형태는����������� ������������������ 같음����������� ������������������
����������� ������������������
����������� ������������������
����������� ������������������
����������� ������������������
'데이터'로����������� ������������������ 차트를����������� ������������������ 뿌린다는����������� ������������������ 건����������� ������������������ 같음����������� ������������������
그럼����������� ������������������ 어디까지����������� ������������������ 재사용할����������� ������������������ 수����������� ������������������ 있을까?����������� ������������������
차트의����������� ������������������ 큼직한����������� ������������������ 형태는����������� ������������������ 같음����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ->����������� ������������������ 바차트와����������� ������������������ 라인차트는����������� ������������������ 형태가����������� ������������������ 동일����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ->����������� ������������������ 파이차트나����������� ������������������ 도넛차트도����������� ������������������ 같은����������� ������������������ 형태����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ->����������� ������������������ 틱����������� ������������������ 계산이나����������� ������������������ 좌표,����������� ������������������ 각도����������� ������������������ 계산은����������� ������������������ 공유할����������� ������������������ 수����������� ������������������ 있음����������� ������������������
����������� ������������������
'데이터'로����������� ������������������ 차트를����������� ������������������ 뿌린다는����������� ������������������ 건����������� ������������������ 같음����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ->����������� ������������������ 차트����������� ������������������ 모듈과����������� ������������������ 데이터����������� ������������������ 모듈을����������� ������������������ 분리����������� ������������������
그럼����������� ������������������ 어디까지����������� ������������������ 재사용할����������� ������������������ 수����������� ������������������ 있을까?����������� ������������������
라인차트와����������� ������������������ 바차트����������� ������������������
차트����������� ������������������ 디자인이����������� ������������������ 어떻든����������� ������������������
점이����������� ������������������ 그려지는����������� ������������������ 영역은����������� ������������������ 동일����������� ������������������
라인차트와����������� ������������������ 바차트����������� ������������������
(x,����������� ������������������ y)����������� ������������������
라인차트와����������� ������������������ 바차트����������� ������������������
라인차트와����������� ������������������ 바차트����������� ������������������
라인차트와����������� ������������������ 바차트����������� ������������������
좌표����������� ������������������ 계산,����������� ������������������
그리는����������� ������������������ 역할,����������� ������������������
데이터����������� ������������������ 처리를����������� ������������������ 각각����������� ������������������ 분리하자!����������� ������������������
차트����������� ������������������ 구조����������� ������������������
Chart����������� ������������������
����������� ������������������ -����������� ������������������ Brush����������� ������������������ ����������� ������������������ -����������� ������������������ DataTable����������� ������������������ ����������� ������������������ +����������� ������������������ draw()����������� ������������������
Brush����������� ������������������
����������� ������������������ +����������� ������������������ drawBaseline()����������� ������������������ ����������� ������������������ +����������� ������������������ drawEachGrid()����������� ������������������ ����������� ������������������ +����������� ������������������ drawEachPoint()����������� ������������������
DataTable����������� ������������������
����������� ������������������ +����������� ������������������ setData()����������� ������������������
좌표����������� ������������������ 계산����������� ������������������
Chart����������� ������������������
����������� ������������������ -����������� ������������������ Brush����������� ������������������ ����������� ������������������ -����������� ������������������ DataTable����������� ������������������ ����������� ������������������ +����������� ������������������ draw()����������� ������������������
Brush����������� ������������������
����������� ������������������ +����������� ������������������ drawBaseline()����������� ������������������ ����������� ������������������ +����������� ������������������ drawEachGrid()����������� ������������������ ����������� ������������������ +����������� ������������������ drawEachPoint()����������� ������������������
DataTable����������� ������������������
����������� ������������������ +����������� ������������������ setData()����������� ������������������
그리기����������� ������������������
데이터����������� ������������������ 처리����������� ������������������
차트����������� ������������������ 구조:����������� ������������������ DataTable����������� ������������������
모든����������� ������������������ 차트는����������� ������������������ 같은����������� ������������������ 형태의����������� ������������������ 데이터를����������� ������������������ 사용함����������� ������������������ 엑셀����������� ������������������ 형태로����������� ������������������ 데이터����������� ������������������ 정의����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ [����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ [����������� ������������������ '월/참석자',����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ '남',����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ '여'����������� ������������������ ],����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ [����������� ������������������ '2012/06',����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ 165,����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ 938����������� ������������������ ����������� ������������������ ],����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ [����������� ������������������ '2012/07',����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ 135,����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ 1120����������� ������������������ ]����������� ������������������ ����������� ������������������ ����������� ������������������ ]����������� ������������������
Row����������� ������������������
Column����������� ������������������
����������� ������������������ ����������� ������������������ [����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ [����������� ������������������ '월/참석자',����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ '남',����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ '여'����������� ������������������ ],����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ [����������� ������������������ '2012/06',����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ 165,����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ 938����������� ������������������ ����������� ������������������ ],����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ [����������� ������������������ '2012/07',����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ 135,����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ 1120����������� ������������������ ]����������� ������������������ ����������� ������������������ ����������� ������������������ ]����������� ������������������
1.����������� ������������������ 가독성����������� ������������������ 좋음����������� ������������������
2.����������� ������������������ 데이터를����������� ������������������ 먼저����������� ������������������ 정의,����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ 차트����������� ������������������ 종류에����������� ������������������ 관계����������� ������������������ 없이����������� ������������������ 데이터의����������� ������������������ 기준을����������� ������������������ 잡을����������� ������������������ 수����������� ������������������ 있음����������� ������������������
차트����������� ������������������ 구조:����������� ������������������ Chart����������� ������������������ Core����������� ������������������
Chart����������� ������������������
LineBarChart����������� ������������������
PieChart����������� ������������������ StackBarChart����������� ������������������
TableChart����������� ������������������
데이터����������� ������������������ 테이블로부터����������� ������������������ 차트����������� ������������������ 영역의����������� ������������������ 좌표,����������� ������������������ 각도,����������� ������������������ 틱����������� ������������������ 등을����������� ������������������ '계산'����������� ������������������
차트를����������� ������������������ '그리는����������� ������������������ 것'에����������� ������������������ 관여하지����������� ������������������ 않음����������� ������������������
차트����������� ������������������ 구조:����������� ������������������ Brush����������� ������������������
Brush����������� ������������������
LineBrush����������� ������������������
BarBrush����������� ������������������ CurveLineBrush����������� ������������������
CanvasLineBrush����������� ������������������
Chart에서����������� ������������������ 전달해준����������� ������������������ 좌표로����������� ������������������ 그림을����������� ������������������ 그리는����������� ������������������ 역할����������� ������������������
그래픽����������� ������������������ 라이브러리에����������� ������������������ 대한����������� ������������������ 제한����������� ������������������ 없음����������� ������������������
이벤트����������� ������������������ 처리����������� ������������������ 등의����������� ������������������ 작업도����������� ������������������ 담당함����������� ������������������
var����������� ������������������ LineBrush����������� ������������������ =����������� ������������������ {����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ initialize:����������� ������������������ function����������� ������������������ (data)����������� ������������������ {},����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ drawBaseline:����������� ������������������ function����������� ������������������ (data)����������� ������������������ {},����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ drawEachGridline:����������� ������������������ function����������� ������������������ (data)����������� ������������������ {},����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ drawEachLabel:����������� ������������������ function����������� ������������������ (data)����������� ������������������ {},����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ drawEachCell:����������� ������������������ function����������� ������������������ (data)����������� ������������������ {����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ //����������� ������������������ data.rIdx����������� ������������������ ����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ //����������� ������������������ data.cIdx����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ //����������� ������������������ data.x����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ //����������� ������������������ data.y����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ //����������� ������������������ data.value����������� ������������������
����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ ����������� ������������������ }����������� ������������������
};����������� ������������������
<라인����������� ������������������ 브러시����������� ������������������ 인터페이스>����������� ������������������
var����������� ������������������ dataTable����������� ������������������ =����������� ������������������ new����������� ������������������ DataTable();����������� ������������������
dataTable.setDataTable(����������� ������������������ [����������� ������������������ ...����������� ������������������ ]����������� ������������������ );����������� ������������������
����������� ������������������
var����������� ������������������ brush����������� ������������������ =����������� ������������������ new����������� ������������������ LineBrush();����������� ������������������
����������� ������������������
var����������� ������������������ chart����������� ������������������ =����������� ������������������ new����������� ������������������ LineBarChart();����������� ������������������
chart.setBrush(����������� ������������������ brush����������� ������������������ );����������� ������������������
chart.setDataTable(����������� ������������������ dataTable����������� ������������������ );����������� ������������������
����������� ������������������
chart.draw();����������� ������������������
<라인����������� ������������������ 차트����������� ������������������ 그리기>����������� ������������������
var����������� ������������������ dataTable����������� ������������������ =����������� ������������������ new����������� ������������������ DataTable();����������� ������������������
dataTable.setDataTable(����������� ������������������ [����������� ������������������ ...����������� ������������������ ]����������� ������������������ );����������� ������������������
����������� ������������������
//����������� ������������������ var����������� ������������������ brush����������� ������������������ =����������� ������������������ new����������� ������������������ LineBrush();����������� ������������������
var����������� ������������������ brush����������� ������������������ =����������� ������������������ new����������� ������������������ BarBrush();����������� ������������������
����������� ������������������
var����������� ������������������ chart����������� ������������������ =����������� ������������������ new����������� ������������������ LineBarChart();����������� ������������������
chart.setBrush(����������� ������������������ brush����������� ������������������ );����������� ������������������
chart.setDataTable(����������� ������������������ dataTable����������� ������������������ );����������� ������������������
����������� ������������������
chart.draw();����������� ������������������
<바����������� ������������������ 차트����������� ������������������ 그리기>����������� ������������������
같은����������� ������������������ 차트코어,����������� ������������������ 같은����������� ������������������ 데이터,����������� ������������������ 다른����������� ������������������ 브러시����������� ������������������
이런����������� ������������������ 걸����������� ������������������ 알았더라면����������� ������������������ 좋았을����������� ������������������ 텐데.����������� ������������������
이런����������� ������������������ 건����������� ������������������ 좋았다.����������� ������������������
다음엔����������� ������������������ 이렇게����������� ������������������ 하자.����������� ������������������
����������� ������������������
회고����������� ������������������ >>����������� ������������������
-����������� ������������������ 헤더에����������� ������������������ 아주����������� ������������������ 긴����������� ������������������ 문자열이����������� ������������������ 들어가진����������� ������������������ 않는가?����������� ������������������ ����������� ������������������
-����������� ������������������ 0보다����������� ������������������ 작은����������� ������������������ 데이터가����������� ������������������ 있는가?����������� ������������������ ����������� ������������������
-����������� ������������������ 값이����������� ������������������ 굉장히����������� ������������������ 크진����������� ������������������ 않은가?����������� ������������������
-����������� ������������������ 소수점이����������� ������������������ 있나?����������� ������������������
-����������� ������������������ 샘플����������� ������������������ 주세요!!����������� ������������������
����������� ������������������
차트로����������� ������������������ 표현할����������� ������������������ 데이터셋을����������� ������������������ 미리����������� ������������������ 파악하자.����������� ������������������
라이브러리를����������� ������������������ 익힐����������� ������������������ 때����������� ������������������ 학습����������� ������������������ 테스트����������� ������������������ 작성����������� ������������������
����������� ������������������
http://me2.do/5L3jdoc����������� ������������������ ����������� ������������������
https://github.com/ohgyun/raphaeljs-learning-test����������� ������������������
학습����������� ������������������ 테스트����������� ������������������ 방식이����������� ������������������ 효과적이었다.����������� ������������������
코어와����������� ������������������ 브러시,����������� ������������������ 데이터를����������� ������������������ 나눈����������� ������������������ 것은����������� ������������������ 좋은����������� ������������������ 선택이었다.����������� ������������������
디자인이����������� ������������������ 다른����������� ������������������ 라인/바����������� ������������������ 차트����������� ������������������ 개발����������� ������������������ 요청����������� ������������������ ����������� ������������������
모바일용����������� ������������������ 캔버스����������� ������������������ 파이차트����������� ������������������ 개발����������� ������������������ 요청����������� ������������������
����������� ������������������
-->����������� ������������������ 다른����������� ������������������ 팀원이����������� ������������������ 브러시만����������� ������������������ 개발,����������� ������������������ 빠르게����������� ������������������ 대응����������� ������������������
����������� ������������������
����������� ������������������ ����������� ������������������
����������� ������������������
지금의����������� ������������������ 차트에����������� ������������������ 집중한다.����������� ������������������
필요하지����������� ������������������ 않은����������� ������������������ 확장을����������� ������������������ 미리����������� ������������������ 고민하지����������� ������������������ 말자.����������� ������������������
����������� ������������������
모든����������� ������������������ 서비스에����������� ������������������ 적용하거나,����������� ������������������
모든����������� ������������������ 디자이너와����������� ������������������ 기획자를����������� ������������������ 만족시킬����������� ������������������ 수는����������� ������������������ 없다.����������� ������������������
����������� ������������������
요구����������� ������������������ 사항과����������� ������������������ 표현����������� ������������������ 범위를����������� ������������������ 정확히����������� ������������������ 파악해서,����������� ������������������
최선의����������� ������������������ 방법을����������� ������������������ 찾아내는����������� ������������������ 것이����������� ������������������ 가장����������� ������������������ 좋겠다.����������� ������������������
고맙습니다.����������� ������������������
라파엘����������� ������������������ 페이스북����������� ������������������ 그룹����������� ������������������
http://me2.do/5Y1ggBr����������� ������������������