일렉트론으로 OBS input overlay 클론코딩

• 오버워치 강의 영상을 보다가 영상 속 키보드 마우스 뷰어? 를 가끔 보았었다
• 일단 깔끔한 키보드 뷰어로 흥미가 생겼었는데
• 찾아보니까 OBS input overlay라는 OBS 전용 플러그인이었다

• 일렉트론이라는 프레임워크를 사용하여
• html, css, js로 데스크탑 앱으로 만들어보았다

신경 쓴 것

글로벌 키 훅?

• 내가 만든 앱 밖에서 키가 눌리고 떼지는 걸 알아야 한다

index.js

const ioHook = require('iohook');

ioHook.on('keydown', (event) => {
  mainWindow.webContents.send('keydown', event.rawcode);
});

• iohook 패키지를 사용해서 해결하게 되었다
• 그런데 iohook이 최신 버전의 일렉트론에서 실행이 안되어서 일렉트론 8.x버전으로 낮추어 진행하게 되었다

overlay window

• 오버레이 화면에 마우스 클릭이 되지 않도록 했다
• 오버레이 화면이 프레임을 가지지 않도록 했다
• 오버레이 화면이 모니터 크기를 구하여 우측 하단에 생기도록 하였다 (여러 해상도 대응)

일렉트론

• 웹 기술로 데스크탑앱을 만들 수 있게해주는 마법이다
• 나는 요즘 js만 해왔기 때문에 일렉트론에 대해 찾아보았다
• 일렉트론으로 만들어진 대표적인 앱으로는 비주얼 스튜디오 코드가 있다

일렉트론 시작

• Create Desktop App + Installer with HTML/CSS/JS - Electron Tutorial 2020 유튜브를 보며 시작했다
• create-electron-app 를 통해 express-generator 처럼 빠르게 프로젝트를 시작할 수 있다. (보일러플레이트)
• electron-builder 를 통해 배포용 setup 파일을 생성할 수 있다
• 소스코드 ; https://github.com/chinsun9/electron-practice

일렉트론 단점?

• 엄청나게 간단한 앱일지라도 nodejs + Chromium 조합으로 용량이 상당히크다

소스코드

• Input Overlay (Electron)