Fills, strokes, effects를 CSS로

이번에는 Figma의 paint stack을 CSS로 옮겨봅니다.

Figma에서 색을 칠하고, stroke를 넣고, shadow를 주는 일은 아주 자연스럽습니다. CSS도 비슷한 속성이 많습니다. 하지만 “비슷하다”와 “완전히 같다”는 다릅니다. 여기서 변환기가 일을 합니다.

fills는 background layer가 된다

단색 fill은 CSS background-color로 쉽게 옮길 수 있습니다.

solid fill -> background-color
linear gradient fill -> background: linear-gradient(...)
image fill -> background-image 또는 img
multiple fills -> multiple background layers

여러 fill이 쌓이면 CSS의 multiple background를 쓸 수 있습니다.

background:
  linear-gradient(35deg, #0d9488, #f6c85f),
  url(texture.png);

앞에서 배운 gradient 수학이 여기서 다시 나옵니다. Figma의 gradient handle은 시작점/끝점 모델이고, CSS는 angle과 color stop 문자열입니다. 그러니 중간 모델에서는 handle vector를 보존하고, CSS export 때 angle과 stop으로 변환하는 편이 좋습니다.

stroke는 border보다 복잡하다

Figma stroke는 inside, center, outside align을 가질 수 있습니다. CSS border는 box model과 엮이기 때문에 같은 결과가 아닐 수 있습니다.

inside stroke -> border-box 안쪽으로 그리는 효과
center stroke -> geometry 경계 양쪽으로 반씩
outside stroke -> geometry 밖으로 확장

CSS로 근사할 때는 이런 선택지가 있습니다.

border: 단순 rectangle에 좋다.
outline: layout 크기를 바꾸지 않는 외곽선에 좋다.
box-shadow: spread로 outside stroke를 흉내낼 수 있다.
pseudo-element: stroke 전용 레이어를 따로 만들 수 있다.
SVG stroke: vector stroke align이 중요한 경우 더 적합하다.

effects는 paint와 composite 사이에 걸쳐 있다

Drop shadow는 box-shadow와 잘 맞는 편입니다. 하지만 layer blur, background blur, blend mode는 CSS에서도 paint/composite 규칙을 같이 봐야 합니다.

drop shadow -> box-shadow
layer blur -> filter: blur(...)
background blur -> backdrop-filter: blur(...)
blend mode -> mix-blend-mode
opacity -> alpha compositing

shadow는 bounds 밖으로 픽셀을 만들고, blur는 주변 픽셀을 섞고, blend는 아래 레이어 색과 계산합니다. 그러니 이 속성들은 단순한 “스타일 값”이 아니라 렌더링 단계에 영향을 주는 수학 함수입니다.

데모에서 볼 것

데모에서는 fill, stroke, effect를 켜고 끄며 CSS 속성으로 어떻게 projection되는지 봅니다.

오늘의 핵심은 Figma paint를 CSS property 이름으로만 외우지 않는 겁니다. fill은 layer, stroke는 geometry 주변의 두께, effect는 픽셀 또는 레이어 합성 함수입니다.