Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

리멤버 데스크톱 앱 개발기

2,671 views

Published on

최소 비용으로 새로운 플랫폼 지원하기
Electron을 이용한 production 앱 개발기

Published in: Engineering
  • Be the first to comment

리멤버 데스크톱 앱 개발기

  1. 1. 리멤버 데스크톱 앱 개발기 ✕ 최소 비용으로 새로운 플랫폼 지원하기 DRAMA&COMPANY 
 Engineer 김담형
  2. 2. 스마트한 비즈니스 습관, 리멤버 찍으면 입력해주는 No.1 명함관리 앱
  3. 3. 100% 정확한 입력
 수정이 필요없는 편리함 리멤버 회원 간 명함 정보 변경 시
 실시간으로 자동 업데이트 명함정보 업데이트 휴대폰 및 구글 주소록에 저장,
 Excel 다운로드 및 아웃룩 연계 주소록 저장 지원 리멤버 소개 비서의 수기입력
  4. 4. 리멤버 데스크톱 버전 개발기 - 작년 11월에 리멤버 데스크톱 버전 배포! - Electron을 이용해서 데스크톱 버전을 개발하기로 고민 한 시점부터 배포 후 결과까지의 경험한 내용들을 정리 - 리멤버 데스크톱 버전은 SSB(Site-specific brower)
  5. 5. - 기존의 Android, iOS 외에 Web 버전을 새롭게 런칭 - Slack과 같이 업무에 사용되는 유틸리티 성격의 웹앱 인데 브라우저로 매번 접속하기가 번거로움 - Slack이 WebView(SSB)로 만들어진 것 같으니 조사 해보자 시작하게 된 계기
  6. 6. - 내가 제일 많이 사용하고 있는
 Atom, Slack, VS Code가 Electron으로 만들어졌 었다니! - → Electron을 도입할 수 있을지 조사 시작하게 된 계기
  7. 7. - 멀티 플랫폼(Windows, Mac, Linux)을 지원할 수 있다 - 예전에 node-webkit(지금은 NW.js)를 공부하면서 매우 편했던 기억이 있음 - Squirrel Installer를 이용한 자연스러운 인스톨, 업데 이트 과정 - HTML, CSS, JS를 그대로 사용할 수 있다 마음에 들었던 점
  8. 8. 0.3X 버전인데 production에 사용해도 괜찮을까? - Electron만으로 앱을 만드는게 아니라 WebView의 역할만 만드는 것이니 괜찮을 듯 - 우리가 필요한 기능들은 모두 지원 - Slack, Atom, VS Code과 같은 믿음직한 레퍼런스 걱정되었던 점
  9. 9. - 개발할 당시 Stack Overflow에 ‘Electron’으로 tag 된 질문들 300개 이하.. (AngularJS는 당시에 13만 +) - 주위에 사용하는.. 아니 들어본 사람도 없음
 - → Github 코드, 이슈 등 보면서 혼자 삽질.. 어떻게 공부하지?
  10. 10. - 지금은 모르겠으나, 그 당시의 Slack Windows 버전을 설치하고, Asar로 합쳐진 파일들을 언팩하면 HTML, CSS, JS 파일들을 주석까지 다 볼 수 있었음 - Electron 관련 오픈 소스에 많은 commitment를 보여 주시는 폴벳츠님의 주석까지 보면서 많은 공부를 함 - 딱 필요했던 SSB를 구현하는 코드라 좋은 참고 코드였 음 - 지금은 Automattic/wp-desktop도 추천 Slack을 참고하자!
  11. 11. 개발 환경 - 당시에는 Node 4.x를 사용하여 Main Process 쪽은
 평소에 하던 Node 개발하듯 진행 - Renderer쪽도 평소에 하던 웹 front-end 개발 하듯 진 행 - Grunt를 이용하여 빌드 등 잡다한 업무 처리 - 테스트 코드는 작성을 못했음 (지금은 Spectron이 생김!)
  12. 12. SSB를 만들면서 추가로 고려할 점 파일 다운로드
 - will-download event가 발생하면 임시 폴더로 다운로 드 - 사용자에게 저장 위치 지정 창 띄움 - 파일 이동 - 완료 notification
  13. 13. SSB를 만들면서 추가로 고려할 점 OAuth 로그인
 - 리멤버에서는 Facebook, Google, Naver 세 가지 의 OAuth 로그인 기능 제공 - 세 서비스 모두 전체 페이지를 redirect하는 방식을 사용하여 기존의 팝업창을 띄우던 웹앱 수정
  14. 14. SSB를 만들면서 추가로 고려할 점 새 창
 - Renderer Process에서 new-window event가 
 발생할 때 external 창을 띄움
  15. 15. SSB를 만들면서 추가로 고려할 점 네트워크 연결 상태
 - online, offline event, navigator.onLine를 이용하 여 renderer 쪽의 HTML에서 webview와 network status 화면을 교체
  16. 16. SSB를 만들면서 추가로 고려할 점 기존 웹앱와의 연동
 - 결국은 웹 브라우저이기 때문에 기존의 웹앱에서 원하 지 않는 페이지로 가는 링크들을 모두 막아야 함 - 방법 1. Electron에서 HTML selector로 특정 링크들 숨겨주기
 → 작업이 간단하나, 웹사이트에서 selector 수정이 일어나면 데스 크톱도 바로 같이 수정되야 함 - 방법 2. 웹앱을 수정해서 Electron으로 접속할 경우 UserAgent에 따라 분기 처리를 하는 방법
 → 작업량은 비교적 많으나, 데스크톱에서는 더 이상 고려할 사항 없음
  17. 17. SSB를 만들면서 추가로 고려할 점 업데이트
 - 앱을 실행하면 update할 버전이 존재하는지 확인 - 존재할 경우 자동으로 업데이트를 할 수 있게 설치 파일 다운로드, 업데이트 - 업데이트를 완료하기 위해서 재시작을 하라는 풍선 을 띄워줌 - 재시작 시 업데이트 완료
  18. 18. 코드 보호
 - 앞에서 Slack을 예로 얘기한 것과 같이 맘만 먹으면 코드를 다 볼 수 있음 - JS를 모두 minify함 (ES6 -> babel -> minify) - 지금은 EncloseJS(컴파일) 등 코드 보호할 수 있는
 툴 있다고 들음 SSB를 만들면서 추가로 고려할 점
  19. 19. 기타 삽질.. .exe 파일 배포
 - 처음 exe 파일을 배포해보는거라 SmartScreen 등 IE, Windows, Chrome의 보안 필터링에 걸림 - 분명 얘기해준대로 디지털 서명까지 다 했는데? - SmartScreen에 일정 다운로드 이상, 일정 시간이 지나야 함.. (보통은 첫 릴리즈 이전에 사내 직원, 지 인들한테 먼저 다운받아달라고 부탁을 해야 함)
  20. 20. - 매우 낮은 진입장벽, 개발 속도, 편안함
 (마치 크롬 브라우저만 지원해도 되고, 파일 시스템에 접근할 수 있 는 웹 개발하는 기분!) - 손쉬운 cross-platform 지원 - 가벼운 설치와 업데이트 - 웹앱만 업데이트하면 두 개 플랫폼을 업데이트한 효 과 - 다른 앱과 다르게 거의 반 강제 업데이트 개발 후 느낀 장점들
  21. 21. 지금은 1.x가 나왔지만 개발한 당시를 기준으로..
 - 이상하네? 싶어서 검색을 해보면 issue가 open, 실 시간 처리중 - 버그, 기능, 문서화 모두 부실 - 참고 자료가 거의 없었다.. - 사실 제품 개발은 크게 어렵지 않았는데, Squirrel Installer가 문서화가 되어있는게 별로 없어서 가장 힘들었음 개발 후 느낀 단점들
  22. 22. - 플랫폼 하나를 더 지원하는데 들어간 시간 약 3주
 (여기서 추가로 다른 플랫폼 지원은 훨씬 적을 듯) - 처음 개발 이후 들어간 개발 비용 거의 없음 - 웹앱만 업데이트해도 데스크톱 사용자들에게도 업데이 트 결과 - 개발 기간
  23. 23. Daily Active User 성장!! (물론 위 그래프에서는 다른 비즈니스 요인들도 있음) 결과 - 서비스
  24. 24. - 설치 등의 과정에서 간혹 error CS가 접수됨 - 하지만 대부분 재현이 되지 않고 직접 볼 수 없어서 처리하기가 힘듦 - 로그 파일을 기록하도록 해두었지만 조금 더 체계적 으로 로깅할 수 있는 Error reporting framework 이 있으면 좋을듯 결과 - 아쉬운 점
  25. 25. Mac? Linux? 지원하고 싶은데.. Windows Macintosh Linux 98.39% 1.59% 0.1%
  26. 26. 드라마 주연배우 캐스팅 중! 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
  27. 27. 명함 교환방 -> 코드로 교환방 찾기 명함 교환해요! ELTRN 0629

×