[스터디기록04/티코드(React)] 사용자를 위한 사이트 가이드 투어/온보딩 투어 - intro.js-react 라이브러리

🏔️ 티코드 스터디 소개
- 작은 단위의 리액트 컴포넌트 기능을 페어프로그래밍으로 구현하는 스터디
- 목표 : 프로그래밍 사고력 향상과 자신이 구현한 기능에 대해 명확한 설명을 할 수 있도록 연습하는 것

 

👀 오늘은 스터디 진행 이래 처음으로 라이브러리를 사용하여 구현 연습을 진행했다. 공식 문서를 통해 처음 접하는 라이브러리의 사용법을 파악하고 적용하는 연습도 필요하다는 생각에 적절한 라이브러리가 있는 경우 이를 체험해보고자 하였다.

 

오늘의 결과물

 

📚 (사이트) 가이드 투어/온보딩 투어란?

가이드 투어/온보딩 투어는 웹 사이트, 웹 애플리케이션 또는 소프트웨어 플랫폼의 신규 사용자에게 제공되는 체계적인 소개/안내를 뜻한다. 이를 통해 신규 사용자가 플랫폼의 기능 및 UI/UX에 익숙해지도록 도와준다.

 

오늘 알아볼 기능은 가이드 투어 혹은 온보딩 투어라고 불리는 사용자 안내 기능이다. 아마 한 번쯤은 애플리케이션을 설치하거나 새로운 사이트에 접속하게 되면 해당 서비스에 빠르게 적응할 수 있도록 나타나는 안내 화면을 경험해 봤을 것이다. 

 

React에서 사용할 수 있는 온보딩 투어 라이브러리로는 Shepherd, Product Tour, intro 등이 있는데, 오늘 스터디에서는 온보딩 투어에 널리 사용되는 라이브러리 중 하나인 intro.js의 React 버전을 공부했다.

(* 해당 라이브러리는 개인 및 비상업적 사이트에 무료이며, 상업적 사이트에 사용할 경우 비용이 발생한다.)

 

🛠️ intro.js-react

https://introjs.com/

User Onboarding and Product Walkthrough Library | Intro.js

https://www.npmjs.com/package/intro.js-react

intro.js-react

 

📑 라이브러리 사용 방법

1) 라이브러리 설치

$ npm install intro.js-react // 라이브러리 설치

⚠️ intro.js-react 설치 후에 intro.js가 없다고 에러가 발생한다면, intro.js 라이브러리도 반드시 설치해 줄 것!

 

2) import

// 라이브러리 import (단계와 힌트 두 가지의 컴포넌트 사용 가능)
import { Steps, Hints } from 'intro.js-react';

// css 사용을 위한 import 
import 'intro.js/introjs.css';

 

3) Steps 컴포넌트와 Hints 컴포넌트

// Steps
// Steps의 인덱스는 0부터 시작
<Steps
  enabled={stepsEnabled} // step이 보이는지 안보이는지 여부 
  steps={steps} // 모든 step 단계들 (필수)
  initialStep={initialStep} // 투어를 시작할 때 스텝 인덱스 (필수)
  onExit={this.onExit} // step이 비활성화될 때의 상태를 추적 (필수)
/>

// Hints
<Hints
  enabled={hintsEnabled}
  hints={hints}
/>

여기서 모든 step 단계들에 필요한 정보는 steps라는 객체를 만들어 값을 지정해 줄 수 있다.

const steps = [
  {
    element: '.selector1', // class명
    intro: 'test 1', // step에 대한 내용(필수)
    position: 'right',
    tooltipClass: 'myTooltipClass',
    highlightClass: 'myHighlightClass',
  },
  {
    element: '.selector2',
    intro: 'test 2',
  },
];

 

📑 적용 예제

intro.js-react에서 가이드해 준 대로 적용해 보면서 가이드 투어를 끝낸 경우에는 화면이 다시 실행되지 않도록 로컬 스토리지에 상태여부를 저장하는 것까지 내비게이터의 안내에 따라 연습해 봤다. (* 마크업 코드는 생략합니다.)

 

1) Steps와 Hints의 활성화 여부를 관리하는 상태값을 만들어준다. (처음 사이트에 진입 시 화면이 보여야 하므로 기본값은 true로 설정해 준다.)

 const Intro = () => {
     const [stepsEnabled, setStepsEnabled] = useState(true);
     const hintsEnabled = true;
     
     // ...
     
  }
  export default Intro;

 

2) 사용자에게 보여줄 가이드 내용을 담은 steps와 hints 객체, 상호작용이 가능한 버튼 옵션들을 설정해 준다.

const steps = [
    {
      element: ".step1",
      title: "step1",
      intro: "step1 입니다.",
    },
    {
      element: ".step2",
      title: "step2",
      intro: "step2 입니다.",
    },

    {
      element: ".step3",
      title: "step3",
      intro: "step3 입니다.",
    },
  ];

  const hints = [
    {
      element: ".hint1",
      hint: "hint1 입니다.",
    },
    {
      element: ".hint2",
      hint: "hint2 입니다.",
    },
  ];

  const stepsOption = {
    nextLabel: "다음",
    prevLabel: "이전",
    doneLabel: "닫기",
  };

  const hintsOption = {
    hintButtonLabel: "알겠어요!",
  };

 

3) jsx에 Step과 Hints 컴포넌트를 만들어주고, 사용하고자 하는 props를 각 컴포넌트에 넘겨준다. 

return (
      <Steps
        steps={steps}
        enabled={stepsEnabled}
        initialStep={0}
        options={stepsOption}
        onExit={() => setStepsEnabled(false)}
      />
      <Hints hints={hints} enabled={hintsEnabled} options={hintsOption} />
     
      // ...
  )

 

4) 이제 접속한 사용자가 새로운 사용자인지 아닌지를 판별하기 위해 로컬 스토리지에 대한 로직을 추가해 주면 

 const Intro = () => {
     // locaStroage에 저장된 값이 있는지 확인
  	 const isIntroDone = localStorage.getItem("isIntroDone");
  	 const [stepsEnabled, setStepsEnabled] = useState(!isIntroDone);
  	 const hintsEnabled = !isIntroDone;
     
     // ...
     
     return (
          <Steps
            steps={steps}
            enabled={isIntroDone ? stepsEnabled : stepsEnabled || true}
            initialStep={0}
            options={stepsOption}
            onExit={() => setStepsEnabled(false)}
            {/* step 단계를 모두 완료하면 localStorage에 값 저장" */}
            onComplete={() => localStorage.setItem("isIntroDone", "true")}
          />
      	  // ...
      )     
  }
  
  export default Intro;



사이트 가이드 투어/온보딩 투어를 체험해 볼 수 있다!

로컬 스토리지 저장 값

다시 한 번 보는 오늘의 결과물

 

📚 배운 점

예제를 준비해 온 친구와 오늘 스터디에서 배운 내용에 대해 얘기를 나누다가 새로운 걸 사용하기 위해 공식 문서를 해석하고 이해하는 게 어쩔 땐 적용하는 것보다 더 어렵다는 사실에 둘 다 고개를 끄덕였다. 공식 문서에 익숙해지도록 많이 보는 연습이 필요하다는 것도.😂 그리고 오늘 사용해 본 라이브러리도 react 버전으로 넘어오면서 해결되지 않는 이슈가 하나 있는데, 친구가 찾아보니 해당 이슈가 해결되긴 힘들 것 같다고 하는 말을 들으면서 실제로 서비스를 배포해서 다수의 사용자를 통해 버그를 제보받고, 트러블 슈팅하는 과정 자체가 정말 큰 의미가 있겠구나 라는 생각이 들었다. 이런 경험들을 하루라도 빨리 해보고 싶다는 생각이 들었다. 그러니 계속해서 열심히 달려보자!

---

💬 본 포스팅은 공부 기록용으로 정확하지 않은 정보가 존재할 수 있습니다. 발견하신다면 알려주세요!