크로스브라우징 이슈에 대처하는 자세

안녕, 오늘은 Html+Css+Javascript 첫 글이야. 프론트 엔드 개발을 뜻하는 단어이기도 하고 웹퍼블리셔가 주로 다루는 언어다. 크로스브라우징을 알고 있다면 다 아는 내용이지만 혹시 관심만 있는 분들도 있을 수 있으니 간단하게 설명을 해보자면, HTML = 건물의 뼈대, Css = 인테리어, Javascript는 자동문 또는 엘리베이터라고 생각하면 편하다. 물론 자바스크립트의 Node.js를 통해 서버 데이터를 가져오고 활용 할 수 있다.(사용은 안 해봤다.)

이전 스킨들도 항상 크로스브라우징에 신경을 썻는데, Ie 전용 css파일을 따로 만들어서 사용하기도 했고, ie7, ie8사용자에게 업데이트를 하라는 알림도 뜨게 만들었다. 정말 크로스브라우징을 하는 내내 고뇌의 연속이었다. 

최근 블로그 리뉴얼을 했고, 그 고뇌는 계속되었지만, 시대는 많이 좋아졌다. 하지만 블로그에 사용된 기술(코드) 중 크로스브라우징을 해결 해야하는 사항이 몇가지 있었다. 

1. SVG 애니메이션의 지원

현 블로그의 Header 영역에 LOGO는 SVG애니메이션을 사용했다. 크로스브라우징 이슈가 발생했는데, SVG 애니메이션은 IE에서 지원하지 않는 문제점과 마이크로소프트의 다른 웹브라우저인 엣지(EDGE)에서 직선 모션은 나타나지만, 곡선(path) 모션이 나타나지 않는 크로스브라우징 이슈가 발생하였다.

해결 방안 : 엣지 경우 = 코드를 수정하여 곡선 모션도 나타나게 변경하였다.( 추후 포스팅으로 자세히 설명하겠다.)  IE = 최신 IE는 SVG를 지원하기에 No-svg로도 해결 할 수 없는 부분이다. 자바스크립트나 Css3로 대체를 생각하고 있는 실정이지만 IE를 위해 코드를 추가로 넣고 싶지는 않다. (IE 넌 이미 버려졌어. 사라져 제발.) 해결책 고민 & 방치 중.

2. 백그라운드 투명도에 관한 크로스브라우징 이슈

많은 웹 퍼블리셔들이 크롬을 기본으로 코딩 작업을 한다. 기본 적인 백그라운드 투명도는 background-color : #ffffffb8 와 같이 코드를 사용하는데 이놈의 IE에서 또다시 크로스브라우징 이슈가 발생하였다. IE가 #fffffb8과 같은 언어를 이해하지 못해서 발생한 RGBA를 통해 해결하였다. 

background-color: #ffffff87;
background-color: rgba(255, 255, 255, 0.5294117647058824);

3. IE 10이하에 대처하는 자세

버렸다. 이유는 아래와 같다. KISA에 나온 지표를 분석해 보자면 2020년에 들어 IE의 점유율이 15% 전후로 떨어졌다. IE의 총 점유율이며, Browser ver를 보자면 IE 11.0 최신버전의 점유율이 그와 비슷한 15% ~ 13% 사이다. 2020.04기준으로 보자면 IE 총 점유율은 15.11%이다. 그 중 IE 11.0 버전의 점유율은 14.90이다. 즉 15.11% - 14.90 = 0.21%이다. IE 10 이하의 점유율이 0.21%라는 것이다. 0.21%도 이용자이므로 신경을 써야하지만 0.21%를 위해 그리고 IE 10을 위해 코드를 더 작성하고 싶지 않았다. 그렇다고 사용을 못 할 정도의 수준도 아니었기 때문이다. 

인터넷 환경이 많이 좋아졌다. 윈도우 xp의 지원 종료가 큰 역할은 했다. 그리고 새로운 브라우저를 만듦으로써 IE는 사라질 것이며, IE11을 제외한 IE10이하 버전은 신경을 쓰지 말자는 것이 크로스브라우징 이슈에 대응하는 자세라 하겠다. IE10이하의 사용자들은 자신의 브라우저 버전도 모르고 있다. IE10이하 버전을 계속 지원한다면 그 사용자들은 불편함이 없을 것이고 업그레이드에 할 가치를 느끼지 못한다. 이제 사이트들이 IE10이하 버전을 지원하지 않음으로써 그들을 인지시키는 작은 운동이 될 것이다. IE 사용자가 0이 되는 날까지 쭈~~~욱!!!