Sketch 파일 변환하기
Sketch Tip
GUI 디자이너로서 ‘UI 적 측면을 고려하고 유려한 화면을 만들어 정리하는 것이 중요하다.’ ‘어떤 것이 좋은 디자인이고 나쁜 디자인이다.’라는 이야기는 브런치나 블로그 글에서 찾아볼 수 있고 저보다 더 디자인 감각이 뛰어난 선배들이 해 줄 것이라는 것을 잘 알고 있습니다. 이러한 원론적인 이야기도 중요하지만, 현실에서는 실무 진행에 도움이 될 팁이 더욱 필요로 했고 이러한 팁들을 공유하는 것이 프로젝트를 준비하는 주니어 디자이너들에게 실질적인 도움이 될 것이라 생각합니다.
이 글을 찾아 읽어보고 있다면 대부분이 에이전시에서 일하고 있는 디자이너 일 것입니다. 인하우스 디자이너들도 비슷하겠지만 에이전시 디자이너들은 항상 다양한 상황과 마주하게 됩니다. 물론 다양한 클라이언트와 다양한 프로젝트를 진행하고 다양한 분야에서 내 커리어를 쌓아갈 수 있는 좋은 기회이기도 하지만 그만큼 변수가 많은 직업입니다. 그 변수 중 항상 프로젝트 초반부터 겪는 상황 중 하나로 프로젝트가 마무리될 때까지 항상 디자이너들의 마음을 무겁게 만드는 것. 바로 산출물 규격입니다.
이제는 Sketch만 사용할 수 없다.
신입 디자이너가 아니라면 주로 사용하는 UI 툴이 있을 것이고 저 또한 Sketch를 주로 사용하고 있습니다. Sketch의 등장 전 디자이너들이 사용하는 툴은 전반적인 디자인은 포토샵으로, 아이콘이나 일러스트가 필요할 경우 일러스트레이션으로 이렇게 두 가지 프로그램으로 작업이 진행되었고 이로 인하여 프로젝트 초반에 산출물 형식에 대하여 고민해 본 적은 거의 없었습니다.
예전 포토샵처럼 대부분 기업들과 디자이너들이 Sketch를 사용하였다면 좋았겠지만 OS 호환성 문제로 그렇지 못하였습니다. Sketch를 도입하기 위해서는 기업에서 프로그램만 구입하면 끝나는 문제가 아니라 모든 작업자들의 장비를 교환해야 하는 문제가 발생합니다. 이러한 문제의 대안으로 모든 OS에서 사용이 가능한 XD나 Figma 등의 다른 UI 툴들의 사용되고 있습니다. Sketch를 대처하기 위하여 만들어진 만큼 Sketch 파일을 직접적으로 열어볼 수 있도록 만들어져 있습니다.
산출물을 주로 사용하는 툴이 아닌 다른 툴의 파일을 요구하는 상황이 빈번하게 발생하는데, 이러한 경우 클라이언트가 요구하는 프로그램을 사용하여 작업을 진행하고 산출물을 전달하는 것이 가장 이상적인 방법이겠으나 촉박한 일정에 사용하지도 않던 툴로 작업을 한다는 것은 아주 막막한 일입니다. 앞서 이야기하였듯이 스케치 파일은 거의 모든 UI 툴에서 열리기 때문에 익숙한 툴인 스케치로 작업하고 변환을 고려했고 여기서 발생하는 유의점, 문제점에 대하여 고민한 결과입니다.
Sketch 파일을 다른 UI 툴 파일로 변환하기
Sketch, XD, Figma 등 UI 프로그램들은 유사한 목적으로 유사한 일을 하기 위하여 만들어진 프로그램들입니다. 이 말인즉 결국 근본적으로 같은 프로그램이며 동일한 기능을 각기 다른 프로그램에서 구현이 가능함을 이야기합니다.
Symbol, Asset, Component
Sketch에서는 심볼, XD에서는 에셋, Figma에서는 컴포넌트, 에셋으로 불리고 있으며 GUI 디자인에서 공통으로 재사용할 수 있도록 만드는 컴포넌트로 관리 방식이 다를 뿐 같은 요소입니다. Sketch에서는 XD와 Figma와 달리 심볼로 등록하게 되면 등록한 컴포넌트가 메인 컴포넌트(부모)가 되는 것이 아니라 메인에 종속된 컴포넌트(자식)가 되고 메인(부모)은 별도의 페이지(Symbols)에 등록되어 관리됩니다. 부모와 자식 관계, 관리 페이지의 유무만 이해한다면 프로그램을 오가며 사용하는 것이 가능합니다.
Layout, Auto Layout, Frame
Sketch에서 심볼 제작 시 텍스트의 길이에 따라 사이즈가 조절될 수 있도록 설정한 경우 프로그램 간 이동 시 오류가 많이 발생합니다. 이는 설정 방식이 달라 호환이 안 되는 부분으로 조금 다르긴 하지만 기능을 이해하고 있다면 XD에서는 레이아웃의 패딩, Figma에서는 프레임과 오토 레이아웃이라는 명칭으로 사용되고 있으니 조금의 시간을 투자한다면 쉽게 적응해서 사용이 가능합니다.
UI 툴 inspecter 비교Font
UI 툴 변경 시 가장 크게 문제가 일어나는 부분으로 특정 오류 발생 시 디자이너 선에서 정확한 대처 방법은 없습니다. 그 이유는 Sketch와 Figma는 행간이 곧 텍스트 박스의 높이가 되는 것과 달리 XD는 텍스트 행간을 조절하여 텍스트 박스 사이즈를 조절이 불가능하기 때문으로 오류를 두 가지 케이스로 정리할 수 있습니다.
디폴트 행간 < 변경 행간
디폴트 행간과 같거나 크게 설정한 경우, 시각적인 텍스트 위치는 동일하게 표현되고 디폴트 행간으로 박스 높이가 변경됩니다. 사전에 번거롭겠지만 Sketch나 Figma에서 수동으로 텍스트 박스와 같은 사이즈의 박스를 미리 그려준다면 변환 시 문제가 되는 XD에서 해결할 수 있습니다.
디폴트 행간 > 변경 행간
디폴트 행간보다 작은 행간을 사용한 경우, 디폴트 행간으로 박스 높이가 변경되며 시각적인 위치 또한 변경됩니다. 앞서 말한 텍스트 박스를 그려 위치를 잡더라도 수동으로 그린 텍스트 박스보다 디폴트 텍스트 박스 높이가 높아 간격을 잡는데 오차가 발생하게 됩니다. 시각적으로 문제가 발생하기는 하지만 텍스트 박스를 세로 스크롤, 또는 텍스트 박스 고정 크기로 설정하여 가이드상 수치를 맞게 변경할 수는 있습니다. 하지만 문제를 해결하기 위한 적절한 방법이라고 할 수 없습니다.
Sketch나 Figma를 XD로 변환할 계획을 가지고 작업을 하고 있다면 디폴트 행간보다 작은 행간을 사용하지 않도록 유의하는 방법이 최선이라고 생각합니다. 하지만 항상 그렇듯 그러지 못한 상황은 꼭 발생합니다. 이러한 경우 해결이 불가능한 것은 아닙니다. 텍스트 박스의 사이즈에 관련하여 퍼블리셔 또는 개발자와 협의하여 규칙을 만들어 합의점을 찾아갈 수 있습니다.
icon
UI 툴은 기본적으로 벡터 방식을 사용하고 있습니다. 그렇기 때문에 단순한 면과 선으로 이루어진 아이콘이나 일러스트가 있다면 무리 없이 변환이 가능합니다. 하지만 속성값을 어떻게 유지하고 있는지에 따라 오류가 발생하기도 합니다. 오류 발생 시 해당 아이콘이나 일러스트를 SVG로 변환하여 적용할 수도 있지만 한두 장의 페이지를 수정하는 경우가 아니라면 물리적으로 들어가는 공수를 고려해야 하며 Symbol, Asset, Component의 기능을 유지하기 위해서는 세부 속성 조정으로 오류를 수정하는 방법을 추천합니다.
Combined Shape
Figma에서는 shape의 속성이 같지 않을 경우(면으로 그려진 오브젝트와 선으로 그려진 오브젝트) 기존과 전혀 다른 형태로 그려지는 오류가 발생합니다. 이러한 경우에는 두 오브젝트의 속성값을 통일해 주면 동일한 경과를 얻을 수 있습니다. 또한 Sketch에서는 오브젝트의 레이어 순서와는 별개로 combine 할 경우 대부분 원하는 형태로 그려집니다. 하지만 XD와 Figma에서는 combine의 차집합과 교집합은 레이어 순서에 따라 다르게 표현됩니다. 레이어 순서를 변경하여 주거나 combine에서 집합을 변경해 주면 수정이 가능합니다.
Shape
XD로 변환 시 shape이 2개 이상의 오픈된 라인(선분)으로 그려진 경우 이미지가 표현되지 않거나 닫힌 라인으로 표현되는 경우가 발생합니다. 이러한 경우 shape의 그룹 해제를 통해 수정이 가능합니다. Figma에서는 shape에 포함된 path가 Sketch에서 숨어있던 속성값이 표현되어 라인이 두꺼워지거나 두 겹의 라인으로 표현됩니다. 이때 path의 속성값을 지워주면 정상적으로 표현됩니다.
마무리하며
전문적인 UI 툴의 보급으로 인하여 우리 디자이너들에게 조금 더 쾌적한 환경에서 업무 효율을 극대화하여 업무 퍼포먼스를 낼 수 있는 좋은 환경이 만들어졌습니다. Sketch를 시작으로 발전되어온 UI 툴은 Sketch에서 된다면 다른 대부분의 UI 툴에서 기능을 지원하고 오히려 더욱 좋은 기능을 가지고 있기도 합니다. 다만 명칭과 단축키, 세부 속성이 조금씩 달라 사용하지 못하고 있을 뿐입니다. 각각의 프로그램마다 장단점이 있어 어떤 것이 가장 좋은 UI 툴이라 할 수 없습니다.
‘그래서 결국 어떤 프로그램을 사용하는 것이 가장 이상적인 방법이지? 어떻게 하면 원하는 프로그램의 파일을 쉽게 변환할 수 있을까?’에 대한 질문에 대답을 원치 않는 결론을 내려고 합니다.
산출물은 내가 주로 쓰는 툴로 제작 후 변환은 가능하지만 완벽하게 변경할 수 없습니다. 또한 추후 공수가 들어가게 되는 것으로 결국 언 발에 오줌 누기식의 해결이 될 뿐입니다. 결국 이 글을 읽고 있는 우리는 앞서 이야기한 것과 같이 대부분은 에이전시 디자이너일 것입니다. 근본적인 문제를 해결하기 위해서는 클라이언트가 원하는 대표적인 UI 툴의 기본적인 스킬을 알고 사용할 수 있도록 또 배우고 공부해서 준비를 해 두어야 합니다. 당장은 여러 프로그램들을 공부하는 것이 힘들겠지만 언젠가는 본인이 디자이너로서 살아가는데 강력한 무기가 되어 있을 것입니다.
- 라이트브레인 가치디자인그룹 윤종선
