[제로베이스 UI/UX 파트타임 스쿨] 9주차 - (화) 레이아웃과 그리드시스템1 & XD 홈화면과 인터페이스

제로베이스 58일차 학습노트이다.

오늘은 인터페이스 디자인 기초의 레이아웃과 그리드시스템에 대해서 배웠다. 레이아웃과 그리드 시스템을 혼용하거나 똑같은 것이라고 생각하는 경우가 많지만, 실제로는 다른 것임을 알 수 있었다. 어떻게 보면 레이아웃을 짜기 위해 그리드 시스템을 이용하는 것일 수 있고 그리드 시스템에 따라서 레이아웃을 배치한다. 또한 특이했던 점이 스크린 사이즈에 대한 설명이었는데, 실제로 화면 디자인을 할 때에 가장 최신에 나온 디바이스 기준이 아닌, 오히려 한 두세대 전 디바이스를 기준으로 삼는다는 것이었다. 사람들이 가장 많이 쓰고 있는 것을 기준으로 삼는 것이 합리적이기에 이렇게 정한다고 한다.

---

오늘의 강의 내용

 

1. Screen Size

디자인을 할 때 해상도에 맞는 사이즈를 설정해야 한다. 그렇다면 해상도는 어떤 개념이냐면 화면에 점의 개수가 얼마나 되냐, 어느 정도 세밀하게 표현하는 것이냐이다. 같은 스크린 사이즈더라도 내부에 들어가는 점이 많을 수록 해상도가 커진다. 강사에 의하면 주로 디자인하는 해상도는 mdpi로 1배 기준이며 160 dpi를 가진다. 또한 mdpi가 보통 360 X 640인 경우가 많다고 한다.

 

2. Layout

레이아웃은 설계, 지면의 배열, 배치라는 뜻이다. 결국 레이아웃이 그리드를 만드는 것이 아니라 만들어진 그리드 안에 어떻게 배치할지 설계하는 일이라고 볼 수 있다. 레이아웃에 따라 같은 콘텐츠를 담고 있는 화면도 전혀 다른 룩앤필이 나타난다. 때문에 레이아웃은 효과적인 정보전달에도 필요하지만, 심미성을 올리는 데에도 역할을 한다.

 

3. Grid System

그리드 시스템은 디자인에서 화면을 구성하는 요소들을 일관된 시스템 속에 배치하기 위해 만드는 것이다. 보이지 않는 가이드라인이라고 보면 설명이 쉽다. 그리드 시스템을 먼저 설정해 두고 디자인하지 않으면 일관성있는 디자인을 하기 어렵고, 효율적이지 못하다. 예를 들어 웹에 있던 콘텐츠를 앱으로 옮긴다고 했을 때 그리드가 먼저 설정되어 있지 않았다면 간격이나 크기가 기준 없이 변화되어 다른 분위기를 풍기게 될 여지가 높다.

---

위 내용 강의 이후 그리드 시스템을 세팅해 보는 작업도 실습으로 진행했다. 그리드의 경우 주로 최소 단위가 8px로 해두는 경우가 많다. 그 이유는 모바일이나 웹상의 엘리먼트들이 대부분 8의 배수로 사이즈가 지정되어 있는 경우가 많기 때문이다. 이렇게 그리드를 설정해두면 엘리먼트 요소를 그리기가 매우 간편해지고, 계속해서 일관된 디자인을 해 나갈 수가 있다. 이후 XD 홈화면과 인터페이스에 대한 강의도 들었는데, 대부분이 아는 내용일 것이라 생각되어 설명은 넘어가겠다.

 

이 글은 제로베이스 UI/UX 파트타임 강의 자료 일부를 발췌하여 작성되었습니다.