2012.07.07 제2회 Helloworld 세미나 발표자료.

1. Raphael.js로

2.
SVG

3. 차트

4. 만들기

5.
포털

6. Ajax팀

7.
안오균

9. 오늘은,

16. 자바스크립트로

20. 차트를

21. 만들고,

22. 다듬었던

23. 이야기.

27. 느꼈던

28. 것들.

30. 만들기

32.
왜

33. 있는

34. 걸

35. 쓰지

36. 않고

37. 새로

38. 만들었나?

39.
왜

40. SVG를

41. 선택했나?

42.
왜

43. Raphael.js를

44. 선택했나?

46. Naver

47. Analytics

49. 하지만,

50. 차트

51. 개발은

52. 처음이었어요...

54. 굳이

55. 새로

56. 개발해야

57. 할까?

58.
이미

59. 좋은

60. 자바스크립트

61. 차트

62. 많잖아?

64. amCharts

65.
드래그로

66. 줌

67. 인/아웃!

69. HighCharts

70.
인쇄까지!

72. 디자인!

74. 개발

75. 프로세스

76.
상위기획

84. -

85. 상세기획

98. -

99. 디자인

117. -

118. 마크업

136. -

137. 자바스크립트

138. 개발

156. -

157. 서버

158. 개발

181. -

182. QA

185. 상용

186. 차트는

187. 대부분의

188. 기능을

189. 훌륭하게

190. 제공.

191.
BUT,

192. 상세한

193. 디자인

194. 커스터마이징이

195. 어려움.

199.
만들자!!

201. 뭘로

202. 만들까?

203.
1.

204. SVG

205. or

206. Canvas

207.
2.

208. 라이브러리를

209. 사용해야

210. 할까?

215. 아님

216. 새로

217. 만들까?

219. Scalable

220. Vector

221. Graphics
2차원

222. 벡터

223. 그래픽

224.
XML

225. 마크업

226. 언어

228. SVG가

229. 새로운

230. 건가?

231. 어디에

232. 쓰였던

233. 거지?

234.
이거!

236. SVG

237. vs

238. Canvas

240. SVG

241. Canvas

242.
벡터

243. 방식

244. 비트맵

245. 방식

246.
선언전

247. 마크업

248. DOM

249. 트리와

250. 무관

251.
각

252. 요소는

253. DOM

254. 노드

255.
이벤트

256. 핸들링이

257. 어려움

258.
이벤트

259. 핸들링

260. 유리

263. SVG

264. vs

265. Canvas

266. (성능)

268. SVG

269. Canvas

270.
객체

271. 수가

272. 많아질수록

273. 객체

274. 수가

275. 많아도

276.
성능

277. 저하

278. 영향

279. 없음

280.
렌더링

281. 영역이

282. 클

283. 수록

284.
해상도

285. 영향

286. 없음

287.
성능

288. 저하

289.
중간

290. 수준

291. 이하의

292. 그래픽,

293.
게임

294. 그래픽,

295. 이미지

296. 편집기

297.
애니메이션

299. SVG

300. vs

301. Canvas

302. (지원범위)

304. SVG

305. Canvas

306.
IE9+,

307. Android

308. 3.0+,

309. IE9+,

310. Android

311. 2.1+,

312.
그

313. 외

314. 모던브라우저

315. 그

316. 외

317. 모던브라우저

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

320. 크로스

321. 브라우징은

322. 어떻게

323. 지원하나?

324.
IE8

325. 이하에서는:

328. -

329. SVG

330. to

331. Flash

332. (svgweb)

335. -

336. SVG

337. to

338. VML

339. (raphael.js)

342. -

343. Canvas

344. to

345. VML

346. (excanvas)

348.
Android

349. 2.x

350. 에서는:

354. -

355. SVG

356. to

357. Canvas

358. (canvg.js,

359. Fabric.js)

361. SVG로

362. 결정!

363.
-

364. 복잡하지

365. 않은

366. 그래픽.

367.
-

368. 툴팁

369. 인터렉션

370. 필요

371.
-

372. 서비스의

373. 타겟이

374. 주로

375. 데스크탑

376.
-

377. IE8

378. 이하

379. 크로스

380. 브라우징

381. 지원

382.
-

383. 아이패드,

384. 갤럭시탭

385. 등

386. 태블릿

387. 지원(Android

388. 3.0+)

390. Raphael.js

391.
오픈소스

392. SVG

393. 라이브러리

394.
IE에서는

395. VML로

396. 표현

397.
친숙한

398. API

399.
잘

400. 정리된

401. 문서

402.
메서드

403. 확장이

404. 쉬움

405.
github에서

406. 코드

407. 호스팅

409. 원

410. 그리기

411.
var

412. paper

413. =

414. Raphael(0,

415. 0,

416. 200,

417. 200);

418.
var

419. circle

420. =

421. paper.circle(100,

422. 100,

423. 50);

424.
circle.attr({

429. 'fill':

430. '#00f',

435. 'stroke':

436. '#000',

441. 'stroke-width':

442. 5

443.
});

446. 원

447. 그리기

448. (svg)

449.
svg

450. version=1.1

451. ...

457. ...

462. circle

463. cx=100

464. cy=100

465. r=50

482. fill=#03f

483. stroke=#000

500. stroke-width=5/circle

501.
/svg

504. 이런

505. 것까지!!

507. 이벤트

508. 바인딩

509. 및

510. 애니메이션

511.
circle.click(

512. function

513. ()

514. {

519. ...

520.
}

521. );

523.
circle.animate(

524. {

529. 'fill':

530. 'orange',

535. 'stroke':

536. 'red'

537.
},

538. 500,

539. 'ease-in'

540. );

543. 한

544. 땀

545. 한

546. 땀

547. 그려나가기

548. 시작했습니다...

549.
하지만...

552. 다듬기

554.
어떤

555. 문제들이

556. 있었나?

557.
어떤

558. 해결책이

559. 있었고

560. 무엇을

561. 선택했나?

562.
어떻게

563. 개선했나?

565. 1px

566. 테두리

567. 또렷하게

568. 그리기

569.
-

570. 문제:

573. 1px

574. 테두리를

575. 가진

576. 막대를

577. 그리면

580. 테두리가

581. 뿌옇게

582. 보이는

583. 문제

585. -

586. 원인:

589. 테두리는

590. 픽셀을

591. 기준으로

592. 양쪽으로

593. 늘어나기

594. 때문

595.
(100,

596. 100)

597.
100px,

598. 100px

599.
위치에

600. 그린

601. 박스

603. (99.5,

604. 99.5)

605.
0.5px

606.
1px

607.
0.5px

608.
1px

609. 테두리를

610. 가진

611.
100px,

612. 100px

613.
위치에

614. 그린

615. 박스

617. (99,

618. 99)

619.
안티앨리어싱이

620. 적용된

621. 테두리

622. 부분

623.
1px

624. 테두리를

625. 가진

626.
100px,

627. 100px

628.
위치에

629. 그린

630. 박스

632. -

633. 해결:

636. 0.5픽셀

637. 이동해서

638. 그리기

639.
(100,

640. 100)

641.
(100.5,

642. 100.5)

643.
1px

644. 테두리를

645. 가진

646.
100.5px,

647. 100.5px

648.
위치에

649. 그린

650. 박스

652. 라파엘의

653. 커스텀

654. 메서드를

655. 이용

656.
Raphael.fn.n_1pxBorderRect

657. =

658. function

659. (x,

660. y,

661. w,

662. h)

663. {

668. return

669. this.rect(x+0.5,

670. y+0.5,

671. w-1,

672. h-1);

673.
};

675.
var

676. rect

677. =

678. paper.n_1pxBorderRect(x,

679. y,

680. w,

681. h);

684. 아름다운

685. 투명

686. 그라데이션

687. 구현하기

688.
디자이너가

689. 생각한

690. 그라데이션

691.
개발자가

692. 만들어온

693. 그라데이션

695. -

696. 원인:

699. Raphael에서는

700. 마지막

701. 그래디언트

702. 스탑에만

705. 투명도를

706. 적용할

707. 수

708. 있음

709.
첫

710. 번째

711.
그래디언트

712. 스탑에는

713.
투명도

714. 적용

715. 안됨

718. -

719. 해결:

722. 다른

723. 그래디언트

724. 스탑에도

725. 투명도를

726. 줄

727. 수

728. 있도록

731. 코드

732. 수정했으나

733. 컨펌

734. 안됨

740. 그라데이션

741. 적용을

742. 위해

745. 별도의

746. 이미지를

747. 사용함

749. 툴팁

750. 구현하기

751.
-

752. 문제:

755. 차트

756. 영역을

757. 벗어나는

758. 툴팁이

759. 있음

760.
툴팁이

761.
주황색

762. 차트

763. 영역을

764. 벗어남

766. -

767. 해결:

770. 영역에

771. 맞춰

772. 툴팁의

773. 위치를

774. 바꿨으나

777. 툴팁에

778. 표현할

779. 값이

780. 아주

781. 큰

782. 경우가

783. 있어

784. 재수정

787. 툴팁은

788. 마크업으로

789. 구현함

790.
이

791. 툴팁은

792. div

793. 엘리먼트

795. 성능

796. 개선

797. 사례

798.
-

799. 문제:

802. 스택형

803. 막대차트에

804. 3개월

805. 치

806. 데이터

807. 표시

808. 요청

811. 한

812. 페이지에

813. 5개의

814. 차트를

815. 표현할

816. 수

817. 있도록

818. 요청

820. 각각

821. 하나의

822. Rect

823. 노드

824.
막대를

825. 그리는

826. 데

827. 필요한

828. 노드의

829. 개수

831.
=

832. 막대

833. 하나

834. 당

835. 총

836. 4개의

837. Rect

838. 노드

843. x

844. 한

845. 차트에

846. 91개의

847. 막대

852. x

853. 한

854. 페이지에

855. 총

856. 5개의

857. 차트

859.
=

860. 4

861. x

862. 91

863. x

864. 5

865. =

866. 1820개의

867. 노드

869. -

870. 해결:

873. 각각의

874. Rect로

875. 되어있던

876. 스택을

877. 한

878. 개의

879. Path로

880. 그림

881.
같은

882. 색의

883. 막대는

884. 한

885. 개의

886. Path

887. 노드

890. Path

891. 시작점

892.
Path

893. 끝점

894.
같은

895. 컬러의

896. 막대를

897. 한

898. 개의

899. Path

900. 노드로!

901. 컬러별로

902. 각각

903. 하나의

904. Path

905. 노드

906.
막대의

907. 개수가

908. 많아져도

909. 성능에

910. 큰

911. 영향

912. 없음

914. IE에서의

915. 텍스트

916. 안티앨리어싱

917.
-

918. 문제:

921. IE8

922. 이하,

923. VML로

924. 표현할

925. 때

926. 텍스트가

927. 뭉개져

928. 보임

929.
VML

930.
SVG

932. -

933. 원인:

936. Raphael은

937. VML로

938. 텍스트를

939. 표현할

940. 때,

943. VML의

944. TextPath

945. 노드를

946. 사용함.

950. TextPath

951. 노드는

952. 변형이

953. 쉽지만,

956. 작은

957. 폰트일

958. 경우

959. 안티앨리어싱

960. 때문에

961. 뭉개져보임.

966. -

967. 해결:

970. 안티앨리어싱

971. 제거하면

972. 글자가

973. 깨짐.

976. 라이브러리를

977. 수정

978. 시도했으나

979. 비효율적임.

983. 디자인측과

984. 협의해

985. 그대로

986. 유지하기로

987. 함.

989. -

990. 대안:

993. 텍스트를

994. 마크업으로

995. 구현하는

996. 방법.

997.
차트의

998. 텍스트는

999. 모두

1000.
div

1001. 엘리먼트

1003. -

1004. 대안:

1007. 축

1008. 레이블에

1009. 변함이

1010. 없다면

1011. 고정

1012. 이미지를

1013. 사용함.

1014.
차트의

1015. 배경은

1016.
이미지~!

1018. 차트를

1019. 재사용할

1020. 수

1021. 있을까?

1022.
서비스마다

1023. 차트의

1024. 형태와

1025. 디자인이

1026. 다름

1027.
원하는

1028. 인터랙션이

1029. 다름

1030.
차트를

1031. 보여주려는

1032. 디바이스가

1033. 다름

1034.
서비스별로

1035. 데이터셋이

1036. 다름

1039.
모든

1040. 서비스를

1041. 만족시킬

1042. 수는

1043. 없음!

1045. 그럼

1046. 어디까지

1047. 재사용할

1048. 수

1049. 있을까?

1050.
차트의

1051. 큼직한

1052. 형태는

1053. 같음

1058.
'데이터'로

1059. 차트를

1060. 뿌린다는

1061. 건

1062. 같음

1064. 그럼

1065. 어디까지

1066. 재사용할

1067. 수

1068. 있을까?

1069.
차트의

1070. 큼직한

1071. 형태는

1072. 같음

1076. -

1077. 바차트와

1078. 라인차트는

1079. 형태가

1080. 동일

1084. -

1085. 파이차트나

1086. 도넛차트도

1087. 같은

1088. 형태

1092. -

1093. 틱

1094. 계산이나

1095. 좌표,

1096. 각도

1097. 계산은

1098. 공유할

1099. 수

1100. 있음

1102.
'데이터'로

1103. 차트를

1104. 뿌린다는

1105. 건

1106. 같음

1110. -

1111. 차트

1112. 모듈과

1113. 데이터

1114. 모듈을

1115. 분리

1117. 라인차트와

1118. 바차트

1119.
차트

1120. 디자인이

1121. 어떻든

1122.
점이

1123. 그려지는

1124. 영역은

1125. 동일

1127. 라인차트와

1128. 바차트

1129.
(x,

1130. y)

1132. 라인차트와

1133. 바차트

1135. 라인차트와

1136. 바차트

1138. 라인차트와

1139. 바차트

1141. 좌표

1142. 계산,

1143.
그리는

1144. 역할,

1145.
데이터

1146. 처리를

1147. 각각

1148. 분리하자!

1150. 차트

1151. 구조

1152.
Brush

1154. +

1155. drawBaseline()

1156.
Chart

1158. +

1159. drawEachGrid()

1161. +

1162. drawEachPoint()

1164. -

1165. Brush

1167. -

1168. DataTable

1170. +

1171. draw()

1172.
DataTable

1174. +

1175. setData()

1177. 그리기

1178.
Brush

1179.
좌표

1180. 계산

1182. +

1183. drawBaseline()

1184.
Chart

1186. +

1187. drawEachGrid()

1189. +

1190. drawEachPoint()

1192. -

1193. Brush

1195. -

1196. DataTable

1198. +

1199. draw()

1200.
DataTable

1202. +

1203. setData()

1204.
데이터

1205. 처리

1207. 차트

1208. 구조:

1209. DataTable

1210.
모든

1211. 차트는

1212. 같은

1213. 형태의

1214. 데이터를

1215. 사용함

1216.
엑셀

1217. 형태로

1218. 데이터

1219. 정의

1224. [