Penpot, WebGL 렌더러에서 '세 가지 스트로크 문제'를 해결하다

The Three-Stroke Problem

Penpot이 SVG 렌더러를 WebGL 렌더러로 교체하면서 겪은 어려움을 소개합니다. 디자인 도구에서 테두리(stroke)는 안쪽, 중앙, 바깥쪽의 세 가지 유형으로 나뉘는데, CSS, SVG, Skia 각각에서 이들을 구현하는 방식이 달라 혼란을 야기합니다. Penpot은 Skia 라이브러리를 사용해 각 유형을 구현했으며, 특히 복잡한 패스(path)에서는 클리핑(clipping)과 레이어(layer) 기법을 활용합니다. 또한 다중 테두리 지원과 점선/대시 스타일 처리 방법도 다룹니다.