KR102149189B1 - 온라인을 통한 웹페이지 제작방법과 제작시스템 - Google Patents

Abstract

본 발명은 웹페이지 제작방법과 제작시스템에 관한 것으로서, 좀 더 상세하게는 온라인에서 제작자가 직접 다양한 콘텐츠를 자신이 원하는 디자인 프레임에 맞춰 선택 방식으로 웹페이지를 제작할 수 있는 온라인을 통한 웹페이지 제작방법과 제작시스템에 관한 것으로, 처리모듈이 메뉴별 편집프로세스를 활성화하는 제1단계; 제작페이지 편집모듈이 해당 편집프로세스에 따라 제작페이지의 기본 프레임과, 상기 기본 프레임을 구성하는 헤더 레이어와 메뉴 레이어와 섹션 레이어와 풋터 레이어를 설정하는 제2단계; 상기 제작페이지 편집모듈이 종렬로 배치되는 섹션 레이어의 개수를 입력값에 맞춰 세팅하고, 상기 섹션 레이어에서 횡렬로 배치되는 분할구간을 입력값에 맞춰 세팅하는 제3단계; 상기 제작페이지 편집모듈이 분할구간에 삽입되는 콘텐츠 타입을 입력값에 맞춰 세팅하고 분할구간별로 식별값을 각각 설정해서 제작페이지의 기본 프레임을 확정하는 제4단계; 상기 분할구간 선택으로 출력된 식별값에 따라 콘텐츠 삽입모듈이 해당 분할구간의 콘텐츠 타입에 대응한 입력프로세스를 실행하고, 상기 입력프로세스에 따라 분할구간에 콘텐츠를 삽입하는 제5단계; 상기 처리모듈이 콘텐츠가 삽입된 제작페이지의 URL를 설정하고 소스코드를 데이터 저장모듈에 저장해서 온라인 네트워크에 링크하는 제6단계;를 포함하는 것이다.

Description

온라인을 통한 웹페이지 제작방법과 제작시스템{WEB-PAGE CREATING METHOD AND SYSTEM ON ONLINE}

본 발명은 웹페이지 제작방법과 제작시스템에 관한 것으로서, 좀 더 상세하게는 온라인에서 제작자가 직접 다양한 콘텐츠를 자신이 원하는 디자인 프레임에 맞춰 선택 방식으로 웹페이지를 제작할 수 있는 온라인을 통한 웹페이지 제작방법과 제작시스템에 관한 것이다.

일반적으로 쇼핑사이트 또는 웹매거진 등의 구성 웹페이지를 생성하기 위해서는, 웹페이지 제작자가 HTML(Hyper Text Makeup Language), ASP(Active Server Page), PHP(Personal Home Page Tools) 등의 웹 언어를 사용하여 직접 소스 파일을 생성하고, 작업이 완료된 소스 파일을 FTP(File Transfer Protocol)를 통하여 업 로드했다. 따라서, 웹 편집 초보자는 물론 웹 프로그램 전문가들도 웹페이지를 제작하기에는 많은 시간과 노력이 필요했고, 특히 월간, 격월, 주간, 계간 등, 일정 기간 단위로 다수의 콘텐츠를 다양한 디자인 형식의 웹페이지를 구축해야 하는 웹매거진 분야에서는 제작자에게 적지 않은 업무 강도와 작업 시간이 요구되었다.

한편, 근래에는 웹페이지를 좀 더 간편하게 제작할 수 있는 나모 웹 에디터 또는 드림 위버와 같은 웹페이지 작성 솔루션들이 개발되었다. 그러나 이러한 방식은, 정해진 순서에 따라 웹페이지의 레이아웃, 디자인 등을 선택해야 하므로 제작자의 취향과 목적에 맞는 디자인 프레임의 웹페이지를 제작하는 것이 어렵고, 상기 웹페이지 작성 솔루션들은 오프라인상에서 실행되므로 웹 서버에 자신이 생성한 웹페이지를 직접 업로드하기 위해서 또다시 FTP에 대한 기본 지식이 요구된다는 문제점이 있었다.

한편, 이와 같은 문제점을 해결하기 위해, 일정한 웹페이지 작업 환경을 제공하는 네트워크 기반의 웹페이지 편집 방법이 개발되었다. 그러나 기존의 네트워크 기반의 웹페이지 편집 방법은, 웹페이지의 프레임 레이아웃이 제한적인 단점을 해결하지 못했고, 웹페이지 제작 작업이 네트워크상에서 모두 완료되는 것이 아니라, 웹 서버에서 사용자의 입력 정보를 바탕으로 HTML 코딩 작업을 추가해야 한다는 점에서 실시간으로 웹페이지를 제작할 수는 없었다.

한편, HTML 코딩 과정은 태그를 생성하는 과정의 연속이므로 작업 시간이 많이 소요됐다. 이를 해결하기 위해서 웹 프로그래머는 HTML 코딩을 자동으로 수행하게 해주는 기능을 포함하는 웹 빌더라는 웹 기반 솔루션을 이용하였고, 이로 인해 HTML 코딩에 소요되는 시간을 크게 단축할 수 있었다. 그러나 종래의 웹 빌더는 문자, 이미지, 및 프로그램의 시작 및 종료를 나타내기 위한 태그만을 자동으로 생성할 뿐, 문자, 이미지, 및 프로그램의 파라미터, 즉 그 크기, 및 위치 등은 웹 프로그래머가 구체적으로 다시 지정하여야 하는 번거로운 문제점이 있었다.

또한, 종래 웹 빌더는, 웹페이지의 레이아웃을 결정함에 있어 정해진 종류의 프레임 레이아웃만을 제공하고, 그 중 하나를 웹 프로그래머가 선택하는 방식이므로, 웹페이지의 디자인을 선택 또는 결정함에 있어 종래 웹 빌더가 제공하는 레이아웃을 항상 고려해야 하는 문제점이 있었다.

또한, 제작자가 웹페이지에 구현된 플래시의 구성을 변경하고자 하는 경우, 플래시 프로그램을 사용할 줄 모르면 그 변경이 불가능하다는 문제점 또한 있었다.

선행기술문헌 1. 특허공개번호 제10-2012-0010066호(2012.02.02 공개)

이에 본 발명은 상기의 문제를 해소하기 위한 것으로, 온라인에서 제작자가 직접 다양한 콘텐츠를 자신이 원하는 디자인 프레임에 맞춰 선택 방식으로 웹페이지를 제작할 수 있는 온라인을 통한 웹페이지 제작방법과 제작시스템의 제공을 해결하고자 하는 과제로 한다.

상기의 과제를 달성하기 위하여 본 발명은,

처리모듈이 메뉴별 편집프로세스를 활성화하는 제1단계;

제작페이지 편집모듈이 해당 편집프로세스에 따라 제작페이지의 기본 프레임과, 상기 기본 프레임을 구성하는 헤더 레이어와 메뉴 레이어와 섹션 레이어와 풋터 레이어를 설정하는 제2단계;

상기 제작페이지 편집모듈이 종렬로 배치되는 섹션 레이어의 개수를 입력값에 맞춰 세팅하고, 상기 섹션 레이어에서 횡렬로 배치되는 분할구간을 입력값에 맞춰 세팅하는 제3단계;

상기 제작페이지 편집모듈이 분할구간에 삽입되는 콘텐츠 타입을 입력값에 맞춰 세팅하고 분할구간별로 식별값을 각각 설정해서 제작페이지의 기본 프레임을 확정하는 제4단계;

상기 분할구간 선택으로 출력된 식별값에 따라 콘텐츠 삽입모듈이 해당 분할구간의 콘텐츠 타입에 대응한 입력프로세스를 실행하고, 상기 입력프로세스에 따라 분할구간에 콘텐츠를 삽입하는 제5단계; 및

상기 처리모듈이 콘텐츠가 삽입된 제작페이지의 URL를 설정하고 소스코드를 데이터 저장모듈에 저장해서 온라인 네트워크에 링크하는 제6단계;

를 포함하는 온라인을 통한 웹페이지 제작방법이다.

상기의 본 발명은, 온라인에서 제작자가 직접 다양한 콘텐츠를 자신이 원하는 디자인 프레임에 맞춰 선택 방식으로 웹페이지를 제작할 수 있는 효과가 있다.

도 1은 본 발명에 따른 제작시스템의 일실시 예를 도시한 블록도이고,
도 2는 상기 제작시스템을 기반으로 실시되는 제작방법의 일실시 예를 순차로 도시한 플로차트이고,
도 3은 본 발명에 따른 제작시스템이 웹페이지를 제작하기 위해 웹 도구가 출력하는 웹페이지의 일실시 예를 개략적으로 도시한 도면이고,
도 4 내지 도 7은 본 발명에 따른 제작시스템이 웹페이지를 제작하기 위해 웹 도구가 출력하는 웹페이지의 일실시 예를 순차로 도시한 도면이고,
도 8은 본 발명에 따른 제작시스템이 웹페이지 제작을 위해 인용하는 다른 웹페이지 모습을 개략적으로 도시한 도면이고,
도 9 내지 도 11은 본 발명에 따른 제작시스템이 웹페이지를 제작하기 위해 웹 도구가 출력하는 웹페이지의 다른 실시 예를 순차로 도시한 도면이다.

상술한 본 발명의 특징 및 효과는 첨부된 도면과 관련한 다음의 상세한 설명을 통하여 분명해질 것이며, 그에 따라 본 발명이 속하는 기술분야에서 통상의 지식을 가진 자가 본 발명의 기술적 사상을 용이하게 실시할 수 있을 것이다. 본 발명은 다양한 변경을 가할 수 있고 여러 가지 형태를 가질 수 있는바, 특정 실시 예들을 도면에 예시하고 본문에 상세하게 설명하고자 한다. 그러나 이는 본 발명을 특정한 개시형태에 대해 한정하려는 것이 아니며, 본 발명의 사상 및 기술 범위에 포함되는 모든 변경, 균등물 내지 대체물을 포함하는 것으로 이해되어야 한다. 본 출원에서 사용한 용어는 단지 특정한 실시 예들을 설명하기 위해 사용된 것으로, 본 발명을 한정하려는 의도가 아니다.

이하, 본 발명을 구체적인 내용이 첨부된 도면에 의거하여 상세히 설명한다.

도 1은 본 발명에 따른 제작시스템의 일실시 예를 도시한 블록도이다.

도 1을 참조하면, 본 발명의 제작시스템은 제작자가 자신의 클라이언트(20, 20')를 활용해서 네트워크 통신망을 기반으로 제작서버(10)에 접속하고, 제작서버(10)는 클라이언트(20, 20')의 입력데이터에 대응해서 웹페이지 제작을 위한 후속프로세스를 진행하며 결과데이터를 전송한다.

따라서 제작자는 웹페이지 제작을 위해서 제작서버(10)에 접속해야 하고, 제작서버(10)의 서비스 이용 조건, 즉 회원가입과 수수료 지불 등의 웹페이지 제작을 위한 회원가입 및 사용등록 요건을 충족시킨다.

웹페이지 제작을 위한 제작서버(10)를 설명하면, 제작서버(10)는, 제작페이지 데이터와 콘텐츠 데이터와 사용자정보 데이터를 저장 관리하는 데이터 저장모듈(11)과, 제작서버(10)의 서비스 이용을 위한 프로세스를 처리하는 사용자정보 확인모듈(12)과, 제작페이지를 제작하기 위한 기본 프레임과 구성 레이어를 설정하는 제작페이지 편집모듈(13)과, 상기 제작페이지의 지정된 위치별 콘텐츠 삽입을 위한 프로세스를 처리하는 콘텐츠 삽입모듈(14)과, 웹브라우저의 출력페이지를 스캔해서 스캔이미지를 생성하고 스캔이미지의 표시물을 파악하고 표시구역을 설정하며 표시구역을 기준으로 대영역과 소영역으로 분류하는 한편, 표시물의 콘텐츠 타입, 즉 텍스트, 이미지, 동영상 등의 타입을 확인하는 이미지 분석모듈(15)과, 상기 표시구역에 따라 콘텐츠 타입을 세팅하는 삽입위치 설정모듈(16)과, 데이터 저장모듈(11)과 사용자정보 확인모듈(12)과 제작페이지 편집모듈(13)과 콘텐츠 삽입모듈(14)과 이미지 분석모듈(15)과 삽입위치 설정모듈(16)과 연동하며 설정된 프로세스에 따라 해당 데이터를 연산 처리하는 처리모듈(17)로 구성된다.

본 실시의 제작시스템은 물론, 상기 제작시스템을 기반으로 실시되는 본 발명에 따른 제작방법을 도면을 참조해서 상세히 설명한다.

도 2는 상기 제작시스템을 기반으로 실시되는 제작방법의 일실시 예를 순차로 도시한 플로차트이고, 도 3은 본 발명에 따른 제작시스템이 웹페이지를 제작하기 위해 웹 도구가 출력하는 웹페이지의 일실시 예를 개략적으로 도시한 도면이고, 도 4 내지 도 7은 본 발명에 따른 제작시스템이 웹페이지를 제작하기 위해 웹 도구가 출력하는 웹페이지의 일실시 예를 순차로 도시한 도면이다.

도 1 내지 도 7을 참조하면, 본 실시의 웹페이지 제작방법은, 제작서버(10)가 제공하는 서비스의 이용 조건을 제작자가 충족하는지 사용자정보 확인모듈(12)이 확인하는 사용등록 확인 단계(S10)와, 페이지 제작을 위해서 제작페이지 편집모듈(13)이 편집프로세스를 활성화하는 단계(S20)와, 제작페이지 편집모듈(13)과 이미지 분석모듈(15)이 제작페이지의 기본 레이아웃을 설정하는 단계(S30)와, 제작페이지 편집모듈(13)과 이미지 분석모듈(15)이 콘텐츠가 위치할 구간을 설정하는 단계(S40)와, 제작페이지 편집모듈(13)과 이미지 분석모듈(15)이 상기 구간에 삽입될 콘텐츠 타입을 세팅하는 단계(S50)와, 해당 구간에 콘텐츠를 삽입하는 단계(S60)와, 상기 콘텐츠가 삽입된 제작페이지의 URL를 설정하고 소스코드를 데이터 저장모듈(11)에 저장하는 제작페이지 정보 저장 단계(S70)로 구성된다.

상기의 웹페이지 제작방법을 각 단계별로 보다 상세하게 설명한다.

S10; 사용등록 확인 단계

처리모듈(17)은 제작페이지 편집모듈(13)의 편집프로세스와 콘텐츠 삽입모듈(14)의 입력프로세스를 암호화한다. 따라서 사용 조건을 충족하지 못한 제작자가 제작서버(10)의 운영 웹사이트에 접속하고 로그인해도 제작페이지의 편집과 콘텐츠 삽입 등의 제작 기능은 이용할 수 없다.

본 실시는 미등록된 제작자가 상기 웹사이트에 접속해서 로그인해도 신규 제작페이지는 제작할 수 없다. 또한, 상기 제작자가 제작했던 제작페이지를 열람할 수는 있으나, 상기 편집프로세스와 입력프로세스가 제한되므로 기존 제작페이지의 편집 기능은 제한된다.

계속해서 사용자정보 확인모듈(12)은 웹사이트에 로그인한 제작자의 사용등록 여부를 확인하고, 상기 사용등록이 확인되면 처리모듈(17)이 암호화했던 편집프로세스와 입력프로세스를 복호화한다. 따라서 웹사이트에 로그인한 제작자는 신규 제작페이지를 제작할 수 있고, 기존 제작페이지를 열람 및 편집할 수 있다.

S20; 편집프로세스 활성화 단계

사용자정보 확인모듈(12)의 복호화가 처리되면, 처리모듈(17)은 편집프로세스와 입력프로세스는 활성화해서, 제작자가 도 3의 (a)도면과 같이 '제작' 메뉴를 선택해 실행되도록 할 수 있다.

본 실시의 처리모듈(17)은 제작자가 '제작 > 대상 웹 지정 > 새로만들기' 메뉴를 클릭하면, 제작페이지의 명칭(웹매거진 명칭)과 실행 웹주소 입력란을 제시한다. 제작페이지의 명칭은 제작자가 자신이 제작한 제작페이지를 식별하고 분류 및 저장하기 위한 주지의 식별기호이고, 실행 웹주소는 제작페이지가 웹에 링크되도록 설정한 URL 등일 수 있다. 제작페이지의 URL 설정은 제작페이지를 완성한 이후에 설정할 수도 있으나, 제작페이지를 제작하기 이전에 설정할 수도 있다.

S30; 기본 레이아웃 설정 단계

제작페이지 편집모듈(13)이 해당 편집프로세스에 따라 제작페이지의 기본 프레임과, 상기 기본 프레임을 구성하는 제1헤더 레이어와 제1메뉴 레이어와 제1섹션 레이어와 제1풋터 레이어를 설정한다.

본 실시의 제작페이지 편집모듈(13)은, 제작페이지의 기본 프레임 및 기본 레이어를 제작자의 직접 선택을 통한 입력값에 따라 설정할 수도 있고, 제작자가 제시한 웹페이지를 분석해서 인용하는 방식으로 설정할 수도 있다. 이를 위해 본 실시의 제작페이지 편집모듈(13)은 도 3의 (b)도면과 같이 '프레임 설정' 메뉴를 구성하고, '프레임 설정' 메뉴의 하위 메뉴로 '직접선택' 메뉴와 '인용' 메뉴를 구성한다.

본 실시 예는 제작자가 '프레임 설정 > 직접선택' 메뉴를 선택했고, 제작페이지 편집모듈(13)은 상기 메뉴의 하위 메뉴로 '헤더 설정'과 '풋터 설정'과 '레이어 설정'과 '섹션별 옵션 설정'과 '콘텐츠 타입 설정'을 예시했다.

본 실시의 제작페이지 편집모듈(13)은 도 4와 같이 제작페이지(A)의 기본 프레임을 헤더 레이어와 메뉴 레이어와 섹션 레이어와 풋터 레이어를 설정한다. 본 실시의 헤더 레이어는 제작페이지(A)의 상단 공통영역으로서 일반적으로 명칭이 입력되고, 메뉴 레이어는 제작페이지(A) 간의 이동 메뉴이고, 풋터 레이어는 제작페이지(A)의 하단 공통영역으로서 일반적으로 제작페이지(A)의 저작권자, 제작자, 주소 등의 기본정보가 입력되고, 섹션 레이어는 제작자가 제시할 텍스트, 이미지, 동영상 등의 각종 콘텐츠가 입력된다.

본 실시의 제작페이지 편집모듈(13)은 헤더 레이어 및 풋터 레이어에 삽입할 정보는 입력페이지(B)와 같이 데이터 저장모듈(11)에 저장된 파일을 검색해서 첨부하도록 프로세싱할 수도 있고, 제작자가 직접 소스코드를 입력하거나 텍스트 입력 등을 통해 작성해서 삽입하도록 프로세싱할 수도 있다.

본 실시에서 도면을 참조해 명시하고 있지 않으나, 메뉴 레이어에 삽입할 정보 역시 헤더 레이어 및 풋터 레이어 생성과 동일하게 생성할 수도 있다.

S40; 구간 설정 단계

제작페이지 편집모듈(13)이 종렬로 배치되는 섹션 레이어의 개수를 입력값에 맞춰 세팅하고, 상기 섹션 레이어에서 횡렬로 배치되는 분할구간을 입력값에 맞춰 세팅한다.

본 실시의 제작페이지 편집모듈(13)은 제작자가 직접 선택해서 상기 기본 프레임의 섹션 레이어 개수를 설정할 수 있도록, 도 5의 (a)도면과 같이 섹션 개수 입력란(C)을 출력한다. 제작자는 상기 입력란에 섹션 레이어의 개수(섹션 개수)를 입력하고, 제작페이지 편집모듈(13)은 해당 입력값에 따라 섹션 레이어를 기본 프레임에 생성한다.

계속해서 제작페이지 편집모듈(13)은 상기 입력값에 대응하는 개수의 섹션 레이어별로 분할구간을 설정할 수 있도록, 도 5의 (b)도면과 같이 선택창(D)을 출력한다. 본 실시의 선택창(D)은 섹션 레이어에서 횡렬로 배치되는 분할구간(div1 내지 div4)의 개수를 제작자가 보고 선택하도록 S1 내지 S4 타입별로 옵션을 제시하고, 제작자가 1개의 옵션을 선택하면 제작페이지 편집모듈(13)은 도 5의 (b)도면의 섹션1 내지 섹션3에 게시한다. 물론 제작페이지 편집모듈(13)은 프로세스 차원에서 제작자가 선택한 옵션에 대응하는 입력값을 수신하면 해당하는 섹션 레이어에 분할구간이 형성되도록 연산처리한다.

본 실시의 섹션 개수 설정은 제작자가 직접 텍스트로 입력하고, 분할구간 설정은 제작페이지 편집모듈(13)이 제시한 옵션을 선택한 것으로 했으나, 이외에도 섹션 레이어와 분할구간의 개수를 설정할 수 있는 입력 방식이라면 이하의 청구범위를 벗어나지 않는 한도 내에서 다양하게 변형실시될 수 있다.

제작페이지 편집모듈(13)은 섹션 레이어의 개수와 섹션 레이어별 분할구간이 세팅되면 분할구간별로 식별값을 설정해서 섹션 레이어의 분할구간별 식별이 가능하도록 한다.

미설명한 '슬라이더'는 섹션 레이어를 시각적으로 분할함 없이 다수의 콘텐츠를 시간차에 따라 지정된 순서 또는 랜덤하게 출력하는 공지의 디스플레이 기술이다. 슬라이더 방식 또한 섹션 레이어에 시각적 분할을 전제하므로, 본 실시의 분할구간에 예시로 인정되어야 한다.

S50; 콘텐츠 타입 세팅 단계

콘텐츠 삽입모듈(14)은 상기 분할구간 선택으로 출력된 식별값에 따라 해당 분할구간의 콘텐츠 타입에 대응한 입력프로세스를 실행한다.

상기 분할구간은 다양한 종류의 콘텐츠를 게시할 수 있으므로, 콘텐츠의 종류에 따라 다양한 입력프로세스가 진행되어야 한다. 즉, 텍스트를 입력할 경우에는 해당 분할구간 선택시 워드프로세스가 진행되어야 하고, 동영상 또는 이미지 등을 입력할 경우에는 해당 분할구간 선택시 검색창을 팝업해야 하는 것이다. 따라서 콘텐츠 타입이 미지정된 분할구간을 선택하면 워드프로세스는 물론 검색창 모두가 팝업되어서 제작자에게 혼선을 주게 된다.

따라서 본 발명은 도 6의 (a)도면과 같이 제작자가 '콘텐츠 타입 설정' 메뉴를 선택하면, 콘텐츠 삽입모듈(14)은 제작페이지 편집모듈(13)이 설정한 섹션 레이어 개수만큼 하위 메뉴(섹션1, 섹션2, 섹션3)을 출력하고, 제작자가 상기 하위 메뉴를 선택하면, 섹션 레이어별 콘텐츠 타입을 선택하기 위한 선택창(E)을 출력한다. 본 실시 예는 섹션3에 해당하는 섹션 레이어의 분할구간이 3개이므로, 콘텐츠 삽입모듈(14)은 선택창(E)에 분할구간 3개에 각각 삽입될 수 있는 타입을 제시하고, 상기 타입들 중 1개를 선택하면 하위 메뉴 섹션1과 하위 메뉴 섹션2와 같이 분할구간별로 콘텐츠 타입을 게시한다.

S60; 구간별 콘텐츠 삽입 단계

섹션 레이어의 분할구간별로 삽입될 콘텐츠 타입이 모두 설정되면, 콘텐츠 삽입모듈(14)은 입력값에 따라 도 6의 (b)도면과 같이 분할구간별 레이아웃 이미지(F)를 출력하고, 제작자가 레이아웃 이미지(F)에 표시된 분할구간 파트를 선택하면 해당 콘텐츠 타입을 입력하기 위한 툴이 실행된다.

본 실시 예는 레이아웃 이미지(F)에서 사용자가 선택한 분할구간 파트에 텍스트가 설정되었으므로, 텍스트 입력이 가능하도록 콘텐츠 삽입모듈(14)은 워드프로세스 창(G)을 출력한다.

콘텐츠 삽입모듈(14)은 전술한 입력프로세스에 따라 분할구간에 콘텐츠를 삽입하고, 이를 통해 기본 프레임을 바탕으로 다양한 콘텐츠가 게시된 제작페이지를 제작한다.

S70; 제작페이지 정보 저장 단계

제작페이지 편집모듈(13)과 콘텐츠 삽입모듈(14)에 의한 제작페이지가 완성되면, 처리모듈(17)은 네트워크 통신망에 링크하기 위해서 제작페이지에 URL을 설정하고 소스코드를 데이터 저장모듈(11)에 저장한다. 따라서 타인이 URL을 통해 제작페이지에 접속을 시도하면 소스코드를 패킷 방식으로 전송해서 상기 타인의 클라이언트에 출력시킨다.

제작페이지의 네트워크 기술은 이미 공지의 기술이므로, 제작페이지에 URL을 설정하고 통신서버에 연결하기 위한 구체적인 기술 설명은 생략한다.

전술한 실시 예는 새로운 제작페이지를 제작하기 위한 프로세스였으나, 이외에도 본 실시의 제작시스템은 기존하는 제작페이지를 편집할 수 있다.

이를 위해 기존하는 제작페이지를 제작자가 검색할 수 있어야 하므로, 처리모듈(17)이 사용자정보를 기준으로 해당 제작자의 제작 리스트를 도 7의 (a)도면과 같이 게시해서 제작자가 직접 선택하도록 하거나, 검색란을 출력해서 공지의 키워드 검색 방식으로 제작자가 데이터 저장모듈(11)을 검색하도록 한다.

본 실시 예는 상기한 검색 프로세스로 제작페이지를 검색하면, 상기 제작페이지를 이루는 다수의 페이지들 중 하나를 선택하도록 처리모듈(17)이 그래픽적으로 상기 페이지들을 출력한다. 제작자는 상기 페이지들 중 1개를 선택하면, 해당 페이지의 레이아웃 이미지(F)가 도 6의 (b)도면과 같이 출력된다.

도 8은 본 발명에 따른 제작시스템이 웹페이지 제작을 위해 인용하는 다른 웹페이지 모습을 개략적으로 도시한 도면이고, 도 9 내지 도 11은 본 발명에 따른 제작시스템이 웹페이지를 제작하기 위해 웹 도구가 출력하는 웹페이지의 다른 실시 예를 순차로 도시한 도면이다.

도 1 내지 도 2와 도 8 내지 도 11을 참조하면, 본 실시의 제작시스템은 제작페이지를 구성하는 헤더 레이어와 메뉴 레이어와 섹션 레이어와 풋터 레이어를 제작자가 일일이 설정하지 않고 다른 제작페이지(이하 '출력페이지')의 이미지를 그래픽으로 분석해서 인용하는 방식으로 자동 생성한다.

이를 위해 제작자는 도 3의 (b)도면의 메뉴에서 '프레임 설정' 메뉴의 하위 메뉴인 '인용' 메뉴를 선택한다. 처리모듈(17)은 해당 입력값에 대응해서 이미지 분석모듈(15)을 활성화하고, 도 8의 (a)도면과 같이 웹브라우저에 빌더버튼(H)을 출력한다. 제작자는 다른 웹사이트를 보며 관심 있는 출력페이지를 확인하고, 빌더버튼(H)을 클릭하면 이미지 분석모듈(15)은 빌더버튼(H)의 입력값에 대응해서 해당 출력페이지를 도 8의 (b)도면 같이 이미지 스캔한다.

계속해서 이미지 분석모듈(15)은 스캔이미지(M)에 구성된 표시물(K)의 지정픽셀 범위로 표시구역(L)을 설정하고 콘텐츠 타입을 확인한다. 좀 더 구체적으로 설명하면, 이미지 분석모듈(15)은 스캔이미지(M)에 구성된 표시물(K)을 픽셀 단위로 분석해서 표시물(K)의 형상을 분석하고, 분석된 픽셀의 형상과 규칙성과 컬러와 공극 비율 등에 따라 텍스트, 이미지, 동영상 등의 타입을 확인한다. 스캔이미지(M) 분석을 통한 콘텐츠 타입 확인은 이미 공지의 기술이므로, 콘텐츠 타입 확인에 대한 구체적인 프로세스 설명은 생략한다.

표시물(K)의 범위와 콘텐츠 타입을 확인하면, 이미지 분석모듈(15)은 표시물(K)의 외곽으로부터 지정픽셀 범위까지를 표시구역(L)으로 설정하고, 상하로 이웃하는 표시구역(L) 간의 중앙을 경계로 스캔이미지(M)를 종렬 분할해서 다수의 대영역(d1, d2)으로 구획한다. 1개의 대영역(d1, d2)은 2개 이상의 표시구역(L1, L2)을 구성할 수 있고, 표시구역(L1, L2) 간의 점유 면적과 높낮이는 서로 다를 수 있다. 따라서 상하로 이웃하는 표시구역(L1, L2) 간의 종렬 분할을 위해, 표시구역(L1, L2)의 구분 없이 가장 높은 위치(d12)와 가장 낮은 위치(d22)를 시점으로 이웃하는 다른 표시구역과 상하로 분할해서 대영역(d1, d2)을 생성한다. 즉, 상하로 이웃하는 표시구역(L1, L2) 중 가장 근접한 표시구역 간의 거리를 기준으로 대영역(d1, d2)을 분할하는 것이다.

도 9의 스캔이미지(H)를 예를 들어 설명하면, 본 실시의 대영역(d1, d2)은 대영역1(d1)에서 대영역9까지 분할 구성되고, 대영역(d1, d2)별로 하나 이상의 표시구역(L)이 구성된다.

이미지 분석모듈(15)은 대영역(d1, d2) 중의 1열을 제작페이지의 헤더 레이어로 설정하고 2열을 제작페이지의 메뉴 레이어로 설정하며 종열을 제작페이지의 풋터 레이어로 설정한다. 전술한 대로 다수의 대영역(d1, d2)이 스캔이미지(H)에 형성되므로, 대영역1(d1)을 제작페이지의 헤더 레이어로 지정하고, 대영역2(d2)를 메뉴 레이어로 지정하며, 대영역9를 풋터 레이어로 지정한다.

계속해서 이미지 분석모듈(15)은 메뉴 레이어와 풋터 레이어 사이에 위치한 대영역3 내지 대영역8을 섹션 레이어로 설정하고, 상기 섹션 레이어에 좌우로 이웃하는 표시구역(L1, L2) 간의 중앙을 경계로 섹션 레이어를 횡렬로 분할해서 소영역을 생성한다. 소영역 역시 대영역 분할과 마찬가지로 중앙을 경계로 분할되고, 동일한 종렬로 다수의 표시구역이 배열된 경우에는 가장 근접한 표시구역 간의 거리를 기준으로 소영역이 분할된다.

삽입위치 설정모듈(16)은 상기 소영역의 표시구역(L1, L2)별로 확인된 콘텐츠 타입을 해당 표시구역(L1, L2)에 세팅한다. 이미지 분석모듈(15)은 표시구역(L1, L2)의 범위에 적용된 콘텐츠 타입을 앞서 확인했으므로, 해당 표시구역(L1, L2)에 콘텐츠 타입을 세팅해서 제작자의 표시구역(L1, L2) 선택시 해당 콘텐츠 타입의 콘텐츠를 삽입하기 위한 입력프로세스, 즉, 워드프로세서 또는 이미지/동영상 검색을 위한 프로세스를 실행한다.

전술한 세팅 과정을 통해 상기 소영역의 표시구역은 분할구간으로 지정되고, 표시구역(L1, L2)별 콘텐츠 타입 세팅 과정에서 식별값이 설정되어서, 제작페이지의 기본 프레임이 확정된다. 확정된 상기 기본 프레임은 데이터파일로 저장할 수 있고, 도 11의 (a)도면과 같은 검색을 통해 도 11의 (b)도면과 같이 실행시킬 수 있다.

상기 기본 프레임이 확정되면 콘텐츠 삽입모듈(14)은 분할구간별 레이아웃 이미지(F)를 출력하고, 제작자가 레이아웃 이미지(F)에 표시된 분할구간 파트를 선택하면 해당 콘텐츠 타입을 입력하기 위한 툴이 실행된다. 즉, 분할구간에 해당하는 표시구역을 선택하면 해당 표시구역의 식별값에 따라 콘텐츠 삽입모듈(14)이 해당 표시구역의 콘텐츠 타입에 대응한 입력프로세스를 실행하고, 제작자가 상기 입력프로세스에 따라 콘텐츠를 삽입하면, 상기 콘텐츠는 레이아웃 이미지(F)의 지정된 분할구간, 즉 표시구역에 콘텐츠를 삽입해서 제작페이지를 완성한다.

본 실시 예는 제작자가 헤더 레이어의 표시구역을 선택하면, 콘텐츠 삽입모듈(14)은 해당 표시구역의 식별값에 대응한 입력페이지(B)를 출력하고, 제작자는 입력페이지(B)에 콘텐츠를 입력해서 제작페이지의 헤더 레이어를 완성한다.

앞서 설명한 본 발명의 상세한 설명에서는 본 발명의 바람직한 실시 예들을 참조해 설명했지만, 해당 기술분야의 숙련된 당업자 또는 해당 기술분야에 통상의 지식을 갖는 자라면 후술될 특허청구범위에 기재된 본 발명의 사상 및 기술영역으로부터 벗어나지 않는 범위 내에서 본 발명을 다양하게 수정 및 변경시킬 수 있음을 이해할 수 있을 것이다.

Claims (3)

1. 처리모듈이 메뉴별 편집프로세스를 활성화하는 제1단계; 제작페이지 편집모듈이 해당 편집프로세스에 따라 제작페이지의 기본 프레임과, 상기 기본 프레임을 구성하는 헤더 레이어와 메뉴 레이어와 섹션 레이어와 풋터 레이어를 설정하는 제2단계; 상기 제작페이지 편집모듈이 종렬로 배치되는 섹션 레이어의 개수를 입력값에 맞춰 세팅하고, 상기 섹션 레이어에서 횡렬로 배치되는 분할구간을 입력값에 맞춰 세팅하는 제3단계; 상기 제작페이지 편집모듈이 분할구간에 삽입되는 콘텐츠 타입을 입력값에 맞춰 세팅하고 분할구간별로 식별값을 각각 설정해서 제작페이지의 기본 프레임을 확정하는 제4단계; 상기 분할구간 선택으로 출력된 식별값에 따라 콘텐츠 삽입모듈이 해당 분할구간의 콘텐츠 타입에 대응한 입력프로세스를 실행하고, 상기 입력프로세스에 따라 분할구간에 콘텐츠를 삽입하는 제5단계; 상기 처리모듈이 콘텐츠가 삽입된 제작페이지의 URL를 설정하고 소스코드를 데이터 저장모듈에 저장해서 온라인 네트워크에 링크하는 제6단계;를 포함하는 온라인을 통한 웹페이지 제작방법에 있어서,
   상기 처리모듈이 제작페이지 편집모듈의 편집프로세스와 콘텐츠 삽입모듈의 입력프로세스를 암호화하며, 사용자정보 확인모듈이 로그인한 제작자의 사용등록을 확인하면 암호화된 편집프로세스와 입력프로세스를 복호화하고;
   상기 제2단계는, 이미지 분석모듈이 웹브라우저의 출력페이지를 이미지로 스캔하는 단계와, 스캔이미지에 구성된 표시물의 지정픽셀 범위로 표시구역을 설정하고 콘텐츠 타입을 확인하는 단계와, 상하로 이웃하는 표시구역 간의 중앙을 경계로 상기 스캔이미지를 종렬로 분할해서 대영역을 생성하는 단계와, 상기 대영역 중의 1열은 제작페이지의 헤더 레이어로 설정하고 2열은 제작페이지의 메뉴 레이어로 설정하며 종열은 제작페이지의 풋터 레이어로 설정하는 단계를 더 포함하고;
   상기 제3단계는, 상기 이미지 분석모듈이 메뉴 레이어와 풋터 레이어 사이의 대영역을 섹션 레이어로 설정하는 단계와, 상기 섹션 레이어에 좌우로 이웃하는 표시구역 간의 중앙을 경계로 섹션 레이어를 횡렬로 분할해서 소영역을 생성하는 단계를 더 포함하고;
   상기 제4단계는, 삽입위치 설정모듈이 소영역의 표시구역별로 확인된 콘텐츠 타입을 해당 표시구역에 세팅하는 단계와, 상기 소영역의 표시구역을 분할구간으로 지정하고 식별값을 설정해서 제작페이지의 기본 프레임을 확정하는 단계를 더 포함하며;
   상기 제5단계는, 상기 표시구역 선택으로 출력된 식별값에 따라 콘텐츠 삽입모듈이 해당 표시구역의 콘텐츠 타입에 대응한 입력프로세스를 실행하는 단계와, 상기 입력프로세스에 따라 표시구역에 콘텐츠를 삽입하는 단계를 더 포함하는 것;
   을 특징으로 하는 온라인을 통한 웹페이지 제작방법.
2. 삭제
3. 삭제

Images