beomgg.
Back to Projects

beomgg. - 개발자 포트폴리오 & 블로그

Next.js 16 App Router와 Tailwind CSS v4 기반의 개발자 포트폴리오 및 기술 블로그. Velog RSS 피드 연동을 통한 실시간 게시물 동기화와 최적화된 반응형 UI 및 다크모드 환경 제공

2026.08Source Code
Next.jsTailwind CSSTypeScript

프로젝트 배경 및 목표

기존의 기술 블로그들은 정적 사이트 생성기(Jekyll, Hugo)나 단순한 플랫폼(Tistory)에 의존하여 커스터마이징에 한계가 있었습니다. 이를 해결하고자 최신 웹 기술을 도입하여 확장성 높은 개인화된 포트폴리오 겸 기술 블로그를 직접 구축하는 것을 목표로 했습니다.

  • Velog RSS 연동: 외부 플랫폼에 작성한 글을 일일이 복사할 필요 없이, Velog RSS 피드를 파싱하여 최신 게시물을 실시간으로 동기화합니다.
  • 모던 UI/UX 및 반응형: Tailwind CSS v4를 활용하여 데스크탑과 모바일 모두에서 최적화된 유려한 디자인(다크모드 포함)을 제공합니다.
  • 유연한 확장성: 현재는 Velog를 데이터 소스로 사용하지만, 추후 Notion API나 자체 CMS 등으로 데이터 소스를 변경하더라도 쉽게 대응할 수 있는 아키텍처를 지향했습니다.

시스템 아키텍처 및 기술 스택

Frontend & Core

  • Framework & Runtime: Next.js 16.2 (App Router, React Server Components), React 19
  • Language & Type System: TypeScript 5 (Strict Typing)
  • Styling & Design System: Tailwind CSS v4, next-themes (Dark mode)

Data & Integration

  • Data Fetching: Fetch API with RSS (`fast-xml-parser`)
  • Iconography: Lucide React
  • External Components: react-github-calendar

핵심 기술적 도전 및 해결 과정

RSS 파싱과 렌더링 최적화

  • Challenge: Velog RSS 피드는 XML 형태로 제공되며, description 필드에 HTML 태그가 포함되어 있어 그대로 렌더링하면 UI가 깨지거나 불필요한 요소가 노출되는 문제가 있었습니다.
  • Solution: fast-xml-parser를 사용하여 XML을 파싱한 후, 정규표현식(/<[^>]*>?/gm)을 통해 HTML 태그를 모두 제거하고 순수 텍스트만 추출하여 150자로 자르는(truncate) 로직을 구현했습니다.

Tailwind CSS v4 도입 및 설정 최적화

  • Challenge: 기존 tailwind.config.js 기반 설정이 사라진 v4 환경에서 폰트 설정과 다크모드 대응을 완벽하게 세팅해야 했습니다.
  • Solution: CSS 변수(Variables)를 적극 활용하여 globals.css 내에서 테마 토큰을 관리하고, Next.js의 next/font/google과 결합하여 런타임 오버헤드 없이 최적화된 폰트를 적용했습니다.

프로젝트 성과 및 배운 점

  • RSC(React Server Components)의 이해: Next.js 16의 App Router 환경에서 데이터 패칭을 수행하는 서버 컴포넌트와 인터랙션(검색 필터 등)을 담당하는 클라이언트 컴포넌트를 명확히 분리하는 패턴을 학습했습니다.
  • 유지보수성 향상: 외부 플랫폼(Velog)에 종속되지 않고 포트폴리오와 블로그를 통합하여, 새로운 기술 스택을 언제든 실험해볼 수 있는 튼튼한 기반을 마련했습니다.