2020년 12월 블로그 개편! 가독성, 메뉴 수정 등 [블로그 개편]

가독성, 메뉴, 사이드바, 푸터 등 2020년 12월 블로그 개편!

최근 시간이 조금 생겨서 간만에 블로그 개편을 좀 했습니다. 크진 않지만 살짝살짝 많은 것을 바꿨습니다. 그리고 그 대부분은 제가 해야지 해야지 하면서도 안하고 있었던 것들이라서 더욱 더 마음에 듭니다. 블로그 개편 내용 하나씩 써보겠습니다.

1. 가독성 개선

본문 너비(가로 길이) 조정

이 부분이 의외로 쉽지 않아서 방법을 많이 찾았는데 결국은 그냥 쉬운 방법으로 해결했습니다. 저는 블로그 관련 자료들은 주로 외국 블로그를 많이 참고합니다. 우리나라에는 이쪽 전문가가 그닥... 여튼 가독성에 대해서 검색해보면 여러 좋은 이야기들이 있는데요, 그 중에서 그 글을 쓰는 본인들도 놓치고 있는 부분 중 하나가 바로 본문의 너비(가로 길이) 부분입니다.

사람마다 그 정도는 다르겠습니다만 보통 한뼘 정도를 가장 이상적이라고 봅니다. 본문이 너무 넓으면 눈을 계속 움직여줘야하니 눈이 쉽게 피로해짐은 당연하겠죠. 실제로도 외국 신문사 사이트들 좀 참고했는데 글의 길이가 넓지 않습니다. 물론 네이버나 티스토리 등도 이 부분이 잘 되어있지만 우리의 워드프레스는 이것조차 직접 설정하지 않으면 글이 끝도 없이 넓어집니다... 혹은 좋은 테마를 쓰신다면...

여튼 저는 블록 에디터 플러그인을 사용해서 이 문제를 해결했습니다. Editor Plus라는 플러그인이 블록을 만든 후에도 서식 수정이 용이해서 꽤나 마음에 듭니다. 그리고 결정적으로 서식 복사를 지원해서 한번 크기를 설정해놓으면 적어도 이번 글에서는 서식 붙여넣기 탁탁 해주면 끝납니다. 물론 기본 너비를 바꾸는 방법 역시 있지만 아무래도 코드를 좀 건드려야 하니 저에게는 쉽지 않았습니다... 할 수는 있는데 저는 좀 불안불안해서...

여튼 가독성은 향상되었지만 대신 글이 전체적으로 뭔가 왼쪽으로 쏠려보이는? 부작용이 생겨서 다소 고민입니다... 더 알아보고 해결해봐야겠지요ㅠ

사진 크기 조정

기존에 저는 사진의 크기를 800px가량으로 맞췄었습니다. 이게 폰으로 찍은 사진들은 보통 크기가 매우 큽니다. 그래서 최적화를 한다고 하더라도 크기도 적절하게 조절해주지 않으면 사이트의 자원을 낭비하는 꼴이 됩니다. 속도가 느려짐은 물론입니다. 그래서 크기를 좀 줄여줬었는데, 가독성 문제도 있고 또 사진 크기가 1200정도가 이상적이라고 하네요. 물론 본인 생각이 조금 다르면 다른 것이니 본인만의 기준만 있으면 크게 문제될 부분은 없을 듯합니다.

2. 글 페이지 표시 부분 수정

이 부분은 영어로 pagination이라고 하는데요, 제 어휘능력이 좀 모잘라서 편의상 글 페이지 표시 부분이라고 적었습니다. 여튼 이 부분이 예전에는 크기도 작고 간격도 좁아서 그냥 신경 안썼다는 느낌을 줘서 크게 눈에 띄는 부분은 아니지만 많이 거슬렸었습니다. 이쪽은 관련 플러그인도 몇개 있어서 다 사용해봤지만 얘네들이 oxygen이랑은 조금 상성이 맞지 않더군요. 아마 일반 테마 쓰시는 분들에게는 문제 없이 돌아갈 듯합니다.

여튼 본래는 배경색같은 것도 넣으려했지만 잘 안되더군요. 다소 수동 방법으로 글씨 크기랑 간격 넓히는 정도로 합의 봤습니다. 이 정도만 되어도 훨씬 보기에 좋아서 매우 맘에 듭니다. 알아봐주는 분들은 적겠지만요...

3. 메뉴 개편

검색창 생성

이번 블로그 개편 내용 중 가장 큰 비중을 차지할 부분입니다. 예전부터 메뉴에 검색창을 넣고 싶었는데 방법을 못찾았었습니다. 제가 쓰는 검색 플러그인은 ajax search pro인데 이 친구가 성능은 맘에 들지만 oxygen이랑 호환 부분이 좀 아쉬웠습니다. 예전에는 사이트 오른쪽에 조그맣게 표시하도록 설정했었지만... 얘가 충돌이 조금...

ivory search 등 나름 여러 플러그인을 찾아보았지만 이 친구 역시 oxygen이랑 잘 안맞았습니다. 아무래도 테마가 없는 컨셉이라서 좋은 점도 있지만 아쉬운 점들 역시 제법 있습니다. 여튼 ajax search pro를 다시 설정해서 숏코드를 이용해서 검색창을 삽입하고, 노가다도 좀 해줘서 길이도 적절하게 맞췄습니다. 모양도 나름 이뻐서 좋지만 얘가 현재 제 사이트 속도를 늦추는 주요 요인이네요... 아마 훗날 제 블로그가 수익이 어느 정도 나게 되면 Jetpack Search를 사용하지 않을까 싶습니다. 이 사이트에서 쓰이는 것처럼 성능이 꽤나 준수해보입니다. 이 워드프레스라는 것이 사용하다보면 몇몇 부분에서 한계가 있다는 것을 느끼는데, 그 대표적인 부분 중 하나가 바로 이 검색 기능입니다.

메뉴의 전반적인 개편

덤으로 메뉴도 스티키 메뉴로 만들었습니다. 위의 검색창 넣는 과정에서 이것저것 만져보면서 알았습니다. 꽤나 쉽게 할 수 있던 것이었는데 왜 진작 안했을까 싶었습니다...

그리고 검색창 생성하는 과정에서 검색창 길이가 더 이상 넓어지지 않아서 결국 기존에 있던 메뉴 자체를 모바일처럼 만들어버렸습니다. 외국에서는 이걸 햄버거 메뉴 이런 식으로 부르던데, 우리나라에서도 그렇게 부를라나요? 이 햄버거 메뉴는 제가 예전부터 생각하던 부분 중 하나였는데, 디자인이 완전히 다듬어진 것은 아니지만 그래도 일단 설정했다는 것 자체에 의의를 둡니다. 나중에 페이지도 더 만들고 블로그 내 콘텐츠가 더 많아진다면 헤더를 이중으로 만든다거나 이런저런 시도를 해볼 수 있을 것 같습니다.

4. 푸터 및 사이드바 등 미세 수정

스마트폰에서의 푸터 아이콘 위치를 살짝 수정했습니다. 이게 아마 실제로 문제가 되는 경우는 드물 것 같습니다. 하지만 Oxygen내에서 테스트를 해보니 화면이 많이 작아지게 되면 소셜 아이콘끼리 서로 붙어버리는 문제가 발생해서...

사이드바는 기존에 쓰던 사이드바 플러그인을 바꿨습니다. 이것 역시 큰 차이는 없는데 개인적으로는 태그 부분을 개선해서 마음에 듭니다. 개인적으로 태그가 막막 모여있는 것을 별로 좋아하지 않거든요(외국에서는 이걸 태그 클라우드라고...). 사이드바 역시 개인적으로 생각하는 이상적인 형태가 있긴 하지만, 이걸 구현하려면 아마 코딩을 할 줄 알아야 할 듯합니다.

덤으로 관련글 플러그인도 수정해줬습니다. 예전에 사용하던 관련글 플러그인도 꽤 괜찮은 녀석이었습니다. 수동으로 관련글을 일일이 지정해줘야하는 어려움(?)이 있었지만 대신 이 친구는 사실상 링크를 넣는 것과 같은 개념이기에 데이터베이스를 건드리지 않아 사이트 속도에 영향을 주지 않았었습니다. 그 부분이 꽤나 마음에 들었었지만 다만 이 친구는 썸네일이 들어가도록 설정해놓으면 사이트가 막 이리저리 튀었었습니다...

그래서 눈물을 머금고 관련글 플러그인을 교체합니다. 예전에 jetpack 관련글 기능을 잠시 썼었는데요, 얘는 썸네일 설정하지 않은 글이랑 연동되면 사이트 모양이 전체적으로 지저분해져서... 지금은 과연 개선이 되었을지 모르겠습니다. 좋은 플러그인이면 사이트 썸네일이 없으면 없는 대로 나와서 사이트의 모양이 지저분해지거나 하는 일은 없어야 할텐데 말이죠. 만약에 지금 쓰는 플러그인이 사이트 속도를 많이 느리게한다면 그냥 제트팩 친구를 쓸 수도 있을 것 같습니다. 커스터마이즈 하는 방법 자체는 나와있어서 조금 만져보면 좋은 결과가 있을지...

5. 블로그 속도 개선

아마 이전 WP Rocket 리뷰에서도 조금 언급했지만 사이트 속도 역시 대폭 상승했습니다. 이런 저런 것들 만진 것도 있지만 역시 웹폰트를 최적화해준 부분이 큽니다. 웹폰트는 CDN없으면 쓰지 말라고 할 정도로 사이트 속도에 큰 악영향을 줍니다. 개선은 잘 되었지만 어째 구글 점수는 아직도 다소 낮네요. 물론 사이트 속도가 느린 이유는 애드센스 등 구글 서비스때문이라는 것은 거의 웹사이트 운영자들은 다 알고 있을 얘기입니다. 구글에서 제공하는 페이지 스피드 측정 도구에서 사이트 가장 느리게 하는 원인이 본인들 구글 애드센스, 구글 태그매니저, 구글 애널리틱스 등 때문이라는... 최근에는 패치되서 나오지 않지만 예전에는 대놓고 위의 서비스들때문에 사이트 속도 느리다고 나왔었습니다. 이건 무슨... 아마 수많은 항의를 받아서 차마 사이트 속도에 영향이 없다고는 못하는 것같고, 본인들의 과오(?)만 숨기는...

여튼 개인적으로는 매우 만족할 만한 정도의 속도가 나옵니다. 위의 검색 부분 등 몇 가지 개선하면 더 빨라질 수도 있겠습니다만, 그래도 일단은 만족합니다. 진짜 순식간에 파파팍 떠서 참 마음에 듭니다.

간만에 블로그 개편을 했지만 이전 개편처럼 블로그 모양을 완전히 바꾸는 수준은 아니었습니다만 개인적으로 미뤄왔었던 부분을 개편했으므로 기분은 상당히 좋습니다. 물론 이로 인한 새로운 과제(?)도 생기게 되고, 그런 부분들도 차차 개선시켜 나가겠습니다.