인사이트
지난 1, 2부를 통해 배리어블 폰트의 원리와 장점, 한계를 이야기했는데요. 이어지는 3부에서는 배리어블 폰트를 지원하는 프로그램들과 웹 환경에서, 배리어블 폰트를 사용하는 방법을 준비했습니다.
배리어블 폰트 사용 방법
배리어블 폰트가 처음 발표된 것은 2016년입니다. 아직 10년이 채 되지 않았기 때문인지, 아직까지 배리어블 폰트를 지원하지 않는 프로그램이 꽤 많습니다. 대표적으로 Adobe의 Premiere Pro, After Effects, XD가 있습니다. 그리고 MS Office의 모든 프로그램은 역시 정식으로 배리어블 폰트를 지원하지 않습니다. 배리어블 폰트는 다양한 웨이트가 포함된 형식이기 때문에 지정된 웨이트를 사용하는 것은 가능합니다. 하지만 지정된 웨이트 사이의 값을 원하는 대로 조절하며 사용할 수 있는 배리어블 폰트만의 장점은 누리지는 못하죠. 사실상 배리어블 폰트를 사용하지 못하는 것과 다름이 없습니다.
따라서 배리어블 폰트의 기능을 제대로 활용하기 위해선 이를 지원하는 프로그램을 아는 것이 좋습니다. 2부에서 소개해 드렸던 ‘Variable Fonts(링크)'에서 각 OS와 프로그램별로 배리어블 폰트의 지원 여부를 확인하실 수 있는데요. 주요 프로그램의 지원 여부를 간단히 표로 정리해 드리니 참고하셔서 배리어블 폰트 사용에 도움이 되시길 바랍니다.
프로그램 상에서 배리어블 폰트를 사용하는 것은 어렵지 않습니다. 여타 폰트들과 같이 폰트를 선택한 뒤에 간단한 설정을 거치면 됩니다. Adobe Illustrator와 InDesign은 문자 패널에서 배리어블 폰트를 선택하면, 폰트 스타일 목록 옆에 배리어블 폰트 설정 버튼이 생성되는데요. 이 버튼을 클릭한 후 축별로 생성된 슬라이더를 원하는 값으로 조절해가며 사용할 수 있습니다. 그런데 Adobe Photoshop에서는 사용법이 조금 다릅니다. 문자 패널에서 배리어블 폰트를 선택한 후에 해당 텍스트 레이어를 선택하고 Properties(속성) 패널을 선택하면, 배리어블 폰트 설정을 확인할 수 있어요. 또 Figma에서는 텍스트 레이어를 선택한 후 문자 패널의 미트볼 버튼(⋯)을 클릭하면, 동일하게 슬라이더로 배리어블 폰트의 설정 값을 조절할 수 있는 탭이 나타납니다.
이외에도 Adobe Premiere Pro, After Effects, Cinema 4D에서 각각 서드파티 플러그인과 스크립트를 통해 배리어블 폰트를 사용할 수 있습니다. 사용방법은 위에서 소개해드린 방법과 크게 다르지 않으니, 배리어블 폰트를 더 다양한 프로그램에서 사용하고 싶으신 분들은 아래의 플러그인들을 사용해보시는 것을 추천해 드립니다.
Premiere Pro, After Effects용 플러그인 VariFont(링크) (유료)
Cinema 4D용 플러그인 VariText(링크) (유료)
Adobe에서 제공하는 After Effects용 스크립트(링크) (무료)
배리어블 폰트 웹 활용 방식
위에서 보여준 사이트과 같이 배리어블 폰트를 웹에서 사용하는 것은 웹에 생명력을 불어넣어 주는 역할을 합니다. 일반적으로 사용하는 스태틱 폰트의 활용에서 조금의 노력만 더하면 큰 변화를 이끌어낼 수 있죠. 아래의 세 가지 예시들을 통해 간단한 사용법에 대해 알아보겠습니다.
첫번째로 마우스가 해당 영역에 올라갔을 때 스타일의 변화를 주는 경우입니다. 스태틱 폰트를 사용할 경우 해당 영역이 버튼임을 알려주기 위해 웨이트를 굵게 하거나 언더바를 추가하곤 하는데요. 배리어블 폰트를 사용하면 더 섬세한 애니메이션을 통해 사용자의 행동을 유도할 수 있습니다.
마우스 호버 시 축의 값이 변화하는 애니메이션
다음은 마우스의 위치에 따라 폰트의 스타일을 다르게 하는 기능입니다. 해당 기능의 경우, 웹의 메인 화면 혹은 강조하고 싶은 메시지가 있을 때 효과적으로 표현할 수 있게 목소리를 더해주는 역할을 합니다. 추가로 마우스의 위치뿐만 아니라 마이크를 사용해 소리에 따라 스타일의 변화를 줄 수도, 카메라를 이용해 사용자의 움직임에 따라 스타일의 변화를 줄 수도 있습니다.
마우스의 위치에 따라 축의 값이 변화하는 애니메이션
마지막으로는 배리어블 폰트의 축을 사용자가 직접 조절할 수 있게 해주는 기능입니다. 해당 기능은 사용자가 조금 더 직관적으로 각 스타일을 비교해보며 사용할 수 있다는 장점이 있습니다.
슬라이더로 축의 값을 조절
웹 디자인 적용 예시
배리어블 폰트는 반응형 웹사이트에서도 그 빛을 발합니다. 폰트를 디자인하기 위한 프로그램 중 하나인 글립스의 홈페이지(링크)는 모든 페이지가 배리어블 폰트인 ABC Dinamo의 「Arizona」로 이루어져 있습니다. 덕분에 각 메뉴 탭이나 버튼에 마우스를 올리면 다음 두께로 점프하여 두꺼워지는 것이 아니라, 두께가 부드럽게 변화하며 애니메이션 효과처럼 자연스럽게 나타납니다. 샌프란시스코 심포니의 전용서체 「SF Symphony」를 소개하는 사이트인 ‘Symphosizer(링크)’를 보시면 배리어블 폰트의 다이나믹함을 더 직관적으로 확인하실 수도 있습니다. 이 페이지에서는 교향악단의 특성을 살려 사람의 목소리를 비롯한 다양한 소리를 사용해 배리어블 폰트의 형태를 변형해보실 수 있습니다. 소리를 낼 수 없는 상황이라면 마우스를 사용해 체험해보실 수도 있습니다.
Glyphs 홈페이지
GT Flexa 홈페이지
Symphosizer
배리어블 폰트를 웹상에서 테스트해볼 수 있는 사이트들도 있습니다. ABC Dinamo에서 제공하는'Font Gauntlet(링크)'에서는 사용자가 갖고 있는 배리어블 폰트 파일이나 ABC Dinamo에서 제작한 배리어블 폰트들을 사용해볼 수 있습니다. Laurence Penney가 제작한 ‘AXIS PRAXIS(링크)'에서는 보다 더 다양한 상황에서, 여러 배리어블 폰트들을 동시에 테스트할 수 있고, ‘Variable Fonts(링크)’에는 컬러 폰트와 딩벳 폰트를 포함한 377종의 배리어블 폰트를 사용해보실 수 있습니다. ‘Samsa(링크)’에서는 배리어블 폰트의 각 글립들이 어떻게 변화하는지를 직관적으로 확인해보실 수도 있습니다.
한 번 더 눈길이 가는 다채로운 폰트
폰트마다 조금의 차이는 있겠지만 배리어블 폰트 파일 하나의 크기는 스태틱 폰트 파일 3~5개의 크기와 비슷합니다. 따라서 한두 가지의 폰트 스타일만 원한다면, 스태틱 폰트를 사용하는 것이 오히려 효율적일 수 있죠. 하지만 배리어블 폰트를 사용한다면 다양한 스타일과 애니메이션으로 다채로운 표현을 할 수 있습니다. 사용자를 디자인에 끌어들여 함께 상호작용하는 경험을 제공할 수도 있죠. 한 번 더 눈길이 가는, 더 오래 머무르게 되는 색다른 디자인을 위해 배리어블 폰트를 사용해보시는 건 어떤가요?
|
| 오세현 |
| 타입테크팀 |
다양한 것을 배우고 많은 것을 나누며 살고 싶어요. 글자도 더 잘 알고 싶고요. |
인사이트
지난 1, 2부를 통해 배리어블 폰트의 원리와 장점, 한계를 이야기했는데요. 이어지는 3부에서는 배리어블 폰트를 지원하는 프로그램들과 웹 환경에서, 배리어블 폰트를 사용하는 방법을 준비했습니다.
배리어블 폰트 사용 방법
배리어블 폰트가 처음 발표된 것은 2016년입니다. 아직 10년이 채 되지 않았기 때문인지, 아직까지 배리어블 폰트를 지원하지 않는 프로그램이 꽤 많습니다. 대표적으로 Adobe의 Premiere Pro, After Effects, XD가 있습니다. 그리고 MS Office의 모든 프로그램은 역시 정식으로 배리어블 폰트를 지원하지 않습니다. 배리어블 폰트는 다양한 웨이트가 포함된 형식이기 때문에 지정된 웨이트를 사용하는 것은 가능합니다. 하지만 지정된 웨이트 사이의 값을 원하는 대로 조절하며 사용할 수 있는 배리어블 폰트만의 장점은 누리지는 못하죠. 사실상 배리어블 폰트를 사용하지 못하는 것과 다름이 없습니다.
따라서 배리어블 폰트의 기능을 제대로 활용하기 위해선 이를 지원하는 프로그램을 아는 것이 좋습니다. 2부에서 소개해 드렸던 ‘Variable Fonts(링크)'에서 각 OS와 프로그램별로 배리어블 폰트의 지원 여부를 확인하실 수 있는데요. 주요 프로그램의 지원 여부를 간단히 표로 정리해 드리니 참고하셔서 배리어블 폰트 사용에 도움이 되시길 바랍니다.
프로그램 상에서 배리어블 폰트를 사용하는 것은 어렵지 않습니다. 여타 폰트들과 같이 폰트를 선택한 뒤에 간단한 설정을 거치면 됩니다. Adobe Illustrator와 InDesign은 문자 패널에서 배리어블 폰트를 선택하면, 폰트 스타일 목록 옆에 배리어블 폰트 설정 버튼이 생성되는데요. 이 버튼을 클릭한 후 축별로 생성된 슬라이더를 원하는 값으로 조절해가며 사용할 수 있습니다. 그런데 Adobe Photoshop에서는 사용법이 조금 다릅니다. 문자 패널에서 배리어블 폰트를 선택한 후에 해당 텍스트 레이어를 선택하고 Properties(속성) 패널을 선택하면, 배리어블 폰트 설정을 확인할 수 있어요. 또 Figma에서는 텍스트 레이어를 선택한 후 문자 패널의 미트볼 버튼(⋯)을 클릭하면, 동일하게 슬라이더로 배리어블 폰트의 설정 값을 조절할 수 있는 탭이 나타납니다.
이외에도 Adobe Premiere Pro, After Effects, Cinema 4D에서 각각 서드파티 플러그인과 스크립트를 통해 배리어블 폰트를 사용할 수 있습니다. 사용방법은 위에서 소개해드린 방법과 크게 다르지 않으니, 배리어블 폰트를 더 다양한 프로그램에서 사용하고 싶으신 분들은 아래의 플러그인들을 사용해보시는 것을 추천해 드립니다.
Premiere Pro, After Effects용 플러그인 VariFont(링크) (유료)
Cinema 4D용 플러그인 VariText(링크) (유료)
Adobe에서 제공하는 After Effects용 스크립트(링크) (무료)
배리어블 폰트 웹 활용 방식
위에서 보여준 사이트과 같이 배리어블 폰트를 웹에서 사용하는 것은 웹에 생명력을 불어넣어 주는 역할을 합니다. 일반적으로 사용하는 스태틱 폰트의 활용에서 조금의 노력만 더하면 큰 변화를 이끌어낼 수 있죠. 아래의 세 가지 예시들을 통해 간단한 사용법에 대해 알아보겠습니다.
첫번째로 마우스가 해당 영역에 올라갔을 때 스타일의 변화를 주는 경우입니다. 스태틱 폰트를 사용할 경우 해당 영역이 버튼임을 알려주기 위해 웨이트를 굵게 하거나 언더바를 추가하곤 하는데요. 배리어블 폰트를 사용하면 더 섬세한 애니메이션을 통해 사용자의 행동을 유도할 수 있습니다.
다음은 마우스의 위치에 따라 폰트의 스타일을 다르게 하는 기능입니다. 해당 기능의 경우, 웹의 메인 화면 혹은 강조하고 싶은 메시지가 있을 때 효과적으로 표현할 수 있게 목소리를 더해주는 역할을 합니다. 추가로 마우스의 위치뿐만 아니라 마이크를 사용해 소리에 따라 스타일의 변화를 줄 수도, 카메라를 이용해 사용자의 움직임에 따라 스타일의 변화를 줄 수도 있습니다.
마지막으로는 배리어블 폰트의 축을 사용자가 직접 조절할 수 있게 해주는 기능입니다. 해당 기능은 사용자가 조금 더 직관적으로 각 스타일을 비교해보며 사용할 수 있다는 장점이 있습니다.
웹 디자인 적용 예시
배리어블 폰트는 반응형 웹사이트에서도 그 빛을 발합니다. 폰트를 디자인하기 위한 프로그램 중 하나인 글립스의 홈페이지(링크)는 모든 페이지가 배리어블 폰트인 ABC Dinamo의 「Arizona」로 이루어져 있습니다. 덕분에 각 메뉴 탭이나 버튼에 마우스를 올리면 다음 두께로 점프하여 두꺼워지는 것이 아니라, 두께가 부드럽게 변화하며 애니메이션 효과처럼 자연스럽게 나타납니다. 샌프란시스코 심포니의 전용서체 「SF Symphony」를 소개하는 사이트인 ‘Symphosizer(링크)’를 보시면 배리어블 폰트의 다이나믹함을 더 직관적으로 확인하실 수도 있습니다. 이 페이지에서는 교향악단의 특성을 살려 사람의 목소리를 비롯한 다양한 소리를 사용해 배리어블 폰트의 형태를 변형해보실 수 있습니다. 소리를 낼 수 없는 상황이라면 마우스를 사용해 체험해보실 수도 있습니다.
배리어블 폰트를 웹상에서 테스트해볼 수 있는 사이트들도 있습니다. ABC Dinamo에서 제공하는'Font Gauntlet(링크)'에서는 사용자가 갖고 있는 배리어블 폰트 파일이나 ABC Dinamo에서 제작한 배리어블 폰트들을 사용해볼 수 있습니다. Laurence Penney가 제작한 ‘AXIS PRAXIS(링크)'에서는 보다 더 다양한 상황에서, 여러 배리어블 폰트들을 동시에 테스트할 수 있고, ‘Variable Fonts(링크)’에는 컬러 폰트와 딩벳 폰트를 포함한 377종의 배리어블 폰트를 사용해보실 수 있습니다. ‘Samsa(링크)’에서는 배리어블 폰트의 각 글립들이 어떻게 변화하는지를 직관적으로 확인해보실 수도 있습니다.
한 번 더 눈길이 가는 다채로운 폰트
폰트마다 조금의 차이는 있겠지만 배리어블 폰트 파일 하나의 크기는 스태틱 폰트 파일 3~5개의 크기와 비슷합니다. 따라서 한두 가지의 폰트 스타일만 원한다면, 스태틱 폰트를 사용하는 것이 오히려 효율적일 수 있죠. 하지만 배리어블 폰트를 사용한다면 다양한 스타일과 애니메이션으로 다채로운 표현을 할 수 있습니다. 사용자를 디자인에 끌어들여 함께 상호작용하는 경험을 제공할 수도 있죠. 한 번 더 눈길이 가는, 더 오래 머무르게 되는 색다른 디자인을 위해 배리어블 폰트를 사용해보시는 건 어떤가요?