KR20150099328A - 애플리케이션 개발 환경 제공 방법 - Google Patents

Abstract

본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 방법은
폼 페이지를 두 개 이상의 페이지로 분리하여 저장하는 단계;
개발 대상 애플리케이션의 식별 정보, 버전 정보, 개발자 정보, 인증정보, 이미지 정보, 데이터베이스 연결 정보, 서버 연결 정보, 모듈 정보 및 소스정보를 하나 이상 입력하기 위한 애플리케이션 프로젝트 설정 화면을 표시하는 단계;
상기 애플리케이션 프로젝트 설정 화면 상에 개발 대상 애플리케이션의 식별 정보, 버전 정보, 개발자 정보, 인증정보, 이미지 정보, 데이터베이스 연결 정보, 서버 연결 정보, 모듈 정보 및 소스정보가 하나 이상 입력되면, 입력된 정보에 부합되는 애플리케이션 프로젝트를 생성하는 단계;
애플리케이션을 구성하는 복수의 페이지 이미지와 상기 복수의 페이지 이미지를 연결하는 복수개의 화살표 이미지를 통해 상기 애플리케이션을 구성하는 복수의 페이지 이미지 사이의 연결관계를 나타내는 페이지 간 연결 영역과 상기 페이지 간 연결 영역 상에 페이지를 추가하고, 페이지들 간 연결 관계를 설정하기 위한 폼 탭 영역을 포함하는 제1화면을 표시하는 단계;
상기 복수의 페이지들 중 어느 하나에 대하여 각 페이지 내에서 각 화면 또는 기능을 담당하는 복수의 컴포넌트들의 사이의 연결관계를 나타내는 제2 화면을 표시하는 단계;
하나 이상의 데이터베이스에 대응하는 아이콘을 드래그 앤 커넥트 방식으로 연결하여, 데이터베이스 및 데이터 바인딩을 위한 연관 관계를 그래픽컬하게 나타내는 제3 화면을 표시하는 단계;
상기 제2 화면에서 이벤트 정보를 포함하는 제1 컴포넌트와 액션 정보를 포함하는 제2 컴포넌트가 화살표로 연결되면, 상기 연결되는 제1 컴포넌트와 제2 컴포넌트 간 구조적인 연결 오류를 검증하는 단계;
검증결과, 오류가 발견되면, 오류 정보를 화면에 표시되도록 하고, 오류가 발견되지 않으면, 상기 제1컴포넌트와 제2컴포넌트간 연결에 대응하는 중간언어로 구성된 제1코드를 생성하는 단계;
상기 애플리케이션이 설치되는 타겟 브라우저를 선택하기 위한 선택 화면을 표시하는 단계;
상기 선택 화면을 통해 선택된 타겟 브라우저가 구동되는 단말기의 해상도 정보를 식별하는 단계;
상기 해상도 정보 및 상기 제2화면에 표시된 적어도 하나의 컴포넌트의 배치 상태에 대응하는 배치 정보에 기초하여 상기 컴포넌트들의 레이아웃을 결정하는 단계; 및
상기 결정된 레이아웃에 따라 상기 제1 코드를 상기 제2 코드로 변환하는 단계;를 포함하는 애플리케이션 개발 환경 제공 방법이다.

Description

애플리케이션 개발 환경 제공 방법 {A method for providing an application developing environment}

본 발명은 애플리케이션 개발 환경 제공 방법에 관한 것이며, 더욱 상세하게는 애플리케이션 개발자의 개발 효율을 향상시킬 수 있는 애플리케이션 개발 환경 제공 방법에 관한 것이다.

최근, 다양한 종류의 스마트 폰이나 태블릿 PC과 같은 단말 장치들이 등장함에 따라 이러한 단말 장치들에서 사용할 수 있는 애플리케이션에 대한 관심이 증폭되고 있다.

특히, 최근에는 개발자들이 애플리케이션을 개발하여 소정의 애플리케이션 스토어에 업로드하면, 사용자들이 단말 장치를 이용하여 상기 애플리케이션 스토어에 접속한 후 자신이 원하는 애플리케이션을 구매하여 다운로드하는 방식이 널리 이용되고 있다. 이에 따라, 다양한 분야에서 애플리케이션 개발이 활발하게 이루어지고 있다.

이와 같이 다양하고, 활발한 애플리케이션 개발을 위해서, 일반적으로 C 언어, 자바(JAVA), OBDC, SQL 등을 다룰 줄 아는 전문가들은 직접적인 코드 작성 및 개발을 수행하고 있다.

도 1은 일반적인 애플리케이션 개발 환경을 나타내는 도면이다.

도 1에 도시된 바와 같이, 일반적인 애플리케이션 개발은 각각의 이벤트 또는 윈도우 메시지에 의한 단계별 매칭을 위해 Activity, Dialog, Frame 등과 같은 위젯들을 선언하고, 이를 상속받는 이벤트 프로시져(procedure)를 소정의 코드로 구현하는 방식에 의해 이루어지고 있다.

그러나, 이와 같은 개발 방식은 숙련된 개발자만이 접근할 수 있으며, 앞서 설명한 언어들에 대한 전문 지식들을 필요로 한다. 그리고, 개발자는 많은 양의 코드를 이벤트 프로시져를 통해 직접 구현해야 하므로 많은 지식과 상당한 노력을 들여 애플리케이션 개발을 수행하여야 하는 어려움이 있다.

또한, 개발된 코드에 의한 서비스 시나리오에 변경이 있는 경우, 개발자는 다시 많은 코드들을 변경해야 하는 문제점이 있다.

뿐만 아니라, 개발자마다 전문 지식의 정도 및 개인적인 코드 스타일 차이가 상이하여 단체협업 또는 개발자 교체시 모듈간 호환성 확보에 어려움이 있으며, 모듈화에 대한 이해도에 따라 코드가 복잡하게 생산될 수 있어 치명적인 버그가 다수 발생할 수 있다.

한편, 개발자가 동일한 기능을 갖는 애플리케이션을 개발하더라도 그 애플리케이션이 적용될 OS의 플랫폼에 따라 서로 다른 애플리케이션 개발 툴을 이용하여 개발을 수행해야 하는 문제가 있으며, 애플리케이션의 중복 개발에 따른 노력과 시간이 많이 소요될 수 있다.

본 발명의 목적은, 개발자의 개발 효율을 향상시킬 수 있는 애플리케이션 개발 환경 제공 방법을 제공함에 있다.

또한, 복잡하고 전문적인 지식 없이도 시나리오 관리 및 애플리케이션 개발을 용이하게 할 수 있는 유저 인터페이스를 제공하는 애플리케이션 개발 환경 제공 방법을 제공함에 있다.

또한, 본 발명의 또 다른 목적은 모듈간 호환성을 유지하면서도 다양한 기기에 적응적으로 변환 적용할 수 있어 중복 개발을 방지할 수 있는 애플리케이션 개발 환경 제공 방법을 제공함에 있다.

상기 목적을 달성하기 위한 본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 방법은

폼 페이지를 두 개 이상의 페이지로 분리하여 저장하는 단계;

개발 대상 애플리케이션의 식별 정보, 버전 정보, 개발자 정보, 인증정보, 이미지 정보, 데이터베이스 연결 정보, 서버 연결 정보, 모듈 정보 및 소스정보를 하나 이상 입력하기 위한 애플리케이션 프로젝트 설정 화면을 표시하는 단계;

상기 애플리케이션 프로젝트 설정 화면 상에 개발 대상 애플리케이션의 식별 정보, 버전 정보, 개발자 정보, 인증정보, 이미지 정보, 데이터베이스 연결 정보, 서버 연결 정보, 모듈 정보 및 소스정보가 하나 이상 입력되면, 입력된 정보에 부합되는 애플리케이션 프로젝트를 생성하는 단계;

애플리케이션을 구성하는 복수의 페이지 이미지와 상기 복수의 페이지 이미지를 연결하는 복수개의 화살표 이미지를 통해 상기 애플리케이션을 구성하는 복수의 페이지 이미지 사이의 연결관계를 나타내는 페이지 간 연결 영역과 상기 페이지 간 연결 영역 상에 페이지를 추가하고, 페이지들 간 연결 관계를 설정하기 위한 폼 탭 영역을 포함하는 제1화면을 표시하는 단계;

상기 복수의 페이지들 중 어느 하나에 대하여 각 페이지 내에서 각 화면 또는 기능을 담당하는 복수의 컴포넌트들의 사이의 연결관계를 나타내는 제2 화면을 표시하는 단계;

하나 이상의 데이터베이스에 대응하는 아이콘을 드래그 앤 커넥트 방식으로 연결하여, 데이터베이스 및 데이터 바인딩을 위한 연관 관계를 그래픽컬하게 나타내는 제3 화면을 표시하는 단계;

상기 제2 화면에서 이벤트 정보를 포함하는 제1 컴포넌트와 액션 정보를 포함하는 제2 컴포넌트가 화살표로 연결되면, 상기 연결되는 제1 컴포넌트와 제2 컴포넌트 간 구조적인 연결 오류를 검증하는 단계;

검증결과, 오류가 발견되면, 오류 정보를 화면에 표시되도록 하고, 오류가 발견되지 않으면, 상기 제1컴포넌트와 제2컴포넌트간 연결에 대응하는 중간언어로 구성된 제1코드를 생성하는 단계;

상기 애플리케이션이 설치되는 타겟 브라우저를 선택하기 위한 선택 화면을 표시하는 단계;

상기 선택 화면을 통해 선택된 타겟 브라우저가 구동되는 단말기의 해상도 정보를 식별하는 단계;

상기 해상도 정보 및 상기 제2화면에 표시된 적어도 하나의 컴포넌트의 배치 상태에 대응하는 배치 정보에 기초하여 상기 컴포넌트들의 레이아웃을 결정하는 단계; 및

상기 결정된 레이아웃에 따라 상기 제1 코드를 상기 제2 코드로 변환하는 단계;를 포함하는 애플리케이션 개발 환경 제공 방법이다.

본 발명의 실시예에 따르면, 애플리케이션 개발 환경을 제공할 때 복수의 페이지들간 연결 관계를 나타내는 제1 화면을 표시하고, 어느 하나의 페이지에 대하여 컴포넌트간 연결 관계를 나타내는 제2 화면을 표시하게 된다.

특히, 이벤트 정보를 포함하는 제1 컴포넌트와 액션 정보를 포함하는 제2 컴포넌트를 연결하여 컴포넌트간 연결 관계를 직관적으로 표시할 수 있게 된다.

한편, 컴포넌트간 연결 관계를 나타내는 이미지 객체에 대한 변형에 따라 연결 관계가 변경될 수 있어 전문적인 지식이 없는 일반 개발자라 하더라도, 컴포넌트간 연결관계 및 시나리오 구현을 용이하게 수행할 수 있게 된다.

또한, 이와 같은 애플리케이션 개발을 위해 본 발명의 실시 예에 따른 중간 언어를 이용함으로써, 동일한 애플리케이션을 서로 다른 OS의 플랫폼으로 용이하게 변환 적용할 수 있게 된다. 따라서, 한 번의 애플리케이션 개발을 통해 다양한 OS에서 이용 가능한 애플리케이션을 개발할 수 있게 되므로 개발에 필요한 시간과 노력을 크게 저감시킬 수 있다.

또한, 애플리케이션 개발을 용이하게 하기 위한 다양한 유저 인터페이스 및 그 동작을 제공할 수 있어, 개발자의 이용 편의성이 증대될 수 있다.

도 1은 일반적인 애플리케이션 개발 화면을 나타낸다.
도 2는 본 발명의 일 실시 예에 따른 애플리케이션 개발 환경 제공 장치를 포함하는 전체 개발 시스템의 일 예를 개략적으로 나타낸 도면이다.
도 3은 본 발명의 일 실시 예에 따른 애플리케이션 개발환경 제공장치의 세부 구성을 나타낸다.
도 4 내지 도 7은 본 발명의 일 실시 예에 따른 애플리케이션 개발 환경 제공 방법을 설명하기 위한 도면들이다.
도 8은 본 발명의 실시 예에 따른 제2 화면과 실제 코드와의 관계를 나타내는 도면이다.
도 9은 본 발명의 일 실시 예에 따른 제2 화면(120)의 액션 리스트를 설명하기 위한 도면이다.
도 10는 본 발명의 다른 일 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)의 컴포넌트 블록 표시 및 연결관계 표시 방법을 나타낸다.
도 11은 본 발명의 일 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)의 컴포넌트 추가 방법을 설명하기 위한 도면이다.
도 12은 본 발명의 일 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)의 데이터 바인딩(binding) 방법을 나타낸다.
도 13는 본 발명의 일 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)의 관계형 데이터베이스 관리 시스템(RDBMS) 설정 방법을 나타낸다.
도 14은 본 발명의 일 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)의 오픈 API형 데이터 설정 방법을 나타낸다.
도 15는 본 발명의 일 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)의 전문 Restful/SOAP 설정 방법을 나타낸다.
도 16 내지 도 25는 본 발명의 다른 일 실시 예에 따른 애플리케이션 개발 환경 제공 방법을 설명하기 위한 도면들이다.
도 26는 애플리케이션 개발 환경 제공 장치(100)가 타겟 단말기(300)에 구동 가능한 제2 언어로 변환하여 출력한 애플리케이션이 타겟 단말기(300)에서 실행된 화면을 나타낸다.
도 27 및 도 28은 본 발명의 다른 일 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)에서 제공되는 제2 화면의 컴포넌트 배치 방법을 나타낸다.
도 29은 본 발명의 또 다른 일 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)의 레이아웃 방법을 나타낸다.
도 29 내지 도 31은 블록 레이아웃의 실시 예들을 나타낸다.
도 32은 애플리케이션 개발 환경 제공 장치(100)의 플랫폼을 도식화한 블록도이며, 도 33는 애플리케이션을 실행할 수 있는 단말기(300)의 플랫폼을 도식화한 블록도이고, 도 34은 서버(300)의 아키텍쳐를 나타내는 블록도이다.
도 35는 본 발명의 실시 예에 따른 컴포넌트 구조도를 나타낸다.
도 36 내지 도 53는 본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 방법에 따라 제공되는 화면들을 이용하여 애플리케이션이 생성되는 과정을 설명하기 위하여 참조되는 도면들이다.

이하의 내용은 단지 본 발명의 원리를 예시한다. 그러므로 당업자는 비록 본 명세서에 명확히 설명되거나 도시되지 않았지만 본 발명의 원리를 구현하고 본 발명의 개념과 범위에 포함된 다양한 장치를 발명할 수 있는 것이다. 또한, 본 명세서에 열거된 모든 조건부 용어 및 실시예들은 원칙적으로, 본 발명의 개념이 이해되도록 하기 위한 목적으로만 명백히 의도되고, 이와 같이 특별히 열거된 실시예들 및 상태들에 제한적이지 않는 것으로 이해되어야 한다.

또한, 본 발명의 원리, 관점 및 실시예들 뿐만 아니라 특정 실시예를 열거하는 모든 상세한 설명은 이러한 사항의 구조적 및 기능적 균등물을 포함하도록 의도되는 것으로 이해되어야 한다. 또한 이러한 균등물들은 현재 공지된 균등물뿐만 아니라 장래에 개발될 균등물 즉 구조와 무관하게 동일한 기능을 수행하도록 발명된 모든 소자를 포함하는 것으로 이해되어야 한다.

따라서, 예를 들어, 본 명세서의 블럭도는 본 발명의 원리를 구체화하는 예시적인 회로의 개념적인 관점을 나타내는 것으로 이해되어야 한다. 이와 유사하게, 모든 흐름도, 상태 변환도, 의사 코드 등은 컴퓨터가 판독 가능한 매체에 실질적으로 나타낼 수 있고 컴퓨터 또는 프로세서가 명백히 도시되었는지 여부를 불문하고 컴퓨터 또는 프로세서에 의해 수행되는 다양한 프로세스를 나타내는 것으로 이해되어야 한다.

프로세서 또는 이와 유사한 개념으로 표시된 기능 블럭을 포함하는 도면에 도시된 다양한 소자의 기능은 전용 하드웨어뿐만 아니라 적절한 소프트웨어와 관련하여 소프트웨어를 실행할 능력을 가진 하드웨어의 사용으로 제공될 수 있다. 프로세서에 의해 제공될 때, 상기 기능은 단일 전용 프로세서, 단일 공유 프로세서 또는 복수의 개별적 프로세서에 의해 제공될 수 있고, 이들 중 일부는 공유될 수 있다.

또한 프로세서, 제어 또는 이와 유사한 개념으로 제시되는 용어의 명확한 사용은 소프트웨어를 실행할 능력을 가진 하드웨어를 배타적으로 인용하여 해석되어서는 아니되고, 제한 없이 디지털 신호 프로세서(DSP) 하드웨어, 소프트웨어를 저장하기 위한 롬(ROM), 램(RAM) 및 비 휘발성 메모리를 암시적으로 포함하는 것으로 이해되어야 한다. 주지관용의 다른 하드웨어도 포함될 수 있다.

본 명세서의 청구범위에서, 상세한 설명에 기재된 기능을 수행하기 위한 수단으로 표현된 구성요소는 예를 들어 상기 기능을 수행하는 회로 소자의 조합 또는 펌웨어/마이크로 코드 등을 포함하는 모든 형식의 소프트웨어를 포함하는 기능을 수행하는 모든 방법을 포함하는 것으로 의도되었으며, 상기 기능을 수행하도록 상기 소프트웨어를 실행하기 위한 적절한 회로와 결합된다. 이러한 청구범위에 의해 정의되는 본 발명은 다양하게 열거된 수단에 의해 제공되는 기능들이 결합되고 청구항이 요구하는 방식과 결합되기 때문에 상기 기능을 제공할 수 있는 어떠한 수단도 본 명세서로부터 파악되는 것과 균등한 것으로 이해되어야 한다.

상술한 목적, 특징 및 장점은 첨부된 도면과 관련한 다음의 상세한 설명을 통하여 보다 분명해질 것이며, 그에 따라 본 발명이 속하는 기술분야에서 통상의 지식을 가진 자가 본 발명의 기술적 사상을 용이하게 실시할 수 있을 것이다. 또한, 본 발명을 설명함에 있어서 본 발명과 관련된 공지 기술에 대한 구체적인 설명이 본 발명의 요지를 불필요하게 흐릴 수 있다고 판단되는 경우에 그 상세한 설명을 생략하기로 한다.

이하, 첨부된 도면을 참조하여 본 발명에 따른 바람직한 일 실시예를 상세히 설명하기로 한다.

도 2는 본 발명의 일 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)를 포함하는 애플리케이션 개발 시스템의 일 예를 개략적으로 나타낸 도면이다.

도 2를 참조하면, 본 발명의 일 실시 예에 따른 애플리케이션 개발 시스템은 애플리케이션 개발 환경 제공 장치(100), 서버(200), 단말기(300) 및 마켓 네트워크(400)를 포함한다.

애플리케이션 개발 환경 제공 장치(100)는 본 발명의 실시 예에 따라 애플리케이션을 구성하는 복수의 페이지들 사이의 연결관계 및 상기 복수의 페이지들 중 어느 하나에 대하여 복수의 컴포넌트들의 사이의 연결관계를 직관적으로 나타내는 화면들을 제공할 수 있다.

이를 위해, 애플리케이션 개발 환경 제공 장치(100)는 애플리케이션을 구성하는 복수의 페이지들 사이의 연결관계를 나타내는 제1 화면을 표시하고, 상기 복수의 페이지들 중 어느 하나에 대하여 복수의 컴포넌트들의 사이의 연결관계를 나타내는 제2 화면을 표시하는 표시부 및 상기 제2 화면에서 이벤트 정보를 포함하는 제1 컴포넌트와 액션 정보를 포함하는 제2 컴포넌트가 연결되도록 제어하는 제어부를 포함할 수 있다.

여기서, 애플리케이션은 애플리케이션 개발 환경 제공 장치(100) 또는 단말기(300)에서 실행하기 위한 애플리케이션 데이터를 의미할 수 있다. 그리고, 애플리케이션 데이터는 애플리케이션 개발 환경 제공 장치(100)에 의해 생성될 수 있으며, 단말기(300)로 직접 전송될 수 있다.

또한, 생성된 애플리케이션 데이터는 마켓 네트워크(400)로 업로드 될 수 있고, 업로드 된 애플리케이션 데이터는 구매 인증된 단말기(300)로 전송될 수도 있다.

그리고, 애플리케이션은 복수의 페이지들을 포함할 수 있으며, 각 페이지들은 복수의 컴포넌트를 포함할 수 있다.

애플리케이션 페이지는 단말기(300)에 의해 해석되어 실행되는 객체로서의 전자 문서 또는 그래픽 유저 인터페이스를 의미할 수 있다. 또한, 각 페이지에 포함된 복수의 컴포넌트들은 구조적으로 다른 페이지에 포함되는 컴포넌트들과 연결 관계를 형성할 수 있다.

이와 같은 연결 관계는, 특정 컴포넌트에 포함된 이벤트 정보가 다른 컴포넌트의 액션 정보와 연결되는 경우 형성될 수 있다.

보다 구체적으로, 애플리케이션이 실행되고, 상기 이벤트 정보에 기초하여 특정 컴포넌트의 이벤트가 발생하면, 이와 연결된 타 컴포넌트의 액션 정보에 기초하여 상기 타 컴포넌트에 대한 액션이 수행될 수 있다.

따라서, 단말기(300)는 애플리케이션이 실행되면, 복수의 페이지간 연결 관계 및 각 컴포넌트들간 연결 관계에 의해 다양한 동작을 수행할 수 있다. 그리고, 개발자는 이를 이용하여 다양한 애플리케이션 서비스를 제공할 수 있게 된다. 특히, 본 발명의 실시 예에 따르면, 이와 같은 페이지 및 컴포넌트간 연결 관계 설정을 위한 직관적이고 단순한 인터페이스를 제공함으로써 개발을 위한 시간 및 노력을 저감시킴은 물론이며 프로그래밍에 대한 전문 지식 없이도 애플리케이션 개발을 매우 용이하게 되는 효과가 있다.

한편, 애플리케이션 개발 환경 제공 장치(100)는 애플리케이션 개발 환경을 통해 생성되는 애플리케이션 프로젝트를 중간 언어로 구성할 수 있으며, 중간 언어로 구성된 애플리케이션 프로젝트 또는 애플리케이션 코드를 타겟 단말기의 타겟 플랫폼 또는 OS에 따라 적응적으로 변환할 수 있다. 그리고, 애플리케이션 개발 환경 제공 장치(100)는 타겟 단말기에서 실행 가능한 애플리케이션을 출력할 수 있다.

특히, 애플리케이션 개발 환경 제공 장치(100)는 기존의 정형화된 개발 패턴의 문제점과 코드 재사용성이 낮은 문제점들을 해결하기 위해, 컴포넌트 기반의 중간 언어로 구성되는 애플리케이션을 생성할 수 있다. 이에 따라 애플리케이션 개발자는 시나리오 기획, 서버 개발 및 클라이언트 개발을 동시적으로 수행할 수 있게 된다.

그리고, 애플리케이션 개발 환경 제공 장치(100)는 어플리케이션 개발을 위한 통합 플랫폼을 제공할 수 있으며, UX 컴포넌트 및 서버 컴포넌트 개발 및 템플릿 개발을 추가 할 수 있는 인터페이스를 제공할 수 있고, 누구나 쉽게 컴포넌트를 제작하고 쉽게 추가 할 수 있는 오픈 플랫폼을 제공할 수 있다. 따라서, 본 발명의 실시 예에 따르면 개발자 중심이 아닌 사용자 및 제품 중심으로서의 애플리케이션 개발 환경을 제공할 수 있게 된다.

한편, 서버(200)는 애플리케이션 개발 환경 제공 장치(100)와 연결될 수 있으며, 애플리케이션 개발 환경 제공 장치(100)에서 필요한 데이터 및 인증 정보 등을 제공할 수 있다.

또한, 서버(200)는 애플리케이션 개발 환경 제공 장치(100)의 버전 정보를 체크할 수 있으며, 업데이트를 제공할 수도 있다. 그리고, 서버(200)는 애플리케이션 개발 환경 제공 장치(100)에서 필요로 하는 데이터베이스 또는 WAS(Web Application Server)를 포함할 수 있다.

특히, 서버(200)는 애플리케이션 개발 환경 제공 장치(100)에서 사용될 수 있는 컴포넌트 데이터베이스를 포함할 수 있다. 그리고, 서버(200)는 특정 컴포넌트의 구매가 인증된 애플리케이션 개발 환경 제공 장치(100)로 해당 컴포넌트를 전송할 수 있다. 그리고 서버(200)는 컴포넌트의 해석을 위한 웹 컨테이너를 포함할 수도 있다.

한편, 각 단말기(300)는 애플리케이션 개발 환경 제공 장치(100)에서 생성된 애플리케이션이 실행 가능한 단말기일 수 있으며, 스마트 폰이나 태블릿 PC등이 예시될 수 있다.

특히, 각 단말기(300)의 플랫폼 또는 OS는 서로 다를 수 있다. 따라서, 본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)는 타겟 단말기를 식별하고, 중간 언어로 구성된 애플리케이션을 타겟 단말기에 해당하는 코드로 변환하여 제공할 수 있다. 그리고, 타겟 단말기는 변환된 애플리케이션을 수신하여 실행할 수 있게 되다. 이를 통해, 개발자는 동일 어플리케이션을 다른 플랫폼으로 변환하기 위한 시간과 노력을 크게 줄일 수 있으며, 타 OS에 대한 전문 지식 없이도 용이하게 변환 및 개발을 수행할 수 있게 된다.

도 3은 본 발명의 일 실시 예에 따른 애플리케이션 개발환경 제공장치의 세부 구성을 나타낸다.

애플리케이션 개발환경 제공장치의 세부 구성은 개발 대상 애플리케이션의 식별 정보, 버전 정보, 개발자 정보, 인증정보, 이미지 정보, 데이터베이스 연결 정보, 서버 연결 정보, 모듈 정보 및 소스정보를 하나 이상 입력하기 위한 애플리케이션 프로젝트 설정 화면을 표시하고, 애플리케이션을 구성하는 복수의 페이지 이미지와 상기 복수의 페이지 이미지를 연결하는 복수개의 화살표 이미지를 통해 상기 애플리케이션을 구성하는 복수의 페이지 이미지 사이의 연결 관계를 나타내는 페이지 간 연결 영역과 상기 페이지 간 연결 영역 상에 페이지를 추가하고, 페이지들 간 연결 관계를 설정하기 위한 폼 탭 영역을 포함하는 제1화면을 표시하고, 상기 복수의 페이지들 중 어느 하나에 대하여 각 페이지 내에서 각 화면 또는 기능을 담당하는 복수의 컴포넌트들의 사이의 관계를 화살표로 연결-이벤트 정보를 포함하는 제1 컴포넌트와 액션 정보를 포함하는 제2 컴포넌트가 화살표로 연결-하여 나타내는 제2 화면을 표시하고, 상기 복수의 페이지 중 하나에 추가할 수 있는 미리 정의된 컴포넌트 리스트-복수의 컴포넌트 아이템들을 포함하며, 각각의 컴포넌트 아이템들은 미리 정의된 기능 또는 화면을 가지는 각 컴포넌트 코드에 대응하는 컴포넌트 리스트-를 표시하는 표시부(191)와, 상기 애플리케이션 프로젝트 설정 화면 상에 개발 대상 애플리케이션의 식별 정보, 버전 정보, 개발자 정보, 인증정보, 이미지 정보, 데이터베이스 연결 정보, 서버 연결 정보, 모듈 정보 및 소스정보가 하나 이상 입력되면, 입력된 정보에 부합되는 애플리케이션 프로젝트가 생성되도록 제어하며, 상기 제2 화면에서 이벤트 정보를 포함하는 제1 컴포넌트와 액션 정보를 포함하는 제2 컴포넌트가 연결되도록 제어하며, 상기 컴포넌트 아이템들 중 어느 하나가 선택되어 드래그 앤 드랍 방식으로 페이지 화면에 이동되면, 상기 이동된 컴포넌트 아이템에 대응되는 코드를 애플리케이션 코드에 삽입되도록 제어하는 제어부(196)와, 상기 제2 화면에서 이벤트 정보를 포함하는 제1 컴포넌트와 액션 정보를 포함하는 제2 컴포넌트가 화살표로 연결되면, 상기 제1컴포넌트와 제2컴포넌트간 연결에 대응하는 코드를 자동으로 생성하는 생성부(193)로 구성되어 있다.

또한, 애플리케이션 개발환경 제공장치의 세부 구성 요소로써 애플리케이션 프로젝트 생성 화면에 대한 입력을 통해 애플리케이션 프로젝트를 생성하고 애플리케이션 식별 정보(Application ID)를 입력하며 인증 정보 및 프로파일과 어플리케이션 이미지를 입력하는 입력부(192)가 있으며 상기 표시부를 통해 선택된 타겟 플랫폼이 구동되는 단말기의 해상도 정보를 식별하고, 상기 해상도 정보 및 상기 제2화면에 표시된 적어도 하나의 컴포넌트의 배치 상태에 대응하는 배치 정보에 기초하여 상기 컴포넌트들의 레이아웃을 결정한 후, 상기 결정된 레이아웃에 따라 상기 제1 코드를 상기 제2 코드로 변환하는 변환부(194) 서버와 애플리케이션 개발환경 제공장치간의 데이터 통신을 담당하는 통신부(195)로 구성된다. 상기에서 데이터 통신을 하는 데이터로는 생성된 제1 또는 제 2의 컴포넌트들도 포함된다.

한편, 애플리케이션 개발 환경 제공 장치에는 기동 시 종래의 기술에서 문제시 되었던 애플리케이션 속도 및 메모리 속도의 저하 문제를 해결하기 위한 폼 슬라이싱 부(197)가 포함되어 구성된다.

상기에서 폼 슬라이싱 부는 HTML기반 애플리케이션에서 수많은 페이지를 관리하게 되었을 때 애플리케이션의 웹브라우저 콤포넌트가 가많은 양의 HTML 및 자바스크립트, CSS(cascading style sheets), 이미지를 구문 분석하고 화면에 그리기 위한 사전작업을 하게 되어 필연적으로 애플리케이션의 로딩속도가 급격히 저하되는 문제점을 해결하기 위한 애플리케이션 개발 환경 제공 장치 세부 구성요소로써 로딩 속도의 급격한 저하의 문제점을 해결하기 위하여 시작화면, 로그인화면, 메인화면 과 같이 초기 로딩시 부터 빈번하게 필요한 부분은 종래의 기술로 페이지 관리를 하지만 그 외의 화면들은 별도의 HTML으로 분리하여 파일로 저장하여 처리한다.

일반적으로 HTML “article” 또는 “div”와 같은 태그 요소를 이용하여 화면영역을 표현하고 있으며 각 화면에 차일드 엘리먼트를 이용하여 헤더영역과 각종 콘텐츠를 같이 표현하고 있다. 이를 분리하여 화면을 저장하게 되면 분리된 화면들은 런타임 시에 버튼 또는 기타 사용자 이벤트에 대응하여 화면 이동전에 필요한 화면들을 동적으로 화면에 삽입 처리하여 로딩속도를 개선한다.

또한 화면이 계속 변경 되는 상황에 따라서 더 이상 해당 화면이 필요 없게 되는 시점을 이용하여 슬라이싱된 HTML 파일을 삭제함으로서 필요 없는 리소스를 정리되어 메모리의 성능을 향상시킬 수 있다.

도 54는 일반적인 종래의 기술 페이지를 도 55는 슬라이싱된 폼의 영역으로서 기본적인 화면의 역영만을 정의한 화면을 도 56은 슬라이싱된 폼의 엘리먼트는 별도로 “slice.html”파일로 정의한 화면을 도 57은 화면들은 별도의 HTML으로 분리하여 파일로 저장된 디렉토리 화면을 나타낸다.

이하에서는 도 4 내지 도 7을 참조하여 본 발명의 일 실시 예에 따른 애플리케이션 개발 환경 제공 방법을 설명한다.

도 4은 본 발명의 일 실시 예에 따른 애플리케이션 개발 환경 제공 방법을 설명하기 위한 흐름도이다.

도 4을 참조하면, 먼저 애플리케이션 개발 환경 제공 장치(100)는 애플리케이션 프로젝트를 생성한다(S101).

애플리케이션 개발 환경 제공 장치(100)는 애플리케이션의 개발을 위한 애플리케이션 프로젝트를 생성할 수 있다. 애플리케이션 프로젝트는 개발 대상 애플리케이션을 구성하는 다양한 정보를 포함할 수 있다. 또한, 애플리케이션 프로젝트는 개발 대상 애플리케이션의 식별 정보, 버전 정보, 개발자 정보, 인증 정보, 이미지 정보, 데이터베이스 연결 정보, 서버 연결 정보, 모듈 정보 및 소스 정보를 포함할 수 있으며, 개발 대상 플랫폼에 대응하여 최적화된 정보를 포함할 수 있다.

이를 위해, 애플리케이션 개발 환경 제공 장치(100)는 애플리케이션 프로젝트 생성 화면을 제공할 수 있다.

도 5는 애플리케이션 개발 환경 제공 장치(100)에 의해 제공되는 애플리케이션 프로젝트 생성 화면을 나타낸다.

도 5에 도시된 바와 같이, 개발자는 애플리케이션 프로젝트 생성 화면에 대한 입력을 통해 애플리케이션 프로젝트를 생성할 수 있다. 애플리케이션 프로젝트 생성 화면은 도 5와 같이 애플리케이션 식별 정보(Application ID) 입력부, 인증 정보 및 프로파일 입력부 및 어플리케이션 이미지 입력부를 포함할 수 있다. 이에 따라 개발자가 입력해야 하는 입력정보의 최소화 및 필요이미지의 최소화가 구현될 수 있다.

특히, 애플리케이션 개발 환경 제공 장치(100)는 애플리케이션 프로젝트가 생성되고, 개발 대상 플랫폼이 설정되면, 이에 따라 애플리케이션 페이지의 자동 리사이징(Resizing) 및 자동 버전 관리를 수행할 수 있다.

이후, 애플리케이션 개발 환경 제공 장치(100)는 복수의 페이지들간 연결관계를 나타내는 제1 화면을 표시한다(S103).

애플리케이션 개발 환경 제공 장치(100)는 생성된 애플리케이션 프로젝트에 의해 개발 중인 애플리케이션의 페이지 정보를 제1 화면을 통해 표시할 수 있다. 그리고, 제1 화면은 각 페이지간의 연결 관계를 나타낼 수 있다.

한편으로 화면이 스마트 폰 등보다 상대적으로 큰 테블릿 전용 스마트 디바이스를 위한 프레임을 나누어 애플리케이션을 구성하는 기본 설정을 실시할 수 있다.

도 58은 애플리케이션 개발 환경 제공 장치(100)에 의해 표시되는 테블릿 전용 디바이스를 위한 프레임을 나누는 화면을 나타낸다.

테블릿 전용 스마트 디바이스를 위한 프레임간 이동 컴포넌트, 프레임간의 액션 컴포넌트, 프레임간의 데이타 이동 컴포넌트를 지원하도록 개발환경을 제공한다.

도 6는 애플리케이션 개발 환경 제공 장치(100)에 의해 표시되는 제1 화면(110)을 나타낸다.

도 6에 도시된 바와 같이, 제1 화면(110)은 애플리케이션 프로젝트에서 개발 중인 애플리케이션에 포함되는 복수의 페이지들에 대한 연결 관계를 나타낼 수 있다. 각 페이지들은 단말기(300)에서 애플리케이션이 동작하는 경우 표시될 수 있는 각 전자 문서를 나타낼 수 있다. 그리고 애플리케이션 동작에 의해 단말기(300)에서 표시되는 전자 문서는 각각의 페이지들간의 연결 관계에 따라 전환될 수 있다. 이와 같은 전환 또는 이동은 앞서 설명한 컴포넌트의 이벤트 발생 및 이에 따른 액션 동작에 의해 수행될 수 있다.

예를 들어, 도 6와 같이 애플리케이션은 Home 페이지, Card 페이지, Find 페이지, Donut 페이지, SNS 페이지 및 View 페이지를 포함할 수 있다. 그리고, 제1 화면(110)은 각 페이지간 연결 관계를 나타내는 복수의 화살표 이미지(111)를 포함할 수 있다. 각 화살표 이미지(111)는 각 페이지들간의 이동 또는 전환관계를 나타낼 수 있다.

특히, 애플리케이션 개발자는 제1 화면(110)에 표시되는 각각의 화살표 이미지(111)를 변형 또는 삭제함으로써 페이지간 연결 관계를 원하는 대로 변경 할 수 있다. 예를 들어, 개발자는 새로운 화살표를 연결하여 페이지 사이를 연결시킬 수 있다. 또한, 기존의 화살표를 삭제하여 페이지 사이를 끊을 수 있다.

그리고, 애플리케이션 개발 환경 제공 장치(100)는 이와 같은 화살표 이미지의 변경 또는 삭제가 있는 경우, 이를 중간 언어로 구성된 애플리케이션 코드에 반영시킬 수 있다. 따라서, 애플리케이션 개발자는 코드 수정에 대한 전문적인 지식 없이도 각 페이지간의 연결 관계를 용이하게 파악하고, 수정할 수 있게 된다.

한편, 애플리케이션 개발 환경 제공 장치(100)는 제1 화면(110) 주변에 페이지간 연결 관계 설정 또는 페이지 추가를 위한 폼 탭(112)을 표시할 수 있다. 폼 탭(112)은 예를 들어, 연결 관계 설정 및 페이지 추가를 위해 미리 정의된 아이콘들을 포함할 수 있다.

그리고, 각 아이콘들은 드래그 앤 드랍 방식에 의해 이동될 수 있으며, 제1 화면(110)으로 이동되는 경우 해당 아이콘에 대응하여 애플리케이션 개발 환경 제공 장치(100)는 연결 관계 설정 또는 미리 정의된 페이지 추가를 수행할 수 있다.

다시 도 4를 설명한다.

이후, 애플리케이션 개발 환경 제공 장치(100)는 어느 하나의 페이지에 대하여 컴포넌트간 연결 관계를 나타내는 제2 화면을 표시한다(S105). 그리고, 애플리케이션 개발 환경 제공 장치(100)는 이벤트 정보를 포함하는 제1 컴포넌트와 액션 정보를 포함하는 제2 컴포넌트를 연결한다(S107).

앞서 설명한 바와 같이, 페이지는 복수의 컴포넌트들을 포함할 수 있다. 각 컴포넌트들은 페이지 내에서 각 화면 또는 기능을 담당하는 하나의 단위 객체를 의미할 수 있다. 그리고, 컴포넌트들은 이와 같은 화면 또는 기능을 담당하기 위한 이벤트 정보 또는 액션 정보를 포함할 수 있다.

이벤트 정보는 단말기(300)에 대해 미리 설정된 사용자 입력 또는 단말기(300) 동작에 의해 발생되는 이벤트들을 포함할 수 있다. 예를 들어, 이벤트들은 onClose, onInit, onScrollMouse, onClick, onError, onSuccess 또는 onEnd 이벤트 등을 포함할 수 있다.

그리고, 이벤트 각각은 다른 컴포넌트에 포함된 액션 정보에 대응될 수 있다. 액션 정보는 단말기(300)에서 발생된 이벤트에 따라 수행되는 애플리케이션의 동작에 대한 정보를 포함할 수 있다. 예를 들어 이벤트에 따라 수행되는 애플리케이션의 동작은 특정 컴포넌트의 실행, 숨김, 보임, 토글, 페이지 이동, clear명령, goHome명령, goBack명령, bind명령 또는 next명령 등을 포함할 수 있다.

이와 같이 각 컴포넌트에 포함되는 이벤트 정보 또는 액션 정보는 각각 대응될 수 있으며 이에 따른 연결 관계는 제2 화면에 표시될 수 있다.

도 7은 본 발명의 실시 예에 따른 제2 화면(120)을 나타낸다.

도 7에 도시된 바와 같이, 제2 화면(120)은 각 컴포넌트를 나타낼 수 있으며, 각 컴포넌트에 포함되는 이벤트 정보와 액션 정보간 연결 관계를 나타낼 수 있다.

특히, 제2 화면(120)에서 각 컴포넌트들은 각각의 블록 형태로 표시될 수 있다. 그리고, 각 컴포넌트에 포함되는 액션 정보는 블록의 일측에 텍스트 박스 형태로 표시될 수 있으며, 이벤트 정보는 블록의 타측에 텍스트 박스 형태로 표시될 수 있다.

그리고, 각 박스들간의 연결 관계가 화살표 이미지로 표시될 수 있다. 각각의 화살표 이미지는 특정 컴포넌트의 특정 이벤트로부터 시작될 수 있으며, 다른 컴포넌트의 특정 액션을 향할 수 있다. 이 경우, 화살표 이미지는 특정 이벤트가 발생하면 그 다음으로 실행될 컴포넌트의 액션임을 나타낼 수 있다.

앞서 제1 화면(110)에서 설명한 바와 동일하게, 애플리케이션 개발자는 제2 화면(120)에서 각 화살표 이미지를 변경 또는 삭제할 수 있고, 각 컴포넌트들은 드래그 앤 드랍 방식에 의해 추가 또는 삭제될 수도 있다. 이에 따라, 각 컴포넌트들의 이벤트와 액션간 연결 관계는 변경될 수 있으며, 애플리케이션 개발 환경 제공 장치(100)는 제2 화면(120)에 표시되는 컴포넌트와 화살표 이미지의 변경에 따라 중간 언어로 구성되는 애플리케이션의 코드를 생성 또는 삭제할 수 있다.

예를 들어, button1 컴포넌트 블록(121)은 onClick 이벤트 박스(123)를 포함할 수 있으며, onClick 이벤트 박스(123)는 화살표 이미지에 의해 link1 컴포넌트 블록(122)에 포함된 goBack 액션 박스(124)와 연결될 수 있다. 이 경우, 애플리케이션 개발 환경 제공 장치(100)는 button1 컴포넌트에 대한 onClink이벤트 발생시 link1 컴포넌트의 goBack 액션이 수행되도록 중간 언어로 코드를 생성하여 개발 중인 애플리케이션 코드에 삽입할 수 있다. 따라서, 개발자는 코드에 대한 이해 없이 유저 인터페이스 조작만으로도 컴포넌트간 연결 관계를 설정할 수 있게 된다.

도 8은 본 발명의 실시 예에 따른 제2 화면과 실제 코드와의 관계를 나타내는 도면이다.

도 8에 도시된 바와 같이, 본 발명의 실시 예에 따르면 애플리케이션 개발자는 제2 화면(120)에서 Button1 컴포넌트의 onClick 이벤트 발생시 그 다음 실행할 컴포넌트 messagebox1과, 그 컴포넌트가 가지고 있는 액션인 show를 화살표 이미지로 연결함으로써 지정할 수 있게 된다. 이 경우 도 8 하단 코드의 박스부분과 같은 코드를 애플리케이션 개발 환경 제공 장치(100)는 자동적으로 생성하여 애플리케이션 코드에 삽입할 수 있다. 따라서, 개발자는 JAVA 코드 작성으로 이벤트와 액션간의 연결 관계를 구현할 필요 없이 유저 인터페이스에 대한 조작만으로도 원하는 컴포넌트의 이벤트와 액션간 연결을 설정 할 수 있다.

도 9는 본 발명의 일 실시 예에 따른 제2 화면(120)의 액션 리스트를 설명하기 위한 도면이다.

도 9를 참조하면, 애플리케이션 개발 환경 제공 장치(100)는 이벤트와 액션간의 일대일 관계를 제2 화면(120)에서 화살표 이미지로 나타낼 수 있으나, 이는 한 번의 이벤트에 대응하여 많은 컴포넌트들의 액션을 실행하게 하는 데에는 제약이 따를 수 있다.

따라서, 본 발명의 실시 예에 따르면, 이를 해결하기 위해 제2 화면(120)은 액션 리스트 컴포넌트 블록(125)을 더 포함할 수 있다. 액션 리스트 컴포넌트 블록(125)은 하나의 이벤트에 대응하여 다수의 액션을 수행하기 위해 컴포넌트 사이에 삽입되는 중간 컴포넌트를 의미할 수 있다.

예를 들어, 개발자는 액션 리스트 컴포넌트 블록(125)을 생성하고, 한 번의 이벤트(onClink)에 대응하여 액션 리스트 컴포넌트 블록(125)의 execute 액션이 실행되도록 화살표 이미지를 연결함으로써 복수의 이벤트들(event1~event9)이 발생되도록 연결 관계를 설정할 수 있다. 그리고, 개발자는 각 복수의 이벤트들(event1~event9)에 의해 실행될 컴포넌트 및 액션을 다시 화살표 이미지를 이용하여 지정할 수 있다. 도 9에서는 event1에 대응하여 panel1 컴포넌트의 hide 액션이 수행되며, evnet2에 대응하여 messagebox1의 show 액션이 수행되도록 설정된 것을 나타내고 있다.

그리고, 애플리케이션 개발 환경 제공 장치(100)는 도 9 하단과 같이 제2 화면(120)에서 설정된 연결 관계가 애플리케이션에서 실행될 수 있도록 중간 언어로 구성된 코드를 생성할 수 있다.

이에 따라, 단말기(300)에서 어플리케이션이 실행되면, 제2 화면(120)에서 설정된 연결 관계에 의해, 사용자가 Button1을 Click하였을 때, panel1을 hide하고 messagebox1을 show하는 동작이 수행되게 된다.

한편, 도 10는 본 발명의 다른 일 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)의 컴포넌트 블록 표시 및 연결관계 표시 방법을 나타낸다.

도 10을 참조하면, 애플리케이션 개발 환경 제공 장치(100)는 페이지 화면(130)과 함께 상기 페이지에 포함된 컴포넌트 블록들을 나타내는 컴포넌트 블록 화면(140)을 표시할 수 있다.

페이지 화면(130)은 각각의 컴포넌트들에 의해 구현된 페이지 이미지를 나타낼 수 있다.

그리고, 컴포넌트 블록 화면(140)은 컴포넌트와 이벤트 및 액션간의 연결 관계를 트리 구조로 나타낼 수 있다. 각 컴포넌트들은 1 depth로 표시될 수 있으며, 각각의 컴포넌트의 하위 depth에는 그 컴포넌트가 포함하는 액션들이 위치할 수 있다. 이에 따라, 개발자는 원하는 컴포넌트와 액션을 용이하게 선택할 수 있다.

그리고, 선택된 컴포넌트 또는 액션의 속성 정보가 컴포넌트 블록 화면(140)의 상단에 표시될 수 있다. 속성 정보는 각 컴포넌트 또는 액션의 식별 정보, 데이터 연결 정보 및 각 액션과 연결된 이벤트 정보를 포함할 수 있다.

그리고, 이와 같은 컴포넌트 블록 화면(140)과 페이지 화면(130)은 앞서 설명한 제2 화면(120)에 대응될 수 있다. 따라서, 애플리케이션 개발 환경 제공 장치(100)는 동일한 어플리케이션을 제2 화면(120) 또는 컴포넌트 블록 화면(140)과 페이지 화면(130) 중에서 선택하여 표시할 수 있다. 이를 위해, 애플리케이션 개발 환경 제공 장치(100)는 컴포넌트의 연결 관계 표시 방법에 대한 설정 메뉴를 제공할 수도 있다.

이와 같은 이벤트 및 액션간 연결 설정 방식은 기존 개발환경에서의 더블클릭 및 프로시저 생성을 통한 이벤트 처리 방법과 달리, 각 컴포넌트에 포함되는 이벤트 및 액션을 선택하는 방식일 수 있다. 따라서, 개발자는 특정 버튼을 눌렀을 경우 실행하고자 하는 컴포넌트 객체 및 그 객체에 포함된 액션을 선택하기만 하면 이벤트 및 액션간 연결 설정이 완료될 수 있다.

한편, 도 59는 분기(if) 컴포넌트를 추가하여 제 2화면 구성 시 조건별로 이벤트 및 액션이 발생하였을 때 컴포넌트간의 연결 관계가 분기되는 컴포넌트 상의 설정을 하는 화면을 나타낸다.

컴포넌트의 비교 분기는 상수와 데이터베이스의 값에의 해 비교되어 분기될 수 있으며 상수 값인 경우에는 사용자가 직접 입력함을 통하여 컴포넌트 간의 분기를 실시할 수 있다. 또한 미리 정의된 상수 및 시스템 환경변수를 이용할 수 있도록 설정될 수 있다.

도 11은 본 발명의 일 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)의 컴포넌트 추가 방법을 설명하기 위한 도면이다.

도 11을 참조하면, 애플리케이션 개발 환경 제공 장치(100)는 페이지 화면(151)에 추가할 수 있는 미리 정의된 컴포넌트 리스트(150)를 표시할 수 있다. 그리고, 컴포넌트 리스트(150)는 복수의 컴포넌트 아이템들을 포함할 수 있다. 각각의 컴포넌트 아이템들은 미리 정의된 기능 또는 화면을 가지는 각 컴포넌트 코드에 대응될 수 있다.

그리고, 개발자는 이와 같은 컴포넌트 아이템들 중 어느 하나를 선택하여 드래그 앤 드랍 방식으로 페이지 화면(151)에 이동시킬 수 있다. 이에 대응하여, 애플리케이션 개발 환경 제공 장치(100)는 이동된 컴포넌트 아이템에 대응되는 코드를 애플리케이션 코드에 삽입함으로써 컴포넌트 추가를 용이하게 할 수 있다. 따라서, 개발자는 애플리케이션 개발시 컴포넌트에 대한 코드 작성 없이도 간단한 드래그 앤 드랍만으로 컴포넌트를 페이지에 추가할 수 있게 된다.

또한, 미리 정의된 컴포넌트들은 서버(200)로부터 수신 및 업데이트될 수 있다. 애플리케이션 개발 환경 제공 장치(100)는 서버(200)와 통신하여 새로운 컴포넌트들을 수신하고, 컴포넌트 리스트를 업데이트할 수 있다. 개발자는 업데이트된 컴포넌트 리스트로부터 드래그 앤 드랍으로 애플리케이션 페이지에 새로운 컴포넌트를 추가할 수 있다.

도 12은 본 발명의 일 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)의 데이터 바인딩(binding) 방법을 나타낸다.

도 12에 도시된 바와 같이, 컴포넌트는 데이터 컴포넌트(dbtable1, data_store)를 포함할 수 있다. 데이터 컴포넌트는 SQL 또는 RESTful/SOAP을 통한 웹 상의 DB와 연결할 수 있으며, 연결된 DB로부터 데이터를 수신하여 표시할 수 있는 객체를 나타낼 수 있다. 애플리케이션 개발 환경 제공 장치(100)는 데이터 컴포넌트에 대하여 DB 연결을 위한 바인딩을 제공할 수 있으며, 이에 따라 개발자는 SQL 또는 RESTful/SOAP에 대한 지식이 없이도 어플리케이션과 DB간의 데이터 바인딩을 수행할 수 있게 된다.

도 13는 본 발명의 일 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)의 관계형 데이터베이스 관리 시스템(RDBMS) 설정 방법을 나타낸다.

도 12에 도시된 바와 같이, 애플리케이션은 RDBMS와 연결될 수 있다. 따라서, 애플리케이션 개발 환경 제공 장치(100)는 RDBMS를 위한 설정 화면을 표시할 수 있다. 이를 위해, 애플리케이션 개발 환경 제공 장치(100)는 애플리케이션에 대응되는 RDBMS 설정을 위한 데이터베이스 타입 정보, 호스트 정보, 카탈로그 정보, 유저 ID 정보, 패스워드 정보, 테스트 버튼, 프록시 URL 정보, 프록시 연결 테스트 버튼 및 SecretKeySpec 정보 설정 인터페이스를 포함할 수 있다.

도 14은 본 발명의 일 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)의 오픈 API형 데이터 설정 방법을 나타낸다.

도 14에 도시된 바와 같이, 컴포넌트는 오픈 API형 데이터와 연결될 수 있다. 예를 들어, 도14에 도시된 Twitter1 컴포넌트는 SNS의 일종인 트위터의 오픈 API와 연결될 수 있다. 이에 대한 설정을 위해, 애플리케이션 개발 환경 제공 장치(100)는 트위터 아이디를 설정하기 위한 인터페이스를 더 표시할 수 있다.

도 15는 본 발명의 일 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)의 전문 Restful/SOAP 설정 방법을 나타낸다.

도 15에 도시된 바와 같이, 애플리케이션 개발 환경 제공 장치(100)는 전문적인 Restful/SOAP 설정을 위한 Restful/SOAP 설정 화면을 제공할 수 있다. 이와 같은 애플리케이션 개발 환경 제공 장치(100)를 통해 전문적인 지식이 있는 사용자의 경우에는 세부적인 클래스 모듈간 설정 및 서버와의 연결 설정을 수행할 수 있게 된다.

도 60은 본 발명의 일 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)의 데이터 바인딩 에디터의 주요 화면이다.

애플리케이션 개발 환경 제공 장치(100)의 데이터 바인딩 에디터는 종래의 개발방법으로 데이터를 바인딩하기 위해서 개발자가 파일, XML, 데이터베이스 등의 자료를 직접 액세스하여 데이터를 가공 할 수 있는 코드를 작성하고 사용자 인터페이스에 표현하는 코드를 작성하는 과정을 통하여 데이터베이스의 자료 접근 또는 처리를 수행하고 있었던 것을 단순한 사용자 행위 만으로 데이터베이스 접근 등의 데이터 바인딩을 행할 수 있도록 하는 방법을 제공한다.

또한, 애플리케이션 개발 환경 제공 장치에서 제공하는 다양한 콤포넌트와 데이터 스토어 콤포넌트 간의 연관 관계를 그래픽화 하여 아이콘을 끌어서 연결 관계를 설정하는 드래그 앤 커넥트 방식으로 콤포넌트에 데이터를 쉽고 유지보수 가능 하도록 표현 할 수 있는 방법을 제공한다.

도 61의 데이터 바인딩 에디터 화면을 보면 dbtable1 콤포넌트는 데이터스토어 콤포넌트로

기존 데이타베이스 관리시스템(DBMS)정보를 이용하여 테이블 또는 뷰 정보를 설정할 수 있도록 제공하고 있다. 데이터베이스 필드 정보는 데이터 바인딩 에디터에서 데이타베이스 에 특화하여 바인딩 가능한 필드정보를 표현하고 있다.

각 필드들은 색깔별로 구분하여 자료의 입력, 출력 필드를 표현하여 제공하며 “Label”, “ThumbListView” 등의 제공되는 콤포넌트들을 설정하여 데이터를 받아서 화면에 표현하는 부분으로 각 구성요소에 어떻게 데이터를 표현할지를 정의가능하다.

이러한 입 출력 필드를 서로 연결하여 쉽게 데이터를 개발자의 특별한 코드구현 없이 개발 가능한 방법을 제공한다.

도 62는 도 61의 데이터 바인딩을 통한 결과 화면을 나타내주고 있다.

도 63은 도 61의 데이터 바인딩을 통한 결과 화면을 위하여 XML화일로 저장된 형태를 보여주고 있다.

일면으로 종래의 기술에서 클라이언트 서버 간의 애플리케이션인 경우에는 서버개발자와의 입출력 규격에 대해서 많은 문제점들을 보유하고 있었고 데이터 정합성 검증에 많은 노력과 시간을 들이고 있었다.

애플리케이션 개발 환경 제공 장치(100)에서는 데이터 바인딩 에디터를 포함하여 검증을 위한 서버 데이터 시뮬레이션을 시행하는 방법을 제공한다.

도 64는 서버 데이터 시뮬레이터의 실시 예를 보여주고 있다. 서버 데이터 시뮬레이터는 현재 가용한 서버 콤포넌트 목록을 조회하여 해당 콤포넌트의 명세정보를 읽어 서버 시뮬레이터에서는 입,출력에 대한 데이터베이스 정보를 얻어 오게 된다. 시뮬레이터는 얻어온 입력정보를 바탕으로 서버측에 데이터를 요청하여 출력정보를 통하여 화면에 표시하고 시뮬레이션시 오류가 발생하였을 경우에는 오류 정보를 출력하게 된다.

도 65는 서버 데이터 시뮬레이터의 오류정보 발생시 오류정보 출력에 관한 화면을 표시하고 있다.

일면으로, 본 발명의 애플리케이션 개발환경 제공장치(100)는 컴포넌트 간의 연결 관계를 확인하여 애플리케이션 구조에 맞지 않게 설정되는 복수의 컴포넌트 사이의 연결 관계를 제 1화면과 제 2화면을 설정하고 이벤트나 액션을 연결하는 과정에서 잘못된 사용자의 오류를 검증하여 공지하는 방법을 제공한다.

즉, 컴포넌트의 상속구조 위와 같은 상속구조 상에서 각 컴포넌트 간의 상속 구조에 맞지 않게 설정되는 애플리케이션 프로그램들은 애플리케이션 개발 환경 제공장치에서 자동으로 체크 및 검증하여 공지 또는 자동 수정 처리하는 방법을 제공한다.

사용자는 제 1화면 또는 제 2화면에서 상속 구조 상에서 구조적으로 맞지 않는 오류의 여지가 있는 컴포넌트를 이벤트와 액션등을 활용하여 연결하기 위하여 가져올 때, 애플리케이션 개발 환경은 오류의 여지를 확인하고 사용자에게 공지 또는 자동 수정처리를 실시한다.

실시 예로 리스트 형 구조 중 "Collection" 컴포넌트의 경우 “Visual” 컴포넌트를 상속 받고 있는 콤포넌트 지만 "Container" 컴포넌트와 달리 "CollectionItem" 콤포넌트들 만을 가질 수 있는 리스트 콤포넌트의 최상위 콤포넌트로 설정이 되어 있어 각각의 “Collection” 컴포넌트는 각자 전용의 CollectionItem를 컴포넌트를 가져야 한다는 조건 등을 확인하여 이를 위반하는 경우 오류의 여지를 확인하고 사용자에게 공지하는 개발 환경을 제공한다.

도 66은 정상적으로 CollectionItem이 추가된 경우의 화면을 표시하고 있다.

도 67은 잘못된 CollectionItem을 삽입하고자 하는 경우 또는 Collection 컴포넌트가 아닌 콤포넌트에 CollectionItem을 삽입하고자 할 경우에 경고 메시지가 나오는 화면을 나타내고 있다.

이하에서는 도 16 내지 도 25를 참조하여 본 발명의 다른 일 실시 예에 따른 애플리케이션 개발 환경 제공 방법을 설명한다.

도 16는 본 발명의 다른 일 실시 예에 따른 애플리케이션 개발 환경 제공 방법을 나타낸다.

도 16를 참조하면, 먼저 본 발명의 다른 일 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)는 중간 언어로 정의되는 적어도 하나의 컴포넌트를 화면에 표시하고(S201), 컴포넌트에 지정되는 이벤트 또는 액션에 다라 상기 중간 언어로 구성된 제1 코드를 생성한다(S203).

본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)는 중간 언어로 정의되는 적어도 하나의 컴포넌트를 화면에 표시할 수 있다. 중간 언어는 애플리케이션을 타겟 단말기에 따라 적용하기 위한 XML방식의 언어를 포함할 수 있다. 또한, 중간 언어는 상술한 바와 같은 컴포넌트간 연결 관계 화면에 기초하여 생성될 수 있다. 이와 같이 본 발명의 실시 예에 따른 개발 환경 제공 장치(100)는 중간 언어를 활용함으로써 동일 어플리케이션을 다른 플랫폼에 적용하기 위한 중복 개발을 방지할 수 있다.

도 17은 본 발명의 실시 예에 따른 중간 언어와 일반적인 JAVA 코드와의 비교도이다.

도 17에 도시된 바와 같이, 코드가 많아지고 복잡해 질수록 일반적인 JAVA 코드와는 달리 중간 언어의 코드는 짧고 간결하게 작성될 수 있음을 알 수 있다. 또한, 이와 같은 중간 언어 코드는 애플리케이션 개발 환경 제공 장치(100)에서 제공되는 컴포넌트간의 연결 관계 기반 애플리케이션 개발 환경에 의해 자동적으로 작성될 수 있어 개발자의 수고를 저감시킬 수 있다. 또한, 개발 중 서비스 시나리오 변경 및 유지 보수에도 상당한 이점을 얻을 수 있다.

도 18은 중간 언어로 정의되는 컴포넌트의 XML 포맷을 나타낸다.

도 18에 도시된 바와 같이, 컴포넌트는 중간 언어로 정의된 XML 코드로 구현될 수 있다. 특히, 중간 언어는 플랫폼 중립적이어야 하며, 최종단계에서는 각 플랫폼에 최적화된 코드 생성을 필요로 한다.

따라서, 본 발명의 실시 예에 따르면 도 18에 도시된 바와 같이 중간 언어에는 XML 엘리먼트들이 정의될 수 있으며, 애플리케이션 개발 환경 제공 장치(100)는 이 XML 엘리먼트들을 이용하여 최종 빌드 단계에서 각 플랫폼에 최적화된 코드를 생성할 수 있게 된다.

도 19 내지 24은 본 발명의 실시 예에 따른 컴포넌트별 XML 코드 유형 및 이에 따른 제1 화면 또는 제2 화면의 구성을 설명하기 위한 도면이다.

도 19은 본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)에서 제공되는 기본 형태의 컴포넌트에 대한 XML코드를 나타낸다. 도 19에 도시된 바와 같이, 기본 형태의 컴포넌트는 빈 여백을 나타낼 수 있다.

도 20은 본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)에서 제공되는 헤더 컴포넌트 및 풋터(footer) 컴포넌트를 나타낸다. 도 20에 도시된 바와 같이, 헤더 컴포넌트 및 풋터 컴포넌트는 각각 페이지의 상단에 표시되는 상단 바 또는 하단에 표시되는 하단 바에 대응될 수 있다.

한편, 도 21은 본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)에서 제공되는 레이블, 텍스트박스 및 버튼 컴포넌트를 나타낸다. 도 21에 도시된 바와 같이, 각 레이블, 텍스트박스, 및 버튼 컴포넌트들은 각각 애플리케이션 페이지의 특정 위치와 XML코드에 대응될 수 있다.

그리고, 도 22은 본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)에서 제공되는 컨테이너형 컴포넌트들을 나타낸다. 도 22을 참조하면, 컴포넌트가 다른 컴포넌트를 포함하는 경우, 그 컴포넌트는 컨테이너형 컴포넌트 일 수 있다. 예를 들어, Panel1 컴포넌트는 textbox1 컴포넌트 및 button1 컴포넌트를 포함할 수 있으므로, Panel1 컴포넌트는 컨테이너형 컴포넌트일 수 있다.

한편, 도 23는 본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)에서 제공되는 리스트형 컴포넌트들을 나타낸다. 도 23를 참조하면, 예를 들어, 리스트형 컴포넌트는 복수의 컴포넌트 아이템들을 리스트로 나열하는 것을 나타낼 수 있다. 그리고, 도 23에 도시된 바와 같이, 애플리케이션 개발 환경 제공 장치(100)는 리스트 나열을 위해 리스트형 컴포넌트에 대응되는 XML코드를 생성할 수 있다.

그리고, 도 24은 본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)에서 제공되는 논 비주얼(non-visual)컴포넌트들을 나타낸다. 도 24를 참조하면, 예를 들어 컴포넌트는 존재하나, 페이지에는 표시되지 않는 컴포넌트의 경우, 그 컴포넌트는 논 비주얼 컴포넌트 일 수 있다.

한편 컴포넌트는 도 25와 같은 구조를 가질 수 있다.

도 25를 참조하면, 예를 들어, 컴포넌트는 비주얼 컴포넌트, 컨테이너 컴포넌트, 콜렉션 컴포넌트 및 논비주얼 컴포넌트를 포함할 수 있다.

비주얼 컴포넌트는 일반적인 유저 인터페이스 컴포넌트(버튼, 라벨, 텍스트박스 등)를 의미할 수 있으며, 컨테이너 컴포넌트는 비주얼 컴포넌트를 포함하는 유저 인터페이스 컴포넌트(폼, 헤더, 풋터, 패널)를 의미할 수 있다. 그리고, 콜렉션 컴포넌트는 리스트를 표현하는 유저 인터페이스 컴포넌트(리스트뷰, 커버플로우, 네비게이션 바)를 의미할 수 있으며, 논비주얼 컴포넌트는 화면에 바로 보이지는 않지만 특정행위 또는 데이터 처리를 담당하는 컴포넌트(타이머, 링크, 메시지박스, db테이블)일 수 있다.

이와 같은 각 컴포넌트들은 이에 대응되는 XML 형식의 중간 언어로 구성될 수 있다. 그리고, 컴포넌트에 지정되는 이벤트 또는 액션에 따라 상기 중간 언어로 구성된 제1 코드는 타겟 플랫폼에 대응되는 제2 코드로 변환된다(S205).

이와 같이 중간 언어로 구성된 컴포넌트는 XML의 형태를 가질 수 있다. 예를 들어, 각 컴포넌트는 XML의 노드 단위를 나타낼 수 있다. 그리고, 각 컴포넌트는 qname 및 id attribute를 통해 선언 될 수 있다. qname의 prefix는 namespace를 의미할 수 있으며, name은 컴포넌트 명을 가질 수 있다. 그리고, id attribute는 하나의 페이지에서 유일한 값을 가질 수 있으며, 영문자로 시작하되, 영문자와 숫자간 조합을 가질 수도 있다.

한편, 중간 언어의 최 상위 노드는 페이지를 나타낼 수 있다. 이에 따라, qname의 prefix는 페이지 엘리먼트의 xmlns: attribute에서 선언될 수 있다.

그리고, 한 화면을 구성하는 페이지는 한 개의 파일 단위로 존재할 수 있고, 각각의 페이지의 id 엘리먼트는 모든 페이지들에서 유일한 값을 가질 수 있다.

이와 같은 컴포넌트들의 액션 및 이벤트들은 각 선언된 컴포넌트 엘리먼트의 child 엘리먼트로 포함될 수 있다. 예를 들어, 컨테이너 컴포넌트는 비주얼 컴포넌트를 child 엘리먼트로 포함시킬 수 있다. 또한, 컬렉션 컴포넌트는 자신이 포함 가능한 아이템 컴포넌트를 아이템 엘리먼트의 형태로 포함할 수 있다. 그리고, 모든 컴포넌트들은 이벤트 및 액션 중 적어도 하나를 포함할 수 있다.

도 26는 애플리케이션 개발 환경 제공 장치(100)가 타겟 단말기(300)에 구동 가능한 제2 언어로 변환하여 출력한 애플리케이션이 타겟 단말기(300)에서 실행된 화면을 나타낸다.

본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)는 중간 언어로 작성된 코드를 타겟 디바이스에 적합한 제2 언어로 변환할 수 있다. 예를 들어, 본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)는 iOS시리즈, Android시리즈, 타이젠 OS 등으로 중간 언어에서 제2 코드로의 직접 변환을 수행할 수 있다. 따라서, 개발 효율을 극대화 할 수 있게 된다.

또한, 본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)는 타겟 플랫폼에 따른 시뮬레이션 화면을 애플리케이션 개발 환경과 함께 제공할 수 있다. 이에 따라 개발자는 선택된 디바이스에서 구동되는지 여부를 미리 판단할 수 있게 된다.

한편, 도 27 및 도 28은 본 발명의 다른 일 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)에서 제공되는 제2 화면의 컴포넌트 배치 방법을 나타낸다.

본 발명의 다른 일 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)는 컴포넌트의 표시 및 각 이벤트 및 액션간의 연결 관계를 효과적으로 표시하기 위해, 컴포넌트 객체의 상단 영역에는 컴포넌트 객체의 인스턴스명, 객체명 및 아이콘을 배치할 수 있다. 이에 따라 컴포넌트의 구분이 용이하게 될 수 있다. 이는 도 27에 나타나 있다.

여기서, 컴포넌트 객체 내 일측에는 박스 형태의 액션을 배치할 수 있으며, 타측에는 박스 형태의 이벤트들을 배치할 수 있다. 그리고, 각 이벤트에서 액션으로 연결되는 연결 관계는 화살표 이미지의 방향으로 표시할 수 있다. 이에 따라 개발자는 일측에서부터 타측으로 이어지는 자연스러운 애플리케이션의 동작 흐름을 파악할 수 있게 된다.

한편, 본 발명의 다른 일 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)는 컴포넌트의 표시 및 각 이벤트 및 액션간의 연결 관계를 효과적으로 표시하기 위해, 각 컴포넌트들을 정렬하여 표시할 필요성이 있다.

도 28에 도시된 바와 같이, 이와 같은 컴포넌트의 정렬을 위해 애플리케이션 개발 환경 제공 장치(100)는 최상위 폼 페이지를 왼쪽 상단 1순위로 배치하고, 버튼 및 메뉴 항목들을 2순위로 배치하며, 상기 버튼 및 메뉴 항목에 대응되는 링크(화살표 이미지)들을 3순위로 배치하고, 헤더와 풋터와 같은 이벤트에 대해 자주 사용되지 않는 항목들은 최하순위로 배치할 수 있다.

이와 같은 배치를 통해 도 28에 도시된 바와 같이, 왼쪽에서 오른쪽으로 이어지는 각 컴포넌트의 배치 흐름에 용이하게 될 수 있으며, 개발자가 일일이 컴포넌트를 재 배치해야 하는 수고를 저감시킬 수 있게 된다.

한편, 도 29는 본 발명의 또 다른 일 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)의 레이아웃 방법을 나타낸다.

기존의 하이브리드 앱 개발 도구들은 다양한 해상도를 지원하지 못하는 문제점이 있었다. 특히, 기존의 WYSWYG 지원 앱 개발 도구들은 개발자의 드래그 앤 드롭을 통해 레이아웃 좌표를 적용하기 위해 X, Y 좌표만을 이용하여 UI컴포넌트를 배치 설계하고 있다. 그러나, 이는 단말의 해상도가 조금이라도 바뀌거나 가로 모드로 변경되면 이에 맞는 별도 화면을 각각 개발해야 하는 문제점이 있었다.

따라서, 도 29를 참조하면, 본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)는 블록단위를 이용하여 어떤 단말기든 어떤 해상도이든 동일하게 표현 될 수 있는 블록레이아웃 방식을 사용할 수 있다.

블록레이아웃 방식은 화면을 각 UI컴포넌트를 이용하여 배치하는 경우, X, Y의 좌표정보를 이용하는 것이 아니라, 컨테이너 컴포넌트를 기준으로 상하좌우에 정렬하는 방식을 의미할 수 있다. 이 경우, 해상도가 변경되어도 각 컴포넌트들은 항상 상하좌우 위치를 고수하게 되어 타겟 단말기마다 동일한 레이아웃을 표현할 수 있게 된다.

또한, 연속된 컴포넌트가 배열된 경우, 예를 들어, 버튼1, 버튼2 및 버튼 3을 배치하는 경우에, 각 버튼들의 사이즈만 정의하더라도 화면이 로테이션 되거나 해상도가 다른 디바이스에서도 동일한 레이아웃이 표현될 수 있다.

도 29 내지 도 31은 이와 같은 블록 레이아웃의 실시 예들을 나타낸다.

예를 들어, 도 29과 같이, 각 컴포넌트들 중 최상단에 헤더, 중간단에 패널1 및 하단의 풋터가 순차적으로 배치될 수 있다. 폼, 헤더, 풋터 및 패널들은 컨테이너 컴포넌트로서의 역할을 수행할 수 있고, 각 컨테이너들은 상하 배치를 담당할 수 있게 된다.

도 30는 본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)가 텍스트박스 컴포넌트 및 버튼 컴포넌트에 대한 X,Y 좌표정보 없이 애플리케이션을 생성하는 방법을 설명하기 위한 도면이다.

도 30를 참조하면, 본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)는 X, Y 좌표 정보 없이 텍스트박스 컴포넌트 및 버튼 컴포넌트에 대한 width 및 height를 설정할 수 있다. 이 경우, 실제 화면에서 표시되는 경우에는 텍스트박스를 먼저 배치하고 바로 오른 쪽에 버튼을 두게 되어 있어 애플리케이션 개발 환경에 의해 제작된 애플리케이션 들은 X, Y 좌표변환 없이도 각 단말기에 적합한 해상도로 변환될 수 있다.

도 31은 본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)의 컴포넌트 배치 방법을 나타낸다.

도 31에 도시된 바와 같이, 본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)는 페이지상의 하단 풋터 영역에 네비게이션 컴포넌트를 배치할 수 있다. 이 경우, 컨테이너 형식의 네비게이션 컴포넌트에 대해, 애플리케이션 개발 환경 제공 장치(100)는 그 Child 컴포넌트들을 타겟 단말기(300)의 해상도에 따라 크기 변경을 수행할 수 있다. 그리고, 크기 변경된 Child 컴포넌트들은 화면에 꽉 차도록 표시될 수 있다.

한편, 도 32은 애플리케이션 개발 환경 제공 장치(100)의 플랫폼을 도식화한 블록도이며, 도 33는 애플리케이션을 실행할 수 있는 단말기(300)의 플랫폼을 도식화한 블록도이고, 도 34은 서버(300)의 아키텍쳐를 나타내는 블록도이다.

본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)는 각각의 개발자 기호 및 목적에 따서 다양한 deploment방식을 지원할 수 있으며, 이를 위해 다양한 시스템 프레임워크를 탑재할 수 있다. 본 발명의 실시 예에 따르면, iOS의 경우, xarchive, ipa, Xcode project 3가지 타입 지원 및 인증서 signing까지 자동화를 지원할 수 있다. 그리고, Android의 경우 apk, ADT project 2가지 타입 지원 및 인증서 생성 및 signing까지 자동화를 지원할 수 있고, Data Server를 통해 WAR 패키징 및 ftp를 통한 서버 업로드를 지원할 수 있다.

한편, 본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)는 진정한 의미의 Once Source, Multi Platform을 구현하기 위해, Webkit 엔진 내장 및 OSX, Linux, Windows에도 모두 동일하게 개발될 수 있도록 설계될 수 있다. 한편, 애플리케이션 개발 환경 제공 장치(100)는 eclipse와는 차별화 하여 개발자로 하여금 별도의 설정 및 WAS와 같은 별도의 개발자적 설치사항이 필요하지 않도록 애플리케이션 개발 환경을 제공할 수 있다. 또한, JVM 및 Webkit의 내장으로 별도의 연관된 설치 및 설정이 전혀 필요 없게 된다.

도 35는 본 발명의 실시 예에 따른 컴포넌트 구조도를 나타낸다.

도 35를 참조하면, 컴포넌트는 가상 컴포넌트를 포함할 수 있으며, 하위 단계에 비주얼 컴포넌트 및 논비주얼 컴포넌트를 포함할 수 있다. 그리고, 비주얼 컴포넌트는 라벨, 버튼, 텍스트박스, 텍스트뷰, 콤보박스, 텍스트 영역, 이미지뷰, 차트, 구글맵, 미디어 또는 임베디드 컴포넌트 중 적어도 하나를 포함할 수 있으며, 그 하위 단계에 컨테이너 컴포넌트 및 콜렉션 컴포넌트를 포함할 수 있다.

컨테이터 컴포넌트는 애플리케이션, 폼, 헤더, 풋터, 패널, 레이아웃 패널, 수직 패널, Accordion, 프레임 스플리터, 프레임 컨테이너 및 프레임 중 적어도 하나를 포함할 수 있고, 컬렉션 컴포넌트는 이미지슬라이드 뷰, 커버 플로우, 아이콘리스트 뷰, 썸네일리스트 뷰, 네비게이션 바 리스트 뷰, 리스트 뷰, 멀티 리스트 뷰 및 캘린터 리스트 뷰 컴포넌트 중 적어도 하나를 포함할 수 있다.

한편, 논비주얼 컴포넌트는 로딩 바, 타이머, 날짜시간, DBinsert/Update/Delete, 링크, 웹링크, 메시지박스, 액션리스트, 변수, 로그인 및 doc뷰어 컴포넌트중 적어도 하나를 포함할 수 있으며, 하위레벨에 데이터스토어 컴포넌트를 포함할 수 있다. 데이터스토어 컴포넌트는 DB관련하여, DB테이블, 웹 앱 모듈, Rss, Assets, 파일리스트, 폼데이터스토어, 앱데이터스토어, GPS, 컴파스 및 배터리 컴포넌트 중 적어도 하나를 포함할 수 있다.

이하에서는 도 36 내지 도 53을 참조하여 본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 방법에 따라 제공되는 화면들을 이용하여 애플리케이션이 생성되는 과정을 설명한다.

도 36는 본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공을 위한 프로젝트 생성 화면을 나타낸다. 도 36에서 개발자는 파일 메뉴의 새로 만들기를 클릭함으로써, 제작하고자 하는 프로젝트에 대한 선택을 수행할 수 있다.

이후, 도 37과 같이 개발자가 새로운 프로젝트를 선택하고자 하는 경우 복수의 템플릿을 제공하는 화면이 표시될 수 있다. 특히, 템플릿 외에도 function 및 tablet이 제공될 수 있으며, 개발자가 Default를 선택하는 경우 템플릿 없이 임의로 원하는 프로젝트 제작에 착수할 수 있는 인터페이스를 제공할 수 있다. 그리고, 개발자가 복수의 템플릿 중 특정 템플릿을 선택하는 경우, 기본적인 구성이 미리 설정된 템플릿에 기초하여 새로운 프로젝트를 생성할 수 있다.

그리고, 도 38에서는 프로젝트 생성을 위한 라이선스 유효성 검증 화면을 나타내고 있다. 서버(200) 또는 애플리케이션 개발 환경 제공 장치(100)는 사용자, 비밀번호 및 호스트 URL입력에 기초하여 프로젝트 생성을 위한 라이선스가 있는지를 확인할 수 있다. 그리고, 애플리케이션 개발 환경 제공 장치(100)는 구매 인증되거나 또는 ASP 서비스로 이용함이 확인되는 경우에만 유효하게 다음 단계로 이동하도록 제한할 수 있다.

도 39은 프로젝트 정보 설정 화면을 나타낸다. 프로젝트 정보 설정 화면은 애플리케이션 개발을 위한 프로젝트의 명칭, 어플명, 아이디 및 프로젝트 버전을 설정할 수 있다.

도 40는 본 발명의 실시 예에 따른 제1 화면을 포함하는 어플리케이션 개발 환경을 나타낸다. 특히, 제1 화면은 도 39의 sitemap 에디터 창에 대응될 수 있다. 도 40에서는 앞서 선택된 RSS 템플릿에 의해 미리 생성된 기본 Home 페이지가 생성되어 있으며, 활성화 되어 있음을 나타내고 있다.

도 41은 제1 화면에 새로운 페이지가 추가된 것을 나타낸다. 앞서 설명한 바와 같이, 본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)는 드래그 앤 드랍을 이용하여 페이지를 추가할 수 있다. 예를 들어, 도 41과 같이 sitemap 에디터 창 우측 palette에 포함된 Form 페이지 아이콘을 제1 화면으로 드래그 앤 드랍함으로써 Form 페이지가 추가될 수 있다.

도 42은 Form 페이지의 속성값 변경을 통해 페이지의 ID를 RSSpage로 변경하는 것을 나타낸다. 개발자는 속성 창에 표시된 입력 인터페이스를 통하여 각 페이지별 속성값 변경을 수행할 수 있다.

그리고, 도 43는 Home 페이지와 RSSpage 사이의 연결을 수행하는 것을 나타낸다. 도 43에 도시된 바와 같이, 개발자는 link를 클릭 후, 먼저 연결 시작 페이지인 Home 페이지 아이콘을 클릭하고, 이후 연결 대상 페이지인 RSSpage 페이지 아이콘을 클릭함으로써 페이지간 연결이 수행될 수 있다. 연결이 수행되면 제1 화면에는 각 페이지간의 연결 관계가 앞서 설명한 화살표 이미지로 표시될 수 있다.

도 44은 Home 페이지에 컴포넌트를 추가하기 위한 화면을 나타낸다. 예를 들어, 애플리케이션 개발 환경 제공 장치(100)는 도 43의 에디터 상에서 select 클릭 및 이에 따른 Home 페이지 더블 클릭에 따라, 컴포넌트 추가 화면을 표시할 수 있다. 도 44과 같이, 추가 가능한 컴포넌트의 종류는 예를들어 Basic, Time, ListView, Layout, Database, DataStore, Forms, Extention, Platform, Tablet, Charts, Rules 및 Unofficials 중 적어도 하나를 포함할 수 있다.

한편, 도 45는 Home 페이지에 RSS_CNN 버튼 컴포넌트가 생성된 것을 나타낸다. 예를 들어, Basic 종류의 컴포넌트 중 Button 컴포넌트가 드래그 앤 드랍되어 Home 페이지에 추가될 수 있으며, 속성 창에서 ID값이 RSS_CNN값으로 변경됨으로써 도 45와 같은 RSS_CNN 버튼 컴포넌트가 생성될 수 있다. 또한, 속성의 Style 탭에서 size값 변경을 수행하여 RSS_CNN 버튼 컴포넌트를 적당한 크기로 변경할 수 있다.

그리고, 도 46는 Home 페이지에 포함된 각 컴포넌트간 연결 관계를 나타내는 제2 화면을 표시하고, RSS_CNN 버튼 컴포넌트를 link_RSSpage 컴포넌트와 연결시키는 것을 나타낸다. 제2 화면으로의 전환은 하단의 Workflow 탭 선택으로 이루어질 수 있다. 그리고, 우측 flow창의 아이콘들을 드래그 앤 드랍함으로써 RSS_CNN 버튼의 onClick 이벤트와 link_RSSpage의 move 액션을 연결시킬 수 있다. 이에 따라 컴포넌트간 연결 관계가 화살표 이미지로 표시될 수 있으며, 이와 같은 링크 연결을 통해 Home 페이지에서의 RSS_CNN버튼이 클릭되면 RSSpage 페이지로 이동되도록 설정될 수 있다.

도 47은 RSSpage 페이지의 컴포넌트 추가 화면을 나타낸다. 도 47과 같이, RSS page 페이지로 ThumbListView를 드래그 앤 드랍 하여 RSSpage에 이동하면, 미리 설정된 썸네일 리스트 뷰 컴포넌트가 RSS page의 페이지 화면에 표시될 수 있다.

도 48은 RSSPage 페이지에 대한 컴포넌트간 연결 관계 화면을 나타낸다.

도 48에 도시된 바와 같이, RSSpage 가 초기화 될 때에 발생하는 onInit이벤트와 RSS Data를 가져오는 Bind 액션이 연결될 수 있다. 이는 앞서 설명한 바와 마찬가지로 flow를 클릭하여 RSS page form 컴포넌트의 onInit 이벤트와 rss1 컴포넌트의 bind를 연결 함으로서 즉시 수행될 수 있다.

도 49은 RSSpage 페이지의 RSS컴포넌트에 대한 데이터 바인딩을 위한 화면을 나타낸다.

도 49과 같이, 애플리케이션 개발 환경 제공 장치(100)는 RSS 데이터 값들을 페이지 상에서 보여주는 화면을 표시할 수 있다. 또한, 애플리케이션 개발 환경 제공 장치(100)는 RSS data 값들이 ThumbListView 컴포넌트의 어느 위치에 대응될 것인지를 결정할 수 있으며, rss1에 자동으로 형성된 값들을 ThumbListView의 대응 리스트 값에 할당할 수 있다.

그리고, 도 50는 완성된 애플리케이션을 다양한 플랫폼에 맞게 변환하기 위한 내보내기 화면을 나타낸다. 앞서 설명한 바와 같이, 완성된 애플리케이션은 중간 언어로 구성될 수 있으며, 타겟 OS에 따라 제2 언어로 변환될 수 있다. 따라서, 내보내기 화면은 이와 같은 제2 언어를 선택할 수 있도록 하는 선택 화면을 제공할 수 있다. 예를 들어, 내보내기 선택 대상은 안드로이드 프로젝트, Xcode 프로젝트, 윈도우폰, 타이젠 중 어느 하나일 수 있다.

도 68은 기존의 타겟 OS에 따라 제2 언어로 변환될 수 있을 뿐 아니라 일면으로 웹킷(WebKit) CSS(Cascade Style Sheet)을 지정하면 HTML5형식을 포함하여 각 브라우져에 맞도록 변환하는 방법을 제공하는 화면이다. 최근 안드로이드, iOS뿐 아니라 Windows8 IE, Tizen, Ubuntu, Mozilla, Opera등의 새로운 플랫폼들이 속속들이 선보임에 따라서 이전에 작성한 HTML애플리케이션의 CSS 호환성의 문제점을 해결하고 각기 다른 웹브라우져 플랫폼들은 서로 표준화되지 않고 호환되지 않는 CSS를 이용하고 있어 개발자들의 각 웹 플랫폼에 맞도록 CSS를 사용하여야 하는 문제점을 해결하기 위하여 기존의 웹킷(Webkit) CSS만 입력하면, 플랫폼 뿐 아니라 각 브라우저에 맞도록 변환하여 개발할 수 있는 방법을 제공한다.

도 51은 안드로이드 프로젝트를 선택한 경우 패키지 생성화면을 나타낸다. 이 경우, 애플리케이션 개발 환경 제공 장치(100)는 안드로이드 마켓 어플리케이션(apk) 자체를 생성하거나 안드로이드 개발을 위한 프로젝트 자체를 생성할 수 잇는 선택 메뉴를 표시할 수 있다. 프로젝트 자체를 생성하는 경우에는 안드로이드 앱 개발을 위한 다른 툴에서도 애플리케이션 수정이 가능하게 되는 장점이 있다.

도 52는 해당 어플리케이션에서 실제로 동작하는지를 확인하기 위한 시뮬레이터 동작 화면을 나타내며, 도 53은 최종 애플리케이션이 변환 출력되고, 스마트 디바이스로 전송되어 동작하는 스마트 디바이스의 화면을 나타낸다.

도 53에 도시된 바와 같이, 스마트 디바이스에서는 앞서 생성한 RSS_CNN 버튼을 home 페이지에서 클릭하면 Form1 페이지(RSSpage)로 이동되며, Form1 페이지 기동에 따라 데이터 바인딩된 웹상의 DB로부터 RSS데이터를 수신하여 썸네일 리스트 뷰 컴포넌트에 표시할 수 있는 애플리케이션이 동작하게 된다.

이와 같이 본 발명의 실시 예에 따른 애플리케이션 개발 환경 제공 장치(100)는 애플리케이션 개발에 있어서, 각종 다양한 코드 언어에 대한 전문적인 지식 없이도, 단순 클릭 및 드래그 앤 드랍만으로 다양한 플랫폼에 대한 용이한 어플리케이션 개발이 가능하게 된다.

상술한 본 발명에 따른 애플리케이션 개발 환경 제공 방법은 컴퓨터에서 실행되기 위한 프로그램으로 제작되어 컴퓨터가 읽을 수 있는 기록 매체에 저장될 수 있으며, 컴퓨터가 읽을 수 있는 기록 매체의 예로는 ROM, RAM, CD-ROM, 자기 테이프, 플로피디스크, 광 데이터 저장장치 등이 있으며, 또한 캐리어 웨이브(예를 들어 인터넷을 통한 전송)의 형태로 구현되는 것도 포함한다.

컴퓨터가 읽을 수 있는 기록 매체는 네트워크로 연결된 컴퓨터 시스템에 분산되어, 분산방식으로 컴퓨터가 읽을 수 있는 코드가 저장되고 실행될 수 있다. 그리고, 상기 방법을 구현하기 위한 기능적인(function) 프로그램, 코드 및 코드 세그먼트들은 본 발명이 속하는 기술분야의 프로그래머들에 의해 용이하게 추론될 수 있다.

또한, 이상에서는 본 발명의 바람직한 실시예에 대하여 도시하고 설명하였지만, 본 발명은 상술한 특정의 실시예에 한정되지 아니하며, 청구범위에서 청구하는 본 발명의 요지를 벗어남이 없이 당해 발명이 속하는 기술분야에서 통상의 지식을 가진 자에 의해 다양한 변형 실시가 가능한 것은 물론이고, 이러한 변형 실시들은 본 발명의 기술적 사상이나 전망으로부터 개별적으로 이해 되어서는 안될 것이다.을 설명하기 위하여 참조되는 도면들이다.

Claims (15)

1. 폼 페이지를 두 개 이상의 페이지로 분리하여 저장하는 단계;
   개발 대상 애플리케이션의 식별 정보, 버전 정보, 개발자 정보, 인증정보, 이미지 정보, 데이터베이스 연결 정보, 서버 연결 정보, 모듈 정보 및 소스정보를 하나 이상 입력하기 위한 애플리케이션 프로젝트 설정 화면을 표시하는 단계;
   상기 애플리케이션 프로젝트 설정 화면 상에 개발 대상 애플리케이션의 식별 정보, 버전 정보, 개발자 정보, 인증정보, 이미지 정보, 데이터베이스 연결 정보, 서버 연결 정보, 모듈 정보 및 소스정보가 하나 이상 입력되면, 입력된 정보에 부합되는 애플리케이션 프로젝트를 생성하는 단계;
   애플리케이션을 구성하는 복수의 페이지 이미지와 상기 복수의 페이지 이미지를 연결하는 복수개의 화살표 이미지를 통해 상기 애플리케이션을 구성하는 복수의 페이지 이미지 사이의 연결관계를 나타내는 페이지 간 연결 영역과 상기 페이지 간 연결 영역 상에 페이지를 추가하고, 페이지들 간 연결 관계를 설정하기 위한 폼 탭 영역을 포함하는 제1화면을 표시하는 단계;
   상기 복수의 페이지들 중 어느 하나에 대하여 각 페이지 내에서 각 화면 또는 기능을 담당하는 복수의 컴포넌트들의 사이의 연결관계를 나타내는 제2 화면을 표시하는 단계;
   하나 이상의 데이터베이스에 대응하는 아이콘을 드래그 앤 커넥트 방식으로 연결하여, 데이터베이스 및 데이터 바인딩을 위한 연관 관계를 그래픽컬하게 나타내는 제3 화면을 표시하는 단계;
   상기 제2 화면에서 이벤트 정보를 포함하는 제1 컴포넌트와 액션 정보를 포함하는 제2 컴포넌트가 화살표로 연결되면, 상기 연결되는 제1 컴포넌트와 제2 컴포넌트 간 구조적인 연결 오류를 검증하는 단계;
   검증결과, 오류가 발견되면, 오류 정보를 화면에 표시되도록 하고, 오류가 발견되지 않으면, 상기 제1컴포넌트와 제2컴포넌트간 연결에 대응하는 중간언어로 구성된 제1코드를 생성하는 단계;
   상기 애플리케이션이 설치되는 타겟 브라우저를 선택하기 위한 선택 화면을 표시하는 단계;
   상기 선택 화면을 통해 선택된 타겟 브라우저가 구동되는 단말기의 해상도 정보를 식별하는 단계;
   상기 해상도 정보 및 상기 제2화면에 표시된 적어도 하나의 컴포넌트의 배치 상태에 대응하는 배치 정보에 기초하여 상기 컴포넌트들의 레이아웃을 결정하는 단계; 및
   상기 결정된 레이아웃에 따라 상기 제1 코드를 상기 제2 코드로 변환하는 단계;를 포함하는 애플리케이션 개발 환경 제공 방법.
2. 제1항에 있어서,
   상기 제2 화면을 표시하는 단계는,
   상기 이벤트 정보와 상기 액션 정보 사이의 연결 관계를 표시하는 단계를 포함하는 애플리케이션 개발 환경 제공 방법.
3. 제1항에 있어서,
   상기 이벤트 정보는 복수의 이벤트 아이템을 포함하고,
   상기 복수의 이벤트 아이템 중 적어도 하나는 상기 제2 컴포넌트에 연결되는 애플리케이션 개발 환경 제공 방법.
4. 제1항에 있어서,
   상기 액션 정보는 복수의 액션 아이템을 포함하고,
   상기 복수의 이벤트 아이템 중 적어도 하나는 상기 복수의 액션 아이템 중 어느 하나와 연결되는 애플리케이션 개발 환경 제공 방법.
5. 제1항에 있어서,
   상기 표시된 제1 화면은 상기 복수의 페이지들 사이의 연결 관계를 방향성을 가지는 이미지 객체로 나타내는 애플리케이션 개발 환경 제공 방법.
6. 제5항에 있어서,
   상기 이미지 객체가 변형 또는 삭제됨에 따라 상기 복수의 페이지들 사이의 연결 관계가 변경되는 애플리케이션 개발 환경 제공 방법.
7. 제1항에 있어서,
   상기 복수의 페이지들 중 특정 페이지의 세부 정보를 표시하는 단계를 더 포함하고,
   상기 세부 정보는 상기 특정 페이지에 포함된 컴포넌트들에 대한 식별 정보 및 상기 특정 페이지에서 선택된 컴포넌트에 대한 속성 정보를 포함하는 애플리케이션 개발 환경 제공 방법.
8. 제7항에 있어서,
   상기 속성 정보는 상기 선택된 컴포넌트에 대한 기본 정보, 데이터 연결 정보, 스타일 정보 및 이벤트 정보 중 적어도 하나를 포함하는 애플리케이션 개발 환경 제공 방법.
9. 제1항에 있어서,
   상기 표시된 제2 화면은 상기 복수의 컴포넌트들 사이의 연결 관계를 방향성을 가지는 이미지 객체로 나타내며, 상기 이미지 객체가 변형 또는 삭제됨에 따라 상기 복수의 컴포넌트들 사이의 연결 관계가 변경되는 애플리케이션 개발 환경 제공 방법.
10. 제1항에 있어서,
    상기 제2 컴포넌트 및 상기 액션 정보간의 관계를 나타내는 구조 화면을 표시하는 단계를 더 포함하는 애플리케이션 개발 환경 제공 방법.
11. 제1항에 있어서,
    상기 중간 언어는, 복수의 컴포넌트 사이에 지정되는 이벤트 또는 액션간 연결관계 화면에 기초하여 생성되며, 상기 컴포넌트 및 상기 컴포넌트에 지정된 이벤트 또는 액션을 나타내는 복수의 엘리먼트 코드들을 포함하는 애플리케이션 개발 환경 제공 방법.
12. 제1항에 있어서,
    상기 중간 언어는, 상기 컴포넌트간 상대적인 배치 정보를 포함하며, 상기 배치 정보는 화면에 표시된 적어도 하나의 컴포넌트의 배치 상태에 따라 결정되는 애플리케이션 개발 환경 제공 방법.
13. 제1항에 있어서,
    테블릿 전용 애플리케이션 개발시, 테블릿 전용을 위한 프레임을 구분하여 출력하는 단계를 더 포함하는 애플리케이션 개발 환경 제공 방법.
14. 제1항에 있어서,
    분기 컴포넌트를 추가하여 화면 구성 시, 조건별로 이벤트 및 액션이 발생하였을 때 컴포넌트간의 연결 관계가 분기되도록 컴포넌트를 설정하는 단계를 더 포함하는 애플리케이션 개발 환경 제공 방법.
15. 제1항에 있어서,
    클라이언트/서버 간의 애플리케이션인 경우, 서버 측 입출력 규격을 확인하는 데이터 정합성 검증단계를 더 포함하는 애플리케이션 개발 환경 제공 방법.
    
    
    
    
    
    
    
    
    
    

Images