KR100523512B1

KR100523512B1 - 웹브라우저에서 직접 위지위그 편집이 가능한, 조립식홈페이지와 개인 포탈 사이트의 제작과 거래 방법 및 그프로그램 기록매체

Info

Publication number: KR100523512B1
Application number: KR1020040047912A
Authority: KR
Inventors: 박희섭
Original assignee: 박희섭
Priority date: 2004-06-24
Filing date: 2004-06-24
Publication date: 2005-10-25
Also published as: US20080072164A1; WO2006001641A1; CN1961312A; JP2008503830A

Abstract

본 발명은, 웹브라우저에서 직접 위지위그 방식으로 홈페이지의 구성요소를 구성요소별로 생성하고 편집하기 위하여, 그 구성요소들의 HTML 코드를 div 태그안에 넣은 이중구조의 노드로 만들고 div 위치 값과 div 내용 값을 서버측 XML 노드에 각각 위치 속성과 내용 속성으로 저장한 후에 다시 HTML 문서로 복원해냄으로써 조립식으로 홈페이지를 제작하는 방법이다. 또한 본 발명은, 문자열 치환방법으로 개인의 즐겨찾기를 트리 구조가 아닌 폴더 구조로 펼쳐놓은, 구성요소별로 편집 가능한 개인 포탈 사이트를 제작하는 방법이다. 또한 본 발명은, 사용자가 디자인한 홈페이지 구성요소를 구성요소별로 사용자간에 거래하는 방법이다. 구성요소의 거래를 통해서 사용자의 창작 의욕을 높이고 커뮤니티의 활성화를 꾀한다.

Description

웹브라우저에서 직접 위지위그 편집이 가능한, 조립식 홈페이지와 개인 포탈 사이트의 제작과 거래 방법 및 그 프로그램 기록매체 { methods and the program-recording medium for creating, editing and trading home page components to assemble a home page and a personal portal site directly in wysiwyg on web browser }

본 발명은, 웹브라우저에서 직접 위지위그 방식으로 구성요소별로 생성, 편집함으로써 조립식으로 홈페이지를 제작하는 방법과 그 구성요소별 거래방법 등 인터넷 관련 발명이다.

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

한편 북마크를 각 종류별로 분류하여 폴더(folder) 형식으로 웹문서화한 포탈 사이트들(hitpage.co.kr 이나 gobestsite.co.kr)이 있는데, 이들 포탈 사이트에서의 구성요소인 북마크 폴더와 북마크들에는 편집 기능이 없어서 사용자가 개인별로 원하는 북마크를 원하는 위치에 편집해 넣을 수가 없었다.

한편 종래에는, 전문가에 의해 디자인된 홈페이지 구성요소를 운영자가 사용자에게 제시하고 사용자는 제시된 구성요소 범위 내에서 선택하여 구매하고 사용하는 방식이었다. 즉, 사용자가 직접 디자인한 구성요소들에 대한 사용자간의 거래방법이 없었다. 따라서 사용자가 홈페이지의 구성요소에 우수한 창작력을 발휘해도 이를 손쉽게 사용자간에 거래를 하게 해주는 방법이 없어서 그 창작력이 사장되어 버렸다.

본 발명의 목적은, 조립식으로 홈페이지를 제작하기 위해서 홈페이지의 구성요소를 구성요소 별로 웹브라우저에서 직접 위지위그 방식으로 생성, 편집이 이루어지게 함이다.

이를 위해 웹브라우저가 보여주는 HTML(Hyper Text Markup Language)문서를 구성요소별로 편집한 후, 서버측에서 용이하게 다룰 수있는 저장 형식인 데이터베이스나 XML(Extensible Markup Language) 파일형태로 저장하고 이를 다시 XSL (Extensible Stylesheet Language)과 프로세스하여 원래의 HTML로 복원시킬 수있어야한다.

본 발명의 또 다른 목적은, 본 발명의 조립식 홈페이지를, 편집이 가능한 개인 포탈사이트로 활용하기 위함이다. 이를 위해 사용자 개인의 즐겨찾기를 사용자가 원하는 형식대로 웹문서화하고 이 웹문서에는 편집기능이 있어야한다.

본 발명의 또 다른 목적은, 본 발명의 조립식 홈페이지 제작방법을 활용하여 사용자가 디자인한 홈페이지의 구성요소를 구성요소 별로 사용자나 운영자간, 사용자와 사용자간에 거래할 수있게 함이다. 이를 위해, 사용자가 디자인한 홈페이지 구성요소 별로 판매등록 기능, 가격제시 기능, 거래대금과 구성요소 교환 기능, 정당한 판매자 이외의 판매 방지 기능 등이 있어야한다.

본 발명은, 아파치 서버(Apache Server version 2.0.48), 피에이치피(PHP version 4.3.4), 마이에스큐엘(MySQL version 4.0.16), 웹브라우저로서 인터넷 익스플로러(Internet Explorer version 6.0), 시스템 오에스(System OS)로서 윈도우 엑스피(Window XP)를 사용하였다. 본 발명의 작동 개념은, 상기의 것중 어느 것이 동가의 다른 것으로 대체되어도(예를 들어 "익스플로러" 대신에 "네비게이터") 동일하게 적용된다.

사용자가 운영자의 사이트를 방문하여 회원가입 절차를 거쳐 회원 등록하면 사용자 개인에게 개인별 저장 공간 (이하 "개인폴더")과 개인별 인터넷 주소가 제공되는 것은 통상의 알려진 방법에 의한다.

사용자의 개인폴더에는, 편집 기능을 가진 HTML 홈페이지를 재생해내는 XML, XSL 문서가 기본적으로 주어진다. 홈페이지 편집의 첫 단계는 자바스크립트(javascript)의 작동으로 이루어진다. 사용자의 편의를 위하여 편집 메뉴는 자바스크립트에 의한 컨텍스트 메뉴(context menu)로 제시된다(도4). 즉, 마우스의 오른쪽을 클릭하면 편집 메뉴가 나타나서 사용자가 메뉴의 명령을 선택하는 방식이다. 편집 메뉴의 명령은 북마크 폴더, 북마크나 홈페이지 구성요소의 생성, 변경, 복사, 오려내기, 붙이기, 삭제와 개인별 즐겨찾기 가져오기 등이다. 자주 편집되는 구성요소에 대한 편집 명령은 컨텍스트 메뉴에서 바로 선택되어 실행되지만(도17), 자주 편집되지않거나 편집에 다양한 선택사항을 필요로 하는 구성요소들은 편집 시에 서버로부터 HTML 편집기가 사용자에게 전송된다.이것은 HTML 노드를 편집하는 통상의 편집기이다(도18).

웹브라우저에서 홈페이지의 각 구성요소별로 위지위그 방식으로 생성되고 편집되게 하기 위하여, 웹브라우저에서 사용자에게 보여지는 문서의 형식인 HTML 문서를 기능별로 여러 개의 구성요소로 나눈다. 기능별로 구별되는 구성요소는 머리말, 메뉴바, 광고, 글상자, 북마크폴더, 북마크, 플래시, 애플릿, 그림, 테이블, 라벨, 꼬리말 등이다(도1).

이렇게 나누어진 각 구성요소의 배치를 자유로이 하고 또 구성요소 별로 편집이 이루어지게 하기 위하여 각 구성요소의 내용(도6의 B)을 특별한 노드(node, 이하 "구성요소 노드")(도6의 A) 안에 자식으로서 배치하여 이중구조가 되게 한다(이하 "이중 구조")(도6). 각 구성요소 노드에는 기능별로 구별되는 클래스(class) 이름을 부여한다.

즉, 미리 작성된 홈페이지를 기능별로 쪼개어서 여러 구성요소로 나눈 후에, 이 구성요소의 HTML 코드(구성요소 내용)를 안에 담도록, 앞뒤에 새로운 태그를 더하여 이중 구조의 새로운 노드(구성요소 노드)를 만들고(도7), 이 구성요소 노드의 위치 정보와 구성요소 내용 정보를, 이 구성요소 노드에 일대일 대응하는 XML 노드에 각각 위치 속성(attribute)과 내용 속성으로서 문자열 상태로 서버측에 저장하였다가, 사용자의 요청이 오면 XML(도8)과 XSL(도8a)을 프로세스하여 원래 HTML 문서(도7)를 재생해낸다.

바깥쪽의 구성요소 노드는 해당 구성요소의 위치정보만을 가지고 있고 안쪽의 구성요소 내용은 구성요소에 관한 모든 것, 즉 내용과 스타일 정보를 모두 가지고 있다. 이러한 이중 구조를 만든 이유를 아래에 설명한다.

구성요소의 편집은 내용물을 편집하는 경우와 스타일을 편집하는 경우로 나눌 수있는데 편집 시에 이 둘을 따로이 나누어서 XML과 XSL 형태로 각각 보관하는 것은 전문 XML 편집기의 개발을 필요로 한다. 통상의 HTML 편집기는 기존의 태그(tag)에 새로운 태그를 더하거나 새로운 속성을 더하여 내용과 스타일이 혼합된 편집이 이루어진다. 특별한 XML 편집기의 도움 없이 통상의 HTML 편집기를 이용하면 이러한 내용과 스타일이 혼합된 편집 결과물을 XML로서 저장, 복원해야하는 문제가 발생한다.

본 발명은 내용과 스타일이 혼합된 안쪽 구성요소 내용을 그대로 XML 노드의 속성으로서 문자열 상태로 저장하고 복원 시에는 이를 그대로 바깥쪽 노드(구성요소 노드)안에 넣어주는 방식으로 이를 해결하였다. XML 노드 안에 문자열 상태로 저장된 것은 XSL에 의해 프로세스될 때에 파싱(parsing)되지 않고 하나의 문자열으로서 취급된다. 이러한 방식에 의하면 안쪽 구성요소의 내용에 어떠한 새로운 태그가 추가되더라도 바깥쪽 노드를 항상 일정하게 유지할 수있게 되어 구성요소의 기능에 오류 없이 복원이 일어나게 된다. 이중구조를 발명한 또 다른 이유로는, 웹브라우저에서 해당 구성요소 노드의 편집기능이 활성화될 때에 그 안쪽의 구성요소 내용이 편집활성화 상태가 되므로 바깥쪽 노드의 자식으로서 안쪽에 구성요소의 모든 내용을 넣어두면 그 구성요소 전부에 대한 편집이 가능하게 되기 때문이다.

이를 상세히 설명하면 다음과 같다. 안쪽 구성요소 내용이 "＜table＞테이블 내용＜/table＞" 이라면 이 HTML 코드를, 위치정보를 가진 바깥 구성요소 노드 "＜div class='folder' style='left:10; top:20; position: absolute;'＞＜/div＞ 안에 자식으로서 배치하여 다음과 같이 되게 한다. "＜div class='folder' style='left:10; top:20; position: absolute;'＞＜table＞테이블 내용＜/table＞＜/div＞"

구성요소 노드의 태그로 어느 것을 사용해도 되지만 본 발명에서는 구성요소 노드의 태그로서, 너비와 높이속성을 가진 ＜div＞＜/div＞태그를 사용한다.

서버는 이들 각 구성요소를 저장, 관리하기 위하여 각 구성요소 노드에 일대일 대응하는 XML 노드를 가지고있다(도2). 이들 XML 노드, 예를 들어 "bookmarkfolder" 노드인 경우, "＜bookmarkfolder＞＜/bookmarkfolder＞"는 위치 정보와 내용 정보를 각각 위치 속성, 내용 속성으로 저장해놓는다. "＜bookmarkfolder position='left:10; top:20; position: absolute;' content='＜table＞테이블 내용＜/table＞'＞＜/bookmarkfolder＞"(도8).

여기서 속성 content 의 문자열을 '＜table＞테이블 내용＜/table＞' 이라고 표기하였지만 이것은 이해를 돕기 위한 것이다. 실제로는 '＆lt;table＆gt;테이블 내용＆lt;/table＆gt;' 와 같이 HTML 태그들은 문자열로 바뀌어서 보관된다. 이하 따옴표(')안의 HTML 태그는 모두 마찬가지이다.

이들 XML 을 XSL(도8a)과 프로세스하면 XSL은 XML 노드 하나에 대응하는 ＜div＞＜/div＞노드를 다시 재생하고 이 div 노드에 위치속성값을 대입한다. "＜div style='left:10; top:20; position: absolute;'＞＜/div＞. 그 다음에 이 div에 클래스 이름을 부여한다. "＜div class='folder' style='left:10; top:20; position: absolute;'＞＜/div＞. 마지막으로 이 div 노드의 내용물로서 내용 속성 값을 대입한다. "＜div class='folder' style='left:10; top:20; position: absolute;'＞＜table＞ 테이블 내용＜/table＞＜/div＞". 이렇게 하여 생겨난 결과물은 HTML 문서로서 사용자에게 전송되어 웹브라우저 상에서 보여지게된다(도16).

구체적인 명령별로 작동 방식을 설명하면 다음과 같다.

[북마크 폴더의 생성]

홈페이지 구성요소중 하나인 북마크 폴더(Bookmark Folder, 북마크를 담아두는 상자)를 생성하려면 웹브라우저의 바탕화면을 마우스 오른쪽 클릭하면 그 위치에 컨텍스트메뉴(도 4)가 나타남과 동시에 마우스 이벤트가 일어난 위치(예를 들어 left=10, top=20) 가 자바스크립트에 기록되고, 이벤트가 일어난 노드로부터 부모 노드를 검색하면서, 등록된 클래스 이름(예를 들어 "body")이 찾아질 때까지 검색 된다. 찾아진 구성요소와 위치 정보와 컨텍스트의 "북마크 폴더 생성" 명령을 사용하여 자바스크립트는, 찾아진 구성요소의 자식 노드로서 북마크 폴더 노드(＜div class='folder' style='left:10; top:20; position: absolute;'＞＜table＞북마크 폴더 내용＜/table＞＜/div＞)를 하나 그 위치에 생성해 놓는다. 동시에 자바스크립트는 명령내용과 마우스 이벤트 위치, 생성된 구성요소내용(＜table＞북마크 폴더 내용＜/table＞) 등의 정보를 서버로 전송한다. 서버는 전송된 정보를 받아서 이에 일대일 대응하는 XML 노드인 ＜bookmarkfolder>＜/bookmarkfolder>를 하나 XML 루트(root)에 만든다. 이 XML 노드 안에 위치 속성 값(position='left:10; top:20; position: absolute;')을 저장하고 그 내용 속성값(content='＜table＞북마크 폴더 내용＜/table＞')을 저장한다. 완성된 XML노드는 다음과 같다. ＜bookmarkfolder position='left:10; top:20; position: absolute;' content='＜table＞북마크 폴더 내용＜/table＞'＞＜/bookmarkfolder＞

XML 노드가 생성된 후에 XSL과 프로세스하면 XSL은 이 XML 노드 값을 사용하여 ＜div class='folder' style='left=10; top=20; position: absolute;'>＜table＞북 마크 폴더 내용＜/table＞＜/div＞라는 HTML 코드를 생성하여 사용자의 웹브라우저로 보내지게 되고 사용자의 홈페이지 갱신이 일어나게 된다. 갱신된 홈페이지에는 북마크 폴더가 하나 생성되어있다.

[북마크 폴더의 이동 배치]

생성된 북마크 폴더를 이동 배치하려면 컨텍스트 메뉴중 "이동"을 누르고 마우스로 그 구성요소를 끌면 자바스크립트는 끌어진 각 위치에 북마크 폴더를 갱신하여 그리게 된다. 최종적으로 원하는 위치에서 구성요소를 위치하여 놓고 "저장"을 누르면 그 위치의 정보가 구성요소의 경로 정보와 함께 서버로 전달되고 서버는 해당 XML 노드를 검색하여 그 위치 속성을 새로이 변경된 값으로 바꿔준다. 그 다음과정 즉, XML을 XSL과 프로세스하고 사용자의 웹페이지를 갱신하는 과정은 앞서와 같다.

사용자가 웹브라우저 상에서 구성요소 내용의 변화 없이 단지 그 구성요소의 홈페이지 내에서의 위치를 변경하고자 할 경우에는 left, top 값의 변경에만 해당하기 때문에 그 정보전달량이 매우 작게되고 XML 에서 이것만을 편집하면 되므로 빠르게 갱신이 이루어진다.

[북마크 폴더의 편집]

편집은 구성요소 단위로 일어나는데 여기서는 북마크 폴더의 배경색 변경을 설명한다. 앞서 생성된 북마크 폴더를 마우스로 오른쪽 클릭하면 마우스 이벤트가 일어난 노드로부터 부모 노드의 클래스 검색이 일어난다. 클래스가 "folder" 인 div 노드가 찾아질 것이다. 이 div 노드의 자식 노드가 바로 북마크 폴더 안쪽의 구성요소 내용이다.

컨텍스트 메뉴중에 "편집"을 누르면 서버로부터 편집기가 전송된다. 편집기의 메뉴중 "배경색"을 선택하여 편집하게 되면 선택된 노드에 다음과 같은 스타일 속성이 더해지게 된다. ＜table style='background:#ff0000;'＞북마크 폴더 내용＜/table＞

편집된 구성요소의 경로, 편집된 내용이 서버로 전송되면 서버는 해당 XML 노드를 찾아내어 편집된 내용 속성값을 저장하게된다.

＜bookmarkfolder position='left:10; top:20; position: absolute;' content='＜table style='background:#ff0000;'＞북마크 폴더 내용 ＜/table＞'＞＜/bookmarkfolder＞. 그 다음, 사용자의 웹페이지가 편집된 내용으로 갱신된다.

[북마크 폴더 안의 북마크 생성]

사용자가 인터넷 상을 돌아다니다가 북마크하고 싶은 인터넷 사이트를 발견하면 마우스 오른쪽을 클릭한다. 나타나는 컨텍스트 메뉴중에 "북마크 추가"를 누르면 북마크 정보는 사용자 컴퓨터의 클립보드(clipboard)에 저장됨과 동시에 웹브라우저가 운영자 사이트에 접속하여 회원인증을 거쳐서 사용자 개인폴더안의 홈페이지를 연다. 홈페이지내의 북마크 폴더를 하나 선택해서 다시 컨텍스트 메뉴를 열고 "북마크 바로 추가"를 선택하면 자바스크립트는 그 북마크 폴더 노드 안에 북마크노드(＜a href=www＞북마크＜/a＞)를 생성한다. 동시에 북마크 폴더의 경로와 북마크 노드의 HTML 코드가 서버로 전송된다. 서버는 해당 북마크폴더에 대응하는 XML노드를 찾아서 내용 속성을 읽어내고 내용속성에 새로운 북마크 노드의 HTML 코드를 문자열로서 추가한다. 그 다음, 사용자의 웹페이지가 편집된 내용으로 갱신된다.

[북마크 폴더 안의 북마크의 편집]

북마크 폴더가 XML 노드 안의 내용속성으로 문자열의 상태로 저장되어있으므로 북마크 폴더의 내용인 북마크도 문자열의 상태로 저장되어있는 것이다. 이들에 대한 편집은 다음과 같이 이루어진다. 사용자가 북마크 폴더의 내용인 어느 하나의 북마크를 선택하여 편집하게 되면 마우스 이벤트가 일어난 노드로부터 앞서 말한 방법대로 그 북마크 폴더의 경로가 검색되고 북마크의 편집 전과 편집후의 내용이 자바스크립트에 의해 문자열로서 기록되고 이 정보는 서버로 보내진다. 서버는 전송된 북마크 폴더의 경로에 해당하는 노드를 XML 문서로부터 찾아내고 찾아낸 XML 노드로부터 그 내용속성인 북마크들을 문자열로서 읽어들이고 이들 중에 해당하는 북마크 문자열을 편집된 북마크 문자열로 치환하여준다. 편집이 끝난 문자열은 해당 XML 노드에 내용 속성값으로 다시 저장된다.

이러한 방식에 의하면 편집된 실제 북마크 내용만이 서버로 보내지게 되므로, 홈페이지의 일부를 편집해도 홈페이지 전부를 전송해야하는 종래의 방식보다 그 전송 데이타량이 훨씬 줄어든다.

[북마크 폴더의 삭제]

구성요소를 삭제할 때에는 마우스 컨텍스트 메뉴로부터 "삭제"를 선택하면 마우스 이벤트가 일어난 위치로부터 클래스 검색이 시작되어 구성요소의 경로를 찾아낸다. 각 구성요소는 기능별로 클래스 이름이 부여되어있다. 자바스크립트는 찾아낸 구성요소를 삭제함과 동시에 구성요소 경로 정보와 "삭제" 명령을 서버로 보내고 서버는 이 정보로부터 XML 노드를 검색하여 해당 노드를 제거한다.

[북마크의 복사와 붙이기]

어느 북마크 폴더 안의 한 북마크를 선택하고 컨텍스트 메뉴에서 "복사"를 선택하면 마우스 이벤트가 일어난 위치의 해당 북마크 노드의 HTML 코드가 사용자 컴퓨터의 클립보드 안에 복사된다. 사용자가 삽입을 원하는 위치에서 다시 컨텍스트 메뉴를 불러내어 "붙이기"를 선택하면 자바스크립트는 마우스 이벤트가 일어난 위치에 북마크 노드의 HTML 코드를 삽입함과 동시에 해당 북마크 폴더의 경로를 검색하고 이 경로 정보와 북마크 노드의 HTML 코드를 서버로 전송한다. 서버는 이 정보로부터 해당 XML 노드를 찾아내고 그 내용 속성값에서 북마크 노드의 HTML 코드를 문자열로서 추가한다.

[북마크 폴더 안에 객체의 삽입]

북마크 폴더 안에 객체(글자, 그림, 애플릿, 플래시 등)의 삽입을 원하면 컨텍스트 메뉴로부터 "아이템 생성"을 선택한다. 아이템 종류 메뉴가 나타난다. 원하는 아이템을 선택하면 해당 아이템 선택 창이 서버로부터 전송된다. 사용자가 원하는 스타일의 아이템을 선택하면 자바스크립트는 이 구성요소를 마우스 이벤트가 일어난 위치에 삽입함과 동시에 위치 정보와 아이템 HTML 코드 정보를 서버로 전송한다. 서버는 아이템에 일대일 대응하는 XML 노드를 하나 생성시키고 그 안의 위치 속성값과 내용 속성값을 각각 저장하게된다.

편집의 다른 기능들(오려내기, 배경색, 배경그림, 테두리스타일, 테두리색, 글자, 애플릿, 플래시 편집)도 이러한 방식으로 이루어진다.

[스타일의 변경]

서버측 XSL은 스타일 태그를 저장할 수있으므로 사용자가 마우스 컨텍스트 메뉴로부터 새로운 스타일을 선택한다는 정보를 서버로 보내면 서버는 스타일 태그나 XSL 파일을 사용자가 선택한 것으로 치환하여준다. 이렇게 하여 간단히 사용자는 문서 전체의 테마를 바꿀 수있는 것이다.

[다른 구성요소의 생성, 편집, 삭제]

다른 구성요소(로긴창, 게시판, 앨범, 메뉴판, 광고 등)의 생성, 편집, 삭제도 북마크 폴더의 경우와 같은 원리대로 생성, 편집, 삭제된다. 그림, 애플릿, 플래시 등의 객체는 미리 전문 편집기에 의해 제작되어 서버에 올려 놓여진 상태에서 사용자에게 선택 창에 제시된다. 사용자가 그중 하나를 선택하면 자바스크립트에 의해, 그 구성요소가 선택된 위치에 삽입된다. 삽입 정보는 서버로 전송된다. 서버는 이 객체를 담을 XML 노드를 XML 문서에 생성하고 그 노드의 위치속성에는 객체의 위치 값을, 내용속성에는 이들 객체의 링크(link)를 문자열로서 저장한다. 이후의 과정은 북마크 폴더의 생성, 편집, 삭제와 동일한 과정이다.

[포탈 사이트의 생성]

사용자가 개인별 포탈 사이트를 원하면 사용자의 편리를 위하여, 운영자는 미리 분류되어 제작된 북마크 폴더들을 구성요소로 갖는 홈페이지를 사용자 개인별로 제공한다(도5). 사용자가 개인의 즐겨찾기를 북마크 폴더로 만든 포탈 사이트를 원하면 사용자는, 웹브라우저가 개인의 즐겨찾기를 HTML 파일로 만든 "즐겨찾기 HTML 파일(도8b)"을 서버로 전송한다. 이때 사용자는 사용자의 선택사항 (각 열마다의 폴더수(Col), 각 폴더마다의 북마크 갯수(Num), 폴더나 북마크의 스타일, 폴더의 크기 등)을 선택하여 이 정보를 동시에 서버로 보낸다.

이 "즐겨찾기 HTML 파일"은, 웹브라우저의 개인별 즐겨찾기의 동적인 트리구조(dynamic tree structure) 를 그대로 정적인 트리 구조(static tree structure)의 HTML 웹문서로 만든 것으로서 그 자체를 그대로 사용자의 개인별 포탈 사이트로 사용 가능하지만 이 파일은 정적인 트리 구조의 웹문서여서 사용이 불편하고 본 발명이 제공하는 구성요소별 편집기능을 갖고 있지 않다.

본 발명에서는 이 파일을 가공하여, 사용에 편리한 폴더 구조(도5)로 만들고 편집기능을 추가하고 서버측에서 다룰 수있는 XML 문서로 만든다. HTML 문서를 XML 문서로 만듦과 동시에 사용자의 선택 사양(북마크 폴더의 열당 갯수, 북마크 폴더당 북마크의 갯수)에 맞게 가공하기 위하여 본 발명의 문자열 치환 방법(도9, 도10)을 사용한다. 문자열 치환방법은 HTML의 태그를 XML 태그로 문자열 치환에 의해 바꾸어서 HTML 문서를 XML 문서로 전환함은 물론 선택된 태그의 앞뒤에 또다른 태그를 삽입하는 문자열 치환을 하여 북마크 폴더의 생성 등의 내용 변경을 시킬 수 있다. 그 과정은 아래와 같다.

통용되는 웹브라우저의 대부분은 마이크로소프트사의 인터넷 익스플로러(Internet Explorer)거나 넷스케이프사의 네비게이터(Navigator)이다 이들은 즐겨찾기를 특별한 HTML 파일(즐겨찾기 HTML 파일)의 형태로 보관하고 있다. 이 파일은 언제나 일정한 형식을 가진 HTML 이므로 이들의 문자열 패턴을 원하는 문자열로 치환함으로써 XML 문서로 변경할 수있다.

본 발명의 문자열 치환방법은 논리적으로 두 단계로 이루어진다. 첫번째 단계는 즐겨찾기 HTML 파일로부터 폴더 문자열 배열을 만드는 것(도9)이고, 두번째 단계는 이렇게 만들어진 폴더 문자열 배열로부터 사용자의 XML 문서에 XML 노드를 만드는 것(도10)이다. 폴더 문자열 배열 단계를 중간에 거치는 이유는 북마크 갯수가 사용자가 설정한 범위를 넘을 경우에 새로운 북마크 폴더를 만들어서 이들을 저장하여야하는데 이 작업을 위해서는 문자열 배열을 사용하는 것이 필요하기 때문이다.

첫번째 단계(도9)를 자세히 설명하면, 북마크 폴더는 "＜dt＞＜h3" 로 시작해서 "＜/dt＞＜p＞" 로 끝나므로 "＜dt＞＜h3"는 "＜folder"로 "＜/dt＞＜p＞"는 "＜/folder＞"로 각각 치환해주면 북마크 폴더 문자열 ("＜folder＞북마크 폴더 내용＜/folder＞")로의 전환이 이루어진다.

북마크 폴더의 제목은 "＞폴더제목＜/h3＞" 를 "＞＜caption＞폴더제목＜/caption＞" 으로 치환하면된다. "＜dl＞＜p＞" 태그는 ""로 치환하여 없애거나, "＜ul＞" 로 치환하여 리스트 태그로 만든다. 북마크 폴더와 북마크들의 치환 단계를 자세히 보여주기 위해서 도9에서는 폴더 제목 치환단계나 리스트 태그로의 치환단계는 편의상 나타내지않았다.

북마크 폴더내의 각각의 북마크는 "＜dt＞＜a"를 "＜li class='bookmark'＞＜a"으로 치환하고, "＜/a＞"를 "＜/a＞＜/li＞"로 치환해주면 된다. 치환 시에 각 치환된 갯수(Count)가 추적되어 사용자가 설정한 갯수(Num) 범위인지가 검사된다.

만약 한 폴더당의 북마크의 갯수가 사용자가 설정한 갯수를 초과하게되면 바로 그 북마크 자리에는 다음과 같은 치환이 이루어진다.

＜dt＞＜a"를 치환하되, 앞서 사용한 폴더제목 문자열("＜folder＞＜caption＞폴더제목＜/caption＞")에 "＜li class='bookmark'＞＜a"을 더해서 만든 문자열("＜folder＞＜caption＞폴더제목＜/caption＞＜li class='bookmark'＞＜a")로 치환하여 앞서와 같은 제목의 폴더가 되게한다. 물론 이때 폴더 제목에 일련번호를 붙여서 "폴더제목2"와 같이 할 수도있다. "＜/a＞"는 그대로 "＜/a＞＜/li＞"로 그리고 마지막으로 "＜/folder＞" 태그가 끝에 더해져서 하나의 북마크 폴더 노드를 완성시킨다. 이렇게 만들어진 노드들은 두번째 단계를 위해 문자열 배열로 저장해놓는다(도8c).

두번째 단계(도10)에서는, 첫번째 단계에서 만들어진 북마크 폴더의 문자열 배열을 사용하여 각 북마크 폴더 문자열에 일대일 대응하는 XML 노드(도8d)를 만든다. 이 XML 노드는 위치 속성값과 내용 속성값을 갖는다. 위치속성값은 북마크 폴더의 생성위치인데 사용자가 원하는 폴더 열수(Col)와 폴더 너비, 폴더 높이에 따라 그 다음 위치 속성같이 자동으로 계산되어 입력된다. 내용 속성값으로, 그 북마크 폴더 문자열이 문자열상태로 저장된다. 이 단계에서 스타일의 변경이 추가로 필요하다면 문자열 치환 단계를 한번 더 한다. 예를 들어 "＜caption＞폴더제목＜/caption＞"을 "＜table＞＜caption＞폴더 제목＜/caption＞＜tr＞＜td＞＜ul＞"로 치환한다. 물론 북마크 폴더의 끝인 "＜/folder＞"는 "＜/ul＞＜/td＞＜/tr＞＜/table＞"로 치환한다. 이렇게 생성된 북마크 폴더의 XML 노드들은 XML 루트에 더해지게 된다(도8d).

이러한 문자열 치환 방식은 즐겨찾기 HTML 파일의 태그를 하나하나 읽어들여 그 구조를 파악하고 이를 바탕으로 북마크 폴더를 만들고 그 안에 북마크를 채워가는 방식보다 간단한 논리 구조로서 진행된다.

서버에 의해 이렇게 처리된 사용자의 북마크는 더 이상 트리구조의 형식이 아니라 웹상에서 북마크 폴더별로 읽을 수있는 펼쳐진 상태의 격자구조가 된다(도5). 만들어진 XML은 개인별 폴더에 보관되고 XSL과 프로세싱 후에 HTML 형식으로 변경되어 사용자의 웹브라우저에 전송된다(도19, 도20).

[포탈사이트의 편집]

사용자가, 분류된 북마크 폴더를 위치 이동시키거나 그 스타일을 바꾸는 등의 편집은 앞서 말한 홈페이지 구성요소 내용의 편집과 동일한 방식으로 이루어진다.

본 발명에서는 데이타베이스와 연동되어 작동하는 구성요소(로긴창, 게시판, 앨범)는 미리 연동이 된 상태의 구성요소를 제시하여 사용자의 편리를 도모한다. 추후 변경이 필요하면 서버로부터 전송된 HTML 편집기에서 데이타베이스와의 연동 상태를 편집할 수있다. 연동상태의 편집은 통상의 방법에 의한다.

자바스크립트에 의해 홈페이지 구성요소의 편집이 끝난 상태에서는 이미 홈페이지는 편집된 상태로 보여지는 것이므로, 서버에 편집된 내용을 저장한 후에 다시 사용자의 홈페이지를 서버에서 저장된 내용으로 갱신할 필요는 없을 것이다. 본 발명에 의한 작동 방식은 자바스크립트에 의해서 편집이 완료된 후에 서버에 저장하는 방식이므로 서버측 내용과 사용자 측의 홈페이지의 내용이 항상 일치하게된다. 따라서 편집후 사용자 홈페이지의 갱신을 생략하여도 되고 이럴 경우 서버로부터의 사용자에게 보내는, 갱신된 홈페이지 전송량을 대폭 줄일 수있게 된다.

본 발명은 사용자의 웹브라우저에서 읽어들인 구성요소별의 HTML코드를, XML 노드의 속성 안에 문자열로서 저장하지만 해당 XML 노드의 자식 노드에 문자열을 저장하여도 된다. 다만 이 경우에는 XML 자식 노드를 하나 더 찾아내어 처리하게되므로 비효율적이다. 한편 XML이 아닌 데이타베이스에 문자열로서 저장하여도 된다(도3). 이 경우에도 XML 노드에서처럼, 위치값(left, top 좌표값)과 내용값(구성요소의 HTML코드)을 분리하여 보관한다. 데이타베이스의 경우에는 데이타베이스의 오작동을 방지하기 위하여 저장되는 문자열을 슬래시(slash)처리를 하여야한다 이러한 오작동 방지방법은 통상의 알려진 방법에 의한다.

[구성요소의 거래]

본 발명의 조립식 홈페이지 제작 방법을 사용하면 홈페이지 구성요소별로 생성, 편집, 복사될 수있으므로 구성요소별로 사용자간에 거래가 가능하게 할 수있다(도14, 도21).

다른 사용자에게 자신의 홈페이지 구성요소를 판매하려는 사용자(이하 "판매자")는 판매하고자하는 구성요소의 "가격"을 서버에게 전송한다. 운영자는 그 구성요소에 대응하는 XML 노드에, 판매자 속성이 없는 경우에는 사용자를 판매자 속성값으로 하고 가격 속성에 가격을 저장한다. 판매자 속성이 있는 경우에는 사용자가 판매자와 일치하는지를 확인하고 일치하면 가격 저장을, 일치하지 않으면 가격 저장을 거절한다(도11).

다른 사용자의 홈페이지 구성요소를 구매하려는 사용자(이하 "구매자")는 구성요소의 가격을 전송받는다. 판매자 속성이 없는 것은 판매가 불가능한 구성요소로 취급한다. 가격 속성이 없는 것(값이 "NULL"인 것)은 최초 판매자가 아님을 뜻하고 구매자로 하여금 최초 판매자의 홈페이지로부터 구매하라는 메시지를 보낸다. 가격 값이 "0"인 것은 자유로이 복사해갈 수있는 구성요소로 취급한다.

구매자는 판매자가 요구하는 거래대금을 자신의 결제계좌에서 지불하여 거래를 성립시킨다. 구매자와 판매자의 결제계좌에서 거래대금이 결제되는 과정은 통상의 알려진 방법에 의한다. 거래가 성립되면 운영자는 판매자의 구성요소에 대응하는 XML 노드를 구매자의 구성요소 저장공간으로 복사 이동해준다(도12). 구매된 구성요소가 복사 이동될 때에는 판매자 속성은 그대로 복사되지만 가격 속성은 "NULL"이 되어 재판매가 방지된다.

구매된 구성요소의 저장공간은 구매자의 개인별 폴더이다. 구매자의 개인별 폴더안에 독립된 XML 파일로서 저장되어도 되고 구매자의 홈페이지 XML 문서내의 buy 노드에 바로 저장해주어도 된다(도15). home 노드 안의 XML노드만이 XSL에 의해서 프로세스되므로, buy 노드안의 XML노드는 구매자의 구성요소 생성 요청이 있을 때에만 home 노드로 복사되고 XSL에 의해서 프로세스된다. 구매자가 구매된 구성요소를 자신의 홈페이지에 생성 편집하는 과정은 위에서 말한 여러 구성요소의 생성 편집과 동일한 과정이다.

본 발명에서는, 최초의 판매자만이 구성요소를 판매할 수있게 하기 위하여 구성요소에 대응하는 XML 노드에 최초 판매자 표시를 속성으로 부여한다(도13). 이 속성은 운영자 이외에는 편집이 되지않게한다. 사용자가 판매자로서 구성요소를 판매 등록하거나 판매가격을 변경할 때에는 사용자와 판매자가 일치하는지 여부가 확인된다.

판매할 구성요소는, 판매자 자신의 홈페이지에 구성되어있는 상태에서 판매될 수도 있고; 운영자가 검색에 유리하게 잘 분류해놓은, 일정한 거래 페이지에 구성요소를 전시해놓고 판매할 수도 있다.

본 발명은 홈페이지 구성요소를 이중구조로 만들어서 안쪽의 구성요소 내용으로서, 전문 디자이너에 의해 미리 제작된 구성요소의 HTML 코드를 별다른 수정 없이 구성요소 노드 안에 삽입하여 사용할 수있게하고, 서버측에서는 XML 노드 내부 속성에 문자열 형태로 담아둠으로써 내용물과 스타일이 혼합된 HTML 문서를 XML 문서 안에 저장, 재생할 수있는 점에서 효용성이 크다.

본 발명은 웹브라우저에서 직접 위지위그방식으로 편집이 이루어지므로 전문적인 홈페이지 제작 기술이 없는 일반인들이 홈페이지를 제작하기가 쉽게 한다.

본 발명은 개인별 즐겨찾기를 트리 구조가 아닌 폴더 형식으로 펼쳐 보임으로써 개인별 포탈 사이트를 만들어줄 수있고 단 한번의 선택단계로 해당 인터넷 사이트로의 방문이 가능하고 또한 개인이 원하는 대로 웹브라우저에서 직접 위지위그 방식의 편집이 가능하므로 사용이 편리하다.

본 발명은 홈페이지를 구성요소 별로 사용자와 운영자간, 사용자와 사용자간의 거래가 가능하게 하므로 사용자의 창작 의욕을 높이고 커뮤니티의 활성화를 꾀한다.

본 발명은 홈페이지의 구성요소 단위로 생성 편집이 일어나므로 편집된 정보만이 서버로 전달되어 편집 데이터의 전송량이 적다.

도1은 본 발명의, 홈페이지를 구성요소 별로 나눈 개념도.

도2는 본 발명의, 서버측 XML 노드에 저장되는 구성요소들의 구조도.

도3은 본 발명의, XML 노드 대신 데이터베이스에 구성요소들이 저장되는 예시도.

도4는 본 발명의, 웹브라우저에서 보여지는 마우스 컨텍스트 메뉴의 예시도.

도5는 본 발명의, 폴더 구조의, 편집 가능한 개인별 포탈 사이트의 예시도.

도6은 본 발명의, 구성요소 노드의 이중구조를 보여주는 개념도.

A는 구성요소 노드의 바깥쪽 태그.

B는 구성요소 노드의 안쪽 HTML 코드.

도7은 본 발명의, 구성요소 노드의 이중구조를 코드로서 보여주는 예시도.

도8은 본 발명의, 구성요소 노드가, XML 노드로서 저장되는 예시도.

도8a는 본 발명의, XML 노드를 HTML 문서로 복원해주는 XSL 예시도.

도8b는 웹브라우저의 개인별 즐겨찾기 HTML 파일의 예시도.

도8c는 본 발명의, 도8b의 파일을 문자열 배열로서 변환시켜놓은 예시도.

도8d는 본 발명의, 도8c의 문자열 배열을 XML 노드로 변환시켜놓은 예시도.

도9는 본 발명의, 문자열 치환 방법중 즐겨찾기 파일로부터 폴더 문자열 배열을 만드는 순서도.

도10은 본 발명의, 문자열 치환 방법중 폴더 문자열 배열로부터 XML 노드를 만드는 순서도.

도11은 본 발명의, 판매자가 구성요소를 등록하는 방법의 순서도.

도12는 본 발명의, 구매자가 구성요소를 구매하는 방법의 순서도.

도13은 본 발명의, 판매자 속성을 갖는 XML 노드를 보여주는 예시도.

도14는 본 발명의, 사용자간 구성요소 거래를 보여주는 구성도.

도15는 본 발명의, 구매된 XML 노드를 구매자 XML 문서에 저장한 예시도.도16은 본 발명의, 네트워크 기반 홈페이지 제작방법의 구성도도17은 본 발명의, 네트워크 기반 홈페이지 제작방법으로 홈페이지의 구성 요소를 독립된 편집옵션창없이 생성 또는 편집하는 과정을 나타낸 순서도.도18은 본 발명의, 네트워크 기반 홈페이지 제작방법으로 홈페이지의 구성 요소를 독립된 편집옵션창을 사용하여 생성 또는 편집하는 과정을 나타낸 순서도.도19은 본 발명의, 네트워크 기반 개인 포탈용 홈페이지 제작방법의 구성도도20은 본 발명의, 네트워크 기반 개인 포탈용 홈페이지 제작방법의 순서도도21은 본 발명의, 네트워크 기반 홈페이지 구성요소 거래방법의 순서도

Claims

웹서버에서 수행되는 네트워크 기반 홈페이지 제작방법에 있어서,

사용자의 단말기에 설치된 웹브라우저로부터 홈페이지의 전송 요청을 수신하는 단계; 상기 사용자의 소유인 XML문서와 XSL문서를 프로세스하여 홈페이지를 재생하는 단계-재생된 홈페이지에는 편집기능이 포함되어있음. 편집기능을 사용하기위한 편집메뉴는, 평상시에는 홈페이지 외부에 표시되지않으나 편집시에는 컨텍스트메뉴의 형태로 제시됨-; 상기 재생된 홈페이지를 상기 사용자의 단말기로 전송하는 단계; 상기 사용자가 상기 홈페이지에 포함된 편집기능을 이용하여 상기 홈페이지 화면에서 원하는 위치에 홈페이지의 구성요소를 직접 생성하거나 또는 홈페이지 화면에서 보이는 구성요소를 직접 선택하여 편집하는 단계; 상기 사용자 단말기의 웹브라우저로부터, 상기 생성 또는 편집된 구성요소의 HTML 소스를 수신하는 단계; 상기 생성 또는 편집된 구성요소의 HTML 소스를 상기 사용자 소유의 XML문서와 XSL 문서에 저장하는 단계-상기 구성요소의 위치정보는, 대응하는 XML 노드의 위치속성에, HTML 소스는 상기 XML 노드의 내용속성에 각각 문자열 상태로 저장됨-; 상기 수정된 XML 문서와 XSL 문서를 프로세스하여 홈페이지를 다시 생성하는 단계; 상기 사용자의 단말기로 상기 재생된 홈페이지를 전송하는 단계를 포함하는 것을 특징으로하는 네트워크 기반 홈페이지 제작방법.
웹서버에서 수행되는 네트워크 기반 개인 포탈용 홈페이지 제작방법에 있어서,

사용자 단말기에 설치된 웹브라우저로부터 사용자의 즐겨찾기 HTML 파일을 수신하는 단계; 상기 즐겨찾기 HTML 파일을 가공하여, 즐겨찾기가 폴더별로 펼쳐진 형태인 북마크 폴더의 격자구조를 재생할 수있는 XML과 XSL 문서를 만드는 단계-각 사용자 별로 사용자 소유의 XML과 XSL 문서가 만들어짐-; 상기 XML 문서와 XSL 문서를 프로세스하여 개인 포탈용 홈페이지를 재생하는 단계-재생된 홈페이지에는 편집기능이 포함되어있음-; 상기 재생된 개인 포탈용 홈페이지를 상기 사용자의 단말기로 전송하는 단계; 상기 사용자가 상기 개인 포탈용 홈페이지에 포함된 편집기능을 이용하여 상기 홈페이지 화면에서 원하는 위치에 홈페이지의 구성요소를 직접 생성하거나 또는 홈페이지 화면에서 보이는 구성요소를 직접 선택하여 편집하는 단계:; 상기 사용자 단말기의 웹브라우저로부터, 생성 또는 편집된 구성요소의 HTML 소스를 수신하는 단계; 상기 생성 또는 편집된 구성요소의 HTML 소스를 상기 사용자 소유의 XML문서와 XSL 문서에 저장하는 단계-상기 구성요소의 위치정보는, 대응하는 XML 노드의 위치속성에, HTML 소스는 상기 XML 노드의 내용속성에 각각 문자열 상태로 저장됨-; 상기 수정된 XML 문서와 XSL 문서를 프로세스하여 개인 포탈용 홈페이지를 다시 생성하는 단계; 상기 사용자의 단말기로 상기 재생된 개인 포탈용 홈페이지를 전송하는 단계를 포함하는 것을 특징으로 하는 네트워크 기반 개인 포탈용 홈페이지 제작방법.
사용자와 운영자간 또는 사용자와 사용자간에 홈페이지 구성요소를 구성요소별로 거래('구매 또는 판매'를 말함)하는, 웹서버에서 수행되는 네트워크 기반 구성요소 거래방법에 있어서,

판매자의 단말기에 설치된 웹브라우저로부터 판매대상인 구성요소의 가격 정보를 수신하는 단계; 상기 판매자 소유의 XML문서에서, 상기 판매대상인 구성요소에 대응하는 XML 노드의 판매자 속성과 상기 판매자를 비교 확인하는 단계-이 둘이 일치해야 구성요소를 판매가능함-; 상기 구성요소에 대응하는 XML 노드에 판매자 속성과 가격 속성을 부여하는 단계-판매가능한 구성요소에만 이 속성들이 부여됨.이 속성 부여는 웹서버에서 자동으로 이루어지며, 판매자 또는 구매자의 직접적인 조작이 불가능함-; 구매자의 단말기에 설치된 웹브라우저로부터 구매대상인 구성요소의 구매 가격 정보를 수신하는 단계; 상기 구성요소가 구매가능한지 여부를 확인하는 단계-구매가능한 구성요소의 가격 속성은 "NULL"이 아님-; 서버측의 결제 데이타베이스에 연결되어 상기 구매자의 결제계좌에서 판매자의 결제계좌로 거래대금이 이동하는 단계; 상기 구매된 구성요소를, 상기 구매자 소유의 XML문서에 복사, 저장하는 단계; 상기 구매된 구성요소의 XML 노드의 판매자 속성은 그대로 놔두고 가격 속성을 "NULL"로 변경하는 단계-상기 구매된 구성요소의 가격속성을 "NULL"로 표시하여 재판매를 금지함-; 상기 수정된 XML 문서와 XSL 문서를 프로세스하여 상기 구매자의 홈페이지를 다시 생성하는 단계: 상기 구매자의 단말기로 상기 재생된 홈페이지를 전송하는 단계를 포함하는 것을 특징으로하는 네트워크 기반 홈페이지 구성요소 거래방법
제1항 내지 제3항 중 어느 한 항에 있어서,

각 구성요소를 생성하는 방법은,

사용자의 웹브라우저 화면중 상기 구성요소를 생성시키고 싶은 위치에 마우스 오른쪽 클릭하여 컨텍스트 메뉴가 제시되게하는 단계; 상기 컨텍스트 메뉴중에 원하는 구성요소를 선택하는 단계-생성될 수있는 구성요소의 예로는 북마크 폴더, 북마크, 로긴창, 게시판, 앨범, 메뉴판, 광고, 글상자, 그림상자, 애플릿, 플래시 등이 있음-; 상기 컨텍스트 메뉴가 발생한 위치와 상기 선택된 구성요소 정보로부터 웹브라우저에 포함된 편집기능이 직접 사용자의 단말기에 있는 홈페이지 소스에 변경을 가하여 구성요소를 생성시키는 단계-상기 홈페이지에 생성된 구성요소가 생성 즉시 보임-; 상기 생성된 구성요소의 위치정보와 HTML 소스가 웹서버로 자동으로 전송되는 단계; 상기 웹서버에서 상기 생성된 구성요소를 저장하기 위해 XML에 새로운 노드를 만드는 단계를 더 포함하는 것을 특징으로하는 네트워크 기반 홈페이지 제작방법 또는 네트워크 기반 홈페이지 구성요소 거래방법.
제1항 내지 제3항 중 어느 한 항에 있어서,

각 구성요소의 편집방법은,

사용자의 웹브라우저의 화면에 보이는 구성요소중 편집하고 싶은 구성요소위에서 마우스 오른쪽을 클릭하여 구성요소가 선택됨과 동시에 컨텍스트 메뉴가 제시되게 하는 단계; 상기 컨텍스트 메뉴의 편집메뉴를 직접 이용하여 구성요소를 편집하는 단계-컨텍스트 편집메뉴에는 구성요소를 추가, 생성, 편집, 이동, 고정, 오려내기, 복사, 삽입, 덧붙임, 선택, 판매, 구매, 삭제하거나 홈페이지의 갱신, 즐겨찾기 가져오기 등의 편집메뉴가 있음-; 구성요소를 웹브라우저 화면에서 직접 위지위그방식으로 편집하는 단계; 편집 완료후에 자동으로 편집된 구성요소의 HTML 소스가 웹서버로 전송되는 단계를 더 포함하는 것을 특징으로 하는 네트워크 기반 홈페이지 제작방법 또는 네트워크 기반 홈페이지 구성요소 거래방법.
제1항 내지 제3항 중 어느 한 항에 있어서,

구성요소의 HTML 소스를 웹서버측에 저장하는 방법은,

XML 문서 대신에 데이타베이스를 사용하고, 저장하고자 하는 구성요소 노드의 구성요소 위치 정보는 left, top 행에, 구성요소 내용 정보는 content 행에 문자열상태로 저장하는 것을 특징으로 하는 네트워크 기반 홈페이지 제작방법 또는 네트워크 기반 홈페이지 구성요소 거래방법
자바스크립트가 작동하는 웹브라우저가 설치된 여러 대의 컴퓨터 단말기들과; 아파치 서버, 피에이치피(PHP) 및 마이에스큐엘(MySQL)이 설치된 서버와; 상기 단말기들과 상기 서버를 연결시켜주는 네트워크로 구성된 컴퓨터 시스템에서 실행되는 컴퓨터 프로그램을 기록한 기록매체에 있어서, 상기 제1항 내지 제3항중 어느 한 항의 각 단계를 실행하는 컴퓨터 프로그램이 기록된, 컴퓨터로 읽을 수 있는 기록 매체
제1항 내지 제3항중 어느 한 항에 있어서,

컴퓨터 단말기에 보여지는 홈페이지를 이루는 구성요소들은,

홈페이지를 기능별로 여러 구성요소(구성요소의 예로는 북마크 폴더, 북마크, 로긴창, 게시판, 앨범, 메뉴판, 광고, 글상자, 그림상자 , 애플릿, 플래시 등이 있음)로 나눈 후에, 상기 각 구성요소의 HTML 소스("구성요소 내용 정보" 라 부름)를 안에 담도록, 상기 각 HTML 소스의 앞뒤에 새로운 태그(바람직한 예는 div 태그)를 더하여 이중 구조의 노드("구성요소 노드" 라 부름)로 만들고, 이 이중구조 노드의 위치 속성에 상기 각 구성요소의 위치정보("구성요소 위치 정보"라 부름)를 저장한 형태의 구성요소 노드들이고, 상기 이중구조의 구성요소 노드들을 저장하고 재생하는 서버에서는 상기 각 구성요소 노드에 대응하는 XML 노드가 존재하여 상기 구성요소 위치정보는 상기 XML 노드의 위치속성에, 상기 구성요소 내용정보는 상기 XML 노드의 내용속성에 문자열로 저장되고 재생됨으로써 상기 각 구성요소의 생성, 편집 및 자유로운 이동을 가능하게 한 것을 특징으로 하는 네트워크 기반 홈페이지 제작방법 또는 네트워크 기반 홈페이지 구성요소 거래방법.
제1항 내지 제3항 중 어느 한 항에 있어서,

각 구성요소를 생성하는 또 다른 방법은,

사용자의 웹브라우저 화면중 상기 구성요소를 생성시키고 싶은 위치에 마우스 오른쪽 클릭하여 컨텍스트 메뉴가 제시되게하는 단계; 상기 컨텍스트 메뉴중에 원하는 구성요소를 선택하는 단계; 선택된 구성요소에 대한 정보가 네트워크를 통해 웹서버에 전송되는 단계: 상기 웹서버가 상기 선택된 구성요소와 동일 종류인 다양한 형태의 구성요소들을 담은 웹페이지를 상기 사용자의 단말기로 전송하는 단계-전문디자이너들에 의해 상기 웹페이지는 미리 만들어져 웹서버측의 저장공간에 저장되어있는 것임-; 상기 전송된 웹페이지가 상기 사용자의 단말기의 웹브라우저 화면에 선택창으로 표시되는 단계; 상기 사용자가 상기 선택창에 표시된 구성요소들 중에서 한 구성요소를 선택하고 "저장"단추를 누르는 단계: 상기 선택된 구성요소 정보가 상기 웹서버에 전송되는 단계; 상기 웹서버에서 상기 선택된 구성요소를 저장하기 위해 상기 사용자 소유의 XML 문서에 새로운 XML 노드를 만드는 단계를 더 포함하는 것을 특징으로하는 네트워크 기반 홈페이지 제작방법 또는 네트워크 기반 홈페이지 구성요소 거래방법.
제1항 내지 제3항 중 어느 한 항에 있어서,

각 구성요소의 편집의 또 다른 방법은,

사용자의 웹브라우저의 화면에 보이는 구성요소중 편집하고 싶은 구성요소위에서 마우스 오른쪽을 클릭하여 구성요소가 선택됨과 동시에 컨텍스트 메뉴가 제시되게 하는 단계; 상기 컨텍스트 메뉴중 "편집"을 선택하는 단계; 웹서버로부터 편집기가 전송되는 단계-편집기는 독립된 윈도우창에서 열림-; 전송된 편집기에서 편집 옵션을 선택하는 단계-선택된 구성요소별로 편집옵션이 다름-; 구성요소를 웹브라운더 화면에서 직접 위지위그방식으로 편집하는 단계; 편집 완료후에 저장을 누르면 편집된 구성요소의 HTML 소스가 웹서버로 전송되는 단계를 더 포함하는 것을 특징으로 하는 네트워크 기반 홈페이지 제작방법 또는 네트워크 기반 홈페이지 구성요소 거래방법.
제1항 내지 제3항 중 어느 한 항에 있어서,

구성요소의 HTML 소스를 XML 문서에 저장하는 또다른 방법은,

저장하고자 하는 구성요소 노드의 구성요소 위치 정보와 구성요소 내용 정보를, 이 구성요소 노드에 일대일 대응하는 XML의 노드에 각각 위치 속성과 내용 속성으로서 문자열 상태로 저장하되, 편집전의 문자열을 검색하여 편집후의 문자열로 치환하는 것을 특징으로 하는 네트워크 기반 홈페이지 제작방법 또는 네트워크 기반 홈페이지 구성요소 거래방법
제1항 내지 제3항 중 어느 한 항에 있어서,

편집을 위한 컨텍스트 메뉴는,

사용자의 웹브라우저의 화면에 보이는 홈페이지내에서 직접 구성요소를 추가, 생성, 편집, 이동, 고정, 오려내기, 복사, 삽입, 덧붙임, 선택, 판매, 구매, 삭제, 화면갱신, 즐겨찾기가져오기 등의 편집 기능을 하는 편집메뉴를 가지는 것을 특징으로 네트워크 기반 홈페이지 제작방법 또는 네트워크 기반 홈페이지 구성요소 거래방법
제2항에 있어서,

즐겨찾기 HTML 소스를 가공하여 생성되는 북마크 폴더들은,

폴더별로 펼쳐진 형태인 북마크 폴더의 격자구조(바람직한 예로는 각 열마다 4개의 북마크 폴더씩, 열과 행이 격자구조를 이루도록 배열함)를 가진 것을 특징으로하는 네트워크 기반 개인 포탈용 홈페이지 제작방법.
제2항에 있어서,

즐겨찾기 HTML 소스를 가공하여 생성되는 북마크 폴더들은,

평상시에는 웹페이지 외부에 나타나지않으나, 편집시에는 컨텍스트 메뉴의 형태로 나타나는 편집메뉴를 통해 북마크 폴더 자체와 그 안의 북마크들이 생성,이동, 편집될 수있는 것을 특징으로하는 네트워크 기반 개인 포탈용 홈페이지 제작방법.
제3항에 있어서,

판매될 구성요소에 대응하는 XML 노드는,

구성요소의 위치속성과 내용속성 이외에 판매자속성과 가격속성을 더 가지며, 이 두 속성은 사용자측에서 임의로 부여하는 것이 아니라 웹서버측에서 자동으로 권리여부를 판단하여 부여하는 것을 특징으로하는 네트워크 기반 홈페이지 구성요소 거래방법.
제3항에 있어서,

구매된 구성요소에 대응하는 XML 노드는,

상기 구매된 구성요소에 대응하는 XML 노드가 구매자의 XML 문서에 즉시 삽입되어 XSL문서와 프로세스하여 만들어진 구매자의 홈페이지가 사용자측 웹브라우저로 전송되는 과정을 통해 즉시 구매자의 홈페이지에 표시될 수도 있고, 또는 상기 구매된 구성요소에 대응하는 XML 노드가 구매자의 XML 문서의 임시저장 노드 (바람직한 예에서는 buy 노드라 부름)에 임시로 저장된 후에 구매자가 홈페이지를 편집하는 과정에서 생성되어 표시될 수도 있는 것을 특징으로하는 네트워크 기반 홈페이지 구성요소 거래방법.
제1항 내지 제3항 중 어느 한 항에 있어서,

구성요소의 HTML 소스를 웹서버측에 저장하는 또다른 방법은,

XML 문서 대신에 데이타베이스를 사용하고, 저장하고자 하는 구성요소 노드의 구성요소 위치 정보는 left, top 행에, 구성요소 내용 정보는 content 행에 문자열상태로 저장하되, 편집전의 문자열을 left, top 행이나 content 행에서 검색하여 편집후의 문자열로 치환하는 것을 특징으로 하는 네트워크 기반 홈페이지 제작방법 또는 네트워크 기반 홈페이지 구성요소 거래방법