<center>
https://steemitimages.com/DQmWdpWeFcZpHrkafrQHbVVZDPoLUYiPsXNcW74urFGQMeq/image.png
</center>

오늘은 Windows, macOS, Linux용 데스크탑 어플리케이션 개발 프레임워크인 [Electron](https://electron.atom.io)에 대해서 소개해드리겠습니다.

**Electron은 웹의 언어인 `JavaScript`와 `HTML`을 이용해서 한방에 크로스 플랫폼 데스크탑 어플리케이션을 만들 수 있게 도와주는 프레임워크입니다.**

원래 데스크탑 어플리케이션은 보통 해당 OS에서 제공하는 언어와 환경을 이용해서 제작합니다.
Windows의 경우 `C#`이나 `C++` 등을 이용해서 만들고요.
macOS의 경우 `Objective-C`나 `Swift` 등을 이용해서 만들게 되는거죠.

OS마다 개발 환경이 다르기 때문에 크로스 플랫폼 데스크탑 어플리케이션을 만드는 것은 어려운 일입니다.
각 언어를 사용할 수 있는 개발자가 모두 필요하기 때문에 개발 비용이 많이 들고, 
지원하는 OS 갯수 만큼의 프로젝트를 관리해야하기 때문에 유지 비용도 많이 드는 일이죠.

그래서 이런 상황을 개선하기 위해서 `Java`를 이용해서 데스크탑 어플리케이션을 개발하거나 [wxWidgets](https://www.wxwidgets.org/), [Qt](https://www.qt.io/) 등의 라이브러리를 이용하기도 했습니다.
개발/유지 비용이 많이 낮아지기는 했지만, 개발 난이도가 쉬운 편은 아니었습니다.

그러다가 2011년에 [Roger Wang](https://github.com/rogerwang)이 [node-webkit](https://github.com/nwjs/nw.js/tree/webkitgtk)이라는 프로젝트를 발표합니다.
바로 웹의 언어 `JavaScript`와 `HTML`을 이용해서 데스크탑 어플리케이션을 만들 수 있게 하는거죠!
사실 이전에도 비슷한 시도는 있었던 것으로 알고 있습니다. RealPlayer 등이 그런 시도를 했던 것으로 기억합니다.
하지만 대중화되지는 못했죠. 그때는 웹 기술이 지금만큼 성숙하지 못했거든요.
이제는 [nodejs](https://nodejs.org)와 [WebKit](https://webkit.org), [Chromium](https://www.chromium.org/)등의 프로젝트로 인해서 웹 기술로 데스크탑 어플리케이션을 만들 수 있는 수준이 되었습니다. 그리고 node-webkit은 이런 프로젝트들을 활용했습니다.

JavaScript와 HTML의 경우 상대적으로 쉬운 편에 속하는 언어이기 때문에, 네이티브 언어에 비해서 앱을 개발하기도 쉬울 뿐더러 OS마다 다른 언어를 사용할 필요가 없게 되었기 때문에 개발이 더 편리해졌습니다.
그리고 JavaScript와 HTML을 활용하기 때문에 네이티브 개발에 비해서 앱을 디자인하기 더 쉬워지고, 앱에 애니메이션을
 넣는 등의 좀 더 인터랙티브한 기능을 구현하기가 쉬워진 거죠.
`node-webkit`으로 인해서 웹 개발자가 데스크탑 어플리케이션을 빠르고 쉽게 그리고 예쁘게 만들 수 있는 환경이 되었습니다.

그리고 [Electron](https://electron.atom.io)은 이 node-webkit의 개선된 버전입니다.
node-webkit의 개발자 중 한명이었던 [Cheng Zhao](https://github.com/zcbenz)가 [Github](https://github.com)으로 이직하여 개발한 프로젝트입니다.
Github은 Electron을 이용해서 자사의 새로운 텍스트 에디터 [Atom](https://atom.io)을 만들어서 오픈 소스로 공개했습니다.
이걸로 스스로 Electron을 이용한 개발의 편리함과 그 유용성을 입증했습니다.
그리고 예전보다 더 경쟁이 치열한 시대가 되었기 때문에 많은 회사들이 네이티브 환경을 이용해서 데스크탑 어플리케이션을 만드는 것을 비생산적으로 보고 있습니다.
이로 인해서 Electron이 점점 더 많은 인기를 얻고 있습니다.

그럼 이제 Electron을 이용해서 만든 데스크탑 어플리케이션 몇가지를 소개해드리겠습니다.

## [Atom](https://atom.io)
https://steemitimages.com/DQmYVgwzTJzM8dGypbuTjB6G6j8t6UsSoeomCKxyTzYQ1Bf/image.png

Github의 텍스트 에디터 Atom입니다. 원래 Electron은 Atom을 만들기 위해서 시작된 프로젝트입니다 :)
웹 기술을 사용한 가장 현대적인 텍스트 에디터라고 볼 수 있습니다. 

## [Slack Desktop App (Windows)](https://slack.com/)
https://steemitimages.com/DQmUqBnDpyeY1h1UQPQHnLRucLVZCzPVR1Putg48HenQwUV/image.png

대표적인 사무용 메신저 Slack의 데스크탑 앱이 Electron을 이용해서 만들었습니다.
저도 굉장히 잘 쓰고 있습니다.
Slack이 스타트업이기 때문에 개발 시간을 단축하기 위해서 Electron을 사용한 것으로 보입니다.

## [Github Desktop](https://desktop.github.com/)
https://steemitimages.com/DQmQexDDpxu7HNdz2wjoPcKy8NawbJL9Sa6NqzbD7nNFukN/image.png

Github의 데스크탑 클라이언트 Github Desktop입니다.
Github Desktop의 경우 예전에 네이티브 언어를 사용해서 개발했다가 개발 비용을 줄이기 위해서 최근에 Electron을 이용해서 처음부터 다시 개발했습니다.

## [Visual Studio Code](https://code.visualstudio.com/)
https://steemitimages.com/DQmZN1oVCM2GhgLCjgUvBWdcEEVHgfpr134Gxs7QrjqiZSz/image.png

`Microsoft`에서 만든 `Atom`과 유사한 텍스트 에디터입니다.
성능이 더 좋기 때문에 저는 Atom 대신에 VSCode를 사용합니다.

## 그리고 제가 만든 [Hain](https://github.com/hainproject/hain)
https://steemitimages.com/DQmXVafsMHZt6MUav2RmZk4vp8T5ZedUTRqJ9TyoWEB3vKC/image.png

맥에서 잘 사용하던 [Alfred](https://www.alfredapp.com/)의 경험을 윈도에서도 재현하고 싶어서 제가 만든 앱입니다 :)
지금은 맥 버전도 만들어서 윈도, 맥 두 군데에서 모두 잘 사용하고 있습니다.

---
지금까지 Electron에 대한 소개였습니다.
감사합니다.