안녕하세요 웹 프론트엔드 팀 조강연입니다. ||
안녕하세요 웹 프론트엔드 팀 조강연입니다.
최근 사내에서 진행하는 프로젝트들에 대해서 웹 프론트엔드 팀이 성능을 관리하기 시작했습니다.
단순히 제품을 만들어내는 작업 외적으로도 성능을 측정하고, 개선하는 과정에서 유저에게 더 좋은 경험을 선사한다는 동기부여를 받기 때문인데요, 이번 글에서는 웹 프론트엔드 팀이 성능이라는 키워드에 관심을 가지게 된 배경과 그것을 팀의 한 문화로 안착시키기 위해 기울인 노력 등에 대해서 소개하려고 합니다.
성능에 관심을 갖게된 배경은 이렇습니다.
최근 사내에서 몇몇 핵심과제를 진행하면서, 앱내 일부 페이지를 웹뷰로 전환하는 프로젝트를 진행하였습니다.
앱 내 사용률이 높은 영역이다보니, 사용성 측면에서 유저의 경험이 필두로 중요시되는 영역이었으며, 해당 페이지는 Google, Naver와 같은 검색엔진을 통해서도 접근 가능한 반응형 웹의 형태로 개발이 진행되어야 했습니다.
제품을 개발하는 과정에서 요구사항을 구현하기 위해 처음부터 최적의 구현체를 찾는다는 것은 현실적으로 어려운 일이라고 판단하였고, Lighthouse 라는 검사도구를 사용하여 구현과정에서 피드백을 받고 best practice를 찾아가면 좋을 것 같다고 판단되어 성능 검사를 병행하며 개발을 진행하였습니다.
Lighthouse란
Lighthouse는 구글에서 만든 웹 성능 측정 도구입니다. 개발자 도구에서 사용 가능하며, 성능 측정 결과와 함께, 웹페이지가 접근성을 준수하여 구축되었는지, 검색 결과에 잘 노출되기 위한 최적화 권고들을 따랐는지 피드백을 주는 도구입니다.
Lighthouse 성능 측정 시 보고되는 6가지 주요 지표들
Largest Contentful Paint
웹 페이지가 처음될 로드 될 때, 뷰포트 내에 있는 가장 큰 이미지, 텍스트 블록이 렌더링되는 시간에 대한 지표.
First Contentul Paint
웹 페이지가 로드되기 시작하는 시점부터, 페이지의 일부 콘텐츠가 화면에 렌더링 될 때 까지의 시간에 대한 지표
Total Blocking Time
웹 페이지의 일부 콘텐츠가 렌더링 되는 시점(FCP) ~ 웹 페이지와 상호작용이 가능해지는 시점 사이의 총 시간에 대한 지표
Speed Index
웹 페이지가 로드 될 때, 콘텐츠가 시각적으로 표시되는 속도에 대한 지표
First Meaningful Paint
웹 페이지 내의 주요 콘텐츠가 사용자에게 표시되는 시기에 대한 지표
Cumulative Layout Shift
웹 페이지 렌더링 과정 중 특정 요소가 뒤늦게 화면에 나타나거나 또는 그로인해 발생하는 레이아웃 밀림 현상에 대한 지표
웹 성능을 측정하기 위한 지표들과 도구들은 매우 다양합니다. 이에 따라 사용자에게 전달되는 서비스의 품질을 이해하는 것은 비개발자들에게 선망의 대상이기도 했는데요. 이제는 성능에 대한 모든 지표들을 파악하지 않아도, 위 6가지 지표들을 통해 사용자에게 전달되는 경험의 품질을 간단하게 이해할 수 있습니다.
그리고 이는 실제로 Lighthouse 팀의 목적이기도 합니다.
Core Web Vitals만 알아도 사용자 경험의 품질이 어떤 지 이해할 수 있어요.
실제 성능 개선 과정
실제 프로젝트 개발 초기에 마주했던 피드백들입니다.
Serve images in next-gen formats
해당 코멘트는 차세대 형식의 이미지(webp, avif) 이외의 확장자를 사용할 때, 만날 수 있는 코멘트입니다. 해결 방식 자체는 매우 간단한데요, 기존 jpg, jpeg, png 등의 확장자를 사용하고 있는 이미지를 webp 형태로 전환해주기만 하면 됩니다.
그런데…
저희 팀은 이미 모든 이미지를 webp 형태로 사용중에 있었습니다. 진짜 원인을 파악하기 전까지는 Lighthouse가 거짓말을 치는 줄 알았어요..
네이버 지도 API를 사용중입니다.
모두가 아시다시피 네이버 지도는 이미지를 기반으로 제공됩니다. 그리고 이미지는 영역별로 Crop 되어 전송되는데요, 이 이미지들이
비브로스 웹 프론트엔드 팀이 성능을 관리하기 시작했어요.
생성 일시
2026/09/16 08:07
최종 편집 일시
2026/09/16 08:07
태그
비브로스
파일과 미디어