Search results for 'Mobile Web'

Mobile Web & HTML5 performance optimization

2011.06.16 11:25
6월 14일부터 16일까지 Velocity라고 하는 웹 최적화와 운영에 대한 컨퍼런스가 Santa Clara에서 열리고 있습니다. 아직 현지에서는 마지막 날 행사가 남아 있겠네요. 이 행사의 워크샵 중에 모바일 웹과 HTML5의 퍼포먼스 최적화에 대한 자료가 있어 공유해봅니다.

워크샵의 진행자는 Maximiliano Firtman 이며 이 사람은 Programming the Mobile Web(2010년 7월 출간)과 jQuery Mobile Up and Running(2011년 10월 출간 예정)의 저자이기도 합니다. 또한 http://www.mobilexweb.com/의 운영자이기도 합니다.

모바일 웹 개발에 있어서 당장이라도 적용해볼 수 있는 여러 내용들을 담고 있으니 모바일 웹에서의 성능 향상 방법을 궁금해하시는 분이라면 바로 확인해보기 바랍니다.


 
 

nundefined HTML5_JS_CSS html5, jquery mobile up and running, maximiliano firtman, Mobile Web, mobilexweb.com, optimization, performacne, programming the mobile web, Velocity, 모바일웹, 성능, 최적화

Mobile Web에 대한 자료 몇 가지

2011.06.15 00:34
근래 모바일 웹에 대한 강의를 진행한 일이 있습니다. 강의 준비를 하면서 발견한 눈에 띄는 자료 몇 가지를 공유해봅니다.

 
공개된지 1년이 넘기는 했습니다만 모바일 웹 개발을 처음 시작하면서 살펴보면 도움이 될만한 내용입니다. context, performance, security, design, portability의 다섯 가지 주제로 잘 설명이 되어 있습니다.


웹 기술을 이용하여 점점 다양해지는 모바일 환경에서 어떻게 대처해나갈 것인지 엿볼 수 있습니다. 프레젠테이션을 만든 곳이 sencha라는 모바일 웹 프레임워크를 만든 곳이다보니 결론은 쉽게 예상할 수 있습니다. 그렇지만 그 결론이 틀린 것은 아닙니다. 어디까지나 웹이냐 앱이냐는 도구일 뿐 목적은 아니니까요.


뒤쪽은 볼 필요 없고 앞쪽의 네이티브 앱, 모바일 웹, 하이브리드 앱에 대한 비교까지만 보기 바랍니다. 약간 국내 실정과 다른 부분이 있는 것은 아닌가? 라는 생각이 조금 들긴 합니다만 그렇다고 해서 완전히 무시할만한 내용은 아닙니다. 모바일 환경에서의 세 가지 구현 방법에 대한 이해를 높인다고 생각하시면 적당할 것 같습니다.


이 자료는 좀 색다른 자료입니다. 모바일이 우리의 라이프스타일을 어떻게 변화시키고 있는지에 대한 것입니다. 여러 모로 자료를 살펴봤을 때 전문가가 만들었다기 보다는 학생 발표 자료 같은 느낌이 납니다. 하지만 꽤나 잘 만든 프레젠테이션이고 내용도 곰곰히 생각해볼만 합니다.   

http://www.quirksmode.org/mobile/
여러 모바일 브라우저의 특징에 대해 잘 정리해둔 페이지입니다. 개발을 진행하다 보면 이 페이지에서 발견할 수 없는 여러 난관에 부딪히겠지만 그래도 이런 가이드가 있어 조금은 편리하게 개발할 수 있을 것으로 생각합니다.

http://www.lukew.com/ff/entry.asp?1073 - Touch Gesture Diagram
제목 그대로 터치 제스처에 대한 여러 다이어그램을 모아둔 페이지입니다. 여러 직군의 사람들 사이에서 일관된 용어를 사용하고자 할 때 기준으로 삼으면 안성맞춤입니다.


오페라 개발자 도구라는 제목이 붙어 있긴 합니다만 일반적으로 모바일 웹을 개발할 때 고려해야 할 내용들이 잘 정리되어 있습니다. 

Rethinking the Mobile Web by Yiibu
View more presentations from Bryan Rieger

무엇보다도 눈에 쏙쏙 들어오는 매우 잘 만든 프레젠테이션입니다. 볼만한 내용이 별로 없더라도 잘 만든 프레젠테이션이 어떤 것인지 잘 보여주는 예입니다. 하!지!만! 내용도 매우 훌륭합니다. 이 프레젠테이션은 꼭 보시기 바랍니다. 여러 모로 강추! 하기에 아깝지 않습니다. 시간이 있다면 다른 프레젠테이션도 꼭 살펴보기 바랍니다.


한글로 된 웹과 모바일의 전반적인 트렌드에 대한 자료입니다. KTH에 재직 중이신 권정혁님께서 만드신 자료입니다. 기술 트렌드 및 하이브리드 앱에 대한 내용을 얻을 수 있습니다.


마지막으로 CSS3의 media query에 대한 프레젠테이션입니다. 이 자료 하나만으로도 media query에 대해 많은 것을 알 수 있을 것입니다. 이 자료만 가지고 media query에 대한 강의를 해도 충분할 것 같습니다.


강의를 준비하면서 찾아본 자료는 이보다 훨씬 많지만 쉽게 볼 수 있으면서도 강의 준비에 많은 도움이 된 자료를 위주로 정리해봤습니다. 모바일 웹을 이해하는데 많은 도움이 되기를 바랍니다.


nundefined HTML5_JS_CSS context, CSS3, design, hybrid app, Lifestyle, media query, mobile browser, Mobile Web, native app, Performance, portability, Security, sencha, slideshare, 네이티브 앱, 라이프스타일, 모바일 브라우저, 모바일웹, 하이브리드 앱

일주일간 모은 링크 #6

2011.04.25 11:43
Google URL Shortener gets an API
구글의 단축 URL서비스인 goo.gl의 API가 드디어 오픈되었습니다. 이미 bit.ly등 단축 URL 서비스를 제공하는 다른 곳에서도 제공하고 있기 때문에 빠른 시간 내에 오픈될 것으로 기대하던 참입니다. bit.ly같은 경우 이미 많은 서비스에서 사용하고 있기 때문에 굳이 구글을 기다릴 필요는 없었지만 구글이라면 뭔가 다르지 않을까 하는 기대가 있었나 봅니다. 아직 랩에 등록된 API이므로 예고 없이 변경될 수 있다는 부분이 아쉽다면 아쉬운 부분이네요. 

JavaScript에서 네임스페이스를 이용하여 구조적으로 JavaScript를 짤 수 있는 방법에 대해 설명하고 있습니다. 네임스페이스를 사용하면 코드를 다른 코드의 영향을 받지 않도록 작성할 수 있습니다. 또한 전역 변수를 사용할 경우 변수명을 모호하게 지정하거나 변수명이 충돌할 수도 있는데 이런 문제를 근본적으로 해결할 수 있습니다. (전역 변수를 사용할 경우 variable scope으로 인해 실행 속도에 영향을 주기도 합니다.) JavaScript로 복잡한 프로그램을 작성해야 한다면 이 글을 읽고 한 번 적용해보면 어떨까요?

오래된 스타일의 JavaScript에 대한 이야기입니다. 동작하는 데는 문제가 없지만 더이상 추천받지 못하는 코드를 소개하고 있습니다. 유지보수하기 어려운 코드라거나 성능상 문제가 있는 코드 등 몇 가지 피하면 좋을 코드 패턴을 정리해두고 있습니다. 복잡한 공부를 하지 않고도 이 글을 읽고 적용해보는 것만으로도 두고두고 도움이 될 코드를 만들 수 있을 것으로 생각합니다.

작년 Velocity 2010 워스샵에서 Maximiliano Firtman이 발표한 발표자료입니다. High performance라는 제목을 달고 있지만 앞부분에는 모바일 웹 환경에 대한 이야기를 포함하고 있으므로 모바일 웹 환경에 대한 기본적인 이해를 하기에도 적당한 자료입니다. 여기서 소개하고 있는 블로그의 경우 모바일 웹에 대한 좋은 자료가 많이 올라오고 있으므로 모바일 웹에 관심있는 분이라면 이 블로그를 관심있게 살펴보셔도 좋을 것으로 생각합니다.

자바스크립트 코드의 품질을 측정하는 툴로써 유명한 Douglas Crockford의 JSLint가 업데이트 되었습니다. 자바스크립트 코드의 품질을 측정하는 툴이 몇 가지가 더 있는 것으로 알고 있습니다만 JSLint 만한 것이 없죠. 여러분이 작성한 자바스크립트 코드가 얼마나 건강한지 궁금하다면 jslint.com을 방문하여 여러분의 코드를 확인해보기 바랍니다. 단, JSLint를 실행시키고 난 후에는 여러분의 기분이 상할 수 있으니 주의하기 바랍니다. 

정규 표현식을 편집할 수 있는 도구입니다. 정규 표현식과 테스트 대상 코드를 넣으면 실시간으로 선택결과를 표시해줍니다. 페이지에는 간단한 레퍼런스도 제공하고 있으니 정규 표현식에 익숙하지 않은 경우 이 페이지에서 표현식을 수정해가며 원하는 정규 표현식을 만들 수 있을 것입니다.

간단한 북마크 형태로 제공되는 JavaScript performance 도구입니다. 페이지의 DOM과 다른 부분들을 분석하여 어떤 부분을 개선하면 좋을지 안내해줍니다. 여기서 안내해주는 모든 가이드를 적용할 것인지는 각자의 몫이지만 한 번씩 검토해보면 좋을 내용들을 안내해주고 있습니다. 개인적으로는 엘리먼트의 갯수나 노드의 갯수를 알려주는 프로그램이 필요했는데 이 프로그램으로 간단하게 해결할 수 있게 되어 좋네요.

nundefined HTML5_JS_CSS API, bit.ly, dom monster, douglas crockford, goo.gl, Google, javascript, jslint, Mobile Web, Namespace, Performance, regex, Regular Expression, rejex, URL Shortener, variable scope, 자바스크립트

일주일간 모은 링크 #1

2010.12.12 23:30

자바스크립트의 성능을 향상시키는 10가지 방법에 대한 글입니다. 로컬 변수를 활용하라, with()구문을 사용하지 말라 등 속도를 높이기 위한 방법을 설명해두었습니다. 최근 자바스크립트 엔진의 속도가 빨라지면서 코드가 느리게 짜여진 경우에도 문제가 발생하는 일은 많지 않지만 어딘가에 있을 자바스크립트의 실행 속도가 느려 고민하는 분들은 이 글을 읽고 한 번쯤 코드를 살펴보면 좋을 것 같습니다.

iOS, android, nokia & symbian, blackBerry 등 다양한 기기에서 모바일 웹 개발을 할 때 살펴봐야 할 공식 가이드를 한 곳에 모아둔 곳입니다. 글에서 모아둔 가이드가 완전하지 않고 때로는 틀리는 경우도 있다고 경고하고는 있지만 모바일 웹을 만들 때 가장 먼저 살펴봐야 할 자료들이라고 생각합니다.

HTML의 Canvas와 자바스크립트를 이용하여 누드 사진을 판독하는 자바스크립트 라이브러리입니다. 서버에서 누드 사진을 판독하는 기술은 이미 오래 전에 도입된 것으로 알고 있는데 이제 HTML을 이용한 이미지에 대한 처리가 가능해지면서 이런 재미있는(?) 코드도 나오는 듯 합니다. 현재 이 코드는 IE9, FF3.6 이상, 크롬, 사파리 (아이폰/아이패드 포함), 오페라 브라우저에서 사용할 수 있습니다. <video>를 사용한 동영상에서 누드 사진(동영상이라고 해야할까요?)을 판독하는 데모도 있습니다만 제 네트워크 속도가 문제인지 정상적으로 데모를 확인할 수는 없었습니다.

크롬 웹스토어가 오픈하면서 크롬 브라우저에서 애플리케이션을 실행시킬 수 있게 되었는데요 여기에 발표된 여러 앱들이 iPad의 디자인에서 얼마나 많은 영향을 받았는지에 대한 기사입니다. 저는 아직 설치를 해보지 않았는데 기사에 있는 이미지들을 보면 iPad앱과 거의 동일한 것을 알 수 있습니다. 기사 내에서 iPadification of the web (웹의 아이패드화)이라는 표현을 썼는데요 이런 방향이라면 내년 상반기에는 국내에서도 iPad 앱과 유사한 웹을 만나게 될 가능성이 높을 것 같습니다. 물론 이렇게 된다면 HTML5와 자바스크립트의 활용도가 더 커지겠지요.



nundefined HTML5_JS_CSS canvas, Detection, guideline, IPAD, javascript, Mobile Web, Performance, Web App, 누드사진판독, 모바일웹, 성능, 성능향상, 향상