일렉트론 시작해보자!

Screen_Shot_2019-06-11_at_11-787305ac-85f7-4ce9-b8be-42f41f80d114.13.32_AM

웹의 전성시대.

그 중심에 자바스크립트(JavaScript).

자바스크립트는 웹 페이지를 동적으로 제어하기 위해서 고안된 언어입니다. 자바스크립트는 HTML5 등장 이후 모바일과 데스크톱 애플리케이션 모두를 개발할 수 있게 되면서 그 중요성이 커지고 있습니다.

유명한 Atom Editer, Slack, Visual Code, ProtoPie도 자바스크립트로 만들어졌다는 사실 알고 있었나요.? 자바스크립트 한 코드로 윈도우, 맥, 리눅스에서 동작하는 프로그램을 만들게 해주는 '일렉트론'에 대해 알아보도록 하겠습니다.

1. 일렉트론

일렉트론은 데스크탑 애플리케이션 제작을 위한 프레임워크입니다. (일렉트론 홈페이지: https://electronjs.org/)

1-1. 특징

  • Github에서 텍스트 에디터 Atom을 만들면서 공개한 오픈소스 프레임워크입니다.
  • 멀티플랫폼(윈도우즈, 리눅스, macOS)에서 구축 및 실행 가능합니다.
  • Chromium과 Node.js를 사용하므로 HTML, CSS 및 JavaScript로 애플리케이션을 만들 수 있습니다.
  • 다양한 자바스크립트 프레임워크, 라이브러리 등을 사용할 수 있습니다.

1-2. 애플리케이션 아키텍처

일렉트론은 2개의 프로세스가 있으며, Main 프로세스와 Renderer 프로세스입니다. 렌더러 프로세스는 여러 개 실행될 수 있습니다.

  • Main 프로세스는 자바스크립트로 실행되며 어플레케이션의 라이프 사이클을 관리합니다. browser-window가 하는 일은 Renderer 프로세스를 실행합니다.
  • Renderer 프로세스는 웹 페이지의 렌더링, 일렉트론 앱의 UI/UX을 담당합니다.

2. 개발 환경 설정

2-1. IDE 설치하기

일렉트론을 시작하려면 통합 개발 환경(Integrated Development Environment)을 구축해야 합니다. 저는 웹 개발을 할 때 JetBrains의 JavaScript IDE인 Webstrom을 사용하고 있으며, 일렉트론으로 만들어진 Microsoft의 Visual Studio Code도 추천합니다. 무엇보다 일렉트론을 하기 위해서는 HTML/CSS와 JavaScript의 지식이 있어야 합니다.

2-2. Node.js 설치하기

일렉트론을 사용하려면 Node JS가 설치되어 있어야 합니다. Node.js를 설치하면 NPM(Node Package Manager)이 자동으로 설치되며, NPM을 통해 프로젝트에 라이브러리를 적용 및 관리할 수 있습니다.

2-3. 운영체제 요구 사항 확인하기

일렉트론은 macOS 경우 64비트 바이너리에서만 동작되며, 지원되는 최소 macOS 버전은 macOS 10.10 (Yosemite)입니다. 윈도우와 리눅스는 'Electron supported platforms'을 통해 확인할 수 있습니다.

2-4. 옵션으로 Yarn 설치하기

Yarn은 자바스크립트의 새로운 패키지 매니저입니다. 저는 NPM보다 Yarn을 더 사용합니다. 그 이유는 NPM은 배포가 쉽고 종속성을 쉽게 해결할 수 있다는 장점이 있지만 패키지가 중복으로 설치될 수 있다는 단점이 있습니다. Yarn은 다운로드 한 모든 패키지를 캐시하고 작업을 병렬 처리하기에 NPM보다 더 빠르며, 체크섬을 사용하여 코드가 실행되기 전에 설치된 모든 패캐지의 무결성을 확인하기 때문에 보안성이 좋습니다.

Yarn은 NPM으로 설치할 수 있으며, Homebrew 등을 통해서도 설치할 수 있습니다.

$ npm install -g yarn

아래 명령을 통해 Yarn이 잘 설치되었는지, 어떤 버전인지 확인할 수 있습니다. 2019년 6월 11일 기준 최신 Stable 버전은 1.16.0 입니다.

$ yarn --version
// 1.16.0

3. 빠르게 시작해보자. Boilerplate!

보일러플레이트는 새로운 프로젝트를 바로 시작할 수 있도록 돕는 템플릿이라고 생각하면 됩니다. 템플릿을 통해 프로젝트의 기본이 되는 코드를 재사용 할 수 있습니다. 일렉트론도 Github에 오픈 보일러플레이트 프로젝트들이 많습니다.

3-1. electron-quick-start

일렉트론 공식 문서에 있는 빠른 시작 안내서를 기반으로 한 최소한의 일렉트론 프로그램입니다.

electron/electron-quick-start

  1. 사용 방법
    # 저장소의 소스 코드를 복제하기 (Git 설치 필요)
    git clone https://github.com/electron/electron-quick-start
    # 복제한 저장소로 이동하기
    cd electron-quick-start
    # 프로젝트 의존성(dependencies) 설치하기 (NPM 사용)
    npm install
    # 프로젝트 실행하기
    npm start
  1. 프로젝트를 macOS에서 실행한 모습

Screen_Shot_2019-06-11_at_2-1d64bf5a-c656-4f51-a512-56c0000d852f.15.29_PM

3-2. electron-react-boilerplate

해당 오픈 프로젝트는 Electron, React, Redux, React Router, Webpack, React Hot Loader가 설치 및 기본적인 틀이 잡혀 있어 빠르기 개발하기에 용이합니다.

electron-react-boilerplate/electron-react-boilerplate

  1. 사용 방법
    # 저장소의 소스 코드를 복제하기 (Git 설치 필요)
    git clone --depth 1 --single-branch --branch master https://github.com/electron-react-boilerplate/electron-react-boilerplate.git your-project-name
    # 복제한 저장소로 이동하기
    cd your-project-name
    # 프로젝트 의존성(dependencies) 설치하기 (Yarn 설치 필요)
    yarn
    # 프로젝트 개발 모드로 실행하기
    yarn dev
  1. 프로젝트를 macOS에서 실행한 모습

b1f07a4e-74e3-11e5-8d27-79ab6947d429-fe44c3f6-f748-44e3-be4b-739260659054

4. 애플리케이션 배포

일렉트론 애플리케이션을 배포하면 해당 운영체제에 맞는 응용 프로그램 실행 파일이 생성되게 됩니다. 일렉트론 배포는 'electron-builder' 라이브러리를 이용해 편리하게 할 수 있습니다. 다양한 운영체제에 맞게 변환해주고 패키징과 빌딩을 동시에 한 번에 작업을 해줍니다.

5. 일렉트론 TIP

5.1. 일렉트론에 Less 적용하기

5.1.1. Less란?

Less는 CSS(Cascading Style Sheets)로 컴파일되어 클라이언트 측 또는 서버 측에서 실행될 수 있는 동적인 전처리기로(CSS Preprocessor)서 스타일 시트 언어입니다. Less는 변수, 중첩, 혼합, 연산자 및 함수 등 메커니즘 등을 제공합니다. Less와 다른 CSS 전처리기 간의 주요 차이점은 브라우저가 less.js를 통해 실시간 컴파일을 허용한다는 점입니다. (Less 홈페이지: http://lesscss.org/)

5.1.2. Less 설치하기

Less를 사용하려면 less, less-loader 모듈을 설치해야 하며, Webpack에 Less가 컴파일 되는 부분을 추가해야 한다.

  1. 웹펙에 Less loader를 사용하려면 먼저 프로젝트에 **'eject'**를 수행해야 합니다. eject을 하는 이유는 대부분 boilerplate 프로젝트는 내부적으로 사용하고 있는 npm 모듈을 모두 캡슐화하므로 매우 간단하고 Webpack 또는 Babel과 같은 것에 대해 알 필요가 없습니다. eject은 개발 프로젝트의 구성과 설정 파일을 추출함으로써 모든 구성이 개발자에게 노출되며 개발자가 모든 구성을 유지하고 관리할 수 있습니다. eject 방법은 프로젝트 루트 폴더에서 npm run eject를 수행하면 되며 eject를 하면 절대로 전 상태로 되돌릴 수 없습니다. Yarn을 사용한다면 yarn run eject 명령어를 수행하면 됩니다.

eject를 하면 **'config'**라는 새로운 폴더가 생성되며, 해당 폴더 안에는 모든 프로젝트 구성 파일들이 있습니다. 우리는 그중 2개의 파일(webpack.config.dev.jswebpack.config.prod.js) 집중하며 수정할 것입니다.

  1. 프로젝트를 eject 했으면, less-loader을 설치합니다. 설치하기 위한 명령어는 아래와 같으며, 2019년 6월 12일 기준 "less"의 최신 버전은 3.9.0, less-loader의 최신 버전은 5.0.0입니다.
  • NPM을 사용할 경우: npm install -S less less-loader
  • Yarn을 사용할 경우: yarn add less less-loader
  1. less 관련 모듈들을 추가했다면, 아래 순서대로 진행하면 됩니다.
  • webpack 구성 파일을 엽니다
  • test: /\.css$/를 발견합니다.
  • 해당 부분을 **test: /\.(?:le|c)ss$/**로 변경합니다.
  • use을 배열 안에 있는 css-loader 객체 뒤에 아래 내용을 추가합니다.
    {
      loader: require.resolve('less-loader'),
      options: {
        importLoaders: 1,
      },
    }
  • 파일은 다음과 같아야 합니다.
    {
    	test: /\.(?:le|c)ss$/,
    	use: [
    		require.resolve('style-loader'),
    		{
    			loader: require.resolve('css-loader'),
    			options: {
    		    importLoaders: 1,
    		  },
    		},
    		{
    		  loader: require.resolve('less-loader'),
    			options: {
    				importLoaders: 1,
    			},
    		},
  • 위 내용이 webpack.config.dev.jswebpack.config.prod.js 2가지 파일 모두에 적용되어야 합니다.
  • less 설치가 모두 완료되었습니다. 이제 프로젝트에서 css 대신 less를 이용해 스타일링을 할 수 있습니다.

5.2. 글꼴 추가 및 적용하기

좋은 디자이너는 텍스트를 콘텐츠로 생각하지만 위대한 디자이너는 텍스트를 UI로 다룬다 - 미국의 디자이너 카메론 몰

프로젝트에서 사용되는 글꼴은 프로젝트 결과에 긍정적인 영향을 미치는 필수 요소입니다. 일렉트론에서도 글꼴을 추가해 가독성을 향상하고 디자인을 더 돋보이게 할 수 있습니다.

5.2.1. 폰트 적용하기 위한 단계

  1. 웹 폰트 형식으로 변환하기

Transfonter 사이트를 통해 확장자 TTF, OTF, WOFF, WOFF2 등 글꼴 파일을 다양한 폰트 파일과 CSS 스타일, 데모 페이지로 변환할 수 있고 글꼴을 손쉽게 웹(일렉트론) 프로젝트에 적용할 수 있습니다.

나눔바룸고딕 글꼴의 ttf 형식의 파일들을 Transfonter 사이트로 변환된 파일들 모습입니다.

Screen_Shot_2019-06-11_at_5-157c83a1-a538-4a4f-a186-f53be02b0533.08.43_PM

  1. 웹 글꼴 적용하기

일렉트론에서 제일 기본이 되는 index.html이나 index.css에 추가하려는 폰트의 stylesheet.css을 적용합니다.

    <!DOCTYPE html>  
    <html lang="ko">
    <head>  
    ...
    <link rel="stylesheet" href="/nanumbarungothic.css" />
    <style type="text/css">
    body {
    	font-family:'Nanum Barun Gothic';
    }
    ...
    </style>
    </head>  
    <body>
    ...
    </body>  
    </html>

글꼴을 사용하려는 영역(ex. class 또는 id)에 font-family과 폰트 이름으로 글꼴을 적용해주면 됩니다.

    div {
    	font-family: Nanum Barun Gothic;
    }
  1. 나눔바룸고딕 웹 글꼴

한국 사람들이 자주 사용하는 글꼴인 나눔바룸고딕 글꼴을 웹(일렉트론) 프로젝트 쉽게 적용하도록 만들어둔 Github 저장소입니다. 저장소에 있는 파일들을 다운로드해서 적용하면 됩니다.

Github 주소: https://github.com/hiun/NanumBarunGothic

5.3. 브라우저 사이즈 고정하기

BrowserWindow는 브라우저 윈도우를 생성하고 제어합니다. 옵션을 통해 다양하게 브라우저 윈도우를 설정할 수 있는데, 옵션 중 'resizable'는 윈도우의 크기를 변경할 수 있는지 여부를 지정합니다. (기본값은 true입니다). BrowserWindow와 옵셥들의 대한 정보는 일렉트론 공식 문서(클릭)를 통해 확인할 수 있습니다.

mainWindow = new BrowserWindow({ resizable: false })

5.4. 리액트 개발자 도구 사용하기

일렉트론과 리액트를 같이 사용한다면 React Developer Tools을 추천합니다. React Developer Tools는 오픈 소스 React 용 Chrome DevTools 확장 프로그램입니다. 이 도구를 사용하면 Chrome 개발자 도구에서 React 구성 요소 계층을 검사할 수 있습니다. 프로젝트에서 아래와 같은 설정을 마치면 Chrome DevTools에 React라는 새로운 탭이 생깁니다. 이것은 페이지에 렌더링 된 루트 React 구성 요소와 렌더링을 종료 한 하위 구성 요소를 보여줍니다.

React Developer Tools를 사용한다면:

  1. Chrome 브라우저를 설치합니다.
  2. chrome://extensions로 이동한 후 해시된 fmkadmapgofadopljbjfkapdkoienihi 같이 생긴 확장 기능의 ID를 찾습니다
  3. Chrome에서 사용하는 확장 기능을 저장해둔 파일 시스템 경로를 찾습니다:
  • windows에선 %LOCALAPPDATA%\Google\Chrome\User Data\Default\Extensions;
  • Linux에선:
    • ~/.config/google-chrome/Default/Extensions/
    • ~/.config/google-chrome-beta/Default/Extensions/
    • ~/.config/google-chrome-canary/Default/Extensions/
    • ~/.config/chromium/Default/Extensions/
  • macOS에선 ~/Library/Application Support/Google/Chrome/Default/Extensions

예시로 제 맥북 컴퓨터에서 확장 프로그램 위치를 API에 전달하고 있는 코드입니다.

const path = require('path')
const os = require('os')

BrowserWindow.addDevToolsExtension(
	'/Users/seunghyun/Library/Application Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/3.6.0_0'
);

5.5 성능 테스트하기

Untitled-5a3359d6-83bd-41ec-aef9-1426967faba6

Chrome DevTools의 Performance 패널을 사용하면 애플리케이션에서 작업이 실행될 때 모든 작업을 기록하고 분석할 수 있습니다. 이는 애플리케이션에서 인지된 성능 문제를 조사하는 데 가장 좋은 출발점입니다. 일렉트론을 개발할 때에 런타임 성능을 기록하고 분석할 수 있어서 자주 사용됩니다.

결론

일렉트론을 통해 개발자는 웹 기술(HTML, CSS, Javascript) 만으로 멋진 멀티 플랫폼 데스크톱 응용 프로그램을 손쉽게 만들 수 있습니다. 모든 기술에는 장단점이 있듯이 웹 기술과 일렉트론도 모든 문제를 해결할 수 없습니다. 일렉트론이 모든 응용프로그램에 적합한 선택은 아니지만, 웹용으로 개발한 경험이 있고 쉽게 데스크톱 애플리케이션 플랫폼을 원한다면 한 번 시도해보시기 바랍니다. 일렉트론을 통해 개발하는 동안 일렉트론 공식 API 문서를 확인하시며, 일렉트론 프로젝트에 직접 기여할 수도 있습니다.

Show Comments