#SNUUX #UXLAB #360Video 9/29 발제자료 aju

1. Sharing and Navigating
360°Videos and Maps in
Sight Surfers
+ MindTrek. 2012
- Gonçalo Noronha, Carlos
Álvares, Teresa Chambel
/안아주
x 2016 Fall

2. < Why This Paper? >
내 시야에 들어오지 않는 것을 어떻게 알 수 있을까?
• AR / VR 환경에서 시야에 들어오지 않는 정보에 대한 불안감
• 이런 정보를 알려주는 다양한 방법 > 정보의 위치를 알려주는 Circular Beacon, 강제로 보게 하는 SwiVR Chair
• 360 Image/Video 를 다룬 논문을 찾아보자!
2
Augmented Climbing Wall - Circular Beacon SwiVR Chair - "not missing anything"

3. < Abstract >
사라지는 시야의 경계, 넓어지는 정보의 범위
• 동영상은 현재를 포착하여 시청자에게 생생한 현장감을 제공
• 360° Video 에서는 이전에 고정되어있던 시야의 경계가 사라지고, 더 압도적인 경험을 제공
• Hypervideo 에서는 사용자가 접할 수 있는 정보의 범위를 다른 매체로 확장
> 360° hypervideo를 위한 어플리케이션 디자인, 이에 대한 사용자 평가
3
Traditional Video Hypervideo360° Video

4. < Sight Surfers >
사용자의 루트를 업로드하고 공유할 수 있는 플랫폼
• 동영상과 이동 경로가 결합된 360° hypervideo를 위한 웹 어플리케이션
• "in other user’s shoes" 과 같은 경험을 제공
5

5. < Design>
Georeferenced 360° Video Capture & View
• SONY 360 카메라로 촬영 방향에 대한 정보를 담은 360° 영상 제작
> cylindrical 영상으로 컨버팅 후, screen, mini map에 출력
• 스마트폰 GPS를 통해 촬영 중 이동 경로에 대한 데이터 수집
> google map에 경로 표시
• 이동과 관련된 메타 데이터 생성 - 속력, 시간대, 교통 수단, 이동 목적 등
> 이후 경로 필터링 및 검색에 활용
6
Google Map
Mini Map
Screen
All
synchronized

6. < Design >
Navigation & Orientation in the 360° Video
• 360° 영상을 보는 사용자에게, 보고 있는 영상의 위치와 방향 정보를 알려주기 위한 디자인
7

7. < Design >
Navigation & Orientation in the 360° Video
8
Drag Interface + Edge Navigation
• 마우스로 스크린을 드래그 하여, 좌/우로 화면을 회전
• 스크린 가장자리에 커서를 놓으면, 자동으로 천천히 화면이 좌/우로 회전

8. < Design >
Navigation & Orientation in the 360° Video
9
Video View Area Compass
• 사용자고 보고있는(screen) 방향을 붉은색으로 표시
• 붉은색 부분을 드래그하여 화면 좌/우로 회전
• 3가지 모드를 제공
a. Video center UP : 촬영자의 시야를 중심으로
b. North UP : 지도와 매칭이 용이함
c. Current orientation UP
a
b
c

9. < Design >
Navigation & Orientation in the 360° Video
10
Minimap Video
• cylindrical 360°영상을 평면에, 한눈에 보이도록 축소해서
• 사용자고 보고있는(screen) 방향을 붉은색 박스로 표시
• 붉은색 박스를 드래그하여 화면 좌/우로 회전 가능
Video Timeline

10. < Design >
Geographical Navigation & Orientation in the 360° Video and
Maps
11
• 영상의 이동 경로와 관련된 지리적 위치와 방향 정보를 알려주기 위한 디자인

11. < Design >
Geographical Navigation & Orientation in the 360° Video and
Maps• 영상의 이동 경로와 관련된 지리적 위치와 방향 정보를 알려주기 위한 디자인
12
지도내 경로 표시
• 촬영자의 이동 경로를 구글맵에 표시
• 현재 보고있는 경로 : 초록색 / 지금까지 본 경로 : 빨간색 / 다른 경로 : 파란색
• 경로 선택을 통해 뷰 포인트 변경 가능
View area marker
• 현재 뷰 포인트의 경로 내 위치와,
사용자가 screen으로 보고 있는 방향을 표
시
• 마우스로 마커를 이동하여 뷰 포인트 변경
가능

12. < Design >
Navigation & orientation in 360° Hypervideo
13
• 영상에 추가적인 정보를 입히고, 이 정보를 사용자에게 알려주기 위한 디자인

13. < Design >
Navigation & orientation in 360° Hypervideo
14
• 영상에 추가적인 정보를 입히고, 이 정보를 사용자에게 알려주기 위한 디자인
3 types of hyperlinks
• Points of Interest (green) : 관심 있는 장소 > 관련 링크로 이동 ex) 레스토랑, 지하철역 등
• Corssing Trajectories (blue) : 다른 비디오의 경로와 겹치는 부분 > 다른 비디오로 이
동
• Movies (gray) : 영화에 나온 장소 > 해당 영화 클립 재생

14. < Design >
Navigation & orientation in 360° Hypervideo
15
• 영상에 추가적인 정보를 입히고, 이 정보를 사용자에게 알려주기 위한 디자인
Hotspot Indicator
• 뷰 포인트 밖에 있는 요소들을 사용자에게 인식시키기 위한 방법
• on the Lateral edges : hotspot이 있는 위치를 알려주는 indicator를 스크린 옆에 출력
- hotspot과 가까워지면 indicator 크기가 커짐
• on the Minimap : 미니맵에 indicator를 표시

15. < Design >
Navigation & orientation in 360° Hypervideo
16
• 영상에 추가적인 정보를 입히고, 이 정보를 사용자에게 알려주기 위한 디자인
Memory Bar
• 사용자가 본 영상의 을 하이라이팅해서 보여주는 창
• 가로축 : 영상의 시간
• 세로축 : 뷰포인트의 방향
ex) 세로로 직선이 그어져 있다면, 해당 시간에 정지시키고 한바퀴를 다 본 것.
영상 시작 영상 끝
0~359°

16. < Evaluation >
사용자의 반응을 보기 위한 UI, 기능요소 평가
• task-oriented evaluation X observation X semi-structured Interviews
• 피험자에게 25개의 task를 수행하도록하고, 각 task 마다 1-5점 USE 점수를 매김
17
Navigation & Orientation
in the 360° Video
Geographical Navigation & Orientation
in the 360° Video and Maps
Navigation & orientation
in 360° Hypervideo
- 비디오를 움직여 주변을 둘러보고, 처음 방향에 위치시켜라 : drag interface / + View Area / +Minimap
- View Area Compass 모드를 변경하라 / 각 모드의 의미를 파악하라
- 지도 위의 경로의 3가지 다른 색이 어떤 의미인지 파악하라
- Praça Luís de Camões 로 이동하라 : 경로 선택으로 / View Area Marker을 사용하여
- 영화 링크를 찾고, 실행시켜라
- 메모리바의 의미를 설명해라
- task 예시 -

17. < Results & Conclusions >
사용자의 선호 및 디자인 개선 포인트 도출
18
1. Minimap 을 통한 방향 조작을 선호
- 전체를 한 눈에 볼 수 있는 뷰를 제공, 어느 방향으로 가야할지 파악하기 쉬움
2. North UP Compass 모드를 선호
- 우측에 보이는 지도와 같은 방향 -> 회전 방향 파악이 용이
5. ? - Compass 모드의 존재, Memory Bar의 의미/용도
4. 링크 아이콘의 차이를 더 명확하게
- 영화 링크의 경우 clapboard를 사용하는 등
3. 비디오 스크린과 google map 부분의 크기 조절
- 메인 컨텐츠인 비디오에 더 집중할 수 있도록 비디오 스크린 확대
Global Evaluation: (U)seful; (S)atisfactory; (F)un to use;
(E)asy to Use; (EU) Easy to Understand; (UA) Use Again

18. < Discussion >
내 시야에 들어오지 않는 것을 어떻게 알 수 있을까?
19
1. Spherical 영상의 경우에 mini map을 대신할 효과적인 방법
- 좌/우 뿐만이 아니라 위/아래에 시선을 둘 수 있는 shperical 형태의 비디오의 경우에도
직사각형의 minimap이 도움이 될까?
2. 모든 정보를 다 알려주는 것이 과연 사용자에게 효과적일까?
- 정보를 놓치는 것에 대한 불안감과 동시에, 너무 많은 정보를 다 보지 못하는 것에 대한 부담감

19. 감사합니다.