KR101170263B1 - Cross platform solution and system for genterating cross platform mobile source for developing efficiently mobile web page - Google Patents

Cross platform solution and system for genterating cross platform mobile source for developing efficiently mobile web page Download PDF

Info

Publication number
KR101170263B1
KR101170263B1 KR1020100103919A KR20100103919A KR101170263B1 KR 101170263 B1 KR101170263 B1 KR 101170263B1 KR 1020100103919 A KR1020100103919 A KR 1020100103919A KR 20100103919 A KR20100103919 A KR 20100103919A KR 101170263 B1 KR101170263 B1 KR 101170263B1
Authority
KR
South Korea
Prior art keywords
component
information
web page
mobile
input
Prior art date
Application number
KR1020100103919A
Other languages
Korean (ko)
Other versions
KR20120042291A (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 KR1020100103919A priority Critical patent/KR101170263B1/en
Publication of KR20120042291A publication Critical patent/KR20120042291A/en
Application granted granted Critical
Publication of KR101170263B1 publication Critical patent/KR101170263B1/en

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/20—Natural language analysis
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/40—Processing or translation of natural language
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/40—Transformation of program code
    • G06F8/41—Compilation

Abstract

본 발명은 모바일 웹페이지를 효율적으로 개발하기 위한 크로스 플랫폼 솔루션에 관한 것으로, 더욱 상세하게는 모바일 단말의 운영체계에 관계없이 자동으로 모바일 웹페이지를 생성할 수 있도록 크로스 플랫폼 모바일 소스를 생성하는 방법에 관한 것이다. The present invention relates to a cross-platform solution for efficiently developing mobile web pages, and more particularly, to a method for generating a cross-platform mobile source to automatically generate a mobile web page regardless of the operating system of the mobile terminal. It is about.

Description

모바일 웹페이지를 효율적으로 개발하기 위한 크로스 플랫폼 솔루션 및 크로스 플랫폼 모바일 소스 생성 시스템{CROSS PLATFORM SOLUTION AND SYSTEM FOR GENTERATING CROSS PLATFORM MOBILE SOURCE FOR DEVELOPING EFFICIENTLY MOBILE WEB PAGE}CROSS PLATFORM SOLUTION AND SYSTEM FOR GENTERATING CROSS PLATFORM MOBILE SOURCE FOR DEVELOPING EFFICIENTLY MOBILE WEB PAGE}

본 발명은 모바일 웹페이지를 효율적으로 개발하기 위한 크로스 플랫폼 솔루션에 관한 것으로, 더욱 상세하게는 모바일 단말의 운영체계에 관계없이 자동으로 모바일 웹페이지를 생성할 수 있도록 크로스 플랫폼 모바일 소스를 생성하는 방법에 관한 것이다.
The present invention relates to a cross-platform solution for efficiently developing mobile web pages, and more particularly, to a method for generating a cross-platform mobile source to automatically generate a mobile web page regardless of the operating system of the mobile terminal. It is about.

최근 전자 및 통신의 비약적인 발전에 따라 컴퓨터 및 인터넷 기술이 급속하게 진화함과 동시에 휴대폰이라는 휴대용 전화기가 단순한 전화의 기능을 넘어 다양한 기능을 구비하여 휴대용 컴퓨터로 진화를 계속하고 있다. In recent years, with the rapid development of electronic and communication, computer and internet technologies are rapidly evolving, and portable telephones, such as mobile phones, continue to evolve into portable computers with various functions beyond simple telephone functions.

특히, 스마트 폰은 휴대전화의 기능은 물론 인터넷 통신과 정보 검색 등 컴퓨터 지원 기능을 추가한 지능형 모바일 단말기로 사용자가 원하는 애플리케이션을 설치하여 다양한 서비스를 이용할 수 있다. In particular, a smart phone is an intelligent mobile terminal that adds computer-assisted functions such as Internet communication and information retrieval, as well as a function of a mobile phone, so that various services can be installed by installing an application desired by a user.

스마트 폰이 처음 소개된 이후부터 계속하여 스마트 폰에 대한 새로운 기술의 개발이 급속하게 이루어지는 것은 물론 그 보급 속도가 기존의 휴대 단말과는 비교할 수 없을 만큼 빠르다. Since the introduction of smart phones, the development of new technologies for smart phones continues to be rapid, and their speed of spread is incomparably faster than that of existing mobile terminals.

이와 같이, 스마트 폰은 이동 중에 실시간으로 기존 컴퓨터가 가지는 기능을 이용할 수 있는 것은 물론 기존 컴퓨터가 이동성이 없다는 한계로 제공할 수 없었던 다양한 서비스까지 제공할 수 있어, 스마트 폰에 적용될 수 있는 다양한 서비스들이 개발되고 있다. As such, the smart phone can not only use the functions of the existing computer in real time while moving, but also provide various services that could not be provided due to the limitation that the existing computer is not mobile, and various services that can be applied to the smart phone are provided. Is being developed.

스마트 폰과 같은 모바일 단말에 적합한 새로운 서비스를 개발하는 것과 별도로 기존 컴퓨터를 통해 제공하는 서비스를 이동성이 있는 모바일 단말에서도 실시간으로 이용할 수 있도록 하는 새로운 기술들이 다양하게 개발되고 있다. Apart from developing a new service suitable for a mobile terminal such as a smart phone, a variety of new technologies are being developed to enable a service provided through an existing computer to be used in real time even in a mobile mobile terminal.

특히, 기존 컴퓨터를 통해 제공되는 웹페이지를 모바일 단말에서도 자유롭게 이용할 수 있도록 모바일용 웹페이지에 대한 개발이 활발하게 진행되고 있다. In particular, development of mobile web pages is being actively conducted so that web pages provided through existing computers can be freely used in mobile terminals.

하지만, 모바일 단말의 경우에도 기존의 컴퓨터와 같이 모바일 단말의 하드웨어와 소프트웨어를 제어하여 사용자가 모바일 단말을 사용할 수 있도록 하는 프로그램인 운영체계(OS, operating system)가 기본적으로 탑제함은 물론 카메라, GPS 등의 다양한 기능을 추가로 구비한다. However, even in the case of a mobile terminal, an operating system (OS), which is a program that allows a user to use a mobile terminal by controlling hardware and software of the mobile terminal like a conventional computer, is basically equipped with a camera and a GPS. It is equipped with various functions, such as these.

다만, 최근에 출시되고 있는 모바일 단말의 경우에 다양한 운영체계가 이용되고 있다. 예를 들어, 애플에서 개발된 IOS, 구글의 안드로이드, 노키아의 심비안 그리고 림(RIM, Research In Motion) 운영체계, 삼성의 바다 운영체계 등 다양한 운영체계가 있다. However, a variety of operating systems are used in the case of recently released mobile terminals. For example, there are a variety of operating systems, including Apple-developed iOS, Google's Android, Nokia's Symbian and RIM (Research In Motion) operating systems, and Samsung's ocean operating systems.

따라서, 기존의 웹페이지를 다양한 모바일에서 이용할 수 있도록 하기 위해서는 각각의 운영체계 및 각 모바일 단말의 스펙에 맞는 모바일 웹페이지를 별도로 개발해야 하는 문제가 있다.
Therefore, in order to use an existing web page in various mobiles, there is a problem of separately developing a mobile web page that meets the specifications of each operating system and each mobile terminal.

상기와 같은 문제를 해결하기 위해, 본 발명은 운영체계가 다른 모바일 단말마다 별도의 모바일 웹페이지를 개발하는 대신에 각 모바일 단말에 적합한 웹페이지를 자동으로 재생할 수 있는 크로스 플랫폼 모바일 소스를 생성하는 방법을 제공하는 것을 목적으로 한다. In order to solve the above problems, the present invention is a method for generating a cross-platform mobile source that can automatically play a web page suitable for each mobile terminal instead of developing a separate mobile web page for each mobile terminal having a different operating system The purpose is to provide.

또한, 본 발명은 크로스 플랫폼 모바일 소스를 자동생성하기 위해 디자인 툴(Desing Tool)에 의해 이미지로 디스플레이된 컴포넌트(component)를 드래그앤드롭(Drag & Drop)의 방식으로 레이아웃(Lay out)하는 방식을 이용하는 모바일 웹페이지를 효율적으로 개발하기 위한 크로스 플랫폼 솔루션을 제공한다.
In addition, the present invention provides a method of laying out a component displayed as an image by a design tool (Drag & Drop) to automatically generate a cross-platform mobile source. It provides a cross platform solution for efficiently developing mobile web pages.

상기와 같은 목적을 달성하기 위해, 본 발명의 제 1 실시예에 의한 크로스 플랫폼 모바일 소스 생성 시스템은 화면의 일부 영역에 출력된 컴포넌트를 선택하여 드래그앤드롭에 의해 웹페이지 화면의 특정 위치로 상기 컴포넌트를 입력하는 입력부; 상기 출력된 컴포넌트에 관한 정보를 저장하는 저장부; 상기 저장부에 저장된 컴포넌트에 관한 정보를 이용해 상기 입력된 컴포넌트에 관한 속성, 이벤트 정보를 설정하고, 상기 컴포넌트에 컨텐츠 정보를 매핑하는 처리부; 및 상기 처리부에 의한 적어도 하나 이상의 컴포넌트로 구성된 웹페이지 정보를 모바일 웹페이지로 자동 생성할 수 있는 프로그램 언어로 변환하는 변환부를 포함한다. In order to achieve the above object, the cross platform mobile source generation system according to the first embodiment of the present invention selects a component output on a portion of the screen and drags and drops the component to a specific position of the web page screen. Input unit for inputting; A storage unit which stores information about the output component; A processor configured to set attributes and event information about the input component by using information about the component stored in the storage and to map content information to the component; And a converting unit converting web page information including at least one component by the processing unit into a program language capable of automatically generating a mobile web page.

이때, 상기 저장부는 상기 컴포넌트에 대응되는 컨텐츠 정보를 저장하는 컨텐츠 저장부; 및 상기 컴포넌트의 속성과 이벤트에 관한 정보를 저장하는 디자인 리소스 저장부를 포함한다. The storage unit may include a content storage unit that stores content information corresponding to the component; And a design resource storage unit that stores information about attributes and events of the component.

한편, 상기 입력부는 화면의 일부 영역에 이미지로 출력되는 컴포넌트를 드래그 앤 드롭에 의해 웹페이지 화면의 특정 위치에 입력하고, 상기 컴포넌트에 관한 속성 및 이벤트 정보는 상기 컴포넌트가 입력되면 상기 컴포넌트에 관한 속성 및 이벤트 정보를 출력하여 선택되는 정보를 입력하는 것을 특징으로 한다. Meanwhile, the input unit inputs a component outputted as an image to a partial area of the screen to a specific position of the web page screen by dragging and dropping, and the property and event information about the component is associated with the component when the component is input. And inputting selected information by outputting event information.

또한, 상기 처리부는 상기 입력부를 통해 입력된 컴포넌트의 속성을 설정하는 제 1 설정부; 상기 입력된 컴포넌트의 이벤트 정보를 설정하는 제 2 설정부; 및 상기 입력된 컴포넌트의 컨텐츠 정보를 상기 컨텐츠 저장부로부터 검색하여 매핑하는 매핑부를 포함하는 것을 특징으로 한다. The processor may include a first setting unit configured to set a property of a component input through the input unit; A second setting unit configured to set event information of the input component; And a mapping unit searching for and mapping the content information of the input component from the content storage unit.

그리고, 상기 변환부는 상기 처리부에 의해 상기 컴포넌트에 설정된 속성에 관한 정보는 CSS로 변환하고, 상기 컴포넌트의 이벤트 정보는 Java Script로 변환하고, 상기 컴포넌트의 컨텐츠 정보는 HTML TAG로 변환하는 것을 특징으로 한다.
The converting unit converts the information about the property set in the component into CSS, converts event information of the component into Java Script, and converts content information of the component into HTML TAG. .

상기와 같은 목적을 달성하기 위해, 본 발명의 제 2 실시예에 의한 크로스 플랫폼 모바일 소스 생성 방법은 화면의 일부 영역에 적어도 하나 이상의 컴포넌트를 출력하고, 상기 화면의 또다른 일부 영역에 구성하고자 하는 웹페이지 화면을 출력하는 1 단계; 상기 출력된 컴포넌트를 선택하여 드래그앤드롭에 의해 상기 웹페이지 화면의 특정 위치로 이동하여 상기 컴포넌트를 입력하는 2 단계; 상기 입력된 컴포넌트에 관한 속성 및 이벤트 정보를 설정하고, 상기 컴포넌트에 대응되는 컨텐츠 정보를 매핑하는 3 단계; 상기 컴포넌트로 구성된 웹페이지 정보를 모바일 웹페이지로 자동 생성할 수 있는 프로그램 언어로 변환하는 4 단계; 및 상기 변환된 웹페이지 정보를 저장 또는 전송하는 5 단계를 포함한다. In order to achieve the above object, the cross-platform mobile source generation method according to a second embodiment of the present invention outputs at least one or more components in a portion of the screen, the web to be configured in another portion of the screen Step 1 of outputting a page screen; Selecting the output component, moving to a specific position of the web page screen by dragging and dropping, and inputting the component; Setting property and event information about the input component and mapping content information corresponding to the component; Converting the web page information composed of the component into a program language that can be automatically generated as a mobile web page; And five steps of storing or transmitting the converted webpage information.

이때, 상기 3 단계는 상기 컴포넌트에 관한 속성 및 이벤트 정보는 상기 컴포넌트가 입력되면 상기 컴포넌트에 관한 적어도 하나 이상의 속성 및 이벤트 정보를 출력하여 선택되는 정보로 설정되는 것을 특징으로 하고, In this case, the step 3 is characterized in that the property and event information about the component is set to information selected by outputting at least one property and event information about the component when the component is input,

또한, 상기 3 단계는 상기 입력부를 통해 입력된 컴포넌트의 속성을 설정하는 단계; 상기 입력된 컴포넌트의 이벤트 정보를 설정하는 단계; 및 상기 입력된 컴포넌트의 컨텐츠 정보를 컨텐츠 저장부로부터 검색하여 매핑하는 단계를 포함하는 것을 특징으로 한다. In addition, the third step may include setting a property of a component input through the input unit; Setting event information of the input component; And searching and mapping content information of the input component from a content storage unit.

한편, 상기 변환하는 단계는 상기 컴포넌트에 설정된 속성에 관한 정보는 CSS로 변환하고, 상기 컴포넌트의 이벤트 정보는 Java Script로 변환하고, 상기 컴포넌트의 컨텐츠 정보는 HTML TAG로 변환하는 것을 특징으로 한다.
The converting may include converting information about a property set in the component into CSS, converting event information of the component into a Java script, and converting content information of the component into an HTML TAG.

본 발명에 의한, 크로스 플랫폼 모바일 소스를 생성하는 방법은 모바일 웹페이지를 개발함에 있어서 개발자들이 모든 모바일 단말에서 재생하고자 하는 웹페이지에 관한 크로스 플랫폼 모바일 소스를 생성할 수 있도록 하여 운영체계가 다른 모바일 단말 각각에 대한 웹페이지를 별도로 개발하는 번거로움을 해소할 수 있는 효과가 있다.
According to the present invention, a method for generating a cross-platform mobile source enables a developer to generate a cross-platform mobile source for a web page to be played on all mobile terminals in developing a mobile web page so that the operating system has a different operating system. There is an effect that can eliminate the hassle of developing separate web pages for each.

도 1 은 본 발명에 의한 크로스 플랫폼 모바일 소스를 생성하는 개념을 나타내는 도면이다.
도 2 는 본 발명에 의한 크로스 플랫폼 모바일 소스를 생성하는 디자인 툴의 구성을 나타내는 도면이다.
도 3 은 본 발명에 의한 크로스 플랫폼 모바일 소스를 생성하는 방법을 나타내는 도면이다.
도 4 는 본 발명에 의해 생성된 크로스 플랫폼 모바일 소스를 이용해 모바일 웹페이지를 자동으로 생성하는 시스템을 나타내는 도면이다. 1 is a diagram illustrating the concept of generating a cross-platform mobile source according to the present invention.
2 is a view showing the configuration of a design tool for generating a cross-platform mobile source according to the present invention.
3 is a diagram illustrating a method for generating a cross platform mobile source according to the present invention.
4 is a diagram illustrating a system for automatically generating mobile web pages using a cross platform mobile source generated by the present invention.

이하, 본 발명의 바람직한 실시 예를 첨부한 도면을 참조하여 상세히 설명한다. 본 발명을 설명함에 있어, 관련된 공지 기능 혹은 구성에 대한 구체적인 설명이 본 발명의 요지를 불필요하게 흐릴 수 있다고 판단되는 경우 그 상세한 설명을 생략한다.
Hereinafter, exemplary embodiments of the present invention will be described in detail with reference to the accompanying drawings. In describing the present invention, if it is determined that detailed descriptions of related known functions or configurations may unnecessarily obscure the subject matter of the present invention, the detailed description thereof will be omitted.

도 1 은 본 발명에 의한 크로스 플랫폼 모바일 소스를 생성하는 개념을 나타내는 도면이다. 1 is a diagram illustrating the concept of generating a cross-platform mobile source according to the present invention.

도시된 바와 같이, 본 발명에 의한 크로스 플랫폼 모바일 소스를 생성하는 방법은 현재 존재하는 다양한 모바일 단말기(50)에 그 종류에 관계없이 모바일 웹페이지를 자동으로 재생할 수 있도록 디자인 툴(Design Tool)을 제공하여 이루어진다. As shown, a method for generating a cross-platform mobile source according to the present invention provides a design tool to automatically play a mobile web page regardless of its kind to various mobile terminals 50 currently existing. It is done by

여기서, 디자인 툴(Design Tool)은 크로스 플랫폼 모바일 소스 생성 시스템을 구현하는 구체적인 구현방법의 하나로 개발자가 출력되는 이미지 등을 드래그앤드롭(Drag & Drop)의 방식으로 원하는 웹페이지를 시각적으로 구성할 수 있는 하나의 툴을 말한다. Here, the Design Tool is a concrete implementation method for implementing a cross-platform mobile source generation system. The developer can visually compose a desired web page by dragging and dropping an image outputted by a developer. Say that's one tool.

특히, 디자인 툴(Design Tool)에 의해 생성되는 크로스 플랫폼 모바일 소스는 기존에 모바일 단말의 화면 크기에 맞게 화면 혹은 이미지 등의 크기를 단순히 최적화하는 것과는 다르다. 구체적으로, 디자인 툴(Design Tool)은 개발자가 웹페이지를 구성하는 컴포넌트(Component)를 드래그앤드롭(Drag & Drop)의 방법으로 자신이 원하는 위치에 구성하는 것은 물론 이러한 컴포넌트의 크기, 위치, 색상 등의 속성(Property), 컴포넌트의 Event 및 contents를 구성되는 웹페이지에 맞게 설정하는 것은 물론 이렇게 설정된 정보를 모바일 디바이스의 종류에 따라 변환할 수 있도록 컴포넌트 정보를 필요한 프로그램 언어로 변환하여 저장하는 기능을 수행한다. In particular, the cross-platform mobile source generated by the design tool is different from simply optimizing the size of a screen or an image according to the screen size of the mobile terminal. Specifically, the design tool not only composes the components constituting the web page to the position desired by the developer by drag & drop, but also the size, position, and color of these components. It is possible not only to set properties such as properties, component events and contents to web pages that are composed, but also to convert component information into a necessary programming language so that the information can be converted according to the type of mobile device. To perform.

도 1 에 도시된 바와 같이, 디자인 툴(20)에 의해 구현되는 크로스 플랫폼 모바일 소스 생성시스템은 각 컴포넌트의 속성(property), 이벤트(event) 및 컨텐츠(contents) 내용을 저장하는 데이터베이스(10)와 디자인 툴(20)을 이용해 다양한 모바일 단말기(50)를 통해 최적의 모바일 웹페이지를 제공할 수 있는 크로스 플래소폼 모바일 소스를 생성하고, 이러하게 생성된 크로스 플랫폼 모바일 소스는 모바일 웹페이지 자동 생성 시스템(30)을 통해 각각의 모바일 단말기(50)에 제공될 수 있다. As shown in FIG. 1, the cross-platform mobile source generation system implemented by the design tool 20 includes a database 10 that stores property, event, and content contents of each component. The design tool 20 generates a cross-platform mobile source capable of providing an optimal mobile web page through various mobile terminals 50, and the generated cross-platform mobile source is a mobile web page automatic generation system ( 30 may be provided to each mobile terminal 50.

이하, 본 발명에 의한 모바일 웹페이지를 효율적으로 개발하기 위한 크로스 플랫폼 모바일 소스 생성 시스템을 구체적으로 설명한다.
Hereinafter, a cross-platform mobile source generation system for efficiently developing a mobile web page according to the present invention will be described in detail.

도 2 는 본 발명에 의한 크로스 플랫폼 모바일 소스 생성 시스템의 구성을 나타내는 도면이다. 2 is a diagram showing the configuration of a cross-platform mobile source generation system according to the present invention.

도시된 바와 같이, 크로스 플랫폼 모바일 소스 생성 시스템은 각 컴포넌트 관련 정보를 저장하는 저장부(10), 화면을 통해 컴포넌트 이미지를 출력하는 컴포넌트(Component) 출력부(210), 상기 컴포넌트 출력부(210)를 통해 출력된 컴포넌트 중에서 자신이 필요한 컴포넌트를 선택하여 원하는 상태로 입력하는 입력부(220), 이렇게 입력된 컴포넌트에 관한 정보를 설정하는 처리부(230), 상기 처리부(230)를 통해 설정된 컴포넌트를 모바일 웹 페이지로 변환할 수 있는 프로그램 언어로 변환하는 변환부(240) 및 상기 변환된 정보를 전송하는 전송부(250)를 포함한다. As shown, the cross-platform mobile source generation system includes a storage unit 10 for storing component-related information, a component output unit 210 for outputting a component image through a screen, and the component output unit 210. The input unit 220 to select a component required by the user from among the components output through the input to the desired state, the processor 230 for setting the information about the input component so, the mobile web to the component set through the processor 230 A conversion unit 240 for converting into a program language that can be converted into a page and a transmission unit 250 for transmitting the converted information.

구체적으로, 저장부(10)는 컨텐츠 저장부(Contents DB)(110) 및 디자인 리소스 저장부(Design Resource DB)(120)를 포함한다. In detail, the storage unit 10 includes a contents DB 110 and a design resource DB 120.

컨텐츠 저장부(110)는 모바일 웹페이지를 구성하는 각각의 컴포넌트에 관한 컨텐츠 내용을 저장한다. The content storage unit 110 stores the content of each component constituting the mobile web page.

예를 들어, 컴포넌트가 button 컴포넌트인 경우에는 button 컴포넌트에 대응되는 버튼의 기능에 관한 내용을 저장한다. 또한, input 컴포넌트인 경우에는 해당 컴포넌트는 입력하는 기능을 수행하는 내용을 저장한다. For example, when the component is a button component, the content of a button function corresponding to the button component is stored. In addition, in the case of an input component, the component stores content for performing an input function.

이와 같이, 컨텐츠 저장부(110)는 디자인 툴을 통해 제공되는 모든 컴포넌트의 contents 내용을 저장하여 각 컴포넌트와 매핑되어 해당 기능을 수행할 수 있도록 한다.
As such, the content storage unit 110 stores contents contents of all components provided through the design tool, and maps them to each component to perform a corresponding function.

디자인 리소스 저장부(Design Resource DB)(120)는 각 컴포넌트의 속성(property)과 이벤트(event)에 관한 정보를 저장한다. The design resource storage unit 120 stores information about properties and events of each component.

각 컴포넌트의 속성(property)은 컴포넌트의 크기, 위치, 색상 등과 같은 다양한 property를 포함한다. The properties of each component include various properties such as the size, position, and color of the component.

컴포넌트의 이벤트(event)는 해당 컴포넌트에 관해 필요한 모든 이벤트에 관한 정보를 포함한다. 예를 들어, key, tab, time 등과 관련된 다양한 이벤트 정보를 포함한다.
An event of a component contains information about all events required for that component. For example, it includes various event information related to key, tab, time, and the like.

컴포넌트 출력부(210)는 모바일 웹페이지를 구성하기 위해 필요한 컴포넌트를 이미지로 출력한다. The component output unit 210 outputs a component necessary to compose a mobile web page as an image.

컴포넌트 출력부(210)는 컴포넌트 DB(211)에 저장된 컴포넌트를 다양한 방법으로 출력할 수 있다. The component output unit 210 may output a component stored in the component DB 211 in various ways.

예를 들어, 화면의 일부 영역에 컴포넌트의 이미지를 일정한 순서로 나열할 수 있는 것은 물론, 기능별로 유사한 컴포넌트를 화면별로 출력할 수 있다. 다만, 출력되는 컴포넌트는 새롭게 구성하고자 하는 웹페이지의 화면과 중복되지 않는 영역에 출력하는 것이 바람직하다. For example, images of the components may be arranged in a certain order on a portion of the screen, and similar components may be output for each screen. However, it is preferable to output the output component in an area not overlapping with the screen of the web page to be newly configured.

즉, 개발자가 컴포넌트를 쉽게 인식하고, 출력된 컴포넌트를 드래그앤드롭(Drag & Drop)의 방법으로 새롭게 구성하고자 하는 웹페이지 화면의 특정 위치에 위치하도록 할 수 있는 경우에는 다양한 방법으로 컴포넌트를 출력할 수 있다. In other words, when a developer can easily recognize a component and place the output component on a specific position of a web page screen to be newly configured by drag & drop, the component can be output in various ways. Can be.

입력부(220)는 웹페이지에 새롭게 구성하고자 하는 컴포넌트를 입력한다. The input unit 220 inputs a component to be newly configured in the web page.

구체적으로, 컴포넌트 출력부(210)를 통해 출력된 컴포넌트 중에서 웹페이지에 구성하고자 하는 컴포넌트를 선택하여 출력된 웹페이지 화면의 특정 위치로 드래그앤드롭의 방법으로 컴포넌트를 입력한다. In detail, a component to be configured on a web page is selected from the components output through the component output unit 210, and the component is input by drag and drop to a specific position of the output web page screen.

즉, 개발자는 화면에 출력되는 컴포넌트의 이미지를 선택하여 새롭게 구성하는 웹페이지의 원하는 위치로 옮기는 작업을 통해 컴포넌트를 입력한다. That is, the developer inputs a component by selecting an image of the component output on the screen and moving the image to a desired position of a newly constructed web page.

입력부(220)는 드래그앤드롭에 의해 컴포넌트 이미지를 입력하는 것과 별도로 해당 컴포넌트의 속성과 이벤트 정보를 입력한다. 속성과 이벤트 정보는 먼저 필요한 속성 및 이벤트 정보를 출력하여, 개발자가 선택하는 방법 혹은 별도의 작업으로 입력하는 방법 등 다양한 방법이 적용될 수 있다.
The input unit 220 inputs property and event information of a corresponding component separately from inputting a component image by drag and drop. The property and event information may first be outputted with necessary property and event information, and various methods may be applied such as a method selected by a developer or a method of inputting as a separate task.

처리부(230)는 입력부(220)를 통해 웹페이지의 구성으로 입력되는 컴포넌트가 모바일 단말기를 통해 웹페이지로 제공되는 경우에 정상적인 기능을 수행하기 위해 컴포넌트에 관한 정보를 처리한다. The processor 230 processes information about the component in order to perform a normal function when the component input in the configuration of the webpage through the input unit 220 is provided as a webpage through the mobile terminal.

처리부(230)는 제 1 설정부(231), 제 2 설정부(232) 및 매핑부(233)를 포함한다. The processing unit 230 includes a first setting unit 231, a second setting unit 232, and a mapping unit 233.

구체적으로, 제 1 설정부(231)는 입력된 컴포넌트의 속성을 설정하는 기능을 수행한다. In detail, the first setting unit 231 sets a property of an input component.

예를 들어, 웹페이지에서 컴포넌트의 위치, 크기, 속성 등에 관한 정보를 설정한다. 위치는 드래그앤드롭의 방법에 의해 선택된 웹페이지 화면의 좌표값이 설정될 수 있고, 크기는 웹페이지 화면에서 개발자가 컴포넌트 화면의 크기를 조절하여 정해진 크기로 설정될 수 있다. For example, set information about the position, size, and properties of a component in a web page. The position may be set by the drag and drop method of the coordinate value of the selected web page screen, the size may be set to a predetermined size by the developer adjusts the size of the component screen on the web page screen.

제 2 설정부(232)는 입력된 컴포넌트의 이벤트 정보를 설정하는 기능을 수행한다.The second setting unit 232 performs a function of setting event information of the input component.

컴포넌트의 이벤트 정보는 해당 컴포넌트에 따라 디자인 리소스 DB(120)에 저장된 다양한 이벤트 정보가 설정될 수 있다. Event information of a component may be set various event information stored in the design resource DB (120) according to the component.

이벤트 정보는 컴포넌트가 입력되면, 해당 컴포넌트에 관한 디자인 리소스 DB(120)에 저장된 이벤트 정보를 출력하고, 출력된 이벤트 정보 중에서 원하는 이벤트를 선택하는 방법에 따라 설정될 수 있다.
When the component is input, the event information may be set according to a method of outputting event information stored in the design resource DB 120 of the corresponding component and selecting a desired event from the output event information.

매핑부(233)는 입력된 컴포넌트와 해당 컴포넌트의 컨텐츠를 매핑하는 기능을 수행한다. 매핑부(233)에 의해 컴포넌트의 컨텐츠 내용을 통해 웹페이지에서 컴포넌트가 해당 기능을 수행할 수 있다. The mapping unit 233 performs a function of mapping the input component with the content of the corresponding component. The mapping unit 233 enables the component to perform a corresponding function in the web page through the content content of the component.

처리부(230)는 입력된 컴포넌트에 관한 속성, 이벤트가 설정되고, 해당 컨텐츠가 매핑되면 해당 정보를 변환부(240)로 전달한다.
The processor 230 sets an attribute and an event regarding the input component, and transmits the corresponding information to the converter 240 when the corresponding content is mapped.

변환부(240)는 처리부(230)에 의해 웹페이지의 구성으로 설정된 컴포넌트를 모바일 단말의 종류에 따라 자동으로 변환할 수 있도록 필요한 프로그램으로 변환한다.The conversion unit 240 converts the components set by the processing unit 230 to the configuration of the web page into a necessary program so as to automatically convert according to the type of the mobile terminal.

구체적으로, 변환부(240)는 컴포넌트의 크기, 위치, 색상 및 웹페이지의 레이아웃 정보 등과 같은 속성에 관한 정보는 CSS 로 변환하고, 컴포넌트의 컨텐츠 정보는 HTML TAG로 변환하고, 컴포넌트의 이벤트 정보는 JAVA Script로 변환할 수 있다. In detail, the conversion unit 240 converts information about attributes such as the size, position, color, and layout information of the webpage into CSS, converts content information of the component into HTML TAG, and event information of the component. Can be converted to JAVA Script.

변환부(240)는 모바일 웹페이지를 구성함에 있어서 각 컴포넌트에 관한 정보를 각 모바일 단말의 종류에 따라 최적화를 위한 정보로 변환하기 위해 필요한 프로그램 언어로 변환하는 역할을 수행한다. The converting unit 240 converts information about each component into a program language necessary for converting the information about each component into information for optimization according to the type of each mobile terminal.

전송부(250)는 변환부에 의해 변환된 웹페이지 정보를 모바일 단말의 종류에 따라 각각 변환할 수 있도록 모바일 웹페이지 자동 생성 시스템에 전송한다.  The transmission unit 250 transmits the web page information converted by the conversion unit to the mobile web page automatic generation system so as to convert the web page information according to the type of the mobile terminal.

다만, 필요한 경우 전송부(250)를 통해 전송하는 것과 별도로 저장할 수 있다.
However, if necessary, it may be stored separately from the transmission through the transmitter 250.

도 3 은 본 발명에 의한 크로스 플랫폼 모바일 소스를 생성하는 방법을 나타내는 도면이다. 3 is a diagram illustrating a method for generating a cross platform mobile source according to the present invention.

도시된 바와 같이, 크로스 플랫폼 모바일 소스를 생성하는 방법은 다음과 같은 순서로 구성된다. As shown, the method for generating a cross-platform mobile source is configured in the following order.

먼저, 화면의 일부 영역에 적어도 하나 이상의 컴포넌트를 출력하고, 상기 화면의 또다른 일부 영역에 구성하고자 하는 웹페이지 화면을 출력한다.(S310)First, at least one component is output to a part of a screen, and a web page screen to be configured is output to another part of the screen (S310).

크로스 플랫폼 모바일 소스의 생성은 기본적으로 화면에 출력되는 컴포넌트 이미지를 웹페이지 화면으로 출력되는 영역으로 이동하여 별도의 프로그램 언어에 의한 작업을 수행하지 않고 웹페이지를 구성할 수 있도록 하나의 화면에 별도의 영역에 컴포넌트와 웹페이지에 관한 화면을 각각 출력한다. The creation of the cross-platform mobile source basically moves the component image displayed on the screen to the area displayed on the web page screen so that the web page can be composed without performing work by a separate program language. Display screens about components and web pages in the area.

화면이 출력되면, 출력된 컴포넌트를 선택하여 드래그앤드롭에 의해 상기 웹페이지 화면의 특정 위치로 이동하여 컴포넌트를 입력한다.(S320)When the screen is output, the output component is selected and moved to a specific position of the web page screen by drag and drop to input the component (S320).

웹페이지의 특정 화면에 컴포넌트가 입력되면, 입력된 컴포넌트에 관한 속성 및 이벤트 정보를 설정하고, 컴포넌트에 대응되는 컨텐츠 정보를 매핑한다.(S330) When a component is input to a specific screen of a web page, property and event information about the input component is set and content information corresponding to the component is mapped (S330).

웹페이지에 하나의 컴포넌트에 관한 구성이 완료되면, 추가 컴포넌트에 관한 입력여부를 판단하고(S340), 추가 컴포넌트의 입력이 필요한 경우에는 다시 드래그앤드롭에 의해 컴포넌트를 입력하는 과정을 반복한다. When the configuration of one component on the web page is completed, it is determined whether the input on the additional component (S340), and if the input of the additional component is required, the process of inputting the component by drag and drop again.

반면, 추가 컴포넌트의 입력이 필요없는 경우에는 새롭게 구성된 웹페이지 정보를 모바일 웹페이지로 자동 생성할 수 있는 프로그램 언어로 변환한다.(S350) On the other hand, when the input of the additional component is not necessary, the newly configured webpage information is converted into a program language that can be automatically generated as a mobile webpage (S350).

그리고, 변환된 웹페이지 정보를 저장 또는 전송하여(S360),작업을 완료한다.
Then, the converted webpage information is stored or transmitted (S360) to complete the operation.

도 4 는 본 발명에 의해 생성된 크로스 플랫폼 모바일 소스를 이용해 모바일 웹페이지를 자동으로 생성하는 시스템을 나타내는 도면이다. 4 is a diagram illustrating a system for automatically generating mobile web pages using a cross platform mobile source generated by the present invention.

도시된 바와 같이, 모바일 웹페이지 자동 생성 시스템은 디자인 툴(20)을 이용해 생성된 크로스 플랫폼 모바일 소스를 저장하는 CPMS DB(Cross Platform Mobile Source DB)(310), 각각의 모바일 단말을 통해 최적의 웹페이지가 제공될 수 있도록 각 모바일 단말의 OS 등에 관한 최적의 정보를 관리하는 LIB DB(320), 모바일 단말의 웹페이지 접속 요청에 대해 해당 모바일 단말의 Device 정보를 분석하는 모바일 디바이스 분석부(330), 분석된 모바일 디바이스 정보를 이용해 LIB DB(320) 및 CPMS DB(310)를 조합하는 조합부(340) 및 상기 조합된 정보를 기초로 접속 요청된 모바일 웹페이지를 생성하는 모바일 웹페이지 생성부(350)를 포함한다.
As shown, the mobile web page automatic generation system is a Cross Platform Mobile Source DB (CPMS DB) 310 that stores a cross-platform mobile source generated using the design tool 20, the optimum web through each mobile terminal LIB DB 320 for managing optimal information about the OS of each mobile terminal so that a page can be provided, and a mobile device analyzer 330 analyzing device information of the mobile terminal in response to a web page access request of the mobile terminal. A combination unit 340 for combining the LIB DB 320 and the CPMS DB 310 using the analyzed mobile device information, and a mobile web page generation unit for generating a mobile web page requested to be accessed based on the combined information ( 350).

구체적으로, 모바일 웹페이지 자동 생성 시스템은 모바일 디바이스에 따라 최적의 웹페이지를 생성할 수 있도록 크로스 플랫폼 모바일 소스를 저장하는 CPMS DB(310) 및 존재하는 모바일 디바이스에 최적의 웹페이지를 생성할 수 있도록 각 모바일 단말에 관한 최적의 상태 정보를 저장하는 LIB DB(320)를 포함한다. In detail, the mobile webpage automatic generation system may generate a CPMS DB 310 that stores a cross-platform mobile source so as to generate an optimal webpage according to a mobile device, and an optimal webpage on an existing mobile device. It includes a LIB DB 320 for storing the optimal status information for each mobile terminal.

CPMS DB(310)는 모바일 웹페이지 자동 생성 시스템을 통해 모바일 웹페이지를 제공하고자 하는 웹페이지에 관한 정보를 저장한다. The CPMS DB 310 stores information about a web page to be provided through the mobile web page automatic generation system.

CPMS DB(310)에 저장된 각각의 웹페이지는 도 2 에 도시된 크로스 플랫폼 모바일 소스 생성 시스템을 통해 구성된 웹페이지 정보를 저장한다. Each web page stored in the CPMS DB 310 stores web page information configured through the cross-platform mobile source generation system shown in FIG. 2.

구체적으로, 디자인 툴에 의해 작성되어, 각 컴포넌트가 필요한 프로그램 언어로 변환되어 저장된다. 즉, 각각의 모바일 웹페이지를 구성하는 컴포넌트는 크기, 위치, 색상 등과 같은 속성에 관한 정보는 CSS 로 저장되고, 컴포넌트의 컨텐츠 정보는 HTML TAG로 저장하고, 컴포넌트의 이벤트 정보는 JAVA Script로 저장될 수 있다. 또한, 필요한 경우에 다양한 방법으로 웹페이지에 관한 컴포넌트 정보 등을 저장할 수 있다. Specifically, it is created by the design tool, and each component is converted into a required programming language and stored. That is, the components constituting each mobile web page are stored information such as size, position, color, etc. as CSS, the content information of the component is stored as HTML TAG, and the event information of the component is stored as JAVA Script. Can be. In addition, when necessary, component information about a web page may be stored in various ways.

LIB DB(320)는 각각의 모바일 단말기에 관한 정보와 각 모바일 단말기를 통해 최적의 모바일 웹페이지를 제공할 수 있는 상태 정보를 저장한다. The LIB DB 320 stores information about each mobile terminal and state information for providing an optimal mobile web page through each mobile terminal.

구체적으로, 먼저, 각 모바일 단말의 OS(Operating System, 운영체계)에 대해 최상의 웹페이지를 제공하기 위한 CSS, Java Script, Controll API 및 Device API에 관한 각각의 정보를 저장할 수 있다. Specifically, first, the respective information about CSS, Java Script, Controll API and Device API for providing the best web page for the operating system (OS) of each mobile terminal can be stored.

예를 들어, 모바일 단말의 OS로 I-Phone, Android, Rim 등이 존재할 수 있고, 각각의 OS에 대해 최상의 웹페이지를 제공할 수 있는 상기 상태 정보를 테이블로 저장할 수 있다. For example, I-Phone, Android, Rim, etc. may exist as the OS of the mobile terminal, and the state information capable of providing the best web page for each OS may be stored in a table.

즉, OS의 종류에 따라 동일한 웹페이지를 제공하는 경우에도 웹페이지를 프로그램 언어로 표현하는 방법에 차이가 있는 것은 물론, 모바일 단말이 제공하는 서비스에 있어서도 차이가 발생할 수 있으므로 각 모바일 단말에 따라 최상의 상태정보를 테이블로 관리할 수 있다. In other words, even when the same web page is provided according to the type of OS, there is a difference in how the web page is expressed in a programming language, and a difference may also occur in the services provided by the mobile terminal. Status information can be managed in a table.

모바일 단말의 OS는 현재 존재하는 모바일 단말의 운영체계로 이용되고 있는 모든 OS에 관한 정보를 저장하는 것이 바람직하다.
The OS of the mobile terminal preferably stores information about all OSs that are currently used as the operating system of the mobile terminal.

모바일 디바이스 분석부(330)는 모바일 단말기(50)가 웹페이지의 접속을 요청하면 해당 접속을 요청한 모바일 단말기의 단말기 정보를 분석한다. When the mobile terminal 50 requests access to a web page, the mobile device analyzer 330 analyzes terminal information of the mobile terminal that requested the access.

단말기 정보는 모바일 단말기의 구체적인 스펙 정보를 포함하는 것으로, 단말기의 운영체계(OS), 웹브라우저 정보, 장착된 카메라, GPS, 센서장치 등에 관한 장치 정보를 포함하여 모바일 단말의 구체적인 정보를 모두 포함한다.
The terminal information includes specific specification information of the mobile terminal, and includes all of the specific information of the mobile terminal, including device information on the operating system (OS), web browser information, mounted camera, GPS, sensor device, and the like of the terminal. .

조합부(340)는 모바일 디바이스 분석부(340)를 통해 분석된 단말기 정보를 이용하여 LIB DB(320)로부터 해당 단말기의 최상의 상태 정보를 독출하고, 접속 요청된 웹페이지의 크로스 플랫폼 모바일 소스 정보를 CPMS DB(310)에서 검색하여 조합한다. The combination unit 340 reads the best state information of the corresponding terminal from the LIB DB 320 by using the terminal information analyzed by the mobile device analyzer 340, and provides the cross-platform mobile source information of the web page requested to be accessed. CPMS DB 310 retrieves and combines.

즉, 조합부(340)는 접속 요청한 모바일 단말기의 단말기 정보에 대응하는 CSS, Java Script, Controll API 및 Device API에 관한 각각의 정보를 독출한다. 이와 같이, 웹페이지를 구성하는 모든 컴포넌트의 속성, 이벤트 및 컨텐츠 등을 표현하는 방법이 모바일 단말기의 단말기 정보에 따라 차이가 발생하므로 최적의 모바일 웹페이지를 제공하기 위해 웹페이지를 구성하는 모든 컴포넌트에 관한 정보를 각 모바일 단말기의 단말기 정보에 따라 조정하는 것이 필요하다. That is, the combination unit 340 reads out each piece of information about CSS, Java Script, Controll API, and Device API corresponding to the terminal information of the mobile terminal that requested the connection. As such, the method of expressing the properties, events, and contents of all the components constituting the webpage may vary depending on the terminal information of the mobile terminal, so that all components constituting the webpage may be provided to provide an optimal mobile webpage. It is necessary to adjust the information related to the terminal information of each mobile terminal.

또한, 조합부(340)는 접속 요청된 홈페이지에 대해 모바일 단말기의 단말기 정보에 따라 각 컴포넌트 정보를 포함하는 웹페이지 정보를 쉽게 변환할 수 있도록 저장된 크로스 플래폼 모바일 소스 정보를 CPMS DB(310)로부터 검색하여, 단말기 정보에 관한 최적의 상태 정보를 웹페이지 정보와 조합한다. In addition, the combination unit 340 retrieves the stored cross-platform mobile source information from the CPMS DB 310 so that the webpage information including each component information can be easily converted according to the terminal information of the mobile terminal for the requested homepage. The optimum state information regarding the terminal information is combined with the web page information.

한편, 조합부(340)는 백오피스 접속기능을 수행하는 적어도 하나 이상의 아답터(Adapter)를 구비할 수 있다. On the other hand, the combination unit 340 may be provided with at least one adapter (Adapter) to perform a back office connection function.

따라서, 조합부(340)는 접속 요청된 모바일 단말기의 단말기 정보에 따라 필요한 아답터(Adapter)를 선택하고, 아답터(Adapter)는 백오피스 접속기능과 함께 크로스 플랫폼 모바일 소스 정보를 선택하여 추출하는 기능을 수행할 수 있다.
Therefore, the combination unit 340 selects an adapter (Adapter) required according to the terminal information of the mobile terminal requested to be connected, and the adapter (Adapter) has a function of selecting and extracting cross-platform mobile source information together with a back office connection function. Can be done.

모바일 웹페이지 생성부(350)는 조합부(340)에 의해 단말기 정보에 관한 최적의 상태 정보와 조합된 접속 요청된 웹페이지 정보를 변환하여 최종 웹페이지 정보를 생성하고, 생성된 웹페이지 정보를 접속 요청한 모바일 단말(50)로 전송한다. The mobile webpage generation unit 350 converts the connection requested webpage information combined with the optimal state information regarding the terminal information by the combination unit 340 to generate final webpage information, and generates the generated webpage information. The mobile terminal 50 transmits a request for connection.

이상에서 설명한 본 발명은, 본 발명이 속하는 기술 분야에서 통상의 지식을 가진 자에게 있어 본 발명의 기술적 사상을 벗어나지 않는 범위 내에서 여러 가지 치환, 변형 및 변경이 가능하므로 전술한 실시 예 및 첨부된 도면에 의해 한정되는 것이 아니다.
The present invention described above is capable of various substitutions, modifications, and changes without departing from the technical spirit of the present invention for those skilled in the art to which the present invention pertains. It is not limited by the drawings.

Claims (9)

화면의 일부 영역에 출력된 컴포넌트를 선택하여 드래그앤드롭에 의해 웹페이지 화면의 특정 위치로 상기 컴포넌트를 입력하는 입력부;
상기 출력된 컴포넌트에 관한 정보를 저장하는 저장부;
상기 저장부에 저장된 컴포넌트에 관한 정보를 이용해 상기 입력된 컴포넌트에 관한 속성, 이벤트 정보를 설정하고, 상기 컴포넌트에 컨텐츠 정보를 매핑하는 처리부; 및
상기 처리부에 의한 적어도 하나 이상의 컴포넌트로 구성된 웹페이지 정보를 모바일 웹페이지로 자동 생성할 수 있는 프로그램 언어로 변환하는 변환부를 포함하고,
상기 변환부는 상기 처리부에 의해 상기 컴포넌트에 설정된 속성에 관한 정보는 CSS로 변환하고, 상기 컴포넌트의 이벤트 정보는 Java Script로 변환하고, 상기 컴포넌트의 컨텐츠 정보는 HTML TAG로 변환하는 것을 특징으로 하는 모바일 웹페이지를 효율적으로 개발하기 위한 크로스 플랫폼 모바일 소스 생성 시스템.
An input unit which selects a component output on a part of a screen and inputs the component to a specific position of a web page screen by dragging and dropping;
A storage unit which stores information about the output component;
A processor configured to set attributes and event information about the input component by using information about the component stored in the storage and to map content information to the component; And
And a converting unit converting web page information composed of at least one component by the processing unit into a program language capable of automatically generating a mobile web page.
The converting unit converts the information about the property set in the component by the processing unit into CSS, converts the event information of the component into Java Script, and converts the content information of the component into an HTML TAG. Cross-platform mobile source generation system for developing pages efficiently.
제 1 항에 있어서, 상기 저장부는
상기 컴포넌트에 대응되는 컨텐츠 정보를 저장하는 컨텐츠 저장부; 및
상기 컴포넌트의 속성과 이벤트에 관한 정보를 저장하는 디자인 리소스 저장부를 포함하는 것을 특징으로 하는 모바일 웹페이지를 효율적으로 개발하기 위한 크로스 플랫폼 모바일 소스 생성 시스템.
The method of claim 1, wherein the storage unit
A content storage unit storing content information corresponding to the component; And
Cross-platform mobile source generation system for efficiently developing a mobile web page, characterized in that it comprises a design resource storage for storing information about the properties and events of the component.
제 2 항에 있어서, 상기 입력부는
화면의 일부 영역에 이미지로 출력되는 컴포넌트를 드래그 앤 드롭에 의해 웹페이지 화면의 특정 위치에 입력하고,
상기 컴포넌트에 관한 속성 및 이벤트 정보는 상기 컴포넌트가 입력되면 상기 컴포넌트에 관한 속성 및 이벤트 정보를 출력하여 선택되는 정보를 입력하는 것을 특징으로 하는 모바일 웹페이지를 효율적으로 개발하기 위한 크로스 플랫폼 모바일 소스 생성 시스템.
The method of claim 2, wherein the input unit
Drag and drop a component that is output as an image on a part of the screen in a specific position on the web page screen.
The cross-platform mobile source generation system for efficiently developing a mobile web page, characterized in that the property and event information about the component is inputted by outputting the property and event information about the component when the component is input. .
제 3 항에 있어서, 상기 처리부는
상기 입력부를 통해 입력된 컴포넌트의 속성을 설정하는 제 1 설정부;
상기 입력된 컴포넌트의 이벤트 정보를 설정하는 제 2 설정부; 및
상기 입력된 컴포넌트의 컨텐츠 정보를 상기 컨텐츠 저장부로부터 검색하여 매핑하는 매핑부를 포함하는 것을 특징으로 하는 모바일 웹페이지를 효율적으로 개발하기 위한 크로스 플랫폼 모바일 소스 생성 시스템.
The method of claim 3, wherein the processing unit
A first setting unit configured to set a property of a component input through the input unit;
A second setting unit configured to set event information of the input component; And
Cross platform mobile source generation system for efficiently developing a mobile web page, characterized in that it comprises a mapping unit for retrieving and mapping the content information of the input component from the content storage unit.
삭제delete 화면의 일부 영역에 적어도 하나 이상의 컴포넌트를 출력하고, 상기 화면의 또다른 일부 영역에 구성하고자 하는 웹페이지 화면을 출력하는 1 단계;
상기 출력된 컴포넌트를 선택하여 드래그앤드롭에 의해 상기 웹페이지 화면의 특정 위치로 이동하여 상기 컴포넌트를 입력하는 2 단계;
상기 입력된 컴포넌트에 관한 속성 및 이벤트 정보를 설정하고, 상기 컴포넌트에 대응되는 컨텐츠 정보를 매핑하는 3 단계;
상기 컴포넌트에 설정된 속성에 관한 웹페이지 정보는 CSS로 변환하고, 상기 컴포넌트의 이벤트 정보에 관한 웹페이지 정보는 Java Script로 변환하고, 상기 컴포넌트의 컨텐츠 정보에 관한 웹페이지 정보는 HTML TAG로 변환하는 4 단계; 및
상기 변환된 웹페이지 정보를 저장 또는 전송하는 5 단계를 포함하는 모바일 웹페이지를 효율적으로 개발하기 위한 크로스 플랫폼 모바일 소스 생성방법.
Outputting at least one component to a partial region of a screen and outputting a web page screen to be configured on another partial region of the screen;
Selecting the output component, moving to a specific position of the web page screen by dragging and dropping, and inputting the component;
Setting property and event information about the input component and mapping content information corresponding to the component;
4 to convert web page information on the property set in the component to CSS, web page information on the event information of the component to Java Script, and web page information on the content information of the component to HTML TAG. step; And
Cross platform mobile source generation method for efficiently developing a mobile web page comprising the five steps of storing or transmitting the converted web page information.
제 6 항에 있어서, 상기 3 단계는
상기 컴포넌트에 관한 속성 및 이벤트 정보는 상기 컴포넌트가 입력되면 상기 컴포넌트에 관한 적어도 하나 이상의 속성 및 이벤트 정보를 출력하여 선택되는 정보로 설정되는 것을 특징으로 하는 모바일 웹페이지를 효율적으로 개발하기 위한 크로스 플랫폼 모바일 소스 생성방법.
The method of claim 6, wherein the three steps
The cross-platform mobile for efficiently developing a mobile web page, wherein the property and event information about the component is set to information selected by outputting at least one property and event information about the component when the component is input. How to create a source.
제 7 항에 있어서, 상기 3 단계는
상기 입력부를 통해 입력된 컴포넌트의 속성을 설정하는 단계;
상기 입력된 컴포넌트의 이벤트 정보를 설정하는 단계; 및
상기 입력된 컴포넌트의 컨텐츠 정보를 컨텐츠 저장부로부터 검색하여 매핑하는 단계를 포함하는 것을 특징으로 하는 모바일 웹페이지를 효율적으로 개발하기 위한 크로스 플랫폼 모바일 소스 생성방법.
The method of claim 7, wherein the three steps
Setting a property of a component input through the input unit;
Setting event information of the input component; And
Cross-platform mobile source generation method for efficiently developing a mobile web page comprising the step of mapping the content information of the input component from the content storage unit.
삭제delete
KR1020100103919A 2010-10-25 2010-10-25 Cross platform solution and system for genterating cross platform mobile source for developing efficiently mobile web page KR101170263B1 (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
KR1020100103919A KR101170263B1 (en) 2010-10-25 2010-10-25 Cross platform solution and system for genterating cross platform mobile source for developing efficiently mobile web page

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR1020100103919A KR101170263B1 (en) 2010-10-25 2010-10-25 Cross platform solution and system for genterating cross platform mobile source for developing efficiently mobile web page

Publications (2)

Publication Number Publication Date
KR20120042291A KR20120042291A (en) 2012-05-03
KR101170263B1 true KR101170263B1 (en) 2012-08-03

Family

ID=46263084

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020100103919A KR101170263B1 (en) 2010-10-25 2010-10-25 Cross platform solution and system for genterating cross platform mobile source for developing efficiently mobile web page

Country Status (1)

Country Link
KR (1) KR101170263B1 (en)

Families Citing this family (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR101409528B1 (en) * 2013-03-26 2014-06-19 한양대학교 에리카산학협력단 Method and apparatus of mda-based authoring application for smart cross-platform
KR101951719B1 (en) * 2018-07-26 2019-02-25 (주)비아이매트릭스 A web reporting design system with programming event handling by using graphic interface
WO2022203387A1 (en) * 2021-03-23 2022-09-29 (주)인스웨이브시스템즈 Integrated development system and method, for user interface platform, having source compiler
WO2022203381A1 (en) * 2021-03-23 2022-09-29 (주)인스웨이브시스템즈 Integrated user interface platform development system and method of single-page application type

Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR100727066B1 (en) * 2005-07-01 2007-06-12 주식회사 케이티프리텔 Method for providing mobile webpage by employing to dynamic template

Patent Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR100727066B1 (en) * 2005-07-01 2007-06-12 주식회사 케이티프리텔 Method for providing mobile webpage by employing to dynamic template

Also Published As

Publication number Publication date
KR20120042291A (en) 2012-05-03

Similar Documents

Publication Publication Date Title
US8370750B2 (en) Technology for generating service program
EP3416054B1 (en) Method and device for page display, and storage medium
CN1684034A (en) Application of data-binding mechanism to perform command binding
JP2006236323A (en) Application providing system, server, client and application providing method
JP2022520263A (en) Mini-program data binding methods, appliances, devices and computer programs
JP7246502B2 (en) Mini-program creation method, device, terminal and program
CN112116690B (en) Video special effect generation method, device and terminal
US11663694B2 (en) Zoom-adaptive data granularity to achieve a flexible high-performance interface for a geospatial mapping system
US8140999B2 (en) Display process device and display process method
US11551577B1 (en) Change data driven tactile response
KR101170263B1 (en) Cross platform solution and system for genterating cross platform mobile source for developing efficiently mobile web page
US9110570B1 (en) Reversed links from graphical diagram representation
US20140089825A1 (en) Apparatus and method for writing mash-up using mash-up block user interface
CN111191176B (en) Website content updating method, device, terminal and storage medium
KR20170016362A (en) Converting presentation metadata to a browser-renderable format during compilation
CN105359104A (en) Synchronization points for state information
KR20140042537A (en) Apparatus for writing mash-up using templete and method thereof
CN109753612B (en) Questionnaire display control method and device, storage medium and electronic equipment
KR20120042296A (en) System and method for rendering automatically mobile web page generated by cross platform solution
CN113467663B (en) Interface configuration method, device, computer equipment and medium
CN102870111A (en) Method and apparatus for determining an analysis chronicle
CN112100553B (en) Webpage configuration method and device, electronic equipment and storage medium
US20180004802A1 (en) User interface for searching referenced information
RU2634221C2 (en) Method and device for drawing presentation of electronic document on screen
KR102062069B1 (en) Apparatus for mash-up service generation based on voice command and method thereof

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
LAPS Lapse due to unpaid annual fee