하위 버전 브라우저의 HTML5 / CSS3.0 호환성 준수방안

Posted by in Research

‘하위 버전 브라우저의 HTML5 / CSS3.0 호환성을 어떻게 준수할 것인가’ 에 대해 포스팅하겠습니다.

요즘 ‘모바일웹을 PC에서 잘보이게 해달라’는 미션을 많이 받습니다.
즉 HTML5, CSS3.0으로 작성된 코드를 PC에서 잘보이게 해야하는 것이죠.
따지고 보면 “모바일 -> PC” 요구사항에만 해당되는 미션이 아니라 모든 프로젝트에서 고민할 내용입니다.
요즘은 반응형이 대세이고 최신 스펙들은 안쓰기엔 너무 아까우니까요…

“webkit이나 CSS3.0을 걷어내야하나?”
“따로 한벌 더 만들자”
“신경안써도 잘 나오게 하는 방법 없을까?”

방법은 여러가지입니다. 문제는 어떤게 가장 효율적인가를 판단하는 것이죠.
호환성 준수를 위한 방법을 크게 4가지로 분류했습니다.

1. polyfill

“polyfill”은 낡은 브라우저에서는 작동 안하는 HTML5 , CSS3.0들을 자바스크립트나 액션스크립트등으로 구현하여 낡은 브라우저에서도 최신스펙의 코드가 동적하는 것처럼 보여주는 행위를 뜻합니다.

HTML5를 지원하지 못하는 브라우저 엔진을 바꿀 방법은 없습니다. 자바스크립트나 액션스크립트 등을 이용해서 낡은 브라우저가 읽을 수 있는 코드로 만들어주는거죠.
얼마전에 재은님이 공유해주신 “CSS3로 구현된 페이지의 IE7~9 대응 이야기” 도 이러한 방식입니다.

[장점]
* API 하나 잘 만들어 놓으면 하위 호환성을 신경쓰지 않고 최신스펙을 마음놓고 쓸 수 있다

[단점]
* 네이티브 보다 확실히 성능이 떨어진다
* 비동기 프로그래밍에서 복잡도가 높아진다
: 동적으로 콘텐츠가 업데이트 될때마다 맞춤형 코드를 만들어내야한다

2. 브라우저별 맞춤형 코드 제공

최신 브라우저를 위한 코드와 함께 낡은 브라우저용 fallback 코드도 같이 제공합니다.
Sass나 Less같은 전처리기로 분기처리하면 효율적으로 관리할 수 있겠죠.
그 후 userAgent를 체크해 전용 코드를 불러오거나 브라우저 핵으로 구분할 수 있습니다.

그리고 낡은 브라우저를 버려도 될 시기가 오면 해당 코드만 깔끔하게 날려버립니다.
(그런날은 일단 기대하지 않는게 좋아요. IE7은 저 고등학교 때 사용했던걸로 기억하거든요. ㅋ)

[장점]
* 각 브라우저에 최적화된 코드를 제공할 수 있다

[단점]
* 개발환경이 복잡해질 수 있다 (Sass, compass, Grunt…)
* 분기규칙이 많아지면 코드 가독성이 떨어지고 유지보수가 어려워진다

3. 한벌로 갑시다

어떤 브라우저도 읽을 수 있는 낡은 브라우저 스펙을 기준으로 코드를 작성합시다.
CSS로 그릴거 이미지로 자르고, flexible하게 사이즈가 변경될게 있으면 javascript로 처리하고…

[장점]
* 호환성 두렵지 않은 무적코드다
* 분기처리 없는 하나의 코드이므로 한가지 코드만 생각하면 된다

[단점]
* 최신 브라우저는 자신의 역량을 최대치로 발휘 못할 것이다
* 레이아웃에 자바스크립트 도움을 받는 등,
최신브라우저용 코드에 비해 CSS와 자바스크립트가 할일의 구분이 불명확해질 수 있다

4. 점진적 기능 강화

모든 브라우저에서 똑같이 보일 필요는 없습니다. 낡은 브라우저는 조금 덜 풍부한 UX 환경을 제공하되 가독성엔 문제없는 수준까지만 제공합니다.
그리고 최신 브라우저로 갈수록 더 풍부한 UX를 제공합니다.
“IE7,8은 이렇게 보여주고요 그 외는 이렇게 해주세요” 이렇게 말해주는 서비스팀은 없을겁니다.
개발자가 더욱 주도적으로 나서서 합의점을 이끌어 내야합니다. 충분한 협의가 이루어지지 않는다면 나중에 수정사항 폭탄을 맞으실 수 있습니다.

[장점]
* 협의만 잘된다면 가장 깔끔하다

[단점]
* UX나 디자인적인 센스가 필요하다
* 커뮤니케이션 비용이 많이 든다

위 4가지 방법중에 어느게 best 라고 말할 수 없습니다.

개발자마다 처한 상황과 추구하는 우선순위가 다를테니까요…
저는 다음과 같은 기준을 갖고 어느게 가장 효율적일지 결정합니다.

* 코드 가독성
* 유지보수성
* 최신 스펙을 사용해서 성능 이점을 얼만큼 볼 수 있는가?
* 개발환경이 많이 복잡해질까? (누군가에게 인수인계 했을 때 죄책감 안들 자신 있는가?)
* 낡은 브라우저의 중요도가 높은가? (성능이 좀 떨어져도 사용에 문제가 없을 정도면 괜찮은가?)
* backend개발자와의 커뮤니케이션이 간편한가?

이만 포스팅을 마치겠습니다. 총총…