Tizen Web Project 의 생성부터 빌드, 실행, 디버깅 방법을 알아보자.


Tizen 2.0 Magnolia SDK 기준 환경으로 설명하겠다.


1. Tizen Web 프로젝트 생성 방법

  • Tizen Web IDE > File > New > Tizen Web Project 클릭.
  • 클릭하면 다음과 같은 New Tizen Web Project Wizard 가 나타난다.
  • Eclipse 답지않게 Tab 으로 카테고리가 분류되어있다.
    • Template
      • Basic
        • 기본 WebApp 구성 파일(html, css, javascript file)로 이루어진 프로젝트 Template
      • Tizen Web UI Framework
        • jQuery Mobile 을 확장한 Winset 을 가지고 있는 UI Framework 를 사용한 프로젝트 Template 로 Tizen Web UI Builder 프로젝트를 선택하면 UI Builder 로 디자인 구성이 가능하다.
          • Single-Page Application
          • Multi-page Application
          • Master-Detail Application
          • Navigation Application
      • jQuery Mobile
        • jQuery Mobile Framework 를 탑제하여 구성된 프로젝트 Template
          • Single-Page Application
          • Multi-page Application
          • Master-Detail Application
          • Navigation Application
      • Tizen Web UI Builder
        • Tizen Web UI Framework 을 사용하여 UI Builder 로 디자인을 직관적이고 편하게 할 수 있는 프로젝트
          • Single-Page Application
          • Multi-page Application
          • Master-Detail Application
          • Navigation Application
    • Sample
      • 기본 WebApp Template 이 아닌 Tizen Device API 를 이용한 Sample 및 고품질의 WebApp Sample 등의 다양한 프로젝트를 생성 할 수 있다.
      • 일부 Sample 들은 다음에서 더 자세히 알아볼 수 있다.
    • User Template
      • 사용자가 작성한 템플릿으로부터 프로젝트를 생성 할 수 있다.
      • User Template Guide
  • Basic 프로젝트를 생성해보자.
  • 생성되면 다음과 같은 파일구조의 Web 프로젝트가 생성된다.
    • config.xml
      • W3C 의 Widget 의 스펙을 충족하는 Web Application 의 상세 설정 파일
    • index.html
      • 기본 html 파일(entry point)
    • style.css
      • style 을 정의할 수 있는 기본 css 파일
    • main.js
      • 기본 javascript 파일


2. Tizen Web 프로젝트 빌드 방법

  • 프로젝트를 생성한 뒤에 내용을 수정하고 빌드를 해서 wgt 라는 확장자를 가지는 위젯을 만들어야 한다.
    • wgt 라는 확장자를 가지는 위젯은 W3C 의 스펙으로, 프로젝트를 묶은파일이다.
  • 빌드를 하는 방법은 다음 2가지 방법이 있다.
    • Project > Build Project 를 체크하면 Save 시에 항상 빌드를 한다.
    • 수동으로 빌드를 하고싶을경우에는 Project 의 Root 폴더에서 마우스 우클릭 > Build Project
  • 빌드가 끝나면 다음과 같이 wgt 확장자를 가진파일이 생성되고, 이파일을 열어보면 현재 프로젝트의 내용들이 묶여있는것을 볼 수 있다.


3. Tizen Web 프로젝트 실행 방법

  • 왼쪽 하단의 Connection Explorer 의 Emulator Manager 버튼을 클릭하자.
  • Emulator Manager 의 tizen-2.0 > x86-standard 의 <<create new... >> 부분을 클릭하고 우측 아래의 Create 버튼을 누른다.
  • 이후 Name 에 Emulator 의 이름을 입력한다.
  • Confirm 버튼을 누르면 애뮬레이터가 생성된다.
  • 우측 하단의 Launch 버튼을 누르면 애뮬레이터가 실행된다.

  • 애뮬레이터가 실행되면, 해당 애뮬레이터가 Connection Explorer 에 나타난다. 이곳에서 애뮬레이터 내부의 파일 구조를 탐색하거나 파일에 대해 push/pull 을 할 수 있다.
  • 애뮬레이터를 생성한 뒤에 실행할 프로젝트에서 마우스 우클릭 또는 Run 메뉴에서 해당 프로젝트를 실행 한다.
    • Tizen Web Application 으로 실행 하면 애뮬레이터에서 실행되고, Tizen Web Simulator Application 으로 실행하면 크롬기반의 Web Simulator 에서 실행이 된다.


4. Tizen Web 프로젝트 디버깅 방법

  • Tizen Web 프로젝트를 디버깅 하는 방법을 알아본다. 
  • 기본적인 동작은 Debug As 로 실행하는 것외에 Run 과 동일하다. 
  • Debug As > Tizen Web Application 을 수행하면, 현재 Connection Explorer 에 선택되어 있는 애뮬레이터 혹은 디바이환경에서 디버깅이 수행되게 된다.
  • 디버깅은 크롬기브라우져위에서 Remote Web Inspector 로 수행된다.
    • 기본적인 조작법은 Chrome Web Inspector 의 조작법과 동일하다.


Posted by leechwin