NEW 기획 디자인 개발 프로덕트 아웃소싱 프리랜싱

디자인

원하는 폰트 조합을 쉽게 찾을 수 있는: Archetype

원하는 폰트를 하나 골랐는데, 함께 사용할 만한 폰트를 찾기 어려워 오랜 시간을 고민한 경우가 있습니다. 폰트가 워낙 많기도 하고, 2개 이상의 폰트를 어떻게 조합해 활용하냐에 따라 문서는 물론 웹페이지 등의 성격이 많이 바뀌기 때문입니다. 특히 영문 폰트는 한글 폰트 대비 웹상에서 무료로 활용할 수 있는 후보가 많아, 적절한 조합을 찾기가 더 어렵게 느껴집니다. 오늘은 이런 상황에서 폰트를 찾는 시간은 절약하고, 원하는 2개 폰트를 웹상에서 바로 적용해 여러 스타일에 따라 확인할 수 있는 서비스를 소개합니다. 

 

폰트 조합 Archetype

 

'Archetype'은 우리에게 크게 2가지 기능을 제공하는 웹서비스입니다. 첫 번째는 다양한 폰트 중, 어울리는 2개 조합을 빠르게 찾을 수 있게끔 도와주는 역할입니다. 두 번째는 폰트를 하나씩 직접 적용하지 않아도 웹상에서 다양한 스타일(문장, 헤드라인 등)에 따라 선택한 폰트 조합을 확인할 수 있도록 도와줍니다. 다시 정리해 보면 함께 활용하기 좋은 폰트 조합을 찾아, 간격이나 크기 등의 조건을 적용했을 때 어떤 모습인지 확인하는데 초점이 맞춰져 있습니다. 기존에는 폰트를 로컬 환경에 설치해 적용해 보거나 폰트를 검색해 어떤 스타일인지 확인하는 경우가 많았는데, 이런 과정을 모두 생략한 채 한곳에서 진행할 수 있다는 장점이 있는 곳입니다.

 

사용 방법도 어렵지 않습니다. 위 이미지는 기본 편집 화면의 모습으로 왼쪽에는 편집 도구가, 오른쪽으로는 기본 적용된 폰트에 따른 스타일 별 내용을 확인할 수 있는 구성입니다. 이제 폰트를 선택하고, 원하는 조건을 하나씩 추가해 실제 서비스에 적용했을 때 어떤 모습일지 자세히 들여다볼 수 있습니다.

 

 

폰트 선택

폰트 조합 Archetype

 

먼저 폰트를 선택할 차례입니다. 폰트는 Heading 영역에 적용할 폰트와 Body Copy에 적용할 폰트를 각각 선택할 수 있습니다. 폰트는 구글 폰트와 로컬에 저장된 폰트를 선택할 수 있으며, 구글 폰트의 경우 5가지 스타일 (Serif, Sans Serif, Display, Handwriting, Monospace)로 나눠 폰트명(A-Z)에 따라 리스트를 확인할 수 있습니다. 영문 기준이지만, 상당히 많은 수의 폰트를 지원하기 때문에 선택 범위나 고려 대상이 충분합니다. 원하는 폰트명이 있다면 이름을 입력해 직접 찾아보는 것도 가능합니다. 특정 폰트를 선택하면 오른쪽 Heading 내용에 반영된 것을 바로 확인할 수 있습니다.

 

폰트를 선택하면 바로 어떤 모습인지 확인할 수 있다는 점에서 탐색 과정이 더 빠르게 느껴집니다. 다른 폰트를 적용하거나 찾는 것 역시 어렵지 않아 여러 폰트를 적용, 변경해가며 원하는 조합을 쉽게 찾아볼 수 있습니다. 물론 이 과정에서 핵심은 2가지 폰트를 함께 볼 수 있다는 점입니다.

 

폰트 조합 Archetype

 

만약 폰트를 하나씩 찾아 적용하는 과정이 어렵게 느껴진다면 서비스가 추천하는 조합을 활용하는 것도 방법입니다. Heading, Body Copy에 어울리는 폰트 조합을 서비스가 리스트로 제공하고 있으며, 마음에 드는 조합이 있다면 Body Copy 아래에 있는 'Try This Pair' 텍스트를 클릭하면 됩니다. (구글 계정을 통해 로그인을 할 경우, 마음에 드는 조합을 따로 저장하는 것도 가능합니다.)

 

폰트 조합 Archetype

 

'Try This Pair'을 클릭하면, 편집 화면에 기본 등록되어 있는 문구가 선택한 조합에 따라 변경된 것을 확인할 수 있습니다. 2가지를 한 번에 확인, 변경할 수 있어 저도 처음에는 서비스가 제안해주는 조합을 먼저 확인하고, 제공되는 다른 폰트를 하나씩 적용하는 과정을 거쳤습니다. 사실 폰트를 다양하게 많이 사용하는 환경이 아닌 경우, 이렇게 서비스에서 제안하는 조합을 먼저 확인하고 그 안에서 사이즈 등의 조건을 변경하며 원하는 환경에 맞추는 것이 더 편리합니다.

 

 

웹에서 확인하기

폰트 조합 Archetype

 

원하는 폰트 조합을 선택, 확인했다면 이제 특정 조건에 따라 웹상에서 어떻게 보이는지 확인해 볼 차례입니다. 아무래도 선택한 폰트에 따라 간격이나 크기 등을 다르게 적용, 활용할 가능성이 높기에 이런 조건을 미리 편집, 확인할 수 있는 기능을 함께 제공합니다. 기본적으로 헤드라인 역할을 하는 내용과 본문의 역할을 하는 내용이 각 기본 설정값에 따라 나열되어 있으며, 각각의 내용을 편집할 수 있습니다.

 

위 이미지는 Heading 1에 해당하는 내용을 편집한 모습으로 편집 시, 컬러와 사이즈, 두께와 자간 등을 숫자나 슬라이더로 조절합니다. 변경한 조건이 반영된 폰트의 모습은 오른쪽으로 바로 확인할 수 있어 앞서 사용한 편집 과정과 같이 어렵지 않게 사용할 수 있습니다.

 

폰트 조합 Archetype

 

본문 역시 수정이 가능합니다. 폰트는 이미 적용이 된 상태여서, 이전에 편집한 Heading 1 등의 조건을 확인한 뒤 어울리는 내용을 하나씩 추가하거나 수정해 적절한 값을 찾습니다. 폰트 조합을 찾고 폰트 간 조건을 추가해 편집, 확인하는 과정이 대부분 한 화면에서 이뤄져 상대적으로 작업이 쉽게 느껴지는 장점이 있습니다.

 

폰트 조합 Archetype

 

동일한 방법으로 모바일 버전에 해당하는 비율로 내용을 확인 후 수정하는 것도 가능합니다. 아무래도 모바일과 웹 환경에서는 동일 폰트 구성이라 하더라도, 여백이나 자간 등에 따라 가독성이 많이 달라지기 때문에 양쪽 환경을 동시에 고려하며 작업할 수 있어 좋습니다.

 

폰트 조합 Archetype

 

어떤 폰트 조합으로, 어떤 조건(사이즈, 간격, 컬러 등)을 추가해 활용할 것인지 결정되었다면 최종 확인을 할 단계입니다. 'Archetype'는 미리 보기 모드를 지원하고 있어, 편집이 완료된 뒤 왼쪽 메뉴 중간에 위치한 'View Preview' 버튼을 클릭해 전반적인 모습을 확인할 수 있습니다. 확인 후 실제 서비스에 적용하는 등 활용을 위해 '폰트 다운로드' 기능도 함께 제공합니다. 선택된 폰트를 로컬에 저장할 수 있도록 도와주는 역할을 합니다.

 

 

어떻게 활용하면 좋을까?

연 기준 49달러(한화 약 5만 8천 원)를 결제할 경우, 조건에 따라 완성된 폰트 내용을 피그마나 스케치, CSS 형태로 내보내는 기능을 사용할 수 있습니다. 영문 기준으로 폰트를 자주 사용하는 분들이라면, 무료 계정으로 먼저 폰트 조합에 따른 여러 조건을 확인한 뒤 디자인 툴과 연동해 사용할 수 있는 프로 계정 사용 여부를 결정하는 것도 좋은 방법입니다.

 

영문 폰트 기준이지만, 원하는 조건에 맞는 폰트를 탐색하고 최종 결과물을 내려받을 수 있다는 점에서 활용도가 높은 서비스입니다. 계정 생성과 별도 학습과정 없이 바로 사용해 볼 수 있다는 점에서 접근성이 높습니다. 다만 폰트 사이즈나 간격 등의 조건을 변경할 때, 한 번에 많은 양의 대상에 적용되어 반응속도가 순간 느려지는 점은 이용 시 참고하시길 바랍니다.

 

<참고 자료>

Archetype: https://archetypeapp.com/

 

요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.

댓글 0

지금 써보러 갑니다

작지만 가치 있는 변화를 이끌어내는 서비스를 만들기 위해 노력하고 있습니다. 국내외 다채로운 IT 서비스와 트렌드를 살펴보는 것이 좋아 '지금 써보러 갑니다'를 운영하고 있어요.

당신의 ‘선’ 작업을 돕는 2가지 서비스

프로덕트

레퍼런스 수집 및 관리가 쉬워지는, Substratum

프로덕트

커버 이미지 제작이 쉬워지는 서비스, Coverview

디자인

애니메이션이 포함된 목업 제작 서비스, ‘Animockup’

디자인

다양한 종류의 화살표 제작을 돕는, 'Fffuel'

디자인

프로필 제작을 위한 매력적인 툴 ‘Boringavatars’와 ‘Avvvatars’

디자인

핸드 스케치를 위한 만능 툴, ‘Printables’와 ‘Sneakpeekit’

디자인

디자이너가 원하는 컬러를 손쉽게, 'Atmos'

디자인

웹 페이지 구성 도우미 ‘Shuffle’

디자인

디자인 시스템에 필요한 UI 컴포넌트 모음

디자인

다양한 UI 설정을 실시간으로 적용하는 서비스 ‘셰이퍼’

디자인

보다 쉬운 웹 접근성을 위한 도우미 : The A11Y Project

디자인

취향에 맞게 아이콘과 일러스트 편집이 가능한: Shape

디자인

디자인 패턴 제작 시 유용한 서비스들

디자인

디자인 작업 시 유용한 아이콘 제공 서비스들

디자인

다양한 그래픽 콘텐츠를 제작할 수 있는: Mega Creator

디자인

박스 디자인을 쉽게 생성할 수 있는: Box Shadow Art

프로덕트

웹에서 이미지 및 영상 편집을 쉽게 하고 싶다면?

디자인

피그마 작업 시 유용한 플러그인 Top3

디자인

빠른 목업 제작을 위해 알아두면 좋은 서비스들

디자인

웹사이트와 문서에 대한 피드백을 손쉽게! : Punchlist

프로덕트

디자인 작업 효율을 높여주는 크롬 확장 프로그램 5

디자인

원하는 스타일에 따른 컬러 조합 확인이 가능한: Huemint

디자인

특정 웹페이지의 벡터 콘텐츠를 확인하는: SVG Gobbler

디자인

컬러와 물결 패턴으로 배경을 만드는: Wicked Backgrounds

디자인

다섯 가지 컬러 조합으로 웹디자인 구성을 돕는: Happyhues

디자인

바우하우스 스타일의 패턴 디자인 생성: Bauhaus Art Generator

디자인

글래스모피즘 디자인 구현을 위한 CSS 생성 서비스: Glass UI

디자인

같은 분야를 다룬 글들을 권해드려요.

요즘 인기있는 이야기들을 권해드려요.

일주일에 한 번!
전문가들의 IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.

일주일에 한 번! 전문가들의 요즘IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.