2000px 너비 이미지를 1000px 화면에서 보면 어떻게 될까? 브라우저가 축소해서 보여주지만 대역폭은 낭비된다.
적정 이미지 크기
화면 너비의 2배 정도면 레티나에서도 선명하다. 1000px 영역이면 2000px 이미지. 그 이상은 과잉이다.
lazy loading
화면에 보이는 이미지만 먼저 로드하고 나머지는 스크롤할 때 로드한다. loading="lazy" 속성으로 쉽게 적용. 화면 크기 확인기로 뷰포트 크기를 확인하고 최적화하자.
WebP 포맷
같은 화질에 파일 크기가 작다. picture 태그로 지원 브라우저에만 제공할 수 있다. 확인기로 다양한 화면에서 테스트하자.
개발 워크플로우에 통합
화면 크기 확인을 개발 워크플로우의 일부로 만들자. 코드를 수정할 때마다 화면 크기 확인기로 다양한 크기에서 확인하는 습관이 중요하다. 자동화 테스트에 반응형 테스트를 포함시키는 것도 좋은 방법이다.
디자이너와의 협업
디자이너가 만든 시안이 어떤 화면 크기 기준인지 확인하자. 그리고 개발할 때 그 크기에서 먼저 구현하고, 다른 크기로 확장하면 효율적이다. Figma 프레임 크기와 실제 브라우저 크기를 확인기로 비교해보자.
QA 체크리스트
배포 전 주요 화면 크기에서의 동작을 확인하는 체크리스트를 만들어두자. 모바일(375px), 태블릿(768px), 데스크톱(1200px) 최소 세 가지는 확인하는 게 좋다. 확인기와 함께 체계적으로 테스트하자.
화면 크기 확인기를 자주 활용하면서 다양한 화면 환경에 대응하는 습관을 들이자.