macOS 디스플레이에서 어두운 배경 위의 밝은 글자가 지나치게 두껍게 렌더링되는 번짐 현상을 방지하는 핵심 가이드입니다.
표준 안티에일리어싱 스니펫
body, html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
속성값 및 렌더링 동작
WebKit 및 Blink (-webkit-font-smoothing)
| 속성값 | 렌더링 동작 |
|---|---|
auto |
브라우저 기본 서브픽셀 안티에일리어싱 |
none |
스무딩을 완전히 비활성화 (픽셀화된 가장자리) |
antialiased |
서브픽셀 대신 부드러운 그레이스케일 안티에일리어싱으로 렌더링 |
macOS 환경 Firefox (-moz-osx-font-smoothing)
| 속성값 | 렌더링 동작 |
|---|---|
auto |
기본 서브픽셀 렌더링 |
grayscale |
그레이스케일 안티에일리어싱으로 렌더링 |
권장 모범 사례
- 다크 모드 / 어두운 배경: 레티나 디스플레이에서 어두운 배경 위 밝은 글자가 팽창되어 두껍게 보이는 현상을 막는 데 그레이스케일 스무딩이 매우 효과적입니다.
- 밝은 배경: 흰색 배경 위의 일반적인 어두운 본문 텍스트에는 브라우저 기본값(auto / 서브픽셀)이 더 선명한 가독성을 제공합니다.