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


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

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

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

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

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

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


모바일 환경 개선

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

BeforeAfter

페이지 속도

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

Desktop BeforeDesktop After

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

Mobile BeforeMobile After


개발자스럽다 블로그

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

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

개래닷컴

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

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


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

blog
2월 12, 2019
0

Menu

Search

Popular Posts

디자이너를 위한 최고의 영화 (디자이너에게 영감을 주는 영화)

개인적으로 직접 조립하고 만드는걸 좋아했는데 만들기전에 만들어질 모습을 스케치하는 것을 즐겼습니다. 스케치 할때 머리 속에 있는 멋진 모습…

Bash 입문자를 위한 핵심 요약 정리 (Shell Script)

Bash 입문자를 위한 기본적인 문법과 알고 있으면 좋은 것들만 정리했다. (이런 것도 있구나 싶을 정도만 이해하도록 간단한 설명과 예제로 …

PHP7 공개 전 참고 사이트 소개

PHP7 공개가 2015년 10월이라고 한다. 그래서 인지 모르겠지만 부쩍 PHP7에 대한 글들을 많이 찾아볼 수 있어 참고해볼 만한 …

Contact Me