폰트2 웹 폰트 이해하기｜폰트 확장자·브라우저·최적화 한 번에 정리 웹디자인이나 퍼블리싱을 처음 배우다 보면 “내 컴퓨터에서는 잘 보이는데 다른 사람 컴퓨터에서는 왜 다르게 보일까?”라는 의문이 생긴다. 이 차이는 브라우저에서 폰트가 출력되는 구조를 이해하면 자연스럽게 해결된다.이 글에서는 디자이너·퍼블리셔 관점에서 폰트가 브라우저에 출력되는 전체 흐름, 기본 폰트와 웹 폰트의 차이, 그리고 실제 서비스에서 중요한 웹 폰트 최적화 이유와 방법까지 정리해 본다.브라우저에서 폰트가 출력되는 기본 구조1. 디자인 단계디자이너가 디자인한 화면에는 특정 폰트가 사용된다. 이때의 폰트는 아직 ‘디자인 결과물’ 일뿐, 웹에서 바로 사용 가능한 상태는 아니다.2. 퍼블리싱 단계 (CSS 적용)퍼블리셔는 디자이너가 사용한 폰트를 기준으로 CSS 코드를 작성한다. 이 CSS 파일은 서버에.. 2025. 12. 14. 폰트 단위(px, pt) 완전 이해 가이드 px와 pt의 단위가 헷갈린다면 꼭 읽어보세요.웹과 인쇄에서 폰트의 단위가 다른 이유와 상황별로 어떤 단위를 사용해야하는지 알기 쉽게 정리했습니다.1. 디자인 단위가 혼란스러운 이유웹과 인쇄 디자인을 함께 다루다 보면 px, pt, pica, ppi 같은 단위가 계속 등장한다. 같은 크기를 말하는 것처럼 보이지만 실제 출력 결과가 달라지면서 처음에는 꽤 혼란스러울 수 있다. 그래서 이번 글에서는 pt와 px의 차이, ppi 개념, 그리고 브라우저와 운영체제가 단위를 어떻게 해석하는지까지 전체적으로 정리해 본다.2. PT(포인트)와 PICA의 역사적 기원pt(포인트)는 인쇄 분야에서 사용하는 전통적인 단위로, pica(파이카)에서 파생되었다. 1785년 타이포그래피 시스템을 위해 만들어졌고, 1 pica를.. 2025. 12. 11. 이전 1 다음
