DUOLABS
포트폴리오

가상공간 소셜 서비스

아바타를 꾸며 컨퍼런스홀 · 야외무대 같은 테마 공간에 모이고, 그 안에서 강연 · 모임 · 공연을 여는 가상공간 소셜 서비스에서 일반 앱 화면을 개발했습니다. 3D 공간은 3D 엔진이, 계정 · 홈 · 룸 입장 같은 서비스 화면은 앱이 맡는 구조라, 두 쪽이 화면 전환과 앱 상태를 함께 건드립니다. 경계가 어긋나면 사용자가 보는 화면과 앱이 알고 있는 상태가 서로 달라집니다. 작업은 서비스 화면 개발, 3D 공간과 앱 화면 사이의 경계 조정, 100명이 넘는 팀과의 협업에 걸쳐 있습니다.

Launch
2022
Client
국내 통신사
Type
미디어·커뮤니티
01 / 04

3D 공간은 엔진에, 서비스 화면은 앱에 맡긴 역할 분담

가상공간 소셜 앱에는 아바타가 움직이는 3D 공간과, 계정 · 홈 · 룸 입장 · 이벤트 · 설정 같은 일반 앱 화면이 한 앱 안에 함께 있습니다. 사용자는 아바타의 옷차림과 체형을 고르고, 테마를 골라 룸을 열거나 다른 사람이 연 룸에 들어가 자료를 띄우고 이야기합니다. 3D 공간은 3D 엔진이 그리고, 서비스 화면은 앱이 직접 그리도록 두 쪽의 역할을 구분했습니다. 홈에서 룸을 골라 들어가고, 룸에서 나와 다시 홈으로 돌아오는 흐름이 두 영역을 오가도 자연스럽게 이어지게 구성했습니다.

3D 공간은 엔진에, 서비스 화면은 앱에 맡긴 역할 분담
02 / 04

룸에 들어서는 순간 3D 공간과 앱 화면이 맞물리는 경계

가상공간 앱에서는 3D 공간 진입, 앱 화면 전환, 접속 세션 상태, 앱이 뒤로 갔다 돌아오는 변화가 서로 다른 쪽에서 일어납니다. 이 넷이 같은 순간에 겹치면 서로 충돌할 수 있어서, 3D 엔진과 앱이 맞닿는 경계 영역을 조정했습니다. 앱 쪽 기능 개발을 맡으면서, 3D 공간과 앱 화면의 역할이 섞이지 않도록 이 구간을 함께 다뤘습니다.

룸에 들어서는 순간 3D 공간과 앱 화면이 맞물리는 경계
03 / 04

신호가 어떤 순서로 와도 따라갈 수 있는 화면 상태

가상공간 앱에서는 로그인 상태, 룸 입장 상태, 네트워크 응답, 3D 엔진 초기화 시점이 제각각 다른 때에 도착합니다. 화면마다 사용자 입력, 서버 응답, 화면 상태 변화를 입력과 출력으로 나눠 같은 틀로 짰고, 그래서 어떤 신호가 먼저 와도 화면 상태가 어디서 바뀌었는지 따라갈 수 있습니다. 이 틀은 이후 다른 프로젝트에서 화면 구조를 설계하는 기준이 됐습니다.

신호가 어떤 순서로 와도 따라갈 수 있는 화면 상태
04 / 04

100명 넘는 팀에서 먼저 정한 담당 영역과 접점

가상공간 소셜 서비스는 앱 개발자에 3D, 서버, 기획, QA 까지 100명이 넘는 팀이 함께 만들었습니다. 같은 플랫폼의 앱 개발자만 7~8명이었습니다. 변경이 여러 플랫폼에 걸치는 기능은 담당 영역과 서로 주고받는 접점을 먼저 나눈 뒤 개발했고, 플랫폼마다 다른 동작은 맞춰 가며 조율했습니다.

100명 넘는 팀에서 먼저 정한 담당 영역과 접점

이 작업의 포인트

01

계정 · 홈 · 룸 입장 · 이벤트 · 설정 등 가상공간 서비스 화면 개발

02

3D 공간 진입과 앱 화면 전환이 부딪히지 않게 맞춘 경계

03

로그인 · 룸 입장 · 3D 초기화가 엇갈려 와도 따라갈 수 있는 화면 상태

인사이트

블로그 전체 보기