인정받는 디자이너 되기 위한 에셋 내보내기와 작명법 – 스케치 강좌

스케치 강좌 열여섯 번째입니다. 이번에는 스케치에서 에셋을 내보내는 방법과 센스 있는 에셋 작명법에 대해 알아봅시다. UI 디자인 작업이 끝나면 항상 에셋을 어떻게 넘길지 고민이죠. 제플린에 올리면 끝일 것 같지만 사실 올리기 전에 해야 할 일들이 있습니다. 그 ‘일’은 바로 ‘작명’이라는 습관입니다. 아이콘 이름은 뭐라고 할지, 이미지는 어떻게 할지, 확장자는 어떻게 할지 등등.. 실무에서 작명 시 알아두면 좋은 팁들을 알려드릴게요! 영상을 통해 확인해보세요 : )

*스케치 툴은 Mac OS에서만 사용이 가능합니다.

핵심 요약

에셋 내보내는 기능 : 우측 하단 Make Exportable 클릭
Size : 몇 배로 출력할 것인지
Prefix/suffix : 접두사/접미사 (iOS 경우 2배 @2x)
Format : 확장자 고르기

iOS 배율 예시

출력하면 이렇게 파일명에 @2x, @3x가 나옵니다.

여러 가지 포맷이 있지만, 우리가 집중해야 할 확장자는 SVG와 PDF입니다. 안드로이드와 웹에서는 SVG를 사용하며, iOS에서는 PDF를 사용합니다. SVG와 PDF는 벡터 기반의 이미지를 담을 수 있는 확장자라서 아이콘 같은 경우는 이 확장자로 출력을 하면 따로 배율에 맞게 출력할 필요 없이 하나로 적용이 가능합니다.

인정 받는 에셋 작명법

이제 작명에 대해 이야기해봐요.

디자이너라면 파일명, 레이어명, 심볼명 이런 부분을 정리하는 게 기본이죠. 추가로 습관을 들이면 좋은 게 바로 에셋 파일 작명입니다. 이 부분은 개발자와 사전에 합의를 하고 진행하는 것이 좋지만, 내부에 개발자가 없거나 있어도 소통이 어려운 환경처럼 그럴 여력이 안된다면 최소한 지키면 좋은 것들을 알려드릴게요.

모두 소문자

대문자로 작성 시에 개발 환경에 따라 오류를 일으킬 수 있습니다. 되도록이면 소문자만 사용합니다. (.jpg, .png와 같은 확장자에도 대문자 사용은 피해주세요.)

02. 첫 글자 숫자 사용하지 말 것

파일명의 첫 글자에 숫자는 넣으면 안 됩니다. 예시) 13-icon.png (x) / icon-favorite (O)

03. 띄어쓰기 사용하지 말 것

띄어쓰기는 사용하면 안 됩니다. 글자 간의 구분은 -(마이너스 사인) 또는 _(언더라인)를 사용해 주세요.

예시) icon_bookmark.png

04. 축약하기
그리고 자주 사용하는 용어를 축약을 할 수 있다면 합의하에 축약을 해줍니다.
icon = ic
button = btn
background = bg
image = img
등등 그러면 쉽게 관리가 되겠죠?

작명의 주요 방법은
유형(접두사) + 이름 + 상황(접미사) .png(확장자)
이렇게 합니다.

예를 들면,
bg_mainbanner_01.jpg
bg_mainbanner_02.jpg
ic_favorite_normal.png
ic_favorite_hover.png
btn_ghost_normal.png
btn_ghost_pressed.png

이것들은 예시일 뿐, 띄어쓰기와 대문자 사용은 피하고, 소문자와 _로 구분하면서 누구나 이해 갈만한 센스 있는 작명 규칙을 지킨다면, 여러분을 다른 시선으로 볼 것입니다.ㅎㅎ