[제로베이스 UI/UX 파트타임 스쿨] 7주차 - (화) 레이아웃

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

레이아웃에 대해서 배우는 시간이었다. 보통 이전까지는 PC화면에 맞추어 16대 9의 비율로 레이아웃을 짜고 디자인하였었는데, 모바일에서의 레이아웃을 그려보는 것은 처음이라 신기했다. 보통 PC는 가로로 길어서 좌우 여백을 매우 많이 주는 것이 일반적인데, 모바일은 반대로 세로로 길고 화면이 작다보니 여백을 많이 주지 않는 것이 일반적이이었다. 또한, 세로로 스크롤을 하는 것에 사용자들이 익숙하다는 것을 알고 가로로 너무 많은 레이아웃을 쪼개 놓거나 가로 스크롤은 필수적일 때 빼고는 최소화하여야 한다.

---

오늘의 강의 내용

 

1. 레이아웃

오늘 실습한 레이아웃은 회색 배경에 하얀색의 모듈들로 나눠지는 화면이었다. 컨테이너라고도 하는 모듈은 너무 많이 분리되거나 너무 간격이 작게되면 사용자는 복잡함을 느낀다. 먼저 표시할 정보를 최소화하고, 주요한 정보들만 제공하는 것이 좋다. 또한 모듈간 간격도 하나의 디자인 요소로 치기 때문에 이 요소의 수를 줄이려면 각 간격을 너무 다르게 하지 않는 게 좋다. 이를 위해서는 큰 덩어리로 묶어주는 것이 필요하며, 모듈 안의 내용도 같은 정보들은 최대한 묶어 보여주는 것이 좋다.

 

특히 제목과 모듈을 따로 놓는 경우가 많은데, 제목을 모듈 안에 넣어주는 것만으로도 더 깔끔해보인다. 모듈 밖에는 내용을 적지 않고, 모든 요소들을 묶을 수 있는 것들을 묶어 모듈 안에 넣어두면 정보 인식이 쉬워지는 것을 실습을 통해 발견했다. 이 모듈 안에 모든 요소를 넣다보니, 위계가 더 중요해질 수 밖에 없고, 때문에 가장 먼저 보여주는 텍스트나 그래픽 요소는 확실히 크게 제공하는 것이 바람직하다.

---

앞서 말했듯 모바일의 레이아웃을 배우는 것은 처음인데, PC와는 느낌이 많이 달라 새로웠다. 이번에 배운 모듈은 보통 토스에서 흔히 볼 수 있는 모듈이 많이 사용된 레이아웃이었는데, 이미지가 있거나 모듈이 없는 화면에서 사용되는 레이아웃도 보고 싶다는 생각이 들었다. 레이아웃을 만들어 보는 실습 보다는 다양한 레이아웃을 보여주고 어떤 것이 중요한지에 대한 설명이 되는 수업이 더 중요한 것 같다.

 

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