스플래시 화면, 왜 중요하고 어떻게 구성하면 좋을까?

2020.11.25

|

16060

[디자인 꿀팁] 스플래시 화면, 왜 중요하고 어떻게 구성하면 좋을까?
스플래시, 어떻게 구성할까?

*잠깐, 이 글을 소개해드리는 위시켓은 2019년 시밀러웹 방문자 수 기준, 국내 1위 IT아웃소싱 플랫폼입니다.
현재 8만 이상의 개발업체, 개발 프리랜서들이 활동하고 있으며, 무료로 프로젝트 등록이 가능합니다. 프로젝트 등록 한 번으로 여러 개발업체의 견적, 포트폴리오, 예상기간을 한 번에 비교해보세요:)

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

(에디터 🐳Z)
모바일 앱 실행 시 처음 만나게 되는 스플래시 화면. 짧게는 1초에서 길게는 3초 정도까지 이어지는 서비스와 사용자의 중요한 연결고리입니다. 앱 설치 → 런치 아이콘 → 스플래시 화면 → 홈 화면으로 이어지기 때문인데요. 최근 네트워크 환경의 발전에 따라 스플래시 화면 없이도 주요 화면들을 불러올 수 있는 환경이 되었습니다. 이 경우 Placeholder UI를 활용하게 되고요. 하지만 사용자가 만나게 될 첫 화면을 불러 오고, 서비스와 관련된 ‘시각적’ 요소를 통해 긍정적인 첫 인상을 심어줄 수 있는 기회를 제공해 준다는 측면에서 스플래시 화면은 꽤 매력적인 장치라고 생각합니다. ‘Thermopylae’에 따르면 사람의 뇌는 텍스트보다 60,000배 빠른 속도로 이미지를 받아 들이며, 뇌로 전달 되는 정보의 90%는 시각적인 것이라고 하니 앱 실행을 기준, 우리가 ‘시각적 요소’를 활용해야 하는 이유는 이미 충분한 것 같네요.
(에디터 🐥D)
모바일 앱 시작을 담당하는 스플래시 화면. 그 짧은 시간을 우리는 왜 주목해야 할까요? 앱 실행 시 사용자에게 반복적인 의미 부여가 가능한 점이 첫번째 이유입니다. 실제로 많은 서비스들이 첫 인상 구축과 브랜딩을 위해 사용하고 있죠. 게임 서비스는 징글을 활용하기도 합니다. “ㅋㅋ넷마블”을 한 번쯤 들어보셨을거라 생각합니다.

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

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

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

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

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

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

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

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

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

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

애니메이션으로 만든 스플래시 텐바이텐 스플래시 shazam 스플래시 다음웹툰 스플래시

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

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

3초이내로 만든 스플래시

이미지 원본 출처 : Minh Pham

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

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

해상도를 고려한 스플래시 디바이스 별 스플래시

이미지 출처

iOS도 디바이스가 많아 졌지만, 안드로이드는 여러 제조사에서 취급 하고 있기에 해상도가 훨씬 다양합니다. 다행히(?) 각 OS 별 취급하는 해상도를 꾸준히 업데이트 해주고 있기에 서비스 별 디바이스나 OS 분포에 따라 스플래시 화면 설계 시 반영할 필요가 있습니다.

6. 스토어 등록 정보를 함께 고려 하기

스토어 등록 정보를 고려한 스플래시
야놀자와 데일리호텔의 경우, 스토어 등록 정보 중 스크린샷 내 첫 번째 이미지를 스플래시 이미지로 활용하고 있습니다. 반복적 활용을 통해 서비스에 대해 더 명확하게 인지 하게 만들 수 있다는 장점이 있습니다.
결국 좋은 스플래시 화면은,

✓ 서비스 성격에 맞는 이미지와 문구를 활용한다
✓ 서비스 로고와, 성격에 맞는 배경색을 활용한다
✓ 서비스를 잘 드러낼 수 있는 애니메이션과 동영상을 활용한다
✓ 서비스 성격에 맞는 시간 설정이 필요하지만, 3초 이내로 가는 것이 좋다. 길어질 경우 명확하게 알려 준다.
✓ 서비스 사용자 디바이스와 OS를 고려, 해상도에 맞는 설계를 해야 한다
✓ 스토어 등록 정보 내, 스크린샷과 함께 고려해야 한다.

스플래시 화면 설계에 도움이 되는 서비스는 없나요?

우리와 유사한 카테고리 내 서비스 사례를 살펴보는 것이 좋습니다. (이미 다들 그렇게 하고 있으시겠지만!) ‘스플래시’라는 표현이 해외에서는 ‘런치 스크린’으로도 불리니 카테고리 확인 시 참고해주세요!
1. Mobbin Design
다양한 종류의 iOS용 앱 화면을 큐레이션 해주는 곳입니다. 서비스 성격은 물론, 화면 성격에 따라서도 확인이 가능하며 회원가입 후 마음에 드는 화면을 따로 저장해 관리할 수 있어 유용합니다.
2. Shots
1번과 마찬가지로 화면 성격에 따른 사례를 확인해볼 수 있습니다. 매력적인 건, 화면을 구성하는 컬러, 요소들의 크기와 위치 정보를 함께 볼 수 있다는 점!
3. Behance
다양한 디자이너들의 포트폴리오와 사례를 살펴볼 수 있고, 특히 컨셉 디자인 측면에서의 재치있는 스플래시 화면들을 찾아볼 수 있습니다.

방금 읽은 글은 ‘지금 써보러갑니다’의 뉴스레터 글을 통해 확인하실 수 있습니다.
앱/ 웹 서비스를 구성하는 요소들에 대한 생각과 노하우, 서비스 등을 알고싶다면 지금 바로 구독해보세요:)

함께 보면 좋은 콘텐츠

앱 개발 비용 궁금하세요?
위시켓이 바로 알려드릴게요!

스플래쉬 뜻스플래시스플래시 스크린스플래시 이미지스플래시 화면
다음 글

위시켓 블로그의 새로운 소식 받기