Overview / 소개

Scratcher.js는 "긁어서 확인하는 경험"을 제품에 빠르게 적용할 수 있도록 만든 스크래치 인터랙션 라이브러리입니다.
이벤트 당첨 공개, 쿠폰 코드 노출, 게임형 보상 UI처럼 사용자 참여가 중요한 화면에서 간단한 설정으로 시작할 수 있습니다.

어떤 문제를 해결하나요?

스크래치 UI를 직접 구현하면 입력 이벤트 처리, 진행률 계산, 완료 임계치 판단, 렌더링 성능, 프레임워크별 재구현까지 고려해야 합니다.
Scratcher.js는 이 반복 문제를 공통 엔진에 모아 해결하고, 각 프레임워크에 맞는 바인딩을 제공해 구현 부담을 줄입니다.

모노레포 패키지 구성

• @scratcher.js/core: 스크래치 로직과 상태 계산을 담당하는 핵심 엔진
• @scratcher.js/react: React 환경용 바인딩
• @scratcher.js/vue: Vue 환경용 바인딩
• @scratcher.js/svelte: Svelte 환경용 바인딩

이 구조 덕분에 웹에서 시작해 모바일 앱으로 확장하더라도 동작 개념을 거의 그대로 재사용할 수 있습니다.

주요 기능

• 마우스/터치 기반 스크래치 인터랙션
• 브러시 크기, 감도 등 동작 파라미터 조절
• 커버/배경 이미지 적용 및 커스텀 렌더링
• 진행률 추적, 완료 상태 감지, 완료 콜백 제공
• TypeScript 타입 제공으로 안정적인 개발 경험

시작 가이드

처음 적용한다면 Getting Started에서 설치와 최소 예제를 먼저 확인하세요.
이후 Configuration에서 옵션을 조정하고, Examples에서 실제 UI 패턴을 비교해보면 프로젝트에 맞는 구성을 빠르게 찾을 수 있습니다.

기여 및 피드백

Scratcher.js는 오픈소스로 운영됩니다. 사용 사례 공유, 버그 리포트, 기능 제안 모두 환영합니다.
개선 아이디어는 GitHub Issue로, 코드 기여는 PR로 남겨 주세요.