생동감을 표현하는 인터랙션, 자이로 센서
기다려지는 라이브 편성표 UI 디자인
작년 6월, 예정된 라이브를 모아보고 알림 신청을 할 수 있는 라이브 편성표를 런칭했습니다.
프리즘 프로덕트 디자인팀은 즐거운 쇼핑 경험을 위해 인터랙션을 적극적으로 사용하고 있습니다. 이번 편성표에서는 전혀 새로운 시도를 했습니다.
그동안 커머스 서비스에서는 볼 수 없었던 자이로 센서를 활용해 UI를 디자인했습니다. 런칭 후 많은 분들이 “너희 왜 이렇게까지 했어?”라며 놀라워했고, “어떻게 했어?”라는 질문이 이어졌습니다.
PRIZM LIVE Schedule
프리즘 라이브는 고해상도, 고감도로 브랜드와 상품을 사용자에게 전달합니다. 처음 편성표를 기획하며 이런 특별함을 잘 담고 싶었습니다. 먼저 네 가지 큰 목표를 세웠습니다.
첫째, 예정된 라이브 일정을 보고 알림 신청을 쉽게 할 것
둘째, 베네핏, 체크인 같은 프로그램 브랜딩이 선명하게 보일 것
셋째, 사용자에게 라이브의 생생함과 생동감을 전달해 기대감을 줄 것
마지막으로 운영 부담을 최소화할 것
홈 피드의 동영상이 운영 공수가 꽤 큰 편입니다. 그래서 정적인 이미지를 재사용하면서, 생동감까지 줄 수 있는 방법을 고민했습니다.
생동감을 전달하는 자이로 센서
프로그램 포스터 한 장에 생동감을 담아 사용자에게 기대감을 주고 싶었습니다.
Parallax Effect는 이미지가 각각 다른 시차를 가져 깊이를 느낄 수 있는 효과입니다. 스크롤을 사용하면 한 방향으로만 움직이지만, 자이로 센서*는 내 실제 움직임에 반응하며 6가지 축을 사용할 수 있습니다.
그동안 서비스를 만들면서 하드웨어 센서 활용은 선택지에 없었습니다. 시간이 부족했고, 굳이 필요가 없으니까요. 하지만 구현 방법에 제약을 두지 않으니, ‘생동감’이라는 고민이 해결되었습니다. 이미지가 나와 함께 움직인다면, 살아있다는 것이 온몸으로 느껴질 것 같았습니다.
*자이로 센서(Gyro Sensor)는 자이로스코프라는 하드웨어 센서로 iPhone 4에서 처음 사용됐습니다. 카메라 손떨림 방지 기술이나 폰을 흔들어서 티켓 팝업을 띄우는 UX에도 자이로 센서가 사용됩니다.
개발팀도 눈이 반짝였습니다(착각이었을까요). B2C 서비스에서 하드웨어 센서를 사용하는 건 흔치 않은 일입니다. 재밌겠다, 새롭다,라는 반응을 보이며 적극적으로 기술 검토를 하고, 함께 구현해 보기로 했습니다.
튼튼한 UI 구조
편성표 카드 UI를 멋진 포스터로 구현하기 위해 1024 x 1366의 고해상도 이미지 2장과 Lottie 로고를 사용했습니다. 가독성을 위한 Background Blur와 프로그램 브랜드 색상 Gradient Mask로 구성했습니다.
레이어가 여러 겹 있다 보니 날짜 순서로 나열된 피드가 부드럽게 스크롤될 수 있도록, 개발팀에서 최적화를 위해 성능 개선에 공을 들였습니다. Lottie 재생 시점, 이미지 사이즈를 여러 가지로 테스트하며 마지막까지 꼼꼼하게 다듬었습니다.
반경을 고려한 운영 디자인
자이로 센서가 적용되는 이미지는 UI 프레임보다 커야 합니다. 의도한 움직임 반경에 맞춰 레터박스에 잘려 보이지 않도록 이미지 크기를 정합니다. 큰 움직임을 의도할수록 더 큰 이미지가 필요합니다. 저희는 최대 20%까지 움직임을 의도해 어드민에 등록된 이미지를 클라이언트에서 120%로 불러옵니다.
리소스 디자인을 할 때 중요한 정보는 레터박스에서 잘 보이도록, 120% 크기와 움직임 반경을 고려해 작업하고 있습니다.
기준이 되는 축과 움직임 반경 구현
자이로 센서의 원리는 회전하는 팽이와 비슷합니다. 팽이가 회전할 때 회전축은 항상 지면과 수직방향으로 유지되는데요. 이와 유사하게 자이로 센서에도 회전 시 일정하게 유지되는 축이 존재하여, 물체의 기울기를 측정할 수 있습니다.*
자이로 센서의 회전축은 사용자가 PRIZM 앱을 처음 여는 시점이 기준이 됩니다. 이 절대 축 영점을 잡는 것이 꽤 까다로웠다는 개발팀의 후기가 있었습니다. 누워서 폰을 하는 현대인까지 고려한 모바일 개발팀 존경합니다 :)
Brown (Android 개발자): 누워서 영점 잡았다.. 누워서 개발한 건 처음이다.
Ray (iOS 개발자): 결혼이 코 앞이었는데 이거 하느라 결혼 못 할 뻔했다.
우리 눈은 3D 세상을 2D로 망막에 맺히고, 거기서 읽은 깊이에 대한 정보로 다시 3D 세계로 인식합니다. 시각 심리학 중 운동 시차(Motion parallax)는 단안 단서(Monocular cues)를 통해 우리 눈이 사물의 깊이를 빠르게 이해할 수 있도록 합니다. 가까이 있는 물체는 멀리 있는 물체보다 더 빨리, 더 많이 움직이는 것처럼 보입니다. 우리가 움직이는 차 안에 앉아 밖에서 지나가는 것을 지켜볼 때와 같습니다.*
이를 적용해 편성표에서는 첫 번째 이미지 20%, 두 번째 이미지 10%로 움직임 반경 차이를 주었습니다.
BX디자이너는 이런 원리를 이미지마다 다양하게 테스트하며 깊이감이 느껴지도록 고민하며 작업하고 있습니다.
Sony (BX디자이너): 이제는 어떤 이미지를 봐도 배경과 피사체가 분리되어 보인다. 자체 3D 안경 탑재하게 된 것 같다.
기다려지는 라이브
지금 사용된 이미지 2장 외에 이미지를 더 추가해 훨씬 다이내믹한 효과를 주려고 합니다. 개발팀과 구현할 때부터 여러 장 이미지나 동영상까지 고려해 구조를 설계했습니다.
어릴 때 팝업 카드를 열면서 눈이 휘둥그레졌던 경험이 있습니다. 톡 튀어 오르며 느껴지는 생생한 감각에 이미 마음이 들떠서 내용은 읽지 않고도 잔뜩 설레고 기대가 되었습니다. 우리 사용자들도 편성표를 둘러볼 때 다가올 라이브가 기다려지면 좋겠습니다.
참고: 안드로이드 Developer - 동작 센서 - 자이로스코프, Apple Developer - Gyro sensor, Apple Developer - Creating Layered Images, iPhone 4's new gyroscope, 물체의 방위 변화를 인지하는 ‘자이로 센서(Gyro sensor)’, How does a Gyroscope Sensor work in your smartphone?, How do 3D movies work?, Biology/Electronics-Depth perception and 3D movie
이 글은 PRIZM Design 브런치에도 발행되었습니다.
