KR20210143651A - Method for displaying images based on scroll gesture and viewer device for performing the same - Google Patents

Abstract

The embodiments relate to a method for displaying so as to animate an object of an image based on a characteristic of a scroll gesture, and a viewer device for performing the same. The method and viewer device according to the embodiments enable to replace an image according to a control of a user such as a screen touch/drag gesture/fling gesture and the like. The viewer device comprises a step of replacing displayed individual images.

Description

{Method for displaying images based on scroll gesture and viewer device for performing the same}

Embodiments relate to techniques for displaying images. More particularly, embodiments relate to a method of displaying an object of an image to animate based on a characteristic of a scroll gesture, and a viewer device for performing the same.

A display device that visually presents content is integrated or connected to a computer (eg, a laptop computer, desktop computer, or notebook, etc.) or a mobile device (eg, a cellular phone, smart phone, or tablet PC, etc.).

In the case of a computer, it is possible to interact with the user through a separate input device such as a mouse or keyboard. In contrast, a mobile device has a relatively small screen size in consideration of portability and a limitation in an input method.

Recently, with the development of miniaturization technology of high-performance hardware and the development of communication technology, various applications for servicing large-capacity multimedia contents have been provided through mobile devices.

A conventional application that provides a webtoon uses image data of the entire episode including a plurality of cut images. Activates a single image of the entire section and displays the scroll section corresponding to the screen size. In addition, the area of the image displayed on the screen is changed as the user moves the scroll section to view another area. In general, an input for moving a display area to enjoy a webtoon on a mobile device includes an input for skipping a middle and jumping to a specific point, and a drag input for displaying a middle part. The input for jumping to a specific point is implemented as a gesture of selecting a scroll position corresponding to the specific point, and since the image spanning the middle of the specific point from the point corresponding to the current screen image is swept, the webtoon image is discontinuous. is provided On the other hand, in the case of a drag input, if the drag speed is constant, the display area only moves constantly. And in the case of a webtoon, it is not displayed so that it is expressed as a single motion during dragging.

On the other hand, a conventional application (eg, a video player) for playing a video is configured to play a frame in a video stream through a playback function. Since the conventional application implements a frame to be displayed on a screen in terms of playback time, a separate menu tool including a playback section and a playback function is required. Moving the scroll position on the menu tool provides the user with a change in playback timing while discontinuously displaying an image that is not animated by an object in the image. In addition, when a user input jumping from a time point at which a specific frame is displayed on the screen to another time point is input, an intermediate frame between specific frames is skipped from the screen frame, the screen frame is displayed from the specific frame, and playback is continued. In addition, the frame reproduction ratio may be adjusted in response to an input to a preset reproduction ratio (eg, x0.5, x1, x1.5, x2, etc.).

On the other hand, there have been attempts to give various effects to webtoons. For example, the so-called VR toon is a method of viewing a webtoon in three dimensions using a device such as a VR headset. However, these VR toons not only require a separate device to enjoy webtoons, but also have limited VR-based works.

In addition, there are things that allow you to rotate the screen of a webtoon 360 degrees to view it, or give a motion effect to a flat webtoon like so-called motiontoon. However, these motiontoons are only to the extent of applying special effects (animation, sound effects, vibration, etc.) to some cuts in the webtoon viewer of the static image arrangement method.

As such, the conventional multimedia content providing application of the mobile device has a limit in implementing depth-oriented dynamic content appreciation through a user input, particularly a scroll action.

According to an aspect of the present invention, a viewer device (or mobile device) that interactively animates a plurality of images based on a characteristic of a user input such as a scroll input or a scroll gesture (action), and in particular, displays a sense of space to animate. , hereinafter the same), an image display method, and a computer-readable recording medium recording the same or a computer program (application) recorded therein may be provided.

In another aspect, the present invention provides a viewer device, an image display method, and a method for displaying dynamic content centered on depth in response to a user input such as a scroll input or a scroll gesture (action) rather than a static or flat image listing, and a method for displaying the same. A computer-readable recording medium recorded thereon or a computer program (application) recorded thereon may be provided.

In one aspect of the present invention, there is provided a viewer device comprising a memory and a processor, wherein the processor is configured to execute instructions stored in the memory, the instructions comprising: a plurality of individual images arranged on an image arrangement axis and in a display order replacing the individual images displayed in response to the scroll input such that, in the set of images made up, objects included in the individual images are animated in response to the scroll input, one individual image being displayed on the screen; Provides a viewer device that composes the screen image of

In one embodiment, replacing the individual image comprises: displaying a first image from the image set consisting of the plurality of individual images on a screen; and making the first image displayed on the screen disappear in response to the scroll input and displaying a second image on the screen based on the display order.

In an embodiment, replacing the individual image may include: receiving a scroll input on a screen; acquiring a touch characteristic on a specific axis on a plane of the screen in the scroll input; determining a direction in which a screen image is replaced based on a touch characteristic of the scroll input; and replacing the first image with the second image as a screen image based on the touch characteristic of the scroll input, wherein the specific axis of the plane of the screen may be an axis preset to correspond to the scroll axis.

In an embodiment, the scroll input may include a drag gesture or a fling gesture.

In an embodiment, the acquiring of the touch characteristic on the scroll axis from the scroll input may include acquiring one or more of a touch direction, a touch speed, a touch acceleration, and a touch distance variation on the scroll axis.

In one embodiment, the step of obtaining the touch characteristic on the scroll axis from the scroll input may include calculating a fling distance change amount based on a fling acceleration detected at a release point and a preset friction factor when the scroll input is a fling gesture. step, wherein the friction factor may cause the fling acceleration to decelerate.

In an embodiment, the determining of the replacement progress direction includes: converting a direction on the scroll axis to a direction of an image arrangement axis; and determining the direction of the converted image arrangement axis as the rotation progress direction.

In an embodiment, the specific axis of the screen plane corresponding to the scroll axis may be a horizontal axis or a vertical axis of the screen, and the image arrangement axis may be an axis that is not parallel to the plane of the screen.

In an embodiment, the replacing of the individual image may include: comparing an amount of change in a touch distance of the scroll input with a preset replacement threshold; and replacing the screen image with another image arranged in a replacement direction when the amount of change in the touch distance is greater than or equal to a replacement threshold, wherein the amount of change in touch distance may be a change in touch distance from a previous image replacement time.

In an embodiment, when the scroll input is a drag gesture, the processor may be further configured to perform the step of stopping the image replacement when the amount of change in the touch distance decreases below a threshold value.

In an embodiment, when the scroll input is a fling gesture, calculating, by the processor, a time from a previous image replacement time to a point in time when the touch distance change amount becomes equal to or greater than a replacement threshold value before the touch distance change amount becomes 0 ; and stopping the image replacement when the calculated time is equal to or greater than a preset threshold time interval.

In an embodiment, the image set is divided into a plurality of sections according to a display order, the plurality of sections are respectively associated with a plurality of audios, and the processor is configured to: output audio of a section to which the screen image belongs. determining with audio; and changing the audio to which the sound is output when the section to which the screen image belongs is changed according to the replacement of the image.

In an embodiment, when the scroll input is a fling gesture, the processor may change the audio of the section including the image replacement completion point to the audio to be outputted.

In an embodiment, the image set may constitute a webtoon or a preview of the webtoon.

In one embodiment, the processor comprises: generating a plurality of views; loading a plurality of images included in the image set; before displaying the first individual image, each assigning the loaded plurality of images to the created plurality of views; selecting a display view from among the plurality of views; and when the scroll input is received, selecting another view as the display view so that the display image is replaced.

In an embodiment, the viewer device may include an image show unit and a scroll input processing unit. Here, the scroll input processing unit moves the position of the image arrangement axis corresponding to the screen image based on the scroll input, loads the image corresponding to the moved position, and the image show unit generates a single view, and assign a loaded image to the single view, and display the image assigned to the single view on the screen.

In an embodiment, the viewer device may include an image show unit and a scroll input processing unit. Here, the scroll input processing unit moves the position of the image arrangement axis corresponding to the screen image based on the scroll input, and loads the images corresponding to the plurality of positions between the movement sections, and the image show unit includes: It may be configured to generate a view, assign a loaded image to each of the generated plurality of views, and sequentially display the image assigned to the plurality of views on the screen.

In another aspect of the present invention, there is provided a method of displaying a sequence image, performed by a processor, in an image set comprising a plurality of individual images arranged on an image arrangement axis and assigned a display order, in response to a scroll input It provides a method of configuring one screen image in which one individual image is displayed on a screen, including; replacing an individual image displayed in response to a scroll input so that an object included in the image is animated.

In an embodiment, replacing the individual image may include: receiving a scroll input on a screen; acquiring a touch characteristic on a specific axis on a plane of the screen in the scroll input; determining a replacement progress direction based on a touch characteristic of the scroll input; and replacing the first image with a second image as a screen image based on the touch characteristic of the scroll input, wherein the specific axis of the plane of the screen may be an axis preset to correspond to the scroll axis.

In an embodiment, the scroll input may include a drag gesture or a fling gesture.

In an embodiment, the acquiring of the touch characteristic on the scroll axis in the scroll input may include acquiring one or more of a touch direction, a touch speed, a touch acceleration, and a touch distance variation on the scroll axis.

In one embodiment, the step of obtaining the touch characteristic on the scroll axis from the scroll input may include calculating a fling distance change amount based on a fling acceleration detected at a release point and a preset friction factor when the scroll input is a fling gesture. step, wherein the friction factor may cause the fling acceleration to decelerate.

In an embodiment, the determining of the replacement progress direction includes: converting a direction on the scroll axis to a direction of an image arrangement axis; and determining a direction of replacement based on the direction of the converted image arrangement axis.

In an embodiment, the replacing of the individual image may include: comparing an amount of change in a touch distance of the scroll input with a preset replacement threshold; and replacing the screen image with another image arranged in a replacement direction when the amount of change in the touch distance is greater than or equal to a replacement threshold, wherein the amount of change in touch distance may be a change in touch distance from a previous image replacement time.

In an embodiment, the method may further include: when the scroll input is a drag gesture, stopping the image replacement when the amount of change in the touch distance decreases below a threshold value.

In one embodiment, the method includes: when the scroll input is a fling gesture, before the touch distance change becomes 0, calculating the time from the previous image replacement time to the time when the touch distance change amount becomes greater than or equal to a replacement threshold value step; and stopping the image replacement when the calculated time is equal to or greater than a preset threshold time interval.

In one embodiment, the image set is partitioned into a plurality of sections according to a display order, the plurality of sections are respectively associated with a plurality of audio, and the method includes: outputting audio of a section to which the screen image belongs. determining with audio; and changing the audio to which the sound is output when the section to which the screen image belongs is changed according to the replacement of the image.

In one embodiment, when the section to which the screen image belongs is changed according to the replacement of the image, the step of changing the audio to be outputted may include: when the scroll input is a fling gesture, the audio of the section including the image replacement completion point is sound can be changed to the audio to be output.

In an embodiment, the image set may constitute a webtoon or a preview of the webtoon.

A method and a viewer device according to embodiments of the present invention are to interactively animate a plurality of images based on a characteristic of a user input such as a scroll input or a scroll gesture (action), in particular, to display a plurality of images to be animated by giving a sense of space. It is possible to replace the image according to the user's control such as screen touch/drag gesture/fling gesture. Through this, it is possible to enjoy depth-oriented dynamic content in response to a user input such as a scroll input or a scroll gesture (action) rather than a static image arrangement.

In an embodiment, the viewer device may display a sequence having a constant playback speed by naturally replacing a plurality of images in response to an input of a drag gesture having a uniaxial direction on the screen and displaying the same on a single screen.

In addition, the viewer device naturally replaces a plurality of images in response to an input of a fling gesture having a uniaxial direction on the screen and displays them on a single screen while replacing the images at a faster rate at first and later displaying the images at a slower rate. By replacing, it is also possible to display a sequence in which the playback speed accelerates and decelerates.

The viewer device may recycle a view for displaying images, for example, in order to display thousands of images in the process of replacing the plurality of images.

In this way, by having various image replacement speeds for the same plurality of images according to a user's gesture, a sequence image can be interactively displayed.

Also, images may be recycled in many situations, such as thousands of images.

In addition, since the viewer device does not require a separate menu tool including a playback function, the interface configuration is simple.

In addition, the image disappears and displays to animate objects included in the image in response to a scroll input, so that the image of the non-interesting section of the image set is reproduced and passed at high speed, so that the user does not skip the non-interesting section. Therefore, it is possible to maximize time saving while viewing the minimum content information for the section.

In addition, when the image set is divided into a plurality of sections and audio is allocated to each section, if the display section is changed due to image replacement, the sound of the audio may also be naturally changed.

The effects of the present invention are not limited to the effects mentioned above, and other effects not mentioned will be clearly understood by those skilled in the art from the description of the claims.

In order to more clearly explain the technical solutions of the embodiments of the present invention or the prior art, drawings necessary for the description of the embodiments are briefly introduced below. It should be understood that the drawings below are for the purpose of explaining the embodiments of the present specification and not for the purpose of limitation. In addition, some elements to which various modifications such as exaggeration and omission have been applied may be shown in the drawings below for clarity of description.
1 is a conceptual block diagram of a mobile device including a viewer application interface according to an embodiment of the present invention.
2 is a flowchart of a method of displaying a plurality of images, according to an embodiment of the present invention.
3 is a conceptual diagram of an operation of displaying an image in a viewer interface application according to an embodiment of the present invention.
4 is a flowchart of a method of displaying a plurality of images when a drag gesture is input, according to an embodiment of the present invention.
5 is a diagram for explaining an operation of expressing a sequence according to a drag distance, according to an embodiment of the present invention.
6 is a flowchart of a method of displaying a plurality of images when a fling gesture is input according to an embodiment of the present invention.
7 is a graph illustrating a change amount of a fling distance with time, according to an embodiment of the present invention.
8A and 8B are diagrams illustrating a display result according to an acceleration of a fling input, according to an embodiment of the present invention.
9 is a diagram for explaining a sequence cut point according to an embodiment of the present invention.
10 is a diagram for describing a relationship between a replacement threshold value and a sequence cut point according to an embodiment of the present invention.
11 is a conceptual diagram of a viewer interface application structure according to the first embodiment of the present invention.
12 is a conceptual diagram of a viewer interface application structure according to the second embodiment.

Embodiments will be described herein with reference to the accompanying drawings, however, the principles disclosed herein may be embodied in many different forms and should not be construed as limited to the embodiments set forth herein. In the detailed description of the invention, detailed descriptions of well-known features and techniques may be omitted to avoid unnecessarily obscuring the features of the embodiments.

In the present specification, a sequence image is a plurality of images, and each image means an image in which a display order is continuously designated. When a plurality of images constituting a sequence are sequentially displayed on the same screen (screen) based on a display order, a change in an object included in each image may be recognized as a movement of the object.

As used herein, animating means making an object included in an image appear to move or appear alive.

In the present specification, such an animation may be an animation that gives a sense of space in particular. Here, to give a sense of space means to visually give a sense of three-dimensional space or a sense of spatial depth (depth) to two-dimensional images. Animating that gives a sense of space can provide a dynamic content appreciation experience centered on depth.

Meanwhile, in the present embodiments, displaying a plurality of images is different from playing a plurality of video frames as videos in a video player. Displaying a plurality of images means animating such that a change in an object included in each image is expressed as a single operation through replacement of images of a screen (screen).

Displaying a plurality of images does not necessarily mean that motions of objects are seamlessly and smoothly connected as in a video. Specifically, in the present specification, displaying a plurality of images may be performed by replacing images on a screen (screen) at a speed that allows the human eye to recognize it as one natural motion. Normally, the speed at which the human eye perceives as one natural motion represents the replacement of 8 images per second. On the other hand, video rotates video frames at a faster rate than 8 frames per second. Typically, video frames are replaced at a rate of 24 or more frames per second (eg, 30 frames per second, 60 frames per second), so that the motion of an object is reproduced as a seamless connection.

When a user's touch gesture is input, the image display method or apparatus or viewer according to embodiments of the present invention continuously generates sequence images so that changes in objects included in a plurality of images are expressed as movement of the objects, that is, animated. and the speed of the object's movement can be interactively adjusted in response to the user's touch gesture. This is a new concept that is different from conventional video players. For example, conventional video players do not dynamically play video in response to a fling gesture. On the other hand, the image display method or apparatus or the viewer according to embodiments of the present invention may dynamically display a sequence image in response to a fling gesture. In particular, in the case of a conventional video player, it is possible to play only at a frame rate that is specified and selectable by the user, but the method, device, and viewer may have various image replacement speeds according to the fling gesture, and further interactive playback speed It is also possible to reproduce a sequence image with

Description of embodiments

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

1 is a conceptual block diagram of a viewer device including a viewer application interface according to an embodiment of the present invention.

In embodiments, the viewer device 100 is configured to perform a method of displaying a plurality of images. In certain embodiments, viewer device 100 includes a viewer application interface that includes a process for displaying a plurality of images.

The viewer device 100 may be implemented as, for example, a smart phone, a cellular phone, smart glasses, a smart watch, a wearable device, a digital camera, a tablet, a notebook computer, a laptop computer, a mobile device, etc., but is not limited thereto.

1 , the viewer device 100 includes a memory 110 , a control unit 130 , an interface unit 140 , a communication module 150 , one or more input/output devices for inputting/outputting information, and a power supply unit (180) and the like. The input/output device may include a touch unit 171 , a guitar input unit 172 , a display unit 173 , a proximity sensor 174 , a photographing unit 175 , a speaker 176 , a microphone 177 , and the like. have. The components of the viewer device 100 shown in FIG. 1 are not essential, and may be implemented as a viewer device having more or fewer components.

The viewer device 100 according to embodiments may be entirely hardware, entirely software, or may have aspects that are partly hardware and partly software. For example, the viewer application may collectively refer to hardware equipped with data processing capability and operating software for driving the same. As used herein, terms such as “unit”, “module,” “device,” or “system” are intended to refer to a combination of hardware and software run by the hardware. For example, the hardware may be a computing device capable of processing data including a central processing unit (CPU), a graphic processing unit (GPU), or another processor. In addition, software may refer to a running process, an object, an executable file, a thread of execution, a program, and the like.

Memory 110 is a flash memory type (flash memory type), hard disk type (hard disk type), multimedia card micro type (multimedia card micro type), card type memory (for example, SD or XD memory, etc.), RAM, (Random Access Memory, RAM), Static Random Access Memory (SRAM), Read-Only Memory (ROM), Electrically Erasable Programmable Read-Only Memory (EEPROM), Programmable Read-Only Memory (PROM), Magnetic Memory, Magnetic It may include at least one type of storage medium among a disk and an optical disk. The viewer device 100 may operate in relation to a web storage that performs a storage function of the memory 110 on the Internet. For example, the memory 110 may further include a distributed storage (storage) accessed through, for example, a wired/wireless communication network.

The memory 110 may store instructions for processing and control of the control unit 130 . The memory 110 may store or temporarily store content-related data (eg, multimedia content, preview content, etc.) received from the outside and input/output data.

The control unit 130 controls the overall operation of the viewer device 100 . For example, it performs related control and processing for data communication, user input detection, image display, and the like. The control unit 130 may include a multimedia module for playing multimedia. The multimedia module may be implemented in the control unit 130 or may be implemented separately from the control unit 130 .

In one embodiment, the control unit 130 may include a viewer interface application. The viewer interface application includes steps of a method of displaying an image based on a scroll gesture. In certain embodiments, the viewer interface application may include an image show unit 131 and a scroll input processing unit 133 . The operation(s) of the control unit 130 or the step(s) of the viewer interface application will be described in more detail with reference to FIGS. 2 to 9 below.

The interface unit 140 serves as a passage with an external device electrically connected to the viewer device 100 . The interface unit 140 transmits/receives data to/from an external device, or receives power from an external power source and transmits the data to at least some of the internal components of the viewer device 100 . Also, the interface unit 140 connects input/output related devices to the memory 110 and/or the control unit 130 . The interface unit 140 may be implemented as a combination of software and/or hardware according to a connected internal configuration (eg, devices related to input/output). For example, the interface unit 140 includes an interface for communication, an interface for touch and other input units, an interface for audio, and the like, and the audio interface includes an audio circuit (eg, converts data into an electrical signal and transmits the electrical signal) , headset jack, etc.), wherein the interface for touch and other input units includes one or more input controllers that transmit electrical signals corresponding to user inputs obtained through one or more input units to the control unit 130 . can do. In certain embodiments, the interface unit 140 may include a wired/wireless headset port, an external charger port, a wired/wireless data port, a memory card port, a port for connecting a device equipped with an identification module, an audio I/ It may include an input/output (O) port, a video input/output (I/O) port, an earphone port, and the like as hardware.

The communication module 150 is configured to transmit/receive electromagnetic waves. The communication module 150 converts an electrical signal into an electromagnetic wave or converts an electromagnetic wave into an electrical signal. The viewer device 100 allows a user to make a call or use an application that provides a service on the Internet through the communication module 150 . The communication module 150 may communicate with other devices through various communication methods, including wired communication, wireless communication, 3G, 4G, wired Internet, or wireless Internet, in which objects and objects can network. For example, the communication module 150 is configured to communicate via the Internet, such as the World Wide Web (WWW), a network such as an intranet and/or a cellular telephone network, a wireless network, and wireless communication. The wireless communication is, for example, GSM (Global System for Mobile Network, CDMA (code division multiple access, W-CDMA) (Wideband Code Division Multiple Access), TDMA (Time Division Multiple Access), Bluetooth, Wi-Fi, Wi - wireless communication standards using communication protocols for world Interoperability for Microwave Access (MAX), and/or e-mail, instant messaging, short text service (SMS), etc., but are not limited thereto.

The touch unit 171 and other input units 172 are components configured to receive a command related to a user's input.

The touch unit 171 is configured to convert a physical change, such as a pressure applied to a specific part of the display unit 173 or a capacitance occurring in a specific part of the display unit 173, into an electrical signal. A physical change occurring in a specific area is caused by a pointing object. The pointing object may include a part of the user's body or a tool. Also, the touch unit 171 may be configured to detect a touched position, an area, and/or a pressure upon touch.

The touch unit 171 may include, but is not limited to, a pressure sensitive sensor or an electrostatic sensor. The guitar input unit 172 includes, for example, a button, a dial, a switch, a stick, and the like.

The display unit 173 is a component that displays information stored and/or processed in the viewer device 100 . In certain embodiments, the display unit 173 may display a UI or GUI related to selecting content, or display at least one of a continuous image.

The display unit 173 may include a liquid crystal display (LCD), a thin film transistor-liquid crystal display (TFT LCD), an organic light-emitting diode (OLED), and a flexible display (Flexible Display). display) and at least one of a three-dimensional display (3D display), but is not limited thereto. In certain embodiments, there may be a plurality of display units 173 , and for example, the screens of the plurality of display units 173 may be disposed on one surface or may be respectively disposed on another surface.

Although the touch unit 171 and the display unit 173 are separated in FIG. 1 , in many embodiments, the touch unit 171 and the display unit 173 are implemented as one component to perform input reception and information output. can be For example, the touch unit 171 and the display unit 173 may be implemented as a touch screen in which the touch panel forms a layer structure with the screen.

The proximity sensor 174 may be disposed in an inner region of the viewer device 100 covered by the touch screen or in the vicinity of the touch screen. The proximity sensor 174 refers to a sensor that detects the presence or absence of an object approaching a predetermined detection surface or an object existing in the vicinity without mechanical contact using the force of an electromagnetic field or infrared rays.

Examples of the proximity sensor 174 include a transmission type photoelectric sensor, a direct reflection type photoelectric sensor, a mirror reflection type photoelectric sensor, a high frequency oscillation type proximity sensor, a capacitive proximity sensor, a magnetic type proximity sensor, and an infrared proximity sensor. When the touch screen is of a capacitive type, it is configured to detect the proximity of the pointer by a change in an electric field according to the proximity of the pointer. In this case, the touch screen (touch sensor) may be classified as a proximity sensor.

In this specification, “touch (or touch gesture)” is not limited to “contact touch”, which refers to an action in which a pointer is actually touched on a screen. “Touch” refers to “proximity touch”, which refers to the act of making the contact touch and/or the pointer on the touch screen close without being touched so that the pointer is recognized as being located on the touch screen. include The position at which a proximity touch is performed by the pointer on the touch screen may mean a position at which the pointer vertically corresponds to the touch screen when the pointer is touched in proximity.

In this specification, the touch distance represents a distance that a touch point on the screen moves due to a touch. The touch distance is expressed as a movement distance of a virtual touch object corresponding to the touch point, and includes a distance actually moved by the touch point between the pointer and the screen and a distance that the touch point virtual moves due to the touch.

The proximity sensor 174 detects a proximity touch and a proximity touch pattern (eg, proximity touch distance, proximity touch direction, proximity touch speed, proximity touch time, proximity touch location, proximity touch movement state, etc.). The detected proximity touch operation and the detection result of the proximity touch pattern are transmitted to the control unit 130 . In addition, information corresponding to the detection result may be output on the touch screen.

The photographing unit 175 is a component that acquires image data of the object by photographing the object, and may be, for example, various photographing devices including an image sensor, a camera, a video camera, and the like.

The speaker 176 converts the electrical signal into sound waves having a frequency in the audible region. Data processed by the control unit 130 or data stored in advance in the memory 110 are converted into electrical signals through the interface unit 140 and input to the speaker 176, and finally sound waves are output. The microphone 177 converts sound waves into electrical signals. A speaker 176 and a microphone 177 may be used for a phone call when the viewer device 100 is configured to perform a phone application.

The power supply unit 180 receives external power and internal power under the control of the control unit 130 to supply power required for operation of each component. The power supply unit 180 may include, for example, a battery, a connection port, a power supply control unit, and/or a charge monitoring unit. The connection port may be configured as an example of the interface unit 140 to which an external charger that supplies power for charging the battery is electrically connected.

Hereinafter, for clarity of explanation, the present invention will be described in more detail based on embodiments using the viewer device 100 implemented as a smart phone including a touch screen. However, it will be apparent to those skilled in the art that the above embodiments are merely exemplary, and the present invention is not limited thereto.

As described above, the viewer device 100 includes a viewer interface application, and is configured to perform step(s) of a method for displaying a plurality of images, included in the viewer interface application. For example, at least some of the steps of the method of displaying a plurality of images may be implemented as a viewer interface application.

2 is a flowchart of a method of displaying a plurality of images, according to an embodiment of the present invention.

Displaying the plurality of images in FIG. 2 indicates that the plurality of images are continuously displayed. The plurality of images may be part or all of an image set.

The image set is a set of images in which a display order (index) is assigned to each image included. wherein the set of images includes a sequence of images, wherein the sequence of images of the set of images, when displayed in sequence, is configured to represent part or all of an action, a context, a scene, a story. .

An image set includes an image, or a combination of images and text. In embodiments, the image set may be a set of base images that give an animation effect. That is, the image set includes a plurality of images configured to represent, ie, animated, an action of an object or a change in the background when the individual images are replaced and displayed on a screen in rapid succession.

In one embodiment, the individual images of the image sets may be animated to give a sense of space when displayed on a screen by continuously replacing them. That is, when the individual images of the image set are continuously replaced and displayed on the screen, it is possible to give the effect of allowing the user to appreciate the dynamic content centered on the depth.

In an embodiment, the image set may include service content such as webtoons, web novels, digital books, and the like.

In addition, the image set is content different from the above-described service content, and may include, for example, an image set for expressing advertisements, previews, synopsis, and the like of service content. In particular, the image set can constitute a webtoon or a preview of the webtoon.

Referring to FIG. 2 , the method includes: displaying a first image ( S201 ). The viewer interface application may include loading one or more images included in the image set.

Here, one individual image may constitute one screen (screen) image displayed on the screen.

In one embodiment, the viewer interface application displays the image of the image data to fill the entire screen (screen) area provided by the application. That is, an image displayed to fill the entire screen area provided by the viewer interface application may be a screen image. Here, in order to fill the entire screen area, the basic display size of the image may correspond to the size of the screen area.

In some embodiments, the viewer interface application may receive a user input for adjusting a sense of space or a sense of 3D depth of the screen image. The input for adjusting the sense of space or depth may be zoom-in or zoom-out.

In step S201, the viewer interface application may include displaying a single image on the screen at a time for one or more images arranged on the image arrangement axis.

In some embodiments, the method may include: loading at least one image prior to display.

3 is a conceptual diagram of an operation of displaying an image in a viewer interface application according to an embodiment of the present invention.

Referring to FIG. 3 , the viewer interface application may load and display images arranged on an image arrangement axis. The arrangement order on the image arrangement axis corresponds to the display order assigned to each image in the image set. By arranging each of a plurality of images of the image set in which the display order is specified, respectively, on the image arrangement axis, the display order can be expressed as a position on the arrangement axis. When the viewer interface application obtains specific position or direction information about the image arrangement axis, an image having a specific order or an image having an arbitrary order in the corresponding direction may be displayed as a screen image. A direction corresponding to a designated display order on the image arrangement axis may be referred to as a forward direction, and a direction opposite to the direction may be referred to as a reverse direction.

The operation of arranging the image on the image arrangement axis may be performed by a viewer interface application or may be performed in advance by an external device (eg, a platform server (not shown)). The viewer interface application may receive an image and position information on an image arrangement axis associated with the image from the outside.

In some embodiments, the image alignment axis may be an axis non-parallel to the screen plane. For example, the image arrangement axis may be an axis perpendicular to the screen plane (the z-axis of FIG. 3 ) as shown in FIG. 3 . In some other embodiments, the image arrangement axis may be any axis on the screen plane. Meanwhile, in other embodiments, the above-described image arrangement may be implemented by loading an image previously stored on the viewer device 100 and/or received from the outside into a viewer interface application. In one embodiment, the image loaded may be a single image. In another embodiment, the loaded image may be a plurality of images. This will be described in more detail with reference to FIGS. 8 and 9 below.

In one embodiment, the viewer interface application One axis can also be set as the scroll axis. The scroll axis may be an axis parallel to the screen (eg, the x-axis in FIG. 3 ) or an axis perpendicular to the screen (eg, the y-axis in FIG. 3 ).

In addition, the viewer interface application indicates that the first direction of the scroll axis (eg, the y-axis of the screen) (eg, the positive direction of the y-axis in FIG. 3 ) corresponds to the first direction of the image arrangement axis, and the second direction ( For example, the negative (negative) direction of the y-axis of FIG. 3 may be set to correspond to the second direction of the scroll axis.

Referring back to FIG. 2 , the method includes: receiving a scroll gesture input ( S210 ). In an embodiment, step S210 may include detecting the user's touch gesture as a scroll gesture. The scroll gesture is a touch gesture that initiates image replacement. For example, a scroll gesture is an input that causes an image having an order different from the display index of the image displayed on the screen to be displayed on the screen.

In one embodiment, the scroll gesture may be a gesture having one or more axial components on the screen. Here, the scroll gesture includes a component on the scroll axis set as one axis of the screen plane. In certain embodiments, the scroll gesture may include a drag gesture, a fling gesture, and combinations thereof. Actions related to the drag gesture and the fling gesture will be described in more detail with reference to FIGS. 4 to 10 below.

The method may include: acquiring the touch characteristic of the scroll gesture (S230). When a scroll gesture is input (eg, to the viewer device 100) in step S210, the viewer interface application may calculate a touch characteristic of the scroll gesture based on the input scroll gesture.

In an embodiment, the step S230 may include: detecting a characteristic on a preset scroll axis in the scroll gesture. The characteristics of the scroll axis may include, for example, a touch direction on a screen axis, a touch speed, a touch distance, a touch coordinate, a change amount of a touch distance from a specific time point (eg, an image replacement time), and the like.

The viewer interface application includes detecting a touch characteristic of a scroll gesture and acquiring a touch direction on a preset scroll axis (S230).

The viewer interface application may determine the type of scroll gesture based on: touch speed, touch acceleration, and/or touch distance, and the like. As described above, the scroll gesture may include a drag gesture, a fling gesture, and a combination thereof. The fling gesture is a gesture released after a touch. The fling gesture has a relatively higher touch acceleration than other touch gestures (eg, drag gesture) due to a released force. In certain embodiments, the viewer interface application may determine whether the type of scroll gesture is a fling gesture or a drag gesture based on touch acceleration.

Meanwhile, as described above, the viewer interface application may calculate: a touch speed, a touch acceleration, and/or a touch distance, a change amount of a touch distance from a specific time point (eg, an image replacement time), and the like.

The touch distance represents a distance moved by the touch point by the touch gesture. In certain embodiments, the touch distance (eg, drag distance) of the scroll gesture may be a distance on the scroll axis. In some embodiments, the touch distance may be expressed based on a pixel of the screen. For example, the touch distance may have the number of pixels as a unit, and in this case, the drag distance may be expressed as the number of pixels on the y-axis (y-axis of FIG. 3 ).

For example, in the case of a drag gesture, the distance between the initial touch point and the last touch point may be detected as the drag distance. Also, the viewer interface application may include calculating a drag distance change from a previous image replacement time point.

Also, the viewer interface application may include calculating the fling acceleration from the fling gesture. The viewer interface application may also calculate a fling speed and/or a fling distance based on the fling acceleration. The viewer interface application may calculate the fling distance change from the previous image replacement time.

The method includes: determining ( S240 ) a direction of replacement based on the touch characteristic of the scroll gesture. The replacement progress direction refers to which direction of the image arrangement axis based on the screen image should be replaced and displayed with a new screen image. In an embodiment, the first direction of the image arrangement axis may correspond to a forward direction of the image set, and the second direction of the image arrangement axis may be set to correspond to a reverse direction of the image set. When the replacement progressing direction is the first direction (that is, when it is the first replacement proceeding direction), an arbitrary image arranged in the forward direction in the screen image is displayed on the screen.

In an embodiment, the step S240 may include: converting a touch direction on the scroll axis to a direction of an image arrangement axis. When the touch direction on the scroll axis is detected in step S230, the viewer interface application detects the direction component of the scroll axis in the direction of the scroll gesture, and determines whether the detected direction is the first direction or the second direction of the scroll axis. It may include converting the touch direction to the direction of the image arrangement axis (S240).

Referring back to the example above, when a scroll gesture in the positive direction of the y-axis (y-axis in FIG. 3) is input, the viewer interface application detects a touch gesture on the scroll axis and the corresponding touch direction. The direction of the image arrangement axis corresponding to the detected touch direction is determined. The determined direction of the image arrangement axis is determined as the replacement progress direction of the image set. In the above example, the image set replacement proceeding direction (the replacement proceeding direction in the z-axis, which is the image arrangement axis) may be determined as the forward direction (downward direction in the z-axis of FIG. 3 ). On the other hand, when the scroll gesture has only the x-axis direction component (that is, the y-axis direction component is not detected), the replacement progress direction may not be determined.

As such, the viewer interface application may convert a touch direction along an axis different from the scroll axis to the direction of the scroll axis.

Hereinafter, for clarity of explanation, the present invention will be described in more detail based on embodiments in which the scroll axis is set as the y-axis of the screen and the positive direction of the y-axis is set as the forward direction of the image set. In the embodiments set as described above, it is assumed that the scroll gesture has only a component on the y-axis.

The method may include: when the replacement progress direction is determined, replacing the screen image with another image ( S250 ). For example, the viewer interface application may include disabling an existing displayed image and displaying a new image. The new image may be any one of images arranged along the rotation direction based on the scroll gesture.

In an embodiment, the step ( S250 ) may include: replacing the screen image based on the touch characteristic (eg, the amount of change in the touch distance) of the scroll gesture. In certain embodiments, image replacement may be performed based on a change amount of a touch distance of a scroll gesture and a replacement threshold value. This will be described in more detail with reference to the following description of the fling gesture and FIG. 8 .

In some embodiments, the other image to be replaced may be an image adjacent to the display image. For example, images may be adjacent in the arrangement order in the image set. In some other embodiments, the other image to be replaced may be an image arranged farther than the adjacent image with respect to the display image. That is, the viewer interface application may skip the adjacent image in the display image and display another image.

Additionally, the method includes: when a scroll gesture maintaining the same replacement progress direction is continuously input, the viewer interface application sequentially displays a plurality of images arranged along the corresponding replacement progress direction by continuously replacing the plurality of images You may. For example, when a drag gesture or a fling gesture is input, it may be detected that a scroll gesture in which the replacement proceeding direction is maintained in the same direction is continuously input. Then, a plurality of images as part of an image set may be displayed as a dynamic sequence when they are displayed on the screen by being replaced quickly.

In the above examples, when a scroll input in the y-axis direction of FIG. 2 (eg, the vertical direction of the viewer device 100) is received, the viewer interface application may replace consecutive images arranged in the forward direction of the image set. . When a scroll input causes a plurality of images to be quickly replaced, the plurality of images may be implemented as a sequence.

Most of the conventional image viewers that display web pages or webtoons move a screen area as much as a user drags a scroll object (eg, a scroll bar or a scroll touch point).

On the other hand, the viewer interface application: replaces the screen image based on the type of scroll gesture, touch speed, touch acceleration (eg, based on release intensity), touch distance, touch distance variation from a specific point of time (eg, image replacement time), etc. and display a plurality of images continuously to express a sequence dynamically and interactively.

Then, the user can receive the same effect as playing a video having a plurality of images as frames according to the scroll gesture. In this way, the same set of images may be expressed in various and different sequences according to the scroll gesture.

4 is a flowchart of a method of displaying a plurality of images when a drag gesture is input, according to an embodiment of the present invention.

Referring to FIG. 4 , the method includes: receiving a drag gesture input ( S410 ). Then, a drag gesture is detected as a scroll gesture (S410).

The method includes: acquiring one or more touch characteristics from the input drag gesture (S430). In step S430, a touch characteristic on the y-axis of the drag gesture is obtained.

Also, the step S430 includes: when a drag gesture is input, calculating a touch distance change amount (eg, a drag distance change amount) from a previous image replacement time. This distance change amount may be calculated as a distance change amount on the y-axis.

The method includes: determining a replacement progress direction based on the touch characteristic of the drag gesture ( S440 ). In an embodiment, the step S440 detects a touch direction (ie, a drag direction) of the drag gesture, and when the detected touch direction includes a direction component on the scroll axis, based on the detected direction component on the scroll axis to determine the replacement progress direction.

The viewer interface application may analyze an on-screen axis component included in the drag gesture. Then, when the drag gesture has a component on the scroll axis (eg, a y-axis component), the replacement progress direction may be determined based on the component on the scroll axis of the drag gesture. Since the replacement proceeding direction in step S440 is similar to the determination of the replacement proceeding direction in step S240, a detailed description will be omitted.

The method includes: replacing the screen image with another image based on the touch characteristic of the drag gesture (S450).

In one embodiment, the step (S450) may include: determining whether to replace the image based on the touch distance change amount and a preset replacement threshold value; and when it is determined whether or not to replace the image, replacing another image disposed in the progress replacement direction with a screen image and displaying the screen image.

The replacement threshold value may be set based on a specification of the viewer apparatus 100 for image processing. In addition, the replacement threshold value may be set to a value that allows the image to be recognized as one operation when continuously replacing the image.

The viewer interface application calculates the touch distance (eg, drag distance) change amount (eg, y-axis pixel distance after replacement) from the previous image replacement time point, and if the calculated touch distance change amount is greater than or equal to a preset replacement threshold value, the screen image is changed to another It may include displaying a new screen image by replacing it with an image.

In one embodiment, the replacement threshold is based on the length of the entire playback section of the image set, the length of the scene in the image set, and/or the statistics of the user's fling gesture, which causes the user to move to the desired scroll point upon a single fling input. It can also be set to a value. This will be described in more detail with reference to the following description of the fling gesture and FIG. 8 .

In certain embodiments, the viewer interface application may calculate a scrolling section corresponding to the entire section of the image set. The viewer interface application may also associate an image for each point of the scroll section. The viewer interface application may determine the position in the scroll section of the current screen image. The viewer interface application may determine that the position of the screen image is changed when the touch distance (eg, drag distance) change is greater than or equal to the preset replacement threshold value based on the touch distance (eg, drag distance) change amount and the preset replacement threshold value.

If the drag gesture continues to be input even after image replacement is performed in step S450, steps S410 to S450 are repeated. The viewer interface application is configured to replace more images in proportion to the touch distance (eg, drag distance). On the other hand, when the input of the drag gesture is stopped (that is, when the drag distance variation is 0), image replacement is stopped, and playback of the sequence is terminated (unless a new scroll gesture is input).

5 is a diagram for explaining an operation of expressing a sequence according to a drag distance, according to an embodiment of the present invention.

The viewer interface application displays a single image on the screen. 5, the viewer device 100 is a touch point (P _a) when receiving a drag gesture to the touch point (P _b) to the touch point (P _c) via at viewer interface application existing display The image may be made to disappear and the image arranged in the forward direction may be newly displayed.

The playback speed of the sequence corresponds to the image replacement speed. The image replacement speed is determined based on the drag speed of the drag gesture and the replacement threshold. Here, the drag speed represents the amount of change in the drag distance per time. In certain embodiments, the drag distance change represents a distance change from a previous replacement time point.

When the drag speed is almost constant while the replacement value is maintained, the image replacement speed is almost the same, so that the sequence represented by the drag has almost the same playback speed.

If the drag speed is too slow, the time for the touch distance change to exceed the replacement threshold increases, resulting in a slow image replacement speed. On the other hand, under the same drag speed, the smaller the replacement threshold, the faster the screen image is replaced, while the larger the replacement threshold, the slower the screen image is replaced.

The viewer interface application stops replacing the image when the amount of change in the touch distance does not exceed the threshold within a predetermined time. The viewer interface application stops replacing the image when the drag gesture is no longer detected and the touch distance change becomes zero, or when the drag gesture reaches the second half and the touch distance change becomes substantially zero. The predetermined time represents a sufficient time to determine whether the drag gesture is completed.

If the viewer device 100 displaying the rightmost image of FIG. 5 receives a drag gesture from the touch point _{P c} to the touch point P _{a through the touch point P b , the person of FIG.} The image is rotated in the reverse direction so that the object is enlarged.

6 is a flowchart of a method of displaying a plurality of images when a fling gesture is input according to an embodiment of the present invention.

Referring to FIG. 6 , the method includes: receiving a fling gesture as a scroll gesture ( S610 ). Then, a fling gesture is detected as a scroll gesture (S610).

The method includes: acquiring one or more touch characteristics from the input drag gesture (S630). In step S630, a touch characteristic on the y-axis of the fling gesture is obtained.

In an embodiment, the step S630 may include: detecting a touch direction. In the fling gesture, the touch direction indicates a release direction or a direction in which the virtual touch object moves on the screen by the release. The viewer interface application may include determining the direction of the fling gesture by detecting a direction on the y-axis in the release direction component.

In addition, the step S630 may include calculating touch acceleration (ie, fling acceleration); and calculating a touch distance change amount (ie, a fling distance change amount). Similar to the touch direction of the fling gesture, the amount of change in the touch distance of the fling gesture is not limited to the distance that the real touch pointer touches in proximity or non-proximity, but indicates the distance the virtual touch object moves on the screen by release. . The acceleration of the fling gesture also represents the acceleration applied to the virtual touch object by release.

In step S630, the amount of change in the fling distance from the previous image replacement time is calculated based on the fling acceleration.

The method includes: determining a replacement direction based on the touch characteristic of the fling gesture (S640). In an embodiment, the step ( S640 ) may include determining the replacement progress direction by detecting the fling direction of the fling gesture. Since the replacement proceeding direction in step S640 is similar to the determination of the replacement proceeding direction in step S240, a detailed description will be omitted.

The method includes: replacing the screen image with another image based on the touch characteristic of the fling gesture (S650). In one embodiment, the step (S650) may include: determining whether to replace the image based on the fling distance change amount and a preset replacement threshold value; and when it is determined whether or not to replace the image, replacing another image disposed in the progress replacement direction with a screen image and displaying the screen image.

In the case of the fling gesture, similarly to the case of the drag gesture (S450), the viewer interface application may replace the screen image based on the amount of change in the fling distance from the previous image replacement time and a preset replacement threshold value. The viewer interface application calculates the amount of change in the fling distance (eg, the amount of change in the y-axis coordinate after replacement) generated from the previous image replacement time, and if the calculated drag distance change is greater than or equal to a preset replacement threshold, the display image may be replaced.

As such, the viewer interface application may replace more images in proportion to the strength of the fling gesture or the fling acceleration.

7 is a graph illustrating an amount of change in a fling distance over time according to an embodiment of the present invention.

To describe the graph of FIG. 7 , when the user releases a point object (eg, a finger) at a point on the viewer device 100 to input a fling gesture, a virtual touch starting from a touch point (ie, a release point) Let's assume an object. The moving distance of the touch object represents the touch distance. When the release force is applied to the touch object, the touch distance is infinitely extended by a single fling gesture unless a force in the opposite direction is applied to the release force. Then, the image replacement may continue indefinitely.

The viewer interface application may include reducing the fling acceleration after the single fling gesture to prevent image replacement from continuing indefinitely by the single fling gesture. In certain embodiments, the viewer interface application may set a friction factor on the screen. When the fling acceleration is decelerated as a friction factor, the graph of FIG. 7 may be obtained.

When the friction factor is constant, as the fling acceleration increases, the total touch distance (eg, fling distance) increases, so that the number of images replaced by one fling gesture increases. That is, as the fling acceleration increases, the sequence period increases.

8A and 8B are diagrams illustrating a display result according to an acceleration of a fling input, according to an embodiment of the present invention.

8A and 8B , a fling gesture having a touch acceleration greater than a drag may be input to the viewer interface application. The viewer interface application may convert the scroll axis direction representing the forward direction of the image set into an alternate progress direction based on the fling gesture having the positive y-axis direction.

The fling gesture of FIG. 8A and the fling gesture of FIG. 8B are released at the same initial touch point Pa. The arrow on the right side of the screen indicates the strength of the fling gesture. The fling gesture of FIG. 8B has a stronger release strength than the fling gesture of FIG. 8A, and the fling gesture of FIG. 8B has a higher acceleration than the fling gesture of FIG. 8A. Then, the sequence displayed by the fling gesture of FIG. 8B has a longer section than the sequence displayed by the fling gesture of FIG. 8A .

Also, as the fling acceleration increases, the progress speed (eg, fling speed) of the touch object increases and the image replacement speed of the sequence increases. That is, the time when the amount of change in the touch distance from the previous image replacement time exceeds the replacement threshold value is shortened.

As described above, the playback speed of the sequence corresponds to the image replacement speed. The image replacement speed is determined based on the fling speed of the fling gesture and the replacement threshold. When the fling speed is high while the replacement threshold is maintained, the time for the amount of fling distance change to exceed the replacement threshold is reduced, resulting in a fast image replacement speed.

As shown in FIG. 7 , at the beginning of the fling gesture, the touch object has an initial acceleration based on the release force. When the friction factor is set, there is no external force acting on the touch object after release, and only a constant friction force is applied.

In the acceleration section (that is, the section from the start of the fling to the point where the acceleration becomes 0) in which the fling acceleration with the same direction as the release force exists, the image replacement speed gradually increases, and as time progresses during the acceleration section, the user You may feel the playback speed gradually increase.

On the other hand, touch acceleration gradually decreases due to friction factors, and even the direction of acceleration is changed and decelerated. Then, in the deceleration section (that is, from the point where the acceleration becomes 0 to the point where the touch object stops) where there is a fling acceleration having a direction opposite to the release force, the image replacement speed gradually decreases, and the user can see that the playback speed of the sequence gradually decreases. You may feel a decrease.

In this way, the viewer interface application may interactively display the same plurality of images for each user by expressing them as sequences having different sections and/or playback speeds according to a user's input.

On the other hand, in the assumption of FIG. 7, since the progress speed of the touch object decreases over time after the single fling gesture, as shown in FIG. There may be a section that almost disappears. Depending on the friction factor, this section has the form of a long tail section. When the long tail section is entered, the duration from the previous image replacement time to the next image replacement time becomes longer. Then, the user may feel that the sequence does not play smoothly and smoothly and is cut off in the middle. For example, it may feel like a page drop is occurring.

If the playback of the sequence is terminated when the fling distance change is 0, the sequence playback due to the fling gesture is recognized as if the page drop phenomenon continues in the long tail section, as in the case where the drag gesture is inputted. makes the sequence uncomfortable.

9 is a diagram for explaining a sequence cut point according to an embodiment of the present invention.

Normally, the human eye recognizes as a natural motion when 8 images per second are continuously replaced. As the number of replacement images per second increases, the linking operation becomes smoother. In general, the human eye recognizes that the start and end of a motion are seamlessly connected when images are replaced at 24 or more frames per second, for example, 30 images per second or 60 images per second.

For example, if more than 30 images are replaced per second, image replacement means that one or more images are replaced in 33ms. Therefore, the image replacement must be done within 33 ms, so that the motion is recognized as a smooth connection without interruption.

Referring to FIG. 9 , in order to prevent the page drop phenomenon from occurring in the long tail section, the viewer interface application reduces the progress speed of the touch object after the fling gesture is input and replaces the image due to the corresponding gesture when the sequence cut point is reached. It may include the step of terminating.

In an embodiment, the viewer interface application may include calculating a time interval from the time of replacing the previous image to the time of replacing the next image based on the friction factor and/or the progress speed of the touch object. To this end, the viewer interface application may include determining a point at which the calculated time interval becomes equal to or greater than a threshold time interval as a sequence cut point.

The viewer interface application includes: calculating a time until the amount of change in the fling distance becomes greater than or equal to the replacement threshold based on the previous image replacement time; The method may include stopping the image replacement when the calculated time is equal to or greater than the threshold time interval. When the calculated time is greater than or equal to the threshold time interval, it indicates that the fling rate has reached the determined sequence cut point. When the viewer interface application reaches the determined sequence cut point, it stops swapping images (unless a new scroll gesture is input). In certain embodiments, calculating the time from the previous image replacement time until the touch distance change amount becomes equal to or greater than the replacement threshold value may be performed when the fling acceleration becomes 0 (ie, when the fling speed decelerates). may be

The threshold time interval may be set based on a preset minimum time of the image replacement interval time and/or a replacement threshold value. The minimum time of the image replacement interval time represents the time that allows the middle of the sequence to be played back without interruption. If the image replacement time interval is longer than the minimum time, the sequence is played back smoothly.

In certain embodiments, the minimum time of the image replacement interval time may be set to a reciprocal number of FPS desired by the user. For example, when the FPS desired by the user is 30, the image replacement interval time may be 33 ms.

The viewer interface application calculates the moving speed of the touch object per 1 ms, calculates the moving distance change of the touch object from the previous image replacement time, and/or the touch object's moving distance change from the previous image replacement time is greater than or equal to the replacement threshold and determining whether the time interval during which .

Once the sequence cut point is established, the sequence ends at different rates depending on the initial acceleration (ie release strength) of the fling gesture. If the pixel change value is large, image replacement is finished while giving the effect of decelerating relatively quickly. When the pixel change value at the sequence cut point is small, image replacement is finished while giving a relatively slow deceleration effect.

On the other hand, under the same fling gesture, the larger the replacement threshold value, the shorter the sequence has a shorter playback period, and the lower the replacement threshold value, the longer the sequence has a longer playback period.

10 is a diagram for describing a relationship between a replacement threshold value and a sequence cut point according to an embodiment of the present invention.

Referring to FIG. 10 , as the replacement threshold is increased, the point at which the page drop phenomenon occurs, that is, the sequence cut point is quickly reached. On the other hand, the lower the replacement threshold, the slower the page drop phenomenon occurs.

Therefore, as the replacement threshold value is too large, the amount of change in touch distance required for image replacement increases and fewer images are replaced, so that the viewer interface application expresses the sequence up to the end point expected by the user. On the other hand, if the replacement threshold is too small, the viewer interface application will present the sequence beyond the end point expected by the user.

In one embodiment, the replacement threshold is based on the length of the entire playback section of the image set, the length of a scene in the image set, and/or statistics of the user's fling gesture to the desired scroll point upon a single fling input. It can also be set to a value that makes it move. The statistics of the fling gesture may include, for example, a touch speed of a drag gesture, a touch acceleration of a fling gesture, an image set section expressed as a sequence, and a relationship therebetween.

In addition, the viewer interface application may receive a scroll gesture that exceeds the number of replaceable images per second. Depending on the characteristics of the scroll gesture (eg, the touch speed of the drag gesture, or the touch acceleration of the fling gesture), a large amount of change in the touch distance from the previous image replacement time may occur, and then the number of images to be replaced is tens or hundreds of images per second. could be A large amount of images per second may be processed according to the specifications of the viewer device 100 .

When the viewer interface application receives a scroll gesture that exceeds the number of replaceable images per second, the viewer interface application may skip some of the images to be replaced according to the scroll gesture. The viewer interface application may replace an image that is not adjacent to the screen image with the next screen image.

The viewer interface application may calculate a touch distance change amount (ie, a touch distance change range) corresponding to the number of replaceable images per second. When the viewer interface application receives a scroll gesture that exceeds the number of replaceable images per second, the viewer interface application may calculate a change in touch distance according to the scroll gesture, and calculate a change in touch distance that exceeds a range of change in touch distance. The viewer interface application may calculate the number of images to be skipped based on the exceeded touch distance change amount and the replacement threshold value.

For example, the viewer device 100 may be configured to replace 60 images per second. When the replacement threshold is set to 15 pixels, the viewer device 100 can process a touch distance change of 900 pixels per second. The viewer interface application may calculate the excess distance variation (eg, 50 pixels) when a scroll gesture that causes a touch distance variation greater than 900 pixels (eg, 950 pixels) is input. The viewer interface application may determine an excess distance variation (eg, 50 pixels) divided by the replacement threshold as the number of images to skip. In some embodiments, the viewer interface application may determine the divided integer as the number of images to skip. Then, in the above example, three images may be skipped.

In certain embodiments, the viewer interface application calculates the number of images to be skipped, selects an image according to the number arbitrarily from a plurality of images that should have been replaced according to a scroll gesture, and skips the selected image to display the next screen image. It can also be displayed.

In addition, the viewer interface application may represent a sequence by replacing a part of an image set including audio with a plurality of images and displaying it. The viewer interface application may also output an audio sound contained in a set of images while representing a sequence by replacing the images.

When the image set includes a plurality of audios, each of the plurality of audios is respectively associated with a plurality of sections of the image set. For example, when three audios are included as shown in Table 1 below, when the first sequence section of the image set is expressed, the sound of the first audio is output, and when the second sequence section is expressed, the sound of the second audio is output and, when the third sequence section is expressed, the sound of the third audio may be output. In certain embodiments an image set has multiple scenes, each audio may be associated with a respective scene.

[Table 1] first audio; second audio; 3rd Audio

A scroll position corresponding to the screen image may change abruptly according to the scroll gesture. The viewer interface application may determine the image set included in the image set section to associate the audio with the image set. For example, the first interval may include the 100th image from the first image of the image set, and the second interval may include the 101st image of the image set. Then, the first image set including the 100th image from the first image is associated with the first audio. A second set of images including the 101st image is associated with the second audio.

The viewer interface application may include changing the audio outputting sound when the image set section to which the screen image is associated is changed into audio associated with the new image set section.

In the case of a drag gesture, the new image set section may be a section adjacent to the current image set section, which is expressed as a sequence and outputs sound.

In the case of the fling gesture, the new image set section may be a section not adjacent to the current image set section, for example, a section following the adjacent section.

In certain embodiments, the viewer interface application may include: calculating a fling velocity over time (eg, of FIG. 7 ) based on a fling acceleration of the fling gesture, a friction factor; determining an image replacement completion point based on the fling speed; outputting an audio sound of an image set section including a screen image at the time of release; and outputting an audio sound associated with an image set section including an image replacement completion point. The screen image section at the time of release is the initial section. When the image set section including the image replacement completion point jumps one or more sections from the current image set section, the output is changed from the audio sound of the current section to the audio sound of the last section.

In one embodiment, as described above, the image replacement completion point due to the fling gesture may be a point in the image set section corresponding to the sequence cut point at which the image replacement time interval is equal to or greater than the threshold time interval based on the fling speed. .

In the above example, when the 100th image is displayed as a screen image and the 101st image is displayed as a screen image, the output audio is changed from the first audio to the second audio. Alternatively, when the screen image is changed from the 300th image to the 50th image, the output audio is changed from the third audio to the first audio. In other specific embodiments, instead of determining the image replacement completion point based on the fling speed, if one or more sections after the section of the image set at the time of release are jumped within a predetermined amount of time, the audio of the jumped section is passed and the next section It is also possible to output the audio of the section.

In addition, the viewer interface application may include a step of applying a Cross Fade effect to change the natural sound in the process of replacing the output audio. In this case, the time at which the audio is changed may be after the time at which the 101st image is changed to the screen image.

A viewer interface application may have various implementation structures. In an embodiment, the viewer interface application may be configured to simultaneously process an operation of displaying an image and an operation of converting a scroll axis direction to an image arrangement axis direction. In another embodiment, the viewer interface application may be configured to handle the operation of displaying an image and the operation of converting the axis separately. Hereinafter, the former embodiment will be referred to as a first embodiment and the latter embodiment will be described as a second embodiment.

11 is a conceptual diagram of a viewer interface application structure according to the first embodiment of the present invention.

Referring to FIG. 11 , the viewer interface application includes creating a preset number of views. In certain embodiments, the number of views may be set based on the storage capacity of the viewer device 100 . For example, a viewer interface application may create 100 views.

The viewer interface application includes loading a plurality of images. Here, the plurality of images to be loaded are a plurality of images arranged on the image arrangement axis. Each image has a separate position on the image alignment axis.

A plurality of loaded images are assigned to a pre-created view. For example, if a plurality of images in an image set are loaded for the first time, the first image to the 100th image are loaded and each assigned to a view.

In addition, the viewer interface application may stack multiple views. In an embodiment, a plurality of images allocated to a plurality of views may correspond to an order in which they are arranged on an image arrangement axis. Then, if the order on the image arrangement axis of the images to be displayed is changed in response to the scroll gesture, the display view may be changed according to the stacking order, as described below. For example, the uppermost image is displayed first, and when a scroll input is obtained by a scroll gesture, the uppermost image disappears from the screen and the lower image is displayed.

The viewer interface application includes selecting one of the plurality of views as a display view. In general, the view to which the first image is assigned, which has the first display order in the image arrangement axis, is selected as the first display view. In another embodiment, if the user has previously already had display details for the same set of images, the view to which the last displayed image is assigned may be selected as the display view.

The viewer interface application includes displaying an image assigned to a display view on a screen. The assigned image displayed on the screen is displayed to fill the entire screen area provided by the viewer interface application, as described above. The screen area is not moved to display another area inside the display view image.

As described above, the viewer interface application includes detecting a scroll gesture on the screen and converting it into a scroll input. The scroll input includes the direction of rotation of the screen image. The viewer interface application changes the display view in the rotation progress direction based on the converted scroll input.

In an embodiment, the plurality of views may be stacked to correspond to the arrangement order of the image arrangement axis. Then, the viewer interface application selects a view to which an image to be displayed next is assigned as a display view based on the scroll input, and displays the image of the newly selected display view on the screen area.

Since the number of views is fixed, the viewer interface application of FIG. 11 may include a recycle step of maintaining views and allocating images when scrolling is input. In the example in which 100 images are loaded, when the first image disappears on the screen and the second image is displayed on the screen, the 101st image may be loaded and assigned to a view to which the disappearing and invisible image is assigned. When a scrolling input is obtained by detecting a scroll gesture in the opposite direction again, the first image is loaded and assigned to the view to which the 101st image is assigned, and is selected as the display view.

In certain embodiments, the plurality of views may include a view to which screen images are assigned and a buffer view. The viewer interface application may include assigning the disappeared image to the buffer view for which the scroll input was obtained. For example, in FIG. 11 , the viewer interface application may have the second arranged view as the initial display view, and the first arranged view as the buffer view. When the view to which the second image is assigned is changed to the display view, the first ?? The image is allocated to the buffer view. The 100th view is loaded and assigned the 100th image.

According to the first embodiment, it has the advantage of achieving a relatively high FPS.

12 is a conceptual diagram of a viewer interface application structure according to the second embodiment.

Since the second embodiment of FIG. 12 shares the same application operation with the first embodiment of FIG. 11 except for structural differences, the differences will be mainly described.

Referring to FIG. 12 , the viewer interface application may include an image show unit 131 for image display and a scroll input processing unit 133 for obtaining a position on an image arrangement axis of a screen image.

The image show unit 131 may include one or more views. In some embodiments, the image show unit 131 may include a single view as shown in FIG. 12 . In some other embodiments, the image show unit 131 may include multiple views. However, it may include, for example, five or fewer (eg, three) views, much less than the views of FIG. 11 .

The viewer interface application may load (eg, into memory 110 ) one or more images. Here, the one or more images to be loaded are one or more images arranged on the image arrangement axis. Each image has a separate position on the image alignment axis.

The image show unit 131 includes assigning the loaded image to one or more views and displaying it on a screen.

The scroll input processing unit 133 performs an operation of processing the scroll input and converting it into a position on the image arrangement axis.

The scroll input processing unit 133 includes determining a direction on the image arrangement axis based on the touch direction of the scroll gesture. Also, the scroll input processing unit 133 includes the step of determining the replacement proceeding direction based on the determined direction on the image arrangement axis.

The scroll input processing unit 133 may determine whether to replace the image based on one or more of the detected touch distance change amount and the replacement threshold value. The scroll input processing unit 133 determines to replace the screen image when the touch distance variation is equal to or greater than the replacement threshold, and loads the next to-be-displayed image into the memory. The scroll input processing unit 133 may calculate the number of images to be replaced according to a single scroll input.

The scroll input processing unit 133 is configured to obtain the position on the image arrangement axis of the screen image as the scroll position. When the screen image is replaced, the scroll input processing unit 133 may acquire the position on the image arrangement axis of the newly replaced image as the new scroll position. Then, the scroll position of the screen image is moved due to the image replacement.

In an embodiment, when the viewer interface application includes a single view, the scroll input processing unit 133 loads the next to-be-displayed image into the memory in response to the touch distance change amount being equal to or greater than the replacement threshold value. The image to be displayed next may be an image having the next order of the rotation progress direction on the image arrangement axis. In certain implementations, when skipping a portion of a set of images as described above, the next sequence of images based on this skip is loaded.

Then, the image show unit 131 assigns the next loaded image to a single view. The newly assigned image is displayed in a single view.

In another embodiment, when the viewer interface application includes multiple views, the scroll input processing unit 133 loads the next to-be-displayed image into the memory in response to the touch distance change amount being equal to or greater than the replacement threshold value.

The scroll input processing unit 133 may move the position of the image arrangement axis corresponding to the screen image based on the scroll input. In certain embodiments, the position movement of the image arrangement axis may be an entire position movement based on a single scroll input.

The scroll input processing unit 133 may load an image corresponding to one or more positions between movement sections according to the scroll input.

The image show unit 131 allocates a plurality of images loaded into a memory to a plurality of views, respectively. Images assigned to multiple views are sequentially displayed.

For example, suppose a viewer interface application contains three views, and the next three images are replaced by a single scroll input. The scroll input processing unit 133 loads all three replacement images into the memory by a single scroll input. The image show unit 131 allocates three replacement images to three views, respectively. The three newly allocated images are sequentially displayed.

In some embodiments, an allocation criterion based on an order on an image arrangement axis may be set for the plurality of views. For example, the image show unit 131 assigns the image having the most forward order to the first view, the image having the intermediate order to the second view, and the image having the most reverse order to the third view. can also be assigned.

Also, when the number of replaced total images according to the total touch distance change amount is equal to or greater than the number of the plurality of views, the scroll input processing unit 133 loads a portion of the entire images into the memory. Then, a portion of the entire image is allocated to each of the plurality of views.

In some embodiments, the scroll input processing unit 133 is configured with a single thread (eg, a main thread), and may move the scroll position of the screen image according to the detected touch distance change amount. For example, the scroll input processing unit 133 receives the callback function value upon detecting the scroll gesture, loads a new image, and moves the scroll position of the screen image to the position of the new image. That is, the screen image is replaced by moving the scroll position in synchronization with the scroll input. Some of the above embodiments have advantages in terms of data processing and capacity management.

In some other embodiments, the scroll input processing unit 133 is configured with a plurality of threads (eg, a main thread and a secondary thread). The amount of change in the touch distance of the scroll gesture is detected by one thread, and whether or not the image is replaced is determined. The scroll position corresponding to the current screen image is updated and kept by another thread. The one thread queries another thread for the scroll position of the screen image N times (eg, 30 or more times) for a certain period of time (eg, 1 second) and returns the current scroll position. The scroll input processing unit 133 loads the image corresponding to the returned scroll position into the memory. The image show unit 131 displays the image as a new screen image. That is, the execution of the scroll input and the movement of the scroll position are asynchronous, and the screen image is replaced in response to the position confirmation. The other some embodiments have an advantage in that when an error in detection of a scroll gesture occurs, a problem in which a sudden jump is made or is not replaced is reduced.

According to the second embodiment, since the number of views to which images are allocated is very small, a problem of memory leak does not occur.

Additionally, the viewer interface application may include: receiving an input to select content including a plurality of images. The plurality of images may be part or all of an image set. The image set may be a set of images and a combination of text and/or audio. In one embodiment, the content may include some or all of the image as a series of images that make up the image set.

In one embodiment, the viewer interface application comprises: accessing a content platform server (not shown); and displaying a UI (or GUI) for inducing selection of specific content. When the content selection input is received, the viewer interface application of the viewer device 100 requests and receives one or more images included in the selected content from the platform server, and loads them into the image memory.

In certain embodiments, the selected specific content may be a service content, such as a webtoon or a webtoon preview in particular. In other specific embodiments, the selected specific content may be other content related to the aforementioned service content. For example, it may include advertisement, preview, synopsis, etc. of service content, or advertisement, preview, synopsis, etc. of a series of service content.

According to these embodiments, it is possible to provide a new content providing experience different from the existing motiontoon.

That is, for example, in a motiontoon, a special effect (eg, animation, sound effect, vibration, etc.) is applied only to some cuts in a webtoon viewer of a static image listing method such as listing a plurality of cut images, whereas the present invention is implemented According to examples, it is possible to provide a dynamic content appreciation experience centered on depth in response to a user input rather than a static and flat image arrangement.

More specifically, in terms of the motion point, the special effect is automatically applied to the image position specified (input) when the motiontoon reaches a specific image position or when a specific image is fully exposed. In contrast, in the embodiments of the present invention, when a user input such as a scroll input is detected at an arbitrary position on the image arrangement axis, a subset of images is displayed as much as the corresponding input value.

In addition, in terms of user input processing, in Motiontoon, a past image is displayed only as a still image rather than a dynamic one, and it is impossible to adjust the progress speed of a special effect (eg, acceleration/deceleration processing of animation). On the other hand, in embodiments of the present invention, since an image is displayed by processing all user input, a rewind operation is possible and acceleration and deceleration processing are possible.

In addition, even from the aspect of technical implementation, in the case of Motiontoon, images are arranged in a plane (eg, along the y-axis of FIG. 3 ) so that they are automatically scrolled from a specific position to a specified position, so the image at the start of the special effect When is located at the bottom of the screen, it is played based on the top of the screen and the screen of Motiontoon looks broken, whereas in the case of embodiments of the present invention, the images are not arranged flatly, but each on the image arrangement axis (eg, the Z axis in FIG. 3). Images are arranged as if stacked and replaced in response to user input, but since one individual image is composed of one screen image and displayed on the screen, the image on the screen is broken and invisible.

A method of displaying a plurality of images through a viewer interface application according to the embodiments described above, a viewer device performing the same, and an operation by the viewer interface application are at least partially implemented as a computer program and a computer-readable record may be recorded on the medium.

The computer may be any device that may be incorporated or may be a computing device such as a personal computer, desktop computer, laptop computer, notebook, smart phone, or the like. A computer is a device having one or more alternative and special purpose processors, memory, storage, and networking components (either wireless or wired). The computer may run, for example, an operating system compatible with Microsoft's Windows, an operating system such as Apple OS X or iOS, a Linux distribution, or Google's Android OS.

The computer program is composed of a set of instructions that can be executed by the above-described computer, and the name may be different depending on the type of the computer. For example, when the form of the computer is a smart phone, the computer program may be referred to as an app.

A program for implementing an operation by a viewer interface application, a viewer device, and a method for displaying an image according to embodiments is recorded, and a computer-readable recording medium is any type of record in which data that can be read by a computer is stored. includes the device. Examples of the computer-readable recording medium include ROM, RAM, CD-ROM, magnetic tape, floppy disk, optical data storage device, and the like. In addition, the computer-readable recording medium may be distributed in a network-connected computer system, and the computer-readable code may be stored and executed in a distributed manner. In addition, functional programs, codes, and code fragments for implementing the present embodiment may be easily understood by those skilled in the art to which the present embodiment belongs.

Although the present invention as described above has been described with reference to the embodiments shown in the drawings, it will be understood that these are merely exemplary and that various modifications and variations of the embodiments are possible therefrom by those of ordinary skill in the art. However, such modifications should be considered to be within the technical protection scope of the present invention. Accordingly, the true technical protection scope of the present invention should be determined by the technical spirit of the appended claims.

Claims (31)

A viewer device comprising a memory and a processor, wherein the processor is configured to execute instructions stored in the memory, the instructions comprising:
In an image set consisting of a plurality of individual images arranged on an image arrangement axis and each having a specified display order, replacing the individual images displayed in response to a scroll input such that objects contained in the individual images are animated in response to the scroll input. step; including,
A viewer device, characterized in that one individual image constitutes one screen image displayed on the screen.
According to claim 1,
The step of replacing the individual image comprises:
displaying a first image from the image set consisting of the plurality of individual images on a screen; and
and making a first image displayed on the screen disappear in response to the scroll input and displaying a second image on the screen based on the display order.
The method of claim 1 , wherein replacing the individual images comprises:
receiving a scroll input on a screen;
acquiring a touch characteristic on a specific axis on a plane of the screen in the scroll input;
determining a direction in which a screen image is replaced based on a touch characteristic of the scroll input; and
and replacing the first image with a second image as a screen image based on the touch characteristic of the scroll input,
The specific axis of the plane of the screen is one axis preset to correspond to the scroll axis.
According to claim 1,
The scroll input is a viewer device, characterized in that it includes a drag gesture or a fling gesture.
The method according to claim 3, wherein the step of obtaining a touch characteristic on the scroll axis in the scroll input comprises:
and acquiring at least one of a touch direction, a touch speed, a touch acceleration, and a touch distance change amount on the scroll axis.
The method according to claim 3, wherein the step of obtaining a touch characteristic on the scroll axis in the scroll input comprises:
When the scroll input is a fling gesture, calculating a fling distance variation based on a fling acceleration detected at a release point and a preset friction factor,
The friction factor causes the fling acceleration to decelerate.
The method of claim 3, wherein the determining of the replacement proceeding direction comprises:
converting a direction on the scroll axis to a direction of an image arrangement axis; and
and determining the direction of the transformed image arrangement axis as the rotation progress direction.
8. The method of claim 7,
The specific axis of the screen plane corresponding to the scroll axis is a horizontal axis or a vertical axis of the screen,
The viewer device, characterized in that the image arrangement axis is an axis that is not parallel to the plane of the screen.
The method of claim 1 , wherein replacing the individual images comprises:
comparing the change amount of the touch distance of the scroll input with a preset replacement threshold value; and
When the amount of change in the touch distance is greater than or equal to a replacement threshold, replacing the screen image with another image arranged in a direction of replacement;
The touch distance change amount is a touch distance change amount from a previous image replacement time.
The method of claim 9, wherein the command comprises:
If the scroll input is a drag gesture, the viewer apparatus further comprising the step of stopping the image replacement when the amount of change in the touch distance decreases to less than a threshold value.
The method of claim 9, wherein the command comprises:
when the scroll input is a fling gesture, calculating a time from a previous image replacement time to a point in time when the touch distance change amount becomes equal to or greater than a replacement threshold value before the touch distance change amount becomes 0; and
The viewer device further comprising the step of stopping the image replacement when the calculated time is equal to or greater than a preset threshold time interval.
According to claim 1,
The image set is partitioned into a plurality of sections according to a display order, wherein the plurality of sections are respectively associated with a plurality of audio,
The command is:
determining the audio of the section to which the screen image belongs as audio to be outputted; and
The viewer device, further configured to perform the step of changing the audio to be output sound when the section to which the screen image belongs is changed according to the replacement of the image.
13. The method of claim 12, wherein the processor comprises:
When the scroll input is a fling gesture, the viewer device characterized in that the audio of the section including the image replacement completion point is changed to the audio to be output.
According to claim 1,
The image set is a viewer device, characterized in that the webtoon or a preview of the webtoon.
The method of claim 1 , wherein the instruction comprises:
creating a plurality of views;
loading a plurality of images included in the image set;
before displaying the first individual image, each assigning the loaded plurality of images to the created plurality of views;
selecting a display view from among the plurality of views;
and when a scroll input is received, selecting another view as the display view so that the display image is replaced.
According to claim 1,
an image show unit and a scroll input processing unit;
The scroll input processing unit,
moving the position of the image arrangement axis corresponding to the screen image based on the scroll input;
Load the image corresponding to the moved position,
The image show unit,
create a single view,
assign the loaded image to said single view;
and display on the screen an image assigned to the single view.
According to claim 1,
an image show unit and a scroll input processing unit;
The scroll input processing unit,
moving the position of the image arrangement axis corresponding to the screen image based on the scroll input;
Loading images corresponding to a plurality of positions between the moving sections,
The image show unit,
create multiple views,
Allocating the loaded image to each of the created multiple views,
and display the images assigned to the plurality of views sequentially on the screen.
A method of displaying an image, performed by a processor, comprising:
an image set consisting of a plurality of individual images arranged on an image arrangement axis and each in a display order, arranged on an image arrangement axis in response to a scroll input such that objects contained in each individual image are animated in response to the scroll input replacing the individual images that have been
A method, characterized in that one individual image constitutes one screen image displayed on the screen.
19. The method of claim 18,
The step of replacing the individual image comprises:
displaying a first image from the image set consisting of the plurality of individual images on a screen; and
and make the first image displayed on the screen disappear in response to the scroll input and display a second image on the screen based on the display order.
19. The method of claim 18, wherein replacing the individual images comprises:
receiving a scroll input on a screen;
acquiring a touch characteristic on a specific axis on a plane of the screen in the scroll input;
determining a replacement progress direction based on a touch characteristic of the scroll input; and
Comprising the step of replacing the first image with a second image as a screen image based on the touch characteristic of the scroll input,
The specific axis of the plane of the screen is an axis preset to correspond to the scroll axis.
19. The method of claim 18,
The method of claim 1, wherein the scroll input includes a drag gesture or a fling gesture.
The method of claim 20, wherein the step of obtaining a touch characteristic on the scroll axis in the scroll input comprises:
and acquiring at least one of a touch direction, a touch speed, a touch acceleration, and a touch distance change amount on the scroll axis.
The method of claim 20, wherein the step of obtaining a touch characteristic on the scroll axis in the scroll input comprises:
When the scroll input is a fling gesture, calculating a fling distance variation based on a fling acceleration detected at a release point and a preset friction factor,
wherein the friction factor causes the fling acceleration to decelerate.
The method of claim 20, wherein the determining of the replacement proceeding direction comprises:
converting a direction on the scroll axis to a direction of an image arrangement axis; and
and determining the direction of the replacement proceeding based on the direction of the transformed image arrangement axis.
19. The method of claim 18, wherein replacing the individual images comprises:
comparing the change amount of the touch distance of the scroll input with a preset replacement threshold value; and
When the amount of change in the touch distance is greater than or equal to a replacement threshold, replacing the screen image with another image arranged in a direction of replacement;
The touch distance change amount is a touch distance change amount from a previous image replacement time.
26. The method of claim 25, wherein the method comprises:
When the scroll input is a drag gesture, the method further comprising the step of stopping the image replacement when the amount of change in the touch distance decreases to less than a threshold value.
26. The method of claim 25, wherein the method comprises:
when the scroll input is a fling gesture, calculating a time from a previous image replacement time to a point in time when the touch distance change amount becomes greater than or equal to a replacement threshold value before the touch distance change amount becomes 0; and
The method further comprising the step of stopping the image replacement when the calculated time is equal to or greater than a preset threshold time interval.
19. The method of claim 18,
The image set is partitioned into a plurality of sections according to a display order, wherein the plurality of sections are respectively associated with a plurality of audio,
determining the audio of the section to which the screen image belongs as audio to be outputted; and
The method further comprising the step of changing the audio to be output sound when the section to which the screen image belongs is changed according to the replacement of the image.
29. The method of claim 28,
The step of changing the audio to which the sound is output when the section to which the screen image belongs is changed according to the replacement of the image,
When the scroll input is a fling gesture, the audio of the section including the image replacement completion point is changed to the audio to be outputted.
19. The method of claim 18,
The image set comprises a webtoon or a preview of the webtoon.
31. A computer readable recording medium readable by a computer and storing program instructions operable by the computer, wherein when the program instructions are executed by a processor of the computer, the processor is configured according to any one of claims 18 to 30 A computer-readable recording medium for performing the method according to one of the preceding claims.

Images