Web page design recommendation method, device, and system

Abstract

A web page design recommendation method is disclosed. The web page design recommendation method may comprise: receiving, from a user terminal, a URL of a reference web page that a user desires to refer to; acquiring a first web page image corresponding to the reference web page by using the URL; on the basis of analyzing the first web page image of the reference web page by using an artificial intelligence engine, acquiring attribute information and layout information of objects included in the reference web page; on the basis of the acquired attribute information and layout information of the objects, generating a second web page image corresponding to the reference web page; and extracting, from second web page images by using the artificial intelligence engine, at least one second web page image having the highest similarity with the generated second web page image of the reference web page. Accordingly, it is possible to automatically recommend a web page design of a user's preference on the basis of artificial intelligence.

Description

Webpage Design Recommendation Methods, Devices, and Systems

[0001] The present invention relates to a method, device, and system for recommending web page designs, and more specifically, to a method, device, and system for recommending web page designs that can recommend an optimal web page design based on template matching by analyzing a web page desired by a user.

[0002] Generally, when shopping online, consumers encounter the design of an online mall while searching for or browsing products and considering a purchase. Therefore, mall operators aim to promote sales by constructing a mall with a simple, clear, and aesthetically pleasing design that leaves a positive impression on consumers.

[0003] When creating a shopping mall website, various types of templates are created in advance, and users, such as shopping mall operators, are allowed to select a desired template from among the various created templates, and a shopping mall webpage is created based on the selected template.

[0004] However, in such cases, users must individually select the desired template design from among numerous templates, which can be difficult for users who lack design sense or are not skilled in web design implementation, resulting in excessive consumption of time and human resources.

[0005] Furthermore, it is difficult to identify the type of shopping mall webpage design users typically desire, and it is also difficult to create webpage items that satisfy their customized needs; consequently, there is a problem of low user satisfaction and poor quality regarding the generated shopping mall webpages.

[0006] The present invention aims to solve these problems by providing a web page design recommendation method, device, and system capable of recommending an optimal web page design based on template matching by analyzing a web page desired by a user.

[0007] To achieve this objective, one aspect of the present invention provides a web page design recommendation method. The web page design recommendation method, which is performed by a server, comprises the steps of: receiving a URL of a reference web page that a user wishes to refer to from a user terminal; acquiring a first web page image corresponding to the reference web page using the URL; acquiring attribute information and layout information of an object included in the reference web page based on analyzing the first web page image of the reference web page using an artificial intelligence engine; generating a second web page image corresponding to the reference web page based on the acquired attribute information and layout information of the object; and extracting at least one second web page image having the highest similarity to the second web page image of the reference web page among the second web page images by comparing the generated second web page image with second web page images corresponding to web page templates stored in a database using the artificial intelligence engine. It includes the step of displaying at least one webpage template corresponding to at least one extracted second webpage image on the user terminal.

[0008] The step of receiving the URL of the reference webpage above may include: displaying a URL input section on the user terminal; and inputting the URL of the reference webpage desired by the user based on the URL input section.

[0009] The step of acquiring a first webpage image corresponding to the above reference webpage may include: a step of rendering the reference webpage by analyzing the HTML (HyperText Markup Language) source corresponding to the URL of the above reference webpage; and a step of acquiring a first webpage image, which is a webpage capture image, by capturing the rendered reference webpage.

[0010] The step of generating the second webpage image may include the step of converting an object within the first webpage image into an object of a predetermined attribute according to the attribute information of the acquired object, based on the layout information.

[0011] The step of converting an object within the first webpage image into an object of predetermined attributes may include: a step of extracting an object of predetermined attributes from a database that maps to the acquired object according to the attribute information of the acquired object; and a step of inserting the extracted object of predetermined attributes into a location specified by the layout information.

[0012] The attribute information of the object may include at least one of the content type information, object association information, size information, shape information, and location information of the object. The content type information may be information indicating whether the object is a promotional image, a product image, a menu bar, a banner image, or text.

[0013] The step of generating the second webpage image may include, according to the content type information of the acquired object, a step of converting an object within the first webpage image into a shape having the same size and shape but a predetermined color.

[0014] The objects of the second webpage image are placed in the same location with the same size and shape corresponding to the objects included in the first webpage image, and can be displayed as shapes of a predetermined color corresponding to the content type of each object.

[0015] The shapes within the second webpage image above may display objects with the same content attribute in the same color, and objects with different content attributes in different colors to distinguish them from each other, and each shape may display an outline to distinguish the boundary with adjacent shapes.

[0016] The shapes within the second webpage image above may indicate the difference in content attributes and the association of content attributes between objects by having the same RGB values ​​for objects that are related according to the association information between objects, even though the content attributes between objects are different, while having different brightness or saturation.

[0017] The step of extracting at least one second webpage image can increase the speed and reliability of the operation by using the artificial intelligence engine to compare the similarity between the second webpage images, in which shapes having a color determined according to the type of content per object are arranged according to layout information.

[0018] Meanwhile, to achieve the above-mentioned objective, one aspect of the present invention provides a web page design recommendation device. The web page design recommendation device comprises: a receiving unit that receives a URL of a reference web page that a user wishes to refer to from a user terminal; an image generating unit that acquires a first web page image corresponding to the reference web page using the URL, acquires attribute information and layout information of an object included in the reference web page based on analyzing the first web page image of the reference web page using an artificial intelligence engine, and generates a second web page image corresponding to the reference web page based on the acquired attribute information and layout information of the object; and an extraction unit that extracts at least one second web page image having the highest similarity to the second web page image of the reference web page among the second web page images by comparing the generated second web page image with second web page images corresponding to web page templates stored in a database unit using the artificial intelligence engine. and may include a display unit that displays at least one webpage template corresponding to at least one extracted second webpage image on the user terminal. The receiving unit displays a URL input unit on the user terminal and can input the URL of a reference webpage desired by the user based on the URL input unit.

[0019] The image generation unit can obtain a first webpage image, which is a webpage capture image, by analyzing the HTML source corresponding to the URL of the reference webpage, rendering the reference webpage, and capturing the rendered reference webpage.

[0020] The image generation unit above can convert an object within the first webpage image into an object of a predetermined attribute according to the attribute information of the acquired object based on the layout information.

[0021] The image generation unit can extract an object with a defined attribute mapped to the acquired object from a database according to the attribute information of the acquired object, and insert the extracted object with the defined attribute at a location specified by the layout information.

[0022] The attribute information of the object may include at least one of the content type information, object association information, size information, shape information, and location information of the object. The content type information may be information indicating whether the object is a promotional image, a product image, a menu bar, a banner image, or text.

[0023] The image generation unit can convert an object within the first webpage image into a shape having the same size and shape but a predetermined color, according to the content type information of the acquired object.

[0024] The objects of the second webpage image are placed in the same location with the same size and shape corresponding to the objects included in the first webpage image, and can be displayed as shapes of a predetermined color corresponding to the content type of each object.

[0025] The shapes within the second webpage image above may display objects with the same content attribute in the same color, and objects with different content attributes in different colors to distinguish them from each other, and each shape may display an outline to distinguish the boundary with adjacent shapes.

[0026] The shapes within the second webpage image above may indicate the difference in content attributes and the association of content attributes between objects by having the same RGB values ​​for objects that are related according to the association information between objects, even though the content attributes between objects are different, while having different brightness or saturation.

[0027] The above web page design recommendation device can increase the speed and reliability of the operation by using the artificial intelligence engine to compare the similarity between a second web page image and a shape having a color determined according to the type of content for each object, arranged according to layout information.

[0028] Meanwhile, to achieve the above-mentioned objective, one aspect of the present invention provides a web page design recommendation system. The web page design recommendation system comprises: an artificial intelligence engine; The system may include a web page server that receives a URL of a reference web page that a user wishes to refer to from a user terminal, obtains a first web page image corresponding to the reference web page using the URL, obtains attribute information and layout information of an object included in the reference web page based on analyzing the first web page image of the reference web page using the artificial intelligence engine, generates a second web page image corresponding to the reference web page based on the obtained attribute information and layout information of the object, and uses the artificial intelligence engine to compare the generated second web page image with second web page images corresponding to web page templates stored in a database, thereby extracting at least one second web page image having the highest similarity to the generated second web page image of the reference web page among the second web page images, and displays at least one web page template corresponding to the extracted at least one second web page image on the user terminal. The above server displays a URL input section on the user terminal and allows the user to input the URL of a desired reference webpage based on the URL input section.

[0029] The server can obtain a first web page image, which is a web page capture image, by analyzing the HTML (HyperText Markup Language) source corresponding to the URL of the reference web page, rendering the reference web page, and capturing the rendered reference web page.

[0030] The server above can convert an object within the first webpage image into an object with predetermined attributes based on the layout information and the attribute information of the acquired object.

[0031] The above server can extract an object with a defined attribute mapped to the acquired object from the database according to the attribute information of the acquired object, and insert the extracted object with the defined attribute at a location specified by the layout information.

[0032] The attribute information of the object may include at least one of the content type information, inter-object association information, size information, shape information, and location information of the object. The content type information may indicate whether the object is a promotional image, a product image, a menu bar, a banner image, or text.

[0033] The server can convert an object within the first webpage image into a shape having the same size and shape but a predetermined color, according to the content type information of the acquired object.

[0034] The objects of the second webpage image are placed in the same location with the same size and shape corresponding to the objects included in the first webpage image, and can be displayed as shapes of a predetermined color corresponding to the content type of each object.

[0035] The shapes within the second webpage image above may display objects with the same content attribute in the same color, and objects with different content attributes in different colors to distinguish them from each other, and each shape may display an outline to distinguish the boundary with adjacent shapes.

[0036] The shapes within the second webpage image above may indicate the difference in content attributes and the association of content attributes between objects by having the same RGB values ​​for objects that are related according to the association information between objects, even though the content attributes between objects are different, while having different brightness or saturation.

[0037] The server can increase the speed and reliability of the operation by using the artificial intelligence engine to compare the similarity between a second webpage image and shapes having a color determined according to the type of content for each object, arranged according to layout information.

[0038] Meanwhile, to achieve the above-mentioned objective, one aspect of the present invention may provide a computer program stored on a medium for executing the steps of: receiving a URL of a reference webpage that a user wishes to refer to from a user terminal; acquiring a first webpage image corresponding to the reference webpage using the URL; acquiring attribute information and layout information of an object included in the reference webpage based on analyzing the first webpage image of the reference webpage using an artificial intelligence engine; generating a second webpage image corresponding to the reference webpage based on the acquired attribute information and layout information of the object; extracting at least one second webpage image having the highest similarity to the second webpage image of the reference webpage among the second webpage images by comparing the generated second webpage image with second webpage images corresponding to webpage templates stored in a database using the artificial intelligence engine; and displaying at least one webpage template corresponding to the extracted at least one second webpage image on the user terminal.

[0039] As described above, according to the present invention, an optimal webpage design can be recommended based on template matching using image comparison with artificial intelligence by analyzing a webpage desired by a user. For example, by simply entering the URL of a desired website, the user can receive recommendations for templates with designs similar to their preferences by visually analyzing the design characteristics of the website. Therefore, the present invention can contribute to increasing user satisfaction, shortening webpage production time, and improving design quality by providing a recommendation service based on design similarity.

[0040] FIG. 1 is a block diagram showing the configuration of an artificial intelligence-based web page design recommendation system according to a preferred embodiment of the present invention.

[0041] FIG. 2 is a block diagram showing the detailed configuration of the first server unit illustrated in FIG. 1.

[0042] FIG. 3 is a flowchart illustrating the operation flow of the first processing unit shown in FIG. 2.

[0043] Figure 4 is an exemplary diagram showing a URL input section displayed by a receiver.

[0044] FIG. 5 is a flowchart illustrating the process of an image generation unit acquiring a first webpage image corresponding to a reference webpage.

[0045] FIG. 6 is an example diagram exemplifying the first webpage image of a reference webpage generated by an image generation unit.

[0046] FIG. 7 is an example diagram illustrating the form in which the first webpage image shown in FIG. 6 is converted into a second webpage image.

[0047] FIG. 8 is an exemplary diagram showing a second web page image of a web page template extracted by an extraction unit corresponding to a second web page image of a reference web page shown in FIG. 7.

[0048] FIG. 9 is a flowchart for explaining the operation of the second processing unit illustrated in FIG. 2.

[0049] FIG. 10 is an exemplary diagram showing a web page template corresponding to the second web page image shown in FIG. 8, that is, a web page image in which content is inserted as an object into an extracted web page template.

[0050] FIG. 11 is a block diagram showing the configuration of a web page template data construction system according to a preferred embodiment of the present invention.

[0051] FIG. 12 is a block diagram showing the configuration of the second server unit illustrated in FIG. 11.

[0052] FIG. 13 is a flowchart for explaining the operation flow of the second server unit shown in FIG. 12.

[0053] FIG. 14 is a block diagram showing a web page design recommendation system according to another embodiment of the present invention.

[0054] FIG. 15 is a block diagram showing the detailed configuration of the third server unit illustrated in FIG. 14.

[0055] FIG. 16 is a flowchart for explaining the operation flow of the third server unit illustrated in FIG. 15.

[0056] FIG. 17 is a block diagram showing the configuration of a device for performing an artificial intelligence-based web page design recommendation method and a web page template data construction method according to an embodiment of the present invention.

[0057] Hereinafter, preferred embodiments of the present invention will be described in more detail with reference to the attached drawings. In order to facilitate an overall understanding of the present invention, the same reference numerals are used for identical components in the drawings, and redundant descriptions of identical components are omitted.

[0058] FIG. 1 is a block diagram showing the configuration of an artificial intelligence-based web page design recommendation system according to a preferred embodiment of the present invention.

[0059] As illustrated in FIG. 1, the first server unit (100) can be linked with a plurality of shopping malls (SV), user terminals (UR), and the first artificial intelligence engine unit (10) through a communication network. The first artificial intelligence engine unit (10) may include various artificial intelligence models trained for image analysis, object identification and extraction, comparison between images, detection of similar images, etc. The shopping mall (SV) may refer to an online mall that conducts e-commerce online.

[0060] A user terminal (UR) can be a network terminal logged in with the user's unique identification information. In the description of the present embodiment, the user may be an entity that intends to operate a shopping mall webpage. The user terminal (UR) connects to the first server unit (100) through a communication network to automatically generate a shopping mall webpage based on a webpage design optimized for the user's taste recommended by a webpage design recommendation system, and can operate a shopping mall using the generated shopping mall webpage.

[0061] Such user terminals (UR) may include at least one computing terminal in hardware. For example, the user terminal (UR) may be a computing system equipped with at least one computing device of any type capable of connecting to a network, such as a server-class computer, a smartphone, a personal computer terminal, a laptop, a tablet PC, etc.

[0062] FIG. 2 is a block diagram showing the detailed configuration of the first server unit (100) shown in FIG. 1.

[0063] As illustrated in FIG. 2, the first server unit (100) may include a first processing unit (101) and a second processing unit (102).

[0064] The first processing unit (101) can be linked with the first artificial intelligence engine unit (10) to convert a first web page image of a reference web page designated by a user into an abstract second web page image, and then extract a web page template for creating a web page for product sales based on comparing the converted second web page image with the second web page images of web page templates stored in the first database unit (140), and extract web page content corresponding to the user that is pre-stored in the first database unit (140).

[0065] The second processing unit (102) can use the first artificial intelligence engine unit (10) to analyze the object attribute information of the extracted content, and then generate an automatic sample webpage by inserting the extracted content into the extracted webpage template based on the analyzed object attribute information, and display the generated automatic sample webpage on a user terminal (UR).

[0066] The first processing unit (101) may include a receiving unit (110), an image generating unit (120), an extraction unit (130), a display unit (150), and a first database unit (140), etc. Each of the above units can be interconnected and, if necessary, can connect to the first artificial intelligence engine unit (10) to use various artificial intelligence models included in the first artificial intelligence engine unit (10).

[0067] FIG. 3 is a flowchart illustrating the operation flow of the first processing unit (101) shown in FIG. 2, and the functions and mutual operations of each unit will be explained in detail below with reference to FIG. 1 to FIG. 3.

[0068] As illustrated in FIG. 3, the receiving unit (110) can receive the URL of a reference webpage preferred (wanted to refer to) by a user (e.g., an operator of a shopping mall) from a user terminal (UR) (step: S1). For example, the receiving unit (110) can display a URL input section on the user terminal (UR) and input the URL of the reference webpage desired by the user based on the URL input section.

[0069] FIG. 4 is an exemplary diagram showing a URL input section displayed by a receiving unit (110).

[0070] As illustrated in FIG. 4, the receiver (110) may display a user interface (UI1) including a URL input window (M1). In an area adjacent to the URL input window, a message is displayed that prompts the user to input a reference webpage that can be used as a reference in terms of design when creating a shopping mall, such as "Please enter the address of a shopping mall with a design you like." The user may, for example, input the URL of a webpage corresponding to a design they like or a design they have seen in advance into the input window.

[0071] Next, the image generation unit (120) can obtain a first webpage image corresponding to the reference webpage using the URL (step: S2). Here, the first webpage image is an image that visualizes the target webpage as is, and may mean, for example, a captured image of the target webpage. That is, the first webpage image corresponding to the reference webpage may be a captured image of the reference webpage.

[0072] FIG. 5 is a flowchart for explaining the process of an image generation unit (120) acquiring a first webpage image corresponding to a reference webpage.

[0073] As illustrated in FIG. 5, the image generation unit (120) analyzes the HTML source corresponding to the URL of the reference webpage (step: S11), and can render the reference webpage based on the analysis (step: S12).

[0074] Next, the image generation unit (120) can obtain a first webpage image that visually displays the reference webpage by capturing the rendered reference webpage (step: S13).

[0075] FIG. 6 is an exemplary diagram showing the first webpage image of a reference webpage generated by the image generation unit (120).

[0076] As illustrated in FIG. 6, the first webpage image (I1) may be a captured image of a reference webpage being rendered. The first webpage image (I1) of such a reference webpage may include various objects such as, for example, a promotion image, a product image, a menu bar, a banner image, text, etc.

[0077] The image generation unit (120) can obtain attribute information and layout information of an object included in the reference webpage based on analyzing the first webpage image of the reference webpage using the first artificial intelligence engine unit (10) (step: S3).

[0078] More specifically, the image generation unit (120) can extract visual objects contained therein as structured information by analyzing the first webpage image through an artificial intelligence engine. For example, the image generation unit (120) can perform a preprocessing step to increase the accuracy of object recognition by adjusting the resolution of the image to a standard size and performing noise removal and edge highlighting processing. The image generation unit (120) can perform an object detection step in conjunction with the first artificial intelligence engine unit (10) using an object detection artificial intelligence model such as YOLOv5, Detectron2, Faster R-CNN, etc., to receive the location coordinates of each object and the estimated object class as output values ​​using the first webpage image as input values. For example, the image generation unit (120) can detect the location (bounding box, etc.), type (class), and confidence information of each object based on the object detection artificial intelligence model.

[0079] The image generation unit (120) can extract attribute information of each detected object. The attribute information of the object may include information on the type of content of the object, information on association between objects, size information, shape information, location information, etc.

[0080] Here, the content type information may be information indicating whether the object is a promotional image, a product image, a menu bar, a banner image, or text. Location and size information may indicate the position, width, and height of each object in pixels. Shape information may indicate the shape of each object, such as a square, circle, or rectangle. The association between objects is information indicating whether multiple objects are grouped in the same area or whether there is a correlation in terms of content.

[0081] Next, the image generation unit (120) can generate a second webpage image corresponding to the reference webpage based on the attribute information and layout information of the acquired object (step: S4).

[0082] For example, the image generation unit (120) can convert an object within the first webpage image into an object of a predetermined attribute based on the layout information and the attribute information of the acquired object. More specifically, the image generation unit (120) extracts an object of a predetermined attribute that maps to the acquired object from the first database unit (140) based on the attribute information of the acquired object, and inserts the extracted object of the predetermined attribute into a location designated by the layout information.

[0083] For example, generating a second webpage image involves converting an object within the first webpage image into a shape having the same size and shape but a predetermined color, according to the content type information of the acquired object. That is, the second webpage image can be described as an image in which the objects of the first webpage image are replaced with shapes having the same size and shape but a predetermined color, corresponding to the content type information of the acquired object.

[0084] Therefore, the second webpage image can be described as a geometric webpage image. That is, the second webpage image can mean an abstract webpage image as a geometric representation corresponding to the first webpage image. Among the shapes within the second webpage image, objects with the same content attribute are displayed in the same color, and objects with different content attributes are displayed in different colors to distinguish them from one another, and each shape may display an outline to distinguish the boundary with adjacent shapes.

[0085] FIG. 7 is an example diagram illustrating the form in which the first webpage image shown in FIG. 6 is converted into a second webpage image.

[0086] As illustrated in FIG. 7, the second webpage image (I2) generated by the image generation unit (120) may display a menu bar shape (MB), a promotion image shape (P1), a product image shape (G1), a banner image shape (B1), and text shapes (T1, AT) corresponding to the menu bar, promotion image, product image, banner image, and text included in the first webpage image.

[0087] That is, the second webpage image can be described as an image in which the objects of the first webpage image are replaced with shapes having the same size and shape but with a predetermined color, corresponding to the content type information of the acquired objects. In the shapes within the second webpage image, objects with the same content attribute are displayed in the same color, and objects with different content attributes are displayed in different colors to distinguish them from one another, and each shape may display an outline to distinguish the boundary with adjacent shapes.

[0088] Meanwhile, the shapes within the second webpage image above may indicate the difference in content attributes and the association of content attributes between objects by having the same RGB values ​​for objects that are related according to the association information between objects, even though the content attributes between objects are different, while having different brightness or saturation.

[0089] For example, in the example illustrated in FIG. 7, the shape (T1) corresponding to the text is basically displayed as a gray shape, but the text shape (AT) associated with the product image (GI), which is another object, is displayed as a light orange color, which has the same RGB as the orange color of the product image shape but a different brightness. Therefore, it can be seen that the text displays information such as a description related to the associated product image, and it can visually indicate that the text and the product image are associated.

[0090] Next, the extraction unit (130) of the first server unit (100) can use the first artificial intelligence engine unit (10) to compare the generated second web page image with second web page images corresponding to web page templates stored in the first database (140), thereby extracting at least one second web page image having the highest similarity to the second web page image of the generated reference web page among the second web page images (step: S5).

[0091] For example, the extraction unit (130) uses the artificial intelligence engine unit (10) to compare a second web page image corresponding to a reference web page with second images of a plurality of web page templates stored in advance, and selects one or more templates with the highest similarity to recommend as web page templates to be used for web page generation. The first database (140) stores a second web page image (i.e., a graphical web page image) corresponding to each of a plurality of predefined web page templates.

[0092] In comparing similarity between images, object position similarity, which indicates how similar each object (shape) is relative to itself; object size similarity, which indicates how similar the sizes of shapes of the same object type are; content type correspondence similarity, which indicates whether objects of the same type (color) exist in the same location; and object count and density similarity, which indicates the similarity of the number of objects included in the entire webpage and their placement density, can be calculated. Additionally, structural similarity indices, cosine similarity after vectorization based on shape features, and cosine layout-similarity scoring functions can be used as similarity calculation algorithms.

[0093] For example, the extraction unit (130) may calculate a similarity score between the second web page image of the reference web page and the second web page images of the web page templates, sort them in descending order based on the similarity score, select the top N templates (N is an integer greater than or equal to 1) as the "most similar template candidates," and display actual template information corresponding to the N candidates to the user as recommended web page designs.

[0094] To examine this more specifically, in one embodiment of the present invention, the reference webpage and the webpage template images to be compared therewith are also composed of shape-based visualization images, i.e., shape-based webpage images, generated in the same manner. Accordingly, the extraction unit (130) can analyze the position, size, color, shape, and relative arrangement between objects of each object between the two images in a vectorized form.

[0095] The extraction unit (130) can calculate the similarity between two images through an object-specific attribute matching algorithm. At this time, a quantified similarity score can be calculated based on how closely objects with the same color in the same location match. Additionally, the relative distance between objects, the order of placement, and the similarity of color brightness and saturation can also be included in the similarity calculation. The similarity calculation can be performed more precisely through an artificial intelligence model (e.g., a CNN-based similarity evaluation network or a Siamese Network structure), and the learned evaluation model can provide evaluation results at a level that humans can visually judge as similar.

[0096] When all comparisons are completed, the extraction unit (130) selects the top N templates (e.g., top 5, etc.) based on similarity scores, and the metadata of these templates (e.g., template name, description, HTML / CSS preview link, etc.) is also ready to be provided to the user.

[0097] FIG. 8 is an exemplary diagram showing a second web page image of a web page template extracted by the extraction unit (130) in correspondence with a second web page image of a reference web page shown in FIG. 7.

[0098] As shown in FIG. 8, the second web page image (I3) of the extracted web page template is almost identical to the second web page image of the reference web page in terms of object type and layout, except that the banner portion or text size is slightly different. Therefore, it can be seen that the extracted web page template is very similar to the reference web page.

[0099] In this way, according to one embodiment of the present invention, the first artificial intelligence engine unit (10) is used to compare the similarity between a second webpage image and a shape having a color determined according to the type of content for each object, arranged according to layout information. That is, the reference webpage and the webpage template image to be compared are also composed of a shape-based visualization image, i.e., a shape-based webpage image, generated in the same way, and since the two are compared, the speed and reliability of the calculation when calculating similarity can be significantly increased.

[0100] Meanwhile, when the extraction unit (130) extracts multiple second web page images, it may display the extracted multiple second web page images, and may also display a user interface on the user terminal (UR) that allows the user to select a desired second web page image. In this case, a web page template corresponding to the second web page image selected based on the user interface may be extracted as a web page template to be used for web page creation.

[0101] Next, the display unit (150) can display at least one webpage template corresponding to at least one extracted second webpage image on the user terminal (UR) (step: S6).

[0102] When a web page template for creating a web page is determined based on the displayed web page template, a web page can be created using that web page template. Images such as product images can be inserted into the web page. The images can be obtained from the first database unit (140) or the user terminal (UR).

[0103] FIG. 9 is a flowchart for explaining the operation of the second processing unit (102) shown in FIG. 2.

[0104] As illustrated in FIG. 9, the second processing unit (102) can extract web page content corresponding to a user that is pre-stored in the first database unit (140) (step: S21). The first database unit (140) has pre-stored web page content of the user received from the user terminal (UR). Here, the web page content may be web page content that the user will use when operating a shopping mall or web page content that will be used after creating a web page.

[0105] The second processing unit (102) can generate an automatic sample webpage by using the first artificial intelligence engine unit (10) to analyze the object attribute information of the extracted webpage content, and then inserting the extracted content into the extracted webpage template based on the analyzed object attribute information (Step: S22). The second processing unit (102) can display the generated automatic sample webpage on a user terminal (UR) (Step: S23).

[0106] FIG. 10 is an exemplary diagram showing a web page template corresponding to the second web page image shown in FIG. 8, that is, a web page image in which content is inserted as an object into an extracted web page template.

[0107] As shown in FIG. 10, the design concept of the generated automatic sample webpage (I4) is similar to that of the webpage image (I1) of the reference webpage shown in FIG. 6.

[0108] For example, assuming that the reference webpage is a webpage of a shopping mall that sells shoes and the user wants to operate a women's clothing shopping mall but likes the webpage design of the shopping mall on the reference webpage, if the user simply enters the address of the reference webpage into the first server unit (100), the first server unit (100) can automatically recommend a women's clothing shopping mall webpage using a webpage template with a design concept similar to the reference webpage as an automatic sample webpage based on artificial intelligence.

[0109] Therefore, users achieve high satisfaction with the design concept of the recommended webpage. Furthermore, if a user operates an online store by creating a webpage based on the recommended template, buyers who frequently visit the store operating the reference webpage will be able to enjoy shopping with a sense of familiarity even when accessing the user's store, despite the completely different product categories. Consequently, this can lead to increased sales for the online store operated by the user.

[0110] Meanwhile, in order to implement such a web page design recommendation system, the first database unit (140) builds second web page images of web page templates as big data, and below we will look at an example of building web page template data.

[0111] FIG. 11 is a block diagram showing the configuration of a web page template data construction system according to a preferred embodiment of the present invention.

[0112] As illustrated in FIG. 11, the second server unit (200) can be linked with the first database unit (140) and the second artificial intelligence engine unit (20). The second server unit (200) can construct web page template data by generating second web page images (i.e., geometric web page images) for web page templates stored in the first database unit (140) and storing them in the first database unit (140), thereby visualizing the web page templates into images containing geometric objects.

[0113] The second server unit (200) receives a plurality of web page templates for generating a plurality of web pages from the first database unit (140), and based on the artificial intelligence engine unit, analyzes each of the said web page templates to obtain attribute information and layout information of an object to be rendered in the web page corresponding to the said web page template, and based on the obtained attribute information and layout information of the object, generates a graphical web page image corresponding to the said web page template, and can store the generated graphical web page image in the database unit by matching it to the information of the said web page template.

[0114] FIG. 12 is a block diagram showing the configuration of the second server unit (200) shown in FIG. 11, and FIG. 13 is a flowchart for explaining the operation flow of the second server unit (200) shown in FIG. 12.

[0115] Referring to FIGS. 12 and 13, the template receiving unit of the second server unit (200) can receive multiple web page templates for generating multiple web pages from the database unit (step: S31).

[0116] Next, the generation unit of the second server unit (200) can analyze each of the above web page templates based on the second artificial intelligence engine unit (20) and obtain attribute information and layout information of an object to be rendered in a web page corresponding to the web page template (step: S32).

[0117] For example, the generation unit can identify objects within the webpage and extract attribute information of the identified objects by converting an HTML document constituting the webpage template into a DOM, searching for tags, and parsing static data.

[0118] More specifically, the generation part converts the HTML document into a DOM and major tags, for example , , <nav> , <section> , <header> , <footer>DOM parsing can be performed by traversing the back. The constructor can classify object types based on attributes such as class, id, role, aria-*, and data-*, and identify objects. For example, class="main-banner" is a banner image, class="product-item" is a product image / container, nav tags are menu areas, and section and article are text areas; the constructor can classify types and perform identification at the object level. Based on this, the constructor can extract attribute information and layout information of the objects.

[0119] The attribute information of the object may include at least one of the content type information, object association information, size information, shape information, and location information of the object. The content type information may be information indicating whether the object is a promotional image, a product image, a menu bar, a banner image, or text.

[0120] The generating unit can generate a graphical webpage image (i.e., a second webpage image) corresponding to the webpage template based on the attribute information and layout information of the acquired object (step: S33).

[0121] For example, the generation unit may convert an object within the webpage into an object of a predetermined attribute based on the attribute information of the acquired object, based on the layout information. The generation unit may extract an object of a predetermined attribute that maps to the acquired object from the first database unit (140) based on the attribute information of the acquired object, and insert the extracted object of a predetermined attribute at a location specified by the layout information.

[0122] As previously mentioned in the description with reference to Fig. 7, the objects of the graphic webpage image are placed in the same location with the same size and shape in correspondence with the objects included in the webpage, and are displayed as shapes of predetermined colors corresponding to the content type of each object.

[0123] The shapes within the above-mentioned geometric webpage image display objects with the same content attribute in the same color, and objects with different content attributes in different colors to distinguish them from one another, and each shape may display an outline to distinguish the boundary with adjacent shapes.

[0124] The shapes within the above-mentioned geometric webpage image may indicate the difference in content attributes and the association of content attributes between objects by having the same RGB values ​​for objects that are related according to the association information between objects, even though the content attributes between objects are different, while having different brightness or saturation.

[0125] The above-described geometric webpage image inserts predetermined geometric content into objects within the webpage corresponding to the webpage template, thereby visualizing the webpage template structure and enabling visual comparison of the webpage template structure.

[0126] The storage unit of the second server unit (200) can store the generated graphic web page image in the first database unit (140) by correlating it with the information of the web page template (step: S34).

[0127] FIG. 14 is a block diagram showing a web page design recommendation system according to another embodiment of the present invention.

[0128] As illustrated in FIG. 14, the third server unit (300) can be linked with a plurality of shopping malls (SV), user terminals (UR), and the third artificial intelligence engine unit (30) through a communication network. The third artificial intelligence engine unit (30) may include various artificial intelligence models trained for image analysis, object identification and extraction, comparison between images based on object attribute information and layout information, and detection of similar images. The shopping mall (SV) may refer to an online mall that conducts e-commerce online.

[0129] A user terminal (UR) can be a network terminal logged in with the user's unique identification information. In the description of the present embodiment, the user may be an entity that intends to operate a shopping mall webpage. The user terminal (UR) connects to a third server unit through a communication network to automatically generate a shopping mall webpage based on a webpage design optimized for the user's taste recommended by a webpage design recommendation system, and can operate a shopping mall using the generated shopping mall webpage.

[0130] Such user terminals (UR) may include at least one computing terminal in hardware. For example, the user terminal (UR) may be a computing system equipped with at least one computing device of any type capable of connecting to a network, such as a server-class computer, a smartphone, a personal computer terminal, a laptop, a tablet PC, etc.

[0131] The third server unit (300) receives a URL of a reference webpage that the user wants to refer to from a user terminal (UR), obtains a first webpage image of the reference webpage using the URL, and, based on analyzing the first webpage image of the reference webpage using the third artificial intelligence engine unit (30), obtains attribute information and layout information of an object included in the reference webpage, and by comparing the extracted object attribute information and layout information of the reference webpage with object attribute information and layout information corresponding to webpage templates stored in the second database unit, extracts at least one webpage template that has the highest similarity to the reference webpage and displays the extracted at least one webpage template on the user terminal (UR).

[0132] FIG. 15 is a block diagram showing the detailed configuration of the third server unit (300) shown in FIG. 14.

[0133] As illustrated in FIG. 15, the third server unit (300) can be linked with a web page image acquisition unit, a web page template extraction unit, a web page template display unit, a second database unit, etc. Each of the above units can be linked with each other, and if necessary, can connect to the third artificial intelligence engine unit (30) and use various artificial intelligence models included in the third artificial intelligence engine unit (30).

[0134] FIG. 16 is a flowchart for explaining the operation flow of the third server unit (300) shown in FIG. 15.

[0135] Referring to FIGS. 14 to 16, the web page image acquisition unit can receive the URL of a reference web page that the user wishes to refer to from the user terminal (UR) (step: S41). For example, as mentioned in the description with reference to FIG. 4 above, the web page image acquisition unit can display a URL input unit on the user terminal (UR) and input the URL of the reference web page that the user wishes to refer to based on the URL input unit.

[0136] Next, the web page image acquisition unit can acquire a first web page image of the reference web page using the URL (step: S42). Here, the first web page image is an image that visualizes the target web page as is, and may mean, for example, a captured image of the target web page. That is, the first web page image corresponding to the reference web page may be a captured image of the reference web page.

[0137] For example, by analyzing the HTML source corresponding to the URL of the reference webpage and rendering the reference webpage, and by capturing the rendered reference webpage, a first webpage image, which is a webpage capture image, can be obtained.

[0138] The web page template extraction unit can obtain attribute information and layout information of an object included in the reference web page based on analyzing the first web page image of the reference web page using the third artificial intelligence engine unit (30) (step: S43).

[0139] The attribute information of the object may include at least one of the content type information, object association information, size information, shape information, and location information of the object. The content type information may be information indicating whether the object is a promotional image, a product image, a menu bar, a banner image, or text.

[0140] More specifically, the web page template extraction unit can extract visual objects contained therein as structured information by analyzing the first web page image through an artificial intelligence engine. For example, the web page template extraction unit can perform a preprocessing step to improve the accuracy of object recognition by adjusting the image resolution to a standard size and performing noise removal and edge highlighting processing. The web page template extraction unit can perform an object detection step in conjunction with the third artificial intelligence engine unit (30) using an object detection artificial intelligence model such as YOLOv5, Detectron2, Faster R-CNN, etc., taking the first web page image as an input value and receiving the location coordinates of each object and the estimated object class as an output value. For example, the web page template extraction unit can detect the location (bounding box, etc.), type (class), and confidence information of each object based on the object detection artificial intelligence model.

[0141] The web page template extraction unit can extract attribute information of each detected object. The attribute information of the object may include information on the type of content of the object, information on associations between objects, size information, shape information, location information, etc.

[0142] Here, the content type information may be information indicating whether the object is a promotional image, a product image, a menu bar, a banner image, or text. Location and size information may indicate the position, width, and height of each object in pixels. Shape information may indicate the shape of each object, such as a square, circle, or rectangle. The association between objects is information indicating whether multiple objects are grouped in the same area or whether there is a correlation in terms of content.

[0143] Next, the web page template extraction unit can extract at least one web page template that has the highest similarity to the reference web page by comparing the object attribute information and layout information of the extracted reference web page with the object attribute information and layout information corresponding to the web page templates stored in the second database unit (step: S44).

[0144] For example, the web page template extraction unit normalizes the attribute information vectors of the reference web page and each stored web page template. Here, position, size, etc., can be normalized based on the aspect ratio and compared. The web page template extraction unit can calculate similarity between attribute information vectors. For similarity between vectors, at least one mathematical distance or similarity measure may be used among the directional similarity of object arrays through cosine similarity, absolute distance between attribute numeric values ​​through Euclidean distance, degree of placement overlap through layout IoU (Intersection over Union), and object type matching rate (i.e., content type matching rate).

[0145] The web page template extraction unit can perform a weighted-based comprehensive similarity evaluation. For example, the comprehensive similarity is calculated by summing the content type similarity, location similarity, size similarity, and layout type similarity, while assigning weights to each item. For example, the weighted comprehensive similarity can be calculated using a calculation method such as, for instance, "Comprehensive Similarity = 0.4 × Content Type Similarity + 0.3 × Location Similarity + 0.2 × Size Similarity + 0.1 × Layout Type Similarity".

[0146] The web page template extraction unit sorts the web page templates in order of highest overall similarity calculated in this way, and can extract at least one web page template as a recommended template, for example, the top N (where N is an integer greater than 1). Then, the web page template display unit can display the extracted at least one web page template on the user terminal (UR) (step: S45).

[0147] FIG. 17 is a block diagram showing the configuration of a device for performing a web page design recommendation method based on artificial intelligence and a web page template data construction method according to an embodiment of the present invention. The device for performing the web page design recommendation method and the web page template data construction method may be configured as a computing system as shown in FIG. 17. Referring to FIG. 17, the computing system (1000) may include flash storage (1010), a processor (1020), RAM (1030), an input / output device (1040), and a power supply device (1050). Additionally, the flash storage (1010) may include a memory device (1011) and a memory controller (1012). Meanwhile, although not shown in FIG. 17, the computing system (1000) may further include ports capable of communicating with a video card, sound card, memory card, USB device, etc., or with other electronic devices.

[0148] The computing system (1000) can be implemented as a personal computer or as a portable electronic device such as a laptop computer, mobile phone, PDA (personal digital assistant) and camera.

[0149] The processor (1020) can perform specific calculations or tasks. According to an embodiment, the processor (1020) may be a microprocessor, a Central Processing Unit (CPU). The processor (1020) can communicate with RAM (1030), an I / O device (1040), and flash storage (1010) through a bus (1060), such as an address bus, a control bus, and a data bus.

[0150] According to one embodiment, the processor (1020) may also be connected to an expansion bus such as a Peripheral Component Interconnect (PCI) bus.

[0151] RAM (1030) can store data necessary for the operation of the computing system (1000). For example, any type of random access memory including DRAM, mobile DRAM, SRAM, PRAM, FRAM, MRAM, and RRAM can be used as RAM (1030).

[0152] The input / output device (1040) may include input means such as a keyboard, keypad, mouse, etc. and output means such as a printer, display, etc. The power supply device (1050) may supply an operating voltage required for the operation of the computing system (1000).

[0153] Here, the processor (1020) may be configured to perform a web page design recommendation method and a web page template data construction method according to a preferred embodiment of the present invention. More specifically, the operation of the processor may follow the web page design recommendation method or the web page template data construction method according to the aforementioned embodiment of the present invention.

[0154] The method according to the present invention described above can be implemented as computer-readable code on a computer-readable recording medium. Computer-readable recording media include all types of recording media in which data that can be decoded by a computer system is stored. Examples include ROM (Read Only Memory), RAM (Random Access Memory), magnetic tape, magnetic disk, flash memory, optical data storage devices, etc. Additionally, computer-readable recording media can be distributed to computer systems connected via a computer network and stored and executed as code that can be read in a distributed manner.

[0155] Although the invention has been described above with reference to the drawings and embodiments, this does not mean that the scope of protection of the present invention is limited by the drawings or embodiments, and those skilled in the art will understand that various modifications and changes can be made to the present invention without departing from the spirit and scope of the invention as described in the following claims.

[0156] Specifically, the described features may be executed in digital electronic circuits, or in computer hardware, firmware, or combinations thereof. The features may be executed, for example, in a computer program product implemented in a storage device within a machine-readable storage device for execution by a programmable processor. And the features may be executed by a programmable processor that executes a program of instructions for performing the functions of the described embodiments by operating on input data and generating output. The described features may be executed in one or more computer programs that can be executed on a programmable system comprising at least one programmable processor, at least one input device, and at least one output device coupled to receive data and instructions from a data storage system and to transmit data and instructions to a data storage system. A computer program includes a set of instructions that may be used directly or indirectly within a computer to perform a specific action for a predetermined result. A computer program may be written in any form of a programming language, including compiled or interpreted languages, and may be used in any form including as a module, component, subroutine, or other unit suitable for use in another computer environment, or as an independently operable program.

[0157] Suitable processors for the execution of programs of instructions include, for example, both general-purpose and special-purpose microprocessors, and one of a single processor or a multiprocessor of another type of computer. In addition, storage devices suitable for implementing computer program instructions and data that implement the described features include, for example, semiconductor memory devices such as EPROM, EEPROM, and flash memory devices; magnetic devices such as internal hard disks and removable disks; magneto-optical disks; and all forms of non-volatile memory including CD-ROM and DVD-ROM disks. Processors and memory may be integrated within application-specific integrated circuits (ASICs) or added by ASICs.

[0158] Although the present invention described above is explained based on a series of functional blocks, it is not limited by the aforementioned embodiments and attached drawings, and it will be obvious to those skilled in the art that various substitutions, modifications, and changes are possible within the scope of the technical concept of the present invention.

[0159] The combination of the aforementioned embodiments is not limited to the aforementioned embodiments, and various forms of combinations in addition to the aforementioned embodiments may be provided as needed for implementation and / or implementation.

[0160] In the aforementioned embodiments, methods are described based on flowcharts as a series of steps or blocks; however, the present invention is not limited to the order of the steps, and some steps may occur in a different order or simultaneously with other steps as described above. Furthermore, those skilled in the art will understand that the steps shown in the flowcharts are not exclusive, that other steps may be included, or that one or more steps of the flowcharts may be omitted without affecting the scope of the present invention.

[0161] The foregoing embodiments include examples of various aspects. While it is not possible to describe all possible combinations for representing various aspects, those skilled in the art will recognize that other combinations are possible. Accordingly, the present invention shall be deemed to include all other substitutions, modifications, and changes falling within the scope of the following claims.

[0162] Although preferred embodiments of the present invention have been described above, those skilled in the art will understand that various modifications and changes can be made to the present invention without departing from the technical details and scope of the invention as described in the following claims. Accordingly, future modifications to the embodiments of the present invention will not depart from the technical aspects of the present invention.< / footer> < / header> < / section> < / nav>

Claims

1. In a web page design recommendation method performed by a server, A step of receiving the URL of a reference webpage that the user wishes to refer to from a user terminal; A step of obtaining a first webpage image corresponding to the reference webpage using the above URL; A step of obtaining attribute information and layout information of an object included in the reference webpage based on analyzing the first webpage image of the reference webpage using an artificial intelligence engine; A step of generating a second webpage image corresponding to the reference webpage based on the attribute information and layout information of the acquired object; A step of extracting at least one second webpage image having the highest similarity to the second webpage image of the generated reference webpage among the second webpage images by using the artificial intelligence engine to compare the generated second webpage image with second webpage images corresponding to webpage templates stored in a database; A web page design recommendation method characterized by including the step of displaying at least one web page template corresponding to at least one extracted second web page image on the user terminal.

2. In claim 1, the step of receiving the URL of the reference webpage is, A step of displaying a URL input section on the user terminal; A web page design recommendation method characterized by including a step of inputting the URL of a reference web page desired by the user based on the above URL input section.

3. In claim 1, the step of acquiring a first webpage image corresponding to the reference webpage is: A step of analyzing the HTML (HyperText Markup Language) source corresponding to the URL of the reference webpage and rendering the reference webpage; and A webpage design recommendation method characterized by including the step of acquiring a first webpage image, which is a webpage capture image, by capturing the rendered reference webpage.

4. In claim 1, the step of generating the second webpage image is, A webpage design recommendation method characterized by including a step of converting an object within the first webpage image into an object of a predetermined attribute according to the attribute information of the acquired object based on the above layout information.

5. In claim 4, the step of converting an object within the first webpage image into an object of predetermined attributes is, A step of extracting from a database an object of a predetermined attribute that maps to the acquired object according to the attribute information of the acquired object; and A web page design recommendation method characterized by including the step of inserting an object of the extracted fixed attributes into a location specified by the layout information.

6. In Clause 4, the attribute information of the object is, A web page design recommendation method characterized by including at least one of the content type information, object association information, size information, shape information, and location information of the above-mentioned object.

7. In Clause 6, the content type information is, A web page design recommendation method characterized by information indicating whether the above object is a promotion image, a product image, a menu bar, a banner image, or text.

8. In claim 6, the step of generating the second webpage image is, A webpage design recommendation method characterized by including a step of converting an object within the first webpage image into a shape having the same size and shape and a predetermined color, according to the content type information of the object acquired above.

9. A webpage design recommendation method according to claim 4, characterized in that the objects of the second webpage image are placed in the same location with the same size and shape corresponding to the objects included in the first webpage image, and are displayed as shapes of a predetermined color corresponding to the content type of each object.

10. In claim 9, the figures within the second webpage image are, A web page design recommendation method characterized by displaying objects with the same content attribute in the same color, displaying objects with different content attributes in different colors to distinguish them from each other, and displaying an outline for each shape to distinguish the boundary with adjacent shapes.

11. In claim 10, the figures within the second webpage image are, A web page design recommendation method characterized by indicating the difference in content attributes and the association of content attributes between objects, wherein objects that are related according to association information between objects have the same RGB value but different brightness or saturation, while having different content attributes between objects.

12. In claim 1, the step of extracting at least one second webpage image is, A webpage design recommendation method characterized by increasing the speed and reliability of computation by using the above-mentioned artificial intelligence engine to compare the similarity between a second webpage image and shapes having a color determined according to the type of content for each object, arranged according to layout information.

13. A receiver that receives the URL of a reference webpage that the user wishes to refer to from a user terminal; An image generation unit that acquires a first webpage image corresponding to the reference webpage using the above URL, acquires attribute information and layout information of an object included in the reference webpage based on analyzing the first webpage image of the reference webpage using an artificial intelligence engine, and generates a second webpage image corresponding to the reference webpage based on the acquired attribute information and layout information of the object; An extraction unit that extracts at least one second webpage image having the highest similarity to the second webpage image of the generated reference webpage among the second webpage images by using the artificial intelligence engine above and comparing the generated second webpage image with second webpage images corresponding to webpage templates stored in a database unit; and A web page design recommendation device characterized by including a display unit that displays at least one web page template corresponding to at least one extracted second web page image on the user terminal.

14. In claim 13, the receiving unit is, A web page design recommendation device characterized by displaying a URL input section on the user terminal and inputting the URL of a reference web page desired by the user based on the URL input section.

15. In claim 13, the image generating unit, A web page design recommendation device characterized by analyzing an HTML (HyperText Markup Language) source corresponding to the URL of the reference web page to render the reference web page, and by capturing the rendered reference web page to obtain a first web page image, which is a web page capture image.

16. In claim 13, the image generating unit, A web page design recommendation device characterized by converting an object within the first web page image into an object of a predetermined attribute according to the attribute information of the acquired object based on the above layout information.

17. In claim 16, the image generating unit, A web page design recommendation device characterized by extracting an object with a defined attribute mapped to the acquired object from a database according to the attribute information of the acquired object, and inserting the extracted object with the defined attribute into a location specified by the layout information.

18. In Clause 16, the attribute information of the object is, A web page design recommendation device characterized by including at least one of the content type information, object association information, size information, shape information, and location information of the above-mentioned object.

19. Artificial intelligence engine; and A web page design recommendation system characterized by including a web page server that receives a URL of a reference web page that a user wishes to refer to from a user terminal, obtains a first web page image corresponding to the reference web page using the URL, obtains attribute information and layout information of an object included in the reference web page based on analyzing the first web page image of the reference web page using the artificial intelligence engine, generates a second web page image corresponding to the reference web page based on the obtained attribute information and layout information of the object, and extracts at least one second web page image having the highest similarity to the second web page image of the reference web page among the second web page images by comparing the generated second web page image with second web page images corresponding to web page templates stored in a database using the artificial intelligence engine, and displays at least one web page template corresponding to the extracted at least one second web page image on the user terminal.

20. On the computer, A step of receiving the URL of a reference webpage that the user wishes to refer to from a user terminal; A step of obtaining a first webpage image corresponding to the reference webpage using the above URL; A step of obtaining attribute information and layout information of an object included in the reference webpage based on analyzing the first webpage image of the reference webpage using an artificial intelligence engine; A step of generating a second webpage image corresponding to the reference webpage based on the attribute information and layout information of the acquired object; A step of extracting at least one second webpage image having the highest similarity to the second webpage image of the generated reference webpage among the second webpage images by using the artificial intelligence engine to compare the generated second webpage image with second webpage images corresponding to webpage templates stored in a database; A computer program stored on a medium to execute the step of displaying at least one webpage template corresponding to at least one extracted second webpage image on the user terminal.

Images