이벤트 입구를 웹 AR로 구현, 스마트폰에서 바로 인터랙션

(과제)

온라인 밋업에는 완결된 행사 입구가 필요합니다

당시 팬데믹의 영향으로 많은 팀이 오프라인 행사를 온라인으로 전환했고, 참가자에게 이메일을 보내 화상회의나 온라인 소셜 공간 링크를 첨부하는 방식이 흔했습니다.

이번 목표는 온라인 행사를 처음부터 끝까지 설계하고, 동시에 참여 문턱을 낮춰 행사를 위해 앱을 설치할 필요가 없게 하는 것이었습니다.

(접근 방식)

행사 입구를 하나의 웹페이지에 모아 앱 같은 인터페이스로

행사 당일 사용하는 화상 회의 입구, 온라인 소셜 공간 입구, 참가자 전용 캐릭터를 하나의 이벤트 웹사이트에 통합했습니다. 사용자는 로그인 후 AR 마커를 스캔하면 캐릭터를 잠금 해제할 수 있으며, 이 단계는 행사 전 가장 큰 서프라이즈로서 사용자가 자신의 소셜 계정에 공유하기를 기대합니다.

인터페이스는 앱을 본떠 설계했습니다. 화면 높이를 고정하고 싱글 페이지 애플리케이션으로 페이지를 전환하며, 일반 웹의 로딩 효과 대신 애니메이션을 써서 페이지가 나뉜 느낌을 줄여 경험이 끊기지 않게 했습니다. 입장 전에 게임 ID로 로그인하게 해 의식 같은 느낌을 더하고, 웹사이트가 자신만을 위한 것이라고 느끼게 합니다. 들어서면 비어 있는 캐릭터 이미지와 느낌표 안내가 나타나 전용 캐릭터를 받도록 안내합니다.

화상 회의와 온라인 소셜 공간 단계는 PC 버전을 우선하며 사용자에게 PC로 접속하도록 안내하고, AR 단계는 모바일 버전을 중심으로 합니다.

(핵심 설계)

두 가지 핵심 설계

테스트 카드

테스트 결과는 사용자가 즉시 공감하도록, 집단 안에서 사용자의 위치와 전체 인구에서 차지하는 비율을 제시하고 그 비율을 가능한 한 낮게 잡아 독특하고 드문 존재라고 느끼게 했습니다. 정보량이 많을 때는 카드 레이아웃으로 위계를 나눕니다. 지수 숫자는 맨 위에 두어 나머지 내용과 구분하고, 가장 중요한 테스트 결과는 중간에 둡니다. 카드는 AR 환경에서 읽히며 사용자가 자유롭게 확대·축소하고 회전할 수 있으므로, 레이아웃은 첫인상을 우선했습니다.

웹 AR 구현

사용자가 앱을 설치하지 않도록 웹 AR을 채택했습니다. 3D 오브젝트와 애니메이션은 3D 소프트웨어에서 glb 파일로 내보내며, 오브젝트 크기는 1–2cm 이내면 충분합니다. 파일이 클수록 로딩이 오래 걸리지만 10–15MB는 허용 범위입니다. 광원은 코드에서 설정할 때 가장 안정적이어서 Directional light를 사용했고 밝기도 조절할 수 있습니다. glb는 오브젝트마다 하나의 머티리얼만 인식하므로 UV Mapping을 쓰는 것이 가장 안정적이며, 내보내기 전에 애니메이션을 베이킹하면 더 부드럽고, 색이 틀어질 때는 Gamma 값이 2.2 이상인지 확인합니다.

(성과)

스마트폰 브라우저만으로 완성되는 AR 이벤트 입구

행사 입구는 화상회의, 온라인 소셜 공간, 전용 캐릭터를 통합하며, 사용자는 휴대폰으로 AR 마커를 스캔하고 앱 다운로드가 필요 없습니다. 당시 대만의 대다수 마케팅 행사는 여전히 앱 내 AR 중심이었으며, 예를 들면 소셜 필터가 그랬습니다. 웹 AR은 상대적으로 드물었습니다.