๋ผ์ดํธํ์ฐ์ค ์น์ฌ์ดํธ ์ฑ๋ฅ, SEO, ์ ๊ทผ์ฑ ์ ์ ๊ฐ์ ์ ์ํ ํ์ ๋๊ตฌ
SEO ์ต์ ํ ๋๊ตฌ๋ฅผ ํ์ฉํด์ ์น์ฌ์ดํธ์ ์ฑ๋ฅ๊ณผ ํ์ง์ ์ต์ ํํ๋ ๊ฒ์ ๋ชจ๋ ์น์ฌ์ดํธ ์ด์์์ ๊ด๋ฆฌ์์๊ฒ ์ค์ํ ์ผ์ ๋๋ค. ํนํ, ๊ฒ์์์ง ์ต์ ํ(SEO)๋ฅผ ์ํด ์น์ฌ์ดํธ์ ์๋, ์ ๊ทผ์ฑ, ๊ทธ๋ฆฌ๊ณ ์ฌ์ฉ์ ๊ฒฝํ๋ฑ์ ๊ณ ๋ คํ๋ ๊ฒ์ ํ์์ ์ ๋๋ค. ์ด๋ ์ค์ํ ๋๊ตฌ ์ค ํ๋๊ฐ ๋ฐ๋ก ๋ผ์ดํธ ํ์ฐ์ค (Lighthouse)์ ๋๋ค. ์ด๋ฒ ๋ธ๋ก๊ทธ์์๋ ๋ผ์ดํธํ์ฐ์ค๊ฐ ๋ฌด์์ธ์ง, ์ ์ค์ํ์ง, ๊ทธ๋ฆฌ๊ณ SEO ์ต์ ํ์ ์ด๋ป๊ฒ ํ์ฉํ ์ ์๋์ง์ ๋ํด ์์๋ณด๊ณ , ์ด๋ฅผ ํตํด ๊ฒ์ ์ต์ ํ ์ ์๋ฅผ ์ด๋ป๊ฒ ํฅ์์ํฌ ์ ์๋์ง ์์๋ณด๊ฒ ์ต๋๋ค.
๋ผ์ดํธ ํ์ฐ์ค ๋ ๋ฌด์์ธ๊ฐ?
๋ผ์ดํธ ํ์ฐ์ค๋ ๊ตฌ๊ธ์์ ์ ๊ณตํ๋ ์คํ์์ค ํด๋ก, ์น์ฌ์ดํธ์ ํ์ง์ ํ๊ฐํ๊ณ ์ฑ๋ฅ์ ๊ฐ์ ํ๊ธฐ ์ํ ๋ฌด๋ฃ๋๊ตฌ์ ๋๋ค. ์ด ํด์ ์นํ์ด์ง์ ์ฑ๋ฅ, ์ ๊ทผ์ฑ, SEO, ๋ฑ์ ์ธก์ ํ ์ ์์ ์์ต๋๋ค.
์ด๋ฐฉ๋ฒ์ ํฌ๋กฌ์ ๊ฐ๋ฐ์ ๋๊ตฌ ๋ด์์ ์ฌ์ฉํ ์ ์์ผ๋ฉฐ, ์น์ฌ์ดํธ๋ฅผ ๋ถ์ํ์ฌ ๋ค์ํ ์งํ์ ์ ์๋ก ๊ฒฐ๊ณผ๋ฅผ ํ์ธํ ์ ์๊ณ ์ด๋ฅผ ๋ฐํ์ผ๋ก ์ฑ๋ฅ์ ๊ฐ์ ํ ์ ์์ต๋๋ค. ๋ํ ์น์ฌ์ดํธ์ ์๋์ ํ์ง์ ๊ฐ๊ด์ ์ผ๋ก ์ธก์ ํ ์ ์์ด, ๊ฐ๋ฐ์์ ๋ง์ผํ ๋ด๋น์๊ฐ SEO๋ฅผ ์ต์ ํํ๋ ๋ฐ ํฐ ๋์์ด ๋ฉ๋๋ค.
์ด ๋๊ตฌ๋ฅผ ์ฌ์ฉํ๋ ์ด์
๊ตฌ๊ธ์์ ์ ๊ณตํ๋ ๋ผ์ดํธํ์ฐ์ค๋ ์น์ฌ์ดํธ์ ์ฑ๋ฅ๊ณผ ํ์ง์ ์ ๋ฐ์ ์ผ๋ก ์ ๊ฒํ ์ ์๋ ๋๊ตฌ์ ๋๋ค. ์ด๋ฅผ ํตํด ์ป์ ์ ์๋ ์ฃผ์ ์ด์ ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- SEO ์ต์ ํ: SEO์ ํ์ํ ๋ค์ํ ์์๋ค์ ์ ๊ฒํฉ๋๋ค. ์๋ฅผ ๋ค์ด, ๋ฉํ ํ๊ทธ, ์ ๋ชฉ, ์ค๋ช , ์ด๋ฏธ์ง alt ํ๊ทธ ๋ฑ์ด ์ ๋๋ก ์ค์ ๋์ด ์๋์ง ํ์ธํ๊ณ , ๊ฒ์์์ง์ ์ ๋ ธ์ถ๋ ์ ์๋๋ก ๊ฐ์ ์ ์ ์ ์ํฉ๋๋ค.
- ์ฑ๋ฅ ํฅ์: ์น์ฌ์ดํธ์ ์ฑ๋ฅ์ ์ฌ์ฉ์ ๊ฒฝํ(UX)๊ณผ ์ง๊ฒฐ๋ฉ๋๋ค. ํ์ด์ง ๋ก๋ฉ ์๋๊ฐ ๋น ๋ฅด๋ฉด ์ฌ์ฉ์๋ ๋ ์ค๋ ๋จธ๋ฌด๋ฅด๋ฉฐ, ์ด๋ ๊ฒ์์์ง์๋ ๊ธ์ ์ ์ธ ์ํฅ์ ๋ฏธ์นฉ๋๋ค. Lighthouse๋ ํ์ด์ง ์ฑ๋ฅ์ ๋ถ์ํ๊ณ ๋ก๋ฉ ์๊ฐ์ ๋จ์ถํ ์ ์๋ ๋ฐฉ๋ฒ์ ์ ์ํฉ๋๋ค.
- ์ ๊ทผ์ฑ: ์น์ฌ์ดํธ์ ์ ๊ทผ์ฑ์ ์ฅ์ ๊ฐ ์๋ ์ฌ์ฉ์๋ค์๊ฒ๋ ์ค์ํฉ๋๋ค. ๋ผ์ดํธํ์ฐ์ค๋ ์๊ฐ์ , ์ฒญ๊ฐ์ , ๊ทธ๋ฆฌ๊ณ ๋ค์ํ ์ ๊ทผ์ฑ์ ํ๊ฐํ์ฌ, ๋ชจ๋ ์ฌ์ฉ์๊ฐ ์น์ฌ์ดํธ๋ฅผ ์ฝ๊ฒ ์ด์ฉํ ์ ์๋๋ก ๊ฐ์ ์ ์ ์ ๊ณตํฉ๋๋ค.
- ์น์ฌ์ดํธ ์ ๋ขฐ๋ ํฅ์: ๋ผ์ดํธํ์ฐ์ค๋ฅผ ํตํด ์น์ฌ์ดํธ์ ์ฌ๋ฌ ๋ฌธ์ ์ ์ ์ฌ์ ์ ๋ฐ๊ฒฌํ๊ณ ์์ ํจ์ผ๋ก์จ, ์ฌ์ฉ์ ๊ฒฝํ์ ํฅ์์ํค๊ณ , ๊ฒ์์์ง์์ ๋ ๋์ ์์๋ฅผ ์ป์ ์ ์์ต๋๋ค.
์ต์ ํ ์ฃผ์ ์ ์๋ค- CLS, SEO, ์ ๊ทผ์ฑ
๋ผ์ดํธํ์ฐ์ค๋ ์น์ฌ์ดํธ๋ฅผ ํ๊ฐํ ๋ ๋ค์ํ ์งํ์ ์ ์๋ฅผ ์ ๊ณตํฉ๋๋ค. ๊ทธ ์ค์์ ๊ฐ์ฅ ์ค์ํ ์งํ๋ CLS(Cumulative Layout Shift), SEO ์ ์, ๊ทธ๋ฆฌ๊ณ ์ ๊ทผ์ฑ ์ ์์ ๋๋ค. ๊ฐ ์ ์๋ ์น์ฌ์ดํธ์ ํ์ง์ ์ด๋ป๊ฒ ๊ฐ์ ํ ์ ์์์ง์ ๋ํ ์ค์ํ ์ธ์ฌ์ดํธ๋ฅผ ์ ๊ณตํฉ๋๋ค.
1. CLS (Cumulative Layout Shift)
CLS๋ ์นํ์ด์ง์์ ์ฝํ ์ธ ๊ฐ ์ด๋ํ๋ ์ ๋๋ฅผ ๋ํ๋ด๋ ์งํ์ ๋๋ค. ํ์ด์ง ๋ก๋ฉ ์ค์ ์์๋ค์ด ๊ฐ์๊ธฐ ์ด๋ํ๊ฑฐ๋, ์ฝํ ์ธ ๊ฐ ๊น๋นก์ด๊ฑฐ๋ ๋ณํ๋ ๊ฒฝ์ฐ ์ฌ์ฉ์๋ ํผ๋์ค๋ฌ์์ ๋๋ ์ ์์ต๋๋ค. ์ด๋ฅผ ๋ฐฉ์งํ๋ ค๋ฉด ์นํ์ด์ง๊ฐ ๋ก๋ฉ๋ ๋, ๋ ์ด์์์ด ๋ถ์์ ํ๊ฒ ๋ณํ์ง ์๋๋ก ํด์ผ ํฉ๋๋ค. CLS๊ฐ ๋ฎ์์๋ก ์ฌ์ฉ์ ๊ฒฝํ์ด ๋ ์ข๋ค๊ณ ํ ์ ์์ต๋๋ค.
์ ์ค์ํ๊ฐ?
๊ตฌ๊ธ์ ์ฌ์ฉ์ ๊ฒฝํ์ ์ค์ํ ํ๊ฐ ์์๋ก ์ผ์ต๋๋ค. ํ์ด์ง๊ฐ ๋ก๋ฉ๋ ๋ ์์์น ๋ชปํ ๋ ์ด์์ ๋ณํ๊ฐ ์ ์ผ๋ฉด, ์ฌ์ฉ์๋ ๋ ๋์ ๊ฒฝํ์ ํ๊ฒ ๋๊ณ , ์ด๋ก ์ธํด ๊ฒ์ ์์๊ฐ ํฅ์๋ ๊ฐ๋ฅ์ฑ์ด ๋์ต๋๋ค. CLS ์ ์๋ฅผ ๊ฐ์ ํ๋ฉด ์ฌ์ฉ์์ ๋ง์กฑ๋๋ฅผ ๋์ด๊ณ , SEO์ ๊ธ์ ์ ์ธ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค.
2. SEO ์ ์
SEO ์ ์๋ ์น์ฌ์ดํธ๊ฐ ๊ฒ์์์ง ์ต์ ํ๋ฅผ ์ผ๋ง๋ ์ ์ํํ๊ณ ์๋์ง ํ๊ฐํ๋ ์งํ์ ๋๋ค. Lighthouse๋ SEO ์ ์๋ฅผ ํ๊ฐํ๊ธฐ ์ํด ์นํ์ด์ง์ ๊ธฐ๋ณธ์ ์ธ SEO ์์๋ค์ ์ ๊ฒํฉ๋๋ค. ์๋ฅผ ๋ค์ด, ์ ๋ชฉ ํ๊ทธ, ๋ฉํ ์ค๋ช , ์ด๋ฏธ์ง alt ํ๊ทธ, ํค๋ ํ๊ทธ ๊ตฌ์กฐ ๋ฑ์ด ์ ๋๋ก ์ค์ ๋์ด ์๋์ง ํ์ธํฉ๋๋ค.
์ ์ค์ํ๊ฐ?
SEO ์ ์๋ ๊ตฌ๊ธ๊ณผ ๊ฐ์ ๊ฒ์์์ง์์ ์น์ฌ์ดํธ๊ฐ ์ผ๋ง๋ ์ ๋
ธ์ถ๋ ์ ์๋์ง์ ํฐ ์ํฅ์ ๋ฏธ์นฉ๋๋ค. SEO ์ ์๊ฐ ๋์ผ๋ฉด, ์น์ฌ์ดํธ์ ๊ฒ์ ์์๊ฐ ์ฌ๋ผ๊ฐ๊ณ , ๋ ๋ง์ ๋ฐฉ๋ฌธ์๋ฅผ ์ ๋ํ ์ ์์ต๋๋ค. ์น์ฌ์ดํธ๊ฐ SEO๋ฅผ ์ต์ ํํ๋ ๋ฐ ํ์ํ ๊ฐ์ ์ ์ ์ ์ํ์ฌ, ๋ ๋์ ๊ฒ์ ๋
ธ์ถ์ ๋์ต๋๋ค.
3. ์ ๊ทผ์ฑ ์ ์
์ ๊ทผ์ฑ ์ ์๋ ์น์ฌ์ดํธ๊ฐ ๋ชจ๋ ์ฌ์ฉ์๋ฅผ ๋์์ผ๋ก ์ผ๋ง๋ ์ ์ ๊ทผ ๊ฐ๋ฅํ์ง๋ฅผ ํ๊ฐํ๋ ์ ์์ ๋๋ค. ์ด๋ ์๊ฐ ์ฅ์ ๋ ์ฒญ๊ฐ ์ฅ์ ๋ฅผ ๊ฐ์ง ์ฌ์ฉ์๋ค์ด ์น์ฌ์ดํธ๋ฅผ ์ํํ๊ฒ ์ด์ฉํ ์ ์๋๋ก ๋๋ ์์๋ค์ ์ ๊ฒํฉ๋๋ค. ์๋ฅผ ๋ค์ด, ์คํฌ๋ฆฐ ๋ฆฌ๋๋ ํค๋ณด๋ ๋ด๋น๊ฒ์ด์ ์ ์ง์ํ๋์ง, ์ ๋๋น๊ฐ ์ ์ ํ์ง ๋ฑ์ ํ์ธํฉ๋๋ค.
์ ์ค์ํ๊ฐ?
์น์ฌ์ดํธ์ ์ ๊ทผ์ฑ ์ ์๊ฐ ๋๋ค๋ ๊ฒ์ ๋ชจ๋ ์ฌ์ฉ์์๊ฒ ํฌ์ฉ์ ์ด๋ฉฐ ์ฌ์ฉ์ ๊ฒฝํ์ ๊ณ ๋ คํ ์น์ฌ์ดํธ๋ผ๋ ์๋ฏธ์
๋๋ค. ์ด๋ ๋ฒ์ ์๊ตฌ ์ฌํญ์ ์ถฉ์กฑํ๋๋ฐ๋ ์ค์ํ๋ฉฐ, ๊ฒ์์์ง ์ต์ ํ(SEO)์๋ ๊ธ์ ์ ์ธ ์ํฅ์ ๋ฏธ์นฉ๋๋ค. ๊ฒ์์์ง์ ์ ๊ทผ์ฑ์ ์ค์ํ ์น์ฌ์ดํธ ํ์ง ์์๋ก ๋ณด๊ณ ์์ผ๋ฉฐ, ์ ๊ทผ์ฑ ์ ์๋ฅผ ๊ฐ์ ํ๋ฉด ์น์ฌ์ดํธ์ ์์๊ฐ ๋์์ง ๊ฐ๋ฅ์ฑ์ด ์์ต๋๋ค.
๊ฐ๋จํ SEO ์ ๊ฒ ๋ฐฉ๋ฒ
ํฌ๋กฌ ๋ธ๋ผ์ฐ์ ์์ ์คํ
- Chrome ๋ธ๋ผ์ฐ์ ๋ฅผ ์ด๊ณ ์น์ฌ์ดํธ๋ฅผ ๋ถ์ํ๋ ค๋ ํ์ด์ง๋ก ์ด๋ํฉ๋๋ค.
๊ฐ๋ฐ์ ๋๊ตฌ ์ด๊ธฐ
- ํ์ด์ง์์ ๋ง์ฐ์ค ์ฐํด๋ฆญ ํ "๊ฒ์ฌ"(F12)๋ฅผ ํด๋ฆญํ๊ฑฐ๋, Ctrl + Shift + I(Windows) ๋๋ Cmd + Option + I(Mac)๋ฅผ ๋๋ฌ ๊ฐ๋ฐ์ ๋๊ตฌ๋ฅผ ์ฝ๋๋ค.
Lighthouse ํญ ์ ํ
- ๊ฐ๋ฐ์ ๋๊ตฌ์ ์๋จ์ ์๋ ํญ ์ค์์ "Lighthouse" ํญ์ ํด๋ฆญํฉ๋๋ค. ๋ง์ฝ ํญ์ด ๋ณด์ด์ง ์์ผ๋ฉด, "๋๋ณด๊ธฐ(โฎ)" ๋ฉ๋ด์์ ์ ํํ ์ ์์ต๋๋ค.
๊ฒฐ๊ณผ ํ์ธ ๋ฐ ๊ฐ์ ์ฌํญ ์ ์ฉ
- ํ์ด์ง์ ์ต์ ํ๋ฅผ ์ ๊ฒํ ๋ด์ฉ์ ๋ฐํ์ผ๋ก ์น์ฌ์ดํธ์ ํ์ง์ ๊ฐ์ ํ ์ ์์ต๋๋ค.
Lighthouse์ PageSpeed Insights ์ฃผ์ ์ฐจ์ด์
ํญ๋ชฉ | Lighthouse | PageSpeed Insights |
---|---|---|
์ฃผ์ ํ๊ฐ ํญ๋ชฉ | ์ฑ๋ฅ, SEO, ์ ๊ทผ์ฑ, PWA, Best Practices ๋ฑ | ์ฑ๋ฅ(์ฃผ๋ก Core Web Vitals), ํ์ด์ง ์๋ |
๋์ | ์ ์ฒด ์น์ฌ์ดํธ ํ์ง | ์ฑ๋ฅ, ์ฌ์ฉ์ ๊ฒฝํ ์ค์ฌ |
์ ๊ฒ ๋ฒ์ | SEO, ์ ๊ทผ์ฑ, ์ฑ๋ฅ, ๋ฑ | ์ฑ๋ฅ ์ค์ฌ, Core Web Vitals |
์ฌ์ฉ ๋ฐฉ๋ฒ | Chrome ๊ฐ๋ฐ์ ๋๊ตฌ ๋ด์์ ์ฌ์ฉ ๊ฐ๋ฅ | ์น์ฌ์ดํธ URL์ ์ ๋ ฅํ๋ฉด ์๋์ผ๋ก ๋ถ์ ์ ๊ณต |
์ฃผ์ ์ ์ ์ฌํญ | ์ฑ๋ฅ, SEO, ์ ๊ทผ์ฑ, ์ต์ ํ ์ ๋ฐ์ ๊ฑธ์น ์ ์ | ํ์ด์ง ๋ก๋ฉ ์๋ ๊ฐ์ ์ ์ํ ๊ตฌ์ฒด์ ์ธ ์ ์ |
๋ผ์ดํธํ์ฐ์ค(Lighthouse)๋ ์ข ํฉ์ ์ธ ์น์ฌ์ดํธ ํ์ง ํ๊ฐ ๋๊ตฌ๋ก, SEO๋ ์ ๊ทผ์ฑ ๋ฑ ๋ค์ํ ์์๋ฅผ ์ ๊ฒํ ์ ์์ผ๋ฉฐ, ๊ฐ๋ฐ์ ๋๊ตฌ๋ก์ ๋ ๊น์ด ์๋ ๋ถ์์ ์ ๊ณตํฉ๋๋ค.
PageSpeed Insights๋ ์ฑ๋ฅ์ ํนํ๋ ๋๊ตฌ๋ก, Core Web Vitals ์ค์ฌ์ ์ฑ๋ฅ ๊ฐ์ ์ ์ค์ ์ ๋ก๋๋ค. ๊ฐ๋จํ๊ณ ๋น ๋ฅด๊ฒ ์ฑ๋ฅ ๊ฐ์ ์ ์ํ ์ ์์ ์ ๊ณตํ๋ ๋ฐ ์ ์ฉํฉ๋๋ค.
๋ ๋๊ตฌ๋ ์๋ก ๋ณด์์ ์ธ ์ญํ ์ ํ๋ฉฐ, ์ฑ๋ฅ ์ต์ ํ์ SEO๋ฅผ ์ํด ํจ๊ป ์ฌ์ฉํ๋ ๊ฒ์ด ์ข์ต๋๋ค.
ํ ์คํธํ ์ต์ ํ ์ ์๋ฅผ ํ์ฉํ ๊ฒ์ ์ต์ ํ ์งํ
์ด ๋ฐฉ๋ฒ์ ํ์ฉํ๋ฉด ๊ฒ์์์ง ์์๋ฅผ ๋์ด๋ ๋ฐ ํฐ ๋์์ด ๋ฉ๋๋ค. SEO ์ ์์ ์ ๊ทผ์ฑ ์ ์๋ฅผ ์ง์์ ์ผ๋ก ๋ชจ๋ํฐ๋งํ๊ณ , ๊ฐ์ ์ฌํญ์ ๋ฐ์ํ์ฌ ์ฌ์ฉ์ ๊ฒฝํ์ ์ต์ ํํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค.
์น์ฌ์ดํธ์ ์ฑ๋ฅ, ์ ๊ทผ์ฑ, SEO๋ฅผ ํ๊ฐํ๊ณ ๊ฐ์ ํ ์ ์๋ ๊ฐ๋ ฅํ ๋๊ตฌ์ ๋๋ค. ์น์ฌ์ดํธ์ CLS ์ ์, SEO ์ ์, ์ ๊ทผ์ฑ ์ ์๋ฅผ ์ฒดํฌํ๊ณ ์ต์ ํํ๋ ๊ฒ์ ๊ฒ์์์ง ์ต์ ํ(SEO)์ ํต์ฌ์ ๋๋ค. ์ด๋ฅผ ํตํด ์น์ฌ์ดํธ์ ํ์ง์ ๊ฐ์ ํ๊ณ , ๊ฒ์ ๊ฒฐ๊ณผ์์ ๋์ ์์๋ฅผ ์ฐจ์งํ ์ ์์ต๋๋ค. ๋ฐ๋ผ์ ์น์ฌ์ดํธ์ ์ฑ๋ฅ๊ณผ ํ์ง์ ๊ฐ์ ํ๊ณ ์ถ๋ค๋ฉด, ๊ตฌ๊ธ์์ ๋ฌด๋ฃ๋ก ์ ๊ณตํ๋ ๋ผ์ดํธํ์ฐ์ค๋ฅผ ์ ๊ทน์ ์ผ๋ก ํ์ฉํ๋ ๊ฒ์ด ๋งค์ฐ ์ค์ํฉ๋๋ค.