즐거운 6월입니다. 일전에 말씀드린대로 아이젝트 랩에서는 요즘 html5에 대한 관심이 너무나도 깊기 때문에.. 강의를 한번 써보기로 마음 먹었습니다! 물론 잘 쓸수나 있을 것이냐라는 엄청난 걱정이 물밀듯 앞서고 있긴 하지만.. 그래도 생판 처음부터 끝까지 제가 다 기획하고 만드는 건 아니니깐요 ^^
본 강의는 오레일리사의 인터넷 강의인 “HTML5 Mobile Web Development” 를 보며 필자가 배운 내용을 정리한 것입니다. 작년부터 국내에서 약간씩 이슈화된 HTML5와 관련되어 최근에는 책도 좀 나오고 관련 자료도 조금씩 보이는 추세이나 사실 가장 아쉬운 부분은 이러한 자료들이 HTML5의 엘리먼트(요소)들에 대한 설명이나 기술적인 부분에 있어서의 설명이었지, 이를 활용하여 무언가를 만드는 것에 대해서는 다뤄진 곳이 적었다는 것입니다. 오레일리사의 강의가 내용이 좋긴 한데 영어고 유료고.. 국내에도 물론 유료강의는 존재하긴 하였지만요.. 세미나도 있었고.. 근데 왜 인터넷엔 강의가 없을까요.. ㅜㅜ
저는 누구나 볼 수 있고 따라할 수 있는 강의를 만들고 싶었습니다. 물론 강의를 연재해본 적 조차 없는 저이지만, 오레일리사의 강의를 보며 저는HTML5를 사용해서 웹앱을 만들어 보며 강의를 작성할 생각입니다. 물론 이 강의를 제대로 다 따라하신다면 대부분의 html5의 기술을 직접 만들고 습득하실 수 있을 것입니다.(솔직히 장담은 못드립니다 ㅜㅜ 저도 아직 강의를 듣고 있어서요..;)
그럼 왜 웹앱을 만드느냐?
대표적인 모바일 기기인 아이폰, 아이패드, 안드로이드에서 돌아가는 어플을 HTML5의 새로운 기술을 사용해서 웹 어플리케이션(웹앱)을 만들 예정인데 왜 웹앱을 만드느냐? 일단 HTML5기술이 제 개인적인 소견이지만 주된 타겟이 모바일과 RIA인 것 같습니다. 이에 지금 제가 참조로 하는 오레일리 사의 강의도 그렇지만 모바일에 초점을 두고 있고, 최소한 안드로이드와 ios의 사파리등 에서는 html5의 기술을 대부분 지원하고 있습니다.
표1 - 스마트폰 버전별 HTML5 지원요소
위의 표대로 사실상 모바일 쪽에서는 아이폰과 안드로이드가 HTML5의 주요 기능을 지원하고 있는 상황입니다.. 특히, HTML5는 WebKit과 약간 민감한 관계가 있는데, Webkit에 CSS3의 많은 기능들이 들어가있기 때문에 그렇지 않나 싶습니다. 또한 지금 html5를 좀 밀고 있는 애플의 브라우저인 사파리 역시 웹킷엔진을 사용하구요. 통계들을 잘 살펴보면 WebKit 엔진을 이용한 브라우저들(표 2)은 HTML5를 나름대로 원활하게 지원하고 있음을 알 수 있습니다.
표2 - 모바일 브라우저의 레이아웃 엔진
주요 스마트 폰의 브라우저인 WebOS Browser, Android Browser, Safari Browser 가 Webkit을 사용하고 있는 실정에서 사실상 웹앱을 제작하는데 아직까지는 웹킷이 대세라고 할 수 있습니다. 스마트폰 뿐만 아니라 Webkit은 이미 Safari와 Chrome에서 사용중에 있기 때문에 데스크탑에서 사용하기도 용이합니다. 물론 웹킷을 사용하지 않는 브라우저들에게도 대응방안은 존재합니다.
하지만 웹킷이 html5의 다는 아닙니다. 아직 html5는 제정되지 않았을 뿐만 아니라 브라우저마다 지원하는 속성도 천차만별이고.. 예전의 html기술이 그러했듯이 계속해서 추가/삭제를 번복하고 있습니다. 여기서 우리가 주목할 것은 어쨌든간에 html5는 미래를 바라보고 나아가고 있고, 우리는 그러한 미래지향적인 기술을 숙지함과 동시에 미래의 웹을 만들 수 있다는 점입니다.
html5를 가지고 무엇을 해야 할까?
그럼 html5를 가지고 미래의 웹을 만들기 위해서는 무얼 해야 할까요? 이건 제 개인적인 생각이지만 보다 더 편리하고 윤택한 삶을 위해 삶과 기술의 융합을 추구해야 한다는 것입니다. 사실 스마트폰의 앱들은 공간의 제약을 최소화 하고 스마트폰의 다양한 센서들과 하드웨어를 활용해서 새로운 소프트웨어를 통한 삶을 만들어 왔습니다. 이러한 앱의 취지 이상으로 html5와 이를 사용한 윕 앱은 보다 더 포괄적으로 하드웨어를 유지해야 하고 또한 모바일의 영역을 넘어서 다양한 디바이스 안에서, 보다 더 많은 부분에서 인간의 삶을 발전시키도록 할 것입니다.
html은 누구나 만들 수 있습니다. 마찬가지로 html5도 누구나 만들 수 있습니다. 컴파일되면 디스어셈블하지 않으면 소스를 볼 수 없는 여타 컴파일 언어와는 다릅니다. 누구나가 사용할 수 있는 기술로, 그 만큼 세계 각지의 유수한 웹 기술자들이 모여서 만드는 것이 html5입니다. 크로스 브라우징, 크로스 OS등 플렛폼에 극한되지 않고 월드 와이드 웹 안에서 표준이 될 수 있는 기술이 html5입니다.
이에 우리 개발자 혹은 디자이너, 기획자들은 이제 단순히 컨텐츠를 일차원적으로 제공하거나, Web 2.0 의 정신대로 참여,개방,공유를 접목시킨다던가, SNS를 연동시키거나 혹은 만들거나. 이러한 서비스를 한층 더 뛰어넘어서 인간의 삶에 들어오게 될 것입니다. html5의 시대는 여타 혁명과는 더 크게 우리들이 직접 실제 삶에서 누구나가 느낄 수 있을 것입니다. 스마트폰과 RIA, SNS등이 웹을 살아있게 만들었듯이, 디바이스를 끼고 웹은 이제 똑똑한, 스마트한 웹이 되지 않을까라고 조심스레 예측해 봅니다.
우리는 미래의 웹을 준비한다.
여하튼 이러한 것은 제 생각에 불과하지만.. 97년부터 웹을 개발하면서 제가 봐 왔고 생각해 온 바가 이렇습니다. 미래의 웹을 준비한다는 생각으로 본 강의를 접근하셨으면 좋겠습니다. 웹앱 이외에도 일반적인 html5의 기능들이 본 강의에는 포함되어 있으며, 이를 어떻게 가공하고 디바이스에 적용하느냐는 이제 우리들의 몫입니다. 물론 아직도 표준화 제정에 힘쓰고 있는 html5이지만 보다 더 멋진 기능들로 무장하고 나올 것입니다. 다양한 html5의 기능들을 살펴보면서, 스마트폰 앱이 그랬던 것처럼 앱을 뛰어넘는 웹앱을 만들 수 있기를 바랍니다.
다시한번 말씀드리지만, 본 강의는 오레일리사의 강의를 듣고 정리한 내용입니다. 커리큘럼은 저의 의지와는 무관하며.. 저 또한 지금 이 글을 쓰는 입장에서는 html5는 걸음마 수준입니다. 하지만 개인적으로는 오랜 기간동안 웹을 접해왔기 때문에 보다 더 깊게 이해를 할 수 있다고 나름(?) 판단하고 이 강의(자꾸 강의라 하니 조금 민망하긴 합니다..;)를 작성할 것입니다. 잘못된 부분이 있으면 댓글 혹은 [email protected] 이나 제가 운영하는 블로그나 페북이나… 저의 소통의 수단은 와장창 열려있기 때문에 어디든 가차없이 말씀주시면 다시한번 심사숙고해서 정정하도록 하겠습니다. 웹은 제가 만들어 가는 것이 아니라 우리가 만들어 가는 것입니다. 부디 철없는 제게 많은 도움의 말씀을 주시고 용기를 주시어 한국, 그리고 세계에서 웹의 미래에 한 인생 걸어보고자 하는 저를 도와주셨으면 좋겠습니다.
필자는 현재 직장을 다니고 있어서 강의가 와글와글 쏟아지지는 않을 것입니다. 제 계획은 한주에 한 챕터인데 글쎄요….. 최소한 한주에 새로운 강의 한두개 정도는 보실 수 있을 것입니다.
약속 지킬 수 있도록 노력해 보겠습니다 ^^ 감사합니다.
p.s
참고로 강의 구성에 대한 피드백은 정말정말정말정말레알환영입니다! 제가 뭐 강의를 써본 적이 있어야지 말입니다.. ㅜㅜ 또한 이 강의는 어디든 퍼가셔도 좋은데 왠만하면 출처를 표기해 주기면 감사하겠습니다. (양심에 맡기겠습니다.)
