KR101546725B1 - 반응형 레이아웃 설계 방법 - Google Patents

반응형 레이아웃 설계 방법 Download PDF

Info

Publication number
KR101546725B1
KR101546725B1 KR1020150011996A KR20150011996A KR101546725B1 KR 101546725 B1 KR101546725 B1 KR 101546725B1 KR 1020150011996 A KR1020150011996 A KR 1020150011996A KR 20150011996 A KR20150011996 A KR 20150011996A KR 101546725 B1 KR101546725 B1 KR 101546725B1
Authority
KR
South Korea
Prior art keywords
layout
screen
design
component
device type
Prior art date
Application number
KR1020150011996A
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 KR1020150011996A priority Critical patent/KR101546725B1/ko
Application granted granted Critical
Publication of KR101546725B1 publication Critical patent/KR101546725B1/ko

Links

Images

Classifications

    • G06F17/5009—
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0486—Drag-and-drop

Abstract

본 발명은 반응형 레이아웃 설계 방법에 관한 것으로서, 보다 상세하게는 WYSIWYG HTML5 저작도구에서 태블릿, 모바일 등 서로 다른 해상도를 가진 디바이스에 대해 반응형 웹을 제공하기 위하여 컨텐츠별 페이지 레이아웃 설계를 용이하게 변경할 수 있도록 하는 반응형 레이아웃 설계 방법에 관한 것이다.

Description

반응형 레이아웃 설계 방법{RESPONSIVE LAYOUTS DESIGN METHOD}
WYSIWYG HTML5 저작도구에서 태블릿, 모바일 등 서로 다른 해상도를 가진 디바이스에 대해 반응형 웹을 제공하기 위하여 컨텐츠별 페이지 레이아웃 설계를 용이하게 변경할 수 있는 반응형 레이아웃 설계 방법에 관한 것이다.
HTML5의 표준 웹 환경 확산과 다양한 모바일 기기가 보급되면서 하나의 사이트를 제작하더라도 데스크탑, 태블릿, 모바일 등 서로 다른 해상도를 가진 디바이스를 고려하지 않을 수 없게 되었다. 하지만, 디바이스 해상도별 사이트를 제작하는 것도 비용 및 유지보수 측면에서 어려운 상황이다.
N-Screen 시대로 불리는 다양한 디바이스의 해상도에 맞춰 사이트들의 레이아웃을 변환하는 이슈에 맞춰 등장한 것이 반응형 웹이다.
반응형 웹은 HTML5의 미디어 쿼리를 이용하여 하나의 소스로 제작된 컨텐츠가 다양한 디바이스에 맞추어 해상도나 화면이 동적으로 변환되는 기법을 의미한다.
반응형 웹을 적용하는 사이트가 지속적으로 증가하고 있으며, 특정 분야에 치중되지 않고 브랜드, SNS, 커뮤니티 등 다양한 분야에서 활용되고 있다.
또한, 홈페이지 개편 시 반응형 웹을 활용하여 다양해지는 디바이스 환경을 고려해서 제작되고 있는 실정이다.
이에, 반응형 웹 디자인을 위한 미디어 쿼리, 유동형 그리드, 유연한 이미지, 유동형 레이아웃에 대해 설명하면 하기와 같다.
반응형 웹 디자인은 데스크탑 모니터에서 모바일 폰까지 다양한 디바이스에 걸쳐 최적의 사용 환경을 제공하기 위한 정교한 사이트를 목표로 한 웹 디자인 접근 방법이다. 반응형 웹 디자인은 데스크탑 및 모바일 사용자 모두에게 직관적이고 만족스런 경험을 제공하는 것에 초점을 두고 있다.
미디어 쿼리(Media Query)는 CSS2부터 사용되었으며, 미디어 타입을 개선한 CSS3에서 본격적으로 쓰이기 시작한 웹 기법이다. 미디어 쿼리는 반응형 웹의 핵심 기법이며, 화면의 폭이나 높이 등의 정보를 가지고 스타일을 개별적으로 줄 수 있다.
미디어 쿼리 사용시 가로폭의 경계치를 보통 스크린 경계치(screen breakpoints)라고 부른다. 일반적으로 스마트폰, 태블릿, 데스크탑에 대해 최소한의 스크린 경계치를 고려해야 하며, 도 12와 같이 기기별로 주요 경계치와 세부 경계치를 보여주고 있다. 참고로 대표적인 mediaquri.es 에서는 320px(스마트폰), 768px(태블릿), 1024px(넷북), 1600px(데스크탑)로 경계치를 정하고 있다.
유동형 그리드(Fluid Grid)의 경우, 그리드는 화면의 폭을 몇개의 컬럼으로 나누고 상황에 따라 그 중 일부 컬럼들을 묶어서 사용하며, 컬럼들의 폭과 다른 컬럼과의 간격도 일정하게 유지되는 것을 의미한다. 대표적인 그리드 시스템으로는 960 그리드 시스템이 있으며, 12컬럼 그리드는 도 13과 같다. 유동형 그리드는 그리드의 폭을 고정값이 아닌 가로폭에 따라서 크기가 변하는 상대적 단위(% 또는 em)로 설정하는 것을 의미한다. 유동형 그리드는 모바일에서는 큰 효과를 볼 수 없기 때문에 미디어 쿼리를 이용하여 화면 크기에 따라서 그리드 시스템을 바꾸는 반응형 유동 그리드가 활용되고 있다.
유동형 이미지(유연한 이미지, Flexible Images)는 도 14에 도시된 바와 같이, 화면의 폭보다 큰 이미지를 다운받고 이미지의 스타일을 max-width를 100%, height를 auto로 설정하여, 이미지를 화면폭에 맞게 가로/세로 길이를 줄였다 늘였다 하는 것을 의미한다. 모바일에서 해상도가 높은 이미지를 단순히 크기만 줄여서 사용하는 것은 자원낭비의 문제점이 있어서 데스크탑과 모바일용 이미지를 선별적으로 사용하기도 한다.
유동형 레이아웃(Liquid Layout)은 도 15에 도시된 바와 같이, 레이아웃 크기를 유동형 그리드와 같이 상대적 단위(% 또는 em)로 지정하여 해상도 크기에 따라 유동적인 변화를 주는 것을 의미한다. 반응형 그리드와 같이 미디어 쿼리를 이용하여 일정 크기가 되면 레이아웃 구조를 바꾸어 주는 방법이다. LukeW가 제시한 5가지 레이아웃 패턴은 하기와 같다.
- Mostly Fluid : 일반적인 화면에서는 유동형 그리드와 유동형 이미지를 사용하여 레이아웃을 그대로 유지한다. 가장 작은 화면에서는 수직으로 컬럼을 세우는 구조를 가지며, 가장 많이 사용되는 패턴이다.
- Column Drop : 화면이 작아짐에 따라 부차적인 컬럼을 아래로 떨어트리는 방법을 쓰는 패턴이다. 대부분의 컬럼폭은 화면 크기가 달라져도 변함이 별도 없다는 특징이 있다.
- Layout Shifter : 다양한 디바이스에 따라 각기 다른 레이아웃을 보여주는 패턴이다. 복잡하고 많은 작업이 필요하지만 혁신적인 디자인을 담을 수 있다는 장점이 있다.
- Tiny Tweaks: 하나의 컬럼을 사용하는 패턴이다. 변화의 폭이 크지 않다는 특징이 있으며, 주로 글 내용을 중시하는 블로그에서 많이 사용되는 패턴이다.
- Off Canvas: 큰 화면에서는 모든 컬럼들을 보여주고 작은 화면에서는 하나의 메인 컬럼만 보여주며 다른 부가적인 컬럼들을 화면 밖에 숨겨놓는 패턴이다. 숨겨진 컬럼들은 필요할 때만 접근하도록 한다.
데스크탑, 태블릿, 모바일 등을 고려한 반응형 웹을 적용하기 위하여 사전에 컨텐츠별 페이지 레아아웃을 설계한다. 하지만 UI 구현 중에 빈번한 컨텐츠 추가, 수정, 삭제 등으로 인하여 컨텐츠별 페이지 레이아웃 변경이 발생된다. 이로 인한 컨텐츠별 페이지 레이아웃 재설계는 웹 페이지를 새로 작성 및 제작해야 하는 문제가 발생하게 된다.
대한민국 공개특허공보 10-2012-0129485호(2012.11.28.) 대한민국 공개특허공보 10-2006-0100491호(2006.09.21.)
본 발명은 상기와 같은 문제점을 해결하기 위해 안출된 것으로서, 본 발명의 목적은 WYSIWYG HTML5 저작도구에서 태블릿, 모바일 등 서로 다른 해상도를 가진 디바이스에 대해 반응형 웹을 제공하기 위하여 손쉽게 컨텐츠별 페이지 레이아웃 설계를 용이하게 변경할 수 있도록 하는 반응형 레아이웃 설계 방법을 제공하는데 있다.
본 발명의 다른 목적 및 장점들은 하기에 설명될 것이며, 본 발명의 실시예에 의해 알게 될 것이다. 또한, 본 발명의 목적 및 장점들은 특허청구범위에 나타낸 수단 및 조합에 의해 실현될 수 있다.
본 발명은 상기와 같은 문제점을 해결하기 위한 수단으로써, 본 발명의 반응형 레이아웃 설계 방법은, WYSIWYG HTML5 저작도구에서 Drag & Drop에 의한 UI 컴포넌트 추가 및 속성 편집이 가능한 화면 UI 설계단계(S100); UI 설계가 완료된 화면을 기준으로, 손쉽게 컨텐츠별 페이지 레이아웃 설계 및 변경이 가능한 반응형 레이아웃 설계단계(S200); 컨텐츠별 페이지 레이아웃의 사전설계기준으로, 디바이스 유형별 설계 화면이 생성되는 디바이스 유형별 설계 화면 생성단계(S300); 유형별 디바이스에 최적화된 화면을 위해, 크기 및 위치 조정, 텍스트의 편집이 가능한 디바이스 유형별 편집단계(S400); 디바이스 유형별로 설계한 내용이 사전설계된 형태로 표시되는지 확인가능한 실시간 검증 단계(S500); 를 포함하여 이루어지는 것을 특징으로 한다.
이상에서 살펴본 바와 같이, 본 발명에 의한 반응형 레이아웃 설계 방법에 따르면, 컨텐츠별 페이지 레이아웃 설계를 용이하게 변경할 수 있으므로 반응형 웹을 손쉽게 적용할 수 있을 뿐 아니라 데스크탑, 태블릿, 모바일 사용자 모두에게 직관적이고 만족스런 경험을 최대화할 수 있다.
도 1은 본 발명에 따른 반응형 레이아웃 설계 방법을 나타낸 일실시예의 설계 순서도.
도 2는 본 발명에 따른 화면 UI 설계 단계(S100)를 나타낸 일실시예의 화면.
도 3은 도 2의 화면 UI 설계단계(S100)를 상세히 설명한 일실시예의 설계 순서도.
도 4는 본 발명에 따른 반응형 레이아웃 설계 단계(S200)를 나타낸 일실시예의 화면.
도 5는 도 4의 반응형 레이아웃 설계 단계(S200)를 상세히 설명한 일실시예의 설계 순서도.
도 6은 본 발명에 따른 디바이스 유형별 설계 화면 생성단계(태블릿 화면 UI 설계 단계)(S300)를 나타낸 일실시예의 화면.
도 7은 본 발명에 따른 또 다른 디바이스 유형별 설계 화면 생성단계(모바일 화면 UI 설계 단계)(S300)를 나타낸 일실시예의 화면.
도 8은 도 6 및 도 7과 같은 디바이스 유형별 설계 화면 생성단계(S300)를 상세히 설명한 일실시예의 설계 순서도.
도 9는 본 발명에 따른 디바이스 유형별 편집단계(S400)를 상세히 설명한 일실시예의 설계 순서도.
도 10은 본 발명에 따른 실시간 검증 단계(S500)를 나나탠 일실시예의 화면.
도 11은 도 10의 실시간 검증 단계(S500)를 상세히 설명한 일실시예의 설계 순서도.
도 12는 기존의 미디어 쿼리 방식을 설명한 도면.
도 13은 기존의 유동형 그리드 방식을 설명한 도면.
도 14는 기존의 유연한 이미지 방식을 설명한 도면.
도 15는 기존의 유동형 레이아웃 방식을 설명한 도면.
본 발명의 여러 실시예들을 상세히 설명하기 전에, 다음의 상세한 설명에 기재되거나 도면에 도시된 구성요소들의 구성 및 배열들의 상세로 그 응용이 제한되는 것이 아니라는 것을 알 수 있을 것이다. 본 발명은 다른 실시예들로 구현되고 실시될 수 있고 다양한 방법으로 수행될 수 있다. 또, 장치 또는 요소 방향(예를 들어 "전(front)", "후(back)", "위(up)", "아래(down)", "상(top)", "하(bottom)", "좌(left)", "우(right)", "횡(lateral)")등과 같은 용어들에 관하여 본원에 사용된 표현 및 술어는 단지 본 발명의 설명을 단순화하기 위해 사용되고, 관련된 장치 또는 요소가 단순히 특정 방향을 가져야 함을 나타내거나 의미하지 않는다는 것을 알 수 있을 것이다. 또한, "제 1(first)", "제 2(second)"와 같은 용어는 설명을 위해 본원 및 첨부 청구항들에 사용되고 상대적인 중요성 또는 취지를 나타내거나 의미하는 것으로 의도되지 않는다.
본 발명은 상기의 목적을 달성하기 위해 아래의 특징을 갖는다.
이하 첨부된 도면을 참조로 본 발명의 바람직한 실시예를 상세히 설명하도록 한다. 이에 앞서, 본 명세서 및 청구범위에 사용된 용어나 단어는 통상적이거나 사전적인 의미로 한정해서 해석되어서는 아니 되며, 발명자는 그 자신의 발명을 가장 최선의 방법으로 설명하기 위해 용어의 개념을 적절하게 정의할 수 있다는 원칙에 입각하여 본 발명의 기술적 사상에 부합하는 의미와 개념으로 해석되어야만 한다.
따라서, 본 명세서에 기재된 실시예와 도면에 도시된 구성은 본 발명의 가장 바람직한 일 실시예에 불과할 뿐이고 본 발명의 기술적 사상을 모두 대변하는 것은 아니므로, 본 출원시점에 있어서 이들을 대체할 수 있는 다양한 균등물과 변형 예들이 있을 수 있음을 이해하여야 한다.
본 발명에 따른 일실시예를 살펴보면, WYSIWYG HTML5 저작도구에서 Drag & Drop에 의한 UI 컴포넌트 추가 및 속성 편집이 가능한 화면 UI 설계단계(S100); UI 설계가 완료된 화면을 기준으로, 손쉽게 컨텐츠별 페이지 레이아웃 설계 및 변경이 가능한 반응형 레이아웃 설계단계(S200); 컨텐츠별 페이지 레이아웃의 사전설계기준으로, 디바이스 유형별 설계 화면이 생성되는 디바이스 유형별 설계 화면 생성단계(S300); 유형별 디바이스에 최적화된 화면을 위해, 크기 및 위치 조정, 텍스트의 편집이 가능한 디바이스 유형별 편집단계(S400); 디바이스 유형별로 설계한 내용이 사전설계된 형태로 표시되는지 확인가능한 실시간 검증 단계(S500); 를 포함하여 이루어지는 것을 특징으로 한다.
또한, 상기 화면 UI 설계단계(S100)는 UI 컴포넌트를 Drag & Drop으로 설계 영역에 추가하는 컴포넌트 추가단계(S110); 추가한 UI 컴포넌트 위치, 크기, 숨김 및 표시여부를 제어하는 컴포넌트 제어단계(S120); 상기 각 UI 컴포넌트에 대한 스타일을 편집하는 스타일 편집단계(S130); 상기 각 UI 컴포넌트를 사용용도에 따라 속성을 편집하는 속성편집단계(S140); 상기 각 UI 컴포넌트에서 제공하는 이벤트 목록에 대해 사용자정의 이벤트를 설정하는 단계(S150); 를 포함하여 이루어지는 것을 특징으로 한다.
또한, 상기 반응형 레이아웃 설계단계(S200)는 컨텐츠별 페이지 레이아웃을 분할하는 페이지 레이아웃 분할단계(S210); 컨텐츠별 페이지 레이아웃의 크기조정 및 삭제유무가 결정되는 페이지 레이아웃 조정단계(S220); 컨텐츠별 페이지 레이아웃의 재설계 여부에 따라 초기화가 결정되는 페이지 레이아웃 초기화단계(S230); 를 포함하여 이루어지는 것을 특징으로 한다.
또한, 상기 디바이스 유형별 설계 화면 생성단계(S300)는 다수 컨텐츠별 페이지 레이아웃의 순번이 정해지는 페이지 레이아웃 순서지정단계(S310); 순번별로 다수 컨텐츠별 페이지 레이아웃의 좌표범위가 계산되는 페이지 레이아웃 범위계산단계(S320); 다수의 컴포넌트 각각이 포함될 레이아웃을 식별하는 컴포넌트별 레이아웃 식별단계(S330); 사전설정된 디바이스 유형별 크기를 기준으로, 순번별로 레이아웃과 컴포넌트가 재배치되어, 각 디바이스 유형별 설계화면이 생성되는 디바이스 유형별 설계화면 생성단계(S340); 를 포함하여 이루어지는 것을 특징으로 한다.
또한, 상기 디바이스 유형별 편집단계(S400)는 사전설정된 디바이스 유형별 화면을 고려하여, 컴포넌트별 크기 및 위치변경, 레이아웃 크기 변경이 가능한 크기 및 위치조정단계(S410); 사전설정된 디바이스 유형별 화면을 고려하여, 각 컴포넌트의 Box 스타일, Text 스타일, Background 스타일을 편집하는 스타일 편집단계(S420); 사전설정된 디바이스 유형별 화면을 고려하여, 각 컴포넌트와 레이아웃의 숨김 및 표시여부가 설정되는 숨김과 표시여부 설정단계(S430);를 포함하여 이루어지는 것을 특징으로 한다.
또한, 컨텐츠 추가, 수정, 삭제 등으로 인하여 컨텐츠별 페이지 레이아웃 변경이 필요한 경우, S200 ~ S500 단계가 반복적으로 이루어지면서, 컨텐츠별 페이지 레이아웃 수정이 자유롭게 시행되는 것을 특징으로 한다.
이하, 도 1 내지 도 15를 참조하여 바람직한 실시예에 따른 반응형 레이아웃 설계 방법을 상세히 설명하도록 한다.
도시한 바와 같이, 본 발명에 따른 반응형 레이아웃 설계 방법은 하기와 같은 S100 내지 S500까지의 단계를 포함한다.
웹페이지 제작시, 데스크탑, 태블릿, 모바일 등을 고려한 컨텐츠별 페이지 레이아웃 설계가 가장 이상적인 반응형 레이아웃 설계방법이다.
하지만, UI(User Interface) 구현 중에 설계된 페이지 레이아웃과 관련하여 분할, 추가, 병합 등이 빈번하게 발생되며, 이로 인해 페이지 레이아웃을 재설계하는 등의 경우가 빈번하게 발생하게 된다.
본 발명에서는 WYSIWYG HTML5 저작도구에서 반응형 레이아웃 설계시 하기와 같은 사항을 우선 고려하였다.
① 데스크탑, 태블릿, 모바일 사용자에게 직관적이고 만족스런 경험을 제공해야 한다.
② 컨텐츠별 페이지 레이아웃 설계를 자유롭게 변경할 수 있어야 한다.
③ 고정된 레이아웃 패턴 제공보다는 유동적으로 반응가능한 레이아웃 패턴을 고려해야 한다,
④ 데스크탑, 태블릿, 모바일에 대해 최소한의 스크린 경계치를 선정해야 한다.
⑤ 레이아웃별 숨김 처리 및 사이즈 조정을 고려해야 한다.
⑥ 레이아웃 내에서 컴포넌트 순서를 자유롭게 배치할 수 있어야 한다.
⑦ 핵심이 되는 컨텐츠를 선별적으로 선택할 수 있어야 한다.
상기 ① 내지 ⑦의 고려사항들은 후술될 반응형 레이아웃 설계단계(S200), 디바이스 유형별 설계화면 생성(S300), 디바이스 유형별 편집(S400)과 관련되는 것이다.
이하에서는 도 1에 도시된 바와 같이, 화면 UI 설계단계(S100), 반응형 레이아웃 설계단계(S200), 디바이스 유형별 설계 화면 생성단계(S300), 디바이스 유형별 편집단계(S400), 실시간 검증 단계(S500)로 이루어지는, 본 발명에 따른 반응형 레이아웃 설계 방법을 설명하도록 한다.
도 2는 본 발명에 따른 화면 UI 설계 단계를 나타낸 것으로, WYSIWYG HTML5 저작도구에서 Drag & Drop에 의한 UI 컴포넌트 추가 및 속성 편집이 가능한 화면 UI 설계단계(S100)를 나타내는 것이다.
이러한 설계영역에 UI 컴포넌트를 자유롭게 추가 및 이동이 가능하며, 컴포넌트별 크기 조정 및 스타일 속성을 지정할 수 있다. 본 발명에서의 이러한 기능은 별도의 HTML5 및 CSS 코딩없이 직관적인 WYSIWYG 기반으로 제공된다.
즉 S100단계에서는 직관적인 WYSIWYG 기반으로 화면 UI를 설계하는 단계이며, 이러한 단계에서 사용자는 사용자가 사전계획 및 설정한 웹페이지에 개재될 컨텐츠를 구성하게 된다.
도 3은 화면 UI 설계단계(S100)를 상세히 설명한 일실시예의 설계 순서도로써, 이러한 화면 UI 설계단계(S100)는 컴포넌트 추가(S110), 컴포넌트 제어(S120), 스타일 편집(S130), 속성 편집(S140), 이벤트 설정의 단계(S150)를 포함한다.
상기 컴포넌트 추가단계(S110)를 설명하면, WYSIWYG HTML5 저작도구에서는 40개 이상의 컴포넌트를 제공하고 있으며, 컴포넌트 특성에 따라 하기의 표 1과 같이 6개의 카테고리로 구분하고 있다. 사용자는 컴포넌트 리스트에서 추가할 컴포넌트를 선택한 후 설계영역으로 Drag & Drop하여 컴포넌트를 추가하는 것이다.
카테고리 컴포넌트명
Form Button, Calendar, CheckBox, ComboBox, EditBox, File, MaskedEdit, RadioBox, SearchBox, SelectBox, Spin, Text, Textarea
Information Address, Article, Breadcrumb, Contact Us, Copyright, D-day, Heading, Latest News, List, Logo, Popup, ProgressBar, Social Link, Clock
Navigator Expander, Flicking, Global Menu, MenuBar, Tab
Layout Div, Group, Hr
Data Grid, Tree, TreeGrid
Multi Media Audio, Canvas, Image, Image Gallery, Image Slider, Video, Video Gallery
<컴포넌트 특성에 따른 카테고리 분류>
상기의 컴포넌트를 상세히 설명하면 하기와 같다.
- Form 컴포넌트
컴포넌트명 설명
Figure 112015007978898-pat00001
 마우스 클릭을 통해 스크립트를 수행하기 위해 사용되는 일반적인 컴포넌트
Figure 112015007978898-pat00002
 달력을 표시하여 날짜를 입력받기 위한 컴포넌트
Figure 112015007978898-pat00003
 각 항목에 선택할 수 있는 버튼이 있으며 다중 항목을 선택할 수 있는 컴포넌트
Figure 112015007978898-pat00004
 여러 항목을 드롭 다운 목록으로 표시하며 하나의 항목을 선택할 수 있는 컴포넌트
Figure 112015007978898-pat00005
 문자열을 입력받기 위한 컴포넌트
Figure 112015007978898-pat00006
 파일탐색기를 통해 파일을 선택할 수 있는 컴포넌트
Figure 112015007978898-pat00007
 입력 받을 문자열의 형식을 지정하는 컴포넌트
Figure 112015007978898-pat00008
 각 항목에 선택할 수 있는 버튼이 있으며 단일 항목을 선택할 수 있는 컴포넌트
Figure 112015007978898-pat00009
 검색 기능을 제공하는 컴포넌트
Figure 112015007978898-pat00010
 여러 항목을 리스트 목록으로 표시하며 다중 항목을 선택할 수 있는 컴포넌트
Figure 112015007978898-pat00011
 일정 범위 내에서 숫자 값을 입력받기 위한 컴포넌트
Figure 112015007978898-pat00012
 문자열을 표시하는 컴포넌트
Figure 112015007978898-pat00013
 여러 줄의 텍스트를 입력받기 위한 컴포넌트
- Information 컴포넌트
컴포넌트명 설명
Figure 112015007978898-pat00014
 위경도 정보를 이용하여 해당 위치를 지도에 표시하는 컴포넌트
Figure 112015007978898-pat00015
 기사 관련 정보를 표시하는 컴포넌트
Figure 112015007978898-pat00016
 페이지 위치 정보를 표시하는 컴포넌트
Figure 112015007978898-pat00017
 연락처 관련 정보를 표시하는 컴포넌트
Figure 112015007978898-pat00018
 저작권 정보를 표시하는 컴포넌트
Figure 112015007978898-pat00019
 설정된 날짜를 기준으로 D-Day를 표시하는 컴포넌트
Figure 112015007978898-pat00020
 제목을 표시하는 컴포넌트
Figure 112015007978898-pat00021
 최신 뉴스 관련 정보를 표시하는 컴포넌트
Figure 112015007978898-pat00022
 여러 항목을 목록 형태로 표시하는 컴포넌트
Figure 112015007978898-pat00023
 로고 관련 정보를 표시하는 컴포넌트
Figure 112015007978898-pat00024
 사용자 대화창을 표시하는 컴포넌트
Figure 112015007978898-pat00025
 진행률 정보를 표시하는 컴포넌트
Figure 112015007978898-pat00026
 다양한 소셜 미디어 웹 사이트에 대한 링크를 제공하는 컴포넌트
Figure 112015007978898-pat00027
 시간 정보를 표시하는 컴포넌트
- Navigator 컴포넌트
컴포넌트명 설명
Figure 112015007978898-pat00028
 다수의 컨텐츠를 펼침/닫힘 기능을 이용하여 타이틀별로 네비게이션하여 표시하는 컴포넌트
Figure 112015007978898-pat00029
 다수의 컨텐츠를 페이지별로 네비게이션하여 표시하는 컴포넌트
Figure 112015007978898-pat00030
 링크의 신속한 접근을 위해 메뉴 정보를 표시하는 컴포넌트
Figure 112015007978898-pat00031
 계층적 정보를 메뉴 형태로 표시하는 컴포넌트
Figure 112015007978898-pat00032
 다수의 컨텐츠를 탭별로 네비게이션하여 표시하는 컴포넌트
- Layout 컴포넌트
컴포넌트명 설명
Figure 112015007978898-pat00033
 다수의 컨텐츠를 하나의 그룹으로 그룹핑하기 위한 컴포넌트
Figure 112015007978898-pat00034
 다수의 컨텐츠를 타이틀을 포함한 하나의 그룹으로 그룹핑하기 위한 컴포넌트
Figure 112015007978898-pat00035
 수평 구분선을 표시하는 컴포넌트
- Data 컴포넌트
컴포넌트명 설명
Figure 112015007978898-pat00036
 데이터 셋의 내용을 격자 모양으로 표시하는 컴포넌트
Figure 112015007978898-pat00037
 계층적 정보를 트리 형태로 표시하는 컴포넌트
Figure 112015007978898-pat00038
 계층적 구조를 가진 데이터를 격자 모양으로 표시하는 컴포넌트
- Multi Media 컴포넌트
컴포넌트명 설명
Figure 112015007978898-pat00039
 오디오를 재생하기 위한 컴포넌트
Figure 112015007978898-pat00040
 도형을 그리기 위한 컴포넌트
Figure 112015007978898-pat00041
 이미지를 표시하는 컴포넌트
Figure 112015007978898-pat00042
 다수의 이미지를 갤러리 형태로 표시하는 컴포넌트
Figure 112015007978898-pat00043
 다수의 이미지를 슬라이더 형태로 표시하는 컴포넌트
Figure 112015007978898-pat00044
 비디오를 재생하기 위한 컴포넌트
Figure 112015007978898-pat00045
 다수의 비디오를 갤러리 형태로 표시하는 컴포넌트
상기 컴포넌트 제어단계(S120)는 사용자가 컴포넌트를 선택한 후 Drag & Drop을 이용하여 위치 변경 및 크기를 용이하게 변경할 수 있는 단계로서, 컴포넌트의 숨김 및 표시 여부 또한 설정할 수 있다. 마우스 드래그로 컴포넌트를 다중 선택할 수 있으며, 선택된 컴포넌트들에 대해 맞춤 정렬(상단, 하단, 좌측, 우측, 같은 넓이, 같은 높이)을 설정할 수 있는 단계이다.
상기 스타일 편집단계(S130)는 다수의 각 컴포넌트에 대한 Box 스타일(Padding, Margin, Border, Round), Text 스타일(FontFamily, FontSize, FontColor, Align), Background 스타일(Color, Gradient)을 편집할 수 있는 단계이다.
상기 속성 편집단계(S140)의 경우, 각 컴포넌트 속성에 대한 정보를 Properties 패널을 통해 제공하고 있으며, 컴포넌트 사용 용도에 따라 고유 속성을 편집할 수 있는 단계이다.
상기 이벤트 설정단계(S150)는 컴포넌트에서 제공하는 마우스, 키보드, 폼 이벤트 목록에 대해 사용자정의 이벤트를 설정할 수 있는 단계이다.
도 4는 본 발명에 따른 반응형 레이아웃 설계 단계(S200)를 나타낸 화면으로써, UI 설계가 완료된 화면을 기준으로, 손쉽게 컨텐츠별 페이지 레이아웃 설계 및 변경이 가능한 단계이다. 전술된 S100단계 이후, UI 설계가 완료된 페이지에 대해 도 4에 도시되어 있는 바와 같이, 사용자에게 직관적인 페이지 레이아웃 분할 기능이 제공되어, 사용자가 구분할 컨텐츠 영역에서 페이지 레이아웃을 자유롭게 분할하는 것이다.
물론, 분할된 페이지 레이아웃을 개별적으로 선택하여 삭제할 수 있으며, 분할된 레이아웃을 초기화하여 다시 설정할 수 있는 기능 또한 제공되어 실행이 가능하다.
이러한 반응형 레이아웃 설계단계를 상세히 설명하면, 도 4에서처럼, 툴바의 Layout 버튼을 클릭하여 Layout 모드로 전환한 후, 우측의 분할(가로/세로), 삭제(병합) 버튼을 이용하여 설계한 화면을 컨텐츠별로 레이아웃을 분할하는 것이다.
즉, S200단계에는 레이아웃의 가로 분할 가이드 선, 세로 분할 가이드 선, 초기화, 삭제 등의 기능이 있어, 이를 통해 자유롭게 컨텐츠별 페이지 레이아웃을 설계하는 것이다.
도 5는 전술된 도 4에서의 반응형 레이아웃 설계 단계(S200)를 상세히 설명한 일실시예의 설계 순서도로써, 이러한 반응형 레이아웃 설계 단계(S200)는 페이지 레이아웃 분할단계(S210), 페이지 레이아웃 조정단계(S220), 페이지 레이아웃 초기화단계(S230)를 포함한다.
상기 페이지 레이아웃 분할단계(S210)는, 전술된 S100단계를 통해 UI 설계가 완료된 페이지를 기준으로, 각종 디바이스 유형(ex: 태블릿, 모바일 등)을 고려하여 컨텐츠별로 가로 또는 세로 분할 가이드 선을 이용하여 레이아웃을 분할하는 단계이다.
상기 페이지 레이아웃 조정단계(S220)는 컨텐츠별로 분할된 레이아웃 영역의 크기를 조정하거나 분할된 레이아웃을 삭제할 수 있는 단계이다.
상기 페이지 레이아웃 초기화단계(S230)는 컨텐츠별 페이지 레이아웃의 재설계가 필요한 경우, 페이지 레이아웃을 초기화할 수 있는 단계이다.
도 6은 본 발명에 따른 태블릿 화면 UI 설계 단계를 나타낸 일실시예의 화면이고, 도 7은 본 발명에 따른 모바일 화면 UI 설계 단계를 나타낸 일실시예의 화면으로써, 컨텐츠별 페이지 레이아웃의 사전설계기준으로, 디바이스 유형별 설계 화면이 생성되는 모습을 나타내고 있다.
컨텐츠별 페이지 레이아웃의 사전설계기준으로, 디바이스 유형별 설계 화면이 생성되는 디바이스 유형별 설계 화면 생성단계(S300)에 관한 것으로, 전술된 S200 단계가 완료되면, S300단계가 자동적으로 실행되며, 도 6 및 도 7에 도시된 바와 같이, 컨텐츠별 페이지 레이아웃 구성 정보를 기반으로 태블릿 페이지(도 6) 또는 모바일 페이지(도 7)가 자동으로 생성된 것을 확인할 수 있다.
도 8은 도 6 및 도 7과 같은 디바이스 유형별 설계 화면 생성단계(S300)를 상세히 설명한 일실시예의 설계 순서도로써, 이러한 디바이스 유형별 설계 화면 생성단계(S300)는 페이지 레이아수 순서지정단계(S310), 페이지 레이아웃 범위계산단계(S320), 컴포넌트별 레이아웃 식별단계(S330), 디바이스 유형별 설계화면 생성단계(S340)를 포함한다.
상기 페이지 레이아웃 순서 지정단계(S310)는 컨텐츠별 페이지 레이아웃 구성 정보를 기반으로 좌측상단의 레이아웃부터 순차적으로 레이아웃 순번을 지정하는 단계이다.
상기 페이지 레이아웃 범위 계산단계(S320)단계는 레이아웃 순번별로 레이아웃의 좌측상단과 우측하단의 좌표 범위를 계산하는 단계이다.
상기 컴포넌트별 레이아웃 식별단계(S330)는 설계된 모든 컴포넌트에 대한 위치 정보를 이용하여 각각의 컴포넌트가 어느 순번의 레이아웃에 포함되는지 식별하는 단계이다.
상기 디바이스 유형별 설계 화면 생성단계(S340)는 사용자가 설정한 태블릿 및 모바일 화면의 가로 사이즈를 기준으로, 순번별로 레이아웃과 컴포넌트를 재배치하여 태블릿과 모바일 설계화면을 생성하는 단계이다.
도 9는 본 발명에 따른 디바이스 유형별 편집단계(S400)를 상세히 설명한 일실시예의 설계 순서도로써, 유형별 디바이스에 최적화된 화면을 위해, 크기 및 위치 조정, 텍스트의 편집이 가능함을 나타낸다.
이러한 디바이스 유형별 편집단계(S400)에서는 태블릿 및 모바일 페이지 내에서 레이아웃별 숨기기/표시 및 크기 조정이 가능하며, 레이아웃 내 컴포넌트별 크기 및 위치 조정, 숨기기/표시, 텍스트 편집기능이 수행될 수 있다.
이러한 디바이스 유형별 편집단계(S400)는 크기 및 위치조정단계(S410), 스타일 편집단계(S420), 숨김과 표시여부 설정단계(S430)을 포함하여 이루어진다.
상기 크기 및 위치 조정단계(S410)단계는 태블릿과 모바일 화면의 특성을 고려하여 컴포넌트별 크기 및 위치 변경이 가능하며, 레이아웃의 크기를 변경할 수 있는 단계이다.
상기 스타일 편집단계(S420)는 태블릿과 모바일 화면의 특성을 고려하여 컴포넌트에 대한 Box 스타일(Padding, Margin, Border, Round), Text 스타일(FontFamily, FontSize, FontColor, Align), Background 스타일(Color, Gradient)을 편집할 수 있는 단계이다.
상기 숨김과 표시여부 설정단계(S430)는 태블릿과 모바일 화면의 특성을 고려하여 레이아웃과 컴포넌트를 부분적으로 숨김과 표시 여부를 설정할 수 있는 단계이다.
이러한 디바이스 유형별 편집단계(S400)를 통한 태블릿 화면 UI 설계 단계를 상세히 설명하면(도 6), 툴바의 설계 유형 메뉴의 태블릿 버튼을 클릭하여 태블릿 모드로 이동후, 사전설정된 컨텐츠별 페이지 레이아웃 구성 정보대로 태블릿에서 표시될 화면이 자동으로 생성되도록 하는 것이며, 태블릿에 최적화된 화면 설계를 위해 편집작업(레이아웃/컴포넌트별 숨기기/표시, 크기 및 위치조정, 텍스트 편집 등)을 수행하는 것이다.
모바일 화면 UI 설계 단계를 상세히 설명하면(도 7), 툴바의 설계 유형 메뉴의 모바일 버튼을 클릭하여 모바일 모드로 이동후, 사전설정된 컨텐츠별 페이지 레이아웃 구성 정보대로 모바일에서 표시될 화면이 자동으로 생성되도록 하는 것이며, 모바일에 최적화된 화면 설계를 위해 편집작업(레이아웃/컴포넌트별 숨기기/표시, 크기 및 위치조정, 텍스트 편집 등)을 수행하는 것이다.
도 10은 본 발명에 따른 실시간 검증 단계(S500)를 나타낸 일실시예의 화면을 나타낸 것으로, 디바이스 유형별로 설계한 내용이 사전설계된 형태로 표시되는지 실시간으로 확인가능한 단계이다.
도 10에 도시된 바와 같이, 전술된 S300, 400단계를 통해 자동생성된 태블릿 및 모바일 페이지를 실시간으로 바로 확인하고 검증하는 단계로, 사용자는 툴바의 미리보기 버튼을 클릭하여 유형별(데스크탑/태블릿/모바일)로 설계한 내용이 사전설정한대로 제대로 표시되는지 확인하는 것이다.
도 11은 도 10의 실시간 검증 단계(S500)를 상세히 설명한 일실시예의 설계 순서도로서, 이러한 실시간 검증 단계(S500)는 미리보기단계(S510), 반응형 웹 검증단계(S520)를 포함한다.
상기 미리보기단계(S510)는 전술된 S100 내지 S400단계를 통해, 태블릿 및 모바일 화면 설계를 완료한 후, 화면 툴바의 미리보기 버튼을 클릭하여, 미리보기 여부를 결정할 수 있는 단계이다.
상기 반응형 웹 검증단계(S520)는 디바이스 유형(ex: 데스크탑, 태블릿, 모바일 등)별 레이아웃 변경 여부와, 유형별 편집한 내용이 제대로 표시되는지 확인할 수 있는 단계이다.
이상과 같이, 본 발명은 비록 한정된 실시예와 도면에 의해 설명되었으나, 본 발명은 이것에 의해 한정되지 않으며 본 발명이 속하는 기술 분야에서 통상의 지식을 가진 자에 의해 본 발명의 기술 사상과 아래에 기재될 특허청구범위의 균등범위 내에서 다양한 수정 및 변경이 가능함은 물론이다.

Claims (6)

  1. WYSIWYG HTML5 저작도구에서 Drag & Drop에 의한 UI 컴포넌트 추가 및 속성 편집이 가능한 화면 UI 설계단계(S100);
    UI 설계가 완료된 화면을 기준으로, 손쉽게 컨텐츠별 페이지 레이아웃을 설계 및 변경이 가능한 반응형 레이아웃 설계단계(S200);
    컨텐츠별 페이지 레이아웃의 사전설계기준으로, 디바이스 유형별 설계 화면이 생성되는 디바이스 유형별 설계 화면 생성단계(S300);
    유형별 디바이스에 최적화된 화면을 위해, 크기 및 위치 조정, 텍스트의 편집이 가능한 디바이스 유형별 편집단계(S400);
    디바이스 유형별로 설계한 내용이 사전설계된 형태로 표시되는지 확인가능한 실시간 검증 단계(S500);를 포함하여 이루어지며,
    상기 화면 UI 설계단계(S100)는 UI 컴포넌트를 Drag & Drop으로 설계 영역에 추가하는 컴포넌트 추가단계(S110)와, 추가한 UI 컴포넌트 위치, 크기, 숨김 및 표시여부를 제어하는 컴포넌트 제어단계(S120)와, 상기 각 UI 컴포넌트에 대한 스타일을 편집하는 스타일 편집단계(S130)와, 상기 각 UI 컴포넌트를 사용용도에 따라 속성을 편집하는 속성편집단계(S140)와, 상기 각 UI 컴포넌트에서 제공하는 이벤트 목록에 대해 사용자정의 이벤트를 설정하는 단계(S150)를 포함하여 이루어지며,
    상기 반응형 레이아웃 설계단계(S200)는 컨텐츠별 페이지 레이아웃을 분할하는 페이지 레이아웃 분할단계(S210)와, 컨텐츠별 페이지 레이아웃의 크기조정 및 삭제유무가 결정되는 페이지 레이아웃 조정단계(S220)와, 컨텐츠별 페이지 레이아웃의 재설계 여부에 따라 초기화가 결정되는 페이지 레이아웃 초기화단계(S230)를 포함하여 이루어지며,
    상기 디바이스 유형별 설계 화면 생성단계(S300)는 다수 컨텐츠별 페이지 레이아웃의 순번이 정해지는 페이지 레이아웃 순서지정단계(S310)와, 순번별로 다수 컨텐츠별 페이지 레이아웃의 좌표범위가 계산되는 페이지 레이아웃 범위계산단계(S320)와, 다수의 컴포넌트 각각이 포함될 레이아웃을 식별하는 컴포넌트별 레이아웃 식별단계(S330)와, 사전설정된 디바이스 유형별 크기를 기준으로, 순번별로 레이아웃과 컴포넌트가 재배치되어, 각 디바이스 유형별 설계화면이 생성되는 디바이스 유형별 설계화면 생성단계(S340)를 포함하여 이루어지며,
    상기 디바이스 유형별 편집단계(S400)는 사전설정된 디바이스 유형별 화면을 고려하여, 컴포넌트별 크기 및 위치변경, 레이아웃 크기 변경이 가능한 크기 및 위치조정단계(S410)와, 사전설정된 디바이스 유형별 화면을 고려하여, 각 컴포넌트의 Box 스타일, Text 스타일, Background 스타일을 편집하는 스타일 편집단계(S420)와, 사전설정된 디바이스 유형별 화면을 고려하여, 각 컴포넌트와 레이아웃의 숨김 및 표시여부가 설정되는 숨김과 표시여부 설정단계(S430)를 포함하여 이루어지며,
    컨텐츠 추가, 수정, 삭제 등으로 인하여 컨텐츠별 페이지 레이아웃 변경이 필요한 경우, S200 ~ S500 단계가 반복적으로 이루어지면서, 컨텐츠별 페이지 레이아웃 수정이 자유롭게 시행되는 것을 특징으로 하는 반응형 레이아웃 설계 방법.
  2. 삭제
  3. 삭제
  4. 삭제
  5. 삭제
  6. 삭제
KR1020150011996A 2015-01-26 2015-01-26 반응형 레이아웃 설계 방법 KR101546725B1 (ko)

Priority Applications (1)

Application Number Priority Date Filing Date Title
KR1020150011996A KR101546725B1 (ko) 2015-01-26 2015-01-26 반응형 레이아웃 설계 방법

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR1020150011996A KR101546725B1 (ko) 2015-01-26 2015-01-26 반응형 레이아웃 설계 방법

Publications (1)

Publication Number Publication Date
KR101546725B1 true KR101546725B1 (ko) 2015-08-25

Family

ID=54061775

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020150011996A KR101546725B1 (ko) 2015-01-26 2015-01-26 반응형 레이아웃 설계 방법

Country Status (1)

Country Link
KR (1) KR101546725B1 (ko)

Cited By (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR101649822B1 (ko) * 2015-02-13 2016-08-19 김효환 웹페이지 구축 장치 및 방법
CN107833260A (zh) * 2017-11-28 2018-03-23 福建中金在线信息科技有限公司 动画进度条的绘制方法及系统
WO2019013364A1 (ko) * 2017-07-11 2019-01-17 주식회사 넥스트비즈 반응형 웹사이트 빌더 시스템 및 그 방법
KR20190134880A (ko) * 2018-05-03 2019-12-05 에스케이플래닛 주식회사 문서 객체 모델을 이용한 웹 어플리케이션 세부 페이지 분석 방법 및 이를 위한 장치
KR20200004114A (ko) * 2018-07-03 2020-01-13 카페24 주식회사 쇼핑몰 배너디자인 생성 방법, 장치 및 시스템
KR20200112430A (ko) * 2019-03-22 2020-10-05 카페24 주식회사 온라인 쇼핑몰 배너 디자인 자동 생성 방법 및 장치
US11636824B2 (en) 2019-11-11 2023-04-25 Samsung Electronics Co., Ltd. Display apparatus and control method thereof for variably displaying user interface
KR102613616B1 (ko) * 2023-01-26 2023-12-14 (주)신나는플랫폼 포털 솔루션 서비스 제공 시스템
KR102658042B1 (ko) * 2023-10-04 2024-04-17 (주)에이시에스 데이터 관리 소프트웨어 개발을 위한 전자 장치 및 그의 동작 방법

Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2011510393A (ja) * 2008-01-15 2011-03-31 ポステック アカデミー‐インダストリー ファウンデーション 同時編集を支援する多重プラットフォーム基盤の使用者インタフェース画面編集方法および装置

Patent Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2011510393A (ja) * 2008-01-15 2011-03-31 ポステック アカデミー‐インダストリー ファウンデーション 同時編集を支援する多重プラットフォーム基盤の使用者インタフェース画面編集方法および装置

Cited By (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR101649822B1 (ko) * 2015-02-13 2016-08-19 김효환 웹페이지 구축 장치 및 방법
WO2019013364A1 (ko) * 2017-07-11 2019-01-17 주식회사 넥스트비즈 반응형 웹사이트 빌더 시스템 및 그 방법
CN107833260A (zh) * 2017-11-28 2018-03-23 福建中金在线信息科技有限公司 动画进度条的绘制方法及系统
KR20190134880A (ko) * 2018-05-03 2019-12-05 에스케이플래닛 주식회사 문서 객체 모델을 이용한 웹 어플리케이션 세부 페이지 분석 방법 및 이를 위한 장치
KR102131080B1 (ko) * 2018-05-03 2020-07-08 에스케이플래닛 주식회사 문서 객체 모델을 이용한 웹 어플리케이션 세부 페이지 분석 방법 및 이를 위한 장치
KR20200004114A (ko) * 2018-07-03 2020-01-13 카페24 주식회사 쇼핑몰 배너디자인 생성 방법, 장치 및 시스템
KR102114366B1 (ko) * 2018-07-03 2020-05-22 카페24 주식회사 쇼핑몰 배너디자인 생성 방법, 장치 및 시스템
KR20200112430A (ko) * 2019-03-22 2020-10-05 카페24 주식회사 온라인 쇼핑몰 배너 디자인 자동 생성 방법 및 장치
KR102246537B1 (ko) * 2019-03-22 2021-04-30 카페24 주식회사 온라인 쇼핑몰 배너 디자인 자동 생성 방법 및 장치
US11636824B2 (en) 2019-11-11 2023-04-25 Samsung Electronics Co., Ltd. Display apparatus and control method thereof for variably displaying user interface
KR102613616B1 (ko) * 2023-01-26 2023-12-14 (주)신나는플랫폼 포털 솔루션 서비스 제공 시스템
KR102658042B1 (ko) * 2023-10-04 2024-04-17 (주)에이시에스 데이터 관리 소프트웨어 개발을 위한 전자 장치 및 그의 동작 방법

Similar Documents

Publication Publication Date Title
KR101546725B1 (ko) 반응형 레이아웃 설계 방법
JP7354294B2 (ja) 階層流動コンポーネントおよび動的レイアウトを統合した応答編集および表示を提供するシステムおよび方法
JP4047308B2 (ja) レイアウト処理方法、情報処理装置及びコンピュータプログラム
US9971749B2 (en) Editor for website and website menu
JP4250540B2 (ja) レイアウト調整方法および装置およびレイアウト調整プログラム
JP4522280B2 (ja) 情報処理装置及びその制御方法、プログラム
JP4241410B2 (ja) レイアウト調整方法および装置およびレイアウト調整プログラム
JP4262164B2 (ja) 情報処理装置及びその制御方法、プログラム
JP4144883B2 (ja) 情報処理装置及びその制御方法、プログラム
US20110161792A1 (en) Producing interactive documents
US20100037168A1 (en) Systems and methods for webpage design
US20080307308A1 (en) Creating Web Clips
US20110035692A1 (en) Scalable Architecture for Dynamic Visualization of Multimedia Information
CN104239305A (zh) 生成及展现电子文档的方法及装置
TW201439878A (zh) 頁面搜尋方法以及支援該方法的電子裝置
US20150106751A1 (en) Systems And Methods For Creating And Serving Dynamically Adjustable Web Pages
JP2005216179A (ja) 文書処理装置及び文書処理方法及び文書処理プログラム
JP2008158797A (ja) 情報処理装置及びその制御方法、プログラム
US20120192047A1 (en) Systems and methods for building complex documents
JP2006048531A (ja) 情報処理装置、情報処理方法、ならびにプログラム、記憶媒体
US10467782B2 (en) Interactive hierarchical bar chart
US9864479B2 (en) System and method for managing and reviewing document integration and updates
JP5634140B2 (ja) 情報処理装置、表示方法、およびプログラム
JP2010271958A (ja) 帳票表示システム、情報処理装置、情報処理方法及びプログラム
JP2007249431A (ja) 情報処理装置及びその制御方法、プログラム

Legal Events

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

Payment date: 20180813

Year of fee payment: 8