KR101228877B1

KR101228877B1 - 웹 디자인을 이용한 동적 웹 사이트 개발 장치 및 방법

Info

Publication number: KR101228877B1
Application number: KR1020110006564A
Authority: KR
Inventors: 정상두; 양정석; 백충덕; 이주영; 김정용
Original assignee: 심플렉스 인터넷 주식회사
Priority date: 2010-01-21
Filing date: 2011-01-21
Publication date: 2013-02-07
Also published as: KR20110085945A

Abstract

웹 디자인을 이용한 동적 웹 사이트 개발 장치를 제공한다. 웹 디자인을 이용한 동적 웹 사이트 개발 장치는 웹 클라이언트로부터의 요청에 따라 상기 요청에 대응되는 사용자의 웹 디자인을 로딩하고 로딩된 웹 디자인을 파싱하여 프로그램 처리 계층의 웹 프로그램인 모듈에 의하여 처리되어야 할 HTML(Hypertext Markup Language) 요소를 추출하고 그 추출된 HTML 요소를 포함하는 모듈 실행 요청을 전송하고 모듈의 실행에 의하여 처리된 HTML 요소를 사용하여 웹 디자인을 재구성하는 스마트 컨트롤러, 및 스마트 컨트롤러로부터 전달되는 모듈 실행 요청에 따라 모듈을 실행하여 모듈 실행 요청에 포함되는 HTML 요소에 대하여 웹 클라이언트로부터의 요청에 대응하는 프로그램 처리 계층에서의 처리를 수행하고 처리된 HTML 요소를 상기 스마트 컨트롤러로 전달하는 모듈부를 포함할 수 있다. 따라서, 웹 사이트 구축 기간을 단축하고 유지 보수를 용이하게 함과 아울러 웹 개발자가 아닌 웹 디자이너 또는 일반인이라도 쉽게 웹 사이트를 구축할 수 있다.

Description

웹 디자인을 이용한 동적 웹 사이트 개발 장치 및 방법 {Device and Method for Producing Dynamic Web Site Using Web Design}

본 발명은 웹 디자인을 이용한 동적 웹 사이트 개발 장치 및 방법에 관한 것으로서, 좀더 상세하게는, 인터넷 표준 HTTP(Hypertext Transfer Protocol)/HTTPS 프로토콜을 이용한 월드 와이드 웹(World Wide Web) 기반의 웹 디자인을 통하여 동적 웹 사이트 또는 웹 응용 프로그램을 구현하거나 제작하는 기술에 관한 것이다.

일반적으로, HTTP(Hypertext Transfer Protocol)는 월드 와이드 웹(World Wide Web) 상에서 정보를 주고 받을 수 있는 프로토콜로서, 클라이언트와 서버 간에 수행되는 요청/응답 프로토콜로서 사용된다. 웹 클라이언트는 HTTP를 통하여 웹 서버로 웹페이지 등과 같은 정보를 요청하고, 웹 서버는 이 요청에 응답하여 필요한 정보를 웹 브라우저로 전달한다. HTTP를 통해 전달되는 정보는 'Http:'로 시작하는 URL(Uniform Resource Locator) 주소로서 조회할 수 있다.

웹 클라이언트는 URL을 사용하여 특정 페이지를 서버로 요청하고 웹 서버로부터 응답을 수신하여 그 정보를 모니터를 통하여 출력할 수 있다. 그러면 사용자는 모니터로부터 출력되는 정보를 볼 수 있게 된다. 웹 서버는 웹 클라이언트로부터 전달되는 URL 요청을 해석하여 HTML(Hypertext Markup Language)/XML(Extensible Markup Language)(이하, HTML로 통칭하기로 함) 문서 처리를 수행하며, Per1, Ruby, PHP 등과 같은 스크립트 언어를 데이터베이스 서비스, 응용 서비스 등과 연결하여 정보를 호출 및 처리하고 웹 화면을 구성하는 동적 콘텐츠를 생성한다.

이러한 웹 서버는 표현(대화) 계층(Presentation Layer) 및 프로그램 처리 계층을 포함할 수 있다. 상기 표현 계층은 사용자에게 보여지는 웹 디자인 관련 부분들을 구현하는 계층으로서, 예컨대 HTML, 자바 스크립트, CSS 이미지 파일 또는 HTML, 자바 스크립트, CSS 등에 의하여 웹 페이지를 구성하는 요소들을 포함할 수 있다. 예를 들면, 웹 게시판의 경우 표현 계층은 게시판 버튼 이미지, 웹 게시판의 디자인을 구현하는 HTML, 자바 스크립트 등을 포함할 수 있다.

상기 프로그램 처리 계층은 개발자가 작성한 로직에 의하여 실행되는 웹 프로그램을 포함하는 계층으로서 비즈니스 로직(Business Logic)이라 칭할 수도 있다. 예를 들면, 웹 게시판에서 사용자가 게시 글을 등록할 경우 게시 글을 데이터 저장소에 접근하여 저장하거나 알림 메일을 보내는 기능 등과 같은 일련의 기능 처리를 구현하는 웹 프로그램은 프로그램 처리 계층에 포함될 수 있다.

종래의 웹 모델에서의 표현 계층은 화면의 웹 디자인과 웹 프로그램 소스가 분리되지 않은 채 동일한 파일에 구현되어 있으며, 웹 응용프로그램을 구현하거나 동적 웹 사이트를 제작함에 있어서 동적 콘텐츠를 생성하기 위해서는 표현 계층과 프로그램 처리 계층이 결합되어 하나의 웹 응용 프로그램이나 동적 웹 사이트가 제작된다.

예컨대, 웹 클라이언트가 HTTP/HTTPS 프로토콜에 따라 웹 주소에 대응하는 웹 페이지를 웹 서버로 요청하면, 웹 서버의 표현 계층은 필요에 따라 비즈니스 서비스와 관련된 데이터를 요구하고 그 데이터를 전달받아 HTML, 자바 스크립트, CSS 등으로 구성된 웹 표준 문서를 생성하여 웹 클라이언트로 응답하고, 이에 따라 웹 클라이언트의 웹 브라우저가 화면을 출력할 수 있다.

이와 같은 종래의 경우, 웹 응용 프로그램이나 동적 웹 사이트를 제작하기 위해서는 표현 계층과 관련되는 웹 디자인과, 프로그램 처리 계층과 관련되는 웹 프로그램 소스 개발 및 비즈니스 서비스에 대한 전문적인 지식이 필요하다. 그런데, 웹 대자인과 웹 프로그램 소스 개발 및 비즈니스 서비스 모두에 대한 전문적인 지식을 습득하는 데는 상당한 어려움이 있는 문제점이 있다. 따라서 실지 웹 응용 프로그램이나 동적 웹사이트를 개발하는 과정에서는 웹 디자이너가 디자인을 작성한 후, 웹 프로그래머가 웹 프로그램 소스 및 비즈니스 서비스에 대한 개발 작업을 수행하고 그 프로그램에 의하여 웹 디자인이 다시 편집되는 경우가 많다.

또한, 웹 프로그래머는 웹 디자인에 대한 이해와 웹 프로그램 소스에 웹 디자인을 포함하여 코드를 작성하는 상황에서 프로그램 유지 보수 및 관리에 어려움이 있으며, 웹 디자이너의 경우에도 이렇게 작성된 웹 디자인을 유지 보수하기 위하여 웹 프로그램 소스 및 비즈니스 서비스에 대한 이해 및 협업을 필요로 한다.

즉, 웹 프로그래머와 웹 디자이너는 서로 간의 협업 및 능력을 필요로 하고 웹 응용 프로그램이나 동적 웹사이트를 제작하기 위한 소스나 웹 디자인을 학습하고 작업하기 위해 시간을 소비해야 하므로, 개발과 디자인 의욕을 저하시키고 작업의 효율성을 감쇄시키는 문제점이 있다. 뿐만 아니라 웹 디자인이나 웹 프로그램에 대한 개발 지식이 없거나 또는 이에 대한 어려움을 느끼는 일반인의 경우에는 웹 응용 프로그램 또는 동적 웹사이트의 제작이 자체가 실질적으로 불가능하였다.

본 발명은 이러한 문제점을 해결하기 위한 것으로서, 본 발명이 해결하고자 하는 과제는 웹 디자인을 통하여 동적 웹 사이트 및 웹 응용 프로그램 구축을 가능하게 함으로써, 웹 사이트 구축 기간을 단축하고 유지 보수를 용이하게 함과 아울러 웹 개발자가 아닌 웹 디자이너 또는 일반인이라도 쉽게 웹 사이트를 구축할 수 있도록 하는 웹 디자인을 이용한 동적 웹 사이트 개발 장치 및 방법을 제공하는데 있다.

이러한 기술적 과제를 해결하기 위하여 본 발명은 일 측면(Aspect)에서 웹 디자인을 이용한 동적 웹 사이트 개발 장치를 제공한다. 상기 웹 디자인을 이용한 동적 웹 사이트 개발 장치는, 웹 클라이언트로부터의 요청에 따라 상기 요청에 대응되는 사용자의 웹 디자인을 로딩하고, 상기 로딩된 웹 디자인을 파싱하여 프로그램 처리 계층의 웹 프로그램인 모듈에 의하여 처리되어야 할 HTML(Hypertext Markup Language) 요소를 추출하고, 상기 추출된 HTML 요소를 포함하는 모듈 실행 요청을 전송하고, 상기 모듈의 실행에 의하여 처리된 HTML 요소를 사용하여 상기 웹 디자인을 재구성하는 스마트 컨트롤러; 및 상기 스마트 컨트롤러로부터 전달되는 모듈 실행 요청에 따라 상기 모듈을 실행하여 상기 모듈 실행 요청에 포함되는 HTML 요소에 대하여 상기 웹 클라이언트로부터의 요청에 대응하는 프로그램 처리 계층에서의 처리를 수행하고 상기 처리된 HTML 요소를 상기 스마트 컨트롤러로 전달하는 모듈부를 포함한다.

상기 스마트 컨트롤러는 상기 추출되는 HTML 요소의 속성 중 ID에 의해 지정되는 모듈 인터페이스 식별자를 검출하고, 상기 모듈 인터페이스 식별자 및 상기 추출되는 HTML 요소를 전송하는 스마트 디자인 엔진; 및 상기 스마트 디자인 엔진으로부터 전송되는 모듈 인터페이스 식별자 및 HTML 요소를 수신하고, 상기 모듈 인터페이스 식별자를 사용하여 상기 수신된 HTML 요소에 대한 처리를 수행할 모듈의 정보 및 상기 모듈 내의 기능부의 정보를 검출하고, 상기 모듈로 상기 수신된 HTML 요소 및 상기 기능부의 정보를 포함하는 모듈 실행 요청을 상기 모듈부에 포함된 상기 모듈로 전송하는 모듈 컨트롤러를 포함할 수 있다.

상기 스마트 디자인 엔진은 상기 로딩된 웹 페이지의 HTML 요소 중 ID를 포함하는 HTML 요소를 프로그램 처리 계층에서 처리되어야 할 HTML 요소인 것으로 판단할 수 있다.

상기 모듈은 상기 모듈 실행 요청의 상기 기능부의 정보를 기반으로 상기 기능부를 실행하고, 상기 기능부는 요청된 처리를 수행하기 위하여 필요한 개체와 연동하여 처리 데이터를 획득할 수 있다. 상기 모듈은 상기 기능부의 실행에 의하여 획득되는 처리 데이터를 분석하여 상기 수신된 HTML 요소에 매핑함으로써, 상기 처리된 HTML 요소를 생성할 수 있다.

상기 스마트 컨트롤러는 상기 웹 디자인에서 상기 추출된 HTML 요소를 상기 처리된 HTML 요소로 대체할 수 있다. 또한 상기 스마트 컨트롤러는 상기 재구성된 웹 디자인을 상기 웹 클라이언트로 전송할 수 있다.

상기 웹 클라이언트로부터의 요청은 웹 주소를 포함할 수 있다. 이 경우 상기 스마트 컨트롤러는 상기 웹 주소를 사용하여 상기 웹 디자인에 접근하여 상기 웹 디자인을 로딩할 수 있다.

상기 모듈은 디스플레이 관련 처리를 담당하는 디스플레이부, 실행 관련 처리를 담당하는 실행부, 외부 통신을 처리하는 API부, 관리 관련 처리를 수행하는 관리부 및 웹의 리소스를 포함하는 리소스부를 포함할 수 있다.

한편, 상술한 기술적 과제를 해결하기 위하여 본 발명은 다른 측면에서 웹 디자인을 이용한 동적 웹 사이트 개발 방법을 제공한다. 상기 웹 디자인을 이용한 동적 웹 사이트 개발 방법은, 웹 사이트 개발 장치에 의하여 수행되는 방법에 있어서, 웹 클라이언트로부터의 요청에 따라 상기 요청에 대응되는 사용자의 웹 디자인을 로딩하는 단계와; 상기 로딩된 웹 디자인을 파싱하여 프로그램 처리 계층의 웹 프로그램인 모듈에 의하여 처리되어야 할 HTML(Hypertext Markup Language) 요소를 추출하는 단계와; 상기 모듈을 실행하여 상기 추출되는 HTML 요소에 대하여 상기 웹 클라이언트로부터의 요청에 대응하는 프로그램 처리 계층에서의 처리를 수행하여 처리된 HTML 요소를 생성하는 단계: 및 상기 모듈의 실행에 의하여 처리된 상기 HTML 요소를 사용하여 상기 웹 디자인을 재구성하는 단계를 포함할 수 있다.

상기 웹 디자인을 이용한 동적 웹 사이트 개발 방법은, 상기 추출되는 HTML 요소의 속성 중 ID에 의해 지정되는 모듈 인터페이스 식별자를 검출하는 단계와; 상기 모듈 인터페이스 식별자를 사용하여 상기 추출되는 HTML 요소에 대한 처리를 수행할 모듈의 정보 및 상기 모듈 내의 기능부의 정보를 검출하는 단계; 및 상기 모듈로 상기 추출되는 HTML 요소 및 상기 기능부의 정보를 포함하는 모듈 실행 요청을 상기 모듈로 전송하는 단계를 더 포함할 수 있다.

상기 웹 디자인을 이용한 동적 웹 사이트 개발 방법은, 상기 로딩된 웹 페이지의 HTML 요소 중 ID를 포함하는 HTML 요소를 프로그램 처리 계층에서 처리되어야 할 HTML 요소인 것으로 판단하는 단계를 더 포함할 수도 있다.

상기 처리된 HTML 요소를 생성하는 단계는, 상기 모듈이 상기 모듈 실행 요청의 상기 기능부의 정보를 기반으로 상기 기능부를 실행하는 단계와; 상기 기능부가 요청된 처리를 수행하기 위하여 필요한 개체와 연동하여 처리 데이터를 획득하는 단계; 및 상기 모듈이 상기 기능부의 실행에 의하여 획득되는 처리 데이터를 분석하여 상기 수신된 HTML 요소에 매핑함으로써, 상기 처리된 HTML 요소를 생성하는 단계를 포함할 수 있다.

상기 웹 디자인을 재구성하는 단계는, 상기 웹 디자인에서 상기 추출된 HTML 요소를 상기 처리된 HTML 요소로 대체하는 단계를 포함할 수 있다. 한편 상기 웹 디자인을 이용한 동적 웹 사이트 개발 방법은, 상기 재구성된 웹 디자인을 상기 웹 클라이언트로 전송하는 단계를 더 포함할 수도 있다.

상기 웹 클라이언트로부터의 요청은 웹 주소를 포함할 수 있다. 이 경우 상기 웹 디자인을 로딩하는 단계는, 상기 웹 주소를 사용하여 상기 웹 디자인에 접근하여 상기 웹 디자인을 로딩하는 단계를 포함할 수 있다.

이상 설명한 바와 같이, 본 발명에 따르면 웹 디자인을 이용한 동적 웹 사이트 및 웹 응용 프로그램 구축 등이 가능하다. 따라서, 웹 사이트 구축 기간을 단축하고 유지 보수를 용이하게 함과 아울러 웹 개발자가 아닌 웹 디자이너 또는 일반인이라도 쉽게 웹 사이트를 구축할 수 있게 된다.

도 1은 본 발명의 바람직한 실시예에 따른 웹 디자인을 이용한 동적 웹 사이트 개발 장치의 개념을 설명하기 위한 블록도이다.
도 2는 본 발명의 바람직한 실시예에 따른 동적 웹 사이트 개발 장치의 구성을 도시하는 블록도이다.
도 3은 동적 웹 사이트 개발 장치의 모듈부의 구성을 도시하는 블록도이다.
도 4는 도 2에 도시된 동적 웹 사이트 개발 장치의 구성 간의 연동 관계를 도시하는 블록도이다.
도 5는 동적 웹 사이트 개발 장치의 동작 흐름을 도시하기 위한 흐름도이다.
도 6은 종래에 웹 디자인과 웹 프로그램 소스가 혼합되어 있는 웹 페이지의 코드를 예시적으로 나타내는 예시도이다.
도 7은 스마트 디자인 엔진에 의하여 로딩되는 사용자의 웹 디자인의 코드를 예시적으로 나타내는 예시도이다.
도 8은 동적 웹 디자인 개발 장치에 의한 모듈 인터페이스의 식별 예를 나타내는 예시도이다.
도 9a 및 9b는 디자인 데이터 매퍼에 의한 데이터의 매핑을 예시적으로 나타내는 예시도이다.
도 10은 이와 같은 사용자 PC에 적용되는 동적 웹 사이트 개발 장치의 적용 예를 나타내는 블록도이다.
도 11a 및 도 11b는 동적 웹 사이트 개발 장치가 적용된 HTML 소스 코드의 예를 나타내는 예시도이다.
도 12는 상기와 같이 구성되는 동적 웹 사이트 개발 장치의 동작 절차를 나타내는 흐름도이다.

이하, 본 발명이 속하는 분야에서 통상의 지식을 가진 자가 본 발명의 기술적 사항을 용이하게 이해할 수 있도록 본 발명의 바람직한 실시예를 첨부된 도면을 참조하여 상세히 설명한다. 이하에 설명할 본 발명의 바람직한 실시예에서는 내용의 명료성을 위하여 특정한 기술 용어를 사용한다. 하지만 본 발명은 그 선택된 특정 용어에 한정되지는 않으며, 각각의 특정 용어가 유사한 목적을 달성하기 위하여 유사한 방식으로 동작하는 모든 기술적 동의어를 포함함을 미리 밝혀둔다.

도 1은 본 발명의 바람직한 실시예에 따른 웹 디자인을 이용한 동적 웹 사이트 개발 장치(이하에서는, 동적 웹 사이트 개발 장치로 약칭)의 개념을 설명하기 위한 블록도이다.

도 1에 도시된 바와 같이, 동적 웹 사이트 개발 장치(100)는 웹 서버(10) 내에 구비될 수 있다. 웹 서버(10)는 WWW 기반 웹 서버로서 하나 또는 다수 개의 단말기로 구현될 수 있다. 상기 동적 웹 사이트 개발 장치(100)는 웹 클라이언트(20)와 연동하면서, 표현 계층인 웹 디자인을 이용하여 동적 웹 사이트, 웹 응용 프로그램 등을 제작 또는 구현할 수 있도록 한다. 즉, 본 발명의 바람직한 실시예에 따른 동적 웹 사이트 개발 장치는 웹 클라이언트(20)의 사용자가 웹 디자인을 통하여 별도의 스크립트 언어나, 데이터 베이스 서비스 등에 대한 지식 없이도 동적 웹 사이트, 웹 응용 프로그램 등을 구축할 수 있도록 한다.

이러한 동적 웹 사이트 개발 장치(100)는 웹 클라이언트(20)로부터의 HTTP/HTTPS(이하에서는 HTTP로 통칭) 요청에 따라 사용자의 웹 디자인을 로딩하고, 그 웹 디자인에서 프로그램 처리 계층에서 처리되어야 하는 HTML/XML(이하에서는 HTML로 통칭) 요소들을 추출하고 이를 프로그램 처리 계층의 웹 프로그램을 통하여 처리하고 처리된 HTML 요소를 사용하여 웹 디자인을 재구성한 후 웹 클라이언트(20)로 제공할 수 있다.

이때, 프로그램 처리 계층의 웹 프로그램은 단일 인터페이스를 제공하기 위하여 모듈 구조(Module Construction)로 구현될 수 있으며, 따라서 이하에서는 프로그램 처리 계층의 웹 프로그램을 모듈이라 칭하기로 한다. 상기 모듈은 프로그램 처리 계층에서의 처리를 위해 필요한 데이터(예컨대, 데이터 값, 자바 스크립트 코드, 프로그램 코드 등)를 제공하는 서비스부(30)와 연동하면서 HTML 요소에 대한 프로그램 처리 계층에서의 처리를 수행할 수 있다.

한편, 상기 로딩되는 사용자의 웹 디자인은 사용자가 나모 등과 같은 웹 에디터, 웹 디자인 툴, 텍스트 편집기 등을 통하여 작성할 수 있다. 따라서 표현 계층의 요소들로 이루어지며 프로그램 처리 계층의 응용 프로그램 소스는 포함되어 있지 않다. 즉 순수한 표현 계층의 정보를 의미할 수 있다. 이러한 웹 디자인은 그 웹 주소를 통하여 웹 서버(10)가 접근할 수 있는 파일 시스템, 데이터베이스 시스템, 네트워크 단말기 등에 저장될 수 있다.

도 2는 본 발명의 바람직한 실시예에 따른 동적 웹 사이트 개발 장치(100)의 구성을 도시하는 블록도이다.

도 2에 도시된 바와 같이, 동적 웹 사이트 개발 장치(100)는 스마트 컨트롤러(110) 및 모듈부(120)를 포함할 수 있다.

상기 스마트 컨트롤러(110)는 웹 클라이언트(20)로부터의 HTTP 요청에 따라 상기 요청에 대응되는 사용자의 웹 디자인을 로딩하고, 상기 로딩된 웹 디자인을 파싱하여 프로그램 처리 계층의 웹 프로그램인 모듈(122)에 의하여 처리되어야 할 HTML 요소를 추출하고, 상기 추출된 HTML 요소를 포함하는 모듈 실행 요청을 모듈부(120)로 전송할 수 있다. 또한, 스마트 컨트롤러(110)는 상기 모듈(122)의 실행에 의하여 처리된 HTML 요소를 사용하여 상기 웹 디자인을 재구성하여 웹 클라이언트(20)로 전송할 수 있다.

이러한 스마트 컨트롤러(110)는 스마트 디자인 엔진(112) 및 모듈 컨트롤러(114)를 포함할 수 있다.

상기 스마트 디자인 엔진(112)은 웹 클라이언트(20)로부터의 HTTP 요청에 따른 사용자의 웹 디자인 로딩, 웹 디자인 파싱, HTML 요소 및 그 HTML 요소를 추출하기 위한 모듈 관련 정보의 추출, 모듈 실행 요청, 모듈에 의하여 처리된 HTML 요소를 사용한 웹 디자인의 재구성 등의 기능들을 수행할 수 있다.

이러한 기능들을 좀더 구체적으로 살펴보면, 스마트 디자인 엔진(112)은 웹 클라이언트(20)로부터 수신되는 HTTP 요청을 수신하고 수신된 HTTP 요청에 대응하는 사용자의 웹 디자인을 로딩할 수 있다. 예를 들면, 상기 HTTP 요청에는 웹 디자인으로 접근할 수 있는 웹 주소를 포함할 수 있다. 스마트 디자인 엔진(112)은 웹 클라이언트(20)로부터 수신되는 HTTP 요청에 포함된 웹 주소를 이용하여 웹 디자인으로 접근하고 그 웹 디자인을 웹 서버(10)의 메모리에 적재함으로써 웹 디자인을 로딩할 수 있다.

스마트 디자인 엔진(112)은 로딩된 웹 디자인을 분석하여 웹 디자인에서 HTML 요소들 중 특정 속성, 예컨대 ID를 가지는 HTML 요소를 프로그램 처리 계층에서 처리되어야 할 HTML 요소인 것으로 판단할 수 있다. 스마트 디자인 엔진(112)은 그 속성에 ID를 가지는 HTML 요소들을 웹 디자인으로부터 HTML 요소 단위로 추출하고, 해당 ID가 지정하는 모듈 인터페이스 식별자를 검출하여 HTML 요소 및 이에 대응하는 모듈 인터페이스 식별자 등을 포함하는 모듈 요청 정보를 모듈 컨트롤러(114)로 전달할 수 있다.

한편, 스마트 디자인 엔진(112)은 모듈(122)에 의하여 처리된 HTML 요소를 사용하여 웹 디자인을 재구성하여 웹 페이지를 생성하는 기능을 수행할 수 있다. 예를 들면, 스마트 디자인 엔진(112)은 웹 디자인에서 추출된 HTML 요소를 모듈(122)에 의하여 처리된 HTML 요소로 대체할 수 있다. 또한 스마트 디자인 엔진(112)은 재구성된 웹 디자인을 웹 클라이언트(20)로 전송할 수도 있다.

모듈 컨트롤러(114)는 스마트 디자인 엔진(112)으로부터 전달되는 모듈 요청 정보를 기반으로 모듈 실행 요청을 생성하여 모듈부(120)로 전송할 수 있다. 즉, 모듈 컨트롤러(114)는 스마트 디자인 엔진(112)으로부터 전달되는 모듈 요청 정보에 따라 처리할 모듈 및 그 관련 정보를 검출하고 해당 모듈에 실행을 명령하는 기능을 수행할 수 있다.

예컨대 모듈 컨트롤러(114)는 모듈 요청 정보에 포함된 모듈 인터페이스 식별자를 통하여 해당 HTML 요소를 처리할 모듈 및 모듈의 기능부(예컨대, 처리를 위해 실행되는 모듈 내의 유닛)의 정보를 검출할 수 있다. 또한 모듈 컨트롤러(114)는 검출된 모듈(122)로 HTML 요소 및 기능부의 정보 등을 포함하는 모듈 실행 요청을 전송할 수 있다.

모듈부(120)는 HTML 요소들에 대한 프로그램 처리 계층에서의 처리를 위한 다수 개의 모듈을 포함할 수 있다. 각각의 모듈(122)은 모듈 컨트롤러(110)로부터 전송되는 모듈 실행 요청에 따라 HTML 요소들에 대한 처리를 수행하고 처리된 HTML 요소를 스마트 컨트롤러(110)로 전송할 수 있다.

도 3은 동적 웹 사이트 개발 장치(100)의 모듈부(120)의 구성을 도시하는 블록도이다.

도 3에 도시된 바와 같이, 모듈부(120)의 각 모듈(122)은 다수 개의 기능부(124) 및 디자인 데이터 매퍼(127)를 포함할 수 있다. 각각의 기능부(124)는 HTML 요소를 프로그램 계층에서 처리하기 위한 고유한 기능을 갖는 유닛을 의미할 수 있다. 기능부(124)는 서비스부(30)로부터 HTML 요소에 대한 처리를 위하여 서비스부(30)로 필요한 데이터, 예컨대 데이터 값, 자바 스크립트 코드, 프로그램 코드 등을 요청하여 그 응답으로 데이터를 획득할 수 있다.

모듈(122)은 디스플레이 관련 처리를 담당하는 디스플레이부(124a), 실행 관련 처리를 담당하는 실행부(124b), 외부 통신을 처리하는 API부(124c), 관리 관련 처리를 수행하는 관리부(124d) 및 웹의 리소스를 포함하는 리소스부(124e) 등의 기능부들을 포함할 수 있다.

한편, 디자인 데이터 매퍼(127)는 기능부(124)에 의하여 획득된 데이터 및 요청된 HTML 요소를 분석하여 매핑을 수행할 수 있다. 즉, 획득된 데이터를 HTML 요소에 반영하는 것이다. 예를 들면, 모듈(122)의 디스플레이부(124a)에서 획득된 데이터와 HTML 요소의 데이터 디스플레이 부분을 분석하여 데이터를 그 데이터가 반영되어야 할 데이터 디스플레이 부분으로 매핑할 수 있다. 디자인 데이터 매퍼(127)는 이와 같이 처리된 HTML 요소를 스마트 컨트롤러(110)로 전송할 수 있다.

도 4는 도 2에 도시된 동적 웹 사이트 개발 장치(100)의 구성 간의 연동 관계를 도시하는 블록도이다.

도 4에 도시된 바와 같이, 스마트 디자인 엔진(112)에 의하여 웹 디자인은 웹 서버(10)로 로딩되며, 각 모듈(122)에 대응되는 HTML 요소 단위로 추출된다. 이러한 스마트 디자인 엔진(112)은 웹 디자인(40)과 같은 표현 계층(60)을 구현할 수 있다.

한편, 모듈 컨트롤러(114)는 스마트 디자인 엔진(112)으로부터 모듈 요청 정보를 전송받고 그 모듈 요청 정보를 기반으로 모듈부(120)의 모듈에 모듈 실행 요청을 전송하게 된다. 상기 모듈 컨트롤러(114)와 모듈부(120)는 프로그램 처리 계층(70), 즉 비즈니스 로직에 따른 처리를 수행하는 계층을 구현할 수 있다.

도 5는 동적 웹 사이트 개발 장치(100)의 동작 흐름을 도시하기 위한 흐름도로서, 본 발명의 바람직한 실시예에 따른 동적 웹 사이트 개발 방법을 나타내고 있다.

도 5에 도시된 바와 같이, 웹 클라이언트(20)는 HTTP 요청을 스마트 디자인 엔진(112)으로 전송할 수 있다(단계:S1). 이때, 상기 HTTP 요청에는 사용자의 웹 디자인으로 접근할 수 있는 웹 주소가 포함된다. 스마트 디자인 엔진(112)은 HTTP 요청을 수신하고 상기 웹 주소를 사용하여 웹 디자인을 로딩할 수 있다(단계:S2). 상기 로딩되는 웹 디자인은 프로그램 처리 계층의 웹 프로그램 소스를 포함하지 않는 표현 계층의 정보일 수 있다.

도 6은 종래에 웹 디자인과 웹 프로그램 소스가 혼합되어 있는 웹 페이지의 코드를 예시적으로 나타내는 예시도이다.

도 6에 도시된 "?PHP" 에서 "?"까지의 영역, 즉

<?php

$data = Board::GetList(0, 10);

?>"

및

"<?php foreach($data as $item) ?>

<tr>

</tr>

</a>

<?php } ?>

까지는 프로그램 소스 영역, 즉 프로그램 처리 계층의 코드이다. 이러한 형태의 웹 페이지는 앞서 설명했던 바와 같이 표현 계층과 프로그램 처리 계층이 혼재되어 있어 웹 디자인 지식과 웹 프로그래밍 지식을 모두 갖추지 않고서는 제작 및 구현, 웹 프로그램 수정과 관리가 매우 어렵다.

도 7은 스마트 디자인 엔진(112)에 의하여 로딩되는 사용자의 웹 디자인의 코드를 예시적으로 나타내는 예시도이다. 또한, 도 8은 동적 웹 디자인 개발 장치(100)에 의한 모듈 인터페이스의 식별 예를 나타내는 예시도이다.

도 7에 도시된 바와 같이, 스마트 디자인 엔진(112)에 의하여 로딩되는 웹 디자인은 표준 HTML 문서로 작성될 수 있다. 스마트 디자인 엔진(112)은 상기 로딩된 웹 디자인을 파싱하여 프로그램 처리 계층의 웹 프로그램인 모듈(122)에 의하여 처리되어야 할 HTML 요소를 추출하고(단계:S3), 상기 추출된 HTML 요소, 모듈 인터페이스 식별자 등을 포함하는 모듈 요청 정보를 모듈 컨트롤러(114)로 전송할 수 있다(단계:S4).

예컨대, 스마트 디자인 엔진(112)은 로딩된 웹 디자인을 분석하여 웹 디자인에서 HTML 요소들 중 특정 속성, 예컨대 ID를 가지는 HTML 요소를 프로그램 처리 계층에서 처리되어야 할 HTML 요소인 것으로 판단하고, 속성에 ID를 가지는 HTML 요소들을 웹 디자인으로부터 HTML 요소 단위로 추출한 후 해당 ID가 지정하는 모듈 인터페이스 식별자를 검출하여 HTML 요소 및 이에 대응하는 모듈 인터페이스 식별자 등을 포함하는 모듈 요청 정보를 모듈 컨트롤러(114)로 전달할 수 있다.

도 7에 도시된 웹 디자인에서, 아래의 HTML 요소는 id="M_Board_List" 부분에 ID를 포함한다.

<!-

게시글 목록수 : 10

게시글 제목 최대 글자수 : 20

게시판 페이징 목록수 : 5

-->

<tr>

</tr>

<tr>

<td>$NO|NUMBER[,]?></td>

<td>$제목|LENGTH[32]?></td>

<td>$작성자|LENGTH[10]?></td>

<td>$읽은수|NUMBER[,]?></td>

</tr>

</a>

</table>

</form>

따라서, 스마트 디자인 엔진(112)은 상기 HTML 요소를 추출한다. 이때 상기 HTML 요소에 대응하는 모듈 인터페이스 식별자는 ID가 지정하는 "M_Board_List" 부분이다. 도 8에 도시된 바와 같이, 상기 "M_Board_List" 는 게시글 목록을 호출하는 것이므로 모듈(122)의 디스플레이부(124a에 의하여 처리될 수 있다.

이를 위하여 사용자는 해당 HTML 요소의 속성 중 ID에 디스플레이를 할달할 모듈의 ID 및 메쏘드(Method)로 이루어진 모듈 인터페이스 식별자 지정할 수 있다. 모듈 인터페이스 식별자는 도 8에 도시된 표의 기타 항목에 기재된 바와 같이 반복 형태와 고정 형태로 구분될 수도 있다. 모듈 인터페이스 식별자는 웹 디자인의 HTML 요소들 중 중 ID 속성을 가진 모든 HTML 요소에 지정할 수 있으며, 이러한 HTML 요소는 하위 HTML 요소를 포함할 수도 있다.

모듈 컨트롤러(114)는 스마트 디자인 엔진(112)으로부터 전달되는 모듈 요청 정보를 기반으로 모듈 실행 요청을 생성하여 모듈부(120)로 전송할 수 있다(단계:S5). 즉, 모듈 컨트롤러(114)는 스마트 디자인 엔진(112)으로부터 전달되는 모듈 요청 정보에 따라 처리할 모듈(122) 및 그 관련 정보를 검출하고 해당 모듈(122)에 실행을 명령하는 것이다.

예를 들면, 모듈 컨트롤러(114)는 모듈 요청 정보에 포함된 모듈 인터페이스 식별자를 통하여 해당 HTML 요소를 처리할 모듈(122) 및 모(122)듈의 기능부의 정보를 검출하고, 검출된 모듈(122)로 HTML 요소 및 기능부의 정보 등을 포함하는 모듈 실행 요청을 전송할 수 있다.

모듈 컨트롤러(114)로부터 전송되는 모듈 실행 요청을 수신한 모듈(122)은, 모듈 실행 요청에 포함된 기능부의 정보를 기반으로 기능부(124)를 실행시킬 수 있다(단계:S6). 기능부(124)는 서비스부(30)로 HTML 요소에 대한 처리를 위해 필요한 데이터 값, 자바 스크립트 코드, 프로그램 코드 등의 데이터를 요청하고(단계:S7), 그 응답으로 데이터를 획득할 수 있다(단계:S8).

이어서, 모듈(122)의 디자인 데이터 매퍼(127)는 기능부(124)에 의하여 획득된 데이터 및 모듈 실행 요청을 통하여 전달된 HTML 요소를 분석하여 매핑을 수행할 수 있다(단계:S9). 즉 획득된 데이터를 상기 전달된 HTML 요소에 반영하는 것이다. 예를 들면, 모듈(122)의 디스플레이부(124a)에서 획득된 데이터와 HTML 요소의 데이터 디스플레이 부분을 분석하여 데이터를 그 데이터가 반영되어야 할 데이터 디스플레이 부분으로 매핑할 수 있다.

도 9a 및 9b는 디자인 데이터 매퍼(127)에 의한 데이터의 매핑을 예시적으로 나타내는 예시도이다.

도 9a 및 9b에 도시된 바와 같이, 디자인 데이터 매퍼(127)에 의하여 HTML 요소에 모듈(122)의 실행에 의하여 서비스부(30)로부터 획득된 데이터들이 적용된 HTML 요소가 생성되게 된다. 예컨대 표현 계층의 게시판 디자인에 서비스부(30)로부터 제공되는 개별 데이터 값들이 적용되어 게시판이 생성될 수 있다. 디자인 데이터 매퍼(127)는 이와 같이 처리된 HTML 요소를 모듈 실행 결과로서 스마트 컨트롤러(110)로 전송할 수 있다(단계:S10, 11).

스마트 컨트롤러(110)의 스마트 디자인 엔진(112)은 모듈(122)로부터 전달되는 처리된 HTML 요소를 사용하여 웹 디자인을 재구성함으로써 통합된 웹 페이지를 생성할 수 있다(단계:S12). 예를 들면, 스마트 디자인 엔진(112)은 웹 디자인에서 추출된 HTML 요소를 모듈(122)에 의하여 처리된 HTML 요소로 대체할 수 있다. 이어서, 스마트 디자인 엔진(112)은 재구성된 웹 디자인을 웹 클라이언트(20)로 전송할 수 있다(단계:S13).

한편, 사용자의 PC가 네트워크를 통하여 웹 서버와 연동하지 못하는 경우 웹 서버와 연동하지 않는 독자적인 환경에서 동적 웹 사이트 개발 장치를 적용할 수도 있다.

도 10은 이와 같은 사용자 PC에 적용되는 동적 웹 사이트 개발 장치의 적용 예를 나타내는 블록도이다.

도 10에 도시된 바와 같이, 사용자는 사용자 PC(601)에서 웹 브라우저(602)와 동적 웹 사이트 개발 장치(603)를 구성하고, 웹 서버가 구성되지 않았거나 인터넷 연결이 이루어지지 않은 환경에서 동적 웹 사이트 개발 장치를 사용할 수 있는 웹 디자인을 가상으로 구현할 수 있으며, 웹 서버의 구성 없이 사용자가 어디서든 웹 디자인을 할 수 있는 환경을 제공할 수 있다.

동적 웹 사이트 개발 장치(603)는 클라이언트 사이드 스크립트(Client Side Script) 언어인 자바 스크립트 언어로 작성될 수 있으며, 사용자의 웹 디자인 소스 원본(604)의 HTML(604-1)을 분석 및 파싱하여 실제 화면처럼 웹 디자인을 재구성할 수 있다.

도 11a 및 도 11b는 동적 웹 사이트 개발 장치(603)가 적용된 HTML 소스 코드의 예를 나타내는 예시도이다.

도 11a 및 도 11b에 도시된 바와 같이, 동적 웹 사이트 개발 장치(603)의 엔진이 스크립트(Script) 형태로 포함된 것을 확인할 수 있으며, 반입(Import) 기능을 통해 특정 웹 페이지를 호출할 수 있으며 이러한 여러 가지 기능을 기능 식별자를 통해 제공한다.

아래의 코드는 도 11의 HTML 소스 코드가 동적 웹사이트 개발 장치(603)를 통해 처리된 결과를 나타낸다.

<head>

<title>쇼핑몰 제목입니다.</title>

<style>

.head { clear:both; height:70px; border-bottom:2px solid gray; margin-bottom:10px;}

.head h1 { padding:0; margin:0; font-size:1.6em; }

.head ul {list-style:none; padding:0; margin:0; }

.head ul li { float:left; padding:5px; margin:0 5px;}

.left { width:200px; padding:5px; float:left; margin-right:15px; border-right:1px solid gray;}

.left .module { border-bottom:2px solid #f2f2f2; padding:5px;}

.left .module h3 { padding:0; margin:0; font-size:0.92em; font-weight:bold;}

.left .module ul { padding:0; margin:0; list-style:none; }

.left .module ul li { padding:0 0 0 5px }

.left .module ul li a { font-size:0.8em; }

.wrap_content { width:640px; float:left; }

.content { padding:5px; }

.content h3 { padding:0; margin:0; font-size:0.92em; font-weight:bold;}

.content ul { padding:0; margin:0; list-style:none; }

.content ul li { padding:0 0 0 5px; float:left; border:1px solid #f2f2f2; width:190px; margin:5px; text-align:center; }

.content ul li a { font-size:0.8em; }

</style>

</head>

<body>

</ul>

</div>

<li><a href="{$link}">제목입니다.</a></li>

</ul>

</div>

<h3>질문입니다.</h3>

<ul>

<li><input type="radio" value="{$value}"/>답변입니다.</li>

</ul>

</div>

<ul>

<li>

<br/>

<a href="#">제목입니다.</a>

</li>

<li>

<br/>

<a href="#">제목입니다.</a>

</li>

<li>

<br/>

<a href="#">제목입니다.</a>

</li>

<li>

<br/>

<a href="#">제목입니다.</a>

</li>

<li>

<br/>

<a href="#">제목입니다.</a>

</li>

<li>

<br/>

<a href="#">제목입니다.</a>

</li>

</ul>

</div>

<div style="border-top: 2px solid gray; padding: 10px; clear: both;

우리회사는...

</div>

</body>

</html>

상기 코드와 같이, 도 11a 및 도 11b에 도시된 예 처럼 작성된 HTML 소스 코드가, 웹 페이지 출력이 가능한 HTML 소스 코드로 재 작성 될 수 있다.

도 12는 상기와 같이 구성되는 동적 웹 사이트 개발 장치(603)의 동작 절차를 나타내는 흐름도이다.

도 12에 도시된 바와 같이, 웹 브라우저(602)가 시작되면 웹 브라우저(602)는 사용자 PC(601)의 사용자의 웹 디자인 소스 원본(604)에서 HTML(604-1)과, JavaScript(604-2)와, CSS(604-3) 및 Image(604-4) 등과 같은 웹 디자인 요소를 로드하고 웹에 구성한다(단계:S701~S703).

이어서, 웹 디자인 요소에 포함된 동적 웹 사이트 개발 장치(603)가 실행 및 초기화 되며, 웹 디자인 요소에서 웹 페이지를 재 생성하고 파싱하여 이를 분석한다(단계:S704~S706). 다음으로, 동적 웹 사이트 개발 장치(603)는 파싱된 웹 페이지를 재구성하고 이를 웹 브라우저에 출력한다(단계:S707~S708).

이상에서 설명한 같이, 본 발명에 따른 동적 웹 사이트 개발 장치에 따르면, 사용자의 웹 디자인은 웹 응용프로그램 및 동적 웹 사이트를 제작할 수 있는 소스 코드의 역할을 대신하여 웹 프로그램 개발자가 아닌 사용자도 쉽게 웹 디자인만으로 웹 응용프로그램 및 동적 웹 사이트를 구축할 수 있다.

즉, 본 발명은 웹 디자인에 의한 다양한 형태의 동적인 웹 페이지를 구성할 수 있어 웹 프로그램 개발자가 아닌 누구라도 웹이라는 영역에 접근하여 제작하고 사용할 수 있게 한다. 또한, 사용자가 웹 서버의 구성 없이도 개인 PC에서 웹 브라우저와 다양한 텍스트 에디터 및 웹 에디터를 이용하여 효율적인 웹 디자인 작업을 할 수 있도록 지원한다.

이상 본 발명에 대하여 그 바람직한 실시예를 예시하여 설명하였지만 해당 기술 분야의 숙련된 당업자는 하기의 특허 청구 범위에 기재된 본 발명의 기술적 사항 및 영역으로부터 벗어나지 않는 범위 내에서 본 발명을 다양하게 수정 및 변경시켜 실시할 수 있음을 이해할 수 있을 것이다. 따라서, 본 발명의 앞으로의 실시예들의 변경은 본 발명의 기술을 벗어날 수 없을 것이다.

10 : 웹 서버
20 : 웹 클라이언트
30 : 서비스부
40 : 웹 디자인
60 : 표현 계층
70 : 프로그램 처리 계층
100 : 웹 디자인을 이용한 동적 웹 사이트 개발 장치
110 : 스마트 컨트롤러
112 : 스마트 디자인 엔진
114 : 모듈 컨트롤러
120 : 모듈부
122 : 모듈

Claims

웹 클라이언트로부터의 요청에 따라 상기 요청에 대응되는 사용자의 웹 디자인을 로딩하고, 상기 로딩된 웹 디자인을 파싱하여 프로그램 처리 계층의 웹 프로그램인 모듈에 의하여 처리되어야 할 HTML(Hypertext Markup Language) 요소를 추출하고, 상기 추출된 HTML 요소를 포함하는 모듈 실행 요청을 전송하고, 상기 모듈의 실행에 의하여 처리된 HTML 요소를 사용하여 상기 웹 디자인을 재구성하는 스마트 컨트롤러; 및
상기 스마트 컨트롤러로부터 전송되는 상기 모듈 실행 요청에 따라 상기 모듈을 실행하여 상기 모듈 실행 요청에 포함되는 HTML 요소에 대하여 상기 웹 클라이언트로부터의 요청에 대응하는 프로그램 처리 계층에서의 처리를 수행하고 상기 처리된 HTML 요소를 상기 스마트 컨트롤러로 전달하는 모듈부를 포함하는 것을 특징으로 하는 웹 디자인을 이용한 동적 웹 사이트 개발 장치.
제 1 항에 있어서, 스마트 컨트롤러는 상기 추출되는 HTML 요소의 속성 중 ID에 의해 지정되는 모듈 인터페이스 식별자를 검출하고, 상기 모듈 인터페이스 식별자 및 상기 추출되는 HTML 요소를 전송하는 스마트 디자인 엔진; 및
상기 스마트 디자인 엔진으로부터 전송되는 모듈 인터페이스 식별자 및 HTML 요소를 수신하고, 상기 모듈 인터페이스 식별자를 사용하여 상기 수신된 HTML 요소에 대한 처리를 수행할 모듈의 정보 및 상기 모듈 내의 기능부의 정보를 검출하고, 상기 모듈로 상기 수신된 HTML 요소 및 상기 기능부의 정보를 포함하는 모듈 실행 요청을 상기 모듈부에 포함된 상기 모듈로 전송하는 모듈 컨트롤러를 포함하는 것을 특징으로 하는 웹 디자인을 이용한 동적 웹사이트 개발 장치.
제 2 항에 있어서, 상기 스마트 디자인 엔진은 상기 로딩된 웹 페이지의 HTML 요소 중 ID를 포함하는 HTML 요소를 프로그램 처리 계층에서 처리되어야 할 HTML 요소인 것으로 판단하는 것을 특징으로 하는 웹 디자인을 이용한 동적 웹사이트 개발 장치.
제 2 항에 있어서, 상기 모듈은 상기 모듈 실행 요청의 상기 기능부의 정보를 기반으로 상기 기능부를 실행하고, 상기 기능부는 요청된 처리를 수행하기 위하여 필요한 개체와 연동하여 처리 데이터를 획득하는 것을 특징으로 하는 웹 디자인을 이용한 동적 웹 사이트 개발 장치.
제 2 항에 있어서, 상기 모듈은 상기 기능부의 실행에 의하여 획득되는 처리 데이터를 분석하여 상기 수신된 HTML 요소에 매핑함으로써, 상기 처리된 HTML 요소를 생성하는 것을 특징으로 하는 웹 디자인을 이용한 동적 웹 사이트 개발 장치.
제 1 항에 있어서, 상기 스마트 컨트롤러는 상기 웹 디자인에서 상기 추출된 HTML 요소를 상기 처리된 HTML 요소로 대체하고, 상기 재구성된 웹 디자인을 상기 웹 클라이언트로 전송하는 것을 특징으로 하는 웹 디자인을 이용한 동적 웹 사이트 개발 장치.
제 1 항에 있어서, 상기 웹 클라이언트로부터의 요청은 웹 주소를 포함하고, 상기 스마트 컨트롤러는 상기 웹 주소를 사용하여 상기 웹 디자인에 접근하여 상기 웹 디자인을 로딩하는 것을 특징으로 하는 웹 디자인을 이용한 동적 웹 사이트 개발 장치.
제 1 항에 있어서, 상기 모듈은 디스플레이 관련 처리를 담당하는 디스플레이부, 실행 관련 처리를 담당하는 실행부, 외부 통신을 처리하는 API부, 관리 관련 처리를 수행하는 관리부 및 웹의 리소스를 포함하는 리소스부를 포함하는 것을 특징으로 하는 웹 디자인을 이용한 동적 웹 사이트 개발 장치.
동적 웹 사이트 개발 장치에 의하여 수행되는 방법에 있어서,
웹 클라이언트로부터의 요청에 따라 상기 요청에 대응되는 사용자의 웹 디자인을 로딩하는 단계;
상기 로딩된 웹 디자인을 파싱하여 프로그램 처리 계층의 웹 프로그램인 모듈에 의하여 처리되어야 할 HTML(Hypertext Markup Language) 요소를 추출하는 단계;
상기 모듈을 실행하여 상기 추출되는 HTML 요소에 대하여 상기 웹 클라이언트로부터의 요청에 대응하는 프로그램 처리 계층에서의 처리를 수행하여 처리된 HTML 요소를 생성하는 단계: 및
상기 모듈의 실행에 의하여 처리된 상기 HTML 요소를 사용하여 상기 웹 디자인을 재구성하는 단계를 포함하는 것을 특징으로 하는 웹 디자인을 이용한 동적 웹 사이트 개발 방법.
제 9 항에 있어서, 상기 추출되는 HTML 요소의 속성 중 ID에 의해 지정되는 모듈 인터페이스 식별자를 검출하는 단계;
상기 모듈 인터페이스 식별자를 사용하여 상기 추출되는 HTML 요소에 대한 처리를 수행할 모듈의 정보 및 상기 모듈 내의 기능부의 정보를 검출하는 단계; 및
상기 모듈로 상기 추출되는 HTML 요소 및 상기 기능부의 정보를 포함하는 모듈 실행 요청을 상기 모듈로 전송하는 단계를 더 포함하는 것을 특징으로 하는 웹 디자인을 이용한 동적 웹사이트 개발 방법.
제 10 항에 있어서, 상기 로딩된 웹 페이지의 HTML 요소 중 ID를 포함하는 HTML 요소를 프로그램 처리 계층에서 처리되어야 할 HTML 요소인 것으로 판단하는 단계를 더 포함하는 것을 특징으로 하는 웹 디자인을 이용한 동적 웹사이트 개발 방법.
제 10 항에 있어서, 상기 처리된 HTML 요소를 생성하는 단계는,
상기 모듈이 상기 모듈 실행 요청의 상기 기능부의 정보를 기반으로 상기 기능부를 실행하는 단계;
상기 기능부가 요청된 처리를 수행하기 위하여 필요한 개체와 연동하여 처리 데이터를 획득하는 단계; 및
상기 모듈이 상기 기능부의 실행에 의하여 획득되는 처리 데이터를 분석하여 상기 수신된 HTML 요소에 매핑함으로써, 상기 처리된 HTML 요소를 생성하는 단계를 포함하는 것을 특징으로 하는 웹 디자인을 이용한 동적 웹 사이트 개발 방법.
제 10 항에 있어서, 상기 웹 디자인을 재구성하는 단계는,
상기 웹 디자인에서 상기 추출된 HTML 요소를 상기 처리된 HTML 요소로 대체하는 단계를 포함하는 것을 특징으로 하는 웹 디자인을 이용한 동적 웹 사이트 개발 방법.
제 9 항에 있어서, 상기 재구성된 웹 디자인을 상기 웹 클라이언트로 전송하는 단계를 더 포함하는 것을 특징으로 하는 웹 디자인을 이용한 동적 웹 사이트 개발 방법.
제 9 항에 있어서, 상기 웹 클라이언트로부터의 요청은 웹 주소를 포함하고,
상기 웹 디자인을 로딩하는 단계는,
상기 웹 주소를 사용하여 상기 웹 디자인에 접근하여 상기 웹 디자인을 로딩하는 단계를 포함하는 것을 특징으로 하는 웹 디자인을 이용한 동적 웹 사이트 개발 방법.