KR102374829B1 - Method for supporting left-right swipe for feed in portable electronic device and system thereof - Google Patents

Abstract

The present invention is to provide contents using a widget in a portable electronic device. A method for allowing a portable electronic device to provide a tile widget service includes the steps of: determining the first layout of a first feed corresponding to a first tile and the second layout of a second feed corresponding to a second tile; displaying the first feed configured according to the first layout and the second feed configured according to the second layout; and when a left-right swipe input is detected on the first feed, moving the display area of the first feed according to a direction of the left-right swipe input.

Description

METHOD FOR SUPPORTING LEFT-RIGHT SWIPE FOR FEED IN PORTABLE ELECTRONIC DEVICE AND SYSTEM THEREOF

The present invention relates to a portable electronic device, and more particularly, to a method and system for supporting a left and right swipe of a feed in a portable electronic device.

After the smart phone was released to the world in the 2000s, the smart phone market has grown rapidly and has now become a necessity in modern society. The growth of the smartphone market has led to great development not only in hardware development, but also in various fields such as related applications and services. In particular, the smart phone greatly improved the accessibility to the Internet network, thus enabling the emergence of various social network services (SNS) and business success.

SNS is a service that allows users to form a human network on the web. In general, SNS forms a relationship between users and allows content to be shared. The components of SNS include the online space, the formation and maintenance of interpersonal relationships, the structure of the relationship network, the wave of the relationship network, and the exchange of information. Through SNS, users can interact and communicate and exchange information. Sometimes, SNS is also used as a means of effective marketing.

For the effective functioning of SNS, it is desirable that the interface be intuitive and easy. Intuition, convenience, etc. are concepts that are largely related to users' perceptions, and are greatly affected by changes in society. Accordingly, according to changes in users' experiences and social perceptions, the above-mentioned concepts are continuously changed. Accordingly, even now, new SNSs with various structures and functions are continuously being developed.

The present invention provides a method and system for providing a social network service (SNS) having a more effective interface in a portable electronic device.

The present invention provides a method and system for supporting left and right swiping of a feed including a plurality of photos in a portable electronic device.

The present invention provides a method and system for performing an expansion function through a left and right swipe in a portable electronic device.

According to an embodiment of the present invention, in a method for providing a tile widget service in a portable electronic device, a first layout of a first feed corresponding to a first tile and a second layout corresponding to a second tile are provided. 2 determining a second layout of the feed; displaying a first feed configured according to the first layout and a second feed configured according to the second layout; when a left and right swipe input is detected on the first feed, and moving the display area of the first feed according to the direction of the left and right swipe input, wherein the first layout follows a format reflecting the expression of a widget generated on the home screen, and the first The feed includes a plurality of photos included in the first tile, and each of the plurality of photos has the same shape as that of the widget, and is cropped or resized to one of sizes supported by the widget.

The portable electronic device according to an embodiment of the present invention may provide a more convenient user experience (UX) in response to a left and right swipe input.

1 illustrates a system for providing a service according to an embodiment of the present invention.
2 illustrates a structure of a portable electronic device according to an embodiment of the present invention.
3 shows the structure of a server according to an embodiment of the present invention.
4 illustrates functional structures of a portable electronic device and a server according to an embodiment of the present invention.
5 illustrates a procedure for displaying feeds in a portable electronic device according to an embodiment of the present invention.
6 illustrates an example of a feed displayed in a portable electronic device according to an embodiment of the present invention.
7A illustrates a structure of a feed in a portable electronic device according to an embodiment of the present invention.
7B illustrates an example of photo patterns constituting a board in a portable electronic device according to an embodiment of the present invention.
7C illustrates control of a display area by a swipe in a portable electronic device according to an embodiment of the present invention.
8 illustrates a procedure for moving a display area of a feed in a portable electronic device according to an embodiment of the present invention.
9A illustrates the concept of a feed expansion in a portable electronic device according to an embodiment of the present invention.
9B illustrates an example of a feed extension command in a portable electronic device according to an embodiment of the present invention.
10 illustrates a procedure for creating and displaying a widget in a portable electronic device according to an embodiment of the present invention.
11 illustrates an example of an interface for creating a widget in a portable electronic device according to an embodiment of the present invention.
12A and 12B illustrate examples of widgets displayed in a portable electronic device according to an embodiment of the present invention.
13A illustrates an example of a change over time of a photo displayed through a widget in a portable electronic device according to an embodiment of the present invention.
13B illustrates another example of a change over time of a photo displayed through a widget in a portable electronic device according to an embodiment of the present invention.
14 illustrates an example of a comment displayed on a widget in a portable electronic device according to an embodiment of the present invention.
15 illustrates a concept of searching for a feed by a swipe input in a portable electronic device according to an embodiment of the present invention.

Hereinafter, preferred embodiments of the present invention will be described in detail with reference to the accompanying drawings. And, in describing the present invention, if it is determined that a detailed description of a related known function or configuration may unnecessarily obscure the gist of the present invention, the detailed description thereof will be omitted.

Hereinafter, a technology for providing an interface that responds to a left and right swipe input in a portable electronic device will be described. Specifically, the present invention describes various embodiments for displaying an application for a social network service (SNS) whose main function is photo sharing, displaying a feed of the SNS, and further changing the feed in response to an input from a user. .

1 illustrates a system for providing a service according to an embodiment of the present invention.

Referring to FIG. 1 , a portable electronic device 110 and a server 120 are connected to a communication network. Through the communication network, the portable electronic device 110 and the server 120 may perform mutual communication.

The portable electronic device 110 is a user's device, and a dedicated client application for a service according to an embodiment of the present invention may be installed. The portable electronic device 110 may access the server 120 through a client application, upload content (eg, photos, comments, reactions, etc.) to the server 120 , and receive content from the server 120 . can do.

The server 120 manages the content uploaded from the portable electronic device 110 and provides the content according to the request of the portable electronic device 110 . According to an embodiment of the present invention, the server 120 may provide content uploaded by a user as well as advertisement content of an advertiser.

2 shows a structure of a portable electronic device 110 according to an embodiment of the present invention.

Referring to FIG. 2 , the portable electronic device 110 includes an input/output unit 20 , a communication unit 230 , a camera unit 230 , an audio unit 240 , a sensor unit 250 , a storage unit 260 , and a control unit ( 270).

The input/output unit 210 includes means for displaying a screen and means for sensing an input from the outside. Here, the means for displaying the screen may be implemented as a liquid crystal screen or the like. The means for sensing an input includes a touch pad, a key button, a sensor, a camera, and the like. The input/output unit 210 may include a touch screen in which a liquid crystal screen and a touch pad are combined. In some cases, the input/output unit 210 may be interpreted as a set of physically separated two or more hardware modules.

The communication unit 220 performs a function for accessing an external communication network and transmitting and receiving data/signal/information. For example, the communication unit 220 may perform a function of accessing the Internet network, a wireless communication network, a mobile communication network, and the like. To this end, the communication unit 220 performs functions such as modulation/demodulation, amplification, and filtering of the signal. The communication unit 220 may support communication technologies such as wireless LAN communication (eg, Wi-Fi) and cellular communication (eg, LTE, 5G).

The camera unit 230 may perform functions such as taking a picture and recording a video. The camera unit 230 may include an image sensor, a lens, and the like. As the image sensor, at least one of a charged coupled device (CCD) and a complementary metal-oxide semiconductor (CMOS) may be used. For example, the camera unit 230 recognizes light input through a lens as the image sensor, and converts the image recognized by the image sensor into digital data.

The audio unit 240 includes a speaker and the microphone, and performs audio input and output. The audio unit 240 may include a detachable earphone (ear phone), a headphone (head phone), or a headset (head set), or may include a terminal for connecting an earphone, a headphone, a headset, and the like.

The sensor unit 250 detects an external physical phenomenon. The sensor unit 250 may include at least one of an acceleration sensor, a gyro sensor, an optical sensor, a geomagnetic sensor, a gravity sensor (G-sensor), a temperature sensor, a biosensor, and a position sensor. The sensor unit 250 may detect motion, light, tilt, azimuth, and the like, and may generate an electrical signal indicating a detection result.

The storage unit 260 stores data, programs, microcodes, applications, etc. necessary for the operation of the portable electronic device 110 . The storage unit 260 may be implemented as a temporary or non-transitory storage medium. Also, the storage unit 260 may be fixed to the device or implemented in a detachable form.

The controller 270 controls the overall operation of the portable electronic device 110 . The controller 270 may include at least one of a processor and a microprocessor. The control unit 270 may visually express information to the user through the input/output unit 210 or sense the user's input. The control unit 270 may execute a program stored in the storage unit 260 , and may transmit or receive data to or from an external device through the communication unit 220 . In addition, the controller 270 may control the camera unit 230 to obtain an image, control the audio unit 240 to output audio or sense a sound, and obtain sensing data through the sensor unit 250 . there is. In particular, the controller 270 controls the portable electronic device 110 to operate according to various embodiments to be described later.

3 shows the structure of the server 120 according to an embodiment of the present invention.

Referring to FIG. 3 , the server 120 includes a communication unit 310 , a storage unit 320 , and a control unit 330 .

The communication unit 310 performs a function for performing communication with an external device. The communication unit 310 may support wired communication. The storage unit 320 stores data, programs, microcodes, applications, etc. necessary for the operation of the server 120 . The storage unit 320 may be implemented as a temporary or non-transitory storage medium. Also, the storage unit 320 may be fixed to the device or implemented in a detachable form.

The controller 330 controls the overall operation of the server 120 . The controller 330 may include at least one of a processor and a microprocessor. The control unit 330 may execute a program stored in the storage unit 320 , and may transmit or receive data to or from an external device through the communication unit 310 . In particular, the controller 330 controls the server 120 to operate according to various embodiments to be described later.

The portable electronic device 110 described with reference to FIGS. 2 and 3 may use a service provided by the server 120 . A service according to an embodiment of the present invention is a kind of SNS that posts and shares content uploaded by a user, for example, a photo, and enables mutual communication between users. In particular, the service according to an embodiment of the present invention may be used in the form of a widget in addition to the method used by executing a client application. A service according to an embodiment of the present invention may be referred to as a 'tile widget'. Hereinafter, various embodiments for providing a tile widget service will be described.

Prior to the description of the embodiments, content units used in the tile widget service are defined. The tile widget defines the content units of 'photo', 'tile', and 'album', and the detailed contents are shown in <Table 1> below.

Item Contents Photo Individual images uploaded by the user. One image file (eg 1 JPG file). tile A grouping of photo(s) that forms a group according to the user's designation. It is a unit expressed as one post in the feed, and the unit exposed on the home screen widget. In the tile widget service, it is used as a unit for setting favorites and setting units for visibility. album A unit that groups selected multiple photos between tiles beyond the boundaries of tiles. It is not exposed on the tile, and it is a form that can be viewed on the page as a web URL. It is possible to create a separate group by collecting only the photos the user wants from among one or a plurality of tiles, and furthermore, to share or download the photo(s) in an environment where a tile widget-only application is not installed by sharing it on the web through a web URL for. A concept for embedding a kind of viral element in the tile widget service.

4 shows functional structures of the portable electronic device 110 and the server 120 according to an embodiment of the present invention. The components of the portable electronic device 110 shown in FIG. 4 are examples of functional structures implemented in the portable electronic device 110 according to the execution of an application for a service according to an embodiment of the present invention, and A component is an example of a functional structure for interacting with a functional structure of the portable electronic device 110 .

Referring to FIG. 4 , the portable electronic device 110 includes a content processing unit 411 , a feed output unit 412 , a widget output unit 413 , a location estimation unit 414 , and an advertisement control unit 415 . The server 120 includes a tile management unit 421 , an album management unit 422 , an activity management unit 423 , a feed configuration unit 424 , a widget control unit 425 , and an advertisement providing unit 426 .

The content processing unit 411 processes the content generated by the user or acquired externally in a format usable in the tile widget, and then transmits it to the server 120 . For example, the content processing unit 411 may transmit a photo or a stored photo taken by the user with a camera, transmit photo selection information for forming an album, or convert a comment or reaction input by the user into data and transmit it. there is. At this time, the image is provided to the tile management unit 421 , the photo selection information is provided to the album management unit 422 , and the user's activity information (eg, comments, reactions, etc.) for the posted photos is provided to the activity management unit 423 . provided

The tile manager 421 groups the photos provided from the content processor 411 to configure at least one tile, creates a tile in the user's account, and manages the photos in units of tiles. Here, the tile is a set of photos constituting one feed, and may be determined by a user's selection. The album management unit 422 creates at least one album based on the user's selection information provided from the content processing unit 411 . The album is a group of photos designated by a user among photos included in at least one tile. That is, one album may include photos included in different tiles. The activity management unit 423 manages activity information of users. Activity information includes comments, reactions, and the like entered by the user for the feed. Activity information may be managed in units of tiles, and may include the number of each type of reaction, a list of comments, and the like.

The feed configuration unit 424 composes an app screen, ie, feeds, by combining photos and activity information managed by the tile management unit 421 and the activity management unit 423 , and provides them to the portable electronic device 110 . Each of the feeds may be configured based on a user's settings, and may include one of a corresponding user's tile and another user's tile. The feed output unit 412 displays a feed on the screen based on data provided from the feed configuration unit 424 . The feed contains tiles and interface items corresponding to the tiles (eg, buttons, links, comment panes, etc.).

The widget output unit 413 operates when a widget of the tile widget service is created on the home screen. The widget output unit 413 displays a photo on the widget created on the home screen. Upon creation of the widget, the user may associate a specific tile with the widget, and a picture in the associated tile is displayed through the widget. To this end, the widget control unit 425 transmits a picture in the corresponding tile to the widget output unit 413 .

The location estimator 414 provides information related to the location of the portable electronic device 110 to the server 120 . For example, the location-related information may be location coordinates determined using a global positioning system (GPS) or location-like information such as Internet protocol (IP). Information related to the location is provided to the advertisement providing unit 426 .

The advertisement providing unit 426 generates advertisement content to be output through the widget based on location information and information on the widget. Then, the advertisement providing unit 426 transmits the advertisement content to the advertisement control unit 415 . Accordingly, the advertisement control unit 415 may provide advertisement content to the widget output unit 413 , and the widget output unit 413 may display the advertisement contents through the widget.

5 illustrates a procedure for displaying feeds in the portable electronic device 110 according to an embodiment of the present invention.

Referring to FIG. 5 , in step 501 , the portable electronic device 110 groups a plurality of photos into tiles. In this case, a plurality of tiles may be generated. Bundling of tiles may be performed based on data provided from a server. For example, referring to FIG. 6 , a plurality of photos such as Photo #1-1, Photo #1-2, and Photo #1-3 are grouped with a first tile 610, and Photo #2-1 and Photo# A plurality of photos such as 2-2 and photo #2-3 may be grouped by the second tile 620 .

Next, in step 502 , the portable electronic device 110 configures the feeds in units of tiles. Each of the feeds includes photos in one tile (eg, the first tile 610 and the second tile 620 ). Here, the tile included in each feed may include the user's own tile as well as the user's favorite tile among tiles of other users. In addition, the post may include various interface elements (eg, a favorite icon, the number of views, the number of photos, comments, etc.).

Then, in step 503, the portable electronic device 110 displays the feeds. Feeds can be arranged vertically on the screen. For example, as shown in FIG. 6, the screen is divided into a feed area 601 and a menu area 602, and a first feed 612 including photos of the first tile 610 in the feed area 610; A second feed 614 including photos of the second tile 620 may be displayed, and a notice 622 and a tap bar 624 may be displayed in the menu area 602 . According to another embodiment, the notice 622 may be omitted. In this case, in each post, the photos may not be displayed in an equal size, but may be displayed in a plurality of sizes. Referring to the example of FIG. 6 , the first feed 612 includes three photos. One photo is displayed on the left large, and two photos are displayed relatively small on the right. Also, the first feed 612 may further include at least one of a title item 612a (eg, a day's trip) of a tile at the top and an activity information item 612b at the bottom.

As described with reference to FIGS. 5 and 6 , photos included in one tile are configured and displayed as one feed. In displaying the feed, as in the example of FIG. 6 , some photos may be partially displayed. In this case, according to an embodiment, the entire partially displayed picture may be displayed according to a user input. To this end, the structure of the feed may be designed as shown in FIG. 7A below.

7A illustrates a structure of a feed in a portable electronic device according to an embodiment of the present invention. Referring to FIG. 7A , the feed includes a board 720 including pictures of tiles (eg, pictures #1-1 to #1-7), a title item 712a representing the title of the tile, and corresponding and an activity information item 712b related to the feed.

The board 720 is a bundle of contents in which photos that can be displayed through a feed are arranged according to a predetermined layout. Here, the layout may be predefined in the client application or may be instructed by a server (eg, the server 120 of FIG. 1 ). According to an embodiment, the layout applied to the board 720 expresses the photos in one of a plurality of sizes, and expresses the photos in a processed shape rather than the original image.

For example, as in the example of FIG. 7A , photos included in the board 720 may be arranged in three sizes. Specifically, the first largest size (eg, the size applied to Photo #1-1), the second medium size (eg the size applied to Photo #1-2), and the smallest third size (eg, the size applied to Photo #1-2). One of three sizes, such as the size applied to -3)), can be applied to each photo. Also, each photo is displayed in a bordered shape. In other words, as in the example of FIG. 7A , each photo is displayed in a shape in which a border 704 having a rounded corner is added to the outer edge of the image 702 , rather than the original square image. In this case, the color of the border 740 may be fixed to one or set to various colors. According to various embodiments, a different color for each feed may be applied to the border 704 , or different colors may be applied to the border 704 for each photo within one feed.

The window 730 specifies an area of the board 720 displayed in the feed (hereinafter referred to as a 'display area'). The window 730 has a greater height (vertical axis length) than the board 720 , but has a smaller width (horizontal axis length) than the board 720 . Accordingly, at one point in time, only a portion but not all of the board 720 may be displayed in the feed. According to various embodiments, as the window 730 or the board 720 slides left and right, the display area may be controlled. A process of changing the display area will be described in more detail below with reference to FIG. 7C .

Title item 712a includes a title of the tile. The title of the tile is text information specified by the user who uploaded the tile. The activity information item 712b includes a like icon, a favorite icon, a view icon, a photo icon, and a comment icon, and the number of likes, number of favorites, and number of views are next to each icon. Includes numbers indicating the number of photos and comments included in the tile. According to other embodiments, at least one of the above five icons may be omitted or another type of icon may be added.

As described with reference to FIG. 7A , the photos may be exposed to the feed in a processed shape and various sizes. Here, the shape and size reflect the expression format of the widget in which the photos are created on the home screen. In other words, the portable electronic device applies the expression applied to the photo displayed in the widget created on the home screen to the photo displayed in the feed. Accordingly, when a widget is created, the user can check in advance how each photo will be expressed in the widget of the home screen in the feed. That is, the user can preview the shape of the widget to be created on the home screen by scrolling left and right using the photos in the tile while the app is running.

The representation of the widgets that can be created on the home screen, that is, the shape and size, depend on an operating system (OS). Specifically, the shape, size, and aspect ratio of the home screen widget may be limited. Since the range of the size and aspect ratio of the photo image uploaded by the user is relatively wide, when the photo is displayed through the home screen widget, the photo may be expressed differently from the original image. Accordingly, by displaying the photos in a state in which the format and size of the widget are reflected in advance in the feed as in the above-described embodiment, the portable electronic device may increase the predictability of the user. That is, the size and shape of the photos included in the board 720 described with reference to FIG. 7A is not a simple selection, but a result of reflecting the expression of the widget, and the effect of allowing the user to experience content display through the widget in advance have

7B illustrates an example of photo patterns constituting a board in a portable electronic device according to an embodiment of the present invention. 7B illustrates patterns for placing pictures within board 720 .

Referring to FIG. 7B , photos included in the board 720 are arranged according to a combination of patterns, and candidate patterns 721 , 722 , and 723 that can be used as each pattern are defined. The first candidate pattern 721 includes one picture of the largest size S ₁ . The second candidate pattern 721 includes one picture of the medium size S ₂ at the top and two pictures of the smallest size S ₃ at the bottom. The third candidate pattern 723 includes two pictures of the smallest size S ₃ at the top and one picture of the medium size S ₂ at the bottom. At least one of the three candidate patterns 723 may be applied to the board.

According to an embodiment, the first candidate pattern 721 and the second candidate pattern 722 may be alternately applied to the board 720 . For any feed, the first candidate pattern 721 may be applied to the leftmost side of the board 720 , followed by the second candidate pattern 722 . For other feeds, the second candidate pattern 721 may be applied to the leftmost side of the board 720 , followed by the second candidate pattern 722 . One of the arrangement of the order of the first candidate pattern 721 - the second candidate pattern 722 and the arrangement of the order of the second candidate pattern 722 - the first candidate pattern 721 may be randomly applied based on a randomization algorithm. there is. In addition to this, the candidate patterns 721 , 722 , and 723 may be applied in various combinations.

In FIG. 7B , the size of the unit region defining the pattern is exemplified to be the same as the size S ₁ . However, it is also possible to understand that the size of the unit region defining the pattern is twice the size S ₁ . In this case, at least some of the nine patterns that can be generated by combining two of the three candidate patterns 721 , 722 , and 723 illustrated in FIG. 7B may be defined as usable patterns. Furthermore, a pattern in which photos of size S ₁ are arranged on the left and right of a photo of size S ₂ may also be defined.

7C illustrates control of a display area by a swipe in a portable electronic device according to an embodiment of the present invention.

Referring to FIG. 7C , the board 720 is displayed to the user through the window 730 . The relative positional relationship between the board 720 and the window 730 may change. However, although not shown in FIG. 7C , the title item 712a and the activity information item 712b are fixed on the window 730 . The size of the board 720 is larger than the size of the window 730 , and accordingly, the window 730 may cover only a portion of the board 720 . That is, only a partial area covered by the window 730 among the entire area of the board 720 is displayed.

Accordingly, if the relative positional relationship between the board 720 and the window 730 is changed, the display area may be changed. In other words, if the area covered by the window 730 changes as the position of the window 730 on the board 720 changes, the display area is changed. The relative position of the window 730 with respect to the board 720 may be controlled by a user's touch input, specifically, a left and right swipe touch input.

In the case of the first state 701 of FIG. 7C , since the window 730 is located at the left end of the board 720 , the left end area covered by the window 730 is displayed. This may be understood as an indication of the first feed 612 illustrated in FIG. 6 . The first state 720 in which the left end region of the board 720 is displayed may be an initial state of the feed.

In the first state 701 , when a swipe touch input from right to left occurs on the board 720 , as in the second state 702 , the board 720 moves to the left in the same swipe direction. Accordingly, as in the second state 702 , the window 730 covers an area to the right of the board 720 rather than the left end thereof. This may be understood as equivalent to moving the window 730 relatively to the right. Accordingly, a partial area of the board 720 displayed on the screen is changed to an intermediate area of the board 720 . In this case, the degree of movement of the board 720 may be determined based on at least one of a movement distance of a touch point through a left and right swipe input, a movement speed, and a touch release time.

In the second state 702 , when a right-to-left swipe touch input occurs again on the board 720 , as in the third state 703 , the board 720 moves to the left in the same swipe direction. . Accordingly, as in the third state 703 , the window 730 covers the right end region of the board 720 . This may be understood as equivalent to moving the window 730 relatively to the right. Accordingly, a partial area of the board 720 displayed on the screen is changed to the right end area of the feed 170 . In this case, the degree of movement of the board 720 may be determined based on at least one of a movement distance of a touch point through a left and right swipe input, a movement speed, and a touch release time.

In the embodiment described with reference to FIG. 7C , in the first state 701 which is the initial state, the display area 730 is the entire picture #1-1, part of picture #1-2, and part of picture #1-3. covers the Accordingly, in the first state 701 , the entire picture #1-1 is displayed, and a part of the picture #1-2 and picture #1-3 is displayed. As some of the photos #1-2 and #1-3 are displayed in the initial state, the user may recognize that there are more viewable photos through a left and right swipe touch input. That is, by setting the layout so that the boundary of the display area 730 in the initial state spans the middle of some photos, photos that are not included in the current display area 730, that is, hidden, can be viewed by swiping left and right. There is an effect that allows the user to intuitively recognize it.

8 illustrates a procedure for moving a display area of a feed in the portable electronic device 110 according to an embodiment of the present invention.

Referring to FIG. 8 , in step 801 , the portable electronic device 110 determines the layout of the feed reflecting the widget expression. That is, the portable electronic device 110 determines the number of photos included in the feed, the size and arrangement of the photos, and the shape of each photo. Here, the determined size of each picture is one of sizes supported by the home screen widget, and the shape of each picture (eg, a picture border shape) may be the same as the shape of the home screen widget. For example, the portable electronic device 110 may determine the arrangement of photos by combining a plurality of candidate patterns as shown in FIG. 7B .

In step 802 , the portable electronic device 110 configures and displays the feed according to the determined layout. Specifically, the portable electronic device 110 selects a determined number of photos from a tile, allocates the selected photos to each location in the layout, and crops or resizes each photo according to a size applied to the assigned location. resize), modify the shape of each picture (eg border shape) into a widget representation, position each picture, and display it along with other components of the feed (eg tile title, activity information, etc.). In this case, a specific operation for cropping or resizing a photo may vary according to various embodiments. At this time, according to the initial state of the feed, the display area is located at the left end of the board.

In step 803 , the portable electronic device 110 checks whether a left and right swipe input is detected on the feed. That is, the portable electronic device 110 checks whether a user's touch input to change the display area of the board occurs on the feed.

When a left and right swipe input is sensed, in step 804 , the portable electronic device 110 moves the display area according to the direction of the swipe. Specifically, the portable electronic device 110 detects the start point of the swipe input, the moving direction of the touch point, the moving speed of the touch point, release of the touch, etc. in real time, and moves the display area according to the detection result. In this case, the display area may be moved opposite to the direction of the swipe. In other words, in a state in which the window is fixed, the board may be moved in the direction of the swipe.

According to an embodiment, while the touch is maintained, the display area may be moved by the left and right movement distance of the touch point. When the touch is released, the display area may be maintained as the time when the touch is released if the touch movement speed during the period from the release time or the threshold time to the release time is less than the threshold value. In this case, the display area is maintained even if at least one photo spans the boundary of the window. On the other hand, if the touch movement speed during the release time point of the touch or the period from the threshold time to the release time point is equal to or greater than the threshold value, the display area may be moved further in proportion to the corresponding movement speed.

In the embodiment described with reference to FIG. 8 , the portable electronic device determines the layout of the feed. Here, the layout includes the number of pictures, the size of each picture, the location of each picture, the shape of each picture, and the like. Since the feed according to an embodiment of the present invention expresses each picture in one of a plurality of sizes, the portable electronic device must determine a displayed size (hereinafter referred to as an 'output size') of each picture to be included in the feed.

According to an embodiment, the output size of each of the photos may follow the order of the output sizes included in the determined pattern combination. The output sizes used in the feed are determined by the combination of patterns as described with reference to FIG. 7B . Meanwhile, photos included in the feed are included in tiles, and each photo has a unique identifier within the tile. Accordingly, the portable electronic device outputs the photos in the order of the identifier according to the order (eg, S ₁ →S ₂ →S ₃ →S ₃ or S ₂ →S ₃ →S ₃ →S ₁ ) determined by the determined pattern combination. The sizes can be determined (eg, the output size of the photo of ID#1 is S ₁ , the output size of the photo of ID#2 is S ₂ , the output size of the photo of ID#3 is S 3 , and the output size of the photo of ID#4 is S ₃ , The output size is S ₃ ). In this case, the order in which the photos are placed in the feed will depend on the identifier order.

According to another embodiment, the output size of each of the photos may be determined according to the size and the aspect ratio of the photo. In this case, the portable electronic device determines the photos to be included in the feed, and then classifies them according to available output sizes based on the size of the photos and the aspect ratio. For example, when three output sizes are available as shown in FIG. 7B , the portable electronic device applies size S 2 to pictures having a relatively large ratio of vertical length to horizontal length, and applies size S ₂ to pictures having a relatively large size among the remaining pictures. A size S ₁ may be applied to , and a size S ₃ may be applied to the remaining photos. In this case, the order in which photos are arranged in the feed may not follow the identifier order.

According to another embodiment, the output size of each of the photos may be indicated by the server. In this case, the portable electronic device may determine the output size of each picture based on information indicated by the server, that is, information received from the server. That is, the server instructs the portable electronic device in which output size the photos to be included in the feed are displayed. In this case, an operation of determining the output size of each of the photos is required by the server, and the server may determine the output size similarly to the above-described embodiments.

In the embodiment described with reference to FIG. 8 , the photo downloaded from the server may be cropped or resized to be included in the feed. In other words, the portable electronic device may reduce the number of pixels or crop the downloaded picture to have the size displayed in the feed. According to various embodiments, the operation of at least one of cropping and resizing may be performed based on at least one of a size of a picture, an aspect ratio of the picture, and a characteristic of the picture.

According to an embodiment, at least one of cropping and resizing may be performed so that a displayed range of the downloaded photo is maximized. For example, the portable electronic device may resize the photo based on the length of the vertical axis or the horizontal axis of the selected size, and then crop the resized photo to fit the selected size. For example, if you want to display a picture of size W ₁ ×H ₁ (W ₁ <H ₁ ) downloaded from the server in size D×D(D<W ₁ ), the portable electronic device will display the picture's aspect ratio After resizing the horizontal size to D while maintaining Here, if the short axis length of the downloaded photo is the same as the long axis length of the size displayed in the feed, resizing may be omitted.

According to another embodiment, cropping or resizing may be performed so that a meaningful part of the photo is well expressed. Specifically, the portable electronic device may perform cropping to include a main part of the photo, and may resize the cropped result to fit a displayed size. Here, the main part may be defined in various ways. For example, the portable electronic device may identify at least one main subject and perform cropping such that an area not including the identified at least one main subject is excluded. The identification of the main subject may be based on artificial intelligence-based recognition technology. As another example, the portable electronic device may divide a photo into a plurality of regions, select a main region based on statistical information on pixel values in each region, and perform cropping to include the main region. In this case, the classification of the main part may be performed only on one axis of the picture or may be performed on both the vertical axis and the horizontal axis.

As a specific example, cropping may be performed so that a main subject (eg, a person's face) is included in the cropped result. To this end, the portable electronic device may detect a main area including the main subject in the photo, and determine the crop area so that the main area and the crop area overlap as much as possible. For example, the crop region may be determined such that the centers of both the main region and the crop region (eg, a center line of a horizontal axis, a center line of a vertical axis, or a center point in consideration of both horizontal and vertical axes) coincide with each other. In particular, a crop function in consideration of a main area in a size S ₂ in which the horizontal length is greater than the vertical length may be useful. Therefore, according to an embodiment, the portable electronic device considers the area of the main subject when cropping is performed to arrange the photo with the output size S ₂ , and selects the range of the main subject when arranging the photo with another output size. may not be considered. However, according to another embodiment, it is also possible to consider the range of the main subject for all output sizes.

As in the embodiment described with reference to FIG. 8 , the portable electronic device may resize and crop the photo. However, according to another embodiment, resizing may be performed by a server and cropping may be performed by a client. In this case, the server provides the resized picture to the client, and the client, that is, the portable electronic device, may crop the downloaded picture according to the selected pattern. According to another embodiment, both resizing and cropping may be performed in the server. That is, in this case, the portable electronic device may display the downloaded picture without resizing and cropping.

As described above, when a tile includes a plurality of photos, the portable electronic device may include the plurality of photos in one feed and display the plurality of photos while moving the display area in response to a user input. In this case, in the initial state of the feed, all photos included in the tile may not be included in the feed. In this case, the portable electronic device may add at least some of the remaining photos to the feed in response to an additional user input. This function may be referred to as an 'expansion' of the feed. Extensions may also be called 'view more', 'add photos', etc. The concept of the extended function is as shown in FIGS. 9A and 9B below.

9A illustrates the concept of the expansion of a feed in a portable electronic device according to an embodiment of the present invention. Referring to FIG. 9A , a tile corresponding to a feed includes a plurality of photos. The plurality of photos are divided into a plurality of subsets. The subsets include a first subset 910-1 and a second subset 910-2. In the example of FIG. 9A , each of the first subset 910-1 and the second subset 910-2 includes n different pictures.

In the initial state of the feed, the initial board 920a is created to include the photos in the first subset 910 - 1 . That is, the initial board 920a in the initial state includes n photos, such as photos #1 to #n. At least some of the photos #1 to #n included in the initial board 920a will be displayed in the feed, and the portable electronic device displays the photos #1 to #n when the display area is moved in response to the user's left and right swipe input. can be displayed

In this case, when a user's extension command is generated, the photos in the second subset 910 - 2 are added to the initial board 920a. Accordingly, the extended board 920b includes 2n pictures such as pictures #1 to #2n. At least some of the photos #1 to #2n included in the initial board 920a will be displayed in the feed, and the portable electronic device displays the photos #1 to #2n when the display area is moved in response to the user's left and right swipe input. can be displayed In the example of FIG. 9A , photos #n+1 to photos #2n added to the extended board 920b are arranged in the same pattern as photos #1 to #n. However, according to another embodiment, photos #n+1 to photos #2n may be arranged in different patterns from photos #1 to #n.

The extended command may be defined as a user input of a specific pattern. For example, the extended command may be defined based on a user's touch input. According to an embodiment, an icon for an extension command may exist. According to another embodiment, the extended command may be defined as a swipe input. An example of an extended command defined as a swipe input is shown in FIG. 9B below.

9B illustrates an example of a feed extension command in a portable electronic device according to an embodiment of the present invention. 9B is an example of a case in which a swipe touch input in a left direction is used as an extension command in a state in which the display area is located at the right end area of the board.

Referring to FIG. 9B , in the first state 901 , the display area 930 is located at the right end area of the board 910 . In this case, the board 910 can no longer be moved to the left. In this case, a swipe touch input of the user in the left direction is generated within the display area.

In response to this, as in the second state 920 , the board 910 moves to the left by a predetermined distance, and the blank area 940 is displayed on the right side of the display area 930 . Here, the blank area 940 may be filled with the same color as the background of the initial board 920a or a different color. According to an embodiment, a notification for announcing expansion may be displayed in the blank area 940 . At this time, after the blank area 940 is displayed. If the user does not release the touch input or swipe right, the second state 902 is maintained.

When the second state 902 is maintained for more than a threshold time, like the third state 903 , the photos are updated to be added to the initial board 920a. Accordingly, the initial board 920a is expanded to the right, and photos (eg, photo #n+1, photo #n+2, photo #n+3, etc.) are added to the initial board 920a. Thereafter, although not shown in FIG. 9B , when a swipe touch input in the left direction occurs, the initial board 920a moves, and photo #n+1, photo #n+2, photo #n+3, etc. are displayed. It may be displayed on the display area 930 .

As described above, the tile widget provides functions for managing and displaying photos in units of tiles. Users can enter reactions (eg likes, favorites, etc.) and comment on tiles. In addition, the tile widget has a function of displaying albums created by users on the home screen through the widget. If the widget of the tile widget is created through the widget function provided by the operating system, there is an advantage that the photos in the album can be periodically updated and viewed at a set time period (eg, 15 minutes). When a user of an album related to the widget uploads a new photo, the new photo is displayed on the widget, even if the user does not directly view the album by running the app. In this way, the tile widget faithfully reflects the function of the online real-time album. Photo display operations using the widget are as shown in FIG. 10 .

10 illustrates a procedure for creating and displaying a widget in the portable electronic device 110 according to an embodiment of the present invention.

Referring to FIG. 10 , in step 1001 , the portable electronic device 110 creates a widget. Widgets are created by the mechanism provided by the operating system and require user interaction. For example, if the user selects a tile widget application after an input for creating a widget (eg, after pressing a touch on the home screen background, selecting a widget menu), the portable electronic device 110 provides a tile widget for the user. You can create widgets. An interface for creating a widget will be described in more detail below with reference to FIG. 11 .

Next, after the widget is created, in step 1002 , the portable electronic device 110 checks a tile corresponding to the created widget. Here, the tile is specified by the user when the user creates the widget. That is, a widget is associated with one tile or a plurality of tiles.

Thereafter, in step 1003 , the portable electronic device 110 displays one of the photos in the tile through the widget. When the at least one related tile includes a plurality of photos, the portable electronic device 110 may select a photo to be displayed according to a predefined rule. According to another embodiment, the displayed picture may be selected and then indicated by the server 120 rather than the portable electronic device 110 .

A widget may be created as shown in FIG. 10 . Widgets that can be created according to an embodiment of the present invention may be classified into a plurality of types. The types of widgets are shown in <Table 2> below.

type explanation clock The current time is displayed in the widget. It is a type that displays the time with good visibility on the screen with a slightly larger size. D-day Display D-Day numbers based on a specific date. In the same way as the 87th and 86th days, the user sets the travel date, anniversary date, etc. and displays it as a widget. Anniversary Advertising function of D-Day function. This type is used to control the number of days left for a specific singer's concert, a specific celebrity meetup, schedule, etc. according to the order of the advertiser, not the user.

11 illustrates an example of an interface for creating a widget in the portable electronic device 110 according to an embodiment of the present invention. 11 illustrates an interface displayed when a user creates a widget of a tile widget service.

Referring to FIG. 11 , when a widget of the tile widget service is created on the home screen and the created widget is selected, the tile widget menu 1110 is overlapped and displayed on the home screen. The tile widget menu 1110 includes a home screen edit button and a widget removal button. When the Remove Widget button is clicked, the corresponding widget is removed. When the home screen edit button is clicked, a list 1120 of tiles that can be displayed through a corresponding widget is displayed. For example, the list 1120 may include at least one of favorite tiles, public tiles, and own tiles. Each item included in the list 1120 includes a title of a tile and a description of the tile. When any one item included in the list 1120, that is, any one tile is selected, a detailed information window 1130 for the corresponding tile is displayed. Then, when the detailed information window 1130 is clicked, the corresponding tile is associated with the corresponding widget.

Examples in which a widget is created and displayed are shown in FIGS. 12A and 12B . 12A and 12B illustrate examples of widgets displayed on the portable electronic device 110 according to an embodiment of the present invention.

Referring to FIG. 12A , three widgets 1202 , 1204 , and 1206 are created on the home screen. In the example of FIG. 12A , the first widget 1202 is related to the tile #1, and displays the picture #1-1. Similarly, the second widget 1204 and the third widget 1206 are respectively related to the tile #2 and the tile #3, respectively, to display the picture #2-1 and the picture #3-1. According to a user's setting, the third widget 1206 is set to be larger than the first widget 1202 and the second widget 1204 . Since the three widgets 1202 , 1204 , and 1206 fill one page of the home screen, other icons are not displayed.

12B is an example in which a widget of a tile widget and icons of other applications are displayed together. A first widget 1202 and a second widget 1204 are disposed at the top, and icons 1212 are disposed at the bottom. 12B , the widget of the tile widget may compose a page of the home screen together with other icons.

Through the widget shown in FIGS. 12A and 12B , the user can conveniently view photos in the designated tile without running an application. In this case, while the picture is displayed, the size of the widget may be changed by the user dragging the border of the widget. In this case, the portable electronic device 110 may resize the picture being displayed on the widget to fit the size of the widget. Alternatively, the portable electronic device 110 may maintain the size of the picture even if the size of the widget increases, and further display at least one other picture within the same tile in the space secured due to the increase in the size of the widget. In this case, the other at least one picture may be displayed gradually larger as the size of the widget increases.

The picture displayed through the widget is not static and may be updated over time. An example in which the photo is updated is shown in FIG. 13A or 13B.

13A illustrates an example of a change over time of a photo displayed through a widget in the portable electronic device 110 according to an embodiment of the present invention. Referring to FIG. 13A , at time t0, picture #3-1 is displayed on the widget 1302 . Thereafter, as time passes as t0+Δ, t0+2Δ, and t0+3Δ, the pictures displayed on the widget 1302 change to picture #3-2, picture #3-3, and picture #3-4. . That is, the photos included in the tile related to the widget 1302 are sequentially displayed according to a predetermined time interval.

13B illustrates another example of a change over time of a photo displayed through a widget in the portable electronic device 110 according to an embodiment of the present invention. Referring to FIG. 13B , at time t0 , picture #3-1 is displayed on the widget 1302 . Then, at time t1 , a new photo is additionally uploaded to the tile associated with widget 1302 . Accordingly, regardless of the lapse of the predetermined time, at time t1, the picture displayed on the widget 1302 is changed to picture #3-5, which is a new picture. Thereafter, according to the predetermined time interval △, at times t1+Δ and t1+2Δ, the photos displayed on the widget 1302 sequentially change to photos #3-2 and #3-3. That is, due to the upload of a new picture, the time offset of the picture display is reset. However, according to another embodiment of the present invention, even if a new photo is displayed in the middle, the update time of the next photo may still be determined based on t0.

The widget can display not only photos, but also comments related to that photo or tile. That is, if there is a comment on the photo, the tile widget provides a window through which users can communicate by displaying the user's comments in one line at the bottom of the widget. An example in which comments are displayed is shown in FIG. 14 . 14 illustrates an example of a comment displayed on a widget in the portable electronic device 110 according to an embodiment of the present invention. Referring to FIG. 14 , picture #3-1 is displayed on the widget 1402 . And, at the bottom of the inner bottom of the widget 1402, overlaid with a photo, a comment 1412 with the contents of "Wow, where is this? It's so pretty!" is displayed. The comment 1412 is entered by the user in the corresponding photo or tile, and can be checked in the album displayed by executing the application. In this way, the tile widget allows you to check comments from widgets on the home screen without running an application.

As described above, the tile widget service according to embodiments of the present invention provides various user interface (UI)/user experience (UX) centered on widgets, such as providing content through widgets and providing a feed reflecting the widget expression. can In particular, as described above, the tile widget service may list feeds in a vertical direction (ie, a vertical direction), and each feed may be configured to be long in a horizontal direction (ie, a left-right direction). Accordingly, the user may search for feeds while swiping the screen up and down, and may search for photos in the feed while swiping left and right. This pit search is shown in FIG. 15 below.

15 illustrates a concept of searching for a feed by a swipe input in a portable electronic device according to an embodiment of the present invention. Referring to FIG. 15 , a plurality of feeds such as a first feed 1512-1, a second feed 1512-2, and a third feed 1512-3 are generated, and an area 1550 shown on the app screen. is part of a plurality of feeds. In the state shown in FIG. 15 , the area 1550 shown by a swipe touch input within the area 1550 may be moved. For example, when a vertical swipe input occurs within the area 1550 , the feeds move up and down at the same time, so that the area 1550 may relatively move up and down. Also, when a left and right swipe input is generated within the area 1550 , the board in the feed to which the touch point of the swipe input belongs is moved left and right, so that another part of the board may enter the area 1550 . Specifically, when the swipe touch input 1502 occurs, the board of the first feed 152-1 is moved left and right. Similarly, when the swipe touch input 1504 occurs, the board of the second feed 1512 - 2 is moved left and right. And, when the swipe touch input 1506 is generated, a plurality of feeds such as the first feed 1512-1, the second feed 1512-2, and the third feed 1512-3 are all moved up and down.

The method according to various embodiments of the present invention described above may be implemented as a computer program or a mobile application and stored in a medium in order to be executed in combination with a computer, which is hardware. Alternatively, the steps of the method or algorithm described in relation to the embodiments of the present invention may be implemented directly in hardware, as a software module executed by hardware, or by a combination thereof. A software module may contain random access memory (RAM), read only memory (ROM), erasable programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM), flash memory, hard disk, removable disk, CD-ROM, or It may reside in any type of computer-readable recording medium well known in the art to which the present invention pertains. In addition, the algorithm is produced in the form of an installation file and provided in the form of an online download, and for this purpose, it may be stored in a server accessible through an online software market.

Meanwhile, although specific embodiments have been described in the detailed description of the present invention, various modifications are possible without departing from the scope of the present invention. Therefore, the scope of the present invention should not be limited to the described embodiments and should be defined by the claims described below as well as the claims and equivalents.

Claims (5)

A method for providing a tile widget service in a portable electronic device, the method comprising:
In a state in which the application for the tile widget service is executed, a first feed in which a first plurality of photos included in a first tile are arranged according to a first layout is included in a second tile through a first window displaying a second feed in which a plurality of second photos are arranged according to a second layout through a second window;
In the initial state of the first feed, when a left and right swipe touch input on the first feed is detected, the display area of the second feed is maintained and the first feed displayed through the first window is displayed. moving the area;
In the first layout, the first plurality of photos are arranged in a plurality of sizes, and the horizontal length of the first feed is set to be greater than the horizontal length of the first window,
Each of the first plurality of photos arranged according to the first layout is processed to be displayed together with corners and borders of the same shape as the expression of a widget generated on the home screen,
The initial state of the first feed is a state in which a part of the first feed is seen,
The first feed is controlled to deviate from the initial state by the left and right swipe touch input and to show another part of the first feed,
The first window and the second window occupy different areas within the execution screen of the application,
The first window and the second window have a fixed width and are not moved left and right by the left and right swipe touch input.
The method of claim 1,
detecting a click of a favorite icon of the first tile; setting the first tile as a favorite according to the click of the favorite icon;
generating a widget of the application on the home screen in response to detecting a widget creation command for the application on the home screen;
displaying a menu including a home screen editing button when selection of the widget is detected;
displaying a list of at least one favorite tile including the first tile when selection of the home screen edit button is detected;
setting the widget to be associated with the first tile when selection of the first tile from the list is detected;
The method further comprising the step of displaying at least one photo among the plurality of first photos included in the first tile and a comment related to the at least one photo through the widget.
The method of claim 1,
The display area is moved in a direction opposite to the left and right swipe touch input.
The method of claim 1,
The first feed includes a first picture displayed in a first size, a second picture displayed in a second size, and a third picture displayed in a third size,
The first size is a size in which both the width and length are the first length,
The second size is a size of a first length in width and a second length in length, wherein the second length is half of the first length,
The third size is a size in which both the width and length are the second length.
An application program stored in a computer-readable storage medium to execute the method according to any one of claims 1 to 4 when operated by a processor.

Images