웹 성능2 SVG 아이콘 최적화 (아이콘 폰트, AI 생성, 접근성) 아이콘 몇 개 넣겠다고 Font Awesome 전체를 불러온 적 있으신가요? 저도 한동안 그렇게 했습니다. 어느 날 PageSpeed Insights 점수를 보고서야 뭔가 잘못됐다는 걸 실감했고, 그때부터 아이콘 하나를 어떻게 쓰는지가 생각보다 중요한 문제라는 걸 알게 됐습니다. 아이콘 폰트에서 SVG로, 그리고 AI 생성까지 직접 겪으며 느낀 것들을 풀어봅니다.아이콘 폰트, 편하긴 한데 계속 마음에 걸렸습니다Font Awesome이나 Material Icons 같은 아이콘 폰트는 처음엔 정말 편했습니다. 클래스 하나만 붙이면 아이콘이 나오니까요. 그런데 쓰는 아이콘은 다섯 개인데 수백 KB짜리 폰트 파일 전체를 CDN에서 받아오는 구조가 계속 마음에 걸렸습니다.아이콘 폰트 방식의 핵심 문제는 렌더링 방.. 2026. 6. 17. WebP·AVIF 이미지 최적화 (포맷 비교, 자동화, 성능 측정) 모바일 페이지 한 장을 여는 데 이미지가 평균 1.3MB 이상을 차지합니다. 처음 제 블로그의 PageSpeed Insights 점수가 40점대로 찍혔을 때, 지적 항목 1순위가 항상 "차세대 형식으로 이미지 제공"이었습니다. 그때는 그게 뭘 뜻하는지도 몰랐는데, 지금 돌아보면 그 한 줄이 이 모든 삽질의 시작이었습니다.솔직히 그 전까지는 이미지 최적화를 "귀찮은 추가 작업" 정도로 여겼습니다. 글 내용이 중요하지 이미지 파일 형식 같은 건 크게 중요하지 않다고 생각했는데, 실제로 해보니 완전히 틀린 생각이었습니다. 이미지는 대부분의 블로그에서 페이지 무게의 절반 이상을 차지합니다. 이걸 최적화하지 않으면 다른 모든 최적화 노력이 절반짜리가 됩니다.WebP와 AVIF, 무엇이 다른가두 포맷을 두고 "AV.. 2026. 6. 14. 이전 1 다음
