KR20090020233A

KR20090020233A - System and method for managing user interface of wired/wireless information terminal and wired/wireless information terminal having a function of managing user interface

Info

Publication number: KR20090020233A
Application number: KR1020070084819A
Authority: KR
Inventors: 조병호; 김증섭; 김동환; 최병걸
Original assignee: (주)모비루스
Priority date: 2007-08-23
Filing date: 2007-08-23
Publication date: 2009-02-26
Also published as: KR100950994B1

Abstract

A system and method for managing user interface of wired/wireless information terminal and wired/wireless information terminal having a function of managing user interface are provided to improve the UI processing performance by performing parsing and formatting of 'the UI document of markup language in advance. The terminal engine(110) comprises the UI(User Interface) administration unit(210), and the storage(220) and the browser engine(230). The UI administration unit comprises the UI handler(212) and UI update(214). The UI administration unit controls the overall procedure relating to the production of the UI screen. The UI handler performs 'the command relating to the loading and output of UI. The storage comprises the rendering data storage(222) and the user database(224). The storage stores the UI related information. The browser engine comprises the renderer(232), the markup document parser(234), the CSS parser(236), the java script engine(238), data generator(240), the flash engine(242) and transport module(244).

Description

System and method for managing user interface of wired / wireless information terminal and wired / wireless information terminal having a function of managing user interface}

본 발명은 유무선 정보기기의 사용자 인터페이스 관리 시스템 및 방법, 그리고 사용자 인터페이스 관리기능을 구비한 유무선 정보기기에 관한 것으로, 보다 상세하게는, 사용자의 취향이나 목적에 부합하도록 유무선 정보기기의 사용자 인터페이스의 변경이 가능하도록 하고 사용자 인터페이스의 처리 속도를 향상시킬 수 있는 유무선 정보기기의 사용자 인터페이스 관리 시스템 및 방법, 그리고 사용자 인터페이스 관리기능을 구비한 유무선 정보기기에 관한 것이다.The present invention relates to a system and method for managing a user interface of a wired / wireless information device, and a wired / wireless information device having a user interface management function. More specifically, the user interface of the wired / wireless information device can be changed to meet a user's taste or purpose. The present invention relates to a user interface management system and method for a wired / wireless information device, and to a wired / wireless information device having a user interface management function.

통신기술 및 단말기 제조기술의 발달에 따라 다양한 기능을 가진 다양한 형태의 정보기기가 보급되어 사용되고 있다. 이러한 고사양의 정보기기를 통해 보다 많은 응용 서비스가 제공되고 있으며, 이에 따라 정보기기에 표시되는 사용자 인터페이스(User Interface : UI) 화면은 정보기기에 표시되는 초기화면의 역할보다 각종 서비스에의 접근을 용이하게 하기 위한 역할이 부각되고 있다. 이와 더불어 UI 화면을 정보기기 사용자의 다양한 개성과 요구에 부합할 수 있도록 구성하고자 하는 노력이 시도되고 있다. According to the development of communication technology and terminal manufacturing technology, various types of information devices having various functions have been widely used. More application services are provided through these high-end information devices, and thus, a user interface (UI) screen displayed on the information device makes access to various services easier than the initial screen displayed on the information device. Its role is to be highlighted. In addition, efforts have been made to construct UI screens to meet various personalities and needs of users of information devices.

일예로, 현재의 이동통신 단말기는 텍스트 기반 또는 그래픽 디스플레이로부터 사용자에 의해 선택가능한 메뉴 구동 옵션을 사용자에게 제공한다. 이동통신 단말기에서 제공된 메뉴 옵션들은 예를 들어 디렉토리 리스팅(directory listing), 실행 프로그램 리스트, 일정정보 등과 같이 이동통신 단말기 자체에 구비된 데이터베이스들로의 액세스를 제공할 뿐만 아니라, 통신 기반 구조내에 위치한 응용 프로그램 및 서비스에 접근하기 위해 필요한 통로를 제공한다.For example, current mobile communication terminals provide the user with menu driven options selectable by the user from a text based or graphical display. Menu options provided in the mobile terminal not only provide access to the databases provided on the mobile terminal itself, for example directory listings, executable program lists, schedule information, etc., but also applications located within the communication infrastructure. Provide the paths needed to access programs and services.

이때 서비스 및 응용 프로그램으로의 접근을 위해 액세스가 과도한 메뉴 이동(즉, 메뉴 선택을 위한 사용자의 버튼 조작)이 야기되는 경우에 사용자가 희망하는 정보의 위치 확인 및 다양한 서비스의 이용에 있어서 사용자에게 부담이 될 수 있다. 아울러 무선 애플리케이션 프로토콜(Wireless Application Protocol : WAP)을 이용하는 무선 인터넷 접속은 일반적으로 서비스 포털이 제공하는 메뉴들을 클릭함으로써 수행된다. 이때 각각의 메뉴들을 포함하고 있는 UI 화면은 일반적으로 각각의 단말에 고정되어 있어 사용자에 의한 변경이 불가능하다. In this case, the burden on the user in locating the information desired by the user and using various services when the access causes excessive menu movement (that is, user's button operation for menu selection) for access to the service and the application. This can be In addition, wireless Internet access using the Wireless Application Protocol (WAP) is generally accomplished by clicking menus provided by the service portal. In this case, the UI screen including the respective menus is generally fixed to each terminal, and thus cannot be changed by the user.

이러한 UI 화면 처리 방법은 한국특허출원번호 제10-2001-0075506호에 개시되어 있다. 해당 특허의 공개공보에는 WML(Wireless Markup Language)로 UI를 표현하고, UI 태스크에서 처리되던 UI 화면의 상태천이를 WAP 브라우저에 의해 처리하는 기술구성이 개시되어 있다. 그러나 WAP 브라우저 역시 UI 태스크에 붙어 돌기 때문에 별도의 태스크를 브라우저에 두지 않는 한 전체 UI를 처리할 수 없는 문제 가 있다. 또한 해당 특허에서는 UI를 WML로 표현하고 있어 CSS(Cascading Styles Sheets)나 자바스크립트(javascript)를 사용할 수 없다는 문제가 있다. Such a UI screen processing method is disclosed in Korean Patent Application No. 10-2001-0075506. The publication of this patent discloses a technical configuration that expresses the UI in WML (Wireless Markup Language) and processes the state transition of the UI screen processed by the UI task by the WAP browser. However, because WAP browsers are also attached to UI tasks, there is a problem that the entire UI cannot be processed unless a separate task is placed in the browser. In addition, the patent expresses the UI in WML, and there is a problem that CSS (Cascading Styles Sheets) or JavaScript cannot be used.

한편 한국특허출원번호 제10-2005-0117867호에는 UI 처리 장치를 UI 컴포넌트를 관리하는 1관리자, 업데이트 기능을 위한 2관리자, 브라우저 엔진 등 3가지 모듈로 구성하고, UI 화면을 출력하기 위해 XML(Extensible Markup Language)로 작성된 UI 문서를 파싱하여 얻은 DOM 데이터를 렌더링하는 방식을 취하고 있다. 그러나 이러한 방식의 경우에 기본적으로 단말기의 브라우저 엔진이 서버로부터 수신된 마크업 언어로 이루어진 UI 컴포넌트를 해석한 후 렌더링하는 구성을 취하고 있어 UI 처리 속도가 늦어지는 문제가 있다. Meanwhile, Korean Patent Application No. 10-2005-0117867 discloses a UI processing device composed of three modules: one manager for managing UI components, two managers for an update function, and a browser engine. It takes a way to render DOM data obtained by parsing a UI document written in Extensible Markup Language. However, in this case, the browser engine of the terminal basically has a configuration of interpreting and rendering a UI component composed of a markup language received from a server, thereby causing a problem of slowing down UI processing speed.

본 발명이 이루고자 하는 기술적 과제는, 정보기기의 UI 메뉴 작성에 있어서 생산성 및 유지보수성을 향상시키고, 사업자 및 사용자 본인에 의한 UI의 변경이 용이하며, 정보기기에서의 UI 처리 속도를 향상시킬 수 있는 유무선 정보기기의 사용자 인터페이스 관리 시스템 및 방법을 제공하는 데 있다.The technical problem to be achieved by the present invention is to improve the productivity and maintainability in the creation of the UI menu of the information device, easy to change the UI by operators and users themselves, and to improve the UI processing speed in the information device To provide a user interface management system and method for wired and wireless information equipment.

본 발명이 이루고자 하는 다른 기술적 과제는, 정보기기의 UI 메뉴 작성에 있어서 생산성 및 유지보수성을 향상시키고, 사업자 및 사용자 본인에 의한 UI의 변경이 용이하며, 정보기기에서의 UI 처리 속도를 향상시킬 수 있는 사용자 인터페이스 관리기능을 구비한 유무선 정보기기를 제공하는 데 있다.Another technical problem to be solved by the present invention is to improve productivity and maintainability in creating a UI menu of an information device, to easily change the UI by the operator and the user, and to improve the UI processing speed in the information device. There is provided a wired and wireless information device having a user interface management function.

본 발명이 이루고자 하는 또 다른 기술적 과제는, 정보기기의 UI 메뉴 작성에 있어서 생산성 및 유지보수성을 향상시키고, 사업자 및 사용자 본인에 의한 UI의 변경이 용이하며, 정보기기에서의 UI 처리 속도를 향상시킬 수 있는 유무선 정보기기의 사용자 인터페이스 관리 방법을 컴퓨터에서 실행시키기 위한 프로그램을 기록한 컴퓨터로 읽을 수 있는 기록매체를 제공하는 데 있다.Another technical problem to be solved by the present invention is to improve productivity and maintainability in creating a UI menu of an information device, to easily change the UI by the operator and the user, and to improve the UI processing speed in the information device. The present invention provides a computer-readable recording medium having recorded thereon a program for executing a user interface management method of a wired / wireless information device.

상기의 기술적 과제를 달성하기 위한 본 발명에 따른 유무선 정보기기의 사용자 인터페이스 관리 시스템의 바람직한 일 실시예는, 통신망을 통해 접속한 사용자 단말장치와의 데이터 송수신 경로를 제공하는 장치 인터페이스부; 마크업 언어로 작성된 UI 원본 데이터를 기초로 상기 사용자 단말장치의 렌더러가 렌더링할 수 있는 렌더링 데이터를 생성하는 렌더링 데이터 생성부; 및 상기 UI 원본 데이터 및 상기 렌더링 데이터가 저장되는 UI 데이터 저장부;를 구비한다.In accordance with another aspect of the present invention, there is provided a user interface management system for a wired / wireless information device, including: a device interface unit for providing a data transmission / reception path with a user terminal device connected through a communication network; A rendering data generation unit generating rendering data that can be rendered by a renderer of the user terminal device based on UI original data written in a markup language; And a UI data storage unit for storing the UI original data and the rendering data.

상기의 다른 기술적 과제를 달성하기 위한 본 발명에 따른 유무선 정보기기의 사용자 인터페이스 관리 방법의 바람직한 일 실시예는, 마크업 언어로 작성된 UI 원본 데이터를 기초로 통신망을 통해 접속한 사용자 단말장치의 렌더러가 렌더링할 수 있는 렌더링 데이터를 생성하는 단계; 상기 UI 원본 데이터 및 상기 렌더링 데이터를 저장하는 단계; 및 상기 렌더링 데이터를 상기 사용자 단말장치에 제공하는 단계;를 갖는다.In accordance with another aspect of the present invention, there is provided a method of managing a user interface of a wired / wireless information device according to an embodiment of the present invention, wherein a renderer of a user terminal device connected through a communication network based on UI original data written in a markup language. Generating renderable rendering data; Storing the UI original data and the rendering data; And providing the rendering data to the user terminal device.

상기의 다른 기술적 과제를 달성하기 위한 본 발명에 따른 유무선 정보기기의 사용자 인터페이스 관리 방법의 바람직한 다른 실시예는, 통신망을 통해 UI 데이터 관리 서버로부터 수신된 마크업 언어로 작성된 UI 원본 데이터를 기초로 상기 UI 데이터 관리 서버가 생성한 렌더링 데이터를 저장하는 단계; 사용자에 의해 발생된 키 이벤트 또는 사용자 단말장치에 의해 발생된 이벤트를 입력받는 단계; 및 상기 이벤트에 대응하는 렌더링 데이터를 독출하여 UI 화면을 생성하는 단계;를 갖는다.Another preferred embodiment of a method for managing a user interface of a wired / wireless information device according to the present invention for achieving the above technical problem is based on UI original data written in markup language received from a UI data management server through a communication network. Storing rendering data generated by the UI data management server; Receiving a key event generated by a user or an event generated by a user terminal device; And generating rendering of the UI screen by reading the rendering data corresponding to the event.

상기의 또 다른 기술적 과제를 달성하기 위한 본 발명에 따른 사용자 인터페이스 관리기능을 구비한 유무선 정보기기의 바람직한 일 실시예는, 통신망을 통해 UI 데이터 관리 서버로부터 수신된 마크업 언어로 작성된 UI 원본 데이터를 기초로 상기 UI 데이터 관리 서버가 생성한 렌더링 데이터가 저장되는 저장부; 사용자에 의해 발생된 키 이벤트 또는 사용자 단말장치에 의해 발생된 이벤트에 대응하는 UI(User Interface) 화면을 생성하도록 지시하는 UI 화면생성 명령을 출력하는 UI 관리부; 및 상기 UI 화면생성 명령이 입력되면, 상기 저장부로부터 상기 이벤트에 대응하는 렌더링 데이터를 독출하여 UI 화면을 생성하는 브라우저 엔진;을 구비한다.In accordance with another aspect of the present invention, there is provided a wired / wireless information device having a user interface management function according to the present invention, wherein the UI original data written in a markup language received from a UI data management server through a communication network. A storage unit storing rendering data generated by the UI data management server based on the storage unit; A UI manager for outputting a UI screen generation command instructing to generate a UI screen corresponding to a key event generated by a user or an event generated by a user terminal device; And a browser engine configured to read the rendering data corresponding to the event from the storage to generate a UI screen when the UI screen generation command is input.

본 발명에 따른 유무선 정보기기의 사용자 인터페이스 관리 시스템 및 방법, 그리고 사용자 인터페이스 관리기능을 구비한 유무선 정보기기에 의하면, 마크업 언어로 작성된 UI 문서를 사전에 파싱 및 포매팅하여 생성한 UI 렌더링 데이터를 기초로 UI 화면을 출력함으로써 UI 처리 성능을 향상시킬 수 있다. 또한 서버에서 업데이트용 UI 렌더링 데이터를 제작한 후 이를 정보기기에 제공함으로써 UI 렌더링 데이터의 원격 업데이트가 가능하며, 정보기기에 UI 렌더링 데이터의 제작기능을 구현함으로써 사용자에 의한 UI의 제작 및 업데이트가 가능하다. According to the user interface management system and method of the wired / wireless information device and the wired / wireless information device having a user interface management function, UI rendering data generated by parsing and formatting a UI document written in a markup language in advance UI processing performance can be improved by outputting a UI screen. In addition, the UI rendering data can be remotely updated by providing the UI rendering data for update at the server and then providing the information to the information apparatus, and the production and updating of the UI by the user is possible by implementing the UI rendering data in the information apparatus. Do.

이하에서 첨부된 도면들을 참조하여 본 발명에 따른 유무선 정보기기의 사용자 인터페이스 관리 시스템 및 방법, 그리고 사용자 인터페이스 관리기능을 구비한 유무선 정보기기의 바람직한 실시예에 대해 상세하게 설명한다.Hereinafter, a user interface management system and method for a wired / wireless information device and a wired / wireless information device having a user interface management function according to the present invention will be described in detail with reference to the accompanying drawings.

도 1은 전체 시스템의 구성을 도시한 도면이다.1 is a diagram illustrating a configuration of an entire system.

도 1을 참조하면, 전체 시스템은 단말 엔진(110), 서버 엔진(120) 및 데스크탑 업데이트 모듈(130)로 구성된다.Referring to FIG. 1, the entire system includes a terminal engine 110, a server engine 120, and a desktop update module 130.

단말 엔진(110)과 서버 엔진(120)은 유무선 인터넷, 유무선 전화망 등과 같 은 유무선 통신망을 통해 연결된다. 또한 단말 엔진(110)과 데스크탑 업데이트 모듈(130)은 블루투스, WiFi, WAP, 무선랜 등의 무선 통신 방식 또는 USB 등의 유선 통신 방식으로 연결된다.The terminal engine 110 and the server engine 120 are connected through a wired or wireless communication network such as a wired / wireless internet or a wired / wireless telephone network. In addition, the terminal engine 110 and the desktop update module 130 are connected by a wireless communication method such as Bluetooth, WiFi, WAP, WLAN, or wired communication method such as USB.

단말 엔진(110)은 정보기기에 탑재되어 UI 렌더링 데이터로 구성된 UI를 사용자 또는 사업자의 명령에 따라 실행하고 업데이트하는 역할을 수행한다. 이를 위해 단말 엔진(110)은 UI 태스크(task)와 별도의 태스크로 동작하여 정보기기에서부터 발생하는 이벤트를 자체 이벤트 핸들러를 통해 처리하여 그 결과를 단말 엔진(110)을 통해 사용자에게 출력하며, 자바스크립 엔진을 통해 정보기기의 응용 프로그램을 실행하게 한다. The terminal engine 110 executes and updates a UI mounted on an information device and configured with UI rendering data according to a user or operator's command. To this end, the terminal engine 110 operates as a separate task from the UI task (task) to process an event generated from the information device through its own event handler and output the result to the user through the terminal engine 110, Java The script engine allows the application of information devices to run.

도 2는 단말 엔진(110)의 상세한 구성을 도시한 도면이다.2 is a diagram illustrating a detailed configuration of the terminal engine 110.

도 2를 참조하면, 단말 엔진(110)은 UI 관리부(210), 저장부(220) 및 브라우저 엔진(230)으로 구성된다. 2, the terminal engine 110 includes a UI manager 210, a storage 220, and a browser engine 230.

UI 관리부(210)는 UI 핸들러(212)와 UI 업데이터(214)로 이루어져, UI 화면의 생성과 관련된 전반적인 절차를 제어한다. UI 핸들러(212)는 사용자에 의해 발생하는 키 이벤트 및 단말에서 발생한 이벤트 등을 UI 태스크를 통해 전달받아 UI의 로딩 및 출력과 관련된 명령을 수행한다. 정보기기에서 UI 태스크는 사용자 이벤트와 정보기기 이벤트를 수신하면 이벤트 테이블을 참고하여 적절한 UI 동작을 수행하고, 정보기기의 기능을 실행시키는 역할을 수행한다. 이때 브라우저 기반의 UI 플랫폼에서는 UI 매니저가 기존 정보기기의 UI 태스크와 더불어 이벤트의 처리를 나누어 수행하며, 사용되는 모든 이벤트들을 테이블 형태로 분류한 후 사용자 이벤트가 발생할 경우 UI 관리부(210)가 사용자 이벤트를 먼저 처리하고 정보기기에 전달되어야 하는 이벤트들만 정보기기의 UI 태스크에 전달한다. 마찬가지로 정보기기에서 발생하는 이벤트들도 UI 태스크보다 먼저 수신하여 UI 동작을 처리하고 UI 태스크로 반환한다. 이와 같이 처리함으로써 기존의 UI 태스크가 수행하던 모든 동작들은 UI 관리부(210)를 통해 선처리될 수 있다. UI 업데이터(214)는 서버 엔진(120) 또는 데스크탑 업데이트 모듈(130)을 통해 수신된 이벤트에 따라 UI 렌더링 데이터를 다운로드받고 업데이트하여 설치한다.The UI manager 210 includes a UI handler 212 and a UI updater 214 to control an overall procedure related to generation of a UI screen. The UI handler 212 receives a key event generated by a user and an event generated in the terminal through a UI task, and performs a command related to loading and output of the UI. In the information device, when the UI task receives a user event and the information device event, the UI task performs a proper UI operation by referring to the event table and executes a function of the information device. At this time, in the browser-based UI platform, the UI manager divides the processing of the event with the UI task of the existing information device, and classifies all the used events into a table form, and then, if a user event occurs, the UI manager 210 receives the user event. First, only events that should be delivered to the information device are delivered to the UI task of the information device. Similarly, events occurring in the information device are received before the UI task to process the UI operation and return to the UI task. In this way, all operations performed by the existing UI task may be preprocessed through the UI manager 210. The UI updater 214 downloads, updates, and installs UI rendering data according to an event received through the server engine 120 or the desktop update module 130.

저장부(220)에는 UI 관련 정보가 저장된다. 저장부(220)는 렌더링 데이터 저장부(222)와 사용자 DB(224)로 구성된다. 렌더링 데이터 저장부(222)에는 서버 엔진(120) 또는 데스크탑 업데이트 모듈(130)로부터 입력된 UI를 구성하는 렌더링 데이터가 저장된다. 사용자 DB(224)에는 서버 엔진(120) 또는 데스크탑 업데이트 모듈(130)과 동기화를 하기 위해 사용자의 UI 리스트가 저장된다. The storage unit 220 stores UI related information. The storage unit 220 includes a rendering data storage unit 222 and a user DB 224. The rendering data storage unit 222 stores rendering data constituting the UI input from the server engine 120 or the desktop update module 130. The user DB 224 stores a UI list of the user for synchronizing with the server engine 120 or the desktop update module 130.

브라우저 엔진(230)은 UI 데이터를 렌더링하기 위한 핵심 엔진으로 온라인 상황에서는 브라우저 엔진으로 사용되고 오프라인 상황에선 UI 엔진으로 사용된다. 브라우저 엔진(230)은 렌더러(232), 마크업 문서 파서(234), CSS 파서(236), 자바스크립트 엔진(238), 데이터 생성기(240), 플래시 엔진(242) 및 전송 모듈(244)로 구성된다.The browser engine 230 is a core engine for rendering UI data and is used as a browser engine in an online situation and as a UI engine in an offline situation. Browser engine 230 passes to renderer 232, markup document parser 234, CSS parser 236, JavaScript engine 238, data generator 240, flash engine 242, and transport module 244. It is composed.

렌더러(232)는 UI를 구성하는 렌더링 데이터를 렌더링하여 정보기기의 출력수단에 출력한다. 마크업 문서 파서(234)는 웹 컨텐츠에 포함된 XHTML 문서 또는 HTML 문서에 포함되어 있는 각각의 구성요소를 파싱하여 트리 형태의 자료구조인 DOM(Document Object Model) 트리를 생성한다. CSS 파서(234)는 웹 컨텐츠에 포함된 CSS(Cascading Styles Sheets) 파일을 파싱하여 트리 형태의 자료구조인 CSS 트리를 생성한다. 자바스크립트 엔진(236)은 웹 컨텐츠에 정의되어 있는 자바스크립트 코드에 대응하는 바이트 코드를 생성한다. 이때 자바스크립트 엔진(236)은 오프라인 모드에서는 UI 렌더링 데이터에 포함되어 있는 자바스크립트를 해석하여 단말의 기능을 구동한다. 데이터 생성기(240)는 DOM 트리 노드의 태그에 CSS 트리 및 바이트 코드를 적용하여 웹 컨텐츠에 포함되어 있는 각각의 구성요소들의 속성, 크기 및 위치정보를 포함하는 렌더링 데이터를 생성한다. 플래시 엔진(242)은 웹 컨텐츠 및 UI 렌더링 데이터에 포함되어 있는 임베디드 또는 스탠드 얼론 플래시 컨텐츠를 재생한다. 전송 모듈(244)은 HTTP 프로토콜 스택으로서, 웹 컨텐츠를 수신하고 UI 렌더링 데이터 및 업데이트용 UI 렌더링 데이터를 수신한다. The renderer 232 renders rendering data constituting the UI and outputs the rendering data to the output device of the information apparatus. The markup document parser 234 parses each component included in the XHTML document or the HTML document included in the web content to generate a DOM (Document Object Model) tree, which is a tree-type data structure. The CSS parser 234 parses Cascading Styles Sheets (CSS) files included in web content to generate a CSS tree, which is a tree-type data structure. The JavaScript engine 236 generates byte code corresponding to the JavaScript code defined in the web content. At this time, the JavaScript engine 236 interprets the JavaScript included in the UI rendering data in the offline mode to drive the function of the terminal. The data generator 240 applies the CSS tree and the byte code to the tag of the DOM tree node to generate rendering data including the attribute, size, and position information of each component included in the web content. The flash engine 242 plays the embedded or standalone flash content included in the web content and the UI rendering data. The delivery module 244 is an HTTP protocol stack that receives web content and receives UI rendering data and UI rendering data for updating.

서버 엔진(120)은 사업자나 제조사 측에 위치하고 UI 렌더링 데이터를 생성 및 보관하여 단말 엔진(110)에 제공하거나 사용자가 업데이트할 수 있는 환경을 제공한다. UI 렌더링 데이터의 업데이트를 위해 서버 엔진(120)은 UI 렌더링 데이터를 업데이트하기 위한 서버측 구성모듈로서 업데이트용 UI 렌더링 데이터가 제작되면 사용자에게 업데이트 이벤트를 전송한다. 이와 달리 사용자가 직접 서버에 접속하여 정보기기의 사양에 맞는 여러 UI 렌더링 데이터를 스스로 다운로드받을 수도 있다. The server engine 120 is located on the operator or manufacturer side and generates and stores UI rendering data to provide the terminal engine 110 or provide an environment that can be updated by the user. In order to update the UI rendering data, the server engine 120 is a server-side configuration module for updating the UI rendering data and transmits an update event to the user when the UI rendering data for updating is produced. Alternatively, the user may directly connect to the server and download various UI rendering data that meets the specifications of the information device.

도 3은 서버 엔진(120)의 상세한 구성을 도시한 도면이다.3 is a diagram illustrating a detailed configuration of the server engine 120.

도 3을 참조하면, 서버 엔진(120)은 UI 저작도구(310), 저장부(320) 및 업데 이트 서버(330)로 구성된다.Referring to FIG. 3, the server engine 120 includes a UI authoring tool 310, a storage 320, and an update server 330.

UI 저작도구(310)는 서버측에서 제작된 UI를 기초로 UI 렌더링 데이터를 생성하는 모듈로서, UI 편집기(312)와 UI 생성기(314)로 구성된다. UI 편집기(312)는 XHTML, CSS, 자바스크립트 등을 이용하여 단말에 사용되는 UI를 저작하는 도구로서 기존에 사용되는 웹사이트 저작도구에 해당한다. UI 생성기(314)는 UI 편집기(312)에 의해 제작된 UI 원본 데이터를 단말 엔진(110)의 브라우저 엔진(230)이 렌더링할 수 있는 데이터로 변환하는 장치로서, 마크업 문서 파서(314-1), CSS 파서(314-2), 자바스크립트 엔진(314-3)으로 구성된다. 이때 마크업 문서 파서(314-1), CSS 파서(314-2), 자바스크립트 엔진(314-3) 및 데이터 생성기(314-4)의 구성 및 기능은 도 2를 참조하여 설명한 마크업 문서 파서(234), CSS 파서(236), 자바스크립트 엔진(238) 및 데이터 생성기(240)와 동일하므로 상세한 설명은 생략한다. 다만, UI 생성기(314)에 의한 UI 렌더링 데이터의 생성과정과 관련하여, 도 4에 도시된 바와 같이, UI 생성기(314)는 main.xhtml(410), main.css(420) 및 main.js(430)로 구현된 UI 콘텐츠를 각각 DOM tree(440), CSS tree(450), Bytecode(460)로 변환하며, 이들은 결과적으로 UI 렌더링 데이터(470)로 전환되어 정보기기의 렌더러에 의해 출력수단에 출력된다. The UI authoring tool 310 is a module for generating UI rendering data based on a UI produced on the server side, and includes a UI editor 312 and a UI generator 314. The UI editor 312 is a tool for authoring a UI used for a terminal using XHTML, CSS, JavaScript, and the like, and corresponds to a website authoring tool used in the past. The UI generator 314 is a device that converts the UI original data produced by the UI editor 312 into data that can be rendered by the browser engine 230 of the terminal engine 110. The markup document parser 314-1 ), A CSS parser 314-2, and a JavaScript engine 314-3. In this case, the configuration and functions of the markup document parser 314-1, the CSS parser 314-2, the JavaScript engine 314-3, and the data generator 314-4 are described with reference to FIG. 2. 234, the CSS parser 236, the JavaScript engine 238, and the data generator 240 are the same, and thus detailed description thereof will be omitted. However, in relation to the process of generating the UI rendering data by the UI generator 314, as illustrated in FIG. 4, the UI generator 314 may include main.xhtml 410, main.css 420, and main.js. UI content implemented at 430 is converted into DOM tree 440, CSS tree 450, and Bytecode 460, respectively, which are converted into UI rendering data 470 and outputted by the renderer of the information device. Is output to

저장부(320)에는 UI 데이터 및 사용자/정보기기에 대한 UI 정보가 저장된다. 저장부(320)는 UI 저장부(322), 렌더링 데이터 저장부(324), 사용자 DB(326) 및 정보기기 DB(328)로 구성된다. UI 저장부(322)에는 UI 편집기(312)에 의해 생성된 UI 원본 데이터가 저장된다. 렌더링 데이터 저장부(324)에는 UI 생성기(314)에 의해 생성된 UI 렌더링 데이터가 저장된다. 사용자 DB(326)에는 사용자가 업데이트한 UI의 리스트가 저장된다. 이러한 사용자가 업데이트한 UI 리스트의 관리를 통해 사용자에 의한 UI 사용에 대한 과금이 가능하다. 정보기기 DB(328)에는 정보기기에 따른 UI의 리스트가 저장된다. 정보기기 DB(328)가 관리하는 UI 리스트는 사용자가 UI를 업데이트 하기 위해 서버에 접속하였을 경우 사용자의 정보기기에 적합한 UI 데이터를 검색하기 위해 사용된다.The storage 320 stores UI data and UI information on the user / information device. The storage unit 320 includes a UI storage unit 322, a rendering data storage unit 324, a user DB 326, and an information device DB 328. The UI storage unit 322 stores UI original data generated by the UI editor 312. The rendering data storage unit 324 stores UI rendering data generated by the UI generator 314. The user DB 326 stores a list of UI updated by the user. Through the management of the UI list updated by the user, it is possible to charge for using the UI by the user. The information device DB 328 stores a list of UIs corresponding to the information device. The UI list managed by the information device DB 328 is used to retrieve UI data suitable for the user's information device when the user connects to the server to update the UI.

UI 업데이트 서버(330)는 UI의 업데이트 전반을 담당하며, 서버 관리부(332), 서버부(334) 및 전송모듈(336)로 구성된다. 서버 관리부(332)는 UI 업데이트의 전반적인 절차를 관리한다. 서버부(334)는 UI 업데이트를 웹을 통해 실행 할 수 있도록 작성된 ASP 기반의 웹 컨텐츠를 제공하는 웹 사이트를 운영하는 모듈이다. 전송모듈(336)은 UI를 정보기기에 제공하기 위해 정보기기와의 유무선 통신 프로토콜을 탑재한 장치 인터페이스 수단이다. The UI update server 330 is responsible for the overall update of the UI, and comprises a server manager 332, a server 334, and a transmission module 336. The server manager 332 manages the overall procedure of the UI update. The server unit 334 is a module for operating a web site that provides ASP-based web content written to execute UI updates via the web. The transmission module 336 is a device interface means equipped with a wired or wireless communication protocol with the information device to provide the UI to the information device.

종래의 UI 관리 방법은 정보기기가 XML이나 WML로 구성된 UI 페이지 메뉴를 파싱하여 DOM을 구성한 후 렌더링을 위한 데이터를 생성하여 화면에 출력하고 있으나, 이 경우 UI 메뉴의 이동에 있어 처리 속도가 느리다는 문제가 있다. 이와 달리 본 발명에서는 XHTML로 이루어진 UI 페이지 메뉴를 서버 엔진(120)이 UI 생성 도구를 통해 사전에 파싱 및 포매팅하여, 이로부터 생성한 UI 렌더링 데이터를 정보기기에 제공함으로써 정보기기에서 UI 메뉴 데이터를 파싱하여 DOM을 만들고 렌더링을 위한 데이터를 생성하는 과정을 생략할 수 있다. 따라서 정보기기에서 UI를 출력하기 위해 소요되는 처리시간을 단축할 수 있다. In the conventional UI management method, an information device parses a UI page menu composed of XML or WML, constructs a DOM, generates data for rendering, and outputs it to the screen. However, in this case, processing speed of moving the UI menu is slow. there is a problem. In contrast, in the present invention, the UI page menu made of XHTML is parsed and formatted in advance by the server engine 120 through the UI generating tool, and UI information is generated from the information device by providing the UI rendering data generated therefrom to the information device. You can skip parsing to create the DOM and generate data for rendering. Therefore, the processing time required to output the UI from the information device can be shortened.

또한 UI 기본 데이터를 XHTML로 구성하면, 다양한 CSS를 사용할 수 있고 자바스크립트를 사용하여 정보기기의 모든 기능들을 제어할 수 있다. 특히 본 발명은 모듈의 실행 명령어들을 인터페이스화하고 이를 자바스크립트 엔진에 등록시켜 UI 생성도구에서 XHTML 페이지를 파싱할 때 자바스크립트 코드와 모듈의 인터페이스 코드를 해석하여 컴파일되도록 한다. 이와 같이 처리함으로써 정보기기의 모든 어플리케이션을 자바스크립트를 이용해 UI 상에서 사용할 수 있게 된다.Also, if the UI basic data is composed in XHTML, various CSS can be used and JavaScript can be used to control all the functions of the information device. In particular, the present invention interfaces the execution instructions of the module and registers it in the JavaScript engine so that when the XHTML page is parsed by the UI generator, the JavaScript code and the interface code of the module are interpreted and compiled. By doing this, all applications of the information device can be used on the UI using JavaScript.

나아가 이미지가 많이 포함된 UI 메뉴 페이지일 경우에 디코딩 시간도 성능에 영향을 미치는 요소이다. 본 발명은 UI 메뉴를 UI 생성도구에 의해 생성된 렌더링 데이터가 정보기기에 저장되는 순간 UI 원본 데이터에 포함되어 있는 이미지 데이터를 아이콘으로 변형하여 저장함으로써 렌더링 단계에서 이미지를 디코딩하는 과정을 생략할 수 있어 메뉴의 렌더링 시간을 줄일 수 있다.Furthermore, decoding time also affects performance when the UI menu page contains many images. The present invention can omit the process of decoding the image in the rendering step by storing the UI menu by transforming the image data included in the UI original data into an icon when the rendering data generated by the UI generating tool is stored in the information device. This can reduce the rendering time of the menu.

한편 대부분의 정보기기에 적용되는 UI는 시나리오 기반으로 제작되고 있다. 따라서 하나의 UI 화면에서 처리해야 하는 이벤트(event), 콜백(callback) 함수, UI 화면을 보여주기 위한 리소스들의 정보를 제조사 별로 자체적인 스크립트 형식의 포맷 위에 구성하고 있다. 그러나 제조사에서 생산하는 단말의 수가 많아지고 단말마다 컨셉에 따라 UI의 형태가 달라지므로 UI 화면을 구성하는 작업은 매번 단말의 리소스와 연동기능의 인터페이스에 맞게 반복적으로 구현되어야 한다. 본 발명에서는 UI를 XHTML과 같은 마크업 언어에 의해 작성함으로써 기존의 웹컨텐츠 에디터에 의해 용이하게 제작할 수 있으며, 관리에 있어 메뉴별로 계층적으로 저장 및 로딩할 수 있다. Meanwhile, UIs applied to most information devices are produced based on scenarios. Therefore, information on resources, event, callback function, and UI screen that need to be processed in one UI screen are composed in each script format by manufacturer. However, since the number of terminals produced by the manufacturer increases and the shape of the UI varies according to the concept of each terminal, the task of configuring the UI screen must be repeatedly implemented in accordance with the interface of the resource and the interworking function of the terminal each time. In the present invention, the UI is created by a markup language such as XHTML, so that the UI can be easily produced by an existing web content editor, and can be stored and loaded hierarchically for each menu in management.

데스크탑 업데이트 모듈(130)은 사용자가 별도로 자신만의 UI 데이터를 생성하여 자신의 정보기기에 업데이트할 수 있게 하는 모듈이다. 이와 같이 데스크탑 업데이트 모듈(130)은 사용자가 자신만의 개성화된 UI를 업데이트하기 위해 스스로 UI 렌더링 데이터를 제작하여 자신의 정보기기에 로딩할 수 있도록 한다. The desktop update module 130 is a module that allows a user to separately create their own UI data and update it on their information device. As such, the desktop update module 130 allows the user to make UI rendering data and load it on his or her information device in order to update his or her personalized UI.

도 5는 데스크탑 업데이트 모듈(130)의 상세한 구성을 도시한 도면이다.5 illustrates a detailed configuration of the desktop update module 130.

도 5를 참조하면, 데스크탑 업데이트 모듈(130)은 UI 저작도구(510), 저장부(520) 및 업데이트부(530)로 구성된다.Referring to FIG. 5, the desktop update module 130 includes a UI authoring tool 510, a storage 520, and an updater 530.

UI 저작도구(510)는 서버 엔진(120)에 구비된 UI 저작도구(310)의 구성 및 기능과 동일하다. 저장부(520)에는 UI 편집기에 의해 생성된 UI 원본 데이터 및 UI 생성기에 의해 생성된 UI 렌더링 데이터가 저장된다. 업데이트부(530)는 정보기기에 UI를 업데이트하는 모듈로서, 제어부(532) 및 전송모듈(534)로 구성된다. 업데이트부(530)는 정보기기에 로딩되어 있는 UI 렌더링 데이터와 저장부(520)에 저장되어 있는 UI 렌더링 데이터의 버전을 비교하여 정보기기의 UI 렌더링 데이터의 업데이트 여부를 결정한다. 제어부(532)는 UI 렌더링 데이터의 생성, 정보기기로의 전송 등 데스크탑 업데이트 모듈(130)의 전반적인 기능을 제어한다. 전송모듈(534)은 USB, 블루투스 등의 유무선 통신수단을 통해 정보기기로 생성한 UI 렌더링 데이터를 전송한다. The UI authoring tool 510 is identical to the configuration and function of the UI authoring tool 310 included in the server engine 120. The storage unit 520 stores UI original data generated by the UI editor and UI rendering data generated by the UI generator. The updater 530 is a module for updating the UI on the information device, and includes a controller 532 and a transmission module 534. The updater 530 determines whether to update the UI rendering data of the information device by comparing the UI rendering data loaded in the information device with the version of the UI rendering data stored in the storage unit 520. The controller 532 controls overall functions of the desktop update module 130, such as generation of UI rendering data and transmission to the information device. The transmission module 534 transmits UI rendering data generated by the information device through wired or wireless communication means such as USB, Bluetooth, and the like.

도 6은 본 발명에 따른 서버 모듈(120)에서 UI 렌더링 데이터를 생성하는 과정을 도시한 흐름도이다.6 is a flowchart illustrating a process of generating UI rendering data in the server module 120 according to the present invention.

도 6을 참조하면, 사업자나 제조사의 UI 서버에서 특정한 UI 데이터를 생성 하여 사용자의 정보기기에 제공하거나 사용자의 정보기기에 로딩되어 있는 UI 데이터를 업데이트한다. 이를 위해 서버 엔진(120)은 UI 편집기(312)를 통해 제작된 UI 원본 데이터를 UI 저장부(322)에 저장한다(S600). 다음으로 서버 엔진(120)의 마크업 문서 파서(314-1)는 도 7에 도시된 바와 같은 main.xhtml이란 UI 원본 데이터의 각 구성요소를 파싱하여 트리형태의 자료구조(mContetentDOM)를 생성한다(S610). 이때 서버 엔진(120)의 CSS 파서(314-2) 및 자바스크립트 엔진(314-3)는 CSS 및 자바스크립트 코드들을 파싱하여 룰트리(mCSSRuleTree) 및 바이트코드(mJavaByteCoded)와 같은 객체를 생성한다(S620). 다음으로 서버 엔진(120)의 데이터 생성부(314-4)는 DOM 노드의 태그에 CSS와 자바스크립트 값 등을 적용하여 실제로 각 구성요소들의 속성, 크기 및 위치정보를 모두 담고 있는 UI 렌더링 데이터(mRenderdata)를 생성한다(S630). 다음으로 서버 엔진(120)은 생성된 UI 렌더링 데이터를 렌더링 데이터 저장부(324)에 저장한다(S640). 마지막으로 서버 엔진(120)은 UI 업데이트 서버(330)를 통해 UI 렌더링 데이터를 정보기기에 제공한다(S650).Referring to FIG. 6, specific UI data is generated in a UI server of an operator or a manufacturer and provided to a user's information device, or updated UI data loaded in the user's information device. To this end, the server engine 120 stores the UI original data produced through the UI editor 312 in the UI storage unit 322 (S600). Next, the markup document parser 314-1 of the server engine 120 parses each component of the UI original data of main.xhtml as shown in FIG. 7 to generate a tree-shaped data structure mContetentDOM. (S610). At this time, the CSS parser 314-2 and the JavaScript engine 314-3 of the server engine 120 parse CSS and JavaScript codes to generate objects such as a rule tree (mCSSRuleTree) and a byte code (mJavaByteCoded). S620). Next, the data generator 314-4 of the server engine 120 applies CSS and JavaScript values to a tag of a DOM node to actually render UI rendering data containing all the attributes, sizes, and position information of each component. mRenderdata) is generated (S630). Next, the server engine 120 stores the generated UI rendering data in the rendering data storage unit 324 (S640). Finally, the server engine 120 provides the UI rendering data to the information device through the UI update server 330 (S650).

도 8은 본 발명에 따른 유무선 정보기기에서 사용자 인터페이스를 실행하는 과정을 도시한 흐름도이다.8 is a flowchart illustrating a process of executing a user interface in a wired / wireless information device according to the present invention.

도 8을 참조하면, 정보기기 상에서 사용자가 UI상의 특정 메뉴를 클릭하면(S800), 정보기기에 구비된 단말 엔진(110)은 렌더링 데이터 저장부(222)로부터 클릭된 메뉴에 해당하는 UI 렌더링 데이터를 로딩한다(S810). 다음으로 단말 엔진(110)의 브라우저 엔진(230)은 로딩된 UI 렌더링 데이터를 렌더링하여 화면에 출 력한다(S820). 다음으로 사용자 입력에 의한 자바스크립트의 실행여부를 확인하고(S830), 자바스크립트가 실행되지 않을 경우 해당 입력에 해당하는 UI 렌더링 데이터를 로딩하여 출력하는 절차가 반복된다. 이와 달리 자바스크립트가 실행되면, 단말 엔진(110)은 실행되는 자바스크립트의 종류에 따라 상이한 동작을 수행한다(S840). 자바스크립트에 의해 멀티미디어 메시지 서비스 처리와 같은 어플리케이션이 실행되는 경우에는 단말 엔진(110)은 UI 태스크를 통해 실행하고 실행결과에 해당하는 UI 렌더링 데이터를 로딩하여 화면에 출력한다(S850). 이와 달리 페이지내의 갱신을 위한 자바스크립트 실행일 경우, 단말 엔진(110)은 UI 렌더링 데이터를 브라우저 엔진(230)을 통해 갱신하고 이를 렌더링하여 화면에 출력한다(S860). 이 경우 갱신된 UI 렌더링 데이터는 렌더링 데이터 저장부(222)에 저장되지 않는다.Referring to FIG. 8, when a user clicks a specific menu on the UI on the information device (S800), the terminal engine 110 included in the information device may display UI rendering data corresponding to the menu clicked from the rendering data storage unit 222. It is loaded (S810). Next, the browser engine 230 of the terminal engine 110 renders the loaded UI rendering data and outputs it to the screen (S820). Next, check whether the JavaScript is executed by the user input (S830), and if the JavaScript is not executed, the process of loading and outputting UI rendering data corresponding to the input is repeated. Unlike this, when the JavaScript is executed, the terminal engine 110 performs a different operation according to the type of JavaScript to be executed (S840). When the application such as multimedia message service processing is executed by the JavaScript, the terminal engine 110 executes the UI task through the UI task and loads UI rendering data corresponding to the execution result and outputs it to the screen (S850). Unlike this, when the JavaScript is executed for updating in the page, the terminal engine 110 updates the UI rendering data through the browser engine 230 and renders it on the screen (S860). In this case, the updated UI rendering data is not stored in the rendering data storage unit 222.

도 9는 서버에 의한 UI 데이터의 업데이트 절차를 도시한 흐름도이다.9 is a flowchart illustrating a procedure of updating UI data by a server.

도 9를 참조하면, 서버 엔진(120)은 업데이트용 UI 렌더링 데이터가 생성되면, 업데이트용 UI 데이터의 URL 및 위치정보를 정보기기로 푸시(Push) 방식으로 전송하여 사용자에게 UI 데이터의 업데이트 여부를 문의한다(S900). 다음으로 정보기기에 구비된 단말 엔진(110)으로부터 업데이트 요청이 수신되면(S910), 서버 엔진(120)은 해당 정보기기에 대응하는 업데이트용 UI 렌더링 데이터를 선택하여 정보기기로 전송한다(S920). 마지막으로 업데이트용 UI 렌더링 데이터의 전송이 완료되면, 서버 엔진(120)은 사용자 DB(326)에 업데이트된 UI 렌더링 데이터의 정보를 기록하고, 해당 사용자에 대한 과금정보를 추가한다(S930). 이와 같이 사용자 DB(326)에 반영된 업데이트 기록은 서버 엔진(120)과 단말 엔진(110) 사이의 UI 동기화를 실행하는데 이용된다. Referring to FIG. 9, when the update UI rendering data is generated, the server engine 120 transmits the URL and location information of the update UI data to the information device by pushing the information device to determine whether the UI data is updated. Inquire (S900). Next, when an update request is received from the terminal engine 110 provided in the information device (S910), the server engine 120 selects update UI rendering data corresponding to the information device and transmits it to the information device (S920). . Finally, when transmission of the UI rendering data for updating is completed, the server engine 120 records the updated UI rendering data information in the user DB 326 and adds billing information for the corresponding user (S930). The update record reflected in the user DB 326 is used to perform UI synchronization between the server engine 120 and the terminal engine 110.

도 10은 서버에 의한 UI 데이터의 업데이트시 단말 엔진의 동작을 도시한 흐름도이다.10 is a flowchart illustrating an operation of a terminal engine when updating UI data by a server.

도 10을 참조하면, 서버로부터 푸시 메시지를 통해 업데이트될 UI 데이터의 정보를 수신하면(S1000), 단말 엔진(110)은 사용자로부터 업데이트의 수락여부에 대한 입력을 기다린다(S1010). 만약 사용자가 UI 데이터의 업데이트를 수락하면, 단말 엔진(110)은 브라우저 엔진(230)의 렌더러에 의해 저장부(220)로부터 독출한 업데이트 대화창을 화면에 출력하고, 브라우저 엔진(230)의 전송모듈(244)을 통해 서버로부터 UI 데이터를 다운로드한다(S1020). 다운로드가 완료되면 단말 엔진(110)은 설정 위치의 임시 이름으로 다운로드된 UI 데이터를 저장부(220)에 저장한다(S1030). 다음으로 단말 엔진(110)은 기존의 위치에 있던 UI 데이터를 삭제하고, 임시 이름의 UI 데이터를 기존의 위치 이름으로 변경한다(S1040). 마지막으로 단말 엔진(110)은 서버와의 동기화를 위해 저장부(220)에 저장되어 있는 UI 정보를 갱신한다(S1050).Referring to FIG. 10, when receiving information of UI data to be updated through a push message from a server (S1000), the terminal engine 110 waits for an input of whether to accept an update from a user (S1010). If the user accepts the update of the UI data, the terminal engine 110 outputs an update dialog window read from the storage unit 220 by the renderer of the browser engine 230 on the screen, and the transmission module of the browser engine 230. In operation S1020, the UI data is downloaded from the server. When the download is completed, the terminal engine 110 stores the UI data downloaded with the temporary name of the setting position in the storage unit 220 (S1030). Next, the terminal engine 110 deletes the UI data in the existing location, and changes the UI data of the temporary name to the existing location name (S1040). Finally, the terminal engine 110 updates the UI information stored in the storage 220 for synchronization with the server (S1050).

도 11은 사용자에 의한 UI 데이터의 업데이트시 단말 엔진의 동작을 도시한 흐름도이다.11 is a flowchart illustrating an operation of a terminal engine when updating UI data by a user.

도 11을 참조하면, 먼저 사용자는 데스크탑 업데이트 모듈(130)을 실행하여 UI 저작도구(510)의 UI 편집기를 이용하여 UI 원본 데이터를 제작한다(S1100). 데스크탑 업데이트 모듈(130)은 제작된 UI 원본 데이터를 저장부(520)에 저장한 다(S1110). 다음으로 데스크탑 업데이트 모듈(130)은 UI 저작도구(510)의 UI 생성기를 통해 UI 원본 데이터를 기초로 UI 렌더링 데이터를 생성하여 저장부(520)에 저장한다(S1120). 다음으로 데스크탑 업데이트 모듈(130)은 제어부(532)에 의해 정보기기와의 물리적 연결을 확립한 후 생성된 UI 렌더링 데이터를 정보기기로 전송한다(S1130). UI 렌더링 데이터의 전송이 완료되면 데스크탑 업데이트 모듈(130)은 저장부(520)에 업데이트 결과를 기록한다(S1140). Referring to FIG. 11, a user first executes the desktop update module 130 to produce UI original data using the UI editor of the UI authoring tool 510 (S1100). The desktop update module 130 stores the produced UI original data in the storage unit 520 (S1110). Next, the desktop update module 130 generates UI rendering data based on the UI original data through the UI generator of the UI authoring tool 510 and stores it in the storage unit 520 (S1120). Next, the desktop update module 130 establishes a physical connection with the information device by the control unit 532 and transmits the generated UI rendering data to the information device (S1130). When the transmission of the UI rendering data is completed, the desktop update module 130 records the update result in the storage unit 520 (S1140).

도 12는 사용자의 직접 서버 접속에 의한 UI 데이터의 업데이트 과정을 도시한 흐름도이다.12 is a flowchart illustrating a process of updating UI data by a direct server connection of a user.

도 12를 참조하면, 사용자가 자신의 정보기기의 브라우저를 구동하여 사업자나 제조사의 서버에 있는 UI 사이트에 접속하면, 서버 엔진(120)은 정보기기의 사양에 따른 UI 데이터 리스트를 사용자의 정보기기로 전송한다(S1200). 이때 사용자의 정보기기 사양이 사전에 서버에 등록되어 있고, 로그인을 통해 사용자가 서버에 접속한 경우에는 서버 엔진(120)은 해당 사용자의 정보기기에 대응하는 UI 데이터만을 사용자의 정보기기로 전송한다. 다음으로, 사용자가 업데이트를 희망하는 UI 데이터를 선택하면, 서버 엔진(120)은 사용자가 선택한 UI 데이터를 사용자의 정보기기로 전송한다(S1210). 다음으로 사용자의 정보기기에 구비된 단말 엔진(110)은 브라우저 엔진(230)의 렌더러에 의해 저장부(220)로부터 독출한 업데이트 대화창을 화면에 출력하고, 브라우저 엔진(230)의 전송모듈(244)을 통해 서버로부터 UI 데이터를 다운로드한다(S1220). 다운로드가 완료되면 단말 엔진(110)은 설정 위치의 임시 이름으로 다운로드된 UI 데이터를 저장부(220)에 저장한다(S1230). 다음으로 단 말 엔진(110)은 기존의 위치에 있던 UI 데이터를 삭제하고, 임시 이름의 UI 데이터를 기존의 위치 이름으로 변경한다(S1240). 다음으로 단말 엔진(110)은 서버와의 동기화를 위해 저장부(220)에 저장되어 있는 UI 정보를 갱신한다(S1250). 마지막으로 UI 데이터의 전송이 완료되면, 서버 엔진(120)은 사용자 DB(326)에 업데이트된 UI 렌더링 데이터의 정보를 기록하고, 해당 사용자에 대한 과금정보를 추가한다(S1260).Referring to FIG. 12, when a user drives a browser of his or her information device and accesses a UI site in a server of an operator or a manufacturer, the server engine 120 displays a list of UI data according to the specification of the information device. Transmit to (S1200). At this time, if the information equipment specification of the user is registered in advance in the server, and the user accesses the server through login, the server engine 120 transmits only the UI data corresponding to the information device of the user to the user's information device. . Next, when the user selects the UI data to be updated, the server engine 120 transmits the UI data selected by the user to the user's information device (S1210). Next, the terminal engine 110 provided in the user's information device outputs an update dialog window read from the storage unit 220 by the renderer of the browser engine 230 on the screen, and the transmission module 244 of the browser engine 230. The UI data is downloaded from the server through S1220. When the download is completed, the terminal engine 110 stores the UI data downloaded with the temporary name of the setting position in the storage unit 220 (S1230). Next, the terminal engine 110 deletes the UI data at the existing location and changes the UI data of the temporary name to the existing location name (S1240). Next, the terminal engine 110 updates the UI information stored in the storage 220 for synchronization with the server (S1250). Finally, when the transmission of the UI data is completed, the server engine 120 records the updated UI rendering data information in the user DB 326, and adds the charging information for the user (S1260).

본 발명은 또한 컴퓨터로 읽을 수 있는 기록매체에 컴퓨터가 읽을 수 있는 코드로서 구현하는 것이 가능하다. 컴퓨터가 읽을 수 있는 기록매체는 컴퓨터 시스템에 의하여 읽혀질 수 있는 데이터가 저장되는 모든 종류의 기록장치를 포함한다. 컴퓨터가 읽을 수 있는 기록매체의 예로는 ROM, RAM, CD-ROM, 자기 테이프, 플로피디스크, 광데이터 저장장치 등이 있으며, 또한 캐리어 웨이브(예를 들어 인터넷을 통한 전송)의 형태로 구현되는 것도 포함한다. 또한 컴퓨터가 읽을 수 있는 기록매체는 네트워크로 연결된 컴퓨터 시스템에 분산되어 분산방식으로 컴퓨터가 읽을 수 있는 코드가 저장되고 실행될 수 있다.The invention can also be embodied as computer readable code on a computer readable recording medium. The computer-readable recording medium includes all kinds of recording devices in which data that can be read by a computer system is stored. Examples of computer-readable recording media include ROM, RAM, CD-ROM, magnetic tape, floppy disk, optical data storage, and the like, and may also be implemented in the form of a carrier wave (for example, transmission over the Internet). Include. The computer readable recording medium can also be distributed over network coupled computer systems so that the computer readable code is stored and executed in a distributed fashion.

이상에서 본 발명의 바람직한 실시예에 대해 도시하고 설명하였으나, 본 발명은 상술한 특정의 바람직한 실시예에 한정되지 아니하며, 청구범위에서 청구하는 본 발명의 요지를 벗어남이 없이 당해 발명이 속하는 기술분야에서 통상의 지식을 가진 자라면 누구든지 다양한 변형 실시가 가능한 것은 물론이고, 그와 같은 변경은 청구범위 기재의 범위 내에 있게 된다.Although the preferred embodiments of the present invention have been shown and described above, the present invention is not limited to the specific preferred embodiments described above, and the present invention belongs to the present invention without departing from the gist of the present invention as claimed in the claims. Various modifications can be made by those skilled in the art, and such changes are within the scope of the claims.

도 1은 전체 시스템의 구성을 도시한 도면,1 is a diagram showing the configuration of an entire system;

도 2는 단말 엔진의 상세한 구성을 도시한 도면,2 is a diagram illustrating a detailed configuration of a terminal engine;

도 3은 서버 엔진의 상세한 구성을 도시한 도면,3 is a diagram showing a detailed configuration of a server engine;

도 4는 서버 엔진의 UI 생성기에 의한 UI 렌더링 데이터의 생성과정을 도시한 도면,4 is a diagram illustrating a process of generating UI rendering data by a UI generator of a server engine;

도 5는 데스크탑 업데이트 모듈의 상세한 구성을 도시한 도면,5 is a diagram illustrating a detailed configuration of a desktop update module;

도 6은 본 발명에 따른 서버 모듈에서 UI 렌더링 데이터를 생성하는 과정을 도시한 흐름도,6 is a flowchart illustrating a process of generating UI rendering data in a server module according to the present invention;

도 7은 DOM 트리 형태의 자료구조를 생성하기 위한 UI 원본 데이터를 도시한 도면, FIG. 7 illustrates UI original data for generating a data structure in the form of a DOM tree. FIG.

도 8은 본 발명에 따른 유무선 정보기기에서 사용자 인터페이스를 실행하는 과정을 도시한 흐름도,8 is a flowchart illustrating a process of executing a user interface in a wired / wireless information device according to the present invention;

도 9는 서버에 의한 UI 데이터의 업데이트 절차를 도시한 흐름도,9 is a flowchart illustrating a procedure of updating UI data by a server;

도 10은 서버에 의한 UI 데이터의 업데이트시 단말 엔진의 동작을 도시한 흐름도,10 is a flowchart illustrating an operation of a terminal engine when updating UI data by a server;

도 11은 사용자에 의한 UI 데이터의 업데이트시 단말 엔진의 동작을 도시한 흐름도, 그리고,11 is a flowchart illustrating an operation of a terminal engine when updating UI data by a user;

Claims

A device interface unit for providing a data transmission / reception path with a user terminal device connected through a communication network;

A rendering data generation unit generating rendering data that can be rendered by a renderer of the user terminal device based on UI original data written in a markup language; And

And a UI data storage unit configured to store the UI original data and the rendering data.

The method of claim 1,

A UI update manager for providing the user terminal device with updated UI data or updated rendering data generated corresponding to the new UI original data when the UI original data is updated or new UI original data is input; And

And a user information storage unit for storing an update history of the UI data for the user terminal device.

The UI updater, when the UI original data is updated or new UI original data is input, transmits an update message for inquiring whether to update the UI data to the user terminal device, and when an update acceptance message is received from the user terminal device. And transmitting the updated rendering data corresponding to the updated UI original data or the new UI original data generated by the rendering data generating unit to the user terminal device.

The method according to claim 1 or 2,

The rendering data generation unit,

A markup document parser for parsing each component included in the UI original data written in the markup language to generate a DOM (Document Object Model) tree, which is a tree-type data structure;

A CSS parser for parsing a Cascading Styles Sheets (CSS) file defined in the UI original data to generate a CSS tree, which is a tree-type data structure;

A JavaScript engine generating a byte code corresponding to the JavaScript code defined in the UI original data; And

A data generator configured to apply the CSS tree and the byte code to a tag of the DOM tree node to generate the rendering data including attributes, sizes, and position information of respective elements included in the UI original data; User interface management system of a wired or wireless information device, characterized in that it comprises a.

Generating rendering data that can be rendered by a renderer of a user terminal device connected through a communication network based on UI original data written in a markup language;

Storing the UI original data and the rendering data; And

And providing the rendering data to the user terminal device.

The method of claim 4, wherein

When the UI original data is updated or new UI original data is input, generating updating update rendering data corresponding to the updated UI original data or the new UI original data;

When the UI original data is updated or new UI original data is input, transmitting an update message for inquiring whether to update the UI data to the user terminal device;

Transmitting update UI data generated by the rendering data generation unit or update rendering data corresponding to the new UI original data to the user terminal device when an update acceptance message is received from the user terminal device; And

And storing an update history of the UI data for the user terminal device.

The method of claim 4, wherein

The rendering data generation step,

Parsing each component included in the UI original data written in the markup language to generate a DOM (Document Object Model) tree, which is a data structure in a tree form;

Parsing the CSS file defined in the UI original data to generate a cascading styles sheet (CSS) tree, which is a tree-type data structure;

Generating a byte code corresponding to a JavaScript code defined in the UI original data; And

Generating the rendering data including attributes, sizes, and position information of respective components included in the UI original data by applying the CSS tree and the byte code to the tag of the DOM tree node. User interface management method of the wired and wireless information device, characterized in that.

A storage unit storing rendering data generated by the UI data management server based on UI original data written in a markup language received from the UI data management server through a communication network;

A UI manager for outputting a UI screen generation command instructing to generate a UI screen corresponding to a key event generated by a user or an event generated by a user terminal device; And

And a browser engine configured to read rendering data corresponding to the event from the storage to generate a UI screen when the UI screen generation command is input.

The method of claim 7, wherein

The UI manager,

A UI handler for outputting a UI screen generation command instructing to generate a UI screen corresponding to a key event generated by a user or an event generated by a user terminal device; And

When the UI data management server receives an update message for inquiring whether the UI original data is updated or the update rendering data generated corresponding to the new UI original data is received, the UI data management server receives the UI message from the UI data management server according to a user's selection. And a menu updater for storing the update rendering data in the storage unit.

The method according to claim 7 or 8,

The browser engine,

A markup document parser for parsing each component included in UI original data written in a markup language input from the outside to generate a DOM (Document Object Model) tree, which is a tree-type data structure;

A CSS parser for parsing the CSS file defined in the UI original data to generate a Cascading Styles Sheets (CSS) tree, which is a tree-type data structure;

A data generator configured to apply the CSS tree and the byte code to a tag of the DOM tree node to generate the rendering data including attributes, sizes, and position information of respective elements included in the UI original data; Wired and wireless information device having a user interface management function, characterized in that it comprises a.

Storing rendering data generated by the UI data management server based on UI original data written in a markup language received from a UI data management server through a communication network;

Receiving a key event generated by a user or an event generated by a user terminal device; And

And generating the UI screen by reading the rendering data corresponding to the event.

The method of claim 10,

Receiving, from the UI data management server, an update message inquiring whether the UI original data is updated or whether to receive update rendering data generated corresponding to the new UI original data; And

And storing the update rendering data received from the UI data management server according to a user's selection.

The method of claim 10,

Parsing each component included in UI original data written in a markup language input from the outside to generate a DOM (Document Object Model) tree, which is a tree-type data structure;

Generating and storing the rendering data including attributes, sizes, and position information of respective elements included in the UI original data by applying the CSS tree and the byte code to the tag of the DOM tree node; User interface management method of the wired / wireless information device comprising a.

A computer program for recording a program for executing a user interface management method of a wired / wireless information device according to any one of claims 4, 5, 6, 10, 11 or 12 on a computer. Recordable media.