2013
임베디드월드

글: 김현중, 강석현, 서주영 / 2013-10-04





지난 호에서는 타이젠 웹 애플리케이션의 정의 및 특징, 타이젠에서 웹 애플리케이션이 가지는 중요성에 대해 알아보고, 웹 애플리케이션 템플릿을 이용하여 간단한 실습을 했다.
이번 호에서는 타이젠 웹 UI 프레임워크 및 디바이스 API를 살펴보고 이를 활용한 샘플 애플리케이션을 제작해본다.


[연재 차례]

1. 타이젠, 리눅스 기반 오픈소스 플랫폼
2. 타이젠 SDK(1)
3. 타이젠 SDK(2)
4. 타이젠 플랫폼의 이해
5. 타이젠 웹 애플리케이션 개발(1)
6. 타이젠 웹 애플리케이션 개발(2)
7. 타이젠 네이티브 애플리케이션 개발(1)
8. 타이젠 네이티브 애플리케이션 개발(2)
9. 타이젠 개발자 서밋 코리아 2013
10. 타이젠 플랫폼 개발



타이젠 시리즈 (6)

타이젠 웹 애플리케이션 개발 ②



타이젠 웹 UI 프레임워크

타이젠은 일관성 있는 웹 애플리케이션 UI 개발을 위해 제이쿼리 모바일(jQuery Mobile) 기반의 웹 UI 프레임워크를 제공하고 있다. 해당 UI 프레임워크를 사용할 경우 웹 애플리케이션 개발자들은 큰 어려움 없이 타이젠 뷰에 최적화된 UI를 구성할 수 있다.
타이젠 웹 UI 프레임워크를 사용하기 위해선 표 1에 기술된 3개 파일이 해당 HTML 파일 header에 포함되어 있어야 한다.

jquery.js ( version 1.8.2 이상 )
tizen-web-ui-fw-libs.js
tizen-web-ui-fw.js

[표 1] 타이젠 웹 UI 프레임워크를 사용하기 위한 파일


타이젠 IDE의 타이젠 웹 UI 프레임워크 템플릿을 사용한다면 해당 파일들은 자동으로 포함된다. 위와 관련한 조금 더 자세한 사항은 타이젠 개발자 사이트[1]를 통해 확인하길 바란다.
이제 타이젠 웹 UI를 사용함으로써 얻을 수 있는 이점에 대해 알아보도록 하자.

<웹 애플리케이션 테마 지원>
타 이젠 웹 UI 프레임워크를 사용한다면 프레임워크에서 지원하고 있는 화이트 또는 블랙 테마를 애플리케이션에 선택적으로 적용할 수 있다. 테마 선택 방법은 표 2와 같으며, 해당 스타일 속성을 오버라이딩(overriding) 할 경우 조금 더 개발자의 입맛에 맞는 테마를 제작할 수 있다.

화이트 테마
[그림 1] 화이트 테마 (출처 : 자체 제작)

블랙 테마
[그림 2] 블랙 테마 (출처 : 자체 제작)

<웹 위젯(widget) 지원>
타이젠 웹 UI 프레임워크를 사용한다면 표 3의 위젯을 손쉽게 사용할 수 있다.
이 외에도 Tabbar, Context Popup, Progress 등 타이젠 뷰에 최적화된 다양한 위젯을 손쉽게 사용할 수 있다. 관련한 자세한 사항은 타이젠 개발자 페이지[1]를 통해 정보를 얻을 수 있고, 타이젠 IDE에 포함되어 있는 웹 애플리케이션 샘플코드인 TizenWinset을 통하여 각 위젯의 코드 및 뷰를 확인할 수 있다.

[표 3] 웹 위젯 (좌측부터 Button, Checkbox, Date picker, Popup, List)

Tabbar를 활용하여 구성한 화면
[그림 3] Tabbar를 활용하여 구성한 화면 (출처 : 자체 제작)

(HTML 코드)
<div data-role=”page” id=”tabbar_footer”>
<div data-role=”header” data-position=”fixed”>
① <h1>Tabbar text with title</h1>
</div>
<div data-role=”content”>
</div>
<div data-role=”footer”>
② <div data-role=”tabbar”>
<ul>
<li><a href=”#”>Menu</a></li>
<li><a href=”#”>Save</a></li>
<li><a href=”#”>Share</a></li>
</ul>
</div>
</div>
</div>

[표 4] Tabbar 위젯 활용 코드


(HTML 코드)
① <div class=”content” data-role=”content” data-scroll=”y”>
<ul id=”listcontainer” data-role=”listview”>
</ul>
</div>

(Javascript 코드)
② $(“#listcontainer”).append(“<li>Test</li>”);
③ $(“#listcontainer”).listview(“refresh”);

[표 5] List 위젯 활용 코드


<Tabbar위젯 활용>
앞에서 언급한 위젯 중 하나인 Tabbar위젯을

실제로 어떻게 화면에 적용할 수 있는지 표 4 샘플 코드를 통해 확인해보자.
(1) 최상단에 표기할 텍스트를 헤더 내에 작성한다.
(2) ooter 부분에 <div data-role=”tabbar”> 태그를 추가하여 Tabbar를 구성한다. Tabbar 내부에서 ul태그를 활용하여 컨텐츠를 구성한다.
별도의 스타일 시트나 HTML파일의 수정 없이도 위와 같이 모바일에 최적화된 뷰를 구성할 수 있다. 이는 곧 개발시간의 단축으로 이어질 수 있을 것이다.


[표 6] 애플리케이션 유형별 비교

$( Page element ).on( “pageshow” ,
function() {
} );

[표 7] pageshow 이벤트 바인드


<List 위젯 활용>
이제 조금 더 동적인 웹 애플리케이션을 구성해보도록 하자. 단순히 HTML만을 사용해서 애플리케이션을 구성할 수도 있지만 자바스크립트 등을 활용하여 뷰를 구성할 경우 조금 더 사용자에 최적화된 경험을 제공할 수 있다.
List 위젯에 아이템을 추가하는 예제 코드(표 5)를 통해 자바스크립트를 활용하여 화면을 구성하는 방법을 알아보도록 하겠다.
  ① HTML을 통해 listcontainer라는 ID를 가진 list를 생성한다
  ② 제이쿼리의 append 함수를 활용하여 list에 아이템을 추가한다
  ③ listview의 refresh API를 호출하여 화면을 갱신한다.

표 5와 같이 HTML 코드를 단순히 뷰에 추가하는 것뿐만 아니라, 별도로 API를 호출해야 한다. 자바스크립트를 활용한 동적인 뷰 구축과 관련하여 더 자세한 사항은 제이쿼리 모바일 공식 웹사이트[2]에서 확인할 수 있다.

<페이지 초기화 이벤트>
제 이쿼리 모바일 기반의 애플리케이션을 제작할 때 가장 애매한 부분은 언제 어떤 코드를 추가해야 하는지에 관한 것이다. 이는 제이쿼리 모바일이 자바스크립트를 활용하여 뷰를 재구성하기 때문인데, 페이지 초기화 이벤트를 정확하게 파악하고 있다면 큰 문제 없이 진행할 수 있는 부분이다.
지난 호에도 언급한 것처럼, 타이젠 UI 프레임워크는 제이쿼리 모바일을 기반으로 하고 있고, 제이쿼리 모바일은 HTML내의 페이지 엘리먼트를 뷰의 최소 단위로 하고 있다. 페이지 엘리먼트는 표 6의 순서대로 이벤트가 발생한다.
위의 이벤트는 표 7과 같은 방법으로 바인드하여 처리한다.

페 이지 초기화 이벤트에서 주의 깊게 살펴볼 부분은 pageshow 이벤트다. pageshow 이벤트가 발생하기 전까지 사실상 화면에는 아무것도 출력되지 않는다. 만약 pageshow 이전에 자바스크립트 등으로 복잡한 연산을 수행할 경우 사용자들은 마치 애플리케이션이 멈춰 있는 듯한 느낌을 받게 된다.
그렇다고 pageshow 이후로 화면을 구성하는 코드를 작성한다면 화면 갱신이 단계적으로 발생하여 사용자에게 애플리케이션 완성도가 떨어지는 듯한 인상을 줄 수 있다. 페이지 라이프 사이클을 정확하게 파악하여 사용자에게 최고의 경험을 선사하는 애플리케이션을 개발해 보도록 하자.


[표 8] 타이젠 디바이스 API 종류(일부)

- 홈스크린(Homescreen), 락스크린(Lockscreen) 배경을 사용자가 원하는 이미지로 변경
- 디바이스 기본정보 출력

[표 9] 실습 프로그램


디바이스(Device) API

타이젠은 W3C 및 여러 표준 단체에서 지원하지 못하는 기능을 처리하기 위해 자체적으로 다양한 디바이스 API를 지원한다. 이를 통해 기존의 웹 플랫폼 대비 기기에 최적화된 기능을 더 많이 사용할 수 있다. 애플리케이션 라이프 사이클을 관리하든가 스케줄 관리, 데이터 전송, NFC를 이용한 결제 등의 기능을 수행할 수 있다.
타 이젠 디바이스 API는 크게 공통, 애플리케이션, 커뮤니케이션, 컨텐트, 입력/출력, 소셜, 시스템, 사용자 인터페이스로 나눌 수 있다. 각 카테고리 별로 다양한 종류의 디바이스 API를 제공하고 있으며 그 중 자주 사용하는 몇 가지 디바이스 API를 표 8에 설명했다. 더 많은 디바이스 API 설명은 타이젠 웹 디바이스 API 레퍼런스 사이트[3]를 참고하기 바란다.


[그림 4] Single Page Application 선택 (출처 : 자체 제작)


[그림 5] 타이젠 디바이스 API 등록 (출처 : 자체 제작)

타이젠 웹 애플리케이션 실습

지금부터 간단한 예제 프로그램을 통해 타이젠 UI 프레임워크 및 타이젠 디바이스 API를 실습해 보자. 실습 프로그램은 표 9와 같다.
앞으로 설명할 예제 프로그램은 150줄도 안 되는 짧은 소스코드로 위 기능을 모두 구현하고 있다. 물론 본 프로그램은 예제이기 때문에 간결한 전달을 위하여 예외처리 등은 삭제했다.
하지만 이 예제를 통하여 짧은 소스로 많은 기능을 쉽게 구현할 수 있는 웹 애플리케이션의 장점을 경험할 수 있을 것이다. 타이젠 SDK 설치, 빌드 및 에뮬레이터 실행관련 설명은 이전 호를 참고하기 바란다.

1. 타이젠 웹 애플리케이션 프로젝트 생성
우선 타이젠 웹 애플리케이션 프로젝트를 만들어보도록 하자. 생성 순서는 다음과 같다.
  1) 타이젠 IDE 실행
  2) 상단 메뉴 중 File 선택 후 New > Project 선택
  3) Wizards 메뉴에서 Tizen > Tizen Web Pro ject 선택
  4) 그림과 같이 Template 탭에서 Tizen Web UI Framework 선택 후 Single Page Applica tion 선택(그림 9)
  5) Project name 입력
  6) Finish 버튼 클릭

2. 타이젠 디바이스 API 사용 설정(config.xml)
타 이젠 디바이스 API를 사용하기 위해서는 프로젝트 생성시 자동 생성되는 config.xml 파일 내 Privileges를 설정해야 한다. Privileges를 설정하기 위해 config.xml 파일을 더블 클릭하면, 상단에는 Overview 내용이, 하단에는 메뉴탭이 표시된다.
하단 메뉴 중에 Privileges를 선택한 후 Add 버튼을 통해 그림 5와 같이 필요한 타이젠 디바이스 API를 등록할 수 있다. 등록되지 않은 타이젠 디바이스 API는 사용할 수 없다.
본 실습에서 필요한 타이젠 디바이스 API는 다음과 같다.
  - application.launch: 사용자가 원하는 이미지를 선택할 수 있는 외부 프로그램 호출시 필요
  - setting: 선택된 이미지를 홈스크린, 락스크린 배경으로 설정시 필요
  - system: 디바이스 정보 획득시 필요

3. index.html
HTML 은 페이지 구조를 정의한다. 프로젝트 생성시 자동 생성된 index.html의 body 영역을 수정해 보도록 하자. 본 실습의 index.html는 main,about-phone 2개의 페이지로 구성되어 있다. 본 예제는 CSS 파일을 사용하지 않았지만 이 간단한 소스만으로 그림과 같이 디자인이 적용된 결과물을 출력한다. 이것은 우리가 제이쿼리 및 타이젠 UI 프레임워크를 사용하기 때문이다(표 10).
  ① 아이디가 main인 새로운 페이지를 정의한다.
  ② 헤더 영역에 System settings 텍스트를 출력하고 상단에 고정시킨다.
  ③ listview 생성후 list-divider 및 메뉴를 추가한다.
  ④ ui-li-dialogue 클래스로 지정된 li 태그에 ui-li-bigicon 클래스로 지정된 이미지와 텍스트를 삽입한다. 단순히 이미지 및 텍스트를 나열하였지만, 지정된 클래스 값에 따라 타이젠 UI 프레임워크는 그림 6, 7처럼 디자인을 변환해 준다(이미지 위치, 이미지 크기, 텍스트 위치, 텍스트 크기 등).
  ⑤ 메뉴 클릭시 “about-phone” 페이지로 이동할 수 있도록 “a” 태그로 페이지 이동을 처리했다. 이와 달리 Home screen, Lock screen 메뉴는 자바스크립트로 이벤트를 처리하는 예제이기 때문에 “a” 태그 내에 주소를 넣지 않았다.
  ⑥ 아이디가 about-phone인 새로운 페이지를 정의한다

… (헤더 생략) …

<body>
①<div id=”main” data-role=”page” data-footer-exist=”false”>
②<div data-role=”header” data-position=”fixed”>
<h1>System settings</h1>
</div>

<div data-role=”content”>
③<ul data-role=”listview”>
<li data-role=”list-divider” data-style=”dialogue”>Wallpaper</li>

④<li class=”ui-li-dialogue” id=”home-screen-button”>
<a href=””>
<imgsrc=”images/home_screen.png” alt=”icon” class=”ui-li-bigicon”> Home screen
</a>
</li>
<li class=”ui-li-dialogue” id=”lock-screen-button”>
<a href=””>
<imgsrc=”images/lock_screen.png” alt=”icon” class=”ui-li-bigicon”> Lock screen
</a>
</li>

<li data-role=”list-divider” data-style=”dialogue”>Information</li>
<li class=”ui-li-dialogue”>
⑤<a href=”#about-phone”>
<imgsrc=”images/about_phone.png” alt=”icon” class=”ui-li-bigicon”> About phone
</a>
</li>
</ul>
</div>
</div>

⑥<div id=”about-phone” data-role=”page” data-footer-exist=”false”>
<div data-role=”header” data-position=”fixed”>
<h1>About phone</h1>
</div>
<div data-role=”content”>
<ul data-role=”listview”>
<li data-role=”list-divider” data-style=”dialogue”>Device info</li>
<li class=”ui-li-dialogue”>Manufacturer : <span id=”manufacturer-value”></span></li>
<li class=”ui-li-dialogue”>Model : <span id=”model-value”></span></li>
<li class=”ui-li-dialogue”>Battery : <span id=”battery-value”></span></li>
<li class=”ui-li-dialogue”> CPU usage : <span id=”cpu-value”></span></li>
</ul>
</div>
</div>
</body>
</html>

[표 10] index.html 코드


[그림 6] main 페이지(좌측), [그림 7] about-phone 페이지 (각 출처: 자체 제작)


4. main.js(1)
index.html을 실행하면 페이지 디자인 출력 및 “About Phone”클릭시 메뉴 이동이 정상적으로 될 것이다. 하지만 스크린샷 변경 버튼이 작동하지 않고, about-phone 페이지의 시스템 정보가 출력 되지 않는다. 이것을 구현하기 위해서는 표 11과 같이 웹 애플리케이션의 동적인 역할을 담당하고 있는 자바스크립트를 작성해야 한다.

① main 페이지가 최초 초기화될 때 해당 함수가 호출된다.
② home-screen-button 아이디를 가지는 엘리먼트 (<li class=”ui-li-dialogue” id=”home-screen-button”>)에 tap 이벤트를 등록한다. 해당 이벤트가 발생하면 launchImagesGal lery를 호출하여 그림13과 같이 이미지를 선택 할 수 있는 외부 프로그램을 실행한다.
③ 타이젠 2.2에서는 하드웨어 뒤로가기(back) 키를 지원하기 때문에 하드웨어 키 이벤트를 처리해야 한다. 첫 페이지인 main 페이지에서 back 키 이벤트가 발생하면 프로그램을 종료하고, 이외에 페이지에서 back 키 이벤트가 발생하면 이전 페이지로 이동시킨다.
④ 호출할 외부 프로그램의 Operation 및 MIME Type을 지정한다. 해당 Operation 및 MIME값에 따라 미리 정의된 프로그램이 호출된다. 자세한 Operation 및 MIME 타입은 타이젠 공식 문서[4]를 참고 바란다.
⑤ 타이젠 디바이스 API인 AppControl로 ④번에서 지정한 외부 프로그램을 실행한다.
⑥ 외부 프로그램의 반환 값(여기서는 사용자가 선택한 이미지)을 타이젠 디바이스 API인 시스템세팅을 사용하여 배경이미지로 설정한다(그림 9).

①$(document).delegate(“#main”, “pageinit”, function() {
②$(“#home-screen-button”).bind(“tap”, function() {
launchImagesGallery(‘HOME_SCREEN’);
});

$(“#lock-screen-button”).bind(“tap”, function() {
launchImagesGallery(‘LOCK_SCREEN’);
});

③$(window).on(‘tizenhwkey’, function (e) {
if (e.originalEvent.keyName === “back”) {
if ($.mobile.activePage.attr(‘id’) === ‘main’) {
tizen.application.getCurrentApplication().exit();
} else {
history.back();
}
}
});
});

function launchImagesGallery(type) {
var service, onReply;
onReply = {
onsuccess: function (data) {
⑥tizen.systemsetting.setProperty(type, data[0].value[0], function () {}, function () {});
},
onfailure: function () {}
};

④service =new tizen.ApplicationControl(‘http://tizen.org/appcontrol/operation/
pick’,null,”image/png”);

try {
⑤tizen.application.launchAppControl(service,null,function () {},function (err) {},onReply);
} catch (error) {
}
}

(…)

[표 11] main.js(1)


[그림 8] 파일을 선택할 수 있는 프로그램(좌측), [그림 9] 변경된 배경 이미지 (각 출처: 자체제작)


5. main.js(2)
① “pagebeforeshow” 이벤트에 따라“about-phone”페이지 화면이 출력되기 전 함수가 호출된다.
② 시스템 정보를 제공하는 타이젠 디바이스 API인tizen.systeminfo.getPropertyValue를 ‘BUILD’옵션으로 호출하였다. 정상적으로 타이젠 디바이스 API가 수행되면 콜백 함수로 등록한 updateBuild가 호출된다. 이 때 요청한 시스템 정보가 매개변수로 전달된다.
③ manufacturer-value의 아이디를 가진 엘리먼트(<span id=”manufacturer-value”></span>)에 value.manufacturer 값이 출력된다(그림 10).

타이젠 웹 애플리케이션 샘플

타이젠 IDE에는 타이젠 UI 프레임워크, 타이젠 디바이스 API 및 W3C API 등을 사용한 다양한 타이젠 웹 애플리케이션 샘플이 내장되어 있다.
또한 타이젠 공식 웹사이트의 샘플 웹 애플리케이션 페이지[5]에도 게임 및 유틸리티 장르의 타이젠 웹 애플리케이션 샘플이 등록되어 있다.
이 샘플을 활용한다면 타이젠 웹 애플리케이션 개발에 큰 도움이 될 것이다.

(…)

①$(document).delegate(“#about-phone”, “pagebeforeshow”, function() {
②tizen.systeminfo.getPropertyValue(‘BUILD’, updateBuild, null);
tizen.systeminfo.getPropertyValue(‘BATTERY’, updateBattery, null);
tizen.systeminfo.getPropertyValue(‘CPU’, updateCpu, null);
});

function updateBuild(value) {
③$(‘#manufacturer-value’).html(value.manufacturer);
$(‘#model-value’).html(value.model);
}

function updateBattery(value) {
$(‘#battery-value’).html((value.level * 100) + ‘%’);
}

function updateCpu(value) {
$(‘#cpu-value’).html((value.load * 100) + ‘%’);
}

[표 12] main.js(2)



[그림 10] about-phone 페이지 (출처 : 자체 제작)

마치며

이번 호에서는 타이젠 웹 UI 프레임워크 및 디바이스 API를 살펴보고 이를 활용한 샘플 애플리케이션을 제작해봤다.
웹 애플리케이션은 타이젠의 초기 생태계를 구축하는데 큰 축이 될 것이기 때문에 타이젠은 웹 애플리케이션을 위해 다양한 지원을 하고 있다. 이번 기회를 통해 웹 애플리케이션 개발에 참여해보는 것도 좋은 경험이 될 것이다.


참고

[1] https://developer.tizen.org/documentation/dev-guide
[2] http://jquerymobile.com
[3] https://developer.tizen.org/help/topic/org.tizen.web.device.apireference/index.html
[4] https://developer.tizen.org/help/topic/org.tizen.web.apppro gramming/html/guide/app_guide/application_service.htm
[5] https://developer.tizen.org/downloads/sample-web-applications

/필/자/소/개/

필자

서주영 | seojuyung2@gmail.com

EFL 오픈소스 공식 개발자로 활동하고 있으며 현재 삼성전자 소프트웨어 센터에 재직 중이다. 긍정의 힘을 믿으며 사랑스러운 아내와 귀여운 딸과 함께 행복하게 사는 것이 인생의 목표이다. 프로그래밍을 할 때 기쁨을 느끼며 개발자가 천직이라 생각하는 만년 개발자이다. EFL 및 타이젠 관련 정보를 공유하는 개인 블로그 seoz.egloos.com을 운영하고 있다. 결혼 전까지 모터사이클에 미쳐있던 라이더이기도 하다.



필자

강석현 | sh0708.kang@samsung.com

흑백 단말기부터 스마트폰까지 10여년 동안 모바일 업무를 수행하고 있다. 국방부, 농촌진흥청 등의 스마트폰 정보화 사업 PL을 담당했고, 현재 삼성전자에서 타이젠 업무를 하고 있다. 개발 이외에도 기획, 마케팅 등 다양한 분야에 관심이 많으며, 작은 모니터를 통해 세상을 바라보지 않고 직접 폭넓게 느끼고자 노력한다. 엄지, 소이와 함께 만들어가는 행복을 세상에 많은 이에게 나누어 주며 살고 싶은 소망이 있다.



필자

김현중 | phillar85@gmail.com

현재 삼성전자에서 Tizen Web UI Framework를 개발하고 있다.
Microsoft MVP (2009~2011, Client App Dev)로 활동하였고 웹과 관련한 전반적인 기술에 관심이 많아 관련 기술을 꾸준히 공부하고 있는 열혈 개발자이다.



※ 본 내용은 (주)테크월드(http://www.embeddedworld.co.kr)의 저작권 동의에 의해 공유되고 있습니다.
    Copyright ⓒ Techworld, Inc. 무단전재 및 재배포 금지

맨 위로
맨 위로