KR20200088152A - 템플릿을 이용한 반응형 웹 구현 장치 및 방법 - Google Patents

템플릿을 이용한 반응형 웹 구현 장치 및 방법 Download PDF

Info

Publication number
KR20200088152A
KR20200088152A KR1020190004802A KR20190004802A KR20200088152A KR 20200088152 A KR20200088152 A KR 20200088152A KR 1020190004802 A KR1020190004802 A KR 1020190004802A KR 20190004802 A KR20190004802 A KR 20190004802A KR 20200088152 A KR20200088152 A KR 20200088152A
Authority
KR
South Korea
Prior art keywords
template
widget
design
change
unit
Prior art date
Legal status (The legal status 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 status listed.)
Ceased
Application number
KR1020190004802A
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 KR1020190004802A priority Critical patent/KR20200088152A/ko
Publication of KR20200088152A publication Critical patent/KR20200088152A/ko
Ceased legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/166—Editing, e.g. inserting or deleting
    • G06F40/186—Templates
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; 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/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Data Mining & Analysis (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Information Transfer Between Computers (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

본 발명은 웹 브라우저에 표시되는 홈페이지(웹 페이지)를 제작할 때 각 기기별로 가장 최적화된 모양으로 웹 모양이 자동 변경되는 템플릿을 이용한 반응형 웹 구현 장치 및 방법에 관한 것이다. 본 발명에 따른 템플릿을 이용한 반응형 웹 구현 장치는 디자인 편집모드를 제공하여 템플릿 유형, 레이아웃, 콘텐츠(또는 위젯)를 추가하여 템플릿을 생성하는 템플릿 구현부; 및 상기 템플릿 구현부에서 상기 생성된 템플릿이 구현되는 기기 및 기기의 화면 해상도 크기를 감지하고, 감지된 화면 해상도 크기에 대응되어 상기 생성된 템플릿에 포함되는 복수의 콘텐츠 중 일부 콘텐츠가 선택되어 하나의 템플릿으로 적용되는 반응형 웹 처리부를 포함할 수 있다.

Description

템플릿을 이용한 반응형 웹 구현 장치 및 방법{Apparatus and method for Implementing Responsive Web using Template}
본 발명은 웹 브라우저에 표시되는 홈페이지(웹 페이지)를 제작할 때 각 기기별로 가장 최적화된 화면으로 웹 화면이 자동 변경되는 템플릿을 이용한 반응형 웹 구현 장치 및 방법에 관한 것이다.
최근 웹 기술은 태블릿 PC, 스마트 폰 등 다양한 형태와 크기의 모바일 기기의 이용이 늘어나면서 모바일 웹에 대한 관심이 많아지고 있으며, 사용자들은 PC와 모바일 기기에서 동등한 서비스에 대한 욕구가 증가하고 있다.
이에 따라, 각각 모바일 기기의 화면크기, 네트워크 속도 및 품질, 사용모드 등 제약 사항과 기능에 대응하여 여러 종류의 웹(URL)을 구성하지 않고, 하나의 HTML 소스만으로 웹 페이지의 크기 및 레이아웃이 재조정되어 다양한 기기의 화면크기 등 다양한 환경에서도 최적화된 웹 페이지를 제공할 수 있는 반응형 웹(Responsive Web)이 최신 웹 설계 기술로서 부각되고 있다.
한편, 최근 홈페이지 제작 솔루션은 홈페이지의 제작에 있어서 PC와 다양한 모바일 기기 등과의 통합환경에서 다양한 이미지 및 콘텐츠 등의 정보를 제공할 수 있도록 위 반응형 웹 등 모바일 기기 등과의 통합환경을 제공할 수 있도록 시도되고 있다. 그러나 반응형 웹은 그리드 구조를 잘 잡아 디자인을 해야 하며, 하나의 디자인이 다른 크기로 보여줄 디자인 또한 염두하고 진행해야 한다. 이렇게 하나의 디자인이 여러 디스플레이에서 잘 보여줄 수 있게 CSS3, 미디어 쿼리 등을 사용하고 이는 초보자가 하기는 힘든 작업으로 일반적인 웹 디자인보다 인건비와 디자인 비용이 증가하게 되는 문제점이 있다.
이러한 문제점으로 인해, 일반적으로 홈페이지 제작 솔루션에는 여전히 반응형 웹이 도입되지 않고 PC 용 웹과는 별도의 도메인을 가지는 모바일용 웹을 구성하여 모바일 기기 등과의 통합환경을 제공하고 있는 실정이다.
이처럼, 현재의 홈페이지 제작 솔루션에서 제작되는 홈페이지는 디스플레이의 종류에 따라서 크기가 자동적으로 조절이 되지 않는 웹 페이지로, 사용자가 원하는 해상도와 크기의 웹 페이지를 개발하려면 그 기기에 알맞은 코딩 업무가 필요하다. 즉, 변화를 시켜주는 작업이 필요하다. 따라서, 개발자는 기기가 나올 때마다 기기에 최적화시킨 코딩을 작성하거나 추가하는 번거로움이 있으며, 이는 유지보수 시 관리가 힘들어 지속적인 추가작업으로 코딩 또한 정리하기 힘든 문제점이 있다. 또한, 코딩 추가 시 비용이 발생할 수 있어 고객입장에서도 반가운 작업은 아니다.
따라서, 홈페이지 제작 솔루션에서 제공되는 각종 멀티미디어를 포함하는 콘텐츠 정보를 웹 상에서 별도의 도메인으로 제공하는 것이 일반화되어 있는 상황에서 반응형 웹 등 모바일 기기 등과의 통합환경을 제공할 수 있는 새로운 템플릿을 구현할 수 있는 기술이 요구되고 있는 상황이다.
본 발명의 목적은 웹 브라우저에 표시되는 홈페이지(웹 페이지)를 제작할 때 각 기기별로 가장 최적화된 화면으로 자동 변경되는 템플릿을 이용한 반응형 웹 구현 장치 및 방법을 제공하는 것이다.
본 발명의 목적들은 이상에서 언급한 목적으로 제한되지 않으며, 언급되지 않은 본 발명의 다른 목적 및 장점들은 하기의 설명에 의해서 이해될 수 있고, 본 발명의 실시예에 의해 보다 분명하게 이해될 것이다. 또한, 본 발명의 목적 및 장점들은 특허 청구 범위에 나타낸 수단 및 그 조합에 의해 실현될 수 있음을 쉽게 알 수 있을 것이다.
본 발명에 따른 템플릿을 이용한 반응형 웹 구현 장치는 반응형 웹 디자인 편집모드를 제공하여 템플릿 유형, 레이아웃, 콘텐츠(또는 위젯)를 추가하여 템플릿을 생성하는 템플릿 구현부 및 상기 템플릿 구현부에서 상기 생성된 템플릿이 구현되는 기기 및 기기의 화면 해상도 크기를 감지하고, 감지된 화면 해상도 크기에 대응되어 상기 생성된 템플릿에 포함되는 복수의 콘텐츠 중 일부 콘텐츠가 선택되어 하나의 템플릿으로 적용되는 반응형 웹 처리부를 포함할 수 있다.
또한, 상기 템플릿 구현부는 저장부에 미리 저장되어 있는 사용자 인터페이스 형태 및 디자인을 갖는 템플릿 유형 중 하나의 템플릿 유형이 선택되는 템플릿 유형 선택부; 상기 템플릿 유형 선택부에서 생성된 사용자 인터페이스 내부에 위젯이 추가되는 적어도 하나 이상의 레이아웃을 설정하는 레이아웃 설정부; 상기 레이아웃 설정부에서 설정된 각각의 레이아웃에 추가되는 위젯의 디자인이 선택되는 위젯 디자인 선택부; 상기 레이아웃 설정부에서 설정된 레이아웃에 추가되는 위젯이 선택되는 위젯 선택부; 및 상기 위젯 디자인 선택부에서 선택된 위젯 디자인으로 복수의 사용자 인터페이스에 표시된 위젯을 포함하는 템플릿을 저장하고, 미리보기 기능을 통해 선택된 위젯, 위젯 디자인 및 템플릿 유형의 변경을 통해 최종 템플릿을 완성하는 위젯 설정부를 포함할 수 있다.
또한, 상기 위젯 설정부는 다자인 변경을 위한 가이드 라인을 제공하며, 상기 가이드 라인은 헤더/풋터/서브페이지 디자인을 변경하는 기능, 위젯 추가 및 여백을 주기 위한 기능을 포함할 수 있다.
또한, 상기 위젯 설정부는 다양한 디자인 변화를 위해 각 위젯의 디자인 변경을 위한 메뉴를 포함하고, 상기 메뉴는 슬라이더 추가, 슬라이더 삭제, 이미지 변경, 효과변경, 제목변경, 제목색상 변경, 내용변경, 내용색상 변경, 바로가기 색상변경, 바로가기 문구변경, 바로가기 변경, 배경색 변경 중 적어도 하나 이상을 포함할 수 있다.
또한, 상기 반응형 웹 처리부는 미디어쿼리를 사용하여 기기의 화면 해상도 크기를 감지하는 기기 감지부; 상기 템플릿 구현부에서 생성된 템플릿에 포함된 모든 콘텐츠를 다운로드한 후, 상기 기기 감지부에서 감지된 기기의 해상도 크기에 대응되는 일부 콘텐츠를 선택하는 콘텐츠 최적화부; 및 상기 콘텐츠 최적화부에서 선택된 일부 콘텐츠를 포함하는 하나의 템플릿이 기기에 적용하는 기기특성 처리부를 포함할 수 있다.
본 발명에 따른 반응형 웹을 이용한 템플릿 구현 방법은 (A) 템플릿 유형 선택부를 통해 미리 저장되어 있는 사용자 인터페이스 형태 및 디자인을 갖는 템플릿 유형 중 어느 하나의 템플릿 유형이 선택되는 단계; (B) 레이아웃 설정부를 통해 상기 선택된 템플릿 유형에 포함되는 각 사용자 인터페이스 내부에 위젯이 추가되는 적어도 하나 이상의 레이아웃이 설정되는 단계; (C) 위젯 디자인 선택부를 통해 상기 설정된 각각의 레이아웃에 추가되는 위젯의 디자인이 선택되는 단계; (D) 위젯 선택부를 통해 설정된 레이아웃에 추가되는 위젯을 선택하는 단계; (E) 위젯 설정부를 통해 상기 선택된 위젯 디자인으로 복수의 사용자 인터페이스에 표시된 위젯을 포함하는 템플릿을 저장하고, 미리보기 기능을 통해 선택된 위젯, 위젯 디자인 및 템플릿 유형을 변경하여 최종 템플릿을 완성하는 단계; (F) 반응형 웹 처리부를 통해 상기 최종 템플릿이 구현되는 기기 및 기기의 화면 해상도 크기를 감지하고, 감지된 화면 해상도 크기에 대응되어 상기 최종 템플릿에 포함되는 복수의 콘텐츠 중 일부 콘텐츠만 선택되어 하나의 템플릿으로 적용하는 단계를 포함할 수 있다.
또한, 상기 (C) 단계는 일반게시판, 이미지게시판, 배너, 롤링이미지, 퀵메뉴, 기타 별로 미리 설정된 위젯 디자인 중 하나가 선택되어 위젯의 디자인으로 선택될 수 있다.
또한, 상기 (E) 단계는 템플릿을 생성한 시점부터 편집할 수 있는 기능을 포함하는 메뉴를 제공하는 단계; 및 상기 메뉴에 포함되는 슬라이더 추가, 슬라이더 삭제, 이미지 변경, 효과변경, 제목변경, 제목색상 변경, 내용변경, 내용색상 변경, 바로가기 색상변경, 바로가기 문구변경, 바로가기 변경, 배경색 변경을 이용하여 선택된 위젯, 위젯 디자인 및 템플릿 유형을 변경하는 단계를 포함할 수 있다.
또한, 상기 (F) 단계는 기기 감지부를 통해, 미디어쿼리를 사용하여 기기의 화면 해상도 크기를 감지하는 단계; 콘텐츠 최적화부를 통해, 상기 최종 템플릿에 포함된 모든 콘텐츠를 다운로드한 후, 상기 기기 감지부에서 감지된 기기의 해상도 크기에 대응되는 일부 콘텐츠를 선택하는 단계; 및 기기특성 처리부를 통해 상기 선택된 일부 콘텐츠를 포함하는 하나의 템플릿이 기기에 적용하는 단계를 포함할 수 있다.
본 발명에 따는 템플릿을 이용한 반응형 웹 구현 장치 및 방법은 PC 및 다양한 모바일 환경에 적극적으로 사용될 수 있는 반응형 웹 기술 기반의 템플릿을 구현할 수 있다.
또한, 본 발명에 따른 템플릿 구현 장치 및 방법을 통해 스마트폰 등 사용자 기기를 통해 직접 별도의 어플리케이션 없이 이미지 및 콘텐츠 정보를 추가하는 반응형 홈페이지를 실시간으로 제작할 수 있다.
상술한 효과와 더불어 본 발명의 구체적인 효과는 이하 발명을 실시하기 위한 구체적인 사항을 설명하면서 함께 기술한다.
도 1 은 본 발명의 실시예에 따른 템플릿을 이용한 반응형 웹 구현 장치의 구성을 나타낸 블록도이다.
도 2 는 본 발명의 반응형 웹 구현 장치에서 저장부(106)에 저장된 템플릿 유형을 나타낸 실시예이다.
도 3 은 본 발명의 반응형 웹 구현 장치에서 사용자 인터페이스 내부에 레이아웃을 추가하는 것을 나타낸 실시예이다.
도 4 는 본 발명의 반응형 웹 구현 장치에서 레이아웃에 추가되는 위젯의 디자인을 나타낸 실시예이다.
도 5 는 본 발명의 반응형 웹 구현 장치에서 위젯 설정 변경을 위한 메뉴를 나타낸 실시예이다.
도 6 은 본 발명의 실시예에 따른 템플릿을 이용한 반응형 웹 구현 방법을 설명하기 위한 흐름도이다.
도 7 은 도 6에서 최종 템플릿을 적용하는 과정을 상세히 나타낸 흐름도이다.
전술한 목적, 특징 및 장점은 첨부된 도면을 참조하여 상세하게 후술되며, 이에 따라 본 발명이 속하는 기술분야에서 통상의 지식을 가진 자가 본 발명의 기술적 사상을 용이하게 실시할 수 있을 것이다. 본 발명을 설명함에 있어서 본 발명과 관련된 공지 기술에 대한 구체적인 설명이 본 발명의 요지를 불필요하게 흐릴 수 있다고 판단되는 경우에는 상세한 설명을 생략한다. 이하, 첨부된 도면을 참조하여 본 발명에 따른 바람직한 실시예를 상세히 설명하기로 한다. 도면에서 동일한 참조부호는 동일 또는 유사한 구성요소를 가리키는 것으로 사용된다.
어떤 구성요소가 다른 구성요소에 "연결", "결합" 또는 "접속"된다고 기재된 경우, 상기 구성요소들은 서로 직접적으로 연결되거나 또는 접속될 수 있지만, 각 구성요소 사이에 다른 구성요소가 "개재"되거나, 각 구성요소가 다른 구성요소를 통해 "연결", "결합" 또는 "접속"될 수도 있는 것으로 이해되어야 할 것이다.
이하에서는, 본 발명의 몇몇 실시예에 따른 템플릿을 이용한 반응형 웹 구현 장치 및 방법을 설명하도록 한다.
도 1 은 본 발명의 실시예에 따른 템플릿을 이용한 반응형 웹 구현 장치의 구성을 나타낸 블록도이다.
도 1에서 도시하고 있는 것과 같이, 본 발명의 반응형 웹 구현 장치는 템플릿 구현부(100), 반응형 웹 처리부(200)를 포함한다.
상기 템플릿 구현부(100)는 디자인 편집모드를 제공하여 템플릿 유형, 레이아웃, 콘텐츠(위젯)를 추가하여 웹 페이지를 생성한다.
템플릿 구현부(100)는 템플릿 유형 선택부(101), 레이아웃 설정부(102), 위젯 디자인 선택부(103), 위젯 선택부(104), 위젯 설정부(105), 저장부(106)를 포함한다.
템플릿 유형 선택부(101)는 저장부(106)에 미리 저장되어 있는 사용자 인터페이스 형태 및 디자인을 갖는 템플릿 유형이 표시되면, 이중 하나의 템플릿 유형이 선택된다. 이때, 템플릿 유형은 적어도 하나 이상의 사용자 인터페이스를 포함하고, 다양한 형태로 사용자 인터페이스가 위치되어 디자인될 수 있다.
도 2 는 본 발명의 반응형 웹 구현 장치에서 저장부(106)에 저장된 템플릿 유형을 나타낸 실시예이다.
도 2(a)는 일반 4개의 사용자 인터페이스가 순차적으로 위치하는 디자인을 갖는 템플릿 유형이고, 도 2(b)는 왼쪽메뉴가 포함된 4개의 사용자 인터페이스가 위치하는 디자인을 갖는 템플릿 유형이다. 또한, 도 2(c)는 하나의 사용자 인터페이스 내부에 와이드형 사용자 인터페이스가 추가된 4개의 사용자 인터페이스가 위치하는 디자인을 갖는 템플릿 유형이고, 도 2(d)는 하나의 사용자 인터페이스가 분리된 사용자 인터페이스가 추가된 4개의 사용자 인터페이스가 위치하는 디자인을 갖는 템플릿 유형이다.
템플릿 유형 선택부(101)는 사용자가 사이트 디자인을 쉽게 하기 위해 제공되는 인터페이스로 템플릿 유형을 제공한다. 이에 따라, 사용자는 디자인 편집모드를 실행하기 전에 원하는 템플릿 유형을 선택하고 디자인을 선택할 수 있다.
레이아웃 설정부(102)는 템플릿 유형 선택부(101)에서 생성된 각각의 사용자 인터페이스 내부에 위젯이 추가되는 적어도 하나 이상의 레이아웃을 설정한다. 이때 설정되는 레이아웃은 위젯이 설정될 공간이다.
도 3 은 본 발명의 반응형 웹 구현 장치에서 사용자 인터페이스 내부에 레이아웃을 추가하는 것을 나타낸 실시예이다.
도 3에서 도시하고 있는 것과 같이, 템플릿 유형 선택부(101)에서 생성된 복수개의 사용자 인터페이스 중 하나를 선택하면, 레이아웃 추가를 위한 레이아웃 선택창이 팝업 된다.
레이아웃 선택창에는 레이아웃이 하나인 1단, 레이아웃이 1:1의 비율 또는 1:2의 비율로 각각 2개로 나누어지는 2단, 레이아웃이 1:1:1의 비율 또는 2:1:1의 비율로 각각 3개로 나누어지는 3단, 레이아웃이 4단인 4단 중 하나의 레이아웃 설정정보를 선택하는 제1 선택창(110)과, 제1 선택창(110)에서 선택된 레이아웃 설정정보를 미리보기로 표시하는 표시창(120)과, 제1 선택창(110)에서 선택된 레이아웃 설정정보로 선택된 사용자 인터페이스에 레이아웃을 추가하기 위해 “추가하기” 선택버튼을 선택하는 제2 선택창(120)을 포함한다.
위젯 디자인 선택부(103)는 레이아웃 설정부(102)에서 설정된 각각의 레이아웃에 추가되는 위젯의 디자인을 선택한다.
도 4 는 본 발명의 반응형 웹 구현 장치에서 레이아웃에 추가되는 위젯의 디자인을 나타낸 실시예이다.
도 4에서 도시하고 있는 것과 같이, 일반게시판, 이미지게시판, 배너, 롤링이미지, 퀵메뉴, 기타 별로 미리 설정된 위젯 디자인(140a~104c)을 검색하고, 설정된 레이아웃을 선택한 후, 검색된 다수의 위젯 디자인(140a~104c) 중 하나를 선택하여 선택된 레이아웃에 추가될 위젯의 디자인으로 선택한다.
이렇게 선택된 위젯 디자인이 모여 하나의 템플릿이 되는 구조로, 모든 위젯 디자인은 어느 템플릿이든 선택될 수 있다. 이에 따라, 사용자는 저장부(106)에 미리 저장되어 있는 다양한 콘텐츠를 위젯 디자인에 접목시킬 수 있다. 그리고 모든 위젯 디자인은 반응형 웹 구조로 코딩되어 있으며, 이는 전문지식이 없는 사용자가 원하는 위젯 디자인을 선택하는 것만으로도 반응형 웹을 구현할 수 있다.
위젯 선택부(104)는 레이아웃 설정부(102)에서 설정된 레이아웃에 추가되는 위젯을 선택한다. 이때, 선택된 위젯은 위젯 디자인 선택부(103)에서 선택된 위젯 디자인으로 표시되게 된다.
위젯 설정부(105)는 위젯 디자인 선택부(103)에서 선택된 위젯 디자인으로 복수의 사용자 인터페이스에 표시된 위젯을 포함하는 템플릿을 저장하고, 미리보기 기능을 통해 선택된 위젯, 위젯 디자인 및 템플릿 유형의 변경 등을 통해 최종 템플릿을 완성하여, 사이트에 적용한다.
위젯 설정부(105)는 현재 디자인한 템플릿을 저장하는 기능으로, 실제로 일반 사이트에 반영은 안된다. 그리고 위젯 설정부(105)는 사용자가 위젯 선택부(104)를 통하여 템플릿을 생성한 시점부터 편집할 수 있는 기능을 제공한다. 이때, 위젯 설정부(105)는 저장 기능을 사용하여 저장되거나, 적용하기 실행 시 이전 템플릿 디자인이 백업 내역을 확인하고 백업된 시점의 템플릿 디자인을 불러와서 편집할 수 있다.
사용자는 위젯 설정부(105)를 통해 템플릿 디자인이 사이트에 적용되기 전에 미리보기 기능을 통하여 실제로 사이트가 어떻게 디자인 되었는지 확인할 수 있다. 그리고 위젯 설정부(105)는 다자인 변경을 위한 가이드 라인을 제공할 수 있다. 이때, 제공되는 가이드 라인은 헤더/풋터/서브메뉴 디자인을 변경하는 기능으로 콘텐츠 추가 기능과 유사한다. 이는 위젯 추가 및 여백을 주기 위한 기능으로 반응형 웹 구조 중 가장 중요한 레이아웃을 추가하는 기능이다.
도 5 는 본 발명의 반응형 웹 구현 장치에서 위젯 설정 변경을 위한 메뉴를 나타낸 실시예이다.
도 5에서 도시하고 있는 것과 같이, 다양한 디자인 변화를 위해 각 위젯은 디자인 변경 가능한 메뉴(150a)(150b)를 포함한다. 이때, 각 위젯마다 디자인을 변경할 수 있는 요소가 다르며 그 요소들을 컨트롤하기 위한 메뉴 또한 다르다. 예로서, 메뉴(150a)(150b)에는 슬라이더 추가, 슬라이더 삭제, 이미지 변경, 효과변경, 제목변경, 제목색상 변경, 내용변경, 내용색상 변경, 바로가기 색상변경, 바로가기 문구변경, 바로가기 변경, 배경색 변경 등을 포함할 수 있다.
실시예로서, 사용자는 각 위젯에서 디자인 변경을 위한 위치에서 마우스 우클릭을 하면 도 5에서 도시하고 있는 것과 같은 메뉴(150a)(150b)가 화면에 표시된다. 화면에 표시되는 메뉴(150a)(150b)를 통해, 전문지식이 없는 사용자가 반응형 웹 디자인의 다양한 디자인 변경이 가능하다.
한편, 상기 반응형 웹 처리부(200)는 템플릿 구현부(100)에서 생성된 템플릿이 구현되는 기기 및 기기의 화면 해상도 크기를 감지하고, 감지된 화면 해상도 크기에 대응되어 생성된 템플릿에 포함되는 복수의 콘텐츠 중 일부 콘텐츠만 선택되어 하나의 템플릿으로 적용된다.
이때, 반응형 웹 처리부(200)는 기기 감지부(201), 콘텐츠 최적화부(202), 기기특성 처리부(203)를 포함한다.
기기 감지부(201)는 미디어쿼리를 사용하여 기기의 화면 해상도 크기를 감지한다.
그리고 콘텐츠 최적화부(202)는 템플릿 구현부(100)에서 생성된 템플릿에 포함된 모든 콘텐츠를 다운로드한 후, 기기 감지부(201)에서 감지된 기기의 해상도 크기에 대응되는 일부 콘텐츠를 선택한다.
또한, 기기특성 처리부(203)는 콘텐츠 최적화부(202)에서 선택된 일부 콘텐츠를 포함하는 하나의 템플릿이 기기에 적용되어 동일한 사이트 동작으로 적용될 수 있다.
이와 같이 구성된 본 발명에 따른 템플릿을 이용한 반응형 웹 구현 장치의 동작을 첨부한 도면을 참조하여 상세히 설명하면 다음과 같다. 도 1 내지 도 5와 동일한 참조부호는 동일한 기능을 수행하는 동일한 부재를 지칭한다.
도 6 은 본 발명의 실시예에 따른 템플릿을 이용한 반응형 웹 구현 방법을 설명하기 위한 흐름도이다.
도 6을 참조하여 설명하면, 먼저 템플릿 구현부(100)는 템플릿 유형 선택부(101)를 통해 화면에 저장부(106)에 미리 저장되어 있는 사용자 인터페이스 형태 및 디자인을 갖는 템플릿 유형을 표시하고, 사용자에 의해 선택되는 템플릿 유형이 선택된다(S100).
이때, 표시되는 템플릿 유형은 도 2에서 도시하고 있는 것과 같이, 적어도 하나 이상의 사용자 인터페이스를 포함하고, 다양한 형태로 사용자 인터페이스가 위치되어 디자인될 수 있다.
이어, 템플릿 구현부(100)는 레이아웃 설정부(102)를 통해 상기 선택된 템플릿 유형에 포함되는 각 사용자 인터페이스 내부에 위젯이 추가되는 적어도 하나 이상의 레이아웃이 설정된다(S200).
이때 설정되는 레이아웃은 위젯이 설정될 공간으로, 도 3에서 도시하고 있는 것과 같이, 레이아웃 설정정보를 선택하기 위한 제1 선택창(110)이 제공되고, 제공되는 제1 선택창(110) 중 어느 하나가 선택되게 된다.
다음으로, 템플릿 구현부(100)는 위젯 디자인 선택부(103)를 통해 설정된 각각의 레이아웃에 추가되는 위젯의 디자인이 선택된다(S300).
이때 선택되는 위젯의 디자인은 도 4에서 도시하고 있는 것과 같이, 일반게시판, 이미지게시판, 배너, 롤링이미지, 퀵메뉴, 기타 별로 미리 설정된 위젯 디자인(140a~104c) 중 하나가 선택되어 위젯의 디자인으로 선택된다.
이렇게 선택된 위젯 디자인이 모여 하나의 템플릿이 되는 구조로, 모든 위젯 디자인은 어느 템플릿이든 선택될 수 있다. 이에 따라, 사용자는 저장부(106)에 미리 저장되어 있는 다양한 콘텐츠를 위젯 디자인에 접목시킬 수 있다. 그리고 모든 위젯 디자인은 반응형 웹 구조로 코딩되어 있으며, 이는 전문지식이 없는 사용자가 원하는 위젯 디자인을 선택하는 것만으로도 반응형 웹을 구현할 수 있다.
이어서, 템플릿 구현부(100)는 위젯 선택부(104)를 통해 설정된 레이아웃에 추가되는 위젯을 선택한다(S400). 이때, 선택된 위젯은 위젯 디자인 선택부(103)에서 선택된 위젯 디자인으로 표시되게 된다.
그리고 템플릿 구현부(100)는 위젯 설정부(105)를 통해 선택된 위젯 디자인으로 복수의 사용자 인터페이스에 표시된 위젯을 포함하는 템플릿을 저장하고, 미리보기 기능을 통해 선택된 위젯, 위젯 디자인 및 템플릿 유형의 변경 등을 통해 최종 템플릿을 완성하여, 사이트에 적용한다(S500).
즉, 위젯 설정부(105)는 사용자가 위젯 선택부(104)를 통하여 도 5에서 도시하고 있는 것과 같이, 템플릿을 생성한 시점부터 편집할 수 있는 기능을 포함하는 메뉴(150a)(150b)를 제공한다. 예로서, 메뉴(150a)(150b)에는 슬라이더 추가, 슬라이더 삭제, 이미지 변경, 효과변경, 제목변경, 제목색상 변경, 내용변경, 내용색상 변경, 바로가기 색상변경, 바로가기 문구변경, 바로가기 변경, 배경색 변경 등을 포함할 수 있다.
그리고 템플릿은 저장 기능을 사용하여 저장되거나, 적용하기 실행 시 이전 템플릿 디자인이 백업 내역을 확인하고 백업된 시점의 템플릿 디자인을 불러와서 편집할 수 있게 된다.
실시예로서, 사용자는 각 위젯에서 디자인 변경을위한 위치에서 마우스 우클릭을 하면 도 5에서 도시하고 있는 것과 같은 메뉴(150a)(150b)가 화면에 표시된다. 화면에 표시되는 메뉴(150a)(150b)를 통해, 전문지식이 없는 사용자가 반응형 웹 디자인의 다양한 디자인 변경이 가능하다.
이에 따라, 사용자는 위젯 디자인 설정부(103)를 통해 템플릿 디자인이 사이트에 적용되기 전에 미리보기 기능을 통하여 실제로 사이트가 어떻게 디자인 되었는지 확인할 수 있다. 그리고 다자인 변경을 위한 가이드 라인을 제공받을 수 있다. 이때, 제공되는 가이드 라인은 헤더/풋터/서브페이지 디자인을 변경하는 기능으로 콘텐츠 추가 기능과 유사한다. 이는 위젯 추가 및 여백을 주기 위한 기능으로 반응형 웹 구조 중 가장 중요한 레이아웃을 추가하는 기능이다.
이어서, 반응형 웹 처리부(200)는 템플릿 구현부(100)에서 생성된 템플릿이 구현되는 기기 및 기기의 화면 해상도 크기를 감지하고, 감지된 화면 해상도 크기에 대응되어 생성된 템플릿에 포함되는 복수의 콘텐츠 중 일부 콘텐츠만 선택되어 하나의 템플릿으로 적용된다(S600).
이때, 하나의 템플릿으로 적용되는 과정을 좀 더 상세히 설명하면, 다음과 같다.
도 7 은 도 6에서 최종 템플릿을 적용하는 과정을 상세히 나타낸 흐름도이다.
도 7을 참조하여 설명하면, 먼저 반응형 웹 처리부(200)는 기기 감지부(201)를 통해, 미디어쿼리를 사용하여 기기의 화면 해상도 크기를 감지한다(S610).
이어서, 반응형 웹 처리부(200)는 콘텐츠 최적화부(202)를 통해, 템플릿 구현부(100)에서 생성된 템플릿에 포함된 모든 콘텐츠를 다운로드한 후, 기기 감지부(201)에서 감지된 기기의 해상도 크기에 대응되는 일부 콘텐츠를 선택한다(S620).
그리고 반응형 웹 처리부(200)는 기기특성 처리부(203)를 통해 콘텐츠 최적화부(202)에서 선택된 일부 콘텐츠를 포함하는 하나의 템플릿이 기기에 적용되어 동일한 사이트 동작으로 적용시킨다(S630). 즉, 반응형 웹 사이트이므로 어느 기기에서든 하나의 사이트 주소를 이용할 수 있다.
이에 따라, 적용된 하나의 템플릿은 기기의 화면 크기나 해상도에 구애 받지 않는다. 즉, 데스크톱 PC나 스마트폰 뿐만 아니라, 스마트 TV, 게임 콘솔 등 웹 브라우저가 포함된 기기라면 어떤 기기에서나 화면 크기와 해상도에 상관없이 가장 알맞은 웹사이트 레이아웃을 보여준다.
또한, 모바일 기기에 화면 방향을 가로나 세로로 돌리더라도 즉시 그 방향에 맞게 사이트 내용이 배치되며, 데스크톱 PC 또한 브라우저 창의 크기를 바꿔도 너비에 맞춰 자동으로 바뀐다.
이상과 같이 본 발명에 대해서 예시한 도면을 참조로 하여 설명하였으나, 본 명세서에 개시된 실시 예와 도면에 의해 본 발명이 한정되는 것은 아니며, 본 발명의 기술사상의 범위 내에서 통상의 기술자에 의해 다양한 변형이 이루어질 수 있음은 자명하다. 아울러 앞서 본 발명의 실시 예를 설명하면서 본 발명의 구성에 따른 작용 효과를 명시적으로 기재하여 설명하지 않았을 지라도, 해당 구성에 의해 예측 가능한 효과 또한 인정되어야 함은 당연하다.
100: 템플릿 구현부 101: 템플릿 유형 선택부
102: 레이아웃 설정부 103: 위젯 디자인 선택부
104: 위젯 선택부 105: 위젯 설정부
106: 저장부 200: 반응형 웹 처리부
201: 기기 감지부 202: 콘텐츠 최적화부
203: 기기 특성 처리부

Claims (9)

  1. 디자인 편집모드를 제공하여 템플릿 유형, 레이아웃, 콘텐츠(또는 위젯)를 추가하여 템플릿을 생성하는 템플릿 구현부; 및
    상기 템플릿 구현부에서 상기 생성된 템플릿이 구현되는 기기 및 기기의 화면 해상도 크기를 감지하고, 감지된 화면 해상도 크기에 대응되어 상기 생성된 템플릿에 포함되는 복수의 콘텐츠 중 일부 콘텐츠가 선택되어 하나의 템플릿으로 적용되는 반응형 웹 처리부를 포함하는 템플릿을 이용한 반응형 웹 구현 장치.
  2. 제1 항에 있어서,
    상기 템플릿 구현부는
    저장부에 미리 저장되어 있는 사용자 인터페이스 형태 및 디자인을 갖는 템플릿 유형 중 하나의 템플릿 유형이 선택되는 템플릿 유형 선택부;
    상기 템플릿 유형 선택부에서 생성된 사용자 인터페이스 내부에 위젯이 추가되는 적어도 하나 이상의 레이아웃을 설정하는 레이아웃 설정부;
    상기 레이아웃 설정부에서 설정된 각각의 레이아웃에 추가되는 위젯의 디자인이 선택되는 위젯 디자인 선택부;
    상기 레이아웃 설정부에서 설정된 레이아웃에 추가되는 위젯이 선택되는 위젯 선택부; 및
    상기 위젯 디자인 선택부에서 선택된 위젯 디자인으로 복수의 사용자 인터페이스에 표시된 위젯을 포함하는 템플릿을 저장하고, 미리보기 기능을 통해 선택된 위젯, 위젯 디자인 및 템플릿 유형의 변경을 통해 최종 템플릿을 완성하는 위젯 설정부를 포함하는 템플릿을 이용한 반응형 웹 구현 장치.
  3. 제2 항에 있어서,
    상기 위젯 설정부는 다자인 변경을 위한 가이드 라인을 제공하며,
    상기 가이드 라인은 헤더/부터/서브메뉴 디자인을 변경하는 기능, 위젯 추가 및 여백을 주기 위한 기능을 포함하는 템플릿을 이용한 반응형 웹 구현 장치.
  4. 제2 항에 있어서,
    상기 위젯 설정부는 다양한 디자인 변화를 위해 각 위젯의 디자인 변경을 위한 메뉴를 포함하고,
    상기 메뉴는 슬라이더 추가, 슬라이더 삭제, 이미지 변경, 효과변경, 제목변경, 제목색상 변경, 내용변경, 내용색상 변경, 바로가기 색상변경, 바로가기 문구변경, 바로가기 변경, 배경색 변경 중 적어도 하나 이상을 포함하는 템플릿을 이용한 반응형 웹 구현 장치.
  5. 제1 항에 있어서,
    상기 반응형 웹 처리부는
    미디어쿼리를 사용하여 기기의 화면 해상도 크기를 감지하는 기기 감지부;
    상기 템플릿 구현부에서 생성된 템플릿에 포함된 모든 콘텐츠를 다운로드한 후, 상기 기기 감지부에서 감지된 기기의 해상도 크기에 대응되는 일부 콘텐츠를 선택하는 콘텐츠 최적화부; 및
    상기 콘텐츠 최적화부에서 선택된 일부 콘텐츠를 포함하는 하나의 템플릿이 기기에 적용하는 기기특성 처리부를 포함하는 템플릿을 이용한 반응형 웹 구현 장치.
  6. (A) 템플릿 유형 선택부를 통해 미리 저장되어 있는 사용자 인터페이스 형태 및 디자인을 갖는 템플릿 유형 중 어느 하나의 템플린 유형이 선택되는 단계;
    (B) 레이아웃 설정부를 통해 상기 선택된 템플릿 유형에 포함되는 각 사용자 인터페이스 내부에 위젯이 추가되는 적어도 하나 이상의 레이아웃이 설정되는 단계;
    (C) 위젯 디자인 선택부를 통해 상기 설정된 각각의 레이아웃에 추가되는 위젯의 디자인이 선택되는 단계;
    (D) 위젯 선택부를 통해 설정된 레이아웃에 추가되는 위젯을 선택하는 단계;
    (E) 위젯 설정부를 통해 상기 선택된 위젯 디자인으로 복수의 사용자 인터페이스에 표시된 위젯을 포함하는 템플릿을 저장하고, 미리보기 기능을 통해 선택된 위젯, 위젯 디자인 및 템플릿 유형을 변경하여 최종 템플릿을 완성하는 단계;
    (F) 반응형 웹 처리부를 통해 상기 최종 템플릿이 구현되는 기기 및 기기의 화면 해상도 크기를 감지하고, 감지된 화면 해상도 크기에 대응되어 상기 최종 템플릿에 포함되는 복수의 콘텐츠 중 일부 콘텐츠만 선택되어 하나의 템플릿으로 적용하는 단계를 포함하는 템플릿을 이용한 반응형 웹 구현 방법.
  7. 제6 항에 있어서,
    상기 (C) 단계는 일반게시판, 이미지게시판, 배너, 롤링이미지, 퀵메뉴, 기타 별로 미리 설정된 위젯 디자인 중 하나가 선택되어 위젯의 디자인으로 선택되는 템플릿을 이용한 반응형 웹 구현 방법.
  8. 제6 항에 있어서,
    상기 (E) 단계는
    템플릿을 생성한 시점부터 편집할 수 있는 기능을 포함하는 메뉴를 제공하는 단계; 및
    상기 메뉴에 포함되는 슬라이더 추가, 슬라이더 삭제, 이미지 변경, 효과변경, 제목변경, 제목색상 변경, 내용변경, 내용색상 변경, 바로가기 색상변경, 바로가기 문구변경, 바로가기 변경, 배경색 변경을 이용하여 선택된 위젯, 위젯 디자인 및 템플릿 유형을 변경하는 단계를 포함하는 템플릿을 이용한 반응형 웹 구현 방법.
  9. 제6 항에 있어서,
    상기 (F) 단계는
    기기 감지부를 통해, 미디어쿼리를 사용하여 기기의 화면 해상도 크기를 감지하는 단계;
    콘텐츠 최적화부를 통해, 상기 최종 템플릿에 포함된 모든 콘텐츠를 다운로드한 후, 상기 기기 감지부에서 감지된 기기의 해상도 크기에 대응되는 일부 콘텐츠를 선택하는 단계; 및
    기기특성 처리부를 통해 상기 선택된 일부 콘텐츠를 포함하는 하나의 템플릿이 기기에 적용하는 단계를 포함하는 템플릿을 이용한 반응형 웹 구현 방법.
KR1020190004802A 2019-01-14 2019-01-14 템플릿을 이용한 반응형 웹 구현 장치 및 방법 Ceased KR20200088152A (ko)

Priority Applications (1)

Application Number Priority Date Filing Date Title
KR1020190004802A KR20200088152A (ko) 2019-01-14 2019-01-14 템플릿을 이용한 반응형 웹 구현 장치 및 방법

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR1020190004802A KR20200088152A (ko) 2019-01-14 2019-01-14 템플릿을 이용한 반응형 웹 구현 장치 및 방법

Publications (1)

Publication Number Publication Date
KR20200088152A true KR20200088152A (ko) 2020-07-22

Family

ID=71893249

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020190004802A Ceased KR20200088152A (ko) 2019-01-14 2019-01-14 템플릿을 이용한 반응형 웹 구현 장치 및 방법

Country Status (1)

Country Link
KR (1) KR20200088152A (ko)

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20230137120A (ko) * 2022-03-21 2023-10-04 주식회사 가비아씨엔에스 웹사이트 모듈 기반 웹사이트 제작 시스템 및 그 방법
KR102608077B1 (ko) * 2022-10-05 2023-11-30 조영욱 다양한 해상도에 대응하는 ai 기반의 웹페이지 제작 서비스 제공 방법 및 그 전자장치
WO2023229087A1 (ko) * 2022-05-27 2023-11-30 쿠팡 주식회사 위젯을 편집하기 위한 방법 및 전자 장치
US12124820B1 (en) 2023-05-12 2024-10-22 Inswave Systems Co., Ltd. Grid layout setting method for multi device responsive page and computer-readable medium for performing the same

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20230137120A (ko) * 2022-03-21 2023-10-04 주식회사 가비아씨엔에스 웹사이트 모듈 기반 웹사이트 제작 시스템 및 그 방법
WO2023229087A1 (ko) * 2022-05-27 2023-11-30 쿠팡 주식회사 위젯을 편집하기 위한 방법 및 전자 장치
KR20230165506A (ko) * 2022-05-27 2023-12-05 쿠팡 주식회사 위젯을 편집하기 위한 방법 및 전자 장치
KR102608077B1 (ko) * 2022-10-05 2023-11-30 조영욱 다양한 해상도에 대응하는 ai 기반의 웹페이지 제작 서비스 제공 방법 및 그 전자장치
US12124820B1 (en) 2023-05-12 2024-10-22 Inswave Systems Co., Ltd. Grid layout setting method for multi device responsive page and computer-readable medium for performing the same

Similar Documents

Publication Publication Date Title
CN101192129B (zh) 一种控制桌面背景的方法及装置
US8112723B2 (en) Previewing next state based on potential action in current state
US7024658B1 (en) Extensible help facility for a computer software application
KR101606941B1 (ko) 존-연관된 객체들
US8438498B2 (en) Managing user interface control panels
US20140380229A1 (en) System, method and user interface for designing customizable products from a mobile device
US7549130B2 (en) Pattern-based keyboard controls
CN101004755A (zh) 用于提供文件搜索的用户界面的装置和方法
US20180059919A1 (en) Responsive Design Controls
KR20200088152A (ko) 템플릿을 이용한 반응형 웹 구현 장치 및 방법
JPH0869524A (ja) ディジタルフォイルの経路を選定する方法、表示システム及び経路選定装置
CN111679818A (zh) 编辑展示软件的方法和系统
US20150234840A1 (en) Browser-Based Designer Tool For A User Interface And The Administration Of Tiles
KR100968180B1 (ko) 사라지는 개체의 동적 구현 장치 및 방법
EP2116925B1 (en) Method, system, program for assisting object selection when web page is authored
US8719416B1 (en) Multiple subparts of a uniform resource locator
US7640505B1 (en) Element view toggling
US20140250362A1 (en) Automatic content expansion indicators
CN101576886B (zh) 信息的显示方法、系统与装置
KR20230080034A (ko) 모바일 환경에서 웹 페이지를 편집하는 컴퓨팅 장치 및 그 방법
KR100577611B1 (ko) 멀티미디어 저작방법
CN107423031B (zh) 一种编辑对象定位显示方法及装置
KR20010044214A (ko) 네비게이션 바를 이용한 사용자 인터페이싱 방법
JP2012059061A (ja) データ処理装置、データ処理方法及びプログラム
Pratt et al. Adobe GoLive CS Tips and Tricks: The 200 Best

Legal Events

Date Code Title Description
PA0109 Patent application

Patent event code: PA01091R01D

Comment text: Patent Application

Patent event date: 20190114

PA0201 Request for examination
PE0902 Notice of grounds for rejection

Comment text: Notification of reason for refusal

Patent event date: 20200424

Patent event code: PE09021S01D

PG1501 Laying open of application
E601 Decision to refuse application
PE0601 Decision on rejection of patent

Patent event date: 20201029

Comment text: Decision to Refuse Application

Patent event code: PE06012S01D

Patent event date: 20200424

Comment text: Notification of reason for refusal

Patent event code: PE06011S01I