2nd/00_Raw/Kiwi.com Migration.md

Kiwi.com Migration

📌 Brief Summary

Kiwi.com Migration은 웹사이트의 프론트엔드 성능을 최적화하기 위해 기존의 styled-components에서 Tailwind CSS로 스타일링 방식을 전환한 대규모 리팩토링 프로젝트입니다 [1, 2]. 긴 실행 시간(long tasks)을 최적화하는 과정에서 styled-components가 주요 병목 현상임을 발견한 것이 전환의 핵심 계기가 되었습니다 [1]. 이 마이그레이션을 통해 첫 입력 지연(FID) 및 상호작용 속도(INP)와 같은 코어 웹 바이탈(Core Web Vitals) 지표가 획기적으로 개선되었으며, 서버의 처리 지연 시간(Latency)을 크게 단축하는 성과를 거두었습니다 [3-6].

📖 Core Content

• 마이그레이션 배경 및 도구 선정: 성능 병목 현상을 해결하기 위해 Griffel, Linaria 등 여러 대안을 검토했으며, 문서 품질, 성능, 커뮤니티 크기, SSR 지원 여부 등을 종합적으로 평가하여 유틸리티 우선(utility-first) 접근 방식을 제공하는 Tailwind CSS가 최종 선정되었습니다 [7, 8]. 도입 전 실시한 Lighthouse 오딧에서 특정 컴포넌트의 로드 속도가 약 26% 빨라진다는 것을 확인했습니다 [9].
• 초기 설정 및 모노레포(다중 팀) 과제: Kiwi.com의 리포지토리에는 두 개의 개별 팀이 각각 다른 프로젝트를 진행하고 있었습니다 [10]. 서로의 CSS 번들 크기를 부풀리지 않기 위해 PostCSS를 활용해 두 개의 별도 Tailwind 구성을 세팅했습니다 [10]. 이는 VS Code의 Tailwind CSS IntelliSense 및 Prettier 플러그인 설정에 어려움을 주었지만, 실험적 기능(tailwindCSS.experimental.configFile)을 통해 해결했습니다 [11, 12].
• 마이그레이션 실행 및 크로스 브라우저 호환성: 컴포넌트를 변환하는 과정에서 브라우저 캐싱을 활용해 페이지 로드 속도를 높이기 위해 내부(Internal) CSS에서 외부(External) CSS 방식으로 변경했습니다 [13]. 그러나 Safari iOS 14.5 미만 버전에서 flexbox의 gap 속성이나 inset 속성을 지원하지 않는 호환성 문제가 발생했습니다 [14]. 이를 해결하기 위해 Tailwind의 matchUtilities() 헬퍼 함수를 사용하여 safe-inset, safe-space-x와 같은 커스텀 유틸리티 플러그인을 개발해 우회 적용했습니다 [14, 15].
• 핵심 성능 개선 결과:
  • 코어 웹 바이탈 (Core Web Vitals): 모바일 홈페이지 기준 첫 입력 지연(FID)이 75.9% 감소했고, 다음 페인트에 대한 상호작용(INP)이 58.4% 감소했습니다 [3, 4]. 데스크톱 환경에서도 각각 37.1%, 49.7%의 감소율을 보였습니다 [3, 4].
  • 서버 CPU Wall Time (지연 시간): Tailwind는 스타일링에 JavaScript 실행을 의존하지 않으므로 서버의 스타일 연산에 드는 CPU 처리 시간이 10.19초에서 4.79초로 52.91% 대폭 감소했습니다 [5].
• 발견된 단점 및 한계 (Drawbacks):
  • 두 라이브러리(styled-components와 Tailwind)가 동시에 존재하는 마이그레이션 과도기에는 생성된 CSS 코드의 중복으로 인해 초기 번들 크기가 눈에 띄게 증가했습니다 [16].
  • 캡슐화된 styled-components와 달리 유틸리티 클래스가 여러 요소에 분산되어 있어 디버깅이 더 까다로워졌습니다 [16].
  • Tailwind는 클래스 선언 순서에 의존하므로, 동적인 클래스 구성을 관리하기 위해 clsx 같은 부가적인 JavaScript 라이브러리를 사용해야 하는 복잡성이 더해졌습니다 [6].

🔗 Knowledge Connections

• Related Topics: Tailwind CSS, Styled Components, CSS-in-JS, Core Web Vitals
• Projects/Contexts: Kiwi.com, React Performance Optimization
• Contradictions/Notes: 소스에 따르면 Tailwind CSS 도입은 전반적인 성능(Core Web Vitals 및 서버 지연 시간)과 개발 속도 향상에 크게 기여했지만 [3-6, 17], 동시에 디버깅 난이도를 높이고 특정 클래스 구성 도구(clsx)에 대한 의존도를 높이는 트레이드오프(단점)를 수반한다고 지적합니다 [6, 16].

---

Last updated: 2026-04-26