이번 체험존은 신제품을 고객이 직접 경험할 수 있도록 WebGL로 개발하고, 가상공간의 인터랙션과 AR을 통해 고객에게 보다 효과적으로 제품의 기능을 전달하고자 하였습니다. 또한, 복잡한 기술 속에서 개개인에게 경험과 감성을 자연스럽게 전달하고자 설계하였습니다.
Concept
삼성전자의 신제품인 Galaxy Fold3, Flip3, Watch4 는 물론 Buds2까지 한 번에 체험할 수 있는 ‘내 손안에 Galaxy Studio’ 온라인 체험존이 오픈했습니다. 이번 체험존에서는 WebGL로 구현한 가상의 갤럭시 스튜디오에서 팬 큐레이터 오마이걸 ‘효정’의 도슨트를 들으며 제품의 기능을 직/간접적으로 경험하실 수 있습니다.
인터랙션은 물론 AR까지 다양한 기능을 통해 갤럭시 신제품 라인업을 만나보세요.
Main WebGL
더 나은 제품 본질의 경험을 위해 퀄리티를 유지하면서 로딩 속도와 성능 사이의 완벽한 균형을 찾아야 했습니다.
이에 WEBGL의 어느 지점에서나 제품 클로즈업 시점으로 원활하게 전환할 수 있으며, 매번 생성되는 계산된 궤적과 함께 카메라 애니메이션을 부드럽게 적용하여 사용자의 경험 흐름에 집중하여 제작하였습니다.
Optimization of 3D Modeling
경험이 중요한 오늘의 시대에 맞게 모든 모바일 디바이스에서 일관되고 생생한 제품을 경험할 수 있도록 많은 고민을 했습니다.
이에, 제품의 3D 및 텍스처 형식을 더 가볍게 개발하고 폴리곤 및 재질 수 최적화를 통해 실시간 렌더링을 최적화하여 동일한 경험을 제공하고자 집중하였습니다.
Simplified Structure
체험존의 View는 매우 복잡한 구조로 개발이 되어있습니다. 이 복잡한 구조를 단순화하기 위해 내비게이션을 프론트에서 담당하고 호스팅 되는 WebGL에서는 이벤트를 통해 뷰와 URL을 동기화하였습니다.
이를테면 WebGL에서 A 컷 뷰로 진입 시 이에 따른 변화를 프론트에 알려 URL을 맞추어 GNB 클릭으로 들어올 경우에도 같은 화면이 보일 수 있도록 설계하여, 복잡한 구성을 간소화할 수 있었습니다.
AR Shooting
AR 체험을 만드는 앱의 기술은 많지만, 웹 기반의 AR 체험을 구현하는 것은 모바일 디바이스에서 뎁스 카메라에 액세스할 수 없기 때문에 어려운 일입니다.
우리는 끊임없는 고민을 통해 일반 휴대폰 카메라 위에 3D 개체를 적용하는 방식을 찾아 AR을 효과적으로 구현하여 사용자의 다양한 개성과 취향을 만족시켰습니다.
Linking Online End Offline
온라인에서의 체험존 경험이 AR 촬영을 통해 오프라인까지 이어지고, 촬영된 사진은 SNS를 통해 사람들이 함께 참여하고 공감할 수 있도록 제공하였습니다.
Illustration & Projection Mapping
작가님의 일러스트를 3D로 제작하여 3D 캐릭터를 WebGL 입히는 형태로 작업했으며, 3D 캐릭터에 리깅 작업을 통해 애니메이션을 입혀 사용자에게 감성적인 경험에 전달할 수 있도록 하였습니다. 또한 프로젝션 맵핑 방식을 통해 카메라에 보이는 부분은 제작하지 않는 방식을 택하여 용량 최적화 과정을 거쳤습니다.
Illustration & Functional
Description
자칫 지루할 수 있는 기능 설명에 작가님의 일러스트를 조합시켜 중요한 정보는 더 돋보이게 만들고, 더 생생하게 몰입할 수 있도록 연출하였습니다.
더 나은 제품 본질의 경험을 위해 퀄리티를 유지하면서 로딩 속도와 성능 사이의 완벽한 균형을 찾아야 했습니다.
이에 WEBGL의 어느 지점에서나 제품 클로즈업 시점으로 원활하게 전환할 수 있으며, 매번 생성되는 계산된 궤적과 함께 카메라 애니메이션을 부드럽게 적용하여 사용자의 경험 흐름에 집중하여 제작하였습니다.
Optimization of 3D Modeling
경험이 중요한 오늘의 시대에 맞게 모든 모바일 디바이스에서 일관되고 생생한 제품을 경험할 수 있도록 많은 고민을 했습니다.
이에, 제품의 3D 및 텍스처 형식을 더 가볍게 개발하고 폴리곤 및 재질 수 최적화를 통해 실시간 렌더링을 최적화하여 동일한 경험을 제공하고자 집중하였습니다.
Simplified Structure
체험존의 View는 매우 복잡한 구조로 개발이 되어있습니다. 이 복잡한 구조를 단순화하기 위해 내비게이션을 프론트에서 담당하고 호스팅 되는 WebGL에서는 이벤트를 통해 뷰와 URL을 동기화하였습니다.
이를테면 WebGL에서 A 컷 뷰로 진입 시 이에 따른 변화를 프론트에 알려 URL을 맞추어 GNB 클릭으로 들어올 경우에도 같은 화면이 보일 수 있도록 설계하여, 복잡한 구성을 간소화할 수 있었습니다.
AR Shooting
AR 체험을 만드는 앱의 기술은 많지만, 웹 기반의 AR 체험을 구현하는 것은 모바일 디바이스에서 뎁스 카메라에 액세스할 수 없기 때문에 어려운 일입니다.
우리는 끊임없는 고민을 통해 일반 휴대폰 카메라 위에 3D 개체를 적용하는 방식을 찾아 AR을 효과적으로 구현하여 사용자의 다양한 개성과 취향을 만족시켰습니다.
Linking Online End Offline
온라인에서의 체험존 경험이 AR 촬영을 통해 오프라인까지 이어지고, 촬영된 사진은 SNS를 통해 사람들이 함께 참여하고 공감할 수 있도록 제공하였습니다.
Illustration & Projection Mapping
작가님의 일러스트를 3D로 제작하여 3D 캐릭터를 WebGL 입히는 형태로 작업했으며, 3D 캐릭터에 리깅 작업을 통해 애니메이션을 입혀 사용자에게 감성적인 경험에 전달할 수 있도록 하였습니다. 또한 프로젝션 맵핑 방식을 통해 카메라에 보이는 부분은 제작하지 않는 방식을 택하여 용량 최적화 과정을 거쳤습니다.
Illustration & Functional
Description
자칫 지루할 수 있는 기능 설명에 작가님의 일러스트를 조합시켜 중요한 정보는 더 돋보이게 만들고, 더 생생하게 몰입할 수 있도록 연출하였습니다.