카카오 OROR Forge, Figma 디자인을 React·Tailwind CSS 코드로 변환하는 도구 공개

카카오의 OROR Forge 팀은 Figma 디자인을 실전용 React 코드와 Tailwind CSS로 변환하는 도구를 개발했습니다. 이 도구는 인라인 스타일을 Tailwind CSS 클래스로 매핑하고, 어댑터 패턴을 적용해 향후 SCSS나 Styled-components 등 다른 CSS 프레임워크 지원에 대비한 유연한 구조를 갖추고 있습니다. 주요 기능으로는 컴포넌트 Props 정의, 커스텀 데이터 구조(Model) 주입, UI 요소와 데이터/이벤트를 연결하는 데이터 바인딩, 그리고 외부 React 컴포넌트(예: FacebookShareButton)를 디자인에 연동하는 Replacements 기능이 포함됩니다. 또한 'oror-forge/react' 툴킷을 활용해 모달과 같은 인터랙션 컴포넌트의 로직도 자동으로 생성할 수 있습니다.