뉴스센터 목록으로 돌아가기

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

위시켓 | 2016.03.22.

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

20160322_wishket_FG_f

안녕하세요, 위시켓입니다!

스마트폰으로 새 앱을 다운받아 사용하게되면 우리는 종종 비어있는 상태의 화면(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 -유명한 영화 캐릭터와 그 장면들을 일러스트레이션으로 묘사했습니다. 영화앱에 가장 적절한 디자인이지요.

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

위시켓은 프리랜서 디자이너 분들의 샘솟는 아이디어와 계속해서 떠오르는 영감을 기원하며 다음 프리랜서 가이드를 통해 찾아 뵙겠습니다!

위시켓 | 2016.03.22.

'뉴스센터'의 다른 글 보기

프리랜서 고용의 장점 & 좋은 프리랜서 찾는 방법 7가지

[안드로이드 앱 디자인] “앱 디자인 업무까지 진행하기엔 팀 내 리소스가 부족해 위시켓을 찾았습니다.”

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

효율적인 웹 개발 프리랜서 팀을 조직하기 위한 4 STEPS

전업 프리랜서들이 흔히 겪는 문제 상황과 해결 팁 4

뉴스센터 더 보기 >