본문 바로가기
디자인/사수들의 꿀정보

레이아웃 UI 디자인 연습방법

by 디자이너 헤이즐 2021. 4. 6.

출처

m.blog.naver.com/salvia0623/221441418741

 

레이아웃 UI 디자인 연습방법

​요즘 이전 디자인 작업물을 정리하다가 옛날에 디자인 공부 했던 흔적을 발견했어요! UI 디자인 공부하...

blog.naver.com

screencapture-m-blog-naver-salvia0623-221441418741-2021-04-06-19_57_28.pdf
6.61MB


디자인을 잘한 UI일 수록일정한 그리드 폼과 규칙적인 컴포넌트가 존재하며 철처하게 지킨다.

 

큰면 -> 중간면 -> 작은면 순으로 그리드 박스를 그려보며 규칙성을 이해하는 연습이 필요하다.

 

그리드를 다 표시했다면 글자 간 간격, 사진 여백, 컴포넌트 크기에 주목해야 한다.

그리드 박스만 놓고 보면 훨씬 더 잘보인다.

 

가장 옅은 파란색이 가장 큰 면으로 나뉜 레이어다.
색이 진해질 수록 중간면, 작은면으로 면이 쪼개진 레이아웃이 만들어진다.
색이 진한 그리드 박스는 글자, 사진, 컨포넌트에 해당한다.

 

디자이너는 디자인 작업할 때 위처럼 눈에 보이지 않는 가상의 그리드 박스 or 선을 만든다.
저 그리드 박스 안에서 가독성, 안정감, 무게감, 통일감 등을 모두 고려해서 레이아웃을 디자인한다.

그리드, 레이아웃, 컴포넌트가 익숙하지 않으면 위처럼 규격화하는 반복연습이 필요하다.
새하얀 캔버스에서도 가상의 그리드 박스를 만들 수 있는 수준이 되면, 

그때는 눈 대중만으로 여백/간격 값이 정확히 몇 px, mm 인지 파악할 수 있다.

 

안정적인 레이아웃과 그리드폼이 안나온다면

의식적으로 그리드박스를 만들어서 레이아웃을 구성하는 방법을 익히는 것이 좋다.