안녕하세요. 인시퀀스 UIX Group의 Markup and UI Developer 박선영입니다.

IT업계 종사자라면 누구라도 한 번쯤은 IE로 인해 고통받아 본 쓰라린 기억이 있을 것입니다.
검색 사이트에서 IE라는 키워드로 조회해보면 “IE에서 화면이 깨져요, IE 전용 CSS, IE hack” 등 문제를 호소하는 글들을 쉽게 찾아볼 수 있습니다.
IE가 연예인이었다면 전 세계의 관심을 받는 말썽쟁이 월드스타 정도는 되었겠네요.😅

2021년 9월 어느 날, Microsoft는 중대 발표를 하게 됩니다. 2022년 6월에 Internet Explorer 기술 지원을 완전히 중단하겠다는 소식이었습니다.

IE, Chrome에 왕좌를 내주고 역사의 뒤안길로

한국은 OECD 국가 중 유독 IE 브라우저 점유율이 높았습니다.
이는 공공기관이나 주요 민간 사이트에서 ActiveX 기반의 확장 프로그램을 사용한 사용자 환경을 강제했던 까닭인데요. 그 때문에 사용자들은 그동안 불편을 감수하고 IE를 사용해야만 했습니다. Window OS에 기본적으로 내장되어 있다는 이점으로 브라우저 시장을 거의 독점하다시피 했음에도 IE는 웹 표준 기술을 올바로 렌더링하는 기본적인 대응에 소홀했을 뿐 아니라 급기야는 치명적인 보안이슈(제로 데이)마저 야기했습니다.

이런 이유들로 사용자들이 IE로부터 등을 돌리고, 공공기관과 일부 민간기업마저 ActiveX 플러그인 기반의 공인인증서를 폐기하는 등 사이트의 사용 환경 개선을 진행한 결과 굳이 IE를 사용해야 할 이유가 사라져 IE 점유율은 점차 떨어져 갔습니다.
MS도 뒤늦게 IE에서 Edge로 대체하며 기존 브라우저의 느리고 무겁게 만드는 기술을 포기하고 크롬의 강점인 빠르고 심플한 인터페이스 중심의 개발로 사용성을 개선했지만, 이미 Chrome은 자리를 공고히 굳힌 뒤였습니다.

2013~2022까지 브라우저 점유율 추이 (출처 statcounter)

ActiveX 기반의 웹 사이트는 이제 사용할 수 없는 건가요?

아직 ActiveX를 사용하는 IE 기반의 웹 서비스를 운영하는 기업을 위해 Edge에서 IE 모드라는 형태로 IE를 지원하고 있습니다.
IE 모드는 IE 지원 종료 후에도 최소 2029년까지는 지원한다고 밝혔습니다.

구 시스템을 아직 전환하지 못한 기업이라면 앞으로 6년간의 유예기간 이내에 완전히 이별하시기 바랍니다.

6월 이후에는 Edge에서 IE모드를 통해 IE를 사용할 수 있게 됩니다.

가뭄의 단비 같은 최신 CSS

최신 웹 기술을 적용할 수 있다는 것은, 생산성이 훨씬 높아지고 보다 진보된 형태로 개발할 수 있다는 의미입니다.
그동안 IE 호환성 이슈로 활용할 수 없었던 최신 스펙의 CSS와 자바스크립트를 활용할 수 있게 되었습니다.

  • 더 이상 IE 지원 범위에 대해 클라이언트를 설득할 필요가 없습니다.
  • 웹 표준을 저해하는 CSS Hack을 사용하지 않아도 됩니다.
  • IE에서 올바로 지원하지 않았던 최신 CSS 스펙 사용이 가능해져 업무 효율성이 높아집니다.
  • vendor prefix 사용이 줄어 CSS 성능과 유지보수 비용이 절약됩니다.
  • 크로스 브라우징 테스트에 할애했던 시간적 비용이 줄어듭니다.

마크업 개발자로서 CSS에 대한 많은 제약이 풀리는 것은 여간 반가운 일이 아닙니다.
당장 실무에 사용할만한 가장 효과적이고 멋진 CSS에 대해 살펴보겠습니다.

Grid Layout

가장 혁신적인 레이아웃 모델이라고 불리는 flexbox와 grid. 하지만 사용률에서는 현저한 차이를 보입니다. 이는 IE에서 grid의 지원이 제한적이었기 때문입니다.

2021년 flexbox와 grid 의 사용률 (출처 : Web Almanac)

grid는 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 컨트롤 간의 관계를 정의하는 데 아주 탁월합니다. gird를 사용하면 width를 입력하지 않더라도 아이템에 간격과 width 비율만 입력해 주면 쉽고 간편하게 반응형 레이아웃을 만들 수 있습니다.

Flexbox VS Grid

flexbox는 1차원 레이아웃이기 때문에 수직, 수평 중 한 방향으로만 아이템을 나열할 수 있지만, Grid는 2차원 레이아웃이라 수직, 수평 양방향 모두 자유롭게 아이템을 나열할 수 있습니다. 그렇기 때문에 복잡한 레이아웃의 경우 flexbox보다는 grid를 사용하는 것이 적절합니다.

flexbox(왼) 과 grid(오) 레이아웃 아이템 배치
Flexbox 와 Grid의 차이점

Flexbox는 콘텐츠의 흐름에 중점을 둡니다.
flex 항목의 넓이(또는 높이)는 항목의 내용에 따라 결정됩니다. 아이템은 내부 내용물과 사용할 수 있는 공간에 따라 늘어나거나 줄어듭니다.
이것은 flexbox를 사용하면 공간을 할당하고 항목을 유연하게 정렬할 수 있다는 이야기입니다.

... (flexbox) gains simple and powerful tools for distributing space and aligning content in ways that web apps and complex web pages often need - W3C’s flexbox docs

Grid는 콘텐츠 배치에 중점을 둡니다.
각 항목은 가로 및 세로축을 따라 정렬된 그리드 셀입니다. 레이아웃 내 항목의 위치를 정확하게 제어하려면 grid를 사용하는 것이 좋습니다.
grid는 겹치는 레이아웃, 비대칭 레이아웃 같은 특이한 레이아웃을 만드는 데 적합합니다.

“It provides a mechanism for authors to divide available space for layout into columns and rows using a set of predictable sizing behaviors. Authors can then precisely position and size the building block elements of their application into the grid areas defined by the intersections of these columns and rows.” - W3 docs of the Grid module assert

flexbox 와 grid는 둘 다 좋은 기능을 가지고 있습니다.
그러니 목적에 부합되는 상황에 맞춰 사용하면 더 쉽고 간편하게 반응형 레이아웃을 만들 수 있을 것입니다.

더 알아보기

CSS Variables

속성을 미리 정의해 놓고 필요할 경우 참조하여 사용할 수 있는 사용자 속성을 의미합니다.
이 속성은 코드의 반복을 줄여 사용성을 높이고, 코드의 가독성을 높여 줍니다. 또한 이전에는 Sass 및 LESS와 같은 전처리기에서만 가능했던 CSS에서 변수를 선언하는 데 도움이 됩니다.

변수의 범위
  • 전역 범위 - 문서의 처음부터 끝까지 허용
  • 로컬 범위 - 선택기 내에서만 허용됨
변수 정의

일반 속성과 동일한 문법으로 정의가 가능하므로 CSS 사용자 속성이라고 불립니다. 다만 CSS 변수 정의 시 --로 시작해야 합니다. 

form { 
  --primary: #9e2e50; 
}
변수 접근

CSS 변수가 사용되려면 일반 CSS 속성에 var() 함수를 사용합니다. --color 변수가 정의가 되어 있는 경우에는 그 변수의 값이 color 속성으로 사용되고, 그렇지 않은 경우에는 red 대신 color 속성 값으로 지정됩니다. 

.ex { 
  color : var(--primary); 
}
브라우저에서 CSS 변수를 지원하지 않거나 잘못된 값으로 설정했을 경우

브라우저가 CSS의 변수를 지원하지 않는 경우 var() 함수가 있는 코드 행은 브라우저가 이해하지 못하므로 렌더링 되지 않습니다. 이럴 때 브라우저는 기본값인 투명색을 사용합니다. 변수를 잘못된 값으로 설정했을 때도 브라우저 기본값인 투명색을 사용합니다.

변수를 초기화하지 않았을 경우

변수를 초기화하지 않고 코드상에 대체 색상을 입력했을 경우 대체 값을 사용합니다. 이는 변수는 초기화 했지만 범위 외부에서 호출한 경우에도 동일한 일이 발생합니다. 

.ex { 
  color : var(--primary, #9e2e50); 
}var( ) 함수에 대체 색상을 제공하는 경우
변수 정의 시 주의 사항
  • 변수 이름은 대소문자를 구분합니다.
  • 변수 이름은 CSS 기존 속성의 값을 가질 수 없습니다. 예) --font-size
더 알아보기

:is(selector), :where(selector)

두 가상 선택자는 CSS Selectors Level 4에 포함된 가상 선택자입니다. 둘 다 동일하게 속성을 그룹화함으로서 반복적인 코드를 줄일 수 있습니다.

기본 CSS
section h1, 
section h2, 
section h3, 
section h4 { 
  color:blue;
}
:is() 기본 사용 예시
section:is(h1, h2, h3, h4) { 
  color:blue; 
}
:where() 기본 사용 예시
section:where(h1, h2, h3, h4) { 
  color:blue; 
}
:is()와 :where()의 차이점

:is()는 :where()와 다르게 구체적인 선택자 우선순위 (명시도)를 가지고 있습니다. :where()는 전체 selector의 특이성을 증가시키지 않고 항상 0으로 유지 시킵니다. 이 기능은 선택자의 자식 선택자를 재정의할 경우 유용합니다.

더 알아보기

마치며

IT 종사자에게 IE 지원 종료는 단지 야근의 이유가 하나 줄어들었다는 사실 외에도 더 큰 의미를 시사합니다. 레거시 인프라에 대응할 시간 비용으로 사이트의 품질을 한 단계 더 높일 수 있는 환경이 준비된 것이죠.
그동안 IE를 핑계 삼아 최신 스펙에 대해 익히는 것을 다소 게을리한 것은 아닌지 돌아보는 시간이 되었습니다.
왕좌는 영원하지 않습니다. 포스팅을 준비하며 항상 노력하고 발전해야 함을 느꼈습니다.

이 글을 읽는 분들도 진정한 모던 웹 개발을 펼칠 만반의 준비가 되었는지 돌아볼 수 있는 기회가 되었으면 좋겠습니다.

참고 문헌

박선영 프로필 이미지

안녕하세요. 인시퀀스 Markup and UI Developer 박선영입니다. 더 좋은 퍼블리셔가 되기 위해 노력하는 중입니다.