반응형 웹 개발 경험이 있으신가요? 그 과정에서 주의해야 할 점은 무엇이라고 생각하나요?

반응형 포트폴리오 사이트를 만들면서 모바일에서 첫 화면이 로딩되는데 4초가 걸리는 문제를 출시 후 발견했습니다. 레이아웃은 잘 맞았는데, Lighthouse로 점수를 확인해보니 미최적화 이미지가 원인이라는 게 바로 나왔습니다. 데스크톱용 고해상도 이미지를 그대로 모바일에서 불러오는 구조였고, 파일 크기가 몇 MB인 것들이 있었습니다. srcset으로 해상도별 이미지를 따로 제공하는 방식으로 수정하고, WebP 포맷으로 변환하자 첫 로딩 시간이 크게 줄었습니다. 모바일은 네트워크 환경과 하드웨어 성능이 데스크톱과 다르다는 걸 수치로 처음 확인한 경험이었습니다.

반응형 개발에서 레이아웃뿐만 아니라 리소스 용량도 모바일 기준으로 설계해야 한다는 걸 배웠습니다. 지금은 이미지를 추가할 때 모바일 기준 파일 크기를 먼저 확인하는 루틴이 생겼습니다. 레이아웃과 리소스 크기를 함께 모바일 기준으로 보는 습관이 그때부터 생겼습니다.