[정리] LINE DEVELOPER DAY 2021 : Frontend

[sbyeol3]

LINE NEWS에서 레이아웃 시프트 문제를 해결한 방법

LINE Akinori Inoue님 강연

• 라인 뉴스 탭 : 웹뷰(TypeScript, React) / (페이지에 따라 기술스택이 다름)
• Layout Shift 현상 : 일정시간동안 발생하는 레이아웃의 이동하는 것, 레이아웃이 콘텐츠의 로딩에 따라서 움직이는 현상 -> 잘못된 조작 유발

라인 뉴스 특징

• Personalization : 각 유저별로 보여주는 컨텐츠로 CDN 캐시를 사용할 수 없고, response time이 다른 API보다 늦어지게 됨
• A/B Testing : UI 컴포넌트 조합을 여러 개 준비해서 사용자군으로 다르게 보여줌
• Advertisements : 광고 API에는 각 유저별 키가 있어 response time이 늦어짐

Skeleton screen 적용

• 필요한 리소스를 읽을 때까지 컨텐츠의 틀을 보여주는 방법, 컨텐츠 리소스가 도착하면 스켈레톤과의 변경 -> 이동이 없어짐
• 단, 높이가 정확하게 동일해야 하는데 개인화된 컨텐츠에서는 어려움
• 화면 전체를 하나의 skeleton으로 덮어주게 해결
  • 페이드아웃 애니메이션을 디테일하게 조정
  • 스켈레톤 스크린을 출현 빈도가 높은 레이아웃으로 작성
  • 시선 집중이 가장 높은 부분은 실제와 동일하게끔

언제 Skeleton screen을 사라지게 할 것인지?

• 모든 API 요청이 올 때까지? 🙅🏽 20개가 넘는 API를 기다릴 수 없음
• 일부 API만 기다리기? 🙅🏽 개인화로 인해 유저마다 API가 달라짐
• 뷰포트에 들어가는 컨텐츠의 높이가 확정되었을 때