MPA (Multi-Page Application)
๋ช ์ฌ ยท ์น ์ํคํ ์ฒ
๊ฐ ๋ด๋น๊ฒ์ด์ ์ด ์๋ฒ์์ ์์ ํ ์๋ก์ด HTML ํ์ด์ง๋ฅผ ๋ก๋ํ๋ ์ ํต์ ์ธ ์น ์ํคํ ์ฒ โ ๋ค์ดํฐ๋ธ SEO, ์ต์ ์ ์ธ๋ฑ์ฑ ๋ฐ ๋๊ท๋ชจ ์ฝํ ์ธ ์ฌ์ดํธ์ ์๋ฒฝํ๊ฒ ์ ํฉํ ๊ตฌ์กฐ๋ฅผ ์ ๊ณตํฉ๋๋ค.
์๋ฒ๊ฐ ๊ฐ ํ์ด์ง์ HTML์ ๋ ๋ฆฝ์ ์ผ๋ก ์์ฑํ๋ ์น ๊ฐ๋ฐ ๋ชจ๋ธ๋ก, ๊ฒ์ ์์ง์ ์ธ๋ฐํ ์ธ๋ฑ์ฑ๊ณผ Google ๋ก๋ด์ ์์ฐ์ค๋ฌ์ด ํฌ๋กค ์์ฐ ๊ด๋ฆฌ๋ฅผ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค.
๊ฐ URL์ด ์์ฐ ๊ฒ์๊ณผ ์์ ๊ณต์ ์ ์ต์ ํ๋ ๋ ๋ฆฝ์ ์ธ ํ์ด์ง์ ๋์ํ๋ ๊ธฐ๊ด ์ฌ์ดํธ, ๋ธ๋ก๊ทธ, ์ ๋ณด ํฌํธ ๋ฐ ์ด์ปค๋จธ์ค ์นดํ๋ก๊ทธ์์ ์ ํธ๋๋ ์ํคํ ์ฒ์ ๋๋ค.
MPA(Multi-Page Application)๋ ๊ฐ ํ์ด์ง๊ฐ ์๋ฒ์์ ์์ฑ๋์ด ๊ฐ ๋ด๋น๊ฒ์ด์ ๋ง๋ค ๋ธ๋ผ์ฐ์ ๋ก ์ ์ก๋๋ ๋ ๋ฆฝ์ ์ธ HTML ๋ฌธ์์ธ ์น ์ํคํ ์ฒ์ ๋๋ค. SPA์ ๋ฌ๋ฆฌ ๋งํฌ ํด๋ฆญ๋ง๋ค ์๋ก์ด ์๋ฒ ์์ฒญ๊ณผ ์์ ํ ํ์ด์ง ์๋ก๊ณ ์นจ์ด ๋ฐ์ํฉ๋๋ค. ์ ํฌ ์์ด์ ์๋ Next.js๋ฅผ ํตํด ์ด ์ ํต์ ์ธ ์ ๊ทผ ๋ฐฉ์์ ํ๋ํํ์ฌ, MPA์ ๊ฒฌ๊ณ ํ SEO์ ํ๋์ ์ธ React ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฑ๋ฅ ๋ฐ ์ ๋ คํจ์ ๊ฒฐํฉํฉ๋๋ค.
MPA ์ํคํ ์ฒ๋ ๊ฐ ํ์ด์ง๊ฐ ์์ฒด ๋ฉํ ํ๊ทธ, ๊ณ ์ URL, ์ธ๋ฑ์ฑ ๋ก๋ด์ด ์ฆ์ ์ฝ์ ์ ์๋ ์ฝํ ์ธ ๋ฅผ ๊ฐ์ถ ์์ ํ HTML ๋ฌธ์์ด๋ฏ๋ก ๋ค์ดํฐ๋ธ์ด์ ๊ฐ๋ ฅํ SEO๋ฅผ ์ ๊ณตํฉ๋๋ค. ์ฝํ ์ธ ์ ์ ๊ทผํ๊ธฐ ์ํด JavaScript์ ์์กดํ์ง ์์ ์์ ์ ์ด๊ณ ๋น ๋ฅธ ์ธ๋ฑ์ฑ์ ๋ณด์ฅํฉ๋๋ค. ์ ํฌ ์์ด์ ์๋ ๊ฐ MPA ํ์ด์ง๋ฅผ ํ๊ฒ ํค์๋์ ๋ง๊ฒ ๊ฐ๋ณ์ ์ผ๋ก ์ต์ ํํ์ฌ ์ ์ฒด ์ฌ์ดํธ์ ๊ถ์๋ฅผ ๊ฐํํ๋ ๊ฒฌ๊ณ ํ ๋ด๋ถ ๋งํฌ ๊ตฌ์กฐ๋ฅผ ๋ง๋ญ๋๋ค.
๊ทผ๋ณธ์ ์ธ ์ฐจ์ด๋ ๋ด๋น๊ฒ์ด์ ๋ชจ๋ธ์ ์์ต๋๋ค: MPA๋ ํด๋ฆญ๋ง๋ค ์์ ํ ์๋ก์ด HTML ํ์ด์ง๋ฅผ ๋ก๋ํ๋ ๋ฐ๋ฉด, SPA๋ JavaScript๋ฅผ ํตํด ์๋ก๊ณ ์นจ ์์ด ์ฝํ ์ธ ๋ฅผ ๋์ ์ผ๋ก ์ ๋ฐ์ดํธํฉ๋๋ค. MPA๋ SEO์ ์ธ๋ฑ์ฑ์์ ๋ฐ์ด๋๊ณ , SPA๋ ์ธํฐ๋ํฐ๋ธ์ฑ๊ณผ ๋ด๋น๊ฒ์ด์ ์ ๋ คํจ์์ ๋ฐ์ด๋ฉ๋๋ค. ์ ํฌ ์์ด์ ์๋ ๋ ์ํคํ ์ฒ๋ฅผ ๋ชจ๋ ๋ง์คํฐํ๋ฉฐ, ๊ฐ ํ์ด์ง์ ์๊ตฌ์ ๋ฐ๋ผ ๋ ์ธ๊ณ์ ์ฅ์ ์ ๊ฒฐํฉํ๋ Next.js ํ์ด๋ธ๋ฆฌ๋ ์ ๊ทผ ๋ฐฉ์์ ์์ฃผ ์ถ์ฒํฉ๋๋ค.
๋๊ท๋ชจ ์ฝํ ์ธ ์ฌ์ดํธ๋ ๊ฐ ํ์ด์ง๊ฐ ๋ ๋ฆฝ์ ์ด๊ณ ๊ฐ๋ฒผ์ ๋ค์ด๋ก๋ํ ๋ชจ๋๋ฆฌ์ JavaScript ๋ฒ๋ค์ด ์์ผ๋ฏ๋ก MPA ์ํคํ ์ฒ์ ์์ฐ์ค๋ฌ์ด ์ด์ ์ ๋๋ฆฝ๋๋ค. ์ฌ์ฉ์๋ ์ ์ฒด ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ก๋ํ์ง ์๊ณ ์ฐพ๋ ์ฝํ ์ธ ์ ์ง์ ์ ๊ทผํ๋ฉฐ, ๊ฒ์ ์์ง์ ๊ฐ ํ์ด์ง๋ฅผ ์์จ์ ์ผ๋ก ์ธ๋ฑ์ฑํฉ๋๋ค. ์ ํฌ ์์ด์ ์๋ ๋ธ๋ก๊ทธ, ๋ด์ค ํฌํธ, ์ง์ ๋ฒ ์ด์ค๋ฅผ ์ํ ์ต์ ํ๋ MPA ์ํคํ ์ฒ๋ฅผ ์ค๊ณํ์ฌ ์ฌ์ดํธ ๊ท๋ชจ์ ๊ด๊ณ์์ด ์ผ๊ด๋ ๋ก๋ฉ ์๊ฐ์ ๋ณด์ฅํฉ๋๋ค.
MPA ์ํคํ ์ฒ๋ ๊ฐ ๋ด๋น๊ฒ์ด์ ์ด ์์ ํ ํ์ด์ง ๋ก๋ฉ์ ์ ๋ฐํ์ฌ Google Analytics, GTM ๋๋ ๊ธฐํ ์ธก์ ๋๊ตฌ์์ ์๋์ผ๋ก ํ์ด์ง๋ทฐ ์ด๋ฒคํธ๋ฅผ ์์ฑํ๋ฏ๋ก ๋ถ์ ์ถ์ ์ ๋จ์ํํฉ๋๋ค. ํน์ SPA ์ถ์ ์ ๊ตฌ์ฑํ๊ฑฐ๋ ๊ฐ์ ๋ทฐ ๋ณ๊ฒฝ์ ๊ด๋ฆฌํ ํ์๊ฐ ์์ต๋๋ค. ์ ํฌ ์์ด์ ์๋ MPA ์ํคํ ์ฒ์ ๊ณ ๊ธ ์ถ์ ์๋ฃจ์ ์ ํตํฉํ์ฌ ๊ฐ ์ฌ์ฉ์ ์ธํฐ๋์ ์ ์ ํํ๊ฒ ํฌ์ฐฉํ๊ณ ๋ง์ผํ ๊ฒฐ์ ์ ์ ๋ขฐํ ์ ์๋ ๋ฐ์ดํฐ๋ฅผ ์ ๊ณตํฉ๋๋ค.
๋ฌผ๋ก ์ ๋๋ค. Next.js๋ก ๊ตฌ์ถ๋ ํ๋ MPA๋ ๋ณด์ด๋ ๋งํฌ์ ์ง๋ฅ์ ํ๋ฆฌํ์นญ, ํด๋ผ์ด์ธํธ ์ธก ์บ์ฑ, ์ต์ ํ๋ ํ์ด์ง ์ ํ์ ์ฌ์ฉํ์ฌ SPA์ ๊ทผ์ ํ๋ ์ ๋ คํจ์ ์ ๊ณตํฉ๋๋ค. ํ๋ ์์ํฌ๋ ๋ฐฉ๋ฌธ ๊ฐ๋ฅ์ฑ์ด ์๋ ํ์ด์ง๋ฅผ ๋ฐฑ๊ทธ๋ผ์ด๋์์ ๋ฏธ๋ฆฌ ๋ก๋ํ์ฌ ๊ฑฐ์ ์ฆ๊ฐ์ ์ธ ๋ด๋น๊ฒ์ด์ ์ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค. ์ ํฌ ์์ด์ ์๋ ์ด๋ฌํ ๋ฉ์ปค๋์ฆ์ ํ์ฉํ์ฌ ์ต์ข ์ฌ์ฉ์์๊ฒ SPA์์ ์ ๋ คํจ ์ฐจ์ด๊ฐ ๊ฐ์งํ ์ ์๋ MPA๋ฅผ ์ ๊ณตํฉ๋๋ค.
MPA์ SSR์ ๊ฐ ํ์ด์ง๊ฐ ์์ ํ HTML๋ก ์ ๊ณต๋์ด ์ฆ์ ํ์ํ๊ณ ์ธ๋ฑ์ฑํ ์ ์๋๋ก ๋ณด์ฅํฉ๋๋ค. ์๋ฒ๊ฐ ๋ฐ์ดํฐ๋ฅผ ํด๊ฒฐํ๊ณ , HTML์ ์์ฑํ์ฌ ๋จ์ผ ์๋ต์ผ๋ก ๋ธ๋ผ์ฐ์ ์ ์ ์กํ๋ฉฐ, ํด๋ผ์ด์ธํธ ์ธก API ์๋ณต์ ์ ๊ฑฐํฉ๋๋ค. ์ด ์ ๊ทผ ๋ฐฉ์์ Time to First Contentful Paint๋ฅผ ์ค์ด๊ณ ๋๋ฆฐ ์ฐ๊ฒฐ์์์ ๊ฒฝํ์ ๊ฐ์ ํฉ๋๋ค. ์ ํฌ ์์ด์ ์๋ Next.js๋ฅผ ํตํด SSR๊ณผ MPA๋ฅผ ๊ฒฐํฉํ์ฌ ๋ชจ๋ ๊ธฐ๊ธฐ์์ ์ฆ์ ๋ก๋๋๊ณ Google ์์๋ฅผ ์ง๋ฐฐํ๋ ์ฌ์ดํธ๋ฅผ ๋ง๋ญ๋๋ค.
MPA๋ ์คํํด์ผ ํ ๋ณต์กํ JavaScript ์์กด์ฑ ์์ด ์ธ๋ฑ์ฑ ๋ก๋ด์๊ฒ ๊ฐ๋ณ๊ณ ๋ ๋ฆฝ์ ์ธ HTML ํ์ด์ง๋ฅผ ์ ์ํ์ฌ ํฌ๋กค ์์ฐ์ ์ต์ ํํฉ๋๋ค. ๊ฐ URL์ ์ถ๊ฐ ๋ ๋๋ง ์์ฐ ์์ด ๋จ์ผ ์์ฒญ์ผ๋ก ํฌ๋กคํ ์ ์์ต๋๋ค. MPA์ ์์ฐ์ค๋ฌ์ด ํธ๋ฆฌ ๊ตฌ์กฐ๋ Googlebot์ ์ฌ์ดํธ ํ์์ ์ฉ์ดํ๊ฒ ํ์ฌ ํ ๋น๋ ์๊ฐ ๋ด์ ๋ ๋ง์ ํ์ด์ง๋ฅผ ์ธ๋ฑ์ฑํ ์ ์์ต๋๋ค. ์ ํฌ ์์ด์ ์๋ ๊ฐ ์ ๋ต์ ํ์ด์ง์ ์ธ๋ฑ์ฑ ๋ฒ์๋ฅผ ๊ทน๋ํํ๊ธฐ ์ํด URL ๊ตฌ์กฐ, ์ฌ์ดํธ๋งต ๋ฐ ๋ด๋ถ ๋งํฌ๋ฅผ ์ต์ ํํฉ๋๋ค.
MPA ์ํคํ ์ฒ๋ SEO์ ์ ๊ธฐ์ ๊ฐ์์ฑ์ด ์ฃผ์ ํ๋ ๋ ๋ฒ์ธ ์๊ฐ ์ฌ์ดํธ, ์ฝํ ์ธ ํ๋ซํผ, ๊ธฐ์ ๋ธ๋ก๊ทธ, ์ ํ ์นดํ๋ก๊ทธ ๋ฐ ๊ธฐ๊ด ์ฌ์ดํธ์์ ๊ฐ์ฅ ํจ์จ์ ์ ๋๋ค. ๋ค๊ตญ์ด ์ฌ์ดํธ์ ๊ตฌ์กฐํ๋ ์ฝํ ์ธ ๊ฑฐ๋ฒ๋์ค๊ฐ ํ์ํ ์ํคํ ์ฒ์๋ ์ ํฉํฉ๋๋ค. ์ ํฌ ์์ด์ ์๋ ์์ฐ ๊ฒ์์ด ํต์ฌ ๋น์ฆ๋์ค ๊ณผ์ ์ธ ๋ชจ๋ ํ๋ก์ ํธ์ MPA๋ฅผ ์ถ์ฒํ๋ฉฐ, ๊ธฐ์ ์ ํ๋์ฑ์ ํํํ์ง ์๊ธฐ ์ํด Next.js์ ๊ฒฐํฉํฉ๋๋ค.