7 min to read

NAMING

그놈의 네이밍 구조에 관하여

images

unsplash-logoBalázs Kétyi

나의 삽질의 결과물로 아이콘 네이밍 규칙을 정리 하면서 대표적인 표기법 및 다른 사람들의 노하우와 나의 노하우를 정리하면서 아래의 내용을 노트 하였다. 📄 좋은 네이밍 규칙은 리소스도 아끼고, 작업자도 편하고, 커뮤니케이션도 원활해집니다. 잘 정하지 못하거나 바꾸려고 하면 굉장히 귀찮아지기 때문에 처음에 잘 정해야합니다. 😒

카멜 표기법 Camel case 🐪🐪🐪

카멜 케이스, 캐멀 케이스, 카멜 표기, 낙타 표기법, 낙타등 표기법이라고 불리는 이 표기법은 띄어쓰기 대신에 각 단어의 첫 문자를 대문자로 표기하고 붙여 쓰는 방법 입니다.

🧐부가적으로, Camel case는 Title case 와 구별합니다. Title case 는 서로 단어 간의 간격을 알려주기 위해서 나타내는 표기법 입니다.(명사, 대명사, 형용사, 동사, 부사, 부사를 대문자로 쓰고 관사(a, an), 전치사, to 부정사의 ‘to’를 소문자로 하는 표기법 입니다.)(ex: You are a Good Designer.)

👉SAMPLE

Upper camel case

AKA 파스칼 표기법(Pascal case). 첫 단어를 대문자로 시작하는 표기법 입니다.

👉SAMPLE

Lower camel case

AKA Dromedary case라고도 불리며, 맨 처음 문자는 소문자로 표기하고 다음 단어들은 띄어쓰기 대신 대문자로 단어를 구분합니다. 😶추가적으로 몇몇 사람들은(예를 들어 microsoft)는 Camel case를 lower camel case 만 취급한다고 한다.

👉SAMPLE

Snake case(or snake_case) 🐍🐍🐍

Snake case는 단어와 단어 사이에 공백 대신에 언더바(under score)로 구분짓는 방식으로 표기법 입니다. Snake case는 소문자를 보통 사용하고 가끔 첫번째 글자만 대문자를 사용 합니다.

👉SAMPLE

🤫여담으로는 “Upper camel case” 와 합쳐진 것은 “Dawin case” 라 부른다. 부가적으로, 한 연구에서는 Camel case 보다는 Snake case가 더 가독성이 뛰어나다는 논문이 발표 되었습니다.

케밥-케이스 Kebab case

케밥 표기법, 케바케, Spinal case, param case, Lisp case, dash case 이라고도 불리는 이 표기법은 Snake case 와 비슷 합니다. 언더바(underscores) 대신에 하이픈(hyphens)을 사용하여 단어를 연결 시킵니다. 보통은 HTML 태그의 id, class 속성으로 흔히 사용된다. 모든 글자가 대문자를 이용한다면 그 표기법은 Train case (TRAIN-CASE) 라 부릅니다.

헝가리언 표기법 Hungarian notation

형식은 lowerCamelCase와 같지만, 데이터 타입에 따라 접두사(prefix)로 나타내는 방식입니다. microsoft에서 많이 사용 되었다지만, 요즘은 잘 사용이 안된다고 합니다.

👉SAMPLE

네이밍 규칙

혼자 디자인 하면서 지난 네이밍 삽질로 인해 얻어진 나의 깨닳음을 해결한 나의 팁을 공유합니다. 👀

네이밍 구조

네이밍 구조는 에셋 종류(쓰임새; logo, icon, image, background…) 접두사(prefix)가 어떻게 붙을지 정의 되고, 필요에 따라 옵션들이 접미사(suffix)로 붙이는 방식을 사용한다. (아래 표는 다른 브런치 글 보며 정리 하였지만, 내가 사용하는 규칙과 조금 다르다. 뭐 디자이너 마다 취향이 있다 보니…)

Prefix Root Suffix (add a qualifier)
icon, button, image, logo, background description, metaphor Filled, Outline, Round, Two-Tone, Sharp circle, square right, left, up, down, back, horiz, vert, portrait, landscape selector, control status(normal, pressed, focused, disabled, selected, blank, half) black, white, pick, gray 16, 24, 48... 18, 28, 36, 60
Asset type Asset name Themes Shape Direction Status Color Size

asset type _ asset name _ add a qualifier themes _ shape _ direction_ status _ color _ size . png

에셋 타입(asset type)

해당 리소스 유형을 적어 나갑니다.

👉SAMPLE

에셋 이름(asset name)

해당 아이콘을 잘 설명할 수 있는 모양 또는 기능을 나타내는 명사로 이름을 붙입니다.

👉SAMPLE

테마(themes)

아이콘의 테마가 필요한 경우에만 사용합니다. 모바일에 가끔 디자인 테마 적용하는 경우가 있기 때문에 그때 사용하면 유용 합니다.

👉SAMPLE

모양(Shape)

아이콘의 고유 형태에 대한 구체적인 언급이 필요한 경우에 사용 합니다.

방향(direction)

모든 방향이 지닌것을 나타냅니다.

👉SAMPLE

상태(Status)

상태에 대한 묘사가 필요시 사용 합니다.

색상(Color)

표준적인 색상을 적어주도록 하고, 해당 프로젝트에 지어진 이름을 적어 줍니다. (이름을 짓는 방법은 아래를 참고)

👉SAMPLE

크기(size)

안드로이드는 mdpi 의 값을 적어줍니다. 아이폰은 1배수의 크기를 적습니다. 가로 세로가 같지 않은 크기일 시에는 가로의 크기만 적고, 추가적인 페이지나 리뉴얼이 있을 때를 대비하여 추상적인 small, big 과 같은 네이밍은 하지 않도록 합니다.

👉SAMPLE

적용 예시

안드로이드

asset type _ asset name _ direction _ themes _ shape _ status _ color _ size . png

👉SAMPLE

iOS

assettypeAssetnameDirectionThemesShapeStatusColorSize

👉SAMPLE

배경, 이미지, 로고

Color

컬러 값 네이밍을 하는 방법을 여러가지이지만, 나의 방법을 적어 보았습니다.

안드로이드

colorname _ a _ alpha value

<resources>
  <color name="white_a100">#ffffff</color>
  <color name="gray1_a100">#fafafa</color>
  <color name="gray2_a100">#f1f1f1</color>
  <color name="gray3_a100">#e1e1e1</color>
  <color name="gray4_a100">#969696</color>
  <color name="gray5_a100">#646464</color>
  <color name="black_a100">#000000</color>
  <color name="black_a80">#cc000000</color>
  <color name="blue_a100">#0d47a1</color>
  <color name="peacock_a100">#5ec3b3</color>
  <color name="peacock_a25">#405ec3b3</color>
  <color name="red_a100">#ed2540</color>
  <color name="violet_a100">#880e4f</color>
</resources>

iOS

colorname _ a _ alpha value

extension UIColor {
  @nonobjc class var whiteA100: UIColor {
    return UIColor(white: 1.0, alpha: 1.0)
  }
  @nonobjc class var whiteA30: UIColor {
    return UIColor(white: 1.0, alpha: 0.3)
  }
  @nonobjc class var gray01A100: UIColor {
    return UIColor(white: 248.0 / 255.0, alpha: 1.0)
  }
  @nonobjc class var gray01A80: UIColor {
    return UIColor(white: 248.0 / 255.0, alpha: 0.8)
  }
  @nonobjc class var gray02A100: UIColor {
    return UIColor(red: 239.0 / 255.0, green: 239.0 / 255.0, blue: 244.0 / 255.0, alpha: 1.0)
  }
  @nonobjc class var blackA100: UIColor {
    return UIColor(white: 0.0, alpha: 1.0)
  }
  @nonobjc class var blackA36: UIColor {
    return UIColor(white: 0.0, alpha: 0.36)
  }
  @nonobjc class var orangeA100: UIColor {
    return UIColor(red: 245.0 / 255.0, green: 127.0 / 255.0, blue: 23.0 / 255.0, alpha: 1.0)
  }
}

참고 문서 📄