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

◆ 오늘 수강/복습 할 부분
Part3. UI 디자인 협업
- UI 디자인 가이드 

 
 
◆ 정리 및 느낀점

-오늘은 UI디자인 가이드에 대해서 배웠다. UI 디자인 가이드란 : 서비스에 사용되는 디자인 스타일 규칙과 가이드라인! 여기에는 2가지 가이드가 있는데, 1) UI개발가이드 2) 이미지 운영가이드가 각각 그것이다. 

 

- UI디자인 가이드가 필요한 이유는 아래와 같다.

1) 효율성 : 개발자에게 디자이너의 의도를 명확하게 전달하기 위해서 필요

2) 일관성 있는 사용자 경험 제공 가능

 

- UI디자인 가이드 작성시 고려사항

1) 타겟이 되는 디바이스, 언어 등 기본적인 기준 정리 필요 : ios, Aos 어떤 기준에 맞출건지 혼합할건지 등

2) 우선순위 고려하기 : 공통적으로 사용되는 가이드를 우선 작업 하여 개발자가 큰 틀을 잡을 수 있게 하기

3) 명칭 정리 (naming rule)

4) 다양한 플랫폼 고려 : 웹, 모바일, 모바일웹 환경으로 제공되기 때문에, 같은 컴포넌트여도 플랫폼 특성에 따라 다르게 고려해야함

5) 문서화 : 구성원 모두가 필요한 가이드를 쉽게 찾고, 만들어진 컴포넌트를 개발자가 사용할때 어떻게 사용할지 UI디자이너의 의도를 문서화 하는 것! 

 

- plusx의 UI디자인 가이드는 보통 아래 내용을 포함 

1)GNB, 2)Header, 3)Margin, 4)Typo, 5)Color, 6)Button, 7)Icon, 8)Text Input, 9)Popup 

* 여기서 잠깐 디자인 시스템과 UI 디자인 가이드가 다른 점은? 디자인 시스템 > UI디자인 가이드, 즉 디자인 시스템이 더 큰 개념이다! 

ㄴ plusx에서는 UI 디자인 가이드를 2종으로 배포하는데 한 가지가 UI 개발 가이드 또 한가지가 이미지 운영 가이드! 이다. 

UI 개발 가이드는 말그대로 UI 요소들을 안내하기 위함이고, 이미지 운영 가이드는 실제 앱을 운영하는 분들이 이미지를 어떻게 써야 할지 기재해둔 가이드라고 한다. 

 

- UI가이드 같은 경우, 패스트캠퍼스를 통해 플러스엑스에서 받은 강의자료가 있는데, 요걸 참고해서 보면 조금더 이해가 쉽다. 

 

 

 

 

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