VR Prototyping_Demo
Framer Studio로 VR 프로토타입 만들기
갑자기 VR 관련 과제가 생겨 투입된 지 일주일이 되었다. 제품의 방향성은 물론이고 VR이 대체 어떤 시장인지, 어떻게 디자인해야 하는지 감도 없는 상황이었다. 이럴 때에는 팀의 아이디어가 사용자들에게 어떤 반응을 얻을 것인지 알아보기 위해서 빠른 의사결정과 User Validation이 답이라는 평소의 주장을 관철하기 위해(;;) 아주 간단한 Prototype을 만들었다. 그 하루 간의 과정을 공유하려고 한다.
글에 앞서, 나는 입사 교육에서 Java 시험을 백지로 낸 후로 코딩에 학을 뗀 사람이며 Framer도 간신히 Layer 만들어서 클릭하면 움직이게 할 정도의 지식을 가지고 있는 사람임을 밝힌다.
Sketch 플러그인으로 만들어보기
일단, Sketch에 VR 디자인 관련 플러그 인이 있다는 것을 더듬더듬 기억해냈다. 바로 검색 ㄱㄱ.
처음 글을 본 당시에는 내가 VR 디자인할 일이 있겠어..?라고 넘어갔는데(그런데 그것이 실제로 일어났습니다.) 얼핏 본 글이 막연히 시작할 때 참 도움이 된다 싶었다.
위 플러그 인은 두 개의 아트보드(Background, UI)를 Sketch에서 제작하고 플러그인으로 Export만 하면 HTML 형태로 VR Prototype을 생성해준다. 만든 결과물은 실제로 Cardboard를 구입했다면 VR 환경에서 볼 수 있다. 단, 만든 것을 PC 브라우저가 아닌 본인의 스마트폰에서 확인하려면 몇 가지 작업이 필요한데 그것은 제작자의 Github에 자세히 설명되어 있으니 참고하도록 하자. (적힌 대로만 따라 하면 됨)
그런데 이 플러그인을 사용하는 것의 문제는 Prototype 내에서 인터랙션 설계가 불가능하다라는 것이었다. 그냥 단순 디자인 시안이 어떤지 확인할 용도라면 괜찮지만, 이대로면 활용도가 낮을 수밖에 없다. 그래서 다른 방법을 찾아야만 했다.
Framer 이용하기
왠지 느낌이 그랬다. Framerjs라면 가능할 것 같았다. 구글에 키워드를 넣는 도중에 'Framer vr component'라는 추천 검색어가 표시되었다. 아, 역시 되는구나.. 심지어 대놓고 Framer Blog에 올라온 글이 있었다. 저 복잡한 내용을 일일이 설명할 순 없고(;;) 일단 예제를 보면서 시작해보기로 했다.
쓰다 보니 너무 길어져 제작기는 따로 작성하고 1차 완성된 Prototype 링크만 먼저 공개해야 할 것 같다.
안드로이드 사용자들은 링크를 들어가지 않기를 권한다. 센서 문제(인 것 같은데 잘 모름) 때문에 화면 움직임이 상당히 혼세 하다. 아이폰 7에서는 문제없이 잘 된다.
추가) 브런치 앱에서 실행하면 앱이 뻗어버린다;; 데스크탑에서만 제대로 확인할 수 있음
http://share.framerjs.com/mh8sp22jenfw/
느낀 점
1. 어려울 줄 알았는데 Framer로 상당히 빠르게 VR Prototyping이 가능하다.
2. Youtube의 실제 VR영상을 플레이하는 것은 구현이 어려웠다.
예상하기로는 소스코드에 영상 자동 전체 화면 플레이 옵션을 삽입하면 Youtube 어플리케이션에서 보는 것처럼 VR 옵션으로 플레이될 줄 알았는데, 제대로 되지 않았다. 그 이유는 iFrame으로 embed 되었고, 영상을 플레이하는 데 사용하는 어플리케이션을 강제로 지정하지 못했기 때문(인 것 같은데 잘 모름)이라고 추측해본다.
작성하고 나니 발견한 보너스
구글에서는 이렇게 VR 디자인을 한답니다.
