Tizen studio에서 Wearable기기 Web Application 만들기

요즘 스마트워치를 사용하는 분들을 종종 봅니다. 저도 삼성 기어핏2를 사용중인데요, 혹시 스마트워치는 어떤 OS 기반으로 작동하는지 알고계신가요? 막연히 안드로이드가 아닐까 생각했는데, 최근 Gear Watch Designer로 워치페이스를 제작하여 사용하던 도중 타이젠(Tizen)이라는 OS를 사용하고 있다는 것을 알게되었습니다. 타이젠은 인텔, 삼성전자, 리눅스 파운데이션 등 여러 회사가 연합하여 만든 오픈 소스 모바일 운영 체제입니다.^[각주:1]

삼성전자의 스마트워치인 기어 시리즈와, 스마트 TV, 그리고 삼성 패밀리허브 냉장고 전면에 달린 태블릿까지 모두 타이젠 OS가 탑재되어 있습니다.^[각주:2] 타이젠 운영체제를 기반으로한 스마트폰(Samsung Z1)도 있지만, 안드로이드와 iOS 양강체제에 밀려 시장 점유율은 1%가 채 되지 않는다고 합니다. 그러나 삼성전자에서는 사물인터넷(IoT) 시대를 맞아 스마트 TV, 냉장고, 세탁기, 공기청정기 등 모든 삼성 가전제품에 타이젠 운영체제를 탑재하겠다며, 타이젠 생태계 구축 의사를 밝혔습니다. ^[각주:3] 

이미 포화상태에 이른 스마트폰 시장에서 점유율을 높이기보다 앞으로 발전이 이루어질 사물인터넷 분야에서 타이젠의 영역을 넓히려는 의도로 보입니다. 이제는 더 이상 스마트폰에서만 앱을 사용하는 것이 아니라, 스마트 워치나 가전제품에도 앱을 설치하여 사용하는 것이 일반화될 것 같다는 생각이 듭니다.

Tizen에서는 C,C++ 언어로 만든 Native application 뿐만 아니라, HTML5 기반의 Web application도 사용할 수 있습니다.^[각주:4] 생소한 OS라서 앱 개발이 어려울 것만 같았는데, 웹 기반으로 애플리케이션을 만들 수 있다니 한 번 만들어 보고 싶은 생각이 들었습니다. 이번 포스트에서는 타이젠 OS에서 작동하는 앱을 웹 프로그래밍 언어인 HTML, CSS, JS를 사용하여 만드는 법을 적어보려고 합니다.

* 준비물: 삼성 계정, 무선인터넷에 연결되는 PC, 와이파이.

앱을 만들고 기기에 배포하기 위해서 인증서를 발급받아야 하는데, 이 때 삼성 계정이 필요합니다. 삼성 계정이 없으신 분들은 https://account.samsung.com/account/signUpSelected.do 여기서 가입하실 수 있습니다.

또, 기기와 연결하여 앱을 설치하기 위해서는 Tizen Studio와 기기를 연결해야 하는데, 이 때 무선인터넷을 통해 통신하므로 무선인터넷을 이용할 수 있는 PC와 사용가능한 와이파이가 있어야합니다.

1. 우선, 사용하는 운영 체제에 맞는 'Tizen Studio'를 다운로드 받습니다. 

Tizen Studio 다운로드 링크: https://developer.tizen.org/ko/development/tizen-studio/download?langredirect=1

 

2. 설치 파일을 실행시켜 설치합니다. Tizen Studio Package Manager에서 설치할 SDK를 골라서 필요한 것만 설치할 수 있습니다. 저는 기어핏2에서 작동하는 앱을 만들 것이므로 Wearable install 버튼을 클릭하였습니다. 무슨 버전을 받아야될지 몰라서 일단 최신 버전을 깔았는데 문제없이 작동하였습니다.

설치가 완료되었으면 Extension SDK를 선택하여, Samsung Certificate Extension을 설치합니다. 추후에 프로젝트를 빌드하고 기기에 설치하기 위한 인증서를 발급받을 때 필요합니다.

 

3. SDK 설치가 완료되었으면, Tizen Studio를 실행합니다. Tizen Studio는 Eclipse를 기반으로 하고 있습니다. 그래서인지 프로그램 UI가 Eclipse와 유사합니다. 우측 상단에서 개발 환경에 따라 Perspective를 변경할 수 있는 점과 하단 Console 스타일, Properties 설정 방법 등에서 이클립스와 비슷한 느낌이 납니다. 또한 이클립스 기반이기 때문에 리소스 열기(Ctrl+Shift+R), 문자열 검색(Ctrl+H) 등의 이클립스와 동일한 단축키를 사용할 수 있습니다.

 

4. 새로운 프로젝트를 생성합니다. 상단 툴바에서 [File-New-Tizen Project]를 클릭합니다. 그러면 아래와 같은 화면이 나오는데, 어느쪽을 클릭해서 시작해도 상관없습니다.

템플릿으로 시작하면, 아주 간단한 기본 UI를 가진 프로젝트가 생성됩니다. 메인 페이지가 될 index.html, 최소한의 스타일을 설정한 style.css, 그리고 백버튼과 텍스트 클릭에 대한 이벤트 리스너를 동록하는 코드가 있는 main.js가 핵심 파일입니다.

반면에 샘플로 시작하면, 그야말로 하나의 완성된 애플리케이션의 코드들로 이루어진 프로젝트가 생성됩니다. 웹 애플리케이션이지만 웹 사이트에서 구동하는 것이 아니므로, 웹 개발자라고 해도 전반적인 구조 설계나 코드 작성이 막막할 수 있는데 완성된 다양한 종류의 애플리케이션 샘플 코드를 제공함으로써 그러한 어려움을 해소해주고 있습니다.

Sample 타입을 선택한 후, 기기에 맞는 버전을 선택하고, Application Type을 선택할 수 있는데 이 때 Web Application을 선택합니다. 제가 테스트할 기어핏2 기기는 Wearable v.2.3.1 입니다. 혹시나 버전을 모르시는 분들은 기기에서 [설정-Gear정보-디바이스 정보] 메뉴를 들어가시면 '소프트웨어 버전'이 있는데, 문자열로 구글에서 찾아보시면 됩니다. 저 같은 경우에도 명확하게 정리되있는 페이지를 발견하지 못해서 검색하여 찾아보았습니다. 선택한 버전이 기기와 맞지 않으면 설치가 되지 않으니, 기기에 맞는 버전을 선택해야 합니다.

샘플 종류에는 매우 여러가지가 있는데 그 중에서 달력을 선택해보았습니다.

위의 과정을 마치면 프로젝트가 생성됩니다. 생성된 프로젝트 파일 구조는 아래와 같습니다. 웹 개발을 해보았다면 매우 익숙한 구조가 아닐까 싶습니다.

어떤 방식으로 코드가 구성되어 있는지 살펴보도록 하겠습니다. 구조 파악을 돕기 위해 프로젝트가 실제로 실행되는 화면을 emulator를 통해서 preview해보았습니다. (기어핏2 사이즈의 에뮬레이터가 없어서 Emulator Manager에 들어가서 기어핏2 해상도인 216*432의 emulator를 하나 생성하였습니다.)

우선 뷰페이지인 index.html 코드는 아래와 같습니다. 생각보다 아주 간단합니다. 노란색으로 표시해놓은 1번 영역에 달력 제목이 되겠습니다. 위의 미리보기 화면에서 'August 2017'이 써있는 영역이겠죠. 주황색으로 표시해놓은 2번 영역은 달력 테이블이 들어가는 wrapper역할의 <div>입니다. 하늘색으로 표시한 3번 영역은 아래 보이는 3개의 버튼입니다. 달력 제목 텍스트나 달력 테이블 태그가 없는 것을 보니 javascript에서 해당 내용을 만들어서 화면에 붙여주는 것이라고 생각할 수 있습니다.

이 페이지에 import된 js파일 tau-config.js, tau.js, core.js 중에서 tau-config.js와 tau.js는 기기와 관련된 스크립트이고, core.js는 앱이 작동하기 위해 필요한 js 파일들을 로드하고 모듈로 등록하는 기능을 하는 function들을 정의한 스크립트입니다.

달력이 그려지는 과정은 core.js로부터 시작합니다. core.js에서 'extend'와 'main'이라는 함수가 실행됩니다. extend 함수가 실행되며 core.js에 정의된 require와 define 함수가 전역 객체인 window의 property에 합쳐집니다. 그리고 main 함수가 실행되면서 index.html에 있는 <script>태그의 attribute중 data-main의 value를 추출하여 <script>태그를 새로 만들어 src 속성으로 설정해줍니다. 따라서 index.html 코드에서 맨 마지막 <script> 태그에 있는 data-main 속성에 의해 app.js도 페이지에 import 됩니다.

app.js에서 core.js에서 전역 함수로 설정되었던 define 함수를 호출합니다. 이 과정에서 initPage.js가 로드되고, initPage.js에서는 event.js, application.js, systeminfo.js, monthPage.js를 로드합니다. 정리하자면, 앱이 작동하기 위한 기능들을 쪼개 비슷한 기능을 분류하여 하나의 js에 정의하고, 연쇄적으로 해당 js가 실행될 때 필요한 js를 불러오는 구조로 짜여져있습니다. 기능별로 모듈화가 잘 되어있다보니 구조 파악도 용이하고, 코드도 매우 깔끔합니다.

5. 기기에 맞게 스타일과 기능을 수정합니다. 샘플 코드는 가로 360px 기준이여서, 그보다 작은 기어핏2에서 가로 스크롤이 발생합니다. 따라서 css를 수정하여 스크롤이 생기지 않도록 해주려고 합니다. 색상도 좀 더 밝게 수정하고, 월/요일 문자열도 바꿔보겠습니다. 수정한 후 [Run-Tizen Web Application]을 클릭하면 emulator가 실행되면서 미리보기가 가능합니다. 스타일은 style.css와 tau.css를 파일에서 알맞은 셀렉터를 찾아 수정할 수 있습니다. 수정한 후 emulator에서 돌려보니 아래와 같이 되었습니다. 원하는대로 수정하였으므로 기기에 설치해보도록 하겠습니다.

 

6. Tizen Studio에 기기를 연결합니다. 실제 기기에서 실행시켜보기 위하여 Tizen studio에 기기를 등록합니다. 제가 연결시킬 기기는 기어핏2에서 [설정-연결] 메뉴에 들어가서 블루투스 연결을 끊고 PC에 연결되어 있는 와이파이와 동일한 와이파이에 연결합니다. 그리고 [설정-Gear정보]에 들어가서 디버깅 모드를 활성화합니다. 그런 후 Tizen Studio에서 Connection Explorer탭에서 Remote Device Manager 버튼을 클릭합니다. + 버튼을 눌러 기기를 추가합니다. 식별할 기기명, 연결된 와이파이의 IP를 적으면 되고, 포트는 기본값으로 둔 상태로 Add를 누릅니다. 기기가 추가되었으면, Connect 컬럼에 OFF 되어있는 스위치를 눌러 ON으로 변경합니다.

정상적으로 되었다면 Connection Explorer에 연결된 기기가 뜹니다.

7. 인증서를 발급받습니다. 앱을 만들고 배포하기 위해서는 Author Certificate와 Distibutor Certificate 두 개의 인증서가 필요합니다. 인증서는 상단 툴바에서 [Tools-Certificate Manager] 를 선택하여, 인증서 매니저를 실행시킨 후 + 버튼을 눌러 인증서를 발급받을 수 있습니다. 인증서 타입을 선택할 수 있는데, Tizen과 Samsung 중에 삼성 기기에 배포할 것이기 때문에 Samsung을 선택하여 인증서를 받았습니다. 정상적으로 완료되었다면, 아래와 같이 Author Certificate와 Distibutor Certificate에 각각 인증서가 나타납니다.

8. config.xml에서 이름과 아이콘을 바꿔줍니다. config.xml에서 앱 관련 설정을 해줄 수 있는데요, Name은 기기에서 보일 앱 이름이고, icon 이미지는 기기에서 보일 아이콘입니다. Name의 default는 프로젝트명과 동일하기 때문에, Name을 '달력'으로 바꿔주었습니다. 그리고 아이콘은 달력과 관련된 이미지를 추가하여 icon을 변경합니다.

 

9. 연결된 기기에서 실행을 시켜보겠습니다. 프로젝트탐색기에서 실행하려는 프로젝트 이름 위에 마우스 오른쪽 버튼을 클릭한 후, [Run As-Run Configurations]를 클립합니다. 그러면 아래와 같은 창이 뜨는데 여기서 Tizen Web Application을 선택한 후 상단의 버튼 중 첫번째에 있는 New launch configuration 버튼을 클릭합니다. 그러면 New_configuration이 추가되고 하단의 Run버튼을 누르면 launch가 시작됩니다.

하단 Console에 로그가 찍히기 시작합니다. Tizen application is successfully launched. 라고 뜬걸보니 성공하였습니다. 성공하기까지 몇 번 시도했는데, 제가 겪은 에러는 두 가지 였습니다.

첫번재는 프로젝트를 생성할 때 선택한 기기 버전과 실행하려는 기기 버전이 맞지 않아서 난 에러였고, 두번째는 에러 코드에 81이 있었는데 구글링 해보니 인증서 문제였는데 인증서를 새로 발급하니 해결되었습니다.

 

10. 실제 기기에서 확인해봅니다. 메뉴 화면을 들어가면 맨 아래에 방금 추가한 '달력' 앱을 볼 수 있습니다. 터치하여 실행하였더니 제대로 작동됩니다. 

 

마무리하며...

Tizen Studio를 통해 앱을 만들어 본 후기를 몇 가지로 정리해보자면, 다음과 같습니다.

1. 이클립스와의 유사성 덕분에 프로그램을 사용하기 쉽다.

2. 다양한 종류의 샘플 코드를 제공하기 때문에, 왠만한 앱은 조금만 수정하여 쉽게 앱을 개발할 수 있다.

3. HTML, CSS, JS를 사용한 Web Application 형태로 제작할 수 있기 때문에 웹 개발자도 쉽게 앱을 만들 수 있다.

4. 앱을 만드는데 필요한 도구들(에뮬레이터, 인증서 등)을 각각의 Manager 프로그램 형태로 제공하여 관리하기 편리하다.

 

 

1. https://ko.wikipedia.org/wiki/%ED%83%80%EC%9D%B4%EC%A0%A0 참조 [본문으로]
2. http://monthly.appstory.co.kr/plan8408 [본문으로]
3. http://news.chosun.com/site/data/html_dir/2017/05/18/2017051801097.html [본문으로]
4. https://www.tizen.org/ko/about [본문으로]