새로운 블로그 개설기

새로운 블로그를 개설했다.

기존에는 jekyll + github page를 이용한 블로그를 사용하고 있었는데, gatsby도 사용해봤지만 역시 정적 블로그로는 내가 원하는 기능들을 전부 보여주기 힘들었다. 새로 만드는 블로그는 여러가지 내 니즈를 충족시킬 수 있는 플랫폼으로 만들기로 했다.

시작

일단 프로젝트를 시작하기 전 내가 원하는 기능들을 정리해봤다.

• Responsive Design
• 멋진 index 페이지 (진짜 멋짐!)
• 위젯
  • 현재 내가 듣고 있는 노래 표시
  • hit counter
• 방명록
• 인터랙티브 포스트

인터랙티브 포스트는 이전부터 해보고 싶었는데 이번 기회에 해보기로 했다. 물론 막상 이걸 잘 이용해서 포스트를 작성할진 모르겠다. 기존 블로그도 잘 굴러가는데 뭘

블로그는 많이 써오던 nextjs에 tailwindcss로 개발하기로 했다. nextjs와 tailwindcss는 꽤 익숙하면서 빠르게 프로토타이핑할 수 있고, 쓸데없는 보일러플레이트 코드가 최소화되는데에 스트레스가 덜했다. 또 나처럼 야매로 프론트를 하는 입장에서는 이거만큼 적당히 작업할 수 있는게 없다.

디자인

사실 디자인 가지고 오래 이야기할 것도 없지만.. 일단 꽤 애먹었다. 적당히 aesthetic하지만, 블로그 자체의 가독성도 좋아야 하고 모바일에서도 잘 보여야 한다.

처음에는 outline만 잡아서 레이아웃을 만들다 어쩌다 보니 우연히 지금처럼 DOS인 듯? 한 적당히 이쁜 디자인이 나와 마음에 들게 되었다. 친구의 말을 빌리자면 레트로의 재해석인가 뭔가 한다던데 꽤 그럴싸하게 나왔다.

Music Widget

현재 내가 재생중인 음악을 걸어두고 싶었다. 사실 이건 꽤 오래전부터 가지고 있었던 니즈였고, github-now 라는 프로젝트 역시 진행했었다.

github-now를 조금만 수정해서 듣고 있는 노래가 바뀔때마다 db에 저장하고, 그걸 실시간으로 불러오는 방식을 사용했다.

지금은 ping을 보내는 방식으로 구현했는데, 웹소켓 방식으로 바꾸고 싶다는 생각이 들면서도? 웹소켓 고장나는걸 생각하면 굳이 싶기도 하고... 근데 막상 지금도 어어엄청 오래 지나면 고장나긴 하고... 그런 생각이다.

Hit Counter

조회수, hit counter와 방문자 수, 그리고 현재 접속자 수를 표시하고 싶었다. 사용자는 매 틱마다 핑을 보내고, 서버에서 적당한 ttl로 redis에 저장하고 keys로 가져와 길이를 구하는 방식으로 구현했다.

keys는 사용하지 말라고 했지만 이런 조그맣고 귀여운 환경에서는 괜찮을지도?

포스트

인터랙티브한 컴포넌트를 추가할 수 있는 플랫폼을 만드는게 핵심이다. 그렇다고 코드로 블로그를 작성하기는 싫었다. 그렇게 찾은게 MDX였는데, 마크다운 기반에 react 컴포넌트를 인젝션해서 사용할 수 있어 괜찮아 보였다. 물론 생각했던 포스트 내에서 변수 선언, 인라인 js 코드 같은건 안되서 아쉽고 매번 컴포넌트를 포스트 바깥에서 추가해야하는 점이 굉장히 마음에 안들지만 그래도 nextjs에서 공식 지원하고 제일 괜찮은 방법이라 생각한다.

다음처럼 컴포넌트를 추가해두면 사용할 수 있다.

mdx 안에서 tailwindcss도 사용가능하다. mdxc같이 변수를 선언할 수 있는 mdx 확장이 있긴 한데 신뢰할 수 없어서 애매하다. 컴포넌트를 추가하거나 조금 더 빠르게 executable한 무언가를 만들 수 있는 방법을 생각해봐야겠다.

앞으로

이 웹사이트는 완전 개인적인 욕심으로 만들어서 대외용으로 자랑할만한 블로그 포스트보다는 일상적인 무언가를 적고 대부분 쓸데없지만 멋있는 것들로 채우고 싶다. 지금 가장 하고 싶은건 마인크래프트 뭐시기 위젯을 만들고 싶다.