디자인할 때 레이어 네이밍 정리 꿀팁!

CSS 네이밍 케이스와 피그마 레이어 네임에 적용

한윤석 (두블링 DOBLING, UI/UX 디자이너)

현재 1년차 주니어에서 미래 프로 디자이너를 꿈꾸는 사람으로써 같은 상황의 모든 신입, 주니어, 초보, 입문, 예비 디자이너들을 위해 매주 제가 경험한 디자인 인사이트를 업로드 합니다.

디자인을 하면 여러 레이어가 생겨 관리할때 복잡함을 느끼게 됩니다. 디자이너로써 여러분은 레이어 네이밍을 어떻게 정리하시나요?

여기 저의 정리법을 공유하고자 합니다.

레이어 네이밍 정리방법

CSS네이밍 케이스

케밥 표기법

예) kebab-case, spinal-case, Train-Case, Lisp-case

- 하이픈으로 단어를 연결하는 표기법입니다.

- HTML 태그의 id, class 속성으로 흔히 사용됩니다.

파스칼 표기법

예) PascalCase, BackgroundColor, TypeName, PowerPoint

-첫 단어를 대문자로 시작하는 표기법입니다.

스네이크 표기법

예) snake_case, background_color, type_name

-단어를 밑줄 문자로 구분하는 표기법입니다.

나의 정리법 공유

가독성 확보를 위한 계층 구분

저는 디자인과 퍼블리싱을 함께 하기에 디자인할 때 퍼블리싱을 고려하여 HTML구조에 맞게 레이어 블록을 쌓고 그 레이어 네임을 CSS 표기법 중 스네이크 표기법을 사용하여 네이밍합니다.

거기에 :, ::, :::같은 특수문자를 활용해 계층을 구분하여 가독성을 높였습니다.

결론

디자인을 할때 레이어 계층과 네이밍은 HTML구조를 고려하여 디자인하여야 하며 이때 CSS 네이밍 케이스를 대입할 수 있습니다. 그후 특수문자를 통해 계층을 구분해 가독성을 높이고 더 편한 디자인을 할 수 있습니다.

이글이 초보디자이너들에게 도움이 되길 바랍니다.