๐ค *Grayscale Webpages* ์๊ฐ: ๋ ๊ฐ๋จํ๊ณ ์ฐจ๋ถํ ๋ธ๋ผ์ฐ์ง ๋ฐฉ๋ฒ
Source: Dev.to
Introduction
ํ๋ฉด์ด ๋๋ฌด ํ๋ คํ๊ฒ ๋๊ปด์ง์๋์? ๋ง์น ๋ชจ๋ ์น์ฌ์ดํธ๊ฐ ๋น์ ์ ์ฃผ์๋ฅผ ์ธ์น๋ ๊ฒ์ฒ๋ผ์.
Grayscale Webpages๋ ๊ฐ๋ฒผ์ด Chrome ํ์ฅ ํ๋ก๊ทธ๋จ์ผ๋ก, ์ด๋ค ์ฌ์ดํธ๋ ์ฆ์ ํ๋ฐฑ์ผ๋ก ์ ํํด ๋๊ณผ ์ง์ค๋ ฅ์ ์ฌ๊ฒ ํด์ค๋๋ค.
How it works
- ์ค์น๊ฐ ์๋ฃ๋๋ฉด Grayscale Webpages๋ Chrome ํด๋ฐ์ ํ๋์ ๋ฒํผ์ ์ถ๊ฐํฉ๋๋ค.
- ๋ฒํผ์ ํด๋ฆญํ๋ฉด ํ์ฌ ํญ์ ์ต์ํ์ CSS
filter: grayscale(100%)๊ฐ ์ ์ฉ๋์ด ํ์ด์ง ์ ์ฒด๊ฐ ์ฆ์ ํ๋ฐฑ์ผ๋ก ๋ณํฉ๋๋ค. - ๋ค์ ํด๋ฆญํ๋ฉด ํํฐ๊ฐ ์ ๊ฑฐ๋๊ณ ์์์ด ๋ณต์๋ฉ๋๋ค.
์ด ํ์ฅ ํ๋ก๊ทธ๋จ์ ์ด CSS ํํฐ๋ง ์ฃผ์ ํ๋ฉฐ, ์ถ๊ฐ ๊ถํ, ๋ถ์, ๊ด๊ณ ๋๋ ์ถ์ ์์ด ํ์ฌ ํญ์๋ง ์ํฅ์ ์ค๋๋ค.
Benefits
- ๋ ํผ๋ก ๊ฐ์ โ ๋ถ๋๋ฌ์ด ๋๋น์ ์ ์ ์๊ฐ์ ์ก์.
- ์ง์ค๋ ฅ ํฅ์ โ ๋ด์ค ํผ๋์ ์์ ๋ฏธ๋์ด์ ์ฐ๋งํ ์์์ ์ ๊ฑฐ.
- ๋ง์์ฑ๊น ๋ธ๋ผ์ฐ์ง โ โ์ฌ๋ฏธ์๋ ์คํฌ๋กค๋งโ๊ณผ โ๋ชฉ์ ์๋ ์ฝ๊ธฐโ๋ฅผ ๊ตฌ๋ถํ๋๋ก ๋์.
- ๊ฐ๋ฐ์ ๋๊ตฌ โ ๋์์ธ์ ํ๋ฐฑ ๋๋น์ ์ ๊ทผ์ฑ์ ๋น ๋ฅด๊ฒ ํ์ธ.
Bonus tip
Grayscale Webpages๋ฅผ โ๋คํฌ ๋ชจ๋โ ๋๋ โ๋ฆฌ๋ฉ ๋ชจ๋โ ํ์ฅ ํ๋ก๊ทธ๋จ๊ณผ ํจ๊ป ์ฌ์ฉํ๋ฉด ๊น์ ์์ ์ด๋ ์ผ๊ฐ ๋ ์๋ฅผ ์ํ ๋ฐฉํด ์๋ ๋์งํธ ํ๊ฒฝ์ ๋ง๋ค ์ ์์ต๋๋ค.
Installation
Chrome ์น ์คํ ์ด์์ Grayscale Webpages ์ค์นํ๊ธฐ
- ํ์ฅ ํ๋ก๊ทธ๋จ์ Chrome์ ์ถ๊ฐํฉ๋๋ค.
- ํด๋ฐ ๋ฒํผ์ ํด๋ฆญํด ํ๋ฐฑ ์ ํ์ ์ผ๊ฑฐ๋ ๋๋๋ค.
Feedback
์ด ํ์ฅ ํ๋ก๊ทธ๋จ์ด ์ง์ค์ ๋์์ด ๋๊ฑฐ๋ ๋ธ๋ผ์ฐ์ง์ ๋ ์ฐจ๋ถํ๊ฒ ๋ง๋ ๋ค๋ฉด, ๋ฆฌ๋ทฐ๋ฅผ ๋จ๊ธฐ๊ฑฐ๋ ํผ๋๋ฐฑ์ ๊ณต์ ํ๊ณ ๊ธฐ๋ฅ ์์ฒญ์ ์ ์ถํด ์ฃผ์ธ์. ์๋์ ๋๊ธ์ ๋ฌ๊ฑฐ๋ dev.to์์ ์ ์๋ฅผ ํ๊ทธํ๊ณ , Chrome ์น ์คํ ์ด ํ์ด์ง์ ์ ๊ณต๋ GitHub ๋งํฌ๋ฅผ ํตํด ์ฐ๋ฝํ์ค ์ ์์ต๋๋ค.
ํจ๊ป ํ๋์ฉ ํญ์ ์ฐจ๋ถํ๊ฒ ๋ง๋ค์ด๊ฐ๋ฉฐ ์น์ ๋ ํธ์ํ๊ฒ ๋ง๋ค ์ ์์ต๋๋ค.