빈 화면 어떻게 구성할까?

빈 화면 구성에 더 힘을 쏟아야 하는 이유

(에디터, 재그마스터) 우리가 다양한 화면을 구성하는 과정에서 놓치기 쉬운 화면이 몇몇 존재하는데요! 그 중 대표적인 상황이 바로 '데이터가 없는' 상태의 빈 화면 입니다. 사용자의 참여로 데이터가 채워지는 서비스라면 더더욱 그렇죠. 빈 화면이 중요한 이유는 사용자에게 다음 행동에 대한 힌트와 함께 정보를 제공해줄 수 있다는 점입니다. 자칫 마지막 화면이라 생각할 수 있는 공간을 스스로 채워야겠다는 생각으로 바꿀 수 있는 곳이기도 하죠. 이는 사용자의 참여율을 높이는 중요한 장치로 이어질 수 있기도 합니다.

(에디터, 동동) 담겨야 할 데이터가 없는 빈 화면을 채우기 위해 어떤 데이터, 행동이 필요한지 사용자에게 정확하게 인지시키고, 다음 액션을 유도하는 것은 정말 중요합니다. 오늘은 단순히 텍스트로 상황을 알려주는 화면보다 특정 행동을 유도하는 사례를 통해 빈 화면 대응 방안을 살펴보려 합니다.

빈 화면 사례 소개

1. 배달앱, 찜한 가게가 없는 경우

요기요, 배달의 민족, 쿠팡 이츠 - 찜 목록이 비어 있는 경우

요기요(①)와 배달의민족(②), 쿠팡이츠(③)는 모두 특정 '가게'를 즐겨찾기 할 수 있습니다. (찜, 좋아요 등) 첫 실행을 기준으로 한다면 아직 찜 한 가게가 없을 가능성이 높은 화면이기도 하죠. 이들이 빈 화면을 대하는 방법은 조금씩 다릅니다.

① 요기요는 이 공간이 '왜' 비어 있는지를 먼저 설명해줍니다 (찜한 음식점이 없습니다.) 그리고 공간을 채우기 위해 어떤 행동을 할 수 있는지를 알려줍니다.(관심있는 음식점 상세화면에서 하트 아이콘을 눌러 '찜' 하시면~) 마지막으로 앞선 설명을 통해 실제 행동 할 수 있는 버튼을 추가했습니다. (음식점 보러가기) 설정한 동네의 전체 음식점 리스트로 이동하게끔 말이죠.

② 배달의 민족은 본인들의 캐릭터를 빈 화면에 적절히 활용하고 있습니다. 캐릭터가 하트를 안고 누워있는 것으로 이 공간이 어떤 곳인지 설명하고 있습니다. 하지만 빈 공간을 어떻게 채워넣을 수 있는지 '안내' 측면에 대한 정보는 부족합니다. 또 사용자가 직접 하단 탭 또는 뒤로가기 버튼 등을 활용해 다시 음식점이 있는 공간으로 이동해야 하는 불편함이 존재합니다.

③ 쿠팡이츠는 세 서비스 중 '기능 안내'를 가장 적절하게 제공하고 있는데요. 실제 음식점 상세 화면 뷰를 일부 가져와 좋아요를 어떻게 하는지 알려줍니다. 실제 화면을 보여주니 이해가 훨씬 빠를 수 밖에 없고요! 또 버튼을 탭하면 바로 홈 화면 내 맛집을 확인 할 수 있도록 행동을 유도하고 있습니다.

(에디터, 재그마스터의 덧붙임) 빈 화면의 첫 번째 목표는 사용자가 해당 화면 내 기능을 '어떻게' 활용 할 수 있는지 알려줄 수 있어야 하는 점입니다. 특정 가게를 '찜'하면 이 곳에서 언제든 확인 할 수 있어! 와 같은 구체적인 메시지를 활용해야 하는 이유기이도 합니다. 또 별도의 화면을 만들지 않더라도, 빈 화면 내 제공되는 기능을 바로 활용할 수 있도록 연결고리를 마련해주는 것 역시 중요합니다. 쿠팡과 요기요가 맛집 리스트로 바로 이동할 수 있도록 버튼을 제공해주는 것처럼 말이죠.

2. 여행 서비스, 찜한 숙소나 일정이 없는 경우

데일리호텔, 마이리얼트립, 야놀자 - 빈 화면

음식 배달 서비스 뿐만 아니라 숙소 또는 여행 관련 서비스에서도 '찜'하기나 '좋아요'는 정보를 수집하는 중요한 기능으로 활용 되는데요. 데일리호텔과 마이리얼트립 그리고 야놀자 역시 위시리스트, 찜하기 기능을 제공하며 빈 화면 내 여러 정보 제공과 행동 유도를 하고 있습니다.

① 데일리 호텔은 숙소와 레스토랑을 예약이 가능하기에 위시리스트 역시 두 개의 탭으로 제공되고 있습니다. 요기요와 유사하게 현재 상태를 알려주고 (저장된 위시리스트가 없습니다.) 찜하기를 어떻게 할 수 있는지 말해주며 (원하는 숙소 상세 화면에서 하트 아이콘을 눌러~) 실제 숙소를 볼 수 있는 화면으로 이동 가능한 버튼을 제공해줍니다. 재밌는 점은 '숙소 보러가기'를 탭했을 때 원하는 조건에 따라 확인 가능한 검색 화면으로 이동한다는 점입니다.

② 마이 리얼 트립은 현재 상태에 대한 정보만 제공해주고 있네요. ③ 야놀자는 하트와 X를 조합한 아이콘으로 명확한 현재 상태를 보여주고 있습니다. 데일리호텔과 같이 빈 화면을 채울 수 있는 공간으로 연결되는 버튼이 제공되고 있네요.

(에디터, 재그마스터의 덧붙임) 어떤 화면으로 이동 시키느냐도 중요한 기준이 됩니다. 앞서 쿠팡이츠는 '홈 화면'으로, 요기요는 우리 동네 맛집 '전체 리스트'로 바로 이동이 가능한데요. 데일리 호텔은 검색 화면으로 이동시키고 있습니다. 홈 화면으로 이동하는 것보다 리스트로 이동하거나, 조건에 따른 검색이 가능한 화면으로 이동하는 것이 찜할 확률을 더 높일 수 있는 방법이 되기 때문입니다.

​3. 커머스, 장바구니가 비어 있는 경우

오아시스, 쿠팡, 이마트 - 장바구니가 비어 있는 경우

커머스에서 장바구니란 오프라인에서 카트와 같은 역할을 합니다. 개별로 구매하지 않고 장바구니에 담아 한 번에 구매하기 위한 수단이기 때문인데요. 온라인 또는 모바일 환경에서 장바구니를 먼저 들어가는 경우는 많지 않지만 쇼핑 후에는 비어 있는 경우가 많기에 앞선 사례와 같이 빈 화면 대응을 고민해 봐야 합니다.

① 요즘 자주 만나게 되는 오아시스입니다. 가입 후 장바구니를 먼저 확인해 봤는데 비어있다는 상태 정보만 알려주고 있었습니다. 서비스 특성 상 유기농 제품을 주로 취급하기에 이에 대한 안내와 주요 제품들을 바로 만나볼 수 있는 연결고리가 있다면 어땠을까 라는 생각이 드네요.

② 쿠팡은 현재 상태 정보와 함께 '추천 상품 보기' 버튼을 제공하고 있습니다. 쿠팡은 개인에 따른 추천화가 잘 되어 있기에 다른 화면 보다 이를 가장 잘 적용한 홈 화면으로의 이동을 선택한 것 같네요.

③ 이마트는 장바구니가 비어있다는 정보와 함께 실제 '상품 리스트'를 바로 보여주고 있습니다. 화면을 이동하지 않고 바로 상품을 만나볼 수 있도록 유도하는 방법인데요. 개인의 구매 내역과 같은 데이터를 기반으로 구성된 리스트가 아닌, 누구에게나 적용 가능한(구매 이력이 없는) '인기 상품'을 기준으로 리스트를 구성하고 있습니다. (인기 상품을 보니 대부분 생필품에 포함되는 상품!)

(에디터, 재그마스터의 덧붙임) 행동을 유도하기 위한 문구는 직설적이거나 구체적인 것이 좋습니다. 숙소 보러가기 vs 국내 숙소 기획전 보러가기, 오늘의 추천 상품 보기 vs 쇼핑하러가기. 어느 문구가 좋다고 생각하시나요? 기획전 내 숙소를 보거나, 나를 위한 추천 상품을 볼 수 있다는 것이 제게는 더 매력적으로 다가오는데요. 이처럼 빈 화면 내 다음 행동 유도를 위해서는 명확하지만 직설적인 내용을 담는 것이 좋습니다. 설득의 효과를 얻을 수 있기에 더더욱!

아이디어스, 에이블리, 지그재그 - 장바구니가 비어 있는 경우

이번 사례는 의류와 악세서리 중심의 커머스입니다. 개인적으로 식료품과 생활용품 대비 의류는 장바구니에 담아둔 채로 유사 상품과 비교하는 시간이 긴 편이에요. 비교하고 그 카테고리와 상품은 구매 확률이 높기 때문에 초기 빈 화면에서 상품을 담는 과정이 매우 중요하다고 생각합니다.

① 최근 텀블벅을 인수하며 화제가 된 아이디어스입니다. 아이디어스는 '마음은 가득 찬 당신'이라는 문구로 서비스 성향에 맞는 감성적인 문구와 함께 상단에 할인 쿠폰 배너를 배치했습니다. 할인 쿠폰을 통해 작품 주문까지 좀 더 쉽게 연결될 수 있도록 유도하고 있는데요. 주문에 있어 금액이 중요한 만큼 상단 배치가 인상적이었습니다.

② 사실 빈 화면을 거의 처음 보는 듯한 에이블리입니다. 에이블리는 베스트 상품의 페이지로 연결하는 버튼을 배치했어요. 베스트 페이지는 사용자 맞춤 필터와 상품 인기순으로 모아볼 수 있어 같은 선택을 한 것 같습니다.

지그재그도 에이블리와 유사하게 하단의 상품 보러가기 버튼을 통해 인기 상품 페이지로 사용자를 유도합니다. 여기서 주목할 부분은 ③의 포인트를 통해 Z페이를 사용자에게 좀더 인식시킬 수 있도록 표현한 점인데요. 서비스에서 강조하고 싶은 특색과 기능을 보여줄 수 있는 점을 참고하면 좋을 것 같아요!

4. 기타 참고 사례

​

리멤버, VSCO는 빈 화면을 어떻게 활용하고 있을까?

① 리멤버의 주요 기능 중 하나인 '팀 명합첩'이 비어 있는 경우입니다. 같은 역할을 하는 팀원들이 함께 명함첩을 만들어 관리할 수 있는 기능인데요. 좋아요, 찜과는 또 다른 경우로 리멤버와 같은 서비스에서만 쓸 수 있는 기능이기에 첫 사용을 대비한 '안내'가 꼼꼼하게 적용되어 있습니다. 간략한 기능 안내와 함께 명함첩을 바로 만들 수 있는 버튼, 그리고 자세히 알아보기라는 텍스트 링크를 통해 더 자세한 정보를 확인 할 수 있는 여지를 남겨두었네요. 찜하기와 같이 일반적인 기능으로 채워지는 화면이 아니라면 리멤버와 같이 기능에 대한 안내를 자세히 확인 할 수 있도록 돕는 것도 좋은 인상을 심어줄 수 있는 방법이 될 수 있습니다.

② 오랫동안 잘 활용하고 있는 사진, 영상 편집 앱 VSCO는 사용자가 편집, 업로드 한 이미지를 모아 볼 수 있는 공간이 따로 존재합니다. (인스타 공개 계정과 같은 역할) 아직 저는 이 공간을 따로 활용하고 있지 않은데요. 비어 있는 이 공간이 채워질 때 어떤 구성으로 보여줄지에 대한 레이아웃 정보는 어떤 내용으로 채워지는지에 대한 정보를 제공하고 있습니다. 편집 화면으로 바로 이동 가능한 버튼도 함께 제공하고 있네요!

인스타그램, 페이스북, Emolog

포스팅 기능 중심의 빈 화면도 함께 살펴보겠습니다. 대표적인 사례로 인스타그램 스토리, 페이스북 그리고 제가 최근 애용하는 Emolog라는 이모지 활용 일기 서비스를 만나볼게요.

인스타그램 스토리와 페이스북 게시글 작성 시 ①, ②번의 문구를 통해 입력에 필요한 액션과 어떤 내용을 적으면 좋을지 가이드를 주고 있습니다. 그리고 하단의 포스팅 작성을 위한 기능들이 크게 배치되어 바로 적용할 수 있도록 안내하고 있죠.

③Emolog는 큰 이모지로 하루의 기분을 표현하고 하단의 일기 제목과 하루를 기록하는 서비스입니다. 그래서 이모지 영역과 텍스트 영역 모두 톤 다운된 폰트 컬러로 안내 멘트를 제공하고 있습니다.

(에디터, 동동의 덧붙임) 빈 화 면의 경우, 행동 유도를 위한 문구를 주로 포인트 컬러가 아닌 그레이 계열의 톤 다운된 컬러로 디자인합니다. 그 이유는 기능을 활성화하여 작성된 내용과 확실하게 비교할 수 있도록 직관성을 높이기 위함과 기능을 버튼으로 배치했을 때 버튼과 포인트가 눈에 띌 수 있도록 유도하기 위함입니다.