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
2 changes: 1 addition & 1 deletion src/content/docs/ko/guides/deploy/azion.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { Steps } from '@astrojs/starlight/components';

## 전제 조건

시작하려면 다음이 필요합니다:
시작하려면 다음이 필요합니다.

- [Azion 계정](https://www.azion.com/). 계정이 없는 경우 무료 계정을 신청할 수 있습니다.
- [GitHub](https://github.com/) 저장소에 저장된 앱 코드.
Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/ko/guides/deploy/heroku.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ import { Steps } from '@astrojs/starlight/components';

이것이 여러분의 사이트 구성입니다. [heroku-buildpack-static](https://github.com/heroku/heroku-buildpack-static)에서 자세한 내용을 읽어보세요.

5. Heroku git remote를 설정합니다:
5. Heroku git remote를 설정합니다.

```bash
# version change
Expand Down
214 changes: 155 additions & 59 deletions src/content/docs/ko/reference/experimental-flags/fonts.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ body {

## 사용 가능한 원격 글꼴 제공자

Astro는 대부분의 [unifont](https://github.com/unjs/unifont/) 제공자를 다시 내보냅니다. 또한, 모든 unifont 제공자에 대해 [사용자 정의 Astro 글꼴 제공자](#나만의-글꼴-제공자-구축하기)를 만들 수도 있습니다.
Astro는 [unifont](https://github.com/unjs/unifont/) 제공자를 기반으로 하는 몇 가지 내장 제공자를 내보냅니다. 또한 [사용자 정의 Astro 글꼴 제공자를 직접 제작](#나만의-글꼴-제공자-구축하기) 수도 있습니다.

다음 제공자는 기본적으로 제공됩니다.

Expand Down Expand Up @@ -206,7 +206,7 @@ provider: fontProviders.fontsource()
provider: fontProviders.google()
```

또한, `google()` 글꼴 제공자는 [unifont Google `ProviderOption`](https://github.com/unjs/unifont/blob/main/src/providers/google.ts#L10-L26)에서 사용 가능한 모든 옵션들을 허용합니다.
또한, `google()` 글꼴 제공자는 [unifont Google 제공자](https://github.com/unjs/unifont/#options-1)에서 사용 가능한 모든 옵션들을 허용합니다.

```js
provider: fontProviders.google({
Expand All @@ -218,6 +218,28 @@ provider: fontProviders.google({

</TabItem>

<TabItem label="Google Icons">

<p>
<Since v="5.16.9" />
</p>

```js
provider: fontProviders.googleicons()
```

또한, `googleicons()` 글꼴 제공자는 [unifont Google Icons 옵션](https://github.com/unjs/unifont/#options-2)에서 사용 가능한 모든 옵션을 허용합니다.

```js
provider: fontProviders.googleicons({
glyphs: {
"Material Symbols Outlined": ["arrow_right", "favorite", "arrow_drop_down"]
}
})
```

</TabItem>

</Tabs>

## 사용 예시
Expand Down Expand Up @@ -514,7 +536,7 @@ optimizedFallbacks: false

원격 글꼴에 대한 추가 구성 옵션을 사용할 수 있습니다. 예를 들어 특정 글꼴 두께나 스타일만 다운로드하는 등, [글꼴 제공자](#사용-가능한-원격-글꼴-제공자)로부터 로드되는 데이터를 사용자 정의하려면 이러한 옵션을 설정하세요. 더 세부적인 제어를 위해 [세분화된 구성](#세분화된-원격-글꼴-구성)을 사용할 수 있습니다.

내부적으로 이러한 옵션은 [unifont](https://github.com/unjs/unifont/)에 의해 처리됩니다. 일부 속성은 일부 제공업체에서 지원되지 않을 수 있으며, 각 제공업체에서 다르게 처리될 수 있습니다.
각 제공자는 이러한 옵션을 처리할 책임이 있으므로, 다음 속성들에 대한 가용성 및 지원 여부는 제공자마다 다를 수 있습니다.

#### weights

Expand Down Expand Up @@ -846,88 +868,162 @@ export default defineConfig({

## 나만의 글꼴 제공자 구축하기

[내장된 제공자](#사용-가능한-원격-글꼴-제공자) 중 하나를 사용하고 싶지 않다면 (예: 타사 unifont 제공자를 사용하거나 개인 레지스트리를 위해 무언가를 구축하려는 경우) 직접 구축할 수 있습니다.
[내장된 제공자](#사용-가능한-원격-글꼴-제공자) 중 하나를 사용하고 싶지 않다면 (예: [타사 unifont 제공자](#제3자-unifont-제공자-지원)를 사용하거나 [개인 레지스트리를 위해 무언가를 구축](#비공개-레지스트리-지원)하려는 경우) 직접 구축할 수 있습니다.

Astro 글꼴 제공자는 구성 객체와 실제 구현의 두 부분으로 구성됩니다.
사용자 정의 글꼴 제공자를 구현하기 위해 권장되는 방법은 [구성](#config)을 매개변수로 받고 [`FontProvider` 객체](#글꼴-제공자-객체)를 반환하는 함수를 내보내는 것입니다.

<Steps>
### 글꼴 제공자 객체

1. 다음을 포함하는 `FontProvider` 구성 객체를 반환하는 함수를 만듭니다.
실험적인 글꼴 API를 사용하면 통합된 방식으로 글꼴에 액세스할 수 있습니다. 각 패밀리는 글꼴 페이스를 검색하기 위해 Astro 글꼴 제공자를 사용해야 합니다.

- `entrypoint`: URL, 루트를 기준으로 하는 상대 경로 또는 패키지 가져오기입니다.
- `config`: unifont 제공자에게 전달되는 선택적인 직렬화 가능한 객체입니다.
`FontProvider`는 필수 속성인 [`name`](#name-1) 및 [`resolveFont()`](#resolvefont)를 포함하는 객체입니다. 또한 선택적 속성인 [`config`](#config), [`init()`](#init) 및 [`listFonts()`](#listfonts)를 사용할 수 있습니다.

<Tabs>
#### `name`

<TabItem label="config 없이 사용">
<p>

```ts title="provider/config.ts"
import type { FontProvider } from 'astro';
**타입:** `string`
</p>

export function myProvider(): FontProvider {
return {
entrypoint: new URL('./implementation.js', import.meta.url)
};
};
```
제공자를 식별하고 로그에 표시하기 위한 고유한 이름입니다.

</TabItem>
#### `resolveFont()`

<TabItem label="config와 함께 사용">
<p>

```ts title="provider/config.ts"
import type { FontProvider } from 'astro';
**타입:** `(options: ResolveFontOptions) => Awaitable<{ fonts: FontFaceData[] } | undefined>`<br />
</p>

interface Config {
// ...
};
주어진 옵션을 바탕으로 글꼴 페이스 데이터를 검색하고 반환하는 데 사용됩니다.

export function myProvider(config: Config): FontProvider {
return {
entrypoint: new URL('./implementation.js', import.meta.url),
config
};
};
```
#### `config`

</TabItem>
<p>

</Tabs>
**타입:** `Record<string, any>`<br />
**기본값:** `undefined`
</p>

2. 두 번째 파일을 만들어 unifont `provider` 구현을 내보냅니다.
식별을 위해 사용되는 직렬화 가능한 객체입니다.

```ts title="implementation.ts"
import { defineFontProvider } from "unifont";
#### `init()`

export const provider = defineFontProvider("my-provider", async (options, ctx) => {
// 사용자 정의 글꼴을 가져오거나 정의합니다.
// ...
});
```
<p>

:::tip
unifont 제공자를 만드는 방법에 대해 더 자세히 알아보려면 [unifont 제공자의 소스 코드](https://github.com/unjs/unifont/blob/main/src/providers/)를 확인하세요.
**타입:** `(context: FontProviderInitContext) => Awaitable<void>`<br />
**기본값:** `undefined`
</p>

:::
초기화 로직을 수행하는 데 사용되는 선택적 콜백입니다. 컨텍스트에는 캐싱에 유용한 `storage` 객체가 포함되어 있습니다.

3. 글꼴 구성에 사용자 정의 제공자를 추가합니다.
#### `listFonts()`

```js title="astro.config.mjs" ins="myProvider()"
import { defineConfig } from "astro/config";
import { myProvider } from "./provider/config";
<p>

export default defineConfig({
experimental: {
**타입:** `() => Awaitable<string[] | undefined>`<br />
**기본값:** `undefined`
</p>

사용 가능한 글꼴 이름 목록을 반환하는 데 사용되는 선택적 콜백입니다.

### 비공개 레지스트리 지원

다음 예시는 비공개 레지스트리를 위한 글꼴 제공자를 정의합니다.

```ts title="font-provider.ts"
import type { FontProvider } from "astro";
import { retrieveFonts, type Fonts } from "./utils.js",

interface Config {
token: string;
}

export function registryFontProvider(config: Config): FontProvider {
let data: Fonts = {}

return {
name: "registry",
config,
init: async () => {
data = await retrieveFonts(token);
},
listFonts: () => {
return Object.keys(data);
},
resolveFont: ({ familyName, ...options }) => {
const fonts = data[familyName];
if (fonts) {
return { fonts };
}
return undefined;
},
};
}
```

이후 Astro 구성에서 이 글꼴 제공자를 등록할 수 있습니다.

```ts title="astro.config.ts"
import { defineConfig } from "astro/config";
import { registryFontProvider } from "./font-provider";

export default defineConfig({
experimental: {
fonts: [{
provider: myProvider(),
// ...
provider: registryFontProvider({
token: "..."
}),
name: "Custom",
cssVariable: "--font-custom"
}]
}
});
```
}
});
```

</Steps>
### 제3자 unifont 제공자 지원

내부에 unifont 제공자를 사용하는 Astro 글꼴 제공자를 정의할 수 있습니다.

```ts title="font-provider.ts" {3,5,6}
import type { FontProvider } from "astro";
import type { InitializedProvider } from 'unifont';
import { acmeProvider, type AcmeOptions } from '@acme/unifont-provider'

function acmeFontProvider(config?: AcmeOptions): FontProvider {
const provider = acmeProvider(config);
let initializedProvider: InitializedProvider | undefined;
return {
name: provider._name,
config,
async init(context) {
initializedProvider = await provider(context);
},
async resolveFont({ familyName, ...rest }) {
return await initializedProvider?.resolveFont(familyName, rest);
},
async listFonts() {
return await initializedProvider?.listFonts?.();
},
};
}
```

이후 Astro 구성에서 이 글꼴 제공자를 등록할 수 있습니다.

```ts title="astro.config.ts"
import { defineConfig } from "astro/config";
import { acmeFontProvider } from "./font-provider";

export default defineConfig({
experimental: {
fonts: [{
provider: acmeFontProvider({/* ... */}),
name: "Custom",
cssVariable: "--font-custom"
}]
}
});
```

## 캐싱

Expand Down