๐Ÿ–ค *Grayscale Webpages* ์†Œ๊ฐœ: ๋” ๊ฐ„๋‹จํ•˜๊ณ  ์ฐจ๋ถ„ํ•œ ๋ธŒ๋ผ์šฐ์ง• ๋ฐฉ๋ฒ•

๋ฐœํ–‰: (2025๋…„ 12์›” 5์ผ ์˜คํ›„ 12:44 GMT+9)
3 min read
์›๋ฌธ: Dev.to

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 ์„ค์น˜ํ•˜๊ธฐ

  1. ํ™•์žฅ ํ”„๋กœ๊ทธ๋žจ์„ Chrome์— ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.
  2. ํˆด๋ฐ” ๋ฒ„ํŠผ์„ ํด๋ฆญํ•ด ํ‘๋ฐฑ ์ „ํ™˜์„ ์ผœ๊ฑฐ๋‚˜ ๋•๋‹ˆ๋‹ค.

Feedback

์ด ํ™•์žฅ ํ”„๋กœ๊ทธ๋žจ์ด ์ง‘์ค‘์— ๋„์›€์ด ๋˜๊ฑฐ๋‚˜ ๋ธŒ๋ผ์šฐ์ง•์„ ๋” ์ฐจ๋ถ„ํ•˜๊ฒŒ ๋งŒ๋“ ๋‹ค๋ฉด, ๋ฆฌ๋ทฐ๋ฅผ ๋‚จ๊ธฐ๊ฑฐ๋‚˜ ํ”ผ๋“œ๋ฐฑ์„ ๊ณต์œ ํ•˜๊ณ  ๊ธฐ๋Šฅ ์š”์ฒญ์„ ์ œ์ถœํ•ด ์ฃผ์„ธ์š”. ์•„๋ž˜์— ๋Œ“๊ธ€์„ ๋‹ฌ๊ฑฐ๋‚˜ dev.to์—์„œ ์ €์ž๋ฅผ ํƒœ๊ทธํ•˜๊ณ , Chrome ์›น ์Šคํ† ์–ด ํŽ˜์ด์ง€์— ์ œ๊ณต๋œ GitHub ๋งํฌ๋ฅผ ํ†ตํ•ด ์—ฐ๋ฝํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํ•จ๊ป˜ ํ•˜๋‚˜์”ฉ ํƒญ์„ ์ฐจ๋ถ„ํ•˜๊ฒŒ ๋งŒ๋“ค์–ด๊ฐ€๋ฉฐ ์›น์„ ๋” ํŽธ์•ˆํ•˜๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Back to Blog

๊ด€๋ จ ๊ธ€

๋” ๋ณด๊ธฐ ยป

์›น ๊ฐœ๋ฐœ์ž๋ฅผ ์œ„ํ•œ ์‹ค์šฉ์ ์ธ ์ปฌ๋Ÿฌ ๋Œ€๋น„ ๊ฐ€์ด๋“œ

์ƒ‰ ๋Œ€๋น„๋Š” ์‹ค์ œ ํ™˜๊ฒฝ์—์„œ ์ธํ„ฐํŽ˜์ด์Šค์˜ ๊ฐ€๋…์„ฑ์„ ๊ฒฐ์ •ํ•˜๋ฉฐ, ๋น ๋ฅธ ๋ฒ„ํŠผ ํƒญ๋ถ€ํ„ฐ ์žฅ๋ฌธ์˜ ์ฝ๊ธฐ๊นŒ์ง€ ๋ชจ๋“  ๊ฒƒ์— ์˜ํ–ฅ์„ ๋ฏธ์นฉ๋‹ˆ๋‹ค. ๋‹น์‹ ์€โ€ฆ

๊ธฐ์—ฌํ•  ์˜คํ”ˆ ์†Œ์Šค ํ”„๋กœ์ ํŠธ ์ฐพ๊ธฐ

์˜คํ”ˆ ์†Œ์Šค ํ”„๋กœ์ ํŠธ์— ๊ธฐ์—ฌํ•  ํ”„๋กœ์ ํŠธ๋ฅผ ์ฐพ๋Š” ๊ฒƒ์€ ๋ณดํ†ต ์‚ฌ๋žŒ๋“ค์ด ๋งํ•˜๋Š” ๊ฒƒ๋ณด๋‹ค ๋” ์–ด๋ ต์Šต๋‹ˆ๋‹ค. ๋Œ€๋ถ€๋ถ„์˜ ๊ธฐ์‚ฌ๋“ค์€ ๊ฐ™์€ ํ‘œ์ค€ ์กฐ์–ธ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹คโ€” โ€œgood first โ€ฆโ€ ๋ฅผ ๊ฒ€์ƒ‰ํ•˜๋ผ.

PDF ํŒŒ์›Œ์—…: ๋กœ์ปฌ Python ์•ฑ์œผ๋กœ PDF ๋ณ‘ํ•ฉ, ์ˆœ์„œ ์žฌ๋ฐฐ์—ด ๋ฐ ๋ณตํ˜ธํ™”

๋ฐ์ดํ„ฐ์™€ ํ”„๋ผ์ด๋ฒ„์‹œ๋ฅผ ์ง€ํ‚ค์„ธ์š” ๐Ÿ”, ๋…ธํŠธ๋ถ์—์„œ PDF๋ฅผ ๋ณ‘ํ•ฉํ•˜์„ธ์š”. ์šฐ๋ฆฌ ์ค‘ ๋งŽ์€ ์‚ฌ๋žŒ๋“ค์€ ์—ฌ๋Ÿฌ PDF ๋ฌธ์„œ๋ฅผ ๋น ๋ฅด๊ฒŒ ๊ฒฐํ•ฉํ•ด์•ผ ํ•˜์ง€๋งŒ ๋ณด์•ˆ๊ณผ ํ”„๋ผ์ด๋ฒ„์‹œ๊ฐ€ ๊ฑฑ์ •๋ฉ๋‹ˆ๋‹ค.