블로그 디자인을 변경했습니다.

이 글은 타인에게 도움되는 내용은 아니지만, 오랜 기간 사용했던 블로그 디자인을 변경하면서 페이지 속도 최적화 테스트를 기록한 글입니다.

참고로 블로그는 Google Blogger 서비스를 이용하고 있으며 만족하고 있습니다.

많은 개발자 블로그가 GitHub Pages로 운영되고 있고, 타 서비스를 이용하는 블로거들도 이전을 검토하는 분들이 주변에 많습니다.

개인적으로 GitHub Pages가 인기 있는 이유 3가지만 꼽자면 아래와 같습니다.
1. GitHub의 익숙함
2. MarkDown 작성의 편리함
3. 많은 무료 디자인

이번에 디자인을 변경한 이유 중 1가지가 3번 항목의 영향도 있습니다.
개발자가 선택하는 디자인들의 유형이 비슷한 UX/UI을 제공하고 있었고, 개발자스럽다는 오래된 UX/UI을 제공하고 있었습니다.

그래서 개발자들이 많이 선택하는 UX/UI로 전환고 그동안 무시하고 있었던 사이트 속도를 개선하고 싶었습니다.

모바일 환경 개선

구글 모바일 속도 테스트로 측정한 결과는 변경 전 11초에서 3초로 개선되었으며 방문자 손실률도 해결되었습니다.
녹색이 표시되니 기분이 좋네요.

Before	After

페이지 속도

구글 페이지 속도 테스트로 측정한 결과는 데스크톱과 모바일 모두 문제가 있었습니다. 이번 디자인 변경으로 데스크톱은 녹색으로 전환되었습니다.

Desktop Before	Desktop After

모바일은 조금 개선은 되었지만 빨간색이지만, 우선 적용 후 조금씩 개선하려고 합니다.
하지만 체감 속도는 빨라져서 만족하고 있습니다.

Mobile Before	Mobile After

개발자스럽다 블로그

글 읽기에 편하도록 어두운 색상과 심플한 디자인을 적용했습니다.
처음으로 구글 광고의 임의 노출를 사용했는데 덕분에 글 읽기를 방해하는 경우도 있고 디자인이 깨지는 이슈가 있습니다.

앞으로 조금씩 개선해야될 부분이 남았지만, 최근 UX/UI 느낌은 나는거 같네요.

Before	After

월간 개발자스럽다

과거 "월간 개발자스럽다"는 Facebook 페이지의 의존도가 높았습니다.
Facebook의 썸네일 이미지 주소는 일정 시간이 지나면 썸네일 이미지가 없는 문제가 있었습니다.

이미지가 글을 더욱 효과적으로 설명할 수 있다는 생각으로 포함했으나, 좋은 사용자 경험을 제공하지는 못했기에 이번 기회에 제거했습니다.
그리고 다수의 뉴스레터가 이미지를 포함하지 않는다는 점이 결정에 도움되었습니다.

🙏 게시 회차 표시에 대한 의견을 듣고 싶습니다.
게시 회차를 "년+월" 조합으로 "1902호"로 작성하고 있는데요.
다수의 뉴스레터가 사용하는 게시 회차 번호 방식인 "#00" 형태가 좋을까요?
의견은 댓글로 남겨주시면 감사하겠습니다.

작은 일에 긴 서론을 마무리하며 취합된 내용으로 넘어가겠습니다. 😅

Before	After

개래닷컴

블로그를 제외한 정적 페이지는 GitHub Pages를 사용하고 있습니다. 블로그를 개선하면서 도메인 메인 페이지도 함께 디자인을 변경했습니다.

기존에는 zsh 느낌으로 작업했는데, 블로그와 유사하게 디자인을 변경했는데 깔끔하네요.

Before	After

타인에게 도움되는 내용은 아니지만 오늘을 기록하기 위해서 작성했습니다.