O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

리멤버 데스크톱 앱 개발기

2.693 visualizações

Publicada em

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

Publicada em: Engenharia
  • Seja o primeiro a comentar

리멤버 데스크톱 앱 개발기

  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

×