홈페이지를 보거나 상세페이지를 분석하다 보면 “이 폰트는 어떤 글꼴일까?”라는 궁금증이 생기는 경우가 많습니다.
특히 디자인 작업을 시작한 지 얼마 되지 않았을 때는 마음에 드는 홈페이지를 발견하면 폰트부터 찾아보고 싶었습니다.
예전에는 폰트를 확인하기 위해 개발자 도구(F12)를 열고 CSS를 하나씩 살펴보거나, 이미지로 저장한 뒤 폰트 찾기 서비스를 이용하기도 했었습니다.
하지만 이런 방법은 시간이 오래 걸렸고, 원하는 정보를 바로 찾지 못하는 경우도 많았습니다.
그러다 알게 된 것이 WhatFont였습니다.
WhatFont는 웹사이트에서 사용하는 폰트를 마우스만 올려도 바로 확인할 수 있는 크롬 확장 프로그램입니다.
설치도 간단하고 사용법도 어렵지 않아 지금도 홈페이지 제작이나 상세페이지 디자인을 시작하기 전에 가장 먼저 실행하는 도구 중 하나입니다.
이번 글에서는 WhatFont 설치 방법부터 실제 사용법, 실무에서 어떻게 활용하면 좋은지까지 자세하게 소개해 보겠습니다.
WhatFont란?
WhatFont는 웹사이트에 적용된 폰트 정보를 쉽고 빠르게 확인할 수 있는 크롬 확장 프로그램입니다.
웹페이지의 텍스트 위에 마우스를 올리기만 하면 사용된 폰트 이름은 물론 글자 크기, 굵기, 색상 등 다양한 정보를 확인할 수 있습니다.
개발자 도구를 열지 않아도 되기 때문에 디자인 작업을 하는 사람뿐 아니라 홈페이지를 운영하거나 브랜드를 분석하는 사람들에게도 많이 사용됩니다.
특히 다음과 같은 작업에서 활용도가 높습니다.
- 홈페이지 폰트 분석
- 상세페이지 글꼴 확인
- 브랜드 디자인 벤치마킹
- UI 디자인 참고
- 웹사이트 타이포그래피 분석
웹디자인을 자주 하는 분이라면 거의 필수 도구라고 할 수 있습니다.
설치 방법
WhatFont는 무료로 설치할 수 있으며, 설치 과정도 매우 간단합니다.
크롬 웹 스토어 접속
chrome 웹 스토어 바로 가기 →먼저 크롬 브라우저를 실행한 후 크롬 웹 스토어에서 WhatFont를 검색합니다.
동일한 이름의 확장 프로그램이 있는지 확인한 뒤 공식 확장 프로그램을 선택하는 것이 좋습니다.
Chrome에 추가
확장 프로그램 페이지에서 Chrome에 추가 버튼을 클릭합니다.
잠시 후 설치 권한을 확인하는 창이 나타나면 내용을 확인한 뒤 설치를 진행합니다.
설치에는 1분도 걸리지 않습니다.
확장 프로그램 고정하기
설치가 완료되면 브라우저 오른쪽 상단에 퍼즐 모양 아이콘이 나타납니다.
자주 사용할 예정이라면 WhatFont 옆에 있는 압정 아이콘을 눌러 고정해 두는 것을 추천합니다.
매번 메뉴를 열지 않아도 바로 실행할 수 있어 작업 속도가 훨씬 빨라집니다.
기본 사용 방법
설치가 끝났다면 사용 방법도 매우 간단합니다.
WhatFont 실행하기
브라우저 오른쪽 상단의 WhatFont 아이콘을 클릭합니다.
아이콘이 활성화되면 웹페이지에서 원하는 글자 위에 마우스를 올려보세요.
별도의 클릭 없이도 폰트 정보가 바로 표시됩니다.
폰트 이름 확인하기
가장 많이 사용하는 기능입니다.
웹사이트에 적용된 폰트 이름을 즉시 확인할 수 있습니다.
예를 들어
- Pretendard
- SUIT
- Noto Sans KR
- Apple SD Gothic Neo
처럼 실제 적용된 글꼴을 바로 확인할 수 있습니다.
레퍼런스를 분석하거나 비슷한 분위기의 폰트를 찾을 때 매우 유용합니다.
글자 크기 확인하기
폰트 이름뿐 아니라 글자의 크기도 함께 확인할 수 있습니다.
예를 들어 제목은 36px,
본문은 16px,
버튼은 18px처럼 실제 적용된 크기를 바로 확인할 수 있어 홈페이지를 제작하거나 상세페이지를 디자인할 때 많은 도움이 됩니다.
단순히 어떤 폰트를 사용하는지보다 어떤 크기로 배치했는지가 디자인의 완성도를 좌우하는 경우가 많기 때문입니다.
글자 굵기 확인하기
폰트의 Weight 값도 함께 확인할 수 있습니다.
예를 들어
- Regular
- Medium
- SemiBold
- Bold
처럼 어떤 굵기가 사용되었는지 바로 확인할 수 있습니다.
같은 폰트라도 굵기에 따라 분위기가 크게 달라지기 때문에 벤치마킹할 때 자주 확인하는 부분입니다.
색상 정보 확인하기
텍스트의 색상 정보도 함께 제공합니다.
ColorZilla처럼 색상 추출에 특화된 도구는 아니지만, 텍스트 컬러를 함께 확인할 수 있어 폰트와 컬러를 동시에 분석할 때 유용합니다.
홈페이지 전체 분위기를 참고하거나 브랜드 스타일을 분석할 때 함께 살펴보면 좋습니다.
어떤 상황에서 활용하면 좋을까요?
WhatFont는 단순히 폰트 이름을 확인하는 용도로만 사용하는 도구가 아닙니다.
실제 프로젝트에서는 생각보다 다양한 상황에서 활용할 수 있습니다.
홈페이지 제작
클라이언트가 참고 사이트를 전달하는 경우가 많습니다.
“이 홈페이지와 비슷한 느낌으로 만들어 주세요.”
라는 요청을 받을 때 WhatFont를 활용하면 사용된 폰트와 크기를 빠르게 확인할 수 있습니다.
무조건 같은 폰트를 사용하는 것이 아니라 어떤 분위기를 연출했는지 분석하는 데 도움이 됩니다.
상세페이지 제작
상세페이지에서는 정보 전달이 중요하기 때문에 타이포그래피가 매우 중요합니다.
제목,
소제목,
본문,
가격,
CTA 버튼까지 각각 어떤 폰트 크기와 굵기를 사용하는지 참고하면 가독성을 높이는 데 도움이 됩니다.
브랜드 분석
브랜드마다 사용하는 폰트에는 일정한 특징이 있습니다.
프리미엄 브랜드는 고급스러운 세리프 계열을 사용하는 경우가 많고,
IT 기업은 깔끔한 산세리프 계열을 사용하는 경우가 많습니다.
WhatFont를 활용하면 이러한 차이를 쉽게 비교할 수 있습니다.
레퍼런스 수집
디자인 레퍼런스를 모을 때도 매우 유용합니다.
좋은 홈페이지를 발견하면 단순히 캡처만 하지 않고
- 폰트
- 크기
- 굵기
- 컬러
까지 함께 기록해 두면 나중에 프로젝트를 진행할 때 훨씬 효율적으로 참고할 수 있습니다.
WhatFont의 장점
직접 사용하면서 가장 만족했던 부분은 빠른 분석 속도였습니다.
예전처럼 개발자 도구를 열거나 CSS를 하나씩 확인하지 않아도 필요한 정보를 몇 초 안에 확인할 수 있었습니다.
또한 홈페이지를 분석하는 과정이 훨씬 자연스러워졌습니다.
예전에는 디자인만 눈으로 보았다면,
지금은 폰트 선택 이유와 정보 구조까지 함께 분석하는 습관이 생겼습니다.
이런 작은 차이가 쌓이면서 디자인를 보는 시각도 조금씩 달라졌던 것 같습니다.
사용할 때 주의할 점
WhatFont는 매우 편리한 크롬 확장 프로그램이지만, 몇 가지 알아두면 더욱 정확하게 활용할 수 있습니다.
웹폰트와 시스템 폰트는 다를 수 있습니다.
일부 홈페이지는 여러 개의 폰트를 함께 사용합니다.
예를 들어 사용자의 컴퓨터 환경이나 운영체제에 따라 다른 폰트를 표시하도록 설정되어 있는 경우도 있습니다.
따라서 WhatFont에서 확인한 폰트가 모든 사용자에게 동일하게 적용되는 것은 아닙니다.
폰트 라이선스를 함께 확인하세요.
마음에 드는 폰트를 발견했다고 해서 바로 사용하면 안 됩니다.
상업적으로 사용할 수 있는 폰트인지 반드시 확인해야 합니다.
무료 폰트라고 하더라도
- 개인 사용만 가능한 경우
- 기업 사용이 제한되는 경우
- 웹폰트 사용이 불가능한 경우
도 있기 때문입니다.
WhatFont는 폰트를 확인하는 도구이며, 라이선스를 알려주는 프로그램은 아닙니다.
같은 홈페이지에서도 여러 폰트를 사용할 수 있습니다.
요즘 홈페이지는
- 제목
- 본문
- 버튼
- 메뉴
- 배너
마다 서로 다른 폰트를 사용하는 경우도 많습니다.
따라서 한 부분만 확인하기보다 페이지 전체를 살펴보면서 사용하는 것이 좋습니다.
함께 사용하면 좋은 크롬 확장 프로그램
WhatFont 하나만 사용해도 충분히 편리하지만, 다른 크롬 확장 프로그램과 함께 사용하면 분석 효율이 훨씬 높아집니다.
ColorZilla
폰트를 확인했다면 다음으로는 컬러를 분석하는 경우가 많습니다.
ColorZilla를 함께 사용하면
- 브랜드 컬러
- 버튼 색상
- 배경색
까지 빠르게 확인할 수 있습니다.
폰트와 컬러를 함께 분석하면 홈페이지의 디자인 콘셉트를 이해하는 데 많은 도움이 됩니다.
CSS Peeper
WhatFont가 폰트를 확인하는 도구라면
CSS Peeper는 홈페이지 전체 디자인을 분석하는 도구입니다.
색상,
버튼,
여백,
이미지,
CSS 속성까지 함께 확인할 수 있어 벤치마킹할 때 자주 사용하는 조합입니다.
Page Ruler
폰트를 확인한 뒤에는
버튼 크기,
콘텐츠 폭,
이미지 크기도 함께 확인하는 경우가 많습니다.
Page Ruler는 픽셀 단위로 크기를 측정할 수 있어 레이아웃을 분석할 때 매우 유용합니다.
GoFullPage
좋은 레퍼런스를 발견했다면
폰트만 확인하고 끝내기보다 페이지 전체를 저장해 두는 것도 좋습니다.
GoFullPage를 활용하면 긴 홈페이지도 한 번에 캡처할 수 있어 나중에 참고하기 편리합니다.
자주 묻는 질문
Q. WhatFont는 무료인가요?
네.
기본 기능은 무료로 사용할 수 있으며, 대부분의 사용자는 무료 버전만으로도 충분합니다.
Q. Microsoft Edge에서도 사용할 수 있나요?
가능합니다.
Edge 브라우저도 크로미움(Chromium) 기반이기 때문에 대부분의 크롬 확장 프로그램을 그대로 설치할 수 있습니다.
Q. 모바일에서도 사용할 수 있나요?
기본적으로는 PC 브라우저에서 사용하는 확장 프로그램입니다.
모바일 크롬에서는 동일한 방식으로 사용하기 어렵습니다.
Q. 폰트를 다운로드할 수 있나요?
아닙니다.
WhatFont는 사용 중인 폰트 정보를 확인하는 도구입니다.
폰트를 제공하거나 다운로드하는 기능은 포함되어 있지 않습니다.
경험 나눔
처음 홈페이지를 분석하기 시작했을 때는 디자인만 따라 보려고 했었습니다.
색상이 예쁘면 색상만 참고했고,
레이아웃이 보기 좋으면 배치만 따라 하려고 했었습니다.
하지만 프로젝트를 계속 진행하면서 디자인의 분위기를 결정하는 요소 중 하나가 폰트라는 것을 자연스럽게 알게 되었었습니다.
같은 레이아웃이라도
어떤 폰트를 사용했는지,
글자 크기를 어떻게 조절했는지,
제목과 본문의 굵기를 어떻게 구분했는지에 따라 홈페이지의 느낌이 완전히 달라졌습니다.
그 이후부터는 마음에 드는 홈페이지를 발견하면 디자인보다 먼저 WhatFont를 실행하는 습관이 생겼습니다.
폰트를 확인하고,
크기를 분석하고,
왜 이런 조합을 선택했는지 생각해 보는 과정이 쌓이면서 디자인를 바라보는 시각도 조금씩 달라졌습니다.
특히 홈페이지 제작이나 상세페이지 디자인에서는 단순히 같은 폰트를 사용하는 것이 아니라 왜 이 폰트를 선택했는지를 이해하는 것이 더 중요하다는 점을 여러 프로젝트를 진행하면서 느꼈었습니다.
지금도 새로운 레퍼런스를 찾으면 가장 먼저 실행하는 크롬 확장 프로그램 중 하나가 WhatFont입니다.
작은 도구이지만 좋은 디자인을 분석하는 습관을 만들어 준 프로그램이라고 생각합니다.
마무리
WhatFont는 단순히 폰트 이름을 알려주는 크롬 확장 프로그램이 아닙니다.
웹사이트의 타이포그래피를 분석하고, 디자인의 분위기를 이해하며, 좋은 레퍼런스를 만드는 데 큰 도움을 주는 실무 도구입니다.
특히 홈페이지 제작이나 상세페이지 디자인처럼 정보 전달이 중요한 작업에서는 폰트 선택이 디자인의 완성도를 크게 좌우합니다.
좋은 디자인를 만드는 가장 빠른 방법 중 하나는 좋은 디자인를 많이 분석하는 것입니다.
WhatFont는 그 과정을 훨씬 쉽고 빠르게 만들어 주는 도구라고 생각합니다.
아직 사용해 보지 않았다면 꼭 한 번 설치해 보시길 추천드립니다.
