# Show GN: 웹으로 즐기는 3D 3x3x3 루빅스 큐브 스피드 큐빙

> Clean Markdown view of GeekNews topic #23260. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=23260](https://news.hada.io/topic?id=23260)
- GeekNews Markdown: [https://news.hada.io/topic/23260.md](https://news.hada.io/topic/23260.md)
- Type: show
- Author: [kuneosu](https://news.hada.io/@kuneosu)
- Published: 2025-09-25T08:47:12+09:00
- Updated: 2025-09-25T08:47:12+09:00
- Original source: [rubiks-cube-sandy.vercel.app](https://rubiks-cube-sandy.vercel.app/)
- Points: 22
- Comments: 14

## Summary

**Three.js**와 **React**를 활용해 웹에서 현실감 있게 3D **루빅스 큐브**를 조작할 수 있는 서비스가 출시되었습니다. **QWEASD 단축키**를 통한 빠른 큐브 조작과 **스피드큐빙 타이머**, 그리고 **온라인 기록 경쟁** 등 다양한 기능을 제공해 실제 스피드큐버의 경험을 온라인으로 확장합니다. 16가지 **카메라 앵글**과 **실행 취소/다시 실행** 등 세밀한 사용자 편의 기능도 포함해 개발자와 큐브 마니아 모두에게 흥미로운 프로젝트입니다.

## Topic Body

Three.js와 React로 만든 웹 기반 3D 루빅스 큐브입니다.  
키보드 단축키로 빠르고 직관적으로 조작할 수 있게 하려고 노력했고,  
스피드큐빙 타이머를 구현해두었습니다.  
  
주요 기능  
• 실제 큐브처럼 자연스러운 3D 회전 애니메이션  
• QWEASD 키보드 매핑으로 빠른 조작 가능  
• 16개 카메라 앵글 지원 (위, 아래, 모서리 뷰 등)  
• 스피드큐빙 타이머와 기록 관리  
• 온라인 랭킹 시스템  
• 실행 취소/다시 실행 기능  
  
개발 배경  
Three.js에 흥미를 가지게 되어 3D 웹 프로젝트를 찾던 중,  
평소 즐기던 스피드큐빙을 웹에서도 즐기고 온라인으로 다른 사람들과 기록을 경쟁할 수 있으면 재밌겠다는 생각에 개발했습니다.   
Three.js 학습 후 Claude Code를 사용하여 개발했습니다.  
  
실제 큐브와 최대한 비슷한 경험을 제공하려고 노력했습니다만 확실히 적응하는데 시간이 좀 걸립니다..!  
아직 개선할 점이 많습니다. 사용해보시고 피드백 주시면 감사하겠습니다!  
  
p.s. 개발자의 최고 기록은 1:14:361 이었습니다 :)  
  
🔗 https://rubiks-cube-sandy.vercel.app/

## Comments



### Comment 44318

- Author: kuneosu
- Created: 2025-09-26T17:02:18+09:00
- Points: 1

좋은 말씀들 감사합니다!  
기록이 몇개씩 쌓여가는 것을 보니 기분이 좋네요 ㅎㅎ  
만들면서 적응한 저도 1분 14초가 최고 기록인데  
하루만에 1분 찍으신 분이 계셔서 놀랐습니다..!

### Comment 44304

- Author: yangeok
- Created: 2025-09-26T10:17:30+09:00
- Points: 1

멋집니다 ㅎㅎ

### Comment 44298

- Author: baeba
- Created: 2025-09-26T09:47:28+09:00
- Points: 1

오.. 추억 돋네요..

### Comment 44285

- Author: dbs0829
- Created: 2025-09-25T19:00:54+09:00
- Points: 1

카메라 조작은 방향키가 아닌 영문 키로도 할 수 있으면 좋겠네요. 방향키를 반드시 키 조합으로만 입력하는 키보드를 사용하고 있습니다.

### Comment 44296

- Author: kuneosu
- Created: 2025-09-26T09:01:38+09:00
- Points: 1
- Parent comment: 44285
- Depth: 1

확실히 그런 경우도 있을 수 있겠네요.  
좋은 의견 감사합니다 !  
반영해서 업데이트 해두었습니다 :)

### Comment 44283

- Author: bakyeono
- Created: 2025-09-25T17:05:03+09:00
- Points: 1

회전 애니메이션이 끝난 뒤에만 키입력을 허용되어 있네요.  
키입력을 큐(limit=1)에 쌓고, 애니메이션 완료 후에 최근 입력 키에 따라 다음 동작이 실행되게 하면 더 매끄러운 컨트롤이 가능할 것 같읍니다.

### Comment 44295

- Author: kuneosu
- Created: 2025-09-26T08:53:34+09:00
- Points: 1
- Parent comment: 44283
- Depth: 1

반영해서 업데이트 해두었습니다 !  
좋은 의견 감사합니다 👍

### Comment 44273

- Author: kuneosu
- Created: 2025-09-25T15:42:06+09:00
- Points: 1

좋은 말씀들 감사합니다.  
피드백 반영하여 색상 프리셋 설정 업데이트 해두었습니다.  
많은 관심 부탁드립니다 :)

### Comment 44265

- Author: nottiger
- Created: 2025-09-25T10:54:00+09:00
- Points: 1

잘 만드셨네요 !

### Comment 44264

- Author: seoseonyu
- Created: 2025-09-25T10:40:21+09:00
- Points: 1

와 너무 멋진데요

### Comment 44252

- Author: dlehals2
- Created: 2025-09-25T09:21:48+09:00
- Points: 1

와 멋집니다 큐브 자체를 할 줄 몰라서..ㅋㅋ

### Comment 44256

- Author: kuneosu
- Created: 2025-09-25T10:03:09+09:00
- Points: 1
- Parent comment: 44252
- Depth: 1

감사합니다 :)

### Comment 44251

- Author: ianki
- Created: 2025-09-25T09:21:11+09:00
- Points: 1

반시계 방향 추가 버튼을 우측 컨트롤버튼으로 만들어주시면 좀 더 수월할거같아요. 왼손만 엄청 바쁜거같습니다. ㅋㅋ 그리고 주황색 색조가 너무 쎄서 제 모니터에서는 빨간색과 구별이 잘 안됩니다 ㅠ

### Comment 44259

- Author: kuneosu
- Created: 2025-09-25T10:05:47+09:00
- Points: 1
- Parent comment: 44251
- Depth: 1

오른손엔 시점 변환 역할을 부여해둬서 큐브 조작을 최대한 빼뒀는데 확실히 왼손이 더 바쁘긴 하네요 우측 컨트롤도 고려해보겠습니다 !  
색조 관련해서도 몇가지 옵션을 제공할 수 있도록 해봐야겠네요.  
피드백 감사합니다 :)