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