처음 온 사용자는 낯선 집에 초대받은 손님과 같아서, 문간에 세워 두고 구조를 줄줄 읊으면 지쳐 돌아섭니다. 온보딩은 첫걸음을 편안히 떼도록 돕는 일이고, 그 대부분은 순수 CSS로 만들 수 있습니다. 코치마크부터 진행 체크리스트, 스포트라이트, 단계 투어까지 코드로 세워 보겠습니다.
22.1 코치마크 툴팁
새 기능 곁에 작은 말풍선을 띄워 여기를 눌러 보라고 짚어 줍니다. 화살표는 가상 요소를 회전시켜 만들면 이미지 없이 끝납니다.
.coach {
position: relative;
background: #111827;
color: #fff;
padding: 10px 14px;
border-radius: 8px;
max-width: 220px;
font-size: 14px;
}
.coach::after {
content: "";
position: absolute;
top: -6px;
left: 20px;
width: 12px;
height: 12px;
background: #111827;
transform: rotate(45deg);
}
네모를 45도 돌려 위쪽 절반만 삐죽 내밀면 삼각형 꼬리처럼 보입니다. 말풍선이 가리키는 요소 바로 아래에 두면 시선이 자연스레 그리로 흘러갑니다.
22.2 진행 체크리스트
첫날 할 일을 목록으로 보여 주고, 끝낸 것에 취소선을 그으면 사용자는 남은 걸음을 한눈에 봅니다. 체크박스의 상태를 형제 선택자로 읽으면 됩니다.
<ul class="checklist">
<li>
<input type="checkbox" id="s1">
<label for="s1">프로필 채우기</label>
</li>
<li>
<input type="checkbox" id="s2">
<label for="s2">첫 글 쓰기</label>
</li>
</ul>
체크가 켜지면 바로 뒤 label에 취소선과 옅은 색을 입힙니다.
.checklist input:checked + label {
text-decoration: line-through;
color: #9ca3af;
}
하나씩 지워지는 취소선이 작은 성취감을 줍니다. 남은 항목만 또렷하게 남으니 다음에 뭘 할지 고민할 필요가 없습니다.
22.3 빈 상태 첫 화면
아직 아무것도 없는 화면을 그냥 비워 두면 사용자는 고장인가 싶어 얼어붙습니다. 왜 비었는지 설명하고 첫 행동 버튼을 크게 놓습니다.
<div class="empty">
<p class="empty-title">아직 저장한 글이 없어요</p>
<p class="empty-desc">첫 글을 쓰면 여기에 모입니다</p>
<a class="btn-primary" href="/write">첫 글 쓰기</a>
</div>
.empty {
text-align: center;
padding: 48px 20px;
color: #6b7280;
}
.empty-title {
font-size: 18px;
font-weight: 700;
color: #374151;
}
텅 빈 화면이 막다른 길이 아니라 첫걸음을 권하는 초대장이 됩니다. 가운데 정렬과 넉넉한 여백이 안내 문구를 무대 한복판에 세웁니다.
22.4 스포트라이트 오버레이
화면을 어둡게 덮되 특정 요소 하나만 환하게 남기면 시선이 그곳에 못 박힙니다. 커다란 spread를 가진 box-shadow 하나로 구멍 뚫린 장막을 만듭니다.
.spotlight {
position: absolute;
border-radius: 8px;
box-shadow: 0 0 0 9999px rgba(0,0,0,.7);
}
강조할 버튼과 같은 위치, 같은 크기로 이 요소를 겹쳐 두면 그 자리만 뚫린 스포트라이트가 됩니다.
<button id="save">저장</button>
<div class="spotlight" style="top:120px;left:40px;width:80px;height:40px"></div>
퍼지는 그림자가 화면 전체를 덮고, 요소 자신의 사각형만 어둠에서 빠져나옵니다. 9999px라는 넉넉한 spread가 어떤 화면 크기든 가장자리까지 어둡게 채웁니다.
22.5 닫을 수 있는 배너
환영 문구나 안내 배너는 반가운 만큼 오래 붙어 있으면 성가십니다. 닫기 버튼과 체크박스로 스크립트 없이 사라지게 합니다.
<input type="checkbox" id="hide" class="banner-x">
<div class="banner">
환영합니다, 첫 글을 써 보세요
<label for="hide" class="close">닫기</label>
</div>
.banner-x {
display: none;
}
.banner {
display: flex;
justify-content: space-between;
padding: 12px 16px;
background: #eff6ff;
border-radius: 8px;
}
.banner-x:checked + .banner {
display: none;
}
닫기 라벨을 누르면 숨은 체크박스가 켜지고 배너가 화면에서 걷힙니다. 한번 닫은 안내가 다시 나서지 않으니, 사용자는 하려던 일로 곧장 돌아갑니다.
22.6 :target로 단계 투어
여러 단계를 차례로 보여 주는 투어도 URL 해시와 :target만으로 넘길 수 있습니다. 지금 해시가 가리키는 단계만 보이게 합니다.
<div class="tour">
<section id="t1" class="step">
1단계 소개 <a href="#t2">다음</a>
</section>
<section id="t2" class="step">
2단계 작성 <a href="#t3">다음</a>
</section>
</div>
모든 단계를 기본으로 감추고, 주소의 해시와 id가 맞는 단계만 :target으로 펼칩니다.
.step {
display: none;
}
.step:target {
display: block;
}
다음 링크를 누르면 해시가 바뀌면서 다음 단계가 나타납니다. 스크립트 없이 앞뒤로 오갈 수 있고, 브라우저의 뒤로 가기까지 그대로 먹힙니다.
22.7 첫 성공 축하 표시
첫걸음을 무사히 뗐을 때 짧은 축하 하나를 얹으면 사용자는 제대로 하고 있다고 안심합니다. 살짝 떠오르는 애니메이션으로 기분 좋게 등장시킵니다.
.toast {
background: #22c55e;
color: #fff;
padding: 12px 18px;
border-radius: 999px;
animation: pop .3s ease;
}
@keyframes pop {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
초록 알약 모양이 아래에서 살짝 올라오며 나타납니다. 요란하지 않은 이 작은 반응이 해내셨네요 하는 다독임을 대신합니다.
22.8 정리
좋은 온보딩은 모든 걸 자랑하는 게 아니라 첫 성공까지 걸림 없이 데려다주는 것입니다. 코치마크로 다음 손을 짚고, 체크리스트로 남은 걸음을 보이고, 빈 화면을 초대장으로 바꾸고, 스포트라이트로 시선을 모으면 처음 온 사용자도 헤매지 않습니다. 가장 좋은 안내는 사용자가 안내받았다는 사실조차 모르는 안내입니다.