diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
index a6e3bb8bb..6f33fa56e 100644
--- a/assets/scss/_styles_project.scss
+++ b/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;
diff --git a/assets/scss/tokens/_typography.scss b/assets/scss/tokens/_typography.scss
index 6f91018fe..56980befe 100644
--- a/assets/scss/tokens/_typography.scss
+++ b/assets/scss/tokens/_typography.scss
@@ -1,14 +1,15 @@
/*
- * 타이포그래피 토큰 — 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;
@@ -16,19 +17,22 @@ $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;
diff --git a/hugo.yaml b/hugo.yaml
index 587ce5c84..6e29448b1 100644
--- a/hugo.yaml
+++ b/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
diff --git a/layouts/partials/hooks/head-end.html b/layouts/partials/hooks/head-end.html
index 3f812a35a..026edd85a 100644
--- a/layouts/partials/hooks/head-end.html
+++ b/layouts/partials/hooks/head-end.html
@@ -1,6 +1,10 @@
-{{/* 가변폰트 preload (LCP/CLS 개선) — 라틴 Geist + 한글 Pretendard */}}
-
-
+{{/* 웹폰트 — 영문·숫자 Roboto / 한글 Pretendard / 코드 JetBrains Mono.
+ 폰트 스택은 assets/scss/tokens/_typography.scss 에서 지정한다. */}}
+
+
+
+
+
{{/* 스크롤 리빌 게이트 — paint 전에 html.js-reveal 을 부여해 FOUC 방지.
동작 줄이기 사용자에겐 부여하지 않아 모션 없이 콘텐츠가 즉시 보인다. */}}
diff --git a/static/fonts/GeistVariable.woff2 b/static/fonts/GeistVariable.woff2
deleted file mode 100644
index 991445d78..000000000
Binary files a/static/fonts/GeistVariable.woff2 and /dev/null differ
diff --git a/static/fonts/PretendardVariable.woff2 b/static/fonts/PretendardVariable.woff2
deleted file mode 100644
index 49c54b515..000000000
Binary files a/static/fonts/PretendardVariable.woff2 and /dev/null differ
diff --git a/static/fonts/README.md b/static/fonts/README.md
deleted file mode 100644
index fd4a7ab30..000000000
--- a/static/fonts/README.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# Fonts
-
-## Geist Variable (라틴 기본)
-
-- 파일: `Geist[wght].woff2`
-- 프로젝트: https://github.com/vercel/geist-font (배포: `@fontsource-variable/geist`)
-- 라이선스: SIL Open Font License 1.1 (OFL-1.1)
-- 용도: 본문/제목의 **라틴** 기본 폰트(self-host). 한글은 Pretendard로 폴백.
-
-OFL-1.1 전문: https://github.com/vercel/geist-font/blob/main/LICENSE.TXT
-
-## Pretendard Variable (한글 폴백)
-
-- 파일: `PretendardVariable.woff2`
-- 프로젝트: https://github.com/orioncactus/pretendard
-- 라이선스: SIL Open Font License 1.1 (OFL-1.1)
-- 용도: 한글 글리프 및 라틴 폴백 (self-host, `assets/scss/_styles_project.scss`의 `@font-face`)
-
-OFL-1.1 전문: https://github.com/orioncactus/pretendard/blob/main/LICENSE