[UI 디자인 협업] 네이밍 룰
ㅣ플러스 엑스 UI 강의ㅣ
03강_2-01 요약
원활한 소통을 위해 내부적으로 정한 파일명 규칙을 알려줄게.
기획+디자인+개발 협업을 위해 소통능력이 필요하다. 업무를 효율적으로 어떻게 일하는지 알아보자
'네이밍 룰'
폴더, 파일, 레이어, 에셋 네이밍을 하는 하는 규칙
프로젝트 시작전 네이밍룰을 세우고 파트너사에 전달. Why? 원할한 소통을 위해
[폴더 네이밍 룰]
많은 파일을 규칙대로 드롭박스에 저장한다.
- 사용하지않는 폴더는 (X)표시, 필요한 폴더 있으면 생성.
- 파일을 팀별로 파일 나눔
ㄴ 프로젝트별 파일. 작업중인 파일명 앞 @를 붙여 최상단에 오도록 함. 프로젝트가 끝나면 @ 삭제.
팀별 → 프로젝트 파일 → 세부 파일
- 프로젝트 파일 폴더
ㄴ @최종산출물 (종료시 업데이트) : 프로젝트 종료 후 모든 산출물 저장 파일
ㄴ00. PR (종료시 업데이트) : 포트폴리오 / 어워드(if, 레드닷..)
------------------------- 종료시 사용
ㄴ01. 수급자료: 파트너사에서 준 자료 (폰트, 이미지, 브랜드 가이드....)
ㄴ02. 일정: 구글 시트를 오프라인 파일로 추출하여 업로드
ㄴ03. 리서치: (인터뷰, 서베이, 기존화면, 유사서비스, 레퍼런스:컬러,그래픽,아이콘,인터렉션,타이포...)
ㄴ04. 회의관련: 노션, 구글시트, 클로바 문서를 오프라인으로 추출하여 회의록 정리함.
ㄴ05. 전략&제안: 목업, 시안, 전략문서(중간공유, 최종공유), 프로토타입.
----------------------- 제안 프로젝트시 사용
ㄴ06. 설계: IA, 상세설계서
ㄴ07. 디자인 : Mobile, PC(Common / Home .... ) → 피그마 파일 추출한 기록
ㄴ08. 인터렉션:
ㄴ09. 마크업&가이드:
ㄴ10. 개발
ㄴ11. QA: 구글 시트로 진행 후 파일 추출 저장
----------------------- 프로젝트 구축시 양산
'파일 네이밍 규칙'
일반문서 / 디자인 문서로 나누어 정리
[일반문서 이름 규칙]
번호_ 챕터_문서속성_디바이스_프로젝트명_회사명_버전_날짜 표시 필수
ex) 01_Home_Interview_Mobile_신세계_00_v1.0_20230808_임원진용
- 챕터: Common/ Home / Category / My...
- 문서속성: Interview / Mockup/ Design Strategy
- 디바이스: Mobile App / PC / Mobile Web
- 버전: v0.8..
- 날짜: 20230808_1/ 20230808_2
- 옵션: 임원진용/ 리뷰용....
[작성원칙]
- 번호는 두자리로 표현ex) 8 → 08
- 영문은 첫글자만 대문자 ex) Proposal / 대명사가 대문장일 경우 대문자 사용
- 버전 표기는 소수점 한자리 이상 두자리 이하. ex) v1 → v1.0
- 날짜는 8자리로 ex) 20230808
[디자인 문서 이름 규칙]
개발자가 디자인 파일을 설계서와 매칭해서 볼 수 있도록 설계명에 맞춰 디자인 파일명 설정하면 됨.
'레이어 네이밍 규칙'
[레이어 명칭 순서 아래에서 위로, 왼쪽에서 오른쪽으로]
- Navigation Bar, Header, Floating 버튼의 경우는 예외적으로 최상단에 위치
[엘리먼트 단위 그룹핑]
head / body / footer 로 나누어 디자인
Why? 디자인과 개발이 병렬적으로 작업되기 때문. 개발자가 디자인의 의도를 쉽게 파악할 수 있도록한다.
[영문은 소문자만 사용하기]
why? 개발시 오류가 생길 수 있음. 개발 시 소문자 대문자 구분이 안되는 경우가 있기때문
[띄어쓰기 대신 언더바_ 사용하기]
개발에서 띄어쓰기가 인지 안되는 경우가 있음
'에셋명 작성 규칙'
속성_ 위치_ 형태_ 상태 필수값
[영문 소문자 사용]
[띄어쓰기 대신_ 언더바를 사용]
[숫자로 시작하지 않는다]
컴퍼넌트는 속성을 우선시하기 때문에 속성을 앞에써서 첫 문장에 파악 할 수 있도록 함.
[네이밍을 내마음대로 축약하지 않는다.]
- 구성원들간의 약속이 있을 경우 사용
ex) text → txt / image →img / background → bg / icon → ico / button →btn / temporary(임시) → tmp (임시로 디자인 했을 경우. 실데이터로 바꾸면 img_파일명으로 수정)
[이미지 네이밍은 이미지 확장자와 관계없이 순차적으로 사용]
[같은 분류의 이미지가 두 개 이상일땐 마지막에 숫자를 추가하여 구분]
ex) img_profile_01 / img_profile_02
'각 카테고리별 에셋'
[속성]
-ico
-img
-btn
-tab
-txt
-bg
-tmp
-badge
* 아이콘과 버튼은 기능으로 구분
- 기능이 있는 것 = 버튼
- 기능이 없는 것 = 아이콘 → 아이콘을 만들때 기능이 있는 버튼이라면 아이콘 밑에 투명 사각형을 그려 터치 영역을 지정.
[위치]
- header
- tab
- navigation ..
[형태] 에셋이 가지고 있는 형태
- search
- cart
- arrow
- delete
- close
- circle ...
동일한 에셋 세트의 경우 속성 뒤 '_ 숫자or 컬러or방향' 으로 명칭 구분
ex) ico_arrow_white : 아이콘 화살표 하얀색
[상태] 사용하는 상태
- noemal →n
- pressed →p
- disabled →d
- hover →h
- on
- off
ex) btn_add_d : 더하기 버튼 disabled(비활) 상태
'연습'
속성_위치_형태
- 출처:https://plusxsharex.fastcampus.co.kr/courses/213930/clips/
[🌰인사이트]
● 레이어 명칭을 정할때 (레이어 순서는) 아래에서 위로, 왼쪽에서 오른쪽으로 순차적
- 네비게이션바, 헤더, 플로팅 버튼은 최상단에 위치한다.
- 다른 요소는 레이서 순서에 따라 명칭을 정한다.
●엘리먼트 단위 그룹핑은 head/body/footer 로 나눈다.
●에셋명 작성 규칙
- 속성_위치_형태_상태 순으로 칭한다.
[🥜 추가조사]
버튼UI UX
https://brunch.co.kr/@chulhochoiucj0/23
모바일 UI 디자인 기본 요소 - 버튼
가장 본질 적인 모바일 UI 컨트롤 | 버튼 Button은 사용자가 데이터를 전송하거나 기능을 실행하도록 하는 명령 컨트롤 imperative control이다. <About Face 4>에서 엘런 쿠퍼는 “컨트롤의 세계에서 가장
brunch.co.kr
[🌞 목표]
▶ 내부 구성원들과 파일명 규칙을 정해서 파일을 정리 한다. 규칙이 없을경우 동의를 얻은 후 가이드를 만들어 배포하고 설명한다.
▶ 피그마 에셋 요소 이름을 규칙에 근거해 정리, 작성할 수 있다.