플러스엑스 UI패키지 강의 후기 - (10)
◆ 오늘 수강/복습 할 부분
Part2. UI 디자인 기초
- 그리드에 대한 이해
◆ 정리 및 느낀점
- UI디자인시 그리드가 필수일까? 라는 고민을 많이했었는데, 오늘 수업을 듣고 결론을 내릴 수 있었다. 그리드는 필수가 아니다! 다만 권장되는 가이드일 뿐! 그리드를 사용하면 1)디자인에 통일성을 부여할 수 있고 2)내부적으로 기준이 설정되어 협업이 용이 3)해상도 대응에 유리해서 특히 반응형 웹사이트 제작시에 좋고 4)유저로 하여금 일관적인 그리드로 긍정적인 서비스 경험을 유지할 수 있는 장점이 있다. 다만 꼭 그리드를 사용하지 않더라도 크리에이티브한 레이아웃을 만드는 경우도 있기 때문에, 결국 본인의 선택인 것이다.
- 일단 그리드 기본 잡고 넘어가기! 그리드는, 마진(컨테이너를 둘러싸고 있는 값), 컬럼(실제 메인 그리드 기준), 그리고 컬럼 사이의 값인 거터로 이루어져 있다. 양끝 컬럼의 크기를 우리는 컨테이너라고 한다. 보통 그리드를 잡을 때, 마진값을 먼저잡고 이후 컨테이너를 쪼개 컬럼과 거터의 값을 잡는다. 정수로 딱 떨어지게 잡고 싶다면 아래 사이트를 참고하면 좋다. 나도 자주씀
Grid Calculator by Nicolaj Kirkgaard Nielsen
gridcalculator.dk
- 위에서 말한 것처럼 마진을 잡고, 컨테이너를 쪼개 컬럼과 거터를 잡는다고 했는데, 그럼 이 마진값과 컬럼값은 어떻게 정할까? 이건 서비스의 성격에 따라 달라진다고 한다. 다만, 해상도별 디바이스별로 권장되는 그리드컬럼이 있다고 하니 아래를 참고하자!
- 해상도에 따른 권장그리드
1) 1920 : 12개 컬럼 권장
2) 1440, 1366 : 12개 컬럼 권장
3) 1280, 1024 : 8개 컬럼 권장
4) 768, 720, 360 : 2~6개 컬럼 권장
- 디바이스에 따른 권장그리드
1) 데스크톱(1920~768) : 12 컬럼 권장
2) 모바일(767~320) : 4컬럼 권장
- 반응형 작업시
1) 1920~1280 : 12컬럼
2) 1279~768 : 6컬럼
3) 767~360 : 4컬럼
그리고 그리드를 포함 디자인을할때 8포인트 그리드 시스템을 이용하면 좋다고 하는데, 8포인트로 해야 추후 1.5배~4배까지 이미지 추출시에 소수점으로 떨어지지 않고 깔끔하게 맞아 떨어지기 때문이다. 근데 막상 해보면 모든걸 8포인트로 맞추는것은 한계가 있어서 보통 나도 4포인트, 2포인트 짝수로만 떨어지게 하자 싶을 때도 있음..
◆ 그럼 오늘의 수강 인증 샷!
