KR102175964B1 - Apparatus and method for creating service using prototyping design tool - Google Patents

Abstract

The present invention relates to a service generation apparatus and method using a prototyping design tool, wherein the service generation apparatus receives a design file receiving unit for receiving design files for a plurality of service pages each connected to an external domain to which a web service is provided, the A web code generation unit that extracts properties of each of a plurality of design components from a design file and generates a web code for the service page, classifies the plurality of design components into static and dynamic design components, and applies them to the dynamic design component. Creating a builder code conversion unit that converts the web code into a builder code by adding a backend operation as a related property, and a builder page providing the backend operation based on the builder code, and providing editing and testing on the builder page Includes a builder page development department.

Description

Service creation device and method using prototyping design tool {APPARATUS AND METHOD FOR CREATING SERVICE USING PROTOTYPING DESIGN TOOL}

The present invention relates to a service generation technology using a prototyping design tool, and more particularly, a service generation apparatus and method using a prototyping design tool that can provide a mobile screen designed as a design file as a service to which a backend function is applied. It is about.

Recently, due to the spread of smart phones, the development of mobile web pages has been actively conducted so that web pages provided through existing computers can be freely used even on mobile terminals. However, since it is essential to understand web languages such as HTML and CSS that web browsers can recognize in order to produce web pages, it may be very difficult for ordinary people who lack professional knowledge to produce web pages. In order to solve this problem, various tools that support web page production are being developed, but a lot of effort and technology are still required from web page production to actual services.

Korean Patent Registration No. 10-1594946 (2016.02.11) relates to a method, system and non-transitory computer-readable recording medium for providing a prototyping tool, and is applied to wearable devices, IoT devices, etc. ) It is possible to easily and variously create gestures that can be used as ), and even users who do not have the technical background necessary to implement the interaction can easily prototype various interactions. Are doing.

Korean Patent Registration No. 10-1594946 (2016.02.11)

An embodiment of the present invention is to provide a service generation apparatus and method using a prototyping design tool capable of providing a mobile screen designed with a design file as a service to which a backend function is applied.

An embodiment of the present invention is to provide an apparatus and method for creating a service using a prototyping design tool that can easily edit and test service pages connected to an external domain and apply the result to an actual web service. .

An embodiment of the present invention is to provide a service generation apparatus and method using a prototyping design tool that can update a service page connected to an actual external domain through multi-stage code conversion based on a design file for a prototype page. do.

Among embodiments, a service generating apparatus using a prototyping design tool includes a design file receiving unit receiving design files for a plurality of service pages each connected to an external domain to which a web service is provided, and a plurality of design components from the design file. A web code generator that extracts properties for each and generates a web code for the service page, classifies the plurality of design components into static and dynamic design components, and adds a backend operation as an attribute related to the dynamic design component. And a builder code conversion unit for converting the web code into a builder code, and a builder page development unit for generating a builder page providing the backend operation based on the builder code and providing editing and testing for the builder page.

The design file receiver may receive a prototype page generated by a prototyping design tool and composed of a plurality of design components as the design file.

The design file receiving unit may generate a temporary prototype page based on a corresponding service page and receive it as the design file when reception of a design file for at least one service page fails.

The builder code conversion unit may perform conversion into the builder code based on a conversion rule determined according to the type of the web code.

The builder page development unit may provide a graphic user interface (GUI) for each of the editing and testing.

The service providing apparatus may further include a service page updater configured to update the service pages based on the updated builder page when the builder page is updated by the editing.

Among embodiments, the service creation method using a prototyping design tool includes receiving design files for a plurality of service pages each connected to an external domain where a web service is provided, and a plurality of design components from the design file. Generating a web code for the service page by extracting an attribute of each of the design components, classifying the plurality of design components into static and dynamic design components, and adding a backend operation as an attribute of the dynamic design component And converting the web code into a builder code, generating a builder page that provides the backend operation based on the builder code, and providing editing and testing for the builder page, and the editing And when updating of the builder page is completed, performing an update on the service pages based on the updated builder page.

The disclosed technology can have the following effects. However, since it does not mean that a specific embodiment should include all of the following effects or only the following effects, it should not be understood that the scope of the rights of the disclosed technology is limited thereby.

The apparatus and method for generating a service using a prototyping design tool according to an embodiment of the present invention can easily edit and test service pages connected to an external domain, and directly apply the result to an actual web service.

The apparatus and method for generating a service using a prototyping design tool according to an embodiment of the present invention may update a service page connected to an actual external domain through multi-stage code conversion based on a design file for a prototype page.

1 is a diagram illustrating a service creation system using a prototyping design tool according to an embodiment of the present invention.
FIG. 2 is a block diagram illustrating a physical configuration of the service generating apparatus in FIG. 1.
FIG. 3 is a block diagram illustrating a functional configuration of the service generating apparatus in FIG. 1.
FIG. 4 is a flowchart illustrating a service generation process performed by the service generation device of FIG. 1.
5 is an exemplary diagram illustrating an embodiment of a code conversion process performed in a service generating apparatus.
6 is an exemplary diagram illustrating an embodiment of a page editing process performed by a service generating device.

Since the description of the present invention is merely an embodiment for structural or functional description, the scope of the present invention should not be construed as being limited by the embodiments described in the text. That is, since the embodiments can be variously changed and have various forms, the scope of the present invention should be understood to include equivalents capable of realizing the technical idea. In addition, since the object or effect presented in the present invention does not mean that a specific embodiment should include all of them or only those effects, the scope of the present invention should not be understood as being limited thereto.

Meanwhile, the meaning of terms described in the present application should be understood as follows.

Terms such as "first" and "second" are used to distinguish one component from other components, and the scope of rights is not limited by these terms. For example, a first component may be referred to as a second component, and similarly, a second component may be referred to as a first component.

When a component is referred to as being "connected" to another component, it should be understood that although it may be directly connected to the other component, another component may exist in the middle. On the other hand, when it is mentioned that a certain component is "directly connected" to another component, it should be understood that no other component exists in the middle. On the other hand, other expressions describing the relationship between the constituent elements, that is, "between" and "just between" or "neighboring to" and "directly neighboring to" should be interpreted as well.

Singular expressions are to be understood as including plural expressions unless the context clearly indicates otherwise, and terms such as “comprise” or “have” refer to implemented features, numbers, steps, actions, components, parts, or It is to be understood that it is intended to designate that a combination exists and does not preclude the presence or addition of one or more other features or numbers, steps, actions, components, parts, or combinations thereof.

In each step, the identification code (for example, a, b, c, etc.) is used for convenience of explanation, and the identification code does not describe the order of each step, and each step has a specific sequence clearly in context. Unless otherwise stated, it may occur differently from the stated order. That is, each of the steps may occur in the same order as specified, may be performed substantially simultaneously, or may be performed in the reverse order.

The present invention can be embodied as computer-readable codes on a computer-readable recording medium, and the computer-readable recording medium includes all types of recording devices storing data that can be read by a computer system. . Examples of computer-readable recording media include ROM, RAM, CD-ROM, magnetic tape, floppy disk, and optical data storage devices. Further, the computer-readable recording medium is distributed over a computer system connected by a network, so that the computer-readable code can be stored and executed in a distributed manner.

All terms used herein have the same meaning as commonly understood by one of ordinary skill in the field to which the present invention belongs, unless otherwise defined. Terms defined in commonly used dictionaries should be construed as having meanings in the context of related technologies, and cannot be construed as having an ideal or excessive formal meaning unless explicitly defined in the present application.

1 is a diagram illustrating a service creation system using a prototyping design tool according to an embodiment of the present invention.

Referring to FIG. 1, a service generation system 100 using a prototyping design tool may include a user terminal 110, a service generation device 130, and a database 150.

The user terminal 110 corresponds to a computing device capable of uploading a design file generated by a prototyping design tool and checking or using an updated service page, and may be implemented as a smartphone, a laptop, or a computer. The present invention is not limited thereto, and may be implemented in various devices such as a tablet PC. The user terminal 110 may be connected to the service generating device 130 through a network, and a plurality of user terminals 110 may be connected to the service generating device 130 at the same time.

The service generation device 130 may be implemented as a computer or a server corresponding to a program that can be used for an actual web service by applying a backend function to a web screen corresponding to a design file in a prototype format. The backend function is a concept corresponding to a frontend, an area in which a user can directly view a screen, and may correspond to a server or a function of a program corresponding to the rear part of the program. The service generating device 130 may be connected to the user terminal 110 through a wired network or a wireless network such as Bluetooth or WiFi, and may communicate with the user terminal 110 through a wired or wireless network.

In an embodiment, the service generating device 130 may receive a design file in connection with the database 150 and store necessary information in a process of updating a service page applied to an actual web service. Meanwhile, unlike FIG. 1, the service generating apparatus 130 may be implemented including the database 150 inside. In addition, the service generating device 130 may be implemented including a processor, a memory, a user input/output unit, and a network input/output unit. This will be described in more detail in FIG. 2.

The database 150 may store various pieces of information necessary in the process of applying the web screen designed as a design file by the service generating device 130 as a web service with a backend function. For example, the database 150 may store a design file received from the user terminal 110, and may store various conversion rules for conversion from a design file to a web code or from a web code to a builder code. , It is not necessarily limited thereto, and information collected or processed in various forms may be stored in the process of applying a new service page through editing and testing.

FIG. 2 is a block diagram illustrating a physical configuration of the service generating apparatus in FIG. 1.

Referring to FIG. 2, the service generating device 130 may include a processor 210, a memory 230, a user input/output unit 250, and a network input/output unit 270.

The processor 210 may execute each procedure in the process of receiving the design file and providing it as a service to which the backend function is applied, and manage the memory 230 that is read or written throughout the process, and the memory 230 You can schedule the synchronization time between volatile and nonvolatile memory in ). The processor 210 can control the overall operation of the service generating device 130, and is electrically connected to the memory 230, the user input/output unit 250, and the network input/output unit 270 to control data flow between them. I can. The processor 210 may be implemented as a CPU (Central Processing Unit) of the service generating device 130.

The memory 230 is implemented as a nonvolatile memory such as a solid state disk (SSD) or a hard disk drive (HDD), and may include an auxiliary storage device used to store overall data required for the service generating device 130, A main memory device implemented as a volatile memory such as RAM (Random Access Memory) may be included.

The user input/output unit 250 may include an environment for receiving a user input and an environment for outputting specific information to a user. For example, the user input/output unit 250 may include an input device including an adapter such as a touch pad, a touch screen, an on-screen keyboard, or a pointing device, and an output device including an adapter such as a monitor or a touch screen. In one embodiment, the user input/output unit 250 may correspond to a computing device connected through a remote connection, and in such a case, the service generating device 130 may be performed as a server.

The network input/output unit 270 includes an environment for connecting to an external device or system through a network, and includes, for example, a local area network (LAN), a metropolitan area network (MAN), a wide area network (WAN), and a VAN ( Value Added Network) may include an adapter for communication.

FIG. 3 is a block diagram illustrating a functional configuration of the service generating apparatus in FIG. 1.

Referring to FIG. 3, the service generating device 130 includes a design file receiving unit 310, a web code generating unit 320, a builder code conversion unit 330, a builder page development unit 340, and a service page update unit 350. And a control unit 360.

The design file receiving unit 310 may receive design files for a plurality of service pages each connected to an external domain to which a web service is provided. The service generating device 130 may set a domain address for a service page on which an actual web service is provided for each page in advance, and the design file receiving unit 310 may receive a design file for each service page. Here, the design file may correspond to a prototype page for a service page, and the prototype page may correspond to a page created for development and testing of a web page in preparation for a web service. .

For example, service pages can be classified into'Home','Product List','Product Details','Bulletin','Post Details','Contact Us' and'My Page', etc., according to the page type. The design file receiving unit 310 may receive a design file manufactured according to each page type. The user may upload a design file through a web page connectable to the application or service generating device 130 installed in the user terminal 110.

In an embodiment, the design file receiving unit 310 may receive a prototype page generated by a prototyping design tool and composed of a plurality of design components as a design file. The prototyping design tool may correspond to a program that can produce a prototype page. The prototype page may be composed of a plurality of design components, and the plurality of design components may correspond to various objects constituting a web page, and may include, for example, images, texts, layouts, buttons, etc. . The design file may be different according to the type of prototyping design tool used, and may include information on pages and components and various attribute information. The design file receiving unit 310 may receive a prototype page as a design file, and may limit the receiveable design file to a specific prototype page.

In an embodiment, the design file receiving unit 310 may generate a temporary prototype page based on the service page and receive it as a design file when reception of the design file for at least one service page fails. The design file receiving unit 310 may basically perform the following operation when receiving design files for all service pages. However, if reception of some service pages fails due to a user's mistake or network communication error, the design file receiving unit 310 may generate a temporary prototype page based on a web page connected to an external domain for the corresponding service page. have.

For example, the temporary prototype page may correspond to a capture image of a web page, and may be generated including only page information connected to the web page. In another embodiment, when receiving a design file for at least one service page fails, the design file receiving unit 310 may request again to input a design file for a corresponding service page or initiate reception of the entire design file. have.

The web code generator 320 may generate a web code for a service page by extracting an attribute of each of a plurality of design components from a design file. The plurality of design components may correspond to various objects constituting a web page, and may include, for example, images, text, flash, and the like, and may include the concept of a layer. The web code generation unit 320 may generate a web code for a page expressed by the design file by using page information, component information, and attribute information extracted from the design file. The web code generator 320 may utilize a design file and a conversion rule according to the type of web code, and may convert a corresponding object into a web code according to the conversion rule. The web code generated by the web code generator 320 may include HTML and CSS.

The builder code conversion unit 330 classifies a plurality of design components into static and dynamic design components, and converts a web code into a builder code by adding a backend operation as a property of the dynamic design component. . The static design component is an object that composes a web page, and may correspond to a design component that can be implemented by considering only the expression of a corresponding property when implementing a web page, and may include, for example, layout, text, and image.

In addition, the dynamic design component is an object that composes a web page, and may correspond to a design component that is implemented in consideration of not only the expression of the corresponding property but also the interaction with other objects when implementing the web page. , Scrolling, and the like. The builder code may correspond to internal code that is implemented and used by the service creation device 130 for editing or testing on the prototype page. In particular, the final saved or edited page is connected through an external domain. It may correspond to a special code defined to immediately update to a service page so that the result of modification by the service generating device 130 is immediately applied to an actual web service.

That is, the builder code conversion unit 330 may classify static and dynamic design components and then perform conversion to a builder code for each design component. In particular, for a dynamic design component, a backend operation associated with the corresponding design component You can convert by adding a builder code corresponding to.

In an embodiment, the builder code conversion unit 330 may perform conversion into a builder code based on a conversion rule determined according to the type of web code. The service generating device 130 may define a conversion rule from a web code to a builder code in advance and store it in the database 150, and the builder code conversion unit 330 interlocks with the database 150 to provide a code according to the conversion rule. Conversion can be performed. More specifically, the builder code conversion unit 330 may determine a conversion rule according to the converted web code based on the design file and retrieve the conversion rule from the database 150 to perform code conversion for the corresponding web code. . In addition, the builder code conversion unit 330 may perform conversion to a builder code to which a backend operation for a dynamic design component is added by using builder code conversion information for various backend operations defined as web codes.

In one embodiment, the builder code conversion unit 330 is a component classification module that classifies a plurality of design components into static and dynamic design components based on a web code, and adds a backend that adds a backend operation as a property related to the dynamic design component. It may include a builder code conversion module that converts the module and web code into a builder code. In addition, the builder code conversion unit 330 may further include a control module that controls an operation between each module.

Here, the component classification module may generate a design component set for static and dynamic design components by receiving a web code from the web code generator 320. The add backend module can assign backend properties to a set of dynamic design components and then connect backend actions to the properties. When a design component is detected in the process of converting a web code to a builder code, the builder code conversion module may perform conversion to a builder code according to a conversion rule based on a set of design components including the corresponding design component.

The builder page development unit 340 may generate a builder page that provides a backend operation based on a builder code, and may provide editing and testing for the builder page. The user can edit or test the service page through the service generation device 130, and the service generation device 130 edits the builder page generated based on the design file through the builder page development unit 340 And can handle the test operation.

In an embodiment, the builder page development unit 340 may provide a graphical user interface (GUI) for editing and testing, respectively. The editing and testing GUI for the builder page can be divided into an edit mode and a test mode and can be independently provided, and the builder page development unit 340 can provide a GUI related to switching to the edit and test mode according to the user's selection have. The service generating device 130 may define various types of GUIs for each mode and store them in the database 150, and the builder page development unit 340 may interwork with the database 150 to provide a GUI for editing and testing. .

The service page updater 350 may update service pages based on the updated builder page when the builder page is updated by editing. The service page updater 350 may update a corresponding service page based on the final builder page when editing of the builder page is completed or when a page update command is received by the user's selection. The service page updated by the service page update unit 350 is connected to an external domain, and thus can be directly applied to an actual web service.

To this end, the service generating device 130 may separately manage service pages linked to an external domain, and automatically replace the service page for the corresponding builder page by completing the update of the builder page, a save command, or an update command. can do. Accordingly, the user can edit or test the service page desired to be updated through the service generating device 130, and the change can be directly applied to the service page only by the operation of the service generating device 130. have.

In an embodiment, the service page updater 350 may detect a page updated by editing among a plurality of builder pages, and may selectively update a service page for a corresponding builder page. In another embodiment, the service page update unit 350 may sequentially update the service pages for the corresponding builder pages according to the sorted order based on the page change rate when there are multiple builder pages updated by editing. have.

In one embodiment, when there are a plurality of builder pages updated by editing, the service page updater 350 first performs an update to the service page based on the builder page having the highest page change rate, After updating the service pages in the forward direction in sequence, updates to the service pages in the reverse direction may be performed in sequence.

In one embodiment, the service page updater 350 generates a builder page generation module that generates a builder page based on the builder code, an editing GUI generation module that generates an editing GUI for the builder page, and a test GUI for the builder page. It may include a test GUI generation module and a builder page and a builder page development module that provides editing or test GUI together. In addition, the service page updater 350 may further include a control module that controls the operation of each module.

The control unit 360 controls the overall operation of the service generating device 130, and the design file receiving unit 310, the web code generating unit 320, the builder code conversion unit 330, the builder page development unit 340 and the service page The control flow or data flow between the update units 350 may be managed.

FIG. 4 is a flowchart illustrating a service generation process performed by the service generation device of FIG. 1.

Referring to FIG. 4, the service generating apparatus 130 may receive design files for a plurality of service pages each connected to an external domain to which a web service is provided through the design file receiving unit 310 (step S410). The service generation device 130 may generate a web code for a service page by extracting attributes of each of a plurality of design components from a design file through the web code generation unit 320 (step S430).

The service generation device 130 classifies a plurality of design components into static and dynamic design components through the builder code conversion unit 330 and adds a backend operation as a property of the dynamic design component to create a web code. builder) code can be converted (step S450). The service generation device 130 may generate a builder page providing a backend operation based on the builder code through the builder page development unit 340 and provide editing and testing for the builder page (step S470). When the update of the builder page is completed by editing through the service page update unit 350, the service generating device 130 may update service pages based on the updated builder page (step S490).

5 is an exemplary diagram illustrating an embodiment of a code conversion process performed in a service generating apparatus.

Referring to FIG. 5, the service generating device 130 may receive a design file for a service page through the design file receiving unit 310. The design file may correspond to the file created by the prototyping design tool, for example, it may correspond to the XD file created by'adobe XD' (Figure (a)). The service generation device 130 may generate a web code for a service page by extracting properties of each of a plurality of design components from a design file through the web code generation unit 320 (Fig. (b)). The service generation device 130 classifies a plurality of design components into static and dynamic design components through the builder code conversion unit 330 and converts the web code into a builder code by adding a backend operation as a property of the dynamic design component. You can (Fig.

<img src=”/product/01.jpg”>, the web code for the image in Figure (b), is the builder code in Figure (c), <e-image porp=”{src:'/product/01.jpg It can be converted to'}”>. <div style="color:#000000"> product name </div>, which is the web code for the text in figure (b), is the builder code <e-text style="color:#000000"> in figure (c). Can be converted to </e-text>. <button>Order</button>, the web code for the button in Figure (b), is the builder code in Figure (c), <f-productOrder-c-btn>Order</f-productOrder-c-btn> Can be converted to

6 is an exemplary diagram illustrating an embodiment of a page editing process performed by a service generating device.

Referring to FIG. 6, the service generation device 130 generates a builder page that provides a backend operation through the builder page development unit 340 based on the builder code converted by the builder code conversion unit 330 and displays the builder page. Editing and testing can be provided. In an embodiment, the builder page development unit 340 may provide a graphical user interface (GUI) for editing and testing, respectively. In FIG. 6, the GUI for editing the builder page may be configured in a form in which a preview screen and a page classification menu and a property setting menu for each design component are arranged on the builder page to the left and right of the corresponding screen. The graphic user interface is not necessarily limited thereto, and may be implemented in various forms and provided to a user.

Although the above has been described with reference to preferred embodiments of the present invention, those skilled in the art will variously modify and change the present invention within the scope not departing from the spirit and scope of the present invention described in the following claims. You will understand that you can do it.

100: Service creation system using prototyping design tool
110: user terminal 130: service generating device
150: database
210: processor 230: memory
250: user input/output unit 270: network input/output unit
310: design file receiving unit 320: web code generation unit
330: builder code conversion unit 340: builder page development unit
350: service page update unit 360: control unit

Claims (7)

A design file receiving unit for receiving design files for a plurality of service pages each connected to an external domain to which a web service is provided;
A web code generation unit for generating a web code for the service page by extracting an attribute of each of a plurality of design components from the design file;
A builder code conversion unit that classifies the plurality of design components into static and dynamic design components, and converts the web code into a builder code by adding a backend operation as a property of the dynamic design component; And
Including a builder page development unit that generates a builder page providing the backend operation based on the builder code and provides editing and testing for the builder page,
The design file receiving unit receives a prototype page generated by a prototyping design tool and composed of a plurality of design components as the design file, and fails to receive a design file for at least one service page, the corresponding service A service generation apparatus using a prototyping design tool, characterized in that a temporary prototype page is generated based on the page and received as the design file.
delete delete The method of claim 1, wherein the builder code conversion unit
A service generation apparatus using a prototyping design tool, characterized in that the conversion into the builder code is performed based on a conversion rule determined according to the type of the web code.
The method of claim 1, wherein the builder page development unit
A service generation apparatus using a prototyping design tool, characterized in that providing a graphic user interface (GUI) for each of the editing and testing.
The method of claim 1,
A service generation apparatus using a prototyping design tool, further comprising a service page update unit that updates the service pages based on the updated builder page when the update of the builder page is completed by the editing. .
In the service generation method performed in the service generation device,
Receiving design files for a plurality of service pages each connected to an external domain to which a web service is provided;
Generating a web code for the service page by extracting an attribute of each of a plurality of design components from the design file;
Classifying the plurality of design components into static and dynamic design components and converting the web code into a builder code by adding a backend operation as a property of the dynamic design component;
Creating a builder page providing the backend operation based on the builder code and providing editing and testing on the builder page; And
Comprising the step of performing update on the service pages based on the updated builder page when the update of the builder page is completed by the editing,
In the receiving of the design file, a prototype page generated by a prototyping design tool and composed of a plurality of design components is received as the design file, and reception of a design file for at least one service page fails. In this case, a method for generating a service using a prototyping design tool, comprising the step of generating a temporary prototype page based on a corresponding service page and receiving it as the design file.

Images