선물하기 프론트엔드 성능 개선기 / if(kakaoAI)2024
if kakao 카카오 · YouTube
AI 핵심 요약
Angular와 Webpack을 사용하는 대규모 선물하기 서비스는 이미지와 스크립트가 많아 초기 로딩이 느려질 수 있어, 이미지·폰트 최적화와 번들 구조 개선을 진행했습니다. 이미지 리사이즈와 WebP 변환, Intersection Observer 기반 로딩, LCP 이미지의 preconnect·fetchpriority 적용으로 리소스 전송을 줄이고 로드를 앞당겼습니다. 의존성 중복 탐지, ES6 전환, 폴리필 최적화, 공통 라이브러리 코드 스플리팅과 컴포넌트 지연 로딩도 적용했으며, 홈의 LCP 로딩 시간은 3.8초에서 2.0초로 단축됐습니다. 성능 개선은 용량 절감뿐 아니라 메인 스레드의 스크립트 처리 비용과 지연 로딩에 따른 반응성까지 함께 살펴야 한다는 점을 공유했습니다.
- 이미지는 표시 영역에 맞게 리사이즈하고 WebP로 변환하며, Intersection Observer로 화면에 가까워졌을 때 불러오면 전송량을 줄일 수 있습니다.
- LCP 이미지에는 preconnect와 fetchpriority를 적용해 연결 준비와 리소스 우선순위를 조정할 수 있습니다.
- Angular 공통 라이브러리는 secondary entry point와 dynamic import로 나누어 초기 번들에 포함되는 코드를 줄일 수 있습니다.
- 지연 로딩은 초기 로드를 줄이는 대신 반응성이 늦어질 수 있으므로, 사용자 인터랙션 로그와 느린 네트워크 환경을 함께 고려해야 합니다.
소개
선물하기 프론트엔드 성능을 개선하면서 고민 했던 것들 그리고 적용한 기술들에 대해 공유하고자 합니다. #front-end #angular #웹 성능 선물하기 서비스에서 프론트엔드 개발을 하고 있는 Fleek입니다. 유저에게 더 나은 서비스 경험을 선사하기 위해 늘 노력합니다. 발표자료 보기 👉 https://speakerdeck.com/kakao/ifkakao24-35 if(kakaoAI)2024에 대한 자세한 정보는 👉 https://if.kakao.com #카카오 #이프카카오 #개발자컨퍼런스 #AI #기술 #개발 #ifkakaoAI2024
비슷한 학습 자료
컨퍼런스 if kakao
Kubernetes 지능형 리소스 최적화 / if(kakaoAI)2024
컨퍼런스 if kakao
"쿠버네티스 클러스터에 구성된 서비스의 리소스를 어떻게 관리하고 계신가요?" 에서 비롯된 지능형 리소스 최적화 시스템 구축 프로젝트 과정을 소개합니다. 이 영상을 통해 효율적 리소스 관리를 통한 비용절감 방법을 공유합니다. #Kubernetes #리소스최적화 #finops 카카오페이증권 DevOps팀 Steve입니다. 카카오페이증권 서비스들을 위한 플랫폼 구축 및 운영, 표준화를 담당하고 있습니다. 발표자료 보기 👉 https://speakerdeck.com/kakao/ifkakao24-74 if(kakaoAI)2024에 대한 자세한 정보는 👉 https://if.kakao.com #카카오 #이프카카오 #개발자컨퍼런스 #AI #기술 #개발 #ifkakaoAI2024
데브옵스 · 인프라 클라우드
컨퍼런스 if kakao
iOS 앱 이미지 에디터 개발기 / if(kakaoAI)2024
컨퍼런스 if kakao
브런치, 티스토리에 적용된 iOS 이미지 에디터 개발 과정을 소개하고, 그 과정에서 겪은 어려움을 공유합니다. 특히 회전, 반전, 자르기 등을 지원하는 상황에서 여러 편집이 적용된 이미지를 처리하는 방법을 중점적으로 다룹니다. #ios #image editor #2D computer graphics 브런치, 티스토리 iOS 앱을 개발하고 있는 Woongs입니다. 발표자료 보기 👉 https://speakerdeck.com/kakao/ifkakao24-51 if(kakaoAI)2024에 대한 자세한 정보는 👉 https://if.kakao.com #카카오 #이프카카오 #개발자컨퍼런스 #AI #기술 #개발 #ifkakaoAI2024
모바일 앱 개발
컨퍼런스 if kakao
AI 기반 광고 콘텐츠 모니터링 기술 개발기 / if(kakaoAI)2024
컨퍼런스 if kakao
부적절한 광고소재 콘텐츠의 모니터링을 위해 사용한 이미지-텍스트 유사도 도출 모델의 소개와 학습 과정, 이를 고도화하기 위한 기술 개발 과정과, 기반 기술을 활용한 응용 사례를 소개합니다. #AI #광고소재필터링 #MultiModal Adaptive AI에서 다양한 인공지능 모델들을 학습하고 개발하는 Queue입니다! 최근에는 다양한 멀티모달 모델들에 대한 학습을 진행하고 있습니다! 발표자료 보기 👉 https://speakerdeck.com/kakao/ifkakao24-33 if(kakaoAI)2024에 대한 자세한 정보는 👉 https://if.kakao.com #카카오 #이프카카오 #개발자컨퍼런스 #AI #기술 #개발 #ifkakaoAI2024
딥러닝 · 머신러닝 컴퓨터 비전
컨퍼런스 if kakao
카카오가 AI 서비스 개발과 운영을 위해 구축한 Kakao AI Platform (KAP)에 대해 소개합니다. KAP은 AI Ops 에 필요한 핵심 기능들(Store, Serving, Training, Agent)을 통합 제공하는 AI 플랫폼입니다. 플랫폼 엔지니어링적 접근으로 KAP을 활용해 AI 기술의 빠른 확산과 업무 생산성을 향상시킨 사례들을 소개합니다. #AI #Platform #Cloud #SaaS #AIOps #ModelOps #Data 카카오에서 AI 플랫폼을 개발하고 있는 Dennis입니다. AI 와 클라우드를 활용한 개발 라이프 사이클 자동화에 관심이 많습니다. 발표자료 보기 👉 https://speakerdeck.com/kakao/ifkakao24-17 if(kakaoAI)2024에 대한 자세한 정보는 👉 https://if.kakao.com #카카오 #이프카카오 #개발자컨퍼런스 #AI #기술 #개발 #ifkakaoAI2024
데브옵스 · 인프라 인공지능 기타
컨퍼런스 if kakao
CTO 키노트 / Kakao AI Native | if(kakaoAI)2024 Day2
컨퍼런스 if kakao
if(kakaoAI)2024 CTO 정규돈(gd.re) 키노트 : Kakao AI Native 👇핵심만 골라보기 👇 ⏲️ Time Stamps 00:00 오프닝 01:08 카카오의 AI native 03:20 AI Native 성숙도 4단계 04:00 1단계 탐색 05:49 2단계 적용 06:26 AI Buddy, Code Buddy 22:17 KAP 25:15 AI 포인트 서비스 27:06 3단계 혁신 27:30 4단계 일상 카카오 개발자 컨퍼런스 if(kakaoAI)2024에서 카카오 AI 통합 브랜드 Kanana를 비롯해 AI 비전, 모델, 그리고 우리의 일상을 바꿀 새로운 AI 서비스를 처음으로 세상에 공개했습니다. 더 나은 일상을 모두에게 전하는 그날까지, 끊임없이 가깝고, 친근한 기술을 만들어 가겠습니다. 모든 연결을 새롭게 if(kakaoAI)2024 🔗 if(kakaoAI)2024 홈페이지 : https://if.kakao.com/
AI 코딩 인공지능 기타
컨퍼런스 if kakao
Preview Frontend @if(kakao)2022
컨퍼런스 if kakao
if(kakao)2022 컨퍼런스에서 Frontend 관련 기술 발표 트랙을 소개합니다. 01:28 1. MFA, 누구냐 너: 공통 플랫폼개발 파트의 MFA도입기 by 어호선(sun.kist) 카카오 공통플랫폼개발파트에서 프론트앤드 개발을 담당하고 있는 썬입니다. 01:58 2. 마이크로프론트엔드. 실무에 쓸만할까? by 김수찬(tony.chan) 카카오워크의 관리자 서비스를 개발하고 있습니다. 02:17 3. 웹 반응성 개선하기: Lighthouse Userflow를 사용한 웹 반응성 개선기 by 박은우(ethan.eunwu) 카카오 FE플랫폼팀에서 FE개발자를 위한 개발을 하는 에단입니다. 02:35 4. 카카오페이 프론트엔드 개발팀의 Client Side Rendering 환경 고도화 by 박병현(eric.dev) 카카오페이 FE인프라TF TF장 에릭입니다. 카카오페이 FE 서비스의 근간을 이루는 다양한 환경에 대한 고민을 하고 있습니다. 02:56 5. 광고 웹 ...
프론트엔드