앱 개발용 Zeplin SVG 추출 (최적화 끄기)

android, ios를 개발 할때는 일반적으로는 화면 사이즈 마다 png 이미지를 준비해줍니다.

물론 svg(벡터이미지)를 할 수 있지만 생각보다 앱이 느려져서 꺼리고 있습니다.

 

flutter도 svg를 이용하면 느려지는건 마찬가지지만, 

최적화보다는 생산성에 맞춘 프로젝트라고 생각하여 svg를 이용해 보겠습니다.

 

 

 

그렇다면, 앱 개발을 할때, 디자인 파일을 어떻게 하면 쉽게 가져올까요?

 

ui/ux 제작툴인 Zeplin을 이용하면 디자이너가 작업한 벡터파일을 개발자가 손이 발이 되도록 싹싹 빌지 않아도 손 쉽게 다운받을 수 있습니다. 

 

이미지를 클릭하면 Assets을 여러종류로 다운받을 수 있습니다.

SVG 옆에 있는 다운로드 버튼을 누르면 끝~!

 

 

 

 

 

 

 

다운받은 svg 파일 코드

<svg width="180" height="180" viewBox="0 0 180 180" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <clipPath id="dzr39mpi0a">
            <path d="M412 0v914H0V0h412z"/>
        </clipPath>
        <clipPath id="xu0g9cepnb">
            <path d="M8 38v8H0v-8h8zM8 0v32H0V0h8z"/>
        </clipPath>
        <clipPath id="7nxr9wv7sc">
            <path d="M62.996 2.283a2 2 0 0 1 .739.738l58.545 101.983a2 2 0 0 1-1.734 2.996H3.454a2 2 0 0 1-1.734-2.996L60.265 3.021a2 2 0 0 1 2.73-.738z"/>
        </clipPath>
    </defs>
    <g clip-path="url(#dzr39mpi0a)" transform="translate(-116 -249)">
        <g clip-path="url(#xu0g9cepnb)" transform="translate(202 328)">
            <path d="M0 0h8v32H0V0zm0 38h8v8H0v-8z" stroke="#55C86C" stroke-width="12" fill="none" stroke-miterlimit="5"/>
        </g>
        <g clip-path="url(#7nxr9wv7sc)" transform="translate(144 285)">
            <path d="m63.735 3.021 58.545 101.983a2 2 0 0 1-1.734 2.996H3.454a2 2 0 0 1-1.734-2.996L60.265 3.021a2 2 0 0 1 3.47 0z" stroke="#55C86C" stroke-width="12" fill="none" stroke-miterlimit="5"/>
        </g>
    </g>
</svg>

 

하지만 이렇게 받은 svg 파일은 flutter에서 인식이 될때도 있고 안될때도 많습니다. 

 

 

 

 

최적화 옵션 끄기

이럴때 해결은 우측 상단에 있는 [설정 > Optimize Assets > SVG] 버튼을 눌러 최적화 옵션을 꺼줘야 합니다.

 

꺼주고 나니 SVG설명이 바꼈습니다.

1 optimized vector image => 1 vector image

 

 

 

 

 

SVG코드 

범용으로 사용할 수 있는 svg 이기 때문에, 더 코드가 많이 늘어났습니다. (1112자 -> 1845자)

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" width="180px" height="180px" viewBox="0 0 180.0 180.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <clipPath id="i0">
      <path d="M412,0 L412,914 L0,914 L0,0 L412,0 Z"></path>
    </clipPath>
    <clipPath id="i1">
      <path d="M8,38 L8,46 L0,46 L0,38 L8,38 Z M8,0 L8,32 L0,32 L0,0 L8,0 Z"></path>
    </clipPath>
    <clipPath id="i2">
      <path d="M62.995735,2.28262673 C63.3030996,2.45907674 63.5580562,2.71403335 63.7345062,3.02139789 L122.280226,105.004265 C122.830155,105.962206 122.499396,107.184577 121.541455,107.734506 C121.238433,107.908463 120.895125,108 120.54572,108 L3.45428001,108 C2.34971051,108 1.45428001,107.104569 1.45428001,106 C1.45428001,105.650595 1.54581661,105.307287 1.71977382,105.004265 L60.2654938,3.02139789 C60.8154231,2.06345657 62.0377937,1.73269745 62.995735,2.28262673 Z"></path>
    </clipPath>
  </defs>
  <g transform="translate(-116.0 -249.0)">
    <g clip-path="url(#i0)">
      <g transform="translate(64.0 249.0)">
        <g transform="translate(138.0 79.0)">
          <g clip-path="url(#i1)">
            <path d="M0,0 L8,0 L8,32 L0,32 L0,0 Z M0,38 L8,38 L8,46 L0,46 L0,38 Z" stroke="#55C86C" stroke-width="12" fill="none" stroke-miterlimit="5"></path>
          </g>
        </g>
        <g transform="translate(80.0 36.0)">
          <g clip-path="url(#i2)">
            <path d="M63.7345062,3.02139789 L122.280226,105.004265 C122.830155,105.962206 122.499396,107.184577 121.541455,107.734506 C121.238433,107.908463 120.895125,108 120.54572,108 L3.45428001,108 C2.34971051,108 1.45428001,107.104569 1.45428001,106 C1.45428001,105.650595 1.54581661,105.307287 1.71977382,105.004265 L60.2654938,3.02139789 C60.8154231,2.06345657 62.0377937,1.73269745 62.995735,2.28262673 C63.3030996,2.45907674 63.5580562,2.71403335 63.7345062,3.02139789 Z" stroke="#55C86C" stroke-width="12" fill="none" stroke-miterlimit="5"></path>
          </g>
        </g>
      </g>
    </g>
  </g>
</svg>

 

 

 

 

 

 

 

참고 : https://support.zeplin.io/en/articles/5203377-optimized-assets-in-zeplin