KR100805170B1

KR100805170B1 - 웹 디자인 변경 장치 및 방법

Info

Publication number: KR100805170B1
Application number: KR1020060022394A
Authority: KR
Inventors: 김택헌
Original assignee: 엔씨소프트 재팬 가부시키 가이샤
Priority date: 2006-03-09
Filing date: 2006-03-09
Publication date: 2008-02-21
Also published as: WO2007102711A2; WO2007102711A3; JP2009529725A; CN101401091A; TWI340907B; TW200801999A; EP1997033A2; US20090024930A1; EP1997033A4; KR20070092360A

Abstract

본 발명은 웹 디자인 변경 시스템 및 방법에 관한 것이다. 본 발명에 따르면, 정보통신망을 통해 웹 서비스 제공 서버에 접속 가능하며, 웹 서비스 제공 서버에서 제공하는 정보의 데이터 송/수신이 가능한 사용자 단말기; 사용자 단말기를 이용한 웹 회원 사용자의 로그인 시 해당 웹 화면을 각 회원 사용자 단말기에 디스플레이시키며, 웹 화면 내에 구현되는 메뉴의 위치, 색상 및 모양에 대하여 사용자에 의해 제어되는 경우 제어된 메뉴의 위치, 색상 및 모양과 연계된 해당 웹 메뉴 화면을 활성화시켜 사용자 단말기로 디스플레이시키는 웹 서버; 및 웹 서버와 접속되어 웹 서비스에 따른 사용자 DB 및 사용자 디자인 DB 를 저장하고 있는 데이터 베이스 서버; 를 포함하고, 웹 서버는 데이터 베이스 서버에서 받은 CSS 정보와 HTML 코드를 결합하여 사용자 단말기로 출력하고, 사용자 단말기에서 수정된 씨에스에스(CSS. Cascads Style Sheet) 정보를 데이터 베이스 서버에 저장하는 것을 특징으로 하는 웹 디자인 변경 시스템이 제공된다.

웹, 사용자 단말기, 웹서버, 데이터베이스 서버

Description

웹 디자인 변경 장치 및 방법{Apparatus and Method for Changing Web Design }

도 1은 본 발명에 따른 웹 디자인 변경 시스템을 나타내는 도면.

도 2는 본 발명에 따른 웹 서비스 제공 시스템의 내부 구성을 나타내는 도면.

도 3은 본 발명에 따른 웹 디자인 변경 방법을 나타내는 흐름도.

도 4는 상기 도 3의 웹 디자인 변경 방법의 흐름도에 따라 웹 메뉴 위치 및 색상 변경의 전후를 나타내는 도면.

도 5는 본 발명에 따른 웹 디자인의 메뉴 제어방법을 나타내는 상기 도 3의 서브루틴.

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

100 : 사용자 단말기 200 : 정보통신망

300 : 웹 서비스 제공 서버 310 : 인터페이스부

320 : 웹서버 321 : 제어부

322 : 입력부 323 : 저장부

324 : 출력부 350 : 데이터 베이스 서버

본 발명은 웹 디자인 변경 장치 및 방법에 관한 것으로서, 보다 상세하게는 웹 회원 사용자가 관리자의 페이지에서 마우스의 클릭 혹은 드래그 엔 드롭(Drag & Drop)을 이용하여 메뉴의 위치, 색상, 모양에 대한 웹에서 표현가능한 모든 변경값을 손쉽게 컨트롤하여 본인이 원하는 형태의 웹을 만들 수 있도록 하는 웹 디자인 변경 방법 및 장치에 관한 것이다.

일반적으로, 웹 페이지는 많은 사용자들이 사용함에도 불구하고 웹 사이트의 디자인이 독창적이지 않을 뿐만 아니라 대다수는 사용자의 관심사항, 선호사항, 우선사항에 따라 디스플레이 하는데 어려움이 많았다.

그중, 상기 웹 페이지의 하나로 사용자들이 많이 사용하는 블로그에 대해서살펴보면, 블로그(Blog)는 인터넷을 의미하는 웹(Web)과 항해일지를 뜻하는 로그(Logs)가 합쳐진 신조어로 인터넷 일기 또는 인터넷 항해일지란 뜻이다.

상기 블로그는 종래 인터넷 게시판의 단점인 익명성, 일방성, 컨텐츠 게시율의 저하등의 문제를 해결하고자 등장한 서비스로서, 단순한 텍스트 또는 그래픽 방식을 이용하여 네트워크 상에 자신만의 영역을 할당 받을 수 있는 일종의 1인 미디어를 의미한다.

따라서, 현재의 블로그는 여러개인의 다양한 정보를 담는다는 측면에서 볼 때 그 각각의 개인을 만족시켜 줄 수 있는 다양한 디자인의 블로그가 요구되고 있 다.

그로 인해, 실제로도 디자인이 강조된 블로그 시스템이 많이 등장하고 있으며, 상기 블로그 시스템은 크게 두가지의 패턴으로 구분할 수 있다.

첫번째는 템플릿 형태의 블로그로서 몇 번의 클릭으로 기존에 만들어져 있는 템플릿을 그냥 사용하는 방식이 있고, 두번째는 사용자 설정형 방식으로 다양한 설정값을 입력받거나 사용자에게 HTML 코딩을 직접 입력하도록 하여 본인이 원하는 블로그를 만들 수 있도록 하는 방식이 있다.

대부분은 이 두가지를 적절히 혼합하여 사용자에게 기본 템플릿과 몇가지 설정 옵션으로 약간의 다양성을 추구할 수 있도록 구현되어 있다.

하지만, 실제 사용자들은 블로그의 기본적인 형식은 유지하되 보다 다양한 디자인과 설정이 가능하기를 원한다.

따라서, 상기 두가지의 한계를 극복할 수 있는 동시에 다양성을 만족시키기 위해서 만들어지고, 각각의 실제와 동일한 모양의 메뉴의 위치, 색상, 모양에 대한 웹에서 표현 가능한 모든 변경값을 손쉽게 컨트롤 하여 블로그 회원 사용자가 원하는 형태의 블로그를 만드는 방법이 요구 되어지고 있다.

또한, 종래의 블로그는 HTML을 이용한 하이퍼 텍스트(Hypertext)를 마크업(Markup)하여 구조화 시키기 위한 언어를 이용하였기 때문에, 각 부분마다 일일이 폰트 종류, 크기, 색상을 지정하는 것이 매우 번거로웠고, 웹페이지의 레이어를 잡는다거나, 원하는 디자인으로 문서를 꾸미기에는 많은 한계가 있었다.

상기와 같은 문제점을 해결하기 위해서, 본 발명은 웹 회원 사용자가 본인의 웹 사이트 또는 블로그에 다양성을 추구하도록 디자인 설정과 메뉴의 설정을 선택적으로 하여 원하는 형태의 웹 사이트 또는 블로그를 만드는 웹 디자인 변경 장치 및 방법을 제공하는데 그 목적이 있다.

또한, 본 발명은 메뉴객체의 속성값을 캐스캐이드 스타일 시트(CSS) 형태로 저장하도록 하여 고정된 HTML을 자유롭고 부드럽게 만들어주고, 동시에 스타일 시트를 별도로 분리하여 문서의 크기를 줄임과 동시에 성능의 향상을 가져오도록 하는 웹 디자인 변경 장치 및 방법을 제공하는데 또 다른 목적이 있다.

상기와 같은 목적을 달성하기 위해서, 본 발명에 따른 웹 디자인 변경 시스템은 정보통신망(200)을 통해 웹 서비스 제공 서버에 접속 가능하며, 상기 웹 서비스 제공 서버에서 제공하는 정보의 데이터 송/수신이 가능한 사용자 단말기(100); 상기 사용자 단말기를 이용한 웹 회원 사용자의 로그인 시 해당 웹 화면을 각 회원 사용자 단말기에 디스플레이시키며, 웹 화면 내에 구현되는 메뉴의 위치, 색상 및 모양에 대하여 사용자에 의해 제어되는 경우 제어된 메뉴의 위치, 색상 및 모양과 연계된 해당 웹 메뉴 화면을 활성화시켜 사용자 단말기로 디스플레이시키는 웹 서버(310); 및 상기 웹 서버와 접속되어 상기 웹 서비스에 따른 사용자 DB 및 사용자 디자인 DB 를 저장하고 있는 데이터 베이스 서버(350); 를 포함하고, 상기 웹 서버 (310)는 상기 데이터 베이스 서버(350)에서 받은 CSS 정보와 HTML 코드를 결합하여 상기 사용자 단말기(100)로 출력하고, 상기 사용자 단말기에서 수정된 씨에스에스(CSS. Cascads Style Sheet) 정보를 상기 데이터 베이스 서버(350)를 포함하는 것을 특징으로 한다.

또한, 본 발명에 따른 웹 디자인 변경 방법은 (a) 제어부가 사용자 본인의 웹 페이지를 화면에 출력하기 위하여 사용자 DB 및 사용자 디자인 DB를 데이터 베이스 서버에 구성하는 단계(S10); (b) 상기 제어부가 웹 디자인의 속성을 나타내는 캐스캐이드 스타일 시트(Cascade Style Sheet)정보를 데이터 베이스 서버로부터 가져오는 단계(S20); (c) 상기 제어부는 상기 캐스캐이드 스타일 시트 정보와 에이치티엠엘(HTML) 코드를 결합하여 상기 웹 관리자의 화면상에 출력하는 단계(S30); (d) 상기 제어부가 관리자 화면상에서 상기 캐스캐이드 스타일 시트 정보를 변경하는 단계(S40); (e) 상기 제어부는 변경된 캐스캐이드 스타일 시트 정보 결과를 화면상에서 확인 가능하도록 하여 출력된 결과에 따라 상기 캐스캐이드 스타일 시트 정보를 변경하겠는가를 판단하는 단계(S60); 및 (f) 상기 제어부가 상기 변경된 스타일 시트 정보를 데이터 베이스 서버에 저장하는 단계(S70); 를 포함한다.

이하, 첨부된 도면을 참조하여 본 발명에 따른 웹 디자인 변경 시스템 및 방법에 대한 일실시예로서는 다수개가 존재할 수 있으며, 이하에서는 가장 바람직한 일 실시예에 대해 설명한다.

도 1은 본 발명에 따른 웹 디자인 변경 시스템을 나타내는 도면이다.

상기 도 1에 도시된 바와 같이, 상기 웹 디자인 변경 시스템은 정보통신망 (200)을 통해 상기 웹 서비스 제공 서버에 접속 가능하며, 상기 웹 서비스 제공 서버에서 제공하는 다양한 컨텐츠에 대한 정보의 데이터 송/수신이 가능한 사용자 단말기(100), 웹 또는 블로그 컨텐츠 정보를 관리하는 웹서버(320)와 상기 웹서버와 접속되어 상기 웹 서비스를 제공하기 위한 웹 운용에 따른 데이터를 저장하고 있는 데이터 베이스 서버(350)로 구성된 웹 서비스 제공 서버(300)를 포함한다.

사용자 단말기(100)는 정보통신망을 통해 웹 서비스 제공 서버(300)에 접속가능하며, 웹 서비스 제공 서버에서 제공하는 다양한 컨텐츠에 대한 정보 데이터의 송/수신이 가능한 단말장치로서, 사용자 단말기를 사용하는 회원 사용자는 이러한 단말기를 이용하여 웹 서비스 제공 서버에 접속한 후, 해당 웹에서 제공하는 각종 컨텐츠 정보를 이용할 수 있다.

상기 사용자 단말기(100)는 사용자의 제어에 따라 웹 관리자의 페이지에서 마우스의 클릭 또는 드래그 엔 드롭(Drag & Drop)만을 이용하여 메뉴의 위치, 색상 및 모양에 대하여 웹에서 표현 가능한 모든 변경값을 제어하도록 한다.

또한, 상기 사용자 단말기(100)는 HTML(Hyper Text Markup Language), XML(eXtensible Markup Language), CSS(cascsde style sheet) 등의 형태로 웹 내용을 디스플레이 할 수 있는 인터넷 브라우저(Netscape, Internet Explorer 등)를 가지고 있다.

정보통신망(200)은 전용선, LAN, QAN, VAN, 인트라넷, 사설 전화망, 공중전화망, PSTN 망 및 이들의 상호 조합에 의해 결합되어 있는 것으로서, 도 1에 도시된 각 네트워크 구성 주체가 서로 원활하게 통신을 할 수 있도록 하는 포괄적인 의 미의 데이터 통신망이며, 유선인터넷, 무선인터넷 및 모바일 무선 통신망을 포함하는 개념이다.

상기 정보통신망(200)과 관련된 기술적 구성은 본 발명이 속한 기술분야에서 통상의 지식을 가진 자에게 공지되어 있으므로 여기에서 상세히 설명하지는 않겠다.

웹 서비스 제공 서버(300)는 블로그 또는 웹 컨텐츠 정보를 관리하는 웹서버(320)와 상기 웹서버와 접속되어 상기 웹 서비스를 제공하기 위한 웹 운용에 따른 데이터를 저장하고 있는 데이터 베이스 서버(350)로 구성된다.

상기 웹서버(320)는 상기 사용자 단말기를 이용한 회원 사용자의 로그인 시 해당 블로그 또는 웹 화면을 각 회원 사용자 단말기에 디스플레이시키며, 상기 웹 화면 내에 구현되는 메뉴의 위치, 색상, 모양에 대하여 사용자에 의해 제어되는 경우 제어된 메뉴의 위치, 색상 및 모양과 연계된 해당 웹 또는 블로그 컨텐츠 메뉴 화면을 활성화시켜 사용자 단말기에 디스플레이시킨다.

데이터 베이스 서버(350)는 상기 웹 서버와 접속되어 상기 웹 서비스를 제공하기 위한 웹 운용에 따른 사용자 DB, 사용자 디자인 DB, CSS(Cascade Style Sheet)DB를 포함한다.

상기 데이터 베이스 서버(350)에 대한 자세한 설명은 후술되는 도 2에서 상세히 설명하도록 한다.

웹 서비스 제공 서버(300)는 메뉴편집에 위지위그라는 개념을 도입하여 손쉽게 관리자 영역에서 웹의 디자인을 고치고 나서 바로 보이는 디자인을 동일하게 적 용할 수 있도록 구성되어 있다.

여기서, 위지위그(WYSIWYG : What You See IS What You Got)는 화면상에 표시되는 문서의 글, 사진, 도표 등을 그대로 인쇄출력하는 것, 즉, 표시화면에 보인 시각적 이미지가 그대로 인쇄되는 기능을 말하고, 아이콘 등의 조합에 의한 시각적인 조작환경, 월드 와이드 웹 브라우저에 의한 인쇄 환경에 사용된다.

상기 웹 서비스 제공 서버(300)는 웹의 기사 리스트, 기사 본문 내용, 구분폴더(카테고리)리스트, 최근 방문자, 친구 리스트, 프로필, 달력(일별, 월별)등 여러 가지 형태로 저장되어 있으며, 상기 구성요소들의 조합으로 인하여 하나의 웹 또는 블로그가 완성되게 된다.

또한, 상기 웹 서비스 제공 서버(300)는 그 메뉴들에 부여 할 수 있는 모든 종류의 속성값을 CSS(Cascade Style Sheet)의 한가지 방식으로 통일하여 관리할 수 있도록 구현되어져 있기 때문에 웹 메뉴의 프레임 형태를 변경할 수도 있으며, 사용자의 필요에 따라 일부 메뉴는 삽입 삭제 가능하도록 하고, 메뉴의 크기 및 색상을 변경할 수 있다.

도 2는 본 발명에 따른 웹 디자인 서비스 제공 시스템의 내부 구성을 나타내는 도면이다.

상기 도 2에 도시된 바와 같이, 상기 웹 서비스 제공 서버(300)는 인터페이스부(310), 웹서버(320) 및 데이터 베이스 서버(350)를 포함한다.

상기 인터페이스부(310)는 사용자 단말기(100)로부터 정보 데이터를 수신하 기 위해 구성되어 있다.

상기 웹서버(320)는 웹 화면내에 구현되는 웹 또는 블로그의 배경이미지, 아이콘종류, 본문, 폰트의 종류를 사용자에 의해 선택되는 아이템과 연계된 해당 웹 또는 블로그 컨텐츠 메뉴 화면을 활성화 시킨다.

상기 웹서버(320)의 구성요소로는 사용자 단말기로부터 웹의 위치변환 값을 입력받는 입력부(322), 상기 입력부를 통해 입력된 사용자의 요청값에 해당되는 아이템과 연계된 해당 웹 또는 블로그 컨텐츠가 저장되어 있는 저장부(323), 상기 저장부에 저장된 웹 또는 블로그 컨텐츠 정보를 출력하는 출력부(324) 및 상기 각 부를 제어하는 제어부(321)로 구성되어 있다.

입력부(322)는 상기 사용자 단말기(100)로부터 입력된 데이터 정보를 인터페이스부(310)를 통해 입력받는다.

저장부(323)는 상기 입력부를 통해 입력된 사용자의 요청값의 저장과 요청값에 해당되는 아이템과 연계된 해당 웹 또는 블로그 컨텐츠가 저장된다.

출력부(324)는 사용자가 웹의 내부 구성을 제어한 결과를 출력하는 기능을 한다.

제어부(321)는 상기 각 부를 제어하여 사용자가 원하는 웹의 디자인 형태를 형성한다.

데이터 베이스 서버(350)는 사용자 DB(351), 사용자 디자인DB(352) 및 CSS DB(353)를 포함한다.

상기 사용자 DB(351)는 상기 사용자의 해당 웹 또는 블로그 이름, 해당 웹의 사이트 주소, 사용자 단말기의 고유번호, 프로필 정보, 코멘트 정보, 기사, 친구 리스트, 접속자의 통계 등의 아이콘 정보를 포함한다.

사용자 디자인DB(352)는 사용자가 사용자 단말기를 통해 배경(이미지, 색상, 패턴, 위치), 아이콘 종류(기사 리스트, 구분폴더(카테고리)리스트, 최근 방문자, 친구 리스트, 프로필, 달력), 본문(본문종류, 배경색, 폰트색, 본문라인, 본문위치) 및 액세서리의 정보 및 그에 해당하는 위치 등이 저장되어 있다.

또한, 상기 사용자 디자인 DB(352)는 배경이미지부, 아이콘종류부, 본문 종류부, 색상처리부, 폰트처리부 및 인테리어처리부를 포함한다.

상기 배경이미지부는 웹 회원 사용자로부터 자신이 등록된 웹 또는 블로그에 한해서 입력된 제어 신호에 따라 웹페이지의 배경과 그에 따른 이미지를 저장하고 있다.

아이콘종류부는 웹 회원 사용자가 원하는 다양한 아이콘 정보를 저장하고 있다.

예를 들면, 상기 아이콘종류부에는 기사 리스트, 구분폴더(카테고리)리스트, 최근 방문자, 친구 리스트, 프로필, 달력(일별, 월별)등 여러 가지 형태로 저장되어 있다.

본문종류부는 각각의 아이콘정보에 따른 본문 종류가 저장되어 있다.

즉, 상기 본문종류부는 아이프레임형(iframe) 및 무프레임(frame)의 형식이 저장되어 있어 상기 아이프레임형일 경우, 인서트 프레임(Insert Frame)으로서, 기존의 페이지의 적당한 위치에 페이지 전체를 프레임으로 나누거나 페이지 구성이 어려울 때 레이아웃을 이용하여 페이지를 움직이지 않고 해당 정보를 삽입하고, 무프레임인 경우, 프레임을 나누지 않고 본문을 작성한다.

색상처리부는 상기 각각의 아이콘 종류 및 각각의 웹에 대한 색상 정보가 저장되어 있다.

폰트처리부는 상기 아이콘 종류 및 본문의 내용을 표시하는데에 따른 다양한 폰트가 저장되어 있다.

인테리어 처리부는 상기 각각의 아이콘의 배치 정보가 저장되어 있다.

상기 CSS DB(353)는 캐스캐이드 스타일 시트(Cascade Style Sheet) 로서, 상기 웹 또는 블로그의 색상, 크기 등 다양한 속성을 셋팅하기 위하여 CSS 형태로 저장되어 있다.

상기 CSS DB(353)는 각각의 사용자별로 그에 해당하는 씨에스에스(CSS) 정보가 저장되어 자신의 웹 디자인에 타인의 웹디자인을 적용할 수 있도록 하여 사용자 블로그 디자인을 상호 교환하게 함으로서 사용자에게 다양한 디자인을 제공하도록 한다.

또한, 상기 CSS DB(353)는 DB 접속부하를 줄이기 위해 DB 에 저장되는 동시에 사용자 SKIN 파일(txt 파일)을 생성하여 저장되어 있다.

이때, 상기 생성되어 저장된 SKIN 파일은 CSS DB에 저장되어 있는 CSS 정보와 HTML 페이지 정보로 결합된 형태로 사용자의 웹 또는 블로그 디자인을 나타낸다.

도 3은 본 발명에 따른 웹 디자인 변경 방법을 나타내는 흐름도이다.

상기 도 3에 도시된 바와 같이, 본 발명에 따른 웹 디자인 변경 방법은 먼저, 제어부가 사용자 본인의 웹 사이트 화면을 출력하기 위하여 구성되는 사용자 DB 및 사용자 디자인 DB를 데이터 베이스 서버에 저장한다.(S10)

상기 S10 단계는 사용자가 사용자 단말기를 통해 웹 서비스 제공 서버에 접속하여 웹 또는 블로그 이름, 프로필 정보, 아이콘 정보, 코멘트 정보, 기사, 친구 리스트 등을 저장한다.

다음으로, 웹 서비스 제공 서버의 제어부는 웹 또는 블로그 디자인의 속성을 나타내는 캐스캐이드 스타일 시트(Cascade Style Sheet)정보를 데이터 베이스 서버로부터 가져오는 단계를 수행한다.(S20)

상기 S20 단계는, 사용자 단말기를 통해 사용자가 변경 또는 수정하고자 하는 자신의 웹 또는 블로그를 선택하여 그에 따른 웹 디자인의 속성을 나타내는 캐스캐이드 스타일 시트 정보를 데이터 베이스 서버로부터 가져온다.

이때, 상기 캐스캐이드 스타일 시트(Cascade Style Sheet)는 고정된 HTML을 자유롭고 부드럽게 만들어 주는 스타일 시트로서, HTML 문서를 코딩하면서 각 부분마다 일일이 폰트 종류, 크기, 색상을 지정하는 것이 매우 번거롭기 때문에 캐스캐이드 스타일 시트를 별도로 분리하여 문서의 크기를 줄임과 동시에 성능의 향상을 가져오게 한다.

다음으로, 상기 제어부는 상기 캐스캐이드 스타일 시트 정보와 HTML 코드를 결합하여 상기 웹 관리자 화면상에 출력하는 단계를 수행한다.(S30)

상기 S30 단계는 사용자 단말기로부터 입력된 신호에 따라 데이터 베이스 서 버에 저장되어 있는 상기 CSS DB, 사용자 DB 및 사용자 디자인 DB를 조합하여 사용자 단말기에 출력한다.

상기 메뉴 출력 방법은 아래의 표 1의 소스 코드를 참조한다.

<표 1>

다음으로, 상기 제어부는 관리자 화면상에서 상기 캐스캐이드 스타일 시트 정보를 변경하는 메뉴를 제어하는 단계를 수행한다.(S40)

상기 S40 단계는 사용자의 의도에 따라 메뉴를 제어하는 방법으로서, 배경변경, 아이콘종류변경, 본문변경, 액세사리 등의 위치 변경의 방법으로서, 도 5에서 상세히 설명하도록 한다.

다음으로, 상기 제어부는 변경된 캐스캐이드 스타일 시트 정보 결과를 화면상에서 바로, 확인 가능하도록 하는 단계를 수행한다.(S50)

다음으로, 상기 제어부는 상기 캐스캐이드 스타일 시트 정보의 결과에 따라 스타일 시트 정보를 다시 변경하겠는가를 판단하는 단계를 수행한다.(S60)

이때, 상기 제어부는 상기 사용자 단말기로부터 변경 신호를 입력받으면 상 기 S20 단계를 수행하고, 변경된 스타일 시트 정보를 사용할 경우에는 S70 단계를 수행한다.

다음으로, 상기 제어부는 상기 변경된 스타일 시트 정보를 데이터 베이스 서버에 저장하는 단계를 수행한다.(S70)

상기 S70 단계는 사용자의 단말기에 출력된 화면을 통해 사용자 단말기로부터 제어신호를 입력받아 데이터 베이스 서버에 저장하는 단계로서, 배경(이미지, 색상, 패턴, 위치), 아이콘(기사 리스트, 구분폴더(카테고리)리스트, 최근 방문자, 친구리스트, 프로필, 달력(일별, 월별), 본문(본문종류, 배경색, 폰트색, 본문라인 본문위치)과 액세서리의 위치를 해당 CSS 형태로 상기 데이터 베이스 서버에 저장한다.

상기 데이터 베이스부에 저장하는 적용방식은 아래의 표 2를 참조한다.

<표 2>

도 4는 상기 도 3의 웹 디자인 변경 방법의 흐름도에 따라 웹 메뉴 및 색상 변경의 전후를 나타내는 도면이다.

상기 도 4에 도시된 바와 같이, 사용자가 마우스의 드래그 엔 드롭(Drag & Drop)을 이용하여 사용자 단말기를 제어하면, 사용자 단말기의 출력화면에 (a) 상태로 존재하던 웹의 프로필 메뉴창이 사용자의 제어에 따라 (b)의 위치로 변경되어 사용자가 원하는 디자인 편집이 가능하도록 한다.

이때, 웹 서비스 제공 서버는 사용자 단말기로부터 입력된 제어값에 따라 (a) 화면에서 (b) 화면으로 변경 될 때, CSS의 형태의 정보를 출력하여 사용자의 단말기에 의해서 제어된 메뉴의 위치 및 색상의 데이터 정보에 따라 해당 CSS 속성이 변경되고, 변경된 CSS 속성을 데이터 베이스 서버에 저장하여 사용자가 원하는 형태인 (b)와 같은 형태가 사용자 단말기에 출력된다.

도 5는 본 발명에 따른 웹 디자인의 메뉴 제어방법을 나타내는 상기 도 3의 서브루틴이다.

상기 도 5에 도시된 바와 같이, 웹 서비스 제공 서버의 메뉴 제어방법은 제어부가 사용자 단말기로부터 배경 변경을 제어하도록 하는 신호를 입력받는 단계를 수행한다.(S51)

상기 배경 변경 제어단계(S51)는 배경이미지부에 저장되어 있는 데이터에 의해서 배경 이미지 업로드, 배경색의 변경, 배경 패턴 또는 배경의 위치를 변경하도록 한다.

다음으로, 상기 제어부는 변경된 배경 화면을 바탕으로 아이콘종류 변경 단 계를 수행한다.(S52)

상기 아이콘 종류 변경 단계(S52)는 메뉴의 추가/삭제에 따라 웹에서 지원하는 모든 색상으로 배경색, 라인 스타일, 두께 조정가능, 폰트 색, 아이콘의 전체적인 도형 및 위치이동을 변경하도록 한다.

다음으로, 상기 제어부는 변경된 메뉴 설정에 따라 본문을 변경하는 단계를 수행한다.(S53)

상기 본문변경 단계(S53)는 사용자 단말기로부터 입력된 제어신호에 따라 아이프레임형 또는 무프레임 형을 판단하여, 상기 아이프레임 선택신호가 입력된 경우, 즉, 인서트 프레임(Insert Frame)으로서, 기존의 페이지의 적당한 위치에 페이지 전체를 프레임으로 나누거나 페이지 구성이 어려울 때 레이아웃을 이용하여 페이지를 움직이지 않고 해당 정보를 삽입한다.

즉, 상기 아이프레임은 메인페이지의 공지사항 또는 수시로 업데이터 되는 것을 알리거나 기본 컨셉을 깨지 않고 적당한 크기의 아이프레임을 삽입하고, 무프레임형일 경우, 프레임을 나누지 않고 본문을 작성한다.

다음으로, 상기 제어부는 해당 웹의 액세서리 변경 단계를 수행한다.(S54)

상기 액세서리 변경 단계(S54)는 사용자가 원하는 액세서리들을 아래의 표 3을 참조하여 CSS 정보를 드레그 엔 드롭(Drag&Drop)으로 손쉽게 변경할 수 있다.

<표 3>

상기와 같은 단계를 수행하여 사용자 단말기가 웹 서비스 제공 서버에 접속하여 CSS 정보를 이용하여 사용자의 웹 또는 블로그를 사용자의 취향에 따라 메뉴의 위치를 변경하고, 메뉴의 모양을 변경하고, 폰트 및 메뉴들의 색상을 변경하도록 한다.

상기에 설명된 웹 제공 서비스 시스템은 웹의 디자인 변경 방법에만 한정된 것이 아니고 블로그의 디자인 변경에서도 동일한 방법이 적용될 수 있다.

이상에서 본 발명에 의한 웹 디자인 변경 시스템 및 방법에 대하여 설명하였다. 이러한 본 발명의 기술적 구성은 본 발명이 속하는 기술분야의 당업자가 본 발명의 그 기술적 사상이나 필수적 특징을 변경하지 않고서 다른 구체적인 형태로 실시될 수 있다는 것을 이해할 수 있을 것이다.

그러므로 이상에서 기술한 실시예들은 모든 면에서 예시적인 것이며, 한정적인 것이 아닌 것으로서 이해되어야 하고, 본 발명의 범위는 전술한 상세한 설명보다는 후술하는 특허청구범위에 의하여 나타내어지며, 특허청구범위의 의미 및 범위 그리고 그 등가개념으로부터 도출되는 모든 변경 또는 변형된 형태가 본 발명의 범위에 포함되는 것으로 해석되어야 한다.

상기와 같은 본 발명은 기존 웹의 단조로움과 정체성을 극복하여 독창적이고 차별화된 웹 디자인 서비스를 실시함으로써 웹 자체의 경쟁력을 증진시킬 수 있는 효과가 있다.

또한, 본 발명은 메뉴객체의 속성값을 캐스캐이드 스타일 시트(CSS) 형태로 저장하도록 하여 고정된 HTML을 자유롭고 부드럽게 만들어주고, 스타일 시트를 별도록 분리하여 문서의 크기를 줄일 뿐만 아니라 웹 운용에 따른 성능이 향상되는 효과가 있다.

Claims

웹 디자인 변경 장치에 있어서,

사용자 단말기를 이용한 웹 회원 사용자의 로그인 시 해당 웹 화면을 각 회원 사용자 단말기에 디스플레이시키며, 웹 화면 내에 구현되는 메뉴의 위치, 색상 및 모양에 대하여 사용자에 의해 제어되는 경우 제어된 메뉴의 위치, 색상 및 모양과 연계된 해당 웹 메뉴 화면을 활성화시켜 사용자 단말기로 디스플레이시키는 웹 서버(320); 및

상기 웹 서버와 접속되며 사용자 DB, 사용자 디자인 DB 및 씨에스에스(CSS,Cascade Style Sheet)DB 를 포함하고 있는 데이터 베이스 서버(350);

를 포함하고,

상기 웹 서버(320)는 상기 데이터 베이스 서버(350)에서 받은 CSS 정보와 HTML 코드를 결합하여 상기 사용자 단말기(100)로 출력하고, 상기 사용자 단말기에서 수정된 씨에스에스(CSS. Cascads Style Sheet) 정보를 상기 데이터 베이스 서버(350)에 저장하는 것을 특징으로 하는 웹 디자인 변경 장치.
제 1항에 있어서,

상기 웹서버는 상기 사용자 단말기를 통한 사용자의 제어에 따라 웹 관리자의 페이지에서 마우스의 클릭 또는 드래그 엔 드롭(Drag and Drop)을 이용하여 메뉴의 위치, 색상 및 모양에 대하여 웹에서 표현 가능한 모든 변경값을 제어하도록 하는 것을 특징으로 하는 웹 디자인 변경 장치.
제 1항에 있어서,

상기 데이터 베이스 서버에 저장된 사용자 DB는,

사용자의 해당 웹 사이트 이름, 해당 웹 사이트의 사이트 주소, 사용자 단말기의 고유번호, 프로필 정보, 코멘트정보, 기사, 친구리스트 또는 접속자의 통계 같은 아이콘 정보 중 적어도 하나를 포함하는 것을 특징으로 하는 웹 디자인 변경 장치.
제 1항에 있어서,

상기 데이터 베이스 서버에 저장된 사용자 디자인 DB는,

사용자 단말기를 통해 제어된 배경(이미지, 색상, 패턴, 위치) 아이콘(기사 리스트, 구분폴더(카테고리)리스트, 최근 방문자, 친구리스트, 프로필, 달력(일별, 월별), 본문(본문종류, 배경색, 폰트색, 본문라인, 본문위치) 또는 액세서리 중 적어도 하나를 포함하는 것을 특징으로 하는 웹 디자인 변경 장치.
제 1항에 있어서,

상기 웹서버(320)는,

사용자 단말기로부터 웹의 위치변환 값을 입력받는 입력부(322);

상기 입력부를 통해 입력된 사용자의 요청값의 저장과 요청값에 해당되는 아이템과 연계된 해당 웹 또는 블로그 컨텐츠가 저장되는 저장부(323);

상기 저장부에 저장된 웹 컨텐츠 정보를 출력하는 출력부(324) 및

상기 각 부를 제어하고 상기 사용자 단말기로 해당 정보를 출력하여 사용자의 제어에 따라 웹디자인 변경이 이루어 지도록 하는 제어부(321);

를 포함하는 것을 특징으로 하는 웹 디자인 변경 장치.
삭제
제 1항에 있어서,

상기 씨에스에스(CSS, Cascade Style Sheet)DB는,

각각의 사용자별로 그에 해당하는 씨에스에스(CSS) 정보가 저장되어 자신의 웹 디자인의 형태에 기 저장되어 있는 웹 디자인 형태를 적용할 수 있도록 하는 것을 특징으로 하는 웹 디자인 변경 장치.
웹 디자인 변경 방법에 있어서,

(a) 웹 디자인의 속성을 나타내는 캐스캐이드 스타일 시트(Cascade Style Sheet)정보를 데이터 베이스 서버로부터 가져오는 단계;

(b) 상기 캐스캐이드 스타일 시트 정보와 에이치티엠엘(HTML) 코드를 결합하여 웹 관리자의 화면상에 출력하는 단계;

(c) 사용자의 제어에 따라 관리자 화면상에서 상기 캐스캐이드 스타일 시트 정보를 변경하는 단계;

및

(d) 변경된 스타일 시트 정보를 데이터 베이스 서버에 저장하는 단계;

를 포함하는 것을 특징으로 하는 웹 디자인 변경 방법.
제 1항 내지 제 5항 및 제7항중 어느 한항에 있어서,

상기 웹 디자인 변경 장치는 개인 블로그의 디자인을 변경하는데 적용되는 것을 특징으로 하는 웹 디자인 변경 장치.
제 8항에 있어서,

상기 웹 디자인 변경 방법은 개인의 블로그 디자인을 변경하는데 적용되는 것을 특징으로 하는 웹 디자인 변경 방법.
제 8항에 있어서,

상기(c)단계후에 변경된 캐스케이드 스타일 시트 정보 결과를 화면상에서 확인이 가능하도록 하여 출력된 결과에 따라 상기 캐스케이드 스타일 시트 정보를 변경하겠는지를 판단하는 단계를 추가로 포함하는 것을 특징으로 하는 웹 디자인 변경 방법.
제 8항에 있어서,

상기 단계(c)는 사용자의 제어에 따라 웹 서비스 제공 서버에 접속하여 웹 관리자의 페이지에서 마우스의 클릭 또는 드래그 엔 드롭(Drag and Drop)을 이용하여 메뉴의 위치, 색상 및 모양에 대하여 웹에서 표현 가능한 모든 변경값을 제어하도록 하는 것을 특징으로 하는 웹 디자인 변경 방법.
제 8항에 있어서,

상기 데이터 베이스 서버는 각각의 사용자별로 그에 해당하는 씨에스에스(CSS) 정보가 저장되어 자신의 웹 디자인의 형태에 기 저장되어 있는 웹 디자인 형태를 적용할 수 있도록 하는 것을 특징으로 하는 웹 디자인 변경 방법.