폰트렌즈

텍스트를 선택하고 우클릭하여 글꼴, 크기, 굵기, 색상 및 CSS를 즉시 확인하세요. 복사, 수정, 미리보기, 다운로드도 가능합니다.

페이지를 방문했다가 멋진 글씨체에 감탄하며 '이 폰트가 뭐지?' 하고 궁금했던 적이 있으신가요? 폰트렌즈는 단 한 번의 클릭으로 그 질문에 답을 드립니다. 웹사이트 어디서든 텍스트를 선택하고 마우스 오른쪽 버튼을 클릭한 후, '폰트렌즈로 폰트 검사하기'를 선택하기만 하면 됩니다. 그러면 현재 페이지 위에 깔끔하고 집중도 높은 패널이 열려 해당 텍스트에 적용된 서체, 크기, 굵기, 줄 간격, 색상 등 디자인의 모든 세부 스타일 정보가 정확하게 표시됩니다. 레이아웃을 역분석하는 디자이너, 디자인 사양에 맞춰 개발하는 개발자, 또는 그저 아름다운 헤드라인이 궁금한 분까지, 이 도구는 어떤 웹페이지든 타이포그래피에 대한 모든 것을 보여주는 열린 책으로 만들어 줍니다. 폰트렌즈는 폰트 찾기 기능과 CSS 검사 기능을 하나로 합친 도구입니다. 단순히 폰트 패밀리 이름만 알려주는 데 그치지 않고, 바로 사용할 수 있는 코드, 아이디어를 시험해볼 수 있는 대화형 플레이그라운드, 텍스트의 가독성을 보장하는 접근성 도구까지 제공합니다. 계정도, 회원가입도 필요 없습니다. 그저 선택하고, 마우스 오른쪽 버튼을 클릭하여 검사하기만 하면 됩니다. 🔍 주요 기능 - 선택한 단어에 적용된 전체 타이포그래피 정보(폰트 패밀리, 폰트 크기, 폰트 굵기, 줄 간격, 색상)를 한눈에 파악할 수 있습니다. - 자간(letter-spacing), 텍스트 변환(text-transform), 폰트 스타일(font-style)처럼 놓치기 쉬운 추가적인 스타일 속성까지 확인할 수 있습니다. - 클릭 한 번으로 개별 속성을 복사하거나, 규칙 전체를 완전한 CSS 코드 스니펫으로 가져올 수 있습니다. - 간단한 탭 전환으로 해당 스니펫을 Tailwind, SCSS, 또는 SASS 코드로 변환하고, 전체 코드나 특정 라인만 복사할 수 있습니다. - 실시간으로 편집 가능한 미리보기 창에서 샘플 텍스트를 수정하고, 속성 값을 미세 조정하고, 배경을 바꾸며 즉각적으로 변경 사항을 확인할 수 있습니다. - 제공자 배지(Google Fonts, Adobe Fonts, 자체 호스팅, 시스템 기본 서체)를 통해 웹 폰트의 출처가 어디인지 식별할 수 있습니다. - '폰트 다운로드' 버튼을 사용해 웹 폰트를 원본 소스에서 컴퓨터로 직접 저장할 수 있습니다. - WCAG 표준에 따라 색상 대비를 확인하고, 정확한 대비 비율과 함께 AA 및 AAA 등급 통과 또는 실패 결과를 확인할 수 있습니다. - 화면의 어떤 픽셀이든 색상을 추출할 수 있는 스포이트가 포함된 종합적인 색상 선택기로 원하는 색상을 고르고 샘플링할 수 있습니다. - 입력 필드와 내보내기 코드에 모두 적용되는 측정 단위를 px, rem, pt, em 사이에서 자유롭게 전환할 수 있습니다. 🖱️ 사용 방법 폰트렌즈 사용법은 아주 간단하며 몇 초밖에 걸리지 않습니다. 분석하고 싶은 단어들을 하이라이트하고, 선택 영역 위에서 마우스 오른쪽 버튼을 클릭한 뒤, 메뉴에서 '폰트렌즈로 폰트 검사하기'를 선택하세요. 그러면 현재 페이지 위에 패널이 나타납니다. 이 패널은 사이트 고유의 디자인과 충돌하지 않도록 깔끔하게 스타일링되어 있습니다. 여기에서 세부 정보를 읽고, 필요한 코드를 복사하거나, 직접 편집을 시작할 수 있습니다. 실시간 미리보기 기능은 폰트렌즈의 큰 재미 중 하나입니다. 실제 헤드라인을 테스트하기 위해 문구를 바꿔보고, 크기를 조금씩 조정하고, 굵기를 변경하거나, 새로운 배경색을 설정하여 서체가 다양한 조건에서 어떻게 보이는지 확인할 수 있습니다. 수정한 내용은 다른 페이지로 이동했다가 나중에 돌아와도 그대로 유지되므로, 한 사이트에서 떠올린 아이디어가 다음 사이트에서도 이어서 작업할 수 있도록 기다리고 있습니다. 만약 원래 값으로 돌아가고 싶다면, '사이트 설정으로 초기화' 버튼을 누르면 페이지에서 실제로 사용 중인 값으로 모든 것이 복원됩니다. 원본 파일이 필요하신가요? 다운로드 가능한 웹 폰트라면 버튼 하나로 @font-face에 지정된 위치에서 실제 파일을 가져올 수 있습니다. 사용자의 운영 체제에 이미 포함된 서체일 경우, 폰트렌즈는 해당 폰트가 내장 폰트임을 알려주어 별도의 다운로드 없이 사용할 수 있다는 사실을 알게 해줍니다. 🔒 개인정보 보호 우선 폰트렌즈는 전적으로 사용자의 브라우저 내부에서만 실행됩니다. 텍스트를 검사하는 과정에서 어떠한 데이터 수집, 추적, 분석도 이루어지지 않으며, 외부 서버와의 통신도 일절 없습니다. 사용자가 검사하는 모든 정보는 사용자의 컴퓨터에만 머무릅니다. 이 확장 프로그램이 네트워크 요청을 하는 유일한 경우는 사용자가 직접 '폰트 다운로드' 버튼을 눌렀을 때이며, 이때만 폰트 파일을 가져오기 위해 해당 폰트의 원본 소스에 접근합니다. 그 외에는 어떠한 정보도 사용자의 기기 외부로 전송되지 않습니다. 요청하는 권한은 의도적으로 최소한으로 제한됩니다. '컨텍스트 메뉴' 권한은 마우스 오른쪽 클릭 메뉴에 항목을 추가하기 위해 필요합니다. '활성 탭' 권한은 사용자가 도구를 호출한 바로 그 탭에서 선택한 텍스트를 읽기 위한 것이며, 다른 곳에는 접근하지 않습니다. '저장소' 권한은 사용자의 미리보기 텍스트와 단위 및 형식 설정을 저장하여 다음번 사용 시 기억하도록 하는 데 사용됩니다. 사용자의 검색 기록에 대한 광범위한 접근이나 포괄적인 호스트 권한은 요구하지 않습니다. 👥 추천 사용 대상 - 서체를 빠르게 식별하고, 색상 팔레트를 추출하며, 스타일을 재사용하고 싶은 웹 디자이너 - 목업과 일치시키거나 정확한 폰트 패밀리 및 간격 값을 코드로 옮겨야 하는 프론트엔드 개발자 - 일관성 있고 브랜드 정체성에 맞는 타이포그래피 시스템을 구축하는 UI 및 UX 엔지니어 - 실제 웹사이트가 어떻게 만들어지는지 직접 보고 배우고 싶은 CSS 및 타이포그래피 학생 - 최종 배포 전 텍스트가 WCAG 대비 요구 사항을 충족하는지 검증해야 하는 접근성 감사 전문가 - 단순히 특정 사이트에서 어떤 폰트를 사용하는지 궁금한 블로거, 마케터 및 일반 사용자 ✨ 폰트렌즈를 계속 사용하게 되는 이유 - 개발자 도구를 일일이 파헤칠 필요 없이 마우스 오른쪽 클릭 한 번으로 원하는 답을 얻을 수 있습니다. - 일반 CSS는 물론 Tailwind, SCSS, SASS 형식으로 코드를 바로 복사할 수 있어 프로젝트에 즉시 적용 가능합니다. - 편집 가능한 미리보기 기능을 통해 코드 한 줄 건드리지 않고도 타이포그래피 선택을 시도해볼 수 있습니다. - 대비 검사기는 접근성 준수를 나중에 처리할 문제가 아닌, 작업 과정의 일부로 만들어 줍니다. - 색상 선택기와 스포이트를 사용하면 페이지 어디에서든 정확한 색상을 추출하여 재사용할 수 있습니다. - 사용자의 운영 체제 설정에 따라 라이트 및 다크 테마가 자동으로 전환되어 밤낮으로 편안한 사용 환경을 제공합니다. - px, rem, pt, em 단위 간 전환 기능 덕분에 어떤 방식으로 코드베이스가 작성되었든 그에 맞는 결과물을 얻을 수 있습니다. 🎨 세부 기능 자세히 보기 타이포그래피는 단순히 폰트 이름 이상의 의미를 가집니다. 폰트렌즈는 헤드라인의 굵기부터 줄 간격이 주는 여유로움, 자간의 미묘한 조정에 이르기까지, 텍스트의 느낌을 결정하는 작은 디자인 요소들을 모두 보여줍니다. 이러한 값들을 나란히 비교해 보면 왜 특정 디자인이 효과적인지, 그리고 그것을 어떻게 재현할 수 있는지 쉽게 이해할 수 있습니다. 또한 제공자 배지는 현재 보고 있는 폰트가 Google Fonts 에셋인지, Adobe Fonts 서체인지, 자체 호스팅 파일인지, 아니면 시스템 기본 서체인지를 한눈에 알려주어 컨텍스트를 더해줍니다. 이는 특정 서체를 찾거나 소스를 파악하고자 할 때 중요한 첫 번째 단서가 됩니다. 색상 관련 도구는 정적인 정보 표시 그 이상을 제공합니다. 색상 선택기는 색조와 투명도 슬라이더가 있는 HSV 색 공간을 제공하며, HEX, RGB, HSL 형식을 모두 지원하므로 사용자가 가장 편한 방식으로 작업할 수 있습니다. 여기에 스포이트 기능을 결합하면 페이지 내 어떤 요소의 색상이든 정확하게 추출하여 미리보기에 적용하거나 개인적인 메모에 활용할 수 있습니다. 🚀 지금 바로 검사 시작하기 폰트렌즈를 추가하고, 텍스트 일부를 선택한 후 마우스 오른쪽 버튼을 클릭해 보세요. 어떤 웹페이지든 그 이면에 숨겨진 타이포그래피, 스타일, 색상의 세계가 펼쳐집니다. 폰트렌즈는 웹의 가독성에 관심을 가진 모든 이에게 빠르고, 안전하며, 진정으로 유용한 동반자가 되어줄 것입니다. 지금 바로 설치하여 편리하게 사용하고, 다시는 정체 모를 폰트 때문에 고민하지 마세요.