FXMirror: 3D AR Mirror Kiosk

WHERE I WORK

FXGear

DATE

2015-2017

PARTICIPATION RATE

50%

MY ROLE

Interview

Hi-Fi wireframe

Interaction design

Iconography

Prototype

Usability test

OVERVIEW

FXMirror는 디지털 거울 형태의 키오스크로써 증강현실을 기반으로 실시간 가상 피팅 서비스를 제공합니다.

고객들은 일일이 옷을 직접 입어보지 않고도, FXMIirror를 통해 다양한 의류를 입어볼 수 있습니다. 미러 솔루션은 75인치 디스플레이, 콘솔 및 키넥트 카메라, 그리고 특허받은 기술을 기반으로 한 FXGear 자체 소프트웨어로 구성되어 있습니다.

 

증강현실 거울이라는 솔루션이 그 전에 존재하지 않았던 새로운 형태이기 때문에, 이미 규정된 사용자 인터페이스가 없는 상황이었습니다. 저와 디자인 팀은 실제 사용자들로부터 제기된 인터페이스 관련 이슈들을 파악하고 해결하는데에 초점을 맞추었습니다.

COLLABORATED WITH..
HOW IT WORKS

FXMirror에 본인의 신체를 인식시킨 후, 사용자는 다양한 제품을 가상으로 시착해볼 수 있습니다. 시착 이후에는 해당 매장에서 혹은 온라인 구매가 가능하도록 했습니다.

FXMirror는 카메라에 비친 사용자의 모습을 분석하여 가상의 골격을 구축합니다. 이를 기반으로 사용자의 신체를 3D로 그려내고, 그 위에 준비된 가상 의류들을 입어볼 수 있게 합니다. 사용자는 셔츠/티셔츠/치마 등 카테고리별로 제품을 시착해볼 수 있고, 다양한 제품들을 조합하여 코디해볼 수 있습니다. 사용자가 맘에 드는 제품을 발견하면 매장 혹은 온라인에서 해당 제품을 직접 구매할 수 있고, 가상으로 입어본 본인의 모습을 SNS에 공유할 수도 있습니다.

SITUATION

출시 이후 실제 사용 환경과 사용자 피드백을 바탕으로 인터페이스를 좀 더 세밀하게 개선할 필요가 대두되었습니다.

최초의 제품은 증강현실 디지털 거울로서의 실행가능성과 기능성을 입증하는데에 집중했습니다. 제품이 좀 더 보급되고, 더욱 다양한 고객들이 사용하게 되면서, 그 전에는 파악하지 못했던 문제점들이 드러나기 시작했습니다. 상점을 방문하는 소비자들과 매장 직원 양쪽 모두 FXMirror의 기능과 사용법을 익혀야 했기 때문입니다. 세일즈팀과 고객관리팀의 피드백을 종합하여, 사용자 경험을 개선하기 위해 인터페이스 문제들을 해결해야 한다는 결론에 이르렀습니다.

CHALLENGE - OUTCOME

#1: ‘선택’을 위한 입력 방법 (증강현실 디지털 거울에서의 ‘클릭’은 무엇일까?)

FXMirror를 사용할 때에 사용자들은 몇 미터 떨어진 곳에 서서, 화면을 터치하거나 다른 입력 장치를 사용하지 않고 선택, 스크롤 등의 입력을 수행해야 합니다. 그래서, FXMirror를 위한 이상적인 입력방법을 디자인하기 위하여 아래와 같은 사항을 고려했습니다.

  • 손가락 대신 손을 사용할 것 (한 손 혹은 양손 모두): 수 미터 떨어져 있는 사용자와 복잡성을 예측하기 힘든 배경을 고려할 때, 인식의 정확성을 높이려면 손가락 보다는 손을 사용해야 할 것이다.

  • 손가락으로 화면을 터치하는 인터랙션과 유사할 것: 지나가는 쇼핑객 모두에게, 매장 직원이 미러 사용법을 가르쳐주는 것은 불가능하다. 하지만 이미 대부분의 사람들은 ‘화면을 터치’하는 방식의 UI에는 익숙한 상태이다.

 

  • 선택을 하는 행위와 아닌 행위를 구분할 수 있을 것: 터치와는 달리, 카메라 영상에는 사용자의 손이 항상 나타나 있게 된다. 이 손이 무언가를 선택하고 있는 것인지, 그냥 있는 것인지 구분할 수 있어야 한다.

 

  • 포인터/커서가 몇 미터 떨어진 화면에서도 구분 가능해야 하며, 복잡한 배경 위에서도 잘 드러나야 한다.

IDEATION - Cursor
IDEATION - Cursor hover
IDEATION - Cursor hover duration
0.5s
0.8s
1.1s

디자인팀 내부 논의를 거쳐 양손 각각을 따라다니는 커서를 두기로 결정했습니다. 저는 커서의 모양을 그림자가 있는 원형으로 디자인했습니다. 화살표 모양 커서가 일반 사용자들에게 가장 익숙하지만 멀리서도 식별가능하려면 필요 이상으로 커져야 했고, 뾰족한 화살표가 거대하게 움직이는 모습은 시각적으로 불편함을 자아냈습니다. 게다가, 뾰족한 끝이 필요할 정도로 정교한 입력이 필요 없는 상황이었기에 원형 커서를 선택했습니다.

저는 또한 포인터 둘레로 돌아가는 진행상태 원(circle)을 추가했습니다. 이를 통하여, 사용자는 어떤 아이콘이 선택가능한 UI 요소인지 인지할 수 있고, 동시에 그 아이콘을 선택할지 결정할 수 있도록 짧지만 충분한 시간을 줄 수 있게 되었습니다.

CHALLENGE - OUTCOME

#2: 사용자의 키에 반응하는 그래픽 유저 인터페이스

사용자가 카메라 앞에 서서 사용하는 미러의 특성 상, 키에 따라 미러 안에서 닿을 수 있는 인터페이스의 범위가 정해졌습니다. 더욱 다양한 패션 브랜드로 진출하면서, 아동복 라인이 있는 몇몇 브랜드와도 작업을 같이 하게 되었습니다. 사용자가 아동일 경우를 고려하여, 사용자의 신장과 그에 따른 접근가능 영역에 맞춰 UI 요소들이 배치되어야 한다고 판단했습니다. 양 팔을 뻗었을 때에 닿는 영역을 성인과 어린이로 구분하여, 사용자의 키에 맞추어 윗쪽의 UI 요소들이 적절히 재배치될 수 있도록 디자인을 개선했습니다. 그 결과 어린이들도 원활하게 미러를 사용할 수 있었습니다.

성인용 인터페이스
어린이용 인터페이스
성인용 인터페이스
어린이용 인터페이스
쉽게 닿을 수 있는 범위
손을 뻗어 닿을 수 있는 범위
닿기 힘든 범위
CHALLENGE - OUTCOME

#3: 최초 스캔 정확도 향상을 위한 시각적 장치 (nudge)

FXMirror의 카메라가 첫번째 신체 스캔을 정확히 하기 위해서는 사용자가 몸통에서 팔다리를 살짝 띄워주어야 합니다. 팔다리가 몸통에 붙어있는 경우, 부정확하게 측정되거나, 재측정을 요구하게 됩니다. 기존의 버전에서는 텍스트 메세지와 함께 간단한 일러스트를 보여주고 있는데, 이것만으로는 팔다리를 서로 띄워야 하는지 불분명했습니다. 저는 사람이 팔다리를 펼치는 간단한 애니메이션을 추가함으로써 시각적인 넛지(nudge)를 주고자 했습니다.

이 업데이트 덕분에 자세로 인한 신체 측정 오류가 크게 줄어들었습니다. 또한, 이를 통해 본인의 신체가 좀 더 정확히 측정되면서 가상 피팅이 더 정확하게 이루어지게 되고, 사용자 경험이 개선되는 효과를 얻을 수 있었습니다.

AS-IS

팔다리를 벌려야 한다는 것이 명확하게 전달되지 않았음

TO-BE

측정 전에 팔다리를 하나씩 펼치는 간단한 애니메이션으로 시각적 넛지를 추가함

Thank you for watching :)

© 2020 Yeonkyung Kim