KR101760777B1 - 반응형 웹사이트 빌더 시스템 및 그 방법 - Google Patents

Abstract

반응형 웹사이트 빌더 시스템 및 그 방법이 개시된다 본 발명의 실시예에 따른 반응형 웹사이트 빌더 시스템은 테마별 및 해상도별로 복수의 레이아웃 설정값들을 포함하는 복수의 테마 데이터 세트들을 생성하고, 생성된 상기 복수의 테마 데이터 세트들을 테마 데이터베이스에 저장하는 테마 생성부, 제1 사용자의 선택에 따라, 상기 복수의 테마 테이터 세트들 중 선택된 하나의 테마 데이터 세트에 기초하여 사용자 웹사이트 데이터 세트를 생성하는 사용자 편집부; 및 상기 사용자 웹사이트 데이터 세트에 기초하여 사용자 웹 사이트를 생성하는 사이트 생성부를 포함한다.

Description

반응형 웹사이트 빌더 시스템 및 그 방법{System of Building Responsive Website And Method there-of}

본 발명의 개념에 따른 실시예는 반응형 웹사이트 빌더 시스템 및 그 방법 에 관한 것으로 보다 상세하게는 화면 해상도에 따른 반응형 웹사이트를 제작하는 시스템 및 그 방법에 관한 것이다.

인터넷 기술 및 온라인 서비스의 발달로 웹사이트에 대한 수요는 엄청나게 증가하고 있다.

웹사이트(예컨대, 홈페이지)를 만들기 위해서 웹사이트 제작도구와 저장공간이 필요하다. 일반적으로 홈페이지는 홈페이지에 제작에 대한 전문 지식이나 경험이 없는 통상의 인터넷 사용자들이 제작하기는 용이하지 않기 때문에, 홈페이지 제작을 전문으로 하는 업체에 의뢰하여 제작하고 있다.

그러나, 이 경우 홈페이지 제작에 너무 많은 비용과 시간이 소요되고, 제작된 홈페이지를 수정하거나 관리하기 위해서도 별도의 전문 인력이나 비용이 필요한 단점이 있다. 이러한 단점을 개선하기 위하여, 홈 페이지를 자동으로 제작하여 주는 툴이나 방법이 소개되고 있으며, 홈 페이지 자동 제작 방법에 관한 선행 기술도 나와 있다.

대한민국 공개특허 제10-2009-0037203호 대한민국 공개특허 제10-2015-0102150호

본 발명이 이루고자 하는 기술적 과제는, 전문적인 지식 없는 일반 사용자도 프로그램 코딩없이 용이하게 웹사이트를 제작할 수 있는 반응형 웹사이트 빌더 시스템 및 그 방법을 제공함에 있다.

또한, 본 발명이 이루고자 하는 기술적 과제는, 화면 해상도에 따라 가변하는 반응형 웹사이트를 손쉽게 제작할 수 있도록 하는 반응형 웹사이트 빌더 시스템 및 그 방법을 제공함에 있다.

본 발명의 실시예에 따른 반응형 웹사이트 빌더 시스템은 테마별 및 해상도별로 복수의 레이아웃 설정값들을 포함하는 복수의 테마 데이터 세트들을 생성하고, 생성된 상기 복수의 테마 데이터 세트들을 테마 데이터베이스에 저장하는 테마 생성부; 제1 사용자의 선택에 따라, 상기 복수의 테마 테이터 세트들 중 선택된 하나의 테마 데이터 세트에 기초하여 사용자 웹사이트 데이터 세트를 생성하는 사용자 편집부; 및 상기 사용자 웹사이트 데이터 세트에 기초하여 사용자 웹 사이트를 생성하는 사이트 생성부를 포함한다.

상기 사이트 생성부는 상기 사용자 웹사이트 데이터 세트를 저장하는 웹사이트 데이터베이스; 상기 웹사이트 데이터베이스에 저장된 상기 사용자 웹사이트 데이터 세트 중 제1 레이아웃 설정값들에 기초하여 해상도별 CSS 파일을 생성하는 CSS 파일 생성기; 및 상기 CSS 파일 및 상기 사용자 웹사이트 데이터 세트 중 제2 레이아웃 설정값들과 컨텐츠에 기초하여, 사용자 웹 사이트를 생성하는 반응형 유저 인터페이스 모듈을 포함할 수 있다.

상기 복수의 레이아웃 설정값들은 메인 페이지를 구성하는 복수의 메인 페이지 구성 항목들, 및 서브 페이지를 구성하는 복수의 서브 페이지 구성 항목들을 포함하고, 상기 복수의 메인 페이지 구성 항목들 및 상기 서브 페이지 구성 항목들 각각은 하나 이상의 세부 항목 설정값을 포함할 수 있다.

본 발명의 실시예에 따른 반응형 웹사이트 빌더 시스템 및 그 방법에 의하면, 전문적인 지식 없는 일반 사용자도 프로그램 코딩없이 용이하게 웹 사이트를 제작할 수 있다.

또한, 본 발명의 실시예에 따른 반응형 웹사이트 빌더 시스템 및 그 방법에 의하면, 화면해상도에 따라 가변하는 반응형 웹사이트(예컨대, 홈 페이지)를 프로그램 코딩 없이 메뉴 선택 및 설정 작업을 통하여 편리하게 제작할 수 있다.

도 1은 본 발명의 일 실시예에 따른 반응형 웹사이트 빌더 시스템의 개략적인 연결 관계를 나타내는 도면이다.
도 2는 도 1에 도시된 반응형 웹사이트 빌더 시스템의 개략적인 구성 블록도이다.
도 3은 본 발명의 실시예에 따른 반응형 웹사이트 빌더 시스템의 기능 블록도이다.
도 4는 도 3에 도시된 테마 생성부의 기능을 설명하기 위한 도면이다.
도 5는 도 3에 도시된 반응형 화면 작업 뷰어의 화면의 일 실시예를 개략적으로 나타내는 도면이다.
도 6 내지 도 17은 본 발명의 실시예에 따른 반응형 웹사이트 빌더 시스템이 유저 인터페이스를 위해서 제공하는 페이지들(혹은 화면들)의 실시예를 도시한다.

본 명세서 또는 출원에 개시되어 있는 본 발명의 실시 예들에 대해서 특정한 구조적 내지 기능적 설명들은 단지 본 발명에 따른 실시 예를 설명하기 위한 목적으로 예시된 것으로, 본 발명에 따른 실시 예들은 다양한 형태로 실시될 수 있으며 본 명세서 또는 출원에 설명된 실시예들에 한정되는 것으로 해석되어서는 아니 된다.

본 발명에 따른 실시예는 다양한 변경을 가할 수 있고 여러가지 형태를 가질 수 있으므로 특정실시 예들을 도면에 예시하고 본 명세서 또는 출원에 상세하게 설명하고자 한다. 그러나, 이는 본 발명의 개념에 따른 실시 예를 특정한 개시 형태에 대해 한정하려는 것이 아니며, 본 발명의 사상 및 기술 범위에 포함되는 모든 변경, 균등물 내지 대체물을 포함하는 것으로 이해되어야 한다.

제1 및/또는 제2 등의 용어는 다양한 구성 요소들을 설명하는데 사용될 수 있지만, 상기 구성 요소들은 상기 용어들에 의해 한정되어서는 안된다. 상기 용어들은 하나의 구성 요소를 다른 구성 요소로부터 구별하는 목적으로만, 예컨대 본 발명의 개념에 따른 권리 범위로부터 이탈되지 않은 채, 제1 구성요소는 제2 구성요소로 명명될 수 있고, 유사하게 제2 구성요소는 제1 구성요소로도 명명될 수 있다.

어떤 구성요소가 다른 구성요소에 "연결되어" 있다거나 "접속되어" 있다고 언급된 때에는, 그 다른 구성요소에 직접적으로 연결되어 있거나 또는 접속되어 있을수도 있지만, 중간에 다른 구성요소가 존재할 수도 있다고 이해되어야 할 것이다. 반면에, 어떤 구성요소가 다른 구성요소에 "직접 연결되어" 있다거나 "직접 접속되어" 있다고 언급된 때에는, 중간에 다른 구성요소가 존재하지 않는 것으로 이해되어야 할 것이다. 구성요소들 간의 관계를 설명하는 다른 표현들, 즉 "~사이에"와 "바로 ~사이에" 또는 "~에 이웃하는"과 "~에 직접 이웃하는" 등도 마찬가지로 해석되어야 한다.

본 명세서에서 사용한 용어는 단지 특정한 실시예를 설명하기 위해 사용된 것으로, 본 발명을 한정하려는 의도가 아니다. 단수의 표현은 문맥상 명백하게 다르게 뜻하지 않는 한, 복수의 표현을 포함한다. 본 명세서에서, "포함하다" 또는 "가지다" 등의 용어는 설시된 특징, 숫자, 단계, 동작, 구성요소, 부분품 또는 이들을 조합한 것이 존재함을 지정하려는 것이지, 하나 또는 그 이상의 다른 특징들이나 숫자, 단계, 동작, 구성요소, 부분품 또는 이들을 조합한 것들의 존재 또는 부가가능성을 미리 배제하지 않는 것으로 이해되어야 한다.

다르게 정의되지 않는 한, 기술적이거나 과학적인 용어를 포함해서 여기서 사용되는 모든 용어들은 본 발명이 속하는 기술 분야에서 통상의 지식을 가진 자에 의해 일반적으로 이해되는 것과 동일한 의미를 가지고 있다. 일반적으로 사용되는 사전에 정의되어 있는 것과 같은 용어들은 관련 기술의 문맥상 가지는 의미와 일치하는 의미를 가지는 것으로 해석되어야 하며, 본 명세서에서 명백하게 정의하지 않는 한, 이상적이거나 과도하게 형식적인 의미로 해석되지 않는다.

이하, 첨부한 도면을 참조하여 본 발명의 바람직한 실시 예를 설명함으로써, 본 발명을 상세히 설명한다. 각 도면에 제시된 동일한 참조부호는 동일한 부재를 나타낸다.

도 1은 본 발명의 일 실시예에 따른 반응형 웹사이트 빌더 시스템(30)의 개략적인 연결 관계를 나타내는 도면이다

이를 참조하면, 반응형 웹사이트 빌더 시스템(30)은 통신망(20)을 통하여 복수(2이상)의 사용자 단말기(10-1 ~ 10-k, k는 2이상의 정수)와 통신할 수 있다.

제1 내지 제n 사용자 단말기(10-1 ~10-k) 각각은 통신망(20)을 통하여 반응형 웹사이트 빌더 시스템(30)에 접속하여 반응형 웹사이트를 제작할 수 있고, 또한, 제작된 반응형 웹사이트를 이용할 수도 있다.

반응형 웹사이트는 각 사이트의 세부 URL이 해상도에 관계없이 동일하기 때문에 각 사이트 페이지의 세부 URL을 배포해도 디바이스에 상관없이 같은 내용을 확인할 수 있게 된다.

사용자 단말기(10-1 ~10-k)는 PC(personal computer), 랩탑(laptop) 컴퓨터, 또는 휴대용 단말기로 구현될 수 있다. 휴대용 단말기는 이동 전화기, 스마트 폰(smart phone), 태블릿 (tablet) PC, PDA(personal digital assistant) 등일 수 있으나, 이에 한정되는 것은 아니다. 제1 내지 제n 사용자 단말기(10-1 ~10-k)의 전체 혹은 하나를 대표적으로 사용자 단말기(10)로 지칭할 수 있다.

사용자 단말기(10)는 반응형 웹사이트 빌더 시스템(30)에 접속하여, 회원 가입, 회원 정보 등록, 반응형 웹사이트 생성, 웹사이트 도메인 생성, 메뉴관리, 레이아웃 선택 및 변경, 내용등록 및 수정, 게시판(BBS: Bulletin Board System)에 글쓰기, 댓글 달기 등의 기능을 수행할 수 있다.

예컨대, 사용자는 사용자 단말기(10)로 반응형 웹사이트 빌더 시스템(30)에 접속하여 반응형 웹사이트 빌더 시스템(30)이 제공되는 각종 템플릿 및 유저 인터페이스를 이용하여 반응형 웹사이트를 생성하고, 생성된 반응형 웹사이트를 관리(예컨대, 컨텐츠 또는 레이아웃의 변경 등)할 수도 있다.

또한, 사용자는 특정 URL로 생성된 반응형 웹사이트에 접속하여, 웹사이트에서 제공하는 정보의 열람 및 글쓰기 등을 할 수 있다.

도 2는 도 1에 도시된 반응형 웹사이트 빌더 시스템(30)의 개략적인 구성 블록도이다. 도 2를 참조하면, 반응형 웹사이트 빌더 시스템(30)은 프로세서(40), 통신부(50), 데이터 저장부(60) 및 사용자 인터페이스부(70)를 포함할 수 있다.

데이터 저장부(60)는 반응형 웹사이트 생성(제작) 서비스를 제공하기 위한 프로그램 및 데이터를 저장한다. 데이터 저장부(60)는 롬(ROM), 비휘발성 메모리, 하드디스크 장치 등 다양한 저장 매체를 포함할 수 있다.

프로세서(40)는 데이터 저장부(60)에 저장된 프로그램을 실행하여, 사용자 단말기(10)로, 반응형 웹사이트 생성(제작) 서비스를 제공할 수 있다. 프로세서(40)는 또한, 데이터 저장부(60)의 프로그램 및 데이터를 관리할 수 있다.

통신부(50)는 통신망(도 1의 20)을 통해 사용자 단말기(10)와 통신할 수 있다.

사용자 인터페이스부(70)는 사용자로부터 사용자 정보와 사용자 선택을 입력 받아 상기 사용자 정보와 상기 사용자 선택에 따라 사용자 입력 신호를 생성할 수 있다. 사용자는 시스템 관리자일 수 있으나, 이에 한정되는 것은 아니다.

사용자 인터페이스부(70)는 사용자 입력 신호를 프로세서(40)로 전송할 수 있다. 사용자 인터페이스부(70)는 키보드, 마우스, 터치 스크린 등 사용자의 입력을 센싱할 수 있는 장치로 구현될 수 있다.

사용자 인터페이스부(70)는 또한 영상 신호나 음향 신호를 출력할 수 있다.

도 3은 본 발명의 실시예에 따른 반응형 웹사이트 빌더 시스템의 기능 블록도이다. 도 4는 도 3에 도시된 테마 생성부(100)의 기능을 설명하기 위한 도면이다. 도 5는 도 3에 도시된 반응형 화면 작업 뷰어(130)의 화면의 일 실시예를 개략적으로 나타내는 도면이다.

도 3 내지 도 5를 참조하면, 반응형 웹사이트 빌더 시스템(30)은 사용자가 화면해상도에 따라 가변하는 반응형 웹사이트(예컨대, 홈페이지 등)를 편리하게 제작할 수 있도록 하는 시스템이다. 예컨대, 반응형 웹사이트 빌더 시스템(30)은 사용자가 웹사이트를 제작하기 위해 별도의 프로그램 코딩 없이, 반응형 웹사이트 빌더 시스템(30)에서 제공되는 사용자 인터페이스를 이용한 컬러테마 선택 및 레이아웃 설정 등을 통해 손쉽게 반응형 웹사이트를 제작할 수 있도록 한다.

반응형 웹사이트 빌더 시스템(30)에 포함된 각 구성들(100, 200, 300)은 하드웨어(hardware), 소프트웨어(software) 또는 이들의 조합으로 구현될 수 있다. 반응형 웹사이트 빌더 시스템(30)의 기능은 또한 도 2에 도시된 반응형 웹사이트 빌더 시스템(30)의 구성요소들을 이용하여 구현될 수 있다.

반응형 웹사이트 빌더 시스템(30)은 테마 생성부(100), 유저 편집부(200), 웹사이트 생성부(300)를 포함한다.

테마 생성부(100)는 기본 설정부(110), 해상도별 레이아웃 설정부(120), 반응형 화면 작업 뷰어(130), 및 테마 데이터베이스(140)를 포함한다.

기본 설정부(110)는 자바스크립트(js: javascript) 구동을 위한 계산 값 또는 프로그램 알고리즘을 포함한다. 기본 설정부(110)는 반응형(화면해상도)에 따른 적합한 기본 CSS(cascading　style　sheets) 세팅값을 생성 또는 설정한다.

CSS는 웹 문서의 전반적인 스타일을 미리 저장해둔 스타일시트를 의미한다. '반응형'이란 화면 해상도(혹은 화면 크기)에 적합하도록 웹사이트의 화면(혹은 페이지)가 자동으로 변경(혹은 재구성)되는 것을 의미할 수 있다.

해상도별 레이아웃 설정부(120)는 테마 개발자로 하여금 테마별 또는 해상도별로 레이아웃 설정값들을 설정할 수 있도록 한다.

예컨대, 해상도별 레이아웃 설정부(120)는 반응형 웹사이트 빌더 시스템(30)에 접속한 테마 개발자에게 레이아웃 설정값들을 설정할 수 있는 인터페이스를 제공하고, 사용자의 입력 또는 선택에 따라, 복수의 레이아웃 설정값들을 생성한다.

반응형 화면 작업 뷰어(130)는 해상도별 레이아웃 설정부(120)에 의해 설정된 복수의 레이아웃 설정값들에 따른 웹화면을 생성하여 디스플레이한다.

반응형 화면 작업 뷰어(130)는 복수의 해상도 중 선택된 해상도에 따라 웹화면을 생성할 수 있다. 실시예에 따라, 사용자의 편의를 위하여, 복수의 해상도는 PC, 태블릿, 단말기 가로, 및 단말기 세로로 구분될 수 있다.

도 5에 도시된 반응형 화면 작업 뷰어(130)의 화면(130a)을 참조하면, 반응형 화면 작업 뷰어(130)의 화면(130a)에는 PC, 태블릿, 단말기 가로, 및 단말기 세로를 선택할 수 있는 메뉴들(131, 132, 133, 134)이 도시될 수 있다.

테마 개발자 반응형 화면 작업 뷰어 화면(130a)에서 메뉴들(131, 132, 133, 134) 중 하나를 선택함으로써, 해상도를 선택할 수 있다.

예컨대, 테마 개발자가 PC(131)를 선택하면, 반응형 화면 작업 뷰어(130)는 설정된 복수의 레이아웃 설정값들에 따라 PC 화면에 맞는 웹화면을 생성하여 디스플레이할 수 있고, 단말기 세로(134)를 선택하면, 반응형 화면 작업 뷰어(130)는 설정된 복수의 레이아웃 설정값들에 따라 단말기 세로 화면(예컨대, 단말기를 세로로 배치했을 때 가로 해상도)에 맞는 웹화면을 생성하여 디스플레이할 수 있다. 만약, 단말기 가로(133)를 선택되면, 반응형 화면 작업 뷰어(130)는 설정된 복수의 레이아웃 설정값들에 따라 단말기 가로 화면(예컨대, 단말기를 가로로 배치했을 때 가로 해상도)에 맞는 웹화면을 생성하여 디스플레이할 수 있다.

따라서, 테마 개발자는 레이아웃 설정값들에 따른 웹화면을 확인하고, 필요시 레이아웃 설정값들을 변경할 수 있다.

테마 데이터베이스(140)는 해상도별 레이아웃 설정부(120)에 의해 설정된 복수의 레이아웃 설정값들을 저장한다. 실시예에 따라, 테마 데이터베이스(140)는 테마별로, 또한, 해상도별로 복수의 레이아웃 설정값들을 저장할 수 있다. 테마별 복수의 레이아웃 설정값을 테마 데이터 세트라 지칭할 수 있다.

상술한 바와 같이, 테마 생성부(100)는 테마별 혹은 해상도별 복수의 레이아웃 설정값들을 지정 또는 설정하는 기능을 수행한다.

실시예에 따라, 테마 생성부(100)는 메인 페이지와 서브페이지로 구분하여 레이아웃 구성값들을 지정하는 기능을 수행한다.

도 4를 참조하면, 메인 페이지(410)는 메인 페이지의 레이아웃을 구성하는 항목들(430: M1~M4)을 포함할 수 있고, 서브 페이지(420)는 서브 페이지의 레이아웃을 구성하는 항목들(440: S1~S4)을 포함할 수 있다.

예컨대, 구성 항목(430, 440)은 상단, 메뉴, 로고, 상단비주얼, 배너, 게시판 스타일, 갤러리 스타일, 입력폼 스타일, 하단 스타일, 내용영역 스타일 등으로 구분될 수 있다.

각 구성 항목은　하나 이상의 세부 항목을 포함할 수 있다.

예컨대, 메인 페이지의 구성 항목(M1)은 세부 항목들(450: M1-1, M1-2, M1-3)을 포함할 수 있다. 도시되지는 않았지만 메인 페이지의 다른 구성 항목(M2~M4) 이나 서브 페이지의 구성 항목들(S1~S4) 각각도 하나 이상의 세부 항목을 포함할 수 있다.

세부 항목은 해상도별로 나눌 수도 있고, 해상도와 무관하게 전체적으로 적용되는 항목도 있다.　

이 세부 항목에는 이를테면 컬러, 크기, 여백값 등을 포함하고, 경우에 따라 기본설정부(110)에 미리 구성된 적합한 세팅을 위한 알고리즘을 선택하는 방식도 있다.　

세부 항목은 크게 3가지 타입으로 구분될 수 있다. 예컨대, 세부 항목은 1) 컬러, 2) 모양 레이아웃, 3) 기 세팅된 알고리즘이 있을 수 있다.

컬러의 경우 일반적으로 고정된 값(예컨대, RGB값)으로 입력하며 '#AA33DD' 등과 같이 표현될 수 있다.

싱글컬러의 경우 1개의 RGB값을 입력하며, 그라데이션의 경우에는 2개 또는 3개의 값을 입력할 수 있다. 투명도의 경우에는 비율(예컨대, %)로 입력할 수 있다.　

모양 레이아웃의 경우, 사이트 레이아웃이 반응형에 영향을 받기 때문에 고정적인 크기의 경우에는 픽셀단위를 사용하고 유동적인 경우에는 %단위를 사용하여 입력할 수 있다.　

이를테면 픽셀의 경우 특정해상도에서 이미지나 라운드 글자 크기가 고정적이어야 할 경우 픽셀로 입력한다. 하지만 해상도에 맞도록 이미지의 크기를 유동적으로 표현하는 경우에는 비율(예컨대, %)로 입력한다. 그라데이션 포지션과, 컨텐츠를 구성하는 박스 또는 레이아웃의 크기 등이 유동적일 경우에도 비율(예컨대, %)로 입력할 수 있다.

기본 설정부(110)는 기 세팅된 알고리즘을 이용하여 복수의 레이아웃 설정값을 생성할 수 있다. 기 세팅된 알고리즘은 복잡한 셋팅 등을　최적화 하여 미리 구성해 놓은 그룹들로서 레이아웃 설정값으로 구성될 수도 있고 레이아웃 설정값을 생성하는 프로그램 등으로 구성될 수도 있다.

예를 들어,　해상도별 레이아웃 설정부(120)에서 유저 인터페이스를 통해 3단 배너 또는 4단 배너 등과 같이 일부 레이아웃에 대하여 선택할 수 있도록 하고, 테마 개발자나 사용자가 특정 레이아웃을 선택하면, 선택된 레이아웃에 해당하는 세부 레이아웃 설정값들은 기본 설정부(110)의 기 세팅된 알고리즘으로 생성될 수 있다. 이에 따라서, 테마 개발자나 사용자가 레이아웃 설정값들을 일일이 설정하거나 입력할 필요없이, 선택만으로 레이아웃 설정값들을 생성할 수 있다.

유저 편집부(200)는 사이트 메뉴 설정모듈(210), 테마선택 모듈(220), 레이아웃 설정모듈(230) 및 내용구성 모듈(240)을 포함한다.

유저 편집부(200)는 사용자로 하여금 테마 데이터베이스에 저장된 테마 데이터 세트에 기초하여, 사용자가 제작하려고 하는 웹사이트(이하, '타겟 웹사이트'라 함)의 사이트 메뉴(혹은 사이트 맵) 및 레이아웃을 편리하게 편집할 수 있도록 한다.

사이트 메뉴 설정모듈(210)은 사용자가 타겟 홈페이지의 사이트 메뉴를 설정할 수 있도록 미리 정해진 유저 인터페이스를 제공하고, 사용자의 선택에 따라 사이트 메뉴 데이터를 생성하여 웹사이트 DB(310)에 저장할 수 있다.

도 6은 사이트 메뉴 설정모듈(210)이 제공하는 화면들의 일 실시예를 나타낸다.

사용자가 사이트 메뉴를 선택하면, 사이트 메뉴를 설정하기 위한 사이트 메뉴 템플릿들이 도시된다.

사이트 메뉴 템플릿은 계층적 구조(Hierarchical structure) 또는 트리 구조(tree structure)를 가질 수 있다.

사이트 메뉴 템플릿들은 최상위 계층의 템플릿 메뉴(이를 '주메뉴 템플릿'이라 함)와 각 주메뉴의 하위에 추가될 수 있는 하나 이상의 서브 메뉴 템플릿을 포함할 수 있다.

예컨대, 사이트 메뉴가 선택되면, 복수(2 이상)의 주메뉴 템플릿들이 도시된다.

일 실시예에서, 8개의 주메뉴 템플릿들이 제공될 수 있다.

시용자는 필요한 만큼의 주메뉴 템플릿을 선택하여, 사용여부 및 주 메뉴명을 설정할 수 있다. 예컨대, 사용자는 제1 주메뉴를 선택하여 '사용'으로 설정하고, 메뉴명을 '회사소개'로 설정할 수 있다. 예컨대, 사용자는 제2 주메뉴를 선택하여 '사용'으로 설정하고, 메뉴명을 '게시판'으로 설정할 수 있다.

이와 같이, 사이트 메뉴 설정모듈(210)은 타겟 웹사이트의 사이트 메뉴를 설정하기 위한 다양한 템플릿을 제공하고, 사용자의 선택에 따라 하나 이상의 주 메뉴 및 서브 메뉴가 설정될 수 있도록 한다.

각 주메뉴의 하단에는 서브 메뉴를 추가할 수 있는 UI(사용자 인터페이스, 예컨대, 버튼)가 제공될 수 있다. 사용자는 '추가' 버튼을 클릭하여, 서브 메뉴명을 설정하고, 해당 서브메뉴의 기능을 미리 설정된 기능들 중 하나로 설정할 수 있다. 예컨대, 미리 설정된 기능은 일반 페이지, 일반 게시판, 갤러리 게시판, 상담 예약 페이지, 약도 등일 수 있으나, 이에 한정되는 것은 아니다. 설정된 기능에 따라, 해당 서브 메뉴의 페이지 타입이나 양식이 달라질 수 있다.

예컨대, 사용자는 제1 주메뉴(회사소개)의 서브 메뉴로서, 대표자인사말, 오시는길을 추가하여 설정할 수 있다. 대표자인사말에 대해서는 기능을 일반 페이지로 설정하고, 오시는 길에 대해서는 약도로 설정할 수 있다.

이와 같이, 사용자의 선택에 따라 하나 이상의 서브메뉴가 설정될 수 있다. 또한 각 서브 메뉴에 대하여 사용 여부를 설정할 수 있다.

각 주메뉴와 각 서브 메뉴에 대한 설정이 완료되면, 사이트 메뉴에 대한 설정은 완료될 수 있다.

사이트 메뉴 설정이 완료되면, 테마 설정 단계가 수행될 수 있다.

테마 설정은 테마선택모듈(220)에 의해 수행될 수 있다.

테마선택모듈(220)은 테마생성부(100)에서 기 셋팅된 복수의 테마 데이터 세트들 중 하나를 선택하고, 선택된 테마 데이터 세트를 사이트 생성부의 웹사이트 DB로 업데이트 한다. 예컨대, 테마선택모듈(220)은 선택된 테마 데이터 세트를 사용자 웹사이트 데이터 세트로서 웹사이트 DB에 저장할 수 있다.

테마 설정을 위하여, 홈페이지 빌더 시스템(10)에 의하여 컬러테마 설정 메뉴가 제공될 수 있다. 컬러테마 설정 메뉴는 사용자가 타겟 홈페이지의 컬러테마를 설정할 수 있도록 제공되는 메뉴이다.

컬러테마는 홈페이지의 메인 페이지 및 서브 패이지의 컬러, 여백, 배경, 레이아웃, 모서리 타입 등을 의미한다.

컬러 테마 메뉴를 선택하면, 복수의 템플릿 컬러들 중 하나를 선택할 수 있는 메뉴가 제공될 수 있다.

예컨대, 복수의 템플릿 컬러들은 레드, 오렌지, 브라운, 옐로우, 그린, 블루, 퍼플, 핑크 및 흑백을 포함할 수 있으나, 이에 한정되는 것은 아니다.

또한 사용자는 컬러 테마 설정 메뉴를 통해, 싱글 컬러, 그라데이션 여부, 그라데이션 정도, 투명도 등을 확인하고 적합한 테마(컬러 테마)를 선택할 수 있다.

레이아웃 설정모듈(230)은 웹사이트 DB(310)로부터 사용자 웹사이트 데이터 세트를 불러와 편집하고 다시 변경 사항 및 추가된 내용을 웹사이트 DB(310)로 업데이트 한다.　

사용자는 레이아웃 설정 메뉴를 통해 타겟 웹사이트의 레이아웃을 설정할 수 있다.

레이아웃 설정은 메인 페이지별, 서브 페이지별로 이루어질 수 있다.

먼저, 메인 페이지의 레이아웃이 설정될 수 있다.

레이아웃은 상단 메뉴의 크기, 주 메뉴의 크기, 위치, 서브 메뉴의 스타일(하단으로 정렬, 좌우로 정렬, 비주얼의 크기, 풀 화면, 일부 화면, 배너의 위치 등) 등을 포함할 수 있다.

사용자는 레이아웃 설정모듈(230)에서 제공하는 사용자 인터페이스를 이용하여 기본으로 설정된 레이아웃(또는 기본으로 설정된 레이아웃에 따른 설정값들)을 사용할 수도 있고, 일부를 변경하여 사용할 수도 있다.

내용구성 모듈(240) 역시 레이아웃 설정모듈(230)과 유사하게 웹사이트 DB(310)로부터 사용자 웹사이트 데이터 세트를 불러와 편집하고 다시 변경 사항 및 추가된 내용을 웹사이트 DB(310)로 업데이트 한다.

사이트 생성부(300)는 웹사이트 DB(310), 반응형 (해상도별) CSS파일 생성기(320) 및 반응형 유저 인터페이스 모듈(330)을 포함한다.

반응형 CSS파일 생성기(320)는 웹사이트 DB(310)에 저장되어 있는 사용자 웹사이트 데이터 세트의 레이아웃 세팅값과 테마 생성부(100)의 기본 설정부(110)의 기본 CSS 세팅값을 불러와 반응형 유저 인터페이스 모듈(330)에 반응형 사용자 웹사이트 CSS파일을 생성한다. 따라서 이 파일(사용자 웹사이트 CSS파일)은 각 도메인별(즉, 웹사이트별)로 다르게 생성된다.　

반응형 유저 인터페이스 모듈(330)은 크게 4가지의 서브 모듈을 포함한다.

예컨대, 반응형 유저 인터페이스 모듈(330)은 JS 모듈(331), html 모듈(333), css 모듈(335), 및 웹프로그램 모듈(337)을 포함한다. 웹 프로그램 모듈(337)은 웹 프로그램을 구동한다. 웹 프로그램의 예로는 php, asp, jsp 등 웹에서 구동되는 DB 연동 가능한 프로그램이 있다.

반응형 유저 인터페이스 모듈(330)은 반응형 CSS파일 생성기(320)에 의해 기 생성된 CSS파일과 웹사이트DB(310)의 컨텐츠 정보 및 CSS파일로 정리되지 않은 기타 레이아웃을 구성하는 값 또는 코드(HTML의 Inline 방식)를 불러오고 기본설정부(110)에 기세팅되어 있는 js(Javascript)관련 알고리즘을 불러와 사용자가　웹브라우저로 볼 수 있는 실제 반응형　웹사이트를 생성한다.

또한 사용자가 해당 사이트에 지정되어 있는 URL 방식으로 접속할 수 있도록 하며 접속 후 화면에서 웹의 각종 폼(input, select, textarea 등) 의 기능을 사용하여 사용자가 입력한 정보를 웹사이트DB(310)로 업데이트 하는 역할도 수행한다.

도 6 내지 도 17은 본 발명의 실시예에 따른 반응형 웹사이트 빌더 시스템(30)이 유저 인터페이스를 위해서 제공하는 페이지들(혹은 화면들)의 실시예를 도시한다. 예컨대, 도 6 내지 도 17은 반응형 웹사이트 빌더 시스템(30)의 유저 편집부(200)가 제공하는 유저 인터페이스 화면들일 수 있다.

사이트 메뉴 설정모듈(210)은 도 6 및 도 7에 도시된 바와 같은 사이트 메뉴 편집 화면을 제공할 수 있다. 사이트 메뉴 편집 화면은 사이트의 주메뉴와 서브 메뉴를 제공할 수 있다.

도 6에 도시된 실시예에 따르면, 사용자는 사이트메뉴 편집 화면에서, 잠금(①)을 해제한 후에 사이트메뉴를 편집할 수 있다. ②는 사이트의 주메뉴로서, 사용자는 주메뉴를 클릭하여 메뉴명을 수정할 수 있다. ③은 사이트의 서브메뉴이고, 서브메뉴는 주메뉴 밑에 속하는 메뉴로서, 사용자는 서브메뉴를 클릭하여 메뉴명을 수정할 수 있다. 사용자는 아이콘 클릭 후 드래그 앤 드롭으로 메뉴의 위치를 변경할 수도 있다.

도 6의 실시예에서는, 주메뉴는 최대 8개까지 만들 수 있도록 제공되나, 이에 한정되는 것은 아니다. 특정색(예컨대, 회색)으로 표시된 메뉴는 현재 사용하지 않는 메뉴(예컨대, 비활성화된 메뉴)일 수 있다. 사용자는 비활성화된 메뉴를 클릭하여 '사용'을 눌러 메뉴를 활성화 할 수 있다.

도 7의 실시예에서, 사용자는 수정할 주메뉴(②)를 선택할 수 있다. 수정할 주메뉴(②)를 선택하면 오른쪽에 편집창이 나타나며, 메뉴명(③)을 수정할 수 있다. 사용자가 '사용'(④)에 체크를 해제하면 주메뉴가 비활성화될 수 있다. 주메뉴를 수정한 후 '확인' 버튼(⑥)을 누르면 수정이 완료된다.

사이트 메뉴 편집 화면에 '컬러테마' 버튼(⑦)이 제공될 수 있고, 사용자가 '컬러테마' 버튼(⑦)을 클릭하면 컬러테마를 선택하는 페이지로 이동할 수 있다. 사용자는 주메뉴와 유사한 방식으로 서브 메뉴에 대하여 메뉴명 입력, 수정, 위치 변경, 서브메뉴의 기능을 지정할 수 있다.

서브메뉴의 기능은 이를테면 일반페이지, 일반게시판, 갤러리게시판, 문의상담(입력폼), 오시는길(지도) 등과 같이 사이트를 구성하는 기능별 컨텐츠를 의미한다.

테마선택모듈(220)은 도 8에 도시된 바와 같은 컬러테마 설정 화면을 제공할 수 있다. 컬러테마 설정 화면은 웹사이트의 컬러테마를 선택하는 페이지로서, 사용자는 미리 설정된 복수의 컬러 배색들(도 8의 ①) 중에서 원하는 컬러 배색을 선택할 수 있다. 컬러테마 설정 화면은 사용자가 복수의 테마에 대한 소개 및 예시 이미지(도 8의 ②)를 제공할 수 있다.

레이아웃 설정모듈(230)은 도 9에 도시된 바와 같은 메인 페이지 레이아웃 편집 화면을 제공할 수 있다.

메인 페이지 레이아웃 편집 화면은 사용자가 제작하는 타겟 웹사이트의 메인 페이지의 전체 레이아웃 모양을 단순화하여 알기 쉽게 확인하고 편집할 수 있도록 제공되는 페이지이다.

메인 페이지의 레이아웃은 도 9의 왼쪽에 보이는 이미지처럼 상단, 비주얼, 배너, 게시판, SNS, 동영상, 갤러리, 쇼핑몰, 하단 등으로 구성될 수 있으며 항목은 더 추가될 수 있다. 모든 항목은 순서를 변경할 수 있으나 일부항목(예컨대, 상단과 비주얼을 제외한 다른 항목)만 순서를 변경할 수 있도록 인터페이스를 구성할 수 도 있으며, 각 항목을 누르면 편집 팝업창이 나타날 수 있다.

메인 페이지 레이아웃 편집 화면은 서브페이지 레이아웃 편집 화면으로 이동할 수 있는 메뉴(①), 각 항목별 레이아웃 수정후 저장된 내용을 미리 확인할 수 있는 메뉴(②), 전체항목 또는 사용항목 보기 메뉴(③) 등을 제공할 수 있다. 일부 항목은 사용하지 않으면 꺼둘 수 있다.

메인 페이지 레이아웃 편집 화면은 또한, 현재 선택된 컬러테마를 확인할 수 있는 메뉴(④), 콘텐츠 영역(내용 영역과 내용 밖의 여백을 구분하기 위한 그림자 처리 등)을 구분하기 위한 메뉴(⑤), 콘텐츠영역 바깥 부분(예컨대, 여백)의 색상을 선택할 수 있는 메뉴(⑥) 등을 제공할 수 있다.

도 10은 메인페이지 레이아웃에서 상단 항목(로고와 메뉴 부분)을 편집하는 팝업창의 일 예를 도시한다. 도 9의 메인 페이지 레이아웃 편집 화면에서 상단 항목을 누르면 도 10과 같은 상단 항목 편집 팝업창이 나타날 수 있다. 사용자는 상단 항목 편집 팝업창에서 상단의 레이아웃-예컨대, 배경색 범위, 로고와 주메뉴 정렬 방식, 주메뉴 라운드 크기, 서브메뉴 정렬 방식, 서브메뉴바 길이, 상단고정 여부 등-을 설정한 후 '저장' 버튼(①)을 누르면 변경할 내용이 웹사이트 DB(330)에 저장되고 팝업창이 닫힌다.

도 10의 팝업창의 하단의 동기화를 하면 웹사이트 DB(330)에 서비스 가능 테이블로 업데이트되어 실제 사용자의 웹사이트에 적용된다.

도 11은 메인 페이지 레이아웃에서 비주얼 항목을 편집하는 팝업창의 일 예를 도시한다. 도 9의 메인 페이지 레이아웃 편집 화면에서 비주얼 항목을 누르면 도 11과 같은 비주얼 항목 편집 팝업창(①)이 나타날 수 있다.

사용자는 비주얼 항목 편집 팝업창에서 비주얼의 레이아웃-예컨대, 영역 범위, 비주얼 크기, 비주얼 변환 방식, 변환 화살표 색 등-을 설정한 후 '저장' 버튼(②)을 누르면 변경할 내용이 저장되고 팝업창이 닫힌다.

도 12는 메인 페이지 레이아웃에서 배너를 편집하는 팝업창의 일 예를 도시한다. 도 9의 메인 페이지 레이아웃 편집 화면에서 배너 항목를 누르면 도 12와 같은 배너 항목 편집 팝업창이 나타날 수 있다.

사용자는 배너 항목 편집 팝업창에서 배너의 레이아웃-예컨대, 사용여부, 단 수, 이미지 비율, 텍스트 박스 위치 색 등-을 설정한 후 '저장' 버튼을 누르면 변경할 내용이 저장되고 팝업창이 닫힌다.

도 13은 메인 페이지 레이아웃에서 하단 항목을 편집하는 팝업창의 일 예를 도시한다. 도 9의 메인 페이지 레이아웃 편집 화면에서 하단 항목을 누르면 도 13과 같은 하단 항목 편집 팝업창이 나타날 수 있다.

하단 항목 편집 팝업창은 메인페이지 레이아웃에서 하단 부분을 편집하기 위한 유저 인터페이스이다.

사용자는 하단 항목 편집 팝업창에서 하단의 레이아웃-예컨대, 배경색 범위, 형태, 사용여부 등-을 설정한 후 '저장' 버튼을 누르면 변경할 내용이 저장되고 팝업창이 닫힌다.

상술한 바와 같이, 본 발명의 실시예에 따르면, 사용자는 메인 페이지 레이아웃 편집 화면에서의 메인 페이지의 각 레이아웃 요소들에 대한 선택만으로도 메인 페이지의 레이아웃을 원하는 레이아웃으로 설정할 수 있다. 이와 같이, 설정된 레이아웃 설정값들은 사용자의 선택(예컨대, 저장 버튼의 입력 혹은 동기화 선택)에 따라, 웹사이트 DB(310)에 사용자 웹사이트 데이터 세트의 일부로서 저장될 수 있다.

도 9 내지 도 13을 참조하여, 메인 페이지 레이아웃 편집 화면을 중심으로 메인 페이지 레이아웃을 설정하는 실시예에 대하여 설명하였으나, 서브 페이지 레이아웃 편집 역시 메인 페이지 레이아웃 편집과 유사하게 이루어질 수 있다.

내용구성 모듈(240)은 도 14 내지 도 17에 도시된 바와 같은 내용(콘텐츠) 편집 화면을 제공할 수 있다. 내용(컨텐츠) 편집 화면은 사용자 웹사이트 콘텐츠의 내용을 편집하고 관리하기 위하여 제공되는 페이지이다.

도 14를 참조하면, 내용(콘텐츠) 편집 화면은 레이아웃 내용관리 메뉴(①) 및 메뉴별 내용관리 메뉴(②)를 제공할 수 있다

레이아웃 내용관리 메뉴(①)는 레이아웃 편집 화면에서 설정한 항목의 내용을 편집하는 페이지들이 모여있는 메뉴이고, 메뉴별 내용관리 메뉴(②)는 각 서브메뉴에 들어갈 내용들을 편집, 관리하는 페이지들이 모여있는 메뉴이다.

내용구성 모듈(240)은 도 15에 도시된 바와 같은 메인페이지 상단 항목의 내용(콘텐츠)을 편집하는 페이지를 제공할 수 있다.

내용구성 모듈(240)은 또한, 도 16에 도시된 바와 같은 메인페이지 비주얼 항목의 내용(콘텐츠)을 편집하는 페이지를 제공할 수 있다.

내용구성 모듈(240)은 또한, 도 17에 도시된 바와 같은 메인페이지 배너 항목의 내용(콘텐츠)을 편집하는 페이지를 제공할 수 있다.

도 15 내지 도 17의 실시예에서는 메인페이지의 레이아웃 요소들에 상응하는 콘텐츠를 편집 및 구성하는 예를 도시하나, 서브 페이지에 대해서도 유사하게 콘텐츠를 편집 및 구성할 수 있다.

메뉴별 내용관리 메뉴(②)는 사이트 메뉴 설정모듈(210)에서 설정한 서브메뉴의 각 기능의 기 구현되어 있는 인터페이스에 따라 컨텐츠를 입력하는 방식으로 구성된다. 예를 들어 일반 게시판의 경우 제목 항목과 내용항목의 컨텐츠를 입력하고, 파일업로드 기능을 통해 파일을 첨부하며, 사용여부, 오픈시간 설정, 메인페이지 노출 등의 부가 기능을 설정할 수 있다.　

상술한 바와 같이, 본 발명의 실시예에 따르면, 사용자는 레이아웃 설정모듈(230)에서 설정된 각 레이아웃 요소들에 상응하는 콘텐츠를, 내용구성 모듈(240)에서 편리하게 편집할 수 있다.

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

컴퓨터가 읽을 수 있는 기록매체의 예로는 ROM, RAM, Flash Memory, CD-ROM, 자기 테이프, 플로피 디스크, 광 데이터 저장장치 등이 있으며, 또한 본 발명에 따른 객체 정보 추정 방법을 수행하기 위한 프로그램 코드는 캐리어 웨이브(예를 들어, 인터넷을 통한 전송)의 형태로 전송될 수도 있다.

또한 컴퓨터가 읽을 수 있는 기록매체는 네트워크로 연결된 컴퓨터 시스템에 분산되어, 분산방식으로 컴퓨터가 읽을 수 있는 코드가 저장되고 실행될 수 있다. 그리고 본 발명을 구현하기 위한 기능적인(functional) 프로그램, 코드 및 코드 세그먼트들은 본 발명이 속하는 기술분야의 프로그래머들에 의해 용이하게 추론될 수 있다.

본 발명은 도면에 도시된 일 실시 예를 참고로 설명되었으나 이는 예시적인 것에 불과하며, 본 기술 분야의 통상의 지식을 가진자라면 이로부터 다양한 변형 및 균등한 타 실시 예가 가능하다는 점을 이해할 것이다. 따라서, 본 발명의 진정한 기술적 보호 범위는 첨부된 등록청구범위의 기술적 사상에 의해 정해져야 할 것이다.

사용자 단말기(10-1~10-k)
통신망(20)
반응형 사이트 빌더 시스템(30)
테마 생성부(100)
기본 설정부(110),
해상도별 레이아웃 설정부(120),
반응형 화면 작업 뷰어(130),
테마 데이터베이스(140)
유저 편집부(200)
사이트 생성부(300)

Claims (17)

1. 테마별 및 해상도별로 복수의 레이아웃 설정값들을 포함하는 복수의 테마 데이터 세트들을 생성하고, 생성된 상기 복수의 테마 데이터 세트들을 테마 데이터베이스에 저장하는 테마 생성부;
   사용자의 선택에 따라, 상기 복수의 테마 테이터 세트들 중 선택된 하나의 테마 데이터 세트에 기초하여 사용자 웹사이트 데이터 세트를 생성하는 사용자 편집부; 및
   상기 사용자 웹사이트 데이터 세트에 기초하여 사용자 웹 사이트를 생성하는 사이트 생성부를 포함하고,
   상기 테마 생성부는
   테마 개발자에게 해상도별 레이아웃 설정값들을 설정할 수 있는 인터페이스를 제공하고, 상기 테마 개발자의 입력 또는 선택에 따라, 해상도별 레이아웃 설정값들을 생성하는 해상도별 레이아웃 설정부;
   상기 해상도별 레이아웃 설정부에 의해 설정된 레이아웃 설정값들에 따른 웹화면을 생성하여 디스플레이하는 반응형 화면 작업 뷰어; 및
   상기 해상도별 레이아웃 설정부에 의해 최종 설정된 값을 저장하는 테마 DB를 포함하며,
   상기 반응형 화면 작업 뷰어는
   PC, 태블릿, 단말기 가로, 및 단말기 세로를 선택할 수 있는 메뉴들을 제공하고,
   상기 테마 개발자에 의해 선택된 메뉴에 따라, 상기 복수의 레이아웃 설정값들 중 선택된 메뉴의 해상도에 상응하는 레이아웃 설정값들에 따라 선택된 메뉴의 해상도에 맞는 웹화면을 생성하여 디스플레이하는 반응형 웹사이트 빌더 시스템.
2. 삭제
3. 삭제
4. 제1항에 있어서, 상기 복수의 레이아웃 설정값들은
   메인 페이지를 구성하는 복수의 메인 페이지 구성 항목들, 및 서브 페이지를 구성하는 복수의 서브 페이지 구성 항목들을 포함하고,
   상기 복수의 메인 페이지 구성 항목들 및 상기 서브 페이지 구성 항목들 각각은 하나 이상의 세부 항목 설정값을 포함하는 반응형 웹사이트 빌더 시스템.
5. 제4항에 있어서,
   상기 세부 항목 설정값은 해상도에 따라 가변될 필요가 없는 비반응형 설정값 및 해상도에 따라 가변될 필요가 있는 반응형 설정값 중 하나인 반응형 웹사이트 빌더 시스템.
6. 제4항에 있어서, 상기 메인 페이지 구성 항목들 및 상기 서브 페이지 구성 항목들 각각은
   상단, 메뉴, 로고, 상단비주얼, 배너, 게시판 스타일, 갤러리 스타일, 입력폼 스타일, 및 하단 스타일 중 적어도 하나를 포함하고,
   상기 세부 항목 설정값은
   컬러, 크기 및 여백값 중 적어도 하나를 포함하는 반응형 웹사이트 빌더 시스템.
7. 제1항에 있어서, 상기 사용자 편집부는
   주메뉴와 주메뉴의 하단에 서브 메뉴를 추가하고 해당 메뉴의 기능을 선택할 수 있는 사용자 인터페이스를 제공하는 사이트 메뉴 설정모듈; 및
   상기 테마 데이터베이스에 저장되어 있는 상기 복수의 테마 데이터 세트들 중 레이아웃의 컬러세트를 선택할 수 있도록 컬러테마 설정메뉴를 제공하는 테마선택 모듈;
   상기 테마 데이터베이스에 저장되어 있는 상기 복수의 테마 데이터 세트들 중 여백, 배경, 레이아웃 및 모서리 스타일의 셋트의 위치 및 세부 설정값을 변경할 수 있는 레이아웃 설정 모듈; 및
   상기 사이트 메뉴 설정모듈에 의해 선택된 메뉴별 기능에 따라 유저가 추가 내용을 등록할 수 있는 내용구성모듈을 포함하는 반응형 웹사이트 빌더 시스템.
8. 제7항에 있어서, 상기 컬러 테마는
   상기 테마생성부에서 설정한 레이아웃의 싱글 컬러, 그라데이션 여부, 그라데이션 정도, 또는 투명도가 설정되어 있는 값들의 특정 세트를 의미하고,
   상기 컬러테마 설정 메뉴는 상기 사용자가 상기 컬러 테마를 선택할 수 있도록 하는 사용자 인터페이스를 제공하는 반응형 웹사이트 빌더 시스템.
9. 제7항에 있어서,
   상기 사용자 웹사이트 데이터 및 유저 편집부에서 설정한 설정값을 저장하는 웹사이트 데이터 베이스를 더 포함하고,
   상기 사용자 편집부는
   상기 웹사이트 데이터 베이스로부터 상기 사용자 웹사이트 데이터 세트 및 기능별로 등록한 내용을 불러와 편집하고 변경사항 및 추가 내용을 상기 웹사이트 데이터 베이스로 업데이트하는 반응형 웹사이트 빌더 시스템.
10. 제1항에 있어서, 상기 사이트 생성부는
    상기 사용자 웹사이트 데이터 세트를 저장하고 사용자 편집부에서 설정한 값을 저장하는 웹사이트 데이터베이스;
    상기 웹사이트 데이터베이스에 저장된 상기 사용자 웹사이트 데이터 세트 중 제1 레이아웃 설정값들에 기초하여 해상도별 CSS(cascading　style　sheets) 파일을 생성하는 CSS 파일 생성기; 및
    상기 CSS 파일 및 상기 사용자 웹사이트 데이터 세트 중 제2 레이아웃 설정값들과 컨텐츠에 기초하여, 사용자 웹 사이트를 생성하는 반응형 유저 인터페이스 모듈을 포함하는 반응형 웹사이트 빌더 시스템.
11. 테마별 및 해상도별로 복수의 레이아웃 설정값들을 포함하는 복수의 테마 데이터 세트들을 생성하는 단계;
    상기 복수의 테마 테이터 세트들 중 선택된 하나의 테마 데이터 세트에 기초하여 사용자 웹사이트 데이터 세트를 생성하는 단계; 및
    상기 사용자 웹사이트 데이터 세트에 기초하여 사용자 웹 사이트를 생성하는 단계를 포함하고,
    상기 테마 데이터 세트들을 생성하는 단계는
    테마 개발자에게 해상도별 레이아웃 설정값들을 설정할 수 있는 인터페이스를 제공하고, 상기 테마 개발자의 입력 또는 선택에 따라, 해상도별 레이아웃 설정값들을 생성하는 단계;
    상기 해상도별 레이아웃 설정값들을 생성하는 단계에서 설정된 레이아웃 설정값들에 따른 웹화면을 생성하여 반응형 화면 작업 뷰어의 화면에 디스플레이하는 단계; 및
    상기 해상도별 레이아웃 설정값들을 생성하는 단계에서 설정된 값을 테마 DB에 저장하는 단계를 포함하며,
    상기 반응형 화면 작업 뷰어는
    PC, 태블릿, 단말기 가로, 및 단말기 세로를 선택할 수 있는 메뉴들을 제공하고,
    상기 테마 개발자에 의해 선택된 메뉴에 따라, 상기 복수의 레이아웃 설정값들 중 선택된 메뉴의 해상도에 상응하는 레이아웃 설정값들에 따라 선택된 메뉴의 해상도에 맞는 웹화면을 생성하여 디스플레이하는 반응형 웹사이트 제작 방법.
12. 제11항에 있어서, 상기 사용자 웹사이트 데이터 세트를 생성하는 단계는
    상기 사용자 웹사이트의 사이트 메뉴를 설정할 수 있는 사이트 메뉴 템플릿들을 제공하고, 사용자의 선택에 따라 하나 이상의 주 메뉴 및 서브 메뉴를 설정하는 단계; 및
    상기 사용자 웹사이트의 컬러테마를 설정하기 위한 컬러테마 설정 화면을 제공하고, 사용자의 선택에 따라 상기 사용자 웹사이트의 컬러테마를 설정하는 단계를 포함하는 반응형 웹사이트 제작 방법.
13. 제12항에 있어서, 상기 주 메뉴 및 서브 메뉴를 설정하는 단계는
    복수(2 이상)의 주메뉴 템플릿들을 제공하는 단계;
    상기 사용자의 선택에 따라, 상기 복수의 주메뉴 템플릿들 중 적어도 하나의 주메뉴를 활성화하는 단계;
    상기 활성화된 주메뉴의 주메뉴명이 설정되는 단계;
    상기 주메뉴의 하단에 상기 서브 메뉴 및 상기 서브메뉴의 서브메뉴명을 설정하는 단계; 및
    상기 서브메뉴를 미리 설정된 기능들 중 하나로 설정하는 단계를 포함하고,
    상기 서브 메뉴의 설정된 기능에 따라 상기 서브 메뉴의 페이지 타입 또는 양식이 달라지는 것을 특징으로 하는 반응형 웹사이트 제작 방법.
14. 제12항에 있어서, 상기 사용자 웹사이트의 컬러테마를 설정하는 단계는
    상기 사용자 웹사이트의 메인 페이지 및 서브 페이지의 컬러, 여백, 및 배경 중 적어도 하나를 선택할 수 있는 메뉴를 제공하는 단계; 및
    상기 사용자가 테마설정부에서 미리 설정한 싱글 컬러, 그라데이션 여부, 그라데이션 정도, 또는 투명도에 따라 등록되어 있는 컬러 세트를 선택할 수 있도록 하는 메뉴를 제공하는 단계를 포함하는 반응형 웹사이트 제작 방법.
15. 제14항에 있어서, 상기 사용자 웹사이트 데이터 세트를 생성하는 단계는
    상기 메인 페이지의 레이아웃을 편집하고, 메인 페이지 레이아웃의 구성 항목의 순서를 변경할 수 있는 메인 페이지 레이아웃 편집 화면를 제공하는 단계를 포함하고,
    상기 메인 페이지 레이아웃의 구성 항목은
    상단;
    비주얼, 배너, 게시판, 갤러리, 및 동영상을 포함하는 컨텐츠 박스; 및
    하단을 포함하는 반응형 웹사이트 제작 방법.
16. 제15항에 있어서, 상기 사용자 웹사이트 데이터 세트를 생성하는 단계는
    상기 사용자 웹사이트의 콘텐츠의 내용을 편집하기 위한 콘텐츠 편집 화면을 제공하는 단계를 더 포함하고,
    상기 콘텐츠 편집 화면은 레이아웃 내용관리 메뉴 및 메뉴별 내용관리 메뉴를 포함하는 반응형 웹사이트 제작 방법.
17. 제11항에 있어서, 상기 사용자 웹 사이트를 생성하는 단계는
    웹사이트 데이터베이스에 저장된 상기 사용자 웹사이트 데이터 세트 중 제1 레이아웃 설정값들에 기초하여 해상도별 CSS(cascading　style　sheets) 파일을 생성하는 단계; 및
    상기 CSS 파일 및 상기 사용자 웹사이트 데이터 세트 중 제2 레이아웃 설정값들과 컨텐츠에 기초하여, 상기 사용자 웹 사이트를 생성하는 단계를 포함하는 반응형 웹사이트 제작 방법.

Images