KR20190081911A - 이미지 패닝 방법 - Google Patents

이미지 패닝 방법 Download PDF

Info

Publication number
KR20190081911A
KR20190081911A KR1020170184772A KR20170184772A KR20190081911A KR 20190081911 A KR20190081911 A KR 20190081911A KR 1020170184772 A KR1020170184772 A KR 1020170184772A KR 20170184772 A KR20170184772 A KR 20170184772A KR 20190081911 A KR20190081911 A KR 20190081911A
Authority
KR
South Korea
Prior art keywords
entity
image
screen
drag
window
Prior art date
Application number
KR1020170184772A
Other languages
English (en)
Other versions
KR102509976B1 (ko
Inventor
박정환
강희경
구본성
Original Assignee
주식회사 피제이팩토리
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 주식회사 피제이팩토리 filed Critical 주식회사 피제이팩토리
Priority to KR1020170184772A priority Critical patent/KR102509976B1/ko
Priority to PCT/KR2018/016816 priority patent/WO2019132563A1/ko
Priority to US16/958,562 priority patent/US11243678B2/en
Priority to JP2020536663A priority patent/JP6995208B2/ja
Priority to EP18896034.8A priority patent/EP3734431A4/en
Publication of KR20190081911A publication Critical patent/KR20190081911A/ko
Application granted granted Critical
Publication of KR102509976B1 publication Critical patent/KR102509976B1/ko

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0485—Scrolling or panning
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/04817—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance using icons
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04842—Selection of displayed objects or displayed text elements
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0486—Drag-and-drop
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G06F3/04883—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures for inputting data by handwriting, e.g. gesture or text
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T3/00—Geometric image transformations in the plane of the image
    • G06T3/20—Linear translation of whole images or parts thereof, e.g. panning

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • User Interface Of Digital Computer (AREA)
  • Controls And Circuits For Display Device (AREA)

Abstract

이미지 패닝 방법을 개시한다.
본 발명의 일 실시예에 의하면, 전자 장치의 화면에 표시된 제1 개체 상에 제2 개체를 배치시키기 위하여 전자 장치에 의해 수행되는 방법에 있어서, 상기 제2 개체를 상기 제1 개체 상에서 제1 방향으로 이동시키는 드래그에 응답하여 상기 화면 상에 표시된 상기 제1 개체를 상기 제1 방향과 반대되는 제2 방향으로 이동시키는 단계, 및 상기 제2 개체에 대한 드래그가 종료되면 상기 제1 개체 상의 상기 드래그의 종료 위치에 상기 제2 개체를 배치시키는 단계를 포함하되, 상기 제1 개체를 상기 제2 방향으로 이동시키는 단계는, 상기 제1 개체의 종단이 상기 화면의 종단에 도달해도 상기 제1 방향으로의 드래그에 따라 상기 제1 개체를 상기 제2 방향으로 지속적으로 이동시킴으로써, 상기 제2 개체를 상기 제1 개체의 종단 근처까지 또는 상기 제1 개체의 종단을 벗어나 상기 제1 개체의 외부영역으로 이동시키는 드래그를 허용하는 방법을 제공한다.

Description

이미지 패닝 방법{METHOD FOR PANNING IMAGE}
본 발명은 이미지 패닝 방법에 관한 것이다. 구체적으로 본 발명은, 멀티 심도 이미지의 생성 및 편집 시 메인 이미지에 삽입 이미지를 용이하게 삽입하기 위한 방법에 대한 것이다.
이 부분에 기술된 내용은 단순히 본 발명에 대한 배경 정보를 제공할 뿐 종래기술을 구성하는 것은 아니다.
전자 장치를 이용하여 이미지 파일을 열었을 때 이미지 파일의 특정 부분에 대한 자세한 정보 또는 확대된 이미지가 요구될 수 있다. 예를 들어 자동차 이미지의 경우, 헤드라이트, 바퀴 등과 같은 특정 부분에 대한 보다 자세한 이미지가 요구될 수 있다.
스마트폰 등과 같은 휴대용 전자 장치의 경우 화면이 작으므로 전체 이미지에서 특정 부분의 자세한 이미지를 확인하기 어렵다. 특정 부분의 자세한 이미지를 확인하기 위하여 해당 부분의 이미지를 확대하는 방법을 이용할 수 있으나, 이는 단순히 픽셀의 크기를 늘리는 것에 불과하므로 만족할 만한 해상도를 얻을 수 없고, 나아가 기존 이미지를 단순 확대하는 것 이외의 추가적인 정보를 얻을 수 없다는 문제가 있다.
이러한 문제를 해결하기 위하여 본 발명자는 기본이 되는 하나의 이미지(이하, '메인 이미지')에 추가적인 정보를 제공하는 다른 이미지(이하, '삽입 이미지')의 삽입이 가능한 새로운 포맷의 이미지(이하, '멀티 심도 이미지') 및 그 생성 방법에 대한 발명을 한국 특허 제10-1501028호(2015.03.04 등록)로 등록받은 바 있다.
동 문헌은 멀티 심도 이미지의 정의와, 멀티 심도 이미지의 생성 및 편집을 위한 사용자 인터페이스를 개시하고 있다. 본 발명은 동 발명의 후속 발명으로서, 멀티 심도 이미지의 생성 및 편집 시 메인 이미지에 삽입 이미지를 용이하게 삽입하기 위한 방법에 대한 것이다.
본 발명이 해결하고자 하는 기술적 과제는 멀티 심도 이미지의 생성 및 편집 시 메인 이미지에 삽입 이미지를 용이하게 삽입하기 위한 방법을 제공하기 위한 것이다.
본 발명이 해결하고자 하는 기술적 과제는 전술한 기술적 과제에 한정되지 않고 언급되지 않은 다른 기술적 과제들이 아래의 기재로부터 통상의 기술자에게 자명하게 도출될 수 있을 것이다.
본 발명의 일 실시예에 의하면, 전자 장치의 화면에 표시된 제1 개체 상에 제2 개체를 배치시키기 위하여 전자 장치에 의해 수행되는 방법에 있어서, 상기 제2 개체를 상기 제1 개체 상에서 제1 방향으로 이동시키는 드래그에 응답하여 상기 화면 상에 표시된 상기 제1 개체를 상기 제1 방향과 반대되는 제2 방향으로 이동시키는 단계, 및 상기 제2 개체에 대한 드래그가 종료되면 상기 제1 개체 상의 상기 드래그의 종료 위치에 상기 제2 개체를 배치시키는 단계를 포함하되, 상기 제1 개체를 상기 제2 방향으로 이동시키는 단계는, 상기 제1 개체의 종단이 상기 화면의 종단에 도달해도 상기 제1 방향으로의 드래그에 따라 상기 제1 개체를 상기 제2 방향으로 지속적으로 이동시킴으로써, 상기 제2 개체를 상기 제1 개체의 종단 근처까지 또는 상기 제1 개체의 종단을 벗어나 상기 제1 개체의 외부영역으로 이동시키는 드래그를 허용하는 방법을 제공한다.
본 발명의 일 실시예에 의하면 메인 이미지를 삽입 이미지의 드래그 방향과 반대되는 방향으로 이동시킴으로써 사용자가 용이하게 메인 이미지에 삽입 이미지를 삽입할 수 있다.
도 1은 멀티 심도 이미지를 설명하기 위한 개념도이다.
도 2는 이미지 뷰어에서 도 1의 멀티 심도 이미지가 실제로 화면에 표시되는 방식을 예시한 도면이다.
도 3은 본 발명의 일 실시예에 따른 방법으로서, 제2 개체의 선택에 따른 화면 변화를 예시한 도면이다.
도 4는 본 발명의 일 실시예에 따른 방법으로서, 제2 개체의 드래그에 따른 화면 변화를 예시한 도면이다.
도 5는 본 발명의 일 실시예에 따른 방법으로서, 제2 개체가 외부영역으로 드래그된 상태에서 추가 기능을 실행하기 위한 방법을 예시한 도면이다.
도 6은 본 발명의 일 실시예에 따른 방법으로서, 제2 개체의 선택을 위한 사용자 입력의 위치가 화면 중앙이 아닌 경우의 제2 개체의 선택에 따른 화면 변화를 예시한 도면이다.
도 7은 본 발명의 일 실시예에 따른 방법으로서, 제2 개체가 이미 부모 이미지에 삽입된 이미지인 경우 제2 개체의 선택에 따른 화면 변화를 예시한 도면이다.
도 8은 본 발명의 일 실시예에 따른 방법으로서, 화면에 들어가지 않을 정도로 큰 부모 이미지를 화면에 들어갈 크기로 축소하지 않았거나 화면에 들어가는 부모 이미지를 화면에 들어가지 않을 정도의 크기로 확대한 상태에서 제2 개체를 삽입하고자 하는 경우, 제2 개체의 선택에 따른 화면 변화를 예시한 도면이다.
도 9는 본 발명의 일 실시예에 따른 방법으로서, 화면에 들어가지 않을 정도로 큰 부모 이미지를 화면에 들어갈 크기로 축소하지 않았거나 화면에 들어가는 부모 이미지를 화면에 들어가지 않을 정도의 크기로 확대한 상태에서 제2 개체를 삽입하고자 하는 경우, 제2 개체의 드래그에 따른 제1 개체, 부모 이미지 및 윈도우의 이동을 예시한 도면이다.
도 10은 본 발명의 일 실시예에 따른 방법으로서, 화면에 들어가지 않을 정도로 큰 부모 이미지를 화면에 들어갈 크기로 축소하지 않았거나 화면에 들어가는 부모 이미지를 화면에 들어가지 않을 정도의 크기로 확대한 상태에서 제2 개체를 삽입하고자 하는 경우, 제2 개체의 윈도우 밖으로 드래그되었을 때 제1 개체, 부모 이미지 및 윈도우의 이동을 예시한 도면이다.
도 11은 본 발명의 일 실시예에 따른 이미지 패닝 방법을 예시한 순서도이다.
이하, 본 발명의 일 실시예를 예시적인 도면을 통해 상세하게 설명한다. 각 도면의 구성요소들에 참조부호를 부가함에 있어서 동일한 구성요소들에 대해서는 비록 다른 도면상에 표시되어 있더라도 가능한 한 동일한 부호를 사용하고 있음에 유의해야 한다. 또한 본 발명의 일 실시예를 설명함에 있어서 관련된 공지 구성 또는 기능에 대한 구체적인 설명이 본 발명의 요지를 흐릴 수 있다고 판단되는 경우에는 그에 대한 상세한 설명을 생략한다.
본 발명의 일 실시예의 구성요소를 설명함에 있어서 제1, 제2, i), ii), a), b) 등의 부호를 사용할 수 있다. 이러한 부호는 그 구성요소를 다른 구성요소와 구별하기 위한 것일 뿐 그 부호에 의해 해당 구성요소의 본질, 차례, 순서 등이 한정되는 것은 아니다. 본 명세서에서 어떤 부분이 어떤 구성요소를 '포함' 또는 '구비'한다고 할 때, 이는 명시적으로 반대되는 기재가 없는 한 해당 부분이 다른 구성요소를 부가하는 것을 배제하는 것이 아니라 다른 구성요소를 더 포함할 수 있음을 의미한다. '~부', '모듈' 등의 용어는 적어도 하나의 기능이나 동작을 처리하는 단위를 의미하며, 이는 '하드웨어', '소프트웨어' 또는 '하드웨어와 소프트웨어의 결합'으로 구현될 수 있다.
1. 멀티 심도 이미지의 구조
도 1은 멀티 심도 이미지의 구조를 설명하기 위한 개념도이다.
도 1은 이미지 뷰어에서 멀티 심도 이미지가 실제로 표시된 화면이 아니라 멀티 심도 이미지의 구조를 표현한 개념도이다.
도 1에 나타난 것과 같이, 멀티 심도 이미지는 복수개의 이미지가 트리 구조로 연결된 구조이다. 트리 구조에서 최상위에 위치하는 이미지는 메인 이미지이다. 도 1에서는 자동차의 전체적인 이미지를 메인 이미지로 예시하였다.
메인 이미지 이외의 이미지는 삽입 이미지이다. 트리 구조에서 루트에는 메인 이미지가 위치하고, 하나 이상의 삽입 이미지는 서로 부모, 형제 또는 자식의 관계를 가지고 메인 이미지 아래에 연결되어 있다.
메인 이미지는 0의 깊이를 가지고, 메인 이미지에 직접 삽입된 삽입 이미지는 1의 깊이를 가진다. 예컨대 자동차 전체가 표시된 이미지(이하, '자동차 전체 이미지')에 헤드라이트가 표시된 이미지(이하, '헤드라이트 이미지') 및 바퀴가 표시된 이미지(이하, '바퀴 이미지')를 삽입할 수 있으며, 이 경우 헤드라이트 이미지 및 바퀴 이미지는 1의 깊이를 가진다.
삽입 이미지에 삽입된 다른 삽입 이미지는 2 이상의 깊이를 가진다. 예컨대 1의 깊이를 가지는 헤드라이트 이미지에 전구가 표시된 이미지(이하, '전구 이미지') 및 반사경이 표시된 이미지(이하, '반사경 이미지')를 삽입할 수 있으며, 이 경우 전구 이미지 및 반사경 이미지는 2의 깊이를 가진다. 또한 1의 깊이를 가지는 바퀴 이미지에 타이어휠이 표시된 이미지(이하, '타이어휠 이미지') 및 타이어가 표시된 이미지(이하, '타이어 이미지')를 삽입할 수 있으며, 이 경우 타이어휠 이미지 및 타이어 이미지는 2의 깊이를 가진다.
이와 같은 방식으로 계속하여 이미지를 삽입할 수 있다. 예컨대 전구 이미지, 반사경 이미지, 타이어휠 이미지 또는 타이어 이미지에 다른 이미지를 삽입할 수 있으며, 이 때 삽입되는 이미지는 3의 깊이를 가지게 된다.
2. 멀티 심도 이미지의 표시
도 1에서 자동차 노드 아래에 헤드라이트 노드 및 바퀴 노드가 위치하고, 헤드라이트 노드 아래에 전구 노드 및 반사경 노드가 위치하며, 바퀴 노드 아래에 타이어휠 노드 및 타이어 노드가 위치한다.
멀티 심도 이미지는 도 1에 예시된 트리 구조에서 부모 노드의 개체에 자식 노드의 개체가 삽입된 형태의 이미지 포맷이다. 부모 노드의 개체에 자식 노드의 개체가 삽입될 때 삽입되는 개체는 일반적으로 이미지이다. 그러나 이미지 외에도 동영상, 텍스트, 음성, 다른 파일에 대한 링크, 인터넷 주소 링크, 북마크 등 다양한 개체가 자식 노드의 개체로서 부모 노드의 개체에 삽입될 수 있다. 다만 이하에서는 설명의 편의상 부모 노드의 개체 및 자식 노드의 개체가 모두 이미지인 경우를 예로 들어 설명한다.
부모 노드의 개체 및 자식 노드의 개체가 이미지라고 할 때 도 1에 예시된 트리 구조에서 부모 노드의 이미지(이하, '부모 이미지')의 적절한 위치에 자식 노드의 이미지(이하, '자식 이미지')를 삽입함으로써 멀티 심도 이미지를 생성할 수 있다. 부모 이미지의 적절한 위치에 자식 이미지를 삽입하는 방법으로서, 부모 이미지와 자식 이미지를 비교한 후 부모 이미지에서 자식 이미지의 특징이 발견된 위치에 자식 이미지를 삽입하는 방법을 사용할 수 있다.
도 2는 이미지 뷰어에서 도 1의 멀티 심도 이미지가 실제로 화면에 표시된 상태를 예시한 도면이다.
이미지 뷰어에서 도 2와 같이 자동차에 대한 멀티 심도 이미지(200)를 구성하는 모든 이미지가 한 화면에 표시될 수도 있고, 자동차에 대한 멀티 심도 이미지(200)를 구성하는 자동차 전체 이미지(210), 헤드라이트 이미지(220), 전구 이미지(221), 반사경 이미지(222), 바퀴 이미지(230), 타이어휠 이미지(231) 또는 타이어 이미지(232)가 단독으로 표시될 수도 있다. 각각의 이미지가 단독으로 표시될 경우, 다른 이미지가 삽입되어 있음을 나타내는 아이콘(도 2에서는 '⊙' 모양의 아이콘)을 클릭 또는 터치하면 삽입된 이미지가 표시될 수 있다.
도 2에 나타난 것과 같이, 멀티 심도 이미지는, 자동차 전체 이미지(210)에서 헤드라이트 이미지(220)와 유사한 특징이 발견된 위치에 헤드라이트 이미지(220)가 삽입되고, 자동차 전체 이미지(210)에서 바퀴 이미지(230)와 유사한 특징이 발견된 위치에 바퀴 이미지(230)가 삽입되며, 헤드라이트 이미지(220)에서 전구 이미지(221)와 유사한 특징이 발견된 위치에 전구 이미지(221)가 삽입되고, 헤드라이트 이미지(220)에서 반사경 이미지(222)와 유사한 특징이 발견된 위치에 반사경 이미지(222)가 삽입되며, 바퀴 이미지(230)에서 타이어휠 이미지(231)와 유사한 특징이 발견된 위치에 타이어휠 이미지(231)가 삽입되고, 바퀴 이미지(230)에서 타이어 이미지(232)와 유사한 특징이 발견된 위치에 타이어 이미지(232)가 삽입된 형태의 이미지일 수 있다.
다만 반드시 부모 이미지에서 자식 이미지의 특징이 발견된 위치에 자식 이미지가 삽입되어야 하는 것은 아니고, 부모 이미지의 어느 위치에든 자식 이미지가 삽입된 구조이기만 하면 멀티 심도 이미지가 된다.
3. 기본 인터페이스
멀티 심도 이미지에서 루트 노드의 이미지가 '메인 이미지'이고, 메인 이미지를 제외한 모든 이미지가 '삽입 이미지'이다. 메인 이미지에 삽입 이미지를 삽입하기 위한 사용자 인터페이스는 다음과 같이 구현될 수 있다.
① 사용자로부터 메인 이미지를 선택하는 입력을 수신한다.
② 사용자로부터 삽입 이미지를 선택하는 입력을 수신한다.
③ 메인 이미지 및 작은 크기로 아이콘화된 삽입 이미지를 화면에 표시한다.
④ 사용자로부터 아이콘화된 삽입 이미지를 드래그하는 입력을 수신한다.
⑤ 사용자로부터 드래그 입력의 종료를 수신한다.
⑥ 터치 입력이 종료된 위치에 삽입 이미지를 삽입한다.
삽입 이미지에 다른 삽입 이미지를 삽입하기 위한 사용자 인터페이스는 다음과 같이 구현될 수 있다.
① 사용자로부터 메인 이미지를 선택하는 입력을 수신한다.
② 사용자로부터 삽입 이미지를 선택하는 입력을 수신한다.
③ 메인 이미지 및 작은 크기로 아이콘화된 삽입 이미지를 화면에 표시한다.
④ 사용자로부터 아이콘화된 삽입 이미지를 드래그하는 입력을 수신한다.
⑤ 아이콘화된 삽입 이미지가 기존의 삽입 이미지가 삽입된 위치에 드래그되면 메인 이미지 대신 기존의 삽입 이미지를 화면에 표시한다.
⑥ 사용자로부터 아이콘화된 삽입 이미지를 드래그하는 입력을 수신한다.
⑦ 사용자로부터 드래그 입력의 종료를 수신한다.
⑧ 터치 입력이 종료된 위치에 삽입 이미지를 삽입한다. 기존의 삽입 이미지의 깊이가 N이면 새롭게 삽입된 이미지의 깊이는 N+1이 된다.
이상의 사용자 인터페이스에 의하면 멀티 심도 이미지의 생성 및 편집 시 원터치(one touch) 또는 원클릭(one click)으로 메인 이미지에 삽입 이미지를 삽입할 수 있다.
그러나 스마트폰, 타블렛 등에서 제공하는 터치 인터페이스는 손가락을 이용하기 때문에 손가락의 크기로 인하여 메인 이미지의 구석진 위치에 삽입 이미지를 삽입하는 것이 용이하지 않다. 또한 스마트폰을 쥔 상태로 엄지 등 짧은 손가락을 이용하여 삽입할 이미지를 드래그할 때 드래그 가능한 범위가 짧다는 문제가 있다.
이하, 본 발명의 일 실시예는 멀티 심도 이미지의 생성 및 편집 시 메인 이미지를 삽입 이미지의 드래그 방향과 반대 방향으로 이동시킴으로써 메인 이미지에 삽입 이미지를 용이하게 삽입할 수 있는 방법을 제공한다.
새로운 이미지를 메인 이미지에 삽입하고자 할 경우, 부모 이미지는 메인 이미지(깊이 0)가 될 것이고, 제2 개체는 새로운 이미지(깊이 1)가 될 것이다. 새로운 이미지를 깊이가 N인 기존의 삽입 이미지에 삽입하고자 할 경우, 부모 이미지는 기존의 삽입 이미지(깊이 N)가 될 것이고, 제2 개체는 새로운 이미지(깊이 N+1)가 될 것이다.
이하, 본 명세서에서, 삽입할 개체는 '제2 개체'라고 하고, 제2 개체를 삽입하고자 하는 대상 이미지는 '부모 이미지'라고 하며, 부모 이미지의 전부 또는 일부가 화면에 표시된 영역은 '제1 개체'라고 한다. 제2 개체는 일반적으로 이미지이다. 그러나 이미지 외에도 동영상, 텍스트, 음성, 다른 파일에 대한 링크, 인터넷 주소 링크, 북마크 등 다양한 개체가 제2 개체가 될 수 있다. 이하에서는 제2 개체가 이미지인 경우를 예로 들어 설명한다.
4. 제1 실시예
도 3은 본 발명의 일 실시예에 따른 방법으로서, 제2 개체의 선택에 따른 화면 변화를 예시한 도면이다.
도 3(a)는 전자 장치가 사용자로부터 부모 이미지에 삽입할 제2 개체를 선택하는 입력을 수신하는 화면을 나타낸 도면이다. 구체적으로, 도 3(a)는 제2 개체가 화면에 표시된 상태에서 제2 개체의 선택을 위한 사용자 입력이 화면 중앙에서 수신된 경우를 예시하고 있다.
제2 개체의 선택을 위한 사용자 입력은 마우스를 클릭하는 것일 수 있다. 또는, 터치 스크린을 터치하는 것일 수 있다. 또는, 마우스 또는 터치 스크린을 롱 프레스(long press)하는 것일 수 있다.
도 3(b)는 전자 장치가 사용자로부터 부모 이미지에 삽입할 제2 개체를 선택하는 입력을 수신한 후의 화면 변화를 나타낸 도면이다.
제2 개체가 선택되면 제1 개체(부모 이미지의 전부 또는 일부가 화면에 표시된 영역)와 아이콘화된 제2 개체가 화면에 표시된다.
아이콘화된 제2 개체가 표시되는 위치는 제2 개체의 선택을 위한 사용자 입력의 위치일 수 있다. 도 3(a)에서 제2 개체의 선택을 위한 사용자 입력이 화면 중앙에서 입력되었으므로, 도 3(b)에서 아이콘화된 제2 개체는 화면 중앙에 표시된다. 아이콘화된 제2 개체에서 뾰족하게 튀어 나온 부분은 제2 개체가 제1 개체 상에 삽입될 위치를 나타낸다.
제2 개체의 선택을 위한 사용자 입력이 화면 중앙에서 입력된 경우, 부모 이미지의 중심이 화면 중앙에 오도록 하여 제1 개체가 표시될 수 있다. 제1 개체는 부모 이미지의 크기 그대로 표시될 수도 있고, 화면에 맞게 확대 또는 축소되어 표시될 수도 있으며, 사용자가 설정한 비율대로 확대 또는 축소되어 표시될 수도 있다.
도 4는 본 발명의 일 실시예에 따른 방법으로서, 제2 개체의 드래그에 따른 화면 변화를 예시한 도면이다.
도 4(a)는 전자 장치가 사용자로부터 제2 개체를 왼쪽 위 방향으로 드래그하는 입력을 수신한 후의 화면 변화를 나타낸 도면이다. 도 4(a)에 나타난 것과 같이, 전자 장치가 사용자로부터 제2 개체를 왼쪽 위 방향으로 드래그하는 입력을 수신하면 제1 개체는 오른쪽 아래 방향으로 이동한다.
도 4(b)는 전자 장치가 사용자로부터 제2 개체를 오른쪽 아래 방향으로 드래그하는 입력을 수신한 후의 화면 변화를 나타낸 도면이다. 도 4(b)에 나타난 것과 같이, 전자 장치가 사용자로부터 제2 개체를 오른쪽 아래 방향으로 드래그하는 입력을 수신하면 제1 개체는 왼쪽 위 방향으로 이동한다.
도 4(a) 및 도 4(b)에 나타난 것과 같이, 전자 장치가 사용자로부터 제2 개체를 드래그하는 입력을 수신하면 드래그 방향과 반대되는 방향으로 제1 개체가 이동한다. 제1 개체의 이동 거리는 제2 개체의 드래그 거리에 의해 결정된다. 구체적으로, 제1 개체의 이동 거리는 제2 개체의 드래그 거리의 k배(k는 양의 실수)일 수 있다. k의 값은 부모 이미지의 크기, 부모 이미지의 확대 여부, 부모 이미지 중에서 현재 화면에 표시된 영역 등에 의해 결정될 수 있다. 참고로 도 4(a) 및 도 4(b)는 제2 개체의 드래그 거리와 제1 개체의 이동 거리가 동일한 경우를 예로 들어 설명하고 있다.
한편, 도 4(a) 및 도 4(b)에 나타난 것과 같이, 제1 개체의 이동에 따라 화면에 제1 개체의 종단을 벗어난 외부영역이 표시될 수 있다. 제1 개체의 종단을 벗어난 외부영역은 회색 배경, 검은색 배경 등으로 표시될 수 있다.
본 발명의 일 실시예에 의하면, 제1 개체가 제2 개체의 드래그 방향과 반대되는 방향으로 이동하고 제1 개체의 종단을 벗어난 외부영역까지 화면에 표시되므로 사용자는 부모 이미지의 구석진 위치에 제2 개체를 쉽게 삽입할 수 있다.
도 4(c)는 전자 장치가 사용자로부터 드래그의 종료를 수신하였을 때의 화면 변화를 나타낸 것이다. 도 4(c)에 나타난 것과 같이, 드래그가 종료되면 제1 개체 상에서 드래그가 종료된 위치에 제2 개체가 배치된다. 배치하는 동작은 제1 개체 상에서 드래그가 종료된 위치에 제2 개체를 삽입하는 동작을 포함할 수 있다.
개체 삽입이 완료되면 전자 장치는 화면을 리프레시(refresh)할 수 있다. 리프레시는 제2 개체 드래그 전 제1 개체가 표시되었던 것과 같은 상태로 제1 개체를 표시하고, 제1 개체에 삽입된 제2 개체를 제1 개체 상에서 특정 아이콘으로 표시하는 것일 수 있다. 제1 개체 상에서 제2 개체가 삽입된 위치를 표시하는 아이콘은 ⊙ 모양의 아이콘일 수 있다.
도 5는 본 발명의 일 실시예에 따른 방법으로서, 제2 개체가 외부영역으로 드래그된 상태에서 추가 기능을 실행하기 위한 방법을 예시한 도면이다.
전자 장치가 사용자로부터 제2 개체를 드래그하는 입력을 수신하면 제2 개체의 드래그 방향과 반대되는 방향으로 제1 개체가 이동한다. 제2 개체의 드래그 방향과 반대되는 방향으로 제1 개체가 이동하면서 제1 개체의 종단을 벗어난 외부영역이 화면에 표시될 수 있다.
도 5(a)는 제2 개체가 제1 개체의 종단을 벗어난 외부영역으로 드래그된 상태를 나타낸 도면이다. 도 5(a)에 나타난 것과 같이, 제1 개체의 종단을 벗어난 외부영역으로 제2 개체를 드래그하는 것이 허용된다. 외부영역으로의 드래그는 제2 개체를 제1 개체의 삽입할 위치에 위치시키기 위한 드래그가 아니라 추가 기능을 실행하기 위한 드래그이다. 제2 개체가 외부영역으로 드래그된 상태에서는 다음과 같은 방식으로 추가 기능을 실행시킬 수 있다.
도 5(b)는 외부영역에 있는 제2 개체를 왼쪽 방향으로 드래그하는 사용자 입력을 수신하고 있는 상태를 나타낸 도면이다. 도 5(b)에 나타난 것과 같이, 외부영역에 있는 제2 개체가 왼쪽 방향으로 드래그되면 기 설정된 기능이 실행되도록 할 수 있다. 또는, 제1 개체의 종단과 왼쪽 방향으로 드래그된 제2 개체의 이격 거리에 따라 하나 이상의 기능이 선택적으로 실행되도록 할 수 있다.
도 5(b)의 경우와 반대로, 제2 개체가 오른쪽으로 계속 드래그되어 제1 개체가 왼쪽으로 계속 이동하고, 그 결과 화면의 오른쪽에 외부영역이 표시되었으며, 제2 개체가 외부영역으로 이동하였다고 가정하자. 이 상태에서 외부영역에 있는 제2 개체가 오른쪽 방향으로 드래그되면 기 설정된 기능이 실행되도록 할 수 있다. 또는, 제1 개체의 종단과 오른쪽 방향으로 드래그된 제2 개체의 이격 거리에 따라 하나 이상의 기능이 선택적으로 실행되도록 할 수 있다.
한편, 제2 개체가 위로 계속 드래그되어 제1 개체가 아래쪽으로 계속 이동하고, 그 결과 화면의 위쪽에 외부영역이 표시되었으며, 제2 개체가 외부영역으로 이동하였다고 가정하자. 이 상태에서 외부영역에 있는 제2 개체가 위쪽 방향으로 드래그되면 기 설정된 기능이 실행되도록 할 수 있다. 또는, 제1 개체의 종단과 위쪽 방향으로 드래그된 제2 개체의 이격 거리에 따라 하나 이상의 기능이 선택적으로 실행되도록 할 수 있다.
한편, 제2 개체가 아래로 계속 드래그되어 제1 개체가 위쪽으로 계속 이동하고, 그 결과 화면의 아래쪽에 외부영역이 표시되었으며, 제2 개체가 외부영역으로 이동하였다고 가정하자. 이 상태에서 외부영역에 있는 제2 개체가 아래쪽 방향으로 드래그되면 기 설정된 기능이 실행되도록 할 수 있다. 또는, 제1 개체의 종단과 아래쪽 방향으로 드래그된 제2 개체의 이격 거리에 따라 하나 이상의 기능이 선택적으로 실행되도록 할 수 있다.
도 5(c)는 외부영역에 있는 제2 개체를 드래그하여 제스처를 입력하는 사용자 입력을 수신하고 있는 상태를 나타낸 도면이다. 도 4(c)에 나타난 것과 같이, 외부영역에 있는 제2 개체를 드래그하여 제스처가 입력되면 제스처의 종류에 따라 기 설정된 기능이 실행되도록 할 수 있다.
제2 개체가 외부영역에 있는 상태에서 제스처 입력 외의 다양한 사용자 입력을 수신하여 기 설정된 기능이 실행되도록 할 수 있다. 예컨대 제2 개체가 외부영역에 있는 상태에서 사용자가 음성으로 명령을 내리면 사용자의 음성 명령을 분석하여 음성 명령에 따라 기 설정된 기능이 실행되도록 할 수 있다.
제2 개체가 외부영역에 있는 상태에서, 전자 장치가 제2 개체를 왼쪽, 오른쪽, 위쪽, 아래쪽으로 드래그하는 사용자 입력을 수신하거나, 사용자 제스처, 음성 등에 의한 사용자 이벤트를 수신하였을 때 실행되는 추가 기능은 다음 기능일 수 있다.
추가 기능은 부모 이미지를 변경하는 기능일 수 있다. 부모 이미지를 변경하려 할 때, 초기 화면으로 돌아가서 부모 이미지를 선택하고 제2 개체를 다시 선택하려면 번거롭다. 따라서 제2 개체의 선택을 유지한 상태에서 부모 이미지를 변경할 필요가 있으며, 이와 같은 기능이 외부영역에서의 드래그 또는 사용자 이벤트를 통해 실행될 수 있다.
추가 기능은 페이지 디테일링(page detailing) 기능일 수 있다. 페이지 디테일링은 트리 구조 상에서 부모 이미지와 동일한 레벨로 부모 이미지에 대한 추가 정보를 삽입하는 기능이다. 부모 이미지와 동일한 레벨로 삽입되는 추가 정보는 이미지, 동영상, 텍스트, 음성, 다른 파일에 대한 링크, 인터넷 주소 링크 URL 등일 수 있다.
추가 기능은 스태킹(stacking) 기능일 수 있다. 스태킹은 삽입할 개체를 한쪽 화면에 끼워 쌓아 두는(stacking) 기능을 의미한다. 스태킹 기능을 이용하여 아이콘화되어 작아진 개체를 화면의 특정 영역, 예컨대 화면의 오른쪽 또는 왼쪽 구석 영역에 끼워 두면, 끼워진 개체(stacked object)는 부모 이미지로부터 독립되어 항상 화면의 특정 영역에 표시된다. 스태킹 기능을 이용하면 하나 이상의 개체를 부모 이미지에 쉽게 삽입할 수 있다.
그밖에, 포인터 삭제, 포인터 취소, 이전 단계로 돌아가기, 멀티 심도 이미지의 트리 구조를 나타내는 내비게이션 맵 보기, 삽입 과정 취소, 삽입할 개체 변경, 부모 이미지에 삽입된 모든 개체 삭제 등의 다양한 기능이 추가 기능으로 구현될 수 있다.
도 6은 본 발명의 일 실시예에 따른 방법으로서, 제2 개체의 선택을 위한 사용자 입력의 위치가 화면 중앙이 아닌 경우의 제2 개체의 선택에 따른 화면 변화를 예시한 도면이다.
도 6(a)는 전자 장치가 사용자로부터 부모 이미지에 삽입할 제2 개체를 선택하는 입력을 수신하는 화면을 나타낸 도면이다. 도 3(a)에서 제2 개체의 선택을 위한 사용자 입력의 위치가 화면 중앙이었던 것에 비해, 도 6(a)에서는 제2 개체의 선택을 위한 사용자 입력의 위치가 화면 왼쪽 위이다.
도 6(b)는 전자 장치가 사용자로부터 부모 이미지에 삽입할 제2 개체를 선택하는 입력을 수신한 후의 화면 변화를 나타낸 도면이다.
제2 개체가 선택되면 제1 개체와 아이콘화된 제2 개체가 화면에 표시된다.
아이콘화된 제2 개체가 표시되는 위치는 제2 개체의 선택을 위한 사용자 입력의 위치일 수 있다. 도 6(a)에서 제2 개체의 선택을 위한 사용자 입력이 화면 왼쪽 위이므로, 도 6(b)에서 아이콘화된 제2 개체는 화면 왼쪽 위에 표시된다.
제2 개체의 선택을 위한 사용자 입력이 화면 왼쪽 위에서 입력된 경우, 제1 개체가 화면 중앙으로부터 화면 왼쪽 위를 향하는 방향과 반대되는 방향으로 이동된 위치에 표시될 수 있다. 사용자가 부모 이미지의 왼쪽 위에 제2 개체를 삽입할 것이라고 예상하고 제1 개체를 미리 그 반대 방향으로 이동시켜 표시하는 것이다. 이 때 제1 개체의 이동 방향 및 거리는 도 4에서 설명한 것과 같은 방식으로 결정될 수 있다.
도 7은 본 발명의 일 실시예에 따른 방법으로서, 제2 개체가 이미 부모 이미지에 삽입된 이미지인 경우 제2 개체의 선택에 따른 화면 변화를 예시한 도면이다.
도 7(a)는 도 4(c)에서와 같이 부모 이미지에 이미 삽입된 제2 개체를 손가락으로 선택하는 것을 나타내고 있다. 도 7(b)는 부모 이미지에 이미 삽입된 제2 개체를 선택하였을 때의 화면 변화를 나타내고 있다.
제2 개체가 선택되면 제1 개체와 아이콘화된 제2 개체가 화면에 표시된다.
아이콘화된 제2 개체가 표시되는 위치는 제2 개체의 선택을 위한 사용자 입력의 위치일 수 있다.
제2 개체는 부모 이미지의 특정 위치에 삽입된 상태이므로 아이콘화된 제2 개체는 제1 개체의 삽입된 위치에 표시되어야 한다. 이를 위하여 제2 개체는 제2 개체의 선택을 위한 사용자 입력의 위치에 표시하고, 제1 개체는 제2 개체가 배치된 위치를 기준으로 이동시켜 표시한다. 예컨대, 화면 중앙으로부터 제2 개체가 이격된 방향의 역방향으로 제1 개체를 이동시켜 표시한다. 도 7(a)에서 제2 개체(B)가 삽입된 위치는 화면 중앙으로부터 우하단 방향으로 이격되어 있으므로, 제1 개체(A)는 좌상단 방향으로 이동되어 화면에 표시된다.
5. 제2 실시예
도 8 내지 10은 화면에 들어가지 않을 정도로 큰 부모 이미지를 화면에 들어갈 크기로 축소하지 않았거나 화면에 들어가는 부모 이미지를 화면에 들어가지 않을 정도의 크기로 확대한 상태에서 제2 개체를 삽입하고자 하는 경우에 적용되는 방법이다. 도 8 내지 10은 부모 이미지가 360˚ 이미지, VR 이미지, 파노라마 이미지 등일 경우에 특히 유용한 방법이다.
도 8은 본 발명의 일 실시예에 따른 방법으로서, 화면에 들어가지 않을 정도로 큰 부모 이미지를 화면에 들어갈 크기로 축소하지 않았거나 화면에 들어가는 부모 이미지를 화면에 들어가지 않을 정도의 크기로 확대한 상태에서 제2 개체를 삽입하고자 하는 경우, 제2 개체의 선택에 따른 화면 변화를 예시한 도면이다.
도 8(a)는 전자 장치가 사용자로부터 부모 이미지에 삽입할 제2 개체를 선택하는 입력을 수신하는 화면을 나타낸 도면이다. 도 8(a)는 화면에 들어가지 않을 정도로 큰 부모 이미지를 화면에 들어갈 크기로 축소하지 않았거나 화면에 들어가는 부모 이미지를 화면에 들어가지 않을 정도의 크기로 확대한 상태에서 제2 개체를 선택하는 것으로 가정한다.
도 8(b)는 전자 장치가 사용자로부터 부모 이미지에 삽입할 제2 개체를 선택하는 입력을 수신한 후의 화면 변화를 나타낸 도면이다.
제2 개체가 선택되면 제1 개체와 아이콘화된 제2 개체가 화면에 표시된다.
아이콘화된 제2 개체가 표시되는 위치는 제2 개체의 선택을 위한 사용자 입력의 위치일 수 있다. 도 8(a)에서 제2 개체의 선택을 위한 사용자 입력이 화면 중앙에서 입력되었으므로, 도 8(b)에서 아이콘화된 제2 개체는 화면 중앙에 표시된다.
제2 개체의 선택을 위한 사용자 입력이 화면 중앙에서 입력된 경우, 부모 이미지의 중심이 화면 중앙에 오도록 하여 제1 개체가 표시될 수 있다. 화면에 들어가지 않을 정도로 큰 부모 이미지를 화면에 들어갈 크기로 축소하지 않았거나 화면에 들어가는 부모 이미지를 화면에 들어가지 않을 정도의 크기로 확대한 상태이므로 제1 개체는 화면에 꽉 찬 상태가 된다.
모 이미지에서 일부 영역은 원래 색깔 그대로 표시하고, 다른 영역은 원래 색깔보다 어둡게 표시할 수 있다. 부모 이미지가 원래 색깔 그대로 표시되는 영역을 '윈도우'라고 한다. 윈도우의 크기는 화면의 크기와 동일하게 설정할 수 있다. 다만 이에 한정되지 않고 윈도우의 크기가 화면보다 클 수도 있고 작을 수도 있다.
모 이미지에서 윈도우 안에 있는 영역은 부모 이미지에서 현재 편집 가능한 영역, 곧 제2 개체를 삽입하고자 하는 영역을 시각적으로 강조하기 위한 것이고, 윈도우 밖에 있는 영역은 아직 해당 영역이 편집 대상으로 들어오지 않았음을 나타내기 위한 것이다.
윈도우는 편집 가능 영역을 시각적으로 강조하기 위한 것이므로 다양한 방법으로 윈도우를 표시할 수 있다. 예컨대 부모 이미지를 어둡게 표시하지 않고 윈도우를 사각형의 외곽선만으로 표시할 수도 있다.
도 9는 본 발명의 일 실시예에 따른 방법으로서, 화면에 들어가지 않을 정도로 큰 부모 이미지를 화면에 들어갈 크기로 축소하지 않았거나 화면에 들어가는 부모 이미지를 화면에 들어가지 않을 정도의 크기로 확대한 상태에서 제2 개체를 삽입하고자 하는 경우, 제2 개체의 드래그에 따른 제1 개체, 부모 이미지 및 윈도우의 이동을 예시한 도면이다.
도 9(a)는 전자 장치가 사용자로부터 제2 개체를 왼쪽 위 방향으로 드래그하는 입력을 수신한 후의 화면 변화를 나타낸 도면이다. 도 9(a)에 나타난 것과 같이, 전자 장치가 사용자로부터 제2 개체를 왼쪽 위 방향으로 드래그하는 입력을 수신하면 제1 개체는 오른쪽 아래 방향으로 이동한다. 부모 이미지 및 윈도우도 제1 개체와 동일한 방향 및 거리를 이동한다. 제1 개체, 부모 이미지 및 윈도우의 이동 방향 및 거리는 도 4에서 설명한 것과 같은 방식으로 결정될 수 있다.
도 9(b)는 전자 장치가 사용자로부터 제2 개체를 오른쪽 아래 방향으로 드래그하는 입력을 수신한 후의 화면 변화를 나타낸 도면이다. 도 9(b)에 나타난 것과 같이, 전자 장치가 사용자로부터 제2 개체를 오른쪽 아래 방향으로 드래그하는 입력을 수신하면 제1 개체는 왼쪽 위 방향으로 이동한다. 이 때 부모 이미지 및 윈도우도 제1 개체와 동일한 방향 및 거리를 이동한다. 제1 개체, 부모 이미지 및 윈도우의 이동 방향 및 거리는 도 4에서 설명한 것과 같은 방식으로 결정될 수 있다.
한편, 도 9(a) 및 도 9(b)에 나타난 것과 같이, 제1 개체의 이동에 따라 화면에 부모 이미지의 다른 부분이 표시될 수 있다. 윈도우 밖에 있는 부분은 원래 색깔보다 어둡게 표시되도록 할 수 있다.
드래그가 종료되면 제1 개체 상에서 드래그가 종료된 위치에 제2 개체가 배치된다. 배치하는 동작은 제1 개체 상에서 드래그가 종료된 위치에 제2 개체를 삽입하는 동작을 포함할 수 있다.
개체 삽입이 완료되면 전자 장치는 화면을 리프레시(refresh)할 수 있다. 리프레시는 제2 개체 드래그 전 제1 개체가 표시되었던 것과 같은 상태로 제1 개체를 표시하고, 제1 개체에 삽입된 제2 개체를 제1 개체 상에서 특정 아이콘으로 표시하는 것일 수 있다. 제1 개체 상에서 제2 개체가 삽입된 위치를 표시하는 아이콘은 ⊙ 모양의 아이콘일 수 있다.
도 10은 본 발명의 일 실시예에 따른 방법으로서, 화면에 들어가지 않을 정도로 큰 부모 이미지를 화면에 들어갈 크기로 축소하지 않았거나 화면에 들어가는 부모 이미지를 화면에 들어가지 않을 정도의 크기로 확대한 상태에서 제2 개체를 삽입하고자 하는 경우, 제2 개체의 윈도우 밖으로 드래그되었을 때 제1 개체, 부모 이미지 및 윈도우의 이동을 예시한 도면이다.
전자 장치가 사용자로부터 제2 개체를 드래그하는 입력을 수신하면 제2 개체의 드래그 방향과 반대되는 방향으로 제1 개체, 부모 이미지 및 윈도우가 이동한다. 제1 개체의 이동에 따라 화면에 부모 이미지의 다른 부분이 표시될 수 있으며, 윈도우 밖에 있는 부분은 원래 색깔보다 어둡게 표시되도록 할 수 있다.
도 10(a)는 제2 개체가 윈도우 밖으로 드래그된 상태를 나타낸 도면이다. 도 10(a)에 나타난 것과 같이, 제2 개체를 윈도우 밖으로 드래그하는 것이 허용된다.
도 10(b)는 제2 개체가 윈도우 밖으로 드래그된 상태에서 드래그를 멈추고 클릭 또는 터치를 유지하는 사용자 입력을 수신하고 있는 상태를 나타낸 도면이다. 도 10(b)에 나타난 것과 같이, 제2 개체가 화면 왼쪽 위로 드래그되어 윈도우 밖에 위치한 상태에서 드래그를 멈추고 클릭 또는 터치를 유지하고 있으면 윈도우가 멈춘 상태로 부모 이미지 및 제1 개체만을 계속 이동시킬 수 있다. 이 때 부모 이미지 및 제1 개체의 이동 속도를 제1 속도라고 한다.
윈도우의 이동을 멈추고 부모 이미지 및 제1 개체를 제1 속도로 이동시킴으로써, 사용자의 편집 가능 영역에 대한 집중을 유지시키고, 사용자가 쉽게 부모 이미지의 다른 영역에서 제2 개체를 삽입할 위치를 찾을 수 있게 할 수 있다.
한편, 제2 개체가 윈도우 밖으로 드래그된 위치에 따라 부모 이미지 및 제1 개체의 이동 속도를 변경할 수 있다. 예컨대 제2 개체와 윈도우가 기 설정된 거리 이상으로 이격되거나, 제2 개체가 화면 모서리에 기 설정된 거리 이하로 근접할 경우, 부모 이미지 및 제1 개체를 제1 속도와 다른 제2 속도로 이동시킬 수 있다.
또한, 제2 개체가 윈도우 밖으로 드래그된 상태에서의 추가 드래그에 따라 부모 이미지 및 제1 개체의 이동 방향을 변경할 수 있다. 예컨대 제2 개체가 윈도우 밖으로 드래그된 후에 다시 한 번 더 드래그되는 경우, 다시 한 번 더 드래그된 방향과 반대되는 방향으로 부모 이미지 및 제1 개체를 이동시킬 수 있다.
제2 개체를 다시 윈도우의 외부로부터 내부로 드래그하면, 부모 이미지 및 제1 개체를 제1 속도로 이동시키는 동작을 중지하도록 할 수 있다. 현재 윈도우 내부에 표시된 영역에 제2 개체를 삽입할 수 있도록 하기 위해서이다.
6. 순서도
도 11은 본 발명의 일 실시예에 따른 이미지 패닝 방법을 예시한 순서도이다.
도 11에 나타난 것과 같이, 본 발명의 일 실시예에 따른 이미지 패닝 방법은, 전자 장치의 화면에 표시된 제1 개체 상에 제2 개체를 배치시키기 위하여 전자 장치에 의해 수행되는 방법에 있어서, 제2 개체를 제1 개체 상에서 제1 방향으로 이동시키는 드래그하는 입력을 수신하는 단계(S1110), 제1 개체를 제1 방향과 반대되는 제2 방향으로 이동시키는 단계(S1120), 제1 개체의 종단이 화면의 종단에 도달하면(S1130의 '예') 제1 방향으로의 드래그에 따라 제1 개체를 제2 방향으로 지속적으로 이동시킴으로써 제2 개체를 제1 개체의 종단 근처까지 또는 제1 개체의 종단을 벗어나 제1 개체의 외부영역으로 이동시키는 드래그를 허용하는 단계(S1140) 및 드래그가 종료되면(S1150의 '예') 제1 개체 상의 드래그의 종료 위치에 제2 개체를 배치시키는 단계(S1160)를 포함한다.
그밖에 전술한 실시예에서 설명한 내용과 중복되는 내용은 자세한 설명을 생략한다.
도 11은 S1110 내지 S1160을 순차적으로 실행하는 것으로 기재하고 있으나, 이는 본 발명의 기술 사상을 예시적으로 설명한 것에 불과할 뿐, S1110 내지 S1160의 실행이 시계열적인 순서로 한정되는 것은 아니다. 본 발명이 속하는 기술 분야에서 통상의 지식을 가진 자라면 본 발명의 본질적인 특성에서 벗어나지 않는 범위에서 S1110 내지 S1160의 순서를 변경하거나, S1110 내지 S1160에서 하나 이상의 단계를 생략하거나, S1110 내지 S1160에서 하나 이상의 단계를 병렬적으로 실행하는 등 도 11의 방법을 다양하게 수정 및 변형할 수 있을 것이다.
한편, 전술한 실시예들로 설명된 방법은 컴퓨터 또는 스마트폰으로 읽을 수 있는 기록매체에 컴퓨터 또는 스마트폰이 읽을 수 있는 코드로서 구현하는 것이 가능하다. 컴퓨터 또는 스마트폰이 읽을 수 있는 기록매체는 컴퓨터 시스템에 의하여 읽혀질 수 있는 데이터가 저장되는 모든 종류의 기록장치를 포함한다. 즉, 컴퓨터 또는 스마트폰이 읽을 수 있는 기록매체는 마그네틱 저장매체(예를 들면, ROM, 플로피 디스크, 하드디스크 등), 광학적 판독 매체(예를 들면, CD-ROM, DVD 등), 플래시 메모리(예를 들면, USB, SSD) 등과 같은 저장매체를 포함한다. 또한 네트워크로 연결된 컴퓨터 시스템에 분산되어, 분산 방식으로 컴퓨터 또는 스마트폰이 읽을 수 있는 코드가 저장되고 실행될 수 있다.
본 실시예는 본 발명의 기술적 사상을 예시적으로 설명한 것에 불과하고, 본 발명이 속하는 기술 분야에서 통상의 지식을 가진 자라면 본 발명의 본질적인 특성에서 벗어나지 않는 범위에서 본 실시예의 다양한 수정 및 변형이 가능할 것이다.
본 실시예는 본 발명의 기술적 사상을 한정하기 위한 것이 아니라 설명하기 위한 것이고, 따라서 본 실시예에 의하여 본 발명의 권리범위가 한정되는 것은 아니다. 본 발명의 보호범위는 청구범위에 의하여 해석되어야 하며, 그와 동등하거나 균등하다고 인정되는 모든 기술적 사상은 본 발명의 권리범위에 포함되는 것으로 해석되어야 한다.

Claims (14)

  1. 전자 장치의 화면에 표시된 제1 개체 상에 제2 개체를 배치시키기 위하여 전자 장치에 의해 수행되는 방법에 있어서,
    상기 제2 개체를 상기 제1 개체 상에서 제1 방향으로 이동시키는 드래그에 응답하여 상기 화면 상에 표시된 상기 제1 개체를 상기 제1 방향과 반대되는 제2 방향으로 이동시키는 단계; 및
    상기 제2 개체에 대한 드래그가 종료되면 상기 제1 개체 상의 상기 드래그의 종료 위치에 상기 제2 개체를 배치시키는 단계를 포함하되,
    상기 제1 개체를 상기 제2 방향으로 이동시키는 단계는,
    상기 제1 개체의 종단이 상기 화면의 종단에 도달해도 상기 제1 방향으로의 드래그에 따라 상기 제1 개체를 상기 제2 방향으로 지속적으로 이동시킴으로써, 상기 제2 개체를 상기 제1 개체의 종단 근처까지 또는 상기 제1 개체의 종단을 벗어나 상기 제1 개체의 외부영역으로 이동시키는 드래그를 허용하는 방법.
  2. 제1항에 있어서,
    상기 제1 개체는 이미지 전부 또는 일부 영역인 것을 특징으로 하는 방법.
  3. 제1항에 있어서,
    상기 제2 개체를 배치시키는 단계는,
    상기 제1 개체 내의 상기 종료 위치에 상기 제2 개체를 삽입하는 단계를 포함하는 방법.
  4. 제1항에 있어서,
    상기 제1 개체의 종단을 벗어나는 상기 제1 개체의 외부영역으로의 드래그에 응답하여 기 설정된 동작을 실행하는 것을 특징으로 하는 방법.
  5. 제4항에 있어서,
    상기 제1 개체의 종단으로부터 상기 외부영역으로의 드래그의 방향 및 상기 제1 개체의 종단으로부터 상기 외부영역으로의 이격 거리 중 적어도 하나에 근거하여 서로 다른 동작이 실행되는 것을 특징으로 하는 방법.
  6. 제4항에 있어서,
    상기 제2 개체가 상기 제1 개체의 종단을 벗어나 상기 외부영역으로 드래그된 상태에서 사용자로부터 이벤트가 입력되면 상기 이벤트에 대응하는 동작을 실행하는 것을 특징으로 하는 방법.
  7. 제1항에 있어서,
    상기 제1 개체를 상기 제2 방향으로 이동시키는 단계 이전에,
    상기 제1 개체 상에 배치할 상기 제2 개체를 선택하는 사용자 입력을 수신하는 단계;
    상기 제2 개체를 아이콘화하여 상기 화면의 상기 사용자 입력이 수신된 좌표에 표시하는 단계; 및
    상기 화면의 중앙로부터 상기 수신된 좌표를 향한 방향과 반대되는 방향으로 이동된 제1 개체를 상기 화면에 표시하는 단계를 더 포함하는 방법.
  8. 제1항에 있어서,
    상기 제1 개체 상에 이미 배치된 상기 제2 개체를 선택하는 사용자 입력을 수신하는 단계; 및
    상기 화면의 중앙으로부터 상기 제2 개체의 배치된 위치를 향하는 방향과 반대 방향으로 이동된 제1 개체를 상기 화면에 표시하는 단계를 더 포함하는 방법.
  9. 제1항에 있어서,
    상기 제1 개체를 상기 제2 방향으로 이동시키는 단계 이전에,
    상기 제1 개체의 전부 또는 일부 영역을 강조하기 위한 윈도우를 상기 제1 개체 상에 오버랩시켜 상기 화면에 표시하는 단계를 더 포함하고,
    상기 제1 방향과 반대되는 제2 방향으로 이동시키는 단계는, 상기 제2 개체에 대한 상기 제1 방향으로의 드래그에 따라 상기 제1 개체와 상기 윈도우를 동시에 제2 방향으로 이동시키는 것을 특징으로 하는 것을 특징으로 하는 방법.
  10. 제9항에 있어서,
    상기 제1 개체 중 상기 윈도우의 내부에 표시되는 영역과 상기 윈도우의 외부에 표시되는 영역은 서로 다른 시각적 효과로 상기 화면에 디스플레이되는 것을 특징으로 하는 방법.
  11. 제9항에 있어서,
    상기 제2 개체에 대한 제1 방향으로의 드래그가 상기 윈도우의 외부에서 정지되면, 상기 윈도우의 이동을 정지시키고 상기 제1 개체를 제1 속도로 상기 제2 방향으로 이동시키는 것을 특징으로 하는 방법.
  12. 제11항에 있어서,
    상기 제2 개체에 대한 상기 제1 방향으로의 드래그가 상기 윈도우의 외부에서 정지된 위치에 따라, 상기 제1 개체를 상기 제1 속도와 다른 제2 속도로 상기 제2 방향으로 이동시키는 것을 특징으로 하는 방법.
  13. 제11항에 있어서,
    상기 제2 개체를 다시 상기 윈도우의 외부로부터 내부로 드래그하면, 상기 제1 개체를 제1 속도로 상기 제2 방향으로 이동시키는 동작을 중지하는 것을 특징으로 하는 방법.
  14. 제1항 내지 13항 중 어느 한 항의 방법을 실행시키는 프로그램이 기록된 컴퓨터 판독 가능한 기록 매체.
KR1020170184772A 2017-12-29 2017-12-29 이미지 패닝 방법 KR102509976B1 (ko)

Priority Applications (5)

Application Number Priority Date Filing Date Title
KR1020170184772A KR102509976B1 (ko) 2017-12-29 2017-12-29 이미지 패닝 방법
PCT/KR2018/016816 WO2019132563A1 (ko) 2017-12-29 2018-12-28 이미지 패닝 방법
US16/958,562 US11243678B2 (en) 2017-12-29 2018-12-28 Method of panning image
JP2020536663A JP6995208B2 (ja) 2017-12-29 2018-12-28 画像のパンニング方法
EP18896034.8A EP3734431A4 (en) 2017-12-29 2018-12-28 PICTURE PANORAMIC CREATION PROCESS

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR1020170184772A KR102509976B1 (ko) 2017-12-29 2017-12-29 이미지 패닝 방법

Publications (2)

Publication Number Publication Date
KR20190081911A true KR20190081911A (ko) 2019-07-09
KR102509976B1 KR102509976B1 (ko) 2023-03-14

Family

ID=67067861

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020170184772A KR102509976B1 (ko) 2017-12-29 2017-12-29 이미지 패닝 방법

Country Status (5)

Country Link
US (1) US11243678B2 (ko)
EP (1) EP3734431A4 (ko)
JP (1) JP6995208B2 (ko)
KR (1) KR102509976B1 (ko)
WO (1) WO2019132563A1 (ko)

Families Citing this family (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20200079849A (ko) * 2018-12-26 2020-07-06 주식회사 피제이팩토리 멀티 뎁스(multi-depth) 이미지 생성 및 뷰잉
USD945390S1 (en) * 2019-09-24 2022-03-08 Beijing Xiaomi Mobile Software Co., Ltd. Mobile phone with animated graphical user interface

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JPH09258952A (ja) * 1996-03-21 1997-10-03 Oki Electric Ind Co Ltd カードベースハイパーメディア編集制御方法とシステム
US20070097150A1 (en) * 2005-10-28 2007-05-03 Victor Ivashin Viewport panning feedback system
US20110302532A1 (en) * 2010-06-04 2011-12-08 Julian Missig Device, Method, and Graphical User Interface for Navigating Through a User Interface Using a Dynamic Object Selection Indicator
US20140258903A1 (en) * 2011-09-28 2014-09-11 Sharp Kabushiki Kaisha Display device and display method for enhancing visibility
KR20140120628A (ko) * 2013-04-04 2014-10-14 박정환 개체가 삽입된 이미지를 생성하고 편집하는 방법 및 그 장치

Family Cites Families (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US5196838A (en) * 1990-12-28 1993-03-23 Apple Computer, Inc. Intelligent scrolling
US5611060A (en) * 1995-02-22 1997-03-11 Microsoft Corporation Auto-scrolling during a drag and drop operation
US7191402B2 (en) * 2001-05-10 2007-03-13 Samsung Electronics Co., Ltd. Method and apparatus for adjusting contrast and sharpness for regions in a display device
US7665028B2 (en) 2005-07-13 2010-02-16 Microsoft Corporation Rich drag drop user interface
US8074181B2 (en) * 2008-09-15 2011-12-06 Microsoft Corporation Screen magnifier panning model with dynamically resizable panning regions
JP5704655B2 (ja) * 2012-04-12 2015-04-22 株式会社Ｎｔｔドコモ 表示装置及びプログラム
KR20140016454A (ko) * 2012-07-30 2014-02-10 삼성전자주식회사 터치스크린을 구비한 휴대 단말기의 오브젝트 이동을 위한 드래그 제어 방법 및 장치
US10824313B2 (en) * 2013-04-04 2020-11-03 P.J. Factory Co., Ltd. Method and device for creating and editing object-inserted images
US20140372923A1 (en) * 2013-06-14 2014-12-18 Microsoft Corporation High Performance Touch Drag and Drop
GB2516029A (en) * 2013-07-08 2015-01-14 Ibm Touchscreen keyboard

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JPH09258952A (ja) * 1996-03-21 1997-10-03 Oki Electric Ind Co Ltd カードベースハイパーメディア編集制御方法とシステム
US20070097150A1 (en) * 2005-10-28 2007-05-03 Victor Ivashin Viewport panning feedback system
US20110302532A1 (en) * 2010-06-04 2011-12-08 Julian Missig Device, Method, and Graphical User Interface for Navigating Through a User Interface Using a Dynamic Object Selection Indicator
US20140258903A1 (en) * 2011-09-28 2014-09-11 Sharp Kabushiki Kaisha Display device and display method for enhancing visibility
KR20140120628A (ko) * 2013-04-04 2014-10-14 박정환 개체가 삽입된 이미지를 생성하고 편집하는 방법 및 그 장치

Also Published As

Publication number Publication date
EP3734431A1 (en) 2020-11-04
KR102509976B1 (ko) 2023-03-14
EP3734431A4 (en) 2021-09-22
WO2019132563A1 (ko) 2019-07-04
US20200341608A1 (en) 2020-10-29
JP2021508890A (ja) 2021-03-11
JP6995208B2 (ja) 2022-01-14
US11243678B2 (en) 2022-02-08

Similar Documents

Publication Publication Date Title
US10956035B2 (en) Triggering display of application
CN109164964B (zh) 内容分享方法、装置、终端及存储介质
US20190073120A1 (en) Native overlay for rapid editing of web content
CN106575203B (zh) 与再现的内容的基于悬停的交互
RU2540826C2 (ru) Активация внутренней прокрутки и декорирование курсора
US9619435B2 (en) Methods and apparatus for modifying typographic attributes
US10747391B2 (en) Method and device for executing applications through application selection screen
JP5792287B2 (ja) オプションを選択するためのスピンコントロールユーザインターフェース
US10001897B2 (en) User interface tools for exploring data visualizations
US9335899B2 (en) Method and apparatus for executing function executing command through gesture input
KR20180074547A (ko) 디스플레이 장치 및 방법
JP2013528860A (ja) 選択したデータの一時的な書式設定とグラフ化
KR20140094540A (ko) 크로스 윈도우 애니메이션
KR102205283B1 (ko) 적어도 하나의 어플리케이션을 실행하는 전자 장치 및 그 제어 방법
US20180284954A1 (en) Identifying a target area to display a popup graphical element
CN105528159B (zh) 一种图片的操作方法和操作装置
EP3191927B1 (en) Method and device for executing applications through application selection screen
KR20160064925A (ko) 필기 입력 장치 및 그 제어 방법
EP2965181B1 (en) Enhanced canvas environments
KR101747299B1 (ko) 데이터 객체 디스플레이 방법 및 장치와 컴퓨터로 읽을 수 있는 저장 매체
JP6995208B2 (ja) 画像のパンニング方法
CN104898928A (zh) 一种图文信息展示方法及终端
US20140108982A1 (en) Object placement within interface
US20190163353A1 (en) Resizing of images with respect to a single point of convergence or divergence during zooming operations in a user interface
KR20160055552A (ko) 메모 표시 방법 및 이를 위한 디바이스

Legal Events

Date Code Title Description
E902 Notification of reason for refusal
E701 Decision to grant or registration of patent right
GRNT Written decision to grant