“웹사이트 온보딩 화면” 제대로 만드는 방법

들어가며

웹사이트를 만들다 보면 이런 상황을 한 번쯤 겪게 됩니다.

회원가입까지는 했는데 사용자가 아무것도 하지 않습니다.

로그인은 했는데 다음에 무엇을 해야 할지 모르고 나갑니다.
기능은 많은데 어디서부터 사용해야 하는지 찾지 못합니다.

개발자 입장에서는 당연히 보이는 기능인데, 처음 방문한 사용자에게는 전혀 당연하지 않을 수 있습니다.

이럴 때 필요한 것이 웹사이트 온보딩 화면입니다.

온보딩은 단순하게 “우리 서비스에는 이런 기능이 있습니다”라고 설명하는 화면이 아닙니다. 사용자가 웹사이트에 처음 들어왔을 때 서비스를 이해하고, 첫 번째 행동까지 자연스럽게 이어지도록 도와주는 과정에 가깝습니다.

그래서 온보딩 화면을 만들 때 가장 중요한 것은 많은 정보를 보여주는 것이 아니라 사용자가 다음에 무엇을 해야 하는지 쉽게 알 수 있도록 만드는 것입니다.

웹사이트 온보딩 화면은 왜 필요한가?

처음 서비스를 사용하는 사람의 입장에서 생각해보면 답은 간단합니다.

서비스를 처음 방문하면 모든 것이 낯섭니다.

메뉴가 여러 개 있고 버튼도 많습니다.
회원가입을 했는데 대시보드가 나타나고, 그래프와 숫자까지 보입니다.

서비스를 만든 사람에게는 익숙하지만 처음 방문한 사람에게는 오히려 복잡하게 느껴질 수 있습니다.

이때 온보딩 화면이 사용자의 시선을 한 곳으로 모아줍니다.

예를 들어 프로젝트 관리 서비스라면 처음부터 모든 기능을 설명하기보다는

“첫 번째 프로젝트를 만들어보세요.”

라는 행동을 먼저 안내하는 것이 좋습니다.

사용자가 프로젝트를 하나 만들어보면 그다음에는 자연스럽게 팀원을 초대하거나 작업을 등록하는 과정을 경험할 수 있습니다.

즉, 좋은 온보딩은 기능을 설명하는 것보다 사용자가 직접 첫 경험을 하도록 만드는 것에 초점을 둡니다.

온보딩 화면의 기본 구조부터 잡아보기

처음 웹사이트 온보딩을 만든다면 복잡하게 시작할 필요가 없습니다.

다음 정도의 구조만으로도 충분합니다.

[환영 메시지]

서비스를 처음 사용하시나요?

서비스를 이용하기 위한
간단한 설정을 시작해보세요.

[시작하기]

버튼을 클릭하면 다음 단계로 넘어갑니다.

1단계
프로필 설정

이름과 기본 정보를 입력해주세요.

[다음]

그다음에는 핵심 기능을 안내합니다.

2단계
첫 번째 작업 만들기

이제 첫 번째 작업을 만들어보세요.

[작업 만들기]

마지막에는 실제 서비스 화면으로 연결합니다.

준비가 끝났습니다.

이제 서비스를 시작해보세요.

[대시보드로 이동]

이 정도만 만들어도 기본적인 온보딩 흐름이 만들어집니다.

첫 화면에서 너무 많은 것을 설명하지 않기

온보딩을 만들면서 가장 쉽게 하는 실수가 있습니다.

바로 너무 많이 설명하는 것입니다.

서비스의 모든 기능을 설명하고 싶어집니다.

“우리 서비스에는 A 기능도 있고 B 기능도 있으며 C 기능에서는 이런 것도 할 수 있습니다.”

개발자 입장에서는 친절한 설명이라고 생각할 수 있습니다.

하지만 사용자는 그렇게 생각하지 않을 가능성이 높습니다.

처음 방문한 사용자에게 필요한 것은 서비스의 전체 매뉴얼이 아닙니다.

“그래서 지금 뭘 하면 되는데?”

이 질문에 답해주는 것이 훨씬 중요합니다.

따라서 첫 온보딩 화면에서는 핵심 메시지 하나와 주요 행동 하나 정도만 보여주는 것이 좋습니다.

온보딩 화면에서 가장 중요한 것은 CTA 버튼

온보딩을 만들 때 버튼을 그냥 배치하면 안 됩니다.

사용자가 다음 단계에서 무엇을 해야 하는지 버튼 이름만 보고 알 수 있어야 합니다.

예를 들어

확인

보다는

프로젝트 만들기

가 훨씬 명확합니다.

다음

보다는 상황에 따라

프로필 설정하기

첫 작업 만들기

대시보드 시작하기

처럼 구체적으로 작성하는 편이 좋습니다.

이 버튼을 흔히 CTA(Call To Action)라고 합니다.

온보딩에서는 CTA가 특히 중요합니다.

사용자의 시선을 끌고, 다음 행동을 결정하게 만드는 요소이기 때문입니다.

진행 단계를 보여주면 이탈을 줄이는 데 도움이 된다

온보딩 단계가 여러 개라면 사용자가 현재 어디까지 진행했는지 알 수 있도록 만들어주는 것도 좋습니다.

예를 들어

● ─── ○ ─── ○
1단계   2단계   3단계

또는

2 / 3 단계

처럼 표시할 수 있습니다.

사용자는 현재 위치를 알 수 있고, 앞으로 얼마나 남았는지도 예상할 수 있습니다.

특히 온보딩이 5단계, 6단계 이상으로 길어진다면 이런 진행 표시가 더 중요해집니다.

다만 여기서도 주의할 점이 있습니다.

온보딩 자체가 너무 길어지면 사용자는 중간에 포기할 수 있습니다.

가능하다면 핵심 설정만 먼저 받고 나머지는 서비스를 사용하면서 자연스럽게 설정하도록 분리하는 방법도 생각해볼 필요가 있습니다.

모든 기능을 온보딩에서 알려줄 필요는 없다

웹사이트에 기능이 20개 있다고 해서 온보딩에서 20개를 모두 설명할 필요는 없습니다.

오히려 중요한 기능부터 보여주는 것이 좋습니다.

예를 들어 쇼핑몰이라면

회원가입 → 상품 검색 → 상품 확인 → 구매

정도의 핵심 흐름을 먼저 경험하게 만들 수 있습니다.

관리자 서비스라면

로그인 → 프로젝트 생성 → 데이터 등록 → 결과 확인

처럼 실제 서비스의 주요 사용 흐름을 기준으로 온보딩을 구성할 수 있습니다.

이렇게 생각하면 온보딩 화면을 디자인하는 것이 조금 쉬워집니다.

“우리 서비스의 첫 번째 성공 경험은 무엇인가?”

이 질문부터 정해보면 됩니다.

웹사이트 온보딩과 튜토리얼은 어떻게 다를까?

온보딩 화면을 만들다 보면 튜토리얼과 헷갈리는 경우가 많습니다.

둘은 비슷하지만 목적이 조금 다릅니다.

온보딩은 사용자가 서비스에 적응하고 첫 번째 행동을 시작하도록 돕는 것에 가깝습니다.

반면 튜토리얼은 특정 기능을 어떻게 사용하는지 알려주는 것에 가깝습니다.

예를 들어 새로운 프로젝트 관리 서비스에 가입했다고 생각해보겠습니다.

온보딩에서는

“첫 번째 프로젝트를 만들어보세요.”

라고 안내합니다.

프로젝트를 만든 이후 특정 기능을 처음 사용할 때는

“이 버튼을 누르면 작업을 추가할 수 있습니다.”

와 같이 튜토리얼을 제공할 수 있습니다.

결국 둘을 적절하게 조합하면 사용자 경험이 좋아집니다.

개발할 때는 온보딩 상태를 어떻게 관리할까?

실제로 웹사이트를 개발한다면 온보딩을 한 번 보여주고 끝내는 것이 아닙니다.

사용자가 어디까지 완료했는지를 관리해야 합니다.

간단한 서비스라면 사용자 정보에 다음과 같은 값을 둘 수도 있습니다.

{
  onboardingCompleted: false
}

사용자가 모든 과정을 완료하면

{
  onboardingCompleted: true
}

로 변경합니다.

그리고 로그인할 때 상태를 확인해서

if (!user.onboardingCompleted) {
  showOnboarding();
} else {
  showDashboard();
}

와 같은 방식으로 화면을 분기할 수 있습니다.

서비스 규모가 커진다면 온보딩 단계를 별도의 상태값으로 관리할 수도 있습니다.

{
  onboardingStep: 2,
  onboardingCompleted: false
}

이렇게 하면 사용자가 중간에 브라우저를 닫더라도 다시 접속했을 때 이전 단계부터 이어갈 수 있습니다.

온보딩은 나중에 계속 개선해야 한다

처음 만든 온보딩이 완벽할 가능성은 높지 않습니다.

실제 사용자가 들어오기 시작하면 예상하지 못했던 문제가 발견됩니다.

예를 들어 개발자는 3단계까지 쉽게 진행할 것이라고 생각했는데 실제 사용자들은 2단계에서 계속 이탈할 수 있습니다.

그렇다면 2단계의 설명이 어려운 것인지, 입력해야 할 정보가 너무 많은 것인지, 버튼이 눈에 잘 보이지 않는 것인지 확인해야 합니다.

이런 데이터를 바탕으로 화면을 조금씩 수정하는 것이 좋습니다.

결국 온보딩은 한 번 디자인하고 끝나는 기능이라기보다 사용자 행동을 보면서 계속 개선하는 UX 영역에 가깝습니다.

좋은 온보딩 화면을 만들기 위한 체크리스트

웹사이트 온보딩을 만들기 전에 다음 항목을 확인해보면 좋습니다.

• 처음 방문한 사용자가 무엇을 해야 하는지 알 수 있는가?
• 첫 화면에 너무 많은 정보가 들어가 있지는 않은가?
• CTA 버튼의 문구가 명확한가?
• 현재 진행 단계를 알 수 있는가?
• 온보딩 단계가 지나치게 길지는 않은가?
• 사용자가 실제 핵심 기능을 경험할 수 있는가?
• 중간에 나갔다가 다시 들어와도 진행 상태가 유지되는가?
• 온보딩을 건너뛸 수 있어야 하는 서비스인가?
• 모바일 화면에서도 사용하기 편한가?

이 정도만 확인해도 처음 만든 온보딩 화면에서 발생하는 실수를 상당 부분 줄일 수 있습니다.

결국 온보딩의 목적은 하나다

웹사이트 온보딩을 만들면서 가장 기억해야 할 것은 이것이라고 생각합니다.

온보딩은 사용자를 붙잡아 놓고 서비스 사용법을 전부 설명하는 화면이 아닙니다.

처음 방문한 사용자가 서비스에 대해 막연하게 느끼는 순간,

“아, 이걸 먼저 하면 되는구나.”

라고 생각하게 만들어주는 장치에 가깝습니다.

그래서 화려한 애니메이션이나 수많은 안내 문구보다 명확한 메시지, 하나의 핵심 행동, 짧은 사용 흐름이 더 중요합니다.

웹사이트를 새로 만들고 있다면 처음부터 모든 기능을 설명하려고 하기보다는 사용자가 서비스에서 처음으로 경험해야 하는 ‘성공 경험’ 하나를 정하는 것부터 시작해보는 것도 좋은 방법입니다.

그 성공 경험을 중심으로 첫 화면을 만들고, 필요한 기능은 서비스를 사용하는 과정에서 하나씩 안내하면 훨씬 자연스러운 온보딩을 만들 수 있습니다.