Vector와 text 변환

이번에는 Figma vector와 text를 CSS로 옮기는 문제입니다.

rectangle은 div로 옮기기 쉽습니다. 그런데 vector path와 text는 조금 더 예민합니다. 둘 다 “대충 보이면 됨”으로 넘기면, 실제 제품 화면에서 금방 티가 납니다.

vector는 SVG가 자연스럽다

Figma vector는 path, boolean operation, stroke, fill, winding rule 같은 정보를 가질 수 있습니다. CSS box만으로 표현하기 어려운 경우가 많습니다.

simple icon -> inline SVG
complex illustration -> SVG asset or image asset
editable vector -> SVG path model
decorative mask -> clip-path / mask / SVG

CSS clip-path: polygon(...)으로 간단한 도형은 만들 수 있습니다. 하지만 bezier curve, stroke join, marker, fill rule이 중요하면 SVG가 훨씬 솔직한 표현입니다.

Figma vector와 text는 CSS box만으로는 부족할 때가 많습니다. path, stroke, text metrics는 SVG나 export asset과 함께 판단해야 합니다.

text는 metric이 문제다

Figma text를 CSS로 옮길 때는 font family, weight, size만 보면 부족합니다.

fontFamily
fontWeight
fontSize
lineHeight
letterSpacing
paragraphSpacing
textAlign
textBox resize mode

특히 line-height와 letter-spacing은 브라우저와 Figma의 렌더링 차이가 보일 수 있습니다. 같은 숫자를 넣어도 폰트 파일, fallback, antialiasing, line box 계산 때문에 픽셀이 조금 다를 수 있습니다.

그래서 text export에서는 “정확한 픽셀 고정”과 “웹에서 자연스러운 텍스트” 중 무엇이 중요한지 결정해야 합니다. 로고나 복잡한 타이포그래피는 SVG/이미지로 내보내는 편이 안정적일 수 있고, 실제 문단 텍스트는 CSS text로 남겨야 접근성과 반응형이 살아납니다.

데모에서 볼 것

데모에서는 vector path와 text box를 나란히 두고, CSS box, SVG path, CSS text가 각각 어떤 정보를 책임지는지 봅니다.

오늘의 핵심은 이겁니다. 모든 Figma node를 div로 바꾸려고 하지 마세요. div는 박스에 강하고, SVG는 벡터에 강하고, CSS text는 실제 텍스트에 강합니다. 도구마다 특기가 있습니다.