WO2019013364A1 - 반응형 웹사이트 빌더 시스템 및 그 방법 - Google Patents

반응형 웹사이트 빌더 시스템 및 그 방법 Download PDF

Info

Publication number
WO2019013364A1
WO2019013364A1 PCT/KR2017/007378 KR2017007378W WO2019013364A1 WO 2019013364 A1 WO2019013364 A1 WO 2019013364A1 KR 2017007378 W KR2017007378 W KR 2017007378W WO 2019013364 A1 WO2019013364 A1 WO 2019013364A1
Authority
WO
WIPO (PCT)
Prior art keywords
user
theme
menu
layout
website
Prior art date
Application number
PCT/KR2017/007378
Other languages
English (en)
French (fr)
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 PCT/KR2017/007378 priority Critical patent/WO2019013364A1/ko
Publication of WO2019013364A1 publication Critical patent/WO2019013364A1/ko

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/166—Editing, e.g. inserting or deleting

Definitions

  • An embodiment according to the concept of the present invention relates to a responsive website builder system and a method thereof, and more particularly to a system and a method for producing a responsive website according to a screen resolution.
  • Web site creation tools and storage space are required to create a website (eg, home page).
  • homepages are not easy to be produced by ordinary Internet users who do not have expertise or experience in production on the homepage, so they are commissioned to a company specialized in homepage production.
  • the present invention provides a responsive website builder system and a method thereof that enable a general user without professional knowledge to easily create a website without program coding.
  • a general user without professional knowledge can easily create a website without program coding.
  • a responsive website e.g., a home page
  • a responsive website that varies according to the screen resolution can be conveniently Can be produced.
  • FIG. 1 is a diagram illustrating a schematic connection relationship of a responsive website builder system according to an embodiment of the present invention.
  • FIG. 2 is a schematic block diagram of the configuration of the responsive website builder system shown in FIG. 1.
  • FIG. 2 is a schematic block diagram of the configuration of the responsive website builder system shown in FIG. 1.
  • FIG. 3 is a functional block diagram of a responsive website builder system according to an embodiment of the present invention.
  • FIG. 4 is a diagram for explaining a function of the theme generation unit shown in FIG. 3.
  • FIG. 4 is a diagram for explaining a function of the theme generation unit shown in FIG. 3.
  • FIG. 5 is a diagram schematically showing an embodiment of a screen of the reactive screen operation viewer shown in FIG. 3.
  • FIG. 5 is a diagram schematically showing an embodiment of a screen of the reactive screen operation viewer shown in FIG. 3.
  • Figures 6-17 illustrate embodiments of pages (or screens) that a responsive website builder system according to an embodiment of the present invention provides for a user interface.
  • the responsive website builder system generates a plurality of theme data sets including a plurality of layout setting values for each theme and resolution, Generating unit; A user editor configured to generate a user website data set based on a selected one of the plurality of theme data sets according to a selection of a first user; And a site generator for generating a user website based on the user website data set.
  • the site generator comprises: a website database storing the user website data set; A CSS file generator for generating a CSS file by resolution based on first layout setting values of the user website data set stored in the website database; And a responsive user interface module for generating a user website based on the CSS file and the second layout setting values and the content of the user website data set.
  • the plurality of layout setting values include a plurality of main page configuration items constituting a main page and a plurality of sub page configuration items constituting a sub page, wherein the plurality of main page configuration items and the sub page configuration items Each of which may include one or more subsetting values.
  • FIG. 1 is a diagram showing a schematic connection relationship of a responsive website builder system 30 according to an embodiment of the present invention
  • the responsive website builder system 30 can communicate with a plurality of (two or more) user terminals 10-1 through 10-k (k is an integer of 2 or more) through the communication network 20.
  • Each of the first through n-th user terminals 10-1 through 10-k can access the responsive website builder system 30 through the communication network 20 to create a responsive website, You can also use a website.
  • the user terminals 10-1 to 10-k may be implemented as a personal computer (PC), a laptop computer, or a portable terminal.
  • the portable terminal may be, but not limited to, a mobile phone, a smart phone, a tablet PC, a personal digital assistant (PDA), and the like. All or one of the first to n-th user terminals 10-1 to 10-k may be referred to as a user terminal 10.
  • the user terminal 10 accesses the responsive web site builder system 30 to access the responsive web site builder system 30 for registration, member information registration, responsive website creation, web site domain creation, menu management, layout selection and modification, It can perform functions such as writing and commenting on Bulletin Board System (BBS).
  • BSS Bulletin Board System
  • the user accesses the responsive website builder system 30 with the user terminal 10 to create a responsive website using various templates and user interfaces provided in the responsive website builder system 30, (E.g., change content or layout, etc.) of the generated reaction-type website.
  • various templates and user interfaces provided in the responsive website builder system 30, E.g., change content or layout, etc.
  • the user can access the response-type website created with a specific URL, and can view and write information provided by the website.
  • FIG. 2 is a schematic block diagram of the responsive website builder system 30 shown in Figure 1.
  • the responsive website builder system 30 may include a processor 40, a communication unit 50, a data storage unit 60, and a user interface unit 70.
  • the processor 40 may execute a program stored in the data storage unit 60 to provide the user terminal 10 with a responsive website creation (creation) service.
  • the processor 40 may also manage programs and data in the data store 60.
  • the communication unit 50 can communicate with the user terminal 10 through a communication network (20 in Fig. 1).
  • the user interface unit 70 may receive user information and a user selection from a user and generate a user input signal according to the user information and the user selection.
  • the user may be, but is not limited to, a system administrator.
  • the user interface unit 70 may transmit a user input signal to the processor 40.
  • the user interface unit 70 may be implemented as a device capable of sensing a user's input, such as a keyboard, a mouse, and a touch screen.
  • the user interface unit 70 may also output a video signal or an audio signal.
  • FIG. 3 is a functional block diagram of a responsive website builder system according to an embodiment of the present invention.
  • FIG. 4 is a diagram for explaining functions of the theme generation unit 100 shown in FIG.
  • FIG. 5 is a diagram schematically showing an embodiment of a screen of the reactive screen operation viewer 130 shown in FIG.
  • the responsive website builder system 30 is a system that allows the user to conveniently create responsive websites (e.g., homepages, etc.) that vary according to the screen resolution.
  • the responsive website builder system 30 may include a color theme selection and layout setting using a user interface provided by the responsive website builder system 30, So you can easily create reactive websites.
  • Each of the components 100, 200, and 300 included in the responsive website builder system 30 may be implemented in hardware, software, or a combination thereof.
  • the functionality of the responsive website builder system 30 may also be implemented using the components of the responsive website builder system 30 shown in FIG.
  • the responsive website builder system 30 includes a theme generator 100, a user editor 200, and a website generator 300.
  • the theme generation unit 100 includes a basic setting unit 110, a layout setting unit 120 for each resolution, a responsive screen operation viewer 130, and a theme database 140.
  • the basic setting unit 110 includes a calculation value or a program algorithm for driving a JavaScript (js: javascript).
  • the basic setting unit 110 generates or sets appropriate basic cascading style sheets (CSS) setting values according to the response type (screen resolution).
  • CSS basic cascading style sheets
  • CSS is a style sheet that stores the overall style of a web document in advance.
  • 'Response type' may mean that the screen (or page) of the website is automatically changed (or reconfigured) to fit the screen resolution (or screen size).
  • the resolution-specific layout setting unit 120 allows theme developers to set layout setting values for each theme or resolution.
  • the resolution-specific layout setting unit 120 may provide an interface for setting layout setting values to theme developers connected to the responsive website builder system 30, and may set a plurality of layout settings Values.
  • the reactive screen operation viewer 130 generates and displays a web screen according to a plurality of layout setting values set by the layout setting unit 120 for each resolution.
  • the reactive screen operation viewer 130 can generate a web screen according to a resolution selected from a plurality of resolutions.
  • a plurality of resolutions can be divided into PC, tablet, terminal horizontally, and terminal vertically.
  • the user can select a PC, a tablet, a terminal landscape, and a terminal portrait on the screen 130a of the reactive screen operation viewer 130 Menus 131, 132, 133 and 134 may be shown.
  • the resolution can be selected.
  • the reactive screen operation viewer 130 can generate and display a web screen suitable for the PC screen according to a plurality of set layout settings
  • the response type screen operation viewer 130 can generate and display a web screen corresponding to the terminal vertical screen (for example, a horizontal resolution when the terminal is vertically arranged) according to a plurality of set layout settings. If the terminal width 133 is selected, the responsive screen operation viewer 130 displays a web screen corresponding to the terminal horizontal screen (for example, horizontal resolution when the terminal is horizontally disposed) according to a plurality of layout setting values And display it.
  • the theme developer can check the web screen according to the layout setting values and change the layout setting values if necessary.
  • the theme database 140 stores a plurality of layout setting values set by the layout setting unit 120 for each resolution. According to the embodiment, the theme database 140 may store a plurality of layout setting values for each theme and for each resolution. A plurality of layout setting values for each theme can be referred to as a theme data set.
  • the theme generation unit 100 performs a function of designating or setting a plurality of layout setting values for each theme or resolution.
  • the theme generation unit 100 performs a function of designating the layout configuration values by dividing the main page and the sub page.
  • the main page 410 may include items 430 (M1 to M4) configuring the layout of the main page, and the sub page 420 may include items (e.g., 440: S1 to S4).
  • the configuration items 430 and 440 can be classified into a top, a menu, a logo, an upper visual, a banner, a bulletin board style, a gallery style, an input form style, a bottom style,
  • Each configuration item may include one or more sub-items.
  • the configuration item M1 of the main page may include sub-items 450 (M1-1, M1-2, M1-3).
  • each of the other configuration items M2 to M4 of the main page and each of the configuration items S1 to S4 of the sub page may include one or more detailed items.
  • the detail items can be divided by resolution, and there are items that are applied totally regardless of resolution.
  • This detail item includes, for example, a color, a size, a margin value and the like, and in some cases, an algorithm for an appropriate setting pre-configured in the basic setting unit 110 is selected.
  • the details can be divided into three types.
  • the details may be 1) color, 2) shape layout, and 3) preset algorithm.
  • RGB value In the case of color, it is generally input as a fixed value (for example, RGB value) and can be expressed as '# AA33DD' or the like.
  • RGB value In case of single color, one RGB value is inputted. In the case of gradation, two or three values can be inputted. In the case of transparency, a ratio (for example,%) can be input.
  • the site layout since the site layout is affected by the reaction type, it can be input by using pixel unit for fixed size, and by using% unit for flexible case.
  • the pixel is input.
  • the ratio for example,%) is input. (E.g.,%) even when the gradation position and the size of the box or layout constituting the content are fluid.
  • the basic setting unit 110 may generate a plurality of layout setting values using preset algorithms.
  • Preset algorithms can be configured with layout setting values as groups that are preconfigured by optimizing complicated settings or the like, or may be configured with a program for generating a layout setting value.
  • the layout setting unit for each resolution 120 can select some layouts, such as a three-tiered banner or a four-tiered banner, through a user interface.
  • the detailed layout setting values may be generated by the preset algorithm of the basic setting unit 110. [ Accordingly, the theme developers and users can generate layout setting values only by selecting them without having to individually set or input layout setting values.
  • the user editing unit 200 includes a site menu setting module 210, a theme selection module 220, a layout setting module 230, and a content configuration module 240.
  • the user editing unit 200 allows a user to conveniently set a site menu (or a site map) and layout of a website (hereinafter, referred to as a " target website ") that the user intends to produce based on the theme data set stored in the theme database To be edited.
  • a site menu or a site map
  • a &quot target website &quot
  • the site menu setting module 210 provides a predetermined user interface so that the user can set a site menu on the target homepage and generates site menu data according to a user's selection and stores the generated site menu data in the website database 310.
  • FIG. 6 shows an embodiment of the screens provided by the site menu setting module 210.
  • FIG. 6 shows an embodiment of the screens provided by the site menu setting module 210.
  • the site menu templates for setting the site menu are shown.
  • the site menu template may have a hierarchical structure or a tree structure.
  • the site menu templates may include a top-level template menu (referred to as a 'main menu template') and one or more sub-menu templates that may be added under each main menu.
  • a top-level template menu referred to as a 'main menu template'
  • sub-menu templates that may be added under each main menu.
  • eight main menu templates may be provided.
  • the user can select as many main menu templates as necessary, and set the name of the main menu and whether or not to use the main menu. For example, the user can select the first main menu and set it to 'use', and set the menu name to 'company introduction'. For example, the user can select the second main menu and set it to 'use', and set the menu name to 'bulletin board'.
  • the site menu setting module 210 provides various templates for setting the site menu of the target web site, and allows one or more main menus and sub menus to be set according to the user's selection.
  • a UI user interface, for example, a button
  • the user can click the 'Add' button to set the submenu name, and set the function of the submenu to one of the preset functions.
  • the preset function may be a general page, a general bulletin board, a gallery bulletin board, a consultation reservation page, a map, and the like, but is not limited thereto.
  • the page type and style of the submenu can be changed.
  • the user can set a sub menu of the first main menu (company introduction) by adding a representative greeting and an access route.
  • the function can be set as a general page, and the route can be set as a map.
  • one or more submenus can be set according to the user's selection. It is also possible to set whether or not to use each submenu.
  • the settings for the site menu can be completed.
  • the theme setting step can be performed.
  • the theme setting may be performed by the theme selection module 220.
  • the theme selection module 220 selects one of the plurality of theme data sets previously set in the theme generation unit 100 and updates the selected theme data set to the website DB of the site generation unit. For example, the theme selection module 220 may store the selected theme data set as a user website data set in the website DB.
  • the color theme setting menu may be provided by the home page builder system 10.
  • the color theme setting menu is provided to allow the user to set the color theme of the target homepage.
  • the color theme means color, margin, background, layout, corner type, etc. of the main page and subpage of the homepage.
  • a menu for selecting one of a plurality of template colors can be provided.
  • the plurality of template colors may include, but is not limited to, red, orange, brown, yellow, green, blue, purple, pink and black and white.
  • the user can check the single color, gradation degree, gradation degree, transparency and the like and select a suitable theme (color theme) through the color theme setting menu.
  • the layout setting module 230 loads and edits a user web site data set from the web site DB 310 and updates the web site DB 310 with the changed contents and the added contents again.
  • the user can set the layout of the target website through the layout setting menu.
  • Layout settings can be made for each main page and each subpage.
  • the layout of the main page can be set.
  • the layout may include the size of the top menu, the size of the main menu, the location, the style of the submenu (bottom alignment, left to right alignment, visual size, full screen, partial screen, banner position, etc.).
  • the user may use a layout (or set values according to a layout set in the default) set by default using the user interface provided by the layout setting module 230, or may use a part of the layout.
  • the content configuration module 240 also retrieves and edits a user web site data set from the website database 310 similarly to the layout setting module 230, and updates the changes and added contents to the website database 310 .
  • the site generating unit 300 includes a web site DB 310, a responsive (by resolution) CSS file generator 320, and a responsive user interface module 330.
  • the responsive CSS file generator 320 loads the layout setting values of the user website data set stored in the website DB 310 and the default CSS setting values of the basic setting unit 110 of the theme generating unit 100 And generates a responsive user website CSS file in the responsive user interface module 330. Therefore, this file (user website CSS file) is generated differently for each domain (ie, for each website).
  • the responsive user interface module 330 mainly includes four sub-modules.
  • the responsive user interface module 330 includes a JS module 331, an html module 333, a css module 335, and a web program module 337.
  • the web program module 337 drives the web program. Examples of web programs are web-enabled DB-compatible programs such as php, asp, and jsp.
  • the responsive user interface module 330 includes a CSS file generated by the responsive CSS file generator 320, a content information of the website database 310, and a value or code HTML inline method) and invokes a js (Javascript) related algorithm previously set in the basic setting unit 110 to create a real reactive web site that a user can view with a web browser.
  • a js Javascript
  • the user can access the website in a URL manner specified in the site, and the information input by the user is input to the web site DB 310 using various functions of the web (input, select, textarea, etc.) It also performs an update role.
  • FIGS. 6-17 illustrate an embodiment of the pages (or screens) provided by the responsive website builder system 30 for a user interface according to an embodiment of the present invention.
  • FIGS. 6 to 17 may be user interface screens provided by the user editing unit 200 of the responsive website builder system 30.
  • FIG. 1
  • the site menu setting module 210 may provide a site menu edit screen as shown in FIGS.
  • the site menu edit screen can provide the main menu and submenu of the site.
  • the user can edit the site menu after releasing the lock (1) on the site menu edit screen.
  • 2 is the main menu of the site, and the user can modify the menu name by clicking on the main menu.
  • 3 is a submenu of the site, and the submenu belongs to the main menu, and the user can modify the menu name by clicking the submenu. The user can change the position of the menu by dragging and dropping after clicking the icon.
  • the menu displayed in a specific color may be a menu that is not currently used (e.g., a disabled menu).
  • the user can activate the menu by clicking on the disabled menu and clicking on 'Enable'.
  • the user can select the main menu (2) to be edited. If you select the main menu (2) to edit, the edit window appears on the right side, and you can modify the menu name (3).
  • the user can enable / disable the main menu by turning ON / OFF the 'ON' (4). After modifying the main menu, press the 'OK' button (6) to complete the modification.
  • the 'color theme' button (7) can be provided on the site menu editing screen, and the user can go to the page for selecting the color theme by clicking the 'color theme' button (7).
  • the user can designate the menu name input, modification, position change, and submenu functions for the submenu in a manner similar to the main menu.
  • the functions of the submenu include functional contents constituting the site such as a general page, a general bulletin board, a gallery bulletin board, a consultation (input form), and a map (map).
  • the theme selection module 220 may provide a color theme setting screen as shown in FIG.
  • the color theme setting screen is a page for selecting a color theme of a website, and the user can select a desired color scheme from among a plurality of preset color arrangements (1 in Fig. 8).
  • the color theme setting screen allows the user to provide an introduction to a plurality of themes and an example image (2 in Fig. 8).
  • the layout setting module 230 can provide a main page layout editing screen as shown in FIG.
  • the main page layout editing screen is a page provided to simplify the entire layout of the main page of the target web site created by the user and make it easy to understand and edit.
  • the layout of the main page may be composed of an upper part, a visual part, a banner, a bulletin board, an SNS, a moving picture, a gallery, a shopping mall, a lower part, and the like. You can change the order of all items, but you can also configure the interface so that only some items (for example, other than top and visual) can change the order, and clicking on each item can display an edit popup window.
  • the main page layout editing screen is divided into a menu (1) for moving to the sub page layout editing screen, a menu (2) for confirming the stored contents after the layout modification for each item, . Some items can be turned off if not in use.
  • the main page layout editing screen also includes a menu (4) for confirming the currently selected color theme, a menu (5) for distinguishing the content area (shadow processing for distinguishing the content area and the margin outside the content) And a menu (6) for selecting a color of a part (e.g., margin).
  • Fig. 10 shows an example of a pop-up window for editing the top item (logo and menu part) in the main page layout.
  • an upper item edit pop-up window as shown in FIG. 10 may be displayed.
  • the user can set the upper layout in the pop-up window to set the upper layout - eg, background color range, logo and main menu alignment, main menu round size, sub menu alignment, sub menu bar length,
  • the button (1) is pressed, the contents to be changed are stored in the website DB 330 and the pop-up window is closed.
  • the serviceable table is updated in the Web site DB 330 and applied to the actual user's Web site.
  • Fig. 11 shows an example of a pop-up window for editing a visual item in the main page layout.
  • a visual item is pressed on the main page layout editing screen of Fig. 9, a visual item editing pop-up window (1) as shown in Fig. 11 can be displayed.
  • the user sets the layout of the visual in the visual item edit pop-up window, for example, area range, visual size, visual conversion method, color of the conversion arrow, and then press the 'Save' button (2) to save the changed contents and close the popup window.
  • FIG. 12 shows an example of a pop-up window for editing a banner in the main page layout.
  • a banner item is pressed on the main page layout editing screen of Fig. 9, a banner item edit pop-up window as shown in Fig. 12 may be displayed.
  • the user sets the layout of the banner (for example, whether it is used, the number of images, the ratio of the image, the color of the text box, etc.) in the banner item edit popup window and then clicks the 'Save' button to save the changed contents and close the popup window.
  • FIG. 13 shows an example of a pop-up window for editing the bottom item in the main page layout.
  • a bottom item edit popup window as shown in FIG. 13 may be displayed.
  • the bottom item edit pop-up window is the user interface for editing the bottom part of the main page layout.
  • the user sets the layout of the lower part in the bottom item edit popup window - for example, the background color range, form, and whether to use it - and then press the 'Save' button to save the changed contents and close the popup window.
  • the user can set the layout of the main page to a desired layout by selecting only the layout elements of the main page in the main page layout editing screen.
  • the set layout settings can be stored as part of the user website data set in the website DB 310, according to the user's selection (e.g., input of the save button or selection of synchronization).
  • the main page layout editing screen has been described with reference to the main page layout editing screen.
  • the sub page layout editing may be similar to the main page layout editing.
  • the content configuration module 240 can provide a content (content) editing screen as shown in Figs. 14 to 17.
  • the content (content) editing screen is a page provided for editing and managing the contents of user web site contents.
  • the content (content) editing screen can provide a layout content management menu (1) and a menu content management menu (2)
  • the layout content management menu (1) is a menu in which pages for editing the contents of the items set in the layout editing screen are gathered.
  • the contents management menu (2) for the menu collects pages for editing and managing the contents There is a menu.
  • the content configuration module 240 may provide a page for editing the content (content) of the top item of the main page as shown in Fig.
  • the content configuration module 240 may also provide a page for editing the content (content) of the main page visual item as shown in Fig.
  • the content configuration module 240 may also provide a page for editing the content (content) of the main page banner item as shown in Fig.
  • 15 to 17 show an example of editing and configuring a content corresponding to layout elements of a main page, but the content can similarly be edited and configured for a sub page.
  • the menu-specific content management menu (2) is configured to input content according to the implemented interface of each function of the submenu set by the site menu setting module 210. For example, in the case of a general bulletin board, it is possible to input contents of a title item and a content item, to attach a file through a file upload function, and to set additional functions such as usage, open time setting, and main page exposure.
  • the user can conveniently edit the content corresponding to each layout element set in the layout setting module 230 in the content configuration module 240.
  • the present invention can also be embodied as computer-readable codes on a computer-readable recording medium.
  • a computer-readable recording medium includes all kinds of recording apparatuses in which data that can be read by a computer system is stored.
  • Examples of the computer-readable recording medium include a ROM, a RAM, a flash memory, a CD-ROM, a magnetic tape, a floppy disk, and an optical data storage device.
  • the computer readable recording medium may also be distributed over a networked computer system so that computer readable code can be stored and executed in a distributed manner.
  • functional programs, codes, and code segments for implementing the present invention can be easily inferred by programmers skilled in the art to which the present invention pertains.
  • the present invention can be used for manufacturing and managing a website (e.g., a home page).
  • a website e.g., a home page.

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

반응형 웹사이트 빌더 시스템 및 그 방법이 개시된다 본 발명의 실시예에 따른 반응형 웹사이트 빌더 시스템은 테마별 및 해상도별로 복수의 레이아웃 설정값들을 포함하는 복수의 테마 데이터 세트들을 생성하고, 생성된 상기 복수의 테마 데이터 세트들을 테마 데이터베이스에 저장하는 테마 생성부, 제1 사용자의 선택에 따라, 상기 복수의 테마 테이터 세트들 중 선택된 하나의 테마 데이터 세트에 기초하여 사용자 웹사이트 데이터 세트를 생성하는 사용자 편집부; 및 상기 사용자 웹사이트 데이터 세트에 기초하여 사용자 웹 사이트를 생성하는 사이트 생성부를 포함한다.

Description

반응형 웹사이트 빌더 시스템 및 그 방법
본 발명의 개념에 따른 실시예는 반응형 웹사이트 빌더 시스템 및 그 방법 에 관한 것으로 보다 상세하게는 화면 해상도에 따른 반응형 웹사이트를 제작하는 시스템 및 그 방법에 관한 것이다.
인터넷 기술 및 온라인 서비스의 발달로 웹사이트에 대한 수요는 엄청나게 증가하고 있다.
웹사이트(예컨대, 홈페이지)를 만들기 위해서 웹사이트 제작도구와 저장공간이 필요하다. 일반적으로 홈페이지는 홈페이지에 제작에 대한 전문 지식이나 경험이 없는 통상의 인터넷 사용자들이 제작하기는 용이하지 않기 때문에, 홈페이지 제작을 전문으로 하는 업체에 의뢰하여 제작하고 있다.
그러나, 이 경우 홈페이지 제작에 너무 많은 비용과 시간이 소요되고, 제작된 홈페이지를 수정하거나 관리하기 위해서도 별도의 전문 인력이나 비용이 필요한 단점이 있다. 이러한 단점을 개선하기 위하여, 홈 페이지를 자동으로 제작하여 주는 툴이나 방법이 소개되고 있으며, 홈 페이지 자동 제작 방법에 관한 선행 기술도 나와 있다.
본 발명이 이루고자 하는 기술적 과제는, 전문적인 지식 없는 일반 사용자도 프로그램 코딩없이 용이하게 웹사이트를 제작할 수 있는 반응형 웹사이트 빌더 시스템 및 그 방법을 제공함에 있다.
또한, 본 발명이 이루고자 하는 기술적 과제는, 화면 해상도에 따라 가변하는 반응형 웹사이트를 손쉽게 제작할 수 있도록 하는 반응형 웹사이트 빌더 시스템 및 그 방법을 제공함에 있다.
본 발명의 실시예에 따른 반응형 웹사이트 빌더 시스템 및 그 방법에 의하면, 전문적인 지식 없는 일반 사용자도 프로그램 코딩없이 용이하게 웹 사이트를 제작할 수 있다.
또한, 본 발명의 실시예에 따른 반응형 웹사이트 빌더 시스템 및 그 방법에 의하면, 화면해상도에 따라 가변하는 반응형 웹사이트(예컨대, 홈 페이지)를 프로그램 코딩 없이 메뉴 선택 및 설정 작업을 통하여 편리하게 제작할 수 있다.
도 1은 본 발명의 일 실시예에 따른 반응형 웹사이트 빌더 시스템의 개략적인 연결 관계를 나타내는 도면이다.
도 2는 도 1에 도시된 반응형 웹사이트 빌더 시스템의 개략적인 구성 블록도이다.
도 3은 본 발명의 실시예에 따른 반응형 웹사이트 빌더 시스템의 기능 블록도이다.
도 4는 도 3에 도시된 테마 생성부의 기능을 설명하기 위한 도면이다.
도 5는 도 3에 도시된 반응형 화면 작업 뷰어의 화면의 일 실시예를 개략적으로 나타내는 도면이다.
도 6 내지 도 17은 본 발명의 실시예에 따른 반응형 웹사이트 빌더 시스템이 유저 인터페이스를 위해서 제공하는 페이지들(혹은 화면들)의 실시예를 도시한다.
본 발명의 실시예에 따른 반응형 웹사이트 빌더 시스템은 테마별 및 해상도별로 복수의 레이아웃 설정값들을 포함하는 복수의 테마 데이터 세트들을 생성하고, 생성된 상기 복수의 테마 데이터 세트들을 테마 데이터베이스에 저장하는 테마 생성부; 제1 사용자의 선택에 따라, 상기 복수의 테마 테이터 세트들 중 선택된 하나의 테마 데이터 세트에 기초하여 사용자 웹사이트 데이터 세트를 생성하는 사용자 편집부; 및 상기 사용자 웹사이트 데이터 세트에 기초하여 사용자 웹 사이트를 생성하는 사이트 생성부를 포함한다.
상기 사이트 생성부는 상기 사용자 웹사이트 데이터 세트를 저장하는 웹사이트 데이터베이스; 상기 웹사이트 데이터베이스에 저장된 상기 사용자 웹사이트 데이터 세트 중 제1 레이아웃 설정값들에 기초하여 해상도별 CSS 파일을 생성하는 CSS 파일 생성기; 및 상기 CSS 파일 및 상기 사용자 웹사이트 데이터 세트 중 제2 레이아웃 설정값들과 컨텐츠에 기초하여, 사용자 웹 사이트를 생성하는 반응형 유저 인터페이스 모듈을 포함할 수 있다.
상기 복수의 레이아웃 설정값들은 메인 페이지를 구성하는 복수의 메인 페이지 구성 항목들, 및 서브 페이지를 구성하는 복수의 서브 페이지 구성 항목들을 포함하고, 상기 복수의 메인 페이지 구성 항목들 및 상기 서브 페이지 구성 항목들 각각은 하나 이상의 세부 항목 설정값을 포함할 수 있다.
본 명세서 또는 출원에 개시되어 있는 본 발명의 실시 예들에 대해서 특정한 구조적 내지 기능적 설명들은 단지 본 발명에 따른 실시 예를 설명하기 위한 목적으로 예시된 것으로, 본 발명에 따른 실시 예들은 다양한 형태로 실시될 수 있으며 본 명세서 또는 출원에 설명된 실시예들에 한정되는 것으로 해석되어서는 아니 된다. 이하, 첨부한 도면을 참조하여 본 발명의 바람직한 실시 예를 설명함으로써, 본 발명을 상세히 설명한다. 각 도면에 제시된 동일한 참조부호는 동일한 부재를 나타낸다.
도 1은 본 발명의 일 실시예에 따른 반응형 웹사이트 빌더 시스템(30)의 개략적인 연결 관계를 나타내는 도면이다
이를 참조하면, 반응형 웹사이트 빌더 시스템(30)은 통신망(20)을 통하여 복수(2이상)의 사용자 단말기(10-1 ~ 10-k, k는 2이상의 정수)와 통신할 수 있다.
제1 내지 제n 사용자 단말기(10-1 ~10-k) 각각은 통신망(20)을 통하여 반응형 웹사이트 빌더 시스템(30)에 접속하여 반응형 웹사이트를 제작할 수 있고, 또한, 제작된 반응형 웹사이트를 이용할 수도 있다.
반응형 웹사이트는 각 사이트의 세부 URL이 해상도에 관계없이 동일하기 때문에 각 사이트 페이지의 세부 URL을 배포해도 디바이스에 상관없이 같은 내용을 확인할 수 있게 된다.
사용자 단말기(10-1 ~10-k)는 PC(personal computer), 랩탑(laptop) 컴퓨터, 또는 휴대용 단말기로 구현될 수 있다. 휴대용 단말기는 이동 전화기, 스마트 폰(smart phone), 태블릿 (tablet) PC, PDA(personal digital assistant) 등일 수 있으나, 이에 한정되는 것은 아니다. 제1 내지 제n 사용자 단말기(10-1 ~10-k)의 전체 혹은 하나를 대표적으로 사용자 단말기(10)로 지칭할 수 있다.
사용자 단말기(10)는 반응형 웹사이트 빌더 시스템(30)에 접속하여, 회원 가입, 회원 정보 등록, 반응형 웹사이트 생성, 웹사이트 도메인 생성, 메뉴관리, 레이아웃 선택 및 변경, 내용등록 및 수정, 게시판(BBS: Bulletin Board System)에 글쓰기, 댓글 달기 등의 기능을 수행할 수 있다.
예컨대, 사용자는 사용자 단말기(10)로 반응형 웹사이트 빌더 시스템(30)에 접속하여 반응형 웹사이트 빌더 시스템(30)이 제공되는 각종 템플릿 및 유저 인터페이스를 이용하여 반응형 웹사이트를 생성하고, 생성된 반응형 웹사이트를 관리(예컨대, 컨텐츠 또는 레이아웃의 변경 등)할 수도 있다.
또한, 사용자는 특정 URL로 생성된 반응형 웹사이트에 접속하여, 웹사이트에서 제공하는 정보의 열람 및 글쓰기 등을 할 수 있다.
도 2는 도 1에 도시된 반응형 웹사이트 빌더 시스템(30)의 개략적인 구성 블록도이다. 도 2를 참조하면, 반응형 웹사이트 빌더 시스템(30)은 프로세서(40), 통신부(50), 데이터 저장부(60) 및 사용자 인터페이스부(70)를 포함할 수 있다.
데이터 저장부(60)는 반응형 웹사이트 생성(제작) 서비스를 제공하기 위한 프로그램 및 데이터를 저장한다. 데이터 저장부(60)는 롬(ROM), 비휘발성 메모리, 하드디스크 장치 등 다양한 저장 매체를 포함할 수 있다.
프로세서(40)는 데이터 저장부(60)에 저장된 프로그램을 실행하여, 사용자 단말기(10)로, 반응형 웹사이트 생성(제작) 서비스를 제공할 수 있다. 프로세서(40)는 또한, 데이터 저장부(60)의 프로그램 및 데이터를 관리할 수 있다.
통신부(50)는 통신망(도 1의 20)을 통해 사용자 단말기(10)와 통신할 수 있다.
사용자 인터페이스부(70)는 사용자로부터 사용자 정보와 사용자 선택을 입력 받아 상기 사용자 정보와 상기 사용자 선택에 따라 사용자 입력 신호를 생성할 수 있다. 사용자는 시스템 관리자일 수 있으나, 이에 한정되는 것은 아니다.
사용자 인터페이스부(70)는 사용자 입력 신호를 프로세서(40)로 전송할 수 있다. 사용자 인터페이스부(70)는 키보드, 마우스, 터치 스크린 등 사용자의 입력을 센싱할 수 있는 장치로 구현될 수 있다.
사용자 인터페이스부(70)는 또한 영상 신호나 음향 신호를 출력할 수 있다.
도 3은 본 발명의 실시예에 따른 반응형 웹사이트 빌더 시스템의 기능 블록도이다. 도 4는 도 3에 도시된 테마 생성부(100)의 기능을 설명하기 위한 도면이다. 도 5는 도 3에 도시된 반응형 화면 작업 뷰어(130)의 화면의 일 실시예를 개략적으로 나타내는 도면이다.
도 3 내지 도 5를 참조하면, 반응형 웹사이트 빌더 시스템(30)은 사용자가 화면해상도에 따라 가변하는 반응형 웹사이트(예컨대, 홈페이지 등)를 편리하게 제작할 수 있도록 하는 시스템이다. 예컨대, 반응형 웹사이트 빌더 시스템(30)은 사용자가 웹사이트를 제작하기 위해 별도의 프로그램 코딩 없이, 반응형 웹사이트 빌더 시스템(30)에서 제공되는 사용자 인터페이스를 이용한 컬러테마 선택 및 레이아웃 설정 등을 통해 손쉽게 반응형 웹사이트를 제작할 수 있도록 한다.
반응형 웹사이트 빌더 시스템(30)에 포함된 각 구성들(100, 200, 300)은 하드웨어(hardware), 소프트웨어(software) 또는 이들의 조합으로 구현될 수 있다. 반응형 웹사이트 빌더 시스템(30)의 기능은 또한 도 2에 도시된 반응형 웹사이트 빌더 시스템(30)의 구성요소들을 이용하여 구현될 수 있다.
반응형 웹사이트 빌더 시스템(30)은 테마 생성부(100), 유저 편집부(200), 웹사이트 생성부(300)를 포함한다.
테마 생성부(100)는 기본 설정부(110), 해상도별 레이아웃 설정부(120), 반응형 화면 작업 뷰어(130), 및 테마 데이터베이스(140)를 포함한다.
기본 설정부(110)는 자바스크립트(js: javascript) 구동을 위한 계산 값 또는 프로그램 알고리즘을 포함한다. 기본 설정부(110)는 반응형(화면해상도)에 따른 적합한 기본 CSS(cascading　style　sheets) 세팅값을 생성 또는 설정한다.
CSS는 웹 문서의 전반적인 스타일을 미리 저장해둔 스타일시트를 의미한다. '반응형'이란 화면 해상도(혹은 화면 크기)에 적합하도록 웹사이트의 화면(혹은 페이지)가 자동으로 변경(혹은 재구성)되는 것을 의미할 수 있다.
해상도별 레이아웃 설정부(120)는 테마 개발자로 하여금 테마별 또는 해상도별로 레이아웃 설정값들을 설정할 수 있도록 한다.
예컨대, 해상도별 레이아웃 설정부(120)는 반응형 웹사이트 빌더 시스템(30)에 접속한 테마 개발자에게 레이아웃 설정값들을 설정할 수 있는 인터페이스를 제공하고, 사용자의 입력 또는 선택에 따라, 복수의 레이아웃 설정값들을 생성한다.
반응형 화면 작업 뷰어(130)는 해상도별 레이아웃 설정부(120)에 의해 설정된 복수의 레이아웃 설정값들에 따른 웹화면을 생성하여 디스플레이한다.
반응형 화면 작업 뷰어(130)는 복수의 해상도 중 선택된 해상도에 따라 웹화면을 생성할 수 있다. 실시예에 따라, 사용자의 편의를 위하여, 복수의 해상도는 PC, 태블릿, 단말기 가로, 및 단말기 세로로 구분될 수 있다.
도 5에 도시된 반응형 화면 작업 뷰어(130)의 화면(130a)을 참조하면, 반응형 화면 작업 뷰어(130)의 화면(130a)에는 PC, 태블릿, 단말기 가로, 및 단말기 세로를 선택할 수 있는 메뉴들(131, 132, 133, 134)이 도시될 수 있다.
테마 개발자 반응형 화면 작업 뷰어 화면(130a)에서 메뉴들(131, 132, 133, 134) 중 하나를 선택함으로써, 해상도를 선택할 수 있다.
예컨대, 테마 개발자가 PC(131)를 선택하면, 반응형 화면 작업 뷰어(130)는 설정된 복수의 레이아웃 설정값들에 따라 PC 화면에 맞는 웹화면을 생성하여 디스플레이할 수 있고, 단말기 세로(134)를 선택하면, 반응형 화면 작업 뷰어(130)는 설정된 복수의 레이아웃 설정값들에 따라 단말기 세로 화면(예컨대, 단말기를 세로로 배치했을 때 가로 해상도)에 맞는 웹화면을 생성하여 디스플레이할 수 있다. 만약, 단말기 가로(133)를 선택되면, 반응형 화면 작업 뷰어(130)는 설정된 복수의 레이아웃 설정값들에 따라 단말기 가로 화면(예컨대, 단말기를 가로로 배치했을 때 가로 해상도)에 맞는 웹화면을 생성하여 디스플레이할 수 있다.
따라서, 테마 개발자는 레이아웃 설정값들에 따른 웹화면을 확인하고, 필요시 레이아웃 설정값들을 변경할 수 있다.
테마 데이터베이스(140)는 해상도별 레이아웃 설정부(120)에 의해 설정된 복수의 레이아웃 설정값들을 저장한다. 실시예에 따라, 테마 데이터베이스(140)는 테마별로, 또한, 해상도별로 복수의 레이아웃 설정값들을 저장할 수 있다. 테마별 복수의 레이아웃 설정값을 테마 데이터 세트라 지칭할 수 있다.
상술한 바와 같이, 테마 생성부(100)는 테마별 혹은 해상도별 복수의 레이아웃 설정값들을 지정 또는 설정하는 기능을 수행한다.
실시예에 따라, 테마 생성부(100)는 메인 페이지와 서브페이지로 구분하여 레이아웃 구성값들을 지정하는 기능을 수행한다.
도 4를 참조하면, 메인 페이지(410)는 메인 페이지의 레이아웃을 구성하는 항목들(430: M1~M4)을 포함할 수 있고, 서브 페이지(420)는 서브 페이지의 레이아웃을 구성하는 항목들(440: S1~S4)을 포함할 수 있다.
예컨대, 구성 항목(430, 440)은 상단, 메뉴, 로고, 상단비주얼, 배너, 게시판 스타일, 갤러리 스타일, 입력폼 스타일, 하단 스타일, 내용영역 스타일 등으로 구분될 수 있다.
각 구성 항목은　하나 이상의 세부 항목을 포함할 수 있다.
예컨대, 메인 페이지의 구성 항목(M1)은 세부 항목들(450: M1-1, M1-2, M1-3)을 포함할 수 있다. 도시되지는 않았지만 메인 페이지의 다른 구성 항목(M2~M4) 이나 서브 페이지의 구성 항목들(S1~S4) 각각도 하나 이상의 세부 항목을 포함할 수 있다.
세부 항목은 해상도별로 나눌 수도 있고, 해상도와 무관하게 전체적으로 적용되는 항목도 있다.　
이 세부 항목에는 이를테면 컬러, 크기, 여백값 등을 포함하고, 경우에 따라 기본설정부(110)에 미리 구성된 적합한 세팅을 위한 알고리즘을 선택하는 방식도 있다.　
세부 항목은 크게 3가지 타입으로 구분될 수 있다. 예컨대, 세부 항목은 1) 컬러, 2) 모양 레이아웃, 3) 기 세팅된 알고리즘이 있을 수 있다.
컬러의 경우 일반적으로 고정된 값(예컨대, RGB값)으로 입력하며 '#AA33DD' 등과 같이 표현될 수 있다.
싱글컬러의 경우 1개의 RGB값을 입력하며, 그라데이션의 경우에는 2개 또는 3개의 값을 입력할 수 있다. 투명도의 경우에는 비율(예컨대, %)로 입력할 수 있다.　
모양 레이아웃의 경우, 사이트 레이아웃이 반응형에 영향을 받기 때문에 고정적인 크기의 경우에는 픽셀단위를 사용하고 유동적인 경우에는 %단위를 사용하여 입력할 수 있다.　
이를테면 픽셀의 경우 특정해상도에서 이미지나 라운드 글자 크기가 고정적이어야 할 경우 픽셀로 입력한다. 하지만 해상도에 맞도록 이미지의 크기를 유동적으로 표현하는 경우에는 비율(예컨대, %)로 입력한다. 그라데이션 포지션과, 컨텐츠를 구성하는 박스 또는 레이아웃의 크기 등이 유동적일 경우에도 비율(예컨대, %)로 입력할 수 있다.
기본 설정부(110)는 기 세팅된 알고리즘을 이용하여 복수의 레이아웃 설정값을 생성할 수 있다. 기 세팅된 알고리즘은 복잡한 셋팅 등을　최적화 하여 미리 구성해 놓은 그룹들로서 레이아웃 설정값으로 구성될 수도 있고 레이아웃 설정값을 생성하는 프로그램 등으로 구성될 수도 있다.
예를 들어,　해상도별 레이아웃 설정부(120)에서 유저 인터페이스를 통해 3단 배너 또는 4단 배너 등과 같이 일부 레이아웃에 대하여 선택할 수 있도록 하고, 테마 개발자나 사용자가 특정 레이아웃을 선택하면, 선택된 레이아웃에 해당하는 세부 레이아웃 설정값들은 기본 설정부(110)의 기 세팅된 알고리즘으로 생성될 수 있다. 이에 따라서, 테마 개발자나 사용자가 레이아웃 설정값들을 일일이 설정하거나 입력할 필요없이, 선택만으로 레이아웃 설정값들을 생성할 수 있다.
유저 편집부(200)는 사이트 메뉴 설정모듈(210), 테마선택 모듈(220), 레이아웃 설정모듈(230) 및 내용구성 모듈(240)을 포함한다.
유저 편집부(200)는 사용자로 하여금 테마 데이터베이스에 저장된 테마 데이터 세트에 기초하여, 사용자가 제작하려고 하는 웹사이트(이하, '타겟 웹사이트'라 함)의 사이트 메뉴(혹은 사이트 맵) 및 레이아웃을 편리하게 편집할 수 있도록 한다.
사이트 메뉴 설정모듈(210)은 사용자가 타겟 홈페이지의 사이트 메뉴를 설정할 수 있도록 미리 정해진 유저 인터페이스를 제공하고, 사용자의 선택에 따라 사이트 메뉴 데이터를 생성하여 웹사이트 DB(310)에 저장할 수 있다.
도 6은 사이트 메뉴 설정모듈(210)이 제공하는 화면들의 일 실시예를 나타낸다.
사용자가 사이트 메뉴를 선택하면, 사이트 메뉴를 설정하기 위한 사이트 메뉴 템플릿들이 도시된다.
사이트 메뉴 템플릿은 계층적 구조(Hierarchical structure) 또는 트리 구조(tree structure)를 가질 수 있다.
사이트 메뉴 템플릿들은 최상위 계층의 템플릿 메뉴(이를 '주메뉴 템플릿'이라 함)와 각 주메뉴의 하위에 추가될 수 있는 하나 이상의 서브 메뉴 템플릿을 포함할 수 있다.
예컨대, 사이트 메뉴가 선택되면, 복수(2 이상)의 주메뉴 템플릿들이 도시된다.
일 실시예에서, 8개의 주메뉴 템플릿들이 제공될 수 있다.
시용자는 필요한 만큼의 주메뉴 템플릿을 선택하여, 사용여부 및 주 메뉴명을 설정할 수 있다. 예컨대, 사용자는 제1 주메뉴를 선택하여 '사용'으로 설정하고, 메뉴명을 '회사소개'로 설정할 수 있다. 예컨대, 사용자는 제2 주메뉴를 선택하여 '사용'으로 설정하고, 메뉴명을 '게시판'으로 설정할 수 있다.
이와 같이, 사이트 메뉴 설정모듈(210)은 타겟 웹사이트의 사이트 메뉴를 설정하기 위한 다양한 템플릿을 제공하고, 사용자의 선택에 따라 하나 이상의 주 메뉴 및 서브 메뉴가 설정될 수 있도록 한다.
각 주메뉴의 하단에는 서브 메뉴를 추가할 수 있는 UI(사용자 인터페이스, 예컨대, 버튼)가 제공될 수 있다. 사용자는 '추가' 버튼을 클릭하여, 서브 메뉴명을 설정하고, 해당 서브메뉴의 기능을 미리 설정된 기능들 중 하나로 설정할 수 있다. 예컨대, 미리 설정된 기능은 일반 페이지, 일반 게시판, 갤러리 게시판, 상담 예약 페이지, 약도 등일 수 있으나, 이에 한정되는 것은 아니다. 설정된 기능에 따라, 해당 서브 메뉴의 페이지 타입이나 양식이 달라질 수 있다.
예컨대, 사용자는 제1 주메뉴(회사소개)의 서브 메뉴로서, 대표자인사말, 오시는길을 추가하여 설정할 수 있다. 대표자인사말에 대해서는 기능을 일반 페이지로 설정하고, 오시는 길에 대해서는 약도로 설정할 수 있다.
이와 같이, 사용자의 선택에 따라 하나 이상의 서브메뉴가 설정될 수 있다. 또한 각 서브 메뉴에 대하여 사용 여부를 설정할 수 있다.
각 주메뉴와 각 서브 메뉴에 대한 설정이 완료되면, 사이트 메뉴에 대한 설정은 완료될 수 있다.
사이트 메뉴 설정이 완료되면, 테마 설정 단계가 수행될 수 있다.
테마 설정은 테마선택모듈(220)에 의해 수행될 수 있다.
테마선택모듈(220)은 테마생성부(100)에서 기 셋팅된 복수의 테마 데이터 세트들 중 하나를 선택하고, 선택된 테마 데이터 세트를 사이트 생성부의 웹사이트 DB로 업데이트 한다. 예컨대, 테마선택모듈(220)은 선택된 테마 데이터 세트를 사용자 웹사이트 데이터 세트로서 웹사이트 DB에 저장할 수 있다.
테마 설정을 위하여, 홈페이지 빌더 시스템(10)에 의하여 컬러테마 설정 메뉴가 제공될 수 있다. 컬러테마 설정 메뉴는 사용자가 타겟 홈페이지의 컬러테마를 설정할 수 있도록 제공되는 메뉴이다.
컬러테마는 홈페이지의 메인 페이지 및 서브 페이지의 컬러, 여백, 배경, 레이아웃, 모서리 타입 등을 의미한다.
컬러 테마 메뉴를 선택하면, 복수의 템플릿 컬러들 중 하나를 선택할 수 있는 메뉴가 제공될 수 있다.
예컨대, 복수의 템플릿 컬러들은 레드, 오렌지, 브라운, 옐로우, 그린, 블루, 퍼플, 핑크 및 흑백을 포함할 수 있으나, 이에 한정되는 것은 아니다.
또한 사용자는 컬러 테마 설정 메뉴를 통해, 싱글 컬러, 그라데이션 여부, 그라데이션 정도, 투명도 등을 확인하고 적합한 테마(컬러 테마)를 선택할 수 있다.
레이아웃 설정모듈(230)은 웹사이트 DB(310)로부터 사용자 웹사이트 데이터 세트를 불러와 편집하고 다시 변경 사항 및 추가된 내용을 웹사이트 DB(310)로 업데이트 한다.　
사용자는 레이아웃 설정 메뉴를 통해 타겟 웹사이트의 레이아웃을 설정할 수 있다.
레이아웃 설정은 메인 페이지별, 서브 페이지별로 이루어질 수 있다.
먼저, 메인 페이지의 레이아웃이 설정될 수 있다.
레이아웃은 상단 메뉴의 크기, 주 메뉴의 크기, 위치, 서브 메뉴의 스타일(하단으로 정렬, 좌우로 정렬, 비주얼의 크기, 풀 화면, 일부 화면, 배너의 위치 등) 등을 포함할 수 있다.
사용자는 레이아웃 설정모듈(230)에서 제공하는 사용자 인터페이스를 이용하여 기본으로 설정된 레이아웃(또는 기본으로 설정된 레이아웃에 따른 설정값들)을 사용할 수도 있고, 일부를 변경하여 사용할 수도 있다.
내용구성 모듈(240) 역시 레이아웃 설정모듈(230)과 유사하게 웹사이트 DB(310)로부터 사용자 웹사이트 데이터 세트를 불러와 편집하고 다시 변경 사항 및 추가된 내용을 웹사이트 DB(310)로 업데이트 한다.
사이트 생성부(300)는 웹사이트 DB(310), 반응형 (해상도별) CSS파일 생성기(320) 및 반응형 유저 인터페이스 모듈(330)을 포함한다.
반응형 CSS파일 생성기(320)는 웹사이트 DB(310)에 저장되어 있는 사용자 웹사이트 데이터 세트의 레이아웃 세팅값과 테마 생성부(100)의 기본 설정부(110)의 기본 CSS 세팅값을 불러와 반응형 유저 인터페이스 모듈(330)에 반응형 사용자 웹사이트 CSS파일을 생성한다. 따라서 이 파일(사용자 웹사이트 CSS파일)은 각 도메인별(즉, 웹사이트별)로 다르게 생성된다.　
반응형 유저 인터페이스 모듈(330)은 크게 4가지의 서브 모듈을 포함한다.
예컨대, 반응형 유저 인터페이스 모듈(330)은 JS 모듈(331), html 모듈(333), css 모듈(335), 및 웹프로그램 모듈(337)을 포함한다. 웹 프로그램 모듈(337)은 웹 프로그램을 구동한다. 웹 프로그램의 예로는 php, asp, jsp 등 웹에서 구동되는 DB 연동 가능한 프로그램이 있다.
반응형 유저 인터페이스 모듈(330)은 반응형 CSS파일 생성기(320)에 의해 기 생성된 CSS파일과 웹사이트DB(310)의 컨텐츠 정보 및 CSS파일로 정리되지 않은 기타 레이아웃을 구성하는 값 또는 코드(HTML의 Inline 방식)를 불러오고 기본설정부(110)에 기세팅되어 있는 js(Javascript)관련 알고리즘을 불러와 사용자가　웹브라우저로 볼 수 있는 실제 반응형　웹사이트를 생성한다.
또한 사용자가 해당 사이트에 지정되어 있는 URL 방식으로 접속할 수 있도록 하며 접속 후 화면에서 웹의 각종 폼(input, select, textarea 등) 의 기능을 사용하여 사용자가 입력한 정보를 웹사이트DB(310)로 업데이트 하는 역할도 수행한다.
도 6 내지 도 17은 본 발명의 실시예에 따른 반응형 웹사이트 빌더 시스템(30)이 유저 인터페이스를 위해서 제공하는 페이지들(혹은 화면들)의 실시예를 도시한다. 예컨대, 도 6 내지 도 17은 반응형 웹사이트 빌더 시스템(30)의 유저 편집부(200)가 제공하는 유저 인터페이스 화면들일 수 있다.
사이트 메뉴 설정모듈(210)은 도 6 및 도 7에 도시된 바와 같은 사이트 메뉴 편집 화면을 제공할 수 있다. 사이트 메뉴 편집 화면은 사이트의 주메뉴와 서브 메뉴를 제공할 수 있다.
도 6에 도시된 실시예에 따르면, 사용자는 사이트메뉴 편집 화면에서, 잠금(①)을 해제한 후에 사이트메뉴를 편집할 수 있다. ②는 사이트의 주메뉴로서, 사용자는 주메뉴를 클릭하여 메뉴명을 수정할 수 있다. ③은 사이트의 서브메뉴이고, 서브메뉴는 주메뉴 밑에 속하는 메뉴로서, 사용자는 서브메뉴를 클릭하여 메뉴명을 수정할 수 있다. 사용자는 아이콘 클릭 후 드래그 앤 드롭으로 메뉴의 위치를 변경할 수도 있다.
도 6의 실시예에서는, 주메뉴는 최대 8개까지 만들 수 있도록 제공되나, 이에 한정되는 것은 아니다. 특정색(예컨대, 회색)으로 표시된 메뉴는 현재 사용하지 않는 메뉴(예컨대, 비활성화된 메뉴)일 수 있다. 사용자는 비활성화된 메뉴를 클릭하여 '사용'을 눌러 메뉴를 활성화 할 수 있다.
도 7의 실시예에서, 사용자는 수정할 주메뉴(②)를 선택할 수 있다. 수정할 주메뉴(②)를 선택하면 오른쪽에 편집창이 나타나며, 메뉴명(③)을 수정할 수 있다. 사용자가 '사용'(④)에 ON/OFF하여 주메뉴를 활성화/비활성화할 수 있다. 주메뉴를 수정한 후 '확인' 버튼(⑥)을 누르면 수정이 완료된다.
사이트 메뉴 편집 화면에 '컬러테마' 버튼(⑦)이 제공될 수 있고, 사용자가 '컬러테마' 버튼(⑦)을 클릭하면 컬러테마를 선택하는 페이지로 이동할 수 있다. 사용자는 주메뉴와 유사한 방식으로 서브 메뉴에 대하여 메뉴명 입력, 수정, 위치 변경, 서브메뉴의 기능을 지정할 수 있다.
서브메뉴의 기능은 이를테면 일반페이지, 일반게시판, 갤러리게시판, 문의상담(입력폼), 오시는길(지도) 등과 같이 사이트를 구성하는 기능별 컨텐츠를 의미한다.
테마선택모듈(220)은 도 8에 도시된 바와 같은 컬러테마 설정 화면을 제공할 수 있다. 컬러테마 설정 화면은 웹사이트의 컬러테마를 선택하는 페이지로서, 사용자는 미리 설정된 복수의 컬러 배색들(도 8의 ①) 중에서 원하는 컬러 배색을 선택할 수 있다. 컬러테마 설정 화면은 사용자가 복수의 테마에 대한 소개 및 예시 이미지(도 8의 ②)를 제공할 수 있다.
레이아웃 설정모듈(230)은 도 9에 도시된 바와 같은 메인 페이지 레이아웃 편집 화면을 제공할 수 있다.
메인 페이지 레이아웃 편집 화면은 사용자가 제작하는 타겟 웹사이트의 메인 페이지의 전체 레이아웃 모양을 단순화하여 알기 쉽게 확인하고 편집할 수 있도록 제공되는 페이지이다.
메인 페이지의 레이아웃은 도 9의 왼쪽에 보이는 이미지처럼 상단, 비주얼, 배너, 게시판, SNS, 동영상, 갤러리, 쇼핑몰, 하단 등으로 구성될 수 있으며 항목은 더 추가될 수 있다. 모든 항목은 순서를 변경할 수 있으나 일부항목(예컨대, 상단과 비주얼을 제외한 다른 항목)만 순서를 변경할 수 있도록 인터페이스를 구성할 수 도 있으며, 각 항목을 누르면 편집 팝업창이 나타날 수 있다.
메인 페이지 레이아웃 편집 화면은 서브페이지 레이아웃 편집 화면으로 이동할 수 있는 메뉴(①), 각 항목별 레이아웃 수정 후 저장된 내용을 미리 확인할 수 있는 메뉴(②), 전체항목 또는 사용항목 보기 메뉴(③) 등을 제공할 수 있다. 일부 항목은 사용하지 않으면 꺼둘 수 있다.
메인 페이지 레이아웃 편집 화면은 또한, 현재 선택된 컬러테마를 확인할 수 있는 메뉴(④), 콘텐츠 영역(내용 영역과 내용 밖의 여백을 구분하기 위한 그림자 처리 등)을 구분하기 위한 메뉴(⑤), 콘텐츠영역 바깥 부분(예컨대, 여백)의 색상을 선택할 수 있는 메뉴(⑥) 등을 제공할 수 있다.
도 10은 메인페이지 레이아웃에서 상단 항목(로고와 메뉴 부분)을 편집하는 팝업창의 일 예를 도시한다. 도 9의 메인 페이지 레이아웃 편집 화면에서 상단 항목을 누르면 도 10과 같은 상단 항목 편집 팝업창이 나타날 수 있다. 사용자는 상단 항목 편집 팝업창에서 상단의 레이아웃-예컨대, 배경색 범위, 로고와 주메뉴 정렬 방식, 주메뉴 라운드 크기, 서브메뉴 정렬 방식, 서브메뉴바 길이, 상단고정 여부 등-을 설정한 후 '저장' 버튼(①)을 누르면 변경할 내용이 웹사이트 DB(330)에 저장되고 팝업창이 닫힌다.
도 10의 팝업창의 하단의 동기화를 하면 웹사이트 DB(330)에 서비스 가능 테이블로 업데이트되어 실제 사용자의 웹사이트에 적용된다.
도 11은 메인 페이지 레이아웃에서 비주얼 항목을 편집하는 팝업창의 일 예를 도시한다. 도 9의 메인 페이지 레이아웃 편집 화면에서 비주얼 항목을 누르면 도 11과 같은 비주얼 항목 편집 팝업창(①)이 나타날 수 있다.
사용자는 비주얼 항목 편집 팝업창에서 비주얼의 레이아웃-예컨대, 영역 범위, 비주얼 크기, 비주얼 변환 방식, 변환 화살표 색 등-을 설정한 후 '저장' 버튼(②)을 누르면 변경할 내용이 저장되고 팝업창이 닫힌다.
도 12는 메인 페이지 레이아웃에서 배너를 편집하는 팝업창의 일 예를 도시한다. 도 9의 메인 페이지 레이아웃 편집 화면에서 배너 항목를 누르면 도 12와 같은 배너 항목 편집 팝업창이 나타날 수 있다.
사용자는 배너 항목 편집 팝업창에서 배너의 레이아웃-예컨대, 사용여부, 단 수, 이미지 비율, 텍스트 박스 위치 색 등-을 설정한 후 '저장' 버튼을 누르면 변경할 내용이 저장되고 팝업창이 닫힌다.
도 13은 메인 페이지 레이아웃에서 하단 항목을 편집하는 팝업창의 일 예를 도시한다. 도 9의 메인 페이지 레이아웃 편집 화면에서 하단 항목을 누르면 도 13과 같은 하단 항목 편집 팝업창이 나타날 수 있다.
하단 항목 편집 팝업창은 메인페이지 레이아웃에서 하단 부분을 편집하기 위한 유저 인터페이스이다.
사용자는 하단 항목 편집 팝업창에서 하단의 레이아웃-예컨대, 배경색 범위, 형태, 사용여부 등-을 설정한 후 '저장' 버튼을 누르면 변경할 내용이 저장되고 팝업창이 닫힌다.
상술한 바와 같이, 본 발명의 실시예에 따르면, 사용자는 메인 페이지 레이아웃 편집 화면에서의 메인 페이지의 각 레이아웃 요소들에 대한 선택만으로도 메인 페이지의 레이아웃을 원하는 레이아웃으로 설정할 수 있다. 이와 같이, 설정된 레이아웃 설정값들은 사용자의 선택(예컨대, 저장 버튼의 입력 혹은 동기화 선택)에 따라, 웹사이트 DB(310)에 사용자 웹사이트 데이터 세트의 일부로서 저장될 수 있다.
도 9 내지 도 13을 참조하여, 메인 페이지 레이아웃 편집 화면을 중심으로 메인 페이지 레이아웃을 설정하는 실시예에 대하여 설명하였으나, 서브 페이지 레이아웃 편집 역시 메인 페이지 레이아웃 편집과 유사하게 이루어질 수 있다.
내용구성 모듈(240)은 도 14 내지 도 17에 도시된 바와 같은 내용(콘텐츠) 편집 화면을 제공할 수 있다. 내용(컨텐츠) 편집 화면은 사용자 웹사이트 콘텐츠의 내용을 편집하고 관리하기 위하여 제공되는 페이지이다.
도 14를 참조하면, 내용(콘텐츠) 편집 화면은 레이아웃 내용관리 메뉴(①) 및 메뉴별 내용관리 메뉴(②)를 제공할 수 있다
레이아웃 내용관리 메뉴(①)는 레이아웃 편집 화면에서 설정한 항목의 내용을 편집하는 페이지들이 모여있는 메뉴이고, 메뉴별 내용관리 메뉴(②)는 각 서브메뉴에 들어갈 내용들을 편집, 관리하는 페이지들이 모여있는 메뉴이다.
내용구성 모듈(240)은 도 15에 도시된 바와 같은 메인페이지 상단 항목의 내용(콘텐츠)을 편집하는 페이지를 제공할 수 있다.
내용구성 모듈(240)은 또한, 도 16에 도시된 바와 같은 메인페이지 비주얼 항목의 내용(콘텐츠)을 편집하는 페이지를 제공할 수 있다.
내용구성 모듈(240)은 또한, 도 17에 도시된 바와 같은 메인페이지 배너 항목의 내용(콘텐츠)을 편집하는 페이지를 제공할 수 있다.
도 15 내지 도 17의 실시예에서는 메인페이지의 레이아웃 요소들에 상응하는 콘텐츠를 편집 및 구성하는 예를 도시하나, 서브 페이지에 대해서도 유사하게 콘텐츠를 편집 및 구성할 수 있다.
메뉴별 내용관리 메뉴(②)는 사이트 메뉴 설정모듈(210)에서 설정한 서브메뉴의 각 기능의 기 구현되어 있는 인터페이스에 따라 컨텐츠를 입력하는 방식으로 구성된다. 예를 들어 일반 게시판의 경우 제목 항목과 내용항목의 컨텐츠를 입력하고, 파일업로드 기능을 통해 파일을 첨부하며, 사용여부, 오픈시간 설정, 메인페이지 노출 등의 부가 기능을 설정할 수 있다.　
상술한 바와 같이, 본 발명의 실시예에 따르면, 사용자는 레이아웃 설정모듈(230)에서 설정된 각 레이아웃 요소들에 상응하는 콘텐츠를, 내용구성 모듈(240)에서 편리하게 편집할 수 있다.
본 발명은 또한 컴퓨터로 읽을 수 있는 기록매체에 컴퓨터가 읽을 수 있는 코드로서 구현하는 것이 가능하다. 컴퓨터가 읽을 수 있는 기록매체는 컴퓨터 시스템에 의하여 읽혀질 수 있는 데이터가 저장되는 모든 종류의 기록장치를 포함한다.
컴퓨터가 읽을 수 있는 기록매체의 예로는 ROM, RAM, Flash Memory, CD-ROM, 자기 테이프, 플로피 디스크, 광 데이터 저장장치 등이 있다.
또한 컴퓨터가 읽을 수 있는 기록매체는 네트워크로 연결된 컴퓨터 시스템에 분산되어, 분산방식으로 컴퓨터가 읽을 수 있는 코드가 저장되고 실행될 수 있다. 그리고 본 발명을 구현하기 위한 기능적인(functional) 프로그램, 코드 및 코드 세그먼트들은 본 발명이 속하는 기술분야의 프로그래머들에 의해 용이하게 추론될 수 있다.
본 발명은 도면에 도시된 일 실시 예를 참고로 설명되었으나 이는 예시적인 것에 불과하며, 본 기술 분야의 통상의 지식을 가진자라면 이로부터 다양한 변형 및 균등한 타 실시 예가 가능하다는 점을 이해할 것이다. 따라서, 본 발명의 진정한 기술적 보호 범위는 첨부된 등록청구범위의 기술적 사상에 의해 정해져야 할 것이다.
본 발명은 웹사이트(예컨대, 홈 페이지)의 제작 및 관리 등에 이용될 수 있다.

Claims (15)

  1. 테마별 및 해상도별로 복수의 레이아웃 설정값들을 포함하는 복수의 테마 데이터 세트들을 생성하고, 생성된 상기 복수의 테마 데이터 세트들을 테마 데이터베이스에 저장하는 테마 생성부;
    사용자의 선택에 따라, 상기 복수의 테마 테이터 세트들 중 선택된 하나의 테마 데이터 세트에 기초하여 사용자 웹사이트 데이터 세트를 생성하는 사용자 편집부; 및
    상기 사용자 웹사이트 데이터 세트에 기초하여 사용자 웹 사이트를 생성하는 사이트 생성부를 포함하고,
    상기 테마 생성부는
    테마 개발자에게 해상도별 레이아웃 설정값들을 설정할 수 있는 인터페이스를 제공하고, 상기 테마 개발자의 입력 또는 선택에 따라, 해상도별 레이아웃 설정값들을 생성하는 해상도별 레이아웃 설정부;
    상기 해상도별 레이아웃 설정부에 의해 설정된 레이아웃 설정값들에 따른 웹화면을 생성하여 디스플레이하는 반응형 화면 작업 뷰어; 및
    상기 해상도별 레이아웃 설정부에 의해 최종 설정된 값을 저장하는 테마 DB를 포함하며,
    상기 반응형 화면 작업 뷰어는
    PC, 태블릿, 단말기 가로, 및 단말기 세로를 선택할 수 있는 메뉴들을 제공하고,
    상기 테마 개발자에 의해 선택된 메뉴에 따라, 상기 복수의 레이아웃 설정값들 중 선택된 메뉴의 해상도에 상응하는 레이아웃 설정값들에 따라 선택된 메뉴의 해상도에 맞는 웹화면을 생성하여 디스플레이하는 반응형 웹사이트 빌더 시스템.
  2. 제1항에 있어서, 상기 복수의 레이아웃 설정값들은
    메인 페이지를 구성하는 복수의 메인 페이지 구성 항목들, 및 서브 페이지를 구성하는 복수의 서브 페이지 구성 항목들을 포함하고,
    상기 복수의 메인 페이지 구성 항목들 및 상기 서브 페이지 구성 항목들 각각은 하나 이상의 세부 항목 설정값을 포함하는 반응형 웹사이트 빌더 시스템.
  3. 제2항에 있어서,
    상기 세부 항목 설정값은 해상도에 따라 가변될 필요가 없는 비반응형 설정값 및 해상도에 따라 가변될 필요가 있는 반응형 설정값 중 하나인 반응형 웹사이트 빌더 시스템.
  4. 제2항에 있어서, 상기 메인 페이지 구성 항목들 및 상기 서브 페이지 구성 항목들 각각은
    상단, 메뉴, 로고, 상단비주얼, 배너, 게시판 스타일, 갤러리 스타일, 입력폼 스타일, 및 하단 스타일 중 적어도 하나를 포함하고,
    상기 세부 항목 설정값은
    컬러, 크기 및 여백값 중 적어도 하나를 포함하는 반응형 웹사이트 빌더 시스템.
  5. 제1항에 있어서, 상기 사용자 편집부는
    주메뉴와 주메뉴의 하단에 서브 메뉴를 추가하고 해당 메뉴의 기능을 선택할 수 있는 사용자 인터페이스를 제공하는 사이트 메뉴 설정모듈; 및
    상기 테마 데이터베이스에 저장되어 있는 상기 복수의 테마 데이터 세트들 중 레이아웃의 컬러세트를 선택할 수 있도록 컬러테마 설정메뉴를 제공하는 테마선택 모듈;
    상기 테마 데이터베이스에 저장되어 있는 상기 복수의 테마 데이터 세트들 중 여백, 배경, 레이아웃 및 모서리 스타일의 셋트의 위치 및 세부 설정값을 변경할 수 있는 레이아웃 설정 모듈; 및
    상기 사이트 메뉴 설정모듈에 의해 선택된 메뉴별 기능에 따라 유저가 추가 내용을 등록할 수 있는 내용구성모듈을 포함하는 반응형 웹사이트 빌더 시스템.
  6. 제5항에 있어서, 상기 컬러 테마는
    상기 테마생성부에서 설정한 레이아웃의 싱글 컬러, 그라데이션 여부, 그라데이션 정도, 또는 투명도가 설정되어 있는 값들의 특정 세트를 의미하고,
    상기 컬러테마 설정 메뉴는 상기 사용자가 상기 컬러 테마를 선택할 수 있도록 하는 사용자 인터페이스를 제공하는 반응형 웹사이트 빌더 시스템.
  7. 제5항에 있어서,
    상기 사용자 웹사이트 데이터 및 유저 편집부에서 설정한 설정값을 저장하는 웹사이트 데이터 베이스를 더 포함하고,
    상기 사용자 편집부는
    상기 웹사이트 데이터 베이스로부터 상기 사용자 웹사이트 데이터 세트 및 기능별로 등록한 내용을 불러와 편집하고 변경사항 및 추가 내용을 상기 웹사이트 데이터 베이스로 업데이트하는 반응형 웹사이트 빌더 시스템.
  8. 제1항에 있어서, 상기 사이트 생성부는
    상기 사용자 웹사이트 데이터 세트를 저장하고 사용자 편집부에서 설정한 값을 저장하는 웹사이트 데이터베이스;
    상기 웹사이트 데이터베이스에 저장된 상기 사용자 웹사이트 데이터 세트 중 제1 레이아웃 설정값들에 기초하여 해상도별 CSS(cascading　style　sheets) 파일을 생성하는 CSS 파일 생성기; 및
    상기 CSS 파일 및 상기 사용자 웹사이트 데이터 세트 중 제2 레이아웃 설정값들과 컨텐츠에 기초하여, 사용자 웹 사이트를 생성하는 반응형 유저 인터페이스 모듈을 포함하는 반응형 웹사이트 빌더 시스템.
  9. 테마별 및 해상도별로 복수의 레이아웃 설정값들을 포함하는 복수의 테마 데이터 세트들을 생성하는 단계;
    상기 복수의 테마 테이터 세트들 중 선택된 하나의 테마 데이터 세트에 기초하여 사용자 웹사이트 데이터 세트를 생성하는 단계; 및
    상기 사용자 웹사이트 데이터 세트에 기초하여 사용자 웹 사이트를 생성하는 단계를 포함하고,
    상기 테마 데이터 세트들을 생성하는 단계는
    테마 개발자에게 해상도별 레이아웃 설정값들을 설정할 수 있는 인터페이스를 제공하고, 상기 테마 개발자의 입력 또는 선택에 따라, 상기 복수의 레이아웃 설정값들을 생성하는 단계;
    상기 해상도별 레이아웃 설정부에 의해 설정된 레이아웃 설정값들에 따른 웹화면을 생성하여 반응형 화면 작업 뷰어의 화면에 디스플레이하는 단계; 및
    상기 해상도별 레이아웃 설정부에 의해 최종 설정된 값을 테마 DB에 저장하는 단계를 포함하며,
    상기 반응형 화면 작업 뷰어는
    PC, 태블릿, 단말기 가로, 및 단말기 세로를 선택할 수 있는 메뉴들을 제공하고,
    상기 테마 개발자에 의해 선택된 메뉴에 따라, 상기 복수의 레이아웃 설정값들 중 선택된 메뉴의 해상도에 상응하는 레이아웃 설정값들에 따라 선택된 메뉴의 해상도에 맞는 웹화면을 생성하여 디스플레이하는 반응형 웹사이트 제작 방법.
  10. 제9항에 있어서, 상기 사용자 웹사이트 데이터 세트를 생성하는 단계는
    상기 사용자 웹사이트의 사이트 메뉴를 설정할 수 있는 사이트 메뉴 템플릿들을 제공하고, 사용자의 선택에 따라 하나 이상의 주 메뉴 및 서브 메뉴를 설정하는 단계; 및
    상기 사용자 웹사이트의 컬러테마를 설정하기 위한 컬러테마 설정 화면을 제공하고, 사용자의 선택에 따라 상기 사용자 웹사이트의 컬러테마를 설정하는 단계를 포함하는 반응형 웹사이트 제작 방법.
  11. 제10항에 있어서, 상기 주 메뉴 및 서브 메뉴를 설정하는 단계는
    복수(2 이상)의 주메뉴 템플릿들을 제공하는 단계;
    상기 사용자의 선택에 따라, 상기 복수의 주메뉴 템플릿들 중 적어도 하나의 주메뉴를 활성화하는 단계;
    상기 활성화된 주메뉴의 주메뉴명이 설정되는 단계;
    상기 주메뉴의 하단에 상기 서브 메뉴 및 상기 서브메뉴의 서브메뉴명을 설정하는 단계; 및
    상기 서브메뉴를 미리 설정된 기능들 중 하나로 설정하는 단계를 포함하고,
    상기 서브 메뉴의 설정된 기능에 따라 상기 서브 메뉴의 페이지 타입 또는 양식이 달라지는 것을 특징으로 하는 반응형 웹사이트 제작 방법.
  12. 제10항에 있어서, 상기 사용자 웹사이트의 컬러테마를 설정하는 단계는
    상기 사용자 웹사이트의 메인 페이지 및 서브 페이지의 컬러, 여백, 및 배경 중 적어도 하나를 선택할 수 있는 메뉴를 제공하는 단계; 및
    상기 사용자가 테마설정부에서 미리 설정한 싱글 컬러, 그라데이션 여부, 그라데이션 정도, 또는 투명도에 따라 등록되어 있는 컬러 세트를 선택할 수 있도록 하는 메뉴를 제공하는 단계를 포함하는 반응형 웹사이트 제작 방법.
  13. 제10항에 있어서, 상기 사용자 웹사이트 데이터 세트를 생성하는 단계는
    상기 메인 페이지의 레이아웃을 편집하고 상기 메인 페이지 레이아웃의 구성 항목의 순서를 변경할 수 있는 메인 페이지 레이아웃 편집 화면를 제공하는 단계를 포함하고,
    상기 메인 페이지 레이아웃의 구성 항목은
    상단;
    비주얼, 배너, 게시판, 갤러리, 및 동영상을 포함하는 컨텐츠 박스; 및
    하단을 포함하는 반응형 웹사이트 제작 방법.
  14. 제13항에 있어서, 상기 사용자 웹사이트 데이터 세트를 생성하는 단계는
    상기 사용자 웹사이트의 콘텐츠의 내용을 편집하기 위한 콘텐츠 편집 화면을 제공하는 단계를 더 포함하고,
    상기 콘텐츠 편집 화면은 레이아웃 내용관리 메뉴 및 메뉴별 내용관리 메뉴를 포함하는 반응형 웹사이트 제작 방법.
  15. 제9항에 있어서, 상기 사용자 웹 사이트를 생성하는 단계는
    웹사이트 데이터베이스에 저장된 상기 사용자 웹사이트 데이터 세트 중 제1 레이아웃 설정값들에 기초하여 해상도별 CSS(cascading　style　sheets) 파일을 생성하는 단계; 및
    상기 CSS 파일 및 상기 사용자 웹사이트 데이터 세트 중 제2 레이아웃 설정값들과 컨텐츠에 기초하여, 상기 사용자 웹 사이트를 생성하는 단계를 포함하는 반응형 웹사이트 제작 방법.
PCT/KR2017/007378 2017-07-11 2017-07-11 반응형 웹사이트 빌더 시스템 및 그 방법 WO2019013364A1 (ko)

Priority Applications (1)

Application Number Priority Date Filing Date Title
PCT/KR2017/007378 WO2019013364A1 (ko) 2017-07-11 2017-07-11 반응형 웹사이트 빌더 시스템 및 그 방법

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
PCT/KR2017/007378 WO2019013364A1 (ko) 2017-07-11 2017-07-11 반응형 웹사이트 빌더 시스템 및 그 방법

Publications (1)

Publication Number Publication Date
WO2019013364A1 true WO2019013364A1 (ko) 2019-01-17

Family

ID=65002209

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/KR2017/007378 WO2019013364A1 (ko) 2017-07-11 2017-07-11 반응형 웹사이트 빌더 시스템 및 그 방법

Country Status (1)

Country Link
WO (1) WO2019013364A1 (ko)

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20130040057A (ko) * 2011-10-13 2013-04-23 (주)나모인터랙티브 ＳａａＳ 환경에서의 홈페이지 제작 시스템 및 방법, 그 방법을 컴퓨터에서 실행하기 위한 컴퓨터 프로그램이 기록된, 컴퓨터로 판독 가능한 기록 매체
US20140075283A1 (en) * 2012-09-07 2014-03-13 Vistaprint Technologies Limited Website Builder Systems and Methods with Device Detection to Adapt Rendering Behavior Based on Device Type
KR101546725B1 (ko) * 2015-01-26 2015-08-25 (주)유코아시스템 반응형 레이아웃 설계 방법
KR101629383B1 (ko) * 2015-11-11 2016-06-13 채규국 클라우드 웹하드 파일 및 폴더 아키텍처에 의한 홈페이지 자동구성을 위한 방법, 그 시스템
KR101760777B1 (ko) * 2016-01-09 2017-08-04 주식회사 넥스트비즈 반응형 웹사이트 빌더 시스템 및 그 방법

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20130040057A (ko) * 2011-10-13 2013-04-23 (주)나모인터랙티브 ＳａａＳ 환경에서의 홈페이지 제작 시스템 및 방법, 그 방법을 컴퓨터에서 실행하기 위한 컴퓨터 프로그램이 기록된, 컴퓨터로 판독 가능한 기록 매체
US20140075283A1 (en) * 2012-09-07 2014-03-13 Vistaprint Technologies Limited Website Builder Systems and Methods with Device Detection to Adapt Rendering Behavior Based on Device Type
KR101546725B1 (ko) * 2015-01-26 2015-08-25 (주)유코아시스템 반응형 레이아웃 설계 방법
KR101629383B1 (ko) * 2015-11-11 2016-06-13 채규국 클라우드 웹하드 파일 및 폴더 아키텍처에 의한 홈페이지 자동구성을 위한 방법, 그 시스템
KR101760777B1 (ko) * 2016-01-09 2017-08-04 주식회사 넥스트비즈 반응형 웹사이트 빌더 시스템 및 그 방법

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
UXIS: "Responsive Web Based WebBuilder System v1.0", BLOG.NAVER, 12 July 2016 (2016-07-12), Retrieved from the Internet <URL:http://blog.naver.com/PostView.nhn?blogId=arias419&logNo=220760330970> *

Similar Documents

Publication Publication Date Title
KR101760777B1 (ko) 반응형 웹사이트 빌더 시스템 및 그 방법
WO2013157678A1 (ko) 웹페이지의 동적 변환 시스템, 방법 및 컴퓨터 판독 가능한 기록 매체
US6996780B2 (en) Method and system for creating a place type to be used as a template for other places
US20020149618A1 (en) Method and system for creating a theme of a place to be used as a template for other places
WO2017039337A1 (en) Method and device of tagging links included in a screenshot of webpage
WO2021066325A1 (ko) 웹 페이지를 생성하는 방법 및 장치
WO2018131825A1 (ko) 전자책 서비스 제공방법 및 그를 위한 컴퓨터 프로그램
WO2016032080A1 (ko) 메타 데이터를 이용한 차트 변환 시스템 및 그 방법
CN104410720A (zh) 一种基于web图形的实时监控平台***及其方法
WO2016126018A1 (ko) 메신저의 대화내용을 관리하는 방법과 시스템 및 기록 매체
WO2009131354A2 (ko) 웹브라우징 시스템
CN116484812A (zh) 一种离线页面签批及阅读流转的方法和***
WO2024096146A1 (ko) 제작 데이터 및 사용 데이터를 이용한 사용자 추천 방법 및 이를 위한 장치
WO2019027070A1 (ko) 웹 사이트 제작 지원 서버 및 이에 의한 웹 사이트 제작 지원 방법
WO2016186325A1 (ko) 이미지가 이용되는 소셜 네트워크 서비스 시스템 및 방법
WO2018105804A1 (ko) Bpm 기반의 iot diy 시스템 및 이의 구현방법
WO2020048424A1 (zh) 网页构建方法、装置和存储介质
WO2016114493A1 (ko) 매체에 맞춰진 광고를 제공하는 방법 및 장치
WO2012033337A2 (en) Multimedia apparatus and method for providing content
WO2014030869A1 (ko) 스마트 ｔｖ에서 디지털 사이니지 탬플릿을 편집하기 위한 시스템 및 그 방법
EP2776937A1 (en) System and method of sharing application information
CN108897541A (zh) 应用程序的视觉还原方法、装置、存储介质及终端
WO2022255571A1 (ko) 쌍방향 참여형 그림 제작 서비스 제공 시스템 및 이의 제어방법
WO2014081122A1 (ko) 모바일 단말의 홈 스크린 큐레이션 시스템
WO2019013364A1 (ko) 반응형 웹사이트 빌더 시스템 및 그 방법

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 17917803

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

32PN Ep: public notification in the ep bulletin as address of the adressee cannot be established

Free format text: NOTING OF LOSS OF RIGHTS PURSUANT TO RULE 112(1) EPC (EPO FORM 1205A DATED 15.04.2020)

122 Ep: pct application non-entry in european phase

Ref document number: 17917803

Country of ref document: EP

Kind code of ref document: A1