개발노트

dyno.blog 마이그레이션 기록. WordPress → Next.js 16.

2026. 4. 11 ~ 진행 중

기술 스택

Next.js 16React 19TypeScriptTailwind CSS v4NextAuth v5Turso libSQLDrizzle ORMTipTapSharpexifrFirebase AdminCloudflare R2VitestFuse.jsRechartsVercel

2026-04-17

커스텀 도메인 전환 + 웹 애널리틱스

•dyno.blog 커스텀 도메인 전환 (기존 dynoblog.vercel.app → dyno.blog)
•NextAuth v5에 trustHost: true 추가 — X-Forwarded-Host 존중해 로그인 URL 정규화
•middleware — *.vercel.app 호스트 감지 시 308 리다이렉트로 dyno.blog로 canonicalise
•로그인 리다이렉트 URL을 CANONICAL_HOST 명시 구성 (nextUrl.origin 의존 제거)
•Google Analytics gtag.js (G-48NQLC5SEP) — next/script afterInteractive
•Google Tag Manager (GTM-TQGK8XZ) + <body> 직후 noscript iframe
•Google Search Console 인증 메타 (metadata.verification.google)
•ShareButtons hydration mismatch 수정 — navigator.share를 mount 이후 감지

2026-04-16

Retro 2006 모드 재설계 (Phase 1+2+3)

•Phase 1: 모던 UI 숨김 — NextTopLoader, ThemeToggle, KineticHero, animate-pulse, ScrollProgress
•Phase 1: 아이콘 버튼 → 텍스트 — Search [검색], Random [타임머신]
•Phase 2: 도트 패턴 배경 (CSS radial-gradient 타일)
•Phase 2: Hit counter 실제 동작 — localStorage 세션당 1회 증가
•Phase 2: Footer extras — '최적 해상도 1024×768 | IE 6.0 이상 권장'
•Phase 3: RetroSidebar — 방문자(LED 블랙박스) + 달력 + 최근글 10 + 카테고리 10 + 링크
•1400px+ 데스크톱: 좌측 fixed 사이드바. 좁으면 인라인
•사이드바 카테고리 → /category/{menu}?cat={name} 정확한 라우팅

2026-04-16

라이브 통계 + 성능 최적화

•/api/stats /api/timeline /api/yearbook — 실시간 집계 API
•포스트 + 에세이 + 포럼 토픽 통합 카운트 (정적 2,612 → 실시간 2,842)
•unstable_cache('content') 태그 → 글 저장 시 Server Action이 자동 무효화
•collectAllContent 공유 캐시 — 3개 API가 DB 쿼리 1회 공유
•listContentIndex(content-exclude) 도입 → /admin/posts 2.3-3.1s → 1.1-1.4s
•Essay 쿼리 index-only 전환 — 500KB → 5KB (-99%)
•정적 baseline JSON은 milestone/heroImage 병합 용도로만 잔존

2026-04-16

관리자 에디터 통합

•글/문서/에세이 전부 RichEditor(TipTap) 통일 — DocEditor 3탭 방식 폐기
•에세이 팝업 모달 → 전용 편집 페이지 (/admin/essays/edit/[id])
•ImageUploader — 에디터 바로 아래 독립 컴포넌트 (드래그/드롭/다중 업로드)
•커스텀 이벤트 'post:image-uploaded' — 업로드 → 에디터 본문 + ThumbnailPicker 동시 반영
•다중 이미지 첨부 버그 수정 — setImage → insertContent + focus('end')로 순차 삽입
•에세이 thumbnail 필드 추가 — ContentRow 스키마 활용, createEssay/updateEssay 확장
•에세이 GET API (/api/admin/essays/[id]) — 편집 페이지 초기 로드용

2026-04-16

콘텐츠 명칭 통일 + 메뉴 재구성

•포럼 → 글방, 토픽 → 분류, 답글 → 글 (UI만, DB 타입/URL 유지)
•네비 Life/Like/Improve 3메뉴 → Blog 단일 메뉴로 통합
•/blog 신규 — 카테고리 탭 3개 + 최근글 페이징 리스트
•카테고리 페이지 좌측 사이드바 레이아웃 (200px, sticky)
•breadcrumb 추가 — Blog / Life
•홈 'N년 전 오늘'에 글방 분류 + 에세이 포함 ([글방]/[에세이] 라벨)
•공개 글방 상세에서 #1 댓글 번호 라벨 제거 (관리자 전용 표시)

2026-04-16

라이트박스 EXIF + 이미지 파이프라인

•사진 라이트박스 하단 EXIF 노출 (카메라/렌즈/조리개/셔터/ISO/초점거리/촬영일)
•/api/exif 서버 사이드 프록시 — CORS 우회, 호스트 화이트리스트 검증
•WebP EXIF 청크 수동 파싱 — exifr 7.1.3 미지원 대응 (Exif\0\0 prefix 제거)
•업로드 시 Sharp 변환 — .rotate().webp({quality:85}).withMetadata()로 EXIF 보존
•raw JPEG → WebP 변환 시 메타데이터 그대로 유지 (VP8X extended container)
•업로드 파일 크기 한도 10MB → 20MB (카메라 원본 JPEG 대응)
•Sharp 네이티브 바인딩용 runtime=nodejs + maxDuration=30s 설정

2026-04-15

UX 즉시 피드백 + Turso 성능

•NextTopLoader — 페이지 전환 즉시 progress bar 표시 (accent 색, 2px)
•스켈레톤 로딩 — app/loading.tsx + [id]/[slug]/loading.tsx + photo/loading.tsx
•Vercel Function Region icn1 Seoul 고정 — 한국 독자 응답속도 최적화
•unstable_cache 확장 — getContentByParent, listContentByCategories, getAdjacentContent, listCategories, listCommentsByPost
•에세이 게시일시 필드 + CRUD 액션 확장 (기존 posts/docs와 일관성)
•글방 새 글/분류/글 생성 시 datetime-local 지원 (KST)

2026-04-14

헬스체크 시스템 + KST + 편지함

•/admin/health 자동 점검 시스템 — Vercel Cron 매일 04:13 KST
•7개 핫패스 응답시간 측정 (WARN 1500ms, FAIL 3000ms)
•이미지 URL 404 감지 + HTML entity decode
•CRUD 라이프사이클 검증 — post/doc/essay/comment 생성/읽기/삭제
•health_reports 테이블 + 90일 prune + 관리자 뷰어
•KST 타임존 수정 — Vercel UTC → new Date(+9h) + UTC getters
•/admin/letters 편지함 — 편지지 UI, 읽음 관리, mailto 답장, 삭제
•사이드바에 편지 미읽음 뱃지 + 헬스 상태 뱃지 표시
•.vercelignore의 docs/ 패턴 → /docs/로 수정 (app/admin/docs 오배제 방지)

2026-04-13

보안 강화 + 성능 최적화

•Google OAuth fail-open 수정 — 빈 allowlist 시 deny (settings.json 기반)
•Settings 페이지 3개 독립 폼 분리 (부분 제출 시 allowlist 삭제 방지)
•simpleHash → bcrypt 이중 경로 (신규 bcrypt, 레거시 fallback)
•댓글 honeypot + IP rate limit (10req/min) + 길이 2000자 제한
•JSON atomic write (temp+rename) 데이터 손실 방지
•업로드 경로 local → Cloudflare R2 교체 (Vercel ephemeral FS 문제 해결)
•posts-index.json 분리 — 메모리 11.7MB→3MB (74% 감소)
•EditButtonClient 분리 — 글 상세 SSG 유지 (auth() 제거)
•OG 이미지 CDN 캐싱 (Cache-Control 24h)

2026-04-13

디자인 개선 + 접근성

•body font-size 14px→17px (DESIGN.md 명세 일치)
•focus-visible 스타일 추가 (accent 컬러 아웃라인)
•prefers-reduced-motion 지원 (애니메이션 비활성화)
•skip-to-content 링크 (키보드 네비게이션)
•font CDN preconnect 추가 (FOUT 감소)
•모바일 메뉴 터치 타겟 min-h-[44px] 보장
•다크모드 — CSS 변수 기반 + 토글 + FOUC 방지 인라인 스크립트
•next/image 컴포넌트 교체 (Hero priority, fill, sizes)
•Error Boundary — error.tsx + global-error.tsx

2026-04-13

cultural-archive 풀 머지

•cultural-archive(cl.324.ing) → dynoblog /culture/ 라우트로 통합
•Firebase Firestore 데이터 (콘서트 200, 영화 410, 전시, 독서)
•firebase-admin SDK로 서버 컴포넌트 호환 (클라이언트 SDK 제거)
•Server Actions 기반 CRUD (인증 필수, noStore 캐시 무효화)
•Firestore 타입 혼재 정렬 문제 해결 (string vs Timestamp)
•admin 사이드바에 🎭 문화생활 메뉴 + 하위 메뉴 5개
•콘서트/영화 관람일시 datetime-local 지원
•ISBN 조회 API + 커버 이미지 R2 자동 저장 (books/{isbn}.jpg)
•ISBN 일괄 보강 — 제목으로 ISBN 검색 → 데이터 자동 입력

2026-04-13

UX 기능 (Phase 1~2)

•스크롤 프로그레스바 — 화면 최상단 accent 3px
•ScrollToTop — 우하단 버튼, 400px 이상 스크롤 시 표시
•읽기 시간 — 글 상세 날짜 옆 'N분 읽기' (500자/분)
•Cmd+K 검색 모달 — 전역 단축키, Fuse.js fuzzy, 키보드 네비게이션
•🎲 랜덤 타임머신 — 슬롯머신 연도 애니메이션 후 랜덤 글 이동
•📅 N년 전 오늘 — 홈 Hero 아래, 같은 월/일 과거 글 (±1일 확장)
•관련 글 추천 — 글 상세 하단, 같은 카테고리 4개 카드
•소셜 공유 — X(Twitter) + 링크 복사 + 모바일 네이티브
•Fuse.js 검색 인덱스 최적화 (1898KB→1297KB, -32%)

2026-04-13

재미 요소 + 기믹 (Phase 3~5)

•코나미 코드 이스터에그 (↑↑↓↓←→←→ba) — 벚꽃 파티클 + 20주년 메시지
•404 페이지 — 홈 이동 버튼 + 최근 글/에세이 5개
•TOC 사이드바 — 데스크톱 우측 sticky, 모바일 접이식
•Now Playing — Last.fm API, 이퀄라이저 애니메이션, Footer 배치
•/stats — GitHub 히트맵, 연도별 바 차트, 감정 온도계, 블로그 DNA
•/timeline — 2004~2026 인터랙티브 연대기, 마일스톤 마커
•/mood — 감정 기반 글 탐색 (밝음/잔잔/센티/열정/사색)
•/yearbook — 연감 인덱스 + 연도별 상세 (월별 차트, 첫/마지막 글)
•글쓰기 스트릭 — 🔥 연속 기록, 뱃지 (7/30/100/365일)

2026-04-13

감성 + 소통 + IndieWeb (Phase A~E)

•키네틱 타이포 히어로 — 스크롤 반응 font-weight/scale/blur 변화
•Ambient UI — 시간대별 배경색 (새벽~심야), 계절별 accent
•/photo/wall — Pinterest masonry 그리드, 연도 필터, 99장
•/guestbook — 방명록 (닉네임+이모지+메시지, honeypot+rate limit)
•/letter — 블로거에게 편지 (편지지 UI, 2000자, 봉투 애니메이션)
•/blogroll — 링크 큐레이션 (글쓰기/사진/음악/스포츠/기술)
•🕹️ 레트로 모드 — 2006년 스킨 (Gulim, outset 버튼, 파란 헤더)
•About 드롭다운 메뉴 (About/Archives/Timeline/Stats)
•Footer Gimmicks 메뉴 — 9개 기믹 페이지 링크

2026-04-13

테스트 + 리팩토링

•Vitest 테스트 스위트 8개 (data layer, bcrypt, settings, atomic write)
•firebase 클라이언트 SDK 제거 (-605 lines, 번들 절감)
•search-index excerpt 300→150자 축소 (-32%)
•culture 페이지 force-dynamic → revalidate=300 (ISR 캐싱)
•벤치마크 baseline 생성 — /search 1083ms→44ms (-96% 개선)

2026-04-12

태그 + RSS + 썸네일

•태그 자동완성 컴포넌트 (기존 태그 드롭다운, 키보드 네비)
•태그 검색 결과 페이지 (/tag/{name})
•관리자 태그 페이지 — 태그별 글 수 + 비율 바
•RSS 피드 (/rss) — 글/문서/에세이 통합, 관리자 설정으로 on/off
•썸네일 선택기 — 콘텐츠 내 이미지에서 선택
•OG 이미지 자동 생성 (/api/og) — 카테고리별 배경색 테마
•카테고리별 목록 레이아웃 차별화 (Life 2컬럼/Like 갤러리/Improve 아티클)

2026-04-11

관리자 고도화

•글/문서 편집 → 전체 페이지 에디터 (모달에서 변경)
•삭제 확인 팝업 — 모든 콘텐츠 타입에 적용
•TipTap 마크다운 지원 (# 제목, **굵게**, - 목록 자동 변환)
•Slug 입력란 — 글/분류/문서 (미입력 시 제목 자동 생성)
•게시일시 설정 — datetime-local, 미입력 시 저장 시점 자동
•관리자 설정 — 닉네임, 웹사이트, Google OAuth, 허용 이메일
•어드민 메뉴 재구성 — 계층 구조 (글→목록/카테고리/태그)

2026-04-11

코드 품질

•4개 에이전트 병렬 코드 리뷰 (아키텍처/보안/성능/스타일)
•리팩토링 — 공용 유틸 추출, 에디터 lazy load, 데드 코드 제거
•디자인 리뷰 (browse 스크린샷 기반) — C+ → B 개선
•Codex 리뷰 — P1/P2 이슈 3개 수정

2026-04-11

댓글 시스템

•댓글 입력 (이름/비밀번호/웹사이트/내용) — 2단계 대댓글
•비밀번호 확인 삭제 + 관리자 삭제
•글 제목 옆 💬 댓글 수 표시 + 앵커 링크

2026-04-11

디자인 시스템

•디자인 컨설팅 — craigmod.com, brunch.co.kr 리서치
•필름 아카이브 컨셉: warm gray 팔레트 + Pretendard/Noto Serif KR/SF Mono
•DESIGN.md 생성 — 타이포/컬러/스페이싱/모션/콘텐츠 패턴 정의
•매거진 스타일 메인 페이지 — 섹션별 레이아웃 차별화
•모바일 햄버거 메뉴 + 터치 타겟 개선
•Archives 페이지 — 연도별 타임라인 + 통계

2026-04-11

SEO + 보안

•sitemap.xml 동적 생성 (전체 페이지)
•robots.txt (크롤링 허용, /admin /api 차단)
•OG/Twitter 메타 태그 + JSON-LD (BlogPosting)
•canonical URL + 301 리다이렉트 (trailing slash)
•NextAuth v5 관리자 인증 (Credentials + Google OAuth)
•middleware.ts로 /admin, /api/upload 보호
•Server Actions 전체 세션 검증
•파일 업로드 확장자 화이트리스트 (jpg/jpeg/png/gif/webp)

2026-04-11

이미지 마이그레이션

•WordPress 이미지 14,054개 다운로드 + WebP 변환 (6.4GB → 1.5GB, 77% 절감)
•Cloudflare R2 업로드 (12,834개, 무료 범위 내)
•콘텐츠 내 이미지 URL 일괄 치환 (19,489개)
•이미지 라이트박스 (클릭 → 전체화면, 키보드/화살표 네비게이션)

2026-04-11

관리자 시스템 구축

•관리자 대시보드 — 전체 통계, 연도별 글 수, 글방 현황
•글/글방/문서/에세이 CRUD (Server Actions + JSON 파일 기반)
•TipTap WYSIWYG 에디터 (글/문서/에세이)
•Lexical 에디터 (글방)
•d.324.ing 스타일 에디터 (문서: 소스/미리보기/WYSIWYG 3탭)
•카테고리 관리 — WordPress 계층 구조 (38개 카테고리, 부모-자식)

2026-04-11

WordPress → Next.js 16 마이그레이션 시작

•WordPress XML Export 파싱 (79MB, 9,859개 아이템 → JSON 변환)
•Next.js 16 App Router + Tailwind CSS v4 프로젝트 구축
•블로그 글 2,614개 정적 페이지 생성 (빌드 4.3초)
•카테고리별 페이지 (Life/Like/Improve) + 네비게이션
•글방 (bbPress) 11개 글방, 109개 분류, 2,113개 글 마이그레이션
•에세이 (KBoard) 123편 마이그레이션
•문서 (Doc) 55개 마이그레이션
•사진 (Photo) 106개 포스트 + 3개 섹션 (Snaps/Photolog/Park Life)

마이그레이션 통계

2,614

블로그 글

14,054

이미지 (WebP)

77%

이미지 절감

20년

운영 기간