한국어 | English
demo.mp4
DM Note는 DJMAX RESPECT V에서 사용하기 위해 만들어진 키뷰어 프로그램입니다. Tauri와 React로 구축 되었으며 키보드 후킹을 위해 willhook 패키지를 사용합니다. 간편한 설정으로 스트리밍이나 플레이 영상 제작 시 키 입력을 시각적으로 보여줄 수 있습니다. 현재는 windows 환경만 지원하며, 리듬게임 이외의 다른 게임에서도 사용이 가능합니다.
- 실시간 키보드 입력 감지 및 시각화
- 커스텀 키 매핑 설정
- 키 사이즈 조절 및 추가/삭제
- 그리드 기반 키 배치
- 이미지 할당 지원
- 커스텀 CSS 지원
- 사용자 설정 자동 저장
- 프리셋 저장/불러오기
- 창 위치 고정
- 항상 위에 표시
- 리사이즈 기준점 선택
- 노트 효과 색상, 투명도, 라운딩, 속도, 높이 조절
- 리버스 기능
- 키별 입력 횟수 실시간 표시
- 카운터 위치, 색상 및 스타일 커스터마이징
- 커스텀 CSS 지원
- 다국어 지원 (한글, 영어)
- 그래픽 렌더링 옵션 (Direct3D 11/9, OpenGL)
- 설정 초기화
- 프론트엔드: React 19 + Typescript + Vite 7
- 백엔드: Tauri
- 스타일링: Tailwind CSS 3
- 키보드 후킹: willhook
- 패키지 매니저: npm
DmNote/
├─ src/ # 프론트엔드
│ ├─ renderer/ # React 렌더러
│ │ ├─ components/ # UI 컴포넌트
│ │ ├─ hooks/ # 상태/동기화 훅
│ │ ├─ stores/ # Zustand 스토어
│ │ ├─ windows/ # 렌더러 윈도우 (main/overlay)
│ │ ├─ styles/ # 전역/공통 스타일
│ │ └─ assets/ # 정적 리소스
│ └─ types/ # 공유 타입/스키마
├─ src-tauri/ # Tauri 백엔드
│ ├─ src/ # 커맨드, 서비스
│ └─ vendor/ # willhook 패치 버전
├─ package.json # 프로젝트 의존성 및 실행 스크립트
├─ tsconfig.json # TypeScript 설정
└─ vite.config.ts # Vite 설정
터미널에서 다음 명령어를 순서대로 입력하세요.
git clone https://github.com/lee-sihun/DmNote.git
cd DmNote
npm install
npm run tauri:dev
- 일부 게임의 전체화면 모드에서는 정상 동작하지 않습니다. 이 경우 테두리 없는 창 모드를 사용해주세요.
- 그래픽 문제 발생 시 설정에서 렌더링 옵션을 변경해주세요.
- OBS 윈도우 캡쳐로 크로마키 없이 배경을 투명하게 불러올 수 있습니다.
- 게임 화면 위에 표시할 경우, 항상 위에 표시로 배치한 뒤 오버레이 창 고정을 활성화해주세요.
- 커스텀 CSS 예제 파일은
assets폴더에 있습니다. - 클래스명 할당 시 선택자는 제외하고 이름만 입력해주세요.(
blue-> o,.blue-> x) - 프로그램 기본 설정은
%appdata%/com.dmnote.desktop폴더의store.json에 저장됩니다.
여러분의 참여를 환영합니다! 자세한 내용은 기여 가이드를 확인해주세요.