'프리즘' 서비스 디자인 분석
2023 레드닷 어워드 수상작 프리즘
현대 디지털 시대에서, 소비자들은 온라인 콘텐츠와 상호작용하면서 지나친 텍스트와 긴 설명으로 인한 피로감을 자주 경험하곤 한다. 이에 따라 간결하고 시각적으로 매력적인 미디어에 대한 선호가 높아지고 있고, 이러한 추세는 앱 디자인에도 반영되고 있다.
특히 프리즘은 이러한 필요성을 효과적으로 충족시키고 있으며, 직관적이고 사용자 친화적인 인터페이스를 통해 사용자의 정보 소비 과정을 간소화하고, 효율적이며 즐거운 경험을 제공한다.
구글 플레이스토어 스크린샷 / https://play.google.com/store/apps/details?id=com.rxc.prizm&hl=ko&gl=US프리즘은 사용자가 직관적으로 이해할 수 있는 고해상도의 시각적 콘텐츠를 중심으로 한 E-커머스 플랫폼이다. 프리즘은 소비자의 취향에 맞춘 독특한 브랜드를 선별적으로 제공함으로써, 단순한 쇼핑을 넘어서 브랜드 가치와 철학을 경험하는 공간을 마련하고 있다.
고급스러운 쇼핑 경험을 제공하고자 하는 프리즘의 목표는 사용자 친화적인 소셜 및 라이브 기능을 통해 사용자의 몰입감을 높이고, 상호작용을 강화하는 데에 있다.
프리즘의 디자인은 영상 중심의 서비스임에도 불구하고 매우 깔끔하고 경량화된 구조로 사용자 경험을 극대화하고 있다. 적은 용량으로 서비스를 최적화시켜, 사용자는 쾌적한 환경에서 서비스를 이용할 수 있으며, 영상 기반의 특성을 살려 텍스트로부터 오는 시각적 피로감을 최소화하고, 각 스크린 진입 시 새롭고 매력적인 경험을 선사한다. 이는 텍스트 중심의 복잡한 설명을 벗어나 영상과 간결한 설명을 통해 브랜드와 소비자 간의 원활한 연결을 도모하는 접근 방식이라 볼 수 있다.
이번 장에서는 프리즘의 돋보이는 신선한 요소들을 살펴보며, 그 속에서 서비스 디자인이 사용자들에게 좋은 여정을 선사하고 있는지에 대해 탐구해 보려 한다.
01
Splash
스플래시 화면은 서비스의 첫인상을 결정짓는 중요한 요소다. 프리즘은 이 점을 명확히 인지하고 스플래시 화면 디자인에 상당한 노력을 기울였음을 느낄 수 있었다.
사용자가 프리즘으로부터 받은 상자를 열듯이 시작되는 영상은 프리즘 로고가 나타나면서 i 속으로 들어가는 듯한 효과로 서비스로의 자연스러운 이동을 연출했다. 이 과정은 부드러운 애니메이션으로 구현되어 서비스 체험 전 이미 긍정적인 인상을 남기며, 최적화된 용량과 빠른 로딩은 사용자 경험을 더욱 향상하고 있다.
(영상 용량이 0.47MB라고 한다.)
02
Home-물리적 특성을 고려한 인터렉션
프리즘의 홈 화면 진입 후 사용자는 스플래시 화면의 긍정적 경험을 이어받아 깔끔하고 일관성 있는 메인 배너와 섬세하게 디자인된 브랜드 탭 버튼을 마주하게 된다.
메인 배너는 이미지가 아닌 영상 기반이며 다양한 영상과 역동적인 움직임 속에서도 텍스트의 가독성이 떨어지지 않게 처리한 모습을 확인할 수 있었다. 하지만 메인 배너의 위치를 알려주는 페이지 컨트롤의 원이 너무 많이 노출되고 있어, 답답한 느낌을 주고 있다.
해당 페이지 컨트롤 부분을 휴먼 인터페이스 가이드라인에서 제시하는 가이드를 따르면 좋을 거 같다.
에어비앤비 / 인스타그램 예시Human Interface Guidelines page-Controls
페이지 컨트롤은 목록에 대한 추가 정보를 제공하기 위해 표시기의 모양을 조정할 수 있습니다. 예를 들어 컨트롤은 현재 페이지의 표시기를 강조 표시하므로 사람들은 목록에서 페이지의 상대적 위치를 추정할 수 있습니다. 공간에 맞는 것보다 표시기가 더 많은 경우 컨트롤은 양쪽의 표시기를 축소하여 더 많은 페이지를 사용할 수 있음을 제안할 수 있습니다.
https://developer.apple.com/design/human-interface-guidelines/page-controls
또한, 메인 배너 하단의 브랜드 탭 버튼은 원의 물리적 특성을 고려한 인터렉션이 부여되어 있었다.
원은 통통 튀기도 하고 중력에 의해 떨어지는 등의 특성을 갖고 있다. 프리즘은 다양한 물리적 특성 중 원이 구르는 특성에 초점을 둬 우측에서부터 좌측 마진 영역까지 탄성 있게 굴러들어 오는 연출을 통해 실제로 기존 보다 CTR을 5배나 상승시켰다고 한다.
Gif로 만드는 과정에서 뚝뚝 끊기는 느낌이 있지만, 실제 어플은 매우 자연스러움.03
Schedule-이미지의 생동감
서비스 디자인을 면밀히 조사하던 중, 프리즘의 스케줄 스크린에 접근했을 때의 놀라운 경험을 하게 됐다.
흔히 보는 서비스와는 달리, 프리즘의 이미지들은 사용자의 핸드폰 각도에 반응하여 마치 실제로 움직이는 듯한 효과를 제공하고 있었는데, 이는 *자이로 센서를 활용하여 보다 생동감 있고 몰입도 높은 사용자 경험을 실현하는 프리즘의 혁신적인 디자인 접근 방식의 일례이다.
기술적인 실행 능력과 사용자 중심의 디자인 철학이 결합하여 이전에는 경험하지 못한 새로운 차원의 인터랙션을 선사하며, 해당 경험은 라이브 방송을 기다리는 사용자들에게 기대감을 줄 수 있으며, 텍스트, 버튼 등의 가시성도 저하되지 않으며 기술을 구현해 낸 좋은 밴치마킹 사례다.
(*자이로 센서: 회전하는 물체의 역학운동을 이용한 개념으로 위치를 측정하고 방향 설정 등에 활용되는 기술)
04
브랜드 상세페이지
프리즘에서 소개하는 브랜드들의 상세페이지에 들어가면 각 브랜드 컬러에 맞춰 서비스 디자인을 설계한 것을 확인할 수 있다. 프리즘 아이덴티티에 맞게 브랜드는 영상을 기반으로 소개되며, 영상 또한 고퀄리티로 구현되어 있다. 또한 역동적인 영상 속에서 로고 프로필, 네임, 팔로잉 버튼이 그라디언트를 활용해 가시성을 확보한 것을 확인할 수 있었다.
하지만 상단에서의 좋은 경험이 브랜드와 프로모션, 정보 등을 설명하는 텍스트까지 이어지진 못했다.
실제 클론 디자인을 통해 확인해 본 결과 프리즘은 각 운영 체제에 적합한 시스템 폰트를 적용하고 있었다. 내가 사용한 안드로이드에서는 Noto Sans CJK KR과 Roboto 폰트를 사용하고 있는데, 특히 폰트 크기가 10~12dp로 설정되고 행간이 매우 좁게 조정되어 있어 전반적인 가독성이 저하된 것을 확인할 수 있었다.
이는 브랜드 상세페이지뿐만 아니라 다른 스크린에서도 동일한 문제로 나타났다. 텍스트의 크기와 행간을 통한 가독성 확보는 서비스의 완성도와 사용성을 결정짓는 중요한 요소이다. 따라서 프리즘에서 현재의 긍정적인 사용자 경험을 바탕으로 텍스트 부분에 더 신경을 쓴다면, 더욱 완성도 높은 디자인을 선보일 수 있을 것이라 생각한다.
이번 클론 스터디와 브런치 글 작성을 시작하게 된 계기는 브런치 작가 'Summer Bom'님의 글을 읽고 시작하게 되었다. 글을 읽으면서 프리즘 서비스에 대해 알게 되었고, 디자인이 정말 치밀하고 사용자에게 쾌적한 경험을 선사하기 위해 많은 노력이 들어갔음을 확인할 수 있었다.
이 글은 Summer Bom님의 분석을 바탕으로 프리즘의 디자인을 살펴보았다. 인터렉션 디자인과 설계 과정에 대한 더 깊은 이해를 원하는 분들은 작가님의 글을 읽어보면 좋을 거 같다.
참고 자료
다운 링크
플레이스토어
앱스토어
