브라우저는 오랫동안 CSS 작업을 번거롭게 만들어 왔습니다. 특히 구형 브라우저나 아직 실험 단계에 있는 최신 CSS 속성들은 브라우저마다 동작 방식이 달라서, 모든 환경에서 UI가 동일하게 보이고 작동하도록 만들려면 특정 속성에 접두사(prefix)를 붙여야 했습니다.
대표적인 예시: flexbox
가장 좋은 예가 바로 CSS의 flexbox입니다. flexbox는 모든 최신 브라우저와 IE10·IE11(flexbox가 여전히 부분적으로만 지원됨)에서 정상 작동하기 위해 무려 4개의 접두사가 필요했습니다.
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;이렇게 여러 줄의 접두사 코드를 매번 손으로 입력하고 외우려고 한다면, 그건 소중한 시간과 정신적 에너지를 낭비하는 일입니다.
해결책: Autoprefixer 사용하기
다행히 요즘은 강력한 개발 도구들이 많습니다. 더 이상 접두사를 직접 타이핑할 필요가 없으며, 애초에 외우려고 시도조차 하지 않는 것이 좋습니다. 대신 Webpack이나 Gulp 등 여러분이 사용 중인 빌드 도구(태스크 러너/번들러)와 함께 Autoprefixer를 활용하세요.
Autoprefixer를 사용하면 CSS 속성 접두사에 대해 전혀 걱정할 필요가 없습니다. 최신 CSS를 프로덕션 서버에 배포하기 전 후처리(post-processing) 단계에서 알아서 필요한 모든 접두사를 추가해 주기 때문입니다. 덕분에 개발자는 순수한 표준 CSS 코드만 깔끔하게 유지할 수 있고, 브라우저 호환성 문제는 도구에 맡기면 됩니다.