카카오엔터테인먼트 FE팀의 Tailwind CSS 도입기

카카오엔터테인먼트 FE팀이 카카오페이지 웹 개편 시 Emotion CSS에서 Tailwind CSS로 전환한 배경과 실제 적용 방식을 다룬다. 디자인 시스템 연동의 어려움과 Twin.Macro를 통한 유연한 병용까지 실무 판단 과정이 담겼다.

핵심 포인트

상세 정리

기존 문제 1: 페이지 단위 UI 작업에서 공통 컴포넌트 추출 기준이 없어 비슷한 컴포넌트가 이름만 달리해 중복 생성됐다.
기존 문제 2: 디자인팀과 개발팀 간 색상·폰트 네이밍 공유 체계가 없어 폰트 사이즈 일괄 변경 같은 작업에 수작업이 필요했다.
Emotion CSS의 한계: ThemeProvider로 컴포넌트를 감싸고 useTheme 훅으로 값을 꺼내야 해 기능 코드와 디자인 코드의 결합도가 높아졌다.
인라인 CSS-in-JS 문제: 복잡한 스타일은 컴포넌트당 수십 줄의 css 코드를 추가해 가독성을 해쳤다.
Tailwind 선택 이유: 디자인 시스템 네이밍을 class 속성에 그대로 쓸 수 있어 boilerplate 없이 디자인-코드 네이밍 일치가 가능하다.
가변 값 문제: `w-[${width}px]` 같은 동적 값 주입은 Tailwind에서 불가. Twin.Macro가 Emotion CSS를 병용하게 해 css prop에서 tw 유틸리티와 인라인 스타일을 섞어 사용한다.
아토믹 디자인: 디자인팀과 개발팀이 atom→molecule→organism 단위로 공통 컴포넌트를 정의해 중복 컴포넌트 문제를 근본적으로 해결했다.
tailwind.config.js: 디자인 시스템의 색상·폰트 토큰을 config에 등록해 전사 공통 유틸리티 클래스로 사용한다.

왜 읽나CSS 라이브러리 전환과 디자인 시스템 연동을 함께 고려해야 하는 실무 FE팀에게 선택 근거와 실제 절충안을 비교하는 레퍼런스가 된다.

카카오 엔터테인먼트 FE 블로그

원문은 여기서 이어서 읽을 수 있어요

읽음 (0)

이 글과 비슷한