가벼움을 디자인하는 법
사용자 경험의 기본, 가볍고 쾌적한 플랫폼
PRIZM은 고감도 콘텐츠로 브랜드와 상품을 매력적으로 전달하는 서비스입니다. 더 생생하고 즐거운 경험을 위해, 다른 서비스보다 라이브를 고해상도로 방송하고 콘텐츠에서도 인터랙션으로 생동감 있는 경험을 전달하고 있습니다. 디자인실에서는 시각적으로 유려한 영상, 이미지, 모션을 서비스에서 구현하고 있습니다.
좋은 사용자 경험, 가벼운 플랫폼에서부터
애니메이션과 고해상도 리소스가 많으면 로딩이 길어지고 크래시율과 앱 용량이 커집니다. PRIZM 프로덕트팀은 서비스의 퀄리티를 유지하는 것을 최우선으로 두고, 여러 최적화를 진행했습니다. 그 결과 앱 용량은 44.8MB로 매우 가볍습니다.
혁신적이고 멋진 서비스의 기본은, 사용자가 서비스를 쾌적하고 부담 없이 즐길 수 있어야 합니다.
서비스 구축 단계부터 가벼운 플랫폼은 PXD Unit의 중요한 원칙이었습니다. 사용자가 온전히 플랫폼 안에서 콘텐츠를 즐기고, 마음껏 상품을 탐색할 수 있도록 돕는 기본이지만 놓치기 쉬운 디테일이기도 합니다.
쾌적한 사용자 경험의 중요한 기본, PRIZM에서 가벼움을 디자인하는 방법을 소개합니다.
PRIZM 앱 용량: 44.8MB (22. 7월 App Store/Google Play:18.7MB)ONLY Vector
모든 리소스는 Vector 포맷만 사용합니다.
PRIZM은 브랜드가 가진 색깔과 스토리를 매력적으로 전달하는 플랫폼입니다. 이를 위해 200여 개가 넘는 브랜드 로고를 원형 그대로 보여줍니다. PNG 포맷 대신 SVG 포맷을 적용하면서 더 작은 용량으로 다양한 크기를 적재적소에 사용하고 있습니다.
브랜드 페이지, 상품 카드, 헤더 등 다양하게 로고 SVG를 노출하며 브랜드의 개성을 전시합니다.
운영상 명확한 가이드도 함께 제공합니다. 코드로 그려지는 SVG는 깔끔한 선과 점의 개수를 줄이는 별도의 작업과 검수를 하고 있습니다.
Dark Mode에서 모든 Vector는 White 색상으로 전환되는데, 이때 코드로 간단하게 일괄 변경할 수 있도록 Style 지정 코드에서 에러가 없도록 꼼꼼하게 챙기고 있습니다.
애니메이션도 ONLY Vector
프로덕트를 디자인을 할 때 보이지 않는 마이크로 인터랙션을 중요하게 생각합니다. 구현은 Lottie를 사용하는데, 제작 시 이미지 포맷 없이 Vector로만 작업하는 것을 원칙으로 합니다.
적은 용량을 위해 애니메이션 재생 시간도 매우 짧게 통일했습니다. 서비스 내에 노출되는 방송 프로그램 로고 모션을 모두 1.5 sec으로 맞추어 재작업하였습니다.
강약 조절, Splash Video
경량화가 중요하다고 해서, 퀄리티를 포기하는 건 아닙니다. 다른 리소스를 경량화하여 힘을 뺀 대신, 스플래시에 다른 곳에선 시도하지 않았던 영상으로 PRIZM만의 매력을 담았습니다. 첫 런칭하는 서비스인 만큼 사용자에게 강한 첫인상으로 기대감을 주고, 브랜딩 입지를 다지고자 했습니다.
영상 용량은 0.47MB입니다. 아이콘 전체 0.33MB, Lottie는 전체 0.37MB에 비하면 하나의 리소스에 많은 용량을 차지하지만, 힘을 주어야 할 곳에 배분한 전략입니다. (Android에서 내부 리소스를 포맷별로 구분해서 확인할 수 있습니다.)
실제 런칭 후, 앱 리뷰에서 스플래시만으로 PRIZM 서비스의 기대감을 느낀 사용자들이 많았습니다.
레거시 예방법, 디자인 시스템(PDS)
디자인 시스템은 업무 효율 장점 외에, 레거시와 파편화를 예방하는 훌륭한 방법입니다. 디자인과 개발실 사이에서 잘 구현된 디자인 시스템은 디자인 및 코드 레거시를 예방해 가벼운 서비스를 만드는 기반이 됩니다.
PRIZM은 디자인 시스템(PDS: PRIZM Design System)을 서비스 초기부터 구축했습니다. 디자인실, 개발실 모두 디자인 시스템으로 구현되어 런칭 후 지금까지 파편화 없이 iOS, AOS, FE 개발실과 디자인실이 싱크를 잘 맞추며 만들고 있습니다.
새로운 기능을 만들거나 기존 기능을 고도화할 때도, 기존 컴포넌트를 재사용하고 확장하면서 새로운 컴포넌트 제작을 최소화하고 있습니다.
PDS: PRIZM Design System 일부퀄리티를 지키는 인코딩, 디코딩 정책
22. 5. 22 이사배 PRIZM BOX LIVEPRIZM은 남다른 라이브와 콘텐츠를 사용자에게 전달하기 위해, 이미지와 영상의 해상도를 최대한 높여 다른 곳에서 느끼지 못한 경험을 전달하고 있습니다.
메인 탭에서 동영상 피드가 부드럽게 스크롤되고, 실시간 라이브 스트리밍이 높은 퀄리티로 보이는 수면 아래에는 개발실과 함께한 수많은 인코딩, 디코딩 테스트가 있었습니다.
해상도와 프레임, 비트레이트를 각각 조절해 테스트하며 높은 퀄리티와 낮은 용량의 선을 찾았습니다.
커머스 특성상 매우 긴 상품 상세 이미지도 대응했습니다. 서버에서 자체적으로 1440px로 잘라서 내려주기 때문에 한 번에 긴 이미지를 불러올 때보다 로딩 속도가 현저히 빨라졌습니다.
죽을 확률, 0.03%
앱 전체 용량에서 리소스가 차지하는 비율은 대략 20% 정도입니다. 이번에 자세한 비율을 확인하면서, 실제로 용량을 더 줄일 수 있는 부분도 파악되어 개선 여지를 확인할 수 있었습니다.
플랫폼이 쾌적한 지는 실제 앱 크래시 비율로 확인할 수 있습니다. PRIZM 앱 크래시율은 0.03%로, 앱을 사용하면서 죽어버리는 경우는 없다고 봐도 무방합니다.
앱 크래시율: iOS 0.03% / AOS 0.04% (최근 30일간 / 2022. 7월 기준)서비스가 추구하는 고감도의 퀄리티를 쾌적하게 보여줄 수 있도록, 구현 단계에서 가장 부담이 적은 방법을 디자인실과 개발실이 밀접하게 소통하고 있습니다. 디자인실에서는 ‘영상은 무조건 고퀄로 보여야 해요'라거나, 개발실은 ‘구현 문제가 너무 큰데요'라고 단정 지어 얘기하지 않습니다. 가장 좋은 콘텐츠를 사용자에게 전달하자, 라는 같은 목표 아래 디자인 단계, 개발 구현 단계에서 고민하고, 꼼꼼하게 정책을 만들고 있습니다.
앱 용량이나 리소스 최적화는 디자인팀이 신경은 쓰지만 중요한 미션으로 챙기기는 쉽지 않습니다. 우리가 좋다고 느끼는 공간은 동선도 부담이 없고, 무엇보다 쾌적합니다. 그 좋은 감정을 서비스 경험으로 녹이기 위해 PRIZM 디자인실은 사용자가 쾌적한 공간에서 가벼운 마음으로 콘텐츠를 즐길 수 있도록 보이지 않는 디테일을 항상 고민하고 있습니다.
참고: Reduce APK size(Android developer), Reduce APK size(Apple developer), How to reduce and optimise the iOS App Size?, Youtube 라이브 스트림
Written by Summer(Bomi Sa) | Product Design
Illustration by Gigi(Gio Choi) | Content Design
ⒸPRIZM
