KR101416096B1

KR101416096B1 - 하이브리드 웹 어플리케이션 개발을 위한 호환성 높은 플러그인 시스템

Info

Publication number: KR101416096B1
Application number: KR1020120086024A
Authority: KR
Inventors: 신기루; 도창욱
Original assignee: 인크로스 주식회사
Priority date: 2012-08-07
Filing date: 2012-08-07
Publication date: 2014-07-14
Also published as: KR20140021088A

Abstract

본 발명은 원본 플랫폼의 API와 기능을 다양한 대상 플랫폼에서도 동일한 규격으로 기능을 제공할 수 있도록 하며, 또한 원본 플랫폼에서 제작된 플러그인을 수정하지 않고 대상 플랫폼에서 동작할 수 있도록 하여 새로운 규격이나 API에 대한 지식 습득 부담을 발생시키지 않도록 하며, 또한 다양한 플랫폼을 대상으로 한 플러그인의 유지보수를 용이하게 할 수 있도록 하는 하이브리드 웹 어플리케이션 개발을 위한 호환성 높은 플러그인 시스템에 관한 것이다.

Description

하이브리드 웹 어플리케이션 개발을 위한 호환성 높은 플러그인 시스템{A HIGHLY COMPATIBLE PLUG-IN SYSTEM FOR DEVELOPING HYBRID WEB APPLICATIONS}

본 발명은 하이브리드 웹 어플리케이션 개발을 위한 호환성 높은 플러그인 시스템에 관한 것으로, 더욱 상세하게는 원본 플랫폼의 API와 플랫폼의 기능을 다양한 대상 플랫폼에서도 동일한 규격으로 기능을 제공할 수 있도록 에뮬레이션 함으로써, 원본 플랫폼에서 제작된 플러그인을 수정하지 않고 대상 플랫폼에서 동작할 수 있도록 하며 새로운 규격이나 API에 대한 지식 습득 부담을 발생시키지 않고 다양한 플랫폼을 대상으로 한 플러그인의 유지보수를 용이하게 할 수 있도록 하는 플러그인 시스템에 관한 것이다.

일반적으로 하이브리드 웹(Web) 또는 앱(App)은 웹 서비스를 모바일 앱에서 이용 가능하게 하는 것으로써 기존 어플리케이션 및 OS와 이들을 포함하면서 정보 플랫폼으로 진화해 가는 웹이 공존하는 현상을 말하며, 콘텐츠를 여러 모바일 플랫폼에서 쓸 수 있는 모바일 웹 기반 구현방식과, 모바일 기기의 고유한 특성을 극대화할 수 있는 모바일 어플리케이션 개발 방식을 절충하는 것이다. 다시 말해 일반적인 어플리케이션 내부에 자바 스크립트, HTML5, CSS3 등의 웹 기술을 적용해 정보를 다루는 개발방식을 도입한 것을 하이브리드 웹 또는 하이브리드 앱이라고 한다.

상기와 같이 하이브리드 웹 또는 앱(이하, 하이브리드 웹 앱 이라고 함)은 웹의 기술을 통하여 내부구조와 사용자 인터페이스를 구현하고, 카메라나 단말기의 센서 조작 등, 웹 기술이 지원하지 않는 모바일 기기의 기능은 앱(App)으로 구현시켜 개발되는 어플리케이션으로서, 전반적인 데이터가 웹 상에 존재하기 때문에 웹과 동일하게 실시간 업데이트가 가능한 장점이 있으며, 웹에 대한 지식만으로도 관리가 가능하기 때문에 운영적인 측면에서도 매우 효율적인 장점이 있어 최근에 활용도가 증가하고 있는 상황이다.

현재 하이브리드 웹 앱은 다양한 네이티브 기능을 활용하기 위해 플러그인 방식을 사용한다. 기존에는 특정 플랫폼에서의 실행을 목적으로 해당 플랫폼의 규격과 플랫폼 API를 사용하여 제작한 플러그인을 이종 플랫폼에서 실행하기 위해서는 기존에 작성된 원본 소스를 재사용하지 못하고 기 사용중인 원본 플랫폼의 API를 대상 플랫폼의 API를 사용하도록 수정하고 대상 플랫폼의 이벤트, 그래픽, 네트워크, 사운드, 타이머등의 규격에 맞춰 원본 플랫폼에 종속적인 소스 코드를 제거하고 대상 플랫폼에 맞춰 재개발해야 했다.

이는 유사한 기능을 제공하는 플랫폼들임에도 불구하고 각 플랫폼의 API 규격의 차이에 의한 문제로서 다양한 플랫폼을 대상으로 플랫폼의 기능을 사용하여 포팅하고 있다. 하지만, 이러한 방법은 이종 플랫폼에서의 호환 서비스를 제공할 수 없다는 문제점이 있으며 플러그인의 개발을 위해 독자 API에 대한 이해와 새로운 대상 플랫폼의 규격에 대한 개발 지식 습득이 필요하다는 문제점이 있다.

본 발명은 상기와 같은 문제점을 해결하기 위해 창작된 것으로서, 원본 플랫폼의 API와 기능을 다양한 대상 플랫폼에서도 동일한 규격으로 기능을 제공할 수 있는 하이브리드 웹 어플리케이션 개발을 위한 호환성 높은 플러그인 시스템을 제공하는데 그 목적이 있다.

또한 본 발명은 원본 플랫폼에서 제작된 플러그인을 수정하지 않고 대상 플랫폼에서 동작할 수 있도록 하여 새로운 규격이나 API에 대한 지식 습득 부담을 발생시키지 않도록 하는 하이브리드 웹 어플리케이션 개발을 위한 호환성 높은 플러그인 시스템을 제공하는데 그 목적이 있다.

또한 본 발명은 다양한 플랫폼을 대상으로 한 플러그인의 유지보수를 용이하게 할 수 있는 하이브리드 웹 어플리케이션 개발을 위한 호환성 높은 플러그인 시스템을 제공하는데 그 목적이 있다.

본 발명의 일 측면에 따른 하이브리드 웹 어플리케이션 개발을 위한 호환성 높은 플러그인 시스템은 다양한 대상 플랫폼들의 기능을 정의한 가상 플랫폼; 상기 가상 플랫폼에 대한 API와 자료구조를 갖는 크로스 플랫폼 코어 계층 라이브러리; 및 상기 크로스 플랫폼 코어 계층 라이브러리를 다양한 타겟 디바이스에 적용하기 위한 플랫폼별 타겟 라이브러리를 포함하고 있는 크로스 플렛폼 타겟 계층 라이브러리;를 포함하여 구성되고, 상기 크로스 플랫폼 코어 계층 라이브러리와 플랫폼별 타겟 라이브러리는 정적 라이브러리 형태로 생성되며, 상기 플러그인을 원하는 소스 코드를 타겟 디바이스의 플랫폼에 맞게 변환하기 위하여 상기 크로스 플랫폼 코어 계층 라이브러리와 상기 타겟 디바이스에 해당하는 타겟 라이브러리를 링크시키는 링커;를 더 포함하여 구성되고, 상기 링커는 상기 크로스 플랫폼 코어 계층 라이브러리와 상기 타겟 디바이스에 해당하는 타겟 라이브러리에 상기 소스 코드를 링크하여 대상 플랫폼의 실행 바이너리를 생성하며, 상기 가상 플랫폼에 크로스 플랫폼 코어 계층 API를 기반으로 원본 플랫폼의 API를 에뮬레이션 할 수 있는 플랫폼 변환 라이브러리;를 더 포함하여 구성되고, 상기 크로스 플랫폼 코어 계층 라이브러리는 다양한 대상 플랫폼의 자료구조를 합집합 형태로 포함하는 자료구조를 가지며, 또한 다양한 대상 플랫폼에 적용할 수 있는 API 형태로 구성된 것을 특징으로 한다.

본 발명의 일 측면에 따른 하이브리드 웹 어플리케이션 개발을 위한 호환성 높은 플러그인 방법은 다양한 대상 플랫폼들의 기능을 정의한 가상 플랫폼을 정의하는 제1 단계; 상기 가상 플랫폼에 대한 API와 자료구조를 갖는 크로스 플랫폼 코어 계층 라이브러리를 생성하는 제2 단계; 상기 크로스 플랫폼 코어 계층 라이브러리를 다양한 타겟 디바이스에 적용하기 위한 플랫폼별 타겟 라이브러리를 생성하는 제3 단계; 및 상기 크로스 플랫폼 코어 계층 라이브러리와 상기 타겟 라이브러리에 소스 코드를 링크하여 원하는 타겟 디바이스의 플랫폼에 맞게 변환시키는 제4 단계;를 포함하여 구성되며, 상기 크로스 플랫폼 코어 계층 라이브러리와 플랫폼별 타겟 라이브러리는 정적 라이브러리 형태로 생성되고, 상기 제4 단계는 다양한 플랫폼별 타겟 라이브러리 중 원하는 타겟 디바이스에 해당하는 플랫폼의 타겟 라이브러리를 선택하여 소스 코드를 링크시키고, 상기 크로스 플랫폼 코어 계층 라이브러리와 상기 타겟 라이브러리에 소스 코드를 링크하여 대상 플랫폼의 실행 바이너리를 생성하는 제5 단계;를 더 포함하여 구성되며, 상기 크로스 플랫폼 코어 계층 라이브러리는 다양한 대상 플랫폼의 자료구조를 합집합 형태로 포함하는 자료구조를 가지며, 또한 다양한 대상 플랫폼에 적용할 수 있는 API 형태로 구성된 것을 특징으로 한다.

본 발명은 원본 플랫폼의 API와 기능을 다양한 대상 플랫폼에서도 동일한 규격으로 기능을 제공할 수 있도록 하며, 또한 원본 플랫폼에서 제작된 플러그인을 수정하지 않고 대상 플랫폼에서 동작할 수 있도록 하여 새로운 규격이나 API에 대한 지식 습득 부담을 발생시키지 않도록 하며, 또한 다양한 플랫폼을 대상으로 한 플러그인의 유지보수를 용이하게 할 수 있도록 하는 효과가 있다.

도 1은 본 발명의 일 실시예에 따른 웹 어플리케이션 저작을 위한 통합 플랫폼의 구성과 동작을 설명하기 위한 개념도.
도 2는 본 발명의 일 실시예에 따른 웹 어플리케이션 저작을 위한 런타임 플랫폼의 구성을 보인 예시도.
도 3은 본 발명의 일 실시예에 따른 웹 어플리케이션 저작을 위한 통합 플랫폼의 런타임 플러그인의 동작을 보인 예시도.
도 4는 본 발명의 일 실시예에 따른 플러그인 시스템을 설명하기 위한 예시도.
도 5는 본 발명의 일 실시예에 따른 플러그인 시스템의 가상 플랫폼을 보인 예시도.
도 6은 본 발명의 일 실시예에 따른 플러그인 시스템을 이용한 특정 소스 코드의 플러그인을 생성하는 과정을 보인 흐름도.

이하, 첨부된 도면을 참조하여 본 발명에 따른 하이브리드 웹 어플리케이션 개발을 위한 호환성 높은 플러그인 시스템의 일 실시예를 설명한다.

도 1은 본 발명의 일 실시예에 따른 웹 어플리케이션 저작을 위한 통합 플랫폼의 전체적인 구성과 동작을 설명하기 위한 개념도이다. 이에 도시된 바와 같이 웹 어플리케이션 저작을 위한 통합 플랫폼은 저작도구(또는 디자인 툴)(100), 스튜디오(200), 런타임 플랫폼(300) 및 UI 프레임워크(400)를 포함하여 구성된다.

본 발명에 따른 통합 플랫폼은 HTML5 기반의 웹 어플리케이션 개발을 위한 토탈 솔루션으로서, 도 1에 도시된 바와 같이, 저작도구(Authoring Tool : AT)(100)와 스튜디오(200)를 포함하여 구성된 통합개발환경(IDE)이라고 할 수도 있다.

여기서 상기 HTML5는 텍스트와 하이퍼링크만 표시되던 기존 웹문서에 오디오, 비디오, 그래픽 등 다양한 응용프로그램까지 구현되도록 진화한 웹프로그래밍 언어를 말한다. 상기 HTML5는 무엇보다 액티브X(마이크로소프트(MS)가 개발한 재사용 가능한 객체지향적인 소프트웨어 구성요소 개발에 사용되는 기술) 등 설치 프로그램이나 모바일 앱스토어(스마트폰에 탑재할 수 있는 다양한 어플리케이션(응용프로그램)을 판매하는 온라인상의 모바일 콘텐츠 장터)에서 앱을 다운받지 않아도 웹에서 동영상, 게임 등을 이용할 수 있으며, IE(인터넷 익스플로러)뿐만 아니라 어떠한 브라우저에서나 쓸 수 있는 특징이 있는 것으로서, 최근에는 HTML5 기반의 기술들이 빠르게 성장하고 있으며, 다양한 3rd 파티 솔루션(예 : 프레임워크/라이브러리)이 선보여지고 있다.

따라서 본 발명에 따른 통합 플랫폼은 웹 어플리케이션의 개발 단계부터 HTML5를 기반으로 개발이 이루어지도록 하며, HTML5 기술을 100% 수용한 개방형 아키텍쳐를 제공함으로써, 3rd 파티 솔루션과의 호환성과 상호연동을 보장할 수 있도록 한다.

또한 상기 통합 플랫폼은 표준 웹 기술(예 : HTML5, CSS3, JS)을 기반으로 원소스 멀티유즈(OSMU : one source multi use, 한 가지 제품이나 개념을 다양한 용도로 사용하는 것)와 N-스크린 서비스(TV나 PC, 태블릿PC, 스마트폰 등 다양한 기기에서 하나의 콘텐츠를 끊김없이 이용할 수 있게 해주는 서비스) 개발을 지원한다. 즉, N-스크린 대응 웹 어플리케이션 개발에 필요한 일련의 과정을 심리스하게 지원할 수 있도록 한다. 또한 상기 런타임 플랫폼(300)과 UI 프레임 워크(400)를 기반으로 OS 단편화, H/W 단편화 및 비즈니스 요구사항을 해결한다.

상술한 바와 같이 본 발명에 따른 통합 플랫폼은 HTML5 기반 웹 어플리케이션의 개발로부터 서비스에 이르는 일련의 프로세스들을 심리스하게 지원하는 통합개발환경으로서, 저작도구(100)와 스튜디오(200)가 심리스하게 인터워킹 함으로써, UI 로직과 비즈 로직(업무관련 비즈니스 로직)의 모듈화된 개발 및 관리를 지원하고, 에뮬레이터, 디버거 및 다양한 하드웨어 프로파일을 지원하는 프로파일러를 제공하여 개발 생산성과 효율을 향상시킨다.

상기 저작도구(100)는 웹 어플리케이션 UI 저작을 위한 도구로서, HTML 언어(특히 HTML5)를 기반으로 UI를 제작할 수 있도록 하며, 사용자의 저작 편이성과 작업의 효율성을 위해 다양한 UI 구성 요소를 편집할 수 있는 편집기들을 제공하고, 상기 각종 편집기들은 UI 구성요소들 각각에 대해 최적화된 편집 기능을 제공하며, 필요에 따라 리스트, 트리 등의 관리 중심 UI, 또는 이미지 형태의 시각화 편집과 아이콘을 통한 직관적 편집을 동시에 제공함으로써, UI(또는 GUI) 레이아웃을 디자인할 수 있도록 하고, 또한 원하는 애니메이션(Animation)과 다양한 효과(Effect)를 디자인할 수 있도록 한다.

이에 따라 기존에 웹 어플리케이션 개발을 위한 솔루션들은 익스포트(Export)된 소스의 수정이 불가능하고, 솔루션에서 제공되는 기능 외에는 사용할 수 없기 때문에(즉, 솔루션에 종속적이기 때문에) 고객의 요구에 따른 기능의 확장이나 커스터마이징(또는 주문 제작)이 불가능하며, 또한 저작단계에서 메타 포맷(meta format)을 이용하기 때문에, 3rd 파티 자바스크립트 라이브러리나 CSS 라이브러리를 적용할 수 없었으나, 본 발명은 고객의 요구에 따라 커스텀 위젯을 자유롭게 추가할 수 있으며, 3rd 파티 솔루션과의 혼용을 지원할 수 있다.

상기 저작도구(100)의 프레임워크는 적어도 하나 이상의 에디터 윈도우로 구성된다. 즉, 상기 저작도구(100)의 에디터 윈도우(또는 에디터 패인)들은 패인(pane, 하나의 윈도우가 여러 개의 윈도우로 분할될 때 그 각각의 윈도우)으로 관리되며, 편집목적에 따라 에디터 패인의 자율배치 기능을 제공한다. 즉, 상기 에디터 패인의 갯수와 위치 및 사이즈는 편집 목적에 따라 개수와 사이즈를 얼마든지 증가하거나 감소시킬 수 있으며, 사용자(개발자)가 원하는 위치에 옮겨 표시하는 것이 가능하다. 여기서 상기 각 에디터 윈도우(또는 에디터 패인)는 하나의 편집기로 동작한다.

상기 저작도구(100)는 디자이너 뷰(또는 뷰 윈도우, 사용자가 편집하는 실제 디자인이 보여지는 뷰포트 윈도우)를 중심으로 모든 에디터가 연계되도록 설정됨으로써 객체 중심의 편집 기능을 제공한다. 이때 상기 디자이너 뷰(또는 뷰 윈도우)에서 위지윅(WYSIWYG) 방식으로 디자인 편집이 가능하다.

상기 저작도구(100)는 UI 내의 개별 화면인 페이지를 생성, 추가, 삭제작업을 할 수 있는 페이지 탐색기인 페이지 브라우저(Page Browser), UI 컨텐츠를 시각적으로 볼 수 있는 작업영역인 뷰포트(컴퓨터 그래픽스(CG)에서 화상을 생성하는 렌더링(rendering) 과정에서 투영 변환한 도형을 실제로 표시하는 윈도우 영역) 에디터(Viewport Editor), 선택한 객체나 구성요소의 다양한 속성을 변경할 수 있는 커스텀 프로퍼티(Custom Properties), 상기 페이지 브라우저 탐색기 창에서 선택한 페이지에 대한 정보를 보여주는 DOM(Document Object Model) 트리 브라우저(DOM Tree Browser) 및 페이지를 꾸밀 수 있는 다양한 위젯(widget)들로 구성되는 컴포넌트 브라우저(Components Browser)를 포함하여 구성한다.

상기 스튜디오(200)는 웹 어플리케이션의 개발을 위한 프로젝트의 생성과 관리를 수행하며, 또한 상기 저작도구(100), 런타임 플랫폼(300), UI 프레임워크(400)와 심리스한 인터워킹을 통해서 사용자인터페이스(UI) 로직과 비즈니스(Biz) 로직의 개발을 지원하며, 상기 인터워킹을 통해서 개발된 어플리케이션은 다양한 하드웨어 프로파일을 지원하는 프로파일러를 이용해 프로파일링과 에뮬레이터를 이용한 테스트를 수행하며 이때 발생된 에러를 디버거를 통해 디버깅할 수 있도록 하고, 상기 과정을 통해 완료된 앱 어플리케이션은 최종적으로 빌드 및 패키징하여 배포한다.

상기 스튜디오(200)는 프로젝트 매니저(210) 및 코드 에디터(220)를 통해서 UI 로직 및 비즈 로직을 코딩하며, 이들을 에뮬레이터(230)/디버거(240)/프로파일러(250)에서 테스트, 디버깅 및 프로파일링을 수행한다. 이어서 빌드(260)와 패키저(270)에서 빌드 및 디플로이(Deploy)를 수행하며, 그 결과는 하이브리드 어플리케이션으로 다양한 모바일 디바이스에서 동작하거나, 혹은 웹 어플리케이션으로 커스터머 서버에서 동작한다.

여기서 상기 프로젝터 매니저(210)는 프로젝트를 생성 및 관리할 수 있도록 하며, 개발의 편의성을 위해 여러 샘플 프로젝트를 제공할 수 있다. 그리고 상기 코드 에디터(220)는 상기 생성된 프로젝트 또는 프로젝트에 포함시키고자 하는 컴포넌트의 코드를 임포트(Import)하여 편집할 수 있도록 한다.

그리고 상기 에뮬레이터(230)는 본 발명의 통합 플랫폼을 이용하여 개발된 웹 어플리케이션을 모바일 기기에서 실행하는 것과 동일한 결과를 제공하여 테스트나 동작을 확인할 수 있도록 한다. 즉, 상기 에뮬레이터(230)는 다양한 해상도, 회전 및 익스펜터 등을 제공하여 실제 모바일 디바이스와 동일한 환경을 제공한다.

그리고 상기 디버거(240)는 본 발명의 통합 플랫폼을 이용하여 개발된 웹 어플리케이션에 포함된 자바 스크립트 손쉽고 편하게 디버그 할 수 있도록 한다. 또한 상기 프로파일러(250)는 웹 어플리케이션을 개발하는 과정에서 그 어플리케이션을 여러 가지 방법으로 실행시켜 봄으로써 시스템 성능 및 병목 현상이 발생하는 지점을 발견할 수 있도록 한다.

상기 빌드(260)는 웹 어플리케이션(또는 프로젝트)의 소스 코드 파일을 컴퓨터(또는 모바일 디바이스)에서 실행할 수 있는 독립 소프트웨어 결과물(예 : 실행파일)을 생성한다. 그리고 상기 패키저(270)는 상기 웹 어플리케이션(또는 프로젝트)을 배포(publishing) 가능하도록 패키징한다.

또한 상기 통합 플랫폼은 하이브리드 어플리케이션 빌드를 위한 빌드 서버(500)를 별도로 구성할 수 있으며, 상기 빌드 서버(500)를 이용하여 각종 OS(예 : 안드로이드, iOS)의 다양한 패키징을 지원할 수 있다. 이때 상기 빌드 서버(500)는 기업의 니즈에 따라 local(기업용) 빌드 서버 구축 및 이용이 가능하며, 또한 사용자 관리 및 빌드 상태 관리 기능의 제공, 빌드 히스토리 및 통계 정보를 제공할 수 있다. 그리고 상기 통합 플랫폼은 웹 어플리케이션의 개발과 배포 및 사용자와 개발자를 위한 지원과 관리를 위한 에코 시스템(600)을 제공할 수 있으며, 상기 에코 시스템을 위한 별도의 서버나 웹사이트를 구성할 수 있다.

런타임 플랫폼(300)은 도 2에서 보듯이 런타임 코어(runtime core), 디바이스 API 플러그인(빌트인), 유저 플러그인, 어플리케이션 및 서비스 프레임워크를 포함한다.

런타임 코어는 웹킷(webkit), 플러그인 로더 및 어플리케이션 매니저를 포함하고 있으며, 웹킷은 HTML, CSS 렌더링 및 자바 스크립트 엔진을 포함하는 오픈소스 웹브라우저 엔진이다. 또한 플러그인 로더는 네이티브 기능 연동을 위한 빌트인/커스텀 플러그인 API 관리를 수행하며, 어플리케이션 매니저는 어플리케이션을 실행하고 관리하는 기능, 즉 어플리케이션의 실행뿐만 아니라 인스톨과 업데이트 기능도 동시에 수행한다. 또한, 서비스 프레임워크의 런타임 API 프로바이더는 어플리케이션에서 필요한 기능에 대한 빌트인 API 기능을 제공하며, 플러그인에서 확장된 커스텀 API에 대한 연동 기능을 포함하여 제공한다.

도 3은 플러그인을 설명하기 위한 것으로, 예를 들어 iOS 런타임은 자바 스크립트 API 구현부에서 공통 인터페이스를 통해 네이티브 모듈의 해당 기능이 실행되고 이에 대한 결과가 다시 웹페이지로 전달되는 방식으로 구성된다.

도 3에 도시된 바와 같이 웹(Web) - 네이티브(Native) 인터페이스는 하드웨어 또는 특정 다른 어플리케이션의 고유 기능을 웹브라우저에서 접근할 수 있도록 표준화한 것을 말한다. 개발자는 HTML 태그 또는 자바스크립트 개체 형태로 사용이 가능하며, 하드웨어 고유 기능을 DOM 레벨에서 사용할 수 있도록 인터페이스화 한 하드웨어 네이티브 인터페이스(예: GPS, 카메라, iPhone의 사파리(Safari)에서 전화거는 기능)와 디바이스에 내장된 특정 어플리케이션 또는 미들웨어의 기능을 DOM(Document Object Model) 레벨에서 사용할 수 있도록 인터페이스화 한 어플리케이션 네이티브 인터페이스(예: 로컬 주소록이나 일정을 관리하는 미들웨어의 기능을 브라우저 인터페이스로 노출하여 웹 어플리케이션이 이를 사용하여 웹페이지에 데이터를 표시하거나 서버에 전달할 수 있도록 하는 것, HTML5의 <video>태그)로 나누어진다. 또한 플러그인을 통해 구현했던 비디오 출력 기능은 다른 윈도우에 그려졌기 때문에 웹브라우저에서 이를 제어할 수단이 많지 않았지만, <video>태그를 통해 웹페이지가 렌더링되는 같은 메모리 공간에 비디오가 출력되어 서로 합성이 가능해졌으며, 이 결과 캔버스(canvas)나 SVG(Scalable Vector Graphics)를 이용하여 비디오에 다양한 효과를 줄 수 있게 된다.

도 4는 본 발명의 일 실시예에 따른 플러그인 시스템을 설명하기 위한 예시도로서, 이에 도시된 바와 같이 본 발명에 따른 플러그인 시스템(720)은 가상 플랫폼(721), 클로스 플랫폼 코어 계층 라이브러리(722), 클로스 플랫폼 타겟 계층 라이브러리(723)를 포함한다.

본 발명에서 플러그인은 특정 어플리케이션(또는 디바이스)에서 사용하는 특정 형식의 플랫폼(소스 또는 원본 플랫폼)을 다른 형식의 플랫폼(대상 또는 타겟 플랫폼)을 사용하는 어플리케이션(또는 디바이스)에서 손쉽게 사용하도록 하는 것으로서, 개발자들은 이를 바탕으로 다양한 기능의 어플리케이션을 손쉽게 만들어 낼 수 있게 된다.

그런데 종래에 플러그인을 개발하기 위해서는 API에 대한 이해와 대상 플랫폼의 규격에 대한 지식의 습득이 필요하였다. 왜냐하면 원본 플랫폼을 사용하여 제작한 플러그인을 이종 플랫폼(타겟 플랫폼)에서 실행하기 위해서는 원본 플랫폼의 API를 대상 플랫폼의 API에서 사용하도록 수정하고, 대상 플랫폼의 규격에 맞춰 원본 플랫폼에 종속적인 소스 코드를 제거하고 대상 플랫폼에 맞춰 재개발해야하기 때문이다.

그러나 본 발명에 따른 플러그인 시스템은 API에 대한 이해와 대상 플랫폼의 규격에 대한 지식을 습득하지 않더라도 특정 플랫폼(원본 플랫폼)의 규격과 API를 사용하여 개발된 어플리케이션(또는 콘텐츠)을 변환하여 이종 규격의 API로 구성된 다양한 대상 플랫폼에서 실행할 수 있도록 한다. 이하 그 구현 방법에 대하여 구체적으로 설명한다. 본 발명에 따른 플러그인 시스템은 코드 재사용성의 측면에서 다양한 플러그인에 대한 인터페이스를 추상화하여 구현한다.

먼저 다양한 대상 플랫폼들의 기능을 정의한 추상화된 가상 플랫폼(721)을 정의한다. 그리고 상기 가상 플랫폼에 대한 API와 자료구조를 갖는 크로스 플랫폼 코어 컴포넌트를 정의한다. 여기서 상기 크로스 플랫폼 코어 컴포넌트는 다양한 대상 플랫폼의 자료구조를 합집합 형태로 포함하는 자료구조를 가지며, 또한 다양한 대상 플랫폼에 적용할 수 있는 API 형태로 정의된다. 그리고 상기 크로스 플랫폼 코어 컴포넌트는 정적 라이브러리 형태로 생성하며, 이를 본 실시예에서는 크로스 플랫폼 코어 계층 라이브러리(722)라고 한다.

다음 상기 크로스 플랫폼 코어 계층 라이브러리(722)를 다양한 타겟 디바이스에 적용하기 위한 다양한 플랫폼별 타겟 라이브러리를 포함하고 있는 크로스 플렛폼 타겟 계층 라이브러리를 생성한다. 이때 상기 플랫폼별 타겟 라이브러리는 타겟 플랫폼 기능을 사용하여 정적 라이브러리 형태로 생성한다.

상기와 같이 공통으로 사용할 크로스 플랫폼 코어 계층 라이브러리와 플랫폼별 타겟 라이브러리가 생성되면 원하는 웹 앱(콘텐츠) 소스 코드를 링킹한 후 대상 플랫폼의 실행 바이너리를 생성한다. 이때 적용하려는 타겟 디바이스의 플랫폼에 해당하는 크로스 플랫폼 타겟 계층 라이브러리를 선택하여 상기 웹 앱(콘텐츠) 소스 코드를 링킹한다. 즉, 링커(724)는 상기 플러그인을 원하는 소스 코드를 타겟 디바이스의 플랫폼에 맞게 변환하기 위하여 상기 크로스 플랫폼 코어 계층 라이브러리와 상기 타겟 디바이스에 해당하는 타겟 라이브러리를 링크시킨다.

상기와 원하는 타겟 라이브러리를 선택하여 플러그인을 생성함으로써, 한 벌의 소스 코드를 여러 타겟 플랫폼의 플러그인으로 생성할 수 있게 된다. 또한 상기 가상 플랫폼에 크로스 플랫폼 코어 계층 API를 기반으로 원본 플랫폼의 API를 에뮬레이션 할 수 있는 플랫폼 변환 라이브러리를 구현할 경우 플러그인을 미리 에뮬레이션 해볼 수 있다.

여기서 상기 정적 라이브러리는 컴파일러가 소스 파일을 컴파일 할 때 참조되는 프로그램 모듈이다. 정적 라이브러리는 루틴(routine) 외부 함수와 변수들의 집합으로, 컴파일러, 링커, 바인더 등에 의해 목표된 애플리케이션으로 복사되어 오브젝트 파일과 독립적으로 실행할 수 있는 실행 파일을 생성하는데 사용되며, 프로그래머들이 라이브러리를 링크하게는 허락하고 싶은데 소스코드를 공개하고 싶지 않을 때에도 유용하게 사용된다. 참고로 상기 정적 라이브러리와 대조적으로 동적 라이브러리는 프로그램 수행 도중 해당 모듈이 필요할 때 불러 쓰는 프로그램 모듈이다. 따라서 상기 정적 라이브러리는 사용자들이 프로그램을 다시 컴파일하지 않아도 링크 시킬 수 있도록 해주기 때문에 컴파일 시간을 줄여주는 특징이 있다.

도 5는 본 발명의 일 실시예에 따른 플러그인 시스템의 가상 플랫폼을 보인 예시도로서, 런타임 코어(runtime core), 공통으로 사용하는 크로스 플랫폼 코어 계층 라이브러리, 상기 크로스 플랫폼 코어 계층 라이브러리를 플랫폼이 다른 대상 디바이스(타겟 디바이스)에 적용하기 위한 크로스 플랫폼 타겟 계층 라이브러리, 어플리케이션 및 서비스 프레임워크를 포함한다.

여기서 상기 런타임 플랫폼과 중복되는 구성요소에 대한 설명은 생략하기로 한다. 다만 상기 크로스 플랫폼 코어 계층 라이브러리는 이종 플랫폼에서 공통으로 사용할 수 있도록 하기 위하여 다양한 대상 플랫폼의 자료구조를 모두 포함하는 형태의 자료구조를 가지며, 또한 다양한 대상 플랫폼에 적용할 수 있는 API 형태를 가진다. 그리고 상기 크로스 플렛폼 타겟 계층 라이브러리는 상기 크로스 플랫폼 코어 계층 라이브러리를 다양한 타겟 디바이스에 적용하기 위한 다양한 플랫폼별 타겟 라이브러리를 포함한다.

도 6은 본 발명의 일 실시예에 따른 플러그인 시스템을 이용한 특정 소스 코드의 플러그인을 생성하는 과정을 보인 흐름도이다. 이에 도시된 바와 같이 플러그인 시스템에는 이미 다양한 대상 플랫폼들의 기능이 정의되어 있는 추상화된 가상 플랫폼이 정의되어 있고(S101), 상기 가상 플랫폼에 대한 API와 다양한 플랫폼의 자료구조를 갖는 크로스 플랫폼 코어 계층 라이브러리가 생성되어 있으며(S102), 상기 클로스 플랫폼 코어 계층 라이브러리를 특정 타겟 디바이스에 적용할 수 있는 다수의 플랫폼별 타겟 라이브러리가 생성되어 있다고 가정한다(S105).

물론 상기 클로스 플랫폼 코어 계층 라이브러리와 플랫폼별 타겟 라이브러리는 새로운 플랫폼이 생성될 경우 업데이트나 대응하는 타겟 라이브러리가 추가될 수 있을 것이다.

상기와 같이 클로스 플랫폼 코어 계층 라이브러리와 다수의 플랫폼별 타겟 라이브러리가 생성된 상태에서 타겟 디바이스에 플러그인할 소스 코드를 불러온 후(S106), 상기 소스 코드를 상기 타겟 디바이스의 플랫폼에 해당하는 타겟 라이브러리 및 상기 클로스 플랫폼 코어 계층 라이브러리에 링킹한다(S103).

이에 따라 상기 크로스 플랫폼 코어 계층 라이브러리에서 상기 소스 코드에 해당하는 기능이 상기 타겟 플랫폼에 맞는 형식으로 변환되고, 대상 플랫폼에 해당하는 실행 바이너리를 생성한다(S104).

본 발명은 도면에 도시된 실시예를 참고로 하여 설명되었으나, 이는 예시적인 것에 불과하며, 당해 기술이 속하는 분야에서 통상의 지식을 가진 자라면 이로부터 다양한 변형 및 균등한 타 실시예가 가능하다는 점을 이해할 것이다. 따라서 본 발명의 기술적 보호범위는 아래의 특허청구범위에 의해서 정하여져야 할 것이다.

100 : 저작도구 200 : 스튜디오
210 : 프로젝터 매니저 220 : 코드 에디터
230 : 에뮬레이터 240 : 디버거
250 : 프로파일러 260 : 빌드
270 : 패키저 300 : 런타임 플랫폼
400 : UI 프레임워크 500 : 빌드 서버
600 : 에코 시스템 720 : 플러그인 시스템
721 : 가상 플랫폼 722 : 크로스 플랫폼 코어 계층 라이브러리
723 : 클로스 플랫폼 타겟 계층 라이브러리
724 : 링커

Claims

적어도 하나 이상의 대상 플랫폼들의 기능을 정의한 가상 플랫폼;
상기 가상 플랫폼에 대한 API와 자료구조를 갖는 크로스 플랫폼 코어 계층 라이브러리; 및
상기 크로스 플랫폼 코어 계층 라이브러리를 적어도 하나 이상의 타겟 디바이스에 적용하기 위한 플랫폼별 타겟 라이브러리를 포함하고 있는 크로스 플렛폼 타겟 계층 라이브러리;를 포함하여 구성된 것을 특징으로 하는 하이브리드 웹 어플리케이션 개발을 위한 플러그인 시스템.
청구항 1에 있어서,
상기 크로스 플랫폼 코어 계층 라이브러리와 플랫폼별 타겟 라이브러리는,
정적 라이브러리 형태로 생성되는 것을 특징으로 하는 하이브리드 웹 어플리케이션 개발을 위한 플러그인 시스템.
청구항 1에 있어서,
상기 플러그인을 원하는 소스 코드를 타겟 디바이스의 플랫폼에 맞게 변환하기 위하여 상기 크로스 플랫폼 코어 계층 라이브러리와 상기 타겟 디바이스에 해당하는 타겟 라이브러리를 링크시키는 링커;를 더 포함하여 구성된 것을 특징으로 하는 하이브리드 웹 어플리케이션 개발을 위한 플러그인 시스템.
청구항 3에 있어서,
상기 링커는,
상기 크로스 플랫폼 코어 계층 라이브러리와 상기 타겟 디바이스에 해당하는 타겟 라이브러리에 상기 소스 코드를 링크하여 대상 플랫폼의 실행 바이너리를 생성하는 것을 특징으로 하는 하이브리드 웹 어플리케이션 개발을 위한 플러그인 시스템.
청구항 1에 있어서,
상기 가상 플랫폼에 크로스 플랫폼 코어 계층 API를 기반으로 원본 플랫폼의 API를 에뮬레이션 할 수 있는 플랫폼 변환 라이브러리;를 더 포함하여 구성된 것을 특징으로 하는 하이브리드 웹 어플리케이션 개발을 위한 플러그인 시스템.
청구항 1에 있어서,
상기 크로스 플랫폼 코어 계층 라이브러리는,
적어도 하나 이상의 대상 플랫폼의 자료구조를 합집합 형태로 포함하는 자료구조를 가지며, 또한 적어도 하나 이상의 대상 플랫폼에 적용할 수 있는 API 형태로 구성된 것을 특징으로 하는 웹 어플리케이션 개발을 위한 플러그인 시스템.
적어도 하나 이상의 대상 플랫폼들의 기능을 정의한 가상 플랫폼을 정의하는 제1 단계;
상기 가상 플랫폼에 대한 API와 자료구조를 갖는 크로스 플랫폼 코어 계층 라이브러리를 생성하는 제2 단계;
상기 크로스 플랫폼 코어 계층 라이브러리를 적어도 하나 이상의 타겟 디바이스에 적용하기 위한 플랫폼별 타겟 라이브러리를 생성하는 제3 단계; 및
상기 크로스 플랫폼 코어 계층 라이브러리와 상기 타겟 라이브러리에 소스 코드를 링크하여 원하는 타겟 디바이스의 플랫폼에 맞게 변환시키는 제4 단계;를 포함하여 구성된 것을 특징으로 하는 웹 어플리케이션 개발을 위한 플러그인 방법.
청구항 7에 있어서,
상기 크로스 플랫폼 코어 계층 라이브러리와 플랫폼별 타겟 라이브러리는,
정적 라이브러리 형태로 생성되는 것을 특징으로 하는 하이브리드 웹 어플리케이션 개발을 위한 플러그인 방법.
청구항 7에 있어서,
상기 제4 단계는,
적어도 하나 이상의 플랫폼별 타겟 라이브러리 중 원하는 타겟 디바이스에 해당하는 플랫폼의 타겟 라이브러리를 선택하여 소스 코드를 링크시키는 것을 특징으로 하는 하이브리드 웹 어플리케이션 개발을 위한 플러그인 방법.
청구항 7에 있어서,
상기 크로스 플랫폼 코어 계층 라이브러리와 상기 타겟 라이브러리에 소스 코드를 링크하여 대상 플랫폼의 실행 바이너리를 생성하는 제5 단계;를 더 포함하여 구성된 것을 특징으로 하는 하이브리드 웹 어플리케이션 개발을 위한 플러그인 방법.
청구항 7에 있어서,
상기 크로스 플랫폼 코어 계층 라이브러리는,
적어도 하나 이상의 대상 플랫폼의 자료구조를 합집합 형태로 포함하는 자료구조를 가지며, 또한 적어도 하나 이상의 대상 플랫폼에 적용할 수 있는 API 형태로 구성된 것을 특징으로 하는 웹 어플리케이션 개발을 위한 플러그인 방법.