블로그 구축기

블로그를 만든 이유

왜인지는 모르겠지만, 어렸을 때부터 블로그를 썼었다. 그때는 즐겨하던 게임 공략을 네이버 블로그에 작성했었다. 방문자 수가 올라가던 걸 보면서 글을 더 잘 쓰고, 사람들이 찾고 싶어 하는 내용을 작성하고 싶다는 생각이 강했다.

그다음에는 개발자 이전에 취준할 때 공부한 내용을 티스토리에 정리했었고, 개발자로 전향 후에는 JBee님이 만들어주신 gatsby-starter-bee로 블로그를 만들었다.

그러다 보니 알게 모르게 '나도 언젠가는 나만의 블로그를 만들어야지'라는 목표가 생겼고, 이번에 드디어 이루었다.

구축 기간

사실 예전에도 블로그 만들기를 여러 번 시도했었다. 티스토리를 사용할 때는 워드프레스로 시도했으나 결국 실패했고, 작년에는 프로젝트 초기 세팅만 하다가 어떻게 만들어야 할까만 고민하다 삭제했었다.

이는 모두 내가 어떤 블로그를 원하는지에 대한 생각이 불충분했다고 판단했다. 그래서 사용했던 블로그들의 좋았던 점들이나 아쉬웠던 점들, 평소에 봤던 페이지 중에서 내가 좋아하는 포인트들을 수시로 메모했다.

그 덕분인지, 한 달가량 작업했더니 완성할 수 있었다.

그렇다고 여유롭진 않았다. 퇴근하고 작업하니 피곤한 적도 많았고, 8월은 유독 약속이 많았던 달이었다. 그리고 무엇보다 올해 런칭해야 하는 프로젝트가 생겨서, 블로그는 무조건 이번 추석에 배포해야겠다는 생각이 들어서, 어떻게 보면 반강제적으로 한 달이라는 시간이 주어졌다.

기술 스택 선정 이유

해당 블로그는 Next.js, styled-components, next-mdx-remote를 사용했다.

블로그 구축할 때 Jekyll나 Gatsby를 많이 사용하는 거로 알고 있다. 그러나 필자는 현업에서 대부분 React, Next.js를 사용해왔고, 이 기술들이 이제는 어느 정도 안정기(?)가 아닐까 하는 생각을 감히 했다. 그리고 아직 현업에서 Next.js로 SEO를 처음부터 끝까지 해본 적이 없어서 도전해보고 싶었다.

스타일의 경우, 개인적으로 CSS 모듈보다 CSS-in-JS를 더 선호해서 주저없이 styled-components를 사용했다. 하지만 다크모드 구축할 때의 불편함을 미리 알았더라면 CSS 모듈도 고려했을 것 같다.

mdx 관련 라이브러리를 고를 때 고민을 많이 했다. 결국 유명한 라이브러리를 하나하나 사용해보면서 가장 편했던 것을 골랐다. next-mdx-remote가 작년까지는 mdx v1만 지원했지만, 올해 2월에 v2를 지원하면서부터 딱히 불편한 점은 없었다.

어려웠던 점

디자인

가장 어려웠던 것은 바로 디자인이다.

가령 가로 폭을 어느 정도로 잡을지, 어느 테마에서든 오래 봐도 눈이 피로하지 않은 색상으로 만들고 싶었다. 기본 텍스트 색상 외에 다른 어떤 색상이 눈에 잘 보이면서도 이질감이 없을지 등등, 가장 많은 고민과 시간을 투자했다.

초반에는 색상을 여러 개 추가했다가, 거의 다 제거하고 최대한 단순화했다. 그래서 지금은 약간 밋밋한 느낌도 없잖아 있다.

특히 다크모드를 구현할 때 이에 매칭되는 색상이 어떤 걸로 정할지 고민을 엄청나게 했다. Color Contrast 사이트를 사용했지만, 이상하게 점수가 높은 색상을 적용하면 폰트 색상이 묻히거나 배경 색상이 이상해져서, 최대한 중간 타협점을 찾아서 수정했다. 물론 내 눈에만 이상했던 걸 수도 있지만.. 나중에 더 좋은 색상을 찾으면 바꿀 것 같다.

어느 정도 틀이 잡힌 후에 회사 디자이너분에게 간단한 피드백을 요청드렸고, 덕분에 훨씬 좋아진 것 같다. (그렇지만 그때 말씀해주신 건 다 적용 못 했어요.. 나중에 천천히 할게요...ㅠㅠ)

md와 mdx

필자는 md와 mdx를 모두 사용할 수 있게 만들고 싶었다.

md는 이전 블로그를 md로 작성한 이유가 (가장) 컸지만, 블로그를 작성하는 대부분의 사람은 다른 곳에서 마크다운으로 작성한 문서를 그대로 복붙해서 가져오고 있는 것 같아서 유지하기로 했다.

하지만 JSX 문법으로 작성할 수 있는 mdx의 유혹도 상당했다. JSX 문법을 활용한다면 나중에 더 다양한 컴포넌트를 추가할 수 있기 때문에 절대 놓치고 싶지 않았다. 특히 작성한 코드 블럭을 보여주기 위해 code sandbox나 codepen에 작성한 후 그걸 iframe으로 가져 왔었는데, 너무 불편해서 어떻게든 줄이고 싶었다. 나중에는 이러한 playground 컴포넌트를 만들어서 템플릿에 내제화하고 싶다.

무튼 이 두 개의 확장자를 모두 지원하고 싶다보니 파일을 불러올때 어떤 확장자인지 판별하는 구문이나, format 해주는 곳 등 신경써야 하는 곳이 많았다. mdx-bundler는 이상하게 md 파일인지 인지하지 못해서 열지 못하는 문제가 있었다. 물론 next-mdx-remote도 불편하진 않지만, 다른 라이브러리들을 완벽하게 사용해보지 못해서 아쉽다.

Code block

개발 블로그이기 때문에 code block에 신경을 많이 썼다.

처음에는 React Syntax Highlighter를 사용했었다.

그런데 특정 줄을 하이라이팅하는 기능과 이렇게 작성한 코드와 code block을 구분하는 로직을 짤 때 '이게 맞나?' 싶을 정도로 조잡해졌었는데, 설상가상 내가 원하던 기능이 없었다.

가장 큰 이유는 해당 코드 블럭의 제목을 넣어줄 수 없다는 점이다. 이전 블로그에서는 해당 코드의 파일명이나 위치를 표기해주기 위해 코드 블럭 상단에 span 태그로 작성해주었는데, 이게 생각보다 귀찮았다. 특히 코드가 많이 나오는 곳에서는 더더욱 그랬다.

// 예전 방식
<span className="file-location">_app.tsx</span>

```tsx
// ... 생략
```

두 번째로는 코드를 복사 & 붙여넣기 하는 기능을 원했다.

그래서 그냥 remark, rehype로 다시 구축하기로 결심했다.

remark는 markdown을 변환해주는 플러그인이고, rehype는 HTML을 변환해주는 플러그인이다. 전체 플러그인은 remark/plugins, rehype/plugins에서 확인할 수 있다.

그리하여 아래처럼 원하는 모양을 만들 수 있었다.

const name = 'MJ Kim';

const helloThere = (name) => {
  return `Howdy, ${name}`;
};

helloThere(name);

그런데 제목 부분 눈에 잘 띄지 않는 것 같아 수정해야겠다...

다크모드

사실 이번에 다크모드까지 작업할 생각은 없었다. 그러다 점점 내가 목표했던 배포일이 다가오자, 이왕 배포할 거 같이 하자는 욕심이 들어서 급하게 추가했다.

그런데 styled-component의 ThemeProvider로 다크모드를 판단하자니, 처음에 라이트모드였다가 다크모드로 변경되는 그 1초가 너무 보기 싫었다. 그러한 유저 경험을 주는 블로그라면 내가 생각해도 싫을 것 같았다.

이런 저런 방법을 강구하다 결국 CSS variable을 선택했다. 이럴 줄 알았다면 처음에 CSS 모듈을 생각했을 텐데.. 역시 해보지 않으면 모르는 구나를 다시 한번 깨달았다. 다행히 이때 색상을 거의 통일해놔서 변경할 부분은 많지 않았다.

그리고 다크모드 구현이 끝난 줄 알았지만, utterances(댓글 컴포넌트)의 테마가 같이 변경되지 않았다. 여기저기 레퍼런스를 찾아봤지만 원하던 결과가 나오지 않아, 결국 테마를 토글할 때 utterances의 색상을 변경하는 로직을 넣어주었다. 이 부분도 수정하고 싶다. (utterances는 Github Repo가 public이어야 사용 가능해서 당분간은 사용 안할 예정이다)

SEO

역시 생각처럼 쉽지 않았다. 그리고 OG Tag는 배포한 후에야 여러 플랫폼에서 결과가 제대로 나오는지 확인할 수 있었기 때문에 꽤나 번거로웠다.

그리고 글의 description에 어떤 내용을 보여줄지 summary의 유무에 따른 경우의 수 등을 생각하다보니 수정해야 할 곳이 많았다. 그리고 icon이 안나왔던 문제도 있어서 여러 메타 태그들을 찾아봤었다.

블로그 페이지 테스트

글 시도 1

글 시도 2

커스텀 컴포넌트

이것도 어찌 보면 디자인과 연결되어 있는데, 컨텐츠의 요소들의 스타일 오버라이딩을 해주고 싶은 것들을 모두 컴포넌트로 만들었다.

그중에서도 텍스트들의 행간과 크기를 정하는 것이 가장 어려웠다. 텍스트들이 가장 많은 페이지인데, 어떻게 하면 덜 답답하고 글이 잘 읽히게 스타일링 할 수 있을까.. 여전히 진행중인 고민이다.

예상치 못했던 문제

위의 문제들을 어느 정도 해결하고 나니 이제 배포해도 되겠다는 생각이 들었다.

그래서 이전의 글을 새로운 블로그 Repo로 옮겨왔더니, 예상하지 못한 문제가 발생했다.

마크다운이 다 해주는 게 아니었다

필자가 자주 사용했던 마크다운에서는 모두 HTML 태그들을 사용해서 마크다운 단에서 지원해주는 기능인 줄 알았다.

하지만 알고 보니 마크다운은 특정 형식들만 인식해서 이를 파싱해줄 뿐, 그 외의 것들은 모두 변환하는 작업이 필요했다. 역시 당연한 것은 없었다.

왜 블로그를 만들 때 Gatsby를 사용하는지도 이때 알았다. 지원해주는 플러그인이 아주 많다. 살짝 후회하긴 했다..

아직 원하는 기능을 모두 추가하지 못했다. 하지만 올해 배포를 못 하면 또 영영 못할 것만 같은 느낌이 들어서 우선 만든 부분까지만 배포하기로 했다. 이 때문에 아직 도메인도 옮기지 못했고, 이전 글들도 옮겨오지 못했다..🥲

전반적으로 remark, rehype 부분은 조금 더 깊게 공부하고 수정해야 할 것 같다.

템플릿 공개 연기

원래 howdy-nextjs-starter라는 템플릿으로 오픈하려고 했었다. 무리하게 일정을 잡은 것도 템플릿 공개 때문이었다.

그런데 첫 글을 작성하고 있는 지금, 자잘한 버그들과 부족한 부분 그리고 수정이 필요한 부분들이 너무 많다. 올해는 혼자 사용해보면서 보완 및 수정하고, 올해 말이나 내년 초쯤에 public으로 돌려놓을 예정이다.

아직 버전 0.1.0인데 올해 말에 1.0.0이 되길 기대해본다.

그 외...

분명 로컬에서 할 때는 잘 나왔는데, 배포하고 확인해보니 이상하게 보이는 곳들이 종종 보였다.

만약 블로그를 구축하시는 분이 계신다면 중간중간 배포해서 빌드된 결과물이 로컬과 동일하게 나오는지 확인하는 걸 추천한다.

마무리

구축한 한 달 동안 힘들었지만, 늘 생각해오던 목표 중 하나를 이루어서 무척이나 보람찼다.

아직 많이 부족해서 템플릿으로 공개는 못 했지만, 빠른 시일 내에 공개할 수 있도록 열심히 다듬어야겠다.

(하나 아쉬운 점이 있다면, Gatsby로 만든 블로그의 SEO가 정말 잘 되고 있어서 갈아타기 무척이나 아쉽다.)