Node.js의 Electron 모듈을 사용하여 앱을 개발하다 보면, 앱의 배경을 투명하게 설정하고 싶어질 때가 있을 것이다. 앱의 배경이 투명하면, 바탕화면이 뒤에 보이고.. 콘텐츠가 투명하고.. 얼마나 멋있는가! 필자도 앱의 바탕화면, '투명하다'는 새로움이 너무 좋아서 찾아보게 되었다. 그 결과 이런 답변, 해결책을 볼 수 있었다.
#1 메인 JS 코드를 편집하라
분명히 예상했을 것이다. Electron은 단순히 HTML만으로 이루어진 모듈이 아니고 Node.js의 기본 실행 코드가 필요하기에, 메인 JS 코드를 약간 수정해줄 필요가 있다. 게다가 우리가 사용하는 HTML / CSS / JS 안에서도 투명하게 만들어주는 코드는 없었다는걸 보면 정확하게 알 수 있다.
그래서 어떻게 수정해줘야 될까?
1 2 3 4 | win = new BrowserWindow({ transparent: true, frame: false }); | cs |
간단하다. BrowserWindow 클래스를 이용해서 창을 생성할때, transparent 속성을 true로 잡아주도록 하면 된다. 말그대로, '투명'이라는 뜻인 transparent 속성을 true로 해줘서 투명으로 하겠다는 것을 알려주는 것이다. 그리고 또 창틀을 나타내주는 frame도 없애주면 된다.
#2 메인 페이지 HTML 코드를 편집하라
위에서는 HTML만이 Electron의 모두를 만들 수는 없다고 했는데, 여기서도 마찬가지다. Electron 모듈의 기능만이 완전하게 만들 수는 없다. 그래서, HTML코드는 이런식으로 짜주면 된다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello</title> <style> html, body { background: rgba(0, 0, 0, 0); } </style> </head> <body> <h1>안녕</h1> </body> </html> | cs |
포인트는 style에 있다. html 그리고 body 요소의 배경색을 '투명'하게 해주는 것이다. 투명도를 설정하기 위해서 rgba가 사용된 것.
HTML 파일은 그냥 이게 끝이다. 더이상의 작업은 없다.
#3 실행 해 보기
이제 다 구현했으니, 실행만 해 보면 된다. 콘솔(cmd, Powershell 등)에다가 "electron ." 을 쳐서 실행시켜보자.
"안녕" 글자가 허공에 뜬다. 진짜로 투명한 배경의 앱이 만들어 진 것이다! 다만, 혹시라도 완전히 투명한 배경을 원하지 않고, 틀은 있는 상태에서 특정 구역만 투명하게 하는 기술을 찾고 있었다면.. 미안하지만 그건 직접 구현해야 될 것 같다. 최대화, 최소화 같은 버튼을 직접 구현하면서 말이다.
하여튼, 조금은 특이한 기능인 transparent에 대해서 알아보았다. 이런 쪽 기능(새로운 느낌을 주는 신기한 기능)을 잘 활용해서 창의적인 앱들이 많이 나왔으면 한다. 그럼 이만!
'프로그래밍 > Node.js' 카테고리의 다른 글
| Node.js agar.io 서버 열기 (1) | 2018.01.18 |
|---|---|
| Node.js 입력받기 (2) | 2018.01.05 |
