IT 기술 따라잡기

MODO Labs 의 Kurogo 시스템을 사용하게 됐습니다.

이전에는 몰랐던 새로운 기술을 배워야 되서 아주 신나네요.

제 스타일대로 Kurogo 웹사이트의 튜토리얼을 한번 쭉 정리해야겠습니다.

Kurogo Documentation

Kurogo Developer’s Guide¶

Kurogo 프레임워크는 PHP base 웹 어플리케이션 입니다. 광범위한 모바일 디바이스에 대한 서비스와 정보를 효율적으로 전달하는 것을 체계적으로 도와주는 툴입니다. MIT 프레임워크를 기반으로 했고 오픈 소스 프로젝트 입니다. 이 프로젝트는 확장성 있고 customizable 한 다양한 데이터 소스의 현재의 모바일 버전에 modular way 로 기능을 제공합니다.

Kurogo Framework에는 아래와 같은 것들이 포함 돼 있습니다.

• 디바이스의 특장을 감지하고 해당 디바이스에 알맞게 콘텐트를 display 하는 매커니즘
• 다양한 외부 소스로부터 데이터를 검색하고 parsing하고 display 하는것을 객체 지향적으로 처리함
• consistent한 유저 인터페이스를 손쉽게 개발할 수 있도록 테마별로 정리하고 재사용할 수 있도록 utilize해 효과적으로 탬플릿화 할 수 있도록 도와 줌
• 디렉토리와 뉴스 그리고 이벤트 정보들을 모으기 위해 prebuilt 와 customizable 모듈을 같이 사용할 수 있도록 지원
• 컨텐트와 관리자모드로의 접근시 이를 인증하고 검증하는 시스템

아래 내용들은 프로젝트 소스코드와 그 기능들에 대해 알 수 있는 가이드 입니다.

Overview

Kurogo는 다양한 종류의 모바일 기기에 delivering high quality와 data driven customizable content를 지원하기 위해 만들어진 PHP 프레임워크입니다. Kurogo는 다양한 source로부터 content를 받도록 해 주고 이를 피쳐폰이나 초기 스마트폰에서부터 최신 디바이스와 태블릿같은 광범위한 모바일 기기에 이를 표현할 수 있도록 해 줍니다. 모바일 웹 컴포넌트는 PHP를 사용한 웹 베이스의 어플리케이션 처럼 있습니다. 이 어플리케이션은 웹 서버에 호스트 되고 유저는 모바일 기기에 있는 웹 브라우저를 통해 이곳에 접근합니다.

이것은 liberal 오픈소스 MIT 라이센스를 사용해서 만들어 졌습니다. 이 의미는 여러분은 공짜로 이 제품을 다운로드 받아 설치하고 카피하고 수정하고 등등 여러분의 입맛에 맞게 고쳐서 사용할 수 있다는 겁니다.

Modules¶

Kurogo를 구성하는 부분 부분들은 Module입니다. 각각의 페이지 request는 url을 parse 하는 모듈에 의해서 처리됩니다. 그리고 나서 그 페이지를 표시합니다. 모듈은 코드의 조각들로 구성돼 있습니다. 그것들은 데이터를 처리하는 외부의 서비스들과 연결돼 있죠. 그리고 그 결과를 HTML과 CSS 표준을 사용해서 디바이스에 display 합니다. Kurogo는 여러 다양한 외부의 source들로부터 데이터를 받을 수 있도록 디자인 돼 있습니다. 그리고 그 데이터를 parse 하고 처리하고 화면에 출력하기 알맞는 포맷으로 준비합니다.

일반적인 유저 request는 데이터 소스를 query 하는 것을 포함하고 있습니다. 그리고 Data Parser를 사용해서 그 결과 data를 parsing 합니다. 그리고나서 그 모듈은 그 데이터를 template 엔진으로 pass 합니다. 이 탬플릿 엔진은 HTML,CSS, javascript 등을 사용해서 device에 결과를 출력하게 되는 것이죠.

Device Detection¶

 Kurogo의 중요한 기능중 하나는 현재 사용하고 있는 기기가 어떤 것인지 감지하는 것 입니다. 요즘의 모바일 기기들은 각각 다른 capability를 가지고 있고 그 성능도 각기 다릅니다. 그래서 현재 사용하는 디바이스를 구분해 내는 것은 유저에게 결과물을 보기 좋게 해당 디바이스로 제공하기 위해 아주 중요한 기능입니다.

Kurogo 는 pagetype과 platform에 따라 디바이스를 분류합니다. pagetype은 디바이스의 기본 capability를 기반으로해서 분류하는 겁니다. 이것은 CSS 지원이나 javascript, 이미지 처리 등의 기능에 따라 단계별로 구분 됩니다. platform은 그 디바이스가 사용하는 시스템이나 브라우저를 기반으로 분류하는 겁니다. 이러한 분류들은 해당 디바이스에 최선의 퍼포먼스를 보여주기 위해 여러 방법으로 사용됩니다. Kurogo는 이 각각의 기기별로 일반적인 유저 인터페이스 element들과 모듈들을 포함해 최선의 결과를 보여주기 위한 template과 CSS 파일의 시리즈들이 있습니다.

Customization¶

초기에 Kurogo는 customize 되기 위해 built 됐습니다. 여러분은 모듈로 어떻게 데이터를 get 하는지, 어떻게 이것을 parse 하는지 그리고 유저에게 이것이 어떻게 보여지는지에 대해 완벽하게 콘트롤 할 수 있습니다. 소프트웨어의 modular 세계는 여러분에게 어떤 단계에서든지 그 소스를 customize 할 수 있도록 개방하고 있습니다.

Data Customization¶

각각의 모듈은 여러분에게 여러분의 어플리케이션으로 data를 가져오기 위한 데이터 소스와 프로세스 방법을 선택할 수 있는 기회를 드립니다. 데이터를 retrieve하고 parsing하는 구체적인 방법을 추상화 했기 때문에 여러분의 어플리케이션은 아주 다양한 데이터 소스로 respond 할 수 있습니다. 대부분의 모듈들은 DataModel의 subclass를 사용하게 됩니다. 각 모듈은 Data Retriever라는 객체를 사용합니다. 이것은 data를 retrieve하고 Dataparser 객체를 사용해서 그 데이터를 parsing 하게 됩니다. DataParser 객체는 결과 data를 받고 그 데이터에 맞는 PHP structure를 생성합니다. configuration을 이용해서 여러분은 DataRetriever와 DataParser를 customize 할 수 있습니다. 또한 여러분 site의 데이터를 여러분만의 방식으로 다루기 위해 여러분만의 Data Retriever와 Data Parser도 만들 수있습니다.

Code Customization¶

각각의 모듈은 PHP 객체입니다. 이것은 WebModule 클래스로부터 상속됩니다. 개발자들은 직접 모듈을 생성해서 사용할 수도 있고 기존에 존재하는 것을 subclass 해서 사용할 수 있습니다. extending 할 때 여러분은 단지 특정 메소드를 override 하기만 하면 됩니다. 이렇게 함으로서 여러분은 로직이나 코딩보다도 기능이나 begavior에 집중할 수 있어서 여러분의 모듈을 독창적으로 만들 수 있도록 도와줍니다.

Output Customization¶

그 데이터가 출력되도록 준비가 됐으면 여러분은 그것을 여러분이 원하는대로 표시할 수 있는 몇가지 방법이 있습니다. 각각의 페이지는 HTML 문서로 구성돼 있습니다. 이러한 탬플릿들은 customize 될 수 있고 필요한대로 override 할 수 있습니다. 그리고 common user interface element와 각 디바이스별로 알맞게 customize 된 pieces 을 포함한 fragments들에 대한 라이브러리도 있습니다. HTML과 함께 여러분은 스타일 쉬트도 customize 하실 수 있습니다.

*** Dialogs

Creating dialogs

page anchor link 에 data-rel="dialog" 속성을 추가하면 어느 페이지에서든지 dialog 화면을 display 할 수 있습니다. 이 dialog 속성이 적용되면 프레임워크는 rounded corner 로 표시하도록 style을 추가하고 페이지 둘레에 margin을 넣고 dialog 만 선명하게 보이도록 그 이외의 부분은 어두운 background로 처리합니다.

<a href="foo.html" data-rel="dialog">Open dialog</a>

jQuery Mobile DOC 에 있는 버튼 링크는 아래 소스만 올립니다.

<a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Open dialog</a>

직접 보시려면 모바일에서 여기로 접속해서 보세요.

Transitions

디폴트로 dialog 는 pop transition으로 열릴겁니다. 다른 페이지들 처럼 이 dialog에도 다른 화면전환 효과를 적용할 수 있습니다. data-transition 속성을사용하세요. 그런데 이게 좀 더 dialog 화면처럼 보이도록 하려면 pop이나 slideup, flip 화면전환 효과를 사용하실 것을 권합니다.

<a href="foo.html" data-rel="dialog" data-transition="pop">Open dialog</a>

jQuery Mobile DOC 에 있는 버튼 링크는 아래 소스만 올립니다.

<div>
    <a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">data-transition="pop"</a>
    <a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="slidedown">data-transition="slidedown"</a>
    <a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="flip">data-transition="flip"</a>
</div>

직접 보시려면 모바일에서 여기로 접속해서 보세요.

Closing dialogs

dialog안에 있는 아무 링크라도 click 되면은 프레임워크는 자동적으로 그 dialog를 닫고 해당 페이지로 화면을 전환합니다. cancel 버튼을 dialog 안에 넣고 싶은 경우 버튼을 만들고 링크에 data-rel="back"이라는 속성을 넣어 주면 됩니다. 이 기능은 dialog 뿐만이 아니라 다른 페이지에서도 유용하게 사용될 수 있으며 non-JS 디바이스에서도 사용하실 수 있습니다.

자바스크립트가 생성한 링크에 대해서는 그냥 href attribute를 #로 세팅하고 data-rel="back" 속성을 사용하세요. 그리고 프로그래밍으로 dialog의 close()메소드를 call 하셔도 됩니다.

예) $('.ui-dialog').dialog('close').

Setting the close button text

페이지 플러그 인 처럼 dialog의 close 버튼 text를 option이나 data 속성을 통해서 세팅할 수도 있습니다. option은 mobileinit 이벤트와 $.mobile.dialog.prototype.options.closeBtnText 프로퍼티를 사용해서 모든 dialog에 적용되도록 세팅할 수 있습니다. 그러면 여러분이 원하는 텍스트에 이 기능을 적용할 수 있습니다. 또는 data-close-btn-text 속성을 여러분의 markup에서 text 에 지정해 줄 수 있습니다.

History & Back button behavior

Dialog는 한 페이지 내에서 표시되고 없어지는 것이기 때문에 프레임워크는 이 dialog를 hash state history tracking에 포함시키지 않습니다. 즉 dialog 화면은 back 버튼을 눌렀을 때 뜨지 않을 거라는 거죠. 예를 달어 여러분이 한 페이지를 보고 있고 그 페이지에서 dialog를 열고 또 닫았다고 합시다. 그리고 나서 다른 페이지로 갔을 때 여기서 브라우저의 back 버튼을 누르면 원래의 페이지로 돌아가고 dialog 화면으로는 가지 않을 겁니다.

Styling & theming

Dialog는 다른 theme swatch들로 style 될 수 있습니다. 다른 일반적인 페이지들과 마찬가지로 data-theme 속성을 header,content,footer container들에 추가하시면 됩니다. 아래에 예제가 있습니다.

jQuery Mobile DOC 에 있는 버튼 링크는 아래 소스만 올립니다.

<a href="dialog-alt.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">An alternate color scheme</a>

직접 보시려면 모바일에서 여기로 접속해서 보세요.

Dialog는 overlay layer 위에 표시됩니다. 이 overlay는 디폴트로 swatch A content color를 적용받게 됩니다. 이것을 바꾸고 싶으면 data-overlay-them 속성을 page wrapper에 넣으시면 됩니다. 아래 swatch e 로 세팅한 예제가 있습니다.

jQuery Mobile DOC 에 있는 버튼 링크는 아래 소스만 올립니다.

<a href="dialog-overlay.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Custom overlay swatch</a>

직접 보시려면 모바일에서 여기로 접속해서 보세요.

Dialog는 여러개의 버튼이 있는 control sheet 처럼 사용될 수도 있습니다. dialog의 inner container element에서 top margin을 없애면 됩니다. 예를 들어 dialog 페이지가 my-dialog라는 클래스를 가지고 있다고 한다면 여러분은 이 dialog를 top에 고정시키기 위해 CSS를 사용해야 합니다.: .ui-dialog.my-dialog .ui-dialog-contain { margin-top: 0 } 혹은 모든 dialog에 이런 스타일을 적용하셔야 합니다. .ui-dialog .ui-dialog-contain { margin-top: 0 } 사용 예제는 아래에 있습니다.

jQuery Mobile DOC 에 있는 버튼 링크는 아래 소스만 올립니다.

<a href="dialog-buttons.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="slidedown">Share photos...</a>

직접 보시려면 모바일에서 여기로 접속해서 보세요.

Dialog width and margins

가독성이 있도록 하기 위해  dialog는 디폴트 max-width를 500픽셀로 가지고 있습니다. (여기에 15픽셀의 padding이 사방에 있습니다.) 그리고 더 큰 스크린에서는 10%의 top margin이 주어집니다. 그런데 더작은 스마트폰 화면 같은데서는 이것이 깨지기도 합니다. 이 스타일을 오버라이드 하려면 아래 CSS를 고쳐서 사용하세요.

.ui-dialog .ui-header,
.ui-dialog .ui-content,
.ui-dialog .ui-footer {
 max-width: 500px;
 margin: 10% auto 15px auto;
}

*** Page transitions

CSS 기반의 화면전환을 포함한 jQuery Mobile 프레임워크의 화면 전환 효과는 Ajax navigatin 과 함께 어느 link나 form submission에도 적용될 수가 있습니다.

아래는 jQuery Tutorial DOC 에서 제공하는 Sampler 의 이미지와 소스코드 입니다.

모바일에서 여기로 접속하셔서 직접 화면 전환 효과를 체험해 보세요.

<table margin="0">
    <tr>
        <th><h3>fade</h3></th>
        <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="fade" data-inline="true">dialog</a></td>
        <td><a href="page-transitions-page.html" data-role="button" data-transition="fade" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>pop</h3></th>
        <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="pop" data-inline="true">dialog</a></td>
        <td><a href="page-transitions-page.html" data-role="button" data-transition="pop" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>flip</h3></th>
        <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="flip" data-inline="true">dialog</a></td>
        <td><a href="page-transitions-page.html" data-role="button" data-transition="flip" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>turn</h3></th>
        <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="turn" data-inline="true">dialog</a></td>
        <td><a href="page-transitions-page.html" data-role="button" data-transition="turn" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>flow</h3></th>
        <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="flow" data-inline="true">dialog</a></td>
        <td><a href="page-transitions-page.html" data-role="button" data-transition="flow" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>slidefade</h3></th>
        <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slidefade" data-inline="true">dialog</a></td>
        <td><a href="page-transitions-page.html" data-role="button" data-transition="slidefade" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>slide</h3></th>
        <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slide" data-inline="true">dialog</a></td>
        <td><a href="page-transitions-page.html" data-role="button" data-transition="slide" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>slideup</h3></th>
        <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slideup" data-inline="true">dialog</a></td>
        <td><a href="page-transitions-page.html" data-role="button" data-transition="slideup" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>slidedown</h3></th>
        <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slidedown" data-inline="true">dialog</a></td>
        <td><a href="page-transitions-page.html" data-role="button" data-transition="slidedown" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>none</h3></th>
        <td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="none" data-inline="true">dialog</a></td>
        <td><a href="page-transitions-page.html" data-role="button" data-rel="dialog" data-transition="none" data-inline="true">page</a></td>
    </tr>
</table>

fade transition 만 볼 수 있으신가요? 모든 화면전환 효과를 보시려면 3D transform이 지원되는 브라우저라야 합니다. 3D 를 제대로 지원하지 않는 (Android 2.x 같은) 곳이서는 디폴트인 fade 효과가 보이게 될 겁니다.

Setting a transition on a link or form submit

디폴트로 프레임워크는 fade 화면전환을 지원합니다. 다른 화면전환효과를 원하시면 data-transition 속성을 링크에 추가하세요.

<a href="index.html" data-transition="pop">I'll pop</a>

Back 버튼이 눌려지면 이 프레임워크는 이 페이지를 보이도록 했던 페이지로 돌아갈 때 reverse version을 자동적으로 사용합니다. 이 기능을 명시하려면 data-direction="reverse" 속성을 링크에 넣어 주시면 됩니다.

Global configuration of transitions

만약 디폴트 화면전환을 다른것으로 하고 싶으면 defaultPageTransition 글로벌 옵션을 세팅하면 됩니다. Dialog는 defaultDialogTransition을 세팅하면 됩니다.

Browser support and performance

모든 화면전환은 CSS keyframe animation과 -webkit vendor prefixed rule 과 -moz rule을 사용해 만들어 졌습니다. -webkit 은 iOS,Blackberry, Android, Safari, Chrome browsers 에 적용되고 -moz 는 Firefox 브라우저에 적용 됩니다. keyframe animation과 부드러운 화면전환을 지원하는 것은 브라우저 버전이나 하드웨어에 따라 약간씩 다르게 나타날 수가 있습니다. 만약 animatin이 지원되지 않는 환경이라면 그냥 화면 전환 효과 없이 페이지 이동이 될 겁니다.

Defining fallback transitions for non-3D support

fade를 제외한 모든 화면전환 효과는 기본적으로 3D transform 이 지원 되어야 합니다. 이 기능이 지원되지 않는 디바이스들에서는 모든 화면전환 효과가 fade 화면전환으로 바뀌어서 display 될 겁니다. 이 경우에도 부드럽게 화면이 움직이는 효과는 지원이 됩니다. 안드로이드 3.0 같은 경우도 기술적으로는 3D transform 이 지원되지만 애니메이션 퍼포먼스가 별로인 경우도 있습니다. 그렇기 때문에 이 기능이 모든 디바이스에서 제대로 동작한다고 말할 수는 없지만 최대한 효과적으로 동작하도록 작업을 하고 있습니다.

3D transform이 적용되지 않는 경우 그에 대한 대비책으로 사용될 수 있는 화면 전환 효과를 설정할 수도 있습니다. 우리는 이것을 fade로 설정해 놓고 있습니다. 만약 아래처럼 세팅을 해 놓으면 화면전환효과가 특별히 없이 페이지 이동이 일어날 겁니다.

$.mobile.transitionFallbacks.slideout = "none"


Setting a max width for transitions

창의 width 가 특정 pixel width 보다 클 경우 transition을 none으로 세팅해서 디폴트로 화면전환 효과를 사용하지 않도록 할 수 있습니다. 이 기능은 큰 스크린의 경우 화면 전환 효과가 별로일 수 있을 때 유용하게 사용할 수 있습니다. 이 기능은 $.mobile.maxTransitionWidth 글로벌 옵션을 사용해서 세팅할 수 있습니다.

이 글로벌 옵션의 디폴트는 false로 돼 있습니다. 이 옵션의 value로는 아무 숫자나 false value 가 올 수 있습니다. 만약 이 value 가 false가 아니면 핸들러는 윈도우의 크기가 특정한 value 보다 클 경우 transition을 none 으로 취급합니다.

Creating custom transitions

jQuery Mobile은 custom transition도 추가할 수 있도록 지원합니다. 이 기능은 $.mobile.transitionHandlers dictionary 에 넣으시면 되는데요.

이걸 이용하면 여러분 앱에 여러분이 원하는 아주 다양한 화면전환 효과를 사용할 수가 있습니다.