리멤버�데스크톱�앱�개발기

✕

최소�비용으로�새로운�플랫폼�지원하기

DRAMA&COMPANY�Engineer�김담형

스마트한�비즈니스�습관,�리멤버찍으면�입력해주는�No.1�명함관리�앱

100%�정확한�입력수정이�필요없는�편리함

리멤버�회원�간�명함�정보�변경�시 실시간으로�자동�업데이트

명함정보�업데이트

휴대폰�및�구글�주소록에�저장,Excel�다운로드�및�아웃룩�연계

주소록�저장�지원

리멤버�소개

비서의�수기입력

리멤버�데스크톱�버전�개발기

-� 작년�11월에�리멤버�데스크톱�버전�배포!�

-� Electron을�이용해서�데스크톱�버전을�개발하기로�고민한�시점부터�배포�후�결과까지의�경험한�내용들을�정리�

-� 리멤버�데스크톱�버전은�SSB(Site-specific�brower)

-� 기존의�Android,�iOS�외에�Web�버전을�새롭게�런칭�

-� Slack과�같이�업무에�사용되는�유틸리티�성격의�웹앱인데�브라우저로�매번�접속하기가�번거로움�

-� Slack이�WebView(SSB)로�만들어진�것�같으니�조사해보자

시작하게�된�계기

-� 내가�제일�많이�사용하고�있는 Atom,�Slack,�VS�Code가�Electron으로�만들어졌었다니!�

-� →�Electron을�도입할�수�있을지�조사

시작하게�된�계기

-� 멀티�플랫폼(Windows,�Mac,�Linux)을�지원할�수�있다�

-� 예전에�node-webkit(지금은�NW.js)를�공부하면서�매우�편했던�기억이�있음�

-� Squirrel�Installer를�이용한�자연스러운�인스톨,�업데이트�과정�

-� HTML,�CSS,�JS를�그대로�사용할�수�있다

마음에�들었던�점

0.3X�버전인데�production에�사용해도�괜찮을까?�

-� Electron만으로�앱을�만드는게�아니라�WebView의�역할만�만드는�것이니�괜찮을�듯�

-� 우리가�필요한�기능들은�모두�지원�

-� Slack,�Atom,�VS�Code과�같은�믿음직한�레퍼런스

걱정되었던�점

-� 개발할�당시�Stack�Overflow에�‘Electron’으로�tag된�질문들�300개�이하..�(AngularJS는�당시에�13만+)�

-� 주위에�사용하는..�아니�들어본�사람도�없음

-� →�Github�코드,�이슈�등�보면서�혼자�삽질..

어떻게�공부하지?

-� 지금은�모르겠으나,�그�당시의�Slack�Windows�버전을�설치하고,�Asar로�합쳐진�파일들을�언팩하면�HTML,�CSS,�JS��파일들을�주석까지�다�볼�수�있었음�

-� Electron�관련�오픈�소스에�많은�commitment를�보여주시는�폴벳츠님의�주석까지�보면서�많은�공부를�함�

-� 딱�필요했던�SSB를�구현하는�코드라�좋은�참고�코드였음�

-� 지금은�Automattic/wp-desktop도�추천

Slack을�참고하자!

개발�환경

-� 당시에는�Node�4.x를�사용하여�Main�Process�쪽은평소에�하던�Node�개발하듯�진행�

-� Renderer쪽도�평소에�하던�웹�front-end�개발�하듯�진행�

-� Grunt를�이용하여�빌드�등�잡다한�업무�처리�

-� 테스트�코드는�작성을�못했음�(지금은�Spectron이�생김!)

SSB를�만들면서�추가로�고려할�점

파일�다운로드

-� will-download�event가�발생하면�임시�폴더로�다운로드�

-� 사용자에게�저장�위치�지정�창�띄움�

-� 파일�이동�

-� 완료�notification

SSB를�만들면서�추가로�고려할�점

OAuth�로그인

-� 리멤버에서는�Facebook,�Google,�Naver�세�가지의�OAuth�로그인�기능�제공�

-� 세�서비스�모두�전체�페이지를�redirect하는�방식을�사용하여�기존의�팝업창을�띄우던�웹앱�수정

SSB를�만들면서�추가로�고려할�점

새�창

-� Renderer�Process에서�new-window�event가�발생할�때�external�창을�띄움

SSB를�만들면서�추가로�고려할�점

네트워크�연결�상태

-� online,�offline�event,�navigator.onLine를�이용하여�renderer�쪽의�HTML에서�webview와�network�status�화면을�교체

SSB를�만들면서�추가로�고려할�점

기존�웹앱와의�연동

-� 결국은�웹�브라우저이기�때문에�기존의�웹앱에서�원하지�않는�페이지로�가는�링크들을�모두�막아야�함�

-� 방법�1.�Electron에서�HTML�selector로�특정�링크들�숨겨주기→�작업이�간단하나,�웹사이트에서�selector�수정이�일어나면�데스크톱도�바로�같이�수정되야�함�

-� 방법�2.�웹앱을�수정해서�Electron으로�접속할�경우�UserAgent에�따라�분기�처리를�하는�방법→�작업량은�비교적�많으나,�데스크톱에서는�더�이상�고려할�사항�없음

SSB를�만들면서�추가로�고려할�점

업데이트

-� 앱을�실행하면�update할�버전이�존재하는지�확인�

-� 존재할�경우�자동으로�업데이트를�할�수�있게�설치파일�다운로드,�업데이트�

-� 업데이트를�완료하기�위해서�재시작을�하라는�풍선을�띄워줌�

-� 재시작�시�업데이트�완료

코드�보호

-� 앞에서�Slack을�예로�얘기한�것과�같이�맘만�먹으면�코드를�다�볼�수�있음�

-� JS를�모두�minify함�(ES6�->�babel�->�minify)�

-� 지금은�EncloseJS(컴파일)�등�코드�보호할�수�있는툴�있다고�들음

SSB를�만들면서�추가로�고려할�점

기타�삽질..

.exe�파일�배포

-� 처음�exe�파일을�배포해보는거라�SmartScreen�등�IE,�Windows,�Chrome의�보안�필터링에�걸림�

-� 분명�얘기해준대로�디지털�서명까지�다�했는데?�

-� SmartScreen에�일정�다운로드�이상,�일정�시간이�지나야�함..�(보통은�첫�릴리즈�이전에�사내�직원,�지인들한테�먼저�다운받아달라고�부탁을�해야�함)

-� 매우�낮은�진입장벽,�개발�속도,�편안함(마치�크롬�브라우저만�지원해도�되고,�파일�시스템에�접근할�수�있는�웹�개발하는�기분!)�

-� 손쉬운�cross-platform�지원�

-� 가벼운�설치와�업데이트�

-� 웹앱만�업데이트하면�두�개�플랫폼을�업데이트한�효과�

-� 다른�앱과�다르게�거의�반�강제�업데이트

개발�후�느낀�장점들

지금은�1.x가�나왔지만�개발한�당시를�기준으로..

-� 이상하네?�싶어서�검색을�해보면�issue가�open,�실시간�처리중�

-� 버그,�기능,�문서화�모두�부실�

-� 참고�자료가�거의�없었다..�

-� 사실�제품�개발은�크게�어렵지�않았는데,�Squirrel�Installer가�문서화가�되어있는게�별로�없어서�가장�힘들었음

개발�후�느낀�단점들

-� 플랫폼�하나를�더�지원하는데�들어간�시간�약�3주(여기서�추가로�다른�플랫폼�지원은�훨씬�적을�듯)�

-� 처음�개발�이후�들어간�개발�비용�거의�없음�

-� 웹앱만�업데이트해도�데스크톱�사용자들에게도�업데이트

결과�-�개발�기간

Daily�Active�User�성장!!�(물론�위�그래프에서는�다른�비즈니스�요인들도�있음)

결과�-�서비스

-� 설치�등의�과정에서�간혹�error�CS가�접수됨�

-� 하지만�대부분�재현이�되지�않고�직접�볼�수�없어서�처리하기가�힘듦�

-� 로그�파일을�기록하도록�해두었지만�조금�더�체계적으로�로깅할�수�있는�Error�reporting�framework이�있으면�좋을듯

결과�-�아쉬운�점

Mac?�Linux?�지원하고�싶은데..

Windows Macintosh Linux

98.39% 1.59% 0.1%

드라마�주연배우�캐스팅�중!

Android�-� Java�/�Android�-� Reactive�Programming�-� Sqlite�/�Realm

iOS�-� Swift�/�Objective-C�-� CoreData

Web�-� Ruby�on�Rails�/�AngularJS�

-� Bootstrap�/�SASS�-� Electron�-� Grunt

API�-� Ruby�on�Rails�-� AWS�-� MySQL

데이터�관리�-� MySQL�-� NoSQL�-� Java�-� Python

http://dramancompany.com/joinus

명함�교환방�->�코드로�교환방�찾기

명함�교환해요!

ELTRN�0629