KR101456507B1

KR101456507B1 - Ｎ-스크린 적용을 위한 웹 어플리케이션 ｕｉ 저작 장치 및 그 저작 방법

Info

Publication number: KR101456507B1
Application number: KR1020120088201A
Authority: KR
Inventors: 신기루
Original assignee: 인크로스 주식회사
Priority date: 2012-08-13
Filing date: 2012-08-13
Publication date: 2014-10-31
Also published as: KR20140022137A

Abstract

본 발명은 웹 어플리케이션 UI를 개발함에 있어서 N-스크린에 적합하도록 자동으로 웹 어플리케이션 UI를 저작하는 환경을 제공하는 저작 장치와 그 저작 방법에 관한 것으로서, 하나의 웹 어플리케이션을 개발하여 다양한 종류의 스크린 조건에 대해서 적용하게 되면 바로 특정 디바이스에 해당하는 웹 어플리케이션이 생성되며, 또한 다양한 종류의 디바이스에 대해서 용이하게 어플리케이션을 미리 손쉽게 개발한 상태에서 타겟 디바이스의 조건을 수집한 후 해당하는 어플리케이션을 즉시 제공할 수 있어, 각 디바이스마다 새로이 웹 어플리케이션을 개발하여야 하는 번거로움을 없애주는 효과가 있다.

Description

Ｎ-스크린 적용을 위한 웹 어플리케이션 ＵＩ 저작 장치 및 그 저작 방법 {AN AUTHORING APPARATUS FOR APPLYING N-SCREEN TO WEB APPLICATION UI AND THE METHOD FOR THE SAME}

본 발명은 N-스크린 적용을 위한 웹 어플리케이션 UI 저작 장치 및 그 저작 방법에 관한 것으로, 더욱 상세하게는 웹 어플리케이션 UI를 개발함에 있어서 N-스크린에 적합하도록 자동으로 웹 어플리케이션 UI를 저작할 수 있는 환경을 제공하는 저작 장치와 그 저작 방법에 관한 것이다.

일반적으로 하이브리드 웹앱은 앱(APP)과 모바일 웹(WEB)의 장점을 모두 결합한 형태라고 볼 수 있다. 예를 들어 앱은 구동 속도가 빠르고 인터렉티브한 사용자 환경이 제공되어서 가장 좋은 성능을 내지만 OS 및 기기별로 특정 어플리케이션의 개발만 가능하고, 모바일 웹에 비해 개발비용이 많이 들고 개발기간도 상대적으로 길다는 단점이 있으며, 또한 업데이트 및 수정과 관리가 어렵고 OS별 프로그래밍 언어를 습득해야 하기 때문에 OS별 동일 어플리케이션 개발이 매우 어려우며, 빠른 구동속도에 비해서 스마트폰의 개별 특징을 잘 이해하고 있어야만 개발이 가능하다.

한편 모바일 웹은 앱에 비해서 개발기간이 짧고 웹 개발 지식으로도 개발이 가능하며 업데이트 및 수정 변경이 용이하고 어떤 OS에도 접근이 가능하기 때문에 PC 상에서도 실행이 가능할 뿐만 아니라, 인터넷을 통해 접속하기 때문에 구동이 느리고 스마트폰의 하드웨어 기능인 GPS, 가속 능력을 사용하지 못하고 브라우저를 통한 2차 접근이라 접근성이 낮다는 문제점이 있으며, OS나 기기를 가리지 않아 접근성이 좋고 호환성이 좋고 웹을 통합 접속으로 따로 설치가 필요하지 않은 장점이 있다.

따라서 상기와 같은 장점들을 결합한 하이브리드 웹앱은 기기에 상관없는 어플리케이션을 만들면서 내부구조와 사용자 인터페이스 및 카메라나 단말기 센서 조작과 같은 하드웨어적인 기능을 사용할 수 있는 장점이 있다. 따라서 하이브리드 웹앱에서 사용이 되는 언어가 웹상에서 많이 사용하는 자바스크립트와 HTML5, CSS가 많이 사용되고 있으며, 그것만으로도 충분히 좋은 어플리케이션을 만들 수 있지만 더욱 개발이 쉬우면서 보기 좋게 만들기 위해서 모바일 프레임워크를 많이 사용하게 된다.

그런데 종래에는 특정 디바이스의 웹 어플리케이션을 개발하기 위해서 개별적으로 각 디바이스 마다 해상도를 비롯한 디바이스의 조건에 맞는 별도의 웹 어플리케이션을 각각 개발하여 서비스를 제공하였다. 따라서 모든 디바이스마다 별도의 웹 어플리케이션을 개발하는 것은 개발 기간이 길고, 매번 새로운 어플리케이션을 개발하여야 하므로 디바이스에 따라 UI의 구성이 일관적이지 않을 수 있어서, 사용자의 요구사항에 적절히 대응할 수 없는 문제점이 있었다.

본 발명은 상기와 같은 문제점을 해결하기 위해 창작된 것으로서, HTML언어를 기반으로 다양한 디바이스의 특성에 따른 웹 어플리케이션의 UI를 쉽고 편리하게 제작할 수 있는 UI 저작 장치와 저작 방법을 제공하는데 그 목적이 있다.

또한 본 발명은 다양한 디바이스의 특성에 따른 웹 어플리케이션의 UI 저작 시, 사용자의 저작 편의성과 작업의 효율성을 위해 다양한 UI 구성 요소를 편집할 수 있는 편집기들을 포함하는 UI 저작 장치와 저작 방법을 제공하는데 그 목적이 있다.

또한 본 발명은 다양한 디바이스의 특성에 따른 웹 어플리케이션의 UI를 저작하기 위한 각종 편집기들을 UI 저작 장치에 포함함에 있어서, 상기 각 편집기들의 UI 구성 요소들 각각에 대해 최적화된 편집 기능을 제공하며, 필요에 따라 리스트, 트리 등의 관리 중심 UI, 또는 이미지 형태의 시각화 편집과 아이콘을 통한 직관적 편집을 동시에 제공할 수 있는 UI 저작 장치와 저작 방법을 제공하는데 그 목적이 있다.

본 발명의 일 측면에 따른 N-스크린 적용을 위한 웹 어플리케이션 UI 저작 장치는 사용자가 추가한 스크린 사이즈별 리스트를 보여주는 N-스크린 리스트 뷰어; 미디어 타입에 따라 실제 디바이스에서의 적용 결과 화면을 보여주는 N-스크린 프리뷰어; 및 가장 많이 쓰이는 스크린 사이즈를 간단히 선택하여 추가 할 수 있도록 리스트 형태로 보여주는 N-스크린 프리셋;을 포함하여 구성되고, 상기 N-스크린 리스트 뷰어에 표시되는 스크린 사이즈 별 리스트는 아이콘 형태로 표시되며 그 아이콘을 클릭하면 사이즈 별 뷰포트가 자동으로 변경되고, 상기 N-스크린 프리뷰어는 적어도 하나 이상의 다양한 스크린 사이즈의 화면을 동시에 보여줄 수 있으며, 상기 N-스크린 프리셋에 표시되는 리스트는 스크린의 모양이나 사이즈를 나타내는 아이콘 형식으로 표시되고 그 중 하나를 클릭하여 원하는 스크린 사이즈를 선택 및 추가할 수 있고, 상기 N-스크린 프리셋은 적용 가능한 미디어 쿼리 리스트를 미리 보기 형태로 제공하며 각기 해당하는 미디어 타입의 특성이 반영된 템플릿이며, 사용자가 원하는 다양한 스크린 사이즈의 디자인과 템플릿을 생성하여 추가하고, 그 자신의 디자인과 템플릿을 관리할 수 있도록 하는 N-스크린 매니저;를 더 포함하여 구성되고, 상기 N-스크린 매니저는 간단한 설명과 스크린 사이즈 및 CSS 파일을 첨부하여 간단히 미디어 쿼리를 추가할 수 있는 사용자 입력 인터페이스로 구성되고, 상기 UI 저작 장치는 드래그&드롭 방식과 사용자가 스크린 상에서 디스플레이 되고 있는 콘텐츠와 동일한 결과를 얻기 위한 위지윅 방식으로 저작할 수 있는 것을 특징으로 한다.

본 발명의 일 측면에 따른 N-스크린 적용을 위한 웹 어플리케이션 UI 저작 방법은 N-스크린 리스트 뷰어를 통해 사용자가 추가한 스크린 사이즈 별 리스트를 보여주며 아이콘을 클릭하면 사이즈 별 뷰포트가 자동 변경되는 제1 단계; N-스크린 프리셋을 통해 스크린 사이즈 별로 최적화된 UI 레이아웃을 미리 제작하여 아이콘 클릭과 같은 간단한 선택으로 쉽게 스크린 사이즈를 추가하는 제2 단계; 및 N-스크린 프리뷰어를 통해 사용자가 추가한 스크린 사이즈 별 각 화면을 확인하는 제3 단계;를 포함하여 구성되고, N-스크린 매니저를 통해 사용자가 원하는 다양한 스크린 사이즈의 디자인과 템플릿을 생성하여 추가하고, 그 자신의 디자인과 템플릿을 관리하는 제4 단계;를 더 포함하여 구성되며, 상기 제4 단계는 상기 N-스크린 매니저를 통해 간단한 설명과 스크린 사이즈 및 CSS 파일을 첨부하여 미디어 쿼리를 간단히 추가할 수 있는 것을 특징으로 한다.

본 발명은 하나의 웹 어플리케이션을 개발하고, 다양한 종류의 디바이스가 가진 스크린 조건에 대해서 적용하게 되면 바로 특정 디바이스에 해당하는 웹 어플리케이션이 생성되며, 또한 다양한 종류의 디바이스에 대해서 용이하게 어플리케이션을 미리 손쉽게 개발한 상태에서 타겟 디바이스의 조건을 수집한 후 해당하는 어플리케이션을 즉시 제공할 수 있도록 함으로써 각 디바이스마다 새로이 웹 어플리케이션을 개발하여야 하는 번거로움을 없애주는 효과가 있다.

도 1은 본 발명의 일 실시예에 따른 웹 어플리케이션 저작을 위한 통합 플랫폼의 구성과 동작을 설명하기 위한 개념도.
도 2는 본 발명의 일 실시예에 따른 웹 어플리케이션 저작을 위한 런타임 플랫폼의 구성을 보인 예시도.
도 3은 본 발명의 일 실시예에 따른 웹 어플리케이션 저작을 위한 통합 플랫폼의 런타임 플러그인의 동작을 보인 예시도.
도 4는 본 발명의 일 실시예에 따른 N-스크린 적용을 위한 UI 저작 장치의 프레임 워크를 보인 예시도.
도 5는 본 발명의 일 실시예 따른 UI 저작도구를 이용한 디자인 워크 플로우를 보인 예시도.
도 6은 본 발명의 일 실시예에 따른 N-스크린 적용을 위한 웹 어플리케이션의 저작 과정을 개략적으로 설명하는 예시도.
도 7은 본 발명의 일 실시예에 따른 N-스크린을 위한 UI 저작 장치의 화면 구성을 보인 예시도.
도 8은 본 발명의 일 실시예에 따른 N-스크린을 위한 UI 저작 장치의 N-스크린 매니저를 설명하기 위한 예시도.

이하, 첨부된 도면을 참조하여 본 발명에 따른 N-스크린 적용을 위한 웹 어플리케이션 UI 저작 장치 및 그 저작 방법의 일 실시예를 설명한다.

도 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)를 이용하여 비디오에 다양한 효과를 줄 수 있게 된다.

본 발명에 따른 N-스크린 적용을 위한 웹 어플리케이션 UI 저작 장치는 상기 통합 플랫폼에 포함되는 구성요소로서 작동할 수 있으며, 또는 통합 플랫폼과는 별도로 분리되어 독립적으로 작동하도록 구성할 수 있다.

또한 본 발명에 따른 UI 저작 장치(또는 저작도구)는 HTML언어를 기반으로 웹 어플리케이션 제작을 지원하며, 사용자의 저작 편이성과 작업의 효율성을 위해 다양한 구성 요소를 편집할 수 있는 편집기들을 제공한다. 그리고 각종 편집기들은 구성요소들 각각에 대해 최적화된 편집 기능을 제공하며 필요에 따라 리스트, 트리 등의 관리 중심 또는 이미지 형태의 시각화 편집과 아이콘을 통한 직관적 편집을 동시에 제공한다.

또한 본 발명에 따른 UI 저작 장치(또는 저작도구)는 디자이너의 페이지 구성을 통해 개발자와 디자이너의 개발 목적에 최적화된 개발환경을 지원하고, 또한 컴포넌트 기반의 뷰(view) 단위 개발 방법론을 통해 사용자에게 네이티브 앱(예 : 아이폰과 같은 모바일 기기 제조사에서 앱 제작에 필요한 라이브러리나 함수들을 내장하여 개발이 쉽도록 제공하는 앱)과 동일한 수준의 UX(User eXperience)를 제공한다.

또한 본 발명에 따른 UI 저작 장치는 N-스크린에 대응하는 비즈니스 어플리케이션과 애니메이션 콘텐츠 개발에 최적화된 개발환경을 제공하고, 또한 N-스크린 에디터(미디어의 종류(type)별로만 스타일을 다르게 줄 수 있었던 과거와는 달리 CSS3를 이용하여 미디어 각각의 특성(feature)에 맞춰서 스타일에 변화를 줄 수 있는 방식의 에디터)를 이용한 N-스크린 대응 콘텐츠 개발 환경을 제공한다.

또한 디자이너와 개발자 관점에서 특화된 저작환경을 제공한다. 예를 들어 디자이너 관점에서는 CSS3 애니메이션과 효과 제작에 활용 가능하며, 타임라인 기반의 애니메이션 콘텐츠(광고, 게임, 교육 등) 개발에 활용 가능하고, 개발자 관점에서는 컴포넌트와 뷰 기반의 비즈니스 어플리케이션 개발에 활용 가능한 특성이 있다. 또한 디자인 타임에 하나의 페이지를 여러 개의 논리 뷰로 분리하여 코드의 복잡도를 감소시키고 재활용성을 증가시켜 개발 및 유지보수 생산성을 향상시킬 수 있도록 한다.

도 4는 본 발명의 일 실시예에 따른 N-스크린 적용을 위한 UI 저작 장치의 프레임 워크를 보인 예시도이다.

이에 도시된 바와 같이 UI 저작 장치의 작업 영역 웹 페이지 개발의 편의성을 위해 뷰포트 에디터, 프로젝트 매니저, 페이지 브라우저, 리소스 에디터, 컴포넌트 브라우저, 프로퍼티 브라우저, DOM 트리 에디터, N-스크린 리스트뷰어 등을 포함한다. 상기 UI 저작 장치의 작업 영역에 포함되는 메뉴바는 파일, 에디트, 툴스, 윈도우, 헬프와 같이 파일의 생성이나 편집에 관련된 메뉴들이 포함되고, 툴바(Toolbar)는 뷰포트에서 필요한 작업 도구의 모음으로서, 메뉴바의 동작들을 간편하게 툴로 묶어 조정할 수 있도록 한다.

상기 모든 에디터 윈도우들은 패인(pane)으로 관리되며, 편집 목적에 따라 에디터 패인의 자율 배치가 가능하며, 필요에 따라 특정 기능의 편집을 위한 패인을 추가하거나 제거할 수 있다. 상기 에디터 윈도우들은 뷰포인트를 중심으로 모든 에디터가 연계되어 설정되어 객체-중심 편집 기능을 제공한다.

그리고 프로젝트 매니저는 통합 개발 환경에서 생성한 프로젝트의 구성요소들을 포함시킨 창으로, HTML파일을 더블 클릭하면 뷰포트에 나타나고, 그 외 image, html파일들을 추가, 삭제 시킬 수 있으며, 마우스 드래그&드롭으로도 추가, 삭제가 가능하다. 또한, 폴더파일로 설정된 아이콘을 더블 클릭하면 그 안에 포함된 파일들을 보여준다.

여기서 페이지 브라우저(Page Browser)는 UI의 개별 화면인 페이지의 생성 및 추가의 작업을 할 수 있는 페이지 탐색기로서, 한 페이지가 선택되면 저작도구의 뷰포트를 포함한 모든 UI 구성을 갱신해서 보여줌으로써 전체적인 구성 파악에 용이하다. 그리고 뷰포트 에디터는 UI 콘텐츠를 시각적으로 볼 수 있는 작업영역으로서, 페이지 브라우저에서 페이지를 선택한 후 사용자가 드래그&드롭을 통해 컴포넌트를 등록할 수 있으며, HTML 페이지 디자인이 가능하고, 랜드스케이프(Landscape), 포트릿(Portrait) 모드를 지원한다.

그리고 프로퍼티 브라우저(또는 프로퍼티 에디터)는 선택한 객체나 구성요소의 다양한 속성을 선택해 변경할 수 있으며, 객체는 종류에 따라 다른 속성을 가진다. 페이지 브라우저에서 페이지를 선택하면 페이지의 속성이 나타나고, 페이지 안의 컴포넌트 위젯들을 선택하면 'dvc name'의 형태로 뜬다. 표시된 속성들은 키보드 입력이나 마우스의 컨트롤로 변경할 수 있다.

그리고 컴포넌트 브라우저는 페이지를 꾸밀 수 있는 다양한 위젯들을 모아 놓은 편집창이며, 베이직, 뷰, 패드(Pad) 순으로 나열된다.

그리고 DOM 트리 브라우저(또는 DOM 트리 에디터)는 페이지 브라우저 탐색기 창에서 선택한 페이지에 대한 정보를 보여준다. 선택한 페이지 영역에 추가된 레이어, 위젯들에 대해 상세히 나타내주고, 업(up), 다운(down) 버튼을 통하여 위젯의 순서변경이 가능하다.

또한 리소스 에디터는 사용자가 프로젝트에 리소스(Resource)를 편리하게 관리할 수 있도록 하는 것으로서, 폴더 트리, 포맷 탭, 썸네일 뷰어 기능을 제공한다. 또한 리소스 에디터는 현재 작업중인 프로젝트의 이미지(images) 폴더 정보를 보여주며 상위의 파일 임포트(file import), 폴더 임포트(folder import) 아이콘을 사용하여 새로운 파일과 폴더를 추가할 수 있다. 포맷 탭(Format tab)에서는 현재 jpg, png, bmp, gif, map, wmv의 포맷과 all(전체보기), unknown(지원하지 않는 format)을 제공하고 있다. 이에 사용자가 찾고자 하는 리소스의 포맷에 해당하는 탭을 선택하여 손쉽게 원하는 파일의 정보를 확인할 수 있으며, 썸네일 뷰어(thumbnail viewer)에서 제공하는 썸네일을 선택하여 뷰포트에 드래그&드롭하여 컴포넌트에 간편하게 해당 리소스를 적용할 수 있다. 상기 썸네일 뷰어는 현재 폴더 트리에서 선택된 폴더의 리소스 중, 포맷 탭에서 선택 된 포맷을 가진 리소스들의 썸네일을 보여준다(all인 경우 folder의 전체 file, unknown인 경우에는 지원하지 않는 format인 file).

도 5는 본 발명의 일 실시예 따른 UI 저작도구를 이용한 디자인 워크 플로우에 대한 것으로, 통합 개발 환경에서 프로젝트를 생성하고, 다음으로 UI 디자인을 수행한 다음, 컴포넌트 브라우저에서 객체 삽입을 수행하며, DOM 트리 구조확인 후, 커스텀 객체의 속성을 수정하고, 커스텀 이벤트를 추가하며, 이벤트 함수를 완성한다. 그 후 통합 개발 환경에서 리소스 관리를 수행하고, 마지막으로 디버그 후 배포하는 절차를 수행하는 과정을 반복하게 된다.

본 발명에 따른 UI 디자인을 위해서는 프로젝트를 생성한 후 그 프로젝트를 선택하고 디자이너를 실행하면 된다. 상기 디자이너는 UI 디자인의 편의성을 제공하여 웹 페이지 개발을 좀 더 수월하게 진행 할 수 있도록 하며, 버튼, 텍스트 필트, 레이블 등의 위젯으로 화면을 구성하고, 각 사용자 인터페이스 각각의 요소를 정의하여 사용한다.

다음은 디자이너를 이용하여 화면 설계를 마치고 이벤트 리스너에 정의된 이벤트를 설정하게 되면 메인 자바스크립트(예 : main.js)에 매핑된 이벤트 함수의 구현부가 자동으로 생성되며, 해당 함수 구현부에 실제 이벤트에서 동작되어야 하는 기능을 사용자가 구현하는 과정을 거치게 된다. UI의 모든 구성요소들은 미리 정의된 이벤트 속성을 따라야만 이벤트가 원활하게 동작된다. 기능은 따로 정의 되어 있지 않고 사용자가 원하는 기능을 자바스크립트를 이용해 추가해주면 된다. 따라서 이벤트 수행 시 사용자가 이미지를 클릭하면 다른 콘텐트와 상호 작용하면서 UI 프레임워크 내부적으로 자바스크립트에 정의된 이벤트를 생성하고 이에 대한 반응을 처리하게 된다. 상기와 같은 과정을 통해서 리소스를 관리한다.

이하 본 발명에 따른 N-스크린의 적용을 위한 웹 어플리케이션의 UI 저작 과정을 설명한다.

우선 본 발명에 따른 UI 저작 장치는 위지윅(WYSIWYG) 방식의 저작이 가능하고, 이러한 웹 브라우저 타입 UI 저작 환경은 사용자가 스크린 상에서 디스플레이 되고 있는 콘텐츠와 동일한 결과를 얻을 수 있도록 허용한다. 또한 중간에 메타 랭귀지(meta language)가 사용되지 않고 저작 스크린 상에서와 동일한 HTML 코드를 사용하여 직접적으로 저작 또는 수정되는 콘텐츠를 디스플레이하는 특성이 있다. 또한 드래그&드롭 방식의 UI 레이아웃 구성이 가능하다.

즉, 도 6에 도시된 바와 같이, 뷰와 컴포넌트들을 드래그 및 드롭하여 UI 레이아웃을 구성하고, 프로퍼티 에디터를 이용해 이미지 리소스를 구성하며 프로퍼티를 변경한다. 그리고 이벤트 리스너를 이용하여 비즈 로직을 위한 이벤트를 추가한다. 이때 이벤트에 따른 알림 메시지(notification message)를 표시할 수 있다. 그리고 상기와 같이 UI가 구성되면 에뮬레이터를 통해서 UI의 동작을 체크한다. 여기서 상기 비즈 로직(또는 UI 로직)을 개발하는데 이벤트 핸들러를 사용한다.

이하 상기와 같은 과정을 통해 저작된 웹 어플리케이션을 N-스크린에 적용하기 위한 UI 저작 장치의 구성에 대해서 설명한다.

도 7은 본 발명의 일 실시예에 따른 N-스크린을 위한 UI 저작 장치의 화면 구성을 보인 예시도로서, 이에 도시된 바와 같이 N-스크린 매니저, N-스크린 프리뷰어(810), N-스크린 리스트 뷰어(820), N-스크린 프리셋(830)을 포함한다.

본 발명에 따른 N-스크린을 위한 UI 저작 장치는 웹 어플리케이션의 N-스크린 서비스를 위해 다양한 LCD 사이즈에 최적화된 UI/UX를 제공하며, HTML5 표준 기술을 기반으로 다양한 스크린 사이즈별로 최적화된 UI 레이아웃을 개발하고 관리할 수 있는 N-스크린 에디터를 제공하며, 외부 환경(예 : 날씨, 위치, 센서 등)에 능동적으로 반응하는 응답형 웹 디자인(responsive web design)을 위한 범용 기능으로 확장이 가능하게 한다.

상기 N-스크린 매니저는 개발자가 자신의 템플릿을 추가할 수 있도록 하여 특화된 디자인을 구성하거나 자신의 템플릿을 손쉽게 재활용할 수 있도록 한다.

상기 N-스크린 매니저는, 도8에 도시된 바와 같이, 스크린 사이즈 별로 최적화된 UI 레이아웃을 제작하고 브라우저가 스크린 사이즈에 따라서 자동으로 적용된다. N-스크린 매니저는 다양한 스크린 사이즈에 대응하기 위해 사용자 입력 인터페이스를 제공하며 원하는 스크린 사이즈에 맞게 간단히 미디어 쿼리(Media Query)를 추가 할 수 있다. 예컨대 도8에 도시된 바와 같이 간단한 설명(explanation)과 사이즈(Minwidth, Maxwidth) 및 CSS 파일을 첨부하여 간단히 미디어 쿼리를 추가할 수 있다.

상기 N-스크린 프리뷰어는 미디어 타입에 따른 화면의 적용 결과를 보여주고, 실제 디바이스에서 보여질 화면의 결과를 예측할 수 있도록 한다. 이때 다양한 디바이스의 사이즈의 화면을 동시에 보여줄 수도 있다. 상기 N-스크린 리스트 뷰어를 통해 사용자가 추가한 스크린 사이즈 별 리스트를 보여주며 아이콘을 클릭하면 사이즈 별 뷰포트가 자동 변경된다.

상기 N-스크린 프리셋은 가장 많이 쓰이는 스크린 사이즈를 손쉽게 추가 할 수 있도록 간편한 인터페이스를 제공한다. 버튼 형식으로 아이콘 클릭만을 이용하여 쉽게 스크린 사이즈를 추가 할 수 있다. 그리고 상기 N-스크린 프리뷰어를 통해서 사용자가 추가한 스크린 사이즈(Screen Size) 별 각 화면을 손쉽게 확인할 수 있다. 상기 N-스크린 프리셋은 다양한 미디어의 특성이 반영된 템플릿(Template)을 제공하여 별도의 개발없이 특성을 적용하여 화면 설계를 가능하게 하며, 적용 가능한 미디어 쿼리 리스트를 미리 보기 형태로 제공하여, 개발자가 손쉽게 이를 확인 후 적용 가능하게 한다.

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

100 : 저작도구 200 : 스튜디오
210 : 프로젝트 매니저 220 : 코드 에디터
230 : 에뮬레이터 240 : 디버거
250 : 프로파일러 260 : 빌드
270 : 패키저 300 : 런타임 플랫폼
400 : UI 프레임워크 500 : 빌드 서버
600 : 에코 시스템 810 : N-스크린 프리뷰어
820 : N-스크린 리스트뷰어 830 : N-스크린 프리셋

Claims

사용자가 추가한 스크린 사이즈별 리스트를 보여주는 N-스크린 리스트 뷰어;
미디어 타입에 따라 실제 디바이스에서의 적용 결과 화면을 보여주는 N-스크린 프리뷰어; 및
사용자가 원하는 스크린 사이즈를 선택하여 추가 할 수 있도록 리스트 형태로 보여주는 N-스크린 프리셋;을 포함하여 구성된 것을 특징으로 하는 N-스크린 적용을 위한 웹 어플리케이션 UI 저작 장치.
청구항 1에 있어서,
상기 N-스크린 리스트 뷰어에 표시되는 스크린 사이즈 별 리스트는,
아이콘 형태로 표시되며 적어도 하나 이상의 아이콘 중 하나를 클릭하면 사이즈 별 뷰포트가 자동으로 변경되는 것을 특징으로 하는 N-스크린 적용을 위한 웹 어플리케이션 UI 저작 장치.
청구항 1에 있어서,
상기 N-스크린 프리뷰어는,
적어도 하나 이상의 스크린 사이즈의 화면을 동시에 보여줄 수 있는 것을 특징으로 하는 N-스크린 적용을 위한 웹 어플리케이션 UI 저작 장치.
청구항 1에 있어서,
상기 N-스크린 프리셋에 표시되는 리스트는,
스크린의 모양이나 사이즈를 나타내는 아이콘 형식으로 표시되고 그 중 하나를 클릭하여 원하는 스크린 사이즈를 선택 및 추가할 수 있는 것을 특징으로 하는 N-스크린 적용을 위한 웹 어플리케이션 UI 저작 장치.
청구항 1에 있어서,
상기 N-스크린 프리셋은,
적용 가능한 미디어 쿼리 리스트를 미리 보기 형태로 제공하며, 적어도 하나 이상의 미디어 타입의 특성이 반영된 템플릿을 제공하여 별도의 개발없이 특성을 적용하여 화면 설계를 가능하게 것을 특징으로 하는 N-스크린 적용을 위한 웹 어플리케이션 UI 저작 장치.
청구항 1에 있어서,
사용자 혹은 개발자가 원하는 적어도 하나 이상의 스크린 사이즈의 디자인과 템플릿을 생성하여 추가할 수 있도록 하여, 상기 사용자 혹은 개발자가 자신의 디자인과 템플릿을 관리할 수 있도록 하는 N-스크린 매니저;를 더 포함하여 구성된 것을 특징으로 하는 N-스크린 적용을 위한 웹 어플리케이션 UI 저작 장치.
청구항 6에 있어서,
상기 N-스크린 매니저는,
원하는 스크린 사이즈에 맞게 미디어 쿼리를 추가할 수 있는 사용자 입력 인터페이스를 제공하며, 상기 미디어 쿼리를 추가하는 것은 설명, 스크린 사이즈 및 CSS 파일을 첨부하여 미디어 쿼리를 추가할 수 있는 것을 특징으로 하는 N-스크린 적용을 위한 웹 어플리케이션 UI 저작 장치.
청구항 1에 있어서,
상기 UI 저작 장치는,
드래그&드롭 방식과 사용자가 스크린 상에서 디스플레이 되고 있는 콘텐츠와 동일한 결과를 얻기 위한 위지윅 방식으로 저작할 수 있는 것을 특징으로 하는 N-스크린 적용을 위한 웹 어플리케이션 UI 저작 장치.
N-스크린 리스트 뷰어를 통해 사용자가 추가한 스크린 사이즈 별 리스트를 보여주며 상기 리스트 중 하나를 선택하면 사이즈 별 뷰포트가 자동 변경되는 제1 단계;
N-스크린 프리셋을 통해 스크린 사이즈 별 UI 레이아웃을 미리 제작하여 상기 UI 레이아웃 중 하나를 선택하여 스크린 사이즈를 추가하는 제2 단계; 및
N-스크린 프리뷰어를 통해 사용자가 추가한 스크린 사이즈 별 각 화면을 확인하는 제3 단계;를 포함하여 구성된 것을 특징으로 하는 N-스크린 적용을 위한 웹 어플리케이션 UI 저작 방법.
청구항 9에 있어서,
N-스크린 매니저를 통해 사용자 혹은 개발자가 원하는 적어도 하나 이상의 스크린 사이즈의 디자인과 템플릿을 생성하여 추가할 수 있도록 하여, 상기 사용자 혹은 개발자가 자신의 디자인과 템플릿을 관리할 수 있도록 하는 제4 단계;를 더 포함하여 구성된 것을 특징으로 하는 N-스크린 적용을 위한 웹 어플리케이션 UI 저작 방법.
청구항 10에 있어서,
상기 제4 단계는,
원하는 스크린 사이즈에 맞게 미디어 쿼리를 추가할 수 있는 사용자 입력 인터페이스를 제공하며, 상기 미디어 쿼리를 추가하는 것은 설명, 스크린 사이즈 및 CSS 파일을 첨부하여 미디어 쿼리를 추가할 수 있도록 하는 제5 단계;를 더 포함하는 것을 특징으로 하는 N-스크린 적용을 위한 웹 어플리케이션 UI 저작 방법.