프로젝트 기간
2020. 12 - 2021. 08
엘리펙스 스튜디오의
베타 '뷰디터' 2.0, 2.1 참여
참여 범위 (기여도)
디자인 70%
서비스 랜딩, 플러그인 디자인,
웹 서비스 전체 UI/UX
팀 프로젝트
디자이너 2명 참여
서비스 기획자 1명,
개발팀 다수 참여
작업 툴
Adobe XD
Adobe Illustrator
Atlassian, Jira, Slack
프로젝트 배경
뷰디터 Viewditor
런칭 프로젝트
뷰디터(현재는 '엘리펙스 스튜디오')는 게임 엔진, 3D 제작 툴에서 만들어진 시각화 데이터와 3D 공간 정보를
웹기반 Editor에 연결하고 인터렉션 기능을 드래그 앤 드롭 방식으로 추가하여 웹으로 배포하는 소프트웨어
입니다. 내부 3D 디자이너들을 위한 에디터로 개발팀에서 초기 버전 1.0 제품을 만든 후 내부 테스트를 진행한 후, 정식 제품으로 런칭하기 위하여 서비스 기획팀(기획자, 디자이너)이 참여하였습니다. 초기 구축을 위한 버전 2.0과 개선 및 기능 추가를 한 버전 2.1에 참여하였습니다. 현재는 정식 제품 ‘엘리펙스 스튜디오'로 런칭 하였습니다.
버전 2.0
12 - 2021. 01 약 2개월 뷰디터 베타 런칭
버전 2.1
05 - 2021. 08 약 3개월 뷰디터 개선 업데이트
서비스 타겟
초기
올림플래닛
3D 디자이너
런칭 목표
3D 시각화를
할 수 있는 누구나
프로젝트 참여 범위
서비스 랜딩
및 어카운트
웹 빌더 UI/UX
(인포메이션, 임포트,
에디트, 퍼블리시)
뷰디터
초기 디자인 시스템
유저가이드 UI/UX,
플러그인 디자인 리소스
업무 프로세스
버전 2.0의 런칭을 위한
디자인 컨셉부터 진행
우선순위가 높은 부분부터 진행하며 각 기능들이 지속적으로 추가되고 개선하는 방식으로 작업하였습니다.
디자인의 경우, 동료 디자이너 1명과 디자인 피드백을 서로 주고 받으며 개선한 뒤, 최종 완료 후 디자인 핸드오프 문서를 만들어 개발자와 소통하였습니다.
버전 2.0은 뷰디터 초기 디자인 컨셉 및 UI/UX 디자인 제작에 집중하고 버전 2.1을 2.0을 기반으로 개선하여 업데이트 하였습니다.
디자인 프로세스
공통 디자인 컨셉
(리서치 및 인사이트 도출)
진행
공통 레이아웃
디자인
세부 기능 디자인
개발 Hand - Off 및
디자인 개선
디자인 협업 시, XD를 활용하여 실시간으로 공유하거나
Atlassian에 문서로 공유한 후, 동료 디자이너와 리뷰 진행.
피드백을 주고 받으며 개선 후, 최종 디자인 확정.
문제 발견
사용자를 고려하지 못한
초기 1.0
버전 1.0의 경우, '개발 구축'에 집중하여 만들어져 내부 디자이너들이 사용하기 어렵다는 피드백이 많았습니다.
UI/UX가 전혀 고려되지 않은 제품이였기에 새로운 프로덕트를 만든다는 생각으로 진행했습니다.
그래서 국내, 해외를 포함하여 360 에디터, 많은 디자이너들이 사용하고 있는 Adobe 디자인 툴, Figma 등
웹 에디터 부터 디자인 프로그램까지 리서치하였습니다.
가설 설정
크리에이터(디자이너)라면 익숙한
프로그램 레이아웃을 제공
“디자이너라면 어렵지 않게 사용할 수 있도록 기존의 많은 프로그램들의 레이아웃에서
인사이트를 도출하고 그에 맞는 익숙한 환경을 만들자”
서비스 구조
별도의 개발없이
플러그인 하나로 웹에 연결
3D 제작 툴에 엘리펙스 스튜디오 플러그인을 연결하고 데이터를 내보냅니다. 이 후, 엘리펙스 스튜디오에 로그인하여 플러그인으로 내보낸 ‘투어'를 홈에서 선택할 수 있습니다. 투어를 선택하면 4개의 탭에서 투어의 내용을 수정하거나 추가할 수 있습니다.
결과물
완전하게 새로운 공간을 빌드하는
공간의 미래, 엘리펙스 스튜디오
Web Editor
Home - 투어 리스트
웹 사이트에 로그인하면, 뷰디터의 홈 '투어' 로 처음 이동합니다. ‘투어’는 가상공간 웹 그 자체를 말합니다.
웹으로 언제 어디서나 원하는 공간을 살펴볼 수 있도록 목적에 맞게 아파트나 오피스텔의 세대, 전시회, 팝업스토어 등 다양한 목적으로 투어를 만듭니다. (올림플래닛은 주로 고객들의 요구사항에 따라 투어를 만듭니다.)
언리얼에서 생성한 가상공간을
플러그인으로 불러오면 홈 화면에 바로 등록됩니다.
Trial
공동 작업자를 추가할 수는 없지만, 샘플 투어를 비롯하여 기본 기능은 사용할 수 있습니다. 버전 2.1 기준으로 플러그인을 사용해야 투어를 생성할 수 있었습니다.
Enterprise
마스터가 공동 작업자를 추가하고 권한을 부여할 수 있습니다. 프로젝트 용량을 확인하며 투어를 관리할 수 있습니다.
Web Editor
Information 기본 정보
투어의 정보를 입력하고 관리합니다. 투어의 타이틀과 설명, 썸네일 이미지, 언어 설정, 오프닝 문구 등을
추가하거나 수정할 수 있습니다. 정보를 입력할 때는 이동 없이 한 곳에서 모든 작업을 완료하도록 설계되었습니다.
Web Editor 2/4
Import 씬 편집
플러그인에서 내보낸 360 이미지(씬)를 확인할 수 있습니다. 씬과 태그를 수정 및 추가할 수 있고 사용자가
투어에 입장할 때 처음 볼 수 있는 시작 위치를 지정할 수 있습니다. 플러그인에서 받아온 '씬' 이미지를 설정하는
영역이라고 설명할 수 있습니다.
Import 씬 추가 및 수정
임포트에서 투어의 '씬'을 카드뷰와 리스트뷰로 확인할 수 있으며, 씬을 선택하면 Theme 이미지를 교체할 수
있고 태그를 설정할 수 있습니다.
업무 담당 영역
Import Common Layout - View 전환
카드뷰와 리스트뷰로 전환하여 사용할 수 있습니다. 임포트의 레이아웃의 경우, 연결한 '씬' 이미지를 직관적으로 볼 수 있도록 카드뷰를 기본으로 제공하고
이미지를 최우선으로 디자인 하였습니다.
업무 담당 영역
Set Theme - 테마 순서 변경
Theme는 동일한 공간을 다르게 연출할 때 사용됩니다. Set Theme에서 먼저 보여줄 Theme의 순서를 변경할 수 있습니다.
업무 담당 영역
Scene Detail
각 씬의 상세정보를 수정할 수 있습니다. 씬 타이틀, 테마 이미지를 수정하거나, 태그를 수정할 수 있습니다.
디자인
Import 카드뷰
‘씬’ 상세정보에서 태그를 추가 할 경우, 카드뷰의 정보영역에 표시됩니다. 그래서 ‘씬’이 원래 가지고 있는 정보를 고려하여 디자인하였습니다. 그리고 상황별로 일관성있게 디자인하고, 사용자가 변화를 인지할 수 있게 세부
디자인을 추가하는 방향으로 진행했습니다.
디자인
Import 테마 설정 팝업
테마의 경우, 순서를 드래그 앤 드롭으로 쉽게 변경할 수 있도록 디자인 하였습니다. 그리고 언리얼에서 다양한 Theme가 제작될 수 있기에 추가될 수 있는 경우에 대비, 반응형 웹의 높이값을 고려한 스크롤 영역 가이드를
개발팀에 제공하였습니다.
Import 편집 모드
여러개의 씬 이미지를 교체하거나 삭제하고 싶을 때, 또는 입력된 태그를 일괄적으로 수정하고 싶을 때는
‘편집 모드'로 전환하여 일괄 수정이 가능합니다.
Edit 씬 편집 모드: 이미지 일괄 수정
수정할 씬을 선택하고 'Image' 버튼을 누르면 일괄적으로 수정이 가능합니다.
업무 담당 영역
Edit 씬 편집 모드: 태그 일괄 수정
수정할 씬을 선택하고 'Tag' 버튼을 누르면 일괄적으로 수정이 가능합니다. 태그의 경우, 마우스로 더블클릭을 하면 입력창으로 전환되어 수정할 수 있습니다.
디자인
태그 수정 및 추가
씬 상세정보에서 정보의 흐름에 따라 레이아웃을 배치하였습니다. 태그 영역의 경우, 수정이 많은 영역이라는
피드백을 반영하여 사용자가 마우스로 쉽게 변경할 수 있고 직관적으로 변화를 인지할 수 있도록
디자인 하였습니다.
Web Editor 3/4
Edit 레이아웃
언리얼에서 배치한 이동포인트를 기준으로 좌표를 연결하여 캡쳐한 360 이미지를 투어로 만들어 표시합니다.
Edit에서 이동포인트를 수정할 수 있고, 핫스팟에 콘텐츠를 연결하거나 업로드할 수 있습니다.
Edit 툴바
툴바 Edit 탭의 투어 및 편집 화면 설정에 사용되는 버튼입니다. 툴바의 아이콘을 디자인 하였고, 뷰디터 초기
아이콘 시스템을 만들었습니다.
디자인
아이콘 디자인
전사 아이콘의 모든 스타일을 일괄적으로 정리하며 뷰디터 내에서 사용되었던 툴바 영역의 아이콘을 함께 디자인 하였습니다. 뷰디터 외의 웹 서비스에서도 공통적으로 사용할 수 있는 아이콘과 뷰디터 내에서만 사용할 수 있는
아이콘으로 분리하여 디자인 하였습니다.
모든 아이콘을 디자인 하기에는 주어진 일정이 넉넉하지 않고 기존의 아이콘에서 벗어나는 가이드를 적용하게 되면 일정 안에 불가능 할 수도 있다고 판단하였습니다.
그래서 정해진 일정안에 최대한의 효율을 내기 위하여 우선 순위를 설정하여 디자인을 진행하였습니다.
우선 순위
뷰디터와
함께 업데이트가
가능한 아이콘
디자인이 완료되면
확장이 가능한
기본 아이콘
반응형 웹 해상도에 대응할 수 있도록 8배수를 기준으로 아이콘 작업 가이드를 만들었습니다. 기존에 크기가 달랐던 케이스들을 취합하여 그리드를 작업한 다음,
정렬을 맞추고 각 아이콘들이 각각의 UI에 적용될 수 있도록 일관된 크기를 적용하였습니다.
Common Icon
뷰디터는 물론 전사 서비스에 일괄적으로 사용될 수 있습니다. 기본 아이콘 일부입니다.
Service Icon
뷰디터에만 사용되는 아이콘입니다. 툴바 영역에 사용되던 아이콘 일부입니다.
Edit 아이템 추가 및 설정
아이템이란 3D로 구현한 공간에 다양한 콘텐츠 연동이 가능한 핫스팟 및 뷰어를 말합니다.
Edit 모드에서는 아이템을 추가하고 수정할 수 있습니다. 공간에 배치하여 이미지 슬라이더, 외부 사이트 링크 연동 및 웹페이지 출력이 가능하고, 비디오나 이미지 영역을 마치 액자와 같이 배치할 수 있는 뷰어 등의 다양한 형태와 기능을 제공합니다.
업무 담당 영역
아이템 추가하기 - Hotspot, Viewer 아이템 추가 기능
우측 프리뷰 영역의 원하는 '씬'에 아이템을 추가할 수 있습니다. 공간에 배치하여 이미지 슬라이더, 외부 사이트 링크 연동이 가능한 핫스팟, 액자나 텔레비전에 있는 것처럼 배치할 수 있는 뷰어 기능을 제공합니다.
디자인
아이템 상세정보
아이템 추가하기 버튼을 누르면, 추가할 수 있는 목록이 나오고 추가를 원하는 핫스팟 또는 뷰어를 클릭하면 팝업 화면이 표시됩니다. 팝업의 레이아웃은 사용자가 가장 많이 사용하는 기능을 중심으로 배치하였습니다.
아이템 상세정보 상단: 타이틀, 아이콘, 콘텐츠(업로드 영역, 프리뷰 영역) 등 해당 팝업에서만 사용하는 기능
아이템 상세정보 하단: 아이템 위치 및 사이즈 등 프리뷰 또는 키맵 영역에서도 수정할 수 있는 기능
Edit 키맵 및 프리뷰 제어
Edit의 실제 작업영역은 투어의 이동포인트와 아이템의 전체 위치와 연결선을 확인하기 위한 키맵과 추가되는 아이템 또는 이동포인트를 실시간으로 반영하여 표시하는 프리뷰 영역으로 나눠집니다.
업무 담당 영역
키맵 영역 - 이동 포인트 아이템 및 Context Menu
언리얼에서 추가한 이동포인트와 아이템을 좌측 키맵 영역에서 확인할 수 있으며, 뷰디터에서도 추가와 수정이 가능합니다.
키맵 영역에서 포인트를 직접 선택하여 연결할 수 있고 선택한 포인트의 범위를 지정하여 해당 범위의 모든 포인트를 연결할 수도 있습니다.
디자인
키맵 아이템 및 이동포인트
실제 작업 시, 가장 고민이 많고 복잡하며 어려웠던 부분입니다. 이동포인트, 핫스팟, 뷰어의 타입이 서로 다르게
디자인되어야 하며, 각 아이템의 활성화와 비활성화 상태도 표현되어야 했습니다.
각 아이템의 타입은 프리뷰에서 보여지는 실제 형태에서 아이디어를 얻었습니다. 그리고 아이템의 상태는 칼라로 표현하고 각 아이템의 메인칼라에서 확장하여 키맵의
어두운 배경에서도 선명하게 보일 수 있도록 조정하였습니다.
그리고 핫스팟과 뷰어의 경우, 아이템을 추가할 때 자동으로 적용되는 아이콘을 똑같이 적용할 수 있도록 하였습니다. (이미지, 비디오, 링크 등등)
개발팀에서 구현한 부분을 보며 여러번 수정 후, 진행하였습니다. 아래 이미지는 당시 작업한 디자인 파일의 일부와 개발 가이드 입니다.
디자인
컨텍스트 메뉴
이동포인트의 연결선의 경우, 각 '씬'과 '씬' 이어주는 중요한 기능입니다. 위치를 기준으로 여러 포인트를 한번에
연결할 수 있는 기능이 추가되면서 어느 위치에 보여지는 것이 좋을지 고민이 많았습니다.
그래서 마우스로 쉽게 연결하고 해제할 수 있도록 컨텍스트 메뉴로 제공하는 방법을 선택하였습니다.
여러 상황과 기능 추가에 대응하기 위해, 다양한 형태를 디자인한 컨텍스트 메뉴
Web Editor 4/4
Publish 프로젝트 배포
4번째 탭인 '퍼블리시'에서는 프로젝트를 웹 형태(pc or mobile)로 확인할 수 있으며 각 씬들은 url 및 아이프레임 소스코드 정보를 제공합니다.
프로젝트 리뷰
재직 기간동안 초기 2.0 전체 디자인 업데이트와 2.1 기능 개선 업데이트에 참여했습니다. 보기에는 단순해 보일 수 있지만, 많은 상황에 대응해야 하는 복잡한 기능과 플로우를 가지고 있습니다.
위의 포트폴리오에 포함되지 않은 선행 디자인도 많이 참여하였습니다. 각 버전의 프로젝트 일정이 촉박하여
아쉬운 부분도 많았지만, 사용자가 나의 제품을 이용하여 또 다른 무언가를 만들 수 있다는 경험과
다양한 직군과 협업할 수 있는 환경을 경험할 수 있었습니다.
포트폴리오 사이트에 방문해주셔서 감사드려요.
버튼을 클릭하면 메일 주소가 복사됩니다!
대화를 나누고 싶다면 언제든 연락주세요.
© Hyemi Yun