Core Web Vitals 교육
웹 팀과 함께 실제 운영 페이지를 살펴보는 2시간 과정입니다. 인원 제한 없는 고정 가격입니다.
마스터클래스는 이렇게 진행됩니다
마스터클래스는 팀이 문제를 직접 찾는 방법을 가르칩니다. 진행 과정에서 보통 사이트의 문제점 한두 개를 바로 찾아내며, 개발팀은 그 주에 즉시 수정 작업에 착수할 수 있습니다. 모든 해결책을 하나하나 문서로 정리받고 싶다면 오딧이 맞습니다.
-
실제 사이트와 겪고 있는 문제 중심
URL과 함께 팀이 가장 많이 작업하는 페이지, 그리고 해결하지 못하고 있는 문제를 알려주세요. 모바일 환경에서의 LCP, INP, CLS p75 수치, Search Console에 경고가 뜬 페이지 그룹, 지난 몇 달간의 추세를 확인합니다. 그런 다음 해당 페이지들의 trace를 기록합니다. 이 준비 작업에 반나절 정도 걸립니다.
-
팀과 함께하는 2시간
첫 1시간 동안은 제가 기록한 trace를 바탕으로, 브라우저가 페이지를 로드하고 탭(tap) 동작을 처리하는 과정을 설명합니다. 그다음에는 팀의 개발자가 직접 화면을 공유하며 조작하고, 저는 어디를 클릭해야 하는지 안내합니다. 사이트 구축에 참여하는 모든 인원을 초대하세요. 태그 관리자를 담당하는 다른 담당자가 있다면 함께 참여시키세요.
-
녹화본과 정리 노트
녹화 영상과 슬라이드는 계속 소장할 수 있습니다. 며칠 내로 발견한 문제점을 중요도 순으로 정리한 노트도 전달해 드립니다. 세션에 참석하지 못한 팀원도 이 자료로 내용을 파악할 수 있습니다.
-
한 달 뒤 후속 세션
선택 사항입니다. 그때쯤이면 팀이 직접 시도해 보면서 어느 부분에서 막히는지 알게 됩니다. 팀에서 직접 기록한 trace를 가져와 추가 2시간 동안 다룰 안건을 정하면 됩니다.
교육 후 개발자가 할 수 있는 일
- Field data
Google이 실제로 보는 지표 읽기
Lighthouse 점수는 95점인데 Search Console에서는 실패로 나옵니다. Lighthouse는 단 한 번의 페이지 로딩을 가상 모바일 환경에서 측정한 결과일 뿐입니다. Google은 모바일 환경에서 실제 방문자의 p75 수치를 확인합니다. 팀은 두 지표를 모두 읽는 법과, PageSpeed Insights의 어떤 진단 항목이 field data를 전혀 바꾸지 못하는지 배웁니다. 효율적인 캐시 수명 사용 항목에는 흔히 Google 자체 태그 스크립트가 나열되지만, 그 캐시 헤더는 아무도 수정할 수 없습니다.
- LCP
LCP 요소가 늦게 나타나는 원인 찾기
Performance 패널에서 LCP 마커를 찾은 뒤 해당 request까지 거슬러 올라갑니다. 세부 단계를 살펴보면 브라우저가 이미지를 늦게 발견했는지, 로딩이 느렸는지, 아니면 이미지를 받아두고도 페인트하지 않았는지 알 수 있습니다. 발견이 늦었다면 대부분 CSS background로 지정되었거나 슬라이더 스크립트가 추가했기 때문입니다. 이때는 이미지를 압축해도 지연 시간을 만회할 수 없습니다.
- INP
느린 인터랙션의 원인 스크립트 특정하기
Search Console에 "INP 문제: 200ms 초과(모바일)" 경고가 몇 달째 떠 있지만, trace에는 minified된 함수 이름으로 가득한 call stack만 보입니다. 느린 인터랙션 하나를 골라 input delay, processing, presentation 단계로 쪼갭니다. Long Animation Frames를 확인하면 원인 스크립트를 정확히 지목할 수 있습니다. 페이지의 절반을 다시 렌더링하는 클릭 핸들러나, 다음 paint 직전에 실행되는 애널리틱스 이벤트가 원인인 경우가 많습니다.
- CLS
layout shift가 시작되는 지점 찾기
layout shift는 페이지의 요소가 예상치 못한 순간에 움직이는 현상입니다. 움직인 요소 자체가 원인인 경우는 거의 없습니다. width와 height가 없는 이미지, 상단에 콘텐츠를 삽입하는 스크립트, 뒤늦게 교체되는 웹 폰트 등 다른 무언가가 그 요소를 움직이게 만든 것입니다.
- Third parties
각 태그의 영향도 수치화하기
개발팀이 태그 관리자를 직접 관리하지 않다 보니, 새로운 추적 픽셀들이 개발 티켓도 없이 페이지에 마구 추가됩니다. 팀은 trace와 실제 방문자의 INP를 통해 각 태그의 영향을 측정하는 법을 배웁니다. 그 숫자가 바로 마케팅팀에 제시할 명확한 근거가 됩니다.
- Releases
배포 다음 날 결과 확인하기
배포 후 LCP가 슬금슬금 악화되었지만 Search Console에서 알림 이메일이 올 때까지 아무도 알아채지 못합니다. Search Console은 지난 28일간의 데이터를 보여주므로, 알림을 확인했을 때는 이미 문제를 일으킨 배포가 몇 주 전 일입니다. 반면 RUM을 활용하면 CoreDash든 현재 사용 중인 다른 도구든 배포 바로 다음 날 문제를 확인할 수 있습니다.
What clients say
DPG Media
"Arjen can explain the most complicated performance problems, and you can tell he loves this stuff. It made learning the hard parts fun."
Ashkan Malekloo
Loop
"Arjen somehow makes LCP optimization sound simple. We used his approach and our metrics were 40% better within a week."
Nathan Ziarczyk
Jamie Oliver Group
"After the training we finally understood why our INP was failing, and which interactions we had to make cheaper."
Nicole Keep
Core Web Vitals 교육 비용은 얼마인가요?
마스터클래스는 팀 전체 기준 고정 €1,500입니다. 개발자가 5명이든 15명이든 가격은 같습니다. 후속 세션은 추가 2시간에 €750입니다. 사전 준비가 적으므로 power hour의 시간당 단가와 비슷한 수준입니다.
- 17년간 trace를 분석해 온 전문 컨설턴트의 직접 진행
- 시작 전 모바일 p75 수치 사전 점검
- 참여 인원 제한 없음
- 두 번째 시간에는 팀 개발자가 직접 키보드를 잡고 실습
- 녹화 영상, 슬라이드 및 정리 노트 제공
2시간, 팀 전체 참여
사전 준비 포함.
€1,500 부가세 별도후속 세션 €750
마스터클래스 신청하기
사이트 URL과 함께 팀에 대해 간단히 알려주세요.
-
팀에 대해 알려주세요
팀 인원수, 사용 중인 기술 스택, 계속 반복되는 문제를 알려주세요. 대규모 배포나 블랙 프라이데이 같은 마감 일정이 있다면 함께 적어주세요.
-
일정 조율
하루 내로 가능한 몇 가지 일정을 회신해 드립니다. 준비에 일주일 정도 걸리므로 가장 빠른 일정은 보통 1~2주 뒤로 잡힙니다.
-
진행 당일
Google Meet, Zoom, Teams 등 팀에서 사용하는 도구로 진행합니다. 개발자 한 명이 Chrome 브라우저에 사이트를 띄워두어야 합니다. 두 번째 시간에는 그 개발자가 직접 화면을 조작합니다.
Speak의 교육 진행 사례
고객사 웹사이트를 구축하는 네덜란드의 디지털 에이전시
고객사는 에이전시에 Core Web Vitals에 대해 수시로 질문합니다. Search Console에 왜 빨간불이 들어왔는지, 새 테마를 적용하면 해결되는지 등을 묻습니다. Speak는 소속 개발자들이 직접 답을 찾을 수 있기를 원했고, 저는 해당 에이전시 고객사의 실제 사이트를 바탕으로 팀 교육을 진행했습니다.
1년 뒤 Sander Los는 다음과 같은 메일을 보내왔습니다. "교육에서 배운 개념과 제안 덕분에 페이지 속도와 사용자 경험이 크게 향상되었습니다." 그의 팀은 교육에서 배운 내용을 바탕으로 고객사의 웹 쇼핑몰을 성공적으로 전면 개편했습니다.
에이전시 입장에서 웹 성능은 견적에 포함할 수 있는 정식 업무가 되며, 일부 에이전시는 이를 통해 더 높은 단가를 청구하기도 합니다.
마스터클래스
Core Web Vitals 마스터클래스란 무엇인가요?
화상 회의를 통해 웹 팀과 함께 실제 페이지를 살펴보는 2시간의 교육입니다. 두 번째 시간부터는 개발자가 직접 trace를 기록하며 실습합니다.
개발자가 웹 성능에 대해 미리 알고 있어야 하나요?
아닙니다. HTML, CSS, JavaScript를 알고 있고 DevTools를 열어본 경험만 있으면 됩니다. Performance trace를 읽는 법은 교육에서 가르쳐 드립니다. 프로덕트 오너나 마케터도 첫 1시간은 충분히 이해하며 들을 수 있습니다.
그 많은 내용을 2시간 안에 다 다룰 수 있나요?
모든 내용을 동일한 깊이로 다루지는 않습니다. 사이트에서 기준을 통과하지 못한 지표에 대부분의 시간을 할애하고, 나머지 지표는 어디를 봐야 하는지 알 수 있을 정도로 다룹니다. INP의 경우 scheduler.yield()로 클릭 핸들러의 작업을 쪼개는 방법까지 포함됩니다.
Next.js를 사용 중인데 상관없나요?
브라우저는 어떤 기술로 페이지를 만들었는지 신경 쓰지 않으므로 Next.js, Nuxt, Magento, Shopify, WordPress 모두 동일하게 적용됩니다. 또한 실제 사이트를 예시로 사용하므로 현재 사용하는 프레임워크의 특성도 그대로 반영됩니다. Next.js 페이지에서 첫 탭을 블로킹하는 hydration이나, 모든 템플릿에 스크립트를 로드하는 Shopify 앱 같은 문제 말입니다.
참여 팀
몇 명까지 참여할 수 있나요?
원하는 만큼 참여할 수 있습니다. 비용은 팀 단위로 책정됩니다. 20명이 넘어가면 두 번째 시간에 한 화면에 집중하기 어려워지므로, 진행 방식에 대해 사전에 먼저 상의합니다.
에이전시에도 적합한 교육인가요?
그렇습니다. 팀이 가장 잘 아는 고객사 사이트나 현재 지표 통과에 실패하고 있는 사이트를 고르시면 됩니다. 교육 후에도 자체적으로 초록색(green) 수치를 만들기 어려운 고객사 사이트가 있다면 에이전시 지원을 활용할 수 있습니다.
사무실로 직접 방문 교육도 가능한가요?
가능하며 거리당 출장비가 추가됩니다. 다만 모든 참석자가 각자의 화면에서 trace를 확인할 수 있는 온라인 세션으로도 충분히 동일한 효과를 냅니다.
비용 및 교육 이후
2시간이면 충분한가요?
trace를 읽는 법을 배우는 데는 충분합니다. 사이트 수정 작업은 교육 후 팀의 스프린트에서 진행되며, 후속 세션은 작업 도중 막히는 문제를 해결하기 위한 시간입니다.
더 긴 교육을 신청할 수도 있나요?
가능합니다. 반나절, 전일, 또는 지표당 한 세션씩 진행하는 시리즈 형태도 가능합니다. 마스터클래스보다 긴 과정은 시작 전에 구체적인 범위와 가격을 협의하여 정합니다.
오딧과는 어떻게 다른가요?
오딧은 제가 직접 문제를 찾아 문서로 정리하고 팀이 수정을 구현하는 방식입니다. 마스터클래스는 팀이 문제를 스스로 찾는 방법을 가르쳐 주므로, 동일한 사이트를 앞으로 수년간 계속 관리할 팀에게 가장 효과적입니다. 마감 기한이 촉박하다면 오딧부터 시작하세요.
교육 이후에 막히는 부분이 생기면 어떻게 하나요?
후속 세션을 예약하거나, 까다로운 특정 문제 하나만 집중적으로 다룬다면 power hour를 신청하세요. 그보다 큰 규모의 문제라면 오딧이나 컨설팅을 이용할 수 있습니다.
