리멤버 데스크톱 앱 개발기

리멤버 데스크톱 앱 개발기
✕
최소 비용으로 새로운 플랫폼 지원하기
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

OAuth 로그인 
- 리멤버에서는 Facebook, Google, Naver 세 가지
의 OAuth 로그인 기능 제공
- 세 서비스 모두 전체 페이지를 redirect하는 방식을
사용하여 기존의 팝업창을 띄우던 웹앱 수정

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

네트워크 연결 상태 
- online, offline event, navigator.onLine를 이용하
여 renderer 쪽의 HTML에서 webview와 network
status 화면을 교체

기존 웹앱와의 연동 
- 결국은 웹 브라우저이기 때문에 기존의 웹앱에서 원하
지 않는 페이지로 가는 링크들을 모두 막아야 함
- 방법 1. Electron에서 HTML selector로 특정 링크들
숨겨주기 
→ 작업이 간단하나, 웹사이트에서 selector 수정이 일어나면 데스
크톱도 바로 같이 수정되야 함
- 방법 2. 웹앱을 수정해서 Electron으로 접속할 경우
UserAgent에 따라 분기 처리를 하는 방법 
→ 작업량은 비교적 많으나, 데스크톱에서는 더 이상 고려할 사항
없음

업데이트 
- 앱을 실행하면 update할 버전이 존재하는지 확인
- 존재할 경우 자동으로 업데이트를 할 수 있게 설치
파일 다운로드, 업데이트
- 업데이트를 완료하기 위해서 재시작을 하라는 풍선
을 띄워줌
- 재시작 시 업데이트 완료

코드 보호 
- 앞에서 Slack을 예로 얘기한 것과 같이 맘만 먹으면
코드를 다 볼 수 있음
- JS를 모두 minify함 (ES6 -> babel -> minify)
- 지금은 EncloseJS(컴파일) 등 코드 보호할 수 있는 
툴 있다고 들음

기타 삽질..
.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

리멤버 데스크톱 앱 개발기

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to 리멤버 데스크톱 앱 개발기

Similar to 리멤버 데스크톱 앱 개발기 (20)

리멤버 데스크톱 앱 개발기