blogsumnail

프로젝트 개요

blogsumnail.com은 네이버 블로그용 썸네일·스킨을 브라우저에서 만들 수 있는 메이커 도구와, SEO 가이드 콘텐츠를 함께 제공하는 사이트다. 기획·개발·운영을 혼자 맡은 단독 사이드 프로젝트로, 2026-02-23부터 2026-07-24까지 약 5개월간 진행했다.

핵심 지표

• 222 커밋 — 단독 개발, 커밋 100%
• 이미지 압축 평균 87% 감소 — 14개 이미지 일괄 압축 (표시된 10개 실측 23.1MB → 2.6MB, 88.7%)
• 콘텐츠 83편 → 25편 — blogPosts.ts 엔트리 카운트 기준 정리
• 추적 파일 140개 — JPG 76 / tsx 23

대표 트러블슈팅

1. html2canvas 썸네일 다운로드 시 정중앙 가로선 결함

• 문제: 도구에서 만든 썸네일을 PNG로 저장하면 이미지 정중앙에 원치 않는 가로선이 렌더링됐다. 도구의 핵심 산출물이 손상되는 결함이었다.
• 해결: 스크롤 오프셋을 보정하고 aspect-ratio를 무력화해 캔버스 렌더링 좌표를 교정했다. 증상만 가리지 않고 캔버스 렌더 좌표라는 근본 원인까지 수정했다. 캡처에 쓰는 html2canvas는 npm 의존성으로 번들에 포함하지 않고, 초기 로드에 불필요한 무게를 더하지 않도록 CDN(v1.4.1)을 afterInteractive로 지연 로드한다.
• 효과: 도구의 핵심 산출물인 썸네일의 무결성을 확보했다.

수정 후 도구에서 내보낸 실제 PNG 산출물이다. 하단 밴드를 전체 오버레이·그라데이션으로 렌더해 정중앙 가로선 없이 저장된다.

2. 이미지 페이로드 과다로 인한 LCP 부담

• 문제: 원본 JPG가 2~3MB에 달하는 이미지가 다수 서빙돼 LCP에 부담을 줬다.
• 해결: 이미지 14개를 일괄 압축(평균 87% 감소)하고 AVIF 우선 서빙 설정을 적용했다. 캐시 헤더와 preload를 함께 걸고, MOV 파일은 .gitignore로 저장소에서 제외했다.
• 효과: 표시분 기준 이미지 전송량이 실측 88.7% 감소했다. (AVIF와 webp의 절감률은 Next.js 런타임 생성이라 정적 비교 페어가 없어 별도 수치로 측정하지 않았다.)

그 외 사례

• 네이버 투명 위젯 클릭 영역-이미지 위치 불일치: 위젯 크기와 투명 이미지, 클릭 영역이 어긋나 링크가 빗나가던 문제를, 영역 크기를 코드에서 강제하고 이미지맵을 상대좌표로 전환해 네이버 제약(170px·5열) 하에서 좌표 종속성을 제거했다.
• 대용량 바이너리 이력 재유입: 커밋 이력에 대용량 JPG/MOV가 누적되던 문제에 재유입 방지 규칙을 세우고, 개인정보 우려 이미지를 삭제·참조 제거했다. (저장소 크기 감소분은 미측정.)

콘텐츠 통폐합 (저품질 대응)

애드센스 "저품질" 판정에 대응해 블로그 글을 정리했다. 82편을 24개 허브로 통폐합했고(총 8배치, 301 연결), 이와 별개로 배열 실측 기준 전체 엔트리는 통폐합 미대상 1편을 포함해 83편에서 25편으로 감소했다.