프로토파이로 VR 프로토타입 만들기
프로토타이핑이란 무엇인가
프로토타이핑 툴의 표현력
흔히 코드 프리 툴에서는 그 표현력에 한계가 있어서, 일정 수준 이상의 프로토타이핑이 어렵다고들 한다. 그런 이유로 어렵지만 자유도가 보장되는 코드 기반의 프로토타이핑 툴을 선택하는 이들을 종종 보게 된다.
코드 기반 프로토타이핑 툴을 대표하는 프레이머의 경우, 이미 클래식 버전에서 VR 프로토타이핑에 대해 언급한 적이 있을 정도로 표현력에 있어서 상당한 우위를 보여준다.
VR 프로토타이핑이 표현력 평가의 기준이라 하기에는 논란의 여지가 있지만, 이 정도로 표현할 수 있는 프로토타이핑 툴은 많지 않을 것이다. 그러다보니 프로토파이에서도 비슷한 수준의 표현이 가능할 지 궁금해졌다.
VR 프로토타이핑을 위해서는 큐브맵 이라고 하는 일종의 전개도가 필요하다. 큐브맵은 관찰자를 중심으로 한 위/아래/왼쪽/오른쪽/앞/뒤 장면의 모음이다.
각 장면들을 큐브 형태로 배치하고 x/y 축 기준으로 큐브를 회전시키면 마치 주변을 둘러보는 듯한 경험을 연출할 수 있다. 여기에 착안하여 우선 큐브를 만들어 보기로 했다.
큐브 만들기
🎲 레이어 배치
Start 트리거와 3D Rotate 리스폰스를 함께 사용하면 처음부터 큐브 형태를 만들 수도 있겠지만, x/y 축을 동시에 회전시켜서 비스듬히 조망하는 형태로 시작하는 것이 쉽지는 않았다.
이전에 3D Rotate를 활용한 프로토타이핑을 시도했을 때 확인했던 것처럼, x/y축 회전을 동시에 적용하기 위해서는 하나의 면에 대해 컨테이너와 레이어를 따로 만든 후, 컨테이너에 x축 회전, 레이어에 y축 회전, 이렇게 서로 다른 3D Rotate를 적용해야 하는 번거로움이 있다.
따라서 처음부터 완벽한 큐브를 만들고 이를 회전시키는 것이 아니라 전개도 형태로 배치해 놓고, 한 번에 하나의 축으로만 순서대로 회전시키는 방법을 생각하게 되었다.
한 번에 하나의 축으로만 회전시키면, 정면으로 보이는 면이 최대 두 개로 제한되므로 최소한의 노력으로 큐브의 3D 회전을 표현할 수 있다. 그리고 큐브를 직접 터치해서 회전시키기에는 고려해야 할 사항들이 많아질 것 같아서 슬라이더를 통해 x/y 축 회전을 조절하기로 했다.
슬라이더는 가로로 긴 컨테이너 안에 동그란 레이어를 손잡이로 추가하고, Drag 트리거와 Move 리스폰스를 사용하면 간단하게 만들 수 있다.
🎲 구간별 회전, 이동
슬라이더 손잡이의 위치에 따라 각 면들이 움직이도록 하기 위해 Chain 트리거를 사용했다. 우선 앞을 제외한 나머지 면은 처음에 표시되지 않도록 3D rotate를 90 혹은 -90으로 설정한다.
그런 다음 슬라이더 구간별로 각 면의 회전과 이동을 조절하면 된다. 큐브를 가로 방향으로 회전시킬 때, 정면에서 보게 되는 면이 ‘앞 — 왼쪽 — 뒤 — 오른쪽’의 4개 면이므로 각 면의 속성이 변경되는 기준점은 4개, 슬라이더 이동 구간은 총 3개가 된다. (기준점은 각 면의 개수, 구간은 면의 개수 — 1) 구간별 회전과 이동은 다음과 같다.
- 한 구간에 y축 기준 90도씩 회전
- 한 구간에 레이어 길이 만큼 x값 이동
- 좌측에서 정면으로 회전할 때는 origin (100, 50)
- 정면에서 우측으로 회전할 때는 origin (0, 50)
큐브의 세로 방향 회전도 가로와 크게 다르지 않다. 세로 방향 회전은 ‘앞 — 위 — 뒤 — 아래’의 4면을 차례로 보게 된다. 구간별 회전과 이동은 다음과 같다.
- 한 구간에 x축 기준 90도씩 회전
- 한 구간에 레이어 높이 만큼 y값 이동
- 상단에서 정면으로 회전할 때는 origin (50, 100)
- 정면에서 하단으로 회전할 때는 origin (50, 0)
정면으로 보이는 것이 어떤 면인지에 따라 이후 가로/세로 방향 회전 시 표시될 다음 면이 달라지게 될텐데, 이를 위해서는 정말 복잡한 과정이 반복될 것 같은 예감에 이쯤에서 단념하기 하고, 슬라이더에서 손을 떼면 무조건 최초 위치로 되돌아 오도록 Touch up 트리거와 move 리스폰스를 추가했다.
이렇게 입체감이 느껴지는 큐브를 만들어보니 VR 프로토타이핑도 쉽게 해낼 수 있을 것만 같았다. 하지만 시작한지 얼마되지 않아 그것이 착각이었음을 깨닫게 되었다.
VR 프로토타이핑
🎲 큐브와는 다른 시점
인터넷을 돌아다니다 보면 관광지, 숙소, 차량 등 다양한 주제에 대한 VR을 경험할 수 있는데, 브라우저의 개발자 모드를 통해 해당 페이지의 리소스를 뒤지다 보면 큐브맵 이미지를 찾을 수 있다. 일단은 이전에 저장해 둔 차량 내부 이미지를 활용했다.
호기롭게 큐브를 만들 때와 동일한 배치, 동일한 인터랙션을 적용했더니, 상당히 난해한 결과가 나타났다. 회전하면서 이미지가 겹쳐지고, 방향과 각도도 매우 어색했다.
왜 그런걸까?
일단 위에서 만들었던 큐브는 밖에서 보는 시점이고, VR은 큐브의 안에서 보는 시점이다. 이것을 단서로 여러가지를 시도해 본 결과, 다음과 같은 결론을 얻을 수 있었다.
- 앵글에 가득 차도록 큐브맵 이미지를 클리핑해야 한다.
- 각 면이 회전하는 방향은 큐브의 경우와 반대여야 한다.
- 자연스러운 효과를 위해서는 45도 이하로 비스듬하게 회전해야 한다.
- 급격한 원근감 변화를 줄이기 위해 Perspective Depth를 조절해야 한다.
- 자연스러운 경험을 위해 최초에 상하좌우 어디로든 회전할 수 있어야 한다.
🎲 큐브맵 이미지 회전, 이동
상하좌우 회전을 모두 고려해야 하므로, 슬라이더 손잡이는 컨테이너의 중앙에 위치하도록 했다. Touch up 트리거에 따른 move 값도 0이 아닌 중간값으로 설정한다.
우선 가로 방향 회전만 생각해보면 정면에 표시되는 면은 ‘뒤 — 왼쪽 — 앞 — 오른쪽 — 뒤’가 되므로 속성값이 변경되는 기준값과 슬라이더 이동 구간이 큐브에 비해 하나씩 많아진다. 구간별 회전과 이동은 다음과 같다.
- 한 구간에 y축 기준 45도씩 회전
- 한 구간에 레이어 길이 만큼 x값 이동
- 좌측에서 정면으로 회전할 때는 origin (100, 50)
- 정면에서 우측으로 회전할 때는 origin (0, 50)
- 3D rotate의 Perspective Depth는 800
세로 방향 회전은 ‘위 — 앞 — 아래’의 3개 면으로 비교적 간단하게 만들 수 있었다. 구간별 회전과 이동은 다음과 같다.
- 한 구간에 x축 기준 45도씩 회전
- 한 구간에 레이어 길이 만큼 y값 이동
- 상단에서 정면으로 회전할 때는 origin (50, 100)
- 정면에서 하단으로 회전할 때는 origin (50, 0)
- 3D rotate의 Perspective Depth는 800
우여곡절 끝에 완성한 VR 프로토타입이 생각보다 괜찮았다. 비록 x/y축의 자유로운 회전은 어려웠지만 이 정도면 훌륭하게 컨셉을 전달할 수 있겠다는 생각이 들었다.
프로토타이핑이란 무엇인가
김영민 서울대 정치외교학부 교수의 산문집 ‘아침에는 죽음을 생각하는 것이 좋다’를 보면 ‘추석이란 무엇인가’라는 칼럼이 나온다. 얼핏 말장난 같은 글 속에는 정체성에 대한 사유라는 결코 단순하지 않은 주제가 담겨 있었다.
정체성에 대한 질문은 보통 위기 상황에서나 제기된다고 한다. 그렇다. 프레이머X가 등장하면서 나를 비롯한 많은 인터랙션 디자이너에게도 위기가 왔으리라 짐작한다.
프레이머X는 자유로운 표현이 가능하지만, 익숙해지기 전까지 빠른 실행은 오히려 어려워졌다. 반면에 프로토파이는 간단한 동선 확인부터 복잡한 인터랙션까지 실행력과 표현력에 있어서 꾸준히 좋은 모습을 보여준다.
디자이너의 도구에 대한 고민은 마침내 본질에 대한 고민으로 이어지게 되었다.
인터랙션 디자인이란 무엇인가, 프로토타이핑이란 무엇인가.
