Difference between revisions of "Natural gesture"
Navigation menu
From Design pattern
(→Leap Motion _ Three JS - Portal Cube manipulation) |
(→Rotating hands) |
||
| (22 intermediate revisions by 3 users not shown) | |||
| Line 1: | Line 1: | ||
| − | Natural gesture는 시스템과 인터랙션 하기 위한 사람의 제스쳐가 수행하고자 하는 테스크와 자연스럽고 긴밀한 관계를 가지고 있는 인터랙션 패턴이다. 사용자가 테스크를 수행하기 위해 제스쳐를 | + | Natural gesture는 시스템과 인터랙션 하기 위한 사람의 제스쳐가 수행하고자 하는 테스크와 자연스럽고 긴밀한 관계를 가지고 있는 인터랙션 패턴이다. 사용자가 테스크를 수행하기 위해 제스쳐를 학습하거나 이해하여 따라한다기 보다는 직관적인 제스쳐를 취하도록 함으로써 자연스러운 시스템 조작 인터랙션을 제공하는 경우라 할 수 있다. 이는 테스크 수행을 위해 시스템에서 인위적으로 지정한 특정 제스쳐를 취하도록 하는 [[Symbol gesture]], [[Symbol drawing]] 패턴과 차이를 가진다. |
Natural gesture는 제스쳐와 테스크가 자연스럽게 연결된 다양한 사례들을 묶은 패턴 그룹으로 정의된다. | Natural gesture는 제스쳐와 테스크가 자연스럽게 연결된 다양한 사례들을 묶은 패턴 그룹으로 정의된다. | ||
===With this pattern, we can solve....=== | ===With this pattern, we can solve....=== | ||
| − | + | GUI로 대표되는 WIMP(Window-Icon-Menu-Pointer) 방식의 인터페이스로 시스템을 조작하는 것에 비해, 립모션, 키넥트 등과 같이 카메라나 센서를 이용해 제스처를 직접 입력하여 시스템을 조작할 때, 어떤 제스처를 취해야 원하는 태스크를 수행할 수 있는지 예측하거나 기억하는 것이 쉽지 않다. 이런 상황에서 직관적이고 자연스러운 제스쳐를 통해 시스템 조작이 이루어진다면 사용자는 조작법 이해를 위한 별도의 학습 없이 보다 쉽게 테스크를 수행할 수 있을 것이다. | |
* 손을 좌우로 흔드는 동작을 통해 화면의 책장을 넘기거나 물체를 회전시키는 등의 테스크를 자연스럽게 수행할 수 있다. | * 손을 좌우로 흔드는 동작을 통해 화면의 책장을 넘기거나 물체를 회전시키는 등의 테스크를 자연스럽게 수행할 수 있다. | ||
| Line 14: | Line 14: | ||
[[File:LG smart tv.png|665px]] | [[File:LG smart tv.png|665px]] | ||
---- | ---- | ||
| − | == | + | == Flicking Hand == |
=== Leap motion _ NY TIMES === | === Leap motion _ NY TIMES === | ||
* 손을 좌우로 흔드는 동작을 이용하여 정렬되어져 있는 기사들을 넘겨 본다. | * 손을 좌우로 흔드는 동작을 이용하여 정렬되어져 있는 기사들을 넘겨 본다. | ||
| Line 27: | Line 27: | ||
* 실제 지구본을 돌려보듯 자연스럽게 화면속에 지구본을 돌려 원하는 곳의 날씨 정보를 확인 하는 사례이다. | * 실제 지구본을 돌려보듯 자연스럽게 화면속에 지구본을 돌려 원하는 곳의 날씨 정보를 확인 하는 사례이다. | ||
{{#Widget:Vimeo|id=96625949|width=665|height=374}} | {{#Widget:Vimeo|id=96625949|width=665|height=374}} | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
---- | ---- | ||
| Line 39: | Line 35: | ||
* 물건을 잡아서 옮기듯 자연스럽게 화면속의 이미지를 이동시켜 보는 사례이다. | * 물건을 잡아서 옮기듯 자연스럽게 화면속의 이미지를 이동시켜 보는 사례이다. | ||
{{#Widget:Vimeo|id=94916766|width=665|height=374}} | {{#Widget:Vimeo|id=94916766|width=665|height=374}} | ||
| + | |||
| + | === Samsung smart tv_Zack quack app === | ||
| + | * 마치 스위치 줄을 당기듯 주먹을 쥐고 당겼다가 놓는 제스처를 통하여 게임을 실행 시킨다. | ||
| + | {{#Widget:Vimeo|id=94917553|width=665|height=374}} | ||
---- | ---- | ||
| + | |||
== Stretching == | == Stretching == | ||
=== Samsung Smart TV === | === Samsung Smart TV === | ||
| Line 55: | Line 56: | ||
* 물건을 잡아 돌리듯 자연스럽게 화면속의 이미지를 돌려서 보는 사례이다. | * 물건을 잡아 돌리듯 자연스럽게 화면속의 이미지를 돌려서 보는 사례이다. | ||
{{#Widget:Vimeo|id=94916615|width=665|height=374}} | {{#Widget:Vimeo|id=94916615|width=665|height=374}} | ||
| + | |||
| + | === Leapmotion === | ||
| + | * 손가락을 원 모양으로 돌리면 게임 캐릭터의 머리가 같이 돌아간다. | ||
| + | {{#Widget:Vimeo|id=93327179|width=665|height=374}} | ||
---- | ---- | ||
| Line 65: | Line 70: | ||
=== Leap Motion _ NY TIMES === | === Leap Motion _ NY TIMES === | ||
| + | |||
* 손을 화면의 좌,우측 끝에 두면 화면의 페이지가 방향에 맞춰 지속적으로 이동한다. | * 손을 화면의 좌,우측 끝에 두면 화면의 페이지가 방향에 맞춰 지속적으로 이동한다. | ||
* 손이 위치한 방향과 페이지가 움직이는 방향이 자연스럽게 연결된 사례이다. | * 손이 위치한 방향과 페이지가 움직이는 방향이 자연스럽게 연결된 사례이다. | ||
{{#Widget:Vimeo|id=93326755|width=665|height=374}} | {{#Widget:Vimeo|id=93326755|width=665|height=374}} | ||
| + | ---- | ||
| − | == | + | == Others == |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
=== Leap Motion _ Web GL Lightroom === | === Leap Motion _ Web GL Lightroom === | ||
* 이미지나 영상등의 컨텐츠 항목을 둘러보는 상황에서 두 손을 자연스럽게 움직여 컨텐츠를 살펴본다. | * 이미지나 영상등의 컨텐츠 항목을 둘러보는 상황에서 두 손을 자연스럽게 움직여 컨텐츠를 살펴본다. | ||
* 헤엄을 치듯 두 손을 좌우로 벌리면 화면에 표시된 컨텐츠를 바라보는 시선이 앞뒤로 이동한다. | * 헤엄을 치듯 두 손을 좌우로 벌리면 화면에 표시된 컨텐츠를 바라보는 시선이 앞뒤로 이동한다. | ||
* 한 손을 좌우로 이동하면 화면에 표시된 컨텐츠를 바라보는 시선이 좌우로 이동한다. | * 한 손을 좌우로 이동하면 화면에 표시된 컨텐츠를 바라보는 시선이 좌우로 이동한다. | ||
| + | * #00:00-#00:15 | ||
{{#Widget:Youtube|id=LqD6WuIOu7o|width=665|height=374}} | {{#Widget:Youtube|id=LqD6WuIOu7o|width=665|height=374}} | ||
Latest revision as of 17:08, 15 July 2014
Natural gesture는 시스템과 인터랙션 하기 위한 사람의 제스쳐가 수행하고자 하는 테스크와 자연스럽고 긴밀한 관계를 가지고 있는 인터랙션 패턴이다. 사용자가 테스크를 수행하기 위해 제스쳐를 학습하거나 이해하여 따라한다기 보다는 직관적인 제스쳐를 취하도록 함으로써 자연스러운 시스템 조작 인터랙션을 제공하는 경우라 할 수 있다. 이는 테스크 수행을 위해 시스템에서 인위적으로 지정한 특정 제스쳐를 취하도록 하는 Symbol gesture, Symbol drawing 패턴과 차이를 가진다.
Natural gesture는 제스쳐와 테스크가 자연스럽게 연결된 다양한 사례들을 묶은 패턴 그룹으로 정의된다.
Contents
With this pattern, we can solve....
GUI로 대표되는 WIMP(Window-Icon-Menu-Pointer) 방식의 인터페이스로 시스템을 조작하는 것에 비해, 립모션, 키넥트 등과 같이 카메라나 센서를 이용해 제스처를 직접 입력하여 시스템을 조작할 때, 어떤 제스처를 취해야 원하는 태스크를 수행할 수 있는지 예측하거나 기억하는 것이 쉽지 않다. 이런 상황에서 직관적이고 자연스러운 제스쳐를 통해 시스템 조작이 이루어진다면 사용자는 조작법 이해를 위한 별도의 학습 없이 보다 쉽게 테스크를 수행할 수 있을 것이다.
- 손을 좌우로 흔드는 동작을 통해 화면의 책장을 넘기거나 물체를 회전시키는 등의 테스크를 자연스럽게 수행할 수 있다.
- 개체를 잡아서 움직이는 동작을 통해 객체를 이동하거나 화면을 움직이는 등의 테스크를 자연스럽게 수행할 수 있다.
- 양손으로 잡아 늘리는 동작을 통해 객체를 변형하거나 화면을 확대하는 등의 테스크를 자연스럽게 수행할 수 있다.
- 양손으로 잡아 회전시키는 동작을 통해 객체나 화면을 회전시키는 테스크를 자연스럽게 수행할 수 있다.
Example : LG smart tv
Flicking Hand
Leap motion _ NY TIMES
- 손을 좌우로 흔드는 동작을 이용하여 정렬되어져 있는 기사들을 넘겨 본다.
- 터치기반의 제스쳐 커맨드 방식에서 손가락으로 기사를 넘겨보기 위해 좌우로 swipe하던 방식이 모션인식 기술에서 손을 좌우로 흔드는 동작으로 자연스럽게 전환된 사례이다.
LG Smart TV
- 손을 좌우로 흔드는 동작을 이용하여 현재 비춰진 화면을 좌우로 넘겨 본다.
- 현재 비춰진 화면에 좌우로 감춰진 화면이 있는 상황에서 큐브를 돌리듯 자연스럽게 화면을 돌려 보는 사례이다.
Leap motion _ The weather channel
- 손을 좌우로 흔드는 동작을 이용하여 화면속 지구본을 회전시켜 본다.
- 실제 지구본을 돌려보듯 자연스럽게 화면속에 지구본을 돌려 원하는 곳의 날씨 정보를 확인 하는 사례이다.
Grasping & Moving hand
Samsung Smart TV
- 주먹을 쥐고 손을 움직이면 화면속 이미지의 위치를 이동시킨다.
- 물건을 잡아서 옮기듯 자연스럽게 화면속의 이미지를 이동시켜 보는 사례이다.
Samsung smart tv_Zack quack app
- 마치 스위치 줄을 당기듯 주먹을 쥐고 당겼다가 놓는 제스처를 통하여 게임을 실행 시킨다.
Stretching
Samsung Smart TV
- 양손으로 주먹을 쥐고 손을 움직이면 화면속 이미지가 늘어나거나 줄어든다.
- 물건을 잡아 늘이듯 자연스럽게 화면속의 이미지를 늘이거나 줄이는 사례이다.
Leapmotion _ The weather channel
- 양손가락을 움직이면 화면속 지구본이 커지며 화면이 확대/축소된다.
- 두손가락으로 고무줄을 잡아 늘이고 줄이듯 자연스럽게 화면속에 비춰진 이미지를 확대하거나 축소시키는 사례이다.
Rotating hands
Samsung Smart TV
- 양손으로 주먹을 쥐고 손을 회전시키면 화면속 이미지가 돌아간다.
- 물건을 잡아 돌리듯 자연스럽게 화면속의 이미지를 돌려서 보는 사례이다.
Leapmotion
- 손가락을 원 모양으로 돌리면 게임 캐릭터의 머리가 같이 돌아간다.
Scrolling
Leap Motion _ All the cooks
- 손을 위아래로 이동하면 화면의 페이지가 위아래로 이동한다.
- 손바닥으로 종이를 밀고 당기듯 화면속의 페이지를 자연스럽게 이동시키는 사례이다.
Leap Motion _ NY TIMES
- 손을 화면의 좌,우측 끝에 두면 화면의 페이지가 방향에 맞춰 지속적으로 이동한다.
- 손이 위치한 방향과 페이지가 움직이는 방향이 자연스럽게 연결된 사례이다.
Others
Leap Motion _ Web GL Lightroom
- 이미지나 영상등의 컨텐츠 항목을 둘러보는 상황에서 두 손을 자연스럽게 움직여 컨텐츠를 살펴본다.
- 헤엄을 치듯 두 손을 좌우로 벌리면 화면에 표시된 컨텐츠를 바라보는 시선이 앞뒤로 이동한다.
- 한 손을 좌우로 이동하면 화면에 표시된 컨텐츠를 바라보는 시선이 좌우로 이동한다.
- #00:00-#00:15
""