[JS][React][Driver.js] 가이드 쉽게 제작하는 방법

# DriverJS를 활용해서 사용 가이드를 쉽게 구현하는 방법 소개

- 웹 또는 웹앱을 개발하다보면, 사용자 경험을 좋게 만들기 위해 최대한 불필요한 정보를 줄이는 작업을 하게 됩니다. 문제는 이러한 과정에서 사용자에게 각각의 기능에 대한 설명이 부족해지는 경우가 있는데, 문서 페이지에 정리를 아무리 잘해놔도 사용자 입장에서는 그저 사용하기 불편하다고 느끼기 마련입니다. 그러다 보니 필요한 경우 UI에 기능에 대한 안내를 표시를 하면서 가이드를 보여주는 방법이 효과적일 수 있습니다. 하지만 이 방법은 구현에 더 많은 리소스가 필요하기 때문에 포기하게 되는 경우가 많습니다. 본 포스팅에서는 이런 경우 도움이 될 수 있는 Driver.js 라이브러리를 소개하려고 합니다

필자가 개발 중인 앱의 위젯에서 사용한 결과물

# 사용방법

- Github Page 및 공식 사이트

https://driverjs.com/

Driver.js

https://github.com/kamranahmedse/driver.js

GitHub - kamranahmedse/driver.js: A light-weight, no-dependency, vanilla JavaScript engine to drive the user's focus across the

 

- 라이브러리를 설치합니다. 

# Using npm
npm install driver.js

# Using pnpm
pnpm install driver.js

# Using yarn
yarn add driver.js

 

- 사용법은 생각보다 간단합니다. 아래와 같이 라이브러리를 import한 후에 필요한 파라미터를 넣어서 실행해 주시면 됩니다. 아래의 예는 공식 사이트의 예제 코드입니다. step에 가이드를 보여주고 싶은 순서대로 작성하면 되며, 어떤 엘레멘트가 가이드 대상인지 확인하기 위하여, element에 클래스 이름만 적절히 넣어 주시면 됩니다

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();

 

- 기본적으로 제공되는 UI가 깔끔하기 때문에 큰 수정이 필요하지 않았지만, 알아둘만한 옵션을 알려드리자면 다음과 같습니다. 대부분의 필요한 옵션을 제공하기 때문에 개발 중인 UI에 어울리게 수정하는데는 문제가 없었습니다

type Config = {
  overlayColor?: string; // 배경의 색깔을 변경할 수 있습니다. 기본은 반투명한 검은 색입니다
  allowClose?: boolean; // 종료 버튼을 보여줄 지
  overlayOpacity?: number; // 배경의 투명도
  stagePadding?: number; // 가이드 대상 엘레멘트 여백
  popoverClass?: string; // 가이드 UI의 스타일을 변경할 경우
  showButtons?: AllowedButtons[]; // 이전, 다음 버튼 숨기기
  showProgress?: boolean; // 좌측 하단 진행 단계 표시 여부
  progressText?: string; // 진행 메세지
  nextBtnText?: string; // 버튼 이름
  prevBtnText?: string; // 버튼 이름
  doneBtnText?: string; // 버튼 이름
  onPopoverRender?: (popover: PopoverDOM, options: { config: Config; state: State }) => void;
  // 아예 자신의 스타일로 컴포넌트 자체를 재정의 하고 싶은 경우
  onDestroyed?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;;
  // 가이드가 종료 Done으로 완료된 경우, 등의 처리
  onCloseClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;;
  // 종료를 누른 경우 이베트 처리
};

 

# 마치며

- 리소스가 부족한 1인 및 소규모 개발 팀에서는 최소한의 리소스로 사용자 경험은 개선할 수 있는 좋은 도구인 것 같습니다. 한 번 숙지해두면 다양한 프로젝트에서 활용이 가능할 것으로 보이니 꼭 알아두셨으면 좋겠습니다

---