web application이란 무엇인가?

• appliccation이란?
• web application이란?
• webOS 애플리케이션의 LifeCycle
• webOS 애플리케이션의 로컬라이징
• webOS 애플리케이션 / JS서비스 구조
• application 패키지란?
• 다양한 패키지 타입
• 본격적인 webOS web app 개발에 앞서

 

appliccation이란?

---

1.  application 정의

한국말로 응용 소프트웨어, 간단하게는 흔히 알고있는 app(앱)이라고 부릅니다. 

넓은 의미	운영체제에서 실행되는 모든 소프트웨어	워드프로세서, 컴파일러, 링커 등
좁은 의미	운영체제 위에서 사용자가 직접 사용하는 소프트웨어	워드프로세서, 미디어 플레이어 등

(컴파일러, 링커 등은 시스템 소프트웨어라 좁은 의미로 보면 제외할 수 있습니다.)

 

 

2. application의 종류 

설치되는 용도나 형태에 따라 application을 분류해볼 수 있습니다.

 

1) 설치되는 형태 & 개발 방법에 따라

• 웹 애플리케이션
  • 브라우저 내에서 실행하므로 앱을 따로 다운로드받지 않아도 됩니다.
  • 비용, 개발 기간이 적게 드는 장점이 있습니다.
• 네이티브 애플리케이션 
  • 기기에 직접 다운로드하여 사용합니다.
  • 운영체제와 직접 통신하므로 운영체제 별로 플랫폼이 필요합니다.

(아래는 블로그 다른 주제에서 다룬 web/native 앱의 차이점입니다.)

2) 설치되는 용도

• 모바일용 애플리케이션 : 모바일에서 사용 가능한 애플리케이션
• TV용 애플리케이션 : TV에서 사용 가능한 애플리케이션으로, 형식은 모바일과 유사합니다.

 

 

web application이란?

---

1.  web application 정의

다운로드 받지 않고, 인터넷이나 인트라넷을 통해 웹 브라우저 위에서 이용할 수 있는 응용 소프트웨어(app)입니다.

 

• web application의 장점

1. 수 많은 PC에 소프트웨어를 배포하여 설치하지 않아도 웹 애플리케이션을 유지 관리할 수 있습니다.
2. 웹 메일, 온라인 전자상거래 및 경매, 인터넷 게시판, 블로그, 게임 등 다양한 기능을 구현할 수 있습니다.
3. 웹 표준언어(ex. HTML5)로 제작하여 호환성, 비용면에서 좋습니다.

 

2.  web application 구성요소

웹 애플리케이션은 아래와 같은 계층으로 구축됩니다.

출처: 클립소프트

1) 웹 브라우저 (WEB Browser)

: 사용자가 요청한 웹 서버의 결과를 보여주기 위한 애플리케이션입니다.

IP주소를 웹 서버에 접속 요청보냅니다.

• 크롬, 파이어폭스, IE 등

 

2) 웹 서버 (WEB Server)

: 웹 브라우저의 요청에 대한 결과를 응답해주는 기능을 하며, 정적인 페이지(.html, .jpeg, .css 등) 처리해주는 역할을 합니다.

• Apache(아파치), Nginx, IIS 등

 

3) 웹 애플리케이션 서버 (WAS)

: 웹 서버만으로 할 수 없는 데이터베이스 조회, 다양한 로직처리와 같은 동적인 페이지를 처리합니다.

• Tomcat(톰캣), Jeus ,웹로직, Web Sphere(웹 스파이어) 등

 

4) 데이터베이스 (DB)

: 데이터를 저장하는 저장소

 

3. external / built-in web app

• external web app (외장 웹 앱)
  • 웹OS 대상 기기에 설치해야 하는 서드파티 웹 앱입니다.
  • webOS OSE의 SDK에서 제공하는 CLI를 사용하여 생성하고 배포할 수 있습니다. 

(CLI에 대한 설명은 이전 포스팅에서 자세히 다뤘습니다.)

 

*서드파티: 하드웨어 생산자와 직접적인 관계없이 소프트웨어를 개발하는 회사, 또는 앱이 모여있는 온라인 스토어와 사용자를 기준으로 애플리케이션 제작자를 서드파티라고 한다.

 

앱 만들기 단계 :

1. 생성: 이용가능한 웹 앱 템플릿을 이용하여 웹 앱 생성

2. 구현 (built-in 과정과 동일): 소스코드 작성

3. 구성: app metadata file (appinfo.json) 구성

4. 패키징: IPK 파일로 패키징

5. 설치: 대상 장치에 웹 앱을 설치

6. 시작: 대상 장치에서 웹 앱을 시작

• built-in web app (내장 웹 앱)
  • built-in web app을 생성하려면 소스 코드를 작성하고 필요한 구성 파일을 준비해야 합니다.
  • HTML, CSS 및 JavaScript로 웹 앱 코드 작성합니다.

 

앱 만들기 단계 : 

1. 구현: 소스코드 작성 및 프로젝트를 설명하는 README.md 준비

2. 구성: app metadata file (appinfo.json),  CMake build script (CMakeLists.txt) 구성

3. 빌드: Yocto 빌드 환경에서 앱을 빌드하기 위한 레시피 작성

로컬 소스 디렉토리 구성 및 앱 빌드

4. 실행 및 확인: 대상에 앱 설치 및 실행, 앱 기능 확인

5. 배포: webOS OSE 빌드 레시피에 앱 추가 

webOS OSE 이미지 빌드 및 이미지를 대상에 전송

 

 

 

webOS 애플리케이션의 LifeCycle

---

1. LifeCycle이란?

web application 의 LifeCycle 이란 : web application은 사용자와의 상호 작용 또는 시스템 이벤트에 의해 시작, 일시 중단 또는 종료 될 수 있습니다. LifeCycle 이란 즉, 이런 과정이 포함된 앱의 실행부터 종료까지의 주기를 말합니다.

web application는  Not Launched , Launched (Foreground), Suspended (Background) 이 세 가지의 상태의 주기를 가집니다.

 

2. webOS 애플리케이션의 LifeCycle 상태

• Not Launched : 웹 앱이 실행되지 않았거나 종료된 상태입니다.

 

• Launched : 웹 앱이 백그라운드에서 실행되고 이벤트 ( webOSRelaunch, visibilitychange)를 수신합니다. 앱은 언제든지 종료되거나 일시 중지 될 수 있는 상태입니다.

 

• Suspended : 웹 앱이 백그라운드에서 일시 중지되고 이벤트 ( webOSRelaunch, visibilitychange)를 수신 대기하는 상태입니다.

 

webOS 애플리케이션의 로컬라이징

---

1. localization이란?

localization(이하 i10n)은 구체적인 언어와 locale로 적용시키는 과정입니다.

쉽게 말해, UI/UX를 지역에 맞도록 변경하는 작업입니다.

 

• 세계 각지의 많은 사용자들을 위해, app과 서비스를 다양한 언어로 제공해야합니다. 이를 위한 것이 internationalization(국제화)와 localization(현지화)입니다.
• localization의 첫 글자 l과 끝 글자 n을 제외한 글자수가 10자이기 때문에, l10n으로 표현하기도 합니다. 덧붙여, internationalization 국제화 같은 경우 i18n으로 표현합니다.
• internationalization(이하 i18n)은 다양한 언어/지역에 적용할 수 있도록 현지화 할 앱 콘텐츠를 준비하는 과정입니다.
• localization(이하 i10n)은 구체적인 언어와 locale로 적용시키는 과정입니다. 쉽게 말해, UI/UX를 지역에 맞도록 변경하는 작업입니다. 
• Locale이란, 지역/국가별로 선택할 수 있는 언어, 문자, 화폐 표시, 시간 등의 정보를 국제화와 지역화를 통해 어떻게 표시할 지 정의한 매개변수의 모음입니다.
• "Language”, “Script”, “Country/Region”의 조합으로 정의됩니다. (BCP 47 표준)
  ex) en-US, ko-KR, mn-Cyrl, mn-MN, mn-Cryl-MN, mn-Mong-CN

 

2. webOS 애플리케이션의 소스 로컬라이징

국제화가 끝나면, 앱과 서비스들은 현지화 될 준비를 마친 것입니다. 

 

• 현지화 툴을 사용하여 현지화 가능한 부분을 코드에서 추출하고, 추출한 파일들을 번역팀이 다양한 언어와 locale로 번역합니다.
• 번역된 파일에서 앱 및 서비스에 대한 문자열 리소스를 얻을 수 있고, 현지화 툴을 사용하지 않고 수동으로도 문자열 리소스를 작성할 수 있습니다.
• 문자열 리소스를 수동으로 생성하는 경우, 앱/서비스의 프로그래밍 언어에 대한 특정한 형식(리소스 포맷)을 따라야합니다.

현지화 툴을 설치하고 사용하는 구체적인 방법은 생략하고 (이후 본격적인 개발에서 다룰 예정) 이 리소스 포맷에 대해 간단히 다뤄보겠습니다.

 

• JavaScript
  • iLib 라이브러리를 사용합니다.
  • JSON 형태의 strings.json 파일로 구성되어 있습니다.
  • 위치는 appinfo.json과 동일합니다.

{

  "String 1": "Translation 1",

  "String 2": "Translation 2"

}

 

• C/C++
  • libwebosi18n 라이브러리를 사용합니다.
  • JavaScript와 같이 JSON 형태의 스트링 리소스를 생성합니다. 
  • JSON file명을 마음대로 설정해도 되지만, C++의 경우 cappstrings.json, C의 경우 cstrings.json을 많이 쓰고, 추천합니다.
  • 위치는 appinfo.json 과 동일합니다.

JS, C/C++, QML의 리소스 포맷에 대한 더 자세한 설명을  https://www.webosose.org/docs/guides/development/localization/applying-localization/#javascript 에서 찾아볼 수 있습니다.

 

 

 

webOS 애플리케이션 / JS서비스

---

JS service는 애플리케이션이 실행되고 있지 않을 때도 앱이 작동하는 방법을 제공합니다.  

1. JS Service의 특성과 예시

webOS OSE 위에서 일반적인 JS service의 특성은 다음과 같습니다.

• 특성
  • JavaScript로 작성되고 Node.js로 생성됩니다.
  • 백그라운드에서 실행됩니다.
  • low-level 네트워킹, 파일 시스템 액세스 및 이진 데이터 처리 같은 플랫폼 특성에 대한 접근을 가능하게 합니다.
  • 이러한 기능은 일반적으로 웹 앱에서 사용할 수 없는 것들입니다.
  • 하나 이상의 앱에 대한 작업을 수행합니다. 

• 예시
  • 이메일을 읽어오기 위해 백그라운드에서 첨부파일 다운로드
  • 앱에서 사진 공유 사이트로 이미지 업로드 등

 

2. JS Service의 종류

• External JS Service : 외장 JS Service
  
  • webOS 타겟 장치에 설치
  • 써드파티 개발자가 webOS 장치에서 실행되는 JS service를 만드는 것을 돕는 JS service
• Built-in JS Service : 내장 JS Service
  • 플랫폼 개발자가 webOS 장치에서 실행되는 JS Service를 만드는 것을 돕는 JS Service

 

application 패키지란?

---

1. application 패키지란

소프트웨어나 애플리케이션, 데이터의 “배포판“입니다. 애플리케이션을 구성하는 파일들(메타파일, 실행파일, 아이콘, Readme 등)이 포함됩니다.

 

2-1. 메타파일

메타파일은 다른 파일을 설명하거나 정의하는 정보를 담고 있는 파일입니다. WebOS web application 의 메타파일은 webOS 애플리케이션의 메타파일 포스트에서 자세히 다루고 있습니다.

 

2-2. 실행파일

실행파일이란 단순히 데이터만 담고 있는 파일과 달리 코드화된 명령에 따라 지시된 작업을 수행하도록 하는 컴퓨터 파일을 말합니다. exe파일이라고도 하며 파일의 이름은 filename.exe 의 형식으로 이루어져 있습니다.

실행 파일의 이름은 메타 파일 services.json의 name속성에 의해 결정됩니다.

 

2-3. 아이콘, Readme

아이콘이란 앱에 표시되는 이미지입니다. section3(webOS 애플리케이션의 메타파일)의 appinfo.json에 자세한 설명이 있습니다.

ares-generate -t icon

위의 명령어를 통하여 앱 아이콘 파일[80x80]을 생성할 수 있습니다. 

 

Readme 파일(=README.md 파일)이란 기본 앱의 일반 정보를 제공합니다.

Summary 가 한 줄이어야 성공적으로 빌드합니다.

Description 위의 줄에있는 공백도 Summary의 일부로 간주되어 빌드가 실패 할 수 있어 주의해야 합니다.

 

다양한 패키지 타입

---

1. 운영체제에 따른 다양한 패키지 타입

서로 다른 운영체제에서는 각각 다른 패키지 타입이 존재합니다.

•  iOS – IPA 패키지, Android – APK 패키지,  우분투 – DEB 패키지와 RPM 패키지, 심비안 – SIS와 SISX 패키지

webOS 의 패키지 타입 : IPK 패키지

 

2.  IPK 패키지 소개

IPK 패키지란?

Open Source가 개발한 IPK 파일 확장자로 Itsy Package 파일로도 잘 알려져 있습니다. IPK 파일은 파일 이름이 .ipk로 끝나며 WebOs 의 web application의 실행 및 확인을 위해 IPK가 필요합니다.

또한 API com.webos.appInstallService의 개발과 설치를 위해 IPK 파일 설치가 필요합니다.

 

본격적인 webOS web app 개발에 앞서

---

1. web app framework :Enact

• webOS OSE는 webOS OSE에 최적화된 리액트 기반 애플리케이션 프레임워크인 Enact를 제공합니다.

 

• Enact의 장점
  • react 기반으로, 사용하기 쉽습니다.
  • 애플리케이션의 크기와 복잡성이 증가하더라도 성능을 유지할 수 있습니다.
  • 조율, 수정 가능한 위젯 세트를 가지기 때문에, 사용자 입맛에 맞춘 위젯으로 다양한 앱 구성과 표현이 가능합니다.
  • 임베디드 웹 플랫폼을 위한 네이티브 품질 애플리케이션을 생산할 수 있습니다. 이는 자동차, 로보틱스, TV 등에 사용됩니다.

→ 사용 분야에 대한 자세한 설명은 https://enactjs.com/uses 참고바랍니다!