제2회 hello world 오픈세미나 hello world-raphael차트

72
Raphael.js로 SVG 차트 만들기 포털 Ajax팀 안오균

Transcript of 제2회 hello world 오픈세미나 hello world-raphael차트

Page 1: 제2회 hello world 오픈세미나 hello world-raphael차트

Raphael.js로����������� ������������������  SVG����������� ������������������  차트����������� ������������������  만들기����������� ������������������  

포털����������� ������������������  Ajax팀����������� ������������������  

안오균����������� ������������������  

Page 2: 제2회 hello world 오픈세미나 hello world-raphael차트

오늘은,����������� ������������������  ����������� ������������������  

����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  자바스크립트로����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  차트를����������� ������������������  만들고,����������� ������������������  다듬었던����������� ������������������  이야기.����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  느꼈던����������� ������������������  것들.����������� ������������������  

Page 3: 제2회 hello world 오픈세미나 hello world-raphael차트

왜����������� ������������������  있는����������� ������������������  걸����������� ������������������  쓰지����������� ������������������  않고����������� ������������������  새로����������� ������������������  만들었나?����������� ������������������  

왜����������� ������������������  SVG를����������� ������������������  선택했나?����������� ������������������  

왜����������� ������������������  Raphael.js를����������� ������������������  선택했나?����������� ������������������  

만들기����������� ������������������  >>����������� ������������������  

Page 4: 제2회 hello world 오픈세미나 hello world-raphael차트

Naver����������� ������������������  Analytics����������� ������������������  

Page 5: 제2회 hello world 오픈세미나 hello world-raphael차트

하지만,����������� ������������������  차트����������� ������������������  개발은����������� ������������������  처음이었어요...����������� ������������������  

Page 6: 제2회 hello world 오픈세미나 hello world-raphael차트

굳이����������� ������������������  새로����������� ������������������  개발해야����������� ������������������  할까?����������� ������������������  

이미����������� ������������������  좋은����������� ������������������  자바스크립트����������� ������������������  차트����������� ������������������  많잖아?����������� ������������������  

Page 7: 제2회 hello world 오픈세미나 hello world-raphael차트

amCharts����������� ������������������  드래그로����������� ������������������  줌����������� ������������������  인/아웃!����������� ������������������  

Page 8: 제2회 hello world 오픈세미나 hello world-raphael차트

HighCharts����������� ������������������  인쇄까지!����������� ������������������  

Page 9: 제2회 hello world 오픈세미나 hello world-raphael차트

����������� ������������������  디자인!����������� ������������������  

Page 10: 제2회 hello world 오픈세미나 hello world-raphael차트

상위기획����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ->����������� ������������������  상세기획����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ->����������� ������������������  디자인����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ->����������� ������������������  마크업����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ->����������� ������������������  자바스크립트����������� ������������������  개발����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ->����������� ������������������  서버����������� ������������������  개발����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ->����������� ������������������  QA����������� ������������������  

����������� ������������������  

개발����������� ������������������  프로세스����������� ������������������  

Page 11: 제2회 hello world 오픈세미나 hello world-raphael차트

상용����������� ������������������  차트는����������� ������������������  대부분의����������� ������������������  기능을����������� ������������������  훌륭하게����������� ������������������  제공.����������� ������������������  

BUT,����������� ������������������  상세한����������� ������������������  디자인����������� ������������������  커스터마이징이����������� ������������������  어려움.����������� ������������������  

����������� ������������������  

����������� ������������������  

����������� ������������������  

만들자!!����������� ������������������  

Page 12: 제2회 hello world 오픈세미나 hello world-raphael차트

뭘로����������� ������������������  만들까?����������� ������������������  

1.����������� ������������������  SVG����������� ������������������  or����������� ������������������  Canvas����������� ������������������  

2.����������� ������������������  라이브러리를����������� ������������������  사용해야����������� ������������������  할까?����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  아님����������� ������������������  새로����������� ������������������  만들까?����������� ������������������  

Page 13: 제2회 hello world 오픈세미나 hello world-raphael차트

2차원����������� ������������������  벡터����������� ������������������  그래픽����������� ������������������  XML����������� ������������������  마크업����������� ������������������  언어����������� ������������������  

Scalable����������� ������������������  Vector����������� ������������������  Graphics

Page 14: 제2회 hello world 오픈세미나 hello world-raphael차트

SVG가����������� ������������������  새로운����������� ������������������  건가?����������� ������������������  어디에����������� ������������������  쓰였던����������� ������������������  거지?����������� ������������������  

이거!����������� ������������������  

Page 15: 제2회 hello world 오픈세미나 hello world-raphael차트

SVG����������� ������������������  vs����������� ������������������  Canvas����������� ������������������  

����������� ������������������   SVG����������� ������������������   Canvas����������� ������������������  

벡터����������� ������������������  방식����������� ������������������   비트맵����������� ������������������  방식����������� ������������������  

선언전����������� ������������������  마크업����������� ������������������   DOM����������� ������������������  트리와����������� ������������������  무관����������� ������������������  

각����������� ������������������  요소는����������� ������������������  DOM����������� ������������������  노드����������� ������������������  이벤트����������� ������������������  핸들링����������� ������������������  유리����������� ������������������  ����������� ������������������  

이벤트����������� ������������������  핸들링이����������� ������������������  어려움����������� ������������������  

Page 16: 제2회 hello world 오픈세미나 hello world-raphael차트

SVG����������� ������������������   Canvas����������� ������������������  

객체����������� ������������������  수가����������� ������������������  많아질수록����������� ������������������  성능����������� ������������������  저하����������� ������������������  

객체����������� ������������������  수가����������� ������������������  많아도����������� ������������������  영향����������� ������������������  없음����������� ������������������  

해상도����������� ������������������  영향����������� ������������������  없음����������� ������������������  렌더링����������� ������������������  영역이����������� ������������������  클����������� ������������������  수록����������� ������������������  

성능����������� ������������������  저하����������� ������������������  

중간����������� ������������������  수준����������� ������������������  이하의����������� ������������������  그래픽,����������� ������������������  애니메이션����������� ������������������  

게임����������� ������������������  그래픽,����������� ������������������  이미지����������� ������������������  편집기����������� ������������������  

SVG����������� ������������������  vs����������� ������������������  Canvas����������� ������������������  (성능)����������� ������������������  

����������� ������������������  

Page 17: 제2회 hello world 오픈세미나 hello world-raphael차트

SVG����������� ������������������   Canvas����������� ������������������  

IE9+,����������� ������������������  Android����������� ������������������  3.0+,����������� ������������������  그����������� ������������������  외����������� ������������������  모던브라우저����������� ������������������  

IE9+,����������� ������������������  Android����������� ������������������  2.1+,����������� ������������������  그����������� ������������������  외����������� ������������������  모던브라우저����������� ������������������  

SVG����������� ������������������  vs����������� ������������������  Canvas����������� ������������������  (지원범위)����������� ������������������  

����������� ������������������  

http://caniuse.com/#search=svg����������� ������������������  

Page 18: 제2회 hello world 오픈세미나 hello world-raphael차트

IE8����������� ������������������  이하에서는:����������� ������������������  

����������� ������������������  ����������� ������������������  -����������� ������������������  SVG����������� ������������������  to����������� ������������������  Flash����������� ������������������  (svgweb)����������� ������������������  

����������� ������������������  ����������� ������������������  -����������� ������������������  SVG����������� ������������������  to����������� ������������������  VML����������� ������������������  (raphael.js)����������� ������������������  

����������� ������������������  ����������� ������������������  -����������� ������������������  Canvas����������� ������������������  to����������� ������������������  VML����������� ������������������  (excanvas)����������� ������������������  

����������� ������������������  

Android����������� ������������������  2.x����������� ������������������  에서는:����������� ������������������  ����������� ������������������  

����������� ������������������  ����������� ������������������  -����������� ������������������  SVG����������� ������������������  to����������� ������������������  Canvas����������� ������������������  (canvg.js,����������� ������������������  Fabric.js)����������� ������������������  

크로스����������� ������������������  브라우징은����������� ������������������  어떻게����������� ������������������  지원하나?����������� ������������������  

Page 19: 제2회 hello world 오픈세미나 hello world-raphael차트

-����������� ������������������  복잡하지����������� ������������������  않은����������� ������������������  그래픽.����������� ������������������  

-����������� ������������������  툴팁����������� ������������������  인터렉션����������� ������������������  필요����������� ������������������  

-����������� ������������������  서비스의����������� ������������������  타겟이����������� ������������������  주로����������� ������������������  데스크탑����������� ������������������  

-����������� ������������������  IE8����������� ������������������  이하����������� ������������������  크로스����������� ������������������  브라우징����������� ������������������  지원����������� ������������������  

-����������� ������������������  아이패드,����������� ������������������  갤럭시탭����������� ������������������  등����������� ������������������  태블릿����������� ������������������  지원(Android����������� ������������������  3.0+)����������� ������������������  

SVG로����������� ������������������  결정!����������� ������������������  

Page 20: 제2회 hello world 오픈세미나 hello world-raphael차트

오픈소스����������� ������������������  SVG����������� ������������������  라이브러리����������� ������������������  

IE에서는����������� ������������������  VML로����������� ������������������  표현����������� ������������������  

친숙한����������� ������������������  API����������� ������������������  

잘����������� ������������������  정리된����������� ������������������  문서����������� ������������������  

메서드����������� ������������������  확장이����������� ������������������  쉬움����������� ������������������  

github에서����������� ������������������  코드����������� ������������������  호스팅����������� ������������������  

Raphael.js����������� ������������������  

Page 21: 제2회 hello world 오픈세미나 hello world-raphael차트

var����������� ������������������  paper����������� ������������������  =����������� ������������������  Raphael(0,����������� ������������������  0,����������� ������������������  200,����������� ������������������  200);����������� ������������������  

var����������� ������������������  circle����������� ������������������  =����������� ������������������  paper.circle(100,����������� ������������������  100,����������� ������������������  50);����������� ������������������  

circle.attr({����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  'fill':����������� ������������������  '#00f',����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  'stroke':����������� ������������������  '#000',����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  'stroke-width':����������� ������������������  5����������� ������������������  

});����������� ������������������  

����������� ������������������  

원����������� ������������������  그리기����������� ������������������  

Page 22: 제2회 hello world 오픈세미나 hello world-raphael차트

<svg����������� ������������������  version="1.1"����������� ������������������  ...����������� ������������������  >����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ...����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  <circle����������� ������������������  cx="100"����������� ������������������  cy="100"����������� ������������������  r="50"����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  fill="#03f"����������� ������������������  stroke="#000"����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  stroke-width="5"></circle>����������� ������������������  

</svg>����������� ������������������  

����������� ������������������  

원����������� ������������������  그리기����������� ������������������  (svg)����������� ������������������  

Page 23: 제2회 hello world 오픈세미나 hello world-raphael차트

이런����������� ������������������  것까지!!����������� ������������������  

Page 24: 제2회 hello world 오픈세미나 hello world-raphael차트

circle.click(����������� ������������������  function����������� ������������������  ()����������� ������������������  {����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ...����������� ������������������  

}����������� ������������������  );����������� ������������������  

����������� ������������������  

circle.animate(����������� ������������������  {����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  'fill':����������� ������������������  'orange',����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  'stroke':����������� ������������������  'red'����������� ������������������  

},����������� ������������������  500,����������� ������������������  'ease-in'����������� ������������������  );����������� ������������������  

����������� ������������������  

이벤트����������� ������������������  바인딩����������� ������������������  및����������� ������������������  애니메이션����������� ������������������  

Page 25: 제2회 hello world 오픈세미나 hello world-raphael차트

한����������� ������������������  땀����������� ������������������  한����������� ������������������  땀����������� ������������������  그려나가기����������� ������������������  시작했습니다...����������� ������������������  

하지만...����������� ������������������  ����������� ������������������  

Page 26: 제2회 hello world 오픈세미나 hello world-raphael차트

어떤����������� ������������������  문제들이����������� ������������������  있었나?����������� ������������������  

어떤����������� ������������������  해결책이����������� ������������������  있었고����������� ������������������  무엇을����������� ������������������  선택했나?����������� ������������������  

어떻게����������� ������������������  개선했나?����������� ������������������  

다듬기����������� ������������������  >>����������� ������������������  

Page 27: 제2회 hello world 오픈세미나 hello world-raphael차트

-����������� ������������������  문제:����������� ������������������  

����������� ������������������  ����������� ������������������  1px����������� ������������������  테두리를����������� ������������������  가진����������� ������������������  막대를����������� ������������������  그리면����������� ������������������  

����������� ������������������  ����������� ������������������  테두리가����������� ������������������  뿌옇게����������� ������������������  보이는����������� ������������������  문제����������� ������������������  

1px����������� ������������������  테두리����������� ������������������  또렷하게����������� ������������������  그리기����������� ������������������  

Page 28: 제2회 hello world 오픈세미나 hello world-raphael차트

100px,����������� ������������������  100px����������� ������������������  

위치에����������� ������������������  그린����������� ������������������  박스����������� ������������������  

(100,����������� ������������������  100)����������� ������������������  

-����������� ������������������  원인:����������� ������������������  

����������� ������������������  ����������� ������������������  테두리는����������� ������������������  픽셀을����������� ������������������  기준으로����������� ������������������  양쪽으로����������� ������������������  늘어나기����������� ������������������  때문����������� ������������������  

Page 29: 제2회 hello world 오픈세미나 hello world-raphael차트

1px����������� ������������������  테두리를����������� ������������������  가진����������� ������������������  

100px,����������� ������������������  100px����������� ������������������  

위치에����������� ������������������  그린����������� ������������������  박스����������� ������������������  

0.5px����������� ������������������  

0.5px����������� ������������������  

1px����������� ������������������  

(99.5,����������� ������������������  99.5)����������� ������������������  

Page 30: 제2회 hello world 오픈세미나 hello world-raphael차트

1px����������� ������������������  테두리를����������� ������������������  가진����������� ������������������  

100px,����������� ������������������  100px����������� ������������������  

위치에����������� ������������������  그린����������� ������������������  박스����������� ������������������  

(99,����������� ������������������  99)����������� ������������������  

안티앨리어싱이����������� ������������������  적용된����������� ������������������  테두리����������� ������������������  부분����������� ������������������  

Page 31: 제2회 hello world 오픈세미나 hello world-raphael차트

1px����������� ������������������  테두리를����������� ������������������  가진����������� ������������������  

100.5px,����������� ������������������  100.5px����������� ������������������  

위치에����������� ������������������  그린����������� ������������������  박스����������� ������������������  

(100,����������� ������������������  100)����������� ������������������  

-����������� ������������������  해결:����������� ������������������  

����������� ������������������  ����������� ������������������  0.5픽셀����������� ������������������  이동해서����������� ������������������  그리기����������� ������������������  

(100.5,����������� ������������������  100.5)����������� ������������������  

Page 32: 제2회 hello world 오픈세미나 hello world-raphael차트

라파엘의����������� ������������������  커스텀����������� ������������������  메서드를����������� ������������������  이용����������� ������������������  

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);����������� ������������������  

����������� ������������������  

Page 33: 제2회 hello world 오픈세미나 hello world-raphael차트

디자이너가����������� ������������������  생각한����������� ������������������  그라데이션����������� ������������������  

개발자가����������� ������������������  만들어온����������� ������������������  그라데이션����������� ������������������  

아름다운����������� ������������������  투명����������� ������������������  그라데이션����������� ������������������  구현하기����������� ������������������  

Page 34: 제2회 hello world 오픈세미나 hello world-raphael차트

-����������� ������������������  원인:����������� ������������������  

����������� ������������������  ����������� ������������������  Raphael에서는����������� ������������������  마지막����������� ������������������  그래디언트����������� ������������������  스탑에만����������� ������������������  

����������� ������������������  ����������� ������������������  투명도를����������� ������������������  적용할����������� ������������������  수����������� ������������������  있음����������� ������������������  

첫����������� ������������������  번째����������� ������������������  그래디언트����������� ������������������  스탑에는����������� ������������������  투명도����������� ������������������  적용����������� ������������������  안됨����������� ������������������  ����������� ������������������  

Page 35: 제2회 hello world 오픈세미나 hello world-raphael차트

-����������� ������������������  해결:����������� ������������������  

����������� ������������������  ����������� ������������������  다른����������� ������������������  그래디언트����������� ������������������  스탑에도����������� ������������������  투명도를����������� ������������������  줄����������� ������������������  수����������� ������������������  있도록����������� ������������������  

����������� ������������������  ����������� ������������������  코드����������� ������������������  수정했으나����������� ������������������  컨펌����������� ������������������  안됨����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  

����������� ������������������  ����������� ������������������  그라데이션����������� ������������������  적용을����������� ������������������  위해����������� ������������������  

����������� ������������������  ����������� ������������������  별도의����������� ������������������  이미지를����������� ������������������  사용함����������� ������������������  

Page 36: 제2회 hello world 오픈세미나 hello world-raphael차트

-����������� ������������������  문제:����������� ������������������  

����������� ������������������  ����������� ������������������  차트����������� ������������������  영역을����������� ������������������  벗어나는����������� ������������������  툴팁이����������� ������������������  있음����������� ������������������  

툴팁����������� ������������������  구현하기����������� ������������������  

툴팁이����������� ������������������  

주황색����������� ������������������  차트����������� ������������������  영역을����������� ������������������  벗어남����������� ������������������  

Page 37: 제2회 hello world 오픈세미나 hello world-raphael차트

이����������� ������������������  툴팁은����������� ������������������  <div>����������� ������������������  엘리먼트����������� ������������������  

-����������� ������������������  해결:����������� ������������������  

����������� ������������������  ����������� ������������������  영역에����������� ������������������  맞춰����������� ������������������  툴팁의����������� ������������������  위치를����������� ������������������  바꿨으나����������� ������������������  

����������� ������������������  ����������� ������������������  툴팁에����������� ������������������  표현할����������� ������������������  값이����������� ������������������  아주����������� ������������������  큰����������� ������������������  경우가����������� ������������������  있어����������� ������������������  재수정����������� ������������������  

����������� ������������������  ����������� ������������������  툴팁은����������� ������������������  마크업으로����������� ������������������  구현함����������� ������������������  

Page 38: 제2회 hello world 오픈세미나 hello world-raphael차트

-����������� ������������������  문제:����������� ������������������  

����������� ������������������  ����������� ������������������  스택형����������� ������������������  막대차트에����������� ������������������  3개월����������� ������������������  치����������� ������������������  데이터����������� ������������������  표시����������� ������������������  요청����������� ������������������  

����������� ������������������  ����������� ������������������  한����������� ������������������  페이지에����������� ������������������  5개의����������� ������������������  차트를����������� ������������������  표현할����������� ������������������  수����������� ������������������  있도록����������� ������������������  요청����������� ������������������  

성능����������� ������������������  개선����������� ������������������  사례����������� ������������������  

Page 39: 제2회 hello world 오픈세미나 hello world-raphael차트

막대를����������� ������������������  그리는����������� ������������������  데����������� ������������������  필요한����������� ������������������  노드의����������� ������������������  개수����������� ������������������  

����������� ������������������  

=����������� ������������������  막대����������� ������������������  하나����������� ������������������  당����������� ������������������  총����������� ������������������  4개의����������� ������������������  Rect����������� ������������������  노드����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  x����������� ������������������  한����������� ������������������  차트에����������� ������������������  91개의����������� ������������������  막대����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  x����������� ������������������  한����������� ������������������  페이지에����������� ������������������  총����������� ������������������  5개의����������� ������������������  차트����������� ������������������  

����������� ������������������  

=����������� ������������������  4����������� ������������������  x����������� ������������������  91����������� ������������������  x����������� ������������������  5����������� ������������������  =����������� ������������������  1820개의����������� ������������������  노드����������� ������������������  

각각����������� ������������������  하나의����������� ������������������  Rect����������� ������������������  노드����������� ������������������  

Page 40: 제2회 hello world 오픈세미나 hello world-raphael차트

-����������� ������������������  해결:����������� ������������������  

����������� ������������������  ����������� ������������������  각각의����������� ������������������  Rect로����������� ������������������  되어있던����������� ������������������  스택을����������� ������������������  한����������� ������������������  개의����������� ������������������  Path로����������� ������������������  그림����������� ������������������  

같은����������� ������������������  색의����������� ������������������  막대는����������� ������������������  한����������� ������������������  개의����������� ������������������  Path����������� ������������������  노드����������� ������������������  ����������� ������������������  

Page 41: 제2회 hello world 오픈세미나 hello world-raphael차트

Path����������� ������������������  시작점����������� ������������������  

Path����������� ������������������  끝점����������� ������������������  

같은����������� ������������������  컬러의����������� ������������������  막대를����������� ������������������  한����������� ������������������  개의����������� ������������������  Path����������� ������������������  노드로!

Page 42: 제2회 hello world 오픈세미나 hello world-raphael차트

컬러별로����������� ������������������  각각����������� ������������������  하나의����������� ������������������  Path����������� ������������������  노드����������� ������������������  막대의����������� ������������������  개수가����������� ������������������  많아져도����������� ������������������  성능에����������� ������������������  큰����������� ������������������  영향����������� ������������������  없음����������� ������������������  

Page 43: 제2회 hello world 오픈세미나 hello world-raphael차트

-����������� ������������������  문제:����������� ������������������  

����������� ������������������  ����������� ������������������  IE8����������� ������������������  이하,����������� ������������������  VML로����������� ������������������  표현할����������� ������������������  때����������� ������������������  텍스트가����������� ������������������  뭉개져����������� ������������������  보임����������� ������������������  

IE에서의����������� ������������������  텍스트����������� ������������������  안티앨리어싱����������� ������������������  

VML����������� ������������������  

SVG����������� ������������������  

Page 44: 제2회 hello world 오픈세미나 hello world-raphael차트

-����������� ������������������  원인:����������� ������������������  

����������� ������������������  ����������� ������������������  Raphael은����������� ������������������  VML로����������� ������������������  텍스트를����������� ������������������  표현할����������� ������������������  때,����������� ������������������  

����������� ������������������  ����������� ������������������  VML의����������� ������������������  TextPath����������� ������������������  노드를����������� ������������������  사용함.����������� ������������������  

����������� ������������������  

����������� ������������������  ����������� ������������������  TextPath����������� ������������������  노드는����������� ������������������  변형이����������� ������������������  쉽지만,����������� ������������������  

����������� ������������������  ����������� ������������������  작은����������� ������������������  폰트일����������� ������������������  경우����������� ������������������  안티앨리어싱����������� ������������������  때문에����������� ������������������  뭉개져보임.����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  

Page 45: 제2회 hello world 오픈세미나 hello world-raphael차트

-����������� ������������������  해결:����������� ������������������  

����������� ������������������  ����������� ������������������  안티앨리어싱����������� ������������������  제거하면����������� ������������������  글자가����������� ������������������  깨짐.����������� ������������������  

����������� ������������������  ����������� ������������������  라이브러리를����������� ������������������  수정����������� ������������������  시도했으나����������� ������������������  비효율적임.����������� ������������������  

����������� ������������������  

����������� ������������������  ����������� ������������������  디자인측과����������� ������������������  협의해����������� ������������������  그대로����������� ������������������  유지하기로����������� ������������������  함.����������� ������������������  

Page 46: 제2회 hello world 오픈세미나 hello world-raphael차트

-����������� ������������������  대안:����������� ������������������  

����������� ������������������  ����������� ������������������  텍스트를����������� ������������������  마크업으로����������� ������������������  구현하는����������� ������������������  방법.����������� ������������������  

차트의����������� ������������������  텍스트는����������� ������������������  모두����������� ������������������  <div>����������� ������������������  엘리먼트����������� ������������������  

Page 47: 제2회 hello world 오픈세미나 hello world-raphael차트

-����������� ������������������  대안:����������� ������������������  

����������� ������������������  ����������� ������������������  축����������� ������������������  레이블에����������� ������������������  변함이����������� ������������������  없다면����������� ������������������  고정����������� ������������������  이미지를����������� ������������������  사용함.����������� ������������������  

차트의����������� ������������������  배경은����������� ������������������  이미지~!����������� ������������������  

Page 48: 제2회 hello world 오픈세미나 hello world-raphael차트

서비스마다����������� ������������������  차트의����������� ������������������  형태와����������� ������������������  디자인이����������� ������������������  다름����������� ������������������  

원하는����������� ������������������  인터랙션이����������� ������������������  다름����������� ������������������  

차트를����������� ������������������  보여주려는����������� ������������������  디바이스가����������� ������������������  다름����������� ������������������  

서비스별로����������� ������������������  데이터셋이����������� ������������������  다름����������� ������������������  

����������� ������������������  

����������� ������������������  

모든����������� ������������������  서비스를����������� ������������������  만족시킬����������� ������������������  수는����������� ������������������  없음!����������� ������������������  

차트를����������� ������������������  재사용할����������� ������������������  수����������� ������������������  있을까?����������� ������������������  

Page 49: 제2회 hello world 오픈세미나 hello world-raphael차트

차트의����������� ������������������  큼직한����������� ������������������  형태는����������� ������������������  같음����������� ������������������  

����������� ������������������  

����������� ������������������  

����������� ������������������  

����������� ������������������  

'데이터'로����������� ������������������  차트를����������� ������������������  뿌린다는����������� ������������������  건����������� ������������������  같음����������� ������������������  

그럼����������� ������������������  어디까지����������� ������������������  재사용할����������� ������������������  수����������� ������������������  있을까?����������� ������������������  

Page 50: 제2회 hello world 오픈세미나 hello world-raphael차트

차트의����������� ������������������  큼직한����������� ������������������  형태는����������� ������������������  같음����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ->����������� ������������������  바차트와����������� ������������������  라인차트는����������� ������������������  형태가����������� ������������������  동일����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ->����������� ������������������  파이차트나����������� ������������������  도넛차트도����������� ������������������  같은����������� ������������������  형태����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ->����������� ������������������  틱����������� ������������������  계산이나����������� ������������������  좌표,����������� ������������������  각도����������� ������������������  계산은����������� ������������������  공유할����������� ������������������  수����������� ������������������  있음����������� ������������������  

����������� ������������������  

'데이터'로����������� ������������������  차트를����������� ������������������  뿌린다는����������� ������������������  건����������� ������������������  같음����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ->����������� ������������������  차트����������� ������������������  모듈과����������� ������������������  데이터����������� ������������������  모듈을����������� ������������������  분리����������� ������������������  

그럼����������� ������������������  어디까지����������� ������������������  재사용할����������� ������������������  수����������� ������������������  있을까?����������� ������������������  

Page 51: 제2회 hello world 오픈세미나 hello world-raphael차트

라인차트와����������� ������������������  바차트����������� ������������������  

차트����������� ������������������  디자인이����������� ������������������  어떻든����������� ������������������  

점이����������� ������������������  그려지는����������� ������������������  영역은����������� ������������������  동일����������� ������������������  

Page 52: 제2회 hello world 오픈세미나 hello world-raphael차트

라인차트와����������� ������������������  바차트����������� ������������������  

(x,����������� ������������������  y)����������� ������������������  

Page 53: 제2회 hello world 오픈세미나 hello world-raphael차트

라인차트와����������� ������������������  바차트����������� ������������������  

Page 54: 제2회 hello world 오픈세미나 hello world-raphael차트

라인차트와����������� ������������������  바차트����������� ������������������  

Page 55: 제2회 hello world 오픈세미나 hello world-raphael차트

라인차트와����������� ������������������  바차트����������� ������������������  

Page 56: 제2회 hello world 오픈세미나 hello world-raphael차트

좌표����������� ������������������  계산,����������� ������������������  

그리는����������� ������������������  역할,����������� ������������������  

데이터����������� ������������������  처리를����������� ������������������  각각����������� ������������������  분리하자!����������� ������������������  

Page 57: 제2회 hello world 오픈세미나 hello world-raphael차트

차트����������� ������������������  구조����������� ������������������  

Chart����������� ������������������  

����������� ������������������  -����������� ������������������  Brush����������� ������������������  ����������� ������������������  -����������� ������������������  DataTable����������� ������������������  ����������� ������������������  +����������� ������������������  draw()����������� ������������������  

Brush����������� ������������������  

����������� ������������������  +����������� ������������������  drawBaseline()����������� ������������������  ����������� ������������������  +����������� ������������������  drawEachGrid()����������� ������������������  ����������� ������������������  +����������� ������������������  drawEachPoint()����������� ������������������  

DataTable����������� ������������������  

����������� ������������������  +����������� ������������������  setData()����������� ������������������  

Page 58: 제2회 hello world 오픈세미나 hello world-raphael차트

좌표����������� ������������������  계산����������� ������������������  

Chart����������� ������������������  

����������� ������������������  -����������� ������������������  Brush����������� ������������������  ����������� ������������������  -����������� ������������������  DataTable����������� ������������������  ����������� ������������������  +����������� ������������������  draw()����������� ������������������  

Brush����������� ������������������  

����������� ������������������  +����������� ������������������  drawBaseline()����������� ������������������  ����������� ������������������  +����������� ������������������  drawEachGrid()����������� ������������������  ����������� ������������������  +����������� ������������������  drawEachPoint()����������� ������������������  

DataTable����������� ������������������  

����������� ������������������  +����������� ������������������  setData()����������� ������������������  

그리기����������� ������������������  

데이터����������� ������������������  처리����������� ������������������  

Page 59: 제2회 hello world 오픈세미나 hello world-raphael차트

차트����������� ������������������  구조:����������� ������������������  DataTable����������� ������������������  

모든����������� ������������������  차트는����������� ������������������  같은����������� ������������������  형태의����������� ������������������  데이터를����������� ������������������  사용함����������� ������������������  엑셀����������� ������������������  형태로����������� ������������������  데이터����������� ������������������  정의����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  [����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  [����������� ������������������  '월/참석자',����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  '남',����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  '여'����������� ������������������  ],����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  [����������� ������������������  '2012/06',����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  165,����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  938����������� ������������������  ����������� ������������������  ],����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  [����������� ������������������  '2012/07',����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  135,����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  1120����������� ������������������  ]����������� ������������������  ����������� ������������������  ����������� ������������������  ]����������� ������������������  

Row����������� ������������������  

Column����������� ������������������  

Page 60: 제2회 hello world 오픈세미나 hello world-raphael차트

����������� ������������������  ����������� ������������������  [����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  [����������� ������������������  '월/참석자',����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  '남',����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  '여'����������� ������������������  ],����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  [����������� ������������������  '2012/06',����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  165,����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  938����������� ������������������  ����������� ������������������  ],����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  [����������� ������������������  '2012/07',����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  135,����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  1120����������� ������������������  ]����������� ������������������  ����������� ������������������  ����������� ������������������  ]����������� ������������������  

1.����������� ������������������  가독성����������� ������������������  좋음����������� ������������������  

2.����������� ������������������  데이터를����������� ������������������  먼저����������� ������������������  정의,����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  차트����������� ������������������  종류에����������� ������������������  관계����������� ������������������  없이����������� ������������������  데이터의����������� ������������������  기준을����������� ������������������  잡을����������� ������������������  수����������� ������������������  있음����������� ������������������  

Page 61: 제2회 hello world 오픈세미나 hello world-raphael차트

차트����������� ������������������  구조:����������� ������������������  Chart����������� ������������������  Core����������� ������������������  

Chart����������� ������������������  

LineBarChart����������� ������������������  

PieChart����������� ������������������   StackBarChart����������� ������������������  

TableChart����������� ������������������  

데이터����������� ������������������  테이블로부터����������� ������������������  차트����������� ������������������  영역의����������� ������������������  좌표,����������� ������������������  각도,����������� ������������������  틱����������� ������������������  등을����������� ������������������  '계산'����������� ������������������  

차트를����������� ������������������  '그리는����������� ������������������  것'에����������� ������������������  관여하지����������� ������������������  않음����������� ������������������  

Page 62: 제2회 hello world 오픈세미나 hello world-raphael차트

차트����������� ������������������  구조:����������� ������������������  Brush����������� ������������������  

Brush����������� ������������������  

LineBrush����������� ������������������  

BarBrush����������� ������������������   CurveLineBrush����������� ������������������  

CanvasLineBrush����������� ������������������  

Chart에서����������� ������������������  전달해준����������� ������������������  좌표로����������� ������������������  그림을����������� ������������������  그리는����������� ������������������  역할����������� ������������������  

그래픽����������� ������������������  라이브러리에����������� ������������������  대한����������� ������������������  제한����������� ������������������  없음����������� ������������������  

이벤트����������� ������������������  처리����������� ������������������  등의����������� ������������������  작업도����������� ������������������  담당함����������� ������������������  

Page 63: 제2회 hello world 오픈세미나 hello world-raphael차트

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����������� ������������������  

����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  ����������� ������������������  }����������� ������������������  

};����������� ������������������  

<라인����������� ������������������  브러시����������� ������������������  인터페이스>����������� ������������������  

Page 64: 제2회 hello world 오픈세미나 hello world-raphael차트

var����������� ������������������  dataTable����������� ������������������  =����������� ������������������  new����������� ������������������  DataTable();����������� ������������������  

dataTable.setDataTable(����������� ������������������  [����������� ������������������  ...����������� ������������������  ]����������� ������������������  );����������� ������������������  

����������� ������������������  

var����������� ������������������  brush����������� ������������������  =����������� ������������������  new����������� ������������������  LineBrush();����������� ������������������  

����������� ������������������  

var����������� ������������������  chart����������� ������������������  =����������� ������������������  new����������� ������������������  LineBarChart();����������� ������������������  

chart.setBrush(����������� ������������������  brush����������� ������������������  );����������� ������������������  

chart.setDataTable(����������� ������������������  dataTable����������� ������������������  );����������� ������������������  

����������� ������������������  

chart.draw();����������� ������������������  

<라인����������� ������������������  차트����������� ������������������  그리기>����������� ������������������  

Page 65: 제2회 hello world 오픈세미나 hello world-raphael차트

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();����������� ������������������  

<바����������� ������������������  차트����������� ������������������  그리기>����������� ������������������  

Page 66: 제2회 hello world 오픈세미나 hello world-raphael차트

같은����������� ������������������  차트코어,����������� ������������������  같은����������� ������������������  데이터,����������� ������������������  다른����������� ������������������  브러시����������� ������������������  

Page 67: 제2회 hello world 오픈세미나 hello world-raphael차트

이런����������� ������������������  걸����������� ������������������  알았더라면����������� ������������������  좋았을����������� ������������������  텐데.����������� ������������������  

이런����������� ������������������  건����������� ������������������  좋았다.����������� ������������������  

다음엔����������� ������������������  이렇게����������� ������������������  하자.����������� ������������������  

����������� ������������������  

회고����������� ������������������  >>����������� ������������������  

Page 68: 제2회 hello world 오픈세미나 hello world-raphael차트

-����������� ������������������  헤더에����������� ������������������  아주����������� ������������������  긴����������� ������������������  문자열이����������� ������������������  들어가진����������� ������������������  않는가?����������� ������������������  ����������� ������������������  

-����������� ������������������  0보다����������� ������������������  작은����������� ������������������  데이터가����������� ������������������  있는가?����������� ������������������  ����������� ������������������  

-����������� ������������������  값이����������� ������������������  굉장히����������� ������������������  크진����������� ������������������  않은가?����������� ������������������  

-����������� ������������������  소수점이����������� ������������������  있나?����������� ������������������  

-����������� ������������������  샘플����������� ������������������  주세요!!����������� ������������������  

����������� ������������������  

차트로����������� ������������������  표현할����������� ������������������  데이터셋을����������� ������������������  미리����������� ������������������  파악하자.����������� ������������������  

Page 69: 제2회 hello world 오픈세미나 hello world-raphael차트

라이브러리를����������� ������������������  익힐����������� ������������������  때����������� ������������������  학습����������� ������������������  테스트����������� ������������������  작성����������� ������������������  

����������� ������������������  

http://me2.do/5L3jdoc����������� ������������������  ����������� ������������������  

https://github.com/ohgyun/raphaeljs-learning-test����������� ������������������  

학습����������� ������������������  테스트����������� ������������������  방식이����������� ������������������  효과적이었다.����������� ������������������  

Page 70: 제2회 hello world 오픈세미나 hello world-raphael차트

코어와����������� ������������������  브러시,����������� ������������������  데이터를����������� ������������������  나눈����������� ������������������  것은����������� ������������������  좋은����������� ������������������  선택이었다.����������� ������������������  

디자인이����������� ������������������  다른����������� ������������������  라인/바����������� ������������������  차트����������� ������������������  개발����������� ������������������  요청����������� ������������������  ����������� ������������������  

모바일용����������� ������������������  캔버스����������� ������������������  파이차트����������� ������������������  개발����������� ������������������  요청����������� ������������������  

����������� ������������������  

-->����������� ������������������  다른����������� ������������������  팀원이����������� ������������������  브러시만����������� ������������������  개발,����������� ������������������  빠르게����������� ������������������  대응����������� ������������������  

����������� ������������������  

����������� ������������������  ����������� ������������������  

����������� ������������������  

Page 71: 제2회 hello world 오픈세미나 hello world-raphael차트

지금의����������� ������������������  차트에����������� ������������������  집중한다.����������� ������������������  

필요하지����������� ������������������  않은����������� ������������������  확장을����������� ������������������  미리����������� ������������������  고민하지����������� ������������������  말자.����������� ������������������  

����������� ������������������  

모든����������� ������������������  서비스에����������� ������������������  적용하거나,����������� ������������������  

모든����������� ������������������  디자이너와����������� ������������������  기획자를����������� ������������������  만족시킬����������� ������������������  수는����������� ������������������  없다.����������� ������������������  

����������� ������������������  

요구����������� ������������������  사항과����������� ������������������  표현����������� ������������������  범위를����������� ������������������  정확히����������� ������������������  파악해서,����������� ������������������  

최선의����������� ������������������  방법을����������� ������������������  찾아내는����������� ������������������  것이����������� ������������������  가장����������� ������������������  좋겠다.����������� ������������������  

Page 72: 제2회 hello world 오픈세미나 hello world-raphael차트

고맙습니다.����������� ������������������  

라파엘����������� ������������������  페이스북����������� ������������������  그룹����������� ������������������  

http://me2.do/5Y1ggBr����������� ������������������