KR20220140952A - 웹 상에서 구현되는 홈페이지 제작방법 - Google Patents

Abstract

본 발명은 웹 상에서 마우스의 드래그 또는 클릭으로 홈페이지를 디자인할 수 있도록 구성되어, 홈페이지 제작에 들어가는 사용자의 불필요한 노력과 비용을 혁신적으로 줄이고, 사용자가 원하는 모습 그대로 아름답고 유려한 홈페이지를 손쉽게 제작할 수 있는 홈페이지 제작방법에 관한 것이다. 이를 위하여 웹 제작 서버에 의해 수행되는 홈페이지 제작방법에 있어서, 사용자에 의해 업로드된 콘텐츠를 수신 및 저장하는 제1단계; 사용자에 의해 제작되는 홈페이지의 배경 및 배경의 적어도 일부를 점유하고 콘텐츠가 삽입되는 프레임인 레이아웃 중 적어도 하나를 포함하는 디자인 정보를 수신하는 제2단계; 업로드된 콘텐츠 중 사용자에 의해 선택되는 콘텐츠를 레이아웃에 배치하고, 콘텐츠가 배치된 홈페이지를 인터넷 웹 상에서 온라인으로 운영하는 제3단계; 및 특정 단말기에서만 홈페이지에 접속할 수 있도록, 특정 단말기에만 접속 권한을 부여하는 제4단계;를 포함하고, 제4단계는 홈페이지의 접속에 비밀번호를 설정하는 모드 및 비밀번호 없이 접속이 허용되는 별도의 홈페이지 주소를 설정하는 모드 중 적어도 하나의 모드를 포함하며, 콘텐츠는, 이미지, 텍스트 및 동영상 중 적어도 하나를 포함하는 것을 특징으로 하는 홈페이지 제작방법을 제공한다. 이에 따르면 사용자는 단 한 줄의 프로그래밍 코드도 필요 없이, 오직 마우스만으로 홈페이지를 디자인하고 수정할 수 있는 효과가 발생된다.

Description

웹 상에서 구현되는 홈페이지 제작방법{Method for making homepage on the world wide web therefor}

본 발명은 웹 상에서 사용자 고유의 디자인으로 손쉽게 홈페이지를 제작하기 위한 방법에 관한 것으로, 보다 상세하게는 웹 상에서 마우스의 드래그 또는 클릭으로 홈페이지를 디자인할 수 있도록 구성되어, 홈페이지 제작에 들어가는 사용자의 불필요한 노력과 비용을 혁신적으로 줄이고, 사용자가 원하는 모습 그대로 아름답고 유려한 홈페이지를 손쉽게 제작할 수 있는 홈페이지 제작방법에 관한 것이다.

인터넷에서 홈페이지는 하이퍼텍스트 등으로 표현된다. 그런데, 이 하이퍼텍스트는 HTML이라는 언어로 작성되기 때문에 홈페이지를 제작하기 위해서는 반드시 HTML을 알아야 하는 것으로 인식되고 있었다. 그러나 나모 웹에디터와 같은 에디터(editor) 프로그램이 개발되면서 사용자들이 HTML을 전혀 모르더라도 홈페이지를 제작할 수 있는 환경이 조성되었다.

10-0770799 10-1091773

그러나 이러한 에디터 프로그램에 의해서 제작된 홈페이지를 웹 상에 공유하기 위해서는 서버 호스팅, 네트워크 트래픽, 각종 하드웨어 설정과 같은 복잡한 내용에 대한 지식이 요구되었다. 결국 사용자는 에디터 프로그램을 이용하여 홈페이지를 제작하여도 데스크탑, 노트북 등의 단말기에 저장할 수 있을 뿐, 이를 월드 와이드 웹(world wide web) 상에 올리기 위해서는 복잡한 과정을 거쳐야하는 문제점이 있었다.

이러한 문제점들 때문에 사용자는 홈페이지의 제작을 전문 홈페이지 제작 기관에 의뢰할 수밖에 없는 것이 현실이다. 하지만, 홈페이지의 제작을 전문 홈페이지 제작 기관에 의뢰하게 되는 경우, 경제적으로 불리한 문제, 사용자가 의도한바와 다른 방향으로 홈페이지가 제작되는 문제, 홈페이지가 웹 상에 개시된 이후에 홈페이지를 수정하려면 의뢰한 전문 홈페이지 제작 기관을 거쳐서 수정해야 하므로 별도로 비용을 부담해야하고 수정이 느려지는 문제, 홈페이지를 신속하고 간편하게 운영하기 어려운 문제, 도메인을 구입해야하므로 사용자가 원하는 기간에만 홈페이지를 이용할 수 없는 문제가 있었다.

본 발명은 이러한 문제점을 해결하기 위하여 창안된 것으로서, 본 발명의 목적은, 한 줄의 프로그래밍 코드도 필요없이 오직 마우스의 드래그와 드롭, 클릭만으로 사용자가 원하는 고유의 디자인을 손쉽게 홈페이지에 구현할 수 있고, 최신 웹 브라우저가 제공하는 거의 모든 디자인 효과(HTML5, CSS3, javascript 기반)를 별다른 지식 없이 구현할 수 있으며, 고유의 보관함을 제공함으로써 콘텐츠의 통합관리가 가능해지고, 사용하고 싶은 개인 도메인을 필요한 기간동안만 사용할 수 있게되며, 서버 호스팅, 네트워크 트래픽 이나 각종 하드웨어 설정 같은 복잡한 부분에 관해 사용자가 고민할 필요가 없도록 구성되는 홈페이지 제작방법을 제공하는 데에 있다.

이하 본 발명의 목적을 달성하기 위한 구체적 수단에 대하여 설명한다.

본 발명의 목적은, 웹 제작 서버에 의해 수행되는 홈페이지 제작방법에 있어서, 사용자에 의해 업로드된 콘텐츠를 수신하는 제1단계; 홈페이지 배경의 적어도 일부를 점유하고 상기 콘텐츠가 삽입되는 프레임인 복수개의 레이아웃에 대한 디자인 정보를 수신하는 제2단계; 상기 복수개의 레이아웃 중 적어도 하나에 삽입되는, 상기 사용자에 의해 선택된 상기 콘텐츠의 정보를 수신하는 제3단계; 및 상기 선택된 콘텐츠가 삽입된 상기 레이아웃을 포함하는 홈페이지를 인터넷 웹 상에서 온라인으로 운영하는 제4단계;를 포함하고, 상기 콘텐츠는 특정 이미지, 사용자의 입력에 의해 도안되는 도형, 사용자의 입력에 의해 작성되는 텍스트 및 특정 동영상 중 적어도 하나를 포함하며, 상기 디자인 정보는 위치, 크기, 형상 및 색상 중 적어도 하나를 포함하고, 상기 디자인 정보는 사용자가 설정할 수 있도록 구성되는 것을 특징으로 하는 홈페이지 제작방법을 제공하여 달성될 수 있다.

또한 상기 제4단계에서는, 특정 단말기에서만 상기 홈페이지에 접속할 수 있도록 상기 특정 단말기에만 접속 권한을 부여하고, 상기 제4단계는 상기 홈페이지의 접속에 비밀번호를 설정하는 모드 및 비밀 번호 없이 접속이 허용되는 별도의 홈페이지 주소를 설정하는 모드 중 적어도 하나의 모드를 포함하는 것을 특징으로 할 수 있다.

또한 제4단계 이후에, 상기 제1단계 내지 제4단계에 의해 제작된 홈페이지의 정보를 상기 사용자의 단말기에 송신하는 제5단계; 상기 사용자의 단말기에서 상기 레이아웃의 디자인 정보 및 상기 콘텐츠의 디자인 정보 중 적어도 하나가 수정되고, 수정된 상기 레이아웃의 디자인 정보 및 수정된 상기 콘텐츠의 디자인 정보를 수신하는 제6단계; 및 상기 디자인 정보가 수정된 상기 콘텐츠 및 상기 디자인 정보가 수정된 상기 레이아웃을 포함하는 홈페이지를 인터넷 웹 상에서 온라인으로 운영하는 제7단계;를 더 포함할 수 있다.

또한 상기 레이아웃에는 상기 사용자의 선택에 의해 메뉴 및 갤러리 중 적어도 하나를 배치하고, 상기 메뉴는, 클릭 시 사용자의 홈페이지 상에서 특정 페이지로 연결되는 구성을 의미하며, 상기 갤러리는, 사용자에 의해 업로드되는 복수개의 콘텐츠 중 적어도 하나를 포함하며 특정 배열로 배치되는 구성을 의미하고, 상기 갤러리에 배치된 상기 복수개의 콘텐츠 중 적어도 하나가 홈페이지 이용자에 의해 선택되는 경우, 상기 선택된 콘텐츠에 특정 시각 효과를 부여하여 디스플레이하는 것을 특징으로 할 수 있다.

또한 상기 특정 시각 효과는 확대, 반전, 색상 변화 및 이동 중 적어도 하나를 포함하는 것을 특징으로 할 수 있다.

또한 상기 사용자가 자판 없이도 상기 레이아웃 및 콘텐츠 중 적어도 하나의 디자인 정보를 설정할 수 있도록 구성되는 것을 특징으로 할 수 있다.

또한 상기 홈페이지는 HTML, CSS 및 javascript 중 적어도 하나를 기반으로 운영되는 것을 특징으로 할 수 있다.

또한 사용자가 설정하는 인터넷 주소를 통한 상기 홈페이지로의 접속을 허용하는 것을 특징으로 할 수 있다.

또한 상기 레이아웃에는, 상기 콘텐츠, 메뉴 및 갤러리 중 적어도 하나만 배치될 수 있고, 상기 메뉴는, 클릭 시 사용자의 홈페이지 상에서 특정 페이지로 연결되는 구성을 의미하며, 상기 갤러리는, 사용자에 의해 업로드되는 복수개의 콘텐츠 중 적어도 하나를 포함하며 특정 배열로 배치되는 구성을 의미하고, 상기 갤러리에 배치된 상기 복수개의 콘텐츠가 홈페이지 이용자에 의해 선택되는 경우, 상기 선택된 콘텐츠에 특정 시각 효과를 부여하여 디스플레이하는 것을 특징으로 할 수 있다.

상기한 바와 같이, 본 발명에 의하면 이하와 같은 효과가 있다.

첫째, 본 발명의 일실시예에 따르면 사용자는 단 한 줄의 프로그래밍 코드도 필요 없이, 오직 마우스만으로 홈페이지를 디자인하고 수정할 수 있는 효과가 있다. 스마트폰 또는 태블릿에서 구현되는 경우에는 손가락 또는 터치펜만을 이용할 수 있다.

둘째, 본 발명의 일실시예에 따르면 사용자는 웹 상에 흩어진 채로 관리하던 콘텐츠를 통합하여 하나의 데이터베이스에서 관리할 수 있는 효과가 있다.

셋째, 본 발명의 일실시예에 따르면 복잡한 설정없이 사용하고 싶은 개인 도메인을 손쉽게 설정하여 사용할 수 있는 효과가 있다.

넷째, 본 발명의 일실시예에 따르면 사용자가 서버 호스팅, 네트워크 트래픽이나 각종 하드웨어 설정과 같은 복잡한 부분을 고려할 필요 없는 효과가 있다.

다섯째, 본 발명의 일실시예에 따르면 사용자가 필요한 기간 동안만 도메인과 홈페이지를 이용할 수 있도록 구성되는 효과가 있다.

여섯째, 본 발명의 일실시예에 따르면 사용자에게 허락된 홈페이지 이용자만 홈페이지를 열람할 수 있는 비밀모드를 제공하는 효과가 있다.

일곱째, 본 발명의 일실시예에 따르면 디자인적인 홈페이지를 구성하기 위해서 필요한 최소한의 구성과 컴포넌트로 디자인 관리창이 구성되기 때문에, 사용자는 별도의 학습이 필요없고, 홈페이지 제작에 부담을 느끼지 않아서 홈페이지 제작상의 효율성이 향상되는 효과가 있다.

본 명세서에 첨부되는 다음의 도면들은 본 발명의 바람직한 실시예를 예시하는 것이며, 발명의 상세한 설명과 함께 본 발명의 기술사상을 더욱 이해시키는 역할을 하는 것이므로, 본 발명은 그러한 도면에 기재된 사항에만 한정되어 해석되어서는 아니 된다.
도 1은 본 발명의 일실시예에 따른 홈페이지 제작방법이 구현되는 홈페이지 제작 시스템을 도시한 모식도
도 2는 본 발명의 일실시예에 따른 홈페이지 제작방법을 도시한 흐름도
도 3은 본 발명의 일실시예에 따른 초기화면

이하 첨부된 도면을 참조하여 본 발명이 속하는 기술 분야에서 통상의 지식을 가진 자가 본 발명을 쉽게 실시할 수 있는 실시예를 상세히 설명한다. 다만, 본 발명의 바람직한 실시예에 대한 동작원리를 상세하게 설명함에 있어서 관련된 공지기능 또는 구성에 대한 구체적인 설명이 본 발명의 요지를 불필요하게 흐릴 수 있다고 판단되는 경우에는 그 상세한 설명을 생략한다.

또한, 도면 전체에 걸쳐 유사한 기능 및 작용을 하는 부분에 대해서는 동일한 도면 부호를 사용한다. 명세서 전체에서, 어떤 부분이 다른 부분과 연결되어 있다고 할 때, 이는 직접적으로 연결되어 있는 경우뿐만 아니라, 그 중간에 다른 소자를 사이에 두고, 간접적으로 연결되어 있는 경우도 포함한다. 또한, 어떤 구성요소를 포함한다는 것은 특별히 반대되는 기재가 없는 한 다른 구성요소를 제외하는 것이 아니라, 다른 구성요소를 더 포함할 수 있는 것을 의미한다.

홈페이지 제작 시스템

본 발명의 일실시예에 따른 홈페이지 제작 시스템은 사용자 단말기(3), 디자인 데이터베이스(12), 콘텐츠 데이터베이스(14) 및 설정 데이터베이스(16)를 포함하는 웹 제작 서버(10)와 홈페이지 이용자 단말기(5)가 통신망을 통해 연동 접속된 네트워크 환경을 포함할 수 있다. 사용자 단말기(3)에서 웹 제작 서버(10)에 접속하여, 웹 제작 서버(10)에 연결된 디자인 데이터베이스(12), 콘텐츠 데이터베이스(14), 및 설정 데이터베이스(16)를 이용하여 고유의 홈페이지를 제작한다. 제작된 홈페이지가 웹 제작 서버(10)에 의해 공개되도록 사용자가 설정하면, 홈페이지 이용자 단말기(5)에서 웹 제작 서버(10)에 접속하여 사용자가 제작한 홈페이지를 서핑할 수 있게 된다.

본 발명의 일실시예에 따른 웹 제작 서버(10)는 사용자의 홈페이지 제작 편의를 위하여 여러가지의 서비스를 제공한다. 본 발명의 일실시예에 따른 웹 제작 서버(10)에서 제공되는 홈페이지는 페이지, 레이아웃, 컴포넌트로 구성되고, 컴포넌트는 텍스트, 메뉴, 이미지, 동영상, 도형, 갤러리 등의 콘텐츠를 포함할 수 있다. 페이지는 사용자가 제작하는 홈페이지의 배경을 의미하고, 레이아웃은 페이지의 적어도 일부를 점유하고 콘텐츠가 삽입되는 프레임을 의미하며, 컴포넌트는 레이아웃에 삽입되는 콘텐츠를 의미할 수 있다. 컴포넌트 중 메뉴는 복수개의 페이지로 구성되는 홈페이지에서, 각 페이지에 대한 링크를 의미한다. 갤러리는 이미지, 도형 또는 동영상 등의 콘텐츠가 홈페이지 이용자에 의해 선택되는 경우, 선택된 콘텐츠를 디스플레이하도록 구성되는 컴포넌트를 의미한다.

첫 번째 서비스로 웹 제작 서버(10)는, 사용자가 단 한 줄의 프로그래밍 코드 없이, 오직 마우스만으로 홈페이지를 디자인할 수 있는 환경을 제공하게 된다. 터치스크린을 구비한 스마트폰 또는 태블릿의 경우에는 손가락 또는 터치펜만으로 홈페이지를 디자인할 수 있다. 기존의 오프라인의 단말기에서 구현되는 디자인 프로그램, 문서작성 프로그램의 제작 도구와 유사한 인터페이스가 웹 상에서 직접 구현되는 환경을 웹 제작 서버(10)에서 제공하여, 사용자가 추가적인 지식 없이 손쉽게 홈페이지를 제작할 수 있게 되는 효과가 발생된다.

두 번째 서비스로, 웹 제작 서버(10)에서 제공하는 환경에서 홈페이지가 제작되기 때문에, 사용자가 최신 웹 브라우저가 제공하는 거의 모든 디자인 효과(HTML5, CSS3, javascript 기반)를 지원하는 다양한 레이아웃을 이용할 수 있게 되는 환경을 제공하게 된다.

세 번째 서비스로, 웹 제작 서버(10)에서 제공하는 환경에서 홈페이지가 제작되기 때문에, 사용자가 도메인을 구입하지 않고서도 개인 도메인 주소를 설정하고 홈페이지와 연결될 수 있는 환경을 제공하게 된다.

네 번째 서비스로, 웹 제작 서버(10)에서 제공하는 환경에서 홈페이지가 제작되기 때문에, 사용자는 서버, 호스팅, 네트워크 트래픽 또는 각종 하드웨어 설정과 같은 복잡한 문제를 고려하지 않아도 되고, 별도의 설치나 업그레이드 없이 안정적으로 홈페이지를 운영할 수 있는 환경이 제공되게 된다.

다섯 번째 서비스로, 웹 제작 서버(10)에서 제공하는 환경에서 홈페이지가 제작되기 때문에, 사용자는 필요한 기간 동안만 웹 제작 서버(10)에 접속될 수 있도록 설정하는 것이 가능해지는 환경이 제공되게 된다. 기존에는 홈페이지를 운영하려면 도메인을 구입하여야 했기 때문에, 장기간 도메인 사용 계약을 맺거나, 도메인 주소를 구입하여야 하는 문제가 있었다.

여섯 번째 서비스로, 콘텐츠 데이터베이스(14)를 포함하는 웹 제작 서버(10)에서 제공하는 환경에서 홈페이지가 제작되기 때문에, 사용자는 웹 또는 단말기 상에 흩어져있는 사용자의 콘텐츠를 콘텐츠 데이터베이스(14)에 저장하여 통합관리할 수 있으며, 통합 관리된 콘텐츠를 이용하여 효과적으로 홈페이지에 적용할 수 있는 환경이 제공되게 된다. 기존에는 이러한 클라우딩 서비스가 별도로 이용되고 있었고, 따라서 홈페이지를 제작하기 위해 필요한 콘텐츠들이 여러 공간에 흩어진 채로 존재하게 되는 문제가 있었다.

홈페이지 제작방법

본 발명의 일실시예에 따른 홈페이지 제작방법은, 사용자 단말기(3), 디자인 데이터베이스(12), 콘텐츠 데이터베이스(14) 및 설정 데이터베이스(16)를 포함하는 웹 제작 서버(10)와 홈페이지 이용자 단말기(5)가 통신망을 통해 연동 접속된 네트워크 환경인 홈페이지 제작 시스템에서, 웹 제작 서버(10)에 의해 수행되는 홈페이지 제작방법으로서, 사용자 단말기(3)로부터 통신망을 통하여 사용자 계정 정보를 포함하는 접속요청을 수신하는 접속 단계, 및 사용자의 선택에 따라 디자인 관리모드, 콘텐츠 관리모드 또는 설정 관리모드로 진입하도록 접속을 허용하는 모드 선택 단계를 포함할 수 있다.

사용자 계정 정보는 사용자가 제작하고 수정한 홈페이지의 디자인 정보, 사용자가 업로드하고 수정한 콘텐츠 정보 및 사용자 정보와 홈페이지 정보를 포함하는 설정 정보를 포함할 수 있다.

디자인 정보는, 사용자가 제작하는 홈페이지의 배경인 페이지, 페이지의 적어도 일부를 점유하고 콘텐츠가 삽입되는 프레임인 레이아웃, 및 레이아웃과 페이지 중 적어도 하나에 삽입되는 컴포넌트 중 적어도 하나의 디자인 정보를 포함할 수 있다. 이러한 페이지, 레이아웃 및 컴포넌트의 디자인 정보는 위치, 크기, 형상 및 색상 중 적어도 하나를 포함할 수 있다. 또한 이와 더불어 콘텐츠의 내용, 보정 사항 등을 포함할 수 있다. 이러한 디자인 정보는 웹 제작 서버(10)에 연결된 디자인 데이터베이스(12)에 저장되고 관리되게 된다. 컴포넌트에는 텍스트, 이미지, 갤러리, 메뉴 등이 포함될 수 있다.

콘텐츠 정보는, 문서, 이미지 및 동영상 정보 중 적어도 하나를 포함하고, 웹 제작 서버(10)에 연결된 콘텐츠 데이터베이스(14)에 저장되고 관리되게 된다. 또한 태그 시스템을 지원하여 콘텐츠를 손쉽게 분류할 수 있도록 구성할 수 있다. 또한 비공개 설정, 휴지통 기능 등을 제공하여 사용자가 효과적으로 콘텐츠 노출과 보관을 관리할 수 있도록 구성할 수 있다. 또한 웹 제작 서버(10)가 사용자의 각종 SNS 계정과 연결되어 웹 상에 흩어진 사용자의 콘텐츠를 모두 수집할 수 있도록 구성될 수 있다. 사용자는 본 발명의 일실시예에 따른 홈페이지 제작 시스템에 의해, 사용자의 콘텐츠 정보를 콘텐츠 관리창에 HTML5 API 기반의 드래그 앤 드롭 방식으로 간편하게 업로드할 수 있는 환경을 제공받을 수 있다. 이러한 클라우딩 서비스가 홈페이지 제작 시스템에 포함됨으로써, 종래보다 효율적이고 신속하며 창의적인 홈페이지 제작이 가능하도록 하는 효과가 발생된다.

설정 정보는, 사용자 정보, 홈페이지 주소, 홈페이지 이름, 홈페이지 공개 여부, 비밀모드 여부 중 적어도 하나를 포함하고, 웹 제작 서버(10)에 연결된 설정 데이터베이스(16)에 저장되고 관리되게 된다. 사용자 정보는 사용자의 아이디, 비밀번호, 이메일 주소, 결제여부 및 내역, 사용기한 등을 포함할 수 있다. 홈페이지 주소는 사용자가 제작한 홈페이지의 웹 주소를 의미하고, 본 발명의 일실시예에 따른 홈페이지 제작 시스템은 사용자가 사용하고 싶은 개인 도메인을 손쉽게 설정하여 사용할 수 있도록 구성된다. 홈페이지 이름은 사용자가 제작한 홈페이지의 제목을 의미하며, 사용자가 사용하고 싶은 이름을 사용할 수 있다. 홈페이지 공개 여부는 사용자가 제작한 상기 홈페이지를 웹 상에 개시하였는지 여부를 의미하고, 본 발명의 일실시예에 따른 홈페이지 제작 시스템은 설정관리창 내에서 이를 수정할 수 있도록 구성된다. 비밀모드 여부는 사용자가 제작한 홈페이지에 비밀번호를 설정하거나, 새로운 주소를 부여하여 특정 이용자만 상기 홈페이지를 이용할 수 있도록 구성되는 비밀모드의 활성화 여부를 의미하고, 설정관리창 내에서 이를 수정할 수 있도록 구성된다.

도 2는 본 발명의 일실시예에 따른 홈페이지 제작방법을 도시한 흐름도이다. 도 2에 도시된 바와 같이, 사용자가 사용자 단말기(3)를 이용하여 웹 제작 서버(10)에 접속하게 되는 단계(S100), 사용자가 디자인 관리모드(S110), 콘텐츠 관리모드(S120) 또는 설정 관리모드(S130)을 선택하는 단계로 진행되게 된다. 디자인 관리모드(S110)는 레이아웃 설정(S111), 페이지 설정(S112) 및 컴포넌트 설정(S113)을 포함할 수 있다. 콘텐츠 관리모드(S120)는 메뉴(S121), 이미지(S122), 갤러리(S123) 및 텍스트(S124)의 설정을 포함할 수 있다. 또한 설정 관리모드(S130)는 사용자 설정(S131), 홈페이지 설정(S132), 공개여부 설정(S133) 및 비밀모드 설정(S134)를 포함할 수 있다.

이하에서는 이러한 홈페이지 제작방법에 따라 구현되는 홈페이지 제작 사이트의 일실시예을 통해 본 발명의 특징을 기술한다.

홈페이지 제작 사이트

초기화면

도 3은 본 발명의 일실시예에 따른 초기화면을 도시한 것이다. 도 3에 도시된 바와 같이, 초기화면(100)에는 사용자 정보(102), 홈페이지 정보(104), 디자인 관리모드(110), 콘텐츠 관리모드(120), 설정 관리모드(130)이 표시될 수 있다.

사용자 정보(102)에는 사용자의 이름, 사진 및 비밀번호 수정에 관한 링크(102a)가 표시될 수 있다. 또한 이메일 주소, 이메일 인증 여부, 관심분야(102b) 등이 표시될 수 있다. 또한 결제여부, 계정 종류, 사용 기한(102c) 등이 표시될 수 있다.

홈페이지 정보(104)에는 홈페이지 이름, 홈페이지 주소, 홈페이지 공개 여부, 비밀모드 여부 등이 표시될 수 있으며, 수정 버튼을 별도로 구비하여 수정 버튼 클릭 시 곧바로 설정 관리모드(130)에 진입되어 홈페이지 정보를 수정할 수 있도록 구성될 수 있다.

디자인 관리모드(110)는 홈페이지의 디자인을 제작, 수정 등의 작업을 하기 위한 모드로의 진입을 요청하는 버튼, 링크이다. 콘텐츠 관리모드(120)는 콘텐츠 데이터베이스(14)에 저장되는 콘텐츠를 분류, 업로드하고 삭제하는 등 관리하기 위한 모드로의 진입을 요청하는 버튼, 링크이다. 설정 관리모드(130)는 사용자 정보 및 홈페이지 정보 중 적어도 하나 이상을 생성, 수정하기 위한 모드로의 진입을 요청하는 버튼, 링크이다. 디자인 관리모드, 콘텐츠 관리모드 또는 설정 관리모드의 버튼을 클릭하면 각각의 모드로 진입하는 것이 허용된다. 이하에서는 각각의 모드로 진입한 후를 설명한다.

디자인 관리모드

본 발명의 일실시예에 따른 디자인 관리모드는, 통신망을 통하여 접속된 사용자 단말기로 디자인 관리창 정보를 전송하는 단계, 접속된 사용자 단말기의 디자인 관리창에 입력된 디자인 정보를 통신망을 통하여 수신하는 단계, 및 수신된 디자인 정보를 디자인 데이터베이스에 저장시키는 단계를 포함할 수 있다. 본 발명의 일실시예에 따른 디자인 관리창에서는, 사용자가 마우스의 드래그와 드롭, 또는 클릭 등으로 페이지, 레이아웃 및 컴포넌트 중 적어도 하나의 디자인 정보를 설정할 수 있도록 구성될 수 있다. 터치스크린을 구비한 스마트폰 또는 태블릿의 경우에는 손가락 또는 터치펜만으로 홈페이지를 디자인할 수 있다. 이에 의해 사용자는 프로그래밍 코드를 알지 못하더라도 손쉽게 사용자 고유의 디자인으로 구현되는 홈페이지를 제작할 수 있는 효과가 있다.

상기의 컴포넌트는 메뉴, 이미지, 동영상, 도형, 텍스트 및 갤러리 중 적어도 하나를 포함하고, 컴포넌트 중 메뉴는 클릭 시 사용자의 홈페이지 상에서 특정 페이지로 연결되는 구성을 의미하고, 이미지는 사용자 단말기(3) 또는 콘텐츠 데이터베이스(14)에 저장된 이미지 콘텐츠를 의미하며, 동영상은 사용자 단말기(3) 또는 콘텐츠 데이터베이스(14)에 저장된 동영상 콘텐츠와 유투브(youtube.com)와 같은 별도의 사이트에서 제공하는 API를 로드한 동영상 콘텐츠를 의미하고, 도형은 사용자가 직접 도안이 가능하도록 구성되는 도형 콘텐츠를 의미하며, 텍스트는 사용자가 직접 텍스트의 입력 및 수정이 가능한 프레임을 의미하고, 갤러리는 사용자 단말기(3) 또는 콘텐츠 데이터베이스(14)에 저장된 이미지 콘텐츠를 적어도 하나 포함하며 이미지 콘텐츠가 홈페이지 이용자에 의해 선택되는 경우, 선택된 이미지 콘텐츠를 사용자가 설정한 방식에 따라 디스플레이하는 구성을 의미할 수 있다.

본 발명의 일실시예에 따른 디자인 관리모드에 진입하게 되면, 디자인 관리창이 표시될 수 있다. 디자인 관리창(111)은 선택바(112), 작업바(114), 사이드바(116), 종료 버튼(118), 미리보기(119)를 포함할 수 있고, 작업 공간은 페이지(110a), 레이아웃(110b), 컴포넌트(110c)를 포함할 수 있다.

선택바(112)는 작업 공간의 구성요소를 선택할 수 있도록 구성되는 메뉴이고, 작업바(114)에는 선택바(112)에서 선택된 구성요소에 대한 작업요소가 곧바로 표시되게 된다. 선택바(112)에서는 기본적으로 레이아웃, 페이지, 컴포넌트를 선택할 수 있으며, 부가적으로 텍스트, 이미지, 동영상, 도형, 갤러리, 메뉴를 포함하는 컴포넌트에 대한 부가 선택 메뉴가 생성될 수 있다.

작업바(114)는 선택바(112)에서 선택된 구성요소에 따라 각기 다른 작업요소를 표시하도록 구성될 수 있다. 선택바(112)에서 레이아웃을 선택하는 경우에는 레이아웃의 형태를 선택할 수 있도록 작업바(114)에 3단 레이아웃 및 2단 레이아웃의 예시가 아이콘으로 표시될 수 있다. 작업바(114)에 표시된 레이아웃의 예시를 사용자가 클릭하여 손쉽게 레이아웃의 구성을 수정할 수 있다. 또한 작업공간에서 레이아웃의 프레임을 마우스의 드래그와 드롭을 이용하여 손쉽게 레이아웃의 크기를 늘리거나 줄일 수 있다. 터치스크린을 구비한 스마트폰 또는 태블릿의 경우에는 손가락 또는 터치펜으로 레이아웃의 크기를 수정할 수 있다.

선택바(112)에서 페이지를 선택하는 경우에는 페이지 폭, 페이지 여백, 페이지 배경 등을 설정할 수 있도록 작업바(114)에 각각의 설정을 위한 아이콘이 표시될 수 있다. 본 발명의 일실시예에 따르면 페이지의 여백은 px 단위로 설정할 수 있으며, 페이지의 배경으로 색상, 이미지 또는 플래쉬와 같은 동영상을 선택할 수 있고, 페이지의 배경을 전체 반복할지, 페이지의 폭에 맞출지 등을 선택할 수 있다.

선택바(112)에서 컴포넌트를 선택하는 경우에는 컴포넌트를 레이아웃에 삽입할 수 있도록 작업바(114)에 텍스트, 이미지, 동영상, 도형, 갤러리, 메뉴 등의 컴포넌트가 아이콘으로 표시될 수 있다. 작업바(114)에서 삽입할 컴포넌트의 아이콘을 선택하고, 삽입할 레이아웃을 선택하게 되면 선택된 레이아웃에 선택된 컴포넌트가 손쉽게 삽입되게 된다. 컴포넌트의 위치 및 크기는 마우스로 손쉽게 변경할 수 있다. 터치스크린을 구비한 스마트폰 또는 태블릿의 경우에는 손가락 또는 터치펜만으로 컴포넌트의 위치 및 크기를 수정할 수 있다. 본 발명의 일실시예에 따라 이미지를 삽입한 경우, 선택된 레이아웃에 이미지 창이 표시되게 된다. 표시된 이미지 창을 더블 클릭하는 경우, 이미지 등록창이 표시되게 된다. 이미지 등록창에서는 콘텐츠 데이터베이스(14)에 저장된 이미지도 삽입할 수 있고, 사용자 단말기(3)에 저장된 이미지도 업로드 할 수 있다. 사용자가 삽입할 이미지를 선택 또는 업로드하면 도 10에 도시된 바와 같이 이미지가 업로드 되게 된다. 도 10에 도시된 바와 같이 이미지의 위치, 크기를 마우스 또는 터치스크린에서 손가락 또는 터치펜으로 결정할 수 있도록 구성되어 사용자에게 손쉬운 홈페이지 제작 환경을 구현시켜준다.

컴포넌트에 대한 부가 선택 메뉴에 대하여, 각 컴포넌트를 더블 클릭하여 선택하게 되면, 각 컴포넌트의 구체적인 작업을 위한 메뉴가 작업바(114)에 표시될 수 있다. 레이아웃과 관련하여, 본 발명의 일실시예와 같이 작업 공간의 레이아웃을 선택하게 되면 선택바(112)에 '레이아웃 꾸미기'라는 부가 선택 메뉴가 표시되며, 작업바(114)에는 레이아웃에 대한 구체적인 작업을 위한 메뉴인 레이아웃 높이, 너비, 레이아웃 배경 설정 등이 표시되게 된다.

텍스트와 관련하여, 본 발명의 일실시예와 같이 작업 공간의 텍스트를 선택하게 되면 선택바(112)에 '텍스트 꾸미기'라는 부가 선택 메뉴가 표시되며, 작업바(114)에는 컴포넌트인 텍스트에 대한 구체적인 작업을 위한 메뉴인 글꼴 속성, 문단 속성, 색상, 음영, 하이퍼링크 등이 표시되게 된다.

메뉴와 관련하여, 본 발명의 일실시예와 같이 작업 공간의 메뉴를 선택하게 되면 선택바(112)에 '메뉴 꾸미기'라는 부가 선택 메뉴가 표시되며, 작업바(114)에는 컴포넌트인 메뉴에 대한 구체적인 작업을 위한 메뉴인 글꼴 속성, 문단 속성, 색상, 음영 등이 표시되게 된다.

갤러리와 관련하여, 본 발명의 일실시예와 같이 작업 공간의 갤러리를 선택하게 되면 선택바(112)에 '갤러리 꾸미기'라는 부가 선택 메뉴가 표시되며, 작업바(114)에는 컴포넌트인 갤러리에 대한 구체적인 작업을 위한 메뉴인 행렬 설정, 여백 설정, 갤러리 액션 설정 등이 표시되게 된다. 갤러리 액션 설정은 홈페이지 이용자에 의해 갤러리의 특정 콘텐츠가 선택되는 경우, 표시되는 액션에 관한 설정으로서, 마우스를 가져가면 특정 콘텐츠의 제목을 보여준다던가, 클릭하면 특정 콘텐츠를 크게 확대 표시, 반전, 색상 변화 또는 이동 등의 액션을 포함할 수 있다.

본 발명의 일실시예에 따르면 갤러리를 추가할 때 갤러리의 표시양태를 선택할 수 있도록 구성될 수 있다. 갤러리의 표시양태는 리스트, 모자이크, 그리드 등의 형태를 포함할 수 있다.

본 발명의 일실시예에 따라 제작되는 홈페이지는 복수개의 페이지를 포함할 수 있다. 사용자는 사이드바(116)에서 작업하려는 페이지를 선택할 수 있다. 본 발명의 일실시예에 따른 디자인 관리창의 메인 페이지를 도시한 것이고, 본 발명의 일실시예에 따른 디자인 관리창의 포토 페이지, 본 발명의 일실시예에 따른 디자인 관리창의 프로필 페이지를 도시한 것이다. 도시된 바와 같이 사용자는 사이드바(116)에서 작업하려는 페이지를 선택하여 사용자 단말기(3)의 화면상에 디스플레이할 수 있고, 위에 기술된 방법과 같은 방법으로 홈페이지를 꾸밀 수 있다.

종료 버튼(118)과 관련하여, 본 발명의 일실시예에 따른 종료 버튼(118)은 우측 상단에 구비되며, 디자인 관리모드를 종료하기 위한 버튼이다. 종료 버튼(118)을 클릭하면 디자인 관리창(111)이 종료되고 초기화면(100)이 사용자 단말기(3)의 화면에 표시된다.

미리보기(119)와 관련하여, 본 발명의 일실시예에 따른 미리보기(119)는 우측 상단에 구비되며, 사용자가 제작한 홈페이지의 디자인이 실제로 어떻게 구현되는지 확인하기 위한 버튼이다. 도 18은 본 발명의 일실시예에 따른 미리보기 창의 실시예를 도시한 것이다. 도 18에 도시된 바와 같이, 실제 홈페이지 이용자 단말기(5)에서 구현되는 것과 같은 상태로 홈페이지의 디자인을 확인할 수 있다.

콘텐츠 관리모드

본 발명의 일실시예에 따른 콘텐츠 관리모드는, 통신망을 통하여 접속된 사용자 단말기(3)로 콘텐츠 관리창 정보를 전송하는 단계, 접속된 사용자 단말기(3)의 콘텐츠 관리창에 입력된 콘텐츠를 통신망을 통하여 수신하는 단계, 및 수신된 콘텐츠를 콘텐츠 데이터베이스(14)에 저장시키는 단계를 포함할 수 있다.

상기의 콘텐츠 관리창에서는, 콘텐츠 데이터베이스(14)에 저장된 콘텐츠를 업로드, 분류, 삭제, 또는 수정할 수 있도록 구성되며, 디자인 관리창(111)에서는, 사용자가 마우스만으로 콘텐츠 데이터베이스(14)에 저장된 콘텐츠를 컴포넌트로서 로드, 삭제 또는 수정할 수 있도록 구성될 수 있다. 터치스크린을 구비한 스마트폰 또는 태블릿의 경우에는 손가락 또는 터치펜만을 이용할 수 있다.

본 발명의 일실시예에 따른 콘텐츠 관리 모드와 관련하여, 본 발명의 일실시예에 따른 콘텐츠 관리창을 도시한 것이다. 본 발명의 일실시예에 따른 콘텐츠 관리창(121)은 선택바(122), 사이드바(124), 종료 버튼(126)을 포함할 수 있다. 선택바(122)에는 보관함, 업로드함, 삭제함을 의미하는 아이콘이 표시될 수 있으며, 각각의 아이콘을 클릭 시 설정된 저장공간이 화면상에 표시되게 된다. 사이드바(124)에는 사용자가 콘텐츠를 효율적으로 관리하기 위한 일환으로 콘텐츠의 그룹화가 가능하도록 하는 구성이다. 본 발명의 일실시예인 콘텐츠의 태그를 이용하여 분류를 하였다. 종료 버튼(126)은 콘텐츠 관리 모드를 종료하고 초기화면(100)으로 돌아가기 위한 버튼이다.

보관함에는 기저장 콘텐츠(128a)들이 표시될 수 있다. 이러한 기저장 콘텐츠(128a)들의 비밀 여부, 태그, 파일명 등을 관리하고 삭제할 수 있다. 업로드함에는 업로드할 콘텐츠(128b)들이 표시될 수 있다. 삭제함에는 삭제될 콘텐츠(128c)들이 표시될 수 있다.

설정 관리모드

본 발명의 일실시예에 따른 설정 관리모드는, 통신망을 통하여 접속된 사용자 단말기(3)로 설정 관리창 정보를 전송하는 단계, 접속된 사용자 단말기(3)의 설정 관리창에 입력된 설정 정보를 상기 통신망을 통하여 수신하는 단계, 및 수신된 설정 정보를 설정 데이터베이스(16)에 저장시키는 단계를 포함할 수 있다.

설정 정보는, 사용자 정보, 홈페이지 주소, 홈페이지 이름, 홈페이지 공개 여부, 비밀모드 여부 중 적어도 하나를 포함하고, 웹 제작 서버(10)에 연결된 설정 데이터베이스(16)에 저장되고 관리되게 된다. 사용자 정보는 사용자의 아이디, 비밀번호, 이메일 주소, 결제여부 및 내역, 사용기한 등을 포함할 수 있다.

홈페이지 주소는 사용자가 제작한 홈페이지의 웹 주소를 의미하고, 본 발명의 일실시예에 따른 홈페이지 제작 시스템은 사용자가 사용하고 싶은 개인 도메인을 손쉽게 설정하여 사용할 수 있도록 구성된다. 홈페이지 이름은 사용자가 제작한 홈페이지의 제목을 의미하며, 사용자가 사용하고 싶은 이름을 사용할 수 있다. 홈페이지 공개 여부는 사용자가 제작한 상기 홈페이지를 웹 상에 개시하였는지 여부를 의미하고, 본 발명의 일실시예에 따른 홈페이지 제작 시스템은 설정관리창 내에서 이를 수정할 수 있도록 구성된다. 비밀모드 여부는 사용자가 제작한 홈페이지에 비밀번호를 설정하거나, 새로운 주소를 부여하여 특정 이용자만 상기 홈페이지를 이용할 수 있도록 구성되는 비밀모드의 활성화 여부를 의미하고, 설정관리창 내에서 이를 수정할 수 있도록 구성된다.

본 발명의 일실시예에 따른 설정 관리모드와 관련하여, 본 발명의 일실시예에 따른 설정 관리창(131)은 간편관리(132), 주소관리(134), 비밀모드 관리(136) 등을 포함할 수 있다.

간편관리(132)에서는 사용자가 자주 사용하게 되는 설정 정보를 변경할 수 있도록 홈페이지 주소 변경(132a), 홈페이지 이름 변경(132b), 홈페이지 공개 여부 설정(132c), 비밀모드 설정(132d) 등을 포함할 수 있다. 주소관리(134)에서는 홈페이지의 주소를 표시하고 구체적으로 홈페이지를 설정하기 위한 구성을 포함할 수 있다.

비밀모드 관리(136)에서는 비밀모드의 사용여부를 표시할 수 있다. 비밀모드를 사용하는 경우에는 밀모드 접속 설정창이 표시되게 된다. 비밀모드 접속 설정창에서는 홈페이지에 접속이 허용되는 특정 이용자들을 위하여 비밀모드의 새로운 주소(비밀모드 주소)가 제공되고, 비밀번호의 설정을 위한 구성이 제공될 수 있다. 비밀모드가 활성화된 경우에는, 비밀모드 주소를 통해 접속하거나, 비밀번호를 통해 본 홈페이지 주소로 접속하는 방식으로만 사용자가 제작하고 공개한 홈페이지에 엑세스할 수 있다. 비밀모드가 활성화되고 있음을 초기화면(100)의 홈페이지 정보(104) 부분에 표시할 수 있다. 이에 의해 사용자는 홈페이지의 상태를 초기화면(100)에서부터 확인할 수 있다.

제작된 홈페이지

페이지, 레이아웃, 텍스트, 메뉴, 이미지, 동영상, 도형, 갤러리를 포함하는 컴포넌트 이용하여 디자인적으로 독창적이고 세련된 홈페이지를 사용자가 직접 손쉽게 구성할 수 있다. 예를 들어 좌측 상단에 표시된 컴포넌트는 텍스트에 흰색 글자를 기재하고 검정색 음영을 넣어 표현하였으며, 우측 상단에 표시된 컴포넌트는 홈페이지의 특정 페이지로 링크되어 있는 메뉴를 구성하고 있다. 중단 레이아웃에는 컴포넌트로서 이미지를 삽입하였고, 하단 레이아웃에는 컴포넌트로서 갤러리를 삽입하여 홈페이지 이용자 단말기(5)에서 이용자가 갤러리에 표시된 사진 하나를 클릭 시 확대, 반전, 색상 변화 또는 이동될 수 있도록 구성하였다.

본 발명의 일실시예에 따르면 복잡하게 프로그래밍 코드를 입력하지 않으면서도 독창적인 홈페이지 디자인을 웹 상에서 손쉽게 제작할 수 있고, 이렇게 제작된 홈페이지의 주소를 설정하고 공개를 설정하여 곧바로 제작된 홈페이지를 홈페이지 이용자 단말기(5)에 제공할 수 있다. 본 발명의 일실시예에 따르면 최소한의 메뉴 구성으로 최적의 홈페이지 제작 효율성을 발생시키게 된다.

이상에서 설명한 바와 같이, 본 발명이 속하는 기술 분야의 통상의 기술자는 본 발명이 그 기술적 사상이나 필수적 특징을 수정하지 않고서 다른 구체적인 형태로 실시될 수 있다는 것을 이해할 수 있을 것이다. 그러므로 상술한 실시예들은 모든 면에서 예시적인 것이며 한정적인 것이 아닌 것으로서 이해해야만 한다. 본 발명의 범위는 상세한 설명보다는 후술하는 특허청구범위에 의하여 나타내어지며, 특허청구범위의 의미 및 범위 그리고 등가 개념으로부터 도출되는 모든 수정 또는 변형된 형태가 본 발명의 범위에 포함하는 것으로 해석되어야 한다.

1: 홈페이지 제작 시스템
3: 사용자 단말기
5: 홈페이지 이용자 단말기
10: 웹 제작 서버
12: 디자인 데이터베이스
14: 콘텐츠 데이터베이스
16: 설정 데이터베이스

Claims (4)

1. 웹 제작 서버에 의해 수행되는 홈페이지 제작방법에 있어서,
   사용자에 의해 업로드된 콘텐츠를 수신하는 제1단계;
   홈페이지 배경의 적어도 일부를 점유하고 상기 콘텐츠가 삽입되는 프레임인 복수개의 레이아웃에 대한 디자인 정보를 수신하는 제2단계;
   상기 복수개의 레이아웃 중 적어도 하나에 삽입되는, 상기 사용자에 의해 선택된 상기 콘텐츠의 정보를 수신하는 제3단계; 및
   상기 선택된 콘텐츠가 삽입된 상기 레이아웃을 포함하는 홈페이지를 인터넷 웹 상에서 온라인으로 운영하는 제4단계;
   를 포함하고,
   상기 콘텐츠는 특정 이미지, 사용자의 입력에 의해 도안되는 도형, 사용자의 입력에 의해 작성되는 텍스트 및 특정 동영상 중 적어도 하나를 포함하며,
   상기 디자인 정보는 위치, 크기, 형상 및 색상 중 적어도 하나를 포함하고,
   상기 디자인 정보는 사용자가 설정할 수 있도록 구성되는 것을 특징으로 하는 홈페이지 제작방법.
   
2. 제1항에 있어서,
   제4단계 이후에,
   상기 제1단계 내지 제4단계에 의해 제작된 홈페이지의 정보를 상기 사용자의 단말기에 송신하는 제5단계; 및
   상기 사용자의 단말기에서 상기 레이아웃의 디자인 정보 및 상기 콘텐츠의 디자인 정보 중 적어도 하나가 수정되고, 수정된 상기 레이아웃의 디자인 정보 및 수정된 상기 콘텐츠의 디자인 정보를 수신하는 제6단계; 및
   상기 디자인 정보가 수정된 상기 콘텐츠 및 상기 디자인 정보가 수정된 상기 레이아웃을 포함하는 홈페이지를 인터넷 웹 상에서 온라인으로 운영하는 제7단계;
   를 더 포함하는 것을 특징으로 하는 홈페이지 제작방법.
   
3. 제1항에 있어서,
   상기 레이아웃에는 상기 사용자의 선택에 의해 메뉴 및 갤러리 중 적어도 하나를 배치하고,
   상기 메뉴는, 클릭 시 사용자의 홈페이지 상에서 특정 페이지로 연결되는 구성을 의미하며,
   상기 갤러리는, 사용자에 의해 업로드되는 복수개의 콘텐츠 중 적어도 하나를 포함하며 특정 배열로 배치되는 구성을 의미하고,
   상기 갤러리에 배치된 상기 복수개의 콘텐츠 중 적어도 하나가 홈페이지 이용자에 의해 선택되는 경우, 상기 선택된 콘텐츠에 특정 시각 효과를 부여하여 디스플레이하는 것을 특징으로 하는 홈페이지 제작방법.
   
4. 제1항에 있어서,
   상기 레이아웃에는, 상기 콘텐츠, 메뉴 및 갤러리 중 적어도 하나만 배치될 수 있고,
   상기 메뉴는, 클릭 시 사용자의 홈페이지 상에서 특정 페이지로 연결되는 구성을 의미하며,
   상기 갤러리는, 사용자에 의해 업로드되는 복수개의 콘텐츠 중 적어도 하나를 포함하며 특정 배열로 배치되는 구성을 의미하고,
   상기 갤러리에 배치된 상기 복수개의 콘텐츠가 홈페이지 이용자에 의해 선택되는 경우, 상기 선택된 콘텐츠에 특정 시각 효과를 부여하여 디스플레이하는 것을 특징으로 하는 홈페이지 제작방법.
   

Images