Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/content/docs/ko/guides/fonts.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,17 @@ import { Steps, Tabs, TabItem } from '@astrojs/starlight/components';

이 안내서는 프로젝트에 [웹 글꼴](https://developer.mozilla.org/ko/docs/Learn_web_development/Core/Text_styling/Web_fonts)을 추가하고 컴포넌트에서 사용하는 방법을 설명합니다.

Astro는 통합되고, [완전히 사용자 정의 가능하며](/ko/reference/configuration-reference/), 타입 안정성을 갖춘 API를 통해 파일 시스템 및 다양한 글꼴 제공업체(예: Fontsource, Google)의 글꼴을 사용할 수 있는 방법을 제공합니다.
Astro는 통합되고, [완전히 사용자 정의 가능하며](/ko/reference/configuration-reference/#fonts), 타입 안정성을 갖춘 API를 통해 파일 시스템 및 다양한 글꼴 제공업체(예: Fontsource, Google)의 글꼴을 사용할 수 있는 방법을 제공합니다.

웹 글꼴은 로드 시간과 렌더링 시간 모두에서 페이지 성능에 영향을 미칠 수 있습니다. 이 API는 프리로드 링크, 최적화된 대체 글꼴, 정해진 기본값 등 자동 [웹 글꼴 최적화](https://web.dev/learn/performance/optimize-web-fonts)를 통해 사이트 성능을 유지하는 데 도움을 줍니다. [일반적인 사용 예시를 참조하세요](#예시).

폰트 API는 글꼴을 다운로드하고 캐시하여 사이트에서 제공함으로써 성능과 개인 정보 보호에 중점을 둡니다. 이를 통해 사용자 데이터를 서드파티 사이트로 전송하는 것을 방지하고, 모든 방문자에게 일관된 글꼴 세트를 제공할 수 있습니다.

## 사용자 정의 글꼴 구성

Astro 프로젝트에 사용자 정의 글꼴을 등록하는 것은 Astro 구성 파일의 [`fonts` 옵션](/ko/reference/configuration-reference/)을 통해 이루어집니다.
Astro 프로젝트에 사용자 정의 글꼴을 등록하는 것은 Astro 구성 파일의 [`fonts` 옵션](/ko/reference/configuration-reference/#fonts)을 통해 이루어집니다.

사용하려는 각 글꼴에 대해 [이름](/ko/reference/configuration-reference/), [CSS 변수](/ko/reference/configuration-reference/), 그리고 Astro 글꼴 제공업체를 지정해야 합니다.
사용하려는 각 글꼴에 대해 [이름](/ko/reference/configuration-reference/#fontname), [CSS 변수](/ko/reference/configuration-reference/#fontcssvariable), 그리고 Astro 글꼴 제공업체를 지정해야 합니다.

Astro는 Adobe, Bunny, Fontshare, Fontsource, Google, Google Icons, NPM과 같은 [가장 인기 있는 글꼴 제공업체에 대한 내장 지원](/ko/reference/font-provider-reference/#built-in-providers)과 로컬 글꼴 파일 사용을 지원합니다. 또한 성능과 방문자 경험을 최적화하기 위해 [글꼴 구성을 추가로 사용자 정의할 수 있습니다](#세부적인-글꼴-구성).

Expand Down Expand Up @@ -175,7 +175,7 @@ Astro는 Google Fonts 및 기타 오픈 소스 글꼴 사용을 간소화하는

## 프로그래밍 방식으로 글꼴 데이터 접근

[`fontData`](/ko/reference/modules/astro-assets/#fontdata) 객체를 사용하면 하위 수준의 글꼴 패밀리 데이터를 프로그래밍 방식으로 가져올 수 있습니다. 예를 들어, 적절한 [형식](/ko/reference/configuration-reference/) 구성과 결합하여 [satori](https://github.com/vercel/satori)를 사용하여 OpenGraph 이미지를 생성하기 위한 [API 라우트](/ko/guides/endpoints/#서버-엔드포인트-api-라우트)에서 사용할 수 있습니다:
[`fontData`](/ko/reference/modules/astro-assets/#fontdata) 객체를 사용하면 하위 수준의 글꼴 패밀리 데이터를 프로그래밍 방식으로 가져올 수 있습니다. 예를 들어, 적절한 [형식](/ko/reference/configuration-reference/#fontformats) 구성과 결합하여 [satori](https://github.com/vercel/satori)를 사용하여 OpenGraph 이미지를 생성하기 위한 [API 라우트](/ko/guides/endpoints/#서버-엔드포인트-api-라우트)에서 사용할 수 있습니다:

```tsx title="src/pages/og.png.ts" {2} "fontData[\"--font-roboto\"]"
import type{ APIRoute } from "astro";
Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/ko/guides/integrations-guide/netlify.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -421,7 +421,7 @@ Netlify 구성에서 사전 렌더링된 페이지에 대한 사용자 정의

이 기능이 활성화되면, Astro 기능 (예: 콘텐츠 보안 정책)에서 제공하는 경우 어댑터는 [정적 헤더를 프레임워크 API 구성 파일](https://docs.netlify.com/frameworks-api/#headers)에 저장합니다.

예를 들어, [콘텐츠 보안 정책](/ko/reference/configuration-reference/)이 활성화된 경우, `<meta>` 요소를 생성하는 대신 `staticHeaders`를 사용하여 CSP `headers`를 Netlify 구성에 추가할 수 있습니다.
예를 들어, [콘텐츠 보안 정책](/ko/reference/configuration-reference/#securitycsp)이 활성화된 경우, `<meta>` 요소를 생성하는 대신 `staticHeaders`를 사용하여 CSP `headers`를 Netlify 구성에 추가할 수 있습니다.

```js title="astro.config.mjs" {9}
import { defineConfig } from 'astro/config';
Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/ko/guides/view-transitions.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -461,7 +461,7 @@ import { ClientRouter } from "astro:transitions";

사이트 및 허용할 내용에 따라 필요한 검증의 방식이 달라집니다.

<ReadMore>사용자 입력을 `navigate()` API와 함께 사용하는 경우, Astro의 [콘텐츠 보안 정책](/ko/reference/configuration-reference/)을 활성화하여 교차 사이트 스크립팅 (XSS) 위험으로부터 보호하는 것을 고려해 보세요.</ReadMore>
<ReadMore>사용자 입력을 `navigate()` API와 함께 사용하는 경우, Astro의 [콘텐츠 보안 정책](/ko/reference/configuration-reference/#securitycsp)을 활성화하여 교차 사이트 스크립팅 (XSS) 위험으로부터 보호하는 것을 고려해 보세요.</ReadMore>

## 대체 옵션

Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/ko/reference/adapter-reference.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -818,7 +818,7 @@ export default function createIntegration() {
}
```

헤더의 값은 애플리케이션에서 활성화 및 사용되는 기능에 따라 변경될 수 있습니다. 예를 들어, [CSP가 활성화된 경우](/ko/reference/configuration-reference/), `<meta http-equiv="content-security-policy">` 요소가 정적 페이지에 추가되지 않습니다. 대신, 해당 `content`는 `routeToHeaders` 맵에서 사용할 수 있습니다.
헤더의 값은 애플리케이션에서 활성화 및 사용되는 기능에 따라 변경될 수 있습니다. 예를 들어, [CSP가 활성화된 경우](/ko/reference/configuration-reference/#securitycsp), `<meta http-equiv="content-security-policy">` 요소가 정적 페이지에 추가되지 않습니다. 대신, 해당 `content`는 `routeToHeaders` 맵에서 사용할 수 있습니다.

### `preserveBuildClientDir`

Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/ko/reference/api-reference.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -1068,7 +1068,7 @@ Astro의 CSP 런타임 API는 문서가 로드할 수 있는 리소스를 제어

`.astro` 컴포넌트 내부의 `Astro` 전역 객체 또는 엔드포인트 및 미들웨어의 `APIContext` 타입을 사용하여 페이지별로 `<meta>` 요소를 사용자 정의할 수 있습니다.

리소스가 여러 번 삽입되거나 여러 소스(예: [`csp` 구성](/ko/reference/configuration-reference/)에 정의된 것과 다음 CSP 런타임 API를 사용하여 추가된 것)에서 제공되는 경우, Astro는 모든 리소스를 병합하고 중복을 제거하여 `<meta>` 요소를 생성합니다.
리소스가 여러 번 삽입되거나 여러 소스(예: [`csp` 구성](/ko/reference/configuration-reference/#securitycsp)에 정의된 것과 다음 CSP 런타임 API를 사용하여 추가된 것)에서 제공되는 경우, Astro는 모든 리소스를 병합하고 중복을 제거하여 `<meta>` 요소를 생성합니다.


#### `csp.insertDirective()`
Expand Down
Loading
Loading