brunch

You can make anything
by writing

C.S.Lewis

by 윤창 Jul 26. 2020

제플린아, 슬래시를 품어다오

심볼 이름에 쓰인 슬래시를 제플린에서 유지하는 방법


스케치의 심볼기능은 반복을 줄이고 빠른 작업을 위한 필수 기능이다.



심볼의 다양한 장점들 중, 이름에 슬래시를 넣어서 그룹핑하고 분류하는 방법은 체계적인 디자인 시스템을 만드는데 필수적으로 적용해야 하는 부분이다.

잘 구조화된 심볼은 원하는 심볼을 빠르게 찾을 수 있게 도와준다.


그러나, 디자인 작업을 원활하게 만들어주는 슬래시는 개발자와의 협업에서 몇 가지 문제점을 갖고 있다.

실제 개발자들이 사용하는 아이콘의 파일명은 카멜 케이스(camelCase), 스네이크 케이스(snake_case), 케밥 케이스(kebab-case) 등 다양한 표기법으로 작성되며 슬래시를 사용하는 표기법은 존재하지 않는다는 것이다.


슬래시를 위한 나라는 없다


다행히 우리의 구세주 제플린은 다양한 케이스의 표기법을 자동으로 변환해주는 기능을 갖고 있지만, 실제 'ic / content / music / 32' 이런 이름을 가진 심볼을 제플린에서 확인해보면 맨 뒤에 '32'만 덩그러니 남아 있는 절망적인 상황을 마주하게 된다.


얘야, 집에 웃어른 안 계시니...?




사실 지난주에 위와 같은 상황으로 필자의 회사에서 많은 디자이너들이 멘붕에 빠졌었었고 한참을 헤매다 어쩔 수 없이 심볼 이름에 슬래시를 빼고 계층 구조를 포기하려던 찰나에 극적으로 제플린 공식 미디엄에 쓰인 글을 찾게 되어 완벽하게 해결하였고 계층구조도 계속 유지할 수 있게 되었다!


좌절한 시간에 비해 너무 쉽게 해결이 되어 허무했지만 누구나 충분히 겪을 수 있는 이슈라고 생각되어 '한글로'이 과정을 남겨야겠다고 생각했다.


Use Symbol Instance Names를 체크하도록 하자!



제플린 공식 포스팅 :

https://blog.zeplin.io/exporting-assets-from-symbols-in-sketch-1e1b44d33722


작가의 이전글 텍스트의 명도를 대비하라

작품 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari