이전 글을 통해서 Tizen SDK 설치와 IDE 실행하는 것을 알아봤습니다.
프로젝트를 하나 생성하고 기본으로 제공되는 템플릿들을 이용해 간단한 앱을 만들어 보고, Tizen 에뮬레이터에서 실행시켜 보겠습니다. Tizen 에뮬레이터가 어떤 UI와 기본 앱들을 제공하고 있을지 궁금해 집니다.
1. New Project 생성
IDE의 Project Explorer 창에 오른쪽 클릭하여 새로운 Tizen Web Project 생성합니다.
기본적으로 제공하는 템플릿을 선택할 수 있는 화면입니다.
Tizen의 Web UI Framework을 선택하면 화면 스타일에 따른 세부 어플리케이션을 선택할 수 있습니다. 가장 오른쪽에 미리보기 화면이 보이고, 탭 형식의 Master-Detail Application을 선택해 보겠습니다.
Project name을 임의로 입력하고 finish 버튼을 클릭하여 프로젝트를 생성합니다.
Tizen Web UI 이외에도 유명한 모바일 자바스크립트 라이브러리인 jQuery Mobile을 기본 템플릿으로 제공하고 있고, Web Presentation에는 CoderDeck이라는 라이브코딩이 가능한 슬라이드 템플릿을 제공합니다.
2. 생성된 프로젝트
Tizen Web UI 프로젝트가 생성되면 다음과 같이 창들이 배열됩니다. (이미지를 클릭하시면 크게 보실 수 있습니다.)
화면 구성은 크게 왼쪽, 중간, 오른쪽의 세 부분으로 나눠집니다.
왼쪽 부분에는 프로젝트의 파일들을 볼 수 있는 Project Explorer 창과 에뮬레이터를 관리하는 Connection Explorer 창이 보여집니다.
중앙의 Edit 창은 WYSIWYG 방식으로 Palette 에서 원하는 요소을 드래그하여 왼쪽의 디자인 화면에 드랍할 수 있는 웹페이지 생성하는 UI를 제공합니다. 오른쪽의 소스 화면에서는 실시간으로 변경되는 소스 내용을 볼 수 있습니다.
오른쪽 부분에는 파일 트리를 보여주는 Outline창과 Html preview창을 보여줍니다.
잠시 템플릿 소스를 살펴보니 Tizen Web UI Framework은 jQuery를 기반으로 작성되 있음을 알 수 있습니다.
웹페이지의 페이지 구성과 탭에 이용된 그리드 구성들을 보면 jQuery Mobile과 많이 비슷합니다.
이렇게 웹 기술들을 이용해서 Tizen App을 만들 수 있으니 상당히 좋은 일입니다.^^
3. 에뮬레이터 등록 및 실행
기본 템플릿으로 간단한 프로젝트가 만들어 졌으니, Tizen 에뮬레이터를 등록하고 앱을 설치 및 실행 해보겠습니다.
Connection Explorer 창의 첫번째 아이콘인 Emulator manager를 클릭합니다.
에뮬레이터를 설정할 수 있는 새로운 창이 보여집니다.
기본으로 등록되어 있는 480x800 크기의 default 항목을 클릭하고 오른쪽 아래의 start 버튼을 클릭하면 에뮬레이터가 시작하게 됩니다. 안드로이드만큼은 아니지만 오랜 시간 로딩을 하니 인내심을 가지고 기다리면 Tizen의 모습을 볼 수 있게 됩니다.
실행된 Tizen의 화면
4. Application 설치 및 실행
생성한 프로젝트를 Tizen Web Application으로 run 하면, 해당 프로젝트 파일들을 빌드하고 에뮬레이터에 설치됩니다. 프로젝트 이름을 선택하고 오른쪽 클릭 - run as - Tizen Web Application 항목 클릭합니다.
에뮬레이터가 뜨면서 IDE 하단의 log탭을 보면 실행되는 로그들을 볼 수 있습니다.
App 설치가 완료되면, 에뮬레이터에 Tizen의 기본 아이콘으로 앱이 추가됩니다.
5. App 실행
프로젝트 이름의 앱을 클릭하여 실행하면, Tizen Web UI 템플릿으로 만들어진 화면을 볼 수 있습니다. 에뮬레이터가 메모리를 많이 차지하니 개발 PC의 메모리가 4G 이상은 되어야 안정적으로 돌아갈 것 같습니다. 최소 권장 사양이 2G인데 좀 힘들지 않나 생각되네요.
에뮬레이터에서 이런 저런 기본 앱들을 사용해보니 안드로이드와 아이폰을 사용해본 분들이라면 익숙하게 금방 적응할 수 있을 것 같습니다. 아직 초기 베타 버젼이라 앞으로 달라질 수 있겠지만요.
앞으로 기대가 많이 됩니다.
'----- IT ----- > Tizen' 카테고리의 다른 글
타이젠 2.0 스마트폰 공개 (3) | 2013.04.18 |
---|---|
Tizen beta 설치 하기 (원도우) (0) | 2012.03.05 |
새로운 플렛폼 Tizen 소개 (1) | 2012.02.27 |
댓글