KR20180135654A - 프로그램의 직관적 제작방법 - Google Patents

Abstract

본 발명은 사용자환경 디자인(UI Design)만으로 제품의 화면과 로직(Logic)을 짜고 프로그램을 개발함으로써 개발기간을 단축시킬 수 있고 기존보다 개발속도를 향상시킬 수 있도록 한 프로그램의 직관적 제작방법에 관한 것으로, 이를 위한 저작도구는 사용자가 프로그램의 화면구성과 데이터특성을 편집하고 이를 로직과의 연결구성을 보여주는 화면디자이너모듈과; 상기 화면디자이너모듈(13)에서 편집된 프로그램을 상기 화면구성, 상기 데이터특성, 상기 연결구성에 따라서 실제 구동환경에 적합하도록 코딩하기 위한 로직디자이너모듈과; 상기 메인서버의 데이터를 클라이언트 PC인 개발환경 내에서 생성, 변경, 수정, 삭제할 수 있고 화면디자이너, 로직디자이너와 데이터를 연결시켜 주는 데이터모듈을 포함하는 것을 특징으로 한다.

Description

프로그램의 직관적 제작방법{Intuitive method of making a program}

본 발명은 프로그램의 직관적 제작방법에 관한 것으로, 더 상세하게는 사용자환경 디자인(UI Design)만으로 제품의 화면과 로직(Logic)을 짜고 프로그램을 개발함으로써 개발기간을 단축시킬 수 있고 기존보다 개발속도를 향상시킬 수 있도록 한 프로그램의 직관적 제작방법에 관한 것이다.

공개번호 10-2010-0054330호(직관적 사용자 인터페이스를 이용한 프로그램 저작 방법 및 저작 도구)에 따르면, "직관적인 사용자 인터페이스 화면을 이용하여 시나리오에 따라 연출되는 장면을 프로그래밍할 수 있도록 해준다. 테이블 형태로 이루어지는 시나리오 편집창의 각 열에는 동작의 대상이 되는 개체를 등록하고, 각 행에는 해당 열에 등록된 개체와 관련된 명령들을 순서대로 배치하도록 한다. 각 개체들이 병렬적으로 동작할 내용은 행으로 나타나고, 시간의 흐름에 따라 실행될 동작 내용은 열에 나타나므로 시나리오에 따라 연출되는 장면을 한 눈에 파악할 수 있다. 특히, 사용자는 각 개체와 명령을 마우스를 이용하여 시나리오 편집창에 끌어다 놓는 것으로 프로그래밍 작업을 할 수 있으므로 누구나 손쉽게 이용할 수 있고, 그 내용을 쉽게 이해할 수 있게 된다. 또한, 여러 형식의 스크립트 코드로 변환해 주어 손쉽게 활용할 수 있다."라고 개시된 바가 있다.

공개번호 10-2010-0054330호(직관적 사용자 인터페이스를 이용한 프로그램 저작 방법 및 저작 도구)

그러나, 종래의 저작방법은 다음과 같은 문제점이 있었다.

첫째, 게임이나 애니메이션에 한정적으로 사용하기 위한 저작도구여서 사용자가 원하는 프로그램을 제작하는데 한계가 있었다.

둘째, 프로그래밍 언어가 스크립트로 구현한 것이어서 실제로 산업현장에서 많이 사용되는 시스템 프로그래밍은 구현하기가 어려운 문제점이 있었다. 참고로, 이러한 스크립트 언어(script language)는 컴파일(compile)을 하지 않고, 작성해서 바로 실행시킬 수 있는 언어. 컴파일하지 않고 변수 타입을 선언하지 않는다는 특징이 있고, 대표적인 스크립트 언어로는 자바 스크립트, Perl, Tcl/Tk 등이 있다.

셋째, 이러한 스크립트 언어는 웹상에서 구현되는 프로그램에 한정된 것이어서 일반적인 컴퓨터 환경에서 구동되는 프로그램을 제작하기 어려운 문제점이 있었다.

이러한 스크립트는 프로그램 언어 외의 간단한 언어로 작성한 명령어 등을 일컫는 말로서, 게임이나 애니메이션 내 대사나 시나리오 등을 담은 지문을 의미한다고 정의되어 있다. 스크립트(Script)는 게임 프로그램(Program)에서 간단한 프로그래밍(Programming)을 위해 프로그램 언어(Program Language) 외의 간단한 언어로 작성한 명령어(Instruction, 命令語)를 의미한다. 주로 보조적인 프로그래밍을 위해 사용한다. 스크립트는 특히 다른 프로그램보다 게임에서 더욱 적극적으로 사용하는데, 이유는 개발 편의성을 위함이다. 대부분의 비디오 게임(Video Game)은 각종 데이터(Data) 및 사소한 애니메이션(Animation) 하나까지도 모두 프로그램으로 동작하기 때문에 프로그래머(Programmer)가 아닌 개발인력이라고 해도 프로그램을 조작할 필요가 있다. 따라서 게임 기획자(Game Designer)나 게임 아티스트(Game Artist)도 간단하게 배워서 쓸 수 있는 스크립트를 적극적으로 사용한다. (출처: [네이버 지식백과] 스크립트 [Script])

본 발명은 상술한 문제점을 해소하기 위한 것으로, 웹상에서 구동되는 프로그램 뿐만 아니라, 윈도우PC, 안드로이드(스마트폰), IOS(아이폰)에서 구동되는 프로그램을 사용자환경 디자인(UI Design)만으로 제품의 화면과 로직(Logic)을 짜고 프로그램을 개발함으로써 개발기간을 단축시킬 수 있고 기존보다 개발속도를 향상시킬 수 있도록 한 프로그램의 직관적 제작방법을 제공하는데 그 목적이 있다.

본 발명의 제 1 특징은 메인서버(1), NoSQL서버(2)에 데이터네트워크(3)를 통하여 제 1 내지 제 n PC(4)(5)가 접속하도록 구성된 환경에서 본 발명이 구현되고, 저작도구는 상기 제 1 내지 제 n PC(4)(5) 및 상기 메인서버(1)에 설치된 프로그램의 직관적 제작방법으로서; 상기 저작도구는 사용자가 프로그램의 화면구성과 데이터특성을 편집하고 이를 로직과의 연결구성을 보여주는 화면디자이너모듈과; 상기 화면디자이너모듈(13)에서 편집된 프로그램을 상기 화면구성, 상기 데이터특성, 상기 연결구성에 따라서 실제 구동환경에 적합하도록 코딩하기 위한 로직디자이너모듈과; 상기 메인서버의 데이터를 클라이언트 PC인 개발환경 내에서 생성, 변경, 수정, 삭제할 수 있고 화면디자이너, 로직디자이너와 데이터를 연결시켜 주는 데이터모듈을 포함하는 것이다.

실시예에서, 상기 데이터모듈에는 NoSQL 서버의 데이터 셋과 동기화되어 데이터 편집이 가능한 데이터트리와 NoSQL 서버의 Reference 경로를 지칭하여 데이터의 필드를 가져와 화면, 로직 디자이너와 결합하는 버킷(152)이 구비된 것이다.

본 발명의 제 2 특징은 저작도구를 구비한 프로그램의 직관적 제작방법으로서; 상기 저작도구는 IDE(Integrated Development Environment, 통합개발환경 소프트웨어 어플리케이션 인터페이스)와 빌드(Build, 일부 기능을 수행하는 소프트웨어모듈)가 구비되고, 외부모듈인 써드파티 프로그램(3rd Party)도 이용하여 프로그래밍하고; 상기 IDE에는 프리젠테이션, 데이터모델, 데이터스토어가 구비되는데, 프리젠테이션에는 레이아웃, 로직, 컴포넌트가 구비되며, 데이터모델에는 레이아웃과 로직이 구비되며, 데이터스토어에는 NoSQL 데이터베이스이 구비되며; 상기 빌드에는 제너레이터, 컴파일러가 구비되는데, 제너레이터에는 레이아웃제너레이터 및 로직제너레이터가 IOS, 안드로이드, 윈도우 별로 각각 구비되고, 컴파일러에는 WPF 컴파일러, Xamarin 컴파일러가 구비되며; 상기 써드파티프로그램에는 각종 언어로 외부에서 제작된 프로그램 모듈 예컨대, 시스템모듈, 매쓰모듈, 스트링모듈, 서버모듈, 스크립트모듈 등이 구비된 것이다.

본 발명의 제 3 특징은 IDE(Integrated Development Environment, 통합개발환경 소프트웨어 어플리케이션 인터페이스)와 빌드(Build, 일부 기능을 수행하는 소프트웨어모듈), 외부모듈인 써드파티 프로그램(3rd Party)도 이용하여 프로그래밍하고, 상기 IDE에는 프리젠테이션, 데이터모델, 데이터스토어가 구비되는데, 프리젠테이션에는 레이아웃, 로직, 컴포넌트가 구비되며, 데이터모델에는 레이아웃과 로직이 구비되며, 데이터스토어에는 NoSQL 데이터베이스이 구비되며, 상기 빌드(80)에는 제너레이터, 컴파일러가 구비되는데, 제너레이터에는 레이아웃제너레이터 및 로직제너레이터가 IOS, 안드로이드, 윈도우 별로 각각 구비되고, 컴파일러에는 WPF 컴파일러, Xamarin 컴파일러가 구비되며, 상기 써드파티프로그램(60)에는 각종 언어로 외부에서 제작된 프로그램 모듈 예컨대, 시스템모듈, 매쓰모듈, 스트링모듈, 서버모듈, 스크립트모듈 등이 구비된 프로그램의 직관적 제작방법으로서; 사용자가 안드로이드, IOS, 윈도우 중에서 프로그램하고자 하는 운영체제 플랫폼을 선택하여, 저작도구가 운영체제 플랫폼을 입력받는 단계 S1; 저작도구는 사용자가 편집한 내용을 프로그램을 만들기 전에 즉시 볼 수 있도록 디스플레이하는 단계 S2; 사용자가 레이아웃을 디자인하여 편집하고, 저작도구가 편집된 레이아웃 디자인을 입력받는 단계 S3; 사용자가 컨트롤을 디자인하여 편집하고, 저작도구가 편집된 컨트롤을 입력받는 단계 S4; 사용자가 상기 컨트롤에 기본로직을 편집하여, 저작도구가 상기 컨트롤에 링크된 기본로직을 입력받는 단계 S5; 사용자가 상기 컨트롤에 함수를 편집하여, 저작도구가 상기 컨트롤에 링크된 함수를 입력받는 단계 S6; 프로그램에 필요한 데이터를 추가하여 편집하고, 이들 데이터의 연결관계를 나타낸 데이터트리를 구성하고, 화면디자이너의 툴박스에서 버킷 컨트롤을 스토리보드 상으로 이동시켜 생성하여 편집하도록 입력받는 단계 S7; 사용자가 원하는 프로그램 편집이 완료되어서 실행 버튼을 누르면, 저작도구는 프로그램 편집을 종료한다는 명령으로 받아들여서 사용자의 정보입력을 더 이상 수신하지 않는 단계 S8; 저작도구는 상기 단계 S1에서 입력된 플랫폼에 따라서 상기 단계 S3 내지 S7에서 입력된 사용자의 입력정보를 토대로 프로그램을 번역하고 코딩하여, 실행파일을 생성하는 단계 S9를 포함하는 것이다.

실시예에서, 상술한 단계 S3 내지 S7을 반복하여 수행하여, 사용자가 제작하고자 하는 프로그램에 더 이상 추가할 레이아웃이나 컨트롤이 존재하지 않으면, 단계 S8을 수행하는 것이다.

본 발명의 바람직한 효과에 따르면, 웹 서버, 윈도우PC, 안드로이드 스마트폰, 아이폰과 같이 다양한 플랫폼에서 구동되는 프로그램을 클릭이나 드래그와 같은 직관적인 편집에 의해서 제작할 수 있으므로 프로그램을 제작하는 기간이 비약적으로 단축되고, 이를 통해서 프로그램 개발비용을 절감시킬 수 있는 장점(하기 그림 참조; 본 발명-DeXign)이 있다.

또한, 사용자가 필요한 함수나 모듈을 얼마든지 추가시킬 수 있도록 설계되었고 다른 프로그래밍 언어로 구현된 외부 모듈까지도 연동이 가능하기 때문에 이론적으로는 구현 범위에 한계가 없으며, 얼마든지 원하는 모듈들이 추가되고 다른 개발자들이 만든 모듈들, 함수들도 사용이 가능하므로 개발 자유도가 매우 높다.

그리고, 종래의 저작방법에 비해서, 아무리 복잡한 앱도 개발이 가능해졌고, 매우 간편한 프로세스로 복잡한 앱을 개발할 수 있는 장점을 제공하므로 프로그래밍의 저변을 급격히 확대하고 산업 전반에 생산성을 증대시킬 수 있는 부가적인 효과를 제공한다.

더욱이, 본 발명은 직접 프로그래밍을 하지 않아도 프로그래밍 사고를 기르는데도 큰 도움을 주고 화면과 로직 개발의 흐름을 따라가다 보면 프로그래밍의 논리적 흐름을 자연스레 익힐 수 있으므로, 본 발명을 통해 프로그램을 만들면 코딩을 하지 않아도 이러한 순차적인 흐름에 따라 프로그래밍적 사고를 향상시킬 수 있다. 예컨대, 가져오기, 설정하기, 함수, 분기 등의 사용 과정은 그 과정 자체가 프로그래밍을 하는 것과 같다고 볼 수 있으므로, 프로그래밍 교육용 교재나 문서나 여러 레퍼런스를 만들어나가면 교육 시장에서도 충분한 경쟁력을 가진 상품을 개발할 수 있는 작용효과가 있다.

도 1은 본 발명을 구현하기 위해서 저작도구가 설치된 시스템환경을 설명하기 위한 블록도.
도 2는 본 발명에 따른 프로그램의 직관적인 제작방법을 위한 저작도구에 대한 개념적인 구성을 나타낸 블록도.
도 3은 본 발명에 따른 프로그램의 직관적인 제작방법을 위한 저작도구에 대한 화면구성을 나타낸 블록도.
도 4는 본 발명에 따른 프로그램의 직관적인 제작방법을 위한 저작도구의 기능적 구성을 나타낸 블록도.
도 5는 본 발명에 따른 프로그램의 직관적인 제작방법을 나타낸 흐름도.

이하, 첨부된 도면을 참조하여 본 발명을 상세히 설명하도록 한다.

참고로, 본 명세서에서 기재된 프로그램은 웹서버 또는 컴퓨터(IBM 호환기종, 맥킨토시, 안드로이드 환경에서 구동되는 컴퓨터) 또는 태블릿(윈도우, IOS, 안드로이드) 또는 스마트폰(윈도우, IOS, 안드로이드)에서 실행되는 것을 지칭하고, 저작도구는 IBM 호환기종, 맥킨토시 환경에서 실행되는 편집프로그램을 지칭하므로 본 발명의 구현을 위해서는 이들 컴퓨터 및 입력수단(마우스, 키보드)이 필요하다.

도 1은 본 발명에 따른 프로그램의 직관적인 제작방법을 위한 시스템환경을 나타낸 블록도로서, 메인서버(1), NoSQL서버(2)에 데이터네트워크(3)를 통하여 제 1 내지 제 n PC(4)(5)가 접속하도록 구성된 환경에서 본 발명이 구현되고, 본 발명의 저작도구는 상기 제 1 내지 제 n PC(4)(5) 및 상기 메인서버(1)에 설치된다.

도 2는 본 발명에 따른 프로그램의 직관적인 제작방법을 위한 저작도구에 대한 개념적인 구성을 나타낸 블록도로서, 본 발명의 저작도구의 핵심적인 구성은 화면을 설계하는 화면디자이너모듈(11)과, 그 화면에 탑재된 로직을 설계하는 로직디자이너모듈(13)과, 상기화면디자이너모듈과 상기 로직디자이너모듈의 연결구성을 통해 구동환경이 구현된 상태에 외부 데이터 연동과 조작을 위한 데이터모듈(15)이다.

즉, 사용자가 프로그램의 화면구성을 편집하고 이를 로직과의 연결구성을 보여주는 화면디자이너모듈(11)과, 상기 화면디자이너모듈(13)에서 편집된 프로그램을 상기 화면구성, 상기 연결구성에 따라서 실제 구동환경에 적합하도록 코딩하기 위한 로직디자이너모듈(13)과, 메인서버의 데이터를 클라이언트 PC인 개발환경 내에서 생성, 변경, 수정, 삭제할 수 있고 화면디자이너, 로직디자이너와 데이터를 연결시켜 주는 데이터모듈(15)이 구비된다.

상기 데이터모듈(15)은 메인 서버에 저장되어 있는 데이터들을 클라이언트 PC인 UI 환경에서 쉽게 다룰 수 있게 되므로 사용자는 자신이 직접 서버를 구축하지 않더라도 SaaS(Software as a Service; 하기그림 참조) 형태의 클라우드 서비스 통합개발환경에서 자신의 앱을 손쉽게 개발, 운영해나갈 수 있다.

참고로, 상기 SaaS(Software as a Service)는 "on-demand software"로도 불리며, 소프트웨어 및 관련 데이터는 중앙에 호스팅되고 사용자는 웹 브라우저 등의 클라이언트를 통해 접속하는 형태의 소프트웨어 전달 모델이다.

일반적으로 서버의 백엔드는 클라이언트 단의 프론트엔드 프로그램(앱)으로 데이터를 제공해주고 사용자의 데이터 요청이나 기타 복잡한 로직 수행 등의 여러 가지 작업요청을 처리한다. 소프트웨어 개발 과정에서 네트워크 상의 데이터를 공유하는 형태의 앱들이 대부분이고 이러한 대부분의 앱들은 백엔드 개발 과정이 필수적으로 들어간다. 따라서 백엔드 서버의 개발 없이 데이터를 다루고 프론트의 앱에까지 연결고리를 만들어줄 수 있는 방식은 상당히 획기적이고 간편하며 백엔드 서버 개발의 비용과 시간을 크게 줄일 수 있다.

일반적으로 프로그램 개발 시 백엔드와 프론트앤드의 개발은 따로 구분되어 이에 해당되는 인력도 따로 운영하고 업무도 각각 세분화되고 고도로 전문화되고 있다. 본 발명의 저작도구는 데이터모듈이 백엔드 서버 개발 영역의 기능까지 간편한 UI 방식으로 개발 가능하도록 데이터 모듈 기능을 제공하고 이를 통해 앱 개발에 필요한 필수 요소들이 하나의 통합 개발환경에서 개발 가능해졌다. 앱을 개발하는 사용자는 고도로 전문화된 지식을 개별적으로 전부 습득해야만 하는 부담 없이 간편하고 쉽게 백엔드와 프론트엔드를 동시에 개발 할 수 있다.

데이터모듈(15)에는 NoSQL 서버의 데이터 셋과 동기화되어 데이터 편집이 가능한 데이터트리(151)와 NoSQL 서버의 Reference 경로를 지칭하여 데이터의 필드를 가져와 화면, 로직 디자이너와 결합하는 버킷(152)이 구비된다. 즉, 서버에서 관리하는 데이터들의 조작과 연동을 돕는 모음으로서 데이터의 삽입, 수정, 삭제, 조회하고 데이터 노드를 확장할 수 있는 데이터트리와 상기 화면다자이너모듈과 상기 로직디자이너모듈에 서버 혹은 외부로부터 오는 데이터를 연동, 동기화되도록 연결고리의 역할을 하는 버킷이 있다.

상기 화면디자이너모듈(11)은 화면 디자인에 필요한 컨트롤들이 나열된 도구상자 그리드, 화면 구현에 필요한 모든 컨트롤들, 저작도구에서 개발자에게 작업할 수 있는 화면상 정중앙 공간을 제공하는 프리뷰어(11), 속성을 설정할 수 있는 창으로서 각 컨트롤의 디테일한 속성들을 설정할 수 있는 공간을 제공하는 프라퍼티그리드(12)와 사용자가 원하는 화면을 구성하도록 지원하는 사용자템플릿(113)을 포함한다.

상기 로직디자이너모듈(13)은 실행파일을 추출하기 위해 소스를 해석하는 컴파일러(131), 각 플랫폼에 맞게 지원하도록 소스를 번역하는 부분인 제너레이터(132)를 포함한다. 당연한 말이지만, 상기 제너레이터(132)에서 지원하는 플랫폼이 많아지면 그만큼 얻을 수 있는 추출물도 확장된다.

본 발명의 저작도구는 제너레이터(132)를 통해 각 플랫폼(Android, IOS, Window, Web, MAC 등) 대상에 맞게 네이티브 소스로 변환할 수 있고 이 변환된 소스를 통해 각 플랫폼에 맞는 앱을 한 번에 개발할 수 있다.

저작도구에서 구성한 화면과 로직의 소스 산출물은 각 플랫폼별 코드맵 스크립트에 작성된 언어별 문법에 따라 변환되는데, 코드맵 스크립트는 저작도구에서 제너레이팅을 위해 자체적으로 설계된 문법이다.

이러한 코드맵 스크립트의 구조에 대해서 자세히 살펴보도록 한다.

코드맵 스크립트는 화면과 로직 데이터를 담고 있는 모델의 속성, 함수 혹은 로직과의 연결 관계에서 스크립트와 매칭을 시킨다. 그리고 나서 통합개발환경을 통해 앱을 개발하여 산출된 코드를 매칭된 플랫폼별 코드로 변환하는 과정을 통해 해당 플랫폼의 대상과 속성에 해당하는 코드로 각각 변환하여 해당 플랫폼의 소스 산출물을 생산한다.

코드맵 스크립트의 기본 문법은 다음과 같은 대괄호‘{’,‘}’와 콜론 ‘:’ 으로 이루어져 있고 토큰을 키로, 파라미터를 값으로 매칭하여 사용한다.

예시하면 다음과 같다.

{Token:Parameter, Sub Parameters...}

먼저 키와 값으로 이루어질 수 있는 종류로 Property:<Name>, Function:return, Function:<Name>, Target, Scope:<N>, Line:<N>, EventCallback 등이 있고, Token:Parameter의 내용은 다음과 같다.

서브 파라미터를 예시하면 다음과 같다.

Sub Parameter로 사용되는 inline 값은 참이냐 거짓이냐에 따라 값을 변수로 인식하는지 문자열 자체로 인식하는지를 구분한다.

도 3은 본 발명에 따른 프로그램의 직관적인 제작방법을 위한 저작도구에 대한 화면구성을 나타낸 블록도로서, 저작도구 화면구성은 개략적으로 좌측, 중앙, 우측으로 구분되어 있다.

좌측에는 툴박스가 위치하고, 중앙에는 프리뷰어가 위치하며, 우측에는 프라퍼티그리드(112)와 데이터트리(151)가 위치하며, 클릭하여 선택하는 스토리보드(44)와 템플릿(45)이 중앙 상단에 버튼형태로 위치한다.

툴박스는 좌측 컴포넌트 아이템 창으로 레이아웃 형태를 설정하는 레이아웃(31)이 구비되고, 그 하단에는 그리드, 스크롤, 스택과 같은 서브메뉴(32)가 버튼 형태로 구비된다.

프리뷰어는 중앙 작업공간이고, 이 곳에 컴포넌트(42)를 배치, 이벤트 핸들러와 데이터들(43)을 배치하여 바인딩 하는 곳으로, 컴포넌트의 버튼을 눌렀을 때 발생하는 이벤트와 함수와 해당된 데이터들을 바인딩하는 연결구성으로 이루어진 스토리보드(41)를 시각적으로 디스플레이한다.

데이터(50)는 우측에 탭형태로 위치하여, 데이터는 NoSQL 서버에 제이슨(JSON; JavaScript Object Notation)의 형식으로 저장되어있는 데이터와 동기화되어있는 데이터 트리(52)가 구비된다. 데이터(50)는 탭 형태로 지원되고, 그 옆에는 데이터의 속성을 설정할 수 있는 속성(51)이 탭 형태로 구비된다.

좌측 상단 사각 영역 안에는 스토리보드(Storyboard)와 템플릿(Template)으로 이루어진 두 개의 탭이 있는데, Template 탭을 눌렀을 때의 다음 그림과 같은 화면이 디스플레이된다.

Storyboard가 앱의 화면과 로직을 디자인하는 영역이라고 한다면 Template 탭의 영역은 사용자가 원하는 화면을 구성하여 하나의 화면 컨트롤을 만들어내는 부분이다.

이 부분에 대해 좀 더 이해를 돕기 위해 리스트뷰에 대해서 좀 더 자세히 살펴보도록 한다. 리스트뷰는 다음 그림과 같이 여러 항목들이 반복적으로 나열되는 레이아웃을 말한다.

다시 말해서, 리스트뷰는 여러 반복되는 템플릿 하나하나의 모음으로 이루어져 있고 템플릿 요소 하나에는 사용자가 디자인한 여러 요소들(이미지, 버튼 등)이 하나로 결합되어 있는 상태이다. 이 하나하나의 템플릿들은 서버에서 전달받은 각각의 이미지, 제목 등의 데이터 쌍과 각 요소가 매칭되어 반복적으로 각각의 데이터를 표시하고 화면을 구성하게 되고 이 템플릿들이 모여 하나의 리스트뷰가 된다.

본 발명의 저작도구의 Template 작업 공간은 이러한 하나의 템플릿 화면을 꾸미고 그 템플릿 안의 각 요소들(버튼, 이미지, 텍스트 등)을 배치하고 이에 대응되는 데이터(서버로부터 전달받은)를 매칭하는 곳이다.

예를 들어, 위 그림의 예시와 같은 모양의 템플릿 이름을 ‘mp3 template’라고 하고 이 ‘mp3 template’을 만드는 과정을 살펴본다. 사용자는 템플릿의 이름을 ‘mp3 template’라고 정해주고 이 ‘mp3 template’의 화면을 앨범 이미지뷰, 제목 텍스트뷰, 가수이름 텍스트뷰, 재생버튼 등의 요소로 꾸민다. 그리고 서버로부터 받아온 데이터 필드를 버킷이라는 데이터 모듈을 통해 연결, 매칭하는 과정을 거친다. 이렇게 매칭하는 과정은 서버에서 전달받은 데이터 셋을 템플릿의 어느 요소에 넣어주겠다고 명시해주는 것이다.

이를테면 ‘첫눈처럼 너에게 가겠다’라는 곡의 제목 데이터는 서버에 저장되어 있고 사용자는 서버에 저장되어있는 이 데이터를 앱 실행 시 리스트뷰 안의 하나의 템플릿의 제목에 넣기 위해 템플릿에 배치한 제목 텍스트뷰 요소에 연결해두고 다시 Storyboard로 돌아온다.

그리고 제작한 ‘mp3 template’을 불러와 Listview 레이아웃 컨트롤의 템플릿 연결요소에 연결해준다. 이렇게 하면 리스트뷰는 자기가 ‘mp3 template’을 사용할 것을 알게 되고 템플릿은 리스트뷰의 반복적인 내부 구현 로직에 따라 서버의 데이터 셋을 템플릿 하나하나의 요소와 매칭되게 가져오고 컴파일 시 화면에 보여주는 역할을 하게된다.

사용자가 앱의 화면들을 자신들이 원하는 디자인에 맞게 활용, 재활용 할 수 있도록 하기 위해 템플릿이 활용되며 주로 반복적으로 사용되는 폼, 화면을 위해 템플릿이 구성된다.

그리고 저작도구가 지원하는 컨트롤들(버튼,이미지,텍스트,슬라이드 등등) 이외에 사용자가 직접 원하는 화면을 그룹화하여 사용할 필요가 있을 때 사용자 템플릿이 활용된다.

사용자 템플릿을 UI적으로 제작하여 그룹화하고 이를 버킷의 데이터와 결합하는 방식은 MVVM(Model-view-viewmodel) 패턴에서 뷰의 컨텍스트에 데이터를 바인딩한 것과 같은 방식 그대로를 UI적으로 표현한 부분이라고 할 수 있고 이 MVVM의 구조를 UI화 한 것은 종래기술과 차별화된 부분이다.

본 발명에 따른 저작도구의 우측 데이터(50) 탭에는 NoSQL 서버에 JSON의 형식으로 저장되어있는 데이터와 동기화되어있는 데이터 트리(52)가 다음 그림과 같이 보여진다.

다음 그림과 같이, 데이터 트리에서 사용자는 빨간색의 x버튼을 눌러 데이터를 직접 삭제할 수도 있고 이름과 값의 공란에 데이터를 넣고 추가 버튼을 눌러 데이터를 추가할 수도 있다.

또한 초록색인 +버튼은 클릭 시 부모트리에서 자식 트리로 한 레벨 더 들어가서 값을 넣을 수 있도록 하위 자식 트리를 구성한다. 일반적인 네트워크 통신에서 데이터 형식으로 통용되는 JSON 데이터 형식이 다음과 같은 트리 형식, 키와 값의 형태를 띄기 때문에 이에 최적화된 형태의 구조로 데이터의 편집이 가능하도록 UI를 구성하였다. 아울러 JSON 데이터 형식과 호환성이 높은 NoSQL의 데이터베이스를 사용한다.

또한 데이터모듈이 없는 상태에서 화면디자이너 모듈과 로직디자이너 모듈만으로는 앱이 동작하는 껍데기만 개발할 수 있지만 데이터 모듈과 이 화면디자이너모듈과 로직디자이너모듈을 결합하면 비로소 사용자들끼리 데이터 공유가 가능해지고 서비스가 가능한 형태의 복잡한 앱들을 개발할 수 있게 된다. 사용자는 데이터 트리에서 정말 간단하게 데이터 조회와 삽입, 수정과 삭제가 가능하고, 데이터 조작에 필요한 정말 많은 분량의 소스가 UI 기능 안에 모두 감싸여져 있다.

여기서, 데이터트리는 NoSQL 서버의 데이터를 조작하는데 쓰인다면 버킷은 서버에 저장되어 있는 데이터들을 직접 화면과 로직 디자이너 모듈에 연결해주기 위한 용도로 사용된다.

화면디자이너의 도구상자에서 버킷 컨트롤을 스토리보드 상으로 이동시키면 다음 그림과 같이 버킷 박스가 생성된다.

버킷 박스의 +버튼을 누르면 다음과 같이 서버에 저장되어 있는 데이터 트리의 필드를 선택할 수 있는 팝업이 뜨게 되고, 만약 특정 유저의 이름을 가져오고 싶다면 그 유저의 이름 필드를 체크, 선택하고 완료를 누르게 되면 버킷에 데이터 셋의 경로가 추가된다.

버킷에 데이터 필드의 서버 경로가 추가되면 좌우로 둥근 커넥션 포인트가 생기고 이 연결점을 통해 화면이나 로직 디자인과 서버의 데이터 연결 가능해지며 서버 경로에서 가져오는 데이터는 프로그램 컴파일 시 화면, 로직과 매칭되어 원하는 위치에 표시된다. 이 경로는 다음 그림과 같이 많은 경로를 추가할 수도 있다.

버킷은 필요한 데이터 경로를 담아두고 필요한 화면, 로직에 연결하여 공급하는 바구니와 같은 역할을 하고, 원하는 만큼의 데이터 경로를 추가하여 그때그때 필요한 화면과 로직에 연결하여 사용한다.

버킷은 기존의 서버의 데이터에 접근하는 새로운 개념과 방식을 제공하는데, 기존의 서버 경로로 데이터에 접근하는 방식인 쿼리 형태가 우선적으로 데이터베이스의 테이블이나 데이터 셋에 접근하고 다음으로 해당 필드에 해당하는 데이터를 찾아오는 방식으로 구현하는 과정과는 다르게 버킷은 단지 서버에 저장되어있는 개별적인 데이터의 경로만으로도 그 지점의 특정 데이터 공간 일부 그대로를 UI 상으로 가져오도록 하였다.

이러한 직관적인 표현방식을 통해 특정 경로의 데이터 공간을 손쉽게 통합개발환경 내에 가져오고 데이터를 삽입하거나 경로에 있는 값인 데이터 셋 그대로를 가져올 수 있고, 원하는 필드를 사용자의 필요에 맞게 구성하여 하나의 버킷 안에서 다양한 필드의 경로만 뽑아 새로운 데이터 필드의 셋을 구성하는 방식은 테이블, 패밀리로 데이터 셋을 구성하던 기존의 데이터베이스 방식과는 다르게 좀 더 사용자 측면에서 접근했다.

즉, 버킷은 사용자가 원하는 데이터의 모음만으로 그때그때 데이터베이스의 구조를 재정의할 수 있으며 새로운 데이터셋을 동적으로 구성하고 UI 접근만으로 이 새로 정의된 데이터 셋을 사용할 수 있다.

한편, 본 발명은 다른 프로그래밍 언어로 구현된 외부 모듈을 이용하여 프로그래밍하는 것도 가능하기 때문에 이러한 외부모듈을 이용하는 구성을 살펴보면서, 본 발명에 따른 저작도구의 기능적인 구성을 보다 상세히 살펴보도록 한다.

도 4는 본 발명에 따른 프로그램의 직관적인 제작방법을 위한 저작도구의 기능적 구성을 나타낸 블록도로서, 본 발명에 따른 저작도구는 기능적으로 볼 때, IDE(63; Integrated Development Environment, 통합개발환경 소프트웨어 어플리케이션 인터페이스)와 빌드(65; Build, 일부 기능을 수행하는 소프트웨어모듈)가 주요 구성요소라고 할 수 있는데, 본 발명에서는 상술한 외부모듈인 써드파티 프로그램(3rd Party; 61)도 이용하여 프로그래밍할 수 있다.

IDE(63)에는 프리젠테이션(631), 데이터모델(632), 데이터스토어(633)가 구비되는데, 프리젠테이션(631)에는 레이아웃, 로직, 컴포넌트가 구비되며, 데이터모델(632)에는 레이아웃과 로직이 구비되며, 데이터스토어(633)에는 NoSQL 데이터베이스이 구비된다.

참고로, NoSQL 데이터베이스에 대해서 살펴보면, NoSQL 데이터베이스는 전통적인 관계형 데이터베이스보다 덜 제한적인 일관성 모델을 이용하는 데이터의 저장 및 검색을 위한 매커니즘을 제공한다. 이러한 접근에 대한 동기에는 디자인의 단순화, 수평적 확장성, 세세한 통제를 포함한다. NoSQL 데이터베이스는 단순 검색 및 추가 작업을 위한 매우 최적화된 키 값 저장 공간으로, 레이턴시와 스루풋과 관련하여 상당한 성능 이익을 내는 것이 목적이다

한편, 빌드(65)에는 제너레이터(651), 컴파일러(652)가 구비되는데, 제너레이터(651)에는 레이아웃제너레이터 및 로직제너레이터가 IOS, 안드로이드, 윈도우 별로 각각 구비되고, 컴파일러(652)에는 WPF 컴파일러, Xamarin 컴파일러 등이 구비된다.

그리고, 써드파티프로그램(61)에는 각종 언어로 외부에서 제작된 프로그램 모듈 예컨대, 시스템모듈, 매쓰모듈, 스트링모듈, 서버모듈, 스크립트모듈 등이 구비된다.

상술한 구성을 토대로 본 발명에 따른 직관적 제작방법을 도 4를 참조하여 상세히 살펴보도록 한다.

도 5에는 본 발명에 따른 프로그램의 직관적인 제작방법을 나타낸 흐름도가 도시된다.

사용자가 안드로이드, IOS, 윈도우 중에서 프로그램하고자 하는 운영체제 플랫폼을 선택하여, 저작도구가 운영체제 플랫폼을 입력받는 단계 S1이 진행된다.

저작도구는 사용자가 편집한 내용을 프로그램을 만들기 전에 즉시 볼 수 있도록 디스플레이하는 단계 S2가 수행된다.

사용자가 레이아웃을 드래그 앤 드롭으로 디자인하여 편집하고, 저작도구가 편집된 레이아웃 디자인을 입력받는 단계 S3가 진행된다. 이때, 상기 레이아웃에는 그리드, 스크롤, 스택이 구비되어 있고, 예컨대, 그리드로 원하는 형태로 프로그램을 구성하는 디스플레이영역을 설정할 수 있다.

사용자가 컨트롤을 디자인하여 편집하고, 저작도구가 편집된 컨트롤을 입력받는 단계 S4가 수행된다. 이때, 상기 컨트롤에는 사각형, 버튼, 이미지, 텍스트, 진행바, 슬라이더, 웹뷰가 구비되어 있고, 예컨대, 버튼으로 원하는 형태로 프로그램의 버튼을 만들고, 그 위에 텍스트를 입력하여 이름이 적힌 버튼을 만들 수 있으며, 컨트롤의 속성과 크기나 색상을 편집할 수 있다.

사용자가 상기 컨트롤에 기본로직을 편집하여, 저작도구가 상기 컨트롤에 링크된 기본로직을 입력받는 단계 S5가 진행된다. 이때, 상기 기본로직에는 분기, 가져오기, 설정하기가 구비되어 있고, 이를 통해서 상기 컨트롤과 상기 기본로직을 링크하여, 예컨대 프로그램에 구비된 버튼을 눌렀을 때 링크된 로직이 구동되도록 할 수 있다.

사용자가 상기 컨트롤에 함수를 편집하여, 저작도구가 상기 컨트롤에 링크된 함수를 입력받는 단계 S6이 수행된다. 이때, 상기 함수에는 수학적으로 계산할 수 있는 모든 함수식 예컨대, 사칙연산을 비롯한 각종 수학식이 구비될 수 있고, 이를 통해서 프로그램은 빠른 속도로 계산 결과값을 얻을 수 있다.

프로그램에 필요한 데이터를 추가하여 편집하고, 이들 데이터의 연결관계를 나타낸 데이터트리를 구성하고, 화면디자이너의 툴박스에서 버킷 컨트롤을 스토리보드 상으로 이동시켜 생성하여 편집하도록 입력받는 단계 S7이 진행된다.

상술한 단계 S3 내지 S7을 반복하여 수행하여, 사용자가 제작하고자 하는 프로그램에 더 이상 추가할 레이아웃이나 컨트롤이 존재하지 않으면, 다음 단계를 수행한다.

사용자가 원하는 프로그램 편집이 완료되어서 실행 버튼을 누르면, 저작도구는 프로그램 편집을 종료한다는 명령으로 받아들여서 사용자의 정보입력을 더 이상 수신하지 않는 단계 S8을 진행한다.

저작도구는 상기 단계 S1에서 입력된 플랫폼에 따라서 상기 단계 S3 내지 S7에서 입력된 사용자의 입력정보를 토대로 프로그램을 번역하고 코딩하여, 실행파일을 생성하는 단계 S9를 수행한다.

1 ; 메인서버 2 ; NoSQL서버
3 ; 데이터네트워크 4 ; 제 1 PC
5 ; 제 n PC 11 ; 화면디자이너모듈
13 ; 로직디자이너모듈 15 ; 데이터모듈
111 ; 프리뷰어 112 ; 프라퍼티 그리드
131 ; 컴파일러 132 ; 제너레이터
151 ; 데이터트리 152 ; 버킷
31 ; 레이아웃 32, 34, 36, 38 ; 서브메뉴
33 ; 컨트롤 35 ; 기본로직
37 ; 함수 41 ; 스토리보드
42 ; 컴포넌트 43 ; 데이터들
44 ; 스토리보드 45 ; 템플릿
50 ; 데이터 51 ; 속성
52 ; 데이터트리 61 ; 써드파티
63 ; IDE 65 ; 빌드
631 ; 프리젠테이션 632 ; 데이터모델
633 ; 데이터스토어 651 ; 제너레이터
652 ; 컴파일러

Claims (5)

1. 메인서버(1), NoSQL서버(2)에 데이터네트워크(3)를 통하여 제 1 내지 제 n PC(4)(5)가 접속하도록 구성된 환경에서 본 발명이 구현되고, 저작도구는 상기 제 1 내지 제 n PC(4)(5) 및 상기 메인서버(1)에 설치된 프로그램의 직관적 제작방법에 있어서,
   상기 저작도구는 사용자가 프로그램의 화면구성과 데이터특성을 편집하고 이를 로직과의 연결구성을 보여주는 화면디자이너모듈(11)과;
   상기 화면디자이너모듈(13)에서 편집된 프로그램을 상기 화면구성, 상기 데이터특성, 상기 연결구성에 따라서 실제 구동환경에 적합하도록 코딩하기 위한 로직디자이너모듈(13)과;
   상기 메인서버의 데이터를 클라이언트 PC인 개발환경 내에서 생성, 변경, 수정, 삭제할 수 있고 화면디자이너, 로직디자이너와 데이터를 연결시켜 주는 데이터모듈(15)을 포함하는 프로그램의 직관적인 제작방법.
   
2. 청구항 1에 있어서,
   상기 데이터모듈(15)에는 NoSQL 서버의 데이터 셋과 동기화되어 데이터 편집이 가능한 데이터트리(151)와 NoSQL 서버의 Reference 경로를 지칭하여 데이터의 필드를 가져와 화면, 로직 디자이너와 결합하는 버킷(152)이 구비된 것을 특징으로 하는 프로그램의 직관적 제작방법.
   
3. 저작도구를 구비한 프로그램의 직관적 제작방법에 있어서,
   상기 저작도구는 IDE(Integrated Development Environment, 통합개발환경 소프트웨어 어플리케이션 인터페이스)와 빌드(Build, 일부 기능을 수행하는 소프트웨어모듈)가 구비되고, 외부모듈인 써드파티 프로그램(3rd Party)도 이용하여 프로그래밍하고;
   상기 IDE에는 프리젠테이션, 데이터모델, 데이터스토어가 구비되는데, 프리젠테이션에는 레이아웃, 로직, 컴포넌트가 구비되며, 데이터모델에는 레이아웃과 로직이 구비되며, 데이터스토어에는 NoSQL 데이터베이스이 구비되며;
   상기 빌드에는 제너레이터, 컴파일러가 구비되는데, 제너레이터에는 레이아웃제너레이터 및 로직제너레이터가 IOS, 안드로이드, 윈도우 별로 각각 구비되고, 컴파일러에는 WPF 컴파일러, Xamarin 컴파일러가 구비되며;
   상기 써드파티프로그램에는 각종 언어로 외부에서 제작된 프로그램 모듈 예컨대, 시스템모듈, 매쓰모듈, 스트링모듈, 서버모듈, 스크립트모듈 등이 구비된 것을 특징으로 하는 프로그램의 직관적 제작방법.
   
4. IDE(Integrated Development Environment, 통합개발환경 소프트웨어 어플리케이션 인터페이스)와 빌드(Build, 일부 기능을 수행하는 소프트웨어모듈), 외부모듈인 써드파티 프로그램(3rd Party)도 이용하여 프로그래밍하고, 상기 IDE에는 프리젠테이션, 데이터모델, 데이터스토어가 구비되는데, 프리젠테이션에는 레이아웃, 로직, 컴포넌트가 구비되며, 데이터모델에는 레이아웃과 로직이 구비되며, 데이터스토어에는 NoSQL 데이터베이스이 구비되며, 상기 빌드(80)에는 제너레이터, 컴파일러가 구비되는데, 제너레이터에는 레이아웃제너레이터 및 로직제너레이터가 IOS, 안드로이드, 윈도우 별로 각각 구비되고, 컴파일러에는 WPF 컴파일러, Xamarin 컴파일러가 구비되며, 상기 써드파티프로그램(60)에는 각종 언어로 외부에서 제작된 프로그램 모듈 예컨대, 시스템모듈, 매쓰모듈, 스트링모듈, 서버모듈, 스크립트모듈 등이 구비된 프로그램의 직관적 제작방법에 있어서,
   사용자가 안드로이드, IOS, 윈도우 중에서 프로그램하고자 하는 운영체제 플랫폼을 선택하여, 저작도구가 운영체제 플랫폼을 입력받는 단계 S1;
   저작도구는 사용자가 편집한 내용을 프로그램을 만들기 전에 즉시 볼 수 있도록 디스플레이하는 단계 S2;
   사용자가 레이아웃을 디자인하여 편집하고, 저작도구가 편집된 레이아웃 디자인을 입력받는 단계 S3;
   사용자가 컨트롤을 디자인하여 편집하고, 저작도구가 편집된 컨트롤을 입력받는 단계 S4;
   사용자가 상기 컨트롤에 기본로직을 편집하여, 저작도구가 상기 컨트롤에 링크된 기본로직을 입력받는 단계 S5;
   사용자가 상기 컨트롤에 함수를 편집하여, 저작도구가 상기 컨트롤에 링크된 함수를 입력받는 단계 S6;
   프로그램에 필요한 데이터를 추가하여 편집하고, 이들 데이터의 연결관계를 나타낸 데이터트리를 구성하고, 화면디자이너의 툴박스에서 버킷 컨트롤을 스토리보드 상으로 이동시켜 생성하여 편집하도록 입력받는 단계 S7;
   사용자가 원하는 프로그램 편집이 완료되어서 실행 버튼을 누르면, 저작도구는 프로그램 편집을 종료한다는 명령으로 받아들여서 사용자의 정보입력을 더 이상 수신하지 않는 단계 S8;
   저작도구는 상기 단계 S1에서 입력된 플랫폼에 따라서 상기 단계 S3 내지 S7에서 입력된 사용자의 입력정보를 토대로 프로그램을 번역하고 코딩하여, 실행파일을 생성하는 단계 S9를 포함하는 프로그램의 직관적 제작방법.
   
5. 청구항 4에 있어서,
   상술한 단계 S3 내지 S7을 반복하여 수행하여, 사용자가 제작하고자 하는 프로그램에 더 이상 추가할 레이아웃이나 컨트롤이 존재하지 않으면, 단계 S8을 수행하는 것을 특징으로 하는 프로그램의 직관적 제작방법.
   
   
   

Images