UX Design Pattern#3_Splash Screens_실용이냐 멋이냐

이번의 주제는 Splash Screen이다. 1~2초에 불과한, 이 참을 수 없이 가벼운 존재에도 다양한 존재 방식이 존재한다는 걸 알고 나면, 아, 이 바닥에선 무엇 하나 '그냥' 만들 수 있는 게 없구나라는 생각을 하게 될 것이다.

Splash Screens Go Home!

UX계의 독단적 엘리트 답게 애플은 splash screen을 사용하지 말고 대신 '앱의 첫 화면과 가장 유사한 launch image를 사용할 것'을 권고한다. Launch image는 우리가 익히 알고 있는 그 splash screen과는 전혀 다르다. 그것은 이미지라고도 볼 수 없는, 그냥 순수한 UI frame이다. 

  

흰 배경 위에 녹색 타이틀바. 이것이 바로 launch image다(Vine)

애플은 앱의 첫 화면이 단순히 예쁜 로고나 타입페이스(typeface)를 뽐내는 곳이 아니라는 생각을 하는 것 같다. Launch image를 써야 하는 이유는 매우 실용적이다. 애플은 launch image가 '유저가 느끼는 로딩 시간을 더 짧게' 만든다고 주장한다. 

"Display a launch image that closely resembles the first screen of the app. This practice decreases the perceived launch time of your app"

사람들은 애플을 단순히 예쁜 디자인을 하는 회사로 생각하는 경향이 있는데, 이런 걸 보면 우리가 생각하는 디자인과 애플의 디자인이 얼마나 다른지 알 수 있다. 실제로 나는 모 전자회사를 다니던 시절 그 다름의 파괴력을 느낄 수 있었는데, 새로운 코드라고는 단 한 줄도 만들기 싫어하는 개발자들이 몸소 UI실을 찾아와 launch image의 유용함을 설파하며 모든 모듈에 적용하겠다고 말했던 것이다.

솔직히 개발자 스스로 뭔가를 하겠다고 나서는 건 태어나서 처음 탄 비행기가 납치 됐는데 그 납치범의 두목이 당신의 외삼촌일 확률보다 낮은 일이다. 물론 그들은 '앱이 너무 느리게 실행된다'는 고질적 개발 이슈를 회피하기 위해 이런 일을 벌였겠지만, 나는 그 간사함을 탓하기보단 개발자의 마음을 움직이는 UX란 무엇이며, 또 그걸 만드는 사람은 과연 어떤 배경과 사고 방식을 갖고 있는지 궁금해서 참을 수가 없었다.

  

핵심은 사진 찍기다. VSCOcam

이 밖에도 애플은 '핵심 기능에 더 빨리 도달하는 것'이 중요하기 때문에 splash screen을 사용해선 안된다고 말한다. VSCOcam은 이런 권고를 철저하게 받아들인 경우다. 아주 뛰어난 GUI 디자이너를 가졌음에도 결코 휘황찬란한 splash screen을 만들지 않은 그들의 인내심이 존경스럽다. 

내가 얼마나 Cool한 앱인지 얘기해 줄게

아마 대부분은 바로 이런 게 진짜라고 말할 것이다. 보편적 사용이 존재의 본질을 결정하는 거라면 이 말에도 일리는 있다.

  

네이버 Band

아니, 애플의 논리를 따른다 하더라도 오히려 이 쪽이 더 나은 방법 아닐까? 로딩 시간이 짧게 느껴지려면 밋밋한 frame보단 이렇게 쿨하고 예쁜 볼거리를 던져 주는 게 더 나을 테니까. 게다가 멋진 로고와 잘빠진 타입페이스에 포인트 컬러를 버무린 화려한 splash screen은 단순한 시간 때우기 이상의 일을 수행한다. Splash screen은 일종의 스토리텔링이다. 그것은 짧은 시간, 단 한 장의 이미지로 우리 서비스가 얼마나 쿨한지 얘기해 준다. 

  

sphere 360

꽤 설득력 있는 이야기지만 그럼에도 불구하고, 난 이런 방식의 splash screen에 동의하지 않는다. 결코 애플의 HIG를 따르지 않았기 때문은 아니다.

질서를 사랑하는 디자이너라면 자기가 만든 구성 요소들이 모두 유기적으로 연결되 있길 원할 것이다. 그런데 이런 splash screen은 뭔가 이질감을 느끼게 한다. 이 이미지는 앱을 켤 때 딱 한 번 등장할 뿐 서비스를 사용하는 동안엔 그 어디서도 나타나지 않는다. 마치 선물 상자를 열기 전에 찢어 버린 포장지처럼 말이다. 포장지는 화려하고 아름답다. 하지만 그 목적지는 결국 쓰레기통이다. 

다시 구성 요소로 돌아가기

Splash screen이 포장지처럼 보이길 원치 않는다면, 여기 NESS가 있다.

인근의 맛집을 검색해주는 NESS는 생생한 음식 이미지와 컬러풀한 로고, 타입페이스를 이용한 전형적인 splash screen을 보여준다. 그러나 주요 기능의 UI 로딩이 끝나고 나면,

  

이미지를 회전시켜 사용자의 시선을 끄는 동안 서비스의 핵심 기능을(검색창, 메뉴 버튼) fade in한다. 자기의 소임을 마친 splash screen이 서비스 첫페이지의 배경화면으로 변신하는 것이다. 

움직임으로 하나 되기

Splash screen과 첫 페이지를 하나로 묶어 줄 수 있는 건 fade in만이 아니다. Google 앱은 자사의 로고를 화면 한 가운데 표시한 뒤 로딩이 끝나면 위쪽으로 수십 픽셀 정도 미끄러 뜨린다. 그렇게 양보한 자리엔 Google 앱의 핵심 기능인 검색창이 들어선다. 

  

비콘 신호를 이용한 오프라인 리워드 앱 Shopkick은 움직임과 Fade in(혹은 dissolve)을 모두 이용한 경우다. 요란한 글씨는 그닥 마음에 들지 않지만 이는 곧 Shopkick 사용자가 선택한 리워드 카드로 변경된다(dissolve).

  

요란한 글씨들이 사용자가 선택한 리워드 카드와 dissolve 된다

Shopkick은 여기서 한 발 더 나아간다. 카드를 담은 접시 모양의 UI는 화면 상단으로 이동하면서 축소, fade out 되는데, 이런 움직임은 splash screen과 첫페이지를 유기적으로 연결할 뿐만 아니라 화면 상단을 Tap할 경우 리워드 카드(접시 UI)를 꺼낼 수 있다는 사용 방법까지 암시한다. 움직임을 연구하면 이렇게 세련된 디자인을 할 수 있다. 

  

오직 너만을 위한 Spotlight

겁나게 멋진 로고를 디자인해서 무슨 수를 써서라도 보여주고 싶을 때, 이 로고를 최대한 돋보이게 하는 splash screen은 어떻게 만들어야 할까? 

빽빽한 침엽수림에서 꽃 한 송이가 눈에 띄려면 그 길이가 적어도 50m는 되야 할 것이다. 그런 꽃을 내려달라고 신에게 기도를 올리기 전에 스스로 생각해 보자. 당신에겐 4m짜리 해바라기 한 그루가 있다. 그런데 주변 침엽수들은 모두 30m가 넘는다. 답은 의외로 간단하다. 해바라기를 심은 뒤, 주변의 나무를 모조리 베어버려라.

  

Flipboard의 splash screen은 대담하고 시크하다. 좌측 상단에 뿌리 박은 로고는 언제나 자기 자리에서 빛나는 북극성 같다. 컨텐츠들은 이 로고를 기준삼아 하나둘 자신의 위치를 찾는다. 540억의 투자는 아무나 받는 게 아니다.