DevTools์ ์๋ ๊ฒ์ฌ๋ฅผ ๋์ด, CI/CD ํ์ดํ๋ผ์ธ์์ ์๋ฐ์คํฌ๋ฆฝํธ ์ฑ๋ฅ ํ๋กํ์ผ๋ง์ ์๋ํํ๊ณ ์ง์์ ์ธ ๋ชจ๋ํฐ๋ง์ ์ค์ ํ์ฌ ๋ชจ๋ ์ฌ์ฉ์์๊ฒ ๋น ๋ฅธ ๊ฒฝํ์ ๋ณด์ฅํ๋ ๋ฐฉ๋ฒ์ ์์ธํ ์๋ดํฉ๋๋ค.
์ ์ ์ ํ์ดํ๋ผ์ธ: ๊ธ๋ก๋ฒ ์ฌ์ฉ์๋ฅผ ์ํ ์๋ฐ์คํฌ๋ฆฝํธ ์ฑ๋ฅ ์๋ํ
๋์งํธ ๊ฒฝ์ ์์ ์๋๋ ๋ง๊ตญ ๊ณตํต์ด์ ๋๋ค. ๋์ฟ, ๋ฐ๋, ์ํ์ธ๋ฃจ์ ์ฌ์ฉ์๋ ๋ชจ๋ ๋น ๋ฅด๊ณ ์ํํ ๋์งํธ ๊ฒฝํ์ด๋ผ๋ ๋์ผํ ๊ธฐ๋๋ฅผ ๊ฐ์ง๊ณ ์์ต๋๋ค. ์น ์ ํ๋ฆฌ์ผ์ด์ ์ด ๋ฒ๋ฒ ๊ฑฐ๋ฆฌ๊ฑฐ๋, ๋ฉ์ถ๊ฑฐ๋, ๋ก๋ํ๋ ๋ฐ ์ ์ด๊ฐ ๊ฑธ๋ฆฐ๋ค๋ฉด, ์ด๋ ๋จ์ํ ๋ถํธํจ์ ๋์ด ๊ทธ ๊ธฐ๋์ ๋ํ ์๋ฐ์ ๋๋ค. ์ด๊ฒ์ด ๋ฐ๋ก ์ฌ์ฉ์ ์ฐธ์ฌ, ์ ํ์จ, ๋ธ๋๋ ํํ์ ์กฐ์ฉํ ํด์น๋ ์ฃผ๋ฒ์ ๋๋ค. ์๋ ๊ฐ ์ฑ๋ฅ ๋ถ์์ ์ฌ์ฉ์๋ค์ด ๋ถํ์ ์์ํ ํ์์ผ Chrome DevTools๋ฅผ ํ์ฌ์ ์ผ๋ก ํ๊ณ ๋๋ ์ฌํ ๋์์ ์ธ ๋ถ์ผ์์ต๋๋ค. ์ง์์ ์ธ ๋ฐฐํฌ์ ๊ธ๋ก๋ฒ ์ฌ์ฉ์ ๊ธฐ๋ฐ์ ์ธ๊ณ์์ ์ด ์ ๊ทผ ๋ฐฉ์์ ๋ ์ด์ ์ง์ ๊ฐ๋ฅํ์ง ์์ต๋๋ค.
์ ์ ์ ํ์ดํ๋ผ์ธ์ ์ธ๊ณ์ ์ค์ ๊ฒ์ ํ์ํฉ๋๋ค. ์ด๊ฒ์ ์๋์ ์ด๊ณ ์์์ ์ธ ์ฑ๋ฅ ๊ฒ์ฌ์์ ์ฒด๊ณ์ ์ด๊ณ ์๋ํ๋ ์ง์์ ์ธ ๋ชจ๋ํฐ๋ง ๋ฐ ์ํ ํ๋ก์ธ์ค๋ก์ ํจ๋ฌ๋ค์ ์ ํ์ ๋๋ค. ์ด๋ ๋จ์ ํ ์คํธ๋ ๋ณด์ ์ค์บ์ฒ๋ผ ์ฑ๋ฅ์ ๊ฐ๋ฐ ๋ผ์ดํ์ฌ์ดํด์ ํต์ฌ ์์น์ผ๋ก ํฌํจ์ํค๋ ๊ฒ์ ๊ดํ ๊ฒ์ ๋๋ค. ์๋ฐ์คํฌ๋ฆฝํธ ์ฑ๋ฅ ํ๋กํ์ผ๋ง์ ์๋ํํจ์ผ๋ก์จ, ์ฑ๋ฅ ์ ํ๊ฐ ํ๋ก๋์ ์ ๋๋ฌํ๊ธฐ ์ ์ ์ก์๋ด๊ณ , ๋ฐ์ดํฐ ๊ธฐ๋ฐ์ ์ต์ ํ ๊ฒฐ์ ์ ๋ด๋ฆฌ๋ฉฐ, ์์น๋ ๊ธฐ๊ธฐ์ ๊ด๊ณ์์ด ๋ชจ๋ ์ฌ์ฉ์๊ฐ ์ต์์ ๊ฒฝํ์ ์ป๋๋ก ๋ณด์ฅํ ์ ์์ต๋๋ค.
์ด ์ข ํฉ ๊ฐ์ด๋๋ ์์ ๋ง์ ์ง์์ ์ธ ์ฑ๋ฅ ๋ชจ๋ํฐ๋ง ํ์ดํ๋ผ์ธ์ ๊ตฌ์ถํ๋ ์ด์ , ๋์, ๊ทธ๋ฆฌ๊ณ ๋ฐฉ๋ฒ์ ๋ํด ์๋ดํ ๊ฒ์ ๋๋ค. ์ฐ๋ฆฌ๋ ๋๊ตฌ๋ค์ ํ์ํ๊ณ , ์ค์ํ ์งํ๋ฅผ ์ ์ํ๋ฉฐ, ์ด๋ฌํ ๊ฒ์ฌ๋ฅผ CI/CD ์ํฌํ๋ก์ฐ์ ์ง์ ํตํฉํ๋ ์ค์ฉ์ ์ธ ์์ ๋ฅผ ์ ๊ณตํ ๊ฒ์ ๋๋ค.
์๋ ํ๋กํ์ผ๋ง์์ ์๋ํ๋ ์ธ์ฌ์ดํธ๋ก: ํ์ฐ์ ์ธ ์งํ
๋๋ถ๋ถ์ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ค์ ๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ์ ๋๊ตฌ์ Performance ํญ๊ณผ Lighthouse ํญ์ ์ต์ํฉ๋๋ค. ์ด๊ฒ๋ค์ ํน์ ํ์ด์ง์ ๋ฌธ์ ๋ฅผ ์ง๋จํ๋ ๋ฐ ๋งค์ฐ ๊ฐ๋ ฅํ ๋๊ตฌ์ ๋๋ค. ํ์ง๋ง ์ด๊ฒ๋ค์๋ง ์์กดํ๋ ๊ฒ์ 1๋ ์ ํ ๋ฒ ๋จ์ผ ์ง์ง๋๋ง ์ ๊ฒํ์ฌ ๊ณ ์ธต ๋น๋ฉ์ ๊ตฌ์กฐ์ ๋ฌด๊ฒฐ์ฑ์ ๋ณด์ฅํ๋ ค๋ ๊ฒ๊ณผ ๊ฐ์ต๋๋ค.
์๋ ํ๋กํ์ผ๋ง์ ํ๊ณ
- ์ ์ ์ ์ด ์๋ ์ฌํ ๋์์ ์ ๋๋ค: ์๋ ๊ฒ์ฌ๋ ์ผ๋ฐ์ ์ผ๋ก ๋ฌธ์ ๊ฐ ์ด๋ฏธ ํ์ธ๋์์ ๋ ๋ฐ์ํฉ๋๋ค. ๋ถ์ ์๋ฐฉํ๋ ๊ฒ์ด ์๋๋ผ, ๋ถ์ ๋๋ ๊ฒ์ ๋๋ค. ๊ฐ๋ฐ์๊ฐ ์๋ ์ ํ๋ฅผ ์กฐ์ฌํ๊ธฐ ์ํด DevTools๋ฅผ ์ด์์ ๋, ์ฌ์ฉ์๋ค์ ์ด๋ฏธ ๊ณ ํต์ ๊ฒช์ ํ์ ๋๋ค.
- ์ผ๊ด์ฑ์ด ์์ต๋๋ค: ๋น ๋ฅธ ์ฌ๋ฌด์ค ๋คํธ์ํฌ์ ์ฐ๊ฒฐ๋ ๊ณ ์ฌ์ ๊ฐ๋ฐ ๋จธ์ ์์ ์ป๋ ๊ฒฐ๊ณผ๋ ์ฐ๊ฒฐ ์ํ๊ฐ ๋ถ์์ ํ ์ง์ญ์ ์ค๊ธ ๋ชจ๋ฐ์ผ ๊ธฐ๊ธฐ์์ ์ฌ์ฉ์๊ฐ ๊ฒฝํํ๋ ๊ฒ๊ณผ ํฌ๊ฒ ๋ค๋ฆ ๋๋ค. ์๋ ํ ์คํธ๋ ํต์ ๋๊ณ ๋ฐ๋ณต ๊ฐ๋ฅํ ํ๊ฒฝ์ด ๋ถ์กฑํฉ๋๋ค.
- ์๊ฐ์ด ๋ง์ด ๊ฑธ๋ฆฌ๊ณ ํ์ฅ ๊ฐ๋ฅํ์ง ์์ต๋๋ค: ์ฒ ์ ํ ์ฑ๋ฅ ํ๋กํ์ผ๋ง์ ์๋นํ ์๊ฐ๊ณผ ์ ๋ฌธ ์ง์์ ํ์๋ก ํฉ๋๋ค. ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ณต์ก์ฑ๊ณผ ํ ๊ท๋ชจ๊ฐ ์ปค์ง์ ๋ฐ๋ผ, ๊ฐ๋ฐ์๊ฐ ๋ชจ๋ ์ปค๋ฐ์ ๋ํด ์๋์ผ๋ก ์ฑ๋ฅ ์ ํ๋ฅผ ๊ฒ์ฌํ๋ ๊ฒ์ ๋ถ๊ฐ๋ฅํด์ง๋๋ค.
- ์ง์์ ์ฌ์ผ๋ก(Silo)๋ฅผ ๋ง๋ญ๋๋ค: ์ข ์ข ํ ๋ด ์์์ '์ฑ๋ฅ ์ฑํผ์ธ'๋ง์ด ๋ณต์กํ ํ๋ ์ ์ฐจํธ์ ์ถ์ ํ์ผ์ ํด์ํ ์ ์๋ ๊น์ ์ ๋ฌธ ์ง์์ ๊ฐ์ง๊ณ ์์ด ์ต์ ํ ๋ ธ๋ ฅ์ ๋ณ๋ชฉ ํ์์ ๋ง๋ญ๋๋ค.
์๋ํ ๋ฐ ์ง์์ ์ธ ๋ชจ๋ํฐ๋ง์ ํด์ผ ํ๋ ์ด์
์ฑ๋ฅ ํ๋กํ์ผ๋ง์ ์๋ํํ๋ฉด ์ผํ์ฑ ๊ฐ์ฌ์์ ์ง์์ ์ธ ํผ๋๋ฐฑ ๋ฃจํ๋ก ์ ํ๋ฉ๋๋ค. CI/CD ์ปจํ ์คํธ์์ ์ข ์ข "ํฉ์ฑ ๋ชจ๋ํฐ๋ง(Synthetic Monitoring)"์ด๋ผ๊ณ ๋ถ๋ฆฌ๋ ์ด ์ ๊ทผ ๋ฐฉ์์ ์ฌ์คํ ์ด์ ์ ์ ๊ณตํฉ๋๋ค.
- ์ฑ๋ฅ ์ ํ๋ฅผ ์กฐ๊ธฐ์ ๋ฐ๊ฒฌํฉ๋๋ค: ๋ชจ๋ ์ปค๋ฐ์ด๋ ํ ๋ฆฌํ์คํธ์ ๋ํด ์ฑ๋ฅ ํ ์คํธ๋ฅผ ์คํํจ์ผ๋ก์จ, ์๋ ์ ํ๋ฅผ ์ ๋ฐํ ์ ํํ ๋ณ๊ฒฝ ์ฌํญ์ ์ฆ์ ์๋ณํ ์ ์์ต๋๋ค. ์ด๋ฌํ "์ฌํํธ ๋ ํํธ(shift left)" ์ ๊ทผ ๋ฐฉ์์ ๋ฌธ์ ํด๊ฒฐ ๋น์ฉ๊ณผ ์๊ฐ์ ๊ธฐํ๊ธ์์ ์ผ๋ก ์ค์ฌ์ค๋๋ค.
- ์ฑ๋ฅ ๊ธฐ์ค์ ์ ์ค์ ํฉ๋๋ค: ์๋ํ๋ฅผ ํตํด ์ ํ๋ฆฌ์ผ์ด์ ์ฑ๋ฅ์ ์ด๋ ฅ ๊ธฐ๋ก์ ๊ตฌ์ถํ ์ ์์ต๋๋ค. ์ด ์ถ์ธ ๋ฐ์ดํฐ๋ ๊ฐ๋ฐ์ ์ฅ๊ธฐ์ ์ธ ์ํฅ์ ์ดํดํ๊ณ ๊ธฐ์ ๋ถ์ฑ์ ๋ํ ์ ๋ณด์ ์ ๊ฐํ ๊ฒฐ์ ์ ๋ด๋ฆฌ๋ ๋ฐ ๋งค์ฐ ์ค์ํฉ๋๋ค.
- ์ฑ๋ฅ ์์ฐ์ ๊ฐ์ ํฉ๋๋ค: ์๋ํ๋ ๋น๋๊ฐ ํต๊ณผํ๊ธฐ ์ํด ์ถฉ์กฑํด์ผ ํ๋ ํต์ฌ ์งํ์ ๋ํ ์๊ณ๊ฐ ์งํฉ์ธ "์ฑ๋ฅ ์์ฐ"์ ์ ์ํ๊ณ ๊ฐ์ ํ๋ ๊ฒ์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค. ๋ง์ฝ ๋ณ๊ฒฝ ์ฌํญ์ผ๋ก ์ธํด ์ต๋ ์ฝํ ์ธ ํ ํ์ธํธ(LCP)๊ฐ 20% ๋๋ ค์ง๋ฉด, ๋น๋๋ ์๋์ผ๋ก ์คํจํ์ฌ ์ฑ๋ฅ ์ ํ๊ฐ ๋ฐฐํฌ๋๋ ๊ฒ์ ๋ง์ ์ ์์ต๋๋ค.
- ์ฑ๋ฅ์ ๋ฏผ์ฃผํํฉ๋๋ค: ์ฑ๋ฅ ํผ๋๋ฐฑ์ด ๊ฐ๋ฐ์์ ๊ธฐ์กด ์ํฌํ๋ก์ฐ(์: ํ ๋ฆฌํ์คํธ์ ๋ํ ๋๊ธ) ๋ด์์ ์๋์ผ๋ก ์ ๋ฌ๋๋ฉด, ๋ชจ๋ ์์ง๋์ด๊ฐ ์ฑ๋ฅ์ ๋ํ ์ฃผ์ธ์์์ ๊ฐ์ง ์ ์๊ฒ ๋ฉ๋๋ค. ๋ ์ด์ ์ ๋ฌธ๊ฐ์ ๋จ๋ ์ฑ ์์ด ์๋๋๋ค.
์ง์์ ์ธ ์ฑ๋ฅ ๋ชจ๋ํฐ๋ง์ ํต์ฌ ๊ฐ๋
๋๊ตฌ๋ฅผ ์ดํด๋ณด๊ธฐ ์ ์, ์ฑ๊ณต์ ์ธ ์ฑ๋ฅ ๋ชจ๋ํฐ๋ง ์ ๋ต์ ๊ธฐ๋ฐ์ ํ์ฑํ๋ ๊ธฐ๋ณธ ๊ฐ๋ ์ ์ดํดํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค.
์ถ์ ํด์ผ ํ ํต์ฌ ์ฑ๋ฅ ์งํ ("๋ฌด์์")
์ธก์ ํ์ง ์๋ ๊ฒ์ ๊ฐ์ ํ ์ ์์ต๋๋ค. ์์ญ ๊ฐ์ ์ ์ฌ์ ์ธ ์งํ๊ฐ ์์ง๋ง, ๋ช ๊ฐ์ง ์ฌ์ฉ์ ์ค์ฌ์ ์งํ์ ์ง์คํ๋ ๊ฒ์ด ๊ฐ์ฅ ํจ๊ณผ์ ์ธ ์ ๋ต์ ๋๋ค. ๊ตฌ๊ธ์ ์ฝ์ด ์น ๋ฐ์ดํ(Core Web Vitals)์ ์ค์ ์ฌ์ฉ์ ๊ฒฝํ์ ์ธก์ ํ๋๋ก ์ค๊ณ๋์๊ธฐ ๋๋ฌธ์ ํ๋ฅญํ ์ถ๋ฐ์ ์ ๋๋ค.
- ์ต๋ ์ฝํ ์ธ ํ ํ์ธํธ(Largest Contentful Paint, LCP): ๋ก๋ฉ ์ฑ๋ฅ์ ์ธก์ ํฉ๋๋ค. ํ์ด์ง ๋ก๋ ํ์๋ผ์ธ์์ ์ฃผ ์ฝํ ์ธ ๊ฐ ๋ก๋๋์์ ๊ฐ๋ฅ์ฑ์ด ์๋ ์์ ์ ํ์ํฉ๋๋ค. ์ข์ LCP๋ 2.5์ด ์ดํ์ ๋๋ค.
- ๋ค์ ํ์ธํธ์ ๋ํ ์ํธ์์ฉ(Interaction to Next Paint, INP): ์ํธ์์ฉ์ฑ์ ์ธก์ ํฉ๋๋ค. INP๋ ์ฌ์ฉ์ ์ํธ์์ฉ์ ๋ํ ํ์ด์ง์ ์ ๋ฐ์ ์ธ ๋ฐ์์ฑ์ ํ๊ฐํฉ๋๋ค. ๋ชจ๋ ํด๋ฆญ, ํญ, ํค๋ณด๋ ์ํธ์์ฉ์ ์ง์ฐ ์๊ฐ์ ๊ด์ฐฐํฉ๋๋ค. ์ข์ INP๋ 200๋ฐ๋ฆฌ์ด ๋ฏธ๋ง์ ๋๋ค. (INP๋ 2024๋ 3์์ ์ต์ด ์ ๋ ฅ ์ง์ฐ(FID)์ ๋์ฒดํ์ฌ ์ฝ์ด ์น ๋ฐ์ดํ์ด ๋์์ต๋๋ค).
- ๋์ ๋ ์ด์์ ์ด๋(Cumulative Layout Shift, CLS): ์๊ฐ์ ์์ ์ฑ์ ์ธก์ ํฉ๋๋ค. ์ฌ์ฉ์๊ฐ ๊ฒฝํํ๋ ์๊ธฐ์น ์์ ๋ ์ด์์ ์ด๋์ ์์ ์ ๋ํํฉ๋๋ค. ์ข์ CLS ์ ์๋ 0.1 ์ดํ์ ๋๋ค.
์ฝ์ด ์น ๋ฐ์ดํ ์ธ์ ๋ค๋ฅธ ์ค์ํ ์งํ๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ์ต์ด ๋ฐ์ดํธ๊น์ง์ ์๊ฐ(Time to First Byte, TTFB): ์๋ฒ ์๋ต ์๊ฐ์ ์ธก์ ํฉ๋๋ค. ๋๋ฆฐ TTFB๋ ๋ชจ๋ ํ์ ์งํ์ ๋ถ์ ์ ์ธ ์ํฅ์ ๋ฏธ์น๊ธฐ ๋๋ฌธ์ ๊ธฐ์ด์ ์ธ ์งํ์ ๋๋ค.
- ์ต์ด ์ฝํ ์ธ ํ ํ์ธํธ(First Contentful Paint, FCP): DOM ์ฝํ ์ธ ์ ์ฒซ ๋ถ๋ถ์ด ๋ ๋๋ง๋๋ ์๊ฐ์ ํ์ํฉ๋๋ค. ์ฌ์ฉ์์๊ฒ ํ์ด์ง๊ฐ ์ค์ ๋ก ๋ก๋ฉ๋๊ณ ์๋ค๋ ์ฒซ ๋ฒ์งธ ํผ๋๋ฐฑ์ ์ ๊ณตํฉ๋๋ค.
- ์ด ์ฐจ๋จ ์๊ฐ(Total Blocking Time, TBT): FCP์ ์ํธ์์ฉ ๊ฐ๋ฅ ์๊ฐ(TTI) ์ฌ์ด์์ ๋ฉ์ธ ์ค๋ ๋๊ฐ ์ ๋ ฅ ๋ฐ์์ฑ์ ๋ง์ ๋งํผ ์ถฉ๋ถํ ๊ธธ๊ฒ ์ฐจ๋จ๋ ์ด ์๊ฐ์ ์ธก์ ํฉ๋๋ค. INP์ ์๊ด๊ด๊ณ๊ฐ ๋์ ํ๋ฅญํ ๋ฉ(lab) ํ๊ฒฝ ์งํ์ ๋๋ค.
์ฑ๋ฅ ์์ฐ ์ค์ ํ๊ธฐ ("์")
์ฑ๋ฅ ์์ฐ์ ํ์ด ๊ทธ ์์์ ์์ ํ๊ธฐ๋ก ํฉ์ํ ๋ช ํํ ์ ์ฝ ์กฐ๊ฑด ์งํฉ์ ๋๋ค. ์ด๊ฒ์ ๋จ์ง ๋ชฉํ๊ฐ ์๋๋ผ ์๊ฒฉํ ํ๊ณ์ ๋๋ค. ์์ฐ์ ์ฑ๋ฅ์ "๋น ๋ฅด๊ฒ ๋ง๋ค์"๋ผ๋ ๋ชจํธํ ๋ชฉํ์์ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ํ ๊ตฌ์ฒด์ ์ด๊ณ ์ธก์ ๊ฐ๋ฅํ ์๊ตฌ ์ฌํญ์ผ๋ก ์ ํ์ํต๋๋ค.
๊ฐ๋จํ ์ฑ๋ฅ ์์ฐ์ ๋ค์๊ณผ ๊ฐ์ ์ ์์ต๋๋ค:
- LCP๋ 2.5์ด ๋ฏธ๋ง์ด์ด์ผ ํฉ๋๋ค.
- TBT๋ 200๋ฐ๋ฆฌ์ด ๋ฏธ๋ง์ด์ด์ผ ํฉ๋๋ค.
- ์ด ์๋ฐ์คํฌ๋ฆฝํธ ๋ฒ๋ค ํฌ๊ธฐ๋ 250KB(gzipped)๋ฅผ ์ด๊ณผํด์๋ ์ ๋ฉ๋๋ค.
- Lighthouse ์ฑ๋ฅ ์ ์๋ 90์ ์ด์์ด์ด์ผ ํฉ๋๋ค.
์ด๋ฌํ ํ๊ณ๋ฅผ ์ ์ํจ์ผ๋ก์จ, ์๋ํ๋ ํ์ดํ๋ผ์ธ์ ๋ช ํํ ํต๊ณผ/์คํจ ๊ธฐ์ค์ ๊ฐ๊ฒ ๋ฉ๋๋ค. ๋ง์ฝ ํ ๋ฆฌํ์คํธ๋ก ์ธํด Lighthouse ์ ์๊ฐ 85์ ์ผ๋ก ๋จ์ด์ง๋ฉด, CI ๊ฒ์ฌ๋ ์คํจํ๊ณ ๊ฐ๋ฐ์๋ ์ฝ๋๊ฐ ๋ณํฉ๋๊ธฐ ์ ์ ์ฆ์ ์๋ฆผ์ ๋ฐ์ต๋๋ค.
์ฑ๋ฅ ๋ชจ๋ํฐ๋ง ํ์ดํ๋ผ์ธ ("์ด๋ป๊ฒ")
์ผ๋ฐ์ ์ธ ์๋ํ๋ ์ฑ๋ฅ ํ์ดํ๋ผ์ธ์ ๋ค์ ๋จ๊ณ๋ฅผ ๋ฐ๋ฆ ๋๋ค:
- ํธ๋ฆฌ๊ฑฐ: ๊ฐ๋ฐ์๊ฐ ๋ฒ์ ๊ด๋ฆฌ ์์คํ (์: Git)์ ์๋ก์ด ์ฝ๋๋ฅผ ์ปค๋ฐํฉ๋๋ค.
- ๋น๋: CI/CD ์๋ฒ(์: GitHub Actions, Jenkins, GitLab CI)๊ฐ ์ฝ๋๋ฅผ ์ฒดํฌ์์ํ๊ณ ์ ํ๋ฆฌ์ผ์ด์ ๋น๋ ํ๋ก์ธ์ค๋ฅผ ์คํํฉ๋๋ค.
- ๋ฐฐํฌ ๋ฐ ํ ์คํธ: ์ ํ๋ฆฌ์ผ์ด์ ์ด ์์ ์คํ ์ด์ง ๋๋ ํ๋ฆฌ๋ทฐ ํ๊ฒฝ์ ๋ฐฐํฌ๋ฉ๋๋ค. ๊ทธ๋ฐ ๋ค์ ์๋ํ๋ ๋๊ตฌ๊ฐ ์ด ํ๊ฒฝ์ ๋ํด ์ฑ๋ฅ ํ ์คํธ ์ค์ํธ๋ฅผ ์คํํฉ๋๋ค.
- ๋ถ์ ๋ฐ ๋จ์ธ: ๋๊ตฌ๋ ์ฑ๋ฅ ์งํ๋ฅผ ์์งํ๊ณ ๋ฏธ๋ฆฌ ์ ์๋ ์ฑ๋ฅ ์์ฐ๊ณผ ๋น๊ตํฉ๋๋ค.
- ๋ณด๊ณ ๋ฐ ์กฐ์น: ์์ฐ์ด ์ถฉ์กฑ๋๋ฉด ๊ฒ์ฌ๋ ํต๊ณผํฉ๋๋ค. ๊ทธ๋ ์ง ์์ผ๋ฉด ๋น๋๋ ์คํจํ๊ณ , ์ฑ๋ฅ ์ ํ๋ฅผ ์ค๋ช ํ๋ ์์ธ ๋ณด๊ณ ์์ ํจ๊ป ํ์ ๊ฒฝ๊ณ ๊ฐ ์ ์ก๋ฉ๋๋ค.
์๋ํ๋ ์๋ฐ์คํฌ๋ฆฝํธ ํ๋กํ์ผ๋ง์ ์ํ ์ต์ ํดํท
๋ช ๊ฐ์ง ํ๋ฅญํ ์คํ ์์ค ๋๊ตฌ๋ค์ด ํ๋ ์ฑ๋ฅ ์๋ํ์ ์ค์ถ๋ฅผ ํ์ฑํฉ๋๋ค. ๊ฐ์ฅ ์ ๋ช ํ ๊ฒ๋ค์ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
Playwright์ Puppeteer๋ฅผ ์ด์ฉํ ๋ธ๋ผ์ฐ์ ์๋ํ
Playwright(Microsoft ์ ์)์ Puppeteer(Google ์ ์)๋ ํค๋๋ฆฌ์ค Chrome, Firefox, WebKit ๋ธ๋ผ์ฐ์ ๋ฅผ ์ ์ดํ๋ ๊ณ ์์ค API๋ฅผ ์ ๊ณตํ๋ Node.js ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋๋ค. ์ข ์ข ์๋ํฌ์๋ ํ ์คํธ์ ์ฌ์ฉ๋์ง๋ง, ์ฑ๋ฅ ํ๋กํ์ผ๋ง์๋ ๊ฒฝ์ด์ ์ ๋๋ค.
์ด๋ฅผ ์ฌ์ฉํ์ฌ ๋ณต์กํ ์ฌ์ฉ์ ์ํธ์์ฉ์ ์คํฌ๋ฆฝํ ํ๊ณ DevTools์์ ๋ถ์ํ ์ ์๋ ์์ธํ ์ฑ๋ฅ ์ถ์ ์ ์์งํ ์ ์์ต๋๋ค. ์ด๋ ์ด๊ธฐ ํ์ด์ง ๋ก๋๋ฟ๋ง ์๋๋ผ ํน์ ์ฌ์ฉ์ ์ฌ์ ์ ์ฑ๋ฅ์ ์ธก์ ํ๋ ๋ฐ ์๋ฒฝํฉ๋๋ค.
๋ค์์ Playwright๋ฅผ ์ฌ์ฉํ์ฌ ์ฑ๋ฅ ์ถ์ ํ์ผ์ ์์ฑํ๋ ๊ฐ๋จํ ์์ ๋๋ค:
์์ : Playwright๋ก ์ถ์ ํ์ผ ์์ฑํ๊ธฐ
const { chromium } = require('playwright');(async () => {const browser = await chromium.launch({ headless: true });const page = await browser.newPage();// ํ์ผ์ ์ ์ฅํ๋ฉฐ ์ถ์ ์์await page.tracing.start({ path: 'performance-trace.json', screenshots: true });await page.goto('https://your-app.com/dashboard');// ํน์ ์ก์ ์ ํ๋กํ์ผ๋งํ๊ธฐ ์ํด ํ์ด์ง์ ์ํธ์์ฉawait page.click('button#load-data-button');await page.waitForSelector('.data-grid-loaded'); // ๊ฒฐ๊ณผ ๋๊ธฐ// ์ถ์ ์ค์งawait page.tracing.stop();await browser.close();console.log('Performance trace saved to performance-trace.json');})();
๊ทธ๋ฐ ๋ค์ `performance-trace.json` ํ์ผ์ Chrome DevTools์ Performance ํจ๋์ ๋ก๋ํ์ฌ ํด๋น ์ฌ์ฉ์ ์ํธ์์ฉ ๋์ ๋ฐ์ํ ์ผ์ ๋ํ ํ๋ถํ ํ๋ ์๋ณ ๋ถ์์ ํ ์ ์์ต๋๋ค. ์ด๊ฒ์ ๊ฐ๋ ฅํ ์ง๋จ ๋๊ตฌ์ด์ง๋ง, ์๋ํ๋ ๋จ์ธ์ ์ํด์๋ ๋ ๋ค๋ฅธ ๊ณ์ธต์ด ํ์ํฉ๋๋ค: Lighthouse์ ๋๋ค.
์ข ํฉ์ ์ธ ๊ฐ์ฌ๋ฅผ ์ํ Google Lighthouse ํ์ฉ
Lighthouse๋ ์น ํ์ด์ง ํ์ง์ ๊ฐ์ฌํ๊ธฐ ์ํ ์ฐ์ ํ์ค ์คํ ์์ค ๋๊ตฌ์ ๋๋ค. ํ์ด์ง์ ๋ํด ์ผ๋ จ์ ํ ์คํธ๋ฅผ ์คํํ๊ณ ์ฑ๋ฅ, ์ ๊ทผ์ฑ, ๋ชจ๋ฒ ์ฌ๋ก ๋ฐ SEO์ ๋ํ ๋ณด๊ณ ์๋ฅผ ์์ฑํฉ๋๋ค. ์ฐ๋ฆฌ ํ์ดํ๋ผ์ธ์์ ๊ฐ์ฅ ์ค์ํ ๊ฒ์ ํ๋ก๊ทธ๋๋ฐ ๋ฐฉ์์ผ๋ก ์คํํ๊ณ ์ฑ๋ฅ ์์ฐ์ ๊ฐ์ ํ๋๋ก ๊ตฌ์ฑํ ์ ์๋ค๋ ๊ฒ์ ๋๋ค.
Lighthouse๋ฅผ CI/CD ํ์ดํ๋ผ์ธ์ ํตํฉํ๋ ๊ฐ์ฅ ์ข์ ๋ฐฉ๋ฒ์ Lighthouse CI๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ ๋๋ค. ์ด๋ Lighthouse ์คํ, ์์ฐ์ ๋ํ ๊ฒฐ๊ณผ ๋จ์ธ, ์๊ฐ ๊ฒฝ๊ณผ์ ๋ฐ๋ฅธ ์ ์ ์ถ์ ์ ๋จ์ํํ๋ ๋๊ตฌ ๋ชจ์์ ๋๋ค.
์์ํ๋ ค๋ฉด ํ๋ก์ ํธ ๋ฃจํธ์ `lighthouserc.js`๋ผ๋ ๊ตฌ์ฑ ํ์ผ์ ๋ง๋ญ๋๋ค:
์์ : lighthouserc.js ๊ตฌ์ฑ
module.exports = {ci: {collect: {// ์ต์ 1: ๋ผ์ด๋ธ URL์ ๋ํด ์คํ// url: ['https://staging.your-app.com'],// ์ต์ 2: ๋ก์ปฌ์์ ์ ๊ณต๋๋ ๋น๋ ์ถ๋ ฅ์ ๋ํด ์คํstaticDistDir: './build',startServerCommand: 'npm run start:static',},assert: {preset: 'lighthouse:recommended', // ํฉ๋ฆฌ์ ์ธ ๊ธฐ๋ณธ๊ฐ์ผ๋ก ์์assertions: {// ์ฌ์ฉ์ ์ ์ ๋จ์ธ (์ฑ๋ฅ ์์ฐ)'categories:performance': ['error', { minScore: 0.9 }], // ์ ์๋ 90 ์ด์์ด์ด์ผ ํจ'categories:accessibility': ['warn', { minScore: 0.95 }], // ์ ์๋ 95 ์ด์์ด์ด์ผ ํจ'core-web-vitals/largest-contentful-paint': ['error', { maxNumericValue: 2500 }],'core-web-vitals/total-blocking-time': ['error', { maxNumericValue: 200 }],},},upload: {target: 'temporary-public-storage', // ์์ํ๊ธฐ ๊ฐ์ฅ ์ฌ์ด ๋ฐฉ๋ฒ},},};
์ด ๊ตฌ์ฑ์ ์ฌ์ฉํ์ฌ ์ปค๋งจ๋ ๋ผ์ธ์ด๋ CI ์คํฌ๋ฆฝํธ์์ `lhci autorun`์ ์คํํ ์ ์์ต๋๋ค. ๊ทธ๋ฌ๋ฉด ์๋ฒ๊ฐ ์๋์ผ๋ก ์์๋๊ณ , ์์ ์ฑ์ ์ํด Lighthouse๋ฅผ ์ฌ๋ฌ ๋ฒ ์คํํ๋ฉฐ, ๊ฒฐ๊ณผ๋ฅผ ๋จ์ธ๊ณผ ๋น๊ตํ๊ณ , ์์ฐ์ด ์ถฉ์กฑ๋์ง ์์ผ๋ฉด ์คํจํฉ๋๋ค.
ํฉ์ฑ ๋ชจ๋ํฐ๋ง vs. ์ค์ ์ฌ์ฉ์ ๋ชจ๋ํฐ๋ง (RUM)
๋ ๊ฐ์ง ์ฃผ์ ์ ํ์ ์ฑ๋ฅ ๋ชจ๋ํฐ๋ง ๊ฐ์ ์ฐจ์ด์ ์ ์ดํดํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค.
- ํฉ์ฑ ๋ชจ๋ํฐ๋ง (Lab ๋ฐ์ดํฐ): ์ด๊ฒ์ด ์ฐ๋ฆฌ๊ฐ ๋ ผ์ํด ์จ ๊ฒ์ ๋๋คโํต์ ๋๊ณ ์ผ๊ด๋ ํ๊ฒฝ("๋ฉ")์์ ์๋ํ๋ ํ ์คํธ๋ฅผ ์คํํ๋ ๊ฒ์ ๋๋ค. ์ฝ๋ ๋ณ๊ฒฝ์ ์ํฅ์ ๋ถ๋ฆฌํ๊ธฐ ๋๋ฌธ์ CI/CD์ ์๋ฒฝํฉ๋๋ค. ๋คํธ์ํฌ ์๋, ์ฅ์น ์ ํ ๋ฐ ์์น๋ฅผ ์ ์ดํฉ๋๋ค. ๊ฐ์ ์ ์ผ๊ด์ฑ๊ณผ ์ฑ๋ฅ ์ ํ ๊ฐ์ง์ ๋๋ค.
- ์ค์ ์ฌ์ฉ์ ๋ชจ๋ํฐ๋ง (RUM) (Field ๋ฐ์ดํฐ): ์ด๊ฒ์ ์ ์ธ๊ณ ์ฌ์ฉ์๋ค์ ์ค์ ๋ธ๋ผ์ฐ์ ("ํ๋")์์ ์ฑ๋ฅ ๋ฐ์ดํฐ๋ฅผ ์์งํ๋ ๊ฒ์ ํฌํจํฉ๋๋ค. RUM ๋๊ตฌ(Sentry, Datadog ๋๋ New Relic ๋ฑ)๋ ์ฌ์ดํธ์ ์์ ์๋ฐ์คํฌ๋ฆฝํธ ์ค๋ํซ์ ์ฌ์ฉํ์ฌ ์ค์ ์ฌ๋๋ค์ด ๊ฒฝํํ๋ ์ฝ์ด ์น ๋ฐ์ดํ ๋ฐ ๊ธฐํ ์งํ๋ฅผ ๋ณด๊ณ ํฉ๋๋ค. ๊ฐ์ ์ ์๋ง์ ์ฅ์น ๋ฐ ๋คํธ์ํฌ ์กฐํฉ์ ๊ฑธ์น ๊ธ๋ก๋ฒ ์ฌ์ฉ์ ๊ฒฝํ์ ์ค์ ๊ทธ๋ฆผ์ ์ ๊ณตํ๋ ๊ฒ์ ๋๋ค.
๋์ ์ํธ ๋ฐฐํ์ ์ด์ง ์์ผ๋ฉฐ, ์ํธ ๋ณด์์ ์ ๋๋ค. CI/CD ํ์ดํ๋ผ์ธ์์ ํฉ์ฑ ๋ชจ๋ํฐ๋ง์ ์ฌ์ฉํ์ฌ ์ฑ๋ฅ ์ ํ๊ฐ ๋ฐฐํฌ๋๋ ๊ฒ์ ๋ฐฉ์งํ์ญ์์ค. ํ๋ก๋์ ์์ RUM์ ์ฌ์ฉํ์ฌ ์ค์ ์ฌ์ฉ์ ๊ฒฝํ์ ์ดํดํ๊ณ ๋ฉ ํ ์คํธ๊ฐ ๋์น ์ ์๋ ๊ฐ์ ์์ญ์ ์๋ณํ์ญ์์ค.
CI/CD ํ์ดํ๋ผ์ธ์ ์ฑ๋ฅ ํ๋กํ์ผ๋ง ํตํฉํ๊ธฐ
์ด๋ก ์ ํ๋ฅญํ์ง๋ง, ์ค์ ๊ตฌํ์ด ์ค์ํฉ๋๋ค. GitHub Actions ์ํฌํ๋ก์ฐ ๋ด์์ Lighthouse CI๋ฅผ ์ฌ์ฉํ์ฌ ๊ฐ๋จํ ์ฑ๋ฅ ๊ฒ์ฌ๋ฅผ ๋ง๋ค์ด ๋ด ์๋ค.
GitHub Actions๋ฅผ ์ฌ์ฉํ ์ค์ฉ์ ์ธ ์์
์ด ์ํฌํ๋ก์ฐ๋ ๋ชจ๋ ํ ๋ฆฌํ์คํธ์์ ์คํ๋ฉ๋๋ค. ์ ํ๋ฆฌ์ผ์ด์ ์ ๋น๋ํ๊ณ , ๊ทธ์ ๋ํด Lighthouse CI๋ฅผ ์คํํ๋ฉฐ, ๊ฒฐ๊ณผ๋ฅผ ํ ๋ฆฌํ์คํธ์ ๋๊ธ๋ก ๊ฒ์ํฉ๋๋ค.
`.github/workflows/performance-ci.yml`์ ํ์ผ์ ๋ง๋ญ๋๋ค:
์์ : .github/workflows/performance-ci.yml
name: Performance CIon: [pull_request]jobs:lighthouse:runs-on: ubuntu-lateststeps:- uses: actions/checkout@v3- name: Use Node.js 20.xuses: actions/setup-node@v3with:node-version: '20.x'cache: 'npm'- name: Install dependenciesrun: npm ci- name: Build production assetsrun: npm run build- name: Run Lighthouse CIrun: |npm install -g @lhci/cli@0.12.xlhci autorunenv:LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
์ด๊ฒ์ด ์๋ํ๋ ค๋ฉด ๋ ๊ฐ์ง๊ฐ ํ์ํฉ๋๋ค:
- ์ด์ ์น์ ์์ ๋ณด์ฌ์ค ๊ฒ์ฒ๋ผ ๋ฆฌํฌ์งํ ๋ฆฌ์ `lighthouserc.js` ํ์ผ์ด ์์ด์ผ ํฉ๋๋ค.
- ๋ฆฌํฌ์งํ ๋ฆฌ์ Lighthouse CI GitHub ์ฑ์ด ์ค์น๋์ด ์์ด์ผ ํฉ๋๋ค. ์ด๋ฅผ ํตํด Lighthouse CI๊ฐ ๋๊ธ๊ณผ ์ํ ํ์ธ์ ๊ฒ์ํ ์ ์์ต๋๋ค. ์ค์น ์ค์ ํ ํฐ(`LHCI_GITHUB_APP_TOKEN`)์ ๋ฐ๊ฒ ๋๋ฉฐ, ์ด๋ฅผ GitHub ๋ฆฌํฌ์งํ ๋ฆฌ ์ค์ ์ ์ํฌ๋ฆฟ์ผ๋ก ์ ์ฅํด์ผ ํฉ๋๋ค.
์ด์ ๊ฐ๋ฐ์๊ฐ ํ ๋ฆฌํ์คํธ๋ฅผ ์ด๋ฉด ์ํ ํ์ธ์ด ๋ํ๋ฉ๋๋ค. ์ฑ๋ฅ ์์ฐ์ด ์คํจํ๋ฉด ํ์ธ์ ๋นจ๊ฐ์์ผ๋ก ํ์๋ฉ๋๋ค. Lighthouse ์ ์์ ํจ๊ป ์ด๋ค ์งํ๊ฐ ์ ํ๋์๋์ง ์ ํํ๊ฒ ๋ณด์ฌ์ฃผ๋ ์์ธํ ๋๊ธ์ด ๊ฒ์๋ฉ๋๋ค.
์ฑ๋ฅ ๋ฐ์ดํฐ ์ ์ฅ ๋ฐ ์๊ฐํ
`temporary-public-storage`๋ ์์ํ๊ธฐ์ ์ข์ง๋ง, ์ฅ๊ธฐ์ ์ธ ๋ถ์์ ์ํด์๋ Lighthouse ๋ณด๊ณ ์๋ฅผ ์ ์ฅํ๊ณ ์ถ์ ๊ฒ์ ๋๋ค. Lighthouse CI ์๋ฒ๋ ์ง์ ํธ์คํ ํ ์ ์๋ ๋ฌด๋ฃ ์คํ ์์ค ์๋ฃจ์ ์ ๋๋ค. ์๊ฐ ๊ฒฝ๊ณผ์ ๋ฐ๋ฅธ ์ฑ๋ฅ ์ถ์ธ๋ฅผ ์๊ฐํํ๊ณ , ๋ธ๋์น ๊ฐ ๋ณด๊ณ ์๋ฅผ ๋น๊ตํ๋ฉฐ, ๋จ์ผ ์คํ์์ ๋์น ์ ์๋ ์ ์ง์ ์ธ ์ฑ๋ฅ ์ ํ๋ฅผ ์๋ณํ๋ ๋์๋ณด๋๋ฅผ ์ ๊ณตํฉ๋๋ค.
`lighthouserc.js`๋ฅผ ์์ฒด ์๋ฒ์ ์ ๋ก๋ํ๋๋ก ๊ตฌ์ฑํ๋ ๊ฒ์ ๊ฐ๋จํฉ๋๋ค. ์ด ์ด๋ ฅ ๋ฐ์ดํฐ๋ ํ์ดํ๋ผ์ธ์ ๋จ์ํ ๊ฒ์ดํธํคํผ์์ ๊ฐ๋ ฅํ ๋ถ์ ๋๊ตฌ๋ก ์ ํ์ํต๋๋ค.
๊ฒฝ๊ณ ๋ฐ ๋ณด๊ณ
ํผ์ฆ์ ๋ง์ง๋ง ์กฐ๊ฐ์ ํจ๊ณผ์ ์ธ ์ปค๋ฎค๋์ผ์ด์ ์ ๋๋ค. ์คํจํ ๋น๋๋ ์ ์ ํ ์ฌ๋๋ค์ด ์ ์ํ๊ฒ ์๋ฆผ์ ๋ฐ์ ๋๋ง ์ ์ฉํฉ๋๋ค. GitHub ์ํ ํ์ธ ์ธ์๋ ํ์ ์ฃผ์ ์ปค๋ฎค๋์ผ์ด์ ์ฑ๋(์: Slack ๋๋ Microsoft Teams)์ ๊ฒฝ๊ณ ๋ฅผ ์ค์ ํ๋ ๊ฒ์ ๊ณ ๋ คํ์ญ์์ค. ์ข์ ๊ฒฝ๊ณ ์๋ ๋ค์์ด ํฌํจ๋์ด์ผ ํฉ๋๋ค:
- ์คํจ๋ฅผ ์ ๋ฐํ ํน์ ํ ๋ฆฌํ์คํธ ๋๋ ์ปค๋ฐ.
- ์ด๋ค ์ฑ๋ฅ ์งํ๊ฐ ์์ฐ์ ์ผ๋ง๋ ์๋ฐํ๋์ง.
- ์ฌ์ธต ๋ถ์์ ์ํ ์ ์ฒด Lighthouse ๋ณด๊ณ ์์ ๋ํ ์ง์ ๋งํฌ.
๊ณ ๊ธ ์ ๋ต ๋ฐ ๊ธ๋ก๋ฒ ๊ณ ๋ ค ์ฌํญ
๊ธฐ๋ณธ ํ์ดํ๋ผ์ธ์ด ์ค๋น๋๋ฉด, ๊ธ๋ก๋ฒ ์ฌ์ฉ์ ๊ธฐ๋ฐ์ ๋ ์ ๋ฐ์ํ๋๋ก ํฅ์์ํฌ ์ ์์ต๋๋ค.
๋ค์ํ ๋คํธ์ํฌ ๋ฐ CPU ์กฐ๊ฑด ์๋ฎฌ๋ ์ด์
๋ชจ๋ ์ฌ์ฉ์๊ฐ ๊ณ ์ฌ์ ํ๋ก์ธ์์ ๊ด์ฌ์ ์ฐ๊ฒฐ์ ์ฌ์ฉํ๋ ๊ฒ์ ์๋๋๋ค. ๋ ํ์ค์ ์ธ ์กฐ๊ฑด์์ ํ ์คํธํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. Lighthouse์๋ ๊ธฐ๋ณธ์ ์ผ๋ก ๋๋ฆฐ ๋คํธ์ํฌ์ CPU๋ฅผ ์๋ฎฌ๋ ์ด์ ํ๋ ๋ด์ฅ๋ ์ค๋กํ๋ง ๊ธฐ๋ฅ์ด ์์ต๋๋ค(4G ์ฐ๊ฒฐ์ ์ค๊ธ ๋ชจ๋ฐ์ผ ์ฅ์น ์๋ฎฌ๋ ์ด์ ).
Lighthouse ๊ตฌ์ฑ์์ ์ด๋ฌํ ์ค์ ์ ์ฌ์ฉ์ ์ ์ํ์ฌ ๋ค์ํ ์๋๋ฆฌ์ค๋ฅผ ํ ์คํธํ ์ ์์ผ๋ฉฐ, ์ธํฐ๋ท ์ธํ๋ผ๊ฐ ๋ ๋ฐ๋ฌ๋ ์์ฅ์ ๊ณ ๊ฐ๋ค๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฌ์ฉํ ์ ์๋๋ก ๋ณด์ฅํ ์ ์์ต๋๋ค.
ํน์ ์ฌ์ฉ์ ์ฌ์ ํ๋กํ์ผ๋ง
์ด๊ธฐ ํ์ด์ง ๋ก๋๋ ์ฌ์ฉ์ ๊ฒฝํ์ ์ผ๋ถ์ผ ๋ฟ์ ๋๋ค. ์ฅ๋ฐ๊ตฌ๋์ ํญ๋ชฉ์ ์ถ๊ฐํ๊ฑฐ๋, ๊ฒ์ ํํฐ๋ฅผ ์ฌ์ฉํ๊ฑฐ๋, ์์์ ์ ์ถํ๋ ์ฑ๋ฅ์ ์ด๋ป์ต๋๊น? Playwright์ Lighthouse์ ํ์ ๊ฒฐํฉํ์ฌ ์ด๋ฌํ ์ค์ํ ์ํธ์์ฉ์ ํ๋กํ์ผ๋งํ ์ ์์ต๋๋ค.
์ผ๋ฐ์ ์ธ ํจํด์ Playwright ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํ์ฌ ์ ํ๋ฆฌ์ผ์ด์ ์ ํน์ ์ํ(์: ๋ก๊ทธ์ธ, ์ฅ๋ฐ๊ตฌ๋์ ํญ๋ชฉ ์ถ๊ฐ)๋ก ์ด๋์ํจ ๋ค์, ํด๋น ํ์ด์ง ์ํ์์ ๊ฐ์ฌ๋ฅผ ์คํํ๋๋ก Lighthouse์ ์ ์ด๊ถ์ ๋๊ฒจ์ฃผ๋ ๊ฒ์ ๋๋ค. ์ด๋ ์ ํ๋ฆฌ์ผ์ด์ ์ฑ๋ฅ์ ๋ํ ํจ์ฌ ๋ ์ ์ฒด์ ์ธ ์๊ฐ์ ์ ๊ณตํฉ๋๋ค.
๊ฒฐ๋ก : ์ฑ๋ฅ์ ๋ฌธํ ๊ตฌ์ถํ๊ธฐ
์๋ฐ์คํฌ๋ฆฝํธ ์ฑ๋ฅ ๋ชจ๋ํฐ๋ง ์๋ํ๋ ๋จ์ํ ๋๊ตฌ์ ์คํฌ๋ฆฝํธ์ ๊ดํ ๊ฒ์ด ์๋๋๋ค. ์ฑ๋ฅ์ด ๊ณต๋์ ์ฑ ์์ธ ๋ฌธํ๋ฅผ ์กฐ์ฑํ๋ ๊ฒ์ ๋๋ค. ์ฑ๋ฅ์ด ์ธก์ ๊ฐ๋ฅํ๊ณ ํํํ ์ ์๋ ์ผ๊ธ ๊ธฐ๋ฅ์ผ๋ก ์ทจ๊ธ๋ ๋, ๊ทธ๊ฒ์ ๋์ค์ ์๊ฐํ ๊ฑฐ๋ฆฌ๊ฐ ์๋๋ผ ๊ฐ๋ฐ ํ๋ก์ธ์ค์ ํ์์ ์ธ ๋ถ๋ถ์ด ๋ฉ๋๋ค.
์ฌํ ๋์์ ์ธ ์๋ ์ ๊ทผ ๋ฐฉ์์์ ์ ์ ์ ์ด๊ณ ์๋ํ๋ ํ์ดํ๋ผ์ธ์ผ๋ก ์ ํํจ์ผ๋ก์จ ๋ช ๊ฐ์ง ์ค์ํ ๋น์ฆ๋์ค ๋ชฉํ๋ฅผ ๋ฌ์ฑํ ์ ์์ต๋๋ค:
- ์ฌ์ฉ์ ๊ฒฝํ ๋ณดํธ: ์ฑ๋ฅ ์ ํ๊ฐ ์ฌ์ฉ์์๊ฒ ์ํฅ์ ๋ฏธ์น๋ ๊ฒ์ ๋ฐฉ์งํ๋ ์์ ๋ง์ ๋ง๋ญ๋๋ค.
- ๊ฐ๋ฐ ์๋ ํฅ์: ์ฆ๊ฐ์ ์ธ ํผ๋๋ฐฑ์ ์ ๊ณตํจ์ผ๋ก์จ ๊ฐ๋ฐ์๊ฐ ๋ฌธ์ ๋ฅผ ์ ์ํ๊ณ ์์ ๊ฐ ์๊ฒ ํด๊ฒฐํ ์ ์๋๋ก ํ์ฌ ๊ธธ๊ณ ๊ณ ํต์ค๋ฌ์ด ์ต์ ํ ์ฃผ๊ธฐ๋ฅผ ์ค์ ๋๋ค.
- ๋ฐ์ดํฐ ๊ธฐ๋ฐ ์์ฌ ๊ฒฐ์ : ์ํคํ ์ฒ ๊ฒฐ์ ์ ์๋ดํ๊ณ ์ต์ ํ์ ๋ํ ํฌ์๋ฅผ ์ ๋นํํ ์ ์๋ ํ๋ถํ ์ฑ๋ฅ ์ถ์ธ ๋ฐ์ดํฐ ์ธํธ๋ฅผ ๊ตฌ์ถํฉ๋๋ค.
์ฌ์ ์ ์๊ฒ ์์๋ฉ๋๋ค. ๋ฉ์ธ ๋ธ๋์น์ ๊ฐ๋จํ Lighthouse CI ๊ฒ์ฌ๋ฅผ ์ถ๊ฐํ๋ ๊ฒ๋ถํฐ ์์ํ์ญ์์ค. ๋ณด์์ ์ธ ์ฑ๋ฅ ์์ฐ์ ์ค์ ํ์ญ์์ค. ํ์ด ํผ๋๋ฐฑ์ ์ต์ํด์ง๋ฉด, ํ ๋ฆฌํ์คํธ๋ก ๋ฒ์๋ฅผ ํ์ฅํ๊ณ , ๋ ์ธ๋ถํ๋ ์งํ๋ฅผ ๋์ ํ๋ฉฐ, ์ค์ํ ์ฌ์ฉ์ ์ฌ์ ์ ํ๋กํ์ผ๋งํ๊ธฐ ์์ํ์ญ์์ค. ์ฑ๋ฅ์ ๋ชฉ์ ์ง๊ฐ ์๋๋ผ ์ง์์ ์ธ ์ฌ์ ์ ๋๋ค. ์ ์ ์ ํ์ดํ๋ผ์ธ์ ๊ตฌ์ถํจ์ผ๋ก์จ, ์ฌ๋ฌ๋ถ์ด ๋ฐฐํฌํ๋ ๋ชจ๋ ์ฝ๋ ๋ผ์ธ์ด ์ฌ์ฉ์์ ๊ฐ์ฅ ์์คํ ์์ฐ์ธ ์๊ฐ์ ์กด์คํ๋๋ก ๋ณด์ฅํ ์ ์์ต๋๋ค.