Sun Developer Network 공식 블로그

jMaki는 CSS, HTML, JavaScript 등과 같은 표준 기반 기술을 이용하여 Web 2.0 애플리케이션을 작성하기 위한 경량 프레임워크로, 주로 다음과 같은 기능을 제공한다.

• 템플릿 CSS 레이아웃
• 위젯(widget) 모델
• 위젯들을 서로 연결시켜주는 클라이언트 서비스(예: publish/subscribe 이벤트)
• JavaScript 액션 핸들러
• 외부 RESTful 웹 서비스와 인터랙트하는 일반(generic) 프록시

jMaki 프레임워크는 위젯을 위한 기본값을 제공함으로써 대부분의 JavaScript와 CSS를 추출한다. 하지만 jMaki는 위젯을 위한 JavaScript와 CSS를 보다 손쉽게 액세스할 수 있도록 함으로써 디자이너나 페이지 개발자가 코드를 수월하게 커스터마이즈할 수 있게 해준다.

jMaki는 클라이언트에 JavaScript를 제공하여 JavaScript가 기술 중립적 방식으로 서버측 기술과 통신할 수 있도록 하는 데에 특히 초점을 맞추고 있다. 서버측 기술에는 PHP, JSP(JavaServer Pages) 기술, JavaServer Faces 기술, Phobos 등이 포함된다.

jMaki라는 용어는 JavaScript wrapper의 개념을 뜻하는데, jMaki의 "j"는 JavaScript의 첫 글자이고 "maki"는 wrapper에 해당하는 일본어이다. 이 프레임워크는 Dojo, Yahoo, Scriptaculous, Google 등과 같은 인기 있는 툴키트의 위젯을 특히 자바 기술, PHP 또는 Phobos 개발자들에게 익숙한 방식으로 이용할 수 있도록 해주며, 이는 툴키트 내의 위젯을 중심으로 wrapper를 작성하는 방식으로 이루어진다.

JSP 기술을 사용하는 데 익숙한 사용자라면 jMaki를 통해 지원 가능한 어떠한 툴키트의 위젯이라도 JSP taglib으로 포함시킬 수 있다. 예를 들어, jMaki를 사용하려면 JSP 페이지 상단에 다음과 같은 태그 선언을 추가한다.

JavaServer Faces 기술을 사용한다면 위젯을 JavaServer Faces 컴포넌트로 포함시킬 수 있다. 다음은 위젯을 JavaServer Faces 컴포넌트로 사용하기 위해 JSP 페이지 상단에 추가하는 태그 선언이다.

PHP 개발자라면 위젯을 PHP 태그로 포함시킬 수도 있다. PHP 선언의 형태는 다음과 같다.

또한 Phobos 개발자라면 위젯을 엔터프라이즈 컴포넌트로 포함시킬 수도 있다.

jMaki는 페이지에 위젯을 렌더링하고 컴포넌트들을 서로 연결하는 데 적합한 JavaScript 코드를 자동으로 생성한다.

본 팁에서는 jMaki 프레임워크의 기본 사항과 jMaki의 사용 실례를 살펴보기로 한다.

jMaki 프레임워크에는 무엇이 들어 있나?

jMaki 프레임워크에는 클라이언트 컴포넌트와 서버 컴포넌트가 포함되어 있다. 우선 이 컴포넌트들을 살펴보기로 하자.

클라이언트 컴포넌트

웹 애플리케이션을 개발하는 데 있어서 가장 유용한 컴포넌트 중 하나가 바로 레이아웃이다. 이는 각자의 애플리케이션을 위한 특정 포맷 스타일을 생성하는 데 사용하는 HTML 및 CSS에 기반을 둔 템플릿으로, jMaki 레이아웃 갤러리는 사용 가능한 jMaki 레이아웃 템플릿을 보여준다. 모든 템플릿은 플레인 CSS이므로 손쉽게 커스터마이즈할 수 있는데, 레이아웃 갤러리 자체도 커스터마이즈된 버전의 템플릿을 이용하여 개발되었다.

또 다른 클라이언트 컴포넌트로, 위젯을 부트스트랩하고 서버 런타임의 인수를 건네주는 일을 담당하는 런타임을 들 수 있다. 클라이언트 런타임 컴포넌트는 태그의 정보를 토대로 페이지 상에 위젯을 렌더링한다. 위젯을 위한 클라이언트 런타임을 호출하려면 페이지에 ajax 커스텀 태그를 추가해야 하는데, 예를 들어 jMaki 위젯 중 하나는 Dojo 툴키트에 제공되는 테이블 위젯을 래핑한다. 아래의 태그를 추가하면 JSP 페이지에 Dojo 테이블 위젯을 포함시킬 수 있다(예제는 이 페이지의 폭에 맞도록 복수의 행으로 표시하였다).

ajax 커스텀 태그의 name 어트리뷰트는 위젯의 이름, dojo.table를 참조하고, value 어트리뷰트는 Dojo 테이블을 위한 데이터를 지정한다. 이는 위젯에 데이터를 제공하는 여러 가지 방법 중 하나일 뿐이다.

PHP를 사용할 경우 아래의 PHP 호출을 추가하면 페이지에 Dojo 테이블을 포함시킬 수 있다(예제는 이 페이지의 폭에 맞도록 복수의 행으로 표시하였다).

더욱 중요한 클라이언트 컴포넌트 중 하나가 jMaki 위젯을 위한 컴포넌트 모델을 제공하는 위젯 모델로, 이 모델은 jMaki 위젯을 구성하는 다음 3개의 파일을 지정한다.

• component.htm이라는 이름의 HTML 템플릿 파일
• component.js라는 이름의 JavaScript 파일
• component.css라는 이름의 CSS 파일

component.js 파일은 위젯의 작동 상태를 지정하고, component.css 파일은 위젯의 디스플레이 스타일을 지정한다. jMaki에 패키지로 포함된 각각의 위젯마다 이 파일들이 제공되며, 이 외에도 위젯을 기술하는 또 하나의 파일인 widget.json이 제공되므로 툴을 이용하여 위젯을 액세스할 수 있다.

jMaki에 포함되지 않은 위젯을 래핑하고자 할 경우에는 위젯을 위한 component.htm, component.js, component.css 파일을 생성해야 한다. 프레임워크는 이 파일들을 인식하고 위젯 레퍼런스가 포함된 페이지가 렌더링될 때 로드한다.

다음은 component.js 파일의 내용이다.

코드 예제는 위젯 코드 앞에 위치하는 foo.bar라는 이름의 위젯 생성자를 보여주고 있다. 모든 jMaki 위젯은 jmaki 네임스페이스 아래에 생성자를 가지고 있는데, 이 jmaki 네임스페이스는 JavaScript 글로벌 네임스페이스의 혼동을 피하기 위해 사용된다. 이 예제의 위젯은 jmaki.foo.bar 네임스페이스 내에 있으며 Widget으로 불린다는 점에 주목할 것. Widget 생성자는 위젯 인수를 건네받는다.

jMaki Glue

jMaki는 클라이언트 상에서 XMLHttpRequest와 publish/subscribe 메커니즘 같은 기타 서비스를 편리하게 수행할 수 있도록 하는 API를 제공하며, 또 이 서비스들은 통신 수단으로서 모든 위젯에 제공된다. publish/subscribe 메커니즘이 위젯으로 하여금 이벤트를 토픽에 publish할 수 있게 해주면 개별 애플리케이션은 해당 토픽에 subscribe할 수 있다. 결국 이 메커니즘은 위젯 상의 이벤트에 대한 애플리케이션 응답을 비교적 손쉽게 지정할 수 있도록 하는 수단을 부여한다. Handling jMaki Widget Events Using the Publish and Subscribe Mechanism에 publish/subscribe 메커니즘의 작동 예가 나와있으니 참고하기 바란다.

jMaki Glue는 publish/subscribe 이벤트 메커니즘을 토대로 구축되는데, 이 glue는 특정 이벤트가 토픽에 publish될 때 JavaScript 액션을 이용하여 위젯을 한데 연결하고 애플리케이션의 행동을 정의할 수 있게 해주는 강력한 기능이다. 한편, 애플리케이션 개발자는 glue 기능에 의해 사용되는 코드를 제공하며, 최신 버전의 jMaki 프레임워크에는 Yahoo Geocoder를 Yahoo나 Google 맵 위젯에 연결시키는 데 필요한 glue 코드가 함께 포함되어 있다.

서버 컴포넌트

jMaki 프레임워크에는 서버 런타임과 XmlHttproxy라는 이름의 프록시, 이렇게 2개의 서버 컴포넌트가 존재한다. 서버 런타임 컴포넌트는 jMaki 클라이언트 런타임을 Java, PHP, Phobos 등과 같은 서버 런타임에 연결시키는 일을 담당하고, 현재 사용중인 라이브러리 유형을 기초로 모든 스크립트와 CSS 레퍼런스를 추적하고 렌더링한다. 따라서 스크립트와 CSS 링크가 중복되는 현상이 발생하지 않게 된다. 서버 런타임은 구성 가능한 키 세트를 기초로 하여, 필요에 따라 Google 및 Yahoo 맵 키와 같은 API 키가 적용되도록 하고, 또한 HTML 템플릿을 렌더링하고 JavaScript의 데이터를 serialize함으로써 각각의 위젯 인스턴스에 해당 데이터가 전달되도록 한다.

XmlHttproxy 컴포넌트는 Ajax 지원 클라이언트가 웹 애플리케이션 도메인 밖의 외부 서비스에 액세스할 수 있게 해주는데, 이 작업은 클라이언트를 대신하여 서비스와 통신함으로써 가능해진다. 이 외에도 프록시는 데이터 변환을 수행하여 제3자 서비스의 데이터 포맷을 제한할 수 있게 해줄 뿐 아니라 클라이언트가 RSS Feeds, Yahoo Geocoding 서비스, Flickr 이미지 검색 등과 같은 RESTful 웹 서비스에 액세스할 수 있게 한다. 끝으로, 프록시는 간편하게 커스터마이즈할 수 있는 XSL-to-JSON 변환 기능을 제공함으로써 위젯이 일정한 방식으로 서비스에 액세스할 수 있게 해준다.

jMaki 예제

jMaki의 컴포넌트들에 관해 알아보았으니, 이제 웹 애플리케이션에서의 jMaki 위젯 사용 예를 몇 가지 살펴보기로 하자.

에디터 위젯 사용하기

첫 번째 예제에서는 jMaki가 제공하는 Dojo 에디터 위젯을 JSP 태그 핸들러로 포함시켜 보도록 하겠다. 이 위젯은 문서를 작성하고 조작하는 데 사용할 수 있는 텍스트 에디터를 제시한다.

jMaki 위젯을 JSP 태그 핸들러로 사용하려면 먼저 JSP 페이지 상단에 적절한 태그 선언을 추가해야 한다는 점을 상기할 것.

그런 다음 페이지에 위젯을 위한 ajax 커스텀 태그를 추가한다.

JSP 페이지에는 또한 사용자의 에디터 입력 내용을 보여주는 JavaScript 코드가 포함되어야 한다.

이 JavaScript 코드는 사용자가 추가한 에디터의 내용이 표시된 창을 띄우는 역할을 한다.

이제 남은 것은 주변의 HTML 코드뿐이다. 다음은 애플리케이션을 위한 전체 코드의 내용이다.

또한 jMaki Widget Gallery에 있는 에디터 위젯의 "Source" 링크를 클릭해도 이 코드를 볼 수 있으며, "See Live" 링크를 클릭하면 애플리케이션을 실행할 수 있다.

다음은 "See Live"를 클릭했을 때 처음 표시되는 내용이다.

에디터 위젯에 텍스트를 입력하고 결과를 살펴본다.

jMaki Glue 사용하기

두 번째 예제에서는 jMaki glue 코드를 이용하여 JSP 페이지 상에서 Yahoo Geocoder와 Google 맵 위젯을 한데 연결해보도록 하겠다.

Geocoder 위젯에서 특정 위치를 입력하면 Google 맵 위젯에 의해 선택되어(picked up) 표시된(plotted) 경도와 위도 값이 리턴된다.

요약

jMaki를 이용하면 기존의 애플리케이션에 Web 2.0 기능을 추가하거나 새로운 애플리케이션을 작성할 수 있으며, 사용자에 따라 필요한 기능을 활용하면 된다. jMaki의 최신 베타 버전은 다운로드가 가능하며, 여기에는 본 팁에서 다룬 모든 기능이 포함되어 있다. 아울러, jMaki 페이지에는 작업 시작에 도움이 되는 문서, 블로그, 스크린샷 등이 함께 게시되어 있다. jMaki에 관한 더 자세한 내용을 보려면 기사 New Technologies for Ajax and Web Application Development: Project jMaki와 블로그 엔트리 Building web 2.0 apps with jMaki를 참조할 것.

글쓴이 소개

Carla Mott는 Project jMaki의 기여자이다. 그녀는 또한 The Aquarium 웹블로그의 편집자이자, java.net의 Java Enterprise Community 리더이자, 오픈 소스 JavaScript 툴키트인 Dojo의 커미터이기도 하다. 이전에는 Project GlssFish의 프로젝트 소유자로서 썬의 애플리케이션 서버의 오픈 소싱과 GlassFish 커뮤니티 구축에 일조한 바 있다.