KR20190005437A - 프론트-앤드 개발을 지원하는 앱 저작 장치, 앱 저작 도구를 사용한 앱 저작 방법 및 앱 개발 서버 - Google Patents

Abstract

본 발명에 따르는, 프론트-앤드 개발을 지원하는 앱 저작 장치는, 앱 저작 프로그램이 저장된 메모리 및 상기 메모리에 저장된 프로그램을 실행하는 프로세서를 포함하되, 상기 프로세서는 상기 프로그램의 실행에 따라, 사용자의 요청에 의해, 적어도 하나의 액티비티를 생성하고, 사용자가 입력한 적어도 하나의 앱 디자인 콘텐츠로부터 상기 각 콘텐츠 내의 오브젝트를 식별하고, 상기 사용자의 요청에 따라, 상기 적어도 하나의 앱 디자인 콘텐츠, 상기 오브젝트 및 상기 오브젝트에 대응하여 정의된 상태 정보에 기초하여 복수의 스테이지를 생성하고, 상기 복수의 스테이지 간의 전환 및 복수의 액티비티 간의 전환 중 적어도 하나에 대응하는 이벤트를 생성하고, 상기 액티비티, 상기 오브젝트, 상기 상태 정보, 상기 복수의 스테이지 및 상기 이벤트에 관한 소스 코드 정보를 미리 정해진 소스 코드 템플릿에 적용하여 사용자에게 앱의 소스 코드를 제공한다. 이때, 상기 액티비티는 상기 오브젝트, 상기 상태 정보, 상기 스테이지를 포함하는 것으로서, 하나의 주제를 갖는 하나의 장면일 수 있다.

Description

프론트-앤드 개발을 지원하는 앱 저작 장치, 앱 저작 도구를 사용한 앱 저작 방법 및 앱 개발 서버{APPARATUS, METHOD AND SERVER FOR APP DEVELOPMENT SUPPORTING FRONT-END DEVELOPMENT USING APP DEVELOPMENT UTILITY}

본 발명은 프론트-앤드 개발을 지원하는 앱 저작 장치, 앱 저작 도구를 사용한 앱 저작 방법 및 앱 개발 서버에 관한 것이다.

일반적으로 앱(application; APP) 개발은 기획, 디자인, 프론트-앤드(front-end) 개발 및 코어(core) 개발 등과 같은 영역으로 구분될 수 있다.

프론트-앤드 개발은 해당 앱의 UI(user interface) 디자인에 기초하여, 실제 앱에 포함되는 액티비티, 오브젝트, 오브젝트의 레이아웃 및 모션 등을 추가하는 것이다. 프론트-앤드 개발에서 개발되는 앱의 디자인 적인 부분에 대한 것으로, 실제로 사용 기능이 동작하지는 않는다. 또한, 프론트-앤드 개발은 앱 개발 단계에서 대부분의 시간이 소요된다는 문제가 있다.

또한, 코어는 실제 앱의 기능에 관한 것으로 화면 상에 나타나지는 않지만 앱 상에 중요한 기능을 수행할 수 있다. 즉, 코어 개발은 프론트-앤드 개발에서 추가된 오브젝트 및 모션에 실제 사용 기능을 수행할 수 있도록 연결해주는 개발 단계이다.

본 발명은 전술한 종래 기술의 문제점을 해결하기 위한 것으로서, 사용자가 앱 저작 도구을 통하여 표준 소스 코드 형태의 앱을 개발할 수 있도록 프론트-앤드 개발을 지원하는 앱 저작 장치, 앱 저작 방법 및 앱 개발 서버를 제공한다.

다만, 본 실시예가 이루고자 하는 기술적 과제는 상기된 바와 같은 기술적 과제로 한정되지 않으며, 또 다른 기술적 과제들이 존재할 수 있다.

상술한 기술적 과제를 달성하기 위한 기술적 수단으로서, 본 발명의 제 1 측면에 따른 프론트-앤드 개발을 지원하는 앱 저작 장치는 앱 저작 프로그램이 저장된 메모리 및 상기 메모리에 저장된 프로그램을 실행하는 프로세서를 포함하되, 상기 프로세서는 상기 프로그램의 실행에 따라, 사용자의 요청에 의해, 적어도 하나의 액티비티를 생성하고, 사용자가 입력한 적어도 하나의 앱 디자인 콘텐츠로부터 상기 각 콘텐츠 내의 오브젝트를 식별하고, 상기 사용자의 요청에 따라, 상기 적어도 하나의 앱 디자인 콘텐츠, 상기 오브젝트 및 상기 오브젝트에 대응하여 정의된 상태 정보에 기초하여 복수의 스테이지를 생성하고, 상기 복수의 스테이지 간의 전환 및 복수의 액티비티 간의 전환 중 적어도 하나에 대응하는 이벤트를 생성하고, 상기 액티비티, 상기 오브젝트, 상기 상태 정보, 상기 복수의 스테이지 및 상기 이벤트에 관한 소스 코드 정보를 미리 정해진 소스 코드 템플릿에 적용하여 사용자에게 앱의 소스 코드를 제공한다. 이때, 상기 액티비티는 상기 오브젝트, 상기 상태 정보, 상기 스테이지를 포함하는 것으로서, 하나의 주제를 갖는 하나의 장면일 수 있다.

또한, 본 발명의 제 2 측면에 따른 앱 저작 장치를 통하여 수행되는 프론트-앤드 개발을 지원하는 앱 저작 방법은 사용자의 요청에 의해 적어도 하나의 액티비티를 생성하는 단계; 사용자가 입력한 적어도 하나 이상의 앱 디자인 콘텐츠로부터 상기 각 콘텐츠 내의 오브젝트를 식별하는 단계; 상기 사용자의 요청에 따라, 상-기 적어도 하나의 앱 디자인 콘텐츠, 상기 오브젝트 및 상기 오브젝트에 대응하여 정의된 상태 정보에 기초하여 복수의 스테이지를 생성하는 단계; 상기 복수의 스테이지에 간의 전환 및 복수의 액티비티 간의 전환 중 적어도 하나에 대응하는 이벤트를 생성하는 단계; 및 상기 액티비티, 상기 오브젝트, 상기 상태 정보, 상기 복수의 스테이지 및 상기 이벤트에 관한 소스 코드 정보를 미리 정해진 소스 코드 템플릿에 적용하여 사용자에게 앱의 소스 코드를 제공하되, 상기 액티비티는 상기 오브젝트, 상기 상태 정보, 상기 스테이지를 포함하는 것으로서, 하나의 주제를 갖는 하나의 장면일 수 있다.

또한, 본 발명의 제 3 측면에 따른 프론트-앤드 개발을 지원하는 코어 개발 영역 기반의 개발 서버는 통신 모듈, 앱 저작 도구 제공 프로그램을 저장하는 메모리 및 메모리에 저장된 프로그램을 실행하는 프로세서를 포함한다. 이때, 프로세서는 상기 프로세서는 상기 프로그램의 실행에 따라 사용자의 요청에 의해, 적어도 하나의 액티비티를 생성하고, 상기 사용자로부터 적어도 하나의 앱 디자인 콘텐츠를 수신하고, 상기 앱 디자인 콘텐츠로부터 오브젝트를 식별하고, 상기 오브젝트 및 상기 오브젝트에 대응하여 정의된 상태 정보에 기초하여 복수의 스테이지를 생성하고, 상기 복수의 스테이지 간의 전환 및 복수의 액티비티 간의 전환 중 적어도 하나에 대응하는 이벤트를 생성하고, 상기 액티비티, 상기 오브젝트, 상기 상태 정보, 상기 복수의 스테이지 및 상기 이벤트에 관한 소스 코드 정보를 미리 정해진 템플릿에 적용하여 사용자에게 앱의 소스 코드를 제공하되, 상기 액티비티는 상기 오브젝트, 상기 상태 정보, 상기 스테이지를 포함하는 것으로서, 하나의 주제를 갖는 하나의 장면일 수 있다.

종래의 경우, 앱 디자이너가 UI에 대한 디자인을 수행한 후, 개발자가 그 디자인에 대응하는 코딩작업을 다시 수행하는 번거로움이 있었다. 그러나 본 발명은 앱을 디자인하는 사용자가 앱 디자인을 정의하기만 하면, 정의된 앱 디자인 정보에 대한 소스코드, 가이드문서, 실행 파일을 자동으로 프로그램을 통해 생성될 수 있다.

그러므로 앱 개발 시 프론트-앤드 개발 및 프론트-앤드에 대응하는 문서화에 소요되는 시간을 줄일 수 있다. 또한, 본 발명은 앱을 개발하는 사용자가 해당 앱의 기능에 대응하는 코어 개발에 집중할 수 있도록 할 수 있다. 본 발명은 빠르고, 효율적인 앱 개발 작업이 가능하다.

도 1은 본 발명의 일 실시예에 따른 앱 개발 시스템의 블록도이다.
도 2는 본 발명의 다른 실시예에 따른 앱 개발 시스템의 블록도이다.
도 3은 본 발명의 일 실시예에 따른 앱 저작 도구의 예시도이다.
도 4는 본 발명의 일 실시예에 따른 레이아웃 창의 예시도이다.
도 5및 도 6은 본 발명의 일 실시예에 따른 이벤트 창의 예시도이다.
도 7은 앱 저작 장치를 통하여 수행되는 프론트-앤드 개발을 지원하는 앱 저작 방법의 순서도이다.

아래에서는 첨부한 도면을 참조하여 본 발명이 속하는 기술 분야에서 통상의 지식을 가진 자가 용이하게 실시할 수 있도록 본 발명의 실시예를 상세히 설명한다. 그러나 본 발명은 여러 가지 상이한 형태로 구현될 수 있으며 여기에서 설명하는 실시예에 한정되지 않는다. 그리고 도면에서 본 발명을 명확하게 설명하기 위해서 설명과 관계없는 부분은 생략하였으며, 명세서 전체를 통하여 유사한 부분에 대해서는 유사한 도면 부호를 붙였다.

명세서 전체에서, 어떤 부분이 다른 부분과 "연결"되어 있다고 할 때, 이는 "직접적으로 연결"되어 있는 경우뿐 아니라, 그 중간에 다른 소자를 사이에 두고 "전기적으로 연결"되어 있는 경우도 포함한다. 또한, 어떤 부분이 어떤 구성요소를 "포함"한다고 할 때, 이는 특별히 반대되는 기재가 없는 한 다른 구성요소를 제외하는 것이 아니라 다른 구성요소를 더 포함할 수 있는 것을 의미한다.

다음은 도 1 내지 도 5를 참조하여 본 발명의 일 실시예에 따른 앱 저작 장치(100)를 설명한다.

도 1은 본 발명의 일 실시예에 따른 앱 저작 장치(100)의 블록도이다.

앱 저작 장치(100)는 사용자에게 앱을 개발할 수 있는 앱 저작 도구(300)를 제공할 수 있다. 이때, 사용자는 앱을 개발하는 개발자 또는 앱의 UI를 디자인 하는 디자이너일 수 있으나, 이에 한정된 것은 아니다.

또한, 앱 저작 장치(100)는 테스트 단말(140)을 통하여 개발 중인 앱을 테스트 할 수 있다. 이때, 앱 저작 장치(100)는 사용자가 앱을 개발하는 컴퓨팅 장치이다. 예를 들어, 앱 저작 장치(100)는 데스크 탑 컴퓨터, 노트북 컴퓨터 등이 될 수 있다.

앱 저작 장치(100)를 통하여 개발되는 앱(즉, 애플리케이션)은 스마트 단말에 설치하여 활용되는 것일 수 있다. 또는, 앱은 일반적인 컴퓨팅 장치에 설치하여 활용할 수 있는 것일 수 있다. 이하에서는 스마트 단말에 설치하는 앱을 기준으로 설명하나, 이에 한정된 것은 아니다.

테스트 단말(140)은 사용자가 해당 앱이 실행될 환경에 대응하는 현실 또는 가상의 컴퓨팅 장치가 될 수 있다. 이때, 테스트 단말(140)은 해당 앱의 실행 환경에 따라, 달라질 수 있다. 예를 들어, 테스트 단말(140)은 스마트 폰 또는 테블릿 PC가 될 수 있다. 또는 테스트 단말(140)은 앱 저작 장치(100) 또는 컴퓨터 장치에서 실행되는 가상의 스마트 폰 또는 가상의 테블릿 PC에 대한 에뮬레이터(emulator)일 수 있으나, 이에 한정된 것은 아니다.

앱 저작 장치(100)를 통하여 제공되는 앱 저작 도구(300)는 앱 저작 소프트웨어를 의미하는 것으로서, 앱 개발 서버(230)로부터 수신하여 앱 저작 장치(100)의 메모리(120) 또는 저장 모듈에 설치된 것일 수 있다. 이와 유사하게 본 발명의 다른 실시예에 따라, 앱 저작 플랫폼 형태로 제공되는 경우, 앱 저작 장치(100)는 앱 개발 시스템(210)에 접속한 경우에만 웹 브라우저 등을 통하여 사용자에게 앱 개발을 위한 앱 저작 도구(300)를 제공할 수도 있다.

도 2는 본 발명의 다른 실시예에 따른 앱 개발 시스템(210)의 블록도이다.

앱 개발 시스템(210)은 빌드 서버(220), 개발 서버(230) 및 클라우드 서버(240)를 포함한다. 이때, 빌드 서버(220), 개발 서버(230) 및 클라우드 서버(240)는 각각의 서버의 기능에 기초하여 편의상 구분한 것이다. 그러므로 빌드 서버(220), 개발 서버(230) 및 클라우드 서버(240)는 동일한 서버 내부에 서비스되는 것일 수 있다. 또한, 빌드 서버(220), 개발 서버(230) 및 클라우드 서버(240)는 적어도 하나는 독립된 서버로, 네트워크를 통하여 연결된 것일 수 있으나, 이에 한정된 것은 아니다.

빌드 서버(220)는 개발 서버(230)를 통하여 개발된 앱을 빌드하여 스마트 폰 등에서 실행할 수 있는 형태의 네이티브 애플리케이션(native application)을 생성할 수 있다. 또한, 빌드 서버(220)는 개발 서버(230)에서 생성된 소스 코드를 타 개발 도구에서 수정할 수 있도록 하는 네이티브 소스(native source)를 생성할 수 있다.

이때, 빌드 서버(220)는 자동으로 네이티브 애플리케이션 또는 네이트브 소스 코드를 생성할 수 있다. 예를 들어, 해당 앱이 안드로이드 OS를 지원하는 경우, 네이티브 애플리케이션은 APK 파일이 될 수 있으며, 네이티브 소스는 Java 소스 파일 또는 XML 파일 등이 될 수 있다.

클라우드 서버(240)는 사용자가 개발 중인 프로젝트를 저장하는 일종의 저장 서버이다. 이때, 클라우드 서버(240)는 복수의 사용자가 개발하는 프로젝트를 저장할 수 있다.

또한, 개발 서버(230)는 앱 저작 장치(100)에 온라인으로 앱 저작 도구(300)를 제공할 수 있다. 개발 서버(230)는 테스트 단말(140)에 현재 앱 저작 도구(300)를 통하여 사용자가 개발 중인 앱을 실시간으로 전달할 수 있다.

이때, 앱 저작 도구(300)는 해당 사용자가 앱 저작 장치(100)에 설치하여 개발 서버(230)와 연결하여 사용하는 것일 수 있다. 또는, 앱 저작 도구(300)는 웹(web) 형태로 제공되며, 해당 사용자가 앱 저작 장치(100)의 웹 브라우저를 통하여 개발 서버(230)와 연결하여 사용하는 것일 수 있으나, 이에 한정된 것은 아니다.

다음은 다시 도 1을 참조하여, 본 발명의 일 실시예에 따른 앱 저작 장치 (100)를 상세하게 설명한다.

앱 저작 장치(100)는 통신 모듈(110), 메모리(120) 및 프로세서(130)를 포함한다.

통신 모듈(110)은 유선 혹은 무선으로 테스트 단말(140)과의 데이터 통신을 수행할 수 있다.

메모리(120)는 앱 저작 프로그램을 저장한다. 이때, 앱 저작 프로그램은 사용자에게 앱 저작 도구(300)를 제공하는 프로그램이 될 수 있다.

사용자는 앱 저작 도구(300)를 이용하여 해당 앱의 UI(user interface), UX(user experience) 및 코어를 정의할 수 있다. 또한, 사용자는 앱 저작 도구(300)를 이용하여 해당 앱에 포함되는 액티비티(activity), 오브젝트(object), 상태(state) 정보, 스테이지(stage) 및 이벤트(event)를 정의할 수 있다.

액티비티는 앱의 오브젝트, 상태정보, 스테이지, 이벤트 등을 포함하는 것으로서, 하나의 아이덴티티(즉, 주제)를 갖는 하나의 장면(scene)과 대응하는 정보이다. 액티비티는 사용자 인터페이스의 기본 단위라고 할 수 있다. 실제 사용자 입장에서는 여러 액티비티가 짜임새 있게 작동하여 하나의 사용자 인터페이스를 사용하는 것으로 느끼지만, 사용자 인터페이스를 구성하는 각각의 장면(scene)은 독립적인 액티비티로 구성된다. 예를 들어, 음식 배달 주문 애플리케이션의 UI/UX가 최초에 실행시 제공되는 로딩페이지, 로딩페이지 이후 로그인 페이지, 그 이후 음식판매매장을 검색하는 페이지의 순서로 제공되도록 구성된다고 할 때, 로딩페이지, 로그인 페이지, 검색 페이지 각각은 서로 다른 아이덴티티를 갖는 장면이므로, 로딩페이지, 로그인 페이지, 검색 페이지마다 독립적인 액티비티가 생성되어야 한다.

이때, 오브젝트는 앱의 UI내에서 표시되는 세부 구성요소를 의미한다. 예를 들어, 오브젝트는 텍스트, 이미지 및 멀티미디어 콘텐츠일수 있다. 또한, 오브젝트는 버튼(butten), 레이블(label), 텍스트 필드(text field), 텍스트 박스(text box), 이미지뷰(image view) 등의 입력 양식이 될 수 있다. 그리고 오브젝트는 해당 앱 내부에 존재하는 타 오브젝트의 배치 구조를 정의한 레이아웃(layout)이 될 수도 있으며, 하나 이상의 타 오브젝트의 그룹 등이 될 수 있다.

각 오브젝트는 오브젝트에 대응하는 상태 정보가 정의될 수 있다. 이때, 상태 정보는 오브젝트의 이름, 식별자, 위치, 크기, 스케일 및 회전, 표시되는 텍스트, 표시되는 이미지 또는 기능 등이 될 수 있다. 예를 들어, 상태 정보는 프로퍼티(property)라고 호칭될 수 있다.

스테이지는 특정 시점에서의 오브젝트 및 해당 오브젝트에 대응하는 상태 정보의 조합일 수 있다. 다르게 표현하면, 특정 시점에서의 오브젝트의 상태를 정의하는 정보라고 할 수도 있다. 예를 들어, 특정 스테이지는 사용자가 앱 내부에 특정 버튼에 대한 이벤트를 입력한 이후, 앱에 포함된 오브젝트 및 해당 오브젝트의 크기, 위치 등의 상태 정보를 포함하는 것일 수 있다. 구체적으로, 사용자가 '로그인 버튼'을 탭할 경우, 이메일과 비밀번호 기입을 요청하는 텍스트 박스가 제공되는 경우에 있어서, 로그인 페이지에 대한 하나의 액티비티 내에서 '로그인 버튼'을 보여주는 제1 스테이지 및 텍스트 박스를 제공하는 제 2 스테이지로 구성될 수 있다.

이벤트는 각 스테이지 간 오브젝트의 관계 및 스테이지를 포함하는 액티비티 간의 관계 중 적어도 하나를 정의하는 정보이다. 이때, 하나의 앱은 해당 앱의 시나리오에 기초하여 복수의 이벤트를 포함할 수 있다.

이벤트는 트리거 및 애니메이션을 포함할 수 있다.

트리거는 특정 이벤트가 발생하는 조건을 의미한다. 이때, 조건은 해당 앱을 사용하는 사용자의 인터랙션을 입력 받는 것이거나, 해당 사용자 외의 다른 단말, 서버 등의 데이터 입력 및 메시지를 수신하는 것 등이 될 수 있다.

예를 들어, 인터랙션은 사용자 단말의 입력 모듈을 통한 탭(tap), , 롱 프레스 (long press) 등이거나, 해당 사용자 단말의 물리적인 백 키 및 홈 키 등의 키 입력일 수 있다. 또한, 인터랙션은 사용자 단말에 포함된 센서 모듈을 이용한 움직임일 수 있으나, 이에 한정된 것은 아니다.

또한, 애니메이션은 트리거에 의해 스테이지가 전환될 때 애니메이션 효과를 정의하는 정보일 수 있다. 이때, 애니메이션 효과는 해당 스테이지에 대응하는 오브젝트 전체에 동일하게 적용되거나, 일부 또는 전부 상이하게 적용될 수 있다.

예를 들어, 제 1 이벤트는 해당 앱이 실행될 때 제 1 스테이지가 수행되도록 정의된 제 1 트리거를 포함할 수 있다. 또한, 제 2 이벤트는 해당 앱의 제 1 스테이지에서 특정 사용자가 제 1 버튼을 클릭한 이후의 제 2 스테이지가 수행되도록 정의된 제 2 트리거 및 제 2 스테이지에 대응하는 애니메이션을 포함할 수 있다. 제 3 이벤트는 제 1 스테이지에서 사용자가 해당 사용자 단말에 포함된 자이로 센서를 움직이면 제 3 스테이지가 수행되도록 정의된 제 3 스테이지를 포함할 수 있다.

한편, 사용자는 앱 저작 도구(300)를 통하여 새로운 프로젝트를 생성하거나, 기 생성된 프로젝트를 로드할 수 있다.

도 3은 본 발명의 일 실시예에 따른 앱 저작 도구(300)의 사용자 인터페이스의 예시도이다. 또한, 도 4는 본 발명의 일 실시예에 따른 레이아웃 창(330)의 예시도이다.

도 3을 참조하면, 앱 저작 도구(300)는 사용자가 생성하거나, 로드한 프로젝트를 표시할 수 있다.

앱 저작 도구(300)는 레이아웃 창(330)에 포함된 레이어 리스트 창(400), 그룹 창(410) 및 레이어 창(420)을 포함한다.

그리고 앱 저작 도구(300)는 프로젝트 창(310)을 통하여, 현재 로드한 프로젝트, 액티비티의 정보를 표시할 수 있으며, 다른 액티비티로 전환하거나 수정 및 삭제를 할 수 있다.

또한, 앱 저작 도구(300)는 레이어 리스트 창(400)을 통하여, 해당 프로젝트에 포함된 오브젝트의 레이어 또는 오브젝트의 계층 구조를 표시할 수 있다. 또한, 앱 저작 도구(300)는 레이어 리스트 창(400)을 통하여, 해당 프로젝트에 포함된 오브젝트를 삭제하거나, 위치를 변경할 수 있다.

앱 저작 도구(300)는 오브젝트 또는 레이어를 추가할 수 있는 그룹 창(410) 및 레이어 창(420)을 포함할 수 있다. 그룹 창(410)은 레이어 또는 외부 콘텐츠를 추가할 수 있는 복수의 버튼을 제공할 수 있다. 또한, 레이어 창(420)은, 이미지 뷰, 버튼, 레이블, 텍스트 입력 창 및 체크 박스 등의 오브젝트를 추가하기 위한 복수의 버튼을 제공할 수 있다.

앱 저작 도구(300)는 사용자가 선택한 오브젝트에 대응하는 상태 정보를 확인하고 수정할 수 있는 프로퍼티 창(340) 및 해당 오브젝트의 이벤트를 설정할 수 있는 이벤트 창(360)을 포함할 수 있다.

사용자는 레이아웃 창(330)의 그룹 창(420)을 통하여 제 1 콘텐츠(350)를 로드할 수 있다. 이때, 제 1 콘텐츠(350)는 해당 사용자 또는 디자이너가 생성한 이미지일 수 있다. 또는, 제 1 콘텐츠(350)는 사진, 동영상 등의 멀티미디어 콘텐츠 일 수 있으나, 이에 한정된 것은 아니다.

프로세서(130)는 앱 저작 도구(300)의 작업 창(320)에 제 1 콘텐츠(350)를 표시할 수 있다. 프로세서(130)는 제 1 콘텐츠(350)를 분석할 수 있다. 그리고 프로세서(130)는 제 1 콘텐츠(350)로부터 복수의 오브젝트(351, 352, 353, 354, 355, 356, 357)를 식별할 수 있다. 이때, 제 1 콘텐츠(350)로부터 식별되는 오브젝트(351, 352, 353, 354, 355, 356, 357)는 텍스트 또는 이미지일 수 있다.

예를 들어, 프로세서(130)는 제 1 콘텐츠(350)에 포함된 텍스트 및 배경 이미지와 상이한 이미지를 오브젝트로 식별할 수 있다.

추가 실시예로서, 프로세서(130)는 제 1 콘텐츠(350)에서 배경 이미지 등의 다른 영역과 상이한 색상의 영역을 오브젝트로 인식할 수 있다. 다른 추가 실시예로서, 프로세서(130)는 오브젝트로 인식할 수 있는 색상의 임계값(threshold)에 기초하여 오브젝트를 인식할 수 있다.

또 다른 추가 실시예로, 프로세서(130)는 사용자로부터 특정 영역의 선택을 수신하고, 이를 이용하여 오브젝트로 식별할 수 있다.

그리고 프로세서(130)는 식별된 오브젝트(351, 352, 353, 354, 355, 356, 357)를 제 1 콘텐츠(350)와 상이하게 표시할 수 있다. 예를 들어, 도3을 참조하면, 프로세서(130)는 식별된 오브젝트(351, 352, 353, 354, 355, 356, 357)를 사각형 테두리 형태로 표시할 수 있다.

사용자가 식별된 오브젝트(351, 352, 353, 354, 355, 356, 357) 중 어느 하나를 선택하면, 프로세서(130)는 해당 오브젝트에 대응하는 상태 정보를 설정할 수 있도록 프로퍼티 창(340)에 해당 오브젝트의 상태 정보를 표시할 수 있다.

사용자는 프로퍼티 창(340)에서 해당 오브젝트의 상태 정보를 설정할 수 있다. 또한, 사용자는 하나 이상의 오브젝트의 상태 정보를 설정할 수 있다. 사용자는 하나 이상의 오브젝트 및 각 오브젝트의 상태 정보를 스테이지로 설정하도록 요청할 수 있다.

프로세서(130)는 사용자의 요청에 포함된 하나 이상의 오브젝트 및 각 오브젝트의 상태 정보를 매칭하여 제 1 스테이지를 생성할 수 있다.

사용자가 새로운 스테이지인 제 2 스테이지를 생성하도록 요청하면, 프로세서(130)는 제 2 스테이지를 생성할 수 있다. 이때, 사용자는 제 1 콘텐츠 및 제 1 콘텐츠에서 식별된 오브젝트에 대하여, 제 2스테이지를 생성할 수 있다.

이러한 과정을 통하여, 프로세서(130)는 사용자가 제 1 콘텐츠에 대응하는 하나 이상의 스테이지를 생성할 수 있다.

또는, 사용자가 새로운 콘텐츠인 제 2 콘텐츠를 로드하면, 제 1 콘텐츠와 유사한 방법으로 오브젝트를 식별하고, 사용자를 통하여, 오브젝트에 대응하는 상태 정보를 설정할 수 있다. 그리고 프로세서(130)는 제 1 콘텐츠와 제 2 콘텐츠의 모든 오브젝트의 상태정보에 기초하여 제 3 스테이지를 생성할 수 있다.

도 5 및 도 6은 본 발명의 일 실시예에 따른 이벤트 창(360)의 예시도이다.

사용자는 복수의 스테이지를 생성한 이후, 이벤트 창(360)을 클릭하여 이벤트 설정 창(500)을 활성화 할 수 있다. 그리고 사용자는 이벤트 설정 창(500)에 포함된 트리거 영역(510)을 통하여 특정 스테이지 혹은 특정 액티비티가 그 다음의 스테이지 혹은 액티비티로 전환되기 위한 조건을 입력할 수 있다. 트리거 영역(510)에서 조건이 입력된 경우, 이벤트 영역(520)과 세부 이벤트 설정 영역(530)이 제공될 수 있다. 이벤트 영역(520)을 통하여, 사용자는 애니메이션을 정의할 수 있다. 예를 들어, 스테이지 전환, 액티비티 전환 등과 같은 애니메이션 효과를 정의할 수 있다. 세부 이벤트 설정 영역(530)을 통하여 사용자는 이벤트 영역에서 설정한 애니메이션을 더 상세하게 조절할 수 있다. 예를 들어, 전환 속도, 전환 시간 등에 대하여 더 상세하게 조절할 수 있다.

이때, 임플리먼트(implement)는 트리거 영역(510)에서 사용자에 의해 설정된 정보와 상세 이벤트 설정 영역(530)에서 사용자에 의해 설정된 정보 간의 연결관계를 정의한다. 임플리먼트는 트리거, 애니메이션과 함께 이벤트 내에 정의되는 하나의 요소이다.

예를 들어, 프로세서(130)는 사용자의 요청에 따라 제 1 스테이지 및 제 2 스테이지에 대응하는 트리거 및 애니메이션을 설정하여 제 1 이벤트를 생성할 수 있다. 그리고, 애니메이션에 대한 상세 정보를 추가적으로 설정할 수 있다. 이때, 트리거로 "제 1 스테이지 상에서의 탭" 및 애니메이션으로 "제 1 스테이지에서 제 2 스테이지로 전환"을 포함할 수 있으며, 애니메이션 상세정보는 "전환시간은 0.5초, 전환시 페이드 아웃 형식으로 전환" 등과 같은 형태로 지정될 수 있다. 이때, 임플리먼트에 의해 해당 트리거 발생시 애니메이션 상세정보에서 정의한 애니메이션 효과가 나타나도록 정의될 수 있다. 다.

한편, 애니메이션은 제 1 스테이지에 포함된 모든 오브젝트에 동일하게 적용될 수 있다. 또는, 애니메이션은 제 1 스테이지에 포함된 각 오브젝트 별로 상이하게 적용될 수 있다.

예를 들어, 애니메이션은 상세 이벤트 설정 영역(530)을 통하여 제 1 스테이지에 포함된 제 1 오브젝트, 제 2 오브젝트 및 제 3 오브젝트에 대응하는 지속 시간, 속도, 시작 시점 또는 이동 경로 등을 포함할 수 있다.

이때, 수행 시간은 애니메이션이 지속되는 시간일 수 있다. 예를 들어, 제 1 오브젝트에 대응하는 애니메이션은 수행 시간이 0.5초가 될 수 있으며, 두 번째로 수행되는 제 2 오브젝트에 대응하는 애니메이션은 수행 시간이 1초가 될 수 있다.

시작 시점은 가장 처음 수행되는 오브젝트를 기준으로 상대적인 해당 오브젝트의 수행 순위가 될 수 있다. 또는, 시작 시점은 처음 수행되는 오브젝트를 기준으로 지연 되는 시간이 될 수 있다. 예를 들어, 가장 먼저 수행되는 제 1 오브젝트에 대응하는 애니메이션은 시작 시점이 1, 두 번째로 수행되는 제 2 오브젝트에 대응하는 애니메이션은 시작 시점이 2이며, 마지막으로 수행되는 제 3 오브젝트에 대응하는 애니메이션은 시작 시점이 3이 될 수 있다.

앞에서 설명한 과정을 반복하여, 프로세서(130)는 복수의 스테이지에 대응하는 복수의 이벤트를 생성할 수 있다.

사용자가 해당 앱의 개발을 완료하고, 저장, 컴파일 또는 빌드를 요청하면, 프로세서(130)는 기정의된 소스 코드 템플릿에 앱에 포함된 액티비티, 오브젝트, 오브젝트의 상태 정보, 스테이지 및 이벤트를 대입할 수 있다. 그리고 프로세서(130)는 앱에 대응하는 설치 파일, 소스 코드 및 가이드 문서를 생성할 수 있다.

이때, 소스 코드 템플릿은 소스 코드 파일에 대응하는 디자인 정의 템플릿 일 수 있다. 즉, 소스 코드 템플릿은 복수의 액티비티, 복수의 스테이지 및 복수의 이벤트의 소스 코드 및 실행 순서가 정의된 것일 수 있다. 또한, 소스 코드 템플릿은 XML로 정의된 것일 수 있다.

예를 들어, 소스 코드 템플릿은 스테이지, 이벤트에 포함된 트리거 및 이벤트에 포함된 애니메이션 순으로 미리 정해진 것일 수 있다. 그리고 소스 코드 템플릿은 "<화면구성>"과 같은 태그 또는 식별자를 통하여, 하나 이상의 스테이지의 순서 및 하나 이상의 스테이지에 포함된 오브젝트 및 상태 정보가 포함된 액티비티로 정의될 수 있다. 또한, 소스 코트 템플릿은 "<트리거>"와 같은 태그 또는 식별자를 통하여, 트리거가 정의될 수 있으며, "<애니메이션>"과 같은 태그 또는 식별자를 통하여 애니메이션이 정의될 수 있다.

이때, 설치 파일은 해당 앱이 실행되는 환경에 대응하는 것일 수 있다. 또한, 설치 파일은 사용자가 직접 앱을 설치하거나, 앱 스토어를 통하여 사용자에게 제공할 수 있는 형태로 생성될 수 있다.

예를 들어, 안드로이드 OS의 스마트 단말을 위한 설치 파일은 XML 파일 및 Java 파일로 구성될 수 있다. 이때, 안드로이드 OS의 스마트 단말을 위한 설치 파일은 앱 저작 도구(300)와 연결된 안드로이드 소프트웨어 개발 키트(software development kit; SDK)를 이용하여 생성될 수 있다.

또한, 소스 코드는 해당 앱의 소스 파일이 될 수 있다. 프로세서(130)는 앱에 포함된 액티비티, 오브젝트, 오브젝트의 상태 정보, 스테이지 및 이벤트와, 해당 앱에 대응하는 템플릿에 기초하여 소스 코드를 생성할 수 있다.

또한, 가이드 문서는 사용자가 앱의 UI/UX에 대응하는 디자인 구성을 확인하고 검증할 수 있도록 제공되는 문서이다. 이때, 가이드 문서는 HTML 문서이거나, 텍스트 문서일 수 있으나, 이에 한정된 것은 아니다.

프로세서(130)는 앱에 포함된 복수의 이벤트 별로, 각 이벤트에 대응하는 액티비티나 스테이지의 UI/UX가 포함되도록 가이드 문서를 생성할 수 있다. 이때, 액티비티나 스테이지의 UI/UX는 해당 스테이지에 포함된 오브젝트 및 오브젝트의 상태 정보에 기초하여 생성된 오브젝트의 레이아웃 등을 이용하여 생성되는 것일 수 있다.

예를 들어, 해당 앱이 제 1 이벤트, 제 2 이벤트 및 제 3 이벤트를 포함한다면, 프로세서(130)는 먼저, 제 1 이벤트의 트리거에 포함되는 각 스테이지의 UI가 포함되도록 가이드 문서를 생성할 수 있다.

프로세서(130)는 앱이 생성된 이후, 사용자가 앱을 테스트 할 수 있도록 테스트 단말(140)로 전달할 수 있다.

또한, 프로세서(130)는 앱 저작 도구(300)에 포함된 소스 코드 추출을 통하여 사용자가 기 개발된 프론트-앤드 영역에 기초하여 코어 영역을 개발 할 수 있도록 지원할 수 있다. 또는, 프로세서(130)는 사용자가 별도의 코어 영역 개발을 위한 저작 도구를 이용하여 앱의 코어 영역을 개발할 수 있도록 해당 앱의 소스 코드를 추출하고 코어 영역 개발을 위한 저작 도구로 전달할 수 있다.

다음은 도 6에 기초하여 앱 저작 장치(100)를 통하여 수행되는 프론트-앤드 개발을 지원하는 앱 저작 방법을 설명한다.

도 6은 앱 저작 장치(100)를 통하여 수행되는 프론트-앤드 개발을 지원하는 앱 저작 방법의 순서도이다.

앱 저작 장치(100)는 사용자의 입력으로 적어도 하나의 액티비티를 생성하고, 사용자가 입력한 적어도 하나 이상의 앱 디자인 콘텐츠로부터 각 콘텐츠 내의 오브젝트를 식별한다(S600).

앱 저작 장치(100)는 사용자의 요청에 따라, 적어도 하나의 앱 디자인 콘텐츠, 오브젝트 및 오브젝트에 대응하여 정의된 상태 정보에 기초하여 복수의 스테이지를 생성한다.

앱 저작 장치(100)는 복수의 스테이지에 포함된 각 스테이지에 대하여 오브젝트에 대응하는 이벤트를 생성한다. 이때, 이벤트는 트리거 및 애니메이션을 포함한다.

그리고 앱 저작 장치(100)는 액티비티, 오브젝트, 상태 정보, 복수의 스테이지 및 이벤트에 관한 소스 코드 정보를 미리 정해진 소스 코드 템플릿에 적용하여 앱을 생성한다. 이때, 앱은 소스 코드, 가이드 문서 및 소스 코드에 기초하여 생성된 앱 대응하는 실행 파일을 포함한다.

다음은 다시 도 2를 참조하여 프론트-앤드 개발을 지원하는 앱 개발 서버(230)를 설명한다.

앱 개발 서버(230)는 통신 모듈, 메모리 및 프로세서를 포함할 수 있다.

이때, 통신 모듈은 앱 저작 장치와 데이터 통신을 수행할 수 있다.

메모리는 앱 저작 도구 제공 프로그램이 저장될 수 있다.

프로세서는 프로그램의 실행에 따라 사용자 입력을 통해 적어도 하나의 액티비티를 생성하고, 각 액티비티에 관하여 수신한 적어도 하나의 앱 디자인 콘텐츠로부터 오브젝트를 식별한다.

프로세서는 오브젝트 및 오브젝트에 대응하여 정의된 상태 정보에 기초하여 복수의 스테이지를 생성한다.

프로세서는 복수의 스테이지에 포함된 각 스테이지에 대하여 오브젝트에 대응하는 이벤트를 생성한다. 이때, 이벤트는 트리거 및 애니메이션을 포함한다.

프로세서는 오브젝트와 스테이지를 포함하는 액티비티 간의 이동에 관한 이벤트를 생성한다. 이때, 이벤트는 트리거 및 애니메이션을 포함한다.

프로세서는 액티비티, 오브젝트, 상태 정보, 복수의 스테이지 및 이벤트에 관한 소스 코드 정보를 미리 정해진 템플릿에 적용하여 앱을 생성한다. 이때, 앱은 소스 코드, 가이드 문서 및 소스 코드에 기초하여 생성된 앱의 실행 파일을 포함한다.

본 발명의 일 실시예에 따른 프론트-앤드 개발을 지원하는 앱 저작 장치(100), 앱 저작 방법 및 앱 개발 서버(230)는 앱 개발 시 프론트-앤드 개발 및 프론트-앤드에 대응하는 문서화에 소요되는 시간을 줄일 수 있으며, 사용자가 해당 앱의 기능에 대응하는 코어 개발에 집중할 수 있도록 할 수 있다. 그러므로 프론트-앤드 개발을 지원하는 앱 저작 장치(100), 앱 저작 방법 및 앱 개발 서버(230)는 빠르고, 효율적인 앱 개발 작업이 가능하다.

본 발명의 일 실시예는 컴퓨터에 의해 실행되는 프로그램 모듈과 같은 컴퓨터에 의해 실행 가능한 명령어를 포함하는 기록 매체의 형태로도 구현될 수 있다. 컴퓨터 판독 가능 매체는 컴퓨터에 의해 액세스될 수 있는 임의의 가용 매체일 수 있고, 휘발성 및 비휘발성 매체, 분리형 및 비분리형 매체를 모두 포함한다. 또한, 컴퓨터 판독가능 매체는 컴퓨터 저장 매체를 포함할 수 있다. 컴퓨터 저장 매체는 컴퓨터 판독가능 명령어, 데이터 구조, 프로그램 모듈 또는 기타 데이터와 같은 정보의 저장을 위한 임의의 방법 또는 기술로 구현된 휘발성 및 비휘발성, 분리형 및 비분리형 매체를 모두 포함한다.

본 발명의 방법 및 시스템은 특정 실시예와 관련하여 설명되었지만, 그것들의 구성 요소 또는 동작의 일부 또는 전부는 범용 하드웨어 아키텍쳐를 갖는 컴퓨터 시스템을 사용하여 구현될 수 있다.

전술한 본 발명의 설명은 예시를 위한 것이며, 본 발명이 속하는 기술분야의 통상의 지식을 가진 자는 본 발명의 기술적 사상이나 필수적인 특징을 변경하지 않고서 다른 구체적인 형태로 쉽게 변형이 가능하다는 것을 이해할 수 있을 것이다. 그러므로 이상에서 기술한 실시예들은 모든 면에서 예시적인 것이며 한정적이 아닌 것으로 이해해야만 한다. 예를 들어, 단일형으로 설명되어 있는 각 구성 요소는 분산되어 실시될 수도 있으며, 마찬가지로 분산된 것으로 설명되어 있는 구성 요소들도 결합된 형태로 실시될 수 있다.

본 발명의 범위는 상세한 설명보다는 후술하는 특허청구범위에 의하여 나타내어지며, 특허청구범위의 의미 및 범위 그리고 그 균등 개념으로부터 도출되는 모든 변경 또는 변형된 형태가 본 발명의 범위에 포함되는 것으로 해석되어야 한다.

100: 앱 저작 장치
110: 통신 모듈
120: 메모리
130: 프로세서
140: 테스트 단말

Claims (11)

1. 프론트-앤드 개발을 지원하는 앱 저작 장치에 있어서,
   앱 저작 프로그램이 저장된 메모리 및
   상기 메모리에 저장된 프로그램을 실행하는 프로세서를 포함하되,
   상기 프로세서는 상기 프로그램의 실행에 따라,
   사용자의 요청에 의해, 적어도 하나의 액티비티를 생성하고,
   사용자가 입력한 적어도 하나의 앱 디자인 콘텐츠로부터 상기 각 콘텐츠 내의 오브젝트를 식별하고,
   상기 사용자의 요청에 따라, 상기 적어도 하나의 앱 디자인 콘텐츠, 상기 오브젝트 및 상기 오브젝트에 대응하여 정의된 상태 정보에 기초하여 복수의 스테이지를 생성하고,
   상기 복수의 스테이지 간의 전환 및 복수의 액티비티 간의 전환 중 적어도 하나에 대응하는 이벤트를 생성하고,
   상기 액티비티, 상기 오브젝트, 상기 상태 정보, 상기 복수의 스테이지 및 상기 이벤트에 관한 소스 코드 정보를 미리 정해진 소스 코드 템플릿에 적용하여 사용자에게 앱의 소스 코드를 제공하되,
   상기 액티비티는 상기 오브젝트, 상기 상태 정보, 상기 스테이지를 포함하는 것으로서, 하나의 주제를 갖는 하나의 장면인 것인, 앱 저작 장치.
   
2. 제 1 항에 있어서,
   상기 스테이지는 일 시점에서의 상기 오브젝트 및 상기 오브젝트에 대응하는 상태 정보에 기초하여 생성되는 데이터이고,
   상기 이벤트는,
   상기 복수의 스테이지 간의 전환 또는 복수의 액티비티 간의 전환을 위한 조건을 정의하는 트리거; 및
   상기 복수의 스테이지 간의 전환 및 복수의 액티비티 간의 전환이 이루어질 때 발생되는 애니메이션 효과인 애니메이션 효과 정보를 포함하는 것인, 앱 저작 장치.
   
3. 제 2 항에 있어서,
   상기 프로세서는 제 1 시점에서의 하나 이상의 오브젝트 및 상기 제 1 시점에서의 하나 이상의 오브젝트에 대응하는 상태 정보에 기초하여 제 1 스테이지를 생성하고,
   상기 제 1 시점 이후에 연속되는 제 2 시점에서의 하나 이상의 오브젝트 및 상기 제 2 시점에서의 하나 이상의 오브젝트에 대응하는 상태 정보에 기초하여 제 2 스테이지를 생성하고,
   상기 제 1 시점과 상기 제 2 시점 사이의 제3 시점에서, 상기 제 1 스테이지에서 상기 제 2 스테이지로의 전환에 관한 트리거 및 애니메이션을 포함하는 제 1 이벤트를 생성하는, 앱 저작 장치.
   
4. 제 3 항에 있어서,
   상기 제 1 이벤트는 상기 제 1 스테이지에 포함된 하나 이상의 오브젝트 및 상기 제 2 스테이지에 포함된 하나 이상의 오브젝트에 동일하게 적용되거나, 적어도 하나 이상에 상이하게 적용되는 애니메이션을 포함하는 것인, 앱 저작 장치.
   
5. 제 1 항에 있어서,
   상기 애니메이션은 애니메이션의 효과 정보로서 하나 이상의 오브젝트의 지속 시간, 속도, 시작 시점 및 이동 경로 중 적어도 하나를 포함하되,
   상기 시작 시점은 하나 이상의 오브젝트 중 가장 먼저 수행되는 오브젝트에 기초하여 설정되는 것인, 앱 저작 장치.
   
6. 제 1 항에 있어서,
   상기 프로세서는 상기 앱 디자인 콘텐츠에 포함된 텍스트 또는 이미지를 상기 오브젝트로서 추출하는 것인, 앱 저작 장치.
   
7. 제 6 항에 있어서,
   상기 프로세서는 상기 앱 디자인 콘텐츠에 포함된 이미지 중 상기 앱 디자인 콘텐츠 또는 상기 앱 디자인 콘텐츠에 포함된 타 이미지와 미리 정해진 값 이상 색상의 차이가 존재하는 이미지를 선택하고, 상기 선택된 이미지를 상기 오브젝트로 추출하는 것인, 앱 저작 장치.
   
8. 제 1 항에 있어서,
   상기 소스 코드는, 상기 복수의 스테이지에 대한 소스 코드, 상기 트리거에 대한 소스 코드 및 상기 애니메이션에 대한 소스 코드의 순서로 나열되도록 정의되며,
   상기 복수의 스테이지에 대한 소스 코드는, 각 스테이지에 포함되는 오브젝트 및 상태 정보의 조합으로 구성되는 것인, 앱 저작 장치.
   
9. 제 1 항에 있어서,
   상기 프로세서는,
   상기 앱의 소스 코드에 부가하여, 상기 사용자에게 상기 앱에 관한 가이드 문서 및 상기 소스 코드에 기초하여 생성된 상기 앱의 실행 파일을 더 제공하는 것인, 앱 저작 장치.
10. 앱 저작 장치를 통하여 수행되는 프론트-앤드 개발을 지원하는 앱 저작 방법에 있어서,
    사용자의 요청에 의해 적어도 하나의 액티비티를 생성하는 단계;
    사용자가 입력한 적어도 하나 이상의 앱 디자인 콘텐츠로부터 상기 각 콘텐츠 내의 오브젝트를 식별하는 단계;
    상기 사용자의 요청에 따라, 상-기 적어도 하나의 앱 디자인 콘텐츠, 상기 오브젝트 및 상기 오브젝트에 대응하여 정의된 상태 정보에 기초하여 복수의 스테이지를 생성하는 단계;
    상기 복수의 스테이지에 간의 전환 및 복수의 액티비티 간의 전환 중 적어도 하나에 대응하는 이벤트를 생성하는 단계; 및
    상기 액티비티, 상기 오브젝트, 상기 상태 정보, 상기 복수의 스테이지 및 상기 이벤트에 관한 소스 코드 정보를 미리 정해진 소스 코드 템플릿에 적용하여 사용자에게 앱의 소스 코드를 제공하되,
    상기 액티비티는 상기 오브젝트, 상기 상태 정보, 상기 스테이지를 포함하는 것으로서, 하나의 주제를 갖는 하나의 장면인 것인, 앱 저작 방법.
    
11. 프론트-앤드 개발을 지원하는 코어 개발 영역 기반의 앱 개발 서버에 있어서,
    통신 모듈,
    앱 저작 도구 제공 프로그램을 저장하는 메모리 및
    상기 메모리에 저장된 프로그램을 실행하는 프로세서를 포함하되,
    상기 프로세서는 상기 프로그램의 실행에 따라 사용자의 요청에 의해, 적어도 하나의 액티비티를 생성하고,
    상기 사용자로부터 적어도 하나의 앱 디자인 콘텐츠를 수신하고, 상기 앱 디자인 콘텐츠로부터 오브젝트를 식별하고,
    상기 오브젝트 및 상기 오브젝트에 대응하여 정의된 상태 정보에 기초하여 복수의 스테이지를 생성하고,
    상기 복수의 스테이지 간의 전환 및 복수의 액티비티 간의 전환 중 적어도 하나에 대응하는 이벤트를 생성하고,
    상기 액티비티, 상기 오브젝트, 상기 상태 정보, 상기 복수의 스테이지 및 상기 이벤트에 관한 소스 코드 정보를 미리 정해진 템플릿에 적용하여 사용자에게 앱의 소스 코드를 제공하되,
    상기 액티비티는 상기 오브젝트, 상기 상태 정보, 상기 스테이지를 포함하는 것으로서, 하나의 주제를 갖는 하나의 장면인 것인, 앱 저작 서버.
    

Images