by
Mar 23. 2023
피그마 레이어 이름 짓기 규칙
오늘도 이름 짓기로 고통받는 디자이너들을 위하여
들어가며
레이어 이름 짓기가 필요한 이유와 그 규칙을 찾기까지..
디자인하면서 항상 고통받는 1가지가 레이어 정리이다. 가끔 사소한 것에도 이름을 제대로 붙여야 하는 디자이너를 보곤 하는데 그중 하나가 나다. (물론 좋은 습관은 아니라고 생각한다. 가장 마지막 층의 레이어까지 보는 팀원은 거의 없기 때문이다. 적당히 중요한 레이어만 정리해도 충분하다.) 레이어 이름을 잘 정리해 놓으면 다른 팀원과 협업하기 훨씬 편해진다. 한 컴포넌트를 가지고 서로 다른 역할로 오해하는 걸 막을 수 있고 재사용된 컴포넌트임을 간접적으로 알려줄 수 있기 때문이다.
이름으로 고민하는 시간이 많아지다 보니 자연스레 이름 짓기 규칙에 대한 궁금증이 생겼는데 너무 다양하고 적용 방법이 상황마다 달라서.. 나에게 맞는 이름 짓기 규칙을 만들어 보기로 했다. 레이어 이름 짓기에 고통받고 있는 디자이너라면 이 글이 도움이 될지도 모르겠다. 다만, 난 아직 쪼랩 디자이너이기 때문에 많이 어설플 수 있다는 점을 미리 말해두고 싶다.
이런저런 글들을 찾다 보니 CSS 네이밍 컨벤션에 다양한 규칙이 있다는 것을 알게 되었다. (알고 보니 개발자가 이름 짓기 최강자) 여러 규칙들을 참고하던 중 BEM 방식이 마음에 들어 이걸 차용할까 했다. 하지만 결론적으로는 포기하게 되었다. 첫 번째는 개발지식이 전혀 없는 상태에서 규칙을 활용하기에는 역부족이라고 생각했고 팀 개발자에게 도움을 청하기에는 그가 너무 바빠보였다. . .
CSS 네이밍 컨벤션은 개발자와 같이 쓰는 것이 효율적이라 쓸 것이라면 함께 논의해 보는 것이 좋다.BEM 방식에 대해 좋은 글이 있어서 링크만 달아놓겠다.
https://nykim.work/15
일단은 혼자 해결해 보고자 여기저기서 문서를 찾아봤는데 다들 정말 다양하게 이름을 짓고 있다는 걸 알았다. 그리고 생각보다 자세히 안 짓는다! 내가 참고한 'Material 3 Design Kit' 문서에는 제대로 이름이 안 지어진 레이어가 종종 있고 규칙도 중구난방이다. 아무래도 디자인 시스템이 갖춰진 기업은 디자이너가 여러 명이다 보니 이름 짓기 규칙을 통일하지 못한 것 같다. 여하튼 문서들을 조금씩 참고하면서 나만의 이름 짓기 원칙을 2가지 정도 세워봤다. 규칙을 만들며 참고한 문서는 맨 아래 링크해 두겠다.
첫 번째
최대한 설명적으로 레이어 이름 짓기
한 레이어마다 할당된 역할을 할 수 있는 한 설명한다.
레이어마다 위계가 있다면 이름에 드러나도록 한다.
컴포넌트는 유명한 디자인 시스템을 하나 정해 그 이름을 따른다.
(나의 경우 'Google Material Design 3' 가이드 문서를 따르고 있다.)
하나의 덩어리 안에서 최대한 겹치는 이름이 없도록 노력한다.
하위 항목은 '-'로 구분하여 표시한다.
유의사항
아무리 생각해도 맞는 이름이 없다면 적당히 처리하고 넘어간다. 모든 레이어에 알맞은 이름을 붙여주겠다는 건 욕심일 수 있다. 협업에 문제없을 정도로만 하자.
피그마 커뮤니티에서 구한 카드 템플릿텍스트 만으로는 추상적일 것 같아 예시 사진을 준비했다. 레이어의 쌓는 구조는 위에서부터 아래로, 왼쪽에서부터 오른쪽으로 시선이 먼저 닿는 기준으로 쌓는다. 팀원이 레이어명을 보고 특정 레이어가 카드 속 어떤 요소에 해당하는지 짚을 수 있는 정도를 목표로 하고 이름을 짓는다. 레이어 이름은 최대한 겹치지 않도록 쓴다. 'chip'같이 동일한 컴포넌트지만 안에 다른 정보를 표시하고 있다면 하이픈(-)을 붙인 후 해당하는 하위 정보를 써준다. 'star rating'처럼 완전히 반복되는 요소는 뒤에 숫자를 달아 구분해 준다.
두 번째
예시 자료 적극 참고하기
피그마 커뮤니티의 큰 장점은 다른 디자이너의 작업물 구조를 쉽게 파악할 수 있다는 것이다. 커뮤니티에 'Design System'만 검색해도 대기업에서 만든 견고한 디자인 시스템 파일을 무제한 다운로드할 수 있다! 예시 화면을 작성한 UI 템플릿도 있는데 이런 문서까지 활용하면 훨씬 다양한 레이어 이름들을 참고할 수 있다.
위와 같이 리스트 화면을 디자인할 때 리스트의 하위 항목들을 뭐라고 이름 붙여야 하는지 상당히 난감했었다. 지금은 Material Design에서 쓰는 'item'을 차용해서 쓰고 있다. (참고로 Microsoft는 'row'라고 이름 붙이고 있는데, 그냥 본인이 마음에 드는 걸 골라 쓰면 된다.)
피그마 커뮤니티에서 구한 카드 템플릿정렬을 맞추기 위해서 요소들을 Auto layout으로 묶어주는 경우가 자주 있는데 이 경우에도 이름 짓기가 참 애매해진다. 여러 디자인 시스템 문서를 참고한 후 'wrapper'가 가장 어울린다고 생각해 그렇게 이름을 지었다.
Ant Design System에서는 Wrapper이라고 한다.
Google Material Design은 Content라고 칭하는 것 같다.
Google에서는 Button과 Button이 아닌 것이 섞인 채로 묶일 때는 'Actions'라는 이름을 쓰기도 한다.