SVG 호환

최근 선보이는 UI 디자인 툴은 다양한 해상도를 대응하기 위해 벡터 기반으로 나오고 있는데요.

그에 따라 비트맵보다는 벡터 그래픽인 svg를 실제 제품에 많이 적용하기 시작했습니다.

벡터는 좌표값을 실시간으로 그려주기 때문에 어떠한 해상도에도 항상 선명하게 그래픽을 표현해 주고 있어서 아이콘이나 간단한 일러는 기존 png가 아닌 svg로 많이 가는 추세인 거 같습니다. 

그러면 코드 기반인 svg는 가볍고 좋기는 한데 디자인 툴 3대 장인 스케치, Xd, 피그마끼리 서로 호환도 될 법한데 애매하게 안 되는 부분이 있습니다.

그래서 100 사이즈의 검은색 동그라미를 그려놓고 각각의 툴들이 어떻게 svg를 생성하는지 보면 조금 재미있는 사실을 알 수가 있습니다.

위 그림의 파란색은 레이어 이름이고 빨간색은 아트보드 이름입니다. 

svg는 이렇게 xml 형태로 구성되어 있는데 각 제조사마다 다른 형태로 생성하는 것을 알 수가 있습니다.

스케치의 경우 무리하게 많은 데이터를 가지고 있습니다. 장점이라면 프런트엔드에서 컨트롤하기가 용이하게 설계되어 있지만 몇 가지 노드는 지워도 될 거 같네요.

예를 들어 title 하고 그룹 아이디가 page-1 인 노드는 지워도 됩니다. 

Xd의 경우엔 한글 버전으로 해본 건데 여백을 강제로 _ 문자로 만들어 주고 있고 clip-path라는 것을 생성시켜주고 있네요. 어도비 제품 자체 규격이 따로 존재하는 느낌입니다.

삐그마의 경우엔 초 경량화되었네요. 

svg도 비트맵처럼 최적화라는 게 존재하는데 그건 svg 내 노드 데이터를 최소 하는 것입니다. 그런데 삐그마는 줄여도 너무 많이 줄여서 컬러 값을 헥스 코드(black => #000)로 바꿔줘야 할 거 같고 circle 노드에 id 값이 빠져있는데 id가 존재하지 않으면 프런트엔드에서 svg 제어가 불가능합니다. 

여기서 제어란 코드로 색상값을 제어한다던가 그림자를 준다던가 투명도 조절을 한다던가 등이 있습니다.

그래서 삐그마는 경량화가 잘되어 있어서 가볍고 좋으나 실제 개발을 하려면 별도로 노드 데이터를 수정해야 될 거 같습니다. 

-

이렇게 하나의 도형을 표현하는 데에 있어 툴간 규격이 달라 호환성이 아쉽긴 하지만 왜 그런지 알면 도움이 될 거 같아 이렇게 글로 적어 봅니다. 

스케치에서 svg로 에셋을 복사하고 Xd에 붙여 넣기 하면 잘 됨. 그러나 구조는 레이어 구조는 달라짐. 마스크가 생김. 이건 그냥 알아서 언마스크해서 해결하면 됨. 그러나 Xd는 자체 에셋을 svg로 복사하는 등의 기능 제공 안 함. 그래서 Xd에선 스케치로 보내려면 svg로 내 보낸 다음 가져와야 함.

스케치에서 svg로 에셋을 복사하고 삐그마에 붙여 넣기 하면 잘 됨. 그러나 구조는 레이어 구조는 달라짐.

반대로 삐그마에서도 잘 됨. 단 삐그마에서 스케치로 넘길 때 비트맵이 포함되면 안 됨.

-
그리고 대부분 svg를 다룰 때 라인이던 면이던 단순한 아이콘류를 사용해서 큰 이유 없이 잘 쓰셨겠지만 조금 복잡한 아이콘을 쓰게 되면 별도의 최적화와 테크닉이 필요합니다. 이건 담에 공유해 드리겠습니다.