🫥 공백 상태(Empty States) 문구 10가지 예시

🎈 한 줄 요약 - 공백 상태 문구는 사용자의 추가 행동을 유도하거나, 만족감, 이탈률을 줄일 수 있으며, 브랜드 보이스를 드러내는 효과적인 도구로 활용할 수 있습니다. ✔️ UI 컴포넌트 중, Empty States를 어떻게 번역하고 있나요? 여러 사전과 단어를 찾아봤을 때, 빈 공간, 빈 상태, 공백 상태 등으로 번역할 수 있는데요. 처음에 빈 상태로 불렀을 때는 '빈사 상태'가 떠올라 바꿔야겠다고 생각했어요. ✔️ 빈사 상태라니, 안 좋은 이미지가 떠오르잖아요? 🫣 그 다음이 '빈 공간'이었어요. 뭔가 빈 공간이라고 하니까 'Empty'를 그대로 들여놓은 것처럼 '아무것도 없고, 아무의미 없다'라고 받아들이게 되더라고요. ✔️ 다음으로 생각한게 '공백 상태'인데요. 공백 상태를 입 밖으로 내뱉어보니, 생각보다 입에 잘 붙어서 '공백 상태'로 결정했어요.(?) 그리고 의미를 좀 붙여봤는데요. 한자어로 풀면 '빌공' = '0'이라는 의미를 더하고, '흰백' = '백지 상태'라는 의미를 더해, 무엇이든 채워넣을 수 있는 흰 공간이다라고 말이죠. ✔️ 이게 뭔 소리냐고요? 🐶(개)소리이고요. 앞서 말했듯 입에 잘 붙어서 '공백 상태'로 이름 붙이는게 좋을 거 같아, 그렇게 했어요.😆 회사 내에서 커뮤니케이션할 때, 입에 촥! 달라 붙어 쉽게쉽게 불러야 편하잖아요? 그래서 결정한 거죠. ✔️ 여튼, 공백 상태는 상황에 따라 다른데요. 처음 시작하는 사용자에게 이거이거 해봐라 하고 보여줄 수 있고, 오류가 났을 때 오류를 설명하기도 하죠. 이 공백 상태는 '배민의 찜' 기능이 비어있을 때, 시각적 어포던스와 다음 행동을 유도하는 측면에서 갑자기 뜨지 않았을까 생각해요. ✔️ 특히, 배민이 지니는 B급 감성이 이미지와 문구로 드러나며, 브랜드 아이덴티티를 드러낼 수 있는 유용한 공간으로 떠오른 거 같아요. 어디서? 한국에서요. 그 전까지는 있는 그대로만 보여주는 공간이었지 않나 싶네요. ✔️ 이와 같은 공백 상태를 유용하게 사용할 수 있는 10가지 예시가 있어서, 제가 들고 왔어요. 당연 국내 사례가 아니고 해외 사례이니 국내화해서 적용할 필요가 있겠죠? 1. Fitst use ✔️ 일반적으로 공백 상태는 사용자가 제품이나 서비스에 가입하고 아무것도 표시되지 않을 때, 즉 처음 사용할 때 나타나요. Dropbox Paper를 좋은 예시로 들고 있네요. 타이틀에 서비스의 핵심 가치를 압축해 설명하고, 사용자가 행동을 취하도록 유도하고 있어요. • 타이틀: Dropbox Paper: Your Team's collaborative workspace • 디스크립션: Paper is mor than a doc-it's a workspace that brings creation and coordination together in one place. Write and edit. brainstorm, review designs, manage tasks, or run meetings. • 버튼: Get started 2. User cleared ✔️ 두 번째 사례는 사용자가 받은 편지함이나 작업 목록을 지워서 표시할 내용이 없을 때입니다. Feedly 서비스를 예로 들고 있고, 브랜드 일러스트레이션을 활용해 사용자를 안심시키고, 다음 행동을 유도하고 있어요. • 타이틀: All Done! • 디스크립션: You're all caught up. • 버튼: SHOW READ ARTICLES 3. Errors ✔️ 유명한 UX Writing 커뮤니티에서는 일부 오류 예시를 공백 상태로 표시하는 것이 맞냐에 대해 논쟁이 벌어졌었다고 하네요. 일부 오류는 표시할 데이터가 없는 상태이기 때문이죠. 저는 오류 상태 중 하나로, 공백 상태가 있다고 보기 때문에, 이를 적절히 활용할 방안이 필요하다 생각해요. 여기서는 대표적인 예시로 Android용 Skype를 들고 있어요. • 타이틀: Oh no! • 디스크립션: No internet found. Check your connection or try again. • 버튼: RETRY 4. No data to show ✔️ 공백 상태를 표시하는 대표적인 예 중 하나가, 검색했는데 일치하는 조건을 발견하지 못했을 때예요. 이게 오류일 수 있고, 단순 데이터가 없을 수도 있죠. 저는 이때도 추가 조치를 취해 사용자에게 행동을 유도할 수 있는 좋은 기회로 봐요. ✔️ 여기서는 대표적인 예시로 Instacart라는 앱을 들었어요. 3단계로 진행되는 과정을 봐야하는데요. 1. 사용자에게 무슨 일이 일어났는지 알려주고, 2. 사용자가 할 수 있는 일을 제안하고, 3. 도움이 되지 않을 수도 있다고 설명하며, 향후 문제 해결을 위한 방법을 알려주고 있죠. 대표적인 오류 메시지의 형태와 동일해요. • 타이틀: No stores available for pickup within 50 miles • 디스크립션: Try changing your location to show stores that offer pickup. We're always adding new storesㅡcheck again soon. 5. Helpful whenever possible ✔️ 이번 예시는 공항의 예를 들었는데요. 공항 이용자가 겪을 수 있는 어려움을 대상으로 하여, 도움을 줄 수 있는 내용으로 구성했어요. 비행 전에 기기를 충전할 콘센트가 충분하지 않다는 점을 파악해, 캐주얼하고 인간적인 목소리로 사용자에게 정보를 주고 있죠. • 디스크립션: This gate's empyty. Sooo many open plugs. 6. 404 page ✔️ 대표적인 에러 페이지 404 page에 대한 내용이에요. 요새 자주 접하는 404 page는 블라인드의 404 page인데요. 게시물이 삭제됐을 때, 표시되더라고요. 아쉬운 점은 그냥 404 page 문구를 노출하고 있다는 점인데요. 이를 재치있게 활용하면 어떨까 하는 생각이 많이 들더라고요. ✔️ 그러면 404 page를 어떻게 표현하면 좋을까? 기능적이며, 재미있고, 목표 지향적이면 좋다라고 보고 있어요. 대표적인 예시로 Medium을 들고 있는데요. Medium은 다른 내용을 검색할 수 있게 제공하고, 사용자의 취향을 고려해 추가 콘텐츠를 추천하더라고요. • 타이틀: 404 We couldn't find this page. • 서치 바: Search Medium • 하단 맞춤형 탭: Still feeling lost? You're not alone. 7. Showing a tutorial at the start ✔️ 처음 사용하는 사용자에게 제공하는 공백 상태의 예시예요. 사용자가 제품이나 서비스를 처음 접했을 때, 제품을 둘러보거나 일부 기능을 소개하는 방식인데요. 회계 Saas 플랫폼인 Xero은 Tutorial 시스템을 제공해, 사용자가 손 쉽게 첫 사용을 이용하도록 돕고 있어요. 8. Dashboard filled with default data ✔️ 사용자가 처음 서비스를 이용할 때, 내용을 자동으로 채워주는 거예요. 예시를 통해 보면 더 이해가 잘 될텐데요. 우리가 구글 캘린더를 이용할 때, 자동으로 업무 시스템과 연동되어 캘린더에 스케쥴이 잡히는 것이라고 보면 되죠. 예시는 아티클에서 확인해 주세요. 9. Dashboard filled with sample data ✔️ 처음 시작할 때, 사용 방법에 필요한 내용들로 샘플 데이터를 구성하는 거죠. 즉, '이렇게 따라해라'라는 예시라 보면 좋아요. 대표적인 예시로 Trello를 들고 있는데요. 저는 figma나 Notion도 처음 시작하면 샘플 데이터가 차 있죠. 또는 템플릿을 이용할 수 있게 안내하면 좋겠네요. 10. Including a gamification element ✔️ 404 오류가 발생했을 때, 시간을 채울 수 있는 게임을 제공하는 건데요. 구글에서도 이러한 요소를 집어넣었죠. 지금은 어떻게 구성돼 있는지 모르겠네요. 아티클에서 Carwow를 예시로 들고 있는데요. ✔️ 자동차 구매 비교 사이트인 Carwow는 404 오류가 발생했을 때, 8비트 게임을 제공하여, '길을 찾는 법'을 은유적으로 표현하고 있어요. 이러한 방법은 사용자에게 전혀 책임을 묻지 않고, 서비스와 관련된 게임 요소를 제공하고 있어요. • 타이틀: Sorry, looks like we sent you the wrong way. Let us guide you back! • 디스크립션: Head to the Car Cooser to find your perfect car, or go back to the homepage.