design: 문서 타이포그래피를 OpenChain-KWG 기준으로 정렬 (색상은 유지)

assets/scss/_styles_project.scss

@@ -3,21 +3,8 @@ Project-specific styles. For details, see:
 https://www.docsy.dev/docs/content/lookandfeel/#project-style-files
 */
 
-/* ===== Web fonts (self-host) — 라틴 Geist + 한글 Pretendard ===== */
-@font-face {
-  font-family: "Geist Variable";
-  font-weight: 100 900;
-  font-style: normal;
-  font-display: swap;
-  src: url("/fonts/GeistVariable.woff2") format("woff2-variations");
-}
-@font-face {
-  font-family: "Pretendard Variable";
-  font-weight: 45 920;
-  font-style: normal;
-  font-display: swap;
-  src: url("/fonts/PretendardVariable.woff2") format("woff2-variations");
-}
+/* 웹폰트(Roboto·Pretendard·JetBrains Mono)는 CDN으로 로드한다.
+   로드 위치: layouts/partials/hooks/head-end.html / 스택: tokens/_typography.scss */
 
 /* Dark mode enhancements (Docsy) */
 @import 'td/color-adjustments-dark';
@@ -90,14 +77,10 @@ https://www.docsy.dev/docs/content/lookandfeel/#project-style-files
   --bs-btn-active-color: #000000;
 }
 
-/* 타이포 자간 — 본문은 약하게, 헤딩/히어로는 타이트하게 */
+/* 타이포 자간 — 본문은 약하게. 헤딩 자간은 KWG식으로 .td-content·히어로/섹션 스코프에서 개별 지정 */
 body {
   letter-spacing: -0.011em;
 }
-h1, h2, h3, h4, h5, h6,
-.skt-hero__title, .skt-section__title {
-  letter-spacing: -0.03em;
-}
 
 /* ===================================================================
    2. 접근성 — 포커스 가시성(무채색) + 모션 줄이기
@@ -199,13 +182,19 @@ h1, h2, h3, h4, h5, h6,
   content: "Open Source";
   padding-left: 14px;
   border-left: 1px solid var(--skt-border);
-  font-size: 1.05rem;
-  font-weight: 600;
+  font-size: 1.125rem;
+  font-weight: 500;
   letter-spacing: -0.01em;
   line-height: 1;
   /* color 미지정 → .navbar-brand 색상을 상속해 hover 시 brand 컬러로 함께 전환 */
 }
 
+/* 네비 링크 — KWG 정렬(Roboto x-height 보정 15px) */
+.td-navbar .nav-link {
+  font-size: 0.9375rem;
+  font-weight: 400;
+}
+
 /* ===================================================================
    4. 재사용 컴포넌트 (skt- 네임스페이스)
    =================================================================== */
@@ -389,15 +378,17 @@ a.skt-card:hover,
   max-width: 860px;
 }
 .skt-hero__title {
-  font-size: clamp(2.6rem, 7vw, 4.5rem);
-  font-weight: 700;
-  line-height: 1.05;
+  font-size: clamp(2rem, 6vw, 4.25rem);   /* KWG 히어로 4.25rem + 모바일 축소 */
+  font-weight: 600;
+  letter-spacing: -0.04em;
+  line-height: 1.04;
   margin-bottom: 1.1rem;
   color: var(--skt-text);
 }
 .skt-hero__subtitle {
-  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
+  font-size: 1.25rem;                      /* KWG $text-xl */
   font-weight: 400;
+  line-height: 1.6;
   color: var(--skt-text-muted);
   margin-bottom: 2.25rem;
 }
@@ -526,13 +517,14 @@ a.skt-card:hover,
   margin: 0 auto 3rem;
 }
 .skt-section__title {
-  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
-  font-weight: 700;
+  font-size: clamp(1.6rem, 3.5vw, 2.4rem);   /* KWG 섹션 2.4rem */
+  font-weight: 600;
+  letter-spacing: -0.03em;
   margin-bottom: .6rem;
 }
 .skt-section__lead {
   color: var(--skt-text-muted);
-  font-size: 1.05rem;
+  font-size: 1.125rem;                        /* KWG $text-lg */
   margin: 0;
 }
 
@@ -659,9 +651,16 @@ a.skt-card:hover,
      (제한 시 넓은 컬럼 안에서 우측 공백이 과도해짐) */
 
   /* 수직 리듬 — 행간은 토큰($line-height-base) 유지, 간격만 명시 */
-  p { margin-bottom: 1.25rem; }
-  > h2:not(:first-child) { margin-top: 3.5rem; }
-  > h3 { margin-top: 2.5rem; }
+  p { margin-bottom: 1.1rem; }
+
+  /* 헤딩 — KWG(Google devsite) 개별 자간. 크기·굵기는 전역 토큰($h*, weight 500).
+     h1만 Docsy 0.15 기본(.td-content > h1 { font-weight:700 })이 덮으므로 500으로 환원 */
+  h1 { font-weight: 500; letter-spacing: -0.022em; }
+  h2 { letter-spacing: -0.018em; }
+  h3 { letter-spacing: -0.012em; }
+  h4, h5 { letter-spacing: -0.008em; }
+  > h2:not(:first-child) { margin-top: 2.5rem; }
+  > h3 { margin-top: 2rem; }
   > h4, > h5, > h6 { margin-top: 2rem; }
   ul, ol { margin-bottom: 1.25rem; }
   li { margin-bottom: .375rem; }
@@ -707,7 +706,7 @@ a.skt-card:hover,
 
   /* 인용 — 절제(2px 보더 + subtle 배경) */
   blockquote {
-    border-left: 2px solid var(--skt-border-strong);
+    border-left: 3px solid var(--skt-border-strong);
     background: var(--skt-surface-subtle);
     color: var(--skt-text-muted);
     padding: .75rem 1.15rem;
@@ -773,37 +772,20 @@ a.skt-card:hover,
   padding-bottom: 4rem;
 }
 
-/* alert/callout — 좌측 아이콘 callout. 박스·본문은 무채색, 아이콘만 절제된 의미색.
+/* alert/callout — KWG식 좌측 보더 + 연배경. 박스·본문은 무채색, 종류 구분은 좌측 보더색.
    HTML 구조: .alert > .alert-heading(.h4) + p/ul  (Docsy alert 숏코드) */
 .alert {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  column-gap: .8rem;
-  align-items: start;
-  padding: 1.1rem 1.25rem;
+  padding: 1rem 1.25rem;
   background: var(--skt-surface-subtle);
   border: 1px solid var(--skt-border);
+  border-left: 3px solid var(--skt-border-strong);   /* 좌측 보더(기본 무채색) */
   border-radius: $border-radius-lg;
   color: var(--skt-text);
 }
-/* 좌측 아이콘 — color별 글리프(Font Awesome 6 Free), 절제된 의미색 */
-.alert::before {
-  grid-column: 1;
-  grid-row: 1;
-  font-family: "Font Awesome 6 Free";
-  font-weight: 900;
-  content: "\f05a";              /* circle-info (기본) */
-  font-size: 1.05rem;
-  line-height: 1.55;
-  color: var(--skt-text-muted);
-}
-.alert-warning::before { content: "\f071"; color: #{$skt-orange}; }  /* triangle-exclamation */
-.alert-danger::before  { content: "\f06a"; color: #{$skt-red}; }     /* circle-exclamation */
-.alert-success::before { content: "\f058"; color: #{$skt-green}; }   /* circle-check */
-.alert-info::before,
-.alert-primary::before { content: "\f05a"; color: var(--skt-text-muted); }
-/* 콘텐츠는 모두 우측 컬럼 */
-.alert > * { grid-column: 2; min-width: 0; }
+/* 종류 구분은 좌측 보더색으로(아이콘 대체). info/기본은 무채색 유지 */
+.alert-warning { border-left-color: #{$skt-orange}; }
+.alert-danger  { border-left-color: #{$skt-red}; }
+.alert-success { border-left-color: #{$skt-green}; }
 .alert .alert-heading {
   font-size: 1rem;
   font-weight: 600;
@@ -831,13 +813,21 @@ a.skt-card:hover,
 .td-content .article-meta,
 .td-byline { color: var(--skt-text-muted); font-size: .9rem; }
 
-.td-toc { font-size: .85rem; }
+/* 본문 Tags/Categories 배지 — 둥근 pill(KWG 정렬). 배경·글자색은 무채색 기본 유지 */
+.td-content .article-meta .taxonomy-term {
+  -webkit-clip-path: none;
+  clip-path: none;
+  border-radius: 1rem;
+  padding: 0.05rem 0.65rem;
+}
+
+.td-toc { font-size: .875rem; }
 .td-toc #TableOfContents a { color: var(--skt-text-muted); }
 .td-toc #TableOfContents a:hover { color: var(--skt-text); }
 .td-toc #TableOfContents a.active { color: var(--skt-text); font-weight: 600; }
 
 /* 우측 사이드바 전반 — 페이지 메타·택소노미 폰트가 과하게 굵고 커서 절제 */
-.td-sidebar-toc { font-size: .85rem; }
+.td-sidebar-toc { font-size: .875rem; }
 /* 페이지 메타 링크(페이지 보기/편집, Create … 등) */
 .td-page-meta a {
   font-size: .85rem;
@@ -863,7 +853,7 @@ a.skt-card:hover,
 .td-sidebar {
   border-right: 1px solid var(--skt-border);
 }
-.td-sidebar-nav { font-size: .92rem; }
+.td-sidebar-nav { font-size: .9375rem; }
 .td-sidebar-nav .td-sidebar-link {
   color: var(--skt-text-muted);
   border-radius: $border-radius-sm;

assets/scss/tokens/_typography.scss

@@ -1,34 +1,38 @@
 /*
- * 타이포그래피 토큰 — Geist(라틴) + Pretendard(한글) self-host.
- * @font-face 정의는 _styles_project.scss 상단.
+ * 타이포그래피 토큰 — 영문 Roboto + 한글 Pretendard (KWG 정렬).
+ * 웹폰트는 CDN으로 로드한다(layouts/partials/hooks/head-end.html).
  */
 
-// 라틴=Geist, 한글=Pretendard 폴백 (같은 스택 내에서 글리프별 자동 폴백)
+// 영문=Roboto, 한글=Pretendard 폴백 (같은 스택 내에서 글리프별 자동 폴백)
 $geist:
-  "Geist Variable", "Geist",
-  "Pretendard Variable", "Pretendard",
-  -apple-system, BlinkMacSystemFont, system-ui,
-  "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", Roboto, sans-serif !default;
+  "Roboto", "Pretendard Variable", Pretendard,
+  -apple-system, BlinkMacSystemFont,
+  "Apple SD Gothic Neo", "Segoe UI", "Helvetica Neue",
+  Arial, sans-serif,
+  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
 
 // 기존 $pretendard 참조 안전을 위해 별칭 유지
 $pretendard: $geist !default;
 
 $font-family-sans-serif: $geist !default;
 $font-family-base:       $geist !default;
 $headings-font-family:   $geist !default;
+$font-family-monospace:
+  "JetBrains Mono", SFMono-Regular, Menlo, Monaco,
+  Consolas, "Liberation Mono", "Courier New", monospace !default;
 
 $font-size-base:    1rem !default;
-$line-height-base:  1.65 !default;   // Vercel은 약간 타이트
+$line-height-base:  1.65 !default;
 
-// 제목: 크고 타이트하게 (Vercel 헤드라인)
-$headings-font-weight:    600 !default;
+// 제목 — KWG(Google devsite) 크기·굵기. 개별 자간은 .td-content 스코프에서 세분.
+$headings-font-weight:    500 !default;
 $headings-line-height:    1.2 !default;
-$headings-letter-spacing: -0.02em !default;
-$h1-font-size: $font-size-base * 2.75 !default;
-$h2-font-size: $font-size-base * 2.1 !default;
-$h3-font-size: $font-size-base * 1.6 !default;
-$h4-font-size: $font-size-base * 1.3 !default;
-$h5-font-size: $font-size-base * 1.12 !default;
+$headings-letter-spacing: -0.022em !default;
+$h1-font-size: $font-size-base * 1.75 !default;   // 28px
+$h2-font-size: $font-size-base * 1.375 !default;  // 22px
+$h3-font-size: $font-size-base * 1.0 !default;    // 16px
+$h4-font-size: $font-size-base * 0.875 !default;  // 14px
+$h5-font-size: $font-size-base * 0.875 !default;  // 14px
 $h6-font-size: $font-size-base !default;
 
 $display-font-weight: 700 !default;

hugo.yaml

@@ -49,8 +49,8 @@ languages:
     title: SK텔레콤 오픈소스
     params:
       description: SK텔레콤이 AI·빅데이터·클라우드 기술을 오픈소스로 공개하고, 오픈소스 가이드·라이선스 컴플라이언스·소프트웨어 공급망 보안(SBOM)을 제공하는 공식 포털입니다.
-      time_format_default: 2006.01.02
-      time_format_blog: 2006.01.02
+      time_format_default: 2006년 1월 2일
+      time_format_blog: 2006년 1월 2일
   # cSpell:enable
   en:
     languageName: English

layouts/partials/hooks/head-end.html

@@ -1,6 +1,10 @@
-{{/* 가변폰트 preload (LCP/CLS 개선) — 라틴 Geist + 한글 Pretendard */}}
-<link rel="preload" as="font" type="font/woff2" href="/fonts/GeistVariable.woff2" crossorigin>
-<link rel="preload" as="font" type="font/woff2" href="/fonts/PretendardVariable.woff2" crossorigin>
+{{/* 웹폰트 — 영문·숫자 Roboto / 한글 Pretendard / 코드 JetBrains Mono.
+     폰트 스택은 assets/scss/tokens/_typography.scss 에서 지정한다. */}}
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=JetBrains+Mono:wght@400;500&display=swap">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css">
 
 {{/* 스크롤 리빌 게이트 — paint 전에 html.js-reveal 을 부여해 FOUC 방지.
      동작 줄이기 사용자에겐 부여하지 않아 모션 없이 콘텐츠가 즉시 보인다. */}}