2022년 6월 15일부터 Internet Explorer11(이하 IE)의 지원이 종료됐다. 특정 Windows 10 버전부터는 IE가 아닌 Microsoft Edge를 이용할 수 있으며, 기존 IE 기반 사이트 및 앱에 의존하는 경우에는 Microsoft Edge의 Internet Explorer 모드를 사용해야 한다. Microsoft Edge의 Internet Explorer 모드는 이전 버전과의 호환이 가능하며 최소 2029년까지 지원된다고 한다. 이러한 IE의 지원 종료는 많은 CSS 기술의 제약이 해제되는 기회이다.

웹 레이아웃의 토대를 만들기 위해 2013년 등장한 Flexbox와 2017년 등장한 GridLayout 모두 IE에서는 정확하게 구현되지 않아서 IE의 기준을 맞추어야 하는 경우 사용에 제약이 있었다. 특히 GridLayout의 경우는 IE의 업데이트가 2015년부터 중지되었기 때문에 사실상 사용할 수 없는 스펙이었다. IE의 지원 종료로 모든 CSS 스펙의 즉각적인 업데이트가 이루어질 수는 없겠지만, 장기적으로 새로운 CSS 기술을 활용할 수 있는 기회가 열렸다.

[그림1. 2022.09 세계 웹브라우저 점유율]

전세계적으로 Browser의 사용 현황을 보았을 때 2021. 9월부터 IE의 점유율은 이미 0.84%로 매우 낮은 점유율을 보여주고 있다.

[그림2. 한국에서 IE 지원 종료 후 IE 점유율 변화]

한국에서 IE의 점유율은 높은 편이었는데, 2020년 8월부터 2021년 8월까지 IE의 점유율은 8%대였고, 지원이 종료된 2022년 7월부터 현재까지 확인해보니 IE의 점유율이 1%대로 하락했다. 앞으로 새로운 CSS 스펙 이용에 대한 기대가 더 높아지는 이유이다.

예를 들어, IE에서도 원활하게 CSS Variable(CSS 변수)을 이용하기 위해서는 SCSS를 이용하곤 했다. 이제는 SCSS파일이 아니라 CSS 파일에서도 자유롭게 변수를 사용할 수 있다.

[그림3. E-GENE의 color/main.css 파일 중 변수 사용]

IE 지원을 고려하지 않는다면, 에스티이지 E-GENE 솔루션에서 사용중인 color/main.css 파일도 위의 이미지와 같이 변수를 활용하여 작성할 수 있다. 상단에 선언된 전역 변수 정의만 수정해준다면 해당 변수가 사용된 모든 CSS를 일괄적으로 변경할 수 있다.
즉 솔루션내 기본 스타일의 변경이 편리하게 이루어질 것이고 보다 사용자 친화적인 솔루션으로 다가설 수 있는 유연성을 가지게 된다..

IE의 Browser 시장 점유율이 0%가 된다면 CSS의 발전은 어떤 길을 택할 수 있을까?

2017년 새롭게 등장한 CSS프레임워크 TailwindCSS(’특징: 다른 utility-first CSS에 비해 custom이 쉽고 확장에 용이하다는 장점이 있으며, 여러 가지 플러그인을 추가하거나 직접 제작할 수 있고, 문서화도 잘 되어있는 특징’)가 대안 중 하나가 될 수 있다. TailwindCSS는 시멘틱 웹이 표준이 되면서 지양했던 방식을 차용하고 있다. 현재 E-GENE 솔루션에서도 사용중인 부트스트랩과 같이 Utility-First(미리 세팅된 유틸리티 클래스를 활용하여 HTML 코드 내에서 스타일링)를 지향하는 방식으로, 의미보다는 직관적인 속성을 그대로 클래스에 표현한다. html/css 경험이 많은 개발자라면 html 파일 하나만 확인해도 실제 화면을 예상할 수 있을 것이다.

[그림4. TailwindCSS를 적용한 화면과 코딩 방식]

TailwindCSS를 사용하면 따로 클래스명을 고민하고, html에 CSS파일을 연결하지 않아도 원하는 스타일을 화면에 적용할 수 있다. 기본적으로 TailwindCSS에 구분점(Breakpoint)이 존재하기 때문에 반응형 디자인도 구현이 가능하다. react, vue 등을 도입한 환경에서는 장점이 더욱 증가한다고 한다. CSS의 커스터마이징도 가능하기 때문에 프로젝트의 특성에 맞추어 반응형 Breakpoint, color 등을 수정해서 사용하면 된다. 새로운 컴포넌트를 생성해야 하는 상황에서도 정해진 클래스를 이용할 수 있으니 컴포넌트용 CSS 파일을 생성하지 않아도 된다. 장기적인 유지보수 측면에서도 큰 장점이다.

물론 단점도 존재한다. 코드의 직관성은 훌륭하지만 가독성이 떨어지고, 코드가 지저분하게 보일 수 있다. 또 IE를 지원하지 않는 문제도 존재한다. 프로젝트에서 IE를 미지원한다면 TailwindCSS를 사용할 수 있지만 현실적으로 IE를 완전히 배제할 프로젝트는 많지 않기 때문에 당장 TailwindCSS를 적용하는 것은 불가능하다. 하지만 당장은 사용이 어렵더라도 CSS의 발전 동향을 주시하며 상품에 적용하는 방안을 고려한다면, 추후 IE가 완전히 배제됐을 때 IT 트렌드에 발맞추어 함께 발전할 수 있을 것이다.

지금까지 살펴본 시장 상황을 보았을때 CSS의 발전 가능성과 활용성은 빠르게 확장될 것으로 예상되고 있기에, 에스티이지 E-GENE 솔루션에 적용되는 CSS 구조도 보다 더 업그레이드 될 것을 기대해 볼 수 있다.

㈜에스티이지 R&D팀 김세나 프로