2025년 8월 04일·5분
앱에서 설정 완료를 유도하는 빈 상태 디자인
혼란을 줄이고 사용자를 다음 성공적인 설정 단계로 안내하는 빈 상태 디자인 패턴 — 빠르게 적용할 수 있는 카피, 레이아웃, 체크리스트 포함.
혼란을 줄이고 사용자를 다음 성공적인 설정 단계로 안내하는 빈 상태 디자인 패턴 — 빠르게 적용할 수 있는 카피, 레이아웃, 체크리스트 포함.
빈 화면은 중립적이지 않습니다. 아무것도 보이지 않으면 사람들은 무엇을 해야 할지, 자신이 무언가를 빠뜨렸는지, 제품이 제대로 작동하는지 등을 추측하기 시작합니다. 설정 중에 그런 멈춤은 비용이 큽니다. "시작하려고 했는데"가 "나중에 다시 올게"가 되어버립니다.
빈 상태는 사용자가 아직 항목을 생성하거나 가져오거나 연결하지 않아 보여줄 내용이 없을 때 보이는 화면입니다. 로딩 화면이나 오류 메시지, 권한 경고와는 다릅니다. 가치를 얻기 바로 직전의 순간이며, 앱이 사용자가 첫 번째 의미 있는 결과에 도달하도록 도와야 하는 시점입니다.
좋은 빈 상태의 목적은 하나뿐입니다: 사용자가 가능한 가장 적은 사고로 다음 성공적인 행동으로 이동하게 만드는 것. 여기서 "성공적"이라는 것은 단순한 폼 제출이나 막연한 제품 투어가 아니라 첫 프로젝트, 연결된 데이터 소스, 첫 항목 생성 같은 실제 결과를 말합니다.
이런 순간은 팀이 생각하는 것보다 더 자주 나타납니다: 회원가입 후 첫 로그인, 완전히 새 워크스페이스, 항목이 아직 없는 기능 탭(프로젝트, 고객, 파일), 또는 가져오기를 건너뛴 설정 경로처럼 아무것도 없는 상태.
빈 상태가 제 역할을 할 때는 세 가지 질문에 빠르게 답합니다:
예시: Koder.ai에서 새 사용자가 새 워크스페이스를 열었고 앱이 하나도 없을 때, 강한 빈 상태는 아무것도 생성되지 않았음을 분명히 말하고 "첫 앱 생성" 같은 명확한 다음 행동을 제시하며 작은 안전 문구(예: 시작하면 소스 코드 내보내기와 스냅샷이 가능함)를 덧붙입니다. 목표는 "여긴 아무것도 없음"에서 "첫 작동 결과를 얻을 수 있음"으로 바꾸는 것입니다.
초보자에게 빈 화면은 앱이 멈춘 것처럼 보이거나 자신이 뭔가 잘못했나 싶은 느낌을 줍니다. 사람들은 빈틈을 빠르게 메우며, 보통은 제품에 불리하게 해석합니다.
대부분의 사람들은 다음 질문들을 마음속으로 묻습니다:
이 질문들에 깔린 감정이 행동을 이끕니다. 불확실성은 머뭇거리게 하고, 실수에 대한 두려움은 주요 버튼을 피하게 만들며, 인내심이 부족하면 몇 초 안에 명확한 다음 단계가 보이지 않으면 앱을 닫아버립니다.
신규 사용자용 빈 상태와 숙련 사용자용 빈 상태는 다른 문제를 해결합니다. 신규 사용자는 용어를 모르기 때문에 맥락과 안전을 원합니다. 돌아온 사용자는 속도를 원합니다: 항목을 빠르게 만들거나 데이터를 가져오거나 익숙한 동작을 반복할 수 있는 방법.
설정 빈 상태는 오류나 로딩 상태와도 다릅니다. 로딩은 "기다려주세요, 무언가 진행 중입니다"라고 말하고, 오류는 "문제가 발생했습니다, 이유는 이렇습니다"라고 말합니다. 설정 빈 상태는 "아직 아무것도 없습니다. 이건 정상입니다. 시작하는 방법은 이렇습니다"라고 안내해야 합니다.
구체적 예: 누군가 Koder.ai에서 새 워크스페이스의 Projects 페이지를 열었을 때, 그들은 기능을 생각하지 않습니다. 그들은 "프롬프트로 시작할까, 코드를 가져올까, 템플릿을 고를까, 그리고 이걸 하면 뭔가 망가질까?"라고 생각합니다. 빈 상태는 문서로 보내지 않고도 그 질문에 답해야 합니다.
좋은 빈 상태는 비어있게 느껴지지 않습니다. 이정표처럼 행동합니다: "여기가 무엇인지, 다음 클릭이 무엇인지" 알려줘야 합니다.
대부분의 설정 흐름에 잘 맞는 구조는 세 부분으로 나뉩니다:
설명은 간결하게 유지하세요. 화면을 설명하려면 단락이 필요하다면 사용자에게 너무 많은 생각을 요구하는 것입니다. "첫 프로젝트 추가"나 "첫 워크스페이스 생성" 같은 평이한 단어로 1~2문장 정도가 적당합니다.
그다음에는 하나의 주요 버튼으로 다음 단계를 분명히 하세요. 세 개의 동등한 버튼을 보여주면 사용자는 페이지를 이해하기 전에 경로를 선택해야 하므로 망설입니다. 대안(가져오기, 템플릿, 건너뛰기)을 제공해야 한다면 시각적으로 주요 액션보다 차분하게 배치하세요.
안심 문구는 흔한 걱정을 제거합니다: 실수할까, 시간 낭비일까, 기술이 필요할까. 이후에 무엇이 가능한지와 되돌릴 수 있는지에 대한 작은 힌트가 긴 설명보다 효과적입니다.
예시 첫 방문 "Projects" 화면 카피:
제목: 첫 프로젝트 시작하기
설명: 프로젝트는 앱 설정과 릴리스를 담습니다.
주요 액션: 프로젝트 생성
안심 문구: 약 2분 걸립니다. 언제든 이름을 바꿀 수 있습니다.
제품이 빌드 방식을 여러 가지로 지원한다면(예: 채팅으로 빌드, 코드 가져오기, 템플릿 사용), 기본은 "생성(Create)"으로 두고 "가져오기(Import)"와 "템플릿 사용"은 보조 액션으로 아래에 두세요.
빈 상태가 실패하는 이유는 카피가 기능을 설명하려고 하고, 사용자에게 무엇을 얻는지 말하지 않을 때입니다. 사용자에게 빠르게 답해야 할 질문은: 이 화면은 무엇인가? 여기서 왜 아무것도 없지? 다음에 무엇을 해야 하지? 입니다.
간단한 헤드라인 공식은 결과 + 대상입니다. 결과와 사용자가 만들 항목을 이름으로 쓰고 내부 기능 이름만 쓰지 마세요.
본문에서는 이것이 무엇인지 + 왜 중요한지를 1~2문장으로 적으세요:
"고객은 당신이 판매하는 사람들입니다. 지금 한 명 추가하면 송장 발행과 결제 추적을 시작할 수 있습니다."
CTA는 명확한 동사로 시작하고 구체적 명사를 포함해야 합니다. 여러 경로가 있을 때는 "Get started" 같은 모호한 버튼을 피하세요.
위험하게 느껴지는 선택 옆에는 마이크로카피를 추가하세요. 작은 안심 문구가 긴 설명보다 효과적입니다:
제품이 사용자를 위한 출력을 생성한다면(예: Koder.ai), 사람들이 최종 버전에 커밋하는 것이 아니라는 점을 명확히 하세요: "초안을 생성합니다. 배포 전에 검토하고 편집하세요." 같은 문구가 도움이 됩니다.
좋은 빈 상태는 안내판처럼 읽혀야지 포스터처럼 경쟁하지 않아야 합니다. 레이아웃은 한번에 훑어보고 이해하고 행동할 수 있도록 명확한 순서를 가져야 합니다.
사람의 시선 흐름에 맞춰 간단한 계층을 사용하세요: 헤드라인, 짧은 문장, 주요 CTA, 그 다음 차분한 보조 액션(가져오기, 템플릿, 건너뛰기).
주요 버튼은 메시지 가까이에 두세요. 사용자가 읽고 스크롤한 뒤 결정을 내려야 하면 멈추는 경우가 많습니다. 일반적인 패턴은 헤드라인+본문+CTA를 촘촘한 블록으로 묶고 그 블록과 다른 요소(내비게이션, 푸터, 사이드패널) 사이에 충분한 여백을 두는 것입니다.
아이콘과 작은 일러스트는 스캔을 돕지만 의미를 더할 때만 사용하세요. "프로젝트 없음" 옆의 폴더 아이콘은 유용하지만 무작위 마스코트는 아닙니다. 일러스트를 쓴다면 작게, 헤드라인 위에 배치해 CTA와 경쟁하지 않게 하세요.
가장 강력한 패턴 중 하나는 성공의 작은 미리보기를 보여주는 것입니다: 샘플 카드, 테이블의 데모 행 하나, 흐릿한 예제 타일 같은 것들. Koder.ai 같은 도구에서는 빈 "앱" 화면이 하나의 샘플 앱 타일(이름, 상태, 마지막 업데이트)을 보여줘서 사용자가 무엇을 만들게 될지 즉시 이해하게 할 수 있습니다.
빈 화면에 도달한 사용자는 보통 세 가지 중 하나를 원합니다: 새로 시작하기, 데이터를 가져오기, 또는 빠르게 스타터로 시작하기. 좋은 빈 상태는 사용자가 제품을 공부하지 않아도 이 경로들을 분명하게 보여줍니다.
첫 성과가 새 항목을 만드는 것일 때는 "생성(Create)"을 앞세우세요: 프로젝트, 워크스페이스, 페이지, 첫 레코드 등이 해당합니다. 이 방법은 사용자가 빠르게 끝낼 수 있고 행동을 되돌릴 수 있을 때 가장 잘 작동합니다.
생성에 시간이 오래 걸린다면 더 작은 첫 단계(예: "초안 만들기")로 쪼개서 사용자가 잠기지 않도록 하세요.
대부분의 신규 사용자가 기존 시스템, 파일, 계정을 연결하려고 올 가능성이 높다면 "가져오기(Import)"를 앞세우세요. 빈 상태에서 무엇을 가져오는지와 가져온 뒤 어떤 결과(예: 필드 매핑, 항목 생성)를 얻을 수 있는지 명확히 보여줘야 합니다.
주요 CTA를 선택하는 현실적인 방법은 컨텍스트를 활용하는 것입니다. 사용자가 이전에 마이그레이션 관련 콘텐츠를 보았다면 Import를 강조하세요. 사용자가 빈 "새 프로젝트" 버튼을 눌러 왔다면 Create를 강조하세요. 설정이 복잡하면 Template을 강조하세요.
제품에 공통된 시작점이 있고 사용자가 주로 적응하려는 경우 템플릿을 앞세우세요. 템플릿 이름은 기능명이 아니라 결과로 명명하세요(예: "영업 파이프라인", "주간 플래너").
"샘플 데이터로 시도하기(try with sample data)" 옵션은 두려움을 줄여줍니다. 삭제할 수 있음을 분명히 하세요. 채팅 우선 빌더인 Koder.ai의 경우 샘플 프로젝트는 사용자가 자신의 프롬프트를 작성하기 전에 작동하는 앱의 형태를 보여줄 수 있습니다.
빈 화면은 중립적이지 않습니다. 최고의 빈 상태는 다음 성공 행동이 명확하고, 안전하며, 빠르게 느껴지게 만듭니다.
예: 새 CRM에서 누군가 빈 "연락처" 탭을 보면 가장 빠른 성과는 "첫 연락처 추가"입니다. 이름+이메일만 요구하고 "CSV 가져오기"를 보조로 제공하며 나중에 필드를 업데이트할 수 있음을 안심시켜 주세요.
대부분의 "멈춘" 빈 상태는 한 가지 이유로 실패합니다: 다음 행동이 위험하거나 불분명하게 느껴지게 만듭니다.
동등하게 보이는 세 개의 버튼을 보여주면 사용자는 멈춥니다. 하나의 주요 행동과 하나의 보조만 두세요. 나머지는 "더 많은 옵션" 아래에 숨기세요.
"강력한 대시보드, 유연한 역할, 고급 설정" 같은 문구는 지금 당장 무엇을 해야 하는지 알려주지 않습니다. 대신 클릭 후 얻게 될 결과를 적으세요.
예:
긴 폼은 헌신처럼 느껴집니다. 필요한 정보는 먼저 얻은 성과 후에 요청하세요. 이름, 회사 규모, 역할, 목표를 다 묻는 대신 "프로젝트 이름"만 먼저 묻고 나머지는 선택으로 두세요.
유머는 괜찮지만 사용자가 명확함을 필요로 하는 곳에서는 피하세요. "여긴 아무것도 없음" 같은 문구는 기회를 버립니다. 클릭 후에 무슨 일이 일어날지 정확히 알려주고, 무엇이 일어나지 않을지도 명확히 하세요.
일부 사용자는 처음부터 생성할 수 없습니다. 실질적인 백업 경로를 제공하세요: 가져오기, 템플릿, 샘플 예제 등. 예를 들어 Koder.ai를 사용하는데 아이디어가 없다면 "샘플 앱으로 시작"은 사용자가 전체 사양을 쓰지 않고도 작동 화면에 도달하게 합니다.
신규 사용자는 약 5초 안에 이 화면이 무엇인지, 왜 중요한지, 다음에 무엇을 해야 하는지 이해해야 합니다.
안심 문구는 망설임을 행동으로 바꾸는 요소입니다. CTA 근처에 "나중에 변경할 수 있습니다"나 "확인 전까지는 공개되지 않습니다" 같은 짧고 구체적인 문장을 추가하세요.
간단한 테스트: 동료에게 화면을 5초 동안 보게 한 뒤 주요 버튼을 클릭하면 무슨 일이 일어날지 말해보라고 하세요. 대답하지 못하면 카피나 계층을 조여야 합니다.
채팅 우선 빌더인 Koder.ai로 설정 흐름을 만들 때도 동일한 체크리스트가 적용됩니다. 빈 상태는 하나의 성공적인 다음 행동을 초대해야 합니다: 템플릿에서 시작, 데이터 가져오기, 또는 편집 가능한 첫 작동 버전 생성 등.
솔로 창업자가 Koder.ai에 가입하고 새 워크스페이스를 엽니다. Projects 화면에 앱이 하나도 없어 무엇이 "좋은"지 모릅니다.
빈 테이블 대신 빈 상태는 짧은 약속, 명확한 다음 단계, 작은 안전 문구를 보여줍니다. 예시 카피와 CTA는 다음과 같습니다(시간 추정은 검증이 필요합니다):
Your workspace is empty.
Create your first app in 5 minutes. Start with a template or describe what you want in plain English.
[Create your first app]
Secondary: Import existing code | Browse templates
Note: You can export the source code anytime.
창업자가 Create your first app를 클릭하면 다음 화면은 한 가지 간단한 질문을 합니다: "무엇을 만들고 있나요?" 단일 입력과 2개의 예시 프롬프트(예: "소규모 에이전시용 CRM", "가입 폼 있는 랜딩 페이지")를 제공합니다. 경로는 좁게 유지하세요: 하나의 명확한 필드, 하나의 명확한 버튼.
두 번째 화면은 빠른 계획 검토(기능, 페이지, 데이터)와 빌드 단계 및 작동 미리보기를 이어갈 수 있습니다. 첫 성공 순간은 미리보기에서 실제로 무언가를 할 수 있을 때입니다(예: 레코드 추가, 테스트 가입 제출).
데이터가 생기면 돌아온 사용자는 같은 빈 상태를 다시 보지 않아야 합니다. Projects 화면은 "최근 앱" 뷰로 전환하고 하나의 두드러진 빠른 액션(예: New app)과 더 작은 행동들(예: Snapshots, Deploy)을 사용자의 이전 활동에 따라 표시할 수 있습니다.
빈 상태가 제 역할을 하는지 확인하려면 몇 가지 지표를 추적하세요:
이번 주에 하나의 설정 흐름을 고르세요. 이탈이 가장 큰 흐름이나 신규 사용자가 가장 먼저 만나는 흐름을 선택하세요. 그 흐름의 빈 상태를 다시 써서 세 가지 질문에 빠르게 답하게 만드세요: 이게 무엇인가? 지금 왜 해야 하나? 다음 클릭은 무엇인가?
변경은 작게 유지하세요. 온보딩 전체를 재설계하는 것이 아니라 첫 성공 행동을 명확하게 만드는 것입니다.
간단한 1주 계획:
한 번의 성공을 얻으면 표준화하세요. 빈 상태에 대한 내부 패턴(간격, 헤드라인 스타일, 아이콘/일러스트 규칙, 일관된 CTA 레이아웃)을 만드세요. 팀들이 같은 구조를 따르면 사용자는 한 번 배우기만 해도 모든 곳에서 더 빠르게 움직입니다.
새 앱을 만들고 빠르게 설정 단계를 프로토타입해보고 싶다면, Koder.ai (koder.ai)는 Planning Mode에서 흐름 초안을 작성하고 첫 버전을 생성한 뒤 사람들이 실제로 어디서 머무르는지 보고 기반으로 반복하는 데 도움을 줄 수 있습니다.
빈 상태는 사용자가 아직 항목을 생성하거나 가져오거나 연결하지 않아 보여줄 내용이 없을 때 보이는 화면입니다. 이 화면은 사용자가 무엇을 해야 하는지 추측하게 만들지 않고, 화면이 무엇을 위한 것인지 설명하고 다음에 성공적인 행동으로 이어지도록 안내해야 합니다.
로딩 화면은 “잠시만요, 무언가 진행 중입니다”라고 말하고, 오류 상태는 “문제가 발생했습니다, 이유는 이렇습니다”라고 알립니다. 반면 설정 빈 상태는 “아직 아무것도 없습니다. 이건 정상입니다”라고 안내한 뒤 사용자가 생성, 가져오기, 또는 템플릿으로 시작해 첫 결과를 얻을 수 있도록 이끕니다.
빠르게 세 가지를 답하도록 하세요: 이 화면이 무엇인지, 왜 비어 있는지, 이제 무엇을 해야 하는지. 사용자가 몇 초 안에 이걸 이해하지 못하면 멈칫하거나 잘못된 행동을 하거나 앱을 닫을 가능성이 높아집니다.
간단한 구조를 사용하세요: 이 영역이 무엇을 위한 것인지 짧게 설명하고, 분명한 주요 액션 하나를 제시하며, 걱정이나 노력을 줄이는 안심 문구 하나를 덧붙입니다. 문장은 짧고 명확해야 사용자가 클릭할 것을 빠르게 판단할 수 있습니다.
기본적으로 하나의 주요 버튼을 두고 나머지는 명확히 보조로 만드세요. 동일한 중요도로 보이는 버튼이 여러 개 있으면 사용자는 선택을 못하고 멈춥니다.
‘Create’(생성)를 앞세우세요: 새로 만드는 것이 가장 빠른 가시적 성과일 때(첫 프로젝트나 첫 레코드 등). ‘Import’(가져오기)를 앞세우세요: 대부분의 신규 사용자가 기존 데이터를 가지고 올 가능성이 높을 때. ‘Template’(템플릿)를 앞세우세요: 사용자가 속도와 시작점이 더 중요할 때.
헤드라인은 결과 + 객체 형태로 쓰세요(예: “Create your first project” → “첫 프로젝트 만들기”). 본문은 클릭 후에 무슨 일이 일어나는지 한 문장으로 적어 예측 가능하게 하세요. CTA는 동사로 시작하고 구체적 명사를 포함해야 합니다(예: “Create a project”, “Import contacts”).
헤드라인, 짧은 문장, 주요 버튼을 한 블록으로 묶고 분명한 시각적 계층을 만드세요. 보조 액션은 더 차분하게 두고 주요 버튼이 페이지 아래로 밀려나지 않게 하세요. 작은 아이콘이나 미리보기 샘플은 스캔을 돕지만 무작위 마스코트는 피하세요.
주요 버튼 옆에 짧은 안전 문구를 두세요. 예: “이후에 변경할 수 있습니다”, “게시되기 전까지는 공개되지 않습니다”. Koder.ai 같은 도구라면 스냅샷/롤백이나 소스 코드 내보내기와 같은 되돌리기 수단을 언급해도 좋습니다.
빈 화면을 본 횟수, 주요 CTA 클릭률, 그리고 그 빈 상태가 유도하는 마일스톤 완료율을 추적하세요. 또한 처음 방문에서 작동하는 미리 보기까지 걸린 시간과 빈 상태에서 다음 단계 사이의 이탈률도 확인해야 합니다. 빈 상태가 클릭은 얻어도 실제 결과로 이어지지 않을 수 있습니다.