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

Abstract

Embodiments of the present invention relate to a method for displaying an image to animate an object of an image based on the characteristics of a scroll gesture, and a viewer device for performing the same. In the method and viewer device according to the embodiments of the present invention, it is possible to replace an image according to a user control, such as a screen touch/drag gesture/fling gesture.

Description

스크롤 제스처에 기초하여 이미지를 디스플레이하는 방법 및 이를 수행하는 뷰어 장치 {Method for displaying images based on scroll gesture and viewer device for performing the same}[Method for displaying images based on scroll gesture and viewer device for performing the same}

실시예들은 이미지를 디스플레이하는 기술에 관한 것이다. 보다 구체적으로, 실시예들은 스크롤 제스처의 특성에 기초하여 이미지의 객체를 애니메이팅하도록 디스플레이하는 방법 및 이를 수행하는 뷰어 장치에 관한 것이다.Embodiments relate to technology for displaying an image. More specifically, 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 performing the same.

콘텐츠를 시각적으로 제공하는 디스플레이 장치는 컴퓨터(예를 들어, 랩탑 컴퓨터, 데스크탑 컴퓨터, 또는 노트북 등) 또는 모바일 장치(예를 들어, 셀룰러 폰, 스마트 폰, 또는 태블릿 PC 등)에 집적되거나 연결된다. A display device for visually providing content is integrated or connected to a computer (eg, a laptop computer, a desktop computer, or a notebook, etc.) or a mobile device (eg, a cellular phone, a smart phone, or a tablet PC, etc.).

컴퓨터의 경우 마우스, 키보드 등과 같은 별도의 입력기기를 통해 사용자와 상호작용할 수 있다. 이에 비해, 모바일 장치는 휴대성을 고려하여 상대적으로 화면의 크기가 작고 입력 방식의 제한이 있다. In the case of a computer, the user can interact with the user through a separate input device such as a mouse or keyboard. On the other hand, the mobile device has a relatively small screen size in consideration of portability and has limitations in the input method.

최근 고성능 하드웨어의 소형화 기술이 발전하고 통신 기술이 발전함에 따라 모바일 장치를 통해 대용량의 멀티미디어 콘텐츠를 서비스하는 다양한 애플리케이션들이 공급되고 있다. Recently, as technology for miniaturization of high-performance hardware has been developed and communication technology has been developed, various applications that service large-capacity multimedia contents through mobile devices are being supplied.

웹툰을 제공하는 종래의 애플리케이션은 다수의 컷 이미지를 포함한 회차 전체 구간의 이미지 데이터를 이용한다. 전체 구간의 단일 이미지를 활성화하고 스크린 사이즈에 대응하는 스크롤 구간을 디스플레이한다. 그리고 사용자가 다른 영역을 보기 위해 스크롤 구간을 이동시킴으로써 스크린에 디스플레이되는 이미지의 영역이 변경된다. 통상적으로 모바일 장치에서 웹툰을 감상하기 위해 디스플레이 영역을 이동시키는 입력은 중간을 스킵하여 특정 지점으로 점프하는 입력과 중간 부분이 디스플레이되는 드래그 입력을 포함한다. 특정 지점으로의 점프를 위한 입력은 상기 특정 지점에 대응한 스크롤 위치를 선택하는 제스처로 구현되며, 현재 스크린 이미지에 대응하는 지점으로부터 특정 지점의 중간에 걸친 이미지는 스윕하므로, 웹툰 이미지가 불연속적으로 제공된다. 한편, 드래그 입력의 경우, 드래그 속도가 일정하면 디스플레이 영역이 일정하게 이동할 뿐이다. 그리고 웹툰의 경우 드래그 도중에 하나의 동작으로 표현되도록 디스플레이되지 않는다. A conventional application that provides webtoons uses image data of an entire section including a plurality of cut images. A single image of the entire section is activated and a scroll section corresponding to the screen size is displayed. In addition, the area of the image displayed on the screen is changed by the user moving 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 jumping to a specific point by skipping the middle and a drag input for displaying the middle part. The input for jumping to a specific point is implemented as a gesture of selecting the scroll position corresponding to the specific point, and since the image in the middle of the specific point from the point corresponding to the current screen image is swept, the webtoon image is discontinuously 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. Also, in the case of webtoons, they are not displayed to be expressed as a single motion during dragging.

한편, 비디오를 재생하는 종래의 애플리케이션(예컨대, 비디오 플레이어)은 재생 기능을 통해 비디오 스트림 내 프레임을 재생하도록 구성된다. 상기 종래의 애플리케이션은 스크린 상에 디스플레이될 프레임을 재생 시간 측면에서 구현하였기 때문에 재생 구간, 재생 기능 등을 포함한 별도의 메뉴 툴을 요구한다. 메뉴 툴 상에서 스크롤 위치를 이동시키면 이미지 내 객체가 애니메이팅하지 않는 이미지를 불연속적으로 디스플레이하면서 재생 시점의 변화를 사용자에게 제공한다. 그리고, 스크린 상에 특정 프레임이 디스플레이되는 시점에서 다른 시점으로 점프하는 사용자 입력이 입력되면, 스크린 프레임에서 특정 프레임 사이의 중간 프레임은 스킵하고 특정 프레임으로부터 디스플레이하고 재생을 지속하도록 구성된다. 그리고 미리 설정된 재생 배율(예컨대, x0.5, x1,x1.5, x2 등)에 대한 입력에 반응하여 프레임 재생 배율을 조절할 수도 있다. Meanwhile, a conventional application (eg, a video player) that plays 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 a playback time, a separate menu tool including a playback section and a playback function is required. When the scroll position is moved on the menu tool, the object in the image displays an image that is not animating discontinuously and provides the user with a change in the playback time point. In addition, when a user input for jumping from a point in time when a specific frame is displayed on the screen to another point in time is input, an intermediate frame between the specific frames in the screen frame is skipped, and the display is continued from the specific frame. In addition, the frame reproduction magnification may be adjusted in response to an input to a preset reproduction magnification (eg, x0.5, x1, x1.5, x2, etc.).

다른 한편, 웹툰에 다양한 효과를 부여하는 시도가 있어 왔다. 예컨대, 소위 VR 툰은 VR 헤드셋 등의 기기를 사용하여 웹툰을 3차원적으로 감상하는 방식이다. 그러나, 이러한 VR 툰은 웹툰 감상에 별도의 기기를 요구할 뿐만 아니라 VR로 제공되는 작품 자체가 제한적이다.On the other hand, there have been attempts to give webtoons various effects. For example, the so-called VR toon is a method of viewing webtoons in three dimensions using a device such as a VR headset. However, such a VR toon not only requires a separate device for viewing webtoons, but also the work itself provided in VR is limited.

그외 웹툰의 화면을 360도 돌려서 볼 수 있도록 하거나 소위 모션툰과 같이 평면 웹툰에 움직임 효과를 주는 것이 있다. 그러나, 이러한 모션툰은 정적인 이미지 나열 방식의 웹툰 뷰어에서 일부 컷에 한하여 특수 효과(애니메이션, 효과음, 진동 등)를 적용한 것에 그치는 정도이다. There are other things that allow you to rotate the screen of a webtoon 360 degrees or give a motion effect to a flat webtoon like a so-called motion toon. However, these motion toons are limited to applying special effects (animation, sound effects, vibrations, etc.) to only some cuts in the webtoon viewer of a static image arrangement method.

이와 같이, 종래의 모바일 장치의 멀티미디어 콘텐츠 제공 애플리케이션은 사용자 입력 특히 스크롤 액션을 통해 심도 중심의 동적 컨텐츠 감상을 구현하는데는 한계가 있다.As described above, the multimedia content providing application of a conventional mobile device has a limitation in implementing a depth-oriented dynamic content appreciation through a user input, particularly a scroll action.

본 발명은, 일 측면에서, 스크롤 입력 또는 스크롤 제스처(액션)와 같은 사용자 입력의 특성에 기초하여 복수의 이미지를 인터렉티브하게 애니메이팅, 특히 공간감을 부여하여 애니메이팅하도록 디스플레이하는 뷰어 장치(또는 모바일 장치, 이하 동일), 이미지 디스플레이 방법 및 이를 기록한 컴퓨터 판독가능 기록매체 또는 이에 기록된 컴퓨터 프로그램(애플리케이션)을 제공할 수 있다. The present invention, in one aspect, interactively animating a plurality of images based on a characteristic of a user input such as a scroll input or a scroll gesture (action), in particular, a viewer device (or a mobile device) for displaying an animation by giving a sense of space. , 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 viewing depth-oriented dynamic content in response to a user input such as a scroll input or a scroll gesture (action) instead of a static or flat image listing. A recorded computer-readable recording medium or a computer program (application) recorded therein may be provided.

본 발명의 일 측면에서는, 프로세서를 포함한 뷰어 장치에 있어서, 상기 프로세서는: 이미지 배열 축 상에 배열되고 디스플레이 순서가 지정된 복수의 개별 이미지로 이루어진 이미지 세트에서, 스크롤 입력에 반응하여 개별 이미지에 포함된 객체가 애니메이팅되도록, 스크롤 입력에 반응하여 디스플레이되는 개별 이미지를 교체하는 단계;를 포함하고, 하나의 개별 이미지가 스크린 상에 디스플레이되는 하나의 스크린 이미지를 구성하는 뷰어 장치를 제공한다. In one aspect of the present invention, in a viewer device including a processor, the processor includes: In an image set consisting of a plurality of individual images arranged on an image arrangement axis and a display order is specified, the individual images are included in the individual images in response to a scroll input. Replacing individual images displayed in response to a scroll input so that the object is animated, and a viewer device comprising one individual image to be displayed on the screen is provided.

일 실시예에서, 상기 개별 이미지를 교체하는 단계는, 상기 복수의 개별 이미지로 이루어진 이미지 세트에서 제1 이미지를 스크린 상에 디스플레이하는 단계; 그리고 상기 스크롤 입력에 반응하여 상기 스크린 상에 디스플레이되는 제1 이미지를 사라지게 하고 상기 디스플레이 순서에 기초하여 제2 이미지를 상기 스크린 상에 디스플레이하는 단계를 수행하도록 구성될 수 있다. In one embodiment, the replacing of the individual images includes: displaying a first image on a screen from an image set consisting of the plurality of individual images; In addition, in response to the scroll input, the first image displayed on the screen disappears and the second image is displayed on the screen based on the display order.

일 실시예에서, 상기 개별 이미지를 교체하는 단계는, 스크린 상에 스크롤 입력을 입력 받는 단계; 상기 스크롤 입력에서 상기 스크린의 평면 상의 특정 축 상의 터치 특성을 획득하는 단계; 상기 스크롤 입력의 터치 특성에 기초하여 스크린 이미지의 교체 진행 방향을 결정하는 단계; 및 상기 스크롤 입력의 터치 특성에 기초하여 스크린 이미지로서 제1 이미지를 제2 이미지로 교체하는 단계를 수행하도록 구성되고, 상기 스크린의 평면의 특정 축은 스크롤 축에 대응하는 것으로 미리 설정된 일 축일 수 있다. In one embodiment, the replacing of the individual image includes: receiving a scroll input on the screen; Acquiring a touch characteristic on a specific axis on the plane of the screen in the scroll input; Determining a replacement direction of the screen image based on the touch characteristic of the scroll input; And replacing the first image with a second image as a screen image based on a touch characteristic of the scroll input, and a specific axis of the plane of the screen may correspond to a scroll axis and may be a preset axis.

일 실시예에서, 상기 스크롤 입력은, 드래그 제스처 또는 플링 제스처를 포함할 수 있다. In an embodiment, the scroll input may include a drag gesture or a fling gesture.

일 실시예에서, 상기 스크롤 입력에서 상기 스크롤 축 상의 터치 특성을 획득하는 단계는, 상기 스크롤 축 상의 터치 방향, 터치 속도, 터치 가속도 및 터치 거리 변화량 중 하나 이상을 획득할 수 있다. In an embodiment, in the acquiring of the touch characteristic on the scroll axis in the scroll input, at least one of a touch direction, a touch speed, a touch acceleration, and a touch distance change amount on the scroll axis may be obtained.

일 실시예에서, 상기 스크롤 입력에서 상기 스크롤 축 상의 터치 특성을 획득하는 단계는, 상기 스크롤 입력이 플링 제스처인 경우, 릴리즈 지점에서 검출되는 플링 가속도 및 미리 설정된 마찰 인자에 의해 플링 거리 변화량을 산출하는 단계를 포함하며, 상기 마찰 인자는 플링 가속도가 감속하게 수 있다. In one embodiment, the step of acquiring the touch characteristic on the scroll axis from the scroll input comprises: when the scroll input is a fling gesture, calculating a fling distance change amount based on a fling acceleration detected at a release point and a preset friction factor. And the friction factor may cause the fling acceleration to decelerate.

일 실시예에서, 상기 교체 진행 방향을 결정하는 단계는, 상기 스크롤 축 상의 방향을 이미지 배열 축의 방향으로 변환하는 단계; 및 변환된 이미지 배열 축의 방향을 교체 진행 방향으로 결정하는 단계를 포함 수 있다. In one embodiment, the determining of the direction of progression of the replacement may include converting a direction on the scroll axis to a direction of an image arrangement axis; And determining the direction of the converted image array axis as the replacement progress direction.

일 실시예에서, 상기 스크롤 축에 대응한 스크린 평면의 특정 축은 스크린의 수평 축 또는 수직 축이고, 상기 이미지 배열 축은 스크린의 평면에 평행하지 않은 축일 수 있다. In one embodiment, a 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 not parallel to the plane of the screen.

일 실시예에서, 상기 개별 이미지를 교체하는 단계는, 상기 스크롤 입력의 터치 거리 변화량과 미리 설정된 교체 임계 값을 비교하는 단계; 및 상기 터치 거리 변화량이 교체 임계 값 이상인 경우, 상기 스크린 이미지를 교체 진행 방향에 배열된 다른 이미지로 교체하는 단계를 포함하되, 상기 터치 거리 변화량은 이전 이미지 교체 시점으로부터의 터치 거리 변화량일 수 있다. In one embodiment, the replacing of the individual image includes: comparing a change amount of the touch distance of the scroll input and a preset replacement threshold value; And when the amount of change in the touch distance is greater than or equal to a replacement threshold value, replacing the screen image with another image arranged in a direction in which the replacement proceeds, wherein the amount of change in the touch distance may be an amount of change in the touch distance from a previous image replacement time point.

일 실시예에서, 상기 프로세서는, 상기 스크롤 입력이 드래그 제스처인 경우, 터치 거리 변화량이 임계치 미만으로 감소할 때 이미지 교체를 중지하는 단계를 수행하도록 더 구성될 수 있다. In an embodiment, when the scroll input is a drag gesture, the processor may be further configured to perform the step of stopping image replacement when the amount of change in the touch distance decreases below a threshold value.

일 실시예에서, 상기 프로세서는, 상기 스크롤 입력이 플링 제스처인 경우, 터치 거리 변화량이 0이 되기 전에, 이전 이미지 교체 시점으로부터 터치 거리 변화량이 교체 임계 값 이상이 될 시점까지의 시간을 산출하는 단계; 및 산출된 시간이 미리 설정된 임계 시간 간격 이상인 경우 이미지 교체를 중지하는 단계를 수행하도록 더 구성될 수 있다. In one embodiment, the processor, when the scroll input is a fling gesture, calculating a time from a previous image replacement time to a time when the touch distance change amount becomes greater than or equal to the replacement threshold value before the touch distance change amount becomes zero. ; And stopping the image replacement when the calculated time is greater than or equal to a preset threshold time interval.

일 실시예에서, 상기 이미지 세트는 디스플레이 순서에 따라 복수의 구간으로 구획되고, 상기 복수의 구간은 복수의 오디오에 각각 연관되며, 상기 프로세서는: 상기 스크린 이미지가 속한 구간의 오디오를 사운드가 출력될 오디오로 결정하는 단계; 및 이미지의 교체에 따라 스크린 이미지가 속한 구간이 변경된 경우 사운드가 출력될 오디오를 변경하는 단계를 수행하도록 더 구성될 수 있다. In one embodiment, the image set is divided into a plurality of sections according to a display order, the plurality of sections are each associated with a plurality of audios, and the processor: The audio of the section to which the screen image belongs is output to the sound. Determining with audio; And changing the audio to be output when the section to which the screen image belongs is changed according to the replacement of the image.

일 실시예에서, 상기 프로세서는: 상기 스크롤 입력이 플링 제스처인 경우, 이미지 교체 완료 지점을 포함한 구간의 오디오를 사운드가 출력될 오디오로 변경할 수 있다. In one embodiment, the processor: When the scroll input is a fling gesture, the audio of a section including an image replacement completion point may be changed to an audio to be output sound.

일 실시예에서, 상기 이미지 세트는 웹툰 또는 상기 웹툰의 미리보기를 이루는 것일 수 있다. In one embodiment, the image set may constitute a webtoon or a preview of the webtoon.

일 실시예에서, 상기 프로세서는: 복수의 뷰(view)를 생성하는 단계; 상기 이미지 세트에 포함된 복수의 이미지를 로드하는 단계; 첫번째 개별 이미지를 디스플레이 하기 전에, 로드된 복수의 이미지를 생성된 복수의 뷰에 각각 할당하는 단계; 상기 복수의 뷰 중에서 디스플레이 뷰를 선택하는 단계; 스크롤 입력이 수신되면, 디스플레이 이미지가 교체되도록 다른 뷰를 디스플레이 뷰로 선택하는 단계를 수행하도록 더 구성될 수 있다. In one embodiment, the processor comprises: creating a plurality of views; Loading a plurality of images included in the image set; Prior to displaying the first individual image, allocating the loaded plurality of images to the generated plurality of views, respectively; Selecting a display view from among the plurality of views; When the scroll input is received, it may be further configured to perform the step of selecting another view as the display view so that the display image is replaced.

일 실시예에서, 상기 뷰어 장치는 이미지 쇼 유닛 및 스크롤 입력 처리 유닛을 포함할 수 있다. 여기서, 상기 스크롤 입력 처리 유닛은, 스크롤 입력에 기초하여 스크린 이미지에 대응하는 이미지 배열 축의 위치를 이동시키고, 이동된 위치에 대응한 이미지를 로드하고, 상기 이미지 쇼 유닛은, 단일 뷰를 생성하고, 로드된 이미지를 상기 단일 뷰에 할당하고, 상기 단일 뷰에 할당된 이미지를 상기 스크린 상에 디스플레이하도록 구성될 수 있다. In one 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 array 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, It may be configured to assign a loaded image to the single view, and to display an image assigned to the single view on the screen.

일 실시예에서, 상기 뷰어 장치는 이미지 쇼 유닛 및 스크롤 입력 처리 유닛을 포함할 수 있다. 여기서, 상기 스크롤 입력 처리 유닛은, 스크롤 입력에 기초하여 스크린 이미지에 대응하는 이미지 배열 축의 위치를 이동시키고, 이동 구간 사이의 복수의 위치에 대응한 이미지를 로드하고, 상기 이미지 쇼 유닛은, 복수의 뷰를 생성하고, 로드된 이미지를 생성된 복수의 뷰에 각각 할당하고, 상기 복수의 뷰에 할당된 이미지를 순차적으로 상기 스크린 상에 디스플레이하도록 구성될 수 있다.In one 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 array axis corresponding to the screen image based on the scroll input, loads images corresponding to a plurality of positions between the moving sections, and the image show unit includes a plurality of It may be configured to generate a view, assign a loaded image to each of the generated plurality of views, and sequentially display the images assigned to the plurality of views on the screen.

본 발명의 다른 일 측면에서는, 프로세서에 의해 수행되는, 시퀀스 이미지를 디스플레이하는 방법에 있어서, 이미지 배열 축 상에 배열되고 디스플레이 순서가 지정된 복수의 개별 이미지로 이루어진 이미지 세트에서, 스크롤 입력에 반응하여 개별 이미지에 포함된 객체가 애니메이팅되도록, 스크롤 입력에 반응하여 디스플레이되는 개별 이미지를 교체하는 단계;를 포함하고, 하나의 개별 이미지가 스크린 상에 디스플레이되는 하나의 스크린 이미지를 구성하는 방법을 제공한다.In another aspect of the present invention, in a method of displaying a sequence image, performed by a processor, in an image set consisting of a plurality of individual images arranged on an image array axis and assigned a display order, individual Replacing individual images displayed in response to a scroll input so that an object included in the image is animated, and a method of configuring one screen image in which one individual image is displayed on the screen is provided.

일 실시예에서, 상기 개별 이미지를 교체하는 단계는, 스크린 상에 스크롤 입력을 입력 받는 단계; 상기 스크롤 입력에서 상기 스크린의 평면 상의 특정 축 상의 터치 특성을 획득하는 단계; 상기 스크롤 입력의 터치 특성에 기초하여 교체 진행 방향을 결정하는 단계; 및 상기 스크롤 입력의 터치 특성에 기초하여 스크린 이미지로서 제1 이미지를 제2 이미지로 교체하는 단계를 포함하되, 상기 스크린의 평면의 특정 축은 스크롤 축에 대응하는 것으로 미리 설정된 일 축일 수 있다. In one embodiment, the replacing of the individual image includes: receiving a scroll input on the screen; Acquiring a touch characteristic on a specific axis on the plane of the screen in the scroll input; Determining a replacement 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 a specific axis of the plane of the screen may correspond to a scroll axis, and may be a preset 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 at least one of a touch direction on the scroll axis, a touch speed, a touch acceleration, and a change amount of a touch distance.

일 실시예에서, 상기 스크롤 입력에서 상기 스크롤 축 상의 터치 특성을 획득하는 단계는, 상기 스크롤 입력이 플링 제스처인 경우, 릴리즈 지점에서 검출되는 플링 가속도 및 미리 설정된 마찰 인자에 의해 플링 거리 변화량을 산출하는 단계를 포함하며, 상기 마찰 인자는 플링 가속도가 감속하게 할 수 있다.In one embodiment, the step of acquiring the touch characteristic on the scroll axis from the scroll input comprises: when the scroll input is a fling gesture, calculating a fling distance change amount based on a fling acceleration detected at a release point and a preset friction factor. And the friction factor may cause the fling acceleration to decelerate.

일 실시예에서, 상기 교체 진행 방향을 결정하는 단계는, 상기 스크롤 축 상의 방향을 이미지 배열 축의 방향으로 변환하는 단계; 및 변환된 이미지 배열 축의 방향에 기초하여 교체 진행 방향을 결정하는 단계를 포함할 수 있다.In one embodiment, the determining of the direction of progression of the replacement may include converting a direction on the scroll axis to a direction of an image arrangement axis; And determining a replacement direction based on the direction of the converted image array axis.

일 실시예에서, 상기 개별 이미지를 교체하는 단계는, 상기 스크롤 입력의 터치 거리 변화량과 미리 설정된 교체 임계 값을 비교하는 단계; 및 상기 터치 거리 변화량이 교체 임계 값 이상인 경우, 상기 스크린 이미지를 교체 진행 방향에 배열된 다른 이미지로 교체하는 단계를 포함하되, 상기 터치 거리 변화량은 이전 이미지 교체 시점으로부터의 터치 거리 변화량일 수 있다.In one embodiment, the replacing of the individual image includes: comparing a change amount of the touch distance of the scroll input and a preset replacement threshold value; And when the amount of change in the touch distance is greater than or equal to a replacement threshold value, replacing the screen image with another image arranged in a direction in which the replacement proceeds, wherein the amount of change in the touch distance may be an amount of change in the touch distance from a previous image replacement point.

일 실시예에서, 상기 방법은: 상기 스크롤 입력이 드래그 제스처인 경우, 터치 거리 변화량이 임계치 미만으로 감소할 때 이미지 교체를 중지하는 단계를 더 포함할 수 있다.In one 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.

일 실시예에서, 상기 방법은: 상기 스크롤 입력이 플링 제스처인 경우, 터치 거리 변화량이 0이 되기 이전에, 이전 이미지 교체 시점으로부터 터치 거리 변화량이 교체 임계 값 이상이 될 시점까지의 시간을 산출하는 단계; 및 산출된 시간이 미리 설정된 임계 시간 간격 이상인 경우 이미지 교체를 중지하는 단계를 더 포함할 수 있다.In one embodiment, the method comprises: when the scroll input is a fling gesture, calculating a time from a previous image replacement time to a time when the touch distance change amount becomes greater than or equal to the replacement threshold value before the touch distance change amount becomes zero. step; And stopping the image replacement when the calculated time is greater than or equal to a preset threshold time interval.

일 실시예에서, 상기 이미지 세트는 디스플레이 순서에 따라 복수의 구간으로 구획되고, 상기 복수의 구간은 복수의 오디오에 각각 연관되며, 상기 방법은: 상기 스크린 이미지가 속한 구간의 오디오를 사운드가 출력될 오디오로 결정하는 단계; 및 이미지의 교체에 따라 스크린 이미지가 속한 구간이 변경된 경우 사운드가 출력될 오디오를 변경하는 단계를 더 포함할 수 있다. In one embodiment, the image set is divided into a plurality of sections according to a display order, and the plurality of sections are each associated with a plurality of audios, and the method includes: audio of a section to which the screen image belongs to a sound output. Determining with audio; And changing the audio to be output when the section to which the screen image belongs is changed according to the replacement of the image.

일 실시예에서, 상기 이미지의 교체에 따라 스크린 이미지가 속한 구간이 변경된 경우 사운드가 출력될 오디오를 변경하는 단계는, 상기 스크롤 입력이 플링 제스처인 경우, 이미지 교체 완료 지점을 포함한 구간의 오디오를 사운드가 출력될 오디오로 변경할 수 있다. In one embodiment, the step of changing the audio to be 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 sounded. You can change the audio to be output.

일 실시예에서, 상기 이미지 세트는 웹툰 또는 상기 웹툰의 미리보기를 이루는 것일 수 있다.In one 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 may interactively animate a plurality of images based on characteristics of a user input such as a scroll input or a scroll gesture (action), in particular, display a sense of space to animate. It is possible to change the image according to the user's control such as screen touch/drag gesture/fling gesture. Through this, it is possible to enjoy 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 image listing.

일 실시예에서, 상기 뷰어 장치는 스크린 상의 일 축 방향을 갖는 드래그 제스처의 입력에 반응하여 복수의 이미지를 자연스럽게 교체하여 단일 스크린에 디스플레이함으로써, 일정한 재생 속도를 갖는 시퀀스를 디스플레이할 수도 있다.In an embodiment, the viewer device may display a sequence having a constant playback speed by naturally replacing a plurality of images and displaying them on a single screen in response to an input of a drag gesture having a single axis direction on the screen.

또한, 상기 뷰어 장치는 스크린 상의 일 축 방향을 갖는 플링 제스처의 입력에 반응하여 복수의 이미지를 자연스럽게 교체하여 단일 스크린에 디스플레이하면서 처음에는 보다 빠른 속도로 이미지를 교체하고 나중에는 보다 느린 속도로 이미지를 교체함으로써, 재생 속도가 가속 및 감속하는 시퀀스를 디스플레이할 수도 있다. In addition, the viewer device naturally replaces a plurality of images in response to an input of a fling gesture having a single axis direction on the screen and displays them on a single screen. 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 an image in order to display thousands of images, for example, in such a process of replacing a plurality of images.

이와 같이 사용자의 제스처에 따라 동일한 복수의 이미지에 대해 다양한 이미지 교체 속도를 갖게 함으로써, 시퀀스 이미지를 인터렉티브하게 디스플레이할 수 있다. As described above, the sequence images can be interactively displayed by providing various image replacement speeds for the same plurality of images according to the user's gesture.

또한, 이미지가 예컨대 수천 장과 같이 많은 상황에서 이미지가 리사이클될 수 있다.Also, images can 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 configuration of the interface is simple.

또한, 스크롤 입력에 반응하여 이미지에 포함된 객체가 애니메이팅하도록 이미지가 사라지고 디스플레이됨으로써, 이미지 세트에서 비-흥미로운 구간의 이미지가 빠른 속도로 재생되어 패스되므로, 결국 사용자는 비-흥미로운 구간을 스킵하지 않아 해당 구간에 대한 최소한의 콘텐츠 정보를 감상하면서 시간 절약을 극대화할 수 있다. In addition, the image disappears and displays so that the object included in the image animates in response to the scroll input, so that the image of the non-interesting section in the image set is reproduced and passed at a high speed, so the user does not skip the non-interesting section. Therefore, it is possible to maximize time savings while enjoying the minimum content information for the corresponding section.

또한, 이미지 세트가 다수의 구간으로 구획되고 각 구간별로 오디오가 할당된 경우, 이미지 교체로 인해 디스플레이 구간이 변경되면 오디오의 사운드도 자연스럽게 변경될 수 있다. In addition, when the image set is divided into a plurality of sections and audio is allocated for each section, when the display section is changed due to image replacement, the sound of the audio may be naturally changed.

본 발명의 효과들은 이상에서 언급한 효과들로 제한되지 않으며, 언급되지 않은 또 다른 효과들은 청구범위의 기재로부터 당해 기술 분야의 통상의 기술자에게 명확하게 이해될 수 있을 것이다.The effects of the present invention are not limited to the above-mentioned effects, and other effects not mentioned will be clearly understood by those skilled in the art from the description of the claims.

본 발명 또는 종래 기술의 실시예의 기술적 해결책을 보다 명확하게 설명하기 위해, 실시예에 대한 설명에서 필요한 도면이 아래에서 간단히 소개된다. 아래의 도면들은 본 명세서의 실시예를 설명하기 위한 목적일 뿐 한정의 목적이 아니라는 것으로 이해되어야 한다. 또한, 설명의 명료성을 위해 아래의 도면들에서 과장, 생략 등 다양한 변형이 적용된 일부 요소들이 도시될 수 있다.
도 1은, 본 발명의 일 실시예에 따른, 뷰어 애플리케이션 인터페이스를 포함한 모바일 장치의 개념적인 블록 구성도이다.
도 2는, 본 발명의 일 실시예에 따른, 복수의 이미지를 디스플레이하는 방법의 흐름도이다.
도 3은, 본 발명의 일 실시예에 따른, 뷰어 인터페이스 애플리케이션에서 이미지가 디스플레이되는 동작의 개념도이다.
도 4는, 본 발명의 일 실시예에 따른, 드래그 제스처가 입력될 경우 복수의 이미지를 디스플레이하는 방법의 흐름도이다.
도 5는, 본 발명의 일 실시예에 따른, 드래그 거리에 따라 시퀀스를 표현하는 동작을 설명하기 위한 도면이다.
도 6은, 본 발명의 일 실시예에 따른, 플링 제스처가 입력될 경우 복수의 이미지를 디스플레이하는 방법의 흐름도이다.
도 7은, 본 발명의 일 실시예에 따른, 시간에 따른 플링 거리 변화량을 도시한 그래프이다.
도 8a 및 도 8b는, 본 발명의 일 실시예에 따른, 플링 입력의 가속도에 따른 디스플레이 결과를 도시한 도면이다.
도 9는, 본 발명의 일 실시예에 따른, 시퀀스 컷 지점을 설명하기 위한 도면이다.
도 10은, 본 발명의 일 실시예에 따른, 교체 임계 값과 시퀀스 컷 지점 간의 관계를 설명하기 위한 도면이다.
도 11은, 본 발명의 제1 실시예에 따른, 뷰어 인터페이스 애플리케이션 구조의 개념도이다.
도 12는, 제2 실시예에 따른, 뷰어 인터페이스 애플리케이션 구조의 개념도이다.In order to more clearly describe the technical solutions of the embodiments of the present invention or the prior art, the drawings necessary in the description of the embodiments are briefly introduced below. It should be understood that the following drawings are for the purpose of describing 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 are 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 in which an image is displayed 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 describing 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 showing a change in fling distance over 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 illustrating 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 the structure of a viewer interface application according to the first embodiment of the present invention.
12 is a conceptual diagram of a structure of a viewer interface application according to a second embodiment.

실시예들은 여기에 첨부된 도면들을 참조하여 설명될 것이다 그러나, 여기에 개시된 원리들은 많은 상이한 형태로 구현될 수도 있으며 여기에서 기재된 실시예로 제한되어 생각되지 않아야 한다. 발명의 상세한 설명에서, 잘 알려진 특징 및 기술에 대한 상세한 설명이 실시예의 특징을 불필요하게 불명확하게 하는 것을 피하기 위해 생략될 수도 있다.Embodiments will be described with reference to the accompanying drawings herein, however, the principles disclosed herein may be implemented in many different forms and should not be considered limited to the embodiments described 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 refers to an image in which a display order is consecutively designated. When a plurality of images constituting a sequence are sequentially displayed on the same screen (screen) based on the display order, a change in an object included in each image may be recognized as a movement of the object.

본 명세서에서 애니메이팅이란 이미지에 포함된 객체가 움직이도록 보이는 것 또는 살아있는 것처럼 보이도록 하는 것을 의미한다.In the present specification, animating means making an object included in an image appear to move or appear to be alive.

본 명세서에서 이러한 애니메이팅은 특히 공간감을 부여하는 애니메이팅일 수 있다. 여기서 공간감을 부여한다는 것은 2차원의 이미지들에서 시각적으로 3차원적인 공간의 느낌 또는 공간적 깊이감(심도)을 부여하는 것을 의미한다. 공간감을 부여하는 애니메이팅을 통해 심도 중심의 동적 컨텐츠 감상 경험을 제공할 수 있다.In this specification, such animating may in particular be animating that gives a sense of space. Here, giving a sense of space means giving a visually three-dimensional sense of space or a sense of spatial depth (depth) in two-dimensional images. Through animating that gives a sense of space, it is possible to provide a depth-oriented, dynamic content viewing experience.

한편, 본 실시예들에서 복수의 이미지를 디스플레이하는 것은 비디오 플레이어에서 다수의 비디오 프레임을 비디오로 재생하는 것과 다르다. 복수의 이미지를 디스플레이하는 것은 스크린(화면)의 이미지들의 교체를 통해 각 이미지에 포함된 객체의 변화가 하나의 동작으로 표현되는 등과 같은 애니메이팅을 의미한다. On the other hand, in the present embodiments, displaying a plurality of images is different from playing back a plurality of video frames as video in a video player. Displaying a plurality of images refers to animating such as a change in an object included in each image as a single motion through replacement of the images on the screen (screen).

복수의 이미지를 디스플레이하는 것은 비디오와 같이 반드시 객체의 동작이 끊김없이 부드럽게 연결되는 것을 의미하는 것은 아니다. 구체적으로, 본 명세서에서 복수의 이미지를 디스플레이하는 것은 통상 사람의 눈이 하나의 자연스러운 동작으로 인식하게 하는 속도로 스크린(화면)의 이미지를 교체하면 된다. 통상 사람의 눈이 하나의 자연스러운 동작으로 인식하게 하는 속도는 통상적으로 초당 8장의 이미지가 교체되는 것을 나타낸다. 반면, 비디오는 초당 8장 보다는 더 빠른 속도로 비디오 프레임을 교체한다. 통상적으로 비디오는 초당 24장 이상의 속도(예컨대, 초당 30장, 초당 60장)로 비디오 프레임이 교체되어 객체의 동작을 끊김이 없이 부드럽게 연결되는 것으로 재생한다. Displaying a plurality of images does not necessarily mean that motions of an object are seamlessly connected, like a video. Specifically, to display a plurality of images in the present specification, images on the screen (screen) may be replaced at a rate that allows the human eye to recognize as one natural motion. Normally, the speed at which the human eye perceives as one natural motion represents typically 8 images being replaced per second. On the other hand, video swaps video frames at a faster rate than 8 frames per second. In general, video frames are replaced at a rate of 24 or more per second (eg, 30 frames per second, 60 frames per second), so that the motion of an object is played back smoothly without interruption.

본 발명의 실시예들에 따른 이미지를 디스플레이 방법 또는 장치 또는 뷰어는 사용자의 터치 제스처가 입력되면, 복수의 이미지에 포함된 객체의 변화가 객체의 움직임으로 표현되도록 즉, 애니메이팅되도록 시퀀스 이미지를 연속으로 디스플레이하며, 사용자의 터치 제스처에 반응하여 객체의 움직임의 속도를 인터렉티브하게 조절할 수 있다. 이는 종래의 비디오 플레이어와 구분되는 새로운 개념이다. 예컨대, 종래의 비디오 플레이어는 플링 제스처에 반응하여 동적으로 비디오를 재생하지 못한다. 반면, 본 발명의 실시예들에 따른 이미지를 디스플레이 방법 또는 장치 또는 뷰어는 플링 제스처에 반응하여 동적으로 시퀀스 이미지를 디스플레이할 수 있다. 특히, 종래의 비디오 플레이어의 경우 미리 지정되어 사용자가 선택 가능한 배율(frame rate)로만 플레이가 가능하지만 해당 방법, 장치, 뷰어는 플링 제스처에 따라서 다양한 이미지 교체 속도를 가질 수 있고, 나아가 인터렉티브한 재생 속도로 시퀀스 이미지를 재생할 수도 있다. When a user's touch gesture is input, a method or apparatus for displaying an image or a viewer according to embodiments of the present invention continuously displays sequence images so that changes in objects included in the plurality of images are expressed as movements of the objects, that is, animated. And interactively adjusts the speed of the object's movement in response to a user's touch gesture. This is a new concept differentiated from conventional video players. For example, a conventional video player cannot dynamically play a video in response to a fling gesture. On the other hand, the method, apparatus, or viewer for displaying an image 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 in advance and selectable by the user, but the method, device, and viewer can have various image replacement speeds according to the fling gesture, and furthermore, the interactive playback speed. You can also play back sequence images.

실시예들의 설명Description of the embodiments

이하에서, 도면을 참조하여 본 발명의 실시예들에 대하여 상세히 살펴본다.Hereinafter, exemplary embodiments of the present invention will be described in detail with reference to the drawings.

도 1은, 본 발명의 일 실시예에 따른, 뷰어 애플리케이션 인터페이스를 포함한 뷰어 장치의 개념적인 블록 구성도이다. 1 is a conceptual block diagram of a viewer device including a viewer application interface according to an embodiment of the present invention.

실시예들에서, 뷰어 장치(100)는 복수의 이미지를 디스플레이하는 방법을 수행하도록 구성된다. 특정 실시예들에서, 뷰어 장치(100)는 복수의 이미지를 디스플레이하는 프로세스를 포함한 뷰어 애플리케이션 인터페이스를 포함한다. In embodiments, the viewer device 100 is configured to perform a method of displaying a plurality of images. In certain embodiments, the viewer device 100 includes a viewer application interface including a process for displaying a plurality of images.

상기 뷰어 장치(100)는, 예를 들어 스마트 폰, 셀룰러 폰, 스마트 글래스, 스마트 워치, 웨어러블 장치, 디지털 카메라, 태블릿, 노트북, 랩탑 컴퓨터, 모바일 장치 등으로 구현될 수 있으나, 이에 제한되진 않는다. The viewer device 100 may be implemented as, for example, a smart phone, a cellular phone, a smart glass, 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을 참조하면, 뷰어 장치(100)는 메모리(110), 제어 유닛(130), 인터페이스 유닛(140), 통신 모듈(150), 정보를 입/출력하는 하나 이상의 입/출력 장치, 전원 공급부(180) 등을 포함한다. 상기 입/출력 장치는 터치 유닛(171), 기타 입력부(172), 디스플레이 유닛(173), 근접 센서(174), 촬영 유닛(175), 스피커(176), 마이크(177) 등을 포함할 수도 있다. 도 1에 도시된 뷰어 장치(100)의 구성요소는 필수적인 것은 아니며, 그 보다 많은 구성요소를 갖거나 그보다 적은 구성요소들을 갖는 뷰어 장치로 구현될 수도 있다. Referring to FIG. 1, the viewer device 100 includes a memory 110, a control unit 130, an interface unit 140, a communication module 150, at least one input/output device for inputting/outputting information, and a power supply unit. (180) and the like. The input/output device may include a touch unit 171, other input units 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 components or fewer components.

실시예들에 따른 뷰어 장치(100)는 전적으로 하드웨어이거나, 전적으로 소프트웨어이거나, 또는 부분적으로 하드웨어이고 부분적으로 소프트웨어인 측면을 가질 수 있다. 예컨대, 뷰어 애플리케이션은 데이터 처리 능력이 구비된 하드웨어 및 이를 구동시키기 위한 운용 소프트웨어를 통칭할 수 있다. 본 명세서에서 "부(unit)", “모듈(module)”“장치”, 또는 "시스템" 등의 용어는 하드웨어 및 해당 하드웨어에 의해 구동되는 소프트웨어의 조합을 지칭하는 것으로 의도된다. 예를 들어, 하드웨어는 CPU(Central Processing Unit), GPU(Graphic Processing Unit) 또는 다른 프로세서(processor)를 포함하는 데이터 처리 가능한 컴퓨팅 장치일 수 있다. 또한, 소프트웨어는 실행중인 프로세스, 객체(object), 실행파일(executable), 실행 스레드(thread of execution), 프로그램(program) 등을 지칭할 수 있다.The viewer device 100 according to the embodiments may have an aspect that is entirely hardware, entirely software, or partially hardware and partially software. For example, the viewer application may collectively refer to hardware equipped with data processing capability and operating software for driving it. In this specification, terms such as "unit", "module", "device", or "system" are intended to refer to a combination of hardware and software driven by the hardware. For example, the hardware may be a computing device capable of processing data including a central processing unit (CPU), a graphical processing unit (GPU), or another processor. In addition, software may refer to an executing process, an object, an executable file, a thread of execution, a program, and the like.

메모리(110)는 플래시 메모리 타입(flash memory type), 하드디스크 타입(hard disk type), 멀티미디어 카드마이크로 타입(multimedia card micro type), 카드 타입의 메모리(예를 들어 SD 또는 XD 메모리 등), RAM(Random Access Memory, RAM), SRAM(Static Random Access Memory), ROM(Read-Only Memory, ROM), EEPROM(Electrically Erasable Programmable Read-Only Memory), PROM(Programmable Read-Only Memory), 자기 메모리, 자기 디스크 및 광디스크 중 적어도 하나의 타입의 저장매체를 포함할 수 있다. 뷰어 장치(100)는 인터넷(internet)상에서 상기 메모리(110)의 저장 기능을 수행하는 웹 스토리지(web storage)와 관련되어 동작할 수도 있다. 예를 들어, 메모리(110)는 예컨대, 유/무선의 통신 네트워크를 통해 액세스되는 분산형 저장소(storage)를 더 포함할 수도 있다. The memory 110 is a flash memory type, a hard disk type, a multimedia card micro type, a card type memory (for example, SD or XD memory), and RAM. (Random Access Memory, RAM), SRAM (Static Random Access Memory), ROM (Read-Only Memory, ROM), EEPROM (Electrically Erasable Programmable Read-Only Memory), PROM (Programmable Read-Only Memory), 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 connection with a web storage that performs a storage function of the memory 110 on the Internet. For example, the memory 110 may further include distributed storage accessed through, for example, a wired/wireless communication network.

메모리(110)는 제어 유닛(130)의 처리 및 제어를 위한 명령어를 저장할 수도 있다. 메모리(110)는 외부로부터 수신한 콘텐츠 관련 데이터(예컨대, 멀티미디어 콘텐츠, 미리보기 콘텐츠 등), 입/출력되는 데이터를 저장 또는 임시 저장할 수도 있다. The memory 110 may store instructions for processing and controlling the control unit 130. The memory 110 may store or temporarily store content-related data (eg, multimedia content, preview content, etc.) and input/output data received from the outside.

제어 유닛(130)은 뷰어 장치(100)의 전반적인 동작을 제어한다. 예를 들어, 데이터 통신, 사용자 입력 검출, 이미지 디스플레이 등을 위한 관련된 제어 및 처리를 수행한다. 제어 유닛(130)은 멀티 미디어 재생을 위한 멀티미디어 모듈을 포함할 수도 있다. 멀티미디어 모듈은 제어 유닛(130) 내에 구현될 수도 있고, 제어 유닛(130)과 별도로 구현될 수도 있다. 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 multimedia playback. The multimedia module may be implemented in the control unit 130 or may be implemented separately from the control unit 130.

일 실시예에서, 제어 유닛(130)은 뷰어 인터페이스 애플리케이션을 포함할 수도 있다. 상기 뷰어 인터페이스 애플리케이션은 스크롤 제스처에 기초하여 이미지를 디스플레이하는 방법의 단계들을 포함한다. 특정 실시예들에서, 뷰어 인터페이스 애플리케이션은 이미지 쇼 유닛(image show unit)(131)과 스크롤 입력 처리 유닛(133)를 포함할 수도 있다. 제어 유닛(130)의 동작(들) 또는 뷰어 인터페이스 애플리케이션의 단계(들)에 대해서는 아래의 도 2 내지 도 9를 참조하여 보다 상세하게 서술한다. 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.

인터페이스 유닛(140)은 뷰어 장치(100)에 전기적으로 연결되는 외부기기와의 통로 역할을 한다. 인터페이스 유닛(140)은 외부 기기로부터/로 데이터를 송/수신하거나, 외부 전력원으로부터 전력을 공급받아 뷰어 장치(100)이 내부의 구성 중 적어도 일부에 전달한다. 또한 인터페이스 유닛(140)은 입/출력과 관련된 장치들을 메모리(110) 및/또는 제어 유닛(130)와 연결시킨다. 상기 인터페이스 유닛(140)은 연결된 내부 구성(예컨대, 입/출력과 관련된 장치들)에 따라 소프트웨어 및/또는 하드웨어의 조합으로 구현될 수 있다. 예를 들어, 상기 인터페이스 유닛(140)은 통신용 인터페이스, 터치 및 기타 입력 유닛용 인터페이스, 오디오용 인터페이스 등을 포함하며, 상기 오디오 인터페이스는 데이터를 전기 신호로 변환하고 전기 신호로 전송하는 오디오 회로(예컨대, 헤드셋 잭 등)를 포함할 수 있으며, 상기 터치 및 기타 입력 유닛용 인터페이스는 하나 이상의 입력 유닛을 통해 획득된 사용자 입력에 대응하는 전기 신호를 제어 유닛(130)으로 전송하는 하나 이상의 입력 제어자를 포함할 수 있다. 특정 실시예들에서, 인터페이스 유닛(140)은 유/무선 헤드셋 포트, 외부 충전기 포트, 유/무선 데이터 포트, 메모리 카드(memory card) 포트, 식별 모듈이 구비된 장치를 연결하는 포트, 오디오 I/O(Input/Output) 포트, 비디오 I/O(Input/Output) 포트, 이어폰 포트 등을 하드웨어로 포함할 수도 있다. The interface unit 140 serves as a passage with an external device that is 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 the viewer device 100 transmits it to at least some of the internal components. In addition, the interface unit 140 connects devices related to input/output 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 converts data into electrical signals and transmits them as electrical signals (e.g. , Headset jack, etc.), and the interface for touch and other input units includes one or more input controllers that transmit electrical signals corresponding to user inputs acquired through one or more input units to the control unit 130. can do. In certain embodiments, the interface unit 140 includes 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, and audio I/ It may include an O (Input/Output) port, a video I/O (Input/Output) port, an earphone port, etc. as hardware.

통신 모듈(150)은 전자파를 송/수신하도록 구성된다. 통신 모듈(150)은 전기 신호를 전자파로 변환하거나, 또는 전자파를 전기 신호로 변환한다. 뷰어 장치(100)는 통신 모듈(150)를 통해 사용자가 통화를 하게 하거나, 또는 인터넷 상의 서비스를 제공하는 애플리케이션을 사용하게 한다. 상기 통신 모듈(150)은 객체와 객체가 네트워킹할 수 있는, 유선 통신, 무선 통신, 3G, 4G, 유선 인터넷 또는 무선 인터넷 등을 포함한, 다양한 통신 방법에 의해 다른 장치와 통신할 수 있다. 예를 들어, 통신 모듈(150)은 월드 와이드 웹(WWW, World Wide Web)과 같은 인터넷, 인트라넷과 같은 네트워크 및/또는 셀룰러 전화 네트워크, 무선 네트워크, 그리고 무선 통신을 통해 통신하도록 구성된다. 상기 무선 통신은, 예를 들어, 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-MAX(world Interoperability for Microwave Access), 및/또는 이메일, 인스턴트 메시징, 단문 문자 서비스(SMS) 등을 위한 통신 프로토콜을 이용한 무선 통신 표준을 포함하나, 이에 제한되지 않는다. The communication module 150 is configured to transmit/receive electromagnetic waves. The communication module 150 converts an electric signal into an electromagnetic wave, or converts an electromagnetic wave into an electric signal. The viewer device 100 allows a user to make a call through the communication module 150 or to use an application that provides a service on the Internet. 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, which can be networked between the object and the object. For example, the communication module 150 is configured to communicate over 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, Global System for Mobile Network (GSM), Code Division Multiple Access (CDMA, Wideband Code Division Multiple Access (W-CDMA)), Time Division Multiple Access (TDMA), Bluetooth, Wi-Fi, and Wi-Fi. -MAX (World Interoperability for Microwave Access), and/or a wireless communication standard using a communication protocol for e-mail, instant messaging, short text service (SMS), and the like, but is not limited thereto.

터치 유닛(171), 기타 입력 유닛(172)은 사용자의 입력과 관련된 명령을 수신하도록 구성된 구성요소이다. The touch unit 171 and other input units 172 are components configured to receive a command related to a user's input.

터치 유닛(171)은 디스플레이 유닛(173)의 특정 부위에 가해진 압력 또는 디스플레이 유닛(173)의 특정 부위에 발생하는 정전 용량 등의 물리적 변화를 전기적 신호로 변환하도록 구성된다. 특정 부위에 발생하는 물리적 변화는 포인팅 객체에 의해 발생한다. 상기 포인팅 객체는 사용자의 신체 일부, 또는 도구 등을 포함할 수도 있다. 또한, 터치 유닛(171)은 터치되는 위치, 면적, 및/또는 터치 시 압력을 검출하도록 구성될 수도 있다. The touch unit 171 is configured to convert a physical change, such as pressure applied to a specific portion of the display unit 173 or a capacitance generated at a specific portion of the display unit 173, into an electrical signal. Physical changes that occur in specific areas are caused by pointing objects. The pointing object may include a part of the user's body or a tool. In addition, the touch unit 171 may be configured to detect a touched position, an area, and/or a pressure upon touch.

상기 터치 유닛(171)은 감압식 또는 정전기식 센서 등을 포함할 수 있으나, 이에 제한되진 않는다. 상기 기타 입력 유닛(172)는 예를 들어 버튼, 다이얼, 스위치, 스틱 등을 포함한다. The touch unit 171 may include a pressure-sensitive or electrostatic sensor, but is not limited thereto. The other input unit 172 includes, for example, a button, a dial, a switch, and a stick.

디스플레이 유닛(173)은 뷰어 장치(100)에 저장 및/또는 처리된 정보를 디스플레이하는 구성요소이다. 특정 실시예들에서, 디스플레이 유닛(173)은 콘텐츠를 선택하는 것과 관련된 UI 또는 GUI를 디스플레이하거나, 연속된 이미지 중 적어도 하나를 디스플레이할 수도 있다. 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 may display at least one of consecutive images.

디스플레이 유닛(173)은 액정 디스플레이(liquid crystal display, LCD), 박막 트랜지스터 액정 디스플레이(thin film transistor-liquid crystal display, TFT LCD), 유기 발광 다이오드(organic light-emitting diode, OLED), 플렉시블 디스플레이(flexible display), 3차원 디스플레이(3D display) 중에서 적어도 하나를 포함할 수 있으나, 이에 제한되진 않는다. 특정 실시예들에서, 디스플레이 유닛(173)은 복수일 수 있으며, 예를 들어, 하나의 면에 복수의 디스플레이 유닛(173)의 스크린이 배치되거나, 다른 면에 각각 배치될 수도 있다. The display unit 173 includes a liquid crystal display (LCD), a thin film transistor-liquid crystal display (TFT LCD), an organic light-emitting diode (OLED), and a flexible display. display) and a 3D display, but are not limited thereto. In certain embodiments, there may be a plurality of display units 173, for example, screens of the plurality of display units 173 may be disposed on one surface, or may be disposed on different surfaces, respectively.

도 1에서 터치 유닛(171)과 디스플레이 유닛(173)이 분리되어 있지만, 많은 실시예들에서 터치 유닛(171)과 디스플레이 유닛(173)은 입력 수신 및 정보 출력을 수행하도록 하나의 구성요소로 구현될 수 있다. 예를 들어, 터치 유닛(171)와 디스플레이 유닛(173)은 터치 패널이 스크린과 레이어 구조를 이루는 터치스크린으로 구현될 수 있다. 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 a touch panel forms a layer structure with a screen.

근접 센서(174)는 상기 터치스크린에 의해 감싸지는 뷰어 장치(100)의 내부 영역 또는 상기 터치스크린의 근처에 배치될 수 있다. 상기 근접 센서(174)는 소정의 검출면에 접근하는 물체, 혹은 근방에 존재하는 물체의 유무를 전자계의 힘 또는 적외선을 이용하여 기계적 접촉이 없이 검출하는 센서를 말한다. The proximity sensor 174 may be disposed in an inner area of the viewer device 100 surrounded by the touch screen or near 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 using the force of an electromagnetic field or infrared rays without mechanical contact.

상기 근접 센서(174)의 예로는 투과형 광전 센서, 직접 반사형 광전 센서, 미러 반사형 광전 센서, 고주파 발진형 근접 센서, 정전용량형 근접 센서, 자기형 근접 센서, 적외선 근접 센서 등이 있다. 상기 터치스크린이 정전식인 경우에는 상기 포인터의 근접에 따른 전계의 변화로 상기 포인터의 근접을 검출하도록 구성된다. 이 경우 상기 터치스크린(터치 센서)은 근접 센서로 분류될 수도 있다.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 type proximity sensor, a magnetic type proximity sensor, an infrared proximity sensor, and the like. When the touch screen is capacitive, 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.

본 명세서에서 “터치(또는 터치 제스처)”는 스크린 상에 포인터가 실제로 접촉되는 행위를 지칭하는 "접촉 터치(contact touch)"에 제한되지 않는다. “터치”는 상기 접촉 터치 및/또는 상기 터치스크린 상에 포인터가 접촉되지 않으면서 근접되어 상기 포인터가 상기 터치스크린 상에 위치함이 인식되도록 하는 행위를 지칭하는 "근접 터치(proximity touch)"를 포함한다. 상기 터치스크린 상에서 포인터로 근접 터치가 되는 위치라 함은, 상기 포인터가 근접 터치될 때 상기 포인터가 상기 터치스크린에 대해 수직으로 대응되는 위치를 의미할 수 있다. In the present specification, “touch (or touch gesture)” is not limited to “contact touch”, which refers to an action in which the pointer actually comes into contact on the screen. “Touch” refers to “proximity touch”, which refers to the contact touch and/or the action of making it close without touching the pointer on the touch screen so that the pointer is positioned on the touch screen. Includes. A position at which a proximity touch is performed with a pointer on the touch screen may mean a position at which the pointer vertically corresponds to the touch screen when the pointer is proximity touched.

본 명세서에서 터치 거리는 터치로 인해 스크린 상의 터치 지점이 이동하는 거리를 나타낸다. 상기 터치 거리는 터치 지점에 대응한 가상의 터치 객체의 이동거리로 표현되며, 포인터와 스크린 간의 터치 지점이 실제 이동한 거리 및 터치로 인해 상기 터치 지점이 가상으로 이동한 거리를 포함한다. In the present specification, the touch distance refers to the distance that the touch point on the screen moves due to the touch. The touch distance is expressed as a moving distance of a virtual touch object corresponding to a touch point, and includes a distance actually moved by a touch point between a pointer and a screen and a distance virtually moved by the touch point due to a touch.

근접 센서(174)는 근접 터치와, 근접 터치 패턴(예를 들어, 근접 터치 거리, 근접 터치 방향, 근접 터치 속도, 근접 터치 시간, 근접 터치 위치, 근접 터치 이동 상태 등)을 감지한다. 상기 감지된 근접 터치 동작 및 근접 터치 패턴의 감지 결과는 제어 유닛(130)으로 전송된다. 또한, 감지 결과에 상응하는 정보는 터치스크린상에 출력될 수도 있다.The proximity sensor 174 detects a proximity touch and a proximity touch pattern (eg, a proximity touch distance, a proximity touch direction, a proximity touch speed, a proximity touch time, a proximity touch position, a 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.

촬영 유닛(175)은 피사체를 촬영하여 피사체의 이미지 데이터를 획득하는 구성요소로서, 예를 들어, 이미지 센서, 카메라, 비디오 카메라 등을 포함한 다양한 촬영장치일 수 있다. The photographing unit 175 is a component that captures a subject and acquires image data of the subject, and may be various photographing apparatuses including, for example, an image sensor, a camera, and a video camera.

스피커(176)는 전기 신호를 가청 영역의 주파수를 갖는 음파로 변환한다. 제어 유닛(130)에서 처리된 데이터 또는 메모리(110)에 미리 저장된 데이터가 인터페이스 유닛(140)을 통해 전기 신호로 변환되어 스피커(176)에 입력되고 최종적으로 음파가 출력된다. 마이크(177)는 음파를 전기 신호로 변환한다. 스피커(176) 및 마이크(177)는 상기 뷰어 장치(100)가 전화 애플리케이션을 수행하도록 구성된 경우, 전화를 위해 사용될 수 있다. The speaker 176 converts the electric signal into sound waves having a frequency in the audible region. Data processed by the control unit 130 or data previously stored in the memory 110 is converted into an electrical signal through the interface unit 140 and input to the speaker 176, and finally, a sound wave is output. The microphone 177 converts sound waves into electrical signals. The speaker 176 and the microphone 177 can be used for a phone call when the viewer device 100 is configured to perform a phone application.

전원 공급부(180)는 제어 유닛(130)의 제어에 의해 외부의 전원, 내부의 전원을 인가받아 각 구성요소들의 동작에 필요한 전원을 공급한다. 전원 공급부(180)는 예를 들어 배터리, 연결포트, 전원공급제어 유닛 및/또는 충전모니터링 유닛을 포함할 수 있다. 연결포트는 배터리의 충전을 위하여 전원을 공급하는 외부 충전기가 전기적으로 연결되는 인터페이스 유닛(140)의 일 예로서 구성될 수 있다. The power supply unit 180 receives external power and internal power under the control of the control unit 130 and supplies power necessary for the 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 charging monitoring unit. The connection port may be configured as an example of the interface unit 140 to which an external charger supplying power for charging the battery is electrically connected.

이하, 설명의 명료성을 위해서, 터치스크린을 포함한 스마트 폰으로 구현된 뷰어 장치(100)를 이용한 실시예들에 기초하여 본 발명을 보다 상세하게 서술한다. 그러나, 상기 실시예들은 단지 예시적인 것으로서, 본 발명이 이에 제한되지 않는 다는 것은 통상의 기술자에게 명백할 것이다. 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.

전술한 바와 같이, 상기 뷰어 장치(100)는 뷰어 인터페이스 애플리케이션을 포함하며, 뷰어 인터페이스 애플리케이션에 포함된, 복수의 이미지를 디스플레이하는 방법의 단계(들)을 수행하도록 구성된다. 예를 들어, 복수의 이미지를 디스플레이하는 방법의 단계의 적어도 일부는 뷰어 인터페이스 애플리케이션으로 구현될 수도 있다. As described above, the viewer device 100 includes a viewer interface application, and is configured to perform step(s) of a method of displaying a plurality of images included in the viewer interface application. For example, at least some of the steps of a method of displaying a plurality of images may be implemented as a viewer interface application.

도 2는, 본 발명의 일 실시예에 따른, 복수의 이미지를 디스플레이하는 방법의 흐름도이다. 2 is a flowchart of a method of displaying a plurality of images according to an embodiment of the present invention.

도 2에서 복수의 이미지를 디스플레이하는 것은 복수의 이미지가 연속해서 디스플레이되는 것을 나타낸다. 상기 복수의 이미지는 이미지 세트의 일부 또는 전부일 수도 있다. Displaying a plurality of images in FIG. 2 indicates that a plurality of images are continuously displayed. The plurality of images may be part or all of the image set.

상기 이미지 세트는 포함된 각 이미지에 디스플레이 순서(index)가 지정된 일련의 이미지 세트이다. 상기 이미지 세트는 연속된 이미지를 포함하며, 상기 이미지 세트의 연속된 이미지는, 순서대로 디스플레이되면, 동작, 맥락(context), 씬(scene), 스토리(story)의 일부 또는 전부를 표현하도록 구성된다. The image set is a set of images in which a display order (index) is assigned to each included image. The image set includes consecutive images, and the consecutive images of the image set, when displayed in order, are configured to represent part or all of an action, context, scene, and story. .

이미지 세트는 이미지, 또는 이미지 및 텍스트의 조합을 포함한다. 실시예들에서, 이미지 세트는 애니메이팅 효과를 주는 기초 이미지들의 집합일 수 있다. 즉, 이미지 세트는 빠르게 연속해서 개별 이미지들이 교체되어 화면에 디스플레이될 경우 객체의 동작 또는 배경의 변화를 표현하도록 즉 에니메이팅되도록 이루어진 복수의 이미지를 포함한다. An image set includes an image, or a combination of images and text. In embodiments, the image set may be a set of basic images giving an animating effect. That is, the image set includes a plurality of images configured to represent a change in the motion or background of an object when individual images are rapidly and continuously replaced and displayed on the screen, that is, animated.

일 실시예에서, 상기 이미지 세트들의 개별 이미지들을 연속하여 교체하여 화면에 디스플레이할 경우 공간감을 부여하도록 애니메이팅될 수 있다. 즉, 상기 이미지 세트의 개별 이미지들을 연속으로 교체하여 화면에 디스플레이할 경우 사용자가 심도 중심의 동적 컨텐츠를 감상하게 하는 효과를 줄 수 있다. In an embodiment, when individual images of the image sets are continuously replaced and displayed on a screen, it may be animated to give a sense of space. That is, when individual images of the image set are continuously replaced and displayed on a screen, an effect of allowing a user to enjoy dynamic content centered on depth may be provided.

일 실시예에서, 이미지 세트는 웹툰, 웹소설, 디지털 서적 등과 같은 서비스 콘텐츠를 포함할 수도 있다. In one embodiment, the image set may include service contents such as webtoons, web novels, and digital books.

또한 이미지 세트는 전술한 서비스 콘텐츠와는 상이한 콘텐츠로서, 예를 들어, 서비스 콘텐츠의 광고, 미리보기, 시놉시스 등을 표현하기 위한 이미지 세트를 포함할 수도 있다. 특히 이미지 세트는 웹툰 또는 웹툰의 미리보기를 구성할 수 있다. In addition, the image set is content different from the above-described service content, and may include, for example, an image set for expressing an advertisement, a preview, a synopsis, and the like of the service content. In particular, the image set may constitute a webtoon or a preview of the webtoon.

도 2를 참조하면, 상기 방법은: 제1 이미지를 디스플레이하는 단계(S201)를 포함한다. 뷰어 인터페이스 애플리케이션은 이미지 세트에 포함된 하나 이상의 이미지를 로드하는 단계를 포함할 수도 있다. 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 screen (screen) image in which one individual image is displayed on the screen may be configured.

일 실시예에서, 뷰어 인터페이스 애플리케이션은 이미지 데이터의 이미지가 해당 애플리케이션에 의해 제공되는 스크린(화면) 영역 전체를 채우도록 디스플레이한다. 즉, 뷰어 인터페이스 애플리케이션에 의해 제공되는 스크린 영역 전체를 채우도록 디스플레이되는 이미지가 스크린 이미지일 수 있다. 여기서, 스크린 영역 전체를 채우기 위해, 이미지의 기본 디스플레이 사이즈는 스크린 영역의 사이즈에 대응할 수 있다. In one embodiment, the viewer interface application displays an image of 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.

일부 실시예들에서, 뷰어 인터페이스 애플리케이션은 스크린 이미지의 공간감 또는 3차원 깊이감을 조절하는 사용자 입력을 입력 받을 수도 있다. 상기 공간감 또는 깊이감을 조절하는 입력은 줌-인, 줌-아웃일 수 있다.In some embodiments, the viewer interface application may receive a user input for adjusting a sense of space or a three-dimensional depth of a screen image. The input for adjusting the sense of space or the sense of depth may be a zoom-in or a zoom-out.

단계(S201)에서, 뷰어 인터페이스 애플리케이션은 이미지 배열 축 상에 배열된 하나 이상의 이미지에 대해서 한 시점에 단일 이미지를 스크린 상에 디스플레이하는 단계를 포함할 수도 있다. 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은, 본 발명의 일 실시예에 따른, 뷰어 인터페이스 애플리케이션에서 이미지가 디스플레이되는 동작의 개념도이다. 3 is a conceptual diagram of an operation in which an image is displayed in a viewer interface application according to an embodiment of the present invention.

도 3을 참조하면, 뷰어 인터페이스 애플리케이션은 이미지 배열 축 상에 배열된 이미지를 로드하여 디스플레이할 수도 있다. 이미지 배열 축 상의 배열 순서는 이미지 세트 내 각 이미지에 지정된 디스플레이 순서에 대응한다. 디스플레이 순서가 지정된 이미지 세트의 다수의 이미지 각각을 이미지 배열 축 상에 각각 배열함으로써, 디스플레이 순서가 해당 배열 축 상의 위치로 표현될 수 있다. 뷰어 인터페이스 애플리케이션은 이미지 배열 축에 관한 특정 위치 또는 방향 정보를 획득하면, 특정 순서를 갖는 이미지 또는 해당 방향에서 임의의 순서를 갖는 이미지를 스크린 이미지로 디스플레이할 수도 있다. 이미지 배열 축에서 지정된 디스플레이 순서에 대응한 방향은 순방향, 그 반대방향은 역방향으로 지칭될 수도 있다. 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 the 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 corresponding arrangement axis. When the viewer interface application acquires specific position or direction information about the image arrangement axis, it may display an image having a specific order or an image having an arbitrary order in the corresponding direction as a screen image. A direction corresponding to a designated display order in the image arrangement axis may be referred to as a forward direction, and the opposite direction may be referred to as a reverse direction.

이미지를 이미지 배열 축 상에 배열하는 동작은 뷰어 인터페이스 애플리케이션에 의해 수행되거나, 외부 장치(예컨대, 플랫폼 서버(미도시))에 의해 미리 수행될 수도 있다. 뷰어 인터페이스 애플리케이션은 외부로부터 이미지 및 해당 이미지에 연관된 이미지 배열 축 상의 위치 정보를 수신할 수도 있다. The operation of arranging images 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.

일부 실시예에서, 상기 이미지 배열 축은 스크린 평면과 비-평행한 축일 수 있다. 예를 들어, 상기 이미지 배열 축은 도 3에 도시된 바와 같이 스크린 평면에 수직한 축(도 3의 z축)일 수도 있다. 다른 일부 실시예에서, 상기 이미지 배열 축은 스크린 평면 상의 임의의 축일 수도 있다. 한편, 다른 실시예들에서, 전술한 이미지 배열은 뷰어 장치(100) 상에 미리 저장된 및/또는 외부로부터 수신한 이미지를 뷰어 인터페이스 애플리케이션에 로드함으로써 구현될 수도 있다. 일 실시예에서, 로드되는 이미지는 단일 이미지일 수도 있다. 다른 일 실시예에서, 로드되는 이미지는 복수의 이미지일 수도 있다. 이에 대해서는 아래의 도 8 및 도 9를 참조하여 보다 상세하게 서술한다. In some embodiments, the image arrangement 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 (z axis in FIG. 3) as shown in FIG. 3. In some other embodiments, the image alignment 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 loaded image may be a single image. In another embodiment, the image to be loaded may be a plurality of images. This will be described in more detail with reference to FIGS. 8 and 9 below.

일 실시예에서, 뷰어 인터페이스 애플리케이션은 스크린 평면의 일 축을 스크롤 축으로 설정할 수도 있다. 상기 스크롤 축은 스크린에 평행한 축(예컨대, 도 3의 x축), 또는 스크린에 수직한 축(예컨대, 도 3의 y축)일 수도 있다. In one embodiment, the viewer interface application is 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).

또한, 뷰어 인터페이스 애플리케이션은 스크롤 축 (예컨대, 스크린의 y축)의 제1 방향(예컨대, 도 3의 y축의 양(positive)의 방향)이 이미지 배열 축의 제1 방향에 대응하고, 제2 방향(예컨대, 도 3의 y축의 음(negative)의 방향)이 스크롤 축의 제2 방향에 대응하는 것으로 설정할 수도 있다. In addition, in the viewer interface application, 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 direction of the y-axis of FIG. 3) may be set to correspond to the second direction of the scroll axis.

다시 도 2를 참조하면, 상기 방법은: 스크롤 제스처를 입력받는 단계(S210)를 포함한다. 일 실시예에서, 단계(S210)는 사용자의 터치 제스처를 스크롤 제스처로 검출하는 단계를 포함할 수도 있다. 상기 스크롤 제스처는 이미지 교체를 개시하게 하는 터치 제스처이다. 예를 들어, 스크롤 제스처는 스크린 상에 디스플레이되는 이미지의 디스플레이 순서(index)와 다른 순서를 갖는 이미지가 스크린 상에 디스플레이되게 하는 입력이다. Referring back to FIG. 2, the method includes: receiving a scroll gesture (S210). In an embodiment, step S210 may include detecting a user's touch gesture as a scroll gesture. The scroll gesture is a touch gesture that initiates image replacement. For example, the 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.

일 실시예에서, 상기 스크롤 제스처는 스크린 상의 하나 이상의 축 성분을 갖는 제스처일 수도 있다. 여기서, 상기 스크롤 제스처는 스크린 평면의 일 축으로 설정된 스크롤 축 상의 성분을 포함한다. 특정 실시예들에서, 스크롤 제스처는 드래그 제스처, 플링 제스처 및 이들의 조합을 포함할 수도 있다. 드래그 제스처, 플링 제스처와 관련된 동작에 대해서는 아래의 도 4 내지 도 10을 참조하여 보다 상세하게 서술한다. 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 a 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 a combination thereof. Operations related to the drag gesture and the fling gesture will be described in more detail with reference to FIGS. 4 to 10 below.

상기 방법은: 스크롤 제스처의 터치 특성을 획득하는 단계(S230)를 포함할 수도 있다. 단계(S210)에서 스크롤 제스처가 (예컨대, 뷰어 장치(100)에) 입력되면, 뷰어 인터페이스 애플리케이션은 입력된 스크롤 제스처에 기초하여 스크롤 제스처의 터치 특성을 산출할 수도 있다. The method may include: acquiring a touch characteristic of a scroll gesture (S230). When a scroll gesture is input (eg, to the viewer device 100) in step S210, the viewer interface application may calculate the touch characteristics of the scroll gesture based on the input scroll gesture.

일 실시예에서, 상기 단계(S230)는: 스크롤 제스처에서 미리 설정된 스크롤 축 상의 특성을 검출하는 단계를 포함할 수도 있다. 상기 스크롤 축의 특성은, 예를 들어, 스크린 축 상에서의 터치 방향, 터치 속도, 터치 거리, 터치 좌표, 특정 시점(예컨대, 이미지 교체 시점)으로부터의 터치 거리 변화량 등을 포함할 수도 있다. In an embodiment, the step S230 may include: detecting a characteristic on a preset scroll axis in a scroll gesture. The characteristics of the scroll axis may include, for example, a touch direction on the screen axis, a touch speed, a touch distance, a touch coordinate, and an amount of change in the touch distance from a specific point in time (eg, an image replacement time point).

뷰어 인터페이스 애플리케이션은 스크롤 제스처의 터치 특성이 검출하고 미리 설정된 스크롤 축 상의에서의 터치 방향을 획득하는 단계(S230)를 포함한다. The viewer interface application includes a step S230 of detecting a touch characteristic of a scroll gesture and obtaining a touch direction on a preset scroll axis.

뷰어 인터페이스 애플리케이션은: 터치 속도, 터치 가속도, 및/또는 터치 거리 등에 기초하여 스크롤 제스처의 유형을 결정할 수도 있다. 전술한 바와 같이, 스크롤 제스처는 드래그 제스처, 플링(fling) 제스처 및 이들의 조합을 포함할 수도 있다. 플링 제스처는 터치 이후 릴리즈되는 제스처이다. 플링 제스처는 릴리즈되는 힘에 의해 다른 터치 제스처들(예컨대, 드래그 제스처) 보다 상대적으로 높은 터치 가속도를 가진다. 특정 실시예들에서, 뷰어 인터페이스 애플리케이션은 터치 가속도에 기초하여 스크롤 제스처의 유형이 플링 제스처인지 드래그 제스처인지를 결정할 수도 있다.The viewer interface application may determine the type of scroll gesture based on: touch speed, touch acceleration, and/or touch distance. As described above, the scroll gesture may include a drag gesture, a fling gesture, and a combination thereof. The fling gesture is a gesture that is released after a touch. The fling gesture has a relatively higher touch acceleration than other touch gestures (eg, a drag gesture) by a released force. In certain embodiments, the viewer interface application may determine whether the type of the scroll gesture is a fling gesture or a drag gesture based on the touch acceleration.

한편, 전술한 바와 같이, 뷰어 인터페이스 애플리케이션은: 터치 속도, 터치 가속도, 및/또는 터치 거리, 특정 시점(예컨대, 이미지 교체 시점)으로부터의 터치 거리 변화량 등을 산출할 수도 있다. Meanwhile, as described above, the viewer interface application may calculate: a touch speed, a touch acceleration, and/or a touch distance, an amount of change in the touch distance from a specific point in time (eg, an image replacement point).

터치 거리는 터치 제스처에 의해 터치 지점이 이동한 거리를 나타낸다. 특정 실시예들에서, 스크롤 제스처의 터치 거리(예컨대, 드래그 거리)는 스크롤 축 상의 거리일 수도 있다. 일부 실시예들에서, 터치 거리는 스크린의 픽셀에 기초하여 표현될 수도 있다. 예를 들어, 터치 거리는 픽셀의 수를 단위로 가질 수 있으며, 이 경우 드래그 거리는 y축(도 3의 y축)에서의 픽셀의 수로 표현될 수도 있다. The touch distance represents the distance that the touch point has moved 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. In addition, the viewer interface application may include calculating a change in the drag distance from the previous image replacement time point.

또한, 뷰어 인터페이스 애플리케이션은 플링 제스처에서 플링 가속도를 산출하는 단계를 포함할 수도 있다. 또한, 뷰어 인터페이스 애플리케이션은 플링 가속도에 기초하여 플링 속도 및/또는 플링 거리를 산출할 수도 있다. 뷰어 인터페이스 애플리케이션은 이전 이미지 교체 시점으로부터의 플링 거리 변화량을 산출할 수도 있다. In addition, the viewer interface application may include calculating the fling acceleration in the fling gesture. In addition, the viewer interface application may calculate the fling speed and/or fling distance based on the fling acceleration. The viewer interface application may calculate the amount of change in fling distance from the previous image replacement point.

상기 방법은: 스크롤 제스처의 터치 특성에 기초하여 교체 진행 방향을 결정하는 단계(S240)를 포함한다. 교체 진행 방향은 스크린 이미지를 기준으로 이미지 배열 축의 어느 방향에 위치한 이미지를 새로운 스크린 이미지로 교체하여 디스플레이해야 하는지를 의미한다. 일 실시예에서, 이미지 배열 축의 제1 방향은 이미지 세트의 순 방향에 대응하고, 이미지 배열 축의 제2 방향은 이미지 세트의 역 방향에 대응한도록 설정될 수도 있다. 교체 진행 방향이 제1 방향일 경우 (즉, 제1 교체 진행 방향일 경우) 스크린 이미지에서 순 방향에 배열된 임의의 이미지가 스크린 상에 디스플레이된다. The method includes: determining (S240) a direction in which the replacement proceeds based on the touch characteristic of the scroll gesture. The direction in which the replacement proceeds refers to whether the image located in the direction of the image arrangement axis based on the screen image should be replaced with a new screen image and displayed. In an embodiment, the first direction of the image arrangement axis may be set to correspond to the forward direction of the image set, and the second direction of the image arrangement axis may be set to correspond to the reverse direction of the image set. When the replacement progress direction is the first direction (ie, the first replacement progress direction), an arbitrary image arranged in the forward direction in the screen image is displayed on the screen.

일 실시예에서, 상기 단계(S240)는: 상기 스크롤 축 상에서의 터치 방향을 이미지 배열 축의 방향으로 변환하는 단계를 포함할 수도 있다. 단계(S230)에서 스크롤 축 상의 터치 방향이 검출되면, 뷰어 인터페이스 애플리케이션은 스크롤 제스처의 방향에서 스크롤 축의 방향 성분을 검출하고, 검출된 방향이 스크롤 축의 제1 방향 또는 제2 방향인지 결정함으로써, 검출된 터치 방향을 이미지 배열 축의 방향으로 변환하는 단계를 포함할 수도 있다(S240). 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).

상기 예시를 다시 참조하면, y축(도 3의 y축)의 양의 방향의 스크롤 제스처가 입력된 경우, 뷰어 인터페이스 애플리케이션은 스크롤 축 상의 터치 제스처 및 해당 터치 방향을 검출한다. 검출된 터치 방향에 대응하는 이미지 배열 축의 방향이 결정된다. 상기 결정된 이미지 배열 축의 방향이 이미지 세트의 교체 진행 방향으로 결정된다. 전술한 예시에서, 이미지 세트 교체 진행 방향(이미지 배열 축인 z축에서의 교체 진행 방향)을 순방향(도 3의 z축에서 아래쪽 방향)으로 결정할 수도 있다. 반면, 스크롤 제스처가 오로지 x축 방향 성분만을 갖는 경우 (즉, y축 방향 성분이 검출되지 않는 경우) 교체 진행 방향이 결정되지 않을 수도 있다. Referring back to the above example, when a scroll gesture in the positive direction of the y-axis (y-axis in FIG. 3) is input, the viewer interface application detects the 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 direction of the determined image arrangement axis is determined as the direction in which the image set is replaced. In the above-described example, the direction in which the image set replacement proceeds (the direction in which the image is arranged in the z-axis, which is the image arrangement axis) may be determined as a forward direction (a downward direction in the z-axis of FIG. On the other hand, when the scroll gesture only has an x-axis direction component (that is, when a y-axis direction component is not detected), the replacement direction may not be determined.

이와 같이, 뷰어 인터페이스 애플리케이션은 스크롤 축과 상이한 축에 따르는 터치 방향을 스크롤 축의 방향으로 변환할 수도 있다. In this way, the viewer interface application may convert the touch direction along an axis different from the scroll axis into the direction of the scroll axis.

이하, 설명의 명료성을 위해, 스크롤 축을 스크린의 y축으로 설정하고, y축의 양의 방향을 이미지 세트의 순방향으로 설정한 실시예들에 기초하여 본 발명을 보다 상세하게 서술한다. 이와 같이 설정된 실시예들에서 스크롤 제스처는 y축 상에서의 성분만 갖는 경우를 가정한다. 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.

상기 방법은: 교체 진행 방향을 결정하면, 스크린 이미지를 다른 이미지로 교체하는 단계(S250)를 포함할 수도 있다. 예를 들어, 뷰어 인터페이스 애플리케이션은 기존의 디스플레이되는 이미지를 사라지게 하고 새로운 이미지를 디스플레이하는 단계를 포함할 수도 있다. 상기 새로운 이미지는 스크롤 제스처에 기초한 교체 진행 방향을 따라 배치된 이미지 중 어느 하나일 수도 있다. The method may include: when determining the direction in which the replacement proceeds, replacing the screen image with another image (S250). For example, the viewer interface application may include disappearing an existing displayed image and displaying a new image. The new image may be any one of images arranged along a direction of replacement based on a scroll gesture.

일 실시예에서, 상기 단계(S250)는: 스크롤 제스처의 터치 특성(예컨대, 터치 거리 변화량)에 기초하여 스크린 이미지를 교체하는 단계를 포함할 수도 있다. 특정 실시예들에서, 스크롤 제스처의 터치 거리 변화량과 교체 임계 값에 기초하여 이미지 교체가 수행될 수도 있다. 이에 대해서는 아래의 플링 제스처에 관한 설명 및 도 8 등을 참조하여 보다 상세하게 서술한다.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 the amount of change in the touch distance of the scroll gesture and the replacement threshold. This will be described in more detail with reference to the following description of the fling gesture and FIG. 8.

일부 실시예들에서, 교체될 다른 이미지는 디스플레이 이미지에 인접한 이미지일 수도 있다. 예를 들어, 이미지 세트에서의 배열 순서가 인접한 이미지일 수도 있다. 다른 일부 실시예들에서, 교체될 다른 이미지는 디스플레이 이미지를 기준으로 상기 인접한 이미지 보다 멀리 배열된 이미지일 수도 있다. 즉, 뷰어 인터페이스 애플리케이션은 디스플레이 이미지에서 인접 이미지를 스킵하고 다른 이미지를 디스플레이할 수도 있다. In some embodiments, another image to be replaced may be an image adjacent to the display image. For example, the order of arrangement in the image set may be adjacent images. In some other embodiments, another image to be replaced may be an image arranged farther than the adjacent image based on the display image. That is, the viewer interface application may skip adjacent images in the display image and display other images.

추가적으로, 상기 방법은: 교체 진행 방향이 동일하게 유지되는 스크롤 제스처가 지속적으로 입력되는 경우, 뷰어 인터페이스 애플리케이션은 해당 교체 진행 방향을 따라 배치된 다수의 이미지를 연속으로 교체하여 순차적으로 디스플레이하는 단계를 포함할 수도 있다. 예를 들어, 드래그 제스처 또는 플링 제스처가 입력된 경우 교체 진행 방향이 동일하게 유지되는 스크롤 제스처가 지속적으로 입력되는 것으로 검출될 수도 있다. 그러면, 이미지 세트의 일부로서 복수의 이미지가 스크린 상에서 빠르게 교체되어 디스플레이되는 경우 동적 시퀀스로 표현될 수도 있다. Additionally, the method includes: when a scroll gesture that maintains the same replacement progress direction is continuously input, the viewer interface application continuously replaces and sequentially displays a plurality of images arranged along the replacement progress direction. 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 progress direction remains the same is continuously input. Then, when a plurality of images as part of an image set are rapidly swapped and displayed on the screen, they may be represented in a dynamic sequence.

상기 예들에서, 도 2의 y축 방향(예컨대, 뷰어 장치(100)의 세로 방향)의 스크롤 입력이 수신된 경우, 뷰어 인터페이스 애플리케이션은 이미지 세트의 순방향을 향해 배열된 연속된 이미지가 교체될 수도 있다. 스크롤 입력이 복수의 이미지를 빠르게 교체하게 할 경우, 복수의 이미지는 시퀀스로 구현될 수도 있다. 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.

종래의 웹 페이지, 또는 웹툰 등을 디스플레이하는 이미지 뷰어는 사용자가 스크롤 객체(예컨대, 스크롤 바, 또는 스크롤 터치 포인트)를 드래그한 만큼 스크린 영역을 이동하는 방식이 대부분이다. Conventional image viewers that display web pages or webtoons are mostly methods of moving 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, the touch speed, the touch acceleration (e.g., based on the release strength), the touch distance, the amount of change in the touch distance from a specific point in time (e.g., the image replacement point), etc. And a plurality of images can be continuously displayed to express the 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는, 본 발명의 일 실시예에 따른, 드래그 제스처가 입력될 경우 복수의 이미지를 디스플레이하는 방법의 흐름도이다. 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.

도 4를 참조하면, 상기 방법은: 드래그 제스처를 입력받는 단계(S410)를 포함한다. 그러면, 스크롤 제스처로서 드래그 제스처가 검출된다(S410). Referring to FIG. 4, the method includes: receiving a drag gesture (S410). Then, a drag gesture is detected as a scroll gesture (S410).

상기 방법은: 입력된 드래그 제스처에서 하나 이상의 터치 특성을 획득하는 단계(S430)를 포함한다. 단계(S430)에서 드래그 제스처가 갖는, y축 상의 터치 특성이 획득된다. The method includes: acquiring one or more touch characteristics from the input drag gesture (S430). In step S430, a touch characteristic of the drag gesture on the y-axis is obtained.

또한, 상기 단계(S430)는: 드래그 제스처가 입력되면, 이전 이미지 교체 시점에서부터의 터치 거리 변화량(예컨대, 드래그 거리 변화량)을 산출하는 단계를 포함한다. 이 거리 변화량은 y축 상의 거리 변화량으로 산출될 수도 있다. In addition, the step (S430) includes: when a drag gesture is input, calculating a change amount of the touch distance (eg, change amount of the drag distance) from the previous image replacement time point. This distance change amount may be calculated as the distance change amount on the y-axis.

상기 방법은: 드래그 제스처의 터치 특성에 기초하여 교체 진행 방향을 결정하는 단계(S440)를 포함한다. 일 실시예에서, 상기 단계(S440)는 드래그 제스처의 터치 방향(즉, 드래그 방향)을 검출하고, 검출된 터치 방향이 스크롤 축 상의의 방향 성분을 포함한 경우, 검출된 스크롤 축 상의 방향 성분에 기초하여 교체 진행 방향을 결정하는 단계를 포함할 수도 있다. The method includes: determining (S440) a direction in which the replacement proceeds based on the touch characteristic of the drag gesture. In one embodiment, the step (S440) detects the touch direction (i.e., 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. Thus, it may include the step of determining the direction of the replacement.

뷰어 인터페이스 애플리케이션은 드래그 제스처에 포함된 스크린 상의 축 성분을 분석할 수도 있다. 그러면, 드래그 제스처가 스크롤 축 상의 성분(예컨대, y축 성분)을 갖는 경우, 드래그 제스처가 갖는 스크롤 축 상의 성분에 기초하여 교체 진행 방향을 결정할 수도 있다. 상기 단계(S440)의 교체 진행 방향은 단계(S240)의 교체 진행 방향 결정과 유사하므로, 자세한 설명은 생략한다. The viewer interface application may analyze the axis component on the screen included in the drag gesture. Then, when the drag gesture has a component on the scroll axis (eg, a y-axis component), the direction of replacement may be determined based on the component on the scroll axis of the drag gesture. Since the direction in which the replacement proceeds in step S440 is similar to the determination in the direction in which the replacement proceeds in step S240, a detailed description will be omitted.

상기 방법은: 드래그 제스처의 터치 특성에 기초하여 스크린 이미지를 다른 이미지로 교체하는 단계(S450)를 포함한다. The method includes: replacing the screen image with another image based on the touch characteristic of the drag gesture (S450).

일 실시예에서, 상기 단계(S450)는: 상기 터치 거리 변화량과 미리 설정된 교체 임계 값에 기초하여 이미지 교체 여부를 결정하는 단계; 및 이미지 교체 여부가 결정되면 진행 교체 방향 상에 배치된 다른 이미지를 스크린 이미지로 교체하고 디스플레이하는 단계를 포함할 수도 있다. In one embodiment, the step (S450) includes: determining whether to replace an image based on the amount of change in the touch distance and a preset replacement threshold; And when it is determined whether to replace the image, replacing and displaying another image arranged on the progressing replacement direction with a screen image.

교체 임계 값은 이미지 처리를 위한 뷰어 장치(100)의 사양(specification)에 기초하여 설정될 수도 있다. 또한, 교체 임계 값은 이미지를 연속하여 교체할 경우 하나의 동작으로 인식하게 하는 값으로 설정될 수도 있다. The replacement threshold may be set based on specifications of the viewer device 100 for image processing. In addition, the replacement threshold value may be set to a value that recognizes as one motion when the image is continuously replaced.

뷰어 인터페이스 애플리케이션은 이전 이미지 교체 시점으로부터 발생한 터치 거리(예컨대, 드래그 거리) 변화량(예컨대, 교체 이후 y축 픽셀 거리)을 산출하고, 산출된 터치 거리 변화량이 미리 설정된 교체 임계 값 이상이면 스크린 이미지를 다른 이미지로 교체하여 새로운 스크린 이미지를 디스플레이하는 단계를 포함할 수도 있다. The viewer interface application calculates the amount of change in the touch distance (e.g., drag distance) generated from the time of the previous image replacement (e.g., the y-axis pixel distance after replacement), and if the calculated amount of change in the touch distance is more than a preset replacement threshold, the screen image is changed. It may include the step of displaying a new screen image by replacing it with an image.

일 실시예에서, 교체 임계 값은 이미지 세트의 전체 재생 구간의 길이, 이미지 세트 내 씬의 길이, 및/또는 사용자의 플링 제스처의 통계 등에 기초하여 단일 플링 입력 시 사용자가 원하는 스크롤 지점까지 이동하게 하는 값으로 설정될 수도 있다. 이에 대해서는 아래의 플링 제스처에 관한 설명 및 도 8 등을 참조하여 보다 상세하게 서술한다. 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 within the image set, and/or the statistics of the user's fling gesture, allowing the user to move to the desired scroll point upon inputting a single fling. 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 scroll section corresponding to the entire section of the image set. The viewer interface application may associate images for each point in 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 change amount of the touch distance (eg, drag distance) is greater than or equal to a preset replacement threshold value based on the change amount of the touch distance (eg, drag distance) and a preset replacement threshold value.

단계(S450)에서 이미지 교체가 수행된 이후에도 드래그 제스처가 계속 입력되면, 단계(S410 내지 S450)이 반복된다. 뷰어 인터페이스 애플리케이션은 터치 거리(예컨대, 드래그 거리)에 비례하여 보다 많은 이미지를 교체하도록 구성된다. 반면, 드래그 제스처의 입력이 중지되면, (즉, 드래그 거리 변화량이 0인 경우) 이미지 교체가 중지되고, (새로운 스크롤 제스처가 입력되지 않는 한) 시퀀스의 재생이 종료된다. If the drag gesture is continuously input even after the 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 amount of change in the drag distance is 0), image replacement is stopped, and playback of the sequence is terminated (unless a new scroll gesture is input).

도 5는, 본 발명의 일 실시예에 따른, 드래그 거리에 따라 시퀀스를 표현하는 동작을 설명하기 위한 도면이다. 5 is a diagram for describing an operation of expressing a sequence according to a drag distance according to an embodiment of the present invention.

뷰어 인터페이스 애플리케이션은 스크린 상에 한 장의 이미지를 디스플레이한다. 도 5에 도시된 바와 같이, 뷰어 장치(100)가 터치 지점(P_a)에서 터치 지점(P_b)를 거쳐 터치 지점(P_c)로의 드래그 제스처를 수신할 경우, 뷰어 인터페이스 애플리케이션은 기존의 디스플레이 이미지를 사라지게 하고 순방향에 배치된 이미지를 새롭게 디스플레이할 수도 있다.The viewer interface application displays a single image on the screen. As shown in FIG. 5, when the viewer device 100 receives a drag gesture from the touch point _{P a} to the touch point P _{c through the touch point P b} , the viewer interface application It is also possible to make the image disappear and display an image arranged in the forward direction anew.

시퀀스의 재생 속도는 이미지 교체 속도에 대응한다. 이미지 교체 속도는 드래그 제스처의 드래그 속도와 교체 임계 값에 기초하여 결정된다. 여기서, 드래그 속도는 시간 당 드래그 거리 변화량을 나타낸다. 특정 실시예들에서, 드래그 거리 변화량은 이전 교체 시점으로부터의 거리 변화량을 나타낸다. The speed of playback of the sequence corresponds to the speed of image replacement. 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 amount of change in the drag distance represents the amount of change in the distance from the time of the previous replacement.

교체 값이 유지되는 상태에서 드래그 속도가 거의 일정한 경우 이미지 교체 속도가 거의 동일하므로, 드래그에 의해 표현되는 시퀀스는 거의 동일한 재생 속도를 갖게 된다. If 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 amount of time that the change in the touch distance becomes more than 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.

뷰어 인터페이스 애플리케이션은 터치 거리 변화량이 소정 시간 내에 임계치 이상이 되지 않는 경우, 이미지 교체를 중지한다. 뷰어 인터페이스 애플리케이션은 더 이상 드래그 제스처가 검출되지 않아 터치 거리 변화량이 0이 되거나, 또는 드래그 제스처가 후반부에 도달해 실질적으로 터치 거리 변화량이 0이 되는 시점에서 이미지 교체를 중지한다. 상기 소정의 시간은 드래그 제스처의 완료 여부를 판단 가능한 충분한 시간을 나타낸다. The viewer interface application stops the image replacement when the amount of change in the touch distance does not exceed the threshold value within a predetermined time. The viewer interface application stops changing the image when the amount of change in the touch distance becomes zero because the drag gesture is no longer detected, or when the amount of change in the touch distance becomes zero when the drag gesture reaches the second half. The predetermined time represents a sufficient time to determine whether or not the drag gesture is completed.

만약, 도 5의 최우측 이미지를 디스플레이하는 뷰어 장치(100)가 터치 지점(P_c)에서 터치 지점(P_b)를 거쳐 터치 지점(P_a)로의 드래그 제스처를 수신할 경우, 도 5의 사람 객체가 확대되도록 역방향으로 이미지가 교체된다. 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. 5} The image is replaced in the reverse direction so that the object is enlarged.

도 6은, 본 발명의 일 실시예에 따른, 플링 제스처가 입력될 경우 복수의 이미지를 디스플레이하는 방법의 흐름도이다.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.

도 6을 참조하면, 상기 방법은: 플링 제스처를 스크롤 제스처로 입력받는 단계(S610)를 포함한다. 그러면, 스크롤 제스처로서 플링 제스처가 검출된다(S610).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).

상기 방법은: 입력된 드래그 제스처에서 하나 이상의 터치 특성을 획득하는 단계(S630)를 포함한다. 단계(S630)에서 플링 제스처가 갖는, y축 상의 터치 특성이 획득된다. The method includes: acquiring one or more touch characteristics from the input drag gesture (S630). In step S630, a touch characteristic of the fling gesture on the y-axis is obtained.

일 실시예에서, 상기 단계(S630)는: 터치 방향을 검출하는 단계를 포할 수도 있다. 플링 제스처에서 터치 방향은 릴리즈 방향 또는 릴리즈에 의해 가상의 터치 객체가 스크린 상에서 진행하는 방향을 나타낸다. 뷰어 인터페이스 애플리케이션은 릴리즈 방향 성분에서 y축 상의 방향을 검출하여 플링 제스처의 방향을 결정하는 단계를 포함할 수도 있다. 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 the direction on the y-axis from the release direction component.

또한, 상기 단계(S630)는 터치 가속도(즉, 플링 가속도)를 산출하는 단계; 및 터치 거리 변화량(즉, 플링 거리 변화량)을 산출하는 단계를 포함할 수도 있다. 플링 제스처의 터치 방향과 유사하게, 플링 제스처의 터치 거리 변화량은 실제 터치 포인터가 근접 또는 비근접 터치하는 거리를 의미하는 것에 제한되지 않으며, 가상의 터치 객체가 릴리즈에 의해 스크린 상에서 이동한 거리를 나타낸다. 플링 제스처의 가속도 또한 릴리즈에 의해 가상의 터치 객체에 적용되는 가속도를 나타낸다. In addition, the step (S630) includes calculating a touch acceleration (ie, fling acceleration); And calculating an amount of change in the touch distance (ie, an amount of change in the fling distance). 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 actual touch pointer touches in proximity or non-proximity, and represents the distance that the virtual touch object has moved on the screen by release. . The acceleration of the fling gesture also represents the acceleration applied to the virtual touch object by release.

단계(S630)에서 플링 가속도에 기초하여 이전 이미지 교체 시점에서부터의 플링 거리 변화량이 산출된다. In step S630, the amount of change in the fling distance from the previous image replacement point is calculated based on the fling acceleration.

상기 방법은: 플링 제스처의 터치 특성에 기초하여 교체 진행 방향을 결정하는 단계(S640)를 포함한다. 일 실시예에서, 상기 단계(S640)는 플링 제스처의 플링 방향을 검출함으로써 교체 진행 방향을 결정하는 단계를 포함할 수도 있다. 상기 단계(S640)의 교체 진행 방향은 단계(S240)의 교체 진행 방향 결정과 유사하므로, 자세한 설명은 생략한다.The method includes: determining (S640) a direction in which the replacement proceeds based on the touch characteristic of the fling gesture. In an embodiment, the step (S640) may include determining a replacement direction by detecting the fling direction of the fling gesture. Since the direction in which the replacement proceeds in step S640 is similar to the determination in the direction in which the replacement proceeds in step S240, a detailed description will be omitted.

상기 방법은: 플링 제스처의 터치 특성에 기초하여 스크린 이미지를 다른 이미지로 교체하는 단계(S650)를 포함한다. 일 실시예에서, 상기 단계(S650)는 플링 거리 변화량과 미리 설정된 교체 임계 값에 기초하여 이미지 교체 여부를 결정하는 단계; 및 이미지 교체 여부가 결정되면 진행 교체 방향 상에 배치된 다른 이미지를 스크린 이미지로 교체하고 디스플레이하는 단계를 포함할 수도 있다. The method includes: replacing the screen image with another image based on the touch characteristic of the fling gesture (S650). In an embodiment, the step (S650) may include determining whether to replace an image based on a change in fling distance and a preset replacement threshold; And when it is determined whether to replace the image, replacing and displaying another image arranged on the progressing replacement direction with a screen image.

플링 제스처의 경우에도 드래그 제스처의 경우(S450)와 유사하게, 뷰어 인터페이스 애플리케이션은 이전 이미지 교체 시점으로부터의 플링 거리 변화량과 미리 설정된 교체 임계 값에 기초하여 스크린 이미지를 교체할 수도 있다. 뷰어 인터페이스 애플리케이션은 이전 이미지 교체 시점으로부터 발생한 플링 거리 변화량(예컨대, 교체 이후 y축 좌표 변화량)을 산출하고, 산출된 드래그 거리 변화량이 미리 설정된 교체 임계 값 이상이면 디스플레이 이미지가 교체될 수도 있다. Even in the case of the fling gesture, similar 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. The viewer interface application calculates the fling distance change amount (eg, the y-axis coordinate change amount after the replacement) generated from the previous image replacement time, and if the calculated drag distance change amount is greater than or equal to a preset replacement threshold value, the display image may be replaced.

이와 같이, 뷰어 인터페이스 애플리케이션은 플링 제스처의 세기 또는 플링 가속도에 비례하여 보다 많은 이미지를 교체할 수도 있다. In this way, the viewer interface application may replace more images in proportion to the intensity of the fling gesture or the fling acceleration.

도 7은, 본 발명의 일 실시예에 따른, 시간에 따른 플링 거리 변화량을 도시한 그래프이다. 7 is a graph showing a change in fling distance over time according to an embodiment of the present invention.

도 7의 그래프를 설명하기 위해, 사용자가 포인트 객체(예컨대, 손가락)를 뷰어 장치(100) 상의 일 지점에서 릴리즈하여 플링 제스처를 입력하는 경우 터치 지점(즉, 릴리즈 지점)에서 출발하는 가상의 터치 객체를 가정해보자. 터치 객체의 진행 거리가 터치 거리를 나타낸다. 릴리즈 포스가 터치 객체에 작용될 경우, 릴리즈 포스에 반대 방향의 힘이 작용하지 않는 한 단일 플링 제스처에 의해 터치 거리가 무한히 연장된다. 그러면, 이미지 교체가 무한히 지속될 수도 있다. To illustrate the graph of FIG. 7, when a user releases a point object (eg, a finger) at a point on the viewer device 100 and inputs a fling gesture, a virtual touch starting from a touch point (ie, a release point) Let's assume an object. The travel 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 acts on the release force. Then, the image replacement may continue indefinitely.

뷰어 인터페이스 애플리케이션은 단일 플링 제스처에 의해 이미지 교체가 무한히 지속되는 것을 방지하기 위해, 단일 플링 제스처 이후 플링 가속도를 감소하는 단계를 포함할 수도 있다. 특정 실시예들에서, 뷰어 인터페이스 애플리케이션은 스크린 상의 마찰 인자(friction factor)를 설정할 수도 있다. 마찰 인자와 같이 플링 가속도가 감속될 경우, 도 7의 그래프가 얻어질 수도 있다. The viewer interface application may include reducing the fling acceleration after a single fling gesture to prevent image replacement from continuing indefinitely by a single fling gesture. In certain embodiments, the viewer interface application may set a friction factor on the screen. When the fling acceleration is decelerated like the friction factor, the graph of FIG. 7 may be obtained.

마찰 인자가 일정할 경우, 플링 가속도가 증가할수록 터치 거리(예컨대, 플링 거리) 전체가 증가하므로, 하나의 플링 제스처에 의해 교체되는 이미지의 수가 증가한다. 즉, 플링 가속도가 증가면 시퀀스 구간이 증가한다. When the friction factor is constant, the total touch distance (eg, fling distance) increases as the fling acceleration increases, and thus the number of images replaced by one fling gesture increases. That is, as the fling acceleration increases, the sequence interval increases.

도 8a 및 도 8b는, 본 발명의 일 실시예에 따른, 플링 입력의 가속도에 따른 디스플레이 결과를 도시한 도면이다. 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 및 도 8b를 참조하면, 뷰어 인터페이스 애플리케이션에 드래그 보다 큰 터치 가속도를 갖는 플링 제스처가 입력될 수도 있다. 뷰어 인터페이스 애플리케이션은 양의 y축 방향을 갖는 플링 제스처에 기초하여 이미지 세트의 순 방향을 나타낸 스크롤 축 방향을 교체 진행 방향으로 변환할 수도 있다. 8A and 8B, a fling gesture having a touch acceleration greater than drag may be input to the viewer interface application. The viewer interface application may convert a scroll axis direction indicating a forward direction of an image set into an alternate progress direction based on a fling gesture having a positive y-axis direction.

도 8a의 플링 제스처와 도 8b의 플링 제스처는 동일한 초기 터치 지점(Pa)에서 릴리즈된다. 스크린 상의 오른편의 화살표는 플링 제스처의 세기를 나타낸다. 도 8b의 플링 제스처가 도 8a의 플링 제스처는 보다 강한 릴리즈 세기를 가지며, 도 8b의 플링 제스처가 도 8a의 플링 제스처 보다 높은 가속도를 가진다. 그러면, 도 8b의 플링 제스처에 의해 디스플레이되는 시퀀스가 도 8a의 플링 제스처에 의해 디스플레이되는 시퀀스 보다 긴 구간을 가진다. 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 intensity of the fling gesture. The fling gesture of FIG. 8B has a stronger release strength, 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 period than the sequence displayed by the fling gesture of FIG. 8A.

또한, 플링 가속도가 증가할수록 터치 객체의 진행속도(예컨대, 플링 속도)가 증가하며 시퀀스의 이미지 교체 속도가 증가한다. 즉, 이전 이미지 교체 시점으로부터의 터치 거리 변화량이 교체 임계 값을 넘는 시간이 단축된다. Also, as the fling acceleration increases, the moving 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 reproduction speed of the sequence corresponds to the image replacement speed. The image replacement rate is determined based on the fling rate and the replacement threshold of the fling gesture. When the fling speed is fast while the replacement threshold is maintained, the time that the amount of change in the fling distance becomes more than the replacement threshold is shortened, resulting in a fast image replacement speed.

도 7에 도시된 바와 같이, 플링 제스처 초기에 터치 객체는 릴리즈 포스에 기초한 초기 가속도를 가진다. 마찰 인자가 설정된 경우 릴리즈 이후 터치 객체에 작용하는 외부 힘은 없으며 일정한 마찰 힘만 작용하게 된다. 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.

릴리즈 포스와 같은 방향을 갖는 플링 가속도가 존재하는 가속 구간(즉, 플링 시작부터 가속도가 0이되는 지점까지의 구간)에서는 이미지 교체 속도가 점차 증가하며, 사용자는 가속 구간 동안 시간이 진행할수록 시퀀스의 재생 속도가 점차 증가하는 느낌을 받을 수도 있다. In the acceleration section where the fling acceleration in the same direction as the release force exists (that is, the section from the start of the fling to the point where the acceleration becomes 0), the image replacement speed gradually increases, and the user increases the sequence of the sequence as time progresses during the acceleration period. You may feel that the playback speed is gradually increasing.

반면 터치 가속도는 마찰 요인에 의해 점점 감소하게 되고 가속도의 방향마저 변경되어 감속하게 된다. 그러면, 릴리즈 포스와 반대 방향을 갖는 플링 가속도가 존재하는 감속 구간(즉, 가속도가 0이 되는 지점부터 터치 객체가 정지하는 지점)에서는 이미지 교체 속도가 점차 감소하며, 사용자는 시퀀스의 재생 속도가 점차 감소하는 느낌을 받을 수도 있다. On the other hand, the touch acceleration gradually decreases due to the friction factor, and the direction of the acceleration is also changed, leading to a deceleration. Then, in the deceleration section where the fling acceleration in the opposite direction to the release force exists (that is, the point where the touch object stops from the point where the acceleration becomes 0), the image replacement speed gradually decreases, and the user gradually decreases the playback speed of the sequence. You may feel a diminishing sensation.

이와 같이, 뷰어 인터페이스 애플리케이션은 사용자의 입력에 따라 상이한 구간 및/또는 재생 속도를 갖는 시퀀스로 표현함으로써, 동일한 복수의 이미지를 사용자별로 인터렉티브하게 디스플레이할 수 있다.In this way, the viewer interface application can interactively display a plurality of identical images for each user by expressing a sequence having different sections and/or playback speeds according to a user's input.

한편, 도 7의 가정에서, 단일 플링 제스처 이후 시간이 지남에 따라 터치 객체의 진행속도가 감소하므로, 도 7에 도시된 바와 같이, 터치 거리 변화량이 0이 되는 지점과 최고점 사이에 터치 거리 변화량이 거의 없어지는 구간이 존재할 수도 있다. 마찰 인자에 따라서 이러한 구간은 롱테일 구간의 형태를 가진다. 롱테일 구간에 진입하게 되면 이전 이미지 교체 시점에서 다음 이미지 교체 시점까지의 시간 간격(duration)이 길어지게 된다. 그러면, 사용자는 시퀀스가 부드럽고 원활하게 재생되지 않고 중간 중간 끊기는 느낌을 갖게 될 수도 있다. 예를 들어, 페이지 드랍과 같은 현상이 발생하는 것으로 느낄 수도 있다. On the other hand, in the assumption of FIG. 7, since the moving speed of the touch object decreases over time after the single fling gesture, as shown in FIG. 7, the amount of change in the touch distance between the point where the amount of change in touch distance becomes 0 and the highest point is There may be sections that almost disappear. Depending on the friction factor, this section has the shape of a long tail section. When entering the long tail section, the time interval from the previous image replacement time to the next image replacement time becomes longer. Then, the user may feel that the sequence is not played smoothly and smoothly and is cut off in the middle. For example, you may feel that a phenomenon such as page drop is occurring.

만약 드래그 제스처가 입력되는 경우 종료되는 것과 동일하게, 플링 거리 변화량이 0이 될 때 시퀀스의 재생이 종료될 경우, 플링 제스처로 인한 시퀀스 재생은 롱테일 구간에서 페이지 드랍 현상이 지속되는 것처럼 인식되어, 사용자는 시퀀스를 불편하게 감상하게 된다. In the same way as if the drag gesture is inputted, and the sequence playback is terminated when the fling distance change amount becomes 0, the sequence playback by the fling gesture is recognized as if the page drop phenomenon continues in the long tail section. Is uncomfortable to appreciate the sequence.

도 9는, 본 발명의 일 실시예에 따른, 시퀀스 컷 지점을 설명하기 위한 도면이다. 9 is a diagram illustrating a sequence cut point according to an embodiment of the present invention.

통상 사람의 눈은 초당 8장의 이미지가 연속으로 교체될 경우 하나의 자연스러운 동작으로 인식한다. 초당 교체 이미지의 수가 증가할수록 연결 동작이 부드럽게 재생된다. 일반적으로 사람의 눈은 초당 24 장 이상, 예를 들어, 초당 30장 또는 초장 60장의 이미지가 교체될 경우 동작의 시작과 끝이 끊김없이 부드럽게 연결된 것으로 인식한다. Normally, the human eye perceives as one natural motion when 8 images per second are continuously replaced. As the number of replacement images per second increases, the connection motion is played back smoothly. In general, the human eye perceives that the start and end of motions are seamlessly connected without interruption when 24 or more images per second, for example, 30 images per second or 60 images per second, are replaced.

예를 들어, 초당 30장 이상의 이미지 교체가 이루어지는 경우 이미지 교체는 33ms 안에 이미지를 1장 이상 교체하는 것을 나타낸다. 따라서, 이미지 교체가 33ms 안에 이루어져야 동작이 끊김없이 부드럽게 연결되는 것으로 인식된다. For example, if more than 30 images are replaced per second, image replacement means that one or more images are replaced within 33ms. Therefore, it is recognized that the operation is seamlessly connected without interruption only when the image is replaced within 33ms.

도 9를 참조하면, 롱테일 구간에서 페이지 드랍 현상이 발생하는 것을 방지하기 위해, 뷰어 인터페이스 애플리케이션은 플링 제스처가 입력된 이후 터치 객체의 진행속도가 감소하고 시퀀스 컷 지점에 도달하면 해당 제스처로 인한 이미지 교체를 종료하는 단계를 포함할 수도 있다.Referring to FIG. 9, in order to prevent a page drop phenomenon from occurring in a long tail section, the viewer interface application reduces the progression speed of the touch object after the fling gesture is input, and when the sequence cut point is reached, the image is replaced by the corresponding gesture. It may also include the step of terminating.

일 실시예에서, 뷰어 인터페이스 애플리케이션은 마찰인자 및/또는 터치 객체의 진행속도에 기초하여 이전 이미지 교체 시점에서 다음 이미지 교체 시점까지의 시간 간격을 산출하는 단계를 포함할 수도 있다. 이를 위해, 뷰어 인터페이스 애플리케이션은 산출된 시간 간격이 임계 시간 간격 이상이 되는 지점을 시퀀스 컷 지점으로 결정하는 단계를 포함할 수도 있다. In an embodiment, the viewer interface application may include calculating a time interval from a previous image replacement time to a next image replacement time based on the friction factor and/or the progression speed of the touch object. To this end, the viewer interface application may include determining a point at which the calculated time interval is equal to or greater than the threshold time interval as the sequence cut point.

뷰어 인터페이스 애플리케이션은 이전 이미지 교체 시점을 기준으로 플링 거리 변화량이 교체 임계 값 이상이 될 때까지의 시간을 산출하는 단계; 산출된 시간이 임계 시간 간격 이상인 경우 이미지 교체를 중지하는 단계를 포함할 수도 있다. 산출된 시간이 임계 시간 간격 이상인 것은 플링 속도가 결정된 시퀀스 컷 지점에 도달한 것을 나타낸다. 뷰어 인터페이스 애플리케이션은 결정된 시퀀스 컷 지점에 도달하면, (새로운 스크롤 제스처가 입력되지 않는 한) 이미지 교체를 중지한다. 특정 실시예들에서, 이전 이미지 교체 시점으로부터 터치 거리 변화량이 교체 임계 값 이상이 될 시점까지의 시간을 산출하는 단계는 플링 가속도가 0이 되면 (즉, 플링 속도가 감속하는 시점이 지나면) 수행될 수도 있다. 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 value based on the previous image replacement time point; It may include stopping the image replacement when the calculated time is greater than or equal to the threshold time interval. If the calculated time is greater than or equal to the threshold time interval, it indicates that the fling speed has reached the determined sequence cut point. When the viewer interface application reaches the determined sequence cut point, it stops replacing the image (unless a new scroll gesture is input). In certain embodiments, the step of calculating the time from the previous image replacement point to the point at which the amount of change in the touch distance becomes greater than or equal to the replacement threshold is performed when the fling acceleration becomes 0 (that is, when the fling speed decelerates). May be.

상기 임계 시간 간격은 미리 설정된 이미지 교체 간격 시간의 최소 시간 및/또는 교체 임계 값에 기초하여 설정될 수도 있다. 이미지 교체 간격 시간의 최소 시간은 시퀀스의 중간이 끊김 없이 재생되게 하는 시간을 나타낸다. 이미지 교체 시간 간격이 최소 시간 이상일 경우 시퀀스가 부드럽게 재생된다. The threshold time interval may be set based on a minimum time and/or a replacement threshold value of a preset image replacement interval time. The minimum time of the image replacement interval time represents the time to allow the middle of the sequence to be played back seamlessly. If the image replacement time interval is longer than the minimum time, the sequence is played back smoothly.

특정 실시예들에서, 상기 이미지 교체 간격 시간의 최소 시간은 사용자가 원하는 FPS의 역수로 설정될 수도 있다. 예를 들어, 사용자가 원하는 FPS가 30인 경우, 이미지 교체 간격 시간은 33ms일 수도 있다. In certain embodiments, the minimum time of the image replacement interval time may be set as an reciprocal of the 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.

뷰어 인터페이스 애플리케이션은 1ms 당 터치 객체의 진행속도를 산출하고, 이전 이미지 교체 시점으로부터의 터치 객체의 진행거리 변화량을 산출하며 및/또는 이전 이미지 교체 시점으로부터의 터치 객체의 진행거리 변화량이 교체 임계 값 이상이 되는 시간 간격이 33ms 미만인지 또는 그 이상인지 여부를 결정하는 단계를 포함할 수도 있다. The viewer interface application calculates the progression speed of the touch object per 1ms, calculates the amount of change in the progression distance of the touch object from the time of the previous image replacement, and/or the amount of change in the progression distance of the touch object from the previous image replacement time exceeds the replacement threshold. It may also include the step of determining whether the time interval to be less than 33 ms or more.

시퀀스 컷 지점이 설정되면, 플링 제스처의 초기 가속도(즉, 릴리즈 세기)에 따라 시퀀스가 상이한 속도로 종료된다. 픽셀 변화값이 클 경우, 상대적으로 빨리 감속되는 효과를 주면서 이미지 교체가 종료된다. 시퀀스 컷 지점에서 픽셀 변화값이 작을 경우, 상대적으로 느린 감속 효과를 주면서 이미지 교체가 종료된다. When the sequence cut point is set, the sequence ends at a different speed according to the initial acceleration (ie, release strength) of the fling gesture. If the pixel change value is large, the image replacement is terminated while giving a relatively fast deceleration effect. If the pixel change value at the sequence cut point is small, the image replacement is terminated with a relatively slow deceleration effect.

한편, 동일한 플링 제스처 하에서 교체 임계 값이 클수록 시퀀스는 보다 짧은 재생 구간을 가지며 교체 임계 값이 낮을수록 보다 긴 재생 구간을 가진다. On the other hand, under the same fling gesture, as the replacement threshold value increases, the sequence has a shorter playback period, and the lower the replacement threshold value, the longer playback period.

도 10은, 본 발명의 일 실시예에 따른, 교체 임계 값과 시퀀스 컷 지점 간의 관계를 설명하기 위한 도면이다. 10 is a diagram illustrating a relationship between a replacement threshold value and a sequence cut point according to an embodiment of the present invention.

도 10을 참조하면, 교체 임계 값이 클수록 페이지 드랍 현상이 발생하는 지점, 즉 시퀀스 컷 지점에 빨리 도달하게 된다. 반면, 교체 임계 값이 낮을수록 페이지 드랍 현상이 발생하는 지점에 느리게 도달하게 된다.Referring to FIG. 10, as the replacement threshold value increases, a point where a page drop phenomenon occurs, that is, a sequence cut point, is reached sooner. On the other hand, the lower the replacement threshold value, the slower it reaches the point where the page drop phenomenon occurs.

따라서, 교체 임계 값이 너무 클수록 이미지 교체에 요구되는 터치 거리 변화량이 증가하여 보다 적은 수의 이미지가 교체되므로, 뷰어 인터페이스 애플리케이션은 사용자가 예상한 종료 지점까지의 시퀀스를 표현하게 된다. 반면, 교체 임계 값이 너무 작으면, 뷰어 인터페이스 애플리케이션은 사용자가 예상한 종료 지점을 초과하여 시퀀스를 표현하게 된다. Therefore, as the replacement threshold value is too large, the amount of change in the touch distance required for image replacement increases, so that fewer images are replaced, so that the viewer interface application expresses the sequence to the end point expected by the user. On the other hand, if the replacement threshold is too small, the viewer interface application exceeds the end point expected by the user to express the sequence.

일 실시예에서, 교체 임계 값은 이미지 세트의 전체 재생 구간의 길이, 이미지 세트 내 씬(scene)의 길이, 및/또는 사용자의 플링 제스처의 통계 등에 기초하여 단일 플링 입력 시 사용자가 원하는 스크롤 지점까지 이동하게 하는 값으로 설정될 수도 있다. 상기 플링 제스처의 통계는, 예를 들어, 드래그 제스처의 터치 속도, 플링 제스처의 터치 가속도, 시퀀스로 표현되는 이미지 세트 구간, 및 이들 사이의 관계 등을 포함할 수도 있다. 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 statistics of the user's fling gesture, up to the user's desired scrolling point when entering a single fling. 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 the fling gesture, an image set section expressed as a sequence, and a relationship therebetween.

또한, 뷰어 인터페이스 애플리케이션은 초당 교체 가능한 이미지의 수를 초과하게 하는 스크롤 제스처를 입력받을 수도 있다. 스크롤 제스처의 특성(예컨대, 드래그 제스처의 터치 속도, 또는 플링 제스처의 터치 가속도 등)에 따라서 이전 이미지 교체 시점으로부터의 터치 거리 변화량이 많이 발생할 수 있으며, 그러면 교체 처리될 이미지의 수가 초당 수십 또는 수백장이 될 수도 있다. 뷰어 장치(100)의 사양에 따라서 초당 대용량의 이미지를 처리할 수도 있다. 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 (e.g., 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 may be several tens or hundreds of images per second. It could be. Depending on the specifications of the viewer device 100, a large amount of images may be processed per second.

뷰어 인터페이스 애플리케이션은 뷰어 인터페이스 애플리케이션은 초당 교체 가능한 이미지의 수를 초과하게 하는 스크롤 제스처를 입력받을 경우 상기 스크롤 제스처에 따라 교체되어야 했던 이미지 중 일부를 스킵할 수도 있다. 뷰어 인터페이스 애플리케이션은 스크린 이미지에 인접하지 않은 이미지를 다음 스크린 이미지로 교체할 수도 있다. When the viewer interface application receives a scroll gesture that causes the number of replaceable images per second to be exceeded, the viewer interface application may skip some of the images that have 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 a scroll gesture that exceeds the number of replaceable images per second is input, the viewer interface application may calculate a change amount of touch distance according to the scroll gesture, and may calculate a change amount of touch distance exceeding the range of change of touch distance. The viewer interface application may calculate the number of images to be skipped based on the excess change amount of the touch distance and the replacement threshold value.

예를 들어, 뷰어 장치(100)는 초당 60개의 이미지를 교체 가능하도록 구성될 수도 있다. 뷰어 장치(100)가 교체 임계 값이 15 픽셀로 설정된 경우 초당 900 픽셀의 터치 거리 변화량에 대해서 처리 가능하다. 뷰어 인터페이스 애플리케이션은 900 픽셀을 초과한 (예컨대, 950 픽셀의) 터치 거리 변화량을 갖게 하는 스크롤 제스처가 입력된 경우, 초과된 거리 변화량(예컨대, 50 픽셀)을 산출할 수도 있다. 뷰어 인터페이스 애플리케이션은 초과된 거리 변화량(예컨대, 50 픽셀)을 교체 임계 값으로 나눈 값을 스킵할 이미지의 수로 결정할 수도 있다. 일부 실시예에서 뷰어 인터페이스 애플리케이션은 나눈 값의 정수를 스킵할 이미지의 수로 결정할 수도 있다. 그러면 상기 예시에서 3장의 이미지가 스킵될 수도 있다. For example, the viewer device 100 may be configured to replace 60 images per second. When the viewer device 100 has the replacement threshold set to 15 pixels, it is possible to process a change in the touch distance of 900 pixels per second. The viewer interface application may calculate the exceeded distance change amount (eg, 50 pixels) when a scroll gesture to have a touch distance change amount exceeding 900 pixels (eg, 950 pixels) is input. The viewer interface application may determine a value obtained by dividing the excess distance change amount (eg, 50 pixels) by the replacement threshold value as the number of images to be skipped. In some embodiments, the viewer interface application may determine an integer divided by the number of images to be skipped. Then, in the example above, three images may be skipped.

특정 실시예들에서, 뷰어 인터페이스 애플리케이션은 스킵할 이미지의 수를 산출하고, 해당 수에 따른 이미지를 스크롤 제스처에 따라 교체되었어야 할 복수의 이미지에서 임의로 선택하고, 선택된 이미지를 스킵하여 다음 스크린 이미지를 디스플레이할 수도 있다. In certain embodiments, the viewer interface application calculates the number of images to be skipped, randomly selects an image according to the number from a plurality of images to be replaced according to a scroll gesture, and skips the selected image to select 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 them. The viewer interface application can also output the audio sound included in the image set while representing the sequence by replacing the image.

이미지 세트가 복수의 오디오를 포함할 경우, 복수의 오디오 각각은 이미지 세트의 복수의 구간에 각각 연관된다. 예를 들어, 다음의 표 1과 같이 3개의 오디오를 포함할 경우 이미지 세트의 제1 시퀀스 구간이 표현되면 제1 오디오의 사운드가 출력되고, 제2 시퀀스 구간이 표현되면 제2 오디오의 사운드가 출력되며, 제3 시퀀스 구간이 표현되면 제3 오디오의 사운드가 출력될 수도 있다. 특정 실시예들에서 이미지 세트는 복수의 씬(scene)을 가지며, 각 오디오는 각 씬에 연관될 수도 있다. When the image set includes a plurality of audios, each of the plurality of audios is each associated with a plurality of sections of the image set. For example, as shown in Table 1 below, when 3 audios are included, the sound of the first audio is output when the first sequence section of the image set is expressed, and the sound of the second audio is output when the second sequence section is expressed. When the third sequence section is expressed, the sound of the third audio may be output. In certain embodiments, an image set has a plurality of scenes, and each audio may be associated with each scene.

[표 1] 제1 오디오; 제2 오디오; 제3 오디오[Table 1] First audio; Second audio; Third audio

스크롤 제스처에 따라 스크린 이미지에 대응하는 스크롤 위치가 급격하게 변할 수도 있다. 뷰어 인터페이스 애플리케이션은 이미지 세트 구간에 포함된 이미지 세트를 결정하여 오디오와 이미지 세트를 연관시킬 수도 있다. 예를 들어, 제1 구간은 이미지 세트의 첫번째 이미지로부터 100번째 이미지를 포함하며, 제2 구간은 이미지 세트의 101번째 이미지를 포함할 수도 있다. 그러면, 첫번째 이미지로부터 100번째 이미지를 포함한 제1 이미지 세트는 제1 오디오에 연관된다. 101번째 이미지를 포함한 제2 이미지 세트는 제2 오디오에 연관된다. The scroll position corresponding to the screen image may change rapidly according to the scroll gesture. The viewer interface application may associate the audio with the image set by determining the image set included in the image set section. For example, the first section may include the 100th image from the first image of the image set, and the second section may include the 101th image of the image set. Then, the first image set including the 100th image from the first image is associated with the first audio. The 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 to the audio associated with the new image set section when the image set section associated with the screen image is changed.

드래그 제스처의 경우, 새로운 이미지 세트 구간은 시퀀스로 표현되며 사운드가 출력되는, 현재의 이미지 세트 구간에 인접한 구간일 수도 있다. In the case of the drag gesture, the new image set section may be a section adjacent to the current image set section, in which the new image set section is expressed as a sequence and sound is output.

플링 제스처의 경우, 새로운 이미지 세트 구간은 현재의 이미지 세트 구간에 인접하지 않은 구간, 예를 들어 인접한 구간의 다음 구간일 수도 있다. In the case of the fling gesture, the new image set section may be a section that is not adjacent to the current image set section, for example, a section next to the adjacent section.

특정 실시예들에서, 뷰어 인터페이스 애플리케이션은: 플링 제스처의 플링 가속도, 마찰 인자에 기초하여 (예컨대, 도 7의) 시간별 플링 속도를 산출하는 단계; 플링 속도에 기초하여 이미지 교체 완료 지점을 결정하는 단계; 릴리즈 당시 스크린 이미지를 포함한 이미지 세트 구간의 오디오의 사운드를 출력하게 하는 단계; 및 이미지 교체 완료 지점을 포함한 이미지 세트 구간에 연관된 오디오의 사운드를 출력하게 하는 단계를 포함할 수도 있다. 릴리즈 당시의 스크린 이미지 구간이 초기 구간이다. 이미지 교체 완료 지점을 포함한 이미지 세트 구간이 현재의 이미지 세트 구간으로부터 하나 이상의 구간을 점프한 경우, 현재 구간의 오디오 사운드에서 최종 구간의 오디오 사운드로 출력이 변경된다. In certain embodiments, the viewer interface application includes: calculating an hourly fling velocity (eg, of FIG. 7) based on the 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 a sound of audio 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 final 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. .

상기 예시에서, 100번째 이미지가 스크린 이미지로 디스플레이되다가 101번째 이미지가 스크린 이미지로 디스플레이되는 경우, 출력 오디오는 제1 오디오에서 제2 오디오로 변경된다. 또는 스크린 이미지가 300번째 이미지에서 50번째 이미지로 변경된 경우 출력 오디오는 제3 오디오에서 제1 오디오로 변경된다. 다른 특정 실시예들에서, 플링 속도에 기초하여 이미지 교체 완료 지점을 결정하는 단계 대신에, 소정 시간 이내에 릴리즈 당시 이미지 세트의 구간 이후의 하나 이상의 구간을 점프한 경우 점프된 구간의 오디오는 패스하고 다음 구간의 오디오를 출력하게 할 수도 있다. In the above example, when the 100th image is displayed as a screen image and the 101th 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 an 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 time, the audio of the jump section passes and the next You can also output the audio of the section.

또한, 뷰어 인터페이스 애플리케이션은 출력 오디오를 교체하는 과정에서 자연스러운 사운드 변경을 위해 크로스페이드(Cross Fade) 효과를 적용하는 단계를 포함할 수도 있다. 이 경우 오디오가 변경되는 시점은 101번째 이미지가 스크린 이미지로 변경되는 시점 이후일 수도 있다. In addition, the viewer interface application may include applying a crossfade effect to change a natural sound in the process of replacing the output audio. In this case, the time point at which the audio is changed may be after the time point at which the 101st image is changed to the screen image.

뷰어 인터페이스 애플리케이션은 다양한 구현 구조를 가질 수도 있다. 일 실시예에서, 뷰어 인터페이스 애플리케이션은 이미지를 디스플레이하는 동작과 스크롤 축 방향을 이미지 배열 축 방향으로 변환하는 동작을 동시에 처리하도록 구성될 수도 있다. 다른 일 실시예에서, 뷰어 인터페이스 애플리케이션은 이미지를 디스플레이하는 동작과 상기 축 변환 동작이 개별적으로 처리하도록 구성될 수도 있다. 이하, 전자의 실시예를 제1 실시예로, 후자의 실시예를 제2 실시예로 지칭하여 설명한다. Viewer interface applications may have various implementation structures. In one 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 process an operation of displaying an image and an operation of translating the axis separately. Hereinafter, the former embodiment will be referred to as the first embodiment and the latter embodiment will be referred to as the second embodiment.

도 11은, 본 발명의 제1 실시예에 따른, 뷰어 인터페이스 애플리케이션 구조의 개념도이다. 11 is a conceptual diagram of the structure of a viewer interface application according to the first embodiment of the present invention.

도 11을 참조하면, 뷰어 인터페이스 애플리케이션은 미리 설정된 수의 뷰를 생성하는 단계를 포함한다. 특정 실시예들에서, 상기 뷰의 수는 뷰어 장치(100)의 저장 용량에 기초하여 설정될 수도 있다. 예를 들어, 뷰어 인터페이스 애플리케이션은 100개의 뷰를 생성할 수도 있다. Referring to FIG. 11, the viewer interface application includes generating 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 location on the image array axis.

로드된 복수의 이미지는 미리 생성된 뷰에 할당된다. 예를 들어, 이미지 세트에서 복수의 이미지가 처음 로드되는 경우 첫번째 이미지 내지 100번째 이미지가 로드되어 뷰에 각각 할당된다. The loaded plurality of images are assigned to the pre-generated view. For example, when a plurality of images from an image set are first loaded, the first to 100th images are loaded and assigned to the views, respectively.

또한, 뷰어 인터페이스 애플리케이션은 복수의 뷰를 적층할 수도 있다. 일 실시예에서, 복수의 뷰에 할당되는 복수의 이미지는 이미지 배열 축에 배열된 순서에 대응할 수도 있다. 그러면, 스크롤 제스처에 반응하여 디스플레이될 이미지의 이미지 배열 축 상의 순서가 변경되면, 아래에서 서술하는 바와 같이, 디스플레이 뷰가 적층 순서에 따라 변경될 수도 있다. 예를 들어, 우선 맨 위의 이미지를 디스플레이하고, 스크롤 제스처에 의해 스크롤 입력이 획득되면 맨 위의 이미지가 스크린 상에서 사라지게 되고 아래 있던 이미지가 디스플레이된다. In addition, the viewer interface application may stack a plurality of views. In an embodiment, a plurality of images allocated to a plurality of views may correspond to the order in which they are arranged on the image arrangement axis. Then, when the order of the images to be displayed on the image arrangement axis is changed in response to the scroll gesture, the display view may be changed according to the stacking order, as described below. For example, first, the top image is displayed, and when a scroll input is obtained by a scroll gesture, the top image disappears from the screen and the bottom image is displayed.

뷰어 인터페이스 애플리케이션은 복수의 뷰 중에서 하나의 뷰를 디스플레이 뷰로 선택하는 단계를 포함한다. 일반적으로 이미지 배열 축에서 가장 처음의 디스플레이 순서를 갖는, 첫번째 이미지가 할당된 뷰가 가장 먼저 디스플레이 뷰로 선택된다. 다른 일 실시예에서, 사용자가 이전에 이미 동일한 이미지 세트에 관한 디스플레이 내역을 갖는 경우, 가장 마지막에 디스플레이되었던 이미지가 할당된 뷰가 디스플레이 뷰로 선택될 수도 있다. The viewer interface application includes selecting one of the plurality of views as the 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 first selected as the display view. In another embodiment, when the user previously already has display details for the same set of images, the view to which the image that was displayed last is assigned may be selected as the display view.

뷰어 인터페이스 애플리케이션은 디스플레이 뷰에 할당된 이미지를 스크린 상에 디스플레이하는 단계를 포함한다. 스크린 상에 디스플레이되는 할당된 이미지는, 전술한 바와 같이, 뷰어 인터페이스 애플리케이션에 의해 제공되는 스크린 영역 전체를 채우도록 디스플레이된다. 디스플레이 뷰 이미지 내부의 다른 영역을 디스플레이하기 위해 스크린 영역이 이동하진 않는다. The viewer interface application includes displaying an image assigned to the display view on the 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 does not move to display other areas inside the display view image.

전술한 바와 같이, 뷰어 인터페이스 애플리케이션은 스크린 상의 스크롤 제스처를 검출하여 스크롤 입력으로 변환하는 단계를 포함한다. 스크롤 입력은 스크린 이미지의 교체 진행 방향을 포함한다. 뷰어 인터페이스 애플리케이션은 변환된 스크롤 입력에 기초하여 상기 교체 진행 방향으로 디스플레이 뷰를 변경한다. As described above, the viewer interface application includes the step of detecting a scroll gesture on the screen and converting it into a scroll input. The scroll input includes the direction in which the screen image is replaced. The viewer interface application changes the display view in the direction of the replacement process based on the converted scroll input.

일 실시예에서, 복수의 뷰는 이미지 배열 축의 배열 순서에 대응하도록 적층될 수도 있다. 그러면, 뷰어 인터페이스 애플리케이션은 스크롤 입력에 기초하여 다음 디스플레이될 이미지가 할당된 뷰가 디스플레이 뷰로 선택하고, 새롭게 선택된 디스플레이 뷰의 이미지를 스크린 영역에 디스플레이한다. In an embodiment, a plurality of views may be stacked to correspond to the arrangement order of the image arrangement axes. Then, the viewer interface application selects a view to which an image to be displayed next is assigned as the display view based on the scroll input, and displays the image of the newly selected display view on the screen area.

도 11의 뷰어 인터페이스 애플리케이션은 뷰의 수가 정해져 있으므로, 스크롤 입력 시에 뷰를 유지하고 이미지를 새롭게 할당하는, 리싸이클(recycle) 단계를 포함할 수도 있다. 100장의 이미지가 로드된 상기 예시에서, 첫번째 이미지가 스크린 상에서 사라지고 두 번째 이미지가 스크린 상에 디스플레이되는 경우 사라져 보이지 않는 이미지가 할당된 뷰에 101번째 이미지가 로드되어 할당될 수 있다. 다시 반대 방향의 스크롤 제스처가 검출되어 스크롤 입력이 획득되면, 101번째 이미지가 할당된 뷰에 다시 첫번째 이미지가 로드되어 할당되고, 디스플레이 뷰로 선택된다. The viewer interface application of FIG. 11 may include a recycling step of maintaining the view and allocating a new image upon scroll input, since the number of views is determined. 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 allocated to the view to which the disappeared and invisible image is allocated. When a scroll gesture in the opposite direction is detected again and a scroll input is obtained, the first image is loaded and assigned again to the view to which the 101st image is assigned, and is selected as the display view.

특정 실시예에서, 복수의 뷰는 스크린 이미지가 할당되는 뷰와 버퍼 뷰를 포함할 수도 있다. 뷰어 인터페이스 애플리케이션은 스크롤 입력이 획득되어 사라진 이미지를 버퍼 뷰에 할당하는 단계를 포함할 수도 있다. 예를 들어, 도 11에서 뷰어 인터페이스 애플리케이션은 두 번째로 배열된 뷰를 최초 디스플레이 뷰로 가지며, 첫 번째로 배열된 뷰를 버퍼 뷰로 가질 수도 있다. 두번째 이미지가 할당된 뷰가 디스플레이 뷰로 변경되면, 첫번?? 이미지는 버퍼 뷰에 할당된다. 100번째 뷰에는 100번째 이미지가 로드되어 할당된다. In a specific embodiment, the plurality of views may include a view to which a screen image is assigned and a buffer view. The viewer interface application may include the step of allocating the disappeared image as a scroll input is obtained to the buffer view. For example, in FIG. 11, the viewer interface application may have a second-arranged view as an initial display view, and a first-arranged view as a buffer view. When the view to which the second image is assigned changes to the display view, the first?? The image is assigned to the buffer view. The 100th image is loaded and allocated to the 100th view.

제1 실시예에 따르면 상대적으로 높은 FPS를 달성할 수 있는 장점을 가진다. According to the first embodiment, it has the advantage of achieving a relatively high FPS.

도 12는, 제2 실시예에 따른, 뷰어 인터페이스 애플리케이션 구조의 개념도이다. 12 is a conceptual diagram of a structure of a viewer interface application according to a second embodiment.

도 12의 제2 실시예는 도 11의 제1 실시예와 구조적 측면의 차이를 제외한, 애플리케이션 동작을 동일하게 공유하므로, 차이점을 위주로 설명한다. The second embodiment of FIG. 12 and the first embodiment of FIG. 11 share the same application operation except for differences in structural aspects, so the difference will be mainly described.

도 12를 참조하면, 뷰어 인터페이스 애플리케이션은 이미지 디스플레이를 위한 이미지 쇼 유닛(131) 및 스크린 이미지의 이미지 배열 축 상의 위치를 획득하는 스크롤 입력 처리 유닛(133)을 포함할 수도 있다. Referring to FIG. 12, the viewer interface application may include an image show unit 131 for displaying an image and a scroll input processing unit 133 for obtaining a position of a screen image on an image arrangement axis.

이미지 쇼 유닛(131)은 하나 이상의 뷰를 포함할 수도 있다. 일부 실시예에서, 이미지 쇼 유닛(131)은 도 12에 도시된 바와 같이 단일 뷰를 포함할 수도 있다. 다른 일부 실시예에서, 이미지 쇼 유닛(131)은 다수의 뷰를 포함할 수도 있다. 그러나, 도 11의 뷰 보다 훨씬 적은 수로서, 예를 들어 5개 이하(예컨대, 3개)의 뷰를 포함할 수도 있다. 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, 5 or fewer (eg, 3) views in a much smaller number than the views of FIG. 11.

뷰어 인터페이스 애플리케이션은 하나 이상의 이미지를 (예컨대, 메모리(110)에) 로드할 수도 있다. 여기서, 로드되는 하나 이상의 이미지는 이미지 배열 축 상에 배열된 하나 이상의 이미지이다. 각 이미지는 이미지 배열 축 상의 개별 위치를 가진다. The viewer interface application may load one or more images (eg, into memory 110). 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 location on the image array axis.

이미지 쇼 유닛(131)은 로드된 이미지를 하나 이상의 뷰에 할당하고 스크린 상에 디스플레이하는 단계를 포함한다. The image show unit 131 includes the step of assigning the loaded image to one or more views and displaying it on the screen.

스크롤 입력 처리 유닛(133)은 스크롤 입력을 처리하여 이미지 배열 축 상의 위치로 변환하는 동작을 수행한다. The scroll input processing unit 133 performs an operation of processing a scroll input and converting it to a position on an image arrangement axis.

스크롤 입력 처리 유닛(133)은 스크롤 제스처의 터치 방향에 기초하여 이미지 배열 축 상의 방향을 결정하는 단계를 포함한다. 또한, 스크롤 입력 처리 유닛(133)은 결정된 이미지 배열 축 상의 방향에 기초하여 교체 진행 방향을 결정하는 단계를 포함한다. The scroll input processing unit 133 includes determining a direction on the image arrangement axis based on the touch direction of the scroll gesture. In addition, the scroll input processing unit 133 includes a step of determining a replacement progress direction based on the determined direction on the image arrangement axis.

스크롤 입력 처리 유닛(133)은 검출된 터치 거리 변화량 및 교체 임계 값 중 하나 이상에 기초하여 이미지 교체 여부를 결정할 수도 있다. 스크롤 입력 처리 유닛(133)은 터치 거리 변화량이 교체 임계 값 이상인 경우 스크린 이미지의 교체를 결정하고 다음 디스플레이될 이미지를 메모리에 로드한다. 스크롤 입력 처리 유닛(133)은 단일 스크롤 입력에 따라서 교체될 이미지의 수를 산출할 수도 있다. The scroll input processing unit 133 may determine whether to replace the image based on one or more of the detected change in the touch distance and the replacement threshold. The scroll input processing unit 133 determines the replacement of the screen image when the amount of change in the touch distance is greater than or equal to the replacement threshold value, and loads an image to be displayed next into the memory. The scroll input processing unit 133 may calculate the number of images to be replaced according to a single scroll input.

스크롤 입력 처리 유닛(133)은 스크린 이미지의 이미지 배열 축 상의 위치를 스크롤 위치로 획득하도록 구성된다. 스크롤 입력 처리 유닛(133)은 스크린 이미지가 교체되는 경우, 새롭게 교체된 이미지의 이미지 배열 축 상의 위치를 새로운 스크롤 위치로 획득할 수도 있다. 그러면, 스크린 이미지의 스크롤 위치가 이미지 교체로 인해 이동된다. The scroll input processing unit 133 is configured to obtain a position on the image arrangement axis of the screen image as a scroll position. When the screen image is replaced, the scroll input processing unit 133 may acquire a position on the image arrangement axis of the newly replaced image as a new scroll position. Then, the scroll position of the screen image is moved due to the image replacement.

일 실시예에서, 뷰어 인터페이스 애플리케이션이 단일 뷰를 포함한 경우, 스크롤 입력 처리 유닛(133)은 터치 거리 변화량이 교체 임계 값 이상인 것에 반응하여 다음 디스플레이될 이미지를 메모리에 로드한다. 다음 디스플레이될 이미지는 이미지 배열 축 상에서 교체 진행 방향의 다음 순서를 갖는 이미지일 수도 있다. 특정 실시들에서, 전술한 바와 같이 이미지 세트의 일부를 스킵할 경우, 이러한 스킵에 기초한 다음 순서의 이미지가 로드된다. In one embodiment, when the viewer interface application includes a single view, the scroll input processing unit 133 loads an image to be displayed next into the memory in response to the amount of change in the touch distance being equal to or greater than the replacement threshold. The image to be displayed next may be an image having the next order in the direction of replacement progress 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.

그러면, 이미지 쇼 유닛(131)은 다음 로드된 이미지를 단일 뷰에 할당한다. 단일 뷰에 새롭게 할당된 이미지가 디스플레이된다. Then, the image show unit 131 allocates the next loaded image to a single view. An image newly assigned to a single view is displayed.

다른 일 실시예에서, 뷰어 인터페이스 애플리케이션이 다수의 뷰를 포함한 경우, 스크롤 입력 처리 유닛(133)은 터치 거리 변화량이 교체 임계 값 이상인 것에 반응하여 다음 디스플레이될 이미지를 메모리에 로드한다. In another embodiment, when the viewer interface application includes a plurality of views, the scroll input processing unit 133 loads an image to be displayed next into the memory in response to the amount of change in the touch distance being equal to or greater than the replacement threshold value.

스크롤 입력 처리 유닛(133)은 스크롤 입력에 기초하여 스크린 이미지에 대응하는 이미지 배열 축의 위치를 이동시킬 수도 있다. 특정 실시예들에서, 이미지 배열 축의 위치 이동은 단일 스크롤 입력에 기반한 전체 위치 이동일 수도 있다. 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 positional movement of the image arrangement axis may be an entire positional movement based on a single scroll input.

스크롤 입력 처리 유닛(133)은 스크롤 입력에 따른 이동 구간 사이의 하나 이상의 위치에 대응한 이미지를 로드할 수도 있다. The scroll input processing unit 133 may load an image corresponding to one or more positions between moving sections according to the scroll input.

이미지 쇼 유닛(131)은 메모리에 로드된 다수의 이미지를 다수의 뷰에 각각 할당한다. 다수의 뷰에 할당된 이미지가 순차적으로 디스플레이된다. The image show unit 131 allocates a plurality of images loaded in the memory to a plurality of views, respectively. Images assigned to multiple views are sequentially displayed.

예를 들어, 뷰어 인터페이스 애플리케이션이 3개의 뷰를 포함하고 단일 스크롤 입력에 의해 앞으로 3장의 이미지가 교체되는 상황을 가정해보자. 스크롤 입력 처리 유닛(133)은 단일 스크롤 입력에 의해 전체 교체 이미지 3장을 메모리에 로드한다. 이미지 쇼 유닛(131)은 교체 이미지 3장을 3개의 뷰에 각각 할당한다. 새롭게 할당된 3장의 이미지가 순차적으로 디스플레이된다. For example, suppose a viewer interface application contains 3 views and a single scrolling input replaces 3 images in the future. 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 displayed sequentially.

일부 실시예에서, 상기 다수의 뷰에는 이미지 배열 축 상의 순서에 기초한 할당기준이 설정될 수도 있다. 예를 들어, 이미지 쇼 유닛(131)은 제1 뷰에는 가장 순방향의 순서를 갖는 이미지를 할당하고, 제2 뷰에는 중간순서를 갖는 이미지를 할당하며, 제3 뷰에는 가장 역방향의 순서를 갖는 이미지를 할당할 수도 있다. 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 allocates an image having the most forward order to the first view, allocates an image having the middle order to the second view, and the image having the most reverse order to the third view. Can also be assigned.

또한, 스크롤 입력 처리 유닛(133)은 전체 터치 거리 변화량에 따른 교체되는 전체 이미지의 수가 상기 다수의 뷰의 수 이상인 경우, 전체 이미지 중 일부를 메모리에 로드한다. 그러면, 전체 이미지의 일부가 상기 다수의 뷰에 각각 할당된다. Further, the scroll input processing unit 133 loads some of the entire images into the memory when the number of all images to be replaced according to the amount of change in the total touch distance is greater than or equal to the number of the plurality of views. Then, a part of the entire image is allocated to the plurality of views, respectively.

일부 실시예에서, 스크롤 입력 처리 유닛(133)은 단일 스레드(예컨대, 메인 스레드)로 구성되며, 검출된 터치 거리 변화량에 따라 스크린 이미지의 스크롤 위치를 이동시킬 수도 있다. 예를 들어, 스크롤 입력 처리 유닛(133)은 스크롤 제스처 검출 시 콜백 함수 값을 받아 새로운 이미지를 로드시키고, 스크린 이미지의 스크롤 위치를 새로운 이미지의 위치로 이동시킨다. 즉, 스크롤 입력에 동기화하여 스크롤 위치가 이동함으로써 스크린 이미지가 교체된다. 상기 일부 실시예의 경우 데이터 처리 측면 및 용량 관리 측면에서 장점을 가진다. 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 change in the touch distance. For example, when detecting a scroll gesture, the scroll input processing unit 133 loads a new image by receiving a callback function value, 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.

다른 일부 실시예에서, 스크롤 입력 처리 유닛(133)은 복수의 스레드(예컨대, 메인 스레드 및 보조 스레드)로 구성된다. 하나의 스레드에 의해 스크롤 제스처의 터치 거리 변화량이 검출되고 이미지 교체 여부가 결정된다. 다른 스레드에 의해 현재의 스크린 이미지에 대응한 스크롤 위치가 업데이트되며 보관된다. 상기 하나의 스레드는 다른 스레드에 일정 시간(예컨대, 1초) 동안 N번(예컨대, 30번 이상) 스크린 이미지의 스크롤 위치를 문의하고 현재의 스크롤 위치를 회신한다. 스크롤 입력 처리 유닛(133)은 회신된 스크롤 위치에 대응한 이미지를 메모리에 로드한다. 이미지 쇼 유닛(131)은 상기 이미지를 새로운 스크린 이미지로 디스플레이한다. 즉, 스크롤 입력의 수행과 스크롤 위치의 이동은 비동기적으로서, 위치 확인에 반응하여 스크린 이미지가 교체된다. 상기 다른 일부 실시예는 스크롤 제스처의 검출이 오류가 발생할 경우 급격한 점프가 이루어지거나 교체가 되지 않는 문제가 줄어드는 장점을 가진다. In some other embodiments, the scroll input processing unit 133 is composed of a plurality of threads (eg, a main thread and an auxiliary thread). The amount of change in the touch distance of the scroll gesture is detected by one thread, and whether to replace the image is determined. The scroll position corresponding to the current screen image is updated and stored by another thread. The one thread queries another thread for a scroll position of the screen image N times (eg, 30 times or more) for a predetermined 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. In the other embodiments, when an error occurs in detecting a scroll gesture, a problem in which a sudden jump or replacement is not performed is reduced.

제2 실시예에 따르면 이미지가 할당되는 뷰의 수가 매우 적으므로, 메모리 누수에 대한 문제가 발생하지 않는다. According to the second embodiment, since the number of views to which an image is allocated is very small, a problem of a memory leak does not occur.

추가적으로, 뷰어 인터페이스 애플리케이션은: 복수의 이미지를 포함한 콘텐츠를 선택하는 입력을 수신하는 단계를 포함할 수도 있다. 상기 복수의 이미지는 이미지 세트의 일부 또는 전부일 수 있다. 상기 이미지 세트는 이미지, 그리고 텍스트 및/또는 오디오의 조합의 세트일 수 있다. 일 실시예에서, 콘텐츠는 이미지 세트를 이루는 일련의 이미지로서 일부 또는 전부를 포함할 수도 있다. Additionally, the viewer interface application may include: receiving an input for selecting content including a plurality of images. The plurality of images may be part or all of the 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 as a series of images forming a set of images.

일 실시예에서, 뷰어 인터페이스 애플리케이션은: 콘텐츠 플랫폼 서버(미도시)에 액세스하는 단계; 및 특정 콘텐츠에 대한 선택을 유도하는 UI(또는 GUI)를 디스플레이하는 단계를 더 포함할 수도 있다. 콘텐츠의 선택 입력이 수신되면, 뷰어 장치(100)의 뷰어 인터페이스 애플리케이션은 플랫폼 서버에 선택된 콘텐츠에 포함된 하나 이상의 이미지를 요청하여 수신하고, 이미지 메모리에 로드하게 한다. In one embodiment, the viewer interface application comprises: accessing a content platform server (not shown); And displaying a UI (or GUI) that induces a selection for a specific content. When a 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 it into an image memory.

특정 실시예들에서, 상기 선택된 특정 콘텐츠는 특히 웹툰 또는 웹툰 미리보기와 같은 서비스 콘텐츠일 수도 있다. 다른 특정 실시예들에서, 상기 선택된 특정 콘텐츠는 전술한 서비스 콘텐츠와 관련된 다른 콘텐츠일 수도 있다. 예를 들어, 서비스 콘텐츠의 광고, 미리보기, 시놉시스 등, 또는 서비스 콘텐츠의 시리즈의 광고, 미리보기, 시놉시스 등을 포함할 수도 있다. In certain embodiments, the selected specific content may in particular be service content such as webtoon or webtoon preview. In other specific embodiments, the selected specific content may be other content related to the aforementioned service content. For example, it may include an advertisement, a preview, a synopsis of service content, or an advertisement, a preview, a synopsis of a series of service content, and the like.

이와 같은 실시예들에 의하여 기존 모션툰과는 상이한 새로운 콘텐츠 제공 경험을 제공할 수 있다. According to such embodiments, it is possible to provide a new content providing experience different from the existing motion toon.

즉, 예를 들어 모션툰은 다수의 컷 이미지의 나열과 같은 정적 이미지 나열 방식의 웹툰 뷰어에 있어서 일부 컷에 한해 특수효과(예컨대, 애니메이션, 효과음, 진동 등)가 적용된 것인 반면, 본 발명 실시예들에 의하면 정적이고 평면적인 이미지 나열이 아닌 사용자 입력에 반응하여 심도 중심의 동적 컨텐츠 감상 경험을 제공할 수 있다.That is, for example, motion toon is a webtoon viewer in a static image listing method such as listing multiple cut images, in which special effects (e.g., animation, sound effects, vibration, etc.) are applied to only some cuts, whereas the present invention is implemented. According to an example, it is possible to provide a depth-centered dynamic content viewing experience in response to a user input rather than a static and flat image arrangement.

보다 구체적으로, 동작 시점의 측면에 있어서, 모션툰은 특정 이미지 위치(position)에 도달할 때 또는 특정 이미지가 완전히 노출되었을 때 지정해둔(입력해둔) 이미지 위치(position)까지 상기 특수효과가 자동으로 수행되는 방식인 반면, 본 발명 실시예들에서는 이미지 배열 축 상의 임의의 위치에서 스크롤 입력과 같은 사용자 입력이 검출될 때 해당 입력 값만큼 이미지의 서브 세트가 디스플레이되는 차이점이 있다.More specifically, in terms of the motion point of view, the motion toon automatically activates the special effect up to the specified (input) image position when a specific image position is reached or when a specific image is fully exposed. On the other hand, 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, there is a difference in that a subset of images is displayed by the corresponding input value.

또한, 사용자 입력 처리 측면에서, 모션툰에서는 지나간 이미지는 동적이 아닌 정지 이미지(still image)로만 표시되며, 특수효과의 진행 속도(예컨대, 애니메이션의 가/감속 처리)를 조절하는 것이 불가능하다. 반면, 본 발명 실시예들에서는 사용자의 입력을 모두 처리하여 이미지를 디스플레이하기 때문에 되감기 동작이 가능하고, 가속 및 감속 처리가 가능하다. In addition, in terms of user input processing, in the motion toon, the past image is displayed only as a still image, not dynamic, and it is impossible to adjust the progress speed of the special effect (eg, acceleration/deceleration processing of animation). On the other hand, in the 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.

또한, 기술 구현의 측면에서 보더라도, 모션툰의 경우 이미지를 평면적으로(예컨대, 도 3의 y축을 따라) 이어지도록 나열하여 특정 위치에서 지정된 위치까지 자동 스크롤 되는 형태를 가지므로 특수효과 시작 시점의 이미지가 스크린 하단에 위치한 경우 스크린 상단을 기준으로 플레이되어 모션툰의 화면이 깨져 보이는 반면, 본 발명 실시예들의 경우 이미지를 평면적으로 나열하는 것이 아니라 이미지 배열 축(예컨대, 도 3의 Z축)에 각 이미지를 적층하듯이 배열하고 사용자 입력에 대응하여 교체하되 하나의 개별 이미지를 하나의 스크린 이미지로 구성하여 스크린에 꽉 채워 디스플레이하기 때문에 스크린 상의 이미지가 깨져 보이지 않게 된다. In addition, even in terms of technology implementation, in the case of motion toon, the image at the start of the special effect is in the form of automatically scrolling from a specific position to a specified position by arranging images to be connected in a plane (eg, along the y-axis in FIG. 3). If is located at the bottom of the screen, it is played based on the top of the screen and the screen of the motion toon is broken. The images are arranged as if they are stacked and replaced in response to user input, but since one individual image is composed of a single screen image and displayed on the screen, the image on the screen is broken and invisible.

이상에서 설명한 실시예들에 따른 뷰어 인터페이스 애플리케이션을 통해 복수의 이미지를 디스플레이하는 방법 및 이를 수행하는 뷰어 장치, 그리고 뷰어 인터페이스 애플리케이션에 의한 동작은, 적어도 부분적으로 컴퓨터 프로그램으로 구현되고 컴퓨터로 읽을 수 있는 기록매체에 기록될 수 있다. The method of displaying a plurality of images through the viewer interface application according to the above-described embodiments, the viewer device performing the same, and the operation by the viewer interface application are at least partially implemented as a computer program and a computer-readable recording Can be recorded on media.

상기 컴퓨터는 퍼스널 컴퓨터, 데스크탑 컴퓨터, 랩탑 컴퓨터, 노트북, 스마트 폰, 또는 이와 유사한 것과 같은 컴퓨팅 장치일 수도 있고 통합될 수도 있는 임의의 장치일 수 있다. 컴퓨터는 하나 이상의 대체적이고 특별한 목적의 프로세서, 메모리, 저장공간, 및 네트워킹 구성요소(무선 또는 유선 중 어느 하나)를 가지는 장치다. 상기 컴퓨터는 예를 들어, 마이크로소프트의 윈도우와 호환되는 운영 체제, 애플 OS X 또는 iOS, 리눅스 배포판(Linux distribution), 또는 구글의 안드로이드 OS와 같은 운영체제(operating system)를 실행할 수 있다. The computer may be a computing device such as a personal computer, desktop computer, laptop computer, notebook, smart phone, or the like, or may be any device that may be integrated. A computer is a device with one or more alternative 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, Apple OS X or iOS, a Linux distribution, or an operating system such as Google's Android OS.

상기 컴퓨터 프로그램은 상술한 컴퓨터에서 실행될 수 있는 명령어 세트로 구성되며, 상기 컴퓨터의 형태에 따라 그 명칭이 상이할 수 있다. 예를 들어, 상기 컴퓨터의 형태가 스마트 폰인 경우, 상기 컴퓨터 프로그램은 앱으로 지칭될 수 있다. The computer program is composed of a set of instructions that can be executed in 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.

실시예들에 따른 뷰어 인터페이스 애플리케이션, 뷰어 장치 및 이미지를 디스플레이하는 방법에 의한 동작을 구현하기 위한 프로그램이 기록되고 컴퓨터가 읽을 수 있는 기록매체는 컴퓨터에 의하여 읽혀질 수 있는 데이터가 저장되는 모든 종류의 기록장치를 포함한다. 컴퓨터가 읽을 수 있는 기록매체의 예로는 ROM, RAM, CD-ROM, 자기 테이프, 플로피디스크, 광 데이터 저장장치 등을 포함한다. 또한 컴퓨터가 읽을 수 있는 기록매체는 네트워크로 연결된 컴퓨터 시스템에 분산되어, 분산 방식으로 컴퓨터가 읽을 수 있는 코드가 저장되고 실행될 수도 있다. 또한, 본 실시예를 구현하기 위한 기능적인 프로그램, 코드 및 코드 프레그먼트(fragment)들은 본 실시예가 속하는 기술 분야의 통상의 기술자에 의해 용이하게 이해될 수 있을 것이다.The viewer interface application according to the embodiments, the viewer device, and the program for implementing the operation by the method of displaying an image are recorded, and the computer-readable recording medium is all kinds of records in which data that can be read by a computer is stored. Including the device. Examples of computer-readable recording media 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 over a computer system connected through a network, and computer-readable codes may be stored and executed in a distributed manner. In addition, functional programs, codes, and code fragments for implementing this embodiment may be easily understood by those of ordinary skill in the art to which this embodiment belongs.

이상에서 살펴본 본 발명은 도면에 도시된 실시예들을 참고로 하여 설명하였으나 이는 예시적인 것에 불과하며 당해 분야에서 통상의 지식을 가진 자라면 이로부터 다양한 변형 및 실시예의 변형이 가능하다는 점을 이해할 것이다. 그러나, 이와 같은 변형은 본 발명의 기술적 보호범위 내에 있다고 보아야 한다. 따라서, 본 발명의 진정한 기술적 보호범위는 첨부된 특허청구범위의 기술적 사상에 의해서 정해져야 할 것이다.The present invention described above has been described with reference to the embodiments shown in the drawings, but these are merely exemplary, and those of ordinary skill in the art will understand that various modifications and variations of the embodiments are possible therefrom. However, such a modification should be considered to be within the technical protection scope of the present invention. Therefore, 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 including a memory and a processor, wherein the processor is configured to execute an instruction stored in a memory, the instruction being:
In an image set consisting of a plurality of individual images arranged on the image array axis and each of which display order is specified, the objects included in the individual images are animated by giving a sense of space in response to the scroll input, and the individual displayed in response to the scroll input. Replacing the image-the scroll input includes a drag gesture or a fling gesture; And
Stopping the replacement of the individual image- When the scroll input is the fling gesture, stopping the replacement of the image according to the fling gesture based on a time interval from the previous image replacement time to the next image replacement time. -Including,
A viewer device, characterized in that one individual image constitutes one screen image displayed on the screen.
제1항에 있어서,
상기 개별 이미지를 교체하는 단계는,
상기 복수의 개별 이미지로 이루어진 이미지 세트에서 제1 이미지를 스크린 상에 디스플레이하는 단계; 그리고
상기 스크롤 입력에 반응하여 상기 스크린 상에 디스플레이되는 제1 이미지를 사라지게 하고 상기 디스플레이 순서에 기초하여 제2 이미지를 상기 스크린 상에 디스플레이하는 단계를 포함하는 것을 특징으로 하는 뷰어 장치.
The method of claim 1,
The step of replacing the individual images,
Displaying a first image on a screen from an image set consisting of the plurality of individual images; And
And dismissing the first image displayed on the screen in response to the scroll input and displaying a second image on the screen based on the display order.
제1항에 있어서, 상기 개별 이미지를 교체하는 단계는,
스크린 상에 스크롤 입력을 입력 받는 단계;
상기 스크롤 입력에서 상기 스크린의 평면 상의 특정 축 상의 터치 특성을 획득하는 단계;
상기 스크롤 입력의 터치 특성에 기초하여 스크린 이미지의 교체 진행 방향을 결정하는 단계; 및
상기 스크롤 입력의 터치 특성에 기초하여 스크린 이미지로서 제1 이미지를 제2 이미지로 교체하는 단계를 포함하고,
상기 스크린의 평면의 특정 축은 스크롤 축에 대응하는 것으로 미리 설정된 일 축인 것을 특징으로 하는 뷰어 장치.
The method of claim 1, wherein replacing the individual image comprises:
Receiving a scroll input on the screen;
Acquiring a touch characteristic on a specific axis on the plane of the screen in the scroll input;
Determining a replacement direction of the screen image based on the touch characteristic of the scroll input; And
Including the step of replacing the first image as a second image as a screen image based on the touch characteristic of the scroll input,
A viewer device, characterized in that the specific axis of the plane of the screen corresponds to a scroll axis and is a preset axis.
제1항에 있어서,
상기 스크롤 입력은, 드래그 제스처 또는 플링 제스처를 포함하는 것을 특징으로 하는 뷰어 장치.
The method of claim 1,
The scroll input, the viewer device, characterized in that it comprises a drag gesture or a fling gesture.
제3항에 있어서, 상기 스크롤 입력에서 상기 스크롤 축 상의 터치 특성을 획득하는 단계는,
상기 스크롤 축 상의 터치 방향, 터치 속도, 터치 가속도 및 터치 거리 변화량 중 하나 이상을 획득하는 것을 특징으로 하는 뷰어 장치.
The method of claim 3, wherein obtaining a touch characteristic on the scroll axis in the scroll input comprises:
A viewer device, characterized in that acquiring at least one of a touch direction on the scroll axis, a touch speed, a touch acceleration, and a change amount of a touch distance.
제3항에 있어서, 상기 스크롤 입력에서 상기 스크롤 축 상의 터치 특성을 획득하는 단계는,
상기 스크롤 입력이 플링 제스처인 경우, 릴리즈 지점에서 검출되는 플링 가속도 및 미리 설정된 마찰 인자에 의해 플링 거리 변화량을 산출하는 단계를 포함하며,
상기 마찰 인자는 플링 가속도가 감속하게 하는 것을 특징으로 하는 뷰어 장치.
The method of claim 3, wherein 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 change amount based on a fling acceleration detected at a release point and a preset friction factor,
The friction factor is a viewer device, characterized in that the fling acceleration to decelerate.
제3항에 있어서, 상기 교체 진행 방향을 결정하는 단계는,
상기 스크롤 축 상의 방향을 이미지 배열 축의 방향으로 변환하는 단계; 및
변환된 이미지 배열 축의 방향을 교체 진행 방향으로 결정하는 단계를 포함하는 것을 특징으로 하는 뷰어 장치.
The method of claim 3, wherein determining the direction in which the replacement proceeds,
Converting a direction on the scroll axis to a direction on an image array axis; And
And determining a direction of the converted image array axis as a direction of replacement.
제7항에 있어서,
상기 스크롤 축에 대응한 스크린 평면의 특정 축은 스크린의 수평 축 또는 수직 축이고,
상기 이미지 배열 축은 스크린의 평면에 평행하지 않은 축인 것을 특징으로 하는 뷰어 장치.
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, wherein the image arrangement axis is an axis that is not parallel to the plane of the screen.
제1항에 있어서, 상기 개별 이미지를 교체하는 단계는,
상기 스크롤 입력의 터치 거리 변화량과 미리 설정된 교체 임계 값을 비교하는 단계; 및
상기 터치 거리 변화량이 교체 임계 값 이상인 경우, 상기 스크린 이미지를 교체 진행 방향에 배열된 다른 이미지로 교체하는 단계를 포함하되,
상기 터치 거리 변화량은 이전 이미지 교체 시점으로부터의 터치 거리 변화량인 것을 특징으로 하는 뷰어 장치.
The method of claim 1, wherein replacing the individual image comprises:
Comparing a 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 value, replacing the screen image with another image arranged in a direction in which the replacement proceeds,
The viewer device, characterized in that the amount of change in the touch distance is an amount of change in the touch distance from a previous image replacement time point.
제9항에 있어서, 상기 개별 이미지의 교체를 중지하는 단계는,
상기 스크롤 입력이 드래그 제스처인 경우, 터치 거리 변화량이 임계치 미만으로 감소할 때 이미지 교체를 중지하는 단계를 더 포함하는 것을 특징으로 하는 뷰어 장치.
The method of claim 9, wherein the step of stopping the replacement of the individual image comprises:
And 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.
제9항에 있어서, 상기 플링 제스처에 따른 이미지 교체를 중지하는 단계는,
상기 스크롤 입력이 플링 제스처인 경우, 터치 거리 변화량이 0이 되기 전에, 이전 이미지 교체 시점으로부터 터치 거리 변화량이 교체 임계 값 이상이 될 시점까지의 시간을 산출하는 단계; 및
산출된 시간이 미리 설정된 임계 시간 간격 이상인 경우 이미지 교체를 중지하는 단계를 포함하는 것을 특징으로 하는 뷰어 장치.
The method of claim 9, wherein stopping the image replacement according to the fling gesture,
When the scroll input is a fling gesture, calculating a time from a previous image replacement point 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 zero; And
And stopping the image replacement when the calculated time is greater than or equal to a preset threshold time interval.
제1항에 있어서,
상기 이미지 세트는 디스플레이 순서에 따라 복수의 구간으로 구획되고, 상기 복수의 구간은 복수의 오디오에 각각 연관되며,
상기 프로세서는:
상기 스크린 이미지가 속한 구간의 오디오를 사운드가 출력될 오디오로 결정하는 단계; 및
이미지의 교체에 따라 스크린 이미지가 속한 구간이 변경된 경우 사운드가 출력될 오디오를 변경하는 단계를 수행하도록 더 구성된 것을 특징으로 하는 뷰어 장치.
The method of claim 1,
The image set is divided into a plurality of sections according to a display order, and the plurality of sections are respectively associated with a plurality of audios,
The processor is:
Determining an audio of a section in which the screen image belongs as an audio to be outputted; And
The viewer apparatus, further configured to perform the step of changing an audio to be output sound when the section to which the screen image belongs is changed according to the replacement of the image.
제12항에 있어서, 상기 프로세서는:
상기 스크롤 입력이 플링 제스처인 경우, 이미지 교체 완료 지점을 포함한 구간의 오디오를 사운드가 출력될 오디오로 변경하는 것을 특징으로 하는 뷰어 장치.
The method of claim 12, wherein the processor:
And when the scroll input is a fling gesture, changing audio of a section including an image replacement completion point into audio to be outputted with sound.
제1항에 있어서,
상기 이미지 세트는 웹툰 또는 상기 웹툰의 미리보기를 이루는 것을 특징으로 하는 뷰어 장치.
The method of claim 1,
The viewer device, wherein the image set constitutes a webtoon or a preview of the webtoon.
제1항에 있어서, 상기 프로세서는:
복수의 뷰(view)를 생성하는 단계;
상기 이미지 세트에 포함된 복수의 이미지를 로드하는 단계;
첫번째 개별 이미지를 디스플레이 하기 전에, 로드된 복수의 이미지를 생성된 복수의 뷰에 각각 할당하는 단계;
상기 복수의 뷰 중에서 디스플레이 뷰를 선택하는 단계;
스크롤 입력이 수신되면, 디스플레이 이미지가 교체되도록 다른 뷰를 디스플레이 뷰로 선택하는 단계를 수행하도록 더 구성된 뷰어 장치.
The method of claim 1, wherein the processor:
Creating a plurality of views;
Loading a plurality of images included in the image set;
Prior to displaying the first individual image, allocating the loaded plurality of images to the generated plurality of views, respectively;
Selecting a display view from among the plurality of views;
When the scroll input is received, the viewer device further configured to perform the step of selecting another view as the display view so that the display image is replaced.
제1항에 있어서,
이미지 쇼 유닛 및 스크롤 입력 처리 유닛을 포함하고,
상기 스크롤 입력 처리 유닛은,
스크롤 입력에 기초하여 스크린 이미지에 대응하는 이미지 배열 축의 위치를 이동시키고,
이동된 위치에 대응한 이미지를 로드하고,
상기 이미지 쇼 유닛은,
단일 뷰를 생성하고,
로드된 이미지를 상기 단일 뷰에 할당하고,
상기 단일 뷰에 할당된 이미지를 상기 스크린 상에 디스플레이하도록 구성된 것을 특징으로 하는 뷰어 장치.
The method of claim 1,
Including an image show unit and a scroll input processing unit,
The scroll input processing unit,
Move the position of the image array 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 the single view,
And displaying an image assigned to the single view on the screen.
제1항에 있어서,
이미지 쇼 유닛 및 스크롤 입력 처리 유닛을 포함하고,
상기 스크롤 입력 처리 유닛은,
스크롤 입력에 기초하여 스크린 이미지에 대응하는 이미지 배열 축의 위치를 이동시키고,
이동 구간 사이의 복수의 위치에 대응한 이미지를 로드하고,
상기 이미지 쇼 유닛은,
복수의 뷰를 생성하고,
로드된 이미지를 생성된 복수의 뷰에 각각 할당하고,
상기 복수의 뷰에 할당된 이미지를 순차적으로 상기 스크린 상에 디스플레이하도록 구성된 것을 특징으로 하는 뷰어 장치.
The method of claim 1,
Including an image show unit and a scroll input processing unit,
The scroll input processing unit,
Move the position of the image array axis corresponding to the screen image based on the scroll input,
Load images corresponding to multiple locations between moving sections,
The image show unit,
Create multiple views,
Assign the loaded image to each of the generated views,
And sequentially displaying images allocated to the plurality of views on the screen.
프로세서에 의해 수행되는, 이미지를 디스플레이하는 방법에 있어서,
이미지 배열 축 상에 배열되고 디스플레이 순서가 각각 지정된 복수의 개별 이미지로 이루어진 이미지 세트에서, 스크롤 입력에 반응하여 각 개별 이미지에 포함된 객체가 공간감을 부여하여 애니메이팅되도록, 스크롤 입력에 반응하여 이미지 배열 축 상에 배열된 개별 이미지를 교체하는 단계 - 상기 스크롤 입력은 드래그 제스처 또는 플링 제스처를 포함함; 및
상기 개별 이미지의 교체를 중지하는 단계 - 상기 스크롤 입력이 상기 플링 제스처인 경우, 이전 이미지 교체 시점으로부터 다음 이미지 교체 시점까지의 시간 간격에 기초하여 상기 플링 제스처에 따른 이미지 교체를 중지하는 단계를 포함함 -를 포함하고,
하나의 개별 이미지가 스크린 상에 디스플레이되는 하나의 스크린 이미지를 구성하는 것을 특징으로 하는 방법.
In a method of displaying an image, performed by a processor,
In an image set consisting of a plurality of individual images arranged on an image array axis and each of which display order is specified, objects included in each individual image are animated with a sense of space in response to a scroll input, and images are arranged in response to scroll input. Replacing individual images arranged on an axis, the scroll input including a drag gesture or a fling gesture; And
Stopping the replacement of the individual image- When the scroll input is the fling gesture, stopping the replacement of the image according to the fling gesture based on a time interval from the previous image replacement time to the next image replacement time. -Including,
A method, characterized in that one individual image constitutes one screen image displayed on the screen.
제18항에 있어서,
상기 개별 이미지를 교체하는 단계는,
상기 복수의 개별 이미지로 이루어진 이미지 세트에서 제1 이미지를 스크린 상에 디스플레이하는 단계; 그리고
상기 스크롤 입력에 반응하여 상기 스크린 상에 디스플레이되는 제1 이미지를 사라지게 하고 상기 디스플레이 순서에 기초하여 제2 이미지를 상기 스크린 상에 디스플레이하는 단계를 수행하도록 구성되는 것을 특징으로 하는 방법.
The method of claim 18,
The step of replacing the individual images,
Displaying a first image on a screen from an image set consisting of the plurality of individual images; And
And causing the first image displayed on the screen to disappear in response to the scroll input and to perform the step of displaying a second image on the screen based on the display order.
제18항에 있어서, 상기 개별 이미지를 교체하는 단계는,
스크린 상에 스크롤 입력을 입력 받는 단계;
상기 스크롤 입력에서 상기 스크린의 평면 상의 특정 축 상의 터치 특성을 획득하는 단계;
상기 스크롤 입력의 터치 특성에 기초하여 교체 진행 방향을 결정하는 단계; 및
상기 스크롤 입력의 터치 특성에 기초하여 스크린 이미지로서 제1 이미지를 제2 이미지로 교체하는 단계를 포함하되,
상기 스크린의 평면의 특정 축은 스크롤 축에 대응하는 것으로 미리 설정된 일 축인 것을 특징으로 하는 방법.
The method of claim 18, wherein replacing the individual image comprises:
Receiving a scroll input on the screen;
Acquiring a touch characteristic on a specific axis on the plane of the screen in the scroll input;
Determining a replacement direction based on a touch characteristic of the scroll input; And
Including the step of replacing the first image with a second image as a screen image based on the touch characteristic of the scroll input,
A method, characterized in that the specific axis of the plane of the screen corresponds to a scroll axis and is a preset axis.
제18항에 있어서,
상기 스크롤 입력은, 드래그 제스처 또는 플링 제스처를 포함하는 것을 특징으로 하는 방법.
The method of claim 18,
The scroll input, characterized in that it comprises a drag gesture or a fling gesture.
제20항에 있어서, 상기 스크롤 입력에서 상기 스크롤 축 상의 터치 특성을 획득하는 단계는,
상기 스크롤 축 상의 터치 방향, 터치 속도, 터치 가속도 및 터치 거리 변화량 중 하나 이상을 획득하는 것을 특징으로 하는 방법.
The method of claim 20, wherein obtaining a touch characteristic on the scroll axis in the scroll input comprises:
A method of acquiring at least one of a touch direction, a touch speed, a touch acceleration, and a touch distance change amount on the scroll axis.
제20항에 있어서, 상기 스크롤 입력에서 상기 스크롤 축 상의 터치 특성을 획득하는 단계는,
상기 스크롤 입력이 플링 제스처인 경우, 릴리즈 지점에서 검출되는 플링 가속도 및 미리 설정된 마찰 인자에 의해 플링 거리 변화량을 산출하는 단계를 포함하며,
상기 마찰 인자는 플링 가속도가 감속하게 하는 것을 특징으로 하는 방법.
The method of claim 20, wherein 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 change amount based on a fling acceleration detected at a release point and a preset friction factor,
The method of claim 1, wherein the friction factor causes the fling acceleration to decelerate.
제20항에 있어서, 상기 교체 진행 방향을 결정하는 단계는,
상기 스크롤 축 상의 방향을 이미지 배열 축의 방향으로 변환하는 단계; 및
변환된 이미지 배열 축의 방향에 기초하여 교체 진행 방향을 결정하는 단계를 포함하는 방법.
The method of claim 20, wherein determining the direction in which the replacement proceeds,
Converting a direction on the scroll axis to a direction on an image array axis; And
And determining a direction of progression of the replacement based on the direction of the transformed image array axis.
제18항에 있어서, 상기 개별 이미지를 교체하는 단계는,
상기 스크롤 입력의 터치 거리 변화량과 미리 설정된 교체 임계 값을 비교하는 단계; 및
상기 터치 거리 변화량이 교체 임계 값 이상인 경우, 상기 스크린 이미지를 교체 진행 방향에 배열된 다른 이미지로 교체하는 단계를 포함하되,
상기 터치 거리 변화량은 이전 이미지 교체 시점으로부터의 터치 거리 변화량인 것을 특징으로 하는 방법.
The method of claim 18, wherein replacing the individual image comprises:
Comparing a 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 value, replacing the screen image with another image arranged in a direction in which the replacement proceeds,
The amount of change in the touch distance is an amount of change in the touch distance from a previous image replacement time point.
제25항에 있어서, 상기 개별 이미지의 교체를 중지하는 단계는,
상기 스크롤 입력이 드래그 제스처인 경우, 터치 거리 변화량이 임계치 미만으로 감소할 때 이미지 교체를 중지하는 단계를 더 포함하는 것을 특징으로 하는 방법.
The method of claim 25, wherein the step of stopping the replacement of the individual image comprises:
And 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.
제25항에 있어서, 상기 플링 제스처에 따른 이미지 교체를 중지하는 단계는,
터치 거리 변화량이 0이 되기 이전에, 이전 이미지 교체 시점으로부터 터치 거리 변화량이 교체 임계 값 이상이 될 시점까지의 시간을 산출하는 단계; 및
산출된 시간이 미리 설정된 임계 시간 간격 이상인 경우 이미지 교체를 중지하는 단계를 포함하는 것을 특징으로 하는 방법.
The method of claim 25, wherein the step of stopping image replacement according to the fling gesture,
Calculating a time from a previous image replacement time point to a time point at which the touch distance change amount becomes greater than or equal to the replacement threshold value before the touch distance change amount becomes zero; And
And stopping the image replacement when the calculated time is greater than or equal to a preset threshold time interval.
제18항에 있어서,
상기 이미지 세트는 디스플레이 순서에 따라 복수의 구간으로 구획되고, 상기 복수의 구간은 복수의 오디오에 각각 연관되며,
상기 스크린 이미지가 속한 구간의 오디오를 사운드가 출력될 오디오로 결정하는 단계; 및
이미지의 교체에 따라 스크린 이미지가 속한 구간이 변경된 경우 사운드가 출력될 오디오를 변경하는 단계를 더 포함하는 방법.
The method of claim 18,
The image set is divided into a plurality of sections according to a display order, and the plurality of sections are respectively associated with a plurality of audios,
Determining an audio of a section in which the screen image belongs as an 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.
제28항에 있어서,
상기 이미지의 교체에 따라 스크린 이미지가 속한 구간이 변경된 경우 사운드가 출력될 오디오를 변경하는 단계는,
상기 스크롤 입력이 플링 제스처인 경우, 이미지 교체 완료 지점을 포함한 구간의 오디오를 사운드가 출력될 오디오로 변경하는 것을 특징으로 하는 방법.
The method of claim 28,
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,
When the scroll input is a fling gesture, the audio of a section including an image replacement completion point is changed to an audio to be outputted.
제18항에 있어서,
상기 이미지 세트는 웹툰 또는 상기 웹툰의 미리보기를 이루는 것을 특징으로 하는 방법.
The method of claim 18,
The method of claim 1, wherein the image set constitutes a webtoon or a preview of the webtoon.
컴퓨터에 의해 판독가능하고, 상기 컴퓨터에 의해 동작 가능한 프로그램 명령어를 저장하는 컴퓨터 판독가능 기록매체로서, 상기 프로그램 명령어가 상기 컴퓨터의 프로세서에 의해 실행되는 경우 상기 프로세서가 제18항 내지 제30항 중 어느 하나의 항에 따른 방법을 수행하게 하는 컴퓨터 판독가능 기록매체.A computer-readable recording medium storing program instructions readable by a computer and operable by the computer, wherein when the program instructions are executed by a processor of the computer, the processor is any one of claims 18 to 30. A computer-readable recording medium for carrying out the method according to one of the preceding claims.

Images