WO2016032267A1

WO2016032267A1 - 도큐먼트를 반응형 웹으로 변환하는 반응형 웹 생성 방법

Info

Publication number: WO2016032267A1
Application number: PCT/KR2015/009010
Authority: WO
Inventors: 신기원; 유경진; 최진영; 김상욱
Original assignee: 주식회사 나인트리
Priority date: 2014-08-27
Filing date: 2015-08-27
Publication date: 2016-03-03
Also published as: KR101516213B1

Abstract

본 발명에 따른 도큐먼트를 반응형 웹으로 변환하는 반응형 웹 생성 방법은, 문서 작성 소프트웨어에 의해 생성된 도큐먼트(100)를 변환하여 PDF 문서(110)를 생성하는 PDF 생성 단계; 및 상기 생성된 PDF 문서(110)를 변환하여 반응형웹 HTML(170)을 생성하는 반응형웹 생성 단계;를 포함하며, 상기 반응형웹 생성 단계는, 상기 생성된 PDF 문서(110)의 문자 배열로부터 라인(130)을 생성하는 제 1 단계; 상기 생성된 라인(130)의 배열로부터 Mass(140,150)를 생성하는 제 2 단계;를 포함하며, 상기에서 Mass는 반응형웹에서 한 덩어리로 움직일 수 있는 오브젝트의 단위인 것을 특징으로 한다.

Description

도큐먼트를 반응형 웹으로 변환하는 반응형 웹 생성 방법

본 발명은 전용 소프트웨어에 의해 생성된 도큐먼트를 반응형웹으로 변환하는 반응형웹 생성 방법에 관한 것으로서, 구체적으로는 먼저 도큐먼트를 PDF 문서로 변환하고 생성된 PDF 문서를 다시 반응형웹으로 변환하는 2단계의 변환을 통해서 반응형웹을 생성하는 반응형웹 생성 방법에 관한 것이다.

마이크로소프트의 MS워드, 파워포인트 및 엑셀과 한글과컴퓨터의 아래아 한글 등 문서 작성 소프트웨어에 의해서 생성된 도큐먼트(doc, ppt, xls, hwp 등과 같은 확장자를 가진 문서)를 웹웨이지(html)로 자동 변환해주는 기술 및 소프웨어들이 공지되어 있다.

그런데, 이러한 기술 및 소프트웨어에서는 변환할 도큐먼트의 종류에 따라서 각각 개발되어야 하므로, 다양한 도큐먼트의 종류에 모두 대응하기 위해서는 많은 개발 비용이 소요된다. 나아가 문서 작성 소프트웨어의 버전이 업그레이드되는 경우 이에 맞추어서 변환 소프트웨어도 업그레이드되어야 하므로 업그레이드 비용도 많이 소요되는 단점이 있다.

이에 본 출원의 발명자는 도큐먼트를 웹페이지로 변환함에 있어서, 먼저 문서 작성 소프트웨어에 의해 생성된 도큐먼트를 PDF로 변환한 후, 다시 PDF를 웹페이지로 변환하는 2 단계로 구성되도록 하는 방법(도큐먼트 → PDF → 웹페이지)을 고려하였다.

도큐먼트를 PDF로 변환하는 기술 및 소프트웨어와, PDF를 웹페이지로 변환하는 기술 및 소프트웨어는 이미 공지되어 있으며, 도큐먼트를 PDF로 변환하는 것은 프린팅과 매우 유사하여, 문서 작성 소프트웨어의 업그레이드에 따른 영향을 받지 않거나 쉽게 업그레이드가 가능한 장점이 있는 것으로 생각된다.

한편, '반응형웹'이란 디스플레이의 종류 및 해상도 등에 따라 크기 등이 자동으로 최적화되도록 조절되는 웹페이지를 말하는 것으로서, 이론적으로는 하나의 웹페이지로써 사용자의 환경이나 반응에 맞춰 가장 적절하게 웹페이지를 보여줄 수 있다.

최근 스마트기기의 보급으로 모바일 디바이스에서 웹서핑을 하는 일이 많아졌고, 스마트폰 또는 태블릿 등은 서로 다른 해상도를 가지고 있어 고정적인 값으로는 모두에게 동일한 화면을 보여줄 수가 없다. 이에 반해 반응형 웹은 대표적으로는 CSS의 미디어쿼리 기술을 사용하여 사용자 브라우저의 가로폭(device-width)을 기준으로 각각 다른 CSS를 적용시킬 수 있다.

이와 같이 반응형웹은 개발 및 관리의 효율성 향상, 사용자 편의성 증대, 단일 URL 사용 및 일관성 있는 사이트 컨셉 유지 등 다양한 장점이 있다. 특히 관리자로서는 단일 소스를 관리하면 되므로 관리의 효율성이 향상되며 그러면서도 사용자는 PC, 태블릿 및 스마트폰 등 다양한 장치에서 최적화된 모양으로 이용할 수 있게 된다.

그리고 상기한 바와 유사하게, 문서 작성 소프트웨어에 의해 작성된 도큐먼트를 '반응형웹'으로 변환하기 위하여, 본 발명의 발명자는 중간 생성물로서 PDF를 이용하는 방법을 고려하였다.

그런데, 문서 작성 소프트웨어에 의해 작성된 도큐먼트를 PDF로 변환하는 과정과는 달리, PDF를 '반응형웹'로 변환하는 과정에 있어서, PDF를 웹으로 변환하는 기존의 기술 또는 소프트웨어를 적용하는 것이 힘들거나 불가능하다는 점을 알게 되었다. 기존 PDF를 웹으로 변환하는 기술에 따르면 문자 단위로만 움직이는 HTML을 생성할 수 있을 뿐이며, 이에 따라 반응형웹을 구성할 수는 없게 된다. 따라서 본 출원의 발명자는 전혀 새로운 관점 및 어프로치로써 PDF를 반응형웹으로 변환하는 기술을 개발하게 되었다.

상기한 종래 기술의 문제점 및 과제에 대한 인식은 본 발명의 기술 분야에서 통상의 지식을 가진 자에게 자명한 것이 아니므로 이러한 인식을 기반으로 선행기술들과 대비한 본 발명의 진보성을 판단하여서는 아니됨을 밝혀둔다.

본 발명의 목적은 문서 작성 소프트웨어에 의해 작성된 도큐먼트를 반응형 웹으로 용이하게 변환하여 반응형웹을 생성할 수 있는 반응형웹 생성 방법을 제공하기 위한 것이다.

또한, 본 발명의 다른 목적은 중간 생성물로서 PDF를 이용하여 도큐먼트를 반응형웹으로 변환하는 방법을 제공하기 위한 것이다.

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

본 발명의 일 양상에 따른 도큐먼트를 반응형 웹으로 변환하는 반응형 웹 생성 방법은, 컴퓨터에서 실행되는 반응형웹 생성 방법으로서,

문서 작성 소프트웨어에 의해 생성된 도큐먼트를 변환하여 PDF 문서를 생성하는 PDF 생성 단계; 및 상기 생성된 PDF 문서를 변환하여 반응형웹 HTML을 생성하는 반응형웹 생성 단계;를 포함하며,

상기 반응형웹 생성 단계는, 상기 생성된 PDF 문서의 문자 배열로부터 라인을 생성하는 제 1 단계; 상기 생성된 라인의 배열로부터 Mass를 생성하는 제 2 단계;를 포함하며, 상기에서 Mass는 반응형웹에서 한 덩어리로 움직일 수 있는 오브젝트의 단위인 것을 특징으로 한다.

본 발명의 일 양상에 따른 도큐먼트를 반응형 웹으로 변환하는 반응형 웹 생성 방법에서, 상기 제 1 단계는, 문자의 폰트 사이즈, 문자의 X 위치 및 문자의 Y 위치 중에서 적어도 하나 이상을 이용하여 복수의 문자를 하나의 라인으로 병합하는 과정을 포함하는 것을 특징으로 한다.

본 발명의 일 양상에 따른 도큐먼트를 반응형 웹으로 변환하는 반응형 웹 생성 방법에서, 상기 폰트 사이즈는 이웃하는 문자 사이에 폰트 사이즈의 차이가 정해진 범위 이내인지를 판단하는 데 이용되며, 상기 문자의 X 위치는 이웃하는 문자 사이의 거리가 정해진 범위 이내인지를 판단하는 데 이용되며, 상기 문자의 Y 위치는 이웃하는 문자 사이에 Y 위치의 차이가 정해진 범위 이내인지를 판단하는 데 이용되는 것을 특징으로 한다.

본 발명의 일 양상에 따른 도큐먼트를 반응형 웹으로 변환하는 반응형 웹 생성 방법에서, 상기 제 2 단계는, 라인의 X 위치, 라인의 Y 위치 및 라인의 폰트 사이즈 중에서 적어도 하나 이상을 이용하여 복수의 라인을 하나의 Mass로 병합하는 과정을 포함하는 것을 특징으로 한다.

본 발명의 일 양상에 따른 도큐먼트를 반응형 웹으로 변환하는 반응형 웹 생성 방법에서, 상기 라인의 X 위치는 이웃하는 라인 사이에 X 위치의 차이가 정해진 범위 이내인지를 판단하는 데 이용되며, 상기 라인의 Y 위치는 이웃하는 라인 사이의 거리가 정해진 범위 이내인지를 판단하는 데 이용되며, 상기 라인의 폰트 사이즈는 이웃하는 라인의 폰트 사이즈의 차이가 정해진 범위 이내인지를 판단하는 데 이용되는 것을 특징으로 한다.

본 발명의 일 양상에 따른 도큐먼트를 반응형 웹으로 변환하는 반응형 웹 생성 방법에서, 상기 제 2 단계에서 생성된 Mass를 병합하여 병합된 Mass를 생성하는 제 3 단계;를 더 포함하며, 상기 제 3 단계는, Mass의 X 위치 및 Mass의 Y 위치 중에서 적어도 하나 이상을 이용하여 복수의 Mass를 병합하는 과정을 포함하는 것을 특징으로 한다.

본 발명의 일 양상에 따른 도큐먼트를 반응형 웹으로 변환하는 반응형 웹 생성 방법에서, 상기 Mass의 X 위치 및 Y 위치는 Mass 사이의 거리가 정해진 범위 이내인지를 판단하는 데 이용되는 것을 특징으로 한다.

본 발명의 일 양상에 따른 도큐먼트를 반응형 웹으로 변환하는 반응형 웹 생성 방법에서, 상기 컴퓨터는 복수의 반응형웹 템플릿을 포함하는 데이터베이스를 구비하거나 상기 데이터베이스와 연동하며, 상기 반응형 웹 생성 방법은, 상기 제 3 단계에서 생성된 Mass의 배열을 탐색하면서 상기 데이터베이스에서 선택되는 반응형웹 템플릿에 하나 또는 복수의 Mass를 배당함으로써 Mass Matrix를 생성하는 제 4 단계;를 더 포함하는 것을 특징으로 한다.

본 발명의 일 양상에 따른 도큐먼트를 반응형 웹으로 변환하는 반응형 웹 생성 방법에서, 상기 제 4 단계는, 어떤 Mass의 Top Y 위치와 Bottom Y 위치 사이에 정해진 비율 이상 겹치는 다른 Mass가 존재하는 경우 동일 Mass Matrix에 배당하는 과정을 포함하는 것을 특징으로 한다.

본 발명의 일 양상에 따른 도큐먼트를 반응형 웹으로 변환하는 반응형 웹 생성 방법에서, 상기 제 4 단계에서 생성된 Mass Matrix와 상기 데이터베이스의 반응형웹 템플릿을 연동하여 반응형웹 HTML을 출력하는 제 5 단계;를 포함하는 것을 특징으로 한다.

본 발명의 일 양상에 따른 도큐먼트를 반응형 웹으로 변환하는 반응형 웹 생성 방법에서, 상기 제 5 단계는, 상기 반응형웹 템플릿의 <div></div> 영역에 상기 Mass Matrix의 컨텐츠를 삽입하는 과정을 포함하는 것을 특징으로 한다.

본 발명의 일 양상에 따르면, 문서 작성 소프트웨어에 의해 작성된 도큐먼트를 반응형 웹으로 용이하게 변환하여 반응형웹을 생성할 수 있는 효과가 있다. 본 발명의 일 양상에 따르면 다양한 도큐먼트를 PDF로 변환하는 공지 기술을 이용할 수 있으며, 다양한 문서 작성 소프트웨어로 작성된 임의의 도큐먼트를 반응형웹으로 용이하게 변환할 수 있는 효과가 있다.

또한, 종래 PDF를 웹으로 변환하는 기술에 따르면 문자 단위로만 움직이는 HTML을 생성할 수 있었지만 본 발명의 일 양상에 따르면 덩어리로 움직이는 반응형웹으로 변환할 수 있게 됨으로써, 모바일 기기를 포함하는 다양한 기기에서 단일 소스로 구현되는 웹 서비스를 제공할 수 있게 되는 효과가 있다. 나아가 기존 도큐먼트로 존재하는 컨텐츠에 대해서 자동으로 반응형웹을 생성할 수 있게 됨으로써 반응형웹의 생성 비용을 대폭 저감할 수 있는 효과가 있다.

도 1은 본 발명의 일 실시예에 따른 반응형웹 생성 방법이 적용되거나 서비스될 수 있는 상황을 예시적으로 도시한 도면이다.

도 2는 본 발명의 일 실시예에 따라 도큐먼트로부터 반응형웹 HTML을 생성하는 과정을 오브젝트의 관점에서 순서대로 나타낸 플로우차트이다.

도 3은 본 발명의 일 실시예에 따라 문자의 배열로부터 라인을 생성하는 과정을 도시한 플로우차트이다.

도 4는 본 발명의 일 실시예에 따른 반응형웹 생성 방법에서 라인의 배열로부터 Mass를 생성하는 과정을 도시한 플로우차트이다.

도 5(A)는 반응형웹 템플릿의 간단한 예를 개념적으로 도시한 도면이며, 도 5(B)는 반응형웹 템플릿의 선택을 예시적으로 설명하기 위한 Mass의 예를 도시한 도면이다.

도 6은 본 발명의 일 실시예에 따른 반응형 웹 생성 방법이 적용되기 전 도큐먼트를 예시한 도면이다.

도 7은 본 발명의 일 실시예에 따른 반응형 웹 생성 방법에서 글자의 배열을 병합하여 생성된 라인들을 예시한 도면이다.

도 8은 본 발명의 일 실시예에 따른 반응형웹 생성 방법에서 중간 생성물인 제 2 Mass의 예를 도시한 도면이다.

도 9는 본 발명의 일 실시예에 따라 도 6에 도시된 도큐먼트를 반응형웹으로 변환하여 생성한 반응형 웹페이지를 예시한 도면으로서, 도 9(a)는 고해상도 기기에 표시된 것이며, 도 9(b)는 저해상도 기기에 표시된 것이다.

첨부한 도면을 참고로 하여 본 발명의 실시예에 대하여 본 발명이 속하는 기술 분야에서 통상의 지식을 가진 자가 용이하게 실시할 수 있도록 상세히 설명한다. 그러나 본 발명은 여러 가지 상이한 형태로 구현될 수 있으며 여기에서 설명하는 실시예에 한정되지 않는다. 그리고 도면에서 본 발명을 명확하게 설명하기 위해서 설명과 관계없는 부분은 생략하였으며, 명세서 전체를 통하여 유사한 부분에 대해서는 유사한 명칭 및 도면 부호를 사용한다.

DTRW 서버(10)는 문서 작성 소프트웨어에 의해 생성된 도큐먼트(이하 간단히 '도큐먼트'라고도 한다)를 반응형웹으로 변환하여 반응형웹을 생성하는 컴퓨터로서, 내부 또는 외부에 반응형웹 템플릿 등을 보유하는 데이터베이스(11)를 포함할 수 있다.

웹서버(20)는 PC, 태블릿 또는 스마트폰과 같이 다양한 형태의 사용자 단말(30)로부터의 요청에 의해 반응형 웹서비스를 제공하며, 관리자 단말(40)를 통하여 관리자로부터 웹페이지를 관리하기 위한 명령 또는 변환할 도큐먼트를 수신한다.

본 발명의 일 실시예에 따른 반응형웹의 생성 과정을 예를 들어 설명하면, 먼저 관리자 단말(40) 등을 통하여 웹서버(20)가 문서 작성 소프트웨어에 의해 생성된 도큐먼트를 업로드받으면, 웹서버(20)는 이를 DTRW 서버(10)에 제공하며 DTRW 서버(10)는 데이터베이스(11)를 함께 이용하여 도큐먼트를 반응형웹으로 변환하는 기능을 수행한다. 그리고 DTRW 서버(10)는 생성된 반응형웹을 웹서버(20)로 제공함으로써 웹서버(20)에 탑재되며, 다양한 사용자 단말(30)의 요청에 따라 반응형 웹서비스가 가능하게 된다.

상기에서는 본 발명의 일 실시예에 따른 반응형웹 생성 방법이 DTRW 서버(10)에서 실행되는 것으로 했으나, 웹서버(20) 내에서 실행되는 것도 물론 가능하다.

DTRW 서버(10)는, 먼저, 도큐먼트(100)를 변환하여 PDF 문서(110)를 생성하고, PDF 문서(110)를 변환하여 반응형웹 HTML(170)을 생성하되, 중간 생성물들로서 Raw Material(120), 라인(130), 제 1 Mass(140), 제 2 Mass(150) 및 Mass Matrix(160)를 가진다.

문서 작성 소프트웨어에 의해 생성된 도큐먼트(100)를 변환하여 PDF 문서(110)를 생성하는 PDF 생성 과정은 공지된 기존 기술 및 소프트웨어를 이용하여 수행되므로 구체적인 설명은 생략하며, 이하에서는 생성된 PDF 문서(110)를 변환하여 반응형웹 HTML(170)을 생성하는 반응형웹 생성 단계를 상세히 설명한다.

변환된 PDF 문서(110)는 최소 Unit으로서 이미지 및 동영상을 포함하는 미디어와 문자를 포함하여 구성되며, 본 발명의 일 실시예에서는 이들을 추출하여 미디어 및 문자의 배열을 별도로 준비하거나, PDF 문서(110)내의 미디어 및 문자를 순차 탐색하면서 후속의 과정을 진행한다.

DTRW 서버(10)는, 단계 S10에서 문자(122)의 배열로부터 라인(130)을 생성하며, 단계 S20에서는 라인(130)의 배열로부터 제 1 Mass(140)를 생성하며, 단계 S30에서는 미디어 및 제 1 Mass(140)로부터 제 2 Mass(150)를 생성하며, 단계 S40에서는 제 2 Mass(150)으로부터 Mass Matrix(160)을 생성하며, 단계 S50에서는 Mass Matrix(160)으로부터 반응형웹 템플릿(180)을 이용하여 반응형웹 HTML(170)을 출력한다. 이하 단계 S10 내지 단계 S 50에 대해서 도 3 내지 도 9를 이용하여 상세히 설명한다.

단계 S10에서 문자 배열로부터 라인을 생성하는 과정은 문자들이 가진 특성을 이용하는 것으로서, 문자의 폰트 사이즈와, 문자의 X축 방향에서의 위치인 X 위치와, 문자의 Y축 방향에서의 위치인 Y 위치 중에서 적어도 하나 이상을 이용하여 복수의 문자를 하나의 라인으로 병합하는 과정을 포함한다.

일반적으로 같은 라인에 속하는 문자들은 같은 폰트 사이즈를 가지며, 이웃하는 문자들은 같은 Y 위치를 가진다. 그리고 일반적으로 같은 라인에 속하면서 이웃하는 문자들은 일정한 거리내에 있게 된다.

이러한 일반 경향을 이용하여, 본 발명의 일 실시예에서는 (i) 폰트 사이즈와 관련하여, 이웃하는 문자 사이에 폰트 사이즈의 차이가 정해진 범위 이내인지의 판단, (ii) 문자의 X 위치와 관련하여, 이웃하는 문자 사이의 거리가 정해진 범위 이내인지의 판단, (iii) 문자의 Y 위치와 관련하여, 이웃하는 문자 사이에 Y 위치의 차이가 정해진 범위 이내인지의 판단을 선택 또는 조합하여 이용한다.

이러한 판단은 문자의 속성값들중 폰트 사이즈, X 위치 및 Y 위치와 같은 속성값을 이용하여 실행될 수 있으며, 구체적으로 예를 들면, 이웃하는 문자 사이에 폰트 사이즈의 차이가 선행 문자의 1/100 이내인지, 문자의 속성값중에서 X 위치의 차이가 폰트 사이즈(또는/및 스페이스의 크기)의 1.5배 이내인지, 및 문자의 속성값중에서 Y 위치의 차이가 0.01 이내인지를 판단하고 이를 모두 만족하는 경우 동일한 라인으로 판단할 수 있다.

먼저 문자의 배열을 준비하며, PDF 문서(110)로부터 미디어(121) 및 문자(122)를 포함하는 Raw Material(120)을 추출하는 것으로서 또는 Raw Material(120)속의 문자를 배열로 따로 만드는 것으로서 문자의 배열을 준비할 수 있으며, 또는 PDF 문서(110)속의 문자들을 순차 탐색하는 것으로서 별도로 준비하지 않을 수도 있다.

그리고, 단계 S11은 문자 배열에서 한 문자를 리드 하는 과정으로서, 도 3의 플로우를 시작한 경우에는 배열의 첫 문자를 리드하고 그렇지 않은 경우에는 순서에 따른 다음 문자를 리드한다. 그리고 단계 S12에서는 문자 배열에서 새롭게 리드한 문자가 있는지를 판단하여, 이미 배열의 마지막 문자까지 처리하였으면 새로 리드한 문자가 없으므로 종료한다.

만약 남은 문자가 있어서 새롭게 한 문자를 리드했으면, 단계 S14로 진행한다. 단계 S14에서는 리드한 문자와 '비교 문자'를 비교하여 리드한 문자를 비교 문자가 속하는 현재 라인에 병합할 수 있는지, 즉 리드한 문자가 비교 문자와 동일 라인인지를 판단하게 된다.

여기서 비교 문자는 통상 리드한 문자와 인접하는 선행 문자이며, 리드한 문자가 라인의 첫 문자라면 그 때 비교 문자는 비어 있게 되고, 중간에 Null이 있는 경우에는 Null을 제외하고 가장 인접한 문자가 된다.

그리고, 단계 S14의 판단을 위하여 비교 문자와 리드한 문자의 폰트 사이즈, 문자의 X 위치 및 문자의 Y 위치에 관한 정보들이 이용될 수 있으며, 이미 전술한 판단 방법들이 이용될 수 있다.

그리고 단계 S14의 판단 결과 병합 불가능하다면 단계 S16으로 진행하며, 병합 가능하다면 단계 S15로 진행한다. 또한 비교 문자가 비어있을 때는 당연히 병합 불가능한 것으로 하여 단계 S16으로 진행한다.

그리고 단계 S15에서는 리드한 문자가 라인으로 가능한지를 판단하는 바, 예를 들어 리드한 문자가 Null Object인 경우에는 현재 라인으로 병합하지 않고 비교 문자로도 기억하지 않도록 하기 위해 바로 단계 S11로 돌아간다.

그리고 단계 S16에서는 라인의 배열에 새로운 라인을 생성하며, 라인 시작 글자로서 리드한 문자를 기억하며(S17), 단계 S18에서는 현재 라인(단계 S16을 거친 경우에는 새롭게 생성된 라인이 된다)에 리드한 문자를 추가하며 단계 S19에서는 '비교 문자'로서 리드한 문자를 기억한다.

도 6은 본 발명의 일 실시예에 따른 반응형 웹 생성 방법이 적용되기 전 도큐먼트를 예시한 도면이며, 도 7은 본 발명의 일 실시예에 따른 반응형 웹 생성 방법에서 글자의 배열을 병합하여 생성한 라인들을 예시한 도면이다.

한편, 본 발명의 일 실시예에 따른 반응형웹 생성 방법은 생성된 라인(130)의 배열로부터 제 1 Mass(140)를 생성하는 단계(S20)를 포함하며, 상기 제 1 Mass 및 제 2 Mass에서 Mass란 반응형웹에서 한 덩어리로 움직일 수 있는 오브젝트의 단위가 된다.

단계 S 20에서 라인(130)의 배열로부터 제 1 Mass(140)를 생성할 때, 라인의 X축 방향에서의 위치인 X 위치, 라인의 Y축 방향에서의 위치인 Y 위치, 및 라인의 폰트 사이즈 중에서 적어도 하나 이상을 이용하여 복수의 라인을 하나의 제 1 Mass(140)로 병합하는 과정을 포함한다.

그리고, 라인의 X 위치는 이웃하는 라인 사이에 X 위치의 차이가 정해진 범위 이내인지를 판단하는 데 이용되며, 라인의 Y 위치는 이웃하는 라인 사이의 거리가 정해진 범위 이내인지를 판단하는 데 이용되며, 라인의 폰트 사이즈는 이웃하는 라인의 폰트 사이즈의 차이가 정해진 범위 이내인지를 판단하는 데 이용될 수 있다.

예를 들어, 이웃하는 라인에서 Y 위치의 간격이 폰트 사이즈의 1.5배 이내인지 여부, 이웃하는 라인에서 X 위치상 두 라인의 시작 위치의 차이가 폰트 사이즈의 2배 이내인지 여부, 및 이웃하는 라인의 대표 폰트 사이즈의 크기 차이가 2배이내인지 여부를 기준으로 판단할 수 있다.

단계 S21은 라인의 배열에서 한 라인을 리드 하는 과정으로서, 도 4의 플로우를 시작한 경우에는 배열의 첫 라인을 리드하고 그렇지 않은 경우에는 순서에 따른 다음 라인을 리드한다. 그리고 단계 S22에서는 라인의 배열에서 새롭게 리드한 라인이 있는지를 판단하여, 이미 배열의 마지막 라인까지 처리하였으면 새로 리드한 라인이 없으므로 종료한다.

만약 남은 라인이 있어서 새롭게 한 라인을 리드했으면, 단계 S23로 진행한다. 단계 S23에서는 리드한 라인과 '비교 라인'를 비교하여 리드한 라인을 비교 라인이 속하는 현재 Mass에 병합할 수 있는지를 판단하게 된다. 여기서 비교 라인은 통상 리드한 라인과 인접하는 선행 라인이 된다.

그리고, 단계 S23의 판단을 위하여 비교 라인과 리드한 라인의 폰트 사이즈, 라인의 X 위치 및 라인의 Y 위치에 관한 정보들이 이용될 수 있으며, 전술한 판단 방법들이 이용될 수 있다.

그리고 단계 S23의 판단 결과 병합 불가능하다면 단계 S24로 진행하며, 병합 가능하다면 단계 S25로 진행한다. 또한 비교 라인이 비어있을 때는 당연히 병합 불가능한 것으로 하여 단계 S24로 진행한다.

그리고 단계 S24에서는 새로운 Mass를 생성하고 이를 Mass의 배열에 추가한다. 즉, 단계 S23에서 리드한 새로운 라인을 현재 Mass에 병합할 수 없다고 판단하였으므로, 새로운 Mass를 생성하게 되는 것이다.

그리고 단계 S25에서는 현재 Mass에 리드한 라인을 추가하며, 여기서 단계 24를 통하여 새로운 Mass를 생성한 경우에는 생성된 Mass가 현재 Mass가 된다. 그리고 단계 S26에서는 리드한 라인을 '비교 라인'으로 기억함으로써 단계 S23에서의 비교에 이용할 수 있도록 한다.

한편, 도 2의 단계 S30에서는 미디어(이미지, 동영상)(121) 및 제 1 Mass(140)로부터 제 2 Mass(150)를 생성하는 바, 생성된 복수의 제 1 Mass(140)를 병합하고 또한 미디어를 포함함하는 제 2 Mass(150)를 생성한다. 단계 S30은 Mass의 X 위치 및 Mass의 Y 위치 중에서 적어도 하나 이상을 이용하여 복수의 Mass를 병합하는 과정을 적어도 포함한다.

이전 단계까지의 의미를 가진 그룹화 과정에서 벗어나 템플릿 적용을 위해 형태적으로 합칠 수 있는 Mass를 합쳐서 Mass Matrix 구성을 위한 Mass를 구성하는 단계로서, X축과 Y축 기준의 한계 범위 이내의 Mass를 합혀서 형태적인 특성을 파악한다.

Mass의 X 위치 및 Y위치는 Mass 사이의 거리가 정해진 범위 이내인지를 판단하는 데 이용된다. 예를 들어, 가로로 배열된 두 Mass에서 X축상에서의 거리가 30px 이내인 경우와 세로로 배열된 두 Mass에서 Y축상에서의 거리가 15px 이내인 경우 두 Mass를 합쳐서 단일의 Mass로 한다. 그리고 X축상에서의 거리는 선행 Mass의 우측끝 X 위치와 후행 Mass의 좌측끝 X 위치 사이의 차이값으로 계산될 수 있으며, Y축상에서의 거리는 선행 Mass의 Bottom Y 위치와 후행 Mass의 Top Y 위치 사이의 차이값으로 계산될 수 있다. 그리고 Mass 사이의 병합은 텍스트 Mass만을 대상으로 하며 미디어 Mass는 제외한다.

도 8은 본 발명의 일 실시예에 따른 반응형웹 생성 방법에서 중간 생성물인 제 2 Mass들의 예를 도시한 도면이다.

도시된 바와 같이 제 2 Mass는 이미지 및 동영상과 같은 미디어 Mass와 텍스트로 구성되는 텍스트 Mass를 포함한다.

한편, 도 2의 단계 S40에서는 제 2 Mass(150)로부터 Mass Matrix(160)를 생성한다. 전술한 바와 같이 DTRW 서버(10)는 복수의 반응형웹 템플릿을 포함하는 데이터베이스(11)를 구비하거나 이러한 데이터베이스(11)와 연동한다.

그리고 DTRW 서버(10)는 생성된 제 2 Mass(150)의 배열을 탐색하면서 데이터베이스(11)에서 선택되는 반응형웹 템플릿에 하나 또는 복수의 제 2 Mass(150)를 배당함으로써 Mass Matrix(160)를 생성한다. Mass Matrix는 이와 같이 반응형웹 템플릿을 선택하고 그에 맞추어서 Mass를 배당한 결과물로서, 결국 Mass Matrix 생성은 반응형웹 템플릿에 배치되기 위한 순서를 맞추는 것이다.

도 5(A)는 반응형웹 템플릿의 간단한 예를 개념적으로 도시한 도면이다.

템플릿 1은 좌우 방향이 없는 경우로서 가로 방향으로 Mass가 한 칸을 차지하는 템플릿을 도시한 것이며, 템플릿 2는 좌우 방향이 있는 경우로서 같은 Y위치에서 가로 방향으로 두 Mass가 좌우 배치되는 템플릿을 도시한 도면이다.

그리고 템플릿을 선택하고 배당함에 있어서는 여러 가지 기준이 고려될 수 있다.

도 5(B)는 반응형웹 템플릿의 선택을 예시적으로 설명하기 위한 Mass의 예를 도시한 도면이다.

도시된 바와 같이 어떤 Mass(도면에서 Mass 1)의 Top Y 위치와 Bottom Y 위치 사이에 다른 Mass(도면에서 Mass 2)가 존재하는 경우, Mass 1 및 Mass 2를 각각 2개의 템플릿 1에 배당할 지, 아니면 Mass 1 및 Mass 2를 템플릿 2에 배당할 지 판단된다.

구체적으로 어떤 Mass(도면에서 Mass 1)의 Top Y 위치와 Bottom Y 위치 사이에 정해진 비율 이상, 예를 들면 Mass 1의 높이와 비교하여 15% 이상 겹치는 다른 Mass(도면에서 Mass 2)가 존재하는 경우 동일 Mass Matrix에 배당하는 과정을 포함할 수 있다.

한편, 도 2의 단계 S50에서는 Mass Matrix(160)으로부터 반응형웹 템플릿(180)을 이용하여 반응형웹 HTML(170)을 출력한다.

DTRW 서버(10)는 생성된 Mass Matrix와 데이터베이스(11)의 반응형웹 템플릿을 연동하여 반응형웹 HTML을 출력한다. 예를 들면, 반응형웹 템플릿의 <div></div> 영역에 Mass Matrix의 컨텐츠를 삽입하여 완성된 구조의 HTML 데이터를 얻는다.

그리고 DTRW 서버(10)는 반응형웹 HTML(170)을 웹서버(20)에게 제공하며, 웹서버(20)는 이를 탑재하여, 다양한 사용자 단말(30)의 요청에 따라 반응형 웹서비스를 제공할 수 있다.

Claims

컴퓨터에서 실행되는 반응형웹 생성 방법으로서,

문서 작성 소프트웨어에 의해 생성된 도큐먼트를 변환하여 PDF 문서를 생성하는 PDF 생성 단계; 및

상기 생성된 PDF 문서를 변환하여 반응형웹 HTML을 생성하는 반응형웹 생성 단계;를 포함하며,

상기 반응형웹 생성 단계는,

상기 생성된 PDF 문서의 문자 배열로부터 라인을 생성하는 제 1 단계;

상기 생성된 라인의 배열로부터 Mass를 생성하는 제 2 단계;를 포함하며,

상기에서 Mass는 반응형웹에서 한 덩어리로 움직일 수 있는 오브젝트의 단위인 것을 특징으로 하는 도큐먼트를 반응형 웹으로 변환하는 반응형 웹 생성 방법.
청구항 1에 있어서,

상기 제 1 단계는,

적어도 문자의 X 위치 및 문자의 Y 위치를 이용하여 복수의 문자를 하나의 라인으로 병합하는 과정을 포함하는 것을 특징으로 하는 도큐먼트를 반응형 웹으로 변환하는 반응형 웹 생성 방법.
청구항 2에 있어서,

상기한 적어도 문자의 X 위치 및 문자의 Y 위치를 이용하여 복수의 문자를 하나의 라인으로 병합하는 과정에 있어서, 문자의 폰트 사이즈를 더 이용하며,

상기 폰트 사이즈는 이웃하는 문자 사이에 폰트 사이즈의 차이가 정해진 범위 이내인지를 판단하는 데 이용되며,

상기 문자의 X 위치는 이웃하는 문자 사이의 거리가 정해진 범위 이내인지를 판단하는 데 이용되며,

상기 문자의 Y 위치는 이웃하는 문자 사이에 Y 위치의 차이가 정해진 범위 이내인지를 판단하는 데 이용되는,

것을 특징으로 하는 도큐먼트를 반응형 웹으로 변환하는 반응형 웹 생성 방법.
청구항 1에 있어서,

상기 제 2 단계는,

라인의 X 위치, 라인의 Y 위치 및 라인의 폰트 사이즈 중에서 적어도 하나 이상을 이용하여 복수의 라인을 하나의 Mass로 병합하는 과정을 포함하는 것을 특징으로 하는 도큐먼트를 반응형 웹으로 변환하는 반응형 웹 생성 방법.
청구항 4에 있어서,

상기 라인의 X 위치는 이웃하는 라인 사이에 X 위치의 차이가 정해진 범위 이내인지를 판단하는 데 이용되며,

상기 라인의 Y 위치는 이웃하는 라인 사이의 거리가 정해진 범위 이내인지를 판단하는 데 이용되며,

상기 라인의 폰트 사이즈는 이웃하는 라인의 폰트 사이즈의 차이가 정해진 범위 이내인지를 판단하는 데 이용되는,

것을 특징으로 하는 도큐먼트를 반응형 웹으로 변환하는 반응형 웹 생성 방법.
청구항 1에 있어서,

상기 제 2 단계에서 생성된 Mass를 병합하여 병합된 Mass를 생성하는 제 3 단계;를 더 포함하며,

상기 제 3 단계는,

Mass의 X 위치 및 Mass의 Y 위치 중에서 적어도 하나 이상을 이용하여 복수의 Mass를 병합하는 과정을 포함하는,

것을 특징으로 하는 도큐먼트를 반응형 웹으로 변환하는 반응형 웹 생성 방법.
청구항 6에 있어서,

상기 Mass의 X 위치 및 Y 위치는 Mass 사이의 거리가 정해진 범위 이내인지를 판단하는 데 이용되는,

것을 특징으로 하는 도큐먼트를 반응형 웹으로 변환하는 반응형 웹 생성 방법.
청구항 6에 있어서,

상기 컴퓨터는 복수의 반응형웹 템플릿을 포함하는 데이터베이스를 구비하거나 상기 데이터베이스와 연동하며,

상기 반응형 웹 생성 방법은,

상기 제 3 단계에서 생성된 Mass의 배열을 탐색하면서 상기 데이터베이스에서 선택되는 반응형웹 템플릿에 하나 또는 복수의 Mass를 배당함으로써 Mass Matrix를 생성하는 제 4 단계;

를 더 포함하는 것을 특징으로 하는 도큐먼트를 반응형 웹으로 변환하는 반응형 웹 생성 방법.
청구항 8에 있어서,

상기 제 4 단계는,

어떤 Mass의 Top Y 위치와 Bottom Y 위치 사이에 정해진 비율 이상 겹치는 다른 Mass가 존재하는 경우 동일 Mass Matrix에 배당하는 과정을 포함하는,

것을 특징으로 하는 도큐먼트를 반응형 웹으로 변환하는 반응형 웹 생성 방법.
청구항 8에 있어서,

상기 제 4 단계에서 생성된 Mass Matrix와 상기 데이터베이스의 반응형웹 템플릿을 연동하여 반응형웹 HTML을 출력하는 제 5 단계;

를 포함하는 것을 특징으로 하는 도큐먼트를 반응형 웹으로 변환하는 반응형 웹 생성 방법.
청구항 10에 있어서,

상기 제 5 단계는,

상기 반응형웹 템플릿의 <div></div> 영역에 상기 Mass Matrix의 컨텐츠를 삽입하는 과정을 포함하는,

것을 특징으로 하는 도큐먼트를 반응형 웹으로 변환하는 반응형 웹 생성 방법.