KR20120042291A - 모바일 웹페이지를 효율적으로 개발하기 위한 크로스 플랫폼 솔루션 및 크로스 플랫폼 모바일 소스 생성 시스템 - Google Patents

모바일 웹페이지를 효율적으로 개발하기 위한 크로스 플랫폼 솔루션 및 크로스 플랫폼 모바일 소스 생성 시스템 Download PDF

Info

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

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

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Software Systems (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

본 발명은 모바일 웹페이지를 효율적으로 개발하기 위한 크로스 플랫폼 솔루션에 관한 것으로, 더욱 상세하게는 모바일 단말의 운영체계에 관계없이 자동으로 모바일 웹페이지를 생성할 수 있도록 크로스 플랫폼 모바일 소스를 생성하는 방법에 관한 것이다.

Description

모바일 웹페이지를 효율적으로 개발하기 위한 크로스 플랫폼 솔루션 및 크로스 플랫폼 모바일 소스 생성 시스템{CROSS PLATFORM SOLUTION AND SYSTEM FOR GENTERATING CROSS PLATFORM MOBILE SOURCE FOR DEVELOPING EFFICIENTLY MOBILE WEB PAGE}
본 발명은 모바일 웹페이지를 효율적으로 개발하기 위한 크로스 플랫폼 솔루션에 관한 것으로, 더욱 상세하게는 모바일 단말의 운영체계에 관계없이 자동으로 모바일 웹페이지를 생성할 수 있도록 크로스 플랫폼 모바일 소스를 생성하는 방법에 관한 것이다.
최근 전자 및 통신의 비약적인 발전에 따라 컴퓨터 및 인터넷 기술이 급속하게 진화함과 동시에 휴대폰이라는 휴대용 전화기가 단순한 전화의 기능을 넘어 다양한 기능을 구비하여 휴대용 컴퓨터로 진화를 계속하고 있다.
특히, 스마트 폰은 휴대전화의 기능은 물론 인터넷 통신과 정보 검색 등 컴퓨터 지원 기능을 추가한 지능형 모바일 단말기로 사용자가 원하는 애플리케이션을 설치하여 다양한 서비스를 이용할 수 있다.
스마트 폰이 처음 소개된 이후부터 계속하여 스마트 폰에 대한 새로운 기술의 개발이 급속하게 이루어지는 것은 물론 그 보급 속도가 기존의 휴대 단말과는 비교할 수 없을 만큼 빠르다.
이와 같이, 스마트 폰은 이동 중에 실시간으로 기존 컴퓨터가 가지는 기능을 이용할 수 있는 것은 물론 기존 컴퓨터가 이동성이 없다는 한계로 제공할 수 없었던 다양한 서비스까지 제공할 수 있어, 스마트 폰에 적용될 수 있는 다양한 서비스들이 개발되고 있다.
스마트 폰과 같은 모바일 단말에 적합한 새로운 서비스를 개발하는 것과 별도로 기존 컴퓨터를 통해 제공하는 서비스를 이동성이 있는 모바일 단말에서도 실시간으로 이용할 수 있도록 하는 새로운 기술들이 다양하게 개발되고 있다.
특히, 기존 컴퓨터를 통해 제공되는 웹페이지를 모바일 단말에서도 자유롭게 이용할 수 있도록 모바일용 웹페이지에 대한 개발이 활발하게 진행되고 있다.
하지만, 모바일 단말의 경우에도 기존의 컴퓨터와 같이 모바일 단말의 하드웨어와 소프트웨어를 제어하여 사용자가 모바일 단말을 사용할 수 있도록 하는 프로그램인 운영체계(OS, operating system)가 기본적으로 탑제함은 물론 카메라, GPS 등의 다양한 기능을 추가로 구비한다.
다만, 최근에 출시되고 있는 모바일 단말의 경우에 다양한 운영체계가 이용되고 있다. 예를 들어, 애플에서 개발된 IOS, 구글의 안드로이드, 노키아의 심비안 그리고 림(RIM, Research In Motion) 운영체계, 삼성의 바다 운영체계 등 다양한 운영체계가 있다.
따라서, 기존의 웹페이지를 다양한 모바일에서 이용할 수 있도록 하기 위해서는 각각의 운영체계 및 각 모바일 단말의 스펙에 맞는 모바일 웹페이지를 별도로 개발해야 하는 문제가 있다.
상기와 같은 문제를 해결하기 위해, 본 발명은 운영체계가 다른 모바일 단말마다 별도의 모바일 웹페이지를 개발하는 대신에 각 모바일 단말에 적합한 웹페이지를 자동으로 재생할 수 있는 크로스 플랫폼 모바일 소스를 생성하는 방법을 제공하는 것을 목적으로 한다.
또한, 본 발명은 크로스 플랫폼 모바일 소스를 자동생성하기 위해 디자인 툴(Desing Tool)에 의해 이미지로 디스플레이된 컴포넌트(component)를 드래그앤드롭(Drag & Drop)의 방식으로 레이아웃(Lay out)하는 방식을 이용하는 모바일 웹페이지를 효율적으로 개발하기 위한 크로스 플랫폼 솔루션을 제공한다.
상기와 같은 목적을 달성하기 위해, 본 발명의 제 1 실시예에 의한 크로스 플랫폼 모바일 소스 생성 시스템은 화면의 일부 영역에 출력된 컴포넌트를 선택하여 드래그앤드롭에 의해 웹페이지 화면의 특정 위치로 상기 컴포넌트를 입력하는 입력부; 상기 출력된 컴포넌트에 관한 정보를 저장하는 저장부; 상기 저장부에 저장된 컴포넌트에 관한 정보를 이용해 상기 입력된 컴포넌트에 관한 속성, 이벤트 정보를 설정하고, 상기 컴포넌트에 컨텐츠 정보를 매핑하는 처리부; 및 상기 처리부에 의한 적어도 하나 이상의 컴포넌트로 구성된 웹페이지 정보를 모바일 웹페이지로 자동 생성할 수 있는 프로그램 언어로 변환하는 변환부를 포함한다.
이때, 상기 저장부는 상기 컴포넌트에 대응되는 컨텐츠 정보를 저장하는 컨텐츠 저장부; 및 상기 컴포넌트의 속성과 이벤트에 관한 정보를 저장하는 디자인 리소스 저장부를 포함한다.
한편, 상기 입력부는 화면의 일부 영역에 이미지로 출력되는 컴포넌트를 드래그 앤 드롭에 의해 웹페이지 화면의 특정 위치에 입력하고, 상기 컴포넌트에 관한 속성 및 이벤트 정보는 상기 컴포넌트가 입력되면 상기 컴포넌트에 관한 속성 및 이벤트 정보를 출력하여 선택되는 정보를 입력하는 것을 특징으로 한다.
또한, 상기 처리부는 상기 입력부를 통해 입력된 컴포넌트의 속성을 설정하는 제 1 설정부; 상기 입력된 컴포넌트의 이벤트 정보를 설정하는 제 2 설정부; 및 상기 입력된 컴포넌트의 컨텐츠 정보를 상기 컨텐츠 저장부로부터 검색하여 매핑하는 매핑부를 포함하는 것을 특징으로 한다.
그리고, 상기 변환부는 상기 처리부에 의해 상기 컴포넌트에 설정된 속성에 관한 정보는 CSS로 변환하고, 상기 컴포넌트의 이벤트 정보는 Java Script로 변환하고, 상기 컴포넌트의 컨텐츠 정보는 HTML TAG로 변환하는 것을 특징으로 한다.
상기와 같은 목적을 달성하기 위해, 본 발명의 제 2 실시예에 의한 크로스 플랫폼 모바일 소스 생성 방법은 화면의 일부 영역에 적어도 하나 이상의 컴포넌트를 출력하고, 상기 화면의 또다른 일부 영역에 구성하고자 하는 웹페이지 화면을 출력하는 1 단계; 상기 출력된 컴포넌트를 선택하여 드래그앤드롭에 의해 상기 웹페이지 화면의 특정 위치로 이동하여 상기 컴포넌트를 입력하는 2 단계; 상기 입력된 컴포넌트에 관한 속성 및 이벤트 정보를 설정하고, 상기 컴포넌트에 대응되는 컨텐츠 정보를 매핑하는 3 단계; 상기 컴포넌트로 구성된 웹페이지 정보를 모바일 웹페이지로 자동 생성할 수 있는 프로그램 언어로 변환하는 4 단계; 및 상기 변환된 웹페이지 정보를 저장 또는 전송하는 5 단계를 포함한다.
이때, 상기 3 단계는 상기 컴포넌트에 관한 속성 및 이벤트 정보는 상기 컴포넌트가 입력되면 상기 컴포넌트에 관한 적어도 하나 이상의 속성 및 이벤트 정보를 출력하여 선택되는 정보로 설정되는 것을 특징으로 하고,
또한, 상기 3 단계는 상기 입력부를 통해 입력된 컴포넌트의 속성을 설정하는 단계; 상기 입력된 컴포넌트의 이벤트 정보를 설정하는 단계; 및 상기 입력된 컴포넌트의 컨텐츠 정보를 컨텐츠 저장부로부터 검색하여 매핑하는 단계를 포함하는 것을 특징으로 한다.
한편, 상기 변환하는 단계는 상기 컴포넌트에 설정된 속성에 관한 정보는 CSS로 변환하고, 상기 컴포넌트의 이벤트 정보는 Java Script로 변환하고, 상기 컴포넌트의 컨텐츠 정보는 HTML TAG로 변환하는 것을 특징으로 한다.
본 발명에 의한, 크로스 플랫폼 모바일 소스를 생성하는 방법은 모바일 웹페이지를 개발함에 있어서 개발자들이 모든 모바일 단말에서 재생하고자 하는 웹페이지에 관한 크로스 플랫폼 모바일 소스를 생성할 수 있도록 하여 운영체계가 다른 모바일 단말 각각에 대한 웹페이지를 별도로 개발하는 번거로움을 해소할 수 있는 효과가 있다.
도 1 은 본 발명에 의한 크로스 플랫폼 모바일 소스를 생성하는 개념을 나타내는 도면이다.
도 2 는 본 발명에 의한 크로스 플랫폼 모바일 소스를 생성하는 디자인 툴의 구성을 나타내는 도면이다.
도 3 은 본 발명에 의한 크로스 플랫폼 모바일 소스를 생성하는 방법을 나타내는 도면이다.
도 4 는 본 발명에 의해 생성된 크로스 플랫폼 모바일 소스를 이용해 모바일 웹페이지를 자동으로 생성하는 시스템을 나타내는 도면이다.
이하, 본 발명의 바람직한 실시 예를 첨부한 도면을 참조하여 상세히 설명한다. 본 발명을 설명함에 있어, 관련된 공지 기능 혹은 구성에 대한 구체적인 설명이 본 발명의 요지를 불필요하게 흐릴 수 있다고 판단되는 경우 그 상세한 설명을 생략한다.
도 1 은 본 발명에 의한 크로스 플랫폼 모바일 소스를 생성하는 개념을 나타내는 도면이다.
도시된 바와 같이, 본 발명에 의한 크로스 플랫폼 모바일 소스를 생성하는 방법은 현재 존재하는 다양한 모바일 단말기(50)에 그 종류에 관계없이 모바일 웹페이지를 자동으로 재생할 수 있도록 디자인 툴(Design Tool)을 제공하여 이루어진다.
여기서, 디자인 툴(Design Tool)은 크로스 플랫폼 모바일 소스 생성 시스템을 구현하는 구체적인 구현방법의 하나로 개발자가 출력되는 이미지 등을 드래그앤드롭(Drag & Drop)의 방식으로 원하는 웹페이지를 시각적으로 구성할 수 있는 하나의 툴을 말한다.
특히, 디자인 툴(Design Tool)에 의해 생성되는 크로스 플랫폼 모바일 소스는 기존에 모바일 단말의 화면 크기에 맞게 화면 혹은 이미지 등의 크기를 단순히 최적화하는 것과는 다르다. 구체적으로, 디자인 툴(Design Tool)은 개발자가 웹페이지를 구성하는 컴포넌트(Component)를 드래그앤드롭(Drag & Drop)의 방법으로 자신이 원하는 위치에 구성하는 것은 물론 이러한 컴포넌트의 크기, 위치, 색상 등의 속성(Property), 컴포넌트의 Event 및 contents를 구성되는 웹페이지에 맞게 설정하는 것은 물론 이렇게 설정된 정보를 모바일 디바이스의 종류에 따라 변환할 수 있도록 컴포넌트 정보를 필요한 프로그램 언어로 변환하여 저장하는 기능을 수행한다.
도 1 에 도시된 바와 같이, 디자인 툴(20)에 의해 구현되는 크로스 플랫폼 모바일 소스 생성시스템은 각 컴포넌트의 속성(property), 이벤트(event) 및 컨텐츠(contents) 내용을 저장하는 데이터베이스(10)와 디자인 툴(20)을 이용해 다양한 모바일 단말기(50)를 통해 최적의 모바일 웹페이지를 제공할 수 있는 크로스 플래소폼 모바일 소스를 생성하고, 이러하게 생성된 크로스 플랫폼 모바일 소스는 모바일 웹페이지 자동 생성 시스템(30)을 통해 각각의 모바일 단말기(50)에 제공될 수 있다.
이하, 본 발명에 의한 모바일 웹페이지를 효율적으로 개발하기 위한 크로스 플랫폼 모바일 소스 생성 시스템을 구체적으로 설명한다.
도 2 는 본 발명에 의한 크로스 플랫폼 모바일 소스 생성 시스템의 구성을 나타내는 도면이다.
도시된 바와 같이, 크로스 플랫폼 모바일 소스 생성 시스템은 각 컴포넌트 관련 정보를 저장하는 저장부(10), 화면을 통해 컴포넌트 이미지를 출력하는 컴포넌트(Component) 출력부(210), 상기 컴포넌트 출력부(210)를 통해 출력된 컴포넌트 중에서 자신이 필요한 컴포넌트를 선택하여 원하는 상태로 입력하는 입력부(220), 이렇게 입력된 컴포넌트에 관한 정보를 설정하는 처리부(230), 상기 처리부(230)를 통해 설정된 컴포넌트를 모바일 웹 페이지로 변환할 수 있는 프로그램 언어로 변환하는 변환부(240) 및 상기 변환된 정보를 전송하는 전송부(250)를 포함한다.
구체적으로, 저장부(10)는 컨텐츠 저장부(Contents DB)(110) 및 디자인 리소스 저장부(Design Resource DB)(120)를 포함한다.
컨텐츠 저장부(110)는 모바일 웹페이지를 구성하는 각각의 컴포넌트에 관한 컨텐츠 내용을 저장한다.
예를 들어, 컴포넌트가 button 컴포넌트인 경우에는 button 컴포넌트에 대응되는 버튼의 기능에 관한 내용을 저장한다. 또한, input 컴포넌트인 경우에는 해당 컴포넌트는 입력하는 기능을 수행하는 내용을 저장한다.
이와 같이, 컨텐츠 저장부(110)는 디자인 툴을 통해 제공되는 모든 컴포넌트의 contents 내용을 저장하여 각 컴포넌트와 매핑되어 해당 기능을 수행할 수 있도록 한다.
디자인 리소스 저장부(Design Resource DB)(120)는 각 컴포넌트의 속성(property)과 이벤트(event)에 관한 정보를 저장한다.
각 컴포넌트의 속성(property)은 컴포넌트의 크기, 위치, 색상 등과 같은 다양한 property를 포함한다.
컴포넌트의 이벤트(event)는 해당 컴포넌트에 관해 필요한 모든 이벤트에 관한 정보를 포함한다. 예를 들어, key, tab, time 등과 관련된 다양한 이벤트 정보를 포함한다.
컴포넌트 출력부(210)는 모바일 웹페이지를 구성하기 위해 필요한 컴포넌트를 이미지로 출력한다.
컴포넌트 출력부(210)는 컴포넌트 DB(211)에 저장된 컴포넌트를 다양한 방법으로 출력할 수 있다.
예를 들어, 화면의 일부 영역에 컴포넌트의 이미지를 일정한 순서로 나열할 수 있는 것은 물론, 기능별로 유사한 컴포넌트를 화면별로 출력할 수 있다. 다만, 출력되는 컴포넌트는 새롭게 구성하고자 하는 웹페이지의 화면과 중복되지 않는 영역에 출력하는 것이 바람직하다.
즉, 개발자가 컴포넌트를 쉽게 인식하고, 출력된 컴포넌트를 드래그앤드롭(Drag & Drop)의 방법으로 새롭게 구성하고자 하는 웹페이지 화면의 특정 위치에 위치하도록 할 수 있는 경우에는 다양한 방법으로 컴포넌트를 출력할 수 있다.
입력부(220)는 웹페이지에 새롭게 구성하고자 하는 컴포넌트를 입력한다.
구체적으로, 컴포넌트 출력부(210)를 통해 출력된 컴포넌트 중에서 웹페이지에 구성하고자 하는 컴포넌트를 선택하여 출력된 웹페이지 화면의 특정 위치로 드래그앤드롭의 방법으로 컴포넌트를 입력한다.
즉, 개발자는 화면에 출력되는 컴포넌트의 이미지를 선택하여 새롭게 구성하는 웹페이지의 원하는 위치로 옮기는 작업을 통해 컴포넌트를 입력한다.
입력부(220)는 드래그앤드롭에 의해 컴포넌트 이미지를 입력하는 것과 별도로 해당 컴포넌트의 속성과 이벤트 정보를 입력한다. 속성과 이벤트 정보는 먼저 필요한 속성 및 이벤트 정보를 출력하여, 개발자가 선택하는 방법 혹은 별도의 작업으로 입력하는 방법 등 다양한 방법이 적용될 수 있다.
처리부(230)는 입력부(220)를 통해 웹페이지의 구성으로 입력되는 컴포넌트가 모바일 단말기를 통해 웹페이지로 제공되는 경우에 정상적인 기능을 수행하기 위해 컴포넌트에 관한 정보를 처리한다.
처리부(230)는 제 1 설정부(231), 제 2 설정부(232) 및 매핑부(233)를 포함한다.
구체적으로, 제 1 설정부(231)는 입력된 컴포넌트의 속성을 설정하는 기능을 수행한다.
예를 들어, 웹페이지에서 컴포넌트의 위치, 크기, 속성 등에 관한 정보를 설정한다. 위치는 드래그앤드롭의 방법에 의해 선택된 웹페이지 화면의 좌표값이 설정될 수 있고, 크기는 웹페이지 화면에서 개발자가 컴포넌트 화면의 크기를 조절하여 정해진 크기로 설정될 수 있다.
제 2 설정부(232)는 입력된 컴포넌트의 이벤트 정보를 설정하는 기능을 수행한다.
컴포넌트의 이벤트 정보는 해당 컴포넌트에 따라 디자인 리소스 DB(120)에 저장된 다양한 이벤트 정보가 설정될 수 있다.
이벤트 정보는 컴포넌트가 입력되면, 해당 컴포넌트에 관한 디자인 리소스 DB(120)에 저장된 이벤트 정보를 출력하고, 출력된 이벤트 정보 중에서 원하는 이벤트를 선택하는 방법에 따라 설정될 수 있다.
매핑부(233)는 입력된 컴포넌트와 해당 컴포넌트의 컨텐츠를 매핑하는 기능을 수행한다. 매핑부(233)에 의해 컴포넌트의 컨텐츠 내용을 통해 웹페이지에서 컴포넌트가 해당 기능을 수행할 수 있다.
처리부(230)는 입력된 컴포넌트에 관한 속성, 이벤트가 설정되고, 해당 컨텐츠가 매핑되면 해당 정보를 변환부(240)로 전달한다.
변환부(240)는 처리부(230)에 의해 웹페이지의 구성으로 설정된 컴포넌트를 모바일 단말의 종류에 따라 자동으로 변환할 수 있도록 필요한 프로그램으로 변환한다.
구체적으로, 변환부(240)는 컴포넌트의 크기, 위치, 색상 및 웹페이지의 레이아웃 정보 등과 같은 속성에 관한 정보는 CSS 로 변환하고, 컴포넌트의 컨텐츠 정보는 HTML TAG로 변환하고, 컴포넌트의 이벤트 정보는 JAVA Script로 변환할 수 있다.
변환부(240)는 모바일 웹페이지를 구성함에 있어서 각 컴포넌트에 관한 정보를 각 모바일 단말의 종류에 따라 최적화를 위한 정보로 변환하기 위해 필요한 프로그램 언어로 변환하는 역할을 수행한다.
전송부(250)는 변환부에 의해 변환된 웹페이지 정보를 모바일 단말의 종류에 따라 각각 변환할 수 있도록 모바일 웹페이지 자동 생성 시스템에 전송한다.
다만, 필요한 경우 전송부(250)를 통해 전송하는 것과 별도로 저장할 수 있다.
도 3 은 본 발명에 의한 크로스 플랫폼 모바일 소스를 생성하는 방법을 나타내는 도면이다.
도시된 바와 같이, 크로스 플랫폼 모바일 소스를 생성하는 방법은 다음과 같은 순서로 구성된다.
먼저, 화면의 일부 영역에 적어도 하나 이상의 컴포넌트를 출력하고, 상기 화면의 또다른 일부 영역에 구성하고자 하는 웹페이지 화면을 출력한다.(S310)
크로스 플랫폼 모바일 소스의 생성은 기본적으로 화면에 출력되는 컴포넌트 이미지를 웹페이지 화면으로 출력되는 영역으로 이동하여 별도의 프로그램 언어에 의한 작업을 수행하지 않고 웹페이지를 구성할 수 있도록 하나의 화면에 별도의 영역에 컴포넌트와 웹페이지에 관한 화면을 각각 출력한다.
화면이 출력되면, 출력된 컴포넌트를 선택하여 드래그앤드롭에 의해 상기 웹페이지 화면의 특정 위치로 이동하여 컴포넌트를 입력한다.(S320)
웹페이지의 특정 화면에 컴포넌트가 입력되면, 입력된 컴포넌트에 관한 속성 및 이벤트 정보를 설정하고, 컴포넌트에 대응되는 컨텐츠 정보를 매핑한다.(S330)
웹페이지에 하나의 컴포넌트에 관한 구성이 완료되면, 추가 컴포넌트에 관한 입력여부를 판단하고(S340), 추가 컴포넌트의 입력이 필요한 경우에는 다시 드래그앤드롭에 의해 컴포넌트를 입력하는 과정을 반복한다.
반면, 추가 컴포넌트의 입력이 필요없는 경우에는 새롭게 구성된 웹페이지 정보를 모바일 웹페이지로 자동 생성할 수 있는 프로그램 언어로 변환한다.(S350)
그리고, 변환된 웹페이지 정보를 저장 또는 전송하여(S360),작업을 완료한다.
도 4 는 본 발명에 의해 생성된 크로스 플랫폼 모바일 소스를 이용해 모바일 웹페이지를 자동으로 생성하는 시스템을 나타내는 도면이다.
도시된 바와 같이, 모바일 웹페이지 자동 생성 시스템은 디자인 툴(20)을 이용해 생성된 크로스 플랫폼 모바일 소스를 저장하는 CPMS DB(Cross Platform Mobile Source DB)(310), 각각의 모바일 단말을 통해 최적의 웹페이지가 제공될 수 있도록 각 모바일 단말의 OS 등에 관한 최적의 정보를 관리하는 LIB DB(320), 모바일 단말의 웹페이지 접속 요청에 대해 해당 모바일 단말의 Device 정보를 분석하는 모바일 디바이스 분석부(330), 분석된 모바일 디바이스 정보를 이용해 LIB DB(320) 및 CPMS DB(310)를 조합하는 조합부(340) 및 상기 조합된 정보를 기초로 접속 요청된 모바일 웹페이지를 생성하는 모바일 웹페이지 생성부(350)를 포함한다.
구체적으로, 모바일 웹페이지 자동 생성 시스템은 모바일 디바이스에 따라 최적의 웹페이지를 생성할 수 있도록 크로스 플랫폼 모바일 소스를 저장하는 CPMS DB(310) 및 존재하는 모바일 디바이스에 최적의 웹페이지를 생성할 수 있도록 각 모바일 단말에 관한 최적의 상태 정보를 저장하는 LIB DB(320)를 포함한다.
CPMS DB(310)는 모바일 웹페이지 자동 생성 시스템을 통해 모바일 웹페이지를 제공하고자 하는 웹페이지에 관한 정보를 저장한다.
CPMS DB(310)에 저장된 각각의 웹페이지는 도 2 에 도시된 크로스 플랫폼 모바일 소스 생성 시스템을 통해 구성된 웹페이지 정보를 저장한다.
구체적으로, 디자인 툴에 의해 작성되어, 각 컴포넌트가 필요한 프로그램 언어로 변환되어 저장된다. 즉, 각각의 모바일 웹페이지를 구성하는 컴포넌트는 크기, 위치, 색상 등과 같은 속성에 관한 정보는 CSS 로 저장되고, 컴포넌트의 컨텐츠 정보는 HTML TAG로 저장하고, 컴포넌트의 이벤트 정보는 JAVA Script로 저장될 수 있다. 또한, 필요한 경우에 다양한 방법으로 웹페이지에 관한 컴포넌트 정보 등을 저장할 수 있다.
LIB DB(320)는 각각의 모바일 단말기에 관한 정보와 각 모바일 단말기를 통해 최적의 모바일 웹페이지를 제공할 수 있는 상태 정보를 저장한다.
구체적으로, 먼저, 각 모바일 단말의 OS(Operating System, 운영체계)에 대해 최상의 웹페이지를 제공하기 위한 CSS, Java Script, Controll API 및 Device API에 관한 각각의 정보를 저장할 수 있다.
예를 들어, 모바일 단말의 OS로 I-Phone, Android, Rim 등이 존재할 수 있고, 각각의 OS에 대해 최상의 웹페이지를 제공할 수 있는 상기 상태 정보를 테이블로 저장할 수 있다.
즉, OS의 종류에 따라 동일한 웹페이지를 제공하는 경우에도 웹페이지를 프로그램 언어로 표현하는 방법에 차이가 있는 것은 물론, 모바일 단말이 제공하는 서비스에 있어서도 차이가 발생할 수 있으므로 각 모바일 단말에 따라 최상의 상태정보를 테이블로 관리할 수 있다.
모바일 단말의 OS는 현재 존재하는 모바일 단말의 운영체계로 이용되고 있는 모든 OS에 관한 정보를 저장하는 것이 바람직하다.
모바일 디바이스 분석부(330)는 모바일 단말기(50)가 웹페이지의 접속을 요청하면 해당 접속을 요청한 모바일 단말기의 단말기 정보를 분석한다.
단말기 정보는 모바일 단말기의 구체적인 스펙 정보를 포함하는 것으로, 단말기의 운영체계(OS), 웹브라우저 정보, 장착된 카메라, GPS, 센서장치 등에 관한 장치 정보를 포함하여 모바일 단말의 구체적인 정보를 모두 포함한다.
조합부(340)는 모바일 디바이스 분석부(340)를 통해 분석된 단말기 정보를 이용하여 LIB DB(320)로부터 해당 단말기의 최상의 상태 정보를 독출하고, 접속 요청된 웹페이지의 크로스 플랫폼 모바일 소스 정보를 CPMS DB(310)에서 검색하여 조합한다.
즉, 조합부(340)는 접속 요청한 모바일 단말기의 단말기 정보에 대응하는 CSS, Java Script, Controll API 및 Device API에 관한 각각의 정보를 독출한다. 이와 같이, 웹페이지를 구성하는 모든 컴포넌트의 속성, 이벤트 및 컨텐츠 등을 표현하는 방법이 모바일 단말기의 단말기 정보에 따라 차이가 발생하므로 최적의 모바일 웹페이지를 제공하기 위해 웹페이지를 구성하는 모든 컴포넌트에 관한 정보를 각 모바일 단말기의 단말기 정보에 따라 조정하는 것이 필요하다.
또한, 조합부(340)는 접속 요청된 홈페이지에 대해 모바일 단말기의 단말기 정보에 따라 각 컴포넌트 정보를 포함하는 웹페이지 정보를 쉽게 변환할 수 있도록 저장된 크로스 플래폼 모바일 소스 정보를 CPMS DB(310)로부터 검색하여, 단말기 정보에 관한 최적의 상태 정보를 웹페이지 정보와 조합한다.
한편, 조합부(340)는 백오피스 접속기능을 수행하는 적어도 하나 이상의 아답터(Adapter)를 구비할 수 있다.
따라서, 조합부(340)는 접속 요청된 모바일 단말기의 단말기 정보에 따라 필요한 아답터(Adapter)를 선택하고, 아답터(Adapter)는 백오피스 접속기능과 함께 크로스 플랫폼 모바일 소스 정보를 선택하여 추출하는 기능을 수행할 수 있다.
모바일 웹페이지 생성부(350)는 조합부(340)에 의해 단말기 정보에 관한 최적의 상태 정보와 조합된 접속 요청된 웹페이지 정보를 변환하여 최종 웹페이지 정보를 생성하고, 생성된 웹페이지 정보를 접속 요청한 모바일 단말(50)로 전송한다.
이상에서 설명한 본 발명은, 본 발명이 속하는 기술 분야에서 통상의 지식을 가진 자에게 있어 본 발명의 기술적 사상을 벗어나지 않는 범위 내에서 여러 가지 치환, 변형 및 변경이 가능하므로 전술한 실시 예 및 첨부된 도면에 의해 한정되는 것이 아니다.

Claims (9)

  1. 화면의 일부 영역에 출력된 컴포넌트를 선택하여 드래그앤드롭에 의해 웹페이지 화면의 특정 위치로 상기 컴포넌트를 입력하는 입력부;
    상기 출력된 컴포넌트에 관한 정보를 저장하는 저장부;
    상기 저장부에 저장된 컴포넌트에 관한 정보를 이용해 상기 입력된 컴포넌트에 관한 속성, 이벤트 정보를 설정하고, 상기 컴포넌트에 컨텐츠 정보를 매핑하는 처리부; 및
    상기 처리부에 의한 적어도 하나 이상의 컴포넌트로 구성된 웹페이지 정보를 모바일 웹페이지로 자동 생성할 수 있는 프로그램 언어로 변환하는 변환부를 포함하는 모바일 웹페이지를 효율적으로 개발하기 위한 크로스 플랫폼 모바일 소스 생성 시스템.
  2. 제 1 항에 있어서, 상기 저장부는
    상기 컴포넌트에 대응되는 컨텐츠 정보를 저장하는 컨텐츠 저장부; 및
    상기 컴포넌트의 속성과 이벤트에 관한 정보를 저장하는 디자인 리소스 저장부를 포함하는 것을 특징으로 하는 모바일 웹페이지를 효율적으로 개발하기 위한 크로스 플랫폼 모바일 소스 생성 시스템.
  3. 제 2 항에 있어서, 상기 입력부는
    화면의 일부 영역에 이미지로 출력되는 컴포넌트를 드래그 앤 드롭에 의해 웹페이지 화면의 특정 위치에 입력하고,
    상기 컴포넌트에 관한 속성 및 이벤트 정보는 상기 컴포넌트가 입력되면 상기 컴포넌트에 관한 속성 및 이벤트 정보를 출력하여 선택되는 정보를 입력하는 것을 특징으로 하는 모바일 웹페이지를 효율적으로 개발하기 위한 크로스 플랫폼 모바일 소스 생성 시스템.
  4. 제 3 항에 있어서, 상기 처리부는
    상기 입력부를 통해 입력된 컴포넌트의 속성을 설정하는 제 1 설정부;
    상기 입력된 컴포넌트의 이벤트 정보를 설정하는 제 2 설정부; 및
    상기 입력된 컴포넌트의 컨텐츠 정보를 상기 컨텐츠 저장부로부터 검색하여 매핑하는 매핑부를 포함하는 것을 특징으로 하는 모바일 웹페이지를 효율적으로 개발하기 위한 크로스 플랫폼 모바일 소스 생성 시스템.
  5. 제 4 항에 있어서, 상기 변환부는
    상기 처리부에 의해 상기 컴포넌트에 설정된 속성에 관한 정보는 CSS로 변환하고,
    상기 컴포넌트의 이벤트 정보는 Java Script로 변환하고,
    상기 컴포넌트의 컨텐츠 정보는 HTML TAG로 변환하는 것을 특징으로 하는 모바일 웹페이지를 효율적으로 개발하기 위한 크로스 플랫폼 모바일 소스 생성 시스템.
  6. 화면의 일부 영역에 적어도 하나 이상의 컴포넌트를 출력하고, 상기 화면의 또다른 일부 영역에 구성하고자 하는 웹페이지 화면을 출력하는 1 단계;
    상기 출력된 컴포넌트를 선택하여 드래그앤드롭에 의해 상기 웹페이지 화면의 특정 위치로 이동하여 상기 컴포넌트를 입력하는 2 단계;
    상기 입력된 컴포넌트에 관한 속성 및 이벤트 정보를 설정하고, 상기 컴포넌트에 대응되는 컨텐츠 정보를 매핑하는 3 단계;
    상기 컴포넌트로 구성된 웹페이지 정보를 모바일 웹페이지로 자동 생성할 수 있는 프로그램 언어로 변환하는 4 단계; 및
    상기 변환된 웹페이지 정보를 저장 또는 전송하는 5 단계를 포함하는 모바일 웹페이지를 효율적으로 개발하기 위한 크로스 플랫폼 모바일 소스 생성방법.
  7. 제 6 항에 있어서, 상기 3 단계는
    상기 컴포넌트에 관한 속성 및 이벤트 정보는 상기 컴포넌트가 입력되면 상기 컴포넌트에 관한 적어도 하나 이상의 속성 및 이벤트 정보를 출력하여 선택되는 정보로 설정되는 것을 특징으로 하는 모바일 웹페이지를 효율적으로 개발하기 위한 크로스 플랫폼 모바일 소스 생성방법.
  8. 제 7 항에 있어서, 상기 3 단계는
    상기 입력부를 통해 입력된 컴포넌트의 속성을 설정하는 단계;
    상기 입력된 컴포넌트의 이벤트 정보를 설정하는 단계; 및
    상기 입력된 컴포넌트의 컨텐츠 정보를 컨텐츠 저장부로부터 검색하여 매핑하는 단계를 포함하는 것을 특징으로 하는 모바일 웹페이지를 효율적으로 개발하기 위한 크로스 플랫폼 모바일 소스 생성방법.
  9. 제 6 항에 있어서, 상기 변환하는 단계는
    상기 컴포넌트에 설정된 속성에 관한 정보는 CSS로 변환하고, 상기 컴포넌트의 이벤트 정보는 Java Script로 변환하고, 상기 컴포넌트의 컨텐츠 정보는 HTML TAG로 변환하는 것을 특징으로 하는 모바일 웹페이지를 효율적으로 개발하기 위한 크로스 플랫폼 모바일 소스 생성 방법.
KR1020100103919A 2010-10-25 2010-10-25 모바일 웹페이지를 효율적으로 개발하기 위한 크로스 플랫폼 솔루션 및 크로스 플랫폼 모바일 소스 생성 시스템 KR101170263B1 (ko)

Priority Applications (1)

Application Number Priority Date Filing Date Title
KR1020100103919A KR101170263B1 (ko) 2010-10-25 2010-10-25 모바일 웹페이지를 효율적으로 개발하기 위한 크로스 플랫폼 솔루션 및 크로스 플랫폼 모바일 소스 생성 시스템

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR1020100103919A KR101170263B1 (ko) 2010-10-25 2010-10-25 모바일 웹페이지를 효율적으로 개발하기 위한 크로스 플랫폼 솔루션 및 크로스 플랫폼 모바일 소스 생성 시스템

Publications (2)

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

Family

ID=46263084

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020100103919A KR101170263B1 (ko) 2010-10-25 2010-10-25 모바일 웹페이지를 효율적으로 개발하기 위한 크로스 플랫폼 솔루션 및 크로스 플랫폼 모바일 소스 생성 시스템

Country Status (1)

Country Link
KR (1) KR101170263B1 (ko)

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR101409528B1 (ko) * 2013-03-26 2014-06-19 한양대학교 에리카산학협력단 Mda 기반 스마트 크로스 플랫폼 어플리케이션 저작 방법 및 장치
KR101951719B1 (ko) * 2018-07-26 2019-02-25 (주)비아이매트릭스 그래픽 인터페이스 기반으로 이벤트 동작을 프로그래밍 하는 웹 레포팅 디자인 시스템
WO2022203381A1 (ko) * 2021-03-23 2022-09-29 (주)인스웨이브시스템즈 단일 페이지 애플리케이션 방식의 사용자 인터페이스 플랫폼 통합 개발 시스템 및 방법
WO2022203387A1 (ko) * 2021-03-23 2022-09-29 (주)인스웨이브시스템즈 소스 컴파일러를 구비한 사용자 인터페이스 플랫폼 통합 개발 시스템 및 방법

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR100727066B1 (ko) * 2005-07-01 2007-06-12 주식회사 케이티프리텔 동적 템플릿을 이용한 무선 웹 페이지 제공 방법 및 장치

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR101409528B1 (ko) * 2013-03-26 2014-06-19 한양대학교 에리카산학협력단 Mda 기반 스마트 크로스 플랫폼 어플리케이션 저작 방법 및 장치
KR101951719B1 (ko) * 2018-07-26 2019-02-25 (주)비아이매트릭스 그래픽 인터페이스 기반으로 이벤트 동작을 프로그래밍 하는 웹 레포팅 디자인 시스템
JP2020017277A (ja) * 2018-07-26 2020-01-30 株式会社 ビーアイマトリックスＢｉ Ｍａｔｒｉｘ Ｃｏ．，Ｌｔｄ グラフィックインタフェースに基づく、イベント動作をプログラミングするｗｅｂレポーティングデザインシステム
WO2022203381A1 (ko) * 2021-03-23 2022-09-29 (주)인스웨이브시스템즈 단일 페이지 애플리케이션 방식의 사용자 인터페이스 플랫폼 통합 개발 시스템 및 방법
WO2022203387A1 (ko) * 2021-03-23 2022-09-29 (주)인스웨이브시스템즈 소스 컴파일러를 구비한 사용자 인터페이스 플랫폼 통합 개발 시스템 및 방법

Also Published As

Publication number Publication date
KR101170263B1 (ko) 2012-08-03

Similar Documents

Publication Publication Date Title
US8370750B2 (en) Technology for generating service program
CN108345543B (zh) 一种数据处理方法、装置、设备及存储介质
EP3416054B1 (en) Method and device for page display, and storage medium
CN112257135B (zh) 一种基于多线程的模型加载方法、装置、存储介质及终端
WO2021008334A1 (zh) 小程序的数据绑定方法、装置、设备及存储介质
JP7246502B2 (ja) ミニプログラム作成方法、装置、端末及びプログラム
JP2006236323A (ja) アプリケーション提供システム、サーバ、クライアントおよびアプリケーション提供方法
CN111191176B (zh) 网站内容更新方法、装置、终端及存储介质
CN112116690B (zh) 视频特效生成方法、装置及终端
US11042959B2 (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
KR101170263B1 (ko) 모바일 웹페이지를 효율적으로 개발하기 위한 크로스 플랫폼 솔루션 및 크로스 플랫폼 모바일 소스 생성 시스템
KR20140040920A (ko) 매쉬업 블록 유저 인터페이스를 이용한 매쉬업 저작 장치 및 그 방법
KR20170016362A (ko) 컴파일 동안 표시 메타데이터를 브라우저 렌더링 가능 포맷으로 변환하는 기법
CN113467663B (zh) 界面配置方法、装置、计算机设备及介质
CN109726379B (zh) 内容项编辑方法、装置、电子设备及存储介质
CN109753612B (zh) 问卷显示的控制方法、装置、存储介质和电子设备
US11210449B2 (en) Page display method and device and storage medium
JP2017522639A (ja) 開発システムにおける意味論的なコンテンツアクセス
KR20120042296A (ko) 크로스 플랫폼 솔루션을 이용해 개발된 모바일 웹페이지를 자동으로 생성하는 시스템 및 방법
KR102062069B1 (ko) 음성 명령 기반 매쉬업 서비스 생성 장치 및 그 방법
CN102870111A (zh) 用于确定分析历史记录的方法和装置
CN113377365B (zh) 代码显示方法、装置、设备、计算机可读存储介质及产品
US20180004802A1 (en) User interface for searching referenced information
RU2634221C2 (ru) Способ и устройство для отрисовки представления электронного документа на экране

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