✍️ 블로그 어드민 웹 폰트 설정 및 로딩 최적화 상세 설명서

본 프로젝트는 블로그의 시각적 완성도와 가독성을 높이기 위해 어드민 단에서 손쉽게 폰트를 커스터마이징할 수 있는 직관적인 편집 도구를 제공합니다.

단순히 폰트 이름을 적용하는 데 그치지 않고, 모바일 환경이나 네트워크 속도가 제한된 환경에서도 최고의 로딩 속도와 성능 점수(Lighthouse Performance)를 유지할 수 있도록 설계된 특별한 성능 최적화 엔진이 함께 동작합니다.

본 설명서는 어드민 디자인 에디터에서의 구체적인 폰트 설정 방법과, 내부적으로 폰트가 어떻게 최적화되어 방문자에게 빠르게 서빙되는지 동작 개념을 상세히 다룹니다.

---

📂 1. 디자인 에디터 내 폰트 설정 세부 항목

어드민 디자인 에디터 페이지의 설정 메뉴에서 블로그 레이아웃의 성격에 맞춰 글꼴 종류, 크기, 두께를 세밀하게 편집할 수 있습니다.

✍️ 1-1. 글로벌 웹 폰트 설정 (전체 페이지 영향)

블로그의 전체적인 본문 영역과 기본 인터페이스 전반에 기본값으로 바인딩되는 글로벌 폰트를 관리합니다.

• 기본 글꼴 설정 (Font Family):
  • 블로그의 가장 베이스가 되는 본문 서체를 지정합니다.
  • 입력 방법: 브라우저가 인식할 수 있는 글꼴 이름을 따옴표와 함께 적어줍니다. 비워두면 시스템 기본 폰트인 Inter 서체가 전체 블로그에 기본적으로 상속됩니다. (예: 'Noto Serif KR', serif 또는 Pretendard)
• 추가할 구글 웹 폰트 (Google Font Name):
  • 로고 텍스트나 핵심 위젯 타이틀 등 특정 영역에 포인트로 입히고 싶은 구글 폰트의 영문 명칭을 등록합니다.
  • 입력 방법: 쉼표(,)나 세미콜론(;)을 사용해 여러 개의 폰트를 나열하여 등록할 수 있습니다. (예: Noto Serif KR, Newsreader)
  • 연동 효과: 이곳에 입력한 커스텀 폰트명들은 헤더의 로고 폰트 설정이나 각 영역의 개별 글꼴 선택 옵션 드롭다운 메뉴에 자동으로 생성되어 편리하게 매핑할 수 있게 됩니다.
• 기본 글자 크기 (Base Size) 및 모바일 기본 글자 크기 (Base Size - Mobile):
  • 데스크톱과 모바일 환경 각각에서 서비스 전체 레이아웃의 기준이 되는 본문 글자 크기를 정의합니다.
  • 입력 방법 및 팁: 16px 이나 14px 같은 정밀한 절대 단위(px) 뿐만 아니라, 상위 환경이나 사용자의 브라우저 기본 글 크기 설정에 맞추어 유연하게 변동하는 상대 단위(rem, em) 형식의 주입도 완벽히 호환됩니다. (예: 데스크톱 1rem 또는 16px / 모바일 0.875rem 또는 14px)

🎨 1-2. 헤더 및 로고 폰트 설정

상단 네비게이션 헤더에 노출되는 브랜딩 로고 텍스트에 독립적인 디자인을 부여합니다.

• 폰트 패밀리 (Font Family):
  • 로고 텍스트에 입힐 서체를 드롭다운에서 선택합니다.
  • 기본 설정인 기본 폰트 상속 (Inherit)을 고르면 전체 베이스 폰트를 따라가며, 글로벌 웹 폰트 설정의 [추가할 구글 웹 폰트] 영역에 지정해 두었던 폰트가 있을 경우 목록에 자동으로 표시되어 개별 적용이 가능합니다.
• 폰트 크기 및 모바일 폰트 크기:
  • 해상도 환경 변화에 따라 로고 글자가 찌그러지거나 레이아웃을 해치지 않도록 데스크톱 크기와 모바일 크기를 각각 다른 가독성 배율로 할당할 수 있습니다. (예: 데스크톱 1.5rem / 모바일 1.2rem)
• 폰트 굵기 (Font Weight):
  • 로고의 시각적 존재감을 조절하기 위해 100부터 900까지 100 단위의 정밀한 두께 선택 옵션을 제공합니다.
  • 주의 사항: 적용된 폰트 종류에 따라 지원하는 굵기 단계가 서로 다릅니다. 선택한 웹 폰트가 특정 두께(예: 100 또는 900)를 제공하지 않을 경우 브라우저가 제공 가능한 가장 유사한 굵기로 대체 렌더링하므로, 사용하려는 서체의 굵기 제공 스펙을 미리 확인하는 것이 좋습니다.

🧩 1-3. 글로벌 위젯 스타일 설정

사이드바나 하단 영역 등에 배치되는 개별 위젯의 타이틀 및 구성 항목의 텍스트 스타일을 조정합니다.

• 글로벌 위젯 제목 스타일: 모든 위젯 상단에 노출되는 제목(타이틀) 영역의 폰트 종류, 글자 크기, 두께, 색상을 설정합니다.
• 글로벌 위젯 항목 스타일: 위젯 카드를 구성하는 개별 내용물 및 링크 텍스트에 적용할 스타일을 설정합니다.
• 상속 규칙: 글로벌 위젯 설정 역시 글꼴 이름을 공란으로 비워두게 되면 최상단 글로벌 폰트를 상속받아 깨짐 없는 통일성을 유지하게 됩니다.

---

⚡ 2. 폰트 로딩 성능 최적화와 작동 메커니즘

블로그가 사용자 화면에 렌더링될 때 흔히 발생하는 폰트 로딩 지연 현상은 블로그 성능 점수를 크게 떨어뜨리는 주범입니다. 이를 예방하기 위해 본 엔진은 서버리스 환경에 특화된 고유의 폰트 가속 아키텍처를 내장하고 있습니다.

🛡️ 2-1. 시스템 내장 기본 글꼴 필터링

방문자의 PC나 스마트폰 운영체제 내에 이미 기본 탑재되어 제공되는 글꼴(예: Pretendard, Arial, system-ui 등)의 경우, 블로그 서버가 구글 폰트 서버에 중복 요청을 보내거나 다운로드하지 않도록 서버 단에서 지능적으로 걸러내어 불필요한 네트워크 트래픽을 원천 차단합니다.

🔄 2-2. 외부 요청 차단 및 자체 프록시 중계

일반적인 웹사이트처럼 외부 Google Fonts 주소(fonts.googleapis.com 및 gstatic.com)에 클라이언트 브라우저가 직접 접속하여 폰트를 가져오면 DNS 쿼리와 보안 인증을 새로 거쳐야 하므로 수백 밀리초의 렌더링 지연이 발생합니다.

• 중계 스타일시트 생성: 블로그 렌더링 시 외부 구글 서버 주소를 호출하는 대신 자체 엔진 API를 통해 폰트 스타일시트(CSS)를 우회하여 확보합니다.
• 내부 링크 치환: 스타일시트 내부에서 실제 폰트 파일(.woff2)을 다운로드하는 경로를 분석한 뒤, 구글 서버의 외부 주소를 블로그 내부 도메인 프록시 주소로 일괄 교체합니다.
• 보안 필터 탑재: 중계 API는 지정된 구글 공식 폰트 저장소 도메인 이외의 무단 외부 주소 접근을 엄격히 통제하여 임의의 유해 코드 릴레이가 일어날 수 없도록 안전하게 통제합니다.

💾 2-3. Cloudflare Pages CDN 및 브라우저 로컬 캐싱

자체 프록시를 통해 요청된 모든 폰트 명세 파일과 폰트 데이터(.woff2)는 Cloudflare의 글로벌 분산 에지 서버(CDN)에 1일 동안 영구 캐싱됩니다.

• 또한 브라우저에게도 강력한 로컬 캐싱 명령 헤더를 실어 응답하므로, 사용자가 블로그 내의 다른 글을 클릭하거나 다음번에 다시 방문할 때는 인터넷 연결 속도와 관계없이 본인 기기 메모리에서 글꼴을 0ms 만에 즉시 렌더링하게 됩니다.
• 이를 통해 페이지 레이아웃이 폰트 로딩 속도 차이로 인해 덜컥거리며 깜빡이는 현상(CLS)을 완벽에 가깝게 차단해 줍니다.

🚀 2-4. Pretendard 서체 특화 가속 적용

한국어 가독성의 표준으로 자리 잡은 오픈소스 서체인 Pretendard를 기본 폰트로 선언할 경우, 블로그 렌더링 속도를 비약적으로 단축하기 위한 우회 가속 통로가 자동으로 개설됩니다.

• 병렬 다운로드 시너지: 구글 서버 및 중계 API 프록시망을 거치지 않고, 전 세계에 엣지가 분산된 초고속 오픈소스 CDN(jsDelivr) 정적 망을 통해 다른 스크립트와 함께 패러렐(Parallel)하게 폰트 파일을 끌어옵니다.
• 렌더링 최적화: 한글 서체의 특성상 복잡하고 용량이 큰 바이너리를 가장 신속하게 확보하여, 첫 화면 진입 시 글자가 늦게 나타나거나 폰트가 나중에 바뀌는 현상을 근본적으로 예방합니다.

---

💡 3. 실제 적용 시 주의 사항 및 추천 설정값

[!IMPORTANT]
💡 어드민 폰트 수정 시 꼭 기억해야 할 세 가지 행동 수칙

1. 구글 웹 폰트 이름의 정확한 철자 준수:
   • 추가할 구글 웹 폰트 항목에 입력하는 영어 이름은 구글 폰트 라이브러리에 등록된 공식 영문 명칭과 100% 동일해야 합니다. 철자가 틀리거나 띄어쓰기가 비정상적일 경우, 로딩 엔진이 폰트를 찾지 못해 시스템 기본 대체 글꼴(Sans-serif)로 화면이 강제 전환될 수 있습니다.
2. 데스크톱과 모바일의 글자 크기 균형 맞추기:
   • 모바일 뷰에서도 데스크톱 기본 글자 크기를 그대로 가져가면 화면 가독성이 나빠집니다. 모바일 크기 항목에 반드시 2px 정도 더 작은 값을 개별 바인딩하여 반응형 인터페이스를 부드럽게 유지하십시오.
3. 안정적인 한국어 기본 대체 폰트(Fallback) 선언:
   • 글로벌 폰트 필드에 커스텀 폰트를 적용할 때 'Noto Serif KR', serif처럼 가장 뒤에 시스템 범용 대체 이름(serif 또는 sans-serif)을 함께 나열해주면 폰트 로드가 일시적으로 지연되는 찰나의 순간에도 글꼴이 깨지지 않고 안정적으로 화면을 렌더링할 수 있습니다.