HOME › 슬라이드쇼 ›

초콜렛칩-UI(ChocolateChip-UI)
모바일 기기에서는 효과적인 UI 디자인이 무엇보다 중요하다 로버트 빅스는 HTML로 유용한 모바일 인터페이스를 구성하기 위한 프레임워크인 초콜렛칩-UI의 개발자다. 이 도구의 바탕 코드는 HTML5를 기반으로 하는 마크업 언어인 WAML이다. 대부분의 작업은 또는 과 같은 WAML 태그로 수행된다. 이 프레임워크의 자바스크립트는 WAML을 통해 작동하면서 이를 순수 HTML5로 바꿔준다. 직접 작성한 HTML, CSS 및 자바스크립트를 WAML에 혼합하면 초콜렛칩-UI의 변환 프로세스를 거치게 된다. 초콜렛칩-UI의 WAML 위젯 모음은 상당히 포괄적이며, 모두 표준 아이폰 UI처럼 보인다.

모블(Mobl)
자바스크립트에는 웹 개발자를 골치 아프게 하는 다듬어지지 않은 부분이 많다. 모블은 이 부분에서 도움을 주고자 웹킷 기반 모바일 앱을 만들기 위한 프레임워크를 만들었다. HTML, 자바스크립트, CSS를 작성하는 대신 모블로 명령어를 작성하면 모블 컴파일러가 이를 브라우저용 HTML, 자바스크립트, CSS로 바꿔준다. 이 방법을 통해 예를 들어 지연 실행을 위해 함수를 다른 함수로 전달하는 것과 같은 자바스크립트의 여러 가지 까다로운 문제가 해결된다. 최종 결과는 모바일 앱의 표준적인 언어 표현 모음이다. 스크롤되는 목록이 필요한가? 항목 목록을 group 키워드로 감싸기만 하면 된다.

j쿼리 모바일(jQuery Mobile)
j쿼리 모바일에서 가장 단순한 부분은 HTML 중심의 레이아웃이다. 페이지는 DIV를 비롯해 LI 태그와 같은 표준 HTML 구성 요소를 사용해 제작된다. 따라서 j쿼리 모바일은 동적 웹 사이트와 CMS에 통합하기 쉽다. 대부분의 용도가 단순히 새 테마나 스킨을 추가하는 것이기 때문이다. j쿼리와의 긴밀한 통합은 데스크톱용 플러그인의 상당수가(전부는 아니더라도) 모바일 웹 사이트에서도 작동한다는 것을 의미한다. 이 모바일 프레임워크를 확장하기 위한 모바일 플러그인도 몇 가지 있다. 프레임워크의 다양한 기능과 j쿼리 모바일을 중심으로 구축된 풍부한 생태계를 갖춘 j쿼리 모바일은 앞으로 영향력을 계속 확대해 나갈 것으로 보인다.

M-프로젝트(The-M-Project)
M-프로젝트는 j쿼리 모바일 객체로 컴파일되는 위젯 모음을 제공한다. 코드는 MVC 패턴으로 구축된다. 작업의 대부분은 페이지 내에 위치하는 위젯을 정의하는 큰 JSON 구조체를 작성하는 것이다. 레이아웃은 M-프로젝트에서 처리하며 앱 동작은 이벤트 후크에 연결되는 함수를 만들어서 정의한다. M-프로젝트는 이벤트가 해당 위치에 도달하도록 한다. 빌드와 배포 프로세스는 Node.js와 통합된다. 코드와 라이브러리를 아무 웹 서버에나 가져갈 수 있고, Node.js와 추가로 통합할 수도 있다.

터치코드(Touchqode)
파리의 한 카페에 앉아 있는데 갑자기 아이디어가 떠오른다. 냅킨에 적어두고 나중에 다시 펼쳐볼 것인가? 안드로이드 폰에 터치코드가 있다면 그럴 필요가 없다. 이 작은 개발 환경은 좁은 화면을 통해 상당히 많은 기능을 제공한다. 코드는 강조 표시되며 스크립트는 로컬로 실행이 가능하다. 또한 FTP를 통해 새 코드를 동기화할 수 있다. 따라서 밖에 있을 때 상사가 전화를 걸어 뭔가를 요청해도 간단히 대처할 수 있다.

라임JS(LimeJS)
디지털프룻(DigitalFruit)은 개발자들이 HTML5의 일부인 웹GL(WebGL) 객체를 사용하는 데 도움을 제공하기 위해 라임JS를 만들었다. 코드는 기술적으로 자바스크립트지만 구조는 C와 비슷하며 오픈GL(OpenGL) 라이브러리 호출이 있다. 개발 환경에는 여러 최신 기능이 포함되어 있다. 기본적인 빌드는 파이썬으로 처리되며 최종 패키지는 구글의 클로저 컴파일러와 함께 묶어 다운로드에 걸리는 시간을 줄일 수 있다. 라임JS는 다른 환경에서 오픈GL 프레임워크를 위한 게임을 개발하는 누구에게나 매력적이다.

젭토(Zepto)
젭토 라이브러리는 위젯을 배치하거나 만들지 않는다. 단지 요소를 찾고, 클래스를 연결하고, 이벤트를 조작하는 등의 기능을 제공하여 DOM을 다루는 데 도움을 준다. 그에 따른 장점은 크기다. 현재 젭토 버전의 크기는 약 2.3KB로, j쿼리의 1/10에 불과하다. 젭토 역시 정교하고 무거운 코드를 요구하는 기능을 제공하지 않고 대부분의 구문을 차용하므로 비교 대상으로 j쿼리가 적합하다. 무거운 기능들이 필요하다면 더 무거운 라이브러리를 찾으면 된다.

조(Jo)
조는 자바스크립트로 카드 중심의 모바일 앱을 만드는 위젯 모음이다. 구조는 일련의 자바스크립트 함수로 정의된다. 함수가 위젯을 만들면 조는 이 위젯을 화면에 보기 좋게 배치한다. 이러한 코드에는 거추장스러운 중첩 함수 호출이 포함되는 경우가 많다. 일부분을 구성한 다음 이를 다시 더 큰 부분으로 구성하는 다른 함수를 호출하는 식이다. 조는 오픈BSD 라이센스로 제공되는 오픈 소스 프로젝트다. 무료로 사용할 수 있으며 조의 개발자인 데이브 발머는 도움이 필요한 사람들을 지원하기도 한다.

센차 터치(Sencha Touch)
조와 마찬가지로 센차 터치는 자바스크립트로 된 카드 중심 모바일 앱을 만드는 데 사용된다. 이 라이브러리를 제작한 센차는 데스크톱 웹 페이지를 위한 프레임워크도 제공하며, 센차 터치를 사용하기 위한 라이선스 비용은 받지 않고 지원 서비스를 판매한다. 이 회사의 개발 팀은 사용자 질문에 답하고 오픈 소스 포럼을 유지 관리한다. 센차 터치를 사용한 앱 구축은 비교적 쉽다. 센차 터치가 레이아웃의 상당 부분을 알아서 결정해 처리하기 때문이다. 조와 센차 터치 모두 코드에 비해 참조 문서가 부족하다. 조만간 이 격차도 해소되겠지만 현재로서는 센차의 유료 지원 서비스가 더 심층적인 참조 문서를 제공한다.

J드롭(Jdrop)
J드롭은 모바일 개발자가 모바일 기기와 데스크톱(분석 작업을 하기가 더 용이함) 사이에서 성능 데이터를 정리하는 데 도움이 되는 웹 리소스다. 모바일 기기에서 성능 피드백을 추출하는 어려움을 덜어 주는 J드롭은 파이어버그 라이트(Firebug Lite), 페이지 리소스(Page Resources), DOM 몬스터(DOM Monster), 스프라이트미(SpriteMe), CSSess, Zoompf를 포함한 일단의 성능 북마크릿 집합을 집계하는 북마크릿인 모바일 퍼프(Mobile Perf)를 제공한다. 모바일 퍼프를 통해 폰에서 앱을 디버깅하고 결과 데이터를 J드롭 클라우드에 자동으로 저장해 나중에 데스크톱에서 분석할 수 있다. 정확한 모바일 성능을 디버깅하고 자주 찾는 모바일 사이트의 HTML 소스를 검사할 수 있는 방편을 제공한다.

jQ터치(jQTouch)
jQ터치는 모바일 웹 앱을 위한 최초의 유용한 프레임워크 중 하나였다. jQ터치로 된 애플리케이션은 DIV에 HTML을 삽입하는 방법으로 구축된다. jQ터치는 이러한 DIV의 구문을 분석해 적절한 클래스를 찾은 다음 자체 코드를 삽입해 이벤트를 처리한다. jQ터치를 기반으로 웹 애플리케이션을 구축하는 작업은 웹 페이지를 만드는 것만큼 쉽다. 또한 JSP, PHP 및 기타 서버 기반 프레임워크와 같은 동적 웹 도구와 통합하기도 비교적 쉽다. 별 문제가 없으면 코드는 네이티브 앱과 똑같이 보인다. 그러나 가끔은 결함과 비정상적인 변환이 발생하기도 한다. 터치 이벤트 중 몇몇은 특정 플랫폼에서 속도가 느리다.

폰갭(PhoneGap)
폰갭은 HTML, 자바스크립트, CSS를 사용해서 네이티브 앱을 구축할 수 있도록 하는 루틴 모음이다. 개념은 단순하다. HTML 구문을 분석하는 뷰를 여는 것이다. 목적은 모든 주요 스마트폰 플랫폼에서 동일한 코드가 실행되도록 하는 것이다. 폰갭을 사용하면 웹 앱을 아이폰과 안드로이드 네이티브 앱으로 신속하게 변환할 수 있다. 웹 브라우저와 같이 작동하는 창을 띄우는 작업은 모두 폰갭이 처리해주기 때문이다. 대부분의 플랫폼이 동일한 웹킷 코어를 사용함에도 불구하고 각 플랫폼에서 폰갭을 사용한 코드가 약간씩 다르게 표시될 수는 있다. 어쨌든 폰갭은 비교적 단순한 웹 앱을 비교적 범용적으로, 빠르게 만들어 준다.