카카오페이지, 디자인 시스템 구축 위해 Tailwind CSS와 Twin.Macro 도입

카카오페이지는 웹 서비스 개편과 함께 디자인 시스템 구축을 목표로 Tailwind CSS와 Twin.Macro를 도입했다. 기존 Emotion CSS 사용 시 공통 컴포넌트 인식 부재와 컬러, 폰트 등 네이밍 체계의 부재로 인해 유지보수가 어려웠으며, 디자인 코드가 기능 코드를 침범하거나 컴포넌트 가독성을 해치는 문제가 발생했다.

Twin.Macro를 통한 유연한 스타일링

팀에서는 Tailwind의 유틸리티 클래스와 Emotion CSS의 유연성을 결합한 Twin.Macro를 채택했다. 이를 통해 외부 변수를 스타일에 주입해야 하는 경우 등 Tailwind 단독 사용 시 제한적인 상황을 해결하고, 스타일 우선순위 문제를 완화했다. 또한 scrollbar-hide와 같은 복잡한 스타일을 한 줄로 처리하기 위해 커스텀 플러그인을 직접 정의하여 반복적인 CSS 코드를 줄였다.

접근성 향상과 다해상도 대응

브라우저 기본 폰트 크기 설정을 존중하기 위해 px 단위를 자동으로 rem으로 변환하는 pxr이라는 커스텀 단위를 도입했다. 이를 통해 디자인 시안의 px 값을 그대로 사용하면서도 유저의 접근성 설정에 따라 화면이 적절히 조정되도록 했다. 또한 mobile, tablet 등 명확한 네이밍의 **중단점(breakpoint)**을 정의하여 다해상도 대응 코드를 간소화했으며, darkMode: 'class' 옵션을 활용해 OS 설정과 무관하게 개발자가 다크모드를 제어할 수 있도록 구현했다.