KR100962441B1 - Multi-Platform based User Interface Screen Editing Method And Device Supporting Concurrent Editing of User Interface Screens - Google Patents

Multi-Platform based User Interface Screen Editing Method And Device Supporting Concurrent Editing of User Interface Screens Download PDF

Info

Publication number
KR100962441B1
KR100962441B1 KR1020080004636A KR20080004636A KR100962441B1 KR 100962441 B1 KR100962441 B1 KR 100962441B1 KR 1020080004636 A KR1020080004636 A KR 1020080004636A KR 20080004636 A KR20080004636 A KR 20080004636A KR 100962441 B1 KR100962441 B1 KR 100962441B1
Authority
KR
South Korea
Prior art keywords
user interface
platform
interface screen
editing
screen
Prior art date
Application number
KR1020080004636A
Other languages
Korean (ko)
Other versions
KR20090078698A (en
Inventor
강교철
최윤석
맹주원
양진석
Original Assignee
포항공과대학교 산학협력단
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 포항공과대학교 산학협력단 filed Critical 포항공과대학교 산학협력단
Priority to KR1020080004636A priority Critical patent/KR100962441B1/en
Publication of KR20090078698A publication Critical patent/KR20090078698A/en
Application granted granted Critical
Publication of KR100962441B1 publication Critical patent/KR100962441B1/en

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance

Abstract

동시 편집을 지원하는 다중 플랫폼 기반 사용자 인터페이스 화면 편집 방법 및 장치가 개시된다. 적어도 하나의 사용자 인터페이스 화면 중에서 편집대상이 되는 편집대상 사용자 인터페이스 화면을 선택하는 편집대상 화면 선택 단계와, 편집대상 사용자 인터페이스 화면의 적용 대상이 되는 적어도 하나의 플랫폼을 선택하는 편집대상 플랫폼 선택 단계와, 적어도 하나의 플랫폼 중에서 직접 편집의 대상이 되는 표준 플랫폼을 선택하는 표준 플랫폼 선택 단계와, 표준 플랫폼에 대응하여 편집대상 사용자 인터페이스 화면을 구성하는 자원들의 위치를 배치하는 레이아웃 편집 단계 및 상기 레이아웃 편집 단계에서 배치된 상기 편집대상 사용자 인터페이스 화면을 구성하는 자원들의 위치에 대응하여 상기 적어도 하나의 플랫폼 중 상기 표준 플랫폼을 제외한 플랫폼에 대응되는 사용자 인터페이스 화면을 구성하는 자원들의 위치를 동기적으로 배치하는 레이아웃 동기화 단계를 포함한다. 따라서, 동시에 복수의 플랫폼에 대해서 하나의 표준 플랫폼에 대한 사용자 인터페이스 화면을 위지위그 방식으로 작성함으로써, 나머지 플랫폼에 대한 사용자 인터페이스 화면을 자동으로 작성할 수 있다.Disclosed are a multi-platform based user interface screen editing method and apparatus for supporting simultaneous editing. An editing target screen selection step of selecting an editing target user interface screen from among at least one user interface screen, an editing target platform selection step of selecting at least one platform to which the editing target user interface screen is applied; A standard platform selection step of selecting a standard platform to be directly edited from at least one platform, a layout editing step of arranging positions of resources constituting an editable user interface screen corresponding to the standard platform, and in the layout editing step Synchronizing the positions of the resources constituting the UI screen corresponding to the platform except the standard platform among the at least one platform corresponding to the positions of the resources constituting the edited user interface screen arranged The placement includes a layout synchronization step. Therefore, by simultaneously creating a user interface screen for one standard platform for a plurality of platforms in a wiggle manner, it is possible to automatically create a user interface screen for the remaining platforms.

동시 편집, 다중 플랫폼, 사용자 인터페이스, 화면 편집 Concurrent editing, multi-platform, user interface, screen editing

Description

동시 편집을 지원하는 다중 플랫폼 기반 사용자 인터페이스 화면 편집 방법 및 장치{Multi-Platform based User Interface Screen Editing Method And Device Supporting Concurrent Editing of User Interface Screens}Multi-Platform based User Interface Screen Editing Method And Device Supporting Concurrent Editing of User Interface Screens}

본 발명은 다중 플랫폼 기반 사용자 인터페이스 화면 편집 방법 및 장치에 관한 것으로, 더욱 상세하게는 동시 편집을 지원하는 다중 플랫폼 기반 사용자 인터페이스 화면 편집 방법 및 장치에 관한 것이다.The present invention relates to a multi-platform based user interface screen editing method and apparatus, and more particularly, to a multi-platform based user interface screen editing method and apparatus that supports simultaneous editing.

사용자 인터페이스(user interface)는 사용자와 컴퓨터 간에 정보를 교환하기 위한 수단 혹은 인터페이스를 의미하며, 사용자와 컴퓨터 사이에 커뮤니케이션을 원활하게 하기 위한 중요한 창구의 역할을 하기 때문에 응용 소프트웨어의 개발 분야에서 매우 중요한 고려사항으로 대두되고 있다.A user interface is a means or interface for exchanging information between a user and a computer, and is a very important consideration in the field of application software development because it serves as an important window for facilitating communication between the user and the computer. It is emerging as a matter.

사용자 인터페이스에서 메뉴, 툴바, 버튼 등의 구성 등을 고려하는 레이아웃(layout)은 많은 부분을 차지한다. 응용 소프트웨어 개발회사들은 플로우 레이아웃(flow layout), 그리드 레이아웃(grid layout) 등 사용자 인터페이스의 화면을 정의하는 기본적인 레이아웃들의 가이드라인을 제시하고 있는데, 이는 상기와 같이 사용자가 응용 소프트웨어를 사용함에 있어 최적의 커뮤니케이션을 제공하기 위함 이다. 이러한 레이아웃은 특정 화면을 응용 소프트웨어 개발자가 지정하는 스타일로 공간을 배열할 수 있도록 하는데, 이러한 공간에는 푸시 버튼(push button), 라디오 버튼(radio button), 그림, 소리, 동영상, 정적 텍스트(static text) 등의 아이템(item)들이 배치된다. 이 경우 아이템이 화면에 배치되기 위해서는 아이템을 포함할 수 있는 컨테이너(container)가 있어야 한다. 컨테이너들은 레이아웃 스타일, 크기 이외에 여러 가지 제한 속성 등의 고유 속성을 가질 수 있다. The layout, which takes into account the configuration of menus, toolbars, buttons, etc. in the user interface, takes up a lot. Application software developers provide guidelines for basic layouts that define the screens of the user interface, such as flow layouts and grid layouts. To provide communication. This layout allows you to arrange spaces in a style specified by the application software developer, such as push buttons, radio buttons, pictures, sounds, videos, and static text. Items are placed. In this case, in order for an item to be placed on the screen, there must be a container that can contain the item. Containers can have unique properties such as layout styles, sizes, and other constraints.

한편, 사용자 인터페이스 설계에 있어 레이어(layer)라는 개념을 도입할 수 있는데, 레이어 하나하나는 투명한 종이라고 생각할 수 있다. 각각의 레이어에 그림을 그리고 여러 개를 겹치면 마치 하나의 그림처럼 나타나게 되는데, 레이어가 많으면 복잡해질 수 있지만 수정이 필요한 경우 일부 레이어만 수정하면 되므로 사용자 인터페이스 개발 작업을 간편하게 할 수 있다.On the other hand, in the user interface design, the concept of a layer (layer) can be introduced, each layer can be thought of as transparent paper. If you draw a picture on each layer and overlap it, it will look like a picture. If there are many layers, it can be complicated, but if you need to modify only some layers, you can simplify the user interface development.

일반적으로 플랫폼은 소프트웨어 응용 프로그램들을 돌리는데 쓰이는 하드웨어와 소프트웨어의 결합이며, 하나의 운영 체제 또는 컴퓨터 아키텍처를 의미하지만 보다 확장된 의미로 모바일 단말기와 같은 장치의 하드웨어와 소프트웨어의 결합을 의미하기도 한다. 응용 애플리케이션은 특정한 하드웨어 플랫폼 또는 소프트웨어 플랫폼의 기능에 맞추기 위해 프로그래밍된다. 특히, 수많은 제품이 존재하는 모바일 단말기 등의 다중 플랫폼(platform) 환경에서, 대부분의 경우 각 모바일 단말기의 사용자 인터페이스는 세부적인 면에서 다소 차이가 있을 뿐이지만, 개발 측면에서는 각각의 플랫폼마다 사용자 인터페이스를 재정의하거나 기존의 것을 변경하는 작업을 반드시 거쳐야 하며, 아울러 각각의 플랫폼별 사용자 인터페이스 정보 를 유지 관리하는 부담도 상당하다. In general, a platform is a combination of hardware and software used to run software applications, which means a single operating system or computer architecture, but in a broader sense, it also means a combination of hardware and software from devices such as mobile terminals. Application The application is programmed to match the functionality of a particular hardware platform or software platform. In particular, in a multi-platform environment, such as a mobile terminal in which a large number of products exist, in most cases, the user interface of each mobile terminal is only slightly different in detail. The work of redefining or changing existing ones must be carried out, and the burden of maintaining user interface information for each platform is considerable.

모바일 단말기는 다양한 화면크기를 가지고 있고, 이 화면크기들을 크고 작음에 따라 여러개의 화면크기군으로 분류할 수 있다. 종래 모바일 단말기 분야에서는 하나의 그래픽 사용자 인터페이스(graphic user interface, GUI)를 개발하기 위해서 모바일 단말기들의 다양한 화면크기군들 중 대표적인 화면크기군을 최소 3개 이상 선정한 후, 선정된 대표 화면크기군 중에서 다시 하나를 선택하여 개발자가 일일이 그래픽 사용자 인터페이스에 사용되는 그림 픽셀의 좌표를 계산하고, 계산된 좌표를 직접 플랫폼 종속적인 소스 코드에 입력하는 방식으로 개발이 이뤄져 왔다. 이러한 수작업은 지원되어야 하는 화면크기군에 대한 수만큼 반복적으로 이뤄져야 하므로 모바일 응용 애플리케이션 개발 과정에서 많은 부분을 차지하고 있고, 대상 플랫폼이 변경되는 경우 플랫폼 종속적인 소스코드에 좌표를 다시 입력해야 하는 중복의 문제가 있다.Mobile terminals have various screen sizes, and these screen sizes can be classified into several screen size groups as large and small. In the conventional mobile terminal field, at least three representative screen size groups are selected from among various screen size groups of mobile terminals in order to develop a graphic user interface (GUI), and then the selected representative screen size group is selected again. Developers have chosen to select one and calculate the coordinates of the picture pixels used in the graphical user interface and input the calculated coordinates directly into the platform-dependent source code. This manual work is a large part of the mobile application development process because it has to be repeated as many times as the number of screen sizes to be supported, and duplication of having to re-enter coordinates in platform-dependent source code when the target platform changes There is.

상기와 같은 문제에 대해 특정 위젯(widget)을 이용하여 화면을 위지위그(what you see is what you get, WYSIWYG) 방식으로 작성하거나, 룩 앤드 필(look and feel)을 적용하여 화면을 개발하는 개발도구는 현재 모바일 업체나 모바일 응용 애플리케이션 개발업체에서 개발이 진행되어 몇몇 도구가 출시되어 있다. 하지만 편집과정에서 다양한 화면크기를 동시에 편집할 수 있는 기능을 지원하지 않고, 위젯을 사용함으로써 그래픽 사용자 인터페이스가 특정 플랫폼이나 프레임워크에 종속되는 경우가 많아 이와 같은 문제점을 해결할 수 있는 방안이 요청되고 있다.Developing a screen by using a specific widget to create a screen by using what widget (what you see is what you get, WYSIWYG) or by applying a look and feel The tools are currently being developed by mobile companies or mobile application developers, and several tools are released. However, the editing process does not support the ability to edit various screen sizes at the same time, and the use of widgets often makes the graphical user interface dependent on a specific platform or framework. .

따라서, 본 발명의 목적은 상기와 같은 문제점을 해결하기 위한 다중 플랫폼 기반 사용자 인터페이스 화면 편집 방법 및 장치을 제공하는 것으로, 더욱 상세하게는 동시 편집을 지원하는 다중 플랫폼 기반 사용자 인터페이스 화면 편집 방법 및 장치를 제공하는 것이다.Accordingly, an object of the present invention is to provide a multi-platform based user interface screen editing method and apparatus for solving the above problems, and more particularly, to provide a multi-platform based user interface screen editing method and apparatus supporting simultaneous editing. It is.

상술한 본 발명의 목적을 달성하기 위한 본 발명의 일 측면에 따른 동시 편집을 지원하는 다중 플랫폼 기반 사용자 인터페이스 화면 편집 방법은, 적어도 하나의 자원으로 구성된 적어도 하나의 사용자 인터페이스 화면을 포함한 사용자 인터페이스에 있어서, 상기 사용자 인터페이스 화면을 구성하는 자원들의 레이아웃을 다양한 플랫폼에 대응하여 편집하는 사용자 인터페이스 화면 편집 방법에 있어서, 상기 적어도 하나의 사용자 인터페이스 화면 중에서, 편집대상이 되는 편집대상 사용자 인터페이스 화면을 선택하는 편집대상 화면 선택 단계와, 상기 편집대상 사용자 인터페이스 화면의 적용 대상이 되는 적어도 하나의 플랫폼을 선택하는 편집대상 플랫폼 선택 단계와, 상기 적어도 하나의 플랫폼 중에서, 직접 편집의 대상이 되는 표준 플랫폼을 선택하는 표준 플랫폼 선택 단계와, 상기 표준 플랫폼에 대응하여, 상기 편집대상 사용자 인터페이스 화면을 구성하는 자원들의 위치를 배치하는 레이아웃 편집 단계 및 상기 레이아웃 편집 단계에서 배치된 상기 편집대상 사용자 인터페이스 화면을 구성하는 자원들의 위치에 대응하여, 상기 적어도 하나의 플랫폼 중 상기 표준 플랫폼을 제외한 플랫폼에 대응되는 사용자 인터페이스 화면을 구성하는 자원들의 위치를 동기적으로 배치하는 레이아웃 동기화 단계를 포함한다.Multi-platform based user interface screen editing method for supporting simultaneous editing according to an aspect of the present invention for achieving the above object of the present invention, in the user interface including at least one user interface screen composed of at least one resource In the user interface screen editing method for editing the layout of the resources constituting the user interface screen corresponding to various platforms, Editing target for selecting an editing target user interface screen from the at least one user interface screen A screen selection step, an editing target platform selection step of selecting at least one platform to which the editing target user interface screen is applied, and a standard platform to be directly edited among the at least one platform; Selecting a standard platform selection step, a layout editing step of arranging positions of resources constituting the editing target user interface screen, and configuring the editing target user interface screen arranged in the layout editing step corresponding to the standard platform; And a layout synchronization step of synchronously arranging positions of resources constituting a user interface screen corresponding to a platform other than the standard platform among the at least one platform.

상기 레이아웃 동기화 단계의 동기화는 상기 표준 플랫폼에 대한 상기 표준 플랫폼을 제외한 플랫폼의 화면의 크기 비율 및/또는 화면의 해상도 차이를 반영하는 것일 수 있다.The synchronization of the layout synchronization step may reflect a difference in screen size ratio and / or resolution of a screen of a platform other than the standard platform with respect to the standard platform.

상기 적어도 하나의 사용자 인터페이스 화면은, 고유의 컨테이너 레이아웃 식별자 및 포함되는 자원에 관련된 정보를 포함하는 적어도 하나의 컨테이너 레이아웃을 순차적으로 상하로 오버랩시킨 형태로 구성되는 것이며, 상기 레이아웃 편집 단계는, 상기 표준 플랫폼에 대응하여, 상기 편집대상 사용자 인터페이스 화면을 구성하는 적어도 하나의 컨테이너 레이아웃에 포함된 자원의 위치를 배치하는 레이아웃 편집 단계인 것일 수 있다.The at least one user interface screen is configured in such a manner that at least one container layout including a unique container layout identifier and information related to resources included is sequentially overlapped with each other, and the layout editing step is performed by the standard. Corresponding to the platform, it may be a layout editing step of placing the location of the resources included in the at least one container layout constituting the editing user interface screen.

상기 적어도 하나의 사용자 인터페이스 화면은 상기 포함되는 자원의 유형을 지정하는 속성을 가지는 것일 수 있다. 이 경우, 상기 자원의 유형을 지정하는 속성은 푸시 버튼, 라디오 버튼, 그림, 소리, 동영상 또는 정적 텍스트 중 적어도 하나를 지정하는 것일 수 있다.The at least one user interface screen may have an attribute for designating a type of the included resource. In this case, the attribute specifying the type of the resource may be at least one of a push button, a radio button, a picture, a sound, a video, or static text.

상기 적어도 하나의 사용자 인터페이스 화면은 상기 포함되는 자원의 위치를 지정하는 속성을 가지는 것일 수 있다.The at least one user interface screen may have an attribute for designating a location of the included resource.

또한, 상술한 본 발명의 목적을 달성하기 위한 본 발명의 일 측면에 따른 동시 편집을 지원하는 다중 플랫폼 기반 사용자 인터페이스 화면 편집 장치는, 적어 도 하나의 자원으로 구성된 적어도 하나의 사용자 인터페이스 화면을 포함한 사용자 인터페이스에 있어서, 상기 사용자 인터페이스 화면을 구성하는 자원들의 레이아웃을 다양한 플랫폼에 대응하여 편집하는 사용자 인터페이스 화면 편집 장치에 있어서, 상기 적어도 하나의 사용자 인터페이스 화면에 대한 사용자 인터페이스 화면 정보 및 상기 적어도 하나의 사용자 인터페이스 화면에 대응되는 적어도 하나의 플랫폼에 대한 플랫폼 정보를 저장하는 플랫폼 정보 데이터베이스와, 상기 플랫폼 정보 데이터베이스에 저장된 상기 사용자 인터페이스 화면 정보 및 상기 플랫폼 정보로부터, 편집대상이 되는 편집대상 사용자 인터페이스 화면, 상기 편집대상 사용자 인터페이스 화면의 적용 대상이 되는 적어도 하나의 플랫폼 및 상기 적어도 하나의 플랫폼 중 직접 편집의 대상이 되는 표준 플랫폼을 선택하는 편집 작업 관리기 및 상기 표준 플랫폼에 대응하여, 상기 편집대상 사용자 인터페이스 화면을 구성하는 자원들의 위치를 배치하고, 상기 배치된 상기 편집대상 사용자 인터페이스 화면을 구성하는 자원들의 위치에 대응하여, 상기 적어도 하나의 플랫폼 중 상기 표준 플랫폼을 제외한 플랫폼에 대응되는 사용자 인터페이스 화면을 구성하는 자원들의 위치를 동기적으로 배치하는 사용자 인터페이스 화면 편집기를 구비한다.In addition, a multi-platform based user interface screen editing apparatus supporting simultaneous editing according to an aspect of the present invention for achieving the above object of the present invention, a user including at least one user interface screen composed of at least one resource An interface, the user interface screen editing apparatus for editing the layout of the resources constituting the user interface screen corresponding to various platforms, the user interface screen information for the at least one user interface screen and the at least one user interface A platform for storing platform information on at least one platform corresponding to a screen, and an editing table from the user interface screen information and the platform information stored in the platform information database. An editing task manager for selecting a standard editing target user interface screen, at least one platform to which the editing target user interface screen is applied, and a standard platform to be directly edited among the at least one platform, and the standard platform And arranging positions of resources constituting the editable user interface screen, and corresponding to positions of the resources constituting the edited user interface screen arranged on a platform other than the standard platform among the at least one platform. And a user interface screen editor for synchronously arranging positions of resources constituting a corresponding user interface screen.

상기 사용자 인터페이스 화면 편집기에서의 상기 동기적 배치는 상기 표준 플랫폼에 대한 상기 표준 플랫폼을 제외한 플랫폼의 화면의 크기 비율 및/또는 화면의 해상도 차이를 반영하는 것일 수 있다.The synchronous arrangement in the user interface screen editor may reflect a difference in screen size ratio and / or resolution of a screen other than the standard platform with respect to the standard platform.

상기 적어도 하나의 사용자 인터페이스 화면은, 고유의 컨테이너 레이아웃 식별자 및 포함되는 자원에 관련된 정보를 포함하는 적어도 하나의 컨테이너 레이 아웃을 순차적으로 상하로 오버랩시킨 형태로 구성되는 것이며, 상기 사용자 인터페이스 화면 편집기는, 상기 표준 플랫폼에 대응하여, 상기 편집대상 사용자 인터페이스 화면을 구성하는 적어도 하나의 컨테이너 레이아웃에 포함된 자원의 위치를 배치하는 것일 수 있다.The at least one user interface screen is configured in a form in which at least one container layout including a unique container layout identifier and information related to resources included is sequentially and vertically overlapped, and the user interface screen editor includes: Corresponding to the standard platform, the location of resources included in at least one container layout constituting the editable user interface screen may be arranged.

또한, 상술한 본 발명의 목적을 달성하기 위한 본 발명의 일 측면에 따른 동시 편집을 지원하는 다중 플랫폼 기반 사용자 인터페이스 화면 편집 방법을 컴퓨터 실행가능 명령어로 기록한 컴퓨터 판독가능 매체는, 적어도 하나의 자원으로 구성된 적어도 하나의 사용자 인터페이스 화면을 포함한 사용자 인터페이스에 있어서, 상기 사용자 인터페이스 화면을 구성하는 자원들의 레이아웃을 다양한 플랫폼에 대응하여 편집하는 사용자 인터페이스 화면 편집 방법에 있어서, 상기 적어도 하나의 사용자 인터페이스 화면 중에서, 편집대상이 되는 편집대상 사용자 인터페이스 화면을 선택하는 편집대상 화면 선택 단계와, 상기 편집대상 사용자 인터페이스 화면의 적용 대상이 되는 적어도 하나의 플랫폼을 선택하는 편집대상 플랫폼 선택 단계와, 상기 적어도 하나의 플랫폼 중에서, 직접 편집의 대상이 되는 표준 플랫폼을 선택하는 표준 플랫폼 선택 단계와, 상기 표준 플랫폼에 대응하여, 상기 편집대상 사용자 인터페이스 화면을 구성하는 자원들의 위치를 배치하는 레이아웃 편집 단계 및 상기 레이아웃 편집 단계에서 배치된 상기 편집대상 사용자 인터페이스 화면을 구성하는 자원들의 위치에 대응하여, 상기 적어도 하나의 플랫폼 중 상기 표준 플랫폼을 제외한 플랫폼에 대응되는 사용자 인터페이스 화면을 구성하는 자원들의 위치를 동기적으로 배치하는 레이아웃 동기화 단계를 포함하는 동시 편집을 지원하는 다중 플랫폼 기반 사용자 인터페이스 화면 편집 방법을 컴퓨터 실행가능 명령어로 기록한 컴퓨터 판독가능 매체이다.In addition, a computer-readable medium recording a multi-platform based user interface screen editing method that supports simultaneous editing according to an aspect of the present invention to achieve the object of the present invention by using computer executable instructions, at least one resource In a user interface including at least one configured user interface screen, the user interface screen editing method for editing the layout of the resources constituting the user interface screen corresponding to various platforms, Among the at least one user interface screen, Editing An editing target screen selecting step of selecting an editing target user interface screen; an editing target platform selecting step of selecting at least one platform to which the editing target user interface screen is applied; A standard platform selection step of selecting a standard platform to be directly edited from one platform, a layout editing step of arranging positions of resources constituting the editable user interface screen corresponding to the standard platform, and the layout Correspondingly to the positions of the resources constituting the editing target user interface screen arranged in the editing step, the location of the resources constituting the user interface screen corresponding to the platform except the standard platform of the at least one platform synchronously A multi-platform based user interface screen editing method that supports simultaneous editing, including a layout synchronization step, is a computer readable medium having recorded thereon computer executable instructions.

상술한 다중 플랫폼 기반 사용자 인터페이스 화면 편집 방법은 동시에 복수의 플랫폼에 대해서 하나의 표준 플랫폼에 대한 사용자 인터페이스 화면을 위지위그 방식으로 작성함으로써, 나머지 플랫폼에 대한 사용자 인터페이스 화면을 자동으로 작성할 수 있다.In the above-described multi-platform based user interface screen editing method, a user interface screen for one standard platform may be simultaneously created for a plurality of platforms, thereby automatically creating a user interface screen for the remaining platforms.

또한, 동일한 플랫폼에 대응되는 사용자 인터페이스 화면에 대해서 중복 작업을 방지할 수 있고, 작업의 효율성을 높일 수 있다.In addition, it is possible to prevent duplication of work on a user interface screen corresponding to the same platform, and to increase work efficiency.

나아가, 작성이 완료된 사용자 인터페이스 화면은 화면크기별로 XMI 형식의 파일로 저장되므로 사용자 인터페이스 화면을 특정 플랫폼이나 특정 프레임워크에 독립적으로 제작할 수 있다.Furthermore, since the completed user interface screen is stored as a file of XMI format for each screen size, the user interface screen can be independently produced on a specific platform or a specific framework.

본 발명은 다양한 변경을 가할 수 있고 여러 가지 실시예를 가질 수 있는 바, 특정 실시예들을 도면에 예시하고 상세한 설명에 상세하게 설명하고자 한다. 그러나, 이는 본 발명을 특정한 실시 형태에 대해 한정하려는 것이 아니며, 본 발명의 사상 및 기술 범위에 포함되는 모든 변경, 균등물 내지 대체물을 포함하는 것으로 이해되어야 한다. 각 도면을 설명하면서 유사한 참조부호를 유사한 구성요소에 대해 사용하였다.As the invention allows for various changes and numerous embodiments, particular embodiments will be illustrated in the drawings and described in detail in the written description. However, this is not intended to limit the present invention to specific embodiments, it should be understood to include all modifications, equivalents, and substitutes included in the spirit and scope of the present invention. Like reference numerals are used for like elements in describing each drawing.

제1, 제2 등의 용어는 다양한 구성요소들을 설명하는데 사용될 수 있지만, 상기 구성요소들은 상기 용어들에 의해 한정되어서는 안 된다. 상기 용어들은 하나의 구성요소를 다른 구성요소로부터 구별하는 목적으로만 사용된다. 예를 들어, 본 발명의 권리 범위를 벗어나지 않으면서 제1 구성요소는 제2 구성요소로 명명될 수 있고, 유사하게 제2 구성요소도 제1 구성요소로 명명될 수 있다. 및/또는 이라는 용어는 복수의 관련된 기재된 항목들의 조합 또는 복수의 관련된 기재된 항목들 중의 어느 항목을 포함한다.Terms such as first and second may be used to describe various components, but the components should not be limited by the terms. The terms are used only for the purpose of distinguishing one component from another. For example, without departing from the scope of the present invention, the first component may be referred to as the second component, and similarly, the second component may also be referred to as the first component. And / or < / RTI > includes any combination of a plurality of related listed items or any of a plurality of related listed items.

어떤 구성요소가 다른 구성요소에 “연결되어” 있다거나 “접속되어”있다고 언급된 때에는, 그 다른 구성요소에 직접적으로 연결되어 있거나 또는 접속되어 있을 수도 있지만, 중간에 다른 구성요소가 존재할 수도 있다고 이해되어야 할 것이다. 반면에, 어떤 구성요소가 다른 구성요소에 “직접 연결되어”있다거나 “직접 접속되어”있다고 언급된 때에는, 중간에 다른 구성요소가 존재하지 않는 것으로 이해되어야 할 것이다.When a component is said to be “connected” or “connected” to another component, it may be directly connected to or connected to that other component, but it may be understood that another component may exist in the middle. Should be. On the other hand, when a component is referred to as being "directly connected" or "directly connected" to another component, it should be understood that there is no other component in between.

본 출원에서 사용한 용어는 단지 특정한 실시예를 설명하기 위해 사용된 것으로, 본 발명을 한정하려는 의도가 아니다. 단수의 표현은 문맥상 명백하게 다르게 뜻하지 않는 한, 복수의 표현을 포함한다. 본 출원에서, "포함하다" 또는 "가지다" 등의 용어는 명세서상에 기재된 특징, 숫자, 단계, 동작, 구성요소, 부품 또는 이들을 조합한 것이 존재함을 지정하려는 것이지, 하나 또는 그 이상의 다른 특징들이나 숫자, 단계, 동작, 구성요소, 부품 또는 이들을 조합한 것들의 존재 또는 부가 가능성을 미리 배제하지 않는 것으로 이해되어야 한다.The terminology used herein is for the purpose of describing particular example embodiments only and is not intended to be limiting of the present invention. Singular expressions include plural expressions unless the context clearly indicates otherwise. In this application, the terms "comprise" or "have" are intended to indicate that there is a feature, number, step, operation, component, part, or combination thereof described in the specification, and one or more other features. It is to be understood that the present invention does not exclude the possibility of the presence or the addition of numbers, steps, operations, components, components, or a combination thereof.

이하, 첨부한 도면들을 참조하여, 본 발명의 바람직한 실시예를 보다 상세하 게 설명하고자 한다. 이하, 도면상의 동일한 구성요소에 대해서는 동일한 참조부호를 사용하고 동일한 구성요소에 대해서 중복된 설명은 생략한다.Hereinafter, with reference to the accompanying drawings, it will be described in detail a preferred embodiment of the present invention. Hereinafter, the same reference numerals are used for the same components in the drawings, and duplicate descriptions of the same components are omitted.

도 1은 본 발명의 일 실시예에 따른 동시 편집을 지원하는 다중 플랫폼 기반 사용자 인터페이스 화면 편집 방법의 전체적인 과정을 나타내는 흐름도이다.1 is a flowchart illustrating the overall process of a multi-platform based user interface screen editing method supporting simultaneous editing according to an embodiment of the present invention.

도 1을 참조하면, 동시 편집을 지원하는 다중 플랫폼 기반 사용자 인터페이스 화면 편집 방법은 크게 편집대상 화면 선택 단계(110), 편집대상 플랫폼 선택 단계(120), 표준 플랫폼 선택 단계(13), 레이아웃 편집단계(140) 및 레이아웃 동기화 단계(150)를 포함한다.Referring to FIG. 1, a multi-platform based user interface screen editing method that supports simultaneous editing can be divided into a editing target screen selection step 110, an editing target platform selection step 120, a standard platform selection step 13, and a layout editing step. 140 and layout synchronization step 150.

구체적으로 편집대상 화면 선택 단계(110)는 편집대상이 되는 편집대상 사용자 인터페이스 화면을 선택하는 단계이다.Specifically, the editing target screen selection step 110 is a step of selecting an editing target user interface screen to be edited.

자원(resource)이란 푸시 버튼(push button), 라디오 버튼(radio button), 그림, 소리, 동영상 또는 정적 텍스트(static text) 등의 사용자 인터페이스 화면 상의 아이템을 의미한다.A resource refers to an item on a user interface screen, such as a push button, a radio button, a picture, a sound, a video, or static text.

상기 사용자 인터페이스 화면이란 상기 적어도 하나의 자원으로 구성된 시각적인 사용자 인터페이스를 의미하고, 상기 적어도 하나의 사용자 인터페이스 화면은 적어도 하나의 플랫폼에 대응된다. The user interface screen refers to a visual user interface composed of the at least one resource, and the at least one user interface screen corresponds to at least one platform.

상기 사용자 인터페이스 화면에 관한 정보는, 사용자 인터페이스를 구성하는 적어도 하나의 사용자 인터페이스 화면과 상기 사용자 인터페이스 화면을 구성하는 적어도 하나의 자원을 트리 형태로 정의하는 오거니제이션(organization) 편집기 와, 사용자 인터페이스를 구성하는 상기 적어도 하나의 사용자 인터페이스 화면간의 전이조건을 정의하고 상기 사용자 인터페이스 화면 및 상기 사용자 인터페이스 화면을 구성하는 적어도 하나의 자원간의 관계를 정의하는 플로(flow) 편집기에 의해 항목이 생성되는 것일 수 있다.The information about the UI screen may include at least one user interface screen constituting the user interface, an organization editor for defining at least one resource constituting the user interface screen in a tree form, and a user interface. An item may be generated by a flow editor defining a transition condition between the at least one user interface screen and defining a relationship between the user interface screen and at least one resource constituting the user interface screen.

상기 편집대상 사용자 인터페이스 화면이란 개발자가 편집대상으로 선택한 사용자 인터페이스 화면으로서, 다중 플랫폼에 대하여 공통으로 이용되는 화면을 의미한다.The editable user interface screen is a user interface screen selected by the developer for editing, and means a screen commonly used for multiple platforms.

상기 편집대상 플랫폼 선택 단계(120)는 상기 편집대상 사용자 인터페이스 화면의 적용 대상이 되는 적어도 하나의 플랫폼을 선택하는 단계이다.The editing target platform selection step 120 is a step of selecting at least one platform to which the editing target user interface screen is applied.

상기 플랫폼이란 소프트웨어 응용 프로그램들을 돌리는데 쓰이는 하드웨어와 소프트웨어의 결합이며, 하나의 운영 체제 또는 컴퓨터 아키텍처를 의미하지만 보다 확장된 의미로 모바일 단말기와 같은 장치의 하드웨어와 소프트웨어의 결합을 의미할 수 있다.The platform is a combination of hardware and software used to run software applications, and may mean a single operating system or computer architecture, but in a broader sense, may mean a combination of hardware and software of a device such as a mobile terminal.

상기 표준 플랫폼 선택 단계(130)는 상기 적어도 하나의 플랫폼 중 직접 편집의 대상이 되는 표준 플랫폼을 선택하는 단계이다.The standard platform selection step 130 is a step of selecting a standard platform to be directly edited from the at least one platform.

상기 편집대상 화면 선택 단계(110)에서 선택된 상기 편집대상 사용자 인터페이스 화면은 상기 편집대상 플랫폼 선택 단계(120)에서 선택된 플랫폼에서 사용될 것을 예정으로 한다. 상기 표준 플랫폼은 상기 편집대상 플랫폼 선택단계(120)에서 선택된 플랫폼 가운데 레이아웃 편집의 기준이 되는 플랫폼을 의미하며, 상기 표준 플랫폼이 아닌 비표준 플랫폼은 아래에서 설명할 바와 같이 상기 표준 플랫폼 상의 레이아웃 편집과 자신의 레이아웃 편집이 동기된다.The editing target user interface screen selected in the editing target screen selection step 110 is to be used on the platform selected in the editing target platform selection step 120. The standard platform refers to a platform which is a standard of layout editing among the platforms selected in the platform to be edited in step 120, and non-standard platforms other than the standard platform are used as the layout editing on the standard platform as described below. Layout editing is synchronized.

상기 레이아웃 편집 단계(140)는 상기 표준 플랫폼에 대응하여, 상기 편집대상 사용자 인터페이스 화면을 구성하는 자원들의 위치를 배치하는 단계이다.The layout editing step 140 is a step of arranging positions of resources constituting the editable user interface screen, corresponding to the standard platform.

상기 레이아웃 편집 단계(140)에서 개발자는 상기 표준 플랫폼에 대해서만 상기 편집대상 사용자 인터페이스 화면 상에 상기 자원들의 레이아웃을 편집한다.In the layout editing step 140, the developer edits the layout of the resources on the editable user interface screen only for the standard platform.

상기 레이아웃 동기화 단계(150)는 상기 레이아웃 편집 단계(140)에서 배치된 상기 편집대상 사용자 인터페이스 화면을 구성하는 자원들의 위치에 대응하여, 상기 적어도 하나의 플랫폼 중 상기 표준 플랫폼을 제외한 상기 비표준 플랫폼에 대응되는 사용자 인터페이스 화면을 구성하는 자원들의 위치를 동기적으로 배치하는 단계이다.The layout synchronization step 150 corresponds to the non-standard platform except for the standard platform among the at least one platform in response to the location of the resources constituting the editable user interface screen arranged in the layout editing step 140. Synchronously disposing the location of the resources constituting the user interface screen.

상기 레이아웃 동기화 단계(150)를 통하여 상기 표준 플랫폼과 상기 비표준 플랫폼에 대응되는 사용자 인터페이스 화면의 동시 편집이 이루어진다.Simultaneous editing of the user interface screen corresponding to the standard platform and the non-standard platform is performed through the layout synchronization step 150.

도 2는 본 발명의 일 실시예에 따른 동시 편집을 지원하는 다중 플랫폼 기반 사용자 인터페이스 화면 편집 방법에 있어 표준 플랫폼에 대응하는 사용자 인터페이스 화면과 비표준 플랫폼에 대응하는 사용자 인터페이스 화면 간의 동기화 과정을 나타내는 개념도이다.2 is a conceptual diagram illustrating a synchronization process between a user interface screen corresponding to a standard platform and a user interface screen corresponding to a non-standard platform in a multi-platform based user interface screen editing method supporting simultaneous editing according to an embodiment of the present invention. .

도 2를 참조하면, 상기 레이아웃 동기화 단계(140)의 동기화 과정은 상기 편집대상 플랫폼 선택단계(120)에서 선택된 N개의 플랫폼에 대응하는 N개의 사용자 인터페이스 화면(210-1, 210-N)을 포함한다. 설명의 편의상 1번 플랫폼이 상기 표 준 플랫폼인 것으로 가정한다.Referring to FIG. 2, the synchronization process of the layout synchronization step 140 includes N user interface screens 210-1 and 210 -N corresponding to the N platforms selected in the editing target platform selection step 120. do. For convenience of explanation, it is assumed that platform 1 is the standard platform.

상기 표준 플랫폼인 1번 플랫폼에 대응하는 사용자 인터페이스 화면(210-1)은 고유의 화면 해상도에 대한 정보로서 x1(211-1) 및 y1(213-1)을 가지고, 상기 비표준 플랫폼인 N번 플랫폼에 대응하는 사용자 인터페이스 화면(210-N)은 고유의 화면 해상도에 대한 정보로서 xN(211-N) 및 yN(213-N)을 가진다. The user interface screen 210-1 corresponding to platform 1 of the standard platform has x 1 (211-1) and y 1 (213-1) as information on the inherent screen resolution, and the non-standard platform N The user interface screen 210 -N corresponding to platform 1 has x N 211 -N and y N 213 -N as information about the inherent screen resolution.

즉, 상기 1번 플랫폼에 대응하는 사용자 인터페이스 화면(210-1) 상에서의 레이아웃이 좌표값 (X1, Y1)에 대하여 편집된다고 할 때, 상기 N번 플랫폼에 대응하는 사용자 인터페이스 화면(210-N) 상에서의 레이아웃은 좌표값 (X1 * (xN / x1), Y1 * (yN / y1))에 대하여 편집되는 것으로 동기가 이루어진다.That is, when a layout on the user interface screen 210-1 corresponding to the platform 1 is edited with respect to the coordinate values (X 1 , Y 1 ), the user interface screen 210-corresponding to the platform N is provided. The layout on N) is synchronized by being edited for coordinate values (X 1 * (x N / x 1 ), Y 1 * (y N / y 1 )).

도 3은 본 발명의 일 실시예에 따른 동시 편집을 지원하는 다중 플랫폼 기반 사용자 인터페이스 화면 편집 방법에 이용되는 다중 플랫폼 기반 사용자 인터페이스 생성 방법에 있어 컨테이너 레이아웃의 오버랩으로부터 최종 사용자 인터페이스를 생성하는 과정을 나타내는 개념도이다.3 is a diagram illustrating a process of generating an end user interface from overlapping container layouts in a method for generating a multi-platform based user interface used in a multi-platform based user interface screen editing method supporting simultaneous editing according to an embodiment of the present invention. Conceptual diagram.

도 3을 참조하면, 최종 사용자 인터페이스(340) 생성 과정은 적어도 하나의 컨테이너 레이아웃(310, 320, 330)과 상기 컨테이너 레이아웃의 상하 오버랩 위치 정보에 의존한다.Referring to FIG. 3, the process of generating the end user interface 340 depends on at least one container layout 310, 320, 330 and top and bottom overlap position information of the container layout.

구체적으로 컨테이너 레이아웃 #1(310)은 1이라는 컨테이너 레이아웃 식별자를 부여 받고, Head Image 푸쉬 버튼, Left 푸쉬 버튼, Right 푸쉬 버튼을 아이템 으로 가지며, Head Image 푸쉬 버튼은 최상단에 배치되고 Left 푸쉬 버튼은 좌변에 배치되고 Right 푸쉬 버튼은 우변에 배치된다는 레이아웃 정보를 보유하고 있다. 컨테이너 레이아웃 #2(320)는 2라는 컨테이너 레이아웃 식별자를 부여 받고, Navi01 푸쉬 버튼, Navi02 푸쉬 버튼, Navi03 푸쉬 버튼을 가지며, Navi01 푸쉬 버튼은 최하단 좌변에 배치되고 Navi02 푸쉬 버튼은 최하단 중앙에 배치되고 Navi03 푸쉬 버튼은 최하단 우변에 배치된다는 레이아웃 정보를 보유하고 있다. 컨테이너 레이아웃 #3(330)은 3이라는 컨테이너 레이아웃 식별자를 부여 받고, Menu01 푸쉬 버튼, Menu02 푸쉬 버튼, Menu03 푸쉬 버튼, Menu04 푸쉬 버튼을 가지며, 중앙부의 상단에서 하단으로 순서대로 Menu01 푸쉬 버튼, Menu02 푸쉬 버튼, Menu03 푸쉬 버튼, Menu04 푸쉬 버튼이 배치된다는 레이아웃 정보를 보유하고 있다.In detail, container layout # 1 310 is given a container layout identifier of 1, and has a Head Image push button, a Left push button, and a Right push button as items, a Head Image push button is disposed at the top, and a Left push button is on the left side. And the Right push button holds layout information that it is placed on the right side. Container Layout # 2 (320) is given a container layout identifier of 2, and has a Navi01 push button, a Navi02 push button, and a Navi03 push button, the Navi01 push button is positioned at the bottom left side, the Navi02 push button is positioned at the bottom center, and Navi03 The push button holds layout information that is located at the bottom right side. Container layout # 3 330 is given a container layout identifier of 3, and has a Menu01 push button, Menu02 push button, Menu03 push button, Menu04 push button, Menu01 push button, Menu02 push button in order from top to bottom of center part. Layout information that the Menu03 push button and the Menu04 push button are arranged.

대상 플랫폼에 대응하는 사용자 인터페이스를 생성하기 위해서 컨테이너 레이아웃 #1, #2, #3이 순차적으로 선택되었고, 상기 컨테이너 레이아웃들의 상하 오버랩 위치는 먼저 선택된 것이 나중 선택된 것의 아래에 놓인다고 미리 정하였다면, 레이어 최상층부터 레이어 최하층으로의 순서는 차례대로 컨테이너 레이아웃 #3, 컨테이너 레이아웃 #2, 컨테이너 레이아웃 #1이 된다. Container layouts # 1, # 2, and # 3 are selected in order to create a user interface corresponding to the target platform, and the top and bottom overlap positions of the container layouts are pre-determined that the first selected is below the later selected. The order from the top layer to the bottom layer is container layout # 3, container layout # 2, and container layout # 1.

상기 컨테이너 레이아웃들은 레이어로서 기능하므로 상층 레이어의 특정 위치에 아이템이 배치되지 않는 이상 하층 레이어의 상기 특정 위치에 배치된 아이템이 최종 사용자 인터페이스 상에 나타난다. The container layouts function as layers, so that items placed at the specific position of the lower layer appear on the end user interface unless an item is placed at the specific position of the upper layer.

최종적으로 컨테이너 레이아웃 #1(310), 컨테이너 레이아웃 #2(320), 컨테이너 레이아웃 #3(330)이 상하 오버랩되어 사용자 인터페이스(340)를 생성한다.Finally, the container layout # 1 310, the container layout # 2 320, and the container layout # 3 330 overlap up and down to generate the user interface 340.

도 4는 본 발명의 일 실시예에 따른 동시 편집을 지원하는 다중 플랫폼 기반 사용자 인터페이스 화면 편집 장치의 구성을 나타내는 블록도이다.4 is a block diagram illustrating a configuration of a multi-platform based user interface screen editing apparatus supporting simultaneous editing according to an embodiment of the present invention.

도 4를 참조하면, 동시 편집을 지원하는 다중 플랫폼 기반 사용자 인터페이스 화면 편집 장치는 크게 플랫폼 정보 데이터베이스(410), 편집 작업 관리기(420) 및 사용자 인터페이스 화면 편집기(430)을 포함한다.Referring to FIG. 4, a multi-platform based user interface screen editing apparatus supporting simultaneous editing includes a platform information database 410, an editing task manager 420, and a user interface screen editor 430.

구체적으로 상기 플랫폼 정보 데이터베이스(410)는 상기 적어도 하나의 사용자 인터페이스 화면에 대한 사용자 인터페이스 화면 정보 및 상기 적어도 하나의 사용자 인터페이스 화면에 대응되는 적어도 하나의 플랫폼에 대한 플랫폼 정보를 저장하는 장치이다. 상기 플랫폼 정보 데이터베이스(410)는 상기 사용자 인터페이스 화면 정보 및 상기 플랫폼 정보를 기록한 컴퓨터 판독가능 매체 등일 수 있다.In more detail, the platform information database 410 is a device that stores user interface screen information on the at least one user interface screen and platform information on at least one platform corresponding to the at least one user interface screen. The platform information database 410 may be a computer readable medium on which the user interface screen information and the platform information are recorded.

상기 플랫폼 정보 데이터베이스(410)에 저장되는 상기 사용자 인터페이스 화면 정보는 사용자 인터페이스 화면 식별자, 사용자 인터페이스 화면 크기, 사용자 인터페이스에 포함되는 상기 자원의 식별자, 상기 자원의 크기, 상기 자원의 위치에 관한 것일 수 있다.The user interface screen information stored in the platform information database 410 may be related to a user interface screen identifier, a user interface screen size, an identifier of the resource included in a user interface, a size of the resource, and a location of the resource. .

상기 편집 작업 관리기(420)는 상기 플랫폼 정보 데이터베이스에 저장된 상기 사용자 인터페이스 화면 정보 및 상기 플랫폼 정보로부터, 편집대상이 되는 편집대상 사용자 인터페이스 화면, 상기 편집대상 사용자 인터페이스 화면의 적용 대상이 되는 적어도 하나의 플랫폼 및 상기 적어도 하나의 플랫폼 중 직접 편집의 대상이 되는 표준 플랫폼을 선택하는 장치이다. 상기 편집 작업 관리기(420)는 상기 기능을 수행하는 컴퓨터 실행가능 명령어로 기록한 컴퓨터 판독가능 매체 등일 수 있다.The editing task manager 420 may include, from the user interface screen information and the platform information stored in the platform information database, at least one platform to which an editing target user interface screen and an editing target user interface screen are applied. And a standard platform to be directly edited among the at least one platform. The editing task manager 420 may be a computer readable medium recorded with computer executable instructions for performing the function.

상기 편집 작업 관리기(420)는 상기 편집대상 사용자 인터페이스 화면을 선택하는데 있어 레이어로서 동작하는 컨테이너 레이아웃 기능을 갖는 사용자 인터페이스 화면인지 여부를 설정할 수 있는 것일 수 있다.The editing task manager 420 may set whether the editing task manager 420 is a user interface screen having a container layout function that operates as a layer in selecting the editing target user interface screen.

상기 사용자 인터페이스 화면 편집기(430)는 상기 편집 작업 관리기(420)가 선택한 상기 표준 플랫폼에 대응하여, 상기 편집대상 사용자 인터페이스 화면을 구성하는 자원들의 위치를 배치하고, 배치된 상기 편집대상 사용자 인터페이스 화면을 구성하는 자원들의 위치에 대응하여, 상기 적어도 하나의 플랫폼 중 상기 표준 플랫폼을 제외한 비표준 플랫폼에 대응되는 사용자 인터페이스 화면을 구성하는 자원들의 위치를 동기적으로 배치하는 장치이다. 상기 편집 작업 관리기(420)는 상기 기능을 수행하는 컴퓨터 실행가능 명령어로 기록한 컴퓨터 판독가능 매체 등일 수 있다.The user interface screen editor 430 arranges the positions of the resources constituting the editable user interface screen corresponding to the standard platform selected by the editing task manager 420, and displays the arranged edited user interface screen. In response to the location of the constituent resources, the device for synchronously disposing the location of the resources constituting the user interface screen corresponding to the non-standard platform of the at least one platform other than the standard platform. The editing task manager 420 may be a computer readable medium recorded with computer executable instructions for performing the function.

상기 사용자 인터페이스 화면 편집기(430)는 사용자 인터페이스 화면의 편집에 있어 레이어로서 동작하는 컨테이너 레이아웃 기능을 갖는 사용자 인터페이스 화면을 편집할 수 있는 것일 수 있다.The user interface screen editor 430 may edit a user interface screen having a container layout function that functions as a layer when editing the user interface screen.

이상 실시예를 참조하여 설명하였지만, 해당 기술 분야의 숙련된 당업자는 하기의 특허 청구의 범위에 기재된 본 발명의 사상 및 영역으로부터 벗어나지 않는 범위 내에서 본 발명을 다양하게 수정 및 변경시킬 수 있음을 이해할 수 있을 것이다.Although described with reference to the embodiments above, those skilled in the art will understand that the present invention can be variously modified and changed without departing from the spirit and scope of the invention as set forth in the claims below. Could be.

도 1은 본 발명의 일 실시예에 따른 동시 편집을 지원하는 다중 플랫폼 기반 사용자 인터페이스 화면 편집 방법의 전체적인 과정을 나타내는 흐름도이다.1 is a flowchart illustrating the overall process of a multi-platform based user interface screen editing method supporting simultaneous editing according to an embodiment of the present invention.

도 2는 본 발명의 일 실시예에 따른 동시 편집을 지원하는 다중 플랫폼 기반 사용자 인터페이스 화면 편집 방법에 있어 표준 플랫폼에 대응하는 사용자 인터페이스 화면과 비표준 플랫폼에 대응하는 사용자 인터페이스 화면 간의 동기화 과정을 나타내는 개념도이다.2 is a conceptual diagram illustrating a synchronization process between a user interface screen corresponding to a standard platform and a user interface screen corresponding to a non-standard platform in a multi-platform based user interface screen editing method supporting simultaneous editing according to an embodiment of the present invention. .

도 3은 본 발명의 일 실시예에 따른 동시 편집을 지원하는 다중 플랫폼 기반 사용자 인터페이스 화면 편집 방법에 이용되는 다중 플랫폼 기반 사용자 인터페이스 생성 방법에 있어 컨테이너 레이아웃의 오버랩으로부터 최종 사용자 인터페이스를 생성하는 과정을 나타내는 개념도이다.3 is a diagram illustrating a process of generating an end user interface from overlapping container layouts in a method for generating a multi-platform based user interface used in a multi-platform based user interface screen editing method supporting simultaneous editing according to an embodiment of the present invention. Conceptual diagram.

도 4는 본 발명의 일 실시예에 따른 동시 편집을 지원하는 다중 플랫폼 기반 사용자 인터페이스 화면 편집 장치의 구성을 나타내는 블록도이다.4 is a block diagram illustrating a configuration of a multi-platform based user interface screen editing apparatus supporting simultaneous editing according to an embodiment of the present invention.

* 도면의 주요부분에 대한 부호의 설명 *Explanation of symbols on the main parts of the drawings

110 : 편집 대상 화면 선택 단계 120 : 편집 대상 플랫폼 선택 단계110: step of selecting the editing target screen 120: step of selecting the editing target platform

130 : 표준 플랫폼 선택 단계 140 : 레이아웃 편집 단계130: standard platform selection step 140: layout editing step

150 : 레이아웃 동기화 단계150: layout synchronization step

210-1 : 플랫폼 #1 사용자 인터페이스 화면210-1: Platform # 1 User Interface Screen

210-N : 플랫폼 #N 사용자 인터페이스 화면210-N: Platform #N User Interface Screen

310 : 컨테이너 레이아웃 #1 320 : 컨테이너 레이아웃 #2310: Container Layout # 1 320: Container Layout # 2

330 : 컨테이너 레이아웃 #3 340 : 최종 사용자 인터페이스330: Container Layout # 3 340: End User Interface

410 : 플랫폼 정보 데이터베이스 420 : 편집 작업 관리기410: platform information database 420: editing task manager

430 : 사용자 인터페이스 화면 편집기430: user interface screen editor

Claims (10)

적어도 하나의 자원으로 구성된 적어도 하나의 사용자 인터페이스 화면을 포함한 사용자 인터페이스의 설계 방법으로, 상기 사용자 인터페이스 화면을 구성하는 자원들의 레이아웃을 다양한 플랫폼에 대응하여 편집하는 사용자 인터페이스 화면 편집 방법에 있어서,A method of designing a user interface including at least one user interface screen composed of at least one resource, the user interface screen editing method of editing a layout of resources constituting the user interface screen corresponding to various platforms, 상기 적어도 하나의 사용자 인터페이스 화면 중 편집대상 사용자 인터페이스 화면을 선택 받는 편집대상 화면 선택 단계;An editing target screen selection step of selecting an editing target user interface screen among the at least one user interface screen; 선택된 상기 편집대상 사용자 인터페이스 화면이 표시될 적어도 하나의 대상 플랫폼을 선택 받는 편집대상 플랫폼 선택 단계;An editing target platform selection step of selecting at least one target platform on which the selected editing target user interface screen is displayed; 선택된 상기 적어도 하나의 대상 플랫폼 중 기준 플랫폼을 선택 받는 기준 플랫폼 선택 단계;A reference platform selection step of selecting a reference platform among the selected at least one target platform; 선택된 상기 기준 플랫폼에 대응되는 상기 편집대상 사용자 인터페이스 화면을 구성하는 적어도 하나의 자원의 위치를 결정 받는 대상 화면 편집 단계 및A target screen editing step of receiving a location of at least one resource constituting the editing target user interface screen corresponding to the selected reference platform; 상기 대상 화면 편집 단계에서 결정된 상기 적어도 하나의 자원의 위치에 대응하여, 상기 기준 플랫폼이 아닌 상기 대상 플랫폼에 대응되는 사용자 인터페이스 화면을 구성하는 적어도 하나의 자원의 위치를 플랫폼 간 화면 크기 비율 차이 및 플랫폼 간 화면 해상도 차이 중 적어도 하나에 기초하여 결정하는 플랫폼 별 화면 동기화 단계를 포함하되,In response to the location of the at least one resource determined in the target screen editing step, a screen size ratio difference between platforms and a location of at least one resource constituting a user interface screen corresponding to the target platform instead of the reference platform A platform-specific screen synchronization step of determining based on at least one of the screen resolution difference between, 상기 사용자 인터페이스 화면은 식별자 및 자원 정보를 포함하는 적어도 하나의 컨테이너 레이아웃을 순차적으로 상하로 겹쳐서 형성되는 것을 특징으로 하는 동시 편집을 지원하는 다중 플랫폼 기반 사용자 인터페이스 화면 편집 방법.And the user interface screen is formed by sequentially stacking at least one container layout including an identifier and resource information. 삭제delete 제1항에 있어서,The method of claim 1, 상기 대상 화면 편집 단계는,The target screen editing step, 선택된 상기 기준 플랫폼에 대응되는 상기 편집대상 사용자 인터페이스 화면을 구성하는 적어도 하나의 컨테이너 레이아웃에 포함된 적어도 하나의 자원의 위치를 결정 받는 것을 특징으로 하는 동시 편집을 지원하는 다중 플랫폼 기반 사용자 인터페이스 화면 편집 방법.Method for editing a multi-platform based user interface screen supporting simultaneous editing, wherein the location of at least one resource included in at least one container layout constituting the editing target user interface screen corresponding to the selected reference platform is determined . 제1항에 있어서,The method of claim 1, 상기 적어도 하나의 사용자 인터페이스 화면은 상기 포함되는 자원의 유형을 지정하는 속성을 가지는 것을 특징으로 하는 동시 편집을 지원하는 다중 플랫폼 기 반 사용자 인터페이스 화면 편집 방법.And at least one user interface screen has an attribute for designating a type of the included resource. 제4항에 있어서,The method of claim 4, wherein 상기 자원의 유형을 지정하는 속성은 푸시 버튼, 라디오 버튼, 그림, 소리, 동영상 또는 정적 텍스트 중 적어도 하나를 지정하는 것을 특징으로 하는 동시 편집을 지원하는 다중 플랫폼 기반 사용자 인터페이스 화면 편집 방법.The property for specifying the type of the resource is a multi-platform based user interface screen editing method for supporting simultaneous editing, characterized in that at least one of the push button, radio button, picture, sound, video or static text. 제1항에 있어서,The method of claim 1, 상기 적어도 하나의 사용자 인터페이스 화면은 상기 포함되는 자원의 위치를 지정하는 속성을 가지는 것을 특징으로 하는 동시 편집을 지원하는 다중 플랫폼 기반 사용자 인터페이스 화면 편집 방법.And the at least one user interface screen has an attribute for designating a location of the included resource. 적어도 하나의 자원으로 구성된 적어도 하나의 사용자 인터페이스 화면을 포함한 사용자 인터페이스에 있어서, 상기 사용자 인터페이스 화면을 구성하는 자원들의 레이아웃을 다양한 플랫폼에 대응하여 편집하는 사용자 인터페이스 화면 편집 장치에 있어서,A user interface including at least one user interface screen composed of at least one resource, the user interface screen editing apparatus for editing a layout of resources constituting the user interface screen corresponding to various platforms, 상기 적어도 하나의 사용자 인터페이스 화면에 대한 사용자 인터페이스 화면 정보 및 상기 적어도 하나의 사용자 인터페이스 화면에 대응되는 적어도 하나의 플랫폼에 대한 플랫폼 정보를 저장하는 플랫폼 정보 데이터베이스;A platform information database for storing user interface screen information of the at least one user interface screen and platform information of at least one platform corresponding to the at least one user interface screen; 상기 플랫폼 정보 데이터베이스에 저장된 상기 사용자 인터페이스 화면 정보 및 상기 플랫폼 정보로부터, 편집대상 사용자 인터페이스 화면, 상기 편집대상 사용자 인터페이스 화면이 표시될 적어도 하나의 대상 플랫폼 및 상기 적어도 하나의 대상 플랫폼 중 기준 플랫폼을 선택하는 편집 작업 관리기 및Selecting a reference platform from among the user interface screen information and the platform information stored in the platform information database, at least one target platform on which the editing target user interface screen, the editing user interface screen is displayed, and the at least one target platform; Edit Task Manager and 상기 기준 플랫폼에 대응되는 상기 편집대상 사용자 인터페이스 화면을 구성하는 적어도 하나의 자원의 위치를 결정하고, 상기 결정된 상기 적어도 하나의 자원의 위치에 대응하여, 상기 기준 플랫폼이 아닌 상기 대상 플랫폼에 대응되는 사용자 인터페이스 화면을 구성하는 적어도 하나의 자원의 위치를 플랫폼 간 화면 크기 비율 차이 및 플랫폼 간 화면 해상도 차이 중 적어도 하나에 기초하여 결정하는 사용자 인터페이스 화면 편집기를 포함하되,Determine a location of at least one resource constituting the editable user interface screen corresponding to the reference platform, and corresponding to the determined location of the at least one resource, a user corresponding to the target platform other than the reference platform And a user interface screen editor for determining a location of at least one resource constituting the interface screen based on at least one of a screen size ratio difference between platforms and a screen resolution difference between platforms. 상기 사용자 인터페이스 화면은 식별자 및 자원 정보를 포함하는 적어도 하나의 컨테이너 레이아웃을 순차적으로 상하로 겹쳐서 형성되는 것을 특징으로 하는 동시 편집을 지원하는 다중 플랫폼 기반 사용자 인터페이스 화면 편집 장치.And the user interface screen is formed by sequentially stacking at least one container layout including an identifier and resource information. 삭제delete 삭제delete 적어도 하나의 자원으로 구성된 적어도 하나의 사용자 인터페이스 화면을 포함한 사용자 인터페이스의 설계 방법으로, 상기 사용자 인터페이스 화면을 구성하는 자원들의 레이아웃을 다양한 플랫폼에 대응하여 편집하는 사용자 인터페이스 화면 편집 방법 방법을 컴퓨터 실행가능 명령어로 기록한 컴퓨터 판독가능 매체에 있어서,A method of designing a user interface including at least one user interface screen composed of at least one resource, the method for editing a user interface screen for editing a layout of resources constituting the user interface screen corresponding to various platforms. In a computer-readable medium recorded by 상기 적어도 하나의 사용자 인터페이스 화면 중 편집대상 사용자 인터페이스 화면을 선택 받는 편집대상 화면 선택 단계;An editing target screen selection step of selecting an editing target user interface screen among the at least one user interface screen; 선택된 상기 편집대상 사용자 인터페이스 화면이 표시될 적어도 하나의 대상 플랫폼을 선택 받는 편집대상 플랫폼 선택 단계;An editing target platform selection step of selecting at least one target platform on which the selected editing target user interface screen is displayed; 선택된 상기 적어도 하나의 대상 플랫폼 중 기준 플랫폼을 선택 받는 기준 플랫폼 선택 단계;A reference platform selection step of selecting a reference platform among the selected at least one target platform; 선택된 상기 기준 플랫폼에 대응되는 상기 편집대상 사용자 인터페이스 화면을 구성하는 적어도 하나의 자원의 위치를 결정 받는 대상 화면 편집 단계 및A target screen editing step of receiving a location of at least one resource constituting the editing target user interface screen corresponding to the selected reference platform; 상기 대상 화면 편집 단계에서 결정된 상기 적어도 하나의 자원의 위치에 대응하여, 상기 기준 플랫폼이 아닌 상기 대상 플랫폼에 대응되는 사용자 인터페이스 화면을 구성하는 적어도 하나의 자원의 위치를 플랫폼 간 화면 크기 비율 차이 및 플랫폼 간 화면 해상도 차이 중 적어도 하나에 기초하여 결정하는 플랫폼 별 화면 동기화 단계를 포함하되,In response to the location of the at least one resource determined in the target screen editing step, a screen size ratio difference between platforms and a location of at least one resource constituting a user interface screen corresponding to the target platform instead of the reference platform A platform-specific screen synchronization step of determining based on at least one of the screen resolution difference between, 상기 사용자 인터페이스 화면은 식별자 및 자원 정보를 포함하는 적어도 하나의 컨테이너 레이아웃을 순차적으로 상하로 겹쳐서 형성되는 것을 특징으로 하는 동시 편집을 지원하는 다중 플랫폼 기반 사용자 인터페이스 화면 편집 방법을 컴퓨터 실행가능 명령어로 기록한 컴퓨터 판독가능 매체.The user interface screen is a computer that records a multi-platform based user interface screen editing method for supporting simultaneous editing, wherein the at least one container layout including an identifier and resource information is formed in an orderly manner. Readable Media.
KR1020080004636A 2008-01-15 2008-01-15 Multi-Platform based User Interface Screen Editing Method And Device Supporting Concurrent Editing of User Interface Screens KR100962441B1 (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
KR1020080004636A KR100962441B1 (en) 2008-01-15 2008-01-15 Multi-Platform based User Interface Screen Editing Method And Device Supporting Concurrent Editing of User Interface Screens

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR1020080004636A KR100962441B1 (en) 2008-01-15 2008-01-15 Multi-Platform based User Interface Screen Editing Method And Device Supporting Concurrent Editing of User Interface Screens

Publications (2)

Publication Number Publication Date
KR20090078698A KR20090078698A (en) 2009-07-20
KR100962441B1 true KR100962441B1 (en) 2010-06-14

Family

ID=41336751

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020080004636A KR100962441B1 (en) 2008-01-15 2008-01-15 Multi-Platform based User Interface Screen Editing Method And Device Supporting Concurrent Editing of User Interface Screens

Country Status (1)

Country Link
KR (1) KR100962441B1 (en)

Families Citing this family (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR101961698B1 (en) * 2011-04-19 2019-03-25 삼성전자주식회사 Method for defining overlay region of user interface control and mobile device thereof
US20130145257A1 (en) * 2011-12-06 2013-06-06 Google Inc. Edition Designer
WO2013094880A1 (en) * 2011-12-23 2013-06-27 Kim Jung-Han Method for editing frame and system for editing frame using graphic user interface
KR20140023534A (en) * 2012-08-16 2014-02-27 에스케이플래닛 주식회사 Apparatus for implementing responsive user interface, method thereof and recordable medium storing the method
CN107608675B (en) * 2017-09-27 2020-05-01 微景天下（北京）科技有限公司 Cross-platform front-end development system and method based on virtual document object model
CN112558961A (en) * 2020-12-24 2021-03-26 北京中交兴路车联网科技有限公司 Method and device for presenting guide mask, electronic equipment and storage medium

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2005242474A (en) 2004-02-24 2005-09-08 Mitsubishi Electric Corp User interface design device and program
JP2005309978A (en) 2004-04-23 2005-11-04 Mitsubishi Electric Corp Gui design apparatus and program
KR20060018515A (en) * 2004-08-24 2006-03-02 에스케이 텔레콤주식회사 Method and apparatus for decorating menu provided to mobile terminal

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2005242474A (en) 2004-02-24 2005-09-08 Mitsubishi Electric Corp User interface design device and program
JP2005309978A (en) 2004-04-23 2005-11-04 Mitsubishi Electric Corp Gui design apparatus and program
KR20060018515A (en) * 2004-08-24 2006-03-02 에스케이 텔레콤주식회사 Method and apparatus for decorating menu provided to mobile terminal

Also Published As

Publication number Publication date
KR20090078698A (en) 2009-07-20

Similar Documents

Publication Publication Date Title
KR101456506B1 (en) An authoring tool for web applications and the authoring method thereof
KR100962441B1 (en) Multi-Platform based User Interface Screen Editing Method And Device Supporting Concurrent Editing of User Interface Screens
Smith et al. Android recipes: a problem-solution approach
US20060225094A1 (en) Enabling customization and personalization of views in content aggregation frameworks
US8739063B2 (en) Localized exploded view
US20160098250A1 (en) Application prototyping tool
EP1988454A1 (en) Source code generating device
JP2008269554A (en) Source code generating device
US20110126171A1 (en) Dynamic native editor code view facade
US9569182B2 (en) Integrated development environment and method
WO2013109858A1 (en) Design canvas
US20030037310A1 (en) Visual programming tool and execution environment for developing computer software applications
JP2001306310A (en) Method and device for assisting creation of gui part and application developing method
JP2009129223A (en) Image editing device, image editing program, recording medium, and image editing method
JP5014491B2 (en) Multi-platform based user interface screen editing method and apparatus for supporting simultaneous editing
KR101118536B1 (en) Method for providing authoring means of interactive contents
JP2001103415A (en) Slide show device
CN111010600A (en) Tiled fusion windowing method based on distributed cloud splicing and display screen
JP4582701B2 (en) Screen creation method, apparatus, and program
US20100192074A1 (en) Pluggable margin extension
JP2009129224A (en) Image operating device, image operating program, recording medium, and image operating method
CN114153442A (en) Large-screen visualization page configuration method and system based on visualization component
JP2012014560A (en) Graphic editing program, graphic editing method and graphic editing apparatus
US10489499B2 (en) Document editing system with design editing panel that mirrors updates to document under creation
CN102841918A (en) Method and device for processing binary system long-object fluidized data

Legal Events

Date Code Title Description
A201 Request for examination
E902 Notification of reason for refusal
E701 Decision to grant or registration of patent right
GRNT Written decision to grant
FPAY Annual fee payment

Payment date: 20130410

Year of fee payment: 4

LAPS Lapse due to unpaid annual fee