주요 특징은 다음과 같습니다.

1. 접근성 : 키보드 탐색 지원을 제공하고 11 년 준수를 준수하며 JavaScript를 사용하여 DOM 요소 내부에 포커스 트래핑을 활성화합니다.
2. 고도로 사용자 정의 가능 : 성능에 영향을주지 않으면 서 모양과 느낌을 변경할 수 있습니다.
3. 프레임 워크 준비 : 프로젝트의 프론트 엔드 프레임 워크에 즉시 적용됩니다.
4. 설명서 : 설명서에는 프로젝트의 테마 및 스타일을 포함한 설치 및 사용자 지정 내용이 포함되어 있습니다.

https://shepherdjs.dev/ 

설치하는 방법 

Shepherd는 많은 주요 프론트 엔드 프레임 워크와 통합되어 있으며 다음과 같은 래퍼를 제공합니다.

• Angular : Angular-Spherd는 Angular 8+와 호환되는 Angular 래퍼입니다.
• Ember : ember-shepherd는 엠버 래퍼로 Ember.js> = v3.8로 테스트 되었으며 Ember CLI v12.3과 호환됩니다.
• React : react-shepherd기는 React wrapper입니다.
• Vue : vue-shepherd는 Vue 래퍼입니다.

npm 또는 yarn을 사용하여 이러한 래퍼를 직접 설치할 수 있습니다.

npm install shepherd.js -save
yarn add shepherd.js

CDN에서 JsDeliver를 통해 직접 가져올 수도 있습니다.

<script src="https://cdn.jsdelivr.net/npm/shepherd.js@5.0.1/dist/js/shepherd.js"></script>

사용하는 방법 

Shepherd를 설치하면 다음과 같이 CSS 및 JS 파일을 포함 할 수 있습니다.

<link rel="stylesheet" href="shepherd.js/dist/css/shepherd.css"/>
<script src="shepherd.js/dist/js/shepherd.min.js"></script>

다음은 Shepherd 둘러보기를 작성하고 DOM 요소가 첨부 된 단계를 추가하는 예입니다.

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    cancelIcon: {
      enabled: true
    },
    classes: 'class-1 class-2',
    scrollTo: { behavior: 'smooth', block: 'center' }
  }
});

tour.addStep({
  title: 'Creating a Shepherd Tour',
  text: `Creating a Shepherd tour is easy. too!\
  Just create a \`Tour\` instance, and add as many steps as you want.`,
  attachTo: {
    element: '.hero-example',
    on: 'bottom'
  },
  buttons: [
    {
      action() {
        return this.back();
      },
      classes: 'shepherd-button-secondary',
      text: 'Back'
    },
    {
      action() {
        return this.next();
      },
      text: 'Next'
    }
  ],
  id: 'creating'
});

tour.start();

사용자를 보십시오 

Shephard는 SimplePlanner 및 Brokermate와 같은 회사에서 사용자에게 애플리케이션의 초기 단계를 안내하는 데 사용됩니다.