왜 개인 블로그를 만들었나

글쓰기 외사랑 2n년차, 개발을 하기 전에도 다양한 플랫폼으로 개인적인 기록을 남겨왔다. 개발을 시작하며 모두가 거쳐오는 궤적(벨..., 티...)을 나도 따라왔는데, 이미 만들어진 플랫폼을 쓰는 건 100% 마음을 충족하긴 어려운 것 같다. 무엇보다 그런 플랫폼에서 글을 쓰면 왠지 퇴고를 하다 하다 포스팅을 포기하게 되는 게 큰 숙제였다. 그래서 이 블로그에서는 1. 내가 좋아하는 디자인, 2. 내가 필요한 기능, 3. 내가 하고싶은 이야기를 즐겁게 쓰고, 만들려고 한다.

앞으로의 방향성

이 공간에서는 프로그래밍, 프로필, 개발 관련 사담과 공부에 대한 기록을 다룰 예정이다. 개발과 관련된 기록도 공부 목적과 사담을 분리해서 작성하는 걸 목표로 하고 있고, Home과 Logs로 구분해두었다. 내 프로필은 About에 꾸준히 업데이트 할 예정이다. 현재는 포트폴리오도 피그마 iframe으로 삽입해두었는데, 얼마나 올려둘지는 잘 모르겠다. (꾸준히 업데이트 할 자신이 없다...) 그리고 공부하고 싶은 것들과 자랑하고싶은 프로젝트를 전시하는 Showcase 페이지도 추가 예정이다. 만들다보니 Home이 제일 빈약한 것 같아서 아쉽긴 하지만... 처음부터 잘 만들려다 오픈을 안 하게되는 것보단 초라하게라도 만들어두고 개선하는 게 좋다고 생각한다!

스택 소개 및 회고

블로그는 특성상 초기 로딩 속도와 SEO가 꽤 중요하다 보니, SSR을 지원하는 Gatsby나 Next.js를 많이 선택하는 것 같다. 나 역시 이 두 가지를 고민했고, 그중 Next.js를 선택했다.

사실 Next.js를 아예 처음 써보는 건 아니었다. 회사에서 급하게 필요한 기능을 구현하면서 잠깐 사용해 본 적은 있었지만, 일정에 쫓기다 보니 “왜 이렇게 동작하는지”를 충분히 고민해 볼 여유는 없었다. 말 그대로 써보긴 했지만, 제대로 써봤다고 말하긴 애매한 상태였기 때문에, 이번에는 Next.js를 조금 더 차분하게 다뤄보고 싶다는 생각이 컸다. 블로그라는 비교적 단순한 구조의 서비스라면 렌더링 방식이나 페이지 구조, 성능과 SEO 같은 부분을 직접 실험해 보기에도 좋겠다는 생각이 들었고, 그 과정 자체가 좋은 공부가 될 것 같았다.

디자인은 마음 가는대로 그때그때 만들었는데, 전체적인 디자인 시스템이 있어야 통일감이 있을 것 같아 shadcn을 선택했고, 자연스럽게 tailwind와 heroicon을 사용하게 됐다. 디자인 시스템이나 아코디언같은 ui 컴포넌트를 사용할 때는 정말 만족감이 크지만, shadcn으로 만든 서비스는 다 비슷한 느낌이 있긴 하다. (그런 지적이 많아서인지 다가오는 메이저 업데이트에서는 디자인 시스템을 개편한다고 한다.) css 라이브러리도 tailwind는 사용할만큼 사용해본 것 같아서 다음에는 pandaCSS를 사용해보고 싶다.

Tailwind를 쓰면서 빠르게 스타일을 잡을 수 있다는 점은 분명 장점이었다. 다만 프로젝트 규모가 커질수록 클래스가 점점 길어지고, JSX 안에 스타일 관련 코드가 계속 쌓이면서 가독성이 떨어진다는 느낌을 받았다. 컴포넌트의 역할과 스타일이 한 파일 안에서 뒤섞이는 구조도 개인적으로는 조금 아쉽게 느껴졌다.

PandaCSS는 예전에 자주 사용했던 emotion처럼 스타일을 코드 단위로 정의할 수 있으면서도, 런타임이 아닌 빌드 타임에 CSS를 생성하는 방식을 사용한다고 해서 관심이 간다. 런타임 스타일 생성이나 JIT 방식에서 오는 부담 없이, 좀 더 예측 가능한 스타일 구조를 가져갈 수 있을 것 같다.

Vercel Analytics와 code rabbit은 이번에 처음 써봤는데, 사용 경험이 매우 좋았다. 이번 프로젝트에서는 Vercel Analytics를 처음 사용해봤는데, 생각보다 사용 경험이 굉장히 좋았다. 원래는 예전에 노션 블로그를 운영할 때처럼 GA로 유입 지표를 확인하려고 했는데, Vercel에 기본으로 제공되는 analytics 기능이 워낙 간결하게 잘 설계되어 있어서 굳이 다른 도구를 붙일 필요가 없겠다는 생각이 들었다. 이 정도의 정보를 제공하는데, 대시보드도 직관적이고 배포하면서 같이 확인할 수 있어서 관리하기 편하다. GA가 더 많은 기능을 제공하긴 해서, 조금 더 써보고 추가적인 기능이 필요하면 옮겨가려고 한다.

• giscus때문에 레포를 공개로 돌렸더니 갑자기 방문 수가 늘었다...! 마지막으로 봤을 때 4명이었는데? 다섯 분... 댓글 남기고 가시란 말이에요

code rabbit은 워낙 간증이 많은 AI 코드 리뷰 서비스라 한번 써봐야겠다 생각하고 있다가 이번 기회에 한 번 써보기로 했다. 실제로 PR 단위로 코드를 읽고 코멘트를 남겨주는 흐름이 꽤 자연스러웠고, 반응형이나 테일윈드 클래스 오타 등 사소하지만 놓치기 쉬운 부분들을 짚어주는 점이 인상적이었다. (심지어 포스트 내용을 읽고 빈 부분까지 짚어준다...!) 혼자 진행하는 프로젝트이다 보니 코드 리뷰가 비어 있는 느낌이 들 때도 있었는데, 그런 부분을 어느 정도 보완해주는 도구로는 충분히 의미가 있다고 느꼈다.

ps. 이 블로그를 볼 사람이 몇이나 될지 모르지만, 혹시나 댓글을 달까말까 고민하는 사람이 있다면 피드백이든 질문이든 뭐든 좋으니 댓글 남겨주세요 ... 🫶🏻