๋ง์ดํฌ๋ก ํ๋ฐํธ์๋ ์ํคํ ์ฒ ํจํด, ์ด์ , ๋จ์ ๋ฐ ํ์ฅ ๊ฐ๋ฅํ๊ณ ์ ์ง๋ณด์ ๊ฐ๋ฅํ ์น ์ ํ๋ฆฌ์ผ์ด์ ๊ตฌ์ถ์ ์ํ ์ค์ ์ฌ๋ก๋ฅผ ํ๊ตฌํฉ๋๋ค.
๋ง์ดํฌ๋ก ํ๋ฐํธ์๋: ํ์ฅ ๊ฐ๋ฅํ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ์ํ ์ํคํ ์ฒ ํจํด
์ค๋๋ ์ ๋น ๋ฅด๊ฒ ๋ณํํ๋ ๋์งํธ ํ๊ฒฝ์์ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ์ ๋ ๋ณต์กํด์ง๊ณ ์์ต๋๋ค. ์กฐ์ง์ ๊ธฐ๋ฅ์ ์ ์ํ๊ฒ ์ ๊ณตํ๊ณ , ์์ฃผ ๋ฐ๋ณตํ๋ฉฐ, ๋์ ์์ค์ ํ์ง์ ์ ์งํด์ผ ํฉ๋๋ค. ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋๋ ๊ฑฐ๋ํ ํ๋ฐํธ์๋ ๋ชจ๋๋ฆฌ์ค๋ฅผ ๋ ์๊ณ ๋ ๋ฆฝ์ ์ด๋ฉฐ ๊ด๋ฆฌํ๊ธฐ ์ฌ์ด ๋จ์๋ก ๋ถํดํจ์ผ๋ก์จ ์ด๋ฌํ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํ ๊ฐ๋ ฅํ ์ํคํ ์ฒ ์ ๊ทผ ๋ฐฉ์์ผ๋ก ๋ถ์ํ์ต๋๋ค.
๋ง์ดํฌ๋ก ํ๋ฐํธ์๋๋ ๋ฌด์์ธ๊ฐ์?
๋ง์ดํฌ๋ก ํ๋ฐํธ์๋๋ ๋ง์ดํฌ๋ก์๋น์ค์ ์์น์ ํ๋ฐํธ์๋๋ก ํ์ฅํฉ๋๋ค. ๋จ์ผ์ ๋ชจ๋๋ฆฌ์ ํ๋ฐํธ์๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ ๋์ , ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋ ์ํคํ ์ฒ๋ ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ๋ ๋ฆฝ์ ์ด๊ณ ๋ฐฐํฌ ๊ฐ๋ฅํ๋ฉฐ ์ข ์ข ๊ต์ฐจ ๊ธฐ๋ฅ ํ์ด ์์ ํ๋ ๊ตฌ์ฑ ์์๋ก ๋ถํดํฉ๋๋ค. ๊ฐ ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋๋ ์์ฒด ๊ธฐ์ ์คํ, ๊ฐ๋ฐ ์๋ช ์ฃผ๊ธฐ ๋ฐ ๋ฐฐํฌ ํ์ดํ๋ผ์ธ์ ๊ฐ์ถ ๋ฏธ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ผ๋ก ๊ธฐ๋ฅํฉ๋๋ค. ํต์ฌ์ ๊ฐ ํ์ด ์์จ์ ์ผ๋ก ์์ ํ์ฌ ๊ฐ๋ฐ ์๋์ ๋ณต์๋ ฅ์ ๋์ผ ์ ์๋ค๋ ๊ฒ์ ๋๋ค.
์ง์ ์ง๋ ๊ฒ์ ๋น์ ํด ๋ณด์ธ์. ํ๋์ ํฐ ํ์ด ์ง ์ ์ฒด๋ฅผ ์ฒ์๋ถํฐ ์ง๋ ๋์ , ์ฃผ๋ฐฉ, ์์ค, ์นจ์ค, ๊ฑฐ์ค์ ๋ด๋นํ๋ ๋ณ๋์ ํ์ด ์์ต๋๋ค. ๊ฐ ํ์ ์ ํธํ๋ ๋๊ตฌ์ ๊ธฐ์ ์ ์ ํํ๊ณ ํ๋ก์ ํธ์ ๊ฐ ๋ถ๋ถ์ ๋ ๋ฆฝ์ ์ผ๋ก ์๋ฃํ ์ ์์ต๋๋ค. ๋ง์ง๋ง์ผ๋ก, ์ด ๊ตฌ์ฑ ์์๋ค์ด ํฉ์ณ์ ธ ์์ง๋ ฅ ์๊ณ ๊ธฐ๋ฅ์ ์ธ ์ง์ ํ์ฑํฉ๋๋ค.
๋ง์ดํฌ๋ก ํ๋ฐํธ์๋์ ์ด์
๋ง์ดํฌ๋ก ํ๋ฐํธ์๋ ์ํคํ ์ฒ๋ฅผ ์ฑํํ๋ฉด ๋ค์๊ณผ ๊ฐ์ ์๋ง์ ์ด์ ์ ์กฐ์ง์ ๊ฐ์ ธ์ฌ ์ ์์ต๋๋ค.
- ํ์ฅ์ฑ ์ฆ๊ฐ: ๋ ๋ฆฝ์ ์ธ ํ์ด ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ค๋ฅธ ๋ถ๋ถ์ ๋์์ ์์ ํ ์ ์์ด ๊ธฐ๋ฅ ๊ฐ๋ฐ ๋ฐ ๋ฐฐํฌ ์๋๋ฅผ ๋์ผ ์ ์์ต๋๋ค.
- ์ ์ง๋ณด์์ฑ ํฅ์: ๋ ์๊ณ ๋ ๋ฆฝ์ ์ธ ์ฝ๋๋ฒ ์ด์ค๋ ์ดํดํ๊ณ , ํ ์คํธํ๊ณ , ์ ์ง๋ณด์ํ๊ธฐ ๋ ์ฝ์ต๋๋ค.
- ๊ธฐ์ ๋ค์์ฑ: ํ์ ์ ์ฒด ์ ํ๋ฆฌ์ผ์ด์ ์ ์ํด ์ ํ๋ ๊ธฐ์ ์ ์ ์ฝ์ ๋ฐ์ง ์๊ณ ํน์ ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋์ ๊ฐ์ฅ ์ ํฉํ ๊ธฐ์ ์คํ์ ์ ํํ ์ ์์ต๋๋ค. ์ด๋ ์คํ๊ณผ ํ์ ์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค.
- ๋ ๋ฆฝ์ ์ธ ๋ฐฐํฌ: ๊ฐ ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋๋ ๋ ๋ฆฝ์ ์ผ๋ก ๋ฐฐํฌ๋ ์ ์์ด ๋๊ท๋ชจ ๋ฐฐํฌ์ ์ํ์ ์ค์ด๊ณ ๋ ๋น ๋ฅธ ๋ฐ๋ณต ์ฃผ๊ธฐ๋ฅผ ํ์ฉํฉ๋๋ค. ์ด๋ ์ง์์ ์ธ ์ ๋ฌ๊ณผ ์์ฅ ์ถ์ ์๊ฐ ๋จ์ถ์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค.
- ์์จ ํ: ํ์ ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋์ ๋ํ ์์ ํ ์์ ๊ถ์ ๊ฐ์ง๋ฉฐ, ์ฑ ์๊ฐ๊ณผ ์ฃผ์ธ์์์ ๊ณ ์ทจํฉ๋๋ค. ์ด๋ฌํ ์์จ์ฑ์ ๋๊ธฐ ๋ถ์ฌ์ ์์ฐ์ฑ ์ฆ๊ฐ๋ก ์ด์ด์ง๋๋ค.
- ์ฝ๋ ์ฌ์ฌ์ฉ์ฑ: ๊ณตํต ๊ตฌ์ฑ ์์๋ฅผ ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋ ๊ฐ์ ๊ณต์ ํ ์ ์์ด ์ฝ๋ ์ค๋ณต์ ์ค์ด๊ณ ์ผ๊ด์ฑ์ ํฅ์์ํต๋๋ค.
- ๋ณต์๋ ฅ: ํ๋์ ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋๊ฐ ์คํจํ๋๋ผ๋ ์ ์ฒด ์ ํ๋ฆฌ์ผ์ด์ ์ด ๋ฐ๋์ ์ค๋จ๋๋ ๊ฒ์ ์๋๋๋ค. ๋ค๋ฅธ ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋๋ ๋ ๋ฆฝ์ ์ผ๋ก ๊ณ์ ์๋ํ ์ ์์ต๋๋ค.
๋ง์ดํฌ๋ก ํ๋ฐํธ์๋์ ๋จ์
๋ง์ดํฌ๋ก ํ๋ฐํธ์๋๋ ์๋นํ ์ด์ ์ ์ ๊ณตํ์ง๋ง, ์ ์คํ๊ฒ ๊ณ ๋ คํด์ผ ํ ๋ช ๊ฐ์ง ๊ณผ์ ๋ ์์ต๋๋ค.
- ๋ณต์ก์ฑ ์ฆ๊ฐ: ์ฌ๋ฌ ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋๋ฅผ ๊ด๋ฆฌํ๋ ๊ฒ์ ๋จ์ผ ๋ชจ๋๋ฆฌ์ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ด๋ฆฌํ๋ ๊ฒ๋ณด๋ค ๋ ๋ณต์กํ ์ ์์ต๋๋ค. ์ด๋ ๊ฒฌ๊ณ ํ ์ธํ๋ผ, ๋ชจ๋ํฐ๋ง ๋ฐ ํด๋ง์ ํ์๋ก ํฉ๋๋ค.
- ๋ ๋์ ์ด๊ธฐ ํฌ์: ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋๋ฅผ ์ํ ์ธํ๋ผ์ ํด๋ง์ ์ค์ ํ๋ ๋ฐ ์๋นํ ์ด๊ธฐ ํฌ์๊ฐ ํ์ํ ์ ์์ต๋๋ค.
- ํตํฉ ๊ณผ์ : ์๋ก ๋ค๋ฅธ ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋๋ฅผ ์์ง๋ ฅ ์๋ ์ฌ์ฉ์ ๊ฒฝํ์ผ๋ก ํตํฉํ๋ ๊ฒ์ ์ด๋ ค์ธ ์ ์์ต๋๋ค. ์ ์คํ ๊ณํ๊ณผ ์กฐ์ ์ด ํ์์ ์ ๋๋ค.
- ํก๋จ ๊ด์ฌ์ฌ: ์ธ์ฆ, ๊ถํ ๋ถ์ฌ ๋ฐ ๋ผ์ฐํ ๊ณผ ๊ฐ์ ํก๋จ ๊ด์ฌ์ฌ๋ฅผ ๊ด๋ฆฌํ๋ ๊ฒ์ ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋ ์ํคํ ์ฒ์์ ๋ ๋ณต์กํ ์ ์์ต๋๋ค.
- ์ฑ๋ฅ ์ค๋ฒํค๋: ์ฌ๋ฌ ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋๋ฅผ ๋ก๋ํ๋ฉด ํนํ ์ฌ๋ฐ๋ฅด๊ฒ ์ต์ ํ๋์ง ์์ ๊ฒฝ์ฐ ์ฑ๋ฅ ์ค๋ฒํค๋๊ฐ ๋ฐ์ํ ์ ์์ต๋๋ค.
- ์ปค๋ฎค๋์ผ์ด์ ์ค๋ฒํค๋ ์ฆ๊ฐ: ํ์ ์๋ก ๋ค๋ฅธ ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋๊ฐ ์ ์๋ํ๋๋ก ํจ๊ณผ์ ์ผ๋ก ์ํตํ๊ณ ํ๋ ฅํด์ผ ํฉ๋๋ค.
- ์ด์ ์ค๋ฒํค๋: ์ฌ๋ฌ ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋๋ฅผ ๋ฐฐํฌํ๊ณ ๊ด๋ฆฌํ๋ ๊ฒ์ ๋จ์ผ ๋ชจ๋๋ฆฌ์ ์ ํ๋ฆฌ์ผ์ด์ ๋ณด๋ค ๋ ๋ง์ ์ด์ ๋ ธ๋ ฅ์ด ํ์ํฉ๋๋ค.
๋ง์ดํฌ๋ก ํ๋ฐํธ์๋ ์ํคํ ์ฒ ํจํด
๋ง์ดํฌ๋ก ํ๋ฐํธ์๋๋ฅผ ๊ตฌํํ๋ ๋ฐ ์ฌ๋ฌ ์ํคํ ์ฒ ํจํด์ด ์ฌ์ฉ๋ ์ ์์ต๋๋ค. ๊ฐ ํจํด์ ๊ณ ์ ํ ์ฅ๋จ์ ์ ๊ฐ์ง๋ฉฐ, ์ต์ ์ ์ ํ์ ์ ํ๋ฆฌ์ผ์ด์ ์ ํน์ ์๊ตฌ ์ฌํญ์ ๋ฐ๋ผ ๋ฌ๋ผ์ง๋๋ค.
1. ๋น๋ ํ์ ํตํฉ (Build-time Integration)
์ด ํจํด์์๋ ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋๊ฐ ๋ณ๋์ ํจํค์ง๋ก ๋น๋ ๋ฐ ๋ฐฐํฌ๋ ๋ค์, ๋น๋ ์์ ์ ํจ๊ป ๊ตฌ์ฑ๋์ด ์ต์ข ์ ํ๋ฆฌ์ผ์ด์ ์ ์์ฑํฉ๋๋ค. ์ด ์ ๊ทผ ๋ฐฉ์์ ๊ตฌํํ๊ธฐ ๊ฐ๋จํ์ง๋ง ์ ์ฐ์ฑ๊ณผ ๋ ๋ฆฝ์ ์ธ ๋ฐฐํฌ ๊ฐ๋ฅ์ฑ์ด ๋จ์ด์ง๋๋ค.
์์: ์ ์์๊ฑฐ๋ ํ๋ซํผ์ ๊ตฌ์ถํ๋ ํ์ฌ. "์ ํ ์นดํ๋ก๊ทธ" ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋, "์ฅ๋ฐ๊ตฌ๋" ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋, "๊ฒฐ์ " ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋๊ฐ ๊ฐ๊ฐ ๋ ๋ฆฝ์ ์ผ๋ก ๊ฐ๋ฐ๋ฉ๋๋ค. ๋น๋ ํ๋ก์ธ์ค ๋์ Webpack Module Federation ๋๋ ์ ์ฌํ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ์ด๋ฌํ ๊ฐ๋ณ ๊ตฌ์ฑ ์์๊ฐ ๋จ์ผ ๋ฐฐํฌ ํจํค์ง๋ก ํตํฉ๋ฉ๋๋ค.
์ฅ์ :
- ๊ตฌํํ๊ธฐ ๊ฐ๋จํจ
- ์ข์ ์ฑ๋ฅ
๋จ์ :
- ์ ํ์ ์ธ ์ ์ฐ์ฑ
- ๋ณ๊ฒฝ ์ ์ ์ฒด ์ ํ๋ฆฌ์ผ์ด์ ์ฌ๋ฐฐํฌ ํ์
- ์ง์ ํ ๋ ๋ฆฝ ๋ฐฐํฌ ์๋
2. iframes๋ฅผ ํตํ ๋ฐํ์ ํตํฉ (Run-time Integration via iframes)
์ด ํจํด์ iframes๋ฅผ ์ฌ์ฉํ์ฌ ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋๋ฅผ ๋จ์ผ ํ์ด์ง์ ์๋ฒ ๋ํฉ๋๋ค. ๊ฐ iframe์ ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋๋ฅผ ์ํ ๋ ๋ฆฝ์ ์ธ ์ปจํ ์ด๋ ์ญํ ์ ํ์ฌ ์์ ํ ๊ฒฉ๋ฆฌ ๋ฐ ๋ ๋ฆฝ์ ์ธ ๋ฐฐํฌ๋ฅผ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค. ๊ทธ๋ฌ๋ iframes๋ ํต์ ๋ฐ ์คํ์ผ๋ง ์ธก๋ฉด์์ ์ฑ๋ฅ ์ค๋ฒํค๋์ ์ ํ์ ์ผ๊ธฐํ ์ ์์ต๋๋ค.
์์: ๊ธ๋ก๋ฒ ๊ธ์ต ์๋น์ค ํ์ฌ๊ฐ ์ฌ๋ฌ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋จ์ผ ๋์๋ณด๋์ ํตํฉํ๊ณ ์ ํฉ๋๋ค. ๊ฐ ์ ํ๋ฆฌ์ผ์ด์ (์: "ํธ๋ ์ด๋ฉ ํ๋ซํผ", "์ํ ๊ด๋ฆฌ ์์คํ ", "ํฌํธํด๋ฆฌ์ค ๋ถ์ ๋๊ตฌ")์ ๋ณ๋์ ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋๋ก ๋ฐฐํฌ๋์ด iframe์ ๋ก๋๋ฉ๋๋ค. ์ฃผ ๋์๋ณด๋๋ ์ปจํ ์ด๋ ์ญํ ์ ํ์ฌ ํตํฉ๋ ํ์ ๊ฒฝํ์ ์ ๊ณตํฉ๋๋ค.
์ฅ์ :
- ์๋ฒฝํ ๊ฒฉ๋ฆฌ
- ๋ ๋ฆฝ์ ์ธ ๋ฐฐํฌ
๋จ์ :
- ์ฑ๋ฅ ์ค๋ฒํค๋
- iframe ๊ฐ ํต์ ๋ฌธ์
- ์คํ์ผ๋ง ๋ถ์ผ์น
- ์ ๊ทผ์ฑ ๋ฌธ์
3. ์น ์ปดํฌ๋ํธ(Web Components)๋ฅผ ํตํ ๋ฐํ์ ํตํฉ
์น ์ปดํฌ๋ํธ๋ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ์ฌ์ฉ์ ์ง์ HTML ์์๋ฅผ ๋ง๋๋ ํ์ค ๋ฐฉ์์ ์ ๊ณตํฉ๋๋ค. ์ด ํจํด์์๋ ๊ฐ ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋๊ฐ ์น ์ปดํฌ๋ํธ๋ก ๊ตฌํ๋๋ฉฐ, ํ์ค HTML ๋งํฌ์ ์ ์ฌ์ฉํ์ฌ ํ์ด์ง์์ ํจ๊ป ๊ตฌ์ฑ๋ ์ ์์ต๋๋ค. ์ด ์ ๊ทผ ๋ฐฉ์์ ์ข์ ์ ์ฐ์ฑ๊ณผ ์ํธ ์ด์ฉ์ฑ์ ์ ๊ณตํ์ง๋ง, ์ผ๊ด์ฑ์ ๋ณด์ฅํ๊ณ ์ด๋ฆ ์ถฉ๋์ ํผํ๊ธฐ ์ํด ์ ์คํ ๊ณํ๊ณผ ์กฐ์ ์ด ํ์ํฉ๋๋ค.
์์: ๋๊ท๋ชจ ๋ฏธ๋์ด ์กฐ์ง์ด ๋ด์ค ์น์ฌ์ดํธ๋ฅผ ๊ตฌ์ถํ๊ณ ์์ต๋๋ค. "๊ธฐ์ฌ ํ์" ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋, "๋น๋์ค ํ๋ ์ด์ด" ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋, "๋๊ธ ์น์ " ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋๊ฐ ๊ฐ๊ฐ ์น ์ปดํฌ๋ํธ๋ก ๊ตฌํ๋ฉ๋๋ค. ์ด ์ปดํฌ๋ํธ๋ค์ ํ์๋๋ ์ฝํ ์ธ ์ ๋ฐ๋ผ ํ์ด์ง์ ๋์ ์ผ๋ก ๋ก๋๋๊ณ ๊ตฌ์ฑ๋ ์ ์์ต๋๋ค.
์ฅ์ :
- ๋ฐ์ด๋ ์ ์ฐ์ฑ
- ์ํธ ์ด์ฉ์ฑ
- ์ฌ์ฌ์ฉ์ฑ
๋จ์ :
- ์ ์คํ ๊ณํ ๋ฐ ์กฐ์ ํ์
- ์ ์ฌ์ ์ธ ์ด๋ฆ ์ถฉ๋
- ๋ธ๋ผ์ฐ์ ํธํ์ฑ ๊ณ ๋ ค ์ฌํญ (ํด๋ฆฌํ์ด ์กด์ฌํ์ง๋ง)
4. JavaScript๋ฅผ ํตํ ๋ฐํ์ ํตํฉ (Run-time Integration via JavaScript)
์ด ํจํด์ JavaScript๋ฅผ ์ฌ์ฉํ์ฌ ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋๋ฅผ ๋์ ์ผ๋ก ๋ก๋ํ๊ณ ๋ ๋๋งํ๋ ๊ฒ์ ํฌํจํฉ๋๋ค. ์ค์ ์ค์ผ์คํธ๋ ์ดํฐ ๊ตฌ์ฑ ์์๋ ํ์ด์ง์์ ๋ค์ํ ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋๋ฅผ ๊ฐ์ ธ์ ๋ ๋๋งํ๋ ์ญํ ์ ํฉ๋๋ค. ์ด ์ ๊ทผ ๋ฐฉ์์ ์ต๋ํ์ ์ ์ฐ์ฑ๊ณผ ์ ์ด๋ฅผ ์ ๊ณตํ์ง๋ง, ์์กด์ฑ๊ณผ ๋ผ์ฐํ ์ ์ ์คํ๊ฒ ๊ด๋ฆฌํด์ผ ํฉ๋๋ค.
์์: ๋ค๊ตญ์ ํต์ ํ์ฌ๊ฐ ๊ณ ๊ฐ ์๋น์ค ํฌํธ์ ๊ตฌ์ถํ๊ณ ์์ต๋๋ค. "๊ณ์ ๊ด๋ฆฌ" ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋, "์ฒญ๊ตฌ ์ ๋ณด" ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋, "๋ฌธ์ ํด๊ฒฐ" ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋๋ ์ฌ์ฉ์์ ํ๋กํ๊ณผ ์ํํ๋ ค๋ ์์ ์ ๋ฐ๋ผ JavaScript๋ฅผ ์ฌ์ฉํ์ฌ ๋์ ์ผ๋ก ๋ก๋๋ฉ๋๋ค. ์ค์ ๋ผ์ฐํฐ๋ URL์ ๊ธฐ๋ฐ์ผ๋ก ๋ก๋ํ ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋๋ฅผ ๊ฒฐ์ ํฉ๋๋ค.
์ฅ์ :
- ์ต๋ํ์ ์ ์ฐ์ฑ ๋ฐ ์ ์ด
- ๋์ ๋ก๋ฉ ๋ฐ ๋ ๋๋ง
๋จ์ :
- ๋ณต์กํ ๊ตฌํ
- ์์กด์ฑ ๋ฐ ๋ผ์ฐํ ์ ์ ์คํ ๊ด๋ฆฌ ํ์
- ์ ์ฌ์ ์ธ ์ฑ๋ฅ ๋ณ๋ชฉ ํ์
- ๋ณด์ ๊ณ ๋ ค ์ฌํญ ์ฆ๊ฐ
5. ์ฃ์ง ์ฌ์ด๋ ์ธํด๋ฃจ๋(ESI)๋ฅผ ํตํ ๋ฐํ์ ํตํฉ
ESI๋ ์ฃ์ง ์๋ฒ(์: CDN)์์ ํ์ด์ง์ ์ฝํ ์ธ ์กฐ๊ฐ์ ๋์ ์ผ๋ก ํฌํจํ ์ ์๊ฒ ํ๋ ๋งํฌ์ ์ธ์ด์ ๋๋ค. ์ด ํจํด์ ์ฃ์ง์์ ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋๋ฅผ ๊ตฌ์ฑํ๋ ๋ฐ ์ฌ์ฉ๋ ์ ์์ด ๋น ๋ฅด๊ณ ํจ์จ์ ์ธ ๋ ๋๋ง์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค. ๊ทธ๋ฌ๋ ESI๋ ๋ธ๋ผ์ฐ์ ์ง์์ด ์ ํ์ ์ด๋ฉฐ ๋๋ฒ๊น ํ๊ธฐ ์ด๋ ค์ธ ์ ์์ต๋๋ค.
์์: ๊ธ๋ก๋ฒ ์ ์์๊ฑฐ๋ ์๋งค์ ์ฒด๊ฐ CDN์ ์ฌ์ฉํ์ฌ ์น์ฌ์ดํธ๋ฅผ ์ ๊ณตํฉ๋๋ค. "์ ํ ์ถ์ฒ" ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋๋ ESI๋ฅผ ์ฌ์ฉํ์ฌ ๋ ๋๋ง๋๋ฉฐ ์ ํ ์์ธ ํ์ด์ง์ ํฌํจ๋ฉ๋๋ค. ์ด๋ฅผ ํตํด ์๋งค์ ์ฒด๋ ํ์ด์ง ์ฑ๋ฅ์ ์ํฅ์ ์ฃผ์ง ์์ผ๋ฉด์ ์ฌ์ฉ์์ ๊ฒ์ ๊ธฐ๋ก์ ๋ฐ๋ผ ์ถ์ฒ์ ๊ฐ์ธํํ ์ ์์ต๋๋ค.
์ฅ์ :
- ๋น ๋ฅด๊ณ ํจ์จ์ ์ธ ๋ ๋๋ง
- ํฅ์๋ ์ฑ๋ฅ
๋จ์ :
- ์ ํ์ ์ธ ๋ธ๋ผ์ฐ์ ์ง์
- ๋๋ฒ๊น ์ด๋ ค์
- ์ ๋ฌธ์ ์ธ ์ธํ๋ผ ํ์
6. ์๋ฒ ์ฌ์ด๋ ์ธํด๋ฃจ๋(SSI)๋ฅผ ํตํ ๋ฐํ์ ํตํฉ
ESI์ ์ ์ฌํ๊ฒ, SSI๋ ์๋ฒ์์ ์น ํ์ด์ง์ ํ์ผ์ ํฌํจํ ์ ์๊ฒ ํ๋ ์ง์๋ฌธ์ ๋๋ค. ์ผ๋ถ ์ต์ ๋ณด๋ค ๋์ ์ด์ง๋ ์์ง๋ง, ๊ธฐ๋ณธ์ ์ธ ๊ตฌ์ฑ ๋ฉ์ปค๋์ฆ์ ์ ๊ณตํฉ๋๋ค. ์ผ๋ฐ์ ์ผ๋ก ๋ ๊ฐ๋จํ ์น์ฌ์ดํธ์์ ์ฌ์ฉ๋๋ฉฐ, ํ๋ ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋ ์ํคํ ์ฒ์์๋ ๋ ํํฉ๋๋ค.
์์: ์๊ท๋ชจ ๊ตญ์ ์จ๋ผ์ธ ์์ ์ SSI๋ฅผ ์ฌ์ฉํ์ฌ ์น์ฌ์ดํธ์ ๋ชจ๋ ํ์ด์ง์ ๊ณตํต ํค๋์ ํธํฐ๋ฅผ ํฌํจํฉ๋๋ค. ํค๋์ ํธํฐ๋ ๋ณ๋์ ํ์ผ์ ์ ์ฅ๋์ด SSI ์ง์๋ฌธ์ ์ฌ์ฉํ์ฌ ํฌํจ๋ฉ๋๋ค.
์ฅ์ :
- ๊ฐ๋จํ ๊ตฌํ
๋จ์ :
- ์ ํ์ ์ธ ์ ์ฐ์ฑ
- ๋ณต์กํ ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋ ์ํคํ ์ฒ์๋ ์ ํฉํ์ง ์์
์ฌ๋ฐ๋ฅธ ์ํคํ ์ฒ ํจํด ์ ํํ๊ธฐ
๋ง์ดํฌ๋ก ํ๋ฐํธ์๋ ๊ตฌํ์ ๊ฐ์ฅ ์ ํฉํ ์ํคํ ์ฒ ํจํด์ ๋ค์์ ํฌํจํ ์ฌ๋ฌ ์์์ ๋ฐ๋ผ ๋ฌ๋ผ์ง๋๋ค.
- ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ณต์ก์ฑ: ๊ฐ๋จํ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฒฝ์ฐ ๋น๋ ํ์ ํตํฉ ๋๋ iframe์ผ๋ก ์ถฉ๋ถํ ์ ์์ต๋๋ค. ๋ ๋ณต์กํ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฒฝ์ฐ ์น ์ปดํฌ๋ํธ ๋๋ JavaScript ๊ธฐ๋ฐ ํตํฉ์ด ๋ ์ ํฉํ ์ ์์ต๋๋ค.
- ์๊ตฌ๋๋ ๋ ๋ฆฝ์ฑ ์์ค: ์ต๋ํ์ ๋ ๋ฆฝ์ฑ๊ณผ ์ ์ฐ์ฑ์ด ํ์ํ ๊ฒฝ์ฐ JavaScript ๋๋ ์น ์ปดํฌ๋ํธ๋ฅผ ํตํ ๋ฐํ์ ํตํฉ์ด ์ต์ ์ ์ ํ์ ๋๋ค.
- ํ์ ๊ธฐ์ ๋ฐ ๊ฒฝํ: ํ์ด ํธ์ํ๊ฒ ๋๋ผ๊ณ ๊ตฌํํ ๊ธฐ์ ์ ๊ฐ์ถ ํจํด์ ์ ํํ์ญ์์ค.
- ์ธํ๋ผ ๋ฐ ํด๋ง: ์ธํ๋ผ์ ํด๋ง์ด ์ ํํ ํจํด์ ์ง์ํ๋์ง ํ์ธํ์ญ์์ค.
- ์ฑ๋ฅ ์๊ตฌ ์ฌํญ: ๊ฐ ํจํด์ ์ฑ๋ฅ ์ํฅ์ ๊ณ ๋ คํ๊ณ ์๊ตฌ ์ฌํญ์ ๊ฐ์ฅ ์ ํฉํ ๊ฒ์ ์ ํํ์ญ์์ค.
๋ง์ดํฌ๋ก ํ๋ฐํธ์๋ ๊ตฌํ์ ์ํ ์ค์ง์ ์ธ ๊ณ ๋ ค ์ฌํญ
๋ง์ดํฌ๋ก ํ๋ฐํธ์๋ ์ํคํ ์ฒ๋ฅผ ๊ตฌํํ๋ ค๋ฉด ์ ์คํ ๊ณํ๊ณผ ์คํ์ด ํ์ํฉ๋๋ค. ๋ค์์ ์ผ๋์ ๋์ด์ผ ํ ๋ช ๊ฐ์ง ์ค์ง์ ์ธ ๊ณ ๋ ค ์ฌํญ์ ๋๋ค.
- ๋ช ํํ ๊ฒฝ๊ณ ์ค์ : ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋ ๊ฐ์ ๋ช ํํ ๊ฒฝ๊ณ๋ฅผ ์ ์ํ์ฌ ์ง์ ์ผ๋ก ๋ ๋ฆฝ์ ์ธ์ง ํ์ธํ์ญ์์ค.
- ๊ณตํต ์ธํฐํ์ด์ค ์ ์: ์ํธ ์ด์ฉ์ฑ์ ๋ณด์ฅํ๊ธฐ ์ํด ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋ ๊ฐ ํต์ ์ ์ํ ๊ณตํต ์ธํฐํ์ด์ค๋ฅผ ์ ์ํ์ญ์์ค.
- ๊ฐ๋ ฅํ ๋ผ์ฐํ ๋ฉ์ปค๋์ฆ ๊ตฌํ: ์ฌ์ฉ์๊ฐ ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋ ๊ฐ์ ์ํํ๊ฒ ํ์ํ ์ ์๋๋ก ๊ฐ๋ ฅํ ๋ผ์ฐํ ๋ฉ์ปค๋์ฆ์ ๊ตฌํํ์ญ์์ค.
- ๊ณต์ ์ข ์์ฑ ๊ด๋ฆฌ: ์ถฉ๋์ ํผํ๊ณ ์ผ๊ด์ฑ์ ๋ณด์ฅํ๊ธฐ ์ํด ๊ณต์ ์ข ์์ฑ์ ์ ์คํ๊ฒ ๊ด๋ฆฌํ์ญ์์ค.
- ํฌ๊ด์ ์ธ ํ ์คํธ ์ ๋ต ๊ตฌํ: ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋๊ฐ ํจ๊ป ์ ์๋ํ๋์ง ํ์ธํ๊ธฐ ์ํด ํฌ๊ด์ ์ธ ํ ์คํธ ์ ๋ต์ ๊ตฌํํ์ญ์์ค.
- ์ฑ๋ฅ ๋ชจ๋ํฐ๋ง: ๋ณ๋ชฉ ํ์์ ์๋ณํ๊ณ ํด๊ฒฐํ๊ธฐ ์ํด ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋์ ์ฑ๋ฅ์ ๋ชจ๋ํฐ๋งํ์ญ์์ค.
- ๋ช ํํ ์์ ๊ถ ํ๋ฆฝ: ๊ฐ ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋์ ๋ช ํํ ์์ ๊ถ์ ํน์ ํ์ ํ ๋นํ์ญ์์ค.
- ๋ชจ๋ ๊ฒ ๋ฌธ์ํ: ๋ชจ๋ ์ฌ๋์ด ๋์ผํ ์ ๋ณด๋ฅผ ๊ณต์ ํ๋๋ก ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋์ ์ํคํ ์ฒ, ์ค๊ณ ๋ฐ ๊ตฌํ์ ๋ฌธ์ํํ์ญ์์ค.
- ๋ณด์ ๊ณ ๋ ค ์ฌํญ: ์ทจ์ฝ์ฑ์ผ๋ก๋ถํฐ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ณดํธํ๊ธฐ ์ํด ๊ฐ๋ ฅํ ๋ณด์ ์กฐ์น๋ฅผ ๊ตฌํํ์ญ์์ค.
๋ง์ดํฌ๋ก ํ๋ฐํธ์๋ ๋์ ์ ์ค์ ์ฌ๋ก
์ฌ๋ฌ ์กฐ์ง์์ ํ์ฅ ๊ฐ๋ฅํ๊ณ ์ ์ง๋ณด์ ๊ฐ๋ฅํ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๊ธฐ ์ํด ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋ ์ํคํ ์ฒ๋ฅผ ์ฑ๊ณต์ ์ผ๋ก ์ฑํํ์ต๋๋ค. ๋ช ๊ฐ์ง ์์๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
- Spotify: Spotify๋ ๋ฐ์คํฌํฑ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๊ธฐ ์ํด ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋๋ฅผ ์ฌ์ฉํฉ๋๋ค. ์์ ํ๋ ์ด์ด, ๊ฒ์ ๊ธฐ๋ฅ, ์์ ๊ธฐ๋ฅ ๋ฑ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ค๋ฅธ ๋ถ๋ถ์ ๋ค๋ฅธ ํ์ด ๋ด๋นํฉ๋๋ค.
- IKEA: IKEA๋ ์ ์์๊ฑฐ๋ ์น์ฌ์ดํธ๋ฅผ ๊ตฌ์ถํ๊ธฐ ์ํด ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋๋ฅผ ์ฌ์ฉํฉ๋๋ค. ์ ํ ์นดํ๋ก๊ทธ, ์ฅ๋ฐ๊ตฌ๋, ๊ฒฐ์ ํ๋ก์ธ์ค ๋ฑ ์น์ฌ์ดํธ์ ๋ค๋ฅธ ๋ถ๋ถ์ ๋ค๋ฅธ ํ์ด ๋ด๋นํฉ๋๋ค.
- DAZN: ์คํฌ์ธ ์คํธ๋ฆฌ๋ฐ ์๋น์ค์ธ DAZN์ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๊ธฐ ์ํด ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋๋ฅผ ์ฌ์ฉํฉ๋๋ค. ์ด๋ฅผ ํตํด ๋ค์ํ ์คํฌ์ธ ๋ฐ ์ง์ญ์ ๊ฑธ์ณ ๊ธฐ๋ฅ์ ๋ ๋ฆฝ์ ์ผ๋ก ์ ๋ฐ์ดํธํ ์ ์์ต๋๋ค.
- OpenTable: ์จ๋ผ์ธ ๋ ์คํ ๋ ์์ฝ ์๋น์ค์ธ OpenTable์ ํ๋ซํผ์ ๋ค์ํ ์ธก๋ฉด์ ๊ด๋ฆฌํ๊ธฐ ์ํด ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋๋ฅผ ํ์ฉํ์ฌ ๋ ๋น ๋ฅธ ๊ฐ๋ฐ ๋ฐ ๋ฐฐํฌ ์ฃผ๊ธฐ๋ฅผ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค.
๊ฒฐ๋ก
๋ง์ดํฌ๋ก ํ๋ฐํธ์๋๋ ํ์ฅ ๊ฐ๋ฅํ๊ณ ์ ์ง๋ณด์ ๊ฐ๋ฅํ๋ฉฐ ํ๋ ฅ์ ์ธ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๊ธฐ ์ํ ๋งค๋ ฅ์ ์ธ ์ํคํ ์ฒ ์ ๊ทผ ๋ฐฉ์์ ์ ๊ณตํฉ๋๋ค. ์ผ๋ถ ๊ณผ์ ๊ฐ ์์ง๋ง, ๊ฐ๋ฐ ์๋ ํฅ์, ์ ์ง๋ณด์์ฑ ๊ฐ์ ๋ฐ ๊ธฐ์ ๋ค์์ฑ์ ์ด์ ์ ์๋นํ ์ ์์ต๋๋ค. ๋ค์ํ ์ํคํ ์ฒ ํจํด๊ณผ ์ค์ ๊ณ ๋ ค ์ฌํญ์ ์ ์คํ๊ฒ ๊ณ ๋ คํจ์ผ๋ก์จ ์กฐ์ง์ ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋๋ฅผ ์ฑ๊ณต์ ์ผ๋ก ์ฑํํ๊ณ ์ด ๊ฐ๋ ฅํ ์ ๊ทผ ๋ฐฉ์์ ์ด์ ์ ์ป์ ์ ์์ต๋๋ค. ํต์ฌ์ ํน์ ์๊ตฌ ์ฌํญ์ ๋ง๋ ์ฌ๋ฐ๋ฅธ ํจํด์ ์ ํํ๊ณ ์ฑ๊ณต์ ์ธ ๊ตฌํ์ ์ํด ํ์ํ ์ธํ๋ผ, ํด๋ง ๋ฐ ๊ต์ก์ ํฌ์ํ๋ ๊ฒ์ ๋๋ค. ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ณต์ก์ฑ์ด ๊ณ์ ์ฆ๊ฐํจ์ ๋ฐ๋ผ ๋ง์ดํฌ๋ก ํ๋ฐํธ์๋๋ ํ๋์ ์ด๊ณ ํ์ฅ ๊ฐ๋ฅํ๋ฉฐ ์ ์ง๋ณด์ ๊ฐ๋ฅํ ์ฌ์ฉ์ ์ธํฐํ์ด์ค๋ฅผ ๊ตฌ์ถํ๋ ๋ฐ ์ ์ ๋ ์ค์ํ ์ํคํ ์ฒ ํจํด์ด ๋ ๊ฒ์ ๋๋ค.