Figma의 그림자 `spread` 기능은 겉보기와 달리 단순히 도형을 확대하는 문제를 넘어선다. 사각형에서는 기하 도형을 키우는 방식이 작동하지만, 구멍이나 복잡한 윤곽을 가진 도형에서는 “모든 방향으로 일정 거리만큼 확장”해야 하므로 별도의 알고리즘과 렌더링 설계가 필요하다. 이 글은 CSS `box-shadow`와 호환되는 기능을 만들기 위해 알고리즘, W3C 명세, 기존 렌더러의 제약, 제품 우선순위를 검토한 과정을 설명한다.
## 그림자 `spread`가 필요한 이유
- Figma는 2020년 7월 23일부터 사각형, 타원, 프레임 배경, 컴포넌트 배경에 그림자 확산 거리를 조절하는 기능을 제공했다.
- CSS의 `box-shadow`와 마찬가지로 `spread` 값은 그림자를 모든 방향으로 확장하거나 수축하는 거리다.
- 사용자는 오랫동안 이 기능을 요청했지만, 기본적인 CSS 기능처럼 보이는 요구사항이 실제로는 그래픽스 엔진 수준의 문제였다.
## 기존 그림자 렌더링 방식
- 일반적인 드롭 섀도는 다음 순서로 만든다.
- 원본 객체의 기하 구조를 복사한다.
- 단일 색상으로 채운다.
- 블러 효과를 적용한다.
- 원본 노드 아래에 렌더링한다.
- 이 방식은 단순한 도형의 그림자를 만드는 데는 충분하다.
- 특히 사각형은 그림자 기하 구조를 확대하는 것만으로도 어느 정도 `spread` 효과를 낼 수 있다.
## 단순한 확대가 실패하는 복잡한 도형
- 복잡한 도형이나 Figma 로고처럼 내부에 구멍이 있는 도형은 전체 기하 구조를 스케일링하면 올바른 결과가 나오지 않는다.
- 스케일링은 도형의 중심과 전체 비율을 기준으로 크기를 바꾸지만, `spread`는 원래 윤곽선에서 모든 방향으로 일정한 픽셀 거리만큼 확장해야 한다.
- 따라서 원하는 결과는 단순히 외곽 크기가 커지는 것이 아니라 다음과 같은 형태다.
- 볼록하거나 오목한 윤곽을 각각 일정 거리만큼 이동한다.
- 내부 구멍도 동일한 규칙에 따라 확장 또는 축소한다.
- 각 경계와 꼭짓점에서 일정한 거리 관계를 유지한다.
## 알고리즘과 렌더러의 제약
- 그림자 확산을 구현하는 알고리즘적 방법은 여러 가지가 있지만, 기존 Figma 렌더링 시스템에 자연스럽게 끼워 넣기 어려웠다.
- 스트로크를 이용해 그림자를 흉내 내는 비알고리즘적 접근도 검토했지만 적합하지 않았다.
- Figma의 스트로크는 특정 꼭짓점 각도를 그림자 확산에 필요한 방식과 다르게 처리한다.
- 프로토타입 렌더러에는 스트로크 생성 코드 자체가 없었다.
- Figma는 서로 다른 두 렌더링 코드베이스를 사용하고 있었기 때문에, 복잡한 기하 생성 로직을 양쪽에 모두 추가하는 방식은 유지보수 비용이 컸다.
- 결국 문제는 “그림자를 크게 만드는 것”이 아니라, 기존 렌더링 구조를 크게 훼손하지 않으면서 임의의 2D 도형을 일정 거리만큼 확장하는 방법을 찾는 일이었다.
## 기능 개발 과정에서의 판단
- 작성자는 Maker Week에서 며칠 만에 끝낼 수 있는 간단한 기능이라고 생각했지만, 실제로는 몇 주가 걸리는 프로젝트가 되었다.
- 개발 과정에서 처음 시도한 접근이 잘못되었음을 확인하고, 도형 확장 알고리즘과 W3C 명세를 다시 검토했다.
- 이 사례는 사용자에게 단순해 보이는 기능도 다음 요소를 함께 고려해야 한다는 점을 보여준다.
- 시각적으로 정확한 결과
- CSS와의 동작 호환성
- 기존 렌더링 엔진과의 통합 가능성
- 구현 복잡도와 장기적인 유지보수 비용
복잡한 도형의 그림자 `spread`를 구현할 때는 단순 확대나 스트로크 재활용만으로 해결하려 하지 말고, “윤곽선에서 모든 방향으로 일정 거리”라는 의미를 먼저 명확히 정의해야 한다. 이후 정확도, 렌더링 성능, 기존 코드베이스와의 통합 비용을 비교해 가장 현실적인 구현 방식을 선택하는 것이 중요하다.
