Search
๐Ÿคทโ€โ™‚๏ธ

subpixel-antialiased vs antialiased ์ฐจ์ด

subpixel-antialiased (๊ธฐ๋ณธ ๋ Œ๋”๋ง ๋ฐฉ์‹)
โ€ข ๋ธŒ๋ผ์šฐ์ € ๊ธฐ๋ณธ ํฐํŠธ ๋ Œ๋”๋ง ๋ฐฉ์‹
โ€ข ํ•˜์œ„ ํ”ฝ์…€ ๋‹จ์œ„(Subpixel)๊นŒ์ง€ ํ™œ์šฉํ•˜์—ฌ ํ…์ŠคํŠธ๋ฅผ ์„ ๋ช…ํ•˜๊ฒŒ ํ‘œํ˜„
โ€ข -webkit-font-smoothing: auto; ์™€ ๋™์ผํ•œ ํšจ๊ณผ
โ€ข LCD ํ™”๋ฉด์—์„œ ๋” ๋šœ๋ ทํ•˜๊ฒŒ ๋ณด์ด๋Š” ํšจ๊ณผ๊ฐ€ ์žˆ์ง€๋งŒ, ๋ฐฐ๊ฒฝ์ƒ‰์ด๋‚˜ ํŠน์ • ๋””์ž์ธ๊ณผ ํ•จ๊ป˜ ์“ฐ๋ฉด ๊ธ€์ž๊ฐ€ ๋„ˆ๋ฌด ๋šœ๋ ทํ•ด์„œ ๊ฑฐ์น ์–ด ๋ณด์ผ ์ˆ˜ ์žˆ์Œ
antialiased (์•ˆํ‹ฐ์•จ๋ฆฌ์–ด์‹ฑ)
โ€ข ํ”ฝ์…€ ๋‹จ์œ„์—์„œ ๊ทธ๋ ˆ์ด์Šค์ผ€์ผ์„ ํ™œ์šฉํ•˜์—ฌ ๋ถ€๋“œ๋Ÿฌ์šด ๊ธ€๊ผด ๋ Œ๋”๋ง
โ€ข -webkit-font-smoothing: antialiased;์™€ ๋™์ผ
โ€ข ๊ธ€์ž๊ฐ€ ๋” ์–‡๊ณ  ๋ถ€๋“œ๋Ÿฝ๊ฒŒ ๋ณด์ž„
โ€ข ๊ณ ํ•ด์ƒ๋„(HiDPI, Retina) ๋””์Šคํ”Œ๋ ˆ์ด์—์„œ๋Š” subpixel-antialiased๋ณด๋‹ค ๋” ๋‚˜์€ ๊ฐ€๋…์„ฑ์„ ์ œ๊ณต
2. ํ˜„๋Œ€์ ์ธ ๋ธŒ๋ผ์šฐ์ €์—์„œ antialiased๊ฐ€ ์„ ํ˜ธ๋˜๋Š” ์ด์œ 
(1) HiDPI, Retina ๋””์Šคํ”Œ๋ ˆ์ด์˜ ์ฆ๊ฐ€
๊ณผ๊ฑฐ CRT ๋˜๋Š” ์ €ํ•ด์ƒ๋„ LCD ํ™”๋ฉด์—์„œ๋Š” subpixel-antialiased๊ฐ€ ๋” ์„ ๋ช…ํ•˜๊ฒŒ ๋ณด์˜€์ง€๋งŒ, ํ˜„๋Œ€์˜ ๊ณ ํ•ด์ƒ๋„ ๋””์Šคํ”Œ๋ ˆ์ด(์˜ˆ: Apple Retina, 4K/8K ๋ชจ๋‹ˆํ„ฐ)์—์„œ๋Š” ํ•˜์œ„ ํ”ฝ์…€๋ณด๋‹ค ๊ทธ๋ ˆ์ด์Šค์ผ€์ผ ์•ˆํ‹ฐ์•จ๋ฆฌ์–ด์‹ฑ์ด ๋” ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ๋ณด์ž„.
์˜ˆ์ „์—๋Š” RGB ์„œ๋ธŒํ”ฝ์…€์„ ํ™œ์šฉํ•œ subpixel-antialiased๊ฐ€ ๊ฐ€๋…์„ฑ์„ ๋†’์˜€์ง€๋งŒ, ๊ณ ํ•ด์ƒ๋„ ๋””์Šคํ”Œ๋ ˆ์ด์—์„œ๋Š” ์„œ๋ธŒํ”ฝ์…€์„ ํ™œ์šฉํ•  ํ•„์š”๊ฐ€ ์—†์Œ โ†’ antialiased๊ฐ€ ๋” ์ ํ•ฉ
(2) ๋‹คํฌ ๋ชจ๋“œ์™€ ์ƒ‰ ๋ฐฐ๊ฒฝ์—์„œ ๋” ๋‚˜์€ ๊ฐ€๋…์„ฑ ์ œ๊ณต
์„œ๋ธŒํ”ฝ์…€ ๋ Œ๋”๋ง(subpixel-antialiased)์€ ๋ฐฐ๊ฒฝ์ƒ‰๊ณผ ์กฐํ•ฉ๋  ๋•Œ, ํŠนํžˆ ์–ด๋‘์šด ๋ฐฐ๊ฒฝ์—์„œ๋Š” ๊ธ€์ž ์ฃผ์œ„์— ์ƒ‰์ด ๋ฒˆ์ง€๋Š” ํ˜„์ƒ์ด ๋‚˜ํƒ€๋‚  ์ˆ˜ ์žˆ์Œ.
antialiased๋Š” ๊ธ€์ž ๊ฒฝ๊ณ„๊ฐ€ ๋” ๊ท ์ผํ•˜๊ฒŒ ๋ณด์ด๊ธฐ ๋•Œ๋ฌธ์— ๋‹คํฌ ๋ชจ๋“œ UI์—์„œ๋„ ๋” ์„ ๋ช…ํ•˜๊ฒŒ ๋ณด์ž„.
(3) ํ”Œ๋žซํผ๊ณผ ๋ธŒ๋ผ์šฐ์ € ๊ฐ„์˜ ๋ Œ๋”๋ง ์ผ๊ด€์„ฑ
โ€ข subpixel-antialiased๋Š” Windows, macOS, Linux์—์„œ ๊ฐ๊ธฐ ๋‹ค๋ฅด๊ฒŒ ๋ Œ๋”๋ง๋จ
โ€ข macOS์—์„œ๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ antialiased๊ฐ€ ์ ์šฉ๋จ
โ€ข Windows์—์„œ๋Š” ClearType ๊ฐ™์€ ์‹œ์Šคํ…œ๋ณ„ ๋ Œ๋”๋ง ๊ธฐ์ˆ ์ด ์ ์šฉ๋จ
โ€ข ๋”ฐ๋ผ์„œ ์›น์—์„œ ์ผ๊ด€๋œ ๋ Œ๋”๋ง์„ ์œ ์ง€ํ•˜๋ ค๋ฉด antialiased๊ฐ€ ๋” ์ ํ•ฉํ•จ