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

1. 프렌즈타임 웹앱 삽질기
송명현 Mark.Song
카카오게임즈
kakao FE(Front end) meetup

2. About 프렌즈타임01
kakao FE(Front end) meetup

3. 프렌즈 타임?
kakao FE(Front end) meetup
정해진 시간에 실시간으로 모여서
우승자가 결정될때 까지 가위바위보를 진행
우승자는 상금을 얻는다.
2019.10.31 진행된 라이브 화면

4. 프렌즈 타임??
카카오톡 안에서 실행되는 웹앱
kakao FE(Front end) meetup
링크로 설치 없이 접속 가능

5. 처음부터 웹앱은 아니었다…
카카오톡 게임별 탭 담당 AOS / iOS 개발자들 (+존재하지도 않았던 신입)
kakao FE(Front end) meetup
2017년 카카오톡 게임별 광고

6. 처음부터 웹앱은 아니었다…
kakao FE(Front end) meetup
카카오톡 게임별 탭
당연히 게임별 탭의 Native로 고민하기 시작

7. 카카오톡의 업데이트 주기
kakao FE(Front end) meetup
약 한달의 한번의 업데이트 주기
서비스는 매 주 진행되어야 함

8. 게임별 브라우저
스낵게임(HTML5 게임)을 위해 만들어진 웹 브라우저
카카오톡을 통해서만 실행시킬 수 있다
특정 인터페이스를 통해 디바이스 API를 사용가능
kakao FE(Front end) meetup
카카오톡만 깔려있다면 바로 접속 가능
웹앱의 단점 중 하나인 디바이스 API 제어도 어느정도 가능
업데이트 주기도 카카오톡과 맞출 필요 없음

9. 선택의 시간
kakao FE(Front end) meetup
뭐… 웹 안해본 것도 아니고, (JQuery정도?)
https://wormwlrm.github.io/kwakcheolyong/ 곽철용 짤 생성기

10. 프렌즈타임 웹앱 개발기02
kakao FE(Front end) meetup

11. 두번째 선택의 시간
kakao FE(Front end) meetup
전문 웹 개발자가 없던 팀 내 상황
매력적인 낮은 러닝커브라는 장점

12. 웹앱의 Trade-off
kakao FE(Front end) meetup
네이티브 앱에 비해 떨어지는 퍼포먼스
네트워크 환경에 의존적이다
별도의 설치가 불필요하다
한 벌의 코드로 iOS, AOS를 모두 지원할 수 있다
장점
단점

13. Single Page Application
kakao FE(Front end) meetup
단일 화면로 구성되어 View 사이를 자연스럽게 이동
한순간에 트래픽이 많이 몰려도 비교적 부하가 적다
사용자 경험
초기에 받아오는 정적 자원의 최적화가 필요

14. Webpack (Bundler)
kakao FE(Front end) meetup
Code Splitting Tree ShakingLazy Loading Minify

15. Dynamic import
kakao FE(Front end) meetup

16. Webpack 번들 분석
kakao FE(Front end) meetup
webpack-bundle-analyzer

17. Webpack 번들 분석
kakao FE(Front end) meetup

18. Webpack 번들 분석
kakao FE(Front end) meetup

19. 웹앱에서의 이미지 처리
전체 Asset에서 가장 많은 부분을 차지하는 이미지
kakao FE(Front end) meetup
일반적인 코드와 비교하여 훨씬 큰 용량
시작시 꼭 필요한 이미지가 아니라면
일반적으로 비동기로 불러온다

20. 웹앱에서의 이미지 처리
kakao FE(Front end) meetup
https://blog.iamsuleiman.com/stop-using-
loading-spinner-theres-something-better/
필요할 때 이미지를 불러오는 Lazy Loading
즉시 보이지 않아도 되는 이미지가 대상
보통 placeholder, indicator와 함께 사용

21. 이미지 로딩이 늦어지는 경우
kakao FE(Front end) meetup

22. 웹앱에서의 이미지 처리
kakao FE(Front end) meetup
화면이 바뀔 때 마다 보여야하는 수많은 이미지들
만약 한번에 수만의 유저가 몰린다면?
CDN에도 한계가 있다.
다음화면에 필요한 이미지들을 Preload

23. Image Preload
kakao FE(Front end) meetup
카카오게임즈 CI
로비 아이콘
로비 라이언
로비 아이콘
로비 라이언
고민 라이언
가위바위보 버튼
고민 라이언
가위바위보 버튼
이후 필요한 이미지
…

24. 자연스러운 애니메이션 처리
kakao FE(Front end) meetup
…
긴 스프라이트 시트를 이용한 애니메이션
다른 이미지보다 용량이 크다

25. 자연스러운 애니메이션 처리
kakao FE(Front end) meetup
어디까지나 비동기, 라이언 이미지를 100퍼센트 보장할 수 없다.
ImageLoader
만약 이미지가 완전히 로드되지 않았다면 정지된 이미지를 보여주자
AnimationLoader
「(°ヘ°)??
라이언 애니메이션 실행시켜줘!
라이언 애니메이션 실행

26. 자연스러운 애니메이션 처리
kakao FE(Front end) meetup
어디까지나 비동기, 라이언 이미지를 100퍼센트 보장할 수 없다.
ImageLoader
라이언 애니메이션 실행시켜줘!
라이언 이미지
준비됐니?
Promise
만약 이미지가 완전히 로드되지 않았다면 정지된 이미지를 보여주자
라이언 준비되면
알려줄게!
AnimationLoader
라이언 애니메이션 실행

27. 자연스러운 애니메이션 처리
kakao FE(Front end) meetup
어디까지나 비동기, 라이언 이미지를 100퍼센트 보장할 수 없다.
ImageLoader
Resolve
만약 이미지가 완전히 로드되지 않았다면 정지된 이미지를 보여주자
이미지 준비됐어!
AnimationLoader
라이언 애니메이션 실행
라이언 이미지
준비됐나?

28. 자연스러운 애니메이션 처리
kakao FE(Front end) meetup
Before After
웹 환경에서의 피할 수 없는 네트워크 지연 문제
그래도 UX는 챙기자

29. ESLint
kakao FE(Front end) meetup
airbnb 베이스의 일부 커스터마이징 된 룰을 사용 중
잘못된 JavaScript 코딩 습관을 고치게 도와준다

30. ESLint
kakao FE(Front end) meetup
git pre-commit 훅을 이용해 룰을 통과하지 못하면 커밋을 하지 못하도록 강제

31. Sentry
kakao FE(Front end) meetup
클라이언트의 에러도 기록해주는 에러 트래킹 툴

32. 그 외 차마 이야기 못한…
kakao FE(Front end) meetup
소중한 광고를 제때 재생하기 위한 비디오 Preload
기획변경으로 추가된 웹앱에서의 실시간 방송
가위바위보 컴포넌트 리팩토링하기
카카오톡 캐시를 우회하기 위한 Forced reload
GA(Google Analytics)로 사용자 패턴 분석해보기 etc…

33. 그리고 수많은 이슈들
kakao FE(Front end) meetup
동영상 자동재생 관련 UserGesture 이슈
iOS 저전력 모드에서의 오동작 이슈
iOS에서 Iframe의 벽을 뚫고 나오는 컨텐츠
OS 업데이트 후 갑자기 발생하는 오동작 이슈
CDN 캐시가 지워지지 않아서 이전 버전이 보여요
애니메이션이 깜빡거려요
동영상이 중간에 멈춰요
..…
유튜브 자이언트 펭TV

34. 그래도 웹앱?
kakao FE(Front end) meetup
서비스가 커질수록 중요해지는 최적화 이슈
퍼포먼스 보다는 웹앱에서 대응하기 힘든 문제를 먼저 고려
결국엔 얼마나 잘 비동기로 처리하느냐의 문제
앱스토어 사용 불가 (검색, 노출 문제)
Device API 사용 문제

35. 마치며
kakao FE(Front end) meetup
궁금하신 분들은 내일 12시 프렌즈타임

36. Q&A
kakao FE(Front end) meetup
mark.song@kakaocorp.com
https://www.kakaogamescorp.com/
프렌즈타임 바로가기
https://friends-time.kakaogames.com/