Flexbox의 히스토리

TL;DL

이젠 display: -webkit-box;, display: -ms-flexbox; 속성을 사용하지 않아도 됩니다.

들어가면서

웹 개발의 세계에서 레이아웃은 항상 중요한 과제였습니다. 테이블부터 float까지, 우리는 다양한 방법으로 웹 페이지의 구조를 만들어 왔습니다. 그러나 2009년, 새로운 희망이 등장했습니다. 바로 Flexbox입니다. 오늘은 Flexbox의 역사와 그 진화 과정, 그리고 왜 우리가 여전히 다양한 버전의 Flexbox 문법을 사용하는지에 대해 알아보겠습니다.

1. Flexbox 이전의 세계

Flexbox가 등장하기 전, 웹 개발자들은 복잡한 레이아웃을 만들기 위해 다음과 같은 방법들을 사용했습니다:

• 테이블 레이아웃
• float와 clear
• position 속성

이러한 방법들은 각자의 한계가 있었고, 특히 반응형 디자인이 중요해지면서 더욱 큰 도전과제가 되었습니다.

2. Flexbox의 탄생 (2009년)

2009년, Flexbox의 초기 버전이 제안되었습니다. 웹킷(WebKit) 엔진이 이를 가장 먼저 구현했고, 다음과 같은 문법을 사용했습니다:

.container {
  display: -webkit-box;
  -webkit-box-orient: horizontal;
}

이 초기 버전은 현재의 Flexbox와는 많이 달랐지만, 유연한 레이아웃의 가능성을 보여주었습니다.

3. 과도기: 다양한 구현 (2011년 ~ 2012년)

새로운 웹 기술이 항상 그렇듯, Flexbox도 표준화 과정에서 여러 변화를 겪었습니다. 이 시기에는 다양한 브라우저들이 각자의 방식으로 Flexbox를 구현했습니다.

• 웹킷: -webkit-flexbox
• 마이크로소프트 (IE10): -ms-flexbox

예를 들어, IE10에서는 다음과 같이 사용했습니다:

.container {
  display: -ms-flexbox;
  -ms-flex-direction: row;
}

4. 현대 Flexbox의 등장 (2012년 이후)

2012년, 우리가 현재 사용하는 Flexbox 명세가 확립되었습니다. 이제 개발자들은 다음과 같이 간단하게 Flexbox를 사용할 수 있게 되었습니다:

.container {
  display: flex;
  flex-direction: row;
}

이 문법은 직관적이고 강력하며, 이전 버전들의 한계를 대부분 극복했습니다.

5. 브라우저 호환성의 도전

새로운 표준이 제정되었지만, 모든 브라우저가 이를 즉시 지원한 것은 아니었습니다. 특히 인터넷 익스플로러(IE)의 낮은 버전들은 여전히 많은 사용자들이 사용하고 있었죠.

이로 인해 개발자들은 다음과 같이 여러 버전을 함께 사용하는 방법을 택했습니다:

.container {
  display: -webkit-box; /* 매우 오래된 웹킷 기반 브라우저 */
  display: -ms-flexbox; /* IE10 */
  display: flex; /* 현대 브라우저 */
}

이 방식은 "점진적 향상(progressive enhancement)"이라는 전략의 일환으로, 가능한 많은 사용자에게 최선의 경험을 제공하기 위한 것이었습니다.

6. 현재와 미래

2024년 현재, 대부분의 현대 브라우저들은 접두사 없는 표준 flex 속성을 완벽히 지원합니다. 그러나 여전히 일부 개발자들은 구형 브라우저를 사용하는 소수의 사용자들을 위해 이전 버전의 문법을 함께 사용하고 있습니다.

앞으로는 이러한 관행이 점차 사라질 것으로 예상됩니다. 웹 기술의 발전 속도가 빨라지면서, 브라우저들의 표준 지원도 더욱 빨라지고 있기 때문입니다.

https://caniuse.com/?search=flex

결론

Flexbox의 역사는 웹 기술의 진화 과정을 잘 보여줍니다. 새로운 기술의 제안, 실험적 구현, 표준화, 그리고 점진적 적용의 과정을 거쳐 현재에 이르렀습니다.

개발자로서 우리는 이러한 역사를 이해함으로써, 현재의 관행을 더 잘 이해하고 미래의 변화에 더 잘 대비할 수 있습니다. 웹의 미래는 끊임없이 진화하고 있으며, Flexbox의 이야기는 그 여정의 한 장을 보여주는 좋은 예시입니다.

앞으로도 새로운 레이아웃 기술(예: CSS Grid)의 등장과 발전이 계속될 것입니다. 우리는 이러한 변화를 주시하고, 적절히 적용하면서, 더 나은 웹을 만들어 나가야 할 것입니다.