피그마로 개발자의 이름짓기 고통 덜어주기
개발에 최적화된 디자인요소 네이밍
피그마로 직접 그린 이미지우리가 디자인한 화면을 개발함에 있어 개발자가 가장 어려워 하는 부분은 무엇일까?
대부분의 개발자는 이름짓기라 말할거다.
검색엔진에서 '개발 이름짓기' 키워드로 서치해보자
구글 검색결과 현재 기준 3,610,000개가 검색되었다.
검색 상위 노출 제목을 보면
'변수명 짓기' , '효과적인 이름짓기', '프로그램 변수명 지어주는 사이트 공유', '변수명짓기 프록그램 만들었습니다.', '코딩할 때 가장 어려운 이름짓기', '프로그래밍 네이밍 방법'
개발자들은 이렇듯 이름짓기의 고통속에서 매일 개발을 하는것이다.
피그마로 직접 그린 이미지이런 고민을 해결하기 위한 네이밍 방법론중 필자는 여러분에게 BEM 네이밍 방법론을 추천한다.
뱀 네이밍은 디자인과 밀접한 CSS 네이밍 방법론으로서 많은 개발자들이 사용하고 있는 방법론이다.
디자인 요소들을 뱀 네이밍으로 만든다면 이를 개발하는 개발자는 이름짓는 고통에서 해방될수 있을거다.
이름짓는 고통의 시간을 줄인다는것은 전체 프로젝트 일정을 굉장히 줄여줄 수 있다.
이는 우리가 속한 프로젝트에 상당한 기여를 하게 된다는것을 의미한다.
기본구성요소는 Block, Element, Modifier 세가지이다.
위의 이미지를 통해 보자면 block은 모자, 상의, 하의, 신발을 풀세트로 장착한 사람을 의미한다.
다양한 사람들이 모여 그룹을 이루고 사회를 이루는것과 같이 프로젝트 또한 이런 블럭들이 모여 만들어진다.
element는 block을 이루는 각 요소들을 지칭한다.
이런 요소들은 꼭 필요한 경우도 있고, 있으면 좋고 없어도 상관없는 경우가 있다.
모자와 같은 요소는 꼭 필요한 요소는 아니지만 신발, 바지등은 없어서는 안되는 것처럼 말이다.
만약 바지를 입지 않고 거리를 다닌다면 누군가 신고를 하고 경찰이 출동하여 우리를 잡아갈 것이다.
modifier의 경우는 자신의 방에 있는 옷장을 열어서 상의가 몇개 있는지 보면 쉽게 비교할수 있을거다.
회사 갈때, 데이트 할때, 집에서 쉴때 각기 다른 상의를 입는것처럼 말이다.
피그마로 직접 그린 이미지피그마로 만든 카드를 통해서 뱀 네이밍을 살펴보자.
Block : 카드
Element : 이미지, 상품이름, 카테고리, 가격, 상품설명, 장바구니 버튼, 구매 버튼
Modifier( 구매버튼 ) : 디폴트 상태, 마우스 호버링 상태, 클릭 상태
구매버튼의 상태에 따른 네이밍
default : card__btn-buy—default
hover : card__btn-buy—hover
click : card__btn-buy—click
뱀 네이밍의 구성 요소
[ card ] [ __ ] [ btn-buy ] [ — ] [ default ]
[ Block ] [ 구분자 ] [ Element ] [ 구분자 ] [ Modifier ]
block과 element의 구분자는 언더바 두개로 구분하고,
element와 modifier의 구분자는 데쉬 두개로 구분을 한다.
뱀 네이밍 중간의 구분자를 통해 각 요소들이 구분되어 있어 한눈에 버튼에 대한 정의를 이해할수 있다.
피그마로 직접 그린 이미지이를 개발 코드에 적용해서 보면 위의 이미지와 같다.
네이밍만으로도 구매 버튼의 상태를 한눈에 파악할 수 있다는걸 알 수 있다.
