Blogger 테마 마개조하기

지금 보고 있는 이 블로그.
Google의 구려터진 Blogger로 동작하고 있다면
당신은 믿으시겠습니까...!?

기존에 운영하던 블로그는 국산 CMS, Rhymix를 사용해서 만들었던 블로그였다. 하지만 제로보드와 XE의 계보를 이어온 CMS답게, 커뮤니티에는 적당하나 나 혼자 글 올리는 블로그로 운영하기에는 기능이 너무 많고 무겁다고 판단했다.

글 하나 올리려고 들어갔는데 관리할 것은 왜 이렇게 많은 건지.
나는 그냥 글을 쓰고 싶었을 뿐인데...

Tistory나 velog 같은 다양한 플랫폼이 있기는 하지만, Tistory는 뭔가 최근 이런저런 이야기가 많아 보이고, velog는 내 입맛대로 커스터마이징이 너무 안 되는 것 같다는 결론에 도달했다.

그러다 보니 찾은 게 Blogger.
사실 얘는 더 자유도가 없다.

적어도 기본으로 제공되는 설정 화면만 보고 있으면 그렇다.
테마도 뭔가... 내가 생각하던 블로그의 모습과는 거리가 좀 있다. 관리 화면까지 보고 있으면 지금이 몇 년인지 잠깐 헷갈리기도 하고.

그런데 얘한테는 한 가지 재미있는 기능이 있었다.
테마의 HTML을 직접 수정할 수 있다는 것.

CSS도 넣을 수 있고, JavaScript도 넣을 수 있다.
그러면 뭐... 생긴 건 어떻게든 바꿀 수 있지 않을까?

그렇게 시작했다.
블로그를 옮기려고 했는데 어느새 블로그 테마를 만들고 있었다.

우선 전체적인 디자인은 내 포트폴리오와 비슷하게 맞추고 싶었다. 같은 사람이 운영하는 사이트인데, 한쪽은 요즘 사이트처럼 생겼고 다른 한쪽은 인터넷 박물관처럼 생겨 있으면 조금 그렇잖아...

글자 크기와 간격부터 버튼, 카드, 메뉴까지 하나씩 손봤다. 모바일에서도 글이 편하게 읽히도록 하고, 다크 모드도 넣었다.

다크 모드 버튼만 달면 끝인 줄 알았는데 그것도 아니었다.
페이지는 어두운데 로딩 화면이 새하얗게 나오면, 밤에 글 하나 읽으려다 눈부터 공격당한다.

그래서 로딩 화면도 테마를 따라가도록 바꿨다. 사소해 보이는데 막상 직접 쓰다 보면 이런 게 계속 눈에 들어온다.

이미지도 마찬가지였다. 글에 들어 있는 이미지를 처음부터 전부 불러올 필요는 없으니까, 아래쪽 이미지는 가까이 스크롤했을 때 불러오도록 했다.

그런데 이미지가 늦게 뜨는 것만 생각하면 안 됐다. 사진이 나타날 때마다 읽고 있던 문장이 아래로 밀려버리면 그것도 상당히 킹받기 때문... 이미지가 들어갈 자리도 미리 잡아주도록 손봤다.

개발 관련 글도 올릴 생각이라 코드 블록에도 이것저것 붙였다.

코드를 읽기 좋게 색칠해 주고, 줄 번호를 표시하고, 복사 버튼도 달았다. 긴 코드는 접어둘 수 있게 하고, 파일이 여러 개면 탭으로 나눠서 볼 수 있게 했다.

운영체제마다 명령어가 다른 경우도 있으니까 Windows, macOS, Linux 탭도 만들었다.
글 쓰는 입장에서 같은 설명을 세 번 반복하는 것도 좀 그렇고, 읽는 사람도 자기한테 필요한 것만 보면 좋으니까.

제목을 넣으면 목차가 생기고, 이미지를 누르면 크게 볼 수 있게 했다. 수식이나 다이어그램도 글 안에 넣을 수 있도록 해뒀다.

이쯤 되면 슬슬 생각이 든다.
아까는 기능이 너무 많아서 옮긴다고 하지 않았나...?

그렇긴 한데, 이건 내가 쓰고 싶은 기능이라 괜찮다.
아무튼 그렇다.

그리고 글을 읽다가 링크가 나오면, 그게 무슨 페이지인지 잠깐 보고 싶을 때가 있다. 궁금해서 눌렀다가 새 탭만 잔뜩 늘어나는 경우도 있고.

그래서 본문에 있는 링크에 마우스를 잠시 올려두면 연결된 페이지의 제목과 설명, 대표 이미지를 보여주도록 했다.

그냥 다른 블로그 글을 추천하는 기능 말고, 문장 중간에 들어 있는 외부 사이트 링크 자체를 미리 보는 기능이다. GitHub 링크면 어떤 저장소인지, 공식 홈페이지 링크면 어떤 사이트인지 대충 보고 넘어갈 수 있다.

물론 모든 사이트가 이런 정보를 잘 주는 것은 아니다. 로그인부터 요구하거나 미리보기 정보를 제대로 제공하지 않는 곳도 있어서, 그런 경우에는 링크 이름과 주소를 보여주도록 했다.

링크마다 페이지를 열자마자 정보를 가져오면 블로그가 또 무거워질 것 같아서, 실제로 마우스를 올렸을 때만 불러오고 한 번 가져온 정보는 저장해 둔다.

여기까지 읽으면 이게 정말 Blogger 안에서 전부 돌아가는 건지 궁금할 수도 있다.

글을 작성하고 저장하고 발행하는 것은 Blogger가 담당한다. 방문자에게 보이는 화면은 직접 만든 테마가 담당하고, 외부 링크의 미리보기 정보를 가져오는 것처럼 서버가 필요한 부분은 기존에 쓰던 서버에 따로 붙였다.

그러니까 Google한테 글 보관과 발행을 맡겨두고, 내가 마음에 안 드는 부분은 바깥에서 하나씩 덧붙인 셈이다.

테마를 고치는 과정이 아주 쾌적했냐고 하면... 그건 아니다. Blogger 테마는 XML 형식이라 그 구조에 맞춰줘야 하고, 평소 웹사이트 만들 때처럼 생각하고 넣었다가 걸리는 부분도 있다.

그래서 HTML, CSS, JavaScript는 따로 나눠서 관리하고, 마지막에 Blogger에 올릴 XML 파일로 합치도록 했다. 긴 파일 하나를 열어놓고 계속 수정하는 것보다는 이쪽이 훨씬 낫다.

관리 화면의 생김새까지 바꿀 수 있는 건 아니니까, 글 쓰러 들어갈 때마다 다시 Blogger라는 현실로 돌아오기는 한다.

그래도 밖에서 보이는 모습은 꽤 마음에 든다.
적어도 이제는 내가 만든 다른 사이트들이랑 같이 놓아도 혼자 다른 시대에서 온 것처럼 보이지는 않는다.

글이나 편하게 올리려고 옮겼는데, 정작 글보다 블로그를 고치는 데 시간을 더 쓴 것 같다.

이제 진짜 글 써야지.
...라고 생각하면서 방금도 버튼 하나를 고쳤다.

댓글 0