서버 보안과 데이터베이스 전환을 마친 뒤 실제 블로그 화면을 다시 살펴봤습니다. 기능은 정상이어도 첫 화면이 지나치게 크고, 모바일에서 장식 이미지와 카테고리 카드가 많은 공간을 차지했으며, AdSense 자동 광고가 콘텐츠보다 더 강하게 느껴지는 문제가 있었습니다. 이번 작업은 새 디자인을 전면 제작하기보다 기존 Astra와 Elementor 구성을 유지하면서 읽기 흐름을 다듬는 데 집중했습니다.
자식 테마로 변경 범위 분리
Astra 원본 테마를 직접 수정하면 업데이트 때 변경 내용이 사라질 수 있습니다. 그래서 Lohen Astra Child 자식 테마를 만들고 반응형 스타일과 필요한 WordPress 필터만 넣었습니다. 원본 테마와 Elementor 플러그인은 업데이트 가능한 상태로 유지했습니다.
홈페이지 정보 구조 정리
- 소개 문구를 AWS, Kubernetes, Linux, AI 중심으로 구체화
#로 남아 있던 “모든 글 보기” 버튼을 실제 글 목록으로 연결- AWS, AI, K8s, Linux 카드의 잘못된 카테고리 URL 수정
- 영문 섹션 제목과 푸터 문구를 블로그 성격에 맞게 정리
- 키보드 포커스, 본문 행간, 코드 블록과 인용문 가독성 개선
모바일 대문은 한 화면 안에서 핵심이 보이도록
390px 화면에서 대문 높이가 약 712px이었고 제목은 48px로 표시됐습니다. 장식용 점무늬 이미지와 고양이 이미지가 함께 있어 첫 화면의 정보 밀도가 낮았습니다. 제목을 약 28px로 줄이고 대문 높이를 약 440px대로 낮췄습니다. 모바일에서는 점무늬 배경 이미지를 숨기고 블로그를 대표하는 고양이 이미지만 남겼습니다.
카테고리 카드에는 Elementor에서 300px의 상단 패딩이 지정되어 있었습니다. 자식 테마의 모바일 미디어 쿼리에서 패딩과 높이를 다시 정의해 카드 높이를 약 186px로 줄였습니다. 데스크톱 디자인에는 영향을 주지 않도록 544px 이하에서만 적용했습니다.
광고가 콘텐츠보다 먼저 보이는 문제
모바일 개별 글을 확인해 보니 본문형 자동 광고 외에도 하단 고정형 광고와 페이지 이동 사이 전면 광고가 함께 활성화되어 있었습니다. 처음에는 Site Kit 필터를 이용해 홈·카테고리·글 목록에서는 광고 스크립트를 차단하고 개별 글에서만 접힘형 하단 광고를 사용하도록 제한했습니다.
최종적으로 자동 광고를 끈 이유
광고 수익보다 읽기 흐름과 배치 통제권을 우선하기 위해 AdSense 관리 화면에서 자동 광고를 사용하지 않도록 변경했습니다. 앞으로 광고가 필요하면 글의 시작 직후나 문단마다 자동 삽입하는 대신, 충분한 본문 이후처럼 명확한 위치에 수동 광고 단위를 소수 배치하는 방식이 더 적합하다고 판단했습니다.
검증 방법
- 390px 모바일 뷰포트에서 가로 스크롤 발생 여부 확인
- 대문 제목과 이미지의 실제 계산 크기 확인
- 홈과 개별 글에서 AdSense 스크립트 및 광고 요소 개수 확인
- 카테고리와 전체 글 버튼의 실제 목적지 확인
- 브라우저 콘솔 오류와 서버 헬스체크 확인
마무리
UI 개선은 CSS를 많이 추가하는 작업보다 무엇을 덜 보여 줄지 결정하는 과정에 가까웠습니다. 모바일 첫 화면에서는 핵심 소개와 대표 이미지만 남기고, 광고는 자동 최적화보다 운영자가 위치와 개수를 통제하는 방향으로 바꿨습니다. 이후에도 실제 화면 크기와 글 읽기 흐름을 기준으로 작은 변경을 이어갈 예정입니다.