·읽는데 10분

Nuxt.js로 블로그 만들기: 설계하기

Nuxt.js로 블로그 만들기
1 설계하기2개발 환경 구성하기...3개 펼치기6포스트 페이지 만들기7포트폴리오 페이지 만들기

오늘날 블로그는 단순한 기록의 공간을 넘어, 자신만의 생각과 지식을 공유하고 전문성을 알릴 수 있는 중요한 플랫폼으로 자리 잡았습니다. 특히 개발자에게 블로그는 개인 브랜딩의 필수 요소로, 코드 스니펫부터 프로젝트 아카이브, 기술적 노하우를 공유하는 공간으로 활용됩니다.

이 글에서는 현재 보고 계신 Nuxt.js 기반 블로그의 간소화된 버전을 만드는 방법을 소개하려고 합니다. 이를 통해 자신만의 블로그를 설계할 영감을 얻을 수 있으시길 바랍니다.

페이지 레이아웃 결정하기

블로그 구상을 시작할 때, 가능한 한 미니멀하게 만들자는 목표를 세웠습니다. 왜냐하면 화려한 디자인 요소는 금방 질리기 때문에 자주 수정하게 되고, 이에 따라 정작 글을 쓰는 시간은 줄어들기 때문입니다.

레이아웃은 썸네일 또는 커버 이미지를 넣지 않는 구조로 작성하고자 했습니다. 정보를 전달하는데 반드시 필요하지 않은 요소임에도 불구하고, 이미지를 고르거나 생성하는 작업에 은근히 고민과 시간이 필요했기 때문입니다. 이 또한 글을 작성하는데 방해 요소가 된다고 생각했습니다.

이렇게 미니멀리스트 디자인과 대략적인 레이아웃을 구상한 것을 기반으로, 영감을 얻을만한 블로그들을 참고해서 레이아웃을 확정했습니다. 아래는 그 레퍼런스입니다.

SSG vs. SSR

블로그, 포트폴리오와 같이 콘텐츠가 변경되지 않는 정적인 페이지인 경우, Server Side Rendering(SSR)보다는 Static Site Generation(SSG)이 더 적합하기 때문에 SSG를 선택했습니다.

SSG는 빌드 시 정적 HTML 파일을 생성하여 CDN에서 바로 제공하기 때문에 응답 속도가 빠릅니다. 반면, SSR에서는 요청마다 서버에서 HTML을 생성하는 방식으로, Vercel이나 Netlify와 같은 서버리스 환경에서는 콜드 스타트로 인해 응답 속도가 느려질 수 있습니다. 이는 SEO 점수에 부정적인 영향을 줄 수 있습니다.

배포 플랫폼

정적 페이지 호스팅을 지원하는 서비스 중에서 유명한 Vercel, Netlify, GitHub Pages 그리고 Cloudflare Pages 중에서 소거법으로 Cloudflare Pages(이후 CF Pages)를 선택했습니다.

  • Vercel과 Netlify는 Nuxt-Image 모듈을 통한 pre-rendering 지원이 불안정해서 제외했습니다.
  • GitHub Pages는 많이 사용해 보기도 했고, 특정 시나리오에서 GitHub Actions 스크립트가 너무 복잡해져서 제외했습니다.

구현할 기능

미니멀한 블로그를 목표로 하되, 제가 방문자의 입장으로 블로그를 이용해 봤을 때 글을 찾고 읽는 것이 불편하지 않도록 스펙을 구성했습니다.

  • 댓글 : Giscus를 이용해서 댓글 기능을 구현했습니다. 제 블로그 디자인과 살짝 맞지 않아서 커스터마이징했습니다.
  • 다크모드 : 자주 쓰지는 않지만, 가끔 밤에 글을 찾을 때 너무 밝아서 불편해 추가했습니다.
  • 목차 : 문자형 정보의 특성상 빠르게 필요한 정보에 접근할 수 있어야 한다고 생각해 추가했습니다.
  • 태그 : 여러 가지 주제의 블로그 포스트를 올릴 계획을 하고 있어서, 특정 주제의 글만 필터링해서 볼 수 있도록 태그를 제공했습니다.
  • 시리즈 : 연속성을 갖는 글의 경우에는 관련 글을 쉽게 찾아볼 수 있어야 한다고 생각해 구현했습니다.
  • 공유하기 : 페이스북, 트위터, 링크드인과 같은 주요 플랫폼에 쉽게 공유할 수 있도록 메뉴를 만들었습니다.
  • 다국어 : 한국어로만 글을 작성하면 피드백을 받을 수 있는 풀이 좁기 때문에, 영어로도 글을 작성할 수 있도록 다국어 페이지로 구성했습니다.
  • 검색 : 검색 기능 구현이 까다로워서, 최초에는 검색창을 구글 검색에 연동하려고 했습니다. 그러나 서치 콘솔에 등록되지 않은 글이 검색되지 않고, 이에 따라 원하는 글을 찾기가 너무 힘들 수 있어서 구현하게 됐습니다.
  • 코드 하이라이트 : 여러 코드 블럭을 묶어서 탭으로 관리하는 코드 그룹과 특정 행을 하이라이팅 하는 기능을 구현했습니다. 그리고 추가된 라인과 제거된 라인을 표시하는 diff 기능도 함께 구현했습니다.

어떤 UI 라이브러리를 선택할 것인가?

블로그는 콘텐츠 중심의 단방향 구조를 가지는 경우가 많아, 상대적으로 복잡한 UI 컴포넌트를 요구하지 않습니다. 이러한 특성 덕분에, UI 컴포넌트를 직접 제작해보기 좋은 환경이라 판단해 Vuetify나 Nuxt UI와 같은 UI 프레임워크를 사용하지 않고 직접 만들어보겠습니다.

컴포넌트 디렉터리 구조

components
├── App
├── Archive
├── Blog
├── Error
├── Portfolio
├── The
└── content

우리가 생성할 디렉터리 구조는 위와 같으며, 저는 다음의 규칙으로 디렉터리 구조를 구성하고 있습니다.

  • The : 페이지에서 단 한 번 사용되는 것이 확실한 컴포넌트를 모아놓습니다. 대체로 레이아웃에 사용되는 TheHeader, TheFooter 등이 해당됩니다.
  • App : 모든 페이지에서 공통으로 사용되며, The 디렉터리에 해당되지 않는 컴포넌트를 모아놓습니다. Button, Modal 등이 해당됩니다.
  • content : Nuxt Content 모듈에서 사용하기 위해 확장할 컴포넌트를 놓습니다.
  • 나머지 : 각 페이지의 경로에 맞게 디렉터리를 생성하여, 그 페이지에 특화된 컴포넌트만 모아놓습니다.
Nuxt Blog Nuxt Content 2