작가들을 위한 'Fourth Clover'를 만들었습니다: 미니멀리스트 Next.js 블로깅 플랫폼 🍀

Source: Dev.to

⚠️ Collection Error: Content refinement error: Error: Connection error.

현대 웹의 소음

우리는 시끄러운 디지털 세계에 살아갑니다. 어디를 가든 팝업, 복잡한 사이드바, 유료 장벽, 그리고 알고리즘이 만든 방해 요소들이 우리의 주의를 끌어당깁니다. 개발자이자 작가인 저는 웹이 단순히 콘텐츠였던 시절이 그리웠습니다. 드물고 특별한 공간을 원했습니다. 마치 세 잎이 가득한 들판에서 네 잎 클로버를 찾는 듯한 느낌이죠. 그래서 저는 The Fourth Clover를 만들었습니다.

The Fourth Clover란?

The Fourth Clover는 작가와 사상가들을 위해 명료함을 중시하도록 설계된 현대적이고 미니멀한 블로그 플랫폼입니다. 단순한 CMS가 아니라 다음에 집중한 정교한 경험을 제공합니다:

• 타이포그래피 – 아름다운 세리프 폰트(Charter & Playfair Display)로 읽는 느낌이 화면이 아니라 책을 읽는 듯합니다.
• 집중 – UI가 사라지고 오직 여러분과 글만 남는 방해 없는 환경.
• 미학 – 프리미엄하고 차분한 느낌을 주는 독특한 “원형” 및 모노크롬 디자인 시스템.

그리고 가장 좋은 점? 완전히 오픈 소스라는 것입니다.

기술 스택

• Next.js App Router – 서버‑사이드 렌더링 및 최적 SEO; 서버에서 렌더링할 수 있는 거의 모든 것이 서버에서 렌더링됩니다.
• Tailwind CSS – 레이아웃과 커스텀 디자인 시스템을 담당합니다.
• shadcn/ui (Radix UI 기반) – 다이얼로그와 드롭다운 같은 접근성 높고 기능적인 인터랙티브 컴포넌트를 제공합니다.
• Supabase – 백엔드 역할:
  • 구조화된 관계형 데이터를 위한 Postgres 데이터베이스(Authors, Posts, Comments).
  • Supabase Auth를 통한 Google OAuth.
  • 이미지 업로드 및 관리를 위한 스토리지.
• React Hook Form + Zod – 복잡한 포스트 에디터에 사용되며, 데이터베이스에 저장되기 전 모든 포스트를 검증합니다.

에디터 기능 (왕관 보석)

• 자동 저장 – 작업을 절대 잃지 않도록, 변경이 감지되면 몇 초마다 로컬 초안에 저장합니다.
• 실시간 통계 – 타이핑하면서 단어 수와 예상 독서 시간이 업데이트됩니다.
• 예약 게시 – 지금 작성하고 나중에 게시되도록 예약할 수 있습니다.
• 깔끔한 인터페이스 – 태그와 요약 같은 설정은 필요할 때까지 숨겨져 있습니다.

소셜 기능 (2단계)

• 스레드형 댓글 – Reddit 스타일의 중첩 댓글 시스템.
• 좋아요 및 반응 – 포스트에 대한 실시간 피드백.
• 프로필 통계 – 내 포스트가 어떻게 퍼포먼스를 내는지 확인할 수 있습니다.

성능

사이트는 Core Web Vitals에서 높은 점수를 받습니다. 이미지가 최적화되고, 폰트가 효율적으로 로드되며, 데이터베이스 쿼리는 적절한 인덱싱으로 미세 조정되었습니다.

커뮤니티 및 기여

• 레포지토리 스타 – 가시성을 높이고 더 많은 개발자에게 다가갈 수 있습니다.
  https://github.com/aryan-dani/The-Fourth-Clover
• 버그 리포트 – 뭔가 고장이 났나요? 이슈를 열어 주세요!
• 기여 – 레포를 포크하고 “good first issue”를 찾아 PR을 열어 주세요. 모든 PR을 검토합니다!

마무리 생각

The Fourth Clover를 만들면서 웹 개발을 사랑하는 이유를 다시 떠올렸습니다. 엔지니어링과 예술이 완벽히 교차하는 지점이 바로 여기입니다. 기술은 우리를 표현하도록 돕는 도구여야지, 방해가 되어서는 안 됩니다.

새로운 공부 프로젝트를 찾고 있든, 글을 쓸 플랫폼을 원하든, 혹은 코드베이스에 기여하고 싶든, 여러분을 초대합니다.

행복한 코딩 되세요! 🍀

• GitHub: https://github.com/aryan-dani/The-Fourth-Clover
• Live Demo: https://fourthclover.bio