hacking/web2010/11/18 14:50

HTML5/CSS3/JavaScript로 아이폰 앱 만들기 - XCode 프로젝트 템플릿

크리에이티브 커먼즈 라이선스
Creative Commons License
얼마전에 쓴 "HTML5/CSS3/JavaScript로 아이폰 앱 만들기"에서 설명(응? 언제 설명했는데?) 반복적인 초기 작업을 더 쉽게 할 수 있도록 Xcode 프로젝트 템플릿을 만들어 보았다.

Dropbox에 올려둔 hellowebapp-ios-xcode_project_templates.tar.gz 를 받아서,
"~/Library/Application Support/Developer/Shared/Xcode/Project Templates"에 풀고,
Xcode에서 File 메뉴의 New Project를 선택하거나,
Xcode를 실행하고 "Create a new Xcode project"를 선택)하면,
프로젝트 템플릿을 선택하는 대화상자가 나오는데,
"User Templates" 아래에 "WebApp" 카테고리 안에 "HelloWebApp"을 선택하면,
지정한 이름으로 깔끔한 "웹 앱" 프로젝트가 만들어 진다.
(입맛대로 Device나 Simulator로 타겟을 바꾸고)
이제 그냥 "Build & Run" 하시면 되시겠다~


참고로, 지난 번 스크린캐스트 이후에, 웹 리소스(html, css, js, png...)들을 다른 소스와 분리해서 "www" 디렉토리 안에 몰아 넣도록 약간 수정된 버전이다.

안드로이드용 템플릿은 어떻게 만들까 고민 중... -_-; 이거 하자고 이클립스 플러그인을 만들 수도 없고...

저작자 표시 동일 조건 변경 허락

'hacking > web' 카테고리의 다른 글

웹에서 아이폰스러운 Carousel 구현하기  (0) 2011/03/13
터치기반 모바일 웹킷에서 버튼 반응 속도 개선하기  (0) 2011/03/13
HTML5/CSS3/JavaScript로 아이폰 앱 만들기 - XCode 프로젝트 템플릿  (1) 2010/11/18
HTML5/CSS/JavaScript로 안드로이드 "앱" 만들기  (0) 2010/11/16
HTML5/CSS/JavaScript로 아이폰 "앱" 만들기  (6) 2010/11/14
Jo HTML5 Mobile Application Framework 초간단 리뷰  (0) 2010/10/08
Posted by iolo
TAG HTML5, iPhone, JavaScript, project template, webapp, Xcode
Trackback 0 Comment 1
hacking/web2010/11/16 12:55

HTML5/CSS/JavaScript로 안드로이드 "앱" 만들기

크리에이티브 커먼즈 라이선스
Creative Commons License
사무실에 앉아서 이짓꺼리(?) 하고 있다.

이런 쓰잘데기 없는 동영상을 굳이 만들어 올리는 이유는 "웹 앱"(WebApp; HTML5App)이 그렇게 거창한 것도 아니고, 어려운 것도 아니고, 멀리 있는 남의 나라 이야기도 아니라는 것을 보여주기 위해서다.
PhoneGap, Titanium, QuickConnect 같은 거창한(?) 제품을 동원하지 않더라도 JQueryMobile, Jo, Wink, Sencha Touch 같은 UI 툴킷과 HTML5 canvas 태그 그리고 HTML5 JS API들(WebStorage, WebSQLDatabase, WebWorker, ...), 그리고 W3C의 DAP(Geolocation, ...)를 사용하면 웬만한 앱은 만들 수 있다.

(저번에 XCode로 했던 짓이랑 비슷해서 이번에는 시간이 많이 안걸렸다능 -.-V)



동영상 간의 의존성을 제거(?!)하기 위해 html과 js를 직접 입력했지만, 저번에 아이폰 앱 만들때 썼던 파일을 그대로 써도 된다. 당연한 얘기~

마찬가지로, 예제 소스는 github에 올려두었다.

담(이건 정말 술 이름인데...)에는 좀 더 그럴싸한 앱을 만들어보자. 뭘 만들까? 흠...

저작자 표시 동일 조건 변경 허락

'hacking > web' 카테고리의 다른 글

터치기반 모바일 웹킷에서 버튼 반응 속도 개선하기  (0) 2011/03/13
HTML5/CSS3/JavaScript로 아이폰 앱 만들기 - XCode 프로젝트 템플릿  (1) 2010/11/18
HTML5/CSS/JavaScript로 안드로이드 "앱" 만들기  (0) 2010/11/16
HTML5/CSS/JavaScript로 아이폰 "앱" 만들기  (6) 2010/11/14
Jo HTML5 Mobile Application Framework 초간단 리뷰  (0) 2010/10/08
JavaScript Common Mistakes(3) - 다른 언어에 익숙한 개발자들이 하기 쉬운 실수  (0) 2009/12/10
Posted by iolo
TAG android, app, HTML5, JavaScript, Mobile, web, webapp, 스크린캐스트, 안드로이드, 자바스크립트
Trackback 0 Comment 0
hacking/web2010/11/14 21:18

HTML5/CSS/JavaScript로 아이폰 "앱" 만들기

크리에이티브 커먼즈 라이선스
Creative Commons License
풍경 1. 아이폰이 국내에 출시된지 1년도 안됐는데... 아... 아이폰 없던 시절이 어땠는지 기억조차 가물가물... 먹고 살려니 아이폰 개발 공부는 해야겠는데, 망할 놈의 옵씨... 옵씨는 그렇다 치고, 코어 파운데이션, 코어 그래픽스, 코어 애니메이션, 뭔 코어가 이렇게 많냐? 핵분열도 아니고... OTL

풍경 2. 없는 살림에 거금 10만원 들여 아이폰 앱 개발자 등록해서 1년 동안 앱 3개 겨우 올렸는데... 안드로이드가 대세? 열라 안드로이드 공부해서 앱 좀 올려 볼려니... 안드로이드 마켓은 뭐고 티스토어는 뭐고 올레마켓은 또 뭐냐? 그까이꺼 대충~ 눈감고 넘어가려니... 블랙베리? 심비안? 팜프리? 윈폰7? 바다? OTL

풍경 3. 아래아한글 새 버전 나온 줄 알았던 넷스케이프와의 첫만남, 문자열과 한판 승부를 벌였던 CGI 시대, ASP, PHP, JSP... OOO 서버 페이지 시대, 유행따라 삼만리 AJAX 시대... 어느새 HTML만으로 어플리케이션을 만드는 시대??? 먹고살려니 안할 순 없고... OTL

풍경 4. 스마트폰(그게 뭔데? 먹는거냐?)용 앱을 만들긴 만들어야 겠는데.. 새로운 언어 배우기도 귀찮고, API는 낯설고, 당장 할 줄 아는 건 웹... 그래서 웹 기술만으로 앱을 만들 수 없을까... phonegap은 또 뭐고 titanium은 또 뭐고, WAC은 또 뭐냐? OTL

그래서 준비했습니다.

(재생 시간은 3분 남짓이지만 제작하는데는 30분 넘게 걸렸다능...ㅠㅠ)



동영상은 helloworld 수준이지만, 요기까지하고 나면 나머지는 하기 나름...
예제 소스는 github에 올려두었다.

조만간(그건 또 어디서 나온 술 이름이냐?) HTML5/CSS/JavaScript로 안드로이드 앱 만들기도....


저작자 표시 동일 조건 변경 허락

'hacking > web' 카테고리의 다른 글

HTML5/CSS3/JavaScript로 아이폰 앱 만들기 - XCode 프로젝트 템플릿  (1) 2010/11/18
HTML5/CSS/JavaScript로 안드로이드 "앱" 만들기  (0) 2010/11/16
HTML5/CSS/JavaScript로 아이폰 "앱" 만들기  (6) 2010/11/14
Jo HTML5 Mobile Application Framework 초간단 리뷰  (0) 2010/10/08
JavaScript Common Mistakes(3) - 다른 언어에 익숙한 개발자들이 하기 쉬운 실수  (0) 2009/12/10
JavaScript Common Mistakes(2) - This "this" is not the "this"  (2) 2009/12/09
Posted by iolo
TAG app, HTML5, iPhone, JavaScript, Mobile, web, webapp, 스크린캐스트, 아이폰
Trackback 0 Comment 6
hacking/web2010/10/08 12:57

Jo HTML5 Mobile Application Framework 초간단 리뷰

크리에이티브 커먼즈 라이선스
Creative Commons License

업무상 필요해서 작성한 글이지만,  혹시 도움이 될까 해서 올려봅니다. 블로깅 안한지 너무 오래되서 ㅎㅎ


홈페이지: http://joapp.com/

개발자: Dave Balmer(Palm WebOS 개발자, 전 야후 개발자)

요약: all-in-one 스타일의 경량 자바스크립트 라이브러리.


특징

  • UI 툴킷
    • CSS 기반 테마/SKIN 지원
  • 오픈소스
    • OpenBSD 라이센스
  • 크로스 플랫폼
    • Palm WebOS, Safari(iOS,Desktop,Dashboard), Chrome(Android,Desktop) 등 webkit 기반 브라우져만 지원.
  • 경량
    • 자바스크립트 41K(최소화된 버전) + UI CSS/리소스(176K)
  • PhoneGap 호환(?)
    • PhoneGap과 호환되지 않는 자바스크립트 라이브러리는 ”없음”.



주요 기능


UI


최근 모바일 단말 UI의 de-facto인 iOS의 UI을 염두에 둔 UI 툴킷.
하나의 화면(joScreen)은 상단의 헤더(joTitle, joToolbar)와 푸터(joFooter, joToolbar)로 구성.
화면과 화면 사이를 앞뒤(위아래)로 이동하는 네비게이션 레이아웃(joStackController, joStack).
기본적인 HTML 폼의 입력 필드에 대응하는 위젯들(joControl, ...), 페이지 내부 팝업(joPopup) 등의 필수적인 위젯 제공.
CSS를 통한 테마/스킨 지원.
캘린더, 챠트 등의 고급 위젯 부족.
  • joContainer
    • joCard
    • joFlexcol
    • joFlexrow
    • joFooter
    • joGroup
    • joPopup
    • joScreen
    • joScroller
    • joStack
    • joStackScroller
    • joTitle
    • joToolbar
  • joControl
    • joButton
    • joCheckBox
    • joExpando
    • joHTML
    • joInput
      • joDateTime
      • joPasswordInput
      • joTextarea
    • joLabel
    • joList
      • joMenu
      • joTabBar
      • joTable
    • joKnob
    • joSlider
  • joDivider
  • joShim

Data


HTML5의 WebSQLDatabase(Webkit 기반 브라우져에는 대부분 제공됨)를 통한 로컬(클라이언트측) 데이터베이스 접근 제공.
추후에 PhoneGap과 연계하여 로컬 파일을 통한 데이터 접근을 제공할 계획으로 보임(joFile, joFileDataSource)
원격(서버측) 데이터 접근 부재.
  • joDatabase
  • joDataSource
    • joFileDataSource (x)
    • joSQLiteDataSource
  • joFile (x)


Utility


기본적인(필수적인) 유틸리티 API 제공.
추후에 PhoneGap과 연계하여 모바일에 특화된 기능을 제공할 계획으로 보임.
  • jo, joCache, joScript
  • joEvent, joSubject, joGesture
  • joChain, joYield, joWait
  • joDOM, joJSON, joLocal, joString, joTime
  • joLog
  • joClipboard, joDevice, joFocus, joPreference, joUser


유사 제품과 비교


Jo Sencha Touch jQuery DojoToolkit
지원브라우져 Webkit All All All
IE ✭ ✭✭✭ ✭✭✭ ✭✭✭
FF ✭ ✭✭✭✭✭ ✭✭✭✭✭ ✭✭✭✭✭
Webkit(Safari,Chrome) ✭✭✭✭✭ ✭✭✭✭✭ ✭✭✭✭✭ ✭✭✭✭✭
모바일 최적화 ✭✭✭✭✭ ✭✭✭ ✭ ✭
데스크탑 지원 ✭ ✭✭✭✭✭ ✭✭✭✭✭ ✭✭✭✭✭
용량 ✭✭✭ ✭ ✭✭✭✭✭ ✭
UI 위젯 툴킷 ✭✭✭ ✭✭✭✭✭
EXT2 		 ✭
jQuery UI 필요. jQueryMobile은 10월 중 알파 릴리즈 예정.		 ✭✭
dojox.mobile은 아직 unstable
UI 위젯 성능 ✭✭✭✭ ✭ ✭✭✭ ✭
i18n/l10n/a11y ✭ ✭ ✭✭✭ ✭✭✭✭✭
OOP ✭ ✭✭ ✭ ✭✭✭
DOM/CSS ✭✭ ✭✭ ✭✭✭✭✭ ✭✭✭
Database ✭✭ ✭✭✭✭ ✭✭✭ ✭✭✭✭✭
유틸리티 ✭ ✭✭✭ ✭✭✭✭✭ ✭✭✭
확장성 ✭ ✭ ✭✭✭✭✭ ✭✭✭
문서/예제 ✭ ✭✭✭ ✭✭✭✭✭ ✭✭✭
개발자 생태계 ✭ ✭✭✭ ✭✭✭✭✭ ✭✭✭



결론


비교적 적은 용량에 (모바일) 웹 앱 개발에 필요한 기본적인(필수적인) 기능을 거의 다 포함한 all-in-one 성격의 UI 라이브러리.

단순한 API 구조 덕분에 학습 / 사용이 용이하지만, 고급 기능들이 거의 없어서 jQuery등의 다른 라이브러리들과 혼용해야 함.

(이름과 달리) HTML5나 모바일에 최적화가 부족하고, 프레임워크가 아닌 단순 UI 툴킷 + 유틸리티 라이브러리.

1명의 개발자가 단독으로 개발했고, 비교적 최근(2010.6)에 시작해서 개정 릴리즈가 많지 않았기 때문에 소스 코드의 품질이 매우 높음.

HP가 Palm을 인수한 이후, WebOS의 Mojo를 개선(혹은 대체)하기 위한 여러가지 시도를 하는 것으로 보임.

직접적인 경쟁 상대인 Sencha가 상용/오픈소스로 모호한 라이센스 정책을 갖는데 반해, Jo는 OpenBSD 라이센스(BSD 라이센스와 어떤 차이가 있는지는 추가적인 확인이 필요)에 따름.

이후,  HP/Palm의 지원과 커뮤니티의 반응에 따라 주요 플레이어로 성장할 가능성은 있으나, 10월 중에 첫 릴리즈가 나올 예정인 jQueryMobile의 완성도에 따라서는 수많은 마이너 플레이어 중의 하나로 전락할 가능성이 더 높음.

저작자 표시 동일 조건 변경 허락

'hacking > web' 카테고리의 다른 글

HTML5/CSS/JavaScript로 안드로이드 "앱" 만들기  (0) 2010/11/16
HTML5/CSS/JavaScript로 아이폰 "앱" 만들기  (6) 2010/11/14
Jo HTML5 Mobile Application Framework 초간단 리뷰  (0) 2010/10/08
JavaScript Common Mistakes(3) - 다른 언어에 익숙한 개발자들이 하기 쉬운 실수  (0) 2009/12/10
JavaScript Common Mistakes(2) - This "this" is not the "this"  (2) 2009/12/09
JavaScript Common Mistakes (1) - Async! Async! Async!  (10) 2009/12/08
Posted by iolo
TAG HTML5, JavaScript, Jo, Mobile, phonegap, webapp
Trackback 0 Comment 0