Search results for 'mobile browser'

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, 네이티브 앱, 라이프스타일, 모바일 브라우저, 모바일웹, 하이브리드 앱

일주일간 모은 링크 #2

2010.12.19 23:00
JavaScript로 Rich Internet Application(이하 RIA)을 만들 때 따르면 좋을 가이드라인입니다. 일반적으로 RIA의 경우 대부분의 기능이 JavaScript로 구현되고 매우 복잡해지는 경향이 있습니다. 이럴 때 프로그램 전체를 관통하는 가이드라인이 있다면 프로그램의 성능도 개선되고 이후 관리가 편해지는 장점도 있습니다. 아직 특별한 가이드라인이 없는 상황이라면 이 페이지를 기본으로 삼아도 좋을 것 같습니다. 또한 내용 중에는 빠른 실행을 위한 코드 작성 방법도 많이 언급되어 있으므로 실행 속도가 느려 고민하고 있는 경우라면 이 페이지의 내용을 바탕으로 소스코드를 검토해봐도 좋을 것으로 생각합니다.

현재 스마트폰에서의 브라우저가 어떤 상황인지에 대해 정리한 Peter-Paul Koch의 글입니다. 글의 서두에서 2~3년 내에 어떤 사이트에서든지 모바일을 지원하게 될 것이므로 개발자는 이를 위한 기술을 닦아야 한다고 이야기 합니다. 하지만 모든 브라우저에 맞는지 테스트하기는 어렵다고도 합니다. 최소한 열 개의 OS가 존재하고 15개 브라우저에 대해 생각해봐야 하는 상황이라고도 합니다. 하지만 기기가 비싸 모든 개발자가 기계를 구매할 여력이 되는 것은 아니므로 이 글을 통해 모바일 웹 마켓, 폰 플랫폼과 브라우저에 대해 조망하려고 한다고 합니다. (멋지군요!) 재미있는 것은 글 중에 Dolfin(삼성 바다의 웹브라우저)이 가장 빠른 모바일 브라우저라고 하는 부분이 있습니다. (오호~) 또한 글의 마지막에는 읽어볼만한 글을 소개하고 있으므로 모바일 웹에 관심있는 분들이라면 이 글부터 시작해보시면 좋을 것으로 생각합니다.

스크립트를 로드하는 속도를 개선하는 JavaScript 모듈입니다. High Performance Web Sites와 Even Faster Web Sites의 저자인 Steve Souders가 만들었습니다. 예전에는 야후에서 일하고 있었는데 지금은 구글에서 일하고 있군요. 웹사이트의 퍼포먼스나 속도에 대한 책은 이 분이 쓴 책을 제외하면 거의 없는 상태로 어떻게 보면 웹사이트의 속도라는 분야에서는 독보적이라고 할 수도 있을 것 같습니다. 어쨌든 ControlJS의 경우 JavaScript가 실행되는 동안 화면의 렌더링이 멈추는 문제를 피하기 위해 ControlJS에서 스크립트를 로드하는 타이밍을 관리하거나 특정한 이벤트와 연결하여 이벤트가 발생하는 시점에 페이지를 로드한다던가 하는 방식을 지원하는 것으로 보입니다. 그리고 로드가 완료된 후에는 사용할 수 없는 document.write기능을 사용할 수 있게 해줍니다. 실제 적용을 위해서는 고려해야 할 요소가 더 있을 것 같다는 생각이 들긴 하지만 속도 문제로 어려움을 겪고 있다면 한 번쯤 심각하게 고민해봐야 할 프로그램이라고 생각합니다.

JS의 primitive type에 대해 적은 글입니다. 링크명에서도 쉽게 알 수 있듯 일본어로 되어 있는 사이트입니다. JavaScript의 문법적인 내용에 관심이 있는 분이라면 간단하게 읽어볼만한 내용입니다. (그만큼 이미 알고 있는 분들도 많을듯)

모바일 웹을 개발할 때 필요한 에뮬레이터와 시뮬레이터에 대한 정보를 모아둔 사이트입니다. 위의 링크 중에도 테스트할 수 있는 기기가 매우 비싸 개발자가 기기를 모두 갖출 수 없다는 글이 있었는데 그런 어려움을 일부 해소할 수 있는 좋은 방법이라고 하겠습니다. iOS, Android, Galaxy Tab addon, Nokia나 BlackBerry용도 있습니다. 

nundefined HTML5_JS_CSS Browser, code guideline, controljs, high performance web sites, mobile browser, RIA, Rich Internet Applications, smartphone, steve souders