한국어 | English
demo.mp4
DM Note는 DJMAX RESPECT V에서 사용하기 위해 만들어진 키뷰어 프로그램입니다. Electron과 React로 구축 되었으며 키보드 후킹을 위해 node-global-key-listener-extended 패키지를 사용합니다. 간편한 설정으로 스트리밍이나 플레이 영상 제작 시 키 입력을 시각적으로 보여줄 수 있습니다. 현재는 windows 환경만 지원하며, 리듬게임 이외의 다른 게임에서도 사용이 가능합니다.
- 실시간 키보드 입력 감지 및 시각화
- 커스텀 키 매핑 설정
- 키 사이즈 조절 및 추가/삭제
- 그리드 기반 키 배치
- 이미지 할당 지원
- 커스텀 CSS 지원
- 사용자 설정 자동 저장
- 프리셋 저장/불러오기
- 창 위치 고정
- 항상 위에 표시
- 리사이즈 기준점 선택
- 노트 효과 색상, 투명도, 라운딩, 속도, 높이 조절
- 리버스 기능
- 다국어 지원 (한글, 영어)
- 그래픽 렌더링 옵션 (Direct3D 11/9, OpenGL)
- 설정 초기화
- 프론트엔드: React 19 + Typescript + Vite 7
- 백엔드: Electron
- 스타일링: Tailwind CSS 3
- 키보드 후킹: node-global-key-listener-extended
- 패키지 매니저: npm
DmNote/
├─ src/ # 소스 코드
│ ├─ main/ # Electron 메인 프로세스
│ │ ├─ app/ # Application 부트스트랩
│ │ ├─ core/ # ipcRouter, windowRegistry
│ │ ├─ domains/ # 도메인 라우팅 (app, settings, keys, overlay, css, preset, system)
│ │ │ ├─ keys/ # 키 매핑 기본값
│ │ │ └─ positions/ # 키 포지션 기본값
│ │ ├─ services/ # 서비스 (키보드 리스너 등)
│ │ ├─ store/ # electron-store + zod 스키마
│ │ ├─ windows/ # BrowserWindow 래퍼 + config
│ │ ├─ preload.ts # contextBridge API 노출(window.api)
│ │ └─ main.ts # 메인 진입점
│ ├─ renderer/ # React 렌더러
│ │ ├─ components/ # UI 컴포넌트
│ │ ├─ hooks/ # 상태/동기화 훅
│ │ ├─ stores/ # Zustand 스토어
│ │ ├─ windows/ # 렌더러 윈도우 (main/overlay)
│ │ ├─ styles/ # 전역/공통 스타일
│ │ └─ assets/ # 정적 리소스
│ └─ types/ # 공유 타입/스키마
├─ package.json # 프로젝트 의존성 및 실행 스크립트
├─ tsconfig.json # TypeScript (렌더러/공용) 설정
├─ tsconfig.main.json # TypeScript (메인) 전용 설정
├─ vite.config.ts # Vite (렌더러) 설정
└─ dist/ # 빌드 결과물
이 프로젝트는 전역 키보드 후킹을 위해 node-gyp를 이용하는 node-global-key-listener-extended 패키지를 사용하고 있습니다. 해당 패키지는 네이티브 C++ 코드를 빌드해야 하므로 다음 개발 환경이 설치되어 있어야 합니다.
- Node.js
- Python 3.x
- Visual Studio Build Tools (C++ 데스크톱 개발 워크로드 포함)
위의 개발 환경이 모두 준비되었다면, 터미널에서 다음 명령어를 순서대로 입력하세요.
git clone https://github.com/lee-sihun/DmNote.git
cd DmNote
npm install
npm run start개발 환경에 C++ 빌드 환경 구성이 어려운 경우, 패키지의 사전 빌드된 버전을 사용해서 테스트를 진행할 수 있습니다. package.json의 postinstall 스크립트를 제거하고 dependencies 항목을 아래와 같이 변경해주세요.
{
"dependencies": {
"node-global-key-listener-extended": "github:lee-sihun/node-global-key-listener#win-keyserver-version"
}
}파일을 수정한 뒤, 터미널에서 npm install와 npm run start를 실행해주세요.
- 그래픽 문제 발생 시 설정에서 렌더링 옵션을 변경해주세요.
- OBS 윈도우 캡쳐로 크로마키 없이 배경을 투명하게 불러올 수 있습니다.
- 게임 화면 위에 표시할 경우, 항상 위에 표시로 배치한 뒤 오버레이 창 고정을 활성화해주세요.
- 기본 제공 프리셋, 커스텀 CSS 예제 파일은
resources > resources폴더에 있습니다. - 클래스명 할당 시 선택자는 제외하고 이름만 입력해주세요.(
blue-> o,.blue-> x) - 프로그램 기본 설정은
%appdata%/dm-note폴더의config.json에 저장됩니다.
여러분의 참여를 환영합니다! 자세한 내용은 기여 가이드를 확인해주세요.