๊ตฌ๊ธ “๋ผ์ดํธ ํ์ฐ์ค”(Lighthouse)๋ก ๋ธ๋ก๊ทธ ์ต์ ํ ์ ์ ํ์ธํ๊ธฐ
์ด๋ณด์ ํน์ง์ ์ํค๋ ๊ฒ์ ์ด์ฌํ ํ๋๋ฐ ์ํ๊ณ ์๋์ง, ์ํ๋ฉด ์ผ๋ง๋ ์ํ๊ณ ์๋์ง๋ฅผ ๋ชจ๋ฅด๋ ๊ฒ์ด๋ค. ์ฌ๊ธฐ์ ๊ธฐ์์ ํฐ์คํ ๋ฆฌ ๋ธ๋ก๊ทธ์ ์ต์ ํ์ ๋ํด ์ฐพ์๋ณด๊ณ ์ด์ฌํ ๋ฐ๋ผ ํด ๋ณธ ์์ผ๋ง๋ ๋ฌธ๋ ๋ด๊ฐ ์ต์ ํ๋ฅผ ์ ๋๋ก ํ๊ณ ์๋์ง, ์ง๊ธ๊น์ง ๋
ธ๋ ฅํ ๊ฒ์ด ๊ฐ๊ด์ ์ผ๋ก ์ด๋ป๊ฒ ํ๊ฐ๋ ์ ์๋์ง ์์ฃผ ๊ถ๊ธํด์ก๋ค. ์ฌ์ค ๋ธ๋ก๊ทธ๋ ์ ํ๋ธ์์ ๋น๋ฒ์ด๋ค ๊ฟํ์ด๋ค ํ๋ฉด์ ์๋ ค์ฃผ๋ ์ ๋ณด๋ค์ ์ ๋น์ฑ์ด ์ด๋ค์ง๋ ๊ถ๊ธํด์ ๊ฐ๊ด์ ์ธ ๊ฒ์ฆ์ด ์์์ผ๋ฉด ํ๋ค. ์ด์ฌํ ๋ฐ๋ผ ํ๋๋ฐ ๋์ค์ ๋ณด๋ ํ๋ค๋ฆฌ์ง์ ๊ฒ์ด๋ผ๋ฉด ์ผ๋ง๋ ์ต์ธํ๊ฐ?
๊ทธ๋ฌ๋ค ์ฐ์ฐํ ๊ตฌ๊ธ์์ ์ ๊ณตํ๋ Lighthouse๋ฅผ ํตํด ๋์ ๋ธ๋ก๊ทธ์ ์ ์๋ฅผ ํ์ธํ ์ ์๋ค๋ ์ฌ์ค์ ์๊ฒ ๋์๋ค. ๊ตฌ๊ธ์์ ์ ๊ณตํ ๋ณด๊ณ ์๋ผ๋ ๋ด ๋ธ๋ก๊ทธ๋ฅผ ๊ฒ์ฆํ๋ ๊ฒ์ผ๋ก ๊ฐ์น๊ฐ ์์ง๋ง ๋ธ๋ก๊ทธ ์์ต์ ์ ๋์ ์ธ ์กฐ๊ฑด์ด ๋๋ ๊ตฌ๊ธ์ ์
๋ง์ ๋ด ๋ธ๋ก๊ทธ๊ฐ ์ผ๋ง๋ ์ ๋ง๋๊ฐ๋ฅผ ๋ณด์ฌ์ฃผ๋ ๊ฒ์ด๋ผ์ ๋์ด ๋ฒ์ฉ ๋จ์ด๋ ๊ฒ์ด๋ค. ๊ทธ๋์ ์ฆ์๋ก ๋ด ๋ธ๋ก๊ทธ์ ๋ํ ๊ฒ์ฌ๋ฅผ ์ค์ํ๋ค.
์ ์ ๊ฒ์์ ํด๋ณด๋ ๊ตฌ๊ธ์ “Lighthouse” ๋ ์น ์ฌ์ดํธ์ ์๋๋ SEO ๋ฑ ์ฌ์ดํธ ์ ๋ฐ์ ์ธ ์ง๋จ๊ณผ ๊ฒ์ฆ์ ํตํด ์ฑ๋ฅ์ ํฅ์ํ ์ ์๊ณ PWA(Progressive Web APP, ์ฑ์ฒ๋ผ ๋ณด์ด๋ ๋ชจ๋ฐ์ผ ์น ์๋น์ค) ๊ฐ๋ฐ์ ๋๋ ์คํ ์์ค๋ผ ํ๋ค. ์๊ณ ๋ณด๋ ๋ธ๋ก๊ทธ ์ ๋ฐฐ๋ค์ ์ด๋ฅผ ์น์ฌ์ดํธ ํ์ง ๊ฐ์ ์ ์ํ ๋๊ตฌ๋ก ๋ถ๋ฅด๊ณ “๋ค์ด๋ฒ์น๋ง์คํฐ๋๊ตฌ”, “๊ตฌ๊ธ ์ ๋๋ฆฌํฑ์ค”, “UTM ์ฝ๋ ํ์ฉ”, “๊ตฌ๊ธ ์ํฐ์ฝ์”, “๊ตฌ๊ธ ์ตํฐ๋ง์ด์ฆ”, “Page speed Insights”, “Mobile Friendly Test” ๋ฑ๋ ๋์ผํ ์์
์ ํ ์ ์๋ ๋๊ตฌ๋ค๋ก ๋ถ๋ฅํ๊ณ ์๋ค.
์ด์จ๋ ๋ผ์ดํธ ํ์ฐ์ค๋ก ๋ด ๋ธ๋ก๊ทธ์ ์ต์ ํ ์ ์๋ฅผ ์์๋ณด๋ฌ ๊ฐ๋ค.
1. Chrome ๊ฐ๋ฐ์ ๋๊ตฌ๋ก ์ง์
ํ๊ธฐ
๋ผ์ดํธํ์ฐ์ค๋ฅผ ์ฌ์ฉํ๋ ค๋ฉด ๋ด ํฐ์คํ ๋ฆฌ ๋ธ๋ก๊ทธ์์ “Chrome ๊ฐ๋ฐ์ ๋๊ตฌ”์ ๋ค์ด๊ฐ์ผ ํ๋ค.
- “F12”๋ฅผ ํด๋ฆญํ๋ฉด ํ๋ฉด ์ค๋ฅธ์ชฝ์ “Chrome ๊ฐ๋ฐ์ ๋๊ตฌ”๊ฐ ๋ํ๋๋ค.
2. ๋ผ์ดํธํ์ฐ์ค ์ฐพ๊ธฐ
- ํฌ๋กฌ ๊ฐ๋ฐ์ ๋๊ตฌ ์ฐฝ์์ “>>”๋ฅผ ์ฐพ์ ๋๋ฅด๋ฉด ํ๋ค์ด ์ฐฝ์ด ๋ด๋ ค๊ฐ “Lighthouse”๊ฐ ๋ณด์ธ๋ค.
- “Lighthouse”๋ฅผ ํด๋ฆญํ๋ค.
3. ๋ถ์ํ๊ธฐ
๊ทธ๋ฌ๋ฉด ์๋์ ๊ฐ์ด Lighthouse Report๊ฐ ์๊ธด๋ค.
- ๋ด ๋ธ๋ก๊ทธ๋ฅผ ๊ฒ์ฌํ๊ธฐ ์ํด “Analyze page load”๋ฅผ ํด๋ฆญํ๋ฉด ๋ถ์์ด ์งํ๋๋ค.
์ฌ๊ธฐ์์๋ 5๊ฐ ์นดํ ๊ณ ๋ฆฌ๋ก ๋๋์ด ๋ถ์ํ๋ค. ์ฑ๋ฅ(performance), ์ ๊ทผ์ฑ(accessibility), ๊ถ์ฅ์ฌํญ(best practices), SEO, Progressive Web APP(PWA). ์ ๊ทผ์ฑ์ด๋ ์ฑ๋ฅ ๋ถ๋ถ์ ์ข์ ์ ์๊ฐ ๋์ค๋ฉด ๊ตฌ๊ธ ๊ฒ์ ๋ก๋ด์ด ๋์ ์ฝํ ์ธ ๋ค์ ์ข์ ๊ฒ์ผ๋ก ์ธ์ํ๊ณ ๊ฒ์๊ฒฐ๊ณผ๋ ๋ ธ์ถ์ ๋ง์ ์ด์ ์ด ์๋ค๊ณ ํ๋ค.
4. ๊ฒฐ๊ณผ ๋ฆฌํฌํธ ํ์ธ
๋ถ์์ด ๋๋๋ฉด ๊ฒฐ๊ณผ ๋ฆฌํฌํธ๊ฐ ๊ฒ์๋๋ค.
๋ชจ๋ฒ์ฌ๋ก๋ 75์ , ์ ๊ทผ์ฑ 82์ ! SEO๋ 91์ ์ด๋ค!!!. ๊ทธ๋ฐ๋ฐ PWA๋ ์ ์๊ฐ ์๋ค. ํผํฌ๋จผ์ค ์ ์๊ฐ ์๋์ ๋ํ์ ์ผ๋ก ๋์จ ๊ฒ์ผ๋ก ๋ณด์ ์ด๊ฒ์ด ์ต์ข ๋ถ์ ์ ์์ธ ๊ฒ์ผ๋ก ๋ณด์ธ๋ค. ์์ผ๋ง ํ์ฐฝ ์์ ์ํ ์ฑ์ ์ผ๋ก ๋ณด๋ฉด ํ๊ท 50์ ์ ์์ ์๊ฐ ๋ด๋ด ๋นณ๋ค ๋๊ธฐ ์ ์์ด๋ค. ๋ณด๋, ๋ฟ๋ฏํจ๊ณผ ํจ๊ป ์ค๋ง, ๊ธฐ์ด ๋น ์ง์ด ๋ชฐ๋ ค์์ผ๋ ์ด๋ด ์ ์ ์ ์ฐจ๋ ธ๋ค.
์ด์จ๋ ์์ผ๋ง ๋ธ๋ก๊ทธ๋ฅผ ๋ง๋ค๊ณ ์ด๊ฒ์ ๊ฒ ์ด์ฌํ ๋ธ๋ก๊ทธ์ ํ๊ฒฝ์ ์ต์ ํํ ๊ฒฐ๊ณผ๋ฅผ ์ ์ ์์๋ค. ์ด์ ๋ค๋ฅธ ์ต์ ํ ๋ฐฉ๋ฒ๋ค์ ์ ์ฉํด๋ณด๊ณ ๊ฒ์ฌ๋ฅผ ํ๋ฉด ๋ค๋ก ๊ฐ๋์ง ์์ผ๋ก ๊ฐ๋์ง๋ ์ ์ ์์ ๊ฒ ๊ฐ๋ค๋ ์๊ฐ์ด ๋ค์๋ค. ์๋๋ ๋ผ์ดํธํ์ฐ์ค์ ๋ํด ์ค๋ช
ํ๋ ํํ์ด์ง์ด๋ค. ๋์ค์ ๊ฐ๋ด์ผ๊ฒ ๋ค.
์ด์ ์์ด๋ณด ๋ธ๋ก๊ฑฐ ์์ฌ์ ์ ์ฒด ๋ฐฐํฐ๋ฆฌ๊ฐ ๋ฐฉ์ ์ง์ ์ด๋ค. ํฐ์คํ ๋ฆฌ ์ฐธ ๋ฐฐ์ธ ๊ฒ์ด ๋ง๋ค!! ์ด์ฌํ ํ๋ค. ์ ์ ์ฌ์ด์ผ๊ฒ ๋ค. ์ฌ๋ ค ํ๋๋ฐ ๋ธ๋ก๊ทธ ์ ์๋ฅผ ์ฌ๋ ค์ฃผ๋ ํ์ ๋ฐ๊ฒฌํด์ ํ๋ค. ๊ณต๋ถ๋ฅผ ๋ ํ ๊น ๋ง๊น ๋ง์ค์ด๋ค. ์ผ๋จ ์ฐ๋ค.
โผโผ ํฐ์คํ ๋ฆฌ ๋ธ๋ก๊ทธ ์ต์ ํ โผโผ
ํฐ์คํ ๋ฆฌ ๋ธ๋ก๊ทธ ์ต์ ํํ๊ธฐ - ์ต์ ํ ๋ ๊ฐ์ง ๋ฐฉ๋ฒ, ๋ธ๋ก๊ทธ ์ต์ ํ ํ์ธ ๋ฐฉ๋ฒ
๋๊ธ