๐Ÿ›๏ธ
๋Œ€์™ธํ™œ๋™โ€ข์ปจํผ๋Ÿฐ์Šค

์ธํ”„๋Ÿฐ ์•„ํ‚คํ…์ณ (INFCON 2024)

2024.08.09

์ฒซ ๋ฒˆ์งธ ์„ธ์…˜์— ์ด์–ด ์ธํ”„๋žฉ์˜ CTO ์ด๋™์šฑ๋‹˜์˜ 2024~2025 ์•„ํ‚คํ…์ณ ๋ฐ ์•ž์œผ๋กœ์˜ ๋ฐฉํ–ฅ?์— ๋Œ€ํ•œ ์„ธ์…˜์„ ๋“ค์—ˆ๋‹ค.

์ธํ”„๋Ÿฐ์€ ๊ธ€๋กœ๋ฒŒ ์„œ๋น„์Šค๋ฅผ ์ค€๋น„์ค‘์ธ๋ฐ, ๊ธ€๋กœ๋ฒŒ ์„œ๋น„์Šค๋ฅผ ์ค€๋น„ํ•˜๋ฉด์„œ ๊ฒช์€ ๋ฌธ์ œ๋“ค๊ณผ ํ•ด๊ฒฐ๋ฐฉ๋ฒ•์— ๋Œ€ํ•œ ์ด์•ผ๊ธฐ๋ฅผ ๋“ค์„ ์ˆ˜ ์žˆ์—ˆ๋‹ค.

1. ํŠธ๋ž˜ํ”ฝ ๋น„์šฉ๊ฐœ์„ 

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

์ฒ˜์Œ์—๋Š” ํ™”๋ฉด์— ํ•„์š”ํ•œ ๋งŒํผ๋งŒ ์ด๋ฏธ์ง€๋ฅผ ์ „์†กํ•˜๋„๋ก width๋ฅผ ์ง€์ •ํ–ˆ๋Š”๋ฐ, png๋‚˜ jpeg๋Š” ๋†’์€ ํŒŒ์ผ ํฌ๊ธฐ๋ฅผ ๊ฐ€์ง€๊ธฐ ๋•Œ๋ฌธ์— ๊ทธ ๋งŒํผ์˜ ๋„คํŠธ์›Œํฌ ๋น„์šฉ์ด ๋ฐœ์ƒํ•œ๋‹ค.

png, jpeg๋ณด๋‹ค ๋‚ฎ์€ ํฌ๊ธฐ์˜ ํฌ๋งท์ค‘ ์ตœ๊ทผ์— ๋งŽ์ด ์‚ฌ์šฉ๋˜๋Š” webp๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋„คํŠธ์›Œํฌ ๋น„์šฉ์„ ์ค„์ผ ์ˆ˜ ์žˆ๋Š”๋ฐ, ์ด ๋ณด๋‹ค ๋” ๊ณ ํ™”์งˆ/์ €์šฉ๋Ÿ‰ ํŒŒ์ผ ํฌ๋งท์ธ avif๋ฅผ ์†Œ๊ฐœํ–ˆ๋‹ค.

avif์˜ ์žฅ์ ์€ ๋Œ€๋ถ€๋ถ„์˜ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ง€์›ํ•˜๋ฏ€๋กœ ์›ฌ๋งŒํ•˜๋ฉด ํ˜ธํ™˜์„ฑ์„ ๊ณ ๋ คํ•˜์ง€ ์•Š์•„๋„ ๋œ๋‹ค๊ณ  ํ•œ๋‹ค.

์‚ฌ์šฉ๋ฐฉ๋ฒ•์€ w=380&f=avif ์ฒ˜๋Ÿผ ์‚ฌ์šฉํ•˜๋ฉด๋˜๊ณ  cloudFront์™€ lambda๋ฅผ ํ™œ์šฉํ•˜๊ณ  ์žˆ๋‹ค๊ณ  ํ–ˆ๋‹ค.

๋‘๋ฒˆ์งธ ๋น„์šฉ์ ˆ๊ฐ ๋ฐฉ๋ฒ•์€ ์ธํ”„๋Ÿฐ์˜ ์นดํ…Œ๊ณ ๋ฆฌ ํŽ˜์ด์ง€์˜ ๋ฐ์ดํ„ฐ๋ฅผ db์—์„œ ์ง์ ‘ ๋‚ด๋ ค๋ฐ›์•„ ์‚ฌ์šฉํ–ˆ๋Š”๋ฐ

์ด๋Ÿฌํ•œ ๊ณผ์ •์„ ํ†ตํ•ด ๋น„์šฉ ์ ˆ๊ฐ์„ ํ–ˆ๋‹ค๊ณ  ๋งํ–ˆ๋‹ค.

2. API ํ™˜๊ฒฝ๊ฐœ์„ 

๊ธฐ์กด express๋ฅผ next.js๋กœ ์ด์ฃผํ•˜๋Š” ๊ณผ์ •์—์„œ ๊ฒช์€ ๋ฌธ์ œ์ ๊ณผ ํ•ด๊ฒฐ๋ฐฉ์•ˆ์„ ์†Œ๊ฐœํ–ˆ๋‹ค.

์ธํ”„๋Ÿฐ ํŒ€์€ next.js์˜ config ์ค‘ rewrites์„ ํ™œ์šฉํ•ด์„œ api ํ”„๋ก์‹œ ์„œ๋ฒ„๋ฅผ ์‚ฌ์šฉํ–ˆ๋Š”๋ฐ, ๋ฌธ์ œ์ ์ด ์‚ฌ๋‚ด ๋‚ด๋ถ€์ ์œผ๋กœ๋งŒ ์‚ฌ์šฉํ•˜๋Š” api๋ฅผ rewrites์ด ์™ธ๋ถ€๋กœ ๋Œ๋ฆฌ๋Š” ์ด์Šˆ๊ฐ€ ๋ฐœ์ƒํ–ˆ๋‹ค.

ํ•ด๊ฒฐ๋ฐฉ์•ˆ์œผ๋กœ ์™ธ๋ถ€/๋‚ด๋ถ€ ์ฝ”๋“œ๋ฅผ ๋ถ„๋ฆฌํ•˜๋Š” ๋ฐฉ๋ฒ•๊ณผ ๋‚ด๋ถ€/์™ธ๋ถ€ api ๋ชจ๋‘ ์„ธ์…˜ ์ฒดํฌ๋ฅผ ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋งํ–ˆ๋Š”๋ฐ, ์ „์ž๋Š” ๋ฐฑ์—”๋“œ ์ธํ”„๋ผ๊ฐ€ 2๋ฐฐ๋กœ ์ฆ๊ฐ€ํ•˜๋Š” ๋ฌธ์ œ๊ฐ€ ์žˆ์—ˆ๊ณ  ํ›„์ž๋Š” ์ธํ”„๋ผ ๋ถ€ํ•˜์— ์ฝ”๋“œ ๋ณต์žก๋„๊ฐ€ ์ฆ๊ฐ€ํ•˜๋Š” ๋ฌธ์ œ๊ฐ€ ์žˆ์—ˆ๋‹ค.

๊ฒฐ๊ตญ api์˜ path๋ฅผ ๊ตฌ๋ณ„ํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ–ˆ๋Š”๋ฐ, ํ”„๋ก ํŠธ์—์„  /client prefix๋ฅผ ๋ถ™์—ฌ์„œ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์ด์˜€๋‹ค.

๊ทธ๋Ÿฌ๋‚˜ ์ด ๋ฐฉ๋ฒ•๋˜ํ•œ ๋ฌธ์ œ๊ฐ€ ์žˆ์—ˆ๋Š”๋ฐ, path๊ฐ€ ์ถ”๊ฐ€๋  ์ˆ˜ ๋ก ์œ ์ง€๋ณด์ˆ˜๊ฐ€ ์–ด๋ ค์› ๊ณ , path ๊ด€๋ฆฌ์ˆ˜๊ฐ€ ์ •ํ•ด์ ธ ์žˆ์—ˆ๋‹ค.

๊ฒฐ๊ตญ go๊ธฐ๋ฐ˜์˜ ๋ฏธ๋“ค์›จ์–ด๋ฅผ ์ถ”๊ฐ€ํ–ˆ๊ณ , ์ฟ ํ‚ค ํ—ค๋”์— ๋”ฐ๋ผ ํŠน์ • ๋กœ๋“œ๋ฐธ๋Ÿฐ์„œ๋กœ api๋ฅผ ์š”์ฒญํ•˜๋Š”๊ฒŒ ๊ฐ€๋Šฅํ•ด์กŒ๋‹ค๊ณ  ํ•œ๋‹ค.

ํ›„๊ธฐ

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

์šฐ์„  avif ํฌ๋งท์œผ๋กœ ํŠธ๋ž˜ํ”ฝ ๋น„์šฉ์„ ์ค„์ด๋Š” ๋ฐฉ๋ฒ•๋ถ€ํ„ฐ ์ฐจ๊ทผ์ฐจ๊ทผ ํ† ์ดํ”„๋กœ์ ํŠธ์— ์ ์šฉํ•ด๋ณด๋ ค ํ•œ๋‹ค.