KR102453345B1 - Method, system, and non-transitory computer readable record medium for business cooperation using desing kit - Google Patents

Abstract

Disclosed are a method, a system, and a non-transitory computer-readable recording medium for business collaboration using a design kit. It is possible to provide a site for screen design work collaboration. At this time, design elements used for screen composition can be provided by coding them into components that include state expression and interaction, and screens can be configured using these components.

Description

Method, system, and non-transitory computer-readable recording medium for business collaboration using a design kit

The description below relates to the technology that supports business collaboration on screen design.

The language currently used on the web is HTML (Hyper Text Markup Language), which does not use special data types, is highly portable, and is easy to use. HTML can be easily created and edited by general users without specialized programming knowledge.

For example, Korean Patent Laid-Open Publication No. 10-2002-0031501 (published on May 02, 2002) discloses a technique for creating a homepage on the web using an HTML code.

Since HTML has a simple structure, it is an expression language for formatting and layout, not a language for describing data, so it is suitable for simply creating hypertext documents, but has limitations in creating complex and structured documents. .

To supplement this, it is being developed together with languages such as CGI (Common Gateway Interface), PHP (Professional HTML Preprocessor), ASP (Active Server Page), and JSP (Java Server Page).

However, since a plurality of functional blocks are complexly configured to generate one screen, there is a problem in that code complexity and mutual interference are increased, and reusability is reduced.

It provides a work collaboration method and system that allows planners, designers, and developers participating in screen design to maintain consistency even if they work independently.

It provides a work collaboration method and system that can shorten development time by reducing repetitive processes for each project by using a design kit.

It provides a work collaboration method and system that can support easy and fast communication with an intuitive component design.

A method executed in a computer system, the computer system comprising at least one processor configured to execute computer readable instructions contained in a memory, and providing a site for business collaboration of screen design, the method comprising: providing, by at least one processor, coding a design element used for screen composition into a component including a state expression and an interaction; and configuring, by the at least one processor, a screen using the component in a process of developing a screen to be serviced.

According to one aspect, the providing may include providing the component together with a source code by coding an interaction for each state of the component.

According to another aspect, the providing may include providing the component as a set with a source code mirrored with the component by coding an interaction for each state of the component.

According to another aspect, the providing may include copying and providing a source code of the component when the component is selected.

According to another aspect, the providing may include configuring an icon, which is one of the design elements, into a font-type component.

According to another aspect, the providing may include coding a module composed of a combination of two or more components and providing the code in module units.

According to another aspect, the providing may further include providing a template unit by coding a template composed of a combination of two or more modules.

According to another aspect, the method may further include providing, by the at least one processor, a grid layout including a rule per column and a rule per row.

According to another aspect, in the configuring, the screen may be configured by arranging the components in the grid layout according to the column-based rule and the row-based rule.

According to another aspect, the providing of the grid layout may include providing a responsive layout in which the component changes based on a grid rule according to a resolution of a device.

According to another aspect, the providing of the grid layout may include providing the grid layout including a column unit that can be divided into at least two equal parts and a row unit having a predetermined height.

According to another aspect, the site may provide a screen development process using a design kit including the component.

According to another aspect, the site may provide at least one of a design consulting process and a wireframe process using the design kit before the screen development process.

There is provided a computer program stored in a non-transitory computer-readable recording medium for executing the method in the computer system.

There is provided a non-transitory computer-readable recording medium in which a program for executing the method in a computer is recorded.

A computer system comprising at least one processor implemented to execute computer readable instructions contained in a memory, wherein the at least one processor provides a site for screen design business collaboration, and is used for screen configuration a component providing unit that codes and provides design elements to be used as components including state expression and interaction; a layout providing unit that provides a grid layout including column-based rules and row-based rules; and a screen configuration unit configured to configure a screen by arranging the components in the grid layout according to the column-wise rule and the row-wise rule.

According to embodiments of the present invention, a consistent response and user experience (UI) and user interface (UI) are maintained by componentizing repeated design elements and using them to configure the screen according to the service design by the developer himself. can

According to embodiments of the present invention, it is possible to provide an efficient design process by omitting the repetitive design process for all people participating in screen design, such as planners, designers, and developers, and to support easy and quick communication through intuitive component design. can

1 is a diagram illustrating an example of a network environment according to an embodiment of the present invention.
2 is a block diagram illustrating the internal configuration of an electronic device and a server according to an embodiment of the present invention.
3 is a diagram illustrating an example of components that a processor of a server may include according to an embodiment of the present invention.
4 is a flowchart illustrating an example of a method that a server may perform according to an embodiment of the present invention.
5 is a diagram for describing a type of component by state according to an embodiment of the present invention.
6 shows an example of a component in one embodiment of the present invention.
7 illustrates a type of input, which is an example of a component, for each state according to an embodiment of the present invention.
8 shows an example of a coded component in an embodiment of the present invention.
9 shows an example of a module that is a set of components according to an embodiment of the present invention.
10 shows an example of a template that is a module set according to an embodiment of the present invention.
11 is an exemplary diagram for explaining the fontization of icons according to an embodiment of the present invention.
12 shows an example of an icon type according to an embodiment of the present invention.
13 shows an example of utilizing code copy of an icon according to an embodiment of the present invention.
14 to 17 are diagrams illustrating a layout example of a grid system for configuring a screen according to an embodiment of the present invention.

Hereinafter, embodiments of the present invention will be described in detail with reference to the accompanying drawings.

Embodiments of the present invention relate to a technology for supporting business collaboration for screen design.

Design elements that are repeated specifically disclosed in this specification can be componentized and supported so that a developer can configure a screen according to a service design by using the component.

1 is a diagram illustrating an example of a network environment according to an embodiment of the present invention. The network environment of FIG. 1 shows an example including a plurality of electronic devices 110 , 120 , 130 , 140 , a plurality of servers 150 , 160 , and a network 170 . 1 is an example for explaining the invention, and the number of electronic devices or the number of servers is not limited as in FIG. 1 .

The plurality of electronic devices 110 , 120 , 130 , and 140 may be a fixed terminal implemented as a computer system or a mobile terminal. Examples of the plurality of electronic devices 110 , 120 , 130 , 140 include a smart phone, a mobile phone, a navigation device, a computer, a notebook computer, a digital broadcasting terminal, a personal digital assistant (PDA), and a portable multimedia player (PMP). ), tablet PCs, game consoles, wearable devices, Internet of things (IoT) devices, virtual reality (VR) devices, augmented reality (AR) devices, and the like. As an example, in FIG. 1 , the shape of a smartphone is shown as an example of the electronic device 110 , but in embodiments of the present invention, the electronic device 110 is substantially configured to be different through the network 170 using a wireless or wired communication method. It may refer to one of various physical computer systems capable of communicating with the electronic devices 120 , 130 , 140 and/or the servers 150 and 160 .

The communication method is not limited, and a communication method using a communication network (eg, a mobile communication network, a wired Internet, a wireless Internet, a broadcasting network, a satellite network, etc.) that the network 170 may include, as well as a short-distance wireless communication between devices may be included. can For example, the network 170 may include a personal area network (PAN), a local area network (LAN), a campus area network (CAN), a metropolitan area network (MAN), a wide area network (WAN), and a broadband network (BBN). , the Internet, and the like. In addition, the network 170 may include any one or more of a network topology including a bus network, a star network, a ring network, a mesh network, a star-bus network, a tree, or a hierarchical network, etc. not limited

Each of the servers 150 and 160 communicates with the plurality of electronic devices 110 , 120 , 130 , 140 and the network 170 through a computer device or a plurality of computers providing commands, codes, files, contents, services, etc. It can be implemented in devices. For example, the server 150 may be a system that provides a first service to a plurality of electronic devices 110 , 120 , 130 , 140 connected through the network 170 , and the server 160 is also a network ( It may be a system that provides the second service to the plurality of electronic devices 110 , 120 , 130 , and 140 connected through 170 . As a more specific example, the server 150 is installed in the plurality of electronic devices 110 , 120 , 130 , and 140 through an application as a computer program that is driven, and provides a service (eg, a business collaboration service, etc.) for the purpose of the application. may be provided to the plurality of electronic devices 110 , 120 , 130 , and 140 as a first service. As another example, the server 160 may provide a service for distributing a file for installing and driving the above-described application to the plurality of electronic devices 110 , 120 , 130 , and 140 as the second service.

2 is a block diagram for explaining the internal configuration of an electronic device and a server according to an embodiment of the present invention. In FIG. 2 , the internal configuration of the electronic device 110 and the server 150 will be described as an example of the electronic device. In addition, other electronic devices 120 , 130 , 140 or server 160 may also have the same or similar internal configuration as the aforementioned electronic device 110 or server 150 .

The electronic device 110 and the server 150 may include memories 211 and 221 , processors 212 and 222 , communication modules 213 and 223 , and input/output interfaces 214 and 224 . The memories 211 and 221 are non-transitory computer-readable recording media, and are non-transitory computer-readable recording media, such as random access memory (RAM), read only memory (ROM), disk drive, solid state drive (SSD), flash memory, and the like. It may include a permanent mass storage device. Here, a non-volatile mass storage device such as a ROM, an SSD, a flash memory, a disk drive, etc. may be included in the electronic device 110 or the server 150 as a separate permanent storage device distinct from the memories 211 and 221 . In addition, in the memories 211 and 221 , an operating system and at least one program code (eg, a browser installed and driven in the electronic device 110 or codes for an application installed in the electronic device 110 to provide a specific service) can be stored. These software components may be loaded from a computer-readable recording medium separate from the memories 211 and 221 . The separate computer-readable recording medium may include a computer-readable recording medium such as a floppy drive, a disk, a tape, a DVD/CD-ROM drive, and a memory card. In another embodiment, the software components may be loaded into the memories 211 and 221 through the communication modules 213 and 223 rather than the computer-readable recording medium. For example, the at least one program is a computer program installed by files provided through the network 170 by a file distribution system (eg, the above-described server 160 ) for distributing installation files of developers or applications. It may be loaded into the memories 211 and 221 based on (eg, the above-described application).

The processors 212 and 222 may be configured to process instructions of a computer program by performing basic arithmetic, logic, and input/output operations. The instructions may be provided to the processors 212 and 222 by the memories 211 and 221 or the communication modules 213 and 223 . For example, the processors 212 and 222 may be configured to execute received instructions according to program codes stored in a recording device such as the memories 211 and 221 .

The communication modules 213 and 223 may provide a function for the electronic device 110 and the server 150 to communicate with each other through the network 170 , and the electronic device 110 and/or the server 150 may communicate with each other through the network 170 . A function for communicating with an electronic device (eg, the electronic device 120 ) or another server (eg, the server 160 ) may be provided. For example, a request generated by the processor 212 of the electronic device 110 according to a program code stored in a recording device such as the memory 211 is transmitted to the server 150 through the network 170 under the control of the communication module 213 . ) can be transferred. Conversely, a control signal, command, content, file, etc. provided under the control of the processor 222 of the server 150 passes through the communication module 223 and the network 170 to the communication module 213 of the electronic device 110 . ) through the electronic device 110 may be received. For example, a control signal, command, content, or file of the server 150 received through the communication module 213 may be transmitted to the processor 212 or the memory 211 , and the content or file may be transmitted to the electronic device ( 110) may be stored as a storage medium (the above-described permanent storage device) that may further include.

The input/output interface 214 may be a means for interfacing with the input/output device 215 . For example, the input device may include a device such as a keyboard, mouse, microphone, camera, and the like, and the output device may include a device such as a display, speaker, haptic feedback device, and the like. As another example, the input/output interface 214 may be a means for an interface with a device in which functions for input and output are integrated into one, such as a touch screen. The input/output device 215 may be configured as one device with the electronic device 110 . In addition, the input/output interface 224 of the server 150 may be a means for interfacing with a device (not shown) for input or output that is connected to the server 150 or that the server 150 may include. As a more specific example, when the processor 212 of the electronic device 110 processes a command of a computer program loaded in the memory 211 , a service configured using data provided by the server 150 or the electronic device 120 . A screen or content may be displayed on the display through the input/output interface 214 .

In addition, in other embodiments, the electronic device 110 and the server 150 may include more components than those of FIG. 2 . However, there is no need to clearly show most of the prior art components. For example, the electronic device 110 is implemented to include at least a part of the above-described input/output device 215 or other components such as a transceiver, a global positioning system (GPS) module, a camera, various sensors, and a database. may include more. As a more specific example, when the electronic device 110 is a smart phone, an acceleration sensor or a gyro sensor, a camera module, various physical buttons, a button using a touch panel, an input/output port, and a vibrator for vibration generally included in the smart phone Various components such as may be implemented to be further included in the electronic device 110 .

Hereinafter, specific embodiments of a method and system for business collaboration using a design kit will be described.

3 is a block diagram illustrating an example of components that a processor of a server may include according to an embodiment of the present invention, and FIG. 4 is an example of a method that the server may perform according to an embodiment of the present invention is a flowchart showing

The server 150 according to the present embodiment serves as a service platform that provides a business collaboration service. The server 150 may be configured with a computer-implemented design work collaboration system. The server 150 targets a plurality of electronic devices 110 , 120 , 130 , 140 that are clients, and a dedicated application or server ( 150), it is possible to provide a work collaboration service for screen design through access to a web/mobile site. In particular, the server 150 may provide a new design process capable of omitting a repetitive design process while maintaining a consistent work for screen design using a design kit.

The processor 222 of the server 150 is a component for performing the design task collaboration method according to FIG. 4 , and as shown in FIG. 3 , a component providing unit 310 , a layout providing unit 320 , and a screen configuration It may include a unit 330 . Depending on the embodiment, components of the processor 222 may be selectively included in or excluded from the processor 222 . In addition, according to an embodiment, the components of the processor 222 may be separated or combined to express the functions of the processor 222 .

The processor 222 and the components of the processor 222 may control the server 150 to perform the steps S410 to S430 included in the design work collaboration method of FIG. 4 . For example, the processor 222 and components of the processor 222 may be implemented to execute instructions according to the code of the operating system included in the memory 221 and the code of at least one program.

Here, the components of the processor 222 may be expressions of different functions performed by the processor 222 according to instructions provided by the program code stored in the server 150 . For example, the component providing unit 310 may be used as a functional representation of the processor 222 that controls the server 150 according to the above-described instruction so that the server 150 provides the components of the design element.

The processor 222 may read a necessary command from the memory 221 in which the command related to the control of the server 150 is loaded. In this case, the read command may include a command for controlling the processor 222 to execute steps S410 to S430 to be described later. Steps S410 to S430 to be described later may be performed in an order different from that shown in FIG. 4 , and some of the steps S410 to S430 may be omitted or additional processes may be further included.

Referring to FIG. 4 , in step S410 , the component providing unit 310 may provide componentized design elements necessary for screen configuration. All people who make services such as planners, designers, and developers who participate in screen design (hereinafter, collectively referred to as 'users') must design including all states that change to respond to actions in addition to the default design. Since there are not one or two design elements, there is a problem that they are accidentally omitted or cannot be distributed due to the priority of the development side. To solve this problem, it is necessary to work collaboratively to maintain a consistent response by coding the components that consider all responses. The component providing unit 310 may code a component including a state expression and an interaction for each design element and provide it together with a source code. It is to provide an environment that allows communication between planners, designers, and developers by code. It provides a UI with interaction in consideration of UX and how the UI works by coding and providing the source code mirrored to the UI as a set to design all users. and code can be checked at the same time and can support consistent operation.

In step S420, the layout providing unit 320 provides a responsive layout in order to respond to the resolution of various devices such as mobile, tablet, and desktop. You can provide a layout of the grid system that contains it. For example, the layout providing unit 320 provides a layout of a grid system composed of 12 column units necessary for responsiveness and 32 pixel high row units in which various components can be easily arranged. When using a layout that includes column and row units, both developers and users can place components, and through this, the configured screen can be automatically implemented in a responsive manner.

In step S430 , the screen configuration unit 330 may configure the screen by arranging the components according to the user selection in the layout based on the rules of the row unit and the column unit. Developers can directly compose the screen they want to service by using pre-made components and layout systems without a designer's page design. In the present embodiment, design resources that are repeatedly used in screen design can be built as a library and applied to screen configuration. When selecting a component, the screen configuration unit 330 may configure a service screen with consistent resources by copying the source code of the selected component and arranging the component and the source code as a set in a layout. For example, by embedding all icons in fonts and copying the source code to compose the screen, there is no fear of changing the icons, and since the icons are also fonts, you can adjust the icon size just like you would adjust the font size.

The server 150 according to the present embodiment provides a design kit site that can configure a service screen using pre-made components and a layout system. Using these design kit sites, developers can directly develop service screens without designer intervention.

In some cases, UX/UI consulting may be provided for the smooth use of the design kit. The screen configuration unit 330 may request UX/UI consulting as the designer's page design according to the developer's request before the developer uses the design kit. For example, the screen configuration unit 330 may provide additional scripts and style file loading as a third-party library. The screen configuration unit 330 includes a custom scrolling, interactive tree structure, chart function, resizing function, sorting function, time selection function, date and time selection function, slide screen switching function, image preview function (drag and drop file upload) etc. can be provided. In this embodiment, a separate process in which the designer conducts UX/UI consulting using a design kit and guides the development side before the developer's screen composition may be included.

In other cases, if the designer first organizes the wireframe using a pre-made design kit, the designer can provide UX/UI consulting on the designer's wireframe to design additional components if necessary. You can create service screens with pre-made design kits and components newly added by designers.

As a design process using the design kit site, (1) a process in which a developer directly composes a service screen using a design kit (component and layout system) made in advance according to the service design without the intervention of a designer, (2) a service design process After UX/UI consulting by designer using design kit, the process in which the developer composes the service screen based on the designer’s consulting, and (3) for service design, when the planner first organizes the wireframe using the design kit, the designer After designing the additionally required components, the developer can provide the process of composing the service screen with the design kit and the added components.

The design process using the design kit can include a design QA (Quality Assurance, a stage of testing and inspection before product release) process, through which the designer can give a code opinion on the service screen created by the developer.

Hereinafter, a detailed embodiment of the design kit will be described.

A design kit can consist of three units: a component, a module, and a template. A component is a basic unit element and refers to a design element constituting a user interface (UI), and all components have a function as each component. A combination of these components is defined as a module. In addition, a template is a design element including a layout, and refers to a unit provided by combining at least two or more components or modules according to a purpose (eg, search, etc.).

All components of the design kit visualize and show the state of the component through interaction to induce the user to take an action or to intuitively know the state of the component. It responds immediately to the user's action, the user can check the clear result, and can provide consistency throughout the service through a unified interaction.

As an example, there are 4 types of each state of a component. Referring to FIG. 5 , a button 500 as an example of a component may include a hover state, an enabled state, a focus state, and a disabled state. The hover state is the state that is expressed when the user moves the cursor over the actionable component, the active state is the state of the actionable component, the focus state is the user highlighting the component or selecting an option, and the inactive state is the action Indicates the state of an impossible component.

All components must have these four state expressions, and the user can recognize the reaction to his or her actions through the component's state.

6 shows examples of components such as a button, an input, a menu, a pagination, a check box, a radio button, and a dropdown. .

As an example of a component, input means a field for a user to input data. Unlike other components, as shown in FIG. 7 , in the input 700 , cases such as a helper, an error, a success, and a required input exist according to data. Before input, auxiliary text helps understanding, and after input, the result according to the entered value can be displayed. Through this, the user can receive feedback and intuitive situation recognition is possible by setting different colors for each situation. For example, as a color for each situation, Red for error, Green for completion, and Blue for mandatory input can be applied.

These inputs can be used in combination with various functions and components. It can be divided into two types depending on whether or not a title is provided in front of the input box, and all types are provided with three states: active state, inactive state, and read-only state.

The processor 222 codes and provides a component including a state expression and interaction, and as shown in FIG. 8 , a component 801 corresponding to a basic input type and a source code 802 of the component 801 are provided. It can be provided as a set. In other words, when multiple states exist in one input component 801 , the corresponding component 801 may be provided as a set concept including the source code 802 by coding the interaction for each state. In the interface screen to which the source code 802 is exposed, a 'magnify' button 81 for viewing the entire code and a 'copy' button 82 for copying the code may be included.

The source code 802 may be provided in a method that is automatically copied when the component 801 is selected without exposure, in addition to being directly exposed together with the component 801 .

The processor 222 may also code and provide a module composed of a combination of two or more components, for example, a calendar component may be included in the input component to provide a module capable of selecting a date as input data. As shown in FIG. 9 , the processor 222 includes a module 901 in which a calendar component and an input component are combined, and a monthly calendar is included in the input to select a date, and the source code of the module 901 ( 902) can be provided as a set. In this case, the processor 222 may further include a function of providing a list in which the unit of year, month, and day can be selected within the calendar, and a function of limiting a set period by adding an option value. In addition to the calendar component, when an input component with a title is used, a drop-down component, a tree menu component, and various layer type components may be combined with the title to be coded in module units and provided.

The processor 222 may also code a template composed of a combination of two or more modules to provide the template and the source code of the corresponding template as a set. Referring to FIG. 10 , in units of templates in which two or more modules are combined, for example, a search template 1001 for inputting three or less conditions, a search template 1002 for inputting five or more conditions, etc. are each source You can provide it with code.

An icon, which is another example of a component, may be componentized in the form of a text font. Referring to FIG. 11 , the icon 1100 is based on a circle and a rectangle, and the size of the icon 1100 can be freely changed within the grid 1101 of a certain area (eg, a square), and the ratio can be adjusted depending on which object is expressed. It is composed of components in the form of a font. In this case, uniformity can be given to the icon by using a certain inclination, for example, 0°, 45°, and 90° can be used and additionally applied by inverting left and right.

Referring to FIG. 12 , the icon 1100 may be divided into a line icon that simply expresses a shape with a line, a solid icon that can visually and clearly convey, a color icon whose color changes according to a theme, and the like.

The processor 222 may code and provide the icon component, and the icon may also provide the icon component and the source code of the corresponding icon as a set like other components.

The processor 222 may provide a library in which icons are collected, and when a user clicks an icon in the library, the code of the corresponding icon is copied and can be directly used for screen configuration. The processor 222 may provide an icon list 1300 in the library as shown in FIG. 13 , and when the user selects a specific icon 1301 in the icon list 1300, a notification 1302 for code copying. ) can be exposed. As the code is copied through the selection of the icon 1301, the code class for the icon 1301 can be directly applied by pasting it into a document.

In addition to icons, illustration is also one of the design elements often used as a sympathetic element, so it can be componentized like icons and built into a component library that can be used for screen composition.

Accordingly, the processor 222 may provide not only components in the screen configuration, but also a component group with high frequency of use in a modular way, and furthermore, it is also possible to provide a template unit with a layout.

The processor 222 may provide a layout of a grid system for screen configuration. As an example, the processor 222 may use a bootstrap-based 12 grid system as a dedicated layout for the design kit. A responsive layout can be applied to respond to the resolution of various devices such as mobile, tablet, and desktop, and a dynamically changing layout can be provided to show a suitable screen configuration for each device.

The purpose of layout design is to provide users with the same experience even if the resolution changes. . There is no need to design a different structure for each device because the component changes according to the resolution.

For example, referring to FIG. 14 , the processor 222 may provide a layout consisting of 12 column units, and the reason why the column units are set to 12 grids is that an efficient layout can be configured. Since 12 is divided into 1, 2, 3, 4, 6, and 12, the screen can be configured in various ways. It is possible to show different contents by dividing each grid into three grids.

In addition, the processor 222 may provide a layout including a row unit rule for efficiently arranging components. A layout is available that is designed to fit all components such as buttons, inputs, data tables, lists, etc. in rows that are 32 pixels high, allowing you to stack various components in rows that can be easily arranged in rows. Using the 32-pixel-high row rule and the 12-grid column rule, developers can place components without a design guide, and the configured screen can be implemented automatically and responsively.

15 shows an example of the structure of the entire page for the screen composition, and the page structure is shown in units of classes.

Referring to FIG. 15 , app 1510 means a starting point of a page.

The content-wrap 1520 may be defined as the entire area of the body, for example, with a minimum width of 960 pixels to correspond to a tablet size.

The flexible-lnb (1530) is a left navigation bar (LNB) area, which can be expanded from a basic width of 250 pixels to 500 pixels, and has a width of 40 pixels when closed.

flexible-content (1540) is a body area excluding flexible-lnb (1530), and is composed of header-top-wrap (1550), content-header (1560), and content-body (1570), and flexible-lnb (1530) ), the width value changes dynamically according to the change in width.

The header-top-wrap 1550 is a space used as a global navigation bar (GNB) area, and defines a basic right alignment.

The content-header 1560 is the title area of the page, and the area to which the actual title is applied has a height of 80 pixels and may include a bottom margin.

The content-body(1570) is a space where all components are actually applied. For example, it has a minimum width of 860 pixels, and can have a margin of 30 pixels on the left and right and 60 pixels on the bottom. follow

16 shows an example of a form structure of a page, which is applied inside the content-body 1570 .

Referring to FIG. 16 , a form-area 1610 is a starting point of a form, and may be omitted when a form-group row (single row) 1630 is included in another structure.

The form-wrap 1620 is a unit of division of the form area, and includes a form-group row 1630 therein. Between the form-wrap 1620 and the form-wrap 1620, an upper and lower 20 pixel interval and a dividing line are generated.

The form-group row (1630) defines one row, and has a height of 32 pixels and a bottom margin of 13 pixels. Inside the form-group, components can be placed according to the 12 grid system. The left label area is defined by two columns, and the right component area is defined by 6 or 10 columns by default.

The form-bottom (1640) is arranged at the bottom of the form, and is mainly an area in which buttons are arranged. It has a margin of 20 pixels at the top and 60 pixels at the bottom.

The form layout is a basic layout constituting the content-body 1570, and as an example, as shown in FIG. 17, one row is composed of a label area (form-label) 1701 and a component area (row) 1702 .

The label area 1701 is defined in two columns, and the component area 1702 is defined in six or ten columns. The 6-column component area 1702 is used for row-by-row components (eg, input, drop-down, etc.), and the 10-column component area 1702 is used for per-plane components (eg, text area). , tables, etc.).

The processor 222 may provide a divided form layout, which may be used to divide the form area at a predetermined ratio, and may be equally divided when applied to a predetermined number of grid units according to the 12 grid system.

The processor 222 may provide a form layout including a title area, which may be used when grouping into sub-elements. The title area can be applied as a title-wrap class inside the form-wrap 1620, has a height of 32 pixels, and has a margin of 10 pixels at the top and 20 pixels at the bottom based on the dividing line.

The processor 222 may provide a form layout including essential inputs, and applies a 12-grid system structure to have a structure similar to the title area described above.

Since the above-mentioned form layout types arrange components in a 12 grid system, it is difficult to express a fixed horizontal width area. A form table that can define fixed values for each column and dynamically changing columns can be applied.

Although the layout to which the 12 grid system is applied has been described above, the present invention is not limited thereto, and the layout structure, grid rules, etc. can be freely changed according to a service target device or a design screen configuration.

As described above, according to embodiments of the present invention, a consistent response can be maintained by componentizing repeated design elements and using them to configure a screen according to a service design by a developer. In addition, an efficient design process can be provided by omitting the repetitive design process, and easy and fast communication can be supported through intuitive component design.

The device described above may be implemented as a hardware component, a software component, and/or a combination of the hardware component and the software component. For example, the devices and components described in the embodiments may include a processor, a controller, an arithmetic logic unit (ALU), a digital signal processor, a microcomputer, a field programmable gate array (FPGA), and a programmable logic unit (PLU). It may be implemented using one or more general purpose or special purpose computers, such as a logic unit, microprocessor, or any other device capable of executing and responding to instructions. The processing device may execute an operating system (OS) and one or more software applications running on the operating system. The processing device may also access, store, manipulate, process, and generate data in response to execution of the software. For convenience of understanding, although one processing device is sometimes described as being used, one of ordinary skill in the art will recognize that the processing device includes a plurality of processing elements and/or a plurality of types of processing elements. It can be seen that may include For example, the processing device may include a plurality of processors or one processor and one controller. Other processing configurations are also possible, such as parallel processors.

The software may comprise a computer program, code, instructions, or a combination of one or more thereof, which configures a processing device to operate as desired or is independently or collectively processed You can command the device. The software and/or data may be embodied in any type of machine, component, physical device, computer storage medium or device for interpretation by or providing instructions or data to the processing device. have. The software may be distributed over networked computer systems and stored or executed in a distributed manner. Software and data may be stored in one or more computer-readable recording media.

The method according to the embodiment may be implemented in the form of program instructions that can be executed through various computer means and recorded in a computer-readable medium. In this case, the medium may be to continuously store the program executable by the computer, or to temporarily store the program for execution or download. In addition, the medium may be various recording means or storage means in the form of a single or several hardware combined, it is not limited to a medium directly connected to any computer system, and may exist distributed on a network. Examples of the medium include a hard disk, a magnetic medium such as a floppy disk and a magnetic tape, an optical recording medium such as CD-ROM and DVD, a magneto-optical medium such as a floppy disk, and those configured to store program instructions, including ROM, RAM, flash memory, and the like. In addition, examples of other media may include recording media or storage media managed by an app store that distributes applications, sites that supply or distribute other various software, and servers.

As described above, although the embodiments have been described with reference to the limited embodiments and drawings, various modifications and variations are possible by those skilled in the art from the above description. For example, the described techniques are performed in a different order than the described method, and/or the described components of the system, structure, apparatus, circuit, etc. are combined or combined in a different form than the described method, or other components Or substituted or substituted by equivalents may achieve an appropriate result.

Therefore, other implementations, other embodiments, and equivalents to the claims are also within the scope of the following claims.

Claims (20)

A method executed on a computer system, comprising:
the computer system comprising at least one processor configured to execute computer readable instructions contained in a memory;
Provides a site for screen design work collaboration,
The method is
providing, by the at least one processor, coding design elements used for screen composition into components including state expression and interaction;
A grid including, by the at least one processor, as a grid rule, a rule in column units necessary for a responsive type in which the component changes according to the resolution of a device, and a rule in a row unit necessary for aligning the components providing a layout; and
configuring a screen by arranging, by the at least one processor, the components according to a user selection in the process of developing a screen to be serviced in the grid layout according to the rules in the column units and the rules in the row units
including,
The step of providing the code is,
Composing an icon, which is one of the design elements, as a component in the form of a text font
including,
The icon is composed of a font-type component that can be changed in size in a grid of a certain area and whose proportion can be adjusted according to the object to be expressed,
The step of providing the code is,
When a plurality of state representations of the component exist for each of the design elements, coding the interaction for each state of the component and providing the component as a set with the component and the mirrored source code;
including,
The configuring step is
arranging the component and the source code as a set in the grid layout when the component is selected; and
Visualizing the state of the component through the interaction
How to include. delete delete According to claim 1,
Providing the component as a set with the component and mirrored source code comprises:
Copying and providing the source code of the component when the component is selected
How to include. delete According to claim 1,
The step of providing the code is,
A step of coding a module composed of a combination of two or more components and providing it in a module unit
How to include more. 7. The method of claim 6,
The step of providing the code is,
A step of coding a template composed of a combination of two or more modules and providing it in a template unit
How to include more. delete delete delete According to claim 1,
Providing the grid layout comprises:
Providing the grid layout consisting of a column unit that can be divided into at least two or more and a row unit having a predetermined height
How to characterize. According to claim 1,
The site provides a screen development process using a design kit including the component
How to characterize. 13. The method of claim 12,
The site provides at least one of a design consulting process and a wireframe process using the design kit before the screen development process
How to characterize. A computer program stored in a non-transitory computer-readable recording medium for executing the method of any one of claims 1, 4, 6, 7, 11 to 13 on the computer system. A non-transitory computer-readable recording medium having recorded thereon a program for executing the method of any one of claims 1, 4, 6, 7, and 11 to 13 on a computer. In a computer system,
at least one processor implemented to execute computer readable instructions contained in a memory
including,
the at least one processor,
By providing a site for screen design work collaboration,
a component providing unit that codes design elements used for screen composition into components that include state expression and interaction;
a layout providing unit that provides a grid layout including a column-based rule required for a responsive type in which the component changes according to a device resolution as a grid rule and a row-based rule required for aligning the component; and
A screen composition unit configured to configure a screen by arranging the components according to a user's selection in the process of developing a screen to be serviced in the grid layout according to the column-based rule and the row-based rule
including,
The component providing unit,
An icon, which is one of the design elements, is composed of a text font-type component,
The icon is composed of a font-type component that can be changed in size in a grid of a certain area and whose proportion can be adjusted according to the object to be expressed,
The component providing unit,
When a plurality of state representations of the component exist for each of the design elements, the component is provided as a set with a source code mirrored with the component by coding the interaction for each state of the component,
The screen component,
arranging the component and the source code as a set in the grid layout when the component is selected;
Visualizing the state of the component through the interaction
A computer system characterized by a. delete delete 17. The method of claim 16,
The component providing unit,
Provide a module unit by coding a module composed of a combination of two or more components,
Coding a template composed of a combination of two or more modules and providing it in a template unit
A computer system characterized by a. 17. The method of claim 16,
The layout providing unit,
Providing the grid layout consisting of a column unit that can be divided into at least two or more and a row unit having a predetermined height
A computer system characterized by a.

Images