๊ฒ์์์ง ํฌ๋กค๋ฌ์ ์ ํด ์ํ ๋งํฌ ์์ ๊ด๋ฆฌ ์ต์ข ๋ณธ
์ฟ ํก์ํ๋งํฌ, 11๋ฒ๊ฐ, G๋ง์ผ ์ ํด ๋งํฌ๋ฅผ ์์ ํ๊ฒ ์ฝ์ ํ๋ ๋ฐฉ๋ฒ! referer-based-blocking๊ณผ Base64 ๋๋ ํ๋ก ํด๋ฆญ ์ด๋ฒคํธ ๊ธฐ๋ฐ ๋งํฌ ๊ตฌํ, SEO ์์ ์ฑ ํ๋ณด ๋ฐฉ๋ฒ ๊ณต๊ฐํฉ๋๋ค.
๋ธ๋ก๊ทธ ์ด์์์๊ฒ ์์ด ๊ฒ์์์ง ํฌ๋กค๋ฌ์ ๋์ ์๋ฆฌ์ ์ ํด ๋ง์ผํ ๋งํฌ ๊ด๋ฆฌ๋ ๋จ์ํ ๊ธฐ์ ์ ์ธ ๋ฌธ์ ๊ฐ ์๋๋ผ, ๋ธ๋ก๊ทธ์ SEO ์ฑ๊ณผ์ ์ง๊ฒฐ๋๋ ๋งค์ฐ ์ค์ํ ๋ถ๋ถ์ ๋๋ค. ํนํ ์ฟ ํก ํํธ๋์ค, 11๋ฒ๊ฐ, G๋ง์ผ๊ณผ ๊ฐ์ ์ธ๋ถ ์ ํด ๋งํฌ๋ฅผ ๋ธ๋ก๊ทธ ๊ธ์ ์ฝ์ ํ ๋๋ ๋์ฑ ์ ์คํด์ผ ํฉ๋๋ค. ๋งํฌ๋ฅผ ์๋ชป๋ ๋ฐฉ์์ผ๋ก ๋ ธ์ถํ๊ฒ ๋๋ฉด, ๊ฒ์์์ง์ด ํด๋น ํ์ด์ง๋ฅผ ๋ถ์ ์ ์ผ๋ก ํ๊ฐํ์ฌ ์ ํ์ง ์ฌ์ดํธ๋ก ํ๋จํ ์ ์๊ธฐ ๋๋ฌธ์ ๋๋ค.
์ด๋ฒ ๊ธ์์๋ ๊ทธ๋์ ์ฐ์ฌํ๋ ์ฟ ํก ์ํ ๋งํฌ ์ต์ ํ 1~4ํธ์ ๋ด์ฉ์ ์ข ํฉํด, ๊ตฌ๊ธ๋ด์ ๋์ ๋ฐฉ์๊ณผ ์๋ฐ์คํฌ๋ฆฝํธ ๊ธฐ๋ฐ ๋งํฌ ์ฒ๋ฆฌ ๋ฐฉ๋ฒ, ๊ทธ๋ฆฌ๊ณ ์์ ํ ์ ํด ๋งํฌ ์ฝ์ ์ ๋ต๊น์ง ์ต์ข ์ ์ผ๋ก ์ ๋ฆฌํฉ๋๋ค.
1. ์ ํด ์ํ๋งํฌ๋ฅผ ์ธ์ํ๋ ๊ฒ์์์ง ํฌ๋กค๋ฌ์ ๊ธฐ๋ณธ ๋์
๊ฒ์์์ง ํฌ๋กค๋ฌ๋ ์นํ์ด์ง๋ฅผ ํ์ํ ๋ ๋งํฌ๋ฅผ ์ด๋ป๊ฒ ํ์งํ๊ณ ์ด๋ํ ์ง ๊ฒฐ์ ํฉ๋๋ค. ๊ณผ๊ฑฐ์ ํ์ฌ์ ํฌ๋กค๋ฌ๋ ํฐ ์ฐจ์ด๊ฐ ์๋๋ฐ, ๋ํ์ ์ธ ํฌ๋กค๋ฌ ๋์ ๋ฐฉ์์ ์๋ ํ๋ก ์ ๋ฆฌํ์ต๋๋ค.
| ํฌ๋กค๋ฌ ํ์ | ๋์ ๋ฐฉ์ |
| 1์ธ๋ ํฌ๋กค๋ฌ (๋จ์ HTML ํ์) | HTML ์์ค์ฝ๋์์ a href="..." ํ๊ทธ๋ง ๋ถ์ |
| 2์ธ๋ ํฌ๋กค๋ฌ (๋ ๋๋ง ์์ง ํฌํจ) | ์๋ฐ์คํฌ๋ฆฝํธ๊น์ง ์คํํ์ฌ ๋์ ์ผ๋ก ์์ฑ๋ ๋งํฌ๊น์ง ๋ถ์ (์: ๊ตฌ๊ธ๋ด์ ํฌ๋กฌ ๊ธฐ๋ฐ ๋ ๋๋ง ์์ง ์ฌ์ฉ) |
์ ๋ฆฌ
๊ณผ๊ฑฐ์๋ a href ํ๊ทธ๊ฐ ์์ผ๋ฉด ๊ฒ์์์ง์ด ๋งํฌ๋ฅผ ํ์งํ ์ ์์์ง๋ง,
ํ์ฌ์ ๊ตฌ๊ธ๋ด์ ์ค์ ๋ธ๋ผ์ฐ์ ์ฒ๋ผ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์คํํ์ฌ ๋งํฌ๋ฅผ ํ์ ํ ์ ์์ต๋๋ค.
์ํ ์ง์ ๋งํฌ์ ๊ฒ์์์ง์ ์ธ์ ๋ฐฉ์
์ฆ, ์ง์ ๋งํฌ๋ ํฌ๋กค๋ฌ๊ฐ ๋ฐ๋ก ์ธ์ํ๋ฉฐ, ํด๋น ๋งํฌ์ ๋ชฉ์ ์ง๊น์ง ํ์ธํ ์ ์์ต๋๋ค.
๊ฒ์์์ง์ ๋จ์ํ ๋งํฌ๊ฐ ์กด์ฌํ๋์ง๋ง ๋ณด๋ ๊ฒ์ด ์๋๋ผ, ๋งํฌ์ ๋ชฉ์ ์ง์ ์ฝํ
์ธ ์ ์ฐ๊ด์ฑ๊น์ง ํจ๊ป ๋ถ์ํด ํ์ด์ง์ ํ์ง์ ํ๊ฐํฉ๋๋ค.
ํต์ฌ ํฌ์ธํธ
๋งํฌ๊ฐ ์๋ค๋ ์ฌ์ค๋ง์ผ๋ก๋ ์ ํ์ง ํ๋จ์ด ์ด๋ฃจ์ด์ง์ง ์์ต๋๋ค.
๋งํฌ๊ฐ ์ฐ๊ฒฐ๋ ๋ชฉ์ ์ง์ ์ฝํ ์ธ ์ ์ฐ๊ด์ฑ์ด ์ค์ํ ํ๊ฐ ๊ธฐ์ค์ ๋๋ค.
๋ฐ๋ผ์ ๋จ์ํ ๋งํฌ์ ํํ๋ฅผ ๋ณ๊ฒฝํ๋ค๊ณ ํด์ ์ ํ์ง ๋ฌธ์ ๋ฅผ ํผํ ์๋ ์์ต๋๋ค.
๊ฒฐ๊ตญ ๋ชฉ์ ์ง๊ฐ ๋์ผํ๋ค๋ฉด ๊ฒ์์์ง ์
์ฅ์์๋ ๊ฐ์ ๋งํฌ๋ก ํ๋จํ๊ธฐ ๋๋ฌธ์ ์๋ฌด๋ฐ ํจ๊ณผ๊ฐ ์๊ฒ ๋ฉ๋๋ค
์ ํด ์ํ ๋งํฌ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ฉ๊ณผ ์ฃผ์ํ ์
์ผ๋ถ ๋ธ๋ก๊ทธ ์ด์์๋ค์ ์ด๋ฌํ ๋ฌธ์ ์ ์ ํผํ๊ธฐ ์ํด ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํ์ฉํด ๋์ ๋งํฌ๋ฅผ ์ ์ฉํ๊ธฐ๋ ํฉ๋๋ค.
๊ทธ๋ฌ๋ ์ต๊ทผ์ ๊ฒ์์์ง์ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์์ฑ๋ ๋งํฌ๋ ์ธ์ํ๊ณ ์ถ์ ํ ์ ์๊ธฐ ๋๋ฌธ์,
์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํด ๋์ ๋งํฌ๋ฅผ ๊ตฌํํ ๊ฒฝ์ฐ ๋ฐ๋์ ํฌ๋กค๋ฌ์ ๋์ ์๋ฆฌ๋ฅผ ์ดํดํด์ผ ํฉ๋๋ค.

2. ์๋ฐ์คํฌ๋ฆฝํธ ๋ด๋ถ ์ํ ๋งํฌ ํ์ง ๊ฐ๋ฅ ์ฌ๋ถ
์๋ฐ์คํฌ๋ฆฝํธ๋ก ์ ํด ๋งํฌ๋ฅผ ๊ด๋ฆฌํ ๋, ๊ตฌ๊ธ๋ด์ด ํด๋น ๋งํฌ๋ฅผ ์ค์ ๋ก ๋ฐ๋ผ๊ฐ ์ ์๋์ง๋ฅผ ์ดํดํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค.
์๋๋ ๋ํ์ ์ธ ๋ ๊ฐ์ง ์ํฉ์ ์ค๋ช
ํฉ๋๋ค.
(A) ์ผ๋ฐ์ ์ธ ๊ฒฝ์ฐ ๋จ์ ๊ฐ์ฒด ์ ์ธ
์๋ ์ฝ๋์ฒ๋ผ JS ์ฝ๋์ ์๋ ๋งํฌ ๋ฌธ์์ด ์์ฒด๋ ํ์ธํ ์ ์์ต๋๋ค. ๊ทธ๋ฌ๋ ์ด ๋ฌธ์์ด์ด ์ค์ ๋ก ๋งํฌ๋ก ์๋ํ๋์ง๊น์ง๋ ํ๋จํ ์ ์์ต๋๋ค. ๋ํ ๊ฒ์๋ด์ ์ค์ค๋ก window.open()์ด๋ location.href ๊ฐ์ ํด๋ฆญ ๋์์ ์ ๋ ์คํํ์ง ์์ต๋๋ค.
์ฆ, ํด๋ฆญ ๊ธฐ๋ฐ์ ์ด๋์ ์ํํ์ง ์๊ธฐ ๋๋ฌธ์ ํด๋น URL์ ๋ฐ๋ผ๊ฐ์ง ์์ต๋๋ค.
const urlMap = {
"code1": "https://link.coupang.com/a/abc123",
"code2": "https://link.coupang.com/a/xyz456"
};
ํน์ง:
- ์๋ฐ์คํฌ๋ฆฝํธ ๋ด๋ถ์ ๋จ์ํ URL ๋ฌธ์์ด๋ง ์กด์ฌ
- ๊ตฌ๊ธ๋ด์ ์ด ๋ฌธ์์ด์ ํ ์คํธ ํํ๋ก๋ง ์์ง ๊ฐ๋ฅ
- ํ์ง๋ง ํด๋ฆญ์ ์ํํ์ง ์์ผ๋ฏ๋ก ๋งํฌ ์ด๋ ๋ถ๊ฐ
์ ๋ฆฌ:
์ด ๊ฒฝ์ฐ ๊ตฌ๊ธ๋ด์ ์ค์ ๋งํฌ๋ฅผ ๋ฐ๋ผ๊ฐ์ง ๋ชปํ๋ฏ๋ก ์๋์ ์ผ๋ก ์์ ํฉ๋๋ค
(B) ๋ฒํผ ํด๋ฆญ ์ด๋ฒคํธ ๊ธฐ๋ฐ
document.body.addEventListener('click', function(e){
const url = urlMap['code1'];
window.open(url, '_blank');
});
ํน์ง:
- ์ฌ์ฉ์๊ฐ ๋ฒํผ์ ํด๋ฆญํด์ผ๋ง ๋งํฌ๊ฐ ์ด๋ฆผ
- ๊ตฌ๊ธ๋ด์ ์ค์ ํด๋ฆญ ๋์์ ์ํํ์ง ์์
- ๋ฐ๋ผ์ ๋งํฌ ์ด๋์ด ๋ถ๊ฐ๋ฅ
์ ๋ฆฌ: ํด๋ฆญ ๊ธฐ๋ฐ์ผ๋ก๋ง ์ด๋ฆฌ๋ ๊ฒฝ์ฐ ๊ตฌ๊ธ๋ด์ ํด๋น ๋งํฌ๋ฅผ ๋ฐ๋ผ๊ฐ์ง ๋ชปํ๋ฏ๋ก SEO ์ธก๋ฉด์์ ์๋์ ์ผ๋ก ์์ ํ ๋ฐฉ์์ ๋๋ค.
| ๊ตฌ๋ถ | ๋ถ ๋์ | SEO ์ธก๋ฉด |
| ๋จ์ ๊ฐ์ฒด ์ ์ธ (A) | ๋ฌธ์์ด์ ํ์ธ ๊ฐ๋ฅํ์ง๋ง ์ด๋ ๋ถ๊ฐ | ๋น๊ต์ ์์ |
| ํด๋ฆญ ์ด๋ฒคํธ ๊ธฐ๋ฐ (B) | ํด๋ฆญํ์ง ์์ผ๋ฏ๋ก ์ด๋ ๋ถ๊ฐ | ์์ |
| ๋์ a href ํ๊ทธ ์ฌ์ฉ | ๋ฐ๋ก ํ์งํ๊ณ ๋ชฉ์ ์ง ํ์ธ ๊ฐ๋ฅ | ๋ ธ์ถ ์ํ ๋์ |
3. ์ํ ๋งํฌ ์ฌ์ฉ์ ๋คํธ์ํฌ ์์ฒญ(fetch)์ ๋ฌธ์ ์
์ผ๋ถ ๊ฐ๋ฐ์๋ค์ ์ ํด ๋งํฌ๋ฅผ ํจ์จ์ ์ผ๋ก ๊ด๋ฆฌํ๊ธฐ ์ํด ์ธ๋ถ JSON ํ์ผ์ ๋ถ๋ฌ์ ๋งํฌ ์ ๋ณด๋ฅผ ๊ด๋ฆฌํ๋ ๋ฐฉ์์ ์ฌ์ฉํฉ๋๋ค. fetch('/urls.json')๋ ๋ธ๋ผ์ฐ์ ๊ฐ ์ธ๋ถ ๋คํธ์ํฌ ์์ฒญ์ ๋ณด๋ด๋ ๋ช ๋ น์ ๋๋ค. ๋คํธ์ํฌ ์์ฒญ ์์ฒด๋ฅผ ์ง์ ์คํํ์ง ์๋๋ผ๋, ๊ฒ์๋ด์ ํด๋น URL์ ๋ณ๋๋ก ์ ๊ทผํ ์ ์์ต๋๋ค.
JSON ํ์ผ์ ๋จ์ํ ๋ฐ์ดํฐ์ด๋ฏ๋ก, ๊ฒ์๋ด์ ์ด ํ์ผ ์์ URL๋ค์ ๊ทธ๋๋ก ํ์ฑํ ์ ์์ต๋๋ค.
fetch('/urls.json')
.then(res = res.json())
.then(data = Object.assign(urlMap, data));
โ ๋ฌธ์ ์
- JSON ํ์ผ์ด ๋ณ๋ ์กด์ฌํ๊ธฐ ๋๋ฌธ์ ๋๊ตฌ๋ ์ง์ ์ ๊ทผ ๊ฐ๋ฅ
- ๊ตฌ๊ธ๋ด ๋ํ /urls.json์ ์ง์ ์ ๊ทผ ๊ฐ๋ฅ ๋งํฌ๊ฐ ๊ทธ๋๋ก ๋ ธ์ถ๋จ
- ๋ณด์๊ณผ ์ ํ์ง ๋ฐฉ์ง๋ฅผ ์ํด fetch ์ฌ์ฉ ๊ธ์ง!
ํด๊ฒฐ์ฑ : ๋ชจ๋ ๋งํฌ๋ฅผ์๋ฐ์คํฌ๋ฆฝํธ ๋ด๋ถ ๊ฐ์ฒด์ ์ง์ ํฌํจ์์ผ์ผ ํ๋ฉฐ, ์ธ๋ถ์์ ํ์ผ์ ๋ถ๋ฌ์ค์ง ์์์ผ ํฉ๋๋ค.
๊ฒ์๋ด์ ์ค์ ์ํ ๋งํฌ ๋์ ๋น๊ต
์๋ ํ๋ ๊ฒ์๋ด์ด ๊ฐ ๋ฐฉ์๋ณ๋ก ๋งํฌ๋ฅผ ํ์งํ ์ ์๋์ง ์ ๋ฆฌํ ๊ฒ์ ๋๋ค.
| ๋์ ์์น | ๋ถ ํ์ธ ๊ฐ๋ฅ ์ฌ๋ถ | ์ค๋ช |
| a href="..." | ๋ฌด์กฐ๊ฑด ๊ฐ๋ฅ | HTML ํ์ฑ 1๋จ๊ณ์์ ๋ฐ๋ก ํ์ง |
| fetch('/urls.json') | ๋ฌด์กฐ๊ฑด ๊ฐ๋ฅ | JSON ํ์ผ ์ง์ ์ ๊ทผ ๊ฐ๋ฅ |
| JS ๋ด๋ถ ๋ฌธ์์ด (urlMap) | ํ ์คํธ๋ง ํ์ธ ๊ฐ๋ฅ | ์ด๋ ๋ถ๊ฐ, ๋จ์ ์์ง ๊ฐ๋ฅ |
| ํด๋ฆญ ์ด๋ฒคํธ ๊ธฐ๋ฐ (window.open) | ๋ถ๊ฐ๋ฅ | ๊ตฌ๊ธ๋ด์ ํด๋ฆญ ๋์ ์ํํ์ง ์์ |
ํต์ฌ ํฌ์ธํธ: ํด๋ฆญ ์ด๋ฒคํธ ๊ธฐ๋ฐ์ผ๋ก ๋งํฌ๋ฅผ ์ด๋ฉด ๊ตฌ๊ธ๋ด์ด ๋ฐ๋ผ๊ฐ์ง ๋ชปํ๋ฏ๋ก SEO ์์ ์ฑ์ ๋์ผ ์ ์์ต๋๋ค.
4. ์์ ํ๊ฒ ์ ํด ๋งํฌ๋ฅผ ์ฐจ๋จํ๋ ๋ฐฉ๋ฒ
์ ํด ๋งํฌ๋ฅผ ๋ธ๋ก๊ทธ์ ๋ ธ์ถํ๋ฉด์๋ ๊ตฌ๊ธ๋ด์ด ํ์งํ์ง ๋ชปํ๊ฒ ํ๋ ค๋ฉด, ์๋ ๋ฐฉ๋ฒ๋ค์ ๊ถ์ฅํฉ๋๋ค.
์์ ํ ์ ํด ๋งํฌ ๊ด๋ฆฌ ์ ๋ต
fetch ์ฌ์ฉ ๊ธ์ง
- ๋ชจ๋ URL์ ์๋ฐ์คํฌ๋ฆฝํธ ๋ด๋ถ ๊ฐ์ฒด์ ์ง์ ํฌํจํฉ๋๋ค.
- ์ธ๋ถ JSON ํ์ผ ์์ฒญ์ ๊ตฌ๊ธ๋ด์ด ์ง์ ์ ๊ทผ ๊ฐ๋ฅํ๋ฏ๋ก ์ ๋ ์ฌ์ฉํ์ง ์์ต๋๋ค.
Base64 ๋ฑ ๋๋ ํ ์ ์ฉ
- ์ ํด ๋งํฌ๋ฅผ ๊ทธ๋๋ก ์ฝ๋์ ๋ ธ์ถํ์ง ์๊ณ ๋๋ ํํ์ฌ ์ฝ๋ ๋ถ์ ๋์ด๋๋ฅผ ๋์ ๋๋ค.
ํด๋ฆญ ์ด๋ฒคํธ ๊ธฐ๋ฐ ๋งํฌ ๊ตฌํ
- ๊ตฌ๊ธ๋ด์ ์ค์ ํด๋ฆญ ๋์์ ํ์ง ์์ผ๋ฏ๋ก ํด๋ฆญ ์ด๋ฒคํธ ๊ธฐ๋ฐ ๋งํฌ๋ ๋ฐ๋ผ๊ฐ์ง ๋ชปํฉ๋๋ค.
Referer ๊ธฐ๋ฐ ์๋ฒ ์ฐจ๋จ
- ์๋ฒ ์ธก์์ Referer๋ฅผ ํ์ธํ์ฌ ์ง์ ์ ๊ทผ์ ๋ง๊ณ , ๋ธ๋ก๊ทธ ํ์ด์ง๋ฅผ ํตํด์๋ง ๋งํฌ๊ฐ ์๋ํ๋๋ก ์ค์ ํฉ๋๋ค
์์ ์ฝ๋: ์์ ํ ํด๋ฆญ ๊ธฐ๋ฐ ์ ํด ๋งํฌ
์๋ ์ฝ๋๋ ์ ํด ๋งํฌ๋ฅผ Base64 ๋๋ ํ ํ, ์ฌ์ฉ์๊ฐ ๋ฒํผ์ ํด๋ฆญํ์ ๋๋ง ๋งํฌ๊ฐ ์ด๋ฆฌ๋๋ก ๊ตฌํํ ์์ ํ ๋ฐฉ์์ ๋๋ค.
(function(){
const _0xabc123 = {
"x1": atob("aHR0cHM6Ly9saW5rLmNvdXBhbmcuY29tL2EvY1N5RWtQ"),
"x2": atob("aHR0cHM6Ly9saW5rLmNvdXBhbmcuY29tL2EvY1NETTR2")
};
document.body.addEventListener('click', function(e){
const btn = e.target.closest('button.short-link');
if (!btn) return;
const code = btn.dataset.code;
const url = _0xabc123[code];
if (url) {
window.open(url, '_blank', 'noopener,noreferrer');
}
});
})();
์ํ ๋งํฌ ์ฝ๋ ์ค๋ช
Base64 ๋๋ ํ ์ ์ฉ
- ๋งํฌ๋ฅผ ์ง์ ๋ ธ์ถํ์ง ์๊ณ atob()๋ฅผ ์ฌ์ฉํด ๋ณตํธํ ์ฒ๋ฆฌ
- ์ฝ๋ ๋ถ์ ๋์ด๋ ์์น ๋ณด์ ๊ฐํ
ํด๋ฆญ ์ด๋ฒคํธ ๊ธฐ๋ฐ ์คํ
- ์ฌ์ฉ์๊ฐ ๋ฒํผ์ ํด๋ฆญํด์ผ๋ง ๋งํฌ๊ฐ ์ด๋ฆผ
- ๊ตฌ๊ธ๋ด์ ํด๋ฆญํ์ง ์๊ธฐ ๋๋ฌธ์ ๋งํฌ๋ฅผ ํ์งํ์ง ๋ชปํจ SEO ์์
noopener, noreferrer ์ต์ ์ฌ์ฉ
- ์ ์ฐฝ์ผ๋ก ์ด๋ฆด ๋ ๋ณด์์ ๊ฐํํ๊ณ
- Referer ์ ๋ณด๊ฐ ์ ๋ฌ๋์ง ์๋๋ก ์ค์
6. ๊ตฌ๊ธ/๋ค์ด๋ฒ ๊ด๊ณ ์ ์ ํด ๋ง์ผํ ๋งํฌ์ ์ฐจ์ด
๊ฒ์์์ง์ด ์ ํด ๋งํฌ๋ฅผ ๋ค๋ฃจ๋ ๋ฐฉ์์ ์์ฒด ๊ด๊ณ ์ ์ ํด ๋ง์ผํ ๋งํฌ์์ ํฐ ์ฐจ์ด๊ฐ ์์ต๋๋ค.
| ๊ตฌ๋ถ | ์์ | ํ๊ฐ ๋ฐฉ์ | SEO ์ํฅ |
| ์์ฌ ๊ด๊ณ | ๊ตฌ๊ธ ์ ๋์ผ์ค, ๋ค์ด๋ฒ ์ผํ/์ ๋ํฌ์คํธ | ํ๋ซํผ์์ ์ง์ ์ด์ | ์ ํ์ง ์ฒ๋ฆฌ ์์, ์์ ์ ์ธ ํธ๋ํฝ ์์ต |
| ์ ํด ๋ง์ผํ ๋งํฌ | ์ฟ ํก, 11๋ฒ๊ฐ, G๋ง์ผ ๋ฑ | ์ธ๋ถ ๋๋ฉ์ธ์ผ๋ก ์ด๋ | ์ฌ์ฉ์ ์ฒด๋ฅ ์๊ฐ ๊ฐ์ ์ ํ์ง ๊ฐ๋ฅ์ฑ ์กด์ฌ |
ํต์ฌ ์ฐจ์ด์ :
์์ฌ ๊ด๊ณ : ๊ตฌ๊ธ์ด๋ ๋ค์ด๋ฒ๊ฐ ์ง์ ๊ด๋ฆฌํ๊ณ ํต์ ํ๊ธฐ ๋๋ฌธ์ ์ ํ์ง ํ์ด์ง๋ก ํ๊ฐ๋์ง ์์. ํธ๋ํฝ์ด ๊ณง ํ๋ซํผ์ ์์ต์ด๋ฏ๋ก ์์ ํ๊ฒ ์ด์ ๊ฐ๋ฅ.
์ ํด ๋งํฌ: ์ธ๋ถ ๋๋ฉ์ธ์ผ๋ก ์ฌ์ฉ์๋ฅผ ์ด๋์ํค๊ธฐ ๋๋ฌธ์ ํ์ด์ง ๊ฐ์น ํ๋ฝ ๋ฐ ์ฒด๋ฅ ์๊ฐ ๊ฐ์ ๋ฐ์. ๊ทธ ๊ฒฐ๊ณผ ๊ฒ์์์ง์ด ์ ํ์ง ํ์ด์ง๋ก ํ๊ฐํ ๊ฐ๋ฅ์ฑ์ด ๋์.
์ ํด ๋ง์ผํ ๋งํฌ ๋ฌธ์ ์ต์ข ์ ๋ฆฌ
๊ฒ์์์ง์ ๋จ์ํ ๋งํฌ์ ์ ๋ฌด๊ฐ ์๋๋ผ ์ฌ์ฉ์ ๊ฒฝํ(UX)์ ๊ธฐ๋ฐ์ผ๋ก ํ์ด์ง๋ฅผ ํ๊ฐํฉ๋๋ค. ์ ํด ๋งํฌ๋ฅผ ์๋ชป ๋ ธ์ถํ๋ฉด ํ์ด์ง ์ฒด๋ฅ ์๊ฐ ๊ฐ์, ์ธ๋ถ ์ด๋ ์ฆ๊ฐ๋ก ์ธํด ์ ํ์ง ์ํ์ด ์ปค์ง๋๋ค. ๋ธ๋ก๊ทธ์ ์์ต์ฑ๊ณผ SEO๋ฅผ ๋์์ ์งํค๊ธฐ ์ํด์๋ ๊ฒ์์์ง์ ํฌ๋กค๋ง ์๋ฆฌ๋ฅผ ์ดํดํ๊ณ , ๋ด์ด ํ์งํ๊ธฐ ์ด๋ ค์ด ๋ฐฉ์์ผ๋ก ์ ํด ๋งํฌ๋ฅผ ์ค๊ณํด์ผ ํฉ๋๋ค.
๊ฒ์์์ง ํฌ๋กค๋ฌ๋ ๋ธ๋ก๊ทธ ๋งํฌ๋ฅผ ์ด๋ป๊ฒ ์ธ์ํ๋์?
๊ฒ์์์ง ํฌ๋กค๋ฌ, ํนํ ๊ตฌ๊ธ๋ด์ ์นํ์ด์ง์ ๋งํฌ๋ฅผ ๋จ์ํ ์กด์ฌ ์ฌ๋ถ๋ง ๋ณด๋ ๊ฒ์ด ์๋๋ผ, ๋งํฌ์ ๋ชฉ์ ์ง์ ์ฝํ ์ธ ์ฐ๊ด์ฑ๊น์ง ๋ถ์ํ์ฌ ํ์ด์ง ํ์ง์ ํ๊ฐํฉ๋๋ค. ๊ณผ๊ฑฐ 1์ธ๋ ํฌ๋กค๋ฌ๋ HTML a href="..." ํ๊ทธ๋ง ๋ถ์ํ์ง๋ง, ์ต์ 2์ธ๋ ํฌ๋กค๋ฌ๋ ์๋ฐ์คํฌ๋ฆฝํธ๊น์ง ๋ ๋๋งํ์ฌ ๋์ ๋งํฌ๋ ํ์งํ ์ ์์ต๋๋ค. ๋ฐ๋ผ์ ๋จ์ํ ๋งํฌ ํํ๋ฅผ ๋ฐ๊พธ๋๋ผ๋ ๋ชฉ์ ์ง๊ฐ ๊ฐ์ผ๋ฉด ๊ฒ์์์ง์ ๋์ผํ ๋งํฌ๋ก ํ๋จํฉ๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ ๋ด๋ถ ๋งํฌ๋ ๊ตฌ๊ธ๋ด์ด ๋ฐ๋ผ๊ฐ ์ ์๋์?
์๋ฐ์คํฌ๋ฆฝํธ ๋ด๋ถ์ URL ๋ฌธ์์ด๋ง ์กด์ฌํ๋ ๊ฒฝ์ฐ, ๊ตฌ๊ธ๋ด์ ํ
์คํธ ํํ๋ก ์์งํ ์๋ ์์ง๋ง, window.open()์ด๋ location.href ๊ฐ์ ํด๋ฆญ ๋์์ ์ํํ์ง ์์ต๋๋ค. ์ฆ, ๋จ์ ๊ฐ์ฒด ์ ์ธ์ผ๋ก ๋งํฌ๋ฅผ ๊ด๋ฆฌํ๋ฉด ๊ฒ์๋ด์ด ๋ฐ๋ผ๊ฐ์ง ๋ชปํ๋ฏ๋ก ์๋์ ์ผ๋ก ์์ ํฉ๋๋ค. ํด๋ฆญ ์ด๋ฒคํธ ๊ธฐ๋ฐ์ผ๋ก ๋งํฌ๋ฅผ ์ด ๊ฒฝ์ฐ์๋ ๊ตฌ๊ธ๋ด์ ํด๋ฆญ์ ํ์ง ์์ผ๋ฏ๋ก ์์ ํ ๋ฐฉ์์ผ๋ก ๋ถ๋ฅ๋ฉ๋๋ค.
์ธ๋ถ JSON(fetch) ๋ฐฉ์์ผ๋ก ์ ํด ๋งํฌ๋ฅผ ๊ด๋ฆฌํด๋ ๋๋์?
์ธ๋ถ JSON ํ์ผ์ ๋ถ๋ฌ์ค๋ fetch('/urls.json') ๋ฐฉ์์ ๋ธ๋ผ์ฐ์ ๊ฐ ๋คํธ์ํฌ ์์ฒญ์ ๋ณด๋ด๋๋ก ํ์ง๋ง, ํด๋น ํ์ผ์ ๋๊ตฌ๋ ์ ๊ทผ ๊ฐ๋ฅํ๋ฉฐ ๊ตฌ๊ธ๋ด ๋ํ ์ง์ ์ ๊ทผํ ์ ์์ต๋๋ค. ๋ฐ๋ผ์ ์ธ๋ถ JSON ๋ฐฉ์์ ๋งํฌ๊ฐ ๊ทธ๋๋ก ๋
ธ์ถ๋ ์ํ์ด ์์ด ๋ณด์๊ณผ SEO ์ธก๋ฉด์์ ๊ถ์ฅ๋์ง ์์ต๋๋ค. ํด๊ฒฐ์ฑ
์ผ๋ก๋ ๋ชจ๋ ์ ํด ๋งํฌ๋ฅผ ์๋ฐ์คํฌ๋ฆฝํธ ๋ด๋ถ ๊ฐ์ฒด์ ์ง์ ํฌํจ์ํค๋ ๋ฐฉ๋ฒ์ด ์์ ํฉ๋๋ค.
์์ ํ๊ฒ ์ ํด ๋งํฌ๋ฅผ ์ฝ์ ํ๋ ๋ฐฉ๋ฒ์ ๋ฌด์์ธ๊ฐ์?
์์ ํ ์ ํด ๋งํฌ ๊ด๋ฆฌ๋ฅผ ์ํด์๋ ๋ค์ ์ ๋ต์ ์ฌ์ฉํด์ผ ํฉ๋๋ค.
- ๋ชจ๋ URL์ ์๋ฐ์คํฌ๋ฆฝํธ ๋ด๋ถ ๊ฐ์ฒด์ ์ง์ ํฌํจํ๊ณ fetch ์ฌ์ฉ ๊ธ์ง
- Base64 ๋ฑ ๋๋ ํ๋ฅผ ์ ์ฉํด ์ฝ๋ ๋ถ์ ๋์ด๋ ์์น
- ํด๋ฆญ ์ด๋ฒคํธ ๊ธฐ๋ฐ ๋งํฌ ๊ตฌํ์ผ๋ก ๊ตฌ๊ธ๋ด์ด ์ ๊ทผํ์ง ๋ชปํ๊ฒ ์ค์
- ํ์ ์ Referer ๊ธฐ๋ฐ ์๋ฒ ์ฐจ๋จ์ผ๋ก ์ง์ ์ ๊ทผ ๋ฐฉ์ง
์ด ๋ฐฉ๋ฒ์ ์ฌ์ฉํ๋ฉด ์ ํด ๋งํฌ๋ฅผ ๋ธ๋ก๊ทธ์ ๋ ธ์ถํ๋ฉด์๋ SEO ์์ ์ฑ์ ํ๋ณดํ ์ ์์ต๋๋ค.