웹 페이지에서 Adobe Typekit 웹 글꼴, Edge 웹 글꼴 및 자체 호스팅 웹 글꼴을 사용하는 방법에 대한 자세한 내용은 이 문서를 참조하십시오.

참고:

Adobe Muse는 더 이상 새로운 기능을 추가하지 않으며 2020년 3월 26일 목요일에 지원이 중단됩니다. 자세한 정보 및 지원은 Adobe Muse 서비스 종료 페이지를 참조하십시오.

참고:

  Typekit은 이제 Adobe Fonts로 이름이 변경되었으며 Creative Cloud 및 기타 구독에 포함됩니다. 자세히 알아보기

Adobe Muse에 Typekit 글꼴 사용 방법

Adobe Typekit 웹 글꼴은 현재 Adobe Muse 글꼴 추가/제거 메뉴에서 사용할 수 있습니다.

Creative Cloud 플랜에 가입하면 Typekit 라이브러리에서 일부 글꼴 모음을 사용할 수 있습니다. 유료 요금제에 가입하면 수천 가지 글꼴을 포함한 전체 라이브러리를 이용할 수 있습니다. Typekit 요금제 가입에 대한 자세한 내용은 Typekit의 웹 글꼴 호스팅 요금제를 참조하십시오.

Typekit은 자체 호스팅 웹 글꼴과는 달리, 사용자가 웹 사이트에서 사용하려는 글꼴을 호스팅합니다. 즉, Typekit 라이브러리에서 글꼴을 선택하고 Adobe Muse에서 사이트를 게시하면 Typekit은 자동으로 해당 글꼴을 호스팅하고 Typekit 계정을 웹 사이트에 연결합니다.

사이트에 Typekit 글꼴 추가

  1. Adobe Muse에서 [파일] > [웹 글꼴 추가/제거]를 선택합니다.

    FileAddRemoveWebFonts
  2. Creative Cloud 계정 유형에서 사용 가능한 모든 Typekit 웹 글꼴이 [웹 글꼴 추가] 대화 상자의 [Typekit] 탭에 표시됩니다.

    AddWebFonts
  3. 여기에서 디자인 목적에 가장 적합한 글꼴을 찾아 보십시오. 다음 [정렬] 및 [필터] 옵션을 사용하여 필요한 글꼴을 선택할 수 있습니다.

    • 버튼을 클릭하여 특징, 최신이름 옵션에 따라 정렬합니다.
    SortTypekitFonts
    • 다음 필터를 사용하려면 필터를 클릭합니다.
      • 분류: 세리프, 산세리프, 첨자 등과 같은 분류에 따라 Typekit 글꼴을 필터링할 수 있습니다.
      • 권장: 단락 또는 머리글에서 Typekit가 권장하는 글꼴에 따라 글꼴을 필터링합니다.
      • 속성: 두께, 너비, 높이 등과 같은 속성에 따라 필터링합니다.
    AddWebFontsFilters
  4. 사용할 글꼴을 찾았으면 해당 글꼴을 클릭합니다. 글꼴이 선택되었다는 확인 표시가 나타납니다. 원한다면 여러 글꼴을 선택하여 한꺼번에 추가할 수도 있습니다. 선택한 글꼴 탭에 선택한 모든 글꼴이 표시됩니다.

    SelectedTypekitWebFonts
  5. [확인]을 클릭합니다. [웹 글꼴 알림] 대화 상자가 나타나면 새 웹 글꼴이 추가되었는지 확인합니다. 원하는 경우 [다시 표시 안 함] 옵션을 선택합니다.

    fig_07_type
    [확인]을 클릭하면 확인 메시지가 닫힙니다.

    이제 [글꼴] 메뉴를 사용하여 [웹 글꼴] 옵션을 다시 선택하면 추가한 글꼴 목록이 표시됩니다.

    FileAddRemoveWebFonts

텍스트에 Typekit 글꼴 적용

  1. Adobe Muse에서 Typekit 글꼴을 적용할 텍스트를 선택합니다.

    TextForEdgeWebFont
  2. 텍스트를 선택한 상태로 글꼴 메뉴에서 적용할 Typekit 글꼴을 선택합니다.

    ApplyTypekitFont

Adobe Muse에서 Edge 웹 글꼴 사용

웹 글꼴을 사용하면 Typekit.com에서 호스팅하는 대규모 온라인 라이브러리의 수백 가지 글꼴을 선택할 수 있습니다. Adobe Muse의 웹 글꼴 라이브러리는 Adobe Muse 구독에 포함되어 있습니다. 웹 디자인 시 글꼴에 액세스 및 사용하기 위해 Typekit 계정에 로그인하거나 이 계정을 구입할 필요는 없습니다.

참고: Typekit 계정이 있는 경우 Adobe Muse에서 현재 제공되는 웹 글꼴 집합과 typekit.com에 방문하여 액세스할 수 있는 웹 글꼴 집합에 차이가 있다는 걸 알 수 있습니다. Adobe Muse에서 제공되는 웹 글꼴은 무료에 제한이 없으며 Typekit 계정을 요구하지 않습니다. 하지만 Typekit 계정에서 제공되는 웹 글꼴은 사용과 액세스가 제한됩니다. Adobe Muse의 차기 버전에서는 Adobe Muse 작업 영역 내에서 Typekit 글꼴 라이브러리 액세스 기능을 제공할 예정이며 이 기능은 아직 사용할 수 없습니다.

웹 글꼴 사용의 이점:

  • 컴퓨터에 설치된 글꼴이 아니더라도 고유한 스타일의 글꼴을 사용하여 텍스트 내용의 스타일을 지정할 수 있습니다..
  • 사이트에 게시, 내보내기 또는 사이트를 미리 보기할 때 텍스트에 적용된 웹 글꼴이 자동으로 페이지에 연동됩니다.
  • Typekit.com에 글꼴이 호스팅됩니다. 방문자가 브라우저에서 라이브 사이트를 볼 때 백그라운드에서 글꼴이 다운로드되어 텍스트가 표시됩니다..

드물지만 페이지가 로드될 때 Typekit 서버에서 적용한 글꼴을 동적으로 로드할 수 없는 경우 텍스트 내용은 백업 글꼴을 사용하여 표시됩니다. 이러한 상황이 발생할 확률은 거의 없지만 방문자는 텍스트 내용을 볼 수 있으며 사이트에 오류 메시지는 표시되지 않습니다.

디자인에 웹 글꼴을 추가할 때 주의할 사항이 있습니다. 웹 글꼴을 너무 많이 추가하면 전체적인 다운로드 시간이 늘어나 사이트가 굉장히 느려지기 때문에 사용자 불만족이 야기될 수 있습니다. 이 점을 염두에 두고 디자인에 1-2개의 글꼴 그룹을 적용하십시오. 한 그룹에 4가지 스타일이 포함되어 있습니다. 웹 글꼴은 (이미지 및 동영상과 마찬가지로) 원격 리소스이기 때문에 방문자가 사이트의 페이지를 볼 때 방문자의 브라우저 캐시로 다운로드됩니다.

Adobe Muse의 또 다른 기능으로 사이트에서 사용되는 모든 웹 글꼴을 추적할 수 있습니다. .muse 파일에서 사용된 웹 글꼴을 삭제하더라도 다음에 .muse 파일을 열면 [글꼴] 메뉴 목록에 해당 웹 글꼴이 보관되어 있습니다. 따라서 페이지를 디자인할 때 사이트에 필요한 웹 글꼴을 실수로 지웠어도 수동으로 사용할 글꼴을 추적하지 않아도 됩니다.

Adobe Muse 프로젝트에 Edge 웹 글꼴 추가

새 웹 글꼴을 추가하려면 다음 단계를 수행하십시오.

웹 글꼴 라이브러리가 표시된 새 창이 나타납니다.

  1. [텍스트] 도구를 사용하여 텍스트 프레임에서 일부 텍스트를 선택합니다.

  2. ([컨트롤] 패널 또는 [텍스트] 패널에서) [글꼴] 메뉴를 사용하여 [웹 글꼴] > [웹 글꼴 추가...]를 선택합니다.

    EdgeWebFontsLibrary
    웹 글꼴 라이브러리에서 페이지에 적용할 수 있는 수백 개의 글꼴에 액세스할 수 있습니다.

    페이지 위쪽에 있는 [필터]를 클릭하여 추가하려는 글꼴 스타일을 선택할 수 있습니다. 또는 검색 필드에 글꼴 이름을 입력하여 찾을 수도 있습니다.

  3. 사용할 글꼴을 찾았으면 해당 글꼴을 클릭합니다. 글꼴이 선택되었다는 확인 표시가 나타납니다. 원한다면 여러 글꼴을 선택하여 한꺼번에 추가할 수도 있습니다.

    SelectedEdgeWebFonts
    추가할 글꼴을 클릭하면 선택되었다는 확인 표시가 나타납니다.

    오른쪽 위에서 한 줄 또는 여러 줄 단추를 클릭하여 머리글이나 단락에 적합한 글꼴을 확인할 수 있습니다.

    EdgeWebFontsFilters
    머리글 텍스트의 스타일로 적합한 글꼴 목록을 확인합니다.

    가장 오른쪽에 있는 확인 표시 단추를 클릭하면 현재 창에 선택한 글꼴 목록이 표시됩니다. 선택한 글꼴을 추가하고 싶지 않은 경우 해당 글꼴의 이름을 다시 클릭하면 선택이 취소됩니다.

    [웹 글꼴 알림] 대화 상자가 나타나면 새 웹 글꼴이 추가되었는지 확인합니다.

  4. 추가할 글꼴을 모두 선택했으면 [확인]을 클릭합니다.

  5. 확인을 클릭합니다.

    또한 원하는 경우 [다시 표시 안 함] 확인란을 선택합니다.

    fig_07_type
    [확인]을 클릭하면 확인 메시지가 닫힙니다.

    이제 [글꼴] 메뉴를 사용하여 [웹 글꼴] 옵션을 다시 선택하면 추가한 글꼴 목록이 표시됩니다.

    EdgeWebFonts
    [글꼴] 메뉴의 [웹 글꼴] 섹션에서 [웹 글꼴 추가]를 선택합니다.

Edge 웹 글꼴 추가 및 적용

  1. Adobe Muse에서 Edge 웹 글꼴을 적용할 텍스트를 선택합니다.

    TextForEdgeWebFont
  2. 텍스트를 선택한 상태로 [글꼴] 메뉴에서 적용할 Edge 웹 글꼴을 선택합니다.

    ApplyEdgeWebFonts

Adobe Muse에서 자체 호스팅 웹 글꼴 사용

자체 호스팅 웹 글꼴 기능은 타사 공급업체에서 구매한 웹 글꼴에 액세스하고 사용할 수 있도록 해줍니다. 특정 웹 글꼴은 사이트 방문자 각각의 컴퓨터나 장치에서 사용할 수 없을 수도 있습니다. 이런 상황에서는 브라우저의 텍스트 엔진에 따라 웹 안전 글꼴이 대신 사용되며, 이로 인해 웹사이트의 외관이 크게 달라질 수 있습니다.

웹 글꼴은 Adobe Edge Web Fonts(Typekit로 작동)에서 호스팅한 서버 등에서 다운로드해야 합니다. 그렇지 않으면 사이트 컨텐츠를 호스팅하는 동일한 웹 서버에 저장할 수도 있습니다. 사이트 방문 시 웹 글꼴을 실시간으로 호스팅하고 렌더링하는 방법을 자체 호스팅이라고 하며, 이런 방식으로 받은 글꼴은 자체 호스팅 웹 글꼴이라고 합니다.

전제 조건

다음 글꼴 유형은 자체 호스팅 웹 글꼴로 작업할 때 필요합니다:

시스템 글꼴

Adobe Muse에서 웹 페이지를 디자인할 때 필요합니다. 웹 글꼴을 구매할 때는 적합한 라이선스를 받은 데스크탑 글꼴을 다운로드 및 설치했는지 확인하십시오. Adobe Muse는 다음 글꼴 형식을 지원합니다.

  • 트루 타입 글꼴 (.ttf)
  • 오픈 타입 글꼴 (.otf)
  • 트루 타입 컬렉션 (.ttc)
  • Mac Data Fork 글꼴 (.dfont)
  • Mac Resource Fork TrueType Suitcases

웹 글꼴

브라우저에서 사이트를 렌더링할 때 사용됩니다. 모든 브라우저에서 글꼴을 렌더링하기 위해 Adobe Muse에서는 다음 웹 글꼴 형식이 필요합니다.

  • 웹 오픈 글꼴 형식 (.woff)
  • Embedded OpenType (.eot)
  • Scalable Vector Graphics (.svg) 이 포맷은 구형 안드로이드 장치에서 필요합니다.

 

자체 호스팅 웹 글꼴 추가

  1. [파일] > [웹 글꼴 추가/삭제]를 선택하여 [웹 글꼴 추가] 대화 상자를 불러오십시오.

  2. [웹 글꼴 추가] 대화 상자에서 [자체 호스팅 웹 글꼴] 탭을 선택하십시오.

    SelfHostedWebFontsDialog
  3. 글꼴을 포함한 폴더를 검색 및 선택하거나 해당 글꼴을 [웹 글꼴 추가] 대화 상자로 드래그하십시오. 웹 글꼴을 찾을 때 Adobe Muse는 그에 맞춰 프롬프트를 표시합니다. 예전에 웹 글꼴을 추가했었다면 [+ 글꼴 추가] 버튼을 눌러서 계속합니다.

    SelfHostedWebFontsFound
  4. Adobe Muse가 특정 폴더 내에 웹 글꼴 파일을 검색하고 자동으로 관련 시스템 글꼴을 연결시켜 줍니다. 웹 글꼴이 적절한 라이선스를 얻었는지 확인하고, [계속]을 클릭합니다.

  5. 관리 모드가 자동으로 활성화되며, 추가된 웹 글꼴이 목록에 나타납니다.

    ManageModeSelfHostedWebFonts

자체 호스팅 웹 글꼴 관리

관리 모드는 모든 자체 호스팅 웹 글꼴 및 이와 일치하는 데스크탑 글꼴 목록을 표시합니다. 새로 추가된 글꼴, 글꼴 파일이 누락된 글꼴 또는 일치하는 데스크탑 글꼴이 없는 경우 목록의 상단으로 올라옵니다.

자체 호스팅 웹 글꼴의 관리자 모드에서는 다음과 같은 작업을 할 수 있습니다.

일치하는 데스크탑 글꼴 지정하기

간혹 Adobe Muse가 일치하는 데스크탑 글꼴을 자동으로 찾지 못할 수도 있습니다. 이런 경우, 웹 글꼴과 일치하는 글꼴을 정확하게 지정해야 합니다. 웹 글꼴과 일치하는 글꼴을 지정하기 위해서는 다음의 방법을 따르십시오.

  1. 버튼을 클릭하여 글꼴에 맞는 대화 상자를 불러옵니다.

  2. [일치] 버튼을 클릭하여 시스템에 설치된 글꼴 목록을 표시합니다.

  3. 목록을 스크롤하거나 이름으로 필터링하여 일치하는 시스템 글꼴을 선택합니다. [확인]을 클릭하여 일치를 완료합니다.

누락된 글꼴 파일 지정하기

Adobe Muse가 .woff 파일에 맞는 .eot.svg 파일을 자동으로 찾을 수 없다면, 수동으로 찾을 수 있습니다. 누락된 글꼴 파일을 찾으려면 글꼴 옆의  버튼을 클릭하십시오. [검색]을 클릭하여 누락된 파일의 위치를 탐색합니다. [확인]을 클릭하여 누락된 파일을 추가합니다.

기타 기능

  • 라이선스 정보 제공: 편집하려는 글꼴 옆의  버튼을 클릭하면 라이선스 정보가 제공됩니다. [확인]을 클릭하여 완료합니다.
  • 글꼴 삭제: 삭제하려는 글꼴을 선택하고, [확인]을 클릭하십시오.
  • 글꼴 목록 필터링: 글꼴 텍스트 상자의 글꼴 라벨에 전체 혹은 일부 글자를 입력하여 글꼴 목록을 필터링 하십시오.

자체 호스팅 웹 글꼴 검색

이전에 자체 호스팅 웹 글꼴을 추가했었다면, [웹 글꼴 추가] 대화 상자를 시작할 때 검색 모드가 자동으로 활성화됩니다. 이 모드는 글꼴의 축소판 미리 보기를 그룹별로 제공하고 글꼴을 선택하여 글꼴 드롭다운에 추가할 수 있습니다. (새롭게 추가된 자체 호스팅 글꼴은 글꼴 파일 누락이나 일치하는 데스크탑 글꼴이 없는 등의 문제가 존재하지 않는다는 가정하에 모두 글꼴 드롭다운에 추가되는 것이 기본값입니다.) 이름이나 선택한 항목만으로 글꼴 그룹을 필터링할 수도 있습니다. 

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책