[go: up one dir, main page]
More Web Proxy on the site http://driver.im/

KR101771473B1 - 반응형 웹페이지 생성 방법 및 장치 - Google Patents

반응형 웹페이지 생성 방법 및 장치 Download PDF

Info

Publication number
KR101771473B1
KR101771473B1 KR1020170051019A KR20170051019A KR101771473B1 KR 101771473 B1 KR101771473 B1 KR 101771473B1 KR 1020170051019 A KR1020170051019 A KR 1020170051019A KR 20170051019 A KR20170051019 A KR 20170051019A KR 101771473 B1 KR101771473 B1 KR 101771473B1
Authority
KR
South Korea
Prior art keywords
template
web page
reactive
generating
content
Prior art date
Application number
KR1020170051019A
Other languages
English (en)
Inventor
이수모
Original Assignee
주식회사 코코아스튜디오
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 주식회사 코코아스튜디오 filed Critical 주식회사 코코아스튜디오
Priority to KR1020170051019A priority Critical patent/KR101771473B1/ko
Application granted granted Critical
Publication of KR101771473B1 publication Critical patent/KR101771473B1/ko

Links

Images

Classifications

    • G06F17/248—
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/986—Document structures and storage, e.g. HTML extensions
    • G06F17/30896—

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

웹 브라우저 기반으로 각기 다른 디스플레이 화면 크기를 갖는 기기에 대응하는 반응형 웹페이지를 보다 편리하게 제작할 수 있는 반응형 웹페이지 생성 기술이 개시된다. 이를 위해, 본 발명의 일 실시예에 따른 반응형 웹페이지 생성 방법은 컨텐츠 삽입 영역의 위치, 크기 및 컨텐츠 삽입 영역에 삽입될 컨텐츠의 종류 중 적어도 하나를 정의하여 생성된 복수개의 반응형 템플릿을 생성 및 관리하는 단계; 복수개의 반응형 템플릿 중 사용자로부터 선택된 반응형 템플릿을 웹 브라우저 창을 통하여 제공하는 단계; 사용자 단말로부터 컨텐츠 삽입 영역에 삽입될 컨텐츠를 수신하는 단계; 반응형 템플릿의 컨텐츠 삽입 영역에 컨텐츠의 크기를 자동 변환 및 삽입하여, 웹페이지 템플릿을 생성하는 단계; 및 웹페이지 템플릿을 서로 다른 크기의 표시 화면을 갖는 복수의 디스플레이 기기에 대응하는 반응형 웹페이지로 자동 생성하는 단계를 포함하며, 반응형 템플릿은 상기 복수의 디스플레이 기기에 대응하는 반응형 웹페이지로 자동 변환되기 위한 변환 정보를 포함한다.

Description

반응형 웹페이지 생성 방법 및 장치{METHOD AND APPARATUS FOR GENERATING RESPONSIVE WEBPAGE}
본 발명은 반응형 웹페이지 생성 방법 및 장치에 관한 것으로, 특히 본 발명은 웹 브라우저 기반으로 각기 다른 디스플레이 화면 크기를 갖는 기기에 대응하는 반응형 웹페이지를 보다 편리하게 제작할 수 있는 반응형 웹페이지 생성 방법 및 장치에 관한 것이다.
인터넷 상에 웹페이지를 개시하기 위해서는 먼저 웹페이지를 제작해야 하는데, 웹페이지는 하이퍼텍스트(Hyper Text) 등으로 구현된다. 다만, 하이퍼텍스트는 HTML(Hyper Text Markup Language)이라는 언어를 사용해야 제작할 수 있어 HTML을 알지 못하는 사용자는 웹페이지를 구현하기가 어렵다.
위와 같은 문제점을 해결하기 위해 나모웹에디터 및 드림위버와 같은 사용자 편의를 지향하는 GUI(Graphic User Interface)에디터가 개발되어 HTML을 알지 못하는 비전문가가 손쉽게 웹페이지를 구현할 수 있었다. 하지만, GUI에디터들은 웹페이지를 구현하는 기능이 제공되지만, 웹페이지를 인터넷(월드 와이드 웹 WWW, World Wide Web) 상에 개시하기 위해서는 또 다른 종류의 전문 지식이 필요하다. 인터넷 상에 웹페이지를 개시하기 위해서는 서버 호스팅, 트래픽, 하드웨어 및 계정 설정 등과, 이를 관리하기 위한 지식이 요구되는데, 이는 매우 복잡하고 일관적이지 못한 기술내용이기 때문에 초보자가 손쉽게 인터넷 상에 웹페이지를 개시하기 힘들다.
위와 같은 문제점 등으로 인해 웹페이지를 제작하거나, 인터넷 상에 개시할 수 있는 능력을 보유하지 못한 대다수의 초보자들은 웹페이지를 전문적으로 제작하여 인터넷 상에 개시해주는 웹페이지 제작 대행 기관에 의뢰하기 마련이다. 웹페이지 제작 대행 기관에 웹페이지를 의뢰하는 경우, 제작 비용이 상당히 발생하고, 의뢰인이 실시간으로 수정하지 못하기 때문에 의뢰인이 의뢰한 웹페이지가 의도하지 못한 방향으로 제작될 수 있다. 웹페이지는 단순 취미 활동으로 사용되는 경우도 있으나, 대부분의 경우 누구나 손쉽게 접근할 수 있는 인터넷 상에 웹페이지를 개시함으로써 제품 판매를 하거나, 정보를 알리고, 제품 및 회사 등을 홍보하는 수단으로 이용된다. 즉, 인터넷 상에 개시된 웹페이지는 무언가의 알리기 위한 홍보 수단이자 마케팅 수단으로 사용되기 때문에 대단히 중요한 부분이다. 위와 같이 웹페이지는 개인 또는 기업에 있어 중요한 마케팅 수단이기 때문에 웹페이지 제작 대행 기관에 의뢰하여 웹페이지를 제작하는 경우 의뢰자의 요청에 맞춤으로 설계되기 힘들다. 또한, 수정 사항이 있는 경우 웹페이지 제작 대행 기관에 수정 사항을 요청해야 하며 추가 비용이 발생하는 문제점이 있다. 또한 최근에는 다양한 크기의 디스플레이 화면을 갖는 기기들에 최적화된 반응형 웹페이지의 제공이 필요한 실정이다.
관련하여 한국등록특허 제1637016호는 '이용자 반응형 웹페이지 제공 방법'을 개시한다.
본 발명의 목적은 웹 기반 웹페이지 제작 서비스를 제공하여 별도의 전문 소프트웨어 없이 누구나 손쉽게 웹페이지를 제작하는 것이다. 특히, 본 발명은 웹 브라우저 기반으로 디스플레이 화면에 대응하는 반응형 웹페이지를 보다 편리하게 제작할 수 있는 서비스를 제공하는 것을 목적으로 한다.
그리고, 본 발명은 웹페이지 접속 시의 트래픽을 최적화할 수 있는 반응형 웹페이지를 제작할 수 있는 환경을 제공하는 것을 목적으로 한다. 또한, 본 발명은 웹페이지 접속 사용자의 무선 데이터 용량 부담을 최소화하는 반응형 웹페이지를 제공하는 것을 목적으로 한다.
또한, 본 발명은 기존 PC 웹페이지 제작 서비스에서 반응형 템플릿을 자동 참고 생성하여 제작 확장성을 넓히는 것을 목적으로 한다.
상기한 목적을 달성하기 위한 본 발명의 일 실시예에 따른 반응형 웹페이지 제작 방법은 컨텐츠 삽입 영역의 위치, 크기 및 컨텐츠 삽입 영역에 삽입될 컨텐츠의 종류 중 적어도 하나를 정의하는 복수개의 반응형 템플릿을 생성 및 관리하는 단계; 상기 복수개의 반응형 템플릿 중 사용자로부터 선택된 반응형 템플릿을 웹 브라우저 창을 통하여 제공하는 단계; 사용자 단말로부터 상기 컨텐츠 삽입 영역에 삽입될 컨텐츠를 수신하는 단계; 상기 반응형 템플릿의 컨텐츠 삽입 영역에 상기 컨텐츠의 크기를 자동 변환 및 삽입하여, 웹페이지 템플릿을 생성하는 단계; 및 상기 웹페이지 템플릿을 서로 다른 크기의 표시 화면을 갖는 복수의 디스플레이 기기에 대응하는 반응형 웹페이지로 자동 생성하는 단계를 포함하며, 상기 반응형 템플릿은 상기 복수의 디스플레이 기기에 대응하는 반응형 웹페이지로 자동 변환되기 위한 변환 정보를 포함한다.
이 때, 상기 복수의 디스플레이 기기는 제1 디스플레이 기기 및 상기 제1 디스플레이 기기보다 작은 표시 화면을 갖는 제2 디스플레이 기기를 포함하며, 상기 제공하는 단계에서, 상기 사용자로부터 선택된 반응형 템플릿을 웹 브라우저 창의 폭이 기 설정된 폭보다 큰 경우 제1 디스플레이 기기용 반응형 템플릿을 제공하고, 웹 브라우저 창의 폭이 기 설정된 폭 이하인 경우 제2 디스플레이 기기용 반응형 템플릿을 제공하며, 상기 제공하는 단계, 상기 수신하는 단계, 상기 생성하는 단계 및 상기 자동 생성하는 단계에서, 상기 사용자의 설정에 의하여 상기 웹 브라우저 창의 폭이 기 설정된 폭보다 큰 상태에서 이하인 상태로 변경되는 경우 상기 제1 디스플레이 기기용 반응형 템플릿을 상기 제2 디스플레이 기기용 반응형 템플릿으로 자동 전환할 수 있다.
이 때, 상기 제공하는 단계, 상기 수신하는 단계, 상기 생성하는 단계 및 상기 자동 생성하는 단계에서, 상기 웹 브라우저 창의 폭이 기 설정된 제한 폭 미만으로는 줄어들지 않도록 설정되며, 상기 기 설정된 제한 폭은 상기 기 설정된 폭보다 작을 수 있다.
이 때, 상기 제1 디스플레이 기기용 반응형 템플릿에 포함되는 제1 컨텐츠 삽입 영역은 상기 제2 디스플레이 기기용 반응형 템플릿에 포함되는 제2 컨텐츠 삽입 영역에 대응되고, 상기 수신하는 단계에서 상기 제1 컨텐츠 삽입 영역에 복수개의 이미지가 입력된 경우, 상기 웹페이지 템플릿을 생성하는 단계에서, 상기 복수개의 이미지가 기 설정된 개수 이상인 경우 상기 제2 컨텐츠 삽입 영역에서 좌우 스크롤 바를 생성하여 상기 복수개의 이미지를 매칭하고, 상기 복수개의 이미지가 기 설정된 개수 미만인 경우 상기 제2 컨텐츠 삽입 영역에서 상하 나열 형식으로 상기 복수개의 이미지를 매칭할 수 있다.
이 때, 상기 제1 디스플레이 기기용 반응형 템플릿에 포함되는 제1 컨텐츠 삽입 영역은 상기 제2 디스플레이 기기용 반응형 템플릿에 포함되는 제2 컨텐츠 삽입 영역에 대응되고, 상기 수신하는 단계에서 상기 제1 컨텐츠 삽입 영역에 동영상이 입력된 경우, 상기 웹페이지 템플릿을 생성하는 단계에서, 상기 동영상에서 복수개의 스틸컷을 추출하여 상기 제2 컨텐츠 삽입 영역에 매칭할 수 있다.
이 때, 상기 웹페이지 템플릿을 생성하는 단계에서, 상기 제2 디스플레이 기기용 반응형 템플릿의 상하 길이에 반비례하여 상기 복수개의 스틸컷을 추출할 수 있다.
이 때, 상기 제1 디스플레이 기기용 반응형 템플릿에 포함되는 제1 컨텐츠 삽입 영역은 상기 제2 디스플레이 기기용 반응형 템플릿에 포함되는 제2 컨텐츠 삽입 영역에 대응되고, 상기 수신하는 단계에서 상기 제1 컨텐츠 삽입 영역에 이미지 또는 동영상이 입력된 경우, 상기 웹페이지 템플릿을 생성하는 단계 및 상기 반응형 웹페이지로 자동 생성하는 단계에서, 상기 제2 컨텐츠 삽입 영역은 별도의 선택을 받아 실행되는 팝업 창에 포함되도록 형성될 수 있다.
이 때, 상기 복수개의 반응형 템플릿을 생성 및 관리하는 단계에서는, 사용자로부터 선택된 PC 홈페이지 생성 서비스에 접속하는 단계; 상기 PC 홈페이지 생성 서비스에서의 참고 템플릿을 선택하여 실행시키는 단계; 및 실행된 상기 참고 템플릿의 구조를 분석하여 반응형 템플릿을 생성하는 단계를 포함할 수 있다.
이 때, 상기 반응형 템플릿을 생성하는 단계에서는, 실행된 상기 참고 템플릿의 윤곽선을 분석하여 컨텐츠 삽입 영역을 판별하며, 상기 컨텐츠 삽입 영역 내의 아이콘을 포함하는 이미지를 분석하여 상기 컨텐츠 삽입 영역 내 삽입될 컨텐츠의 종류를 정의하고, 상기 컨텐츠 삽입 영역 외의 아이콘 이미지를 분석하여 클릭 혹은 터치 영역을 정의할 수 있다.
본 발명에 따르면, 웹 기반 웹페이지 제작 서비스를 제공하기 때문에 별도의 전문 소프트웨어 없이 누구나 손쉽게 웹페이지를 제작할 수 있다. 특히, 본 발명은 웹 브라우저 기반으로 디스플레이 화면에 대응하는 반응형 웹페이지를 보다 편리하게 제작할 수 있는 서비스를 제공한다.
그리고, 본 발명은 이미지의 개수에 대응하여 PC용 혹은 모바일용 표시 방법을 달리하여 웹페이지 접속 시의 트래픽을 최적화할 수 있는 반응형 웹페이지를 제작할 수 있다.
또한, 본 발명은 모바일 기기에서는 동영상 컨텐츠를 스틸컷으로 표현하여 웹페이지 접속 사용자의 무선 데이터 용량 부담을 최소화할 수 있다.
또한, 본 발명은 기존 PC 웹페이지 제작 서비스에서 반응형 템플릿을 자동 참고 생성하여 제작 확장성을 넓힐 수 있다.
도 1은 본 발명의 실시예에 따른 반응형 웹페이지 제작 방법이 적용된 전체 시스템을 설명하기 위한 도면이다.
도 2는 본 발명의 실시예에 따른 반응형 웹페이지 제작 방법을 설명하기 위한 플로우챠트이다.
도 3 내지 도 5는 본 발명의 실시예에 따른 반응형 웹페이지 제작 방법에 있어서, 웹 브라우저 창의 크기를 조절하여 반응형 템플릿이 자동 전환되는 예를 도시한 것이다.
도 6은 본 발명의 실시예에 따른 반응형 웹페이지 제작 장치의 구성을 나타낸 블록도이다.
본 발명을 첨부된 도면을 참조하여 상세히 설명하면 다음과 같다. 여기서, 반복되는 설명, 본 발명의 요지를 불필요하게 흐릴 수 있는 공지 기능, 및 구성에 대한 상세한 설명은 생략한다. 본 발명의 실시형태는 당 업계에서 평균적인 지식을 가진 자에게 본 발명을 보다 완전하게 설명하기 위해서 제공되는 것이다. 따라서, 도면에서의 요소들의 형상 및 크기 등은 보다 명확한 설명을 위해 과장될 수 있다.
이하, 본 발명의 일 실시예에 따른 반응형 웹페이지 생성 방법에 대하여 설명한다.
도 1은 본 발명의 실시예에 따른 반응형 웹페이지 제작 방법이 적용된 전체 시스템을 설명하기 위한 도면이다.
도 1을 참조하면, 본 발명의 실시예에 따른 반응형 웹페이지 제작 방법이 적용된 전체 시스템은 유무선 통신망(10)으로 연결된 반응형 웹페이지 생성 장치(100), 중앙 서버(200), 디스플레이 화면의 크기가 각기 다른 모바일 기기(300) 및 노트북 등의 PC(400)를 포함하는 복수의 디스플레이 기기를 포함하여 형성될 수 있다. 이 때, 반응형 웹페이지 생성 장치(100)의 보다 구체적인 구성은 도 6에 대한 설명과 함께 후술하도록 한다.
도 2는 본 발명의 실시예에 따른 반응형 웹페이지 제작 방법을 설명하기 위한 플로우챠트이다. 도 3 내지 도 5는 본 발명의 실시예에 따른 반응형 웹페이지 제작 방법에 있어서, 웹 브라우저 창의 크기를 조절하여 반응형 템플릿이 자동 전환되는 예를 도시한 것이다. 도 3은 PC 기반 웹페이지를 도 5는 모바일 기반 웹페이지일 수 있으며, 도 4는 도 3의 웹 브라우저 창(30)의 크기를 조절하여 도 5의 웹 브라우저 창(50)과 같이 변화시키는 도중의 웹 브라우저 창(40)이다.
도 1 및 도 2를 함께 참조하면, 본 발명의 실시예에 따른 반응형 웹페이지 제작 방법은 먼저, 컨텐츠 삽입 영역의 위치, 크기 및 컨텐츠 삽입 영역에 삽입될 컨텐츠의 종류 중 적어도 하나를 정의하여 생성된 복수개의 반응형 템플릿을 생성 및 관리한다(S110). 이 때, 복수개의 반응형 템플릿은 반응형 웹페이지 생성 장치(100)에서 생성 및 관리될 수 있다. 그리고, 복수개의 반응형 템플릿은 중앙 서버(200)에 저장될 수 있다. 또한, 반응형 템플릿은 상기 복수의 디스플레이 기기에 대응하는 반응형 웹페이지로 자동 변환되기 위한 변환 정보를 포함한다. 이 때, 복수의 디스플레이 기기는 제1 디스플레이 기기 및 제1 디스플레이 기기보다 작은 표시 화면을 갖는 제2 디스플레이 기기를 포함하여 형성될 수 있다. 제1 디스플레이 기기는 PC(400)일 수 있고, 제2 디스플레이 기기는 모바일 기기(300)일 수 있다. 도 3 내지 도 5에서는 도면부호 31, 41, 51이 컨텐츠 삽입 영역이다.
복수개의 반응형 템플릿은 운영자에 의하여 직접 생성될 수 있다. 반면, 기존의 PC 홈페이지 생성 서비스에서 사용되던 템플릿에 기초하여 자동으로 생성될 수도 있다. 구체적으로, S110 단계는, 사용자로부터 선택된 PC 홈페이지 생성 서비스에 접속하는 단계, 상기 PC 홈페이지 생성 서비스에서의 참고 템플릿을 선택하여 실행시키는 단계, 및 실행된 상기 참고 템플릿의 구조를 분석하여 반응형 템플릿을 생성하는 단계를 포함하여 진행될 수 있다. 이 때, 상기 반응형 템플릿을 생성하는 단계에서는, 실행된 상기 참고 템플릿의 윤곽선을 분석하여 컨텐츠 삽입 영역을 판별하며, 상기 컨텐츠 삽입 영역 내의 아이콘을 포함하는 이미지를 분석하여 상기 컨텐츠 삽입 영역 내 삽입될 컨텐츠의 종류를 정의하고, 컨텐츠 삽입 영역 외의 아이콘 이미지를 분석하여 클릭 혹은 터치 영역을 정의할 수 있다. 예를 들어, 기존 PC 홈페이지 생성 서비스에서의 참고 템플릿에 동영상 표시 아이콘이 특정 사각 박스 안에 표시되어 있다면, 특정 사각 박스는 컨텐츠 삽입 영역으로 판별하고, 해당 컨텐츠 삽입 영역은 동영상을 삽입하여야 하는 영역으로 정의할 수 있다. 또한, 컨텐츠 삽입 영역으로 판별된 각각의 영역을 터치하여 선택할 수 있는 영역으로 정의할 수 있다. 이와 같이 생성된 템플릿에 기초하여 작은 화면의 모바일 기기(300)에 대응하는 홈페이지로 변환하기 위한 변환 정보도 추가로 정의할 수 있다. 즉, PC 기반 홈페이지 템플릿의 컨텐츠 삽입 영역의 크기, 글씨 크기 등을 작게 조정하는 변환 정보를 추가 정의할 수 있다. 도 3 내지 도 5와 같이 복수의 이미지들(31a~31c, 41a~41c, 51a~51c)을 좌우 나열에서 상하 나열로 변경할 수도 있다. 기존의 PC 홈페이지 생성 서비스를 기초로 반응형 웹페이지 생성 서비스를 제공하기 위한 복수의 템플릿을 자동으로 생성할 수 있다.
그리고, 복수개의 반응형 템플릿 중 사용자로부터 선택된 반응형 템플릿을 웹 브라우저 창을 통하여 제공한다(S120). 이 때, 사용자는 모바일 기기(300) 및 PC(400)와 같은 사용자 단말을 통하여 반응형 템플릿을 선택할 수 있으며, 사용자 단말에 선택된 반응형 템플릿이 웹 브라우저 창을 통하여 제공될 수 있다.
이 후, 반응형 웹페이지 생성 장치(100)가 사용자 단말로부터 선택된 반응형 템플릿의 컨텐츠 삽입 영역에 삽입될 컨텐츠를 수신한다(S130).
또한, 반응형 템플릿의 컨텐츠 삽입 영역에 상기 컨텐츠의 크기를 자동 변환 및 삽입하여, 웹페이지 템플릿을 생성한다(S140).
S140 단계에서 생성한 웹페이지 템플릿을 서로 다른 크기의 표시 화면을 갖는 복수의 디스플레이 기기에 대응하는 반응형 웹페이지로 자동 생성한다(S150).
S120 단계에서는, 상기 사용자로부터 선택된 반응형 템플릿을 웹 브라우저 창의 폭이 기 설정된 폭보다 큰 경우 제1 디스플레이 기기용 반응형 템플릿을 제공하고, 웹 브라우저 창의 폭이 기 설정된 폭 이하인 경우 제2 디스플레이 기기용 반응형 템플릿을 제공할 수 있다. 그리고, S120 단계 내지 S150 단계에서는 상기 사용자의 설정에 의하여 상기 웹 브라우저 창의 폭이 기 설정된 폭보다 큰 상태에서 이하인 상태로 변경되는 경우 상기 제1 디스플레이 기기용 반응형 템플릿을 상기 제2 디스플레이 기기용 반응형 템플릿으로 자동 전환할 수 있다. 이를 통하여 사용자가 손쉽게 웹 브라우저 창의 폭을 늘였다 줄이면서 복수의 디스플레이 기기에서의 반응형 웹페이지가 어떻게 생성되는지 확인하며 웹페이지를 생성 및 편집할 수 있다. 이 때, S120 단계 내지 S150 단계에서는 웹 브라우저 창의 폭이 기 설정된 제한 폭 미만으로는 줄어들지 않도록 설정되며, 상기 기 설정된 제한 폭은 상기 기 설정된 폭보다 작을 수 있다. 즉, 웹 브라우저 창이 모바일 기기(300)의 화면보다 작은 화면의 반응형 웹페이지는 생성되지 않도록 폭의 변화를 제한할 수 있다. 즉, 도 5의 웹 브라우저 창(50)에서 폭을 더 줄일 수 없게 형성될 수 있다.
또한, 제1 디스플레이 기기용 반응형 템플릿에 포함되는 제1 컨텐츠 삽입 영역은 제2 디스플레이 기기용 반응형 템플릿에 포함되는 제2 컨텐츠 삽입 영역에 대응될 수 있다. 즉, 제1 컨텐츠 삽입 영역에 소정 이미지가 추가된 경우, 제2 컨텐츠 삽입 영역에도 소정 이미지가 추가될 수 있으며, 제2 컨텐츠 삽입 영역에는 소정 이미지의 크기를 작게 변환하여 추가될 수 있다.
그리고, S130 단계에서 제1 컨텐츠 삽입 영역에 복수개의 이미지가 입력된 경우, S140 단계에서, 복수개의 이미지가 기 설정된 개수 이상인 경우 상기 제2 컨텐츠 삽입 영역에서 좌우 스크롤 바를 생성하여 상기 복수개의 이미지를 매칭하고, 상기 복수개의 이미지가 기 설정된 개수 미만인 경우 상기 제2 컨텐츠 삽입 영역에서 상하 나열 형식으로 상기 복수개의 이미지를 매칭할 수 있다. 도 3 내지 도 5에 상하 나열로 복수개의 이미지를 표현하는 것이 도시되어 있다. 도 3의 컨텐츠 삽입 영역(31)에 삽입된 이미지의 개수가 기 설정된 개수 이상인 경우 도 5에서는 해당 이미지들은 좌우 스크롤 바와 함께 표현될 수 있다. 즉, 기 설정된 개수 이상의 이미지가 입력된 경우 작은 모바일 기기(300)에 나열하여 표시하는 것은 비효율적이므로 좌우 스크롤바와 함께 이미지를 표시할 수 있다. 반면, 기 설정된 개수 미만의 이미지가 입력된 경우 스크롤바 없이 단순 상하 나열 형식으로 이미지를 바로 표시할 수 있다.
또한, S130 단계에서 제1 컨텐츠 삽입 영역에 동영상이 입력된 경우, S140 단계에서, 동영상에서 복수개의 스틸컷을 추출하여 상기 제2 컨텐츠 삽입 영역에 매칭할 수 있다. 즉, 모바일 기기(300)와 같은 통신 데이터 용량의 크기 및 속도에 제한이 있는 경우는 동영상이 노출되는 것이 아니라, 그 동영상의 스틸컷 이미지가 노출되도록 매칭할 수 있다. 이 때, 스틸컷은 동영상을 일정 주기로 캡쳐하거나, 하이라이트 씬을 자동 판별하여 캡쳐될 수 있다. 또한, S140 단계에서, 제2 디스플레이 기기용 반응형 템플릿의 상하 길이에 반비례하여 상기 복수개의 스틸컷을 추출할 수 있다.
또한, S130 단계에서 제1 컨텐츠 삽입 영역에 이미지 또는 동영상이 입력된 경우, S140 단계 및 S150 단계에서는 제2 컨텐츠 삽입 영역은 별도의 선택을 받아 실행되는 팝업 창에 포함되도록 형성될 수 있다. 즉, 모바일 기기(300)와 같은 통신 데이터 용량의 크기 및 속도에 제한이 있는 경우, 데이터 용량이 큰 동영상 및 이미지는 바로 오픈되지 않고 사용자의 선택에 의하여 팝업 창에 노출되도록 제어할 수 있다.
그리고, 사용자로부터 선택된 반응형 템플릿의 종류에 기초하여 상기 반응형 웹페이지의 카테고리를 분류하여 검색에 반영한다(S160). S160 단계를 통하여 검색의 편의성을 도모한다.
이러한 본 발명에 따른 반응형 웹페이지 생성 방법은 다양한 컴퓨터 수단을 통하여 수행될 수 있는 프로그램 명령 형태로 구현되어 컴퓨터 판독 가능 매체에 기록될 수 있다.　상기 컴퓨터 판독 가능 매체는 프로그램 명령, 데이터 파일, 데이터 구조 등을 단독으로 또는 조합하여 포함할 수 있다.　 상기 매체에 기록되는 프로그램 명령은 본 발명을 위하여 특별히 설계되고 구성된 것들이거나 컴퓨터 소프트웨어 당업자에게 공지되어 사용 가능한 것일 수도 있다.　 컴퓨터 판독 가능 기록 매체의 예에는 하드 디스크, 플로피 디스크 및 자기 테이프와 같은 자기 매체(magnetic media), CD-ROM, DVD와 같은 광기록 매체(optical media), 플롭티컬 디스크(floptical disk)와 같은 자기-광 매체(magneto-optical media), 및 롬(ROM), 램(RAM), 플래시 메모리 등과 같은 프로그램 명령을 저장하고 수행하도록 특별히 구성된 모든 형태의 하드웨어 장치가 포함된다.　프로그램 명령의 예에는 컴파일러에 의해 만들어지는 것과 같은 기계어 코드뿐만 아니라 인터프리터 등을 사용해서 컴퓨터에 의해서 실행될 수 있는 고급 언어 코드를 포함할 수 있다. 　이러한 하드웨어 장치는 본 발명의 동작을 수행하기 위해 하나 이상의 소프트웨어 모듈로서 작동하도록 구성될 수 있으며, 그 역도 마찬가지이다.
본 발명의 원리들의 교시들은 하드웨어와 소프트웨어의 조합으로서 구현될 수 있다. 또한, 소프트웨어는 프로그램 저장부 상에서 실재로 구현되는 응용 프로그램으로서 구현될 수 있다. 응용 프로그램은 임의의 적절한 아키텍쳐를 포함하는 머신에 업로드되고 머신에 의해 실행될 수 있다. 바람직하게는, 머신은 하나 이상의 중앙 처리 장치들(CPU), 컴퓨터 프로세서, 랜덤 액세스 메모리(RAM), 및 입/출력(I/O) 인터페이스들과 같은 하드웨어를 갖는 컴퓨터 플랫폼 상에 구현될 수 있다. 또한, 컴퓨터 플랫폼은 운영 체제 및 마이크로 명령 코드를 포함할 수 있다. 여기서 설명된 다양한 프로세스들 및 기능들은 마이크로 명령 코드의 일부 또는 응용 프로그램의 일부, 또는 이들의 임의의 조합일 수 있고, 이들은 CPU를 포함하는 다양한 처리 장치에 의해 실행될 수 있다. 추가로, 추가 데이터 저장부 및 프린터와 같은 다양한 다른 주변 장치들이 컴퓨터 플랫폼에 접속될 수 있다.
첨부 도면들에서 도시된 구성 시스템 컴포넌트들 및 방법들의 일부가 바람직하게는 소프트웨어로 구현되므로, 시스템 컴포넌트들 또는 프로세스 기능 블록들 사이의 실제 접속들은 본 발명의 원리들이 프로그래밍되는 방식에 따라 달라질 수 있다는 점이 추가로 이해되어야 한다. 여기서의 교시들이 주어지면, 관련 기술분야의 당업자는 본 발명의 원리들의 이들 및 유사한 구현예들 또는 구성들을 참작할 수 있을 것이다.
이하에서는 본 발명의 실시예에 따른 반응형 웹페이지 제작 장치의 구성 및 동작에 대하여 설명하도록 한다.
도 6은 본 발명의 실시예에 따른 반응형 웹페이지 제작 장치의 구성을 나타낸 블록도이다.
도 6을 참조하면, 본 발명의 실시예에 따른 반응형 웹페이지 제작 장치(100)는 반응형 템플릿 생성부(110), 반응형 템플릿 제공부(120), 컨텐츠 수신부(130), 웹페이지 템플릿 생성부(140) 및 반응형 웹페이지 생성부(150)를 포함하여 형성된다. 그리고, 본 발명의 실시예에 따른 반응형 웹페이지 제작 장치(100)는 검색 반영부(160)를 더 포함하여 형성될 수 있다. 또한, 본 발명의 실시예에 따른 반응형 웹페이지 제작 장치(100)의 동작은 도 1 내지 도 5와 함께 설명한 반응형 웹페이지 제작 방법과 같으며, 이하에서는 주요 기능에 대한 부분만 설명하며 다른 설명은 도 1 내지 도 5에 대한 설명으로 갈음한다.
반응형 템플릿 생성부(110)는 컨텐츠 삽입 영역의 위치, 크기 및 컨텐츠 삽입 영역에 삽입될 컨텐츠의 종류 중 적어도 하나를 정의하는 복수개의 반응형 템플릿을 생성 및 관리한다.
반응형 템플릿 제공부(120)는 복수개의 반응형 템플릿 중 사용자로부터 선택된 반응형 템플릿을 웹 브라우저 창을 통하여 제공한다.
컨텐츠 수신부(130)는 사용자 단말로부터 상기 컨텐츠 삽입 영역에 삽입될 컨텐츠를 수신한다.
웹페이지 템플릿 생성부(140)는 반응형 템플릿의 컨텐츠 삽입 영역에 상기 컨텐츠의 크기를 자동 변환 및 삽입하여, 웹페이지 템플릿을 생성한다.
반응형 웹페이지 생성부(150)는 웹페이지 템플릿을 서로 다른 크기의 표시 화면을 갖는 복수의 디스플레이 기기에 대응하는 반응형 웹페이지로 자동 생성한다.
검색 반영부(160)는 사용자로부터 선택된 반응형 템플릿의 종류에 기초하여 상기 반응형 웹페이지의 카테고리를 분류하여 검색에 반영한다.
이상에서와 같이 본 발명에 따른 반응형 웹페이지 생성 방법 및 장치는 상기한 바와 같이 설명된 실시예들의 구성과 방법이 한정되게 적용될 수 있는 것이 아니라, 상기 실시예들은 다양한 변형이 이루어질 수 있도록 각 실시예들의 전부 또는 일부가 선택적으로 조합되어 구성될 수도 있다.
100; 반응형 웹페이지 제작 장치
110; 반응형 템플릿 생성부
120; 반응형 템플릿 제공부
130; 컨텐츠 수신부
140; 웹페이지 템플릿 생성부
150; 반응형 웹페이지 생성부
160; 검색 반영부

Claims (7)

  1. 반응형 웹페이지 제작 장치의 반응형 템플릿 생성부가, 컨텐츠 삽입 영역의 위치, 크기 및 컨텐츠 삽입 영역에 삽입될 컨텐츠의 종류 중 적어도 하나를 정의하는 복수개의 반응형 템플릿을 생성 및 관리하는 단계;
    상기 반응형 웹페이지 제작 장치의 반응형 템플릿 제공부가, 상기 복수개의 반응형 템플릿 중 사용자로부터 선택된 반응형 템플릿을 웹 브라우저 창을 통하여 제공하는 단계;
    상기 반응형 웹페이지 제작 장치의 컨텐츠 수신부가, 사용자 단말로부터 상기 컨텐츠 삽입 영역에 삽입될 컨텐츠를 수신하는 단계;
    상기 반응형 웹페이지 제작 장치의 웹페이지 템플릿 생성부가, 상기 반응형 템플릿의 컨텐츠 삽입 영역에 상기 컨텐츠의 크기를 자동 변환 및 삽입하여, 웹페이지 템플릿을 생성하는 단계; 및
    상기 반응형 웹페이지 제작 장치의 반응형 웹페이지 생성부가, 상기 웹페이지 템플릿을 서로 다른 크기의 표시 화면을 갖는 복수의 디스플레이 기기에 대응하는 반응형 웹페이지로 자동 생성하는 단계를 포함하며,
    상기 반응형 템플릿은 상기 복수의 디스플레이 기기에 대응하는 반응형 웹페이지로 자동 변환되기 위한 변환 정보를 포함하고,
    상기 복수의 디스플레이 기기는 제1 디스플레이 기기 및 상기 제1 디스플레이 기기보다 작은 표시 화면을 갖는 제2 디스플레이 기기를 포함하며,
    상기 제공하는 단계에서,
    상기 사용자로부터 선택된 반응형 템플릿을 웹 브라우저 창의 폭이 기 설정된 폭보다 큰 경우 제1 디스플레이 기기용 반응형 템플릿을 제공하고, 웹 브라우저 창의 폭이 기 설정된 폭 이하인 경우 제2 디스플레이 기기용 반응형 템플릿을 제공하며,
    상기 제공하는 단계, 상기 수신하는 단계, 상기 웹페이지 템플릿을 생성하는 단계 및 상기 자동 생성하는 단계에서,
    상기 사용자의 설정에 의하여 상기 웹 브라우저 창의 폭이 기 설정된 폭보다 큰 상태에서 이하인 상태로 변경되는 경우 상기 제1 디스플레이 기기용 반응형 템플릿을 상기 제2 디스플레이 기기용 반응형 템플릿으로 자동 전환하며,
    상기 제1 디스플레이 기기용 반응형 템플릿에 포함되는 제1 컨텐츠 삽입 영역은 상기 제2 디스플레이 기기용 반응형 템플릿에 포함되는 제2 컨텐츠 삽입 영역에 대응되고, 상기 수신하는 단계에서 상기 제1 컨텐츠 삽입 영역에 동영상이 입력된 경우,
    상기 웹페이지 템플릿을 생성하는 단계에서,
    상기 동영상에서 복수개의 스틸컷을 추출하여 상기 제2 컨텐츠 삽입 영역에 매칭하고,
    상기 복수개의 반응형 템플릿을 생성 및 관리하는 단계에서는,
    상기 반응형 템플릿 생성부가 사용자로부터 선택된 PC 홈페이지 생성 서비스에 접속하는 단계;
    상기 반응형 템플릿 생성부가 상기 PC 홈페이지 생성 서비스에서의 참고 템플릿을 선택하여 실행시키는 단계; 및
    상기 반응형 템플릿 생성부가 실행된 상기 참고 템플릿의 구조를 분석하여 반응형 템플릿을 생성하는 단계를 포함하며,
    상기 반응형 템플릿을 생성하는 단계에서는,
    상기 반응형 템플릿 생성부가 실행된 상기 참고 템플릿의 윤곽선을 분석하여 컨텐츠 삽입 영역을 판별하며, 상기 컨텐츠 삽입 영역 내의 아이콘을 포함하는 이미지를 분석하여 상기 컨텐츠 삽입 영역 내 삽입될 컨텐츠의 종류를 정의하고,
    상기 컨텐츠 삽입 영역 외의 아이콘 이미지를 분석하여 클릭 혹은 터치 영역을 정의하는 것을 특징으로 하는 반응형 웹페이지 생성 방법.
  2. 삭제
  3. 청구항 1에 있어서,
    상기 제공하는 단계, 상기 수신하는 단계, 상기 웹페이지 템플릿을 생성하는 단계 및 상기 자동 생성하는 단계에서,
    상기 웹 브라우저 창의 폭이 기 설정된 제한 폭 미만으로는 줄어들지 않도록 설정되며, 상기 기 설정된 제한 폭은 상기 기 설정된 폭보다 작은 것을 특징으로 하는 반응형 웹페이지 생성 방법.
  4. 청구항 1에 있어서,
    상기 제1 디스플레이 기기용 반응형 템플릿에 포함되는 제1 컨텐츠 삽입 영역은 상기 제2 디스플레이 기기용 반응형 템플릿에 포함되는 제2 컨텐츠 삽입 영역에 대응되고, 상기 수신하는 단계에서 상기 제1 컨텐츠 삽입 영역에 복수개의 이미지가 입력된 경우,
    상기 웹페이지 템플릿을 생성하는 단계에서,
    상기 복수개의 이미지가 기 설정된 개수 이상인 경우 상기 제2 컨텐츠 삽입 영역에서 좌우 스크롤 바를 생성하여 상기 복수개의 이미지를 매칭하고, 상기 복수개의 이미지가 기 설정된 개수 미만인 경우 상기 제2 컨텐츠 삽입 영역에서 상하 나열 형식으로 상기 복수개의 이미지를 매칭하는 것을 특징으로 하는 반응형 웹페이지 생성 방법.
  5. 삭제
  6. 청구항 1에 있어서,
    상기 웹페이지 템플릿을 생성하는 단계에서,
    상기 제2 디스플레이 기기용 반응형 템플릿의 상하 길이에 반비례하여 상기 복수개의 스틸컷을 추출하는 것을 특징으로 하는 반응형 웹페이지 생성 방법.
  7. 청구항 1에 있어서,
    상기 제1 디스플레이 기기용 반응형 템플릿에 포함되는 제1 컨텐츠 삽입 영역은 상기 제2 디스플레이 기기용 반응형 템플릿에 포함되는 제2 컨텐츠 삽입 영역에 대응되고,
    상기 수신하는 단계에서 상기 제1 컨텐츠 삽입 영역에 이미지 또는 동영상이 입력된 경우, 상기 웹페이지 템플릿을 생성하는 단계 및 상기 반응형 웹페이지로 자동 생성하는 단계에서, 상기 제2 컨텐츠 삽입 영역은 별도의 선택을 받아 실행되는 팝업 창에 포함되도록 형성되는 것을 특징으로 하는 반응형 웹페이지 생성 방법.
KR1020170051019A 2017-04-20 2017-04-20 반응형 웹페이지 생성 방법 및 장치 KR101771473B1 (ko)

Priority Applications (1)

Application Number Priority Date Filing Date Title
KR1020170051019A KR101771473B1 (ko) 2017-04-20 2017-04-20 반응형 웹페이지 생성 방법 및 장치

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR1020170051019A KR101771473B1 (ko) 2017-04-20 2017-04-20 반응형 웹페이지 생성 방법 및 장치

Publications (1)

Publication Number Publication Date
KR101771473B1 true KR101771473B1 (ko) 2017-08-25

Family

ID=59761541

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020170051019A KR101771473B1 (ko) 2017-04-20 2017-04-20 반응형 웹페이지 생성 방법 및 장치

Country Status (1)

Country Link
KR (1) KR101771473B1 (ko)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20200112020A (ko) * 2019-03-20 2020-10-05 주식회사위즈위그 레이아웃 템플릿 기반 통합 사이트 관리 시스템 및 방법
WO2021035165A1 (en) * 2019-08-21 2021-02-25 Aveva Software, Llc Responsive layout system and server
WO2021066325A1 (ko) * 2019-10-04 2021-04-08 (주)텐스 웹 페이지를 생성하는 방법 및 장치

Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR101489502B1 (ko) 2007-04-16 2015-02-06 주식회사 비즈모델라인 반응형 배경화면 제공 방법
KR101516213B1 (ko) 2014-08-27 2015-05-04 주식회사 나인트리 도큐먼트를 반응형 웹으로 변환하는 반응형 웹 생성 방법

Patent Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR101489502B1 (ko) 2007-04-16 2015-02-06 주식회사 비즈모델라인 반응형 배경화면 제공 방법
KR101516213B1 (ko) 2014-08-27 2015-05-04 주식회사 나인트리 도큐먼트를 반응형 웹으로 변환하는 반응형 웹 생성 방법

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20200112020A (ko) * 2019-03-20 2020-10-05 주식회사위즈위그 레이아웃 템플릿 기반 통합 사이트 관리 시스템 및 방법
KR102170306B1 (ko) * 2019-03-20 2020-10-26 주식회사 위즈위그 레이아웃 템플릿 기반 통합 사이트 관리 시스템 및 방법
WO2021035165A1 (en) * 2019-08-21 2021-02-25 Aveva Software, Llc Responsive layout system and server
US11823647B2 (en) 2019-08-21 2023-11-21 Aveva Software, Llc Responsive layout system and server
WO2021066325A1 (ko) * 2019-10-04 2021-04-08 (주)텐스 웹 페이지를 생성하는 방법 및 장치
US12045305B2 (en) 2019-10-04 2024-07-23 Tenth Co., Ltd. Method and apparatus for generating web page using blocks

Similar Documents

Publication Publication Date Title
US9753900B2 (en) Universal content referencing, packaging, distribution system, and a tool for customizing web content
EP3279802A1 (en) System and method for the online editing of pdf documents
US8156448B2 (en) Site navigation and site navigation data source
US20120233137A1 (en) Presentation of document history in a web browsing application
US20040100509A1 (en) Web page partitioning, reformatting and navigation
KR20040044373A (ko) 비디오 썸네일 및 그 생성 방법
JPH1124980A (ja) 複数媒体タイプにアクセスする媒体管理装置及び方法
EP1143351A2 (en) Multimedia information structuring and application generating method and apparatus
CN110309451A (zh) 一种web预加载页面的生成方法及装置
CN108509589B (zh) 信息流展示方法及系统、计算机可读存储介质
CN113032708A (zh) 一种无代码Web开发系统
CN107229760B (zh) 存储介质、电子装置、网页内容的显示方法和装置
KR101771473B1 (ko) 반응형 웹페이지 생성 방법 및 장치
KR20060101803A (ko) 동적 열람이 가능한 전자 문서의 제작 및 열람 방법
CN113158619A (zh) 文档处理方法、装置、计算机可读存储介质及计算机设备
KR101771475B1 (ko) 반응형 웹페이지 생성 방법 및 장치
CN113448569A (zh) 一种站点页面的处理系统、方法、设备和存储介质
CN111581564A (zh) 一种应用Canvas实现的网页同步交流方法
CN113515922A (zh) 一种文档处理方法、系统、装置以及交互装置
CN113626023A (zh) 基于Sketch的跨平台界面开发方法和系统、计算机设备和介质
US20070038954A1 (en) Displaying apparatus of ui parts and displaying method of ui parts
JP4386011B2 (ja) Ｗｅｂページ再編集方法及びシステム
KR100419568B1 (ko) 네트워크 기반 홈페이지 자동 편집 방법
CN109388457B (zh) 一种多场景的远程快速界面交互方法及装置
CA2741633A1 (en) A universal content referencing, packaging, distribution system, and a tool for customizing web content

Legal Events

Date Code Title Description
E701 Decision to grant or registration of patent right
GRNT Written decision to grant