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

◆ 오늘 수강/복습 할 부분
Part2. UI 디자인 기초
- UI구조의 이해 
 
 
◆ 정리 및 느낀점
- 앞에서도 계속 나왔던 이야기이지만, UI는 APP인지 WEB인지에 따라 성격이 달라지므로, 이부분을 항상 염두에 두어야 한다. 요게 오늘 강의에서 가장 첫 번째로 정리해야 했던 점! 
 
- 두 번째로 인지하고 싶은 점은 레이어 정리를 잘하자.... 최근에 했던 작업중에 레이어 정리를 꼼꼼하게 잘한게 하나도 없는것 같다.. 같이 협업하시는 분들이 힘드셨을 것 같음.. 앞으로라도 잘해야지.
 
- UI구조는 조직성과 일관성 2가지 기준을 두고 만들어지게 되는데, 조직성은 적절하게 그룹핑이 되어있는지, 일관성은 사용자가 예측 가능한지를 기준으로 둔다고 한다. 
 
- UI 구조 : Header or Top / Contents or Main / Footer (Navigation Bar = APP인 경우)
WEB인지 APP인지에 따라 살짝 달라지며 APP인 경우 Navigation Bar가 푸터 대신 추가 될 수 있다. 
 
1) Header or Top
: 디자이너의 창의성을 가장 먼저 보여줄 수 있는 공간이고, 네비게이션, 배너 등을 포함하는 공간
: 사이드바를 활용해서 다양하게 구성하기도 함
: WEB의 경우 보통 PC를 잡고 사이즈를 줄여 MO에서 활용한다 (MO의 해상도가 더 작기 때문)
: APP의 경우 네비게이션바를 밑으로하고, 헤더에 Search bar를 넣기도 한다.
: 중요!! 스크롤시 고정될지 말지도 정해야 함. 
 
2) Contents or Main 
: 그리드에 맞게 콘텐츠 나열 (보통 위에서 아래, 오른쪽 왼쪽의 시선을 따라간다) 
: 버튼, 텍스트, 이미지 모두 들어가는 방대한 영역
 
3) Footer 
: 웹사이트 추가 탐색, 정보 안내
: 로고, 사이트맵, SNS, 이용약관, 회사정보로 구성된 경우가 많으나 서비스 성격에 따라 달라짐
: 상반되는 color를 사용하는 경우가 많고
: 마찬가지로 WEB의 경우 PC/MO 구조가 다르다.
 
◆ 그럼 오늘의 수강 인증 샷!