Adobe Muse에서 타이포그라피 및 폰트를 샤용하는 방법에 대해 알아봅니다.

참고:

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

참고:

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

웹 페이지를 디자인할 때 Adobe Muse를 사용하면 3가지 다른 글꼴 유형을 텍스트에 적용할 수 있습니다. 페이지를 게시하거나 내보낼 때 적용한 글꼴 유형에 의해 텍스트 내용이 렌더링되는 방식이 결정됩니다. 또한 3가지 다른 글꼴 유형은 여러 측면에서 사이트 동작과 성능에 영향을 미치기 때문에 각 유형별로 어떤 결과가 나타나는지 먼저 숙지하는 것이 좋습니다.

웹 페이지에 텍스트를 추가하면:

  • [텍스트] 도구를 사용하여 페이지에 직접 텍스트를 입력할 수 있습니다.
  • [파일] > [배치]를 선택하고 외부 TXT 파일을 불러와 텍스트 내용에 배치할 수 있습니다.
  • 다른 외부 출처의 텍스트를 복사한 다음 페이지에 붙여넣을 수 있습니다.

텍스트를 포함한 텍스트 프레임을 생성한 후 [텍스트] 패널 또는 컨트롤 패널의 옵션을 사용하여 글꼴의 색상, 크기, 스타일, 정렬을 비롯한 서식 옵션을 설정할 수 있습니다. 또한 [글꼴] 메뉴에서 글꼴 디자인에 맞는 글꼴(Arial, Helvetica 등)을 선택할 수 있습니다.

이 문서에서는 [글꼴] 메뉴를 사용하여 적용할 수 있는 3가지 다른 유형을 간략하게 살펴보겠습니다. 글꼴 유형별 이점 및 잠재적인 문제 그리고 텍스트 조정 및 텍스트 프레임 편집에 관한 방법을 알아봅니다.

웹 글꼴, 표준 글꼴 및 시스템 글꼴의 차이점 이해

텍스트 컨텐트의 서식을 지정하는 데는 다음 세 가지 글꼴을 적용할 수 있습니다.

  • 웹 글꼴
  • 표준 글꼴
  • 시스템 글꼴

각 글꼴을 간단히 설명하자면 다음과 같습니다.

Adobe Muse의 웹 글꼴은 Typekit 글꼴, Edge 웹 글꼴 및 자체 호스팅 웹 글꼴로 구성됩니다. Adobe Muse에서 페이지에 적용할 수 있는 수백 가지 글꼴 유형을 포함한 대규모 라이브러리에 액세스할 수 있습니다. 텍스트 컨텐트에 웹 글꼴을 적용하면 Adobe Muse에서 해당 글꼴 모음에 대한 링크를 만드는 코드룰 페이지에 자동으로 추가합니다. 브라우저를 열고 페이지를 방문하면 페이지를 렌더링하는 데 필요한 웹 글꼴이 다운로드된 후 컨텐트가 텍스트로 표시됩니다. 여기에는 여러 가지 장점이 있습니다. 예를 들어, 머리글이나 기타 중요한 텍스트 컨텐트를 디자인하는 데 여러 가지 다양한 글꼴을 사용할 수 있고, 페이지를 게시하거나 내보내서 렌더링된 텍스트를 방문자가 선택 및 복사할 수 있습니다. 그러나 같은 페이지 내에서 웹 글꼴을 너무 많이 사용하지는 말아야 합니다. 디자인에 이미지를 너무 많이 사용하면 브라우저에서 페이지를 로드하는 속도가 느려지듯이, 페이지에 연결된 파일이 너무 많아도 로드 속도가 느려질 수 있습니다. 한 페이지에 사용되는 웹 글꼴이 세 가지를 넘지 않게 디자인을 제한하고 글꼴 크기를 어느 정도 크게 유지하여 텍스트를 읽기 쉽게 하는 것이 좋습니다. 자세한 내용은 Typekit 및 기타 웹 글꼴.

표준 글꼴(대체 포함)은 사이트를 방문하는 데 사용되는 거의 모든 컴퓨터에 설치되어 있는 글꼴입니다. 이러한 글꼴에는 Arial, Georgia, Times New Roman 등과 같은 표준 글꼴 모음이 포함됩니다. 종류가 다양하지는 않지만 흔히 사용되는 표준 글꼴을 선택하여 라이브 사이트를 텍스트로 렌더링할 수 있습니다. 표준 글꼴은 로드 속도가 빠르지만 자칫 밋밋한 느낌을 줄 수 있습니다. 표준 글꼴은 길이가 긴 텍스트 컨텐트 단락의 서식을 설정하기에 적합합니다. 표준 글꼴은 웹상에서 가독성을 높이는 데 중점을 두고 최적화되었기 때문입니다. 사이트가 제 기능을 다하고 사이트를 로드하는 데 시간이 오래 걸리지 않도록 하려면 되도록 표준 글꼴을 사용하는 것이 좋습니다.

시스템 글꼴을 사용하면 디자이너의 컴퓨터에 설치되어 있는 특정 글꼴을 기반으로 좀 더 독특한 타이포그라피를 사용할 수 있습니다. 예를 들어, 정원 가꾸기 같은 특정 주제와 관련된 사이트를 디자인하는 경우 Typekit 웹 글꼴 라이브러리에서는 찾을 수 없는 매우 독특한 꽃 모양 글꼴을 설치할 수 있습니다. 텍스트에 시스템 글꼴을 이따금씩만 적용한다면 문제 될 것이 없습니다. 그러나 이러한 텍스트 컨텐트는 이미지로 내보내진다는 점을 기억해야 합니다. 즉, 페이지를 로드하는 데 시간이 좀 더 오래 걸리며, 방문자가 페이지에 있는 텍스트를 선택하거나, 복사하거나, 붙여넣을 수 없게 됩니다. 시스템 글꼴은 머리글 같은 특정 부분의 텍스트에만 사용하는 것이 좋습니다. 사이트를 이용하는 데 불편을 초래하지 않으려면 주소와 전화번호를 비롯하여 방문자가 자신의 일정이나 이메일 메시지에 붙여넣기 위해 복사하려 할 수 있는 컨텐트에는 시스템 글꼴을 사용하지 마십시오. 일부 방문자는 글꼴 크기가 작으면 텍스트를 읽기 어려워서 글꼴 크기를 확대 설정한 브라우저를 사용할 수도 있습니다. 그러나 시스템 글꼴을 사용하면 텍스트가 이미지 파일로 내보내지므로 글꼴 크기가 확대되지 않는다는 점을 염두에 둬야 합니다. 또 하나 명심해야 할 것은 검색 엔진에서 사이트를 인덱싱하여 검색 결과에 사이트 순위를 매길 때 기준으로 삼는 것이 텍스트 컨텐트라는 점입니다. 이와 같은 여러 가지 이유 때문에 시스템 글꼴은 디자인 효과를 높이기 위해 정말로 필요한 곳에만 적용하는 것이 좋습니다. 웹 글꼴이나 표준 글꼴 중 비슷한 것이 있으면 해당 글꼴을 대신 사용하십시오.

이러한 세 가지 유형의 글꼴을 적용하려면 [텍스트] 도구를 사용하여 텍스트를 선택한 다음 [글꼴] 메뉴에서 원하는 옵션을 선택합니다.

[글꼴] 메뉴
사용할 글꼴을 [글꼴] 메뉴에서 선택합니다.

[글꼴]메뉴의 맨 위쪽에는 최근에 사용한 글꼴의 목록이 표시됩니다. 따라서 페이지를 디자인할 때 한 번 사용한 글꼴을 쉽게 다시 적용할 수 있습니다. 최근 사용한 글꼴이 너무 많아서 불편하거나 목록에서 모두 지우고 싶으면 Adobe Muse 환경 설정에서 해당 부분을 변경하면 됩니다.

최근 사용 글꼴
최근 사용한 글꼴의 수를 설정하거나 최근 사용한 글꼴의 목록을 [글꼴] 메뉴에서 지웁니다.

다음은 각 글꼴 유형 및 각 글꼴 유형이 적용되면 라이브 웹 사이트의 텍스트 내용이 어떻게 렌더링되는지 좀 더 자세히 살펴보겠습니다.

선택한 텍스트에 글꼴 적용

최상의 글꼴 렌더링 결과를 얻으려면 용도에 맞는 글꼴을 사용해야 합니다. 예를 들어 (대량의 연속 텍스트가 작은 글꼴 크기로 표시되는) 단락에 글꼴을 적용하는 경우 화려하게 장식된 글꼴은 (일반적으로 머리글을 보다 큰 글꼴 크기로 표시하는 용도이므로) 사용하지 마십시오.

웹 사이트의 텍스트는 가독성이 중요한 고려 대상입니다. 화려한 글꼴의 경우 이러한 글꼴에 포함된 시각적 요소를 세세하게 렌더링할 만한 해상도가 웹에서 지원되지 않기 때문에 작은 글꼴 크기에서는 제대로 렌더링되지 않습니다.

또한 단락 글꼴에는 일반체, 이탤릭체, 볼드체, 볼드 이탤릭체 스타일을 사용할 수 있기 때문에 단락 내 인명, 책/영화 제목을 비롯한 기타 고유한 내용의 텍스트에 볼드체를 적용하거나 강조할 수 있습니다. 화려하고 스타일이 많이 적용된 대부분의 글꼴 그룹에는 이러한 스타일 옵션이 포함되어 있지 않습니다.

특수 용도를 위해 글꼴을 기술적으로 최적화할 수도 있습니다. 글꼴에 보다 큰 크기에서 효율적으로 렌더링되는 개요 서식을 사용하거나 플랫폼 전체적으로 보다 작은 크기에서 효율적으로 렌더링되는 글꼴 힌팅을 적용할 수도 있습니다. 이전에 설명한 것처럼 Adobe Muse에서 웹 글꼴에 액세스할 때 웹 글꼴 라이브러리에서 글꼴을 필터링하여 단락에서 또는 머리글에서 사용할 수 있는 권장 글꼴 목록을 확인할 수 있습니다. 디자인 시 텍스트 머리글 또는 단락에서 어떤 글꼴이 적합할지 판단이 서지 않는 경우 이와 같은 단락/머리글 권장사항을 기반으로 글꼴을 선택하면 제작한 페이지의 가독성은 염려하지 않아도 됩니다.

웹 글꼴을 사용하여 텍스트 스타일을 지정하는 절차는 표준 글꼴 및 시스템 글꼴을 적용하는 절차와 동일합니다. 웹 글꼴을 사용해 텍스트 스타일을 지정하려면 다음 단계를 수행합니다.

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

  2. [웹 글꼴]을 선택하고 목록에서 [글꼴] 그룹의 이름을 선택하고 [글꼴] 메뉴에서 적용할 글꼴을 선택합니다.

    웹 글꼴 선택
    글꼴 이름을 선택하여 선택한 텍스트 내용에 웹 글꼴을 적용합니다.

    글꼴을 적용한 후 텍스트 패널 또는 컨트롤 패널의 옵션을 사용하여 원하는 경우 글꼴의 크기, 색상을 비롯한 기타 특성을 설정할 수 있습니다.

    참고:

    페이지 디자인 시 웹 글꼴은 기타 모든 글꼴 유형과 동일하게 동작합니다. 텍스트 서식을 편집하고 텍스트 프레임을 편집하거나 크기를 조정하고 페이지에서 원하는 위치에 텍스트 프레임을 배치할 수 있습니다.

  3. 사이트 디자인을 마치면 [미리 보기]를 클릭하여 Adobe Muse에서 디자인이 어떻게 나타나는지 확인합니다. 또는 [파일] > [브라우저에서 페이지 미리 보기]를 선택하여 브라우저 창에서 디자인을 확인할 수 있습니다.

    위의 설명과 같이 (시스템 글꼴과 달리) 수백 개의 글꼴 중에서 선택할 수 있고 페이지의 고유 타이포그라피를 이미지 파일이 아닌 텍스트 파일로 내보낼 수 있기 때문에 웹 글꼴은 관심을 유도하는 페이지 디자인 시 매우 유용합니다.

  4. 브라우저에서 페이지를 미리 보면 웹 글꼴 텍스트가 텍스트 내용으로 렌더링됩니다. 이 텍스트 내용을 선택 및 복사하여 어떻게 동작하는지 확인합니다.

    웹 글꼴 텍스트 선택 가능
    내보내는 웹 글꼴 텍스트는 텍스트 형태이기 때문에 웹 브라우저에서 선택할 수 있습니다.

텍스트 내용을 이미지가 아닌 텍스트로 내보내는 것이 좋습니다. 시스템 글꼴을 선택하면 내보내는 텍스트 내용은 이미지이기 때문에 로드 시 시간이 소요됩니다.

웹 글꼴을 사용하면 방문자가 사이트의 페이지에서 직접 텍스트 내용을 복사 및 붙여넣기할 수 있습니다. 따라서 주소, 전화 번호 및 기타 중요 정보를 액세스 및 저장하여 지인과 공유하거나 자신의 오프라인 주소록에 저장할 수 있습니다.

또한 웹 글꼴을 텍스트로 렌더링하면 검색 엔진에서 웹 사이트 내용을 인덱싱할 때 이미지 파일에 비해 텍스트 내용을 보다 쉽게 구문 분석할 수 있기 때문에 사이트의 검색 결과 순위를 높일 수 있습니다. 웹 글꼴을 사용하면 방문자에겐 보다 빠른 페이지 로드 속도를, 사이트엔 보다 많은 있는 트래픽을 제공할 수 있습니다.

그리고 마지막으로 텍스트 내용은 텍스트 리더기를 사용하는 방문자가 탐색하기에도 쉽습니다. 페이지 머리글과 같은 중요 영역은 텍스트로 렌더링하면 모든 사용자의 액세스가 간편해집니다.

표준 글꼴 작업

[글꼴] 메뉴에는 표준 글꼴 목록의 섹션이 포함되어 있습니다. 모든 최신 컴퓨터에는 표준 글꼴이 설치되어 있기 때문에 페이지 디자인 시 이 글꼴을 자유롭게 적용할 수 있습니다. 시스템에 새로 글꼴을 설치할 필요가 없으며 방문자의 컴퓨터에 있는 이러한 글꼴을 사용하여 페이지의 텍스트 내용이 렌더링됩니다.

표준 글꼴은 소수의 공통적으로 사용되는 컴퓨터 글꼴로써 어느 컴퓨터에서나 텍스트 내용을 표시할 때 사용됩니다. 표준 글꼴을 사용하는 텍스트는 라이브 사이트에서 텍스트로 렌더링됩니다.

표준 글꼴은 웹 글꼴과 마찬가지로 텍스트를 텍스트로 렌더링하는 모든 이점을 두루 갖추고 있습니다.

  • 방문자는 웹 페이지 내용을 선택, 복사 및 붙여넣기할 수 있습니다.
  • 페이지가 텍스트 내용으로 구성된 경우 이미지가 많은 페이지에 비해 로드 속도가 빠릅니다.
  • 검색 엔진에서 텍스트 내용을 인덱싱하기 때문에 검색 결과 순위가 높아집니다.
  • 화면 읽기 프로그램을 사용하는 방문자는 이미지보다 텍스트에 더 쉽게 액세스할 수 있습니다.

하지만 표준 글꼴 사용의 단점은 페이지 디자인 시 글꼴 선택이 매우 제한된다는 것입니다.

[글꼴] 메뉴를 사용하여 [표준 글꼴]을 선택하면 전체 목록이 표시됩니다.

표준 글꼴 전체 목록
[글꼴] 메뉴에서 [표준 글꼴]을 선택하여 전체 목록을 봅니다.

표준 글꼴은 다음으로 제한됩니다.

  • Arial
  • Comic Sans
  • Courier New
  • Geneva
  • Georgia
  • Helvetica
  • Lucida Sans
  • Palatino
  • Times
  • Trebuchet
  • Verdana

옵션 위에 마우스를 대면 툴팁에 대체 글꼴 목록이 표시됩니다.

방문자 컴퓨터에 적용할 글꼴이 설치되지 않은 경우 유사한 글꼴이 자동으로 대체된다고 툴팁에 표시됩니다. 페이지 디자인은 원래 디자인과 비슷하며 글꼴이 없다 해도 방문자가 알지 못합니다. 오류 메시지가 표시되지 않으며 페이지 내용이 로드됩니다. 텍스트는 방문자 컴퓨터에 설치되어 있는 유사한 대체 글꼴을 사용하여 표시됩니다.

요약하자면 표준 글꼴은 방문자가 탐색 시 읽기 좋고 쉬운 페이지 내용을 작성하기에는 좋지만 글꼴 수가 제한되기 때문에 사이트의 디자인을 반영하는 서체를 찾기는 어렵습니다.

시스템 글꼴 작업

시스템 글꼴은 개인 컴퓨터에 설치된 글꼴을 참조합니다. 시스템 글꼴을 사용하여 이미지 편집 프로그램 등 다양한 프로그램에서 사용할 수 있습니다. 또한 Adobe Muse에서 페이지를 디자인할 때 이와 동일한 글꼴을 적용할 수 있습니다.

예를 들어 지진에 관한 웹 사이트를 디자인하는 경우 페이지 머리글이 디자인 주제에 맞도록 흔들리거나 갈라진 모양의 글꼴을 설치할 수 있습니다. 설치한 모든 글꼴을 Adobe Muse에서 사용할 수 있기 때문에 페이지 레이아웃에 제한이 없으며 페이지를 맞춤화할 수 있습니다. 또는 해당 사이트의 맞춤형 글꼴을 사용할 수도 있습니다. 시스템 글꼴에는 독특한 글꼴이 많이 제공되기 때문에 페이지를 보다 멋지게 꾸밀 수 있습니다.

방문자는 자신의 컴퓨터에 설치된 글꼴이 아니더라도 원래 스타일대로 시스템 글꼴이 적용된 텍스트를 볼 수 있습니다. 이렇게 하기 위해 Adobe Muse에서 자동으로 시스템 글꼴을 사용한 모든 텍스트를 이미지 파일로 내보냅니다. 이 작업은 사용자가 모르게 유연하게 처리됩니다. 페이지 디자인 시 시스템 글꼴 텍스트는 편집 가능 상태이기 때문에 원하면 언제든지 변경할 수 있습니다.

[글꼴] 메뉴에서 [시스템 글꼴]을 선택하면 컴퓨터에 설치된 글꼴 목록이 표시됩니다.

시스템 글꼴 목록
[시스템 글꼴] 섹션에 설치된 글꼴 목록이 표시됩니다.

텍스트에 시스템 글꼴을 적용 시 단점은 텍스트가 라이브 사이트에서 이미지로 렌더링되기 때문에 텍스트 내용을 로드하는데 보다 긴 시간이 걸린다는 점입니다.

시스템 글꼴을 사용하면 컴퓨터에 설치된 특정 글꼴을 기반으로 더 많은 고유 타이포그라피를 사용할 수 있기 때문에 이에 수반되는 문제가 발생합니다. 이러한 글꼴 그룹을 적용한 결과 페이지에 이미지가 많아져 로드하는데 오랜 시간이 걸립니다. 따라서 사이트 성능을 저하시킬 수 있습니다.

디자인에 소수의 시스템 글꼴만 적용하는 것이 좋습니다.

또한 텍스트에 링크가 적용되어 있지 않더라도 시스템 글꼴이 적용된 텍스트를 선택하고 [하이퍼링크] 메뉴의 [제목] 필드에 설명이 들어간 제목을 입력하는 것이 좋습니다.

브라우저에서 페이지를 미리 보기할 때 텍스트에 마우스를 대면 제목이 툴팁으로 표시됩니다.

제목 텍스트가 툴팁으로 표시됨
입력한 제목 텍스트가 툴팁으로 표시됩니다.

제목 태그는 화면 읽기 프로그램을 사용하여 사이트 내용을 읽기보다는 듣는 방문자에게 유용합니다. 또한 제목 추가가 중요한 이유는 웹 사이트를 인덱싱하는 검색 엔진에서 특히 이미지 텍스트에 페이지 머리글과 같이 중요 정보를 담고 있는 경우 이미지 제목을 사용하여 사이트의 내용을 보다 잘 분류할 수 있기 때문입니다.

가능하면 설치된 시스템 글꼴과 유사한 표준 글꼴을 검색하여 사용하십시오.

최근 사용한 글꼴 적용 및 재설정

Adobe Muse에서 텍스트에 글꼴을 적용하고 나면 해당 글꼴의 이름이 글꼴 메뉴의 첫 번째 섹션에 표시됩니다. 이 기능을 활용하면 해당 글꼴을 쉽게 찾을 수 있으므로 사이트 디자인의 다른 텍스트에도 동일한 글꼴을 간편하게 다시 적용할 수 있습니다. 어느 글꼴이 웹 글꼴인지, 표준 글꼴인지, 시스템 글꼴인지 기억할 필요도 없습니다. 세 가지 유형 중 어디에 속하는 글꼴이든 일단 텍스트에 적용한 글꼴은 목록 맨 위에 표시됩니다.

웹 사이트를 디자인할 때는 한 페이지에 사용되는 글꼴 수를 제한하는 것이 일반적인 관례입니다. 한 페이지에 사용되는 글꼴 수를 4개 이하로 제한하면 방문자가 텍스트 컨텐트를 화면으로 볼 때 그 내용을 좀 더 쉽게 읽을 수 있습니다. 그와 같은 일반적인 관례에 따라 작업을 한다면 [최근 사용한 글꼴] 섹션의 목록에 포함되는 글꼴 이름의 수가 많지 않을 것이므로 원하는 글꼴을 쉽게 찾을 수 있습니다.

그런데 때로는 디자인에 여러 가지 다른 글꼴들을 시험 삼아 사용해 볼 수도 있습니다. 또는 사이트의 각기 다른 섹션 여러 개를 디자인할 수도 있습니다. 이런 경우에는 [글꼴] 메뉴의 [최근 사용한 글꼴] 목록이 매우 길어질 수 있습니다. 목록이 너무 길어지면 원하는 글꼴을 선택하기가 오히려 더 불편합니다.

이 경우 [최근 사용한 글꼴] 섹션에 나열되는 글꼴 표시 설정을 제어하여 불편함을 해결할 수 있습니다. 다음 단계를 따르십시오.

  1. Adobe Muse > [환경 설정] 을 선택하여 [환경 설정] 대화 상자를 엽니다.

  2. [유형] 섹션에서 숫자 값을 직접 입력하거나 위쪽 및 아래쪽 화살표를 사용하여 [최근 글꼴 수]를 재설정합니다.

    최근 글꼴 수 재설정
    최근 사용한 글꼴을 몇 개까지 표시할지 설정합니다.

    [최근 글꼴 지우기] 단추를 클릭하면 최근에 사용한 글꼴이 목록에서 모두 지워집니다.

  3. [확인]을 클릭하여 변경 내용을 저장하고 [환경 설정] 대화 상자를 닫습니다.

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

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