roqkf

[Web] Cross Browsing ๋ณธ๋ฌธ

๐Ÿ’ป Development/Web

[Web] Cross Browsing

ahyeon7 2023. 1. 9. 22:42

โค๏ธโ€๐Ÿ”ฅ Cross Browsing

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

๐Ÿ˜ฒ ์šฐ๋ฆฌ๋Š” ์ด๋ฏธ Cross Browsing์ด ๋˜์ง€ ์•Š์•„ ๋ถˆํŽธํ•จ์„ ๊ฒช์€ ์ ์ด ์žˆ๋‹ค!

  • ๋ฌด์–ธ๊ฐˆ ํ•˜๋ ค๊ณ  ํ•  ๋•Œ๋งˆ๋‹ค ๋œจ๋Š” ๊ฒฝ๊ณ ์ฐฝ์ด ๋œจ๋Š” ๊ฑธ ๊ฒฝํ—˜ํ•ด ๋ณธ ์ ์ด ์žˆ์„ ๊ฒƒ์ด๋‹ค.
  • ์ด ๋ฌธ์ œ๋Š” ์ธํ„ฐ๋„ท ์ต์Šคํ”Œ๋กœ๋Ÿฌ(Internet Explorer)๊ฐ€ ๊ณ„์†ํ•ด์„œ ๋ธŒ๋ผ์šฐ์ € ์ ์œ ์œจ 1์œ„๋ฅผ ์ฐจ์ง€ํ•˜๊ฒŒ ๋งŒ๋“ค์—ˆ๋˜, 1์œ„์—์„œ ๋‚ด๋ ค์˜จ ๋’ค์—๋„ ๊ณ„์†ํ•ด์„œ ๋†’์€ ์ ์œ ์œจ์„ ์ฐจ์ง€ํ•˜๊ฒŒ ๋งŒ๋“  ์›์ธ์ด๊ธฐ๋„ํ•œ ActiveX ๋•Œ๋ฌธ์ด๋‹ค.

๐Ÿค” ActiveX ?

  • MS ์‚ฌ์—์„œ ๊ฐœ๋ฐœํ•œ ์ธํ„ฐ๋„ท ์ต์Šคํ”„๋กœ๋Ÿฌ์šฉ ํ”Œ๋Ÿฌ๊ทธ์ธ, ์›น ๋ธŒ๋ผ์šฐ์ €์™€ ์›น ๋ฌธ์„œ๋งŒ์œผ๋กœ๋Š” ์ด์šฉํ•  ์ˆ˜ ์—†๋Š” ์ถ”๊ฐ€ ๊ธฐ๋Šฅ๋“ค์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด ์ฃผ๋Š” ๋ธŒ๋ผ์šฐ์ € ์™ธ๋ถ€ ํ”„๋กœ๊ทธ๋žจ
  • ์„ธ๊ณ„ ๋ธŒ๋ผ์šฐ์ € ์ ์œ ์œจ๊ณผ ํ•œ๊ตญ ๋ธŒ๋ผ์šฐ์ € ์ ์œ ์œจ์„ ๋น„๊ตํ•ด๋ณด๋ฉด, ์ง€๊ธˆ์€ ์••๋„์ ์ธ ์ ์œ ์œจ์„ ์ฐจ์ง€ํ•˜๊ณ  ์žˆ๋Š” ํฌ๋กฌ์ด ์ธํ„ฐ๋„ท ์ต์Šคํ”Œ๋กœ๋Ÿฌ์˜ ์ ์œ ์œจ์„ ์ฒ˜์Œ ์ถ”์›”ํ•œ ์‹œ์ ์ด ๊ฐ๊ฐ 2012๋…„๋„์™€ 2016๋…„๋„์ธ ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.
  • ํ•œ๊ตญ์ด ๋ฌด๋ ค 4๋…„์ด๋‚˜ ๋’ค์ณ์ ธ ์žˆ๋Š” ์ˆ˜์น˜์ด๋‹ค. ํ•œ๊ตญ ์ •๋ณดํ™” ์ˆ˜์ค€์„ ์ƒ๊ฐํ–ˆ์„ ๋–„์—๋Š” ํŠนํžˆ ์ด์ƒํ•œ ํ˜„์ƒ์ธ๋ฐ, ์ด๋Š” ๊ณต๊ณต๊ธฐ๊ด€์„ ํฌํ•จํ•œ ํ•œ๊ตญ์˜ ์›น ์‚ฌ์ดํŠธ๋“ค์ด ActiveX์ด ์‚ฌ์šฉ์„ ์‚ฌ์šฉ์ž์—๊ฒŒ ๊ฑฐ์˜ ๊ฐ•์ œํ–ˆ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.
  • ActiveX ๋•๋ถ„์— ์›น ๋ธŒ๋ผ์šฐ์ € ์ƒ์—์„œ ์Œ์•…, ๋™์˜์ƒ ๋“ฑ์˜ ๋ฉ€ํ‹ฐ๋ฏธ๋””์–ด ์ฝ˜ํ…์ธ ๋ฅผ ์ž์œ ๋กญ๊ฒŒ ์ฆ๊ธฐ๊ณ , ์€ํ–‰๊ณผ ์ฃผ์‹ ๋“ฑ์˜ ๊ธˆ์œต ๊ฑฐ๋ž˜๋„ ๊ฐ€๋Šฅํ•ด์ง€๊ณ , ์‚ฌ์šฉ์ž์˜ ์‹ ์›์„ ์ฆ๋ช…ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋ผ ์ง‘์—์„œ ๊ณต๋ฌธ์„œ๋ฅผ ์ถœ๋ ฅํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜๋Š” ๋“ฑ ์›น ๋ธŒ๋ผ์šฐ์ €์˜ ๊ธฐ๋Šฅ์„ ๊ฑฐ์˜ ๋ฌดํ•œ๋Œ€๋กœ ํ™•์žฅํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋๋‹ค.
  • ํ•˜์ง€๋งŒ ๋ฌธ์ œ์ ์€ ์ •๋ง ๋ฌดํ•œ๋Œ€๋กœ ํ™•์žฅํ•˜๋ฉด์„œ ๋ฌด์–ธ๊ฐˆ ์ž‘์—…ํ•˜๋ ค๊ณ  ํ•˜๋ฉด ActiveX๋ฅผ ์„ค์น˜ํ•˜๋ผ๋Š” ๋ฌธ๊ตฌ๊ฐ€ ๋œจ๊ณ , ํ•„์š”ํ•œ ActiveX ํ•˜๋‚˜๋ผ๋„ ์„ค์น˜๋ผ ์žˆ์ง€ ์•Š์œผ๋ฉด ๊ธฐ๋Šฅ์ด ์ œ๋Œ€๋กœ ์ž‘๋™ํ•˜์ง€ ์•Š๋Š” ๋“ฑ ๋ฐฐ๋ณด๋‹ค ๋ฐฐ๊ผฝ์ด ๋” ์ปค์ง€๋Š” ํ˜„์ƒ์ด ๋ฐœ์ƒํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค. ์ธํ„ฐ๋„ท ์ต์Šคํ”Œ๋กœ๋Ÿฌ์—์„œ๋งŒ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— ๋‹ค๋ฅธ ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ผ์€ ๊ฑฐ์˜ ๋ถˆ๊ฐ€๋Šฅํ–ˆ๋‹ค. ์ฆ‰, ActiveX ๋•Œ๋ฌธ์— ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง•์ด ๋ถˆ๊ฐ€๋Šฅํ•œ ์ƒํ™ฉ์ด ๋œ ๊ฒƒ์ด๋‹ค.
  • ActiveX๋งŒ ์ตํ„ฐ๋„ท ์ต์Šคํ”Œ๋กœ๋Ÿฌ๊ฐ€ ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง•์— ์•…์˜ํ–ฅ์„ ์คฌ๋˜ ์š”์†Œ๋Š” ์•„๋‹ˆ๋‹ค. ์ธํ„ฐ๋„ท ์ต์Šคํ”Œ๋กœ๋Ÿฌ๋Š” ์ตœ์‹  ์ŠคํŽ™์˜ CSS์™€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ œ๋Œ€๋กœ ์ง€์›ํ•˜์ง€ ๋ชปํ–ˆ๊ณ , ์ด ๋•Œ๋ฌธ์— ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง•์„ ์œ„ํ•ด ์›น ํ‘œ์ค€์„ ์ €ํ•ดํ•˜๋Š” ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•ด์•ผ ํ–ˆ๋‹ค. ๋‹ค๋ฅธ ์›น ๋ธŒ๋ผ์šฐ์ €๋“ค์€ ์ตœ์‹  ๋ฌธ๋ฒ•์„ ์ง€์›ํ•˜๋Š”๋ฐ ์˜ค๋กฏํžˆ IE๋งŒ์„ ์œ„ํ•ด ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง•์— ์‹œ๊ฐ„๊ณผ ๋น„์šฉ์„ ํˆฌ์žํ•ด์•ผ ํ–ˆ๋‹ค. ์ด๋Ÿฐ ์—ฌ๋Ÿฌ ์ด์œ  ๋•Œ๋ฌธ์— IE๋Š” ์›น ๊ฐœ๋ฐœ์ž ์‚ฌ์ด์—์„œ ๊ณต๊ณต์˜ ์  ์ด๋ผ๊ณ ๊นŒ์ง€ ๋ถˆ๋ฆฌ๊ฒŒ ๋˜์—ˆ๋‹ค.
  • IE๋Š” 2022๋…„ 6์›” 15์ผ์ž๋กœ ์ง€์›์„ ์ข…๋ฃŒํ•˜๊ฒŒ ๋˜์—ˆ๊ณ , ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง•์˜ ๊ฐ€์žฅ ํฐ ๊ฑธ๋ฆผ๋Œ์ด์ธ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์€ํ‡ดํ•˜๊ฒŒ ๋œ ๊ฒƒ์ด๋‹ค. ๋ฌผ๋ก  MS ์‚ฌ์˜ ์—ฃ์ง€์—์„œ ์•„์ง ActiveX๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์›น ์‚ฌ์ดํŠธ๋“ค์„ ์œ„ํ•ด IE๋ฅผ ์ตœ์†Œ 2029๋…„๊นŒ์ง€ ์ œ๊ณตํ•  ์˜ˆ์ •์ด๋ผ๊ณ  ๋ฐํ˜”์ง€๋งŒ ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง•์„ ํ•  ๋•Œ, IE ๋•Œ๋ฌธ์— ๋จธ๋ฆฌ ์‹ธ๋งฌ ์ผ์€ ๊ฑฐ์˜์—†์„ ๊ฒƒ์ด๋‹ค.
  • IE์˜ ์ง€์› ์ข…๋ฃŒ๋กœ ๋‚œ์ด๋„๊ฐ€ ๋‚ฎ์•„์ง„ ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง•์€ ์–ด๋–ป๊ฒŒ ์ง„ํ–‰ํ•˜๋ฉด ๋˜๋Š”์ง€ ์•Œ์•„๋ณด์ž!

โค๏ธโ€๐Ÿ”ฅ Cross Browsing | Workflow

1. ์ดˆ๊ธฐ ๊ธฐํš

  • ์–ด๋–ค ์›น ์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ค ๊ฒƒ์ธ์ง€ ๊ฒฐ์ •
  • ์›น ์‚ฌ์ดํŠธ์—์„œ ์ œ๊ณตํ•˜๋Š” ๊ธฐ๋Šฅ, ์ฝ˜ํ…์ธ ๋Š” ์–ด๋–ค ๊ฒƒ์œผ๋กœ ํ• ์ง€, ๋””์ž์ธ๊ณผ ๊ฐ™์€ ์‚ฌํ•ญ์„ ๊ฒฐ์ •
  • ์‚ฌ์ดํŠธ์˜ ๊ณ ๊ฐ์ด ์‚ฌ์šฉํ•˜๋Š” ๋ธŒ๋ผ์šฐ์ €, ์ ‘๊ทผ ๊ธฐ๊ธฐ ํƒ€๊ฒŸ์ธต์ด ์ฃผ๋กœ ์‚ฌ์šฉํ•˜๋Š” ๋ธŒ๋ผ์šฐ์ €์™€ ๊ธฐ๊ธฐ๋ฅผ ํŒŒ์•…ํ•ด ์ ํ•ฉํ•œ ๊ธฐ์ˆ ์„ ์‚ฌ์šฉํ•ด ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ๋„๋ก ๊ธฐํš

2. ๊ฐœ๋ฐœ

  • ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•  ๋•Œ๋Š” ์‚ฌ์šฉํ•˜๋Š” ์ฝ”๋“œ๊ฐ€ ๊ฐ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ง€์›ํ•˜๋Š”์ง€ ํ˜ธํ™˜์„ฑ์„ ํŒŒ์•…ํ•˜๊ณ  ์‚ฌ์šฉํ•ด์•ผ ํ•œ๋‹ค. MDN, Can I Use ๋“ฑ์˜ ์‚ฌ์ดํŠธ์—์„œ ๋ธŒ๋ผ์šฐ์ €์™€ ์ฝ”๋“œ์˜ ํ˜ธํ™˜์„ฑ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.
  • ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋‹ค ๋ณด๋ฉด ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง•์„ ํ•˜๊ธฐ ํž˜๋“  ์ƒํ™ฉ์ด ์ƒ๊ธธ ์ˆ˜๋„ ์žˆ๋Š”๋ฐ, ์ด๋Ÿฐ ๊ฒฝ์šฐ์—๋Š” ์ด๋ฅผ ์ธ์ •ํ•˜๊ณ  ๋Œ€์ฒด ์ˆ˜๋‹จ์„ ๋งˆ๋ จํ•˜๋Š” ๊ฒŒ ์ข‹๋‹ค. ๋˜ํ•œ ๊ฐœ๋ฐœ ์ค‘์ธ ์‚ฌ์ดํŠธ๊ฐ€ ์ผ๋ถ€ ์˜ค๋ž˜๋œ ๋ธŒ๋ผ์šฐ์ €์—์„œ๋Š” ์–ด์ฉ” ์ˆ˜ ์—†์ด ์ œ๋Œ€๋กœ ๊ธฐ๋Šฅํ•˜์ง€ ์•Š์„ ์ˆ˜ ์žˆ๋‹ค๋Š” ์‚ฌ์‹ค์„ ์•Œ๊ณ  ๋ฐ›์•„๋“ค์—ฌ์•ผ ํ•œ๋‹ค.

3. ํ…Œ์ŠคํŠธ / ๋ฐœ๊ฒฌ

  • ๊ฐ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ ํ›„, ๊ฐ ๊ธฐ๋Šฅ๋“ค์˜ ํ…Œ์ŠคํŠธ๊ฐ€ ํ•„์š”
  • ์•ˆ์ •์ ์ธ ๋ฐ์Šคํฌํ†ฑ ๋ธŒ๋ผ์šฐ์ €์—์„œ ํ…Œ์ŠคํŠธ ์ง„ํ–‰
    ํœด๋Œ€ํฐ, ํƒœํ”Œ๋ฆฟ ๋ธŒ๋ผ์šฐ์ € ๋“ฑ ๋‹ค์–‘ํ•œ ๊ธฐ๊ธฐ์—์„œ ํ…Œ์ŠคํŠธ ์ง„ํ–‰
    ์ดˆ๊ธฐ ๊ธฐํš ๋‹จ๊ณ„์—์„œ ๋ชฉํ‘œํ–ˆ๋˜ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์žˆ๋‹ค๋ฉด ํ•ด๋‹น ๋ธŒ๋ผ์šฐ์ €์—์„œ ํ…Œ์ŠคํŠธ ์ง„ํ–‰
    ๋‹ค์–‘ํ•œ ์šด์˜์ฒด์ œ์—์„œ๋„ ํ…Œ์ŠคํŠธ ์ง„ํ–‰
  • ์ง์ ‘ ํ…Œ์ŠคํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๋Š” ๋ฐฉ๋ฒ•๋„ ์žˆ์ง€๋งŒ, TestComplete, LambdaTest, BitBar ๋“ฑ์˜ ํฌ๋กœ์Šค ๋ธŒ๋ผ์šฐ์ง• ํ…Œ์ŠคํŠธ ํˆด์„ ์‚ฌ์šฉํ•˜์—ฌ ์ž๋™์œผ๋กœ ํ…Œ์ŠคํŠธ๋ฅผ ์ง„ํ–‰ํ•ด ์ฃผ๋Š” ๋„๊ตฌ๋ฅผ ์ด์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•๋„ ์žˆ๋‹ค.

4. ์ˆ˜์ • / ๋ฐ˜๋ณต

  • ํ…Œ์ŠคํŠธ ๊ณผ์ •์—์„œ ๋ฒ„๊ทธ๋ฅผ ๋ฐœ๊ฒฌํ–ˆ๋‹ค๋ฉด ์ˆ˜์ •์ด ํ•„์š”ํ•˜๋‹ค. ๋ฒ„๊ทธ ๋ฐœ์ƒ ์œ„์น˜๋ฅผ ์ตœ๋Œ€ํ•œ ์ขํ˜€ ํŠน์ •ํ•˜๊ณ , ๋ฒ„๊ทธ๊ฐ€ ๋ฐœ์ƒํ•˜๋Š” ํŠน์ • ๋ธŒ๋ผ์šฐ์ €์—์„œ์˜ ํ•ด๊ฒฐ๋ฐฉ๋ฒ•์„ ์ •ํ•ด์•ผํ•œ๋‹ค. ์„ฃ๋ถˆ๋ฆฌ ์ฝ”๋“œ๋ฅผ ์ˆ˜์ •ํ–ˆ๋‹ค๊ฐ€, ๋‹ค๋ฅธ ๋ธŒ๋ผ์šฐ์ €์—์„œ ๋ฒ„๊ทธ๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ, ์กฐ๊ฑด๋ฌธ์„ ์ž‘์„ฑํ•ด ๋‹ค๋ฅธ ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ ์ˆ˜์ •ํ•˜๋Š” ํŽธ์ด ์ข‹๋‹ค. ์ˆ˜์ •์„ ์™„๋ฃŒํ•˜๋ฉด 3๋ฒˆ ๊ณผ์ •๋ถ€ํ„ฐ ๋ฐ˜๋ณตํ•œ๋‹ค.

'๐Ÿ’ป Development > Web' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[Web] SEO  (0) 2023.01.17
[Web] ์›น ํ‘œ์ค€ & ์ ‘๊ทผ์„ฑ  (0) 2023.01.09
[Web] ์ž์ฃผ ํ‹€๋ฆฌ๋Š” Markup  (0) 2023.01.09
[Web] ์›น ํ‘œ์ค€ & Semantic HTML  (0) 2023.01.09
wireframe & prototype  (0) 2022.12.18