KR101519381B1 - Ｈｔｍｌ５를 이용하여 웹 어플리케이션을 제작하는 방법 및 장치 - Google Patents

Abstract

HTML 언어와 자바스크립트가 포함된 HTML5를 이용하여 웹 어플리케이션을 제작하는 방법 및 장치에 관한 것으로서, 개발 툴이 HTML 언어를 통해 생성된 하나 이상의 태그범위를 뷰 블록으로 각각 변환하고, 하나 이상의 명령에 대한 동작을 수행하는 자바스크립트를 컨트롤 블록으로 각각 변환하고, 뷰 블록 및 컨트롤 블록에 대한 속성을 인지한 사용자의 입력에 따라 개발 툴이 뷰 블록 및 컨트롤 블록을 적층식으로 결합하고, 개발 툴이 결합된 뷰 블록 및 컨트롤 블록에 대하여 적층식 구조의 최하단을 루트로 설정하고, 적층된 순서에 따라 루트의 자식 노드를 설정함으로써, 부모-자식 관계가 성립하는 트리 구조로 치환하고, 개발 툴이 트리 구조로 치환된 뷰 블록 및 컨트롤 블록을 트리 구조에 따라 순차적으로 검색하며, 검색결과 독출된 뷰 블록 및 컨트롤 블록의 소스 코드를 참조하여 HTML 언어로 변환함으로써, 웹 어플리케이션을 제작한다.

Description

ＨＴＭＬ５를 이용하여 웹 어플리케이션을 제작하는 방법 및 장치{Apparatus and method for making web application using html5}

본 발명은 HTML5를 이용하여 웹 어플리케이션을 제작하는 방법에 관한 것으로, 특히, 블록 결합방식을 응용한 그래픽 유저 인터페이스 제작 방법과 이를 웹 어플리케이션 형태로 변환하는 방법에 관한 것이다.

최근 휴대폰 시장에 스마트폰 보급이 많이 증가함에 따라 다양한 스마트폰 기반 어플리케이션들이 선보이고 있다. 앱 생태계(App Environment)를 구성하는 구글 마켓이나 애플의 앱스토어 등에는 스마트폰 기반 어플리케이션이 매일 등록되고 많은 다운로드 횟수를 기록하고 있다.

어플리케이션 개발 전문업체들에게 이러한 현상은 매우 고무적인 부분이지만, 안드로이드 기반의 앱개발이나 IOS 기반의 앱개발은 기기에 종속적이고 일정 수준의 개발 능력을 갖추지 않으면 원하는 수준의 만족할만한 앱을 개발하기가 어렵다. 따라서, 좋은 서비스를 제공할 수 있는 사업자라 할지라도 장치 종속적인 앱개발 환경의 제약 때문에 비용이나 시간 측면에서 어려움을 겪는 경우가 많아 이러한 부분들이 유동적인 서비스 제공환경에 필요한 고객 맞춤형 서비스를 제공하는데 걸림돌이 되고 있다.

앱 개발에 드는 비용과 기간의 제약 때문에 서비스 제공자는 다양한 서비스 제공환경을 앱에 적용하기 어렵고, 이러한 부분은 서비스의 단순화라는 결과를 야기하여 서비스품질(QoS)을 높이는데 장애요소로 작용한다.

한편, 이하에서 인용되는 선행기술 문헌에는 모바일 웹 앱 프레임워크 중 가장 방대하고 객체 지향적으로 설계된 API를 제공하는 자바 스크립트 기반의 프레임워크인 센차 터치(sencha touch)를 소개하고 있다. 하지만, 상기 센차 터치는 드래그앤드랍(drag & drop)을 이용하여 개발할 수 없으며, 모바일의 디바이스에 대해 접근할 수 없다는 치명적인 단점이 존재한다.

이와 같은 관점에서, 앱 개발의 장치종속적인 어려움, 개발시간의 문제, 업데이트 및 서비스 수정에 대한 배포 문제를 개선할 수 있는 기술적 수단이 필요하다는 사실을 알 수 있다.

Sencha Touch 2: Up and Running, O'Reilly Media, Adrian Kosmaczewski, 2013.

따라서, 본 발명이 해결하고자 하는 첫 번째 과제는 HTML의 태그범위와 자바스크립트를 각각 뷰 블록 및 컨트롤 블록으로 변환하고, 변환된 블록간의 속성을 고려하여 결합하며, 결합된 블록을 트리 구조로 저장한 후 HTML언어로 변환하여 웹 어플리케이션을 제작하는 방법을 제공하는데 있다.

본 발명이 해결하고자 하는 두 번째 과제는 HTML의 태그범위와 자바스크립트를 각각 뷰 블록 및 컨트롤 블록으로 변환하고, 변환된 블록간의 속성을 고려하여 결합하며, 결합된 블록을 트리 구조로 저장한 후 HTML언어로 변환하여 웹 어플리케이션을 제작하는 장치를 제공하는데 있다.

또한, 상기된 방법을 컴퓨터에서 실행시키기 위한 프로그램을 기록한 컴퓨터로 읽을 수 있는 기록 매체를 제공하는데 있다.

상기 첫 번째 과제를 해결하기 위하여, 본 발명의 일 실시예에 따른 HTML 언어와 자바스크립트(javascript)가 포함된 HTML5를 이용하여 웹 어플리케이션(web application)을 제작하는 방법에 있어서, 개발 툴(tool)이 상기 HTML 언어를 통해 생성된 하나 이상의 태그범위를 뷰(view) 블록으로 각각 변환하고, 하나 이상의 명령에 대한 동작을 수행하는 자바스크립트를 컨트롤(control) 블록으로 각각 변환하는 단계; 상기 뷰 블록 및 상기 컨트롤 블록에 대한 속성을 인지한 사용자의 입력에 따라 상기 개발 툴이 상기 뷰 블록 및 상기 컨트롤 블록을 적층식으로 결합하는 단계; 상기 개발 툴이 상기 결합된 뷰 블록 및 컨트롤 블록에 대하여 상기 적층식 구조의 최하단을 루트로 설정하고, 적층된 순서에 따라 상기 루트의 자식 노드를 설정함으로써, 부모-자식 관계가 성립하는 트리 구조로 치환하는 단계; 및 상기 개발 툴이 상기 트리 구조로 치환된 뷰 블록 및 컨트롤 블록을 상기 트리 구조에 따라 순차적으로 검색하고, 상기 검색결과 독출된 뷰 블록 및 컨트롤 블록의 소스 코드를 참조하여 HTML 언어로 변환함으로써, 상기 웹 어플리케이션을 제작하는 방법을 제공한다.

상기된 일 실시예에 따른 상기 뷰 블록 및 상기 컨트롤 블록은, 상기 뷰 블록 및 상기 컨트롤 블록 각각에 대하여 속성으로 타입, 레이어(layer), 이름, 소스코드, 결합 인자, 색상, 및 크기를 포함하는 것을 특징으로 하는 방법일 수 있다.

상기된 일 실시예에 따른 상기 레이어는, 상기 뷰 블록 및 상기 컨트롤 블록을 바인딩(binding)하는 플레이트(plate) 블록이 포함된 제 1 레이어, 상기 뷰 블록 및 상기 컨트롤 블록이 포함된 제 2 레이어, 및 상기 제 2 레이어에 포함된 블록들의 연결 설정을 하는 영역별 세부 블록이 포함된 제 3 레이어로 구성되는 것을 특징으로 하는 방법일 수 있다.

상기된 일 실시예에 따른 상기 블록을 적층식으로 결합하는 것은, 상기 적층될 블록 중 상단에 위치한 블록의 레이어가 하단에 적층될 블록의 레이어 보다 상위 레이어일 경우 상기 블록을 적층하는 것을 특징으로 하는 방법일 수 있다.

상기된 일 실시예에 따른 상기 개발 툴은 사용자로부터 상기 개발 툴 사용에 대하여 난이도에 따라 분류된 세 가지의 수준을 입력받고, 상기 입력된 세 가지의 수준에 따라 상기 블록 결합에 사용되는 사용자 인터페이스를 결정하는 것을 특징으로 하는 방법일 수 있다.

상기된 일 실시예에 따른 상기 트리 구조로 치환되는 블록 중에서 동일한 상기 태그범위를 포함하는 블록이 존재할 경우, 상기 트리 구조로 치환된 블록의 하위 노드에 상기 동일한 태그범위를 포함하는 블록을 서브 트리 구조로 연결하는 것을 특징으로 하는 방법일 수 있다.

상기 두 번째 과제를 해결하기 위하여, 본 발명의 일 실시예에 따른 HTML 언어와 자바스크립트가 포함된 HTML5를 이용하여 웹 어플리케이션을 제작하는 장치에 있어서, 뷰 블록 및 컨트롤 블록에 대한 속성을 인지한 사용자로부터 결합될 블록을 입력받는 입력부; 상기 HTML 언어를 통해 생성된 하나 이상의 태그범위를 상기 뷰 블록으로 각각 변환하고, 하나 이상의 명령에 대한 동작을 수행하는 자바스크립트를 컨트롤 블록으로 각각 변환하고, 상기 입력받은 블록을 적층식으로 결합하고, 상기 결합된 블록에 대하여 상기 적층식 구조의 최하단을 루트로 설정하고, 적층된 순서에 따라 상기 루트의 자식 노드를 설정하고, 부모-자식 관계가 성립하는 트리 구조로 치환하며, 상기 트리 구조로 블록을 상기 트리 구조에 따라 순차적으로 검색함으로써, 상기 검색결과 독출된 블록의 소스 코드를 참조하여 HTML 언어로 변환하는 처리부; 및 상기 각각 변환된 뷰 블록 및 컨트롤 블록을 출력하여 상기 사용자로부터 결합에 이용될 블록의 선택을 유도하며, 상기 HTML 언어로 변환되어 제작된 상기 웹 어플리케이션을 출력하는 출력부를 포함하는 장치를 제공한다.

상기된 일 실시예에 따른 상기 뷰 블록 및 상기 컨트롤 블록은, 상기 뷰 블록 및 상기 컨트롤 블록 각각에 대하여 속성으로 타입, 레이어, 이름, 소스코드, 결합 인자, 색상, 및 크기를 포함하되, 상기 레이어는 상기 뷰 블록 및 상기 컨트롤 블록을 바인딩하는 플레이트 블록이 포함된 제 1 레이어, 상기 뷰 블록 및 상기 컨트롤 블록이 포함된 제 2 레이어, 및 상기 제 2 레이어에 포함된 블록들의 연결 설정을 하는 영역별 세부 블록이 포함된 제 3 레이어로 구성되는 것을 특징으로 하는 장치일 수 있다.

상기된 일 실시예에 따른 상기 처리부는, 상기 적층될 블록 중 상단에 위치한 블록의 레이어가 하단에 적층될 블록의 레이어 보다 상위 레이어일 경우 상기 블록을 적층하는 것을 특징으로 하는 장치일 수 있다.

상기된 일 실시예에 따른 상기 사용자로부터 상기 블록 사용에 대하여 난이도에 따라 분류된 세 가지의 수준을 입력받고, 상기 입력된 세 가지의 수준에 따라 상기 블록 결합에 사용되는 사용자 인터페이스를 결정하되, 상기 세 가지의 수준 중 기능 사용의 입출력을 이해하는 제 1 수준은 뷰 블록 및 컨트롤 블록이 미리 결합되어 패키지화된 블록을 제공하고, 상기 세 가지의 수준 중 상기 블록 결합을 변경 및 수정할 수 있는 제 2 수준은 블록 결합에 사용되는 뷰 블록 및 컨트롤 블록을 제공하며, 상기 세 가지의 수준 중 코드를 이용하여 기능 생성을 할 수 있는 제 3 수준은 코드를 생성 및 수정할 수 있는 블록을 제공하는 것을 특징으로 하는 장치일 수 있다.

상기된 일 실시예에 따른 상기 트리 구조로 치환되는 블록 중에서 동일한 상기 태그범위를 포함하는 블록이 존재할 경우, 상기 트리 구조로 치환된 블록의 하위 노드에 상기 동일한 태그범위를 포함하는 블록을 서브 트리 구조로 연결하는 것을 특징으로 하는 장치일 수 있다.

상기 다른 기술적 과제를 해결하기 위하여, 본 발명은 상기된 HTML5를 이용하여 웹 어플리케이션을 제작하는 방법을 컴퓨터에서 실행시키기 위한 프로그램을 기록한 컴퓨터로 읽을 수 있는 기록 매체를 제공한다.

본 발명에 따르면, HTML의 구조를 개발 툴에서 블록 형태의 조합으로 변형하여 시각화함으로써, 사용자가 직관적으로 블록을 쌓는 방식으로 웹 어플리케이션을 제작할 수 있는 효과가 있다. 또한, 미리 구성된 블록 구조를 패키지화하여 재사용할 수 있으므로, 생산성이 우수하며, 초보자도 쉽게 일정 수준 이상의 웹 어플리케이션을 개발할 수 있다.

도 1은 본 발명의 실시예들이 채택하고 있는 HTML5를 이용하여 웹 어플리케이션을 제작하는 방법을 도시한 흐름도이다.
도 2a는 본 발명의 일 실시예에 따른 사용자 수준별 기능 분류 기준을 도시한 도면이다.
도 2b는 본 발명의 일 실시예에 따른 제 1 수준인 사용자에게 제공되는 웹 어플리케이션 제작 과정을 도시한 도면이다.
도 2c는 본 발명의 일 실시예에 따른 제 2 수준인 사용자에게 제공되는 웹 어플리케이션 제작 과정을 도시한 도면이다.
도 2d는 본 발명의 일 실시예에 따른 제 3 수준인 사용자에게 제공되는 웹 어플리케이션 제작 과정을 도시한 도면이다.
도 3은 본 발명의 일 실시예에 따른 레이어에 따라 구분되는 블록을 도시한 도면이다.
도 4는 본 발명의 일 실시예에 따른 개발 툴에서 블록 결합의 예시하여 도시한 도면이다.
도 5a는 본 발명의 일 실시예에 따른 컨트롤 블록을 예시하여 도시한 도면이다.
도 5b는 본 발명의 일 실시예에 따른 블록을 결합된 블록을 저장하는 과정을 도시한 도면이다.
도 5c는 본 발명의 일 실시예에 따른 코드 에디팅 과정을 도시한 도면이다.
도 6은 본 발명의 일 실시예에 따른 개발 툴에서의 이벤트 등록과 소스코드 반영을 도시한 도면이다.
도 7은 본 발명의 일 실시예에 따른 트리 구조를 도시한 도면이다.
도 8은 본 발명의 일 실시예에 따른 확장 블록에 대한 연결 기법을 도시한 도면이다.
도 9는 본 발명의 실시예들이 채택하고 있는 HTML5를 이용하여 웹 어플리케이션을 제작하는 장치를 도시한 블록도이다.

본 발명의 실시예들을 설명하기에 앞서, 기존의 웹 어플리케이션 제작 방법에서 발생하는 문제점들을 검토한 후, 이들 문제점을 해결하기 위해 본 발명의 실시예들이 채택하고 있는 기술적 수단을 개괄적으로 소개하도록 한다.

종래의 웹 어플리케이션 개발도구는 해당 언어를 충분히 숙달하여야만 어플리케이션을 개발할 수 있다는 치명적인 단점이 존재한다.

따라서, 본 발명의 실시예들은 드래그앤드랍 조작을 이용하여 시각화된 기능 블록을 위로 쌓아 올리는 방식으로 마크업 언어(Markup Language) 형태의 프로그래밍 언어를 사용할 수 있도록 하고, HTML5와 자바스크립트의 기능을 블록으로 치환하여 단순 조립으로 기능이 구현되는 어플리케이션 개발 도구를 생성하여 초보자도 쉽게 HTML5기반의 웹 어플리케이션을 제작할 수 있는 기술적 수단을 제안하고자 한다.

이하에서는 도면을 참조하여 본 발명의 실시예들을 구체적으로 설명하도록 한다. 다만, 하기의 설명 및 첨부된 도면에서 본 발명의 요지를 흐릴 수 있는 공지 기능 또는 구성에 대한 상세한 설명은 생략한다. 또한, 도면 전체에 걸쳐 동일한 구성 요소들은 가능한 한 동일한 도면 부호로 나타내고 있음에 유의하여야 한다.

도 1은 본 발명의 실시예들이 채택하고 있는 HTML5를 이용하여 웹 어플리케이션을 제작하는 방법을 도시한 흐름도로서, HTML 언어와 자바스크립트(javascript)가 포함된 HTML5를 이용하여 웹 어플리케이션(web application)을 제작하는 방법에 있어서, 개발 툴(tool)이 상기 HTML 언어를 통해 생성된 하나 이상의 태그범위를 뷰(view) 블록으로 각각 변환하고, 하나 이상의 명령에 대한 동작을 수행하는 자바스크립트를 컨트롤(control) 블록으로 각각 변환하고, 상기 뷰 블록 및 상기 컨트롤 블록에 대한 속성을 인지한 사용자의 입력에 따라 상기 개발 툴이 상기 뷰 블록 및 상기 컨트롤 블록을 적층식으로 결합하고, 상기 개발 툴이 상기 결합된 뷰 블록 및 컨트롤 블록에 대하여 상기 적층식 구조의 최하단을 루트로 설정하고, 적층된 순서에 따라 상기 루트의 자식 노드를 설정함으로써, 부모-자식 관계가 성립하는 트리 구조로 치환하고, 상기 개발 툴이 상기 트리 구조로 치환된 뷰 블록 및 컨트롤 블록을 상기 트리 구조에 따라 순차적으로 검색하며, 상기 검색결과 독출된 뷰 블록 및 컨트롤 블록의 소스 코드를 참조하여 HTML 언어로 변환함으로써, 상기 웹 어플리케이션을 제작한다.

보다 구체적으로, S110 단계에서, 개발 툴이 상기 HTML 언어를 통해 생성된 하나 이상의 태그범위를 뷰 블록으로 각각 변환하고, 하나 이상의 명령에 대한 동작을 수행하는 자바스크립트를 컨트롤 블록으로 각각 변환한다. 다시 말해, 상기 HTML5 어플리케이션은 크게 HTML 언어 부분과 자바스크립트 부분으로 구성될 수 있다. 여기서, 상기 HTML언어 부분은 어플리케이션에서 화면에 보이는 부분을 담당하며 모델-뷰-컨트롤(model-view-control) 패턴 개발 방식에 의하면 뷰 파트에 해당할 수 있다. 또한, 상기 자바스크립트 부분은 상기 개발 패턴에서 컨트롤 파트에 해당되는 부분으로서, 사용자가 특정 이벤트(버튼을 누른다거나)를 수행하거나 동작이 필요할 때 작동하는 역할을 수행할 수 있다.

따라서, 본 발명에서는 상기 HTML 부분과 상기 자바스크립트를 블록 형태로 시각화하여 조립하는 방법일 수 있다. 여기서, 상기 블록 형태로 시각화하기 위해서는 상기 HTML은 태그 범위를 하나의 블록으로 변환할 수 있다. 예를 들어, <div> … </div>는 하나의 div블록으로 변환될 수 있다. 즉, 상기 HTML은 마크업 언어이므로 시작태그와 끝 태그의 조합으로 표현되기 때문에 태그의 시작과 끝을 포함하는 하나의 덩어리를 블록으로 표현할 수 있다. 따라서, 상기 해당하는 덩어리를 블록으로 표현하여 시각화함으로써, 블록의 위치가 상기 HTML의 태그 간의 포함관계를 나타낼 수 있다.

한편, 상기 자바스크립트는 기본 한 덩어리가 절차적 프로그래밍 언어에서의 함수와 동일할 수 있다. 따라서, func(){ … } 에 해당하는 부분을 하나의 덩어리로 간주하여 블록 형태로 시각화할 수 있다. 여기서, 상기 자바스크립트 블록은 웹 어플리케이션에서 기술될 때 특정 위치를 요구하지 않으므로 블록 조합을 코드로 재변환할 때 유연하게 순차적으로 기술할 수 있다.

이후, 변환된 HTML 블록과 자바 스크립트 블록은 분리된 영역에서 개별적으로 조립할 수 있다. 예를 들어, 상기 HTML 블록 조립 영역에서 버튼 블록을 쌓고 자바스크립트 영역에서 버튼 클릭 함수에 대한 블록을 쌓았다면 HTML 블록에서 해당 자바스크립트 블록을 선택연결 할 수 있다. 여기서, 상기 HTML 블록에서 해당 자바스크립트 블록을 선택 연결하는 것은 이하에서 S120 단계에서보다 구체적으로 설명하도록 한다.

한편, 본 발명에서 제안하는 개발 툴은 사용자의 수준을 고려한 UI/UX 조립환경을 구축할 수 있다.

도 2a는 본 발명의 일 실시예에 따른 사용자 수준별 기능 분류 기준을 도시한 도면으로서, 상기 개발 툴은 사용자로부터 상기 개발 툴 사용에 대하여 난이도에 따라 분류된 세 가지의 수준을 입력받고, 상기 입력된 세 가지의 수준에 따라 상기 블록 결합에 사용되는 사용자 인터페이스를 결정할 수 있다. 본 발명에서는 설명의 이해를 돕기 위하여 사용자 수준에 따른 구분을 제 1 수준인 초급자(21), 제 2 수준인 중급자(22), 제 3 수준인 고급자(33)로 구분하여 설명하도록 한다. 상기 수준에 따른 구분은 상황에 따라 세분화하거나 단순화할 수 있다.

보다 구체적으로, 사용자는 초보자(21), 중급자(22), 고급자(33)로 수준별로 나누어진 블록단위의 기능 요소들을 블록의 드래그앤드랍을 통해 계층적, 적층적으로 조립할 수 있는 인터페이스를 제공받아 웹 어플리케이션에 대한 다양한 기능을 구현할 수 있으며, 파트별 부품 조합을 익스포트(export) 및 임포트(import) 하여 미리 디자인된 부분들을 쉽게 이용하고 템플릿을 이용하여 기존의 경험적 요소들을 쉽게 습득할 수 있다. 이러한, 부분들은 서비스 개발자가 코드 종속적 환경에서 벗어날 수 있고 기획했던 부분들을 직관적으로 판단하여 앱 개발 과정에서 발생할 수 있는 문제점을 줄일 수 있고, 유지보수 측면의 효율성을 높일 수 있다.

도 2b는 본 발명의 일 실시예에 따른 제 1 수준인 사용자에게 제공되는 웹 어플리케이션 제작 과정을 도시한 도면으로서, 상기 세 가지의 수준 중 기능 사용의 입출력을 이해하는 제 1 수준은, 뷰 블록 및 컨트롤 블록이 미리 결합되어 패키지화된 블록(24)을 제공할 수 있다. 즉, 초급자(21)는 기능 사용의 입출력을 이해하는 수준의 개발자로서 블랙박스 형태로 블록의 패키지(24)를 이용할 수 있다. 예를 들어, 초급자의 개발자(21)는 '사진 버튼을 누르면 사진이 찍힌다.'의 이해 수준을 포함하는 개발자일 수 있다.

도 2c는 본 발명의 일 실시예에 따른 제 2 수준인 사용자에게 제공되는 웹 어플리케이션 제작 과정을 도시한 도면으로서, 상기 세 가지의 수준 중 상기 블록 결합(26)을 변경 및 수정할 수 있는 제 2 수준은, 블록 결합에 사용되는 뷰 블록 및 컨트롤 블록(25)을 제공할 수 있다. 즉, 중급자(22)는 컴포넌트 블록조합(26)을 변경하거나 수정할 수 있는 수준을 가진 개발자(22)로서 세부 컴포넌트 블록(25)을 사용하여 개발을 할 수 있다. 중급자(22)는 기능 수행을 위해 어떠한 요소가 필요한지 이해할 수 있는 수준의 개발자일 수 있으며, 예를 들어 카메라 어플에서 카메라 보정기능 추가, 플래시 on/off 등의 추가적인 기능을 더하거나 변경할 수 있는 이해 수준을 포함하는 개발자일 수 있다.

도 2d는 본 발명의 일 실시예에 따른 제 3 수준인 사용자에게 제공되는 웹 어플리케이션 제작 과정을 도시한 도면으로서, 상기 세 가지의 수준 중 코드를 이용하여 기능 생성을 할 수 있는 제 3 수준은, 코드를 생성 및 수정할 수 있는 블록(27)을 제공할 수 있다. 즉, 고급자(23)는 코드(27)를 이용하여 기능의 구현이 가능하고 컴포넌트 블록(26)을 생성할 수 있는 개발자(23)로서, 이때 독자적인 컴포넌트 블록(26)을 생성할 수 있다. 고급자(23)는 각 기능 요소에 대한 세부 수정 및 블록을 창작하여 사용할 수 있는 수준의 개발자일 수 있다. 예를 들어, 카메라 어플에서 파노라마 효과, 포토샵 효과 등 세부 코딩이 필요한 요소를 추가하여 작성할 수 있는 수준을 포함하는 개발자일 수 있다.

이제 다시 도 1로 돌아가 S110 단계에 이후를 설명하도록 한다.

S120 단계에서, 상기 뷰 블록 및 상기 컨트롤 블록에 대한 속성을 인지한 사용자의 입력에 따라 상기 개발 툴이 상기 뷰 블록 및 상기 컨트롤 블록을 적층식으로 결합한다.

보다 구체적으로, 본 발명에서 블록 결합에 이용되는 블록을 위에서 아래로 결합하는 방식으로 코드 간의 결합을 구현하므로, 이에 대해서 레고의 블록 쌓기처럼 기능을 구현하기 위한 데이터 설계와 저장이 필요할 수 있다. 따라서, 이러한 부분을 구현하기 위하여 마크업 언어를 위한 라벨링 스킴(labeling scheme)을 적용함으로써, 개발 툴에서 사용자가 생성하고자 하는 블록을 적층식으로 결합할 수 있다. 여기서, 상기 각각의 블록에는 속성으로 타입, 레이어, 이름, 소스코드, 결합 인자, 색상, 및 크기를 포함할 수 있다.

도 3은 본 발명의 일 실시예에 따른 레이어에 따라 구분되는 블록을 도시한 도면으로서, 본 발명의 실시예에서는 이해를 돕기 위하여 상기 레이어에 대한 구분을 레이어 0(31), 레이어 1(32), 및 레이어 2(33)로 구분하였다.

보다 구체적으로, 상기 레이어 0(31)은 상기 뷰 블록 및 상기 컨트롤 블록을 바인딩하는 플레이트 블록이 포함하고, 상기 레이어 1(32)은 상기 뷰 블록 및 상기 컨트롤 블록이 포함하며, 상기 레이어 2(33)는 상기 레이어 1(32)에 포함된 블록들의 연결 설정을 하는 영역별 세부 블록으로 구성될 수 있다.

또한, 상기 블록을 적층식으로 결합하는 것은, 상기 적층될 블록 중 상단에 위치한 블록의 레이어가 하단에 적층될 블록의 레이어 보다 상위 레이어일 경우 상기 블록을 적층할 수 있다.

도 4는 본 발명의 일 실시예에 따른 개발 툴에서 블록 결합의 예시하여 도시한 도면이다.

보다 구체적으로 도 4의 개발 툴에서 왼쪽의 메뉴(41)는 블록 조합에 사용되는 블록이 나열된 것이며, 왼쪽 메뉴(41)에 위치한 블록들을 가운데 화면인 메인테이블(42)로 드래그앤드랍 하여 블록을 조립하고 웹 어플리케이션을 제작할 수 있다. 여기서, 왼쪽 메뉴(41)의 패키지 블록(package block)은 코드 세부 구현이 어려운 사용자를 위해 미리 제공하는 템플릿형태의 블록 조합일 수 있다.

우선, 어플리케이션을 제작하기 위하여 밑판인 플레이트 블록(43)을 왼쪽 메뉴(41)로부터 드래그앤드랍을 통해 메인테이블(42)에 배치할 수 있다. 여기서, 플레이트 블록(43)은 뷰 블록(44)과 컨트롤 블록(45)을 결합하는 상위블록일 수 있다. 이후, 뷰 블록(44) 및 컨트롤 블록(45)을 왼쪽 메뉴(41)로부터 드래그앤드랍을 통해 플레이트 블록(43) 위에 배치할 수 있다. 여기서, 왼쪽 메뉴(41)의 블록을 선택할 경우, 메인테이블(42)에 배치된 블록들 중 상기 선택된 블록을 배치할 수 있는 블록의 테두리에 하이라이팅이 됨으로써, 조립 가능한 블록이 같이 표시되어 사용자의 선택을 쉽게 유도할 수 있다. 이후, 왼쪽 메뉴(41)로부터 세부블록(46)을 드래그앤드랍을 통해 배치된 뷰 블록(44) 위에 배치할 수 있다. 예를 들어, 뷰 블록(44)에 HTML 컨포넌트가 배치되어, 왼쪽 메뉴(41)에서 lv.3 항목에서 라벨 블록을 끌어와 배치할 경우, 상기 라벨 블록은 상위블록인 뷰 블록(44)에만 결합될 수 있다. 또한, 이미 조립된 블록과 새 블록은 결합되기 전에는 독립적으로 움직이며, 상위 블록과 조립된 후에는 동일한 블록으로 함께 움직일 수 있다. 이후, 상기 라벨 블록의 화살표표시 버튼을 통해 내용을 수정할 경우 실행 버튼(49)을 통해 결과물을 확인할 수 있다. 이와 같은 방식으로 세부 블록을 뷰 블록 위에 배치하여 사용자가 원하는 블록을 결합할 수 있다.

이후, 웹 어플리케이션에서 자바스크립트로 변환되어 동적 이벤트를 관리하는 컨트롤 블록(45)에 왼쪽 메뉴(41)에서 세부 블록(46)인 코드 블록을 드래그앤드랍을 통해 컨트롤 블록(45) 위쪽에 배치할 수 있다. 여기서, 코드에 필요한 부분은 자유롭게 수정 가능할 수 있다. 예를 들어, 카메라 셋을 상기 코드블록을 넣으면 웹 어플리케이션에서 해당 기기의 카메라 센서를 구동할 수 있다. 이후, 뷰 블록(44)에 배치된 세부 블록(46)인 버튼 블록에 대한 버튼을 작동시키기 위해 왼쪽 메뉴(41)에서 세부 블록(46)인 함수블록을 끌어와서 컨트롤 블록(45) 위에 배치할 수 있다. 여기서, 아래쪽에 배치된 상태창(48)에서는 실제 구현되는 코드를 미리 볼 수 있다.

이후, 뷰 블록(44) 위에 배치된 세부 블록(46) 하단에 위치한 별모양 표시를 통해 컨트롤 블록(45)에 등록된 세부 블록(46)과 연결하여 상기 버튼을 동작시킬 수 있도록 등록된 함수에 연결할 수 있다. 이후, 실행(49)을 통해 제작된 웹 어플리케이션의 결과물을 확인할 수 있다.

도 5a는 본 발명의 일 실시예에 따른 컨트롤 블록을 예시하여 도시한 도면이다.

보다 구체적으로, X 표시(51)는 해당 블록의 삭제이고, @표시(52)는 해당 블록을 트레이에 등록할 수 있고,

표시(53)는 해당 블록의 코드를 에디팅(editing)할 수 있는 기능을 제공한다. 여기서, 상기 기능들은 다른 모든 블록에서 동일하게 사용 가능할 수 있다.

도 5b는 본 발명의 일 실시예에 따른 블록을 결합된 블록을 저장하는 과정을 도시한 도면으로서, 상기 적층식으로 결합된 블록을 저장(52)할 경우, 상기 저장 시점에서 결합된 블록에 대한 하위 블록도 함께 저장되며, 상기 저장된 블록들은 상시 재사용이 가능할 수 있다.

보다 구체적으로, 블록 등록의 구현에 대한 예시로서, 블록을 트레이(54)에 저장하면, 해당 시점의 블록 상태 그대로 트레이(54)에 저장될 수 있다. 즉, 저장된 블록 안에 포함된 하부블록도 함께 트레이에 등록되며, 등록된 블록을 메인 테이블로 드랍할 경우 새로운 컴포넌트(55)로 재생성되어 블록을 재사용할 수 있다. 해당 시점에 대한 값으로 저장되므로 블록 객체의 독립성을 유지할 수도 있다.

도 5c는 본 발명의 일 실시예에 따른 코드 에디팅 과정을 도시한 도면이다.

보다 구체적으로, 코드 에디팅의 구현에 대한 것으로서,

표시(53)를 통해 코드를 수정할 수 있는 블록 창(56)을 사용할 수 있고, 블록 창(56)에 포함된 코드를 에디팅하여 블록을 수정할 수 있으며, 블록 창(56)을 닫으며 에디팅된 코드 내용이 저장될 수 있다.

도 6은 본 발명의 일 실시예에 따른 개발 툴에서의 이벤트 등록과 소스코드 반영을 도시한 도면으로서, mvc 개발 패턴 기반의 동적 어플리케이션 환경을 위한 자바스크립트 이벤트 핸들링 기법일 수 있다.

보다 구체적으로, 뷰 블록 위에 배치된 세부 블록(61) 하단에 위치한 별모양 표시를 통해 컨트롤 블록에 등록된 세부 블록(62)과 연결할 수 있는 선택 창(62)에서 상기 버튼을 동작시킬 수 있도록 등록된 함수에 연결할 수 있다. 예를 들어, 뷰 블록에 배치된 세부 블록(61)에서 컨트롤 블록에 배치된 함수 중 'window msg'함수(62)를 선택할 경우 이벤트 등록과 소스 코드에 'window msg()'가 반영될 수 있다. 즉, 뷰 파트와 컨트롤 파트의 연동을 손쉽게 하는 기법으로서 등록된 함수를 선택 클릭할 수 있도록 구현 설계하여 클릭 UI형태로 자바스크립트를 웹 어플리케이션에 적용할 수 있다.

이제 다시 도 1로 돌아가 S120 단계 이후를 설명하도록 한다.

S130 단계는 이하에서 도 7을 통해 보다 구체적으로 설명하도록 한다.

도 7은 본 발명의 일 실시예에 따른 트리 구조를 도시한 도면이다.

보다 구체적으로, 상기 개발 툴이 상기 결합된 뷰 블록 및 컨트롤 블록에 대하여 상기 적층식 구조의 최하단을 루트로 설정하고, 적층된 순서에 따라 상기 루트의 자식 노드를 설정함으로써, 부모-자식 관계가 성립하는 트리 구조로 치환한다. 다시 말해, S120 단계에서 결합한 적층식 블록 조합 구조를 바탕으로 블록들 사이의 부모-자식 관계가 성립하는 트리 구조로 블록을 저장할 수 있다. 이러한 저장 방식은 구현 단계인 S140 단계에서 마크업 언어의 표현 개념을 그대로 이용할 수 있으므로, 직관적인 구조를 설계할 수 있으며, 마크업 언어로 출력하는 웹 어플리케이션 환경에서 구성 컴포넌트 트리에 대한 재귀적 탐색을 이용하여 컴파일할 수 있다는 장점을 가질 수 있다.

한편, 도 8은 본 발명의 일 실시예에 따른 확장 블록에 대한 연결 기법을 도시한 도면으로서, 상기 트리 구조로 치환되는 블록 중에서 동일한 상기 태그범위를 포함하는 블록이 존재할 경우, 상기 트리 구조로 치환된 블록의 하위 노드에 상기 동일한 태그범위를 포함하는 블록을 서브 트리 구조로 연결할 수 있다.

보다 구체적으로, 블록 적층 방식의 시각적 한계부분인 다중 적층 블록 쌓기에 대하여 트리 구조에서의 디캄퍼지션 스킴(pruning: 가지치기))을 이용하여 여러 개의 블록이 중첩될 경우 유사레벨의 블록을 연결해주는 방식으로 무한 쌓기 기능을 구현하여 웹 환경에서 발생할 수 있는 다양한 구현 환경을 유연하게 적용할 수 있다. 즉, 본 발명의 실시예에서 블록들은 조합되더라도 화면에 표현될 때 작은 크기의 단일 블록으로 표현될 수 있다. 따라서, 각 블록 내부를 표현하기 위해서는 블록 내부를 표현하기 위해 해당 블록을 노드로 하는 다른 트리 구조와 연결할 수 있다. 상기 각각 블록마다 세부 블록이 존재할 수 있으므로, 보여지는 부분의 트리 노드에 해당하는 블록을 제외하고는 각 블록 노드의 하위 노드를 가지치기하여 별개의 서브 트리로 저장하여 이용할 수 있다. 예를 들어, div 블록(73) 안에 div 블록이 추가로 들어가는 것은 무한으로 연결할 수 있다. 또한, div 블록(73) 안에 버튼 블록과 div 블록을 연결하고, 또 버튼 블록을 연결할 수도 있다. 여기서, 상기 유사레벨이란 예를 들어 HTML에서 표현될 수 있는 태그 상의 위치가 <body> 태그 안에서는 어디든 들어갈 수 있다는 의미일 수 있다.

이제 다시 도 1로 돌아가 S130 단계 이후를 설명하도록 한다.

S140 단계에서, 상기 개발 툴이 상기 트리 구조로 치환된 뷰 블록 및 컨트롤 블록을 상기 트리 구조에 따라 순차적으로 검색하고, 상기 검색결과 독출된 뷰 블록 및 컨트롤 블록의 소스 코드를 참조하여 HTML 언어로 변환함으로써, 상기 웹 어플리케이션을 제작한다. 즉 상기 트리 구조를 깊이 우선탐색(DFS: Depth First Search)을 통해 노드 블록들을 탐색하여 탐색된 블록의 소스 코드를 참조하여 HTML 언어로 변환함으로써, 웹 어플리케이션을 제작할 수 있다.

도 9는 본 발명의 실시예들이 채택하고 있는 HTML5를 이용하여 웹 어플리케이션을 제작하는 장치를 도시한 블록도로서, 웹 어플리케이션 제작 장치(80)는 앞서 기술한 도 1의 각 과정에 대응하는 구성을 포함한다. 따라서, 여기서는 설명의 중복을 피하기 위해 시스템의 세부구성을 중심으로 그 기능을 약술하도록 한다.

HTML 언어와 자바스크립트가 포함된 HTML5를 이용하여 웹 어플리케이션을 제작하는 장치(80)에 있어서, 입력부(81)는 뷰 블록 및 컨트롤 블록에 대한 속성을 인지한 사용자로부터 결합될 블록을 입력받는다.

처리부(82)는 상기 HTML 언어를 통해 생성된 하나 이상의 태그범위를 상기 뷰 블록으로 각각 변환하고, 하나 이상의 명령에 대한 동작을 수행하는 자바스크립트를 컨트롤 블록으로 각각 변환하고, 상기 입력받은 블록을 적층식으로 결합하고, 상기 결합된 블록에 대하여 상기 적층식 구조의 최하단을 루트로 설정하고, 적층된 순서에 따라 상기 루트의 자식 노드를 설정하고, 부모-자식 관계가 성립하는 트리 구조로 치환하며, 상기 트리 구조로 블록을 상기 트리 구조에 따라 순차적으로 검색함으로써, 상기 검색결과 독출된 블록의 소스 코드를 참조하여 HTML 언어로 변환한다.

출력부(83)는 상기 각각 변환된 뷰 블록 및 컨트롤 블록을 출력하여 상기 사용자로부터 결합에 이용될 블록의 선택을 유도하며, 상기 HTML 언어로 변환되어 제작된 상기 웹 어플리케이션을 출력한다.

또한, 상기 뷰 블록 및 상기 컨트롤 블록 각각에 대하여 속성으로 타입, 레이어, 이름, 소스코드, 결합 인자, 색상, 및 크기를 포함하되, 상기 레이어는 상기 뷰 블록 및 상기 컨트롤 블록을 바인딩하는 플레이트 블록이 포함된 제 1 레이어, 상기 뷰 블록 및 상기 컨트롤 블록이 포함된 제 2 레이어, 및 상기 제 2 레이어에 포함된 블록들의 연결 설정을 하는 영역별 세부 블록이 포함된 제 3 레이어로 구성될 수 있다.

또한, 처리부(82)는 상기 적층될 블록 중 상단에 위치한 블록의 레이어가 하단에 적층될 블록의 레이어 보다 상위 레이어일 경우 상기 블록을 적층할 수 있다.

또한, 상기 사용자로부터 상기 블록 사용에 대하여 난이도에 따라 분류된 세 가지의 수준을 입력받고, 상기 입력된 세 가지의 수준에 따라 상기 블록 결합에 사용되는 사용자 인터페이스를 결정하되, 상기 세 가지의 수준 중 기능 사용의 입출력을 이해하는 제 1 수준은 뷰 블록 및 컨트롤 블록이 미리 결합되어 패키지화된 블록을 제공하고, 상기 세 가지의 수준 중 상기 블록 결합을 변경 및 수정할 수 있는 제 2 수준은 블록 결합에 사용되는 뷰 블록 및 컨트롤 블록을 제공하며, 상기 세 가지의 수준 중 코드를 이용하여 기능 생성을 할 수 있는 제 3 수준은 코드를 생성 및 수정할 수 있는 블록을 제공할 수 있다.

또한, 상기 트리 구조로 치환되는 블록 중에서 동일한 상기 태그범위를 포함하는 블록이 존재할 경우, 상기 트리 구조로 치환된 블록의 하위 노드에 상기 동일한 태그범위를 포함하는 블록을 서브 트리 구조로 연결할 수 있다.

상기된 본 발명에 따르면, 드래그앤드랍을 이용한 적층 조립방식의 직관적인 UI/UX를 구축하고, XML 라벨링 스킴을 차용한 블록 조립 방식을 도입하여 웹 컴포넌트 컴파일링 기업을 구현하였고, 블록 조립 단계에서 이벤트 등록 UI/UX를 구현하여 웹 어플리케이션에서도 손쉽게 이벤트 핸들링 가능하도록 하였으며, HTML5 기반의 모든 웹브라우저에서 원활하게 구동되는 웹기반 IDE 개발환경을 구축하였다. 나아가, HTML 위의 특정 컴포넌트 영역 부분에 대한 레이블링, 각 레이블에 대한 권한정보를 기록하고, 권한이 있는 컴포넌트만 보여주는 방식으로 권한 외의 요청을 차단하고, 기존의 웹 문서 단위의 보기 구조를 세부 단위로 나눠서 표현하고, 각 부분들에 대한 조합을 이용하여 페이지를 새롭게 구성할 수 있으며, 웹 어플리케이션의 문서 설계 단위가 웹 페이지에서 기능 단위로 세분화하여 접근제어에 적용이 가능할 수 있다.

한편, 본 발명의 실시예들은 컴퓨터로 읽을 수 있는 기록 매체에 컴퓨터가 읽을 수 있는 코드로 구현하는 것이 가능하다. 컴퓨터가 읽을 수 있는 기록 매체는 컴퓨터 시스템에 의하여 읽혀질 수 있는 데이터가 저장되는 모든 종류의 기록 장치를 포함한다.

컴퓨터가 읽을 수 있는 기록 매체의 예로는 ROM, RAM, CD-ROM, 자기 테이프, 플로피디스크, 광 데이터 저장장치 등이 있으며, 또한 캐리어 웨이브(예를 들어 인터넷을 통한 전송)의 형태로 구현하는 것을 포함한다. 또한, 컴퓨터가 읽을 수 있는 기록 매체는 네트워크로 연결된 컴퓨터 시스템에 분산되어, 분산 방식으로 컴퓨터가 읽을 수 있는 코드가 저장되고 실행될 수 있다. 그리고 본 발명을 구현하기 위한 기능적인(functional) 프로그램, 코드 및 코드 세그먼트들은 본 발명이 속하는 기술 분야의 프로그래머들에 의하여 용이하게 추론될 수 있다.

이상에서 본 발명에 대하여 그 다양한 실시예들을 중심으로 살펴보았다. 본 발명에 속하는 기술 분야에서 통상의 지식을 가진 자는 본 발명이 본 발명의 본질적인 특성에서 벗어나지 않는 범위에서 변형된 형태로 구현될 수 있음을 이해할 수 있을 것이다. 그러므로 개시된 실시예들은 한정적인 관점이 아니라 설명적인 관점에서 고려되어야 한다. 본 발명의 범위는 전술한 설명이 아니라 특허청구범위에 나타나 있으며, 그와 동등한 범위 내에 있는 모든 차이점은 본 발명에 포함된 것으로 해석되어야 할 것이다.

80 : 웹 어플리케이션 제작 장치
81 : 입력부
82 : 처리부
83 : 출력부

Claims (16)

1. HTML 언어와 자바스크립트(javascript)가 포함된 HTML5를 이용하여 웹 어플리케이션(web application)을 제작하는 방법에 있어서,
   개발 툴(tool)이 상기 HTML 언어를 통해 생성된 하나 이상의 태그범위를 뷰(view) 블록으로 각각 변환하고, 하나 이상의 명령에 대한 동작을 수행하는 자바스크립트를 컨트롤(control) 블록으로 각각 변환하는 단계;
   상기 뷰 블록 및 상기 컨트롤 블록에 대한 속성을 인지한 사용자의 입력에 따라 상기 개발 툴이 상기 뷰 블록 및 상기 컨트롤 블록을 적층식으로 결합하는 단계;
   상기 개발 툴이 상기 결합된 뷰 블록 및 컨트롤 블록에 대하여 상기 적층식 구조의 최하단을 루트로 설정하고, 적층된 순서에 따라 상기 루트의 자식 노드를 설정함으로써, 부모-자식 관계가 성립하는 트리 구조로 치환하는 단계; 및
   상기 개발 툴이 상기 트리 구조로 치환된 뷰 블록 및 컨트롤 블록을 상기 트리 구조에 따라 순차적으로 검색하고, 검색결과 독출된 뷰 블록 및 컨트롤 블록의 소스 코드를 참조하여 HTML 언어로 변환함으로써, 상기 웹 어플리케이션을 제작하는 방법.
2. 제 1 항에 있어서,
   상기 뷰 블록 및 상기 컨트롤 블록은,
   상기 뷰 블록 및 상기 컨트롤 블록 각각에 대하여 속성으로 타입, 레이어(layer), 이름, 소스코드, 결합 인자, 색상, 및 크기를 포함하는 것을 특징으로 하는 방법.
3. 제 2 항에 있어서,
   상기 레이어는,
   상기 뷰 블록 및 상기 컨트롤 블록을 바인딩(binding)하는 플레이트(plate) 블록이 포함된 제 1 레이어, 상기 뷰 블록 및 상기 컨트롤 블록이 포함된 제 2 레이어, 및 상기 제 2 레이어에 포함된 블록들의 연결 설정을 하는 영역별 세부 블록이 포함된 제 3 레이어로 구성되는 것을 특징으로 하는 방법.
4. 제 1 항에 있어서,
   상기 블록을 적층식으로 결합하는 것은,
   적층될 블록 중 상단에 위치한 블록의 레이어가 하단에 적층될 블록의 레이어 보다 상위 레이어일 경우 상기 블록을 적층하는 것을 특징으로 하는 방법.
5. 제 1 항에 있어서,
   상기 개발 툴은 사용자로부터 상기 개발 툴 사용에 대하여 난이도에 따라 분류된 세 가지의 수준을 입력받고, 상기 입력된 세 가지의 수준에 따라 상기 블록 결합에 사용되는 사용자 인터페이스를 결정하는 것을 특징으로 하는 방법.
6. 제 5 항에 있어서,
   상기 세 가지의 수준 중 기능 사용의 입출력을 이해하는 제 1 수준은, 뷰 블록 및 컨트롤 블록이 미리 결합되어 패키지화된 블록을 제공하는 것을 특징으로 하는 방법.
7. 제 5 항에 있어서,
   상기 세 가지의 수준 중 상기 블록 결합을 변경 및 수정할 수 있는 제 2 수준은, 블록 결합에 사용되는 뷰 블록 및 컨트롤 블록을 제공하는 것을 특징으로 하는 방법.
8. 제 5 항에 있어서,
   상기 세 가지의 수준 중 코드를 이용하여 기능 생성을 할 수 있는 제 3 수준은, 코드를 생성 및 수정할 수 있는 블록을 제공하는 것을 특징으로 하는 방법.
9. 제 1 항에 있어서,
   상기 적층식으로 결합된 블록을 저장할 경우,
   상기 저장 시점에서 결합된 블록에 대한 하위 블록도 함께 저장되며, 상기 저장된 블록들은 상시 재사용이 가능한 것을 특징으로 하는 방법.
10. 제 1 항에 있어서,
    상기 트리 구조로 치환되는 블록 중에서 동일한 상기 태그범위를 포함하는 블록이 존재할 경우, 상기 트리 구조로 치환된 블록의 하위 노드에 상기 동일한 태그범위를 포함하는 블록을 서브 트리 구조로 연결하는 것을 특징으로 하는 방법.
11. 제 1 항 내지 제 10 항 중에 어느 한 항의 방법을 컴퓨터에서 실행시키기 위한 프로그램을 기록한 컴퓨터로 읽을 수 있는 기록매체.
12. HTML 언어와 자바스크립트가 포함된 HTML5를 이용하여 웹 어플리케이션을 제작하는 장치에 있어서,
    뷰 블록 및 컨트롤 블록에 대한 속성을 인지한 사용자로부터 결합될 블록을 입력받는 입력부;
    상기 HTML 언어를 통해 생성된 하나 이상의 태그범위를 상기 뷰 블록으로 각각 변환하고, 하나 이상의 명령에 대한 동작을 수행하는 자바스크립트를 컨트롤 블록으로 각각 변환하고, 상기 입력받은 블록을 적층식으로 결합하고, 상기 결합된 블록에 대하여 상기 적층식 구조의 최하단을 루트로 설정하고, 적층된 순서에 따라 상기 루트의 자식 노드를 설정하고, 부모-자식 관계가 성립하는 트리 구조로 치환하며, 상기 트리 구조로 블록을 상기 트리 구조에 따라 순차적으로 검색함으로써, 검색결과 독출된 블록의 소스 코드를 참조하여 HTML 언어로 변환하는 처리부; 및
    상기 각각 변환된 뷰 블록 및 컨트롤 블록을 출력하여 상기 사용자로부터 결합에 이용될 블록의 선택을 유도하며, 상기 HTML 언어로 변환되어 제작된 상기 웹 어플리케이션을 출력하는 출력부를 포함하는 장치.
13. 제 12 항에 있어서,
    상기 뷰 블록 및 상기 컨트롤 블록은,
    상기 뷰 블록 및 상기 컨트롤 블록 각각에 대하여 속성으로 타입, 레이어, 이름, 소스코드, 결합 인자, 색상, 및 크기를 포함하되,
    상기 레이어는 상기 뷰 블록 및 상기 컨트롤 블록을 바인딩하는 플레이트 블록이 포함된 제 1 레이어, 상기 뷰 블록 및 상기 컨트롤 블록이 포함된 제 2 레이어, 및 상기 제 2 레이어에 포함된 블록들의 연결 설정을 하는 영역별 세부 블록이 포함된 제 3 레이어로 구성되는 것을 특징으로 하는 장치.
14. 제 12 항에 있어서,
    상기 처리부는,
    적층될 블록 중 상단에 위치한 블록의 레이어가 하단에 적층될 블록의 레이어 보다 상위 레이어일 경우 상기 블록을 적층하는 것을 특징으로 하는 장치.
15. 제 12 항에 있어서,
    상기 사용자로부터 상기 블록 사용에 대하여 난이도에 따라 분류된 세 가지의 수준을 입력받고, 상기 입력된 세 가지의 수준에 따라 상기 블록 결합에 사용되는 사용자 인터페이스를 결정하되,
    상기 세 가지의 수준 중 기능 사용의 입출력을 이해하는 제 1 수준은 뷰 블록 및 컨트롤 블록이 미리 결합되어 패키지화된 블록을 제공하고, 상기 세 가지의 수준 중 상기 블록 결합을 변경 및 수정할 수 있는 제 2 수준은 블록 결합에 사용되는 뷰 블록 및 컨트롤 블록을 제공하며, 상기 세 가지의 수준 중 코드를 이용하여 기능 생성을 할 수 있는 제 3 수준은 코드를 생성 및 수정할 수 있는 블록을 제공하는 것을 특징으로 하는 장치.
16. 제 12 항에 있어서,
    상기 트리 구조로 치환되는 블록 중에서 동일한 상기 태그범위를 포함하는 블록이 존재할 경우, 상기 트리 구조로 치환된 블록의 하위 노드에 상기 동일한 태그범위를 포함하는 블록을 서브 트리 구조로 연결하는 것을 특징으로 하는 장치.
    
    
    
    

Images