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

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. 상위기획

85. 상세기획

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. 생각한

691. 개발자가

692. 만들어온

695. -

696. 원인:

699. Raphael에서는

700. 마지막

701. 그래디언트

702. 스탑에만

705. 투명도를

706. 적용할

707. 수

708. 있음

709. 첫

710. 번째

712. 스탑에는

713. 투명도

714. 적용

715. 안됨

718. -

719. 해결:

722. 다른

724. 스탑에도

725. 투명도를

726. 줄

727. 수

728. 있도록

731. 코드

732. 수정했으나

733. 컨펌

734. 안됨

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. 경우

960. 때문에

961. 뭉개져보임.

966. -

967. 해결:

971. 제거하면

972. 글자가

973. 깨짐.

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. 동일

1128. 바차트

1129. (x,

1130. y)

1133. 바차트

1136. 바차트

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. [

1231. [

1232. '월/참석자',

1236. '남',

1243. '여'

1244. ],

1251. [

1252. '2012/06',

1256. 165,

1263. 938

1265. ],

1266. Row

1273. [

1274. '2012/07',

1278. 135,

1284. 1120

1285. ]

1288. ]

1289. Column

1292. [

1299. [

1300. '월/참석자',

1304. '남',

1311. '여'

1312. ],

1319. [

1320. '2012/06',

1324. 165,

1331. 938

1333. ],

1340. [

1341. '2012/07',

1345. 135,

1351. 1120

1352. ]

1355. ]

1356. 1.

1357. 가독성

1358. 좋음

1359. 2.

1360. 데이터를

1361. 먼저

1362. 정의,

1367. 차트

1368. 종류에

1369. 관계

1370. 없이

1371. 데이터의

1372. 기준을

1373. 잡을

1374. 수

1375. 있음

1377. 차트

1378. 구조:

1379. Chart

1380. Core

1381. Chart

1382. LineBarChart

1383. TableChart

1384. PieChart

1385. StackBarChart

1386. 데이터

1387. 테이블로부터

1388. 차트

1389. 영역의

1390. 좌표,

1391. 각도,

1392. 틱

1393. 등을

1394. '계산'

1395. 차트를

1396. '그리는

1397. 것'에

1398. 관여하지

1399. 않음

1401. 차트

1402. 구조:

1403. Brush

1404. Brush

1405. LineBrush

1406. CanvasLineBrush

1407. BarBrush

1408. CurveLineBrush

1409. Chart에서

1410. 전달해준

1411. 좌표로

1412. 그림을

1413. 그리는

1414. 역할

1415. 그래픽

1416. 라이브러리에

1417. 대한

1418. 제한

1419. 없음

1420. 이벤트

1421. 처리

1422. 등의

1423. 작업도

1424. 담당함

1426. 라인

1427. 브러시

1428. 인터페이스

1429. var

1430. LineBrush

1431. =

1432. {

1439. initialize:

1440. function

1441. (data)

1442. {},

1449. drawBaseline:

1450. function

1451. (data)

1452. {},

1459. drawEachGridline:

1460. function

1461. (data)

1462. {},

1469. drawEachLabel:

1470. function

1471. (data)

1472. {},

1479. drawEachCell:

1480. function

1481. (data)

1482. {

1495. //

1496. data.rIdx

1510. //

1511. data.cIdx

1524. //

1525. data.x

1538. //

1539. data.y

1552. //

1553. data.value

1560. }

1561. };

1563. 라인

1564. 차트

1565. 그리기

1566. var

1567. dataTable

1568. =

1569. new

1570. DataTable();

1571. dataTable.setDataTable(

1572. [

1573. ...

1574. ]

1575. );

1577. var

1578. brush

1579. =

1580. new

1581. LineBrush();

1583. var

1584. chart

1585. =

1586. new

1587. LineBarChart();

1588. chart.setBrush(

1589. brush

1590. );

1591. chart.setDataTable(

1592. dataTable

1593. );

1595. chart.draw();

1597. 바

1598. 차트

1599. 그리기

1600. var

1601. dataTable

1602. =

1603. new

1604. DataTable();

1605. dataTable.setDataTable(

1606. [

1607. ...

1608. ]

1609. );

1611. //

1612. var

1613. brush

1614. =

1615. new

1616. LineBrush();

1617. var

1618. brush

1619. =

1620. new

1621. BarBrush();

1623. var

1624. chart

1625. =

1626. new

1627. LineBarChart();

1628. chart.setBrush(

1629. brush

1630. );

1631. chart.setDataTable(

1632. dataTable

1633. );

1635. chart.draw();

1637. 같은

1638. 차트코어,

1639. 같은

1640. 데이터,

1641. 다른

1642. 브러시

1644. 회고

1646. 이런

1647. 걸

1648. 알았더라면

1649. 좋았을

1650. 텐데.

1651. 이런

1652. 건

1653. 좋았다.

1654. 다음엔

1655. 이렇게

1656. 하자.

1659. 차트로

1660. 표현할

1661. 데이터셋을

1662. 미리

1663. 파악하자.

1664. -

1665. 헤더에

1666. 아주

1667. 긴

1668. 문자열이

1669. 들어가진

1670. 않는가?

1672. -

1673. 0보다

1674. 작은

1675. 데이터가

1676. 있는가?

1678. -

1679. 값이

1680. 굉장히

1681. 크진

1682. 않은가?

1683. -

1684. 소수점이

1685. 있나?

1686. -

1687. 샘플

1688. 주세요!!

1691. 학습

1692. 테스트

1693. 방식이

1694. 효과적이었다.

1696. 익힐

1697. 때

1698. 학습

1699. 테스트

1700. 작성

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

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

1706. 코어와

1707. 브러시,

1708. 데이터를

1709. 나눈

1710. 것은

1711. 좋은

1712. 선택이었다.

1713. 디자인이

1714. 다른

1715. 라인/바

1716. 차트

1717. 개발

1718. 요청

1720. 모바일용

1721. 캔버스

1722. 파이차트

1723. 개발

1724. 요청

1726. --

1727. 다른

1728. 팀원이

1729. 브러시만

1730. 개발,

1731. 빠르게

1732. 대응

1738. 지금의

1739. 차트에

1740. 집중한다.

1741. 필요하지

1742. 않은

1743. 확장을

1744. 미리

1745. 고민하지

1746. 말자.

1748. 모든

1749. 서비스에

1750. 적용하거나,

1751. 모든

1752. 디자이너와

1753. 기획자를

1754. 만족시킬

1755. 수는

1756. 없다.

1758. 요구

1759. 사항과

1760. 표현

1761. 범위를

1762. 정확히

1763. 파악해서,

1764. 최선의

1765. 방법을

1766. 찾아내는

1767. 것이

1768. 가장

1769. 좋겠다.

1771. 고맙습니다.

1772. 라파엘

1773. 페이스북

1774. 그룹

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

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

More Related Content

More from NAVER D2 (20)

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