์ข ํฉ ํ์ง ํ ์คํธ
Lighthouse ์ ๊ทผ์ฑยท๊ถ์ฅ์ฌํญยทSEO ํตํฉ ๋ถ์
๋นํ์ ์ด๋ฒ ๋ฌ 5ํ ๋จ์
๋ฌด๋ฃ ๊ฐ์
ํ๋ฉด ์ 20ํ
Google Lighthouse - ์น์ฌ์ดํธ ์ข ํฉ ํ์ง ์ธก์ ๋๊ตฌ
Google Lighthouse๋ ๊ตฌ๊ธ์ด ๊ฐ๋ฐํ ์คํ์์ค ์น ํ์ง ์ธก์ ๋๊ตฌ๋ก, Chrome DevTools์ ๋ด์ฅ๋์ด ์์ผ๋ฉฐ
์น์ฌ์ดํธ์ ์ ๊ทผ์ฑ, ๋ชจ๋ฒ ์ฌ๋ก(๊ถ์ฅ์ฌํญ), SEO ์ค์ ์ฌ๋ถ๋ฅผ ์ข
ํฉ์ ์ผ๋ก ๋ถ์ํฉ๋๋ค.
์ธก์ ๋๊ตฌ ๋ฐ ํ๊ฒฝ
โข Lighthouse ์ต์ ๋ฒ์ (Chrome ๋ธ๋ผ์ฐ์ ์์ง ๊ธฐ๋ฐ, ํ๊ตญ์ด ๋ณด๊ณ ์)
โข Headless Chrome์ผ๋ก ์ค์ ๋ธ๋ผ์ฐ์ ํ๊ฒฝ ์๋ฎฌ๋ ์ด์
โข ์ฑ๋ฅ(์๋) ์์ญ์ ์คํํ์ง ์์ต๋๋ค. ๋ก๋ฉ ์๊ฐ์ ์ธก์ ํ๋ ์๋ฒ์ ๋คํธ์ํฌ ๊ฒฝ๋ก์ ๋ฐ๋ผ ํฌ๊ฒ ๋ฌ๋ผ์ง๋ฏ๋ก, ์๋๋ 8๊ฐ ๋ฆฌ์ ์ธก์ ์๋ฒ๊ฐ ์ง์ ์ฌ๋ ๊ธ๋ก๋ฒ ์๋ ๊ฒ์ฌ์์ ํ์ธํ์ธ์.
ํ ์คํธ ๋ชฉ์
โข ์น์ฌ์ดํธ์ ์ ๋ฐ์ ์ธ ํ์ง ์์ค ํ์
โข ๊ฒ์์์ง ์ต์ ํ(SEO) ์ค์ ์ฌํญ ์ ๊ฒ
โข ์ฅ์ ์ธ ์ ๊ทผ์ฑ ํ์ค(WCAG) ์ค์ ์ฌ๋ถ ํ์ธ
โข ์น ํ์ค ๋ฐ ๋ณด์ ๋ชจ๋ฒ ์ฌ๋ก ์ ์ฉ ์ํ ํ๊ฐ
3๋ ํ๊ฐ ์์ญ
1. Accessibility (์ ๊ทผ์ฑ): ARIA ๋ ์ด๋ธ, ์์ ๋๋น, ํค๋ณด๋ ํ์ ์ง์
2. Best Practices (๋ชจ๋ฒ ์ฌ๋ก): HTTPS ์ฌ์ฉ, ์ฝ์ ์ค๋ฅ, ์ด๋ฏธ์ง ๋น์จ
3. SEO (๊ฒ์ ์ต์ ํ): ๋ฉํ ํ๊ทธ, ๊ตฌ์กฐํ๋ ๋ฐ์ดํฐ, ๋ชจ๋ฐ์ผ ์นํ์ฑ
ํ ์คํธ๋ ์ฝ 20์ด~1๋ถ ์ ๋ ์์๋๋ฉฐ, ์น์ฌ์ดํธ ๋ณต์ก๋์ ๋ฐ๋ผ ๋ฌ๋ผ์ง ์ ์์ต๋๋ค.
์ธก์ ๋๊ตฌ ๋ฐ ํ๊ฒฝ
โข Lighthouse ์ต์ ๋ฒ์ (Chrome ๋ธ๋ผ์ฐ์ ์์ง ๊ธฐ๋ฐ, ํ๊ตญ์ด ๋ณด๊ณ ์)
โข Headless Chrome์ผ๋ก ์ค์ ๋ธ๋ผ์ฐ์ ํ๊ฒฝ ์๋ฎฌ๋ ์ด์
โข ์ฑ๋ฅ(์๋) ์์ญ์ ์คํํ์ง ์์ต๋๋ค. ๋ก๋ฉ ์๊ฐ์ ์ธก์ ํ๋ ์๋ฒ์ ๋คํธ์ํฌ ๊ฒฝ๋ก์ ๋ฐ๋ผ ํฌ๊ฒ ๋ฌ๋ผ์ง๋ฏ๋ก, ์๋๋ 8๊ฐ ๋ฆฌ์ ์ธก์ ์๋ฒ๊ฐ ์ง์ ์ฌ๋ ๊ธ๋ก๋ฒ ์๋ ๊ฒ์ฌ์์ ํ์ธํ์ธ์.
ํ ์คํธ ๋ชฉ์
โข ์น์ฌ์ดํธ์ ์ ๋ฐ์ ์ธ ํ์ง ์์ค ํ์
โข ๊ฒ์์์ง ์ต์ ํ(SEO) ์ค์ ์ฌํญ ์ ๊ฒ
โข ์ฅ์ ์ธ ์ ๊ทผ์ฑ ํ์ค(WCAG) ์ค์ ์ฌ๋ถ ํ์ธ
โข ์น ํ์ค ๋ฐ ๋ณด์ ๋ชจ๋ฒ ์ฌ๋ก ์ ์ฉ ์ํ ํ๊ฐ
3๋ ํ๊ฐ ์์ญ
1. Accessibility (์ ๊ทผ์ฑ): ARIA ๋ ์ด๋ธ, ์์ ๋๋น, ํค๋ณด๋ ํ์ ์ง์
2. Best Practices (๋ชจ๋ฒ ์ฌ๋ก): HTTPS ์ฌ์ฉ, ์ฝ์ ์ค๋ฅ, ์ด๋ฏธ์ง ๋น์จ
3. SEO (๊ฒ์ ์ต์ ํ): ๋ฉํ ํ๊ทธ, ๊ตฌ์กฐํ๋ ๋ฐ์ดํฐ, ๋ชจ๋ฐ์ผ ์นํ์ฑ
ํ ์คํธ๋ ์ฝ 20์ด~1๋ถ ์ ๋ ์์๋๋ฉฐ, ์น์ฌ์ดํธ ๋ณต์ก๋์ ๋ฐ๋ผ ๋ฌ๋ผ์ง ์ ์์ต๋๋ค.
| ๋ฑ๊ธ | ์ ์ | ๊ธฐ์ค |
|---|---|---|
| A+ | 95~100 | Accessibility: 90์ + Best Practices: 90์ + SEO: 90์ + ์ ์ฒด ํ๊ท : 95์ + |
| A | 90~94 | Accessibility: 85์ + Best Practices: 85์ + SEO: 85์ + ์ ์ฒด ํ๊ท : 90์ + |
| B | 80~89 | Accessibility: 75์ + Best Practices: 75์ + SEO: 75์ + ์ ์ฒด ํ๊ท : 80์ + |
| C | 70~79 | Accessibility: 65์ + Best Practices: 65์ + SEO: 65์ + ์ ์ฒด ํ๊ท : 70์ + |
| D | 60~69 | Accessibility: 55์ + Best Practices: 55์ + SEO: 55์ + ์ ์ฒด ํ๊ท : 60์ + |
| F | 0~59 | ์ ๊ธฐ์ค์ ๋ฏธ๋ฌ |
์์ง ๊ฒฐ๊ณผ๊ฐ ์์ต๋๋ค
ํ ์คํธ๋ฅผ ์คํํ๋ฉด ์ข ํฉ ํ์ง ๋ถ์ ๊ฒฐ๊ณผ๋ฅผ ํ์ธํ ์ ์์ต๋๋ค.
์์ง ๊ฒฐ๊ณผ๊ฐ ์์ต๋๋ค
ํ ์คํธ๋ฅผ ์คํํ๋ฉด Raw JSON ๋ฐ์ดํฐ๋ฅผ ํ์ธํ ์ ์์ต๋๋ค.
๊ฒ์ฌ ๋ด์ญ์ ๋ณด๋ ค๋ฉด ๋ก๊ทธ์ธ์ด ํ์ํฉ๋๋ค.
๋๋ฉ์ธ ๊ด๋ฆฌ๋ ๋ก๊ทธ์ธ์ด ํ์ํฉ๋๋ค.
ํ์ง ์์ญ์ ๋ค๋ฅธ ๊ฒ์ฌ
- ์ ๊ทผ์ฑ ์ฌํ โ WCAG 2.1 A/AA ๊ท์น
- ๋ธ๋ผ์ฐ์ ํธํ โ ChromeยทFirefoxยทSafari ๋ ๋๋ง
- ๋ฐ์ํ UI โ 9๊ฐ ๋ทฐํฌํธ ๋ ์ด์์ ๋์นจ