Figma Auto Layout을 CSS Grid로 변환: 실용 가이드

TL;DR

• Auto Layout은 1차원 흐름에는 flex로, 2차원 레이아웃에는 grid로 매핑됩니다.
• 내보내기 전에 Figma에서 행/열을 정의하세요. 레이어가 지저분하면 그리드도 지저분해집니다.
• 결과를 Tailwind 간격 스케일과 브레이크포인트로 검증하세요.

일부 Auto Layout에 Grid가 적합한 이유

Auto Layout은 기본적으로 선형이지만, 카드가 줄바꿈되거나, 너비가 혼재되거나, 행과 열 양쪽 정렬이 필요할 때는 CSS Grid가 더 나은 대상입니다.

Grid를 선택해야 할 때

• 2차원 배치(행과 열).
• 다양한 콘텐츠 높이에서 일관된 정렬.
• 양축의 간격(gap)을 명시적으로 제어해야 할 때.

Flex를 선택해야 할 때

• 단순한 수평 또는 수직 흐름.
• 엄격한 행 없이 콘텐츠 기반 크기 조정.
• 더 작은 CSS로 최소한의 레이아웃 규칙.

Auto Layout을 CSS Grid로 매핑하기

목표는 모든 픽셀이 아니라 의도를 번역하는 것입니다. 다음 매핑을 출발점으로 사용하세요.

단계별 워크플로

1. Figma에서 레이어를 행/열로 그룹화합니다.
2. Frame/컴포넌트 이름을 변경해 내보낸 클래스가 의미 있게 만듭니다.
3. Grid 열 수(예: 2, 3, 4)와 브레이크포인트 규칙을 결정합니다.
4. 내보낸 뒤 간격을 간격 토큰에 매핑합니다.
5. minmax() 또는 브레이크포인트 클래스로 반응성을 다듬습니다.

Tailwind 매핑 팁

• grid + gap-*로 시작하세요.
• 고정 열에는 grid-cols-*, 유동 레이아웃에는 grid-cols-[repeat(auto-fit,minmax(240px,1fr))]를 사용하세요.
• 간격을 설정(gap-4, gap-6 등)에 맞춰 유지하세요.

반응형 전략

• 모바일 우선: 한 열로 시작한 뒤 md/lg에서 열 수를 늘립니다.
• 콘텐츠 인식 열: 어색한 간격을 피하려 auto-fit과 minmax를 함께 사용하세요.
• 오버플로 점검: 긴 제목이나 가변적인 콘텐츠 높이를 검증하세요.

흔한 실수

• Frame을 과도하게 중첩하면 불필요한 Grid 래퍼가 생깁니다.
• 본질 크기를 무시하면 텍스트가 많은 카드는 더 높은 행이 필요합니다.
• 토큰 불일치: 내보낸 간격이 Tailwind 스케일에 없는 경우.

출시 전 체크리스트

• Grid가 디자인 시스템 간격에 정렬되어 있는가.
• 브레이크포인트가 제품 레이아웃 규칙과 일치하는가.
• 컴포넌트가 Grid 문맥 밖에서도 재사용 가능한가.

FAQ

모든 Auto Layout을 Grid로 변환할 수 있나요?
2차원 제어가 필요할 때만 Grid를 사용하세요. 그렇지 않으면 Flex가 더 단순하고 가볍습니다.

플러그인이 필요한가요?
필수는 아니지만 좋은 내보내기 도구는 시간을 절약해 줍니다. 옵션은 Figma to Code Converter를 참고하세요.

레이아웃 시프트를 어떻게 피하나요?
예측 가능한 열 너비를 설정하고 실제 콘텐츠로 테스트하세요.

추천 도구

비교 페이지에서 내보내기 도구와 Grid 지원을 비교하세요.

다음 단계

• Figma to Code 허브를 탐색하세요.
• 비교 가이드에서 반응형 내보내기 팁을 확인하세요.