웹사이트의 성공은 외관에 크게 좌우됩니다. 적절한 색상 조합과 테마를 갖추면 방문자가 사이트에 더 오래 머물게 됩니다. 색상 팔레트와 구조만큼이나 선택한 글꼴도 방문자의 관심을 붙잡는 데 중요한 역할을 합니다.
웹 서핑 중 매력적인 사이트를 발견하고 '어떤 글꼴을 사용했을까?' 궁금해진 적이 있으신가요? 브라우저에 내장된 요소 검사(Inspect Element) 도구와 온라인 확장 프로그램을 활용하면 글꼴을 빠르고 쉽게 확인할 수 있습니다.
요소 검사 도구로 글꼴 찾는 방법
브라우저에 내장된 요소 검사 도구를 사용하면 웹사이트의 소스 코드를 살펴볼 수 있습니다. CSS, HTML 등 다양한 정보를 통해 사이트의 디자인 요소를 파악할 수 있으며, 자신만의 사이트를 디자인할 때 영감을 얻기에도 좋습니다.
요소 검사 도구로 글꼴을 확인하는 과정은 매우 간단하며 코딩 지식이 전혀 필요하지 않습니다. 이 도구는 시중의 모든 브라우저에서 사용할 수 있고, 인터페이스도 서로 비슷합니다.
브라우저의 요소 검사 도구로 글꼴을 확인하는 방법은 다음과 같습니다.
- 확인하려는 웹사이트를 엽니다.
- 글꼴을 알고 싶은 텍스트를 드래그하여 선택한 후 마우스 오른쪽 버튼을 클릭합니다.
- 컨텍스트 메뉴에서 검사(Inspect)를 클릭합니다.
- 검사 메뉴가 열리면 Computed(계산됨) 탭을 클릭합니다.
- 아래로 스크롤하여 Font-Family 섹션을 찾습니다. 여기에서 글꼴 이름과 스타일, 크기 정보를 확인할 수 있습니다.
요소 검사 도구의 다른 활용법
더 빠르게 글꼴을 확인하고 싶다면 아래 단축키 방법을 사용해 보세요.
- 웹사이트를 엽니다.
- Ctrl + Shift + C(Mac은 Cmd + Shift + C)를 누릅니다.
- 텍스트 위에 마우스를 올리면 글꼴 스타일, 크기, 색상 코드, 마진이 화면에 표시됩니다.
또한 요소 검사 도구로 웹페이지에 사용된 모든 글꼴 목록을 한눈에 확인할 수도 있습니다.
- 해당 웹페이지로 이동합니다.
- Ctrl + Shift + I(Mac은 Cmd + Shift + I)를 눌러 개발자 도구를 엽니다.
- Network(네트워크) 탭을 클릭한 후 Font(폰트) 탭을 선택합니다.
- 여기에서 웹페이지에 사용된 모든 글꼴 목록을 볼 수 있습니다.
실시간으로 전체 글꼴 목록을 불러오려면 웹페이지를 새로 고침해야 할 수 있습니다.
브라우저 확장 프로그램으로 글꼴 확인하기
더 편리하게 글꼴을 확인하고 싶다면 글꼴 찾기 브라우저 확장 프로그램을 설치하는 것이 좋습니다. 웹에서 글꼴을 감지할 수 있는 확장 프로그램은 여러 가지가 있지만, 가장 인기 있는 두 가지는 WhatFont와 Font Finder입니다.
두 확장 프로그램으로 글꼴을 확인하는 방법을 하나씩 살펴보겠습니다.
1. WhatFont
WhatFont는 여러 글꼴을 한 번에 빠르게 감지할 수 있어 널리 사랑받는 도구입니다. 사용 방법은 다음과 같습니다.
- 브라우저에서 WhatFont를 활성화한 상태에서 텍스트 위에 마우스를 올리면 해당 글꼴이 표시됩니다.
- 텍스트를 클릭하면 팝업 창이 나타나며 글꼴 크기, 색상, 스타일 등 세부 정보를 확인할 수 있습니다.
- 또한 여러 텍스트 구간을 동시에 선택하여 같은 페이지 내의 서로 다른 글꼴을 비교할 수도 있습니다.
2. Font Finder
Font Finder 역시 웹사이트의 텍스트 위에 마우스를 올리면 글꼴 정보를 보여줍니다. 다만 기술적인 세부 정보가 많이 표시되므로 웹 디자인에 익숙하지 않다면 다소 혼란스럽게 느껴질 수 있습니다.
그럼에도 Font Finder는 기존 글꼴을 실시간으로 새 글꼴로 교체해 보고 싶은 웹 개발자에게 더 적합합니다. 덕분에 영구적인 변경을 가하기 전에 다양한 글꼴을 미리 테스트하기 쉽습니다.
Font Finder로 글꼴을 테스트하는 방법은 다음과 같습니다.
- 웹페이지에서 텍스트 일부를 드래그하여 선택합니다.
- 마우스 오른쪽 버튼을 클릭하고 컨텍스트 메뉴에서 Font Finder를 선택합니다.
- Replace font with를 선택하고 원하는 글꼴 이름을 입력합니다. 예를 들어 Calibri를 입력하면 미리보기에서 글꼴이 어떻게 바뀌는지 바로 확인할 수 있습니다.
- 글꼴을 원래대로 되돌리고 싶다면 페이지를 새로 고침하면 됩니다.
이미지 속 글꼴은 어떻게 확인할까?
이미지 속 글꼴을 확인하려면 브라우저 확장 프로그램이나 요소 검사 도구로는 한계가 있습니다. 대신 WhatFontIs, FontSquirrel, Fontspring, WhatTheFont 같은 온라인 이미지 분석 도구를 활용해 보세요.
이미지에서 글꼴을 식별하는 과정은 대부분의 도구에서 비슷합니다. WhatTheFont를 사용해 이미지 속 글꼴을 찾아보겠습니다.
- 아직 저장하지 않았다면 확인하려는 이미지를 먼저 다운로드합니다.
- 이미지를 WhatTheFont에 업로드합니다.
- WhatTheFont가 이미지 속 텍스트를 자동으로 감지합니다. 자르기 상자를 줄이거나 늘려 확인하려는 글꼴 부분을 감싸도록 조절한 뒤 화살표 버튼을 클릭합니다.
- WhatTheFont가 이미지 속 글꼴과 자체 데이터베이스의 글꼴을 비교해 유사한 글꼴들을 보여줍니다.
- 바로 마음에 드는 결과가 없다면 Show more results를 계속 클릭해 더 많은 유사 글꼴을 확인할 수 있습니다.
웹에서 글꼴을 찾아 디자인에 활용하세요
글꼴은 웹사이트나 그래픽 디자인의 성공에 중요한 역할을 합니다. 웹 서핑 중 마음에 드는 글꼴을 발견했다면 위에서 소개한 방법들로 손쉽게 확인하고, 나만의 디자인에 적극적으로 활용해 보세요.