기록
eruLabo 관리 히스토리
블로그 디자인 리뉴얼 및 광고 적용 완료
24 views as of October 17, 2024.
분명히 시작은 광고 달기였는데, 광고의 형태(디자인)이 내 블로그와 너무 맞지않는 형태라 어쩔수없이 며칠동안 이것저것 시도하면서 블로그 디자인을 바꿔보았다.
기존의 블로그는 박스 디자인 형식으로 외곽선에 흰선으로 포인트를 준 박스안에 모든 내용을 넣어서 차곡차곡 쌓는 느낌으로 만들었었다.
근데 그러다보니 플랫한 블럭으로 구현되는 웹 광고랑 너무 이질적인 느낌이 강해서 박스형태의 디자인을 버리고 그냥 일반적인 커뮤니티나 웹 포럼사이트 처럼 경계가 없는 디자인을 선택하고 사이드 광고를 배치해둘 공간이 필요해 콘텐츠-사이드 구도를 선택했다.
본문 상단 헤더/메인/사이드 영역PC 화면에서는 사이드영역이 노출되고 모바일 화면에서는 사이드 영역이 감춰지는 구조로 레이아웃을 조정했다.
그리고 이 구도를 조정하면서 본문의 사이즈도 기존 509px -> 560px 로 늘리게 되었다.
기존에 본문사이즈를 좁게 짠 이유가 모바일 친화적 사이트를 지향하려고 그런거긴한데, 실질적으로 내가 블로그를 관리하는 주체가 거의 PC 환경이고, 너무 폭이 작다보니 한화면에 보이는 공백이 너무 많아서 오히려 너무 답답하게 느껴지지 않았나 싶다.
그리고 카테고리나 타이틀등의 차이를 기존엔 명조 폰트와 사이즈로 제어했는데 폰트사이즈가 16px 이하로 내려가면 컴팩트하고 단정한 장점이있지만 가독성이 떨어진다는 단점도 크게 다가왔다.
그래서 새로 만드는 사이트는 최소 폰트크기를 16px로 잡고 타이틀류는 18~20px로, 그리고 작은 글씨가 필요한 부분은 폰트 굵기로 제어하기로 결정했다.
이 과정을 거쳐오면서 자연스레 폰트도 노토산스에서 IBM Plex 체로 바꾸게 되었다. (구글 폰트에 있었음)
본문 하단 광고/콜렉션/페이지네이션 영역페이지 하단은 이전에 추가한 콜렉션과 어울리는 버튼으로 소폭 디자인을 변경했고 이에 맞게 본문내 하단에 광고를 배치했다.
광고는 결국 애드센스를 기반으로하되 본문내용에 애드핏 사각광고를 넣고 우측 사이드에는 쿠팡 광고 하나정도만 넣기로 했다.
처음에는 애드핏 승인이후에 160x600 사이즈의 사이드바 광고를 운영했는데, 생각보다 사이드바 광고가 제대로된게 안뜨고 자그마한 가로형 이미지와 텍스트 광고만 엄청떠서 애드핏이 PC 환경을 지향하는 광고가 아닌것을 깨닫고 모바일 친화적인 사이즈로 교체한 후 위치를 위와 같이 고정해놨다.
최종적으로 이런 게시글을 모아 볼 수 있는 메인 페이지(홈 화면)는 썸네일 구도를 사용하는 방식으로 교체했다.
홈 화면 풀 스크린샷기존에는 섬네일 이미지 로드때문에 홈화면 로딩속도를 고려해 이미지를 안띄웠지만 이제 광고를 넣다보니 속도보다는 질이 더 중요할거 같아서...
더불어 이전에 이미지 압축(저화질 이미지로 교체) 하는 과정도 적용했으니 섬네일 이미지가 너무 커서 문제일경우는 없을거같아서 현재와 같은 구도를 하기로 마음 먹게되었다.
워낙 이거저거 바꾸면서 손대는 걸 좋아하는 성격이라 이번 사이트 디자인이 얼마나갈진 모르겠지만 현재 상황에선 나름 마음에 든다. 오래오래 써보도록 노력해야겠다.