기능 비하인드: (새 탭에서 열림)
피그마(Figma)는 디자인의 디테일을 높여주는 '그림자 확산(Shadow Spread)' 기능을 구현하기 위해 렌더링 엔진 수준에서의 수학적 최적화와 성능 문제를 해결했습니다. 단순해 보이는 기능임에도 불구하고, 다양한 브라우저 환경과 복잡한 벡터 도형 위에서 일관되고 빠른 성능을 보장하기 위해 부호 거리 함수(SDF)와 미팹(Mipmap) 기반의 근사 기법을 도입했습니다. 결과적으로 피그마는 CSS 표준과 일치하면서도 GPU 부하를 최소화하는 고성능 그림자 렌더링 시스템을 구축하는 데 성공했습니다. ### 그림자 확산의 정의와 기술적 난제 * 그림자 확산은 단순히 그림자를 키우는 것이 아니라, 원본 도형의 형태를 유지하면서 외곽선을 팽창(Dilation)시킨 후 흐림(Blur) 효과를 적용하는 작업입니다. * CSS의 `box-shadow` 속성에는 이미 존재하지만, 이를 벡터 그래픽 엔진에서 실시간으로 구현하는 것은 계산량이 매우 많아 성능 저하를 유발하기 쉽습니다. * 특히 단순한 사각형이 아닌 복잡한 패스(Path)나 불리언 연산이 적용된 도형에 대해서는 모든 픽셀에서 거리를 계산해야 하는 비용 문제가 발생합니다. ### 수학적 모델링: SDF와 해석적 접근 * 피그마의 자체 렌더링 엔진인 'Medley'는 둥근 모서리를 가진 사각형과 같은 정형화된 도형에 대해 **부호 거리 함수(Signed Distance Fields, SDF)**를 사용합니다. * SDF를 활용하면 픽셀과 도형 사이의 최단 거리를 수학적으로 즉시 계산할 수 있어, 별도의 텍스처 생성 없이 셰이더(Shader) 내에서 한 번의 패스로 확산과 흐림 효과를 동시에 처리할 수 있습니다. * 이 방식은 메모리 사용량을 줄일 뿐만 아니라, 확대/축소 시에도 계단 현상 없이 매끄러운 고해상도 결과를 보장합니다. ### 복잡한 도형을 위한 미팹(Mipmap) 기반 최적화 * 정형화되지 않은 복잡한 벡터 도형의 경우 SDF를 직접 계산하기 어렵기 때문에, 피그마 엔지니어들은 **최대치 필터(Maximum Filter)**와 가우시안 블러의 관계를 이용했습니다. * 매우 큰 확산 값을 처리할 때 발생하는 GPU 성능 병목을 해결하기 위해 이미지의 해상도를 단계별로 낮춘 **미팹(Mipmap)**을 생성하여 넓은 범위를 빠르게 샘플링하는 기법을 도입했습니다. * 이 근사 기법은 정확도를 크게 손상시키지 않으면서도 연산량을 기하급수적으로 줄여, 복잡한 레이어가 겹쳐진 상황에서도 부드러운 캔버스 조작을 가능하게 합니다. ### CSS 표준과의 일치 및 렌더링 정밀도 * 디자이너가 피그마에서 만든 결과물이 실제 웹 브라우저에서 동일하게 보여야 하므로, 브라우저 엔진(Chrome의 Skia 등)이 그림자를 처리하는 방식과 수치적으로 일치하도록 세밀하게 조정되었습니다. * 특히 모서리 반경(Corner Radius)이 확산 값에 따라 어떻게 변하는지에 대한 복잡한 로직을 물리적으로 올바르게 구현하여, 확산이 적용되어도 도형의 일관성이 유지되도록 설계했습니다. 이 기능의 도입은 단순한 UI 업데이트를 넘어, 고성능 그래픽 엔진이 복잡한 수학적 모델을 어떻게 실용적인 디자인 도구로 녹여내는지를 보여줍니다. 개발자는 피그마의 그림자 수치를 CSS에 그대로 복사하여 사용할 수 있게 되었으며, 디자이너는 성능 걱정 없이 더욱 깊이감 있는 디자인 시스템을 구축할 수 있게 되었습니다.