이번 글에서는 지난 글에 이어서 본격적으로 블로그 기능 구현 과정에 대해 설명하겠습니다.

1. 블로그 기능이란?

일단 블로그란 무엇인가에 대한 정의를 먼저 생각해봐야 했습니다. 그리고 동시에 블로그를 왜 운영하려고 하는지에 대해서도 생각해볼 필요가 있었습니다.

블로그란 무엇인가? 왜 하는가?

'블로그'는 단순한 온라인 공간을 넘어 현대인의 자아표현과 사회적 소통의 장으로서 깊은 의미를 지닙니다. 인간은 본질적으로 자신의 이야기를 남기고 싶어하는 존재입니다. 고대 동굴 벽화부터 일기, 회고록에 이르기까지 인류는 항상 자신의 경험과 사상을 기록해왔습니다. 블로그는 이러한 인간의 근원적 욕구가 디지털 시대에 구현된 형태라고 볼 수 있습니다.

블로그 운영의 철학적 의미를 몇 가지 측면에서 살펴보면:

첫째, 블로그는 '자아의 확장'으로 기능합니다. 하이데거가 말한 '세계-내-존재'로서 인간은 자신을 표현함으로써 존재를 확인하고, 블로그를 통해 디지털 공간에 자신의 존재를 투영합니다.
둘째, 블로그는 '기억의 외재화'입니다. 베르그손이 말한 순수 기억과 달리, 블로그에 기록된 경험은 선택적이고 재구성된 기억으로, 우리의 주관적 시간 경험을 물리적으로 구현합니다.
셋째, 블로그는 '공동체 형성'의 매개체입니다. 하버마스의 '공론장' 개념처럼, 블로그는 개인의 사적 경험이 공적 담론으로 전환되는 공간으로, 서로 다른 관점이 교차하는 대화의 장을 형성합니다.
넷째, 블로그는 '자기 서사의 구축'입니다. 리쾨르가 말한 '서사적 정체성'처럼, 블로거들은 자신의 이야기를 지속적으로 쓰면서 자아를 재구성하고 정체성을 형성합니다.
다섯째, 블로그는 '불멸성에 대한 열망'을 반영합니다. 유한한 존재인 인간이 자신의 생각과 경험을 남겨 시간적 한계를 초월하려는 시도로 볼 수 있습니다. 이렇게 볼 때, 블로그는 단순한 취미나 소통 수단을 넘어 인간의 존재론적 질문, 시간성, 관계성, 정체성을 탐구하는 현대적 실천이라 할 수 있습니다.

위 문장은 제가 직접 작성한 것이 아니고 Claude에게 블로그란 무엇인지 인문/철학적으로 생각해보자 라고 질문하여 받은 답변입니다.

이 중에서 저는 두번째 기억의 외재화와 네번째 자기 서사의 구축에 주목합니다.

a. 기억의 외재화

사람은 평소 본인이 갖고 있던 생각과 개념들을 글로 작성할 때, 말로 형용할 수 없는 특별한 경험을 겪곤 합니다. 머릿속에서 실타래처럼 엉켜 있던 생각들이 글로 작성되면서 정돈되기도 하고 또는 엉뚱하지만 독창적인 새로운 아이디어로 발산되기도 합니다.

평소에 저는 회사 일 또는 일상 생활을 하면서 맞닥뜨리는 여러가지 상황들을 글로 남기는 습관이 있습니다. 그것은 주로 아주 일상적인 것들을 적거나 아니면 아주 비일상적인 것들을 적었습니다.

이 중에서 일상적인 것 말고 비일상적인 것들을 적을 때는 글 말미에 제 생각을 보충하고는 합니다. 제가 어떤 감정이 들었고 제가 내린 평가가 무엇인지를 적습니다. 그 과정에서 내가 이런 생각을 하고 있구나 하면서 놀라게 된 적도 더러 있었습니다. 아마도 위에 적었던 것처럼 제가 미쳐 깨닫지 못하고 있었거나 아니면 뒤엉켜 있던 생각의 뭉치 들이 풀어져 나오면서 제가 스스로 알아차리게 된 것이 아닌가 추측합니다.

또 한 가지 다른 측면에서는 평소 유튜브를 보면서 개발 관련 공부를 많이 하는데, 이것이 아주 극명한 장점과 단점이 갈립니다. 장점으로는 언제 어느때나 내가 원하는 주제에 접근할 수 있다는 것이고(거의 무료로!) 단점으로는 영상을 눈으로만 보게 되니 휘발성이 매우 강하다는 것입니다. 그리고 유사하지만 약간은 다른 주제의 영상을 여러개 보았을 때, 이것을 머릿속으로만 정리하고 넘어가면 나중에 실제 개발하는 단계에서는 잘 떠오르지가 않는 문제가 있습니다.

그래서,

내가 생각한 것들 그리고 내가 배운 것들을 '글'의 형태로 정리해보자.

라는 생각을 해보게 된 것입니다.

b. 자기 서사의 구축

기존에 제가 글을 적고 관리하던 방식은 몇 가지 문제가 있었습니다.

일단, 외부에 공개를 하지 않기 때문에 저의 생각에 대해 누군가로부터 피드백을 받는 게 불가능합니다.
또한 제가 배웠거나 배우고 있는 것들을 통해 저의 전문성을 외부로 나타낼 수 없었습니다.

블로그 운영은 이러한 문제를 해소할 수 있는 최적은 방법이라고 생각합니다. 내가 어떤 사람이고 어떤 생각을 하는지 '글'의 형태로 외부에 표출할 수 있고 긍정/부정의 피드백을 받아 때로는 논쟁하거나 어쩌면 내 생각을 바꿀 수도 있습니다.

그리고 포트폴리오의 일환으로서도 작동할 것으로 기대합니다. 전체 블로그 글 자체를 한 사람이 작성할 것이기 때문에 글의 이력과 쌓인 목록이 나 라는 사람을 나타낼 수 있는 수단이 될 것 같은 예상도 했습니다.

2. 블로그 글 관리

자, 그러면 이제 블로그를 하기로 마음먹었으니 개발자로서 기능을 구현해야될 때가 되었습니다.
개발 시작 단계에서 일반적으로 가장 먼저 하는 것은 시스템 구조를 설계, use case를 정리, DB 테이블 스키마를 설계 등등의 작업입니다.
그런데 이 블로그 기능 구현은 이러한 것들을 하기 이전에 일단 가장 먼저 해야 하는 질문이 있었습니다. 블로그 글은 어떻게 관리 하지?

Contents 관리를 어떻게 할 것인가?

기능을 구현해보겠다고 마음 먹은 최초 시점에는 사실 이 부분에 대해 아무 것도 아는 것이 없었습니다. 그저 막연하게 블로그 글에 대해 관리를 해야 할 것 같고 아마도 크게 아래 3가지 구성 요소로 나뉠 것이라고 생각했습니다. (추후에 이 구분 방식은 바뀌게 됩니다. 자세한 건 글 나머지를 읽어보시면 됩니다.)

Blog Id: 블로그 글을 식별하는 아이디
Blog title: 블로그 글 제목
Blog contents: 블로그 글 본문

Blog의 Id와 Title 보다는 Content를 어떻게 관리할 것인가가 쟁점이었습니다.
블로그 글은 단순한 텍스트 값만 있는 게 아니라 화면에 표시할 다양한 조합으로 구성할 수 있어야 하기 때문입니다.이미지 삽입이나 테이블 표, 코드 스니펫 같은 것들을 글에 배치할 때, 이것을 어떻게 작성하고 DB에 어떻게 저장해야 할지를 고민했습니다.

처음에는 막연하게 일반적인 게시판의 게시글처럼 저장하는 것을 생각했었습니다. 사용자가 게시판에 접속하여 게시글을 쓰려면 WYSIWYG을 통해야 합니다. 물론 순수하게 텍스트만 입력할 수 있는 아주 기초적인 게시판이라면 필요 없겠지만 제가 구상하는 블로그는 방금 언급한 것처럼 이미지,테이블과 같은 다양한 효과를 글에 담을 수 있어야 합니다.

그래서 자연스럽게 이런 생각을 하게 되었습니다.

아, 그러면 WYSIWYG 같은 문서 작성 툴(기능)를 만들어야 하나?

하지만, 생각해보면 이 블로그의 글 쓰기는 나만 할텐데, 굳이 또 하나의 복잡한 기능(WYSIWYG)을 만들어야 할까? 라는 생각도 들었습니다.
이것은 마치, 글을 쓰기 위해 내가 직접 타자기를 하나 구매해야 한다는 느낌이었습니다. 일단은 연필과 종이만 있으면 되는 일인데 말이죠.

여기까지 생각이 정리되자, 그 다음부터는 그냥 React(Next.js) 진영에서 일반적으로 블로그 글 관리를 어떻게 하는지 알아봐야 겠다고 생각했습니다. 저와 같은 고민을 이미 사람들이 많이 했을 것이고 Best practice가 있다면 그것을 따르는 것이 올바른 방향이기 때문입니다. 이 개발자 포트폴리오/블로그 제작 프로젝트는 직접 만들어보는 것도 의미가 있지만 동시에 제대로 만들고 싶었습니다.

3. Next.js + 블로그

Next.js 커뮤니티에서는 개인의 블로그 기능을 구현할 때 주로 어떤 방식을 사용하는지 찾아봤습니다. 기술 블로그들과 Next.js 공식 문서 등을 참조했습니다.

Rendering

Next.js는 렌더링 방식으로 CSR(클라이언트 사이드 렌더링)과 SSR(서버 사이드 렌더링), SSG(Static site generation) 그리고 ISR(Incremental static regeneration) 제공합니다. 그리고 추후에 파악한 것이지만 SEO(검색 엔진 최적화) 설정도 지원하기 때문에 블로그 기능 구현에 최적의 프레임워크 중의 하나라고 볼 수 있습니다.

CSR
- 웹 브라우저에서 렌더링
- 동적인 UI 요소나 사용자 인터랙션이 많은 페이지에 적합
SSR
- 사용자가 매번 요청할 때마다 서버에서 HTML을 동적으로 생성
- 데이터가 자주 변경되거나 사용자 맞춤형 콘텐츠가 필요한 경우에 적합
SSG
- 빌드 타임에 미리 HTML을 생성하여 정적 파일로 저장
- 콘텐츠가 자주 변경되지 않는 블로그에 효율적
ISR
- 정적 페이지를 생성한 후에도 백그라운드에서 콘텐츠를 점진적으로 갱신
- 콘텐츠가 자주 변경되지는 않지만 빌드 타임에 모든 것을 전부 의존하기 힘든 경우에 사용

이 중에서 저는 SSG에 주목했습니다. 모든 콘텐츠를 미리 만들어놓고 서버에서는 단지 파일 서빙만 하는 구조입니다. 블로그에 딱 최적화 된 방식이라고 생각했습니다.

블로그 글 저장 방식

블로그 글 페이지를 렌더링 하는 방식에 대해 알아봤으니 이번에는 블로그 글 자체를 어디에 저장할 것인가에 대해 생각해봅시다.

글을 저장하는 방식은 크게 2가지로 나눌 수 있습니다.

데이터베이스
- 원격 DB에 블로그 글 데이터를 저장
- 글이 자주 수정되거나 추가되는 경우에 적합. 재빌드/배포 없이 수정 가능
- 추후에 CMS(Content Management System) 연동을 고려해야 한다면 이 방식이 더 적합
로컬 파일로 관리
- 모듈 로컬에 md/mdx/json/yaml 파일로 블로그 Contents를 저장
- 자주 변경되지 않는 Static한 Contents에 적합. Contents 추가 또는 수정 시 재빌드/배포 필요

저는 시스템을 최대한 단순하게 유지하고 싶었기 때문에 굳이 따로 외부 DB를 두는 것은 피하고 싶었습니다. 그렇다면 로컬 파일로 블로그 글을 저장/관리 해야 한다는 결론이 도출됩니다.

렌더링 + 저장 방식의 조합

위에서 살펴봤던 렌더링 방식과 글 저장 방식을 각각 조합하여 어떤 장/단점이 있는지 살펴봅시다.

그런데 렌더링 방식 중 CSR과 ISR은 제외했습니다.
CSR은 브라우저에서 렌더링하기 때문에 서버에서 글 데이터를 받아와야 하는데 이것은 그다지 좋지 못한 방식이라고 생각했습니다. 또한 ISR은 SSR과 SSG의 장점을 결합한 방식으로 보였지만 시스템 복잡도가 올라갈 것 같았습니다. 또한 아직 기능 구현 전이라 ISR을 구체적으로 어느 상황에서 사용해야 할지 감을 잡지 못했습니다.

그래서 일단은 SSR, SSG 2개의 렌더링 방식과 DB, 로컬 파일 2개의 글 저장 방식의 조합을 생각해봤습니다.

1. SSR + DB

사용자가 매번 요청할 때마다 서버는 DB에서 블로그 글 데이터를 받아옵니다. 그후에 글 데이터를 기반으로 서버에서 렌더링합니다.
성능 문제 해결을 위해 중간 단계의 캐시를 도입할 수 있지만 시스템이 복잡해지는 문제가 있습니다.
추후에 블로그 기능을 고도화 하는 경우, 예를 들어 CMS나 WYSIWYG 시스템을 구축하고 Author 권한을 외부에 개방하는 경우에나 적합할 것이라고 생각합니다.

2. SSR + 로컬 파일

사용자가 매번 요청할 때마다 로컬에 저장되어 있는 파일을 읽어서 파싱하여 HTML로 변환합니다.
매 요청마다 로컬 파일을 읽어서 파싱해야 하기 때문에 일정한 빈번한 Disk I/O가 발생합니다.
또한 로컬 파일에 문제가 있는 경우(ex: 잘못된 문법 사용)는 서버에 배포되고 나서야 이것을 발견할 수 있습니다. 아니면 전체 로컬 파일을 빌드 타임에 체크하는 추가 스크립트를 구현해야 합니다.

3. SSG + DB

이 방식은 빌드 타임에 DB 데이터를 조회하여 static content를 생성합니다.
일반적인 블로그 Contents 관리 방식으로는 비효율적입니다. 동적으로 contents를 수정해도 실시간으로 반영할 방법이 없습니다.

4. SSG + 로컬 파일

빌드 타임에 로컬 파일을 읽어서 파싱하는 방식입니다.
새로운 내용을 반영하려면 매번 빌드/배포 해야 하지만 Contents가 빈번하게 수정되지 않는 유형의 경우엔 크게 문제되지 않습니다.

일단은 이 정도로 감을 잡은 상태에서 클론 코딩을 시작했습니다.

4. 블로그 클론 코딩

Next.js 공식 기술 문서와 몇 편의 기술 블로그 글 들을 읽고 대충 어떤 식으로 Next.js에서 블로그를 관리하는지 파악한 후에 곧바로 유튜브 클론 코딩을 시청했습니다.

이 영상은 7시간이 조금 넘는 분량으로 아주 처음부터 잘 작동하는 블로그까지 서비스를 빌드하는 전 과정을 담고 있습니다.
SSG(Static site generation) 방식으로 블로그 글을 관리함으로써 초기 로딩 속도가 빠르고 SEO 측면에서도 유리합니다.

영상 시청을 하면서 추상적으로만 이해했던 블로그 관리에 대해 어느정도 이해할 수 있었습니다. 블로그 글 관리 라이브러리가 어떤 방식으로 작동하는지 전체 개발 과정에서 어떤 부분에 개입하는지 등등을 이해하면서 영상을 끝까지 시청 완료했습니다.

다만 영상에서 사용한 라이브러리가 outdated 버전이기 때문에 이것을 다른 라이브러리로 교체하는 작업까지 마쳐서 블로그 기능 구현을 완료했습니다.

🚨 주의 🚨

이 영상은 2023년 9월에 만들어져서 Next.js 13 버전을 사용하고 있습니다. 2025년 3월 현재 기준으로 최신 버전인 Next.js 15와 약간의 차이가 있습니다. 또한 블로그 글 관리를 위해 Contentlayer를 사용하는데 이 라이브러리는 최신 Next.js 14/15와 호환되지 않습니다. 따라서 직접 블로그 기능을 만들어 보려는 분들이 계시다면 이 영상을 보는 것 보다는 다른 영상을 보시는 것을 추천합니다. 아래 영상 리스트는 비교적 최신의 Next.js와 블로그 글 관리 라이브러리를 활용합니다.

마치면서

지금까지 블로그를 왜 만들게 되었는지, 블로그 기능 구현을 위한 어떤 기반 기술들이 있는지를 살펴봤습니다. 그리고 마지막에 클론 코딩 영상을 시청하면서 직접 블로그 기능을 구현했습니다.

다음 글에서는 어떤 라이브러리를 활용했는지 그리고 블로그 글 관리를 위해 어떤 파일 타입을 사용하게 되었는지 소개하도록 하겠습니다.

끝까지 읽어주셔서 감사합니다!

Comments (0)

Checking login status...

No comments yet. Be the first to comment!

처음부터 배포까지: 나만의 풀스택 포트폴리오 만들기 - 3

Comments (0)