Next.js
프레임워크를 고를 때 가장 먼저 고려한 건 렌더링 전략과 생태계였습니다. React 단독으로는 CSR(Client Side Rendering) 위주라 SEO나 초기 로딩 속도에서 아쉬움이 컸습니다.
Next.js는 기본적으로 SSG(Static Site Generation), SSR(Server Side Rendering) 을 지원해 페이지 성격에 따라 적절히 렌더링 방식을 선택할 수 있습니다.
정적 페이지는 빌드 타임에 생성해 빠르게 보여주고, 데이터가 자주 바뀌는 페이지는 SSR로 실시간 반영. 이 조합이 블로그 같은 정적 페이지 프로젝트에 잘 맞았습니다.
TailwindCSS
스타일링은 고민할 필요도 없이 Tailwind였습니다.
-
클래스 유틸리티 기반이라 빠르게 UI를 생성
-
별도의 CSS 파일을 관리할 필요가 없음
-
무엇보다 내가 가장 익숙한 CSS 프레임워크였고, DaisyUI와의 궁합도 훌륭했습니다.
디자인 시스템을 잡기 전에도 프로토타입을 빠르게 만들어볼 수 있다는 점에서 큰 장점이 있었습니다.
DaisyUI
Tailwind만 쓰면 버튼이나 모달 같은 컴포넌트를 직접 만들어야 한다. DaisyUI는 이 빈틈을 메우는, Tailwind와 자연스럽게 어울리는 UI 라이브러리입니다.
- 기본 컴포넌트를 Tailwind 스타일 그대로 즉시 사용 가능
- 테마 지원이 강력해 다크모드나 커스텀 테마 교체가 쉬움
- Tailwind와 100% 호환 → 러닝 커브가 거의 없음
물론 shadcn/ui 같은 대안도 있다. shadcn은 Radix 기반이라 접근성이 뛰어나고, 컴포넌트를 직접 코드에 들여와 관리하는 구조라 커스터마이징에 강했습니다. 하지만 이번 프로젝트에서는 빠른 개발 속도와 적당한 디자인 일관성이 우선이었고
DaisyUI는 설치만 하면 바로 테마와 컴포넌트를 활용할 수 있어 초기 개발 단계에 최적이었습니다.
MDX
마크다운만으로는 아쉬웠던 점
블로그 포스팅은 보통 마크다운으로 작성합니다. 간단하고 직관적이지만, 커스텀 컴포넌트를 삽입하거나 UI를 재사용하고 싶을 때는 한계가 있었습니다.
MDX의 장점
그래서 선택한 게 MDX였습니다.
MDX는 Markdown + JSX의 조합으로, 글을 작성하면서 React 컴포넌트를 불러올 수 있습니다.
이를 이용해 다음과 같은 장점을 얻을 수 있었습니다.
- 자유로운 컴포넌트 삽입 → 버튼, 차트, 알림 박스 등을 글 속에 자연스럽게 추가
- UI 재사용 → 동일한 레이아웃과 스타일을 컴포넌트화해 재활용
- 플러그인 확장성 → remark, rehype 등을 붙여 코드 블록 하이라이팅이나 이미지 최적화 기능 확장