전체 글118 CLS·LCP·INP 직접 잡은 경험기 - Core Web Vitals 실전 개선 CLS 수치 0.31. 구글 서치 콘솔에서 경고 메일을 받았을 때 저도 처음엔 이게 뭔 숫자인지 몰랐습니다. 페이지가 로드되면서 뭔가 살짝 밀리는 느낌은 늘 있었는데, 그게 구글한테 측정되고 있었다는 걸 그날 처음 알았습니다. 솔직히 그 전까지 Core Web Vitals라는 게 현실적인 SEO 영향력이 있는 건지 반신반의했습니다. 경고 메일을 받고 나서야 이걸 진지하게 보게 됐습니다.CLS를 잡는 데 이미지 태그 하나가 이렇게 중요할 줄 몰랐다CLS(Cumulative Layout Shift)란 페이지가 로드되는 동안 화면의 요소들이 얼마나 많이, 얼마나 크게 움직이는지를 수치로 나타낸 지표입니다. 쉽게 말해 "로딩 중에 화면이 얼마나 덜컹거리는가"를 측정하는 값인데, 구글은 0.1 이하를 좋음 기준으.. 2026. 4. 26. 인피드 광고 최적화 - CSS 스타일, 배너 블라인드니스, CLS 광고가 콘텐츠처럼 보일수록 클릭률이 올라간다는 말, 반은 맞고 반은 위험합니다. 저는 블로그 리디자인을 하면서 이 문제를 처음 직접 맞닥뜨렸고, 단순히 스타일을 고치는 작업이 생각보다 훨씬 복잡한 문제와 연결돼 있다는 걸 깨달았습니다. 인피드 광고 스타일을 맞추는 일은 기술의 문제이기도 하고, 동시에 독자와의 신뢰에 관한 문제이기도 합니다.배너 블라인드니스, 데이터로 보기 전까진 과장처럼 들렸다배너 블라인드니스(Banner Blindness)란 사용자가 광고처럼 생긴 영역을 무의식적으로 회피하는 현상입니다. 쉽게 말해 광고 냄새가 나는 순간 눈이 먼저 피한다는 겁니다. Nielsen Norman Group의 연구에 따르면, 이 회피 반응은 학습된 행동으로 의식적인 판단이 아니라 거의 본능에 가깝다고 합니.. 2026. 4. 25. 뷰포트 단위(vw/vh/dvh)로 반응형 광고 컨테이너 완성하기 미디어 쿼리 없이 반응형 레이아웃을 만들 수 있다면 믿어지십니까? 저도 처음엔 반신반의했습니다. 그런데 광고 컨테이너에 width: 90vw를 입력한 순간, 몇 주 동안 붙잡고 있던 문제가 두 줄로 해결됐습니다. 뷰포트 단위가 단순히 "화면 크기에 맞추는 단위" 정도로 알려져 있지만, 실제로는 광고 렌더링 품질과 모바일 사용자 경험을 직접 좌우하는 핵심 CSS 속성입니다. 그 두 줄이 몇 주짜리 문제를 해결했을 때, 저는 기쁘기보다 허탈했습니다. 더 일찍 알았더라면 하는 생각이 먼저 들었기 때문입니다.vw로 광고 컨테이너 문제 해결하기고정값으로 광고 컨테이너 너비를 설정하던 시절이 있었습니다. 데스크탑에서는 멀쩡해 보였는데, 작은 화면에서 광고가 오른쪽으로 삐져나오거나 가로 스크롤이 생겼습니다. max-.. 2026. 4. 25. 광고 여백 설정이 독자 경험에 영향을 준다, 숫자로 확인했습니다 여백만 바꿨을 뿐인데 체류 시간이 달라질 수 있을까요? 처음에는 저도 반신반의했습니다. 그런데 구글 애널리틱스를 열어보니 평균 체류 시간이 1분이 채 안 됐고, 원인을 추적하다 결국 광고 컨테이너 주변의 여백 0짜리 설정을 마주했습니다. 그 뒤로 직접 수치를 바꿔가며 어떤 여백이 어떻게 작동하는지 확인했습니다. 처음에 여백을 디자인 취향의 문제라고 봤던 것이 틀렸습니다. 여백은 독자의 읽기 경험을 직접 조율하는 구조적 요소였습니다.margin으로 체류시간을 끌어올린 과정여백은 그냥 디자인 요소라고 생각하는 분들도 있는데, 저는 그게 독자의 읽기 흐름과 직결된다는 걸 숫자로 확인하고 나서야 진지하게 받아들였습니다.당시 제 블로그 구조는 단락 바로 다음에 광고 코드를 붙여 넣는 방식이었습니다. 텍스트가 끝나.. 2026. 4. 24. 애드센스 광고 배치 - 광고 배치 하나 바꿨더니 수치가 달라졌다 광고를 많이 붙일수록 수익도 늘어날 거라고 생각한 적 있으신가요? 저도 그랬습니다. 처음 애드센스를 달았을 때 글 상단, 사이드바, 하단 할 것 없이 최대한 채웠는데, 정작 클릭률은 처참했습니다. 알고 보니 문제는 광고 수가 아니라 독자의 시선이 어디로 흐르는지였습니다. 배치 하나를 바꾼 뒤 수치가 달라졌고, 그때부터 광고를 보는 시각이 완전히 바뀌었습니다. 솔직히 수익을 올리려면 광고를 더 달면 된다고 생각했던 건, 독자를 사람이 아니라 클릭하는 기계로 봤던 것과 같습니다. 시선이 바뀌고 나서야 접근 자체가 달라졌습니다.배너 블라인드니스, 독자는 이미 광고를 무시하도록 훈련되어 있다혹시 웹페이지를 읽을 때 사이드바를 제대로 본 적 있으신가요? 저도 거의 없었는데, 제 블로그를 히트맵으로 분석했을 때 그.. 2026. 4. 23. 카운트다운 타이머 - CSS 스타일링, 긴박감 설계, 접근성 방법 솔직히 저는 처음에 카운트다운 타이머를 "기능만 되면 끝"이라고 생각했습니다. setInterval로 숫자가 돌아가면 그게 타이머 아닌가, 하고요. 클라이언트가 "긴박한 느낌이 없다"고 피드백을 줬을 때 처음으로 CSS 스타일링을 진지하게 들여다보게 됐습니다. 그때 알았습니다. 기능이 완성된 타이머와 타이머처럼 느껴지는 타이머는 다른 것이라는 걸. 그리고 그 피드백을 받았을 때 처음 든 감정은 억울함이었는데, 돌아보니 그 억울함이 틀렸습니다. 기능은 최소 조건이었고, 경험은 그다음이었습니다.CSS 스타일링이 긴박감을 만드는 방식제가 처음 만든 타이머는 흰 배경에 검은 글씨, 기본 산세리프 폰트였습니다. 숫자는 분명히 줄어들고 있었는데, 보는 사람 입장에서는 아무런 긴박함이 없었습니다. CSS 스타일링이 .. 2026. 4. 22. 이전 1 ··· 11 12 13 14 15 16 17 ··· 20 다음
