Figma에서는 예쁜데, 웹에서는 왜 더 두꺼워 보일까?
2025-10-20프론트엔드에서 Figma는 빼놓을 수 없는 툴이죠
그런데 막상 Figma 코드를 웹에 올리면 글자가 미묘하게 더 굵거나 답답하게 보이는 현상이 생깁니다.
같은 font-weight: 500인데도 macOS, Windows, Chrome, Safari마다 굵기가 제각각이죠
저도 최근에 Pretendard 폰트가 미묘하게 다른 트러블 슈팅이 있었는데요 제가 해결한 방법과 그 이유를 알아보겠습니다.
1. OS·브라우저 렌더링 엔진의 차이
브라우저가 텍스트를 그릴 때는 OS의 폰트 렌더러를 사용합니다. 해당 렌더러는 폰트를 그리는 방식이 다르므로 같은 Pretendard라도 다음처럼 다르게 보입니다
1) 렌더링은 ‘픽셀 단위의 해석’이다
폰트는 벡터 기반으로 만들어집니다. 즉, 글자의 획은 수학적으로 정의된 곡선이에요. 하지만 실제 화면은 픽셀(pixel)이라는 네모난 점들로 이루어져 있죠.
그래서 “이 곡선을 픽셀 그리드 위에 어떻게 표현할 것인가”를 각 OS가 각자의 방식으로 결정하게 됩니다. 이게 바로 렌더링 엔진의 차이입니다.
2) Windows: 서브픽셀 렌더링 + 힌팅 우선
Windows의 렌더링 엔진(ClearType)은 텍스트를 서브픽셀(subpixel) 단위로 정밀하게 계산하고, 폰트 안에 포함된 힌팅(hinting) 정보를 매우 충실히 따릅니다.
서브픽셀 렌더링이란?
픽셀 하나는 사실 RGB 세 개의 막대(서브픽셀)로 구성되어 있습니다. ClearType은 이 RGB를 독립적으로 조작해서 글자의 가장자리를 더 세밀하게 표현합니다. 즉, 수평 해상도가 3배로 늘어난 효과를 내는 거죠.
힌팅 우선(hinting priority)
폰트 디자이너가 “이 획은 픽셀 경계에 딱 맞춰야 한다”는 정보를 폰트 안에 넣어둡니다. ClearType은 이 힌트를 정확히 지키는 것을 최우선으로 합니다. 그 결과, 획이 또렷하고 균일하게 보이며 디자인 원형보다 약간 두텁게 보일 수 있습니다.
3) macOS: 그레이스케일 렌더링 + 부드러움 우선
macOS의 CoreText는 정반대 철학을 가지고 있습니다. “폰트는 디자이너의 원형에 가깝게 보여야 한다”는 원칙이에요.
그레이스케일 렌더링이란?
서브픽셀을 따로 다루지 않고, 각 픽셀의 **밝기(intensity)**만 조절해서 윤곽선을 표현합니다. 그래서 글자 가장자리가 부드럽고 매끄럽게 보입니다.
부드러움 우선(smoothness-priority)
픽셀 그리드보다는 곡선의 형태를 우선합니다. 힌팅 정보는 최소한으로만 적용하죠. 그 결과, 획이 얇고 자연스러움이 나타나지만 약간 흐릿하거나 연하게 보일 수 있습니다.
| OS/엔진 | 렌더러 방식 | 시각적 특징 |
|---|---|---|
| Windows (ClearType) | 서브픽셀 렌더링 + 힌팅 우선 | 수평선이 또렷하고 두텁게 보임 |
| macOS (CoreText) | 그레이스케일 렌더링 + 부드러움 우선 | 곡선이 매끄럽고 얇게 보임 |
즉, 같은 Pretendard 500이라도 macOS에서는 “슬림하고 부드럽게”, Windows에서는 “선명하고 두텁게” 보이는 이유가 바로 이 렌더링 엔진의 철학 차이 때문입니다.
정리하자면
- 렌더링 엔진은 “폰트를 어떻게 픽셀로 번역할지”를 결정한다.
- Windows는 ‘가독성(선명도)’ 중심, macOS는 ‘디자인 원형 유지’ 중심이다.
- 이 차이가 Figma(디자인)와 웹(브라우저) 간의 굵기 체감 차이를 만든다.
2. 시각적 일치를 위한 CSS 완화 방법
위에서 살펴본 것처럼, Windows와 macOS는 텍스트 렌더링 철학 자체가 다르기 때문에 완벽히 동일한 폰트 표현을 만드는 것은 불가능에 가깝습니다.
하지만 몇 가지 CSS 속성을 조정하면, 브라우저마다의 렌더링 차이를 체감상 거의 비슷한 수준으로 줄일 수 있습니다.
1) -webkit-font-smoothing
이 속성은 macOS 기반 브라우저(Safari, Chrome, Edge 등)에서 서브픽셀 렌더링을 강제로 비활성화하거나, 그레이스케일 렌더링 강도를 조절할 수 있습니다.
html,
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
antialiased: 텍스트를 그레이스케일로 부드럽게 표현 (기본 macOS 스타일)subpixel-antialiased: 픽셀 단위로 조금 더 또렷하게 표현 (Windows 느낌에 가까움)
macOS에서는
antialiased를 적용하면 글자가 살짝 얇아지고 부드러워집니다. 즉, Figma의 폰트 느낌과 비슷하게 만들 수 있습니다.
2) text-rendering
이 속성은 브라우저의 텍스트 렌더링 최적화 모드를 지정합니다. 폰트 힌팅을 얼마나 따를지, 자간을 어떻게 계산할지를 제어하죠.
body {
text-rendering: optimizeLegibility;
}
| 값 | 설명 |
|---|---|
auto | 기본값. 브라우저가 알아서 결정 |
optimizeLegibility | 부드러운 곡선과 자연스러운 커닝 적용 (macOS처럼) |
geometricPrecision | 픽셀 정확도 우선 (Windows 느낌에 가까움) |
3) font-synthesis: none
macOS Safari는 폰트에 존재하지 않는 굵기나 스타일(예: 500, italic)을 자동으로 “합성(synthesize)”해서 보여주는 경우가 있습니다.
이게 때로는 디자이너 의도와 다른 굵기로 보이게 만드는 원인이 되죠.
body {
font-synthesis: none;
}
이 속성을 추가하면 브라우저가 인위적으로 굵기를 보정하지 않아 Figma에서 본 폰트 두께와 더 일치하게 됩니다.
4) 폰트 가중치 미세 조정
결국, 환경별 렌더링 차이를 완벽히 제거할 수는 없기 때문에 **시각적 보정(visual compensation)**이 필요할 때도 있습니다.
예를 들어,
- macOS에서 너무 얇게 보인다면 →
font-weight: 600 - Windows에서 너무 두껍게 보인다면 →
font-weight: 400
처럼 운영체제 감별(@supports 또는 navigator.userAgent)을 통해
미세하게 조정할 수도 있습니다.
정리
| 목적 | 속성 | 추천 값 |
|---|---|---|
| macOS 폰트 부드럽게 | -webkit-font-smoothing | antialiased |
| 커닝·자간 자연스럽게 | text-rendering | optimizeLegibility |
| 자동 굵기 보정 방지 | font-synthesis | none |
| 환경별 시각적 보정 | font-weight | OS 감안하여 수동 조정 |
요약하자면: 운영체제의 렌더링 철학은 다르지만, CSS 속성 몇 가지를 조합하면 “디자인 시안과 거의 동일한 시각적 톤”을 구현할 수 있습니다.
완벽히 같을 수는 없지만, 사용자 경험에 영향을 주지 않을 정도의 일관성은 충분히 확보할 수 있습니다.