๐Ÿ“† 23.03.28 - ์„ฑ๋Šฅ ๊ฐœ์„  #2. ์ด๋ฏธ์ง€ ์šฉ๋Ÿ‰ ์ค„์ด๊ธฐ

๋ฒ„๋“คยท2023๋…„ 3์›” 27์ผ
1

โœจToday I Learn (TIL)

๋ชฉ๋ก ๋ณด๊ธฐ
33/62
post-thumbnail

๐Ÿ“– ์ด์ „ ์„ฑ๋Šฅ ๊ฐœ์„  ํŽธ์„ ์ฐธ๊ณ ํ•ด์ฃผ์„ธ์š”.

1. ์„ฑ๋Šฅ ๊ฐœ์„  #1. LightHouse๋กœ ์„ฑ๋Šฅ ํŒŒ์•…ํ•ด๋ณด๊ธฐ
2. ์ด๋ฏธ์ง€ ์šฉ๋Ÿ‰ ์ค„์ด๊ธฐ

์ตœ์ ํ™”๋ฅผ ์ •~๋ง ๋งŽ์ด ํ•ด์•ผ๋˜๊ฒ ๋‹ค๋Š” ๊ฒƒ์„ ์ „ํŽธ LightHouse๋ฅผ ํ†ตํ•ด์„œ ์•Œ๊ฒŒ ๋˜์—ˆ๋‹ค. ์•„๋ฌด๋ฆฌ ํด๋ผ์ด์–ธํŠธ ์„œ๋ฒ„์ด์ง€๋งŒ 52์ ์€ ๊ฐœ์„ ํ•ด์•ผํ•  ๋ถ€๋ถ„์ด ๋งŽ๋‹ค๋Š” ์˜๋ฏธ๋ฅผ ๋‚ดํฌํ•˜๊ณ  ์žˆ๋‹ค.
๊ทธ๋ž˜๋„ ์ด๋ฒˆ ํฌ์ŠคํŠธ๋ถ€ํ„ฐ๋Š” ํ•˜๋‚˜ํ•˜๋‚˜ ๊ณ ์ณ๋‚˜๊ฐ€๋Š” ์ ˆ์ฐจ๋ฅผ ๋ฐŸ์•„ ๋ณด๋ ค๊ณ  ํ•œ๋‹ค!

์ด๋ฏธ์ง€ ์šฉ๋Ÿ‰ ์ตœ์ ํ™”

๋จผ์ € ์˜ˆ์ œ์ธ CampUs ์—์„œ๋Š” Splash Page ํ›„์— ๋ฉ”์ธ ํŽ˜์ด์ง€์— ๋„ค๋น„๊ฒŒ์ดํŠธ ๋˜๋Š” ๊ตฌ์กฐ๋กœ ๋˜์–ด ์žˆ๊ธฐ์—, ๋ฉ”์ธํŽ˜์ด์ง€๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์ง„๋‹จํ•œ ์ •๋ณด๋ฅผ ํ† ๋Œ€๋กœ ๋‹ค๋ฃฐ ์˜ˆ์ •์ด๋‹ค.

์ฒ˜์Œ ๋ Œ๋”๋ง ๋˜๋ฉด ์ด๋Ÿฐ ํŽ˜์ด์ง€๊ฐ€ ๋‚˜์˜ค๊ฒŒ ๋˜๋Š”๋ฐ, ์ผ๋ถ€๋ถ„๋งŒ ๋ณด์—ฌ์ ธ์„œ ๊ทธ๋ ‡์ง€ ์ด๋ฏธ์ง€๋ฅผ ๋งŽ์ด ์‚ฌ์šฉํ•œ ํŽ˜์ด์ง€์ด๋‹ค.

๊ทธ๋Ÿผ ํ•ด๋‹น ํŽ˜์ด์ง€๋ฅผ LightHouse ๋Š” ์–ด๋–ป๊ฒŒ ํŒ๋‹จํ–ˆ๋Š”์ง€ ๋ด๋ณด๋„๋ก ํ•˜์ž.

LightHouse๋กœ ๋ฌธ์ œ์  ํŒŒ์•…ํ•˜๊ธฐ

์ด์ „์— ์Šค์บ”ํ–ˆ๋˜ LightHouse ๋ถ„์„ํ‘œ๋ฅผ ๊ฐ€์ ธ์™€๋ดค๋‹ค. ๊ทธ๋ฆฌ๊ณ  ํ˜„์žฌ ์„ฑ๋Šฅ์€ 52๋ผ๊ณ  ๋…ธ๋ž€์ƒ‰ ํ‘œ์‹œ๊ฐ€ ๋˜์–ด์žˆ์œผ๋ฉฐ, ํ•˜๋‹จ์— ์น˜์ˆ˜๋ณ„ ์ƒ‰๊น” ์ฆ‰, ์‹ฌ๊ฐ์„ฑ์„ ๋ˆˆ์—ฌ๊ฒจ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ์•„๋ž˜์˜ ๊ทธ๋ฆผ์„ ํ•œ๋ฒˆ ๋ณด์ž.

ํ•ด๋‹น ์ด๋ฏธ์ง€๋Š” ์ด๋ฏธ์ง€ ํฌ๊ธฐ์— ๊ด€๋ จํ•œ ๋ฌธ์ œ๋ฅผ ๋‹ค๋ฃจ๊ณ  ์žˆ๋Š” ๋ถ„์„ํ‘œ๋‹ค. ๋ฌผ๋ก  ์œ„์˜ ์ง€ํ‘œ์—์„œ ์ ์ˆ˜๊ฐ€ ์ €๋ ‡๊ฒŒ ๋‚˜์˜จ ์ด์œ  ์ค‘ ๋ช‡ ๊ฐ€์ง€๋ฅผ ํ•˜๋‹จ์—์„œ ๋‹ค๋ฃจ๋Š” ๋ฐ, ๊ทธ์ค‘ ํฐ ๋ถ€๋ถ„์„ ์ฐจ์ง€ํ•˜๊ณ  ์žˆ๋‹ค.
๋นจ๊ฐ„์ƒ‰์œผ๋กœ ํ‘œ์‹œ๊ฐ€ ๋˜์–ด์žˆ์œผ๋ฉฐ ์ ์ ˆํ•œ ํฌ๊ธฐ์˜ ์ด๋ฏธ์ง€๋ฅผ ๊ฒŒ์žฌ ๋ชจ๋ฐ”์ผ ๋ฐ์ดํ„ฐ๋ฅผ ์ ˆ์•ฝํ•˜๊ณ  ๋กœ๋“œ ์‹œ๊ฐ„์„ ๋‹จ์ถ•ํ•˜์„ธ์š” ๋ผ๊ณ  ๋‚˜์™€์žˆ๋‹ค.

ํ•ด๋‹น ์ด๋ฏธ์ง€๋ฅผ ๊ณ„์† ์‚ฌ์šฉํ•˜๊ฒŒ ๋œ๋‹ค๋ฉด ๋กœ๋”ฉ๋„ ๋Š๋ ค์งˆ ๋ฟ๋”๋Ÿฌ, ํฐ ์šฉ๋Ÿ‰์œผ๋กœ ์ด๋ฃจ์–ด์ ธ์žˆ๋Š” ์ด๋ฏธ์ง€๋ฅผ ๋กœ๋“œํ•˜๋Š”๋ฐ ๋ฐ์ดํ„ฐ๋„ ๋งŽ์ด ๋“ ๋‹ค๋Š” ๊ฒƒ์ด๋‹ค.

์ด๋ฏธ์ง€ํŒŒ์ผ Webp ํ™•์žฅ์ž๋กœ ๋ณ€ํ™˜

์šฐ์„  api๋กœ ๋ฐ›๋Š” ์ด๋ฏธ์ง€๊ฐ€ ์•„๋‹Œ, ์ง์ ‘ ์ด๋ฏธ์ง€๋ฅผ import ํ•˜์—ฌ์„œ ๊ทธ๋ฆฐ ์ปดํฌ๋„ŒํŠธ์˜ ๋กœ๋”ฉ ๊ธฐ๊ฐ„์„ ๋‹จ์ถ•์‹œํ‚ค๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ๋‹ค.

๊ธฐ์กด ์ด๋ฏธ์ง€ ํŒŒ์ผ์ธ jpg, png ๋“ฑ์€ ์šฉ๋Ÿ‰์ด ์ƒ๋Œ€์ ์œผ๋กœ ํฌ๊ธฐ ๋•Œ๋ฌธ์— ์šฉ๋Ÿ‰์„ ์ค„์ด๊ฒŒ ๋œ๋‹ค๋ฉด ๋ Œ๋”๋ง ์‹œ๊ฐ„์„ ๋‹จ์ถ•์‹œ์ผœ ํผํฌ๋จผ์Šค ์ ์œผ๋กœ ์šฐ์ˆ˜ํ•œ ๋ชจ์Šต์„ ๋ณด์ด๋Š”๋ฐ ๋„์›€์„ ์ค„ ์ˆ˜ ์žˆ๋‹ค. ๋ฐ”๋กœ Webp ํ˜•์‹์œผ๋กœ ๋ณ€ํ™˜ํ•˜์—ฌ ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค!

webp๋ž€

๊ตฌ๊ธ€์—์„œ ๋งŒ๋“  ์ด๋ฏธ์ง€ ํฌ๋งท์œผ๋กœ Web ์—์„œ๋งŒ ์ƒ์šฉ๊ฐ€๋Šฅํ•œ ํŒŒ์ผ ํ˜•์‹์ด๋‹ค.
์ตœ๋Œ€์˜ ์žฅ์ ์€ ์ด๋ฏธ์ง€ ํฌ๋งท (GIF, PNG, JPEG)์„ ๋ชจ๋‘ ์•„์šฐ๋ฅด๋ฉฐ, ์†์‹ค ์••์ถ• (JPEG) ํฌ๋งท๋ณด๋‹ค 30% ์ž‘์€ ์šฉ๋Ÿ‰์œผ๋กœ, ๋น„์†์‹ค ์••์ถœ ํฌ๋งท (PNG, GIF) ๋ณด๋‹ค 20 ~ 30% ์ž‘์€ ์šฉ๋Ÿ‰์˜ ํŒŒ์ผ๋กœ ํ˜•์„ฑ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.

๋‹ค๋งŒ ํ•ด๋‹น ํ™•์žฅ์ž๋ฅผ ์ง€์›ํ•˜์ง€ ์•Š๋Š” ๋ธŒ๋ผ์šฐ์ €, ๊ธฐ๊ธฐ ๋“ฑ์˜ ํ™˜๊ฒฝ์ด ๋ช‡ ์กด์žฌํ•œ๋‹ค๋Š” ๋‹จ์ ์ด ์žˆ๊ธดํ•˜๋‹ค.

ConvertIo

์ด๋ฒˆ์—” ์ด๋ฏธ์ง€ ํ˜•์‹์„ webp๋กœ ๋ณ€ํ™˜ํ•ด๋ณด์ž.
ConvertIo ๋ผ๋Š” ์‚ฌ์ดํŠธ๊ฐ€ ์žˆ๋Š”๋ฐ ๋“ค์–ด๊ฐ€๋ณด๋ฉด ์‰ฝ๊ฒŒ ์•Œ์•„๋ณผ ์ˆ˜ ์žˆ๋‹ค.
๊ทธ๋ž˜์„œ ์ผ๋‹จ ๋‚ด๊ฐ€ ๋ณ€ํ™˜์„ ํ•ด์˜ค๊ธด ํ–ˆ๋‹ค. ์•„๋ž˜ ์‚ฌ์ง„์„ ์ฐธ๊ณ ํ•˜๊ธธ ๋ฐ”๋ž€๋‹ค.

image1.jpg๋ฅผ ์œ„์˜ ConvertIo ์—์„œ ๋ณ€ํ™˜ํ•œ ๊ฒƒ์ด ๋ฐ”๋กœ ์•„๋ž˜์˜ image1.webp ์ด๋‹ค.

๊ทธ๋ฆฌ๊ณ  ํŒŒ์ผ์˜ ์šฐ์ธก์„ ๋ณด๋ฉด 340kb ์ด์˜€๋˜ ํŒŒ์ผ์ด 90.1kb ๊นŒ์ง€ ์ค„์–ด์ง„ ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

import ํ•˜๋Š” ์ด๋ฏธ์ง€๋Š” ์ด๋Ÿฐ ํ˜•์‹์œผ๋กœ ํฌ๊ธฐ๋ฅผ ๋Œ€ํญ ์ค„์ผ ์ˆ˜๊ฐ€ ์žˆ๋‹ค.

์ตœ์ ํ™” ์ง„ํ–‰ํ•ด๋ณด๊ธฐ

์ž ์–ด๋–ป๊ฒŒ ํ•ด์•ผ๋˜๋Š”์ง€ ์•Œ๊ฒŒ๋˜์—ˆ์œผ๋‹ˆ ๋ฐ”๋กœ ํ”„๋กœ์ ํŠธ์— ์ ์šฉํ•ด๋ณด์ž.

์œ„์˜ ์‚ฌ์ง„์€ ๋ฉ”์ธํŽ˜์ด์ง€๋ฅผ ์ด๋ฃจ๊ณ  ์žˆ๋Š” Carousel Slider ์ค‘ jpg ํŒŒ์ผ์„ import ํ•ด์„œ ์ž‘์„ฑํ•œ ์ฝ”๋“œ์˜ ์ผ๋ถ€๋ถ„์ด๋‹ค.

์›๋ž˜๋Š” jpg ์˜ ํ˜•์‹์ด์˜€์œผ๋‚˜, ์œ„์—์„œ ์–ธ๊ธ‰ํ–ˆ๋˜ webp๋กœ ์ „ํ™˜ํ•˜์—ฌ ๋‹ค์‹œ LightHouse๋ฅผ ํ†ตํ•ด ๊ฒ€์‚ฌํ•ด๋ณด์•˜๋‹ค.

์„ฑ๋Šฅ์ด ์กฐ๊ธˆ์ด๋‚˜๋งˆ ์ข‹์•„์กŒ๋‹ค๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.. (๋ฌผ๋ก  52 -> 57 ์ด์ง€๋งŒ..)
์กฐ๊ธˆ ์˜ค๋ฅธ ์ด์œ ๋Š” ์ด๋Ÿฌํ•˜๋‹ค. ํ˜„์žฌ ์ด๋ฏธ์ง€ ํŒŒ์ผ๋“ค์˜ 9ํ•  ์ด์ƒ์ด api์—์„œ ๋”ฐ์˜จ url ์ฃผ์†Œ๋ผ์„œ ์ง์ ‘์ ์œผ๋กœ ๊ด€์—ฌํ•  ์ˆ˜ ์—†๊ธฐ์—, ๊ทธ๋‚˜๋งˆ ๋ณ€ํ˜• ๊ฐ€๋Šฅํ•œ ์ด๋ฏธ์ง€๋“ค๋งŒ ์ฒ˜๋ฆฌํ–ˆ๊ธฐ์— ๊ทธ๋ ‡๋‹ค.

์–ด์จ‹๋“  ์„ฑ๋Šฅ ์ตœ์ ํ™”์˜ 'ใ……' ๋งŒํผ์€ ํ–ˆ๋‹ค๋Š” ๊ฒƒ์— ์˜์˜๋ฅผ ๋‘๋ ค๊ณ ํ•œ๋‹ค.

๋‹ค์Œ ํฌ์ŠคํŠธ์—์„œ๋Š” api๋กœ ๋ถ€ํ„ฐ ๋ฐ›์•„์˜จ ์ด๋ฏธ์ง€ URL์„ ํด๋ผ์ด์–ธํŠธ ์„œ๋ฒ„๋กœ ๋Œ๋ฆด ๋•Œ ์šฉ๋Ÿ‰ ๊ฐ์†Œ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ์•„๋ณธ ๋’ค์— ๋‹ค๋ค„๋ณผ๊นŒ ํ•œ๋‹ค.

์—ฌ๋‹ด

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

๊ณ ๋กœ ํ”„๋กœ์ ํŠธ ์ตœ์ ํ™”๋Š” ์ •๋ง ์–ด๋–ป๊ฒŒ๋ณด๋ฉด ์‹ ์ž… ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋“ค์—๊ฒŒ ๊ฐ•ํ•œ ๊ฒฝ์Ÿ๋ ฅ์„ ์ฃผ๋Š” ์š”์†Œ์ผ์ง€๋„ ๋ชจ๋ฅธ๋‹ค๋Š” ์ƒ๊ฐ์ด ํ™•๊ณ ํ•ด์ ธ๊ฐ„๋‹ค.

์ด ๋ถ€์กฑํ•˜๋”” ๋ถ€์กฑํ•œ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž์˜ ๊ธ€์„ ๋ณธ ์ฃผ๋‹ˆ์–ด๋ถ„๋“ค์€ ์„ฑ๋Šฅ ๊ฐœ์„ ์„ ํ•œ๋ฒˆ ๋‹ค๋ค„๋ณด๊ณ , ๋”๋‚˜์•„๊ฐ€ Github ReadMe์— ๋ณ€๊ฒฝ์ ์„ ํŒจ์น˜๋…ธํŠธ๋กœ ๋ฒ„์ „๊ด€๋ฆฌํ•˜์—ฌ ํ•ด๋‹น ๋ฐฐํฌํ•œ PR์ด๋‚˜ Commit์„ ํƒœ๊ทธ๋กœ ๋‹ฌ์•„๋ณด๋Š” ํ™œ๋™์„ ํ•ด๋ณด๋Š” ๊ฒƒ์„ ์ถ”์ฒœํ•œ๋‹ค.

๋ฌผ๋ก ! ๋‚ด๊ฐ€ ๋ถ™๊ฒŒ๋œ๋‹ค๋ฉด ์‹ ๋น™์„ฑ์ด ์žˆ๋Š” ๋ง์ด ๋˜๊ฒ ์ง€๋งŒ

Webp < AVIF

์ตœ๊ทผ์— ์•Œ๊ฒŒ๋˜์—ˆ๋Š”๋ฐ AVIF ๋ผ๋Š” ํ™•์žฅ์ž๊ฐ€ Webp ๋ณด๋‹ค ์•ฝ 40% ๊ฐ€๋Ÿ‰ ์šฉ๋Ÿ‰์ด ์ž‘๋‹ค.
ํ•˜์ง€๋งŒ ์ตœ์‹ ์— ๋‚˜์˜จ ํ™•์žฅ์ž๋ผ ์•ˆ๋˜๋Š” ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์กด์žฌํ•˜๋‹ˆ ์‚ฌ์šฉ์— ์œ ์˜๋ฅผ ๋‘๋Š” ๊ฒƒ์ด ์ข‹๋‹ค๊ณ  ํ•˜๋„ค์š”~

profile
ํƒœ์–ด๋‚œ ๊น€์— ๋งŽ์€ ๊ฒฝํ—˜์„ ํ•˜๋ ค๊ณ  ์•„๋“ฑ๋ฐ”๋“ฑ ์• ์“ฐ๋Š” ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž

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