DEV NOTES · 2026. 4. 11 ~ 진행 중

개발노트

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

/01

기술 스택

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

/02

진행

최근이 위.

2026-05-23

/olenmane → /feed 전면 리네이밍 + 인스타 스타일 + 메인 D 옵션 split

라우트 — app/olenmane → app/feed, app/admin/olen → app/admin/feed, app/api/admin/olen → app/api/admin/feed. next.config.ts 에 /olenmane(/:id) → /feed(/:id) 308 redirect 추가 (외부 inbound 보호)
DB — content.type 'olen' → 'feed' UPDATE (3 row), id prefix 'olen-' → 'feed-' UPDATE (3 row). content_links / comments 참조 0 이라 마이그 단순. ID 생성 함수도 'feed-' prefix
내부 식별자 — Olen* → Feed* (17개 함수/타입: listFeeds, getFeedById, getFeedGaps, FeedListItem, FeedFullItem, FeedGap, FeedAdminItem, ...). 파일명 olen-* → feed-* (lib + components). lib/olen-data.ts → lib/feed-admin.ts (feed-data.ts 가 ARCH-006 feed.json API 용 별도 모듈이라 naming 충돌 회피)
CSS — .olen-* → .feed-*, .olenmane → .feed. 컴포넌트 wrapper className 도 함께 (sed 의 .olenmane 패턴이 dot 만 매치해서 JSX className 누락 → 두 단계 적용)
cache tags — CONTENT_TAGS.olen → .feed, 'content:olen' → 'content:feed'. ContentTagKey 타입 자동 갱신
네비 — Feed 항목을 4곳 모두 맨 앞 (app/header.tsx NAV / app/mobile-bottom-nav.tsx ITEMS / components/v2/footer.tsx EXPLORE / components/v2/mock-data.ts). admin 사이드바 '오랜만에' → '피드 관리'
사용자 노출 텍스트 — /feed hero eyebrow 'OLENMANE' → 'FEED', title '오랜만에' → '피드', sub '디노의 기록'. /feed/[id] back link, metadata 다 통일
인스타 스타일 — /feed 카드에 content 본문 inline (trusted 운영자 입력). detail 페이지로의 link 제거 (라우트는 유지). lib/db/feed-queries.ts 의 listFeeds 가 FeedListItem → FeedFullItem (contentHtml 포함) 반환. 썸네일 별도 img 제거 (본문 안 이미지와 중복)
관계 태그 표시 — feed-card.tsx 가 이전엔 kind 만 ('· person'). value 누락 → '👤 김민수 / 📍 시부야 / 🎯 활동 / 🏷️ 토픽' 형식으로 icon + value 표시
메인 페이지 D 옵션 — components/v2/feature.tsx (01 계속 흐른다) 가 records 박스를 2-col grid 로. 왼쪽 '나의 기록' 5개 (lifePosts), 오른쪽 'Feed' 5개 + 전체 보기 → 링크. Feature 가 async server component 로 변환 (listFeeds() 직접 await). lib/v2-data.ts 의 records limit 4 → 5
비교 시도 후 정리 — Hero 직후 옵션 A (full card) + 옵션 C (mini widget) 잠시 같이 박았다가 D 선택 후 둘 다 삭제 (components/v2/feed-section.tsx, feed-widget.tsx)
필사 카테고리 사진 풀 제외 — lib/random-pick.ts 의 buildPhotoPool 에 PHOTO_POOL_EXCLUDE_CATEGORIES 추가 ('한글 필사', '영문 필사', '하루 15분 필사'). 처음 추측한 '한글필사'/'영문필사' 공백 없는 이름은 실제 DB 와 불일치라 fix
popular 페이지 grid 깨짐 fix — grid-cols-[2.5rem_1fr_auto] 의 1fr default minmax(auto,1fr) 가 chip 의 wrappable text 를 min 으로 잡아 column 폭 squeeze. minmax(0,1fr) 강제 + chip/time whitespace-nowrap 으로 한 줄 강제

2026-05-20

페르소나 웹검색 + 채팅룸 리팩토링 + 404 캐시 한도 fix

페르소나 웹검색 — app/api/personas/ask 에 Anthropic 서버사이드 도구 web_search_20250305 추가 (max 3회/응답). 페르소나가 외부 사실/최신 정보 필요 시 자동 검색, 본인 회상엔 검색 금지하도록 system prompt 가이드
응답 파싱 변경 — response.content 가 [text, server_tool_use, web_search_tool_result, text] 같이 멀티 블록 구조로 바뀜. 마지막 text 블록만 JSON 파싱 대상으로 선택
UI 배지 — PersonaMessage 에 transient usedWebSearch 플래그 추가 (DB 영구 저장 안 함). 검색 사용한 reply 옆에 🌐 검색 배지 노출 (future 페르소나 'conf 72%' 배지와 동일 스타일)
비용/지연 캡 — max_uses 3 으로 응답당 비용 +$0.01~$0.03, 지연 +2~10s 상한. 검증: '비트코인 시세' 질문 → usedWebSearch=True 출처 인용, '사진 찍을 때 뭘 봐' 질문 → usedWebSearch=False 본인 사진 데이터만 인용
채팅룸 리팩토링 — app/personas/chat-room.tsx 972 → 498 줄. 인라인 <style> 블록 (420줄) 을 app/personas/personas.css 로 분리, 상수/유틸 (PERSONA_CLASS / STARTERS_POOL 20개 / pickStarters / formatTime / sleep) 을 personas-helpers.ts 로 분리. 동작 100% 동일
404 캐시 한도 fix — app/not-found.tsx 가 getAllPosts() (5443 entry) 호출 → Next Data Cache 단일 entry 2MB 한도 초과 (실제 2.34MB) 에러. excerpt='' 으로 잘라도 JSON serialization 오버헤드 (field name 반복 × 5443 = ~1.27MB) 때문에 해결 안 됨
404 fix 방식 — lib/posts.ts 에 getRecentPosts(limit) 추가, listContentIndex 의 SQL LIMIT 활용해 5개만 가져옴. not-found.tsx 가 getAllPosts(5443).slice(0,5) → getRecentPosts(5) 로 교체. 캐시 자체는 archives/RSS/sitemap 등 다른 호출처에서 그대로 사용
결정 사항 — DB 컬럼 (used_web_search) 추가 보류. rating 컬럼처럼 마이그레이션 추적 안 된 상태를 늘리지 않으려고 응답 단위 transient 플래그로 유지. 새로고침 시 배지는 사라지지만 정보성 표시라 OK

2026-05-17

dynoblog 3-Phase 개선 — 관리자 마찰 감소 + 검색/발견 + AI 보조

Phase 1 — TMDB API 연동: 영화 제목 입력 시 감독/연도/포스터 자동 채움 (lib/culture/tmdb.ts + autocomplete UI)
Phase 1 — Quick Draft: 모바일 최적화 빠른 입력 폼 (/admin/quick). 영화/책/콘서트/전시 최소 필드만으로 즉시 저장
Phase 1 — 데이터 정합성 대시보드: 누락 커버/빈 감독/별점 이상 자동 감지 (/admin/culture/integrity)
Phase 1 — 중복 감지: 같은 제목+날짜 입력 시 토스트 경고 (checkDuplicateInList)
Phase 1 — Bulk-tag API: 문화생활 항목 일괄 태그 수정 (/api/admin/culture/bulk-tag)
Phase 2 — 통합 검색 확장: 기존 블로그 검색에 영화/책/콘서트/전시 통합. type/year 패싯 필터 지원
Phase 2 — 검색 필터 UI: 타입별 칩 + 연도 셀렉트 (app/search/_components/filter-bar.tsx)
Phase 2 — 양방향 콘텐츠 링크: content_links 테이블 + 에디터 Link Picker 모달 + 글 상세 '관련 항목' 섹션
Phase 2 — 리서페이싱: 'N년 전 오늘' API + 관리자 대시보드 위젯 + 미완성 초안 리마인더
Phase 3 — AI 관련 항목 추천: claude-haiku-4-5 기반 opt-in 추천 (버튼 클릭만, 자동 실행 금지)
Phase 3 — AI 요약 보조 뷰: 3문장 요약을 ai_summary 별도 컬럼에 저장 (원문 보호)
FTS5 마이그레이션 준비: trigram 토크나이저 한글 호환 (scripts/migrate-add-fts5.sql)
새 패키지 0개, 새 환경변수 1개 (TMDB_API_KEY). 기존 인프라만 활용
PDCA 사이클 완료: Plan → Design → Do → Check(75%) → Act(92%) → Report

2026-05-07

장애 회고 — jsdom prod 호환 + 재발방지 가드 도입

장애: forum/topic mutation + culture/olen detail 페이지가 prod 에서 server component error. 진단 ~90분, 추측 fix 5번 무효. 사용자가 Vercel Function logs 의 정확한 throw message (ERR_REQUIRE_ESM ... @exodus/bytes/encoding-lite.js) 공유 후 1분 만에 해결
원인: lib/sanitize-html.ts 가 isomorphic-dompurify import → jsdom transitive dep ESM 모듈을 Vercel CommonJS Lambda 가 require() 시도 → throw. dev (Turbopack) 에선 module resolution 차이로 통과. server action 모듈 evaluate 단계부터 깨져서 forum mutation 전부 fail
fix 1 (긴급): lib/sanitize-url.ts 분리 — sanitizeUrl 만 별도. server action 의 jsdom import chain 끊음
fix 2 (완전): lib/sanitize-html.ts 자체를 jsdom-free 정규식 구현으로 재작성. <script>/<style>/on*/javascript:/iframe trusted host 모두 처리. trusted source 라 정규식 충분
재발방지 [A3]: scripts/check-jsdom-deps.sh + package.json prebuild hook. jsdom-가족 패키지 (isomorphic-dompurify, jsdom, happy-dom) import 시 빌드 차단
재발방지 [B1]: package.json 에서 isomorphic-dompurify dependency 제거. dead dep + 공격 표면 ↓
재발방지 [A2]: .github/workflows/prod-smoke.yml — main push 후 120초 대기 → 핵심 endpoint 52개 (public 200 + admin 307 + API 401) 자동 verify. 매일 0:00 UTC 정기 health check 도
재발방지 [B3]: app/error.tsx + global-error.tsx 가 error.digest + URL + timestamp 표시 + 클립보드 복사 button. 사용자가 관리자에게 logs 추적 정보 빠르게 전달
교훈: prod issue 시 첫 단계는 항상 Vercel Function logs 확보. 코드 추측 push 보다 우선. dev 통과 ≠ prod 통과 (module resolution / runtime 차이)

2026-05-06

블로그 전체 리팩토링 — 공통 헬퍼 단일화 + 인증/구조/보안 정리

Batch A — utils 단일화: lib/utils.ts 에 stripHtmlToText / excerptFromHtml / postHref / formatDateShort 추가, extractThumbnail 정규식에 .gif 포함시켜 3 버전 → 1 통합. 약 30개 콜사이트 한 줄로 치환. 새로 lib/search-types.ts 만들어 SearchHit 타입 4 곳 중복 제거
Batch B — 인증 가드 통합: lib/auth-utils.ts 에 requireAuthApi() 추가. 14개 admin/upload/isbn-enrich API 라우트의 인라인 두 줄 (auth + 401 응답) 을 헬퍼 호출 한 줄로 코드모드. drift 위험 제거
Batch B — useIsAdmin 훅 추출: lib/client/use-is-admin.ts. 모듈 스코프 캐시 + in-flight promise dedupe 로 한 페이지에 두 컴포넌트 마운트되어도 /api/auth/session 1회만 호출
Batch C — v2 namespace 정리: app/v2/_components/* (17 파일) → components/v2/, shell.tsx + mock-data.ts → components/v2/, _data.ts → lib/v2-data.ts. /v2 라우트 자체 폐기 (root 와 byte-for-byte 중복). pre-hydration script 의 /v2 분기 제거
Critical — 카테고리 rename batch transaction: 이전엔 forEach + await upsertContent 로 N개 글 직렬 round-trip → libsql client.batch() SQLite transaction 한 번. 중간 실패 시 rollback 보장
Critical — 카테고리 count 정확성: categories.count 컬럼은 stale 보장 (어떤 mutation 도 갱신 안 함) → listCategories SQL 에 LEFT JOIN + json_each + GROUP BY 로 즉석 COUNT. 카테고리 N개여도 query 1회
High — revalidate detail path 명시: forum/topic/reply mutation 시 /forums/{forumId}/{topicId}, archive 시 /doc/archives/{slug} + /raw 추가. revalidateTag(content) 안전망 위에 route segment cache 까지 일관 보장
High — 댓글 삭제 brute-force 방어: deleteCommentByUserAction 에 분당 5회/IP rate-limit 추가 (bcrypt cost=10 비번 비교가 비싸서 server CPU bound DoS + brute-force 가능했음)
검증 — 53/53 endpoint pass: admin page 21개 307, admin API 14개 401, 공개 페이지 18개 200. 권한 가드 100% 일관, mutation 진입점 54개 모두 requireAuth 통과
총 7 commit / 84 files / +473 -395. 시작 health 13/100 → 약 78/100

2026-05-06

검색 전체 콘텐츠 동적화 — Fuse.js / mock → /api/search 통합

기존: 빌드 타임 public/search-index.json (1.3MB) + Fuse.js 클라 검색. 글 작성/수정 후 재빌드 전까지 미반영, 본문 매치 누락 다수
신규: /api/search route — title + content LIKE 매칭, post / essay / topic / docs 4개 타입 통합. unstable_cache + revalidateTag("content") 로 글 변경 즉시 무효화
/search 페이지 (검색 페이지) — Fuse.js 제거, debounce 200ms + AbortController 로 stale 응답 방지. limit=50
검색 모달 (⌘K — app/search-modal.tsx) — 정적 인덱스 fetch 제거. 동일 패턴, limit=10
v2 홈 검색 오버레이 (app/v2/_components/search-overlay.tsx) — mock-data POOL 제거. 실 DB 검색으로 결과 클릭 시 해당 글로 이동
type 라벨: post → 글/Record, essay → 에세이/Writer, topic → 글방/Forum, docs → 문서/Doc — UI별 톤에 맞춰 한글/영문 매핑
ORDER BY title-LIKE 우선 + date DESC — 제목 직접 매치 결과를 본문 매치보다 위로 정렬

2026-05-06

포럼 인라인 편집 per-item + 사진 편집 버튼 + 관리자 UX 개선

포럼 토픽 페이지 — 토픽 본문 + 각 답글마다 개별 ✏️ 수정 버튼. 단일 "토픽 수정" 버튼이 추가 CTA로 오인되던 문제 해결
ItemEditControls 컴포넌트 — kind: "topic" | "reply" 디스크리미네이티드 props. 토픽은 제목+본문, 답글은 본문만
NewReplyForm — 답글 작성 폼을 별도 컴포넌트로 분리, 토픽 페이지 하단 마운트
사진 상세 페이지 (/photo/[id]) — EditButtonClient 추가. 관리자 로그인 상태에서 편집 페이지로 바로 이동
/admin/forums 답글 목록 — 본문 미리보기 300자 cap + align-top + break-words. 긴 답글 때문에 표 레이아웃 깨지던 문제 해결
한글 IME tag-input — nativeEvent.isComposing / keyCode 229 체크로 합성 중 Enter 가 마지막 글자만 태그하던 버그 수정
프로덕션 4.5MB body 한도 우회 — lib/client/upload-image.ts 클라이언트 리사이즈 + 응답 파싱 견고화
node_modules 재설치로 jsdom@29 ↔ whatwg-url@5 호이스팅 충돌 해소 — whatwg-url@16.0.1 정상 설치

2026-04-20

하단 모바일 네비 복구 + nav 겹침 해소

prod CSS 실측 결과 Tailwind v4 가 .md\:hidden{display:none} 을 @media 래퍼 없이 bare 출력 → 모든 뷰포트에서 하단 메뉴가 숨겨지던 버그 발견
MobileBottomNav className: md:hidden → mobile-bottom-nav 커스텀 클래스로 교체
globals.css 에 @media (min-width:768px) { .mobile-bottom-nav { display:none } } 명시 규칙 추가
topnav Timeless ↔ About 겹침: .nav-util 숨김 브레이크포인트 1000→1100px 확장
1100~1280px 구간 column/row gap 미세 조정 (center 22px · right 14px)

2026-04-20

/doc/archives 성능 최적화 + /{id} 단축 URL + 히어로 데일리 인용

/doc/archives/[slug] contentHtml 을 별도 route handler /raw 로 분리 → RSC payload 152KB → 12KB (96% ↓), FCP 1.66s → 116ms
ArchiveViewer 에 src prop 추가 (srcDoc 와 양립). edge cache 1h + SWR 1d 헤더
getArchiveMetaBySlug 추가 — content 제외 경량 조회. page 서버 컴포넌트는 메타만 fetch
/{id} 단축 URL 라우트 신설 — 숫자 단독 경로를 /{id}/{slug} 로 301 영구 이동 (Google 색인된 레거시 URL 흡수)
v2 Hero eyebrow 문구를 KineticHero 식 KST 일자 기반 로테이션 (9개 QUOTES, suppressHydrationWarning + useEffect)
topnav 배경이 /doc/* 크림톤과 어긋나던 이음새 제거 — body:has(.archives-scope) 선택자로 #f8f6f1 오버라이드
brand-full 'dyno.blog' 텍스트에 로고와 동일한 홈 링크 + hover 색상 transition
benchmark 측정 결과 저장: .gstack/benchmark-reports/baselines/baseline.json

2026-04-19

관리자 새 문서 에디터 d.324.ing 3탭 + TipTap WYSIWYG + 이미지 삽입

/admin/docs/edit/new + /admin/docs/edit/arch-* → d.324.ing 포팅 에디터 (archive-editor.tsx)
3탭 구조: 소스 (raw HTML textarea) / 미리보기 (iframe srcDoc) / 편집 (TipTap RichEditorLazy)
HTML 파일 드래그 업로드 + 이미지 업로드 (+ 드래그·드롭) — 활성 탭에 맞춰 자동 삽입
이미지 삽입 로직: 소스=커서 위치, WYSIWYG=post:image-uploaded 이벤트, 미리보기=본문 끝 append
신규 API: POST /api/admin/archives, GET|PUT /api/admin/archives/[id]
lib/archive-data.ts: createArchive, getArchiveForEdit 추가
레거시 WP 문서 (숫자 id) 는 기존 rich editor 유지 — 하위 호환 보장
/api/admin/docs/categories 엔드포인트 통합 → /admin/docs 필터와 동일한 canonical 카테고리 반환

2026-04-19

d.324.ing → dyno.blog/doc 통합 + Turso 이전 Phase 1~4

Phase 0 inventory: archives 48 + categories 8 + subscribers 1 실측. notes/knowledge 0, Storage 미사용 확인 → Phase 3 스코프 제거
Phase 1 DDL: subscribers 테이블 신설 + categories 에 color/display_order ALTER ADD + content.type 에 'archive' 추가
Phase 2 데이터 이전: Firestore → Turso 48+8+1 INSERT OR REPLACE (Korean slug 일부가 NFD 자모 분해 형태로 저장되어 추후 조회 시 NFC/NFD 양쪽 OR 매치 필요)
/doc 라우트 재설계: WP docs + 324 archives 통합 리스트 (canonicalCategoryId 로 arch-X → X 병합, CATEGORY_ALIASES 로 arch-blog → talk 등 수동 매핑)
/doc/archives/[slug] iframe 뷰어 — .archives-scope 로 격리된 d.324.ing CSS (1495줄) + 사이트 chrome (.dyno-v2) 상세 페이지 한정 숨김
/admin/docs 통합 리스트: WP docs + 324 archives 하나의 테이블, source 프롭으로 CRUD action 분기 (quick-edit 모달 재사용)
subscribe-form 포팅 (API endpoint 는 Phase 5 미구현 placeholder)
라우트 정리: /doc/archives → /doc 리다이렉트로 북마크 호환

2026-04-19

v2 리디자인 전면 프로덕션 배포

app/v2/ 신설: Hero, Feature, Essays, YearsAgo, PhotoWall, Forums, Timeline, Gimmicks, Shell
app/page.tsx 를 V2Shell + Hero 기반으로 교체 (기존 KineticHero 메인 구성 제거)
40+ 기존 라우트 스타일 업데이트 — about/blog/archives/blogroll/category/culture/forums/guestbook/letter/mood/photo/stats/tag/timeline/writer/yearbook 전부
components/ 공용 UI 프리미티브 신설 (button, card, chip, section-head)
app/layout.tsx, globals.css, next.config.ts, package.json 동시 업데이트
로컬 사전 빌드 검증 (exit 0) 후 커밋 05e366f 로 배포
middleware → proxy deprecation 경고 1건 (비차단, NextAuth 호환성으로 유지)

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)

/03

마이그레이션 규모

블로그 글

2,614

이미지 (WebP)

14,054

이미지 절감

77%

운영 기간

20년

2026-05-23

/olenmane → /feed 전면 리네이밍 + 인스타 스타일 + 메인 D 옵션 split

라우트 — app/olenmane → app/feed, app/admin/olen → app/admin/feed, app/api/admin/olen → app/api/admin/feed. next.config.ts 에 /olenmane(/:id) → /feed(/:id) 308 redirect 추가 (외부 inbound 보호)
DB — content.type 'olen' → 'feed' UPDATE (3 row), id prefix 'olen-' → 'feed-' UPDATE (3 row). content_links / comments 참조 0 이라 마이그 단순. ID 생성 함수도 'feed-' prefix
내부 식별자 — Olen* → Feed* (17개 함수/타입: listFeeds, getFeedById, getFeedGaps, FeedListItem, FeedFullItem, FeedGap, FeedAdminItem, ...). 파일명 olen-* → feed-* (lib + components). lib/olen-data.ts → lib/feed-admin.ts (feed-data.ts 가 ARCH-006 feed.json API 용 별도 모듈이라 naming 충돌 회피)
CSS — .olen-* → .feed-*, .olenmane → .feed. 컴포넌트 wrapper className 도 함께 (sed 의 .olenmane 패턴이 dot 만 매치해서 JSX className 누락 → 두 단계 적용)
cache tags — CONTENT_TAGS.olen → .feed, 'content:olen' → 'content:feed'. ContentTagKey 타입 자동 갱신
네비 — Feed 항목을 4곳 모두 맨 앞 (app/header.tsx NAV / app/mobile-bottom-nav.tsx ITEMS / components/v2/footer.tsx EXPLORE / components/v2/mock-data.ts). admin 사이드바 '오랜만에' → '피드 관리'
사용자 노출 텍스트 — /feed hero eyebrow 'OLENMANE' → 'FEED', title '오랜만에' → '피드', sub '디노의 기록'. /feed/[id] back link, metadata 다 통일
인스타 스타일 — /feed 카드에 content 본문 inline (trusted 운영자 입력). detail 페이지로의 link 제거 (라우트는 유지). lib/db/feed-queries.ts 의 listFeeds 가 FeedListItem → FeedFullItem (contentHtml 포함) 반환. 썸네일 별도 img 제거 (본문 안 이미지와 중복)
관계 태그 표시 — feed-card.tsx 가 이전엔 kind 만 ('· person'). value 누락 → '👤 김민수 / 📍 시부야 / 🎯 활동 / 🏷️ 토픽' 형식으로 icon + value 표시
메인 페이지 D 옵션 — components/v2/feature.tsx (01 계속 흐른다) 가 records 박스를 2-col grid 로. 왼쪽 '나의 기록' 5개 (lifePosts), 오른쪽 'Feed' 5개 + 전체 보기 → 링크. Feature 가 async server component 로 변환 (listFeeds() 직접 await). lib/v2-data.ts 의 records limit 4 → 5
비교 시도 후 정리 — Hero 직후 옵션 A (full card) + 옵션 C (mini widget) 잠시 같이 박았다가 D 선택 후 둘 다 삭제 (components/v2/feed-section.tsx, feed-widget.tsx)
필사 카테고리 사진 풀 제외 — lib/random-pick.ts 의 buildPhotoPool 에 PHOTO_POOL_EXCLUDE_CATEGORIES 추가 ('한글 필사', '영문 필사', '하루 15분 필사'). 처음 추측한 '한글필사'/'영문필사' 공백 없는 이름은 실제 DB 와 불일치라 fix
popular 페이지 grid 깨짐 fix — grid-cols-[2.5rem_1fr_auto] 의 1fr default minmax(auto,1fr) 가 chip 의 wrappable text 를 min 으로 잡아 column 폭 squeeze. minmax(0,1fr) 강제 + chip/time whitespace-nowrap 으로 한 줄 강제