Dev

Flexbox 활용사례 모음: Solved by Flexbox

January 9, 2017

author:

Flexbox 활용사례 모음: Solved by Flexbox

Flexbox는 웹페이지에서 다양한 레이아웃을 만들기 위해서 쓸 수 있는 최신 CSS 기능이다. 사실 지금까지 CSS를 이용해서 레이아웃을 만드는 것이 그리 간단한 일은 아니었다. 수직 중앙 정렬은 잘 알려진 문제 중 하나다. 물론 지금까지 해결방법이 없었던 것은 아니지만 대개는 CSS Hack을 사용해야 하므로 코드가 직관적이지 않았으며, 쓸데없는 속성을 사용해야만 했다. 게다가 어떤 때에는 JavaScript를 사용해야 이런 문제를 해결할 수 있었다. 이런 수 많은 레이아웃 문제를 해결하기 위해 나온 스펙이 Flexbox다. Flexbox는 직관적인 코드를 제공하면서도 원하는 기능을 쉽게 구현할 수 있도록 만들어준다.

좋은 거 나도 아는데, IE는 어쩔껴?

Can I use를 보면 모던 브라우저는 완벽하게 지원하고 있지만 당연하게도 IE쪽에 문제가 있다. IE9 이하의 버전은 지원하지도 않으며 그나마 10부터는 지원을 하고있지만 많은 버그를 안고있다는 문제가 있다. Flexbox 제대로 프로덕션에서 사용하려면 IE9 이하는 대응을 포기하고, 추가적으로 크로스 브라우징을 위한 호환 코드가 필요하다. 많은 한국 사이트들은 아직도 IE9는 커녕, IE8 혹은 그 이하까지 대응해야하기 때문에 지금 당장 사용하는 것은 사실상 불가할 수도 있다.

그럼에도 Flexbox는 근시일내에 다가올 것이다. 매년 브라우저 사용률은 변화하고 있고, 분명 1년 전에 제작된 사이트들과 현재 제작되는 사이트들이 지원을 요구하는 브라우저 목록이 달라졌다. 나조차도 당장 얼마 전 새로 제작하게 된 사이트가 IE9 이하의 구버전을 대응하지 않기로 하면서, 원한다면 얼마든지 Flexbox를 사용할 수 있었다. 아쉽게도, 내가 Flexbox를 잘 몰랐고, 때문에 Flexbox를 사용해 개발하면 브라우저 호환성을 보장하기가 어려웠다(두려웠다). 결국 기존의 방식을 고수하여 개발을 했다. 웹 개발자로서 미래를 미리 준비하지 않는다면 나처럼 안타까운 상황이 발생할 수 있다.

Solved by Flexbox

Solved by Flexbox는 Flexbox의 활용사례를 알아볼 수 있는 모음집이다. 잘 알려진 어려운 레이아웃 이슈들에 대해 다루며 그것을 Flexbox로 어떻게 해결할 수 있는지를 보기 쉽게 알려준다. 내가 약 1년 전에 번역한 탁월한 프론트엔드 엔지니어의 저자인 Philip Walton의 가장 핫한 프로젝트다. 번역이 필요할 정도로 그리 어려운 내용을 다루고 있지는 않지만 개인 공부 목적으로 번역을 시작했다. 코드가 BEM 스타일의 컴포넌트 단위로 잘 만들어져있기 때문에 실제 프로젝트에 접목해서 사용하기에도 좋다. Flexbox에 관심이 있으신 분은 꼭 한 번 참고해보시고 오역이나 더 매끄러운 번역은 레포지토리에 PR을 날려주시면 감사하겠다.