UI 디자인 가이드 : 이미지 파일 작명법
디자이너는 결과물로 소통하고 평가받아요.
UI 디자인은 편집이나 다른 디자인 분야보다 개발자와의 협업이 더욱 중요합니다. 디자인은 자기만족으로 끝나는 게 아니고, 디자인 작업물을 잘 관리하고 개발자와 협업을 통해 최종 구현까지 완료되어야 프로젝트가 마무리되기 때문이죠.
혼자가 아닌 팀 단위의 디자이너라면, 디자인시스템으로 만들어진 수많은 이미지와 에셋의 관리를 위해 일정한 규칙이 필요합니다.
Sketch나 Figma와 같은 디자인툴에서는 에서는 이미지를 Export할 때 파일명에 슬래시(/)를 사용하면 자동으로 폴더 구조로 변경해서 생성해줍니다. 이런 규칙이 심볼의 네이밍이나 파일명을 지을때에도 필요해집니다.
먼저, 개발자와 협업을 할 때에는 사전에 규칙을 정하고 라벨링을 하는 게 가장 좋습니다.
개발 환경에 따라 요구사항이 다를 수 있기에 프로그래밍 규칙에서 어긋나는 작명을 사용하지 않게 주의하는게 좋거든요.
그리고 아래 정리된 일반적인 사항들을 알고 있으면 좋습니다. 이 정도만 숙지하고 있어도 실무에서 일 못한다는 소릴 듣는 일은 없지 않을까합니다. :)
[ 이미지 파일명 작명을 위한 팁 ]
1. 소문자를 사용합니다.
일부 개발환경에 따라서는 대문자로 작성시에 오류를 일으킬 수도 있습니다. 언어에 따라 대소문자 구분이 안되는 경우도 있습니다. 가급적이면 소문자를 사용합니다. 파일 확장자도 소문자로 작성해주세요.
Ex)
icon-Like.PNG / icon-Like.Svg (X)
icon-like.png / icon-like.svg (O)
2.숫자는 첫 문자열에 사용하지 마세요.
파일명의 첫 글자에 숫자는 넣지 않습니다. 아이콘의 종류가 여러개인 경우 숫자를 앞에 넣어 넘버링 하지 마세요. 아이콘의 형태에 맞춘 네이밍을 추천합니다.
Ex)
01-icon.png (X)
icon-like.png (O)
3. 띄어쓰기(공백)를 사용하지 마세요.
띄어쓰기는 사용하지 않도록 합니다. 글자 사이의 공백을 처리하는 프로그래밍 표기법들이 있습니다.
이건 개발자와 협의 후 정해진 방법을 따르는게 가장 좋아요.
** 공백은 왜 쓰면 안될까요?
디자이너가 디자인을 하다보면 동일한 디자인된 심볼이나 아이콘 이미지를 카테고리화 하는 경우가 생깁니다. 때로 에셋의 의미 전달을 위해서는 파일명을 한가지 단어로 처리하기 어려운 경우가 대부분이구요. 파일명이 하나의 단어로 이루어진 경우가 아니라면 필연적으로 공백이 생기게 되지만 프로그래밍에서의 공백(Space)은 별도 목적의 키워드로써 활용되기 때문에 사용하지 않습니다. 때문에 단어 사이의 공백을 제거하고 문자열을 표현하는 방법을 사용합니다.
프로그래밍에서 사용하는 표기법은 아래와 같습니다. 이 표기법들은 프로그래밍상에서 파일명, 변수명, 함수명 등을 공백없이 표현하기 위해 따르는 네이밍컨벤션(Naming Convention)들입니다.
개발팀과 협의를 통해 이 중 하나를 선택하세요.
만약 개발자와 협의가 어렵다면 하이픈(-) 혹은 언더바(_)를 사용해도 좋습니다.(a.k.a. 케밥,스네이크)
아래의 경우를 예시로 들어볼게요.
변환 전 : background color
- 카멜 표기법 (Camel Case, 카멜 케이스)
낙타의 단봉(혹)과 같이 생긴 표기법으로 문자열의 첫 문자를 제외하고 단어의 첫 글자마다 대문자로 표현하는 방식입니다. Java에서 주로 사용됩니다.
변환 후 : backgroundColor
- 파스칼 표기법 (Pascal Case, 파스칼 케이스)
각 단어의 첫 문자열은 항상 대문자로 표현하는 표기법입니다.
Java에서는 클래스명, 함수명 표기 시 활용되고, Python에서는 클래스명 표기 시 사용됩니다.
변환 후 : BackgroundColor
- 케밥 표기법 (Kebab Case, 케밥 케이스)
생각하시는 그 먹는 케밥처럼 꼬챙이에 꽃힌 형태라 이름지어졌다고합니다.
카멜 케이스와 달리 모두 소문자로 표현하며 단어와 단어 사이를 하이픈(-)을 이용하여 구분합니다. 스프링의 yml 파일이나 url 주소에서 사용됩니다.
변환 후 : background-color
- 스네이크 표기법 (Snake Case, 스네이크 케이스)
케밥의 하이픈(-)과 다르게 언더스코어(_)를 구분자로 사용합니다.
모든 문자를 대문자로 나타내는 방식도 사용됩니다. Python에서 주로 사용되고, 변수명 함수명 데이터타입 등에 활용됩니다.
변환 후 : background_color / BACKGROUND_COLOR
4. 축약을 통해 파일명을 줄여주세요.
자주 사용하게 되는 컴포넌트의 경우 용어를 축약해서 사용하기도 합니다.
그러면 파일명이 조금 짧아져 효율적이겠죠. 아래와 같이 자주 사용합니다.
button = btn
icon = ic
background = bg
image = img
5. 협의된 규칙으로 작명을 해주세요.
현업에서 디자이너들이 많이 사용하는 일반적인 작명 타입은 아래와 같습니다.
컴포넌트 유형(접두사) + 이름 + 상태(접미사). png (확장자)
Ex)
btn-pirmary-normal.png
ic-like-hover.png
'잘 하는 디자이너'
라는 말에는 많은 의미가 담겨있다고 생각해요. 디자이너 뿐아니라 다른 직군도 마찬가지겠지만 혼자 일하는 직군이 아니고서야 협업의 기본은 커뮤니케이션일거고요.
일을 잘한다는 건 실력도 기본 이상이어야겠지만 같이 일하기 좋은 사람이 되는 게 중요하겠네요. 경력이 쌓일수록 더욱 그렇고요. 한마디 말보다 납득가능한 결과물로 소통하는 디자이너가 되어야겠고요.
길고 긴 설명보다 간단한 몇가지 규칙이 일을 더 쉽게 만들기도 하니까요. :)
