I-TUBER SYSTEM
Step.1
Background. VR사업을 하고 있는 두리번이라는 회사에 합류하여 처음으로 진행한 프로젝트는 R&D 중이던 AR프로젝트에 대한 UIUX설계 부분이었다. 새로운 것에 대한 흥미와 호기심이 많았던 내 특성상 이제껏 경험하지 못한 프로젝트를 경험하고 싶어 합류하기 전부터 AR시스템을 스터디하기 시작하였다. 아이튜버 시리즈의 1번째 스탭으로 기존 AR시장에서 볼 수 없던 시스템을 기획하고 개발하였다.
Step.1
Background. VR사업을 하고 있는 두리번이라는 회사에 합류하여 처음으로 진행한 프로젝트는 R&D 중이던 AR프로젝트에 대한 UIUX설계 부분이었다. 새로운 것에 대한 흥미와 호기심이 많았던 내 특성상 이제껏 경험하지 못한 프로젝트를 경험하고 싶어 합류하기 전부터 AR시스템을 스터디하기 시작하였다. 아이튜버 시리즈의 1번째 스탭으로 기존 AR시장에서 볼 수 없던 시스템을 기획하고 개발하였다.
Description. 3D캐릭터를 엔진 캐릭터로 재구성하여 사용자가 모션캡쳐 후 실시간으로 조작하여 실제 카메라에 나오게 한 다음 현실배경에 캐릭터가 실시간으로 움직이게 해주는 AR방송 시스템이다. 송출되는 영상을 실시간으로 편집이 가능하며, 최대 7대의 카메라를 연동시켜 캐릭터가 마치 현실에 있는 것처럼 리얼하게 방송이 가능하다.
Date. 2019. 8 ~ 2019. 11
Client. 두리번
Position. 시스템개발 기획, UIUX 디자인
Functional Specification
Description. 아직 아이디어와 개념만 있던 상태였고, 어떤형태로 보여져야 하는지? 이걸 사용하는 주 고객층은 누구인지? 이 프로그램으로 무엇을 하는지? 등을 본격적으로 고민하는 것으로 출발했다.
우선 어떤형태의 레이아웃 가지게 되는지를 파악하기 위해 지금까지 정의된 명제들을 수집하였고, 어떤기능을 하길 원하는지, 오너의 요구사항은 무엇인지, 그리고 정부과제 연계시 나왔던 RFP를 찾아 내용을 파악하였다. 우선 흩어져 있던 요구사항 리스트를 수집하고, 내부 인터뷰를 통해 기능정의 부분을 만들어냈다.
LOW Wireframe
Description. 어느정도 기능정의가 끝난뒤 처음에 구상은 상상도를 바탕으로 UI를 구성하기 시작하였다. 사실 만들어질 소프트웨어의 사용자는 일반 유저보다는 #카메라 #영상 #감독 #콘텐츠 #편집 등의 키워드를 가진 대상이라 판단하여 동영상 편집을 하는 프로그램들을 벤치마킹하였다.
사실 오픈된 이런 프로그램 자체가 없기에 무엇을 보고 참고해야 할지 고민을 하다가 영상을 받아오는 프레임과 컨트롤하는 프레임이 동시에 존재해야 해서 동영상 편집툴을 바탕으로 초기 UI를 제작하였다.
Wire Flow
Description. 메인화면 구상이 끝난다음 고민이 들었던 부분은 일반적인 앱이나 웹을 기획하는 거와는 다르게 프로그램이다 보니 화면을 정의하는 부분이 크지는 않았고, 기능에 따른 버튼 배치부분과 전체적인 플로우를 쉽게 확인할 수 있게 와이어플로우를 작성하게 되었다. 해당 프로젝트의 디자인부분을 따로 가져갈 수 없는 스케줄이어서 XD로 작업을 염두하고, 와이어프레임을 만들고 전체 플로우를 설계하였다.
Screen Layout
Description. 거의 모든 영상편집툴에서 공통점으로 적용되는 오른쪽 영역에 영상부분이 있고, 툴의 대부분이 왼쪽 영역에 컨트롤박스를 배치한다는 점이다. 그리고 자주쓰는 기능을 고정버튼으로 구성하고, 여러기능들은 탭박스로 우선배치하여 스크린 레이아웃을 결정하였다. 개발 사이클을 앞당기기 위해 XD로 제작한 화면설계를 하이단계로 높여 만들어진 요소를 Export하여 진행하였다.
Draft Design
Description. 스타트업이라 많은 리소스가 부족하였고, 디자인 부분에 대한 컨셉 및 디렉팅 역할의 병행하였다. 우리가 직접 사용하는 용도가 커서 GUI일정을 뒤로 우선순위 조절을 하였고, 이후 개발 프로토타입을 들어갈때 쯤 동시에 디자인 고도화를 위한 최종 디자인 시안을 디텍팅하였다. 목표한 4개월안에 프로젝트를 성공적으로 완료하였으며, 브랜딩을 위해 "죽어있는 캐릭터를 되살리다"라는 컨셉을 부여하였다.
Step.2
Background. 그다음 고민했던 부분은 브랜드 웹사이트를 오픈하여, 아이튜버로 만들어지는 영상들을 노출시키고, 브랜딩을 강화하는 것으로 계획하고 앞으로 만들어질 시리즈들의 게이트 역할을 할 사이트가 무엇보다 필요하였다. 아직 내부에 개발자가 없는 상태에서...
Step.3
Background. 아이튜버 시스템에서 활동할 캐릭터들의 확장 계획에 따라 기존에 유행이 끝나거나 죽어있는 캐릭터를 되살려보자는 아이디어가 구체화 되었다. 기존 아이튜버는 스튜디오에서만 촬영이 가능하였고, 모바일에서 일반 사용자가 캐릭터를 가지고 실시간 통신...
Step.4
Background. B2C타겟을 크리에이터로 1차 설정한 후 BJ나 YouTuber들이 손쉽게 이용할 수 있는 방안을 연구하였고, STEAM에서 서비스 중인 FaceRig를 벤치마킹하였다. 이 유틸은 내 얼굴을 캐릭터 얼굴로 보여주는 기능으로 제한되어 있었고, 콘텐츠 영역은 없다는 것을...
Step.5
Background. 캐릭터의 너무 많은 변수 그리고 이를 제작하기 위한 리소스는 CG회사가 아닌 우리가 감당하기에는 너무나도 큰 과제였다. 난 아이튜버 시스템에서 캐릭터라는 부분을 빼고 다른 무언가로 대체할 수 있는 방안을 고심하기 시작하였고, 유튜브를 보던 중 공간에...
Step.6
Background. XR스튜디오의 아이디어가 구체화 되면서 스튜디오와 연계가능한 B2C사업을 찾기 시작하였다. 현실과 가상공간의 접점에서 고민하던 중 미래의 TED가 떠올랐고, 프로메테우스의 바이럴영상으로 나온 영상을 찾아서 확인하는 과정에 관객이 없는 연사 그렇지만...
P.S 보안상 중요한 부분은 제외하고, 해당 프로젝트에 대한 칼럼 형식으로 풀었습니다.
Mobirise website software - More