'html5'에 해당되는 글 28건

  1. 2012/01/27 "학생개발자" 로 들어가기 앞선 생각
  2. 2011/12/20 CSS3로 3D 효과 사용하기
  3. 2011/12/14 HTML5 Notifications 사용하기
  4. 2011/12/08 HTML5 개발자를 위한 UI전문 개발 툴 : Kendo UI
  5. 2011/12/07 HTML5 게임을 빠르게 만들 수 있는 제작툴 추천 3가지
  6. 2011/12/06 HTML5를 배우고 싶다면 놓쳐서는 안될 15가지의 유용한 사이트(CSS,코딩 위주)
  7. 2011/11/24 HTML5로 전향하려고 하는 개발자들, 무엇을 준비해야 하는가. (1)
  8. 2011/11/15 html5가 도래하면 개발자들은 어떻게 해야 경쟁력을 갖출까요?
  9. 2011/11/15 모여라! WebGL 데모들!
  10. 2011/11/15 플래시 모바일 버전의 중단이 의미하는 것들
  11. 2011/11/05 커뮤니티 관리하기
  12. 2011/07/22 웹소켓(WebSocket) 시작하기(강의,번역)
  13. 2011/07/18 여기 38개의 HTML5로 디자인된 사이트들이 여러분의 영감을 돋구어줄 것입니다.(번역)
  14. 2011/07/18 Adobe Edge 를 아시나요? : HTML5 애니메이션 개발 툴(번역)
  15. 2011/07/13 판도라 라디오, 소셜 리디자인을 위해 플래시에서 HTML5로 교체(번역)
  16. 2011/07/08 HTML5 Canvas를 활용하는 유용한 사이트 세가지(번역)
  17. 2011/07/07 외국의 어느 웹 개발자가 밝히는 HTML5&웹개발자로써의 로드맵(번역 자료) (1)
  18. 2011/06/22 iOS 웹앱 개발 시작하기(번역)
  19. 2011/06/21 당신의 사이트를 html5 모바일 사이트로 바꾸세요!
  20. 2011/06/21 멀티터치 웹 브라우저에서의 개발
  21. 2011/05/26 웹앱을 만들며 배우는 HTML5 - 강의목차(예정) (2)
  22. 2011/05/25 HTML5 강의 연재예정
  23. 2011/01/15 6개의 HTML5로 잘 만들어진 웹 게임들
  24. 2010/12/01 정식 출시된 아이패드를 하루동안 써보고.(아이패드 어플 간략리뷰) (1)
  25. 2010/09/24 드림위버로 HTML5 개발하기.
  26. 2010/09/20 HTML 5 저작 가능한 툴 6개.(번역) (4)
  27. 2010/09/20 HTML5, 과연 기회가 될 것인가? (2)
  28. 2010/07/23 HTML 5 브라우저별 호환 비교&샘플 사이트 (2)

실무에서 웹 프로그래머로 활동한지 올해로 7년차를 맞이하였다. 그동안의 개발자로써 삶을 돌이켜보면 정말로 다양한 경험을 한 것 같다. 물론 병역특례다, 사업이다.. 이것저것 원하든 원치않든 나는 내 삶을 지속적으로 내가 원하는 방향으로 맞춰갔고, 그러한 수 없는 고찰속에서 나는 우선은 내가 하고싶은 삶보다는 내가 잘할 수 있는 삶으로 방향을 맞추기로 하였고 3년간의 병특 생활 속에서 빡센 개발과 함께 나는 어느정도 웹 프로그래머로써의 실력을 다질 수 있었다.

 
사실 삶이란 것이 언제나 완벽할 수는 없다. 나 역시 마찬가지로, 이 블로그에서 수없이 언급했지만 난 처음에는 그저 인터넷이 좋았고, html과 자바스크립트를 통한 웹 디자인이 좋았는데 학창 시절에는 "웹 디자이너" 라는 자체는 좋은 학업으로 이어지기가 힘들었다. 홈페이지 경진대회는 몇차례 수상을 했지만 학생인 당시 신분으로써 내가 컴퓨터와 대학 진학을 목표로 하기 위해서는 프로그래밍을 해야했다. 그러다 보니 초등학교 때부터 "정보올림피아드" 라는것과 인연을 맺게 되었다. (2010/06/30 - 컴퓨터, 그리고 정보올림피아드의 추억

뭐 과거 회상은 아주 많이 해봤기 때문에.. 여튼 줏대가 없는지는 몰라도 디자이너도 포기했고, 20살부터 시작한 닷넷 프로그래밍도 병특을 시작하고 1년만에 완전히 자바 프로그래밍으로 돌아섰다. 항상 내가 추구했던 것은 "방향성" 이었는데, 솔직히 나는 프로그래밍에 있어 다양한 라이브러리를 사용한 경험은 있었는데 그러고 나니 내 정체성에 큰 혼란이 빚어졌다. 웹만 좋아하던 내가 GW베이직이니, C,C++이니, 닷넷이니 Direct X니..

솔직히 13살 때부터 10년간은 억지반으로 이런 언어들과 라이브러리를 접했던 것 같다. 그러다 23살때 병특을 시작하고 나서 순전히 웹의 바닥부터 기초를 쌓겠다고 생각하고 들어간 병특의 세계, 첫 회사인 에이전시도 하고 별별 웹 관련 일을 다하던 회사에서 나는 웹과 관련된 정말 다양한 경험을 하게 되었다. 물론 회사 대우에 불만을 품고 이직하긴 했지만 그곳에서 배운 다양한 경험들은 아직도 꽤나 유용하게 사용하고 있다. 

슈퍼 웹 개발자.
뭐 이러저러한 경험은 재쳐두고.. 어쨋든 앞으로 한달 정도 후면 대학교로 돌아가게 된다. 기대반, 걱정반인 이 학생 생활에서 나는 어떤 경험에 중점을 두고 나의 3년을 보내야할까? 우선 3년 후, 현실적인 기반에선 나는 취직을 해야한다. 남들보다 한 2년 정도 늦었겠지만, 늦은 만큼 나는 보다 더 확실한 결정을 해야한다. 병특을 처음 시작했을 때 나는 내 진로에 대해 고민하다가 "IT 컨설턴트" 라는 진로를 희망하였는데, 지금의 내 희망 진로는 "슈퍼웹개발자" 이다. 보다 더 구체적으로 말하면 "어떠한 아이디어던 빠르게 프로토타입을 생산할 수 있는 웹 개발자" 왜 이런 진로를 결정하게 되었냐면 나는 일단 웹과 관련되서는 어떠한 기술이라도 정말로 흥미가 깊고, 이러한 기술들을 요리조리 활용해서 서비스를 기획하는 것을 좋아한다. 그리고 지금까지의 내 경험은 디자인과 개발을 중점적으로 키워왔다. 그렇기에 기획,디자인,프로그래밍 의 모든 요소를 섭렵하려고 하는 것이다.

뭐 그래 의도는 좋다. 그래도 자만하지는 않는다. 그동안 개발하면서 느꼈는데 내가 아무리 실력이 좋고 경력이 좋던간에 기술은 정말로 빠르게 발전하고 있다. 발빠르게 기술을 접하지 않으면 기회를 잃어버리는 것이고, 그 만큼 경쟁력도 약해진다. 물론 웹에서도 필요한 기초적인 기술이 있지만 그것들은 어느정도 삽질의 선에서 마무리할 수 있다. 결국 나는 아무것도 모르던 풋내기 시절에는 상당히 자기만족에 빠져 "자만" 하고 있었다면, 어느정도 알고 난 지금 입장에서는 정말로 "겸손" 해야겠다는 생각이 간절하다.

해방
중견기업으로 전직하고 나서 나는 사실 뼈대부터 새로 만들어 나가야 하는 새로운 개발은 거의 해본적이 없다. 그저 기존의 회사 내 프레임워크를 사용해(결국 copy-and-paste지만..) 뼈대만 붙히고 몇몇 수정을 입히는 식이었지. 그야말로 정적인 일들. 재미는 없지만 고정적인 일들. 그런 일들에서 나는 한달 후에 해방된다. 해방이라는 의미를 붙힌 까닭은 아무리 정적인 일이지만 "회사" 라는 곳에 내가 존재하는 일일 8~9시간은 회사에만 투자해야 하는 시간이기 때문이다. 새로운 기술을 배우고 싶어도 회사의 방향과 맞지 않으면 포기할 수 밖에 없다. 

이렇게 나만의 "해방"을 앞두고 있다보니 새로운 시각도 눈에 틔인다. 특히 신기술에 대한 배움의 욕망. 내 개인적인 기술의 트랜드는 2009년에는 닷넷과 자바, 2010년에는 플랙스와 RIA, 2011년에는 html5와 모바일 UX 이런 식으로 발전해왔다. 그리고 지금, html5한국 사용자모임을 운영하면서 느낀 것은 하이브리드 앱 개발을 하고싶다는 것이다. 사실 2009년 말에 나는 아이폰 앱 개발을 하고 싶었으나 당시에는 너무나도 수요가 폭발적으로 증가하는 추세였고, 아마 내가 병특이 끝날 쯔음 하면 앱 개발자의 거품이 점점 가라앉을 것이다 라는 생각에 앱 개발을 포기하였다. 그리고 지금, 내게 "하이브리드 앱" 개발이라는 새로운 배움의 물꼬가 트였다.

하이브리드 앱과 웹 서비스
하이브리드 앱이라.. 2010년 나는 모 은행의 아이폰 앱의 수정을 맡은 적이 있다. 당시 나는 앱 개발을 해본 적도 없는데 어떻게 하지? 라고 생각했는데 실은 껍데기만 앱이고 속은 웹이었다. 웹 화면에 CSS만 잘 바꿔서 앱처럼 보이게 만든 것이지.. 그때 "기능성 앱이 아닌 정보제공성 앱은 이런식으로 만드는 것이 공수가 훨씬 적게 들 것이다" 라는 생각이 들었고, 뭐 지금도 대세가 되고 있지만 앱 개발에 있어서 하이브리드 앱은 Cross Platform을 실현할 수 있는 좋은 수단이 될 것이란 생각이 들었다.

언젠가는 웹의 기능도 앱을 따라잡을 것이다. 그날이 점차 머지 않을 것이다. 아마 앞으로의 트랜드는 그렇지 않을까.. 아이폰과 안드로이드를 추격하기 위한 후발OS나 플랫폼들의 경쟁과 아이폰과 안드로이드의 WebKit의 폭발적인 발전.. 이에 따른 HTML5와 자바스크립트 엔진의 폭발적 증가. 비단 웹 브라우저 뿐만 아니라 하이브리드 앱에서까지. 어차피 WebKit같은걸 사용할것이기 때문에..

사실 좀 하이브리드 앱 개발은 일반 앱 개발자들이 보기에는 싸보일(?) 수도 있다. 그들 눈에는 html이나 자바스크립트가 언어로도 안보이겠지만 내가 간단히 본 해외의 프로그래밍 시장에서는 이미 자바스크립트는 엄청난 대세이다. 이미 뭐 기술도 Three.js phonegap sencha touch jquery mobile등등.. 수 없이 나오고 있는게 iOS의 프레임워크도 아니오, 안드로이드의 프레임워크도 아니오, 웹을 기반으로 한 자바스크립트 모듈이다.

영어의 중요성
난 솔직히 영어를 잘 못한다. 그저 읽고 한 절반 이상만 해독될 뿐이지, 기초적인 문법도 약하고 어휘력도 부족하다. 근데 영어는 그냥 중요성만 생각하고 있었지, 실질적인 영어 공부로써의 투자는 해본 적이 적다. 기껏해야 주말마다 다니는 영국문화원 어학원이 다인 듯 하다. 


그런데 내가 영어의 중요성을 심각하게 인식하게 된 것은 html5 사용자 모임을 만들면서부터이다. html5 관련 자료가 국내에는 사실 많이 부족하기 때문에 해외의 자료들을 스크랩 하기 시작했는데 이게 생각보다 사람들의 관심이 컸다. 그래서 html5korea.co.kr 을 만들었는데 그곳에서 나는 번역을 시작했다. 해외 사이트를 뒤져보니 html5 관련 강좌도 많고 정보도 많다. 그런데 막상 번역을 해보니깐 정말 문장이.. 이게 문자만 한글이지, 도통 말이 되지 않는다.

이러한 상황이 내게 시사한 것은 영어를 통한 정보 파급력은 무시할 수 없다는 것과 기술을 익히고 트랜드보다 앞서기 위해서는 결국 필요한 것이 영어라는 것이다. 개인적인 욕심으로 나는 향후 미국의 IT기업에서 일해보고 싶은 생각이 있는데 영어가 안되면 이 꿈은 단 1%도 실행 불가능하다. 마찬가지로, 영어를 못하면 html5korea에서 html5에 관심있는 사람들에게 정보를 공유하겠다는 내 생각도 터무니없는 것에 불과하다.

Conclusion
이로써 학생개발자로 돌아가기 앞서 나의 정체성 확립은 끝이 났다. 결국 하이브리드 앱과 영어, 그리고 학업이다. 사실 따지고 보면 이만큼 심플한 것이 어디있겠는가.. 내가 좋아하는 개발을 하면서 용돈벌이도 하고, 좋아하는 프로그래밍 공부가 결국 학업과 연결되고. 하기싫은 영어지만 어쨋든 하고 나면 내가 습득하는 트랜드에 있어서 큰 도움이 되고 말이다. 문제는 말뿐만이 아닌 실천이 되야 한다. 여태껏 해온 나의 망상을 버리고, 이제는 학생 개발자로써 보다 내가 하고 싶은 것에 대한 공부와 연구에 집중하고 나아갈 수 있기를 바래본다. 
크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 메튜장

트랙백 주소 http://izect.kr/trackback/687 관련글 쓰기

댓글을 달아 주세요



시작하며

오랬동안 PC의 프로그램에서만 존재해 왔던 3D가 최근 출시되고 있는 고성능의 GPU가 탑제된 스마트폰에 힘입어 이젠 모바일 화면에서도 3D를 볼 수 있게 되었습니다.

일반적으로 3D는 주로 게임이나 고급 UI에서만 사용되었습니다. 특히 UI에서의 3D는 WPF나 실버라이트에서 컴포넌트에 3D효과를 주기 전까지는 효과적이지 않은 방법이라고 여겨져 왔습니다. 모든 컨트롤을 3D화 하는것은 어려운 일이기 때문입니다.

2009년 3월, CSS 3D Transform 모델 초안이 발표되었습니다. 여기서 개발자들에게 보다 더 흥미로운 웹 제작을 만들기 위해 DOM 요소들에 3D 원근법(perspective transformations)을 허용하였습니다. 

CSS 를 통한 3D Transform의 초안 작업은 CSS 2D Transform 모델에서 이론적으로만 소개된 원근(perspective) , 회전(rotate) , 그리고 3DTransform의 변형 같은 특이한 속성들의 확장입니다. 예전에는 그렇게 쉽게 3D 로 인터페이스를 만들 수 없었지만, CSS 3D 초안 작업에서는 3D로의 진입 장벽을 낮춰왔습니다. 이로써 더 이상 3D 요소들을 만드는 데에 머리 터지는 수학적인 연산을 사용하지 않아도 되게 되었습니다.

주목할 부분은 CSS 3D 는 "개발자"들을 위해 만들어졌습니다. 이 말은 웹 어플리케이션에 초점을 두고 3D 시각효과를 도입하는데 도움을 주기 위해 만들어졌다는 것입니다. 즉 게임같은 전반적인 3D 세상을 위해서 만들어 진 것은 아니라는 것입니다.

브라우저 호환 및 하드웨어 가속

2010년 9월, 사파리와 크롬은 CSS 3D 를 지원하기 시작했습니다. 하지만 이는 단지 지원일 뿐, 3D 랜더링이 가능하다는 것을 의미하지는 않습니다. DOM 요소에 기초한 3D는 매우 많은 연산이 필요하므로 브라우저 제공 업체들은 브라우저가 느려지게 하자니 GPU의 가속을 받는 편이 좋겠다는 결정을 내렸습니다. 참고로 GPU는 아직 모든 플렛폼에 적용되지 않았습니다.

3D 기능 감지

웹 페이지에서 3D 지원이 가능한지를 바로 먼저 확인하지 않는 편이 좋습니다. 개발자들은 modernizr같은 툴을 통해 브라우저의 특징과 능력을 감지하는데 사용합니다만 3D 지원을 감지하는 동안엔 하드웨어 가속을 검출할 수 없으며, 사실 하드웨어 가속 검출이 우리에게는 가장 중요한 키 포인트입니다.

간단한 예제

일단 다른 설명은 제쳐두고 예제를 통해 CSS 3D를 배워보겠습니다. 아래의 <div>와 <iframe>에 회전을 적용해 보도록 하죠.

상위 DOM요소인 <div>에 우선 Perspective 를 정의합니다. 

<div style="-webkit-perspective: 800; perspective: 800; margin: 100px 0 0 50px">

Perspective 는 어느 정도의 깊이로 3D를 랜더링 할것인지 정의하기 떄문에 상당히 중요합니다. 그 속성값은 한 1-1000 가 가장 괜찮은 효과를 보여주니 1000 보다 적은게 좋겠습니다.

그리고 div 테그 아래 iframe 을 추가하고 Y와 Z축으로 30도의 회전을 줍니다.

<iframe src="http://www.html5rocks.com/" style="-webkit-transform: rotate3d(0, 1, 1, 30deg)"></iframe>

짠! 이렇게 나왔습니다. 웹페이지 내의 화면과 스크롤바 등 기타 모든 요소가 잘 작동합니다. 하지만 만약 여러분의 브라우저가 3D 를 지원하지 않는다면 위의 iframe은 아무런 변화도 없을 것입니다. 또한 3D를 지원하지만 하드웨어 가속을 받지 못한다면 좀 이상하게 보일 수도 있습니다.

애니메이션

CSS3의 3D 를 사용함으로써 제가 느끼는 가장 좋은 장점은 CSS로 여러 변환 효과를 사용함으로써 애니메이션이 가능하고, 이를 통해 웹 페이지가 예쁘게 보인다는 것입니다. 이러한 애니메이션과 변환은 CSS로 쉽게 정의할 수 있습니다. 3D 적용도 마찬가지이지요.

3D효과에서 애니메이션 기능을 주는 것 또한 쉽습니다. 그냥 단순히 transition을 스타일에 정의하고 transform 효과를 통해 시간 간격을 주고 애니메이션 함수를 적용해주면 됩니다. 그러면 "transform" 효과로 애니메이션이 동작하게 됩니다.

이전 예제를 인라인 스타일로 다시 만들어보겠습니다. 새롭게 만들고 또한 :hover 셀렉터의 특징을 취해보겠습니다. :hover 를 사용하면 변형 효과는 마우스가 엘리먼트에 올라갔을 시작하게 됩니다. 꽤 괜찮은 방법이죠!

정리하며

위에 제가 설명한 내용은 꽤 간단하면서도 강력한 DOM 요소에 작용하는 효과들입니다. CSS 3D 변형을 사용해서 말이죠. 그리고, 앞으로도 제가 설명드릴 더 많은 효과들이 남아있다는 것을 기억해주세요!


원문 : 3D and CSS
번역 : matthew.chang@me.com

 

크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 메튜장
 TAG 3d, CSS3, css33d, css3d, HTML5

트랙백 주소 http://izect.kr/trackback/684 관련글 쓰기

댓글을 달아 주세요


시작하며

알림(Notifications) API 는 유저에게 어떠한 이벤트를 통보해 주는 역할을 합니다. 새 메일, 새 트윗 혹은 일정 같은 직접 확인해야 하는 이벤트나 사용자가 간과하지 말고 주목했으면 하는 어떠한 상호작용을 통보해 주는 역할입니다. API에 대한 스펙 초안이 정의되어 있긴 하지만 아직은 표준화 되지 않았습니다.

하지만 아래 몇가지 간단한 예제를 통해 단 몇 분 만에 간단히 알림 API를 체험해 보실 수 있을 것입니다.

1단계 : 우선, 알림 API가 지원되는 여부를 확인해 보세요.

우리는 우선 webkitNotifications 이 브라우저에서 지원되는지 확인해 봐야 합니다. webkitNotifications 는 API스펙 초안의 한 부분이지만 향후에는 아마 notifications() 함수로 대처될 것이라 생각됩니다.

// 통보기능(Notifications API)지원여부 확인 // 'window'는 생략해도 됩니다. if (window.webkitNotifications) { console.log("알림 기능을 지원합니다!"); } else { console.log("해당 브라우저/OS는 아직 알림 API를 지원하지 않습니다.");
}

2단계 : 알림 만들기

알림에는 알려질 컨텐츠에 따라 정적 텍스트와 HTML의 두 개의 유형으로 나뉩니다. 만약 여러분의 어플리케이션이 이 두개의 타입을 모두 사용하여 클라이언트에 통보한다면 함수에서 옵션값으로 구분하여 사용 가능할 것입니다.

function createNotificationInstance(options) { if (options.notificationType == 'simple') { return window.webkitNotifications.createNotification( 'icon.png', '알림 제목', '알림 내용...'); } else if (options.notificationType == 'html') { return window.webkitNotifications.createHTMLNotification('http://someurl.com'); } }

3단계: 사용자가 웹 사이트에서 알림 기능을 허용하도록 합니다.

사용자가 수동으로 웹 사이트에 알림을 표시하는 권한을 주지 않은 경우, 위의 자바스크립트에서 언급한 생성자는 보안 오류가 발생합니다.

예외사항을 다루기 위해서는 try-catch문을 사용하면 되지만, 또한 checkPermission 이라는 함수도 비슷한 기능을 합니다.

document.querySelector('#show_button').addEventListener('click', function() { if (window.webkitNotifications.checkPermission() == 0) { // 0은 권한이 허용된 상태 // 허용된 상태라면 2단계로 넘어감 createNotificationInstance({ notificationType: 'html' }); } else { window.webkitNotifications.requestPermission(); } }, false);

웹 어플리케이션에 대해 권한이 허용되지 않은 경우, 위에서 requestPermission 는 사용자에게 아래와 같은 메시지를 나타낼 것입니다. 

The notifications permission infobar in Google Chrome
구글 크롬의 통보 권한 허용 여부 메시지

허나 원치 않는 허용 여부 메시지를 방지하기 위해 requestPermission  는 마우스 클릭이나 키보드 입력 같은 사용자의 액션에 대한 이벤트 핸들러 트리거에서만 작동한다는 것을 명심해야 합니다. (위의 document.querySelector 안에 addEventListener 를 넣은 것처럼) 위의 경우 사용자는 "show_button" 이라는 버튼을 클릭했을 때 알림 기능 허용 여부를 체크하게 됩니다. 물론, show_button을 클릭하지 않으면 requestPermission  는 작동하지 않습니다.

4단계 : 리스너 등록과 기타 액션 추가

document.querySelector('#show_button').addEventListener('click', function() { if (window.webkitNotifications.checkPermission() == 0) { // 0은 권한이 허용된 상태 // 허용된 상태라면 2단계로 넘어감 notification_test = createNotificationInstance({notificationType: 'html'}); notification_test.ondisplay = function() { ... do something ... }; notification_test.onclose = function() { ... do something else ... }; notification_test.show(); } else { window.webkitNotifications.requestPermission(); } }, false);

위의 경우, 이 튜토리얼의 주제와는 좀 벗어나지만 아마 코딩을 깔끔하게 하기 위해서 이벤트 리스너 안에 알림시 사용할 이벤트와 액션들을 다 넣어놓은 것 같습니다. 

예제

참고 : 알림 권한을 초기화 하기 위해서도 이 버튼을 사용할 수 있습니다.


예제1 : 사용자에게 HTML 알림 보이기

예제2 : back-end 이벤트를 통한 간단한 알림 기능(새 트윗 알림)

아래에 어떤 트위터의 ID를 입력하면 최근 3개의 트윗을 알림받을 수 있습니다.(리트윗이나 트위터 API가 거부한 것은 제외) 그리고 1분 단위로 새 트윗을 체크합니다.

 

위의 예제를 만들기 위해 JSONP를 이용하여 트윗들을 가져오고 반복문을 통해 3개의 표시될 트윗을 생성합니다.

주의할 것은 스크린과 알림 크기에 따라 표시될 알림에는 제약이 있다는 것입니다. 평균적으로 5개 정도가 이상적인 알림 숫자입니다. 새로운 알림은 큐에 쌓여 대기 리스트에 올라가고, 현재 알림이 끝나면 표시되게 됩니다.

// jsonp 형식으로 트윗 가져오기 var script = document.createElement("script"); script.src = 'http://twitter.com/statuses/user_timeline/'+ username+'.json?' + 'count=3&callback=fetchTweets'; document.body.appendChild(script); function fetchTweets(data) { var tweet; var i = data.length; while (i--) { tweet = data[i]; if (window.webkitNotifications.checkPermission() == 0) { window.webkitNotifications.createNotification( tweet.user.profile_image_url, tweet.user.name, tweet.text).show(); // note the show() } else { // requestPermission을 호출할 수 없는 경우 console.log('알림 기능을 받기 위해서는 "이 페이지에 알림 기능 허용"을 먼저 클릭해주세요.'); return; } } }

트윗 알림은 콜백 함수에서 생성되야 합니다. 이해가 가시나요? 이를 이해하는 것은 매우 중요한데, 만약 유저가 알림 권한을 허용하지 않는다면 우리는 requestPermission()을 통해 유저에게 허용해 달라고 요청해야 합니다. 이 함수는 오로지 사용자에 의해서만 발생될 수 있습니다. 3단계에서 설명한 것을 참조해 보시기 바랍니다.


원문 : Using the Notifications API
번역 : matthew.chang@me.com

 

크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 메튜장

트랙백 주소 http://izect.kr/trackback/683 관련글 쓰기

댓글을 달아 주세요


솔루션 및 툴 개발을 전문으로 하는 Telerik에서 만든 Kendo UI 가 오늘(11/30) Kendo UI framework를 발표하였습니다. 주요 타겟층을 전문 소프트웨어 개발자들로 하는 Kendo UI는 자바스크립트와 HTML5를 통한 프론트-엔드 개발에 필요한 모든 것을 제공해줍니다.


Kendo UI의 이사인 Todd Anglin씨는 "오늘날 자바스크립트와 HTML5를 활용하여 모바일 앱과 사이트를 만드는 것은 다수의 라이브러리와 각종 플랫폼에서 요구하는 여러 컴포넌트를 직접 모아야 하는 고된 작업입니다. " 라며 "이러한 작업은 솔직히 개인적인 취미 생활의 프로젝트에야 괜찮겠지만, 지원 및 라이센싱에 있어서 위험이 따르며, 유지보수와 업그레이드가 힘들고 또한 배우기도 힘듭니다. 무엇보다 개발하는 시간을 많이 낭비하게 됩니다. Kendo UI는 HTML5와 자바스크립트의 모든 필요한 컴포넌트를 하나의 프레임워크로 묶어서 제공함으로써 이러한 낭비를 해결하였습니다." 라고 언급하였습니다.


Kendo UI는 아래 3가지 특이점으로 묶여있습니다.


  • Kendo UI Web - 몇 세트의 풍부한 HTML5와 Grid등 자바스크립트 UI 위젯, 거기다 강력한 데이터 소스, 터치-가능(touch-enabled), 드래그 앤드 드롭 등 특별한 몇개의 프레임워크를 활용한 컴포넌트를 담고 있습니다. 또한 꽤나 빠른 자바스크립트 템플릿 엔진이 준비되어 있습니다.
  • Kendo UI DataViz - 애니메이션이 가능한 차트 등 HTML5를 통해 제공되는 데이터 시각화 위젯을 제공합니다.
  • Kendo UI Mobile CTP - 최신의 Kendo UI의 미리보기로, HTML5 모바일 앱의 빌드 과정에서 생기는 특별한 문제점을 해결하기 위해 빌드된 위젯입니다.

Kendo UI는 최신의 CSS3과 HTML5 그리고 IE,파폭,크롬,사파리,오페라 그리고 모바일 브라우저에서 지원되는 자바스크립트를 최신 유행하는 jQuery 를 통한 빌드로 제공합니다.


Kendo UI의 특징

Complete Framework for HTML5 apps

HTML5 를 위한 완벽한 컴포넌트 프레임워크

Kendo UI는 최신의, 인터렉티브한 자바스크립트 어플리케이션을 만드는 데에 필요한 모든 것을 제공합니다. 게다가 10가지 이상의 UI 위젯, 그리드,차트, 콤보박스 등을 제공하며 클라이언트-사이드로는 데이터바인딩, 템플릿화, 애니메이션, 그리고 드래그 앤 드롭을 제공합니다. 더이상 이리저리 흩어진 jQuery 플러그인을 찾기 위해 노력하지 마세요. Kendo UI는 전문적인 테스트와 HTML5 툴박스의 테스트를 거쳐 이러한 다양한 jQuery 플러그인을 통합하였습니다.

Ready for Touch & Mobile Devices

터치기기&모바일 장비를 위한 준비된 UI

Kendo UI의 터치기기와 모바일장비를 위한 UI는 타 UI는 격이 다릅니다. 모든 Kendo UI의 위젯은 아이패드와 같은 터치 장비를 지원하며, 데스크탑과 모바일 장비에서의 UI를 똑같이 다룰 수 있게 해줍니다. 심지어 드래그-앤-드롭 같은 경우도 터치를 통해 가능하며, 터치와 마우스 입력을 위해 필요한 코드들을 획기적으로 줄일 수 있습니다.

No more slow JavaScript

더 이상 자바스크립트가 느리지 않습니다.

Kendo UI는 jQuery UI의 복제본이 아닙니다. 모든 Kendo UI는 자바스크립트의 성능을 최대한 활용하여 제공할 수 있도록 신중하게 고려되었습니다. 경량화를 위해 추가된 템플릿 라이브러리는 jQuery의 템플릿보다 월등히 빠릅니다. 애니메이션의 최적화를 위해 CSS3를 활용하여 하드웨어 가속화*를 사용하였고 더 나은 가상화 UI를 제공하며 Kendo UI는 성능을 저하하는 클라이언트 측의 UI는 포함하지 않았습니다.

*사용 가능한 브라우저에 한해 제공됩니다.



Rich UI built on jQuery

jQuery를 통한 영리한 UI 제작

Kendo UI는 잘 만들어진 jQuery 코어를 사용하여 웹 개발자들에게 쉽게 UI 컨트롤들을 사용할 수 있도록 해줍니다. Kendo UI를 시작하는 것은 아래의 단 3단계만 있으면 됩니다.

  1. Kendo UI 프레임워크를 다운받습니다.
  2. 스크립트와 CSS를 추가합니다.
    <script src="..." /> 
    <link href="..." />
  3. 자, 이제 Kendo UI를 즐기면 됩니다.! 
    $(#myMenu").kendoMenu()  이런 식으로 사용하면 됩니다.

지금 바로 시작해 보세요!

Professional tools, Professional support

훌륭한 툴, 전문적인 서포트

웹 개발이 여러분의 취미이던 직업이던 , 여러분은 완벽한 테스트와 다양한 서포트가 가능한 툴을 원할 것입니다. Kendo UI는 지능화된 로봇들에 의해 테스트되고 웹 산업을 이끌어가고 있는 Telerik의 팀의 후원을 받습니다. 질문이 없으면 답도 없습니다. 버그가 없으면 고쳐지지도 않습니다. 어떠한 툴도 저희정도의 최신 HTML5 개발에 대한 믿음을 제공하지는 않을 것입니다.

Broad browser support

다양한 브라우저 지원
(예전 버전도 물론 지원합니다.)

단지 HTML5만 가능해지는 것이 브라우저의 발전만이 아닙니다. 브라우저가 발전하면서 여러분은 기존의 브라우저에도 맞는 최적화를 위해 고통을 감수해야 합니다. Kendo UI는 기술들의 조합으로 몇몇의 HTML5의 특징들을 다른 오래된 브라우저에서도 가능하게 합니다. 또한 미세한 조정을 통해 최신 브라우저와의 차이점을 줄여줍니다. Kendo UI는 모든 메이저급 브라우저에서 제공됩니다. 제공되는 브라우저 : 인터넷 익스플로러 7이상, 파이어폭스 3이상, 크롬, 사파리 4이상, 오페라 10이상

Evolving at the speed of the web

웹 속도의 발전과 함께 발전

Kendo UI는 매일같이 발전합니다. 발전이 없는 프로젝트는 미래도 없습니다. 저희의 프레임워크는 저희의 적극적인 로드맵에 따라 빠르게 발전합니다. Kendo UI 프레임워크의 미래 계획은 공적으로 공개되어 투표되거나 저희의 Kendo 뉴스레터의 구독자들에게 아이디어를 받기도 합니다.

Theme Builder

테마 빌더

테마 빌더는 강력한 비주얼 툴로, Kendo UI 위젯들의 룩-앤-필을 빠르게 커스터마이징 할 수 있습니다. 단순히 설정 마법사의 클릭만으로 Kendo UI의 위젯들의 스타일을 바꿀 수 있습니다. 만약 여러분의 사이트에 이미 Kendo UI 위젯이 있다면 적은 자바스크립트의 수정만으로 바꿀 수 있습니다. 지금 시도해 보세요!


공식 홈페이지 : http://www.kendoui.com
데모 보기 : http://demos.kendoui.com
다운로드 : http://www.kendoui.com/get-kendo-ui.aspx

크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 메튜장
 TAG HTML5, ria, UI

트랙백 주소 http://izect.kr/trackback/680 관련글 쓰기

댓글을 달아 주세요


오늘날 HTML5는 모바일 영역에서 빠르게 플래시를 물리치고 있습니다. 더 많은 개발자가 HTML5로 그들만의 개발을 진행중이거나 준비중입니다. HTML5의 장점은 그 무엇과도 대처할 수 없기 때문에 다가오는 미래를 대처할 기술로 주목받고 있습니다.

아래에 제가 소개해 드리는 3가지 툴은 HTML5 2D 게임을 빠르게 만드는 데에 개발자분들에게 도움을 줄 것입니다.

1.    GameMaker

이 오래된 강력한 툴은 최근에 HTML5를 지원하기 시작했습니다. 시각적인 개발 인터페이스를 갖추고 있고, 개발자들은 간단한 게임을 코드 없이도 만들 수 있습니다.

보다 복잡한 게임을 위해 GameMaker는 유저에게 맞춘 맞춤 게임 스크립트를 제공합니다. 소스 코드는 GameMaker 언어에 기반해야 하며, 물론 수정이 가능합니다.

기능이 제한적인 라이트 버전은 무료로 제공되고 있습니다.




2.    Construct

이 매우 심플한 기본적인 게임 개발툴은 어떠한 코드의 생성도 없이 단지 시각적인 편집으로 게임을 만들 수 있게 합니다. 이 툴은 사건(incident)단위로 구성되며 초급자건 숙련자건 상관없이 매우 쉽게 사용할 수 있습니다. 최근에 Web GL 가속이 추가되었습니다.

100개의 사건(incident, 장면이라 생각하면 될듯합니다.)까지는 무료로 제공되며, 그래그 앤 드롭으로 물리 엔진을 포함할 수 있습니다.


3.    Spaceport

Spaceport는 클라우드에 기반한 플렛폼으로, 게임 개발자들에게 모든 스마트 폰에서 플레이 할 수 있도록 합니다. 물론 스마트폰 자체의 OS 를 통해 앱을 먼저 만들어야 하지만, 클라우드를 통해 공유되는 플렛폼 중 웹 부분은 HTML5를 통해 작동될 것입니다. 원본 어플리케이션을 함께 동작시키는 것으로, 단지 간단한 스크립트를 추가함으로써 모든 장비에서 동작이 가능하게 합니다.

(역자주 : 자세한 소개는 아래 동영상을 보시는게 좋을 것 같습니다.) 


원문 : 3 HTML5 Game Fast Developing Tool Recommended
번역 : matthew.chang@me.com

크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 메튜장
 TAG HTML5, 웹게임

트랙백 주소 http://izect.kr/trackback/679 관련글 쓰기

댓글을 달아 주세요


웹 브라우저가 점차 지원하는 것들이 많아지면서 많은 개발자와 디자이너들이 강력한 웹 어플리케이션을 만들기 위해 HTML5를 시작하고 있습니다. 새로운 인터넷을 향한 혁명은 HTML5를 통해 진행되고 있습니다. 여기서 저는 15개의 꽤나 유용한 HTML5개발에 도움을 주는 개발 가이드와 입문가이드를 추천해 드리고자 합니다.

  • Development Guides

HTML5로 아이폰 앱 만들기(소스 및 코딩가이드, 사용된 HTML5기술 등 제공)


HTML5와 CSS3로 되어 있는 단일 페이지의 "포트폴리오"를 위한 예제 소스(소스코드 제공)

15-handbooks-2.png

HTML5로 되어 있는 Cool iPhone App의 디자인 소스 & 소스코드(디자인소스, 소스코드 제공)

15-handbooks-3.png

HTML5 레이아웃으로 코딩하기(표준화된 HTML5 소스코드 제공)

15-handbooks-4.png

당신이 곧 사용하게 될 기술들(HTML5 와 CSS3 예제 소스 제공)

15-handbooks-5.png

HTML5 폼을 사용한 필드를 가져보세요.(html5 form 관련 예제 제공)

15-handbooks-6.png

HTML5로 블로그 디자인하기(html5 테그, 폼 강의 제공)

15-handbooks-7.png

미래의 터치 기술 : HTML5와 CSS3를 사용한 우아한 웹 사이트 만들기

15-handbooks-8.png

HTML5 테그들의 구조

15-handbooks-9.png

단일 페이지로 구성된 HTML5&CSS3의 웹사이트 템플릿

15-handbooks-10.png

IE6를 포함하여 어떻게 모든 브라우저에서 HTML5를 정확하게 렌더링 하나요?

15-handbooks-11.png

  • HTML5 Cheat Sheets

HTML5 치트 코드

15-handbooks-12.png

HTML5 비주얼 치트 코드

15-handbooks-13.png

HTML5 캔버스 치트 코드

15-handbooks-14.png

HTML5 포켓 북

15-handbooks-15.png


원문 : Learn HTML5? 15 Useful Guides and Cheat Sheets You Can’t Miss

번역 : matthew.chang@me.com


크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 메튜장
 TAG CSS3, HTML5, Web Form

트랙백 주소 http://izect.kr/trackback/678 관련글 쓰기

댓글을 달아 주세요


최근 우리나라도 아직은 아주 활발하지는 않지만 html5 라는 기술이 주목을 받으면서 개발자들이 점차 너도 나도 하는 "앱" 에서 조금씩 웹을 바라보는 것 같다. html5라 하면 웹도 그냥 웹이 아니다. "웹앱" 이지.


웹앱이라는 것은 아직은 생소하지만 앱은 앱이다. 아이폰, 안드로이드 앱처럼 이제 웹 기술도 서서히 발전하면서 네이티브 앱(안드로이드, 아이폰 등 특정 플랫폼에서 동작하는 어플리케이션)의 기능들을 따라잡으려고 하고 있다. 이중 가장 활발한 것은 Sencha Touch 나 jQuery Mobile 같은 모바일 UI 부분이다.

그럼 과연 우리가 네이티브 앱을 대처해서 html5로 완전히 방향을 돌리기에는 적합하는가?

글쎄, 내 개인적인 생각이지만 답은 "현재는 아니다." 이다. 왜 센차 터치나 제이쿼리 모바일 등 웹앱의 세계에서 아직까지 UI , UX적인 부분만 발전을 하는지, 그것을 잘 생각해 보면 사실상 웹앱이라 해도 기능적인 부분은 기존의 웹 서비스를 개발하던 것과 별반 다를게 없기 때문이다. 오히려 기존의 네이티브 앱들 보다 서버측과 데이터 베이스 개발에 신경을 더 써야 할 것이다. 결국 일반적인 웹 개발밖에 더 되지 않는다. 앱 개발자들이 웹앱 개발로 돌아선다? 그러면 서버단 개발을 하지 않는 한 그건 단순 퍼블리셔 정도의 의미밖에 되지 않는다.

앱은 앱 자체가 동작하는 기능이 있다. 네이티브 앱의 기능적인 부분을 웹에서 구현하려면, 자바스크립트 기술을 써야 하겠지만 솔직히 말해 자바스크립트는 오픈되어 있기 때문에 보안적인 것을 고려하면 그닥 구미가 땡기지 않는다. 스크립트, 웹 스토리지 정도의 기능을 쓰면 될까? 웹캐시? 그런것들은 단지 앱이 쓸 수 있는 기본적인 데이터를 가지고 있을 수 있는 수단밖에 되지 않는다.

웹이 앱을 지향한다면, 가장 크게 고려해야 할 것이 "오프라인" 일 것이다. 사람들이 왜 웹앱에 크게 관심이 없는가, 그것을 잘 생각해 본다면 개인적인 생각으론 첫째는 느려서(아마도 3G를 통해 서비스 받을 터이니) 둘째는 인터넷이 안되면 안되니깐. 아마 이 두가지가 가장 클 것이다.

그럼 이 한계를 극복하려면 어떻게 해야 하는가? 결국 오프라인인데, 아직 html5는 데이터적인 측면을 제외하고는 뭐 자바스크립트 함수가 확장되었다고 치지만 결국 오픈이다. 아무리 자바스크립트를 인라인으로 짠다고 해도 그것도 당연 소스를 볼 수 있다. Ajax를 통해 서버사이드 통신을 한다고? 그럼 인터넷이 들어가는데, 그럼 오프라인이 아니다. 그런다고 모바일 웹에서 XecureWeb이 돌아갈리도 없고..

결국, 아무리 개발을 열심히 스크립트로 캔버스 써다가 아주 훌륭한 2D든 3D든 뭔가 앱을 만들었다 쳐도 데이터는 다 빼올 수 있다. 웹앱의 해킹 가능성이 가장 높고, 그럼 너도 나도 똑같은 앱을 만들 수 있다.아이폰의 앱이 그렇게 많은 이유가 무엇인가? 제조사의 철저한 소스코드 보안과(물론 탈옥하면 뚫리긴 하지만) 안정적인 앱스토어? 예를들어 아이폰으로는 패킷 스니핑을 할 수 없으니 서버와 통신하는 URL은 알아내기 힘들것이다. 부가적으로 앱스토어 수익과iOS플랫폼의 수요 등등이 있겠지만 개발적인 입장에서는 내가 만든 저작물을 지키는게 가장 우선이다.

즉, 보안, 최소한의 자바스크립트 보안책에 대해서 html5에서 나오지 않는다면 단일 오프라인 앱으로는 사실 서비스하기 힘들다는 것이다. 이 얘기는 즉 아직 "웹앱" 을 만들 시기는 아니라는 것이다. 현재까지는 HTML5로 우리가 바랄 수 있는 것은 "모바일 웹" 혹은 "크로스 웹" 일 것이다. 결국 서버사이드를 껴야 한다. 거기에 사용자를 배려한 UI/UX(예를 들어 finger touch나 애니메이션 기능)를 통해 "컨텐츠" 로 승부를 걸어야 한다.


기존에 웹도 마찬가지이다. 비록 쓸때없이 Active X나 플래시 등 비표준 플러그인이 좀 껴서 지저분해지긴 했어도 HTML5가 이제 이 비표준 플러그인을 꼭 써야하는 부분, 기존까지 RIA(Rich Internet Application)이라 불려온 리치한 부분들을 커버해 줄 것이다.

그래서 생각건데 아직까지는 웹앱으로 가려는 사람들은 웹앱(클라이언트) 측면에서는 서버사이드와의 안정적인 TR송수신, 데이터 싱크 등 그런 부분에 집중하고 그 전에 아주 안정적인 서버를 구축하려는 노력을 먼저 하는 것이 더 낫다고 생각한다. 왜냐면 우선 "웹앱" 으로 간다고 생각하는 사람들은 자신이 가지고 있는 기술은 웹 관련 기술인데 "앱"을 생각하면 아이폰 앱처럼 뭔가 개인 혹은 소규모에서 만든 앱의 성공적인 모습을 떠올릴 것이다. (필자 또한 그렇다.) 그런데 아직 스크립트 보안이 강화가 되지 않았으니 html5는 웹의 크로스 뷰어로써 역할밖에 되지 않는다. 모든 화면에서 최적화되게 보이는 웹이 가장 중요시 되는 것이다.

그런데 서버단까지 해야 하냐? 웹앱은 일반 웹처럼 큰 규모로 만들어야 하는 것도 아니고, 통일된 템플릿 내에서의 정보 제공이 가장 중요하다. 클라이언트로 정보를 전달해 주는 "표준" 만 잘 설계한다면 아주 빠른 개발이 가능하다. 그래서 서버단을 알고 C/S를 빠르게 개발할 수 있는 능력이 필요하다는 것이다.

그리고 좀 더 여건이 된다면 최근 나오는 모바일 UI프레임워크를 접하여 최소한의 UI정도는 만들 수 있도록 하고 modernizr나 미디어 쿼리 등을 배워서 어떤 화면 규격에도 컨텐츠를 보여줄 수 있도록 하는 능력이 필요하다. 뭐 물론 요즘 드림위버 CS 5.5에서는 jQuery Mobile 통합과 미디어 쿼리 제공으로 보다 쉽게 만들 수 있지만, 이런 툴은 지속적으로 나오겠지만 정작 이런 기능들은 생각보다 이해하기 쉽다.


정리해보면 이렇다. 우선 안정적으로 스크립트 보안 혹은 대처 수단이 나오기 전까지 오프라인 저장소 등에 의존하지 않고 당장은 나올 웹앱들은 다 Ajax와 URL을 기반으로 하는 서버와의 통신, 즉 html5가 크로스 브라우저/디바이스 가 가능한 뷰어의 역할을 할 테이니 " 빠른 개발과 안정적인 C/S통신을 위해 서버군과 모바일 UI프레임워크, 크로스 브라우징에 대하여 공부한다. 그리고 향후 스크립트 보안 등이 강구가 되었을때를 대비하여 jquery, prototype등 자바스크립트 라이브러리를 공부한다. "

이렇게 적어놓고 보니 사실 모바일 UI나 크로스 브라우징/디바이스 를 제외하고는 웹 개발을 위한 공부밖에 더는 없다. 결국 html5, 웹앱도 "웹" 아니겠는가. 앞으로 우리의 디바이스는 갈수록 빨라지고 계속적으로 온라인 상태를 유지하게 될 것이다. 보이는 곳이 어떻게 됬던 간에 웹에서 변하지 않는 부분은 컨텐츠를 저장하거나 제공하는 서버군과 데이터 베이스군은 분명 존재한다는 것이다. 

결론은, 아직은 HTML5가 네이티브 앱을 따라가려고 열심히 노력중이니 그 전에 웹의 기본에 충실하자. 그리고 슈퍼 웹 개발자가 되자.
크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 메튜장

트랙백 주소 http://izect.kr/trackback/675 관련글 쓰기

댓글을 달아 주세요

  1. 나의별 2011/12/02 09:22  댓글주소  수정/삭제  댓글쓰기

    좋은글 감사합니다. Web gl에 관심히 있어서 html5를 고민했었는데 선수과목이 잘정리되어 있네요^^


저는 웹 프로그래머입니다.
초딩때부터 HTML을 시작했으니 벌써 15년이나 웹과 함께 살아왔네요.
물론 중간에 디자이너를 꿈꾸며 웹을 멀리하기도 하고, 입시 프로그래밍(?) 덕분에 C랑 친해지기도 하고..
실제로는 20살부터 웹 SI에 뛰어들기 시작했는데, 올해가 5년차 입니다.
닷넷과 자바를 택하자면 자바를 주로 하고, 오픈 소스를 좋아라 합니다.

뭐 그렇긴 한데..
여튼 저도 웹에 관심이 하도 많아서, 특히 2년 전 RIA에 관해 깊히 빠져들면서
웹 상에서도 이렇게 일반 어플리케이션 처럼 만들 수 있다는 점에 얼마나 기뻤는지 모릅니다 ^^
그때는 닷넷을 하고 있어서, WPF로 만들어진 이쁘장한 Vista계열의 UI가 Silverlight에서도 쓰일 수 있다는 겁니다!
그래서 보다 보니 Adobe에서 플렉스가 있더군요. 이 또한 나름대로 이쁘장한(?) UI를 가지고 웹에서 어플리케이션 처럼 만들 수 있다는 매력에 푹 빠졌었습니다.

그런데 UI만 이쁘장하게 하면 뭐합니까. 뒷단에 로직이 잘 돌아가야죠.
그래서 보면 참 개인적으로 Adobe Flex에 낑겨 맞출 수 있는 오픈 소스 기술들, 특히 BlazeDS에 매료됬었었죠.
따로 XML이나 JSON을 통해 C/S통신을 할 필요도 없고, 설정만 슥삭슥삭 세팅만 잘 해주면 심지어 플랙스 내에 Class랑 DB객체가 맞물리게 되더랍니다... 거 참 신기하네. 마치 JNDI처럼 말이죠.
그렇게 Flex어플을 만들었고, 또한 Adobe Catalyst를 통해 딱히 플래시를 안써도 Animation 및 custom ui를 구현했었습니다.

그런데 문제는 플래시의 속도와 호환성이었습니다. 뭣보다 스마트폰이 이렇게 엄청나게 보급된 시점에서, 특히 아이폰에서 플래시 안되는 것은 치명적이더군요. 제가 아무리 컨텐츠를 잘 만들면 뭐합니까, 폰에서 보이지가 않는걸요..

웹을 통해 접근하는 사람들은 어떤 특정한 PC에 앉아서, 컨텐츠를 탐색하다가 들어오는 것이 대부분입니다. 하지만 요즘 사람들은 스마트폰을 사용해서 인터넷을 검색합니다. 최근에 나온 아이폰 4S의 Siri의 경우, 엄청나게 쉽게 스마트하게 웹의 정보를 찾습니다. 여기에는 심지어 html 페이지 조차 필요하지 않습니다. Text로 된 정보만 있으면 되니깐요.

그런 구조화되면서도, 브라우저에 모두 맞게 돌아갈 수 있는 컨텐츠를 만들어 주는 것이 html5 인 것 같습니다. 사실 html5의 테그들만 봐도 지금까지는 솔직히 canvas나 video, audio, form 테그 외에는 문서를 완전히"구조화"시켜주는 테그가 대부분입니다. 

그리고 CSS와 요즘 나오는 자바스크립트 프렘워크를 통해 사이트를 만들어 나갑니다.

사실 개발자에게 html5가 큰 의미가 있을까요? html5가 나와도 저희는 ajax를 만들고 어쨌든간에 back-end단을 만들고 데이터를 표준화된 포멧으로 전달해 줘야 합니다. 그런데 프로그래머가 기존과 다르게 할 일이 있을까요?

글쎄요. 하지만 이제 웹은 점차 2D에서 벗어나려고 하고 있습니다. 아니, 기존 웹들은 2D조차 아니였죠. 글,이미지,동영상 등으로 구성된 문서였죠. 하지만 이제 점차 다이나믹 해지고 있습니다.

이런 상황에서 개발자들은 어떻게 해야 경쟁력을 가질까요?

글쎄요, 저는 일전에 게임개발 업체에 있으면서 그곳에서 게임이 만들어지는 과정을 지켜봤는데, 프로그래밍은 서버/클라이언트 로 나뉘면서 또 서버는 AI니 NPC니 그런 인공지능 서버가 있고 분산처리 프로그래밍 하는 쪽이 있고 클라이언트는 코어가 있고 UI가 있고 툴 개발자 등등.. 뭐 그렇게 세분화 되더랍니다.

아마 웹 프로그래밍 세계도 이렇게 변하지 않을까 싶습니다. 그럼 html5가 가장 직접적으로 영향을 끼치는 부분은 다름아닌 UI개발이 아닐까요. 

점점 뭐랄까, 표준화된 UI들, 이쁘장한 UI들이 무료로 배포되고 있습니다. 특히 모바일 부분에서 말이죠. 나름 Sencha Touch니 jQuery Mobile이니 얘들 참 이쁩니다. 이런 식으로 스킨만 입히면 완성되는 프렘워크들이 슉슉 나오고 있지요.

그런 환경 속에서 저희들은 어떻게 해야 할까요. 음.. 
갠적으로는 개발자는 또한 디자인도 알아야 하고, 퍼블리싱도 알아야 하고 기획도 알아야 하고..
그런 슈퍼 웹 개발자가 되어야 할 것 같다는 느낌이 듭니다. 
아무래도 그게 개발자가 경쟁력을 갖출 수 있는 요소가 아닐까..
그런 생각을 해보게 되네요 ^^

주저리주저리 해봤습니다. html5가 도래해도, 딱히 개발자 입장에서 뭐가 달라질 것이 있는가 싶네요. 그 전에, 제 포지션좀 정리좀 해야겠습니다. 포커스 온을 해야 하는가, 두루 알아야 하는가..
크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 메튜장

트랙백 주소 http://izect.kr/trackback/674 관련글 쓰기

댓글을 달아 주세요




개발자들은 계속해서 웹 브라우저에서 가능한 범위를 깨려고 하는 것 같습니다. 최근 새로나온 이 놀라온 WebGL 데모들은 웹에서 가능한 것이 정말 무엇인지를 잘 보여주는 것 같습니다. 


첫번째는 three.js 를 사용한 AlteredQualia의 이 인상적인 동적 지형 렌더링 데모입니다. 두번째 데모는 프랑스의 웹 디자인 대행사인 Ultranoir의 Nouvelle Vague 입니다. 이 데모는 개개의 트윗들을 엮어서 3D로 보여줍니다. Mr.doob의 이 데모는 kinect로 캡쳐한 데이터를  three.js를 사용하여 랜더링하여 보여줍니다. 또한 three.js를 사용한 One Millionth Tower 데모는 Canadian National Film 위원회가 만든 다큐멘터리 입니다. 마지막으로 WebView 핵을 사용해서 아이패드 2에서 돌아가게 만든 이것들을 한번 보세요.


다른 소식으로는 구글 데이터 아트 팀이 워크샵 페이지를 런칭하고 그들이 만든 놀라운 데모의 기술들을 공유했다는 소식입니다. 이 페이지는 멋진 dat.GUI를 사용한 튜토리얼들이 있습니다. 한번 확인해 보세요!


원문 : HTML5Rocks - WebGL demo Roundup

번역 : matthew.chang@me.com

 
크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 메튜장

트랙백 주소 http://izect.kr/trackback/673 관련글 쓰기

댓글을 달아 주세요



지난주 수요일, 어도비사는 더 이상 모바일 플래시를 개발하지 않겠다고 발표했습니다. 이어서 HTML5은 모바일 환경에서의 컨텐츠의 제작 및 배포에 가장 좋은 솔루션이라고 말했습니다. 이는 유동적인 모바일 및 비디오 배급사에 꽤나 중대한 터닝 포인트입니다. 허나 HTML5의 지원이 애플의 제품과 애플의 사용자들에게 큰 영향을 끼칠 지는 아직 미지수입니다.

1. "풀 웹(Full Web)"(RIA)은 애플에게 영향이 크지 않다.
짧은 기간내에 애플의 경쟁사들은 플래시를 지원한 OS의 "풀 웹(Full Web)" 경험(아마 RIA를 말하는 듯)을 자사의 고객을 끌 수 있는 수단으로 활용하기 어려울 것입니다. 모바일 플래시 지원 여부는 고객이 안드로이드,QNX같은 OS를 사용하는 장비의 성능(만족도, 버벅이는 정도 등)을 기준짓는 좋은 잣대였습니다. 하지만 이미 경쟁이 시작되었을 때부터 사실상 진정한 승자는 애플이었습니다. 종종 안드로이드 장비가 애플 플렛폼의 약점을 비교하기도 하였지만 플래시 모바일이 없어짐으로 이러한 비교는 무의미하게 되었습니다.

현존하는 모바일 플래시 버전은 그대로 안드로이드 등의 장비에 남겠지만 어도비는 이를 지원하지 않기로 하였기에 모바일 플래시 만의 생태계에서 오는 매혹적인 장점도 사라지게 되었습니다. 어도비는 HTML5의 우수성을 인정하고 크로스 플랫폼 콘텐츠를 위해 기술지원을 강화할 것입니다. 

2. 아이폰,아이패드를 위한 컨텐츠들이 더 많이 생길 것이다.
모바일 플래시가 사라짐에 따라 웹사이트를 운영하는 많은 회사들은 더 이상의 동적인 컨텐츠를 지원할 수 있는 옵션이 HTML5밖에 없습니다. 허나 이는 결국 더 인기있는 장비를 위해 호환 가능한 컨텐츠를 생산해 낼 것입니다. iOS는 모바일 브라우징을 위해 가장 많이 사용된 플랫폼입니다. 더 이상 모바일 RIA를 위해 기다리고 지켜볼 것이 없어질 것입니다. 안드로이드가 모바일 방문을 위해 새로운 기술을 내 놓더라도 HTML5가 결국 컨텐츠 배급의 기술적 수단으로 선택되게 될 것입니다.

어도비가 모바일 장비를 위해 HTML5를 홍보하고 나섰을 때부터 누구도 다른 기술을 가지고 컨텐츠를 만드는 노력은 하지 않았습니다. 사실, 어도비는 주요한 플래시 컨텐츠 개발 업체와 함께 플래시를 발전시키기 위해 노력했을 것입니다. 플래시 미디어 서버 4.5처럼 다루기 쉽고 모바일이든 데스크탑이든 어디서든 유저가 사용 가능한 기술을 말이죠.

3. 미래에는 플래시가 최소화 될 것입니다.
애플은 더 이상 맥(Mac) 시스템에 플래시를 미리 설치해 두지 않습니다. 플래시를 찾아서 설치하는 유저들은 배터리량과 성능에서 부정적이라고 얘기합니다. 허나 풀 버전의 플래시가 다음에 나오더라도 모바일 시스템은 없이 나올 것입니다.

Aral Balkan(OSFlash.org 운영자/ Ariaware CEO)씨가 트위터에서 "모바일 플래시가 없다는 것은 웹 사이트에서도 플래시를 쓰지 말라는 것과 다름이 없다." 고 말한 것처럼 모바일 플랫폼은 점차 유저가 웹 컨텐츠에 접근하는 데에 중요한 통로가 되고 있습니다.
모바일 인터넷은 2015년까지 계속해서 증가할 것으로 예측됩니다. 또한 모바일 브라우징은 이미 몇몇 웹 분야에서는 데스크탑 브라우징을 넘어섰습니다.

실시간 스트리밍은 애플에게 뺏기고 있는 어도비의 다른 영역입니다. 애플의 HTTP 라이브 스트리밍(HLS)기술이 연결된 텔레비전은 꽤나 인기있을 뿐만 아니라 대부분의 컨텐츠 공급자들에게 기본적인 기술이 되어져 가고 있습니다. 이는 유저가 플래시를 점차 탈피하게 되는 또 하나의 이유입니다. 더 이상 플랫폼에 대해 신경쓰지 않습니다.

간략히 말하면 이 애플을 위한 어도비의 항복 같은 큰 뉴스는 더 이상 "제한된" 버전의 웹을 비난하는 것을 피하기만 하면 안된다는 것을 보여줍니다. 또한 애플의 사용자들을 위해 컨텐츠를 공급한 분들은 iOS 장비에서 잘 동작하는지 확인해 봐야 합니다. 웹 컨텐츠가 더 이상 너무 많은 구멍을 만들어 밑빠진 독에 물붙기 같은 행위가 되어서는 안됩니다.

번역 : matthew.chang@me.com

 
크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 메튜장

트랙백 주소 http://izect.kr/trackback/672 관련글 쓰기

댓글을 달아 주세요


여러모로 바쁘게 흘러가는 하루 하루인 것 같다. 생각을 정리할 시간도 드물고, 여유라는 것을 구경해 본 지도 오래된 것 같다. 얼마나 시간이 바쁘게 흘러가는지, 1100일 부터 시작한 병역특례도 이제 120일 남짓 남게 되었고, 그간의 거의 1000일 가까운 시간동안 나는 여러가지 사회 활동을 통해 수 없이 많은 것들을 남모르게, 아니 심지어 나 자신도 모르게 배워 오고 앞으로의 나는 어떤 방향으로 흘러나가야 할 지 미래에 대한 로드맵을 정확히 확립할 수 있었다.

일단 웹을 지향하는 프로그래밍, 기획, 디자인을 모두 하고 싶어하는 개발자로써(물론 프로그래머 적인 성향이 가장 크지만) 기술적인 입장에서 웹 쪽은 물론 단순히 php asp jsp 등의 view단의 언어가 있겠지만, 보다 더 실무에서 요하는 것들은 Enterprise 했다. CMS, Groupware, Portal 등의 서비스를 만들기 위해서는 통합적인 개념의 모델이 필요했고, 그런 모델의 의미에서 웹 기술은 두 개의 코어적인 기술로 나뉘었다. 자바와 닷넷이이다.(2009/11/16 - [IZECT DEV LAB/웹 프로그래밍] - 자바는 돈되고, 닷넷은 돈 안된다?)

2008년까지 2년여간을 기초적인 프로그래밍 언어에 중점을 두고 공부했던 나는 2009년에 본격적으로 웹 개발의 길에 뛰어들었다. 운 좋게도 이 두 기술을 모두 대규모 시스템에서 유지보수 할 일이 생겼다. 대다수의 중소 기업의 Maintence 부서가 그렇듯, 나 역시도 모 소기업의 개발 및 유지보수를 모두 전담하였고 혼자서 유지보수 하는 서비스가 약 5개 정도 되었다. 지금까지 수 많은 사이트를 유지보수 및 개발하면서 느꼈는데, 대규모 시스템의 경우는 자바 아니면 닷넷이고 보다 더 웹쪽으로 코어적인 부분이 아닌 일반적인 View를 지향하는 서비스의 경우는 jsp php 정도이다. 게다가 asp같은 언어로 된 사이트도 많은 것이 2000년도 쯤 IT붐이 일어났을 때 개발된 서비스들(특히 사내에서 사용하는 사이트들) 태반이 asp인 것 같다. 아마도 asp로 개발해야 서버도 사고, 윈도우도 사고 해서 원가가 올라가서 매출증대에 도움이 된다고 생각한 것 같다. (당시에는 java의 middle ware 도 많이 없었을 테니..) 

말하다 보니 이야기가 많이 새어버렸다. 여튼 자바(Spring기반) 와 닷넷(.net 2.0) 을 사용하는 사이트를 동시에 유지보수 하다 보니 보다 더 많은 오픈 소스를 응용하여 강력한 자동화 기능을 구현할 수 있는 자바의 기능에 나는 엄청나게 매혹되었다. 그리고 2009년 말에 나는 자바로써의 길을 간다고 마음먹을 수 있었다.(2009/11/09 - [IZECT DEV LAB/웹 프로그래밍] - 자바 웹 프로그래밍 책 도착 +_+) 이는 앞으로도 내 인생의 가장 큰 선택이 아닐까 싶다. 자바의 길을 택함으로써 수 많은 오픈소스들을 접하고, 이해하면서 정말 나의 개발자로써의 삶은 얼마나 편해졌는지 모른다. 자만하는 것은 아니지만, 수 개월동안 수 명이서 개발해야 할 대규모 시스템에 대한 모듈을 이젠 내가 사용했던 오픈소스들을 취합해서 혼자서 만들 수 있을 정도의 실력을 쌓았다. (물론 실존하는 오픈소스는 너무나도 많아서 내가 다 할 수 있다고 장담은 못한다.)

어느정도 배웠다 싶은 내게 다시 학생으로 돌아가야 하는 그런 시간이 찾아오고, 나는 웹 개발자로써 내가 웹 세상에 어떤것을 기여할 수 있을까? 라는 생각을 하게 되었다. 사실 프로그래머보다 디자이너를 꿈꿔왔던 나이다. 95년부터 html, java/vb script, dhtml 을 만져왔으니 벌써 16년째 웹 개발에 참여하고 있다. 물론 학생 신분으로 한계도 많았지만 웹을 디자인 할 때, 프로그래밍 할 때, 그리고 사이트를 기획할 때, 무엇보다 백지에 사이트를 그려나갈 때 난 솔직히 희열을 느낀다. 정말 그 시간만큼은 내가 그 일에 미쳐버리는 것 같다. 사이트를 예쁘게 꾸미는 것부터 해서 사이트를 방문하는 사람들에게 어떤 정보를 주고 편의를 주며, 또한 나의 의도대로 유도할 수 있는지에 대해서 말이다.

그래서 나는 웹을 개발함에 있어서 딱히 플밍,디자인,기획,DB,코더 등 세분화 된 개발직군이 아닌 웹 개발을 하는 사람들은 이 모든 것을 두루 가지고 있는다면 보다 더 빠르고 직관적인 개발이 가능할 것이라고 생각하였다. 이런 빠른 협업에서 만들어지는 웹 개발이 가능하다면 같은 시각에서 웹을 사용하는 사용자의 입장을 심도있게 바라볼 수 있게 되어 결론적으로는 웹 세상의 편의적인 발전에 힘을 보탤 것이라는 생각을 하였다.

이런 생각을 정리해가는 와중에 작년 말쯤 html5를 만났다. (2011/05/25 - [분류 전체보기] - HTML5에 미래를 걸다.) html5는 쉬운 코딩과 강화된 자바스크립트 api, 그리고 디자인적 입장에서 그간 수 없이 많이 사용되어 왔던 css의 기능을 강화시킨 css3 등을 통해 표준화 되면서도 진보된 웹 개발을 가능하게 하는 일종의 웹 기능의 표준 프레임워크이다. 또한 무엇보다도 지금같은 스마트폰 시대에 모바일 프레임워크에 집중하여 모바일까지 두루 표준으로 사용할 수 있도록 한 점이 너무나도 마음에 들었다. 

그래서 나는 html5와 모바일 프레임워크에 대해 공부하다가 인터넷에서 찾은 정보를 취합할 목적으로 페이스북 커뮤니티인 html5 korea를 만들었다 이어 "html5 한국 사용자 모임" 으로 명칭을 바꾸었다. 단순히 html5자료를 취합할 목적으로 만든 이 커뮤니티가 본 블로그의 위젯으로 추가해 놓아서 그런지는 몰라도 오픈한지 4개월 만에 200명 이상의 "좋아요" 를 받으면서 정말 큰 관심을 받고 있다.

 

커뮤니티 페이지를 만들면서 동시에 커뮤니티의 홈페이지인 html5korea.co.kr 도메인을 등록, Xpress Engine을 얹혀서 사이트를 만들었다. 사실 처음에는 oreilly 사의 HTML5 Mobile Web Development 라는 인강을 들으면서 내 나름대로 번역하여 놓을 만한 공간이 필요하여 만들어 두었는데, 욕심일까. 이참에 html5와 관계된 외국의 양질의 문서들을 번역하고 이를 토대로 국내의 커뮤니티를 만들어서 운영할 생각으로 나름대로 로고도 만들고 메뉴구상도 하였다.

그러다 보니 html5 에서 내가 기대하고 있는 "모바일 웹" "CSS3" 등의 카테고리를 담고 html5 뿐만 아니라 웹 프로그래머/디자이너/기획자 의 생각을 함께 나누고 접할 수 있는 웹 개발의 전반적인 커뮤니티로 나아가도록 생각하고 있다. 정말 솔직히 의도는 좋은데 아직까지도 어떤 식으로 사이트의 레이아웃을 구상하고 사용자들의 활동을 유도해야 할 지는 아직도 의문이다.

무엇보다 나는 이 커뮤니티에서 "불펌" 을 하지 않는다는 룰(rule)을 세웠다. 그러다 보니 자료가 많이 없다. 아직 대부분의 글이 내가 스스로 외국에서 찾고 번역한 글이다. "창작"은 아니지만, 적어도 불펌은 아니고, 원작자를 표기하고 나 나름대로 "번역"이라는 수고를 가했다. "불펌"이 없는다는 것은 그 만큼 컨텐츠 생산을 위해 노력을 해야 한다는 것이고, 결론적으로는 양질의 컨텐츠 생산에 필수적인 요소라고 생각한다. 

하지만 아무리 이렇게 거창한 계획을 세운다 해도 나 또한 실생활에서 사회적 활동에 참여하고 있는 사람으로써 한계가 분명 존재하기 마련이다. 실제로 일이 바쁠 때에는 사이트가 몇주 씩 운영이 안되고 새로운 글 또한 올라오지 못한다. 가입자는 100명이 넘었는데, 아직도 활발한 커뮤니티 운영이 되지 않고 있다.

무엇때문일까? 일단 사이트의 메뉴 자체가 너무 많다. 욕심을 너무 부려서일까, 아직 어떠한 글도 올라오지 않은 게시판이 많다. 나 자신도 html5 관련 사이트들과 awwward같은 디자인 갤러리 등의 RSS를 구독하면서도 몇일 씩 읽지를 못해서 쌓이곤 한다. 하지만 사이트가 유지되기 위해서는 정보가 필요하고, 정보를 양산하기 위해서는 다량의 정보를 접하고, 이를 번역하는 능력과 기술적으로 해독할 수 있는 능력이 필요하다.

그래서일까, 7월부터는 영어의 중요성을 깊히 인식하고 작게나마 TOEIC을 시작하였다. 물론 이러한 문제풀이 방식의 시험이 얼마나 큰 도움이 되는지에 대해 주변에서 우려를 표하고 있지만 생각보다 나의 영어에 대한 기본기를 잡아주는 데에 큰 도움이 되고 있다. 다만 시험 공부때문에 시간을 더욱 더 할애하지 못하여 더욱이나 사이트가 더 운영이 안되고 있다 생각되지만, 그래도 전보다 더 매끄러운 번역을 맛보게 되니 좋은 것 같다.

여튼 올해 내로 내게 주어진 숙제는 보다 효율적인 컨텐츠 양상과 사이트의 구조적인 정리, 그리고 사용자 접근성이다. 여기서 접근성은 "웹표준" 같은 접근성이 아닌 UX적 측면에서의 커뮤니티 이용자들의 편의를 말한다. 굳이 회원 가입을 통한 사이트 운영이 아닌 facebook connect 등의 소셜 로그인 제공, 그리고 메타 데이터를 통한 타 reader에서의 컨텐츠 접근 등이 내게 남은 과제이다. 

회사에서는 점차 병특 말년으로 업무적으로도 점차 정리되어가고 있는 추세이다. 물론 이번주는 좀 빡쎈 일정을 보냈지만.. 앞으로 남은 시간을 잘 활용해서 내가 설계한 html5 sharing reader로써의 길을 잘 개척해 나갈 수 있도록 노력해야겠다.
크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 메튜장

트랙백 주소 http://izect.kr/trackback/669 관련글 쓰기

댓글을 달아 주세요


원문 : Start Using HTML5 WebSockets Today

번역 : Mattew, Chang(www.izect.kr)
(이 글은 한국 HTML5 사용자 모임에 기고된 글입니다.)  


(역자주)

웹 소켓에 대해 간단히 따라할 수 있는 튜토리얼입니다. 간단히 채팅을 구현해 봄으로써, 웹 소켓과 서버의 송수신에 대해 가볍게 이해하는 데 많은 도움이 될 것입니다. 약 1년 전에 작성된 튜토리얼이니 감안하시고 보세요 ^^


HTML5 의 새로운 멋진 기능 중 하나가 바로 서버랑 AJAX 가 없이도 사용 가능한 웹 소켓입니다. 이 튜토리얼에서 우리는 PHP 서버를 통한 웹 소켓이 어떻게 진행되는가를 알아보고, 클라이언트끼리 메시지를 주고 받으며 웹 소켓 프로토콜의 사용법을 알아보겠습니다.


웹소켓은 무엇인가?

웹 소켓은 TCP 소켓의 두가지 방법으로 커뮤니케이션 하는 일종의 푸시(PUSH) 기술이다. 표준화는 아직 진행중이지만, 크롬과 사파리의 최신 버전에서는 웹 소켓을 지원한다.


왜 웹소켓으로 바꿔야 하는가?

웹 소켓은 긴 풀링(pool, 각각의 요청에 따라 풀 객체를 생성하는 방식)을 대체할 수 있습니다. 풀 방식은 클라이언트는 서버가 전달할 데이터가 없더라도, 서버측에서 최신의 데이터가 전송할 준비가 될 때까지 서버로 요청(request)을 보냅니다. 요청을 받은 후 다른 요청을 보냅니다. 장점은 이미 열려있는 커넥션을 사용하며 또다른 커넥션을 필요로 하지 않는다는것인데, 긴 풀링 방식은  요청(request)에 타임아웃이 일어날 수 있고 이렇게 될 경우 어쨌든 간에 새로운 커넥션을 생성해야 합니다. 

많은 Ajax 어플리케이션이 많이 사용되지만 이는 가끔 쓸때없는 자원 낭비를 유도할 수 있습니다.

만약 모닝콜을 원하는 사람에게 서버가 미리 생성된 커넥션 없이 데이터를 클라이언트에 알아서 보내주게 된다면 놀랍지 않을까요? 푸쉬 기술의 세계에 오신 것을 환영합니다 !

Step 1: 웹소켓 서버 얻기

본 튜토리얼은 서버의 구현보다는 클라이언트를 생성하는데 초점을 둘 것입니다.

저는 윈도우 7 에서 XAMPP를 사용하여 PHP 서버를 로컬로 돌렸습니다. phpwebsockets라는 PHP 웹 소켓 서버를 복사해서 구동하였습니다.(참고 : 이 phpwebsockets 버전에서 저는 약간의 문제를 경험했으며, 몇몇 부분을 수정하였고, 소스파일을 추가할 것입니다.) 다양한 웹소켓 구현방법이 있으니 만약 phpwebsockets이 안되면 아래의 다른 것을 사용해서 웹소켓 서버를 구현하시고 본 튜토리얼을 계속 진행해 보세요.


아파치 서버 시작

1.jpg

Step 2: URL과 포트 변경

여러분이 설치한 서버 파일에 몇몇 수정이 필요합니다. 예를 들어 setup.class.php 의 경우:

  1. public function __construct($host='localhost',$port=8000,$max=100)  
  2. {  
  3.     $this->createSocket($host,$port);  
  4. }  

위와 같이 URL과 포트 부분을 파일들을 찾아서 적당히 수정하도록 합니다.


Step 3: 클라이언트 제작

간단한 HTML 파일을 만들어 봅시다. 아래는 제가 만든 client.php 입니다.:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  
  5.   
  6. <title>WebSockets Client</title>  
  7.   
  8. </head>  
  9. <body>  
  10. <div id="wrapper">  
  11.   
  12.     <div id="container">  
  13.   
  14.         <h1>WebSockets Client</h1>  
  15.   
  16.         <div id="chatLog">  
  17.   
  18.         </div><!-- #chatLog -->  
  19.         <p id="examples">e.g. try 'hi', 'name', 'age', 'today'</p>  
  20.   
  21.         <input id="text" type="text" />  
  22.         <button id="disconnect">Disconnect</button>  
  23.   
  24.     </div><!-- #container -->  
  25.   
  26. </div>  
  27. </body>  
  28. </html>​  

이 코드로 우리는 채팅 로그를 위한 박스와, '연결 끊기' 버튼이 있는 간단한 템플릿을 만들었습니다.


Step 4: 몇몇 CSS 추가

굳이 다 꾸밀 필요는 없으니, 간단히 몇개의 엘리멘트들만 돋보이게 해봅시다.

  1. body {  
  2.     font-family:ArialHelveticasans-serif;  
  3. }  
  4. #container{  
  5.     border:5px solid grey;  
  6.     width:800px;  
  7.     margin:0 auto;  
  8.     padding:10px;  
  9. }  
  10. #chatLog{  
  11.     padding:5px;  
  12.     border:1px solid black;  
  13. }  
  14. #chatLog p {  
  15.     margin:0;  
  16. }  
  17. .event {  
  18.     color:#999;  
  19. }  
  20. .warning{  
  21.     font-weight:bold;  
  22.     color:#CCC;  
  23. }  

Step 5: 웹소켓 이벤트들

먼저 웹소켓의 이벤트들을 이해해 봅시다.


 

The Events

우리는 아래 세가지의 이벤트를 사용할 것입니다.

  • on open: 소켓이 열리는 시점
  • on message: 메시지가 도착할 시점
  • on close: 소켓이 닫히는 시점

그런데 어떻게 이것들을 구현할까요?

먼저 웹 소켓 오브젝트를 만듭니다.

  1. var socket = new WebSocket("ws://localhost:8000/socket/server/startDaemon.php");  

그리고 간단히 이벤트가 동작하는지 확인해 봅니다.

  1. socket.onopen = function(){  
  2.     alert("Socket has been opened!");  
  3. }  

그런데 메시지를 받으려면 어떻게 해야 할까요?

  1. socket.onmessage = function(msg){  
  2.     alert(msg); //Awesome!  
  3. }  

자 이제, 경고창 대신 실제로 저희가 클라이언트 페이지에서 사용할 것들을 통합해 봅시다.


Step 6: JavaScript

본론으로 들어와 다시 코딩을 시작해 봅시다. 먼저 jQuery의 document ready 함수 공간을 만들고, 사용자가 웹 소켓을 브라우저에서 사용 가능하게 했는지를 확인합니다. 만약 사용 불가하다면, 크롬 브라우저의 링크를 HTML 에 붙힙니다.

  1. $(document).ready(function() {  
  2.     if(!("WebSocket" in window)){  
  3.         $('#chatLog, input, button, #examples').fadeOut("fast");  
  4.         $('<p>Oh no, you need a browser that supports WebSockets. How about <a href="http://www.google.com/chrome">Google Chrome</a>?</p>').appendTo('#container');  
  5.     }else{  
  6.   
  7.     //The user has WebSockets  
  8.   
  9.     connect();  
  10.   
  11.     function connect(){  
  12.         //the connect function code is below  
  13.   
  14.     }  
  15. });  

보다시피 유저가 웹소켓을 사용하고자 한다면 connect() 함수를 호출합니다. 이 함수는 "우리는 커넥션을 열고, 닫고 이벤트를 수신받을 것이다" 라는 기능을 합니다.

그리고 서버의 주소를 정의합니다.
  1. var socket;  
  2. var host = "ws://localhost:8000/socket/server/startDaemon.php";  

흠, 주소에서 http가 어디갔죠? 그렇습니다. ws가 붙은 것이 웹소켓의 URL입니다. 즉, 웹소켓은 HTTP와는 다른 프로토콜을 사용한다는 것이지요. 위 URL의 부분을 설명하면 다음과 같습니다.

 

connect() 함수를 계속 만들어 봅시다. 일단 try/catch문을 만듭니다. 만약 문제가 생겼다면 유저가 알 수 있도록 해야 합니다. 새로운 웹 소켓 객체를 만들고 전달받은 메시지를 메시지 함수(나중에 구현할 껍니다.)를 통해 보여줍니다. 그리고 onopen, onmessage, onclose 함수를 새로 만듭니다. 참고로 유저의 소켓 상태를 보여줄 수도 있지만, 별로 필요하지 않습니다. 허나 디버깅에 도움이 되므로 여기서 저는 포함하도록 하겠습니다.

  • CONNECTING = 0
  • OPEN = 1
  • CLOSED = 2
  1. function connect(){  
  2.     try{  
  3.   
  4.     var socket;  
  5.     var host = "ws://localhost:8000/socket/server/startDaemon.php";  
  6.     var socket = new WebSocket(host);  
  7.   
  8.         message('<p class="event">Socket Status: '+socket.readyState);  
  9.   
  10.         socket.onopen = function(){  
  11.              message('<p class="event">Socket Status: '+socket.readyState+' (open)');  
  12.         }  
  13.   
  14.         socket.onmessage = function(msg){  
  15.              message('<p class="message">Received: '+msg.data);  
  16.         }  
  17.   
  18.         socket.onclose = function(){  
  19.              message('<p class="event">Socket Status: '+socket.readyState+' (Closed)');  
  20.         }             
  21.   
  22.     } catch(exception){  
  23.          message('<p>Error'+exception);  
  24.     }  
  25. }  

message() 함수가 상당히 간단하죠? 이 함수는 우리가 보여주고자 하는 유저의 채팅 로그창에 텍스트를 보여줍니다. 위에서 만든 함수에서 <p> 테그를 한짝만 사용해서 붙혀놨는데, message() 함수에서 </p>로 닫습니다. 

  1. function message(msg){  
  2.     $('#chatLog').append(msg+'</p>');  
  3. }  

더 나아가서…

여기까지 따라오셨다면, 일단 성공입니다. 기본적인 HTML/CSS 문서를 만들었고, 웹소켓 커넥션을 생성하고 사용자의 업데이트 된 상태를 커넥션을 통해 유지합니다.

page.jpg 

Step 7: 데이터 전송

이제 자바스크립트에서 유저의 키보드 입력을 감지할 수 있으니, submit 버튼보다는 send 함수를 만드는게 좋겠습니다. '13'이 ASCII 코드 중에 엔터 버튼을 나타냅니다.

  1. $('#text').keypress(function(event) {  
  2.     if (event.keyCode == '13') {  
  3.         send();  
  4.     }  
  5. });  

그리고 send() 함수를 만듭니다.

  1. function send(){  
  2.   
  3.     var text = $('#text').val();  
  4.     if(text==""){  
  5.         message('<p class="warning">Please enter a message');  
  6.         return ;  
  7.     }  
  8.     try{  
  9.         socket.send(text);  
  10.         message('<p class="event">Sent: '+text)  
  11.     } catch(exception){  
  12.     message('<p class="warning"> Error:' + exception);  
  13.     }  
  14.   
  15.     $('#text').val("");  
  16.   
  17. }  

다른 것보다 여러분이 반드시 기억해야 할 코드는 이것입니다.

  1. socket.send(); //Thanks JavaScript  

이 확장 코드는 많은 것을 합니다. 유저가 엔터를 누르지 않더라도 계속적으로 값을 리턴하고, 인풋 박스를 초기화 하고, 메시지 함수를 호출합니다.


Step 8: 소켓 닫기

소켓을 닫는 것은 간단합니다.: disconnect 버튼의 클릭 이벤트 핸들러에 아래 코드만 붙히면 끝납니다!

close.jpg 
  1. $('#disconnect').click(function(){  
  2.     socket.close();  
  3. });  

전체 자바스크립트 소스

  1. $(document).ready(function() {  
  2.   
  3.   if(!("WebSocket" in window)){  
  4.   $('#chatLog, input, button, #examples').fadeOut("fast");  
  5.   $('<p>Oh no, you need a browser that supports WebSockets. How about <a href="http://www.google.com/chrome">Google Chrome</a>?</p>').appendTo('#container');  
  6.   }else{  
  7.       //The user has WebSockets  
  8.   
  9.       connect();  
  10.   
  11.       function connect(){  
  12.           var socket;  
  13.           var host = "ws://localhost:8000/socket/server/startDaemon.php";  
  14.   
  15.           try{  
  16.               var socket = new WebSocket(host);  
  17.   
  18.               message('<p class="event">Socket Status: '+socket.readyState);  
  19.   
  20.               socket.onopen = function(){  
  21.                  message('<p class="event">Socket Status: '+socket.readyState+' (open)');  
  22.               }  
  23.   
  24.               socket.onmessage = function(msg){  
  25.                  message('<p class="message">Received: '+msg.data);  
  26.               }  
  27.   
  28.               socket.onclose = function(){  
  29.                 message('<p class="event">Socket Status: '+socket.readyState+' (Closed)');  
  30.               }           
  31.   
  32.           } catch(exception){  
  33.              message('<p>Error'+exception);  
  34.           }  
  35.   
  36.           function send(){  
  37.               var text = $('#text').val();  
  38.   
  39.               if(text==""){  
  40.                   message('<p class="warning">Please enter a message');  
  41.                   return ;  
  42.               }  
  43.               try{  
  44.                   socket.send(text);  
  45.                   message('<p class="event">Sent: '+text)  
  46.   
  47.               } catch(exception){  
  48.                  message('<p class="warning">');  
  49.               }  
  50.               $('#text').val("");  
  51.           }  
  52.   
  53.           function message(msg){  
  54.             $('#chatLog').append(msg+'</p>');  
  55.           }  
  56.   
  57.           $('#text').keypress(function(event) {  
  58.               if (event.keyCode == '13') {  
  59.                 send();  
  60.               }  
  61.           });     
  62.   
  63.           $('#disconnect').click(function(){  
  64.              socket.close();  
  65.           });  
  66.   
  67.       }//End connect  
  68.   
  69.   }//End else  
  70.   
  71. });  

Step 9: 웹소켓 서버 구동

커멘드 라인 접근이 필요하지만, 운좋게도 XAMPP는 사용하기 쉬운 쉘 옵션을 제공합니다. XAMPP 의 컨트롤 패널에서 'Shell'버튼을 누르고 아래를 입력하세요.

php -q path\to\server.php

이렇게 하면 웹소켓 서버가 시작됩니다!

2.jpg 

마지막

페이지가 로딩되면 웹 소켓 커넥션이 설립(established)할 것을 시도합니다. (connect/disconnect 옵션을 한번 만들어 보세요) 그러면, 우저는 메시지를 치고 서버로 메시지를 보냅니다.

example.jpg 

이것이 웹소켓 입니다!

읽어주셔서 감사합니다. 이 튜토리얼이 흥미로우셨길 바라며, 기억할 것은 웹소켓을 통해 즐기셨으면 좋겠습니다. 많은 것은 변할 것이고, 여러분은 W3C WebSocket API 에서 업데이트 되는 정의를 토대로 최신의 기술을 시도해 볼 수 있을 것입니다.

크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 메튜장

트랙백 주소 http://izect.kr/trackback/650 관련글 쓰기

댓글을 달아 주세요


 


HTML 발전에서 HTML5 여태 개발되었던 사이트들의 신선한 공기처럼 다가왔습니다. "플래시 킬러" "새로운 거대한" "미래의  디자인등의 수식어가 붙은 HTML5 우리들에게 다가오고 있습니다심지어 웹디자이너에게도 HTML5다시한번 우리들을 즐겁게 만드는  놀라운 툴로 다가왔습니다.


여기 작은 웹의 수집이 HTML5로써의 구조화가 말해주는 즐거움을 알려줄 것입니다.


(역자주 : 솔직히 아래 사이트들 전부  추천입니다.. 제겐 솔직히 신선한 디자인적 충격을 안겨주었습니다.)



트론 웹사이트


HTML5 캔버스의 요소들을 정말 놀라우리만큼  사용했습니다즐겨보세요.


Tron-Legacy-2011-07-12-03-42-42.png 


자라 미디어 디자인


디자인 에이전시 회사의 홈페이지로 컨텐츠를 매끄러운 가로 스크롤로 보여줍니다.

Zara-Media-Design-Group-2011-07-12-01-21-35.png 


Karlsruhe 블로그


Webdesign-Karlsruhe-Blog-2011-07-12-01-43-25.png 


비주얼라이즈( visualise)

캐나다의 마이크로 블로깅 플렛폼입니다.


visualise.ca-–-un-micro-blog-par-Gab-Labelle-artisan-numérique-montréalais-–-photographie-web-design-vidéo-idéation-trucs-perso-et-+++-2011-07-12-02-04-59.png 


버튜티 디자인 스튜디오


Virtuti-D.-Home-based-small-design-studio-from-Tel-Aviv-Israel.-Websites-and-graphics.-HTML5.-User-side-web-development.-2011-07-12-02-02-49.png 


퓨마 웹사이트

Untitled-11.jpg 


토오타 프리우스 프로젝트

Toyota-Prius-Projects-2011-07-12-01-44-16.png 



와이어드 마인드

와이어드 마인드는 Wored.co.uk 컨텐츠를 다른 방식으로 탐험해   있는 시각효과를 제공해 줍니다. MS IE 9브라우저와 파트너쉽을 맺고 매우 빠른 표준 브라우저에서 여러분이   있는 것이 무엇인지를 보여줍니다.

(역자주 : 상당히 시각적이면서도 놀라운 디자인과 브라우징 방법을 보여줍니다꼭꼭 방문해 보시기를 추천합니다.)


The-Wired-Mind-at-Wired.co_.uk-Visualising-the-Future-of-Technology-News-and-Reviews-Wired-UK-2011-07-12-01-36-43.png 


황야의 시내(the wilderness downtown)


The-Wilderness-Downtown-2011-07-12-01-52-34.png 


불릿 에이전시(The Bullit Agency)


미칠듯한 효과로 아티스트들을 보여줍니다슬라이드  없이 부드럽게 컨텐츠를 이동하고메뉴들이 위치를 이동합니다.

(역자주 : 정말 멋진 사이트입니다 방문하셔서 멋진 디자인 효과를 살펴보시길..)


The-Bullitt-Agency-A-full-service-exclusive-booking-agency-for-top-international-djs-producers-2011-07-11-16-13-46.png 


S5 스타일 포트폴리오


캔버스로 무엇을   있는지에 대해 아름다운 예제를 보여줍니다처음 제가 보았을때는 플래시인줄 알았는데아니었습니다!

S5-Style-Hello-world.-2011-07-12-01-59-37.png 


 에드워드의 포트폴리오


ROBEDWARDS.ORG-Web-Graphic-Design-2011-07-12-02-01-29.png 



레드스퀘어 에이전시

Red-Square-Agency-2011-07-12-01-34-04.png 


안투안 (Antoine Wette)  포트폴리오

Portfolio-Of-Antoine-Wette-2011-07-12-01-42-44.png 


리카드 선드의 포트폴리오

 사이트는 신선한 공기와도 같습니다다른 사진작가들과 협력하여 사이트를 만들었습니다플래시를 사용하지 않고 단지HTML5 자바스크립트만을 사용하였습니다최적화된 사진을 내려받으며  괜찮은 슬라이딩 애니메이션/네비게이션이 가능합니다정말 멋진 사이트인  같습니다.

Photography-by-Rickard-Sund-2011-07-12-01-51-02.png 


 나은 세상나이키 캠페인 웹사이트(Nike Better World Campaign website)

Nike-Better-World-2011-07-12-01-40-02.png 


nGen Works

nGen-Works-2011-07-12-01-41-42.png 



맥킨니 에이전시(McKinney Agency)

McKinney-2011-07-12-01-47-56.png 



Kzauhide Fukuyama Portfolio

kzxtreme-Kazuhide-Fukuyama-the-web-designer-and-front-end-developer-2011-07-12-01-23-43.png 


Klokkerent shop

KLOKKERENT-design-watches-and-sunglasses-Normal-Timepieces-Extra-Normal-Grande-2011-07-12-01-51-54.png 



Harpoon Pictures Directors

Harpoon-Pictures-Directors-2011-07-12-01-41-02.png 


고업 커뮤니케이션 그룹(Go Up Communication group)

GO•UP-Communication-group-it.png 


고스트 홀스(Ghost horses)

Ghost-Horses-Totally-Ace-Website-Design-Development-in-Manchester-2011-07-12-03-18-12.png 



무료 에이전트 디폿(FreeAgent Depot)

FreeAgent-Depot-—-A-furtive-glance-behind-the-wizards-curtain-2011-07-12-01-56-56.png 


페시오 디자인(Facio Design)

Facio-Design-Essex-Web-Design-iPhone-iPad-UI-Design-HTML-Email-Design-2011-07-12-01-30-44.png 


엠파이어 스테이트 리코딩


HTML5 오디오 테그들을 멋지게 구현하였습니다.

Empire-State-Recordings-House-Music-House-Music-Record-Label-House-Mixes-House-Remixes-2011-07-12-01-29-05.png 


카탈린 보로이(Catalin Boroi) 포트폴리오

HTML5 만든 깔끔한 디자인의 홈페이지 입니다.

efingo-2011-07-12-01-57-52.png 


디지털 핸드 에이전시(Digital Hands Agency)

Digital-Hands-Online-Brand-Communication-Social-Media-Consultancy-Online-Campaign-Practices-Mobile-Marketing-2011-07-12-01-58-26.png 


다니엘 스콜턴(Daniel Scholten)

Daniel-Scholten-★-Kriminalromane-2011-07-12-02-02-14.png 


컬쳐럴 솔루션 UK(Cultural Solution Uk)

cultural-solutions-uk-I-Lincolnshire-based-cultural-consultancy-I-research-planning-events-management-services-2011-07-12-01-33-07.png 


카펜 디지털 에이전시(Cappen Digital Agency)

Cappen-Agência-Digital-SEO-Criação-de-Web-Sites-Portais-Flash-Site-Sistemas-Bluetooth-Touchscreen-E-commmerce-Web-Agency-Recife-Pernambuco-Brasil-+55-81-3241.5288-2011-07-12-01-55-21.png 


Büro Maisengasse Gassee

Büro-Maisengasse-Grafische-Gestaltung.-Medienentwicklung-Landeck-in-Tirol-2011-07-12-01-32-15.png 


BountBev

BountyBev-Bringing-the-Reward-of-American-Craft-Beer.-2011-07-12-01-56-00.png 


  보디가드

Ben-the-Bodyguard.-Protecting-your-data-on-iPhone®-and-iPod-touch®-2011-07-12-01-47-05.png 


에스페시 제펜(Aspesi Japan)

ASPESI-OFFICIAL-SITE|アスペジ-オフィシャルサイト-2011-07-12-01-35-47.png 


에어워크

 회사는 보드 스포츠 문화에 혁명을 일으키고 있는 회사입니다온라인 샵이 멋진 터치들로 이루어져 있고세로 슬라이더,비디오애니메이션 등이 있습니다눈으로 즐기세요!


AIRWALK-2011-07-12-01-49-22.png 


Octave and Octave

Octave & Octave  디자인과 모바일  기반의 신세대 에이전시 입니다.

Agence-web-paris-design-et-developpement-application-web-2011-07-12-02-03-26.png 

데이브 가마체(Dave Gamache) 2010년의 중요한 7가지

 페이지는 데이브의 2010년의 특별한 순간들을 표현했습니다전체화면의 배경 화면에 오버래핑 되는 세로 네비게이션은정말 질리지 않더군요.



7-Best-Things-of-2010-by-Dave-Gamache-2011-07-12-01-53-34.png 


결론

HTML5  CSS3 조합그리고 자바스크립트의 엄격한 구현은 새로운 관점의 유저 경험을 가져옵니다단지 디자인적으로 작은 HTML5 단계의 변화가 있을지라두요새롭고 희망적인 것들이 HTML5 통한 디자인에서 나올 것을 우리는 기대해봐야 겠습니다.


(이 글은 한국 HTML5 사용자 모임에 기고된 글입니다.) 

 

크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 메튜장

트랙백 주소 http://izect.kr/trackback/649 관련글 쓰기

댓글을 달아 주세요


어도비 에찌는 새롭게 다가오는 어도비의 제품 중 하나로, HTML5 애니메이션을 만들 수 있는 도구입니다. 아직까지 정확한 언급은 없지만 만약 여러분이 FutureSplash 애니메이터와 어도비의 놀라운 멀티미디어 작품 제작에 대해 어떤 일이 있었는지 기억한다면, 어도비 에찌가 가져올 것에 대해 상상해 볼 수 있을 것입니다.



어도비 에찌의 데모 버전은 6월 말쯤에 릴리즈 되었는데, 어도비 라이트룸이라는 포토 스튜디오 어플리케이션과 비슷한 인터페이스로 선보였습니다. 아마도 크로스 플렛폼 배포를 용이하기 위해 Lua로 비슷하게 작성한 듯 싶습니다. 같은 맥락으로 어도비 에찌는 HTML5로 작동되는 데스크톱 브라우저와 최신 모바일 기기에서 작동하는 애니메이션을 만들 것입니다.


아래 데모 영상을 보며 저는 유저들이 오브젝트와 이벤트에서 생성되는 스크립트를 보는 다이얼로그가 있는지 약간 기대했었습니다. 허나, 이런 일은 없었습니다. 불행이도 이 데모는 어떤 상호작용도 없습니다. 만약 어도비가 이러한 다이얼로그를 붙힌다면, 이 툴은 게임개발에 있어서 멋진 플렛폼으로써 툴이 될 것입니다.




번역 : Mattew, Chang(www.izect.kr)

(이 글은 한국 HTML5 사용자 모임에 기고된 글입니다.) 
크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 메튜장

트랙백 주소 http://izect.kr/trackback/647 관련글 쓰기

댓글을 달아 주세요




최근 판도라의 기업 공개로 인해 그들의 유저가 1억명에 달했고 새롭게 리디자인을 하기로 하였습니다.

불필요한 플래시를 HTML5로 교체하고 새로운 디자인을 먼저 몇몇의 구독자들에게 공개하고 향후 몇주 내로 다른 유저들에게도 공개하기로 하였습니다.

아직 저희가 새로운 판도라를 접하지는 못했지만, 들리는 바에 의하면 더 빠르고 쉽게 사용이 가능하다 합니다. 레이아웃에는 큰 변화가 없지만, 새로운 몇몇 기능이 생겼습니다.
사이트의 가장 상단에는 컨트롤 바가 존재하고 클릭을 통해 가사를 보이게 하고, 코멘트를 볼 수 있습니다. 또한 검색도 튜닝되었는데, 만약 새로운 방송국을 열게 된다면 입력과 동시에 드롭 다운 메뉴는 여러분의 취향에 맞는 제안을 할 것입니다.(투표와 기존 청취 내역을 토대로) 게다가 이를 통해 바로 검색을 할 수도 있습니다.

또한 판도라는 더욱 더 소셜화 되었습니다. 기존의 "뮤직 피드"는 "재생중(Now Playing)"으로 바뀌어 모든 여러분의 판도라 친구들에게 보여지고, 함께 듣고, 코멘트를 달거나 "좋아요(Liking)"를 할 수 있습니다. 프로필 또한 더욱 더 보기 좋게 바뀌었는데, 더 많은 소셜 위치 정보를 담고있어서 다른 유저들의 활동을 체크하고 그들을 쉽게 따라다닐 수 있습니다.(물론, 비공개 프로필 설정도 가능합니다.)

이러한 소셜화의 주된 목적은 유저들이 판도라 내에서(다른 소셜 사이트를 통하지 않고) 그들의 듣는(listening)활동과 다양한 활동을 공유하여 음악 소셜 네트워크로 구축하는 데 있는 것 같습니다.

엔터테인먼트 사이트들이 점점 소셜화의 길로 들어가고 있습니다. 애플의 핑(ping)이 주목할만한 노력을 하였고, 최근 페이스북과 통합된 Hulu역시 유저들에게 페이스북 친구들과 보는것(watching)과 특별한 순간의 비디오를 소셜 네트워크를 통해 공유하게 하였습니다. MOG(해외의 유료 음악감상 사이트)도 최근에 HTML5버전의 플레이어를 공개하면서 페이스북의 커넥트를 달아서 꽤나 추천할 만 합니다.

이러한 보고듣는(watching/listening) 소셜 트랜드에 대해 어덯게 생각하시나요? 여러분의 듣는 취향을 세계인들과 공유한다는게?

스크린샷 2011-07-13 오후 4.38.03.png

번역 : Mattew, Chang by izect.kr
크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 메튜장

트랙백 주소 http://izect.kr/trackback/646 관련글 쓰기

댓글을 달아 주세요



(이 글은 한국 HTML5 사용자 모임에 기고된 글입니다.) 
 
HTML5의 캔버스 요소를 사용해서 게임을 만드는 데 관계된 괜찮은 3개의 사이트를 소개합니다.

Auto-Resizing HTML5 Games (HTML5 Rocks)

Derek Detweiler 라는 Gopherwood 스튜디오의 게임 디자이너로써, 그들은 HTML5 를 통해 모바일 폰에서 호환 가능한 게임을 만들었다가 대부분의 스마트폰이 그들의 게임 일부분만 보여주는 것을 보고 어떠한 해상도에서도 게임을 원활하게 보여줄 수 있는 방법에 대해 생각하였습니다. 그러면서 그들이 생각한 최신의 모바일 웹 브라우저나 데스크탑 웹 브라우저에서 자동으로 리사이징 되는 게임 컨텐츠의 레이어에 대한 계산법 및 컨텐츠의 배치 등을 설명합니다. (더보기)


GUIMark 3 – Mobile Showdown (Craftymind)

스마트폰의 모바일 웹에서 캔버스에 표현된 게임은 얼마나 빠를까요? 이 사이트는 GUIMark 3라는 자체적인 벤치마킹 기술을 통해 디바이스의 랜더를 초당 60프레임으로 강제로 잡고 모바일 장비의 성능을 측정합니다. 비트맵,백터,연산,비디오 코덱 등의 게임개발에 자주 사용되는 html5 기술을 아이폰,안드로이드폰,아이패드,갤렉시탭 등에서 테스트 하여 보여줍니다.(더보기)



본 de Batiste Bieler 라는 블로거는 최근 Realm of the Mad God 이라는 게임을 보고 맵의 스크롤링에 대해 꽤나 놀랐나 봅니다. (실제로 플래시 게임이지만 꽤나 빠릅니다.) 이에 그는 크롬,오페라,파이어폭스에서 간단한 맵 스크롤을 sprite.js 라는 라이브러리를 통해 구현하고 이를 1개의 <canvas> 테그를 통해 계속 새로 그려주는 방식과 9개의 캔버스를 사용하여 서로 교체하는 방식으로 구현하여 비교한 결과를 보여줍니다.(이런 비교를 할 생각을 하다니.. 대단하네요.) (더보기)



원문 : 3 Useful HTML5 Canvas Links from Around The Web

번역 : Mattew, Chang(http://izect.kr

크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 메튜장

트랙백 주소 http://izect.kr/trackback/645 관련글 쓰기

댓글을 달아 주세요




스텍 오버플로어의 여러 글들을 보다가 괜찮은 글이 있어서 미흡하지만 번역해 봤습니다.

중학생이 웹 개발자의 길을 꿈꾸며, html5와 css3를 어떻게 공부해 나가야 하는지에 대해 올린 질문에

Manuel Strehl 이라는 독일 레겐스브로크에서 웹 개발자로 활동하는 분의 답글입니다.


개인적으로 이 글을 읽으면서, 확실히 뭔가 관심을 가지고 접근한다는 그런 방향성이 우리나라의 IT 주입식 교육과는 많이 다르다는 것을 느끼네요.

물론, 이 사이트를 방문하는 대부분의 분들이 웹을 정말 사랑하고 관심있어 해서 여기까지 온 것이 아닌가 싶지만 말입니다. ^^


특히 Manuel이 추천하는 사이트 중 몇몇 개는 꽤나 쓸만한 것 같습니다. 물론 죄다 영어이지만.. 그리고 솔직히 말해 HTML5 의 로드맵이라기 보단 웹개발의 전반적인 부분에 대한 내용입니다.특히 개발자라고 디자이너의 영역을 무시하거나, 디자이너라고 개발자의 영역을 무시하는 것을 반대하는 그의 태도는 참으로 공감할 만 한 것 같습니다.


오역이 많은데, 양해하고 봐주시기 바랍니다.


원문 : http://stackoverflow.com/questions/4744906/would-you-recommend-starting-from-html5-css3-for-beginners

번역 : Mattew, Chang (http://izect.kr)


쉬운 것을 먼저 배워라

HTML5 공부를 시작하기 이전에, HTML4 는 HTML5 중의 하나이고, 또한 CSS2도 CSS3의 일부분 이라는 것을 알아야 합니다. 이에 제가 제안하는 HTML5 공부를 시작하는 법은 이전의 기술을 먼저 배우는 것입니다. 특히나 HTML4 는 HTML5와 CSS3의 새로운 면을 배우는 데 자극이 될 것입니다. 


HTML5 튜토리얼들의 문제점은 그것들은 따뜻한 봄날 아침의 데이지꽃이 생기는 것과도 같습니다. 무슨말이냐, 이러한 튜토리얼은 대부분 좋은 것만 가르칩니다. 그러나 초보자인 당신은 차별성을 갖기 위해 초심자를 위해 쓰여진 문서나 (X)HTML을 경험한 사람들의 더 실무적인 내용 등을 습득하는 등의 어려운 결심을 해야 합니다. 바로 HTML5 를 시작하는 것이 HTML4 의 튜토리얼보다 더 많은 혼란을 가져오는 것처럼 말입니다. 


'나의 경험'


공부를 하기 위해 다양한 사람들이 서로 다른 행동을 하겠지만, 저의 웹 개발 공부의 길을 요약하면 아래와 같습니다.


  • 물리학과 대학원생이던 시절, 웹 개발에 대한 어떠한 생각도 없었습니다. 그리고 전 생각했죠. "그래, 내 브라우저의 시작 페이지를 내 맘대로 설정하면 멋질 것 같아. " 그떄가 2004년이었고, iGoogle은 만들어지기 전이었습니다. 이처럼 여러분도 작은 프로젝트로 시작하고 작업해 보세요.


  • 운좋게도 저는 독일어를 할줄 알았고, 독일어로 된 괜찮은 HTML을 시작하는 자원(SelfHHTML)을 찾을 수 있었습니다. 하지만 이 사이트는 그 이후로  업데이트가 자주 되지 않습니다. 그리고 솔직히 이 사이트의 영문으로 된 자료의 퀄리티가 좋은지는 모르겠습니다. 이 사이트를 W3Schools 의 대용으로 사용하지 말기 바랍니다. 그러나, 아래와 같은 이유로 제가 특별히 어떤 튜토리얼의 어떤 부분이 좋은지 지적해 주기는 힘들 것 같습니다.


  • 제가 브라우저의 시작 페이지 제작을 끝내고, 저는 저의 RPG(Role Playing Game) 모임 홈페이지를 만들었습니다. 이 사이트는 몇몇의 HTML페이지로 구성되엇고, 이를 통해 저는 빠르게 CSS에 대해서 알 수 있었습니다. HTML페이지당 하나의 스타일 시트를 가지게 하엿는데, 이는 제가 처음으로 생각한 많은 파일들을 축적하기 위한 구조입니다. ('폴더 by 파일' 의 측면에서)


  • 이러한 부분에서 여러분은 배워야 할 많은 기술들을 알게 될 것입니다.

    • 저는 저희 모임의 사생활을 보호하기를 원했고, 이를 위해 HTTP 인증(Authentication) 을 배웠습니다.

    • 페이지마다 디렉토리를 만들고 그 안에 HTML 파일을 각각 두는 것은 URL과 절대 경로에 대해 빠르게 배울 수 있습니다.

    • RPG 모임의 FAQ섹션을 위해 저는 질문을 선택하면 미리 숨겨 놨던 답변이 나오도록 하였습니다. 이것이 저의 자바스크립트로써 입문이었습니다. 이 경험에서 얻은 것은 진짜(Real) 자바 스크립트 였습니다. 단순히 구글링 해서 jQuery 코드 따위를 카피하는 것이 아니였습니다.(jQuery 이전엔 그게 prototype이었죠.)


  • 다음으로 정적 HTML 파일을 서버로  옮겼습니다. 저는 PHP와 MySQL 이 매우 좋은 초보자를 위한 시작 코스라고 생각합니다.(제 소견으로는 php 는 간단히 서버측의 기술을 사용하기에 좋다 생각합니다.) 그리고 전 php가 가능한 작은 웹 공간을 확보했습니다. 가장 좋은 웹 서버에서의 'Hello World' 프로젝트는 저의 모임 웹사이트의 방명록 이었습니다.(물론 요즘은 Disqus 의 링크가 방명록보다 더 좋지만요.)


  • 그리고 튜토리얼들과 레퍼런스를 찾아봤습니다. 처음에는 가장 최초의 스팩 정의서인 PHP 메뉴얼과 HTML 4 명세서를 잠깐 보았습니다. 또한 W3C의 CSS 2 중 독립적으로 정의된 CSS의 속성들도 보았습니다. 그리고 늦게나마 이런 걸 느꼈습니다. "가능하면 스펙 명세서를 읽어라. 거기엔 아직 네가 이해하지 못한 부분이 있겠지만 그것보다 더 좋은 소스는 없다."


  • 이런 기술을 볼 때에도 웹에선 많은 신기술이 계속 나오고 요구되고 있었습니다. 그러나 가끔은 기초가 중요합니다.DOM, CGI, SVG, XML, XHTML과 HTML의 차이점, 정규식 표현, 파이썬, mod_rewrite, nginx, XSLT, PDF, RSS, RDF, Bash, SSH, Git, SVN, XSS, 유니코드, 웹폰트, Dublin Core, JSON, SQLite 등등.. 이 모든게 기초를 요하고 있습니다.


  • 결국 저정도의 단계까지 오게 된다면 여러분은 보다 더 전문적인 것을 요하게 될 것입니다. 허나 위험한 생각은 "나는 디자이너야. 불쾌한 코드따위는 건들지 않아." "B2B JSON이 JBoss 와 Hibernate에서는 최고라 생각해. 좋아. 나는 포토샵 따위는 필요없어."  그러나 제가 추측하건데, 아직도 가능한 많은 영역에서 순진하게 다가가는 것이 좋다 생각합니다.역자주:내가 왜 그런 디자인을 이해하는지, 프로그래밍적으로는 어떻게 돌아가는지 등등.. 이런 생각을 가지고서는 오래 가지 못합니다. 최소한 지금으로부터 5년 내로 우리는 면접관에게 'canvas 개발자' , '멀티미디어 마크업 전략가' , '크로스 플렛폼 UX 전문가' , '플래시 코드와 테이블에 기초한 HTML 이메일 템플릿 전문가' ,' 오프라인 캐시 보안 그룹' , '웹 스토리지 데이터베이스 엔지니어' 이런 생소한 용어들을 어필할 것입니다. 이보다 더 당신이 주된 관심을 가지고 최소한으로 이해해야할 것은 새로운 아이디어를 얼마나 유연하게 만들고 접근해 가는데 도움을 주느냐는 것입니다.( 더 중요한 것은 오래된 아이디어와 접근성을 새롭게 재 창출하는 문제일 껍니다.)

전 여러분을 기죽게 하기는 싫습니다. 제가 말하는 때에도 더 많은 HTML과 CSS의 배울거리가 생겨나고 있습니다. 그래도 이러한 제 경험과 생각은 더 멋지고 쿨한 개발자/디자이너가 되기 위한 조언입니다. 이를 잘 배우고 난다면, 당신의 프로젝트들이 분명 더 강력해 질 것입니다.



주목해야 할 사항

잘못된 자료를 가지고 공부하는 것은 잘못된 것입니다. 제가 제안컨데, 만약 모른게 생긱면 아마 여기(StackOverflow)에서 의견을 듣거나, chat.stackoverflow.com 에 물어보는게 더 나을 수 있습니다. 이 사이트에 질문할 때에는 기본적으로 소스를 함께 첨부하는게 좋습니다.


개인적으로는 드림위버같은 위지윅 에디터를 최대한 멀리 하셨으면 좋겠습니다. 아마 IDE나 이클립스 같은 추가기능이 있는 에디터를 사용할 것입니다. 저같은 경우는 GoLive에서 Notepad++ 로 바꿨고, 결국 Vim 에디터를 사용하게 되었습니다. 이는 취향의 문제이긴 하지만, IDE 소프트웨어가 우리도 모르게 뭔가를 숨기고 있거나 자동으로 생성하는 게 있다면 용량만 무거워지고, 우리가 예측하기 힘든 코드가 나올 껍니다.



추천하는 읽을거리들


다시한번 말하지만, 저는 여러분의 기를 죽이는 것이 아닙니다. 만약 여러분이 어떤 자료를 가지고 공부해야 하는지 헷갈린다면, 제가 몇개의 링크들을 제안해 드리겠습니다. 이 링크들은 종종 전문적인 레퍼런스로 많이 사용됩니다.


기본

  • W3.org - HTML과 CSS를 표준화 하는 기관

  • developer.mozilla.org - 파이어폭스 조직. 여기에는 좋은 HTML, CSS 그리고 cutting-edge 웹 개발 등의 튜토리얼이 있습니다. 그리고 개인적 소견으로는 자바스크립트 레퍼런스가 온라인에 현존하는 최고의 레퍼런스라고 생각합니다.

  • msdn.microsoft.com - 마이크로소프트 사의 HTML/CSS 문서입니다.

  • Safari Reference Library -매우 애플과 사파리에 초점을 맞춰진 곳입니다. 그러나 몇몇개는 꽤 읽을 만 합니다.

  • Opera Web Curriculum - 오페라의 웹 커리큘럼은 좋은 중요한 기술들의 요약입니다.

  • Validator - 당신의 코드가 에러가 없는지 유효성을 체크합니다. W3C에서 왔으며 몇몇의 중요한 웹 개발자의 툴을 제공합니다.

튜토리얼들

  • HTML5 Boilerplate - 이 프로젝트는 HTML5, jQuery에 기초한 웹 어플리케이션과 웹 사이트를 빠르게 개발하는 데 목적을 둔 프로젝트 입니다.  코드마다 모범 사례가 많이 있기 때문에 읽을 가치가 있습니다.  

  • A List Apart - 이 발행물은 웹 개발자와 사람들을 목적으로 하고 있습니다. HTML과 CSS를 활용한 많은 유용하고 중요한 방법과 사례가 이곳에 발행되어 있습니다.

  • Dive into HTML5 - 책이름과 가은 이 사이트는 특히나 HTML5에 중점을 두고 있어 아마 초보자들이 접하기에는 힘들 수도 있습니다. 하지만 이 사이트는 정확하고 잘 쓰여졌습니다.

  • CSS Zen Garden - "CSS기반의 디자인을 통해 시각적인 효과를 낼 수 있습니다." 이 사이트는 HTML4와 CSS2로 할 수 있는 놀라운 것들을 보여줍니다.

  • 24 Ways - 개발자들의 캘린더로, 잘 알려진 웹 개발자들의 흥미로운 글들을 모아서 보여줍니다.

개요

  • quirksmode.org - 브라우저와 호환성을 위한 사이트입니다 만약 여러분의 페이지가 IE, 파폭 오페라 등에서 차이점을 보고 싶다면 이곳을 방문해 보세요..

  • History of the WWW - 1995년부터 웹의 역사에 대해 W3C의 괜찮은 소개글을 보여줍니다. 

  • zvon.org - 만약 '레퍼런스'와 '튜토리얼'을 찾고 있다면 이곳을 들러보세요. 따라하기 쉽지는 않지만, 이곳의 자료는 꽤나 정확합니다.

  • Jacob Nielsen's Alertbox - 꽤 비판적인 시각에도 불구하고 이 제이콥 닐슨의 개인 페이지는 웹과 관련된 괜찮은 연구 결과를 모아서 보여줍니다. 

  • Periodic Table of HTML Elements - HTML5의 모든 요소에 대해 직관적이고 훌륭하게 보여주는 사이트 입니다.

  • CSSPlay - 많은 최신CSS의 트릭을 다루는 스튜 니콜의 공간입니다.

명세서들

  • w3.org/TR - W3C의 모든 규격의 명세서가 있습니다.(최신의 XML, HTML 그리고 CSS에 관련된 명세)

  • w3.org/TR/html4 - HTML4 의 모든 엘리먼트와 속성에 대해 설명해 놓은 공식 명세서 입니다.

  • 추가로 whatWG.org 은 W3C의 XHTML2에 반대하고 HTML5를 응호하는 다른 집단입니다. 이들의 맴버는 대부분 브라우저의 밴더들 입니다.

  • w3.org/TR/CSS2 - 공식 CSS 2.0 명세서 입니다.

  • RFC 1738 - URL이 어떻게 구성되어 있는지를 알려줍니다.

  • RFC 1945 - HTTP 1.0을 정의하는 인터넷을 통한 프로토콜의 전송을 설명해 줍니다. RFC 2616 는 HTTP 1.0의 후임격인 HTTP 1.1의 정의입니다.

  • ECMAScript Specification - ECMAScript 는 자바스크립트의 표주노하된 버전입니다. 솔직히 저는 이를 거의 본 적은 없습니다. 대부분 저는  the reference on mozilla.org 를 이용했지요.

  • Likewise for the DOM. 이러한 돔의 공식 사양은 W3C에 흩어져 정의되어 있지만 오래전에 네츠케이프와 인터넷 익스플로러는 DOM의 자신들의 버전을 구현했습니다.

  • php.net - PHP의 공식 홈페이지이며 공식 문서들이 있습니다.

  • Unicode Consortium - 만약 여러분이 아스키의 세계를 떠나 다국적 입력을 하게 된다면, 반드시 UTF-8과 유니코드를 잘 숙지해야 할 것입니다. 최대한 빨리 그들과 친구가 되세요.

기타등등

  • Smashing Magazine - 저는 종종 웹디자인과 프론트-엔드 개발에 대한 흥미로운 기사를 이곳에서 찾곤 합니다.

  • JSFiddle - 이 사이트는 HTML, CSS 그리고 자바스크립트를 혼합하여 즉시 보여줍니다. 간단한 코드 조각으로 테스트 하기에는 충분합니다.(예를 들어 스텍오버플로우닷컴의 몇몇 코드들 같이)

  • XAMPP - 윈도우나 맥의 환경에서 APM(Apache, Php, Mysql)을 간단히 설치할 수 있습니다.

  • Microformats.org - 이 사이트는 중상급 유저를 위한 사이트로, 마이크로 포멧은 HTML안에서 기계와 인간이 읽을 수 있는 데이터를 표현하려 합니다. 게다가 이러한 방법으로 어떻게 HTML 요소들과 속성들이 함께 사용되는지를 충분히 배울 수 있습니다.

  • CSS Resetr - CSS 리셋은 브라우저의 기본 속성들이 표현할 수 있는 스타일 시트 부분을 점선으로 보이게 합니다. 이를 통해 각각의 브라우저의 차이점을 알 수 있습니다.

  • FontSquirrel @font-face generator - 여기는 CSS 2.1의 @font-face 속성을 테스트 할 수 있는 좋은 공간입니다.  소스를 보면 좋은 영감을 얻을 수 있을 겁니다. 이와 비슷하게 Google WebFonts Directory 를 웹사이트에 응용할 수도 있습니다.

  • When can I use… - 이곳은 CSS3와 최신의 다른 속성들이 어떤 브라우저에서 얼마나 지원되는지를 차트로 보여줍니다.

  • FireBug - 만약 여러분이 파이어폭스 개발자라면, 이 애드온이 없이는 어디 웹서핑 할 생각 마십쇼. 저만 믿으세요.(그리고 대부분의 사람들이 그렇게 합니다.) (번역주: 전 파폭을 안써서 잘.. 모르겠지만 파이어버그가 짱인듯 합니다.) 

  • The Elements of Typographic Style Applied To The Web - 이 웹사이트는 "타이포그라피 스타일의 요소"에 대해 CSS와 웹 기술을 적용한 현명한 방법과 힌트를 제공합니다.(로버트 브링허스트가 가볍게 이를 읽으라고 제안했습니다.)

StackOverflow 닷컴의 괜찮은 Q&A 

책들

사실, 저는 HTML이나 CSS를 책을 통해 배운 적은 없습니다. 그래도 HTML4나 CSS2 는 새로운 기술에 꽤나 유연하게 대처해야 합니다. 저는 맹목적으로 오레일리 사에서 출판한 책을 추천하고 싶습니다. 꽤 많은 책들이 모두 잘 쓰여져있고 기술적으로도 정확합니다.

다른 몇명의 유저들이 추천하는 책들:

마지막으로 한마디

저는 항상 새로운 것을 배우고 발전시키며 제가 이미 배웠던 기술들을 더 깊게 발전시켜 나가려고 하였습니다. 만약 여러분이 HTML과 CSS 로 시작하고 이러한 기술을 배우기 원한다면 많은 문제점이 여러분에게 있을 것입니다. 그것이 무엇이든지 일단 소스코드는 볼 수 있습니다. 그리고 이를 배껴온다 하면 이제 보안에 대하여 깊히 고민해 봐야 할 것입니다.(이런 문제들 때문에 괜히 신용카드를 긁지 않기를 ;-))


하지만 계속 배우고, '소스 보기' 메뉴를 자주 활용하고, 계속 질문하세요(여기, 스텍오버플로어닷컴에, 그리고 많은 흥미있는 코멘트들이 달릴 것이며, 구글에 물어보면 흥미로운 포스팅을 볼 수 있을껍니다.) 여러분은 이러한 세상에서 사용자 경험과 정보를 만들어 가는 최고의 사람입니다. 웹 개발은 재밌습니다!

크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 메튜장

트랙백 주소 http://izect.kr/trackback/644 관련글 쓰기

댓글을 달아 주세요

  1. 쵸류빈 2012/01/09 10:30  댓글주소  수정/삭제  댓글쓰기

    좋은 글 잘봤습니다. ^^


원문 :Getting Started with iOS Web Apps


본 문서는 한국 html5 사용자 모임에 기고된 글입니다.
 

시작하며

iOS 웹 어플리케이션(또는 iOS 웹앱)은 iOS 어플리케이션의 모습과 액션들에 초점을 맞춰 웹 2.0 기술에 접목한 것입니다. iOS 웹 앱은 iOS의 사파리에서 동작하며 이는 iOS기반의 장비와 터치 기반의 제스처가 제공되는 사파리에서 유일하게 동작합니다.

여기서 시작

iOS 웹 앱을 멋지게 만들기 위해서 필요한것은 :
  • iOS의 사파리에 맞게 컨텐츠를 최적화 시키는 것

  • 애플의 가이드라인에 맞게 UX와 UI를 디자인 하는것


기초를 읽기 전에 몇가지 코드를 다뤄보거나 기술 정의서를 먼저 다뤄보길 바랍니다.


기초를 알기 위해서는 어떻게 하나요?

미리 공부해야 할것들은 무엇입니까?

iOS에서 사용가능한 웹 기술을 어떻게 찾아야 합니까?


더 깊히 알아보기

가끔 위를 공부하다가 실무에서 사용되는 정보나 스펙에 대한 궁금증이 있을 껍니다. 인기있는 웹앱 작업물들이 더 많은 타겟을 위해 표현된것을 확인해 보세요.
  • 시각 효과를 웹앱에 추가해서 멋지게 하기 사파리 CSS 시각 효과 가이드 는 CSS의 속성을 사용해서 변화없는 이미지나 플래시, 동적인 HTML의 활용 없이 시각 효과를 iOS 웹앱에 적용해서 어떻게 화려한 시각 효과를 내는지 알려줍니다.

  • 탭, 플릭(가볍게 치는것), 그리고 컨텐츠를 드래그하는 것이 허용된 유저들에게 멀티 터치 인터페이스를 통한 이점 누리기 "사파리 웹 컨텐츠 가이드" 내의 "멀티터치 이벤트 다루기" 는 멀티터치 이벤트를 어떻게 등록하고 응답하는지를 보여주고 WebKit DOM의 확장 문서인 "사파리 DOM 추가 레퍼런스"는 이러한 이벤트의 확장버전을 보여줍니다.

  • iOS의 어플리케이션 링크를 추가하여 웹앱을 보다 iOS 어플리케이션처럼 만들기 애플 URL 스키마 레퍼런스는 전화, 지도, 아이튠즈 등의 링크를 어떻게 거는지를 알려줍니다.

더 알아야 할 필요가 있다면?

사파리 레퍼런스 라이브러리는 당신의 일을 더 쉽게 해줄 더 많은 자원(레퍼런스들)을 가지고 있습니다. 이러한 자원의 리스트를 좁히기 위해서 당신이 알고자 하는 레퍼런스의 타입(예를들어 가이드나 샘플 코드 같은것들 말입니다.) 이나 특별한 주제(사용자 경험이나 데이터 관리 같은)를 알고 있어야 할 것입니다.


 

크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 메튜장
 TAG HTML5, ios, webapp, 웹앱

트랙백 주소 http://izect.kr/trackback/641 관련글 쓰기

댓글을 달아 주세요


번역 : bellamy.chang(bellamy.chang@me.com , izect.kr)

들어가며
요즘 모바일 웹 개발은 화재입니다. 스마트폰이 PC보다 더 많이 팔리게 되면서 더 많은 사용자들이 모바일 장치를 통해 웹서핑을 하고 있고 이것은 개발자들에게 그들의 사이트를 모바일 웹 브라우저에 맞추게 되는 중요한 원인을 제공할 것입니다.

"모바일" 전장은 아직 수 많은 개발자들의 미지의 물과도 같습니다. 대부분의 사이트들은 모바일 유저를 배제하고 있습니다. 대신, 웹 사이트들은 기본적인 데스크톱 브라우저나 형편없는 모바일 브라우저 사이트로 디자인 되었습니다. html5rocks.com 같은 사이트도 예외는 없으므로 이를 간단한 노력만으로 모바일 버전의 사이트를 만들어 봅시다.

모바일 친화적인 html5rock.com 사이트 만들기
이 강의에서는 html5rocks 사이트를 모바일 친화적 버전으로 만들면서 흥미로운 사이트로 만들 것입니다. 그리고 주로 사용되는 스마트 폰에 타겟을 맞춰보겠습니다. 이 강의의 목표는 새로운 모바일 사이트를 만드는 것이 아닙니다. 그렇게 되면 쓸때없는 시간이 많이 낭비됩니다. 우리는 이미 사이트 구조(마크업)를 정의해 두었습니다. CSS로 룩앤필도 설계해 두었고, 기능적인 JS 함수도 있습니다. 대부분의 사이트들이 이정도는 기본으로 갖추고 있습니다.

이 글에서는 어떻게 html5rocks를 안드로이드와 아이폰에 최적화된 모바일 사이트를 만드는 방법을 보여줍니다. 스마트폰에서 단순히 html5rocks.com을 로드하면 각 OS에 따라 다른 사이트르 보여줍니다. m.html5rocks.com 으로 리다이렉트 된다든가의 잡다한 기능은 기본적으로 없습니다. 이처럼 모바일 버전에서는 최적화된 사이트의 모습과 기능적인 동작 등을 모바일 장치에서 잘 보이고 동작하게 하는 것입니다.

desktop-home.png
mobile-home.png 
html5rocks.com의 데스크탑버전(왼쪽)과 모바일 버전(오른쪽)

CSS 미디어 쿼리
HTML4와 CSS2에서는 미디어 독립적인 스타일 시트를 아래와 같이 제공합니다.
<link rel="stylesheet" media="print" href="printer.css">
이 테그는 목표가 되는 장비와 화면에 출력될 떄의 정의된 컨텐츠 스타일을 가져옵니다. CSS3은 미디어 타입보다 한단계 나아가, 미디어 쿼리와 함께 강화되었습니다. 미디어 쿼리는 허용된 스타일 시트를 더 세심하게 확장합니다. 미디어 쿼리를 사용함으로써 굳이 컨텐츠 자체를 바꾸지 않아도 디바이스에 맞게 컨텐츠들이 조절됩니다. 기존 레이아웃을 바꾸는데는 꼭 필요해 보이지 않습니까!

미디어 쿼리를 사용하면 디바이스 스크린의 가로세로 크기, 오리엔테이션(디바이스의 가로/세로 상태) 등등의 미디어 속성을 사용할 수 있습니다. W3C 미디어 쿼리 스펙 문서에서 모든 리스트를 볼 수 있습니다.

스크린 사이즈에 맞게 타겟팅
이 예제에서는 phone.css가 손바닥 크기나 320px보다 작은 디바이스의 가로 사이즈에 맞게 적용시켜 줄 것입니다.
<link rel="stylesheet"
 
media="handheld, only screen and (max-device-width: 320px)" href="phone.css">
미디어 쿼리에 only라는 키워드는 CSS3이 호환되지 않는 브라우저는 이를 무시하게 됩니다.
아래는 스크린 사이즈를 641px x 800px 로 맞춘 것입니다.
<link rel="stylesheet"
 
media="only screen and (min-width: 641px) and (max-width: 800px)" href="ipad.css">
미디어 쿼리는 <style>테그 내에서 인라인으로도 사용할 수 있습니다.아래는 세로방향일 경우 all이라는 미디어 타입을 준 것입니다.
<style>
  @media only all
and (orientation: portrait) { ... }
</style>

media="handheld"
잠시 media="handheld"에 관해 얘기해 보겠습니다. 사실 안드로이드랑 iOS에서는 이 속성이 무시됩니다. 이것은 media="screen" 스타일 시트로 공급된 높은 퀄리티의 컨텐츠(데스크탑에 맞춰진 컨텐츠)를  유저에게 공급하는 것과 개발자들이 media="handheld"로 된 낮은 품질의 컨텐츠를 유지보수하는 것을 최소하 하려는데 의의가 있습니다. 전체적인 웹의 모토에 따라 대부분의 최신 스마트폰 브라우저 들은 handheld 스타일 시트를 가볍게 무시하게 됩니다.

이는 모바일 장치에게는 이상적이겠지만, 다른 브라우저들은 아래처럼 다른 방법을 사용하고 있습니다. :
- 몇몇의 브라우저들에게 handheld 스타일 시트만 읽는다.
- 몇몇의 브라우저들에게 handheld 스타일 시트가 한개일 경우만 읽고. 아니면 다른 방법을 사용한다.
- 몇몇의 브라우저들은 두개의 handheld 스타일 시트를 읽고 screen 스타일 시트도 사용한다.
- 몇몇은 screen 스타일 시트만 읽는다.

오페라 미니 브라우저는 media="handheld"를 무시하지 않으며,  윈도우 모바일 브라우저는 주석을 달아 미디어 속성값과 구분하는 트릭을 사용합니다.
<!-- media="handheld" trick for Windows Mobile -->
<link rel="stylesheet" href="screen.css" media="Screen">
<link rel="stylesheet" href="mobile.css" media="handheld">

html5rocks에서 어떻게 미디어 쿼리를 사용할까.
미디어 쿼리는 html5rocks 모바일 버전에서 내내 무겁게 사용되었습니다. 우리는 우리의 정말 중요한 Django 템플릿을 사용하지 않고 모바일 사이트를 트윅하는 것을 허락 받았습니다. 덛붙혀 그들의 지원으로 다양한 브라우저에서 꽤 잘 돌아가게 되었습니다.

각 페이지들의 <head>내에서 여러분은 다음의 스타일 시트를 보게 될 것입니다.
<link rel="stylesheet"
 
media="all" href="/static/css/base.min.css" />
<link rel="stylesheet"
 
media="only screen and (max-width: 800px)" href="/static/css/mobile.min.css" />
항상 base.css는 html5rocks.com의 룩앤필을 결정합니다. 그러나 우리는 mobile.css를 사용하여 가로가 800px 미만인 새로운 스타일을 적용할 것입니다. 이 미디어 쿼리는 스마트폰(~320px)과 아이패드(~768px)를 커버합니다.

mobile.css는 또한 아래와 같은 몇개의 스타일을 강제로 바꿉니다 : 

- 여분의 여백(Whitespace)/패딩(padding)을 줄인다. 작은 화면에서 여백은 낭비다!
- hover 상태를 제거한다. 터치스크린에서 이는 전혀 의미가 없다.
- 레이아웃을 단일 컬럼으로 맞춘다. 자세한건 나중에..
- 메인 컨테이너 div의 box-shadow를 삭제한다. 큰 박스 shadow는 페이지의 퍼포먼스를 떨어뜨린다.
- CSS를 사용해서 박스를 구부리는 box-ordinal-group 를 사용해서 홈페이지의 각각의 섹션을 정렬한다. 이 강의의 모바일 버전 강의부터 진행한 이후에..본 사이트의 튜토리얼에서 "html5의 5가지 주요 기능 배우기" 강의로 다뤄질 것이다. 
- opacity 의 변화를 제거한다. 알파값을 주는 것은 모바일 웹의 퍼포먼스에 치명적이다.

모바일 메타 테그
모바일 웹킷(webkit)은 유저의 디바이스로 보다 나은 브라우징을 할 수 있게 합니다.

뷰포트 세팅
첫번째 메타의 세팅은 뷰포트의 세팅입니다. 뷰포트를 세팅하는 것은 브라우저에 컨텐츠를 어떻게 화면에 맞출 것인지, 그리고 모바일에 최적화된 사이트는 어떤 것인지 알려줍니다. 예를 들면

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
위처럼 뷰포트를 세팅하면 디바이스에 맞게 가로값을 조절하려면 초기 스케일(확대 비율)은 1이라고 알려줍니다. 또한 user-scalable=yes 를 통해 사용자가 확대/축소를 할 수 있게 하는데, 이는 모바일 웹에는 적합할 수 있지만 웹앱은 아닙니다. 웹앱에서는 user-scalable=no 를 통해 현재의 확대 비율을 유지하도록 예방해야 합니다.

<meta name=viewport
 
content="width=device-width, initial-scale=1.0, minimum-scale=0.5 maximum-scale=1.0">
주 : 가로(width)는 픽셀로 정의됩니다. 아이폰이나 몇몇 스마트폰들은 width=320이나 width=device-width나 동일한 결과를 보여줍니다. 모든 폰들이 같은 가로 사이즈를 가지고 있지 않다는 것을 안다면,  device-width를 쓰는 것이 가장 나을 것입니다. 

안드로이드는 아래처럼 화면의 해상도를 조절할 수 있는 확장된 뷰포트 정의를 개발자들에게 제공합니다.
<meta name="viewport" content="target-densitydpi=device-dpi">
target-densitydpi는 device-api, high-dpi, medium-dpi, low-dpi를 정의할 수 있습니다.

만약 CSS 미디어 쿼리인 -webkit-device-pixel-ratio 혹은 자바스크립트의 window.devicePixelRatio 를 사용하여 각기 다른 화면의 해상도에 따라 모바일웹을 조절하려면 target-densitydpi 메타테그를 device-api로 정의해야 합니다. 이는 모바일 웹에서 안드로이드에서 스케일을 제한하고 각각의 해상도에 따라 자바스크립트나 CSS에서 허용해 놓은 필요 조건을 적용시킬 것입니다.

안드로이드의 웹뷰 문서 를 보시면 타겟팅과 디바이스 해상도에 대해 더 많은 정보를 알 수 있습니다.

풀스크린 브라우징
아래 두개의 다른 메타 값은 iOS의 스펙입니다. apple-mobile-web-app-capable 과 apple-mobile-web-app-status-bar-style은 웹 컨텐츠들을 마치 앱(app)처럼 풀스크린으로 보여주고 상태바를 보여줄 것입니다.
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

iOS에서 사용 가능한 더 많은 메타 값을 보려면 사파리 레퍼런스 문서를 보시기 바랍니다.

홈스크린 아이콘
iOS와 안드로이드 장비는 rel="apple-touch-icon" (iOS) 와 rel="apple-touch-icon-precomposed" (Android)를 통한 링크를 허용합니다. 이는 유저들이 우리의 사이트를 자신의 홈스크린에 앱(app)처럼 화려한 아이콘을 사용해 북마크 할 수 있도록 합니다.
<link rel="apple-touch-icon"
     
href="/static/images/identity/HTML5_Badge_64.png" />
<link rel="apple-touch-icon-precomposed"
     
href="/static/images/identity/HTML5_Badge_64.png" />
html5rocks는 어떤 모바일 메타 테그를 사용하는가?
위의 것들을 전부 모아서 html5rocks의 <head> 부분을 만듭니다.
<head>
  ...
 
<meta name="viewport"
       
content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />

 
<link rel="apple-touch-icon"
       
href="/static/images/identity/HTML5_Badge_64.png" />
 
<link rel="apple-touch-icon-precomposed"
       
href="/static/images/identity/HTML5_Badge_64.png" />
  ...
</head>
수직 레이아웃
보다 작은 화면일수록 세로 스크롤이 가로 스크롤보다 편리하게 됩니다. 컨텐츠들을 단일 컬럼으로 유지하여 모바일에서 수직 레이아웃이 되도록 합니다.
html5rocks에서는 CSS3 미디어 쿼리를 사용하여 이러한 레이아웃을 만들었습니다. 마크업을 다시 변경할 필요가 없었습니다.

tutorials.png intutorial (1).png features.png profiles.png 
html5rocks의 단일 칼럼을 사용한 수직 레이아웃

모바일 최적화
우리가 만드는 것이 처음보다는 꽤나 최적화 되었습니다. 그리고 보다 더 최적화 시켜야 합니다. 네트웍 요청을 줄이고 JS/CSS를 압축하고, gzip(앱엔진에서의), 그리고 DOM을 조작해서 최소화 해야 합니다. 이런 기법을 기본으로 적용해야 겠지만, 가끔 급하게 작업을 하다가 놓칠 수도 있습니다.

자동 주소 바(bar)
모바일 브라우저는 데스크탑보다 상태를 표현하는 부분이 부족합니다. 심지어 다른 플렛폼에서는 커다란 주소 입력바가 상단에 위치하며.. 페이지가 다 로딩되기 전까지 존재합니다.

이를 다루는 가장 쉬운 방법은 자바스크립트를 이용하여 스크롤 하는 것입니다. 하나의 작은 픽셀이 성가신 주소 바를 다뤄줄 것입니다. html5rocks에서는 이를 강제로 숨기기 위해 onload이벤트에 window를 한픽셀 내리도록 처리하였습니다.

address-bar-mobile.png 
못생긴 주소 바가 스크린의 위쪽에 있는 경우
{% if is_mobile % }
 
// Hides mobile browser's address bar when page is done loading.
  window
.addEventListener('load', function(e) {
    setTimeout
(function() { window.scrollTo(0, 1); }, 1);
 
}, false);
{% endif % }
또한 데스크탑에서는 이를 사용하지 않도록 is_mobile로 감쌌습니다.

네트워크 요청을 줄여 대역폭 확보하기
HTTP의 요청을 줄이는 것은 가장 큰 퍼포먼스 변화를 가져온다고 알려져 있습니다. 모바일 장비는 더더욱이나 동시 접속을 제한해야 합니다.(3G등의 네트워크가 한계가 있기 때문에) 그래야 쓸때없는 요청을 줄일 수 있습니다. 게다가 각각의 바이트(byte)를 줄이지 않으면 사이트가 유저들의 돈을 깎아먹을 수도 있습니다.

아래는 우리가 어떻게 네트워크 요청을 최소화하고 html5rocks의 대역폭을 줄였는지를 보여줍니다.
  • iframe의 삭제 - 아이프레임은 자체로도 느립니다. 거대한 양의 보이지 않는 서드파티 공유 위젯들(버즈,구글 프랜드 커넥트, 트위터, 페이스북등)이 이 튜토리얼 페이지에 있습니다. 이러한 API들은 <script>테그를 통해 포함되고 iframe을 페이지에 생성시켜 느리게 만듭니다. 모바일 버전에서 이러한 위젯들은 제거되었습니다.
  • display:none - 가끔 모바일의 윤곽에 맞지 않는 마크업은 숨겨야 합니다. 가장 좋은 예로 우리는 4개의 라운딩된 박스를 데스크탑 홈페이지 위에 위치하였습니다.
box-icons.png 
(html5rocks.com 상단의 버튼들)
이것들은 모바일 사이트에서는 안보입니다. 중요한 것은 이 아이콘들이 display:none으로 안보임에도 불구하고 아직 브라우저에서는 각각의 아이콘을 만든다는 것입니다. 그러므로 모바일에서는 숨기는 것으로만 만족하면 안됩니다. 이는 대역폭의 낭비를 제공하면서도 유저는 심지어 이를 감지해 낼 수도 없습니다. 우리의 해결책은 Django 템플릿 중 "is_mobile" 이진 변수를 만들어 HTML에서 생략해야 할 섹션을 골라냈다는 것입니다. 만약 사용자가 스마트폰으로 보면 이 버튼들은 없어집니다.
  • 어플리케이션 캐시 - 어플리케이션 캐시는 오프라인 지원 뿐만 아니라 빠르게 웹앱을 시작하게 합니다.
  • CSS/JS compression - 우리는 Closure 컴파일러 대신에 YUI 압축기를 사용했습니다. 주된 이유로는 YUI compressor는 CSS와 JS를 다루기 쉽습니다. 참고로 우리는 인라인 미디어 쿼리를(CSS안에 미디어 쿼리를 사용하는 것) 사용하는데 YUI compressor 2.4.2버전(이 이슈를 참조하세요)에서는 계속 에러를 뱉었습니다. YUI Compressor 2.4.4이상에서는 이 문제가 수정되었습니다.
  • 가능하면 CSS 이미지 스프라이트를 사용합니다.
  • pngcrush를 이미지 압축에 사용합니다.
  • dataURI들을 작은 이미지에 사용합니다. Base64 인코딩은 30% 이상 이미지를 줄이면서 네트워크를 절약할 수 있습니다.
  • 자동으로 로딩되는 단일 스크립트 테그의 구글 커스텀 서치 가 google.load()를 통한 동적 로딩보다 낫습니다. 이 구문(google.load())은 엄청난 네트웍 요청을 만듭니다.
  • <script src="//www.google.com/jsapi?autoload={"modules":[{"name":"search","version":"1"}]}"></script>

  • 사용되지 않더라도 모든 페이지에 작은 프린트와 Modernizr를 추가하였었습니다. Modernizr는 꽤 괜찮습니다. 허나 Moernizr는 모든 로드되는 페이지에서 테스트되어야 합니다.가끔 DOM을 수정하고 페이지를 느리게 로드하게 만듭니다. 최근에 우리는 이 라이브러리를 실제로 필요한 곳에 로딩하였습니다. 겨우 2개의 요청만 나왔구요. :)
성능 개선에 대해 더 언급해보면..
  • 가능하면 모든 JS를 페이지 아래에다 옮깁니다.
  • 인라인 <style> 테그를 삭제합니다.
  • 캐시된 DOM을 찾고 DOM을 조작하여 최적화합니다. - 매시간 브라우저에서 DOM을 터치하는 것은 다시 그려집니다. 다시 그려진다는 것(reflew)은 그만큼 값비싼 결과를 초래합니다.
  • 사용하지도 않는 코드를 미리 클라이언트쪽에 로드하는 것은 낭비입니다. 특히 아래처럼 현재 페이지의 네비게이션을 체크하는 구문에서 볼 수 있습니다.
var lis = document.querySelectorAll('header nav li');
var i = lis.length;
while (i--) {
 
var a = lis[i].querySelector('a');
 
var section = a.getAttribute("data-section");
 
if (new RegExp(section).test(document.location.href)) {
    a
.className = 'current';
 
}
}
  • 고정된 폭을 가지는 요소들은 width:100%나 width:auto로 교체되는 것이 좋습니다.

애플리케이션 캐시
html5rocks모바일 버전은 애플리케이션 캐시를 사용해서 초기 로딩을 빠르게 하고 유저들에게 오프라인에서 컨텐츠를 읽을 수 있도록 해줍니다.
당신의 사이트에 앱케시가 가능할 때, manifest파일을 캐시하지 않는 것이 매우 중요합니다.(명확하게 manifest파일 그 자체나 맹목적인 큰 캐시 컨트롤 헤더를 가지고 있다면 말입니다.) 만약 manifest파일이 캐시되었다면 그것은 디버깅의 함정이 될 것입니다. iOS와 안드로이드는 특히 이 파일을 잘 캐시하고 있습니다. 하지만 데스크톱처럼 손쉽게 캐시를 초기화 하는 것은 공급하지 않습니다.
이러한 예방은 우리의 사이트의 캐시를 앱 엔진이 manifest파일을 캐시하지 못하도록 먼저 추가합니다.
- url: /(.*\.(appcache|manifest))
  static_files
: \1
  mime_type
: text/cache-manifest
  upload
: (.*\.(appcache|manifest))
  expiration
: "0s"

그리고 JS API를 통해 새로운 manifest가 다운되었을 떄 유저에게 알립니다. 이 API는 페이지를 새로 고칠겁니다.
window.applicationCache.addEventListener('updateready', function(e) {
 
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
   
window.applicationCache.swapCache();
   
if (confirm('A new version of this site is available. Load it?')) {
     
window.location.reload();
   
}
 
}
}, false);

네트워크 트래픽을 아끼기 위해서는 manifest가 간결해야 합니다. 이는 모든 페이지마다 호출하라는 말이 아니라 꼭 필요한 사이트에 이미지, CSS, 그리고 자바스크립트 파일을 호출하라는 것입니다 .마지막으로 당신은 모든 브라우저에서 앱캐시가 업데이트 되는 유리한 점을 강제화 할 수 있어야 합니다. 그렇지 않으면 브라우저가 맹목적으로 html페이지를 방문할 때마다 캐시할 것입니다.(그리고 <html manifest="..."> 요소를 추가해 주세요.)

(이 글은 한국 HTML5 사용자 모임에 기고된 글입니다.) 
크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 메튜장

트랙백 주소 http://izect.kr/trackback/640 관련글 쓰기

댓글을 달아 주세요


번역 : bellamy.chang(bellamy.chang@me.com , http://izect.kr)

들어가며


스마트폰이나 타블렛 같은 모바일 장치들은 보통 유저의 손가락을 통한 전기적 터치를 스크린을 통해 감지합니다. 모바일 웹이 더욱더 애플리케이션에 점점 가까워 질수록 웹 개발자들은 이러한 터치 이벤트를 다루는 것이 필요합니다. 에를 들어, 가까운 어떤 빠른 페이스의 게임이 플레이어에게 여러 버튼을 한번에 누르게 요구되면 터치 스크린은 멀티 터치가 가능한 환경이 되어야 합니다.


애플은 그들의 터치 이벤트 API를 iOS2.0 에서 소개하였습니다. 안드로이드도 이러한 표준을 발표하고 iOS와의 차이를 좁히기 위해 노력하고 있습니다. 최근에는 W3C 워킹 그룹과 함께 터치 이벤트 스펙을 작업중입니다.


이 강의에서 저는 iOS와 안드로이드에서 공급하는 터치 이벤트 API에 대해 어떤 종류의 어플리케이션을 만들 수 있고, 몇가지 예를 보여주고 터치 기반의 애플리케이션 개발을 편리하게 해주는 유용한 기술을 함께 알아보도록 하겠습니다.


터치 이벤트들


모바일 장치들의 스펙과 도구에는 3가지 가장 기본적인 터치 이벤트가 있습니다.

  • touchstart : 손가락이 DOM 객체에 위치.

  • touchmove : 손가락이 DOM 객체들 사이를 드래그함.

  • touchend : 손가락이 DOM 객체에서 떼어짐


각각의 터치 이벤트는 아래 3개의 터치중 하나의 이벤트로 보입니다.

  • touches : 현재 스크린에 있는 모든 손가락

  • targetTouches : 현재 DOM 객체에 있는 손가락

  • changedTouches : 현재 이벤트를 포함하고 있는 손가락. 예를 들어 touchend 이벤트는 분명 손가락이 스크린에서 떼진 상태일 것입니다.


아래 리스트는 터치에 대한 각종 정보를 담고 있습니다.

  • identifier : 현재의 터치를 세션에 담고 있는 숫자형태의 독립적ㅇ니 구분자 입니다.

  • target : 타겟된 행동에 대한 DOM 요소입니다.

  • client/page/screen coordinates : 손가락이 터치된 부분을 타원형으로 표현하여 담고 있습니다.


터치가 가능한 앱들


touchstarttouchmove, 그리고 touchend 이벤트는 시각적이고 두손가락으로 확대, 회전 같은 유용한 멀티 터치 제스처같은 터치기반의 상호작용을 충분히 제공해 줍니다. 

아래 코드조각은 손가락 하나를 이용해 DOM객체를 드래그 합니다.


var obj = document.getElementById('id');
obj
.addEventListener('touchmove', function(event) {
 
// If there's exactly one finger inside this element
 
if (event.targetTouches.length == 1) {
   
var touch = event.targetTouches[0];
   
// Place element where the finger is
    obj
.style.left = touch.pageX + 'px';
    obj
.style.top = touch.pageY + 'px';
 
}
}, false);

아래는 스크린에서 모든 터치에 대한 샘플입니다. 이는 장비의 터치 민감도에 따라 유용하게 느껴질 수도 있습니다.


 




// Setup canvas and expose context via ctx variable
canvas
.addEventListener('touchmove', function(event) {
 
for (var i = 0; i < event.touches.length; i++) {
   
var touch = event.touches[i];
    ctx
.beginPath();
    ctx
.arc(touch.pageX, touch.pageY, 20, 0, 2*Math.PI, true);
    ctx
.fill();
    ctx
.stroke();
 
}
}, false);


예제 


캔버스 기반 드로잉(폴 아이리시 제작) 같은 몇가지의 흥미로운 멀티 터치 예제가 이미 여러군데에 존재합니다.


draw.png 


그리고 닌자 브라우저 같은 CSS3 형태 변환(transform)과 투명도(transition)을 사용해 캔버스로 만든 예제도 있습니다.


browser-ninja.png 


모범 사례


확대 못하게 하기


기본적으로 멀티 터치는 잘 작동하지 않습니다. 스크롤링이나 확대같은 동작이 스와이핑이나 제스처를 할 때 중복되게 됩니다.

줌을 비활성화 하려면 뷰포트에 아래 메타 테그처럼 scalable을 사용 못하게 하면 됩니다.


<meta name="viewport"
 
content="width=device-width, initial-scale=1.0, user-scalable=no">


뷰포트 세팅에 대해서는 본 모바일 html5 기사를 참조해주세요.


스크롤링 못하게 하기


몇몇의 모바일 장비들은 touchmove가 예전의 iOS 오버스크롤 효과같이 기본 행동으로 정해져 있습니다. 이는 스크롤링이 컨텐츠의 영역을 벗어날때 보이게 됩니다. 이는 많은 멀티터치 어플리케이션에서 혼동을 일으킬 수 있는데 아래와 같이 쉽게 비활성화 할 수 있습니다.


document.body.addEventListener('touchmove', function(event) {
 
event.preventDefault();
}, false);

조심스럽게 랜더(render, 화면에 그리기)하기


만약 다양한 손가락을 활용한 제스처를 사용한 멀티 터치 기반의 어플리케이션을 제작한다면, 한번에 터치되는 양을 잘 조절해서 터치 이벤트가 조심스레 발생되어야 합니다. 아래 샘플은 스크린에 터치되는 모든 영역을 그려줍니다.


canvas.addEventListener('touchmove', function(event) {
  renderTouches
(event.touches);
}, false);

허나 위의 예제는 스크린에 터치되는 수를 제한하지 않았습니다. 대신에 아래처럼 작성하면 모든 손가락을 추적할 수 있고 이를 그려주는데(render)더 나은 성능을 보여줄 것입니다.


var touches = []
canvas
.addEventListener('touchmove', function(event) {
  touches
= event.touches;
}, false);

// Setup a 60fps timer
timer
= setInterval(function() {
  renderTouches
(touches);
}, 15);


팁 : setInterval 은 애니메이션에 별로 안좋습니다. 이를 사용하면 일반적인 브라우저에서 랜더링 해주는 루프에 들어가지 않습니다. 최신 데스크탑 브라우저들은 requestAnimationFrame을 제공하는데 이게 더 나은 옵션과 성능, 그리고 배터리 성능을 보여줍니다. 향후 모바일 브라우저에서 서포트 되면 이게 더 나은 방법이 될 것입니다.


targetTouches와 changedTouches를 사용하자.


event.touches는 단지 하나의 터치된 DOM뿐만 아니라 모든 스크린에 접촉되는 손가락의 정보를 배열로 담는다는 것을 기억해야 합니다. 아마 event.targetTouches나 event.changedTouches에서 더 유용한 것을 찾을수도 있습니다.


마지막으로 일반적인 베스트 모바일에 의거하여 모바일을 개발할 때 Eric Bidelman의 글이나 W3C의 문서를 보면 더욱 좋습니다.



장비의 지원


안타깝게도 터치 이벤트는 퀄리티와 완성도를 위해 매우 자주 바뀝니다. 제가 이 진단 스크립트를 터치 API 의 기본적인 정보에 의해 작성할 떄 이 이벤트들은 모두 지원되었고 touchmove는 재결의 되었습니다. 저는 넥서스 원과 넥서스 S 에 설치된 안드로이드 2.3.3과 Xoom의 Android 3.0.1 그리고 아이패드와 아이폰의 iOS 4.2에서 테스트 해 보았습니다.


분명한 것은 touchstart, touchend 그리고 touchmove 이벤트는 위의 모든 브라우저에서 테스트 되었습니다.


아래는 터치 스펙에서는 3개의 터치 이벤트가 더 있는데, 브라우저에서는 지원안되는 이벤트 들입니다.

  • touchenter : 손가락을 움직여 DOM 객체에 들어옴.

  • touchleave : 돔 객체를 손가락을 움직여 떠남.

  • touchcancel : 터치가 중단됨(실행 계획)


위의 것들은 테스트 되면 touches, targetTouches, changedTouches 의 터치 리스트에서 제공될 것입니다. 그러나 스크린 터치시에 radiusX, radiusY 혹은 rotationAngle 같은 것이 테스트된 브라우저는 없습니다.


touchmove 를 하는 중에 대강 60초 후에는 모든 테스트 장비에서는 이 이벤트가 사라졌습니다.


안드로이드 2.3.3(넥서스)


넥서스 원과 넥서스 S에서 테스트한 안드로이드 진저브래드의 브라우저는 멀티터치를 지원하지 않습니다.이 이슈를 참조하세요.


안드로이드 3.0.1(Xoom)


Xoom의 브라우저는 기본적인 멀티 터치를 지원합니다. 그러나 이는 단일 DOM객체에서만 작동합니다. 동시에 두개의 다른 DOM 객체를 터치하는 것에 대한 응답은 없습니다. 아래 예제는 동시에 두개를 터치할 때에 실행될 것입니다.


obj1.addEventListener('touchmove', function(event) {
 
for (var i = 0; i < event.targetTouches; i++) {
   
var touch = event.targetTouches[i];
    console
.log('touched ' + touch.identifier);
 
}
}, false);

허나 아래 예제는 제공되지 않습니다.

var objs = [obj1, obj2];
for (var i = 0; i < objs.length; i++) {
 
var obj = objs[i];
  obj
.addEventListener('touchmove', function(event) {
   
if (event.targetTouches.length == 1) {
      console
.log('touched ' + event.targetTouches[0].identifier);
   
}
 
}, false);
}


iOS 4.x (아이패드, 아이폰)


iOS 장비는 어떤 브라우저보다도 더 터치에 관해 많은 정보를 제공해주며, 모든 멀티 터치를 제공합니다.



개발자 툴


모바일 개발에 있어서 데스크탑에서 프로토 타입을 개발하기란 쉽지 않습니다. 그래서 개발하고자 하는 부분이 장비에서 지원되어야 합니다. 멀티터치는 특히나 PC에서 테스트 하기 힘듭니다. 대부분의 PC들은 터치 입력이 없습니다.


개발하는 동안에는 매번 서버와 장비에서 로딩된 모습을 보며 테스트 해야 합니다. 한번 실행하면 계속해서 작은 디버깅 거리가 생기기 때문에 타블렛이나 스마트폰은 웹 개발툴로는 부적합합니다.


이 문제를 해결하기 위해서는 당신의 개발 장비에 터치 이벤트가 시뮬레이션 되어야 합니다. 단일 터치, 터치 이벤트 등은 마우스로 입력됩니다. 멀티터치 이벤트는 애플의 최신 맥북이 있다면 시물레이션 할 수 있을 껍니다.


단일 터치 이벤트


만약 데스크탑에서 단일 터치를 시물레이션 하고 싶다면 Phantom Limb 라는 큰 손을 통해 페이지에 터치 이벤트를 주는 것을 사용해 보세요.


또한 Touchable 이라는 jQuery로된 터치와 마우스 이벤트가 통합된 플렛폼도 있습니다.


멀티터치 이벤트


애플의 맥북이나 매직패드처럼 멀티터치가 가능한 장비로 브라우저에서 웹 어플리케이션을 멀티터치가 가능하도록 하기 위해서 저는  MagicTouch.js polyfill을 만들었습니다. 이는 당신의 트랙패드의 터치 이벤트를 캐치해서 호환 가능한 기본 터치 이벤트로 넘겨줄 것입니다.


  1. npTuioClient NPAPI 플러그인을 받고 ~/Library/Internet Plug-Ins/ 에 설치합니다.

  2. 맥의 매직패드를 위한 TongSeng TUIO 앱을 다운받고 서버를 시작합니다.

  3. MagicTouch.js를 다운받습니다.(이는 npTuioClient 콜백 기반의 터치 이벤트를 시뮬레이션 해주는 자바스크립트 라이브러리 입니다.)

  4. magictouch.js스크립트와 npTuioClient 플러그인을 아래처럼 추가합니다.

<head>
  ...
 
<script src="/path/to/magictouch.js"></script>
</head>

<body>
  ...
 
<object id="tuio" type="application/x-tuio" style="width: 0px; height: 0px;">
    Touch input plugin failed to load!
 
</object>
</body>

저는 이를 크롬 10에서만 테스트 해봤는데, 아마 다른 최신 브라우저에서도 동작할 것입니다. 

컴퓨터에 멀티터치 입력장치가 없으면 다른 TUIO 트랙커(reacTIVision 가 있습니다. TUIO project page를 참조하시길..) 를 사용할 수 있습니다.


주의할 것은 터치 제스처는 아마도 OS레벨에서의 멀티 터치 제스터일 껍니다. OS X에서는 시스템 환결설정의 트랙패드 에서 시스템 이벤트의 범위를 지정할 수 있습니다.


멀티터치의 특징은 더 많은 브라우저들에서 동작할 것입니다. 전 정말 이러한 훌륭한 API가 어떤 새로운 웹 앱을 만들어 낼지 기대가 매우매우매우매우 큽니다.

(이 글은 한국 HTML5 사용자 모임 에 기고된 글입니다.)
크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 메튜장

트랙백 주소 http://izect.kr/trackback/639 관련글 쓰기

댓글을 달아 주세요





  1. HTML5와의 첫만남
    1. 강의에 들어가기 앞서..
    2. HTML5 소개
    3. HTML5를 테스트하기 위한 시뮬레이터 세팅
  2. 트위터 웹앱을 만듭시다.
    1. 새로운 HTML5의 시멘틱 테그
    2. 뷰포트와 CSS 리셋
    3. CSS를 통한 모바일에 최적화된 웹앱
    4. 그레디에이션
    5. 네비게이션 아이콘
    6. 트윗 리스트의 간단한 스타일링
    7. 웹앱을 웹앱답게! 아이폰에 최적화된 웹앱 메타정의
  3. Ajax와의 통신
    1. Ajax와 통신 만들기
    2. 트윗들을 JSON형식을 받아보자.
    3. CSS3 변환
    4. 웹 폰트
  4. 위치정보, 오리엔테이션 감지 그리고 CSS3 미디어 쿼리
    1. CSS3 미디어 쿼리
    2. 자바스크립트로 오리엔테이션을 감지해보자.
    3. 위치정보
  5. HTML5 오프라인 저장소 데이터베이스 활용
    1. HTML5 오프라인 저장소 데이터베이스 사용하기
    2. 트윗들을 캐시해보자.
    3. 캐시들의 명시(Manifest)
    4. 온/오프라인 상태 감지
  6. HTML5 폼(form)을 활용한 주소록 웹앱 만들기
    1. 웹 SQL DB 만들기
    2. HTML5의 새로운 폼 입력 유형
    3. CSS3의 애니메이션
  7. <Audio> 와 <Video> 테그로 영화 트레일러 만들기
    1. <Audio> <Video> 테그
    2. 커스톰 오디오 플레이어
    3. 재생 상태바 추가하기
    4. 오디오 바꾸기
  8. 자바스크립트와 캔버스로 그림그리기
    1. <canvas> 요소 알아보기
    2. 그려진 그림을 회전하고 크기조절
    3. 이미지 회전하기
    4. 애니메이션을 해보자!
  9. 캔버스에 그려진 그림을 애니메이션 해보기

    사실 이 과정은 강의라 하긴 좀 그렇고, Oreilly사의 Mobile Web Development 인터넷 동영상 강의를 보고 정리한 것을 한글화 시키고 튜토리얼 방식으로 만들 예정이다. 아직 시작도 하지 않았지만 국내에 HTML5 관련된 자료가 많이 없어서 이렇게 좋은 자료가 많이 알려지지 않아서 아쉬운 마음에 내 블로그와 향후 html5korea.co.kr로 옮겨올 자료를 일단 여기에 포스팅할 예정이다.

    html5가 아직까지 많은 사람들이 대체 이걸 왜 사용하고 써야하는지 모르는 사람들이 대부분일 것이다. 그리고 사실 이 기술이 표준으로 제정될 것인지에 대한 의문도 남아있다. 하지만, 확실한 것은 웹 표준 제정기구에서 표준화에 대해 계속 제정중이고, 대부분의 웹 브라우저가 HTML5 기술을 채택하고 있다.

    때문에 우리는 HTML5를 익힘으로써 미래의 웹에 대해 알 수 있고 더 나아가 사용자들이 과연 HTML5가 표출되는 스마트폰이나 컴퓨터를 통해 어떤 것을 할 것인가, 그리고 웹서비스의 미래는 어떠할 것인가에 대해 알 수 있을 것이다.

    이 강의의 모든 내용은 오픈시킬 예정이고, 라이센스는 CCL(Creative Common License)로 제공될 예정이다. 출처만 있으면 전문을 가져가도 상관없다. 어차피 나도 외국 강의듣고 정리할 예정이라서.. 여튼 중요한건 하루라도 빨리 컨텐츠를 만드는 것이니깐. 일단 업데이트는 1주일에 한 챕터씩 업데이트 될 예정이다. 필자가 회사원인지라 주중에는 간단히 오레일리 인강 듣고 주말에 정리를 할 예정이라서.. 여하튼 빠른 업데이트를! 실시할 수 있도록 노력해 보겠다.. ^^
크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 메튜장
 TAG HTML5, 강의

트랙백 주소 http://izect.kr/trackback/633 관련글 쓰기

댓글을 달아 주세요

  1. 데레렙 2011/05/26 19:59  댓글주소  수정/삭제  댓글쓰기

    기대됩니다 좋은정보 감사합니다

  2. Favicon of http://alast0r.co.cc BlogIcon Alast0r 2011/05/30 00:42  댓글주소  수정/삭제  댓글쓰기

    정말 기대됩니다 지금 이 블로그 북마크에 추가했어요 ㅎㅎ


국내에 HTML5관련된 강의가 많이 없는 것은 알고 있다. 그래도 작년부터 HTML5관련된 강의나 책자가 조금씩 나오고 있지만 아직도 HTML5의 스펙이 정의되고 있는 시점인지라, 어떻게 변하게 될 지는 모르겠지만 최소한 HTML5의 발전과 함께 웹 브라우저 또한 발빠르게 발전할 것은 예측할 수 있다.

작년부터 나도 HTML5에 대한 관심이 증폭되어서 나름대로 HTML5korea.co.kr라는 사이트도 운영하려 하고 있고(아직 제작중이지만..) 여러모로 자료도 찾고 있는 도중, Oreilly사에서 인터넷 강의가 있어서 한번 들어가서 보니깐 꽤나 좋은 내용이었다. 물론, 아직 청취한지는 1주정도 되었는데 들으면서 배운 내용을 나도 한번 정리하는 식으로 해서 블로그와 향후 완성될 HTML5korea에 정리하려고 생각중에 있다.

빨리빨리 해야 하는데, 회사도 다니고 영어공부도 하며 포스팅까지 하기란 정말 신급이 아닌 이상은 힘든듯.. 그래서 요즘 체력도 키우고 있고 하긴 하지만 아직 갈길이 멀다! 꾸준함이 생명인 듯 하다. 블로그에서 약속하는 만큼, 꾸준히 연재해 보도록 노력하겠다.. ^^ 
크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 메튜장
 TAG HTML5

트랙백 주소 http://izect.kr/trackback/632 관련글 쓰기

댓글을 달아 주세요


HTML5는 아직 개발중인 기술입니다. 우리는 이 무르익는 기술의 진보된 역량을 확인해 보기로 하였습니다. 게임과 같은 곳에 쓰여진 것을 말이죠. HTML5는 아직 초창기에 불과하지만, 이미 html5로써의 통합은 시작되었습니다. 여기 HTML5로 잘 만들어진 6개의 게임을 소개합니다.

출처 : 10 HTML5 Games Paving The Way

번역 : matthew.chang@me.com

Quake II GWT Port

Quake II GWT Port

Quake II GWT Port

여러분이 인터넷을 사용하지 않거나 불구한 곳에 있더라도 아마 한번쯤은 이 WebGL 로 만들어진 퀘이크2 포트에 대해 들어보셨을 것입니다. HTML5요소들과 Canvas API 를 사용하였고, 몇명의 구글 직원들이 만들었습니다. 아마 이게 브라우저에서 HTML5로 동작하는 게임 중에 가장 베스트가 아닐까 싶습니다.이를 플레이하기 위해서는 먼저빌드 과정이 필요합니다.(Java로 만들어져서)

요구사항 : 사파리(nightly) 혹은 크로미엄(크롬 오픈소스 버전)

WPilot

WPilot

WPilot

WPilot은 멀티플레이가 가능한 우주공간 슈팅 게임입니다. 위 퀘이크와는 다르게 어떤 빌드도 필요없이 즐길 수 있습니다. 만약 함께할 다른 사람을 찾고, 즐기고 싶다면 함께 플레이 할 수도 있습니다.

요구사항 : 사파리, 크롬, 웹킷 혹은 파이어폭스(윈도우버전)

 

Wolfenstein 3D

Wolfenstein 3D

Wolfenstein 3D

고전 게임을 추억하는 여러 분들은 울펜슈타인 3D를 아마 강력하게 기억하고 계실 껍니다. 매우 훌륭한 3D 슈터(우리나라에선 FPS라고 합니다.) 입니다. 여기 이 HTML5버전은 비록 모든 게임을 보여주지는 않지만, 플레이어가 총을 쏘고 움직이는 정도는 가능합니다.

요구사항 : Firefox 2+, Safari 3.1.2+, Opera 9.27+

Aves Engine

Aves Engine

Aves Engine

Aves Engine은 이 자체로는 게임이 아니지만 개발자들을 위해 잘 정리된 HTML5의 프레임워크(엔진)입니다. 아래 데모영상에서 이 엔진의 꽤나 괜찮은 성능과 호환성을 보여주며, 웹 게임 개발자들은 Aves와 함께 꽤나 괜찮은 작업을 할 수 있을 것입니다.

Processing Tower Defense

Processing Tower Defense

Processing Tower Defense

상당히 제한적인 그래픽이지만 이 전략게임은 괜찮은 HTML5 게임의 예제입니다. PTD 는 John Resig의 Processing.js 라이브러리의 데모로 만들어졌습니다.



Akihabara

Akihabara

The Akihabara Collection

Akihabara collection은 5개의 다른 종류의 8/16비트 게임을 모아서 HTML5와 자바스크립트로 즐길 수 있게 만들어 두었습니다. 비록 오래되고 그래픽이 매우 클래식 하지만 플래시를 사용하지 않았고 브라우저 기반 게임이 가능하다는 것이 나쁘진 않습니다.

요구사항: Safari, Chrome, Firefox or Opera

Asteroids

Asteroids


크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 메튜장

트랙백 주소 http://izect.kr/trackback/671 관련글 쓰기

댓글을 달아 주세요


드디어 믿기지 않는 현실이 이뤄졌다고 할까나. 드디어 아이패드가 우리나라에서도 정발이 되고 말핬다. 올해 초 훈련소를 다녀오고 나서 아이패드가 언제 우리나라에 나오나, 미국에 있는 친구에게 부탁해볼까 등등.. 정말 그 지름이라는 것이 무섭긴 하다. 이렇게 해서라도 구했었다면 당장 만족은 했더라도 지금처럼 KT에서 정발되는 것은 놓쳤을 것이 분명하다.



사실 맥북이도 있고 5월에 아이맥도 영입하고 나니 뭐 굳이 쓸 필요가 있겠어? 하고 생각을 해봣는데 최근 출시된 맥북 에어 11인치의 지름 충동이 재발되었었다. 마침 아는 지인의 아이패드를 만져볼 수 있는 기회가 있었고 더불어 맥북에어 11인치도 많은 리뷰들과 실제로 애플 스토어를 통해 접할 수 있었는데 생각보다는 프로그래머 입장에서는 좀 별로였다. 화면이 작고 가벼워 휴대성은 확실히 있지만 답답하다 해야 하나. 아이패드에 키보드 붙혀 놓은 느낌이 들긴 하는데, 사실 아이패드랑 차이점은 뭐지? OS가 다르다는거랑 음.. 카메라도 있구나.. 키보드도 붙어있고..


결국엔 나는 에어가 크게 필요없다 생각하고 아이패드를 질렀다. 내가 지른 이유는 다른게 아니라 일단 나는 신문 보기를 귀찮아 하는지라 디바이스를 통해 보고 싶었고, 최근에 잡지를 보는 재미에 맛들려서 잡지를 좀 편하게 보고 싶었다. 그리고 무엇보다 아이폰으로 일정관리 및 할일 관리를 하려고 그렇게 노력했는데 디바이스가 한계가 있다. 문서작업? 이런건 뭐 생각하긴 힘들고.. 정말 아이폰은 단지 기록용이 맞나 보다. 그리고 GPS나 휴대용 카메라, 화장실에서의 인터넷 등 아이폰으로 할 수 있는게 있는가 하면 문서작업처럼 어려운 것도 있다 이거다.


여튼 이러한 이유에서 아이패드를 지르게 되었다. 여의도의 모 대리점에서 수령받는데 10시 오픈인 것을 알고 9시 40분부터 기다렸는데, 10시 반쯤 되니 내 뒤로 20여명의 사람들이 줄을 서더라.. 역시 애플의 힘이 여기서까지 발휘된다는 점에서 참으로 놀랐다.


드디어10시 반이 넘자 대리점이 오픈! 간단히 신청서와 동의서를 작성하고, 직원이 전산처리를 한 다음 채권료 3만원을 지불하고 아이패드 16기가 3G 겟! 내가 그 대리점에서 처음으로 받았는데 아이패드를 받는데까지 25분 정도가 걸린 것 같다.참고로 나는 사전예약 4차시.

사용자 삽입 이미지사용자 삽입 이미지



아이패드 자체는 생각보다 크지 않다. 9인치인가? 정도로 알고 있는데 위 사진처럼 내 손바닥의 1.5도 된다. 실제로 아이패드 자체도 애플 블루투스 키보드의 1.5배 정도 된다. 박스 내용도 심플하다. 설명서와 충전기, 아이패드 땡~~ 뭔가 난 뭔가를 기대했는데.. 필름이나 뭐 그런거..(;;)


처음 딱 아이패드를 받고 나서 곧바로 느낀 점은 "아, 이거 물건이다." 라는 점이다. 확실히 아이폰에 비하면 불편한 점이 있긴 있다. 원체 아이폰이 보편화가 되었고 이에 따라 활용할 수 있는 어플도 아이폰에 집중되었지, 아직 아이패드용 어플이 그렇게 많지가 않기 때문이다.


특히 3G가 지원되면서 전화번호도 모르겠고, 전화 자체는 스카이프 아니면 안되고, 문자도 안되고.. 카카오톡도 어떻게 설치해야 할지 모르겠다. 그냥 봐서는 3G네트워킹 되는 아이팟 터치의 확장판? 이라고 말하고 싶다.


이미 1주전 갤럭시탭을 구매한 우리 아버지의 갤텝과 비교해 봤는데, 터치감은 압승 하지만 휴대성에서는 갤텝이 확실히 앞서나가는 것 같다. 가독성은 약간 비슷한데 나는 아이패드가 좀 더 좋다고 본다. 웹서핑 시에도 사파리 브라우저가 웹 표준을 잘 준수하고 있으므로 표준화된 사이트에서는 정말 잘 보인다. 하지만 솔직히 말해서 아이패드랑 갤텝을 비교하는 자체가 참 웃긴 건 맞는것 같다. 아이폰과 안드로이드폰이 OS가 다르다 해서 경쟁이 되는 건가? 그럼 안드로이드 탑재한 냉장고 전면 디스플레이랑 아이폰이랑 비교한다? 좀 극단적이지만 내 생각엔 아이패드와 갤텝을 비교하는 게 이런 의미가 아닐까 싶다.


만 하루동안 내가 설치한 앱들을 보면서 아이패드가 가져올 변화에 대해 한번 짐작을 해보도록 하자.


사용자 삽입 이미지

RSS리더기 - Mobile RSS



Mobile RSS는 아이폰에서도 유명한 RSS리더기이다. 이게 아이패드로 오면서 UI가 저렇게 바뀌었는데 확실히 읽기 편하고 한눈에 알아볼 수 있어서 좋다. 물론 타 어플처럼 화려한 애니메이션 효과는 없지만, 가로모드에서는 컨텐츠 리스트와 선택한 컨텐츠를 한번에 볼 수 있다는 자체가 나는 맘에들고, 화면이 넓어서 가독성이 아이폰보다 좋다. 아이폰은 너무 많은 집중력을 요구한다..


사용자 삽입 이미지

PIMS 어플 - Pocket Informant

사용자 삽입 이미지

할일 관리 어플 - 2Do



Pocket Informant는 이미 오래전부터 PIMS로 유명한 어플이다. 아이팟 터치부터 나온 이 어플은 Toodledo와 Google Calendar와 연동되는 아주 유용한 어플이다.


2Do는 나온지는 얼마 안되었지만 내 생각에 현존하는 To Do어플중에 가장 뛰어난 UI를 가지고 있다고 생각하는 어플이다. 시중에 수 많은 To-Do어플이 있지만 이만큼 직관적이고 친화적인 어플은 본 적이 없다.


위 두 어플은 아이폰에도 있는 어플인데 확연한 차이점은? 바로 UI다. 아이폰의 그 작은 화면에서 벗어나 9인치의 큰 화면으로 오면 저렇게 변한다는 것을 상기시켜 준다. 특히, 2Do는 각 화면들이 애니메이션 효과가 있어서 마치 실제 종이를 다루는 느낌도 들게 하며, 위 두 어플들의 전체적인 UI는 마치 내 책상 위에서 다이어리를 꺼내놓고 일정/할일을 관리하는 느낌을 들게 한다.


사용자 삽입 이미지

필기장 어플 - Penultimate

사용자 삽입 이미지

노트 어플 - Evernote



Penultimate 는 필기장 같은 어플이다. 저렇게 노트들이 있으면 거기다가 실제로 필기를 하는데, 현재 랭킹 상위권에 들 정도로 인기가 많은 어플이다. 이 어플 또한 3D지만 실제로 종이에다 쓰는 느낌을 가져오게 만든다. 전용 펜이 없다면야 조금 그렇긴 한데; (완전 글씨가 망가진다.) 어쨌든 예전 타블렛 PC에 있던 원노트 타블렛과는 좀 다른 느낌을 전달해 준다.


Evernote는 많은 사람들이 알겠지만 메모 동기화 어플이다. 웹에서도, 윈도, 맥, 아이폰 등등 다양한 플렛폼에서 정보 수집을 하고 저장해 놓을 수 있다. 이러한 것들이 저렇게 마치 내가 쌓아둔 정보들이 사진처럼, 혹은 클립화 된 것처럼 정말로 서류에 인쇄된 정보들이 보관함에 저장된 느낌을 주게 된다.


사용자 삽입 이미지

오토바이 게임 - 2XL SX HD

내가 받은 유일한 게임 중 하나인 이 2XL SX HD는 아이폰 게임들과 비슷한 맛을 내긴 하는데 큰 화면이다 보니 생각보다 재밌다. 하지만 확실히 UI는 좀 아이패드 답게 바꿔야 할 필요가 있다 생각하는데.. 참 저렇게 보니 조금 허접한 게임처럼 느껴지긴 하다;;

사용자 삽입 이미지

매일경제 아이패드용 어플

사용자 삽입 이미지

중앙일보 아이패드용 어플

사용자 삽입 이미지

중앙일보 아이패드용 어플

뉴스 어플들로 가보자. 솔직히 매경 어플을 보고 상당히 놀랐는데, 아빠가 보는 매일경제랑 거의 똑같은데 동영상과 실시간 기사가 추가되어 있다. 젠장! 엄청 나잖아!! 그리고 실제로 신문 보는 느낌도 나고.. 종이 신문처럼 손으로 한장 한장 넘기는 것이 아니라 그냥 터치만 하면 된다.넘길때 역시 애니메이션 효과가 나서 정말로 신문을 보는 느낌을 주기에는 괜찮은 느낌이다.



중앙일보 어플은 초기 화면에 이미지 섬네일로 구성된 화면이 기존 신문의 틀을 깨는 가 해서 사실 살짝 정이 떨어질 수 있었으나, 각 섬네일로 들어가자 기사 구성이 정말로 잘 되어있다. 레이아웃에 있어서는 동아일보가 그 만큼 신경을 많이 쓴 것이 아닌가 싶다. 가독성도 뛰어나고.. 하지만 단편적인 기사를 전달하는 데에는 저러한 레이아웃이 살짝 아쉬울 수도 있을 것 같다.


사용자 삽입 이미지

트위터,페이스북 리더 - Flipboard

사용자 삽입 이미지
참 이 어플은 UI와 UX의 파괴적인 영향을 가져온 어플이라 할 수 있다. Flipboard 라는 의미 자체가 무언가를 넘긴다는 뜻이고, 단순히 텍스트와 이미지, 동영상의 링크로 구성된 트윗과 페이스북의 정보를 시각적으로 구현했다. 가독성 있는 레이아웃을 랜덤하게 배치하고, 이미지와 글 들을 정말 뛰어나게 구상했다. 컨텐츠를 뛰어난 UI로 구현하니 단순한 글들도 상당한 가치가 매겨지게 되는 것 같다.



사용자 삽입 이미지

마인드맵 어플 - MindMeister

사용자 삽입 이미지

스케치 어플 - Autodesk사의 SketchBook

우선 MindMeister 어플은 마인드맵 어플이다. 아이폰에서 마인드맵을 써본 사람은 알겠지만 그 작은 화면에서 무언가를 하려는 자체가 잘못됬다고 생각한다. 아이폰에서 마인드맵 어플을 3개나 구입해 보고 정말 얼마나 내 의도가 한심하다고 느꼈던지... 어쨌든 이 어플은 웹과 공유되는 어플이다. 웹에서도 아마 무료 서비스로 제공되는 것으로 알고 있고, 웹에서 구현된 마인드맵을 아이패드에서도 제작 가능하다.



특히 아이패드에서는 테마 선택이라는 것이 있다. 아무리 단순한 마인드맵일 지라도 디자인이 이쁘지 않으면 솔직히 보기 싫다. 보기 좋은 떡이 먹기도 좋다고, 말 그대로 마인드맵도 아주 기초적인 디자인이 아니라 좀 가독성 있고 아기자기 한 디자인이 채택된다면, 그 만큼 마인드맵을 만드는 입장에서도 잘 정리가 되어 마인드맵의 효과를 극대화 시킬 수 있다고 생각한다.


Sketchbook은 3D Max나 오토케드 등으로 유명한 Autodesk사의 제품이다. 참 이런 대형 밴더가 어플을 내놓은 자체가 맘에 들고, 약간 윈도에서 Painter필도 나는데 재밌게 드로잉을 할 수 있다. 다만, 좀 더 정교한 드로잉을 위해서는 펜이 필요할 듯 싶다.. 어느 디자이너가 타블렛에서 팬 대신 손가락으로 사용하겠는가. (있을지도 모르겠지만..)


사용자 삽입 이미지
사용자 삽입 이미지

쿡북카페의 책보기 화면



마지막으로 이북 관련된 내용인데, 사실 아이패드를 사는 대부분의 사람들은 이북에 기대가 클 것 같다. 하지만 아직 내가 봤을 땐 위에 있는 게 대부분인 것 같다. Stanza야 아이폰에도 있었고, 인터파크이북? 이건 책을 넘길 떄 애니메이션이 없어서 좀 읽는 맛이 안나고.. 그나마 쿡북카페가 좋긴 한데 아직 나는 사용법을 잘 모르겠다. 쿡북카페는 컨텐츠도 좀 있는 것 같고, 사용하기도 간편하다. 책을 읽는 맛이 나는 것은 물론이다.


아이패드의 사무 이용에 대해


위에서 사무용 어플, 그러니깐 Page나 Keynote, Numbers, Office HD같은 어플은 언급을 안했는데 사실 사무용이라는 것 자체가 좀 포괄적이긴 하다. 리뷰보다는 간단히 내 생각을 정리해본다.


무엇보다 입력 자체가 가장 중요하긴 한데, 확실히 맥북도 쓰고 아이맥도 쓰는 입장에서 무언가 가상키보드로 글을 쓰는 자체가 낫설지많은 않다. 그래서 기존에 맥을 쓰는 사람들은 가상키보드를 쓰는 데 별 불편함이 없을 것이다. 하지만, 맥을 접한 적이 없으면 좀 어려울 수가 있다. 그리고 나름대로 손이 큰 편인데 손이 큰 만큼 글쓰기도 편리하다. 작은 손을 가진 사람은 불편할 수도 있겠다.

사용자 삽입 이미지

아이패드에서 Mocha VNC를 통해 MAC OS X에 접속한 모습

사용자 삽입 이미지

아이패드에서 RDP 접속을 한 모습




메일에서 왠만한 문서용 첨부파일들은 hwp포함해서 죄다 열리니깐 그런건 걱정 안해도 되고.. 메일 보는 것도 참 괜찮은 UI가 나온 것 같고... 특히 RDP 어플도 있는데 그거 사용하면 그냥 원도우 돌린 것과 무슨 차이가 있나 싶디고 하다.


하.지.만.... 나는 프로그래머다. 나 이걸로 프로그래밍 하고 싶은데?? .... 그냥 맥북 프로나 하나 사도록 하자. 이건 확실히 라이트 유저를 위한 제품이다. 아니, 라이트 유저를 위한 최고의 제품이다. 고로 일반 사무직을 하는 사람들은 정말로... 편할 것 같다.


디자이너들에게도 괜찮은 것 같다. 전용 펜을 구매하면 타블렛 필요 없이 일치화 된 아이패드를 사용해서 드로잉 한다면야.. 꽤나 괜찮은 조합이 아닐까?


마지막으로.. 정말 아이패드가 물건이라는 말은 다른게 아니라 지금까지 나온 다양한 아이디어들이 UI와 UX로 발전해 나갈 수 있는 좋은 기회의 상품이라는 것이다. 특히, 아직까지는 크게 주목밭지 못하는 HTML5가 아이패드를 통해 얼마나 그 기회를 살릴 것이냐는 내가 가장 크게 기대하는 점 중 하나이다.


"인터페이스 혁명" 이라는 것이 지금 우리에게 아이패드와 갤럭시 탭으로 다가오고 있다. 이제는 고객을 위해 컨텐츠를 제공하기보다는, 같은 컨텐츠나 서비스더라도 얼마나 직관적으로, 보는 것 자체로도 흥분을 일으킬 수 있는 그런 제품을 내놓으냐가 관건이다. 그런 인터페이스혁명, 이 아이패드를 통해 우리에게 깊이 다가오지 않을까? 나는 이를 조심스럽게 예측해 본다.
크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 메튜장

트랙백 주소 http://izect.kr/trackback/599 관련글 쓰기

  1.  삭제

    Subject: mixsh님의 믹시

    2010/12/01 17:40 | Tracked from mixsh

    [정식 출시된 아이패드를 하루동안 써보고..어플 간략리뷰] 아이패드 리뷰보니까 당장 가서 카드 긁을 기세^^ 아이폰과는 또 다른맛이 참 많네요 ⊙.⊙ 너무 잘 읽고 갑니다 ^^ 12월 1일 믹시 메인에 선정되셨습니다. 감사합니다^^

댓글을 달아 주세요

  1. 박 세원 2011/01/16 23:35  댓글주소  수정/삭제  댓글쓰기

    안녕하세요! 아이패드를 사용하고 있는 학생입니다.
    최근에 RDP를 다운받았는데요, 도저히 무슨 뜻인지 이해가 안가서 하나도 못하고 있네요..
    혹시나 간단하게라도 알려주실 수 있으신지 여쭤보고 싶어요!


드림위버란 아직도 국내 웹디자인 계에서 가장 많이 사용되는(적어도 내 생각엔) 툴이다. 솔직히 말해 개발자들은 드림위버가 느리고 설치과정이 복잡하고 하니 빠르고 간편한 에디트 플러스나 울트라에디터를 자주 사용하는게 사실이다. 아니면 내려밭고 공유하기 편한 이클립스 같은 툴 말이다.


HTML5개발에 앞서 나는 이클립스 GWT, 넷빈즈, xcode등 다양한 툴을 살펴봤는데 아무리 생각해도 드림위버가 가장 간단하면서도 코드 힌트 기능을 통해 쉽게 개발을 할 수 있지 않나 싶다. 솔직히 이클립스 GWT(Google Web Toolkit)는 뭐 물론 웹을 구조화 하는건 좋긴 한데 HTML5를 어떻게 개발해 나가야 할지 감이 안잡히고, 넷빈즈는 공지에는 뭐 지원한다 하더니만 정확한 설명이 없다. xcode는 기본적으로 html5가 자리잡고 있는 것 같지는 않다만, 추가 팩을 통해 지원이 가능한데 일단 추가 팩이 공인이 아니고 내려받아야 한다는 정미 사실 귀찮다.


사용자 삽입 이미지


드림위버 CS5의 초창기 버전에서는 이미 템플릿중 하나로 HTML5를 추가하고 있다. 그리고 어도비 사에서도 얼마전에 가장 강력한 HTML5 툴을 만들겠다고 했는데, 내 생각엔 드림위버를 주축으로 하지 않을까 싶다. 아래의 자료를 보면 곧 드림위버에 추가될 스마트 페이스트(smart paste) 기능을 볼 수 있다.



개인적으로 툴(tool)적인 입장에서 꽤나 혁신적이라 생각한다. 저렇게 눈으로 보이는 것이 단순히 어떤 비트맵화된 이미지가 아닌 백더화된 좌표들의 모임이라면 충분히 HTML5로 컨버팅 가능하며, 물론 이는 다양한 RIA툴에서 적용된 기술이지만 아직까지 이렇게 HTML5를 위한 기능을 제공하는 툴은 없다는 것이다.


사용자 삽입 이미지
사용자 삽입 이미지


위에서처럼 이미 기본적으로 드림위버 CS5에는 문서 형식에 HTML5가 추가되어 있고, 가장 기본적인 독타입도 선언되어 있다. 아 물론 아주 기본적인 문서 형식이지만.


그런데 문제는 코드 힌트 기능을 사용하기 위해서는 어도비에서 추가 팩을 받아야 한다는 점이다.


사용자 삽입 이미지




받는 것은 별거 없다. 여기 에서 내려받을 수 있으며, 자신의 운영체제에 맞는 버전을 내려받고 설치만 하면 땡이다.


사용자 삽입 이미지


중간에 이렇게 익스텐션을 거쳐서 설치가 완료된다.


그럼 설치가 되면 대충 어떤 테그가 지원되나 확인해 본다.


사용자 삽입 이미지

기본적인 Canvas테그, 잘 지원된다.



사용자 삽입 이미지

video역시 내부 테그들과 함께 잘 적용된다.



사용자 삽입 이미지

당근 audio테그도 잘 적용.



사용자 삽입 이미지

input테그에서 이미 date와 datetime, datetime-local, 이메일 등을 제공한다.


사용자 삽입 이미지

좀 생소한 테그인 progress도 지원은 된다. 아직은 크롬에서밖에 지원 안하긴

사용자 삽입 이미지

한층 더 깊게 들어가서, 스크립트 단에서는 일단은 getContext()는 지원되는 것으로 보인다.


아직 HTML5가 표준화가 되지 않아서 아마 다양한 함수들이 w3c에서 표준화 되기 전까지는 아마 패치가 몇번 될 것 같다. 그리고 지금같은 CS의 업데이트 속도로 봐선 아마 내년 초쯤 CS6이 나올 거라 조심스레 예측하고 있고 그쯔음 HTML5가 어느정도 틀이 잡히지 않을까 싶다.



무엇보다 최근 나온 IE9 베타를 통해, 베타가 정식이 되는 순간 국내 판도가 서서히 움직이지 않을까 싶고, 다양한 사이트에서 HTML5에 표준을 지원하며 일단 IE9가 정식이 되면 HTML5는 분명 자리잡을 것이다. 라고 일단 나는 예측해 본다.


사실 아직도 HTML5를 지원하는 툴중에 드림위버도 사실 내 성격을 만족시키지는 않는다. 다양한 툴을 살펴보고 조금 정리해서 다음 포스팅 때는 장단점을 한번 비교해 보도록 하겠다.
크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 메튜장

트랙백 주소 http://izect.kr/trackback/586 관련글 쓰기

댓글을 달아 주세요


각종 브라우저에서 HTML5가 설계되고 지원되면서 몇몇의 개발 툴들이 이미 HTML5/CSS3를 이용 가능하도록 하여 쉬운 웹 개발을 돕고 있다.많은 사람들이 이곳(http://www.html5trends.com)에 HTML5관련 툴을 찾기 위해 방문하고 있다. 오늘 우리는 몇몇의 당신이 HTML5를 쉽게 시작할 수 있는 중요한 툴들을 소개하고자 한다.

아래의 툴들은 HTML5/CSS3의 제공 범위가 다르다. 그러니, 이를 사용할 떄는 목적에 맞게 잘 조합하여 사용해야 할 것이다. 만약 여기에 없는 다른 툴을 사용한다면, 코멘트를 남겨주기 바란다.

1. Google Web Toolkit/Eclipse

구글 웹 툴킷 인큐베이터 프로젝트는 HTML5를 마치 GWTCanvas처럼 제공한다. 구글은 이클립스를 통해 간단하고 마치 데스크탑 어플리케이션을 만드는 것처럼 다양한 디버깅 환경을 제공하는 GWT플러그인을 제공한다. 본 플러그인은 GWT코드를 컴파일 하기 전에 크롬과 파이어 폭스에서 가능여부를 확인할 수 있다.

GWT의 좋은 점은 GWTCanvas가 HTML5의 canvas요소를 IE의 이미지처럼 제공하여 IE에서도 GWTCanvas를 통해 작동한다는 점이다.

데모를 각각 다른 브라우저에서 확인하기 바란다.

2. Adobe Dreamweaver CS5

Adobe는 HTML5를 제작하는 최고의 툴을 제공하기로 약속했다. 그런데 그들이 없다고? 드림위버 CS5에는 HTML5의 테그와 CSS3개발이 추가되어 있다. 아래 CSS3 미디어 쿼리스에 대한 동영상을 보도록 하자.

스마트 붙혀넣기 기능의 조합으로, 일러스트에서 그린 이미지를 HTML5 의 캔버스 그리기 기능으로 변환할 수도 있다. 아래 데모 참조.

최신 개발정보를 확인하기 위해 어도비 개발 블로그를 방문하라.

추가 : 어도비는 얼마전 막 드림위버 CS5를 위한 HTML5 팩을 릴리즈 했다.

이 확장기능은 드림위버의 다음 점을 향상시킬 것이다.

- 3개의 다른 라이브 뷰 디스플레이를 따르는 멀티스크린 미리보기 패널을 미디어 쿼리를 통해 서포트한다.(윈도우 > 멀티스크린 미리보기)
- HTML5 테그 라이브러리의 새로운 테그, 어트리뷰트 그리고 속성들을 코드힌트에 추가되었다.
- CSS3 명세에 대한 코드 힌트중 다음 추가됨 : 2D/3D 변형,애니메이션,배경 및 테두리,기본 유저인터페이스, 선 레이아웃, 마퀴, 미디어 쿼리, 멀티컬럼, 루비, 텍스트, 변형
- <video> 와 <audio>를 라이브 뷰에서 서포트.(퀵타임 플레이어가 설치되어야 함.)
- CSS3의 라이브 뷰의 렌더링을 발전시킴.
-  새 문서 작성 다이얼로그창에 HTML5 시작 레이아웃 추가.
- 디자인 뷰에서 새로운 테그에 대한 더 나은 렌더링 제안.

3. Adobe Flash CS5

어도비는 HTML5 캔버스 랜더링 결과를 플래시로 변환할 수 있는 유틸리티를 제공한다. "Copy Motion as XML" 메뉴로 모션 트윈기능이 XML로 변환되고 드림위버의 스마트 붙혀넣기(Smart Paste) 기능에 이러한 애니메이션이 HTML5 캔버스로 변환되어 추가된다.아래 비디오의 3분 31초를 참조하라.

4. Netbeans IDE 6.9 beta

넷빈즈 IDE의 다음 릴리즈 버전이 HTML5와 CSS3를 추가할 것이다. 버전 6.9의 베타부터 지원될 전망이다. (현재 6.9.1 이 릴리즈 되어 있음.)

5. CSS3 Generator WebApps

이건 좀 성향이 다른 리스트인데, CSS3의 다양한 스타일에 대한 문법을 지원하는 웹 어플이다.

- CSS3Generator : Border Radius, Box Shadow, Text Shadow, RGBA, @Font Face, Multiple Columns, Box Resize, Box Sizing, Outline 같은 기능들을 제공한다.
- CSS3 Gradient Generator : 그라디언트를 제공한다.
- CSS3 Transforms : Transform(변형) 을 제공한다.

6. Font Dragr

이 어플리케이션은 커스톰 폰트를 테스트할 수 있다. 여기의 웹 어플을 확인하라.

또다른 HTML5를 제보해 준다면, 우리는 기쁜 마음으로 리포트 할 것이다 !

(본 내용은 번역된 내용이며, 저작권은 http://www.html5trends.com/ 에 있습니다. 또한, 원문의 글 주소는 http://www.html5trends.com/best-of/6-html5-authoring-tools/ 입니다. 영어가 약해 저작자의 허락을 얻지 못하고 번역한 점을 죄송스레 생각합니다.)

번역 : Bellamy, CHANG(bellamy.chang@me.com) 2010-09-20
번역후기 : 새로운 사실을 많이 알았는데, 특히 드림위버 CS5를 그냥 깔면 안되고 addon을 깔아줘야 HTML5의 새로운 기능을 사용할 수 있는것에 대해 알게 되어 좋은 듯 하다. GWT는 요즘 사용중이긴 한데, 단순히 캔버스를 IE의 캔버스로 변형한다? 그럼 뭐 HTML5툴의 역할을 하는 것인가.. 그건 좀 의문이다. 참고로 본 번역은 필자의 처녀작 번역이다. (축하좀 ㅎㅎ)

크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 메튜장

트랙백 주소 http://izect.kr/trackback/585 관련글 쓰기

댓글을 달아 주세요

  1. Favicon of http://mahabanya.com BlogIcon mahabanya 2010/09/21 01:23  댓글주소  수정/삭제  댓글쓰기

    수고하셨어영~
    번역투이긴 하지만 한글화된 정보가 하나라도 아쉬운 판에 이런 번역은 반갑기만 하다능!!!

  2. Favicon of http://www.starlangs.com BlogIcon 번역가 2010/11/22 02:25  댓글주소  수정/삭제  댓글쓰기

    이젠 HTML5를 이야기 하는군요. 기술 발전은 빠르기만 한데 언제까지나 옛날에만 머무는 것 같아요. 그래도 옛날 거라고 해도 쓸 만하던데.. 이런 생각을 하니까 발전을 못 하지 큭큭... 혼자 주저리였습니다.

    • 아이지 2010/12/05 10:36  댓글주소  수정/삭제

      ㅎㅎ 기술은 점차 더 편리해 지고 있습니다:) 주저할 필요가 없다고 생각합니다! 일단 접하기만 한다면 ^^


최근 인터넷 익스플로러 9의 등장으로 다시 한번 HTML5가 주목받고 있다. 익스플로러 9의 등장과 웹 표준을 정말 정확히 준수한다는 점은 극히 칭찬할 만 하며, 특히 엑티브 엑스에 대해 속도가 느려짐을 경고하며 자사의 엑티브 엑스를 최소화 하고 표준에 중점을 두려 하고 있다. 타 브라우저와 마찬가지로 기존의 IE의 점유율만 믿고 행세하는 것이 아닌 html5 및 각종 스크립트 등의 처리에 있어서 처리 속도의 증가를 내세우고 특히나 자사가 HTML5를 최대로 활용할 수 있다고 강조한 점 등. 물론 아직까진 IE가 단지 윈도우에서밖에 돌아가지 않는다는 점은 아직 완벽한 오픈이라고 볼 수는 없지만, 유럽 시장에서 이미 파폭과 크롬 등의 타 브라우저가 50% 이상을 넘어선 것에 대해 IE 역시 대세를 준수하고 W3C의 권고안을 준수하는 등의 많은 노력을 보인 것으로 확인된다.
사용자 삽입 이미지

브라우저별 html5 지원. (좀됬음.) 출처 : http://www.axleration.com



2008년 말부터 시작된 국내 웹 표준에 대한 전쟁(?)에 이어 지금의 브라우저 시장은 갑작스런 모바일의 등장으로 2010년 초는 모바일 웹의 관심사의 증폭이었다. 하지만 모바일 웹 보다 솔직히 개발자들에게 더 크게 와닿은 것은 다름아닌 앱(App)개발 이었다.


안드로이드나 아이폰 개발을 하며 대박을 냈다는 사람들이 몇 몇 보이면서, 집에서도 쉽게 소호 형식으로 개발해서 앱스토어에 올리면 7:3의 짭짤한 배분률로 $0.99 가격만 해도 한 천명이 구입하면 $990 달러 아닌가. 환산하면 대충 백만원. 실제로 이런 사람이 있긴 하겠지만 정말 그 수 많은 앱스토어 사이에서 그렇게 주목받기가 쉬운가?


사실 앱스토어 자체에는 정말 다양한 경우의 수가 존재하고 특히 앱이라는 자체가 모바일로 돌아가기 때문에 스마트폰을 활용하는 사람들의 생활 패턴이나 그들의 소비 습관, 그리고 그들이 분포하고 있는 사회의 영역이라든가. 하물며 현재 앱스토어에 나와 있는 인기 유/무료 어플들도 비교분석 해야 하는 등등 말이다.


나 역시도 아이폰 안드로이드 관련 책만 한 10여권은 구매했다. 단지 대세에 휘몰려서 말이다. 허나, 기존에 웹이나 SI나 개발하던 사람이 갑자기 모바일로 넘어오면 물론 C와 OOP 에 대한 기본이 잘 잡혀있는 사람이야 몰라도 사실 코코아 기반의 프로그래밍을 이해하는 데에는 상당 시간이 걸린다. 특히나 아이폰 프로그래밍 자체의 고유의 디자인 패턴을 이해하지 못하면 역시나 장벽이 높아지고.. 이런 식으로 개발 진입장벽이 높다는 것이다. 물론, xcode라는 툴이나 안드로이드의 SDK 및 이클립스 등은 잘 만들어져 있지만 말이다.


그리고 이러한 앱 시장은 판도가 너무 빨리 바뀌어 버려서 적응하기도 힘들 뿐더라 솔직한 심정으로 당황할 수도 있다. 이미 개발자의 수요는 폭등하고 있고 언제 어디서 내가 생각한 어플이 심지어 무료로 더 화려한 디자인으로 나올 지 모른다. 소비자는 내 어플을 보고 욕을 할 수도 있고, 환불을 요청할 수도 있다.


무엇보다 애플의 아이폰 자체의 수요에 대한 생각을 해보자. 하나의 스마트 디스플레이로선 크게 성공하긴 했다. 아이폰 4나 아이패드도 상당한 성공을 거두었고 앞으로도 계속 성공을 해 나갈 것이다. 애플이 첨단의 선두를 달리고 있는 한, 그리고 그들의 고유한 시스템을 가지고 있고 계속 진보해 나가는 한 말이다. 하지만 후발주자들은 가만히 있는가?


내 개인적인 생각으론 애플은 처음부터 화려한 UI로 승부수를 걸었다만, 사실 속도에 있어서(프로세스 속도) MS를 따라잡기 힘들었고, GUI를 처리하는 속도 역시 MS가 앞지를 수 있었다. 허나, 애플은 포기하지 않고 비록 막장으로 흘러가더라도 자사의 매킨토시 OS를 계속 발전시켜 나갔고 맥을 토대로 스티브 잡스가 경영선에 복귀했을 때에 헐리우드에서 배운 일종의 디자인 스킬(?)을 산업디자인과 UI/UX디자인에 집중하기 시작했다. 아 물론, 이를 제대로 처리하기 위해 개발자들의 노고도 상당했겠지만 말이다. 그렇게 디자인적인 성공을 거두고 그들의 기술력을 점차 임베디드로 포팅하기 시작. 지금의 iOS와 아이패드 OS에 이르기까지.


사용자 삽입 이미지

애플 장비의 발전사.





복합적인 요소로 애플은 성공할 수 있었고, 안드로이드 역시(역사를 잘 몰라 거론하지 않은 것은 미안하지만) 현재로썬 성공적인 시장 진입과 위치 확보라고 할 수 있다.


하지만 타 OS들이 가만히 있겠는가? OS만 따져서 보면 삼성의 바다OS, 심바인, 블랙베리, 윈도우폰 등등. 지금 그들은 애플을 정말 뼈속까지도 발라보면서 벤치마킹 하고 있다. 그리고, 그들의 OS가 최고로 도약할 수 있도록 정말 엄청나다 할 정도로 개발자에 대한 투자 및 디바이스에 대한 투자, 첨단 기술에 대한 연구를 진행하고 있다.


OS와 디바이스와 함께 한 가지 더 발전하는 것이 있다. 바로 네트워크 망이다. 3G망과 Wi-Fi망이 우리나라 국내만 봐도 솔직히 요즘 와이파이 안잡히는 곳이 없다. TV에서도 올레KT존이니 티와이파이존이니 뭐 엄청난 선전을 때리고 심지어는 3G도 요즘 무제한이 되지 않았는가? 정말 우리나라 이동통신으로 치면 엄청난 발전인데, 해외라고 그렇지 않겠는가.(난 사실 이제 이통사가 뭐 먹고 사나 싶기도 하다. 전화고 머시기고 다 무료화 될텐데 흠.. 오로지 데이터 사용만 부과?)


내가 여기서 말하고자 하는 것은 결국 이 시장 판도가 앱(App)에서 웹(Web)으로 돌아올 가능성이 높다는 것이다. 특히나 모바일 웹 브라우저에서(특히 아이폰용 사파리) HTML5를 철저하게 지원하면서 기존의 플러그인이 없으면 단지 텍스트+이미지로 이루어진 웹이 아닌 구조화되고 flexible하고 다이나믹한, 웹 앱스(Web Apps)가 앱의 시장을 넘어설 것이라고 생각하고 있다. 어차피 미래의 어플은 무료 시대이고 진정 핵심기술에 대한 부과나 아니면 광고가 대세가 될 것이다. 세계 최고의 IT기업 중 하나인 구글이 왜 광고로만 먹고 사려고 하는 것이겠는가?


웹의 기본은 오픈이다. 그동안은 Active X 나 서드파티 등으로 데이터를 제공하는 공급업체들은 자신들의 데이터를 숨기려고 노력했으나, 이제는 그렇지 않다. 웹은 오른쪽 버튼을 눌러서 소스를 볼 수 있는 거의 완벽한 오픈 체제로 돌아설 것이다. 컴파일을 통해 배포하는 형식의 기존의 소프트웨어를 한번에 깰 것이다. 사람들은 점점 무료를 원하고 있고, 오픈을 원하고 있다.


하지만 HTML5가 과연 얼마나 어디까지 발전할지는 사실 미지수이다. 그리고, 이러한 오픈 정책이 정말 열심히 공부해서 컴포넌트를 만들어 놓은 사람들에게는 득이 될지 해가 될지도 미지수이다. 물론, 웹이 존재하는 한 Server-Side 기술이 없어지지는 않겠지만 웹을 통한 오프라인 기술 및 클라이언트 의존적 기술을 제공하기 위해서는 공개 정책을 펼쳐야 한다는 점이다.


하지만 한 가지 확실한 것은, 앱이나 소프트웨어처럼 플렛폼 마다, 기술마다 다 다른 툴과 언어를 사용하지 않고 크로스 브라우징과 플렛폼을 제공하면서 언어의 통일까지 가능한 HTML5는 점점 우리 실상에 다가오고 있다는 것이고, 분명 그 영향력은 엄청날 것이란 것이다. 이에 대한 기회의 장/단점에 대한 판단은 음 글쎄.. 이 글을 읽는 개개인에게 맡기겠다. 참고로 필자는 html5를 잠깐 맛보기를 해 봤는데 뭐 거의 혁명 수준이라 생각하고 지금 살짝 미쳐있는 실태이다.(-_-)


HTML5를 접하기 위해 한번쯤은 챠니(http://channy.creation.net) 님과 몇몇 웹의 고수 분들이 만드신
사용자 삽입 이미지

위 참조서적을 한번 보길 바란다. PDF로 웹에 공개되서 그냥 컴퓨터로 보면 된다. 좀 바이블 같은 느낌이 나지만 그래도 참 잘 만드셨다는 생각이 든다. ^^
크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 메튜장

트랙백 주소 http://izect.kr/trackback/584 관련글 쓰기

댓글을 달아 주세요

  1. vf2416 2010/11/10 15:48  댓글주소  수정/삭제  댓글쓰기

    웹표준은 2~3년 후에나 도입 된답니다ㅋ http://pann.nate.com/b202932488

    • 아이지 2010/12/05 10:35  댓글주소  수정/삭제

      좋은 정보 감사합니다 ^^ HTML5기술의 전쟁은 이미 시작되었답니다~ ㅎㅎ



1. HTML5 브라우저별 호환 비교표
사용자 삽입 이미지

(출처:404techsupport.com)



위에서 보면 알겠지만 맥이든 윈도우든 사파리나 파이어폭스가 최고라고 조사되고 있다.
또한, 여러 큰 밴더들에서는 이미 HTML5와 관련된 샘플을 제공하고 있다.
아래는
윈도우 기준으로 다양하게 다시 조사한 항목들이다.


1) Internet Explorer 8
사용자 삽입 이미지


2) FireFox 3.5
사용자 삽입 이미지


3) Chrome
사용자 삽입 이미지


4) Opera Browser
사용자 삽입 이미지


5) Safari
사용자 삽입 이미지




2. HTML5 샘플 제공 사이트


1) Apple HTML5 showcase ( http://www.apple.com/html5 )
사용자 삽입 이미지

애플의 HTML5 쇼케이스 사이트(http://www.apple.com/html5)


애플에서 제공하는 HTML5 쇼케이스 사이트이다. 비디오, 타이포그라피, 갤러리, 변형(이미지 회전), 오디오, 360도 회전(이미지) VR(Virtual Reality) 등 7개의 수준높은 샘플과 소스코드를 제공한다.



사용자 삽입 이미지
애플 쇼케이스와 연결된 Safari Technology Demos(http://developer.apple.com/safaridemos/) 사이트에서는 7개 더 많은 14개의 데모와 소스코드를 제공한다. 허나, 사파리와 관련된 개발 정보 및 가이드 라인만 볼 수 있는데, 처음 HTML5를 접하고 가이드 라인을 구상하는 데는 큰 도움이 되지 않을까 싶다.
사용자 삽입 이미지

허나 애플 측은 자신들의 브라우저인 사파리를 권장한다. 왜? 뭐 당연히 자기들 브라우저를 마케팅 하려는 요소가 강하지 않겠는가.



사용자 삽입 이미지

Firefox로 접속한 애플 html5 테스트 사이트의 사파리 권장 메시지

나는 위의 경고팝업을 보고 사실 파이어폭스 3.6에서는 HTML5가 지원 안되는 줄만 알았다. 그런데 HTML5 demos 사이트를 가보니 지원 안하는게 아니었다. 다만, Apple측에서 자신들의 퀄리티 높은(?) 샘플을 파폭에서는 마치 지원 안하는 것처럼 보이려고 해 놓은 것만 같다.

2. HTML 5 Gallery(
http://html5gallery.com/)


사용자 삽입 이미지


약 500여개의 사이트가 링크된 이 HTML5 gallery에서는 주로 웹 사이트에 적용된 HTML5 기술을 볼 수 있다. 테그를 통해 주로 사용된 HTML5 테그를 볼 수 있는데, 블로그,뉴스,개인 포트폴리오,스포츠, 웹Apps 등 28개의 카테고리를 제공하고 이에 따라 유저들의 호응까지 알 수 있어서 HTML5를 벤치마킹 하는 데에 큰 도움을 주는 사이트가 아닌가 싶다.


블로그로 제작된 이 사이트는 자료는 많은데 사실 댓글 등을 보면 유저의 호응이 없어서 약간 신뢰가 떨어지는 단점이 있긴 하다. 하지만 최근 업데이트가 7/17 일자이니 나름대로 업데이트는 잘 하는 편이 아닌가 싶다.


3. HTML5 Demos and Examples(http://html5demos.com/)
사용자 삽입 이미지

HTML5 샘플과 브라우저 호환 목록을 제공하는 HTML 5 demos(http://html5demos.com)



위 사이트는 HTML5의 몇몇 핵심 기능들에 대한 22개의 데모들과 소스코드를 제공하고, 이에 쓰인 기술과 호환되는 브라우저를 보여준다. 딱 봐도 IE는 정말 GG쳐야 하지 않나 싶다.


3. Microsoft Internet Explorer 9 Test Driver(http://ie.microsoft.com/testdrive)



사용자 삽입 이미지
약 40개의 HTML5 샘플을 제공하는 Internet Explorer 9 Test Drive 사이트이다. 본래는 IE9의 Preview를 위한 사이트로 개발되었으나, 사실 크롬같은 HTML5 호환 사이트에서는 샘플을 제공하고 있다. 굳이 IE9 Preview를 깔지 않아도 된다는 사실! 샘플 분량은 많지만 퀄리티는 그닥 기대할 것이 아니다. 당장 가장 앞에 있는 Amazon Shelf 라는 샘플만 봐도 알겠지만 말이다.





----------------------------------------------------------


몇 가지 HTML5 기술을 볼 수 있는 사이트들과 브라우저의 호환을 살펴봤는데, 사실 외국 사이트들을 찾으면 HTML5 기술을 사용한 사이트들은 엄청나게 많긴 하다. 하지만 국내에는 거의 없다 시피 한 것이 사실이지만 말이다.


그래서 ! 아이지가 나름대로 HTML5를 연구해서 샘플 사이트를 만드려고 생각하고 있는데, 글쎄 ㅎㅎ 일단은 시간을 하루 빨리 만들어 봐야 되지 않나 싶다.
크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by 메튜장
 TAG CSS3, HTML5

트랙백 주소 http://izect.kr/trackback/573 관련글 쓰기

댓글을 달아 주세요

  1. 오타 2010/08/24 22:10  댓글주소  수정/삭제  댓글쓰기

    2) Fore Fox 라고 써져있네요
    Fire 로 수정부탁 ~ ㅎㅎ

이전버튼 1 이전버튼



블로그 이미지
html5,모바일웹,웹앱,자기브랜드,시간관리 등을 다룹니다.
메튜장

Yesterday198
Today89
Total478,684

달력

 « |  » 2012.02
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29