전체 글118 SVG 아이콘 최적화 (아이콘 폰트, AI 생성, 접근성) 아이콘 몇 개 넣겠다고 Font Awesome 전체를 불러온 적 있으신가요? 저도 한동안 그렇게 했습니다. 어느 날 PageSpeed Insights 점수를 보고서야 뭔가 잘못됐다는 걸 실감했고, 그때부터 아이콘 하나를 어떻게 쓰는지가 생각보다 중요한 문제라는 걸 알게 됐습니다. 아이콘 폰트에서 SVG로, 그리고 AI 생성까지 직접 겪으며 느낀 것들을 풀어봅니다.아이콘 폰트, 편하긴 한데 계속 마음에 걸렸습니다Font Awesome이나 Material Icons 같은 아이콘 폰트는 처음엔 정말 편했습니다. 클래스 하나만 붙이면 아이콘이 나오니까요. 그런데 쓰는 아이콘은 다섯 개인데 수백 KB짜리 폰트 파일 전체를 CDN에서 받아오는 구조가 계속 마음에 걸렸습니다.아이콘 폰트 방식의 핵심 문제는 렌더링 방.. 2026. 6. 17. Lazy Loading (LCP, CLS, 스켈레톤 UI) loading="lazy" 한 줄이면 웹 성능 최적화가 끝난다고 생각한 적 있으셨나요? 저도 그랬습니다. 처음 이 속성을 발견했을 때 "이게 전부야?" 싶어서 사이트 이미지 전체에 붙여버렸습니다. 결과는 오히려 점수가 떨어지는 역효과였습니다. 그리고 솔직히 그 역효과가 즉시 눈에 띄지 않았기 때문에 더 골치가 아팠습니다. 한 줄짜리 최적화처럼 보이는 것이 잘못 쓰면 독이 된다는 걸, 직접 겪고 나서야 제대로 이해했습니다.Lazy Loading과 LCP: 무조건 적용이 아닌 선택적 적용Lazy Loading이란 사용자의 뷰포트, 즉 현재 화면에 보이는 영역에 이미지가 들어오기 전까지 로드를 미루는 기술입니다. HTML img 태그에 loading="lazy" 속성 하나만 추가하면 Chrome, Firefo.. 2026. 6. 16. 블로그 썸네일 자동화 (object-fit, AI 생성, 파이프라인) 깔끔한 썸네일이 오히려 독자를 쫓아낸다면 믿겠습니까? 저도 처음엔 말도 안 된다고 생각했습니다. 블로그 카드 UI를 처음 만들면서 이미지 크기가 제각각인 문제를 해결하느라 몇 주를 보냈는데, 막상 자동화를 완성하고 나서 새로운 문제가 기다리고 있었습니다. 썸네일 자동화의 시작부터 그 함정까지, 제가 직접 겪은 과정을 풀어보겠습니다.이 경험을 쓰면서 계속 드는 생각은, 기술적 문제를 해결한 뒤에 사람의 문제가 기다리고 있다는 겁니다. 이미지 크롭 문제를 코드로 해결했더니 시각적 단조로움이라는 UX 문제가 나타났고, 그걸 해결했더니 저작권 문제가 생겼습니다. 자동화는 문제를 없애는 게 아니라 문제의 성격을 바꿔놓는다는 것을, 이 과정에서 배웠습니다.object-fit으로 크롭 문제 해결하기처음 블로그 카드 .. 2026. 6. 15. WebP·AVIF 이미지 최적화 (포맷 비교, 자동화, 성능 측정) 모바일 페이지 한 장을 여는 데 이미지가 평균 1.3MB 이상을 차지합니다. 처음 제 블로그의 PageSpeed Insights 점수가 40점대로 찍혔을 때, 지적 항목 1순위가 항상 "차세대 형식으로 이미지 제공"이었습니다. 그때는 그게 뭘 뜻하는지도 몰랐는데, 지금 돌아보면 그 한 줄이 이 모든 삽질의 시작이었습니다.솔직히 그 전까지는 이미지 최적화를 "귀찮은 추가 작업" 정도로 여겼습니다. 글 내용이 중요하지 이미지 파일 형식 같은 건 크게 중요하지 않다고 생각했는데, 실제로 해보니 완전히 틀린 생각이었습니다. 이미지는 대부분의 블로그에서 페이지 무게의 절반 이상을 차지합니다. 이걸 최적화하지 않으면 다른 모든 최적화 노력이 절반짜리가 됩니다.WebP와 AVIF, 무엇이 다른가두 포맷을 두고 "AV.. 2026. 6. 14. 애드센스 수익 계산기 (수익 예측, RPM, CTR) 솔직히 블로그를 시작하고 1년 가까이 저는 수익 구조를 제대로 이해하지 못했습니다. 트래픽이 올라도 수익은 제자리였고, 어떤 달은 방문자가 적었는데 수익이 더 나오기도 했습니다. 그 불확실성을 해소하려고 AI에게 수익 예측 계산기를 만들어달라고 요청한 것이 꽤 유효한 선택이었습니다. 이 글은 그 과정에서 배운 것과, 수익 예측 모델의 한계까지 함께 정리한 기록입니다.지금 돌아보면 수익 구조를 모르고 운영했던 1년이 꽤 아깝습니다. 방향 없이 달리다 보니 에너지를 효율적으로 쓰지 못했습니다. 수익 구조를 숫자로 이해하기 시작한 이후에는, 어디에 시간을 써야 하는지가 훨씬 명확해졌습니다.RPM과 수익 공식, 숫자로 보면 달라진다애드센스 수익을 이해하는 출발점은 RPM(Revenue Per Mille) 개념을.. 2026. 6. 13. 애드센스 RPM 올리기 (페이지 속도, AI 리팩토링, Core Web Vitals) 콘텐츠를 열심히 썼는데 RPM이 오르지 않는다면, 글의 문제가 아닐 수 있습니다. 저도 한참 그 함정에 빠져 있었습니다. 글을 더 잘 쓰면 될 거라고 믿었는데, 진짜 문제는 페이지가 너무 느렸다는 것이었습니다. PageSpeed Insights 점수를 처음 확인한 날, 머리가 멍해졌던 기억이 지금도 생생합니다.글 쓰는 데 들이는 시간의 10분의 1만이라도 페이지 성능 점검에 썼더라면 어땠을까 하는 생각을 지금도 가끔 합니다. 그때는 기술적인 건 개발자가 하는 일이라고 생각해서 손도 대지 않았는데, 알고 보니 블로거도 충분히 개선할 수 있는 영역이었습니다.콘텐츠보다 먼저 봐야 할 것이 있었습니다애드센스를 시작하고 몇 달 동안 월 평균 RPM이 600~700원 수준에서 꼼짝을 하지 않았습니다. 여기서 RPM.. 2026. 6. 12. 이전 1 2 3 4 5 6 7 8 ··· 20 다음
