> ## Documentation Index
> Fetch the complete documentation index at: https://make.edicus.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# 폰트

> Font 화면에서 폰트 클래스와 폰트 그룹을 만들고, 편집기 글꼴 목록에 폰트를 올리는 방법

편집기 텍스트 도구의 글꼴 목록은 Edicus Manager의 **Font** 화면에서 정합니다. 상품은 폰트 클래스 하나를 고르고, 편집기는 그 클래스 안에서 디비전과 언어에 맞는 폰트 그룹을 읽습니다. 이 페이지는 그 구조와 폰트를 올리는 절차를 다룹니다.

<Warning>
  폰트 등록은 상품을 판매하기 전에 꼭 거쳐야 하는 단계입니다. 새 파트너에는 폰트가 하나도 없습니다. 폰트를 등록하고 **폰트 적용**을 하기 전에는 편집기가 읽을 글꼴 목록이 없고, 익스포터로 템플릿을 올리는 것도 실패합니다.
</Warning>

## 배우는 것

* 폰트 클래스, 디비전, 언어, 폰트 그룹의 관계
* 편집기가 글꼴 목록을 만드는 방식
* 폰트를 등록하고 편집기에 반영하는 절차
* 템플릿에 쓴 폰트가 글꼴 목록에 없을 때 생기는 일

## 폰트 클래스와 폰트 그룹

**Font** 메뉴는 파트너 관리자 계정(partner-admin)에 보입니다. 디자이너(partner-designer) 계정의 메뉴 노출은 [리소스 관리](/docs/products/resources#메뉴가-보이는-계정)를 보세요.

### 새 파트너의 처음 상태

파트너를 만들면 아래가 함께 만들어집니다.

| 항목 | 상태 |
| - | - |
| 폰트 클래스 `default` | 표시 이름은 `기본상품`입니다. `host` 디비전에 `ko` 언어 하나가 있습니다 |
| 폰트 그룹 `default-host-ko`, `default-basefont` | 비어 있습니다. 폰트도 기본폰트도 없습니다 |
| 편집기가 읽는 글꼴 목록 | 없습니다. **폰트 적용**을 한 번도 하지 않았기 때문입니다 |

상품의 `font-class` 기본값도 `default`이므로, 새 상품은 이 클래스를 씁니다. 이 상태에서는 편집기 텍스트 도구에 고를 글꼴이 없습니다. 익스포터는 템플릿을 올릴 때 파트너의 적용된 글꼴 목록을 읽는데, 목록이 하나도 없으면 업로드가 오류로 끝납니다. 아래 [폰트 올리기](#폰트-올리기)로 `default-basefont`나 `default-host-ko`에 폰트를 넣고 기본폰트를 정한 뒤 **폰트 적용**까지 마치세요.

| 단위 | 설명 |
| - | - |
| 폰트 클래스 | 폰트 세트 전체입니다. 상품 설정 **기본 정보**의 `font-class`(`fontClass`)가 이 이름을 가리킵니다. 상품의 기본값은 `default`입니다 |
| 디비전 | 클래스 안에서 사이트별로 목록을 나누는 단위입니다. **Division** 화면에 있는 디비전만 추가할 수 있습니다. `host`는 항상 있고 지울 수 없습니다 |
| 언어 | 디비전 안의 언어입니다. `ko`, `en`, `ja` 같은 코드입니다 |
| 폰트 그룹 | 실제 폰트가 담기는 곳입니다. 디비전과 언어 조합마다 하나씩 `폰트클래스-디비전-언어` 이름으로 자동 생깁니다. 예: `default-host-ko` |
| basefont 그룹 | 클래스마다 하나 있는 `폰트클래스-basefont` 그룹입니다. 여기 넣은 폰트는 그 클래스의 모든 그룹 목록에 함께 나옵니다 |

```mermaid theme={null}
flowchart LR
    P["상품 font-class"] --> C["폰트 클래스 default"]
    C --> B["default-basefont"]
    C --> D1["디비전 host"]
    D1 --> G1["default-host-ko"]
    D1 --> G2["default-host-en"]
```

## 편집기가 글꼴 목록을 만드는 방식

편집기는 띄울 때 글꼴 목록 하나를 읽습니다.

1. 상품의 `font-class`를 읽습니다.
2. 편집기를 띄울 때 받은 디비전과 언어를 붙여 `폰트클래스-디비전-언어` 그룹을 고릅니다. 따로 받지 않으면 `host`와 `ko`입니다.
3. 그 그룹에서 마지막으로 **폰트 적용**한 목록을 읽습니다. 이 목록에는 basefont 그룹의 폰트가 함께 들어 있습니다.

그 그룹이 없거나 한 번도 **폰트 적용**하지 않았으면 읽을 목록이 없습니다. 새 디비전이나 언어로 편집기를 띄우기 전에 폰트 클래스에 그 조합을 추가하고 폰트 적용까지 마치세요.

<Note>
  디비전과 언어는 편집기를 띄우는 코드가 띄우기 옵션 `div`, `lang`으로 넘깁니다. 어떤 값으로 띄우는지는 연동 담당자에게 확인하세요. 옵션 설명은 [띄우기 옵션](/docs/reference/launch-options)에 있습니다.
</Note>

템플릿의 글상자는 레이어 이름으로 그룹을 따로 지정할 수 있습니다. `use=basefont`면 basefont 그룹을, `div`와 `lang`을 함께 주면 그 그룹을 씁니다. 지정하지 않으면 편집기의 `div`, `lang`을 따릅니다. 레이어 이름 규칙은 [레이어 이름과 개체 종류](/docs/templates/layers)와 [텍스트 프레임과 폰트](/docs/templates/text)에 있습니다.

### 글꼴 목록의 순서

| 위치 | 내용 |
| - | - |
| 맨 위 | 지금 문서에서 쓰고 있는 폰트입니다. 이름 순입니다 |
| 이중 구분선 아래 | 나머지 폰트를 언어별로 묶어 이름 순으로 보여 줍니다 |

언어 묶음은 폰트가 한글을 담고 있으면 한국어, 일본어 가나를 담고 있으면 일본어, 그 밖에는 영어로 나뉩니다. 묶음 순서는 편집기 화면 언어(`ui_locale`)를 따릅니다. `ko`는 한국어, 영어, 일본어 순, `ja`는 일본어, 영어, 한국어 순, 그 밖에는 영어, 한국어, 일본어 순입니다.

목록에 보이는 이름은 폰트 파일에 든 다국어 이름 가운데 `ui_locale`에 맞는 것입니다.

## 폰트 클래스 만들기

<Steps>
  <Step title="Font 화면을 엽니다">
    왼쪽 메뉴에서 **Font**를 누릅니다. 왼쪽 목록이 **Font Group**, **Font Class**, **Font Utility** 세 부분으로 나뉩니다.
  </Step>

  <Step title="클래스를 추가합니다">
    **Font Class** 아래 **+ Add**를 누르고 `font class id`와 `dpName`을 넣습니다. id는 다른 클래스와 겹치면 안 됩니다. 만들면 `host` 디비전에 `ko` 언어가 들어 있고, `id-host-ko` 그룹과 `id-basefont` 그룹이 함께 생깁니다.
  </Step>

  <Step title="디비전을 추가합니다">
    클래스를 고르고 **Division** 옆 **Add**를 누릅니다. **Division** 화면에 등록된 디비전이 나옵니다. 추가하면 그 디비전의 `ko` 그룹이 생깁니다.
  </Step>

  <Step title="언어를 추가합니다">
    디비전 행을 누르고 **+ Add Language**에서 언어를 고릅니다. `클래스-디비전-언어` 그룹이 생깁니다.
  </Step>

  <Step title="상품에 연결합니다">
    **Product**의 상품 설정 **기본 정보**에서 `font-class`를 이 클래스로 고르고 **Update**를 누릅니다. 목록에는 `id - dpName` 형식으로 보입니다.
  </Step>
</Steps>

디비전 행을 고른 뒤 마우스를 올리면 지우는 버튼이 나옵니다. `host`는 지울 수 없고, 디비전마다 언어가 하나는 남아야 합니다. 디비전이나 언어를 지우면 그 폰트 그룹과 폰트 목록도 지워집니다. 클래스 이름 옆 **⋮** > **delete**로 클래스를 지우면 그 클래스의 모든 그룹과 basefont 그룹이 지워집니다.

## 폰트 올리기

폰트는 파일이 아니라 주소로 등록합니다. 편집기가 그 주소에서 폰트를 내려받으므로, 사용자 브라우저가 읽을 수 있는 곳에 파일을 올려 두어야 합니다.

<Steps>
  <Step title="폰트 파일을 올려 둡니다">
    Edicus Manager와 리소스 서버에는 폰트 파일을 직접 올리는 기능이 없습니다. 아래 요건을 갖춘 웹 서버나 클라우드 저장소에 파일을 올리고 주소를 준비합니다.

    * 주소가 `https://`로 시작하고 영문, 숫자, 기호(ASCII)로만 이루어집니다. 한글이나 일본어 같은 문자는 퍼센트 인코딩해서 넣습니다.
    * 로그인 없이 누구나 내려받을 수 있습니다.
    * 다른 사이트에서 읽을 수 있게 CORS가 허용돼 있습니다. Edicus Manager는 브라우저에서 폰트 파일을 직접 내려받아 이름표를 읽고, 편집기도 사용자 브라우저에서 같은 주소로 폰트를 받습니다. CORS가 막혀 있으면 등록할 때 "Font load failed: Font could not be loaded" 경고가 뜨고 실패합니다.
    * 파일은 3MB 이하를 권장합니다.
  </Step>

  <Step title="폰트 그룹을 고릅니다">
    **Font Group** 목록에서 넣을 그룹을 누릅니다. 모든 디비전과 언어에 공통으로 쓸 폰트는 basefont 그룹에 넣습니다.
  </Step>

  <Step title="폰트 추가를 누릅니다">
    **폰트 등록하기** 창에 주소를 한 줄에 하나씩 넣고 **불러오기**를 누릅니다. 목록을 확인하고 **등록**을 누르면 매니저가 폰트를 읽어 이름, 스타일, 지원 언어, 미리보기 그림을 만듭니다.
  </Step>

  <Step title="결과를 확인합니다">
    줄마다 결과가 붙습니다. `OK`는 새로 등록, `덮어쓰기`는 같은 이름의 폰트를 바꿈, `건너뜀`은 같은 주소가 이미 있음, `실패`는 폰트를 읽지 못함입니다. 하나라도 실패하면 아무것도 등록되지 않습니다.
  </Step>

  <Step title="기본폰트를 지정합니다">
    처음이면 목록에서 폰트를 고르고 **더보기** > **기본폰트로 지정**을 누릅니다. 새 글상자가 이 폰트로 시작합니다. 그룹에 기본폰트가 없으면 basefont 그룹의 기본폰트를 씁니다.
  </Step>

  <Step title="폰트 적용을 누릅니다">
    오른쪽 위 **폰트 적용**을 눌러야 편집기와 익스포터가 바뀐 목록을 읽습니다. 적용 뒤에는 그 옆에 배포 시각이 보입니다.
  </Step>
</Steps>

<Warning>
  기본폰트를 바꾸면 이미 주문한 상품의 렌더링이 달라질 수 있습니다. 운영 중인 그룹의 기본폰트는 신중하게 바꾸세요.
</Warning>

목록을 바꾼 뒤 아직 적용하지 않았으면 위쪽에 "폰트 목록이 변경되었습니다" 안내가 뜨고 **폰트 적용**이 강조됩니다. 그룹과 basefont 그룹 어디에도 기본폰트가 없으면 적용이 "기본 폰트를 지정하지 않았습니다"로 실패합니다.

### Font Group 화면의 버튼

| 버튼 | 하는 일 |
| - | - |
| **폰트 추가** | 주소로 폰트를 등록합니다 |
| **폰트 정보확인** | 주소의 폰트를 등록하지 않고 이름표와 크기, 보호 여부만 봅니다 |
| **폰트 삭제** | 고른 폰트 하나를 목록에서 뺍니다 |
| **폰트 패밀리 삭제** | 고른 폰트와 같은 패밀리의 폰트를 모두 뺍니다 |
| **더보기** > **기본폰트로 지정** | 고른 폰트를 그룹의 기본폰트로 정합니다 |
| **더보기** > **폰트 URL 다운로드** | 그룹 폰트 주소 목록을 텍스트 파일로 받습니다 |
| **폰트 적용** | 지금 목록을 편집기와 익스포터에 반영합니다 |

목록에서 폰트를 고르면 오른쪽에 정보가 나옵니다. **Key Value**의 Family와 Style이 폰트를 구분하는 값입니다. **For Developer**의 **InDesign key**는 익스포터가 폰트를 찾을 때 맞춰 보는 값입니다. **Language**는 파일에 한글이 있으면 `ko`, 가나가 있으면 `ja`가 붙고 `en`은 항상 붙습니다.

폰트에 편집기 폰트 엔진이 지원하지 않는 글자 대체(GSUB) 정보가 있으면 "지원하지 않는 lookup table 데이터" 경고가 뜹니다. 등록은 되고, 경고는 폰트 정보에 남습니다.

## 폰트 파일 보호

**Font Utility** > **Encryption**에서 TTF, OTF, WOFF 파일을 에디쿠스 전용 보호 파일로 바꿀 수 있습니다. 변환한 파일은 이름 앞에 `enc-`가 붙어 내려받아집니다. 이 파일을 올린 주소로 등록하면 편집기와 매니저는 읽지만, 파일을 내려받은 사람은 일반 폰트로 쓸 수 없습니다. **보호된 폰트파일 테스트**로 변환 여부를 확인합니다.

## 템플릿 폰트와 글꼴 목록

익스포터는 템플릿을 올릴 때 상품의 `font-class`와 마지막으로 적용한 그룹 목록으로 폰트를 찾습니다. 지정한 그룹이 없으면 basefont 그룹으로 대신 찾습니다. 그래도 찾지 못한 폰트가 있으면 **Preview** 뒤 `Unregistered fonts` 오류에 폰트 이름이 나오고, **Upload Template** 단추가 나오지 않아 익스포터로 올릴 수 없습니다([텍스트 프레임과 폰트](/docs/templates/text#폰트를-찾지-못할-때) 참고). 그래서 템플릿을 올리기 전에 폰트를 등록하고 적용해 두어야 합니다.

템플릿 글상자는 쓰인 폰트의 주소를 문서 안에 함께 기록합니다. 그래서 나중에 그 폰트를 그룹에서 빼도 이미 만든 템플릿과 프로젝트의 글자는 기록된 주소로 그대로 그려집니다. 다만 글꼴 목록에는 없으므로, 그 글자를 고르면 글꼴 버튼에 등록 이름 대신 패밀리와 스타일 이름이 그대로 보입니다.

### 템플릿의 폰트 바로잡기

폰트를 지웠다가 다시 등록하면 주소와 등록 번호가 바뀝니다. 템플릿은 옛 주소를 가지고 있으므로 아래로 바로잡습니다.

<Steps>
  <Step title="Utility의 Font를 엽니다">
    **Resource**에서 템플릿을 고르고 **Utility** > **Font**를 엽니다. **Used**는 템플릿에 쓰인 폰트, **Unresolved**는 올릴 때 찾지 못한 폰트입니다. **Textbox Usage** 탭에서는 글상자마다 빠진 폰트를 볼 수 있습니다.
  </Step>

  <Step title="Fix를 누르고 디비전과 언어를 고릅니다">
    고른 조합의 `폰트클래스-디비전-언어` 그룹과 템플릿 폰트를 패밀리와 스타일로 맞춰 봅니다.
  </Step>

  <Step title="Font Fix 창에서 Fix를 누릅니다">
    등록 번호가 다른 폰트는 그룹의 새 주소로 바뀝니다. 그룹에서 빠졌고 템플릿에서 쓰지 않는 옛 기본폰트는 지워지고 지금 기본폰트가 들어갑니다. 템플릿 파일이 바로 저장됩니다.
  </Step>
</Steps>

## 됐는지 확인

<Check>
  **Resource**에서 그 상품의 템플릿을 고르고 **Demo**를 누릅니다. 글상자를 골라 글꼴 목록에 등록한 폰트가 보이면 됩니다. 안 보이면 **폰트 적용**을 눌렀는지, 상품의 `font-class`가 그 클래스인지 확인하세요.
</Check>

## 다음 단계

<Columns cols={2}>
  <Card title="텍스트 프레임과 폰트" icon="font" href="/docs/templates/text">
    InDesign에서 글상자와 폰트를 준비하는 규칙입니다.
  </Card>

  <Card title="리소스 관리" icon="folder-open" href="/docs/products/resources">
    템플릿을 찾고 Utility로 점검합니다.
  </Card>
</Columns>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.