내가 원하는 폰트를, 내가 원하는 배경과 컬러에 맞춰 바로 확인해보자!
폰트와 관련된 다양한 서비스와 툴을, ‘지금 써보러 갑니다’를 통해 소개드렸는데요! 폰트와 관련된 서비스를 소개할때마다 폰트의 중요성과 더불어 서비스에 적용하기전 미리 확인해보고 파악하는 과정이 중요하다는 말씀을 드렸습니다. 확인하는 과정에서 포토샵, 일러 또는 기타 프로토타이핑 툴을 켜지 않아도 웹에서 원하는 폰트가 적용된 모습을 확인할 수 있다면 작업 속도는 물론이고 팀원들과의 커뮤니케이션에도 많은 도움이 된다는 사실도 말이죠!
제가 요즘 폰트를 포함한 디자인에 관심이 많아서 그런지 눈에 보이는 서비스들 역시 연관된 것들이 많은데, 얼마전 구글 폰트를 웹에서 바로 확인할 수 있는 서비스를 알게되어 오늘 소개드리려고 합니다. 이 서비스와 더불어 그간 소개드렸던 폰트 서비스들에 대한 간략한 요약도 함께 곁들일 예정이니 끝까지 내용을 확인해주세요!
오늘 ‘폰트’관련 소개드릴 서비스는 ‘Type Hero’입니다. 다양한 구글 폰트를 검색 또는 선택한 후, 원하는 크기와 형태 그리고 컬러(폰트 컬러 및 배경 컬러)에 따라 웹상에서 바로 확인할 수 있도록 도와줍니다. 위의 이미지가 ‘Type Hero’의 모습으로 왼쪽에는 폰트 검색창, 세부 옵션과 폰트 및 배경 컬러 선택창이 있고 오른쪽으로는 내용을 입력할 수 있도록 구성되어 있습니다. 폰트를 선택 한 후, 오른쪽에 내용을 입력하면 곧바로 확인이 가능합니다!
선택 가능한 폰트의 경우 ‘구글 폰트’를 기본으로 하고 있습니다. 원하는 폰트를 검색해 선택할 수 있는데, 한 가지 아쉬운 점은 구글 폰트를 전부 다 알고 있지 않는 이상 어떤 폰트를 검색해야 할지 난감해집니다. 그래서 미리 사용하고 싶은 구글 폰트 정보를 확인한 후, 이 곳에서는 실제 모습을 확인하는 용도로 활용하는 것이 좋을 것 같습니다.
아주 다양한 기능을 담고 있는 웹서비스는 아니지만, 기본적인 폰트 구성을 확인하기에는 전혀 무리가 되지 않습니다. 폰트 컬러의 경우 자체적으로 제공해주는 컬러를 선택할수도 있고, 컬러값을 직접 입력해 보는 것도 가능합니다. 어떤 폰트에 어떤 컬러가 어울릴지 위와 같은 방법으로 볼 수 있죠.
폰트 컬러뿐만 아니라 폰트가 입력된 배경의 컬러값도 바꿀 수 있습니다. 흰색 배경만 활용하는 것이 아니기에 원하는 배경컬러에 맞는 폰트를 찾아 내는 것도 꼭 필요한 기능이 아닐까 싶네요. 폰트 컬러 역시 한 가지만 쓰이는 것은 아니기 때문입니다. 활용하고 싶은 폰트를 선택하고, 크기 및 컬러를 선택한 다음 배경 컬러까지 설정해 빠르게 그 모습을 확인해볼 수 있는 ‘Type Hero’. 그간 ‘지금 써보러 갑니다’를 통해 발행된 다양한 폰트 관련 서비스들과 함께 확인한다면 더 효율적인 활용이 가능하지 않을까 합니다.
부록 : 폰트에 대한 모든 것!
(1)웹페이지 그대로, 원하는 폰트를 마음껏 적용해보고 공유까지! ‘FONT FIT’
폰트를 변경하고 싶은 웹사이트의 URL을 입력하면, 해당 페이지를 불러와 각 영역별 폰트(타이틀, 본문 등)를 바로 바꿔서 확인해볼 수 있음. 실제 페이지를 기반으로 적용이 가능하기 때문에, 어떤 폰트가 어울리고 어울리지 않는지를 명확하게 확인할 수 있다는 점이 ‘Font Fit’의 가장 큰 특징
(2)750여개의 폰트와 관련 정보를 한 눈에 확인할 수 있는 IDEO의 ‘FONT MAP’
‘Font Map’은 폰트간의 관계, 예를 들면 비슷한 폰트와 같은 정보를 유기적으로 보여주는, AI를 활용한 서비스. ‘A’라는 대표 문자를 지도처럼 화면에 그려넣어 어떤 형태로 이뤄져 있는지를 한 눈에 볼 수 있도록 구성되어 있음. 이를 통해 폰트 정보를 더 쉽게 확인하고 결정하는데 많은 도움을 받는 것이 가능
(3)특정 웹사이트에서 쓰이는 폰트와 컬러가 궁금하신가요? ‘UNPACK’
‘Unpack’은 원하는 사이트의 URL을 입력하면 그곳에서 쓰인 컬러와 폰트 정보를 제공해줌. 메인페이지로 들어가보면 사람들이 검색해본 사이트들의 정보를 볼 수 있으며, 좌측으로는 인기있는 폰트와 자주 쓰이지 않지만 독특한 컬러값을 함께 보여줌.
(4)카테고리만 선택하면, 로고와 어울리는 색상과 폰트를 추천해주는 ‘LOGOMAK’
‘Logomak’은 서비스 및 제품의 카테고리에 따라 가장 적합한 색상, 글꼴을 선택할 수 있도록 도와줌. 다양한 산업 분야의 로고를 분석하여, 색상과 글꼴이 어떤식으로 영향을 주는지 분석해 알고리즘을 구성했고, 그 알고리즘을 활용해 서비스로 풀어냄.
한성규님의 ‘지금 써보러 갑니다‘에 게재된 글을 모비인사이드가 한번 더 소개합니다.
[fbcomments url=”http://ec2-13-125-22-250.ap-northeast-2.compute.amazonaws.com/2018/06/08/airbnb-design-type-hero/” width=”100%” count=”off” num=”5″ countmsg=”wonderful comments!”]
