KR20130082524A - 브라우저 자원을 활용한 적층형 홈페이지 제작 방법 - Google Patents

Abstract

본 발명은 웹사이트 제작 방법에 관한 것으로, 더욱 상세하게는 브라우저 자원을 활용한 적층형 웹사이트 제작 방법에 관한 것이다.
이를 위해 본 발명의 제작도구를 이용하여 홈페이지를 제작하는 방법은 문자 또는 이미지 입력이 가능한 레이어를 적층하는 홈페이지 제작한다.

Description

브라우저 자원을 활용한 적층형 웹사이트 제작 방법{Method for website design}

본 발명은 웹사이트 제작 방법에 관한 것으로, 더욱 상세하게는 브라우저 자원을 활용한 적층형 웹사이트 제작 방법에 관한 것이다.

지금까지 대부분의 홈페이지 제작은 제작업체에 제작을 의뢰하면 제작업체에서는 개발자 또는 웹디자이너가 화면을 설계하고 화면설계에 맞게 프로그램을 개발하고 디자인을 설계하여 홈페이지를 제작하고 있다.

그런데 최근에는 한 단계 더 발전된 모습으로 인터넷 포털업체인 다음카페나 블로그, 네이버 블로그, 삼성SDS의 사내용(인트라넷) 그룹웨어(Acube)에서는 그리드(바탕화면 또는 페이지)에 사전에 일정한 구도를 만들어 놓고 구도 내에서 여러 기능들의 위치를 바꾸는 형태로 홈페이지를 제작하는 방식도 있다.

도 1은 네이버 블로그에서 레이아웃을 설정하는 일예를 도시하고 있다. 도 1에 도시되어 있는 바와 같이 네이버 블로그에서 설정하는 레이아웃은 고정된 형태 또는 제한된 범위 내에서 변형 가능한 형태로 한정되며, 사용자의 기호에 맞는 다양한 형태의 레이아웃을 제공하지 않는다는 단점 있다.

구체적으로 알아보면 상술한 제작도구는 일정한 구도 내에서 기능들의 위치만 바꾸는 형태이기 때문에 다양한 크기의 기능(일명 "페이지" 또는 "스킨") 들을 만들 수 없는 등의 문제점이 있다.

첫째, 일정하게 정해진 구도와 같이 "그리드(바탕화면 또는 페이지)"는 대부분 상단 메인메뉴, 좌측메뉴, 중간화면, 우측메뉴, 하단으로 구성되어 있다. 상단메뉴는 홈페이지의 가장 큰 개념인 메인메뉴와 서브메뉴로 구성되어 있으며, 하단메뉴는 회사소개, 개인정보관리정책, 광고문의, 간략한 회사소개(사업자번호, 통신판매신고번호, 전화, 팩스, 주소, 대표자 성명, 이메일) 등으로 대부분 고정되어 있다.

좌측메뉴는 로그인, 고객센터 안내사항, 관리자 인적사항, 방문객 통계 등과 같은 기능으로 되어 있으며, 우측메뉴는 공지사항, 방문객 현황, 배너링크, 일정관리 등으로 구성되어 있다. 그리고 중앙화면은 일반적으로 뉴스, 상품소개, 배너광고, 갤러리 등으로 구성되어 있는 등 화면의 틀이 고정되어 있어 화면크기 조정이 어려워 스마트폰, 태블릿PC, 일반 PC모니터 규격에 맞는 화면크기를 조정할 수 없는 문제점이 있다.

둘째, 좌측화면, 중앙화면, 우측화면의 가로 규격이 고정되어 있는 각 화면 규격을 임의로 조절할 수 없는 문제가 있다. 따라서 블로그 또는 카페 등은 고정된 스킨을 만들어 놓고 위치만 변경하고 있다.

셋째, 대부분의 블로그 또는 카페는 일반적인 홈페이지에서 볼 수 있는 쇼핑몰 기능이 없는 등 기능(스킨)에도 한계가 있어 쇼핑몰 홈페이지를 만들어 놓고 홍보성 기능만 하고 있을 뿐이다.

넷째 블로그나 카페 등을 제외한 일반적인 홈페이지 제작은 홈페이지 제작업체에 의뢰하여 홈페이지를 제작하는 관계로 많은 비용을 들어 제작 하는 문제점이 있다. 네이버 블로그 뿐 아니라 다음 카페 역시 유사한 문제점을 내포하고 있다.

따라서 사용자가 자유롭게 홈페이지를 제작할 수 있는 다양한 기술들이 보급되어 있다. 일예로 한국공개특허 제2011-0024484호(확장폼을 이용한 홈페이지 제작 시스템 및 방법), 한국공개특허 제2010-0000683호(홈페이지 제작을 위한 자원 통합운영 및 관리 시스템) 등이 공개되어 있다.

본 발명이 해결하려는 과제는 홈페이지 제작에 필요한 툴이나 각종 자원을 통합 운영하여 간단하게 홈페이지를 제작할 수 있는 방안을 제안함에 있다.

본 발명이 해결하려는 다른 과제는 일반인이 간단하게 홈페이지를 제작함으로써 홈페이지 제작비용과 제작시간을 감소시키는 방안을 제안함에 있다.

본 발명이 해결하려는 또 다른 과제는 홈페이지를 제작하여 서버에 전송하는 전송용량을 감소시키는 방안을 제안함에 있다.

이를 위해 본 발명의 제작도구를 이용하여 홈페이지를 제작하는 방법은 문자 또는 이미지 입력이 가능한 레이어를 적층하여 홈페이지를 제작하며, 홈페이지를 제작한 소스 코드를 암축 및 암호화하여 서버로 전송한다.

상기 제작도구는 레이어를 생성 및 삭제하는 제작도구를 포함하는 레이어정보 제작도구와 페이지를 생성, 삭제, 수정, 저장하는 제작도구를 포함하는 페이지정보 제작도구, 및 폴더를 생성, 삭제하는 제작도구를 포함하는 폴더 제작도구를 포함하며, 상기 레이어정보 제작도구는 레이어 추가, 레이어 삭제, 레이어 크기, 레이어 색상, 레이어 투명도 항목을 포함한다. 또한, 상기 페이지정보 제작도구는 페이지 추가, 페이지 저장, 페이지 수정, 페이지 삭제, 페이지 복사 항목을 포함한다.

본 발명에 따른 홈페이지 제작 방법은 한글문서, 그림문서, 편집 등의 기초적인 지식만 가지고 있는 사용자는 쉽게 홈페이지를 제작할 수 있으며, 이로 인해 홈페이지의 제작비용 및 제작단가를 감소시킬 수 있다 또한, 기능만 추가되면 복잡한 홈페이지 제작도 간단하게 제작할 수 있으며, 다양한 기기에 따라 홈페이지를 제작할 수 있는 효과가 있다. 즉, 모바일 기기, 테스크탑 PC 등 다양한 기기에 따라 홈페이지를 제작할 수 있다.

도 1은 네이버 블로그에서 레이아웃을 설정하는 일예를 도시하고 있다.
도 2는 본 발명의 일실시 예에 따른 홈페이지를 제작하는 제작도구가 포함되어 있는 메인화면을 도시하고 있다.
도 3 내지 도 39는 본 발명의 일실시 예에 따른 제작도구를 이용하여 홈페이지를 제작하는 제작 과정을 도시하고 있다.

전술한, 그리고 추가적인 본 발명의 양상들은 첨부된 도면을 참조하여 설명되는 바람직한 실시 예들을 통하여 더욱 명백해질 것이다. 이하에서는 본 발명의 이러한 실시 예를 통해 당업자가 용이하게 이해하고 재현할 수 있도록 상세히 설명하기로 한다.

도 2는 본 발명의 일실시 예에 따른 홈페이지를 제작하는 제작도구가 포함되어 있는 메인화면을 도시하고 있다. 이하 도 2를 이용하여 본 발명의 일실시 예에 따른 홈페이지를 제작하는 메인화면을 구성하고 있는 기능들에 대해 상세하게 알아보기로 한다.

* 바탕화면(그리드)

그리드는 페이지를 제작하는 바탕틀이다. 그리드의 크기를 조절하는 방법은 2가지가 있다. 좌측 하단의 넓이, 높이 입력창에 숫자를 입력하여 조절하거나, 그리드 우측하단의 포인트를 드래그하여 크기를 조정할 수 있다. 그리드의 크기를 조정하여 스마트폰, 태블릿PC, 넷북, 노트북, 일반PC의 모니터 규격에 맞게 홈페이지 제작이 가능 하다. 즉, 홈페이지를 제공하는 기기에 따라 그리드의 크기를 조정하여 홈페이지를 제작할 수 있다.

* 미리보기 및 리셋기능

미리보기 기능은 그리드상에 제작된 페이지 전체를 웹(web)상태에서 미리 볼 수 있는 기능이다. 리셋기능은 비동기 통신 기반으로 런타임(runtime) 프로그램으로 구현되었으며, 리플래쉬가 필요할 경우 웹상의 리플래쉬 기능을 수행한다.

* 폴더정보

폴더는 기능별로 페이지를 묶어놓은 카테고리이다. 폴더를 만드는 방법은 폴더추가 버튼을 클릭하여 폴더명을 입력하면, 폴더명은 페이지디자인에 표출된다. 폴더명은 홈페이지를 구성하고 있는 상단메뉴나 좌측의 메인메뉴로도 사용되고, 기능추가에서 네비게이션(네비버튼) 기능과도 연동된다.

* 페이지정보

페이지는 그리드 안에 있는 모든 레이어나 모듈(WRAP) 기능들의 모음이다. 페이지명은 상단메뉴의 서브메뉴나 좌측의 메인메뉴의 서브메뉴로도 사용되고, 네비게이션(네비버튼) 기능과도 연동된다. 페이지는 삭제, 저장, 수정, 복사 기능이 있다. 특히 복사기능은 페이지 및 WRAP으로 구현된 모든 기능(디자인 포함)들을 일괄 복사 할 수 있다. 모듈(WRAP)이란 레이어속 기능과 디자인을 포함하는 최소단위이다. 일예로 '로그인'의 경우 로그인 WRAP의 규격을 말한다. 기능디자인이란 기능을 페이지 객체로 인식할 수 있도록 하고 기능 인스턴스를 생성한다.

* 레이어정보

레이어란 페이지별 그리드에 이미지, 배경, 텍스트, 각종 기능을 넣을 수 있는 틀이며, 레이어가 모아지면 모듈(WRAP)이 된다. 레이어는 추가/삭제를 할 수 있다. 레이어의 크기는 마우스로 드래그를 하여 임의로 조절(넓이/높이)할 수도 있고, 수치를 입력하여 조절할 수도 있다.

레이어의 속성은 X값, Y값, Z값으로 구분된다. X값은 X좌표로 좌측에서 얼마만큼 떨어져 있는지를 표시하며, Y값은 Y좌표로 위에서 얼마만큼 떨어져 있는지를 표시하며, Z값은 여러개의 레이어가 겹쳐 있을 경우 레이어의 위치를 나타내고 아래에 있을 경우 수치가 낮고, 위에 있을수록 수치가 높다.

또한, 레이어는 색상을 넣을 수도 있으며, 투명으로 할 수도 있다. 색상변경은 수정버튼을 클릭하면 생성되는 색상 팔렛트를 이용하여 해당 색상을 선택하여 적용할 수도 있고, 영문(red, white, green, yellow 등) 또는 코드값(#b5c4d9=현 바탕색, 등) 을 직접 입력하여 적용할 수도 있다. 레이어 색상을 '투명'으로 변경할 경우에는 고정값(#b5c4d9)을 삭제하고 수정버튼을 클릭하면 된다.

투명은 레이어 안의 이미지, 글씨 등의 투명도를 조정하는 값이다. 디폴트(최대값)는 '1'이며, 소수점단위로 투명도를 조정할 수 있다.

하기 표 1은 본 발명에서 제안하는 홈페이지의 제작 도구를 이용하여 수행하는 기능을 나타내고 있다.

기능	기능설명
배경	배경을 넣으면 브라우져 전체 화면에 표출하는 기능이다. (기능은 배경이 반복 또는 한번 적용과 해제 기능이 있다)
이미지	레이어에 배경 및 이미지를 삽입하는 기능이다.
네비	페이지로 이동하는 수단이고, 메뉴 및 서브메뉴로 이동하는 기능이다.
게시판	일반적인 BBS기능을 말하고 유형은 현재 일반게시판 형, 갤러리 형, 달력 형이 있다.
회원가입	회원DB에 회원등록/수정/삭제할 수 있다. 회원가입절차, 회원가입(약관동의, ID/비번 등 등록)의 기능이 있다.
텍스트	이미지 또는 TEXT 형태로 링크를 할 수 있는 기능과 일반 레이어나 WRAP을 디자인 할 수 있는 기능이다.
서브게시판	게시판에 등록되어 있는 여러 개의 글 중 일정 게시물만 표출해주는 게시판을 말한다. 또한 서브게시판과 실 게시판이 원클릭(한번의 클릭)으로 연결되도록 하는 기능이다. 또한 모듈 게시판 기능이 있어 여러 게시판중 필요한 게시판만 모듈화하여 일괄 표출해 주는 기능도 있다.
주문게시판	맞춤형 게시판을 말한다.(예, 온라인 주문서 등)
폰트	페이지별로 글자 사이즈, 패밀리, 굵기, 칼라기능이 있으며 디자인을 할 수 있다.
플래쉬	페이지 및 레이어에 플래시를 삽입하는 기능이다.
팝업	일정크기로 페이지를 만들고, 홈페이지 특정위치에 표출하는 기능이다.
퀵메뉴	홈페이지 우측 또는 좌측 등 특정영역에 위치하며, 스크롤바를 위/아래로 이동할 경우에도 항상 같이 이동하여 상단에 표출 될 수 있도록 하는 것이다.
기능복사	레이어를 복사하는 기능이다.
기능넣기	페이지에 복사한 레이어를 붙여넣기 하는 기능이다.
폴더내 페이지 이동	해당 폴더내에서 페이지 위치(상/하)를 변경하는 기능이다.
카테고리	쇼핑몰의 카테고리를 넣고 삭제하는 기능이다.
상품등록	상품리스트를 넣고 삭제하는 기능이다.

이외에도 다양한 기능이 홈페이지 제작 도구에 포함될 수 있다. 이하에서는 도면을 이용하여 홈페이지를 제작하는 과정에 대해 상세하게 알아보기로 한다.

도 3은 메인페이지를 제작하는 예를 도시하고 있다. 메인페이지는 인덱스라는 폴더를 이용하여 제작하며, 인덱스 폴더는 필수 폴더이며, 인덱스라는 페이지도 도 3의 좌측에 도시되어 있는 바와 같이 미리 제작되어 있다. 상술한 바와 같이 메인페이지의 크기는 픽셀 단위로 조정이 가능하며, 사용자가 직접 입력창에 숫자를 입력하는 방식과 마우스를 드래그하여 크기를 조절하는 방식이 있다. 도 3은 사용자가 직접 입력창에 숫자를 입력하는 방식과 마우스를 드래그하여 크기를 조절하는 방식을 도시하고 있다.

회사로그를 만들기 위해서는 좌측 인덱스 페이지를 클릭한다. 인덱스 페이지를 클릭하면, 페이지 삭제/저장/수정/복사 버튼이 표시된다. 도 2에 도시되어 있는 메인 화면 우측의 '레이어 정보'에서 '추가' 버튼을 클릭한다. 이후 레이어의 마우스포인터를 클릭한 후 드래그하여 적당한 크기로 조절하여 원하는 위치에 배치한다.

폴더를 생성하고 삭제하는 방법은 폴더정보의 폴더추가 버튼을 클릭하고, 팝업창에서 폴더이름을 입력하고 폴더추가버튼을 클릭하면 되고, 폴더삭제는 생성된 폴더를 클릭하고 삭제버튼(X)을 클릭하면 된다.

도 4는 회사로그를 만들기 위한 레이어를 생성한 예를 도시하고 있다. 상술한 바와 같이 레이어는 크기, 위치, 색상, 투명도 등을 조절할 수 있다. 이후 인덱스 페이지에 있는 저장버튼을 클릭하면, 우측에 도시되어 있는 바와 같이 기능추가 메뉴②가 생성된다.

상술한 과정이 수행된 후, 생성한 레이어③에 기능을 추가한다. 기능 추가 중 이미지를 업로드는 하는 순서는 레이어를 클릭한 후 '기능 추가'에서 '이미지' 메뉴를 클릭한다. 그리고 미리 만들어 놓은 회사 로그를 찾아 업로드하고 해당 이미지를 넣고, 반드시 인덱스 페이지의 저장버튼을 클릭한다.

이하에서는 회사로그에 인덱스페이지(메인페이지)를 링크 연결하는 방법에 대해 알아보기로 한다. 먼저 해당 레이어에 이미지가 들어 있는 경우에는 이미지를 삭제해야 하며, 삭제 방법은 회사 로그 레이어를 선택한 후, 기능 추가 메뉴에서 이미지를 클릭하고, 삭제를 클릭하면, 회사로그 이미지는 삭제된다.

회사로그에 메인페이지를 링크하기 위해서는 레이어를 클릭하고, 기능 추가 메뉴에서 '텍스트'를 클릭한다. 그리고 팍업창 하단의 '그림' 버튼을 클릭한다. 이후 '찾아보기'에서 회사로그 이미지를 찾아 '상품이미지 업로드'를 클릭하고, 팝업창의 '상세페이지 그림 등록하기'를 클릭하면, 회사로그가 표출된다. 'URL'을 클릭하여 메인페이지 URL주소를 붙여넣기한 후 확인버턴을 클릭한다. 이후 팝업창에서 '넣기'를 클릭한 후 '닫기'를 클릭한다. 회사로그 레이어에서 배경색상을 없애는 방법은 상술한 바와 같이 레이어를 클릭하고, 레이어정보의 색상을 삭제하고 수정버튼을 클릭한다. URL을 확인하는 방법은 해당 페이지를 클릭한 후 미리보기를 클릭하여 메인페이지 주소를 확인하고, URL 주소를 드래그하여 복사하거나, 사전에 URL 주소를 텍스트 파일로 미리 저장해 두었다가 사용할 수 있다.

도 5 내지 도 7은 회사로그에 메인페이지를 링크 설정하는 일련의 과정을 도시하고 있다.

상단 메뉴는 다음과 같은 과정을 통해 생성한다. 먼저 폴더에서 '회사소개'를 선택하고, 빈칸에 '인사말'이라고 입력한다. 이후 페이지 추가 버턴을 클릭하고, 표시된 팝업창에서 확인버튼을 클릭한다. 도 8은 상단 메뉴를 생성하는 과정을 도시하고 있다. 상술한 방식과 동일한 방식으로 회사소개, 사업소개, 제품소개, 온라인견적, 고객센터, 기타 폴더에서 해당 페이지를 생성할 수 있다.

이하에서는 네비게이션을 이용한 회사 소개 방법에 대해 알아보기로 한다. 먼저 레이어정보에서 '추가' 버턴을 클릭하고, 인덱스 페이지에서 '저장' 버턴을 클릭하여 레이어를 하나 추가한다(도 9참조). 기능 추가에서 '네비' 버턴을 클릭하고, '네비설정' 버턴을 클릭한다(도 10참조). 상단 레이어를 좌(우)로 이동한 후 회사소개의 스킨변경을 클릭한 후 적용할 이미지를 서버로 업로드한다. 업로드는 하나씩 또는 찾아보기에서 계속찾아 일괄 업로드할 수 있다(도 11참조). 상기에서 각 레이어의 '닫기'를 클릭하고 다시 '네비'를 클릭한다(도 12참조). 회사소개의 스킨을 변경하기 위해 '스킨변경'을 클릭한다(도 13참조). 상위 레이어를 우측으로 이동하여 회사소개 이미지를 확인하고 '스킨변경'을 클릭한다(도 14참조). 스킨이 적용되면 2개의 레이어가 하나(상/하)로 합쳐진다(도 15참조). 겹쳐있는 상단 중앙의 '삭제'를 클릭하고, '저장'과 팝업에서 '확인'을 클릭한다(도 16참조). 다시 레이어를 선택하고 기능추가에서 '네비'를 클릭하면 회사소개 앞에 이미지가 적용된 회사소개가 표시된다(도 17참조). 기능추가의 '네비'를 클릭하고 팝업창에서 '가로all'을 클릭하면 배경과 같이 회사소개, 사업소개, 제품소개, 온라인 견적, 고객센터라는 스킨이 적용된다. 그리고 팝업에서 '닫기'를 클릭한다(도 18참조). 레이어의 마우스포인트에 드래그하여 회사소개, 사업소개 등 스킨을 조절하고, 레이어 스킨 부분에 마우스를 클릭한 상태에서 드래그로 위치를 조정하고 인덱스 페이지에서 '저장'을 클릭한다(도 19참조). 이후 마지막으로 레이어의 배경색을 변경한다(도 20참조).

이하에서는 인덱스 페이지에 메인이미지 삽입하는 방법에 대해 알아보기로 한다. 레이어에 이미지를 추가하는 과정에 대해서는 상술하였지만 다시 한번 부연하여 설명하기로 한다. 먼저 레이어정보에서 '추가' 버턴을 클릭하고, 인덱스 페이지에서 '저장' 버턴을 클릭한다. 이후 찾아보기를 통해 해당 이미지를 찾아 '그림업로드' 를 클릭한다. 업로드된 상태에서 '그림으로 넣기'를 클릭하여 레이어에 이미지를 입력한다. 그리고 '닫기'를 클릭하고, '저장'을 클릭하고, 레이어 크기를 조정하고, 색상을 삭제하고 '수정'을 클릭한다.

메뉴와 레이어가 겹쳐있어 메뉴의 서브메뉴가 표시되지 않는 경우에는 서브메뉴를 표시하기 위해 2가지 방법을 사용한다. 메뉴의 Z값을 이미지의 Z값보다 크게 하거나, 이미지의 Z값을 메뉴의 Z값보다 작게 설정하면 된다. 도 21 내지 도 22는 메인이미지를 삽입하는 방안을 도시하고 있다.

이하에서는 인덱스 페이지에 서브이미지를 삽입하는 방법에 대해 알아보기로 한다. 레이어 정보에서 '추가'를 클릭하고, 크기를 적당히 조정하고 인덱스 수정 버턴을 클릭한다. 서브이미지에서 공지사항, 제품소개 표출방법은 레이어정보에서 추가 버턴을 통해 추가로 3개의 레이어를 생성한다. 두 개의 레이어에는 '이미지'버턴을 통해 이미지를 삽입하고, 나머지 레이어는 공지사항 게시판의 게시글이 표시되도록 한다. 레이어에 하나의 레이어를 추가하며, 추가한 레이어에 상품이 표출되도록 한다. 이 경우 사전에 상품페이지를 만들어 놓고 링크를 설정한다. 서브 이미지에 업무시간안내와 같은 이미지 삽입은 레이어를 생성하고, 위치 및 크기를 조정한 후 저장버턴을 클릭한다. 이후 이미지 버턴을 클릭하여 해당 이미지를 찾아 서버로 업로드한 후 그림으로 이미지 넣기를 수행한 후 팝업 닫기 및 저장 버턴을 클릭하는 순으로 수행한다. 도 23 내지 도 24는 서브 이미지를 삽입하는 방안을 도시하고 있다.

이하에서는 로그인페이지를 생성하는 과정에 대해 알아보기로 한다. 먼저 페이지를 설계하는 과정에 대해 알아보기로 한다. 도 25는 로그인페이지를 설계하는 도면을 도시하고 있다. 기타 폴더에 있는 로그인 페이지를 클릭한다. 페이지의 크기를 조절한다. ① 내지 ⑩과 같이 레이어를 생성하고 적당한 크기나 배치를 한다. 이후 ⑪과 같이 저장을 클릭하고 필요한 동작(레이어의 크기 조절 및 위치 조절, 이미지 삽입이나 링크)을 수행한다.

좌측메뉴는 도 26과 같이 해당 레이어를 클릭하고, 기능 추가에서 네비 버턴을 클릭하고, 팝업창에서 세로 폴더를 선택하고 닫기를 클릭한 다음, 필요한 경우 색상을 없애고 마지막으로 저장버튼을 클릭한다.

레이어가 중복될 경우에는 일예로 기타라는 폴더명이 표출되지 않도록 할 필요성이 있는 경우, 서브메뉴가 아래 이미지로 보이지 않는 경우가 있다. 기타라는 폴더명이 표출되지 않도록 하기 위해서는 도 27과 같이 세 개의 레이어(①, ②, ③)가 겹쳐 있는 경우, 조절하며, 서브메뉴가 아래 이미지로 보이지 않도록 하기 위해서는 도 28과 같이 레이어(①, ②)의 Z값을 변경하면 된다.

이하에서는 로그인 화면을 생성하는 과정에 대해 알아보기로 한다.

먼저 아이디와 패스워드 입력 화면을 생성한다(도 29참조). 즉, 레이어를 클릭하여 기능추가에서 '로그인'버턴을 클릭한다. 팝업창에서 넣기버턴 클릭하고, 팝업창 닫기를 클릭한 후 저장버턴을 클릭한다.

회원가입 및 아이디/패스워드 찾기 화면은 다음과 같이 생성한다. 레이어를 추가하고 레이어를 클릭한 다음, 기능 추가에서 회원가입 버턴을 클릭한 후, 팝업창에서 회원가입/아이디 비번찾기 넣기 버턴을 클릭한다. 팝업창에서 '닫기'를 클릭한 후 저장버턴을 클릭한다(도 30참조).

로그인에 배경(테두리)을 넣는 방법은 다음과 같은 방법으로 수행된다. 레이어를 추가하고, 기능추가에서 '이미지' 버턴을 통해 이미지를 추가한다. 이 경우 3개의 레이어 중 ⓛ번 레이어를 가장 아래에 위치해야 하므로 Z값을 가장 낮게 설정한다. 마지막으로 ②, ③ 레이어의 색상값을 제거하고 수정버턴을 클릭하고, 로그인 페이지 저장버턴을 클릭한다(도 31참조).

상술한 방식으로 약관/회원 정보, 온라인 견적, 공지사항, 제품소개 등과 같은 페이지를 생성할 수 있다.

이외에도 기능 복사 및 기능 넣기를 이용할 수 있다. 기능 복사와 기능 넣기는 동일한 레이어를 각 페이지의 동일한 위치에 복사할 경우에 유용하다. 기능 복사는 기능을 복사할 레이어를 선택(①)하고, 기능복사(②) 버턴을 클릭한다. 팝업창에서 복사할 이름을 입력하고 레이어복사 버턴을 클릭한다. 이후 팝업창에서 확인버턴을 클릭한다(도 32참조). ☜ 이미지 변경 필요

기능 넣기는 복사할 페이지를 선택한 후 복사할 레이어를 선택하고 기능 넣기 버턴을 클릭한다. 팝업창에서 붙여넣기를 클릭한 후 닫기버턴을 클릭한다. 마지막으로 페이지 저장버턴을 클릭한다(도 33참조). ☜ 이미지 변경 필요

이하에서는 퀵메뉴를 생성하는 과정에 대해 알아보기로 한다. 인덱스 페이지 크기를 조정한다. 레이어를 추가하고 클릭한다. 퀵메뉴를 선택하고, 팝업창에서 퀵메뉴를 클릭한다. 또 팝업창에서 확인버턴을 클릭한다(도 34참조).

그리고 동일 또는 유사한 페이지는 페이지 복사를 이용하여 기존 페이지를 활용한다. 즉, 인덱스 페이지를 클릭하여 오픈하고, 복사 버턴을 클릭한다. 그리고 팝업화면에서 확인버턴을 클릭하면 인덱스 페이지 전체가 복사된다(도 35참조).

페이지 이름 변경 및 폴더위치 변경은 변경할 페이지를 클릭하고, 페이지 수정버턴을 클릭하고, 팝업창에서 위치할 폴더를 선택하고, 변경할 페이지 이름을 입력하고 저장버턴을 클릭한다(도 36참조). 저장버턴을 클릭하면 팝업창이 다시 나오는데 여기서 확인 버턴을 클릭한 후 남은 팝업화면에서 닫기를 클릭한다(도 37참조).

또한 폴더내 페이지 이동은 다음과 같은 순서에 의해 진행된다. 일 예로 회사소개의 '오시는 길' 페이지를 '인사말' 위로 이동시키는 방법은 '오시는 길'을 마우스로 드래그하여 '인사말' 위로 이동한다(도 38참조). 이동이 완료되면 '페이지 순서가 바꿨습니다'라는 팝업창이 표시된다(도 39참조). 이때 변경된 페이지는 상단메뉴의 서브메뉴와 좌측메뉴에 바로 적용된다.

이하에서는 본 발명에서 제안하는 기능에 대해 다시 한번 상세하게 알아보기로 한다.

1. 폴더 생성 및 삭제 방법.

폴더 생성: 폴더정보에서 폴더 추가 버턴 클릭→ 폴더명 입력→ 폴더추가 버턴 클릭

폴더 삭제: 폴더 선택→ 삭제버턴 클릭

2. 페이지 생성 및 삭제

페이지 생성: 페이지정보에서 폴더 선택→ 페이지명 입력→ 페이지 추가 버튼 클릭

페이지 삭제: 페이지 선택→ 삭제 버튼

3. 레이어 생성 및 삭제

레이어 생성: 해당 페이지 선택(클릭)→ 레이어정보에서 추가버턴 클릭→ 위치, 크기, 색상 등 조정, 저장버턴 클릭

레이어 삭제: 해당 페이지 선택→ 레이어 선택→레이어정보에서 삭제버턴 클릭→저장버턴 클릭

4. 이미지(그림)에 링크하는 방법

레이어생성(추가버튼 클릭)→위치 및 크기 조정→저장버튼 클릭 →레이어 클릭 → 텍스트버튼 클릭 → 팝업창에서 그림버튼 선택 → 해당그림 찾기 및 상품이미지업로드 클릭 → '상세페이지 그림 등록하기' 클릭 → 해당이미지 선택 → URL클릭 사전에 복사(CTRL+C)한 내용 URL주소에 붙여넣기(CTRL+V)하고 확인버튼 클릭 → 넣기버튼 클릭 → 팝업 닫기(X) → ⑬배경(삭제 및 수정) → ⑭저장버튼 클릭

5. 텍스트에 링크하는 방법

레이어생성(추가버튼 클릭) → 위치 및 크기 조정 → 저장버튼 클릭 → 레이어 클릭 → 텍스트버튼 클릭 → 팝업창에서 텍스트 입력 → 텍스트 선택(역상) → URL클릭 후 사전에 복사(CTRL+C)한 내용 URL주소에 붙여넣기(CTRL+V)하고 확인버튼 클릭 → 넣기버튼 클릭 → 팝업 닫기(X) → 색상 삭제 및 수정 버턴 클릭 → 저장버튼 클릭

6. 링크된 이미지 및 텍스트 삭제 방법

해당 레이어 클릭 → 텍스트버튼 클릭 → 빼기 버튼 클릭 → 팝업 닫기(X)

→ 저장버튼 클릭

7. 레이어에 그림 넣기 또는 배경 넣는 방법

레이어생성(추가버튼 클릭) → 위치 및 크기 조정 → 저장버튼 클릭 → 레이어 클릭 → 이미지버튼 클릭 → 팝업창에서 해당 이미지 찾기 및 그림업로드 클릭 → 그림으로 넣기 또는 배경으로 넣기 선택 → 팝업 닫기(X) → 색상 삭제 및 수정 버턴 클릭 → 저장버튼 클릭

8. 레이어에 그림 또는 배경 삭제하는 방법

해당 레이어 선택 → 기능추가에서 이미지버튼 클릭 → 삭제 클릭 → 팝업 닫기(X) → 저장버튼 클릭

9. 페이지 복사(장점: 로고, 상단 메뉴, 하단 메뉴, 좌측 메뉴 등과 같은 페이지를 만들어 놓고, 복사를 통해 다른 페이지를 간단한 수정을 통해 생성할 수 있다.)

복사할 페이지 클릭 → 복사 버튼 클릭 → 팝업화면에서 확인버튼 클릭

10. 페이지 이름 변경 및 폴더 위치 변경

해당 페이지 클릭 → 수정 버튼 클릭 → 팝업화면에서 폴더선택 및 변경할 페이지 이름 입력 → 저장버튼 클릭 → 팝업화면에서 확인버튼 클릭 → 팝업창 닫음(X)

11 : 좌측메뉴 만들기

해당 레이어 클릭 → 기능추가에서 네비 버튼을 클릭 → 팝업창에서 "세로폴더"를 선택 → 닫기(X) 클릭 → 필요시 색상 삭제 및 수정 버턴 클릭 → 저장버튼을 클릭

12 : 레이어가 중복될 경우 레이어 표출방법

레이어의 Z값을 조절하여 레이어 배치, Z값이 낮을수록 레이어가 아래에 위치한다.

13 : 각 페이지의 URL 주소 확인방법

해당 페이지 클릭 → 미리보기 클릭 → 상단 주소창 복사 → TEXT(또는 한글)로 저장

14 : 새로운 페이지 만들기(예시, 기타 폴더에 "회원가입 페이지" 만드는 방법)

로그인 페이지가 만들어 졌으니 로그인 페이지 클릭 → 복사버튼 클릭 → 팝업에서 확인버튼 클릭 → 수정버튼 클릭 → 저장할 폴더 선택, 변경하고자 하는 페이지이름 입력 및 저장버튼 클릭 → 닫기(X) 클릭

15 : 기능복사 및 기능넣기

기능복사: 기능을 복사할 레이어를 선택한다. → 기능복사버튼을 클릭한다. → 팝업창에서 복사할 이름을 입력하고 레이어복사 버튼을 클릭한다(일부 고유명사는 안됨) → 팝업창에서 확인버튼을 클릭한다.

기능넣기: 복사할 레이어를 선택한다. → 기능넣기 버튼을 클릭한다. → 팝업창에서 붙여넣기를 클릭한다. → 닫기(X)를 클릭한다. → 마지막으로 페이지 저장버튼을 클릭한다.

16: 게시판(일반형, 자료형(갤러리형)) 만드는 방법

새로운 레이어 생성 → 게시판버튼 클릭 → 팝업에서 게시판추가버튼 클릭 → 새로운 팝업에서 게시판이름 및 게시판 code값 입력 → 게시판생성버튼 클릭 → 새로운 팝업에서 insert(레이어에 게시판 삽입)버튼 클릭 → 닫기(X) 클릭 → 필요시 색상 삭제 및 수정버튼 클릭 → 저장버튼 클릭

17 : 폴더내에서 페이지 이동 방법

해당 폴더를 선택한다. → 이동하고자 하는 페이지를 마우스로 클릭하여 원하는 페이지 위치로 이동한다.

추가적으로 본 발명은 페이지를 제작한 소스 코드를 압축 및 암호화하여 서버에 전송하여 DB에 저장한다. 즉 압축 및 암호화하여 저장함으로써 서버에 저장되는 저장용량을 감소시킬 수 있다. 일예로 웹 페이지의 압축되지 않은 웹페이지의 소스코드의 용량이 22KB인 경우, 해당 파일을 압축하면 5KB로 감소된다.

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

Claims (11)

1. 제작도구를 이용하여 홈페이지를 제작하는 방법에 있어서,
   문자 또는 이미지 입력이 가능한 레이어를 적층하는 홈페이지 제작 방법.
   
2. 제 1항에 있어서, 상기 홈페이지를 제작한 소스 코드를 암축 및 암호화하여 서버로 전송함을 특징으로 하는 홈페이지 제작 방법.
   
3. 제 1항에 있어서, 상기 제작도구는
   레이어를 생성 및 삭제하는 제작도구를 포함하는 레이어정보 제작도구와 페이지를 생성, 삭제, 수정, 저장하는 제작도구를 포함하는 페이지정보 제작도구 및 폴더를 생성, 삭제하는 제작도구를 포함하는 폴더 제작도구를 포함함을 특징으로 하는 홈페이지 제작 방법.
   
4. 제 3항에 있어서, 상기 레이어정보 제작도구는,
   레이어 추가, 레이어 삭제, 레이어 크기, 레이어 색상, 레이어 투명도 항목을 포함함을 특징으로 하는 홈페이지 제작 방법.
   
5. 제 3항에 있어서, 상기 페이지정보 제작도구는,
   페이지 추가, 페이지 저장, 페이지 수정, 페이지 삭제, 페이지 복사 항목을 포함함을 특징으로 하는 홈페이지 제작 방법.
   
6. 제 4항 내지 제 5항 중 어느 한 항에 있어서,
   화면 전체에 이미지를 표출하는 배경, 레이어에 배경을 삽입하는 이미지, 페이지를 이동하는 네비, 이미지 또는 텍스트 형태로 링크할 수 있는 텍스트, 페이지나 레이어에 플래쉬를 삽입하는 플래쉬, 일정 크기로 페이지를 만드는 팝업, 홈페이지 우측 또는 좌측에 위치하며, 스크롤바를 위/아래로 이동할 경우 동시에 이동하는 퀵메뉴, 레이어를 복사하는 기능복사, 복사한 레이어를 붙여넣기하는 기능넣기 항목으로 구성된 기능추가 항목을 포함함을 특징으로 하는 홈페이지 제작 방법.
   
7. 제 6항에 있어서, 상기 레이어 크기는,
   표시된 레이어의 드래그하거나, 상기 레이어정보 제작도구에 포함되어 있는 넓이, 높이 항목에 특정 숫자를 입력하여 조절함을 특징으로 하는 홈페이지 제작 방법.
   
8. 제 6항에 있어서, 레이어가 2개 이상 중첩되는 경우, 상기 레이어정보 제작도구에 포함되어 있는 Z값을 이용하여 특정 레이어가 표출되도록 함을 특징으로 하는 홈페이지 제작 방법.
   
9. 제 6항에 있어서, 특정 레이어에 특정 페이지를 링크하는 방법은,
   상기 텍스트를 클릭하여 상기 레이어에 표출되는 이미지를 선택하고, 선택된 이미지와 특정 홈페이지의 URL을 매칭시켜 저장함을 특징으로 하는 홈페이지 제작 방법.
   
10. 제 9항에 있어서, 복수개의 레이어로 구성된 모듈을 포함하며, 상기 모듈을 구성된 페이지를 복사하여 다른 페이지를 형성함을 특징으로 하는 홈페이지 제작 방법.
    
11. 제 6항에 있어서, 상기 기능추가 항목은
    쇼핑몰 카테고리를 넣고 삭제하는 카테고리, 상품리스트를 넣고 삭제하는 상품등록을 더 포함함을 특징으로 하는 홈페이지 제작 방법.

Images