앱 화면의 빈 공간을 똑똑하게 디자인한 사례 21가지

5분

2016.03.21.

6.2K

[프리랜서 가이드/ 디자인 TIP]

스마트폰으로 새 앱을 다운받아 사용하게되면 우리는 종종 비어있는 상태의 화면(Empty State Screen)과 마주하게 됩니다.이 화면은 아직 사용자가 앱을 사용한 기록이 없어 표시할 콘텐츠가 없기 때문에 나타나지요. 오류가 생겼을 때 뜨는 페이지 역시 마찬가지입니다. 여러분은 이 화면을 어떻게 채우실 건가요? 많은 디자이너들은 이 화면을 비어있는 그대로 남겨두기 보다는 적절한 일러스트레이션을 통해 사용자들의 참여를 이끌어내는 공간으로 새롭게 디자인하곤 하지요. 사용자들에게 앱 사용을 시작하도록 독려하거나, 해당 앱을 사용하기 위한 짧고 유용한 팁들을 소개하는 등 이러한 여백은 여러분의 창의성이 실력을 발휘하기 딱 좋은 흰 캔버스와 같은 공간입니다. 그래서 오늘의 프리랜서 가이드는 앱의 빈 화면을 똑똑하게 디자인한 사례들을 준비했습니다. 디자인 중 일부는 컨셉 디자인이고, 어떤 것들은 이미 다른 기업에서 사용 중인 것들이니 참고하시기 바랍니다.

앱의 빈 화면을 똑똑하게 디자인한 사례

1. On-Boarding - 처음 시작할 때 뜨는 화면을 앱에 대한 소개와 아직 메시지가 없어 슬퍼하는 캐릭터를 활용했습니다.

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 - 유명한 영화 캐릭터와 그 장면들을 일러스트레이션으로 묘사했습니다. 영화앱에 가장 적절한 디자인이지요.

지금까지 다른 앱에서는 빈 화면을 어떤 디자인을 통해 활용하고 있는지 소개해드렸습니다. 각 링크를 타고 들어가서 더 다양한 아이디어를 자세히 살펴보시고, 여러분의 앱도 창의적으로 만들어보시기 바랍니다.

*본문 내용은(http://www.hongkiat.com/blog/mobile-app-empty-state-designs/)를 각색한 자료입니다.

로그인하고 자유롭게 의견을 남겨주세요.