From Design pattern
Jump to: navigation, search
(→‎Example)
 
(25 intermediate revisions by 4 users not shown)
Line 1: Line 1:
−
하나의 화면 안에 작은 화면을 띄워 활용하거나 조작한다.
+
Picture in picture(PIP)는 하나의 화면 안에 작은 화면을 띄워 활용하거나 조작하는 패턴이다. 앱의 기능에 따라 두 개의 독립적인 화면이 필요할 수 있으며, 이 때 PIP는 자동으로 형성된다.
  
 +
게시글과 관련된 동영상을 함께 보거나, 영상통화에서 상대방과 본인의 모습을 함께 보거나 하는 것처럼 실시간으로 변화하는 화면과 직접 조작할 수 있는 화면이 동시에 존재하는 경우, 둘 중의 하나를 작은 화면으로 표시하여 함께 볼 수 있다. 일반적으로는 PIP의 위치는 화면 내에서 쉽게 변화하지 않으며 다른 작업을 진행하는데 방해되는 위치에 있는 경우, 사용자의 의지에 따라 보이지 않게 설정하는 것이 가능하다.
  
−
== Examples ==
+
=== With this pattern, we can solve... ===
 +
두 개의 화면을 동시에 보는데 한 개의 화면은 조작할 필요가 없이 참고의 용도로 실시간으로 보고자 하는 경우 PIP가 활용된다.
  
−
=== iPhone_Youtube===
+
* PIP가 필수적이지 않으며, 나타나지 않게 하고 싶은 경우 제거가 가능하다.
−
* 재생중인 영상 화면을 화면 하단으로 drag하여 축소시켜 본다.
+
* 동영상이 아니더라도 화면에 작은 화면이 나타나며 사용자에게 정보를 주는 경우는 PIP 패턴에 포함한다.
−
* 영상은 조그맣게 계속 재생되면서, 동시에 다른 영상을 검색하거나 확인하는 작업을 할 수 있다.
+
* 두 개의 화면을 모두 조작해야 하는 경우 [[Multi window]]에 해당한다.
−
{{#Widget:Vimeo|id=95718771|width=300|height=534}}
+
* PIP는 Multi window와는 다르게 화면의 분할을 사용자가 직접 조작하기보다는 필요에 따라 자동으로 나타난다.
  
−
=== iPhone_Youtube===
+
=== Example : iOS_Youtube ===
−
* 기능버튼을 tap하여 화면의 상당수를 차지하고 있는 동영상을 작게 줄인다.  
+
[[File:Picture in picture.jpeg]]
−
* 영상은 조그맣게 계속 재생되면서, 동시에 다른 영상을 검색하거나 확인하는 작업을 할 수 있다.
+
−
{{#Widget:Vimeo|id=95718947|width=300|height=534}}
+
  
−
=== 196번 사례 ===
+
----
−
* 후면카메라를 통하여 영상 촬영시 전면카메라를 통해 입력되는 영상을 창을 통하여 조작할 수 있으며, 동시에 촬영한다.
+
−
<videoflash>aCRH0sKxv1c|665|374</videoflash>
+
  
−
=== 196_2번 사례 ===
+
=== iOS_Youtube ===
−
* 후면카메라를 통하여 촬영시 전면카메라를 통해 입력되는 영상을 창을 통하여 조작할 수 있으며,  동시에 촬영한다.
+
{{#Widget:Vimeo|id=95718771|width=300|height=534}}
−
* 단, 아래 영상의 1분 6초 ~ 1분 20초에 해당한다.
+
{{#Widget:Vimeo|id=95718947|width=300|height=534}}
−
<videoflash>04zxuC8-0t4|665|374</videoflash>
+
−
 
+
−
=== 195번 사례 ===
+
−
* 재생중인 영상위로 다른 어플리케이션이 보여지는 화면에서 가로 슬라이더 바의 조절점을 좌우로 drag 하여 최상단 레이어의 투명도를 조절한다.
+
−
* 단, 아래 영상의 43초 ~ 53초에 해당한다.
+
−
<videoflash>4Cv8y672Z38|665|374</videoflash>
+
  
−
=== 209번 사례 ===
+
=== iOS_CNN ===
 
* 동영상과 게시글이 함께 있는 경우, 게시글의 다음페이지로 넘어가더라도 동영상이 작은 화면으로 띄워져 동영상과 게시글을 동시에 본다.
 
* 동영상과 게시글이 함께 있는 경우, 게시글의 다음페이지로 넘어가더라도 동영상이 작은 화면으로 띄워져 동영상과 게시글을 동시에 본다.
−
<videoflash type="vimeo">93372318|300|405</videoflash>
+
{{#Widget:Vimeo|id=93372318|width=300|height=405}}
  
−
=== 385번 사례 ===
+
=== iOS_Paper by FiftyThree ===
−
* 다른 곳으로 이동시키고 싶은 페이지를 hold하여 화면의 일부에 띄워놓고 다른 손으로 원하는 위치를 활성화시킨 후 hold한 손을 놓으면 페이지가 해당 위치로 이동된다.
+
{{#Widget:Vimeo|id=96657238|width=665|height=374}}
−
<videoflash type="vimeo">93374135|533|395</videoflash>
+
  
 +
=== Android_LG G Pro Dual Recording & Dual Camera ===
 +
{{#Widget:Youtube|id=aCRH0sKxv1c|width=665|height=374}}
 +
* #01:06-#01:20
 +
{{#Widget:Youtube|id=04zxuC8-0t4|width=665|height=374}}
  
 +
=== Android_LG G Pro QSlide ===
 +
* #00:30-#00:40
 +
{{#Widget:Youtube|id=4Cv8y672Z38|width=665|height=374}}
  
 
[[Category:Utilize screen by multimode]]
 
[[Category:Utilize screen by multimode]]

Latest revision as of 17:15, 31 July 2014

Picture in picture(PIP)는 하나의 화면 안에 작은 화면을 띄워 활용하거나 조작하는 패턴이다. 앱의 기능에 따라 두 개의 독립적인 화면이 필요할 수 있으며, 이 때 PIP는 자동으로 형성된다.

게시글과 관련된 동영상을 함께 보거나, 영상통화에서 상대방과 본인의 모습을 함께 보거나 하는 것처럼 실시간으로 변화하는 화면과 직접 조작할 수 있는 화면이 동시에 존재하는 경우, 둘 중의 하나를 작은 화면으로 표시하여 함께 볼 수 있다. 일반적으로는 PIP의 위치는 화면 내에서 쉽게 변화하지 않으며 다른 작업을 진행하는데 방해되는 위치에 있는 경우, 사용자의 의지에 따라 보이지 않게 설정하는 것이 가능하다.

With this pattern, we can solve...

두 개의 화면을 동시에 보는데 한 개의 화면은 조작할 필요가 없이 참고의 용도로 실시간으로 보고자 하는 경우 PIP가 활용된다.

  • PIP가 필수적이지 않으며, 나타나지 않게 하고 싶은 경우 제거가 가능하다.
  • 동영상이 아니더라도 화면에 작은 화면이 나타나며 사용자에게 정보를 주는 경우는 PIP 패턴에 포함한다.
  • 두 개의 화면을 모두 조작해야 하는 경우 Multi window에 해당한다.
  • PIP는 Multi window와는 다르게 화면의 분할을 사용자가 직접 조작하기보다는 필요에 따라 자동으로 나타난다.

Example : iOS_Youtube

Picture in picture.jpeg

iOS_Youtube

iOS_CNN

  • 동영상과 게시글이 함께 있는 경우, 게시글의 다음페이지로 넘어가더라도 동영상이 작은 화면으로 띄워져 동영상과 게시글을 동시에 본다.

iOS_Paper by FiftyThree

Android_LG G Pro Dual Recording & Dual Camera

""

  • #01:06-#01:20

""

Android_LG G Pro QSlide

  • #00:30-#00:40

""

Retrieved from "http://www.ixpatterns.com/index.php?title=Picture_in_picture(PIP)&oldid=109558"