JAMstack ์ํคํ ์ฒ์ ์ ์ ์ฌ์ดํธ ์์ฑ(SSG)์ ํตํด ํ๋์ ์ด๊ณ ์ฑ๋ฅ์ด ๋ฐ์ด๋ ์น์ฌ์ดํธ๋ฅผ ๊ตฌ์ถํ๋ ๋ฐฉ๋ฒ์ ์์๋ณด์ธ์. ๊ธ๋ก๋ฒ ๊ฐ๋ฐํ์ ์ํ ์ด์ , ๋๊ตฌ, ์ํฌํ๋ก์ฐ๋ฅผ ํ์ตํฉ๋๋ค.
ํ๋ก ํธ์๋ JAMstack: ์ ์ ์ฌ์ดํธ ์์ฑ - ๊ธ๋ก๋ฒ ๊ด์
JAMstack ์ํคํ ์ฒ๋ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ํ๋ช ์ ์ผ์ผ์ผ ์ฑ๋ฅ, ๋ณด์, ํ์ฅ์ฑ ๋ฉด์์ ์๋นํ ๊ฐ์ ์ ๊ฐ์ ธ์์ต๋๋ค. ๊ทธ ํต์ฌ์๋ ๋น๋ ์์ ์ ์น ํ์ด์ง๋ฅผ ๋ฏธ๋ฆฌ ๋ ๋๋งํ์ฌ ์ ์ธ๊ณ ์ฌ์ฉ์์๊ฒ ๋ฒ๊ฐ์ฒ๋ผ ๋น ๋ฅธ ๊ฒฝํ์ ์ ๊ณตํ๋ ๊ธฐ์ ์ธ ์ ์ ์ฌ์ดํธ ์์ฑ(SSG)์ด ์์ต๋๋ค. ์ด ์ ๊ทผ ๋ฐฉ์์ ๋คํธ์ํฌ ์ง์ฐ ์๊ฐ๊ณผ ๊ธฐ๊ธฐ ์ ํ์ด ์น์ฌ์ดํธ ์ฑ๋ฅ์ ํฐ ์ํฅ์ ๋ฏธ์น ์ ์๋ ๊ธ๋ก๋ฒ ์ฌ์ฉ์์๊ฒ ํนํ ์ ์ฉํฉ๋๋ค.
JAMstack์ด๋ ๋ฌด์์ธ๊ฐ?
JAMstack์ JavaScript, API, Markup์ ์ฝ์์ ๋๋ค. ์ด๋ ํ๋ก ํธ์๋์ ๋ฐฑ์๋๋ฅผ ๋ถ๋ฆฌํ์ฌ ๊ฐ๋ฐ์๊ฐ ๋ ๋น ๋ฅด๊ณ ์์ ํ๋ฉฐ ํ์ฅํ๊ธฐ ์ฌ์ด ์น์ฌ์ดํธ์ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋ค ์ ์๋๋ก ํ๋ ํ๋์ ์ธ ์น ์ํคํ ์ฒ์ ๋๋ค.
- JavaScript: ๋์ ๊ธฐ๋ฅ ๋ฐ ์ฌ์ฉ์ ์ํธ์์ฉ์ ์ฒ๋ฆฌํฉ๋๋ค.
- APIs: API๋ฅผ ํตํด ๋ฐฑ์๋ ์๋น์ค ๋ฐ ๋ฐ์ดํฐ์ ์ํธ์์ฉํฉ๋๋ค.
- Markup: ์ฌ์ฉ์์๊ฒ ์ง์ ์ ๊ณต๋๋ ์ฌ์ ๋ ๋๋ง๋ HTML, CSS, ์ด๋ฏธ์ง์ ๋๋ค.
JAMstack์ ํต์ฌ ์์น์ ๊ฐ ์์ฒญ ์๋ง๋ค ์ ํ๋ฆฌ์ผ์ด์ ์ด๋ ์น์ฌ์ดํธ๋ฅผ ๋ ๋๋งํ๋ ๋์ ๋น๋ ์์ ์ ๋ฏธ๋ฆฌ ๋ ๋๋งํ๋ ๊ฒ์ ๋๋ค. ๊ทธ ๊ฒฐ๊ณผ ์ฌ์ฉ์์ ๊ฐ๊น์ด CDN(์ฝํ ์ธ ์ ์ก ๋คํธ์ํฌ)์์ ์ ๊ณต๋ ์ ์๋ ์ ์ ์์ฐ์ด ์์ฑ๋์ด ์ฌ์ฉ์์ ์์น์ ๊ด๊ณ์์ด ์ง์ฐ ์๊ฐ์ ์ต์ํํ๊ณ ์ฑ๋ฅ์ ํฅ์์ํต๋๋ค.
์ ์ ์ฌ์ดํธ ์์ฑ(SSG) ์ดํดํ๊ธฐ
์ ์ ์ฌ์ดํธ ์์ฑ์ JAMstack์ ํต์ฌ ๊ตฌ์ฑ ์์์ ๋๋ค. ์ด๋ ์ฌ์ฉ์๊ฐ ํ์ด์ง๋ฅผ ์์ฒญํ ๋๋ง๋ค ์๋ฒ์์ ๋์ ์ผ๋ก ์์ฑํ๋ ๋์ , ๋น๋ ๊ณผ์ ์์ ์น์ฌ์ดํธ์ HTML, CSS, JavaScript ํ์ผ์ ๊ตฌ์ถํ๋ ๊ฒ์ ํฌํจํฉ๋๋ค. ์ด ์ฌ์ ๋ ๋๋ง ํ๋ก์ธ์ค๋ ์ฌ๋ฌ ๊ฐ์ง ์ด์ ์ ์ ๊ณตํฉ๋๋ค:
- ํฅ์๋ ์ฑ๋ฅ: ์ ์ ์์ฐ์ CDN์์ ์ง์ ์ ๊ณต๋๋ฏ๋ก ๋ก๋ ์๊ฐ์ด ํฌ๊ฒ ๋จ์ถ๋ฉ๋๋ค. ์ด๋ ์ธํฐ๋ท ์ฐ๊ฒฐ์ด ๋๋ฆฐ ์ง์ญ์ ์ฌ์ฉ์์๊ฒ ํนํ ์ค์ํฉ๋๋ค.
- ๊ฐํ๋ ๋ณด์: ๊ฐ ์์ฒญ์ ๋ํ ์๋ฒ ์ธก ์ฝ๋ ์คํ์ด ์์ผ๋ฏ๋ก ๊ณต๊ฒฉ ํ๋ฉด์ด ํฌ๊ฒ ์ค์ด๋ค์ด ์ผ๋ฐ์ ์ธ ์น ์ทจ์ฝ์ ์ผ๋ก๋ถํฐ ์น์ฌ์ดํธ๋ฅผ ๋ ์์ ํ๊ฒ ๋ง๋ญ๋๋ค.
- ํ์ฅ์ฑ: ์ ์ ์์ฐ์ ์ ๊ณตํ๋ ๊ฒ์ ๋งค์ฐ ํ์ฅ์ฑ์ด ๋ฐ์ด๋ฉ๋๋ค. CDN์ ๋์ ํธ๋ํฝ ๋ถํ๋ฅผ ์ฒ๋ฆฌํ๋๋ก ์ค๊ณ๋์ด ํผํฌ ์๊ฐ์๋ ์ผ๊ด๋ ์ฑ๋ฅ์ ๋ณด์ฅํฉ๋๋ค.
- ๋น์ฉ ์ ๊ฐ: ์ ์ ์ฌ์ดํธ๋ ๋ ์ ์ ์๋ฒ ์ธํ๋ผ์ ๋ฆฌ์์ค๋ฅผ ํ์๋ก ํ๋ฏ๋ก ํธ์คํ ๋น์ฉ์ด ์ ๊ฐ๋ฉ๋๋ค.
- ํฅ์๋ SEO: ๊ฒ์ ์์ง์ด ์ ์ ์ฝํ ์ธ ๋ฅผ ์ฝ๊ฒ ํฌ๋กค๋งํ๊ณ ์ธ๋ฑ์ฑํ ์ ์์ด ๊ฒ์ ์์ง ์์๊ฐ ํฅ์๋ฉ๋๋ค.
๊ธ๋ก๋ฒ ์ฌ์ฉ์๋ฅผ ์ํ SSG์ ์ด์
SSG๋ ์ ์ธ๊ณ ์ฌ์ฉ์๋ฅผ ๋์์ผ๋ก ํ๋ ์น์ฌ์ดํธ์ ํนํ ๋ช ๊ฐ์ง ๊ฐ๋ ฅํ ์ด์ ์ ์ ๊ณตํฉ๋๋ค:
1. ์ง์ญ ์ ๋ฐ์ ๊ฑธ์น ๋ ๋น ๋ฅธ ๋ก๋ ์๊ฐ
CDN์์ ์ ์ ์์ฐ์ ์ ๊ณตํ๋ฉด ์ ์ธ๊ณ ์ฌ์ฉ์๊ฐ ๋ ๋น ๋ฅธ ๋ก๋ ์๊ฐ์ ๊ฒฝํํ ์ ์์ต๋๋ค. CDN์ ์ฌ๋ฌ ์ง๋ฆฌ์ ์ง์ญ์ ์์นํ ์ฌ๋ฌ ์๋ฒ์ ์ฝํ ์ธ ๋ฅผ ๋ฐฐํฌํฉ๋๋ค. ์ฌ์ฉ์๊ฐ ํ์ด์ง๋ฅผ ์์ฒญํ๋ฉด CDN์ ์ฌ์ฉ์์ ์์น์์ ๊ฐ์ฅ ๊ฐ๊น์ด ์๋ฒ์์ ์ฝํ ์ธ ๋ฅผ ์ ๊ณตํ์ฌ ์ง์ฐ ์๊ฐ์ ์ต์ํํ๊ณ ์ฌ์ฉ์ ๊ฒฝํ์ ํฅ์์ํต๋๋ค. ์๋ฅผ ๋ค์ด, ๋ฏธ๊ตญ์์ ํธ์คํ ๋๋ ์น์ฌ์ดํธ์ ์ ์ํ๋ ๋์ฟ์ ์ฌ์ฉ์๋ ๋ฏธ๊ตญ ์๋ฒ์์ ์ง์ ์ฝํ ์ธ ๋ฅผ ๋ฐ๋ ๋์ ์์์์ ์์นํ CDN ์๋ฒ์์ ์ฝํ ์ธ ๋ฅผ ๋ฐ๊ฒ ๋ฉ๋๋ค.
์์: ๋ถ๋ฏธ, ์ ๋ฝ, ์์์์ ๊ณ ๊ฐ์ ๋์์ผ๋ก ํ๋ ์ ์์๊ฑฐ๋ ์น์ฌ์ดํธ๋ฅผ ์๊ฐํด๋ณด์ธ์. SSG์ CDN์ ์ฌ์ฉํ๋ฉด ์ธ ์ง์ญ ๋ชจ๋ ์ฌ์ฉ์์ ์ ํ ํ์ด์ง๊ฐ ๋น ๋ฅด๊ฒ ๋ก๋๋์ด ์ ํ์จ๊ณผ ๊ณ ๊ฐ ๋ง์กฑ๋๊ฐ ํฅ์๋ฉ๋๋ค.
2. ์ ํ๋ ๋์ญํญ์ ๊ฐ์ง ์ฌ์ฉ์๋ฅผ ์ํ ์ ๊ทผ์ฑ ํฅ์
์ธ๊ณ ์ฌ๋ฌ ์ง์ญ์์๋ ์ธํฐ๋ท ์ฐ๊ฒฐ์ด ์ฌ์ ํ ์ ํ์ ์ด๋ฉฐ, ์ฌ์ฉ์๋ ์ฒ๋ฆฌ ๋ฅ๋ ฅ์ด ๋ฎ์ ๊ตฌํ ๊ธฐ๊ธฐ์์ ์น์ฌ์ดํธ์ ์ ์ํ ์ ์์ต๋๋ค. ์ ์ ์ฌ์ดํธ๋ ๊ฐ๋ณ๊ณ ํด๋ผ์ด์ธํธ ์ธก์์ ์ต์ํ์ ์ฒ๋ฆฌ๋ง ํ์ํ๋ฏ๋ก ๋์ญํญ์ด ์ ํ์ ์ด๊ฑฐ๋ ๊ตฌํ ๊ธฐ๊ธฐ๋ฅผ ์ฌ์ฉํ๋ ์ฌ์ฉ์์๊ฒ ์ด์์ ์ ๋๋ค.
์์: ๊ฐ๋ฐ๋์๊ตญ์ ๋ ์๋ฅผ ๋์์ผ๋ก ํ๋ ๋ด์ค ์น์ฌ์ดํธ๋ SSG๋ฅผ ์ฌ์ฉํ์ฌ ์ธํฐ๋ท ์ฐ๊ฒฐ์ด ๋๋ฆฐ ์ฌ์ฉ์์๊ฒ ๋น ๋ฅด๊ณ ์ ๊ทผํ๊ธฐ ์ฌ์ด ๊ฒฝํ์ ์ ๊ณตํ ์ ์์ต๋๋ค.
3. ๋ค๊ตญ์ด ์ฝํ ์ธ ์ ๋ํ SEO ๊ฐํ
SSG๋ ์ฌ๋ฌ ์ธ์ด๋ก ๋ ์น์ฌ์ดํธ๋ฅผ ๊ฒ์ ์์ง์ ์ต์ ํํ๋ ๊ฒ์ ๋ ์ฝ๊ฒ ๋ง๋ญ๋๋ค. ์ ์ ์ฌ์ดํธ๋ ์ฝ๊ฒ ํฌ๋กค๋งํ ์ ์์ผ๋ฉฐ, ๊ฒ์ ์์ง์ ๋ค๋ฅธ ์ธ์ด์ ์ฝํ ์ธ ๋ฅผ ์ ์ํ๊ฒ ์ธ๋ฑ์ฑํ ์ ์์ต๋๋ค. `hreflang` ํ๊ทธ์ ๊ฒฐํฉ๋ ์ ์ ํ๊ฒ ๊ตฌ์กฐํ๋ ์ ์ ์ฌ์ดํธ๋ ๊ฒ์ ์์ง์ด ์ฌ์ฉ์์ ์์น ๋ฐ ์ธ์ด ๊ธฐ๋ณธ ์ค์ ์ ๋ฐ๋ผ ์ฌ๋ฐ๋ฅธ ์ธ์ด ๋ฒ์ ์ ์ ๊ณตํ ์ ์๋๋ก ํฉ๋๋ค.
์์: ์์ด, ์คํ์ธ์ด, ํ๋์ค์ด๋ก ์๋น์ค๋ฅผ ์ ๊ณตํ๋ ์ฌํ์ฌ๋ SSG๋ฅผ ์ฌ์ฉํ์ฌ ๊ฐ ์ธ์ด๋ณ๋ก ์น์ฌ์ดํธ์ ๋ณ๋ ๋ฒ์ ์ ๋ง๋ค ์ ์์ต๋๋ค. `hreflang` ํ๊ทธ๋ฅผ ์ฌ์ฉํ๋ฉด ๊ฒ์ ์์ง์ด ์ฌ์ฉ์๋ฅผ ์ ์ ํ ์ธ์ด ๋ฒ์ ์ผ๋ก ์๋ดํ ์ ์์ต๋๋ค.
4. ๋ ์ฌ์ด ๊ตญ์ ํ(i18n) ๋ฐ ํ์งํ(l10n)
SSG๋ ๊ตญ์ ํ(i18n) ๋ฐ ํ์งํ(l10n) ํ๋ก์ธ์ค๋ฅผ ๋จ์ํํฉ๋๋ค. SSG๋ฅผ ์ฌ์ฉํ๋ฉด ์น์ฌ์ดํธ์ ๋ค๋ฅธ ์ธ์ด ๋ฒ์ ์ ์ฝ๊ฒ ๊ด๋ฆฌํ๊ณ ์ฌ์ฉ์์ ๋ก์ผ์ผ์ ๋ฐ๋ผ ๋์ ์ผ๋ก ์ ํํ ์ ์์ต๋๋ค. ์ด๋ ๋ค๋ฅธ ๊ตญ๊ฐ ๋ฐ ๋ฌธํ๊ถ์ ์ฌ์ฉ์์๊ฒ ๊ฐ์ธํ๋ ๊ฒฝํ์ ์ ๊ณตํ๋ ๋ฐ ๋งค์ฐ ์ค์ํฉ๋๋ค.
์์: ์ฌ๋ฌ ์ธ์ด๋ก ์ ํ์ ์ ๊ณตํ๋ ์ํํธ์จ์ด ํ์ฌ๋ SSG๋ฅผ ์ฌ์ฉํ์ฌ ๋ง์ผํ ์น์ฌ์ดํธ์ ํ์งํ๋ ๋ฒ์ ์ ๋ง๋ค์ด ๊ฐ ์ง์ญ์ ์ฌ์ฉ์์๊ฒ ๊ด๋ จ์ฑ ์๊ณ ๋งค๋ ฅ์ ์ธ ์ฝํ ์ธ ๋ฅผ ๋ณด์ฅํ ์ ์์ต๋๋ค.
์ธ๊ธฐ ์๋ ์ ์ ์ฌ์ดํธ ์์ฑ๊ธฐ
๋ช ๊ฐ์ง ํ๋ฅญํ ์ ์ ์ฌ์ดํธ ์์ฑ๊ธฐ๊ฐ ์์ผ๋ฉฐ, ๊ฐ๊ฐ ์ฅ๋จ์ ์ด ์์ต๋๋ค. ์ฌ๋ฐ๋ฅธ ๊ฒ์ ์ ํํ๋ ๊ฒ์ ํ๋ก์ ํธ ์๊ตฌ ์ฌํญ๊ณผ ์ ํธ๋์ ๋ฐ๋ผ ๋ค๋ฆ ๋๋ค.
1. Next.js (React)
Next.js๋ ์ ์ ์ฌ์ดํธ ์์ฑ(SSG)๊ณผ ์๋ฒ ์ธก ๋ ๋๋ง(SSR)์ ๋ชจ๋ ์ง์ํ๋ ์ธ๊ธฐ ์๋ React ํ๋ ์์ํฌ์ ๋๋ค. ๋์ ์ฝํ ์ธ ๊ฐ ์๋ ๋ณต์กํ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๊ธฐ ์ํ ๋ค๋ชฉ์ ์ ํ์ ๋๋ค. Next.js๋ ๋ค์๊ณผ ๊ฐ์ ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค:
- ์๋ ์ฝ๋ ๋ถํ : ํ์ํ JavaScript๋ง ๋ก๋ํ์ฌ ์ด๊ธฐ ๋ก๋ ์๊ฐ์ ๊ฐ์ ํฉ๋๋ค.
- ๋ด์ฅ CSS ์ง์: ์คํ์ผ๋ง ๋ฐ ์ปดํฌ๋ํธ ๋์์ธ์ ๋จ์ํํฉ๋๋ค.
- API ๊ฒฝ๋ก: ๋์ ๋ฐ์ดํฐ๋ฅผ ์ฒ๋ฆฌํ๊ธฐ ์ํ ์๋ฒ๋ฆฌ์ค ํจ์๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค.
- ์ด๋ฏธ์ง ์ต์ ํ: ๋ค์ํ ๊ธฐ๊ธฐ ๋ฐ ํ๋ฉด ํฌ๊ธฐ์ ๋ง๊ฒ ์ด๋ฏธ์ง๋ฅผ ์๋์ผ๋ก ์ต์ ํํฉ๋๋ค.
์์: ๋น ๋ฅธ ๋ก๋ ์๊ฐ์ ์ํด SSG๋ฅผ ์ฌ์ฉํ์ฌ ์ฌ์ ๋ ๋๋ง๋ ์ ํ ํ์ด์ง๊ฐ ์๋ ์ ์์๊ฑฐ๋ ์น์ฌ์ดํธ๋ฅผ ๊ตฌ์ถํ๊ณ , ์ฌ์ฉ์ ์ธ์ฆ ๋ฐ ์ฃผ๋ฌธ ์ฒ๋ฆฌ๋ฅผ ์ํด API ๊ฒฝ๋ก๋ฅผ ์ฌ์ฉํฉ๋๋ค.
2. Gatsby (React)
Gatsby๋ ํ๋ฌ๊ทธ์ธ ์ํ๊ณ์ GraphQL ๋ฐ์ดํฐ ๊ณ์ธต์ผ๋ก ์ ๋ช ํ ๋ ๋ค๋ฅธ ์ธ๊ธฐ ์๋ React ๊ธฐ๋ฐ ์ ์ ์ฌ์ดํธ ์์ฑ๊ธฐ์ ๋๋ค. ์ฝํ ์ธ ๊ฐ ํ๋ถํ ์น์ฌ์ดํธ์ ๋ธ๋ก๊ทธ๋ฅผ ๊ตฌ์ถํ๊ธฐ์ ์ข์ ์ ํ์ ๋๋ค.
- GraphQL ๋ฐ์ดํฐ ๊ณ์ธต: CMS, API, ๋งํฌ๋ค์ด ํ์ผ๊ณผ ๊ฐ์ ๋ค์ํ ์์ค์์ ๋ฐ์ดํฐ๋ฅผ ์ฝ๊ฒ ๊ฐ์ ธ์ฌ ์ ์์ต๋๋ค.
- ํ๋ฌ๊ทธ์ธ ์ํ๊ณ: SEO, ์ด๋ฏธ์ง ์ต์ ํ, ๋ถ์๊ณผ ๊ฐ์ ๊ธฐ๋ฅ์ ์ถ๊ฐํ๊ธฐ ์ํ ๋ค์ํ ํ๋ฌ๊ทธ์ธ์ ์ ๊ณตํฉ๋๋ค.
- ๋น ๋ฅธ ์๋ก๊ณ ์นจ: ๋ธ๋ผ์ฐ์ ์์ ๊ฑฐ์ ์ฆ๊ฐ์ ์ธ ์ ๋ฐ์ดํธ๋ก ์ ์ํ ๊ฐ๋ฐ์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค.
์์: Contentful์ด๋ Strapi์ ๊ฐ์ ํค๋๋ฆฌ์ค CMS์์ ์ฝํ ์ธ ๋ฅผ ์์ฑํ๋ ๋ธ๋ก๊ทธ๋ฅผ ๊ตฌ์ถํ๊ณ , SEO ๋ฐ ์ด๋ฏธ์ง ์ต์ ํ๋ฅผ ์ํด Gatsby์ ํ๋ฌ๊ทธ์ธ ์ํ๊ณ๋ฅผ ํ์ฉํฉ๋๋ค.
3. Hugo (Go)
Hugo๋ Go๋ก ์์ฑ๋ ๋น ๋ฅด๊ณ ์ ์ฐํ ์ ์ ์ฌ์ดํธ ์์ฑ๊ธฐ์ ๋๋ค. ์๋์ ๋จ์์ฑ์ผ๋ก ์ ๋ช ํ์ฌ ์์ฒ ํ์ด์ง๊ฐ ์๋ ๋๊ท๋ชจ ์น์ฌ์ดํธ๋ฅผ ๊ตฌ์ถํ๊ธฐ์ ์ข์ ์ ํ์ ๋๋ค.
- ์์ฒญ๋๊ฒ ๋น ๋ฅธ ๋น๋ ์๊ฐ: Hugo๋ ์์ฒ ํ์ด์ง๊ฐ ์์ด๋ ๋ฐ๋ฆฌ์ด ๋จ์๋ก ์ ์ ์ฌ์ดํธ๋ฅผ ์์ฑํ ์ ์์ต๋๋ค.
- ๊ฐ๋จํ ํ ํ๋ฆฟ ์ธ์ด: Hugo์ ํ ํ๋ฆฟ ์ธ์ด๋ ๋ฐฐ์ฐ๊ณ ์ฌ์ฉํ๊ธฐ ์ฝ์ต๋๋ค.
- ๋ถ๋ฅ ์ฒด๊ณ์ ๋ํ ๋ด์ฅ ์ง์: Hugo๋ ์นดํ ๊ณ ๋ฆฌ์ ํ๊ทธ๋ฅผ ์ฌ์ฉํ์ฌ ์ฝํ ์ธ ๋ฅผ ์ฝ๊ฒ ๊ตฌ์ฑํ ์ ์๋๋ก ํฉ๋๋ค.
์์: ๋๊ท๋ชจ ์คํ ์์ค ํ๋ก์ ํธ๋ฅผ ์ํ ๋ฌธ์ ์น์ฌ์ดํธ๋ฅผ ๊ตฌ์ถํ๊ณ , Hugo์ ์๋์ ์ ์ฐ์ฑ์ ํ์ฉํ์ฌ ๋ฐฉ๋ํ ์์ ์ฝํ ์ธ ๋ฅผ ๊ด๋ฆฌํฉ๋๋ค.
4. Jekyll (Ruby)
Jekyll์ ๋ธ๋ก๊ทธ์ ๊ฐ์ธ ์น์ฌ์ดํธ๋ฅผ ๊ตฌ์ถํ๋ ๋ฐ ์ ํฉํ ๊ฐ๋จํ๊ณ ์ธ๊ธฐ ์๋ ์ ์ ์ฌ์ดํธ ์์ฑ๊ธฐ์ ๋๋ค. GitHub Pages์ ์์ง์ด๊ธฐ๋ ํฉ๋๋ค.
- ๊ฐ๋จํ๊ณ ์ฌ์ฉํ๊ธฐ ์ฌ์: Jekyll์ ๋ฐฐ์ฐ๊ณ ์ค์ ํ๊ธฐ ์ฝ์ต๋๋ค.
- ๋งํฌ๋ค์ด ์ง์: Jekyll์ ๋งํฌ๋ค์ด์ ๊ธฐ๋ณธ์ ์ผ๋ก ์ง์ํ์ฌ ์ฝํ ์ธ ์์ฑ์ ์ฝ๊ฒ ๋ง๋ญ๋๋ค.
- GitHub Pages ํตํฉ: Jekyll ์น์ฌ์ดํธ๋ GitHub Pages์์ ์ฝ๊ฒ ํธ์คํ ํ ์ ์์ต๋๋ค.
์์: Jekyll์ ๋จ์์ฑ๊ณผ ์ฌ์ฉ ํธ์์ฑ์ ํ์ฉํ์ฌ GitHub Pages์์ ํธ์คํ ๋๋ ๊ฐ์ธ ๋ธ๋ก๊ทธ ๋๋ ํฌํธํด๋ฆฌ์ค ์น์ฌ์ดํธ๋ฅผ ๋ง๋ญ๋๋ค.
5. Eleventy (JavaScript)
Eleventy๋ ์ ์ฐ์ฑ๊ณผ ์ต์ํ์ ๊ตฌ์ฑ์ผ๋ก ์ข ์ข ์ ํธ๋๋ ๋ ๊ฐ๋จํ ์ ์ ์ฌ์ดํธ ์์ฑ๊ธฐ์ ๋๋ค. ๋ง์ ๋๊ตฌ๋ฅผ ์ํ์ง ์๊ณ ์์ ํ ์ ์ด๋ฅผ ์ํ ๋ ์ข์ต๋๋ค.
- ๊ธฐ๋ณธ์ ์ผ๋ก ์ ๋ก ๊ตฌ์ฑ: ์ด๋ค ์ค์ ์์ด๋ ์ฌ์ฉํ ์ ์์ต๋๋ค.
- ๋ง์ ํ ํ๋ฆฟ ์ธ์ด ์ง์: ๋งํฌ๋ค์ด, JavaScript, Liquid, Nunjucks, Handlebars, Mustache, EJS, Haml, Pug ๋ฑ์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
์์: HTML์ ๊ธฐ๋ณธ์ ๋ ๊ฐ๊น์ด ๊ฐ๋ฒผ์ด ํ๋ ์์ํฌ๊ฐ ํ์ํ ๊ฒฝ์ฐ์ ์ ์ฉํฉ๋๋ค.
๋์ ์ฝํ ์ธ ๋ฅผ ์ํ ํค๋๋ฆฌ์ค CMS
SSG๋ ์ ์ ์ฝํ ์ธ ๋ฅผ ์ ๊ณตํ๋ ๋ฐ ํ์ํ์ง๋ง, ์ข ์ข ์น์ฌ์ดํธ์ ๋์ ๋ฐ์ดํฐ๋ฅผ ํตํฉํด์ผ ํฉ๋๋ค. ์ด๋ ํค๋๋ฆฌ์ค CMS๊ฐ ๋ฑ์ฅํฉ๋๋ค. ํค๋๋ฆฌ์ค CMS๋ ์ฝํ ์ธ ์ ์ฅ์๋ฅผ ํ๋ ์ ํ ์ด์ ๊ณ์ธต์์ ๋ถ๋ฆฌํ์ฌ ์ค์ ์์น์์ ์ฝํ ์ธ ๋ฅผ ๊ด๋ฆฌํ๊ณ ์ ์ ์ฌ์ดํธ๋ฅผ ํฌํจํ ๋ชจ๋ ์ฑ๋์ ์ ๋ฌํ ์ ์๋๋ก ํฉ๋๋ค.
์ธ๊ธฐ ์๋ ํค๋๋ฆฌ์ค CMS๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- Contentful: ๊ฐ๋ ฅํ API๋ฅผ ๊ฐ์ถ ์ ์ฐํ๊ณ ํ์ฅ ๊ฐ๋ฅํ ํค๋๋ฆฌ์ค CMS์ ๋๋ค.
- Strapi: ๋ฐ์ดํฐ์ ๋ํ ์์ ํ ์ ์ด๋ฅผ ์ ๊ณตํ๋ ์คํ ์์ค ํค๋๋ฆฌ์ค CMS์ ๋๋ค.
- Sanity: ์ ์ฐํ ๋ฐ์ดํฐ ๋ชจ๋ธ์ ๊ฐ์ถ ์ค์๊ฐ ์ฝํ ์ธ ํ๋ซํผ์ ๋๋ค.
- Netlify CMS: Netlify์ ํจ๊ป ์ฌ์ฉํ๋๋ก ์ค๊ณ๋ ์คํ ์์ค CMS์ ๋๋ค.
ํค๋๋ฆฌ์ค CMS๋ฅผ ์ฌ์ฉํ๋ฉด CMS์์ ์ฝํ ์ธ ๋ฅผ ์ ๋ฐ์ดํธํ ์ ์์ผ๋ฉฐ, ์ ์ ์ฌ์ดํธ ์์ฑ๊ธฐ๋ ์ต์ ์ฝํ ์ธ ๋ก ์น์ฌ์ดํธ๋ฅผ ์๋์ผ๋ก ๋ค์ ๋น๋ํฉ๋๋ค. ์ด๋ฅผ ํตํด SSG์ ์ฑ๋ฅ ๋ฐ ๋ณด์ ์ด์ ์ ํฌ์ํ์ง ์๊ณ ๋์ ์ฝํ ์ธ ๋ฅผ ๊ด๋ฆฌํ ์ ์์ต๋๋ค.
์ ์ ์ฌ์ดํธ ์์ฑ์ ์ํ ์ํฌํ๋ก์ฐ
SSG๋ก ์น์ฌ์ดํธ๋ฅผ ๊ตฌ์ถํ๋ ์ผ๋ฐ์ ์ธ ์ํฌํ๋ก์ฐ๋ ๋ค์ ๋จ๊ณ๋ฅผ ํฌํจํฉ๋๋ค:
- ์ ์ ์ฌ์ดํธ ์์ฑ๊ธฐ ์ ํ: ํ๋ก์ ํธ ์๊ตฌ ์ฌํญ๊ณผ ๊ธฐ์ ์ ๋ฌธ ์ง์์ ๊ฐ์ฅ ์ ํฉํ SSG๋ฅผ ์ ํํฉ๋๋ค.
- ๊ฐ๋ฐ ํ๊ฒฝ ์ค์ : ํ์ํ ๋๊ตฌ์ ์ข ์์ฑ์ ์ค์นํฉ๋๋ค.
- ์ฝํ ์ธ ์์ฑ: ๋งํฌ๋ค์ด, HTML ๋๋ ์ ํํ ํ ํ๋ฆฟ ์ธ์ด๋ฅผ ์ฌ์ฉํ์ฌ ์ฝํ ์ธ ๋ฅผ ์์ฑํฉ๋๋ค.
- SSG ๊ตฌ์ฑ: ์ฝํ ์ธ ์ ํ ํ๋ฆฟ์ ๊ธฐ๋ฐ์ผ๋ก ์น์ฌ์ดํธ๋ฅผ ์์ฑํ๋๋ก SSG๋ฅผ ๊ตฌ์ฑํฉ๋๋ค.
- ํค๋๋ฆฌ์ค CMS์ ํตํฉ (์ ํ ์ฌํญ): ๋์ ์ฝํ ์ธ ๋ฅผ ๊ด๋ฆฌํ๊ธฐ ์ํด SSG๋ฅผ ํค๋๋ฆฌ์ค CMS์ ์ฐ๊ฒฐํฉ๋๋ค.
- ์น์ฌ์ดํธ ๋น๋: SSG๋ฅผ ์คํํ์ฌ ์น์ฌ์ดํธ์ ์ ์ ํ์ผ์ ์์ฑํฉ๋๋ค.
- ์น์ฌ์ดํธ ๋ฐฐํฌ: ์ต์ ์ ์ฑ๋ฅ์ ์ํด ์ ์ ํ์ผ์ CDN์ ๋ฐฐํฌํฉ๋๋ค.
- ์๋ ๋น๋ ์ค์ : CMS์์ ์ฝํ ์ธ ๊ฐ ์ ๋ฐ์ดํธ๋๊ฑฐ๋ ๋ฆฌํฌ์งํ ๋ฆฌ์์ ์ฝ๋๊ฐ ๋ณ๊ฒฝ๋ ๋๋ง๋ค ์น์ฌ์ดํธ๋ฅผ ์๋์ผ๋ก ๋ค์ ๋น๋ํ๋๋ก ์๋ ๋น๋๋ฅผ ๊ตฌ์ฑํฉ๋๋ค.
SSG๋ฅผ ์ฌ์ฉํ ๊ตญ์ ํ(i18n) ์ ๋ต
SSG๋ก i18n์ ๊ตฌํํ๋ ค๋ฉด ์ ์คํ ๊ณํ์ด ํ์ํฉ๋๋ค. ์ผ๋ฐ์ ์ธ ์ ๋ต์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
1. ๋๋ ํ ๋ฆฌ ๊ธฐ๋ฐ i18n
์น์ฌ์ดํธ์ ๊ฐ ์ธ์ด ๋ฒ์ ์ ๋ํด ๋ณ๋์ ๋๋ ํ ๋ฆฌ(์: `/en/`, `/es/`, `/fr/`)๋ฅผ ๋ง๋ญ๋๋ค. ์ด ์ ๊ทผ ๋ฐฉ์์ ๊ฐ๋จํ๊ณ ๊ตฌํํ๊ธฐ ์ฝ์ง๋ง, ์ฃผ์ํ์ง ์์ผ๋ฉด ์ฝ๋ ์ค๋ณต์ผ๋ก ์ด์ด์ง ์ ์์ต๋๋ค.
์์:
- `/en/about`: about ํ์ด์ง์ ์์ด ๋ฒ์
- `/es/about`: about ํ์ด์ง์ ์คํ์ธ์ด ๋ฒ์
2. ๋๋ฉ์ธ/์๋ธ๋๋ฉ์ธ ๊ธฐ๋ฐ i18n
๊ฐ ์ธ์ด ๋ฒ์ ์ ๋ํด ๋ค๋ฅธ ๋๋ฉ์ธ ๋๋ ์๋ธ๋๋ฉ์ธ(์: `example.com`, `example.es`, `fr.example.com`)์ ์ฌ์ฉํฉ๋๋ค. ์ด ์ ๊ทผ ๋ฐฉ์์ ์ค์ ์ด ๋ ๋ณต์กํ์ง๋ง ๋ ๋์ SEO ์ด์ ์ ์ ๊ณตํ๊ณ ๋ ํฐ ์ ์ฐ์ฑ์ ํ์ฉํฉ๋๋ค.
3. ์ฟผ๋ฆฌ ๋งค๊ฐ๋ณ์ ๊ธฐ๋ฐ i18n
์ธ์ด ๋ฒ์ ์ ์ง์ ํ๊ธฐ ์ํด ์ฟผ๋ฆฌ ๋งค๊ฐ๋ณ์(์: `example.com?lang=en`, `example.com?lang=es`)๋ฅผ ์ฌ์ฉํฉ๋๋ค. ์ด ์ ๊ทผ ๋ฐฉ์์ ๊ตฌํ์ด ๊ฐ๋จํ์ง๋ง SEO ์นํ์ ์ด์ง ์์ ์ ์์ต๋๋ค.
i18n์ ๋ํ ์ค์ํ ๊ณ ๋ ค ์ฌํญ:
- `hreflang` ํ๊ทธ: `hreflang` ํ๊ทธ๋ฅผ ์ฌ์ฉํ์ฌ ์น์ฌ์ดํธ์ ์ด๋ค ์ธ์ด ๋ฒ์ ์ด ์ด๋ค ์ง์ญ์ ๋์์ผ๋ก ํ๋์ง ๊ฒ์ ์์ง์ ์๋ฆฝ๋๋ค.
- ๋ก์ผ์ผ ๊ฐ์ง: ๋ก์ผ์ผ ๊ฐ์ง๋ฅผ ๊ตฌํํ์ฌ ์ฌ์ฉ์์ ๋ธ๋ผ์ฐ์ ์ค์ ์ด๋ IP ์ฃผ์๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์ฌ๋ฐ๋ฅธ ์ธ์ด ๋ฒ์ ์ผ๋ก ์๋ ๋ฆฌ๋๋ ์ ํฉ๋๋ค.
- ๋ฒ์ญ ๊ด๋ฆฌ: ๋ฒ์ญ ๊ด๋ฆฌ ์์คํ (TMS)์ ์ฌ์ฉํ์ฌ ๋ฒ์ญ ํ๋ก์ธ์ค๋ฅผ ๊ฐ์ํํ๊ณ ๋ชจ๋ ์ธ์ด ๋ฒ์ ์์ ์ผ๊ด์ฑ์ ๋ณด์ฅํฉ๋๋ค.
์ ๊ทผ์ฑ(a11y) ๊ณ ๋ ค ์ฌํญ
์ ๊ทผ์ฑ์ ๋ณด์ฅํ๋ ๊ฒ์ ์ ์ธ๊ณ ์ฌ์ฉ์์๊ฒ ๋๋ฌํ๋ ๋ฐ ๋งค์ฐ ์ค์ํฉ๋๋ค. ์ ์ ์ฌ์ดํธ์ ๋ํ ๋ช ๊ฐ์ง ์ค์ํ a11y ๊ณ ๋ ค ์ฌํญ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ์๋งจํฑ HTML: ์๋งจํฑ HTML ์์(์: `
`, ` - ์ด๋ฏธ์ง์ ๋ํ ๋์ฒด ํ ์คํธ: ๋ชจ๋ ์ด๋ฏธ์ง์ ์ค๋ช ์ ์ธ ๋์ฒด ํ ์คํธ๋ฅผ ์ ๊ณตํฉ๋๋ค.
- ํค๋ณด๋ ํ์: ์น์ฌ์ดํธ๊ฐ ํค๋ณด๋๋ฅผ ์ฌ์ฉํ์ฌ ์์ ํ ํ์ ๊ฐ๋ฅํ์ง ํ์ธํฉ๋๋ค.
- ์์ ๋๋น: ์๊ฐ ์ฅ์ ๊ฐ ์๋ ์ฌ์ฉ์๊ฐ ํ ์คํธ๋ฅผ ์ฝ์ ์ ์๋๋ก ์ถฉ๋ถํ ์์ ๋๋น๋ฅผ ์ฌ์ฉํฉ๋๋ค.
- ARIA ์์ฑ: ARIA ์์ฑ์ ์ฌ์ฉํ์ฌ ์น์ฌ์ดํธ์ ๊ตฌ์กฐ์ ๊ธฐ๋ฅ์ ๋ํ ์ถ๊ฐ ์ ๋ณด๋ฅผ ๋ณด์กฐ ๊ธฐ์ ์ ์ ๊ณตํฉ๋๋ค.
SSG๋ฅผ ์ํ ๋ณด์ ๋ชจ๋ฒ ์ฌ๋ก
SSG๋ ๋ณธ์ง์ ์ผ๋ก ๋ ๋์ ๋ณด์์ ์ ๊ณตํ์ง๋ง, ๋ณด์ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๋ฐ๋ฅด๋ ๊ฒ์ด ์ค์ํฉ๋๋ค:
- ์ข ์์ฑ ๊ด๋ฆฌ: ์๋ ค์ง ์ทจ์ฝ์ ์ ํผํ๊ธฐ ์ํด ์ข ์์ฑ์ ์ต์ ์ํ๋ก ์ ์งํฉ๋๋ค.
- ์ ๋ ฅ ์ ํจ์ฑ ๊ฒ์ฌ: ๊ต์ฐจ ์ฌ์ดํธ ์คํฌ๋ฆฝํ (XSS) ๊ณต๊ฒฉ์ ๋ฐฉ์งํ๊ธฐ ์ํด ์ฌ์ฉ์ ์ ๋ ฅ์ ์ด๊ท ์ฒ๋ฆฌํฉ๋๋ค.
- HTTPS: ์ฌ์ฉ์์ ์๋ฒ ๊ฐ์ ํต์ ์ ์ํธํํ๊ธฐ ์ํด HTTPS๋ฅผ ์ฌ์ฉํฉ๋๋ค.
- ์ฝํ ์ธ ๋ณด์ ์ ์ฑ (CSP): ๋ธ๋ผ์ฐ์ ๊ฐ ๋ก๋ํ ์ ์๋ ๋ฆฌ์์ค๋ฅผ ์ ํํ์ฌ XSS ๊ณต๊ฒฉ์ ์ํ์ ์ํํ๋ CSP๋ฅผ ๊ตฌํํฉ๋๋ค.
๊ฒฐ๋ก
JAMstack ์ํคํ ์ฒ๋ก ๊ตฌ๋๋๋ ์ ์ ์ฌ์ดํธ ์์ฑ์ ํฅ์๋ ์ฑ๋ฅ, ๋ณด์, ํ์ฅ์ฑ์ ๊ฐ์ถ ํ๋์ ์ธ ์น์ฌ์ดํธ๋ฅผ ๊ตฌ์ถํ๋ ๊ฐ๋ ฅํ๊ณ ํจ์จ์ ์ธ ๋ฐฉ๋ฒ์ ์ ๊ณตํฉ๋๋ค. ์ ์ธ๊ณ ์ฌ์ฉ์๋ฅผ ์ํด SSG๋ ๋ ๋น ๋ฅธ ๋ก๋ ์๊ฐ, ํฅ์๋ ์ ๊ทผ์ฑ, ๋ค๊ตญ์ด ์ฝํ ์ธ ์ ๋ํ ๋ ๋์ SEO๋ฅผ ์ ๊ณตํ์ฌ ์ฌ์ฉ์ ๊ฒฝํ์ ํฌ๊ฒ ํฅ์์ํฌ ์ ์์ต๋๋ค. ์ฌ๋ฐ๋ฅธ ๋๊ตฌ๋ฅผ ์ ํํ๊ณ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๋ฐ๋ฅด๋ฉด SSG์ ํ์ ํ์ฉํ์ฌ ์ ์ธ๊ณ ์ฌ์ฉ์์ ์ํตํ๊ณ ์ฐธ์ฌ๋ฅผ ์ ๋ํ๋ ์น์ฌ์ดํธ๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค.
๊ฐ๋จํ ๋ธ๋ก๊ทธ, ๋ณต์กํ ์ ์์๊ฑฐ๋ ํ๋ซํผ, ๋๋ ์ฝํ ์ธ ๊ฐ ํ๋ถํ ๋ฌธ์ ์น์ฌ์ดํธ๋ฅผ ๊ตฌ์ถํ๋ , SSG๋ ์ ์ธ๊ณ ์ฌ์ฉ์์๊ฒ ํ์ํ ์น ๊ฒฝํ์ ์ ๊ณตํ๊ธฐ ์ํ ๊ฒฌ๊ณ ํ ๊ธฐ๋ฐ์ ์ ๊ณตํฉ๋๋ค. JAMstack์ ์์ฉํ๊ณ ๋ค์ ์น ํ๋ก์ ํธ๋ฅผ ์ํด ์ ์ ์ฌ์ดํธ ์์ฑ์ ์ ์ฌ๋ ฅ์ ๋ฐํํ์ธ์!