[UI 디자인 협업] UI 디자인 가이드

ㅣ플러스 엑스 UI 강의ㅣ

---

협업을 위한 UI 디자인 가이드, 콘텐츠 운영을 위한 이미지 UI 가이드

디자인 시스템 하위 단인 UI 디자인 가이드 제작 방법 알려줄게

UI 디자인 가이드란?

서비스에 사용되는 디자인 스타일 규칙과 가이드라인

why 필요? 협업을 효율화하기 위해 

 

 

---

'UI 디자인 가이드 왜 필요함?'

 

[1. 효율성]

- 디자이너가 원하는 의도를 개발자에게 명확하게 전달 하기 위함.

ex)  콘텐츠 간의 간격, 헤더. 네비게이션 바 언제 사라지고 나타다는지 표시 

 

[2. 일관된 사용자 경험]

- 퀄리티 높일 수 있음.

---

 

 

'UI 디자인 가이드 제작 시 고려해야 할 점?'

 

[1. OS 기준 정리]

타겟 디바이스를 기준 정립 

ex) IOS, 안드로이드 기반인지 설정 필요. 둘다 섞어 쓸것인지..

필요에 적합한 가이드 만들기

 

 

[2. 우선 순위 고려]

디자인 작업과 개발을 병렬적으로 진행함. 개발에서 구조를 짤 수 있도록 아래 공통 가이드를 전달함.

GNB

Header

Margin

Typography

Color

Button

Icon

Text Input

Popup

- 화면 페이지 가이드 제작 

우선순위를 고려한 디자인 가이드

 

 

[3. 명칭 정의]

- 작업 전 내 외부에 네이밍 룰 공유

 

 

[4. 플랫폼 고려]

다양한 플랫폼의 특성을 고려한 디자인 가이드

- 모바일 특성을 고려한 가이드 제공 PC/ 모바일 별..

 

 

[5. UI 가이드 문서화]

- 이해하기 쉽도록 문서화

ex) 개발자,디자인 협업시 UI,UX 요소(간격..)를 알 수 있도록 정리

 

---

 

'Plus X의  UI 디자 가이드는 어떤것을 포함하나?'

 

 

1. GNB

2. Header

3. Margin

4. Typography

5. Color

6. Button

7. Icon

8. Text Input

9. Popup

 

[UI 개발 가이드]

- 타이포, 컬러, 뱃지같은 콤포넌트 스타일 가이드를 포함. 

 

[이미지 운영 가이드 ]

- 운영 가이드 디자이너에게 전달하여 콘텐츠 제작함. 

- UI 요소 + 콘텐츠 

 

---

 

'각 가이드 제작 시점은?'

- 디자인 제안 후 시안 확정 후 개발 팀에서 구조를 짜는 병렬 구조로 작업 됨. 

- 디자인 제안 시 최소한의 규칙을 정해지고 작업

- 정해진 시안으로 디자인 구축 시 디자인과 UI 개발가이드 전달

- 디자인 개발 시작 후 이미지 운영가이드 파트너사에게 전달

 

---

'UI 개발 가이드'

 

[COMMON]

디자이너가 만든 구조를 개발자에게 전달하기 위한 가이드

- 작업시 디바이스 기기 별, UI요소 라벨

- 가장 큰 구조를 우선적으로 정리 후 작은 요소인 페이지 개별 정리 

- 업데이트 날짜 표기 

 

[PAGE]

각 페이지에 필요한 에셋, 고려할점 가이드

 

 

---

'이미지 가이드'

이미지 운영 가이드 서비스 개발 운영 주체(파트너사)에 전달 하기 위함.

개별 파일로 만들어서 전달해야함. 

 

 

 

[목차 페이지 만들기]

컬러시스템

폰트시스템

THUMBNAIL

ICON

PHOTOGRAPHY

BANNER

ILLUSTRATION...

 

[가이드 페이지 구조]

- 상단: 타이틀 / 사이즈 / 용도 / 

- 하단: 파일명기재 (해당 가이드 파일로 찾기 쉬움)

- 배경 제작 방법

- 이미지와 텍스트를 함께 사용 할 경우 최대 글 수 제한 가이드 

 

 

 

 

 

 

- 출처:https://plusxsharex.fastcampus.co.kr/courses/213930/clips/

---

[🌰인사이트]

● 디자인 가이드 정립
- 내부 구성원의 협업을 위한 UI 개발 가이드와 운영을 위한 이미지 가이드가 있다.
- 디자인 의도를 개발자에게 명확히 전달하기위해 인터렉션 가이드, 세부 UI 규칙을 정한 UI가이드를 제작한다.

● 같이 쓰는 용어정립 프리뷰
- 내부 구성원들과 약속된 언어로 소통하는 것은 명확성을 높여준다. 작업 전 내 외부에 네이밍 룰을 프리뷰 하고 상호 협의한다.

---

[🌞 목표]

▶ 작업 전 용어정리 프리뷰 시간을 가지고 내부 구성원들과 명칭 사용 약속을 한다.  

▶ 개발자가 피그마 파일을 보고 쉽게 이해 할 수 있도록 디테일한 규칙을 쉽게 이해 할 수 있도록 노티스를 단다. 또한, 세부 설명을 파악할 수 있도록 깔끔하게 정리한다. 

▶ 콘텐츠 운영 파트가 가이드를 보고 일관된 디자인을 할 수 있도록 가이드를 제공한다. 

---