๋ค์ํ ๊ธ๋ก๋ฒ ์ฌ์ฉ์ ํ๊ฒฝ์์ ๊ฒฌ๊ณ ํ ์น ๊ฐ๋ฐ์ ์ํ ๋ธ๋ผ์ฐ์ ํธํ์ฑ ๋งคํธ๋ฆญ์ค ์์ฑ ๋ฐ ์๋ฐ์คํฌ๋ฆฝํธ ๊ธฐ๋ฅ ์ง์ ์ถ์ ์๋ํ์ ๋ํ ์ข ํฉ ๊ฐ์ด๋์ ๋๋ค.
๋ธ๋ผ์ฐ์ ํธํ์ฑ ๋งคํธ๋ฆญ์ค ์๋ํ: ์๋ฐ์คํฌ๋ฆฝํธ ๊ธฐ๋ฅ ์ง์ ์ถ์ ๋ง์คํฐํ๊ธฐ
์ค๋๋ ์ ๋ค์ํ ๋์งํธ ํ๊ฒฝ์์, ์น ์ ํ๋ฆฌ์ผ์ด์ ์ด ์๋ง์ ๋ธ๋ผ์ฐ์ ์ ๊ธฐ๊ธฐ์์ ์๋ฒฝํ๊ฒ ์๋ํ๋๋ก ๋ณด์ฅํ๋ ๊ฒ์ ๋งค์ฐ ์ค์ํฉ๋๋ค. ๋ธ๋ผ์ฐ์ ํธํ์ฑ ๋งคํธ๋ฆญ์ค๋ ์ด๋ฅผ ๋ฌ์ฑํ๊ธฐ ์ํ ํต์ฌ ๋๊ตฌ๋ก, ๋ค์ํ ๋ธ๋ผ์ฐ์ ์์ ์ด๋ค ๊ธฐ๋ฅ์ด ์ง์๋๋์ง์ ๋ํ ๋ช ํํ ๊ฐ์๋ฅผ ์ ๊ณตํฉ๋๋ค. ๊ทธ๋ฌ๋ ์ด๋ฌํ ๋งคํธ๋ฆญ์ค๋ฅผ ์๋์ผ๋ก ๋ง๋ค๊ณ ์ ์งํ๋ ๊ฒ์ ์๊ฐ์ด ๋ง์ด ๊ฑธ๋ฆฌ๊ณ ์ค๋ฅ๊ฐ ๋ฐ์ํ๊ธฐ ์ฌ์ด ํ๋ก์ธ์ค์ ๋๋ค. ์ด ์ข ํฉ ๊ฐ์ด๋์์๋ ๋ธ๋ผ์ฐ์ ํธํ์ฑ ๋งคํธ๋ฆญ์ค ์์ฑ ๋ฐ ์๋ฐ์คํฌ๋ฆฝํธ ๊ธฐ๋ฅ ์ง์ ์ถ์ ์ ์๋ํํ๋ ๋ฐฉ๋ฒ์ ํ์ํ์ฌ, ์ ์ธ๊ณ ์ฌ์ฉ์๋ฅผ ์ํ ๊ฒฌ๊ณ ํ๊ณ ์ ๊ทผ์ฑ ๋์ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ ์ ์๋๋ก ์ง์ํฉ๋๋ค.
๊ธ๋ก๋ฒ ์ฌ์ฉ์์๊ฒ ๋ธ๋ผ์ฐ์ ํธํ์ฑ์ด ์ค์ํ ์ด์ ๋ ๋ฌด์์ผ๊น์?
์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ ์ด์ ํน์ ์ง์ญ์ด๋ ์ฌ์ฉ์ ์ธ๊ตฌ ํต๊ณ์ ๊ตญํ๋์ง ์์ต๋๋ค. ์ง์ ํ ๊ธ๋ก๋ฒ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ค์ํ ํ๊ฒฝ์์ ๋ค์ํ ๋ธ๋ผ์ฐ์ ์ ๊ธฐ๊ธฐ๋ฅผ ์ฌ์ฉํ์ฌ ์ ์ํ๋ ์ฌ์ฉ์๋ค์ ๋ง์กฑ์์ผ์ผ ํฉ๋๋ค. ๋ธ๋ผ์ฐ์ ํธํ์ฑ์ ๋ฌด์ํ๋ฉด ๋ค์๊ณผ ๊ฐ์ ๋ฌธ์ ๊ฐ ๋ฐ์ํ ์ ์์ต๋๋ค:
- ๊ธฐ๋ฅ ์ฅ์ : ๊ตฌํ ๋ธ๋ผ์ฐ์ ์ฌ์ฉ์๋ ์ค๋ฅ๋ฅผ ๊ฒช๊ฑฐ๋ ์ฑ๋ฅ ์ ํ๋ฅผ ๊ฒฝํํ ์ ์์ต๋๋ค.
- ์ผ๊ด๋์ง ์์ ์ฌ์ฉ์ ๊ฒฝํ: ๋ธ๋ผ์ฐ์ ๋ง๋ค ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ค๋ฅด๊ฒ ๋ ๋๋งํ์ฌ ๋จํธ์ ์ธ ์ฌ์ฉ์ ๊ฒฝํ์ ์ด๋ํ ์ ์์ต๋๋ค.
- ์์ต ์์ค: ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ์ํ๊ฑฐ๋ ์ฌ์ฉํ ์ ์๋ ์ฌ์ฉ์๋ ์ด๋ฅผ ํฌ๊ธฐํ ์ ์์ผ๋ฉฐ, ์ด๋ ์ฌ์ ๊ธฐํ ์์ค๋ก ์ด์ด์ง๋๋ค.
- ํํ ์์: ๋ฒ๊ทธ๊ฐ ๋ง๊ฑฐ๋ ์ ๋ขฐํ ์ ์๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ธ๋๋ ์ด๋ฏธ์ง์ ๋ถ์ ์ ์ธ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค.
- ์ ๊ทผ์ฑ ๋ฌธ์ : ๋ค์ํ ๋ณด์กฐ ๊ธฐ์ ๊ณผ ๋ธ๋ผ์ฐ์ ์กฐํฉ์์ ์ ๋๋ก ํ ์คํธ๋์ง ์์ ๊ฒฝ์ฐ, ์ฅ์ ๊ฐ ์๋ ์ฌ์ฉ์๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ทผ์ ์ฅ๋ฒฝ์ ๊ฒช์ ์ ์์ต๋๋ค.
์๋ฅผ ๋ค์ด, ์ ์ธ๊ณ ์ฌ์ฉ์๋ฅผ ๋์์ผ๋ก ํ๋ ์ ์์๊ฑฐ๋ ํ๋ซํผ์ ์๊ฐํด ๋ด ์๋ค. ์ธํฐ๋ท ์ฐ๊ฒฐ์ด ๋๋ฆฌ๊ฑฐ๋ ๊ตฌํ ๊ธฐ๊ธฐ๋ฅผ ์ฌ์ฉํ๋ ์ง์ญ์ ์ฌ์ฉ์๋ค์ ์ต์ ์ด ์๋ ๋ธ๋ผ์ฐ์ ์ ์์กดํ ์ ์์ต๋๋ค. ์ด๋ฌํ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ง์ํ์ง ์์ผ๋ฉด ์ ์ฌ ๊ณ ๊ฐ ๊ธฐ๋ฐ์ ์๋น ๋ถ๋ถ์ ๋ฐฐ์ ํ๋ ๊ฒฐ๊ณผ๋ฅผ ๋ณ์ ์ ์์ต๋๋ค. ๋ง์ฐฌ๊ฐ์ง๋ก, ์ ์ธ๊ณ ๋ ์์๊ฒ ์๋น์ค๋ฅผ ์ ๊ณตํ๋ ๋ด์ค ์น์ฌ์ดํธ๋ ๊ฐ๋ฐ๋์๊ตญ์์ ํํ ์ฌ์ฉ๋๋ ๋ธ๋ผ์ฐ์ ๋ฅผ ํฌํจํ์ฌ ๊ด๋ฒ์ํ ๊ธฐ๊ธฐ์ ๋ธ๋ผ์ฐ์ ์์ ์ฝํ ์ธ ์ ์ ๊ทผํ ์ ์๋๋ก ๋ณด์ฅํด์ผ ํฉ๋๋ค.
๋ธ๋ผ์ฐ์ ํธํ์ฑ ๋งคํธ๋ฆญ์ค ์ดํดํ๊ธฐ
๋ธ๋ผ์ฐ์ ํธํ์ฑ ๋งคํธ๋ฆญ์ค๋ ์ ํ๋ฆฌ์ผ์ด์ ์ด ์ง์ํ๋ ๋ธ๋ผ์ฐ์ ๋ฐ ๋ฒ์ ๊ณผ ํจ๊ป, ์์กดํ๋ ๊ธฐ๋ฅ ๋ฐ ๊ธฐ์ ์ ๋์ดํ ํ์ ๋๋ค. ์ผ๋ฐ์ ์ผ๋ก ๋ค์ ์ ๋ณด๊ฐ ํฌํจ๋ฉ๋๋ค:
- ๋ธ๋ผ์ฐ์ : Chrome, Firefox, Safari, Edge, Internet Explorer (๋ ๊ฑฐ์ ์์คํ ์ ์์ง ์ง์ํ๋ ๊ฒฝ์ฐ), Opera ๋ฐ ๋ชจ๋ฐ์ผ ๋ธ๋ผ์ฐ์ (iOS Safari, Chrome for Android).
- ๋ฒ์ : ๊ฐ ๋ธ๋ผ์ฐ์ ์ ํน์ ๋ฒ์ (์: Chrome 110, Firefox 105).
- ์ด์ ์ฒด์ : Windows, macOS, Linux, Android, iOS.
- ์๋ฐ์คํฌ๋ฆฝํธ ๊ธฐ๋ฅ: ES6 ๊ธฐ๋ฅ (ํ์ดํ ํจ์, ํด๋์ค), ์น API (Fetch API, ์น ์คํ ๋ฆฌ์ง API), CSS ๊ธฐ๋ฅ (Flexbox, Grid), HTML5 ์์ (video, audio).
- ์ง์ ์์ค: ํน์ ๋ธ๋ผ์ฐ์ /๋ฒ์ ์กฐํฉ์์ ๊ธฐ๋ฅ์ด ์์ ํ ์ง์๋๋์ง, ๋ถ๋ถ์ ์ผ๋ก ์ง์๋๋์ง, ๋๋ ์ ํ ์ง์๋์ง ์๋์ง๋ฅผ ๋ํ๋ ๋๋ค. ์ด๋ ์ข ์ข ๋ น์ ์ฒดํฌ ํ์ (์์ ์ง์), ๋ ธ๋์ ๊ฒฝ๊ณ ํ์ (๋ถ๋ถ ์ง์), ๋นจ๊ฐ์ ์ญ์ ํ์ (๋ฏธ์ง์)์ ๊ฐ์ ๊ธฐํธ๋ก ํํ๋ฉ๋๋ค.
๋ค์์ ๊ฐ๋จํ ์์์ ๋๋ค:
| ๋ธ๋ผ์ฐ์ | ๋ฒ์ | ES6 ํด๋์ค | Fetch API | Flexbox |
|---|---|---|---|---|
| Chrome | 115 | ✔ | ✔ | ✔ |
| Firefox | 110 | ✔ | ✔ | ✔ |
| Safari | 16 | ✔ | ✔ | ✔ |
| Internet Explorer | 11 | ❌ | ❌ | ❌ |
์ฐธ๊ณ : ✔๋ ์ฒดํฌ ํ์(์์ ์ง์)๋ฅผ, ❌๋ 'X' ํ์(๋ฏธ์ง์)๋ฅผ ๋ํ๋ ๋๋ค. ์ ์ ํ HTML ๋ฌธ์ ์ํฐํฐ๋ฅผ ์ฌ์ฉํ๋ฉด ๋ค์ํ ๋ฌธ์ ์ธ์ฝ๋ฉ์์ ์ฌ๋ฐ๋ฅด๊ฒ ํ์๋ฉ๋๋ค.
์๋ ํธํ์ฑ ๋งคํธ๋ฆญ์ค ๊ด๋ฆฌ์ ์ด๋ ค์
๋ธ๋ผ์ฐ์ ํธํ์ฑ ๋งคํธ๋ฆญ์ค๋ฅผ ์๋์ผ๋ก ์์ฑํ๊ณ ์ ์งํ๋ ๋ฐ์๋ ๋ช ๊ฐ์ง ์ด๋ ค์์ด ๋ฐ๋ฆ ๋๋ค:
- ์๊ฐ ์๋ชจ์ : ๋ค์ํ ๋ธ๋ผ์ฐ์ ์ ๋ฒ์ ์ ๊ฑธ์ณ ๊ธฐ๋ฅ ์ง์์ ์กฐ์ฌํ๋ ๋ฐ ์๋นํ ๋ ธ๋ ฅ์ด ํ์ํฉ๋๋ค.
- ์ค๋ฅ ๋ฐ์ ๊ฐ๋ฅ์ฑ: ์๋ ๋ฐ์ดํฐ ์ ๋ ฅ์ ๋ถ์ ํ์ฑ์ ์ด๋ํ ์ ์์ผ๋ฉฐ, ์ด๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ํธํ์ฑ ๋ฌธ์ ๋ก ์ด์ด์ง ์ ์์ต๋๋ค.
- ์ ์ง ๊ด๋ฆฌ์ ์ด๋ ค์: ๋ธ๋ผ์ฐ์ ๋ ์๋ก์ด ๋ฒ์ ๊ณผ ๊ธฐ๋ฅ์ด ์ ๊ธฐ์ ์ผ๋ก ์ถ์๋๋ฉด์ ๋์์์ด ์งํํฉ๋๋ค. ๋งคํธ๋ฆญ์ค๋ฅผ ์ต์ ์ํ๋ก ์ ์งํ๋ ค๋ฉด ์ง์์ ์ธ ๊ด๋ฆฌ๊ฐ ํ์ํฉ๋๋ค.
- ์ค์๊ฐ ๋ฐ์ดํฐ ๋ถ์กฑ: ์๋ ๋งคํธ๋ฆญ์ค๋ ์ผ๋ฐ์ ์ผ๋ก ํน์ ์์ ์ ๊ธฐ๋ฅ ์ง์์ ๋ํ ์ ์ ์ธ ์ค๋ ์ท์ ๋๋ค. ์ต์ ๋ธ๋ผ์ฐ์ ์ ๋ฐ์ดํธ๋ ๋ฒ๊ทธ ์์ ์ ๋ฐ์ํ์ง ๋ชปํฉ๋๋ค.
- ํ์ฅ์ฑ ๋ฌธ์ : ์ ํ๋ฆฌ์ผ์ด์ ์ด ์ฑ์ฅํ๊ณ ๋ ๋ง์ ๊ธฐ๋ฅ์ ํตํฉํจ์ ๋ฐ๋ผ ๋งคํธ๋ฆญ์ค์ ๋ณต์ก์ฑ์ด ์ฆ๊ฐํ์ฌ ์๋ ๊ด๋ฆฌ๊ฐ ๋์ฑ ์ด๋ ค์์ง๋๋ค.
๋ธ๋ผ์ฐ์ ํธํ์ฑ ๋งคํธ๋ฆญ์ค ์์ฑ ์๋ํ
์๋ํ๋ ์๋ ํธํ์ฑ ๋งคํธ๋ฆญ์ค ๊ด๋ฆฌ์ ์ด๋ ค์์ ๊ทน๋ณตํ๋ ์ด์ ์ ๋๋ค. ์ด ํ๋ก์ธ์ค๋ฅผ ์๋ํํ๋ ๋ฐ ๋์์ด ๋๋ ๋ช ๊ฐ์ง ๋๊ตฌ์ ๊ธฐ์ ์ด ์์ต๋๋ค:
1. Modernizr๋ฅผ ์ฌ์ฉํ ๊ธฐ๋ฅ ๊ฐ์ง
Modernizr๋ ์ฌ์ฉ์ ๋ธ๋ผ์ฐ์ ์์ ๋ค์ํ HTML5 ๋ฐ CSS3 ๊ธฐ๋ฅ์ ์ฌ์ฉ ๊ฐ๋ฅ ์ฌ๋ถ๋ฅผ ๊ฐ์งํ๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์
๋๋ค. ๊ธฐ๋ฅ ์ง์ ์ฌ๋ถ์ ๋ฐ๋ผ <html> ์์์ ํด๋์ค๋ฅผ ์ถ๊ฐํ์ฌ, ๋ธ๋ผ์ฐ์ ์ ๊ธฐ๋ฅ์ ๋ฐ๋ผ ์กฐ๊ฑด๋ถ CSS ์คํ์ผ์ ์ ์ฉํ๊ฑฐ๋ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ฅผ ์คํํ ์ ์์ต๋๋ค.
์์:
<!DOCTYPE html>
<html class="no-js"> <!-- `no-js`๋ ๊ธฐ๋ณธ๊ฐ์ผ๋ก ์ถ๊ฐ๋ฉ๋๋ค -->
<head>
<meta charset="utf-8">
<title>Modernizr ์์ </title>
<script src="modernizr.js"></script>
</head>
<body>
<div id="myElement"></div>
<script>
if (Modernizr.websockets) {
// ์น์์ผ ์ฌ์ฉ
console.log("์น์์ผ์ด ์ง์๋ฉ๋๋ค!");
} else {
// ๋ค๋ฅธ ๊ธฐ์ ๋ก ๋์ฒด(fallback)
console.log("์น์์ผ์ด ์ง์๋์ง ์์ต๋๋ค. ๋์ฒด ๊ธฐ๋ฅ์ ์ฌ์ฉํฉ๋๋ค.");
}
</script>
<style>
.no-flexbox #myElement {
float: left; /* Flexbox๊ฐ ์๋ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ํ ๋์ฒด ์คํ์ผ ์ ์ฉ */
}
.flexbox #myElement {
display: flex; /* ์ง์๋๋ ๊ฒฝ์ฐ Flexbox ์ฌ์ฉ */
}
</style>
</body>
</html>
์ด ์์ ์์ Modernizr๋ ๋ธ๋ผ์ฐ์ ๊ฐ ์น์์ผ๊ณผ Flexbox๋ฅผ ์ง์ํ๋์ง ๊ฐ์งํฉ๋๋ค. ๊ทธ ๊ฒฐ๊ณผ์ ๋ฐ๋ผ ๋ค๋ฅธ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋ ๊ฒฝ๋ก๋ฅผ ์คํํ๊ฑฐ๋ ๋ค๋ฅธ CSS ์คํ์ผ์ ์ ์ฉํ ์ ์์ต๋๋ค. ์ด ์ ๊ทผ ๋ฐฉ์์ ๊ตฌํ ๋ธ๋ผ์ฐ์ ์์ ์ ์์ ๊ธฐ๋ฅ ์ ํ(graceful degradation)๋ฅผ ์ ๊ณตํ๋ ๋ฐ ํนํ ์ ์ฉํฉ๋๋ค.
Modernizr์ ์ฅ์ :
- ๊ฐ๋จํ๊ณ ์ฌ์ฉํ๊ธฐ ์ฌ์: Modernizr๋ ๊ธฐ๋ฅ ์ง์์ ๊ฐ์งํ๊ธฐ ์ํ ๊ฐ๋จํ API๋ฅผ ์ ๊ณตํฉ๋๋ค.
- ํ์ฅ ๊ฐ๋ฅ: ํน์ ์๊ตฌ ์ฌํญ์ ์ถฉ์กฑํ๊ธฐ ์ํด ์ฌ์ฉ์ ์ ์ ๊ธฐ๋ฅ ๊ฐ์ง ํ ์คํธ๋ฅผ ๋ง๋ค ์ ์์ต๋๋ค.
- ๋๋ฆฌ ์ฑํ๋จ: Modernizr๋ ๋๊ท๋ชจ ์ปค๋ฎค๋ํฐ์ ๊ด๋ฒ์ํ ๋ฌธ์๋ฅผ ๊ฐ์ถ ์ ์ ๋ฆฝ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋๋ค.
Modernizr์ ํ๊ณ:
- ์๋ฐ์คํฌ๋ฆฝํธ์ ์์กด: ๊ธฐ๋ฅ ๊ฐ์ง๋ฅผ ์ํด์๋ ๋ธ๋ผ์ฐ์ ์์ ์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ํ์ฑํ๋์ด ์์ด์ผ ํฉ๋๋ค.
- ๋ชจ๋ ๊ฒฝ์ฐ์ ์ ํํ์ง ์์ ์ ์์: ์ผ๋ถ ๊ธฐ๋ฅ์ ํน์ ๋ธ๋ผ์ฐ์ ์์ ๋ฒ๊ทธ๋ ์ ํ์ด ์์์๋ ๋ถ๊ตฌํ๊ณ ์ง์๋๋ ๊ฒ์ผ๋ก ๊ฐ์ง๋ ์ ์์ต๋๋ค.
2. ๊ธฐ๋ฅ ๋ฐ์ดํฐ์ `caniuse-api` ์ฌ์ฉํ๊ธฐ
Can I Use๋ ํ๋ก ํธ์๋ ์น ๊ธฐ์ ์ ๋ํ ์ต์ ๋ธ๋ผ์ฐ์ ์ง์ ํ๋ฅผ ์ ๊ณตํ๋ ์น์ฌ์ดํธ์ ๋๋ค. `caniuse-api` ํจํค์ง๋ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ ๋น๋ ํ๋ก์ธ์ค ๋ด์์ ์ด ๋ฐ์ดํฐ์ ํ๋ก๊ทธ๋๋ฐ ๋ฐฉ์์ผ๋ก ์ ๊ทผํ ์ ์๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํฉ๋๋ค.
์์ (Node.js):
const caniuse = require('caniuse-api');
try {
const supportData = caniuse.getSupport('promises');
console.log(supportData);
// ํน์ ๋ธ๋ผ์ฐ์ ์ง์ ์ฌ๋ถ ํ์ธ
const chromeSupport = supportData.Chrome;
console.log('Chrome ์ง์ ์ฌ๋ถ:', chromeSupport);
if (chromeSupport && chromeSupport.y === 'y') {
console.log('Promise๋ Chrome์์ ์์ ํ ์ง์๋ฉ๋๋ค!');
} else {
console.log('Promise๋ Chrome์์ ์์ ํ ์ง์๋์ง ์์ต๋๋ค.');
}
} catch (error) {
console.error('Can I Use ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ ์ค๋ฅ:', error);
}
์ด ์์ ๋ `caniuse-api`๋ฅผ ์ฌ์ฉํ์ฌ Promise ์ง์์ ๋ํ ๋ฐ์ดํฐ๋ฅผ ๊ฒ์ํ ๋ค์ Chrome ๋ธ๋ผ์ฐ์ ์ ์ง์ ์์ค์ ํ์ธํฉ๋๋ค. `y` ํ๋๊ทธ๋ ์์ ํ ์ง์์ ๋ํ๋ ๋๋ค.
`caniuse-api`์ ์ฅ์ :
- ํฌ๊ด์ ์ธ ๋ฐ์ดํฐ: ๋ฐฉ๋ํ ๋ธ๋ผ์ฐ์ ์ง์ ์ ๋ณด ๋ฐ์ดํฐ๋ฒ ์ด์ค์ ์ ๊ทผํ ์ ์์ต๋๋ค.
- ํ๋ก๊ทธ๋๋ฐ ๋ฐฉ์ ์ ๊ทผ: Can I Use ๋ฐ์ดํฐ๋ฅผ ๋น๋ ๋๊ตฌ๋ ํ ์คํธ ํ๋ ์์ํฌ์ ์ง์ ํตํฉํ ์ ์์ต๋๋ค.
- ์ต์ ์ ๋ณด: ๋ฐ์ดํฐ๋ ์ต์ ๋ธ๋ผ์ฐ์ ๋ฆด๋ฆฌ์ค๋ฅผ ๋ฐ์ํ์ฌ ์ ๊ธฐ์ ์ผ๋ก ์ ๋ฐ์ดํธ๋ฉ๋๋ค.
`caniuse-api`์ ํ๊ณ:
- ๋น๋ ํ๋ก์ธ์ค ํ์: ์ผ๋ฐ์ ์ผ๋ก ๋น๋ ํ๋ก์ธ์ค์ ์ผ๋ถ๋ก Node.js ํ๊ฒฝ์์ ์ฌ์ฉ๋ฉ๋๋ค.
- ๋ฐ์ดํฐ ํด์: Can I Use ๋ฐ์ดํฐ ํ์์ ์ดํดํด์ผ ํฉ๋๋ค.
3. BrowserStack ๋ฐ ์ ์ฌ ํ ์คํธ ํ๋ซํผ
BrowserStack, Sauce Labs, CrossBrowserTesting๊ณผ ๊ฐ์ ํ๋ซํผ์ ์๋ํ๋ ํ ์คํธ๋ฅผ ์ํด ๋ค์ํ ์ค์ ๋ธ๋ผ์ฐ์ ์ ๊ธฐ๊ธฐ์ ๋ํ ์ ๊ทผ์ ์ ๊ณตํฉ๋๋ค. ์ด๋ฌํ ํ๋ซํผ์ ์ฌ์ฉํ์ฌ ๋ค์ํ ๋ธ๋ผ์ฐ์ /๋ฒ์ ์กฐํฉ์์ ์ ํ๋ฆฌ์ผ์ด์ ์ ์คํํ๊ณ ํธํ์ฑ ๋ณด๊ณ ์๋ฅผ ์๋์ผ๋ก ์์ฑํ ์ ์์ต๋๋ค.
์์ ํ๋ฆ:
- ์๋ํ๋ ํ ์คํธ ์์ฑ: Selenium, Cypress ๋๋ Puppeteer์ ๊ฐ์ ํ ์คํธ ํ๋ ์์ํฌ๋ฅผ ์ฌ์ฉํ์ฌ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ธฐ๋ฅ์ ์คํํ๋ ์๋ํ๋ ํ ์คํธ๋ฅผ ๋ง๋ญ๋๋ค.
- ํ ์คํธ ํ๊ฒฝ ๊ตฌ์ฑ: ํ ์คํธํ๋ ค๋ ๋ธ๋ผ์ฐ์ ์ ๊ธฐ๊ธฐ๋ฅผ ์ง์ ํฉ๋๋ค.
- ํ ์คํธ ์คํ: ํ ์คํธ ํ๋ซํผ์ ์ง์ ๋ ํ๊ฒฝ์์ ํ ์คํธ๋ฅผ ์คํํ๊ณ ์คํฌ๋ฆฐ์ท, ๋น๋์ค ๋ฐ ๋ก๊ทธ๋ฅผ ์บก์ฒํฉ๋๋ค.
- ๊ฒฐ๊ณผ ๋ถ์: ํ๋ซํผ์ ํ ์คํธ ๊ฒฐ๊ณผ๋ฅผ ์์ฝํ๊ณ ํธํ์ฑ ๋ฌธ์ ๋ฅผ ๊ฐ์กฐํ๋ ๋ณด๊ณ ์๋ฅผ ์์ฑํฉ๋๋ค.
์์ (Selenium์ ์ฌ์ฉํ๋ BrowserStack):
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.remote.DesiredCapabilities;
import org.openqa.selenium.remote.RemoteWebDriver;
import java.net.URL;
public class BrowserStackExample {
public static void main(String[] args) throws Exception {
DesiredCapabilities caps = new DesiredCapabilities();
caps.setCapability("browserName", "Chrome");
caps.setCapability("browserVersion", "latest");
caps.setCapability("os", "Windows");
caps.setCapability("os_version", "10");
caps.setCapability("browserstack.user", "YOUR_BROWSERSTACK_USERNAME");
caps.setCapability("browserstack.key", "YOUR_BROWSERSTACK_ACCESS_KEY");
WebDriver driver = new RemoteWebDriver(new URL("https://hub-cloud.browserstack.com/wd/hub"), caps);
driver.get("https://www.example.com");
System.out.println("ํ์ด์ง ์ ๋ชฉ: " + driver.getTitle());
driver.quit();
}
}
์ด Java ์์ ๋ Windows 10์ Chrome์ ์ฌ์ฉํ์ฌ BrowserStack์ ํด๋ผ์ฐ๋ ์ธํ๋ผ์์ ํ ์คํธ๋ฅผ ์คํํ๋๋ก Selenium์ ๊ตฌ์ฑํ๋ ๋ฐฉ๋ฒ์ ๋ณด์ฌ์ค๋๋ค. ํ๋ ์ด์คํ๋ ๊ฐ์ ์์ ์ BrowserStack ์๊ฒฉ ์ฆ๋ช ์ผ๋ก ๋ฐ๊พธ์ญ์์ค. ํ ์คํธ๋ฅผ ์คํํ ํ BrowserStack์ ์์ธํ ๋ณด๊ณ ์์ ๋๋ฒ๊น ์ ๋ณด๋ฅผ ์ ๊ณตํฉ๋๋ค.
BrowserStack ๋ฐ ์ ์ฌ ํ๋ซํผ์ ์ฅ์ :
- ์ค์ ๋ธ๋ผ์ฐ์ ํ ์คํธ: ์ค์ ๋ธ๋ผ์ฐ์ ์ ๊ธฐ๊ธฐ์์ ์ ํ๋ฆฌ์ผ์ด์ ์ ํ ์คํธํ์ฌ ์ ํํ ๊ฒฐ๊ณผ๋ฅผ ๋ณด์ฅํฉ๋๋ค.
- ํ์ฅ์ฑ: ์ฌ๋ฌ ํ๊ฒฝ์์ ๋ณ๋ ฌ๋ก ํ ์คํธ๋ฅผ ์คํํ์ฌ ํ ์คํธ ์๊ฐ์ ํฌ๊ฒ ๋จ์ถํฉ๋๋ค.
- ํฌ๊ด์ ์ธ ๋ณด๊ณ : ์คํฌ๋ฆฐ์ท, ๋น๋์ค, ๋ก๊ทธ๊ฐ ํฌํจ๋ ์์ธ ๋ณด๊ณ ์๋ฅผ ์์ฑํ์ฌ ํธํ์ฑ ๋ฌธ์ ๋ฅผ ์ฝ๊ฒ ์๋ณํ๊ณ ์์ ํ ์ ์์ต๋๋ค.
- CI/CD ํตํฉ: ์ง์์ ์ธ ํตํฉ ๋ฐ ์ง์์ ์ธ ์ ๋ฌ ํ์ดํ๋ผ์ธ์ ํ ์คํธ๋ฅผ ํตํฉํฉ๋๋ค.
BrowserStack ๋ฐ ์ ์ฌ ํ๋ซํผ์ ํ๊ณ:
- ๋น์ฉ: ์ด๋ฌํ ํ๋ซํผ์ ์ผ๋ฐ์ ์ผ๋ก ๊ตฌ๋ ๋ฃ๊ฐ ํ์ํฉ๋๋ค.
- ํ ์คํธ ์ ์ง ๊ด๋ฆฌ: ์๋ํ๋ ํ ์คํธ๋ ์ ํ์ฑ๊ณผ ์ ๋ขฐ์ฑ์ ์ ์งํ๊ธฐ ์ํด ์ง์์ ์ธ ๊ด๋ฆฌ๊ฐ ํ์ํฉ๋๋ค.
4. ํด๋ฆฌํ๊ณผ ์ฌ(Shim)
ํด๋ฆฌํ(Polyfill)๊ณผ ์ฌ(Shim)์ ๊ตฌํ ๋ธ๋ผ์ฐ์ ์์ ๋๋ฝ๋ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ ์ฝ๋ ์กฐ๊ฐ์
๋๋ค. ํด๋ฆฌํ์ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํ์ฌ ์ต์ ๊ธฐ๋ฅ์ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ ๋ฐ๋ฉด, ์ฌ์ ๋ค๋ฅธ ํ๊ฒฝ ๊ฐ์ ํธํ์ฑ์ ์ ๊ณตํ๋ ๋ชจ๋ ์ฝ๋๋ฅผ ๊ฐ๋ฆฌํค๋ ๋ ๋์ ์ฉ์ด์
๋๋ค. ์๋ฅผ ๋ค์ด, Internet Explorer 11์์ Fetch API๋ฅผ ์ง์ํ๊ธฐ ์ํด ํด๋ฆฌํ์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
์์ (Fetch API ํด๋ฆฌํ):
<!-- fetch ํด๋ฆฌํ ์กฐ๊ฑด๋ถ ๋ก๋ฉ -->
<script>
if (!('fetch' in window)) {
var script = document.createElement('script');
script.src = 'https://polyfill.io/v3/polyfill.min.js?features=fetch';
document.head.appendChild(script);
}
</script>
์ด ์ฝ๋ ์กฐ๊ฐ์ ๋ธ๋ผ์ฐ์ ์์ fetch API๋ฅผ ์ฌ์ฉํ ์ ์๋์ง ํ์ธํฉ๋๋ค. ์ฌ์ฉํ ์ ์๋ ๊ฒฝ์ฐ, ๋ค์ํ ์๋ฐ์คํฌ๋ฆฝํธ ๊ธฐ๋ฅ์ ๋ํ ํด๋ฆฌํ์ ์ ๊ณตํ๋ ์๋น์ค์ธ polyfill.io์์ ๋์ ์ผ๋ก ํด๋ฆฌํ์ ๋ก๋ํฉ๋๋ค.
ํด๋ฆฌํ๊ณผ ์ฌ์ ์ฅ์ :
- ๊ตฌํ ๋ธ๋ผ์ฐ์ ์์ ์ต์ ๊ธฐ๋ฅ ํ์ฑํ: ๊ตฌํ ๋ธ๋ผ์ฐ์ ์์ ํธํ์ฑ์ ํฌ์ํ์ง ์๊ณ ์ต์ ์๋ฐ์คํฌ๋ฆฝํธ ๊ธฐ๋ฅ์ ์ฌ์ฉํ ์ ์๊ฒ ํด์ค๋๋ค.
- ์ฌ์ฉ์ ๊ฒฝํ ๊ฐ์ : ๊ตฌํ ๋ธ๋ผ์ฐ์ ์ฌ์ฉ์๊ฐ ์ผ๊ด๋๊ณ ๊ธฐ๋ฅ์ ์ธ ๊ฒฝํ์ ํ ์ ์๋๋ก ๋ณด์ฅํฉ๋๋ค.
ํด๋ฆฌํ๊ณผ ์ฌ์ ํ๊ณ:
- ์ฑ๋ฅ ์ค๋ฒํค๋: ํด๋ฆฌํ์ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ ์ฒด ๋ค์ด๋ก๋ ํฌ๊ธฐ๋ฅผ ์ฆ๊ฐ์ํค๊ณ ์ฑ๋ฅ์ ์ํฅ์ ์ค ์ ์์ต๋๋ค.
- ํธํ์ฑ ๋ฌธ์ : ํด๋ฆฌํ์ด ๋ชจ๋ ๊ฒฝ์ฐ์ ๋ค์ดํฐ๋ธ ๊ธฐ๋ฅ์ ๋์์ ์๋ฒฝํ๊ฒ ๋ณต์ ํ์ง ๋ชปํ ์ ์์ต๋๋ค.
5. ๋ธ๋ผ์ฐ์ ๊ฐ์ง๋ฅผ ์ํ ์ฌ์ฉ์ ์ ์ ์คํฌ๋ฆฝํธ
์ ์ฌ์ ์ธ ๋ถ์ ํ์ฑ๊ณผ ์ ์ง ๊ด๋ฆฌ ๋ถ๋ด ๋๋ฌธ์ ํญ์ ๊ถ์ฅ๋๋ ๊ฒ์ ์๋์ง๋ง, ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํ์ฌ ์ฌ์ฉ์๊ฐ ์ฌ์ฉ ์ค์ธ ๋ธ๋ผ์ฐ์ ์ ๋ฒ์ ์ ๊ฐ์งํ ์ ์์ต๋๋ค.
์์:
function getBrowserInfo() {
let browser = "";
let version = "";
if (navigator.userAgent.indexOf("Chrome") != -1) {
browser = "Chrome";
version = navigator.userAgent.substring(navigator.userAgent.indexOf("Chrome") + 7).split(" ")[0];
} else if (navigator.userAgent.indexOf("Firefox") != -1) {
browser = "Firefox";
version = navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox") + 8).split(" ")[0];
} else if (navigator.userAgent.indexOf("Safari") != -1) {
browser = "Safari";
version = navigator.userAgent.substring(navigator.userAgent.indexOf("Safari") + 7).split(" ")[0];
} else if (navigator.userAgent.indexOf("Edge") != -1) {
browser = "Edge";
version = navigator.userAgent.substring(navigator.userAgent.indexOf("Edge") + 5).split(" ")[0];
} else if (navigator.userAgent.indexOf("MSIE") != -1 || !!document.documentMode == true) { // IE 10 ์ด์์ธ ๊ฒฝ์ฐ
browser = "IE";
version = document.documentMode;
} else {
browser = "Unknown";
version = "Unknown";
}
return {browser: browser, version: version};
}
let browserInfo = getBrowserInfo();
console.log("๋ธ๋ผ์ฐ์ : " + browserInfo.browser + ", ๋ฒ์ : " + browserInfo.version);
// ์คํ์ผ์ํธ๋ฅผ ์กฐ๊ฑด๋ถ๋ก ๋ก๋ํ๋ ์ฌ์ฉ ์
if (browserInfo.browser === 'IE' && parseInt(browserInfo.version) <= 11) {
let link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '/css/ie-fallback.css';
document.head.appendChild(link);
}
์ด ํจ์๋ ์ฌ์ฉ์ ์์ด์ ํธ ๋ฌธ์์ด์ ํ์ฑํ์ฌ ๋ธ๋ผ์ฐ์ ์ ๋ฒ์ ์ ๊ฒฐ์ ํฉ๋๋ค. ๊ทธ๋ฐ ๋ค์ ๊ตฌํ ๋ฒ์ ์ Internet Explorer์ ๋ํด ์กฐ๊ฑด๋ถ๋ก ์คํ์ผ์ํธ๋ฅผ ๋ก๋ํ๋ ๋ฐฉ๋ฒ์ ๋ณด์ฌ์ค๋๋ค.
์ฌ์ฉ์ ์ ์ ๋ธ๋ผ์ฐ์ ๊ฐ์ง์ ์ฅ์ :
- ์ธ๋ถํ๋ ์ ์ด: ํน์ ๋ธ๋ผ์ฐ์ /๋ฒ์ ์กฐํฉ์ ๋ฐ๋ผ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋์์ ๋ง์ถค ์ค์ ํ ์ ์์ต๋๋ค.
์ฌ์ฉ์ ์ ์ ๋ธ๋ผ์ฐ์ ๊ฐ์ง์ ํ๊ณ:
- ์ฌ์ฉ์ ์์ด์ ํธ ์ค๋ํ์ ์ ๋ขฐํ ์ ์์: ์ฌ์ฉ์ ์์ด์ ํธ ๋ฌธ์์ด์ ์ฝ๊ฒ ์์กฐ๋๊ฑฐ๋ ์์ ๋ ์ ์์ด ๋ถ์ ํํ ๊ฒฐ๊ณผ๋ฅผ ์ด๋ํ ์ ์์ต๋๋ค.
- ์ ์ง ๊ด๋ฆฌ ๋ถ๋ด: ์๋ก์ด ๋ธ๋ผ์ฐ์ ์ ๋ฒ์ ์ ๋ฐ๋ผ์ก๊ธฐ ์ํด ์ง์์ ์ธ ์ ๋ฐ์ดํธ๊ฐ ํ์ํฉ๋๋ค.
- ์ผ๋ฐ์ ์ผ๋ก ๊ธฐ๋ฅ ๊ฐ์ง๊ฐ ์ ํธ๋จ: ๊ธฐ๋ฅ ๊ฐ์ง์ ์์กดํ๋ ๊ฒ์ด ์ผ๋ฐ์ ์ผ๋ก ๋ ๊ฒฌ๊ณ ํ๊ณ ์ ๋ขฐํ ์ ์๋ ์ ๊ทผ ๋ฐฉ์์ ๋๋ค.
์คํ ๊ฐ๋ฅํ ํต์ฐฐ๋ ฅ ๋ฐ ๋ชจ๋ฒ ์ฌ๋ก
๋ธ๋ผ์ฐ์ ํธํ์ฑ ๊ด๋ฆฌ๋ฅผ ์ํ ๋ช ๊ฐ์ง ์คํ ๊ฐ๋ฅํ ํต์ฐฐ๋ ฅ๊ณผ ๋ชจ๋ฒ ์ฌ๋ก๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ๋์ ๋ธ๋ผ์ฐ์ ์ฐ์ ์์ ์ง์ : ๋์ ๊ณ ๊ฐ์ด ๊ฐ์ฅ ์ผ๋ฐ์ ์ผ๋ก ์ฌ์ฉํ๋ ๋ธ๋ผ์ฐ์ ์ ๋ฒ์ ์ ํ์ ํ์ญ์์ค. ๋ถ์ ๋ฐ์ดํฐ(์: ๊ตฌ๊ธ ์ ๋๋ฆฌํฑ์ค)๋ฅผ ์ฌ์ฉํ์ฌ ์ฐ์ ์์๋ฅผ ์ ํ ๋ธ๋ผ์ฐ์ ๋ฅผ ๊ฒฐ์ ํ์ญ์์ค.
- ์ ์ง์ ํฅ์(Progressive Enhancement): ์ ์ง์ ํฅ์ ๊ธฐ๋ฒ์ ์ฌ์ฉํ์ฌ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ์ฌ ๋ชจ๋ ๋ธ๋ผ์ฐ์ ์์ ๊ธฐ๋ณธ์ ์ธ ์์ค์ ๊ธฐ๋ฅ์ ์ ๊ณตํ๊ณ ์ต์ ๋ธ๋ผ์ฐ์ ์์๋ ์ ์ง์ ์ผ๋ก ๊ฒฝํ์ ํฅ์์ํค๋๋ก ๋ณด์ฅํ์ญ์์ค.
- ์ ์์ ๊ธฐ๋ฅ ์ ํ(Graceful Degradation): ํน์ ๋ธ๋ผ์ฐ์ ์์ ๊ธฐ๋ฅ์ด ์ง์๋์ง ์๋ ๊ฒฝ์ฐ, ๋์ฒด ๊ธฐ๋ฅ์ด๋ ๋์ ์๋ฃจ์ ์ ์ ๊ณตํ์ญ์์ค.
- ์๋ํ๋ ํ ์คํธ๊ฐ ํต์ฌ: ๊ฐ๋ฐ ์ํฌํ๋ก์ฐ์ ์๋ํ๋ ๋ธ๋ผ์ฐ์ ํ ์คํธ๋ฅผ ํตํฉํ์ฌ ํธํ์ฑ ๋ฌธ์ ๋ฅผ ์กฐ๊ธฐ์ ๋ฐ๊ฒฌํ์ญ์์ค.
- ๊ธฐ๋ฅ ํ๋๊ทธ ์ฌ์ฉ: ๊ธฐ๋ฅ ํ๋๊ทธ๋ฅผ ๊ตฌํํ์ฌ ๋ธ๋ผ์ฐ์ ์ง์ ๋๋ ์ฌ์ฉ์ ์ ํธ๋์ ๋ฐ๋ผ ๊ธฐ๋ฅ์ ํ์ฑํํ๊ฑฐ๋ ๋นํ์ฑํํ์ญ์์ค.
- ์์กด์ฑ์ ์ต์ ์ํ๋ก ์ ์ง: ์ต์ ๋ฒ๊ทธ ์์ ๋ฐ ํธํ์ฑ ๊ฐ์ ์ ์ด์ ์ ์ป๊ธฐ ์ํด ์๋ฐ์คํฌ๋ฆฝํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ํ๋ ์์ํฌ๋ฅผ ์ ๊ธฐ์ ์ผ๋ก ์ ๋ฐ์ดํธํ์ญ์์ค.
- ํ๋ก๋์ ํ๊ฒฝ์์ ์ ํ๋ฆฌ์ผ์ด์ ๋ชจ๋ํฐ๋ง: Sentry๋ Bugsnag๊ณผ ๊ฐ์ ์ค๋ฅ ์ถ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ์ค์ ์ฌ์ฉ ํ๊ฒฝ์์ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ค๋ฅ ๋ฐ ํธํ์ฑ ๋ฌธ์ ๋ฅผ ๋ชจ๋ํฐ๋งํ์ญ์์ค.
- ํธํ์ฑ ๋งคํธ๋ฆญ์ค ๋ฌธ์ํ: ์ ํ๋ฆฌ์ผ์ด์ ์ด ์ง์ํ๋ ๋ธ๋ผ์ฐ์ ์ ๋ฒ์ , ๊ทธ๋ฆฌ๊ณ ์๋ ค์ง ํธํ์ฑ ๋ฌธ์ ๋ฅผ ๋ช ํํ๊ฒ ๋ฌธ์ํํ์ญ์์ค.
- ๊ตญ์ ํ ๋ฐ ํ์งํ ๊ณ ๋ ค: ๋ค์ํ ์ธ์ด์ ๋ฌธํ๋ฅผ ์ง์ํ๊ธฐ ์ํด ์ ํ๋ฆฌ์ผ์ด์ ์ด ์ ์ ํ๊ฒ ๊ตญ์ ํ ๋ฐ ํ์งํ๋์๋์ง ํ์ธํ์ญ์์ค. ์ฌ๊ธฐ์๋ ๋ค์ํ ๋ธ๋ผ์ฐ์ ์์ ๋ค๋ฅธ ๋ฌธ์ ์งํฉ๊ณผ ๋ ์ง/์๊ฐ ํ์์ ํ ์คํธํ๋ ๊ฒ์ด ํฌํจ๋ ์ ์์ต๋๋ค.
- ์ ๋ต์ ์ ๊ธฐ์ ์ผ๋ก ๊ฒํ ํ๊ณ ์ ๋ฐ์ดํธ: ๋ธ๋ผ์ฐ์ ํ๊ฒฝ์ ๋์์์ด ์งํํฉ๋๋ค. ๋ธ๋ผ์ฐ์ ํธํ์ฑ ์ ๋ต์ ์ ๊ธฐ์ ์ผ๋ก ๊ฒํ ํ๊ณ ํ์์ ๋ฐ๋ผ ์กฐ์ ํ์ญ์์ค.
์ฌ๋ฐ๋ฅธ ์ ๊ทผ ๋ฐฉ์ ์ ํํ๊ธฐ
๋ธ๋ผ์ฐ์ ํธํ์ฑ ๋งคํธ๋ฆญ์ค ์์ฑ ๋ฐ ์๋ฐ์คํฌ๋ฆฝํธ ๊ธฐ๋ฅ ์ง์ ์ถ์ ์ ์๋ํํ๋ ์ต์์ ์ ๊ทผ ๋ฐฉ์์ ํน์ ์๊ตฌ ์ฌํญ๊ณผ ๋ฆฌ์์ค์ ๋ฐ๋ผ ๋ค๋ฆ ๋๋ค.
- ์๊ท๋ชจ ํ๋ก์ ํธ: Modernizr์ ํด๋ฆฌํ๋ง์ผ๋ก๋ ์ ํ๋ ๋ฆฌ์์ค๋ฅผ ๊ฐ์ง ์๊ท๋ชจ ํ๋ก์ ํธ์ ๊ฒฝ์ฐ ์ถฉ๋ถํ ์ ์์ต๋๋ค.
- ์ค๊ท๋ชจ ํ๋ก์ ํธ: ์ค๊ท๋ชจ ํ๋ก์ ํธ์ ๊ฒฝ์ฐ BrowserStack์ด๋ Sauce Labs๊ฐ ๋ ํฌ๊ด์ ์ธ ํ ์คํธ ์๋ฃจ์ ์ ์ ๊ณตํ ์ ์์ต๋๋ค.
- ๋๊ท๋ชจ ์ํฐํ๋ผ์ด์ฆ ์ ํ๋ฆฌ์ผ์ด์ : ๋ณต์กํ ํธํ์ฑ ์๊ตฌ ์ฌํญ์ด ์๋ ๋๊ท๋ชจ ์ํฐํ๋ผ์ด์ฆ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฒฝ์ฐ Modernizr, BrowserStack/Sauce Labs ๋ฐ ๋ธ๋ผ์ฐ์ ๊ฐ์ง๋ฅผ ์ํ ์ฌ์ฉ์ ์ ์ ์คํฌ๋ฆฝํธ์ ์กฐํฉ์ด ํ์ํ ์ ์์ต๋๋ค.
๊ฒฐ๋ก
๋ธ๋ผ์ฐ์ ํธํ์ฑ์ ๋ณด์ฅํ๋ ๊ฒ์ ์ ์ธ๊ณ ์ฌ์ฉ์๋ฅผ ์ํ ์ฑ๊ณต์ ์ธ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ ๋ฐ ๋งค์ฐ ์ค์ํฉ๋๋ค. ๋ธ๋ผ์ฐ์ ํธํ์ฑ ๋งคํธ๋ฆญ์ค ์์ฑ ๋ฐ ์๋ฐ์คํฌ๋ฆฝํธ ๊ธฐ๋ฅ ์ง์ ์ถ์ ์ ์๋ํํจ์ผ๋ก์จ ์๊ฐ์ ์ ์ฝํ๊ณ ์ค๋ฅ๋ฅผ ์ค์ด๋ฉฐ, ์ ํ๋ฆฌ์ผ์ด์ ์ด ๊ด๋ฒ์ํ ๋ธ๋ผ์ฐ์ ์ ๊ธฐ๊ธฐ์์ ์๋ฒฝํ๊ฒ ์๋ํ๋๋ก ๋ณด์ฅํ ์ ์์ต๋๋ค. ์ด ๊ฐ์ด๋์์ ๋ ผ์๋ ๋๊ตฌ์ ๊ธฐ์ ์ ํ์ฉํ์ฌ ์ ์ธ๊ณ ์ฌ์ฉ์๋ฅผ ์ํ ๊ฒฌ๊ณ ํ๊ณ ์ ๊ทผ์ฑ ๋์ผ๋ฉฐ ์ฌ์ฉ์ ์นํ์ ์ธ ์น ๊ฒฝํ์ ๋ง๋์ญ์์ค. ๋ธ๋ผ์ฐ์ ํธํ์ฑ์ ์ฌ์ ์ ํด๊ฒฐํจ์ผ๋ก์จ ์๋ก์ด ๊ธฐํ๋ฅผ ์ด๊ณ , ๋๋ฌ ๋ฒ์๋ฅผ ํ์ฅํ๋ฉฐ, ๋ ๊ฐ๋ ฅํ ์จ๋ผ์ธ ์ ์ง๋ฅผ ๊ตฌ์ถํ ์ ์์ต๋๋ค.