KR102067661B1 - 위젯 저작 시스템 및 방법 - Google Patents

Abstract

본 발명은 위젯 저작을 위해 사용되는 복잡한 자바스크립트 코드에 익숙하지 않은 사용자도 단순한 표현뿐만 아니라 자바스크립트가 제공하는 동적 효과까지 용이하게 편집하여 위젯을 생성하고, 생성한 위젯을 재사용할 수 있도록 한 위젯 저작 시스템 및 방법에 관한 것으로, 라이브러리 내의 위젯이나 기 생성된 위젯을 뷰어를 통해 표현하고 표현되는 위젯의 편집 가능 요소들을 마크업 언어 코드로 쉽게 편집하여 이를 표현 내용에 반영함으로써, 간단한 편집 만으로 내용 및 동적 효과를 실시간 적용해 보면서 원하는 위젯을 용이하게 생성할 수 있는 효과가 있다.

Description

위젯 저작 시스템 및 방법{WIDGET AUTHORING SYSTEM AND METHOD THEREOF}

본 발명은 위젯 저작 기술에 관한 것으로, 특히 위젯 저작을 위해 사용되는 복잡한 자바스크립트 코드에 익숙하지 않은 사용자도 단순한 표현뿐만 아니라 자바스크립트가 제공하는 동적 효과까지 용이하게 편집하여 위젯을 생성하고, 생성한 위젯을 재사용할 수 있도록 한 위젯 저작 시스템 및 방법에 관한 것이다.

위젯(widget)은 소형 장치나 부품이라는 의미로, 컴퓨터 분야에서 사용될 경우 그래픽 유저 인터페이스(GUI)를 통해 사용자와 응용프로그램 또는 운영체계와의 상호작용을 원활하게 하는 소형 어플리케이션을 의미한다. 대표적으로 날씨나 뉴스 등의 정보제공, 일정 관리, 링크 연동 혹은 광고 표시 등의 특정한 기능을 제공한다.

운영체제에서 직접 동작하는 데스크톱 위젯은 가젯(Gadget)으로 칭해지며, 웹브라우저에서 동작하는 것은 웹 가젯(Web Gadget)으로 부르거나 좁은 의미의 위젯으로 칭한다.

이러한 통상의 위젯은 기본적으로 마크업 언어(HTML, XML 등), 스타일 시트(CSS:Cascading Style Sheets), 자바스크립트(JavaScript)를 이용하여 작성되는데, 마크업 언어와 스타일 시트를 통해서 기본적인 표현을 제공하고 자바스크립트를 통해서 상호작용을 포함한 여러 동적 효과를 제공한다.

따라서 위젯을 제작하기 위해서는 사용되는 언어별 코드들에 대한 높은 이해가 필요하며, 그 중에서 동적인 효과를 제공하는 자바스크립트를 이용하기 위해서는 상당한 프로그래밍 지식이 요구된다.

최근 위젯 저작을 지원하는 다양한 저작 툴이 제공되고 있으나 대부분 표시되는 그림이나 글자, 혹은 링크를 설정하는 정도의 편집만 저작 기능을 지원하며, 동적 효과에 대한 편집은 스크립트 코드를 직접 수정하도록 되어 있어 자바스크립트 프로그래밍에 대한 이해가 낮은 경우 기존 저작도구를 이용하여 생성할 수 있는 위젯은 그 품질이나 기능이 상당히 제한적인 실정이다.

한국 공개특허 제10-2010-0134495호 명칭: 위젯 생성 및 통신 방법

전술한 문제점을 개선하기 위한 본 발명 실시예에 따른 목적은 위젯의 동적 효과를 제공하는 스크립트의 기능을 편집하기 위한 요소들을 별도의 마크업 언어로 설정할 수 있도록 모듈화한 스크립트와 상기 스크립트에 연결되는 편집요소를 마크업 언어를 통해 텍스트로 정의한 내용을 가진 위젯들로 라이브러리를 구축하고, 해당 라이브러리의 위젯을 선택하여 마크업 언어에 대한 텍스트 편집 만으로 내용은 물론이고 동적 효과에 대한 상세 설정을 조정한 위젯을 생성할 수 있도록 하며, 이렇게 생성된 위젯을 용이하게 재활용할 수 있도록 한 위젯 저작 시스템 및 방법을 제공하는 것이다.

본 발명 실시예의 다른 목적은 라이브러리 상의 위젯을 선택하면 해당 위젯의 인스턴스를 생성 및 표현하고 해당 인스턴스의 메타데이터를 텍스트 편집 가능한 마크업 언어 코드로 제공하며, 상기 제공된 코드의 편집 내용을 상기 위젯 인스턴스에 반영하여 위젯의 표현 내용을 변경하도록 함으로써, 마크업 언어 코드에 포함된 텍스트 편집만으로 편집한 동적 효과가 실시간 반영되는 위젯을 확인할 수 있도록 한 위젯 저작 시스템 및 방법을 제공하는 것이다.

본 발명 실시예의 또 다른 목적은 위젯 라이브러리나 기 생성된 위젯을 선택하여 이를 표현하면서 편집 가능 요소들을 포함한 마크업 언어 코드를 생성하여 텍스트 편집이 가능하게 제공하고 표현된 위젯을 드래그, 드래그 앤 드롭이나 설정 내용 조절 인터페이스를 통해 조절하여 해당 조절된 편집 가능 요소를 마크업 언어 코드에 반영하여 텍스트 편집 내용을 변경하도록 함으로써 용이한 위젯 저작이 가능하도록 한 위젯 저작 시스템 및 방법을 제공하는 것이다.

상기와 같은 목적을 달성하기 위한 본 발명의 실시예에 따른 위젯 저작 방법은 위젯 뷰어가 위젯 라이브러리에서 선택된 위젯의 인스턴스 메타데이터를 생성하고 상기 위젯을 시각적으로 표현하는 위젯 표현단계; 위젯 코드 생성부가 상기 위젯 표현 단계에서 생성된 위젯의 인스턴스 메타데이터를 기반으로 편집 가능 마크업 언어 코드를 생성하여 텍스트 에디터에 제공하는 코드 생성 단계; 및 위젯 파서가 상기 텍스트 에디터에서 편집된 마크업 언어 코드로부터 위젯의 인스턴스 메타데이터를 추출하여 상기 위젯 뷰어에 전달하면, 상기 위젯 뷰어가 기 생성된 대응 위젯의 인스턴스 메타데이터를 갱신하여 위젯 표현에 반영하는 갱신 단계를 포함한다.

상기 위젯 라이브러리의 위젯은 스크립트 모듈 및 상기 스크립트 모듈의 편집 요소를 마크업 언어로 연동 설정하는 모듈 활용 코드가 포함된 위젯이며, 상기 라이브러리 위젯의 스크립트 모듈은 위젯의 동적 효과를 제공하는 기능에 대한 편집 가능 요소들을 별도의 마크업 언어로 설정할 수 있도록 작성되고, 상기 모듈 활용 코드는 마크업 언어로 상기 스크립트 모듈에 대한 편집 가능 요소를 설정하는 예시 코드를 포함할 수 있다.

상기 갱신 단계는 상기 위젯 파서가 상기 코드 생성 단계에서 상기 위젯 코드 생성부가 생성한 메타데이터 마크업 언어 코드의 태그 배치를 기준으로 상기 텍스트 에디터에서 편집된 마크업 언어 코드의 태그 배치를 검증하고, 검증을 통과한 코드에 대해서 메타데이터 추출을 실시하는 단계를 더 포함한다.

상기 위젯 표현 단계는 위젯이 표현된 시각적 화면에서 편집이나 속성 선택이 가능하도록 위젯 뷰어가 제공하는 인터페이스를 통해 표현 화면상에서 편집되는 위젯의 변화에 따라 해당 위젯에 대응되는 메타데이터를 변경하는 단계를 더 포함할 수 있다.

본 발명의 다른 실시예에 따른 위젯 저작 방법은 스크립트 모듈 및 모듈 활용 코드가 포함된 위젯들로 이루어진 라이브러리에서 선택된 위젯을 수신한 위젯코드 생성부가 상기 위젯에 포함된 모듈 활용 코드를 근거로 동적 효과에 대한 편집 가능 요소가 텍스트로 표현되는 마크업 언어 코드를 생성하여 텍스트 에디터에 제공하는 코드 생성 단계; 및 상기 텍스트 에디터를 통해 동적 효과가 편집된 상기 편집 가능 마크업 언어 코드를 이용하여 사용자 위젯을 생성하는 위젯 생성 단계를 포함한다.

상기 코드 생성 단계 이전에 상기 선택된 위젯을 위젯 뷰어에서 시각적으로 표현하며 상기 선택 위젯의 시각적 표현 및 동적 효과에 연동되는 편집 가능 요소의 정보를 포함하는 메타데이터를 생성하여 별도 관리하는 표현 단계를 더 포함할 수 있다. 더불어, 상기 위젯 생성 단계 이전에 상기 텍스트 에디터에서 편집된 상기 편집 가능 마크업 언어 코드를 위젯 파서에서 파싱하여 상기 편집 가능 요소에 대한 메타데이터를 추출한 후 상기 위젯 뷰어에서 관리하는 대응 위젯의 메타데이터를 갱신하는 갱신 단계를 더 포함할 수 있다.

상기 라이브러리 위젯의 스크립트 모듈은 위젯의 동적 효과를 제공하는 기능에 대해 편집 가능 요소들을 별도의 마크업 언어로 설정할 수 있도록 작성되고, 상기 모듈 활용 코드는 마크업 언어로 상기 스크립트 모듈에 대한 편집 가능 요소를 설정하도록 작성된다. 한편, 상기 위젯을 생성하는 단계는 상기 텍스트 에디터에서 편집된 마크업 언어 코드를 수신하는 위젯 파서가 상기 스크립트 모듈의 편집 가능 요소에 대응되는 부분의 태그 배치 변경을 기준으로 오류를 검증하는 단계를 더 포함할 수 있다.

본 발명의 또 다른 실시예에 따른 위젯 저작 방법은 위젯 뷰어가 스크립트 모듈 및 모듈 활용 코드가 포함된 위젯으로 구성된 라이브러리에서 선택된 위젯이나 라이브러리 위젯 편집을 통해 기 생성된 위젯을 불러들여 시각적으로 표현하고, 선택된 위젯의 시각적 표현 및 동적 효과에 대응되는 모듈 활용 코드 내 편집 요소를 메타데이터로 관리하는 위젯 표현 단계; 위젯 코드 생성부가 선택 위젯의 메타데이터로부터 편집 가능 마크업 언어 코드를 생성하여 텍스트 에디터에 제공하는 코드 생성 단계; 텍스트 에디터를 통해 상기 편집 가능 마크업 언어 코드가 편집되는 편집 단계; 및 위젯 파서가 상기 텍스트 에디터에서 편집된 마크업 언어 코드로부터 편집 요소의 메타데이터를 추출하여 전달하는 것으로 상기 위젯 뷰어가 관리하는 메타데이터를 갱신하는 갱신 단계를 포함한다.

상기 갱신 단계는 상기 위젯 파서가 상기 코드 생성 단계에서 상기 위젯 코드 생성부가 생성한 메타데이터 마크업 언어 코드의 태그 배치를 기준으로 상기 텍스트 에디터에서 편집된 마크업 언어 코드의 태그 배치를 검증하고, 검증을 통과한 코드에 대해서 메타데이터 추출을 실시하는 단계를 더 포함한다.

상기 위젯 표현 단계는 위젯이 표현된 시각적 화면에서 편집이나 속성 선택이 가능하도록 위젯 뷰어가 제공하는 인터페이스를 통해 표현 화면상에서 편집되는 위젯의 변화에 따라 해당 위젯에 대응되는 메타데이터를 변경하는 단계를 더 포함한다.

본 발명의 또 다른 실시예에 따른 위젯 저작 시스템은 위젯의 동적 효과를 제공하는 스크립트 모듈과 상기 스크립트 모듈의 기능을 설정하는 편집 요소들을 마크업 언어로 기술한 모듈 활용 코드를 구비한 위젯들로 구성된 라이브러리; 상기 라이브러리에서 선택된 위젯의 모듈 활용 코드 내 편집 요소를 메타데이터로 관리하며 상기 메타데이터를 이용하여 상기 선택된 위젯을 표현하는 위젯 뷰어; 상기 위젯 뷰어의 메타데이터를 편집 가능 마크업 언어 코드로 생성하고 편집된 마크업 언어 코드에서 메타데이터를 추출하여 상기 위젯 뷰어에 제공하는 코드 처리부; 및 상기 코드 처리부가 제공하는 마크업 언어 코드에 대한 편집 인터페이스를 제공하고 편집된 내용을 상기 코드 처리부에 제공하는 텍스트 에디터를 포함한다.

상기 코드 처리부는 상기 위젯 뷰어의 선택 위젯 메타데이터를 마크업 언어 코드로 생성하여 상기 텍스트 에디터에 제공하는 위젯 코드 생성부; 및 상기 텍스트 에디터에서 편집된 마크업 언어 코드로부터 메타데이터를 추출하여 상기 위젯 뷰어에 제공하는 위젯 파서를 포함한다.

상기 위젯 코드 생성부는 위젯 뷰어의 선택 위젯에 대한 스크립트 모듈을 확인하는 스크립트 모듈 확인부; 상기 확인된 스크립트 모듈에 대응되는 메타데이터를 마크업 언어로 코드화하는 메타데이터 코드화부; 및 상기 메타데이터 코드화부의 코드와 위젯의 내용 및 기본 구성을 기술하는 마크업 코드를 결합한 편집 코드를 생성하는 편집 코드 생성부를 포함한다.

상기 위젯 파서는 상기 위젯 코드 생성부가 생성한 메타데이터 마크업 언어 코드의 태그 배치를 기준으로 상기 텍스트 에디터에서 편집된 마크업 언어 코드를 검증하여 검증된 코드에 대해서만 메타데이터 추출을 실시한다.

상기 위젯 뷰어는 저작할 하나 이상의 위젯을 생성, 삭제 및 변경하는 위젯 매니저와, 상기 위젯 매니저에 의해 관리되는 위젯의 각 위젯 인스턴스에 대한 메타데이터를 포함한다. 여기서, 상기 위젯 매니저는 라이브러리의 위젯이나 기 생성된 위젯에 대한 신규 인스턴스를 생성하거나 삭제하는 위젯 생성/삭제부; 위젯 인스턴스의 메타데이터를 생성 및 삭제하거나 변경시 변경하는 메타데이터 관리부; 상기 메타데이터 관리부의 메타데이터를 이용하여 대응 위젯 인스턴스를 시각적으로 표현하는 위젯 표현부; 및 상기 코드 처리부로부터 메타데이터를 수신하는 경우 상기 메타데이터 관리부와 상기 위젯 표현부에 변경을 알리는 위젯 변경부를 포함한다.

상기 텍스트 에디터는 상기 코드 처리부를 통해 수신한 마크업 언어 코드를 편집 가능한 텍스트로 표시하는 편집부; 및 상기 편집부를 통해 편집한 마크업 언어 코드를 상기 코드 처리부에 전달하여 대응 위젯의 표현을 변경하도록 요청하는 적용부를 포함한다.

상기 위젯 뷰어는 위젯이 표현된 시각적 화면에서 편집이나 속성 선택이 가능하도록 하는 인터페이스를 더 제공하며, 상기 표현 화면상에서 편집되는 위젯의 변화에 따라 해당 위젯에 대응되는 메타데이터를 변경하고, 변경된 메타데이터를 상기 코드 처리부를 통해 상기 텍스트 에디터에 반영시킬 수 있다.

본 발명에 따르면, 위젯의 동적 효과를 제공하는 스크립트를 모듈화하고 해당 스크립트 내의 설정 요소들을 마크업 언어로 기술한 위젯으로 라이브러리를 구성하여 해당 라이브러리의 위젯을 선택하여 마크업 언어 부분에 대한 내용만 간단하게 편집하는 것으로 내용의 편집은 물론이고 복잡하고 다양한 동적 효과에 대한 편집도 가능하므로 스크립트 언어와 프로그래밍에 익숙하지 않은 사용자라도 높은 품질의 위젯을 용이하게 생성할 수 있으며, 해당 생성 위젯을 쉽게 재사용할 수 있는 효과가 있다.

또한, 라이브러리 내의 위젯이나 기 생성된 위젯을 뷰어를 통해 표현하고 표현되는 위젯의 편집 가능 요소들을 마크업 언어 코드로 쉽게 편집하여 이를 표현 내용에 반영함으로써, 간단한 편집 만으로 내용 및 동적 효과를 실시간 적용해 보면서 원하는 위젯을 용이하게 생성할 수 있는 효과가 있다.

부가적으로, 뷰어를 통해 표현되는 위젯을 위젯 뷰어의 화면에서 직접 편집하도록 허용하고 해당 편집 내용이 텍스트 편집 영역에 반영되도록 함으로써 텍스트 편집뿐만 아니라 시각적 확인을 통한 표현 내용 편집을 통해 위젯 저작 용이성을 극대화할 수 있는 효과가 있다.

도 1은 일반적인 위젯 코드의 구성예.
도 2는 동적 효과가 적용된 위젯의 예.
도 3은 도 2의 위젯에 대한 일반적인 코드 구조.
도 4는 본 발명 실시예에 따른 방식으로 작성된 위젯의 코드 구조.
도 5는 본 발명의 일 실시예에 따른 저작 시스템 화면 인터페이스.
도 6은 본 발명의 일 실시예에 따른 저작 시스템 구성도.
도 7은 본 발명의 일 실시예에 따른 저작 시스템의 동작 방식을 보인 순서도.
도 8은 본 발명의 일 실시예에 따른 저작 시스템 상세 구성도.
도 9는 본 발명의 일 실시예에 따른 편집 코드 검증 조건의 예.
도 10은 본 발명의 다른 실시예에 따른 저작 시스템의 개념도.

상기한 바와 같은 본 발명을 첨부된 도면들과 실시예들을 통해 상세히 설명하도록 한다. 후술 될 상세한 설명에서는 상술한 기술적 과제를 이루기 위한 본 발명에 있어서 대표적인 실시예를 설명할 것이다. 또한, 본 발명을 효과적으로 설명하기 위하여 스크립트 코드의 예로 대표적인 자바스크립트를 기본으로 설명하고, 마크업 언어의 예로 HTML(HyperText Markup Language)을 기본으로 설명한다. 그러나 다른 종류의 스크립트 코드나 마크업 언어를 이용하더라도 그 기술적 구성 요지는 동일하므로 이러한 구체적인 스크립트 코드의 종류나 마크업 언어의 종류가 본 발명의 범위를 한정하는 것은 아니다.

도 1은 일반적인 위젯 코드(10)의 예를 나타낸 것으로 도시한 바와 같이 HTML(HyperText Markup Language) 웹페이지 포맷을 틀로 하여 그 내부에 자바스크립트 코드가 작성되어 있음을 알 수 있다. 위젯을 구성하는 상기 웹페이지의 코드를 살펴보면, HTML 웹페이지에 대한 기본 구성을 기술하는 태그들(<html></html>, <head></head>, <body></body>)이 포함되고, 해당 부분에서 위젯의 타이틀과 위젯에서 제공할 내용이 기술되어 있음을 알 수 있다. 해당 부분은 실제 표시되는 내용의 텍스트이므로 프로그래밍에 익숙하지 않은 사용자라도 쉽게 편집 가능한 영역이다.

이러한 기본적인 구성 외에 해당 위젯을 표현하기 위한 별도의 스타일시트(ABC.css)와 기본 기능이 정의된 자바스크립트 코드(ABC.js)가 연동되어 있으며, 실질적인 위젯의 동적 기능을 제공하기 위한 자바스크립트 코드(<script></script> 내부)는 해당 웹페이지에 직접 작성된다.

자바스크립트를 포함하는 대부분의 프로그램 작성 원리상 자주 사용되는 범용 코드는 별도의 모듈로 적용하더라도 특정한 대상에 대한 구체적인 동적 효과 설정은 개별적인 프로그램 코드 내에 직접 작성되는 것이 일반적이며, 도시된 경우 역시 범용적인 기능은 별도의 모듈(ABC.js)로 적용하지만 해당 모듈에 대한 기능을 호출하여 개별적인 동적 효과를 구체적으로 제공하는 코드는 해당 웹페이지 내에 직접 자바스크립트 코드(<script></script>)로 작성된다.

이렇게 작성된 스크립트 코드는 HTML의 내용을 나타내는 부분(<body></body>(점선 박스))에서 간단한 방식으로 호출되어 적용된다. 즉, 자바스크립트에 의한 동적 효과 기능은 그 내용을 손댈 수 없는 '블랙박스'가 되며, 그 적용 여부와 순서만 HTML의 내용부분(<body></body>)을 통해 편집 가능하다.

일반적으로 도시된 도 1과 같은 형식으로 위젯이 작성되므로 동적 효과에 대한 편집을 원하는 경우 자바스크립트 프로그래밍에 대한 지식이 필수적이며, 이에 대한 지식이 없다면 기 작성된 위젯을 활용하여 단순히 위젯의 제목이나 표시되는 각 항목의 이름 정도를 편집하거나 동적 효과를 배제한 단순 마크업 언어로만 위젯을 생성하는 수준에 그치게 된다.

도시된 도 1의 위젯은 3개의 상자를 그리고 해당 상자를 선택할 때마다 색상이 변화되도록 하며, 비활성(disable) 버튼을 누르면 박스가 검게 변하는 동적인 효과를 제공하는 것이다.

이러한 동적 효과에 대한 내용을 편집하고자 할 경우 도시된 자바스크립트가 제공하는 동적 효과를 정의하는 각 설정을 수정해야 하는데, 예를 들어 상자의 기본 색상을 결정하거나, 색상 변화 범위를 결정하거나, 비활성 될 경우 적용될 색상을 결정하는 등 실제 동적 효과에 연관된 설정을 수정함으로써 좀더 개인화된 위젯을 생성할 수 있다. 하지만, 이러한 동적 효과를 정의하는 각 설정은 자바스크립트 코드의 곳곳에 분산되어 있으며, 종종 복수 위치에서 연동되는 경우도 있어 해당 자바스크립트의 작성 원리를 충분히 이해해야만 적절히 편집할 수 있다.

도시된 구성에서, 상기 예로 든 동적 효과에 관련된 설정은 실선 박스 내의 내용으로, 해당 내용은 자바스크립트 코드에 분산되어 포함되어 있기 때문에 자바스크립트 코드에 익숙하지 않은 경우 이를 변경하기가 어렵다.

한편, 다양한 소셜 네트워크 서비스 제공 시스템의 발전에 따라 대부분의 소셜 네트워크 서비스에서는 개인 공간에 다양한 위젯을 적용할 수 있도록 하고 있어 좀더 개인화되고, 좀 더 동적 효과가 뛰어난 위젯에 대한 요구가 증가하고 있으며, 자바스크립트 프로그래밍에 대해서 잘 모르더라도 이러한 동적 기능에 대한 편집이 가능한 위젯 저작툴에 대한 기대도 높아지고 있는 실정이다.

또한, 다양한 브라우저 기반 시스템이 확산되면서 위젯을 응용프로그램처럼 활용하고 있어 동적 효과에 대해서도 용이한 편집이 가능한 위젯 저작툴에 대한 중요성 역시 높아지고 있는 실정이다.

따라서, 본 발명의 실시예에서는 자바스크립트(혹은 그에 대응되는 유사한 종류의 스크립트 언어)에 대한 이해가 없더라도 HTML(혹은 그에 대응되는 마크업 언어)의 태그를 간단히 편집하는 것으로 동적인 효과에 대한 편집이 가능하도록 하는 위젯 저작 시스템을 제공한다.

이를 위해서, 본 발명의 실시예에서는 편집 및 재사용이 용이한 위젯 라이브러리를 제공하는데, 해당 라이브러리에 포함되는 위젯은 특정한 동적 효과를 제공하기 위한 스크립트 모듈과 이러한 스크립트 모듈의 편집 가능 요소들에 대한 설정을 HTML과 같은 마크업 언어로 기술한 모듈 활용 코드를 포함한다.

여기서, 상기 라이브러리 내의 위젯은 특정한 동적 효과에 관한 단위 모듈의 형태일 수 있고, 위젯의 모든 구성을 갖춘 프로토타입 위젯(일종의 템플릿)의 형태를 가질 수 있다.

도 2 내지 4는 본 발명의 실시예에 적용되는 라이브러리의 위젯에 대한 구성 원리를 설명하기 위한 것으로 도 2는 일반적으로 알려져 있는 스와이프(Swipe) 제스처를 감지하여 이미지를 전환시키는 광고용 위젯의 예이고, 도 3은 도 2의 위젯을 제공하기 위해 일반적 방식에 따라 작성한 위젯의 코드 구성이며, 도 4는 본 발명의 실시예에 따라 작성한 위젯의 코드 구성을 나타낸 것이다.

도 2는 광고를 표시하는 슬라이드 3개를 스와이프(Swipe) 제스처에 의해 하나씩 표시하는 기능을 가진 위젯으로, 이미지와 해당 이미지를 설명하는 텍스트가 하나의 슬라이드로 설정되어 선택 표시된다.

이러한 위젯을 제공하기 위해서, 슬라이드에 대한 이미지를 표시하고 해당 이미지의 하단에 텍스트를 표시하는 기능, 제스처를 인식하며 상기 제스처에 따라 슬라이드를 전환하는 기능, 사용될 이미지나 텍스트를 획득하여 슬라이드를 설정하는 기능, 사용될 이미지의 크기나 배치 위치를 결정하는 기능 등 다양한 기능들이 동적 효과를 제공하기 위해 스크립트 코드로 구성될 수 있다.

이러한 모든 개별 기능들을 해당 페이지에 직접 기술하는 방식으로 스크립트 코드를 구성할 수 있으나 일반적인 프로그램 작성 기법상 기본적인 효과를 위한 단위 기능(함수, 매소드)을 별도의 기본 스크립트 코드로 미리 작성해 두고 해당 내용을 활용하여 좀더 실질적인 설정 내용을 스크립트 코드로 작성하는 것이 일반적이다. 이렇게 복잡한 단계적 함수들, 매소드들을 이용한 코드 작성 방식은 스크립트 코드 분석을 더욱 어렵게 하는 요인이 된다.

도 3은 도 2의 위젯을 제공하기 위한 동적 효과 제공 부분의 코드를 보인 것으로, 도시한 바와 같이 스크립트 코드를 이용하여 기 작성된 스와이프뷰의 기능에 대한 각종 설정들을 스크립트 코드로 기술한 것이다. 즉, 기 작성된 스와이프뷰 클래스에 대한 객체를 생성하는 일반적인 프로그래밍 기법에 따라 작성된 스크립트 코드로, 해당 작성 스크립트 코드에 따른 동적 효과 적용은 HTML의 내용 부분에 도시된 1줄의 간단한 태그로 이루어지게 된다.

즉, 스와이프뷰 클래스를 이용하여 실질적인 객체 'swipeView1'을 생성하면서 필요한 각종 설정 요소들을 객체 생성 코드 내에 포함시키는 것은 기존 프로그램 작성 원리상 당연한 것으로, 객체 생성 자체를 스크립트 코드로 해야하므로 일반적으로 객체 생성 시 필요 요소들을 함께 기술하게 된다.

하지만, 도시한 바와 같이 스크립트 코드를 구성하게 되면, 이후에 슬라이드를 더 추가하는 경우, 표시되는 위치나 크기를 변경시키는 경우, 각 슬라이드의 이미지를 변경하는 경우, 해당 슬라이드에 표시될 텍스트를 변경하는 경우와 같이 동적 효과에 관련되는 수정이 필요한 경우 항상 스크립트 코드에 대한 직접적인 수정이 요구된다. 이렇게 스크립트 코드 내에 정의되는 편집 요소들은 스크립트 코드에 익숙하지 않은 사용자가 접근하기 어려울 뿐만 아니라 이러한 스크립트 내의 항목들을 해석하는 저작툴을 개발하는 것 역시 어렵다.

따라서 본 발명의 실시예에서는 이러한 스크립트 코드에 대한 의존성을 줄이기 위해서 애초에 스크립트 코드를 설계할 때 편집 가능 요소로 정의한 편집 요소들은 HTML과 같은 마크업 언어 코드에서 설정할 수 있도록 구성한다. 예를 들어, 소정의 스크립트 코드를 클래스 형태로 구성하고, 객체 생성은 별도의 편집 요소를 배제하여 생성할 수 있도록 구성하며, 실질적인 편집 요소들은 마크업 언어 코드를 통해 설정할 수 있도록 한다.

즉 라이브러리의 위젯을 설계할 때 스크립트 코드로 동적 효과를 제공하는 기능 클래스에 대한 각종 편집 요소들을 별도의 마크업 언어로 생성할 수 있도록 설계하여 스크립트를 모듈화하고, 해당 스크립트 모듈에 대한 편집 요소 종류 및 설정 내용을 알 수 있도록 기 설정된 규칙에 따라 편집 요소에 대한 설정 내용을 태그로 기술한 모듈 활용 코드를 포함하도록 한다. 실질적으로 상기 모듈 활용 코드는 상기 스크립트 모듈에 대한 편집 가능 요소의 내용을 지정하기 위한 일련의 설정된 항목 배치 규칙을 포함할 수 있으며, 상기 활용 코드 내의 편집 요소들은 추후 해당 위젯을 실질적으로 실행할 경우 생성되는 인스턴스의 메타데이터가 될 수 있다.

도 4는 본 발명의 실시예에 따른 라이브러리 위젯을 이용하여 편집한 위젯의 코드를 보인 것이다. 도시된 바와 같이 모듈화된 스크립트 객체에 대한 간단한 생성 코드와, 상기 생성된 모듈화된 스크립트 객체에 대한 편집 요소 설정이 기술된 마크업 언어 코드를 도 2와 같은 설정 내용으로 편집한 코드를 보인 것이다.

도시한 바와 같이 스크립트 코드 부분은 단순한 객체 생성에 관한 내용에 불과하여 별도의 편집 요소가 포함되어 있지 않으며, 실질적으로 해당 기능에서 편집 가능한 모든 요소들은 좌측의 HTML 코드로 설정된 것을 알 수 있다.

따라서, HTML에 대한 일반적인 이해만 있다면 실질적으로 자바스크립트 코드에 영향을 주어 동작 효과를 가변시키는 편집 요소들을 마치 HTML의 내용을 단순 텍스트 편집하듯 편집할 수 있게 된다. 도시된 경우, 상기 단순한 HTML 편집과 같은 수준의 편집으로 해당 위젯의 크기와 위치, 슬라이드 내의 이미지, 슬라이드 내에 표시될 텍스트에 대한 편집은 물론이고 슬라이드를 더 추가하거나 기존 슬라이드를 삭제하는 등과 같이 동적 효과를 제공하는 구체적 기능과 설정도 마음대로 변경할 수 있게 된다.

물론, 도시된 도 3은 설명의 편의를 위해서 비교적 간단한 내용에 관한 예를 든 것이며, 좀 더 다양하고 구체적인 동적 효과에 대한 편집도 연동되는 편집 요소의 설계에 따라 다양하게 가능하게 된다.

한편, 이렇게 작성된 위젯의 경우 당연히 HTML의 내용만 편집하여 쉽게 재사용할 수 있으므로 편집 용이성과 재사용 가능성이 극히 높아지게 된다.

앞서 설명했던 본 발명 실시예에 따른 위젯 저작을 위해 모듈화된 스크립트와 이에 대한 활용 코드를 구비한 위젯으로 구성되는 라이브러리를 이용하여 좀 더 용이한 위젯 저작이 가능하도록 한 본 발명 실시예에 따른 위젯 저작 시스템을 도 5 및 6을 통해 설명한다.

도 5는 본 발명 실시예에 따른 위젯 저작 시스템의 그래픽 사용자 인터페이스(GUI)(100)를 보인 것으로, 도시된 바와 같이 저작된 위젯을 저장하거나 기 생성된 위젯을 불러오는 등의 기본적인 저작도구 메뉴를 제공하는 메뉴(110)와, 저작중인 위젯을 실제 표현하여 그 기능과 내용을 확인할 수 있도록 하는 위젯 뷰어창(120) 및 상기 위젯 뷰어창(120)에 표현되는 위젯의 코드가 제공되어 편집 가능하도록 하는 텍스트 에디터창(130)을 포함한다.

즉, 도시된 그래픽 사용자 인터페이스(100)를 통해서 사용자는 기 생성된 위젯이나 라이브러리 상의 특정 위젯을 선택하여 실질적인 동작 상황을 보면서 해당 위젯에 대한 동적 효과에 대한 편집 요소를 HTML 형식의 마크업 언어 코드에 대한 텍스트 편집을 통해 편집하며 이를 표현되는 위젯에 반영시켜 실시간 편집 내용을 확인하면서 원하는 위젯을 생성할 수 있다.

도 6은 본 발명 실시예에 따른 위젯 저작 시스템의 구성을 보인 것으로, 상기 도 5에 나타낸 그래픽 사용자 인터페이스의 클라이언트에 해당한다. 도시된 구성은 전술했던 바와 같이 위젯의 동적 효과를 제공하는 스크립트 모듈과 상기 스크립트 모듈의 기능을 설정하는 편집 요소들을 마크업 언어로 기술한 모듈 활용 코드를 포함하는 위젯들로 구성된 라이브러리(300)와, 상기 그래픽 사용자 인터페이스(100)를 통해 상기 라이브러리(300)의 위젯을 표현하고, HTML 코드를 수정하는 것으로 동적 효과를 포함하는 위젯의 내용을 편집하며 그 결과를 표현되는 위젯을 통해 확인할 수 있도록 하는 위젯 저작부(200)를 포함한다.

상기 위젯 저작부(200)는 생성 위젯을 저장하거나 기 생성된 위젯을 불러오는 등의 파일관련 기능, 상기 라이브러리(300)에서 사용할 위젯을 선택하는 기능, 편집 내용 인쇄 기능 등과 같이 알려져 있는 일반적인 저작 도구의 메뉴 기능을 제공하기 위한 메뉴 관리부(210)와, 상기 라이브러리에서 선택된 위젯이나 기 생성된 위젯을 실행하여 시각적 표현을 제공하며 상기 시각적 표현 및 동적 효과 제공에 대한 위젯 인스턴스 메타데이터를 생성 및 관리하는 위젯 뷰어(220)와, 상기 위젯 뷰어(220)에서 선택된 위젯의 메타데이터를 마크업 언어(도시된 예에서는 HTML) 형식의 문자열 코드로 생성하는 위젯 코드 생성부(230)와, 상기 위젯 코드 생성부(230)가 생성한 마크업 언어 코드를 편집 인터페이스를 통해 편집하도록 하는 텍스트 에디터(250)와, 상기 텍스트 에디터(250)에서 편집된 마크업 언어를 분석하여 대응되는 위젯 인스턴스의 메타데이터를 갱신하도록 하는 위젯 파서(240)를 포함한다.

상기 위젯 뷰어(220)는 상기 메뉴 관리부(210)를 통해 기 생성된 위젯이나 상기 위젯 라이브러리(300)로부터 선택한 위젯을 불러들여 위젯의 생성/변경/삭제를 관리하고 위젯 실행을 통한 시각적 표현을 제공하며 그에 대한 인스턴스를 생성하고 관리하는 위젯 매니저(222)와 현재 표현되는 위젯들에 대한 위젯 인스턴스의 메타데이터(221)로 이루어진다.

도 7은 본 발명의 실시예에 따른 위젯 생성 과정을 보인 순서도로서, 도 6의 구성을 참조하여 원하는 위젯을 생성하는 예를 설명한다.

사용자는 메뉴 관리부(210)를 통해서 상기 위젯 라이브러리(300)에서 자신이 원하는 위젯과 유사한 위젯을 선택한다(S10).

선택된 위젯은 위젯 뷰어(220)에 제공되며, 상기 위젯 뷰어(220)는 해당 위젯을 편집을 위한 신규 위젯으로 생성하면서 그에 대한 인스턴스를 생성하여 연동되는 인스턴스 메타데이터를 별도로 관리한다(S20). 여기서, 상기 위젯 인스턴스 메타데이터는 위젯의 표현이나 동적 효과를 제공하는 편집 요소에 대한 설정을 포함하는데, 해당 메타데이터의 내용이 변경되면 연동되는 위젯의 표현 내용도 변경된다.

상기 위젯 뷰어(220)는 상기 위젯 인스턴스를 위젯 뷰어창에 시각적으로 표현한다(S30). 상기 시각적으로 표현된 위젯은 그 내용과 동적 효과가 표현되므로 사용자는 해당 위젯에 대한 내용을 확인할 수 있게 된다.

상기 위젯 뷰어(220)는 선택된 위젯에 대한 인스턴스 메타데이터를 포함하는 위젯 관련 정보를 상기 위젯 코드 생성부(230)에 제공하고, 상기 위젯 코드 생성부(230)는 적어도 상기 메타데이터에 포함되는 편집 가능한 항목들을 마크업 언어 코드로 생성하여 상기 텍스트 에디터(250)에 제공한다(S40). 여기서, 상기 위젯 코드 생성부(230)는 메타데이터만으로 적절한 마크업 언어 코드를 생성할 수도 있으나, 확장성과 범용성을 위해 상기 메타데이터에 속하는 편집 가능한 스크립트 모듈의 항목을 설정에 대한 정보를 포함하는 모듈 활용 코드(즉, 위젯 인스턴스 메타데이터를 기반으로 마크업 언어 코드를 생성하는데 참조할 정보 포함)를 참조하여 상기 편집 가능 마크업 언어 코드 즉, 위젯 코드를 생성할 수도 있다.

상기 위젯 코드 생성부(230)에서 생성된 편집 가능 마크업 언어 코드를 위젯 코드로 수신한 텍스트 에디터(250)는 이를 편집할 수 있도록 사용자에게 편집 인터페이스를 제공하며, 상기 편집 인터페이스를 통해서 상기 마크업 언어 코드에 대한 편집이 완료되면 이를 위젯 파서(240)에 제공한다(S50).

상기 위젯 파서(240)는 상기 편집된 마크업 언어 코드를 파싱하여 상기 위젯 코드 생성부(230)와 반대로 메타데이터를 추출한 후 이를 상기 위젯 뷰어(220)에 제공한다(S70).

상기 위젯 뷰어(220)는 상기 위젯 파서(240)가 제공하는 메타데이터를 편집 중인 위젯 인스턴스의 메타데이터에 반영하여 해당 인스턴스의 메타데이터를 갱신하거나 필요한 경우 인스턴스를 다시 생성하여 변경된 위젯을 표현함으로써 사용자가 자신이 편집한 위젯을 시각적으로 확인할 수 있도록 한다(S80).

이렇게 단순한 마크업 언어 코드를 텍스트 편집하는 것으로 용이하게 원하는 위젯을 생성할 수 있으며, 편집 과정에서 편집된 내용을 실시간 확인하면서 작업할 수 있게 된다. 결국, 이렇게 생성된 위젯 역시 위젯 라이브러리(300)에 구성된 위젯과 같이 스크립트 모듈에 대한 설정은 모두 마크업 언어에서 편집될 수 있도록 구성되므로 신규 생성된 위젯 또한 상기 내용과 동일한 방식으로 추가 편집이 가능하여 용이한 재사용이 보장된다.

도시된 구성에서, 사용자가 마크업 언어 코드를 편집하면서 과도한 편집에 의해 파서가 스크립트 모듈에 대한 메타데이터를 식별하지 못하거나 잘못된 편집에 의해 구문해석에 오류가 발생할 수 있으므로, 상기 위젯 파서(240)에는 편집된 마크업 언어 코드에 대한 기본적인 검증 구성이 적용될 수 있다. 예를 들어 작성된 마크업 언어에 대한 기본적인 태그 작성 규칙을 확인하거나 상기 위젯 코드 생성부(230)가 생성한 메타데이터 마크업 언어 코드의 태그 배치를 기준으로 코드의 태그 배치 오류를 검증한 후 검증된 코드만 파싱하도록 할 수 있다(S60).

예를 들어 도 4에 도시된 마크업 언어 코드의 경우 도 9와 같은 태그의 배치를 기준으로 같은 구조를 가진 것인지 검증하는 방법을 이용할 수 있다. 상기 검증을 통해 유효한 편집으로 판단되는 경우 해당 코드에 포함된 메타데이터를 추출하여 해당 내용으로 선택 위젯의 메타데이터를 업데이트하고 그에 따라 위젯 표현을 갱신할 수 있다.

상기 설명한 본 발명의 실시예에 따른 구성을 좀 더 상세히 설명하기 위하여 도 8을 참조한다. 도 8은 도 6의 구성에 대한 하나의 예로서, 구체적으로 도시된 각 구성요소들은 변경되거나 생략될 수 있으며, 필요에 따라 추가적인 구성이 더 부가될 수 있으므로 도시된 도 8은 단순한 실시예의 하나로 참조 되어야 한다.

도 8은 본 발명의 위젯 저작부와 라이브러리를 좀 더 상세히 나타낸 것으로, 도시한 바와 같이 위젯 라이브러리(300)의 각 위젯은 위젯의 동적 효과를 제공하는 기능에 대한 편집 가능한 요소들을 별도의 마크업 언어로 설정할 수 있도록 작성한 자바스크립트 코드로 된 자바스크립트 모듈(311)과 해당 자바스크립트 모듈(311)에 대한 편집 가능 요소를 마크업 언어로 설정한 모듈 활용 코드(312)를 포함한다. 예를 들어 도 4를 참조하면 자바스크립트 모듈은 swipeview()와 그 객체인 swipeview1.swipeview()가 될 수 있고, 모듈 활용 코드에는 도시된 HTML 내용이 포함될 수 있다(물론 라이브러리이므로 구체적인 편집 요소 대신 예시적 내용이 포함된다).

즉, 상기 모듈 활용 코드(312)는 이후 위젯 코드 생성부(230)에서 메타데이터 인스턴스를 바탕으로 편집 가능한 마크업 코드를 생성할 때 참조하거나 혹은 해당 코드를 제공하기 위한 수단을 포괄할 수 있다. 여기서, 상기 모듈 활용 코드(312)의 내용 중 자바스크립트 모듈(311)에 대한 편집 요소를 설정하는 부분에 대한 태그 구조는 그 배치가 상기 자바스크립트 모듈(311)과 연계하여 설정되므로 편집 시 해당 배치가 변경될 경우 오류가 발생할 가능성이 있다. 따라서 해당 부분의 태그 구조는 편집 시에도 해당 배치를 유지하는 것(위젯 파서에 의한 검증)이 바람직하다.

한편, 상기 모듈 활용 코드(312)는 기본적으로 상기 위젯(311)의 내용을 확인하여 직접 편집하고자 할 경우 활용될 수 있는 기본적인 마크업 언어 코드를 포함할 수 있는데, 상기 모듈 활용에 대한 프로토타입 코드와 상기 위젯을 마크업 언어 포맷에 맞추어 표현하기 위한 기본 구성(예를 들어 HTML인 경우 <html></html>, <body></body> 등과 같이 웹브라우저에서 하나의 단위 웹페이지로 판단할 수 있도록 포맷을 맞추는 구성)을 기술하는 마크업 코드를 포함할 수도 있다. 이러한 경우 상기 위젯 라이브러리(300)의 위젯을 직접 위젯 코드 생성부(230)가 획득하여 텍스트 에디터(250)에 편집 가능 코드를 제공하도록 하고, 텍스트 에디터(250)에서 이를 편집하여 직접 저장하는 것으로 위젯을 생성하는 기본 저작툴을 구성할 수 있게 된다. 물론, 단위 마크업 언어 포맷을 맞추기 위한 기본 구성 부분은 위젯 코드 생성부(230)나 텍스트 에디터(250)에서 제공될 수도 있다.

상기 위젯 라이브러리(300)의 경우 모든 위젯에 사용되는 자바스크립트 모듈(311) 전체를 본 발명에 맞추어 구성할 수 있으나 효율성을 위해서 편집 가능한 요소를 정의하는 클래스는 본 발명의 실시예에 따라 설계하되, 해당 클래스에서 직접적인 기능을 수행하는 단위 매소드나 함수 등은 서드파티(350)에 구성된 내용을 활용할 수도 있다. 예를 들어 기 설정된 기본적 사용자 인터페이스나 기본적 구성을 제공하는 위젯 API를 활용하거나, 위젯 팩토리 패턴을 활용하거나 혹은 이들을 확장한 위젯 플러그인을 활용할 수도 있다. 그러나 이들을 활용하더라도 상기 자바 스크립트 모듈(311)은 편집 가능한 요소들을 마크업 언어로 표현할 수 있도록 설계해야하고, 필요한 경우 기존 오픈소스 API나 위젯 팩토리 패턴의 내용을 수정하여 이러한 마크업 언어 코드와의 연동성을 유지하도록 해야 한다.

이제 위젯 저작부에 관한 구성을 보면, 위젯 뷰어(220)는 위젯 매니저(222)와 위젯 뷰어에서 현재 관리되는 위젯 인스턴스 메타데이터(221)를 포함하는데, 상기 위젯 매니저(222)는 도시된 바와 같이 라이브러리의 위젯이나 기 생성된 위젯에 대한 신규 인스턴스를 생성하거나 삭제하는 위젯 생성/삭제부(2222)와, 위젯 인스턴스의 메타데이터를 생성 및 삭제하거나 변경시 변경하는 메타데이터 관리부(2223)와, 상기 메타데이터 관리부의 메타데이터를 이용하여 대응 위젯 인스턴스를 시각적으로 표현하는 위젯 표현부(2221)와, 상기 코드 처리부로부터 메타데이터를 수신하는 경우 상기 메타데이터 관리부(2223)와 상기 위젯 표현부(2221)에 변경을 알리는 위젯 변경부(2224)를 포함하여 구성될 수 있다. 여기서 상기 각 구성은 다양하게 변경되거나 조합 혹은 생략될 수 있음은 물론이다.

즉, 상기 위젯 매니저(222)는 기 생성된 위젯이나 위젯 라이브러리(300)의 위젯(310)이 선택되면 이를 새로 편집할 위젯으로 생성하거나 편집 중이던 위젯을 사용자 선택에 따라 삭제하며, 위젯이 생성될 경우 해당 위젯 인스턴스에 대한 메타데이터를 관리하며, 해당 인스턴스와 메타데이터를 이용하여 위젯을 표현하고, 편집에 의해 메타데이터가 변경되면 이를 메타데이터와 위젯 표현에 반영하는 기능을 수행한다(경우에 따라 메타데이터의 변경 시 단순 반영이 아니라 해당 위젯 인스턴스가 새롭게 생성되는 형태로 반영될 수도 있다).

상기 위젯 뷰어(220)에서 선택된 위젯 인스턴스 메타데이터에는 편집 가능한 요소들에 대한 설정 내용과 그에 대응하는 자바스크립트 모듈(객체)에 대한 정보가 포함될 수 있는데 해당 선택 위젯에 대한 메타데이터는 위젯 코드 생성부(230)에 제공되며, 상기 위젯 코드 생성부(230)는 해당 메타데이터를 기반으로 편집 가능한 마크업 언어 코드를 생성한다. 여기서, 필요한 경우 선택 위젯에 대한 모듈 활용 코드가 마크업 언어 코드 생성을 위한 참조 정보로 활용될 수 있다.

상기 위젯 코드 생성부(230)는 편집할 코드의 형태에 따라 다양한 포맷의 편집 가능 마크업 언어 코드를 제공할 수 있는데, 특정한 스크립트 모듈별 마크업 언어 코드를 제공할 수 있고, 복수의 스크립트 모듈에 대한 마크업 언어 코드를 제공할 수 있으며, 전체 위젯에 대한 마크업 언어 코드를 제공할 수도 있다.

스크립트 모듈을 기준으로 하는 제한적인 마크업 언어 코드를 생성하여 텍스트 에디터(250)에 제공한다 하더라도 위젯 저작부를 통해서 동적 효과를 편집할 수 있으며, 전체 위젯에 대한 마크업 언어 코드를 제공하는 경우 편집 코드를 별도 저장하여 위젯을 생성할 수도 있다.

도시된 예시적 위젯 코드 생성부(230)는 이러한 여러 조건에 대응하기 위한 것으로 기본적으로 선택 위젯의 자바스크립트 모듈에 대한 정보를 확인하는 자바스크립트 모듈 확인부(231)와, 상기 확인된 자바스크립트 모듈에 대한 메타데이터를 마크업 언어 코드로 생성하는 모듈 대응 메타데이터 코드화부(232)와, 상기 메타데이터 코드화부의 코드와 위젯의 내용 및 기본 구성을 기술하는 마크업 코드를 결합한 편집 코드를 생성하는 편집 코드 생성부(233)를 포함할 수 있다. 이를 통해서 다양한 형식의 편집 대상 코드를 선별 제공할 수 있는데, 필요한 경우 이들 중 일부는 생략될 수 있다.

상기 텍스트 에디터(250)의 경우 상기 위젯 코드 생성부(230)를 통해 제공 받은 마크업 언어 코드를 편집 가능하게 제공하여 사용자가 편집할 수 있도록 하는 편집부(252)와, 상기 편집부(252)를 통해 편집한 마크업 언어 코드를 상기 위젯 파서(240)에 전달하여 대응 위젯의 표현을 변경하도록 요청하는 적용부(253)를 포함할 수 있다. 추가로 상기 위젯 코드 생성부(230)가 특정한 자바 스크립트 모듈에 대한 마크업 언어 코드를 제공하는 경우에는 해당 자바 스크립트 모듈에 대한 정보를 표시하는 자바스크립트 모듈 정보 제공부(251)를 더 포함할 수 있다. 이러한 텍스트 에디터(250)의 구성 역시 실시예에 따라 일부 기능이 생략될 수 있다.

상기 위젯 파서(240)는 상기 텍스트 에디터(250)에서 편집된 마크업 언어 코드에 대해서 상기 위젯 코드 생성부(230)가 생성한 메타데이터 마크업 언어 코드의 태그 배치를 기준으로 코드를 검증하는 코드 검증부(241)와, 상기 코드 검증부(241)에서 검증된 코드에 대해서만 메타데이터 추출을 실시하는 메타데이터 추출부(242)를 포함할 수 있다.

여기서, 상기 코드 검증부(241)는 단순히 마크업 언어의 포맷 구성을 기준으로 코드 오류를 검증할 수도 있으나 상기 위젯 코드 생성부(230)가 생성한 메타데이터 마크업 언어 코드의 태그 배치(점선으로 제공되는 룰)를 기준으로 편집된 코드의 태그 배치가 구성상 규칙을 벗어나게 변경된 경우 오류가 발생한 것으로 판단할 수 있다. 여기서, 대비의 대상은 전체 마크업 언어 코드가 될 수 있으나 내용 편집에 의해 추가적인 태그가 포함될 수도 있으므로(예를 들어 <body></body> 내에 텍스트 라인을 추가하거나 링크를 추가하는 등의 일반적인 HTML 편집을 위해 태그를 추가한 경우) 대비의 대상은 스크립트 모듈에 대한 항목을 설정하기 위한 부분들에 대한 것으로 한정하는 것이 바람직하다.

예를 들어, 도 4의 경우 swipeView1 모듈에 대한 편집 요소를 설정하기 위한 마크업 언어 코드이므로 해당 부분을 검증의 대상으로 하여 도 8에 도시된 설정 태그의 구조가 유지되고 있는지를 검증하는 것이 바람직하다.

이상과 같이 본 발명의 실시예에 따른 위젯 저작 시스템은 원하는 위젯을 극히 간단한 편집을 통해서 생성할 수 있으며, 편집 범위가 단순한 표시 내용이나 정적인 속성으로 한정되는 것이 아니라 동적 효과를 제공하는 스크립트의 상세한 설정 내용에 대한 편집도 포괄하기 때문에 위젯에 대한 편집 자유도가 높아 라이브러리 내의 위젯을 기반으로 편집하더라도 자신만의 개성적인 위젯을 생성할 수 있게 되며, 동적 효과에 대한 편집 내용도 즉시 반영되기 때문에 용이한 위젯 저작이 가능할 뿐만 아니라, 생성된 위젯에 대한 재사용도 극히 용이하다.

상기 설명한 위젯 저작 시스템의 경우 텍스트 편집에 관하여 주로 언급하고 있지만, 위젯 뷰어(220)의 기능을 간단히 확장하는 것만으로 표현되는 위젯을 직접 편집하여 그 편집 내용을 반영시킬 수 있으므로 텍스트 편집과 표현 위젯의 직접 조작을 통한 편집을 모두 적용할 수 있다.

도 10은 본 발명의 다른 실시예에 따른 저작 시스템의 개념을 나타낸 것으로, 앞서 설명한 위젯 뷰어의 경우 위젯 인스턴스 메타데이터를 관리하고 있기 때문에 표현 위젯에 대한 조작으로 변경되는 메타데이터의 내용도 즉시 갱신할 수 있다.

따라서 도시된 시스템의 위젯 뷰어(220')는 위젯 뷰어창(120')에 위젯을 표현하는 기능에 추가하여 표시된 위젯에 대한 드래그 앤 드롭, 드래그, 속성 선택 인터페이스 제공 등과 같은 표시 위젯의 크기, 위치, 색상, 폰트를 포함하는 시각적 표시 대상에 대한 화면상 편집이 가능하도록 하는 인터페이스를 추가하고, 해당 인터페이스에 의해 변경되는 선택 위젯의 메타데이터가 갱신되도록 구성될 수 있다. 이렇게 위젯 뷰어(220')가 제공하는 인터페이스를 통해 선택 위젯의 메타데이터가 변경되면 해당 변경된 메타데이터의 내용은 위젯 코드 생성부(230)를 통해 텍스트 에디터(250)의 편집 코드에 반영되므로 표현 위젯에 대한 조작 결과도 편집 마크업 언어 코드에 반영된다. 상기 변경되는 마크업 언어 코드의 경우 표현 변경 전에 편집된 마크업 코드가 위젯 파서(240)를 통해 위젯 뷰어(220')에 제공되어 이미 메타데이터에 반영된 상태이므로 표현 변경에 의한 신규 생성된 코드는 기존 편집 코드에서 변경된 메타데이터 설정 내용만 변경될 뿐이므로 후속 텍스트 편집에 영향을 미치지 않는다.

결국, 위와 같은 구성을 적용할 경우 위지위그(WYSIWYG)가 구현된 위젯 저작 도구로서 마크업 언어 편집만으로 내용은 물론이고 스크립트에 의한 동적 효과까지도 편집할 수 있고 시각적 조작도 가능한 위젯 저작 시스템을 제공할 수 있고, 재사용성이 높은 위젯 생성에 의해 해당 위젯 저작 시스템의 효용성을 극대화할 수 있다.

이상에서는 본 발명에 따른 바람직한 실시예들에 대하여 도시하고 또한 설명하였다. 그러나 본 발명은 상술한 실시예에 한정되지 아니하며, 특허 청구의 범위에서 첨부하는 본 발명의 요지를 벗어남이 없이 당해 발명이 속하는 기술 분야에서 통상의 지식을 가진 자라면 누구든지 다양한 변형 실시가 가능할 것이다.

본 발명은 마크업 언어 코드에 대한 텍스트 편집만으로 단순한 표현뿐만 아니라 스크립트가 제공하는 동적 효과까지도 용이하게 편집하고 재사용할 수 있도록 하는 위젯 저작 시스템을 제공함으로써 스크립트 언어와 프로그래밍에 익숙하지 않은 사용자라도 높은 품질의 위젯을 용이하게 생성할 수 있으며, 해당 생성 위젯을 쉽게 재사용할 수 있어 위젯 저작 시스템에 대한 만족도를 높일 수 있어 위젯 기능을 제공하는 다양한 포털이나 소셜 네트워크 서비스 제공자 시스템, 위젯 제작 서비스 시스템, 위젯 편집 웹서비스 시스템, 홈페이지 제작 시스템, 다양한 종류의 웹 미디어 시스템, 웹기반 운영체제 응용프로그램 등에서 광범위하게 이용할 수 있다.

100: 그래픽 사용자 인터페이스 110: 메뉴
120: 위젯 뷰어창 130: 텍스트 에디터창
200: 위젯 저작부 210: 메뉴 관리부
220: 위젯 뷰어 221: 위젯 인스턴스 메타데이터
222: 위젯 매니저 230: 위젯 코드 생성부
240: 위젯 파서 250: 텍스트 에디터
300: 위젯 라이브러리

Claims (17)

1. 위젯 뷰어가 위젯 라이브러리에서 선택된 위젯의 인스턴스 메타데이터를 생성하고 상기 위젯의 실행 화면을 시각적으로 표현하는 위젯 표현단계;
   위젯 코드 생성부가 상기 위젯 표현 단계에서 생성된 위젯의 인스턴스 메타데이터를 기반으로 편집 가능 마크업 언어 코드를 생성하여 텍스트 에디터에 제공하는 코드 생성 단계; 및
   위젯 파서가 상기 텍스트 에디터에서 편집된 마크업 언어 코드의 태그 배치를 검증하여 검증을 통과한 코드로부터 위젯의 인스턴스 메타데이터를 추출하여 상기 위젯 뷰어에 전달하면, 상기 위젯 뷰어가 기 생성된 대응 위젯의 인스턴스 메타데이터를 갱신하여 위젯 표현에 반영하는 갱신 단계를 포함하되,
   상기 위젯 라이브러리의 위젯은 위젯의 동적 효과를 제공하는 기능에 대한 편집 가능 요소들을 별도의 마크업 언어로 설정할 수 있도록 작성된 스크립트 모듈 및 상기 스크립트 모듈의 편집 요소를 마크업 언어로 연동 설정하는 모듈 활용 코드가 포함된 위젯인 것을 특징으로 하는 위젯 저작 방법.
   
2. 삭제
3. 삭제
4. 삭제
5. 삭제
6. 삭제
7. 삭제
8. 삭제
9. 위젯 뷰어가 위젯의 동적 효과를 제공하는 기능에 대한 편집 가능 요소들을 별도의 마크업 언어로 설정할 수 있도록 작성된 스크립트 모듈 및 상기 스크립트 모듈의 편집 요소를 마크업 언어로 연동 설정하는 모듈 활용 코드가 포함된 위젯으로 구성된 라이브러리에서 선택된 위젯이나 라이브러리 위젯 편집을 통해 기 생성된 위젯을 불러들여 그 실행 화면을 시각적으로 표현하고, 선택된 위젯의 시각적 표현 및 동적 효과에 대응되는 모듈 활용 코드 내 편집 요소를 메타데이터로 관리하는 위젯 표현 단계;
   위젯 코드 생성부가 선택 위젯의 메타데이터로부터 편집 가능 마크업 언어 코드를 생성하여 텍스트 에디터에 제공하는 코드 생성 단계;
   텍스트 에디터를 통해 상기 편집 가능 마크업 언어 코드가 편집되는 편집 단계; 및
   위젯 파서가 상기 텍스트 에디터에서 편집된 마크업 언어 코드의 태그 배치를 검증하여 검증을 통과한 코드로부터 편집 요소의 메타데이터를 추출하여 전달하는 것으로 상기 위젯 뷰어가 관리하는 메타데이터를 갱신하는 갱신 단계를 포함하는 것을 특징으로 하는 위젯 저작 방법.
   
10. 위젯의 동적 효과를 제공하는 기능에 대한 편집 가능 요소들을 별도의 마크업 언어로 설정할 수 있도록 작성된 스크립트 모듈과 상기 스크립트 모듈의 기능을 설정하는 편집 요소들을 마크업 언어로 기술한 모듈 활용 코드를 구비한 위젯들로 구성된 라이브러리;
    상기 라이브러리에서 선택된 위젯의 모듈 활용 코드 내 편집 요소를 메타데이터로 관리하며 상기 메타데이터를 이용하여 상기 선택된 위젯의 실행 화면을 표현하는 위젯 뷰어;
    상기 위젯 뷰어의 메타데이터를 편집 가능 마크업 언어 코드로 생성하고 편집된 마크업 언어 코드의 태그 배치를 검증하여 검증을 통과한 코드로부터 메타데이터를 추출하여 상기 위젯 뷰어에 제공하는 코드 처리부; 및
    상기 코드 처리부가 제공하는 마크업 언어 코드에 대한 편집 인터페이스를 제공하고 편집된 내용을 상기 코드 처리부에 제공하는 텍스트 에디터를 포함하는 것을 특징으로 하는 위젯 저작 시스템.
    
11. 삭제
12. 삭제
13. 삭제
14. 삭제
15. 삭제
16. 삭제
17. 삭제

Images