Canvas Study : WeBaG( Web Based Graphic )
취지
스터디 맴버중에는 js라면 치를 떠는 사람도 많지만. ㅋ 웹에선 갈수록 중요한 언어가 되어가고 있죠. 특히 <canvas>와 함께, 2D와 3D, 벡터, 비트맵을 망라하는 그래픽 처리가 가능해지면서 정말 많은게 쏟아지고 있습니다. 웹 기반의 개발자들은 '그래픽'처리에 미숙하며, 지식도 전무합니다. 새로운 언어를 배울 필요없이 최신 트랜드에 한발 걸쳐서 웹으로 그래픽 처리를 어떻게 하는지 함 배워보자.. 가 취지가 되겠습니다. ㅋ 분위기가 되면 다루겠지만. 일단 3D가 포커스는 아닙니다. <canvas>나 svg를 통해 가능한것들? 정도입니다.
wbg 스터디는 크게 두 파트로 나눌 수 있을거 같습니다.
- wbg을 위한 사전 지식
- 수학
- wbg
스터디 전체를 12주정도(3달)로 친다면..
- 3주 정도를 HTML5와 DOM, Js core, 에 대해 살짝 간을 보고
- 1주 중고등학교때 수학(가능하다면) 공식을 한번 떠올려보고,
- 9주 를 wbg를 달립니다.
초반 3,1 주는 제가 진행하고, 9주를 두 파트정도씩 맞아서 하면 어떨까 싶내요.
첨부한 그림을 보면 스터디를 구상하면서 그린 마인드 맵이 있는데, 너무 넓어지는 것 같아서 두가지로 추렸습니다.
9주 코스!
<canvas>는 브라우저 상에 비트맵이든, 백터든, 3D든, 가리지 않고 그래픽을 랜더링하는 태그입니다. canvas로 다룰 수 있는게 무엇인지 맛만 보자... 가 주제가 됩니다.
Case 1
- [HTML5Rocks Canvas Tutorials] ( http://www.html5rocks.com/en/tutorials/#canvas)
Rocks은 HTML5와 관련된 상당히 질 좋은 튜토리얼을 제공하는 것으로 유명합니다. 아직 본건 없지만 canvas태그 관련 튜토리얼이 12개인데 그중에 추려서 하나씩 맞으면 어떨까 합니다. 주로 작년것은 실 사례중심, 구련법등이고 올해는 성능과 3D도 다루고 있내요.
Case 2
- 오렐리에서 나온 [HTML5 Canvas. native interactivity and animation for the web] ( http://shop.oreilly.com/product/0636920013327.do?green=7ac72ff8-05af-4b11-bb25-e68ec470ab58&cmp=af-mybuy-0636920013327.IP)
오렐리 책은.. 일단 원서입니다. 그리고 주제로 봐서 번역될 가능성이 별로 없습니다. 근데 PDF가 이미 있음. ㅋ 11챕터로 되어있고, 많은 곳은 한 챕터가 50페이지쯤 됩니다. 소개.. 추가기능.. 이딴 거 빼고 한 챕터씩 맞아서 돌아가면서 발재하면 어떨까요? 외부에 공개하는 '번역'이 아니니 부담없이 공부해와서 공유해주는 식.
둘중에 하나 어떠심??
우리가 다루려는건 이런것과 관련된 것들입니다. (IE에서 보지 마요.)
스터디 진행
사전 학습
- 첫주 : 브라우저 작동원리 & reflow, repaint. KIG발표자료 활용.
- 1: 현수
- 2: 지혜
- 3: 정옥
- 4: 길탁
- 5: 미영
- 6: 나.
