돌려돌려 돌림판 (1/3) - 자료조사

돌려돌려 돌림판~

 

흔히 말하는 룰렛 (Roulette) 을 만들어보려고 한다.

 

 

만드려고 생각하게 된 계기는 점심시간 뭐 먹을지 고민될 때

 

무언가 결심을 해야될 때

 

결정장애가 있을 때

 

이런게 있으면 좋지 않을까~? 하는 생각에 시작하게 되었다.

 

 

돌림판을 돌리는 건 도넛 모양이 아닌 파이 모양으로 잡고

 

m16 사이트의 배너처럼.

 

이런식으로.

 

CSS 에서 Transform : rotate 속성에 회전 값 주고, 애니메이션으로 회전 속도 조절하고

 

약간의 JS 로 회전 수에 랜덤 값을 붙이면 매우 쉽게 돌릴 수 있을 것으로 본다.

 

 

 

그리고 나면 돌림판 이미지가 관건인데, 정적인 이미지로 하면 쉽겠지만

 

동적으로 만들려고 생각하니 조금 고민이 되었다.

 

뭐 결론적으로 얘기하면 구글 차트를 사용하기로 결정했다.

 

구글 차트.

토스트 UI 에서 제공하는 차트를 쓸까도 생각했지만

 

구글 쪽이 의존성이 훨씬 적은 듯 하여 택했다.

 

이 상태에서 위에서 언급한 css, js 를 조금 붙이면 될 듯 하다.

 

 

 

그런데.. 자료를 찾다보니 구글에 spinner 를 검색하니 내가 구현하려고 하는 것과 굉장히 유사한 룰렛이 나온다.

 

구글에 'spinner' 를 검색하면 나온다.

 

구글 룰렛의 경우 휠 사이즈 조절 밖에 안되지만

 

필자의 경우는 사용자가 원하는 값과 사이즈를 조정할 수 있게 하려고 함.

 

인터넷 실시간 방송에서도 써먹을 수 있게 만드는 것이 목표.

 

 

자료 조사가 끝났으니 다음 단계에선 개발 시작~