UX World 2017 fall :: [3] Facebook의 VR디자인(Design beyond the screen)

[3] Facebook의 VR디자인(Design beyond the screen)

인쇄물 디자인부터 아이폰이 나오기 까지 많은 변화들이 있었다. 이제는 Immersive Design으로 폰이나 화면 같은 매개체 없이 콘텐츠가 세상에 편입되는 것에 대해 고민해야 할 것이다. 그런데 인풋에 제약이 있고 시야 관련된 제약이 있어서 아직은 화면이 필요하고 ‘세상 그 자체, 나의 일부’라기 보다는 내 손 안의 폰에서 벗어나지 못해서 ‘창’으로서의 역할 밖에 못하고 있긴 하다.

어떻게 실질적으로 세상 그 자체인 컨텐츠와 상호작용 할 수 있을까? VR이 답이 될 수 있을 것이다.

VR은 몰입형의 시야를 활용하고 자연스러운 제스쳐를 활용하여 상호작용이 가능하다. 입체형 UI를 물리환경에 반영하고 사람들이 그에 반응하게끔 하면서 실제 사람들의 문제를 해결해 줄 수 있다고 생각한다.

2017년 VR이 도입되었다. 매트리스 정도는 아니지만 양질의 VR경험을 대중이 느낄 수 있다. 강력한 엔터테인먼트 플랫폼이라는 것은 입증이 되었다. 이뿐 아니라 전문가들 사이에서도 VR은 니치한 분야가 되었다. 2D 툴을 활용해서 3D 모델을 만들기 시작했는데, 추상적 xyz좌표를 벗어나서 VR은 물리학의 제약 없이 초능력처럼 활용할 수 있다.

아우디는 가상현실을 통해 맞춤화, 차 내부를 실시간으로 볼 수 있게 해준다. 스탠포드는 수술 시뮬레이션을 가능하게 했다. 가상 심장을 보고 동물의 심장을 통해 연습하는 것이 아니라 실제 사람의 복잡한 심장을 가상으로 보고 수술 시뮬레이션을 함으로써 수천명의 사람들의 목숨을 구할 수 있게 되었다. 하반신 마비 환자들을 위해 다시 걸을 수 있도록 해주는 프로젝트도 있다. 일주일에 두번 하루 한시간 VR헤드셋을 쓰고 뇌파를 이용해서 가상의 아바타가 걷는 경험을 주며 다리가 있는 로봇 안에서 자신이 실제로 걷는 것처럼 하는데 모니터링 한 결과 이런 두뇌 활동을 통해 환자들이 마치 본인이 실제 걷는 것 같은 느낌을 받는다고 한다.

VR 디자인에서는 자연 점원 날씨 등 공간 전체를 디자인하는 것이 필요한데 한 사람이 모든 것을 다 할 수 없어서 디자이너들이 가장 잘 하는 것을 하기 시작했다. 여러 전문가들과 협업을 하면 되니까. 디자이너들은 점을 연결하는 것을 하기 시작했다. 3D모델러, 사운드 디자이너, 프로토타이핑 엔지니어들과 협업해서 경험을 정의 내리고 경험화 하고 실행하는 것을 하고 있다. 다양한 아이디어를 신속하게 살펴보고 유져 리서치를 하여서 검증하고 다시 정리해서 반복하는 그런 작업들을 하고 있다. 이 과정에서 세가지 핵심적인 것이 있다.  

실재감 Presence

VR의 성배이자 기본. 나를 위해 마련된 가상의 공간에 내가 실재한다는 느낌을 받도록 하는 것이다. 눈으로 보고 귀로 듣는 것 모두 현실 같아서 현실로 인식하는 것. 여기서 아바타가 되게 중요하다. VR에서는 내가 나의 아바타가 되는 것이라서 편안함을 느끼는 것이 중요하다. 나랑 똑 같은 모습의 아바타를 만들 수도 있고 현실에서 불가능한 치장을 할 수도 있고 아예 나의 정체성을 부인하고 새로운 퍼소나를 만들 수도 있다. 가상의 아바타가 실제 존재처럼 풍부하게 만들어주는 데에는 ‘눈’이 정말 중요하다. 눈을 깜박이거나 동공을 미묘하게 움직이는 것, 눈썹을 움직이는 것, 시선처리 이런 것을 잘 디자인해야 실재와 같은 느낌을 주는 것을 알게 됐다. 실제 대화 하는 것처럼 느끼려면 대화 중에 아바타와 시선을 맞추는 것이 중요했다. VR헤드셋이 시선을 트래킹을 잘 못해서 어디를 볼지 예측을 하는 알고리즘을 통해 시선처리를 구현할 수 있었다. 여러 사람이 말하고 있을 때 누가 말하는지를 인식할 수 있게 하는 것이 중요하다. 손동작도 중요하다. 제스춰만 봐도 가까운 사람은 그가 누군지 알 수 있다고 한다. 지금 머리와 손만 캡춰할 수 있는데 이 정도만 해도 몸통과 팔을 다 구현할 수 있다.

편안함 Comfort

VR은 사람들의 본능적 감정을 불러일으키기 때문에 대단하다고 하는데, VR에서 안 좋은 경험을 한다면 사용자가 이탈할 수 있다. 인체공학적, 시각적, 심리적, 사회학적 편안함 모든 것이 중요하다.

VR의 가장 큰 지적 사항 중 하나가 멀미가 일어나는 문제가 있는데, 평형/운동감각을 담당하는 전정기관이 시각과 작용해서 몸의 반응을 일으킬 때 신체와 정신적 충돌이 발생할 시 멀미가 난다.

멀미를 해결하는 디자인 기법으로 순간이동 기법이라고 하는데 선형으로 걷는 것이 아니라 움직임과 동작을 해석하는 기법. 사람이 정지 상태이지만 환경을 움직임으로서 움직인 것처럼 보이게 하는 기법으로 게임 등에서 많이 쓰인다. Phi Phenomenon 파이 현상 같은 착시를 이용한다. 실제 정지한 화면이지만 착시를 통해 움직이는 것처럼 보이는 효과를 잘 활용하면, 움직이는 것은 알지만 멀미 증상은 없어지게 만든다. 또 실제 움직이는 경험을 줘야 하는 경우도 있다. 우주 여행처럼. 이럴 때는 공간 대비 우리가 움직이고 있다는 Optic flow를 통해 연속 동작에 편안함을 준다. 내가 정지상태이고 내 주변 환경이 움직이고 있다는 느낌을 주게 설계하는 것. 우주선을 타고 있는 경험을 주려고 하면 어떻게 할까. 조종석을 보여줌으로써 나는 컨테이너 안에 가만히 있고 내 주위의 우주가 움직인다는 느낌을 주면 된다.

인풋의 제약 Input

클릭, 탭, 스와이프 등의 인풋을 사용했었는데 하드웨어 종속적이었다. VR은 하드웨어가 플랫폼에 따라 크게 달라질 수 있다. 페북에서는 VR을 기존 서비스의 연장선상에서 보고 있는데, 다양한 인풋을 주는 기기가 있지만 가장 중요한 세가지를 보겠다. 

Gaze (오큘러스처럼 머리에 쓰는 기기)

Gaze는 몰입이 되었다는 경험을 주기도 하기만 UX를 관리하는데 좋은 요소이기도 하다. 모바일 VR을 회전식 의자에서 이용하는 사람은 많지 않다. 고정된 소파에서 제한적 이용하기에 스크롤링을 시선을 통해서 하는 방법을 개발했다. 우측 또는 좌측을 보면 UI가 더 빠르게 스크롤링을 해 주는 기법으로 시선처리를 중앙으로 돌려준다. 그래서 360도를 앉은 채로 볼 수 있게 했다. 선형으로 디자인 하는 것 보다 머리로 다양한 동작을 할 수 있게 만들었다. FB의 feed를 VR로 구현하는 것을 연구했는데, 컨텐츠의 브라우징을 더 잘 할 수 있는 방법을 고민한 것이다. 직사각형의 그리드 스펙트럼은 직관적으로 어떻게 사용하는지 알 수 있지만 고무적인 디자인은 아니다. UI를 중앙에 구형으로 배치하는 것이 머리로 다양한 동작을 할 수 있기 때문에 훨씬 낫다.

UI를 없애는 버전까지 프로토타이핑을 통해 연구를 했다. VR 디자인이 새롭게 개발되고 있는 수준이다. 각각의 경험을 모두 디자인 하고 피드백을 받아야 하는데 2D와 많이 다르기 때문에 어쩔 수 없다.

Gaze 기반으로 네비게이션에 색깔을 선택하면 특정 스토리로 점프해서 들어갈 수 있는 기능이 있는데 탭핑 없이 컨텐츠 브라우징이 가능하다. 스토리 카드를 볼 때 타일의 크기를 보면 클수록 가깝게 느껴질 수도 있지만 너무 가까우면 답답하게 느끼기도 하더라. 그래서 다른 프로토타입도 준비해서 유저 리서치를 통해 타일의 크기를 정했다. 새로운 UI에 대한 거부감이 있기 때문에 기존의 방법들도 초기에는 차용을 했지만 우리가 새로 개발한 방식에 사람들이 익숙해 지면 충분히 이것으로 몰입 경험을 더 잘 느낀다는 피드백을 받았다. 360도 컨텐츠를 2D와 믹스해서 사진으로 공유할 수 있는 기능도 만들었다.

3 DOF(Degree Of Freedom 자유도)

앞뒤좌우상하 인터랙션 가능하다. 컨트롤러를 흔들면 주변에 UI를 띄울 수 있다. 재생/플레이백 컨트롤러를 여기에 삽입해서 리모컨 같이 느껴지게 했다. VR을 사용하는데 편안한 방법인 것으로 테스트 됐다. 컨트롤러와 스와이프를 이용해서 좋아요를 쏘는/날리는 기능도 이걸로 가능하다.

6 DOF

앞뒤좌우상하 및 그 이상의 손동작을 자유롭게 할 수 있게 해주는 컨트롤러이다. 물건을 잡거나 찔러보는 등 손의 자유도가 몸의 자유도처럼 느끼게 해준다. 이것이 나아가서 사람들이 사회적인 참여를 할 수 있게 이끌어낸다. 페북의 중요 키워드 중에 소셜이 있는데 이를 위한 페이스북 스페이스가 있다. (https://www.facebook.com/spaces) 올해 4월에 개발한 어플이다. UI는 2D인데 2D패널이 여기 가미되어 VR환경에서 편안하게 다양한 상호작용을 할 수 있게 하고 있다. 아바타도 맞춤화할 수 있도록 하였다. VR에서는 컨텐츠와 인터랙션 하는 다양한 방법이 있는데 여기에 3D 툴을 많이 쓰려고 하고 있다. 아바타를 만들기 위해 3D의 거울로 도움을 주는 등..

VR의 디자인 프로세스

1) Ideate: 아이디어 구상부터 시작. 스토리 보드를 만들어서 어떻게 할지 아이디어를 낸다. 유저와 UI를 고려해서.

2) Prototyping: 프로토타이핑을 하고 반복적으로 아이디어 구상단계로 간다.

3) Define: 맘에 드는 뭔가가 나오면 북극성이라고 하는 개념이 있는데 이상적 솔루션이 무엇인지 규정 -> 실행 가능한 방법을 단계별로 나누어 찾고 MVP를 선택하고 -> 어떻게 이행할지 생각한다.

4) Implement: 3D 모델러, 프로토타이퍼, 엔지니어 등과 구현에 대한 도움을 받아 실제 구현한다.

VR은 참고할 다른 레퍼런스나 선진 사례가 없어서 이런 식의 프로세스를 거친다. 우리가 하는 모모든 것 기록하고 있는 사이트가 있으니 참고하시라. (http://facebook.design/vr)