홈페이지에 날짜 선택기나 다국어 설정 같은 기능을 넣을 때마다 외부 라이브러리부터 검색하고 계신가요. 이제는 브라우저가 기본으로 지원하는 웹 표준 기능만으로 해결되는 영역이 넓어지고 있어서, 라이브러리 의존도를 낮추고 코드를 가볍게 유지하는 것이 개발팀의 새로운 과제로 떠올랐습니다. 구글 라이트하우스에 추가된 Baseline Features 감사 기능과 올해 새로 크로스 브라우저 호환성을 확보한 API들을 살펴보면, 지금 우리 홈페이지 코드에서 무엇을 정리할 수 있는지 가늠할 수 있습니다.
라이트하우스 감사 항목이 늘어난 이유
Baseline은 크롬, 사파리, 파이어폭스 등 주요 브라우저 최신 버전에서 특정 웹 기능이 모두 안정적으로 동작한다는 것을 보증하는 구글의 분류 기준입니다. 이번 업데이트로 라이트하우스 감사 항목에 Baseline Features 점검 기능이 추가되어, 우리 사이트가 이미 어떤 최신 기능을 쓰고 있고 어떤 기능을 놓치고 있는지 보고서 한 번으로 확인할 수 있게 되었습니다.
단순한 코드 스니펫 테스트가 아니라 React 같은 프레임워크로 만든 실제 운영 중인 사이트에서도 현대적 웹 개발 관행을 검증할 수 있다는 점이 핵심입니다. 개발팀 입장에서는 별도 도구 없이 기존 성능 점검 루틴에 최신 표준 준수 여부 확인을 끼워 넣을 수 있게 된 셈입니다.
우리 홈페이지 코드베이스가 받는 영향
올해 Baseline을 달성한 기능 중 실무에 바로 적용할 만한 것은 네 가지입니다. 페이지 전환을 다루는 Navigation API, 부모 요소 크기에 따라 스타일을 바꾸는 container style queries, 토글 요소 상태를 다루는 :open 선택자, 정밀한 합계 연산을 지원하는 Math.sumPrecise()가 모두 주요 브라우저에서 안정적으로 동작합니다. 여기에 국제화 처리를 담당하는 Intl.Locale, 비동기 스트림을 배열로 바꾸는 Array.fromAsync(), 클립 경로를 단순하게 정의하는 rect() 함수까지 더해지면서 외부 라이브러리 없이 해결할 수 있는 영역이 한층 넓어졌습니다.
| 기능 | 주로 쓰던 방법 | 네이티브 전환 효과 |
|---|---|---|
| 페이지 전환 처리 | 라우팅 라이브러리 | 번들 크기 감소 |
| 다국어 로케일 파싱 | 커스텀 파싱 함수 | 유지보수 코드 축소 |
| 비동기 데이터를 배열로 변환 | 폴리필 라이브러리 | 의존성 제거 |
개발팀이 이번 달에 점검할 네 가지
- 라이트하우스 Baseline Features 감사 실행하기 운영 중인 페이지에서 감사를 돌려 어떤 최신 기능을 이미 쓰고 있고 어떤 기능을 놓치고 있는지 보고서로 확인합니다.
- 외부 라이브러리 의존성 목록 점검하기 페이지 전환, 로케일 파싱, 비동기 배열 변환을 위해 넣어둔 라이브러리가 있는지 찾아 목록으로 정리합니다.
- 타겟 브라우저 지원 범위 확인하기 분석 도구에서 실제 방문자 브라우저 비중을 확인해 네이티브 API로 대체해도 되는지 판단합니다.
- 이미지 포맷 전략 다시 검토하기 업데이트된 이미지 형식 가이드를 참고해 사이트에 쓰는 이미지 포맷이 현재 기준에 맞는지 점검합니다.
Baseline 적용 전에 확인할 세 가지 오해
- Baseline 달성이 모든 브라우저와 모든 버전 지원을 뜻하지는 않습니다. 주요 브라우저의 최신 버전을 기준으로 하므로 특정 구형 버전 사용자가 많다면 별도 확인이 필요합니다.
- 라이트하우스 점수만 보고 라이브러리를 바로 걷어내면 위험합니다. 실제 운영 환경에서 충분히 테스트한 뒤 단계적으로 교체하는 편이 안전합니다.
- 신규 API 몇 개가 Baseline에 올라왔다고 전체 사이트를 다시 만들 필요는 없습니다. 새로 개발하는 기능부터 적용하고 기존 코드는 여유 있을 때 정리해도 됩니다.
한 줄 정리 라이트하우스 Baseline 감사로 우리 사이트의 현재 위치를 확인하고, 올해 크로스 브라우저 호환성을 확보한 API부터 단계적으로 외부 라이브러리를 대체해 나가는 것이 핵심입니다.