2009년 이후로 HTML5 는 예전 AJAX 때와 비슷하게 웹 개발의 대세 처럼 인식되고 있습니다. 이 추세는 애플/구글 이 HTML5 에 대한 적극적인 지원을 표명하면서 더욱 활발해 지고 있는데요. 애플/구글 둘다 모바일에서 아이폰/안드로이드로 대결구도가 펼쳐지면서 앞서거니 뒷서거니 HTML5 를 이용한 혁신을 이끌어 내고 있습니다.
전 개인적으로 모바일 웹 어플리케이션에 관심을 가지고, 모바일 시작페이지인 m.xguru.net sizac.kr을 비롯하여 , 지름도우미 with RedLaser 처럼 앱과 웹을 연동하거나, 아이폰에 사진으로 전화걸기 아이콘 만들기 – QuickGuru 처럼 데스크탑/모바일이 연동된 아이폰 웹 어플리케이션을 테스트해 왔습니다.
이제 HTML5 를 이용해서 좀 더 네이티브 앱과 비슷한 웹 앱(Web App)을 만드는 방법을 소개합니다.
아래 자료는 6월12~13일간 열린 KT 의 Econovation 개발자 캠프에서 먼저 발표를 했는데요. 아직은 국내 아이폰 앱 개발자분들이 Objective-C 를 이용한 네이티브 앱에 관심들이 많으셔서 그런지, 조금 생소한 주제였던듯 합니다. 하지만 모바일에서의 HTML5 를 이용한 어플리케이션 개발은 분명한 장점을 가지고 있습니다. 한번만 작성하면 아이폰/안드로이드/블랙베리/심비안등 여러개의 플랫폼에 큰 문제없이 바로 적용이 가능하다는 것이죠. 강의에서는 이 모바일에서의 HTML5 를 이용한 개발의 장점에 대해 설명하고 어떻게 앱을 만드는지를 소개하려고 노력했습니다.
HTML5 로 iPhone App 만들기
자료의 내용은 4가지 주제로 이루어 집니다.
- HTML5 – HTML5 자체의 기능에 대한 설명입니다. 이건 따로 웹사이트에 HTML5 slide 오픈소스를 수정해서 자료를 만들어 두었습니다. http://dev.xguru.net/html5 에서 보실수 있습니다.
- iPhone Web Application 아이폰의 웹 어플리케이션 작성방법에 대한 간략한 소개입니다. 기존 웹 사이트 관리자들도 참고하실만 합니다
- jQTouch, iUI , WebApp.Net 웹에서 아이폰 UI 스타일을 표현하기 위한 UI 프레임워크 들을 간략히 소개합니다.
- PhoneGap 웹 어플리케이션을 아이폰 네이티브 어플리케이션으로 만들어주는 Phonegap 프레임워크를 소개합니다.
기본적으로 HTML,CSS,Javascript 에 대한 약간의 지식은 있다고 가정하고 작성을 했구요. ^^;
강의는 먼저 HTML5 의 기능중에서 모바일에 중요한 기능들을 설명하고, 아이폰에서 웹 앱을 만드는 방법에 대한 소개, 그리고 웹에서 아이폰 스타일의 UI 를 작성하는 방법 , 그리고이렇게 작성된 웹 앱을 네이티브 앱으로 만들어주는 Phonegap 을 소개하는 순으로 진행됩니다. 제가 말이 좀 많고 빠른편이라 슬라이드에는 설명은 그리 많지 않습니다. ^^;
아무래도 발표용 자료로 만든것이라 슬라이드만 보고 전체를 이해하시기에는 조금 어려울듯도 한데요. 궁금한 부분 있으시면 저에게 문의 주세요.
앞으로 미진한 부분을 조금씩 보강해 나가겠습니다. 혹시 필요하시다면 이 주제에 대한 세미나 요청은 메일로 보내 주세요 🙂
역시~~
고맙습니다 🙂
너무 멋지세요!
내용이 너무 정리가 잘 되어 있어서, 특별한 설명이 없어도 바로 쏙쏙 들어오는 것 같습니다.
어이쿠 고맙습니다. 내용이 부실할까봐 걱정 많이 했는데 ^^;
정말 대단하십니다. 저같은 초심자는….ㄷㄷㄷ..
아..근데 트위터에 xguru 와 xguru_ 두분이 존재하는데 동일 인물 이시죠?ㅋㅋ;;
앗 xguru_ 계정은 제 트위터 API 테스트 계정입니다. ^^
관련 지식이 빈약한 저에게도 팍팍 꽂히는 내용이네요. 프로그래머가 아닌데도 도전해보고 싶네요. 좋은 자로 진심으로 감사합니다.
다행이네요 고맙습니다 ^^
안녕하세요. 일전에 트윗에 언급을 해주셨던 아이캐시하우스의 개발자입니다ㅋ 아직 국내에서는 여기저기서 어플리케이션만 언급이 되지만, 해외에서는 html5를 필두로한 모바일웹으로의 이동이 많이 주목을 받는 것같이 느껴집니다. 저 역시 토대가 웹인지라 자연스럽게 모바일웹에 무게중심을 많이 두고 관심을 가지고 있는데 개발을 하다보니 모바일웹(모바일사파리)에는 기술이 아닌 정책적인 제한사항이 몇 가지 있는 것 같더라구요. 이를테면 사운드나 비디오 재생에 컨트롤할 수 있는 여지를 없앤다거나 하는 것 등이요ㅋ 프리젠테이션에 언급된 iphoneGap이라는 것에 대해서도 좀 알아보면 재미있겠네요. 좋은 정보 감사드립니다.
안녕하세요! 아이캐시하우스 모바일페이지 잘 만드셨더군요 🙂
전 모네타 미니가계부에 정리해둔게 몇년치가 있어서 쉽사리 넘어가질 못하고 있어요 ㅠㅠ (임포트 지원은 예정없나요 ? ㅎㅎ)
나중에 차차 마련을 해보도록 하겠습니다;
항상 좋은 정보 감사드립니다.
고맙습니다 🙂
안녕하세요~ 구루님~ 모르시겠지만 ^^
열렬한 구독자랍니다..
좋은 글 많이 많이 올려 주세요~
넵 이제 블로그에도 글을 좀 자주 쓰려고 합니다 🙂
핑백: jiojio7's me2DAY
죄송한데 selfintro 에 있는 janejin86 글이랑 janejin1115 글좀 지워주세요 ㅠㅠ
계정을 변경했는데 계속해서 글이 남아있네요 부탁드려요!!
삭제해드렸습니다.
iPad로 http://dev.xguru.net/html5 접근하면.. 사파리가 튕겨버리는군요… ㄷㄷㄷ
네 몇몇 부분이 데스크탑 브라우저에 맞춰져 있고, 페이지가 조금커서 그런듯 합니다. ^^
핑백: ironyjk's me2DAY
안녕하세요 구루님. 지난번 kt워크샵에서 map붙이는 것에 대해 질문했던 사람입니다. 세션 종료되고 질문을 할려고 했는데 갑작스럽게 나와야 해서 제대로 질문을 못드렸습니다. 실례가 안된다면 jQTouch로 제작한 웹 앱에서 구글맵 v3를 첨부하는게 가능한지 여쭤보고 싶은데요. 첨부했을때 맵이 드래그 하는 반대방향으로 가서 mapfix시키고 다시 해보면 플릭커 현상이 나타납니다.
jQTouch 와 구글맵 V3 의 충돌에 관해서 다양하게 논의된 토픽이 있구요.
http://code.google.com/p/jqtouch/issues/detail?id=44
여기에 여러가지 해결방안들이 나와있는데, 21번째 코멘트에 manifestinteractive 라는 아이디가 쓴 방법의 예제를 보니 잘 되네요.
감사합니다!
구루님, 트윗 보고 왔습니다.
좋은 자료 감사합니다.
많은 도움이 되었습니다. : )
고맙습니다 블로그 엔진 옮기고 첫 덧글이시네요 🙂
구루님, 항상 잘 보고 있습니다.
그런데 위에 링크하신 slideshare 사이트에 들어가서 해당 슬라이드를
다운받으면 html5iphoneapp-100614081942-phpapp01.key 이 파일이 다운
되더군요. 13메가나 되어서 의미 있는 파일인 것은 같은데
파워포인트로 열리지도 않고요. 원본을 다운 받을 수 있는 방법이 있을까요?
아 제가 문서작성을 키노트로 해서요. 키노트 문서 파일입니다.
PDF 파일링크를 알려드리겠습니다.
http://j.mp/d8ijiy
감사합니다. ^^
키노트 확장자가 key였군요 ^^
잘 알겠습니다.
좋은 정보 고맙습니다!
ㅎㅎ 잘 봤구요 jqTouch가 뭔가 합병? 했다는 소식 링크 남깁니다
http://firejune.com/1611
jQTouch 는 그대로 MIT 라이센스로 남구요. Sencha Touch 는 아이폰/아이패드/데스크탑 까지 아우르는 종합 UI 프레임워크로 발전시킬꺼라고 합니다. 상용화 단계도 거치구요 ^^;
핑백: HTML5 로 iPhone App 만들기 | 2nd Step
우와!! 멋진 글입니다. 잘 읽고 갑니다. 😉
좋은 정보 감사합니다. 입문자가 개념 잡기에 참으로 좋은 자료 같습니다.
구루님 혹시, Web App상에서 멀티태스킹이 가능할 방법 혹시 있을까요? 멀티태스킹으로 호출시 Web App는 재시작하는 문제가 있습니다.
현재 사파리는 아이폰의 메모리한계때문에 다른 화면으로 갔다가 돌아올때 웹페이지가 리로드 되는경우 (메모리를 다른곳에서 많이 사용) 와 안되는경우로 나뉘게 됩니다. 즉 개발자가 이 상황을 컨트롤 할수 없다는것인데요.
어쩔수 없이 Web App 자체가 현재의 상태를 LocalStorage 와 Web SQL 쪽에 저장해두고 있다가 접속시 가장 최근의 상태를 로딩하도록 만들어야 할듯 합니다.
그렇군요. 해결 방법이 없나 고민 많이 했었는데 구루님 덕분에 뭔가 해결점이 보입니다.^^ 감사합니다.
핑백: HTML5 on Mobile : 왜 HTML5 가 모바일에서 중요한가 | Guru's Blog
안녕하세요.
지나가다가 좋은 자료 보고 초면에 질문을 올려봅니다.
아이팟터치 앱중에 speedtest.net이라는게 있는데요.
KT 에그(EGG) 같은 휴대용공유기를 아이팟터치에 연결하면 속도가 1~4mbps 밖에 안나오네요. 그런데, 아이팟터치를 Xspeed AP에 붙이면 10M이상 나옵니다. PC에 쓰는 사파리와 아이팟터치의 사파리간에 데이타처리하는 방식에 차이가 있나요?
에그는 와이브로를 이용하기 때문에 속도가 일반 초고속 인터넷에비해 떨어집니다
와우
우연히 검색해서 들어오게됐는데
너무 이해하기 쉽게 정리가 잘~~되어있어요!
앞으로 자주들어올듯!^^ 잘보고갑니다!!
형 나야 일영이 블로그는 예전에 알고 있었는데 이렇게 글은 첨 남기네…역시!! 옛날이나 지금이나 변함이 없네 ^^ 종종들를께…
호 오랜만이야. 메일로 연락좀 해!
phonegap으로 앱 만들고 JQTouch를 이제 막 적용해 보려 하는 찰나에 이런 좋은 문서를 만나게 되네요. ^^ 잘 보고 갑니다.
좋은정보 접하고 갑니다. 감사합니다.^ ^
구루님 안녕하세요! 좋은 글 잘 보았습니다.
질문이 있어 이렇게 글 남겨 봅니다.
Wep App를 통해 아이폰에 담겨 있는 이미지를 웹서버로 업로드 할 수 있는 방법이 있는지 궁금합니다!
현재로선 웹앱으로는 불가능합니다. Phonegap 같은 Hybrid 앱 형태로 만드셔야 합니다.
좋은 정보 감사합니다..^^;;
저는 웹 개발자이며 안드로이드 개발에 관심이 있는데, 안드로이드에는 아이폰의 PhoneGap 프레임워크와 같은 툴이 없을까요?
PhoneGap 이 안드로이드도 지원합니다.
8월 25일날 구루님 강의잘들었습니다. 인사가 많이 늦었네요 ㅎㅎㅎ
다름이 아니라 현재 웹 어플리케이션을 개발중인데.
웹으로 홈화면에 추가해서 아이콘 등록시켜서 하면 정말 어플리케이션 처럼 되는데 링크를 통해 다른 페이지로 넘어가면 사파리가 켜지면서 다른페이지로 넘어가는데 어플리케이션 안에서 해결하고 싶어요 어떻게 방법 없을까요.?
웹앱으로 동작후에는 다른페이지로 넘어갈때 무조건 그렇게 되기때문에 아마도 IFRAME 을 쓰거나 하셔야 할듯 합니다.
감사합니다ㅋ
아 그리고 혹시 윈도우 환경에서는 아이폰용 폰갭은 못쓰지요??
네 불가능합니다 ^^; 아이폰 개발은 서버에서 컴파일&패키징 해주는 경우를 제외하고는 다 맥에서 하셔야 합니다.
대단하십니다..모바일 웹에 대해 연구 중이었는데,,많은 도움이 되었습니다..앞으로도 좋은 글 포스팅 바랍니다.
요즘 폰갭에 꽂혀서 자료를 찾아보다 구루님 글 보고 많이 배워갑니다.
종종 아니 자주 들려야겠습니다. ^^
구루님 글은 볼 때마다 참 정리 요약이 잘되어 있다는 느낌이 듭니다. ^^ 저는 출판쪽에서 일하는데 html5 모바일 웹 앱쪽으로 원고를 부탁하고 싶습니다. 꼭 이 책이 아니어도 함께 작업하고 싶은 욕구가 솟아오릅니다. ㅎㅎ 연락주세요. (한 때는 이십여권 정도 책 원고를 썼던 저자였습니다.)
잘보고갑니다 ^^ 감사합니다
정말 대단하세요!! 감사합니다.
와. 역시 구루님께서는 대단하십니다~!
정말 많이 배우고
배우는 과정에 힘든부분이 있어지만 이제는 이강의만 듣고
열심히 파고들어가 좋은 어플[개발,배포 및 판매]하여
판매될시에 기부에 활용할수 있도록 노력해봐야겠군요.^^
항상 좋은 강의를 올려주셔서 감사합니다.^^