2초, 시작과 끝이 연결되는 순간
프리즘의 스플래시 스크린 제작기
PRIZM은 고감도 콘텐츠로 브랜드와 상품을 매력적으로 전달합니다. 가장 생생하고 즐거운 경험을 위해, 타 서비스보다 고해상도 라이브 방송과 콘텐츠 인터랙션을 더 적극적으로 활용하고 있습니다. 그중에서도 유려한 영상, 이미지, 모션을 구현하는 일에 집중합니다.
어플을 실행하면 가장 먼저 접하게 되는 스플래시 스크린은 사용자에게 서비스의 첫인상을 강렬하게 심어줄 수 있는 좋은 장치입니다. 로딩 시간 동안 사용자의 이탈을 막기 위해 흔히 사용되어 왔죠. 하지만 지금은 로딩 시간이 빨라져, 사실 스플래시 스크린이 꼭 필요하지는 않습니다. 그럼에도 불구하고 사용자에게 좋은 인상과 재미를 줄 수 있다는 장점 때문에, 많은 서비스에서 여전히 스플래시 스크린을 사용하고 있습니다.
스플래시 스크린, 프리즘에서는 어떻게 활용하고 있을까요?
스플래시 스크린(Splash screen) : 애플리케이션을 구동하는데 필요한 데이터를 내려받는 시간 동안 일시적으로 보여주는 화면. 런치 스크린(Launch screen)이라고도 한다.
오프라인과 온라인의 경계를 허물다
앱 출시 전부터, 스플래시 스크린을 어떻게 활용해야 사용자들이 우리 서비스를 오래 기억할지 많이 고민했습니다. 그러다 사용자가 커머스에서 최종적으로 겪는 ‘언박싱(Unboxing)’ 경험을, 제일 처음 마주하는 화면으로 가져오면 재밌는 스토리텔링이 될 것이라는 생각이 들었죠. 배송 박스를 열고 상품을 받아보며 커머스에서의 사용자 경험이 끝나는 것이 아니라, 어플을 시작하며 오프라인에서 온라인으로 다시 연결될 수 있음을 강조하려는 의도였습니다.
언박싱을 이용한 프리즘의 스플래시 스크린은, 온라인 경험과 오프라인의 경험의 경계를 허물고 연결시키는 하나의 ‘다리’라고 할 수 있습니다. 온/오프라인 모두 일관되게 만족스러운 경험을 제공하겠다는 프리즘의 포부를 담은 셈이죠.
3D를 선택한 이유
많은 서비스들은 보통 스플래시 스크린에서 간단한 로고 플레이 정도만 활용합니다. 그중 상당수는 애니메이션 없이 단순히 나타났다가 사라지기만 할 뿐이죠. 하지만 저희는 이와 다르게 제작하기로 했고, 앞서 정한 스토리텔링을 가장 잘 표현하기 위해 3D 애니메이션을 선택했어요. 박스가 열리고 그 속으로 들어가는 모션을, 2D로 표현했을 땐 입체감이 떨어져 사용자 시점을 완벽히 구현할 수 없었기 때문입니다. 그래서 3D 애니메이션을 이용해 테이프가 뜯어지고 배송 박스가 열리며 그 속으로 들어가는, 사용자 시점의 역동적인 연출을 만들어 냈습니다.
실제 프리즘의 배송 박스
프리즘 배송 박스 3D 모델링박스는 실제로 저희 프리즘에서 사용 중인 배송 박스와 테이프를 3D로 재현했습니다. 프리즘에서의 온/오프라인 경험을 최대한 자연스럽게 연결시키려면 실제 프리즘에서 발송하는 배송 박스를 이용해야 했기 때문이죠. 이 배송 박스에는 프리즘의 아이덴티티인 ‘디스톨트(Distort)’가 가장 잘 담겨 있습니다. 프리즘은 이름 그대로 여러 브랜드를 다양한 시각으로 조명합니다. 마치 빛이 프리즘을 투과하면 여러 갈래로 갈라지듯이 말이죠. 그렇기 때문에 프리즘의 디자인 아이덴티티에서 디스톨트 효과는 매우 중요합니다. 이러한 효과는 프리즘 배송 박스의 측면 그래픽과 박스테이프 등 배송 박스 디자인 전반에 녹아 있습니다. 쉬운 작업은 아니었지만, 저희는 이 배송 박스를 3D로 재현하기로 결정했습니다.
스플래시 스크린을 구상하면서 다양한 연출법 사이에서도 많이 고민했습니다. 박스의 측면이 박스의 윗면보다 시각적으로 볼거리가 많았기 때문이죠. 측면에 비해, 윗면은 상당히 밋밋한 느낌이었습니다. 하지만 결국 윗면에서 시작해 안으로 들어가는 버전을 선택했습니다. 스플래시 스크린에서 강조하고 싶었던 온/오프라인의 연결, 실제로 언박싱을 하고 그 속으로 들어가는 듯한 느낌을 주려면 사용자 시점에 가까운 윗면부터 시작해 안으로 들어가야 했기 때문이죠.
이를 보완하고자 실제 박스에는 없는 운송장 스티커를 모델링에 추가했습니다. 흔히 볼 수 있는 운송장 디자인이 아니라 프리즘만의 차별화된 운송장 디자인을 따로 제작해서 적용했어요. 그랬더니 더욱 실제 배송된 박스 같은 느낌이 완성되었죠.
그 외에도 실제 박스와 비교해 봐도 손색없도록, 골지의 텍스처나 테이프의 반투명 표현 등을 실제처럼 구현하는 데 많은 공을 들였습니다. 여러 번의 테스트를 거치며 섬세하게 작업을 진행했죠. 심지어 더 실제 같은 느낌을 주기 위해 종이의 구김, 그림자의 선명도, 테이프가 뜯기는 각도와 방향까지 신경 썼습니다. 결과적으로 박스의 퀄리티가 좋아졌고, 실제로 언박싱을 하는 듯한 자연스러운 애니메이션을 만들어냈습니다.
더 부드러운 60fps로
우리가 온라인에서 접하는 대부분의 영상은 30fps로 제작됩니다. 왜냐하면 30fps가 가볍고 시스템에도 부담이 없기 때문이죠. 하지만 프리즘은 사용자에게 영상으로 최상의 디테일을 전달할 수 있도록 60fps를 선택했고, 대신 다른 리소스들을 경량화하여 용량을 조절했습니다. 1초에 60장의 이미지가 사용되기 때문에 더 부드럽고 자연스러운 느낌을 받을 수 있습니다. 일부 사람들은 40fps 이상부터는 큰 차이를 느끼기 어렵다고도 말합니다. 하지만 프리즘은 이런 작은 차이들이 모여 큰 차이를 만든다고 믿기 때문에 섬세한 디테일 하나까지도 포기하지 않습니다.
fps(Frames Per Second) : 1초 동안 보여주는 프레임의 수어느 디바이스에서나 완벽하게
세상에 다양한 모바일 기기가 존재하는 만큼 모든 디바이스에서 스플래시 스크린이 문제없이 적용될 수 있어야 합니다. 이런 점들을 항상 염두에 두고 어떤 기기에서든 잘 구동되는지, 시각적인 문제는 없는지 확인해 보는 것은 모바일 관련 작업에서 매우 중요한 부분입니다. 단순한 로고를 이용한 스플래시 스크린이라면 적용이 간단하지만 저희는 연출이 포함된 영상을 이용하기 때문에 크롭하는 작업이 꽤 까다로웠죠. 디바이스 별로 스플래시 스크린을 다르게 적용하는 것은 불가능하기 때문에 제작 과정에서부터 여러 기기에서 크롭 되는 부분을 확인해 보고 다양한 화면을 아우를 수 있는 가장 적절한 위치와 비율을 선택해 제작했습니다.
지금까지 스플래시 스크린에 대해 프리즘이 접근한 방법을 소개했습니다. 위에 소개한 내용과 같이 우리 서비스만이 가질 수 있는 차별점, 지금까지 남들이 시도하지 않았던 것들을 매 프로젝트마다 고민하면서 끝없이 도전하고 있습니다. 앞으로 선보일 PRIZM의 모습도 많이 기대해 주세요.
Written by Yan(Yeonsu Ahn) | Brand Design
Photo by Kay(Uk Young Lee ) | Media
ⒸPRIZM
