Hugo로 테마부터 직접 블로그 만들기

알고리즘 공부를 하던 중 공부 내용을 정리할 블로그가 있으면 좋겠다는 생각이 들었다. 나만의 공간을 만드는 김에 특정 서비스에 종속되지 않은 블로그를 직접 만들어 보자는 생각을 했다.

이 글은 튜토리얼보다는 후기에 가깝다.

Hugo를 선택한 이유

Hugo와 static site generator(SSG)가 무엇인지는 IALY’s blog의 블로그 구축기에 잘 설명되어있다.

블로그를 만들기로 하고 난 후 일단 무엇을 써서 블로그를 운영할지 선택해야 했다. 네이버 블로그부터 Tistory, Blogger, Wordpress, 그리고 Hugo, Jekyll, Gatsby 같은 정적 사이트 생성기들까지 수많은 선택지가 있어서 결정하기 어려웠다.

네이버 블로그, 티스토리, 블로거는 블로그를 만들기 쉽고 컨텐츠에 집중할 수 있다는 장점이 있다. 주변의 한 분은 블로그에서 결국 중요한 점은 콘텐츠니 블로그를 구축하는 게 허들이 될 것 같다면 티스토리나 블로거를 쓰는걸 추천한다고 조언하셨다. 물론 맞는 말이지만 특정 서비스에 종속되지 않은 나만의 공간을 만들고 싶다는 생각에 다른 선택지로도 눈을 돌리게 되었다.

그렇게 첫 단계에서 며칠을 고민하던 중 주변 한 친구가 이런 이야기를 해줬다. 요즘은 CMS든 SSG든 잘 만들어져 있으니 무엇을 선택하든 충분히 만족하면서 쓰게 될 것이고, 동시에 무엇을 선택하든 완벽히 만족하면서 쓸 수는 없을 것이라고.

이 말을 듣고 더는 고민하지 않고 주변에서 많이 쓰는 휴고를 골랐다. 나중에 다른 SSG로 옮기든, 바닥부터 완전히 직접 다시 만들게 되든, 그것은 미래의 나에게 맡겼다.

테마의 딜레마

휴고를 사용하기로 하고 마음에 드는 테마를 또 며칠을 고민하며 고른 후 customizing을 시작했다. 중간에 테마를 바꾸기도 하고, 결국 2주 정도 후 겉으로 보기엔 그럴듯한 블로그를 완성했다. 그런데 뭔가 어긋난 듯한 느낌을 지울 수가 없었다.

1. 이미 완성된 테마에서 원치 않는 부분을 지우고 원하는 부분을 욱여넣다 보니 구조가 번잡스러워졌다. 사실 이 부분은 내가 코딩을 잘 못 해서 그런 것일 수도 있다.

2. 아무리 커스터마이징을 해도 나와 같은 테마를 적용한 블로그를 들어가면 내 블로그와 비슷해 보여, 내 블로그가 나만의 공간이라는 느낌이 들지 않았다. 물론 기본 구조와 색감까지 커스터마이징 할 수도 있지만, 그럴 바에는 처음부터 직접 만드는 게 낫지 않겠는가?

3. 나만의 공간을 만들고 싶어서 만들기 시작한 프로젝트인 만큼, 조금 투박할지언정 전체적인 코드를 이해할 수 있었으면 좋겠다는 생각이 들었다.

그렇게 거의 완성된 블로그를 버리고 다시 테마부터 직접 만들어보기로 했다.

직접 만들기

군대 업무 때문에 아주 간단한 HTML, CSS, JS를 할 줄 알기는 했지만, 프론트엔드와는 거리가 먼 삶을 살아온 나로서는 테마를 직접 만들기가 막막했다. 그래도 이번 기회에 웹의 세계에 발이라도 담가보자는 마음가짐으로 공부를 시작했다. 다행히 내 블로그에 들어갔으면 하는 기능들이 그렇게 복잡하지 않았고, 휴고의 강력한 Go template 기능이 있어 큰 어려움 없이 테마를 완성할 수 있었다.

• Päkstech의 Blog with Hugo 시리즈가 기본적인 테마 직접 만들기를 아주 잘 설명해놓았다. 특히 코드의 원리도 설명해주며 진행되는 점이 아주 마음에 들었다. 이 시리즈에 나온 대로 테마를 따라 만들며 휴고의 동작 방식을 이해하고, 이후 원하는 대로 테마를 수정하는 방향으로 진행하였다.

• Blog with Hugo 시리즈에 나온 내용을 따라 Bulma라는 오픈 소스 CSS framework를 사용했다. Bootstrap이나 다른 CSS framework를 사용해본 적이 없어서 Bulma와 비교할 수는 없지만, Bulma를 사용해본 개인적 후기는 긍정적이다. 처음으로 웹을 만들어보는 입장에서 모바일을 동시에 지원하는 반응형 디자인을 만들자니 막막했는데 Bulma가 큰 도움을 주었다.

• Bulma의 주요 component인 columns가 flexbox를 가지고 만들어졌기 때문에, 이 기능을 원하는 대로 사용하기 위해 flexbox를 공부해야 했다. 1분코딩의 “이번에야말로 CSS Flex를 익혀보자”가 주요 개념들을 잘 설명해 놓았다.

• Bulma를 customize하기위해 Sass를 처음으로 알게 되었고 아주 약간의 사용법을 배우게 되었다. Sass(SCSS)는 CSS를 코딩하듯이 작성한 후 CSS로 컴파일해서 사용할 수 있게 해주는 CSS preprocessor이다. 이번에는 필요한 기능만 검색해 썼지만, 다음에 더 공부하고 싶다.

• Hugo는 templating를 위해 Go template 언어를 사용하는데, 적어도 내가 테마를 만드는데 필요한 수준에서는 별로 어렵지 않았다. 테마를 완성하고 나서도 내가 Go를 공부했다는 느낌은 없었다.

• UX, UI가 어렵다는 것을 새삼 느꼈다. 게임을 만들 때도 가장 어렵고 지루하다고 느껴 제일 대충 때우던 부분이 UI였다. 블로그를 만들기 전에는 블로그는 못생겼더라도 실용성만 있으면 된다고 생각했지만, 막상 테마를 만들다 보니 디자인에 집착하게 되었다. 어차피 디자인에 대해선 잘 모르니 최대한 내 마음이 가는 쪽으로 만들었다.

• 상단 내비게이션 바의 햄버거 메뉴를 빼면 JS를 전혀 쓰지 않았다. JS는 이미 적힌 코드를 읽을 수는 있지만 직접 긴 코드를 짜본 적은 없다. 다음에 다크 모드를 추가하게 된다면 조금 더 공부하게 될지도 모르겠다.

• 항상 웹은 내 적성과 맞지 않고 재미도 없다고 생각했는데, 이렇게 블로그를 만들면서 맛을 살짝 보니 생각보다 재미있었다. 또 Bulma를 쓰면서 HTML, CSS 디자인 패턴에 대해서 약간의 이해를 할 수 있게 되었다. 다음에 또 웹을 만들게 되거나 테마를 크게 수정하게 되면 조금 더 자신 있게 시작할 수 있을 것 같다.

이후 추가할 (수도 있는) 것들

테마를 만드는 기간이 길어지면서, 이렇게 가다간 첫 글을 쓰기도 전에 지쳐버릴지도 모른다고 생각했다. 그래서 원래 계획했던 요소 중 꼭 필요하지 않은 것들은 나중에, 블로그에 제대로 된 글들이 생기고 나서 추가하기로 했다. 언젠가 테마를 2.0으로 업그레이드 한다면 추가할 것들은 다음과 같다.

1. 다크 모드
2. 검색 기능
3. 다중 언어

마무리

블로그를 만들자고 생각한 지 거의 한 달 반 만에 첫 글을 완성했다. 중간중간 그냥 티스토리나 쓸걸… 하고 후회한 적도 몇 번 있지만 완성된 블로그를 보니 뿌듯한 기분이 든다. 열심히 만들어놓은 블로그인데 폐허로 남지 않게 부지런히 글을 적을 수 있는 내가 되었으면 하는 바람이다.