좋은 빈 상태(Empty State)의 구조: 다음 행동을 유도하는 6가지 패턴

• 세 가지 빈 상태(Empty State) 유형: 첫 실행(first-run), 비워짐(cleared), 에러-빈 상태(error-empty), 각 유형은 서로 다른 카피(copy)가 필요함

• 하나의 주요 행동(primary action) 규칙: 빈 화면에 두 개의 동일한 비중을 가진 버튼을 절대 배치하지 말 것

• 카피는 가르쳐야 하며, 절대 사과하지 말 것: "항목을 찾을 수 없습니다"를 다음 단계로 대체할 것

• 모든 RAXXO 인터페이스에 적용하는 6가지 패턴

대부분의 빈 상태(Empty State)는 사고로 발생합니다. 아무도 그것을 디자인하지 않기 때문에, 기본값은 회색의 "데이터 없음" 문구와 슬픈 아이콘이 됩니다. 저는 빈 상태를 제가 만들 수 있는 가장 저렴한 온보딩(onboarding)으로 취급합니다. 왜냐하면 사용자는 데이터가 가득 찬 화면을 보기 전에 빈 상태를 먼저 보기 때문입니다.

빈 상태가 위장된 온보딩인 이유

새로운 사용자가 보는 첫 번째 화면은 거의 항상 비어 있습니다. 프로젝트도, 주문도, 저장된 항목도 없습니다. 그것은 실패 모드가 아닙니다. 그것은 실제 제품 소개이며, 사용자가 계속 진행할지 여부를 결정하는 바로 그 순간에 발생합니다.

저는 제 대시보드 중 하나에서 이 현상을 추적했습니다. 100개의 신규 계정 중 38개가 처음 20초 이내에 빈 목록을 마주했습니다. 만약 그 화면이 단순히 "아직 프로젝트가 없습니다"라고만 말한다면, 저는 사용자가 저에게 줄 수 있는 가장 집중력 있는 순간을 낭비하고 있는 것입니다. 그들은 아직 지루해하지 않았습니다. 아직 좌절하지도 않았습니다. 그들은 다음에 할 일을 찾고 있습니다.

그래서 저는 빈 상태를 세 가지 종류로 나누었으며, 하나의 템플릿이 세 가지 모두를 커버하게 두지 않습니다.

첫 번째는 첫 실행(first-run) 빈 상태입니다. 사용자가 이곳에 데이터를 한 번도 가져본 적이 없는 경우입니다. 이것은 순수한 온보딩(onboarding)입니다. 이 공간이 무엇을 위한 것인지 설명하고, 명확한 하나의 행동을 제공하는 것이 임무입니다.

두 번째는 비워짐(cleared) 빈 상태입니다. 사용자가 데이터를 가지고 있었고 그것을 완료한 경우입니다. 수신함이 0인 상태, 완료된 작업 목록, 결제 후 비워진 장바구니 등이 해당됩니다. 이것은 공허함이 아니라 작은 보상처럼 느껴져야 합니다. "모든 메시지를 확인했습니다"가 "메시지 없음"보다 언제나 더 낫습니다.

세 번째는 에러-빈(error-empty) 상태입니다. 무언가 실패한 경우입니다. 요청 시간이 초과되었거나 필터 결과가 없어서 목록이 비어 있는 상태입니다. 이것은 다시 다른 어조가 필요합니다. 왜냐하면 사용자가 원인을 제공한 것이 아니기에, 여기서 밝은 일러스트레이션을 사용하는 것은 조롱하는 것처럼 느껴질 수 있기 때문입니다.

카피(copy)를 한 단어라도 쓰기 전에 모든 빈 화면에 이 세 가지 태그 중 하나를 붙이기 시작했을 때, 제 인터페이스는 눈에 띄게 덜 혼란스러워졌습니다. 이전에는 똑같은 회색 박스가 세 가지 역할을 제대로 수행하지 못한 채 떠맡고 있었습니다. 이제 각 역할은 저마다의 처리를 받습니다. 이 구조적 교훈은 모든 좋은 시스템의 이면에 있는 원리와 같습니다. 제가 Claude Blueprint에서 마크업(markup)을 한 줄 쓰기 전에 컴포넌트 상태(component states)의 이름을 먼저 정의하는 것과 마찬가지로, 스타일을 입히기 전에 상태(state)의 이름을 먼저 정해야 합니다.

패턴 1과 2: 단일 주요 작업 규칙 (The Single Primary Action Rule)

제가 가장 적게 어기는 규칙은 이것입니다: 빈 상태(empty state)에는 정확히 하나의 주요 작업(primary action)만 있어야 합니다. 버튼처럼 보이는 버튼 하나만 두는 것입니다. 그 외의 모든 것은 텍스트나 보조 링크(secondary link)여야 합니다.

저는 이를 고통스러운 경험을 통해 배웠습니다. 한 프로젝트 화면의 초기 버전에는 동일한 비중을 가진 세 개의 버튼이 있었습니다: "프로젝트 생성(Create project)", "데이터 가져오기(Import data)", "튜토리얼 시청(Watch tutorial)". 세 버튼 모두 파란색이었고, 크기도 모두 같았습니다. 신규 사용자들이 이 중 어느 것도 클릭하는 비율은 저를 당혹스럽게 만들 정도로 낮았습니다. 세 가지 옵션이 동일한 시각적 비중(visual weight)을 가질 때, 뇌는 그 선택을 하나의 '업무'로 인식하며, 시작 단계(minute zero)에서의 업무는 사람들이 이탈하는 지점이 됩니다.

저는 이를 하나의 파란색 버튼으로 줄였습니다: "첫 번째 프로젝트를 생성하세요(Create your first project)". 나머지 두 개는 그 아래에 회색 텍스트 한 줄로 변경했습니다: "또는 파일에서 가져오기(or import from a file)". 첫 세션 내에서 어떤 행동이라도 취하는 사람들의 수가 급증했고, 저는 더 이상 이 규칙을 의심하지 않게 되었습니다.

패턴 1은 단일 주요 작업입니다. 패턴 2는 보조 문구(supporting line)입니다. 보조 문구는 명확한 경로를 원하지 않는 15%의 사용자를 위해 존재합니다. 가져오기 옵션을 숨기는 것이 아니라, 우선순위를 낮추는(demote) 것입니다. 시각적 계층 구조(visual hierarchy)가 교육 역할을 수행합니다: '이것이 대부분의 사람들이 하는 일이며, 만약 당신이 대다수가 아니라면 여기 조용한 문이 있습니다'라고 말이죠.

이제 제가 모든 빈 상태에 대해 실행하는 구체적인 체크리스트는 다음과 같습니다:

• 단 하나의 요소만 기본 버튼 (primary button) 스타일로 디자인합니다.

• 해당 버튼의 레이블은 '동사 + 목적어' 형태여야 합니다 (예: "시작하기"가 아닌 "제품 추가하기").

• 대안 경로(alternative path)는 버튼 형태가 아닌 텍스트 무게감(text-weight)으로 표현합니다.

• 전체 빈 영역 내에서 클릭 가능한 요소는 총 2개를 넘지 않아야 합니다.

마지막 포인트가 매우 중요합니다. 저는 요소가 어지럽게 배치된 한 빈 화면의 클릭 가능한 요소들을 세어보았는데, 도움말 아이콘, 두 개의 네비게이션 브레드크럼 (nav crumbs), 설정 기어 아이콘을 포함해 총 7개가 있었습니다. 콘텐츠가 전혀 없는 화면에 타겟이 7개나 있었던 것이죠. 저는 이를 버튼과 대안 링크, 딱 두 개로 줄였습니다. 스캔해야 할 대상이 적을수록 결정은 빨라지며, 새로운 계정에서 첫 번째 결정이 얼마나 빠른가가 게임의 전부입니다.

패턴 3과 4: 사과하는 대신 가르쳐주는 카피 (Copy)

기본적인 빈 상태(empty-state)의 카피는 사과문입니다. "결과를 찾을 수 없습니다.", "아직 아무것도 없습니다.", "죄송합니다, 항목이 없습니다."와 같은 식이죠. 사과하는 카피는 빈 화면을 사용자가 용서해야 할 문제로 취급합니다. 반면 가르쳐주는 카피는 이를 다음 단계의 학습으로 취급합니다.

패턴 3은 가르쳐주는 헤드라인 (teaching headline)입니다. 부재(absence)를 설명하는 대신, 기능의 역량(capability)을 설명하세요. 나쁜 예: "자동화 없음." 좋은 예: "자동화가 당신이 잠든 동안 작업을 대신 수행합니다." 두 번째 버전은 새로운 사용자에게 해당 기능이 무엇을 하는지 알려줍니다. 빈 화면은 다른 요소가 공간을 차지하기 위해 경쟁하지 않기 때문에, 기능을 설명하기에 완벽한 장소입니다.

저는 이 단 하나의 교체 방식만 사용하여 한 앱의 빈 상태 헤드라인 11개를 다시 작성했습니다. 무엇이 없는지가 아니라, 그것이 무엇을 하는지를 설명하세요. '저장된 검색' 기능의 경우, "저장된 검색 없음"에서 "검색어를 저장하여 새로운 매물이 일치할 때 알림을 받으세요"로 변경했습니다. 단어 수는 6단어 늘어났습니다. 하지만 명확성은 훨씬 더 높아졌습니다. 왜냐하면 새로운 사용자는 저장된 검색이 알림을 트리거한다는 사실을 정말로 몰랐기 때문입니다. 빈 상태가 그들을 가르쳐준 것입니다.

패턴 4는 상태 유형에 맞춰 톤 (tone)을 맞추는 것이며, 이는 앞서 언급한 세 가지 카테고스와 연결됩니다. 첫 실행 (First-run) 카피는 교육적이고 따뜻해야 합니다. 삭제된 상태 (Cleared)의 카피는 축하하는 느낌을 주며 간결해야 합니다. 오류로 인한 빈 상태 (Error-empty)의 카피는 담백하고 정직해야 하며, 재시도 액션 (retry action)을 포함해야 합니다.

다음은 동일한 화면인 알림 목록(notifications list)을 세 가지 방식으로 작성한 예시입니다.

• 첫 실행 (First-run): "알림이 필요한 사항이 생기면 여기에 표시됩니다. 시작하려면 알림을 켜주세요."

• 완료됨 (Cleared): "모든 알림을 확인했습니다. 좋습니다."

• 오류로 인한 빈 상태 (Error-empty): "알림을 불러올 수 없습니다. 재시도하거나 잠시 후 다시 확인해 주세요."

동일한 빈 목록이지만 세 가지 완전히 다른 메시지가 사용되었습니다. 이는 사용자가 완전히 다른 세 가지 이유로 빈 상태(empty state)에 도달했기 때문입니다. 오류 버전에는 재시도 버튼(retry button)이 제공됩니다. 완료된 버전에는 클릭 가능한 요소가 전혀 없는데, 사용자가 방금 작업을 마쳤으므로 더 이상 수행할 작업이 필요 없기 때문입니다. 첫 실행 버전에는 하나의 주요 액션(primary action)이 제공됩니다.

제가 계속해서 다시 배우고 있는 사실은, 빈 상태에서의 카피(copy)는 실제 UI 주변을 장식하는 요소가 아니라는 점입니다. 빈 상태에서 카피는 곧 UI 그 자체입니다. 화면에 다른 것이 없으므로 모든 단어가 하중을 견디는 구조적 역할을 합니다. 효과적인 인터페이스 카피(interface copy) 작성을 위한 더 깊은 맥락이 궁금하다면, Claude Blueprint에서 제가 어떻게 일관되게 프롬프트를 작성하는지 확인할 수 있습니다.

패턴 5와 6: 일러스트레이션의 비중과 완료 상태의 보상

패턴 5는 일러스트레이션의 절제(illustration restraint)입니다. 오류로 인한 빈 상태(error-empty state)에 크고 화려한 맞춤형 일러스트레이션을 사용하는 것은 상황에 맞지 않는(tone-deaf) 것으로 느껴집니다. 요청은 실패했는데 웃고 있는 만화 캐릭터를 보여주는 격이기 때문입니다. 저는 일러스트레이션을 첫 실행(first-run)과 완료(cleared) 상태에만 사용하며, 그 경우에도 크기를 작게 유지합니다.

수십 개의 빈 화면에 걸쳐 일관된 스타일을 유지하고 싶을 때는 Magnific를 사용하여 배치(batch)로 생성한 뒤, 크기를 대폭 줄입니다. 빈 목록에 1200px 크기의 히어로 일러스트레이션(hero illustration)을 사용하는 것은 비중(weight) 조절에 실패한 것입니다. 이는 사용자가 수행하기를 원하는 단 하나의 액션으로부터 주의를 분산시킵니다. 저는 빈 상태의 아트워크 크기를 너비 160px 정도로 제한합니다. 버튼이 화면에서 가장 눈에 띄는 요소로 남아야 합니다. 아트는 보조적인 역할을 해야 하며, 주인공(headline)이 되어서는 안 됩니다.

과도한 일러스트레이션에는 측정 가능한 비용이 따릅니다. 한 번 실행되는 화면(first-run screen)에 480KB 크기의 애니메이션 그래픽을 포함해 배포했더니, 중급 사양의 휴대폰에서 주요 버튼이 그려지는(paint) 시간이 거의 1초 가까이 지연되었습니다. 버튼이 핵심입니다. 예술 작품을 보여주기 위해 버튼을 지연시키는 것은 본말전도(the tail wagging the dog)입니다. 저는 이를 8KB 미만의 인라인 SVG(inline SVG)로 교체했고, 버튼은 즉시 나타났습니다.

패턴 6은 비워진 상태(cleared state)를 공백이 아닌 보상으로 취급하는 것입니다. 이는 대부분의 제품이 놓치는 부분입니다. 사용자가 받은 편지함을 비우거나 모든 작업을 완료했을 때 화면은 비게 되는데, 게으른 디자인은 혼란스러워하는 첫 방문 사용자에게 보여주는 것과 똑같은 "항목 없음" 메시지를 보여줍니다. 그것은 진정한 만족감을 느낄 수 있는 순간을 낭비하는 것입니다.

비워진 상태에 작은 보상을 제공하세요. 짧은 축하 문구, 미묘한 체크 표시, 혹은 방금 완료한 작업의 개수("오늘 12개의 작업 완료") 같은 것 말입니다. 저는 한 작업 관리 앱에 한 줄짜리 완료 메시지를 추가했는데, 다음 날 다시 앱을 찾아와 작업을 비우는 사용자 수가 증가했습니다. 완료하는 것이 아무것도 아닌 상태가 아니라 무언가 이루어낸 것처럼 느껴졌기 때문입니다.

비워진 상태가 성취감을 느끼는 자연스러운 순간이라면, 다음 루프(loop)를 제안하기에도 자연스러운 순간입니다. 강요하는 것이 아닙니다. 대기열을 막 비운 사용자에게 "다음 주 게시물을 예약할까요?"와 같이 부드럽게 제안하는 방식입니다. 저는 그러한 소셜 액션(social actions)을 Buffer를 통해 처리하여, 비워진 상태가 막다른 길(dead stop)이 아닌 다음 세션으로 이어지는 부드러운 진입로(on-ramp)가 되도록 합니다. 규칙은 그대로 유지됩니다. 보상 상태에서도 하나의 주요 액션(primary action)을 유지해야 합니다.

핵심 요약 (Bottom Line)

빈 상태(Empty states)는 예외적인 상황(edge cases)이 아닙니다. 빈 상태는 첫 화면이자, 완료된 화면이며, 오류가 발생한 화면입니다. 그리고 각각의 상태는 사용자를 안내할 기회이거나, 사용자를 놓칠 기회입니다. 단 한 마디의 문구를 쓰기 전에, 모든 빈 영역을 첫 실행(first-run), 비워짐(cleared), 또는 오류로 인한 빈 상태(error-empty)로 분류하세요. 그리고 정확히 하나의 주요 액션(primary action)을 부여하세요. 기능이 무엇인지 사과하는 대신, 해당 기능이 무엇을 하는지 알려주는 카피를 작성하세요. 일러스트레이션은 버튼이 화면에서 가장 눈에 띄는 요소로 남을 수 있도록 충분히 작게 유지하세요. 그리고 비워진 상태(cleared state)는 사용자가 달성한 결과이므로 보상처럼 다루세요.

저는 현재 출시하는 모든 인터페이스에 이 6가지 패턴을 체크리스트로 적용하고 있으며, 제 작업물에서 회색의 "데이터 없음(No data)" 박스는 기본적으로 사라졌습니다. 예전에는 막다른 길처럼 느껴졌던 화면들이 이제는 어딘가를 가리키고 있습니다. 인터페이스 카피와 컴포넌트 상태(component states)를 일관되게 유도하기 위해 제가 사용하는 전체 시스템을 원하신다면, Claude Blueprint에서 확인하실 수 있습니다. 가장 많이 보이는 빈 화면부터 시작하여 헤드라인을 먼저 다시 작성해 보세요. 그 변화 하나만으로도 충분한 가치를 얻을 수 있을 것입니다.

이 기사에는 제휴 링크가 포함되어 있습니다. 이 링크를 통해 가입하시면, 귀하에게 추가 비용 부담 없이 저에게 소정의 수수료가 지급될 수 있습니다. (광고)