OROR, Figma AutoLayout 및 Sizing을 CSS Flexbox로 변환하는 도구 개발기 공개

OROR 프론트엔드 팀은 잦은 디자인 변경과 빠른 협업이 필요한 신규 서비스 환경에서 기존 상용 Figma to Code 도구(Amplify Studio, Locofy 등)의 한계를 극복하기 위해 자체 도구 OROR Forge를 개발했다. 이 도구의 핵심 목표는 '픽셀 퍼펙트'한 코드 생성과 프로젝트 특수 환경에 최적화된 실용성 확보이다.

Figma 속성의 CSS 변환 로직

도구는 Figma의 구조적 개념을 CSS Flexbox와 Absolute Positioning으로 정밀하게 변환한다.

• AutoLayout -> Flexbox: display: flex, gap, align-items 등을 매핑한다. 특히 CSS가 지원하지 않는 음수 Gap은 margin과 선택자(> * + *)를 활용하여 구현하며, First on Top 옵션은 z-index 역순 설정으로 모방한다.
• Sizing 변환: Figma의 Fixed, Hug Contents, Fill Container 옵션을 각각 width: px + flex-shrink: 0, width: max-content, flex: 1 또는 align-self: stretch로 변환한다.
• Constraints 변환: 부모 대비 위치 정의(Left, Right, Center, Scale)를 position: absolute와 calc() 함수, transform을 조합하여 CSS로 재현한다. Center 정렬 시 오프셋 값을 계산하여 정밀도를 높인다.

텍스트 속성 및 정렬 처리

fontSize, lineHeight, fontWeight 등 기본 텍스트 속성은 1:1로 매핑한다. 다만 Figma의 Vertical Alignment은 CSS에 직접 대응하는 속성이 없어 Flexbox(justify-content)로 구현해야 하며, 텍스트 말줄임(Text Truncate)은 text-overflow: ellipsis와 -webkit-line-clamp 등을 활용한다.

다음 편에서는 생성된 CSS 코드를 React 등 실전 프레임워크에서 사용 가능한 형태로 변환하는 과정이 다뤄질 예정이다.