카
카카오엔터테인먼트FE
January 20, 20221회
사용자 경험과 성능 개선 방법 in 카카오웹툰
간단 소개
카카오웹툰 FE 성능 개선 사례: CDN, SSR 캐싱, 로딩 Shimmer, 최적화된 리소스 사용, Lazy Loading, requestAnimationFrame, Passive 이벤트 리스너, 라이트 모드.
AI Summary
- CDN과 SSR 캐싱
- CDN을 통해 정적 리소스를 빠르게 전송하고, SSR을 사용하여 초기 로딩 속도 개선 및 SEO 최적화.
- SSR 결과 캐싱을 통해 서버 부하를 줄이고 응답 시간을 단축, TPS 향상.
- 캐시 만료 시 즉시 갱신 대신 갱신 요청 후 완료 시점에 캐시 갱신하여 지연 최소화.
- 로딩 경험 개선 및 리소스 최적화
- Loading Shimmer를 사용하여 로딩 중에도 자연스러운 UI 제공, 사용자 경험 향상.
- WebP 및 PNG 등 다양한 이미지 포맷을 지원하여 최적화된 리소스 제공.
- Lazy Loading을 통해 초기 로딩 시 필요한 리소스만 로드하여 초기 로딩 속도 개선.
- 렌더링 최적화 및 라이트 모드
- requestAnimationFrame을 사용하여 애니메이션 및 인터랙션 효과를 부드럽게 처리.
- Passive 이벤트 리스너를 사용하여 스크롤 성능을 향상.
- 라이트 모드를 통해 저사양 기기에서도 쾌적한 사용 환경 제공.
Next Feeds
GraphQL Mutation 설계하기
GraphQL mutation 설계 시 이름 규칙, input/payload 구조, 중첩 활용 전략을 통해 효과적인 API를 구축하는 방법을 제시합니다.
GraphQLmutationAPI 설계input 객체payload
2022. 1. 13.
카카오엔터테인먼트FE
GraphQL Mutation 설계하기
GraphQL Mutation 설계 시 이름 규칙, Input/Payload 설계, 명시적인 Mutation 사용의 중요성을 강조합니다.
GraphQLMutationAPI 설계Input 객체Payload
2022. 1. 13.
카카오엔터테인먼트FE
Pytest-bdd와 Selenium을 이용한 웹 UI 테스트 자동화
Pytest-bdd와 Selenium을 활용한 웹 UI 테스트 자동화 사례를 소개하고, 자동화 시작 시 고려사항, 유지보수, 확장성에 대한 고민을 공유합니다.
UI 자동화Pytest-bddSeleniumBDDTestrail
2022. 1. 9.
버즈빌
카카오웹툰은 GitHub Actions를 어떻게 사용하고 있을까?
카카오웹툰의 GitHub Actions 활용 사례를 소개하고, CI/CD 자동화, 커스텀 액션 제작, 배포 자동화 등의 예시를 통해 GitHub Actions의 다양한 활용법을 설명합니다.
GitHub ActionsCI/CDworkflow자동화카카오웹툰
2022. 1. 6.
카카오엔터테인먼트FE
카카오웹툰은 GitHub Actions를 어떻게 사용하고 있을까?
카카오웹툰의 GitHub Actions 활용 사례를 통해 CI/CD 자동화 방법과 커스텀 액션 제작 및 활용법을 소개합니다.
GitHub ActionsCI/CDworkflowcomposite action카카오웹툰
2022. 1. 6.
카카오엔터테인먼트FE
우리는 왜 공통 라이브러리를 만들기 시작했나
컬리 기술 블로그는 표준화된 공통 라이브러리 구축을 통해 개발 효율성을 높이고, 재사용성을 강화하여 개발 문화를 발전시키고자 한다.
표준화공통 라이브러리코드 재사용개발 효율성모노레포
2022. 1. 4.
컬리