[Tech Blog] Next.js 16 기반 기술 블로그 구축기: "단순 텍스트를 넘어선 콘텐츠 경험"

작성일: 2026-01-10
작성자: Beauty Insight Editor (AI솔루션팀)

---

1. 들어가며: 왜 또 블로그인가?

우리는 매일 수많은 인사이트와 데이터를 생산합니다.
하지만 이 소중한 지식들이 슬랙 메시지나 노션 페이지 속에 묻혀 사라지는 것을 지켜볼 수만은 없었습니다.
외부 플랫폼(Medium, Tistory)에 의존하지 않고, 우리 서비스 내에 내재화된 지식 아카이브를 구축하기로 결심했습니다.

목표는 명확했습니다.
"개발자가 글을 쓰고 싶어지는, 독자가 읽고 싶어지는 블로그를 만들자."

2. Technical Stack: 가벼움과 강력함 사이

우리는 Next.js 16 (App Router) 환경 위에서, 별도의 CMS 없이 Markdown 파일을 직접 파싱하는 방식을 택했습니다.

• Storage: daily_report/, tech_blog_post/ 로컬 디렉토리 (Git 관리)
• Engine: next-mdx-remote (Server Components 호환)
• Styling: Tailwind CSS + @tailwindcss/typography
• Features: remark-gfm (Table), remark-breaks (Line Break), rehype-pretty-code (Syntax Highlighting)

이 조합은 DB나 API 서버 없이도, 빌드 타임에 정적 페이지(SSG)를 생성하여
압도적인 로딩 속도를 보장합니다.

3. UX/UI: 가독성을 위한 디테일의 싸움

3.1. Premium Tech Blog Aesthetic

단순히 글자만 나열하는 것은 블로그가 아닙니다.
우리는 **'읽는 경험'**을 설계했습니다.

• Hero Section: 제목과 메타 정보(작성자, 날짜)를 최상단에 시원하게 배치하여, 글의 첫인상을 강렬하게 남겼습니다.
• Focus Mode: 본문 너비를 max-w-3xl로 제한하여, 시선이 분산되지 않고 글에만 집중할 수 있도록 했습니다.
• Scroll-Spying TOC: 긴 글을 읽을 때 길을 잃지 않도록, 우측에 현재 위치를 알려주는 목차(Table of Contents)를 고정했습니다.

3.2. Typography Engineering

"왜 내 글은 안 예뻐 보일까?"의 답은 Typography에 있습니다.
우리는 Tailwind Typography 플러그인을 극한으로 튜닝했습니다.

• Vertical Rhythm: leading-loose, my-8 등의 클래스를 적용하여, 줄글과 문단 사이에 충분한 숨 쉴 공간을 확보했습니다.
• Visual Mapping: 인용문(blockquote)과 코드 블럭, 리스트 스타일을 각각 차별화하여, 글의 구조가 한눈에 들어오게 했습니다.

4. Troubleshooting: 악마는 디테일에 있다

4.1. The "Enter" Problem (Soft Break)

Markdown 표준은 엔터를 한 번만 치면 줄바꿈으로 인식하지 않습니다(Soft Break).
하지만 이는 블로그 작성 경험을 저해합니다.
우리는 remark-breaks 플러그인을 도입하여, GitHub 코멘트처럼 엔터 한 번으로 줄바꿈이 되도록 수정했습니다.
익숙함이 곧 편안함이니까요.

4.2. Empty Dependency Hell

rss 모듈의 타입 정의(@types/rss)가 누락되어 빌드가 깨지는 문제, tailwindcss 플러그인 로드 실패 등 자잘한 이슈들이 있었습니다.
이를 하나하나 해결하며 안정적인 CI/CD 파이프라인을 위한 초석을 다졌습니다.

5. 마치며: 기록이 문화가 되다

이제 Beauty Insight Lab의 팀원들은 복잡한 CMS 로그인 없이,
VS Code에서 마크다운 파일을 하나 추가하는 것만으로 전 세계에 우리의 기술과 비전을 공유할 수 있습니다.

이 블로그는 단순한 텍스트 저장소가 아닙니다.
우리의 치열한 고민과 성장의 기록이 쌓이는, 살아있는 역사책이 될 것입니다.

---

Next Step: 태그 시스템 고도화 및 댓글 기능(Giscus) 연동을 통해 독자와의 소통 창구를 열 계획입니다.