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.

프렌즈타임 웹앱 삽질기

mark.song(송명헌) / 카카오게임즈

  • Seja o primeiro a comentar

프렌즈타임 웹앱 삽질기

  1. 1. 프렌즈타임 웹앱 삽질기 송명현 Mark.Song 카카오게임즈 kakao FE(Front end) meetup
  2. 2. About 프렌즈타임01 kakao FE(Front end) meetup
  3. 3. 프렌즈 타임? kakao FE(Front end) meetup 정해진 시간에 실시간으로 모여서 우승자가 결정될때 까지 가위바위보를 진행 우승자는 상금을 얻는다. 2019.10.31 진행된 라이브 화면
  4. 4. 프렌즈 타임?? 카카오톡 안에서 실행되는 웹앱 kakao FE(Front end) meetup 링크로 설치 없이 접속 가능
  5. 5. 처음부터 웹앱은 아니었다… 카카오톡 게임별 탭 담당 AOS / iOS 개발자들 (+존재하지도 않았던 신입) kakao FE(Front end) meetup 2017년 카카오톡 게임별 광고
  6. 6. 처음부터 웹앱은 아니었다… kakao FE(Front end) meetup 카카오톡 게임별 탭 당연히 게임별 탭의 Native로 고민하기 시작
  7. 7. 카카오톡의 업데이트 주기 kakao FE(Front end) meetup 약 한달의 한번의 업데이트 주기 서비스는 매 주 진행되어야 함
  8. 8. 게임별 브라우저 스낵게임(HTML5 게임)을 위해 만들어진 웹 브라우저 카카오톡을 통해서만 실행시킬 수 있다 특정 인터페이스를 통해 디바이스 API를 사용가능 kakao FE(Front end) meetup 카카오톡만 깔려있다면 바로 접속 가능 웹앱의 단점 중 하나인 디바이스 API 제어도 어느정도 가능 업데이트 주기도 카카오톡과 맞출 필요 없음
  9. 9. 선택의 시간 kakao FE(Front end) meetup 뭐… 웹 안해본 것도 아니고, (JQuery정도?) https://wormwlrm.github.io/kwakcheolyong/ 곽철용 짤 생성기
  10. 10. 프렌즈타임 웹앱 개발기02 kakao FE(Front end) meetup
  11. 11. 두번째 선택의 시간 kakao FE(Front end) meetup 전문 웹 개발자가 없던 팀 내 상황 매력적인 낮은 러닝커브라는 장점
  12. 12. 웹앱의 Trade-off kakao FE(Front end) meetup 네이티브 앱에 비해 떨어지는 퍼포먼스 네트워크 환경에 의존적이다 별도의 설치가 불필요하다 한 벌의 코드로 iOS, AOS를 모두 지원할 수 있다 장점 단점
  13. 13. Single Page Application kakao FE(Front end) meetup 단일 화면로 구성되어 View 사이를 자연스럽게 이동 한순간에 트래픽이 많이 몰려도 비교적 부하가 적다 사용자 경험 초기에 받아오는 정적 자원의 최적화가 필요
  14. 14. Webpack (Bundler) kakao FE(Front end) meetup Code Splitting Tree ShakingLazy Loading Minify
  15. 15. Dynamic import kakao FE(Front end) meetup
  16. 16. Webpack 번들 분석 kakao FE(Front end) meetup webpack-bundle-analyzer
  17. 17. Webpack 번들 분석 kakao FE(Front end) meetup
  18. 18. Webpack 번들 분석 kakao FE(Front end) meetup
  19. 19. 웹앱에서의 이미지 처리 전체 Asset에서 가장 많은 부분을 차지하는 이미지 kakao FE(Front end) meetup 일반적인 코드와 비교하여 훨씬 큰 용량 시작시 꼭 필요한 이미지가 아니라면 일반적으로 비동기로 불러온다
  20. 20. 웹앱에서의 이미지 처리 kakao FE(Front end) meetup https://blog.iamsuleiman.com/stop-using- loading-spinner-theres-something-better/ 필요할 때 이미지를 불러오는 Lazy Loading 즉시 보이지 않아도 되는 이미지가 대상 보통 placeholder, indicator와 함께 사용
  21. 21. 이미지 로딩이 늦어지는 경우 kakao FE(Front end) meetup
  22. 22. 웹앱에서의 이미지 처리 kakao FE(Front end) meetup 화면이 바뀔 때 마다 보여야하는 수많은 이미지들 만약 한번에 수만의 유저가 몰린다면? CDN에도 한계가 있다. 다음화면에 필요한 이미지들을 Preload
  23. 23. Image Preload kakao FE(Front end) meetup 카카오게임즈 CI 로비 아이콘 로비 라이언 로비 아이콘 로비 라이언 고민 라이언 가위바위보 버튼 고민 라이언 가위바위보 버튼 이후 필요한 이미지 …
  24. 24. 자연스러운 애니메이션 처리 kakao FE(Front end) meetup … 긴 스프라이트 시트를 이용한 애니메이션 다른 이미지보다 용량이 크다
  25. 25. 자연스러운 애니메이션 처리 kakao FE(Front end) meetup 어디까지나 비동기, 라이언 이미지를 100퍼센트 보장할 수 없다. ImageLoader 만약 이미지가 완전히 로드되지 않았다면 정지된 이미지를 보여주자 AnimationLoader 「(°ヘ°)?? 라이언 애니메이션 실행시켜줘! 라이언 애니메이션 실행
  26. 26. 자연스러운 애니메이션 처리 kakao FE(Front end) meetup 어디까지나 비동기, 라이언 이미지를 100퍼센트 보장할 수 없다. ImageLoader 라이언 애니메이션 실행시켜줘! 라이언 이미지 준비됐니? Promise 만약 이미지가 완전히 로드되지 않았다면 정지된 이미지를 보여주자 라이언 준비되면 알려줄게! AnimationLoader 라이언 애니메이션 실행
  27. 27. 자연스러운 애니메이션 처리 kakao FE(Front end) meetup 어디까지나 비동기, 라이언 이미지를 100퍼센트 보장할 수 없다. ImageLoader Resolve 만약 이미지가 완전히 로드되지 않았다면 정지된 이미지를 보여주자 이미지 준비됐어! AnimationLoader 라이언 애니메이션 실행 라이언 이미지 준비됐나?
  28. 28. 자연스러운 애니메이션 처리 kakao FE(Front end) meetup Before After 웹 환경에서의 피할 수 없는 네트워크 지연 문제 그래도 UX는 챙기자
  29. 29. ESLint kakao FE(Front end) meetup airbnb 베이스의 일부 커스터마이징 된 룰을 사용 중 잘못된 JavaScript 코딩 습관을 고치게 도와준다
  30. 30. ESLint kakao FE(Front end) meetup git pre-commit 훅을 이용해 룰을 통과하지 못하면 커밋을 하지 못하도록 강제
  31. 31. Sentry kakao FE(Front end) meetup 클라이언트의 에러도 기록해주는 에러 트래킹 툴
  32. 32. 그 외 차마 이야기 못한… kakao FE(Front end) meetup 소중한 광고를 제때 재생하기 위한 비디오 Preload 기획변경으로 추가된 웹앱에서의 실시간 방송 가위바위보 컴포넌트 리팩토링하기 카카오톡 캐시를 우회하기 위한 Forced reload GA(Google Analytics)로 사용자 패턴 분석해보기 etc…
  33. 33. 그리고 수많은 이슈들 kakao FE(Front end) meetup 동영상 자동재생 관련 UserGesture 이슈 iOS 저전력 모드에서의 오동작 이슈 iOS에서 Iframe의 벽을 뚫고 나오는 컨텐츠 OS 업데이트 후 갑자기 발생하는 오동작 이슈 CDN 캐시가 지워지지 않아서 이전 버전이 보여요 애니메이션이 깜빡거려요 동영상이 중간에 멈춰요 ..… 유튜브 자이언트 펭TV
  34. 34. 그래도 웹앱? kakao FE(Front end) meetup 서비스가 커질수록 중요해지는 최적화 이슈 퍼포먼스 보다는 웹앱에서 대응하기 힘든 문제를 먼저 고려 결국엔 얼마나 잘 비동기로 처리하느냐의 문제 앱스토어 사용 불가 (검색, 노출 문제) Device API 사용 문제
  35. 35. 마치며 kakao FE(Front end) meetup 궁금하신 분들은 내일 12시 프렌즈타임
  36. 36. Q&A kakao FE(Front end) meetup mark.song@kakaocorp.com https://www.kakaogamescorp.com/ 프렌즈타임 바로가기 https://friends-time.kakaogames.com/

×