2023년 11월 15일

driver.js로 프로덕트 투어 만들기

kidow

@kidow

태그

JavaScript

설명

여러분의 서비스를 어떻게 사용할 수 있는지 고객들에게 확실하게 알려줄 기회입니다.

배포

수정일

Nov 15, 2023 08:47 AM

생성일

Nov 15, 2023 01:47 AM

💡

이 글은 Next.js 13 버전 기준으로 작성되었습니다.

안녕하세요, 오늘은 재미있는 오픈 소스를 알게 되어 제 프로덕트인 Voat에 적용해본 경험담을 공유해 볼까 합니다.

바로 driver.js인데요, 웹 페이지의 특정 부분만을 강조하여 안내할 수 있도록 UI를 단계적으로 구성해주는 라이브러리입니다. 센스있게도 홈페이지에서부터 driver.js를 직접 사용하여 데모를 소개하고 있습니다.

특히 SaaS를 운영하는 경우에는 유입 유저들이 내 서비스를 이용하는 방법을 알려주는 것이 무엇보다 중요합니다. 내 홈페이지에 처음 방문한 유저에게 사용법을 설명할 수 있는 방법이 오픈 소스로 존재했다니 참으로 반가운 소식인데요. 바로 적용해 봅시다.

설치


pnpm add driver.js

driver.js는 다양한 예시들도 문서에서 제시하지만, 위에서 소개한 움짤 방식대로 다음 화면에 driver.js를 입혀볼 겁니다.

주제와 선택지, 설정의 속성 하나하나에 driver.js를 입혀볼 생각에 벌써 설렌다.

사용법

먼저 간단한 사용법부터 보자면 인스턴스를 선언하고, 엘리먼트를 지정한 뒤 title과 description을 입력하면 간단하게 동작하는 것으로 보입니다.


import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const driverObj = driver();
driverObj.highlight({  
	element: "#some-element",  
	popover: {    
		title: "Title",    
		description: "Description"  
	}
});

딱 저렇게만 간단하게 적용해보겠습니다.


import { driver } from 'driver.js'
import 'driver.js/dist/driver.css'
import { useRef } from 'react'

const ref = useRef<HTMLDivElement>(null)

useEffect(() => {
	const driverObj = driver()
	driver.hightlight({
		element: ref.current!,
		popover: {
			title: 'Title',
			description: 'Description'
		}
	})
}, [])

return (
	<div ref={ref}>
		{...}
	</div>
)

굉장히 쉽게 첫 번째 목표를 달성했습니다. 이제부터 본격적으로 제가 원하는 투어를 만들어 봅시다.

일단 전체적으로 저는 어떤 투어를 만들 것이냐, 어떻게 투표 주제를 만들 수 있는지, 어떤 식으로 만들 수 있는지 알려주는 것이 목표이기 때문에 투표 주제와 선택지, 각 설정의 속성 하나하나마다 이 것이 무엇인지 위에서 아래로 내려가면서 driver를 적용해보겠습니다.

기본 사용법에도 나와 있듯이 element는 단순히 쿼리셀렉터 문자열로 지정해도 되기 때문에 모든 엘리먼트에 id를 달아주도록 하겠습니다.

위에서 보여준 것은 단순 하나의 팝오버이기 때문에, 연속적인 투어를 만들기 위해서는 steps 라는 속성이 필요합니다.


import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const driverObj = driver({
  showProgress: true,
  steps: [
    { element: '.page-header', popover: { title: 'Title', description: 'Description' } },
    { element: '.top-nav', popover: { title: 'Title', description: 'Description' } },
    { element: '.sidebar', popover: { title: 'Title', description: 'Description' } },
    { element: '.footer', popover: { title: 'Title', description: 'Description' } },
  ]
});

driverObj.drive();

showProgress 는 현재 진행 상황을 보여줄지 여부입니다. 저는 각각의 엘리먼트 아이디를 step-{n} 으로 지정하겠습니다.


import { driver } from 'driver.js'
import 'driver.js/dist/driver.css'

return (
	<>
		<div id="step-1">
			<textarea />
		</div>
		<button onClick={() => {
			driver({
				showProgress: true,
				steps: [
					{
						element: 'step-1',
						popover: {
							title: '먼저, 투표 주제를 선정합니다.',
							description: '여기에 투표 주제를 입력하세요.'
						}
					}
				]
			}).drive()
		}}>Tour</button>
	</>
)

한 번 테스트해볼까요?

이제 중간 과정은 생략합니다. 위 방식대로 steps에 모두 넣으면 끝이거든요.

순식간에 완성된 투어는 다음과 같습니다.

어떤가요? 그럴듯한 투어가 만들어졌죠?

직접 driver.js를 적용해보는 입장에서 driver.js는 굉장히 사용법이 간단하고 쉽습니다. 게다가 스타일링도 용이하고, 방향키도 작동하고 모바일 대응도 되어 있는 등 모든 것에 준비가 되어 있습니다. 괜히 20K의 스타를 받은 게 아닌 것 같아요. 만약 여러분들이 SaaS를 만들고 있다면 driver.js를 도입해 보세요. 훌륭한 UX를 가져다 줄 것입니다.

참고

Voat: https://voat.in

driver.js: https://driverjs.com

JavaScript