오랫동안 미루고 미뤄왔던 개인 블로그를 드디어 시작합니다.
여는 글
프론트엔드 개발자로서 언젠가는 개인 블로그나 사이트 하나쯤은 직접 만들어야겠다고 생각해왔습니다.
그동안은 디자인의 벽에 막혀 계속 미뤄왔지만, 요즘 들어 웹 디자인을 조금씩 다루게 되면서 이제는 한 번 만들어볼 수 있겠다는 생각이 들었습니다. 레퍼런스도 충분했고, 완벽하지 않아도 시작하는 게 더 중요하다고 느꼈습니다.
안주하지 말고, 정체되지 말자
올해 초부터 계속 마음속에 두고 있던 문장입니다.
배운 것, 고민한 것, 성장 과정에서 남기고 싶은 것들을 이 공간에 천천히 기록해보려고 합니다.
왜 지금 시작했나
3월부터 참여한 스터디를 계기로 CS나 알고리즘 관련 내용을 블로그에 하나둘 정리하기 시작했습니다.
그런데 글이 늘어날수록 기한에 맞춰 작성하는 일이 우선이 되었고, 자연스럽게 글의 퀄리티나 방향성에 대한 고민이 생겼습니다. 필요 이상으로 남겨지는 글들도 있다는 생각이 들었습니다.
그래서 기존 티스토리를 다시 정비하기보다, 이참에 직접 운영할 수 있는 개인 블로그를 만들어보기로 했습니다.
어떻게 만들었나
시작은 역시 디자인이었습니다.
내가 만든 블로그인데 어딘가 AI가 만든 느낌이 나거나 완성도가 부족하면 결국 글을 쓰는 사람도 오래 머물지 않을 것 같았습니다. 그래서 최소한 깔끔하고 오래 봐도 질리지 않는 디자인을 목표로 잡았습니다.
먼저 피그마에서 타이포와 레이아웃 방향을 정했고, 여러 레퍼런스를 찾아봤습니다. 이번 디자인에서는 cosmos.so의 무드를 많이 참고했습니다. 핀터레스트와는 조금 다른 결이라 오히려 더 좋았습니다.
이후에는 그리드 시스템을 설정하고 와이어프레임을 만든 뒤 바로 코드로 옮기는 방식으로 작업했습니다.
스택은 단순합니다.
- Next.js 16 — App Router 기반 정적 생성
- Tailwind CSS v4 — CSS-first 설정 방식
- MDX — 마크다운 안에서 컴포넌트를 사용할 수 있는 포맷
- gray-matter — 프론트매터 파싱
포스트는 /posts/*.mdx 파일로 관리하고, 빌드 타임에 정적 HTML로 변환됩니다.
별도의 CMS 없이 파일 시스템 자체를 데이터베이스처럼 사용하는 구조입니다. 유지 비용이 들지 않고, 코드와 글을 하나의 리포지토리에서 함께 관리할 수 있다는 점이 마음에 들었습니다.
앞으로의 계획
아직 정해진 주제는 없습니다.
Next.js, TypeScript, Tailwind, TanStack Query처럼 프론트엔드 개발 과정에서 배우는 것들이 중심이 되겠지만, 때로는 기술 밖의 이야기들도 함께 담게 될 것 같습니다.
결국 중요한 건 많이 쓰는 것보다 오래 쓰는 것.
일단 꾸준히 해보려고 합니다.