[Tizen] #2 Hello World Application

 뭔가를 배울 때는 실습을 해보는게 최곱니다. 오늘은 Hello World을 출력시키는 기본적인 프로그램을 짜보도록 하겠습니다. 이 과정에서 Web 시뮬레이터를 쓰는 방법과 기본적인 Tizen Web App의 골격도 함께 배우게 될 것입니다. 여기에 있는 내용은 기본적으로 Tizen Documentation 에 있는 것들을 제가 쉽게 설명하는 것이니 혹시 제가 부족한 면이 있다면 여기를 참조하시면 됩니다. 

1. 프로젝트 만들기

 #1 에서 설치해 두었던 Tizen IDE (Tizen 개발툴)을 실행시킵니다.  그리고 File > New > Tizen Web Project 을 실행시켜서 아래와 같이 Template > Tizen > Basic > Basic Application 을 선택하고 프로젝트 이름은 HelloWorld로 합니다.

 프로젝트를 만들고 나면 Project Explorer 에 HelloWorld 프로젝트가 만들어졌을 것입니다. 그 프로젝트를 더블클릭 하게 되면 다양한 폴더와 파일들이 보입니다.  몇가지를 설명하자면 다음과 같습니다.

• css folder: CSS 파일을 담는 폴더입니다. 
• js folder: JavaScript 파일을 담는 폴더입니다.
• config.xml file: 우리의 앱을 위한 환경설정 파일입니다.
• icon.png file: 우리의 앱의 아이콘 이미지 파일입니다.
• index.html file: 기본적인 HTML 문서 파일입니다.

 여기서 CSS, JavaScript 그리고 HTML은 웹언어입니다. Tizen Web App을 만들기 위해서는 이 언어들을 어느 정도 이해하고 있어야 합니다. 아주 쉬운 언어들이기 때문에 금방 배우실 수 있을 것입니다. 또한 Tizen Web App을 만들어가면서 모르는 부분들을 골라가며 배우는 것도 좋은 방법이기에 저 언어들을 완벽하게 익힌 다음에 Tizen Web App을 만들기 보다는 Tizen Web App을 배워가다가 모르는 부분을 배우는 것이 효율적일 것입니다. 이 언어들을 W3School 사이트에서 잘 설명해 놓았기에 모르는 부분이 있거나 상세히 배우고 싶으신 분들은 참고하시길 바랍니다.

2. Simulator 시동

 프로젝트 생성이 완료되었으면 Tizen에서 이미 만들어 둔 Basic Application 을 실행시켜 보도록 하겠습니다. 먼저 프로젝트에 있는 코드를 Build 해야 합니다. Build는 자동/수동으로 선택이 가능합니다. 상단에 Project > Build Automatically 를 선택하게 되면 자동으로 빌드를 하게 됩니다. 반면 Project > Build Project 를 선택하시게 되면 Build가 시작됩니다. 빌드가 되면 Run > Run As > Tizen Web Simulator Application 을 선택하게 되면 Simulator가 실행됩니다.

 Simulator를 실행 전에 주의해야할 점이 있습니다. Tizen Web Simulator는 Google Chrome을 기반으로하고 있습니다. 그래서 Tizen Web Simulator를 실행하기 위해서는 Chrome Browser가 설치되어 있어야 합니다. 없으신 분들은 Google Chrome 을 다운 받으셔서 설치 해 주세요.

 그러면 다음과 같은 장면을 보시게 될것입니다. 

여기서 상단의 주소를 보시게 되면 ......./HelloWorld/index.html 라고 되어 있을 것입니다. 여기서 HelloWorld는 우리가 만들었던 프로젝트 이름이고 index.html은 App이 실행될 때의 가장 첫 화면을 의미합니다. 그럼 다른 프로젝트를 실행할 때는 HelloWorld 부분만 바꿔도 실행이 되겠죠. 

3. Hello World 찍어보기

 자, 이제 화면에 Hello World를 찍어보도록 하겠습니다. 프로젝트에서 index.html을 보도록 하겠습니다. 그럼 코드가 주르륵 나오게 될텐데요. 조금 전에 index.html은 첫 화면을 의미한다고 제가 말씀을 드렸습니다. 화면이란 것 눈에 보이는 거죠. html 파일은 실행하기 전에 미리 보기가 가능합니다. 코드가 있는 화면에서 마우스 오른쪽 클릭 > Open With > Web SDK HTML Editor 선택하시게 되면 미리보기 화면과 코드가 동시에 출력됩니다.

 이 때 우리는 Application Name이란 곳을 Hello World로 바꿔 보겠습니다. 다음의 화면을 보죠.

미리 보기 화면에서 아이콘 옆에 있는 Applicaton Name을 클릭합니다. 그러면 거기에 맞는 코드가 오른쪽 코드 화면에 보이게 됩니다. 그럼 출력된 Application Name을 Hello World 로 바꿔서 다시 Simulator를 실행하게 되면...

 성공! 오늘은 Simulator와 기본적인 Web App의 구조에 대해서 알아봤습니다. 그럼 좋은 하루 되세요