05 / 06그냥 만들고 싶어서 만든 것
KEYSPACE
소재와 움직임이 다른 키보드 14개를 3D로 눌러 보는 타이핑 놀이터
- 원래
키보드 사고 싶은 마음 참기- 이제
- 14가지 키보드를 웹에서 눌러 보고, 30초 타자 기록으로 겨뤄요
열어 보기 keyspace.todah.devLIVE
14눌러 볼 수 있는 키보드
01실제 화면
02이런 걸 해요
- 소재와 움직임이 다른 75% 키보드 14개를 Three.js로 만들었어요
- Playground에서 실제로 타이핑하면 화면 속 키가 같이 눌려요
- 30초 Challenge는 서버가 입력 이력을 다시 계산해서 순위를 매겨요
- 한국어와 영어 순위를 따로 집계해요
03만든 이야기
왜 만들었나
귀찮아서 만든 건 아니에요. 키보드를 사고 싶은 마음을 참으려고 만들었어요. 하나 사는 대신 열네 개를 만들었으니 오히려 손해일지도 몰라요.
어떻게 돌아가나
키보드는 전부 코드로 만든 3D 모델이에요. 실제 입력창에서 한글 조합, 선택, 붙여넣기를 처리하고, 화면 키를 누르면 지금 커서 자리에 글자가 들어가요.
신경 쓴 것
Challenge 기록은 화면이 보낸 점수를 믿지 않아요. 서버가 발급한 경기 번호와 입력 이력으로 점수를 다시 계산하고, 붙여넣기와 중복 저장을 막아요.
04재료와 배포
- React
- Three.js
- Vite
- Fastify
- SQLite
- Vitest
- Playwright
Coolify집 서버
화면과 API를 한 서비스로 묶고, 기록은 영구 볼륨의 SQLite에 남겨요
git pushCoolifykeyspace.todah.dev
- 시작
- 최근
- 기간
- 18일
- 커밋
- 8개
한 획에 커밋 하나, 파란 획이 마지막 커밋이에요