๋ธ๋ก๊ทธ์ ์ ๋์ผ์ค ๊ด๊ณ ๊ฐ ์ ๋์ฌ ๋, ์บ์๊ฐ ์์ธ์ผ ์ ์์ต๋๋ค
๋ธ๋ก๊ทธ์ Google AdSense(์ ๋์ผ์ค) ๊ด๊ณ ๋ฅผ ์ฝ์ ํด ์์ต์ ๊ธฐ๋ํ๊ณ ์๋๋ฐ, ์ด๋ ๋ ๋ถํฐ ๊ด๊ณ ๊ฐ ๊ฐํ์ ์ผ๋ก ๋ณด์ด์ง ์๊ฑฐ๋ ์์ ๋ ธ์ถ๋์ง ์๋ ํ์์ ๋ํ ๋ง์ง๋ง ๊ธ์ ๋๋ค.๊ด๊ณ ์ฝ๋์๋ ๋ฌธ์ ๊ฐ ์๊ณ , ์น์ธ๋ ์ ์์ธ๋ฐ ์ด์ ์์ด ๊ด๊ณ ๊ฐ ์ฌ๋ผ์ง๋ค๋ฉด, ๊ทธ ๋ฐฐํ์๋ ์บ์(Cache)๋ฌธ์ ๊ฐ ์จ์ด ์์ ์ ์์ต๋๋ค.
์น ๋ธ๋ผ์ฐ์ , ์๋ฒ, CDN ๋ฑ ๋ค์ํ ๊ณ์ธต์์ ์๋ํ๋ ์บ์๋ ํ์ด์ง ๋ก๋ฉ ์๋๋ฅผ ๋์ด๋ ๋ฐ๋ ํ์ํ์ง๋ง, ๊ด๊ณ ์ ๊ฐ์ด ์ค์๊ฐ์ผ๋ก ๋ณ๋๋๋ ์ธ๋ถ ์คํฌ๋ฆฝํธ์ ์์ด์๋ ์คํ๋ ค ๊ด๊ณ ๋ก๋ฉ์ ๋ฐฉํดํ๋ ์์ธ์ด ๋ ์ ์์ต๋๋ค. ํนํ ํฐ์คํ ๋ฆฌ๋ ์๋ํ๋ ์ค์ ๊ฐ์ด ์ ์ ์ฝํ ์ธ ๋ฅผ ๋ง์ด ์ฌ์ฉํ๋ ๋ธ๋ก๊ทธ์์๋ ์บ์๋ ์ํ์ ์คํฌ๋ฆฝํธ๊ฐ ์ค๋ ์ ์ง๋๋ฉด ๊ด๊ณ ๋ ธ์ถ์ด ์ฐจ๋จ๋๊ฑฐ๋ ๋น ๊ณต๊ฐ๋ง ๋จ๋ ๊ฒฝ์ฐ๊ฐ ํํ๊ฒ ๋ฐ์ํฉ๋๋ค.
๊ด๊ณ ๊ฐ ๋ณด์๋ค ์ ๋ณด์๋ค? ์บ์๊ฐ ์ ๋์ผ์ค ๋ ธ์ถ์....
- ๊ด๊ณ ์ต์ ํ ์ด๊ธ. ์ ๋์ผ์ค ๊ด๊ณ ์์ต ๋จ์ด์ง ๋ ์ ๊ฒํด์ผ ํ ํต์ฌ ์ฒดํฌ๋ฆฌ์คํธ
- ๊ด๊ณ ์ต์ ํ ์ค๊ธ,๋ธ๋ก๊ทธ์์ ์ ๋์ผ์ค ๊ด๊ณ ๊ฐ ๋ ธ์ถ๋๋ค ์ ๋๋ค ํ ๋ ์ ๊ฒํ ํ์ ์์
- ๊ด๊ณ ์ต์ ํ ์์ฉ.์ ๋์ผ์ค ๊ด๊ณ ์ต์ ํ JS ์ค๋ณต ๋ก๋ฉ ๋ฌธ์ ํด๊ฒฐ ๋ฐฉ๋ฒ
์บ์๋ ๋ฉ๋ชจ๋ฆฌ, ๋์คํฌ, ๋ธ๋ผ์ฐ์ , ํ๋ก์, CDN, ์ ํ๋ฆฌ์ผ์ด์ ๋ฑ ๋ค์ํ ์์น์ ์กด์ฌํ๋ฉฐ, ์ด๋ฅผ ํตํด ์น ํ์ด์ง ๋ก๋ฉ ์๋๋ฅผ ํฌ๊ฒ ํฅ์์์ผ์ค๋๋ค. ์ด๋ ๊ณง ์ ๋์ผ์ค ๊ด๊ณ ์ต์ ํ์๋ ๋ฐ์ ํ ๊ด๋ จ์ด ์์ต๋๋ค.
์ด๋ฒ ๊ธ์์๋ ์ ๋์ผ์ค ๊ด๊ณ ๊ฐ ์บ์๋ก ์ธํด ์ ์์ ์ผ๋ก ๋ก๋ฉ๋์ง ์๋ ๋ํ์ ์ธ ์์ธ๊ณผ ํด๊ฒฐ ๋ฐฉ๋ฒ, ๊ทธ๋ฆฌ๊ณ ๊ด๊ณ ์์ต ์ ํ๋ฅผ ๋ง๊ธฐ ์ํ ์ต์ ํ ์ ๋ต๊น์ง ์์ธํ ๋ค๋ฃจ์ด ๋ณด๊ฒ ์ต๋๋ค.
์บ์(Cache)๋?
์บ์๋ ์์ฃผ ์ฌ์ฉํ๋ ๋ฐ์ดํฐ๋ฅผ ์์๋ก ์ ์ฅํด๋์๋ค๊ฐ, ๋ค์์ ๊ฐ์ ์์ฒญ์ด ์์ ๋ ๋ ๋น ๋ฅด๊ฒ ์ฒ๋ฆฌํ ์ ์๋๋ก ๋์์ฃผ๋ ์์ ์ ์ฅ ๊ณต๊ฐ์ ๋๋ค. ์ฝ๊ฒ ๋งํด, ์์ฃผ ์ฝ๋ ์ฑ ์ ์ฑ ์ฅ ๊น์ํ ๊ณณ์ ๋๋ ๋์ ์ฑ ์ ์์ ์ฌ๋ ค๋๋ ๊ฒ๊ณผ ๊ฐ์ ์๋ฆฌ์ ๋๋ค.
์น ํ๊ฒฝ์์ ์บ์๋ ์ฃผ๋ก ๋ค์๊ณผ ๊ฐ์ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํฉ๋๋ค:
- ์น ํ์ด์ง HTML
- ์ด๋ฏธ์ง, JS, CSS ํ์ผ
- ์๋ฒ์์ ์์ฃผ ๋ถ๋ฌ์ค๋ DB ๋ฐ์ดํฐ
๋ธ๋ก๊ทธ์ ์บ์๊ฐ ์ค์ํ ์ด์
- ๋ก๋ฉ ์๋ ํฅ์
๋ฐฉ๋ฌธ์๊ฐ ์ด์ ์ ์ ์ํ ๋ฐ์ดํฐ๊ฐ ์ ์ฅ๋์ด ์์ผ๋ฉด, ์๋ฒ์ ๋ค์ ์์ฒญํ์ง ์๊ณ ๋ก์ปฌ ์บ์์์ ๋ฐ๋ก ๋ถ๋ฌ์ค๊ธฐ ๋๋ฌธ์ ๋ก๋ฉ ์๋๊ฐ ๋ํญ ํฅ์๋ฉ๋๋ค. - ํธ๋ํฝ ์ ๊ฐ
๋์ผํ ๋ฐ์ดํฐ๋ฅผ ๋ฐ๋ณตํด์ ์์ฒญํ์ง ์๊ธฐ ๋๋ฌธ์, ์๋ฒ์ ๋ถํ๋ฅผ ์ค์ด๊ณ ํธ๋ํฝ ์ฌ์ฉ๋๋ ๋ฎ์์ง๋๋ค. - SEO(๊ฒ์์์ง ์ต์ ํ)์ ๊ธ์ ์ ์ธ ์ํฅ
๊ตฌ๊ธ์ ํฌํจํ ๊ฒ์ ์์ง์ ๋น ๋ฅธ ๋ก๋ฉ ์๋๋ฅผ ๋ ์ ํธํฉ๋๋ค. ์ด๋ ๋ธ๋ก๊ทธ ๊ฒ์ ๋ ธ์ถ ์์์ ์ ๋ฆฌํ๊ฒ ์์ฉํฉ๋๋ค.
์บ์์ ์ฅ์ ๊ณผ ๋จ์
| ์ฅ์ | ๋จ์ |
|---|---|
| ํ์ด์ง ๋ก๋ฉ ์๋ ๊ฐ์ | ๋ณ๊ฒฝ๋ ์ฝํ ์ธ ๊ฐ ์ฆ์ ๋ฐ์๋์ง ์์ |
| ์๋ฒ ๋ถํ ๊ฐ์ | ์๋ชป๋ ์บ์๊ฐ ๋ก๋ฉ ์ค๋ฅ ์ ๋ฐ ๊ฐ๋ฅ |
| ์ฌ์ฉ์ ๊ฒฝํ ํฅ์ | ๋ธ๋ผ์ฐ์ ๋ ์๋ฒ์์ ์บ์ ์ญ์ ํ์ํ ์ ์์ |
| ํธ๋ํฝ ๋น์ฉ ์ ๊ฐ | ๋๋ฒ๊น /ํ ์คํธ ์ ์บ์๊ฐ ๋ฐฉํด๊ฐ ๋๊ธฐ๋ ํจ |
์บ์์ ์ข ๋ฅ
1. ๋ฉ๋ชจ๋ฆฌ ์บ์ (Memory Cache)
RAM์ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ์ฌ ๋งค์ฐ ๋น ๋ฅธ ์๋๋ก ์๋ตํ ์ ์๊ฒ ํ๋ ์บ์์ ๋๋ค. ์ฃผ๋ก ์๋ฒ๋ ์ ํ๋ฆฌ์ผ์ด์ ๋ด๋ถ์์ ์ค์๊ฐ ์ฒ๋ฆฌ๊ฐ ํ์ํ ๋ฐ์ดํฐ์ ์ฌ์ฉ๋ฉ๋๋ค. ์ปดํจํฐ๋ฅผ ๊ป๋ค ์ผ๋ฉด ์ฌ๋ผ์ง๋ ํ๋ฐ์ฑ ์บ์์ ๋๋ค.
2. ๋์คํฌ ์บ์ (Disk Cache)
ํ๋๋์คํฌ๋ SSD์ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ์ฌ, ํ์ด์ง ์ฌ๋ฐฉ๋ฌธ ์ ๋น ๋ฅด๊ฒ ๋ถ๋ฌ์ค๋ ๋ฐฉ์์ ๋๋ค. ๋ธ๋ผ์ฐ์ ๋ ์ด์์ฒด์ ์์ ์ด๋ฏธ์ง, ์คํฌ๋ฆฝํธ, HTML ๋ฑ์ ์ ์ฅํ ๋ ์ฌ์ฉ๋๋ฉฐ, ์ฌ๋ถํ ํ์๋ ๋ฐ์ดํฐ๊ฐ ์ ์ง๋ฉ๋๋ค.
3. ๋ธ๋ผ์ฐ์ ์บ์ (Browser Cache)
์ฌ์ฉ์์ ์น ๋ธ๋ผ์ฐ์ ์ ์น ๋ฆฌ์์ค(CSS, JS, ์ด๋ฏธ์ง ๋ฑ)๋ฅผ ์ ์ฅํด๋๊ณ , ์ฌ๋ฐฉ๋ฌธ ์ ์๋ฒ์ ์ฌ์์ฒญํ์ง ์๊ณ ๋น ๋ฅด๊ฒ ๋ณด์ฌ์ฃผ๋ ์บ์์ ๋๋ค. ์ฌ์ฉ์ ๊ฒฝํ ๊ฐ์ ์ ๋งค์ฐ ํจ๊ณผ์ ์ ๋๋ค.
4. ํ๋ก์ ์บ์ (Proxy Cache)
ํ๋ก์ ์๋ฒ(์ค๊ฐ ์๋ฒ)๊ฐ ์ฌ๋ฌ ์ฌ์ฉ์๋ฅผ ๋์ ํด ์ฝํ ์ธ ๋ฅผ ์ ์ฅํ๊ณ ์ฌ์ฌ์ฉํ๋ ๋ฐฉ์์ ๋๋ค. ์ฃผ๋ก ํ์ฌ ๋ด๋ถ๋ง, ISP ๋๋ CDN ๊ตฌ์กฐ์์ ์ฌ์ฉ๋ฉ๋๋ค.
5. CDN ์บ์ (Content Delivery Network Cache)
์ ์ธ๊ณ์ ๋ถ์ฐ๋ ์๋ฒ์ ์ฝํ ์ธ ๋ฅผ ์ ์ฅํด๋๊ณ , ์ฌ์ฉ์์ ๊ฐ๊น์ด ์๋ฒ์์ ๋ฐ์ดํฐ๋ฅผ ๋น ๋ฅด๊ฒ ์ ๊ณตํ๋ ์บ์ ๋ฐฉ์์ ๋๋ค. ๋๊ท๋ชจ ํธ๋ํฝ ๋์์ ํจ๊ณผ์ ์ ๋๋ค.
6. ๋ฐ์ดํฐ๋ฒ ์ด์ค ์บ์ (Database Cache)
์์ฃผ ์ฌ์ฉ๋๋ ์ฟผ๋ฆฌ ๊ฒฐ๊ณผ๋ ํ ์ด๋ธ ์ผ๋ถ ๋ฐ์ดํฐ๋ฅผ ๋ฏธ๋ฆฌ ๋ฉ๋ชจ๋ฆฌ์ ์ ์ฅํด๋๊ณ ๋น ๋ฅด๊ฒ ์๋ตํ๋ ๋ฐฉ์์ ๋๋ค. DB ๋ถํ๋ฅผ ์ค์ด๊ณ ์๋ต ์๋๋ฅผ ๋์ด๋ ๋ฐ ์ ์ฉํฉ๋๋ค.
7. ์ ํ๋ฆฌ์ผ์ด์ ์บ์ (Application Cache)
ํ๋ก ํธ์๋ ๋๋ ๋ฐฑ์๋ ์ ํ๋ฆฌ์ผ์ด์ ๋ด๋ถ์์ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ๋ ๋ฐฉ์์ ๋๋ค. API ์๋ต ๊ฒฐ๊ณผ๋ ๊ณ์ฐ๊ฐ์ ์์๋ก ์ ์ฅํด, ๋ค์ ์ฌ์ฉํ ๋ ์๋๋ฅผ ๋์ ๋๋ค.

| ์บ์์ข ๋ฅ | ์ ์ฅ ์์น | ์ฃผ์ ์ฉ๋ | ํน์ง ๋ฐ ์ฅ์ | ์ฌ์ฉ ์ฌ๋ก |
|---|---|---|---|---|
| ๋ฉ๋ชจ๋ฆฌ ์บ์ | RAM | ์ค์๊ฐ ์ฒ๋ฆฌ | ์๋ ๋งค์ฐ ๋น ๋ฆ, ํ๋ฐ์ฑ | ์๋ฒ ์๋ต ์บ์, Redis, CPU ์บ์ |
| ๋์คํฌ ์บ์ | HDD/SSD | ์ ์ ๋ฆฌ์์ค ์ ์ฅ | ์๋ ๋ณดํต, ๋ฐ์ดํฐ ์ง์๋จ | ๋ธ๋ผ์ฐ์ ์บ์, OS ํ์ผ ์บ์ |
| ๋ธ๋ผ์ฐ์ ์บ์ | ํด๋ผ์ด์ธํธ ๋์คํฌ | ์น ๋ฆฌ์์ค ์ ์ฅ | ์ฌ๋ฐฉ๋ฌธ ์ ๋ก๋ฉ ์๋ ํฅ์ | ์ด๋ฏธ์ง, CSS, JS ์ ์ฅ |
| ํ๋ก์ ์บ์ | ์ค๊ฐ ์๋ฒ | ๋ค์ ์ฌ์ฉ์ ์์ฒญ ๊ณตํต ์ฒ๋ฆฌ | ์๋ฒ ํธ๋ํฝ ๊ฐ์ | ํ์ฌ ๋คํธ์ํฌ, ์บ์ ์๋ฒ |
| CDN ์บ์ | ์ ์ธ๊ณ ๋ถ์ฐ ์๋ฒ | ์ฝํ ์ธ ๊ธ๋ก๋ฒ ๋ฐฐํฌ | ์ง์ฐ ์๊ฐ ๊ฐ์, ๋๊ท๋ชจ ํธ๋ํฝ ๋์ | Cloudflare, Akamai, CloudFront ๋ฑ |
| ๋ฐ์ดํฐ๋ฒ ์ด์ค ์บ์ | RAM ๋๋ ์ธ๋ถ ์บ์ | ์์ฃผ ์ฐ๋ ์ฟผ๋ฆฌ ๊ฒฐ๊ณผ ์ ์ฅ | DB ๋ถํ ๊ฐ์, ์๋ต ์๋ ํฅ์ | Redis, Memcached |
| ์ ํ๋ฆฌ์ผ์ด์ ์บ์ | ์ฑ ๋ด๋ถ ๋๋ ๋ก์ปฌ | ๋ฐ๋ณต๋๋ ๊ฒฐ๊ณผ ์ฌ์ฌ์ฉ | ์ฐ์ฐ ์ค์ด๊ณ ์๋ ํฅ์ | React/Vue ์ํ ์บ์, API ์๋ต ์ ์ฅ ๋ฑ |
๋น ๋ฅด๋ฉด ํญ์ ์ข๋ค? ์บ์(Cache)์ ๋ถ์ ์ ์ธก๋ฉด๋ ํจ๊ป ๋ด์ผ ํฉ๋๋ค
์ธํฐ๋ท ํ๊ฒฝ์์ ์๋๋ ๊ณง ๊ฒฝ์๋ ฅ์ ๋๋ค. ๊ทธ๋์ ์ฐ๋ฆฌ๋ ๋ ๋ ๋น ๋ฅธ ์น์ฌ์ดํธ, ๋ ๋น ๋ฅธ ์ฑ, ๋ ๋น ๋ฅธ ์๋ต์ ์ถ๊ตฌํ์ฃ . ์ด ์๋์ ํต์ฌ ๊ธฐ์ ์ค ํ๋๊ฐ ๋ฐ๋ก ์บ์(Cache)์ ๋๋ค. ์๋ฒ๋ ํด๋ผ์ด์ธํธ๋ , ์์ฃผ ์ฌ์ฉํ๋ ๋ฐ์ดํฐ๋ฅผ ๋ฏธ๋ฆฌ ์ ์ฅํด๋๊ณ ์ฌ์ฌ์ฉํจ์ผ๋ก์จ ๋ก๋ฉ ์๋๋ฅผ ํ๊ธฐ์ ์ผ๋ก ๊ฐ์ ํด์ฃผ๋ ๊ธฐ์ ์ ๋๋ค.
ํ์ง๋ง ์ฌ๊ธฐ์ ์ง๋ฌธ ํ๋ ๋์ ธ๋ด ๋๋ค.
๋น ๋ฅด๋ฉด ํญ์ ์ข์ ๊ฑธ๊น์? ์บ์๋ ์ธ์ ๋ ์ ์ตํ๊ธฐ๋ง ํ ๊น์?
์๋์๋ง ์ง์คํ ๋๋จธ์ง, ์บ์์ ๊ทธ๋ฆผ์๋ ๊ฐ๊ณผ๋๊ธฐ ์ฝ์ต๋๋ค.
์บ์๋ก ์ธํด ๋ฐ์ํ๋ ์ฃผ์ ๋ฌธ์ ์
1. ๋ณ๊ฒฝ๋ ๋ด์ฉ์ด ๋ฐ๋ก ๋ฐ์๋์ง ์๋๋ค
์บ์์ ๊ฐ์ฅ ๋ํ์ ์ธ ๋จ์ ์ ๋ฐ๋ก ์ฝํ ์ธ ์ ์ต์ ์ํ๋ฅผ ๋ฐ์ํ์ง ๋ชปํ๋ค๋ ์ ์ ๋๋ค.
- ๋ธ๋ก๊ทธ์ ๊ธ์ ์์ ํ๋๋ฐ๋ ์ด์ ๋ด์ฉ์ด ๊ทธ๋๋ก ๋ณด์ธ๋ค?
- ์น์ฌ์ดํธ ๋์์ธ์ ๋ฐ๊ฟจ๋๋ฐ๋ ๋ณ๊ฒฝ ์ฌํญ์ด ์ ์ฉ๋์ง ์๋๋ค?
์ด๋ฐ ํ์์ ๋๋ถ๋ถ ๋ธ๋ผ์ฐ์ ๋ ์๋ฒ์ ์บ์๊ฐ ์ด์ ๋ฐ์ดํฐ๋ฅผ ๋ณด์ฌ์ฃผ๊ธฐ ๋๋ฌธ์ ๋๋ค. ํนํ CSS๋ JS ํ์ผ์ฒ๋ผ ์ธ๋ถ ๋ฆฌ์์ค์ ์บ์๊ฐ ์ ์ฉ๋๋ฉด, ์ฌ์ฉ์๋ ์ค๋ซ๋์ ์ด์ ๋ฒ์ ์ ์ฌ์ดํธ๋ฅผ ๋ณด๊ฒ ๋๋ ์ค๋ฅ๊ฐ ๋ฐ์ํ ์ ์์ต๋๋ค.
โ ํด๊ฒฐํ๋ ค๋ฉด? ์บ์๋ฅผ ๊ฐ์ ๋ก ์๋ก๊ณ ์นจ(Ctrl+F5)ํ๊ฑฐ๋ ๋ฒ์ ์ฟผ๋ฆฌ ํ๋ผ๋ฏธํฐ๋ฅผ ๋ถ์ฌ์ผ ํฉ๋๋ค. ๊ทธ๋ฌ๋ ์ผ๋ฐ ์ฌ์ฉ์๋ ์ด๋ฐ ํด๊ฒฐ ๋ฐฉ๋ฒ์ ์์ง ๋ชปํ๋ฏ๋ก, ์ฌ์ฉ์ ๊ฒฝํ์ ์น๋ช ์ ์ธ ์ํฅ์ ์ค ์ ์์ต๋๋ค.
2. ๋๋ฒ๊น ์ด๋ ํ ์คํธ์ ๋ฐฉํด๊ฐ ๋๋ค
์น ๊ฐ๋ฐ์๋ผ๋ฉด ํ ๋ฒ์ฏค ๊ฒช์ด๋ดค์ ๋ฌธ์ ์ ๋๋ค.
- ์ฝ๋๋ฅผ ์์ ํ๋๋ฐ๋ ํ๋ฉด์ด ์ ๋ฐ๋๋ค?
- ๋ฒ๊ทธ๋ฅผ ๊ณ ์ณค๋๋ฐ ์ฌ์ ํ ๋ฌธ์ ๊ฐ ์ฌํ๋๋ค?
์ฌ์ค์ ์์ ํ ํ์ผ์ด ์๋, ์บ์๋ ํ์ผ์ด ๊ณ์ ๋ก๋ฉ๋๊ณ ์๊ธฐ ๋๋ฌธ์ ๋๋ค. ์ด๋ก ์ธํด ๋๋ฒ๊น ํจ์จ์ด ๋จ์ด์ง๊ณ , ๋ฌธ์ ํด๊ฒฐ ์๋๊ฐ ์ง์ฐ๋ ์ ์์ต๋๋ค.
์บ์๊ฐ ๊ฐ๋ฐ๊ณผ ์ ์ง๋ณด์์ ํฌ๋ช ์ฑ์ ๊ฐ๋ฆด ์ ์๋ค๋ ์ ๋ ๋ถ๋ช ํ ๋ฆฌ์คํฌ์ ๋๋ค.
3. ์๋ชป๋ ์บ์๋ก ์ธํด ์ค๋ฅ๋ฅผ ์ ๋ฐํ ์ ์๋ค
์บ์๋ ๋ฐ์ดํฐ๊ฐ ๋ถ์์ ํ๊ฑฐ๋ ์์๋ ๊ฒฝ์ฐ, ์ฌ์ฉ์๋ ์๋ชป๋ ์ ๋ณด๋ ๊ธฐ๋ฅ ์ค๋ฅ๋ฅผ ๊ฒฝํํ ์ ์์ต๋๋ค.
- ์: ์ผํ๋ชฐ ์ฅ๋ฐ๊ตฌ๋๊ฐ ๋น์ด ์๋๋ฐ ๊ณ์ ์ํ์ด ๋จ์ ์๋ ์ํ๋ก ๋ณด์ด๋ ๊ฒฝ์ฐ
- ์: ๋ก๊ทธ์ธ ์ ๋ณด๊ฐ ์บ์๋์ด ๋ณด์์ ๋ ธ์ถ๋๋ ์ํฉ
ํนํ ๋ฏผ๊ฐํ ๋ฐ์ดํฐ๋ ๋ก๊ทธ์ธ ๊ด๋ จ ์บ์๋ ๋ณด์ ์ด์๋ก ์ง๊ฒฐ๋ ์ ์์ผ๋ฏ๋ก, ์ฒ ์ ํ ๊ด๋ฆฌ๊ฐ ํ์ํฉ๋๋ค.
4. ๋ถํ์ํ๊ฒ ๋ง์ ์ ์ฅ ๊ณต๊ฐ์ ์ฐจ์งํ๋ค
๋์คํฌ ์บ์๋ ์๊ฐ์ด ์ง๋ ์๋ก ์ฉ๋์ด ์์ ๋๋ค. ์ฌ์ฉ์ ๋ธ๋ผ์ฐ์ ๋ ์๋ฒ, CDN ๋ฑ ๋ชจ๋ ๋จ๊ณ์์ ์บ์๊ฐ ๋์ ๋๋ฉด ์ ์ฅ ๊ณต๊ฐ์ด ๋ญ๋น๋ ์ ์์ต๋๋ค.
- ์ผ๋ฐ ์ฌ์ฉ์์ ๋ธ๋ผ์ฐ์ ์ ์๋ฐฑ MB ์ด์์ ์บ์ ํ์ผ์ด ์์ด๋ ๊ฒฝ์ฐ
- ์๋ฒ๋ CDN์์ ์ค๋๋ ์บ์๋ฅผ ์ ๋ฆฌํ์ง ์์ ์ฑ๋ฅ ์ ํ ์ ๋ฐ
์บ์๋ '๋น ๋ฆ'์ ๋๊ฐ๋ก '๋ถํธํจ'์ ์ ๋ฐํ ์๋ ์๋ค
์บ์๋ ๋ถ๋ช ํ ์ ์ฉํ ๊ธฐ์ ์ ๋๋ค. ํ์ง๋ง '๋น ๋ฅด๋ค'๋ ์ด์ ๋ง์ผ๋ก ๋ฌด์กฐ๊ฑด ๊ธ์ ์ ์ผ๋ก ๋ณด๊ธฐ์๋ ๊ด๋ฆฌ ๋ฆฌ์คํฌ์ ์ฌ์ฉ์ ํผ๋์ ๋๋ฐํฉ๋๋ค.
๊ทธ๋์ ํ์ํ ๊ฒ์?
- ์ ์ ํ ๋ง๋ฃ ์๊ฐ ์ค์ (Cache-Control, Expires ํค๋ ํ์ฉ)
- ์ ์ ํ์ผ์ ๋ฒ์ ์ฟผ๋ฆฌ ๋ถ์ด๊ธฐ (style.css?v=2.3)
- ์บ์ ๋ฌดํจํ ์ ๋ต ์๋ฆฝ (์ ๋ฐ์ดํธ ์ ์๋ ์ญ์ ๋ฑ)
- ์ฌ์ฉ์์๊ฒ ์๋ก๊ณ ์นจ ์๋ด (๊ณต์ง ๋๋ ์๋ ๋ฆฌํ๋ ์ ๊ธฐ๋ฅ)
์ฐ๋ฆฌ๋ ๋จ์ํ ์บ์๊ฐ ๋ฌด์์ธ๊ฐ๋ฅผ ์๊ธฐ ์ํด ์ด ๊ธ์ ์ฝ๋ ๊ฒ์ด ์๋๋๋ค. ์ค์ํ ๊ฒ์ ์ ๋์ผ์ค ๊ด๊ณ ๋ ธ์ถ ๋ฌธ์ ์ ์บ์ ์ฌ์ด์ ์ฐ๊ด์ฑ์ ์ดํดํ๋ ๊ฒ์ ๋๋ค.
์๋ฅผ ๋ค์ด, ์ฌ๋ฌ๋ถ์ด ์๋น์ ๊ฐ์ ๋ค๋ฅธ ์์์ ์ฃผ๋ฌธํ๋๋ฐ, ์๋น ์ฃผ์ธ์ด ์ด์ ์๋์๊ฒ ๋๊ฐ๋ ๊ฐ์ ์์์ ๋ค์ ๊ฐ์ ธ๋ค์ค๋ค๋ฉด ์ด๋จ๊น์? ๋๊ตฌ๋ ๊ทธ ์์์ ๋จน์ง ์๊ณ ๊ทธ๋ฅ ๋๊ฐ๋ฒ๋ฆด ๊ฒ์ ๋๋ค.
๊ด๊ณ ๋ ๋ง์ฐฌ๊ฐ์ง์ ๋๋ค. ๋ฐฉ๋ฌธ์์๊ฒ ์ต์ ๊ด๊ณ ๊ฐ ์๋, ์ด๋ฏธ ๋ณธ ๊ด๊ณ ๋ ์๋ชป๋ ์บ์๋ ๊ด๊ณ ๊ฐ ๊ณ์ ๋ ธ์ถ๋๋ค๋ฉด ํด๋ฆญ๋ฅ ์ ์์ฐ์ค๋ฝ๊ฒ ๋จ์ด์ง๊ฒ ๋ฉ๋๋ค.
์ด ๋ฌธ์ ์ ๋์ํ ์ ์๋ ๋ฐฉ๋ฒ์ ์๋์ ๊ฐ์ต๋๋ค.
์ ๋์ผ์ค ์ต์ ํ ์ ๋์ผ์ค ์คํฌ๋ฆฝํธ์ ๋ ์ง ๋ฒ์ ๋ถ์ด๊ธฐ
์ ๋์ผ์ค ๊ด๊ณ ์คํฌ๋ฆฝํธ์ ๋งค์ผ ๋ณ๊ฒฝ๋๋ ๋ ์ง ๊ฐ์ ์ฟผ๋ฆฌ์คํธ๋ง์ผ๋ก ์ถ๊ฐํ๋ฉด, ๋ธ๋ผ์ฐ์ ๊ฐ ๋งค๋ฒ ์๋ก ๊ด๊ณ ์คํฌ๋ฆฝํธ๋ฅผ ๋ถ๋ฌ์ค๋๋ก ์ ๋ํ ์ ์์ต๋๋ค.
์ด๋ ๋ธ๋ผ์ฐ์ ๋ CDN์ ์ ์ฅ๋ ์ค๋๋ ์บ์๊ฐ ๊ด๊ณ ๋ก๋ฉ์ ๋ฐฉํดํ๋ ๋ฌธ์ ๋ฅผ ๋ฐฉ์งํ๋ ๋ฐ ํจ๊ณผ์ ์
๋๋ค.
์ฝ๋ ์ค๋ช
์ด ์ฝ๋๋ ์ฆ์ ์คํ ํจ์(IIFE) ๋ฐฉ์์ผ๋ก ๊ตฌ์ฑ๋์ด ์์ผ๋ฉฐ, ๋ค์๊ณผ ๊ฐ์ ๋์์ ํฉ๋๋ค:
- new Date()๋ก ํ์ฌ ๋ ์ง๋ฅผ ๊ฐ์ ธ์ต๋๋ค.
- YYYYMMDD ํ์์ผ๋ก ๋ ์ง ๊ฐ์ ์กฐํฉํฉ๋๋ค.
- Google AdSense ์คํฌ๋ฆฝํธ URL ๋์ &v=YYYYMMDD ํ์์ ์ฟผ๋ฆฌ ๋ฌธ์์ด์ ์ถ๊ฐํฉ๋๋ค.
- ํด๋น ์คํฌ๋ฆฝํธ๋ฅผ head์ ๋น๋๊ธฐ(async) ๋ฐฉ์์ผ๋ก ์ฝ์ ํฉ๋๋ค.
์ฆ, ๋งค์ผ ์๋กญ๊ฒ ๋ณ๊ฒฝ๋๋ URL์ ์ฌ์ฉํจ์ผ๋ก์จ ์บ์๋ ์ด์ ์คํฌ๋ฆฝํธ ๋์ ํญ์ ์ต์ ๋ฒ์ ์ ๊ด๊ณ ์คํฌ๋ฆฝํธ๋ฅผ ๋ถ๋ฌ์ค๋๋ก ์ ๋ํฉ๋๋ค.
script
(() = {
const d = document;
const t = new Date();
const v = t.getFullYear() + ('0' + (t.getMonth() + 1)).slice(-2) + ('0' + t.getDate()).slice(-2);
const s = d.createElement('script');
s.async = true;
s.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxx&v=' + v;
s.crossOrigin = 'anonymous';
d.head.appendChild(s);
})();
/script
์ฌ์ฉ ๋ชฉ์ ๋ฐ ์ฅ์
| ๋ชฉ์ | ์ค๋ช |
|---|---|
| ๊ด๊ณ ์คํฌ๋ฆฝํธ ์บ์ ๋ฌด๋ ฅํ | URL ๋ค์ ๋ ์ง ์ฟผ๋ฆฌ๋ฅผ ๋ถ์ด๋ฉด ๋ธ๋ผ์ฐ์ ๊ฐ ๋งค์ผ ์๋ก ์์ฒญํจ. |
| ๋ก๋ฉ ์ต์ ํ | async ์์ฑ์ผ๋ก ํ์ด์ง ๋ ๋๋ง์ ์ฐจ๋จํ์ง ์์. |
| ์๋ํ | ์๋์ผ๋ก ๋ฒ์ ์ ๊ฐฑ์ ํ ํ์ ์์ด ์๋ ๋ฐ์. |
| ๋ณด์ ๊ฐํ | crossOrigin="anonymous" ์ค์ ์ผ๋ก ์ธ๋ถ ๋ฆฌ์์ค ๋ก๋ฉ ์ ๋ณด์ ๊ฐํ. |
ํฐ์คํ ๋ฆฌ ๋ธ๋ก๊ทธ ์ด์์๋ฅผ ์ํ ์ต์ ํ ์ฝ๋
"๋จ, ์ด ์ฝ๋๋ ํฐ์คํ ๋ฆฌ์์ ์ ๋์ผ์ค ์๋ ๊ด๊ณ ๊ธฐ๋ฅ์ ์ฌ์ฉํ์ง ์๊ณ , ์๋์ผ๋ก ๊ด๊ณ ๋ฅผ ์ด์ํ๋ ์ด์์์๊ฒ ์ ์ฉํฉ๋๋ค."
script
(() = {
const currentUrl = location.href;
// ๋ฉ์ธ ํ์ด์ง ๋๋ ์นดํ
๊ณ ๋ฆฌ ํ์ด์ง์์๋ง ์คํ
const isMainOrCategory =
currentUrl === 'https://yourblog.tistory.com/' || // ์ฌ๊ธฐ์ ์์ ์ ๋ธ๋ก๊ทธ ์ฃผ์ ์
๋ ฅ
currentUrl.includes('/category');
if (!isMainOrCategory) return;
// ์ค๋ณต๋ adsbygoogle ์คํฌ๋ฆฝํธ ์ ๊ฑฐ
const existingScripts = document.querySelectorAll('script[src*="adsbygoogle.js"]');
if (existingScripts.length 1) {
for (let i = 1; i existingScripts.length; i++) {
existingScripts[i].remove();
}
}
// ๊ด๊ณ ์คํฌ๋ฆฝํธ๊ฐ ์์ ๋๋ง ์ฝ์
if (existingScripts.length === 0) {
const script = document.createElement('script');
// ์ค๋ ๋ ์ง (YYYYMMDD ํ์) ์ฟผ๋ฆฌ ํ๋ผ๋ฏธํฐ ์์ฑ
const now = new Date();
const version =
now.getFullYear() +
String(now.getMonth() + 1).padStart(2, '0') +
String(now.getDate()).padStart(2, '0');
script.async = true;
script.src =
'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxx&v=' +
version;
script.crossOrigin = 'anonymous';
document.head.appendChild(script);
}
})();
/script
๊ฐ๋จ ์ค๋ช
- ํน์ ํ์ด์ง์์๋ง Google AdSense ๊ด๊ณ ์คํฌ๋ฆฝํธ๋ฅผ ๋์ ์ผ๋ก ์ฝ์
์ด ์ฝ๋๋ ํ์ฌ ํ์ด์ง URL์ด ๋ฉ์ธ ํ์ด์ง(https://yourblog.tistory.com/)์ด๊ฑฐ๋ ์นดํ ๊ณ ๋ฆฌ ํ์ด์ง(/category ๊ฒฝ๋ก ํฌํจ)์ธ ๊ฒฝ์ฐ์๋ง ์คํ๋ฉ๋๋ค. - ์ค๋ณต ์ฝ์
๋ adsbygoogle.js ์คํฌ๋ฆฝํธ ์ ๊ฑฐ
ํ์ด์ง์ ์ด๋ฏธ adsbygoogle.js ์คํฌ๋ฆฝํธ๊ฐ ์ฌ๋ฌ ๊ฐ ์ฝ์ ๋์ด ์์ ๋, ์ฒซ ๋ฒ์งธ ์คํฌ๋ฆฝํธ๋ง ๋จ๊ธฐ๊ณ ๋๋จธ์ง๋ฅผ ๋ชจ๋ ์ ๊ฑฐํ์ฌ ๊ด๊ณ ์ค๋ณต ๋ก๋ฉ์ผ๋ก ์ธํ ์ค๋ฅ๋ฅผ ๋ฐฉ์งํฉ๋๋ค. - ๊ด๊ณ ์คํฌ๋ฆฝํธ๊ฐ ์์ผ๋ฉด ์๋ก ์ฝ์
adsbygoogle.js ์คํฌ๋ฆฝํธ๊ฐ ํ์ด์ง์ ์์ ๋, ์ค๋ ๋ ์ง๋ฅผ ์ฟผ๋ฆฌ ํ๋ผ๋ฏธํฐ(v=YYYYMMDD)๋ก ๋ถ์ฌ์ ์๋กญ๊ฒ ์คํฌ๋ฆฝํธ๋ฅผ ๋น๋๊ธฐ(async)๋ก ์ฝ์ ํฉ๋๋ค.
๋ ์ง ์ฟผ๋ฆฌ ํ๋ผ๋ฏธํฐ๋ฅผ ๋ถ์ด๋ ์ด์ ๋ ๋ธ๋ผ์ฐ์ ์ CDN ์บ์๋ฅผ ๋ฌด๋ ฅํํ์ฌ ๋งค์ผ ์ต์ ๊ด๊ณ ์คํฌ๋ฆฝํธ๋ฅผ ๋ก๋ํ๋๋ก ํ๊ธฐ ์ํจ์ ๋๋ค. - crossOrigin="anonymous" ์ค์
์ธ๋ถ ์คํฌ๋ฆฝํธ ๋ก๋ฉ ์ ๋ณด์์ ๊ฐํํ๊ณ , CORS ์ด์๋ฅผ ๋ฐฉ์งํ๊ธฐ ์ํ ์ค์ ์ ๋๋ค.
ํฐ์คํ ๋ฆฌ ๋ธ๋ก๊ทธ์ ์คํฌ๋ฆฝํธ ์ ์ฉ ๋ฐฉ๋ฒ
1. ํฐ์คํ ๋ฆฌ ๊ด๋ฆฌ์ ํ์ด์ง ์ ์
- ํฐ์คํ ๋ฆฌ ๋ธ๋ก๊ทธ ๊ด๋ฆฌ์๋ก ๋ก๊ทธ์ธ ํ,
- ์ผ์ชฝ ๋ฉ๋ด์์ ๊พธ๋ฏธ๊ธฐ HTML/CSS ํธ์ง ์ผ๋ก ์ด๋ํฉ๋๋ค.
2. HTML ํธ์ง ํ๋ฉด์์ head ํ๊ทธ ๋๋ body ํ๋จ ์์น ์ฐพ๊ธฐ
- head ์์ญ์ ์คํฌ๋ฆฝํธ๋ฅผ ๋ฃ์ผ๋ฉด ํ์ด์ง๊ฐ ๋ก๋๋ ๋ ๋ฐ๋ก ์คํ๋ฉ๋๋ค.
- ๋ณดํต head ํ๊ทธ ๋ด๋ถ ๋๋ /body ๋ฐ๋ก ์์ ์ฝ์ ํ๋ ๊ฑธ ์ถ์ฒํฉ๋๋ค.
3. ์คํฌ๋ฆฝํธ ์ฝ๋ ๋ถ์ฌ๋ฃ๊ธฐ
- ์๋ ์คํฌ๋ฆฝํธ ๋ณต์ฌ ํ,
- ์์ ์ ๋ธ๋ก๊ทธ ์ฃผ์(https://yourblog.tistory.com/)์ ์ ๋์ผ์ค ํผ๋ธ๋ฆฌ์ ID(ca-pub-xxxxxxxx)๋ฅผ ๊ผญ ์์ ํ์ธ์!
- ์์ ํ ์ฝ๋๋ฅผ head ํ๊ทธ ์์ด๋ /body ๋ฐ๋ก ์์ ๋ถ์ฌ๋ฃ์ต๋๋ค.
์บ์๋ ์๋์ ์์ ์ฑ ์ฌ์ด์ ์ค๋ค๋ฆฌ๊ธฐ
์ฐ๋ฆฌ๋ ์๋์ ๋๋ฌด ์ต์ํด์ง ๋๋จธ์ง,๊ทธ ์๋๊ฐ ์ ํํ๊ฐ? ์ ๋ขฐํ ์ ์๋๊ฐ?๋ผ๋ ์ง๋ฌธ์ ๋์น๊ณค ํฉ๋๋ค. ์บ์๋๋น ๋ฅด์ง๋ง ๋๋ก๋ ์ํํ ์ ์๋ ๋๊ตฌ์ ๋๋ค. ๋ฐ๋ผ์, ์บ์๋ ๋ฐ๋์์ ์คํ๊ณ ์ ๋ต์ ์ผ๋ก ๊ด๋ฆฌํด์ผ ํฉ๋๋ค. ์๋์ ์ ๋ขฐ์ฑ ์ฌ์ด์์ ๊ท ํ์ ๋ง์ถ ์ ์์ ๋, ๋น๋ก์ ์บ์๋ ์ง์ ํ ํ์ ๋ฐํํฉ๋๋ค.
์บ์๋ ๋ถ๋ช ํ ์น ์ฑ๋ฅ์ ๋์ด๋ ํต์ฌ ๊ธฐ์ ์ ๋๋ค. ํ์ง๋ง๋ฌด์กฐ๊ฑด ๋น ๋ฅด๊ธฐ๋ง ํ ๊ฒ์ด ์ ๋ต์ ์๋๋๋ค. ํนํ ์ ๋์ผ์ค ๊ด๊ณ ์ ๊ฐ์ด ์ค์๊ฐ์ฑ์ด ์ค์ํ ์์์์๋ ์บ์๊ฐ ์คํ๋ ค ๋ ธ์ถ ์ค๋ฅ๋ฅผ ์ ๋ฐํ๊ณ ์์ต ์ ํ๋ก ์ด์ด์ง ์ ์์ต๋๋ค.
๋ฐ๋ผ์ ์ ๋์ผ์ค ๊ด๊ณ ์ต์ ํ๋ฅผ ์ํด์๋ ์บ์์ ๊ตฌ์กฐ๋ฅผ ์ดํดํ๊ณ , ์ด๋ฅผ ์ ๋ต์ ์ผ๋ก ์ ์ดํ๋ ๊ฒ์ด ๋ฌด์๋ณด๋ค ์ค์ํฉ๋๋ค. ์๋์ ์ ํ์ฑ, ์ฌ์ฉ์ ๊ฒฝํ์ ๊ท ํ ์๊ฒ ๊ณ ๋ คํ ์บ์ ๊ด๋ฆฌ๊ฐ ๊ณง ๋ธ๋ก๊ทธ ์์ต๊ณผ ์ง๊ฒฐ๋๋ค๋ ์ ์ ๊ธฐ์ตํ์ธ์.