From Design pattern
Jump to: navigation, search
(Leap Motion _ Lotus)
 
(28 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는 사회적, 문화적으로 형성된 관습화, 규범화된 제스처 (i.e. 수신호, 수화)를 활용한 인터랙션 패턴이다. 직관적인 제스처를 활용하는 Natural gesture와는 이런 점에서 구분된다.
+
 
+
Symbol gesture는 제스쳐와 테스크가 연결된 다양한 사례를 묶은 패턴 그룹으로 정의된다.
+
  
 
===With this pattern, we can solve....===
 
===With this pattern, we can solve....===
Natural gesture는 직관적이라는 장점이 있지만, 의도하지 않은 제스처로 인해 기기가 동작할 있는 단점이 있다. 우리 생활 속에서 언어화된 관례적이고 기호화된 제스처의 수는 생각보다 많지 않으며, 사용자의 의도에 따라 정확한 조작리 필요한 경우 Symbol gesture를 사용하는 것은 매우 효과적이다.
+
Symbol gesture는 시스템이 요구하는 동작을 사용자가 이해, 학습하여 조작하는 패턴으로, 특정 태스크와 이를 수행하기 위한 특정 제스처의 세트를 정의내림으로써 다양한 제스처들을 활용할 수 있다. 그러나 태스크 수행를 위해 인위적으로 정의된 일련의 특정 동작들을 기억하고 있어야 하므로, 사용자의 인지적 부담이 커질 수 있는 단점도 있다.
  
* Symbol gesture를 통해 컨텐츠를 재생하거나 정지, 이동할 수 있다.
+
* 특수한 태스크를 수행하는데 사용될 수 있다.
* Symbol gesture를 통해 상황을 기록하거나 삭제할 수 있다.
+
* 일반적인 태스크를 수행하기 위해 차별화된 독특한 입력 방식을 제시할 때 사용될 수 있다.
 +
* 전문적인 시스템에서 한 번의 제스처로 복합적인 태스크를 수행해야 할 때 사용될 수 있다.
 +
* 양 손 제스처로 조작하여 수행하는 것이 일반적인 태스크를 한 손 제스처로만 조작할 수 있도록 하기 위해 사용될 수 있다.  
  
 
=== Example : Hand tracking experiment_ribbons===
 
=== Example : Hand tracking experiment_ribbons===
Line 71: 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 106: Line 49:
  
 
----
 
----
 +
 
== Continuous symbol gesture ==
 
== Continuous symbol gesture ==
=== Leap Motion _ threeleapcontrols - Control THREE.js with Leap Motion ===
 
* 다양한 심볼 제스쳐를 이용하여 화면에 띄워져 있는 객체를 변경할 수 있다.
 
* 각각의 제스쳐는 멀티 터치 제스쳐와 유사한 개념으로 작동하며 특정한 명령 개념으로 사용자가 이해, 학습하고 사용해야 한다. 
 
# 손가락 두개를 펼친 상태에서 손을 움직이면 화면에 떠 있는 객체를 바라보는 시선의 위치를 변경한다.
 
# 손가락 세개를 펼친 상태에서 손을 움직이면 화면에 떠 있는 객체의 위치를 변경한다.
 
# 손가락을 모두 펼친 상태에서 손을 앞뒤로 움직이면 보여지는 화면을 확대하거나 축소한다.
 
# 손가락 한개를 펼친 상태에서 객체중이 하나를 가리키면 색이 변하며 선택된다.
 
{{#Widget:Youtube|id=SQDAa-cqlrA|width=665|height=374}}
 
 
 
=== 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 ===
 +
* 손가락 두개를 펼친 상태에서 손을 움직이면 화면에 떠 있는 객체를 바라보는 시선의 위치를 변경한다.
 +
* 손가락 세개를 펼친 상태에서 손을 움직이면 화면에 떠 있는 객체의 위치를 변경한다.
 +
* 손가락을 모두 펼친 상태에서 손을 앞뒤로 움직이면 보여지는 화면을 확대하거나 축소한다.
 +
* 손가락 한개를 펼친 상태에서 객체중이 하나를 가리키면 색이 변하며 선택된다.
 +
{{#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 화면을 확대 축소하여 볼 수 있다.
 
{{#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 화면을 확대 축소하여 볼 수 있다.

""