WO2019009688A1 - 이미지 스크롤에 적합한 시퀀스 이차원 이미지의 태그정보 처리 장치 - Google Patents

이미지 스크롤에 적합한 시퀀스 이차원 이미지의 태그정보 처리 장치 Download PDF

Info

Publication number
WO2019009688A1
WO2019009688A1 PCT/KR2018/007761 KR2018007761W WO2019009688A1 WO 2019009688 A1 WO2019009688 A1 WO 2019009688A1 KR 2018007761 W KR2018007761 W KR 2018007761W WO 2019009688 A1 WO2019009688 A1 WO 2019009688A1
Authority
WO
WIPO (PCT)
Prior art keywords
image
tag
viewer
tag information
file
Prior art date
Application number
PCT/KR2018/007761
Other languages
English (en)
French (fr)
Inventor
이철윤
Original Assignee
(주)샘터
이철윤
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by (주)샘터, 이철윤 filed Critical (주)샘터
Publication of WO2019009688A1 publication Critical patent/WO2019009688A1/ko

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06Q—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES; SYSTEMS OR METHODS SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES, NOT OTHERWISE PROVIDED FOR
    • G06Q30/00—Commerce
    • G06Q30/06—Buying, selling or leasing transactions
    • G06Q30/0601—Electronic shopping [e-shopping]
    • G06Q30/0641—Shopping interfaces
    • G06Q30/0643—Graphical representation of items or shoppers
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/50—Information retrieval; Database structures therefor; File system structures therefor of still image data
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06Q—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES; SYSTEMS OR METHODS SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES, NOT OTHERWISE PROVIDED FOR
    • G06Q30/00—Commerce
    • G06Q30/02—Marketing; Price estimation or determination; Fundraising
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06Q—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES; SYSTEMS OR METHODS SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES, NOT OTHERWISE PROVIDED FOR
    • G06Q30/00—Commerce
    • G06Q30/02—Marketing; Price estimation or determination; Fundraising
    • G06Q30/0241—Advertisements
    • G06Q30/0277—Online advertisement
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06Q—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES; SYSTEMS OR METHODS SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES, NOT OTHERWISE PROVIDED FOR
    • G06Q30/00—Commerce
    • G06Q30/06—Buying, selling or leasing transactions
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G06T11/003—Reconstruction from projections, e.g. tomography

Definitions

  • the present invention relates to a tag information processing apparatus for a sequence two-dimensional image suitable for image scrolling, and more particularly to a tag information processing apparatus for rapidly and accurately providing tag information mapped to a sequence two-dimensional image displayed continuously in accordance with a scroll operation, And more particularly, to a tag information processing apparatus of a sequence two-dimensional image suitable for image scrolling which can easily and easily edit the tag information accompanying the addition and modification of the tag information.
  • IPTV Internet Protocol TV
  • smart refrigerators are being developed as smart home appliances having Internet functions.
  • Interactive IPTV e-commerce is a service that provides product information related to broadcast contents during program viewing, unlike conventional home shopping. For example, when a performer drinks a functional drink during a health program broadcast, Popups are exposed in the upper right corner, and viewers who want to purchase this functional drink can press the specific button on the remote control to check detailed information of the product and purchase the product directly by QR code or telephone.
  • Another example is the introduction of a smart refrigerator with a high-resolution touch display on the refrigerator door and a built-in smartphone with voice recognition and a web OS, which can be used to shop online with built-in apps, Kitchen TV viewing in the kitchen, phone mirroring function for playing photos and movies on smart phones, and Wi-Fi and Bluetooth wireless connection for internet connection.
  • Customers can directly access the homepage through the application of the smart phone and can order and settle service items (for example, food, wreath, household goods, etc.) without visiting the store.
  • service items for example, food, wreath, household goods, etc.
  • a service for processing tickets for sale, payment, etc. by an unmanned order system in theaters, concert halls, stadiums, restaurants, etc. is widely used.
  • images and additional information of digital contents are separately provided. For example, when a service item is selected, an image and additional information are displayed on the screen. The customer tries to pay attention to the image but temporarily tries to read the additional information separately and not linked with the image There is a problem that the information delivery power is falling.
  • the related images are continuously displayed according to the scroll operation by the user, and additional information It is necessary to increase the information transfer power by selectively displaying the information. It is also necessary to have an editing technology that can easily modify the image and additional information of the digital contents when the service item change and additional work are needed.
  • a tag information processing device of a sequence two-dimensional image suitable for image scrolling which can easily and easily edit accompanying tag information.
  • an apparatus for processing a sequence two-dimensional image tag comprising: a web server for providing a digital content including an image of a service item and tag information through a web page; An image database storing an image file of an individual two-dimensional image or a virtual two-dimensional image for visually representing the service item; A tag information database for storing tag information added to the image file; An image viewer for supplying an image file and tag information stored in the image database and the tag information database to the web server; And a viewer editor for editing the tag information accompanying the addition of a new image or the modification operation of the image in association with the image viewer, wherein the image viewer displays the sequence two- And the tag information mapped to the two-dimensional image is displayed in a peripheral area of the viewer screen in which the loaded image is displayed, and the viewer editor displays the tag information mapped to the two-dimensional image on the viewer screen Dimensional image or tag information of the editing object by using the provided image editing window and the tag editing window and stores the created file in the image database and
  • the image viewer may automatically calculate coordinates of a tag point mapped to a two-dimensional image displayed continuously in accordance with a scroll operation and provide tag information of a corresponding tag point.
  • the viewer editor When the input operation of the image editing window and the tag editing window is completed, the viewer editor generates an html file, a js file, and a json file as related files of a hierarchical structure, and the html file is a basic file constituting the viewer screen,
  • the js file is a file for initial setting of the viewer screen, and the json file is a file for setting tag information.
  • the image editing window may include a name for identifying the service item, an image selected for addition or modification, an initial image of the selected image that appears first when the viewer is loaded, a number of images continuously displayed in the left-right direction or the up- , The size of the viewer screen, and the size of the initial image.
  • the tag editing window may include a name for identifying the tag information, a presence or absence of a subtitle tag attached to the tag, an image number for identifying an image for specifying a tag, a tag point in a tagged image, The size of the tag pop-up screen for displaying the tag pop-up screen, the position of the tag pop-up screen appearing on the viewer screen, and the presence or absence of the connection line for connecting the tag point and the tag pop-up screen.
  • the user terminal may be provided with digital contents through a gateway connected to the Internet in a use environment in which the user terminal can access the personal computer connected to the intranet, And provides digital contents through a home gateway connected to the Internet in a use environment in which an IPTV and a smart refrigerator can be accessed as a smart home appliance for Internet service.
  • the present invention it is possible to increase the information transfer power of service items by continuously displaying sequence two-dimensional images viewed from different angles at the time of scrolling operation on the service item of the viewer screen.
  • the present invention can perform an editing operation using a viewer editor linked to an image viewer, it is easy to edit tag information accompanying new image addition and modification.
  • the present invention significantly reduces communication traffic as compared with a method of producing and providing a moving picture as in the existing technology, and also includes a process of initializing the image viewer and loading an image file asynchronously only when the corresponding image is loaded according to a user operation. Traffic can be further reduced.
  • FIG. 1 is a block diagram showing a configuration of a tag information processing apparatus of a sequence two-dimensional image suitable for image scrolling according to the present invention.
  • FIG. 2 is a flowchart illustrating a method of generating an image file according to the present invention.
  • FIG. 3 is a block diagram showing a detailed configuration of an image viewer according to the present invention.
  • FIG. 4 is an exemplary view illustrating a function of receiving tag information mapped to an individual two-dimensional image by the image viewer according to the present invention.
  • FIG. 5 is a view for explaining an enlarging function according to the present invention, and shows an operation of displaying an enlarged image in an image window.
  • FIG. 6 is a view for explaining an enlarging function according to the present invention, and shows an operation of displaying a enlarged image on a screen of a web page.
  • FIG. 7 is a diagram for explaining a method of generating a virtual two-dimensional image and setting a tag according to the present invention.
  • FIG. 8 is a view for explaining virtual two-dimensional images constituting a generated image file according to the present invention.
  • FIG. 9 is a diagram for explaining a tag setting file associated with a virtual two-dimensional image according to the present invention.
  • FIG. 10 is a diagram for explaining a coordinate value and a tag range which change during horizontal rotation with respect to a virtual two-dimensional image according to the present invention.
  • FIG. 11 is a diagram for explaining a change of coordinate values in horizontal rotation in the left direction according to the scroll operation with respect to the virtual two-dimensional image according to the present invention.
  • FIG. 12 is a diagram for explaining a change of a coordinate value in horizontal rotation in a right direction according to a scroll operation with respect to a virtual two-dimensional image according to the present invention.
  • FIG. 13 is a diagram for explaining a change of a tag range when rotating left, right, and up according to a scroll operation with respect to a virtual two-dimensional image of a center as a reference according to the present invention.
  • FIG. 14 is a diagram illustrating an image editing window of the viewer editor according to the present invention.
  • 15 is a diagram illustrating a tag editing window of the viewer editor according to the present invention.
  • 16 is a view for explaining an operation of generating a file and a folder structure based on information input in an image edit window and a tag edit window of the viewer editor according to the present invention.
  • 17 is a flowchart illustrating an editing process using the viewer editor according to the present invention.
  • 18 is a flowchart illustrating a process of each component for initializing an image viewer according to the present invention and providing tag information.
  • FIGS. 19 to 24 illustrate a process of receiving a virtual two-dimensional image and tag information in a web page according to the present invention.
  • a tag information processing apparatus for a sequence two-dimensional image suitable for image scrolling includes a user terminal 10, a user terminal 10, and a web server 10, which are provided with digital contents from a web server 30, A web server 30 for performing a service for supplying digital contents, a tag attached to an image constituting digital contents and a tag attached to an image in the web server 30, An image database 50 for storing the image file, a tag information database 60 for storing the tag setting file and the tag data, and an image database 50 for storing the image of the image database 50 and the tag information database 60 and a viewer editor 70 for adding or modifying the tag setting file and the tag data.
  • the user terminal 10 can access the web server 30 through various access paths according to the user environment.
  • the digital content is provided through the gateway 20a connected to the Internet 20c in a use environment in which the user can access the personal computer 10a connected to the company intranet.
  • a home gateway 20b connected to the Internet 20c Content can be provided.
  • the IPTV 10b is a well-known digital home appliance capable of receiving a broadcast signal
  • the smart refrigerator 10c can also be a kind of digital home appliances having a public Internet function.
  • the personal computer 10a, the IPTV 10b, and the smart refrigerator 10c can use a user input device such as a keyboard, a mouse, a push button, a remote controller, etc. to perform a control command by a user operation,
  • a user input device such as a keyboard, a mouse, a push button, a remote controller, etc.
  • a control command may be performed according to a touch input of a user.
  • the communication unit 20 is connected to the web server 30 through the wired Internet 20c.
  • the web server 30 it is also possible to connect the web server 30 by building a known general wireless Internet.
  • the user terminal 10 should be understood as a concept including an information device capable of downloading images, texts, moving images, and emails from the web server 30, and may be implemented using a web browser such as a tablet computer or a smart phone It is possible to access a homepage or an online shopping mall built on a web site.
  • the web server 30 provides a web page 32 for providing various web services by interfacing with the user terminal 10 by the communication module 33.
  • the user can access the web page 32 via the web page 32, Image search and viewing functions can be performed.
  • Digital contents provided by department stores, second-hand brokerage companies, travel agencies, real estate companies, restaurants, delivery food order agencies, theaters, stadiums, theaters, performance planners, government offices and passenger terminals, Images, texts, movies, and application programs that are tailored to the purpose of use and convenience of use.
  • the web server 30 includes a digital content processing unit 31 that provides digital content related to a service item.
  • the digital content processing unit 31 may provide a service item, for example, a search list in response to a user command, and may provide digital content selected by the user and including images and additional information provided from the image viewer 40.
  • the image viewer 40 supplies the digital content processed based on the image file of the image database 50 and the tag information of the tag information database 60 as a source for procuring the digital content of the digital content processing unit 31.
  • the image file stored in the image database 50 can be divided into two-dimensional images, which are generated by individual two-dimensional images or are sequence two-dimensional images linked to a scroll operation.
  • the individual two-dimensional images are generated as individual image files for displaying the service items as one image
  • a plurality of two-dimensional images associated with the scroll operation are generated as a plurality of two-dimensional images successively appearing along the moving direction when the mouse is dragged in the left- A set of image files corresponding to a two-dimensional image of the image.
  • a plurality of two-dimensional images associated with the scroll operation When a plurality of two-dimensional images associated with the scroll operation are continuously viewed for a short time by the image viewer 40, an object of the service item may be recognized as being virtually rotated.
  • a plurality of two-dimensional images associated with the scroll operation will be referred to as virtual two-dimensional images.
  • One method is to shoot and digitize the service items in a shooting studio for the purpose of directly generating image files of individual two-dimensional images or virtual two-dimensional images.
  • the service item which is a subject, is rotated by a different angle in the scroll direction, or the service item is fixed, and the photographing means is moved in the scroll direction, Can be obtained.
  • An image file can be generated through a computer operation as shown in FIG.
  • basic image data of a service item is obtained by converting a temporary image captured by a photographing means such as a digital camera or by using a CAD program such as AutoCad (100).
  • the base image data visually represents at least one of a front, a back, a left side, a right side, an upper side, and a lower side representing the appearance of the service item.
  • the basic image data is processed using the modeling program to model the object of the corresponding service item (110).
  • a color and a texture are designed and rendered for an object of the modeled service item (120).
  • An image file is created using the rendering data of the completed service item (130).
  • the image generating method in FIG. 2 may be repeated to generate a set of image files corresponding to a plurality of images.
  • the tag information database 60 stores tag information as detailed information for introducing the service item in detail, and the tag information includes a tag setting file and tag data necessary for displaying on a viewer screen in association with an individual two-dimensional image or a virtual two-dimensional image .
  • the digital content processing unit 31 outputs the digital content through the web page 32 based on the image file (the individual two-dimensional image or the virtual two-dimensional image) and the tag information processed by the image viewer 40.
  • the image viewer 40 renders an individual two-dimensional image and provides it to the digital content processing unit 31 or a virtual two-dimensional image and provides it to the digital content processing unit 31. That is, the image viewer 40 can selectively provide an individual two-dimensional image or a virtual two-dimensional image according to an input event of the web server 30.
  • the image viewer 40 can provide tag information mapped to an individual two-dimensional image or a virtual two-dimensional image. For example, by dragging on an individual two-dimensional image or a virtual two-dimensional image using a pointing device such as a mouse, or by grasping the intention of the user by selecting a tag button, tag information mapped on the image can be displayed on the web page 32 . That is, when the cursor of the mouse is positioned in the tag range set when moving the mouse cursor on the image displayed on the viewer screen, the tag information is displayed on the viewer screen so that the user can check the tag information.
  • a pointing device such as a mouse
  • the image viewer 40 can continuously display a virtual two-dimensional image on the viewer screen according to the scroll operation of dragging the cursor of the mouse by the user, and can set the mouse cursor on any one of the images stopped during the scrolling,
  • the tag information is displayed on the viewer screen so that the user can confirm the tag information.
  • FIG. 3 is a block diagram showing a detailed configuration of an image viewer according to the present invention.
  • the image viewer 40 has a user interface 411 for performing an interface.
  • the user interface 411 processes an input event for a user connected to the web page 32 to operate the image viewer 40 or an input event for performing a tag coordinate setting operation by the administrator.
  • the ratio adjusting module 412 processes a function of enlarging and displaying a partial area indicated by the mouse cursor in a state in which the magnifying glass function is activated and also displays a function of enlarging or reducing the entire image of the service item according to the operation of the mouse wheel Lt; / RTI >
  • the virtual two-dimensional image rotation module 413 continuously loads a set of image files generated according to FIG. 2 in response to the operation of dragging the mouse cursor with the scrolling function activated, continuously displaying the virtual two-dimensional image, It handles the function of displaying the object of the service item on the screen as if it is rotating virtually.
  • the tag information processing module 414 processes the function of automatically displaying the tag information mapped to the image when the area indicated by the mouse cursor is located in the predetermined tag range in a state where the tag function is activated.
  • tag information may include text, image, moving picture, and the like for informing information related to a service item, for example, product specifications and usage.
  • the two-dimensional image rendering module 415 functions to draw individual two-dimensional images on the web page 32.
  • the virtual two-dimensional image rendering module 416 functions to draw virtual two-dimensional images on the web page 32.
  • the two-dimensional coordinate checking module 417 and the virtual two-dimensional coordinate checking module 418 check whether the coordinates of the mouse cursor located on the individual two-dimensional image and the virtual two-dimensional image exist in the tag range, respectively.
  • the setting information loader 419 loads and applies the tag setting file and the viewer setting information set in the two-dimensional image and the virtual two-dimensional image by the two-dimensional setting unit 420 and the virtual two-dimensional setting unit 421, respectively.
  • the initialization module 422 performs a function of initializing the image viewer 40.
  • the asynchronous image loading module 423 is used to load an image file displayed by a viewer only when necessary, thereby reducing loading time.
  • the asynchronous image loading module 423 loads the corresponding image file individually without loading a plurality of image files at a time do.
  • the virtual two-dimensional coordinate calculation module 424 can change the range of the tag mapped to the image when the virtual two-dimensional images continuously appear according to the scroll operation, and automatically calculates the tag coordinates of the changed range of the tag.
  • a reference virtual two-dimensional image or initial image
  • the tag coordinates mapped to the reference virtual two-dimensional image or initial image
  • the size of the corresponding virtual two-dimensional image is changed when scrolling the image in the left / right direction (left or right) or up / down direction (up or down) centering on the reference virtual two-dimensional image, or enlarging or reducing the image of the viewer screen. Since the coordinates of the tag range set in the virtual two-dimensional image are changed, such change coordinates are automatically calculated.
  • the file processing module 425 loads the files (individual two-dimensional image files, virtual two-dimensional image files, and configuration files) used in the image viewer 40 and parses the loaded data.
  • the source code protection module 426 converts the source code distributed in the form of a text file into obfuscated code in order to protect the source code.
  • the source code protection module 426 specifies a URL and a date, .
  • the external interface module 427 is an interface module provided to control the image viewer 40 on the web page of the user terminal 10, and is implemented using an application programming interface (API).
  • API application programming interface
  • FIG. 4 is an exemplary view illustrating a function of receiving tag information mapped to an individual two-dimensional image by the image viewer according to the present invention.
  • the web page provided to the user terminal 10 can view various shopping information about the service item searched through the web browser screen 200.
  • the product image Ia selected in the product list and the product image Ia The tag button 211 is displayed together.
  • the mouse cursor is moved on the viewer screen 210 by the user while the pop-up window is opened by the tag button 211 and the 'magnifying glass function' is activated. In response thereto, 220).
  • the partially enlarged image may be displayed in an overlapped manner in the viewer screen 210 according to the movement of the mouse cursor.
  • the tag ranges mapped to the product image Ia loaded on the viewer screen 210 can be visually easily distinguished (indicated by a red dot in the yellow dashed line).
  • three tags are mapped to the product image Ia corresponding to the object of the displayed service item, but the number of tags to be mapped to the product image Ia can be changed.
  • these tags are not normally displayed, but the tag range may be displayed only when the tag function is activated by the tag button 211, or may be visually marked when the mouse cursor is moved to the corresponding tag range by the user.
  • the tag assisting window 222 may include a specification of a corresponding product, usage information, and address information for moving to a related web site. Also, the tag assisting window 222 may be implemented as an image or a moving image for providing various information.
  • the appearance of the service item is simple and the quantity of the tag information is small, it is necessary to mobilize individual two-dimensional images and display an image viewed from different angles due to the characteristics of the service item, If necessary, use a virtual two-dimensional image.
  • the 'scroll function' displays a plurality of virtual two-dimensional images continuously in accordance with the movement direction and the rotation angle when moving in the left-right direction or the up-down direction using the mouse cursor with respect to the same service item,
  • the range also changes dynamically.
  • the 'enlargement function' changes the image size by selecting the enlargement and reduction ratio by the user's wheel operation by the user. For example, when the image is enlarged, the two-dimensional coordinates (x1, y1) of the tag point 1 (T1) at a distance from the center Cm of the image displayed on the viewer screen 210 in FIG. The position of the image center Cm in the enlarged image of FIG. 5 (b) is displayed without fluctuation, but the two-dimensional coordinate (x2, y2) of the tag point 1 (Ta1) changes. (X1, y1) of the tag point 1 (T1) of the viewer screen 210 because the size of the viewer screen 210 is determined and the enlargement or reduction ratio is known, The coordinates (x2, y2) can be calculated.
  • the entire area of the web browser screen 200 can be utilized to enlarge or reduce the image by another method of the 'enlargement function' in the embodiment. Since the size of the enlarged or reduced image changes at this time, the coordinates of the tag point are calculated by using the relative positional change in the web browser screen 200 instead of applying the coordinate calculation using absolute coordinates.
  • the coordinate values of the tag points are set using the ratio of the distances in the left and right up and down directions with respect to the center of the web browser screen 200, that is, the image center Cm.
  • the x-axis coordinate value in the horizontal direction corresponds to the distance ratio (0 to -100%) corresponding to the distance from the origin in the left direction and the distance ratio (0 to + 100%) corresponding to the distance from the origin in the right direction.
  • the x value of the corresponding tag point is set.
  • the y-axis coordinate value in the up-and-down direction corresponds to the distance ratio (0 to + 100%) corresponding to the distance from the origin in the upward direction and the distance ratio (0 to -100%) corresponding to the distance from the origin in the downward direction Set the y value of the tag point.
  • the coordinate value is calculated according to the enlargement ratio or reduction ratio of the coordinate value (x-axis distance ratio, y-axis distance ratio) set as the distance ratio, Calculate the coordinate value of the point.
  • a virtual image of the object can be generated.
  • a predetermined pointer corresponding to the tag point on the object can be designated, and the coordinates of this pointer can be set to the coordinates of the tag point.
  • an image file generated for the same service item is divided into 360 image files divided into nine steps in the vertical direction and 40 steps in the horizontal direction for one product, Give the file a filename.
  • the file name is given in the form of a 'first number-second number'
  • the first number means the photographing step number in the up-and-down direction
  • the second number means the photographing step number in the horizontal direction
  • the rotation angle in the vertical direction and the horizontal direction can be recognized from the information about the file name of the image file upon loading.
  • a set of image files corresponding to service items includes a plurality of virtual two-dimensional images.
  • the tag information can be mapped to the virtual two-dimensional image.
  • the x-coordinate and the y-coordinate of the tag point C of the virtual two-dimensional image (file name 0_16) as a reference of coordinate setting are 250px and 240px
  • the diameter can be set to 30px around the point (C).
  • the x and y coordinate values and the tag range for the tag point C are set by the administrator, and the tag range corresponding to the other virtual two-dimensional image and the coordinates of the tag point are automatically calculated by the virtual two-dimensional coordinate calculation module 424 do.
  • the virtual two-dimensional coordinate calculation module 424 obtains the rotation angle with respect to the vertical direction and the horizontal direction from the file name (first number-second number) of the assigned image file.
  • the virtual two-dimensional coordinate calculation module 424 specifies coordinates of a virtual rotation axis for scrolling an object of the service item, that is, coordinates corresponding to the center of the entire image. Also, the coordinate values of the same tag mapped to the virtual two-dimensional image are changed along the scroll direction.
  • the virtual two-dimensional coordinate calculation module 424 sets a virtual circle using the rotation coordinates, the virtual rotation axis coordinates, and the tag coordinates changed in the scroll direction And calculates the coordinates corresponding to this virtual circle.
  • the tag coordinates can be calculated to set the changed tag range.
  • the automatically calculated tag coordinate values and tag ranges may differ depending on the virtual two-dimensional image. 10
  • the x, y coordinates and the tag range are directly set to 250px, 240px, and 30px for the virtual two-dimensional image (file name 0_16) serving as a reference
  • the virtual two- The x, y coordinates and tag range for the image (file name 0_12) are changed to 265px, 240px, and 15px, respectively. That is, the y coordinate of the tag coordinate is constant and the x coordinate and the tag range are changed with respect to the horizontally rotated virtual two dimensional image according to the scroll operation.
  • the tag setting coordinates (directly set by the administrator) of the reference virtual two-dimensional image on the upper side when horizontally rotated according to the scroll operation are located on the line L1, are mapped to the virtual two-dimensional image in the center,
  • the tag coordinates calculated by the two-dimensional coordinate calculation module 424 are located on the rightmost line L2 and are mapped to the virtual two-dimensional image on the lower side, and the tag coordinates calculated by the virtual two-dimensional coordinate calculation module 424 correspond to the line L1 And is located on the line L3 between the lines L2.
  • the x, y coordinates and the tag range are changed to 240px, 240px, and 15px for the virtual two-dimensional image (file name 0_20) rotated horizontally to the right according to the scroll operation.
  • the tag set coordinates set directly on the upper reference virtual two-dimensional image are located on the line R1, and are mapped to the virtual two-dimensional image in the center, and the virtual two-dimensional coordinate calculation
  • the tag coordinates calculated by the module 424 are located on the line R2 and mapped to the virtual two-dimensional image on the lower side and the tag coordinate calculated by the virtual two-dimensional coordinate calculation module 424 is located on the leftmost line R3 .
  • the coordinate value that is automatically calculated changes even when the display is vertically rotated in the vertical direction according to the scroll operation.
  • the x coordinate value of the tag coordinate mapped to the virtual two-dimensional image is the same and the y coordinate value changes.
  • the virtual two-dimensional coordinate calculation module 424 applies a known rotation angle to each of the virtual two-dimensional images scrolled left, right, up, and down based on the x, y coordinate values and the tag range set for the reference virtual two- And a calculation file for automatically calculating the x, y coordinate values and the tag range of the corresponding virtual two-dimensional image.
  • the tag range corresponding to the reference virtual two-dimensional image file name 0_16 upon rotation in the horizontal direction or the up-and-down direction is changed. For example, in the case of rotating in the vertical direction or the horizontal direction according to the scroll operation, (See FIG. 10), and the changed tag range is calculated using a calculation program.
  • the present invention performs a program operation in an html language suitable for a web environment so as to provide digital contents based on images and tag information via a homepage or an online shopping mall,
  • the image related to the service item can be added or modified and the tag information associated with the image can be edited.
  • a viewer editor 70 is used to easily edit image and tag information.
  • the administrator having the access right in the web page performs the editing operation, selects the "viewer editor” button displayed on the viewer screen to switch to the editing mode, and the image editing window 71 of the viewer editor 70 ) And the tag editing window 72, as shown in FIG. This will be described in detail.
  • FIG. 14 is a view illustrating an image editing window of the viewer editor according to the present invention.
  • FIG. 15 is a view illustrating a tag editing window of the viewer editor according to the present invention.
  • FIG. 17 is a flowchart illustrating an editing process using a viewer editor according to the present invention.
  • FIG. 17 is a view for explaining a file creation and a folder structure based on information input in an image editing window and a tag editing window of an editor.
  • the viewer screen of the image viewer 40 is outputted from the web page 32 according to the control command by the administrator having editing authority and the viewer editor 70 is activated by selecting the "viewer editor” button of the viewer screen ). Then, an object of the editing operation is selected (710).
  • an image editing window 71 is called up from an administrator terminal (not shown) and is output.
  • an administrator terminal not shown
  • images and setting information to be added or modified are input.
  • a service item title (1) a service item title (1)
  • an image selection (2) an initial image (3)
  • a vertical image number (4) a left and right image number (5)
  • the initial image size (7) respectively.
  • a name for identifying the service item is entered in the input field of the service item title (1), and the name is selected in the image list displayed in the assisting window 71-1 by calling in the image database 50 in the input field of the image selection 2 and selecting from the image icons displayed in the auxiliary window 71-1.
  • the initial image which is displayed first when the viewer is loaded is inputted.
  • a numerical value of the pixel unit (px) corresponding to the height and the width of the viewer screen 210 is input to the input screen of the viewer screen size (5), and the input image of the initial image size (6) (Px) corresponding to the height and the width of the initial image appearing first in the input image 210 (730).
  • a tag editing window 72 is opened on the viewer screen, and tag information related to an image to be added or modified is input.
  • tag information related to an image to be added or modified is input.
  • the tag title (7) the presence or absence of a subtitle (8)
  • the tag content the designated image number (10)
  • the designated image position 11
  • the tag popup screen size the tag popup screen position (13)
  • the connection line presence 14
  • a name for identifying the tag information related to the image to be modified or added is input to the input field of the tag title (7), and in the input field of the presence or absence of the subtitle (8), a sub tag attached to the tag of the tag title .
  • texts are to be input as texts for providing product specifications, source, production site, origin, ingredient name, handling method, price, guidance description, and notices related to the service item. But you can also use linking to view images and videos.
  • an image file for identifying an image for tag designation is input.
  • the corresponding image number is input.
  • an html file, a js file, a json file, or the like is generated as related files, and is generated in a hierarchical structure as shown in FIG.
  • a new default folder 73 is created, and AAA.html and VR folder 74 are created under the default folder 73.
  • AAA.js, AAA.json And an AAA folder 75 are created.
  • a plurality of images (image 1, image 2, ..., image n) and info.json are created under the AAA folder 75.
  • the html file is the basic file that constitutes the viewer screen.
  • js file is a file for initial setting of the viewer screen, and it sets the image path, the total size of the viewer screen, the initial image size, and the number of the initial image.
  • the json file is a file for setting the tag information, and includes a tag title, the presence or absence of a sub tag, a size of a tag popup screen, a screen position at which a tag popup screen appears, a tagged image number, a tag point in the image, The presence or absence of a connection line on the screen, the presence or absence of rotation according to scrolling, and the like.
  • info.json is a file for setting the number of images continuously viewed in the left-right direction and the up-down direction according to the scroll operation.
  • imgURL 'AAA.turntable', specify the js file name with the contents entered in ⁇ 2
  • width 1000, ⁇ 5 Specify the width of the viewer screen size with the contents entered in
  • imgWidth 500, Specify the width of the initial image size with the contents entered in ⁇ 6
  • imgHeight 400, Specify the height of the initial image size with the contents entered in ⁇ 6
  • cursorType 'mGlass'
  • the data input to the image editing window 71 and the tag input window 72 of the viewer editor 70 are generated as a js file and a json file without a separate conversion process, 50 and the tag information database 60, which can be implemented using a file system called node.js (760, 770).
  • the image viewer 40 can display the added or modified image file in the image database 50 and display it on the viewer screen.
  • the tag setting file of the tag information database 60 mapped to the added or modified image file, Can be called up and displayed on the viewer screen.
  • 18 is a flowchart illustrating a process of each component for initializing an image viewer according to the present invention and providing tag information.
  • the configuration file includes an image storage path, an image file to be loaded upon loading, a magnifying glass size, and an enlargement ratio to be applied to the magnifying glass function.
  • the image viewer 40 requests an image file and receives a two-dimensional image file or a virtual two-dimensional image file from the image database 50.
  • the provided image file includes rotation angle information.
  • the image viewer 40 performs initialization based on the setting file and the image file, and the setting file loading process is performed by the setting information loader 419 when the initialization is performed, and the image file loading process is performed by the asynchronous image loading module 423 Lt; / RTI >
  • an initialization completion command is input to the digital content processing unit 31, and the digital content processing unit 31 thereby enables online shopping to be started through the web page 32.
  • the user can perform a search for the additional information of the goods through the mouse operation by the customer on the downloaded web page to the user terminal 10.
  • the two-dimensional coordinate checking module 417 or the virtual two-dimensional coordinate checking module 418 of the image viewer 40 receiving the coordinate values provided according to the movement of the mouse cursor moves the cursor to the tag range of the image displayed on the web page . If it is determined that the cursor does not correspond to the tag range, the terminal responds as it is, and if it is determined that the cursor corresponds to the tag range, it requests the tag information to the tag information database 60 and transmits the received tag information to the digital content processing unit 31, Allows you to view tag information on a web page.
  • FIGS. 19 to 24 illustrate a process of receiving a virtual two-dimensional image and tag information in a product search window of a web page according to the present invention.
  • the user terminal 10 accesses the online shopping mall built on the website through the communication network 20.
  • the image viewer 40 is initialized according to a request from the digital content processing unit 31. [ The initialization process proceeds according to Fig.
  • the user having the user terminal 10 can search for the service item using the shopping guide screen 320 shown in FIG.
  • the shopping guide screen 320 includes a search window 330, an image window 340, a thumbnail image 350, an order guide window 360, a temporary purchase button 370, a purchase confirmation button 380, Etc. are displayed.
  • an image corresponding to the selected service item is displayed in the image window 340.
  • the digital content processing unit 31 retrieves the image from the image database 50 and provides the image to the web page 32.
  • a virtual two-dimensional image Im and a tag button 341 are displayed in the image window 340.
  • function buttons for selecting a service function a magnifying glass function, a rotation function, a product usage method, a tag list, etc.
  • the magnifying glass function button 3411 when the magnifying glass function button 3411 is clicked using a mouse, the magnifying glass function is activated, and a part of the area indicated by the mouse cursor is enlarged and displayed on the image window 340.
  • the rotation function button 3412 when the rotation function button 3412 is clicked using a mouse as shown in FIG. 23, the rotation function is activated and the virtual two-dimensional image is loaded and displayed on the image window 340 according to the movement of the mouse cursor. 13, the corresponding virtual two-dimensional images are continuously displayed. When the cursor is moved upward or downward, the corresponding virtual two-dimensional image is displayed Can be displayed continuously.
  • Tag information is displayed on the tag pop-up screen 340a.
  • the tag information may include text, image, moving image, animation, and the like.
  • the process of producing a two-dimensional image or a virtual two-dimensional image is simple, and communication traffic is significantly less than a method of producing and providing a moving image.
  • communication traffic can be further reduced.
  • a sequence image that visually shows the same service item can be continuously displayed in the left-right direction or the up-down direction through the scroll operation, so that it is easy to look at the overall appearance and structure of the service item,
  • the user can conveniently and quickly receive the tag information only by a simple operation of moving the mouse cursor over the range of the tag mapped to the image.

Landscapes

  • Business, Economics & Management (AREA)
  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Accounting & Taxation (AREA)
  • Finance (AREA)
  • General Physics & Mathematics (AREA)
  • Physics & Mathematics (AREA)
  • Strategic Management (AREA)
  • Development Economics (AREA)
  • Economics (AREA)
  • Marketing (AREA)
  • General Business, Economics & Management (AREA)
  • Entrepreneurship & Innovation (AREA)
  • Game Theory and Decision Science (AREA)
  • Data Mining & Analysis (AREA)
  • Databases & Information Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

웹페이지를 통하여 서비스 아이템의 이미지와 태그정보를 포함한 디지털 콘텐츠를 제공하는 웹 서버; 서비스 아이템을 시각적으로 나타내기 위한 개별 이차원 이미지 또는 가상 이차원 이미지의 이미지 파일을 저장하는 이미지 데이터베이스; 이미지 파일에 부가된 태그정보를 저장하는 태그정보 데이터베이스; 이미지 데이터베이스와 태그정보 데이터베이스에 저장된 이미지 파일과 태그정보를 웹서버에 공급하는 이미지 뷰어; 이미지 뷰어에 연동하여 새로운 이미지의 추가 또는 이미지의 수정 작업에 수반하는 태그정보를 편집하기 위한 뷰어 편집기;를 포함한다. 이미지 뷰어는 스크롤 조작에 따라 다른 각도의 시퀀스 이차원 이미지를 이미지 데이터베이스로부터 로딩하여 뷰어 화면에 연속으로 표시하고, 이차원 이미지에 맵핑된 태그정보를 로딩된 이미지가 표시되는 뷰어 화면의 주변 영역에 표시하고, 뷰어 편집기는 편집 기능이 활성화되어 뷰어 화면에 제공되는 이미지 편집창과 태그 편집창을 이용하여 편집 대상의 이차원 이미지 또는 태그정보의 세부 사항을 각각 설정하고, 설정된 입력 데이터를 바탕으로 생성한 파일을 이미지 데이터베이스와 태그정보 데이터베이스에 각각 저장한다.

Description

이미지 스크롤에 적합한 시퀀스 이차원 이미지의 태그정보 처리 장치
본 발명은 이미지 스크롤에 적합한 시퀀스 이차원 이미지의 태그정보 처리 장치에 관한 것으로, 더욱 상세하게는 스크롤 조작에 따라 연속으로 표시되는 시퀀스 이차원 이미지에 맵핑된 태그정보를 신속 정확하게 사용자에게 제공할 수 있고, 이미지의 추가 및 수정에 수반한 태그정보를 쉽고 간편하게 편집할 수 있는 이미지 스크롤에 적합한 시퀀스 이차원 이미지의 태그정보 처리 장치에 관한 것이다.
정보통신 기술의 비약적인 발달로 컴퓨터를 이용하여 인터넷 쇼핑몰에서 상품을 구매하는 전자상거래가 일상화되고, 최근 인터넷 기능을 구비한 스마트 가전제품으로 IPTV(인터넷 프로토콜 TV) 및 스마트 냉장고 등이 개발되고 있다.
연동형 IPTV 전자상거래는 기존의 홈쇼핑과 다르게 방송 내용과 관련된 상품 정보를 프로그램 시청 중에 제공해 구매까지 할 수 있도록 한 서비스로서, 예를 들어 건강 프로그램 방송 중에 출연자가 기능성 음료를 마시는 장면에서 해당 음료에 대한 팝업이 우측 상단에 노출되게 하고, 이 기능성 음료 구입을 원하는 시청자는 리모컨의 특정 버튼을 눌러 제품의 자세한 정보를 확인 후 QR 코드나 전화를 통해 제품을 바로 구매할 수 있다. 다른 예로서, 냉장고 도어에 고해상도 터치 디스플레이를 마련하고 음성 인식 기능과 웹OS를 탑재한 스마트 냉장고가 출시되었고, 이 스마트 냉장고는 내장된 앱으로 온라인 쇼핑하고, 거실 TV에서 방송 중인 TV 채널을 미러링해 주방에서 감상하는 키친 TV 기능, 그리고 스마트폰 사진이나 동영상을 재생하는 폰 미러링 기능을 지원하며, 인터넷 연결을 위해 Wi-Fi, 블루투스 무선 연결을 지원한다.
매장 방문하지 않고 고객이 직접 스마트폰의 애플리케이션을 통하여 홈페이지에 접속하여 서비스 아이템(예를 들어 음식, 화환, 생활용품 등)을 주문 및 결제할 수 있다. 또한 극장이나 공연장, 경기장, 레스토랑 등에서 무인 주문시스템으로 티켓 발매, 대금 결제 등을 고객 스스로 처리하는 서비스가 널리 이용되고 있다.
컴퓨터와 IPTV 및 스마트 냉장고 등에서 온라인 쇼핑몰의 상품 정보 제공받는 경우, 스마트폰의 애플리케이션으로 웹 사이트의 제품 정보를 제공받거나 사용자 단말에 탑재된 무인 주문시스템으로 주문 정보를 제공받는 경우에서는 디지털 콘텐츠를 다운받아 재생하게 되며, 일반적으로 이미지와 부가 정보(제품소개, 광고, 사용법 등)를 조합한 디지털 콘텐츠를 제공한다.
그런데 종래에는 디지털 콘텐츠의 이미지와 부가 정보가 개별 제공된다. 예를 들어 서비스 아이템을 선택시 화면에 이미지와 부가 정보가 표시되는데, 고객은 해당 이미지를 보고 일시적으로 주의를 기울이지만 해당 이미지와 연계되지 않고 별개로 분리 나열된 부가 정보를 자세하게 읽지 않는 경향을 보이기 때문에 정보 전달력이 떨어진다는 미흡한 문제가 있다.
한편 동영상에 음성 삽입한 디지털 콘텐츠를 전달하는 방법을 이용할 수 있으나, 온라인 쇼핑몰과 같이 수많은 상품을 거래하기 위하여 다수 사용자가 접속하는 사용 환경에서는 통신 트래픽이 과도하여 접속 속도가 느려져 이용 불편을 초래하고 대용량의 저장 공간 및 데이터 처리 장비 등 소요 비용이 증가하게 된다.
상기 종래기술의 문제점을 고려할 때, 종래와 같이 이미지와 부가 정보를 나열하여 제공하는 대신에 사용자에 의한 스크롤 조작에 따라 관련 이미지들을 연속으로 보여주고, 사용자 명령에 따라 화면상의 이미지에 맵핑된 부가 정보를 선별적으로 표시하여 정보 전달력을 높이는 것이 필요하다. 또한 서비스 아이템의 변경과 추가 작업이 필요할 때 디지털 콘텐츠의 이미지와 부가 정보를 간편하게 수정할 수 있는 편집 기술이 필요하다.
이러한 기술의 일 예가 한국등록특허 제10-0360220호(2002.10.25 등록)에 개시되어 있다.
본 발명의 목적은 사용자에 의한 스크롤 조작시 시퀀스 이차원 이미지들을 연속으로 표시하고, 스크롤 조작에 따라 연속 표시되는 이차원 이미지에 맵핑된 태그정보를 신속 정확하게 사용자에게 제공할 수 있고, 이미지의 추가 및 수정에 수반한 태그정보를 쉽고 간편하게 편집할 수 있는 이미지 스크롤에 적합한 시퀀스 이차원 이미지의 태그정보 처리 장치를 제공함에 있다.
상기 목적을 달성하기 위한 본 발명의 실시예에 따른 이미지 스크롤에 적합한 시퀀스 이차원 이미지의 태그정보 처리 장치는, 웹페이지를 통하여 서비스 아이템의 이미지와 태그정보를 포함한 디지털 콘텐츠를 제공하는 웹 서버; 상기 서비스 아이템을 시각적으로 나타내기 위한 개별 이차원 이미지 또는 가상 이차원 이미지의 이미지 파일을 저장하는 이미지 데이터베이스; 상기 이미지 파일에 부가된 태그정보를 저장하는 태그정보 데이터베이스; 상기 이미지 데이터베이스와 태그정보 데이터베이스에 저장된 이미지 파일과 태그정보를 상기 웹서버에 공급하는 이미지 뷰어; 상기 이미지 뷰어에 연동하여 새로운 이미지의 추가 또는 이미지의 수정 작업에 수반하는 태그정보를 편집하기 위한 뷰어 편집기;를 포함하되, 상기 이미지 뷰어는, 스크롤 조작에 따라 다른 각도의 시퀀스 이차원 이미지를 상기 이미지 데이터베이스로부터 로딩하여 뷰어 화면에 연속으로 표시하고, 상기 이차원 이미지에 맵핑된 태그정보를 상기 로딩된 이미지가 표시되는 뷰어 화면의 주변 영역에 표시하며, 상기 뷰어 편집기는, 편집 기능이 활성화되어 상기 뷰어 화면에 제공되는 이미지 편집창과 태그 편집창을 이용하여 편집 대상의 이차원 이미지 또는 태그정보의 세부 사항을 각각 설정하고, 설정된 입력 데이터를 바탕으로 생성한 파일을 상기 이미지 데이터베이스와 태그정보 데이터베이스에 각각 저장하는 것을 특징으로 한다.
또 상기 이미지 뷰어는 스크롤 조작에 따라 연속으로 표시하는 이차원 이미지에 맵핑된 태그 지점의 좌표를 자동 계산하여 해당하는 태그 지점의 태그정보를 제공하는 것을 특징으로 한다.
또 상기 뷰어 편집기는 상기 이미지 편집창과 태그 편집창의 입력 작업이 완료되면 계층 구조의 관련 파일로서 html 파일, js 파일, 및 json 파일을 생성하며, 상기 html 파일은 상기 뷰어 화면을 구성하는 기본 파일이고, 상기 js 파일은 상기 뷰어 화면의 초기 설정을 위한 파일이며, 상기 json 파일은 태그정보를 설정하기 위한 파일인 것을 특징으로 한다.
또 상기 이미지 편집창은 상기 서비스 아이템을 식별하기 위한 이름, 추가 또는 수정을 위하여 선택된 이미지, 선택된 이미지 중에서 뷰어 로딩시 처음 나타나는 초기 이미지, 스크롤 조작에 따른 좌우방향 또는 상하방향으로 연속으로 나타나는 이미지의 개수, 상기 뷰어 화면의 사이즈, 상기 초기 이미지의 사이즈에 대하여 설정 입력하는 것을 특징으로 한다.
또한, 상기 태그 편집창은 상기 태그정보를 식별하기 위한 이름, 태그에 부속된 서브 태그의 유무, 태그내용, 태그 지정을 위한 이미지를 식별하기 위한 이미지번호, 태그 지정된 이미지에서의 태그지점, 태그내용을 나타내기 위한 태그팝업 화면의 사이즈, 상기 뷰어 화면에 나타나는 태그팝업 화면의 위치, 태그지점과 태그팝업 화면을 연결하는 연결선의 유무를 설정 입력하는 것을 특징으로 한다.
또한, 상기 웹 서버로부터 디지털 콘텐츠를 제공받는 사용자 단말을 포함하되, 상기 사용자 단말은 인트라넷에 연결된 개인용 컴퓨터에 접근할 수 있는 사용 환경에서 인터넷에 연결된 게이트웨이를 통하여 디지털 콘텐츠를 제공받거나 또는 댁내에 홈네트워크를 구축하고 인터넷 서비스하는 스마트 가전기기로서 IPTV 및 스마트 냉장고에 접근할 수 있는 사용 환경에서 인터넷에 연결된 홈게이트웨이를 통하여 디지털 콘텐츠를 제공받을 수 있는 것을 특징으로 한다.
이상과 같은 본 발명에 따르면 뷰어 화면의 서비스 아이템에 대한 스크롤 조작시 서로 다른 각도에서 바라본 시퀀스 이차원 이미지들을 연속으로 표시함으로써 서비스 아이템에 대한 정보 전달력을 높일 수 있다.
또 본 발명은 이미지 뷰어에 연동하는 뷰어 편집기를 이용하여 편집 작업을 수행할 수 있어 새로운 이미지의 추가와 수정에 수반되는 태그 정보의 편집 작업이 용이하다.
또한, 본 발명은 기존기술과 같이 동영상을 제작하여 제공하는 방식에 비하여 통신 트래픽이 현저히 적을 뿐 아니라 이미지 뷰어를 초기화하는 과정과 사용자 조작에 따라 해당 이미지를 불러올 때만 비동기적으로 이미지 파일을 로딩하므로 통신 트래픽을 더욱 줄일 수 있다.
도 1은 본 발명에 따른 이미지 스크롤에 적합한 시퀀스 이차원 이미지의 태그정보 처리 장치의 구성을 나타낸 블록도이다.
도 2는 본 발명에 따른 이미지 파일의 생성 방법을 설명하기 위한 흐름도이다.
도 3은 본 발명에 따른 이미지 뷰어의 상세 구성을 나타낸 블록도이다.
도 4는 본 발명에 따른 이미지 뷰어에 의해 개별 이차원 이미지에 맵핑된 태그정보를 제공받는 기능을 예시적으로 설명하는 도면이다.
도 5는 본 발명에 따른 확대 기능을 설명하기 위한 도면으로, 이미지 창에서 확대 이미지를 표시하는 동작을 나타낸다.
도 6은 본 발명에 따른 확대 기능을 설명하기 위한 도면으로, 웹페이지의 화면에 확대 이미지를 표시하는 동작을 나타낸다.
도 7은 본 발명에 따른 가상 이차원 이미지의 생성과 태그 설정 방법을 설명하기 위한 도면이다.
도 8은 본 발명에 따른 생성된 이미지 파일을 구성하는 가상의 이차원 이미지들을 설명하기 위한 도면이다.
도 9는 본 발명에 따른 가상 이차원 이미지에 연계된 태그설정 파일을 설명하기 위한 도면이다.
도 10은 본 발명에 따른 가상 이차원 이미지에 대해 수평 회전시 변화하는 좌표값과 태그 범위를 설명하기 위한 도면이다.
도 11은 본 발명에 다른 가상 이차원 이미지에 대해 스크롤 조작에 따라 왼쪽 방향으로 수평 회전시 좌표값의 변화를 설명하기 위한 도면이다.
도 12는 본 발명에 따른 가상 이차원 이미지에 대해 스크롤 조작에 따라 오른쪽 방향으로 수평 회전시 좌표값의 변화를 설명하기 위한 도면이다.
도 13은 본 발명에 따른 기준이 되는 중심부의 가상 이차원 이미지에 대해 스크롤 조작에 따라 왼쪽, 오른쪽, 위쪽으로 회전시 태그 범위의 변화를 설명하기 위한 도면이다.
도 14는 본 발명에 따른 뷰어 편집기의 이미지 편집창을 예시적으로 나타낸 도면이다.
도 15는 본 발명에 따른 뷰어 편집기의 태그 편집창을 예시적으로 나타낸 도면이다.
도 16은 본 발명에 따른 뷰어 편집기의 이미지 편집창과 태그 편집창에 입력된 정보를 바탕으로 파일을 생성되는 동작과 폴더 구조를 설명하기 위한 도면이다.
도 17은 본 발명에 따른 뷰어 편집기를 이용한 편집 과정을 설명하기 위한 흐름도이다.
도 18은 본 발명에 따른 이미지 뷰어를 초기화하고 태그정보를 제공하기 위한 각 구성부의 처리 과정을 나타낸 도면이다.
도 19 내지 도 24는 본 발명에 따른 웹 페이지에서 가상 이차원 이미지와 태그정보를 제공받는 과정을 예시하여 설명하기 위한 도면이다.
이하 첨부한 도면을 참조하여 본 발명의 실시 예를 설명함으로써 본 발명을 설명한다. 각 도면에 제시된 동일한 참조부호는 동일한 부재를 나타낸다. 또한 본 발명을 설명함에 있어, 관련된 공지 기능 또는 구성에 대한 구체적인 설명이 본 발명의 요지를 불필요하게 흐릴 수 있다고 판단되는 경우에는 그 상세한 설명을 생략할 것이다. 또한 어떤 부분이 어떤 구성요소를 "포함"한다고 할 때, 이는 특별히 반대되는 기재가 없는 한 다른 구성요소를 제외하는 것이 아니라 다른 구성요소를 더 포함할 수 있는 것을 의미한다.
도 1에 도시한 바와 같이, 본 발명에 따른 이미지 스크롤에 적합한 시퀀스 이차원 이미지의 태그정보 처리 장치는 웹 서버(30)로부터 디지털 콘텐츠를 제공받는 사용자 단말(10), 사용자 단말(10)와 웹 서버(30)가 서로 통신할 수 있도록 연결하는 통신부(20), 디지털 콘텐츠를 공급하기 위한 서비스를 수행하는 웹 서버(30), 웹 서버(30)에 디지털 콘텐츠를 구성하는 이미지 및 이미지에 부가된 태그정보를 제공하는 이미지 뷰어(40), 이미지 파일을 저장하는 이미지 데이터베이스(50), 태그 설정파일과 태그 데이터를 저장하는 태그정보 데이터베이스(60), 그리고 이미지 데이터베이스(50)의 이미지와 태그정보 데이터베이스(60)의 태그 설정파일 및 태그 데이터를 추가 또는 수정하기 위한 뷰어 편집기(70)를 포함한다.
사용자 단말(10)은 사용자 환경에 따라 여러 접속 경로를 통하여 웹 서버(30)에 접속할 수 있다. 예를 들어 사용자가 회사의 인트라넷에 연결된 개인용 컴퓨터(10a)에 접근할 수 있는 사용 환경에서 인터넷(20c)에 연결된 게이트웨이(20a)를 통하여 디지털 콘텐츠를 제공받는다. 다른 예로서, 댁내에 홈네트워크를 구축하고 인터넷 서비스하는 스마트 가전기기로서 IPTV(10b) 및 스마트 냉장고(10c)에 접근할 수 있는 사용 환경에서 인터넷(20c)에 연결된 홈게이트웨이(20b)를 통하여 디지털 콘텐츠를 제공받을 수 있다. IPTV(10b)는 방송신호를 받아 시청할 수 있는 공지기술의 디지털 가전기기의 일종이고, 스마트 냉장고(10c) 역시 인터넷 기능을 구비한 공지기술의 디지털 가전 기기의 일종이 채택될 수 있다.
이러한 개인용 컴퓨터(10a), IPTV(10b), 및 스마트 냉장고(10c)는 사용자 조작에 의한 제어 명령을 수행할 수 있도록 키보드, 마우스, 푸시 버튼, 리모콘 등의 사용자용 입력 디바이스를 사용할 수 있고, 또한 디지털 콘텐츠를 디스플레이하는 출력수단으로 터치패널을 채택하는 경우 사용자의 터치 입력에 따라 제어 명령을 수행할 수도 있다.
실시예에서는 통신부(20)가 유선 인터넷(20c)으로 웹 서버(30)에 접속하는 방식을 예시하고 있으나, 공지된 일반적인 무선 인터넷을 구축하여 웹 서버(30)에 접속하는 것도 가능하다. 또한 사용자 단말(10)은 웹 서버(30)로부터 이미지, 텍스트, 동영상, 이메일을 다운로드 받을 수 있는 정보 기기를 포함하는 개념으로 이해하여야 하며, 예를 들어 태블릿 컴퓨터, 스마트 폰 등 웹 브라우저를 이용하여 웹 사이트에 구축된 홈페이지, 온라인 쇼핑몰 등에 접속할 수 있다.
웹 서버(30)는 통신모듈(33)에 의해 사용자 단말(10)과 인터페이스 하여 다양한 웹 서비스를 제공하기 위한 웹 페이지(32)를 제공하는데, 사용자는 웹 페이지(32)를 통하여 사용자 인증 처리, 이미지의 검색과 열람 기능을 수행할 수 있다.
홈페이지와 온라인 쇼핑몰을 운영하는 주체는 백화점, 중고품 중개회사, 여행사, 부동산 회사, 음식점, 배달음식 주문대행사, 극장, 경기장, 공연장, 공연 기획사, 관공서, 여객 터미널 등으로 이들이 제공하는 디지털 콘텐츠는 서비스 아이템의 이용 목적과 이용 편의에 적합하게 제작된 이미지, 텍스트, 동영상, 어플리케이션 프로그램 등 매우 다양하다.
웹 서버(30)는 서비스 아이템에 관련된 디지털 콘텐츠를 제공하는 디지털 콘텐츠 처리부(31)를 포함한다. 디지털 콘텐츠 처리부(31)는 사용자 명령에 응답하여 서비스 아이템 예를 들어 검색 리스트를 제공하고, 사용자에 의해 선택되고 이미지 뷰어(40)로부터 제공된 이미지와 부가정보를 포함하는 디지털 콘텐츠를 제공할 수 있다.
이미지 뷰어(40)는 디지털 콘텐츠 처리부(31)의 디지털 콘텐츠를 조달하는 공급원으로서, 이미지 데이터베이스(50)의 이미지 파일과 태그정보 데이터베이스(60)의 태그정보를 바탕으로 가공한 디지털 콘텐츠를 공급한다.
이미지 데이터베이스(50)에 저장된 이미지 파일은 개별 이차원 이미지에 의해 생성되거나 스크롤 조작에 연계된 시퀀스 이차원 이미지로서 복수의 이차원 이미지에 의해 생성되는 것으로 구분할 수 있다. 여기서 개별 이차원 이미지는 서비스 아이템을 1장의 이미지로 보여주기 위한 낱개 이미지 파일로 생성되고, 스크롤 조작에 연계된 복수의 이차원 이미지는 좌우 또는 상하방향으로 마우스를 드래그하는 경우 이동 방향을 따라 연속으로 나타나는 복수의 이차원 이미지에 대응하는 한 세트의 이미지 파일로 생성될 수 있다.
스크롤 조작에 연계된 복수의 이차원 이미지가 이미지 뷰어(40)에 의해 짧은 시간 동안 연속으로 보일 때 마치 서비스 아이템의 오브젝트가 가상으로 회전하는 것으로 인식될 수 있고, 이를 본 발명에서는 스크롤 조작에 따라 이차원 이미지를 회전하는 스크롤 기능이라고 하고, 스크롤 조작에 연계된 복수의 이차원 이미지는 가상 이차원 이미지라고 지칭하여 설명하기로 한다.
이미지 데이터베이스(50)에 저장할 이미지 파일의 생성 방법을 설명한다.
하나의 방법으로 서비스 아이템을 대상으로 촬영 스튜디오에서 촬영 및 디지털화하여 개별 이차원 이미지 또는 가상 이차원 이미지의 이미지 파일을 직접 생성할 수 있다. 가상 이차원 이미지의 이미지 파일을 생성할 때 피사체인 서비스 아이템을 스크롤 방향으로 서로 다른 각도만큼 회전시켜 촬영하거나, 서비스 아이템을 고정시켜 놓고 스크롤 방향으로 촬영수단을 이동시켜 서로 다른 각도에서 촬영하여 이미지 파일을 획득할 수 있다.
서비스 아이템의 실제 크기가 매우 크거나 미제작 제품을 취급할 수밖에 없어 서비스 아이템의 실물 촬영이 어렵고 부적합한 경우, 또는 실물 촬영한 일부의 촬영 이미지를 가지고 복수 개의 가상 이차원 이미지를 만들어야 하는 경우에는 다른 방법으로서 도 2와 같이 컴퓨터 작업을 통하여 이미지 파일을 생성할 수 있다.
도 2를 참고하여, 디지털 카메라 등 촬영 수단으로 촬영한 임시 이미지를 변환하여 서비스 아이템의 기초 이미지 데이터를 획득하거나 AutoCad와 같은 캐드 프로그램을 이용한 작업으로 서비스 아이템의 기초 이미지 데이터를 획득한다(100). 여기서 기초 이미지 데이터는 서비스 아이템의 외관을 나타내는 전면, 후면, 좌측면, 우측면, 상부면, 하부면 중 적어도 하나를 시각적으로 나타내게 된다. 그런 다음 모델링 프로그램을 이용하여 기초 이미지 데이터를 가공하여 해당 서비스 아이템의 오브젝트를 모델링한다(110). 이후 모델링된 서비스 아이템의 오브젝트에 대해 색상과 텍스쳐를 디자인하여 렌더링한다(120). 이렇게 완성된 서비스 아이템의 렌더링 데이터를 이용하여 이미지 파일을 생성한다(130). 도 2에서의 이미지 생성 방법을 반복하여 복수 개의 이미지에 대응하는 한 세트의 이미지 파일을 생성할 수 있다.
태그정보 데이터베이스(60)는 서비스 아이템을 자세하게 소개하는 상세 정보로서 태그정보를 저장하며, 이러한 태그정보는 개별 이차원 이미지 또는 가상 이차원 이미지에 연계시켜 뷰어 화면에 나타내는데 필요한 태그 설정 파일과 태그 데이터를 포함한다.
디지털 콘텐츠 처리부(31)는 이미지 뷰어(40)에 의해 처리된 이미지 파일(개별 이차원 이미지 또는 가상 이차원 이미지) 및 태그정보를 바탕으로 웹 페이지(32)를 통하여 디지털 콘텐츠를 출력한다.
이미지 뷰어(40)는 개별 이차원 이미지를 렌더링하여 디지털 콘텐츠 처리부(31)에 제공하거나 가상 이차원 이미지를 렌더링하여 디지털 콘텐츠 처리부(31)에 제공한다. 즉, 이미지 뷰어(40)는 웹 서버(30)의 입력 이벤트에 따라 개별 이차원 이미지 또는 가상 이차원 이미지를 선택적으로 제공할 수 있다.
이미지 뷰어(40)에 의해 개별 이차원 이미지 또는 가상 이차원 이미지에 맵핑된 태그정보를 제공할 수 있다. 예를 들어, 마우스 등의 포인팅 장치를 이용하여 개별 이차원 이미지 또는 가상 이차원 이미지상에서 드래그하거나 태그 버튼의 선택만으로 사용자 의도를 파악하여 이미지상에 맵핑된 태그정보를 웹 페이지(32)에 디스플레이할 수 있다. 즉 뷰어 화면에 나타나는 이미지상에서 마우스의 커서를 이동시킬 때 설정된 태그 범위에 마우스의 커서가 위치하면 태그정보가 뷰어 화면에 출력되도록 하여 사용자가 태그정보를 확인할 수 있도록 한다.
또한 이미지 뷰어(40)는 사용자에 의해 마우스의 커서를 드래그하는 스크롤 조작에 따라 가상 이차원 이미지를 뷰어 화면에 연속으로 보여줄 수 있고, 스크롤 도중 정지된 어느 하나의 이미지상에서 마우스의 커서가 설정된 태그 범위에 위치하거나 태그버튼을 선택하는 경우 태그정보가 뷰어 화면에 출력되도록 하여 사용자가 태그정보를 확인할 수 있도록 한다.
도 3은 본 발명에 따른 이미지 뷰어의 상세 구성을 나타낸 블록도이다.
도 3에 도시한 바와 같이, 이미지 뷰어(40)는 인터페이스를 수행하기 위한 사용자 인터페이스(411)를 구비한다. 사용자 인터페이스(411)는 웹페이지(32)에 접속한 사용자가 이미지 뷰어(40)를 조작하기 위한 입력 이벤트를 처리하거나, 관리자에 의한 태그 좌표의 설정 동작을 수행하기 위한 입력 이벤트를 처리한다.
비율 조정모듈(412)은 돋보기 기능을 활성화시킨 상태에서 마우스 커서가 지시하는 일부 영역을 확대하여 보여주는 기능을 처리하고, 또한 마우스 휠의 조작에 따라 서비스 아이템에 대한 전체 이미지를 확대하거나 축소하여 보여주는 기능을 처리한다.
가상 이차원 이미지 회전모듈(413)은 스크롤 기능을 활성화시킨 상태에서 마우스 커서를 드래그하는 동작에 응답하여 도 2에 따라 생성된 한 세트의 이미지 파일을 연속으로 로딩하여 가상 이차원 이미지를 연속으로 보여줌으로써 뷰어 화면에서 서비스 아이템의 오브젝트가 가상으로 회전하는 것처럼 디스플레이하는 기능을 처리한다.
태그정보 처리모듈(414)은 태그 기능을 활성화시킨 상태에서 마우스 커서가 지시하는 영역이 사전 설정된 태그 범위에 위치하면 해당 이미지에 맵핑된 태그정보가 자동적으로 디스플레이되는 기능을 처리한다. 이러한 태그정보는 서비스 아이템에 관련된 정보 예를 들어 제품 사양과 사용법 등을 알려주기 위한 텍스트, 이미지, 동영상 등이 포함될 수 있다.
이차원 이미지 렌더링 모듈(415)은 개별 이차원 이미지를 웹 페이지(32)에 그려주는 기능을 한다. 가상 이차원 이미지 렌더링 모듈(416)은 가상 이차원 이미지들을 웹 페이지(32)에 그려주는 기능을 한다.
이차원 좌표 검사모듈(417)과 가상 이차원 좌표 검사모듈(418)은 각각 개별 이차원 이미지와 가상 이차원 이미지상에 위치하는 마우스 커서의 좌표가 태그 범위에 존재하는지를 검사한다.
설정정보 로더(419)는 이차원 설정부(420)와 가상 이차원 설정부(421)에 의해 각각 개별 이차원 이미지와 가상 이차원 이미지에 설정된 태그 설정파일과 뷰어 설정 정보를 로딩하고 적용한다.
초기화 모듈(422)은 이미지 뷰어(40)를 초기화하는 기능을 수행한다.
비동기 이미지 로딩모듈(423)은 뷰어를 이용하여 디스플레이되는 이미지 파일을 필요한 시기에만 로딩함으로써 로딩 시간을 줄이기 위한 것으로, 다수의 이미지 파일들을 한꺼번에 로딩하지 않고 해당하는 이미지 파일을 개별적으로 로딩하는 기능을 수행한다.
가상 이차원 좌표 계산모듈(424)은 스크롤 조작에 따라 가상 이차원 이미지가 연속으로 나타날 때 해당 이미지에 맵핑된 태그 범위가 변경될 수 있고, 이렇게 변경된 태그 범위의 태그 좌표를 자동 계산한다. 한 세트의 이미지 파일 중 초기에 나타나는 가상 이차원 이미지를 기준으로 정한다(이하 기준 가상 이차원 이미지(또는 초기 이미지)라고 지칭하고, 기준 가상 이차원 이미지(또는 초기 이미지)에 맵핑된 태그 좌표는 관리자에 의해 사전 설정된다). 이 기준 가상 이차원 이미지를 중심으로 좌우 방향(왼쪽 또는 오른쪽), 상하방향(위쪽 또는 아래쪽)으로 스크롤 조작하거나, 뷰어 화면의 이미지를 확대 또는 축소할 때 해당하는 가상 이차원 이미지의 크기가 바뀌게 되는데, 기준 가상 이차원 이미지에 설정된 태그 범위의 좌표가 변경되므로 이러한 변경 좌표를 자동 계산한다.
파일 처리모듈(425)은 이미지 뷰어(40)에서 사용하는 파일(개별 이차원 이미지 파일, 가상 이차원 이미지 파일, 설정 파일)을 로딩하고 로딩된 데이터를 파싱하는 기능을 한다.
소스코드 보호모듈(426)은 텍스트 파일 형태로 배포되는 소스 코드를 보호하기 위해 난독화된 코드로 변환하는 기능을 하며, URL 및 날짜를 지정하여 특정 웹 사이트 및 일정 기간 동안 제한적으로 사용할 수 있도록 한다.
외부 인터페이스 모듈(427)은 사용자 단말(10)의 웹 페이지에서 이미지 뷰어(40)을 제어하기 위하여 제공되는 인터페이스 모듈로서, API(application programming interface)를 이용하여 구현한다.
도 4는 본 발명에 따른 이미지 뷰어에 의해 개별 이차원 이미지에 맵핑된 태그정보를 제공받는 기능을 예시적으로 설명하는 도면이다.
사용자 단말(10)에 제공된 웹 페이지는 웹 브라우저 화면(200)을 통하여 검색된 서비스 아이템에 대한 다양한 쇼핑 정보를 볼 수 있는데, 뷰어 화면(210)에 예를 들어 상품 리스트에서 선택된 상품 이미지(Ia)와 함께 태그 버튼(211)이 표시된다. 태그 버튼(211)으로 팝업 창을 열어 '돋보기 기능'을 활성화시킨 상태에서 사용자에 의해 마우스 커서가 뷰어 화면(210)에서 이동되고, 이에 응답하여 전체 이미지 중에서 부분 확대된 이미지(221)가 보조창(220)에 표시된다.
실시예와 다르게 마우스 커서의 이동에 따라 뷰어 화면(210) 안에서 부분 확대된 이미지가 오버랩되어 표시되게 할 수도 있다. 또한 뷰어 화면(210)에 로딩된 상품 이미지(Ia)에 맵핑된 태그 범위들을 시각적으로 쉽게 구분할 수 있도록 마킹하여 나타낼 수 있다(노랑색 파선 안에 적색 점을 표시한다). 실시예에서는 표시되는 서비스 아이템의 오브젝트에 대응하는 상품 이미지(Ia)에 3개 태그를 맵핑하였으나, 그 상품 이미지(Ia)에 맵핑하는 태그 개수는 변경할 수 있다. 또한 이러한 태그들은 평상시 나타나지 않다가 태그 버튼(211)으로 태그 기능을 활성화시킨 상태에서만 태그 범위가 표시되거나, 사용자에 의해 이동하는 마우스 커서가 해당 태그 범위에 위치하면 시각적으로 마킹되어 나타나게 할 수 있다.
이렇게 마우스 커서로 태그 범위를 클릭하여 선택하는 경우, 보조창(220) 안에 태그정보의 태그 데이터가 나타나는 태그 보조창(222)이 제공된다. 태그 보조창(222)은 해당 상품의 제원, 사용법, 관련 웹사이트로 이동하기 위한 주소 정보 등을 포함할 수 있다. 또한 태그 보조창(222)에는 다양한 정보를 제공하기 위한 이미지 또는 동영상 등으로 구현할 수도 있다.
도 4에 따라 설명한 바와 같이, 서비스 아이템의 외관이 단순하고 태그정보의 분량이 적으면 개별 이차원 이미지를 동원하고, 서비스 아이템 특성상 서로 다른 각도에서 바라본 이미지를 보여줄 필요가 있고 많은 분량의 태그정보를 제공할 필요가 있는 경우에는 가상 이차원 이미지를 동원한다.
가상 이차원 이미지를 동원하는 경우, '돋보기 기능'과 '태그 기능' 뿐만 아니라 '스크롤 기능'을 수행할 수 있다. 여기서 '스크롤 기능'은 동일한 서비스 아이템에 대하여 마우스 커서를 이용하여 좌우방향 또는 상하방향으로 이동하는 경우, 이동 방향과 회전 각도에 따라 복수의 가상 이차원 이미지를 연속으로 표시하고, 이때 이미지에 맵핑된 태그 범위도 동적으로 변경된다.
도 5를 참고하여, 이미지에 대한 '확대 기능'을 설명한다.
실시예에서 '확대 기능'은 사용자에 의해 마우스의 휠 조작으로 확대와 축소 비율을 선택하여 이미지 크기를 변경한다. 예를 들어 이미지를 확대하는 경우, 도 5의 (a)에서 뷰어 화면(210)에 표시된 이미지의 중심(Cm)에서 일정 거리 떨어진 태그지점1(T1)의 2차원 좌표(x1, y1)는 도 5의 (b)의 확대된 이미지에서 이미지 중심(Cm)의 위치는 변동 없이 표시되나 태그 지점1(Ta1)의 2차원 좌표(x2, y2)는 변화하게 된다. 뷰어 화면(210)의 크기가 정해지고, 확대 또는 축소 비율을 알고 있으므로 뷰어 화면(210)의 태그지점1(T1)의 2차원 좌표(x1, y1)로부터 변화된 태그 지점1(Ta1)의 2차원 좌표(x2, y2)를 계산할 수 있다.
실시예에서 '확대 기능'의 다른 방법으로, 도 6에 도시한 바와 같이, 웹 브라우저 화면(200) 전체 영역을 활용하여 이미지를 확대 또는 축소할 수 있다. 이때 확대 또는 축소되는 이미지의 크기가 변화하므로 절대좌표를 이용한 좌표 계산을 적용하지 않고, 대신에 웹브라우저 화면(200)에서 상대적인 위치 변화를 이용하여 태그 지점의 좌표를 계산한다. 웹 브라우저 화면(200)의 중심 즉 이미지 중심(Cm)을 일치시키고 이를 원점으로 좌우상하 방향으로 떨어진 거리 비율을 이용하여 태그 지점의 좌표값을 설정한다. 예를 들어 수평 방향의 x축 좌표값은 좌측 방향으로 원점에서 떨어진 거리에 대응하는 거리비율(0 ~ -100%)과 우측 방향으로 원점에서 떨어진 거리에 대응하는 거리비율(0 ~ +100%)로부터 해당 태그 지점의 x값을 설정한다. 또한 상하 방향의 y축 좌표값은 상측 방향으로 원점에서 떨어진 거리에 대응하는 거리비율(0 ~ +100%)과 하측 방향으로 원점에서 떨어진 거리에 대응하는 거리비율(0 ~ -100%)로부터 해당 태그 지점의 y값을 설정한다. 마우스의 휠 조작으로 확대 또는 축소하는 경우, 거리 비율로 설정된 좌표값(x축 거리비율, y축 거리비율)에 대한 확대 비율 또는 축소 비율에 따라 좌표값을 계산하여 확대 또는 축소된 이미지에서 변화된 태그 지점의 좌표값을 계산한다.
실시예에서 '스크롤 기능'에 적용하는 가상 이차원 이미지와 태그 설정 방법을 상세히 설명한다.
도 7을 참고하여, 서비스 아이템의 이미지 즉 오브젝트를 대상으로 가상 회전축을 기준으로 수평 방향과 상하 방향으로 회전할 때 해당 오브젝트에 대한 가상의 이미지를 생성할 수 있다. 이때 오브젝트 상에서 태그 지점에 대응하는 소정의 포인터를 지정하고, 이 포인터의 좌표를 태그 지점의 좌표로 설정할 수 있다.
실시예에서는 수평 방향 회전시 40단계로 구분하고 상하 방향 회전시 9단계로 구분하여 다양한 각도에서 생성되는 가상의 이차원 이미지를 획득할 수 있다. 예를 들어 동일한 서비스 아이템에 대해 생성된 이미지 파일은, 도 8에 도시한 바와 같이, 하나의 상품에 대해 상하 방향으로 9단계, 수평 방향으로 40단계로 나누어 360개의 이미지 파일로 구성하고, 각 이미지 파일에 파일명을 부여한다. 파일명은 '제1번호_제2번호' 형태로 부여하는 경우, 제1번호가 상하 방향의 촬영 단계번호를 의미하고, 제2번호는 수평 방향의 촬영 단계번호를 의미하도록 설정함으로써, 이미지 파일을 로딩시 이미지 파일의 파일명에 대한 정보로부터 상하 방향 및 수평 방향의 회전 각도를 인식할 수 있다.
도 9에 도시한 바와 같이, 서비스 아이템에 대응한 한 세트의 이미지 파일은 복수의 가상 이차원 이미지를 포함한다. 이러한 가상 이차원 이미지에 대해 태그정보를 맵핑할 수 있다. 도 9에 예시한 바와 같이, 좌표 설정의 기준이 되는 가상 이차원 이미지(파일명 0_16)의 태그지점(C)의 x좌표와 y좌표는 각각 250px, 240px 이고, 적색의 원으로 표기한 태그 범위는 태그 지점(C)을 중심으로 직경 30px로 설정할 수 있다. 여기서 태그 지점(C)에 대한 x,y 좌표값과 태그 범위는 관리자에 의해 설정하고, 다른 가상 이차원 이미지에 대응하는 태그 범위와 태그 지점의 좌표는 가상 이차원 좌표 계산 모듈(424)에 의해 자동 계산된다.
가상 이차원 좌표 계산 모듈(424)은 부여된 이미지 파일의 파일명(제1번호_제2번호)으로부터 상하 방향과 수평 방향에 대한 회전 각도를 알아낸다. 가상 이차원 좌표 계산 모듈(424)은 서비스 아이템의 오브젝트를 스크롤하기 위한 가상 회전축의 좌표를 지정하는데, 즉 전체 이미지의 중심에 해당하는 좌표로 지정한다. 또한 가상 이차원 이미지에 맵핑된 동일 태그가 스크롤 방향에 따라 좌표값이 변화되는데, 가상 이차원 좌표 계산모듈(424)은 회전 각도와 가상 회전축 좌표 그리고 스크롤 방향으로 변경된 태그 좌표를 이용하여 가상의 원을 설정하고, 이 가상 원에 해당하는 좌표를 계산한다. 이렇게 태그 좌표를 계산하여 변경된 태그 범위를 설정할 수 있다.
자동 계산된 태그 좌표값과 태그 범위는 해당 가상 이차원 이미지에 따라 다를 수 있다. 도 10에 예시한 바와 같이, 기준이 되는 가상 이차원 이미지(파일명 0_16)에 대해서는 x,y 좌표 및 태그 범위를 250px, 240px, 30px로 직접 설정한 경우, 스크롤 조작에 따라 왼쪽으로 수평 회전된 가상 이차원 이미지(파일명 0_12)에 대해서 x,y 좌표 및 태그 범위는 각각 265px, 240px, 15px로 변경된다. 즉 스크롤 조작에 따라 수평 회전된 가상 이차원 이미지에 대해 태그 좌표의 y좌표는 일정하며 x좌표와 태그 범위는 바뀌게 된다.
도 11을 참고하면, 스크롤 조작에 따라 왼쪽으로 수평 회전하는 경우 위쪽에 있는 기준 가상 이차원 이미지의 태그 설정 좌표(관리자에 의해 직접 설정된다)는 라인 L1에 위치하고, 가운데 있는 가상 이차원 이미지에 맵핑되고 가상 이차원 좌표 계산 모듈(424)에 의해 계산되는 태그 좌표는 가장 우측의 라인 L2에 위치하며, 아래쪽에 있는 가상 이차원 이미지에 맵핑되고 가상 이차원 좌표 계산 모듈(424)에 의해 계산되는 태그 좌표는 라인 L1과 라인 L2 사이의 라인 L3에 위치하게 된다.
도 10에서 스크롤 조작에 따라 오른쪽으로 수평 회전된 가상 이차원 이미지(파일명 0_20)에 대해서 x,y 좌표 및 태그 범위는 각각 240px, 240px, 15px로 변경된다. 도 12에 도시한 바와 같이 스크롤 조작에 따라 오른쪽으로 수평 회전하는 경우, 위쪽에 있는 기준 가상 이차원 이미지에 직접 설정한 태그 설정 좌표는 라인 R1에 위치하고, 가운데 있는 가상 이차원 이미지에 맵핑되고 가상 이차원 좌표 계산 모듈(424)에 의해 계산되는 태그 좌표는 라인 R2에 위치하며, 아래쪽에 있는 가상 이차원 이미지에 맵핑되고 가상 이차원 좌표 계산 모듈(424)에 의해 계산되는 태그 좌표는 가장 좌측의 라인 R3에 위치하게 된다.
스크롤 조작에 따라 상하 방향으로 수직 회전하는 경우에도, 자동 계산되는 좌표값은 변화하는 것을 알 수 있다. 도 14에 예시한 바와 같이, 기준 가상 이차원 이미지를 스크롤 조작에 따라 위쪽으로 수직 회전하는 경우 가상 이차원 이미지에 맵핑된 태그 좌표의 x좌표값은 동일하고 y좌표값이 변화하게 된다.
가상 이차원 좌표 계산 모듈(424)은 기준 가상 이차원 이미지에 대해 설정된 x,y 좌표값과 태그범위를 바탕으로 왼쪽, 오른쪽, 위쪽, 아래쪽으로 스크롤되는 각각의 가상 이차원 이미지에 대해서 알고 있는 회전각도를 적용하여 해당하는 가상 이차원 이미지의 x,y 좌표값과 태그 범위를 자동 계산하기 위한 계산 파일을 구비한다. 도 13에서 스크롤 조작에 따라 수평 방향 또는 상하 방향으로 회전시 기준 가상 이차원 이미지(파일명(0_16)에 대응하는 태그 범위가 변경된다. 예를 들어 스크롤 조작에 따라 상하 방향 또는 좌우 방향으로 회전시 태그 범위는 감소되며(도 10 참조), 변경된 태그 범위는 계산 프로그램을 이용하여 계산한다.
본 발명은 홈페이지 또는 온라인 쇼핑몰을 매개로 이미지와 태그 정보를 바탕으로 디지털 콘텐츠를 제공하도록 웹 환경에 적합한 html 언어로 프로그램작업을 하고, 이러한 사전 준비작업으로 웹 사이트를 구축한 이후 앞서 설명한 바와 같이 서비스하는 도중에 서비스 아이템에 관련된 이미지를 추가하거나 수정할 수 있고 이러한 이미지와 연계된 태그 정보를 편집해야 하는 상황에 처할 수 있다. 서비스 아이템의 이미지와 태그 정보에 대한 편집 작업을 하려면 종래에는 프로그램 작업을 능숙하게 다루는 전문가에 의존해서 소스 코드를 작성하는 편집 과정을 이용할 수밖에 없었기 때문에 사용상의 불편이 따른다. 따라서 프로그램 작업에 관련된 지식을 습득하지 않은 비숙련자라도 이미지와 태그 정보를 쉽게 편집할 수 있는 방법이 요구된다.
이를 고려하여, 본 발명에서는 이미지와 태그 정보를 쉽게 편집할 수 있는 뷰어 편집기(70)를 이용한다. 편집 작업의 활성화는 웹페이지에서 접근 권한을 가진 관리자가 편집 작업을 수행하며, 뷰어 화면에 나타나는 "뷰어 편집기" 버튼을 선택하여 편집 모드로 전환하고 후술하는 뷰어 편집기(70)의 이미지 편집창(71)과 태그 편집창(72)을 이용하여 세부적인 사항을 편집하게 된다. 이를 상세히 설명한다.
도 14는 본 발명에 따른 뷰어 편집기의 이미지 편집창을 예시적으로 나타낸 도면이고, 도 15는 본 발명에 따른 뷰어 편집기의 태그 편집창을 예시적으로 나타낸 도면이며, 도 16은 본 발명에 따른 뷰어 편집기의 이미지 편집창과 태그 편집창에 입력된 정보를 바탕으로 만들어지는 파일 생성과 폴더 구조를 설명하기 위한 도면이고, 도 17은 본 발명에 따른 뷰어 편집기를 이용한 편집 과정을 설명하기 위한 흐름도이다.
편집 권한을 가진 관리자에 의한 제어 명령에 따라 웹페이지(32)에서 이미지 뷰어(40)의 뷰어 화면을 출력하고, 뷰어 화면의 "뷰어 편집기" 버튼을 선택하여 뷰어 편집기(70)를 활성화한다(700). 그런 다음 편집 작업의 대상을 선택한다(710).
이미지 데이터베이스(50)에 새로운 이미지를 추가하거나 저장된 이미지를 수정하려면 이미지 편집창(71)을 관리자 단말(미도시)에서 불러와서 출력하고, 이미지 추가 또는 수정에 관련하여 태그정보를 편집하려면 태그 편집창(72)을 관리자 단말에서 불러와서 출력한다(720, 740).
뷰어 화면에서 이미지 편집창(71)을 열어 편집하는 과정을 설명한다. 도 14를 참고하여, 추가하거나 수정할 이미지와 설정 정보를 입력한다. 예를 들어 이미지 편집창(71)에서 서비스 아이템 타이틀(①), 이미지 선택(②), 초기 이미지(③), 상하방향 이미지 개수(④), 좌우방향 이미지 개수(⑤), 뷰어 화면 사이즈(⑥), 초기 이미지 사이즈(⑦)에 해당하는 설정 데이터를 각각 입력한다. 서비스 아이템 타이틀(①)의 입력칸에 서비스 아이템을 식별하기 위한 이름을 입력하고, 이미지 선택(②)의 입력칸에 이미지 데이터베이스(50)에서 불러와서 보조창(71-1)에 나타나는 이미지 리스트에서 선택하거나 도 2에 따라 새로 생성되어 보조창(71-1)에 나타나는 이미지 아이콘에서 선택하는 방법으로 선택 이미지를 입력할 수 있다. 초기 이미지(③)의 입력칸에 이미지 선택(②)에서 선택된 이미지들 중에서 뷰어 로딩시 처음 나타나는 초기 이미지를 입력하게 된다.
상하방향 이미지 개수와 좌우방향 이미지 개수(④)의 입력칸에 스크롤 조작에 따라 상하방향 또는 좌우방향으로 연속으로 나타나는 이미지의 개수를 각각 설정하기 위한 것으로, 해당하는 수치를 입력한다. 뷰어 화면 사이즈(⑤)의 입력칸에는 뷰어 화면(210)의 세로(height)와 가로(width)에 대응한 픽셀 단위(px)의 수치를 입력하고, 초기 이미지 사이즈(⑥)의 입력칸에는 뷰어 화면(210)에 처음 나타나는 초기 이미지의 세로(height)와 가로(width)에 대응한 픽셀 단위(px)의 수치를 입력한다(730).
도 15를 참고하여, 뷰어 화면에서 태그 편집창(72)을 열고, 추가하거나 수정할 이미지와 관련된 태그 정보를 입력한다. 예를 들어 태그 편집창(72)에서 태그 타이틀(⑦), 서브 태그 유무(⑧), 태그 내용(⑨), 지정 이미지번호(⑩), 지정 이미지위치(⑪), 태그팝업 화면 사이즈(⑫), 태그팝업 화면 위치(⑬), 연결선 유무(⑭)에 해당하는 설정 데이터를 입력한다.
태그 타이틀(⑦)의 입력칸에 수정하거나 추가하는 해당 이미지에 관련된 태그 정보를 식별하기 위한 이름을 입력하고, 서브 태그 유무(⑧)의 입력칸에는 태그 타이틀(⑦)의 태그에 부속된 서브 태그가 있는지를 입력한다. 태그 내용(⑨)의 입력칸에는 서비스 아이템에 관련된 제품 제원, 출처, 생산지, 원산지, 성분명, 취급 방법, 가격, 안내 설명, 주의사항 등을 제공하기 위한 것으로 텍스트로 입력하는데, 반드시 텍스트로 제한될 필요는 없으며 이미지 및 동영상 등을 볼 수도 있도록 링크 걸기를 이용할 수도 있다.
지정 이미지번호(⑩)의 입력칸에는 태그 지정을 위한 이미지를 식별하기 위한 이미지 파일을 입력하는데, 실시예에서 이미지 파일에 대해 제1번호_제2번호를 부여하고 있으므로 해당하는 이미지 번호를 입력한다.
지정 이미지위치(⑪)의 입력칸에 태그가 지정될 이미지에서의 태그 지점을 수치 또는 비율(%)로 입력하고, 태그팝업 화면 사이즈(⑫)의 입력칸에는 태그 데이터를 나타내기 위한 팝업 화면의 세로와 가로에 대응한 픽셀 단위(px)의 수치를 입력하고, 태그팝업 화면 위치(⑬)의 입력칸에는 뷰어 화면에서 태그 팝업 화면이 나타나는 위치를 수치 또는 비율(%)로 입력하며, 연결선 유무(⑭)의 입력칸에는 태그 지점과 태그 팝업 화면을 연결하는 연결선을 나타나게 할 것인지를 설정하게 된다(750).
뷰어 편집기(70)에 의한 편집 작업에 따른 파일 생성 과정을 상세히 설명한다. 설명의 편의상 서비스 아이템 타이틀은 "AAA"라고 예시하여 설명한다.
이미지 편집창(71)과 태그 편집창(72)을 이용한 입력 작업이 완료되면, 관련 파일들로서 html 파일, js 파일, json 파일 등이 생성되는데, 도 16에 도시한 바와 같이 계층 구조로 생성된다. 편집 작업이 완료되면, 새로운 기본 폴더(73)가 만들어지고, 기본 폴더(73) 하부에는 AAA.html과 VR 폴더(74)가 만들어지며, VR 폴더(74) 하부에는 AAA.js, AAA.json과 AAA 폴더(75)가 만들어지고, AAA 폴더(75) 하부에는 복수 이미지(이미지1, 이미지2, ..., 이미지n)와 info.json 이 만들어진다. 여기서 html 파일은 뷰어 화면을 구성하는 기본 파일이다. js 파일은 뷰어 화면의 초기 설정을 위한 파일로서 이미지 경로, 뷰어 화면의 전체 사이즈, 초기 이미지 사이즈, 초기 이미지의 번호를 설정하게 된다. json 파일은 태그정보를 설정하기 위한 파일로서 태그 타이틀, 서브 태그의 유무, 태그 팝업 화면의 사이즈, 태그 팝업 화면이 나타날 화면 위치, 태그 지정된 이미지 번호, 해당 이미지에서의 태그 지점, 태그 지점과 태그 팝업 화면의 연결선의 유무, 스크롤에 따른 회전 유무 등을 설정하게 된다. info.json은 스크롤 조작에 따라 좌우방향과 상하방향으로 연속으로 보여지는 이미지의 개수를 설정하기 위한 파일이다.
뷰어 편집기(70)를 통하여 생성된 파일들을 예시하면 다음과 같다.
『예시 1 』 AAA.html
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>AAA</title> ☜ ①에 입력한 내용
<link rel="stylesheet" href="SamterImgViewer.css">
<style>
body ｛
padding: 0px;
margin: 0px;
｝
</style>
</head>
<body>
<div id="target"></div>
<script src="SamterImgViewer.js"></script>
<script src="./VR/AAA.js"></script> ☜ ①에 입력한 내용으로 js 파일명 지정
</body>
</html>
『예시 2 』 AAA.js
// 이미지 뷰어 선언
var viewer = new eSamter.SamterImgViewer(｛
target: $('#target'),
imgURL: 'AAA.turntable', ☜ ②에 입력한 내용으로 js 파일명 지정
height: 1000, ☜ ⑤에 입력한 내용으로 뷰어 화면 사이즈의 height 지정
width: 1000, ☜ ⑤에 입력한 내용으로 뷰어 화면 사이즈의 width 지정
imgWidth: 500, ☜ ⑥에 입력한 내용으로 초기 이미지 사이즈의 width 지정
imgHeight: 400, ☜ ⑥에 입력한 내용으로 초기 이미지 사이즈의 height 지정
showLinkChain: true, ☜ ⑫에 입력한 내용으로 연결선 설정 여부 지정
useLink: true,
turntableStartName: '0_0.jpg', ☜ ③에 입력한 내용으로 초기 이미지 번호
cursorType:'mGlass'
｝);
『예시 3 』 AAA.json (서브태그가 없는 경우)
[｛"type": "manual"｝,
｛"type": "reset"｝,
｛"type": "mgglass"｝,
｛
"type": "detail",
"id": "samter-menu-tagMenu",
"menuClassName": "samter-menu-tagMenu",
"child": [｛ ☜ ⑧에 입력한 내용으로 서브 태그의 유무
"type": "tag",
"name": "Spec", ☜ ⑦에 입력한 태그 타이틀
"className": "samter-animation-left",
"menuClassName": "samter-menu-block-button",
"w": 250, ☜ ⑫에 입력한 태그팝업의 가로 사이즈
"h": 200, ☜ ⑫에 입력한 태그팝업의 세로 사이즈
"x": 74, ☜ ⑬에 입력한 태그팝업이 나타날 위치 %로 입력
"y": 5, ☜ ⑬에 입력한 태그팝업이 나타날 위치 %로 입력
"linkX": 50, ☜ ⑪에 입력한 이미지의 태그지점 x축 지점 %입력
"linkY": 50, ☜ ⑪에 입력한 이미지의 태그지점 y축 지점 %입력
"linkZ": 5, ☜ ⑪에 입력한 이미지의 태그지점 깊이
"useLink": false,
"useLinkMagnifyingGlass": false,
"showLinkTarget": false,
"showLinkPointer": false,
"linkSize": 20,
"linkPointerSize": 15,
"turntableH": 2, ☜ ⑩의 입력내용으로 태그가 지정될 이미지파일 이름의 앞번호
"turntableV": 21, ☜ ⑩의 입력내용으로 태그가 지정될 이미지파일 이름의 뒷번호
"content": "test"
｝
]｝
]
『예시 4 』 info.json
｛"maxH":0, "maxV":23｝ ☜ ④의 입력내용으로 이미지 개수(maxH : 상하방향, maxV : 좌우방향)
이와 같이 뷰어 편집기(70)의 이미지 편집창(71)과 태그 입력창(72)에 입력된 데이터는 별도의 변환 과정을 거치지 않고 js 파일과 json 파일 등으로 생성되고, 생성된 파일들은 이미지 데이터베이스(50)와 태그정보 데이터베이스(60)에 업로드 되는데, 이는 node.js 라는 파일 시스템을 이용하여 구현할 수 있다(760, 770).
이미지 뷰어(40)가 이미지 데이터베이스(50)에서 추가 또는 수정된 이미지 파일을 불러와서 뷰어 화면에 나타낼 수 있으며, 추가 또는 수정된 이미지 파일에 맵핑된 태그정보 데이터베이스(60)의 태그 설정파일과 태그 데이터를 불러와서 뷰어 화면에 나타낼 수 있다.
도 18은 본 발명에 따른 이미지 뷰어를 초기화하고 태그정보를 제공하기 위한 각 구성부의 처리 과정을 나타낸 도면이다.
사용자 단말(10)이 웹 서버(30)에 접속하는 경우, 디지털 콘텐츠 처리부(31)는 이미지 뷰어 초기화 요청하며, 이에 따라 이미지 뷰어(40)는 설정 파일을 요청하여 태그정보 데이터베이스(60)로부터 설정 파일을 제공받는다. 설정파일은 이미지 저장 경로, 로딩시 적용하는 이미지 파일, 돋보기 사이즈, 돋보기 기능에서 적용하는 확대 비율 등을 포함한다.
이미지 뷰어(40)는 이미지 파일을 요청하여 이미지 데이터베이스(50)로부터 이차원 이미지 파일 또는 가상 이차원 이미지 파일을 제공받으며, 제공받은 이미지 파일은 회전각 정보를 포함한다.
이미지 뷰어(40)는 설정 파일과 이미지 파일을 바탕으로 초기화를 수행하고, 초기화 수행시 설정 파일 로딩 과정은 설정정보 로더(419)에 의해 수행되고 이미지 파일 로딩 과정은 비동기 이미지 로딩모듈(423)에 의해 수행된다.
초기화 과정이 완료되면, 초기화 완료 명령을 디지털 콘텐츠 처리부(31)에 입력하고, 이에 따라 디지털 콘텐츠 처리부(31)는 웹 페이지(32)를 통하여 온라인 쇼핑이 시작될 수 있도록 한다.
사용자 단말(10)에 다운로드 받은 웹 페이지 상에서 고객에 의해 마우스 조작을 통하여 상품의 부가정보에 대한 검색을 수행할 수 있다. 마우스 커서의 이동에 따라 제공되는 좌표값을 전달받은 이미지 뷰어(40)의 이차원 좌표 검사모듈(417) 또는 가상 이차원 좌표 검사모듈(418)은 웹 페이지 상에 디스플레이되는 이미지의 태그 범위에 커서가 위치하는지를 검사한다. 커서가 태그 범위에 해당하지 않으면 그대로 응답하고, 커서가 태그 범위에 해당하는 것으로 판단되면 해당 태그정보를 태그정보 데이터베이스(60)에 요청하고 전달받은 태그정보를 디지털 콘텐츠 처리부(31)에 전달하여 고객 웹 페이지 상에서 태그정보를 확인할 수 있도록 한다.
도 19 내지 도 24는 본 발명에 따른 웹 페이지의 상품 검색창에서 가상 이차원 이미지와 태그정보를 제공받는 과정을 예시하여 설명하기 위한 도면이다.
사용자 단말(10)은 통신망(20)을 통하여 웹 사이트에 구축된 온라인 쇼핑몰에 접속한다. 소정의 인증 절차를 거쳐 인증 성공하면, 디지털 콘텐츠 처리부(31)의 요청에 따라 이미지 뷰어(40)를 초기화 한다. 초기화 과정은 도 18에 따라 진행된다.
사용자 단말(10)을 보유한 사용자는 도 19와 같은 쇼핑 안내 화면(320)을 이용하여 해당 서비스 아이템을 검색할 수 있다. 쇼핑 안내화면(320)에는 검색창(330)과, 이미지 창(340)과, 썸네일 이미지(350)와, 주문 안내창(360)과, 임시 구매버튼(370)과, 구매 확정버튼(380) 등이 표시된다.
사용자 단말(10)에서 서비스 아이템의 리스트를 검색하여 원하는 서비스 아이템을 마우스로 클릭하여 선택하면, 이미지 창(340)에 선택된 서비스 아이템에 대응한 이미지가 표시된다. 이때 디지털 콘텐츠 처리부(31)는 해당 이미지를 이미지 데이터베이스(50)에서 불러와서 웹페이지(32)에 제공한다. 도 20에 도시한 바와 같이, 이미지 창(340)에는 가상 이차원 이미지(Im)와 태그 버튼(341)과 함께 표시된다. 고객은 마우스를 이용하여 태그 버튼을 클릭하고 해당 서비스 기능을 선택하여 상품 구매를 위한 정보를 얻는다. 예를 들어 태그 버튼(341)을 클릭하는 경우, 도 21에서와 같이 일측에 서비스 기능(돋보기 기능, 회전 기능, 제품 사용법, 태그 목록 등)을 선택하기 위한 기능 버튼들이 나타난다.
도 22를 참고하여, 마우스를 이용하여 돋보기 기능버튼(3411)을 클릭하면 돋보기 기능이 활성화되고 이미지 창(340)에는 마우스 커서가 지시하는 일부 영역을 확대 표시하게 된다. 다른 서비스 기능으로서 도 23에서와 같이 마우스를 이용하여 회전 기능버튼(3412)을 클릭하면 회전 기능이 활성화되고 마우스 커서의 이동에 따라 가상 이차원 이미지가 로딩되어 이미지 창(340)에 표시되는데, 앞서 도 10과 도 13에서 설명한 바와 같이, 커서 이동에 따라 좌측 또는 우측으로 수평 회전하는 경우 해당하는 가상 이차원 이미지가 연속으로 표시되고, 커서를 위로 또는 아래로 이동하는 마우스 조작에 따라 해당하는 가상 이차원 이미지가 연속으로 표시될 수 있다.
또 다른 서비스 기능으로서 도 24에서와 같이 고객이 마우스를 이용하여 태그 기능버튼(3413)을 클릭하면 태그 기능이 활성화되고 이미지 창(340)에 표시되는 가상 이차원 이미지(Im)상에서 드래그하는 마우스 커서가 태그 범위에 위치하면 연결선(340b)에 연결된 태그 팝업 화면(340a)이 일측에 나타난다. 태그 팝업 화면(340a)에 태그정보가 표시된다. 태그정보는 텍스트, 이미지, 동영상, 애니메이션 등을 포함할 수 있다.
상술한 실시예에서는 이차원 이미지 또는 가상 이차원 이미지를 제작하는 과정이 간편하고, 동영상을 제작하여 제공하는 방식에 비하여 통신 트래픽이 현저히 적을 뿐 아니라 이미지 뷰어를 초기화하는 과정과 마우스 조작에 따라 해당 이미지를 불러올 때마다 비동기적으로 이미지 파일을 로딩하므로 통신 트래픽을 더욱 줄일 수 있다.
또한 상술한 실시예에서는 스크롤 조작을 통하여 동일한 서비스 아이템을 시각적으로 나타내는 시퀀스 이미지를 좌우방향 또는 상하방향으로 연속으로 표시할 수 있어 서비스 아이템의 전체 외관 및 구조를 살펴보기가 수월하고, 뷰어 화면에 나타나는 이미지에 맵핑된 태그 범위에 마우스 커서를 이동시키는 간편한 동작만으로 해당 태그정보를 신속 정확하게 제공받을 수 있는 사용 편리성이 있다.
이상에서 설명한 본 발명의 실시예는 장치를 통해서만 구현되는 것은 아니며, 본 발명의 실시예의 구성에 대응하는 기능을 실현하는 프로그램 또는 그 프로그램이 기록된 기록 매체를 통해 구현될 수도 있으며, 이러한 구현은 앞서 설명한 실시예의 기재로부터 본 발명이 속하는 기술분야의 전문가라면 쉽게 구현할 수 있는 것이다.
이상에서 본 발명의 실시예에 대하여 상세하게 설명하였지만 본 발명의 권리범위는 이에 한정되는 것은 아니고 다음의 청구범위에서 정의하고 있는 기본 개념을 이용한 여러 변형 및 개량 형태 또한 본 발명의 권리범위에 속하는 것이다.

Claims (6)

  1. 웹페이지를 통하여 서비스 아이템의 이미지와 태그정보를 포함한 디지털 콘텐츠를 제공하는 웹 서버; 상기 서비스 아이템을 시각적으로 나타내기 위한 개별 이차원 이미지 또는 가상 이차원 이미지의 이미지 파일을 저장하는 이미지 데이터베이스; 상기 이미지 파일에 부가된 태그정보를 저장하는 태그정보 데이터베이스; 상기 이미지 데이터베이스와 태그정보 데이터베이스에 저장된 이미지 파일과 태그정보를 상기 웹서버에 공급하는 이미지 뷰어; 상기 이미지 뷰어에 연동하여 새로운 이미지의 추가 또는 이미지의 수정 작업에 수반하는 태그정보를 편집하기 위한 뷰어 편집기;를 포함하되,
    상기 이미지 뷰어는, 스크롤 조작에 따라 다른 각도의 시퀀스 이차원 이미지를 상기 이미지 데이터베이스로부터 로딩하여 뷰어 화면에 연속으로 표시하고, 상기 이차원 이미지에 맵핑된 태그정보를 상기 로딩된 이미지가 표시되는 뷰어 화면의 주변 영역에 표시하며,
    상기 뷰어 편집기는, 편집 기능이 활성화되어 상기 뷰어 화면에 제공되는 이미지 편집창과 태그 편집창을 이용하여 편집 대상의 이차원 이미지 또는 태그정보의 세부 사항을 각각 설정하고, 설정된 입력 데이터를 바탕으로 생성한 파일을 상기 이미지 데이터베이스와 태그정보 데이터베이스에 각각 저장하는 것을 특징으로 하는 이미지 스크롤에 적합한 시퀀스 이차원 이미지의 태그정보 처리 장치.
  2. 제1항에서,
    상기 이미지 뷰어는 스크롤 조작에 따라 연속으로 표시하는 이차원 이미지에 맵핑된 태그 지점의 좌표를 자동 계산하여 해당하는 태그 지점의 태그정보를 제공하는 것을 특징으로 하는 이미지 스크롤에 적합한 시퀀스 이차원 이미지의 태그정보 처리 장치.
  3. 제2항에서,
    상기 뷰어 편집기는 상기 이미지 편집창과 태그 편집창의 입력 작업이 완료되면 계층 구조의 관련 파일로서 html 파일, js 파일, 및 json 파일을 생성하며, 상기 html 파일은 상기 뷰어 화면을 구성하는 기본 파일이고, 상기 js 파일은 상기 뷰어 화면의 초기 설정을 위한 파일이며, 상기 json 파일은 태그정보를 설정하기 위한 파일인 것을 특징으로 하는 이미지 스크롤에 적합한 시퀀스 이차원 이미지의 태그정보 처리 장치.
  4. 제1항에서,
    상기 이미지 편집창은 상기 서비스 아이템을 식별하기 위한 이름, 추가 또는 수정을 위하여 선택된 이미지, 선택된 이미지 중에서 뷰어 로딩시 처음 나타나는 초기 이미지, 스크롤 조작에 따른 좌우방향 또는 상하방향으로 연속으로 나타나는 이미지의 개수, 상기 뷰어 화면의 사이즈, 상기 초기 이미지의 사이즈에 대하여 설정 입력하는 것을 특징으로 하는 이미지 스크롤에 적합한 시퀀스 이차원 이미지의 태그정보 처리 장치.
  5. 제1항에서,
    상기 태그 편집창은 상기 태그정보를 식별하기 위한 이름, 태그에 부속된 서브 태그의 유무, 태그내용, 태그 지정을 위한 이미지를 식별하기 위한 이미지번호, 태그 지정된 이미지에서의 태그지점, 태그내용을 나타내기 위한 태그팝업 화면의 사이즈, 상기 뷰어 화면에 나타나는 태그팝업 화면의 위치, 태그지점과 태그팝업 화면을 연결하는 연결선의 유무를 설정 입력하는 것을 특징으로 하는 이미지 스크롤에 적합한 시퀀스 이차원 이미지의 태그정보 처리 장치.
  6. 제1항에서,
    상기 웹 서버로부터 디지털 콘텐츠를 제공받는 사용자 단말을 포함하되,
    상기 사용자 단말은 인트라넷에 연결된 개인용 컴퓨터에 접근할 수 있는 사용 환경에서 인터넷에 연결된 게이트웨이를 통하여 디지털 콘텐츠를 제공받거나 또는 댁내에 홈네트워크를 구축하고 인터넷 서비스하는 스마트 가전기기로서 IPTV 및 스마트 냉장고에 접근할 수 있는 사용 환경에서 인터넷에 연결된 홈게이트웨이를 통하여 디지털 콘텐츠를 제공받을 수 있는 것을 특징으로 하는 이미지 스크롤에 적합한 시퀀스 이차원 이미지의 태그정보 처리 장치.
PCT/KR2018/007761 2017-07-07 2018-07-09 이미지 스크롤에 적합한 시퀀스 이차원 이미지의 태그정보 처리 장치 WO2019009688A1 (ko)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
KR1020170086346A KR101981228B1 (ko) 2017-07-07 2017-07-07 이미지 스크롤에 적합한 시퀀스 이차원 이미지의 태그정보 처리 장치
KR10-2017-0086346 2017-07-07

Publications (1)

Publication Number Publication Date
WO2019009688A1 true WO2019009688A1 (ko) 2019-01-10

Family

ID=64951114

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/KR2018/007761 WO2019009688A1 (ko) 2017-07-07 2018-07-09 이미지 스크롤에 적합한 시퀀스 이차원 이미지의 태그정보 처리 장치

Country Status (2)

Country Link
KR (1) KR101981228B1 (ko)
WO (1) WO2019009688A1 (ko)

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2004259065A (ja) * 2003-02-26 2004-09-16 Sony Corp ３次元オブジェクトの表示処理装置、表示処理方法、およびコンピュータプログラム
KR100465587B1 (ko) * 2004-01-31 2005-01-13 (주)오픈브이알 동시에 다수의 이미지를 촬영하는 3차원 이미지 생성 장치및 방법
KR20070067452A (ko) * 2005-12-23 2007-06-28 원종우 이미지 파일에 부가정보를 삽입하는 방법 및 장치와 이를위한 기록매체
KR20090039405A (ko) * 2007-10-18 2009-04-22 삼성테크윈 주식회사 태그 정보의 처리방법 및 이를 구현하는 클라이언트-서버시스템
KR20110074493A (ko) * 2011-03-08 2011-06-30 주식회사 엔알 상세정보가 포함된 이미지 파일의 형성 장치 및 방법과 그것을 이용한 운영 시스템 및 방법

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR100360220B1 (ko) 2000-03-18 2002-11-09 임종학 동영상을 통한 전자상거래 서비스 방법

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2004259065A (ja) * 2003-02-26 2004-09-16 Sony Corp ３次元オブジェクトの表示処理装置、表示処理方法、およびコンピュータプログラム
KR100465587B1 (ko) * 2004-01-31 2005-01-13 (주)오픈브이알 동시에 다수의 이미지를 촬영하는 3차원 이미지 생성 장치및 방법
KR20070067452A (ko) * 2005-12-23 2007-06-28 원종우 이미지 파일에 부가정보를 삽입하는 방법 및 장치와 이를위한 기록매체
KR20090039405A (ko) * 2007-10-18 2009-04-22 삼성테크윈 주식회사 태그 정보의 처리방법 및 이를 구현하는 클라이언트-서버시스템
KR20110074493A (ko) * 2011-03-08 2011-06-30 주식회사 엔알 상세정보가 포함된 이미지 파일의 형성 장치 및 방법과 그것을 이용한 운영 시스템 및 방법

Also Published As

Publication number Publication date
KR101981228B1 (ko) 2019-05-22
KR20190005543A (ko) 2019-01-16

Similar Documents

Publication Publication Date Title
WO2017039341A1 (en) Display apparatus and control method thereof
WO2015119480A1 (en) User terminal device and displaying method thereof
WO2013085146A1 (en) System and method of page sharing by a device
WO2014175692A1 (en) User terminal device with pen and controlling method thereof
WO2015030564A1 (en) Display apparatus, portable device and screen display methods thereof
WO2014046440A1 (en) User terminal device and network server apparatus for providing evaluation information and methods thereof
WO2017135777A1 (en) Mobile electronic device and method for electronic payment
EP3105657A1 (en) User terminal device and displaying method thereof
WO2019139270A1 (ko) 디스플레이 장치 및 이의 컨텐츠 제공 방법
WO2016013915A1 (ko) 검색 정보를 표시하는 방법, 장치 및 컴퓨터 프로그램
WO2014098528A1 (en) Text-enlargement display method
WO2016175420A1 (ko) 리타게팅 광고 상품 추천 사용자 장치와 서비스 제공 장치, 그를 포함하는 광고 상품 추천 시스템, 그의 제어 방법 및 컴퓨터 프로그램이 기록된 기록매체
WO2021025387A1 (ko) 통합 주문 및 통합 배송이 가능한 전자상거래 방법 및 이를 위한 서버
WO2016199994A1 (ko) 무인 택배함을 이용한 관심상품 선행 배송 서비스 제공 장치 및 그 방법, 그리고 컴퓨터 프로그램이 기록된 기록매체
WO2019132462A1 (ko) 중장비 중개 장치 및 방법, 그리고 이를 이용하는 시스템
WO2016093565A1 (ko) 증강현실을 접목한 제품과 다양한 추가기능이 탑재된 통합 애플리케이션시스템
EP3440610A1 (en) Portable device and electronic payment method of portable device
WO2019231138A1 (en) Image display apparatus and operating method of the same
WO2023177201A1 (ko) 상업화 모델 구현을 위한 메타버스 시스템 구현 장치 및 그 작동 방법
WO2019009688A1 (ko) 이미지 스크롤에 적합한 시퀀스 이차원 이미지의 태그정보 처리 장치
WO2014029339A1 (zh) 以动态图像展现金融交易操作数据装置、方法及存储介质
WO2016036214A1 (ko) 스마트 리더기를 이용한 쇼핑 서비스 시스템 및 방법, 이를 이용한 스마트 커머스 방법
WO2019124882A1 (en) Electronic apparatus, control method thereof, and computer readable recording medium
WO2020059914A1 (ko) 단말기, 이의 제어 방법 및 상기 방법을 구현하기 위한 프로그램을 기록한 기록 매체
WO2018186571A1 (ko) 이미지 뷰어에 의해 맵핑된 동적 태그를 이용한 디지털 콘텐츠 처리 시스템 및 방법

Legal Events

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

Ref document number: 18828468

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 18828468

Country of ref document: EP

Kind code of ref document: A1