Github 블로그 최적화 작업일지

게시 2026/03/04 업데이트 2026/03/04

By Kenzie 6 분읽는 시간

블로그 콘솔에서 sw.min.js 관련 오류를 발견하고, 겸사겸사 전체적인 최적화를 진행한 기록입니다.

발단 - sw.min.js 오류 발견

브라우저 개발자 도구 콘솔에서 다음과 같은 오류가 반복적으로 출력되고 있었습니다.

(anonymous) @ sw.min.js:1
Promise.then
(anonymous) @ sw.min.js:1

sw.min.js는 이 블로그의 PWA(Progressive Web App) 서비스 워커 파일입니다. Jekyll 빌드 시 assets/js/pwa/sw.js에서 생성되는데, 원인을 추적해보니 여러 문제가 얽혀있었습니다.

수정 1 - 서비스 워커 에러 핸들링 추가

서비스 워커의 fetch 이벤트 핸들러에서 네트워크 요청이 실패할 경우(오프라인, DNS 오류 등) .catch() 처리가 없어서 Unhandled Promise Rejection이 발생하고 있었습니다.

수정 전:

  
return fetch(event.request).then((response) => {
  // 캐싱 로직...
  return response;
});
// .catch() 없음 → 네트워크 실패 시 에러 발생

수정 후:

  
return fetch(event.request).then((response) => {
  // 캐싱 로직...
  return response;
}).catch(() => caches.match(event.request));
// 네트워크 실패 시 캐시에서 fallback

네트워크 요청 실패 시 캐시된 응답을 반환하도록 처리했습니다. 오프라인 환경에서도 이전에 캐시된 페이지를 볼 수 있게 됩니다.

수정 2 - polyfill.io CDN 제거 (보안 이슈)

블로그에서 polyfill.io CDN을 참조하고 있었는데, 2024년에 이 도메인이 중국 기업에 인수된 뒤 악성 코드를 주입하는 보안 사고가 발생했습니다. 현재는 사실상 폐쇄된 상태입니다.

참조하고 있던 위치:

_data/origin/cors.yml - CDN preconnect 설정
_includes/js-selector.html - MathJax용 polyfill 스크립트 로드

MathJax v3는 자체적으로 필요한 polyfill을 포함하고 있어서 별도의 polyfill 로드가 불필요합니다. 두 곳 모두 완전히 제거했습니다.

수정 3 - 사이트 URL 설정

_config.yml의 url이 빈 문자열로 되어 있었습니다.

  
# Before
url: ""

# After
url: "https://kenziedev.github.io"

이 값이 비어있으면 다음 항목들이 모두 영향을 받습니다:

sitemap.xml - 검색엔진에 제출하는 사이트맵의 URL이 누락
robots.txt - sitemap 경로가 올바르게 생성되지 않음
OG 태그 - SNS 공유 시 미리보기 정보 누락
서비스 워커 - 캐시할 리소스 경로 해석 오류

수정 4 - SEO 최적화

언어 설정

블로그 콘텐츠가 한국어인데 lang: en으로 설정되어 있어서 lang: ko-KR로 변경했습니다. Giscus 댓글 시스템의 언어도 "en"에서 "ko"로 맞춰 변경했습니다.

description 개선

  
# Before
description: >-
  Programmer JAVA PHP REACT BACKEND SERVER

# After
description: >-
  백엔드 개발자 Kenzie의 기술 블로그. Java, React, 서버 개발 경험과 노하우를 공유합니다.

description은 검색엔진 결과에 표시되는 메타 설명입니다. 키워드 나열보다는 의미 있는 문장이 SEO에 더 효과적입니다.

viewport 메타태그 수정

head.html에서 viewport 메타태그에 쉼표가 하나 빠져있었습니다.

<!-- Before -->
content="width=device-width, user-scalable=no initial-scale=1, ..."

<!-- After -->
content="width=device-width, user-scalable=no, initial-scale=1, ..."

user-scalable=no와 initial-scale=1 사이에 쉼표가 없어서 일부 브라우저에서 viewport 설정이 올바르게 파싱되지 않을 수 있었습니다.

수정 요약

항목	수정 파일	분류
서비스 워커 에러 핸들링	`assets/js/pwa/sw.js`	버그 수정
polyfill.io 제거	`_data/origin/cors.yml`, `_includes/js-selector.html`	보안
사이트 URL 설정	`_config.yml`	SEO/기능
언어 설정 (ko-KR)	`_config.yml`	SEO
description 개선	`_config.yml`	SEO
Giscus 언어 설정	`_config.yml`	UX
viewport 쉼표 수정	`_includes/head.html`	호환성

마치며

콘솔 오류 하나를 추적하다 보니 여러 최적화 포인트를 발견하게 되었습니다. 특히 polyfill.io 보안 이슈는 Chirpy 테마를 사용하는 다른 블로그에도 해당될 수 있으니 참고하면 좋겠습니다.

앞으로 해볼 만한 작업들:

Google Search Console 등록 및 google_site_verification 설정
social_preview_image 설정으로 SNS 공유 시 미리보기 이미지 추가
이미지를 GitHub Issues URL 대신 assets/img/ 디렉토리로 관리
외부 CDN 의존성을 self-hosting으로 전환 검토

Web, Blog