From Design pattern
Jump to: navigation, search
(→‎Rotating hands)
 
(60 intermediate revisions by 4 users not shown)
Line 1: Line 1:
−
패턴 설명은 다시 작성해야 합니다. by.jemin
+
Natural gesture는 시스템과 인터랙션 하기 위한 사람의 제스쳐가 수행하고자 하는 테스크와 자연스럽고 긴밀한 관계를 가지고 있는 인터랙션 패턴이다. 사용자가 테스크를 수행하기 위해 제스쳐를 학습하거나 이해하여 따라한다기 보다는 직관적인 제스쳐를 취하도록 함으로써 자연스러운 시스템 조작 인터랙션을 제공하는 경우라 할 수 있다. 이는 테스크 수행을 위해 시스템에서 인위적으로 지정한 특정 제스쳐를 취하도록 하는 [[Symbol gesture]], [[Symbol drawing]] 패턴과 차이를 가진다.
  
−
Hand gesture 는 손의 움직임을 이용하여 시스템을 조작하는 모든 사례들을 포함한다. 이때, 손가락의 움직임을 이용한 사례는 Manipulation>Gesture command>Finger gesture 에 포함되며 손의 움직임이 언어적 성향을 지닐 경우 Manipulation>Gesture command>Gesture command 에 포함된다. 
+
Natural gesture는 제스쳐와 테스크가 자연스럽게 연결된 다양한 사례들을 묶은 패턴 그룹으로 정의된다.
  
−
페이지에 포함되어 있는 사례는 손동작을 중심으로 각각의 사례가 그룹핑 되어 있다. 각각의 그룹은 하나의 동작이 유사한 solution 을 제공하는 패턴으로 묶여진 사례라기 보다, 립모션, 키네틱 등의 입력장치를 통해 손의 움직임을 인식해서 다양한 조작이 이루어지는 사례 모음에 가깝다. 아래 모여진 사례들은 추후 움직임과 solution 이 유사한 사레들이 묶일 경우 독립된 패턴으로 규정될 수 있을 것으로 보인다.
+
===With this pattern, we can solve....===
 +
GUI로 대표되는 WIMP(Window-Icon-Menu-Pointer) 방식의 인터페이스로 시스템을 조작하는 것에 비해, 립모션, 키넥트 등과 같이 카메라나 센서를 이용해 제스처를 직접 입력하여 시스템을 조작할 때, 어떤 제스처를 취해야 원하는 태스크를 수행할 수 있는지 예측하거나 기억하는 것이 쉽지 않다. 이런 상황에서 직관적이고 자연스러운 제스쳐를 통해 시스템 조작이 이루어진다면 사용자는 조작법 이해를 위한 별도의 학습 없이 보다 쉽게 테스크를 수행할 수 있을 것이다.  
  
−
== Shaking Hand ==
+
* 손을 좌우로 흔드는 동작을 통해 화면의 책장을 넘기거나 물체를 회전시키는 등의 테스크를 자연스럽게 수행할 수 있다.
−
=== 227_2번 사례 ===
+
* 개체를 잡아서 움직이는 동작을 통해 객체를 이동하거나 화면을 움직이는 등의 테스크를 자연스럽게 수행할 수 있다.
−
* 사례 설명 입력 예정
+
* 양손으로 잡아 늘리는 동작을 통해 객체를 변형하거나 화면을 확대하는 등의 테스크를 자연스럽게 수행할 수 있다.
−
{{#Widget:Vimeo|id=93326757|width=665|height=374}}
+
* 양손으로 잡아 회전시키는 동작을 통해 객체나 화면을 회전시키는 테스크를 자연스럽게 수행할 수 있다.
  
−
=== 297번 사례 ===
+
=== Example : LG smart tv===
−
* 손 날을 오른쪽 또는 왼쪽으로 흔드는 행동을 통해 메뉴 화면을 좌우로 이동한다.
+
[[File:LG smart tv.png|665px]]
 +
----
 +
== Flicking Hand ==
 +
=== Leap motion _ NY TIMES ===
 +
* 손을 좌우로 흔드는 동작을 이용하여 정렬되어져 있는 기사들을 넘겨 본다.
 +
* 터치기반의 제스쳐 커맨드 방식에서 손가락으로 기사를 넘겨보기 위해 좌우로 swipe하던 방식이 모션인식 기술에서 손을 좌우로 흔드는 동작으로 자연스럽게 전환된 사례이다.
 +
{{#Widget:Vimeo|id=93326757|width=665|height=374}}
 +
=== LG Smart TV ===
 +
* 손을 좌우로 흔드는 동작을 이용하여 현재 비춰진 화면을 좌우로 넘겨 본다.
 +
* 현재 비춰진 화면에 좌우로 감춰진 화면이 있는 상황에서 큐브를 돌리듯 자연스럽게 화면을 돌려 보는 사례이다.
 
{{#Widget:Vimeo|id=94915198|width=665|height=374}}
 
{{#Widget:Vimeo|id=94915198|width=665|height=374}}
−
 
+
=== Leap motion _ The weather channel ===
−
=== Leapmotion _ 앱이름 기재 ===
+
* 손을 좌우로 흔드는 동작을 이용하여 화면속 지구본을 회전시켜 본다.
 +
* 실제 지구본을 돌려보듯 자연스럽게 화면속에 지구본을 돌려 원하는 곳의 날씨 정보를 확인 하는 사례이다.
 
{{#Widget:Vimeo|id=96625949|width=665|height=374}}
 
{{#Widget:Vimeo|id=96625949|width=665|height=374}}
  
−
=== Nod ===
+
----
−
* 반지를 이용한 제스처 인식으로, 페이지를 넘기는 듯한 제스처를 통해 책을 본다.
+
−
아래 영상의 29-30초에 해당한다.
+
−
{{#Widget:Youtube|id=dy-Ac9X9oSo|width=665|height=374}}
+
  
 
== Grasping & Moving hand ==
 
== Grasping & Moving hand ==
−
 
+
=== Samsung Smart TV ===
−
=== 368번 사례 ===
+
* 주먹을 쥐고 손을 움직이면 화면속 이미지의 위치를 이동시킨다.
−
* 확대된 사진 속 화면을 주먹을 쥔 손을 움직여 Navigating 할 수 있다.  
+
* 물건을 잡아서 옮기듯 자연스럽게 화면속의 이미지를 이동시켜 보는 사례이다.
 
{{#Widget:Vimeo|id=94916766|width=665|height=374}}
 
{{#Widget:Vimeo|id=94916766|width=665|height=374}}
  
−
== Stretch ==
+
=== Samsung smart tv_Zack quack app ===
−
=== Samsung _ Smart TV _ Stretch ===
+
* 마치 스위치 줄을 당기듯 주먹을 쥐고 당겼다가 놓는 제스처를 통하여 게임을 실행 시킨다.
−
{{#Widget:Vimeo|id=96668018|width=665|height=374}}
+
{{#Widget:Vimeo|id=94917553|width=665|height=374}}
 +
----
  
−
=== Leapmotion ===
+
== Stretching ==
 +
=== Samsung  Smart TV ===
 +
* 양손으로 주먹을 쥐고 손을 움직이면 화면속 이미지가 늘어나거나 줄어든다.
 +
* 물건을 잡아 늘이듯 자연스럽게 화면속의 이미지를 늘이거나 줄이는 사례이다.
 +
{{#Widget:Vimeo|id=96678186|width=665|height=374}}
 +
=== Leapmotion _ The weather channel ===
 +
* 양손가락을 움직이면 화면속 지구본이 커지며 화면이 확대/축소된다.
 +
* 두손가락으로 고무줄을 잡아 늘이고 줄이듯 자연스럽게 화면속에 비춰진 이미지를 확대하거나 축소시키는 사례이다.
 
{{#Widget:Vimeo|id=96627133|width=665|height=374}}
 
{{#Widget:Vimeo|id=96627133|width=665|height=374}}
 +
----
 +
== Rotating hands ==
 +
=== Samsung Smart TV ===
 +
* 양손으로 주먹을 쥐고 손을 회전시키면 화면속 이미지가 돌아간다.
 +
* 물건을 잡아 돌리듯 자연스럽게 화면속의 이미지를 돌려서 보는 사례이다.
 +
{{#Widget:Vimeo|id=94916615|width=665|height=374}}
  
−
== Rotate hands ==
+
=== Leapmotion ===
−
 
+
* 손가락을 원 모양으로 돌리면 게임 캐릭터의 머리가 같이 돌아간다.
−
=== 367번 사례 ===
+
{{#Widget:Vimeo|id=93327179|width=665|height=374}}
−
* 사례 설명 입력 예정
+
−
{{#Widget:Vimeo|id=94916615|width=665|height=374}}
+
  
 +
----
  
 
== Scrolling ==
 
== Scrolling ==
−
=== 430번 사례 ===
+
=== Leap Motion _ All the cooks ===
−
* 립모션에서 손바닥을 화면 방향으로 향하게 한 채로 상/하로 움직여 다음 화면으로 이동한다.
+
* 손을 위아래로 이동하면 화면의 페이지가 위아래로 이동한다.
 +
* 손바닥으로 종이를 밀고 당기듯 화면속의 페이지를 자연스럽게 이동시키는 사례이다.
 
{{#Widget:Vimeo|id=93327398|width=665|height=374}}
 
{{#Widget:Vimeo|id=93327398|width=665|height=374}}
  
−
=== 227번 사례 ===
+
=== 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 ===
−
 
+
* 이미지나 영상등의 컨텐츠 항목을 둘러보는 상황에서 두 손을 자연스럽게 움직여 컨텐츠를 살펴본다.
 +
* 헤엄을 치듯 두 손을 좌우로 벌리면 화면에 표시된 컨텐츠를 바라보는 시선이 앞뒤로 이동한다.
 +
* 한 손을 좌우로 이동하면 화면에 표시된 컨텐츠를 바라보는 시선이 좌우로 이동한다.
 +
* #00:00-#00:15
 +
{{#Widget:Youtube|id=LqD6WuIOu7o|width=665|height=374}}
  
  
  
 
[[category:Gesture command]]
 
[[category:Gesture command]]

Latest revision as of 17:08, 15 July 2014

Natural gesture는 시스템과 인터랙션 하기 위한 사람의 제스쳐가 수행하고자 하는 테스크와 자연스럽고 긴밀한 관계를 가지고 있는 인터랙션 패턴이다. 사용자가 테스크를 수행하기 위해 제스쳐를 학습하거나 이해하여 따라한다기 보다는 직관적인 제스쳐를 취하도록 함으로써 자연스러운 시스템 조작 인터랙션을 제공하는 경우라 할 수 있다. 이는 테스크 수행을 위해 시스템에서 인위적으로 지정한 특정 제스쳐를 취하도록 하는 Symbol gesture, Symbol drawing 패턴과 차이를 가진다.

Natural gesture는 제스쳐와 테스크가 자연스럽게 연결된 다양한 사례들을 묶은 패턴 그룹으로 정의된다.

With this pattern, we can solve....

GUI로 대표되는 WIMP(Window-Icon-Menu-Pointer) 방식의 인터페이스로 시스템을 조작하는 것에 비해, 립모션, 키넥트 등과 같이 카메라나 센서를 이용해 제스처를 직접 입력하여 시스템을 조작할 때, 어떤 제스처를 취해야 원하는 태스크를 수행할 수 있는지 예측하거나 기억하는 것이 쉽지 않다. 이런 상황에서 직관적이고 자연스러운 제스쳐를 통해 시스템 조작이 이루어진다면 사용자는 조작법 이해를 위한 별도의 학습 없이 보다 쉽게 테스크를 수행할 수 있을 것이다.

  • 손을 좌우로 흔드는 동작을 통해 화면의 책장을 넘기거나 물체를 회전시키는 등의 테스크를 자연스럽게 수행할 수 있다.
  • 개체를 잡아서 움직이는 동작을 통해 객체를 이동하거나 화면을 움직이는 등의 테스크를 자연스럽게 수행할 수 있다.
  • 양손으로 잡아 늘리는 동작을 통해 객체를 변형하거나 화면을 확대하는 등의 테스크를 자연스럽게 수행할 수 있다.
  • 양손으로 잡아 회전시키는 동작을 통해 객체나 화면을 회전시키는 테스크를 자연스럽게 수행할 수 있다.

Example : LG smart tv

LG smart tv.png

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

""

Retrieved from "http://www.ixpatterns.com/index.php?title=Natural_gesture&oldid=107942"