안녕하세요, 위시켓입니다!
스마트폰으로 새 앱을 다운받아 사용하게되면 우리는 종종 비어있는 상태의 화면(Empty State Screen)과 마주하게 됩니다.이 화면은 아직 사용자가 앱을 사용한 기록이 없어 표시할 콘텐츠가 없기 때문에 나타나지요. 오류가 생겼을 때 뜨는 페이지 역시 마찬가지입니다.
여러분은 이 화면을 어떻게 채우실 건가요? 많은 디자이너들은 이 화면을 비어있는 그대로 남겨두기 보다는 적절한 일러스트레이션을 통해 사용자들의 참여를 이끌어내는 공간으로 새롭게 디자인하곤 하지요. 사용자들에게 앱 사용을 시작하도록 독려하거나, 해당 앱을 사용하기 위한 짧고 유용한 팁들을 소개하는 등 이러한 여백은 여러분의 창의성이 실력을 발휘하기 딱 좋은 흰 캔버스와 같은 공간입니다.
그래서 오늘의 프리랜서 가이드는 앱의 빈 화면을 똑똑하게 디자인한 사례들을 준비했습니다. 디자인 중 일부는 컨셉 디자인이고, 어떤 것들은 이미 다른 기업에서 사용 중인 것들이니 참고하시기 바랍니다.
앱의 빈 화면을 똑똑하게 디자인한 사례
1. On-Boarding – 처음 시작할 때 뜨는 화면을 앱에 대한 소개와 아직 메시지가 없어 슬퍼하는 캐릭터를 활용했습니다.
2. Modspot – 빈 공간을 앱 사용을 위한 튜토리얼 공간으로 활용할 수도 있습니다.
9. Google Photos – 공유되는 파일이 전혀 없을 때, 두 개의 빨대가 꽂힌 음료수가 등장합니다. 사용자들이 ‘공유’를 시작하게끔 독려하는 것이지요.
10. Favorites – 우리에게 익숙한 아이콘을 통해 사용자들이 알기 쉽게 표현했습니다. ‘별’을 즐겨찾기로, ‘연필’은 질문 내역을, ‘문서’는 답변이 완료된 질문들을 나타냅니다.
11. Traveloka – 이 여행 앱은 서비스와 연관 있는 일러스트레이션을 통해 다양한 상태를 묘사합니다. 잠든 안테나는 ‘연결 끊김’을 나타내며, 비행기가 없는 계단은 ‘이용 가능한 비행편이 없음’을 나타냅니다. 비어있는 벤치는 ‘이용 가능한 숙소가 없음’을 나타내지요.
12. Sketch – 새로운 스케치를 더하라는 문구와 ‘더하기’ 버튼으로 향하는 화살표를 통해새로운 스케치를 등록하고 싶게 합니다.
13. BitGold – 어두운 톤의 화면은 ‘아직 아무것도 시작된 것이 없음’을 나타내기에 매우 적절합니다. 그리고 가운데 위치한 빛나는 금색 버튼은 자산 관련 앱에 잘 어울립니다.
14. No Files Found – 검색결과가 없을 때 난감한 상황을 나타내는 서류 캐릭터를 통해 공감을 유도하고 재시도하게 유도해보세요.
15. PandaDoc – 나쁜 소식을 귀여운 판다를 통해 전달해 사용자의 기분을 배려합니다.
17. Invoice app – 두 가지 색깔로 이루어진 간단한 일러스트레이션으로 데이터를 찾고 최근의 매매 실적, 그리고 클라이언트 정보 등을 보여줍니다.
18. Whittl – 아직 약속이 없어 슬픈 표정을 하고 있는 캐릭터를 통해 서비스를 이용하라는 내용을 전달합니다. 캐릭터의 헤어스타일이 로고와 닮은 디테일까지 표현한 재미있는 디자인이지요.
19. Social app for truck drivers – 트럭 운전자를 위한 앱에서는주차 공간이 없음을 계속 달리는 트럭으로 표현합니다. 또한 인터넷연결이 끊어지면 바리케이드에 트럭이 멈춰서지요.
20. Signature app – 귀여운 문서 캐릭터들로 빈 문서와 문서를 캡쳐하는 순간을 재미있게 묘사했습니다.
21. Kickpush – 유명한 영화 캐릭터와 그 장면들을 일러스트레이션으로 묘사했습니다. 영화앱에 가장 적절한 디자인이지요.
지금까지 다른 앱에서는 빈 화면을 어떤 디자인을 통해 활용하고 있는지 소개해드렸습니다. 각 링크를 타고 들어가서 더 다양한 아이디어를 자세히 살펴보시고, 여러분의 앱도 창의적으로 만들어보시기 바랍니다. 위시켓은 프리랜서 디자이너 분들의 샘솟는 아이디어와 계속해서 떠오르는 영감을 기원하며 다음 프리랜서 가이드를 통해 찾아 뵙겠습니다!