요즘IT
위시켓
최근 검색어
전체 삭제
최근 검색어가 없습니다.

회원가입을 하면 원하는 문장을
저장할 수 있어요!

다음

회원가입을 하면
성장에 도움이 되는 콘텐츠를
스크랩할 수 있어요!

확인

프리랜싱

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

년차,
어떤 스킬
,
어떤 직무
독자들이 봤을까요?
어떤 독자들이 봤는지 궁금하다면?
로그인

[프리랜서 가이드/ 디자인 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 -프로젝트가 없는 상태의 화면을 프로젝트가 없어 화난 폴더 이미지를 활용했습니다.

8Yuhuu 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/)를 각색한 자료입니다.

좋아요

댓글

공유

공유

댓글 0
작가
22
명 알림 받는 중

작가 홈

작가
22
명 알림 받는 중
위시켓은 기업의 프로젝트와 IT프리랜서를 이어주는 온라인 아웃소싱 플랫폼입니다. 업계 최고의 IT 분야 전문성을 자랑하며, 클라이언트와 파트너가 모두 안심하고 이용할 수 있는 각종 솔루션을 제공합니다.
같은 분야를 다룬 콘텐츠
인기 있는 콘텐츠

좋아요

댓글

스크랩

공유

공유

지금 회원가입하고,
요즘IT가 PICK한 뉴스레터를 받아보세요!

회원가입하기
요즘IT의 멤버가 되어주세요! 요즘IT의 멤버가 되어주세요!
요즘IT의 멤버가 되어주세요!
모든 콘텐츠를 편하게 보고 스크랩할 수 있어요.
모든 콘텐츠를 편하게 보고 스크랩 하기
매주 PICK한 콘텐츠를 뉴스레터로 받을 수 있어요.
매주 PICK한 콘텐츠를 뉴스레터로 받기
로그인하고 무료로 사용하기