👀스플래시, 어떻게 구성할까?

스플래시 화면, 왜 중요할까요?

(에디터 🐳Z) 모바일 앱 실행 시 처음 만나게 되는 스플래시 화면. 짧게는 1초에서 길게는 3초 정도까지 이어지는 서비스와 사용자의 중요한 연결고리입니다. 앱 설치 → 런치 아이콘 → 스플래시 화면 → 홈 화면으로 이어지기 때문인데요. 최근 네트워크 환경의 발전에 따라 스플래시 화면 없이도 주요 화면들을 불러올 수 있는 환경이 되었습니다. 이 경우 Placeholder UI를 활용하게 되고요. 하지만 사용자가 만나게 될 첫 화면을 불러 오고, 서비스와 관련된 '시각적' 요소를 통해 긍정적인 첫 인상을 심어줄 수 있는 기회를 제공해 준다는 측면에서 스플래시 화면은 꽤 매력적인 장치라고 생각합니다. 'Thermopylae'에 따르면 사람의 뇌는 텍스트보다 60,000배 빠른 속도로 이미지를 받아 들이며, 뇌로 전달 되는 정보의 90%는 시각적인 것이라고 하니 앱 실행을 기준, 우리가 '시각적 요소'를 활용해야 하는 이유는 이미 충분한 것 같네요.

(에디터 🐥D) 모바일 앱 시작을 담당하는 스플래시 화면. 그 짧은 시간을 우리는 왜 주목해야 할까요? 앱 실행 시 사용자에게 반복적인 의미 부여가 가능한 점이 첫번째 이유입니다. 실제로 많은 서비스들이 첫 인상 구축과 브랜딩을 위해 사용하고 있죠. 게임 서비스는 징글을 활용하기도 합니다. "ㅋㅋ넷마블"을 한 번쯤 들어보셨을거라 생각합니다.

스플래시 화면, 어떻게 구성할까요?

스플래시 화면을 구성하기 전, 여러분은 어떤 고민을 하시나요? 저는 개인적으로 스토리보드를 제작할 때, 처음과 마지막으로 수정하는 화면이 스플래시 화면입니다. 빠르게 설계할 수 있지만 주요 화면에 따라 관점이 달라질 수 있기 때문입니다. 이 때, 팀과 가장 중점적으로 고민한 부분을 3가지입니다.

기획 : 서비스 혹은 브랜딩 표현 방식
디자인 : 전반적인 디자인, 맥락을 고려하는 방식
개발 : 애니메이션 등의 효과를 네트워크 환경 등을 고려해 자연스럽게 구현할 수 있는 방식

사용자 경험 관점에서 봤을 때, 스플래시 화면은 '아이콘'과 직접적으로 관련있고 이후 랜딩되는 홈 화면 등을 함께 고민해야 합니다.(관련 글) 그럼 국, 내외 주요 서비스들은 스플래시 화면을 어떻게 활용하고 있으며, 사례를 통해 우리가 확인할 수 있는 내용들이 무엇인지 살펴보겠습니다.

1. 한 줄로 담아낸, 서비스의 특징

왼쪽부터 순서대로 야놀자, 마이 리얼 트립, 데일리 호텔

왼쪽부터 순서대로 오늘의집, KT 기가지니, 요기요

이들은 모두 서비스 관련 문구를 활용하고 있습니다. '문구와 잘 어울리는 배경 이미지'를 활용하고 있다는 점도 같죠. 문구를 활용할 경우, 앱 실행 시 주요 특징을 쉽게 설명할 수 있으며, 상황에 따라 변경 가능해 주목도를 높일 수 있습니다. 여행 서비스라면 시즌별 적용이 가능하며, 커머스라면 이벤트와 상황에 맞춰 적용이 가능한 식으로 말이죠.

야놀자는 기존 숙소, 레저 외 기차표를 예매할 수 있다는 기능적 장점을 이미지와 문구로 반영
마이 리얼 트립은 시즌에 맞는 이미지와 문구를 반영
데일리 호텔은 여행 보다 '머무는 공간' 그 자체에 대한 문구를 반영
오늘의 집은 서비스 성격이 잘 드러나는 '예쁜 집'이라는 키워드를 반영
지니는 여러 개의 스플래시를 교차 반영하고 있으며, 지니에게 물어보거나 말할 수 있는 내용을 반영
요기요는 '배달'을 맛집 여행이라고 표현, 반영

2. 로고로 담아낸, 심플함

왼쪽부터 순서대로 스타벅스, 마켓컬리, 에버노트

왼쪽부터 순서대로 퍼블리 뉴스, 토스, 블라인드

눈에 띄는, 서비스를 대표하는 이미지를 활용하는 것도 좋지만 용량 등을 잘 관리하지 않으면 로딩 속도가 되려 느려질 수 있습니다. 특히 글로벌 서비스의 경우 국가 별 네트워크 환경 다르다는 점도 함께 고려 되어야 합니다. 이 경우 서비스의 '로고'와 함께 주요 컬러를 배경으로 사용, 자연스럽게 앱 화면으로 접근할 수 있는 방법을 활용할 수 있습니다.

3. 애니메이션의 활용, 자연스러운 연결

스플래시 내 애니메이션과 영상을 활용하는 방법도 있습니다. 첫 번째 뉴스레터 '🚦아이콘'에서도 언급 되었던 내용이지만, 아이콘과 앱 내 UI 간 일관성이 중요했던 것처럼, 스플래시 화면과의 맥락도 꽤 중요한데요. 만화경과 다음 웹툰의 사례를 보면 스플래시 내 적용된 애니메이션이 홈 화면과 자연스럽게 이어지는 것을 확인 할 수 있습니다. 'Shazam'은 스플래시 화면과 랜딩 화면을 구분하기 힘들만큼 기능적으로 잘 연결되어 있네요. 텐바이텐의 경우에는 스플래시에 사용된 애니메이션이 홈 화면 특정 메뉴에서도 바로 확인 할 수 있어 강조하고자 하는 부분을 명확하게 알 수 있었습니다.

4. 3초 이내로 만들기, 길어질 경우 알려주기

이미지 원본 출처 : Minh Pham

카카오톡이나 페이스북 메신저를 열 때마다 3초 이상의 스플래시 화면을 접해야 한다면? 바로 메시지를 봐야 하는 상황에서 답답하게 느껴질 수 밖에 없습니다. 서비스 성격에 따라 조금씩 다르게 적용 되는 내용이지만, 일반적으로 스플래시 화면은 3초 이내로 설정하는 것이 좋습니다. 이 시간이 길어지면 길어질수록 사용자들은 네트워크 환경 등을 고려하기 보다는 서비스의 문제라고 생각하기 쉽기 때문입니다. 만약 3초 이상의 시간이 필요할 경우 프로그래스바 등을 활용해 남은 시간을 명확하게 알려줘야 합니다. 대기 시간이 오래 소요되는 게임에서는 특히 더 중요하죠.

5. 다양한 디바이스 해상도 고려