증강 현실에서 중요한 UX 요소 4가지 (1/2)

MAXST_Tech
8 min readJul 11, 2018

--

안녕하세요, 저번 포스팅에서는 AR시장의 변화와 함께 예시로 애플의 ‘SwiftShot’과 맥스트의 ‘Ghost SLAM’의 플레이 영상을 소개드렸습니다! 이번 포스팅부터는 두가지의 멀티 유저 AR게임에 어떤 UX 요소가 숨어있는지 알아볼텐데요.

1편을 못보고 오신 분들은 아래 링크를 통해 읽으실 수 있습니다.

>>https://medium.com/maxst/%EC%A6%9D%EA%B0%95-%ED%98%84%EC%8B%A4-ar-%EC%9D%98-ux%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EB%94%94%EC%9E%90%EC%9D%B8%EB%90%98%EC%96%B4%EC%95%BC-%ED%95%A0%EA%B9%8C-1-7abecec33061

AR 게임에서는 어떤 UX요소가 중요할까요?

모바일 게임을 즐겨하시나요? 모바일 게임은 말 그대로 모바일 화면 속에 게임의 모든 UI와 사용자 경험이 속해있습니다. 그렇다면 AR 게임은 어떨까요? AR 게임은 모바일 화면 넘어의 현실 세계 속에 게임 화면이 펼쳐지는 새로운 차원의 게임입니다.

2D에서 3D로 환경이 옮겨가며 UX 또한 기존과 색다른 접근이 필요합니다. 물론 많은 UX요소가 숨어있지만 이번 이야기에서는 AR 게임에서 포커싱을 맞춰 네가지 주제를 선별해보았습니다.

1) 플레이 시간 2) 사용자의 적절한 움직임 유도 3) 게임의 상호작용 4) 컨트롤 방식

위의 네가지 주제를 통해 기존과 다른 점은 무엇이며, 왜 다르게 고려해야하는지 그리고 전 편에서 확인하신 두가지 AR 게임을 통해 어떤 식으로 적용이 이루어지는지 알아보겠습니다. 시작해볼까요?

첫번째 요소는 시간입니다.

기존 모바일 환경의 게임에서 고려했던 것과 같은 사항이지만 AR 환경에서는 그보다 짧고 쉽게 빠져나올 수 있는 방식이어야 합니다. 왜냐하면 기존에 비해 AR 게임은 실제적인 플레이어의 움직임이 있는 만큼 흥미를 높이지만 피로도 또한 높이기 때문입니다. 따라서 짧은 게임을 파티 형식으로 제공하는 것이 오히려 긍정적 경험을 유발할 수 있습니다.

애플의 SwiftShot 게임 UI

애플의 SwiftShot의 경우, 게임 보드를 기준으로 각 끝에 있는 세개의 새총을 발사해 가운데의 우든 블럭 방해물을 부수고 상대의 새총까지 무너뜨리면 승리하게 되는 게임입니다. 총 플레이 시간은 3분 내외로 걸리는 간단한 게임입니다.

맥스트의 Ghost SLAM의 경우, 게임 맵을 기준으로 제한시간 150초 동안 공격형, 방어형 콘텐츠들을 전략적으로 배치하며 전투하는 게임으로 간단합니다.

맥스트의 GhostSLAM 게임 UI

두번째 요소는 사용자의 움직임입니다.

AR이 정확히 작동 가능한 초기 상태를 만들기 위해서는 평평한 바닥, 너무 밝거나 어둡지 않은 빛 등 환경적 제한 요소와 적절한 사용자의 움직임이 필요합니다. 또한 사용자는 2D 인터랙션 경험에 익숙해 처음 접하는 AR의 360도 환경에 쉽게 움직이지 않으려는 경향이 발생합니다. 이런 제약 조건 속에서 사용자를 쉽게 AR환경에 적응시키기 위해서는 자연스러운 단계를 통한 Nudging (부드러운 개입을 통해 유저의 긍정적인 변화 및 행동을 리드하는 UX용어)이 필요합니다.

애플의 SwiftShot의 경우엔 어떻게 사용자의 움직임을 유도했는지 보겠습니다.

Swift Shot 게임에 등장하는 notification UI

1. Scale, Rotate or Move the board 2. Tap to create Game board 3. Move closer to a Slingshot

먼저 게임을 진행하기 전에 위와 같은 직접적이고 단계적으로 사용자를 AR 환경에 적응 시키는 노티가 제공됩니다.

그리고 게임보드를 증강시킬 때 Indicator를 띄워 사용자가 언제 표면을 찾고 물체를 놓아야 하는지, 이해할 수 있는 수단을 사용합니다. 이는 지표면에 배치가 활성화 상태임을 알릴 수 있는 방법입니다. 스크린 중앙에 사다리꼴 사각형은 수평, 수직으로 평평한 표면을 찾아야한다는 추론을 가능케합니다. 또한 지표의 모양을 drag, rotate등 을 통해 변형 가능하게 하여 어떻게 배치될 지 사용자가 미리 예측할 수 있도록 합니다.

그렇다면 게임 중에는 어떤 Nudging이 존재할까요? 바로 거리, 높이의 차이입니다. 2D UI와 달리 현실 세계를 기반으로 하기에 높이와 거리의 차이를 실제 사물처럼 인식할 수 있는데요. 이 차이는 사용자의 움직임을 유도하는 어떤 Key로 작용할까요?

Swift Shot 게임 중 플레이어가 공격을 시도할 때 블럭 방해물들이 길목에 놓여있어 적의 블럭을 쉽게 쓰러뜨리는 각도를 찾기가 어렵습니다. 자세히 보시면 알겠지만, 세 개의 Slingshot 높이가 모두 다릅니다. 플레이를 하면서 자연스럽게 플레이어는 더 좋은 각도가 발생하는 SlingShot으로 이리저리 옮겨 다니게 됩니다. 이는 사용자들의 환경을 고려하여 사용자의 움직임을 유도해내고 게임의 몰입감과 활동성을 높인 한가지 방법입니다.

다음은 맥스트의 GhostSLAM입니다.

GhostSLAM의 이름에서 SLAM(Simultaneous localization and mapping)은 AR 기술 중 실시간으로 공간 속 특징을 잡아 3D 맵을 생성하는 기술입니다. 이 기술을 활용한 GhostSLAM은 사용자가 원하는 공간을 학습시키고 그 맵을 활용해 3D 콘텐츠를 증강시켜 다른 사용자와 함께 ‘맵 공유’가 가능한 게임입니다.

생소한 기술 이름이라 AR이나 이러한 기술을 처음 접하는 사용자에게는 굉장히 파악하기 어려운 일 일 것입니다. 그렇기에 더 친절하고, 와닿기 쉬운 용어와 픽토그램으로 사용자에게 정보를 전달할 필요가 있습니다.

일반 책상 위에서 SLAM으로 맵을 학습하는 화면

특히나 생소한 개념이 많은 AR환경에서는 위의 화면과 같이 SLAM과 같은 개발적 용어를 최대한 사용자의 언어로 치환해 설명을 해야합니다. 맵을 어떻게 학습하고, 얼마간 학습해야 하는지, 얼마나 많은 범위가 학습됐는지 직관적인 프로세스바와 픽토그램 등으로 노티를 제공하여 맵을 학습하는 방법을 자연스럽게 사용자에게 전달합니다.

왼쪽의 타워 모델링과 오른쪽의 3D Indicator

SwiftShot에서 게임 보드를 증강 시킬 때 Indicator가 사용 됐다면, GhostSLAM은 타워를 배치할 때 3D 콘텐츠로 된 Indicator가 사용됩니다. 게임이기 때문에 가장 오른쪽 사진처럼 Indicator에서 3D 파티클 효과가 나타나며 사용자에게 배치가 활성화 되었다는 노티를 제공하게 됩니다.

GhostSLAM의 게임속 사용자의 움직임 유도 방법도 알아봐야겠죠?

GhostSLAM 레디 화면

앞서 말했듯 2D 환경에 익숙한 사용자들에게 처음 경험하는 AR환경을 자연스럽게 적응하게 하기 위해서는 디바이스를 움직일 수 있도록 유도하는 Nudging이 필요합니다. 바로 거리와 높이 차이죠. 게임 화면 사진을 보시면 전체적으로 땅의 게임 플레이 영역과 하늘의 플레이어 구분 영역으로 나누어집니다. 플레이어 구분을 위해 만든 하늘의 해골 깃발 콘텐츠를 Nudging용으로 이용했습니다.

GhostSLAM 게임 콘텐츠가 모두 증강된 화면

처음 콘텐츠가 증강이되고 사용자의 시각에서 보았을 때 하늘에 증강된 해골 깃발 컨텐츠는 반만 드러나게 됩니다. 이는 사용자로 하여금 디바이스를 아래 위로 움직여 콘텐츠들을 탐구하는 행동을 유도하게 되고 전체적으로 맵을 확인하게 함으로써 맵과 사용자간 적절한 거리가 유지될 수 있도록 도와줍니다. 다시보니 좀 더 활동성을 높일 유도 장치가 마련됐으면 하는 점이 아쉽네요.

이번 포스팅에서는 시간과 사용자의 움직임이라는 주제로 숨은 UX 요소를 찾아보았습니다. 이어서 다음 포스팅에서는 AR환경에서 게임의 상호작용 ,컨트롤 방식이란 주제로 이야기를 들려드릴 예정입니다.

감사합니다.

--

--

MAXST_Tech

MAXST has world-class spatial computing technology. In line with the global AR market, we will introduce MAXST's technology in depth.