vr03

VR 인터페이스 디자인을 시작하는 방법 (feat. KT Super VR)

지난 2월  MBC에서 방영된 특집 VR 휴먼 다큐멘터리 <너를 만났다>를 보셨나요?
<너를 만났다>는 혈액암으로 7살이라는 어린 나이에 하늘나라로 떠난 딸(나연)을 그리워하는 엄마에게 가상현실(VR)을 통하여 만날 수 있게 한 프로젝트입니다. 가상현실(VR)의 발전된 기술력은 나연이를 생생하게 표현해냈고 엄마와 나연이의 가상현실(VR) 속 재회 장면은 많은 이들을 감동하게 했습니다.

20200206223825_gcihdfuv* MBC [VR휴먼다큐멘터리 - 너를 만났다]   https://youtu.be/uflTK8c4w0c

가상현실(VR)은 재미를 추구하던 게임 콘텐츠를 넘어 현실에서 만날 수 없는 가족을 만나게 해주고, 갈 수 없는 곳에 가게 해주는 등 그 범위가 크게 확대되고 있습니다. 그러다 보니 기업들 또한 잠재력이 풍부한 시장인 가상현실(VR)에 주목하고 뛰어들고 있는 건 당연한데요.
실제로 많은 기업이 가상현실(VR) 콘텐츠로 고객들의 눈과 귀를 사로잡기 위해 다각도로 노력을 기울이고 있습니다.

저 역시 지난해 IPTV의 콘텐츠를 VR에서 더욱 생동감 있게 시청할 수 있도록 VR UI를 구축하는 프로젝트에 참여하게 되었는데요. KT의 ’KT Super VR’이 바로 그 프로젝트입니다.
이 프로젝트를 설계할 때에는 가상현실(VR)의 모범 사례가 많이 없어 구현하기까지 수많은 시행착오를 거쳤습니다. 아직은 생소할 수 있는 VR UI 제작 과정을 보여드림으로써 앞으로의 디자인에 도움이 되었으면 좋겠습니다.

이 글은 크게 VR UI 디자인 프로세스(2D UI 작업 방법)VR 인터페이스 프로세스(3D 환경에 적용하는 방법)로 구성되어 있습니다.

  • VR UI 디자인 프로세스 – 실제 작업 화면 환경 및 UI 디자인 시 사용성을 위한 고려 사항
  • VR 인터페이스 프로세스 – 가상공간구성 방법과 프로젝트를 하며 알게 된 적용 팁

(프로젝트 진행 시 활용한 프로그램은 포토샵과 유니티(UNITY)이며, 이 두 가지 툴을 기준으로 작성하였습니다. 프로그램 및 디바이스 환경에 따라 작업 방식이 달라질 수 있습니다.)

 

VR UI 디자인 프로세스

1. 어디에 그려야 할까요?

360도 캔버스에 직면하면 어디서부터 시작해야 하는지 막막합니다.
결론부터 말하자면 VR 화면은 2D로 그린 UI 요소를 3D 공간에 재배치하는 과정을 통해 구현됩니다.

VR UI는 생소하지만 지금까지 해오던 모바일 UI 디자인 경험을 토대로 작업이 가능한데요.
먼저, 사용자가 편안함을 느끼는 상, 하, 좌우 시야각을 고려하여 캔버스 사이즈를 정해야 합니다. 하늘과 땅이 존재하는 360 공간을 모두 디자인하면 사용자가 길을 잃을 수 있어서 집중할 수 있는 편안한 시선 범위를 지정하는 거죠.

002

이 공간은 관심 영역이라고 하며 360도 환경의 9분의 1에 해당합니다. 직사각형 이미지의 중앙에 위치하며 크기는 4k 해상도(3840k x 2180k) 기준 대략 1200×600 픽셀입니다. 이 공간은 크게 컴포터블 존(Comfortable zone)과 세이프티 존(Safety zone)으로 나뉩니다

  1. 컴포터블 존(Comfortable zone) – 서비스를 제공하는 대부분의 콘텐츠가 위치하는 영역.
  2. 세이프티 존(Safety zone) – 사용자가 집중해야 할 핵심 콘텐츠가 위치하는 영역.
  3. 그 외(Look left, top, right ,bottom)- 사용자 시야 밖에 있어 찾아보아야 하는 부가적인 콘텐츠가 위치하는 영역.

* TIP 위 수치는 대략적인 작업 공간을 확보하기 위한 가이드입니다. 꼭 직접 디바이스에 적용해 보고 작업하세요.

GUI 작업 시작 시 기준이 될 몇 가지 시안을 VR에 직접 적용하여 개발과 테스트하여 확인하세요. 디자인된 UI는 디바이스의 해상도와 환경에 영향을 받습니다. 폰트, 컬러, UI 사이즈 등 반영된 화면을 미리 체크하고 제작 가이드를 만들어 프로젝트를 진행해 나아가는 방법을 꼭 추천합니다.

 

2.확보한 공간에 UI 디자인을 시작합니다.

VR 디자인에 앞서 사용자 리서치를 통해 디바이스의 사용성을 이해해야 합니다. 기껏 2D 콘텐츠를 3D로 만들었는데, 2D로 콘텐츠를 소비하는 것보다 불편하게 느끼면 안 되기 때문에 예상되는 문제점을 파악해야 하죠.

아래는 유사한 서비스를 통한 사용자 리서치 결과입니다.

- 분산된 콘텐츠를 찾다 보니 어지럽다.
– 스크롤에 사용성에 대한 어려움이 있다.
– 버튼이 너무 작아 선택이 어렵다.
– 배경 이미지에 따라 콘텐츠 집중이 어렵다.

리서치를 통해 어떤 부분을 활용, 개선하여 VR 콘텐츠 사용성을 높일 수 있는지 파악 후 디바이스의 한계를 보완할 수 있는 디자인을 시작합니다.
첫 번째. 디테일한 UI 요소들을 투명도를 적용하기보다 색상으로 표현합니다.

해상도와 주변부 왜곡 현상 등으로 디테일한 UI 요소와 Text 중심의 UI는 가독성이 현저히 떨어집니다.
VR에서는 선명한 UI 요소가 모두 픽셀로 표시되기 때문에 이때 얇은 라인과 Opacity를 사용하면 지글거림이 심해 화면이 깨져 보일 수 있는데요. 되도록 디테일한 UI 요소는 배제해야 하지만 꼭 사용해야 한다면 투명도를 적용하는 것보다 색상으로 명확하게 표현하는 것이 더 깨끗한 화면으로 보일 수 있습니다. 또한 배경이 360도 공간이기 때문에 콘텐츠 뒤로 어떤 요소들이 비쳐서 가독성을 떨어트릴지 모르니 반투명 배경에 텍스트를 표시하는 걸 지양해야 합니다.
두 번째. HDRI 배경을 적용합니다.

VR 공간에서는 HDRI이라는 이미지를 배경으로 적용합니다.
아래 이미지처럼 왜곡된 파노라마 이미지인데요.

003

 

HDRI (High-dynamic-range imaging)란?
한 시점에서 볼 수 있는 모든 앵글과, 해당 신에서 사용되었던 조명의 정보 값(보통 한 픽셀에 32bit의 정보)를 포함한 파노라마 사진을 나타냅니다. 쉽게 얘기하면 HDRI는 JPG, PNG 보다 수백 배 많은 색상 정보를 가지고 있는 이미지죠.

디자이너는 파노라마 이미지인 HDRI원본을 개발사에 전달하면 개발에서 아래 그림처럼 6개의 면으로 나눠 배경으로 적용합니다.

004* 출처 https://marmoset.co/skyshop/

 

배경은 프로젝트 초반에 정하고 진행하는 것이 좋습니다. 배경의 명도, 채도에 따라 UI 디자인이 달라지기 때문이죠. 처음부터 배경을 정하기 어렵더라도 어둡고 밝은 명도의 기준은 세워야 합니다. 각각의 환경에서 콘텐츠를 제공할 때 UI의 컬러, 명도가 달라지기 때문입니다.

배경을 결정할 때에는 더욱더 생생한 경험을 위해 제공하는 콘텐츠에 적합한 배경을 설정해야 합니다.
화려한 폭죽이 터지는 축제 배경에서 <너를 만났다>와 같은 슬픈 다큐멘터리를 시청하도록 하면 안 됩니다.
이런 부분을 고려하여 KT Super VR는 콘텐츠를 탐색할 때는 공간감 있는 배경을 제공하여 생동감을 느끼게 하고, VOD를 시청할 때에는 배경을 어둡게 하여 콘텐츠에 집중할 수 있는 환경을 만들어 주었습니다.
세 번째, 사용성을 고려한 UI 배치

콘텐츠를 보기 위해 신체(머리, 몸통, 목 등)를 움직인다면 몰입에 방해가 되고, 조작에 어려움을 느끼게 됩니다. 이를 위해 UI와 콘텐츠 요소는 가능한 시선이 닿는 컴포터블 존(Comfortable zone) 내에 배치하여 신체 움직임을 최소화하여 피로도를 줄입니다. 사용자의 자유도는 적절한 수준으로 제약하여 탐색>인지>선택까지의 콘텐츠 접근성을 높일 수 있어야 합니다

이때 간단하고 쉽게 입력장치와 UI 디자인으로 리모컨과 헤드 트레킹의 사용성도 고려해야 합니다.
마우스나 터치보다 정확도가 떨어지기 때문에 Context Menu, Horizon View, Gaze Scrolling 등의 UI 요소를 사용하여 사용성을 높이고, 정확도가 떨어지는 부분을 보완할 수 있는 UI의 크기, 형태와 위치를 고민해야 하죠.

005
네 번째. 명확하고 일관적인 피드백을 줍니다.

콘텐츠의 규모, 색상의 변화 및 애니메이션을 통해 사용자에게 명확한 피드백을 반영해야 합니다. 이때 어떤 형태의 피드백이든 지속해서 콘텐츠에 활용하기 위해 규칙을 세워주세요. 아래 이미지에서 보면 KT의 3가지 VR 서비스는 각각 다른 피드백을 사용하지만, 서비스 내에서 일관된 인터렉션 규칙을 가지고 있습니다. 피드백의 일관성을 유지하여 사용성의 혼란을 주지 않기 위함입니다.

006

 

위에서 얘기하고 있는 4가지 사항은 사용자의 만족스러운 VR 경험과 직결되기 때문에 전체적인 작업 흐름에 매우 중요하게 생각해야 할 부분이라 생각합니다.

 

VR 인터페이스 디자인 프로세스

어떻게 VR에서 입체적으로 보이도록 할까요?

지금까지 작업한 2D 요소를 더욱 풍부하고 생동감 있게 보여주기 위해 UNITY에서 X, Y, Z 축을 통해 입체적으로 보이도록 하는 작업이 필요합니다.

1. 콘텐츠 Depth를 통해 거리감을 줍니다.

① 입체감 있게 나타낼 콘텐츠를 파악하고 Layer의 개수를 정합니다.
② 일정한 규칙의 Z 축 거리를 두어 레이어를 분리합니다.
③ 분리된 레이어에 배경, 콘텐츠, 팝업 등을 성격에 맞는 위치에 배치합니다.

아래는 KT HMD 화면을 적용한 예시입니다.
KT Super VR는 Layer3의 위치를 가장 편안한 경험을 제공하는 거리로 지정하고 인터렉션이 주로 발생하는 메인 콘텐츠를 배치하였습니다.

007

 

이때 2D 화면에서는 동일한 사이즈로 작업한 폰트나 UI요소가 Z축 레이어의 간격만큼 거리감이 생기게 되면서 크고 작게 보일 수 있습니다. 처음부터 레이어 간격을 고려하여 콘텐츠마다 사이즈를 정하였다며 매우 완벽하겠지만, 작업 환경이 미리 모든 요건을 완벽하게 결정하고 진행하기는 힘듭니다. 그렇다고 1PX까지 고려하면서 정성스레 디자인한 화면을 포기할 수도 없죠.

다행히도 UNITY는 Scale을 조절할 수 있는 기능이 존재합니다.
2D디자인을 수정하지 않고 UNITY에서 스케일로 조정하여 2D화면과 유사하게 맞출 수 있습니다.
하지만 Layer와 Layer사이의 간격이 멀수록 화면의 변화가 크기 때문에 미리 고려할 수 있는 부분은 테스트하며 작업을 진행하는 것이 좋습니다.
2. 회전축을 조정합니다.

콘텐츠를 배치했다면 사용자의 시야각을 고려하여 회전축을 조정해야 합니다.
사용자 정면으로 보이는 컴포터블 존(Comfortable zone)에 있는 콘텐츠를 제외하고 고개를 돌렸을 때에도 콘텐츠에 집중할 수 있도록 하기 위함인데요. 오른쪽 이미지는 시야각에 맞춰 회전축을 조정한 KT Super VR’의 최종 UNITY 화면입니다.

008

*TIP. 이때 디자이너가 직접 튜닝 가능한 툴을 요청하세요

아래 이미지는 앞서 설명한 Z축 위치와 회전각, 스케일을 조절하는 화면입니다. 디자인 화면과는 별개로 수치를 입력할 수 있는 창을 볼 수 있는데요.
2D 화면에서는 회전축과 거리감에 대한 정확한 가이드를 줄 수 없어 개발 후 디자인에서는 의도하지 않은 화면을 보게 됩니다. UNITY에서는 수치 입력하고 기기에 반영하는 시간이 매우 오래 걸려 디자인된 화면을 바로바로 볼 수 없기 때문에 여러 번 수정을 하는것이 비효율적입니다.

효율적인 작업을 위해 디자이너가 VR 디바이스에서 X, Y, Z값을 바로 튜닝할 수 있도록 개발사에 요청하세요. 디자이너가 원하는 화면을 직접 튜닝하고 최종 입력되는 수치를 전달하면 시간을 많이 단축할 수 있습니다.
개발자는 번거로움이 있겠지만 무한정 수정하는 것보다 훨씬 효율적일 것입니다.

009

 

마무리하며

아직은 해상도나 어지러움과 같은 헤드셋 사용의 불편함이 많이 개선되어야 하고 콘텐츠 제작의 어려움이 개선되어야 하지만 앞으로의 VR은 오늘날보다 향상된 사용자 인터페이스를 제공할 기회가 많아질 거라 생각합니다. 지금까지 시작부터 끝까지 생소했던 VR 프로젝트를 진행하며 알게 된 부분을 정리해 보았는데요.
앞으로 있을 VR 프로젝트 작업에 조금이나마 도움이 되길 바라며 마치겠습니다.

 

– 가치 디자인그룹 이하정

 

[참고 사이트]
https://uxplanet.org/designing-user-experience-for-virtual-reality-vr-applications-fc8e4faadd96
https://medium.com/startup-grind/4-things-i-learned-designing-user-interfaces-for-vr-cc08cac9e7ec
https://www.invisionapp.com/inside-design/vr-interface-design/
https://blog.naver.com/intenseardor/221736281026
[타이틀이미지]
KT Super VR – https://www.ktsupervr.co.kr

 

 

Share this:

Leave a comment