요즘 대세 CSS는 뭐다?
정답은요! Tailwind CSS
Tailwind는 기존의 CSS 방식과 다르지요.
디자인 요소를 클래스 단위로 바로 조합할 수 있게 해주는 유틸리티 퍼스트(Utility-first) CSS 프레임워크 입니다.
왜왜왜 대세일까요?
- 빠르다 – CSS 작성 없이 바로 클래스만으로 디자인 완성
- 일관성 있다 – Figma에서 쓰는 spacing/typography 그대로 적용 가능
- 컴포넌트화에 적합 – React, Vue 등과 찰떡
- 불필요한 CSS 미니멀화 – 실제 사용하는 것만 남음
Figma 디자인을 Tailwind CSS로 바로 바꾸는 방법은?
방법 1: 수동으로 스타일 읽고, Tailwind로 변환
가장 기본적인 방법은 Figma에서 디자인 요소의
폰트 크기, 여백, 컬러, 둥근 정도(radius) 등을 보고
Tailwind 클래스에 맞춰 직접 코드로 치환하는 거야.
예시:
Figma에서
- 글씨 크기: 16px →
text-base - 색상: #1F2937 →
text-gray-800 - 여백: padding 16px →
p-4 - 버튼 radius: 8px →
rounded-md - 배경: #3B82F6 →
bg-blue-500
<button class="bg-blue-500 text-white text-base p-4 rounded-md">
로그인
</button>
하지만 실무에선 디자인이 커질수록 수동 작업이 번거롭지.
방법 2: Tailwindify 같은 플러그인 활용 (반자동화)
Tailwindify 같은 Figma 플러그인을 쓰면,
Figma에서 선택한 요소에 대해 Tailwind 클래스 추천을 자동으로 보여 주지요.
- 프레임 선택 → 플러그인 실행 → 자동으로 Tailwind 코드 제안
- 예: 버튼을 선택하면
bg-blue-500 p-4 rounded형태의 클래스 코드 생성 - 일부 플러그인은 HTML 구조 + Tailwind CSS 클래스 조합까지 복사 가능
단점: 완벽하게 변환되진 않지만 초안 + 학습용으로는 최고
방법 3: Locofy.ai or Anima 사용 (디자인 → 코드 전체 변환)
- Figma 파일 전체를 읽고 → React + Tailwind 코드로 자동 변환
- 버튼, 카드, 그리드 구조까지 컴포넌트 단위로 코드화
- Tailwind 기준으로 CSS 자동 생성됨
- 디테일한 UI까지 코딩 없이 변환 가능
- Tailwind 지원은 제한적이나, 커스터마이징 가능
주의: 이런 툴은 100% 완벽한 코드 품질은 아니기 때문에
초안 or MVP 단계에서는 유용, 실제 서비스에는 약간의 손질 필요.
마무리 팁
- Figma 디자인 시스템을 Tailwind 기준으로 구성해두면
디자이너와 개발자 간의 언어 차이가 거의 사라짐. - 클래스 네이밍도 디자인 토큰처럼 사용하면 협업이 훨씬 편해짐.
- Tailwind의 spacing system (
p-2,m-4,gap-6등)은
Figma의 4pt/8pt 디자인 규칙과 매우 잘 맞음.