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

◆ 오늘 수강/복습 할 부분
Part2. UI 디자인 기초
- PlusX와 그리드 
 
 
◆ 정리 및 느낀점
- 오늘 강의를 통해 그리드와 레이아웃에 대해 실무 감이 조금이나마 잡히는 느낌이다. 나는 혼자 UI를 디자인하면서 그리드가 없으면 꼭 기초가 안된 애 처럼 보일까봐 노심초사 하면서 그리드를 그려왔는데, 오늘 강의를 듣고보니.. 그리드 ... 너 꼭 필요한 건 아니었구나... 특히, 그럼 어떤 그리드를 쓰는게 좋을까 많이 고민을 했었는데, 이것도 딱 하나를 정해두기보다 그 상황에 따라 여러가지로 다르게 하는게 맞다는 것도 답을 얻어서 기뻤다. 오히려 기존 것에 얽매이면 새로운 그리드를 시도하지 못해서 creative가 저하 될 수 있다고 함... plusx도 새로운 아이디어를 다각도로 시도해보기 위해서 기존그리드를 계속 사용하지 않는다고 한다. 
 
- 그럼 plusx에서는 어떻게 그리드를 설정할까?
1) 기준해상도를 먼저 설정한다. 앞에서 수없이 말한것 처럼 프로젝트 일정 및 서비스 성격에 따라 기준해상도를 정하고, 디자인을 잡고 제안한 뒤 선택된 디자인 그리드를 바탕으로 구축에 들어간다고 한다.
 
2) 그리드 시스템을 구축한다. 그리드 시스템이란 무얼까? 마진과 컬럼을 잡고 이를 시스템화 하는 것이라고 보면된다. 플러스엑스에서는 마진을 먼저 잡고 이후 컬럼을 잡는다고 한다. 특히 마진은 4배수 또는 5배수로 잡는다고 하니, 참고하면 좋을듯. 더불어 그리드 잡을때, 디자인 트렌드나 서비스 성격 브랜드 정체성도 참고한다고 하니.. 그냥 이뻐 보이는걸 잡는게 절대 아니다. 
 
ㅇ 반응형의 경우 분기점별로 어떻게 변경될지 그리드 테스트를하고, 컬럼 그리드를 사용하며 모바일은 6분할 한다고 한다. 나는 4분할 했었는데, 3단 레이아웃 생각하면 앞으로 나도 6분할 써야지
ㅇ 적응형은 테스트 없이 PC기반으로 모바일 바로 배리한다고 한다. 
 
이번 프로젝트 때 업체에서 모바일 퍼스트라고 해서 모바일 먼저 디자인해야 한다고 했는데, 이것도 그렇게 정답인 이야기가 아닌 것도 알게 됐음.. 나도 내 경험상 모바일하고 PC디자인 하면 화면이 너무 비어보이는게 문제여서, PC부터 시작했던 거였는데, 플러스엑스 동일하게 진행한다고 하니 자신감을 가져도 되겠다. 더불어, 꼭 명확한 그리드 가이드보다도, 선만 그어두고 시작하는 경우도 많다고 하니 참고 할 것!
 
3) 그리드 가이드를 제작한다. 그리드 가이드는 해상도 변화에 따라 변경되는 그리드와 레이아웃을 그려논 가이드라고 생각하면 된다. 요 작업은 한 번도 해본적이 없는데, 이번 플젝 끝나면 혼자서 해봐야지... 이렇게 그리드 가이드를 제작함으로서 ui디자이너간 혼선이 줄어든다고 하니, 협업자가 많은 경우 필수인 것 같다. 
 
4) 마지막으로 그리드를 적용하면 완성! 플러스엑스에서 실제로 진행했던 몇가지 프로젝트를 봤는데, 아예 거터 없이 잡은 그리드도 있어서 신기했고, 역시 디자인에 정답이란건 있을 수 없구나 하는 생각을 다시 한 번 했다. 잘 모른다고 주눅들지 말자!! 
 
◆ 그럼 오늘의 수강 인증 샷!