복잡한 웹 앱용 간단한 가이드/스포트라이트 도구 (오픈소스)

Source: Dev.to

안녕하세요 여러분 👋

저는 최근에 RotaGuide Spotlight이라는 작은 오픈소스 도구를 만들었습니다. 이 도구는 복잡한 웹 인터페이스에서 사용자를 안내하는 데 도움을 줍니다. 많은 내부 도구나 기업 대시보드에서는 버튼, 폼, 섹션이 너무 많아 사용자가 길을 잃기 쉽습니다. 저는 많은 수작업 코드를 추가하지 않고도 단계별 UI 가이드를 쉽게 만들고 싶었습니다.

Guide Engine (Library)

핵심 라이브러리는 어두운 오버레이와 스포트라이트 효과를 사용해 요소를 강조하고 사용자를 단계별로 안내합니다.

Repository:

How it works

guideTarget 헬퍼로 가이드 대상 요소를 표시합니다:

New Booking

마크다운 콘텐츠로 가이드를 트리거합니다:

<GuideProvider>
  <Guide
    steps={[
      {
        target: "#booking-card",
        content: "Hover or focus this card to start",
      },
    ]}
  />
</GuideProvider>

또는 가이드를 수동으로 제어합니다:

<GuideProvider>
  {({ startGuide, triggerProps }) => (
    <button
      {...triggerProps}
      onClick={() => {
        console.log("custom logic");
        startGuide();
      }}
    >
      Start Guide
    </button>
  )}
</GuideProvider>

Guide Editor

가이드 작성을 더 쉽게 만들기 위해, 요소를 선택하고 단계별로 작성할 수 있는 시각적 편집기를 만들었습니다. 별도로 모든 설정을 수동으로 구성할 필요가 없습니다.

Repository:

Online editor:

Landing page:

My Goal

제 장기 목표는 팀이 복잡한 앱에 대한 제품 온보딩·기능 가이드를 Appcues나 Intro.js 같은 무거운 도구 없이도 쉽게 만들 수 있게 하는 것입니다. 또한 라이브러리와 직접 사용할 수 있도록 가이드를 마크다운 파일로 내보내는 브라우저 확장 기능도 고려 중입니다.

Feedback

• 이미 존재해서 제가 공부해야 할 비슷한 도구가 있나요?
• 이 도구를 더 유용하게 만들려면 어떤 기능이 필요할까요?
• 여러분의 프로젝트에서 이런 도구를 사용하고 싶으신가요?

감사합니다 🙌