KR101299670B1

KR101299670B1 - 웹페이지의 동적 변환 시스템, 방법 및 컴퓨터 판독 가능한 기록 매체

Info

Publication number: KR101299670B1
Application number: KR1020120039245A
Authority: KR
Inventors: 권오석
Original assignee: 권오석
Priority date: 2012-04-16
Filing date: 2012-04-16
Publication date: 2013-08-27
Also published as: US20150039996A1; AU2012377539A1; EP2840511A4; AU2017200140A1; CN104380280A; WO2013157678A1; EP2840511A1; IN2014MN01655A; JP2015518589A

Abstract

본 발명은 크로스 브라우저(Cross browser) 및 크로스 플랫폼(Cross Platform)을 지원하는 사이트 및 웹 애플리케이션 구축을 위한 웹페이지의 동적 변환 시스템에 관한 것으로, 특히 웹페이지 또는 웹 애플리케이션을 구성하는 적어도 하나의 구성 요소들을 저장하는 라이브러리 저장부; 상기 라이브러리 저장부로부터 선택된 상기 구성 요소를 웹페이지를 구성할 레이아웃 상에 배치시키는 레이아웃 편집부; 상기 레이아웃 편집부에 의해 배치된 각 구성 요소에 대한 속성을 설정하는 속성 편집부; 상기 레이아웃 편집부에 의해 배치된 콘텐츠를 편집하는 기능을 제공하는 콘텐츠 편집부; 상기 레이아웃 편집부에 의해 배치된 각 구성 요소를 표준 파라미터 값으로 변환시키는 파라미터 변환부; 상기 파라미터 변환부에 의해 변환된 표준 파라미터 값을 저장하는 표준 파라미터 정보 데이터베이스; 사용자의 변환 요청에 따라 사용자 단말의 브라우저의 종류 또는 운영 체제의 종류를 판단하는 브라우저 판단부; 상기 표준 파라미터 정보 데이터베이스에 저장된 표준 파라미터 정보로부터 상기 브라우저 판단부의 판단에 따라 적합한 종류의 웹페이지 소스로 변환시키는 변환 엔진부; 및 상기 변환된 소스를 디스플레이시키는 디스플레이 엔진부;를 포함함을 특징으로 한다.

Description

웹페이지의 동적 변환 시스템, 방법 및 컴퓨터 판독 가능한 기록 매체{SYSTEM, METHOD AND COMPUTER READABLE RECORDING MEDIUM FOR CONVERTING A WEB PAGE DYNAMICALLY}

본 발명은 웹페이지의 동적 변환 시스템에 관한 것으로, 보다 상세하게는 크로스 브라우저(Cross browser) 및 크로스 플랫폼(Cross Platform)을 지원하는 사이트 및 웹 애플리케이션 구축을 위한 웹페이지의 동적 변환 시스템, 방법 및 컴퓨터 판독 가능한 기록 매체에 관한 것이다.

일반적으로, 인터넷은 전세계 어디서나 누구나 접속하고자 하는 상대편 컴퓨터에 TCP/IP라는 공통의 프로토콜을 적용하여 자유롭게 연결하여 사용할 수 있도록 구성된 개방형 네트워크로서, 기본적인 문자 정보의 전달은 물론 압축 기술의 발전과 더불어 멀티미디어 정보의 전달에 이용되는 등 전자 우편, 파일 전송, WWW(World Wide Web) 등의 다양한 서비스를 이용할 수 있다.

이와 같은 인터넷은 국내를 비롯하여 세계적으로 사용이 급격하게 증가하면서 기존 산업의 전 부분에 걸쳐 효율성과 생산성 제고를 위한 전략적인 도구로서 중요성이 급속히 증대되고 있으며, 인터넷을 통한 새로운 비즈니스 기회가 지속적으로 창출됨은 물론, 그 영역도 확장되고 있는 추세로서 인터넷을 이용한 사업자들도 점점 더 증가되고 있다.

한편, 최근 출시되는 스마트폰들의 성능이 향상되면서 일반 휴대폰에서 스마트폰으로 사용자들이 많이 옮겨가고 있는 추세이다. 스마트폰(smart phone)이란, 휴대폰에 컴퓨터 지원 기능을 추가한 지능형 휴대폰으로서, 휴대폰 기능에 충실하면서도 개인 휴대 정보 단말기(PDA) 기능, 인터넷 기능, 동영상 재생 기능 등이 추가되며, 다양한 입력 방식과 터치스크린 등이 구비되어 사용에 보다 편리한 인터페이스를 제공한다. 또한, 무선 인터넷 기능의 지원으로 인터넷 및 컴퓨터에 접속되어 이메일, 웹브라우징, 팩스, 뱅킹, 게임 등 단말기로서의 기능도 수행한다. 이와 같이 스마트폰을 통해 다양한 기능의 구현이 가능해짐에 따라 스마트폰 내에서 구동되는 다양한 전용 응용 프로그램(application program)들과 콘텐츠(content)들이 많이 개발되고 있다.

또한, 오늘날 인터넷의 광범위한 보급은 이제 유선을 넘어 무선 이동 통신 기술로의 급발전을 가져오게 되었고, 실생활에 있어서도 휴대폰, PDA, 핸드헬드(Hand-Held) 컴퓨터 등의 모바일 단말기를 통한 인터넷 상에서의 정보 검색이 시간과 장소에 구애받지 않고 가능하게 되었다.

그런데, 모바일 단말은 작은 화면 사이즈나 제한된 입력 장치와 같은 단말기 하드웨어 상의 제약이나 무선망 자원의 제한으로 인해 기존의 유선 인터넷 수준의 사용이 어려우며, 이에 따라 국내외의 모바일 웹 서비스 업체들은 유선에서 사용되는 정보와 별도로 무선 인터넷을 구축하여 서비스를 제공하여 왔다.

그러나, 이러한 기존의 모바일 웹 서비스 방식은 자원의 중복을 초래하기 때문에 매우 비효율적이고, 무선과 유선이 공존할 경우 정보 검색과 활용에 대하여 매번 각각의 서비스를 제공하는 사이트가 구축되어야 하는 문제가 있으며, 이에 따라 모바일 인터넷 상의 여러 가지 서비스 모델이나 기존의 방대한 유선 웹 컨텐츠 자원을 무선 웹에서 간단히 재사용할 수 있도록 하는 다양한 모바일 웹 서비스 방법들이 제안되었다.

한편, 모바일 단말의 종류에 따라 다양한 방식의 브라우저와 운영 체제(OS)들이 별도로 개발되어 왔다. 따라서, 이러한 브라우저 및 OS 등의 차이들로 인해 개발되는 애플리케이션도 각 브라우저 및 OS에 맞게 개발되고 있다. 예컨대, 마이크로소프트(MS) 사의 인터넷 익스플로러(IE), 오페라, 크롬, 사파리 등의 다양한 브라우저들이 완벽하게 표준을 지원하지 않고, 구글 안드로이드, 애플 IOS 등의 OS에 따라 애플리케이션이 동일하게 동작하지 않아 부득이하게 각 브라우저 및 OS에 맞게 별도의 애플리케이션을 개발하여야 하는 문제점이 있다.

한편, 이러한 웹페이지의 포맷을 상이한 포맷으로 변환하는 방법에 관한 기술로서, 대한민국 공개특허공보 제2003-0057285호의 "웹페이지의 에이치티엠엘 데이터를 이동국에서 표현하기에 적합한 형태로 변환하는 장치 및 방법(삼성전자 주식회사)"(문헌 1)에는 HTML 데이터를 이동국의 성능 및 제한성에 따라 이동국의 디스플레이에 적합한 새로운 포맷으로 변환하는 방법이 개시된다. 이를 위해 문헌 1에서는 이동국에서 사용하는 디스플레이에 HTML 데이터를 최적화하기 위한 HTML 필터링 프로세스를 제공한다.

그러나, 이러한 방법은 HTML 데이터를 이동국의 성능에 따라 원본 웹페이지를 제한적으로 변역하여 제공하기 때문에 원본 웹페이지의 정보와는 상이하다는 문제점이 있다. 또한, 이동국 브라우저가 HTML 포맷을 지원하지 않는 경우에는 원본 웹페이지를 브라우징할 수 없다는 문제점이 있다.

따라서, 다양한 브라우저에서도 동일하게 동작할 수 있는 웹 애플리케이션의 변환 엔진 개발의 필요성이 요구되고 있는 실정이다.

또한, 상술한 바와 같이 스마트폰이 대중화되면서 기존의 PC 기반의 웹사이트와 함께 모바일용 웹사이트가 필요하게 되어 동일한 내용을 포함하는 웹사이트를 모바일용으로 별도로 제작함으로 인해 시간, 비용 및 효율성 측면에서 서비스 업체에 상당한 부담을 가져오고 있다. 이러한 부담은 웹사이트나 모바일 사이트 또는 웹 애플리케이션을 개발하는 종래의 방법들이 비효율적이기 때문이다.

예컨대, 종래의 웹사이트 개발 및 유지 보수 방식은 디자인된 문서를 프로그램 코딩 작업한 후, 웹 서버에 업로드하여 그 결과를 확인하는 방법이며, 디자인 리뉴얼이나 기능의 확장 시 상기와 같은 절차를 거침으로 인해 많은 비용과 시간이 소요된다. 또한, 비전문가는 자신만의 웹사이트나 웹 애플리케이션을 개발 또는 운영하는 것이 거의 불가능한 실정이다.

[문헌 1] 대한민국 공개특허공보 제2003-0057285호, 웹페이지의 에이치티엠엘 데이터를 이동국에서 표현하기에 적합한 형태로 변환하는 장치 및 방법(삼성전자 주식회사) 2003.07.04

본 발명의 목적은 웹페이지의 변환 엔진을 통해 웹페이지의 포맷이 상호 변환 가능하도록 함으로써 다양한 브라우저 및 OS 환경에서도 동일하게 동작하는 애플리케이션을 제공할 수 있는 웹페이지의 동적 변환 시스템, 방법 및 컴퓨터 판독 가능한 기록 매체를 제공함에 있다.

또한, 본 발명의 다른 목적은 표준 언어인 HTML5 및 크로스 브라우저를 지원하는 자바 스크립트 기반 하에서 동작 가능한 웹 애플리케이션의 변환 엔진에 의해 플래시 기반에서 제작된 애플리케이션 또는 HTML5로 제작된 애플리케이션을 상호 변환함으로써 크로스 브라우저 또는 크로스 플랫폼을 제공하는 웹페이지의 동적 변환 시스템, 방법 및 컴퓨터 판독 가능한 기록 매체를 제공함에 있다.

또한, 본 발명의 다른 목적은 실시간으로 생성된 플래시 또는 HTML5 기반의 웹사이트 및 콘텐츠를 파라미터화하여 데이터베이스에 저장하고, 사용자의 요청 시 변환 엔진을 통해 실시간으로 각 형태에 맞는 웹사이트 및 웹 애플리케이션을 생성하여 제공하는 웹페이지의 동적 변환 시스템, 방법 및 컴퓨터 판독 가능한 기록 매체를 제공함에 있다.

또한, 본 발명의 목적은 웹페이지를 제작함에 있어 레이아웃 편집부, 디스플레이 엔진, 속성 편집부, 변환부(플래시에서 HTML5로 또는 HTML5에서 플래시로)를 지원함으로써 비전문가로 용이하게 저비용, 고효율의 사이트(즉, 웹사이트, 모바일 사이트, 콘텐츠 등)를 구축할 수 있도록 기능을 제공하는 웹페이지의 동적 변환 시스템, 방법 및 컴퓨터 판독 가능한 기록 매체를 제공함에 있다.

본 발명의 상기 목적과 여러 가지 장점은 이 기술 분야에 숙련된 사람들에 의해 본 발명의 바람직한 실시예로부터 더욱 명확하게 될 것이다.

상기한 바와 같은 본 발명의 목적을 달성하고, 후술하는 본 발명의 특유의 효과를 달성하기 위한, 본 발명의 특징적인 구성은 하기와 같다.

본 발명의 일 측면에 따르면, 웹페이지의 동적 변환 시스템은, 웹페이지 또는 웹 애플리케이션을 구성하는 적어도 하나의 구성 요소들을 저장하는 라이브러리 저장부; 상기 라이브러리 저장부로부터 선택된 상기 구성 요소를 웹페이지를 구성할 레이아웃 상에 배치시키는 레이아웃 편집부; 상기 레이아웃 편집부에 의해 배치된 각 구성 요소에 대한 속성을 설정하는 속성 편집부; 상기 레이아웃 편집부에 의해 배치된 콘텐츠를 편집하는 기능을 제공하는 콘텐츠 편집부; 상기 레이아웃 편집부에 의해 배치된 각 구성 요소를 표준 파라미터 값으로 변환시키는 파라미터 변환부; 상기 파라미터 변환부에 의해 변환된 표준 파라미터 값을 저장하는 표준 파라미터 정보 데이터베이스; 사용자의 변환 요청에 따라 사용자 단말의 브라우저의 종류 또는 운영 체제의 종류를 판단하는 브라우저 판단부; 상기 표준 파라미터 정보 데이터베이스에 저장된 표준 파라미터 정보로부터 상기 브라우저 판단부의 판단에 따라 적합한 종류의 웹페이지 소스로 변환시키는 변환 엔진부; 및 상기 변환된 소스를 디스플레이시키는 디스플레이 엔진부;를 포함함을 특징으로 한다.

바람직하게는, 상기 웹페이지 또는 웹 애플리케이션을 구성하는 구성 요소는, 이미지, 동영상, 텍스트 및 사운드 중에서 선택된 어느 하나 이상인 것을 특징으로 한다.

바람직하게는, 상기 속성 편집부의 편집 가능한 속성은 가로, 세로, 투명, 배경, 회전, 사진, 타이틀 및 스킨 중에서 선택된 어느 하나 이상인 것을 특징으로 한다.

바람직하게는, 상기 변환 엔진부는 상기 표준 파라미터 정보로부터 HTML5 표준 포맷 또는 플래시 포맷의 웹페이지로 변환시키는 것을 특징으로 한다.

바람직하게는, 상기 시스템은 상기 레이아웃 편집부에서 제작된 웹페이지를 모바일 웹페이지의 속성에 맞게 재편집하는 모바일 편집부;를 더 포함하는 것을 특징으로 한다.

본 발명의 다른 측면에 따르면, 웹페이지의 동적 변환 방법은, 웹페이지의 동적 변환 시스템에서 수행되는 각 단계가, 라이브러리 저장부에서 웹페이지 또는 웹 애플리케이션을 구성하는 적어도 하나의 구성 요소들을 저장하는 단계; 레이아웃 편집부에서 상기 라이브러리 저장부로부터 선택된 상기 구성 요소를 웹페이지를 구성할 레이아웃 상에 배치시키는 단계; 속성 편집부에서 상기 레이아웃 편집부에 의해 배치된 각 구성 요소에 대한 속성을 설정하는 단계; 콘텐츠 편집부에서 상기 레이아웃 편집부에 의해 배치된 콘텐츠를 편집하는 기능을 제공하는 단계; 파라미터 변환부에서 상기 레이아웃 편집부에 의해 배치된 각 구성 요소를 표준 파라미터 값으로 변환시키는 단계; 상기 파라미터 변환부에 의해 변환된 표준 파라미터 값을 표준 파라미터 정보 데이터베이스에 저장하는 단계; 브라우저 판단부에서 사용자의 변환 요청에 따라 사용자 단말의 브라우저의 종류 또는 운영 체제의 종류를 판단하는 단계; 변환 엔진부에서 상기 표준 파라미터 정보 데이터베이스에 저장된 표준 파라미터 정보로부터 상기 브라우저 판단부의 판단에 따라 적합한 종류의 웹페이지 소스로 변환시키는 단계; 및 디스플레이 엔진부에서 상기 변환된 소스를 디스플레이시키는 단계;를 포함함을 특징으로 한다.

바람직하게는, 상기 웹페이지 소스로 변환시키는 단계는 상기 표준 파라미터 정보로부터 HTML5 표준 포맷 또는 플래시 포맷의 웹페이지로 변환시키는 것을 특징으로 한다.

바람직하게는, 상기 방법은 모바일 편집부에서 상기 레이아웃 편집부에서 제작된 웹페이지를 모바일 웹페이지의 속성에 맞게 재편집하는 단계;를 더 포함하는 것을 특징으로 한다.

한편, 상기 웹페이지의 동적 변환 방법을 제공받기 위한 정보는 서버 컴퓨터로 읽을 수 있는 기록 매체에 저장될 수 있다. 이러한 기록 매체는 컴퓨터 시스템에 의하여 읽혀질 수 있도록 프로그램 및 데이터가 저장되는 모든 종류의 기록 매체를 포함한다. 그 예로는, 롬(Read Only Memory), 램(Random Access Memory), CD(Compact Disk), DVD(Digital Video Disk)-ROM, 자기 테이프, 플로피 디스크, 광데이터 저장장치 등이 있으며, 또한 케리어 웨이브(예를 들면, 인터넷을 통한 전송)의 형태로 구현되는 것도 포함된다. 또한, 이러한 기록 매체는 네트워크로 연결된 컴퓨터 시스템에 분산되어 분산 방식으로 컴퓨터가 읽을 수 있는 코드가 저장되고 실행될 수 있다.

상술한 바와 같이, 본 발명에 따르면, 웹페이지의 변환 엔진을 통해 웹페이지의 포맷이 상호 변환 가능하도록 함으로써 다양한 브라우저 및 OS 환경에서도 동일하게 동작하는 애플리케이션을 제공할 수 있는 장점이 있다.

또한, 본 발명에 따르면, HTML5 및 크로스 브라우저를 지원하는 자바 스크립트 기반 하에서 동작 가능한 웹 애플리케이션의 변환 엔진에 의해 플래시 기반에서 제작된 애플리케이션 또는 HTML5로 제작된 애플리케이션을 상호 변환할 수 있는 장점이 있다.

또한, 본 발명에 따르면, 실시간으로 생성된 플래시 또는 HTML5 기반의 웹사이트 및 콘텐츠를 파라미터화하여 데이터베이스에 저장함으로써, 사용자의 요청 시 변환 엔진을 통해 실시간으로 각 형태에 맞는 웹사이트 및 웹 애플리케이션을 생성하여 제공할 수 있는 장점이 있다.

또한, 종래에는 웹페이지의 영역 지정에 있어 4개 또는 8개의 핸들러를 이용하여 리사이징하였으나 모바일 환경(예컨대, 스마트폰 도는 태블릿)에서는 핸들러의 크기가 작아져 사용하기가 불편하였다. 이에 따라, 본 발명에서는 객체의 상, 하, 좌, 우의 일정 영역을 핸들러로 지정함으로써 모바일 환경에서 리사이징 작업 시 용이하게 작업할 수 있는 장점이 있다.

또한, 종래의 이미지 편집 프로그램(예컨대, 포토샵 등)에서의 이미지 편집기들은 사각의 원본 이미지를 타원형의 이미지로 변환할 때, 변환된 이미지가 별도로 생성됨으로써 변환 효과를 적용한 만큼의 이미지가 저장 공간에 기록되어 저장 공간이 낭비되었다. 그러나, 본 발명에서는 변환 효과를 표준 파라미터로 변환시킨 후 데이터베이스에 저장하고, 사용자의 요청이 있을 경우 플래시 또는 HTML5에 맞게 파라미터를 변환하여 디스플레이함으로써 하나의 원본으로 수많은 변환 효과를 내는 동시에 저장 공간의 낭비를 줄일 수 있는 장점이 있다.

또한, 일반적인 이미지 편집기 프로그램이 가지고 있는 크기, 확장자, 회전, 화질 변경 등의 기능에서는 원본 이미지에 대한 편집이 용이하지 않았으나, 본 발명에 따른 이미지 파라미터 변환을 적용함으로써 일반인의 경우에도 이미지 모양의 변경을 용이하게 할 수 있는 장점이 있다.

도 1은 본 발명의 실시예에 따른 플래시 파일을 HTML5 웹 문서로 변환시키는 개념을 나타내는 도면이다.
도 2는 본 발명의 실시예에 따른 HTML5 애플리케이션을 플래시 페이지로 변환시키는 개념을 나타내는 도면이다.
도 3은 본 발명의 실시예에 따른 웹페이지의 동적 변환 시스템의 구조를 나타내는 블록도이다.
도 4는 본 발명의 실시예에 따른 웹페이지 변환 구조의 개념을 나타내는 도면이다.
도 5는 본 발명의 실시예에 따른 동적 변환 시스템의 레이아웃 편집부의 처리 구성을 나타내는 도면이다.
도 6은 본 발명의 실시예에 따른 동적 변환 시스템의 콘텐츠 편집부의 처리 구성을 나타내는 도면이다.
도 7은 기존의 속성 편집 방법을 나타내는 도면이다.
도 8은 본 발명의 실시예에 따른 동적 변환 시스템의 속성 편집부의 처리 구성을 나타내는 도면이다.
도 9는 본 발명의 실시예에 따른 웹페이지 변환 절차를 나타내는 흐름도이다.
도 10은 본 발명의 실시예에 따른 모바일 웹페이지로의 변환 절차를 나타내는 흐름도이다.
도 11은 본 발명의 실시예에 따른 플래시 또는 HTML5 형식의 웹페이지를 모바일 페이지로 변환하는 개념을 나타내는 도면이다.
도 12는 본 발명의 실시예에 따른 플래시 또는 HTML5 형식의 웹페이지를 HTML5 또는 플래시 형식의 페이지로 변환하는 개념을 나타내는 도면이다.
도 13은 일반적인 리사이즈 처리기의 영역 지정 이동을 나타내는 도면이다.
도 14는 본 발명의 실시예에 따른 영역 지정 방법을 나타내는 도면이다.
도 15는 일반적인 이미지 변환의 개념을 나타내는 도면이다.
도 16은 본 발명의 실시예에 따른 이미지 변환의 개념을 나타내는 도면이다.
도 17은 본 발명의 실시예에 따른 이미지 파라미터 변환 방법을 나타내는 도면이다.

후술하는 본 발명에 대한 상세한 설명은, 본 발명이 실시될 수 있는 특정 실시예를 예시로서 도시하는 첨부 도면을 참조한다. 이들 실시예는 당업자가 본 발명을 실시할 수 있기에 충분하도록 상세히 설명된다. 본 발명의 다양한 실시예는 서로 다르지만 상호 배타적일 필요는 없음이 이해되어야 한다. 예를 들어, 여기에 기재되어 있는 특정 형상, 구조 및 특성은 일 실시예에 관련하여 본 발명의 정신 및 범위를 벗어나지 않으면서 다른 실시예로 구현될 수 있다. 또한, 각각의 개시된 실시예 내의 개별 구성 요소의 위치 또는 배치는 본 발명의 정신 및 범위를 벗어나지 않으면서 변경될 수 있음이 이해되어야 한다. 따라서, 후술하는 상세한 설명은 한정적인 의미로서 취하려는 것이 아니며, 본 발명의 범위는 적절하게 설명된다면 그 청구항들이 주장하는 것과 균등한 모든 범위와 더불어 첨부된 청구항에 의해서만 한정된다. 도면에서 유사한 참조 부호는 여러 측면에 걸쳐서 동일하거나 유사한 기능을 지칭한다.

본 발명은 크로스 브라우저(Cross browser) 및 크로스 플랫폼(Cross platform)을 지원하는 웹사이트 및 웹 애플리케이션 구축을 위한 동적 변환 시스템 및 그 운영 방법을 개시한다. 특히, 본 발명에서는 다양한 브라우저 및 OS에 맞게 별도로 애플리케이션을 개발해야 하는 불편함을 해결하기 위해 표준 언어인 HTML5와 크로스 브라우저를 지원하는 자바 스크립트(javascript(jQuery, Prototype)) 기반 하에서 동작할 수 있도록 웹 애플리케이션을 구축할 수 있는 변환 엔진을 제공한다. 이에 따라 상기 변환 엔진에 의해 플래시 기반에서 제작된 애플리케이션이나 HTML5 포맷으로 제작된 애플리케이션을 상호 변환하여 크로스 브라우저 및 크로스 플랫폼을 구현한다.

한편, 종래에도 플래시(flash) 파일을 HTML5 포맷으로 변환해주는 툴이 있었으나, 미리 제작된 정적인 "swf" 포맷의 파일을 HTML5 포맷으로 변환해주기만 할 뿐, 사용자가 실시간으로 생성하는 웹사이트 및 콘텐츠에 대해서는 변환이 불가능하였다. 그러나, 본 발명에서는 실시간으로 생성되는 플래시 또는 HTML5 기반의 웹사이트 및 콘텐츠를 파라미터(parameter)화하여 데이터베이스에 저장한다. 그런 다음, 사용자의 요청 시에 본 발명의 실시예에 따른 변환 엔진을 이용하여 실시간으로 "HTML5 + 자바 스크립트(jQuery, Prototype)" 형태의 웹사이트 및 웹 애플리케이션을 생성하여 브라우저에 디스플레이한다.

또한, 본 발명의 실시예에 따라 웹페이지를 제작함에 있어 레이아웃 편집부, 디스플레이 엔진, 속성 편집부, 변환부(플래시에서 HTML5로 또는 HTML5에서 플래시로)를 지원함으로써 비전문가도 용이하게 저비용, 고효율의 사이트(즉, 웹사이트, 모바일 사이트, 콘텐츠 등)를 구축할 수 있도록 기능을 제공한다.

상기 레이아웃 편집부는 빌더(builder)를 사용하여 웹사이트를 모듈화하며, 속성 편집부는 편집기의 개인화로 웹사이트 및 웹 애플리케이션을 편집할 수 있도록 한다. 또한, 상기 디스플레이 엔진은 다양한 편집 효과로 동적인 화면을 구현하며, 변환부는 HTML5 파일을 플래시 파일로 자동 변환시킨다.

이하, 본 발명이 속하는 기술 분야에서 통상의 지식을 가진 자가 본 발명을 용이하게 실시할 수 있도록 하기 위하여, 본 발명의 바람직한 실시예들에 관하여 첨부된 도면을 참조하여 상세히 설명하기로 한다.

웹페이지의 동적 변환의 개념 시스템

도 1은 플래시 파일을 HTML5 웹 문서로 변환시키는 개념을 나타내며, 도 2는 HTML5 문서를 플래시로 변환시키는 개념을 나타낸다.

도 1은 본 발명의 실시예에 따른 플래시 파일을 HTML5 웹 문서로 변환시키는 개념을 나타내는 도면이다. 도 1을 참조하면, 라이브러리(library)에 저장된 웹페이지를 구성하는 각 구성 요소(예컨대, 이미지, 동영상, 텍스트, 사운드 등)를 마우스로 드래그 앤 드롭(Drag & Drop)하여 배치함으로써 플래시 파일(flash file)을 생성한다. 이때, 상기 플래시 파일을 본 발명의 실시예에 따라 파라미터 변환시켜 데이터베이스에 저장한다.

상기 파라미터 변환 결과로 상기 데이터베이스에 저장되는 정보는 상기 플래시 파일을 구성하는 각 구성 요소에 대한 상기 구성 요소별 위치, 속성 및 해당 구성 요소의 파일(예컨대, 라이브러리 상에서의 파일 이름) 정보가 될 수 있다. 이와 같이 데이터베이스에 저장된 파라미터 변환된 플래시 정보는 사용자의 요청에 따라 HTML5 파라미터로 변환된다. 그런 다음, HTML5 웹사이트 또는 웹 애플리케이션을 생성한다.

도 2는 본 발명의 실시예에 따른 HTML5 애플리케이션을 플래시 페이지로 변환시키는 개념을 나타내는 도면이다. 도 2를 참조하면, 라이브러리(library)에 저장된 웹페이지를 구성하는 각 구성 요소(예컨대, 이미지, 동영상, 텍스트, 사운드 등)를 마우스로 드래그 앤 드롭(Drag & Drop)하여 배치함으로써 HTML5 포맷의 애플리케이션(HTML5 application)을 생성한다. 이때, 상기 HTML5 애플리케이션 파일을 본 발명의 실시예에 따라 HTML5 파라미터로로 변환시켜 데이터베이스에 저장한다.

상기 파라미터 변환 결과로 상기 데이터베이스에 저장되는 정보는 상기 HTML5 포맷의 파일을 구성하는 각 구성 요소에 대한 상기 구성 요소별 위치, 속성 및 해당 구성 요소의 파일(예컨대, 라이브러리 상에서의 파일 이름) 정보가 될 수 있다. 이와 같이 데이터베이스에 저장된 파라미터 변환된 HTML5 정보는 사용자의 요청에 따라 플래시 파라미터로 변환될 수 있다. 그런 다음, 플래시 웹사이트 또는 웹 애플리케이션을 생성한다.

이하, 도 3 내지 도 8을 참조하여 본 발명의 실시예에 따른 시스템 및 장치의 구조를 설명하며, 다음으로 도 9 및 도 10을 참조하여 본 발명의 실시예에 따른 서비스 절차를 상세히 설명한다.

웹페이지의 동적 변환 시스템

도 3은 본 발명의 실시예에 따른 웹페이지의 동적 변환 시스템의 구조를 나타내는 블록도이다. 도 3을 참조하면, 본 발명의 실시예에 따른 동적 변환 시스템은 라이브러리 저장부(301), 레이아웃 편집부(302), 속성 편집부(303), 콘텐츠 편집부(304), 모바일 편집부(305), 표준 파라미터 변환부(306), 표준 파라미터 정보 데이터베이스(307), 브라우저 판단부(308), 변환 엔진부(309) 및 디스플레이 엔진부(310)를 포함하여 구성될 수 있다.

먼저, 라이브러리 저장부(301)는 웹페이지 또는 웹 애플리케이션을 구성하는 구성 요소로서의 각 라이브러리를 저장하며, 상기 라이브러리는 예컨대, 이미지, 동영상, 텍스트, 사운드 등이 될 수 있다.

레이아웃 편집부(302)는 상기 라이브러리 저장부(301)에 저장된 각 라이브러리를 마우스로 드래그 앤 드롭(Drag & Drop)하여 웹페이지를 편집하는 기능을 제공한다. 이때, 속성 편집부(303)에 의해 상기 레이아웃 편집부(302)에 의해 배치된 각 구성 요소에 대한 속성을 설정할 수 있다. 또한, 콘텐츠 편집부(304)는 상기 레이아웃 편집부(302)에 의해 배치된 콘텐츠를 재편집하는 기능을 제공하며, 상기 재편집은 예컨대, 크기 변경, 색상 변경, 회전, 투명 설정 등의 작업이 될 수 있다.

이와 같이, 레이아웃 편집부(302)를 통해 웹페이지의 편집이 완료되면, 표준 파라미터 변환부(306)에 의해 표준 파라미터 값으로 변환되고, 상기 변환된 값은 표준 파라미터 정보 데이터베이스(307)에 저장된다. 한편, 상기 레이아웃 편집부(302)에서 제작된 웹페이지가 모바일용 웹페이지일 경우, 모바일 편집부(305)에 의해 모바일 웹페이지의 속성에 맞게 재편집된다.

이와 같이 편집된 웹페이지가 표준 파라미터 값으로 저장된 후, 사용자에 의해 변환 요청 정보가 입력되면, 브라우저 판단부(308)에서는 상기 사용자의 변환 요청에 대한 브라우저의 종류 또는 OS의 종류를 판단한다. 이에 따라 변환 엔진부(309)에서는 상기 표준 파라미터 정보 데이터베이스(307)에 저장된 표준 파라미터 정보로부터 상기 브라우저 판단부(308)의 판단에 따라 적합한 종류의 웹페이지로 변환시킨다.

상기와 같이 해당 종류에 맞게 변환된 소스 정보는 디스플레이 엔진부(310)에서 사용자 브라우저 및 실행 환경에 맞게 HTML5 포맷 또는 플래시 포맷으로 디스플레이한다.

도 4는 본 발명의 실시예에 따른 웹페이지 변환 구조의 개념을 나타내는 도면이다. 도 4를 참조하면, 상술한 바와 같이 레이아웃 편집부에서 라이브러리로부터 사용자가 각 구성 요소를 드래그 앤 드롭하여 원하는 위치에 배치시킨다. 이때, 모바일 웹페이지를 생성하고자 할 경우에는 모바일 편집부에 의해 모바일 페이지 규격에 맞게 재배치시켜 구성하게 된다.

한편, 상기 레이아웃 편집부를 통해 편집 과정 중 속성 편집부를 통해 각 구성 요소에 대한 속성을 편집할 수 있으며, 콘텐츠 편집부를 통해 각 콘텐츠를 편집할 수 있다. 상기 속성 편집부의 편집 가능한 속성으로는 가로, 세로, 투명, 배경, 회전, 사진, 타이틀, 스킨 등이 될 수 있다. 이에 대한 상세한 설명은 후술하기로 한다.

이와 같이 상기 레이아웃 편집부 또는 모바일 편집부에 의해 원하는 웹페이지가 구성되면, 본 발명의 실시예에 따라 표준 파라미터로 변환시켜 데이터베이스에 저장한다.

이때, 사용자로부터 웹페이지의 브라우징 요청이 있을 경우, 먼저 사용자의 웹브라우저를 검사하고, 사용자의 ID, 페이지 키 값, 브라우저 등의 정보를 수집한다.

상술한 바와 같이 상기 변환 엔진부에서는 상기 수집된 정보를 참조하여 사용자 브라우저에 맞도록 표준 파라미터를 변환시킨다. 예컨대, 사용자 브라우저가 HTML5 포맷을 지원하는 브라우저일 경우 HTML5 변환기를 통해 상기에서 저장된 표준 파라미터를 HTML5 포맷의 웹페이지로 변환시킨다. 반면, 사용자 브라우저가 HTML5 포맷을 지원하지 않는 브라우저일 경우 플래시 변환기를 통해 상기에서 저장된 표준 파라미터를 플래시 포맷의 웹페이지로 변환시킨다. 마지막으로 상기 변환 엔진부를 통해 변환되어 생성된 웹페이지는 디스플레이 엔진부를 통해 브라우징되며, 상기 브라우징된 정보는 다시 데이터베이스에 저장될 수 있다.

이하, 도 5 내지 도 8을 참조하여, 상기 도 3 및 도 4에서 상술한 본 발명의 실시예에 따른 각 기능부들을 보다 상세히 설명하기로 한다.

도 5는 본 발명의 실시예에 따른 동적 변환 시스템의 레이아웃 편집부의 처리 구성을 나타내는 도면이다. 도 5를 참조하면, 레이아웃 편집부는 웹 애플리케이션, 멀티미디어 데이터 등과 같이 웹사이트 또는 모바일 웹을 구성하는 요소들의 정보(예컨대, 위치, 크기, 투명, 색상, 회전 등)를 마우스 등을 이용하여 드래그 앤 드롭 방식으로 배치할 수 있다.

또한, 상기 배치된 정보를 파라미터로 변환한 후 데이터베이스에 저장하고, 상술한 바와 같이 사용자의 호출에 따라 실시간으로 동적으로 디스플레이할 수 있다. 이때, 본 발명의 실시예에 따라 사용자의 브라우저를 확인하여 HTML5 포맷 또는 플래시 포맷으로 변환하여 디스플레이할 수가 있다.

도 6은 본 발명의 실시예에 따른 동적 변환 시스템의 콘텐츠 편집부의 처리 구성을 나타내는 도면이다. 일반적으로 웹상에서 고품질의 멀티미디어 콘텐츠를 생성하기 위해서는 디자인, HTML, 자바 스크립트(Javascript) 등의 전문적인 지식이 필요하다. 따라서, 일반 사용자들은 생성된 웹페이지의 내용을 변경하거나 단순한 디자인을 변경하고자 할 때에도 비용과 시간을 들여 전문가에게 의뢰를 해야 하는 어려움이 있었다. 그러나, 도 6에 도시된 바와 같이, 본 발명의 실시예에 따라 상술한 바와 같이 드래그 앤 드롭으로 이미지, 동영상, 사운드, 텍스트 등의 멀티미디어 콘텐츠를 배치하고, 이를 콘텐츠 편집부를 통해 재편집하여 데이터베이스에 저장할 수 있다. 예컨대, 상기 콘텐츠 편집부에서는 각 배치된 멀티미디어 콘텐츠의 크기를 변경하거나 색상을 변경할 수도 있으며, 회전 또는 투명 등의 기능을 제공할 수도 있다.

다음으로, 도 7 및 도 8을 참조하여 속성 편집부의 기능을 설명한다.

도 7은 기존의 속성 편집 방법을 나타내는 도면이다. 도 7에 도시된 바와 같이, 종래에는 제로보드 또는 그누보드 등의 게시판을 이용하여 웹사이트 구축 시 HTML, 자바 스크립트 등의 전문 지식이 없을 경우 속성의 편집이 어려웠다. 따라서, 상기 게시판 등의 기능들을 무료로 사용할 수 있음에도 불구하고 전문가에게 추가 비용을 주고 의뢰하여야 하는 문제가 있었다.

그러나, 본 발명의 실시예에 따라 속성 편집부를 통해 각 콘텐츠의 속성을 편집할 수가 있다. 즉, 상술한 바와 같이 드래그 앤 드롭으로 웹페이지의 원하는 웹 애플리케이션이 배치되면, 상기 속셩 편집부를 실행하여 각 애플리케이션의 속성(예컨대, 배치, 크기, 색상, 폰트, 회전, 투명 등)을 직관적인 UI에 의해 용이하게 편집할 수 있다. 이와 같이 사용자가 각 애플리케이션의 속성을 재정의함으로써 사용자가 원하는 웹페이지를 용이하게 제작할 수가 있다.

도 8은 본 발명의 실시예에 따른 동적 변환 시스템의 속성 편집부의 처리 구성을 나타내는 도면이다. 도 8을 참조하면, 제작 중인 웹페이지의 특정 게시판(예컨대, 게시판 1)의 속성을 편집하고자 할 경우 편집 모드를 실행하면, 속성 편집부에 의해 속성 편집 창 화면이 제공되며, 상기 속성 편집 창에서 사용자가 해당 속성을 선택 또는 입력함으로써 용이하게 속성 편집이 가능해진다. 이와 같이 속성 편집이 완료되고 저장을 실행하면, 상기 속성 편집된 이후의 웹페이지 정보가 파라미터 정보로 변환되어 데이터베이스에 저장된다.

한편, 도면상에 도시되지는 않았으나 상술한 디스플레이 엔진부는 상기 레이아웃 편집부, 콘텐츠 편집부, 속성 편집부, 변환 엔진부 등을 통해 생성하여 데이터베이스에 저장한 표준 파라미터를 각 브라우저 또는 OS에 맞게 실행 가능한 소스로 변환하여 사용자의 브라우저 및 실행 환경에 디스플레이하는 기능을 수행한다.

예컨대, 플래시 디스플레이 엔진의 경우 데이터베이스에 저장되어 있는 표준 파라미터를 플래시 플레이어에서 실행할 수 있도록 실시간으로 소스를 생성하여 실행한 후, 그 결과를 사용자 브라우저에 디스플레이한다.

또한, HTML5 디스플레이 엔진의 경우 데이터베이스에 저장되어 있는 표준 파라미터를 각 브라우저에서 실행할 수 있도록 실시간으로 소스(즉, 'HTML5+자바스크립트')를 생성하여 실행한 후, 그 결과를 사용자 브라우저에 디스플레이한다.

한편, 상기 디스플레이 엔진부를 종래의 게시판, 블로그, 미니홈피, 메일 등에 삽입할 경우 본 발명에 따라 생성된 콘텐츠를 제한 없이 사용할 수 있게 되며, 기존의 HTML 편집기를 대체할 수 있어 사용자의 편의성을 극대화할 수 있는 효과가 있다.

이상으로 본 발명의 실시예에 따른 시스템의 각 기능부를 상세히 설명하였다. 다음으로, 도 9 및 도 10을 참조하여 본 발명의 실시예에 따른 웹페이지의 동적 변환 절차를 설명한다.

웹페이지 동적 변환 절차

도 9는 본 발명의 실시예에 따른 웹페이지 변환 절차를 나타내는 흐름도이다. 도 9를 참조하면, 먼저 레이아웃 편집기를 실행(S901)하고, 라이브러리로부터 웹페이지를 구성할 웹 구성 요소들을 드래그(S902)하여 웹페이지 상에 배치시킨다. 그런 다음, 선택적으로 상기 배치된 각 구성 요소들을 정렬하고 속성을 지정(S903)하며, 콘텐츠의 내용을 편집한다.

다음으로, 본 발명의 실시예에 따른 파라미터 변환 실행에 따라 상기 배치된 웹페이지의 각 구성 요소들을 파라미터로 변환하여 데이터베이스에 저장(S904)시킨다.

한편, 사용자에 의해 호출(S905)이 발생할 경우, 상기 사용자의 브라우저가 HTML5 포맷을 지원하는 브라우저인지를 확인(S906)한다. 상기 확인 결과, 상기 사용자의 브라우저가 HTML5 지원 브라우저일 경우에는 상기 데이터베이스에 저장된 파라미터를 HTML5 문서로 변환(S907)시키고, 이를 브라우징하여 사용자의 단말에 디스플레이(S908)시킨다.

반면, 상기 확인 결과, 상기 사용자의 브라우저가 HTML5 미지원 브라우저일 경우에는 상기 데이터베이스에 저장된 파라미터를 플래시 파일로 변환(S909)하고, 변환된 플래시 파일을 사용자 단말에 디스플레이(S910)시킨다.

도 10은 본 발명의 실시예에 따른 모바일 웹페이지로의 변환 절차를 나타내는 흐름도이다. 도 10을 참조하면, 먼저 레이아웃 편집기를 실행(S1001)하고, 라이브러리로부터 웹페이지를 구성할 웹 구성 요소들을 드래그(S1002)하여 웹페이지 상에 배치시킨다. 그런 다음, 선택적으로 상기 배치된 각 구성 요소들을 정렬하고 속성을 지정(S1003)하며, 콘텐츠의 내용을 편집한다.

한편, 상기 생성하고자 하는 웹페이지가 모바일 단말을 위한 웹페이지일 경우(S1004), 모바일 웹페이지 편집 기능을 실행하여 모바일 페이지에 맞도록 재편집(S1005)한다.

다음으로, 본 발명의 실시예에 따른 파라미터 변환 실행에 따라 상기 배치된 웹페이지의 각 구성 요소들을 파라미터로 변환하여 데이터베이스에 저장(S1006)시킨다.

한편, 사용자에 의해 호출(S1007)이 발생할 경우, 상기 사용자의 브라우저가 HTML5 포맷을 지원하는 브라우저인지를 확인(S1008)한다. 상기 확인 결과, 상기 사용자의 브라우저가 HTML5 지원 브라우저일 경우에는 상기 데이터베이스에 저장된 파라미터를 HTML5 문서로 변환(S1009)시키고, 이를 브라우징하여 사용자의 단말에 디스플레이(S1010)시킨다.

이상으로, 본 발명의 실시예에 따른 시스템 및 방법을 상세히 설명하였다. 다음으로, 도 11 내지 도 17을 참조하여 본 발명의 실시예에 따른 다양한 구현 예를 설명한다.

실시예

도 11은 본 발명의 실시예에 따른 플래시 또는 HTML5 형식의 웹페이지를 모바일 페이지로 변환하는 개념을 나타내는 도면이다. 도 11을 참조하면, 사용자가 동적으로 생성한 웹페이지 또는 콘텐츠의 내용들을 상술한 바와 같이 드래그 앤 드롭 방식을 이용하여 모바일 단말에 최적화되도록 웹페이지를 구성할 수 있다. 이때, 본 발명의 실시예에 따라 각 구성 요소(예컨대, 이미지, 동영상, 텍스트, 사운드)에 대한 정보(예컨대, 크기, 투명, 색상, 위치 등)를 파라미터로 변경한 후 데이터베이스에 저장한다.

한편, 도시된 바와 같이 특정 모바일 단말에 대한 모델명이 선택될 경우 모바일 페이지 편집 화면에는 해당 모바일 단말의 화면 크기에 맞도록 표시됨으로써, 사용자가 해당 모바일 단말에 맞는 웹페이지를 용이하게 제작할 수 있다.

이와 같이 데이터베이스에 저장된 파라미터 정보는 사용자의 요청에 의해 HTML5 포맷 형식 등으로 변환된 후, 사용자의 모바일 단말에 브라우징된다.

도 12는 본 발명의 실시예에 따른 플래시 또는 HTML5 형식의 웹페이지를 HTML5 또는 플래시 형식의 페이지로 변환하는 개념을 나타내는 도면이다. 도 12를 참조하면, 사용자가 동적으로 생성한 웹사이트 또는 콘텐츠의 내용을 드래그 앤 드롭 방식을 이용하여 HTML5 또는 플래시에 최적화되도록 웹페이지를 구성한 후, 상기 구성된 정보(예컨대, 크기, 투명, 색상, 위치 등)를 파라미터로 변경한 후 데이터베이스에 저장한다.

이때, 상기 데이터베이스에 저장된 파라미터 정보는 사용자의 요청에 의해 플래시 또는 HTML5 포맷 형식 등으로 변환된 후, 사용자의 단말에 플래시 웹사이트 또는 HTML5 웹사이트로 브라우징된다. 따라서, 사용자가 특정 포맷의 웹페이지를 생성하더라도 사용자 단말의 지원 브라우저 또는 OS에 상관없이 브라우징이 가능하다.

이하, 도 13 내지 도 17을 참조하여, 본 발명의 실시예에 따른 추가 기능들에 대해 설명한다.

도 13은 일반적인 리사이즈 처리기의 영역 지정 이동을 나타내는 도면이며, 도 14는 본 발명의 실시예에 따른 영역 지정 방법을 나타내는 도면이다. 도 13 및 도 14를 참조하면, 종래에는 4개 또는 8개의 핸들러(handler)를 이용하여 리사이징(resizing)을 수행하였으나 모바일 환경(예컨대, 스마트폰 또는 태블릿)에서는 핸들러의 크기가 작아지므로 사용에 불편함이 있었다.

따라서, 본 발명에서는 도 14에서와 같이 전체 영역을 자동으로 지정함으로써 리사이징 작업을 용이하게 제공할 수 있다. 즉, 객체(object)의 상, 하, 좌, 우의 일정 영역을 핸들러로 지정함으로써 사용자가 용이하게 리사이징 작업을 할 수 있다.

도 15는 일반적인 이미지 변환의 개념을 나타내는 도면이며, 도 16은 본 발명의 실시예에 따른 이미지 변환의 개념을 나타내는 도면이다. 도 15 및 도 16을 참조하면, 종래에는 포토샵 등의 이미지 편집기 등을 사용하여 사각의 원본 이미지를 타원형의 이미지로 변환하고자 할 때, 변환된 이미지가 별도로 생성되어 변환 효과를 적용한 만큼의 이미지가 저장 공간에 기록된다. 따라서, 저장 공간이 낭비가 되는 문제가 발생한다.

그러나, 도 16에서와 같이 본 발명에서는 변환시 표준 파라미터로 변환하여 데이터베이스에 저장하고, 사용자의 요청이 있을 때 플래시 또는 HTML5 포맷에 맞게 파라미터를 변환하여 디스플레이함으로써 하나의 원본으로 다수의 변환 효과를 내는 동시에 저장 공간의 낭비를 줄일 수 있다.

도 17은 본 발명의 실시예에 따른 이미지 파라미터 변환 방법을 나타내는 도면이다. 도 17을 참조하면, 일반적인 이미지 편집기 프로그램에서 지원하는 크기, 확장자, 회전, 화질 변경 등의 기능에서 원본 이미지에 대한 편집은 상당히 어려웠다. 예컨대, 포토샵 또는 일러스트레이터 프로그램 사용 시 전문 지식이 없을 경우 이미지 형태의 변경이 용이하지 않은 문제가 있었다. 그러나, 도 17에 도시된 바와 같이 본 발명에서는 이미지 파라미터의 변환 기능을 적용하여 이미지 형태의 변경을 용이하게 할 수 있는 장점이 있다.

여기에서 다양한 방법들에 관해 설명된 바와 같은 다양한 동작들 및 기능들은 특정 프로세싱 기능부 및/또는 그 안에 구현된 프로세싱 기능부, 및/또는 그 안의 다른 구성 요소들과 같은 많은 유형의 기능부들 중 어느 것 내에서 수행될 수 있다. 예를 들면, 그러한 기능부들은 여기에 설명된 바와 같은 다양한 동작들 및 처리들, 또는 여기에 설명된 바와 같은 어느 다른 동작들 및 기능들 등 또는 그 각 등가물들을 수행하는 것뿐만 아니라 여기에 설명된 바와 같은 그러한 정보들을 생성하고 그러한 동작들, 처리들 등을 수행할 수 있다.

일부 실시예들에서, 그러한 기능부들(동일한 장치 또는 구별된 장치들 상에서 구현될 수 있는)은 본 발명의 다양한 측면들에 따른 그러한 처리 및 동작들 등, 및/또는 여기에 개시된 바와 같은 어느 다른 동작들 및 기능들, 및 그 각 등가물들을 수행할 수 있다. 일부 실시예들에서, 그러한 처리는 제1 장치에서의 제1 기능부, 및 제2 장치 내의 제2 기능부에 의해 함께 수행된다. 다른 실시예들에서, 그러한 프로세싱, 동작들 등은 하나의 특정 장치 내에서 처리부들에 의해 전적으로 수행된다. 심지어 다른 실시예들에서, 그러한 프로세싱, 동작들이 하나의 단일 디바이스내에서 적어도 제1 기능부 및 제2 기능부를 사용하여 수행된다.

또한, 상술한 설명에서, 용어들 '시스템', '장치', '~부'는 단일 프로세싱 디바이스 또는 복수의 프로세싱 디바이스들일 수 있다. 그러한 프로세싱 디바이스는 마이크로 프로세서, 마이크로 컨트롤러, 디지털 신호 처리기, 마이크로 컴퓨터, 중앙 처리 유닛, 필드 프로그래머블 게이트 어레이, 프로그래머블 로직 디바이스, 스테이트 머신, 로직 회로, 아날로그 회로, 디지털 회로, 및/또는 상기 회로 및/또는 동작 지시들의 하드 코딩에 기반하여 신호들(아날로그 및/또는 디지털)을 조작하는 소정의 디바이스일 수 있다. 상기 프로세싱 모듈, 모듈, 프로세싱 회로, 및/또는 프로세싱 유닛은 단일 메모리 디바이스, 복수의 메모리 디바이스들, 및/또는 상기 프로세싱 모듈, 모듈, 프로세싱 회로, 및/또는 프로세싱 유닛의 내장된 회로일 수 있는 결합된 메모리 및/또는 집적된 메모리 엘리먼트를 가질 수 있다. 그러한 메모리 디바이스는 읽기 전용 메모리(ROM), 랜덤 액세스 메모리(RAM), 휘발성 메모리, 비휘발성 메모리, 정적 메모리, 동적 메모리, 플래시 메모리, 캐시 메모리, 및/또는 디지털 정보를 저장하는 소정의 디바이스일 수 있다. 만약, 상기 프로세싱 모듈, 모듈, 프로세싱 회로, 및/또는 프로세싱 유닛이 하나 이상의 프로세싱 디바이스를 포함한다면, 상기 프로세싱 디바이스들은 집중적으로 위치될 수 있거나(즉, 유선 및/또는 무선 버스 구조를 통해 함께 직접적으로 연결된), 분산되어 위치될 수 있음(예컨대, 근거리 통신망 및/또는 광역 네트워크를 통한 간접적인 연결을 통한 클라우드 컴퓨팅)을 주목하여야 한다. 만약, 상기 프로세싱 모듈, 모듈, 프로세싱 회로, 및/또는 프로세싱 유닛이 정적 머신, 아날로그 회로, 디지털 회로, 및/또는 회로, 저장하는 메모리 및/또는 메모리 구성 요소를 통해 하나 이상의 그 기능들을 구현한다면, 그 대응하는 동작 지시들은 상기 정적 머신, 아날로그 회로, 디지털 회로, 및/또는 논리 회로를 포함하는 회로의 내부에 내장되거나 외부에 있을 수 있음을 더 주목하여야 한다. 상기 메모리 엘리먼트는 저장할 수 있으며, 상기 프로세싱 모듈, 모듈, 프로세싱 회로, 및/또는 프로세싱 유닛은 상기 도면들 중 하나 이상에서 나타내는 단계들 및/또는 기능들 중 적어도 일부에 대응하는 하드 코딩된 및/또는 동작 지시들을 실행한다는 것을 여전히 더 주목하여야 한다. 그러한 메모리 디바이스 또는 메모리 엘리먼트는 제조의 부품 내에서 포함될 수 있다.

본 발명은 특정 기능들 및 그의 관계들의 성능을 나타내는 방법 단계들의 목적을 가지고 위에서 설명되었다. 이러한 기능적 구성 요소들 및 방법 단계들의 경계들 및 순서는 설명의 편의를 위해 여기에서 임의로 정의되었다. 상기 특정 기능들 및 관계들이 적절히 수행되는 한 대안적인 경계들 및 순서들이 정의될 수 있다. 임의의 그러한 대안적인 경계들 및 순서들은 그러므로 상기 청구된 발명의 범위 및 사상 내에 있다. 추가로, 이러한 기능적 구성 요소들의 경계들은 설명의 편의를 위해 임의로 정의되었다. 어떠한 중요한 기능들이 적절히 수행되는 한 대안적인 경계들이 정의될 수 있다. 마찬가지로, 흐름도 블록들은 또한 어떠한 중요한 기능성을 나타내기 위해 여기에서 임의로 정의되었을 수 있다. 확장된 사용을 위해, 상기 흐름도 블록 경계들 및 순서는 정의되었을 수 있으며 여전히 어떠한 중요한 기능을 수행한다. 기능적 구성 요소들 및 흐름도 블록들 및 순서들 둘 다의 대안적인 정의들은 그러므로 청구된 본 발명의 범위 및 사상 내에 있다. 당업자는 또한 여기에서의 상기 기능적 구성 요소들 및 다른 도시된 블록들, 모듈들, 및 구성 요소들이 도시된 바와 같이 또는 분리된 구성 요소들, 반도체 집적 회로(ASIC)들, 적절한 소프트웨어를 실행하는 프로세서들 및 그와 유사한 또는 임의의 조합에 의해 구현될 수 있음을 인지할 것이다.

본 발명은 또한 하나 이상의 실시예들의 용어로, 적어도 부분적으로 설명되었을 수 있다. 본 발명의 실시예는 본 발명, 그 측면, 그 특징, 그 개념, 및/또는 그 예를 나타내기 위해 여기에서 사용된다. 본 발명을 구현하는 장치, 제조의 물건, 머신, 및/또는 프로세스의 물리적인 실시예는 여기에 설명된 하나 이상의 실시예들을 참조하여 설명된 하나 이상의 측면들, 특징들, 개념들, 예들 등을 포함할 수 있다. 더구나, 전체 도면에서, 실시예들은 상기 동일한 또는 상이한 참조 번호들을 사용할 수 있는 상기 동일하게 또는 유사하게 명명된 기능들, 단계들, 모듈들 등을 통합할 수 있으며, 그와 같이, 상기 기능들, 단계들, 모듈들 등은 상기 동일한 또는 유사한 기능들, 단계들, 모듈들 등 또는 다른 것들일 수 있다.

특별히 반대로 언급되지는 않았으나, 여기에 나타낸 도면들 중 어느 것의 도면 내에서의 엘리먼트들로, 로부터 및/또는 사이의 신호들은 아날로그 또는 디지털, 연속 시간 또는 이산 시간, 전기적, 광학, 및 싱글-엔드(single-ended) 또는 차동(differential) 신호일 수 있다. 예를 들면, 단일 경로가 싱글-엔드 경로로서 도시된다면, 그것은 또한 차동 단일 경로를 나타낸다. 유사하게, 만약 단일 경로가 차동 경로로 도시된다면, 그것은 또한 싱글-엔드 신호 경로를 나타낸다. 하나 이상의 특정 아키텍쳐들이 여기에 개시된 반면, 유사하게 당 업계의 평균적 기술을 가진 사람에 의해 알 수 있는 바와 같이 엘리먼트들 사이에서 직접 연결, 및/또는 다른 엘리먼트들 사이에서 간접적으로 결합하는지 명확히 보여지지 않는 하나 이상의 데이터버스들을 사용하여 구현될 수 있다.

용어 "~처리부"는 본 발명의 다양한 실시예들의 설명에서 사용된다. 모듈은 하나 이상의 출력 신호들을 생성하기 위해 하나 이상의 입력 신호들의 처리와 같은 하나 이상의 기능들을 수행하기 위해 하드웨어를 통해 구현되는 기능적 블록을 포함한다. 상기 기능적 블록을 구현하는 하드웨어는 소프트웨어 및/또는 펌웨어를 결합하여 직접 동작할 수 있다. 여기에서 사용된 바와 같이, 모듈은 자체적으로 모듈인 하나 이상의 서브-모듈들을 포함할 수 있다.

본 발명의 여러 가지 기능들 및 특정들의 특별한 조합들이 여기에 분명히 설명된 반면, 이러한 특징들 및 기능들의 다른 조합들이 마찬가지로 가능하다. 본 발명은 여기에 개시된 특정한 예들에 제한되지 않으며, 이러한 다른 조합들을 명백히 통합한다.

이상과 같이 본 발명에서는 구체적인 구성 요소 등과 같은 특정 사항들과 한정된 실시예 및 도면에 의해 설명되었으나 이는 본 발명의 보다 전반적인 이해를 돕기 위해서 제공된 것일 뿐, 본 발명은 상기의 실시예에 한정되는 것은 아니며, 본 발명이 속하는 분야에서 통상적인 지식을 가진 자라면 이러한 기재로부터 다양한 수정 및 변형이 가능하다.

따라서, 본 발명의 사상은 설명된 실시예에 국한되어 정해져서는 아니되며, 후술하는 특허청구범위뿐 아니라 이 특허청구범위와 균등하거나 등가적 변형이 있는 모든 것들은 본 발명 사상의 범주에 속한다고 할 것이다.

301 : 라이브러리 저장부 302 : 레이아웃 편집부
303 : 속성 편집부 304 : 콘텐츠 편집부
305 : 모바일 편집부 306 : 표준 파라미터 변환부
307 : 표준 파라미터 정보 데이터베이스
308 : 브라우저 판단부 309 : 변환 엔진부
310 : 디스플레이 엔진부

Claims

웹 사이트 및 웹 애플리케이션이 모바일 단말과 고정 단말 간에서 호환되도록 크로스 브라우저(Cross Browser) 및 크로스 플랫폼(Cross Platform)을 지원하는 시스템에 있어서,
웹페이지 또는 웹 애플리케이션을 구성하는 적어도 하나의 구성 요소들을 저장하는 라이브러리 저장부;
상기 라이브러리 저장부로부터 선택된 상기 구성 요소를 웹페이지를 구성할 레이아웃 상에 배치시키는 레이아웃 편집부;
상기 레이아웃 편집부에 의해 배치된 각 구성 요소에 대한 속성을 설정하는 속성 편집부;
상기 레이아웃 편집부에 의해 배치된 콘텐츠를 편집하는 기능을 제공하는 콘텐츠 편집부;
상기 레이아웃 편집부에 의해 배치된 각 구성 요소를 표준 파라미터 값으로 변환시키는 파라미터 변환부;
상기 파라미터 변환부에 의해 변환된 표준 파라미터 값을 저장하는 표준 파라미터 정보 데이터베이스;
사용자의 변환 요청에 따라 사용자 단말의 브라우저의 종류 또는 운영 체제의 종류를 판단하는 브라우저 판단부;
상기 표준 파라미터 정보 데이터베이스에 저장된 표준 파라미터 정보로부터 상기 브라우저 판단부의 판단에 따라, 상기 사용자 단말의 브라우저가 HTML5 포맷을 지원할 경우, HTML5 변환기를 통해 HTML5의 웹 페이지 소스로 변환시키고, 상기 사용자 단말의 브라우저가 HTML5 포맷을 지원하지 않을 경우, 플래시 변환기를 통해 플래시 포맷의 웹 페이지 소스로 변환시키는 변환 엔진부;
상기 변환된 소스를 디스플레이시키는 디스플레이 엔진부;
상기 레이아웃 편집부에서 제작된 웹페이지를 모바일 웹페이지의 속성에 맞게 재편집하는 모바일 편집부를 포함하는 것인, 웹페이지의 동적 변환 시스템.
청구항 1에 있어서,
상기 웹페이지 또는 웹 애플리케이션을 구성하는 구성 요소는, 이미지, 동영상, 텍스트 및 사운드 중에서 선택된 어느 하나 이상인 것을 특징으로 하는, 웹페이지의 동적 변환 시스템.
청구항 1에 있어서,
상기 속성 편집부의 편집 가능한 속성은,
가로, 세로, 투명, 배경, 회전, 사진, 타이틀 및 스킨 중에서 선택된 어느 하나 이상인 것을 특징으로 하는, 웹페이지의 동적 변환 시스템.
삭제
삭제
웹 사이트 및 웹 애플리케이션이 모바일 단말과 고정 단말 간에서 호환되도록 크로스 브라우저(Cross Browser) 및 크로스 플랫폼(Cross Platform)을 지원하는 웹 페이지 동적 변환 시스템에서 수행되는 각 단계는,
라이브러리 저장부에서 웹페이지 또는 웹 애플리케이션을 구성하는 적어도 하나의 구성 요소들을 저장하는 단계;
레이아웃 편집부에서 상기 라이브러리 저장부로부터 선택된 상기 구성 요소를 웹페이지를 구성할 레이아웃 상에 배치시키는 단계;
속성 편집부에서 상기 레이아웃 편집부에 의해 배치된 각 구성 요소에 대한 속성을 설정하는 단계;
콘텐츠 편집부에서 상기 레이아웃 편집부에 의해 배치된 콘텐츠를 편집하는 기능을 제공하는 단계;
파라미터 변환부에서 상기 레이아웃 편집부에 의해 배치된 각 구성 요소를 표준 파라미터 값으로 변환시키는 단계;
상기 파라미터 변환부에 의해 변환된 표준 파라미터 값을 표준 파라미터 정보 데이터베이스에 저장하는 단계;
브라우저 판단부에서 사용자의 변환 요청에 따라 사용자 단말의 브라우저의 종류 또는 운영 체제의 종류를 판단하는 단계;
변환 엔진부에서 상기 표준 파라미터 정보 데이터베이스에 저장된 표준 파라미터 정보로부터 상기 브라우저 판단부의 판단에 따라, 상기 사용자 단말의 브라우저가 HTML5 포맷을 지원할 경우, HTML5 변환기를 통해 HTML5의 웹 페이지 소스로 변환시키고, 상기 사용자 단말의 브라우저가 HTML5 포맷을 지원하지 않을 경우, 플래시 변환기를 통해 플래시 포맷의 웹 페이지 소스로 변환시키는 단계;
디스플레이 엔진부에서 상기 변환된 소스를 디스플레이시키는 단계; 및
상기 레이아웃 편집부에서 제작된 웹페이지를 모바일 웹페이지의 속성에 맞게 재편집하는 단계를 포함하는 것인, 웹페이지의 동적 변환 방법.
청구항 6에 있어서,
상기 웹페이지 또는 웹 애플리케이션을 구성하는 구성 요소는, 이미지, 동영상, 텍스트 및 사운드 중에서 선택된 어느 하나 이상인 것을 특징으로 하는, 웹페이지의 동적 변환 방법.
청구항 6에 있어서,
상기 속성 편집부의 편집 가능한 속성은,
가로, 세로, 투명, 배경, 회전, 사진, 타이틀 및 스킨 중에서 선택된 어느 하나 이상인 것을 특징으로 하는, 웹페이지의 동적 변환 방법.
삭제
삭제
청구항 6 내지 청구항 8 중 어느 한 항의 방법을 실행하기 위한 프로그램이 기록되어 있는 것을 특징으로 하는 컴퓨터 판독 가능한 기록 매체.