KR101741417B1

KR101741417B1 - 반응형 웹솔루션 이용 방법, 이를 구현하기 위한 프로그램이 저장된 기록매체 및 이를 구현하기 위해 매체에 저장된 컴퓨터프로그램

Info

Publication number: KR101741417B1
Application number: KR1020160002560A
Authority: KR
Inventors: 이용주
Original assignee: 이용주
Priority date: 2016-01-08
Filing date: 2016-01-08
Publication date: 2017-06-15

Abstract

본 발명은 반응형 웹솔루션 이용 방법, 이를 구현하기 위한 프로그램이 저장된 기록매체 및 이를 구현하기 위해 매체에 저장된 컴퓨터프로그램에 관한 것으로서, 더욱 상세하게는 HTML, CSS(cascading style sheets), Jquery, Less(Lesscss), Image 중 선택되는 하나 또는 복수로 구성된 패키지의 내장 코드인 템플릿코드(스킨코드)를 구매하고 이를 바탕으로 반응형 홈페이지 제작 및 이용이 가능한 반응형 웹솔루션 이용 방법, 이를 구현하기 위한 프로그램이 저장된 기록매체 및 이를 구현하기 위해 매체에 저장된 컴퓨터프로그램을 제공한다.

Description

반응형 웹솔루션 이용 방법, 이를 구현하기 위한 프로그램이 저장된 기록매체 및 이를 구현하기 위해 매체에 저장된 컴퓨터프로그램 {METHOD FOR USING RESPONSIVE WEB SOLUTION AND RECORDING MEDIUM STORING PROGRAM FOR EXECUTING THE SAME, AND RECORDING MEDIUM STORING PROGRAM FOR EXECUTING THE SAME}

본 발명은 반응형 웹솔루션 이용 방법, 이를 구현하기 위한 프로그램이 저장된 기록매체 및 이를 구현하기 위해 매체에 저장된 컴퓨터프로그램에 관한 것으로서, 더욱 상세하게는 HTML, CSS(cascading style sheets), Jquery, Less(Lesscss), Image 중 선택되는 하나 또는 복수로 구성된 패키지의 내장 코드인 템플릿코드(스킨코드)를 구매하고 이를 바탕으로 반응형 홈페이지 제작 및 이용이 가능한 반응형 웹솔루션 이용 방법, 이를 구현하기 위한 프로그램이 저장된 기록매체 및 이를 구현하기 위해 매체에 저장된 컴퓨터프로그램에 관한 것이다.

최근 컴퓨터 산업과 통신산업의 발전과 인터넷 전용회선의 보급으로 인하여 기업이나 개인의 홈페이지 숫자가 기하급수적으로 증가되고 있다. 홈페이지 또는 웹페이지란 HTML(Hyper Text Markup Language)로 제작된 파일로서 서버에 저장되어 있다가 웹을 통해 접근한 브라우저를 통해 표시되는 화상 미디어를 총칭하는 것이다.

다시 말해, 홈페이지는 웹 브라우저를 실행시켰을 때 나타나는 웹 페이지를 말한다. 홈 페이지는 잡지 기사와 같이 문장과 그림이 배치되어 있는 화면을 개인용 컴퓨터(PC)로 볼 수 있는 것으로, 여기에 링크(link)라는 정보가 들어 있어서 이 링크를 이용해 그 홈 페이지와 관련된 화제나 다른 홈 페이지로 이동하는 것이 가능하다. 링크되어 있는 화제나 주제에는 홈 페이지상에 표시(색으로 표시한 문자나 버튼) 되어 있어서 이 링크를 따라 홈 페이지에서 홈 페이지로 이동할 수 있다. 또 신문이나 잡지 등에 나와 있는 URL이라는 홈 페이지 주소를 사용해서 보고 싶은 홈 페이지로 이동할 수도 있다.

통상의 홈페이지는 크게 페이지 이름, 메뉴, 그래픽이나 플래시 등으로 이루어진 디자인 파트와 회원로그인, 게시판, 상품검색, 장바구니 등의 각종 기능을 구현하기 위한 프로그램 파트로 이루어지며, 홈페이지에 프로그램을 붙이기 위해서는 디자이너가 디자인 코딩을 해서 프로그래머에게 전달하면 프로그래머가 해당 디자인 코딩에 프로그램 작업을 해서 홈페이지를 제작하여야 한다.

이에 따라 홈페이지 제작과 관련된 웹 디자이너나 웹 프로그래머 등과 같은 전문 인력에게 지급되는 비용(급여)이 상당한 부분을 차지하고 있다. 또한 웹 디자이너나 웹 프로그래머 등과 같은 전문 인력들의 잦은 이동으로 인해 대행업체의 영업과 이윤창출에 큰 차질을 빚고 있는 실정이다. 이는 대행업체에 홈페이지 제작을 의뢰한 이용자에게도 큰 부담이 된다.

따라서, 종래에는 사용자 스스로 간단하게 홈페이지를 제작할 수 있도록 하기 위해, Hihome, Freechal, Me2u2, Daum, Naver 등과 같은 포탈 서비스업체에서 홈페이지 제작/관리를 위한 홈페이지 제작/관리 마법사 기능을 제공하고 있다.

그럼에도 불구하고 사용자는 홈페이지 제작 및 관리를 위한 각종 콘텐츠나 이미지, 콘텐츠 등을 직접 준비하고, 사용자가 직접 혹은 웹호스팅업체를 통해 관리해야 하므로 홈페이지 제작에 긴 시간이 소요되고 제작비용도 높아질 뿐만 아니라 웹호스팅업체의 계정에 많은 정보를 저장 관리해야 하므로 추가적인 비용도 소요되는 문제점이 있다.

이와 같이, 홈페이지는 홈페이지 제작에 대한 전문 지식이나 경험이 없는 통상의 인터넷 사용자들이 제작하기는 용이하지 않기 때문에, 홈페이지 제작을 전문으로 하는 업체에 의뢰하여 제작하고 있다.

이때, 홈페이지의 제작비용은 홈페이지의 구성요소에 따라 결정되는데, 기본적인 구축작업에 필요한 인력, 시간, 콘텐츠 사용료 등으로 소요되는 비용이 적지 않으며, 간단한 IR사이트라도 업체 선정, 진행 단계별 소통, 검토, 테스팅에 절차적인 시간이 소요되고 있다.

이러한 많은 비용과 시간을 소요하므로 개인 사업체 또는 영세한 사업장에서는 홈페이지를 개설하고 싶어도 이와 같은 이유로 인하여 부담이 되는 경우가 있으며, 홈페이지를 개설한 후에도 인터넷 사용자들이 홈페이지에 방문했을 때, 제공하는 컨텐츠의 등록과 지속적인 업데이트를 진행하기에 어려운 문제점이 있다.

즉, 홈페이지는 한번 만들고 끝나는 것이 아니라 차후에 수정 및 변경, 추가가 용이해야 한다. 단순히 가격만을 보고 다른 모든 부분을 꼼꼼하게 따지지 않는다면 수정, 변경, 추가사항 발생 시 과다한 금액이 발생하거나 작업한 회사 자체가 없어져서 그때 가서 새로 다시 제작을 맡겨야 하는 문제점이 발생할 수 있다.

최근에는 PC, 태블릿, 모바일까지 다양한 기기에서 사용자들이 웹에 접근하고 있다. 따라서 웹 제작도 다양한 기기에 최적화 될 수 있도록 각 기기별로 가장 최적화된 모양으로 자동으로 웹 모양이 변경되는 반응형 홈페이지(반응형 웹)도 많이 제작되고 있는 실정이다.

한국등록특허 [10-1091773]에서는 프로그램을 인크루드하여 디자인 코딩하는 홈페이지 제작 시스템 및 방법이 개시되어 있다.

한국등록특허 [10-1091773](등록일자: 2011년12월02일)

따라서, 본 발명은 상기한 바와 같은 문제점을 해결하기 위하여 안출된 것으로, 본 발명의 목적은 HTML, CSS(cascading style sheets), Jquery, Less(Lesscss), Image 중 선택되는 하나 또는 복수로 구성된 패키지의 내장 코드인 템플릿코드(스킨코드)를 구매하고 이를 바탕으로 반응형 홈페이지 제작 및 이용이 가능한 반응형 웹솔루션 이용 방법, 이를 구현하기 위한 프로그램이 저장된 기록매체 및 이를 구현하기 위해 매체에 저장된 컴퓨터프로그램를 제공하는 것이다.

본 발명의 실 시예들의 목적은 이상에서 언급한 목적으로 제한되지 않으며, 언급되지 않은 또 다른 목적들은 아래의 기재로부터 본 발명이 속하는 기술분야에서 통상의 지식을 가진 자에게 명확하게 이해될 수 있을 것이다.

상기한 바와 같은 목적을 달성하기 위한 본 발명의 일 실시예에 따른 반응형 웹솔루션 이용 방법은, 컴퓨터를 포함하는 연산처리수단에 의하여 실행되는 프로그램 형태로 이루어지고, 네트워크망을 통해 홈페이지 생성, 등록, 수정 및 관리 서비스를 통합적으로 제공하며, 보여주고자 하는 웹페이지를 사용자단말의 해상도에 맞는 화면으로 표현하는 반응형 웹솔루션 이용 방법에 있어서, 사용자단말로부터 관리서버가 고유식별정보를 포함한 사용자정보를 입력받아 회원가입 절차를 진행하는 회원가입 단계(S10); 회원인증을 수행한 사용자단말로부터 관리서버가 HTML, CSS(cascading style sheets), Jquery, Less(Lesscss), Image 중 선택되는 하나 또는 복수로 구성된 스킨 패키지의 내장 코드인 템플릿코드(스킨코드)의 구매 요청을 받는 스킨코드 구매요청 단계(S20); 상기 스킨코드 구매요청 단계(S20)에서 구매요청을 받은 템플릿코드에 대한 결재가 완료되었음이 확인되면, 관리서버가 라이센스 인증 코드파일을 발급하는 스킨코드 귀속 단계(S30); 홈페이지 생성 수단을 통해, 상기 사용자단말로부터 결재가 완료된 템플릿코드를 이용하여 홈페이지를 생성하는 홈페이지 생성 단계(S40); 홈페이지 등록 및 관리 수단을 통해, 생성된 상기 홈페이지에 대한 파일을 저장하고, 홈페이지 등록 서버에 상기 홈페이지를 등록하는 홈페이지 등록 단계(S50); 및 상기 홈페이지 등록 단계(S50)에서 홈페이지 등록 서버에 등록된 홈페이지에 사용자단말이 접속 시도를 하면, 상기 홈페이지에 대한 파일 중 라이센스 인증 코드파일이 있는지 확인하여, 상기 라이센스 인증 코드파일의 인증이 완료되면, 정상적으로 상기 홈페이지 생성단계(S40)에서 생성된 홈페이지 접속을 승인하는 홈페이지 접속 승인 단계(S60);를 포함하는 것을 특징으로 한다.

또한, 상기 템플릿코드는 DAT, DTD, XML, JSON 중 선택되는 하나 또는 복수로 구성된 클라이언트 파일을 이용하되, DAT, DTD, XML 중 선택되는 하나 또는 복수의 파일로 구성되며, 홈페이지 접속부터 종료까지의 모든 보안, 승인 및 검수를 진행하는 스펙트리엔진이 탑재된 것을 특징으로 한다.

또, 상기 스펙트리엔진은 플러그 인-아웃(PlugIn-Out)의 응용프로그램을 읽기/쓰기/보기/진행에서 검수 및 검사를 시작하여 스팩트리엔진을 구동시키고, 플러그 인-아웃(PlugIn-Out)에서 허용/비허용을 체크하여 블락 회원 및 회원을 별도로 분류하여 운용할 수 있고 회원을 관리할 수 있는 권한도 관리자별로 다르게 지정할 수 있으며, 방문자가 웹사이트에 접속을 하면 상기 스펙트리엔진에서 생성된 백업 템플릿코드(스킨코드)를 읽고 검수하여 템플릿코드(스킨코드)를 불러와 웹사이트의 레이아웃을 보여주고 저장된 정보를 제공하는 것을 특징으로 한다.

또한, 상기 템플릿코드는 관리자 페이지와 사용자 페이지를 웹 문서를 제작하는 데 쓰이는 프로그래밍 언어로 스킨화하여 커스텀마이징을 할 수 있되, 백앤드(Back-End)가 설정한 정보 및 기능을 웹페이지에 실제로 치환을 해줌으로써 프론트앤드(Front-End)에서 해당 기능이 구동되게 지원해주는 동기화 모듈인 치환코드를 이용한 것을 특징으로 한다.

또, 상기 라이센스 인증 코드파일은 엔진, 템플릿코드, 도메인 연결 수를 체크하는 코드로 구성된 것을 특징으로 한다.

또한, 상기 템플릿코드를 체크하는 코드는 엔진에 부여된 가상 토큰과 연동되는 해쉬(Hash) 암호로 구성된 코드를 포함하는 것을 특징으로 한다.

또, 상기 홈페이지 생성 단계(S40)는 플러그 인-아웃에 따른 솔루션 프로그램이 구성되되, 상기 사용자단말로부터 구매가 완료된 템플릿코드에 포함된 스킨을 사용자단말을 이용하여 수정이 가능하며, Jquery 및 각종 응용프로그램의 수정, 삭제, 등록을 지원하고, 리뉴얼에 필요한 기술이 탑재되어 프로그래밍 할 수 있는 것을 특징으로 한다.

또한, 상기 홈페이지 생성 단계(S40)의 홈페이지에 대한 파일은 상기 라이센스 인증 코드파일을 분석하는 PHP 파일 및 DAT 파일을 포함하는 것을 특징으로 한다.

또, 본 발명의 일 실시예에 따르면, 상기 반응형 웹솔루션 이용 방법을 구현하기 위한 프로그램이 저장된 컴퓨터 판독 가능한 기록매체가 제공되는 것을 특징으로 한다.

아울러, 본 발명의 일 실시예에 따르면, 상기 반응형 웹솔루션 이용 방법을 구현하기 위해, 컴퓨터 판독 가능한 기록매체에 저장된 프로그램이 제공되는 것을 특징으로 한다.

본 발명의 일 실시예에 따른 반응형 웹솔루션 이용 방법, 이를 구현하기 위한 프로그램이 저장된 기록매체 및 이를 구현하기 위해 매체에 저장된 컴퓨터프로그램에 의하면, HTML, CSS(cascading style sheets), Jquery, Less(Lesscss), Image 중 선택되는 하나 또는 복수로 구성된 스킨 패키지의 내장 코드인 템플릿코드(스킨코드)를 이용하여 홈페이지를 구축함으로써, 비 전문가도 홈페이지의 구축 및 관리가 용이한 효과가 있다.

또한, 템플릿코드(스킨코드)의 변경 만으로도 손쉽게 홈페이지의 리뉴얼이 가능한 효과가 있다.

또, DAT, DTD, XML, JSON 등의 클라이언트 파일을 이용함으로써 서버의 부하를 줄이고 웹사이트의 로딩, 오류 도래 등의 문제점을 최대한 제거할 수 있는 효과가 있다.

또한, 홈페이지 접속부터 종료까지의 모든 보안, 승인 및 검수를 진행하는 스펙트리엔진이 탑재됨으로써, 보안성을 높이고 오류를 최소화 시키는 효과가 있다.

또, 관리자 페이지와 사용자 페이지를 스킨화 함으로써, 홈페이지를 구축하려는 사람들이 직관적으로 선택하기 용이한 효과가 있다.

또, Front-End의 엔지니어만 존재하여도 얼마든지 수많은 리뉴얼 스킨을 만들어내고 또한 쉽게 적용하여 웹사이트의 모든 기능을 관장할 수 있는 효과가 있다.

아울러, 다양한 플러그 인-아웃에 따른 솔루션 프로그램을 적용할 수 있음으로써, 구축하고 싶은 기능을 손쉽게 구현할 수 있는 효과가 있다.

도 1은 본 발명의 일 실시예에 따른 반응형 웹솔루션 이용 방법의 흐름도.
도 2는 본 발명의 일 실시예에 따른 반응형 웹솔루션 이용 방법의 스펙트리엔진을 구성한 예를 보여주는 개념도.
도 3은 본 발명의 일 실시예에 따른 반응형 웹솔루션 이용 방법의 스펙트리엔진 알고리즘의 예를 보여주는 개념도.
도 4는 본 발명의 일 실시예에 따른 반응형 웹솔루션 이용 방법의 스킨화된 템플릿코드를 변경하여 적용되는 웹페이지의 예를 보여주는 예시도.
도 5는 본 발명의 일 실시예에 따른 반응형 웹솔루션 이용 방법의 HTML 파일의 코딩된 소스와 치환코드를 보여주는 예시도.
도 6은 본 발명의 일 실시예에 따른 반응형 웹솔루션 이용 방법의 라이센스 인증 코드파일을 발급받았음을 보여주는 예시도.
도 7은 본 발명의 일 실시예에 따른 반응형 웹솔루션 이용 방법의 라이센스 인증 코드파일의 내부 코드를 보여주는 예시도.
도 8은 본 발명의 일 실시예에 따른 반응형 웹솔루션 이용 방법의 플러그 인-아웃의 예를 보여주는 개념도.
도 9는 본 발명의 일 실시예에 따른 반응형 웹솔루션 이용 방법의 코드에디터의 예를 보여주는 예시도.

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

어떤 구성요소가 다른 구성요소에 "연결되어" 있다거나 "접속되어" 있다고 언급된 때에는, 그 다른 구성요소에 직접적으로 연결되어 있거나 또는 접속되어 있을 수도 있지만, 중간에 다른 구성요소가 존재할 수도 있다고 이해되어야 할 것이다.

반면에, 어떤 구성요소가 다른 구성요소에 "직접 연결되어" 있다거나 "직접 접속되어" 있다고 언급된 때에는, 중간에 다른 구성요소가 존재하지 않는 것으로 이해되어야 할 것이다.

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

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

이하, 첨부된 도면을 참조하여 본 발명을 더욱 상세하게 설명한다. 이에 앞서, 본 명세서 및 청구범위에 사용된 용어나 단어는 통상적이거나 사전적인 의미로 한정하여 해석되어서는 아니 되며, 발명자는 그 자신의 발명을 가장 최선의 방법으로 설명하기 위해 용어의 개념을 적절하게 정의할 수 있다는 원칙에 입각하여, 본 발명의 기술적 사상에 부합하는 의미와 개념으로 해석되어야만 한다. 또한, 사용되는 기술 용어 및 과학 용어에 있어서 다른 정의가 없다면, 이 발명이 속하는 기술분야에서 통상의 지식을 가진 자가 통상적으로 이해하고 있는 의미를 가지며, 하기의 설명 및 첨부 도면에서 본 발명의 요지를 불필요하게 흐릴 수 있는 공지 기능 및 구성에 대한 설명은 생략한다. 다음에 소개되는 도면들은 당업자에게 본 발명의 사상이 충분히 전달될 수 있도록 하기 위해 예로서 제공되는 것이다. 따라서, 본 발명은 이하 제시되는 도면들에 한정되지 않고 다른 형태로 구체화될 수도 있다. 또한, 명세서 전반에 걸쳐서 동일한 참조번호들은 동일한 구성요소들을 나타낸다. 도면들 중 동일한 구성요소들은 가능한 한 어느 곳에서든지 동일한 부호들로 나타내고 있음에 유의해야 한다.

도 1은 본 발명의 일 실시예에 따른 반응형 웹솔루션 이용 방법의 흐름도이고, 도 2는 본 발명의 일 실시예에 따른 반응형 웹솔루션 이용 방법의 스펙트리엔진을 구성한 예를 보여주는 개념도이며, 도 3은 본 발명의 일 실시예에 따른 반응형 웹솔루션 이용 방법의 스펙트리엔진 알고리즘의 예를 보여주는 개념도이고, 도 4는 본 발명의 일 실시예에 따른 반응형 웹솔루션 이용 방법의 스킨화된 템플릿코드를 변경하여 적용되는 웹페이지의 예를 보여주는 예시도이며, 도 5는 본 발명의 일 실시예에 따른 반응형 웹솔루션 이용 방법의 HTML 파일의 코딩된 소스와 치환코드를 보여주는 예시도이고, 도 6은 본 발명의 일 실시예에 따른 반응형 웹솔루션 이용 방법의 라이센스 인증 코드파일을 발급받았음을 보여주는 예시이며, 도 7은 본 발명의 일 실시예에 따른 반응형 웹솔루션 이용 방법의 라이센스 인증 코드파일의 내부 코드를 보여주는 예시도이고, 도 8은 본 발명의 일 실시예에 따른 반응형 웹솔루션 이용 방법의 플러그 인-아웃의 예를 보여주는 개념도이며, 도 9는 본 발명의 일 실시예에 따른 반응형 웹솔루션 이용 방법의 코드에디터의 예를 보여주는 예시도이다.

설명에 앞서, 본 명세서( 및 특허청구범위)에서 사용되는 용어에 대해 간단히 설명하도록 한다.

반응형 웹은 디스플레이 종류에 따라 화면의 크기가 자동으로 최적화되도록 조절되는 웹페이지를 말한다.

HTML과 CSS를 주로 다루면서 웹 사이트의 사용자 화면을 설계하는 사람들을 주로 웹 퍼블리셔, 웹 디자이너 또는 웹 개발자라고 한다. 과거에는 HTML 코더, 하드 코더, 핸드 코더라고도 불렸으며, 포털이나 게임사같은 경우에는 UI개발자, 마크업 개발자 또는 HTML 개발자라고 부르는 사람들도 있다. ASP, JSP와 같은 서버측 언어를 다루는 전통적인 웹 개발자를 서버 사이드 개발자라 또는 백 앤드 개발자라고도 하며, 반대의 개념으로 클라이언트 사이드 개발자 또는 프론트 앤드 개발자라고도 한다.

프론트 앤드(Front-End)는 클라이언트 파일(HTML, JS, CSS, ETC Client tech)를 다루는 기술(프로그램)을 말한다.

백앤드(Back-End)는 보이지 않는 영역에서 본인이 다룰 수 있는 모든 기술(프로그램)을 말한다. 보통 웹 IT에서 PHP, ASP, ASPX, JSP 와 같은 서버와 소통하는 서버사이트 언어를 프로그램화 하는 기술을 뜻하며 JAVA, C++, C#, Fortran, Visual Basic, Database를 프로그래밍 및 구축하고 설계하는 기술과는 별도의 개념이다.

마크업 개발을 위한 기본적인 순서의 예로는 다음과 같다.(편의상 단계라는 표현을 썼지만 반드시 지켜져야 하는 순서는 아니다.)

1단계 - 환경분석과 시스템배치

기획 단계에서 프로젝트에 대한 환경적인 분석을 실시한다. 여기서 환경이라 함은 사이트가 운영 및 유지되는 서버와 서버 사이드 개발 인력의 수, 역량 등을 의미한다. 사용된 웹서버와 데이터베이스 서버는 무엇인가? 인코딩을 무엇을 할 것이며, HTML 문서의 가장 중요한 DTD 정의는 무엇으로 할 것인가? 스크립트를 구현함에 있어서 서버 사이드 개발자와 어디까지를 공유할 것인가? 디렉토리는 어떻게 구성하며 이미지 서버는 별도로 둘 것인가? 크로스 브라우징은 어디까지 지원할 것인가? 주요 접근성 이슈를 어떻게 확보할 것인가?와 같은 프로젝트 도입 이전에 고려될 수 있는 여러가지 시스템적 인적 환경을 조사하고 마크업 개발에 필요한 조건들을 기획자에게 제안하여 스토리보드에 반영될 수 있도록 한다. 특히 웹접근성 확보를 위한 고민은 디자이너와 서버 사이드 개발자의 역량에 따라서 적용 가능한 범위가 제한될 수 있으므로 충분히 논의가 될 필요가 있다. (논의 없이 웹퍼블리셔가 이러 이러한 웹접근성 이슈를 처리하자라고 문서화 해봤자 서버 사이드 개발자들은 웹퍼블리셔가 혼자서 다 할 수 있는 것들로 오해해 버리는 경우가 종종 있다.)

2단계 - 구조적 설계(HTML Design)

기획자로부터 기획문서(스토리보드)가 만들어지면 이를 바탕으로 HTML 문서를 작성한다. 이 때의 HTML 문서는 디자인이 적용되지 않은 상태이며 사이트의 가장 기초적인 골격의 형태(내용의 선형성을 유지하면서 접근성이 확보되어야 한다.)를 가진다. 완성된 HTML을 통해서 사이트 네비게이션과 프로세스를 체크하여 문제점을 보완한다. 이는 사이트의 가장 기본적인 프로토타입이 될 수 있으며, 이 단계에서 발견된 문제점은 보다 빠르고 쉽게 수정될 수 있다.

3단계 - 스타일시트 설계(CSS Design)

디자이너에 의해 디자인이 완료(또는 단계적 완료)되면 HTML 문서 위에 스타일을 작성하여 적용하기 시작한다. 둘 이상의 웹퍼블리셔가 함께 작업한다면 시니어가 마스터 CSS를 설계하고, 주니어가 이를 통해 작업을 진행할 수 있도록 한다.

4단계 - 스크립트 개발(Script Development)

스토리보드를 통해서 전체적인 프로세스를 확인하고 서버사이드 연동 없이 구현 가능한 '동작(behavior)'요소를 확인하여 목록화 한다. 3단계 이전에 가능한 스크립트를 구분하여 미리 작성하거나 필요한 스크립트를 준비해 두면 후반 작업의 수고를 덜어줄 수 있다. 사이트의 규모가 제법 크거나 스크립트의 사용이 많은 경우 jQuery와 같은 라이브러리를 이용하는 것도 좋다. 단, 이같은 라이브러리 사용시 서버 사이드 개발자와 합의를 해 두는 것이 좋다. 때때로 prototype.js와 jQuery가 함께 뒤섞인 사이트가 오픈되기도 하기 때문이다. 이는 매우 비효율적인 짓이다.

5단계 - 테스트, 유효성 검사(Test And Validation Check)

테스트는 사이트 네비게이션과 링크 요소의 값이 정상인지를 확인하는 과정으로, 서버 사이드 개발이 이루어지지 않은 환경에서도 적절한 링크를 따르고 있어야 한다. 특히 게시판의 리스트, 뷰, 쓰기 화면의 링크를 생략하거나 데드 링크를 수정하지 않고 그대로 서버 사이드 개발로 넘기는 경우가 많은데 협업간의 편의를 위해서라도 깔끔하게 처리하자. 유효성 검사는 HTML과 CSS에 대한 문법적 검사로 페이지 단위로 이루어진다. Firefox의 확장기능인 HTML Validator를 이용하거나 Dreamweaver의 유효성 체크를 이용하면 검사 시간을 절약할 수 있다. 단, HTML Validator나 Dreamweaver의 기능이 W3C의 유효성 검사와 같지 않을 수 있으므로 메인 페이지나 주요 페이지의 경우 별도의 W3C 유효성 검사를 실시한다.

6단계 - 웹접근성 검사

완성된 사이트(서버 사이드 개발 완료)가 웹접근성을 충분히 확보하고 있는지 확인한다. 서버 사이드 개발자에 의해 HTML과 CSS, Script의 문법이 표준을 따르지 않게 되거나, 접근성을 제한하는 경우가 확인된다면 피드백을 통해서 수정할 수 있도록 한다. 웹접근성 검사는 NIA의 K-WAH를 이용할 수 있다.

7단계 - 문서화

일련의 과정을 통해서 문서를 남기는 작업은 그 무엇보다 중요하다. 1단계 기획단계에서 시스템을 분석하고 웹접근성 확보와 표준화 레벨을 결정함에 있어서 조사하고 결정된 사항들을 문서로 만들어 기초 가이드로 설정할 수 있다. 2~6단계에 이르는 동안 협업간의 여러가지 이슈가 발생할 수 있고 이를 이슈리스트(가칭)로 정리를 해 둔다면 차후 프로젝트를 진행함에 있어서 실수와 오류를 줄일 수 있다. 최종적으로 사이트가 오픈이 되면 주요 페이지의 W3C 유효성 검사와 웹접근성 검사 등을 실시한 결과를 문서화 하여 유지보수 또는 차후 리뉴얼의 참고문서가 되도록 한다.

상기와 같이, 홈페이지를 구축하기 위해 고려해야 할 사항이 많다. 그러나 전문가가 아닌 일반 사용자들이 이러한 모든 것을 고려하여 홈페이지를 구축하는 것은 불가능에 가깝다.

본 발명은 전문가들이 설계한 템플릿코드(스킨코드)를 구매한 것으로 전문가가 아닌 일반 사용자들도 손쉽게 홈페이지 구축이 가능하도록 하기 위한 것이다.

도 1에 도시된 바와 같이, 본 발명의 일 실시예에 따른 반응형 웹솔루션 이용 방법은 컴퓨터를 포함하는 연산처리수단에 의하여 실행되는 프로그램 형태로 이루어지고, 네트워크망을 통해 홈페이지 생성, 등록, 수정 및 관리 서비스를 통합적으로 제공하며, 보여주고자 하는 웹페이지를 사용자단말의 해상도에 맞는 화면으로 표현하는 반응형 웹솔루션 이용 방법에 있어서, 회원가입 단계(S10), 스킨코드 구매요청 단계(S20), 스킨코드 귀속 단계(S30), 홈페이지 생성 단계(S40), 홈페이지 등록 단계(S50) 및 홈페이지 접속 승인 단계(S60)를 포함한다.

회원가입 단계(S10)는 사용자단말로부터 관리서버가 고유식별정보를 포함한 사용자정보를 입력받아 회원가입 절차를 진행한다.

이때, 회원가입을 위해 접속된 단말기가 사용자단말이 되며, 이후, 회원인증을 수행한 단말기 역시 사용자단말이 된다.

상기 사용자단말은 인터넷에 유선 또는 무선으로 연결 가능한 일반적인 사용자단말기(컴퓨터, 모바일 기기, 스마트기기 등)를 말한다.

여기서, 스마트기기는 기능이 제한되어 있지 않고 응용 프로그램을 통해 상당 부분 기능을 변경하거나 확장할 수 있는 제품을 말한다. 예를 들면 스마트 폰, 태블릿, 스마트 워치, 스마트 팔찌, 스마트 링 등을 말한다.

상기 개인정보는 고유식별정보를 포함하며, 추가로 성명, 성별, 생년월일, 연락처(전화, 주소 이메일 등), 출금계좌, 특이사항 등을 더 포함할 수 있다. 이는, 회원가입을 한 후, 고유식별정보를 이용하여 회원인증(로그인)을 수행함으로써, 다른 부가 정보를 일일이 입력하는 수고를 덜게 하기 위함이다.

또한, 회원가입 이후에도 로그인(회원인증)을 수행한 사용자단말로 개인정보의 추가, 삭제 및 변경이 가능함은 물론이다.

상기 고유식별정보는 특정 IP, 공인인증서, 아이디(ID) 와 패스워드(password), 맥어드레스(MAC(media access control) address), 국제모바일기기식별코드(IMEI, International Mobile Station Equipment Identity), 고유식별번호(UDID: User Device IDentification), 범용고유식별자(UUID: Universally Unique IDentifier) 및 전화번호 등이 될 수 있다.

예를 들어, 컴퓨터의 경우, 특정 IP, 공인인증서, 아이디(ID) 와 패스워드(password), 맥어드레스(MAC address) 등을 이용해 회원인증을 수행할 수 있고, 모바일기기 및 스마트기기의 경우, 맥어드레스(MAC(media access control) address), 국제모바일기기식별코드(IMEI, International Mobile Station Equipment Identity), 고유식별번호(UDID: User Device IDentification), 범용고유식별자(UUID: Universally Unique IDentifier) 및 전화번호 등을 이용해 회원인증을 수행할 수 있다

맥어드레스(MAC(media access control) address)는 네트워크 구조에서 MAC 계층에서 네트워크 장치가 갖는 주소로서 보통 네트워크 카드의 ROM에 저장되어 있다.

고유식별번호(UDID: User Device IDentification)는 사용자의 디바이스를 식별할 수 있는 식별자 이다. 일종의 시리얼넘버인 셈이다.

범용고유식별자(UUID: Universally Unique IDentifier)는 인터넷상에서 객체나 실체를 식별하는 데 사용되는 128비트 숫자를 말한다. 공간과 시간(약 3400년까지)의 조합을 통해 구성되는 거의 유일하게 사용할 수 있는 식별자로서, 극히 단시간의 객체에서부터 영구적인 객체 식별에 이르기까지 다양한 목적으로 사용된다. 인증 기관의 등록 절차는 없고, 다만 범용 단일 식별자 생성 프로그램의 유일한 식별 숫자만 필요하다. 예를 들어, 어떤 제품의 맥어드레스를 특정 서버에 저장하게 되면 개인정보 유출 등의 문제가 발생될 수 있기 때문에, 맥어드레스를 대체하여 저장하기 위한 식별자로 사용 할 수 있다.

위에서 여러 가지 고유식별정보(식별자)에 대하여 설명하였으며, 하나의 기기가 다수의 고유식별정보를 갖을 수 있다.

예를 들어, 휴대폰이 와이파이 및 블루투스 통신이 가능하다면, 핸드폰 기기 자체의 식별자(UDID), 와이파이 칩에 대한 맥어드레스, 블루투스 칩에 대한 맥어드레스 등 여러 고유식별정보를 동시에 가지고 있다.

스킨코드 구매요청 단계(S20)는 회원인증을 수행한 사용자단말로부터 관리서버가 HTML, CSS(cascading style sheets), Jquery, Less(Lesscss), Image 중 선택되는 하나 또는 복수로 구성된 스킨 패키지의 내장 코드인 템플릿코드(스킨코드)의 구매 요청을 받는다.

템플릿코드(스킨코드)는 전문가들이 기본적인 스킨디자인을 제작한 것으로, 비즈니스, 푸드, 티, 웨딩, 요가, 뷰티, 쇼핑몰 등 관련된 키워드에 맞추어 전문가들이 제작한 화면(스킨) 구성을 말한다.

즉, 홈페이지를 구축하려는 사용자가 마음에 드는 스킨디자인을 선택하고 결제하면, 메인메뉴, 서브메뉴, 화면구성 등 기본적인 구성이 완료된 템플릿코드(스킨코드)를 구매할 수 있고, 구매가 완료된 템플릿코드(스킨코드)를 이용하여 홈페이지를 구축할 수 있다.

상기 템플릿코드는 DAT, DTD, XML, JSON 중 선택되는 하나 또는 복수로 구성된 클라이언트 파일을 이용하는 것을 특징으로 할 수 있다.

즉, 파일 확장자중 DAT, DTD, XML, JSON 등의 클라이언트 파일을 이용하여 서버의 부하를 줄이고, 웹사이트의 로딩, 오류 도래 등의 문제점을 최대한 제거할 수 있다.

종래의 홈페이지는 솔루션 타입이 아닌 하드코딩 타입이기 때문에 DAT, DTD파일을 구성하기가 상당히 복잡하고 어려웠다. 이유는 각 페이지마다 구성하는 기능들이 다른데 그 기능을 구성할 때마다 Import 함수들을 계속 전달해야하고 또한 매 사이버페이지를 접속할 때 마다 해당 파일을 불러와 스트리밍을 한다는 것은 서버 및 FTP에도 상당히 무리가 갈 수 있는 위험한 요소이기 때문에 DAT, DTD파일을 구성하기 어려운 것이다.

DAT파일은 Data를 저장하는 로컬 데이터 파일이고 DTD파일은 쉘 스크립트의 Hash 데이터를 전송하는 파일이기 때문에 하드코더 엔지니어가 다루기엔 다소 무리가 있는 파일들이다.

XML(extensible markup language)파일은 인터넷 웹페이지를 만드는 HTML을 획기적으로 개선하여 만든 언어이다. 홈페이지 구축기능, 검색기능 등이 향상되었고, 웹 페이지의 추가와 작성이 편리해졌다. 또한, HTML보다 홈페이지 구축 기능, 검색 기능 등이 향상되었고 클라이언트 시스템의 복잡한 데이터 처리를 쉽게 한다. 또한 인터넷 사용자가 웹에 추가할 내용을 작성, 관리하기에 쉽게 되어 있다. 이밖에 HTML파일은 웹 페이지에서 데이터베이스처럼 구조화된 데이터를 지원할 수 없지만 XML은 사용자가 구조화된 데이터베이스를 뜻대로 조작할 수 있다. 구조적으로 XML 문서들은 SGML(standard generalized markup language) 문서 형식을 따르고 있다. XML은 SGML의 부분집합이라고도 할 수 있기 때문에 응용판 또는 축약된 형식의 SGML이라고 볼 수 있다.

JSON(제이슨, JavaScript Object Notation)은 속성-값 쌍으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다. 비동기 브라우저/서버 통신 (AJAJ)을 위해, 넓게는 XML(AJAX가 사용)을 대체하는 주요 데이터 포맷이다. 특히, 인터넷에서 자료를 주고 받을 때 그 자료를 표현하는 방법으로 알려져 있다. 자료의 종류에 큰 제한은 없으며, 특히 컴퓨터 프로그램의 변수값을 표현하는 데 적합하다. 본래는 자바스크립트 언어로부터 파생되어 자바스크립트의 구문 형식을 따르지만 언어 독립형 데이터 포맷이다. 즉, 프로그래밍 언어나 플랫폼에 독립적이므로, 구문 분석 및 JSON 데이터 생성을 위한 코드는 C, C++, C#, 자바, 자바스크립트, 펄, 파이썬 등 수많은 프로그래밍 언어에서 쉽게 이용할 수 있다.

상기 템플릿코드는 DAT, DTD, XML 중 선택되는 하나 또는 복수의 파일로 구성되며, 홈페이지 접속부터 종료까지의 모든 보안, 승인 및 검수를 진행하는 스펙트리엔진이 탑재된 것을 특징으로 할 수 있다.

본 발명의 일 실시예에 따른 반응형 웹솔루션 이용 방법에 사용하기 위해 개발한 엔진은 모두 DAT, DTD파일이 가장 중요하기 때문에 필히 다루게 된다.

스펙트리엔진은 제 3자로부터 최대한 방어할 능력을 갖추고 있고 소스보안을 책임지고 백업하여 데이터 복구를 신속히 진행할 수 있는 것을 특징으로 하고 있다.

도 2는 스펙트리엔진을 구성한 예를 보여주고 있다. 즉, 스펙트리엔진은 도 2의 기술을 적용하여 구성할 수 있다.

HTML5 소켓빌더는 HTML5파일로 웹사이트를 구성할 수 있도록 지원하는 모듈이다.

프로그램 객체화는 프로그램을 모두 객체화하여 함수에 내장된 로직을 경로 외에 정의된 프로그램에서 불러올 수 있고 또한 동기화하여 다양한 웹사이트를 구성할 수 있도록 도와준다.

리눅스 리프 소켓은 프로그램 파일내에 함수 및 로직을 검수하고 엔진과 호환할 요소를 찾고 습득하여 웹사이트에 반영하는 프로그램이다.

DTD 쉘 스크립트 프로토타입은 엔진을 구동하는데에 시작이 되는 프로그램으로서 파일구성이 되어있지 않을 시에는 엔진이 구동되지 않아 보안 및 알고리즘 구성을 정립하여 실행할 수 없는 엔진의 기본 핵심 파일이다.

DAT 파일 엑세스 알고리즘은 솔루션 내부에 설정된 파일인 .dat을 불러와 웹사이트의 전반적인 설정 구성을 확립한다.

JS,CSS 파티션 스위치는 Template Module(HTML5 소켓빌더)과 호환되어 구동되는 엔진의 부가 기능이다.

상기 스펙트리엔진은 플러그 인-아웃(PlugIn-Out)의 응용프로그램을 읽기/쓰기/보기/진행에서 검수 및 검사를 시작하여 스팩트리엔진을 구동시키고, 플러그 인-아웃(PlugIn-Out)에서 허용/비허용을 체크하여 블락 회원 및 회원을 별도로 분류하여 운용할 수 있고 회원을 관리할 수 있는 권한도 관리자별로 다르게 지정할 수 있으며, 방문자가 웹사이트에 접속을 하면 상기 스펙트리엔진에서 생성된 백업 템플릿코드(스킨코드)를 읽고 검수하여 템플릿코드(스킨코드)를 불러와 웹사이트의 레이아웃을 보여주고 저장된 정보를 제공하는 것을 특징으로 할 수 있다.

여기서, 백업 템플릿코드(스킨코드)는 스펙트리엔진에 의해 공개된 템플릿코드(스킨코드)를 백업하여 정보를 보호하기 위한 것이다.

즉, 상기 스펙트리엔진이 주축이 되어 모든 접속 정보 및 승인을 관장하여 웹사이트의 필요한 요소를 수집하고, 이를 바탕으로 진행된다.

도 3은 스펙트리엔진 알고리즘의 예를 보여주고 있다.

보안토큰을 확인하여 관리자/ 회원 고유코드를 확인하고, 관리자/ 회원/ 파트너/ 비회원 별 웹 사이트 구동 체계를 확립하며, 플러그 인-아웃에 따른 솔루션 프로그램을 검수하고, 웹사이트 정보를 전송하여 웹사이트를 구동시킨다.

상기 템플릿코드는 관리자 페이지와 사용자 페이지를 웹 문서를 제작하는 데 쓰이는 프로그래밍 언어로(HTML5/CSS3/JQUERY 등의 기술)스킨화하여 커스텀마이징을 할 수 있는(웹페이지의 리뉴얼이 가능한) 것을 특징으로 할 수 있다.

상기 템플릿코드는 관리자 페이지와 사용자 페이지를 모두 스킨화 하여, HTML5/CSS3/JQUERY 등의 기술로 쉽게 커스텀마이징을 할 수 있고 언제 어디서든 손쉽게 웹사이트 리뉴얼이 가능한 것을 특징으로 하고 있다.

즉, 도 4에 도시된 바와 같이, 스킨화된 템플릿코드를 변경하는 것으로 웹사이트 리뉴얼이 1분 이내에 완성될 수 있다.

HTML 5(hypertext markup language 5)는 요약웹 문서를 제작하는 데 쓰이는 기본 프로그래밍 언어 HTML(hypertext markup language)의 최신규격으로, 별도 프로그램을 깔지 않아도 인터넷 브라우저상에서 화려한 그래픽 효과를 구현하며, 음악ㆍ동영상을 자유롭게 감상할 수 있다. 2004년부터 WHATWG(Web Hypertext Application Technology Working Group)는 HTML 5를 HTML의 차기 핵심 표준으로 만들기 위한 세부 작업을 시작하였으며, 오는 2014년 기술표준으로 공식 발표할 예정이다. 이에 따라 최근 애플ㆍ마이크로소프트(MS), 구글, 페이스북 등 글로벌 IT 기업들은 HTML 5 시대 주도권을 잡기 위해 치열한 경쟁에 돌입했다. 대표적인 예로 세계 최대 소셜네트워크서비스 페이스북이 대만 스마트폰 업체 HTC와 공동으로 차세대 인터넷 규격인 HTML 5를 탑재한 페이스북폰을 이르면 2012년 말 내놓을 예정이다.

CSS(Cascading Style Sheets, 종속형 시트 또는 캐스케이딩 스타일 시트)는 마크업 언어가 실제 표시되는 방법을 기술하는 언어로, HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다. 마크업 언어가 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리 같은 꾸미는 역할을 담당한다고 할 수 있다. 즉, HTML 구조는 그대로 두고 CSS 파일만 변경해도 전혀 다른 웹사이트처럼 꾸밀 수 있다. 현재 개발 중인 CSS3의 경우 그림자 효과, 그라데이션, 변형 등 그래픽 편집 프로그램으로 제작한 이미지를 대체할 수 있는 기능이 추가되었다. 또한 다양한 애니메이션 기능이 추가되어 어도비 플래시를 어느 정도 대체하고 있다.

jQuery(제이쿼리)는 브라우저 호환성이 있는 HTML 속 자바스크립트 라이브러리이며 클라이언트 사이드 스크립트 언어를 단순화 할 수 있도록 설계되었다. 존 레식이 2006년 뉴욕 시 바캠프(Barcamp NYC)에서 공식적으로 소개하였다. jQuery는 오늘날 가장 인기있는 자바스크립트 라이브러리 중 하나이다. jQuery는 MIT 라이선스와 GNU 일반 공중 사용 허가서v2의 듀얼 라이선스를 가진 자유 오픈 소프트웨어이다. jQuery의 문법은 코드 보기, 문서 객체 모델 찾기, 애니메이션 만들기, 이벤트 제어, Ajax 개발을 쉽게 할 수 있도록 디자인되었다. 또한, jQuery는 개발자가 플러그인을 개발할 수 있는 기능을 제공한다.

상기 템플릿코드는 백앤드(Back-End)가 설정한 정보 및 기능을 웹페이지에 실제로 치환을 해줌으로써 프론트앤드(Front-End)에서 해당 기능이 구동되게 지원해주는 동기화 모듈인 치환코드를 이용한 것을 특징으로 할 수 있다.

도 5는 HTML 파일의 코딩된 소스와 치환코드를 보여준다. 이 중 빨간 박스 로 표시된 부분이 치환코드이다.

도 8에 도시된 방식으로 수정 또는 개작 후 저장 시에, 웹사이트는 즉각 적용되어 방문자 및 이용자에게 보여줄 뿐만 아니라 실시간 적용이 가능하다.

즉, FTP서버의 정보만 알아도 직접 로그인하여 해당 HTML, CSS, JS 등의 파일을 다운로드하여 수정 후 업로드 할 수 있도록 지원할 수 있다.

이러한 치환코드 방식은 웹사이트 구축방향을 다양하게 계획한다고 하여도 치환코드의 위치, 정보돌출, 사용정도에 따라 보다 더 특별하거나 특색 있거나 또는 새로운 틀에 도전을 할 때에 아주 유용하고 독창적인 자신만의 웹사이트를 구축할 수 있다.

스킨코드 귀속 단계(S30)는 상기 스킨코드 구매요청 단계(S20)에서 구매요청을 받은 템플릿코드에 대한 결재가 완료되었음이 확인되면, 관리서버가 라이센스 인증 코드파일을 발급한다.

도 6은 라이센스 인증 코드파일을 발급받았음을 보여준다. 이 중 빨간 박스 로 표시된 부분이 라이센스 인증 코드파일이다.

이때, 상기 라이센스 인증 코드파일은 엔진, 템플릿코드(제작년도, 유형 및 구조, 인증 유효 번호, 제작번호), 도메인 연결 수, 서버 제원 등을 체크하는 코드로 구성된 것을 특징으로 할 수 있다.

도 6에 도시된 라이센스 인증 코드 파일을 예로 하여, "2015-가-0328-SX" 가 의미하는 바를 순서대로 설명하면, "2015"는 스킨 제작된 년도, "가"는 스킨 유형 및 구조 라벨, "0"은 스킨 인증 유효 번호, "3"은 스킨 제작 번호, "8"은 서버 제원 분석 코드, "2"는 도메인 연결 수, "SX"는 스펙트리 엔진 내부 승인 코드를 의미한다.

여기서, 상기 템플릿코드를 체크하는 코드는 엔진에 부여된 가상 토큰과 연동되는 해쉬(Hash) 암호로 구성된 코드를 포함하는 것을 특징으로 할 수 있다.

예를 들어, 도 7은 라이센스 인증 코드파일의 내부 코드를 보여준다. 여기서, 이 중 access_label은 엔진에 부여된 가상 토큰과 연동되는 해쉬 암호로 구성된 코드의 예이다.

만약 access_label에 코드가 없거나 파일 구성이 안 되어 있다면 홈페이지 접속을 차단하고 오류 페이지가 실행되도록 할 수 있다.

홈페이지 생성 단계(S40)는 홈페이지 생성 수단을 통해, 상기 사용자단말로부터 결재가 완료된 템플릿코드를 이용하여 홈페이지를 생성한다.

필수 구성은 Solution 그 자체가 필수 이며 선택구성은 오로지 Skin이라고 명시된 부분이다. 선택구성만으로는 웹사이트를 런칭할 수 없으며 필수 구성의 승인체계를 걸쳐야 웹사이트가 런칭되는 것이다.

상기 홈페이지 생성 단계(S40)는 플러그 인-아웃에 따른 솔루션 프로그램이 구성되는 것을 특징으로 할 수 있다.

도 8은 플러그 인-아웃의 예를 보여주고 있다.

플러그 인-아웃 시스템은 설치 시 설정하는 내용에 따라 그에 알맞은 환경을 자동으로 구축하고 또한 차후에 추가하여 기능을 통괄할 수 있는 시스템이다.

즉, 여러 환경에 따라 웹사이트의 구성요소가 재구성되고 또한 데이터베이스(DataBase)의 정규화를 통하여 보다 빠른 질의응답을 체크할 수 있다. 또한 이러한 부분이 불필요한 웹사이트의 리소스를 제거하여 효과적인 웹사이트의 최적화를 구축할 수 있다.

플러그 인-아웃 시스템은 커밍순(Coming Soon) 설정, 맴버스 설정, 광고매니저, 엠몰 솔루션, 폼마스터, 폼프로젝트 등 다양한 구성이 가능하다.

커밍순(Coming Soon) 설정은 웹사이트의 런칭 카운트다운을 웹사이트 화면에 보여주는 설정이다.

맴버스 설정은 회원 등급, 가입양식, 회원 현황, 통계 같은 중요한 부분들을 담당하고 웹사이트 서비스시에 전체 이용에 상당히 큰 부분을 차지하는 플러그인으로 각종 설정에 따라 웹사이트에 실시간으로 반영된다.

광고매니저는 웹사이트 내에 상품광고 및 이벤트광고, 제휴사 광고, 프리미엄 광고 등. 마케팅이 필요한 광고주에게 서비스를 함으로써 부가수익을 창출하기 위해 설계된 플러그인이다.

엠몰 솔루션은 중소규모 쇼핑몰 창업에 필요한 모든 기능을 내장한 솔루션으로 PG사 설정부터 전반적인 상품관리, 주문관리, 매출관리, 쿠폰 및 포인트 설정 등에 모든 기능이 내장되어 있다.

폼마스터는 오프라인에서 사업상 필요한 서류를 온라인에서 운용할 시에 사용되는 플러그입니다. 계약서, 발주서, 납품서, 고지서, 가입동의서 같은 서류를 온라인으로 코딩하여 Database에 수집하고 언제 어디서든 내용을 확인할 수 있도록 지원하는 프로그램이다.

폼프로젝트는 폼마스터와 같은 원리에 기능 또한 비슷하지만 이벤트 발생이 다릅니다. 폼마스터는 한정적인 구역 내에서 발생을 유도하는 기능이지만 폼프로젝트의 경우 엠몰, 엠멀티플랫폼, 폼마스터의 영역을 제외한 모든 페이지에서 돌출되는 전방위 폼수집 플러그인이다.

디자인맵은 HTML, CSS, JS, 다른 플러그 인-아웃에 따른 솔루션 프로그램에 사용될 파일 등의 등록, 삭제, 수정 등이 가능한 프로그램이다. 도 9는 HTML, CSS, JS 등의 파일을 수정하는 데 이용하는 코드에디터의 예를 보여준다. 즉, 웹사이트를 구성하는 HTML, CSS, JS 같은 기술을 직접 수정, 삭제, 개작 등을 할 수 있고 별도로 다양한 효과를 주어 통제할 수 있다.

웹로그 접속통계 관리는 웹사이트를 방문하는 모든 이용자에 대한 통계를 실시간으로 집계,통계를 진행하고 이전 웹주소, 검색어, 유입경로 등을 면밀이 분석하여 웹사이트 관리자에게 제공한다.

맴버스 관리, 게시판 관리, 광고매니저 관리, 브랜드스토리 관리, 폼-마스터, 폼-프로젝트, 웹-로그, 디자인 맵 등 다양한 시스템 적용이 가능하다.

상기 홈페이지 생성 단계(S40)는 상기 사용자단말로부터 구매가 완료된 템플릿코드에 포함된 스킨을 사용자단말을 이용하여 수정이 가능하며, Jquery 및 각종 응용프로그램의 수정, 삭제, 등록을 지원하고, 리뉴얼에 필요한 기술이 탑재되어 프로그래밍 할 수 있는 것을 특징으로 할 수 있다.

즉, 퍼블리셔가 모든 웹사이트의 구성요소를 변경할 수 있다. 이는 주된 업무를 하는 기술 중 HTML, CSS, JS 만을 다룰 줄 아는 퍼블리셔라면 본인이 원하는 웹사이트를 구성(도 9 참조)하는데 어려움이 없다.

상기 홈페이지 생성 단계(S40)의 홈페이지에 대한 파일은 상기 라이센스 인증 코드파일을 분석하는 PHP 파일 및 DAT 파일을 포함하는 것을 특징으로 할 수 있다.

예를 들어, 인증코드를 분석하는 파일로 license.php와 version.dat 파일을 포함할 수 있고, 해당 파일이 구성되어 있지 않아도 스펙트리엔진이 홈페이지 접속을 차단하고 오류 페이지가 실행되도록 할 수 있다. 이렇듯 내부 프로그램을 보호하고 크로커의 공격에 파일 각각 프로그램 구성에 각각 내부 인증 코드를 일일이 실행하게 프로그래밍 되어 철저히 보호되고 스킨의 정품화로 공정한 서비스를 실행하도록 구성할 수 있다.

홈페이지 등록 단계(S50)는 홈페이지 등록 및 관리 수단을 통해, 생성된 상기 홈페이지에 대한 파일을 저장하고, 홈페이지 등록 서버에 상기 홈페이지를 등록한다.

이때, 관리서버에 내부검수 및 테스트 요청을 할 수 있고, 내부검수 및 테스트가 완료되면 관리자 정보를 이메일 등으로 발송한 후, 담당자의 안내에 따라 오픈절차를 진행 하여 완료하는 것도 가능하다.

홈페이지 접속 승인 단계(S60)는 상기 홈페이지 등록 단계(S50)에서 홈페이지 등록 서버에 등록된 홈페이지에 사용자단말이 접속 시도를 하면, 상기 홈페이지에 대한 파일 중 라이센스 인증 코드파일이 있는지 확인하여, 상기 라이센스 인증 코드파일의 인증이 완료되면, 정상적으로 상기 홈페이지 생성단계(S40)에서 생성된 홈페이지 접속을 승인한다.

이때, 상기 홈페이지 접속 승인 단계(S60)의 모든 과정은 스펙트리엔진이 담당할 수 있다. 상기 스팩트리엔진은 응용프로그램을 읽기/쓰기/보기/진행에서 검수 및 검사를 시작하여 엔진을 구동시킬 수 있고, 홈페이지에 접속하려는 사람이 어떤 회원인지 구분하여 서비스를 제공할 수 있으며, 홈페이지에 접속하려는 사람이 웹사이트에 접속을 하면 엔진에서 생성된 백업 템플릿코드(스킨코드)를 읽고 검수하여 템플릿코드(스킨코드)를 불러와 웹사이트의 레이아웃을 보여주고 저장된 정보를 제공할 수 있다.

본 발명의 일 실시예에 따른 반응형 웹솔루션 이용 방법은 스킨디자인을 구매한 것으로 템플릿코드(스킨코드)를 귀속시킬 수 있고, 구매가 완료된 템플릿코드(스킨코드)를 바탕으로 플러그 인-아웃에 따른 솔루션 프로그램을 구성할 수 있으며, 완성된 홈페이지를 오픈할 수 있다. 이때, 전문가의 도움이 필요한 구간이 발생되면 관리서버를 통하여 전문가의 도움을 받을 수 있도록 충분한 지원이 가능하다.

즉, 본 발명의 일 실시예에 따른 반응형 웹솔루션 이용 방법의 템플릿코드(스킨코드)는 Developer의 입장에서 프로그램된 되어 솔루션화 된 것으로, 구매자의 입장에서는 자체운용하려는 웹사이트 프로그램의 선택할 시에 본 발명의 일 실시예에 따른 반응형 웹솔루션 이용 방법으로 런칭하는 것이 차후를 위해 가장 큰 수익창출을 이루어 낼 수 있다.

이상에서 본 발명의 일 실시예에 따른 반응형 웹솔루션 이용 방법에 대하여 설명하였지만, 반응형 웹솔루션 이용 방법을 구현하기 위한 프로그램이 저장된 컴퓨터 판독 가능한 기록매체 및 반응형 웹솔루션 이용 방법을 구현하기 위한 컴퓨터 판독 가능한 기록매체에 저장된 프로그램 역시 구현 가능함은 물론이다.

즉, 상술한 반응형 웹솔루션 이용 방법은 이를 구현하기 위한 명령어들의 프로그램이 유형적으로 구현됨으로써, 컴퓨터를 통해 판독될 수 있는 기록매체에 포함되어 제공될 수도 있음을 당업자들이 쉽게 이해할 수 있을 것이다. 다시 말해, 다양한 컴퓨터 수단을 통하여 수행될 수 있는 프로그램 명령 형태로 구현되어, 컴퓨터 판독 가능한 기록매체에 기록될 수 있다. 상기 컴퓨터 판독 가능한 기록매체는 프로그램 명령, 데이터 파일, 데이터 구조 등을 단독으로 또는 조합하여 포함할 수 있다. 상기 컴퓨터 판독 가능한 기록매체에 기록되는 프로그램 명령은 본 발명을 위하여 특별히 설계되고 구성된 것들이거나 컴퓨터 소프트웨어 당업자에게 공지되어 사용 가능한 것일 수도 있다. 상기 컴퓨터 판독 가능한 기록매체의 예에는 하드 디스크, 플로피 디스크 및 자기테이프와 같은 자기 매체(magnetic media), CD-ROM, DVD와 같은 광기록매체(optical media), 플롭티컬 디스크(floptical disk)와 같은 자기-광 매체(magneto-optical media), 및 롬(ROM), 램(RAM), 플래시 메모리, USB 메모리 등과 같은 프로그램 명령을 저장하고 수행하도록 특별히 구성된 하드웨어 장치가 포함된다. 프로그램 명령의 예에는 컴파일러에 의해 만들어지는 것과 같은 기계어 코드뿐만 아니라 인터프리터 등을 사용해서 컴퓨터에 의해서 실행될 수 있는 고급 언어 코드를 포함한다. 상기 하드웨어 장치는 본 발명의 동작을 수행하기 위해 하나 이상의 소프트웨어 모듈로서 작동하도록 구성될 수 있으며, 그 역도 마찬가지이다.

본 발명은 상기한 실시예에 한정되지 아니하며, 적용범위가 다양함은 물론이고, 청구범위에서 청구하는 본 발명의 요지를 벗어남이 없이 다양한 변형 실시가 가능한 것은 물론이다.

S10: 회원가입 단계
S20: 스킨코드 구매요청 단계
S30: 스킨코드 귀속 단계
S40: 홈페이지 생성 단계
S50: 홈페이지 등록 단계
S60: 홈페이지 접속 승인 단계

Claims

컴퓨터를 포함하는 연산처리수단에 의하여 실행되는 프로그램 형태로 이루어지고, 네트워크망을 통해 홈페이지 생성, 등록, 수정 및 관리 서비스를 통합적으로 제공하며, 보여주고자 하는 웹페이지를 사용자단말의 해상도에 맞는 화면으로 표현하는 반응형 웹솔루션 이용 방법에 있어서,
사용자단말로부터 관리서버가 고유식별정보를 포함한 사용자정보를 입력받아 회원가입 절차를 진행하는 회원가입 단계(S10);
회원인증을 수행한 사용자단말로부터 관리서버가 HTML, CSS(cascading style sheets), Jquery, Less(Lesscss), Image 중 선택되는 하나 또는 복수로 구성된 스킨 패키지의 내장 코드인 템플릿코드(스킨코드)의 구매 요청을 받는 스킨코드 구매요청 단계(S20);
상기 스킨코드 구매요청 단계(S20)에서 구매요청을 받은 템플릿코드에 대한 결재가 완료되었음이 확인되면, 관리서버가 라이센스 인증 코드파일을 발급하는 스킨코드 귀속 단계(S30);
사용자단말을 통해, 상기 사용자단말로부터 결재가 완료된 템플릿코드를 이용하여 홈페이지를 생성하는 홈페이지 생성 단계(S40);
사용자단말을 통해, 생성된 상기 홈페이지에 대한 파일을 저장하고, 홈페이지 등록 서버에 상기 홈페이지를 등록하는 홈페이지 등록 단계(S50); 및
상기 홈페이지 등록 단계(S50)에서 홈페이지 등록 서버에 등록된 홈페이지에 사용자단말이 접속 시도를 하면, 상기 홈페이지에 대한 파일 중 라이센스 인증 코드파일이 있는지 확인하여, 상기 라이센스 인증 코드파일의 인증이 완료되면, 정상적으로 상기 홈페이지 생성단계(S40)에서 생성된 홈페이지 접속을 승인하는 홈페이지 접속 승인 단계(S60);
를 포함하며,
상기 템플릿코드는
메인메뉴, 서브메뉴 및 화면구성을 포함하는 것을 특징으로 하며,
상기 템플릿코드는
DAT, DTD, XML, JSON 중 선택되는 하나 또는 복수로 구성된 클라이언트 파일을 이용하되, DAT, DTD, XML 중 선택되는 하나 또는 복수의 파일로 구성되며, 홈페이지 접속부터 종료까지의 보안, 승인 및 검수를 진행하는 스펙트리엔진이 탑재된 것을 특징으로 하고,
상기 스펙트리엔진은
프로그램을 객체화하여, 함수에 내장된 로직을 프로그램에서 불러와 웹사이트를 구성하는 것을 특징으로 하며,
상기 스펙트리엔진은
HTML5파일로 웹사이트를 제작하는 HTML5 소켓빌더를 포함하고,
프로그램 파일 내에 함수 및 로직의 오류를 검수하고 엔진과 호환할 요소를 찾고 습득하여, 웹사이트에 반영하는 리눅스 리프 소켓을 포함하고,
스펙트리엔진 구동 시, 지정된 파일구성이 되어있지 않을 시에는 스펙트리엔진이 구동되지 않도록 하는 DTD 쉘 스크립트 프로토타입을 포함하고,
솔루션 내부에 설정된 파일인 .dat 파일을 불러와 웹사이트를 구성하는 DAT 파일 엑세스 알고리즘을 포함하고,
상기 스펙트리엔진은
플러그 인-아웃(PlugIn-Out)의 응용프로그램을 읽기/쓰기/보기/진행에서 검사를 시작하여 스팩트리엔진을 구동시키고, 플러그 인-아웃(PlugIn-Out)에서 허용/비허용을 체크하여 블락 회원 및 회원을 별도로 분류하여 운용할 수 있고 회원을 관리할 수 있는 권한도 관리자별로 다르게 지정할 수 있으며, 방문자가 웹사이트에 접속을 하면 상기 스펙트리엔진에서 생성된 백업 템플릿코드(스킨코드)를 읽고 검수하여 템플릿코드(스킨코드)를 불러와 웹사이트의 레이아웃을 보여주고 저장된 정보를 제공하는 것을 특징으로 하며,
상기 템플릿코드는
관리자 페이지와 사용자 페이지를 웹 문서를 제작하는 데 쓰이는 프로그래밍 언어로 스킨화하여 커스텀마이징을 할 수 있되, 백앤드(Back-End)가 작업한 내용을 웹페이지에 치환 해줌으로써 프론트앤드(Front-End)에서 해당 기능이 구동되게 지원해주는 치환코드를 이용한 것을 특징으로 하고,
상기 스킨코드 귀속 단계(S30)의 라이센스 인증 코드파일은
스펙트리엔진, 템플릿코드(제작년도, 유형 및 구조, 인증 유효 번호, 제작번호), 도메인 연결 수, 서버 제원을 체크하는 코드로 구성된 것을 특징으로 하며,
상기 템플릿코드를 체크하는 코드는
엔진에 부여된 가상 토큰과 연동되는 해쉬(Hash) 암호로 구성된 코드를 포함하는 것을 특징으로 하고,
상기 홈페이지 생성 단계(S40)는
플러그 인-아웃에 따른 솔루션 프로그램이 구성되되, 상기 사용자단말로부터 구매가 완료된 템플릿코드에 포함된 스킨은 사용자단말을 이용하여 수정이 가능하며, Jquery 및 커밍순(Coming Soon) 설정, 맴버스 설정, 광고매니저, 엠몰 솔루션, 폼마스터, 폼프로젝트, 웹로그 접속통계 관리 중 선택되는 적어도 하나의 응용프로그램의 수정, 삭제, 등록을 지원하는 것을 특징으로 하는 반응형 웹솔루션 이용 방법.
삭제
삭제
삭제
삭제
삭제
삭제
제1항에 있어서,
상기 홈페이지 생성 단계(S40)의 홈페이지에 대한 파일은
상기 라이센스 인증 코드파일을 분석하는 PHP 파일 및 DAT 파일을 포함하는 것을 특징으로 하는 반응형 웹솔루션 이용 방법.
제1항 또는 제8항에 기재된 반응형 웹솔루션 이용 방법을 관리서버가 수행하기 위한 프로그램이 저장된 컴퓨터 판독 가능한 기록매체.
제1항 또는 제8에 기재된 반응형 웹솔루션 이용 방법을 관리서버가 수행하기 위한 컴퓨터 판독 가능한 기록매체에 저장된 프로그램.