brunch

텅 빈 화면에도 UX전략이 있다 Empty State

비어있다고요? UX는 꽉 찼습니다

by 한나정


사용자들은 기능 페이지에서 데이터가 없는 빈화면을 반드시 한 번쯤은 보게 됩니다.

빈화면(Empty State)은 단순히 '아무것도 없음'을 보여주는 화면이 아니라,

사용자가 다음 행동을 할 수 있도록 돕는 전략적 공간입니다.


빈 화면은 상황에 따라 네 가지 유형으로 나눌 수 있습니다.

1. 수동형(Passive형)

2. 액션형(Action형)

3. 정보제공형

4. 개인화형(Personalized형)


그렇다면, 이 네 가지 유형은 각각 어떤 모습일까요? 사례와 함께 정리해 보겠습니다.




1. 안내만 있는 수동형 빈화면

빈화면1.png

별 다른 행동 유도 없이 사용자가 아직 데이터를 추가하지 않았다는 점만 간략하게 안내하는 케이스입니다.

최근에는 지나치게 빈 느낌을 주지 않도록 각 서비스의 특징이 되는 귀여운 일러스트와 함께 사용하는 경우가 많습니다.


이렇게 데이터가 없다는 것만 안내한다면, 사용자들의 이탈 위험이 있을 수 있습니다.

어디서 데이터를 추가해야 하는지, 어떻게 데이터를 추가해야 하는지 사용자들은 모를 수도 있기 때문입니다.




2. 안내 + 행동유도를 함께하는 액션형 빈화면

빈화면2.png

굿닥 : 진행 중인 진료가 없을 시 진료를 예약하는 화면으로 이동하는 CTA 노출

카카오톡 : 공지 내역이 없을 시 공지를 등록할 수 있는 화면으로 이동하는 CTA 노출


사용자에게 비어있는 상태를 인지시키면서 다음으로 무엇을 해야 할지 안내할 수 있는 액션형 케이스입니다.

다음 행동을 알려주는 CTA가 함께 구성된 것이 특징입니다.

아무것도 없어 → 그래서 이걸 해봐!라는 자연스러운 사용자 여정을 유도할 수 있어 좋은 방법인데요,

사용자의 부정적인 경험을 긍정적으로 전환시켜 줄 수 있는 좋은 방법이라 생각합니다.




3. 정보를 제공하는 정보제공형 빈화면

사용자가 아직 아무것도 하지 않아 비어있는 상황을 탐색이나 학습 기화로 전환시키는 전략입니다.

단순 안내보다 더 콘텐츠를 능동적으로 보여주는 형태입니다.



추천형

빈화면3.png

컬리 : 팔로잉하는 유저가 없을 시 인기 있는 유저를 추천해 팔로우할 수 있게 함

마인드카페 : 상담 진행 내역이 없을 시 추천 전문가를 노출해 상담으로 연결시킬 수 있게 함


아무것도 없는 빈 화면이지만, 인기 콘텐츠를 제안하는 추천형 케이스입니다.

지금은 비어있지만, 이런 걸 좋아할 수도 있어요! 같은 맥락으로 추천하며,

사용자가 다음 행동을 빠르게 인지하고 탐색할 수 있도록 돕습니다.


사용자에게 빈 화면의 심리적 허전함을 줄여주고 서비스를 둘러보게 만들어 이탈을 방지할 수 있다는 장점이 있지만, 추천이 적절하지 않다면 사용자의 흥미를 떨어뜨릴 수 있어 조심스럽게 사용해야 하는 방식입니다.



튜토리얼형

빈화면4.png

화해 : 소식받는 사용자가 없을 시 어느 화면, 어느 기능으로 추가할 수 있는지 UI로 안내

스타벅스 : 등록된 나만의 메뉴가 없을 시 어느 화면에서 어떻게 등록할 수 있는지 텍스트로 안내


데이터가 없는 화면 자체를 사용자가 어떻게 행동해야 할지 모른다로 추정될 경우에 적합한 케이스입니다.

사용자에게 기능의 사용법이나 서비스 구조를 학습시키는 목적인데요,

탐색이 아니라 사용자에게 이해하고 적응할 수 있는 단계를 만들어준다고 보면 됩니다.

주로 짧고 간결한 설명과 시각적 안내가 함께 들어간 화면으로 구성되어 있습니다.


초보 사용자들의 심리적인 불안을 해소시켜 줄 수 있어 서비스 이해도를 높일 수 있다는 장점이 있지만, 자주 본다면 방해 요소가 될 수 있어 반복 노출을 주의해야 합니다.




4. 사용자에 맞추는 개인화형 빈화면

개인화형은 사용자 상태, 행동이나 선호를 기반으로 맞춤형 콘텐츠를 빈화면에 제공합니다.

정보 제공형과 비슷하다 생각할 수 있지만, 가장 큰 차이는 모두에게 보이는 콘텐츠가 아니라는 점입니다.

그렇기에 사용자의 심리적 공감을 사는 동시에 행동 유도를 할 수 있습니다.



상황 기반 추천형

빈화면5.png

당근 : 상품 검색 결과가 없을 시 유사 상품을 AI가 추천

넷플릭스 : 찾는 영화가 넷플릭스 내에 없을 시 AI를 통해 비슷한 콘텐츠를 노출


사용자의 현재 행동이나 맥락에 따라 비슷한 항목을 제시해 주는 케이스입니다.

찾고 있는 상품이나 콘텐츠가 없을 때, 사용자들에게 대안을 줘 실망을 덜어주는 역할을 합니다.

상황 기반 추천 방식은 맥락 기반이므로 행동 유도 효과가 높은 편입니다.

다만, 추천 결과가 어색하다면 사용자의 혼란을 초래할 수 있어 주의해야 합니다.




데이터 기반 개인 맞춤형

빈화면6.png

무신사 - 사용자가 좋아하는 브랜드가 없을 경우, 사용자가 등록한 연령에 맞는 인기 브랜드를 추천

스포티파이 사용자가 가입 시 선호하는 가수로 선택한 가수의 곡을 비어있는 플레이리스트에 자동으로 추가


사용자의 행동 이력이나 선호, 관심사를 분석해 콘텐츠를 정제 후 맞춤형을 보여주는 케이스입니다.

사용자의 참여 경험을 연결시키는 감정적인 설계가가 능하며 반복 방문 유도에 매우 효과적입니다.

데이터 보호나 민감성이슈가 있을 수 있기 때문에 보안 관련된 고민과 논의가 필요한 부분이니 주의해 주세요!




맥락 + 데이터 기반 혼합형

빈화면7.png

쿠팡 : 장바구니가 비어있을 때, 최근에 본 상품과 자주 산 상품을 추천

컬리 : 장바구니가 비어있을 때, 최근 둘러본 상품과 비슷한 상품을 추천


사용자의 상황과 개인의 데이터 모두를 반영해 빈 데이터를 채울 수 있도록 유도하는 하이브리드 케이스입니다.

사용자가 지금 어떤 상태이고, 과거에는 어떤 행동을 했는지와 같은 전체 맥락을 고려한 UX

고도화된 추천 경험으로 사용자의 신뢰를 확보할 수 있습니다.


혼합형은 가장 정교한 추천 구조로 사용자의 UX 만족도를 끌어올릴 수 있는 방법이지만,

고도화된 알고리즘이 필요해 리소스 비용이 높아 직접적 구매로 이끌어지는 장바구니 상품 추천 등에 적절히 사용하는 것을 추천드립니다.



빈 화면은 단순히 공백이 아닌, 브랜드와 사용자 사이에서 대화를 할 수 있는 기회입니다.

우리 서비스의 성격이나 사용자 숙련도, 진입 지점 등을 고려해 정교한 전략을 설정한다면,

사용자와 한층 더 가까워질 수 있는 기회가 되지 않을까요?






keyword
작가의 이전글인풋 필드 설계 가이드 (회원가입 페이지)