수라의 티스토리

레이어에 들어있는 링크를 클릭하려고 할때

안드로이드에서는 그 밑에 있는 폼요소/anchor 태그가 클릭이 되는 현상이 발생

->

레이어가 펼쳐진 순간에만
밑에 컨텐츠에다가 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 를 줬군요
터치할때 테두리가 생기지 않도록요...

밑에 링크가 클릭이 되는건줄 알았는데 알고보니 그냥 영역 테두리만 생기는거

===================================================================================

안드로이드 브라우저 버그입니다. 이미 구글 안드로이드 포럼에도 수차례 올라온 이슈입니다.

덧붙이면
레이어안에 아이프레임을 넣어놓으면 active area가 레이어 밑 영역으로 잡히는 문제 뿐만 아니라
아이프레임 안에 있는 링크가 이동하지 않는 이슈도 있습니다.

안드로이드 개발을 하다보면 dip단위를 사용해야 폰의 화면 사이즈에 따른 문제를 극복할수가 있다...
그러나... 레이아웃에서가 아닌 동적으로 View들을 생성해서 사용하다 보면.. 본의아니게(?)ㅋㅋ pixel을 사용해야할 때가 있다..

그럴경우... 320사이즈폰에서.. 10pixel을.. 480에서도 10pixel을 하면.. 이미지가 작아진다... 배치가 안맞춰질것이다..
이미지는 안드로이드가 알아서 확대를 해주는데 그럼 이미지도 짤리는 상황이 연출된다...

그럴경우는 320에서의 10pixel이 480에서는 얼마인지 계산해주면 된다..
제가 개발해보기로는 320에서 1픽셀이.. 1dip였는데....  뭐 계산하면. 1.5픽셀인데..ㅎㅎ
--------------------------------------
public static float getDisplayMetricsDensity(Context context)
{
    return context.getResources().getDisplayMetrics().density;
}
public static int getPixel(Context context, int p)
{
    float den = getDisplayMetricsDensity(context);
    if(den != 1)
    {
        return (int)(p*den+0.5);
    }
 return p;
}
--------------------------------------

위의 메소드를 이용하면 자동으로 계산할수 있다..

모바일 웹사이트제작시 필히 고려해야할 사항들이 몇가지 있습니다. 대표적인예로 화면 사이즈겠지요. 아무튼 제가 제작하면서 겪은 사항들을 여기에 적어봅니다. 다는 아니더라도 몇몇 적습니다.

출처 : http://m.mkexdev.net/34

얼마전 참석했던 세미나에서 뷰포트(Viewport)에 대한 언급이 잠시 있었다

모바일 웹 UI 개발시 Display 영역 조절과 관련된 기술요소인듯 하였고 자세한 설명보다는
뷰포트 메타태그 기술방식 위주의 설명이여서 완전한 개념을 파악하기는 힘들었다

뷰포트에 간략히 조사해 보았다

뷰포트가 사파리 기술?
뷰포트를 조사하다 처음 든 의문은, 이것이 애플의 (모바일) 사파리 기술인가? 하는 것이었다

대부분의 인터넷 블로그에서 뷰포트를 소개하면서 아이폰 기반 모바일 웹을 대상으로 하였고
사파리 브라우저가 인식하는 메타태그로 설명하고 있었다

또 다른 자료에서는 아이폰과 안드로이드 심지어 오페라 모바일 등 다른 브라우저에서 권장하는
뷰포트 태그를 제시하기도 하였다

뭐지.. 이거? 뷰포트 태그가 모바일 사파리가 인식하는 개념처럼 하더니 다른 브라우저에서도
인식되나보네? .. 하면서 살짝 의문이 들기 시작했다

짧은 시간 의문을 품다 문득  떠 오른 생각은 바로 웹킷(WebKit) 이었다
웹킷은 아이폰에 있는 모바일 사파리의 핵심 엔진이며 안드로이드의 브라우저 기반이기도 하다
더불어 웹킷은 다른 모바일 브라우저에서도 사용되고 있는 기술이다
웹킷과 뷰포트의 연결고리가 더 자연스럽다는 생각이 들었다

그렇다. 뷰포트 메타태그는 웹킷 기반의 모바일 브라우저에서 인식 가능한,
표시영역 제어와 관련된 기술요소 였던 것이다


뷰포트(Viewport)란?
뷰포트라는 개념자체는 모바일 웹에 국한된 것은 아니다
DirectX 나 여타 그래픽, 디자인 관련 기술에 개념적으로 사용된 용어인 듯 하다
그러나 처음 나에게는 낯선 용어였다

뷰포트를 대략 정의하자면,
컴퓨터나 휴대 단말기 등 장치에 Display 요소가 표현되는 영역을 말한다
모바일 웹의 경우 아이폰 사파리 브라우저에서 웹 페이지가 표시되는 영역으로 해석할 수 있다

- 데스크탑 브라우저의 뷰포트와 모바일 브라우저의 뷰포트(출처: 사파리 웹컨텐츠 가이드)


왜 모바일 웹에서 뷰포트가 중요한가?
기존의 데스크탑 웹 개발 환경에서 뷰포트에 대한 개념이 이토록 난무(?)한 적이 있었던가?
요즘 모바일 웹 개발 관련 지식 자료에 반드시 등장하는 것 중 하나가 바로 뷰포트 이다
그럼... 왜 모바일 웹에서는 뷰포트가 중요해 졌을까?

해답은 바로 모바일 웹이 웹 페이지를 브라우징 하는 특징에 기인한다
현재 스마트폰 브라우저는 풀브라우징을 지원한다
풀브라우징은 모바일 환경에서도 데스크탑 환경처럼 웹화면 전체를 자연스럽게 브라우징 할 수 있는
환경을 일컫는다

작은 화면의 모바일 단말기에 웹 페이지 모두 표시하려다 보니 전체적인 페이지 배율 조정이 가해지게
된다. 즉 화면에 맞도록 전체적으로 축소되어 화면 모두가 브라우징 되지만 페이지에 있는 컨텐츠들의
가독성은 상당히 떨어지게 되는 것이다

웹킷 기반 브라우저의 뷰포트 기본 가로 너비는 980 픽셀이다
그러나 아이폰 사파리브라우저의 가로 너비는 320 픽셀이다
이 말은 980 크기의 페이지를 320화면에 다 보이도록 전체적인 배율축소가 발생된다는 의미이다

아래 그림은 오페라 미니에서 mkexdev.net 을 브라우징한 모습니다
페이지의 가로 폭 모두가 표현되기는 했지만 배율 축소로 인해 글자및 이미지의 가독성은 많이 떨어진다



뷰포트 메타태그를 이용하면 모바일 브라우저의 뷰포트 크기나 배율등을 조정할 수 있어
모바일 웹에 최적의 상태로 화면이 표시되도록 설정할 수 있게 된다


뷰포트 메타태그
뷰포트의 설정을 변경하기 위해 메타태그 형태로 지원된다

아래의 메타태그는 가장 기본적인 형태로 뷰포트의 가로폭을 기본 값인 980픽셀이 아닌
모바일 단말기 장치의 가로 폭으로 설정하겠다는 의미이다(아이폰의 경우 320픽셀)
<meta name="viewport" content="width=device-width" />

이렇게 설정하면 뷰포트의 가로 너비와 단말기의 가로너비가 동일하기 때문에
페이지의 배율 조정이 일어나지 않고 320 너비 만큼만 브라우저에 표시된다
(물론 좌/우 스크롤 기능으로 모든 컨텐츠를 탐색할 수 는 있다)

아래 화면은 뷰포트를 설정하지 않은 것(왼쪽)과 device-width 로 설정한(오른쪽) 결과 화면이다


물론 현재 대상인 mkexdev.net은 모바일 웹을 전혀 고려되지 않은 사이트라 두 가지 모습
모두 효율적으로 표시되지 않는 모습이다.
다만 뷰포트 메타태그를 이용해 웹 페이지의 화면 표시 배율을 조절할 수 있다는 것을 느끼면 된다

(참고로 뷰포트 메타태그를 지원하지 않는 브라우저에서는 이 설정은 모두 무시된다)

뷰포트 메타태그로 조절할 수 있는 것들
뷰포트 메타태그를 이용하면,
화면의 너비 뿐만 아니라 줌 레벨, 스케일링 가능 여부등이 설정을 조절할 수 있다

아래표는 뷰포트 매타태그의 속성표이다

Property	Description
width	The width of the viewport in pixels. The default is 980. The range is from 200 to 10,000. You can also set this property to the constants described in “number.” Available on iPhone OS 1.0 and later.
height	The height of the viewport in pixels. The default is calculated based on the value of the width property and the aspect ratio of the device. The range is from 223 to 10,000 pixels. You can also set this property to the constants described in “number.” Available on iPhone OS 1.0 and later.
initial-scale	The initial scale of the viewport as a multiplier. The default is calculated to fit the webpage in the visible area. The range is determined by the minimum-scale and maximum-scale properties. You can set only the initial scale of the viewport—the scale of the viewport the first time the webpage is displayed. Thereafter, the user can zoom in and out unless you set user-scalable to no. Zooming by the user is also limited by the minimum-scale and maximum-scale properties. Available on iPhone OS 1.0 and later.
minimum-scale	Specifies the minimum scale value of the viewport. The default is 0.25. The range is from >0 to 10.0. Available on iPhone OS 1.0 and later.
maximum-scale	Specifies the maximum scale value of the viewport. The default is 1.6. The range is from >0 to 10.0. Available on iPhone OS 1.0 and later.
user-scalable	Determines whether or not the user can zoom in and out—whether or not the user can change the scale of the viewport. Set to yes to allow scaling and no to disallow scaling. The default is yes. Setting user-scalable to no also prevents a webpage from scrolling when entering text in an input field. Available on iPhone OS 1.0 and later.

Viewport properties (출처: 애플)

다음 두 애플의 자료에서 뷰포트에 대한 상세한 내용이 제공되고 있다
Configuring the Viewport
Supported Meta Tags 


뷰포트 설정 참고
포털 등 기 개발된 모바일 웹 사이트에서 설정한 뷰포트 태그를 참고해 보자

1) m.naver.com
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" />

2) m.daum.net
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />

3) m.nate.com
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />

4) m.yahoo.com
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

5) m.aladdin.co.kr
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />

어쩜 이렇게 모두 거의 동일할까?
이것이 최적의 구성인가... ㅎㅎ

가로 너비는 장치 너비를 지정하였으며 사용자에 의해 확대/축소가 되지 않도록 설정하고
초기 스케일은 1.0 즉 확대/축소 없는, 본 크기 그대로를 지정하였다

유형1>

유형2>

#page {width:100%;height:100%;background-color:#666;}

@media (max-width:1024px) {
#page {background-color:#fff;}
}
@media (max-width:509px) {
#page {background-color:#ff0;}
}

출처 : http://trend21c.tistory.com/946

1. 해상도를 고려한 레이아웃

모바일 웹사이트 제작은 일반 웹사이트 제작과 있어서 가장 큰 차이점은 해상도 차이에 따른 레이아웃입니다.

모바일 기기가 넷북이나, 노트북, 데스크탑 보다도 디스플레이의 크기가 작기 때문에

이점을 고려한 웹사이트 기획 및 디자인, 퍼블리싱이 필요합니다.

게다가 모바일 기기마다 해상도가 제각각이라는 점도 참 난감한 요소지요.


국내에서 보통 모바일 웹사이트 제작은 전 해상도를 고려하기 보다는

최근 출시된 스마트폰을 기준으로 해서 기획, 개발 및 검수 되는 사례가 많습니다.(아이폰, 갤럭시S)

그래서 요즘에는 이들 스마트폰 환경에 최적화된 모바일 웹사이트가 늘어나고 있습니다.




※ 국내 출시된 주요 모바일 기기 해상도

iPhone	320 * 480
iPhone4	960 * 640
모토로이 해상도	854 * 480
HTC 디자이어(넥서스원)	800 * 480
옵티머스Q	800 * 480
갤럭시A	800 * 480
갤럭시S	800 * 480
시리우스	800 * 480
베가	800 * 480

다음과 네이버의 경우는 width를 가변폭으로 지정해놓아 해상도가 다른 모바일 기기에서 유동적인 대처를 하고 있습니다.





이러한 가로 길이 가변폭의 레이아웃은 기획, 개발, 디자인 모든 영역에서 함께 고려가 되어야 합니다.

기획적인 측면에서도 가로사이즈가 가변이고 사용자마다 조금씩 차이가 있다는 UX를 인지하여야 하고

디자인적으로도 가변폭에 유의하여 요소들을 배치하여야 합니다.

개발에서도 가변적으로 변하게끔 코딩에 잘 신경써줘야겠죠? ^^




2. 사용자를 편하게, 터치 오류를 줄여라


사용자가 터치하는 영역은 44px*44px를 기준으로 하세요.

손가락으로 터치하는 면적이 최소 이정도는 확보되어야 오터치를 줄일수 있습니다.

너무 작은 경우 링크 영역 주변에 다른 링크요소가 없으면 크게 상관이 없을수도 있겠지만

다른 링크요소들과 함께 44*44 이내에 다닥다닥 붙어있다면

원하는 것을 터치하지 못할 확률이 높아집니다.




3. 화면 확대비율 고정


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


이 meta태그는 화면 확대비율을 기기 사이즈 가로에 맞게 조정합니다.

viewport가 가장 잘 적용되는 것은 아이폰이고 기기마다 조금씩 차이가 있습니다.


body {
    -webkit-text-size-adjust: none;
}

그리고 이 css는 webkit 기반의 브라우저에서 텍스트사이즈가 들쑥날쑥 하지 않게 조절합니다.

상황에 맞게 사용하세요.




4. 사이트 아이콘 제공


아이폰3g, 아이폰3gs
<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 163dpi)" href="/iOS-57.png" />

아이패드
<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 132dpi)" href="/iOS-72.png" />

아이폰4
<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 326dpi)" href="/iOS-114.png" />


아이폰에서는 웹사이트 바로가기 아이콘은 홈화면에 넣을 수 있습니다.

이때 홈화면 아이콘으로 저장될 아이콘을 만들어둘 수 있습니다.



5. css3를 활용하여 절감


css3를 잘만 활용하면 그라디언트 효과나, 그림자 효과, 라운드코너 효과를 만들어낼수 있습니다.

이로 인해서 불필요한 이미지를 사용하지 않아도 되어 로딩속도의 절감효과를 볼 수 있습니다.

css3를 잘 활용해보세요.

물론 css3가 미지원되는 모바일기기가 더 많으니 이점도 염두해주세요!



6. javascript는 최소화


모바일 웹으로 얼마나 멋진 사이트를 만들기에 그렇게 많은 자바스크립트 코드가 필요한가요?

여러분들도 잘 알고 있는 훌륭한 자바스크립트 프레임워크인 jquery 역시

모바일기기에서는 부담스러울수도 있습니다.

자바스크립트 프레임워크를 사용하면 물론 생산성 향상에 도움이 되겠지만

사실 모바일 웹페이지는 그렇게 많은 자바스크립트 액션을 필요로 하지 않습니다.

javascript을 사용을 최소로 줄이고 순수한 DOM 조작으로 사이트를 만들어봅시다!



7. over 이벤트는 소용이 없습니다.


터치폰은 마우스커서를 조작하는 것이 아니기 때문에

우리가 흔히 데스크탑을 통해 인터넷을 사용할때 이용가능한

:hover 선택자나

onmouseover와 같은 이벤트를 사용할수 없습니다.

이점 알아두세요.



8. 페이지내에 또 다른 스크롤바는 넣을 수 없어요.


우리는 참 그 작은 공간에 많은 콘텐츠를 꾹꾹 넣고자합니다.

일반 웹 환경에서는 overflow:auto; 또는 overflow:scroll의 값을 사용하여

특정 영역에 많은 콘텐츠를 넣고 스크롤바를 넣을 수 있지만

모바일 웹환경에서는 페이지 내에 또 다른 스크롤바 넣기가 불가능합니다.



전혀 안되는 것은 아닙니다.

모바일네이버의 실시간검색을 살펴보면

자바스크립트로 스크롤바 비스무레한 것이 구현되어 있습니다.



그런데 제 개인적인 소견으로는 사실 모바일 웹페이지 안에 스크롤바를 넣는다는 것이

그닥 좋은 UX라고 생각하지는 않습니다.

스크롤바라는 것이 스크롤이 되는 형태의 UX가 굳어진 것이고

터치폰에서도 화면을 위아래로 쓸어내리거나 올리는 행위로 스크롤을 한다라는 의미가 담겨있는 UX인데

화면에 있는 스크롤바는 터치로 스크롤되는 것도 아니고 단지 위아래 버튼으로

스크롤바를 조절하는 UX입니다.

차라리 그냥 적당 갯수만 보여주거나

새로고침버튼을 넣어서 해당부분만 ajax로 변경을 하는것이 더 낫지 않았나 싶기도 하네요.




9. 일반 웹사이트로 가기에 대한 옵션을 제공하라.


우리는 모바일을 통해서 웹사이트를 이용할때 꼭 모바일용 웹페이지를 이용하고 싶지 않을때도 많습니다.

일반 웹페이지를 사용하는 경우말이죠.

그런데 몇몇 웹사이트는 사용자의 agent를 가져와서

접속한 환경이 모바일기기면 무조건 모바일 페이지로 이동시키기도 하는데

일반 웹사이트를 이용하고자 하는 사용자도 있기 때문에

일반 웹사이트로 가기에 대한 옵션을 제공해주면 좋습니다.



10. 레티나 디스플레이


.myImage {
    height: 40px;
    width: 100px;
    -webkit-background-size: 100px 40px;
    background: url("images/myImage.jpg");
}

@media screen and (-webkit-device-pixel-ratio: 2) {
    .myImage {
        background: url("images/myImage@2x.jpg");
    }
}


고해상도의 아이폰4가 출시하면서 우리는 고해상도의 이미지를 제공하여

iphone4 사용자의 만족도를 극대화할수 있습니다.

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

viewport 를 지정하지 않으면 980px가 된다.

user-scalable=no/yes : 사용자가 확대 축소를 허가 할지 안할지를 정한다. 

 initial-scale=1.0 : 기본 확대 배율이다. 이것을 이용하여 살짝 큰 이미지의 기본확대배율을 0.75정도로 조절하여 사용할수있음

maximum-scale=1.0 최대 확대 배율이다. 얼마까지 배율을 증가시킬수 있을껀지 결정한다.

 

 minimum-scale=1.0 : 최소 확대 배율이다. 얼마까지 와이드? 시킬껀지를 결정한다

모바일 웹앱 개발자가 알면좋은 43가지 UX , UI
http://www.uxbooth.com/blog/essential-controls-for-web-applications/

출처 : http://xguru.net/551

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 을 소개하는 순으로 진행됩니다. 제가 말이 좀 많고 빠른편이라 슬라이드에는 설명은 그리 많지 않습니다. ^^;

아무래도 발표용 자료로 만든것이라 슬라이드만 보고 전체를 이해하시기에는 조금 어려울듯도 한데요. 궁금한 부분 있으시면 저에게 문의 주세요.
앞으로 미진한 부분을 조금씩 보강해 나가겠습니다. 혹시 필요하시다면 이 주제에 대한 세미나 요청은 메일로 보내 주세요

출처 : http://cafe.naver.com/hacosa/18955

* 아이폰 웹 개발를 위한 프레임 워크 몇가지를 소개 할께요.

 

1. iUl

 

프로젝트 페이지 :  http://code.google.com/p/iui/

다운로드 페이지 : http://code.google.com/p/iui/downloads/list

데모 페이지 : http://iui.googlecode.com/svn/tags/REL-current/samples/music.html#_home

라이센스   :  New BSD License 

 

2. iPhone-Universal

 

프로젝트 페이지 :  http://code.google.com/p/iphone-universal/

다운로드 페이지 : http://code.google.com/p/iphone-universal/downloads/list

라이센스   : GNU General Public License v3

 

3. iWebkit

프로젝트 페이지 :  http://iwebkit.net/downloads

다운로드 페이지 : http://demo.iwebkit.net/

데모 페이지 :  http://demo.iwebkit.net/

라이센스   :  GNU General Public License v3

 

4. jqtouch  ( jquery 기반  )

 

프로젝트 페이지 :  http://www.jqtouch.com/

다운로드 페이지 :  http://www.jqtouch.com/

데모 페이지 :  http://jqtouch.com/preview/demos/main/#home

라이센스   :  The MIT License

5. Magic FrameWork

 

프로젝트 페이지 :  http://www.jeffmcfadden.com/projects/Magic%20Framework

다운로드 페이지 :  http://github.com/jeffmcfadden/magicframework/downloads

데모 페이지 :  http://www.jeffmcfadden.com/magicframeworkdemo/

라이센스   : Creative Commons Attribution 3.0 United States License

 

6.  WebApp.net

 

프로젝트 페이지 :   http://webapp-net.com/

다운로드 페이지 : http://webapp-net.com/Download/get.php?d=19

데모 페이지 :   http://demo.webapp-net.com/

라이센스   : New BSD License

 

7.  XUI

 

프로젝트 페이지 :  http://xuijs.com/

다운로드 페이지 : http://code.google.com/p/xui-js/

문서 :  http://xuijs.com/documentation

 

8. sproutcore

 

프로젝트 페이지 :  http://www.sproutcore.com/

다운로드 페이지 : http://wiki.sproutcore.com/Abbot-Setting+Up

데모 페이지 :  http://demo.sproutcore.com/sample_controls/

문서  : http://wiki.sproutcore.com/

 

9. QuickConnect

 

프로젝트 페이지 :   http://quickconnect.sourceforge.net/browser/index.html

다운로드 페이지 :  http://sourceforge.net/projects/quickconnect/

문서 : http://quickconnect.sourceforge.net/docs/html/

 

10. CiUI – CNET iPhone U ( mootools 기반 )

프로젝트 페이지 : http://www.clientcide.com/cnet-js-standards/ciui-cnet-iphone-ui/

다운로드 페이지 : http://www.clientcide.com/js/

문서 : http://www.clientcide.com/docs

 

11. PhoneGap

 

프로젝트 페이지 :  http://www.phonegap.com/

다운로드 페이지 :  http://www.phonegap.com/download

라이센스   :  The MIT License

아이폰 : http://phonegap.pbworks.com/Getting-Started-with-PhoneGap-(iPhone)
안드로이드 : http://phonegap.pbworks.com/Getting-started-with-Android-PhoneGap-in-Eclipse

12. LiquidGear!  ( 플래시 기반 )

 

프로젝트 페이지 : http://www.liquidgear.net/
다운로드 페이지 : http://www.liquidgear.net/?page_id=180
문서 : http://as3.liquidgear.net/

라이센스 :  The MIT License

 

13. Safire  ( 사파리 기반 )

 

프로젝트 페이지 : http://code.rememberthisguy.com/safire/
다운로드 페이지 ; http://code.google.com/p/safire/downloads/list
데모 : http://www.zillow.com/iphone/

 

14. jPint   ( web-based Iphone Dev )

License: Creative Commons Attribution 3.0 United States License
프로젝트 페이지 : http://www.journyx.com/jpint/