brunch

라이킷 15 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 하이퍼클라우드 Aug 30. 2023

AR 콘텐츠에서의 UIUX는 뭐가 다를까?

하클 UIUX 디자이너 Liam

안녕하세요. 하이퍼클라우드에서 UI/UX 디자이너로 일하고 있는 Liam입니다.

하이퍼클라우드 UIUX 디자이너 Liam

저는 사용자가 디지털 디바이스에서 만나는 다양한 화면들을 만들고 있어요. 다만 하이퍼클라우드가 AR/XR 콘텐츠 제작 기업이다 보니, 일반적인 앱과는 다르게 AR 환경까지 추가된 UI 화면을 만드는 일을 하고 있습니다. 유니티, 웹, 앱 등 다양한 환경에서 디자인을 합니다.

AR 콘텐츠나 일반 콘텐츠나 똑같이 스크린을 통해 경험하는 것이기 때문에 UI/UX에 큰 차이가 없다고 생각하실 수 있을 것 같아요. 그래서 오늘은 AR 환경에서의 UI/UX 디자인의 중요성과, 제가 특별히 고민하는 지점들에 대해 이야기해 보려고 합니다.

AR 환경에서 작업하는 UI/UX 디자이너가 무슨 일을 하는지 궁금하신 디자이너분들께서 가볍게 참고해주시면 좋을 것 같네요.

AR 환경의 특수성

증강현실은 대부분 카메라 뷰로 구동되죠. 따라서 2D 웹/모바일 환경과는 달리 스크린에 나타나는 배경이 수시로 변경됩니다. 같은 의미로, 사용자는 직접 스마트폰을 이동시켜가며 카메라를 비춰 가상의 객체들을 확인합니다. 이와 같은 경험은 몰입감을 높여준다는 큰 장점이 있습니다만. 이런 환경에서의 UI/UX 디자인은 일반적인 앱에서의 디자인과는 차별성이 있어야 합니다.

타임스퀘어를 배경으로 펼쳐진 Gorillaz의 AR 라이브 퍼포먼스 (사진=lbbonline.com)

또, AR은 현실세계 위에 가상의 객체를 겹쳐서 보여주는 것이기 때문에 사용자가 어떤 환경에서 AR 앱을 사용하는 지에 대해서도 고려해야 합니다. 예를 들어, 보여주고자 하는 AR 콘텐츠에 따라 필요한 공간의 규모가 다를 수 있겠죠. 또 증강된 가상의 물체를 보려고 이동하다가 사용자의 안전 문제가 발생할 수도 있습니다.

마지막으로 위와 같은 AR 환경의 특징들은 결국 사용자에게 낯설게 느껴진다는 점입니다.

이러한 AR 환경에서 UI/UX 디자인의 역할

따라서 아직은 낯선 AR 콘텐츠에 사용자가 쉽게 접근하도록 도와주는 UI/UX 디자인이 필요합니다.

친절한 안내

일반적인 앱들은 이미 사용자들이 충분히 학습했기 때문에 다음에 어떠한 현상이 일어날 지 예측을 할 수 있는데요. AR 환경은 사용자들의 경험이 부족하기 때문에 다음에 어디로 이동하는 지, 어떤 행위를 해야 하는 지 친절하게 안내해줘야 합니다. 이를 위해 사용자 플로우 작성 단계에서 훨씬 촘촘히, 섬세하게 설계하도록 신경써야 합니다. 앱 내에서 자연스러운 단계를 거쳐 AR 환경을 학습할 수 있도록 만들어 줍니다.

사용자에게 익숙하지 않았던 UI와 UI가 미치는 영향

낯설게 느껴지는 부분은 익숙하고 친절한 UI를 응용하여 해소하도록 시도하고 있습니다. 위의 ‘익숙하지 않은 UI 예시’를 보시면 기존의 사용자 경험을 무시한 디자인이 사용자 이탈률에 큰 영향을 끼침을 확인하실 수 있는데요. 실제로 스냅챗은 평균 이용률이 한 주 내에 3.1에서 2.4로 떨어졌습니다.

친절하게 검색을 유도하는 UI

한편 AR 환경은 아니지만 사용자가 검색창에서 막다른 길에 막히지 않도록 잘 안내하고 있는 두 가지 예시를 보겠습니다. 좌측 이미지는 캠핑관련 서비스로 검색 전의 상황에서 플레이스홀더, 추천 검색어 같은 다양한 장치를 배치해 사용자가 막막함을 느끼지 않도록 돕는다고 볼 수 있습니다.

우측은 페이코의 검색 후 화면인데요. 검색 전에 많은 유도장치를 배치했다 하더라도 검색에 실패, 즉 목적 도달에 실패할 수 있겠죠. 페이코는 검색 실패 상황에도 끈임없이 관련 콘텐츠를 추천하여 사용자가 이탈하지 않도록 유도하고 있습니다.

유동적인 배경을 고려한 충분한 테스트

위에서 말씀 드렸듯, 증강현실은 대부분 카메라 뷰에서 구동됩니다. 따라서 배경이 수시로 변화하는 환경일 수밖에 없는데요. 이런 변칙적인 카메라 화면에서는 UI가 명확하게 보이지 않을 수 있습니다. 따라서 배경 컬러에 Blur 처리를 하거나 투명도 값을 테스트하는 등 다양한 장치들을 추가하여 해결하려고 노력하고 있습니다.

배경을 고려한 투명도 값 조절 테스트

AR 개발 환경에 영향받는 UIUX 디자인

사용자를 고려한 디자인에 더해, 하이퍼클라우드 내부 프로젝트에서 특별히 신경써서 작업했던 부분은 AR 개발 환경에 따른 디자인입니다. 유니티 환경에서 진행하는 프로젝트의 경우 유니티에서 가능한 UI를 구성해야 했습니다. 웹이나 앱에서 간단하게 되었던 UI들을 유니티 환경에서 구현하는 것은 쉬운 작업이 아니었습니다. 때문에 일정과 공수를 고려해 UI 들을 변경해야 했습니다.

예를들어 한손가락 터치영역을 고려하여 바텀시트를 제작했는데, 내부 콘텐츠에 따라 유동적인 높이값을 가지는 바텀시트는 유니티에서 공수가 많이 드는 작업이었습니다. 이 문제를 해결하기 위해서 R&D 및 다양한 시도를 했습니다. 유니티상에서 앱 환경처럼 쉽게 UI 컴포넌트를 라이브러리화 해서 적용하는 방향을 고민했는데요. 하지만 그래픽 환경과 기본적인 설정값이 다른 유니티상에서는 아무래도 제약이 많은 상황입니다. 이 부분에 있어서 내부 유관부서에서도 지속적으로 힘쓰는 중입니다.