<h3>스플래시 화면, 왜 중요할까요?</h3>(에디터 Z) 모바일 앱 실행 시 처음 만나게 되는 스플래시 화면. 짧게는 1초에서 길게는 3초 정도까지 이어지는 서비스와 사용자의 중요한 연결고리입니다. 앱 설치 → 런치 아이콘 → 스플래시 화면 → 홈 화면으로 이어지기 때문인데요. 최근 네트워크 환경의 발전에 따라 스플래시 화면 없이도 주요 화면들을 불러올 수 있는 환경이 되었습니다. 이 경우 Placeholder UI를 활용하게 되고요. 하지만 사용자가 만나게 될 첫 화면을 불러 오고, 서비스와 관련된 '시각적' 요소를 통해 긍정적인 첫 인상을 심어줄 수 있는 기회를 제공해 준다는 측면에서 스플래시 화면은 꽤 매력적인 장치라고 생각합니다. 'Thermopylae'에 따르면 사람의 뇌는 텍스트보다 60,000배 빠른 속도로 이미지를 받아 들이며, 뇌로 전달 되는 정보의 90%는 시각적인 것이라고 하니 앱 실행을 기준, 우리가 '시각적 요소'를 활용해야 하는 이유는 이미 충분한 것 같네요. (에디터 D) 모바일 앱 시작을 담당하는 스플래시 화면. 그 짧은 시간을 우리는 왜 주목해야 할까요? 앱 실행 시 사용자에게 반복적인 의미 부여가 가능한 점이 첫번째 이유입니다. 실제로 많은 서비스들이 첫 인상 구축과 브랜딩을 위해 사용하고 있죠. 게임 서비스는 징글을 활용하기도 합니다. "ㅋㅋ넷마블"을 한 번쯤 들어보셨을거라 생각합니다. <br/><br/> <h3>스플래시 화면, 어떻게 구성할까요?</h3>스플래시 화면을 구성하기 전, 여러분은 어떤 고민을 하시나요? 저는 개인적으로 스토리보드를 제작할 때, 처음과 마지막으로 수정하는 화면이 스플래시 화면입니다. 빠르게 설계할 수 있지만 주요 화면에 따라 관점이 달라질 수 있기 때문입니다. 이 때, 팀과 가장 중점적으로 고민한 부분은 3가지입니다. <p style="padding-left: 40px;">기획 : 서비스 혹은 브랜딩 표현 방식 디자인 : 전반적인 디자인, 맥락을 고려하는 방식 개발 : 애니메이션 등의 효과를 네트워크 환경 등을 고려해 자연스럽게 구현할 수 있는 방식</p> 사용자 경험 관점에서 봤을 때, 스플래시 화면은 '아이콘'과 직접적으로 관련있고 이후 랜딩되는 홈 화면 등을 함께 고민해야 합니다.(<a href="https://brunch.co.kr/@shaun/28">관련 글</a>) 그럼 국/내외 주요 서비스들은 스플래시 화면을 어떻게 활용하고 있으며, 사례를 통해 우리가 확인할 수 있는 내용들이 무엇인지 살펴보겠습니다. <h4>1. 한 줄로 담아낸, 서비스의 특징</h4> <img class="size-full wp-image-19091 aligncenter" src="https://www.wishket.com/media/newscenter/590/01.PNG" alt="" width="640" height="281" /> 이들은 모두 <strong>서비스 관련 문구</strong>를 활용하고 있습니다.<strong> '문구와 잘 어울리는 배경 이미지'</strong>를 활용하고 있다는 점도 같죠. 문구를 활용할 경우, 앱 실행 시 주요 특징을 쉽게 설명할 수 있으며, 상황에 따라 변경 가능해 주목도를 높일 수 있습니다. 여행 서비스라면 시즌별 적용이 가능하며, 커머스라면 이벤트와 상황에 맞춰 적용이 가능한 식으로 말이죠. <p style="padding-left: 40px;">- 야놀자는 기존 숙소, 레저 외 기차표를 예매할 수 있다는 기능적 장점을 이미지와 문구로 반영 - 마이 리얼 트립은 시즌에 맞는 이미지와 문구를 반영 - 데일리 호텔은 여행 보다 '머무는 공간' 그 자체에 대한 문구를 반영 - 오늘의 집은 서비스 성격이 잘 드러나는 '예쁜 집'이라는 키워드를 반영 - 지니는 여러 개의 스플래시를 교차 반영하고 있으며, 지니에게 물어보거나 말할 수 있는 내용을 반영 - 요기요는 '배달'을 맛집 여행이라고 표현, 반영</p> <br/><br/> <h4>2. 로고로 담아낸, 심플함</h4> <img class="size-full wp-image-19092 aligncenter" src="https://www.wishket.com/media/newscenter/590/02.PNG" alt="" width="640" height="244" /> 눈에 띄는, 서비스를 대표하는 이미지를 활용하는 것도 좋지만 용량 등을 잘 관리하지 않으면 로딩 속도가 되려 느려질 수 있습니다. 특히 글로벌 서비스의 경우 국가 별 네트워크 환경 다르다는 점도 함께 고려 되어야 합니다. 이 경우 <strong>서비스의 '로고'와 함께 주요 컬러를 배경으로 사용, 자연스럽게 앱 화면으로 접근할 수 있는 방법을 활용</strong>할 수 있습니다. <br/><br/> <h4>3. 애니메이션의 활용, 자연스러운 연결</h4> <p style="padding-left: 120px;"><img class="alignnone size-full wp-image-19093" src="https://www.wishket.com/media/newscenter/590/03.gif" alt="" width="172" height="360" /> <img class="alignnone size-full wp-image-19096" src="https://www.wishket.com/media/newscenter/590/06.gif" alt="" width="170" height="360" /> <img class="alignnone size-large wp-image-19095" src="https://www.wishket.com/media/newscenter/590/05.gif" alt="" width="200" height="356" /> <img class="alignnone size-large wp-image-19094" src="https://www.wishket.com/media/newscenter/590/04.gif" alt="" width="170" height="360" /></p> 스플래시 내 <strong>애니메이션과 영상을 활용</strong>하는 방법도 있습니다. 이전 글 '아이콘'에서도 언급 되었던 내용이지만, 아이콘과 앱 내 UI 간 일관성이 중요했던 것처럼, 스플래시 화면과의 맥락도 꽤 중요한데요. 만화경과 다음 웹툰의 사례를 보면 스플래시 내 적용된 <strong>애니메이션이 홈 화면과 자연스럽게 이어지는 것을 확인</strong> 할 수 있습니다. 'Shazam'은 스플래시 화면과 랜딩 화면을 구분하기 힘들만큼 기능적으로 잘 연결되어 있네요. 텐바이텐의 경우에는 스플래시에 사용된 애니메이션이<strong> 홈 화면 특정 메뉴에서도 바로 확인</strong> 할 수 있어 강조하고자 하는 부분을 명확하게 알 수 있었습니다. <br/><br/> <h4>4. 3초 이내로 만들기, 길어질 경우 알려주기</h4> <img class="size-full wp-image-19097 aligncenter" src="https://www.wishket.com/media/newscenter/590/07.gif" alt="" width="800" height="600" /> <p style="text-align: center;">이미지 원본 출처 : Minh Pham</p> 카카오톡이나 페이스북 메신저를 열 때마다 3초 이상의 스플래시 화면을 접해야 한다면? 바로 메시지를 봐야 하는 상황에서 답답하게 느껴질 수 밖에 없습니다. 서비스 성격에 따라 조금씩 다르게 적용 되는 내용이지만, 일반적으로 스플래시 화면은 3초 이내로 설정하는 것이 좋습니다. 이 시간이 길어지면 길어질수록 사용자들은 네트워크 환경 등을 고려하기 보다는 서비스의 문제라고 생각하기 쉽기 때문입니다. 만약 3초 이상의 시간이 필요할 경우 <strong>프로그래스바 등을 활용해 남은 시간을 명확하게</strong> 알려줘야 합니다. 대기 시간이 오래 소요되는 게임에서는 특히 더 중요하죠. <br/><br/> <h4>5. 다양한 디바이스 해상도 고려</h4> <img class="size-full wp-image-19098 aligncenter" src="https://www.wishket.com/media/newscenter/590/08.png" alt="" width="700" height="395" /> <img class="size-full wp-image-19099 aligncenter" src="https://www.wishket.com/media/newscenter/590/09.png" alt="" width="700" height="593" /> <p style="text-align: center;"><a href="https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/#device-screen-sizes-and-orientations">이미지 출처</a></p> iOS도 디바이스가 많아 졌지만, 안드로이드는 여러 제조사에서 취급 하고 있기에 해상도가 훨씬 다양합니다. 다행히(?) 각 OS 별 취급하는 해상도를 꾸준히 업데이트 해주고 있기에 서비스 별 디바이스나 OS 분포에 따라 스플래시 화면 설계 시 반영할 필요가 있습니다. <br/><br/> <h4>6. 스토어 등록 정보를 함께 고려 하기</h4> <img class="size-full wp-image-19100 aligncenter" src="https://www.wishket.com/media/newscenter/590/10.png" alt="" width="640" height="300" /> 야놀자와 데일리호텔의 경우, 스토어 등록 정보 중 스크린샷 내 첫 번째 이미지를 스플래시 이미지로 활용하고 있습니다. 반복적 활용을 통해 서비스에 대해 더 명확하게 인지 하게 만들 수 있다는 장점이 있습니다. 결국 좋은 스플래시 화면은, <p style="padding-left: 40px;">✓ 서비스 성격에 맞는 이미지와 문구를 활용한다 ✓ 서비스 로고와, 성격에 맞는 배경색을 활용한다 ✓ 서비스를 잘 드러낼 수 있는 애니메이션과 동영상을 활용한다 ✓ 서비스 성격에 맞는 시간 설정이 필요하지만, 3초 이내로 가는 것이 좋다. 길어질 경우 명확하게 알려 준다. ✓ 서비스 사용자 디바이스와 OS를 고려, 해상도에 맞는 설계를 해야 한다 ✓ 스토어 등록 정보 내, 스크린샷과 함께 고려해야 한다.</p> <br/><br/> <h4>스플래시 화면 설계에 도움이 되는 서비스는 없나요?</h4> 우리와 유사한 카테고리 내 서비스 사례를 살펴보는 것이 좋습니다. (이미 다들 그렇게 하고 있으시겠지만!) '스플래시'라는 표현이 해외에서는 '런치 스크린'으로도 불리니 카테고리 확인 시 참고해주세요! 1. Mobbin Design 다양한 종류의 iOS용 앱 화면을 큐레이션 해주는 곳입니다. 서비스 성격은 물론, 화면 성격에 따라서도 확인이 가능하며 회원가입 후 마음에 드는 화면을 따로 저장해 관리할 수 있어 유용합니다. 2. Shots 1번과 마찬가지로 화면 성격에 따른 사례를 확인해볼 수 있습니다. 매력적인 건, 화면을 구성하는 컬러, 요소들의 크기와 위치 정보를 함께 볼 수 있다는 점! 3. Behance 다양한 디자이너들의 포트폴리오와 사례를 살펴볼 수 있고, 특히 컨셉 디자인 측면에서의 재치있는 스플래시 화면들을 찾아볼 수 있습니다.
