타이젠 웨어러블 SDK를 통한 기어2 앱 개발 – 나만의 기어2 디지털 시계 만들기

[toggle title=”테크니컬 레벨 : ✭✭” load=”show”]강석현 sh0708.kang@samsung.com | 흑백단말기부터 스마트폰까지 10년간 모바일 프로젝트를 수행하고 있다. 국방부, 농촌진흥청 등의 정부 프로젝트 PL을 담당했고 현재 삼성전자 소프트웨어센터에서 타이젠 웹 애플리케이션을 담당하고 있다. 기획, 마케팅 등 다양한 분야에 관심이 많으며 작은 모니터를 통해 세상을 바라보지 않고 직접 폭넓게 느끼고자 노력한다. 엄지, 소이와 만들어 가는 행복을 세상에 나누며 살기를 소망한다.

김용국 yk22.kim@samsung.com | 고등학교 때부터 자기소개서의 취미란에 컴퓨터, 특기란에도 컴퓨터를 적다가 결국 컴퓨터공학과를 졸업하고 개발자의 길을 걷고 있다. 반응형 웹 디자인을 이용한 웹 애플리케이션 기술에 관심이 많다. 현재 삼성전자 소프트웨어센터에 근무 중이며, 타이젠 웹 애플리케이션 관련 업무를 수행하고 있다.

권용준 yongjun.kwon@samsung.com | 이제 막 웹 애플리케이션 개발의 첫 걸음마를 시작한 개발자다. 모르는 것이 많은 만큼 궁금한 것도 많으며, 앞으로 성장할 일만 남았다. 웹 애플리케이션 성능 최적화 및 사용자 중심 웹 애플리케이션 개발이 주요 관심사다. 삼성전자 소프트웨어센터 타이젠 웹 애플리케이션 개발을 담당하고 있다. 웹 애플리케이션의 겉과 속을 모두 아는 개발자가 되기 위해 항상 노력하고 있다.[/toggle]

[toggle title=”연재순서” load=”show”]1회 | 2014. 6 | 기어2 웹 애플리케이션 개발
2회 | 2014. 7 | 나만의 기어2 디지털 시계 만들기
3회 | 2014. 8 | 나만의 기어2 아날로그 시계 만들기[/toggle]

지난 시간에는 타이젠 및 기어2에 대해 알아보고 타이젠 웨어러블 SDK를 설치해봤다. 이번 시간부터는 본격적으로 타이젠 웨어러블 SDK를 이용해 간단한 타이젠 웹 애플리케이션을 만들어 본다. 우선 타이젠 웨어러블 웹 애플리케이션 개발에 필요한 기본정보를 살펴보자. 기어2의 애플리케이션 타입과 타이젠 Time API에 대해 살펴보고, 타이젠 웹 애플리케이션을 제작 및 배포하기 위한 보안 키 등록 절차도 알아본다. 개발과 관련된 기본정보를 확인한 후에는 디지털 시계 애플리케이션을 본격적으로 개발해볼 것이다.

개발 기본 정보
애플리케이션은 구동 방식에 따라 Watch App과 Watch Clock 두 종류로 분류할 수 있다.



애플리케이션 타입기어2
Watch App은 설치 후 ‘앱스(Apps)’ 안에 아이콘이 추가되며, 사용자가 아이콘을 클릭해 실행할 수 있다. Watch App은 애플리케이션의 기본 타입이므로 따로 설정해 줄 필요는 없다. 시계를 제외한 일반적인 애플리케이션의 대부분은 Watch App 형태로 설치된다.
Watch Clock은 홈 스크린(Home Screen)에서 동작하는 시계를 의미한다. Watch Clock 애플리케이션 설치하면 [설정] → [시계]([Setting] → [Time]) 리스트에 아이콘이 추가된다. 설치된 Watch Clock을 사용자가 기본 시계로 설정하면 홈 스크린에서 자동으로 실행된다. Watch Clock 애플리케이션은 항상 실행되므로 자체적으로 종료 할 수 없고, 위-아래 스크롤(Back) 및 좌우 수평 스크롤 이벤트를 받을 수 없는 특성이 있다.애플리케이션을 Watch Clock으로 설정하기 위해서는 config.xml에서 태그 안에 을 추가한다.

[toggle title=” Watch Clock 카테고리 설정” load=”show”][cc lang=”javascript” width=”100%” height=”100%” nowrap=”0″][/cc][/toggle]

타이젠 웨어러블 SDK

타이젠 웨어러블 SDK를 이용해 디바이스에 애플리케이션을 설치하기 위해서는 SDK 보안 키가 필요하다. 지금부터는 타이젠 웨어러블 SDK 보안 키의 생성·등록 방법에 대해 알아보자.



먼저 타이젠 IDE 상단 툴바에 있는 [Generate Certificate Request] 버튼을 클릭하자. 의 네모 칸 안 제일 왼쪽에 있는 빨간색 버튼이다. [Generate Certificate Request] 버튼을 클릭하면 와 같은 화면이 나타난다. 관련된 정보와 DUID(디바이스 고유 번호, Device Unique Identifier)를 입력하고 [OK] 버튼을 누르면 tizen-wearable-sdk-data/keystore 폴더에 certificate-request.xml 파일이 생성된다. 참고로 DUID는 [Connection Explorer]에서 우 클릭을 하면 나타나는 [Properties]에서 확인할 수 있다.



생성된 certificates-request.xml 파일을 gear2.sec@samsung.com에 메일로 보내면 답장으로 certificates-registration.xml 파일을 받을 수 있다.
의 우측에 위치한 [Register Certificate] 아이콘을 눌러 와 같이 파일을 선택하면 보안 키가 등록된다. 보안 키 설정을 완료하면 애플리케이션 설치 및 실행이 가능하다. 더 자세한 사항은 [Help] → [Help Contents] → [Certificates]를 참고하면 된다.


Register Certificate 화면
Register Certificate 화면

● TZDate 객체
자바스크립트에서는 Date 객체가 날짜, 시간과 관련된 정보를 제공한다. 하지만 Date 객체는 해외 로밍 등으로 타임존이 변경됐을 때 해당 로컬 시간이 제대로 반영되지 않는 문제점이 있다. 이를 해결하기 위해 타이젠 Time API는 TZDate 객체로 날짜, 시간 정보를 제공한다. TZDate 객체는 코드를 통해 생성할 수 있다.

[toggle title=” TZDate 객체 생성” load=”show”][cc lang=”javascript” width=”100%” height=”100%” nowrap=”0″]var date = tizen.time.getCurrentDateTime();[/cc][/toggle]
TZDate 객체가 제공하는 메소드는 Date 객체와 동일하며, 세부적인 내용은 IDE 상단 메뉴 중 [Help] → [Help Contents] → [Tizen Wearable Web App Programming] → [API Reference] → [Device API Reference] → [System] → [Time]에서 확인할 수 있다. 그렇다면 TZDate 객체의 내장 메소드에는 무엇이 있을까? 지금부터 살펴보자.

이 글에서 실제 구현해볼 기어2 시계 예제에서는 날짜와 요일 등의 정보는 출력하지 않지만, 의 TZDate 객체의 메소드를 이용하면 다양한 정보를 제공하는 시계를 직접 개발해볼 수 있다.



● 아이콘
애플리케이션을 개발할 때 사용자가 별도의 아이콘을 지정하지 않으면 처럼 기본으로 제공되는 타이젠 아이콘이 해당 앱의 아이콘으로 설정된다. 이러한 아이콘은 타이젠 웹 애플리케이션 프로젝트 설정파일인 config.xml에서 변경할 수 있다.

아이콘 변경 Before
아이콘 변경 Before


config.xml의 하단 탭 중 [Overview]에서 아이콘을 변경할 수 있다. ‘Icon’ 박스 안의 [Browser]를 누르면 이미지 파일을 선택할 수 있는데, 선택된 이미지 파일이 해당 애플리케이션 아이콘으로 사용된다( 참조).

아이콘 변경 After
아이콘 변경 After


이제 본격적으로 나만의 디지털 시계를 만들어보자.

● 신규 프로젝트 생성
먼저 프로젝트 생성이 필요하다. IDE 상단 메뉴 탭에서의 [File] → [New] → [Tizen Wearable Web Project]를 클릭하면 프로젝트 생성 창이 열린다( 참조). 타이젠 웨어러블 SDK는 빈 프로젝트를 제공하지 않기 때문에 처럼 [Template]의 Basic application을 선택해야 한다. Project name과 Location을 입력하고 프로젝트를 생성한다.





타이젠 웨어러블 SDK는 빈 프로젝트를 제공하지 않기 때문에 처럼 [Template]의 Basic application을 선택해야 한다. Project name과 Location을 입력하고 프로젝트를 생성한다.
는 Project Explorer이다. 프로젝트를 생성하면 나타나는데, 여기서 추가적으로 프로젝트를 생성하고 삭제하는 등의 관리가 가능하다. 프로젝트 생성하면 이제 실질적인 프로그래밍을 시작해보자.

● 디지털 시계 소스 코드
이 글에서 제작할 시계 앱은 ‘12:45’처럼 시와 분을 보여주는 간단한 디지털 시계다. 초의 흐름을 표현하기 위해 시간과 분 사이의 ‘:’가 1초마다 한번씩 깜박이게 할 것이다. 우선 프로젝트의 환경설정을 위해 config.xml의 소스 코드를 확인해보자.

[toggle title=” config.xml” load=”show”][cc lang=”javascript” width=”100%” height=”100%” nowrap=”0″]
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets"
id=”http://yourdomain/DigitalWatch” version=”1.0.0″ viewmodes=”maximized”>

DigitalWatch
··········①

[/cc][/toggle]

① Watch Clock 애플리케이션으로 설치하기 위해 카테고리 지정을 해주었다. 해당 코드를 추가하지 않으면 Watch App으로 설치가 되니 주의하도록 하자.
다음은 페이지 구조를 담당하는 index.html의 소스 코드다.

[toggle title=” index.html” load=”show”][cc lang=”javascript” width=”100%” height=”100%” nowrap=”0″]


Gear2 Digital Watch



·········· ①

:

·········· ②
[/cc][/toggle]

의 주요 코드를 각 부분별로 살펴보자.
① div 태그를 활용해 시간을 표현할 공간을 설정한다. 한 줄로 표현하기 위해 인라인태그인 span를 사용하여 ‘시:분’ 형태로 출력한다. ‘:’를 이용해 시와 분을 구별하고 효과를 주기 위해 id를 지정했다.
② 애플리케이션 성능 향상을 위해 body 태그의 마지막 시점에서 스크립트 파일을 로딩한다(성능 최적화와 관련된 자세한 정보가 필요하면 스티브 사우더스의 서적을 참고하길 바란다).

전체적인 구조를 잡았다면 이제 CSS 스타일을 적용해보자. 나만의 디지털 시계는 기어2 중간에 ‘시:분’ 형식으로 보여지기 때문에 배경, 글자 위치, 색 등만 조절해주면 된다.

[toggle title=” style.css” load=”show”][cc lang=”javascript” width=”100%” height=”100%” nowrap=”0″]* { ·········· ①
padding: 0px;
margin: 0px;
}

body { ·········· ②
width: 100%;
height: 320px;
background-color: #555555;
}

#divTime { ·········· ③
text-align: center;
}

#hour, #minute, #divide { ·········· ④
font-size: 80px;
color: #33B0E5;
line-height: 320px;
}

#hour {
font-weight: bold;
}

#divide { ·········· ⑤
visibility: hidden;
}[/cc][/toggle]

① 불필요한 여백을 제거하기 위해 padding과 margin을 0으로 초기화한다.
② body에는 시계의 배경색(#555555)을 지정했다. 기어2의 해상도인 320×320을 맞추기 위해 height 값을 정해준다. width는 의 viewport에서 ‘width=device-width’라고 지정했기 때문에 100%로 지정하면 device-width로 설정된다.
③ divTime은 텍스트가 들어갈 공간이다. text-align을 center로 지정해 ‘시:분’이 수평으로 가운데 정렬되도록 설정했다.
④ hour, minute, divide는 ‘시:분’ 부분이다. 글자색(#33B0E5)을 지정하고, line-height 값을 320px로 지정하면 수직으로 가운데 정렬이 된다. 시간에 bold 효과를 주면 폰트가 두껍게 출력되니 참고하자.
⑤ divide의 깜빡임을 구현하기 위해 visibility는 hidden으로 처리했다. 추후 이 부분은 flag 값을 이용해 깜빡임을 구현하는 데 사용할 예정이다.


CSS 스타일 적용했다면 이제 시간을 주기적으로 업데이트 시켜주는 작업을 자바스크립트로 구현하자.


[toggle title=” main.js” load=”show”][cc lang=”javascript” width=”100%” height=”100%” nowrap=”0″]window.onload = function () { ·········· ①
// Set variables ·········· ②
var hour = document.querySelector(‘#hour’),
divide = document.querySelector(‘#divide’),
minute = document.querySelector(‘#minute’),
flagShow = false;

function updateClock() { ·········· ③
var now = tizen.time.getCurrentDateTime(), ·········· ④
curHour = now.getHours(),
curMin = now.getMinutes();

// Set a hour ·········· ⑤
hour.innerHTML = curHour;

// Set a minute
if (curMin < 10) {
minute.innerHTML = '0' + curMin;
} else {
minute.innerHTML = curMin;
}

// Set a divide ·········· ⑥
if (flagShow) {
divide.style.visibility = 'visible';
flagShow = false;
} else {
divide.style.visibility = 'hidden';
flagShow = true;
}
}
// Set a timer ·········· ⑦
setInterval(updateClock, 500);
};[/cc][/toggle]

① 페이지가 로딩된 후 해당 함수가 수행된다.
② index.html에서 ‘시:분’에 해당하는 정보들을 document.querySelector로 받아온다. id 값으로 정해줬기 때문에 앞에 #을 붙여준다.
③ 주기적으로 호출될 updateClock 함수를 정의한다.
④ 타이젠 Time API인 ‘tizen.time.getCurrentDateTime()’을 통해 TZDate 객체를 받아온다. 자바스크립트의 Date 객체를 사용할 수도 있지만 앞서 설명했듯 타임라인을 적용하기 위해 타이젠 Time API를 사용한다. 객체를 받은 다음 getHours(), getMinutes() 함수를 이용해 현재 시간을 얻을 수 있다.
⑤ 현재 시, 분에 해당하는 정보를 입력한다. 10분 이하일 때는 앞에 ‘0’을 붙여서 한 자리 숫자가 되지 않도록 한다.
⑥ flagShow 값이 true, false 인지에 따라 divide의 visible, hidden을 변경한다. 해당 함수를 500ms에 1번씩 호출하기 때문에 divide가 1초당 한 번씩 깜빡이도록 할 수 있다.
⑦ setInterval(handler, time)을 이용해 500ms에 1번씩 updateClock 함수를 수행하도록 설정한다. 핸들러로는 ④에서 선언한 updateClock 함수를 사용한다.

src="/photodb_upload/2014/07/140717_ss_gear2_10.jpg"

● 실행결과 확인하기
나만의 디지털 시계를 만들었다면 이제 그 결과를 확인해 보자. 애플리케이션 설치 후 [설정] → [시계]에서 아이콘을 선택하자. 와 같이 홈 스크린에 나만의 디지털 시계가 동작하는 것을 확인할 수 있다.

지금까지 타이젠 웨어러블 SDK를 이용해 간단한 나만의 디지털 시계를 제작해봤다. 홈 스크린에 자신이 만든 독창적인 Watch Clock 애플리케이션을 설치해 나만의 스마트 워치(smart watch)를 뽐내보자. 다음 시간에는 여기에서 한 단계 나아가 여러 기능들이 추가된 아날로그 시계를 제작해본다.

[toggle title=”참고자료” load=”show”]1. developer.tizen.org
2. developer.samsung.com
3. www.tizen.org
4. www.stevesouders.com[/toggle]

답글 남기기