๐Ÿ–ค *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

๊ด€๋ จ ๊ธ€

๋” ๋ณด๊ธฐ ยป

๋ฌผ๋ฅ˜๋ฅผ ์œ„ํ•œ ํ…ŒํŠธ๋ฆฌ์Šค: Rust๋กœ 3D Bin Packing Problem ํ•ด๊ฒฐ ๐Ÿฆ€

์†Œ๊ฐœ ๋ญ๊ฐ€ ์งœ์ฆ๋‚˜๋Š”์ง€ ์•„์„ธ์š”? ๊ฑฐ๋Œ€ํ•œ ๋ฐฐ์†ก ์ƒ์ž๋ฅผ ์—ด์—ˆ๋Š”๋ฐ ์•ˆ์— ์ž‘์€ ๋ฌผ๊ฑด์ด ๋”ธ๊น๊ฑฐ๋ฆฌ๋ฉฐ, ๋ฒ„๋ธ”๋žฉ ์‚ฐ์— ๋‘˜๋Ÿฌ์‹ธ์—ฌ ์žˆ๋Š” ๊ฒฝ์šฐโ€ฆ

๋‚ด ๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๋ฌผ์˜ ๋ณต์ œ๋ณธ์„ ์˜จ๋ผ์ธ์—์„œ ์ฐพ์•˜๋‹ค โ€” ๋ชจ๋“  ํ‘œ์ ˆ๋œ ๋ฒ„์ „์„ ์ถ”์ ํ•˜๊ธฐ ์œ„ํ•ด ๋งŒ๋“  ํˆด

์ž์‹ ์ด ์“ด ๊ธฐ์‚ฌ์—์„œ ํ•œ ๋ฌธ๋‹จ์„ ๊ตฌ๊ธ€๋งํ•ด ๋ณธ ์  ์žˆ๋‚˜์š”โ€ฆ โ€ฆ๊ทธ๋ฆฌ๊ณ  ๊ทธ ๋ฌธ๋‹จ์ด ๋งˆ์น˜ ์ž์‹ ์ด ์“ด ๊ฒƒ์ฒ˜๋Ÿผ 5๊ฐœ์˜ ๋‹ค๋ฅธ ์›น์‚ฌ์ดํŠธ์— ๊ฒŒ์‹œ๋œ ๊ฒƒ์„ ๋ฐœ๊ฒฌํ•œ ์  ์žˆ๋‚˜์š”? ์ €์—๊ฒŒ๋„ ๊ทธ๋Ÿฐ ์ผ์ด ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ํ•œ ๋ฒˆ์ด ์•„๋‹ˆ๋ผ ์—ฌ๋Ÿฌ ๋ฒˆ. Aft...