VR 작업은 어떤 워크플로우로 이뤄지는가

X신 같지만 남의 시선은 전혀 느껴지지 않는다..고 말하고싶다

최근 몇년간 VR에 대해 관심이 많아지고 있습니다. 여러 테크 산업에서도 지금은 낯설지않게 많이 나오고 있는데 그래도 아직은 스마트폰처럼 한사람에게 하나씩 가지고 있지는 않죠. 물론 아직 성장하는 단계라 이를 많이 알고있는 디자이너도 별로 없습니다. 그래서 VR 디자인 관련해서 제가 작업한 경험을 토대로 알려드리겠습니다.

VR 의 2가지 구분

일반적으로 디자이너의 관점에서 본다면 “360 View”와 “인터페이스” 이렇게 두개로 나눌수 있습니다.

360 View는 VR에서 새롭게 느낄수있는 부분인데 쉽게말해 VR 헤드셋을 쓰면 제일 처음 접하게 되는 공간입니다. 이게 어떤 장소가 될수도 있고 실내일수도 있습니다. 심지어는 놀이기구rollercoaster가 될수도 있습니다.

인터페이스는 가상공간에서 사용자가 컨트롤 할수있게 만드는 UI 라고 보시면 됩니다.

상단 우측으로 갈수록 시스템은 복잡해지지만 사실적인 경험을 할수있다.

예를들어 놀이기구와 같이 사용자가 수동적인 경험를 받게 하는 VR 일수록 상단 좌측에 위치하게 됩니다. 상단 우측으로 갈수록 매우 정교하고 복잡한 VR이 되겠죠?

삼성의 Gear VR 화면.

반대로 하단 우측으로 갈수록 사용자가 컨트롤 하는 부분이 강조되는 VR로 주로 영상관련된 VR이 있겠습니다.

배경에 랜드스케이프가 적용되면 좀전 스샷보다 조금더 복잡해진다.

상단 우측으로 가는 VR은 360 View 와 3D 모델링 등 고려해야할 사항이 매우 많아집니다. 그러나 잘 만들어질수록 가상공간에 더 정교해지기에 사용자에게 UX적인 부분이 상당해 지겠지요.

보통의 UI 인터페이스 디자인 프로세스

아직까진 대부분의 VR작업에 대해 워크플로우가 체계화되진 않았습니다. 때문에 제가 설명해드리는 방법이 꼭! 반드시! 지켜야 하는 부분은 아닙니다.

삼성의 VR 디바이스인 Gear VR로 개발작업을 처음 했을때, 보통의 App 작업을 할때와 작업 프로세스가 비슷하다고 느꼈습니다. 디자인하고 개발하고 테스트하고 피드백하고 이런 순이었거든요. 초반에 디자이너가 느끼게 되는 워크플로우가 보통의 App 작업과 비슷하게 느껴지는 이유를 설명하겠습니다.

1. 와이어프레임

우선 와이어프레임 작업이 필요하겠죠? 와이어프레임 작업은 보통의 App이나 VR 의 인터렉션이나 개념은 비슷합니다.

동영상 VR 서비스 와이어프레임 예제

2. 비주얼 디자인

와이어프레임 작업이 끝나면 나름의 가이드라인대로 보기좋게 색을 입혀야겠죠?

동영상 VR 서비스 비주얼디자인 예제

3. 블루프린트

그 후에는 각각의 화면과 장면이 이어지도록 링크를 적용합니다. 각 장면 하나하나가 어떤 장면으로 연결되는지 설명도 필요하죠. 이를 저는 블루프린트라고 부릅니다. 이때는 물론 개발자와 긴밀한 대화가 필요한 부분이기도 합니다.

동영상 VR 서비스 블루프린트 예제

여기까지는 보통적인 App 제작과 프로세스가 거의 같습니다. 그렇다면 VR에서는 어떻게 적용될까요?

VR작업 기본 설정

1. 캔바스 사이즈

간단하면서도 가장 처음 고민하게 되는 부분이 바로 360도 환경입니다. VR에서는 360도 환경을 고려해야하기에 캔바스의 크기를 몇으로 해야할지 처음 작업하는 디자이너일수록 감을 잡기가 어렵습니다. 이럴때는 전체 크기를 생각하면 도움이 됩니다.

결론부터 이야기하면 삼성 Gear VR과 같은 모바일로 나타내는 최종결과물일 경우 아이폰6의 기준일때는 1334 × 750 픽셀에 맞췄고, 안드로이드의 경우에는 워낙 디바이스의 종류가 많아 1280 × 720 픽셀 을 평균값으로 잡았습니다.

아이폰6의 기준일때는 1334 × 750 픽셀,
안드로이드는 1280 × 720 픽셀

보통 작업하는 360도의 펼친 화면을 보면 매우 플랫(flat) 한 모습입니다. 파노라마를 촬영해보거나 최근 출시된 360도 촬영 디바이스의 결과물을 보게되면 얻게되는 결과와 비슷한데 이 결과물을 원형의 ‘구’형태로 접게되면 실제 공간과 매우 비슷한 느낌의 화면이 나오게 됩니다. 이렇게해서 VR의 기초적인 화면을 구성하게 되는거죠.

360도 촬영된 공간을 2차원으로 펼친 모습

좌우는 360도가 필요하고, 상하는 180도가 필요하겠죠. 그래서 전체 캔바스 사이즈를 3600 × 1800 픽셀로 지정했습니다.

좌우 360도, 상하 180도가 필요하다.

매우 큰 픽셀작업이라 도전이 될수도 있지만 픽셀을 1:1 비율로 설정하는게 작업하기 편했습니다. 물론 더 큰 픽셀을 사용해도 되지만 많은 기능과 특수효과가 추가되면 고사양의 하드웨어와 소프트웨어 처리기술이 필요하게 됩니다.

다음은 VR 인터페이스 디자인에 도움될 해외영상입니다.

정리하면 360도 화면의 전체 펼친 캔바스의 크기는 1:1 비율로 3600 × 1800 픽셀 입니다. 다만 이 모든 뷰를 사용자가 한번에 보진 않기에 실제 사람이 보는 뷰(UI View)는 이보다 작은 뷰인 1200 × 600 픽셀이 됩니다. 이는 전체 캔바스를 9등분 한 것중에 하나의 뷰 입니다.

“360 View“: 3600 × 1800 pixels, “UI View“: 1200 × 600 pixels
360도 화면의 전체 펼친 캔바스의 크기는 1:1 비율로 3600 × 1800 픽셀,
실제 사람이 보는 뷰(UI View)는 이보다 작은 뷰인 1200 × 600 픽셀

2. 테스트 설정

위와 같이 그냥 작업하는 것보다 일정비율로 나눠서 작업하는게 인터페이스 디자인이나 작업 집중에 더 효과적이고 통일감이 있게 된다는 경험입니다.

그리고 그보다 더 큰 뷰인 360도 뷰 (360 View)는 공간&환경을 구성하고 이보다 작은 뷰인 실제 사람이 보는 뷰(UI View)를 프리뷰 테스트하게됩니다. 물론 테스트할때는 VR 헤드셋을 쓰고 해야겠죠?

Avocode 를 사용하면 실시간으로 디자인을 프리뷰할수 있다.

VR 인터페이스 디자인

이번에는 인터페이스에 대해 알아보겠습니다.

다운받아 다음의 예제들을 쉽게 설정해볼수 있다.

1. “360 View” 설정

첫번째로 360도 작업캔바스를 만듭니다. Sketch3 를 예로 들면 아트보드를 3600 × 1800 픽셀로 설정하고 만듭니다. 그리고 다운받은 파일 background.jpg를 임포트 시키고 3600 × 1800 캔바스 사이즈에 맞게 리사이즈 시킵니다.

background.jpg를 임포트 시키고 3600 × 1800 캔바스 사이즈에 맞게 리사이즈

2. “UI View” 설정

그리고 새로운 아트보드 1200 × 600 픽셀 사이즈의 캔바스를 만듭니다. 위에서도 설명했지만 인터페이스 뷰(UI View)를 만들기 위함입니다. background.jpg를 임포트 시키고 리사이즈는 하지 않습니다. 즉 크롭된 상태로 두는거죠.

좌측은 360도 환경, 우측은 9등분 중에 1개인 실제 사용자가 한번에 볼수있는 인터페이스 UI 뷰

3. 인터페이스 디자인

첫번째 두번째의 360 ViewUI View 를 완성하면 이제 tile.png 파일을 UI View 중간에 드래그합니다. 그리고 복사해서 한줄에 3개로 만듭니다.

UI View에 위치한 3개의 tile.png 파일

4. 익스포트

이제 UI View를 360 View 위로 위치시킵니다.

UI View를 360 View 위로 위치

5. VR 테스트

GoPro VR Player 를 실행하여 360 View 를 드래그하고 익스포트합니다. 그럼 360도 뷰가 만들어진것을 알수있습니다.

오큘러스 리프트를 설치 사용할수있다면 GoPro VR Player 가 자동으로 감지해서 방금 익스포트된 뷰를 프리뷰 할수있습니다. 공식적으로는 오큘러스 리프트가 MacOS 에 덜 친화적이라 디스플레이 세팅이 추가로 필요할수 있습니다. 최근 뉴스에 맥프로의 그래픽카드가 고사양으로 업그레이드 할수있는것으로 나타났습니다. 이제 MacOS 에서도 VR 제작을 원활하게 할수있기를 기대하겠습니다.

오큘러스리프트를 사용하여 테스트하는 모습

기술적으로 고려해야할 사항

1. 저해상도 문제

해상도는 디스플레이가 필요한 모든 디바이스에서는 중요한 문제입니다. 해상도가 받쳐주지 못하면 계단현상이 일어나 아무리 잘만들어도 사실감이 떨어질수밖에 없는데요. 보통 눈에서 5cm 이상 거리가 있으면 계단현상은 많이 줄어듭니다.

하지만 제일 좋은건 역시 해상도가 좋은 디스플레이 기기를 사용하는건데 우리 눈과 비슷한 해상도를 지원하려면 적어도 8K 디스플레이 정도는 되어야 하고 그렇다는건 15,360 × 7680 픽셀이 필요하다는 뜻이죠. VR이나 컴퓨터 하드웨어가 예전보다 눈에 띄고 좋아지고 있기때문에 이정도 문제는 곧 극복되리라 생각합니다.

2. 텍스트 선명도 문제

앞서 해상도에 대해 말씀드렸는데요. 문제는 해상도가 낮으면 디스플레이에서 보여지는 텍스트가 깨져 읽을수가 없을정도로 저질이 될수도 있다는 거죠. 그렇다고 텍스트를 무조건 크게만 만들수도 없습니다. 역시 해상도가 어느정도 받쳐줘야 한다는거죠.

마무리

1. 블루프린트 연결

제일 처음에 블루프린트 작업을 했던거 기억하시죠? 이제 각 장면을 만들어내는 방법을 알았으니 각각의 플로우마다 VR인터페이스를 연결시켜줘야 합니다. 디바이스가 모바일 대신 VR로 바뀐거라고 보시면 모바일 App을 만들던 보통의 작업과 비슷합니다.

특정이벤트를 줬을때 나오는 장면을 연결한다

2. 모션디자인

멋있게 디자인은 했는데 한가지 또 궁금한게 생겼습니다. 동적인 애니메이션 효과를 주고싶은데 어떻게 해야할지 모르겠다는 거죠. 2가지 방법이 있습니다. Adobe After EffectsPrinciple 을 사용하는거죠. 전문적인 방법은 아닙니다만 어느정도 효과는 줄수있습니다.

환상적이지 않은가!

지금까지 설명드린 방법들은 VR 제작에 기초적인 방법입니다. 흔히들 생각하는 게임에 적용되는 디테일을 만드려면 많은 디자이너와 엔지니어들이 필요하겠죠.

Show your support

Clapping shows how much you appreciated Designer Joel’s story.