Electron 프레임워크 Nextron으로 데스크탑앱 만들어보기 chapter.1 프로젝트 세팅 및 구조 파악

이수연·2025년 2월 6일

작년 여름, 새로운 경험을 쌓고 싶어 시작했던 에세이 플랫폼 "링크드아웃"이 MVP 개발을 완료하고 Windows 버전으로 출시되었다. 개발 과정에서 수많은 시행착오를 겪었지만, 그만큼 많은 것을 배울 수 있었기에 더욱 뿌듯한 순간이었다. 하지만 이것은 끝이 아니라, 지금부터가 진정한 시작이라고 생각한다. 이제부터, Nextron을 활용해 데스크톱 앱을 개발한 과정을 챕터별로 나누어 소개하고자 한다.

프롤로그) pwa는 기기의 고유 식별자를 못가져온다????

처음 기획시에는 "기기간 동기화"라는 비즈니스 로직이 없었다. 따라서 간편하게 만들수 있는 pwa로 개발하기로 정하고 개발을 시작 하였다.
그러나 개발이 진행되면서, 추후 MVP(Minimum Viable Product) 출시 이후 추가될 기능으로 인하여 기기간 동기화가 필요해졌다. 이에 따라 브라우저에서 기기의 고유 식별자를 가져오는 방법을 찾아보기 시작했는데 아래와 같이 개인정보 보호 문제로 기기의 고유 식별자를 가져올수가 없었다.

그럼 userAgent로는 불가능 할까??

userAgent는 현재 기기의 정보는 가져올수 있으나 해당 기기의 고유 식별자까지는 가져올수 없다. 정확한 기기 식별을 위하여 새로운 라이브러리를 찾기 시작하였다.

정확한 기기 식별이 필요한 상황에서, 이를 해결할 수 있는 새로운 방법을 찾기 시작했다. 다양한 라이브러리와 접근 방식을 검토한 끝에, Electron을 사용하면 기기의 고유 식별자를 가져올 수 있다는 점을 확인하였다. React Native로도 고유식별자를 가져올수있고 데스크톱 앱을 개발할 수 있지만, 네이티브 개발 경험이 없었던 우리에게는 학습과 개발에 상당한 시간이 소요될 것으로 예상되었다. 특히, 새로운 기술을 익히고 프로젝트에 적용하는 데 최소 3개월 이상의 시간이 필요할 것으로 판단되었기 때문에,보다 빠르고 익숙한 웹 기술을 활용할 수 있는 Electron을 선택하게 되었다.

Electron은 node-machine-id와 같은 모듈을 활용하여 운영체제별 고유한 기기 식별자(UUID)를 가져올 수 있으며, 웹 브라우저 환경에서는 불가능한 로컬 파일 접근, 백그라운드 실행, 알림(Notification) 기능 등을 지원한다. 실제로 Discord나 카카오톡, 슬랙등이 이 electron을 이용하여 만들어 졌다.

Nextron으로 프로젝트 세팅하기

앞서 언급한 이유로 인해, PWA에서 Electron으로의 전환을 검토하기 시작했다. 하지만, 기본 Electron으로 마이그레이션하는 데는 비용과 개발 리소스가 많이 소요되었다. 이에 따라, 보다 효율적인 전환 방법을 모색한 끝에 Electron과 Next.js를 결합한 프레임워크인 Nextron을 활용하기로 결정하였다.

Nextron은 최근까지 지속적으로 업데이트가 이루어지고 있는, 활발하게 유지보수 중인 프레임워크이다.

npm i nextron

다음의 명령어로 프로젝트를 세팅하고 npm run dev로 실행하면 아래와 같은 에러를 마주칠수 있다.
아래의 내용은 electron은 devDependecies에서만 허용되므로 electron을 devDependecies에 옮겨달라는 내용이다. Electron은 프로덕션(배포 환경)에서 실행할 때는, Electron 실행 파일(.exe, .app, .deb 등)로 패키징되어 배포된다. 즉, electron 패키지가 런타임에서 별도로 필요하지 않기 때문이다.

아래와 같이 electron을 devDependecies에 옮기면, 문제는 해결된다.

자이제 nextron을 설치했다면 폴더의 구조는 다음과 같다. 크게 main, renderer, resources로 세팅되어 있을것이다. 각각의 역할은 아래에서 설명 하겠다.

main 폴더

main/ 폴더는 Electron의 메인 프로세스(Main Process)가 실행되는 공간이다.
Electron 애플리케이션의 백엔드 역할을 하며, 윈도우 생성, 시스템 제어, 파일 접근 등의 기능을 담당한다.

📌 파일별 역할

create-window.ts (또는 create-window.js)
새로운 윈도우(브라우저 창)를 생성하는 역할
BrowserWindow를 이용해 renderer에서 UI를 표시
preload.ts (또는 preload.js)
preload 스크립트는 renderer 프로세스가 실행될 때 함께 로드됨
브라우저에서 main 프로세스에 직접 접근하지 못하도록 보안을 강화
contextBridge와 ipcRenderer를 사용하여 안전한 데이터 전달 수행

📌 데이터 흐름

create-window.ts에서 새로운 창을 생성
preload.ts에서 윈도우가 실행된 후, 필요한 정보(예: 기기의 고유 식별자, FCM 토큰 등)를 main 프로세스로 요청
main 프로세스에서 해당 데이터를 가져와 renderer 프로세스로 전달

renderer 폴더

renderer 폴더에는 브라우저에 렌더링할 Next.js 코드가 세팅되어 있다.
이때, Next.js의 app/ 폴더 기준이 아닌 pages/ 폴더 기준으로 구조가 설정된다.

즉, renderer 폴더 내에서 Next.js의 pages/ 기반 라우팅을 사용하도록 구성하면 된다.
폴더 구조만 pages/ 방식으로 세팅하면 정상적으로 동작하며, 참고로 필자는 Next.js 13 버전을 사용하여 프로젝트를 설치했다.

resources 폴더

resources/ 폴더는 애플리케이션에서 사용하는 아이콘, 이미지, 설정 파일 등의 정적 리소스를 저장하는 공간이다. 다음과 같이 세팅하고,

📌 주요 파일 및 역할

resources/icon.png → 애플리케이션 아이콘
resources/config.json → 앱에서 사용하는 설정 파일
resources/assets/ → 이미지, 폰트, 기타 리소스

위에서 세팅한 아이콘을 아래와 같이 main프로세서의 create-window 파일에 세팅하면 된다.

exe 파일 혹은 app파일을 만들어보자

프로젝트를 빌드하기전 루트경로의 electron-builder.yml파일에 빌드된 파일의 정보를 아래와 같이 적어주자.

이렇게 세팅한후 npm run build를 하면... 루트경로에 dist폴더가 생긴다. 빌드후 결과물을보면 윈도우에서 빌드했을땐 exe파일이, mac에서 빌드했을땐 app파일이 생긴다. 따라서 작업할때도 윈도우버전과 mac버전을 따로 생성후 배포해야된다. 필자는 윈도우 기준으로 작업했고 윈도우 버전으로 현재 출시 되었으나, mac버전에서 예상치 못한 결함이 발견되어 mac 버전 작업을 현재 진행중이다.

exe setup파일을 바탕화면에 옮겨주고, 설치하면 앱이 정상적으로 설치된다.

설치하면서 궁금할수 있는점을 말해보자면... 알수 없는 게시자라는 경고창이 뜰수 있다. 이는 해당 실행 파일이 Microsoft의 코드 서명 인증(CI, Code Signing Certificate)을 받지 않았기 때문이다. 이는 CI에서 인증받지 못한 파일을 설치할때 나오는 경고창으로 CI 인증을 받으려면 비용이 발생하며, 연간 수십~수백만 원의 인증 비용이 필요하다. 따라서 우리와 같은 민간 업체들은 인증을 받지않는 경우가 많다고 한다.