스케치강좌16번째입니다. 다음은 스케치에서 에셋을 꺼내는 방법과 센스 있는 에셋 이름 짓는 방법에 대해 알아보겠습니다. UI 디자인 작업이 끝나면 항상 에셋을 어떻게 줄지 고민해요. 체펠린한테 주면 끝인 것 같은데 사실은 올리기 전에 해야 할 게 있어요. 그 '일'은 '명명'이라는 습관입니다. 아이콘 이름은 뭘로 할지, 이미지는 어떻게 할지, 확장자는 어떻게 할지 등등 실무적으로 작명할 때 알아두면 좋은 팁을 알려드릴게요! 영상을 통해 확인하세요 :)
https://tv.naver.com/v/15633829
핵심 요약 어셋 내보내기 기능 : 오른쪽 아래 Make Exportable 클릭 Size : 몇 배로 출력할지 Prefixsuffix : 접두사 접미사 (iOS의 경우 2배 @2x) Format : 확장자 고르기
ios 배율 예시
이렇게 해서 파일명에 @2x, @3x가 표시됩니다.
여러가지 포맷이 있음 갑니다만, 우리가 집중해야 할 확장자는 SVG와 PDF입니다. Android와 Web에서는 SVG를, iOS에서는 PDF를 사용합니다. SVG와 PDF는 벡터 기반의 이미지를 넣는 확장자이기 때문에 아이콘의 경우 이 확장자를 출력하면 따로 배율에 맞게 출력할 필요없이 하나로 적용할 수 있습니다.
이번에는 작명에 대해서 이야기해 봅시다.디자이너라면 파일 이름, 레이어 이름, 심볼 이름 이런 부분들을 정리하는 것이 기본입니다. 추가 습관을 들이면 좋은 것이, 애셋 파일 이름 붙이기입니다.이 부분은 개발자와 사전에 합의를 하고 진행하는 것이 좋겠지만 내부에 개발자가 없거나 있어도 소통이 어려운 환경처럼 그럴 여력이 없다면 최소한으로 지키는 것이 좋습니다.
01. 모두 소문자 대문자 작성 시 개발 환경에 따라 오류를 일으킬 수 있습니다. 되도록 소문자만 사용해주세요.(.jpg,.png과 같은 확장자에도 대문자의 사용을 피해주세요.)
02. 첫 글자를 사용하지 않는 고도, 파일명의 첫글자에 숫자를 넣으면 안 됩니다. 예시 ) 13 - icon . png ( x ) / icon - favorite ( O )
03.띄어쓰기 사용하지 않는 문과 띄어쓰기는 사용하면 안 됩니다. 글자간 구분은 -(마이너스 사인) 또는 _(언더선)을 사용하여 주십시오.예시 ) icon _ bookmark . png
04. 압축하고 잘 사용 사용하다 용어를 축약할 수 있다면 합의 아래 축약하세요. icon=icbutton=btnbackground=bgimage=img등 그렇게 하면 간단하게 관리할 수 있겠지요?
명명의 주된 방법은 유형(접두사)+이름+상황(접미사).png(확장자) 이렇게 합니다.
예를 들 면 , bg _ mainbanner _ 01 . jpgbg _ mainbanner _ 02 . jpg
ic _ favorite _ normal . pngic _ favorite _ hover . png
btn _ ghost _ normal . pngbtn _ ghost _ pressed . png
이것들은 예에 지나지 않고, 띄어쓰기 글쓰기와 대문자의 사용은 피하고 소문자와 _로 구분하면서 누구나 이해할 수 있는 센스 있는 작명 규칙을 준수한다면 여러분을 다르게 보게 될 것입니다.(웃음)
