๐Ÿ“ˆ Noise-Effector ๊ฐœ๋ฐœ๊ธฐ -์„ฑ๋Šฅ ๊ฐœ์„ -

thumb_hyeokยท2023๋…„ 2์›” 14์ผ
3

โšก Noise-Effector

๋ชฉ๋ก ๋ณด๊ธฐ
2/3
post-thumbnail

๐Ÿƒ๐Ÿปย ๋“ค์–ด๊ฐ€๋ฉฐ

ํ˜น์‹œ "๋…ธ์ด์ฆˆ ์ดํŽ™ํ„ฐ"์— ๋Œ€ํ•ด์„œ ๋ชจ๋ฅธ๋‹ค๋ฉด ์ด์ „ ํฌ์ŠคํŒ…์„ ์ฐธ๊ณ ํ•˜๋Š” ๊ฒƒ์„ ์ถ”์ฒœํ•œ๋‹ค. ์ด๋ฒˆ ๊ธ€์—์„œ๋Š” ๋…ธ์ด์ฆˆ ์ดํŽ™ํ„ฐ๋ฅผ ๊ฐœ๋ฐœํ•˜๋ฉด์„œ ๊ฝค ์• ๋ฅผ ๋งŽ์ด ๋จน์—ˆ๋˜ ๋ถ€๋ถ„์ธ ์„ฑ๋Šฅ ๊ฐœ์„ ์— ๋Œ€ํ•ด ๋‚ด๊ฐ€ ๊ฒช์€ ์‹œ๊ฐ„ ์ˆœ์œผ๋กœ ํŠธ๋Ÿฌ๋ธ” ์ŠˆํŒ… ๊ณผ์ •์„ ์ ์–ด๋ณด๋ คํ•œ๋‹ค. ๊ทธ๋Ÿผ, ์‹œ์ž‘ํ•ด๋ณด์ž!


๐Ÿค”ย ์•„๋ฌด๋ฆฌ ํ”„๋กœํ† ํƒ€์ž…์ด๋ผ์ง€๋งŒโ€ฆ

๋…ธ์ด์ฆˆ ์ดํŽ™ํ„ฐ์˜ ํ•ต์‹ฌ ๊ธฐ๋Šฅ์ธ ์‚ฌ์ง„์— ๋…ธ์ด์ฆˆ๋ฅผ ์ ์šฉํ•˜๋Š” ๊ธฐ๋Šฅ์ด ์ตœ์ดˆ๋กœ ์™„์„ฑ๋œ ์‹œ์ ์ด๋‹ค. ์„ฑ๋Šฅ ์ ์ˆ˜ 20์ .. ์‚ฌ์‹ค ์ด๊ฒƒ๋„ ์‹ค์ œ ์„ฑ๋Šฅ๋ณด๋‹ค ํ›จ์”ฌ ๋†’๊ฒŒ ๋‚˜์˜จ ๊ฒƒ์ด๋‹ค. ์™œ๋ƒํ•˜๋ฉด โ€œLCPโ€๊ฐ€ ๋œ ์‹œ์ ์ด ์‹ค์ œ ์ด๋ฏธ์ง€๊ฐ€ ์™„์„ฑ๋˜์–ด ๋‹ค์šด๋กœ๋“œ ๋ฐ›์„ ์ˆ˜ ์žˆ๋Š” ์‹œ์ ๊ณผ๋Š” ๊ดด๋ฆฌ๊ฐ€ ๊ฝค ์ปธ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

๋ฌด๋ ค ๋„คํŠธ์›Œํฌ ๋ฌด์ œํ•œ, ๊ฐœ๋ฐœ๋ชจ๋“œ๊ฐ€ ์•„๋‹Œ ๋ฐฐํฌ๋œ ํ™˜๊ฒฝ, ๋ฐ์Šคํฌํƒ‘ ๊ธฐ์ค€์œผ๋กœ ์ธก์ •ํ•œ ์ ์ˆ˜์ด๋‹ค. ์‹ฌ์ง€์–ด ๊ฐœ๋ฐœ๋ชจ๋“œ์—์„œ๋Š” ๋„ˆ๋ฌด ์˜ค๋ž˜ ๊ฑธ๋ ค์„œ ์‘๋‹ต์—†์Œ์œผ๋กœ ํฌ๋กฌ์ด ๊บผ์ง€๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋Œ€๋ถ€๋ถ„์ด๋ผ ์ธก์ • ์ž์ฒด๋„ ๋ถˆ๊ฐ€๋Šฅํ–ˆ๋‹ค.

์ด๋ ‡๊ฒŒโ€ฆ ๋งค์šฐ ์ž์ฃผ ๊ฐ€๋ฒ„๋ฆฌ๊ณค ํ–ˆ๋‹ค.

์ด๋ ‡๊ฒŒ ์„ฑ๋Šฅ์ด ์ฒ˜์ฐธํ•œ ์ด์œ ๋Š” โ€œ์ด๋ ‡๊ฒŒ ์„ฑ๋Šฅ์ด ๋งŽ์ด ์ €ํ•˜๋˜๋Š” ์ž‘์—…์ผ ๊ฑฐ๋ผ ์ƒ๊ฐ ๋ชปํ•˜๊ณ โ€ ์ ๋ฌ˜ํ™”๋ฅผ ์ด๋ฃจ๊ณ  ์žˆ๋Š” ์‚ผ๊ฐํ˜• ์š”์†Œ๋“ค์„ div ๋ฅผ ์ด์šฉํ•ด์„œ ํ•˜๋‚˜ ํ•˜๋‚˜ ๋‹ค ๊ทธ๋ ธ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. (์•„๋ž˜ ์‚ฌ์ง„์˜ ์‚ผ๊ฐํ˜•์ด ๋ชจ๋‘ div๋‹ค..)

์กฐ๊ธˆ๋งŒ ๋…ธ์ด์ฆˆ ๊ฐ•๋„๋ฅผ ์•ฝํ•˜๊ฒŒ ํ•ด๋„ div ํƒœ๊ทธ ์ˆ˜์‹ญ, ์ˆ˜๋ฐฑ๋งŒ๊ฐœ๊ฐ€ ์ƒ์„ฑ๋˜๊ณคํ–ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋‹น์—ฐํžˆ ์ด๋ ‡๊ฒŒ ๋™์ž‘ํ•˜๋‹ˆ ๋…ธ์ด์ฆˆ ์ •๋„์— ๋”ฐ๋ผ ๊ทธ๋ฆฌ๋Š” div ์˜ ๊ฐฏ์ˆ˜ ์ฐจ์ด๋กœ ์„ฑ๋Šฅ ์ฐจ์ด๊ฐ€ ์–ด๋งˆ์–ด๋งˆํ–ˆ๋‹ค.

๊ทธ๋ž˜์„œ โ€œCanvas APIโ€๋ฅผ ์ด์šฉํ•ด div ๋Œ€์ฒดํ•ด ์ ๋ฌ˜ํ™”๋ฅผ ๊ทธ๋ฆฌ๋Š” ๊ฒƒ์œผ๋กœ ํ–ˆ๋‹ค. Canvas API๋Š” GPU ๊ฐ€์†์„ ์‚ฌ์šฉํ•˜์—ฌ, ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๊ทธ๋ž˜ํ”ฝ ์—ฐ์‚ฐ์„ ์ฒ˜๋ฆฌํ•˜๋Š” ๊ณผ์ •์—์„œ CPU์™€ GPU๋ฅผ ๋ชจ๋‘ ์‚ฌ์šฉํ•œ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ๋น ๋ฅธ ๊ทธ๋ž˜ํ”ฝ ๋ Œ๋”๋ง์„ ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์žฅ์ ์ด ์žˆ๋‹ค.

์ด ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ, Canvas API๋Š” HTML ํƒœ๊ทธ์™€ ๋น„๊ตํ•ด์„œ ์ƒ๋Œ€์ ์œผ๋กœ ๊ฐ€๋ณ๊ณ  ๋น ๋ฅด๊ฒŒ ๋กœ๋”ฉ๋œ๋‹ค. ์ด๊ฒƒ์€ ๋ธŒ๋ผ์šฐ์ €์˜ ๋ฉ”๋ชจ๋ฆฌ๋ฅผ ์ ๊ฒŒ ์‚ฌ์šฉํ•˜๊ณ , ๋ Œ๋”๋ง ์†๋„ ๋˜ํ•œ ๋น ๋ฅด๊ฒŒ ๋งŒ๋“ค์–ด์ค€๋‹ค.

๐Ÿ’ก ์ด๋ ‡๊ฒŒ ์žฅ์ ์ด ๋งŽ์€ Canvas API๋ฅผ ์ด์šฉํ•˜์ง€ ์•Š์„ ์ด์œ ๊ฐ€ ์—†๋‹ค!


๐Ÿค”ย ์ •๋ง ์ด๊ฒŒ ๋งž๋Š” ๋ฐฉ๋ฒ•์ด ๋งž์„๊นŒ?

์œ„์—์„œ ๋ง์€ Canvas API๊ฐ€ ์ข‹๋‹ค, ์ข‹๋‹คํ–ˆ์ง€๋งŒ ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•์€ ์—†์—ˆ์„๊นŒ? ๋‚ด๊ฐ€ ์›ํ•˜๋Š” ์ ๋ฌ˜ํ™” ์ธ๋„ค์ผ์„ ๋งŒ๋“ค์–ด ๋‚ผ ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ๋“ค์€ ๋ฌด์—‡์ด ์žˆ๋Š”์ง€ ์‚ดํŽด๋ณด๊ณ  ๋น„๊ตํ•ด๋ณด์ž. ๊ทธ ์ดํ›„์— ๊ฐ€์žฅ ์•Œ๋งž์€ ๊ธฐ์ˆ ์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒŒ ๋งž์„ ๊ฒƒ์ด๋‹ค!

1๏ธโƒฃ DOM

์›น ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋ผ๋ฉด ๊ฐ€์žฅ ์นœ์ˆ™ํ•œ ๋ฐฉ๋ฒ•์ผ ๊ฒƒ์ด๋‹ค. ๊ทธ๋ž˜์„œ ๋‚ด๊ฐ€ ์ œ์ผ ๋จผ์ € ์‹œ๋„ํ•ด๋ณธ ๋ฐฉ๋ฒ•์ด๊ธฐ๋„ ํ•˜๋‹ค. ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ๋ฅผ ์ด์šฉํ•˜๊ฑฐ๋‚˜, ์‚ฌ์šฉํ•˜๊ธฐ์— ํŽธํ•œ ์ ๋“ค์ด ์žˆ๊ธดํ•˜์ง€๋งŒ, ๋ฉ”๋ชจ๋ฆฌ์™€ ์„ฑ๋Šฅ์„ ๊ณ ๋ คํ•ด๋ดค์„ ๋•Œ ์ง€๊ธˆ์€ ์ ํ•ฉ๋งŒ ๋ฐฉ๋ฒ•์ด ์•„๋‹ˆ๋ผ๋Š” ๋‹ต์ด ๋‚˜์˜จ๋‹ค.


2๏ธโƒฃ SVG

SVG๋Š” ์„ธ๋ฐ€ํ•œ ์ œ์–ด(Canvas API, WebGL)์™€ ํŽธ์˜์„ฑ(DOM)์˜ ์ค‘๊ฐ„์— ์œ„์น˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์ด๋‹ค. ๋‚˜๋Š” ๊ณ ํ€„๋ฆฌํ‹ฐ์˜ ์ ๋ฌ˜ํ™”๋ฅผ ๋งŒ๋“ค์–ด์•ผํ•˜๋‹ˆ ๋ฒกํ„ฐ๊ธฐ๋ฐ˜์˜ SVG๋Š” ๋‚˜๋ฆ„ ์ข‹์€ ์„ ํƒ์ง€์ผ ์ˆ˜๋„ ์žˆ์ง€๋งŒ ๋‹ค๋งŒ SVG๋Š” ๋„ํ˜•์˜ ์†์„ฑ์„ ์ˆ˜์ •ํ•  ๋•Œ๋งˆ๋‹ค ๋ฆฌ๋ Œ๋”๋ง์ด ๋ฐœ์ƒํ•˜์ง€๋งŒ, Canvas API๋Š” ํ•œ ๋ฒˆ์— ๋ชจ๋“  ๊ฒƒ์„ ๊ทธ๋ฆฌ๊ธฐ ๋•Œ๋ฌธ์— ์ผ๋ฐ˜์ ์ธ ๊ฒฝ์šฐ๋ผ๋ฉด SVG๋Š” ์š”์†Œ๊ฐ€ ๋งŽ์•„์งˆ ์ˆ˜๋ก ์„ฑ๋Šฅ์ด ๊ฐ์†Œํ•œ๋‹ค.


3๏ธโƒฃ Canvas API

Canvas API๋Š” ์œ„์—์„œ ์„ค๋ช…ํ–ˆ๋˜ ๊ฒƒ์ฒ˜๋Ÿผ ๋‹ค๋ฅธ ๋ฐฉ์‹์—์„œ ์ƒ๊ธธ ์ˆ˜ ์žˆ๋Š” ๋ฌธ์ œ์  โ€œ์š”์†Œ๊ฐ€ ๋งŽ์•„์ง€๋ฉด ์„ฑ๋Šฅ์ด ๊ฐ์†Œํ•œ๋‹คโ€ ๊ฐ€ ๋ฐœ์ƒํ•˜์ง€ ์•Š๋Š” ์กฐ๊ฑด์— ์žˆ๋Š” ๊ฒƒ์€ ๋ฌผ๋ก , ํ•˜๋“œ์›จ์–ด์™€ ์šด์˜์ฒด์ œ์— ๋”ฐ๋ผ ๋‹ค๋ฅด์ง€๋งŒ ์ผ๋ฐ˜์ ์ธ ์ตœ์‹  ๋ธŒ๋ผ์šฐ์ €์—์„œ๋Š” GPU ๊ฐ€์†์„ ์‚ฌ์šฉํ•ด ์„ฑ๋Šฅ์ƒ์˜ ์žฅ์ ์„ ๊ฐ€์ ธ๊ฐˆ ์ˆ˜ ์žˆ๋‹ค๋Š” ์žฅ์ ์ด ์žˆ๋‹ค.

๋‹ค๋งŒ, DOM ๋ฌธ์„œ ์ƒ์— canvas ์•ˆ์— ๊ทธ๋ฆฐ ๊ฒƒ๋“ค์€ ์ธ์‹๋˜์ง€ ์•Š์•„ ํ…… ๋นˆ canvas ํƒœ๊ทธ ํ•˜๋‚˜ ๋ฟ์ด๋ผ๋Š” ๋‹จ์ ์ด ์žˆ๋‹ค. ํ•˜์ง€๋งŒ Canvas API ์ž์ฒด๊ฐ€ ๋งŽ์€ ์š”์†Œ๋“ค์„ ํ•˜๋‚˜ ํ•˜๋‚˜ ์ œ์–ดํ•˜๊ธฐ์— ํŽธํ•ด ํฐ ๋ฌธ์ œ๊ฐ€ ๋˜์ง€๋Š” ์•Š์•˜๋‹ค.


๊ทธ ์™ธ WebGL์ด๋‚˜ ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•๋“ค๋„ ์กด์žฌํ•  ์ˆ˜ ์žˆ๊ฒ ์ง€๋งŒ, ๋ชฉ์ ๊ณผ ์กฐ๊ธˆ ๋™๋–จ์–ด์กŒ๋‹ค๊ฑฐ๋‚˜ ์ง„์ž…์žฅ๋ฒฝ์ด ์žˆ์–ด๋ณด์ด๋Š” ๊ธฐ์ˆ ์„ ๊ณ ๋ คํ•˜์ง€ ์•Š์•˜๋‹ค.

์ด๋ ‡๊ฒŒ ๊ฒฐ๋ก ์€ โ€œCanvan APIโ€๊ฐ€ ๋˜์—ˆ๋‹ค.


๐ŸŽจย Canvas API๋กœ ์„ฑ๋Šฅ ๊ฐœ์„ ํ•˜๊ธฐ

์ด๊ฒŒ Canvas API๋ฅผ ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ•˜๋Š”์ง€ ์•Œ๋ ค์ฃผ๋Š” ํฌ์ŠคํŒ…์ด ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์—, โ€œ์–ด๋–ป๊ฒŒ ๊ตฌํ˜„ํ–ˆ๋ƒโ€ ํ•˜๋Š” ๋ถ€๋ถ„์€ ์ƒ๋žตํ•˜๋„๋ก ํ•˜๊ฒ ๋‹ค. ๋ฐ”๋กœ ๋„˜์–ด๊ฐ€์„œ div๋กœ ๋–ก์น ํ•œ ์ ๋ฌ˜ํ™”๋ฅผ Canvas API๋กœ ๋Œ€์ฒดํ•˜๊ณ  ์–ด๋–ป๊ฒŒ ์„ฑ๋Šฅ์ด ํ–ฅ์ƒ๋˜์—ˆ๋Š”์ง€ ์‚ดํŽด๋ณด๋„๋ก ํ•˜์ž! (์ž˜ ๋ณด๋ฉด ์ด์ƒํ•œ ์ ์ด ์žˆ์„ ๊ฒƒ์ด๋‹ค)

์„ฑ๋Šฅ ์ ์ˆ˜์ƒ์œผ๋กœ๋Š” 69์ ์ด์ง€๋งŒ, ์ž˜๋ณด๋ฉด LCP๊ฐ€ 0.3์ดˆ์ธ ๊ฒƒ์„ ํ™•์ธํ•ด๋ณผ ์ˆ˜ ์žˆ๋‹ค. ์•„๋ฌด๋ฆฌ ๋ด๋„ ํ•œ 2์ดˆ๋Š” ๊ฑธ๋ฆฌ๋Š” ๊ฒƒ ๊ฐ™์€๋ฐ 0.3์ดˆ๋ผ๋‹ˆ.. ๋ง์ด ์•ˆ ๋˜๋Š” ๋ฆฌํฌํŠธ์˜€๋‹ค. ๊ทธ๋ž˜์„œ ํผํฌ๋จผ์Šค ํƒญ์„ ํ™•์ธํ•ด๋ดค๋‹ค.

๋ชจ๋‚˜๋ฆฌ์ž ์ ๋ฌ˜ํ™”๊ฐ€ ๋กœ๋”ฉ์ด ๋˜๋Š” ์‹œ์ ์€ ์ € ๋’ค 1998ms ์ง€์ ์— ์žˆ๋Š”๋ฐ, LCP๋Š” 42.9ms๋กœ ์ฐํ˜€์žˆ๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค. ์ด๊ฑด ์•„๋งˆ๋„ Canvas API์˜ ๋‚ด๋ถ€ ์š”์†Œ๋Š” DOM์— ์ฐํžˆ์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— Canvas๊ฐ€ ๋กœ๋”ฉ๋˜๋ฉด ๋ฐ”๋กœ LCP๋กœ ๊ธฐ๋ก์ด ๋˜๋Š” ๊ฒƒ์œผ๋กœ ๋ณด์ธ๋‹ค. (ํ•˜์ง€๋งŒ ์ •ํ™•ํ•˜์ง€๋Š” ์•Š๋‹ค)

์ธก์ •ํ™˜๊ฒฝ์€ ์•„๊นŒ์™€ ๋™์ผํ•˜๊ฒŒ ์ธก์ •ํ–ˆ๋‹ค. ์•„๋งˆ ์ด๋Œ€๋กœ๋ฉด ์‹ค์ œ LCP๋Š” 1.5s~1.9s ์‚ฌ์ด์˜ ๊ฐ’์ผ ๊ฒƒ ๊ฐ™์•˜๋‹ค. ์•„์ฃผ ๋งŒ์กฑ์Šค๋Ÿฌ์šด ์„ฑ๋Šฅ์€ ์•„๋‹ˆ์ง€๋งŒ ๊ฐœ๋ฐœ๋ชจ๋“œ์—์„œ ์›น์‚ฌ์ดํŠธ๊ฐ€ ํ„ฐ์ง„๋‹ค๊ฑฐ๋‚˜, ํ•˜๋ฃจ ์ข…์ผ ๊ธฐ๋‹ค๋ ค์•ผ ํ•˜๋Š” ์‚ฌํƒœ๊ฐ€ ์ผ์–ด๋‚˜์ง€๋Š” ์•Š์•˜๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ ์žฅ์น˜ ์ข…๋ฅ˜๋‚˜ ๋ธŒ๋ผ์šฐ์ €์— ๋”ฐ๋ผ ์„ฑ๋Šฅ์ด ์ฐจ์ด๊ฐ€ ๊ฝค ๋‚˜๋Š” ๊ฒƒ ๊ฐ™์•˜๋‹ค. ํ”„๋กœ์ ํŠธ๋ฅผ ํ…Œ์ŠคํŠธ ํ•ด์ฃผ๋˜ ๋‚ด ์นœ๊ตฌ์˜ ์ปดํ“จํ„ฐ์—์„œ๋Š” ๊ฑฐ์˜ 10์ดˆ ๊ฐ€๊นŒ์ด ๊ธฐ๋‹ค๋ ค์•ผ ํ™”๋ฉด์ด ๋กœ๋”ฉ์ด ์™„๋ฃŒ๋œ๋‹ค๊ณ  ํ–ˆ๋‹ค.

๊ทธ๋ž˜๋„ ์ผ์ •์ƒ ๊ฐœ๋ฐœํ•ด์•ผํ•˜๋Š” ๊ธฐ๋Šฅ๋“ค์ด ๋งŽ์•„ ์„ฑ๋Šฅ์— ๋ชฉ์ˆจ๊ฑธ์ง€ ์•Š๊ณ  ์ผ๋‹จ ๋„˜์–ด๊ฐ€๊ธฐ๋กœ ํ–ˆ๋‹ค.


๐Ÿ’ฃย ๋ํŒ์™•์„ ๋งŒ๋‚˜๋‹ค

์ €๋ฒˆ ๊ธ€์„ ๋ณด์‹  ๋ถ„์ด๋ผ๋ฉด ๋…ธ์ด์ฆˆ ์ดํŽ™ํ„ฐ์—๋Š” ๋…ธ์ด์ฆˆ ๊ฐ•๋„๋ฅผ ์กฐ์ ˆํ•˜๋„๋ก ๋„์™€์ฃผ๋Š” โ€œ3D ์บ๋Ÿฌ์…€โ€์ด ์กด์žฌํ•œ๋‹ค๋Š” ์‚ฌ์‹ค์„ ์•Œ ๊ฒƒ์ด๋‹ค. ๊ทธ๋ ‡๋‹ค. ๋…ธ์ด์ฆˆ๋Š” 6๋‹จ๊ณ„๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ๊ณ , ๋‚˜๋Š” ์บ๋Ÿฌ์…€์„ ๋ Œ๋”๋งํ•˜๊ธฐ ์œ„ํ•ด์„œ ์ € ์˜ค๋ž˜๊ฑธ๋ฆฌ๋Š” ์ž‘์—…์„ 6๋ฒˆ์ด๋‚˜ ํ•ด์•ผํ•จ์„ ๊นจ๋‹ฌ์•˜๋‹ค.

๐Ÿ“ˆย ๋‹ค์‹œ ํ•œ ๋ฒˆ ์„ฑ๋Šฅ ๋ถ„์„

์ž˜ ๋ณด๋ฉด ์บ๋Ÿฌ์…€ ์š”์†Œ๋งˆ๋‹ค ๋‹ค๋ฅธ ๋…ธ์ด์ฆˆ ์ •๋„๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๊ธฐ๋•Œ๋ฌธ์—, ํ•˜๋‚˜ ํ•˜๋‚˜ ๋‹ค ๋”ฐ๋กœ ๋ Œ๋”๋ง์„ ํ•ด์•ผํ•˜๋Š” ์ƒํ™ฉ์ด์—ˆ๋‹ค. ์˜คโ€ฆ ์ด๋Ÿฐ ๋‚˜๋Š” UX๊ฐ€ ๋›ฐ์–ด๋‚œ 3D์บ๋Ÿฌ์…€์„ ํฌ๊ธฐํ•˜๊ณ  ์‹ถ์ง€ ์•Š์•„์„œ ๊ฒฐ๊ตญ ๋‹ค์‹œ ์„ฑ๋Šฅ ๊ฐœ์„  ๋ฌธ์ œ๋กœ ๋˜๋Œ์•„๊ฐˆ ์ˆ˜ ๋ฐ–์— ์—†์—ˆ๋‹ค. ๋จผ์ € ๊ตฌํ˜„์ด ๋๋‚˜๊ณ  ์ธก์ •ํ•œ ์„ฑ๋Šฅ์„ ๋ถ„์„ํ•ด๋ณด์ž

์ด์ „์ฒ˜๋Ÿผ LCP๊ฐ€ ์ •์ƒ์ ์œผ๋กœ ๊ธฐ๋ก๋˜์ง€ ์•Š์•„์„œ ํผํฌ๋จผ์Šค ํƒญ์„ ์ฐธ๊ณ ํ•ด LCP๋ฅผ ๋Œ€์ถฉ ๊ณ„์‚ฐํ•ด๋ดค๋”๋‹ˆ ์•ฝ โ€œ4sโ€ ์ •๋„ ๋  ๊ฒƒ ๊ฐ™์•˜๋‹ค. ๊ทธ ์™ธ ์„ฑ๋Šฅ๋„ ๊ถŒ์žฅ์‚ฌํ•ญ๊ณผ๋Š” ๋งค์šฐ ๋ฉ€์–ด๋ณด์ธ๋‹ค. ์ด์ •๋„๋ฉด ๋‹คํ–‰์ด๋‹ค๋ผ๊ณ  ์ƒ๊ฐํ–ˆ์„ ์ •๋„์˜€๋‹ค.

์—ฌ๊ธฐ์„œ ๋‚˜๋Š” ์ ๋ฌ˜ํ™”๋ฅผ ๊ทธ๋ฆฌ๋Š” ๊ธฐ๋Šฅ์„ A-Z๊นŒ์ง€ ๋‹ด๋‹นํ•˜๊ณ  ์žˆ๋Š” usePointillism ํ›…์„ ์ค‘์‹ฌ์œผ๋กœ ์–ด๋–ค ๋ถ€๋ถ„์ด ์„ฑ๋Šฅ์ ์œผ๋กœ ๋ฌธ์ œ๊ฐ€ ์ƒ๊ธฐ๋Š” ์ง€ ์ฐพ์•„๋ดค๋‹ค. ์ฐพ์•„๋ณด๋‹ˆ ์œ ๋… ๋‘๊ฐ€์ง€ ํ•จ์ˆ˜๊ฐ€ ์˜ค๋ž˜ ๊ฑธ๋ฆผ์„ ํ™•์ธํ–ˆ๋‹ค.

์ž, ์•„๋ž˜์—์„œ ํ•ด๋‹น ๋ฌธ์ œ๋ฅผ ์ƒ์„ธํžˆ ์‚ดํŽด๋ณด๊ณ  ๊ณ ์ณ๋ณด๋„๋ก ํ•˜์ž.


๐Ÿค–ย ์„ฑ๋Šฅ์„ ์œ„ํ•œ ์ฝ”๋“œ ๋ฆฌํŒฉํ„ฐ๋ง

createImageData ํ•จ์ˆ˜๋Š” source๋กœ ์ œ๊ณต๋œ ์ด๋ฏธ์ง€๋ฅผ ์บ”๋ฒ„์Šค์— ๊ทธ๋ฆฌ๊ณ , ํ•ด๋‹น ์ด๋ฏธ์ง€์˜ ๊ฐ ํ”ฝ์…€ ๋งˆ๋‹ค์˜ RGBA๊ฐ’ ์ •๋ณด๋ฅผ ๋ฐฐ์—ด์„ ๋ฐ˜ํ™˜ํ•˜๋Š” ํ•จ์ˆ˜์ด๋‹ค. ์ด๊ฑด ๋ณด์ž๋งˆ์ž ์ด๋ฆ„๊ณผ ๋‹ฌ๋ฆฌ ์—ญํ• ์ด ๋‘๊ฐœ๋ผ ๋ถ„๋ฆฌํ•ด์•ผ๊ฒ ๋‹ค๋Š” ์ƒ๊ฐ๋ถ€ํ„ฐ ๋“ค์—ˆ๋‹ค.

์ถ”๊ฐ€๋กœ createRgbaValues ํ•จ์ˆ˜๋Š” ๊ทธ๋ ‡๊ฒŒ ๋งŒ๋“ค์–ด์ง„ RGBA ๊ฐ’ ๋ฐฐ์—ด์„ ๋ฐ›์•„์„œ ๋‚ด๊ฐ€ ์‚ฌ์šฉํ•˜๊ธฐ ํŽธํ•œ ํ˜•ํƒœ๋กœ ๋ฐ”๊ฟ”์„œ ์ด์ฐจ์›๋ฐฐ์—ด ํ˜•ํƒœ๋กœ ๋ฐ˜ํ™˜ํ•ด์ฃผ๋Š” ํ•จ์ˆ˜์ด๋‹ค. ๋‚˜์ค‘์— ์•Œ๊ณ  ๋ดค๋”๋‹ˆ ์ด๊ฒŒ ์„ฑ๋Šฅ ๋ฌธ์ œ์˜ ์ฃผ๋ฒ”์ด์—ˆ๋‹ค.

๋ถ„์„ ๊ฒฐ๊ณผ, ์ ๋ฌ˜ํ™”๋ฅผ ๊ทธ๋ฆฌ๋Š” ๊ฒŒ ์ฃผ๋ชฉ์ ์ธ usePointillism ํ›…์—์„œ ๊ตณ์ด ์ด๋ฏธ์ง€๋ฅผ ๊ทธ๋ฆฌ๊ณ , RGBA ๊ฐ’์„ ์ถ”์ถœํ•˜๋Š” ๋กœ์ง๊นŒ์ง€ ๋“ค๊ณ  ์žˆ์„ ํ•„์š”๊ฐ€ ์—†์–ด ๋ณด์—ฌ useRgba ๋ผ๋Š” ํ›…์œผ๋กœ ๋”ฐ๋กœ ๋ถ„๋ฆฌํ–ˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ์ด๋ฏธ์ง€์˜ RGBA ๊ฐ’์€ ํ•œ ๋ฒˆ ์ด๋ฏธ์ง€๋ฅผ ์ฒจ๋ถ€ํ•˜๊ณ  ๋‚˜๋ฉด ๋ฐ”๋€Œ์ง€ ์•Š์œผ๋‹ˆ, ์„ฑ๋Šฅ์ƒ์˜ ๋ฌธ์ œ๊ฐ€ ์—†์„ ๊ฑฐ๋ผ๋Š” ์ƒ๊ฐ์„ ํ•˜๊ณ  โ€œContext APIโ€๋ฅผ ์ด์šฉํ•ด์„œ ์ปจํ…์ŠคํŠธ์— ์ €์žฅํ•ด์„œ useRgba ์—์„œ ํ•œ ๋ฒˆ ๊ณ„์‚ฐํ•œ RGBA ๊ฐ’์„ ์ปจํ…์ŠคํŠธ๋ฅผ ํ†ตํ•ด usePointillism ์—์„œ ๋ฐ›์•„ ์“ฐ๋Š” ๊ฒƒ์œผ๋กœ ํ–ˆ๋‹ค.

์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ๊ฐ€์žฅ ์˜ค๋ž˜๊ฑธ๋ฆฌ๋Š” ์ž‘์—…์ธ RGBA ๊ฐ’ ๊ณ„์‚ฐ์„ ์ ๋ฌ˜ํ™”๋ฅผ ๊ทธ๋ ค์•ผํ•  ์บ”๋ฒ„์Šค ๊ฐฏ์ˆ˜๋งŒํผ ํ•  ํ•„์š” ์—†์ด ๋‹จ ํ•œ๋ฒˆ๋งŒ ํ•˜๋ฉด ๋œ๋‹ค๋Š” ์•„์ฃผ ํฐ ์ด๋“์„ ์–ป์„ ์ˆ˜ ์žˆ์—ˆ๋‹ค.

์ถ”๊ฐ€๋กœ ๊ตณ์ด ํ•„์š”์—†๋Š” ์ž‘์—…์ธ RGBA ๊ฐ’์„ ์ด์ฐจ์›๋ฐฐ์—ด์— ์˜ฎ๊ฒจ๋‹ด๋Š” ์ž‘์—…์„ ํ•˜๋ฉด์„œ ์ž‘์—… ์‹œ๊ฐ„์„ ๋Š˜๋ฆฌ๊ณ  ์žˆ์–ด ํ•ด๋‹น ํ•จ์ˆ˜๋ฅผ ์ œ๊ฑฐ ํ–ˆ๋‹ค.

๐Ÿ’ก ๊ทธ๋Ÿผ ๊ฒฐ๊ณผ๋ฌผ์„ ์‚ดํŽด๋ณด์ž!

์ด๋ฏธ์ง€๋ฅผ ๊ทธ๋ฆฌ๋Š” ๊ธฐ๋Šฅ์€ ํ•˜๋‚˜๋กœ ๋ถ„๋ฆฌํ•ด์„œ drawImage ํ•จ์ˆ˜์—์„œ ์—ญํ• ์„ ์ฃผ์—ˆ๋‹ค.

getPixelData ํ•จ์ˆ˜๋Š” ์•„๊นŒ ์ „์˜ createImageData ํ•จ์ˆ˜์™€ ์ด๋ฏธ์ง€๋ฅผ ๊ทธ๋ฆฌ๋Š” ๊ฒƒ๋งŒ ๋นผ๊ณ  ์™„์ „ํžˆ ๋™์ผํ•œ ๋™์ž‘์„ ํ•˜๋ฉฐ, ์ปจํ…์ŠคํŠธ์— RGBA ๊ฐ’์„ ์—…๋ฐ์ดํŠธ ์‹œ์ผœ์ฃผ๋Š” ๊ธฐ๋Šฅ์ด ์ถ”๊ฐ€๋˜์—ˆ๋‹ค.

์ด์ œ ์ฝ”๋“œ๋ฅผ ์„ฑ๊ณต์ ์œผ๋กœ ๋ฆฌํŒฉํ„ฐ๋ง ํ–ˆ์œผ๋‹ˆ ์„ฑ๋Šฅ ๊ฐœ์„ ์ด ์ž˜ ๋˜์—ˆ๋Š”์ง€ ์‚ดํŽด๋ณด๋Ÿฌ๊ฐ€์ž!


๐Ÿ’ฏย ์„ฑ๋Šฅ ๊ฐœ์„  ๊ฒฐ๊ณผ!

1๏ธโƒฃ Page 1: ์ด๋ฏธ์ง€ ์—…๋กœ๋“œ

99์ โ€ฆ ์ข‹๋‹ค. ์›๋ž˜๋„ ์ด ํŽ˜์ด์ง€๋Š” ๋นจ๋ผ์„œ ํฌ๊ฒŒ ๋‹ฌ๋ผ์ง„ ์ ์€ ์—†๋‹ค. ๊ทธ๋Ÿฌ๋‚˜, ์ˆ˜๋งŽ์€ ์ด๋ฏธ์ง€๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๋Š๋ผ ์‹œ๊ฐ„์ด ๊ฑธ๋ฆฌ๋Š”๋งŒํผ ๋„คํŠธ์›Œํฌ ํ™˜๊ฒฝ์ด ์ข‹์ง€ ๋ชปํ•œ ๊ณณ์—์„œ๋Š” ์•„์‰ฌ์šด ์„ฑ๋Šฅ์„ ๋ณด์—ฌ์ค„ ์ˆ˜๋„ ์žˆ๋‹ค.

์บ์‹œ์ •์ฑ…์ด๋‚˜ SSR๊ณผ ๊ฐ™์€ ๋ฐฉ๋ฒ•์„ ํ†ตํ•ด ๊ฐœ์„ ์„ ํ•ด๋ณผ ์ˆ˜๋„ ์žˆ๊ฒ ์ง€๋งŒ, ๊ฐœ์„ ์ด ํ•„์š”ํ•œ ๋‹จ๊ณ„๋Š” ์•„๋‹Œ ๊ฒƒ ๊ฐ™๋‹ค.


2๏ธโƒฃ Page 2: ๋…ธ์ด์ฆˆ ๊ฐ•๋„ ์„ ํƒ

100์ โ€ฆ ์—„์ฒญ๋‚˜๊ฒŒ ๋นจ๋ผ์กŒ๋‹ค. ์‚ฌ์šฉ์ž๊ฐ€ ์ด๋ฏธ์ง€๋ฅผ ์ฒจ๋ถ€ํ•˜๋Š” ์‹œ์ ์— ์ด๋ฏธ ์ปจํ…์ŠคํŠธ์— RGBA ๊ฐ’์ด ์ €์žฅ์ด ๋˜๊ธฐ ๋•Œ๋ฌธ์— ์ด ํŽ˜์ด์ง€๊ฐ€ ๋กœ๋”ฉ๋˜๋Š” ์†๋„๋Š” ๊ทธ๋ƒฅ ๋ชจ๋ฐ”์ผ์—์„œ๋„ โ€œ์ฆ‰์‹œโ€ ๋ผ๊ณ  ๋ณผ ์ˆ˜ ์žˆ์„ ์ •๋„์ด๋‹ค.

์œ„์— ๋ถ„์„์„ ํ† ๋Œ€๋กœ ๋ถ„์„ํ•ด๋ณด๋‹ˆ LCP๋Š” TTI์™€ ๊ฑฐ์˜ ๊ฐ™์€ ์ˆ˜์ค€์ด์—ˆ๋Š”๋ฐ ์ง€๊ธˆ์€ ์ œ๋Œ€๋กœ ๋œ LCP๊ฐ’์ด ๋งž๋‹ค.


3๏ธโƒฃ Page 3: ์ด๋ฏธ์ง€ ๋‹ค์šด๋กœ๋“œ

์ด ํŽ˜์ด์ง€๋„ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ์ด๋ฏธ ์ €์žฅ๋˜์–ด ์žˆ๋Š” RGBA ๊ฐ’์„ ์ด์šฉํ•ด ๊ฒฐ๊ณผ๋ฌผ์„ ๊ทธ๋ฆฌ๊ธฐ ๋•Œ๋ฌธ์— (์‹ฌ์ง€์–ด 1๊ฐœ๋งŒ ๊ทธ๋ฆฌ๋ฉด ๋˜๊ธฐ ๋•Œ๋ฌธ์—) ์•„๊นŒ ํŽ˜์ด์ง€๋ณด๋‹ค๋„ ํ›จ์”ฌ ๋น ๋ฅธ ์„ฑ๋Šฅ์„ ๋ณด์—ฌ์ค€๋‹ค.


4๏ธโƒฃย ์ „์ฒด ์œ ์ € ํ”Œ๋กœ์šฐ: Timespan

๋งˆ์ง€๋ง‰์œผ๋กœ, โ€œ์ด๋ฏธ์ง€ ์ฒจ๋ถ€๋ถ€ํ„ฐโ€, โ€œ๊ฒฐ๊ณผ๋ฌผ ๋‹ค์šด๋กœ๋“œโ€ ๊นŒ์ง€ ๋ชจ๋“  ์œ ์ € ์‚ฌ์ดํด์„ Lighthouse์˜ โ€œTimeSpanโ€์„ ํ†ตํ•ด ์„ฑ๋Šฅ ์ ์ˆ˜๋ฅผ ์ธก์ •ํ•ด๋ดค๋‹ค. ์—ญ์‹œ,,, ์ง€๊ธˆ์œผ๋กœ์จ๋Š” ๊ฐœ์„ ์ด ํ•„์š”์—†๋Š” ๋‹จ๊ณ„๊นŒ์ง€ ์™”๋‹ค.


๐Ÿ˜Žย ๋งˆ๋ฌด๋ฆฌ

์ด๋ ‡๊ฒŒ ๋…ธ์ด์ฆˆ ์ดํŽ™ํ„ฐ ํ”„๋กœ์ ํŠธ์˜ "์„ฑ๋Šฅ ๋ฌธ์ œ"์™€ "ํŠธ๋Ÿฌ๋ธ” ์ŠˆํŒ… ๊ณผ์ •"์„ ์‚ดํŽด๋ดค๋‹ค. ๋‹ค์Œ ๊ธ€์—์„œ๋Š” ๋‚ด๊ฐ€ ์ง์ ‘ ์ฝ”๋“œ ๋ฆฌ๋ทฐ๋ฅผ ํ•ด๋ณด๊ฑฐ๋‚˜, ์“ฐ์ธ ๊ธฐ์ˆ ์— ๋Œ€ํ•ด ๊นŠ๊ฒŒ ๋‹ค๋ค„๋ณด๋Š” ์‹œ๊ฐ„์„ ๊ฐ€์ ธ๋ณด๋ คํ•œ๋‹ค.

๊ธด ๊ธ€์„ ์ฝ์–ด์ค˜์„œ ๊ฐ์‚ฌํ•˜๋‹ค!


๐Ÿ“–ย ์ฐธ๊ณ  ์ž๋ฃŒ

profile
์šฐ์•„ํ•œํ…Œํฌ์ฝ”์Šค 4๊ธฐ ์›น ํ”„๋ก ํŠธ์—”๋“œ

0๊ฐœ์˜ ๋Œ“๊ธ€