피그마로 SVG export했는데 리소스가 이상하다고?

"컴포넌트의 상태별 SVG 소스를 뽑았는데 사이즈가 다 달라요."

어느 날, 개발자에게 이런 이야기를 들었다. 
헐레벌떡 리소스를 확인해보았지만 컴포넌트는 모두 같은 사이즈였고, 그걸 상태 별로 variant 해둔 것 뿐이기 때문에 다르게 추출될 이유가 없었다.

 

 

대강 저 동그란 라디오 컴포넌트를 export한 상황이었는데 직접 해보니 정말 사이즈가 다르게 뽑혔다.
여러 테스트를 해보다 보니 두 가지 난감한 상황을 마주할 수 있었다.

- SVG의 사이즈가 1px씩 틀어지는 현상 (개발자가 문의한 것)
- 보더가 틀어지는 현상

 

 

---

SVG 사이즈가 틀어지는 케이스

내 경우에는 SVG의 height가 1px씩 틀어지는 현상이었다. 16x16 컴포넌트라면 16x17로 뽑히는 거다.

사건 현장(?)을 좀 더 명확히 보자면
1. circle이라는 master 컴포넌트가 있고
2. circle의 instance로 test-component라는 컴포넌트를 제작하였다.
3. 개발자 김 모 씨는 test-component에서 circle의 리소스를 추출했다. 

 

확대해서 보자

왼쪽은 cirlce의 마스터 컴포넌트에서 추출한 SVG이고 16x16으로 잘 뽑혔다.
오른쪽은 조립형 text_component에서 추출한 SVG 소스인데 16x17로 뽑혔다. 이를 통해 circle의 master component 자체는 문제가 없는 것을 알 수 있었다.

추가로 여러 가지 변수를 테스트해보았고, 문제 지점을 찾아냈다.

 

 

문제 지점

조립된 test_component가 문제였다
height를 고정하고 circle을 중앙 정렬하다 보니 circle 컴포넌트가 소수점으로 위치하게 된 케이스였다.
Figma에서 소수점으로 떨어지는 y값을 처리하면서 리소스에도 0.5px이 반영되어 1px이 밀린 것 같다.

 

해결!

위 케이스는 소수점으로 떨어지는 y값을 정수로 고쳐주면, 본래 circle 컴포넌트 사이즈 16x16로 잘 추출된다.
컴포넌트를 제작할 때는 내부 padding을 고려하여 제작하는 것이 베스트일 것 같고, 소수점을 사용한다면 master 컴포넌트에서 리소스를 뽑도록 가이드하자!

 

---

 

 

보더 세팅이 다르게 뽑히는 현상

이 케이스는 테스트를 하다 보니 발견한 현상이었다.
눈으로 보기엔 동일하지만 구조가 다른 두 컴포넌트를 가지고 SVG로 추출해보았다.
그 결과, 하나는 정상적으로 추출되지만 다른 하나는 의도한 대로 추출되지 않는다. (오른쪽 아래)

 

 

둘은 어떤 차이가 있을까?

 

오른쪽은 Frame 자체에 radious와 stroke를 준 것이고, 왼쪽 컴포넌트의 경우는 Layer를 주어 만든 것이다.
Frame만으로 제작할 경우, layer가 하나 줄어들기 때문에 좀 더 간소하게 관리할 수 있을 것 같았다.
하지만 눈으로 동일하게 보이는 것과는 달리 SVG export에서 문제가 있었다.

 

 

그래서 자세히 어떤 문제가?



추출된 SVG를 뜯어보자.

Layer로 제작한 녀석
-  Frame 밑에 stroke가 들어간 layer가 존재한다. (제작한 그대로)
- 다만 inside였던 스트로크가 center로 변경되긴 했지만 디자인 결과물은 동일하다.

Frame으로 제작한 녀석
- Frame에 적용했던 속성들이 outline화 되면서 별도의 layer로 분리되었다.
- outline된 layer는 2px의 두께를 가진 border가 되었다. 디자인 결과물이 변경되었다.

 

→ 이를 통해 컴포넌트를 제작할 때, Layer와 Frame을 구분해서 사용해야 함을 알 수 있었다.
PNG 등의 이미지로 추출할 때는 아무 문제가 없지만 SVG로 뽑으면 vector로 치환하면서 문제가 생기는 듯하다. Frame의 어떠한 속성 때문이라기보단 단순 버그인 것 같다.

---

 

 

내용 요약

! 컴포넌트를 소수점으로 놓고 export하지 말자
! 컴포넌트를 제작할 때 Frame 자체에 속성을 주어 만들기보단 Layer를 사용하자