마우스로 요소를 회전시키는 JavaScript 라이브러리 Propeller.js 사용 가이드

마우스로 요소를 회전시키는 JavaScript 라이브러리 Propeller.js 사용 가이드

Propeller.js는 마우스 드래그로 요소를 회전시키는 데 특화된 JavaScript 라이브러리입니다. 관성 회전, 단계별 회전(step) 기능을 제공하며, 터치 기기까지 지원해 돌림판·다이얼·노브 UI 구현에 특히 적합합니다.

설명(Description)

Propeller.js는 마우스와 터치를 이용해 요소를 회전시키는 경량 JavaScript 라이브러리입니다. 관성(inertia) 기반 회전과 단계(step) 기반 회전을 모두 지원하며, 콜백 함수를 통해 회전 상태를 쉽게 제어할 수 있습니다.

키워드 태그(앞에 #)

#PropellerJS #마우스회전 #JavaScript라이브러리 #UI인터랙션 #관성회전 #돌림판 #퍼포먼스 #MIT라이선스

홈페이지 · 소스 · 데모 바로가기

홈페이지 바로가기 소스 다운로드 데모 미리보기

홈페이지: https://github.com/dzieciou/propeller
데모: https://dzieciou.github.io/propeller/

목차 (클릭 시 이동)

1) 주요 특징 2) 라이선스 3) 사용방법 4) 옵션 설정 5) 콜백 이벤트 6) 사용 예시 7) 활용 아이디어 8) 추천 태그

1) 주요 특징

• 마우스 기반 회전: 요소를 클릭한 뒤 드래그하여 회전
• 관성 회전(Inertia): 마우스를 놓아도 자연스럽게 계속 회전
• 단계별 회전(Step): 각도 단위로 딱딱 맞는 회전 구현
• 터치 기기 호환: 모바일·태블릿 환경에서도 동일한 인터랙션
• 콜백 제공: 회전 중/종료 시점에 이벤트 처리 가능

2) 라이선스

MIT License
개인·상업 프로젝트 모두 자유롭게 사용 가능하며, 라이선스 및 저작권 고지를 유지하는 것이 권장됩니다.

3) 사용방법

압축 파일 안에 포함된 index.html을 열면 별도 설정 없이 바로 작동하는 예제를 확인할 수 있습니다. 기본 동작을 먼저 확인한 후, 옵션을 조정하며 프로젝트에 맞게 확장하는 방식이 가장 쉽습니다.

4) 옵션 설정

기본 옵션

• angle : 초기 회전 각도
• inertia : 관성 값(0~1)
  • 0 : 마우스를 놓으면 즉시 정지
  • 1 : 무한 회전
  • 데모에서는 0.99 사용
• speed : 초기 회전 속도(실행 중 변경 가능)
• minimalSpeed : 회전 최소 속도 (inertia 사용 시)

단계별 회전(Step) 옵션

• step : 단계별 회전 각도
• stepTransitionTime : 단계 전환 시 CSS 트랜지션 시간
• stepTransitionEasing : 단계 회전 easing 효과

5) 콜백 이벤트

• onRotate : 회전 중 실행 (this.angle로 현재 각도 확인)
• onStop : 회전이 멈췄을 때 실행
• onDragStart : 드래그 시작 시
• onDragStop : 드래그 종료 시

6) 사용 예시

아래 예시는 이미지나 DIV 요소를 회전시키는 가장 기본적인 형태입니다.

<div id="wheel">돌림판</div>

<script src="propeller.min.js"></script>
<script>
  new Propeller(document.getElementById('wheel'), {
    inertia: 0.99,
    speed: 0,
    onRotate: function() {
      console.log(this.angle);
    }
  });
</script>

7) 활용 아이디어

• 이미지를 교체해 뽑기 돌림판 / 룰렛 UI 구현
• 음량·밝기 조절용 다이얼 UI
• 게임·이벤트 페이지에서 인터랙티브 연출
• Step 옵션을 활용한 정확한 각도 선택 UI

맨 위로