KR100861052B1 - 웹브라우저상에서 동작하는 웹 어플리케이션의 제공 방법및 그 기록매체 - Google Patents

Abstract

본 발명은 HTML 언어를 모르는 클라이언트라도 쉽게 웹 페이지를 작성할 수 있는 웹 어플리케이션에 관한 것으로서, 상기 웹 어플리케이션은 웹브라우저상에서 텍스트, 이미지, 텍스트 및 이미지가 혼합된 객체를 마우스의 동작만으로 생성, 편집, 이동, 블록화할 수 있는 클립 및 이용자-생성-템플릿을 제어할 수 있고, 작성된 클립은 독립적으로 동시에 웹 페이지상의 모든 클립들을 동시에 제어할 수 있으며, 클라이언트간 네트워크를 통하여 다양한 클립이 제공되므로 클라이언트는 쉽게 자신의 웹페이지를 만들 수 있다.

웹어플리케이션, 클립, 이용자-생성-템플릿, 객체

Description

웹브라우저상에서 동작하는 웹 어플리케이션의 제공 방법 및 그 기록매체{A method of web browser application service and recording media}

도 1은 본 발명의 전체적인 구성도이다.

도 2는 도 1의 구성에 의한 동작 순서도이다.

도 3은 웹 서버에서 클라이언트에 제공하는 초기 화면이다(계정만 있는 상태).

도 4는 웹 서버에서 클라이언트에 제공하는 초기 화면이다(이용자-생성-템플릿이 있는 상태).

도 5는 이용자-생성-템플릿의 예시화면이다.

도 6은 웹어플리케이션의 계층구조이다.

도 7은 이미지 업로드 예시화면이다.

도 8은 웹어플리케이션 초기 화면이다.

도 9는 클립 마법사이다.

도 10a은 클립의 구조를 XML로 나타낸 것이다.

도 10b는 클립의 구조를 json으로 나타낸 것이다.

도 11a은 텍스트 툴바이다.

도 11b는 이미지 툴바이다.

도 11c는 볼룬 툴바이다.

도 11d는 패러그래프 툴바이다.

도 11e는 버튼 툴바이다.

도 12a는 미리 정의된 형태의 세이프와 스타일이다.

도 12b는 프리셋의 동작 흐름도이다.

도 13은 페이지를 처리하는 동작 흐름도이다.

<도면의 주요 부분에 대한 간단한 설명>

100 : 클라이언트, 200 : 웹서버, 300 : 스토리지 영역, 400 : 데이터베이스

본 발명은 HTML(Hyper-Text Markup Language) 문법에 대한 지식이 없는 사람들도 웹페이지를 쉽게 구축할 수 있도록 웹브라우저상에서 동작하는 웹어플리케이션 및 그의 운용방법에 관한 것으로서, 좀 더 구체적으로는 웹브라우저상에서 텍스트, 이미지, 텍스트 및 이미지가 혼합된 객체를 마우스의 동작만으로 생성, 편집, 이동, 블록화할 수 있는 클립 및 이용자-생성-템플릿을 제어하는 웹 어플리케이션에 관한 것이다.

종래의 홈페이지 제작방법으로는 전문가가 미리 만들어 놓은 일정한 양식의 홈페이지를 선택하거나(공개특허 특2002-0078633) 미리 만들어진 홈페이지의 구성 요소(머리말, 메뉴바, 북마크 폴더, 북마크, 꼬리말 등)를 선택하여 이용하는 방식(공개특허 특2002-0031501, 공개특허 특2003-0033439)의 홈페이지 제작 방법이 있었다. 하지만 이들 방법은 각 구성요소에 대한 스타일(위치, 크기, 배경색, 배경그림, 테두리모양, 테두리색, 글자 편집, 링크 편집 등)의 편집이 웹브라우저(Web browser)에서 직접 위지위그(WYSIWYG, What You See Is What You Get)방식으로 이루어지는 것이 아니어서 불편하였다.

상기 문제점을 해결하기 위한 종래의 방법으로는, 웹브라우저에서 직접 위지위그 방식으로 홈페이지의 구성요소를 구성요소별로 생성하고 편집하기 위하여, 그 구성요소들의 HTML 코드를 div 태그안에 넣은 이중구조의 노드로 만들고 div 위치 값과 div 내용 값을 서버측 XML 노드에 각각 위치 속성과 내용 속성으로 저장한 후에 다시 HTML 문서로 복원해냄으로써 조립식으로 홈페이지를 제작하는 방법(등록번호 특10-523512)이 있다. 그러나 상기 방법은 구성요소의 생성 및 편집이 컨텍스트(context) 메뉴의 형태로 제시되어, 언어에 익숙하지 못한 사용자들이 텍스트 형태로 이미지를 생성하고 편집하기가 어려울 뿐 아니라 오랜 시간이 필요하다는 문제가 있었다.

또한, 마우스 동작만으로도 원하는 메뉴와 페이지를 생성시켜 자신이 원하는 위치에 텍스트(text)와 그림을 삽입시킴으로써, ftp(file transfer protocol)로 올 리는(upload) 등의 별도의 작업 없이 손쉽게 홈페이지를 구축할 수 있는 컴퓨터 소프트웨어에 관련된 발명(공개특허 특 2002-581)이 개시되었으나, 상기 공개된 특허에는 마우스를 동작시킴으로써 손쉽게 홈페이지를 구축할 수 있다는 언급만 있을 뿐, 상기 발명의 실시 양태가 구체적으로 제시되지 아니하였다.

이에 본 발명은 웹브라우저에서 실시간 동작하는 클라이언트용 어플리케이션을 제공하는 것이다.

본 발명의 다른 목적은 웹브라우저에서 개개의 이미지, 텍스트 및 이들이 결합된 객체의 모양과 스타일을 자유롭게 생성하고 편집하며, 상기 작성된 객체가 복수개인 경우에 복수 객체들을 동시에 그리고 각각을 편집하고 이동할 수 있는 새로운 형태의 클라이언트용 웹 어플리케이션을 제공하는 것이다.

본 발명의 또 다른 목적은 HTML 코드 등 페이지 제작에 필요한 기술적 배경이 없는 사용자들도 웹페이지를 쉽게 제작할 수 있으며, 제작된 웹페이지간에 네트워크가 용이한 방법 및 그 시스템을 제공하는 것이다.

상기 목적을 실시하기 위하여 본 발명은 웹 페이지를 생성하고 편집하는 사용자 컴퓨터로서의 클라이언트(100)와, 상기 클라이언트에 접속되어 상기 클라이언트에서 요구를 수신하고 실행하는 웹서버(200)와, 상기 웹서버(200)와 연결되어 클라이언트가 업로드한 이미지, 클립 이미지, 클라이언트에 제공되는 기본적인 시스 템 이미지를 저장하는 스토리지 영역(300)과, 클라이언트가 작성한 클립 및 페이지의 속성값들을 저장하는 데이터베이스(400)를 포함한다.

상기 구성에 의한 본 발명의 운용 동작은 다음과 같다. 클라이언트가 웹서버에 접속하여 로그인하면, 웹서버는 클라이언트에 웹페이지 초기 화면을 전송한다. 상기 초기화면은 포토(Photo), 블로그(Blog), 코멘트(Comment), 북마크(Favorite), 디자인(Design) 메뉴가 포함된다. 상기 포토 메뉴는 사진을 올리는 공간이며, 블로그 및 북마크 메뉴는 통상의 블로그 및 북마크와 동일하다. 코멘트 메뉴는 방명록과 유사한 것으로서 방문자가 메시지를 남기는 곳이다. 디자인 메뉴는 본 발명에서 제공하는 웹 어플리케이션을 불러오는 메뉴로서, 클라이언트의 디자인 메뉴 클릭으로 웹서버는 웹 브라우저상에서 동작하는 웹어플리케이션을 클라이언트에 제공한다.

상기 어플리케이션은 클립 마법사, 툴바를 포함한다. 클라이언트는 상기 어플리케이션을 이용하여 객체들을 생성하고 편집하여 원하는 웹페이지를 구성한다. 웹페이지를 구성하는 클립의 데이터 구조는 XML 또는 json형식으로 구성되어 있으며, 페이지는 클립 데이터와 페이지 데이터를 파싱한다. 클립 마법사는 클립 리스트를 생성하여 각각의 클립에 해당하는 HTML Element, VML, SVG로 변환하고, 웹 브라우저에 엘리먼트를 생성한다. 그 후 페이지의 색상, 바탕화면을 적용시킨다. 상기와 같은 방법으로 페이지를 구성하면, ajax 로 서버에 전송하여 저장한다. 즉, 클립 및 페이지는 XML 또는 json 에 의하여 수행되고, ajax 형태로 서버로 전달되 어 저장된다.

이하, 도면을 참조하여 당업자가 용이하게 실시할 수 있도록 설명한다.

도 1은 본 발명의 전체 시스템에 대한 구성도이다. 본 발명은 웹 페이지를 생성하고 편집하는 사용자 컴퓨터로서의 클라이언트(100)와, 상기 클라이언트에 접속되어 상기 클라이언트의 요구를 수신하고 실행하는 웹서버(200)와, 상기 웹서버(200)와 연결되어 클라이언트가 업로드한 이미지, 클립 이미지, 클라이언트에 제공되는 기본적인 시스템 이미지를 저장하는 스토리지 영역(300)과, 클라이언트가 작성한 클립 및 페이지의 속성값들을 저장하는 데이터베이스(DB, 400)로 구성된다.

상기 웹서버(200)에는 클라이언트의 이미지 및 블러그를 업로드 하고 클라이언트로부터의 요청에 대해 XML 또는 json 형태로 응답을 처리하는 서버인 프로세싱 서버(Processing server, 210)와 클라이언트로의 이미지 요청에 대하여 스토리지(Storage) 영역(300)으로부터 이미지를 끌어다가 웹으로 서비스하는 이미지 서버(Image server, 220)와, 클라이언트의 홈페이지를 호스팅하는 웹페이지 호스팅 서버(Webpage hosting server, 230)가 포함된다.

상기 스토리지 영역(300)은 상기 웹서버(200) 내에 일체적으로 구비되거나 혹은 외장될 수 있으며, 클라이언트가 업로드 한 이미지, 기본적인 시스템 이미지, 클립 이미지 등을 저장하는 스토리지 팜(Storage Farm, 310)과 트래픽이 많은 이미 지를 선별하여 저장하는 캐쉬 스토리지(Cash storare, 320)가 있다. 상기 캐쉬 스토리지는 트래픽 분산 효과와 안정적인 서비스를 가능하게 한다.

상기 데이터베이스(400)에는 회원정보와 시스템 전체에서 공통적으로 쓰이는 정보가 저장된 글로벌-DB 팜(Global-DB Farm, 410), 이미지 속성, 제목, 태그 등 클라이언트가 업로드한 이미지 및 클립용 이미지와 관련된 정보를 포함하는 이미지-DB 팜(Image-DB Farm, 420), 클라이언트가 업로드한 이미지, 블로그 글, 관련 태그 등의 정보를 검색하는 검색-DB 팜(Search-DB Farm, 430), 스타일의 내용을 XML 또는 json 형태의 텍스트 데이터로 만들어서 저장하는 스타일-DB 팜(Style-DB Farm, 440), 블로그와 관련된 글 내용, 제목, 태그 등의 정보를 저장하는 블로그-DB 팜(Blog-DB Farm, 450)으로 구성된다. 상기에서 팜(Farm)은 DB가 하나가 아닌 복수개가 묶여서 하나의 역할을 하는 것을 의미한다.

상기 데이터베이스와 스토리지 영역에 저장되는 정보에는 차이가 있다. 스토리지 영역(300)에 저장되는 정보는 이미지의 원천적인 형태이며, 데이터베이스(400)에 저장되는 정보는 상기 스토리지 영역에 저장된 이미지가 클라이언트에게 보여지도록 하는 속성값 및 텍스트, 태그, XML 데이터이다. 따라서 클라이언트(100)가 웹서버(200)에 이미지를 독출하라고 요구하면 스토리지 영역(300)에서 원천 이미지를 불러오고, 데이터베이스(400)에서 해당 이미지와 연결되어 저장된 속성값을 불어와 이들 데이터를 결합시켜 클라이언트에게 보여주는 것이다.

웹서버(200)에서 클라이언트로 이동되는 혹은 이와 반대 방향으로 이동되는 모든 정보는 http 프로토콜 상에서 전송되며, 데이터의 포맷 형태만 XML, json, html, 자바스크립드 등으로 다르다.

정보의 흐름은 도 1의 화살표와 번호로 도시된 바와 같이 크게 세 가지 종류가 있다. 첫째는 클라이언트로부터 일반적인 웹페이지 호출에 대해(①) DB(400)와 연동하여(②) 스토리지 영역(300)으로부터 이미지를 불러와(③) 응답하는(①) 것으로서, 일반적인 html, 자바스크립트 및 후술하는 툴바와 같은 시스템 이미지가 있다. 둘째는 클라이언트의 각종 프로세싱 요청에 대해서(④) DB(400)와 연동하여 이미지 정보, 블로그 내용, 클라이언트 정보, 스타일 정보 등에 대해 신규생성, 업데이트, 삭제 등의 작업을 하고(⑤), 필요시 스토리지 영역(300)에 이미지를 저장하고(⑥), 응답을 json 또는 XML 형태로 클라이언트에게 전송한다(④). 셋째는 상기 첫째의 정보 이동에서 트래픽이 많은 이미지만을 따로 설정한 것으로서, 클라이언트로부터 이미지의 요청에 대해(⑦) 스토리지 영역(300)으로부터 해당 URL에 해당되는 이미지를 가져와서(⑧) 클라이언트에 응답하는(⑦) 것으로서, 이는 단순히 해당하는 URL에 해당하는 이미지를 클라이언트에게 보내주는 것이다. 상세한 정보의 형태와 이동 태양에 대해서는 후술한다.

본 발명에서 사용되는 용어의 의미는 다음과 같다.

"클립(Clip)"은 HTML 및 Javascript를 사용하여 웹 페이지에 나타나는 구성 요소를 넣는 객체로서, 이미지, 텍스트 또는 멀티미디어 등을 넣을 수 있으며, 클라이언트가 마우스의 클릭과 드레그 동작으로 자유롭게 편집할 수 있다.

"이용자-생성-템플릿(User-created-Template)"은 클립들의 어레이로서 웹 페이지상에 클라이언트가 원하는 형태로 다수개의 클립을 생성하여 배치한 경우에 있어서의 웹 페이지 상에 구현된 클립들의 전체적인 모습이다. 상기 이용자 -생성-템플릿은 클라이언트가 페이지와 연결시켜 저장하면 다른 클라이언트가 볼 수 있으나, 페이지와 연계 않고 저장하면 해당 이용자-생성-템플릿을 작성한 클라이언트만 볼 수 있다. 클라이언트가 복수개의 이용자-생성-템플릿을 작성하면 클라이언트는 복수개의 페이지에 각각 또는 중복하여 매칭시킬 수 있으며, 각 페이지 간에 연결된 탭을 이용하여 이용자-생성-템플릿을 차례로 볼 수 있다.

"페이지"는 클라이언트에게 보여지는 웹 브라우저의 화면으로서, 한 페이지에는 다수의 클립이 있을 수 있다. 클라이언트는 복수개의 페이지를 소유할 수 있으며, 각각의 페이지는 각기 고유한 URL를 갖는다. 또한 페이지는 고유의 URL을 갖기 때문에 다른 클라이언트의 홈페이지를 볼 수 있고, 이를 통하여 개인 홈페이지나 기업의 홍보 페이지로 활용할 수 있다. 웹서버는 클라이언트를 분류하여 레벨을 부여할 수 있으며, 레벨에 따라 한번에 소유할 수 있는 페이지의 개수를 제한할 수 있다. 종래의 페이지는 클라이언트가 특정의 스킨(skin)이나 템플릿을 선택하면 해당 스킨이나 템플릿이 허용해준 범위내에서 내용을 삽입하거나 변경을 가할 수 있 을 뿐이고, 스킨이나 템플릿 그 자체를 변경할 수 없었다. 또한 하나의 스킨을 선택하면 웹페이지 전체가 선택한 스킨의 영향을 받았으나, 본 발명에서의 각각의 웹페이지는 서로 다른 이용자-생성-템플릿을 가질 수도 있고 또한 동일한 이용자-생성-템플릿을 가질 수도 있다.

기타 사용되는 ajax, CSS, json, RSS, SVG, VML, Canvas 는 W3C에서 정의한 것과 동일하다.

도 2는 도 1의 시스템이 동작하는 전체적인 흐름도이다.

클라이언트가 웹서버에 접속하여 로그인하면(S10), 웹서버는 클라이언트에 웹페이지 초기 화면을 전송한다(S20). 초기 화면에는 포토(Photo), 블로그(Blog), 코멘트(Comment), 북마크(Favorite), 디자인(Design) 메뉴가 있다. 포토 메뉴는 사진을 올리는 공간이며, 블로그 및 북마크 메뉴는 통상의 블로그와 동일하다. 코멘트 메뉴는 방명록과 유사한 것으로서 방문자가 메시지를 남기는 곳이다. 디자인 메뉴는 본 발명에서 제공하는 웹 어플리케이션을 불러오는 메뉴로서, 클라이언트의 디자인 메뉴 클릭으로 웹서버는 웹 브라우저상에서 동작하는 웹 어플리케이션을 클라이언트에 제공한다. 도 3 및 4에 상기 초기 화면이 도시되어 있다. 도 3의 초기화면은 클라이언트가 웹서버에 계정을 만들었으나 클립이나 이용자-생성-템플릿을 작성하여 저장하지 않은 경우에 제공하는 화면이고, 도 4는 도 5와 같은 이용자-생성-템플릿을 작성하고 저장한 후에 다시 로그인하였을때 제공하는 초기화면이다. 클라이언트에 전송하는 초기화면은 로그인시의 클라이언트 정보와 연결되어 로그인 이전에 저장한 이용자-생성-템플릿 혹은 페이지를 스토리지 영역(300)과 데이터베이스(400)에서 불러와서 전송한다. 통상적으로는 도 5와 같이 특정의 작업을 한 후에 종료하므로, 도 4와 같은 초기화면이 일반적인 초기 화면이다. 웹서버는 상기 초기화면에서 디자인 요청이 있는지를 감시하여(S30) 디자인 메뉴의 요청이 있다면 클라이언트에 웹어플리케이션을 제공하고(S50), 디자인 메뉴의 요청이 아니라면 해당 관련 자료를 클라이언트에 전송한다(S40). 웹서버(200)는 클라이언트(100)가 상기 전송된 웹어플리케이션을 이용하여 웹 페이지를 작성하고 저장하는지를 검사한다(S60). 클라이언트로부터의 저장요구가 있을 시는 페이지를 저장하고(S80), 저장요구가 있기 전까지는 다른 요구, 예를 들어 이미지 전송, 업로드 등의 요구를 스토리지 영역(300)과 데이터베이스(400)를 연동하여 클라이언트의 요구를 수행한다(S70).

웹 어플리케이션은 도 6과 같이 계층적으로 구성되어 클라이언트가 웹 페이지를 자유롭게 작성할 수 있도록 도와준다. 웹 어플리케이션은 3계층으로 구성되어 있다. 웹 어플리케이션의 최하층은 웹에서의 UI(User Interface), 윈도우(Window), 이벤트(Event), 이펙트(Effect), 메뉴(Menu), 이미지(Image), XML 및 네트워크 처리를 위한 기본적인 라이브러리를 포함하는 플레폼 라이브러리(Platform Library) 계층이다. 상기 플렛폼 라이브러리 계층은 수많은 라이브러리로 구성되어 객체의 형태(세이프)를 제어하고, 마우스의 이동에 따라 클립의 리사이징(resizing), 마우스 이동시 색 변환, 탭 이동을 수행한다. 또한 XML 또는 json 형식의 데이터를 네 트워크를 통해 서버로 전송할 때에는 ajax로 변경하여 전송하고, 반대로 서버에서 ajax로 전송되어 온 클립 데이터를 XML 또는 json 형식의 데이터로 변경시킨다. 이러한 전송 방식의 변경을 통해 XML 기반의 웹서비스 언어를 사용하고, 클라이언트에서는 자바스크립트를 가지고 서버에 응답하므로 브라우저와 웹서버 간의 데이터량이 줄어들어 어플리케이션의 응답성이 향상되며 웹서버의 부담이 줄어들게 된다. 또한 웹에서 해당 서비스를 제공하는데에 있어서 별도로 프로그램을 설치(예를 들어, 액티브엑스 또는 플래시)하거나 해당 기능을 갖춘 새 창을 띄울 필요없이 일반 브라우저 화면에서 그대로 이용할 수 있고, 클라이언트로 하여금 직접 웹상의 자료의 위치를 편집하는 것이 가능하다.

상기 플렛폼 라이브러리 계층과 최상 계층을 연결시켜 주는 중간층은 클립 매니저(Clip Manager), 세이프 캔버스(Shape Canvas), 이미지 모듈(Image Module)을 가진다. 상기 클립 매니저는 클립 데이터의 저장, 삭제, 복제 및 레이어 처리를 담당하는 모듈이고, 세이프 캔버스는 벡터 그래픽에 필요한 VML과 SVG, Canvas 처리를 담당하는 모듈이며, 이미지 모듈은 이미지를 서버에 업로드하고, 플리커(Flickr) 이미지를 불러와서 처리하는 모듈이다. 이미지 업로드는 도 7과 같이 3가지 방식이 있다. 상기 3가지 방식은 클라이언트가 자신의 컴퓨터에 저장된 이미지를 불러오는 "Add image" 메뉴와, 웹상의 다른 곳에 저장되어 있는 이미지를 불러오는 "Add URL" 메뉴와, 사진 공유 블로거인 Flickr 로부터 이미지를 불러오는 "From Flicker" 메뉴가 있다. 상기와 같이 불러온 이미지는 원천적인 이미지로서 하단의 "Upload" 메뉴에 의하여 스토리지 영역(300)에 저장된다. 상기 이미지는 이후에 클립의 툴바 메뉴에 의하여 형태 및 스타일이 변경되고 상기 형태 및 스타일은 데이터베이스(400)에 저장된다.

웹 어플리케이션의 최상 계층은 클립 마법사(Clip Wizard), 툴바(Toolbar), 페이지 모듈(Page Module) 등의 3가지 모듈로 이루어져 있다. 상기 세 모듈은 클라이언트가 직접 클립을 생성, 편집, 저장할 수 있도록 도와주는 모듈이다. 클립 마법사는 클립의 생성, 공유, 저장을 담당하는 모듈이고, 툴바는 편집에 필요한 버튼과 메뉴, 프리셋(Preset)을 담당하는 모듈이며, 페이지 모듈은 클립들로 구성된 페이지(이용자-생성-템플릿) 데이터를 서버에 저장하고 불러오는 모듈이다.

상기 웹 어플리케이션의 계층에서 클립 마법사는 본 발명이 제공하는 웹 어플리케이션의 핵심으로서 클립을 쉽게 만들 수 있게 한다. 클라이언트는 클립 아이콘을 클릭하거나 드래그 앤 드롭으로 원하는 위치에 클립을 생성할 수 있다.(이에 대한 원리 필요)

도 5는 이용자-생성-템플릿을 생성하여 저장된 후, 도 4와 같은 초기 화면에서 "Design" 메뉴를 클릭하였을 때에 나타나는 웹어플리케이션의 최상 계층의 예시화면이다. 도 8은 도 3과 같이 사용자 계정만 있는 상태에서 "Design" 메뉴를 클릭하였을 때에 나타나는 웹어플리케이션의 최상 계층의 예시화면이다. 도 5 및 도 8의 우측 화면에 보이는 것이 클립 마법사이다. 도 9는 상기 클립마법사를 확대하여 도시한 것이다.

도 9와 같이 클립 마법사는 기본 클립(Basic Clip), 내 클립(My Clip), 공유 클립(Shared Clip)으로 나누어진다. 기본 클립(Basic Clip)은 텍스트, 이미지, 패러그래프, 볼룬, 버튼 클립의 이미지가 도시되어 있고, 클라이언트는 상기 기본 클립에 도시된 이미지를 클릭하거나 드레그하여 웹 페이지상에 가져다 놓음으로써 원하는 클립을 생성할 수 있다. 내 클립(My Clip)은 사용자가 기본 클립을 통해 또는 내 클립에 저장되어 있는 클립을 통해 또는 다른 사용자가 작성하고 공유해 놓은 클립을 통해 작성한 클립을 재사용하기 위하여 저장하는 클립저장 공간으로서, 내 클립에 저장되는 클립들의 이미지는 서버의 스토리지 영역(300)에 저장되며, 클립들의 텍스트, 이미지의 스타일(style)과 세이프(shape) 등은 데이터베이스(400)에 저장된다. 클라이언트에 의하여 작성된 클립은 저장시에 공유로 할지(public) 또는 비밀로 할지(private)를 결정할 수 있다. 저장시에 공유로 하던 또는 비밀로 하던 클라이언트가 작성한 클립은 내 클립에 저장되며 클라이언트가 저장시에 공유(public)를 선택하면 그 클립은 다른 클라이언트의 공유 클립(Shared Clip)에 표시되어 누구나 이용할 수 있게 된다. 클라이언트가 클립의 저장시에 비밀(private)을 선택하면 그 클립은 내 클립(My Clip)에만 저장되고 다른 클라이언트가 볼 수 없다. 상기 공유 클립(Shared Clip)을 통하여 본 발명에 의한 서비스는 클라이언트의 웹 페이지간에 네트워크가 용이하게 수행된다.

클립마법사가 기본 클립에서 제공하는 클립 종류는 텍스트(Text), 이미 지(Image), 볼룬(Balloon), 패러그래프(Paragraph) 및 버튼(Button)이 있으며 동영상 클립을 선택적으로 포함할 수 있다. 상기 텍스트 클립은 글(텍스트)만 포함될 수 있으며, 폰트의 종류, 크기, 색상 등을 지정할 수 있다. 이미지 클립은 이미지를 포함하며, 이미지의 리사이즈(Resize), 로테이션(Rotation), 테두리(Border) 등을 지정할 수 있다. 볼룬 클립은 말풍선 형태를 취하며 폰트의 종류, 크기, 색상, 풍선 모양, 말꼬리의 위치 등을 지정할 수 있다. 패러그래프 클립은 텍스트와 이미지를 동시에 포함하는 클립으로서 패러그래프 내에 다른 박스를 포함할 수 있고, 패러그래프 내의 글에 대하여 문단 편집이 가능하다. 버튼 클립은 마우스의 동작에 따라 반응하는 통상의 버튼 기능을 하며, 클라이언트의 동작에 따라 노말(Normal), 포커스(Focus), 클릭(Click)의 세 가지 상태를 포함한다. 버튼 클립은 마우스에 의하여 눌려졌을때 링크된 URL 장소로 이동하거나 특정의 동작을 수행하는 기능을 한다. 버튼 클립내에 포함되는 이미지는 변경이 가능하다. 마지막으로 동영상 클립은 동영상을 볼 수 있게 하는 클립으로서, 동영상은 클릭되었을 때 동영상화면이 진행될 수 있도록 동영상 정보가 저장되어 있는 URL 이 링크되어 있다.

클립의 구조는 세이프(Shape), 스타일(Style), 컨텐츠(Contents), 하이퍼링크(HyperLink) 및 레이어(Layer)가 있으며, 세이프는 클립의 모양, 크기, 좌표 등을 정의하는 구성요소이고, 스타일은 클립의 색상, 형태를 정의하는 구성요소이며, 컨텐츠는 클립에 포함되는 텍스트, 이미지 또는 멀티미디어를 의미하고, 하이퍼링크는 클립을 클릭했을 때에 이동할 링크의 URL을 포함하는 구성요소이다. 마지막으 로 레이어는 각 클립들간에 층 구조를 이루어, 클립의 배치 및 표현에 알맞은 층으로의 이동을 제공하는 구성요소이다. 세이프에서 '모양'은 별, 하트와 같이 클립의 생긴 모양을 의미하면, 스타일에서 '형태'는 투명도, 그라디에이션, 테두리의 두께, 모양, 색상 등을 의미한다.

클립의 데이터 구조는 XML 또는 json으로 나타낸다. 도 10a는 클립의 구조를 XML로 나타낸 것이며, 도 10b는 json으로 나타낸 것이다. 본 발명의 클립 구현은 W3C에서 정의한 HTML Element 들을 사용해서 구현하고, 세이프와 스타일의 구현에는 VML(Internet Explorer)과 Canvas, SVG(Firefox)를 사용하여 구현한다.

도 11에 도시된 툴바(Toolbar)는 클립의 편집에 필요한 기능들을 제공하며, 각각의 클립의 종류마다 툴바가 바뀌어 클립을 효율적으로 이용할 수 있다. 툴바는 클립마법사의 기본메뉴에서 어느 하나의 클립을 선택하거나, 내 클립 또는 공유 클립에 저장된 클립을 선택하면 해당 클립의 종류에 해당되는 툴바가 웹페이지의 상단에 나타난다. 도 11a는 텍스트 클립 툴바, 도 11b는 이미지 클립 툴바, 도 11c는 볼룬 클립 툴바, 도 11d는 패러그래프 클립 툴바, 도 11e는 버튼 클립 툴바이다.

툴바에서 시스템 메뉴(System Menu)는 모든 클립에 공통적으로 포함되는 메뉴로서, 오픈 페이지(Open Page) 및 세이브 페이지(Save Page)는 이용자-생성-템플릿(user created template)을 불러오고 저장하며, 클립 마법사(Clip wizard)는 상기에 설명한 바와 같이 새로운 클립을 생성하며, 그리드(Grid)는 화면을 격자형태 로 보여준다.

툴바에서 폰트(Font) 메뉴는 글자의 색, 크기, 종류 및 정렬로서, 텍스트가 들어갈 수 있는 클립, 즉 텍스트, 볼룬 및 패러그래프 클립의 툴바에 있다.

스타일 메뉴는 클립의 색상, 테두리를 설정하는 기능이다. 볼룬 클립의 경우 스타일이 독특한데, 이는 볼룬(말풍선)이라는 이름에서 알 수 있듯이 스타일의 형태가 많고, 이를 한번에 표시하는 것이 비효율적이기 때문에 통상의 스타일과 꼬리방향을 설정하는 스타일(tail Style)을 분리하였다. 따라서 볼룬 클립은 말풍선의 색상, 테두리를 설정하는 스타일에 말풍선 꼬리의 방향을 설정하는 테일 스타일이 있다는 점에서 다른 클립들과 다르다.

세이프 메뉴는 전술한 바와 같이 클립의 모양을 설정한다. 이때의 모양은 도면에서 알 수 있듯이 클립의 생긴 모양 그 자체이다.

링크(Link) 메뉴는 하이퍼링크를 지정한다.

패러그래프 툴바에는 다른 클립과는 달리 툴(Tools) 메뉴가 있다. 툴 메뉴는 문단에 사용될 박스, 링크, 이미지를 삽입하는 메뉴이다.

이미지 클립의 툴바에는 이미지의 편집을 위하여 이미지 툴(Image Tool) 메뉴가 있다. 툴 메뉴는 이미지의 교체, 크기 변화, 회전 설정의 기능을 부여한다.

동영상 클립에는 툴바가 제공되지 않는다. 동영상 클립은 해당 동영상이 저장된 URL 만 지정하면 필요한 동작이 완성되기 때문이다.

상기 클립들은 전술한 바와 같이 웹 어플리케이션의 최하층 계층인 플렛폼 라이브러리에 수많은 라이브러리로 모듈화되어 처리된다.

상기 툴바에서 세이프와 스타일 메뉴는 미리 정의된 행태를 클라이언트에게 보여주고, 한번의 클릭만으로 클립의 형태를 정의할 수 있도록 구현한다. 도 12a은 미리 정의된 형태의 세이프와 스타일을 도시한 것이다. 이를 프리셋(Preset)이라 칭하며, 상기 프리셋이 선택되면 세이프와 스타일이 클립 속성으로 카피된다. 이를 이용하면 클라이언트가 일일이 경계의 두께 및 색상, 그래디언트를 지정하지 않아도 객체의 모양을 꾸밀 수 있다. 클라이언트는 상기의 프리셋을 이용하여 클립을 웹브라우저상에서 원하는 형태로 쉽게 변경시킬 수 있다.

도 12b는 프리셋의 동작 흐름도이다. 클라이언트가 프리셋을 클릭하면(S 1210) 클립 매니저에서 현재 편집중인 클립을 선택하고(S 1220), 선택된 클립에 세이프가 있는지를 판단한다(S 1230). 편집중인 세이프가 있다면 새로이 선택된 프리셋 세이프를 적용시키기 위하여 기존의 세이프를 클리어(S 1240)하고, 기존의 세이프를 클리어하던지 혹은 기존의 세이프가 없다면 선택된 클립에 세이프를 생성한(S 1250) 후, 스타일을 적용시키고(S 1260), 클립 매니저에 상기 데이터를 갱신한다(S 1270). 프리셋은 세이프를 결정한 후 스타일을 결정할 수 있을 뿐이며, 스타일을 먼저 결정할 수 없다. 이는 세이프가 전술한 바와 같이 클립의 생성모양을 정의하는 메뉴로서, 클립의 모양이 정의되지 않은 상태에서 클립의 색상이나, 테두리, 그라디에이션을 결정할 수 없기 때문이다.

도 13은 페이지를 처리하는 과정이다. 웹 페이지는 페이지 단위로 화면에 나 타나며 페이지별로 동작할 수 있다. 본 발명에서의 페이지는 하나의 이용자-생성-템플릿(user-created-Template)으로 정의되며, 이용자-생성-템플릿은 하나 이상의 클립으로 생성된다. 각각의 클립은 클립마법사에 의하여 생성되고, 툴바 또는 마우스의 동작으로 편집된다. 각각의 클립은 그 자체가 하나의 객체로서 독립적으로 동작하지만, 한 페이지 내에 있는 각 클립들의 배치, 형태, 모양을 하나의 이용자-생성-템플릿(User-created template)으로 정의하여 하나의 객체와 동일하게 취급한다.

본 발명에서의 이용자-생성-템플릿은 종래의 템플릿과 상당한 차이가 있다. 종래의 템플릿은 HTML 로 작성되어 사용자가 채워넣을 수 있는 부분이 지극히 한정되었으므로 많은 변경이 어려웠으나, 본 발명에서의 이용자-생성-템플릿은 전술한 바와 같이 페이지 내에 클립들을 모아놓은 것으로서 각 클립들의 배치, 형태, 모양의 통합된 형태를 의미하므로 그 변화에 제한이 없다. 페이지 및 클립들의 데이터는 XML 또는 json 형식으로 구성된다. XML(Extensible Markup Language)은 W3C에서 특수 목적의 마크업 언어를 만드는 용도로 권고하는 다목적 마크업 언어로서, 수많은 종류의 데이터를 기술하는데 적합하며, 주로 다른 시스템, 특히 인터넷에 연결된 시스템간의 데이터 공유를 용이하게 한다. XML 기반 언어로는 RDF, RSS, MathML, XHTML, SVG 등이 있으며, 이들 언어들은 단일하게 규정된 방식으로 정의되었기 때문에, 사전정보 없이도 이들 언어로 작성된 문서에 대해 수정이나 적합성 검사를 하는 프로그램의 제작도 가능하다. json(JavaScript Object Notation)은 경량의 DATA-교환 형식이다. 이 형식은 사람이 읽고 쓰기에 용이하며, 기계가 분석하 고 생성함에도 용이하다.

상기와 같이 XML 또는 json으로 작성된 클립들의 어레이가 포함된 페이지 데이터(S 1310)는 페이지 구조 분석기에 의하여 클립별로 나누어 클립 데이터와 페이지 데이터를 파싱한 후(S 1320) 클립 매니저에서 클립 리스트를 생성한다(S 1330). 클립 리스트(또는 클립 어레이)는 각각의 클립 객체를 세이프, 스타일, 컨텐츠를 파싱하여 생성하며, 페이지 내에 있는 모든 클립들에 대하여 객체를 생성하고 데이터를 변환한다(S 1340). 클립 리스트에 있는 클립 데이터를 모두 처리하면 클립별로 HTML Element, VML, SVG 코드로 변환하여 브라우저에 전달한다(S 1350). 웹 브라우저에 전달된 코드에 의해 엘리먼트를 생성시키고(S 1360), 색상 및 바탕을 적용시켜 클라이언트에 표시한다(S 1370).

본 발명의 웹 어플리케이션에는 페이지 내의 일부 클립들을 동시에 처리하는 다중 선택(Multi-selection) 기능이 있다. 다중 선택의 실시 순서는 다음과 같다. 클라이언트가 동시에 처리할 클립들을 박스로 선택한다. 박스는 통상 그림판에서의 박스를 그리는 것과 동일하게 마우스를 드레그하여 형성한다. 클라이언트가 박스를 그리면 클립 매니저는 박스 내에 포함된 클립들을 조사하여 그룹화한다. 클립은 하나의 객체이며 모든 클립을 제어하는 클립매니저가 클립 속성을 모두 갖고 있어 클라이언트가 행하는 액션을 박스 속에 속한 모든 클립에게 분배시킨다. 따라서 클라이언트가 한 액션만 취해도 선택된 모든 클립에게 액션을 전달할 수 있고, 그룹화된 클립들은 동일한 액션을 취하게 된다.

이상에서는 본 발명의 바람직한 실시예에 대하여 도시하고 또한 설명하였으나, 본 발명은 상기한 실시예에 한정되지 아니하며, 청구범위에서 청구하는 본 발명의 요지를 벗어남이 없이 당해 본 발명이 속하는 분야에서 통상의 지식을 가진 자라면 누구든지 다양한 변형 실시가능한 것은 물론이고, 그와 같은 변경은 기재된 청구범위 내에 있게 된다.

상기와 같이 본 발명의 웹어플리케이션은 HTML 언어를 모르는 클라이언트도 용이하게 웹브라우저상에서 실시간으로 웹페이지를 작성할 수 있다.

본 발명은 웹브라우저에서 개개의 이미지, 텍스트 및 이들이 결합된 객체의 모양과 스타일을 자유롭게 생성하고 편집하며, 상기 작성된 객체가 복수개인 경우에 복수 객체들을 동시에 그리고 각각을 편집하고 이동할 수 있으므로 클라이언트는 다양한 웹페이지를 작성할 수 있다.

본 발명의 웹어플리케이션은 다수의 클립을 동시에 제어하는 다중 선택을 제공하고, 클라이언트간에 네트워크를 형성할 수 있어, 다양한 웹 페이지를 작성할 수 있다.

본 발명의 툴바는 클립의 종류에 따라 형태를 달리하여 다양한 형태의 클립을 작성할 수 있다.

Claims (13)

1. 삭제
2. 웹 페이지를 생성하고 편집하는 사용자 컴퓨터로서의 클라이언트(100)와, 상기 클라이언트에 접속되어 상기 클라이언트의 요구를 수신하고 실행하는 웹서버(200)와, 상기 웹서버(200)와 연결되어 클라이언트가 업로드한 이미지, 클립 이미지, 클라이언트에 제공되는 기본적인 시스템 이미지를 저장하는 스토리지 영역(300)과, 클라이언트가 작성한 클립 및 페이지의 속성값들을 저장하는 데이터베이스(400)로 구성되며, 상기 웹서버(200)가 상기 클라이언트(100)에게 웹브라우저상에서 웹페이지를 제작하는 웹어플리케이션을 제공하는 방법에 있어서,

   로그인한 클라이언트에게 웹페이지 초기화면을 전송하는 단계,

   클라이언트로부터 디자인메뉴의 요구가 있을 시 클립 및 이용자-생성-템플릿을 작성하는 웹어플리케이션을 제공하는 단계,

   클라이언트에서 요구한 자료를 전송하고, 업로드한 자료를 저장하는 단계로 이루어지되;

   상기 자료의 전송은 ajax 형태, 저장은 xml 또는 json 형태이며,

   상기 웹 어플리케이션은

   다수의 라이브러리를 포함한 플레폼 라이브러리 모듈과,

   클립 데이터의 저장, 삭제, 복제 및 레이어 처리를 담당하는 클립 매니저와,

   벡터 그래픽에 필요한 VML과 SVG, Canvas 처리하는 세이프 캔버스 모듈과,

   이미지를 웹서버에 업로드하는 이미지 모듈과,

   클립의 생성, 공유, 저장작업을 담당하며 기본 클립, 내 클립, 공유 클립으로 구성된 클립 마법사와,

   클립편집에 필요한 버튼과 메뉴, 프리셋(Preset)을 처리하는 툴바와,

   클립들로 구성된 페이지 데이터를 서버에 저장하고 불러오는 페이지 모듈로 구성된 것을 특징으로 하는 웹어플리케이션 제공 방법.
3. 제2항에 있어서,

   상기 웹어플리케이션은 3계층으로 구성되어 있으며,

   최하층에는 플레폼 라이브러리 모듈이,

   중간층에서는 클립 매니저, 캔버스 모듈, 이미지 모듈이,

   최상층에는 클립마법사, 툴바, 페이지 모듈로 이루어져 있는 것을 특징으로 하는 웹어플리케이션 제공 방법.
4. 제3항에 있어서,

   상기 클립 및 이용자-생성-템플릿은 저장시에 공개 및 비공개 여부를 선택할 수 있는 것을 특징으로 하는 웹어플리케이션 제공방법.
5. 제4항에 있어서,

   상기 웹서버(200)는 클라이언트의 이미지 및 블러그를 업로드 하고, 클라이언트로부터의 요청에 대해 XML 또는 json 형태로 응답을 처리하는 서버인 프로세싱 서버(210)와, 클라이언트로의 이미지 요청에 대하여 스토리지 영역(300)으로부터 이미지를 끌어다가 웹으로 서비스하는 이미지 서버(220)와, 클라이언트의 홈페이지를 호스팅하는 홈페이지 호스팅 서버(230)로 구성되며,

   상기 스토리지 영역(300)은 클라이언트가 업로드 한 이미지, 시스템 이미지, 클립 이미지 등을 저장하는 스토리지 팜(310)과 트래픽이 많은 이미지를 선별하여 저장하는 캐쉬 스토리지(320)로 구성되며,

   상기 데이터베이스(400)는 회원정보와 시스템 전체에서 공통적으로 사용되는 정보가 저장된 글로벌-DB 팜(410), 이미지 속성, 제목, 태그 등 클라이언트가 업로드한 이미지 및 클립용 이미지와 관련된 정보를 포함하는 이미지-DB 팜(420), 클라이언트가 업로드한 이미지, 블로그 글, 관련 태그 등의 정보를 검색하는 검색-DB 팜(430), 스타일의 내용을 XML 또는 json 형태의 텍스트 데이터로 만들어서 저장하는 스타일-DB 팜(440), 블로그와 관련된 글 내용, 제목, 태그 등의 정보를 저장하는 블로그-DB 팜(450)으로 구성되는 것을 특징으로 하는 웹어플리케이션 제공 방법.
6. 삭제
7. 삭제
8. 삭제
9. 삭제
10. 삭제
11. 삭제
12. 삭제
13. 삭제

Images