์๋ํ๋ ์ฑ๋ฅ ํ ์คํธ๊ฐ ์ด๋ป๊ฒ ์๋ฐ์คํฌ๋ฆฝํธ ์ฑ๋ฅ ์ ํ๋ฅผ ๋ฐฉ์งํ๊ณ , ๋ฐ์ด๋ ์ฌ์ฉ์ ๊ฒฝํ์ ๋ณด์ฅํ๋ฉฐ, ๋ค์ํ ๊ธ๋ก๋ฒ ์์ฅ์์ ์ ํ๋ฆฌ์ผ์ด์ ์ํ๋ฅผ ์ ์งํ๋ ๋ฐ ์ค์ํ ์ญํ ์ ํ๋์ง ์์๋ณด์ธ์.
์๋ฐ์คํฌ๋ฆฝํธ ์ฑ๋ฅ ์ ํ ๋ฐฉ์ง: ์๋ํ๋ ์ฑ๋ฅ ํ ์คํธ์ ํ์์ ์ธ ์ญํ
์ค๋๋ ์ ์ธ๊ณ ์๋ฐฑ๋ง ๋ช ์ ์ฌ์ฉ์๊ฐ ๋งค์ผ ์น ์ ํ๋ฆฌ์ผ์ด์ ๊ณผ ์ํธ ์์ฉํ๋ ์ํธ ์ฐ๊ฒฐ๋ ๋์งํธ ํ๊ฒฝ์์ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋์ ์ฑ๋ฅ์ ๋จ์ํ ๊ธฐ์ ์ ์ธ ์ธ๋ถ ์ฌํญ์ด ์๋๋ผ ์ฌ์ฉ์ ๊ฒฝํ, ๋น์ฆ๋์ค ์ฑ๊ณต, ๋ธ๋๋ ํํ์ ๊ธฐ๋ณธ ๊ธฐ๋ฅ์ ๋๋ค. ๋ก๋ฉ ์๊ฐ์ ์์ฃผ ์์ ์ฐจ์ด๊ฐ ๋งค์ถ ์์ค, ์ฌ์ฉ์ ์ฐธ์ฌ๋ ๊ฐ์, ์ ๋ขฐ๋์ ๋ํ ์ฌ๊ฐํ ํ๊ฒฉ์ผ๋ก ์ด์ด์ง ์ ์์ต๋๋ค. ๊ฐ๋ฐ์๋ค์ ํ๋ถํ ๊ธฐ๋ฅ์ ๋์ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๊ธฐ ์ํด ๋ ธ๋ ฅํ์ง๋ง, ๊ทธ๋ฆผ์ ์์๋ ํญ์ ์ฑ๋ฅ ์ ํ(performance regression)๋ผ๋ ์ํ์ด ๋์ฌ๋ฆฌ๊ณ ์์ต๋๋ค. ์ด ์กฐ์ฉํ ์ด์ธ์๋ ๊ฒ๋ณด๊ธฐ์๋ ๋ฌดํดํ ๋ณ๊ฒฝ ์ฌํญ๊ณผ ํจ๊ป ์ฝ๋๋ฒ ์ด์ค์ ์ค๋ฉฐ๋ค์ด ์ ํ๋ฆฌ์ผ์ด์ ์ด ๋๋ฆฌ๊ณ ๋ฐ์์ด ์๊ฑฐ๋ ์ฌ์ง์ด ๊ณ ์ฅ ๋ ๊ฒ์ฒ๋ผ ๋๊ปด์ง ๋๊น์ง ์์ํ ๊ทธ๋ฌ๋ ํ์คํ๊ฒ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ํ์ํฌ ์ ์์ต๋๋ค. ์ข์ ์์์ ์ด ์ธ์์ ์๋์ผ๋ก ํ ํ์๊ฐ ์๋ค๋ ๊ฒ์ ๋๋ค. ์๋ํ๋ ์ฑ๋ฅ ํ ์คํธ๋ ๊ฐ๋ ฅํ๊ณ ํ์ฅ ๊ฐ๋ฅํ๋ฉฐ ํ์์ ์ธ ์๋ฃจ์ ์ ์ ๊ณตํ์ฌ ๊ฐ๋ฐํ์ด ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ์ฌ์ ์ ๊ฐ์ง, ์๋ฐฉ ๋ฐ ์์ ํ ์ ์๋๋ก ์ง์ํฉ๋๋ค. ์ด ํฌ๊ด์ ์ธ ๊ฐ์ด๋๋ ์๋ฐ์คํฌ๋ฆฝํธ ์ฑ๋ฅ์ ์ธ๊ณ๋ฅผ ๊น์ด ํ๊ณ ๋ค์ด ์ฑ๋ฅ ์ ํ์ ๋ฉ์ปค๋์ฆ์ ํ์ํ๊ณ , ์ ๊ตฌํ๋ ์๋ํ ํ ์คํธ ์ ๋ต์ด ์ด๋ป๊ฒ ์ ํ๋ฆฌ์ผ์ด์ ์ ์๋์ ๋ฏผ์ฒฉ์ฑ์ ๋ณดํธํ์ฌ ๋ชจ๋ ์ฌ์ฉ์์๊ฒ ์ด๋์๋ ์ํํ ๊ฒฝํ์ ๋ณด์ฅํ ์ ์๋์ง ์กฐ๋ช ํ ๊ฒ์ ๋๋ค.
๊ธ๋ก๋ฒ ๋งฅ๋ฝ์์ ์๋ฐ์คํฌ๋ฆฝํธ ์ฑ๋ฅ์ ์ค์์ฑ
์๋ฐ์คํฌ๋ฆฝํธ๋ก ๊ตฌ๋๋๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ์๋์ ๋ฐ์์ฑ์ ๋ ์ด์ ์ฌ์น๊ฐ ์๋๋ผ ํ์ ์๊ตฌ ์ฌํญ์ ๋๋ค. ์ด๋ ์ฌ์ฉ์๊ฐ ๋ฒํํ ๋๋์์ ๊ณ ์ ๊ด์ฌ์ ๋ฅผ ์ฌ์ฉํ๋ , ์๊ณจ ์ง์ญ์ ๋ชจ๋ฐ์ผ ๋ฐ์ดํฐ๋ฅผ ํ์ํ๋ ๋ณดํธ์ ์ผ๋ก ์ ์ฉ๋ฉ๋๋ค. ์ฑ๋ฅ ์ ํ๋ ์ฌ์ฉ์ ๋ง์กฑ๋์์ ๊ฒ์ ์์ง ์์, ๊ถ๊ทน์ ์ผ๋ก๋ ์์ต์ ์ด๋ฅด๊ธฐ๊น์ง ๋ค์ํ ์ธก๋ฉด์ ์ํฅ์ ๋ฏธ์นฉ๋๋ค.
์ฌ์ฉ์ ๊ฒฝํ: ์ฒซ์ธ์๊ณผ ์ง์์ ์ธ ์ํฅ
- ๋ก๋ฉ ์๊ฐ: ์ฌ์ฉ์๊ฐ ํ์ด์ง๊ฐ ๋ ๋๋ง๋๊ธฐ๋ฅผ ๊ธฐ๋ค๋ฆฌ๋ ์ด๊ธฐ ์๊ฐ์ ๋งค์ฐ ์ค์ํฉ๋๋ค. ๊ธด ์๋ฐ์คํฌ๋ฆฝํธ ํ์ฑ, ์ปดํ์ผ ๋ฐ ์คํ์ '์ํธ์์ฉ๊น์ง์ ์๊ฐ'(Time to Interactive, TTI)์ ํฌ๊ฒ ์ง์ฐ์ํฌ ์ ์์ต๋๋ค. ์ฌ์ฉ์๋ ์ง๋ฆฌ์ ์์น๋ ๋ฌธํ์ ๋ฐฐ๊ฒฝ์ ๊ด๊ณ์์ด ๊ธฐ๋ค๋ฆผ์ ๋ํ ์ธ๋ด์ฌ์ด ๋ฎ์ต๋๋ค. ์ฐ๊ตฌ์ ๋ฐ๋ฅด๋ฉด ์๋ฐฑ ๋ฐ๋ฆฌ์ด์ ์ฐจ์ด๋ง์ผ๋ก๋ ์ฌ์ฉ์ ์ฐธ์ฌ๋๊ฐ ํฌ๊ฒ ๊ฐ์ํ ์ ์์์ด ์ผ๊ด๋๊ฒ ๋ํ๋ฌ์ต๋๋ค. ์๋ฅผ ๋ค์ด, ๋ก๋ฉ์ด ๋๋ฆฐ ์ ์์๊ฑฐ๋ ์ฌ์ดํธ๋ ๋ชจ๋ฐ์ผ ์ฐ์ ์ ์์ด ์ง๋ฐฐ์ ์ด๊ณ ๋คํธ์ํฌ ์กฐ๊ฑด์ด ๊ฐ๋ณ์ ์ธ ๋ธ๋ผ์ง์ด๋ ์ธ๋์ ๊ฐ์ ์์ฅ์ ์ ์ฌ ๊ณ ๊ฐ์ด ํ์ํ๊ธฐ๋ ์ ์ ์ฅ๋ฐ๊ตฌ๋๋ฅผ ํฌ๊ธฐํ๋ ๊ฒ์ ๋ณผ ์ ์์ต๋๋ค.
- ๋ฐ์์ฑ: ์ผ๋จ ๋ก๋๋๋ฉด ์ ํ๋ฆฌ์ผ์ด์ ์ ํด๋ฆญ, ์คํฌ๋กค, ์์ ์ ์ถ๊ณผ ๊ฐ์ ์ฌ์ฉ์ ์ ๋ ฅ์ ์ฆ์ ์๋ตํด์ผ ํฉ๋๋ค. ์๋ฐ์คํฌ๋ฆฝํธ๋ ์ด๋ฌํ ์ํธ์์ฉ์ ํต์ฌ์ ๋๋ค. ๋ฌด๊ฑฐ์ด ์คํฌ๋ฆฝํธ ์คํ์ผ๋ก ์ธํด ๋ฉ์ธ ์ค๋ ๋๊ฐ ์ฐจ๋จ๋๋ฉด UI๊ฐ ๋ฉ์ถ์ด ๋ต๋ตํ๊ณ ๋๊ธฐ๋ ๊ฒฝํ์ ๋ง๋ญ๋๋ค. ์๋ฅผ ๋ค์ด ๋ด์, ๋ฐ๋, ๋์ฟ์ ํ์๋ค์ด ๋์์ ์ํธ ์์ฉํ๋ ํ์ ๋๊ตฌ๋ ๋นํจ์จ์ ์ธ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์ธํด ์ค์๊ฐ ๊ธฐ๋ฅ์ด ์ง์ฐ๋๋ฉด ๊ธ๋ฐฉ ์ฌ์ฉํ ์ ์๊ฒ ๋ ๊ฒ์ ๋๋ค.
- ์ํธ์์ฉ ๋ฐ ์ ๋๋ฉ์ด์ : ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๊ตฌ๋๋๋ ๋ถ๋๋ฌ์ด ์ ๋๋ฉ์ด์ , ๋น ๋ฅธ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ, ๋์ UI ์ ๋ฐ์ดํธ๋ ํ๋์ ์ธ ์น ๊ฒฝํ์ ์ ์ํฉ๋๋ค. ์ฑ๋ฅ ๋ฌธ์ ๋ก ์ธํ ๋ฒ๋ฒ ์ด๋ ์คํฌ๋กค์ด๋ ์ง์ฐ๋ ์๊ฐ์ ํผ๋๋ฐฑ์ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ๋ ดํ๊ฑฐ๋ ๋น์ ๋ฌธ์ ์ผ๋ก ๋ณด์ด๊ฒ ํ์ฌ ์ธ๋ จ๋ ๋์งํธ ์ ํ์ ๊ธฐ๋ํ๋ ์ ์ธ๊ณ ์ฌ์ฉ์์ ์ ๋ขฐ๋ฅผ ๋จ์ด๋จ๋ฆด ์ ์์ต๋๋ค.
๋น์ฆ๋์ค ์ํฅ: ๊ฐ์์ ์ธ ์์ต๊ณผ ์ํ
- ์ ํ์จ ๋ฐ ์์ต: ๋๋ฆฐ ์ฑ๋ฅ์ ์ง์ ์ ์ผ๋ก ๋งค์ถ ์์ค๊ณผ ๋ฎ์ ์ ํ์จ๋ก ์ด์ด์ง๋๋ค. ๊ธ๋ก๋ฒ ๋น์ฆ๋์ค์ ๊ฒฝ์ฐ ์ด๋ ๋ค์ํ ์์ฅ์์์ ๊ธฐํ๋ฅผ ๋์น๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค. ์๋ฅผ ๋ค์ด, ๊ธ์ต ์๋น์ค ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ๋ขฐ๋ฅผ ๊ตฌ์ถํ๊ธฐ ์ํด ์ค์ํ ๊ฑฐ๋ ์ค์ ๋ฒ๊ฐ์ฒ๋ผ ๋นจ๋ผ์ผ ํฉ๋๋ค. ๋ ์ผ์ด๋ ํธ์ฃผ ์ฌ์ฉ์๊ฐ ์ฃผ์ ๊ฑฐ๋๋ ์๊ธ ์ด์ฒด ์ค์ ์ง์ฐ์ ๊ฒฝํํ๋ฉด ๋์์ ์ฐพ์ ๊ฐ๋ฅ์ฑ์ด ๋์ต๋๋ค.
- ์ฌ์ฉ์ ์ ์ง ๋ฐ ์ฐธ์ฌ: ๋น ๋ฅด๊ณ ์ ๋์ ์ธ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฌ๋ฐฉ๋ฌธ๊ณผ ๋ ๊น์ ์ฐธ์ฌ๋ฅผ ์ ๋ํฉ๋๋ค. ๋ฐ๋๋ก ๋๋ฆฐ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฌ์ฉ์๋ฅผ ๋ฉ์ด์ง๊ฒ ํ๋ฉฐ, ์ข ์ข ์๊ตฌ์ ์ผ๋ก ๋ ๋๊ฒ ๋ง๋ญ๋๋ค. ์์ ๋ฏธ๋์ด ํ๋ซํผ์ด ์ ์ฝํ ์ธ ๋ฅผ ๋ก๋ํ๊ฑฐ๋ ํผ๋๋ฅผ ์๋ก ๊ณ ์น๋ ๋ฐ ๋๋ฆฌ๋ค๋ฉด ์ด์งํธ๋ ์ธ๋๋ค์์์ ์ฌ์ฉ์๋ ๋ ๋น ๋ฅธ ๊ฒฝํ์ ์ ๊ณตํ๋ ๊ฒฝ์์ฌ๋ก ์ ํํ ๊ฒ์ ๋๋ค.
- ๊ฒ์ ์์ง ์ต์ ํ(SEO): ๊ฐ์ฅ ์ฃผ๋ชฉํ ๋งํ ๊ตฌ๊ธ์ ํฌํจํ ๊ฒ์ ์์ง์ ์ฑ๋ฅ ์งํ(์: ์ฝ์ด ์น ๋ฐ์ดํ)๋ฅผ ์์ ์๊ณ ๋ฆฌ์ฆ์ ํตํฉํฉ๋๋ค. ์ฑ๋ฅ์ด ์ข์ง ์์ผ๋ฉด ๊ฒ์ ์์๊ฐ ๋ฎ์์ ธ ์ ์ฌ ์ฌ์ฉ์๊ฐ ์ด๋ค ์ธ์ด๋ก ๊ฒ์ํ๋ , ์ง์ญ ๊ฒ์ ์์ง ์ ํธ๋์ ๊ด๊ณ์์ด ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ฐ๊ฒฌํ๊ธฐ ๋ ์ด๋ ค์์ง๋๋ค. ์ด๋ ๊ธ๋ก๋ฒ ๊ฐ์์ฑ์ ์์ด ์ค์ํ ์์์ ๋๋ค.
- ๋ธ๋๋ ํํ: ์ฑ๋ฅ์ ํ์ง์ ์ง์ ์ ์ผ๋ก ๋ฐ์ํฉ๋๋ค. ์ง์์ ์ผ๋ก ๋๋ฆฐ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ธ๋๋์ ๊ธ๋ก๋ฒ ํํ์ ์์์์ผ ์ธ๋ถ ์ฌํญ์ ๋ํ ์ฃผ์ ๋ถ์กฑ์ด๋ ๊ธฐ์ ์ ์ญ๋ ๋ถ์กฑ์ ์์ฌํ ์ ์์ต๋๋ค.
๊ธฐ์ ๋ถ์ฑ์ ์ ์ง๋ณด์์ฑ
- ๋๋ฒ๊น ๋น์ฉ ์ฆ๊ฐ: ์ฑ๋ฅ ๋ฌธ์ ๋ ์ข ์ข ๋ฏธ๋ฌํ๊ณ ์ถ์ ํ๊ธฐ ์ด๋ ต์ต๋๋ค. ์๋ ๋๋ฒ๊น ์ ์๋นํ ๊ฐ๋ฐ์ ๋ฆฌ์์ค๋ฅผ ์๋ชจํ์ฌ ์ธ์ฌ๋ฅผ ๊ธฐ๋ฅ ๊ฐ๋ฐ์์ ๋ฉ์ด์ง๊ฒ ํ ์ ์์ต๋๋ค.
- ๋ฆฌํฉํ ๋ง์ ์ด๋ ค์: ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ผ๋ก ๊ฐ๋ ์ฐฌ ์ฝ๋๋ฒ ์ด์ค๋ ๋ฆฌํฉํ ๋งํ๊ฑฐ๋ ํ์ฅํ๊ธฐ๊ฐ ๋ ์ด๋ ค์์ง๋๋ค. ๊ฐ๋ฐ์๋ ์๋ก์ด ์ฑ๋ฅ ์ ํ๋ฅผ ์ ๋ฐํ๊ฑฐ๋ ๊ธฐ์กด ๋ฌธ์ ๋ฅผ ์ ํ์ํฌ ๊ฒ์ ๋๋ ค์ํ์ฌ ํ์ํ ๋ณ๊ฒฝ์ ๊ธฐํผํ ์ ์์ต๋๋ค.
์ฑ๋ฅ ์ ํ ์ดํดํ๊ธฐ: ์กฐ์ฉํ ์ฑ๋ฅ ์ ํ
์ฑ๋ฅ ์ ํ(performance regression)๋ ์ํํธ์จ์ด ์ ๋ฐ์ดํธ๋ ๋ณ๊ฒฝ์ด ์๋์น ์๊ฒ ์ด์ ๋ฒ์ ์ ๋นํด ์ ํ๋ฆฌ์ผ์ด์ ์ ์๋, ๋ฐ์์ฑ ๋๋ ๋ฆฌ์์ค ์ฌ์ฉ๋์ ์ ํ์ํฌ ๋ ๋ฐ์ํฉ๋๋ค. ๋์ ๋ณด์ด๋ ์ค๋ฅ๋ก ์ด์ด์ง๋ ๊ธฐ๋ฅ์ ๋ฒ๊ทธ์ ๋ฌ๋ฆฌ, ์ฑ๋ฅ ์ ํ๋ ์ข ์ข ์ ์ง์ ์ธ ์๋ ์ ํ, ๋ฉ๋ชจ๋ฆฌ ์๋น ์ฆ๊ฐ ๋๋ ๋ฏธ๋ฌํ ๋ฒ๋ฒ ์์ผ๋ก ๋ํ๋ ์ฌ์ฉ์ ๊ฒฝํ์ด๋ ์์คํ ์์ ์ฑ์ ์ฌ๊ฐํ ์ํฅ์ ๋ฏธ์น ๋๊น์ง ๋์ ๋์ง ์์ ์ ์์ต๋๋ค.
์ฑ๋ฅ ์ ํ๋ ๋ฌด์์ธ๊ฐ?
์ ํ๋ฆฌ์ผ์ด์ ์ด ๋ชจ๋ ์ฑ๋ฅ ๋ชฉํ๋ฅผ ์ถฉ์กฑํ๋ฉฐ ์ํํ๊ฒ ์คํ๋๊ณ ์๋ค๊ณ ์์ํด ๋ณด์ญ์์ค. ๊ทธ๋ฐ ๋ค์ ์ ๊ธฐ๋ฅ์ด ๋ฐฐํฌ๋๊ฑฐ๋, ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ์ ๋ฐ์ดํธ๋๊ฑฐ๋, ์ฝ๋ ์ผ๋ถ๊ฐ ๋ฆฌํฉํ ๋ง๋ฉ๋๋ค. ๊ฐ์๊ธฐ ์ ํ๋ฆฌ์ผ์ด์ ์ด ์ฝ๊ฐ ๋๋ ค์ง๊ธฐ ์์ํฉ๋๋ค. ํ์ด์ง ๋ก๋์ ์๊ฐ์ด ์กฐ๊ธ ๋ ๊ฑธ๋ฆฌ๊ณ , ์ํธ์์ฉ์ด ๋ ์ฆ๊ฐ์ ์ด๊ฑฐ๋, ์คํฌ๋กค์ด ๋ถ๋๋ฝ์ง ์์ต๋๋ค. ์ด๊ฒ์ด ์ฑ๋ฅ ์ ํ์ ํน์ง์ ๋๋ค. ์ด๋ค์ ๋ค์๊ณผ ๊ฐ์ ์ด์ ๋ก ๊ตํํฉ๋๋ค:
- ์ด๋ค ๊ธฐ๋ฅ๋ ๋ง๊ฐ๋จ๋ฆฌ์ง ์์ ๊ธฐ์กด์ ๋จ์ ํ ์คํธ๋ ํตํฉ ํ ์คํธ๋ฅผ ํต๊ณผํ ์ ์์ต๋๋ค.
- ์ด๊ธฐ์๋ ์ํฅ์ด ๋ฏธ๋ฏธํ์ฌ ํน์ ์กฐ๊ฑด ํ์์๋ ์๊ฐ์ด ์ง๋จ์ ๋ฐ๋ผ ๋ช ๋ฐฑํด์ง ์ ์์ต๋๋ค.
- ์ ํ๋ฅผ ์ ๋ฐํ ์ ํํ ๋ณ๊ฒฝ ์ฌํญ์ ์๋ณํ๋ ๊ฒ์ ํนํ ๋ถ์ฐ๋ ํ์ด ๊ฐ๋ฐํ๋ ํฌ๊ณ ๋น ๋ฅด๊ฒ ๋ฐ์ ํ๋ ์ฝ๋๋ฒ ์ด์ค์์ ๋ณต์กํ๊ณ ์๊ฐ์ด ๋ง์ด ๊ฑธ๋ฆฌ๋ ํ์ ์์ ์ด ๋ ์ ์์ต๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ ์ฑ๋ฅ ์ ํ์ ์ผ๋ฐ์ ์ธ ์์ธ
์ฑ๋ฅ ์ ํ๋ ์๋ฐ์คํฌ๋ฆฝํธ ์ํ๊ณ ๋ด์ ๋ค์ํ ์์ธ์์ ๋น๋กฏ๋ ์ ์์ต๋๋ค:
- ์๋ก์ด ๊ธฐ๋ฅ ๋ฐ ๋ณต์ก์ฑ ์ฆ๊ฐ: ์๋ก์ด UI ๊ตฌ์ฑ ์์, ๋ฐ์ดํฐ ์๊ฐํ ๋๋ ์ค์๊ฐ ๊ธฐ๋ฅ์ ์ถ๊ฐํ๋ฉด ๋ ๋ง์ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๋์ ํ๊ฒ ๋์ด ๋ฒ๋ค ํฌ๊ธฐ๊ฐ ์ปค์ง๊ฑฐ๋ ์คํ ์๊ฐ์ด ์ฆ๊ฐํ๊ฑฐ๋ DOM ์กฐ์์ด ๋ ๋น๋ฒํด์ง ์ ์์ต๋๋ค.
- ํ์ฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ฐ ์ข ์์ฑ: ๊ฒ๋ณด๊ธฐ์ ๋ฌดํดํด ๋ณด์ด๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ฒ์ ์ ์ ๋ฐ์ดํธํ๋ฉด ์ต์ ํ๋์ง ์์ ์ฝ๋, ๋ ํฐ ๋ฒ๋ค ๋๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ํฌ๊ธฐ๋ฅผ ๋ถํ๋ฆฌ๊ฑฐ๋ ๋นํจ์จ์ ์ธ ํจํด์ ๋์ ํ๋ ์๋ก์ด ์ข ์์ฑ์ด ์ถ๊ฐ๋ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด, ๊ธ๋ก๋ฒ ๊ฒฐ์ ๊ฒ์ดํธ์จ์ด ํตํฉ์ ์ด๊ธฐ ๋ก๋ ์๊ฐ์ ์๋นํ ์ํฅ์ ๋ฏธ์น๋ ํฐ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์ ๋์ ํ ์ ์์ผ๋ฉฐ, ์ด๋ ๋คํธ์ํฌ๊ฐ ๋๋ฆฐ ์ง์ญ์์ ํนํ ๋๋๋ฌ์ง๋๋ค.
- ์๋ชป๋ ๋ฆฌํฉํ ๋ง ๋ฐ ์ฝ๋ ์ต์ ํ: ์ฝ๋ ํ์ง์ ๊ฐ์ ํ๊ธฐ ์ํ ์๋์๋ ๋ถ๊ตฌํ๊ณ , ๋ฆฌํฉํ ๋ง ์์ ์ ๋๋๋ก ์๋์น ์๊ฒ ๋ ํจ์จ์ ์ธ ์๊ณ ๋ฆฌ์ฆ์ ๋์ ํ๊ฑฐ๋, ๋ฉ๋ชจ๋ฆฌ ์ฌ์ฉ๋์ ๋๋ฆฌ๊ฑฐ๋, React๋ Vue์ ๊ฐ์ ํ๋ ์์ํฌ์์ ๋ ์ฆ์ ์ฌ๋ ๋๋ง์ ์ ๋ฐํ ์ ์์ต๋๋ค.
- ๋ฐ์ดํฐ ๋ณผ๋ฅจ ๋ฐ ๋ณต์ก์ฑ: ์ ํ๋ฆฌ์ผ์ด์ ์ด ์ฑ์ฅํ๊ณ ๋ ๋ง์ ๋ฐ์ดํฐ๋ฅผ ์ฒ๋ฆฌํจ์ ๋ฐ๋ผ, ์์ ๋ฐ์ดํฐ ์ธํธ์์๋ ๋นจ๋๋ ์์ (์: ํฐ ๋ฐฐ์ด ํํฐ๋ง, ๊ด๋ฒ์ํ ๋ชฉ๋ก ์ ๋ฐ์ดํธ)์ด ์๋นํ ๋ณ๋ชฉ ํ์์ด ๋ ์ ์์ผ๋ฉฐ, ์ด๋ ์ ์ธ๊ณ ์ด๋์์๋ ๋ณต์กํ ๋์๋ณด๋๋ ๋ณด๊ณ ์์ ์ก์ธ์คํ๋ ์ฌ์ฉ์์๊ฒ ํนํ ๊ทธ๋ ์ต๋๋ค.
- ์ต์ ํ๋์ง ์์ DOM ์กฐ์: ๋ฌธ์ ๊ฐ์ฒด ๋ชจ๋ธ(DOM)์ ๋ํ ๋น๋ฒํ๊ณ ๋นํจ์จ์ ์ธ ์ ๋ฐ์ดํธ๋ ๋ฒ๋ฒ ์์ ์ ํ์ ์ธ ์์ธ์ ๋๋ค. ๊ฐ DOM ๋ณ๊ฒฝ์ ๋น์ฉ์ด ๋ง์ด ๋๋ ๋ ์ด์์ ๋ฐ ํ์ธํธ ์์ ์ ํธ๋ฆฌ๊ฑฐํ ์ ์์ต๋๋ค.
- ๋ฉ๋ชจ๋ฆฌ ๋์: ํด์ ๋์ง ์์ ์ฐธ์กฐ๋ ์๊ฐ์ด ์ง๋จ์ ๋ฐ๋ผ ๋ฉ๋ชจ๋ฆฌ ์ถ์ ์ ์ ๋ฐํ์ฌ ์ ํ๋ฆฌ์ผ์ด์ ์ด ๋๋ ค์ง๊ณ ๊ฒฐ๊ตญ ์ถฉ๋ํ๊ฒ ๋ง๋ค ์ ์์ผ๋ฉฐ, ์ด๋ ์ฅ๊ธฐ๊ฐ ์ฌ์ฉ๋๋ ๋จ์ผ ํ์ด์ง ์ ํ๋ฆฌ์ผ์ด์ (SPA)์์ ํนํ ๋ฌธ์ ๊ฐ ๋ฉ๋๋ค.
- ๋นํจ์จ์ ์ธ ๋คํธ์ํฌ ์์ฒญ: ๋๋ฌด ๋ง์ ์์ฒญ, ํฐ ํ์ด๋ก๋ ๋๋ ์ต์ ํ๋์ง ์์ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ ์ ๋ต์ ๋ฉ์ธ ์ค๋ ๋๋ฅผ ์ฐจ๋จํ๊ณ ์ฝํ ์ธ ๋ ๋๋ง์ ์ง์ฐ์ํฌ ์ ์์ต๋๋ค. ์ด๋ ๋๊ธฐ ์๊ฐ์ด ๊ธธ๊ฑฐ๋ ๋ฐ์ดํฐ ๋น์ฉ์ด ๋์ ์ง์ญ์ ์ฌ์ฉ์์๊ฒ ํนํ ์ค์ํฉ๋๋ค.
์๋ ๊ฐ์ง์ ์ด๋ ค์
์ฑ๋ฅ์ ๋ํด ์๋ ํ ์คํธ์ ์์กดํ๋ ๊ฒ์ ๋งค์ฐ ๋นํ์ค์ ์ด๊ณ ์ ๋ขฐํ ์ ์์ต๋๋ค:
- ์๊ฐ ์๋ชจ์ : ๋ชจ๋ ๋ณ๊ฒฝ ์ฌํญ์ ๋ํด ์๋์ผ๋ก ์ฑ๋ฅ ์ํฅ์ ํ๋กํ์ผ๋งํ๋ ๊ฒ์ ๊ฐ๋ฐ์ ์ค๋จ์ํฌ ์ ์๋ ์์ฒญ๋ ์์ ์ ๋๋ค.
- ์ค๋ฅ ๋ฐ์ ๊ฐ๋ฅ์ฑ: ์ฌ๋ ํ ์คํฐ๋ ๋ฏธ๋ฌํ ์ ํ, ํนํ ํน์ ์กฐ๊ฑด(์: ํน์ ๋คํธ์ํฌ ์๋, ์ฅ์น ์ ํ ๋๋ ๋ฐ์ดํฐ ๋ณผ๋ฅจ)์์๋ง ๋ํ๋๋ ์ ํ๋ฅผ ๋์น ์ ์์ต๋๋ค.
- ์ฃผ๊ด์ : ํ ํ ์คํฐ์๊ฒ '์ถฉ๋ถํ ๋น ๋ฅด๋ค'๊ณ ๋๊ปด์ง๋ ๊ฒ์ด ๋ค๋ฅธ ํ ์คํฐ์๊ฒ๋ ์ฉ๋ฉํ ์ ์์ ์ ๋๋ก ๋๋ฆด ์ ์์ผ๋ฉฐ, ํนํ ๋ฐ์์ฑ์ ๋ํ ๋ฌธํ์ ๊ธฐ๋์น๊ฐ ๋ค๋ฅผ ๊ฒฝ์ฐ ๋์ฑ ๊ทธ๋ ์ต๋๋ค.
- ์ผ๊ด์ฑ ๋ถ์กฑ: ์ฌ๋ฌ ์๋ ์คํ์์ ํ ์คํธ ์กฐ๊ฑด์ ์ ํํ๊ฒ ๋ณต์ ํ๋ ๊ฒ์ ๊ฑฐ์ ๋ถ๊ฐ๋ฅํ์ฌ ์ผ๊ด์ฑ ์๋ ๊ฒฐ๊ณผ๋ฅผ ์ด๋ํฉ๋๋ค.
- ์ ํ๋ ๋ฒ์: ์๋ ํ ์คํธ๋ ๊ธ๋ก๋ฒ ์ฌ์ฉ์ ๊ธฐ๋ฐ์ด ๋ง์ฃผํ ๊ด๋ฒ์ํ ๋คํธ์ํฌ ์กฐ๊ฑด, ์ฅ์น ๊ธฐ๋ฅ ๋ฐ ๋ธ๋ผ์ฐ์ ๋ฒ์ ์ ๊ฑฐ์ ๋ค๋ฃจ์ง ๋ชปํฉ๋๋ค.
์๋ํ๋ ์ฑ๋ฅ ํ ์คํธ์ ํ์์ฑ
์๋ํ๋ ์ฑ๋ฅ ํ ์คํธ๋ ๋จ์ํ ๋ชจ๋ฒ ์ฌ๋ก๊ฐ ์๋๋ผ, ํนํ ๊ธ๋ก๋ฒ ๊ณ ๊ฐ์ ๋์์ผ๋ก ํ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ์์ด ํ๋ ์น ๊ฐ๋ฐ์ ํ์์ ์ธ ๊ตฌ์ฑ ์์์ ๋๋ค. ์ด๋ ์ฑ๋ฅ ์ ํ์ ๋ฏธ๋ฌํ์ง๋ง ํ๊ดด์ ์ธ ์ํฅ์ผ๋ก๋ถํฐ ๋ณดํธํ๋ ์ง์์ ์ธ ํ์ง ๊ฒ์ดํธ ์ญํ ์ ํฉ๋๋ค.
์กฐ๊ธฐ ๋ฐ๊ฒฌ: ํ๋ก๋์ ์ ๋๋ฌํ๊ธฐ ์ ์ ๋ฌธ์ ํฌ์ฐฉ
์ฑ๋ฅ ์ ํ๊ฐ ์กฐ๊ธฐ์ ๋ฐ๊ฒฌ๋ ์๋ก ์์ ๋น์ฉ๊ณผ ๋ ธ๋ ฅ์ด ์ค์ด๋ญ๋๋ค. ๊ฐ๋ฐ ํ์ดํ๋ผ์ธ(์: ํ ๋ฆฌํ์คํธ ๊ฒํ ์ค ๋๋ ๋ชจ๋ ์ปค๋ฐ ์)์ ํตํฉ๋ ์๋ํ๋ ํ ์คํธ๋ ์ฑ๋ฅ ์ ํ๋ฅผ ์ฆ์ ํ๋๊ทธํ ์ ์์ต๋๋ค. ์ด๋ฌํ '์ฌํํธ-๋ ํํธ(shift-left)' ์ ๊ทผ ๋ฐฉ์์ ๋ฌธ์ ๊ฐ ํ๋ก๋์ ์ ๋๋ฌํ์ฌ ์๋ฐฑ๋ง ์ฌ์ฉ์์๊ฒ ์ํฅ์ด ์ฆํญ๋๊ณ ํด๊ฒฐ์ด ํจ์ฌ ๋ ๋น์ฉ์ด ๋ง์ด ๋ค๊ณ ์๊ธํด์ง๋ ์ฌ๊ฐํ ๋ฌธ์ ๋ก ๋๋ฉ์ด์ฒ๋ผ ๋ถ์ด๋๋ ๊ฒ์ ๋ฐฉ์งํฉ๋๋ค.
์ผ๊ด์ฑ๊ณผ ๊ฐ๊ด์ฑ: ์ธ์ ์ค๋ฅ ์ ๊ฑฐ
์๋ํ๋ ํ ์คํธ๋ ํต์ ๋ ์กฐ๊ฑด ํ์์ ๋ฏธ๋ฆฌ ์ ์๋ ์๋๋ฆฌ์ค๋ฅผ ์คํํ์ฌ ์ผ๊ด๋๊ณ ๊ฐ๊ด์ ์ธ ๋ฉํธ๋ฆญ์ ์ ๊ณตํฉ๋๋ค. ํ ์คํฐ์ ํผ๋ก, ๋ค์ํ ํ๊ฒฝ ๋๋ ์ฃผ๊ด์ ์ธ ์ธ์์ ์ํฅ์ ๋ฐ์ ์ ์๋ ์๋ ํ ์คํธ์ ๋ฌ๋ฆฌ, ์๋ํ๋ ํ ์คํธ๋ ์ ๋ฐํ๊ณ ๋ฐ๋ณต ๊ฐ๋ฅํ ๋ฐ์ดํฐ๋ฅผ ์ ๊ณตํฉ๋๋ค. ์ด๋ฅผ ํตํด ์๋ก ๋ค๋ฅธ ์ฝ๋ ๋ฒ์ ๊ฐ์ ์ฑ๋ฅ ๋น๊ต๊ฐ ๊ณต์ ํ๊ณ ์ ํํ๊ฒ ์ด๋ฃจ์ด์ง๋ฉฐ, ํ์ด ์์ ์๊ฒ ์ฑ๋ฅ ์ ํ์ ์์ธ์ ์ ํํ ์ฐพ์๋ผ ์ ์์ต๋๋ค.
ํ์ฅ์ฑ: ๋ค์ํ ์๋๋ฆฌ์ค ๋ฐ ํ๊ฒฝ์ ๊ฑธ์น ํ ์คํธ
๋ชจ๋ ๊ฐ๋ฅํ ๋ธ๋ผ์ฐ์ , ์ฅ์น, ๋คํธ์ํฌ ์กฐ๊ฑด ๋ฐ ๋ฐ์ดํฐ ๋ณผ๋ฅจ์ ์กฐํฉ์ ๊ฑธ์ณ ์ ํ๋ฆฌ์ผ์ด์ ์ ์๋์ผ๋ก ํ ์คํธํ๋ ๊ฒ์ ๋ถ๊ฐ๋ฅํฉ๋๋ค. ๊ทธ๋ฌ๋ ์๋ํ๋ ๋๊ตฌ๋ ์ค๋๋ ๋ชจ๋ฐ์ผ ์ฅ์น์์ 3G ๋คํธ์ํฌ๋ฅผ ์๋ฎฌ๋ ์ด์ ํ๋ ๊ฒ๋ถํฐ ์ ์ธ๊ณ์ ์์นํ ๊ฐ์ ์ฌ์ฉ์๋ก๋ถํฐ ๋์ ๋ถํ๋ฅผ ์์ฑํ๋ ๊ฒ๊น์ง ๊ด๋ฒ์ํ ์๋๋ฆฌ์ค๋ฅผ ์๋ฎฌ๋ ์ด์ ํ ์ ์์ต๋๋ค. ์ด๋ฌํ ํ์ฅ์ฑ์ ๋ค์ํ ๊ธ๋ก๋ฒ ์ฌ์ฉ์ ๊ธฐ๋ฐ์ ์ง์ํ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฐ์ฅ ์ค์ํ๋ฉฐ, ์ฌ์ฉ์๊ฐ ๊ฒฝํํ๋ ๋ค์ํ ์ค์ ์กฐ๊ฑด ํ์์๋ ์ฑ๋ฅ์ด ์ ์ง๋๋๋ก ๋ณด์ฅํฉ๋๋ค.
๋น์ฉ ํจ์จ์ฑ: ๋๋ฒ๊น ๋ฐ ๋ณต๊ตฌ ๋น์ฉ ์ ๊ฐ
์ฑ๋ฅ ๋ฌธ์ ๋ฅผ ์์ ํ๋ ๋น์ฉ์ ๋ฐ๊ฒฌ์ด ๋ฆ์ด์ง์๋ก ๊ธฐํ๊ธ์์ ์ผ๋ก ์ฆ๊ฐํฉ๋๋ค. ๊ฐ๋ฐ ๋๋ ์คํ ์ด์ง ๋จ๊ณ์์ ์ฑ๋ฅ ์ ํ๋ฅผ ์๋ณํ๋ฉด ๋น์ฉ์ด ๋ง์ด ๋๋ ํ๋ก๋์ ์ค๋จ, ๊ธด๊ธ ํจ์น ๋ฐ ํํ ์์์ ๋ฐฉ์งํ ์ ์์ต๋๋ค. ์ฑ๋ฅ ์ ํ๋ฅผ ์กฐ๊ธฐ์ ํฌ์ฐฉํจ์ผ๋ก์จ ๊ฐ๋ฐํ์ ์ค์๊ฐ ๋ฌธ์ ๋ฅผ ๋๋ฒ๊น ํ๋ ๋ฐ ์๋ง์ ์๊ฐ์ ์๋นํ๋ ๊ฒ์ ํผํ๊ณ , ์๊ธฐ ๊ด๋ฆฌ ๋์ ํ์ ์ ์ง์คํ ์ ์์ต๋๋ค. ์ด๋ ์๋นํ ์ฌ์ ์ ์ ๊ฐ๊ณผ ๊ฐ๋ฐ ๋ฆฌ์์ค์ ๋ณด๋ค ํจ์จ์ ์ธ ํ ๋น์ผ๋ก ์ด์ด์ง๋๋ค.
๊ฐ๋ฐ์ ์์ ๊ฐ: ๋๋ ค์ ์์ด ํ์ ํ ์ ์๋ ํ ์ญ๋ ๊ฐํ
๊ฐ๋ฐ์๊ฐ ์๋ํ๋ ์ฑ๋ฅ ๊ฒ์ฌ๊ฐ ๋ง๋ จ๋์ด ์์์ ์๋ฉด ๋ ํฐ ์์ ๊ฐ์ ๊ฐ์ง๊ณ ์ฝ๋๋ฅผ ์์ฑํ๊ณ ๋ฐฐํฌํ ์ ์์ต๋๋ค. ๊ทธ๋ค์ ์์ ๋ ๋ชจ๋ฅด๊ฒ ์ฑ๋ฅ์ ์ ํ์ํฌ ์ ์๋ค๋ ๋์์๋ ๋๋ ค์ ์์ด ๋ฆฌํฉํ ๋งํ๊ณ , ์๋ก์ด ๊ธฐ๋ฅ์ ๋์ ํ๊ณ , ์ข ์์ฑ์ ์ ๋ฐ์ดํธํ ์ ์์ต๋๋ค. ์ด๋ ์ง์์ ์ธ ๋ฐฐํฌ์ ์คํ์ ๋ฌธํ๋ฅผ ์กฐ์ฑํ์ฌ ๊ฐ๋ฐ ์ฃผ๊ธฐ๋ฅผ ๊ฐ์ํํ๊ณ , ์ฑ๋ฅ ๋ณดํธ ์ฅ์น๊ฐ ํ์ฑํ๋์ด ์๋ค๋ ๊ฒ์ ์๋ฉด์ ํ์ด ์ฌ์ฉ์์๊ฒ ๋ ๋นจ๋ฆฌ ๊ฐ์น๋ฅผ ์ ๊ณตํ ์ ์๋๋ก ํฉ๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ ์ฑ๋ฅ์ ํต์ฌ ์งํ: ์ค์ํ ๊ฒ์ ์ธก์ ํ๊ธฐ
์ฑ๋ฅ ์ ํ๋ฅผ ํจ๊ณผ์ ์ผ๋ก ๋ฐฉ์งํ๋ ค๋ฉด ๋จผ์ ๋ฌด์์ ์ธก์ ํด์ผ ํ๋์ง ์์์ผ ํฉ๋๋ค. ์๋ฐ์คํฌ๋ฆฝํธ ์ฑ๋ฅ์ ๋ค๋ฉด์ ์ด๋ฉฐ ๋จ์ผ ์งํ์ ์์กดํ๋ ๊ฒ์ ์คํด๋ฅผ ๋ถ๋ฌ์ผ์ผํฌ ์ ์์ต๋๋ค. ํฌ๊ด์ ์ธ ์ ๋ต์ '์คํ์ค ๋ฐ์ดํฐ'(ํฉ์ฑ ํ ์คํธ)์ 'ํ๋ ๋ฐ์ดํฐ'(์ค์ฌ์ฉ์ ๋ชจ๋ํฐ๋ง)๋ก ๋ถ๋ฅ๋๋ ์ฌ์ฉ์ ์ค์ฌ ์งํ์ ๊ธฐ์ ์ ์งํ์ ์กฐํฉ์ ๋ชจ๋ํฐ๋งํ๋ ๊ฒ์ ํฌํจํฉ๋๋ค.
์ฌ์ฉ์ ์ค์ฌ ์งํ (์ฝ์ด ์น ๋ฐ์ดํ ๋ฐ ๊ทธ ์ด์)
์ด๋ฌํ ์งํ๋ ๋ก๋ ์๋, ์ํธ์์ฉ์ฑ ๋ฐ ์๊ฐ์ ์์ ์ฑ์ ๋ํ ์ฌ์ฉ์์ ์ธ์์ ์ด์ ์ ๋ง์ถ์ด ๊ฒฝํ์ ์ง์ ์ ์ธ ์ํฅ์ ๋ฏธ์นฉ๋๋ค. ๊ตฌ๊ธ์ ์ฝ์ด ์น ๋ฐ์ดํ์ ์ค์ํ ์์ ์ ํธ๋ก ์์ฉํ๋ ๋ํ์ ์ธ ์์ ๋๋ค.
- ์ต๋ ์ฝํ ์ธ ํ ํ์ธํธ(LCP): ๋ทฐํฌํธ ๋ด์์ ํ์ด์ง์ ๊ฐ์ฅ ํฐ ์ฝํ ์ธ ์์(์ด๋ฏธ์ง, ๋น๋์ค ๋๋ ๋ธ๋ก ์์ค ํ ์คํธ)๊ฐ ํ์๋๋ ๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ์ ์ธก์ ํฉ๋๋ค. LCP๊ฐ ๋ฎ๋ค๋ ๊ฒ์ ์ฌ์ฉ์๊ฐ ์๋ฏธ ์๋ ์ฝํ ์ธ ๋ฅผ ๋น ๋ฅด๊ฒ ๋ณธ๋ค๋ ๊ฒ์ ๋ํ๋ ๋๋ค. ๋ชฉํ: < 2.5์ด. ์ธํฐ๋ท ์ธํ๋ผ๊ฐ ๋๋ฆฐ ์ง์ญ์ ์ฌ์ฉ์๋ฅผ ์ํด LCP๋ฅผ ์ต์ ํํ๋ ๊ฒ์ ๋น ํ๋ฉด์ ๋๋ฌด ์ค๋ ๋ณด์ง ์๋๋ก ํ๋ ๋ฐ ๊ฐ์ฅ ์ค์ํฉ๋๋ค.
- ์ต์ด ์
๋ ฅ ์ง์ฐ(FID) / ๋ค์ ํ์ธํธ์ ๋ํ ์ํธ์์ฉ(INP):
- ์ต์ด ์ ๋ ฅ ์ง์ฐ(FID): ์ฌ์ฉ์๊ฐ ํ์ด์ง์ ์ฒ์ ์ํธ์์ฉ(์: ๋ฒํผ ํด๋ฆญ, ๋งํฌ ํญ)ํ ์์ ๋ถํฐ ๋ธ๋ผ์ฐ์ ๊ฐ ์ค์ ๋ก ํด๋น ์ํธ์์ฉ์ ๋ํ ์ด๋ฒคํธ ํธ๋ค๋ฌ ์ฒ๋ฆฌ๋ฅผ ์์ํ ์ ์์ ๋๊น์ง์ ์๊ฐ์ ์ธก์ ํฉ๋๋ค. ์ด๋ ๋ณธ์ง์ ์ผ๋ก ๋ก๋ ์ค์ ๋ฐ์์ฑ์ ์ ๋ํํฉ๋๋ค. ๋ชฉํ: < 100๋ฐ๋ฆฌ์ด.
- ๋ค์ ํ์ธํธ์ ๋ํ ์ํธ์์ฉ(INP): 2024๋ 3์์ ์ฝ์ด ์น ๋ฐ์ดํ์ด ๋๋ ์๋ก์ด ์งํ๋ก, ํ์ด์ง ์๋ช ๋์ ๋ฐ์ํ๋ ๋ชจ๋ ์ ํจํ ์ํธ์์ฉ์ ๋๊ธฐ ์๊ฐ์ ์ธก์ ํ์ฌ ํ์ด์ง์ ์ ๋ฐ์ ์ธ ๋ฐ์์ฑ์ ํ๊ฐํฉ๋๋ค. INP๊ฐ ๋ฎ๋ค๋ ๊ฒ์ ์ํธ์์ฉ์ด ์ผ๊ด๋๊ฒ ๋น ๋ฅด๋ค๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค. ๋ชฉํ: < 200๋ฐ๋ฆฌ์ด. ์ด๋ ์ฌ์ฉ์๊ฐ ์์ ์์ฑ, ๊ฒ์ ํํฐ ์ฌ์ฉ ๋๋ ์ ์ธ๊ณ ์ด๋์์๋ ๋์ ์ฝํ ์ธ ์ ์ํธ์์ฉํ๋ ๋ฑ ์ฆ๊ฐ์ ์ธ ํผ๋๋ฐฑ์ ๊ธฐ๋ํ๋ ๋ํํ ์๋ฐ์คํฌ๋ฆฝํธ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋งค์ฐ ์ค์ํฉ๋๋ค.
- ๋์ ๋ ์ด์์ ์ด๋(CLS): ํ์ด์ง์ ์ ์ฒด ์๋ช ๋์ ๋ฐ์ํ๋ ๋ชจ๋ ์๊ธฐ์น ์์ ๋ ์ด์์ ์ด๋์ ๋ํ ๊ฐ๋ณ ๋ ์ด์์ ์ด๋ ์ ์์ ์ดํฉ์ ์ธก์ ํฉ๋๋ค. CLS๊ฐ ๋ฎ์ผ๋ฉด ์์ ์ ์ด๊ณ ์์ธก ๊ฐ๋ฅํ ์๊ฐ์ ๊ฒฝํ์ ๋ณด์ฅํ์ฌ ์ฌ์ฉ์๊ฐ ์ํธ์์ฉํ๋ ค๊ณ ํ ๋ ์์๊ฐ ๊ฐ์๊ธฐ ์์ง์ด๋ ๋ต๋ตํ ๊ฒฝ์ฐ๋ฅผ ๋ฐฉ์งํฉ๋๋ค. ๋ชฉํ: < 0.1. ์๊ธฐ์น ์์ ์ด๋์ ํฐ์น ์ฅ์น๋ฅผ ์ฌ์ฉํ๊ฑฐ๋ ์ธ์ง ๋ถํ๊ฐ ์๋ ์ฌ์ฉ์์๊ฒ ์์น์ ๊ด๊ณ์์ด ํนํ ์ง์ฆ๋๋ ์ผ์ ๋๋ค.
- ์ต์ด ์ฝํ ์ธ ํ ํ์ธํธ(FCP): ํ์ด์ง ๋ก๋๊ฐ ์์๋ ์์ ๋ถํฐ ํ์ด์ง ์ฝํ ์ธ ์ ์ผ๋ถ๊ฐ ํ๋ฉด์ ๋ ๋๋ง๋ ๋๊น์ง์ ์๊ฐ์ ์ธก์ ํฉ๋๋ค. ์ด๋ ์ฌ์ฉ์์๊ฒ ์งํ ์ํฉ์ ๋ณด์ฌ์ฃผ๋ ์ฒซ ๋ฒ์งธ ์ ํธ์ ๋๋ค. ๋ชฉํ: < 1.8์ด.
- ์ํธ์์ฉ๊น์ง์ ์๊ฐ(TTI): ํ์ด์ง๊ฐ ์์ ํ ์ํธ์์ฉ ๊ฐ๋ฅํด์ง ๋๊น์ง์ ์๊ฐ์ ์ธก์ ํฉ๋๋ค. ์ฆ, ์ ์ฉํ ์ฝํ ์ธ ๋ฅผ ํ์ํ๊ณ , ๋๋ถ๋ถ์ ๋ณด์ด๋ ํ์ด์ง ์์์ ์ด๋ฒคํธ ํธ๋ค๋ฌ๊ฐ ๋ฑ๋ก๋์์ผ๋ฉฐ, ํ์ด์ง๊ฐ 50ms ์ด๋ด์ ์ฌ์ฉ์ ์ํธ์์ฉ์ ์๋ตํ๋ ์ํ๋ฅผ ์๋ฏธํฉ๋๋ค. ๋ชฉํ: < 5์ด.
- ์ด ์ฐจ๋จ ์๊ฐ(TBT): FCP์ TTI ์ฌ์ด์์ ์ ๋ ฅ ๋ฐ์์ฑ์ ๋ฐฉํดํ ๋งํผ ๋ฉ์ธ ์ค๋ ๋๊ฐ ์ค๋ซ๋์ ์ฐจ๋จ๋ ์ด ์๊ฐ์ ์ธก์ ํฉ๋๋ค. ๋์ TBT๋ ์ข ์ข ์ํธ์์ฉ์ ์ง์ฐ์ํค๋ ๋ฌด๊ฑฐ์ด ์๋ฐ์คํฌ๋ฆฝํธ ์คํ์ ๊ฐ๋ฆฌํต๋๋ค. ๋ชฉํ: < 200๋ฐ๋ฆฌ์ด.
๊ธฐ์ ์ ์งํ (๋ด๋ถ ๋์)
์ด๋ฌํ ์งํ๋ ๋ธ๋ผ์ฐ์ ๊ฐ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฐ ๊ธฐํ ์์ฐ์ ์ฒ๋ฆฌํ๋ ๋ฐฉ์์ ๋ํ ํต์ฐฐ๋ ฅ์ ์ ๊ณตํ์ฌ ์ฌ์ฉ์ ์ค์ฌ ์ฑ๋ฅ ๋ฌธ์ ์ ๊ทผ๋ณธ ์์ธ์ ์ ํํ ์ฐพ์๋ด๋ ๋ฐ ๋์์ ์ค๋๋ค.
- ์คํฌ๋ฆฝํธ ํ๊ฐ ์๊ฐ: ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ฅผ ํ์ฑ, ์ปดํ์ผ ๋ฐ ์คํํ๋ ๋ฐ ์์๋ ์๊ฐ. ํ๊ฐ ์๊ฐ์ด ๊ธธ๋ฉด ์ข ์ข ํฌ๊ณ ์ต์ ํ๋์ง ์์ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฒ๋ค์ ๋ํ๋ ๋๋ค.
- ๋ฉ๋ชจ๋ฆฌ ์ฌ์ฉ๋ (ํ ํฌ๊ธฐ, DOM ๋ ธ๋ ์): ๊ณผ๋ํ ๋ฉ๋ชจ๋ฆฌ ์๋น๋ ํนํ ์ ํฅ ์์ฅ์์ ํํ ์ ์ฌ์ ์ฅ์น์์ ๋๋ ค์ง์ ์ ๋ฐํ๊ณ ๊ฒฐ๊ตญ ์ถฉ๋๋ก ์ด์ด์ง ์ ์์ต๋๋ค. ํ ํฌ๊ธฐ(์๋ฐ์คํฌ๋ฆฝํธ ๋ฉ๋ชจ๋ฆฌ)์ DOM ๋ ธ๋ ์๋ฅผ ๋ชจ๋ํฐ๋งํ๋ฉด ๋ฉ๋ชจ๋ฆฌ ๋์์ ์ง๋์น๊ฒ ๋ณต์กํ UI ๊ตฌ์กฐ๋ฅผ ๊ฐ์งํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
- ๋คํธ์ํฌ ์์ฒญ (ํฌ๊ธฐ, ์): ๋ค์ด๋ก๋๋ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ, CSS, ์ด๋ฏธ์ง ๋ฐ ๊ธฐํ ์์ฐ์ ์์ ์ด ํฌ๊ธฐ. ์ด๋ฅผ ์ค์ด๋ฉด ์ ์ก ์๊ฐ์ด ์ต์ํ๋๋ฉฐ, ์ด๋ ๋ฐ์ดํฐ ์๊ธ์ ์ ์ ํ์ด ์๊ฑฐ๋ ๋คํธ์ํฌ๊ฐ ๋๋ฆฐ ์ฌ์ฉ์์๊ฒ ์ค์ํฉ๋๋ค.
- CPU ์ฌ์ฉ๋: ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์ธํ ๋์ CPU ์ฌ์ฉ๋์ ๋ชจ๋ฐ์ผ ์ฅ์น์ ๋ฐฐํฐ๋ฆฌ ์๋ชจ์ ์ ๋ฐ์ ์ผ๋ก ๋ฐ์ ์๋ ๊ฒฝํ์ผ๋ก ์ด์ด์ง ์ ์์ต๋๋ค.
- ๊ธด ์์ (Long Tasks): ๋ฉ์ธ ์ค๋ ๋์์ 50๋ฐ๋ฆฌ์ด ์ด์ ์์๋๋ ๋ชจ๋ ์์ . ์ด๋ ๋ฉ์ธ ์ค๋ ๋๋ฅผ ์ฐจ๋จํ๊ณ ์ฌ์ฉ์ ์ํธ์์ฉ์ ์ง์ฐ์์ผ ๋์ TBT์ ๋์ INP์ ์ง์ ์ ์ผ๋ก ๊ธฐ์ฌํฉ๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ํ ์๋ํ ์ฑ๋ฅ ํ ์คํธ์ ์ข ๋ฅ
์ฑ๋ฅ ์ ํ๋ฅผ ์ข ํฉ์ ์ผ๋ก ๋ฐฉ์งํ๋ ค๋ฉด ๋ค์ํ ์ ํ์ ์๋ํ ํ ์คํธ๋ฅผ ํฌํจํ๋ ๋ค๊ฐ์ ์ธ ์ ๊ทผ ๋ฐฉ์์ด ํ์์ ์ ๋๋ค. ์ด๋ค์ ์ผ๋ฐ์ ์ผ๋ก '์คํ์ค ํ ์คํธ'(ํฉ์ฑ ๋ชจ๋ํฐ๋ง)์ 'ํ๋ ํ ์คํธ'(์ค์ฌ์ฉ์ ๋ชจ๋ํฐ๋ง)๋ก ๋ถ๋ฅ๋ ์ ์์ต๋๋ค.
ํฉ์ฑ ๋ชจ๋ํฐ๋ง (์คํ์ค ํ ์คํธ)
ํฉ์ฑ ๋ชจ๋ํฐ๋ง์ ํต์ ๋ ํ๊ฒฝ์์ ์ฌ์ฉ์ ์ํธ์์ฉ๊ณผ ํ์ด์ง ๋ก๋๋ฅผ ์๋ฎฌ๋ ์ด์ ํ์ฌ ์ฑ๋ฅ ๋ฐ์ดํฐ๋ฅผ ์์งํฉ๋๋ค. ์ฌํ ๊ฐ๋ฅํ ๊ฒฐ๊ณผ, ๊ธฐ์ค์ ๋น๊ต ๋ฐ ์กฐ๊ธฐ ๋ฐ๊ฒฌ์ ํ์ํฉ๋๋ค.
- ๋จ์ ์ฑ๋ฅ ํ
์คํธ (๋ง์ดํฌ๋ก ๋ฒค์น๋งํน):
- ๋ชฉ์ : ๊ฐ๋ณ ์๋ฐ์คํฌ๋ฆฝํธ ํจ์๋ ์์ ์ฝ๋ ๋ธ๋ก์ ์ฑ๋ฅ์ ์ธก์ ํฉ๋๋ค. ์ผ๋ฐ์ ์ผ๋ก ๋น ๋ฅด๊ฒ ์คํ๋๋ ํ ์คํธ๋ก, ํน์ ๋ก์ง ์กฐ๊ฐ์ด ์ฑ๋ฅ ๋ชฉํ(์: ์ ๋ ฌ ์๊ณ ๋ฆฌ์ฆ์ด ํน์ ๋ฐ๋ฆฌ์ด ์๊ณ๊ฐ ๋ด์ ์๋ฃ)๋ฅผ ์ถฉ์กฑํ๋์ง ํ์ธํฉ๋๋ค.
- ์ด์ : ์๋ชป๋ ๋ง์ดํฌ๋ก ์ต์ ํ๋ฅผ ํฌ์ฐฉํ๊ณ ์ฝ๋์ ๊ฐ์ฅ ๋ฎ์ ์์ค์์ ๋นํจ์จ์ ์ธ ์๊ณ ๋ฆฌ์ฆ์ ํ๋๊ทธํ์ฌ ๋ ํฐ ๊ตฌ์ฑ ์์์ ์ํฅ์ ๋ฏธ์น๊ธฐ ์ ์ ๋ฌธ์ ๋ฅผ ๋ฐ๊ฒฌํฉ๋๋ค. ์ค์ํ ์ ํธ๋ฆฌํฐ ํจ์๊ฐ ์ฑ๋ฅ์ ์ ์งํ๋๋ก ๋ณด์ฅํ๋ ๋ฐ ์ด์์ ์ ๋๋ค.
- ์์:
Benchmark.js์ ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ํฐ ๋ฐฐ์ด์ ์ฒ๋ฆฌํ๋ ์ฌ๋ฌ ๋ฐฉ๋ฒ์ ์คํ ์๊ฐ์ ๋น๊ตํ์ฌ ์๋ก ๋ฆฌํฉํ ๋ง๋ ์ ํธ๋ฆฌํฐ ํจ์๊ฐ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ์ผ์ผํค์ง ์๋๋ก ๋ณด์ฅํฉ๋๋ค.
- ์ปดํฌ๋ํธ/ํตํฉ ์ฑ๋ฅ ํ
์คํธ:
- ๋ชฉ์ : ํน์ UI ์ปดํฌ๋ํธ ๋๋ ๋ช ๊ฐ์ง ์ปดํฌ๋ํธ์ ๋ฐ์ดํฐ ์์ค ๊ฐ์ ์ํธ์์ฉ ์ฑ๋ฅ์ ํ๊ฐํฉ๋๋ค. ์ด ํ ์คํธ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฒฉ๋ฆฌ๋ ๋ถ๋ถ์ ๋ํ ๋ ๋๋ง ์๊ฐ, ์ํ ์ ๋ฐ์ดํธ ๋ฐ ๋ฆฌ์์ค ์ฌ์ฉ๋์ ์ค์ ์ ๋ก๋๋ค.
- ์ด์ : ํน์ ์ปดํฌ๋ํธ๋ ํตํฉ ์ง์ ๋ด์ ์ฑ๋ฅ ๋ฌธ์ ๋ฅผ ์ ํํ ์ฐพ์๋ด์ด ๋๋ฒ๊น ์ ๋ ์ง์ค์ ์ผ๋ก ๋ง๋ญ๋๋ค. ์๋ฅผ ๋ค์ด, ๋ณต์กํ ๋ฐ์ดํฐ ํ ์ด๋ธ ์ปดํฌ๋ํธ๊ฐ 10,000๊ฐ์ ํ์ผ๋ก ์ผ๋ง๋ ๋นจ๋ฆฌ ๋ ๋๋ง๋๋์ง ํ ์คํธํฉ๋๋ค.
- ์์: Cypress๋ Playwright์ ๊ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ React๋ Vue ์ปดํฌ๋ํธ๋ฅผ ๊ฒฉ๋ฆฌํ์ฌ ๋ง์ดํธํ๊ณ , ๋ค์ํ ๋ฐ์ดํฐ ๋ก๋๋ฅผ ์๋ฎฌ๋ ์ด์ ํ๋ฉด์ ๋ ๋๋ง ์๊ฐ์ด๋ ํธ๋ฆฌ๊ฑฐํ๋ ์ฌ๋ ๋๋ง ํ์๋ฅผ ํ์ธํฉ๋๋ค.
- ๋ธ๋ผ์ฐ์ ๊ธฐ๋ฐ ์ฑ๋ฅ ํ
์คํธ (์๋ํฌ์๋/ํ์ด์ง ์์ค):
- ๋ชฉ์ : ์ค์ ๋ธ๋ผ์ฐ์ ํ๊ฒฝ(์ข ์ข ํค๋๋ฆฌ์ค)์์ ์ ํ๋ฆฌ์ผ์ด์ ์ ํตํ ์ ์ฒด ์ฌ์ฉ์ ์ฌ์ ์ ์๋ฎฌ๋ ์ด์ ํฉ๋๋ค. ์ด ํ ์คํธ๋ ์ ์ฒด ํ์ด์ง๋ ์ค์ํ ์ฌ์ฉ์ ํ๋ก์ฐ์ ๋ํ LCP, TBT, ๋คํธ์ํฌ ์ํฐํด ๋ฐ์ดํฐ์ ๊ฐ์ ๋ฉํธ๋ฆญ์ ์บก์ฒํฉ๋๋ค.
- ์ด์ : ์ค์ ์ฌ์ฉ์ ๊ฒฝํ์ ๋ชจ๋ฐฉํ์ฌ ํ์ด์ง ์ฑ๋ฅ์ ๋ํ ์ ์ฒด์ ์ธ ์๊ฐ์ ์ ๊ณตํฉ๋๋ค. ์ ์ฒด ํ์ด์ง ๋ก๋ ๋ฐ ์ํธ์์ฉ์ ์ํฅ์ ๋ฏธ์น๋ ์ฑ๋ฅ ์ ํ๋ฅผ ๊ฐ์งํ๋ ๋ฐ ์ค์ํฉ๋๋ค.
- ์์: CI/CD ํ์ดํ๋ผ์ธ์ ์ผ๋ถ๋ก ์คํ ์ด์ง ํ๊ฒฝ์ ํน์ URL์ ๋ํด Lighthouse ๊ฐ์ฌ๋ฅผ ์คํํ๊ฑฐ๋, Playwright๋ก ์ฌ์ฉ์ ํ๋ก์ฐ๋ฅผ ์คํฌ๋ฆฝํ ํ์ฌ ๋ก๊ทธ์ธ ์ํ์ค๋ ์ฒดํฌ์์ ํ๋ก์ธ์ค๋ฅผ ์๋ฃํ๋ ๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ์ ์ธก์ ํฉ๋๋ค.
- ๋ถํ ํ
์คํธ:
- ๋ชฉ์ : ๋์ ์ฌ์ฉ์ ํธ๋ํฝ์ ์๋ฎฌ๋ ์ด์ ํ์ฌ ์คํธ๋ ์ค ์ํฉ์์ ์ ํ๋ฆฌ์ผ์ด์ (ํนํ ๋ฐฑ์๋, ๊ทธ๋ฌ๋ ๋ฌด๊ฑฐ์ด API ๋ถํ ํ์์์ ํ๋ก ํธ์๋ ๋ ๋๋ง๋ ํฌํจ)์ด ์ด๋ป๊ฒ ์๋ํ๋์ง ํ๊ฐํฉ๋๋ค. ์ฃผ๋ก ์๋ฒ ์ธก์ด์ง๋ง, ์๋ง์ API ํธ์ถ์ ํ๋ ์๋ฐ์คํฌ๋ฆฝํธ ๊ธฐ๋ฐ์ SPA์ ํ์์ ์ ๋๋ค.
- ์ข
๋ฅ:
- ์คํธ๋ ์ค ํ ์คํธ: ์์คํ ์ ํ๊ณ ์ด์์ผ๋ก ๋ฐ์ด๋ถ์ฌ ์ฅ์ ์ง์ ์ ์ฐพ์ต๋๋ค.
- ์คํ์ดํฌ ํ ์คํธ: ์์คํ ์ ๊ฐ์์ค๋ฝ๊ณ ๊ฐ๋ ฌํ ํธ๋ํฝ ๋ฒ์คํธ๋ฅผ ๊ฐํฉ๋๋ค.
- ๋ด๊ตฌ์ฑ ํ ์คํธ(Soak Testing): ์ฅ๊ธฐ๊ฐ ํ ์คํธ๋ฅผ ์คํํ์ฌ ์๊ฐ์ด ์ง๋จ์ ๋ฐ๋ผ ๋ํ๋๋ ๋ฉ๋ชจ๋ฆฌ ๋์๋ ๋ฆฌ์์ค ๊ณ ๊ฐ์ ๋ฐ๊ฒฌํฉ๋๋ค.
- ์ด์ : ์ ํ๋ฆฌ์ผ์ด์ ์ด ๋์ ์ฌ์ฉ์์ ๋๋ ๋ฐ์ดํฐ ์ฒ๋ฆฌ๋ฅผ ์ฑ๋ฅ ์ ํ ์์ด ์ฒ๋ฆฌํ ์ ์๋๋ก ๋ณด์ฅํ๋ฉฐ, ์ด๋ ์๊ฐ๋์ ๋ฐ๋ผ ๋ค๋ฅธ ์๊ฐ๋์ ์ต๋ ํธ๋ํฝ์ ๊ฒฝํํ๋ ๊ธ๋ก๋ฒ ์ ํ๋ฆฌ์ผ์ด์ ์ ํนํ ์ค์ํฉ๋๋ค.
- ์์: k6๋ JMeter๋ฅผ ์ฌ์ฉํ์ฌ ์์ฒ ๋ช ์ ๋์ ์ฌ์ฉ์๊ฐ Node.js ๋ฐฑ์๋์ ์ํธ์์ฉํ๋ ๊ฒ์ ์๋ฎฌ๋ ์ด์ ํ๊ณ ํ๋ก ํธ์๋ ๋ก๋ ์๊ฐ๊ณผ API ์๋ต ์๋๋ฅผ ๊ด์ฐฐํฉ๋๋ค.
์ค์ฌ์ฉ์ ๋ชจ๋ํฐ๋ง (RUM) (ํ๋ ํ ์คํธ)
RUM์ ์ค์ ์ฌ์ฉ์๊ฐ ๋ผ์ด๋ธ ์ ํ๋ฆฌ์ผ์ด์ ๊ณผ ์ํธ์์ฉํ๋ฉด์ ๋ฐ์ํ๋ ์ฑ๋ฅ ๋ฐ์ดํฐ๋ฅผ ์์งํฉ๋๋ค. ์ด๋ ํฉ์ฑ ํ ์คํธ๊ฐ ์์ ํ ๋ณต์ ํ์ง ๋ชปํ ์ ์๋ ๋ค์ํ ์กฐ๊ฑด(๋คํธ์ํฌ, ์ฅ์น, ์์น) ํ์์์ ์ค์ ์ฑ๋ฅ์ ๋ํ ํต์ฐฐ๋ ฅ์ ์ ๊ณตํฉ๋๋ค.
- ๋ชฉ์ : ํ๋ก๋์ ํ๊ฒฝ์์ ์ฌ์ฉ์๊ฐ ๊ฒฝํํ๋ ์ค์ ์ฑ๋ฅ์ ๋ชจ๋ํฐ๋งํ๊ณ , LCP, FID/INP, CLS์ ๊ฐ์ ๋ฉํธ๋ฆญ์ ์ปจํ ์คํธ ๋ฐ์ดํฐ(๋ธ๋ผ์ฐ์ , ์ฅ์น, ๊ตญ๊ฐ, ๋คํธ์ํฌ ์ ํ)์ ํจ๊ป ์บก์ฒํฉ๋๋ค.
- ์ด์ : ์ค์ ์ฌ์ฉ์์ ๋ํ ์ ํ๋ฆฌ์ผ์ด์ ์ฑ๋ฅ์ ํธํฅ๋์ง ์์ ์๊ฐ์ ์ ๊ณตํ๋ฉฐ, ํน์ ์ค์ ์กฐ๊ฑด(์: ๋๋จ์์์์ ๋๋ฆฐ ๋ชจ๋ฐ์ผ ๋คํธ์ํฌ, ์ํ๋ฆฌ์นด์ ๊ตฌํ ์๋๋ก์ด๋ ์ฅ์น)์์๋ง ๋ํ๋ ์ ์๋ ๋ฌธ์ ๋ฅผ ๊ฐ์กฐํฉ๋๋ค. ํฉ์ฑ ํ ์คํธ ๊ฒฐ๊ณผ๋ฅผ ๊ฒ์ฆํ๊ณ ์คํ์ค ํ ์คํธ์์ ํฌ์ฐฉ๋์ง ์์ ์ถ๊ฐ ์ต์ ํ ์์ญ์ ์๋ณํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
- ํฉ์ฑ ํ ์คํธ์์ ์๊ด๊ด๊ณ: RUM๊ณผ ํฉ์ฑ ๋ชจ๋ํฐ๋ง์ ์๋ก๋ฅผ ๋ณด์ํฉ๋๋ค. ํฉ์ฑ ํ ์คํธ๋ ์ ์ด์ ์ฌํ์ฑ์ ์ ๊ณตํ๊ณ , RUM์ ์ค์ ๊ฒ์ฆ๊ณผ ์ปค๋ฒ๋ฆฌ์ง๋ฅผ ์ ๊ณตํฉ๋๋ค. ์๋ฅผ ๋ค์ด, ํฉ์ฑ ํ ์คํธ๋ ์ฐ์ํ LCP๋ฅผ ๋ณด์ผ ์ ์์ง๋ง, RUM์ ์ ์ธ๊ณ 3G ๋คํธ์ํฌ ์ฌ์ฉ์๊ฐ ์ฌ์ ํ ๋ฎ์ LCP๋ฅผ ๊ฒฝํํ๊ณ ์์์ ๋ณด์ฌ์ฃผ์ด ํด๋น ํน์ ์กฐ๊ฑด์ ๋ํ ์ถ๊ฐ ์ต์ ํ๊ฐ ํ์ํจ์ ๋ํ๋ผ ์ ์์ต๋๋ค.
- ์ฑ๋ฅ์ ์ํ A/B ํ ์คํธ: RUM ๋๊ตฌ๋ ์ข ์ข ํ๋ก๋์ ํ๊ฒฝ์์ ๊ธฐ๋ฅ์ ๋ค๋ฅธ ๋ฒ์ (A ๋ B)์ ์ฑ๋ฅ์ ๋น๊ตํ ์ ์๊ฒ ํ์ฌ, ์ด๋ ๋ฒ์ ์ด ์ฐ์ํ์ง์ ๋ํ ์ค์ ๋ฐ์ดํฐ๋ฅผ ์ ๊ณตํฉ๋๋ค.
์๋ํ๋ ์๋ฐ์คํฌ๋ฆฝํธ ์ฑ๋ฅ ํ ์คํธ๋ฅผ ์ํ ๋๊ตฌ ๋ฐ ๊ธฐ์
์๋ํ๋ ์๋ฐ์คํฌ๋ฆฝํธ ์ฑ๋ฅ ํ ์คํธ๋ฅผ ์ํ ๋๊ตฌ ์ํ๊ณ๋ ํ๋ถํ๊ณ ๋ค์ํ๋ฉฐ, ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ค์ํ ๊ณ์ธต๊ณผ ๊ฐ๋ฐ ๋ผ์ดํ์ฌ์ดํด์ ์ฌ๋ฌ ๋จ๊ณ๋ฅผ ์ง์ํฉ๋๋ค. ์ฌ๋ฐ๋ฅธ ์กฐํฉ์ ์ ํํ๋ ๊ฒ์ด ๊ฐ๋ ฅํ ์ฑ๋ฅ ์ ํ ๋ฐฉ์ง ์ ๋ต์ ๊ตฌ์ถํ๋ ํต์ฌ์ ๋๋ค.
ํ๋ก ํธ์๋ ์ฑ๋ฅ์ ์ํ ๋ธ๋ผ์ฐ์ ๊ธฐ๋ฐ ๋๊ตฌ
- Google Lighthouse:
- ์ค๋ช : ์น ํ์ด์ง์ ํ์ง์ ๊ฐ์ ํ๊ธฐ ์ํ ์คํ ์์ค ์๋ํ ๋๊ตฌ์ ๋๋ค. ์ฑ๋ฅ, ์ ๊ทผ์ฑ, SEO, ํ๋ก๊ทธ๋ ์๋ธ ์น ์ฑ(PWA) ๋ฑ์ ๋ํ ๊ฐ์ฌ๋ฅผ ์ ๊ณตํฉ๋๋ค. ์ฑ๋ฅ์ ๋ํด์๋ ์ฝ์ด ์น ๋ฐ์ดํ, FCP, TBT ๋ฐ ํ๋ถํ ์ง๋จ ์ ๋ณด๋ฅผ ๋ณด๊ณ ํฉ๋๋ค.
- ์ฌ์ฉ๋ฒ: Chrome ๊ฐ๋ฐ์ ๋๊ตฌ์์ ์ง์ ์คํํ๊ฑฐ๋, Node.js CLI ๋๊ตฌ๋ก ์ฌ์ฉํ๊ฑฐ๋, CI/CD ํ์ดํ๋ผ์ธ์ ํตํฉํ ์ ์์ต๋๋ค. ํ๋ก๊ทธ๋๋ฐ ๋ฐฉ์์ API๋ ์๋ํ๋ ๊ฒ์ฌ์ ์ด์์ ์ ๋๋ค.
- ์ด์ : ํฌ๊ด์ ์ด๊ณ ์คํ ๊ฐ๋ฅํ ์กฐ์ธ๊ณผ ์ ์๋ฅผ ์ ๊ณตํ์ฌ ์ฑ๋ฅ ๊ฐ์ ๋ฐ ์ ํ๋ฅผ ์ฝ๊ฒ ์ถ์ ํ ์ ์์ต๋๋ค. ๋๋ฆฐ ๋คํธ์ํฌ์ CPU๋ฅผ ์๋ฎฌ๋ ์ด์ ํ์ฌ ๋ง์ ์ฌ์ฉ์์ ์ค์ ์กฐ๊ฑด์ ๋ชจ๋ฐฉํฉ๋๋ค.
- ๊ธ๋ก๋ฒ ๊ด๋ จ์ฑ: ์ ์์ ๊ถ์ฅ ์ฌํญ์ ์ ์ธ๊ณ์ ๋ค์ํ ๋คํธ์ํฌ ์กฐ๊ฑด๊ณผ ์ฅ์น ๊ธฐ๋ฅ์ ๋ณดํธ์ ์ผ๋ก ์ ์ฉ ๊ฐ๋ฅํ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํฉ๋๋ค.
- WebPageTest:
- ์ค๋ช : ํ์ด์ง ๋ก๋ ์๊ฐ, ๋คํธ์ํฌ ์์ฒญ ๋ฐ ๋ ๋๋ง ๋์์ ๋ํ ๊น์ ํต์ฐฐ๋ ฅ์ ์ ๊ณตํ๋ ๊ฐ๋ ฅํ ์น ์ฑ๋ฅ ํ ์คํธ ๋๊ตฌ์ ๋๋ค. ๋ค์ํ ์ง๋ฆฌ์ ์์น, ๋ค์ํ ์ฐ๊ฒฐ ์๋ ๋ฐ ์ฅ์น ์ ํ์ ์ค์ ๋ธ๋ผ์ฐ์ ์์ ํ ์คํธํ ์ ์์ต๋๋ค.
- ์ฌ์ฉ๋ฒ: ์น ์ธํฐํ์ด์ค ๋๋ API๋ฅผ ํตํด ์ฌ์ฉํฉ๋๋ค. ๋ณต์กํ ์ฌ์ฉ์ ์ฌ์ ์ ์คํฌ๋ฆฝํ ํ๊ณ ์๊ฐ ๊ฒฝ๊ณผ์ ๋ฐ๋ฅธ ๊ฒฐ๊ณผ๋ฅผ ๋น๊ตํ ์ ์์ต๋๋ค.
- ์ด์ : ๊ธ๋ก๋ฒ ์ธํ๋ผ ์ ๋ฐ์ ๊ฑธ์ณ ์ค์ ์ฌ์ฉ์ ์๋๋ฆฌ์ค๋ฅผ ์๋ฎฌ๋ ์ด์ ํ๋ ๋ฐ ์์ด ํ์ ์ถ์ข ์ ๋ถํํ๋ ์ ์ฐ์ฑ์ ์ ๊ณตํฉ๋๋ค. ์ํฐํด ์ฐจํธ์ ๋น๋์ค ์บก์ฒ๋ ๋๋ฒ๊น ์ ๋งค์ฐ ์ ์ฉํฉ๋๋ค.
- ๊ธ๋ก๋ฒ ๊ด๋ จ์ฑ: ๋ค๋ฅธ ๋๋ฅ(์: ์์์, ์ ๋ฝ, ๋จ๋ฏธ)์ ์์นํ ์๋ฒ์์ ํ ์คํธํ์ฌ ํน์ ๊ธ๋ก๋ฒ ์์ฅ์์ ์ ํ๋ฆฌ์ผ์ด์ ์ด ์ด๋ป๊ฒ ์๋ํ๋์ง ์ดํดํ๋ ๋ฐ ์ค์ํฉ๋๋ค.
- Chrome ๊ฐ๋ฐ์ ๋๊ตฌ (Performance ํจ๋, Audits ํญ):
- ์ค๋ช : Chrome ๋ธ๋ผ์ฐ์ ์ ์ง์ ๋ด์ฅ๋ ์ด ๋๊ตฌ๋ค์ ๋ก์ปฌ, ์๋ ์ฑ๋ฅ ๋ถ์ ๋ฐ ๋๋ฒ๊น ์ ๋งค์ฐ ์ ์ฉํฉ๋๋ค. Performance ํจ๋์ CPU ํ๋, ๋คํธ์ํฌ ์์ฒญ ๋ฐ ๋ ๋๋ง์ ์๊ฐํํ๊ณ , Audits ํญ์ Lighthouse๋ฅผ ํตํฉํฉ๋๋ค.
- ์ฌ์ฉ๋ฒ: ์ฃผ๋ก ๋ก์ปฌ ๊ฐ๋ฐ ๋ฐ ํน์ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์ ๋๋ฒ๊น ์ ์ฌ์ฉ๋ฉ๋๋ค.
- ์ด์ : ์๋ฐ์คํฌ๋ฆฝํธ ์คํ ํ๋กํ์ผ๋ง, ๊ธด ์์ ์๋ณ, ๋ฉ๋ชจ๋ฆฌ ๋์ ๋ฐ ๋ ๋ ์ฐจ๋จ ๋ฆฌ์์ค๋ฅผ ์๋ณํ๋ ๋ฐ ์ธ๋ถ์ ์ธ ์ ๋ณด๋ฅผ ์ ๊ณตํฉ๋๋ค.
์๋ํ ํ ์คํธ๋ฅผ ์ํ ํ๋ ์์ํฌ ๋ฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ
- Cypress, Playwright, Selenium:
- ์ค๋ช : ๋ธ๋ผ์ฐ์ ์ํธ์์ฉ์ ์๋ํํ๋ ์๋ํฌ์๋(E2E) ํ ์คํธ ํ๋ ์์ํฌ์ ๋๋ค. ์ฑ๋ฅ ๋จ์ธ(assertion)์ ํฌํจํ๋๋ก ํ์ฅํ ์ ์์ต๋๋ค.
- ์ฌ์ฉ๋ฒ: ์ฌ์ฉ์ ํ๋ก์ฐ๋ฅผ ์คํฌ๋ฆฝํ ํ๊ณ ํด๋น ์คํฌ๋ฆฝํธ ๋ด์์ ๋ด์ฅ ๊ธฐ๋ฅ์ ์ฌ์ฉํ๊ฑฐ๋ ๋ค๋ฅธ ๋๊ตฌ์ ํตํฉํ์ฌ ์ฑ๋ฅ ๋ฉํธ๋ฆญ์ ์บก์ฒํฉ๋๋ค(์: ํ์ ํ์ด๋ฐ ์ธก์ , ํน์ ์ํธ์์ฉ ํ ํ์ด์ง์ Lighthouse ์ ์ ํ์ธ). ํนํ Playwright๋ ๊ฐ๋ ฅํ ์ฑ๋ฅ ์ถ์ ๊ธฐ๋ฅ์ ๊ฐ์ง๊ณ ์์ต๋๋ค.
- ์ด์ : ๊ธฐ์กด์ ๊ธฐ๋ฅ์ E2E ํ ์คํธ ๋ด์์ ์ฑ๋ฅ ํ ์คํธ๋ฅผ ์ํํ์ฌ ์ค์ํ ์ฌ์ฉ์ ์ฌ์ ์ด ์ฑ๋ฅ์ ์ ์งํ๋๋ก ๋ณด์ฅํฉ๋๋ค.
- ์์: ๋์๋ณด๋๋ก ์ด๋ํ์ฌ ํน์ ์์๊ฐ ํ์๋ ๋๊น์ง ๊ธฐ๋ค๋ฆฐ ๋ค์ ํด๋น ํ์ด์ง ๋ก๋์ LCP๊ฐ ์ค์ ๋ ์๊ณ๊ฐ ๋ฏธ๋ง์ธ์ง ํ์ธํ๋ Playwright ์คํฌ๋ฆฝํธ.
- Puppeteer:
- ์ค๋ช : ํค๋๋ฆฌ์ค Chrome ๋๋ Chromium์ ์ ์ดํ๊ธฐ ์ํ ๋์ ์์ค์ API๋ฅผ ์ ๊ณตํ๋ Node.js ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋๋ค. ์น ์คํฌ๋ํ, PDF ์์ฑ์ ์์ฃผ ์ฌ์ฉ๋์ง๋ง ๋ง์ถคํ ์ฑ๋ฅ ํ ์คํธ ์คํฌ๋ฆฝํธ์๋ ๋งค์ฐ ๊ฐ๋ ฅํฉ๋๋ค.
- ์ฌ์ฉ๋ฒ: ๋ธ๋ผ์ฐ์ ์์ ์ ์๋ํํ๊ณ , ๋คํธ์ํฌ ์์ฒญ์ ์บก์ฒํ๊ณ , ๋ ๋๋ง ์๊ฐ์ ์ธก์ ํ๊ณ , ์ฌ์ง์ด Lighthouse ๊ฐ์ฌ๋ฅผ ํ๋ก๊ทธ๋๋ฐ ๋ฐฉ์์ผ๋ก ์คํํ๊ธฐ ์ํ ๋ง์ถคํ Node.js ์คํฌ๋ฆฝํธ๋ฅผ ์์ฑํฉ๋๋ค.
- ์ด์ : ๋ธ๋ผ์ฐ์ ๋์์ ๋ํ ์ธ๋ถํ๋ ์ ์ด๋ฅผ ์ ๊ณตํ์ฌ ๋งค์ฐ ๋ง์ถคํ๋ ์ฑ๋ฅ ์ธก์ ๋ฐ ๋ณต์กํ ์๋๋ฆฌ์ค ์๋ฎฌ๋ ์ด์ ์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค.
- k6, JMeter, Artillery:
- ์ค๋ช : ์ฃผ๋ก ๋ถํ ํ ์คํธ ๋๊ตฌ์ด์ง๋ง, API ์ํธ์์ฉ์ด ๋ง๊ฑฐ๋ Node.js ๋ฐฑ์๋๊ฐ ์๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ค์ํฉ๋๋ค. ์๋ฒ์ ์์ฒญ์ ๋ณด๋ด๋ ๋๋์ ๋์ ์ฌ์ฉ์๋ฅผ ์๋ฎฌ๋ ์ด์ ํฉ๋๋ค.
- ์ฌ์ฉ๋ฒ: ๋ค์ํ API ์๋ํฌ์ธํธ๋ ์น ํ์ด์ง๋ฅผ ๋์์ผ๋ก ํ๋ ํ ์คํธ ์คํฌ๋ฆฝํธ๋ฅผ ์ ์ํ์ฌ ์ฌ์ฉ์ ํ๋์ ์๋ฎฌ๋ ์ด์ ํฉ๋๋ค. ์๋ต ์๊ฐ, ์ค๋ฅ์จ ๋ฐ ์ฒ๋ฆฌ๋์ ๋ํด ๋ณด๊ณ ํฉ๋๋ค.
- ์ด์ : ํนํ ๊ธ๋ก๋ฒ ํผํฌ ๋ถํ ํ์์ ํ๋ก ํธ์๋ ๋ก๋ ์๊ฐ๊ณผ ์ํธ์์ฉ์ ์ํฅ์ ๋ฏธ์น ์ ์๋ ๋ฐฑ์๋ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ๋ฐ๊ฒฌํ๋ ๋ฐ ํ์์ ์ ๋๋ค.
- Benchmark.js:
- ์ค๋ช : ๊ฐ๋ณ ์๋ฐ์คํฌ๋ฆฝํธ ํจ์๋ ์ฝ๋ ์ค๋ํซ์ ๋ํด ๊ณ ํด์๋, ๊ต์ฐจ ํ๊ฒฝ ๋ฒค์น๋งํน์ ์ ๊ณตํ๋ ๊ฐ๋ ฅํ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฒค์น๋งํน ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋๋ค.
- ์ฌ์ฉ๋ฒ: ๋ค๋ฅธ ์๊ณ ๋ฆฌ์ฆ ์ ๊ทผ ๋ฐฉ์์ ์ฑ๋ฅ์ ๋น๊ตํ๊ฑฐ๋ ํน์ ์ ํธ๋ฆฌํฐ ํจ์๊ฐ ๋น ๋ฅธ ์ํ๋ฅผ ์ ์งํ๋๋ก ๋ง์ดํฌ๋ก ๋ฒค์น๋งํฌ๋ฅผ ์์ฑํฉ๋๋ค.
- ์ด์ : ๋จ์ ์์ค์ ์ฑ๋ฅ ํ ์คํธ ๋ฐ ๋ง์ดํฌ๋ก ์ต์ ํ์ ์ด์์ ์ ๋๋ค.
CI/CD ํตํฉ ๋๊ตฌ
- GitHub Actions, GitLab CI/CD, Jenkins, CircleCI:
- ์ค๋ช : ๋น๋, ํ ์คํธ ๋ฐ ๋ฐฐํฌ ํ๋ก์ธ์ค๋ฅผ ์๋ํํ๋ ์ง์์ ํตํฉ ๋ฐ ์ง์์ ๋ฐฐํฌ ํ๋ซํผ์ ๋๋ค.
- ์ฌ์ฉ๋ฒ: Lighthouse CLI, WebPageTest API ํธ์ถ, Playwright ์ฑ๋ฅ ์คํฌ๋ฆฝํธ ๋๋ k6 ํ ์คํธ๋ฅผ ํ์ดํ๋ผ์ธ์ ์ง์ ํตํฉํฉ๋๋ค. ๋ฉํธ๋ฆญ์ด ๋ฏธ๋ฆฌ ์ ์๋ ์๊ณ๊ฐ ์๋๋ก ๋จ์ด์ง๋ฉด ๋น๋๊ฐ ์คํจํ๋๋ก '์ฑ๋ฅ ๊ฒ์ดํธ'๋ฅผ ๊ตฌ์ฑํฉ๋๋ค.
- ์ด์ : ๋ชจ๋ ์ฝ๋ ๋ณ๊ฒฝ ์ ์ฑ๋ฅ์ด ์ง์์ ์ผ๋ก ๋ชจ๋ํฐ๋ง๋๋๋ก ๋ณด์ฅํ์ฌ ์ฑ๋ฅ ์ ํ๊ฐ ์ฃผ ์ฝ๋๋ฒ ์ด์ค์ ๋ณํฉ๋๋ ๊ฒ์ ๋ฐฉ์งํฉ๋๋ค. ๊ฐ๋ฐ์์๊ฒ ์ฆ๊ฐ์ ์ธ ํผ๋๋ฐฑ์ ์ ๊ณตํฉ๋๋ค.
- ๊ธ๋ก๋ฒ ๊ด๋ จ์ฑ: ๊ทผ๋ฌด ์๊ฐ์ด๋ ์ง๋ฆฌ์ ์์น์ ๊ด๊ณ์์ด ๋ถ์ฐ๋ ๊ฐ๋ฐํ ์ ๋ฐ์ ๊ฑธ์ณ ์ฑ๋ฅ ํ์ค์ ์ผ๊ด๋๊ฒ ์ํํฉ๋๋ค.
์ค์ฌ์ฉ์ ๋ชจ๋ํฐ๋ง (RUM) ํ๋ซํผ
- Google Analytics (Web Vitals ๋ณด๊ณ ์ ํฌํจ):
- ์ค๋ช : ์ฃผ๋ก ๋ถ์ ๋๊ตฌ์ด์ง๋ง, Google Analytics 4(GA4)๋ ์ฝ์ด ์น ๋ฐ์ดํ์ ๋ํ ๋ณด๊ณ ์๋ฅผ ์ ๊ณตํ์ฌ ์ค์ ์ฌ์ฉ์ ๊ฒฝํ์ ๋ํ ํต์ฐฐ๋ ฅ์ ์ ๊ณตํฉ๋๋ค.
- ์ฌ์ฉ๋ฒ: ์ ํ๋ฆฌ์ผ์ด์ ์ GA4 ์ถ์ ์ ํตํฉํฉ๋๋ค.
- ์ด์ : ์ฝ์ด ์น ๋ฐ์ดํ์ ๋ํ ํ๋ ๋ฐ์ดํฐ๋ฅผ ๋ฌด๋ฃ๋ก ์ฝ๊ฒ ์ป์ ์ ์๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํ์ฌ ์ค์ ์ฌ์ฉ์ ์ฑ๋ฅ์ ์ดํดํ๋ ๋ฐ ์ค์ํฉ๋๋ค.
- New Relic, Datadog, Dynatrace, Sentry:
- ์ค๋ช : ํ๋ก ํธ์๋ ์ฑ๋ฅ, ๋ฐฑ์๋ ์ํ ๋ฐ ์ค๋ฅ ์ถ์ ์ ๋ํ ์์ธํ ํต์ฐฐ๋ ฅ์ ์ ๊ณตํ๋ ํฌ๊ด์ ์ธ ์ ํ๋ฆฌ์ผ์ด์ ์ฑ๋ฅ ๋ชจ๋ํฐ๋ง(APM) ๋ฐ RUM ํ๋ซํผ์ ๋๋ค.
- ์ฌ์ฉ๋ฒ: SDK๋ฅผ ์ ํ๋ฆฌ์ผ์ด์ ์ ํตํฉํฉ๋๋ค. ํ์ด์ง ๋ก๋, AJAX ์์ฒญ, ์๋ฐ์คํฌ๋ฆฝํธ ์ค๋ฅ ๋ฐ ์ฌ์ฉ์ ์ํธ์์ฉ์ ๋ํ ์ธ๋ถํ๋ ๋ฐ์ดํฐ๋ฅผ ์์งํ๋ฉฐ, ์ข ์ข ์ง๋ฆฌ, ์ฅ์น ๋ฐ ๋คํธ์ํฌ๋ณ๋ก ์ธ๋ถํ๋ฉ๋๋ค.
- ์ด์ : ์ค์ ์ฑ๋ฅ์ ๋ํ ๊น๊ณ ์คํ ๊ฐ๋ฅํ ํต์ฐฐ๋ ฅ์ ์ ๊ณตํ์ฌ ๊ทผ๋ณธ ์์ธ ๋ถ์ ๋ฐ ์ ์ ์ ๋ฌธ์ ํด๊ฒฐ์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค. ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ธ๋ก๋ฒ ์ฑ๋ฅ ํ๊ฒฝ์ ์ดํดํ๋ ๋ฐ ํ์์ ์ ๋๋ค.
์๋ํ๋ ์ฑ๋ฅ ํ ์คํธ ๊ตฌํํ๊ธฐ: ๋จ๊ณ๋ณ ๊ฐ์ด๋
ํจ๊ณผ์ ์ธ ์๋ํ ์ฑ๋ฅ ํ ์คํธ ์ ๋ต์ ์๋ฆฝํ๋ ค๋ฉด ์ ์คํ ๊ณํ, ์ผ๊ด๋ ์คํ ๋ฐ ์ง์์ ์ธ ๋ฐ๋ณต์ด ํ์ํฉ๋๋ค. ๋ค์์ ๊ธ๋ก๋ฒ ๊ด์ ์ ์ผ๋์ ๋๊ณ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ๋ฐ ์ํฌํ๋ก์ฐ์ ์ฑ๋ฅ ์ ํ ๋ฐฉ์ง๋ฅผ ํตํฉํ๋ ๊ตฌ์กฐํ๋ ์ ๊ทผ ๋ฐฉ์์ ๋๋ค.
1๋จ๊ณ: ์ฑ๋ฅ ๋ชฉํ ๋ฐ ๊ธฐ์ค์ ์ ์
๊ฐ์ ๋๋ ์ ํ๋ฅผ ์ธก์ ํ๊ธฐ ์ ์ '์ข์' ์ํ๊ฐ ๋ฌด์์ธ์ง, ํ์ฌ ์ํ๊ฐ ์ด๋ค์ง ์์์ผ ํฉ๋๋ค.
- ์ค์ ์ฌ์ฉ์ ์ฌ์ ์๋ณ: ์ฌ์ฉ์๊ฐ ์ ํ๋ฆฌ์ผ์ด์ ์ ํตํด ๊ฑฐ์น๋ ๊ฐ์ฅ ์ค์ํ ๊ฒฝ๋ก(์: ๋ก๊ทธ์ธ, ๊ฒ์, ์ ํ ๋ณด๊ธฐ, ์ฒดํฌ์์, ๋์๋ณด๋ ๋ก๋, ์ฝํ ์ธ ์๋น)๋ฅผ ๊ฒฐ์ ํฉ๋๋ค. ์ด๊ฒ๋ค์ ์ฑ๋ฅ์ด ํํ๋ ์ ์๋ ์ฌ์ ์ ๋๋ค. ๊ธ๋ก๋ฒ ์ ์์๊ฑฐ๋ ํ๋ซํผ์ ๊ฒฝ์ฐ, ์ด๋ ๋ค๋ฅธ ์ธ์ด๋ก ์ ํ์ ํ์ํ๊ณ , ์ฅ๋ฐ๊ตฌ๋์ ์ถ๊ฐํ๊ณ , ๋ค์ํ ๊ฒฐ์ ๋ฐฉ๋ฒ์ผ๋ก ๊ฒฐ์ ํ๋ ๊ฒ์ ํฌํจํ ์ ์์ต๋๋ค.
- ์ธก์ ๊ฐ๋ฅํ KPI(ํต์ฌ ์ฑ๊ณผ ์งํ) ์ค์ : ์ค์ํ ์ฌ์ฉ์ ์ฌ์ ์ ๊ธฐ๋ฐ์ผ๋ก ๊ตฌ์ฒด์ ์ด๊ณ ์ ๋ํํ ์ ์๋ ์ฑ๋ฅ ๋ชฉํ๋ฅผ ์ ์ํฉ๋๋ค. ์ฝ์ด ์น ๋ฐ์ดํ๊ณผ ๊ฐ์ ์ฌ์ฉ์ ์ค์ฌ ๋ฉํธ๋ฆญ์ ์ฐ์ ์์์ ๋ก๋๋ค.
- ์์: LCP < 2.5์ด, INP < 200ms, CLS < 0.1, TBT < 200ms. ์ค์๊ฐ ํ์ ๋๊ตฌ์ ๊ฒฝ์ฐ, ๋ฉ์์ง ์ ๋ฌ ๋๊ธฐ ์๊ฐ์ ๋ํ ๋ชฉํ๋ ์์ ์ ์์ต๋๋ค.
- ๊ธฐ์ค์ ์ค์ : ํ์ฌ ํ๋ก๋์ ๋ฒ์ ์ ์ ํ๋ฆฌ์ผ์ด์ (๋๋ ์์ ์ ์ธ ๋ฆด๋ฆฌ์ค ๋ธ๋์น)์ ๋ํด ์ ํํ ์ฑ๋ฅ ํ ์คํธ๋ฅผ ์คํํ์ฌ ์ด๊ธฐ ์ฑ๋ฅ ๋ฉํธ๋ฆญ์ ์ค์ ํฉ๋๋ค. ์ด ๊ธฐ์ค์ ์ ์ฑ๋ฅ ์ ํ๋ฅผ ๊ฐ์งํ๋ ๊ธฐ์ค์ ์ด ๋ ๊ฒ์ ๋๋ค. ์ด ๊ฐ๋ค์ ๊ผผ๊ผผํ๊ฒ ๋ฌธ์ํํฉ๋๋ค.
2๋จ๊ณ: ์ฌ๋ฐ๋ฅธ ๋๊ตฌ ๋ฐ ์ ๋ต ์ ํ
๋ชฉํ, ์ ํ๋ฆฌ์ผ์ด์ ์ํคํ ์ฒ ๋ฐ ํ์ ์ ๋ฌธ ์ง์์ ๊ธฐ๋ฐ์ผ๋ก ๋๊ตฌ์ ์กฐํฉ์ ์ ํํฉ๋๋ค.
- ํฉ์ฑ ํ ์คํธ์ RUM ๊ฒฐํฉ: ๊ฐ๋ ฅํ ์ ๋ต์ ๋ ๋ค ํ์ฉํฉ๋๋ค. ๊ฐ๋ฐ ๋จ๊ณ์์ ํต์ ๋๊ณ ์ฌํ ๊ฐ๋ฅํ ๊ฒฐ๊ณผ๋ฅผ ์ํ ํฉ์ฑ ํ ์คํธ์, ๋ค์ํ ๊ธ๋ก๋ฒ ์ฌ์ฉ์ ๊ธฐ๋ฐ์ผ๋ก๋ถํฐ ์ค์ ๊ฒ์ฆ๊ณผ ํต์ฐฐ๋ ฅ์ ์ป๊ธฐ ์ํ RUM์ ๋๋ค.
- ๊ธฐ์กด CI/CD์ ํตํฉ: ๊ธฐ์กด ๊ฐ๋ฐ ํ์ดํ๋ผ์ธ์ ์ฝ๊ฒ ํตํฉํ ์ ์๋ ๋๊ตฌ(์: GitHub Actions์ฉ Lighthouse CLI, GitLab CI์ Playwright ํ ์คํธ)๋ฅผ ์ฐ์ ์์์ ๋ก๋๋ค.
- ํน์ ์๊ตฌ ์ฌํญ ๊ณ ๋ ค: ๋ง์ดํฌ๋ก ๋ฒค์น๋งํน์ด ํ์ํ๊ฐ์? ๋๊ท๋ชจ ๋ถํ ํ ์คํธ๊ฐ ํ์ํ๊ฐ์? ์ฌ๋ฌ ๊ธ๋ก๋ฒ ์์น์์์ ์ฌ์ธต ๋คํธ์ํฌ ๋ถ์์ด ํ์ํ๊ฐ์? ํ์์ ๋ฐ๋ผ ๋๊ตฌ ์ธํธ๋ฅผ ๋ง์ถคํํฉ๋๋ค.
3๋จ๊ณ: ์ฑ๋ฅ ํ ์คํธ ์ผ์ด์ค ๊ฐ๋ฐ
์ค์ํ ์ฌ์ฉ์ ์ฌ์ ๊ณผ KPI๋ฅผ ์๋ํ๋ ํ ์คํธ ์คํฌ๋ฆฝํธ๋ก ๋ณํํฉ๋๋ค.
- ์ค์ ์ฌ์ฉ์ ํ๋ก์ฐ ์คํฌ๋ฆฝํธ: ๊ฐ์ฅ ์ค์ํ ์ฌ์ฉ์ ๊ฒฝ๋ก๋ฅผ ํ์ํ๋ E2E ํ
์คํธ(Playwright, Cypress ์ฌ์ฉ)๋ฅผ ์์ฑํฉ๋๋ค. ์ด ์คํฌ๋ฆฝํธ ๋ด์์ ์ฑ๋ฅ ๋ฉํธ๋ฆญ์ ์บก์ฒํ๊ณ ํ์ธํฉ๋๋ค.
- ์์: ๋ก๊ทธ์ธํ์ฌ ํน์ ํ์ด์ง๋ก ์ด๋ํ๊ณ , ํต์ฌ ์์๊ฐ ํ์๋ ๋๊น์ง ๊ธฐ๋ค๋ฆฐ ๋ค์ ํด๋น ํ์ด์ง ๋ก๋์ LCP์ TBT๋ฅผ ๊ฒ์ํ๋ Playwright ์คํฌ๋ฆฝํธ.
- ์ฃ์ง ์ผ์ด์ค ๋ฐ ๋ค์ํ ์กฐ๊ฑด: ์ด๋ ค์ด ์ค์ ์๋๋ฆฌ์ค๋ฅผ ์๋ฎฌ๋ ์ด์
ํ๋ ํ
์คํธ๋ฅผ ๋ง๋ญ๋๋ค:
- ๋คํธ์ํฌ ์ค๋กํ๋ง: 3G ๋๋ 4G ์ฐ๊ฒฐ์ ์๋ฎฌ๋ ์ด์ ํฉ๋๋ค.
- CPU ์ค๋กํ๋ง: ๋๋ฆฐ ์ฅ์น๋ฅผ ์๋ฎฌ๋ ์ด์ ํฉ๋๋ค.
- ๋์ฉ๋ ๋ฐ์ดํฐ ๋ก๋: ์์๋๋ ์ต๋ ๋ฐ์ดํฐ ๋ณผ๋ฅจ์ผ๋ก ์ปดํฌ๋ํธ๋ฅผ ํ ์คํธํฉ๋๋ค.
- ์ง๋ฆฌ์ ์๋ฎฌ๋ ์ด์ : WebPageTest์ ๊ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ๋ค๋ฅธ ๊ธ๋ก๋ฒ ์ง์ญ์์ ํ ์คํธ๋ฅผ ์คํํฉ๋๋ค.
- ๋จ์/์ปดํฌ๋ํธ ์์ค ํ ์คํธ: ์ฑ๋ฅ์ ๋งค์ฐ ๋ฏผ๊ฐํ ์๋ฐ์คํฌ๋ฆฝํธ ํจ์๋ ์ปดํฌ๋ํธ์ ๊ฒฝ์ฐ, ์ ์ฉ ๋ง์ดํฌ๋ก ๋ฒค์น๋งํฌ(Benchmark.js)๋ ์ปดํฌ๋ํธ ์์ค ์ฑ๋ฅ ํ ์คํธ๋ฅผ ์์ฑํฉ๋๋ค.
4๋จ๊ณ: CI/CD ํ์ดํ๋ผ์ธ์ ํตํฉ
์ฑ๋ฅ ํ ์คํธ์ ์คํ ๋ฐ ๋ณด๊ณ ๋ฅผ ์๋ํํฉ๋๋ค.
- ํ
์คํธ ์คํ ์๋ํ: ๊ด๋ จ ์ด๋ฒคํธ์์ ์ฑ๋ฅ ํ
์คํธ๊ฐ ์๋์ผ๋ก ์คํ๋๋๋ก CI/CD ํ์ดํ๋ผ์ธ์ ๊ตฌ์ฑํฉ๋๋ค:
- ๋ชจ๋ ํ ๋ฆฌํ์คํธ(PR): ์ค์ํ ํฉ์ฑ ํ ์คํธ์ ๋น ๋ฅธ ์ค์ํธ๋ฅผ ์คํํ์ฌ ์ฑ๋ฅ ์ ํ๋ฅผ ์กฐ๊ธฐ์ ํฌ์ฐฉํฉ๋๋ค.
- Main/๋ฆด๋ฆฌ์ค ๋ธ๋์น๋ก์ ๋ชจ๋ ๋ณํฉ: ํต์ฌ ํ์ด์ง์ ๋ํ Lighthouse ๊ฐ์ฌ๋ฅผ ํฌํจํ ์ ์๋ ๋ ํฌ๊ด์ ์ธ ํ ์คํธ ์ค์ํธ๋ฅผ ์คํํฉ๋๋ค.
- ์ผ๊ฐ ๋น๋: ๋ ์ค๋ ์คํ๋๊ณ ๋ฆฌ์์ค ์ง์ฝ์ ์ธ ํ ์คํธ(์: ๋ด๊ตฌ์ฑ ํ ์คํธ, ๊ด๋ฒ์ํ ๋ถํ ํ ์คํธ, ๋ค์ํ ๊ธ๋ก๋ฒ ์์น์์์ WebPageTest ์คํ)๋ฅผ ์ํํฉ๋๋ค.
- ์ฑ๋ฅ "๊ฒ์ดํธ" ์ค์ : CI/CD ํ์ดํ๋ผ์ธ ๋ด์ ์๊ณ๊ฐ์ ์ ์ํฉ๋๋ค. ์ฑ๋ฅ ๋ฉํธ๋ฆญ(์: LCP)์ด ์ ์๋ ์๊ณ๊ฐ์ ์ด๊ณผํ๊ฑฐ๋ ๊ธฐ์ค์ ์์ ํฌ๊ฒ ์ ํ(์: >10% ๋๋ ค์ง)๋๋ฉด ๋น๋๊ฐ ์คํจํ๊ฑฐ๋ ๊ฒฝ๊ณ ๊ฐ ๋ฐ์ํด์ผ ํฉ๋๋ค. ์ด๋ ์ฑ๋ฅ ์ ํ๊ฐ ๋ณํฉ๋๋ ๊ฒ์ ๋ฐฉ์งํฉ๋๋ค.
- ์์: Lighthouse ์ฑ๋ฅ ์ ์๊ฐ 5์ ์ด์ ๋จ์ด์ง๊ฑฐ๋ LCP๊ฐ 500ms ์ฆ๊ฐํ๋ฉด PR์ ์คํจ์ํต๋๋ค.
- ์๋ฆผ ๋ฐ ๋ณด๊ณ : ์ฑ๋ฅ ๊ฒ์ดํธ๊ฐ ์คํจํ ๋ ๊ด๋ จ ํ์ ์๋ฆผ(์: Slack, ์ด๋ฉ์ผ)์ ๋ณด๋ด๋๋ก CI/CD ์์คํ ์ ๊ตฌ์ฑํฉ๋๋ค. ์๊ฐ ๊ฒฝ๊ณผ์ ๋ฐ๋ฅธ ์ฑ๋ฅ ์ถ์ธ๋ฅผ ๋ช ํํ๊ฒ ๋ณด์ฌ์ฃผ๋ ๋ณด๊ณ ์๋ฅผ ์์ฑํฉ๋๋ค.
5๋จ๊ณ: ๊ฒฐ๊ณผ ๋ถ์ ๋ฐ ๋ฐ๋ณต
ํ ์คํธ๋ ๊ฒฐ๊ณผ์ ๋ฐ๋ผ ์กฐ์น๊ฐ ์ทจํด์ง ๋๋ง ๊ฐ์น๊ฐ ์์ต๋๋ค.
- ๋์๋ณด๋ ๋ฐ ๋ณด๊ณ ์: Grafana, Kibana ๋๋ APM ์ ๊ณต์ ์ฒด์ ๋ด์ฅ ๋์๋ณด๋์ ๊ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ์๊ฐ ๊ฒฝ๊ณผ์ ๋ฐ๋ฅธ ์ฑ๋ฅ ๋ฉํธ๋ฆญ์ ์๊ฐํํฉ๋๋ค. ์ด๋ ์ถ์ธ์ ์ง์์ ์ธ ๋ณ๋ชฉ ํ์์ ์๋ณํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
- ๋ณ๋ชฉ ํ์ ์๋ณ: ์ฑ๋ฅ ์ ํ๊ฐ ๊ฐ์ง๋๋ฉด ๋๊ตฌ์ ์์ธํ ์ง๋จ ๋ฐ์ดํฐ(์: Lighthouse ๊ฐ์ฌ, WebPageTest ์ํฐํด, Chrome ๊ฐ๋ฐ์ ๋๊ตฌ ํ๋กํ)๋ฅผ ์ฌ์ฉํ์ฌ ๊ทผ๋ณธ ์์ธ์ด ์ต์ ํ๋์ง ์์ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฒ๋ค์ธ์ง, ๋ฌด๊ฑฐ์ด ํ์ฌ ์คํฌ๋ฆฝํธ์ธ์ง, ๋นํจ์จ์ ์ธ ๋ ๋๋ง์ธ์ง, ๋ฉ๋ชจ๋ฆฌ ๋์์ธ์ง ์ ํํ ์ฐพ์๋ ๋๋ค.
- ์์ ์ฐ์ ์์ ์ง์ : ๊ฐ์ฅ ์ํฅ๋ ฅ ์๋ ์ฑ๋ฅ ๋ฌธ์ ๋ถํฐ ๋จผ์ ํด๊ฒฐํฉ๋๋ค. ๋ชจ๋ '์ต์ ์ด ์๋' ์ธก๋ฉด์ด ์ฆ๊ฐ์ ์ธ ์ฃผ์๋ฅผ ํ์๋ก ํ๋ ๊ฒ์ ์๋๋๋ค. ์ฌ์ฉ์ ๊ฒฝํ๊ณผ ๋น์ฆ๋์ค ๋ชฉํ์ ์ง์ ์ ์ธ ์ํฅ์ ๋ฏธ์น๋ ๋ฌธ์ ์ ์ง์คํฉ๋๋ค.
- ์ง์์ ์ธ ๊ฐ์ ๋ฃจํ: ์ฑ๋ฅ ํ ์คํธ๋ ์ผํ์ฑ ํ๋์ด ์๋๋๋ค. ์ง์์ ์ผ๋ก ๋ฉํธ๋ฆญ์ ๊ฒํ ํ๊ณ , ๋ชฉํ๋ฅผ ์กฐ์ ํ๊ณ , ํ ์คํธ๋ฅผ ์ ๋ฐ์ดํธํ๊ณ , ์ต์ ํ ์ ๋ต์ ๊ฐ์ ํฉ๋๋ค.
6๋จ๊ณ: RUM์ผ๋ก ํ๋ก๋์ ํ๊ฒฝ ๋ชจ๋ํฐ๋ง
๋ง์ง๋ง์ด์ ์ค์ํ ๋จ๊ณ๋ ์ค์ ๋ฐ์ดํฐ๋ก ๋ ธ๋ ฅ์ ๊ฒ์ฆํ๋ ๊ฒ์ ๋๋ค.
- ํฉ์ฑ ํ ์คํธ ๊ฒฐ๊ณผ ๊ฒ์ฆ: ์คํ์ค ๋ฐ์ดํฐ๋ฅผ RUM ๋ฐ์ดํฐ์ ๋น๊ตํฉ๋๋ค. ํ๋ก๋์ ์์ ๋ณด๋ ์ฑ๋ฅ ๋ฉํธ๋ฆญ์ด ํฉ์ฑ ํ ์คํธ์ ์ผ์นํฉ๋๊น? ๊ทธ๋ ์ง ์๋ค๋ฉด, ๋ถ์ผ์น(์: ํ๊ฒฝ, ๋ฐ์ดํฐ ๋๋ ์ฌ์ฉ์ ํ๋์ ์ฐจ์ด)๋ฅผ ์กฐ์ฌํฉ๋๋ค.
- ์ค์ ๋ฌธ์ ์๋ณ: RUM์ ํน์ ์ฅ์น, ๋ธ๋ผ์ฐ์ , ๋คํธ์ํฌ ์กฐ๊ฑด ๋๋ ์ง๋ฆฌ์ ์์น์ ํน์ ํ ์ฑ๋ฅ ๋ฌธ์ ๋ฅผ ๋ฐ๊ฒฌํ ๊ฒ์ด๋ฉฐ, ์ด๋ ํฉ์ฑ์ ์ผ๋ก ์ฌํํ๊ธฐ ์ด๋ ค์ธ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด, ์ํ๋ฆฌ์นด๋ ์์์ ์ผ๋ถ ์ง์ญ์ ๊ตฌํ 2G/3G ๋คํธ์ํฌ์์ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ก์ธ์คํ๋ ์ฌ์ฉ์์ ๋ํ ํน์ ์ฑ๋ฅ ์ ํ.
- ๋ ๊น์ ํต์ฐฐ๋ ฅ์ ์ํ ์ฌ์ฉ์ ์ธ๋ถํ: RUM ํ๋ซํผ์ ์ฌ์ฉํ์ฌ ์ฅ์น ์ ํ, ์ด์ ์ฒด์ , ๋ธ๋ผ์ฐ์ , ๊ตญ๊ฐ ๋ฐ ๋คํธ์ํฌ ์๋์ ๊ฐ์ ์์ธ์ผ๋ก ์ฑ๋ฅ ๋ฐ์ดํฐ๋ฅผ ์ธ๋ถํํฉ๋๋ค. ์ด๋ ์ ์ธ๊ณ ๋ค์ํ ์ฌ์ฉ์ ๊ทธ๋ฃน์ ๊ฒฝํ์ ์ดํดํ๊ณ ๋์ ์์ฅ์ ๋ฐ๋ผ ์ต์ ํ ์ฐ์ ์์๋ฅผ ์ ํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
ํจ๊ณผ์ ์ธ ์๋ฐ์คํฌ๋ฆฝํธ ์ฑ๋ฅ ์ ํ ๋ฐฉ์ง๋ฅผ ์ํ ๋ชจ๋ฒ ์ฌ๋ก
๊ธฐ์ ์ ์ธ ๊ตฌํ์ ๋์ด์, ๋ฌธํ์ ๋ณํ์ ๋ชจ๋ฒ ์ฌ๋ก ์ค์๋ ์ง์์ ์ธ ์ฑ๋ฅ ์ฐ์์ฑ์ ์ํด ํ์์ ์ ๋๋ค.
- '์ฌํํธ-๋ ํํธ' ์ฑ๋ฅ ๋ง์ธ๋์
์์ฉ:
์ฑ๋ฅ์ ํ ์คํธ ๋จ๊ณ๋ฟ๋ง ์๋๋ผ ์ค๊ณ, ์ํคํ ์ฒ ๋ฐ ์ฝ๋ฉ๊ณผ ๊ฐ์ ๊ฐ๋ฐ ๋ผ์ดํ์ฌ์ดํด์ ๊ฐ์ฅ ์ด๊ธฐ๋ถํฐ ๊ณ ๋ ค๋์ด์ผ ํฉ๋๋ค. ํ์ด ์ฒ์๋ถํฐ ์์ ์ ์ ํ์ด ์ฑ๋ฅ์ ๋ฏธ์น๋ ์ํฅ์ ์๊ฐํ๋๋ก ํ๋ จ์ํต๋๋ค. ์ด๋ ์๋ฅผ ๋ค์ด, ์๋ก์ด ๋ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ํ์์ฑ์ ์๋ฌธ์ ์ ๊ธฐํ๊ณ , ์ปดํฌ๋ํธ์ ๋ํ ์ง์ฐ ๋ก๋ฉ์ ๊ณ ๋ คํ๊ฑฐ๋, ๊ธฐ๋ฅ์ ์ด๊ธฐ ๊ณํ ๋จ๊ณ์์ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ ์ ๋ต์ ์ต์ ํํ๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค.
- ์๊ณ ์ ์ง์ ์ธ ๋ณ๊ฒฝ ์ ํธ:
ํฌ๊ณ ๋จ์ผํ ์ฝ๋ ๋ณ๊ฒฝ์ ์ฑ๋ฅ ์ ํ์ ์์ธ์ ์ ํํ ์ฐพ์๋ด๊ธฐ ๋งค์ฐ ์ด๋ ต๊ฒ ๋ง๋ญ๋๋ค. ๋ ์๊ณ ๋น๋ฒํ ์ปค๋ฐ๊ณผ ํ ๋ฆฌํ์คํธ๋ฅผ ์ฅ๋ คํฉ๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ์ฑ๋ฅ ์ ํ๊ฐ ๋ฐ์ํ์ ๋ ํน์ ํ๊ณ ๊ฒฉ๋ฆฌ๋ ๋ณ๊ฒฝ์ผ๋ก ์ถ์ ํ๊ธฐ๊ฐ ํจ์ฌ ์ฌ์์ง๋๋ค.
- ์ค์ ์ปดํฌ๋ํธ ๊ฒฉ๋ฆฌ ๋ฐ ๋ง์ดํฌ๋ก ๋ฒค์น๋งํน:
์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ฒ ์ด์ค์์ ๊ฐ์ฅ ์ฑ๋ฅ์ ๋ฏผ๊ฐํ ๋ถ๋ถ(๋ณต์กํ ์๊ณ ๋ฆฌ์ฆ, ๋ฐ์ดํฐ ์ฒ๋ฆฌ ํจ์ ๋๋ ์์ฃผ ๋ ๋๋ง๋๋ UI ์ปดํฌ๋ํธ)์ ์๋ณํฉ๋๋ค. ์ด๋ฌํ ์ปดํฌ๋ํธ์ ๋ํ ์ ์ฉ ๋ง์ดํฌ๋ก ๋ฒค์น๋งํฌ๋ฅผ ์์ฑํฉ๋๋ค. ์ด๋ฅผ ํตํด ์ ์ฒด ์ ํ๋ฆฌ์ผ์ด์ ๋ก๋์ ๋ ธ์ด์ฆ ์์ด ์ ๋ฐํ ์ต์ ํ๊ฐ ๊ฐ๋ฅํฉ๋๋ค.
- ํ์ค์ ์ธ ํ
์คํธ ํ๊ฒฝ ๊ตฌ์ถ:
์๋ํ๋ ํ ์คํธ๋ ํ๋ก๋์ ํ๊ฒฝ์ ๊ฑฐ์ ๊ทธ๋๋ก ๋ฐ์ํ๋ ํ๊ฒฝ์์ ์คํ๋์ด์ผ ํฉ๋๋ค. ์ฌ๊ธฐ์๋ ๋ค์์ด ํฌํจ๋ฉ๋๋ค:
- ๋คํธ์ํฌ ์ค๋กํ๋ง: ๋ค์ํ ๋คํธ์ํฌ ์กฐ๊ฑด(์: 3G, 4G, DSL)์ ์๋ฎฌ๋ ์ด์ ํ์ฌ ์ธํฐ๋ท ์๋๊ฐ ๋ค๋ฅธ ์ฌ์ฉ์์ ์ฑ๋ฅ์ ์ดํดํฉ๋๋ค.
- CPU ์ค๋กํ๋ง: ๋๋ฆฐ ๋ชจ๋ฐ์ผ ์ฅ์น๋ ๊ตฌํ ๋ฐ์คํฌํฑ ๋จธ์ ์ ์๋ฎฌ๋ ์ด์ ํ์ฌ ์ฑ๋ฅ์ด ๋ฎ์ ํ๋์จ์ด๋ฅผ ๊ฐ์ง ์ฌ์ฉ์์๊ฒ ๋ถ๊ท ํ์ ์ผ๋ก ์ํฅ์ ๋ฏธ์น๋ ์ฑ๋ฅ ์ ํ๋ฅผ ํฌ์ฐฉํฉ๋๋ค.
- ํ์ค์ ์ธ ๋ฐ์ดํฐ: ๋ณผ๋ฅจ, ๋ณต์ก์ฑ ๋ฐ ๊ตฌ์กฐ ๋ฉด์์ ํ๋ก๋์ ๋ฐ์ดํฐ๋ฅผ ๋ฎ์ ํ ์คํธ ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉํฉ๋๋ค.
- ์ง๋ฆฌ์ ๊ณ ๋ ค ์ฌํญ: ๋คํธ์ํฌ ์ง์ฐ ๋ฐ ์ฝํ ์ธ ์ ์ก ๋คํธ์ํฌ(CDN) ํจ๊ณผ๋ฅผ ๊ณ ๋ คํ๊ธฐ ์ํด ๋ค๋ฅธ ๊ธ๋ก๋ฒ ์์น์์ ํ ์คํธํ ์ ์๋ ๋๊ตฌ๋ฅผ ํ์ฉํฉ๋๋ค.
- ๊ธฐ์ค์ ๋ฐ ์๊ณ๊ฐ์ ๋ํ ๋ฒ์ ๊ด๋ฆฌ:
์ฑ๋ฅ ๊ธฐ์ค์ ๊ณผ ์ฑ๋ฅ ๊ฒ์ดํธ์ ์๊ณ๊ฐ์ ๋ฒ์ ๊ด๋ฆฌ ์์คํ (์: Git) ๋ด์ ์ง์ ์ ์ฅํฉ๋๋ค. ์ด๋ฅผ ํตํด ์ฑ๋ฅ ๋ชฉํ๊ฐ ์ฝ๋์ ํจ๊ป ๋ฒ์ ๊ด๋ฆฌ๋์ด ๋ช ํํ ์ด๋ ฅ์ ์ ๊ณตํ๊ณ ๋ณ๊ฒฝ ์ฌํญ์ ๊ด๋ฆฌํ๊ณ ๋ค๋ฅธ ๋ฆด๋ฆฌ์ค ๊ฐ์ ์ฑ๋ฅ์ ๋น๊ตํ๊ธฐ๊ฐ ๋ ์ฌ์์ง๋๋ค.
- ํฌ๊ด์ ์ธ ์๋ฆผ ๋ฐ ๋ณด๊ณ ๊ตฌํ:
์ฑ๋ฅ ์ ํ๊ฐ ์ฆ๊ฐ์ ์ด๊ณ ์คํ ๊ฐ๋ฅํ ์๋ฆผ์ ํธ๋ฆฌ๊ฑฐํ๋๋ก ํฉ๋๋ค. ์ด๋ฌํ ์๋ฆผ์ ํ์ ์ปค๋ฎค๋์ผ์ด์ ์ฑ๋(์: Slack, Microsoft Teams)๊ณผ ํตํฉํฉ๋๋ค. ์ฆ๊ฐ์ ์ธ ์๋ฆผ ์ธ์๋ ์ ๊ธฐ์ ์ธ ์ฑ๋ฅ ๋ณด๊ณ ์์ ๋์๋ณด๋๋ฅผ ์์ฑํ์ฌ ์ถ์ธ๋ฅผ ์๊ฐํํ๊ณ ์ฅ๊ธฐ์ ์ธ ์ ํ๋ฅผ ์๋ณํ๋ฉฐ ์ต์ ํ ์ฐ์ ์์๋ฅผ ์๋ฆฝ๋๋ค.
- ๋๊ตฌ์ ๊ต์ก์ผ๋ก ๊ฐ๋ฐ์ ์ญ๋ ๊ฐํ:
๊ฐ๋ฐ์์๊ฒ ์ฑ๋ฅ ํ๋กํ์ผ๋ง ๋๊ตฌ(์: Chrome ๊ฐ๋ฐ์ ๋๊ตฌ)์ ์ฝ๊ฒ ์ ๊ทผํ ์ ์๋๋ก ์ ๊ณตํ๊ณ ์ฑ๋ฅ ๋ฉํธ๋ฆญ์ ํด์ํ๊ณ ๋ณ๋ชฉ ํ์์ ์ง๋จํ๋ ๋ฐฉ๋ฒ์ ๋ํด ๊ต์กํฉ๋๋ค. ์ฝ๋๋ฅผ ํธ์ํ๊ธฐ ์ ์ ๋ก์ปฌ ์ฑ๋ฅ ํ ์คํธ๋ฅผ ์คํํ๋๋ก ์ฅ๋ คํฉ๋๋ค. ์ฑ๋ฅ์ ์ธ์ํ๋ ๊ฐ๋ฐํ์ ์ฑ๋ฅ ์ ํ์ ๋ํ ์ฒซ ๋ฒ์งธ ๋ฐฉ์ด์ ์ ๋๋ค.
- ์ ๊ธฐ์ ์ผ๋ก ์ฑ๋ฅ ๋ชฉํ ๊ฐ์ฌ ๋ฐ ์
๋ฐ์ดํธ:
์น ํ๊ฒฝ, ์ฌ์ฉ์ ๊ธฐ๋์น, ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ธฐ๋ฅ ์ธํธ๋ ๋์์์ด ์งํํฉ๋๋ค. ์ ๊ธฐ์ ์ผ๋ก ์ฑ๋ฅ ๋ชฉํ์ ๊ธฐ์ค์ ์ ๊ฒํ ํฉ๋๋ค. LCP ๋ชฉํ๊ฐ ์ฌ์ ํ ๊ฒฝ์๋ ฅ์ด ์์ต๋๊น? ์๋ก์ด ๊ธฐ๋ฅ์ด ์์ฒด ์ฑ๋ฅ ๋ฉํธ๋ฆญ ์ธํธ๋ฅผ ํ์๋ก ํ๋ ์ค์ํ ์ฌ์ฉ์ ์ฌ์ ์ ๋์ ํ์ต๋๊น? ๋ณํํ๋ ์๊ตฌ์ ๋ง๊ฒ ์ ๋ต์ ์กฐ์ ํฉ๋๋ค.
- ํ์ฌ ์ํฅ ๋ชจ๋ํฐ๋ง ๋ฐ ๊ด๋ฆฌ:
ํ์ฌ ์คํฌ๋ฆฝํธ(๋ถ์, ๊ด๊ณ , ์ฑํ ์์ ฏ, ๋ง์ผํ ๋๊ตฌ)๋ ์ฑ๋ฅ ์ ํ์ ๋น๋ฒํ ์์ธ์ ๋๋ค. ์ฑ๋ฅ ๋ชจ๋ํฐ๋ง์ ์ด๋ฅผ ํฌํจ์ํต๋๋ค. ๊ทธ๋ค์ ์ํฅ์ ์ดํดํ๊ณ , ์ง์ฐ ๋ก๋ฉ, ์คํ ์ง์ฐ ๋๋ Partytown๊ณผ ๊ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ๋ฉ์ธ ์ค๋ ๋์์ ์คํ์ ์คํ๋ก๋ํ๋ ๊ฒ๊ณผ ๊ฐ์ ์ ๋ต์ ๊ณ ๋ คํฉ๋๋ค.
- ์ฑ๋ฅ ์ธ์ ๋ฌธํ ์กฐ์ฑ:
๊ถ๊ทน์ ์ผ๋ก ์ฑ๋ฅ ์ ํ๋ฅผ ๋ฐฉ์งํ๋ ๊ฒ์ ํ์ ๋ ธ๋ ฅ์ ๋๋ค. ์ฑ๋ฅ์ ๋ํ ๋ ผ์๋ฅผ ์ฅ๋ คํ๊ณ , ์ฑ๋ฅ ๊ฐ์ ์ ์ถํํ๋ฉฐ, ์ฑ๋ฅ์ ๊ธฐ๋ฅ์ด๋ ๋ณด์๊ณผ ๋ง์ฐฌ๊ฐ์ง๋ก ์ ํ๋ฆฌ์ผ์ด์ ์ ์ค์ํ ๊ธฐ๋ฅ์ผ๋ก ์ทจ๊ธํฉ๋๋ค. ์ด๋ฌํ ๋ฌธํ์ ๋ณํ๋ ์ฑ๋ฅ์ด ๋์์ธ์์ ๋ฐฐํฌ์ ์ด๋ฅด๊ธฐ๊น์ง ๋ชจ๋ ๊ฒฐ์ ์ ํ์์ ์ธ ๋ถ๋ถ์ด ๋๋๋ก ๋ณด์ฅํฉ๋๋ค.
์๋ํ๋ ์ฑ๋ฅ ํ ์คํธ์ ์ผ๋ฐ์ ์ธ ๊ณผ์ ํด๊ฒฐํ๊ธฐ
์๋ํ๋ ์ฑ๋ฅ ํ ์คํธ๋ ์์ฒญ๋ ์ด์ ์ ์ ๊ณตํ์ง๋ง, ๊ทธ ๊ตฌํ๊ณผ ์ ์ง๋ณด์๋ ์ด๋ ค์์ด ๋ฐ๋ฆ ๋๋ค. ์ด๋ฅผ ์์ธกํ๊ณ ํด๊ฒฐํ๋ฉด ์ ๋ต์ ํจ๊ณผ๋ฅผ ํฌ๊ฒ ํฅ์์ํฌ ์ ์์ต๋๋ค.
- ํ๋ ์ดํค ํ
์คํธ(Flaky Tests): ์ผ๊ด์ฑ ์๋ ๊ฒฐ๊ณผ
๊ณผ์ : ์ฑ๋ฅ ํ ์คํธ ๊ฒฐ๊ณผ๋ ํ๊ฒฝ ๋ ธ์ด์ฆ(๋คํธ์ํฌ ๋ณ๋์ฑ, ๊ธฐ๊ณ ๋ถํ, ๋ธ๋ผ์ฐ์ ์บ์ฑ ํจ๊ณผ)๋ก ์ธํด ๋๋๋ก ์ผ๊ด์ฑ์ด ์๊ฑฐ๋ 'ํ๋ ์ดํค(flaky)'ํ ์ ์์ผ๋ฉฐ, ๋์ผํ ์ฝ๋์ ๋ํด ๋ค๋ฅธ ๋ฉํธ๋ฆญ์ ๋ณด๊ณ ํ ์ ์์ต๋๋ค. ์ด๋ก ์ธํด ๊ฒฐ๊ณผ๋ฅผ ์ ๋ขฐํ๊ณ ์ค์ ์ฑ๋ฅ ์ ํ๋ฅผ ์๋ณํ๊ธฐ๊ฐ ์ด๋ ต์ต๋๋ค.
ํด๊ฒฐ์ฑ : ํ ์คํธ๋ฅผ ์ฌ๋ฌ ๋ฒ ์คํํ๊ณ ํ๊ท ๋๋ ์ค์๊ฐ์ ์ทจํฉ๋๋ค. ์ธ๋ถ ์์ธ์ ์ต์ํํ๊ธฐ ์ํด ํ ์คํธ ํ๊ฒฝ์ ๊ฒฉ๋ฆฌํฉ๋๋ค. ํ ์คํธ ์คํฌ๋ฆฝํธ์ ์ ์ ํ ๋๊ธฐ ๋ฐ ์ฌ์๋ ๋ก์ง์ ๊ตฌํํฉ๋๋ค. ์บ์ ์ํ๋ฅผ ์ ์คํ๊ฒ ์ ์ดํฉ๋๋ค(์: ์ด๊ธฐ ๋ก๋ ์ฑ๋ฅ์ ์ํด ๊ฐ ์คํ ์ ์ ์บ์ ์ง์ฐ๊ธฐ, ๋๋ ํ์ ํ์์ ์ํด ์ ์บ์๋ก ํ ์คํธ). ์์ ์ ์ธ ํ ์คํธ ๋ฌ๋ ์ธํ๋ผ๋ฅผ ์ฌ์ฉํฉ๋๋ค.
- ํ๊ฒฝ ์ฐจ์ด: ํ
์คํธ์ ํ๋ก๋์
๊ฐ์ ๋ถ์ผ์น
๊ณผ์ : ์คํ ์ด์ง ๋๋ CI ํ๊ฒฝ์์ ์ธก์ ๋ ์ฑ๋ฅ์ ์ธํ๋ผ, ๋ฐ์ดํฐ ๋ณผ๋ฅจ, ๋คํธ์ํฌ ๊ตฌ์ฑ ๋๋ CDN ์ค์ ์ ์ฐจ์ด๋ก ์ธํด ํ๋ก๋์ ์ฑ๋ฅ์ ์ ํํ๊ฒ ๋ฐ์ํ์ง ๋ชปํ ์ ์์ต๋๋ค.
ํด๊ฒฐ์ฑ : ํ ์คํธ ํ๊ฒฝ์ ์ต๋ํ ํ๋ก๋์ ์ ๊ฐ๊น๊ฒ ๋ง๋ค๋๋ก ๋ ธ๋ ฅํฉ๋๋ค. ํ์ค์ ์ธ ๋ฐ์ดํฐ ์ธํธ๋ฅผ ์ฌ์ฉํฉ๋๋ค. ๋ค์ํ ๋คํธ์ํฌ ์กฐ๊ฑด๊ณผ ์ง๋ฆฌ์ ์์น๋ฅผ ์๋ฎฌ๋ ์ด์ ํ ์ ์๋ ๋๊ตฌ(์: WebPageTest)๋ฅผ ํ์ฉํฉ๋๋ค. ์ค์ ์ฐจ์ด๋ฅผ ๊ฒ์ฆํ๊ณ ํฌ์ฐฉํ๊ธฐ ์ํด ํ๋ก๋์ ํ๊ฒฝ์์ ๊ฐ๋ ฅํ RUM์ผ๋ก ํฉ์ฑ ํ ์คํธ๋ฅผ ๋ณด์ํฉ๋๋ค.
- ๋ฐ์ดํฐ ๊ด๋ฆฌ: ํ์ค์ ์ธ ํ
์คํธ ๋ฐ์ดํฐ ์์ฑ
๊ณผ์ : ์ฑ๋ฅ์ ์ข ์ข ์ฒ๋ฆฌ๋๋ ๋ฐ์ดํฐ์ ์๊ณผ ๋ณต์ก์ฑ์ ํฌ๊ฒ ์์กดํฉ๋๋ค. ํ์ค์ ์ด๊ณ ๋๊ท๋ชจ์ ํ ์คํธ ๋ฐ์ดํฐ๋ฅผ ์์ฑํ๊ฑฐ๋ ํ๋ก๋น์ ๋ํ๋ ๊ฒ์ ์ด๋ ค์ธ ์ ์์ต๋๋ค.
ํด๊ฒฐ์ฑ : ์ ํ ๋ฐ ๋ฐ์ดํฐ ํ๊ณผ ํ๋ ฅํ์ฌ ์ผ๋ฐ์ ์ธ ๋ฐ์ดํฐ ๋ก๋์ ์ฃ์ง ์ผ์ด์ค๋ฅผ ์ดํดํฉ๋๋ค. ๊ฐ๋ฅํ๋ฉด ๋ฐ์ดํฐ ์์ฑ์ ์๋ํํ๊ณ , ๋๊ตฌ๋ ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํ์ฌ ํฌ๊ณ ๋ค์ํ ๋ฐ์ดํฐ ์ธํธ๋ฅผ ๋ง๋ญ๋๋ค. ๊ฐ์ธ ์ ๋ณด ๋ณดํธ ๋ฌธ์ ๊ฐ ํ์ฉ๋๋ค๋ฉด ํ๋ก๋์ ๋ฐ์ดํฐ์ ํ์ ์งํฉ์ ์ต๋ช ํํ์ฌ ์ฌ์ฉํ๊ฑฐ๋, ํ๋ก๋์ ํน์ฑ์ ๋ชจ๋ฐฉํ ํฉ์ฑ ๋ฐ์ดํฐ๋ฅผ ์์ฑํฉ๋๋ค.
- ๋๊ตฌ์ ๋ณต์ก์ฑ๊ณผ ๊ฐํ๋ฅธ ํ์ต ๊ณก์
๊ณผ์ : ์ฑ๋ฅ ํ ์คํธ ์ํ๊ณ๋ ๋ฐฉ๋ํ๊ณ ๋ณต์กํ ์ ์์ผ๋ฉฐ, ๋ง์ ๋๊ตฌ ๊ฐ๊ฐ์ ๊ณ ์ ํ ๊ตฌ์ฑ๊ณผ ํ์ต ๊ณก์ ์ด ์์ต๋๋ค. ์ด๋ ํนํ ์ฑ๋ฅ ์์ง๋์ด๋ง์ ์๋ก์ด ํ์ ์๋ํ ์ ์์ต๋๋ค.
ํด๊ฒฐ์ฑ : ํ๋ ๋๋ ๋ ๊ฐ์ ํต์ฌ ๋๊ตฌ(์: CI/CD์ Lighthouse CLI, ๊ธฐ๋ณธ RUM)๋ก ์๊ฒ ์์ํฉ๋๋ค. ํ์ ํฌ๊ด์ ์ธ ๊ต์ก๊ณผ ๋ฌธ์๋ฅผ ์ ๊ณตํฉ๋๋ค. ์คํ ๋ฐ ๋ณด๊ณ ๋ฅผ ๋จ์ํํ๊ธฐ ์ํด ๋ํผ ์คํฌ๋ฆฝํธ๋ ๋ด๋ถ ๋๊ตฌ๋ฅผ ์ค๊ณํฉ๋๋ค. ํ์ ์ ๋ฌธ์ฑ์ด ์ฑ์ฅํจ์ ๋ฐ๋ผ ์ ์ง์ ์ผ๋ก ๋ ์ ๊ตํ ๋๊ตฌ๋ฅผ ๋์ ํฉ๋๋ค.
- ํตํฉ ์ค๋ฒํค๋: ํ์ดํ๋ผ์ธ ์ค์ ๋ฐ ์ ์ง๋ณด์
๊ณผ์ : ๊ธฐ์กด CI/CD ํ์ดํ๋ผ์ธ์ ์ฑ๋ฅ ํ ์คํธ๋ฅผ ํตํฉํ๊ณ ์ธํ๋ผ๋ฅผ ์ ์ง๋ณด์ํ๋ ๋ฐ ์๋นํ ๋ ธ๋ ฅ๊ณผ ์ง์์ ์ธ ํ์ ์ด ํ์ํ ์ ์์ต๋๋ค.
ํด๊ฒฐ์ฑ : ๊ฐ๋ ฅํ CI/CD ํตํฉ ๊ธฐ๋ฅ๊ณผ ๋ช ํํ ๋ฌธ์๊ฐ ์๋ ๋๊ตฌ๋ฅผ ์ฐ์ ์์์ ๋ก๋๋ค. ์ผ๊ด๋ ํ ์คํธ ํ๊ฒฝ์ ๋ณด์ฅํ๊ธฐ ์ํด ์ปจํ ์ด๋ํ(Docker)๋ฅผ ํ์ฉํฉ๋๋ค. ๊ฐ๋ฅํ๋ฉด ํ ์คํธ ์ธํ๋ผ ์ค์ ์ ์๋ํํฉ๋๋ค. ์ฑ๋ฅ ํ ์คํธ ํ์ดํ๋ผ์ธ์ ์ด๊ธฐ ์ค์ ๋ฐ ์ง์์ ์ธ ์ ์ง๋ณด์๋ฅผ ์ํด ๋ฆฌ์์ค๋ฅผ ํ ๋นํฉ๋๋ค.
- ๊ฒฐ๊ณผ ํด์: ๊ทผ๋ณธ ์์ธ ์๋ณ
๊ณผ์ : ์ฑ๋ฅ ๋ณด๊ณ ์๋ ๋ง์ ๋ฐ์ดํฐ๋ฅผ ์์ฑํ ์ ์์ต๋๋ค. ์๋ง์ ๋ฉํธ๋ฆญ, ์ํฐํด ์ฐจํธ, ์ฝ ์คํ ์์์ ์ฑ๋ฅ ์ ํ์ ์ค์ ๊ทผ๋ณธ ์์ธ์ ์๋ณํ๋ ๊ฒ์ ์ด๋ ค์ธ ์ ์์ต๋๋ค.
ํด๊ฒฐ์ฑ : ๊ฐ๋ฐ์์๊ฒ ์ฑ๋ฅ ํ๋กํ์ผ๋ง ๋ฐ ๋๋ฒ๊น ๊ธฐ์ (์: Chrome ๊ฐ๋ฐ์ ๋๊ตฌ Performance ํจ๋ ์ฌ์ฉ)์ ๊ต์กํฉ๋๋ค. ๋จผ์ ํต์ฌ ๋ฉํธ๋ฆญ์ ์ง์คํฉ๋๋ค. ๋ฉํธ๋ฆญ ๊ฐ์ ์๊ด๊ด๊ณ๋ฅผ ํ์ฉํฉ๋๋ค(์: ๋์ TBT๋ ์ข ์ข ๋ฌด๊ฑฐ์ด ์๋ฐ์คํฌ๋ฆฝํธ ์คํ์ ๊ฐ๋ฆฌํด). ๋ณ๋ชฉ ํ์์ ๋ณด๋ค ํจ๊ณผ์ ์ผ๋ก ์ ํํ ์ฐพ์๋ด๊ธฐ ์ํด ๋ถ์ฐ ์ถ์ ๋ฐ ์ฝ๋ ์์ค ํต์ฐฐ๋ ฅ์ ์ ๊ณตํ๋ APM/RUM ๋๊ตฌ๋ฅผ ํตํฉํฉ๋๋ค.
๊ธ๋ก๋ฒ ์ํฅ: ์ด๊ฒ์ด ๋ชจ๋์๊ฒ ์ค์ํ ์ด์
๋์งํธ ๊ฒฝํ์ด ์ง๋ฆฌ์ ๊ฒฝ๊ณ๋ฅผ ์ด์ํ๋ ์ธ์์์ ์๋ฐ์คํฌ๋ฆฝํธ ์ฑ๋ฅ ์ ํ ๋ฐฉ์ง๋ ๋จ์ํ ๊ธฐ์ ์ ์ฐ์์ฑ์ ๊ดํ ๊ฒ์ด ์๋๋ผ ๋ณดํธ์ ์ ๊ทผ, ๊ฒฝ์ ์ ๊ธฐํ ๋ฐ ๋ค์ํ ์์ฅ์์ ๊ฒฝ์ ์ฐ์๋ฅผ ์ ์งํ๋ ๊ฒ์ ๊ดํ ๊ฒ์ ๋๋ค.
- ์ ๊ทผ์ฑ๊ณผ ํฌ์ฉ์ฑ:
์ฑ๋ฅ์ ์ข ์ข ์ ๊ทผ์ฑ๊ณผ ์ง์ ์ ์ผ๋ก ๊ด๋ จ์ด ์์ต๋๋ค. ๋๋ฆฐ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ธํฐ๋ท ์ธํ๋ผ๊ฐ ์ ํ๋ ์ง์ญ(์: ์ฌํ๋ผ ์ฌ๋ง ์ด๋จ ์ํ๋ฆฌ์นด์ ๋๋ถ๋ถ ๋๋ ์์์์ ์๊ณจ ์ง์ญ), ๊ตฌํ ๋๋ ์ฑ๋ฅ์ด ๋ฎ์ ์ฅ์น๋ฅผ ์ฌ์ฉํ๋ ๊ฐ์ธ, ๋๋ ๋ณด์กฐ ๊ธฐ์ ์ ์์กดํ๋ ์ฌ๋๋ค์๊ฒ๋ ์์ ํ ์ฌ์ฉํ ์ ์์ ์ ์์ต๋๋ค. ์ต๊ณ ์์ค์ ์ฑ๋ฅ์ ๋ณด์ฅํ๋ค๋ ๊ฒ์ ์ต์ฒจ๋จ ๊ธฐ์ ๊ณผ ๊ณ ์ ์ฐ๊ฒฐ์ ๊ฐ์ง ์ฌ๋๋ค๋ฟ๋ง ์๋๋ผ ๋ชจ๋ ์ฌ๋์ ์ํ ํฌ์ฉ์ ์ธ ์น์ ๊ตฌ์ถํ๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค.
- ๋ค์ํ ์ธํ๋ผ ๋ฐ ์ฅ์น ํ๊ฒฝ:
๊ธ๋ก๋ฒ ๋์งํธ ํ๊ฒฝ์ ๋งค์ฐ ๋ค์ํฉ๋๋ค. ์ฌ์ฉ์๋ ์ ์ง๊ตญ์ ์ต์ ํ๋๊ทธ์ญ ์ค๋งํธํฐ๋ถํฐ ์ ํฅ ์์ฅ์ ๋ณด๊ธํ ํผ์ฒํฐ์ด๋ ๊ตฌํ ๋ฐ์คํฌํฑ์ ์ด๋ฅด๊ธฐ๊น์ง ์ด์ง๋ฌ์ธ ์ ๋๋ก ๋ค์ํ ์ฅ์น์์ ์น์ ์ ์ํฉ๋๋ค. ๋คํธ์ํฌ ์๋๋ ๊ธฐ๊ฐ๋นํธ ๊ด์ฌ์ ์์ ๊ฐํ์ ์ธ 2G/3G ์ฐ๊ฒฐ์ ์ด๋ฅด๊ธฐ๊น์ง ๋ค์ํฉ๋๋ค. ์๋ํ๋ ์ฑ๋ฅ ํ ์คํธ, ํนํ ์ด๋ฌํ ๋ค์ํ ์กฐ๊ฑด์ ์๋ฎฌ๋ ์ด์ ํ ์ ์๋ ๋ฅ๋ ฅ์ ์ ํ๋ฆฌ์ผ์ด์ ์ด ์ด ์ ์ฒด ์คํํธ๋ผ์ ๊ฑธ์ณ ์์ ์ ์ด๊ณ ๋ฐ์์ฑ ์๋ ๊ฒฝํ์ ์ ๊ณตํ๋๋ก ๋ณด์ฅํ๋ฉฐ, ํน์ ์ฌ์ฉ์ ๊ทธ๋ฃน์ ๋ถ๊ท ํ์ ์ผ๋ก ์ํฅ์ ๋ฏธ์น ์ ์๋ ์ฑ๋ฅ ์ ํ๋ฅผ ๋ฐฉ์งํฉ๋๋ค.
- ๊ฒฝ์ ์ ์ํฅ ๋ฐ ์์ฅ ๋๋ฌ ๋ฒ์:
๋๋ฆฐ ์น์ฌ์ดํธ๋ ํตํ๋ ๊ฒฝ์ ์ ๋งฅ๋ฝ์ ๊ด๊ณ์์ด ์ ํ ์์ค, ๊ด๊ณ ์์ต ๊ฐ์, ์์ฐ์ฑ ์ ํ ๋ฑ ๋น์ฉ์ ๋ฐ์์ํต๋๋ค. ๊ธ๋ก๋ฒ ๋น์ฆ๋์ค์ ์์ด ๊ฐ๋ ฅํ ์ฑ๋ฅ์ ์์ฅ ๋๋ฌ ๋ฒ์ ํ๋์ ์์ต์ฑ ์ฆ๋๋ก ์ง์ ์ ์ผ๋ก ์ด์ด์ง๋๋ค. ์๋ฅผ ๋ค์ด, ๋๋ฆฐ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์ธํด ์ธ๋์ ๊ฐ์ ํฌ๊ณ ๋น ๋ฅด๊ฒ ์ฑ์ฅํ๋ ์์ฅ์์ ์ฑ๋ฅ์ด ์ ์กฐํ ์ ์์๊ฑฐ๋ ์ฌ์ดํธ๋ ๋ถ๋ฏธ์์ ์ผ๋ง๋ ์ ์๋ํ๋์ง์ ๊ด๊ณ์์ด ์๋ฐฑ๋ง ๋ช ์ ์ ์ฌ ๊ณ ๊ฐ์ ์๊ฒ ๋ ๊ฒ์ ๋๋ค. ์๋ํ๋ ํ ์คํธ๋ ์ด๋ฌํ ์์ฅ ์ ์ฌ๋ ฅ์ ๋ณดํธํฉ๋๋ค.
- ๋ธ๋๋ ํํ ๋ฐ ์ ๋ขฐ:
์ฑ๋ฅ์ด ๋ฐ์ด๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ๋ขฐ๋ฅผ ๊ตฌ์ถํ๊ณ ์ ์ธ๊ณ์ ์ผ๋ก ๊ธ์ ์ ์ธ ๋ธ๋๋ ์ด๋ฏธ์ง๋ฅผ ๊ฐํํฉ๋๋ค. ๋ฐ๋๋ก, ์ผ๊ด๋ ์ฑ๋ฅ ๋ฌธ์ ๋ ์ ๋ขฐ๋ฅผ ์นจ์ํ์ฌ ์ฌ์ฉ์๊ฐ ์ ํ์ด๋ ์๋น์ค์ ์ ๋ขฐ์ฑ๊ณผ ํ์ง์ ์๋ฌธ์ ๊ฐ๊ฒ ๋ง๋ญ๋๋ค. ์ ์ ๋ ๊ฒฝ์์ด ์น์ดํด์ง๋ ๊ธ๋ก๋ฒ ์์ฅ์์ ์๋์ ์ ๋ขฐ์ฑ์ ๋ํ ํํ์ ์๋นํ ์ฐจ๋ณํ ์์๊ฐ ๋ ์ ์์ต๋๋ค.
- ๊ฒฝ์ ์ฐ์:
๋ชจ๋ ์์ฅ์์ ๊ฒฝ์์ ์น์ดํฉ๋๋ค. ์ ํ๋ฆฌ์ผ์ด์ ์ด ์๋์ ๋ฐ์์ฑ ์ธก๋ฉด์์ ์ง์์ ์ผ๋ก ๊ฒฝ์์ฌ๋ฅผ ๋ฅ๊ฐํ๋ค๋ฉด ์๋นํ ์ฐ์๋ฅผ ์ ํ๊ฒ ๋ฉ๋๋ค. ์ฌ์ฉ์๋ ์์ฐ์ค๋ฝ๊ฒ ๋ ๋น ๋ฅด๊ณ ์ ๋์ ์ธ ๊ฒฝํ์ ๋๋ฆด ๊ฒ์ ๋๋ค. ์๋ํ๋ ์ฑ๋ฅ ํ ์คํธ๋ ์ด ๊ธ๋ก๋ฒ ๊ฒฝ์์์ ์ง์์ ์ธ ๋ฌด๊ธฐ์ด๋ฉฐ, ๊ทธ ์ค์ํ ์ฐ์๋ฅผ ์ ์งํ๋๋ก ๋ณด์ฅํฉ๋๋ค.
๊ฒฐ๋ก : ๋ ๋น ๋ฅด๊ณ ์์ ์ ์ธ ์น์ ์ํ ๊ธธ
์๋ฐ์คํฌ๋ฆฝํธ๋ ํ๋ ์น์ ์์ง์ผ๋ก, ๋ชจ๋ ๋๋ฅ์์ ๋์ ์ด๊ณ ๋งค๋ ฅ์ ์ธ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํฉ๋๋ค. ๊ทธ๋ฌ๋ ๊ทธ ํ์๋ ์ฑ๋ฅ์ ๋ถ์ง๋ฐํ ๊ด๋ฆฌํด์ผ ํ๋ ์ฑ ์์ด ๋ฐ๋ฆ ๋๋ค. ์ฑ๋ฅ ์ ํ๋ ์ง์์ ์ธ ๊ฐ๋ฐ์ ๋ถ๊ฐํผํ ๋ถ์ฐ๋ฌผ์ด๋ฉฐ, ์ฌ์ฉ์ ๋ง์กฑ๋, ๋น์ฆ๋์ค ๋ชฉํ ๋ฐ ๋ธ๋๋ ๋ฌด๊ฒฐ์ฑ์ ๋ฏธ๋ฌํ๊ฒ ํผ์ํ ์ ์์ต๋๋ค. ๊ทธ๋ฌ๋ ์ด ํฌ๊ด์ ์ธ ๊ฐ์ด๋์์ ๋ณด์ฌ์ฃผ์๋ฏ์ด, ์ด๋ฌํ ์ ํ๋ ๊ทน๋ณตํ ์ ์๋ ์ํ์ด ์๋๋๋ค. ์ฑ๋ฅ ํ ์คํธ์ ๋ํ ์ ๋ต์ ์ด๊ณ ์๋ํ๋ ์ ๊ทผ ๋ฐฉ์์ ์์ฉํจ์ผ๋ก์จ ๊ฐ๋ฐํ์ ์ ์ฌ์ ์ธ ํจ์ ์ ์ ์ ์ ์ต์ ํ์ ๊ธฐํ๋ก ์ ํํ ์ ์์ต๋๋ค.
๋ช ํํ ์ฑ๋ฅ ๊ธฐ์ค์ ์ ์ค์ ํ๊ณ ์ฌ์ฉ์ ์ค์ฌ KPI๋ฅผ ์ ์ํ๋ ๊ฒ๋ถํฐ Lighthouse, Playwright, RUM๊ณผ ๊ฐ์ ์ ๊ตํ ๋๊ตฌ๋ฅผ CI/CD ํ์ดํ๋ผ์ธ์ ํตํฉํ๋ ๊ฒ๊น์ง, ์๋ฐ์คํฌ๋ฆฝํธ ์ฑ๋ฅ ์ ํ๋ฅผ ๋ฐฉ์งํ๋ ๊ธธ์ ๋ช ํํฉ๋๋ค. ์ด๋ '์ฌํํธ-๋ ํํธ' ๋ง์ธ๋์ , ์ง์์ ์ธ ๋ชจ๋ํฐ๋ง์ ๋ํ ํ์ , ๊ทธ๋ฆฌ๊ณ ์๋์ ๋ฐ์์ฑ์ ๊ธฐ๋ณธ์ ์ธ ์ ํ ๊ธฐ๋ฅ์ผ๋ก ๊ฐ์น ์๊ฒ ์ฌ๊ธฐ๋ ๋ฌธํ๋ฅผ ์๊ตฌํฉ๋๋ค. ์ฌ์ฉ์์ ์ธ๋ด์ฌ์ด ์ ํํ ์์์ด๊ณ ๊ฒฝ์์ด ๋จ ํ ๋ฒ์ ํด๋ฆญ ๊ฑฐ๋ฆฌ์ ์๋ ์ธ์์์, ๋ชจ๋ ์ฌ๋์ ์ํด ์ด๋์๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ฒ๊ฐ์ฒ๋ผ ๋น ๋ฅด๊ฒ ์ ์งํ๋ ๊ฒ์ ๋จ์ํ ์ข์ ๊ดํ์ด ์๋๋ผ ๊ธ๋ก๋ฒ ์ฑ๊ณต์ ํ์์ ์ ๋๋ค. ์ค๋ ์๋ํ๋ ์ฑ๋ฅ ์ฐ์์ฑ์ ํฅํ ์ฌ์ ์ ์์ํ๊ณ , ๋ ๋น ๋ฅด๊ณ , ๋ ์์ ์ ์ด๋ฉฐ, ๋ณดํธ์ ์ผ๋ก ์ ๊ทผ ๊ฐ๋ฅํ ์น์ ์ํ ๊ธธ์ ๋ฆ์ผ์ญ์์ค.