๐ŸŒ ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง•(Cross Browsing/Cross Browser Testing)

Boriยท2023๋…„ 4์›” 4์ผ
0

์–ด์จŒ๋“  ๊ณต๋ถ€

๋ชฉ๋ก ๋ณด๊ธฐ
13/41

ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง•์ด๋ž€?

  • ๊ฐ€๋Šฅํ•œ ๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ž‘๋™ํ•˜๋„๋ก ์ž‘์—…ํ•˜๋Š” ๊ฒƒ์œผ๋กœ ์›น ํ˜ธํ™˜์„ฑ์„ ๋†’์ด๋Š” ๊ฒƒ์„ ์˜๋ฏธ
  • ํ‘œ์ค€ ์›น ๊ธฐ์ˆ ์„ ์ฑ„์šฉํ•˜์—ฌ ๋‹ค๋ฅธ ๊ธฐ์ข… ํ˜น์€ ํ”Œ๋žซํผ์— ๋”ฐ๋ผ ๋‹ฌ๋ฆฌ ๊ตฌํ˜„๋˜๋Š” ๊ธฐ์ˆ ์„ ๋น„์Šทํ•˜๊ฒŒ ๋งŒ๋“ฆ๊ณผ ๋™์‹œ์— ์–ด๋Š ํ•œ ์ชฝ์— ์ตœ์ ํ™”๋˜์–ด ์น˜์šฐ์น˜์ง€ ์•Š๋„๋ก ๊ณตํ†ต ์š”์†Œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์›น ํŽ˜์ด์ง€๋ฅผ ์ œ์ž‘ํ•˜๋Š” ๊ธฐ๋ฒ•

์›น ํŽ˜์ด์ง€์˜ ์ƒํ˜ธ ํ˜ธํ™˜์„ฑ(Cross Browsing) ๊ตฌ์ถ•์— ๋Œ€ํ•œ ์˜คํ•ด

  • ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง•์ด๋ž€ ๋ชจ๋“  ์›น๋ธŒ๋ผ์šฐ์ €์—์„œ 100% ๋˜‘๊ฐ™์ด ๋ณด์ด๋„๋ก ๋งŒ๋“œ๋Š” ๊ฒƒ์ด๋ผ๋Š” ์ƒ๊ฐ
    โ‡’ ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง•์€ ๋™์ผ์„ฑ์ด ์•„๋‹Œ ๋™๋“ฑ์„ฑ(๋“ฑ๊ฐ€์„ฑ) ์„ ์˜๋ฏธ
  • OS๊ฐ€ ๋‹ค๋ฅด๊ณ , HTML์„ ๋ Œ๋”๋งํ•˜๋Š” ์—”์ง„์ด ๋‹ค๋ฅด๊ธฐ ๋•Œ๋ฌธ์— ๋ชจ๋“  ์›น๋ธŒ๋ผ์šฐ์ €์—์„œ 100% ๋˜‘๊ฐ™์ด ๋ณด์ด๊ฒŒ ํ•˜๋Š” ๊ฒƒ์€ ๊ฐ€๋Šฅํ•˜์ง€ ์•Š๋‹ค.
  • ์ง€์›ํ•  ์ˆ˜ ์—†๋Š” ๋‹ค๋ฅธ ์›น๋ธŒ๋ผ์šฐ์ €๋ฅผ ์œ„ํ•œ ์žฅ์น˜๋ฅผ ๊ตฌํ˜„ํ•˜์—ฌ ๋ชจ๋“  ์›น๋ธŒ๋ผ์šฐ์ € ์‚ฌ์šฉ์ž๊ฐ€ ๋ฐฉ๋ฌธํ–ˆ์„ ๋•Œ ์ •๋ณด๋กœ์„œ์˜ ์†Œ์™ธ๊ฐ์„ ๋Š๋ผ์ง€ ์•Š๋„๋ก ํ•˜๋Š” ๋ฐฉ๋ฒ•๋ก ์  ๊ฐ€์ด๋“œ๋ฅผ ์˜๋ฏธ
  • ์›น ์„œ๋น„์Šค์˜ ๋ชจ๋“  ์ž ์žฌ ์‚ฌ์šฉ์ž๋“ค์ด ์‚ฌ์ดํŠธ์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์–ด์•ผ ํ•œ๋‹ค๋Š” ๊ฒƒ์€ ๋งค์šฐ ์ค‘์š”ํ•œ ์š”์†Œ

ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง•์ด ํ•„์š”ํ•œ ์ด์œ ?

  • ๋ธŒ๋ผ์šฐ์ €๋งˆ๋‹ค *๋ Œ๋”๋ง ์—”์ง„์ด ๋‹ค๋ฅด๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.
    • ์ž‘๋™๋˜์ง€ ์•Š๋Š” HTML,JavaScript ์ฝ”๋“œ๊ฐ€ ์กด์žฌ
    • ํ•ด์„ํ•˜์ง€ ๋ชปํ•˜๋Š” CSS ์ฝ”๋“œ ์กด์žฌ
    • ๋ธŒ๋ผ์šฐ์ € ๋ฒ„๊ทธ๋“ค์ด ์กด์žฌ
    • ๋ธŒ๋ผ์šฐ์ € ์ž์ฒด์˜ ๊ธฐ๋ณธ CSS ์Šคํƒ€์ผ
*๋ Œ๋”๋ง ์—”์ง„(๋ ˆ์ด์•„์›ƒ ์—”์ง„) : ์š”์ฒญ๋ฐ›์€ ๋‚ด์šฉ์„ ๋ธŒ๋ผ์šฐ์ € ํ™”๋ฉด์— ํ‘œ์‹œํ•˜๋Š” ์—ญํ• ์„ ๋‹ด๋‹นํ•˜๋Š” ์†Œํ”„ํŠธ์›จ์–ด

ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง• ๋ฐฉ๋ฒ•

1. ๋ธŒ๋ผ์šฐ์ € ์ ์œ ์œจ ํŒŒ์•…

  • ๋†’์€ ์ ์œ ์œจ์„ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ๋ธŒ๋ผ์šฐ์ €๋ฅผ ํŒŒ์•…ํ•˜๊ณ , ํ•ด๋‹น ๋ธŒ๋ผ์šฐ์ €๋ฅผ ํƒ€๊ฒŸ์œผ๋กœ ์žก์•„ ๋Œ€์‘
  • Statcounter(Global): https://gs.statcounter.com/

2. ๋ธŒ๋ผ์šฐ์ € ํ˜ธํ™˜์„ฑ ๊ฒ€ํ†  : CSS ์†์„ฑ๊ณผ JavaScript ๋ช…๋ น์–ด์˜ ๊ฐ ๋ธŒ๋ผ์šฐ์ € ๋ณ„ ์ง€์› ์—ฌ๋ถ€๋ฅผ ํ™•์ธ

  • Can I Use : https://caniuse.com/
  • MDN์—์„œ๋„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

3. CSS ์ดˆ๊ธฐํ™” : ๋ธŒ๋ผ์šฐ์ € ์ž์ฒด์˜ ๊ธฐ๋ณธ CSS ์Šคํƒ€์ผ์„ ์ดˆ๊ธฐํ™”

4. Vender Prefix

  • CSS3 ํ‘œ์ค€์œผ๋กœ ํ™•์ •๋˜๊ธฐ ์ด์ „ ๋˜๋Š” ๋ธŒ๋ผ์šฐ์ € ๊ฐœ๋ฐœ์‚ฌ๊ฐ€ ์‹คํ—˜์ ์œผ๋กœ ์ œ๊ณตํ•˜๋Š” ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ๋ฒค๋” ํ”„๋ฆฌํ”ฝ์Šค(Vendor Prefix)๋ฅผ ์‚ฌ์šฉ
  • ๊ตฌํ˜• ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์ง€์›ํ•˜๊ธฐ ์œ„ํ•˜์—ฌ ๋ฒค๋” ํ”„๋ฆฌํ”ฝ์Šค๋ฅผ ์‚ฌ์šฉ
* {
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;          /* Likely future */
}

5. CSS hack

  • ํŠน์ • ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์ œ์™ธํ•˜๊ฑฐ๋‚˜, ํŠน์ • ๋ธŒ๋ผ์šฐ์ €์—์„œ๋งŒ CSS๋ฅผ ์ ์šฉํ•˜๋Š” ๊ธฐ๋ฒ•
  • CSS ํ•ต์€ ๋ฌธ๋ฒ•์ ์œผ๋กœ ๋งž์ง€ ์•Š๊ฑฐ๋‚˜, ํŠน์ • ๋ธŒ๋ž‘๋ฃจ์ €์—๋งŒ ์ ์šฉ๋˜๋Š” ๋น„ํ‘œ์ค€์ธ ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์œผ๋ฏ€๋กœ ์–ด์ฉ” ์ˆ˜ ์—†๋Š” ๊ฒฝ์šฐ๊ฐ€ ์•„๋‹ˆ๋ผ๋ฉด ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์„ ์ง€์–‘

6. Babel/Polyfill

  • Babel : ๊ตฌ ๋ธŒ๋ผ์šฐ์ €์—์„œ๋„ ์ตœ์‹  JavaScript ์ฝ”๋“œ๊ฐ€ ์ž˜ ์ž‘๋™ํ•˜๋„๋ก ๋ณ€ํ™˜ํ•ด์ฃผ๋Š” ํŠธ๋žœ์ŠคํŒŒ์ผ๋Ÿฌ(Transpiler)
  • Polyfill : ์ตœ์‹  JavaScript ๋ฒ„์ „(ES6)์— ์ƒˆ๋กญ๊ฒŒ ์ถ”๊ฐ€๋œ Map, Set, Promise์™€ ๊ฐ™์€ ๊ฐ์ฒด๋ฅผ ๊ตฌ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์‚ฌ์šฉ๊ฐ€๋Šฅํ•œ ๊ฐ์ฒด๋กœ ๋ณ€ํ™˜ํ•ด์ฃผ๋„์™€์ฃผ๋Š” ๋„๊ตฌ

์ฐธ๊ณ 

0๊ฐœ์˜ ๋Œ“๊ธ€