드디어...
블로그를 드디어 개설했습니다
수도 없이 네이버 블로그와 티스토리, 그리고 노션을 보며
"왜 내 블로그를 직접 만들어야 하는가?"에 대해 탐구하고
"나를 표현하는 방법"에 대해 고민한 끝에 나온 블로그
노션의 사이드바, 네이버 블로그의 리치 텍스트 에디터를 합친 결과물을 만들고 싶다.
그런데 이제 깔끔함을 곁들인.
게다가 기술 블로그 이력서 포트폴리오 일상 블로그를 다 포함하고 있는.
아직 고칠 것도 많고 추가해야 할 것도 많지만
젤다의 전설도 발매 이후 한 달은 수시로 버전을 업데이트한 것을 떠올리며
기본 핵심 기능을 구현한 뒤 빠르게 론칭했습니다
블로그에 대해 소개해 주세요
기본 기능
블로그의 잡다한 기능(이웃 맺기, 등)을 제외하고, 단순하게 카테고리, 글 두 개가 전부인 기록용 블로그입니다.
카테고리 내에 글을 작성할 수 있으며, 하나의 포스트는 여러 개의 태그를 가질 수 있습니다.
카테고리 혹은 태그 내에서 포스트가 정렬됩니다.
사이드바를 접고 펼칠 수 있습니다.
다크모드가 가능합니다.
카테고리, 태그를 클릭하면 포스트 리스트를 확인할 수 있습니다.
포스트를 볼 수 있습니다.
"시작하는 글"을 통해 블로그의 기본 내용을 확인할 수 있습니다.
사용자 기능
로그인, 로그아웃이 가능합니다. (나만. 즉 회원가입이 없습니다.)
로그인한 사용자는 글을 쓸 수 있습니다.
로그인한 사용자는 포스트 추가, 삭제, 수정이 가능합니다.
글쓰기 기능
에디터는 리치텍스트 에디터를 사용하여 순수 마크다운의 불편한 점을 상쇄했습니다. (마크다운도 사용 가능)
이미지 삽입, 삭제가 가능합니다.
이미지 삽입 시 바로 DB에 저장되지 않고 글을 등록해야 이미지가 저장됩니다.
대표 이미지 설정이 가능합니다.
포스트 삭제 시, 이미지또한 함께 삭제됩니다.
임시저장, 예약발행, 다중태그가 가능합니다.
업데이트 목록
<2026.02.23>
목차 설정
공지글 설정
포스트 내 이전/다음 포스트 내비게이션 기능
글, 본문 내용 검색 기능
slug 커스텀 기능
admin 페이지
블로그 관리를 위한 기본적인 설정
카테고리, 태그 추가/삭제
모바일 반응형
개발하면서 집중했던 부분
이 블로그는 기술 블로그만을 위한 블로그이며, 전체이게 끝이 아니다가 아닌 파츠입니다.
그렇기 때문에 블로그를 완성하는 것 이전에 큰 프로젝트 안의 서브 프로젝트라는 것을 인지한 후 작업하였습니다.
결국 하고 싶었던 것은...
1) 기술 블로그, 이력서, 포트폴리오를 한번에 확인할 수 있고,
2) 각각의 페이지가 존재한다면
3) 공통적인 한 개의 메인 도메인으로 여러 개의 진입점을 확보할 수 있다고 판단했습니다.
페이지들은 통일되어 있지만 개개의 특성을 살리고 싶었습니다. (개발 블로그는 개발 블로그만, 이력서는 이력서만 등등)
이 점이 블로그를 직접 만들어야 하는 이유였으며, 나를 표현할 수 있는 중앙집중화 아이템이라는 결론을 도출했습니다.
< 목표 >
1) 개발을 쉽고 빠르게 할 수 있는 것을 선두로
2)통일성과 확장성이라는 두 마리 토끼를 잡으려고 했습니다.
Sub domain 활용
어떻게 나누었나?
imio.dev라는 큰 도메인 내에 blog, resume, portfolio라는 서브 도메인을 설정
리포지토리를 분리하기 보다는 도메인으로 아키텍처를 나누어 route를 분리 (/blog, /resume ...)
전역으로 ui/ux 및 기본 골자 통일성을 지킴
feature를 middleware단에서 서브도메인으로 리다이렉트
내부 link 이동은 {domain}Link라는 커스텀 link를 사용하여 서브도메인으로 연결
Supabase 도입
시작 단계였기 때문에 백엔드를 직접 구축하는 것보다 DBMS를 활용
다만, 이전에 블로그 만들기 1차를 했었을 당시 Firebase를 사용했었는데요. 사용감이 좋지 않아서 Firebase는 제외했습니다.
관계형 DB가 아니기 때문에 포스트 정렬이나 필터링에 더 까다로웠고, 데이터의 중복 저장 등의 이슈로 인해 정돈되지 않다는 느낌이 강하게 들었습니다.
하여, 스키마를 작성할 수 있는 Supabase를 사용했습니다. 블로그는 글을 저장하는 창고이니 만큼 차곡차곡 정리하며 쌓고 싶었거든요.
무엇이 좋았나?
Supabase는 (firebase와 똑같이) 인증이나 api를 사용할 수 있다
파일 스토리지, RLS 같은 편리한 기능또한 존재
PostgreSQL의 특징을 고스란히 갖고 있기에 블로그 개발 시 쉽고 강하다!
docker를 통해 로컬 server를 별개로 띄워 주는 것도 개발 속도 향상에 도움
docker를 직접 올릴 필요도 없이 실행 문구 한 번이면 가능한 것도 장점!
server와 client의 구분
supabase/ssr의 createServerClient와 createBroweserClient를 구분
로그인 폼, 세션 유무에 따른 UI 분기, 스토어 동기화와 같은 클라이언트 따로 (화면에 뭘 보여 줄지)
서버 컴포넌트, 액션, API 라우트 등 요청의 쿠키로 세션을 보거나 DB 접근을 하는 서버 따로 (뒤에서 처리)
역할 분리를 할 수 있는 것도 특장점
Next.js
SSR을 고려하여 이번 프로젝트에도 Next를 사용했습니다.
다만 아무리 정적이라고 하더라도 사용자 상호 작용이 있는 부분이 많기 때문에, use client를 안으로 넣는 것이 핵심이었습니다. 또, 외부 api가 없기 때문에 Next.js 16의 fetch 기능을 만만하게 사용했습니다.
아키텍처는 Feature-Based를 도입하려고 노력했습니다. app에는 라우트만, feature에 각각의 도메인 중심으로 폴더를 구성했고, 전역은 필요한 부분만 완전한 바깥으로 뺐습니다.
배럴로 이어주어 완벽한 분리를 꾀했지만, 필요에 따라 편안한 부분으로 바꾼 부분도 있습니다. 모듈을 작은 개별의 홈페이지로 만들기 위해 자잘한 레이아웃까지도 feature에 넣었습니다.
sabuzak/
├── app/ # 라우팅·레이아웃만
│ ├── (with-header)/ # 헤더 있는 페이지들
│ │ └── blog/
│ ├── write/ # 헤더 없는 페이지
│ ├── layout.tsx # 루트 레이아웃
│ └── favicon.ico # 파비콘 (Next.js 자동 인식)
│
├── features/ # 기능 단위 모듈
│ ├── home/
│ │ ├── index.tsx # 배럴 익스포트
│ │ ├── HomeView.tsx # 뷰(페이지 단위 UI) — index와 같은 레벨
│ │ └── components/ # 뷰를 구성하는 하위 컴포넌트
│ ├── admin/
│ │ ├── index.tsx
│ │ ├── AdminView.tsx
│ │ └── components/
│ └── blog/
│ ├── index.tsx
│ ├── BlogView.tsx # 뷰 — index와 같은 레벨
│ ├── components/ # 뷰를 구성하는 하위 컴포넌트 (BlogCounter 등)
│ ├── createBlogStore.ts
│ └── BlogStoreContext.tsx
│
├── components/ # 공용 UI
│ ├── layout/ # Header, Footer
│ ├── ui/ # 범용 컴포넌트
│ ├── tiptap/ # 에디터 (Toolbar, PublishSidebar, ImageWithBadge, RepresentativeImageContext 등)
│ ├── ThemeSync.tsx
│ └── ThemeToggle.tsx
│
├── stores/ # 전역 Zustand
│ └── useAppStore.ts
│
├── styles/ # 디자인 토큰
│ ├── globals.css # Tailwind 진입점 (layout.tsx에서 import)
│ ├── tokens.css # 색상 변수
│ ├── theme.css # Tailwind @theme
│ └── theme/ # 역할별 분리
│
├── hooks/ # 전역 훅
├── lib/ # 유틸리티
└── constants/ # 전역 상수
```
tiptap 도입
리치 에디터는 제일 많이 검색했던 부분인데, 여러 가지 리치 에디터 중에 가장 중점으로 보았던 건 확장성이었습니다.
물론 노션 방식, 심플 에디터 등등 선호도의 문제도 있었지만 마크다운만 사용하고 싶지는 않았고 네이버나 티스토리처럼 블로그 게시물을 단조롭게 만들고 싶지 않았기 때문에 기본적인 기능을 포함하여 나만의 커스텀 기능을 쉽게 추가할 수 있는, 무겁지 않은 에디터를 검색한 끝에 tiptap을 도입했습니다.
처음에는 직접 만드는 방식을 차용했으나, 기본적인 큰 골자는 블로그 만들기이지 리치 에디터를 end to end로 만드는 것은 큰 틀에 반한다는 생각이었습니다.
기타 스택
zustand
tailwind / shadun / clsx