AR방송 아이튜버 시스템 설계 프로젝트
01:34 
VR사업을 하고 있는 두리번이라는 회사에 합류하여 처음으로 진행한 프로젝트는 R&D 중이던 프로젝트에 대한 UI설계부분이었다. 컨셉은 3D캐릭터를 모션캡쳐해 실시간으로 조작하여 실제 카메라에 나오게 한다음 송출되는 영상을 만드는 컨셉이었다.
1. 요구사항 정리 및 기능정의
아직 아이디어와 개념만 있던 상태였고, 어떤형태로 보여져야 하는지? 이걸 사용하는 주 고객층은 누구인지? 이 프로그램으로 무엇을 하는지? 등을 본격적으로 고민하는 것으로 출발했다.
우선 어떤형태의 레이아웃 가지게 되는지를 파악하기 위해 지금까지 정의된 명제들을 수집하였고, 어떤기능을 하길 원하는지, 오너의 요구사항은 무엇인지, 그리고 정부과제를 통해 최초 연구를 시작하였음으로 기존에 RFP를 찾아 내용을 파악하였다.
우선 흩어져 있던 요구사항 리스트를 수집하고, 내부에 개발자들과 논의를 통해 기능정의 부분을 만들어냈다.
2. 로우 와이어프레임 및 UI정의
어느정도 기능정의가 끝난뒤 처음에 구상은 UI상상도를 바탕으로 UI를 구성하기 시작하였다. 사실 만들어질 소프트웨어의 사용자는 일반유저보다는 #카메라 #영상 #감독 #콘텐츠 #편집 등의 키워드를 가진 대상이라 판단하여 동영상 편집을 하는 프로그램들을 벤치마킹하였다.
사실 오픈된 이런 프로그램 자체가 없기에 무엇을 보고 참고해야 할지 고민을 하다가 영상을 받아오는 프레임과 컨트롤하는 프레임이 동시에 존재해야 해서 동영상 편집툴을 바탕으로 초기 UI를 제작하였다.
3. 와이어플로우
메인화면 구상이 끝난다음 고민이 들었던 부분은 일반적인 앱이나 웹을 기획하는 거와는 다르게 프로그램이다 보니 화면을 정의하는 부분이 크지는 않았고, 기능에 따른 버튼 배치부분과 전체적인 플로우를 확인할 수 있게 와이어플로우를 작성하게 되었다. 해당프로젝트의 디자인부분을 따로 가져갈수 없는 스케줄이어서 XD로 작업을 염두하고, 와이어프레임을 만들고 전체플로우를 설계하였다.
4. 스크린 레이아웃 및 화면설계
거의 모든 영상편집툴에서 공통점으로 적용되는 오른쪽 영역에 영상부분이 있고, 툴의 대부분이 왼쪽 영역에 컨트롤박스를 배치한다는 점이다. 그리고 자주쓰는 기능을 고정버튼으로 구성하고, 여러기능들은 탭박스로 우선배치하여 스크린 레이아웃을 결정하였다.
5. 디자인조욜 및 개발테스트
스타트업이라 많은 리소스가 부족하였고, 디자인 부분에 대한 컨셉 및 컨펌을 하게되었다. 디자이너에서 기획자로 변경한지 너무 오래 되었지만, 해당 소프트웨어는 특수한 타켓 특히 우리가 직접 사용하는 용도가 높아 우선순위에서는 뒤로 설정하고, XD로 제작한 화면설계를 하이단계로 높여 만들어진 요소를 Export하였다. 디자이너와 협업하여 최종 디자인 시안을 결정하였다. 실제 카메라의 영상에 3D 엔진캐릭터를 등장시켜 최대 7대의 다수카메라와의 싱크를 맞추어 마치 실제현실에 내가 움직이는 캐릭터를 동시 송출하는 기능이 완성되고, 4개월여만에 프로젝트를 성공적으로 완료하였다.
0 comments