From Design pattern
Jump to: navigation, search
 
(17 intermediate revisions by 3 users not shown)
Line 1: Line 1:
{{#css:
+
Symbol gesture는 화면상의 객체를 조정하거나 시스템을 조작하는데 있어서 시스템이 요구하는 동작을 이해, 학습하여 이루어지는 인터랙션 패턴이다. 직관적인 제스처를 활용하는 [[Natural gesture]]나 사회.문화적으로 관습화된 제스쳐를 활용하는 [[Gesture language]]와 구별되는 패턴이라 할 수 있다. 사용자가 자연스럽게 인터랙션 방법을 예측하기가 어렵기 때문에 일반적으로 화면상에 가이드 아이콘이 표시되거나 매뉴얼이 존재한다.
#mw-content-text h3 span {
+
font-weight: 600;
+
padding-left: 0px;
+
}
+
  
.mw-headline {
+
Symbol gesture 크게 Discrete와 Continuous의 개념으로 나누어 정의된다. Discrete symbol gesture에는 사용자의 제스쳐를 분절적, 단계적으로 인식하여 명령(command)을 수행하는 사례들이 주로 포함된다. Continuous symbol gesture에는 사용자의 연속적인 행동변화를 인식하여 조절 및 변형(control, transformation)을 지속적으로 수행하는 사례가 주로 포함된다.  
font-weight: 600;
+
}
+
 
+
span.mw-editsection {
+
font-weight: 200;
+
position: relative;
+
float:right;
+
margin-right: 25px
+
}
+
 
+
span.mw-editsection a {
+
font-weight: 200;
+
}
+
 
+
.art-subpage {
+
background: #F7F7F7;
+
}
+
 
+
#mw-content-text p {
+
padding-top: 0px;
+
padding-bottom: 6px;
+
}
+
 
+
.mw-content-ltr ul {
+
margin: 0.3em 0 0 42px;
+
}
+
 
+
 
+
hr {
+
margin-top: 0px;
+
margin-bottom: 0px;
+
margin-left: -31px;
+
width: 720px;
+
border-bottom: 1px solid #E0E0DD;
+
border-left: 0px;
+
border-right: 0px;
+
border-top: 30px solid #F7F7F7;
+
}
+
<!--
+
#sun-col {
+
-webkit-column-count:2; /* Chrome, Safari, Opera */
+
-moz-column-count:2; /* Firefox */
+
column-count:2;
+
}
+
 
+
#sun-col p {
+
padding-left: 0px;
+
-->
+
}
+
 
+
}}
+
Symbol gesture는 화면상의 객체를 조정하거나 시스템을 조작하는데 있어서 시스템이 요구하는 동작을 이해, 학습하여 이루어지는 인터랙션 패턴이다. 직관적인 제스처를 활용하는 Natural gesture 나 사회적, 관습적 제스쳐를 활용하는 Gesture language의 상위 개념이라 할 수 있다. 일반적으로 사용자가 자연스럽게 인터랙션을 수행할 수 없기 때문에 화면상에 가이드 아이콘이 표시되거나 메뉴얼이 존재한다.
+
 
+
Symbol gesture는 크게 Descrete 와 Continous 의 개념으로 나누어 정의된다. Descrete symbol gesture는 사용자의 제스쳐를 일회적, 단계적으로 인식하여 테스크 수행에 적용하는 패턴으로 명령(command) 개념의 사례가 주로 포함된다. Continous symbol gesture는 사용자의 행동변화를 인식하여 테스크 수행에 지속적으로 적용하는 패턴으로 조절(transformation, control) 개념의 사례가 주로 포함된다.  
+
  
 
===With this pattern, we can solve....===
 
===With this pattern, we can solve....===
Symbol gesture는 시스템이 요구하는 행동을 사용자가 이해, 학습하여 조작하는 패턴으로, 경우에 따라 테스크 수행과 직접적인 연관성이 떨어지는 행위가 테스크를 수행하는데 요구될 수 있다. [[Gesture mouse]]를 이용하여 다양한 동작을 수행하는 과정에서 특정한 명령이나 시스템에 대한 조절과 같이 주로 사용되지 않는 테스크를 수행하는데 주로 사용된다. 다양한 제스쳐를 개별적인 테스크와 연계함으로써  [[Multi-touch gesture]]와 같이 멀티태스킹, 숏컷 명령에 적용하거나, 다양한 테스크를 복합적으로 수행해야 하는 전문적인 시스템에 활용할 수 있다.  
+
Symbol gesture는 시스템이 요구하는 동작을 사용자가 이해, 학습하여 조작하는 패턴으로, 특정 태스크와 이를 수행하기 위한 특정 제스처의 세트를 정의내림으로써 다양한 제스처들을 활용할 수 있다. 그러나 태스크 수행를 위해 인위적으로 정의된 일련의 특정 동작들을 기억하고 있어야 하므로, 사용자의 인지적 부담이 커질 있는 단점도 있다.
  
* 주로 사용하지 않는 메뉴나 특수한 테스크를 수행하는데 사용될 수 있다.
+
* 특수한 태스크를 수행하는데 사용될 수 있다.
* 시스템의 상태를 변경, 조절하기 위한 테스크를 수행하는데 사용될 수 있다.
+
* 일반적인 태스크를 수행하기 위해 차별화된 독특한 입력 방식을 제시할 때 사용될 수 있다.
* 멀티태스킹이나 숏컷 명령을 실행하기 위한 테스크에 사용될 수 있다.
+
* 전문적인 시스템에서 한 번의 제스처로 복합적인 태스크를 수행해야 할 때 사용될 수 있다.
* 전문적인 시스템에 복합적인 메뉴얼을 적용해야 할 때 사용될 수 있다.
+
* 양 손 제스처로 조작하여 수행하는 것이 일반적인 태스크를 한 손 제스처로만 조작할 수 있도록 하기 위해 사용될 수 있다.  
  
 
=== Example : Hand tracking experiment_ribbons===
 
=== Example : Hand tracking experiment_ribbons===
Line 73: Line 15:
  
 
=== Example : Leap Motion _ 360 Fly ===
 
=== Example : Leap Motion _ 360 Fly ===
아래 영상은 Natural gesture, Descrete symbol gesture, Continous symbol gesture 를 이용하여 화면에 비춰진 이미지를 볼 수 있는 다양한 방법에 대하여 설명한다.
+
아래 영상은 Natural gesture, Discrete symbol gesture, Continous symbol gesture 를 이용하여 화면에 비춰진 이미지를 볼 수 있는 다양한 방법에 대하여 설명 한다.
# 5s - 12s : 손을 좌우로 움직이면 움직임이 향하는 방향에 맞춰 자연스럽에 화면에 비춰진 이미지가 이동한다. _ [[Natural gesture]]
+
* #00:12-#00:20 : 손가락을 시계방향(반시계방향)으로 돌리면 화면에 비춰진 이미지를 단계적으로 이동하여 오른쪽(왼쪽) 부분을 볼 수 있게 한다. _ Discrete symbol gesture  
# 12s - 20s : 손가락을 시계방향(반시계방향)으로 돌리면 화면에 비춰진 이미지를 단계적으로 이동하여 오른쪽(왼쪽) 부분을 볼 수 있게 한다. _ Descrete symbol gesture  
+
* #00:20-#00:30 : 손목을 아래로(위로) 기울이면 화면에 비춰진 이미지를 지속적으로 이동하여 오른쪽(왼쪽) 부분을 볼 수 있게 한다. _ Continous symbol gesture
# 20s - 30s : 손목을 아래로(위로) 기울이면 화면에 비춰진 이미지를 지속적으로 이동하여 오른쪽(왼쪽) 부분을 볼 수 있게 한다. _ Continous symbol gesture
+
 
{{#Widget:Vimeo|id=84697748|width=665|height=374}}
 
{{#Widget:Vimeo|id=84697748|width=665|height=374}}
 
----
 
----
  
== Descrete symbol gesture ==
+
== Discrete symbol gesture ==
 
===Hand Tracking Gesture Experiment #1 _ Ribbons ===
 
===Hand Tracking Gesture Experiment #1 _ Ribbons ===
 
* 손가락으로 브이를 그리는 제스처를 취하면, 손의 움직임에 따라 그림을 그릴 수 있게 된다.
 
* 손가락으로 브이를 그리는 제스처를 취하면, 손의 움직임에 따라 그림을 그릴 수 있게 된다.
Line 111: Line 52:
 
== Continuous symbol gesture ==
 
== Continuous symbol gesture ==
 
=== Leap Motion _ HandWAVE ===
 
=== Leap Motion _ HandWAVE ===
# 손가락을 시계방향으로 돌리면 볼륨을 지속적으로 키워 재생중인 음악을 크게 들을 수 있게 한다.
+
* 손가락을 시계방향으로 돌리면 볼륨을 지속적으로 키워 재생중인 음악을 크게 들을 수 있게 한다.
# 손가락을 반시계방향으로 돌리면 볼륨을 지속적으로 줄여 재생중인 음악을 작게 들을 수 있게 한다.  
+
* 손가락을 반시계방향으로 돌리면 볼륨을 지속적으로 줄여 재생중인 음악을 작게 들을 수 있게 한다.  
 
{{#Widget:Vimeo|id=96714802|width=665|height=374}}
 
{{#Widget:Vimeo|id=96714802|width=665|height=374}}
  
 
=== Leap Motion _ NY TIMES ===
 
=== Leap Motion _ NY TIMES ===
# 손가락을 시계방향으로 돌리면 화면의 상하 스크롤러가 아래로 계속 이동하며 기사의 아랫 부분이 보여지게 한다.
+
* 손가락을 시계방향으로 돌리면 화면의 상하 스크롤러가 아래로 계속 이동하며 기사의 아랫 부분이 보여지게 한다.
# 손가락을 반시계방향으로 돌리면 화면의 상하 스크롤러가 위로 계속 이동하며 기사의 윗 부분이 보여지게 한다.
+
* 손가락을 반시계방향으로 돌리면 화면의 상하 스크롤러가 위로 계속 이동하며 기사의 윗 부분이 보여지게 한다.
 
{{#Widget:Vimeo|id=93326766|width=665|height=374|}}
 
{{#Widget:Vimeo|id=93326766|width=665|height=374|}}
  
 
=== Leapmotion _ NY TIMES ===
 
=== Leapmotion _ NY TIMES ===
# 손가락을 시계방향으로 돌리면 화면이 좌우 스크롤러가 오른쪽으로 계속 이동하며 다른 기사를 볼 수 있게 한다.
+
* 손가락을 시계방향으로 돌리면 화면이 좌우 스크롤러가 오른쪽으로 계속 이동하며 다른 기사를 볼 수 있게 한다.
# 손가락을 반시계방향으로 돌리면 화면의 좌우 스크롤러가 왼쪽으로 계속 이동하며 다른 기사를 볼 수 있게 한다.
+
* 손가락을 반시계방향으로 돌리면 화면의 좌우 스크롤러가 왼쪽으로 계속 이동하며 다른 기사를 볼 수 있게 한다.
 
{{#Widget:Vimeo|id=93326754|width=665|height=374}}
 
{{#Widget:Vimeo|id=93326754|width=665|height=374}}
  
 
=== Leap Motion _ Lotus ===
 
=== Leap Motion _ Lotus ===
# 손을 쥐었다 펴는 동작에 맞춰 영상과 음악의 속도가 변한다.
+
* 손을 쥐었다 펴는 동작에 맞춰 영상과 음악의 속도가 변한다.
# 손을 완전히 쥘경우 음악과 영상의 속도가 느려지며 동작을 멈추며 손을 펼경우 음악과 영상의 속도가 원상태로 돌아온다.
+
* 손을 완전히 쥘경우 음악과 영상의 속도가 느려지며 동작을 멈추며 손을 펼경우 음악과 영상의 속도가 원상태로 돌아온다.
 
{{#Widget:Vimeo|id=96708519|width=665|height=374}}
 
{{#Widget:Vimeo|id=96708519|width=665|height=374}}
  
 
----
 
----
== 멀티 심볼 제스쳐 ?? ==
+
== Multi symbol gesture ==
* 다양한 심볼 제스쳐를 이용하여 화면에 띄워져 있는 객체를 변경할 수 있다.
+
다양한 심볼 제스쳐를 이용하여 화면에 띄워져 있는 객체를 변경할 수 있다. 각각의 제스쳐는 멀티 터치 제스쳐와 유사한 개념으로 작동하며 특정한 명령 개념으로 사용자가 이해, 학습하고 사용해야 한다.   
* 각각의 제스쳐는 멀티 터치 제스쳐와 유사한 개념으로 작동하며 특정한 명령 개념으로 사용자가 이해, 학습하고 사용해야 한다.   
+
 
=== Leap Motion _ threeleapcontrols - Control THREE.js with Leap Motion ===
 
=== Leap Motion _ threeleapcontrols - Control THREE.js with Leap Motion ===
# 손가락 두개를 펼친 상태에서 손을 움직이면 화면에 떠 있는 객체를 바라보는 시선의 위치를 변경한다.
+
* 손가락 두개를 펼친 상태에서 손을 움직이면 화면에 떠 있는 객체를 바라보는 시선의 위치를 변경한다.
# 손가락 세개를 펼친 상태에서 손을 움직이면 화면에 떠 있는 객체의 위치를 변경한다.
+
* 손가락 세개를 펼친 상태에서 손을 움직이면 화면에 떠 있는 객체의 위치를 변경한다.
# 손가락을 모두 펼친 상태에서 손을 앞뒤로 움직이면 보여지는 화면을 확대하거나 축소한다.
+
* 손가락을 모두 펼친 상태에서 손을 앞뒤로 움직이면 보여지는 화면을 확대하거나 축소한다.
# 손가락 한개를 펼친 상태에서 객체중이 하나를 가리키면 색이 변하며 선택된다.
+
* 손가락 한개를 펼친 상태에서 객체중이 하나를 가리키면 색이 변하며 선택된다.
 
{{#Widget:Youtube|id=SQDAa-cqlrA|width=665|height=374}}
 
{{#Widget:Youtube|id=SQDAa-cqlrA|width=665|height=374}}
  
 
=== Leap Motion _ Radiological Image Manipulation using Leap Motion Controller ===
 
=== Leap Motion _ Radiological Image Manipulation using Leap Motion Controller ===
# 손가락 두개를 펼친상태에서 손을 위와래로 움직이면 연속 촬영되어져 있는 MRI 레이어를 상하로 이동하여 볼 수 있다.
+
* 손가락 두개를 펼친상태에서 손을 위와래로 움직이면 연속 촬영되어져 있는 MRI 레이어를 상하로 이동하여 볼 수 있다.
# 손가락 두개를 오므리거나 벌리면 화면에 보여지고 있는 MRI 화면을 확대 축소하여 볼 수 있다.
+
* 손가락 두개를 오므리거나 벌리면 화면에 보여지고 있는 MRI 화면을 확대 축소하여 볼 수 있다.  
 
{{#Widget:Youtube|id=2BTJiXsu-A0|width=665|height=374}}
 
{{#Widget:Youtube|id=2BTJiXsu-A0|width=665|height=374}}
  

Latest revision as of 12:40, 12 July 2014

Symbol gesture는 화면상의 객체를 조정하거나 시스템을 조작하는데 있어서 시스템이 요구하는 동작을 이해, 학습하여 이루어지는 인터랙션 패턴이다. 직관적인 제스처를 활용하는 Natural gesture나 사회.문화적으로 관습화된 제스쳐를 활용하는 Gesture language와 구별되는 패턴이라 할 수 있다. 사용자가 자연스럽게 인터랙션 방법을 예측하기가 어렵기 때문에 일반적으로 화면상에 가이드 아이콘이 표시되거나 매뉴얼이 존재한다.

Symbol gesture 는 크게 Discrete와 Continuous의 개념으로 나누어 정의된다. Discrete symbol gesture에는 사용자의 제스쳐를 분절적, 단계적으로 인식하여 명령(command)을 수행하는 사례들이 주로 포함된다. Continuous symbol gesture에는 사용자의 연속적인 행동변화를 인식하여 조절 및 변형(control, transformation)을 지속적으로 수행하는 사례가 주로 포함된다.

With this pattern, we can solve....

Symbol gesture는 시스템이 요구하는 동작을 사용자가 이해, 학습하여 조작하는 패턴으로, 특정 태스크와 이를 수행하기 위한 특정 제스처의 세트를 정의내림으로써 다양한 제스처들을 활용할 수 있다. 그러나 태스크 수행를 위해 인위적으로 정의된 일련의 특정 동작들을 기억하고 있어야 하므로, 사용자의 인지적 부담이 커질 수 있는 단점도 있다.

  • 특수한 태스크를 수행하는데 사용될 수 있다.
  • 일반적인 태스크를 수행하기 위해 차별화된 독특한 입력 방식을 제시할 때 사용될 수 있다.
  • 전문적인 시스템에서 한 번의 제스처로 복합적인 태스크를 수행해야 할 때 사용될 수 있다.
  • 양 손 제스처로 조작하여 수행하는 것이 일반적인 태스크를 한 손 제스처로만 조작할 수 있도록 하기 위해 사용될 수 있다.

Example : Hand tracking experiment_ribbons

Hand tracking.png

Example : Leap Motion _ 360 Fly

아래 영상은 Natural gesture, Discrete symbol gesture, Continous symbol gesture 를 이용하여 화면에 비춰진 이미지를 볼 수 있는 다양한 방법에 대하여 설명 한다.

  • #00:12-#00:20 : 손가락을 시계방향(반시계방향)으로 돌리면 화면에 비춰진 이미지를 단계적으로 이동하여 오른쪽(왼쪽) 부분을 볼 수 있게 한다. _ Discrete symbol gesture
  • #00:20-#00:30 : 손목을 아래로(위로) 기울이면 화면에 비춰진 이미지를 지속적으로 이동하여 오른쪽(왼쪽) 부분을 볼 수 있게 한다. _ Continous symbol gesture


Discrete symbol gesture

Hand Tracking Gesture Experiment #1 _ Ribbons

  • 손가락으로 브이를 그리는 제스처를 취하면, 손의 움직임에 따라 그림을 그릴 수 있게 된다.
  • 엄지손가락을 구부리는 제스처를 취하면, 화면에 그려진 그림을 녹화할 수 있게 된다.

Samsung Smart TV

  • 영상이 재생되고 있을때 주먹을 쥐었다 펴는 동작을 취하면 영상이 일시정지된다.
  • 일시정지 상태에서 다시 주먹을 쥐었다 펴는 동작을 취하면 영상이 재생된다.

Leap Motion _ NY TIMES

  • 손바닥이 땅을 향한 상태에서 좌우로 휘져으면 창이 닫힌다.

Leap Motion _ IONE

  • 손가락으로 쿡 찌르는 동작을 취하면 게임을 일시정지한다.

Samsung Smart TV

  • 손을 반시계 방향으로 돌리면 상위 메뉴로 이동하게 한다.

Leap Motion _ IONE

  • 손가락을 한바퀴 돌리는 제스처를 통해 게임을 다시 시작한다.


Continuous symbol gesture

Leap Motion _ HandWAVE

  • 손가락을 시계방향으로 돌리면 볼륨을 지속적으로 키워 재생중인 음악을 크게 들을 수 있게 한다.
  • 손가락을 반시계방향으로 돌리면 볼륨을 지속적으로 줄여 재생중인 음악을 작게 들을 수 있게 한다.

Leap Motion _ NY TIMES

  • 손가락을 시계방향으로 돌리면 화면의 상하 스크롤러가 아래로 계속 이동하며 기사의 아랫 부분이 보여지게 한다.
  • 손가락을 반시계방향으로 돌리면 화면의 상하 스크롤러가 위로 계속 이동하며 기사의 윗 부분이 보여지게 한다.

Leapmotion _ NY TIMES

  • 손가락을 시계방향으로 돌리면 화면이 좌우 스크롤러가 오른쪽으로 계속 이동하며 다른 기사를 볼 수 있게 한다.
  • 손가락을 반시계방향으로 돌리면 화면의 좌우 스크롤러가 왼쪽으로 계속 이동하며 다른 기사를 볼 수 있게 한다.

Leap Motion _ Lotus

  • 손을 쥐었다 펴는 동작에 맞춰 영상과 음악의 속도가 변한다.
  • 손을 완전히 쥘경우 음악과 영상의 속도가 느려지며 동작을 멈추며 손을 펼경우 음악과 영상의 속도가 원상태로 돌아온다.


Multi symbol gesture

다양한 심볼 제스쳐를 이용하여 화면에 띄워져 있는 객체를 변경할 수 있다. 각각의 제스쳐는 멀티 터치 제스쳐와 유사한 개념으로 작동하며 특정한 명령 개념으로 사용자가 이해, 학습하고 사용해야 한다.

Leap Motion _ threeleapcontrols - Control THREE.js with Leap Motion

  • 손가락 두개를 펼친 상태에서 손을 움직이면 화면에 떠 있는 객체를 바라보는 시선의 위치를 변경한다.
  • 손가락 세개를 펼친 상태에서 손을 움직이면 화면에 떠 있는 객체의 위치를 변경한다.
  • 손가락을 모두 펼친 상태에서 손을 앞뒤로 움직이면 보여지는 화면을 확대하거나 축소한다.
  • 손가락 한개를 펼친 상태에서 객체중이 하나를 가리키면 색이 변하며 선택된다.

""

Leap Motion _ Radiological Image Manipulation using Leap Motion Controller

  • 손가락 두개를 펼친상태에서 손을 위와래로 움직이면 연속 촬영되어져 있는 MRI 레이어를 상하로 이동하여 볼 수 있다.
  • 손가락 두개를 오므리거나 벌리면 화면에 보여지고 있는 MRI 화면을 확대 축소하여 볼 수 있다.

""