플러스엑스 UI패키지 강의 후기 - (17)

◆ 오늘 수강/복습 할 부분
Part3. UI 디자인 협업
- 플러스엑스의 네이밍 룰 

 
 
◆ 정리 및 느낀점

- 네이밍 룰을 한 번도 배워본 적이 없는데, 이번에 전문가들이 어떻게 하고 있는지 알게 되서 앞으로 프로젝트 하는데 굉장히 많은 도움이 될 것 같다. 당장 하고 있는 것 부터 바꿀 예정!

 

- 플러스엑스에서는 총 4개 폴더, 파일, 레이어, 에셋에 대한 네이밍 규칙을 가지고 있는데, 쭉 들어보니 아무래도 오프라인으로 다 추출해서 폴더/파일로 모아 놓는 경우가 많아 보였다. 우리 회사가 지향하는 것과는 살짝 달라서 이 부분은 감안해서 듣기는 했다! 다만 온라인으로 파일을 관리하더라도 파일명 규칙이 있으면 좋으니까 향후에는 이 부분을 참고해서 진행하면 좋을듯. 

 

- 폴더는 뛰어넘고 파일 쪽으로 가면, 아래와 같이 네이밍 rule을 가져간다고 한다.

ㅇ 일반파일 : 번호_챕터_문서속성_디바이스_프로젝트명_plusx_버전_날짜_옵션

 ㄴ 일반 파일 중에서, 문서속성, 프로젝트명, plusx, 날짜는 꼭 넣는다고 한다.

 ㄴ 번호는 2자리, 영문은 첫글자만 대문자로, 버전은 소수점 둘째 자리까지, 날짜는 년도를 포함한 8자리로 입력하는 것이 기본 rule이다. 

ㅇ 디자인 파일 : 일반 설계서 파일과 동일한 파일로 진행

 

- layer는 아래에서 위로, 왼쪽에서 오른쪽으로 쌓는 것이 일반적이지만 Navigation bar, header, Floating btn의 경우 최상단에 놓는다. 엘리먼트 단위로 그룹핑을 해줘야 나중에 개발파트에서도 이를 바탕으로 한다고하니 참고할 것! 

ㄴ 영문은 소문자, 띄어쓰기는 _ (=under bar)로 대체한다 이유는 개발상황이 다 다르기 때문에 이를 고려한 것! 

 

- 가장 중요하고 궁금했던 asset의 네이밍룰은 기본적으로 속성_위치_형태_상태를 따르며 여기서 속성과 형태는 꼭 포함한다고 한다. 일반적인 규칙으로는 1)영문은 소문자를 사용 2)띄어쓰기 대신 Under bar 사용 3)숫자로 시작하지 않기, 4)자기만 아는 단어로 네이밍 축약하지 않기! 이다. 

ㅇ 속성 : icon, img, btn, tmp(temporary=임시파일),badge 등 속성

ㅇ 위치 : header, tab, navi, contents, profile 등 위치

ㅇ 형태 : search, cart, arrow, delete, setting 등 형태 이 것을 구분하기 위해 뒤에 추가로 _숫자 _컬러 _방향이 붙을 수 있다.

ㅇ 상태 : 주로 btn에 쓰이며, normal(n) pressed(p) disabled(d) hover(h) on, off 등으로 나눠쓸 수 있다. 

 

*tip : btn / icon은 기능 유무로 판단한다. 

 

- 그럼 여기서 궁금증.. 아트보드명은 어떻게 하는게 효율적일까? 피그마를 쓰다보면 나는 페이지에 따라 페이지명_숫자 로 구분하고는 하는데, (로그인01, 로그인02 이런식) 어느순간 이게 조금 부족하다는 생각이 들었다. 로그인 화면 중에서도 '로그인 성공' 이 있고 '로그인 실패'가 있는데, 이걸 그냥 숫자로 퉁치니까 좀 비표율 적인 느낌? 그래서 고민해보면 "화면명_화면주요기능" 이렇게 바꿔야 하는 생각이 들기도 하고.. 일단 낼 출근해서 시간되면.. 레이어명, 에셋명부터 바꿔야겠다 머쓱.. 

 

 

◆ 그럼 오늘의 수강 인증 샷!