웹 반응성 개선하기: Lighthouse Userflow를 사용한 웹 반응성 개선기 / if(kakao)2022
if kakao 카카오 · YouTube
AI 핵심 요약
웹 성능이 초기 로딩뿐 아니라 페이지에 머무는 동안의 상호작용에도 중요해지면서, 카카오 FE플랫폼팀은 Lighthouse User Flow의 타임스팬 모드로 사용자 동작 중 TBT·INP·CLS를 측정했다. Chrome DevTools Recorder로 동작을 기록하고 Puppeteer Replay로 재생해 측정 시나리오를 구성했으며, SPA 전환에서 발생한 강제 리플로우는 requestAnimationFrame을 활용해 줄였다. 대시보드에서는 React 18의 startTransition으로 비긴급 업데이트의 우선순위를 낮추고, 차트 영역의 크기를 미리 확보해 레이아웃 이동도 개선했다. 로드 이후 성능도 사용자 흐름에 맞춰 측정하고, 블로킹 작업·업데이트 우선순위·레이아웃 공간을 각각 점검해야 한다는 점을 보여줬다.
- Lighthouse User Flow의 타임스팬 모드로 실제 사용자 동작을 기록하고, 상호작용 중 TBT·INP·CLS를 측정할 수 있다.
- Chrome DevTools Recorder로 인터랙션을 기록한 뒤 JSON을 Puppeteer Replay에 전달하면 측정 시나리오를 재사용하기 쉽다.
- 강제 리플로우를 유발하는 DOM 측정은 렌더링 단계와 분리하고, 필요하면 requestAnimationFrame으로 다음 프레임에 실행한다.
- React 18의 startTransition으로 사용자 입력과 직접 관련 없는 업데이트의 우선순위를 낮춰 중요한 화면 반응을 먼저 처리할 수 있다.
- 동적으로 나타나는 콘텐츠의 크기를 미리 확보하면 예기치 않은 레이아웃 이동을 줄일 수 있다.
소개
웹 성능은 주로 로드 성능에 집중되었지만 웹의 역할이 커지면서 사용자 상호작용에 대한 성능도 중요해졌습니다. 웹이 로드 된 이후 사용자와 상호작용에 관련된 성능을 측정하고 개선하는 방법을 알아봅니다. #성능 #Responsiveness #Lighthouse #UserFlow #웹성능 카카오 FE플랫폼팀에서 FE개발자를 위한 개발을 하는 에단입니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-75 if(kakao)2022에 대한 자세한 정보는 👉 https://if.kakao.com if(kakao)2022에 대한 문의는 👉 if@kakaocorp.com #카카오 #이프카카오 #개발자컨퍼런스 #기술 #개발 #ifkakao2022
비슷한 학습 자료
컨퍼런스 if kakao
복잡한 흐름 앞에서, 우리가 선택한 건 Funnel / 이었다
컨퍼런스 if kakao
if(kakao)25 복잡한 동선을 가진 웹뷰 서비스에서, 기획자와 개발자가 동일한 흐름을 바라볼 수 있도록 퍼널 중심의 구조화를 설계하고 useFlow로 구현한 경험을 소개합니다. #TECH #Frontend 카카오 비즈니스에서 FE를 담당있는 차재명(max.cha)입니다. 반복되는 불편을 줄이고, 개발자 경험과 팀이 몰입할 수 있는 환경을 만드는 데 관심이 많습니다. 발표자료 보기 📍https://if.kakao.com/2025/session?sessionId=39 if(kakao)25 홈페이지 : https://if.kakao.com/2025 #카카오 #kakao #이프카카오25
프론트엔드
컨퍼런스 if kakao
좋은 품질의 웹서비스를 제공하기 위해서는 웹서비스의 성능을 지속적으로 모니터링하고 개선하는 것이 중요합니다. 카카오 FE플랫폼에서는 웹 성능 모니터링 서비스, 파루스(Pharus) 를 개발하고 있습니다. 파루스는 100개가 넘는 서비스에서 1000여 개 이상의 페이지 성능을 일관된 기준으로 모니터링(가시화)하고 분석 리포트를 제공하여 개선 전략을 세우는 데 도움을 주고 있습니다. 이번 발표에서는 파루스의 주요 기능과 기술을 소개하고 서비스의 활용 사례를 공유하고자 합니다. 파루스의 주요 기능과 기술을 소개하고 서비스의 활용 사례를 소개합니다. #FE #웹 성능 측정 #lighthouse 카카오 FE플랫폼팀에서 파루스 서비스를 담당하고 있는 Ted입니다. 카카오 FE플랫폼팀에서 파루스 서비스를 담당하고 있는 Dino입니다. 발표자료 보기 👉 https://speakerdeck.com/kakao/ifkakao24-37 if(kakaoAI)2024에 대한 자세한 정보는 👉...
웹 개발 프론트엔드
컨퍼런스 if kakao
선물하기 프론트엔드 성능 개선기 / if(kakaoAI)2024
컨퍼런스 if kakao
선물하기 프론트엔드 성능을 개선하면서 고민 했던 것들 그리고 적용한 기술들에 대해 공유하고자 합니다. #front-end #angular #웹 성능 선물하기 서비스에서 프론트엔드 개발을 하고 있는 Fleek입니다. 유저에게 더 나은 서비스 경험을 선사하기 위해 늘 노력합니다. 발표자료 보기 👉 https://speakerdeck.com/kakao/ifkakao24-35 if(kakaoAI)2024에 대한 자세한 정보는 👉 https://if.kakao.com #카카오 #이프카카오 #개발자컨퍼런스 #AI #기술 #개발 #ifkakaoAI2024
웹 개발 프론트엔드
컨퍼런스 if kakao
수 천만 건 이상의 대량 배치처리를 하기 위한 최고의 노하우를 전달드리겠습니다. 카카오페이 정산플랫폼팀은 카카오페이의 빠른 성장과 더불어 늘어나는 데이터를 일괄처리하기 위하여 꾸준히 노력 하고 있습니다. 더 많은 데이터를 처리하기 위해 진화하는 서비스와 개발방식을 소개하고자 합니다. #BatchPerformance #SpringBatch #SpringCloudDataFlow #Kubernetes #Redis 카카오페이 정산플랫폼팀 베니입니다. 서버 Performance 개선에 관심이 많습니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-065 if(kakao)2022에 대한 자세한 정보는 👉 https://if.kakao.com if(kakao)2022에 대한 문의는 👉 if@kakaocorp.com #카카오 #이프카카오 #개발자컨퍼런스 #기술 #개발 #ifkakao2022
백엔드 데이터베이스 데브옵스 · 인프라
컨퍼런스 if kakao
카카오페이의 프론트엔드 서비스가 제공되는 환경에 대해 이야기 하고, 프론트엔드 서비스가 제공되는 환경의 관점에서 개발자 경험과 사용자 경험을 개선하기 위한 카카오페이 프론트엔드 팀의 작업을 사례를 통해 이야기합니다. #UX 카카오페이 FE인프라TF TF장 에릭입니다. 카카오페이 FE 서비스의 근간을 이루는 다양한 환경에 대한 고민을 하고 있습니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-83 if(kakao)2022에 대한 자세한 정보는 👉 https://if.kakao.com if(kakao)2022에 대한 문의는 👉 if@kakaocorp.com #카카오 #이프카카오 #개발자컨퍼런스 #기술 #개발 #ifkakao2022
웹 개발 프론트엔드
컨퍼런스 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. 광고 웹 ...
프론트엔드