요즘IT
위시켓
최근 검색어
전체 삭제
최근 검색어가 없습니다.

폰트는 서비스의 분위기를 결정하는 중요한 구성요소 중 하나입니다. 같은 내용을 담고 있어도 적용된 폰트에 따라 다른 느낌을 줄 수 있기 때문인데요. 이미 폰트를 활용할 수 있는 서비스는 많지만, ‘한글' 폰트를 제대로 활용할 수 있는 곳은 별로 없어 아쉬움이 있었습니다. 오늘 소개하는 ‘TypeTrials’는 이런 단점을 보완하여, 실제 보유하고 있는 폰트 파일을 업로드해 스타일을 적용해 볼 수 있습니다. 물론 한글 폰트도 가능합니다. 지금부터 함께 살펴보겠습니다.

회원가입을 하면 원하는 문장을
저장할 수 있어요!

다음

회원가입을 하면
성장에 도움이 되는 콘텐츠를
스크랩할 수 있어요!

확인

디자인

한글 폰트도 쉽게 적용할 수 있는 폰트 프로토타이핑 툴 ‘TypeTrials’

년차,
어떤 스킬
,
어떤 직무
독자들이 봤을까요?
어떤 독자들이 봤는지 궁금하다면?
로그인

 

폰트는 서비스의 분위기를 결정하는 중요한 구성요소 중 하나입니다. 같은 내용을 담고 있어도 적용된 폰트에 따라 다른 느낌을 줄 수 있기 때문인데요. 이미 폰트를 활용할 수 있는 서비스는 많지만, ‘한글' 폰트를 제대로 활용할 수 있는 곳은 별로 없어 아쉬움이 있었습니다. 오늘 소개하는 ‘TypeTrials’는 이런 단점을 보완하여, 실제 보유하고 있는 폰트 파일을 업로드해 스타일을 적용해 볼 수 있습니다. 물론 한글 폰트도 가능합니다. 지금부터 함께 살펴보겠습니다.

 

폰트 파일로 웹 환경에 맞는 스타일 확인하기

폰트 프로토타이핑 툴 TypeTrials
<출처: TypeTrials>

 

먼저 ‘TypeTrials’의 메인 화면입니다. ‘A free platform to test and experiment with your fonts (or ours).’라는 내용을 먼저 확인할 수 있는데, 여기서 잠시 이 서비스가 시작된 배경을 살펴보겠습니다. 이곳은 디자이너 ‘Mat Desjardins’와 개발자 ‘Viiksimaisteri’가 협업해 만든 서비스인데요. 디자이너는 프로토타입에 적용된 폰트와 실제 퍼블리싱 된 내용이 매번 다르다는 것에 스트레스를 받았고, 개발자 역시 폰트 사이즈나 크기 등 반복되는 수정 작업에 힘들었다고 합니다. 그래서 이들은 누구나 쉽게 원하는 폰트를 웹 환경에 맞게 확인할 수 있도록 서비스를 만들었습니다.

 

그 과정에서 웹 환경에 최적화된 영문 폰트도 제작하게 되었는데, 서비스에서 기본으로 적용할 수 있는 폰트로 쓰고 있습니다. TypeTrials를 시작하는 방법은 보유하고 있는 폰트 파일을 업로드하거나, 이들이 제공하는 폰트 중 선택해 스타일을 적용하는 방법이 있습니다. 파일을 직접 등록할 수 있어, 언어와 상관없이 한글로 된 내용도 확인할 수 있습니다.

 

폰트 프로토타이핑 툴 TypeTrials
<출처: TypeTrials>

 

저는 보유하고 있는 한글 폰트 중 하나를 업로드해 봤습니다. 처음에는 영문 기준으로 기본 텍스트가 입력되어 있어 폰트 업로드 후, 한글로 입력해야 합니다. 제가 등록한 폰트와 내용으로 구성된 모습을 확인할 수 있고, 오른쪽에는 스타일을 편집할 수 있는 여러 도구가 모여있습니다. 이제 도구를 하나씩 사용해 웹 환경에서 우리가 원하는 폰트가 어떻게 적용되는지 확인할 차례입니다.

 

폰트 프로토타이핑 툴 TypeTrials
<출처: TypeTrials>

 

먼저 편집 도구는 크게 다섯 가지 영역으로 구성되어 있습니다. ① 가장 먼저 폰트 변경입니다. 서랍 모양 아이콘을 클릭하면 이곳에서 제공하는 폰트를 확인할 수 있고, 파일 아이콘을 클릭하면 다른 폰트 파일을 업로드할 수 있습니다. 폰트를 확인하다가 다른 폰트를 보고 싶은 경우에 쓸 수 있고, 같은 조건의 다른 폰트를 쓰기 위해서는 편집 화면 상단 ‘+’ 버튼을 클릭해 브라우저 새 창을 열듯 다른 편집창을 띄울 수 있습니다. 

 

② 다음은 기본적인 스타일에 대한 도구입니다. 사이즈, 행간, 자간, 정렬, 소문자 및 대문자(한글 폰트에서는 사용하지 않음) 등을 설정할 수 있습니다. 개인적으로 스타일 도구를 가장 많이 사용하게 되는데, 웹 환경에서 어떤 여백과 사이즈가 잘 어울리는지 직접 CSS 등을 만지지 않아도 빠르게 확인할 수 있기 때문입니다. 

 

③ 세 번째 도구는 텍스트에 따라 폰트 내용은 확인할 수 있도록 도와줍니다. 아래에서 다시 이미지를 통해 구체적인 모습을 살펴볼 텐데, 숫자와 특수문자에 폰트가 적용된 모습, 주요 사이즈에 따라 적용된 모습 등을 클릭 한 번으로 확인할 수 있습니다. 직접 입력할 필요 없이 주요 내용을 여러 조건에 맞춰 펼쳐주기 때문에, 2번과 마찬가지로 자주 사용하게 됩니다.

 

④ 다음으로 폰트 컬러와 배경을 설정할 수 있는 도구입니다. 텍스트가 컬러 배경에 사용되는 경우도 있지만, 서비스 이미지 등에 덧씌워지는 경우도 많기에 유사한 이미지를 적용, 어떤 컬러가 잘 맞는지 등을 확인하는데 꼭 필요한 도구입니다. ⑤ 마지막으로 전체 너비를 임의로 조정하거나, 세로쓰기 등의 조건에 맞게 현재 입력된 내용을 확인할 수 있는 도구도 포함되어 있습니다.

 

폰트 프로토타이핑 툴 TypeTrials
<출처: TypeTrials>

 

폰트는 이미 업로드했고, 내용도 한글로 입력해 두었으니 실제 도구를 적용한 모습을 살펴보겠습니다. 저는 랜딩 페이지에 쓸 한글 폰트를 조금씩 다른 스타일로 적용하고 확인하는 과정을 반복했습니다. 위 이미지에서 상단은 기본 설정값에 따라 확인한 내용이고, 하단은 사이즈와 자간을 바꿔 확인한 내용입니다. 이런 작업과 결과를 웹에서 빠르게 진행할 수 있어 매우 편리합니다.

 

폰트 프로토타이핑 툴 TypeTrials
<출처: TypeTrials>

 

이번에는 스스로 입력한 내용 대신, 기본 제공되는 내용에 따라 폰트를 확인해 봤습니다. 대표적으로 숫자와 특수문자가 있는데, 이건 직접 하나씩 입력하기 어려워 클릭 한 번으로 적용할 수 있다는 점에서 유용합니다. 저는 소개를 위해 가, 나, 다, 마 등 아주 간단한 내용을 입력했는데, 동일한 문장을 사이즈에 따라 확인할 수 있다는 점도 좋았습니다. 헤더 등에 어떤 크기가 어울리는지 비교할 수 있는 환경을 제공해 주기 때문입니다.

 

폰트 프로토타이핑 툴 TypeTrials
<출처: TypeTrials>

 

컬러 역시 자유롭게 변경, 적용할 수 있습니다. 기본 배경 컬러는 검정이라 폰트의 컬러를 바꿔보고, 다시 배경과 폰트 컬러를 변경하는 등의 작업을 할 수 있습니다. 색을 미리 결정하더라도 웹상에서 어떤 모습일지 확인하기 위해서는 별도의 작업이 필요했는데, 도움을 요청하거나 직접 개발자 도구를 사용하지 않더라도 유사한 환경에서 볼 수 있어 편리합니다. 

 

폰트 프로토타이핑 툴 TypeTrials
<출처: TypeTrials>

 

이제 마음에 드는 조건을 찾았다면 CSS code를 복사해 모아두거나, 바로 적용해 볼 수 있는 기능도 제공합니다. 한 가지 재밌는 것은 인스타그램 업로드용 이미지로도 저장이 가능해서, 이미지로 폰트 구성을 공유할 수 있습니다.

 

 

한 번은 꼭 써봐야 하는 이유

폰트 프로토타이핑 툴 TypeTrials
<출처: TypeTrials>

 

기존에도 폰트를 적용하고 스타일에 따라 확인할 수 있는 서비스는 있었지만, 대부분 웹폰트만 지원해 한글의 활용도가 낮을 수밖에 없었습니다. 하지만 ‘TypeTrials’은 보유하고 있는 폰트를 기준으로 볼 수 있어 한글 폰트도 쉽게 확인하고, 다양한 조건과 환경에 맞는 결과를 빠르게 확인할 수 있습니다. 여러 면에서 활용도가 높은 서비스라고 생각합니다. 게다가 영문과 달리 한글은 폰트에 따라 행간, 자간의 영향을 더 많이 받기 때문에, 미리 살펴볼 수 있는 도구가 제공된다는 점에서 편리합니다. 서비스 론칭이나 업데이트 전 활용해 보시길 바랍니다.

 

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

좋아요

댓글

공유

공유

댓글 0
작가
348
명 알림 받는 중

작가 홈

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

좋아요

댓글

스크랩

공유

공유

지금 회원가입하고,
요즘IT가 PICK한 뉴스레터를 받아보세요!

회원가입하기
요즘IT의 멤버가 되어주세요! 요즘IT의 멤버가 되어주세요!
요즘IT의 멤버가 되어주세요!
모든 콘텐츠를 편하게 보고 스크랩해요.
모든 콘텐츠를 편하게 보고 스크랩 하기
매주 PICK한 콘텐츠를 뉴스레터로 받아요.
매주 PICK한 콘텐츠를 뉴스레터로 받기
로그인하고 무료로 사용하기