프런트엔드 앱용 JavaScript 라이브러리 제품 둘러보기

글: Abiola Farounbi✏️

최신 웹 애플리케이션은 일반적으로 다양한 기능과 사용 사례로 가득 차 있습니다. 그러나 특히 처음 사용자에게 새로운 기능이나 업데이트된 기능을 제공하는 방식은 사용자 경험에 큰 영향을 미칠 수 있습니다.

온보딩 프로세스가 올바르게 완료되지 않으면 사용자가 압도감을 ​​느끼거나 탐색이 불분명하다고 느낄 수 있습니다. 원활한 온보딩 프로세스를 달성하고 사용자 만족도를 높이는 효과적인 방법 중 하나는 제품 둘러보기를 이용하는 것입니다.

다행히도 귀하의 애플리케이션에 대한 유익하고 매력적인 가이드 투어를 구축하는 데 도움이 되는 제품 투어 라이브러리가 많이 있습니다. 이 기사에서는 이용 가능한 최고의 투어 라이브러리 중 일부를 탐색하고 기능, 장단점 및 사용 사례에 대해 논의하여 귀하의 선택에 도움을 드릴 것입니다.

제품 투어 라이브러리를 사용하는 이유는 무엇입니까?

제품 둘러보기는 사용자에게 애플리케이션의 주요 기능을 친숙하게 만드는 구조화된 대화형 방식입니다. 일련의 화면 요소, 모달 또는 도구 설명을 사용하면 사용자에게 제품 기능을 원활하게 안내할 수 있습니다. 이는 전반적인 UX를 향상하고 사용자 참여를 높이는 데 도움이 됩니다.

제품 둘러보기를 구현하는 데 도움이 되는 무료 오픈 소스 라이브러리가 많이 있습니다. 맞춤형 투어를 처음부터 구축하고 싶은 유혹이 들 수도 있지만 현실적으로 그렇게 하는 것은 시간이 지남에 따라 유지 관리하고 반복하는 데 시간과 리소스 측면에서 매우 비용이 많이 들 수 있습니다.

투어 라이브러리에 있어야 할 필수 기능

견학도서관이 '좋은' 이유는 무엇인가요? 물론 대답은 귀하의 필요에 따라 달라질 수 있습니다. 그러나 일반적으로 좋은 투어 도서관이 갖추기 위해서는 다음과 같은 특징이 중요합니다:

• 원하는 대로 투어의 모양과 동작을 제어할 수 있는 유연하고 사용자 정의 가능한 옵션
• 명확하고 광범위한 문서 및 API 참조
• 다양한 UI 프레임워크에서 호환되며 간편한 통합을 지원합니다
• 분석 기능이 내장되어 있거나 다른 외부 분석 도구와의 통합을 지원합니다
• 활발한 사용자 및 기여자 커뮤니티를 갖춘 오픈소스
• 트렌드와 기술 변화에 맞춰 지속적으로 유지 관리하고 업데이트합니다

이러한 중요한 기능을 염두에 두고 다양한 사용자 온보딩 라이브러리를 검토한 후 이 기사에서 논의할 상위 7개 라이브러리를 선택했습니다.

• Intro.js
• 온보드
• 부트스트랩 투어
• Driver.js
• TourGuide.js
• 흐름
• 목자

이제 각 라이브러리에 대한 자세한 설명과 기능을 보여주는 실제 사례를 살펴보고 프로젝트의 요구 사항에 가장 적합한 라이브러리를 선택하는 데 도움을 드리겠습니다.

Intro.js

Intro.js는 간단하고 효과적인 제품 둘러보기를 쉽게 만들 수 있는 방법을 제공하는 오픈 소스 JavaScript 라이브러리입니다. 대략 12.5KB의 파일 크기를 가지므로 간단한 연습을 쉽게 구축할 수 있는 경량 라이브러리입니다. Intro.js의 주요 기능 중 하나는 사용자 정의 기능입니다. 다양한 테마와 색상, 글꼴, 위치 지정과 같은 사용자 정의 가능한 요소를 제공하여 애플리케이션의 브랜딩에 맞게 둘러보기를 맞춤화할 수 있습니다.

Intro.js를 프로젝트에 통합한 후 웹 페이지의 특정 요소를 둘러보기 단계로 지정할 수 있습니다. 둘러보는 동안 Intro.js는 이러한 요소를 강조 표시하고 사용자에게 애플리케이션을 안내하는 유용한 텍스트 오버레이 또는 도구 설명을 제공합니다. 사용자는 직관적인 버튼을 사용하여 자신의 속도에 맞춰 둘러보기를 탐색하여 앞으로, 뒤로 이동하거나 둘러보기를 종료할 수 있습니다.

Intro.js는 인기 있는 React, Angular 또는 Vue.js 프레임워크를 기반으로 구축된 프로젝트에서 더 쉽게 사용할 수 있도록 미리 만들어진 프런트엔드 프레임워크 래퍼를 제공합니다. 또한 좋은 문서 참조와 재사용 가능한 예제가 있습니다.

Intro.js에는 일부 고급 기능이 부족할 수 있지만 단순성과 사용 용이성은 빠르고 효율적인 온보딩 솔루션이 필요한 프로젝트에 탁월한 선택입니다. Intro.js의 무료 등급은 상업적 사용이 제한되는 반면, 상업용 프로젝트의 유료 라이선스는 $9.99부터 시작됩니다.

온보르다

Onborda는 Next.js 애플리케이션에서 대화형 제품 둘러보기를 위한 경량 JavaScript 라이브러리입니다. 부드러운 애니메이션을 위해 Framer Motion, 스타일링을 위해 Tailwind CSS와 같은 널리 사용되는 프런트엔드 도구를 사용합니다. Onborda는 공급자 구성 요소를 사용하여 전반적인 투어 경험을 관리합니다. Next.js 애플리케이션 내에서 일련의 "단계"를 정의하여 강조하려는 요소와 사용자에게 제공하려는 콘텐츠를 지정합니다. 그런 다음 Onborda는 애니메이션과 도구 설명을 사용하여 둘러보기 렌더링을 처리하고 사용자에게 애플리케이션의 주요 기능을 안내합니다.

그러나 Onborda는 주로 Next.js용으로 설계되었다는 점을 고려하는 것이 중요합니다. 이를 다른 프레임워크와 통합하려면 추가적인 노력이 필요할 수 있습니다.

또한 최신 도서관인 Onborda는 기존 옵션에 비해 더 작은 커뮤니티와 더 적은 문서를 보유할 수 있습니다. Onborda가 귀하의 프로젝트에 적합한지 여부는 귀하의 특정 요구 사항과 프레임워크 기본 설정에 따라 결정됩니다.

부트스트랩 투어

Bootstrap Tour는 Bootstrap 팝오버를 사용하여 제품 둘러보기를 만들기 위해 특별히 제작된 무료 오픈 소스 JavaScript 라이브러리입니다. 특히 Bootstrap의 구성 요소와 스타일을 사용하여 프로젝트를 이미 작업하고 있는 경우 개발자에게 인기 있는 선택입니다.

부트스트랩 팝오버를 만드는 것은 프로젝트에 JavaScript 및 CSS 파일을 포함하는 것만큼 쉽습니다. Bootstrap Tour에는 설정 과정을 안내하는 데 도움이 되는 자세한 문서도 함께 제공됩니다.

Bootstrap Tour를 사용하면 웹페이지의 특정 요소를 둘러보기 단계로 정의할 수 있습니다. 투어 중에 Bootstrap Tour는 Bootstrap의 팝오버 구성 요소를 활용하여 강조 표시된 요소와 함께 유익한 콘텐츠를 표시합니다. 사용자는 키보드를 사용하여 둘러보기와 상호작용하여 단계를 탐색할 수 있습니다.

Bootstrap Tour는 사용자에게 친숙한 기능을 제공하지만 단점 중 하나는 현재 적극적으로 업데이트되지 않는 열악한 문서입니다. GitHub에 해결되지 않은 문제가 많다는 것은 커뮤니티 지원이 최소한이라는 것을 분명히 나타냅니다.

Driver.js

Driver.js는 더 나은 유지 관리를 위해 TypeScript로 구축된 강력한 JavaScript 라이브러리입니다. 외부 라이브러리에 의존하지 않고 경량으로 설계되었으므로 기존 프로젝트에 쉽게 통합할 수 있으며 성능에 미치는 영향을 최소화하면서 작동합니다. Driver.js는 단순한 강조 표시를 넘어 특정 수준에 맞게 높은 수준의 사용자 정의 기능을 제공합니다. 사용 사례. 제공된 후크를 사용하여 초점 이동 중에 요소를 조작하는 기능을 사용하여 요소가 강조 표시되는 방식을 정확하게 정의할 수 있습니다.

또한 Driver.js에는 제품 둘러보기를 사용자 정의하는 데 사용할 수 있는 다양한 옵션을 제공하는 몇 가지 준비된 예제가 함께 제공됩니다. 또한 사용자 친화적인 키보드 탐색을 지원하며 개인 및 상업용 프로젝트 모두에서 무료로 사용할 수 있는 MIT 라이센스가 허용된 오픈 소스입니다.

여기서 Driver.js는 프레임워크에 구애받지 않으므로 매우 유연하고 다양한 프레임워크와 잘 작동할 수 있다는 점에 유의해야 합니다. 그러나 다양한 프런트엔드 프레임워크와 완전히 통합되지만 프레임워크별 둘러보기 구성 요소가 내장되어 있지 않습니다.

더 번거롭지 않은 설정 절차를 원하는 사람에게는 추가 개발 시간이 필요할 수 있습니다. 이에 비해 드래그 앤 드롭 기능이나 프레임워크별 둘러보기 구성 요소를 제공하는 라이브러리를 사용하면 더 빠르게 설정할 수 있습니다.

Driver.js에 대한 더 자세한 가이드를 보려면 Driver.js 튜토리얼을 확인하세요.

TourGuide.js

TourGuide는 단일 페이지 애플리케이션 내에서 사용자 정의 가능한 사용자 투어 및 온보딩 여정을 구축하기 위한 실험적 라이브러리로 개발되었습니다. 콜백을 사용하여 많은 약속 기반 메서드를 구현하여 비동기 작업에 대한 지원을 보장하고 둘러보기 흐름을 보다 세밀하게 제어할 수 있습니다. 이 라이브러리의 한 가지 고유한 기능은 부동 UI 라이브러리에 의존한다는 것입니다. 플로팅 UI는 요소를 서로 고정하는 데 사용할 수 있는 다양한 위치 지정 기능을 제공합니다. 예를 들어 플로팅 요소를 참조 요소 바로 옆에 배치합니다.

TourGuide 라이브러리는 다양한 사용자 정의 옵션을 제공하므로 색 구성표와 글꼴부터 요소 위치 지정까지 모든 것을 정의할 수 있습니다. 투어 단계 내에 사용자 정의 HTML 콘텐츠를 통합하여 애플리케이션 디자인과 원활하게 통합되는 완전히 맞춤화된 온보딩 경험을 보장할 수도 있습니다.

게다가 TourGuide.js는 오픈 소스 개발을 수용하여 협업 커뮤니티를 육성하고 지속적인 개선을 도모합니다. 이는 또한 어떠한 제한 없이 상업용 및 개인 프로젝트 모두에서 라이브러리를 자유롭게 사용할 수 있는 권한을 부여합니다.

TourGuide.js는 프로덕션용으로 작동하지만 여전히 개발 중이므로 일부 대체 라이브러리에 비해 문서의 포괄적인 수준이 떨어질 수 있습니다.

흐름

Flows는 웹 애플리케이션 내에서 제품 둘러보기 및 사용자 온보딩 경험을 생성하기 위해 설계된 독특한 도구입니다. 시각적으로 흐름을 구축하기 위한 WYSIWYG 편집기를 제공하고 SDK를 사용하여 코드베이스 내에서 직접 정의할 수 있는 옵션을 제공하여 다양한 선호도를 가진 개발자의 요구에 부응합니다. Flows Editor는 시각적 가이드를 사용하여 흐름을 생성하는 프로세스를 촉진하고 실시간으로 흐름을 생성합니다. 앱 미리보기. 이 라이브러리는 속도, 유연성, 안정성 및 디자인을 실제로 적용하여 사용자 중심 온보딩을 강조합니다. 즉, 온보딩 흐름을 순식간에 생성하고 배포할 수 있으며 사용자는 기다릴 필요가 없습니다.

Flows는 기본 도구 설명 및 모달 외에도 사용자 작업을 일시 중지하는 '대기' 단계와 조건부 경로를 위한 '분기' 단계를 비롯한 여러 단계 유형을 제공합니다. 또한 조건부 분기, 함수 호출, AI 기반 결정과 같은 기능을 향상시키는 고급 단계 유형도 포함되어 있습니다.

Flows에는 조회수, 완료 횟수, 이탈률 등 성과 지표에 대한 기본 분석 기능도 기본적으로 포함되어 있습니다. 이를 더욱 확장하여 사용자 여정에 대한 더욱 전체적인 보기를 위해 타사 도구와 통합하거나 CSS 및 JavaScript로 온보딩 흐름을 맞춤화하여 개발자에게 원활한 브랜드 경험을 보장할 수 있습니다.

월별 1,000개의 흐름을 제공하는 무료 등급이 있지만 Flows는 사용량 기반 가격 책정을 사용합니다. 대용량 사용자는 더 높은 비용을 부담하게 되므로 사용량이 많을 것으로 예상된다면 보다 비용 효율적인 옵션을 살펴보는 것이 좋습니다.

Shepherd.js

Shepherd.js는 웹 애플리케이션에서 사용자 투어를 만드는 프로세스를 쉽게 만드는 것을 목표로 하는 간단한 JavaScript 라이브러리입니다. 투어를 단계별로 설명하는 명확하고 직관적인 인터페이스가 있어 투어 UX를 개선하고 사용자 이해를 높이는 데 도움이 됩니다. Shepherd.js는 광범위한 사용자 정의 옵션과 애플리케이션과의 원활한 통합을 제공합니다. 전체 키보드 탐색으로 접근성을 우선시합니다. TourGuide와 마찬가지로 Shepherd.js도 플로팅 UI를 사용하여 각 투어 단계에 대한 대화 상자를 렌더링합니다.

또한 Shepherd.js는 다양한 프런트엔드 프레임워크에 쉽게 통합할 수 있도록 프레임워크에 구애받지 않는 기능을 제공합니다. 모든 프레임워크에 대해 독립적으로 작동할 수 있는 동시에 더 많은 프레임워크별 기능과 함께 제공되는 프레임워크별 래퍼도 제공합니다.

물론 다른 라이브러리와 마찬가지로 Shepherd.js에도 몇 가지 제한 사항이 있습니다. 예를 들어, 내장된 사용자 참여 분석이 부족하고 단순한 라이브러리에 비해 학습 곡선이 더 가파르습니다.

투어 도서관 비교표

프런트엔드 애플리케이션을 위한 투어 라이브러리를 선택할 때 결정을 내리기 전에 각 옵션의 주요 기능을 비교하세요. 다음은 논의한 라이브러리의 주요 기능, 장단점을 요약한 비교표입니다.

Feature/Library	Intro.js	Shepherd	Onborda	Flows	Driver.js	TourGuide.js	Bootstrap Tour
Open source	✅	✅	✅	✅	✅	✅	✅
Community support	Large	Large	Small	Growing	Moderate	Small	Large
Free tier	✅	✅	✅	Up to 1000 flows per month	✅	✅	✅
Ease of use	Very easy	Easy	Moderate	Moderate	Moderate	Moderate	Very easy
Built-in analytics	❌	❌	❌	✅	❌	❌	❌
Framework support	Framework agnostic	Framework agnostic	Designed for Next.js, supports others	Framework agnostic	Framework agnostic	Framework agnostic	Bootstrap-based
Documentation	⭐⭐⭐	⭐⭐⭐	⭐⭐	⭐⭐	⭐⭐⭐	⭐⭐	⭐
Pros	Simple, lightweight	Highly customizable, flexible	Easy integration, customizable	Intuitive, highly flexible, built-in analytics	Lightweight, flexible	Customizable, framework agnostic	Easy to use with Bootstrap projects
Cons	Limited advanced features	Steeper learning curve for complex customizations	Smaller community, designed for Next.js	Potential costs for high usage	Doesn't have pre-built components for specific frameworks	Limited advanced features, early development	Limited advanced features, requires Bootstrap
Best use cases	Simple onboarding, quick tours	Customizable onboarding for SPAs	Next.js apps, customizable tours	High-customization onboarding	Lightweight, flexible tours	Detailed and complex tours	Bootstrap-based projects

이 개요는 귀하의 요구 사항에 맞는 라이브러리를 빠르게 식별하는 데 도움이 됩니다.

결론

웹사이트 또는 앱의 사용자 온보딩 경험은 첫인상을 형성하고 사용자 유지율을 높이는 데 매우 중요합니다. 프런트엔드 애플리케이션에 적합한 둘러보기 라이브러리를 선택하면 사용자에게 제품 기능을 안내하는 매력적이고 유익한 둘러보기를 만들 수 있습니다.

각 도서관은 다양한 개발 선호도와 프로젝트 요구 사항에 맞춰 고유한 기능과 이점을 제공합니다. 이 기사에서는 결정을 내리는 데 도움이 되는 최고의 투어 도서관에 대한 비교 개요를 제공했습니다. 첫 번째 상호 작용부터 원활하고 매력적인 사용자 경험을 만들 수 있도록 지원하는 사용자 온보딩 라이브러리를 선택하려면 이러한 요소를 신중하게 고려하십시오.

궁극적으로 최고의 라이브러리는 기능, 사용 편의성, 예산 간의 균형에 달려 있습니다. React 제품 둘러보기 라이브러리 또는 Vue 제품 둘러보기 라이브러리와 같이 프로젝트에서 사용 중인 프레임워크 또는 라이브러리에 맞게 선별된 제품 둘러보기 라이브러리를 고려할 수도 있습니다.

궁금한 점이 있으시면 Twitter로 연락하시거나 아래에 댓글을 남겨주세요. 즐거운 코딩하세요!

---

새로운 기능을 구축하거나 성능을 향상시키기 위해 새로운 JS 라이브러리를 추가하고 있습니까? 만약 그들이 반대로 행동한다면?

프런트엔드가 점점 더 복잡해지고 있다는 것은 의심의 여지가 없습니다. 새로운 JavaScript 라이브러리와 기타 종속성을 앱에 추가하면 사용자가 알 수 없는 문제에 직면하지 않도록 더 많은 가시성을 확보해야 합니다.

LogRocket은 JavaScript 오류가 마치 자신의 브라우저에서 발생한 것처럼 재생하여 버그에 더욱 효과적으로 대응할 수 있게 해주는 프런트엔드 애플리케이션 모니터링 솔루션입니다.

LogRocket은 프레임워크에 관계없이 모든 앱에서 완벽하게 작동하며 Redux, Vuex 및 @ngrx/store에서 추가 컨텍스트를 기록하는 플러그인이 있습니다. 문제가 발생한 이유를 추측하는 대신 문제가 발생했을 때 애플리케이션의 상태를 집계하고 보고할 수 있습니다. LogRocket은 또한 앱 성능을 모니터링하여 클라이언트 CPU 로드, 클라이언트 메모리 사용량 등과 같은 측정항목을 보고합니다.

자신있게 구축하세요. 무료로 모니터링을 시작해 보세요.

위 내용은 프런트엔드 앱용 JavaScript 라이브러리 제품 둘러보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!