리멤버 데스크톱 앱 개발기
-
Upload
tom-kim -
Category
Engineering
-
view
820 -
download
1
Transcript of 리멤버 데스크톱 앱 개발기
리멤버�데스크톱�앱�개발기
✕
최소�비용으로�새로운�플랫폼�지원하기
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