[React] React Tour를 활용한 서비스 가이드

React Tour를 활용한 서비스 가이드 왜 궁금했을까❓

뉴스타 서비스를 런칭하고 사용자들에게 설문 조사를 실시하여 피드백을 받았다. 사용자들은 처음에 서비스를 어떻게 이용하는지 모르겠다는 의견을 보였다. 이를 해결하고자 초기 사용자에게 React Tour를 이용하여 서비스 이용 가이드를 제시하려고 한다. 

 

1. 사용자 피드백

36개의 사용자 피드백 중 21개의 피드백이 서비스 이용에 대한 부분을 문제점으로 뽑았다.

 

2. React Tour

Install and use the Mask – Reactour

서비스 가이드 라이브러리를 찾아봤는데 React-joyride와 React Tour가 있었다. 프로젝트 기간이 얼마 남지 않은 상황에서 많은 기능을 지원하지만 러닝 커브가 높은 React-joyride를 선택하기보다는 비교적 낮은 React Tour를 선택하여 빠른 시간 내에 서비스를 발전시키는 게 낫다고 판단 했다.

2.1. index.jsx

const steps = [
    {
        selector: '[data-tour="tag"]',
        content: '해시태그를 선택하면 동일한 카테고리의 뉴스를 볼 수 있어요!',
    },
    {
        selector: '[data-tour="like"]',
        content: '좋아요를 누르면 선호하는 뉴스를 모아볼 수 있어요!',
    },
    {
        selector: '[data-tour="link"]',
        content: '북마크를 누르면 기사를 상세하게 읽어볼 수 있어요!',
    },
    {
        selector: '[data-tour="slider"]',
        content: '뉴스 숏폼을 양쪽으로 슬라이딩하여 넘길 수 있어요!',
    },
];

ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
        <RecoilRoot>
            <TourProvider
                steps={steps}
                styles={{
                    popover: (base) => ({
                        ...base,
                        '--reactour-accent': 'rgb(138, 192, 56, 0.7)',
                        borderRadius: 8,
                        padding: 40,
                    }),
                    maskArea: (base) => ({ ...base, rx: 4 }),
                }}
                onClickMask={({ setCurrentStep, currentStep, steps, setIsOpen }) => {
                    if (steps) {
                        if (currentStep === steps.length - 1) {
                            setIsOpen(false);
                        }
                        setCurrentStep((s) => (s === steps.length - 1 ? 0 : s + 1));
                    }
                }}
                onClickHighlighted={(e) => {
                    e.stopPropagation();
                }}
                disableInteraction
            >
                <App />
            </TourProvider>
        </RecoilRoot>
    </React.StrictMode>
);

• steps는 사용자에게 서비스 가이드를 소개할 순서와 개수를 뜻한다.
• Selector의 경우 html 요소에 지정한 이름이 입력되고 content는 사용자에게 보여질 소개글에 해당된다.
• popover의 style을 변경하고 onClickMask를 통해 step 끝에 도달하면 React Tour가 종료되게 설졍했다.
• 자세한 옵션들은 공식 문서에서 확인하면 된다.

2.2. Selector 설정

MainNewsHeader.jsx

<NewsTags data-tour="tag">
    <Link to={`/newstar/category/${newsData.bcategory}`}>
        <Tag fontSize={'12px'}>{`# ${BigCategory[newsData.bcategory]}`}</Tag>
    </Link>
    {SmallCategory[newsData.scategory] && (
        <Link to={`/newstar/category/${newsData.scategory}`}>
            <Tag fontSize={'12px'}>{`# ${SmallCategory[newsData.scategory]}`}</Tag>
            </Link>
    )}
</NewsTags>

<LikeBox data-tour="like">
    <LikeButton isLiked={isLiked} handleLikeButtonClick={handleLikeButtonClick} />
</LikeBox>

MainNewsBody.jsx

<a href={newsData.url} data-tour="link">
    <BookMark newsData={newsData} />
</a>

TourExample.jsx

{currentStep === 3 && <ImageBox data-tour="slider">
    <Lottie animationData={swipeLottie} style={LottieStyle} />
</ImageBox>}

 

3. 적용 결과