솔직히 저는 빈 화면을 디자인이라고 생각하지 않았습니다. '데이터가 없습니다' 한 줄이면 충분하다고 여겼으니까요. 그 생각이 바뀐 건 B2B SaaS 대시보드 외주를 진행하면서입니다. 빈 상태 화면 하나 바꿨을 뿐인데 7일 활성화율이 38%에서 61%로 뛰었습니다. 그때 처음 깨달았습니다. 빈 화면은 디자인의 빈 공간이 아니라, 사용자가 이탈하거나 남거나를 결정하는 가장 중요한 접점이라는 것을.
Empty State 설계, 왜 한 줄 텍스트로는 안 되는가
Empty State란 앱이나 서비스에서 보여줄 콘텐츠가 없을 때 나타나는 화면 상태를 의미합니다. 쉽게 말해 장바구니가 비어 있거나, 검색 결과가 없거나, 처음 가입해서 아직 데이터가 없는 그 순간입니다.
제가 직접 겪어보니, 이 순간에 아무런 안내 없이 텍스트 한 줄만 남겨두면 사용자는 '내가 뭔가 잘못한 건가'라는 불안감을 느낍니다. 실제로 제가 외주를 진행한 B2B SaaS 대시보드에서는 최초 로그인 후 빈 대시보드가 그냥 '데이터가 없습니다'라고만 표시되고 있었습니다. 신규 가입자 입장에서는 서비스가 고장 난 건지, 자신이 세팅을 잘못한 건지 알 수가 없는 구조였습니다.
저는 이 화면을 다음 네 가지 요소로 재구성했습니다.
- 상황을 설명하는 일러스트
- 현재 상태를 안심시키는 한 줄 설명
- 다음 행동을 유도하는 CTA(Call to Action) 버튼
- 선택지를 하나 더 제공하는 보조 경로
여기서 CTA란 '지금 바로 첫 프로젝트 만들기'처럼 사용자가 즉각 행동을 취할 수 있도록 설계된 버튼 또는 링크를 의미합니다. 이 네 가지를 갖추자 7일 활성화율이 23%p 올랐습니다. 이후 외주 5건에 같은 구조를 컴포넌트 라이브러리로 만들어 재사용했고, 평균적으로 7일 활성화율이 18%p 개선됐습니다.
UX 업계에서는 이 구조를 오래전부터 강조해 왔습니다. Nielsen Norman Group의 연구에 따르면, 빈 상태 화면에 명확한 행동 유도 문구가 포함될 경우 사용자 과업 완료율이 유의미하게 상승한다고 밝히고 있습니다(출처: Nielsen Norman Group).
Jetpack Compose로 구현하는 빈 상태 화면
설계가 결정됐다면 이걸 실제 코드로 어떻게 구현하는지가 문제입니다. 안드로이드 개발에서 저는 Jetpack Compose를 사용했는데, 처음에는 이 구조를 코드로 옮기는 과정이 낯설었습니다.
Jetpack Compose란 안드로이드의 선언형 UI 프레임워크로, 기존 XML 방식 대신 Kotlin 코드로 화면을 구성하는 방식입니다. 쉽게 말해 화면의 각 요소를 함수처럼 정의하고, 상태가 바뀌면 화면이 자동으로 다시 그려지는 구조입니다.
빈 상태 화면을 Compose로 구현할 때 핵심은 Column 컴포저블 안에 Surface를 두 개로 분리하는 것입니다. 상단 Surface에는 일러스트를 배치하고, 하단 Surface에는 텍스트와 버튼을 쌓습니다. 여기서 Composable이란 Compose에서 화면의 각 요소를 정의하는 함수 단위를 의미합니다. @Composable 어노테이션을 붙여서 선언하고, 미리보기를 위해 @Preview 어노테이션도 함께 사용합니다.
제가 직접 써봤는데, 이 구조에서 modifier를 잘 다루는 게 처음엔 꽤 헷갈립니다. fillMaxWidth, fillMaxSize, padding 등을 적절히 조합해야 일러스트와 텍스트가 디자인 시안과 정확히 맞아떨어집니다. Figma에서 색상 변수를 먼저 Color.kt 파일로 옮기고 나서 작업을 시작하면 색 통일 문제를 미리 방지할 수 있습니다.
일러스트 소스로는 Blush의 모노크로매틱 키트를 활용했는데, 인터페이스 색상 팔레트와 통일감이 잘 맞았습니다. 모노크로매틱이란 단일 색상 계열에서 명도와 채도만 변화를 준 배색 방식으로, 화면 전체의 시각적 일관성을 유지하는 데 효과적입니다. SVG나 PNG로 익스포트한 후 drawable 폴더에 넣고 painterResource로 불러오면 됩니다.
실제로 안드로이드 외주 1건에 이 구조를 그대로 적용했을 때, 디자이너가 넘겨준 Figma 시안과 최종 Compose 결과물 사이의 간격이 눈에 띄게 줄었습니다. Figma-to-Compose 과정을 한 영상에서 다 보여주는 자료가 드문데, 이 방식은 디자이너에게도 '내 디자인이 코드에서 어떻게 살아나는지' 명확하게 설명할 수 있다는 점에서 협업 효율도 높아졌습니다.
빈 상태 화면 설계에서 놓치기 쉬운 것들
솔직히 이건 예상 밖이었습니다. 빈 상태를 하나로 통일하면 끝날 거라고 생각했는데, 실제로 운영하다 보면 시나리오가 네 가지로 갈립니다.
- 첫 사용: 아직 아무것도 없는 상태, "지금 시작해볼까요?" 톤
- 삭제 후: 사용자가 직접 비운 상태, "모두 정리됐습니다" 확인 톤
- 검색 결과 없음: 검색어가 맞지 않는 상태, "이렇게 바꿔보세요" 제안 톤
- 오류 후: 시스템 문제로 비어있는 상태, "잠시 후 다시 시도해주세요" 안심 톤
제 경험상 이건 좀 다릅니다. 대부분의 서비스가 '검색 결과 없음'까지는 어떻게든 챙기는데, '오류 후' 빈 상태는 그냥 일반 에러 메시지로 때우는 경우가 많습니다. 사용자 입장에서 이 두 상태는 느낌이 완전히 다른데도요.
포트폴리오 사이트의 빈 검색 결과 화면을 리디자인할 때도 같은 문제를 만났습니다. 기존에는 'No results' 한 줄이 전부였는데, '검색어를 더 짧게 해 보세요'라는 제안과 '인기 작품 3개 바로 보기'라는 복구 경로를 두 가지로 나눠 넣었더니 사용자가 페이지를 이탈하는 대신 대안 경로를 클릭하기 시작했습니다.
카피 라이팅(Copy Writing), 즉 화면에 쓰이는 문구의 톤과 선택도 중요합니다. 카피 라이팅이란 UI 안의 버튼 텍스트, 설명 문구, 안내 메시지 등을 사용자의 행동을 유도하거나 불안을 해소하는 방향으로 작성하는 작업입니다. 같은 빈 상태 화면이라도 첫 사용과 오류 후의 문구는 달라야 한다는 뜻입니다. Google Material Design 가이드라인은 이런 상황별 빈 상태 설계의 원칙을 명확하게 정리해 두고 있습니다(출처: Google Material Design).
다크 모드에서의 빈 상태 처리나 AI 생성 일러스트 활용은 아직 명확한 표준이 없는 상태입니다. 이 부분은 별도로 정리가 필요해 보이고, SaaS, 이커머스, 콘텐츠 플랫폼 각각의 도메인에 맞는 가이드도 분리해서 다뤄야 할 것 같습니다.
빈 화면은 서비스에서 가장 방치되기 쉬운 곳이지만, 동시에 가장 빠르게 개선 효과를 볼 수 있는 곳이기도 합니다. 지금 운영 중인 서비스에 '데이터가 없습니다'만 남아 있다면, 일러스트 한 장과 CTA 하나를 넣는 것부터 시작해 보시길 권합니다. 제가 경험한 수치가 모든 서비스에 동일하게 나타나리라는 보장은 없지만, 방향 자체는 틀리지 않습니다.